sanjang 0.3.4 → 0.3.5

package/dashboard/index.html

@@ -77,11 +77,17 @@
       </div>
       <div style="flex:1"></div>
       <button class="btn btn-sub btn-sm" id="ws-terminal-btn" onclick="wsOpenTerminal()">💻 터미널</button>
+      <button class="btn btn-sub btn-sm" id="ws-compare-btn" onclick="toggleCompare()" title="원본과 비교">🔀 비교</button>
       <button class="btn btn-sub btn-sm" onclick="togglePanel()">⛰ 패널</button>
     </div>
 
-    <!-- Preview — full screen -->
-    <div class="ws-preview-full" id="ws-preview"></div>
+    <!-- Preview — full screen with optional split -->
+    <div class="ws-preview-container" id="ws-preview-container">
+      <div class="ws-preview-full" id="ws-preview"></div>
+      <div class="ws-preview-main hidden" id="ws-preview-main">
+        <div class="ws-preview-label">🏔️ 원본 (main)</div>
+      </div>
+    </div>
 
     <!-- Slide panel — right side -->
     <div class="ws-panel" id="ws-panel">
@@ -100,6 +106,12 @@
             <div id="ws-changes"></div>
           </details>
         </div>
+        <div class="workspace-section ws-report-section" id="ws-report-section" style="display:none">
+          <h3>📋 변경 리포트</h3>
+          <div class="ws-report-summary" id="ws-report-summary"></div>
+          <div class="ws-report-warnings" id="ws-report-warnings"></div>
+          <div class="ws-report-categories" id="ws-report-categories"></div>
+        </div>
         <div class="workspace-section">
           <h3>📜 세이브 기록</h3>
           <div id="ws-actions"></div>
@@ -109,6 +121,7 @@
           <div class="ws-browser-error-panel" id="ws-browser-errors">
             <span style="color:var(--text-muted);font-size:12px">에러 없음</span>
           </div>
+          <button class="btn btn-fix" id="ws-fix-btn" onclick="copyFixPrompt()" style="display:none">🩹 고쳐줘 — 클립보드 복사</button>
         </details>
         <details class="workspace-section ws-log-details">
           <summary>📜 로그</summary>
@@ -219,6 +232,7 @@
       <p id="ship-file-count" style="font-size:13px;color:var(--text-muted);margin-bottom:12px"></p>
 
       <div class="form-group">
+          <div id="ship-report-preview" class="ship-report-preview" style="display:none"></div>
         <label class="form-label" for="ship-message">뭘 바꿨나요? (한 줄로)</label>
         <input
           class="form-input"

package/dashboard/style.css

@@ -1090,6 +1090,23 @@ header h1::before {
   word-break: break-all;
 }
 
