byuckchon-frontend-cli 1.1.0 → 1.4.0

package/src/ai/systemPrompt.js

@@ -0,0 +1,75 @@
+import path from 'node:path';
+
+import { CONFIG_PATHS } from '../config/index.js';
+
+/**
+ * 시스템 프롬프트를 만든다.
+ *
+ * 가능하면 bc.config.json 의 `framework` 와 `detected.*` 를 우선 사용해서
+ * 모델에게 정확한 스택을 알린다. 그게 없으면 보수적인 기본 가정만 박는다.
+ */
+export function buildSystemPrompt({ effective, paths, project }) {
+  const lines = [
+    '너는 Byuckchon 프론트엔드 팀의 페어 프로그래밍 AI 다.',
+    '한국어로 친근하고 간결하게 답한다. 코드 답변은 마크다운 코드블록(언어 태그 포함)으로 준다.',
+    '추측 대신 모르면 모른다고 말한다. 파일 경로를 언급할 때는 백틱으로 감싼다.',
+  ];
+
+  const stack = describeStack(project);
+  if (stack) {
+    lines.push('', '프로젝트 스택:');
+    for (const line of stack) lines.push('  ' + line);
+  } else {
+    lines.push(
+      '',
+      '프로젝트 스택을 모르면 React 19 + TypeScript 라고 가정한다.',
+    );
+  }
+
+  const meta = [];
+  if (paths.projectFile) {
+    meta.push(
+      `- 설정 파일: \`${
+        path.relative(process.cwd(), paths.projectFile) || CONFIG_PATHS.projectFileName
+      }\``,
+    );
+  }
+  if (project?.design?.figma) meta.push(`- Figma: ${project.design.figma}`);
+  if (project?.api?.openapi) meta.push(`- OpenAPI: ${project.api.openapi}`);
+  if (project?.api?.baseUrl) meta.push(`- API base URL: ${project.api.baseUrl}`);
+  if (effective?.model) meta.push(`- 사용 모델: ${effective.model}`);
+
+  if (meta.length) {
+    lines.push('', '추가 메타:', ...meta);
+  }
+
+  return lines.join('\n');
+}
+
+function describeStack(project) {
+  if (!project) return null;
+
+  const fw = project.framework;
+  const d = project.detected;
+  if (!fw && !d) return null;
+
+  const out = [];
+  if (fw) out.push('- 프레임워크: ' + fw);
+  if (d?.language) out.push('- 언어: ' + (d.language === 'ts' ? 'TypeScript' : 'JavaScript'));
+  if (d?.styling) {
+    const s = Object.entries(d.styling)
+      .filter(([, v]) => v)
+      .map(([k]) => k);
+    if (s.length) out.push('- 스타일링: ' + s.join(', '));
+  }
+  if (d?.packageManager && d.packageManager !== 'unknown')
+    out.push('- 패키지 매니저: ' + d.packageManager);
+  if (d?.routing) out.push('- 라우팅: ' + d.routing);
+  if (d?.componentDirs?.length)
+    out.push('- 새 컴포넌트는 다음 위치 중 하나에 만든다: ' + d.componentDirs.join(', '));
+  if (d?.designTokensFiles?.length)
+    out.push('- 디자인 토큰 파일: ' + d.designTokensFiles.join(', ') + ' — 색/사이즈는 가능한 한 토큰 사용');
+  if (d?.hasStorybook) out.push('- Storybook 사용 중. 새 컴포넌트는 .stories.tsx 도 같이 제안.');
+  if (d?.hasTests) out.push('- 테스트 도구: ' + d.hasTests + '. 새 코드는 테스트도 같이 제안.');
+  return out;
+}

package/src/ai/tokenMeter.js

