byuckchon-frontend-cli 1.1.0 → 1.4.0

package/src/context/detect.js

@@ -0,0 +1,228 @@
+import fs from 'node:fs/promises';
+import path from 'node:path';
+
+/**
+ * 프로젝트 디렉터리를 분석해서 "AI 가 알아야 할 사실들" 을 뽑아낸다.
+ *
+ * 입력: projectDir (절대 경로)
+ * 출력:
+ *   {
+ *     framework: 'next' | 'expo' | 'electron' | 'vite-react' | 'cra' | 'react' | 'remix' | 'unknown',
+ *     language:  'ts' | 'js',
+ *     styling:   { tailwind, cssModules, styledComponents, emotion, vanillaExtract },
+ *     packageManager: 'npm' | 'yarn' | 'pnpm' | 'bun' | 'unknown',
+ *     routing:   'app-router' | 'pages-router' | 'expo-router' | 'react-router' | null,
+ *     componentDirs: string[],            // 후보 컴포넌트 폴더 (있는 것만)
+ *     designTokensFiles: string[],        // tailwind.config / theme 토큰 파일들
+ *     hasStorybook: boolean,
+ *     hasTests: 'jest' | 'vitest' | 'playwright' | null,
+ *     pkg: { name, version, dependencies, devDependencies },
+ *   }
+ *
+ * 모든 값은 best-effort. 못 찾으면 보수적으로 unknown / null / [] 로 채운다.
+ */
+export async function detectProjectContext(projectDir = process.cwd()) {
+  const root = path.resolve(projectDir);
+
+  const pkg = await readJsonSafe(path.join(root, 'package.json'));
+  if (!pkg) {
+    return {
+      framework: 'unknown',
+      language: 'js',
+      styling: emptyStyling(),
+      packageManager: await detectPackageManager(root),
+      routing: null,
+      componentDirs: [],
+      designTokensFiles: [],
+      hasStorybook: false,
+      hasTests: null,
+      pkg: null,
+      isProject: false,
+    };
+  }
+
+  const deps = { ...(pkg.dependencies ?? {}), ...(pkg.devDependencies ?? {}) };
+  const has = (name) => Object.prototype.hasOwnProperty.call(deps, name);
+
+  // ── 프레임워크 ─────────────────────────────────────────────
+  let framework = 'unknown';
+  if (has('expo') || has('expo-router')) framework = 'expo';
+  else if (has('electron')) framework = 'electron';
+  else if (has('next')) framework = 'next';
+  else if (has('@remix-run/react') || has('@remix-run/dev')) framework = 'remix';
+  else if (has('vite') && has('react')) framework = 'vite-react';
+  else if (has('react-scripts')) framework = 'cra';
+  else if (has('react')) framework = 'react';
+
+  // ── 언어 ────────────────────────────────────────────────
+  const hasTsConfig = await exists(path.join(root, 'tsconfig.json'));
+  const language = hasTsConfig || has('typescript') ? 'ts' : 'js';
+
+  // ── 스타일 ─────────────────────────────────────────────
+  const styling = {
+    tailwind:
+      has('tailwindcss') ||
+      (await anyExists(root, [
+        'tailwind.config.js',
+        'tailwind.config.ts',
+        'tailwind.config.cjs',
+        'tailwind.config.mjs',
+      ])),
+    cssModules: false, // 모듈 css 는 파일 패턴으로 추정 (아래에서 처리)
+    styledComponents: has('styled-components'),
+    emotion: has('@emotion/react') || has('@emotion/styled'),
+    vanillaExtract: has('@vanilla-extract/css'),
+  };
+
+  // ── 라우팅 ─────────────────────────────────────────────
+  let routing = null;
+  if (framework === 'next') {
+    if (await exists(path.join(root, 'app'))) routing = 'app-router';
+    else if (await exists(path.join(root, 'src/app'))) routing = 'app-router';
+    else if (await exists(path.join(root, 'pages'))) routing = 'pages-router';
+    else if (await exists(path.join(root, 'src/pages'))) routing = 'pages-router';
+  } else if (framework === 'expo') {
+    routing = (await exists(path.join(root, 'app'))) ? 'expo-router' : null;
+  } else if (has('react-router-dom') || has('react-router')) {
+    routing = 'react-router';
+  }
+
+  // ── 컴포넌트 디렉터리 후보 ─────────────────────────────
+  const componentCandidates = [
+    'src/components',
+    'src/ui',
+    'app/components',
+    'app/_components',
+    'components',
+    'ui',
+  ];
+  const componentDirs = [];
+  for (const c of componentCandidates) {
+    if (await exists(path.join(root, c))) componentDirs.push(c);
+  }
+  // .module.css 파일이 한 개라도 있으면 cssModules = true 로 추정.
+  if (componentDirs.length) {
+    styling.cssModules = await hasFileWithExt(
+      path.join(root, componentDirs[0]),
+      '.module.css',
+    );
+  }
+
+  // ── 디자인 토큰 후보 파일 ─────────────────────────────
+  const tokenCandidates = [
+    'tailwind.config.js',
+    'tailwind.config.ts',
+    'tailwind.config.cjs',
+    'tailwind.config.mjs',
+    'src/styles/tokens.ts',
+    'src/styles/tokens.css',
+    'src/styles/theme.ts',
+    'src/theme.ts',
+    'theme.config.ts',
+    'token.config.js',
+  ];
+  const designTokensFiles = [];
+  for (const f of tokenCandidates) {
+    if (await exists(path.join(root, f))) designTokensFiles.push(f);
+  }
+
+  // ── 테스트/스토리북 ─────────────────────────────────
+  const hasStorybook = has('@storybook/react') || has('@storybook/nextjs') || has('storybook');
+  let hasTests = null;
+  if (has('vitest')) hasTests = 'vitest';
+  else if (has('jest') || has('@testing-library/react')) hasTests = 'jest';
+  if (has('@playwright/test')) hasTests = hasTests ? hasTests : 'playwright';
+
+  return {
+    framework,
+    language,
+    styling,
+    packageManager: await detectPackageManager(root),
+    routing,
+    componentDirs,
+    designTokensFiles,
+    hasStorybook,
+    hasTests,
+    pkg: {
+      name: pkg.name,
+      version: pkg.version,
+      dependencies: pkg.dependencies ?? {},
+      devDependencies: pkg.devDependencies ?? {},
+    },
+    isProject: true,
+  };
+}
+
+function emptyStyling() {
+  return {
+    tailwind: false,
+    cssModules: false,
+    styledComponents: false,
+    emotion: false,
+    vanillaExtract: false,
+  };
+}
+
+async function exists(p) {
+  try {
+    await fs.access(p);
+    return true;
+  } catch {
+    return false;
+  }
+}
+
+async function anyExists(root, files) {
+  for (const f of files) {
+    if (await exists(path.join(root, f))) return true;
+  }
+  return false;
+}
+
+async function readJsonSafe(file) {
+  try {
+    const raw = await fs.readFile(file, 'utf8');
+    return JSON.parse(raw);
+  } catch {
+    return null;
+  }
+}
+
+async function detectPackageManager(root) {
+  if (await exists(path.join(root, 'pnpm-lock.yaml'))) return 'pnpm';
+  if (await exists(path.join(root, 'yarn.lock'))) return 'yarn';
+  if (await exists(path.join(root, 'bun.lockb'))) return 'bun';
+  if (await exists(path.join(root, 'package-lock.json'))) return 'npm';
+  return 'unknown';
+}
+
+async function hasFileWithExt(dir, ext) {
+  try {
+    const entries = await fs.readdir(dir, { withFileTypes: true });
+    for (const e of entries) {
+      if (e.isFile() && e.name.endsWith(ext)) return true;
+      if (e.isDirectory()) {
+        if (await hasFileWithExt(path.join(dir, e.name), ext)) return true;
+      }
+    }
+  } catch {
+    /* noop */
+  }
+  return false;
+}
+
+/** 사람이 읽기 좋은 라벨로 압축. */
+export function summarizeContext(ctx) {
+  if (!ctx?.isProject) return '(package.json 없음 — 프로젝트 외부)';
+  const styling = Object.entries(ctx.styling)
+    .filter(([, v]) => v)
+    .map(([k]) => k);
+  const parts = [
+    ctx.framework,
+    ctx.language === 'ts' ? 'TypeScript' : 'JavaScript',
+    styling.length ? styling.join('+') : 'no styling detected',
+    ctx.packageManager,
+  ];
+  if (ctx.routing) parts.push(ctx.routing);
+  return parts.join(' · ');
+}