+.btn-fix {
+  display: block;
+  width: 100%;
+  margin-top: 8px;
+  padding: 8px 12px;
+  background: linear-gradient(135deg, #ef4444 0%, #f97316 100%);
+  color: #fff;
+  border: none;
+  border-radius: 6px;
+  font-size: 13px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: opacity 0.15s, transform 0.1s;
+}
+.btn-fix:hover { opacity: 0.9; transform: translateY(-1px); }
+.btn-fix:active { transform: translateY(0); }
+
 .ws-error-badge {
   background: #ef4444;
   color: white;
@@ -1707,11 +1724,8 @@ header.hidden {
   margin-top: 8px;
 }
 .ws-commit-item {
-  display: flex;
-  justify-content: space-between;
-  align-items: baseline;
-  gap: 8px;
-  padding: 4px 0;
+  display: block;
+  padding: 0;
   font-size: 13px;
   border-bottom: 1px solid var(--border);
 }
@@ -1720,6 +1734,10 @@ header.hidden {
 }
 .ws-commit-msg {
   color: var(--text-primary);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  min-width: 0;
 }
 .ws-commit-date {
   color: var(--text-muted);
@@ -2096,6 +2114,9 @@ header.hidden {
   font-size: 11px;
   color: #e4e8f0;
   white-space: nowrap;
+  max-width: min(320px, calc(100vw - 120px));
+  overflow: hidden;
+  text-overflow: ellipsis;
   animation: bubble-float 3s ease-in-out infinite;
 }
 
@@ -2169,3 +2190,60 @@ header.hidden {
   font-size: 11px;
   color: var(--text-muted);
 }
+
+/* Change Report */
+.ws-report-section { border-top: 1px solid var(--border); padding-top: 12px; }
+.ws-report-desc { font-size: 14px; line-height: 1.6; color: var(--text); margin-bottom: 8px; white-space: pre-line; }
+.ws-report-warning { display: flex; align-items: center; gap: 6px; padding: 6px 8px; margin-bottom: 4px; background: rgba(255, 180, 0, 0.08); border-radius: 6px; font-size: 13px; color: var(--text-muted); }
+.ws-report-warning-icon { font-size: 14px; flex-shrink: 0; }
+.ws-report-categories { display: flex; flex-direction: column; gap: 10px; margin-top: 8px; }
+.ws-report-cat-group { }
+.ws-report-cat-header { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; }
+.ws-report-cat-label { font-size: 13px; font-weight: 600; color: var(--text); }
+.ws-report-cat-count { font-size: 11px; color: var(--text-muted); background: var(--surface); padding: 1px 6px; border-radius: 8px; }
+.ws-report-cat-items { list-style: none; margin: 0; padding: 0; }
+.ws-report-cat-items li { font-size: 13px; color: var(--text-muted); padding: 2px 0 2px 16px; position: relative; line-height: 1.5; }
+.ws-report-cat-items li::before { content: '•'; position: absolute; left: 4px; color: var(--text-muted); }
+.ws-report-nav-item { cursor: pointer; transition: color 0.15s, background 0.15s; border-radius: 4px; }
+.ws-report-nav-item:hover { color: var(--accent) !important; background: color-mix(in srgb, var(--accent) 10%, transparent); }
+.ws-report-nav-hint { font-size: 11px; color: var(--accent); opacity: 0; transition: opacity 0.15s; margin-left: 4px; }
+.ws-report-nav-item:hover .ws-report-nav-hint { opacity: 1; }
+.ws-report-saved { opacity: 0.7; }
+.ws-report-saved-desc { font-size: 13px; color: var(--text-muted); }
+
+/* Commit report (details/summary dropdown) */
+details.ws-commit-item { border-radius: 6px; margin-bottom: 4px; }
+details.ws-commit-item > summary.ws-commit-summary { display: flex; align-items: center; gap: 6px; cursor: pointer; list-style: none; padding: 6px 8px; border-radius: 6px; flex-wrap: nowrap; }
+details.ws-commit-item > summary.ws-commit-summary::-webkit-details-marker { display: none; }
+details.ws-commit-item > summary.ws-commit-summary:hover { background: var(--surface); }
+.ws-commit-arrow { font-size: 10px; color: var(--text-muted); flex-shrink: 0; transition: transform 0.15s; display: inline-block; }
+details.ws-commit-item[open] .ws-commit-arrow { transform: rotate(90deg); }
+.ws-commit-report { margin: 4px 8px 8px 8px; padding: 10px 12px; background: var(--surface); border-radius: 6px; font-size: 12px; width: auto; }
+.ws-commit-report-loading, .ws-commit-report-empty { color: var(--text-muted); }
+.ws-commit-cat { margin-bottom: 6px; }
+.ws-commit-cat:last-child { margin-bottom: 0; }
+.ws-commit-cat-label { font-size: 11px; font-weight: 600; color: var(--text-muted); display: block; margin-bottom: 2px; }
+.ws-commit-cat-item { color: var(--text-muted); padding-left: 12px; position: relative; line-height: 1.5; }
+.ws-commit-cat-item::before { content: '•'; position: absolute; left: 3px; color: var(--text-muted); }
+
+/* Split-view compare */
+.ws-preview-container { position: relative; flex: 1; display: flex; }
+.ws-preview-container .ws-preview-full { flex: 1; }
+.ws-preview-main { display: none; flex: 1; flex-direction: column; border-left: 2px solid var(--accent); position: relative; }
+.ws-preview-main.hidden { display: none !important; }
+.ws-split-view .ws-preview-full,
+.ws-split-view .ws-preview-main { flex: 1; display: flex; flex-direction: column; }
+.ws-preview-label { position: absolute; top: 8px; left: 8px; z-index: 10; background: var(--surface); padding: 2px 8px; border-radius: 4px; font-size: 11px; color: var(--text-muted); pointer-events: none; }
+.ws-preview-loading { display: flex; align-items: center; justify-content: center; flex: 1; color: var(--text-muted); font-size: 14px; }
+.btn-active { background: var(--accent) !important; color: white !important; }
+.ws-split-view .ws-preview-full { position: relative; }
+.ws-split-view .ws-preview-full::before {
+  content: '⛺ 내 캠프';
+  position: absolute; top: 8px; left: 8px; z-index: 10;
+  background: var(--surface); padding: 2px 8px; border-radius: 4px;
+  font-size: 11px; color: var(--text-muted); pointer-events: none;
+}
+
+/* Ship report preview */
+.ship-report-preview { margin-bottom: 12px; padding: 10px; background: var(--surface); border-radius: 6px; font-size: 13px; line-height: 1.5; }
+.ship-report-desc { margin-bottom: 8px; }

package/dist/bin/sanjang.js

@@ -14,7 +14,7 @@ for (let i = 0; i < args.length; i++) {
         i++;
     }
     if (args[i] === "--port" && args[i + 1]) {
-        port = parseInt(args[i + 1]);
+        port = parseInt(args[i + 1], 10);
         i++;
     }
     if (args[i] === "--force") {
@@ -53,8 +53,8 @@ if (command === "init") {
             rl.question("  어떤 앱을 띄울까요? [번호]: ", resolve);
         });
         rl.close();
-        const idx = parseInt(answer) - 1;
-        if (idx < 0 || idx >= apps.length || isNaN(idx)) {
+        const idx = parseInt(answer, 10) - 1;
+        if (idx < 0 || idx >= apps.length || Number.isNaN(idx)) {
             console.error("⛰ 잘못된 선택입니다.");
             process.exit(1);
         }
@@ -147,10 +147,12 @@ else {
             console.log("");
             const { createInterface } = await import("node:readline");
             const rl = createInterface({ input: process.stdin, output: process.stdout });
-            const answer = await new Promise((r) => { rl.question("  어떤 앱을 띄울까요? [번호]: ", r); });
+            const answer = await new Promise((r) => {
+                rl.question("  어떤 앱을 띄울까요? [번호]: ", r);
+            });
             rl.close();
-            const idx = parseInt(answer) - 1;
-            if (idx < 0 || idx >= apps.length || isNaN(idx)) {
+            const idx = parseInt(answer, 10) - 1;
+            if (idx < 0 || idx >= apps.length || Number.isNaN(idx)) {
                 console.error("⛰ 잘못된 선택입니다.");
                 process.exit(1);
             }

package/dist/lib/config.js

@@ -230,13 +230,11 @@ function detectTurboMainApp(root) {
                 const port = portMatch?.[1] ? parseInt(portMatch[1], 10) : 3000;
                 candidates.push({ name: entry.name, port });
             }
-            catch {
-                continue;
-            }
+            catch { }
         }
     }
     // Prefer app with explicit port, then first candidate
-    return candidates.find(c => c.port !== 3000) ?? candidates[0] ?? null;
+    return candidates.find((c) => c.port !== 3000) ?? candidates[0] ?? null;
 }
 function detectPackageManager(root) {
     if (existsSync(join(root, "bun.lockb")) || existsSync(join(root, "bun.lock")))
@@ -272,7 +270,7 @@ export function generateConfig(projectRoot, options = {}) {
     // Exclude .env.example, .env.test, .env.template
     (f) => !f.includes("example") && !f.includes("template") && !f.includes(".test"));
     // Detect potential issues
-    const issues = detectSetupIssues(detectRoot);
+    const _issues = detectSetupIssues(detectRoot);
     const lines = [
         "export default {",
         `  // ${detected.framework} detected`,

package/dist/lib/engine/change-report.d.ts

@@ -0,0 +1,27 @@
+import type { ChangeReport, ChangeReportFile, ChangeReportWarning } from "../types.ts";
+type FileCategory = "ui" | "api" | "config" | "test" | "docs" | "other";
+/**
+ * Classify a file path into one of the known categories.
+ * Rules are checked in priority order: test > ui > api > docs > config > other
+ */
+export declare function categorizeFile(filePath: string): FileCategory;
+/**
+ * Detect warnings from a list of categorized files.
+ * Returns deduplicated warnings (one per type).
+ */
+export declare function detectWarnings(files: ChangeReportFile[]): ChangeReportWarning[];
+/**
+ * Build a ChangeReport from raw file list (path + status).
+ * summary and humanDescription are set to null — call generateReportSummary to enrich.
+ */
+export declare function buildChangeReport(rawFiles: {
+    path: string;
+    status: ChangeReportFile["status"];
+}[]): ChangeReport;
+/**
+ * Enrich a ChangeReport with AI-generated category-level descriptions.
+ * Each category gets human-readable bullet points explaining what changed.
+ * Tries `claude -p --model haiku` and falls back to file-based summary.
+ */
+export declare function generateReportSummary(diffStat: string, diff: string, report: ChangeReport): ChangeReport;
+export {};

package/dist/lib/engine/change-report.js

@@ -0,0 +1,233 @@
+import { spawnSync } from "node:child_process";
+import { basename, extname } from "node:path";
+/**
+ * Classify a file path into one of the known categories.
+ * Rules are checked in priority order: test > ui > api > docs > config > other
+ */
+export function categorizeFile(filePath) {
+    const name = basename(filePath);
+    const ext = extname(filePath).toLowerCase();
+    const lower = filePath.toLowerCase();
+    // 1. test
+    if (/\.(test|spec)\.[^.]+$/.test(lower))
+        return "test";
+    if (/[/\\](test|tests|__tests__|__mocks__|fixtures)[/\\]/.test(lower))
+        return "test";
+    if (/^(test|tests|__tests__|__mocks__|fixtures)[/\\]/.test(lower))
+        return "test";
+    // 2. ui
+    const uiExts = new Set([
+        ".css",
+        ".scss",
+        ".less",
+        ".sass",
+        ".styl",
+        ".html",
+        ".htm",
+        ".svg",
+        ".tsx",
+        ".jsx",
+        ".vue",
+        ".svelte",
+    ]);
+    if (uiExts.has(ext))
+        return "ui";
+    if (/[/\\](pages|views|components|layouts|styles|public)[/\\]/.test(lower))
+        return "ui";
+    if (/^(pages|views|components|layouts|styles|public)[/\\]/.test(lower))
+        return "ui";
+    // 3. api
+    if (/[/\\](api|routes|controllers|handlers|middleware|graphql|resolvers|schema)[/\\]/.test(lower))
+        return "api";
+    if (/^(api|routes|controllers|handlers|middleware|graphql|resolvers|schema)[/\\]/.test(lower))
+        return "api";
+    // files named "server" (any extension)
+    if (/[/\\]server\.[^/\\]+$/.test(lower) || /^server\.[^/\\]+$/.test(lower))
+        return "api";
+    // 4. docs
+    if (ext === ".md")
+        return "docs";
+    if (/[/\\]docs[/\\]/.test(lower) || /^docs[/\\]/.test(lower))
+        return "docs";
+    if (/^(README|CHANGELOG|LICENSE|CONTRIBUTING)(\.|$)/i.test(name))
+        return "docs";
+    // 5. config
+    const configPrefixes = [
+        "package",
+        "tsconfig",
+        "jest.config",
+        "vite.config",
+        "next.config",
+        "webpack.config",
+        "biome",
+        ".eslint",
+        ".prettier",
+        ".babel",
+    ];
+    const nameLower = name.toLowerCase();
+    if (configPrefixes.some((p) => nameLower.startsWith(p.toLowerCase())))
+        return "config";
+    if (name.startsWith("."))
+        return "config";
+    if ([".json", ".yaml", ".yml", ".toml"].includes(ext))
+        return "config";
+    // 6. other
+    return "other";
+}
+/**
+ * Detect warnings from a list of categorized files.
+ * Returns deduplicated warnings (one per type).
+ */
+export function detectWarnings(files) {
+    const seen = new Set();
+    const warnings = [];
+    const add = (type, message, file) => {
+        if (seen.has(type))
+            return;
+        seen.add(type);
+        warnings.push({ type, message, file });
+    };
+    for (const f of files) {
+        const p = f.path.toLowerCase();
+        const name = basename(f.path);
+        // env
+        if (/\.env($|\.)/.test(name.toLowerCase())) {
+            add("env", "환경 변수 파일이 변경되었습니다", f.path);
+        }
+        // db
+        if (/migrat|schema|\.sql|prisma/.test(p)) {
+            add("db", "데이터베이스 스키마 또는 마이그레이션이 변경되었습니다", f.path);
+        }
+        // infra
+        if (/dockerfile|docker-compose|\.github\/|deploy\/|[/\\]k8s[/\\]|^k8s[/\\]|terraform|infrastructure/.test(p)) {
+            add("infra", "인프라 설정이 변경되었습니다", f.path);
+        }
+        // config (package manager files)
+        if (/package\.json|package-lock|yarn\.lock|pnpm-lock/.test(p)) {
+            add("config", "패키지 의존성이 변경되었습니다", f.path);
+        }
+        // security
+        if (/auth|security|token|secret|credential|password/.test(p)) {
+            add("security", "보안 관련 파일이 변경되었습니다", f.path);
+        }
+    }
+    return warnings;
+}
+/**
+ * Build a ChangeReport from raw file list (path + status).
+ * summary and humanDescription are set to null — call generateReportSummary to enrich.
+ */
+export function buildChangeReport(rawFiles) {
+    const files = rawFiles.map((f) => ({
+        path: f.path,
+        status: f.status,
+        category: categorizeFile(f.path),
+    }));
+    const byCategory = {};
+    for (const f of files) {
+        const cat = f.category;
+        if (!byCategory[cat])
+            byCategory[cat] = [];
+        byCategory[cat].push(f);
+    }
+    const warnings = detectWarnings(files);
+    // 기본 카테고리 설명 — AI 없이도 즉시 표시
+    const categoryDetails = {};
+    for (const [cat, catFiles] of Object.entries(byCategory)) {
+        categoryDetails[cat] = catFiles.map((f) => {
+            const name = f.path.split("/").pop() || f.path;
+            return f.status === "새 파일" ? `${name} 추가됨` : `${name} 수정됨`;
+        });
+    }
+    return {
+        files,
+        totalCount: files.length,
+        byCategory,
+        warnings,
+        summary: null,
+        humanDescription: null,
+        categoryDetails,
+    };
+}
+/**
+ * Enrich a ChangeReport with AI-generated category-level descriptions.
+ * Each category gets human-readable bullet points explaining what changed.
+ * Tries `claude -p --model haiku` and falls back to file-based summary.
+ */
+export function generateReportSummary(diffStat, diff, report) {
+    const categoryNames = {
+        ui: "화면",
+        api: "서버/API",
+        config: "설정",
+        test: "테스트",
+        docs: "문서",
+        other: "기타",
+    };
+    const categoryList = Object.keys(report.byCategory)
+        .map((cat) => `${categoryNames[cat] || cat}: ${(report.byCategory[cat] ?? []).length}개`)
+        .join(", ");
+    const fallbackSummary = `${categoryList} 변경`;
+    // Build per-category diff sections for the prompt
+    const categoryDiffSections = Object.entries(report.byCategory)
+        .map(([cat, files]) => {
+        const fileList = files.map((f) => `  ${f.status} ${f.path}`).join("\n");
+        return `[${categoryNames[cat] || cat}]\n${fileList}`;
+    })
+        .join("\n\n");
+    const prompt = `너는 비개발자에게 코드 변경사항을 설명하는 도우미야.
+아래 git diff를 분석하고, 카테고리별로 "실제로 뭐가 바뀌었는지"를 설명해.
+
+규칙:
+- 파일명이 아니라 사용자 관점에서 뭐가 바뀌었는지 설명 (예: "로그인 버튼이 보라색으로 바뀌었어요")
+- 각 항목은 한국어, '~했어요/~됐어요' 체, 한 줄
+- 새 파일이면 "추가됐어요", 수정이면 구체적으로 뭐가 바뀌었는지
+
+카테고리별 파일:
+${categoryDiffSections}
+
+diff:
+${diff.slice(0, 4000)}
+
+JSON으로만 응답해 (다른 텍스트 없이):
+{"summary": "전체 한 줄 요약 (30자 이내)", "categories": {"ui": ["설명1", "설명2"], "api": ["설명1"], ...}}
+
+categories의 키는 반드시 다음 중 하나: ${Object.keys(report.byCategory).join(", ")}`;
+    try {
+        const result = spawnSync("claude", ["-p", prompt], {
+            encoding: "utf8",
+            timeout: 30_000,
+        });
+        if (result.status === 0 && result.stdout) {
+            const output = result.stdout.trim();
+            const jsonMatch = output.match(/\{[\s\S]*"summary"[\s\S]*"categories"[\s\S]*\}/);
+            if (jsonMatch) {
+                const parsed = JSON.parse(jsonMatch[0]);
+                if (parsed.summary && parsed.categories) {
+                    return {
+                        ...report,
+                        summary: parsed.summary,
+                        humanDescription: null,
+                        categoryDetails: parsed.categories,
+                    };
+                }
+            }
+        }
+    }
+    catch {
+        // Fall through to fallback
+    }
+    // Fallback: 파일 기반 설명 생성
+    const fallbackDetails = {};
+    for (const [cat, files] of Object.entries(report.byCategory)) {
+        fallbackDetails[cat] = files.map((f) => {
+            const name = f.path.split("/").pop() || f.path;
+            return f.status === "새 파일" ? `${name} 파일이 추가됐어요` : `${name} 파일이 수정됐어요`;
+        });
+    }
+    return {
+        ...report,
+        summary: fallbackSummary,
+        humanDescription: null,
+        categoryDetails: fallbackDetails,
+    };
+}

package/dist/lib/engine/diagnostics.js

@@ -14,9 +14,7 @@ function checkPortConflict(processInfo) {
         name: "port-conflict",
         status: hit ? "error" : "ok",
         detail: hit ? "다른 프로그램과 충돌이 발생했습니다." : "정상.",
-        guide: hit
-            ? '"중지" → "시작"을 눌러보세요. 계속되면 "삭제" 후 다시 만들어보세요.'
-            : null,
+        guide: hit ? '"중지" → "시작"을 눌러보세요. 계속되면 "삭제" 후 다시 만들어보세요.' : null,
     };
 }
 function checkFrontendExit(processInfo) {
@@ -47,9 +45,7 @@ function checkFePort(pg) {
     return {
         name: "fe-status",
         status: output?.length ? "ok" : "warn",
-        detail: output?.length
-            ? "Frontend 서버가 실행 중입니다."
-            : "Frontend 서버가 응답하지 않습니다.",
+        detail: output?.length ? "Frontend 서버가 실행 중입니다." : "Frontend 서버가 응답하지 않습니다.",
         guide: !output?.length ? '"시작" 버튼을 눌러보세요.' : null,
     };
 }

package/dist/lib/engine/main-server.d.ts

@@ -0,0 +1,15 @@
+/**
+ * Main branch dev server manager.
+ * Runs a dev server from the project root for side-by-side comparison preview.
+ */
+import type { SanjangConfig } from "../types.ts";
+interface MainServerState {
+    status: "stopped" | "starting" | "running" | "error";
+    port: number | null;
+    error: string | null;
+}
+export declare function getMainServerState(): MainServerState;
+export declare function getMainServerLogs(): string[];
+export declare function startMainServer(projectRoot: string, config: SanjangConfig, onReady?: (port: number) => void): Promise<void>;
+export declare function stopMainServer(): void;
+export {};

package/dist/lib/engine/main-server.js

@@ -0,0 +1,111 @@
+/**
+ * Main branch dev server manager.
+ * Runs a dev server from the project root for side-by-side comparison preview.
+ */
+import { spawn } from "node:child_process";
+import { createConnection } from "node:net";
+let state = { status: "stopped", port: null, error: null };
+let proc = null;
+let logs = [];
+export function getMainServerState() {
+    return { ...state };
+}
+export function getMainServerLogs() {
+    return [...logs];
+}
+export async function startMainServer(projectRoot, config, onReady) {
+    if (state.status === "running" || state.status === "starting")
+        return;
+    state = { status: "starting", port: null, error: null };
+    logs = [];
+    const basePort = config.dev.port + 100;
+    const cmdParts = config.dev.command.split(/\s+/);
+    const cmd = cmdParts[0];
+    const args = cmdParts.slice(1);
+    if (config.dev.portFlag) {
+        args.push(config.dev.portFlag, String(basePort));
+    }
+    const cwd = config.dev.cwd
+        ? config.dev.cwd.startsWith("/")
+            ? config.dev.cwd
+            : `${projectRoot}/${config.dev.cwd}`
+        : projectRoot;
+    proc = spawn(cmd, args, {
+        cwd,
+        stdio: ["ignore", "pipe", "pipe"],
+        env: { ...process.env, ...config.dev.env, FORCE_COLOR: "0" },
+        shell: true,
+    });
+    proc.stdout?.on("data", (chunk) => {
+        const line = chunk.toString();
+        logs.push(line);
+        if (logs.length > 100)
+            logs.shift();
+    });
+    proc.stderr?.on("data", (chunk) => {
+        const line = chunk.toString();
+        logs.push(line);
+        if (logs.length > 100)
+            logs.shift();
+    });
+    proc.on("close", (code) => {
+        if (state.status !== "stopped") {
+            state = { status: "stopped", port: null, error: code ? `exit ${code}` : null };
+        }
+        proc = null;
+    });
+    proc.on("error", (err) => {
+        state = { status: "error", port: null, error: err.message };
+        proc = null;
+    });
+    const detectedPort = await detectMainPort(logs, basePort, 15_000);
+    if (detectedPort) {
+        state = { status: "running", port: detectedPort, error: null };
+        onReady?.(detectedPort);
+    }
+    else {
+        state = { status: "error", port: null, error: "포트를 감지하지 못했어요" };
+    }
+}
+export function stopMainServer() {
+    state = { status: "stopped", port: null, error: null };
+    if (proc) {
+        proc.kill("SIGTERM");
+        proc = null;
+    }
+    logs = [];
+}
+function detectMainPort(logLines, _fallbackPort, timeoutMs) {
+    return new Promise((resolve) => {
+        const deadline = Date.now() + timeoutMs;
+        const portRe = /https?:\/\/localhost:(\d+)/;
+        function check() {
+            for (const line of logLines) {
+                const match = portRe.exec(line);
+                if (match?.[1]) {
+                    const port = parseInt(match[1], 10);
+                    const sock = createConnection({ port, host: "localhost" });
+                    sock.once("connect", () => {
+                        sock.destroy();
+                        resolve(port);
+                    });
+                    sock.once("error", () => {
+                        sock.destroy();
+                        if (Date.now() < deadline)
+                            setTimeout(check, 1000);
+                        else
+                            resolve(port);
+                    });
+                    return;
+                }
+            }
+            if (Date.now() >= deadline) {
+                resolve(null);
+            }
+            else {
+                setTimeout(check, 1000);
+            }
+        }
+        check();
+    });
+}

package/dist/lib/engine/naming.js

@@ -5,10 +5,19 @@ import { spawnSync } from "node:child_process";
  */
 export function aiSlugify(description) {
     try {
-        const result = spawnSync("claude", ["-p", "--model", "haiku", `Convert this task description to a kebab-case English slug. Rules: 3-5 words, max 30 chars, lowercase, descriptive (not just one word), no explanation, output ONLY the slug.\n\nExample: "로그인 버튼 색상 변경" → "login-button-color-change"\nExample: "대시보드 차트 추가" → "dashboard-chart-add"\n\nTask: "${description}"`], { encoding: "utf8", stdio: "pipe", timeout: 10_000 });
+        const result = spawnSync("claude", [
+            "-p",
+            "--model",
+            "haiku",
+            `Convert this task description to a kebab-case English slug. Rules: 3-5 words, max 30 chars, lowercase, descriptive (not just one word), no explanation, output ONLY the slug.\n\nExample: "로그인 버튼 색상 변경" → "login-button-color-change"\nExample: "대시보드 차트 추가" → "dashboard-chart-add"\n\nTask: "${description}"`,
+        ], { encoding: "utf8", stdio: "pipe", timeout: 10_000 });
         if (result.status !== 0)
             return null;
-        const slug = (result.stdout ?? "").trim().toLowerCase().replace(/[^a-z0-9-]/g, "").replace(/^-+|-+$/g, "");
+        const slug = (result.stdout ?? "")
+            .trim()
+            .toLowerCase()
+            .replace(/[^a-z0-9-]/g, "")
+            .replace(/^-+|-+$/g, "");
         if (!slug || slug.length > 30)
             return null;
         return slug;

package/dist/lib/engine/pr.js

@@ -27,7 +27,7 @@ export function buildFallbackPrBody({ message, actions, diffStat }) {
 export function buildClaudePrPrompt({ message, diffStat, diff }) {
     return [
         "You are writing a GitHub Pull Request description.",
-        'The author described the change as: "' + message + '"',
+        `The author described the change as: "${message}"`,
         "",
         "Here is the diff stat:",
         diffStat || "(no stat)",