@@ -0,0 +1,65 @@
+/**
+ * 한 chat 세션 동안 토큰/비용을 누적한다.
+ *
+ * AI SDK 의 streamText 결과에서는 `await result.usage` 로 input/output 토큰을
+ * 받을 수 있다. 이걸 모델 메타의 가격과 곱해 추정 비용을 계산한다.
+ *
+ * 캐시 히트는 SDK 가 별도 필드로 주는 경우가 있어서 들어오면 반영, 없으면 0.
+ */
+export class TokenMeter {
+  constructor(modelMeta, limits = {}) {
+    this.meta = modelMeta;
+    this.limits = limits;
+    this.totals = {
+      input: 0,
+      output: 0,
+      cachedInput: 0,
+      requests: 0,
+      costUsd: 0,
+    };
+  }
+
+  add(usage) {
+    if (!usage) return;
+    const inputTokens = usage.promptTokens ?? usage.inputTokens ?? 0;
+    const outputTokens = usage.completionTokens ?? usage.outputTokens ?? 0;
+    const cached =
+      usage.cachedPromptTokens ?? usage.cachedInputTokens ?? 0;
+
+    const billableInput = Math.max(0, inputTokens - cached);
+    const p = this.meta.pricing ?? { input: 0, output: 0, cachedInput: 0 };
+
+    const cost =
+      (billableInput * p.input) / 1_000_000 +
+      (cached * (p.cachedInput ?? p.input)) / 1_000_000 +
+      (outputTokens * p.output) / 1_000_000;
+
+    this.totals.input += inputTokens;
+    this.totals.output += outputTokens;
+    this.totals.cachedInput += cached;
+    this.totals.requests += 1;
+    this.totals.costUsd += cost;
+  }
+
+  /** 다음 요청을 실제로 보낼지 사용자에게 물어봐야 하는지 여부. */
+  shouldConfirmNextRequest(estimatedInputTokens) {
+    const cap = this.limits?.confirmAtTokens ?? Infinity;
+    return estimatedInputTokens >= cap;
+  }
+
+  /** 누적이 경고선을 넘었는지. */
+  shouldWarn() {
+    const cap = this.limits?.warnAtTokens ?? Infinity;
+    return this.totals.input + this.totals.output >= cap;
+  }
+
+  format() {
+    const t = this.totals;
+    const fmt = (n) => n.toLocaleString('en-US');
+    const cost =
+      t.costUsd >= 0.01 ? `$${t.costUsd.toFixed(3)}` : `$${t.costUsd.toFixed(5)}`;
+    return `${this.meta.id} · ${fmt(t.input)} in / ${fmt(t.output)} out · cached ${fmt(
+      t.cachedInput,
+    )} · ${t.requests} req · ~${cost}`;
+  }
+}

package/src/commands/adopt.js