package/src/generators/createBcConfig.js

@@ -0,0 +1,58 @@
+import fs from 'node:fs/promises';
+import path from 'node:path';
+
+/**
+ * 새 프로젝트 루트에 `bc.config.json` 을 만든다.
+ *
+ * - bc chat / bc gen 등이 이 파일을 읽어 프로젝트 컨텍스트(Figma, API, 컨벤션)를
+ *   AI 에게 자동 주입한다.
+ * - API 키 같은 비밀값은 절대 여기 두지 말 것 (글로벌 설정 또는 .env 사용).
+ */
+export async function createBcConfig(rootDir, config) {
+  const bcConfig = {
+    $schema: 'https://byuckchon.dev/bc.schema.json',
+    ai: {
+      // null 이면 글로벌 기본 모델(=~/.bc/config.json) 을 따름.
+      model: config.aiModel ?? null,
+    },
+    design: {
+      figma: config.figmaUrl?.trim() || null,
+      figmaTokenEnv: 'FIGMA_TOKEN',
+    },
+    api: {
+      openapi: config.openapiUrl?.trim() || null,
+      baseUrl: null,
+    },
+    context: {
+      include: ['src/**/*.{ts,tsx,js,jsx}', 'bc.config.json'],
+      exclude: ['**/*.test.*', '**/__mocks__/**', 'node_modules/**', 'dist/**'],
+      maxFiles: 20,
+    },
+    framework: config.framework,
+    // init 단계에선 사용자가 React/Next 중 골랐고 TS/Tailwind 가 항상 들어가니
+    // 감지 결과를 미리 채워둔다 (bc adopt 의 detected 와 같은 모양).
+    detected: {
+      language: 'ts',
+      styling: {
+        tailwind: true,
+        cssModules: false,
+        styledComponents: false,
+        emotion: false,
+        vanillaExtract: false,
+      },
+      packageManager: 'npm',
+      routing: config.framework === 'next' ? 'app-router' : null,
+      componentDirs: ['src/components'],
+      designTokensFiles: [],
+      hasStorybook: false,
+      hasTests: null,
+      detectedAt: new Date().toISOString(),
+    },
+  };
+
+  await fs.writeFile(
+    path.join(rootDir, 'bc.config.json'),
+    JSON.stringify(bcConfig, null, 2) + '\n',
+    'utf8',
+  );
+}