@@ -0,0 +1,146 @@
+import fs from 'node:fs/promises';
+import path from 'node:path';
+
+import chalk from 'chalk';
+import inquirer from 'inquirer';
+
+import { detectProjectContext, summarizeContext } from '../context/detect.js';
+import { CONFIG_PATHS } from '../config/index.js';
+import { modelChoices, DEFAULT_MODEL_ID } from '../ai/models.js';
+
+/**
+ * `bc adopt`
+ *
+ * 기존 프로젝트(현재 디렉터리)에 bc.config.json 만 살포시 깔아준다.
+ * 소스 코드는 절대 건드리지 않는다.
+ *
+ * 흐름:
+ *   1) 자동 감지(framework, styling, language, routing 등) 결과를 보여주고
+ *   2) 모델·Figma·OpenAPI URL 만 추가로 묻고
+ *   3) bc.config.json 생성/덮어쓰기 (이미 있으면 confirm)
+ */
+export async function adoptCommand(opts = {}) {
+  const cwd = process.cwd();
+  const targetFile = path.join(cwd, CONFIG_PATHS.projectFileName);
+
+  console.log(chalk.bold.cyan('\n  bc adopt — 기존 프로젝트에 bc 설정 추가\n'));
+
+  const ctx = await detectProjectContext(cwd);
+  if (!ctx.isProject) {
+    console.log(chalk.yellow('  ⚠ package.json 을 찾지 못했습니다.'));
+    console.log(chalk.dim('    프로젝트 루트에서 실행해주세요. 아니면 새로 만들려면 `bc init`.\n'));
+    process.exit(1);
+  }
+
+  console.log(chalk.bold('  감지된 프로젝트'));
+  console.log(`    ${chalk.dim('이름     ')} ${ctx.pkg.name ?? '(이름 없음)'}`);
+  console.log(`    ${chalk.dim('스택     ')} ${summarizeContext(ctx)}`);
+  if (ctx.componentDirs.length) {
+    console.log(`    ${chalk.dim('컴포넌트 ')} ${ctx.componentDirs.join(', ')}`);
+  }
+  if (ctx.designTokensFiles.length) {
+    console.log(`    ${chalk.dim('토큰파일 ')} ${ctx.designTokensFiles.join(', ')}`);
+  }
+  if (ctx.hasStorybook) console.log(`    ${chalk.dim('스토리북 ')} 있음`);
+  if (ctx.hasTests) console.log(`    ${chalk.dim('테스트   ')} ${ctx.hasTests}`);
+  console.log();
+
+  // 이미 bc.config.json 이 있으면 덮어쓰기 확인
+  let existing = null;
+  try {
+    existing = JSON.parse(await fs.readFile(targetFile, 'utf8'));
+  } catch (e) {
+    if (e.code !== 'ENOENT') {
+      console.log(chalk.yellow('  ⚠ 기존 bc.config.json 을 읽지 못했습니다 — 새로 작성합니다.'));
+    }
+  }
+
+  if (existing && !opts.force) {
+    const { ok } = await inquirer.prompt([
+      {
+        type: 'confirm',
+        name: 'ok',
+        message: 'bc.config.json 이 이미 있습니다. 새 값으로 머지할까요?',
+        default: true,
+      },
+    ]);
+    if (!ok) {
+      console.log(chalk.dim('  취소했습니다.\n'));
+      return;
+    }
+  }
+
+  const answers = await inquirer.prompt([
+    {
+      type: 'list',
+      name: 'aiModel',
+      message: '이 프로젝트에서 기본으로 쓸 AI 모델은?',
+      choices: [
+        ...modelChoices(),
+        { name: '글로벌 기본값 따르기 (변경 없음)', value: null },
+      ],
+      default: existing?.ai?.model ?? DEFAULT_MODEL_ID,
+    },
+    {
+      type: 'input',
+      name: 'figmaUrl',
+      message: 'Figma 파일/노드 URL (선택, 엔터로 건너뛰기):',
+      default: existing?.design?.figma ?? '',
+    },
+    {
+      type: 'input',
+      name: 'openapiUrl',
+      message: '백엔드 OpenAPI(Swagger) URL (선택):',
+      default: existing?.api?.openapi ?? '',
+    },
+    {
+      type: 'input',
+      name: 'apiBaseUrl',
+      message: 'API base URL (선택):',
+      default: existing?.api?.baseUrl ?? '',
+    },
+  ]);
+
+  const next = {
+    $schema: 'https://byuckchon.dev/bc.schema.json',
+    ai: {
+      model: answers.aiModel ?? null,
+    },
+    design: {
+      figma: answers.figmaUrl?.trim() || null,
+      figmaTokenEnv: existing?.design?.figmaTokenEnv ?? 'FIGMA_TOKEN',
+    },
+    api: {
+      openapi: answers.openapiUrl?.trim() || null,
+      baseUrl: answers.apiBaseUrl?.trim() || null,
+    },
+    context: existing?.context ?? {
+      include: ['src/**/*.{ts,tsx,js,jsx}', 'app/**/*.{ts,tsx,js,jsx}', 'bc.config.json'],
+      exclude: ['**/*.test.*', '**/__mocks__/**', 'node_modules/**', 'dist/**', '.next/**'],
+      maxFiles: 20,
+    },
+    framework: ctx.framework,
+    detected: {
+      language: ctx.language,
+      styling: ctx.styling,
+      packageManager: ctx.packageManager,
+      routing: ctx.routing,
+      componentDirs: ctx.componentDirs,
+      designTokensFiles: ctx.designTokensFiles,
+      hasStorybook: ctx.hasStorybook,
+      hasTests: ctx.hasTests,
+      detectedAt: new Date().toISOString(),
+    },
+  };
+
+  await fs.writeFile(targetFile, JSON.stringify(next, null, 2) + '\n', 'utf8');
+
+  console.log(chalk.green(`\n  ✓ ${CONFIG_PATHS.projectFileName} 작성 완료.`));
+  console.log(chalk.dim(`    ${targetFile}\n`));
+  console.log(chalk.dim('  다음:'));
+  if (!process.env.ANTHROPIC_API_KEY) {
+    console.log(chalk.dim('    bc config set-key anthropic    # API 키 등록'));
+  }
+  console.log(chalk.dim('    bc chat                        # 이 프로젝트 컨텍스트로 대화'));
+  console.log();
+}

package/src/commands/chat.js

@@ -0,0 +1,300 @@
+import process from 'node:process';
+
+import chalk from 'chalk';
+import { streamText } from 'ai';
+
+import { loadEffectiveConfig } from '../config/index.js';
+import { resolveModel } from '../ai/provider.js';
+import { TokenMeter } from '../ai/tokenMeter.js';
+import { buildSystemPrompt } from '../ai/systemPrompt.js';
+import { findModel } from '../ai/models.js';
+import {
+  createSession,
+  saveSession,
+  listSessions,
+  loadSession,
+  loadLatestSession,
+} from '../history/store.js';
+import { getCachedOpenApi } from '../openapi/cache.js';
+import { summarizeOpenApi } from '../openapi/summary.js';
+
+/**
+ * `bc chat`
+ *
+ * - TTY (사람이 직접 띄운 터미널) → ink 기반 풀 TUI
+ * - --once "질문"  또는  비-TTY (파이프/CI) → 단순 스트리밍 후 종료
+ * - --continue: 마지막 세션 이어가기
+ * - --resume <id>: 특정 세션 이어가기
+ * - --list-history: 저장된 세션 목록만 출력
+ */
+export async function chatCommand(opts = {}) {
+  if (opts.listHistory) {
+    return printHistoryList();
+  }
+
+  let cfg;
+  try {
+    cfg = await loadEffectiveConfig();
+  } catch (err) {
+    console.error(chalk.red('설정을 읽을 수 없습니다: ') + err.message);
+    process.exit(1);
+  }
+
+  if (opts.model) {
+    if (!findModel(opts.model)) {
+      console.error(chalk.red(`알 수 없는 모델: ${opts.model}`));
+      console.error(chalk.dim('  bc config show 로 사용 가능한 모델을 확인하세요.'));
+      process.exit(1);
+    }
+    cfg.effective.model = opts.model;
+  }
+
+  let resolved;
+  try {
+    resolved = resolveModel(cfg.effective);
+  } catch (err) {
+    console.error('\n' + chalk.red('  ' + err.message) + '\n');
+    process.exit(1);
+  }
+
+  const baseSystem = buildSystemPrompt({
+    effective: cfg.effective,
+    paths: cfg.paths,
+    project: cfg.project,
+  });
+
+  // OpenAPI 자동 주입 — bc.config.json 의 api.openapi 가 있으면 fetch 후 요약을
+  // 시스템 프롬프트에 박는다. 1시간 캐시. 실패해도 chat 은 그대로 동작.
+  let openapiInfo = null;
+  let system = baseSystem;
+  if (cfg.effective.api?.openapi) {
+    try {
+      const res = await getCachedOpenApi(cfg.effective.api.openapi);
+      const summary = res.doc ? summarizeOpenApi(res.doc) : null;
+      if (summary) {
+        openapiInfo = {
+          source: cfg.effective.api.openapi,
+          cached: res.cached,
+          stale: !!res.stale,
+          summary,
+        };
+        system =
+          baseSystem +
+          '\n\n---\nOpenAPI 스펙 (자동 주입됨, 사용자가 별도로 명령 없이 알아서 사용 가능):\n' +
+          summary +
+          '\n\n사용자가 API 관련 코드를 요청하면 위 스펙을 우선 참조하라. ' +
+          '응답 타입이 필요하면 \`bc gen api-types\` 실행을 권하거나, ' +
+          '이미 \`*.gen.ts\` 가 있으면 그걸 import 해서 쓰라고 안내한다.';
+      }
+    } catch {
+      /* 비정상 URL/네트워크 실패 — 무시하고 계속. */
+    }
+  }
+
+  if (opts.once) {
+    return runOnce({ cfg, resolved, system, prompt: opts.once });
+  }
+
+  // 세션 결정 — 새로/이어가기/특정 id 복구.
+  let session;
+  if (opts.resume) {
+    try {
+      session = await loadSession(opts.resume);
+      console.log(
+        chalk.dim(`  · 세션 ${session.id} 이어가기 (${session.messages.length} turns)\n`),
+      );
+    } catch (err) {
+      console.error(chalk.red('세션을 불러올 수 없습니다: ') + err.message);
+      process.exit(1);
+    }
+  } else if (opts.continueLast) {
+    try {
+      session = await loadLatestSession();
+      if (!session) {
+        console.log(chalk.dim('  · 이전 세션이 없습니다 — 새 세션으로 시작합니다.\n'));
+      } else {
+        console.log(
+          chalk.dim(`  · 가장 최근 세션 ${session.id} 이어가기 (${session.messages.length} turns)\n`),
+        );
+      }
+    } catch {
+      /* 새 세션으로 폴백 */
+    }
+  }
+  if (!session) {
+    session = await createSession({ model: resolved.meta.id });
+  } else {
+    // 모델은 사용자가 명시했거나 글로벌 설정으로 갱신 가능 — 세션의 model 은 표시용.
+    session.model = resolved.meta.id;
+  }
+  await saveSession(session); // 빈 파일이라도 디스크에 만들어둠
+
+  // ink 는 stdin/stdout 둘 다 TTY 이어야 정상 동작.
+  const isTTY = process.stdin.isTTY && process.stdout.isTTY;
+  if (!isTTY || opts.plain) {
+    return runReadlineFallback({ cfg, resolved, system, session, openapiInfo });
+  }
+
+  return runInkApp({ cfg, resolved, system, session, openapiInfo });
+}
+
+async function printHistoryList() {
+  const list = await listSessions();
+  if (list.length === 0) {
+    console.log(chalk.dim('\n  저장된 세션이 없습니다.\n'));
+    return;
+  }
+  console.log(chalk.bold.cyan('\n  저장된 챗 세션'));
+  console.log(chalk.dim('  ─────────────────────────────────────────────────'));
+  for (const s of list) {
+    const when = s.updatedAt?.replace('T', ' ').slice(0, 19) ?? '';
+    console.log(
+      `  ${chalk.cyan(s.id)}  ${chalk.dim(when)}  ${s.turns} turns  ${chalk.dim(s.model ?? '')}`,
+    );
+    console.log(`    ${chalk.dim('└')} ${s.preview}`);
+  }
+  console.log();
+  console.log(chalk.dim('  이어가기:  bc chat --resume <id>\n'));
+}
+
+/* ───────────────────────── ink 모드 ───────────────────────── */
+
+async function runInkApp({ cfg, resolved, system, session, openapiInfo }) {
+  // ink/React 는 무겁고 비-TTY 환경에서 import 만으로도 종종 문제 일으키므로
+  // 여기서 늦게 import 한다 (--once / pipe 모드에 영향 없도록).
+  const { render } = await import('ink');
+  const { ChatApp } = await import('../ui/ChatApp.js');
+  const React = (await import('react')).default;
+
+  const initialConfig = { ...cfg, system, openapiInfo };
+
+  const onSessionUpdate = async (messages) => {
+    session.messages = messages;
+    await saveSession(session);
+  };
+
+  const { waitUntilExit } = render(
+    React.createElement(ChatApp, {
+      initialConfig,
+      initialResolved: resolved,
+      session,
+      onSessionUpdate,
+    }),
+    { exitOnCtrlC: false },
+  );
+  await waitUntilExit();
+}
+
+/* ───────────────────────── --once 모드 ───────────────────────── */
+
+async function runOnce({ cfg, resolved, system, prompt }) {
+  const meter = new TokenMeter(resolved.meta, cfg.effective.limits);
+  const result = streamText({
+    model: resolved.model,
+    system,
+    messages: [{ role: 'user', content: prompt }],
+    onError: ({ error }) => {
+      console.error(chalk.red('\n  AI 호출 에러: ') + (error?.message ?? error));
+    },
+  });
+  for await (const delta of result.textStream) process.stdout.write(delta);
+  process.stdout.write('\n');
+  try {
+    meter.add(await result.usage);
+    console.log(chalk.dim('  · ' + meter.format()));
+  } catch {
+    /* noop */
+  }
+}
+
+/* ──────────────────── 비-TTY / --plain 폴백 ──────────────────── */
+
+async function runReadlineFallback({ cfg, resolved, system, session, openapiInfo }) {
+  const readline = await import('node:readline');
+  const meter = new TokenMeter(resolved.meta, cfg.effective.limits);
+
+  console.log();
+  console.log(chalk.bold.cyan('  bc chat ') + chalk.dim('(plain mode)'));
+  console.log(chalk.dim('  모델: ' + resolved.meta.label));
+  if (openapiInfo) {
+    console.log(
+      chalk.dim('  openapi: ' + openapiInfo.source + (openapiInfo.cached ? ' (cached)' : ' (live)')),
+    );
+  }
+  if (session?.messages?.length) {
+    console.log(chalk.dim(`  세션: ${session.id} (${session.messages.length} turns 이어가기)`));
+  }
+  console.log(chalk.dim('  /exit 또는 Ctrl+D 로 종료\n'));
+
+  const rl = readline.createInterface({
+    input: process.stdin,
+    output: process.stdout,
+    terminal: !!process.stdin.isTTY,
+    prompt: chalk.bold.magenta('  you › '),
+  });
+  // 세션에 들어있던 메시지를 히스토리에 그대로 적재 (attachments 는 버림 — readline 모드에선 첨부 미지원).
+  const history = (session?.messages ?? [])
+    .filter((m) => m.role === 'user' || m.role === 'assistant')
+    .map((m) => ({ role: m.role, content: m.text ?? '' }));
+  const ask = () => rl.prompt();
+
+  rl.on('close', () => {
+    console.log(chalk.dim('\n  bye 👋\n'));
+    process.exit(0);
+  });
+  ask();
+
+  for await (const raw of rl) {
+    const line = raw.trim();
+    if (!line) {
+      ask();
+      continue;
+    }
+    if (line === '/exit' || line === '/quit') {
+      rl.close();
+      return;
+    }
+    history.push({ role: 'user', content: line });
+    rl.pause();
+
+    const result = streamText({
+      model: resolved.model,
+      system,
+      messages: history,
+      onError: ({ error }) => {
+        console.error(chalk.red('\n  AI 호출 에러: ') + (error?.message ?? error));
+      },
+    });
+    process.stdout.write(chalk.bold.green('\n  bc › '));
+    let acc = '';
+    try {
+      for await (const delta of result.textStream) {
+        acc += delta;
+        process.stdout.write(delta);
+      }
+    } catch (err) {
+      console.error('\n' + chalk.red('  스트리밍 중단: ') + (err?.message ?? err));
+    }
+    process.stdout.write('\n');
+    try {
+      meter.add(await result.usage);
+      console.log(chalk.dim('  · ' + meter.format()));
+    } catch {
+      /* noop */
+    }
+    if (acc) history.push({ role: 'assistant', content: acc });
+
+    // 세션 자동 저장 — readline 모드에서도 끊김 대비.
+    if (session) {
+      session.messages = history.map((h) => ({ role: h.role, text: h.content }));
+      try {
+        await saveSession(session);
+      } catch {
+        /* noop */
+      }
+    }
+
+    rl.resume();
+    ask();
+  }
+}