package/src/generators/createProject.js

@@ -4,6 +4,7 @@ import { exec as execCallback } from 'child_process';
 import { promisify } from 'util';
 
 import { createBaseFiles } from './createBaseFiles.js';
+import { createBcConfig } from './createBcConfig.js';
 import { createFolders } from './createFolders.js';
 import { createPackageJson } from './createPackageJson.js';
 import { createReadme } from './createReadme.js';
@@ -24,6 +25,7 @@ export async function createProject(config) {
   await createPackageJson(rootDir, config);
   await createBaseFiles(rootDir, config);
   await createReadme(rootDir, config);
+  await createBcConfig(rootDir, config);
 
   // 최신 버전(latest 포함) 의존성을 실제로 설치해 lockfile까지 생성
   await exec('npm install', { cwd: rootDir });

package/src/history/store.js

@@ -0,0 +1,117 @@
+import fs from 'node:fs/promises';
+import path from 'node:path';
+import os from 'node:os';
+import crypto from 'node:crypto';
+
+import { findProjectConfigPath } from '../config/index.js';
+
+/**
+ * 챗 세션을 디스크에 저장/복구한다.
+ *
+ * 저장 위치 우선순위:
+ *   1) 프로젝트 안:  <projectRoot>/.bc/history/<id>.json
+ *      - bc.config.json 이 발견된 경우 그 옆 .bc 폴더 사용
+ *      - 자동으로 .gitignore 에 들어감 (사용자 .gitignore 에 .bc/ 박혀있다는 가정)
+ *   2) 글로벌:       ~/.bc/history/<cwdHash>/<id>.json
+ *      - bc.config.json 이 없는 경우 (예: 빈 폴더에서 bc chat 실행)
+ *
+ * 동기 디스크 IO 는 ink 렌더에 끼지 않게 모두 await.
+ */
+
+function cwdHash(cwd) {
+  return crypto.createHash('sha1').update(cwd).digest('hex').slice(0, 12);
+}
+
+function makeId(date = new Date()) {
+  const pad = (n, w = 2) => String(n).padStart(w, '0');
+  return `${date.getFullYear()}-${pad(date.getMonth() + 1)}-${pad(date.getDate())}_${pad(
+    date.getHours(),
+  )}-${pad(date.getMinutes())}-${pad(date.getSeconds())}`;
+}
+
+export async function getHistoryDir(cwd = process.cwd()) {
+  const projectConfig = await findProjectConfigPath(cwd);
+  if (projectConfig) {
+    return path.join(path.dirname(projectConfig), '.bc', 'history');
+  }
+  return path.join(os.homedir(), '.bc', 'history', cwdHash(cwd));
+}
+
+export async function createSession({ model, cwd = process.cwd() } = {}) {
+  const dir = await getHistoryDir(cwd);
+  await fs.mkdir(dir, { recursive: true });
+  const id = makeId();
+  const session = {
+    id,
+    startedAt: new Date().toISOString(),
+    updatedAt: new Date().toISOString(),
+    model,
+    cwd,
+    messages: [],
+  };
+  return { ...session, _file: path.join(dir, `${id}.json`) };
+}
+
+export async function saveSession(session) {
+  const file = session._file;
+  if (!file) throw new Error('session._file 누락');
+  const data = {
+    id: session.id,
+    startedAt: session.startedAt,
+    updatedAt: new Date().toISOString(),
+    model: session.model,
+    cwd: session.cwd,
+    messages: session.messages,
+  };
+  await fs.writeFile(file, JSON.stringify(data, null, 2) + '\n', 'utf8');
+}
+
+export async function listSessions(cwd = process.cwd(), { limit = 20 } = {}) {
+  const dir = await getHistoryDir(cwd);
+  let entries = [];
+  try {
+    entries = await fs.readdir(dir);
+  } catch (e) {
+    if (e.code === 'ENOENT') return [];
+    throw e;
+  }
+  const files = entries.filter((f) => f.endsWith('.json')).sort().reverse();
+  const out = [];
+  for (const name of files.slice(0, limit)) {
+    const file = path.join(dir, name);
+    try {
+      const raw = await fs.readFile(file, 'utf8');
+      const data = JSON.parse(raw);
+      const firstUser = data.messages?.find((m) => m.role === 'user');
+      out.push({
+        id: data.id,
+        file,
+        startedAt: data.startedAt,
+        updatedAt: data.updatedAt,
+        model: data.model,
+        turns: data.messages?.length ?? 0,
+        preview: firstUser?.text?.slice(0, 60) ?? '(빈 세션)',
+      });
+    } catch {
+      /* 잘못된 파일 스킵 */
+    }
+  }
+  return out;
+}
+
+export async function loadSession(idOrFile, cwd = process.cwd()) {
+  let file = idOrFile;
+  if (!file.endsWith('.json') || !path.isAbsolute(file)) {
+    const dir = await getHistoryDir(cwd);
+    file = path.join(dir, idOrFile.endsWith('.json') ? idOrFile : `${idOrFile}.json`);
+  }
+  const raw = await fs.readFile(file, 'utf8');
+  const data = JSON.parse(raw);
+  return { ...data, _file: file };
+}
+
+export async function loadLatestSession(cwd = process.cwd()) {
+  const list = await listSessions(cwd, { limit: 1 });
+  if (list.length === 0) return null;
+  return loadSession(list[0].id, cwd);
+}

package/src/indexer/chunker.js

@@ -0,0 +1,42 @@
+import crypto from 'node:crypto';
+
+/**
+ * 파일을 라인 기반 슬라이딩 윈도우로 청크 분할.
+ *
+ * v1 정책 — 단순하고 결정론적:
+ *   - 한 청크 ≈ 80 라인, 인접 청크끼리 20 라인 겹침.
+ *   - 너무 짧은 파일(80라인 이하)은 통째로 1청크.
+ *   - 청크 텍스트 앞에 "// FILE: <relpath>:start-end" 헤더를 붙여서
+ *     임베딩이 파일 정체성에 가중치를 두도록 한다.
+ *
+ * 더 똑똑한 AST 기반 청킹은 v2 (ts-morph 도입 후) 에서.
+ */
+export function chunkFile({ relPath, content, chunkSize = 80, overlap = 20 }) {
+  const lines = content.split('\n');
+  const total = lines.length;
+  if (total === 0) return [];
+
+  const chunks = [];
+  let start = 0;
+  while (start < total) {
+    const end = Math.min(start + chunkSize, total);
+    const slice = lines.slice(start, end).join('\n');
+    const text = `// FILE: ${relPath}:${start + 1}-${end}\n${slice}`;
+    chunks.push({
+      id: hashId(`${relPath}:${start + 1}-${end}`),
+      file: relPath,
+      startLine: start + 1,
+      endLine: end,
+      text,
+      hash: crypto.createHash('sha1').update(text).digest('hex'),
+    });
+    if (end >= total) break;
+    start = end - overlap;
+    if (start < 0) start = 0;
+  }
+  return chunks;
+}
+
+function hashId(s) {
+  return crypto.createHash('sha1').update(s).digest('hex').slice(0, 16);
+}

package/src/indexer/embed.js

@@ -0,0 +1,57 @@
+import { embed, embedMany } from 'ai';
+import { createOpenAI } from '@ai-sdk/openai';
+
+const DEFAULT_EMBED_MODEL = 'text-embedding-3-small';
+
+/**
+ * 임베딩은 OpenAI 만 지원 (Anthropic 은 임베딩 API 가 없다).
+ *
+ * effective.apiKeys.openai 또는 ENV(OPENAI_API_KEY)/gateway 를 사용.
+ * 키 없으면 명확한 에러로 종료.
+ */
+export function makeEmbeddingModel(effective) {
+  const apiKey = effective.apiKeys?.openai;
+  if (!apiKey && !effective.gateway) {
+    const err = new Error(
+      'OpenAI API 키가 필요합니다 (임베딩 전용).\n' +
+        '  - Anthropic 은 임베딩 API 를 제공하지 않습니다.\n' +
+        '  - `bc config set-key openai <key>` 또는 OPENAI_API_KEY 환경변수로 등록하세요.\n' +
+        '  - text-embedding-3-small 은 1M 토큰당 약 $0.02 로 매우 저렴합니다.',
+    );
+    err.code = 'BC_NO_OPENAI_KEY';
+    throw err;
+  }
+  const openai = createOpenAI({
+    apiKey: apiKey ?? 'gateway',
+    baseURL: effective.gateway ?? undefined,
+  });
+  return openai.embedding(DEFAULT_EMBED_MODEL);
+}
+
+/**
+ * 청크 배열을 받아 임베딩 벡터를 추가해서 돌려준다.
+ * 100개 단위 배치, 각 배치 내부에선 SDK 가 다시 OpenAI 한도에 맞춰 처리.
+ */
+export async function embedChunks(model, chunks, { batchSize = 100, onBatch } = {}) {
+  const out = [];
+  for (let i = 0; i < chunks.length; i += batchSize) {
+    const batch = chunks.slice(i, i + batchSize);
+    const { embeddings } = await embedMany({
+      model,
+      values: batch.map((c) => c.text),
+    });
+    for (let j = 0; j < batch.length; j++) {
+      out.push({ ...batch[j], embedding: embeddings[j] });
+    }
+    if (onBatch) onBatch({ done: out.length, total: chunks.length });
+  }
+  return out;
+}
+
+/** 단건 — 검색 쿼리 임베딩. */
+export async function embedQuery(model, query) {
+  const { embedding } = await embed({ model, value: query });
+  return embedding;
+}
+
+export { DEFAULT_EMBED_MODEL };

package/src/indexer/search.js

@@ -0,0 +1,41 @@
+import { embedQuery, makeEmbeddingModel } from './embed.js';
+import { loadIndex } from './store.js';
+
+/**
+ * 쿼리 텍스트와 모든 청크 사이 cosine similarity 를 계산해 top-K 를 돌려준다.
+ *
+ * @param {string} query
+ * @param {object} effective
+ * @param {object} [opts]
+ * @param {number} [opts.topK=5]
+ * @param {number} [opts.minScore=0]   너무 관련 없는 청크 컷오프 (0~1 스케일)
+ */
+export async function searchIndex(query, effective, { topK = 5, minScore = 0 } = {}) {
+  const idx = await loadIndex();
+  if (!idx || !idx.chunks?.length) return { ok: false, reason: 'no-index' };
+
+  const model = makeEmbeddingModel(effective);
+  const qVec = await embedQuery(model, query);
+
+  const scored = idx.chunks.map((c) => ({
+    chunk: c,
+    score: cosine(qVec, c.embedding),
+  }));
+  scored.sort((a, b) => b.score - a.score);
+  const top = scored.filter((s) => s.score >= minScore).slice(0, topK);
+  return { ok: true, results: top, total: idx.chunks.length };
+}
+
+function cosine(a, b) {
+  if (!a || !b || a.length !== b.length) return 0;
+  let dot = 0;
+  let na = 0;
+  let nb = 0;
+  for (let i = 0; i < a.length; i++) {
+    dot += a[i] * b[i];
+    na += a[i] * a[i];
+    nb += b[i] * b[i];
+  }
+  if (na === 0 || nb === 0) return 0;
+  return dot / (Math.sqrt(na) * Math.sqrt(nb));
+}