sanjang 0.3.4 → 0.3.6

package/dist/lib/server.js

@@ -1,27 +1,30 @@
 import { spawn, spawnSync } from "node:child_process";
 import { copyFileSync, existsSync, readFileSync, unlinkSync, writeFileSync } from "node:fs";
 import { createServer, request as httpRequest } from "node:http";
+import { connect as netConnect } from "node:net";
 import { dirname, join, resolve } from "node:path";
 import { fileURLToPath } from "node:url";
 import express from "express";
 import { WebSocket, WebSocketServer } from "ws";
-import { loadConfig } from "./config.js";
+import { detectTestCommand, loadConfig } from "./config.js";
 import { applyCacheToWorktree, buildCache, isCacheValid } from "./engine/cache.js";
-import { buildConflictPrompt, parseConflictFiles } from "./engine/conflict.js";
+import { buildChangeReport, generateReportSummary } from "./engine/change-report.js";
+import { applyConfigFix, suggestConfigFix } from "./engine/config-hotfix.js";
+import { buildConflictPrompt, parseConflictFiles, parseConflictSections } from "./engine/conflict.js";
 import { buildDiagnostics } from "./engine/diagnostics.js";
+import { getMainServerState, startMainServer, stopMainServer } from "./engine/main-server.js";
 import { aiSlugify, slugify } from "./engine/naming.js";
 import { allocate, scanPorts, setPortConfig } from "./engine/ports.js";
 import { buildClaudePrPrompt, buildFallbackPrBody } from "./engine/pr.js";
 import { getProcessInfo, setConfig, startCamp, stopAllCamps, stopCamp } from "./engine/process.js";
+import { diagnoseFromLogs, executeHeal } from "./engine/self-heal.js";
+import { generatePrDescription } from "./engine/smart-pr.js";
 import { listSnapshots, restoreSnapshot, saveSnapshot } from "./engine/snapshot.js";
 import { getAll, getOne, remove, setCampsDir, upsert } from "./engine/state.js";
+import { suggestTasks } from "./engine/suggest.js";
 import { detectWarp, openWarpTab, removeLaunchConfig } from "./engine/warp.js";
 import { CampWatcher } from "./engine/watcher.js";
-import { diagnoseFromLogs, executeHeal } from "./engine/self-heal.js";
-import { suggestTasks } from "./engine/suggest.js";
-import { generatePrDescription } from "./engine/smart-pr.js";
-import { suggestConfigFix, applyConfigFix } from "./engine/config-hotfix.js";
-import { addWorktree, campPath, getProjectRoot, listBranches, removeWorktree, setProjectRoot, } from "./engine/worktree.js";
+import { addWorktree, campPath, getProjectRoot, listBranches, removeWorktree, setProjectRoot, startBranchRefresh, } from "./engine/worktree.js";
 const __dirname = dirname(fileURLToPath(import.meta.url));
 // ---------------------------------------------------------------------------
 // Error translation
@@ -97,10 +100,15 @@ function updateCampStatus(name, status, extra) {
         return; // camp may have been deleted during async setup
     upsert({ ...camp, status, ...extra });
 }
-function setupCampDeps(name, wtPath, cfg, broadcast) {
-    if (!cfg.setup) {
+function setupCampDeps(name, wtPath, cfg, broadcast, onReady) {
+    function done() {
         updateCampStatus(name, "stopped");
         broadcast({ type: "playground-status", name, data: { status: "stopped" } });
+        if (onReady)
+            onReady();
+    }
+    if (!cfg.setup) {
+        done();
         return;
     }
     const setupCwd = cfg.dev?.cwd || ".";
@@ -115,8 +123,7 @@ function setupCampDeps(name, wtPath, cfg, broadcast) {
                 source: "sanjang",
                 data: `캐시에서 node_modules 복사 완료 ✓ (${cacheResult.duration}ms)`,
             });
-            updateCampStatus(name, "stopped");
-            broadcast({ type: "playground-status", name, data: { status: "stopped" } });
+            done();
             return;
         }
         broadcast({ type: "log", name, source: "sanjang", data: `캐시 없음 (${cacheResult.reason}), 설치 중...` });
@@ -138,8 +145,7 @@ function setupCampDeps(name, wtPath, cfg, broadcast) {
     setupProc.on("close", (code) => {
         if (code === 0) {
             broadcast({ type: "log", name, source: "sanjang", data: "설치 완료 ✓" });
-            updateCampStatus(name, "stopped");
-            broadcast({ type: "playground-status", name, data: { status: "stopped" } });
+            done();
         }
         else {
             broadcast({ type: "log", name, source: "sanjang", data: `⚠️ 설치 실패 (코드 ${code})` });
@@ -192,9 +198,15 @@ export async function createApp(projectRoot, options = {}) {
                 return;
             try {
                 // Reattach if detached
-                const headRef = spawnSync("git", ["-C", wtPath, "symbolic-ref", "--quiet", "HEAD"], { encoding: "utf8", stdio: "pipe" });
+                const headRef = spawnSync("git", ["-C", wtPath, "symbolic-ref", "--quiet", "HEAD"], {
+                    encoding: "utf8",
+                    stdio: "pipe",
+                });
                 if (headRef.status !== 0 && pg.branch) {
-                    const cur = spawnSync("git", ["-C", wtPath, "rev-parse", "HEAD"], { encoding: "utf8", stdio: "pipe" }).stdout?.trim();
+                    const cur = spawnSync("git", ["-C", wtPath, "rev-parse", "HEAD"], {
+                        encoding: "utf8",
+                        stdio: "pipe",
+                    }).stdout?.trim();
                     if (cur) {
                         spawnSync("git", ["-C", wtPath, "branch", "-f", pg.branch, cur], { stdio: "pipe" });
                         spawnSync("git", ["-C", wtPath, "checkout", pg.branch], { stdio: "pipe" });
@@ -202,10 +214,16 @@ export async function createApp(projectRoot, options = {}) {
                 }
                 runGit(["-C", wtPath, "add", "-A"], wtPath);
                 runGit(["-C", wtPath, "commit", "-m", `[auto] ${files.length}개 파일 자동 세이브`], wtPath);
-                broadcast({ type: "playground-saved", name, data: { message: `[auto] ${files.length}개 파일 자동 세이브`, auto: true } });
+                broadcast({
+                    type: "playground-saved",
+                    name,
+                    data: { message: `[auto] ${files.length}개 파일 자동 세이브`, auto: true },
+                });
                 broadcast({ type: "autosaved", name });
             }
-            catch { /* ignore */ }
+            catch {
+                /* ignore */
+            }
         }, AUTOSAVE_DELAY));
     }
     function startWatcher(name) {
@@ -224,7 +242,9 @@ export async function createApp(projectRoot, options = {}) {
                 if (autosaveEnabled.has(name))
                     resetAutosaveTimer(name);
             }
-            catch { /* ignore — worktree may be deleted */ }
+            catch {
+                /* ignore — worktree may be deleted */
+            }
         }, 800);
         watcher.start();
         watchers.set(name, watcher);
@@ -241,6 +261,46 @@ export async function createApp(projectRoot, options = {}) {
             autosaveTimers.delete(name);
         }
     }
+    // ---------------------------------------------------------------------------
+    // Periodic health check — detect dead "running" camps and auto-update state
+    // ---------------------------------------------------------------------------
+    const HEALTH_CHECK_INTERVAL = 15_000; // 15s
+    function startHealthCheck() {
+        return setInterval(async () => {
+            const camps = getAll();
+            for (const camp of camps) {
+                if (camp.status !== "running" || !camp.fePort)
+                    continue;
+                // Check 1: Is the Vite dev server alive? (direct)
+                let directOk = false;
+                try {
+                    const res = await fetch(`http://localhost:${camp.fePort}/`, {
+                        signal: AbortSignal.timeout(3000),
+                    });
+                    directOk = res.status < 500;
+                }
+                catch {
+                    directOk = false;
+                }
+                if (!directOk) {
+                    upsert({ ...camp, status: "stopped" });
+                    broadcast({
+                        type: "playground-status",
+                        name: camp.name,
+                        data: { status: "stopped", reason: "health-check" },
+                    });
+                    broadcast({
+                        type: "log",
+                        name: camp.name,
+                        source: "sanjang",
+                        data: `⚠️ 헬스체크 실패: :${camp.fePort} 응답 없음 → stopped 처리`,
+                    });
+                    stopWatcher(camp.name);
+                }
+            }
+        }, HEALTH_CHECK_INTERVAL);
+    }
+    const healthCheckTimer = startHealthCheck();
     // Express app
     const app = express();
     app.use(express.json());
@@ -250,7 +310,52 @@ export async function createApp(projectRoot, options = {}) {
         : join(__dirname, "..", "..", "dashboard");
     app.use(express.static(dashboardDir));
     const server = createServer(app);
-    const wss = new WebSocketServer({ server });
+    const wss = new WebSocketServer({ noServer: true });
+    // -----------------------------------------------------------------------
+    // WebSocket upgrade — route HMR WS to camp dev servers, others to sanjang WSS
+    // -----------------------------------------------------------------------
+    server.on("upgrade", (req, socket, head) => {
+        const url = req.url || "/";
+        const hmrMatch = /^\/preview\/(\d+)(\/.*)?$/.exec(url);
+        if (hmrMatch) {
+            const targetPort = parseInt(hmrMatch[1], 10);
+            if (!Number.isFinite(targetPort) || targetPort < 1000 || targetPort > 65535) {
+                socket.destroy();
+                return;
+            }
+            // Verify it's a known camp port
+            const camps = getAll();
+            const mainState = getMainServerState();
+            const isKnown = camps.some((c) => c.fePort === targetPort) ||
+                (mainState.status === "running" && mainState.port === targetPort);
+            if (!isKnown) {
+                socket.destroy();
+                return;
+            }
+            // Proxy WS to the target dev server
+            const targetPath = hmrMatch[2] || "/";
+            const proxy = netConnect({ host: "localhost", port: targetPort }, () => {
+                // Rewrite the request line to target path and forward the upgrade
+                const reqLine = `${req.method} ${targetPath} HTTP/${req.httpVersion}\r\n`;
+                const headers = Object.entries(req.headers)
+                    .filter(([k]) => k.toLowerCase() !== "host")
+                    .map(([k, v]) => `${k}: ${Array.isArray(v) ? v.join(", ") : v}`)
+                    .join("\r\n");
+                proxy.write(`${reqLine}host: localhost:${targetPort}\r\n${headers}\r\n\r\n`);
+                if (head.length > 0)
+                    proxy.write(head);
+                socket.pipe(proxy).pipe(socket);
+            });
+            proxy.on("error", () => socket.destroy());
+            socket.on("error", () => proxy.destroy());
+        }
+        else {
+            // Sanjang dashboard WS
+            wss.handleUpgrade(req, socket, head, (ws) => {
+                wss.emit("connection", ws, req);
+            });
+        }
+    });
     function broadcast(msg) {
         const text = JSON.stringify(msg);
         for (const client of wss.clients) {
@@ -263,11 +368,13 @@ export async function createApp(projectRoot, options = {}) {
         ws.on("message", (raw) => {
             try {
                 const msg = JSON.parse(raw.toString());
-                if (msg.type === "browser-error" && msg.name) {
-                    broadcast({ type: "browser-error", name: msg.name, data: msg.data });
+                if ((msg.type === "browser-error" || msg.type === "browser-console" || msg.type === "browser-network") && msg.name) {
+                    broadcast({ type: msg.type, name: msg.name, data: msg.data });
                 }
             }
-            catch { /* ignore non-JSON */ }
+            catch {
+                /* ignore non-JSON */
+            }
         });
     });
     // -------------------------------------------------------------------------
@@ -284,18 +391,64 @@ export async function createApp(projectRoot, options = {}) {
     ws.onclose=function(){setTimeout(connect,3000)};
   }
   var name=document.currentScript.getAttribute('data-camp');
+  function fmt(a){try{return typeof a==='object'?JSON.stringify(a):String(a)}catch(e){return String(a)}}
+  function fmtArgs(a){return [].slice.call(a).map(fmt).join(' ')}
+
+  // --- Error capture ---
+  function getStack(err){if(err&&err.stack){var s=err.stack;var idx=s.indexOf('\\n');return idx>-1?s.slice(idx+1).trim():s}return ''}
   window.addEventListener('error',function(e){
-    send({type:'browser-error',name:name,data:{level:'error',message:e.message,source:e.filename,line:e.lineno,col:e.colno}});
+    send({type:'browser-error',name:name,data:{level:'error',message:e.message,source:e.filename,line:e.lineno,col:e.colno,stack:getStack(e.error)}});
   });
   var origError=console.error;
   console.error=function(){
-    var args=[].slice.call(arguments).map(function(a){try{return typeof a==='object'?JSON.stringify(a):String(a)}catch(e){return String(a)}});
-    send({type:'browser-error',name:name,data:{level:'console.error',message:args.join(' ')}});
+    var stack=getStack(new Error()).split('\\n').slice(1).join('\\n')
+    send({type:'browser-error',name:name,data:{level:'console.error',message:fmtArgs(arguments),stack:stack}});
     origError.apply(console,arguments);
   };
   window.addEventListener('unhandledrejection',function(e){
-    send({type:'browser-error',name:name,data:{level:'promise',message:String(e.reason)}});
+    var r=e.reason;var msg=r&&r.message?r.message:String(r);var stack=getStack(r);
+    send({type:'browser-error',name:name,data:{level:'promise',message:msg,stack:stack}});
   });
+
+  // --- Console capture (log/warn/info) ---
+  var origLog=console.log,origWarn=console.warn,origInfo=console.info;
+  console.log=function(){
+    send({type:'browser-console',name:name,data:{level:'log',message:fmtArgs(arguments)}});
+    origLog.apply(console,arguments);
+  };
+  console.warn=function(){
+    send({type:'browser-console',name:name,data:{level:'warn',message:fmtArgs(arguments)}});
+    origWarn.apply(console,arguments);
+  };
+  console.info=function(){
+    send({type:'browser-console',name:name,data:{level:'info',message:fmtArgs(arguments)}});
+    origInfo.apply(console,arguments);
+  };
+
+  // --- Network capture (fetch + XHR) ---
+  var origFetch=window.fetch;
+  if(origFetch)window.fetch=function(url,opts){
+    var method=(opts&&opts.method||'GET').toUpperCase();
+    var start=Date.now();
+    var urlStr=typeof url==='string'?url:(url&&url.url?url.url:String(url));
+    return origFetch.apply(this,arguments).then(function(resp){
+      send({type:'browser-network',name:name,data:{url:urlStr,method:method,status:resp.status,duration:Date.now()-start}});
+      return resp;
+    }).catch(function(err){
+      send({type:'browser-network',name:name,data:{url:urlStr,method:method,status:0,duration:Date.now()-start,error:String(err)}});
+      throw err;
+    });
+  };
+  var origXHROpen=XMLHttpRequest.prototype.open,origXHRSend=XMLHttpRequest.prototype.send;
+  XMLHttpRequest.prototype.open=function(m,u){this._sj={method:m,url:u};origXHROpen.apply(this,arguments)};
+  XMLHttpRequest.prototype.send=function(){
+    var self=this,info=self._sj||{};info.start=Date.now();
+    self.addEventListener('loadend',function(){
+      send({type:'browser-network',name:name,data:{url:info.url||'',method:(info.method||'GET').toUpperCase(),status:self.status,duration:Date.now()-info.start}});
+    });
+    origXHRSend.apply(this,arguments);
+  };
+
   connect();
 })();
 </script>`;
@@ -306,32 +459,46 @@ export async function createApp(projectRoot, options = {}) {
         }
         // Only allow proxying to known camp ports (prevent SSRF to arbitrary local services)
         const camps = getAll();
-        const camp = camps.find(c => c.fePort === targetPort);
-        if (!camp) {
+        const camp = camps.find((c) => c.fePort === targetPort);
+        const mainState = getMainServerState();
+        const isMainPort = mainState.status === "running" && mainState.port === targetPort;
+        if (!camp && !isMainPort) {
             return res.status(403).send("이 포트는 활성 캠프가 아닙니다.");
         }
-        const campName = camp.name;
+        const campName = camp?.name ?? "__main__";
         const targetPath = req.url || "/";
-        const proxyReq = httpRequest({ hostname: "127.0.0.1", port: targetPort, path: targetPath, method: req.method, headers: { ...req.headers, host: `localhost:${targetPort}` } }, (proxyRes) => {
+        const proxyReq = httpRequest({
+            hostname: "localhost",
+            port: targetPort,
+            path: targetPath,
+            method: req.method,
+            // Preserve the browser's origin (sanjang port) so SvelteKit SSR
+            // generates URLs matching the actual browser origin. Otherwise goto()
+            // rejects navigation as "external URL" due to origin mismatch.
+            headers: { ...req.headers, host: `localhost:${port}` },
+        }, (proxyRes) => {
             const contentType = proxyRes.headers["content-type"] || "";
             const isHtml = contentType.includes("text/html");
             if (!isHtml) {
-                // Pass through non-HTML responses directly
+                // Pass through non-HTML responses directly (JS, CSS, images, etc.)
                 res.writeHead(proxyRes.statusCode ?? 200, proxyRes.headers);
                 proxyRes.pipe(res);
                 return;
             }
-            // Buffer HTML to inject script
+            // Buffer HTML to inject sanjang monitoring script (no path rewriting needed)
             const chunks = [];
             proxyRes.on("data", (chunk) => chunks.push(chunk));
             proxyRes.on("end", () => {
                 let body = Buffer.concat(chunks).toString("utf8");
-                const script = INJECTED_SCRIPT
-                    .replace("data-camp'", `data-camp'`) // placeholder
+                const script = INJECTED_SCRIPT.replace("data-camp'", `data-camp'`) // placeholder
                     .replace("data-sanjang-injected>", `data-sanjang-injected data-camp="${campName}">`);
                 // Replace _sp port placeholder with actual sanjang server port
                 const finalScript = script.replace("new URLSearchParams(location.search.slice(1)||'').get('_sp')||location.port", `'${port}'`);
-                // Inject before </head> or </body> or at end
+                // Inject monitoring script before </head> or </body> or at end.
+                // NOTE: Do NOT inject <base> tag — it breaks SvelteKit client-side
+                // routing (goto() rejects URLs as "external" due to origin mismatch).
+                // Instead, the Vite resource catch-all proxy handles routing via
+                // Referer and /@fs/ path-based camp resolution.
                 if (body.includes("</head>")) {
                     body = body.replace("</head>", `${finalScript}</head>`);
                 }
@@ -349,9 +516,17 @@ export async function createApp(projectRoot, options = {}) {
                 // Remove X-Frame-Options / frame-ancestors to allow iframe embedding
                 delete headers["x-frame-options"];
                 if (typeof headers["content-security-policy"] === "string") {
-                    headers["content-security-policy"] = headers["content-security-policy"]
-                        .replace(/frame-ancestors[^;]*(;|$)/gi, "");
+                    headers["content-security-policy"] = headers["content-security-policy"].replace(/frame-ancestors[^;]*(;|$)/gi, "");
                 }
+                // Prevent caching of proxied HTML (injected scripts change between restarts)
+                headers["cache-control"] = "no-store, no-cache, must-revalidate";
+                // Set cookie so catch-all proxy can route after client-side navigation
+                // (when Referer no longer contains /preview/PORT)
+                const existing = headers["set-cookie"];
+                const portCookie = `_sanjang_port=${targetPort}; Path=/; SameSite=Lax`;
+                headers["set-cookie"] = existing
+                    ? (Array.isArray(existing) ? [...existing, portCookie] : [existing, portCookie])
+                    : [portCookie];
                 res.writeHead(proxyRes.statusCode ?? 200, headers);
                 res.end(body);
             });
@@ -368,7 +543,7 @@ export async function createApp(projectRoot, options = {}) {
     // Project info — used by dashboard header
     const projectName = projectRoot.split("/").pop() ?? "project";
     app.get("/api/project", (_req, res) => res.json({ name: projectName }));
-    app.get("/api/ports", (_req, res) => res.json(scanPorts()));
+    app.get("/api/ports", async (_req, res) => res.json(await scanPorts()));
     app.get("/api/branches", async (_req, res) => {
         try {
             res.json(await listBranches());
@@ -399,7 +574,7 @@ export async function createApp(projectRoot, options = {}) {
             setConfig(freshConfig);
             if (freshConfig.ports)
                 setPortConfig(freshConfig.ports);
-            const { slot, fePort, bePort } = allocate(existing);
+            const { slot, fePort, bePort } = await allocate(existing);
             // When portFlag is null, dev server uses its own fixed port
             const actualFePort = freshConfig.dev?.portFlag ? fePort : freshConfig.dev?.port || fePort;
             await addWorktree(name, branch);
@@ -408,12 +583,22 @@ export async function createApp(projectRoot, options = {}) {
             copyCampFiles(projectRoot, wtPath, freshConfig.copyFiles, (msg) => {
                 broadcast({ type: "log", name, source: "sanjang", data: msg });
             });
-            const baseCommit = spawnSync("git", ["-C", wtPath, "rev-parse", "HEAD"], { encoding: "utf8", stdio: "pipe" }).stdout?.trim() || undefined;
-            const record = { name, branch, slot, fePort: actualFePort, bePort, status: "setting-up", baseCommit, parentBranch: branch };
+            const baseCommit = spawnSync("git", ["-C", wtPath, "rev-parse", "HEAD"], { encoding: "utf8", stdio: "pipe" }).stdout?.trim() ||
+                undefined;
+            const record = {
+                name,
+                branch,
+                slot,
+                fePort: actualFePort,
+                bePort,
+                status: "setting-up",
+                baseCommit,
+                parentBranch: branch,
+            };
             upsert(record);
             broadcast({ type: "playground-created", name, data: record });
             res.status(201).json(record);
-            setupCampDeps(name, wtPath, freshConfig, broadcast);
+            setupCampDeps(name, wtPath, freshConfig, broadcast, () => triggerStart(name));
         }
         catch (err) {
             // Clean up orphan worktree on failure
@@ -428,24 +613,27 @@ export async function createApp(projectRoot, options = {}) {
     });
     // Track in-flight start operations
     const startingSet = new Set();
-    app.post("/api/playgrounds/:name/start", async (req, res) => {
-        const { name } = req.params;
+    /** Internal start logic — shared by API handler and auto-start after setup */
+    function triggerStart(name) {
         const pg = getOne(name);
-        if (!pg)
-            return res.status(404).json({ error: "not found" });
-        if (startingSet.has(name))
-            return res.json({ status: "already-starting" });
+        if (!pg || startingSet.has(name))
+            return;
         startingSet.add(name);
         upsert({ ...pg, status: "starting" });
         broadcast({ type: "playground-status", name, data: { status: "starting" } });
-        res.json({ status: "starting" });
         (async () => {
             try {
-                const detectedPort = await startCamp(pg, (event) => {
+                const reservedPorts = new Set(getAll().filter((c) => c.name !== name).map((c) => c.fePort));
+                const detectedPort = await startCamp({ ...pg, reservedPorts }, (event) => {
                     broadcast({ type: event.type, name, data: event.data, source: event.source });
                 });
+                if (!getOne(name)) {
+                    stopCamp(name);
+                    startingSet.delete(name);
+                    return;
+                }
                 const url = `http://localhost:${detectedPort}`;
-                const updatedCamp = { ...getOne(name), status: "running", fePort: detectedPort, url };
+                const updatedCamp = { ...(getOne(name) ?? pg), status: "running", fePort: detectedPort, url };
                 upsert(updatedCamp);
                 broadcast({ type: "playground-status", name, data: { status: "running", url } });
                 startWatcher(name);
@@ -453,9 +641,8 @@ export async function createApp(projectRoot, options = {}) {
             catch (err) {
                 const current = getOne(name) ?? pg;
                 const processInfo = getProcessInfo(name) ?? { feLogs: [], feExitCode: null };
-                // Self-heal: try to auto-fix before giving up
                 const healActions = diagnoseFromLogs(processInfo.feLogs);
-                const autoFixable = healActions.filter(a => a.auto);
+                const autoFixable = healActions.filter((a) => a.auto);
                 if (autoFixable.length > 0) {
                     broadcast({ type: "log", name, source: "sanjang", data: "문제를 발견했습니다. 자동으로 고치는 중..." });
                     const freshConfig = await loadConfig(projectRoot);
@@ -472,15 +659,21 @@ export async function createApp(projectRoot, options = {}) {
                         upsert({ ...current, status: "starting" });
                         broadcast({ type: "playground-status", name, data: { status: "starting" } });
                         try {
-                            const retryPort = await startCamp(current, (event) => {
+                            const retryReserved = new Set(getAll().filter((c) => c.name !== name).map((c) => c.fePort));
+                            const retryPort = await startCamp({ ...current, reservedPorts: retryReserved }, (event) => {
                                 broadcast({ type: event.type, name, data: event.data, source: event.source });
                             });
                             const retryUrl = `http://localhost:${retryPort}`;
-                            upsert({ ...getOne(name), status: "running", fePort: retryPort, url: retryUrl });
+                            const retryState = getOne(name);
+                            if (!retryState) {
+                                stopCamp(name);
+                                return;
+                            }
+                            upsert({ ...retryState, status: "running", fePort: retryPort, url: retryUrl });
                             broadcast({ type: "playground-status", name, data: { status: "running", url: retryUrl } });
                             startWatcher(name);
                             broadcast({ type: "log", name, source: "sanjang", data: "자동 복구 성공 ✓" });
-                            return; // healed successfully
+                            return;
                         }
                         catch {
                             // retry failed too, fall through to error
@@ -496,6 +689,16 @@ export async function createApp(projectRoot, options = {}) {
                 startingSet.delete(name);
             }
         })();
+    }
+    app.post("/api/playgrounds/:name/start", async (req, res) => {
+        const { name } = req.params;
+        const pg = getOne(name);
+        if (!pg)
+            return res.status(404).json({ error: "not found" });
+        if (startingSet.has(name))
+            return res.json({ status: "already-starting" });
+        triggerStart(name);
+        res.json({ status: "starting" });
     });
     app.post("/api/playgrounds/:name/stop", (req, res) => {
         const { name } = req.params;
@@ -583,10 +786,16 @@ export async function createApp(projectRoot, options = {}) {
             return res.json({ saved: false, reason: "변경사항이 없습니다." });
         try {
             // Reattach to branch if in detached HEAD state
-            const headRef = spawnSync("git", ["-C", wtPath, "symbolic-ref", "--quiet", "HEAD"], { encoding: "utf8", stdio: "pipe" });
+            const headRef = spawnSync("git", ["-C", wtPath, "symbolic-ref", "--quiet", "HEAD"], {
+                encoding: "utf8",
+                stdio: "pipe",
+            });
             if (headRef.status !== 0 && pg.branch) {
                 // Detached HEAD — move branch pointer to current commit and checkout
-                const currentCommit = spawnSync("git", ["-C", wtPath, "rev-parse", "HEAD"], { encoding: "utf8", stdio: "pipe" }).stdout?.trim();
+                const currentCommit = spawnSync("git", ["-C", wtPath, "rev-parse", "HEAD"], {
+                    encoding: "utf8",
+                    stdio: "pipe",
+                }).stdout?.trim();
                 if (currentCommit) {
                     spawnSync("git", ["-C", wtPath, "branch", "-f", pg.branch, currentCommit], { stdio: "pipe" });
                     spawnSync("git", ["-C", wtPath, "checkout", pg.branch], { stdio: "pipe" });
@@ -595,10 +804,16 @@ export async function createApp(projectRoot, options = {}) {
             // Stage all changes
             runGit(["-C", wtPath, "add", "-A"], wtPath);
             // Generate commit message with AI
-            const diff = spawnSync("git", ["-C", wtPath, "diff", "--cached", "--stat"], { encoding: "utf8", stdio: "pipe" }).stdout || "";
+            const diff = spawnSync("git", ["-C", wtPath, "diff", "--cached", "--stat"], { encoding: "utf8", stdio: "pipe" }).stdout ||
+                "";
             let message = `${files.length}개 파일 변경`;
             try {
-                const aiResult = spawnSync("claude", ["-p", "--model", "haiku", `이 git diff를 한국어 커밋 메시지로 작성해. 한 줄, 50자 이내, 설명 없이 메시지만:\n\n${diff.slice(0, 2000)}`], { encoding: "utf8", stdio: "pipe", timeout: 10_000 });
+                const aiResult = spawnSync("claude", [
+                    "-p",
+                    "--model",
+                    "haiku",
+                    `이 git diff를 한국어 커밋 메시지로 작성해. 한 줄, 50자 이내, 설명 없이 메시지만:\n\n${diff.slice(0, 2000)}`,
+                ], { encoding: "utf8", stdio: "pipe", timeout: 10_000 });
                 if (aiResult.status === 0 && aiResult.stdout?.trim()) {
                     message = aiResult.stdout.trim();
                 }
@@ -689,6 +904,29 @@ export async function createApp(projectRoot, options = {}) {
     // -------------------------------------------------------------------------
     // Cache management
     // -------------------------------------------------------------------------
+    // GET /api/camps/stale — camps not accessed in N days (default 7)
+    app.get("/api/camps/stale", (_req, res) => {
+        const days = parseInt(String(_req.query.days || "7"), 10);
+        const cutoff = Date.now() - days * 24 * 60 * 60 * 1000;
+        const camps = getAll();
+        const stale = camps.filter((c) => {
+            if (!c.lastAccessedAt)
+                return true; // never tracked
+            return new Date(c.lastAccessedAt).getTime() < cutoff;
+        });
+        // Get disk usage for stale camps
+        const result = stale.map((c) => {
+            const wtPath = campPath(c.name);
+            let size = "?";
+            try {
+                const du = spawnSync("du", ["-sh", wtPath], { encoding: "utf8", stdio: "pipe", timeout: 5000 });
+                size = du.stdout?.split("\t")[0]?.trim() || "?";
+            }
+            catch { /* */ }
+            return { name: c.name, branch: c.branch, status: c.status, lastAccessedAt: c.lastAccessedAt, size };
+        });
+        res.json(result);
+    });
     app.get("/api/cache/status", (_req, res) => {
         const setupCwd = config.dev?.cwd || ".";
         res.json(isCacheValid(projectRoot, setupCwd));
@@ -768,22 +1006,131 @@ export async function createApp(projectRoot, options = {}) {
             res.status(500).json({ error: err.message });
         }
     });
-    // GET /api/playgrounds/:name/changes-summary — AI 한 줄 변경 요약
-    app.get("/api/playgrounds/:name/changes-summary", async (req, res) => {
+    // GET /api/playgrounds/:name/diff — full diff or per-file diff (?file=path)
+    app.get("/api/playgrounds/:name/diff", (req, res) => {
         const { name } = req.params;
         if (!getOne(name))
             return res.status(404).json({ error: "not found" });
         try {
             const wtPath = campPath(name);
-            const diff = spawnSync("git", ["-C", wtPath, "diff", "--stat"], { encoding: "utf8", stdio: "pipe" }).stdout || "";
-            if (!diff.trim())
-                return res.json({ summary: null });
-            const result = spawnSync("claude", ["-p", "--model", "haiku", `이 git diff를 한국어 한 줄(20자 이내)로 요약해. 설명 없이 요약만:\n\n${diff.slice(0, 2000)}`], { encoding: "utf8", stdio: "pipe", timeout: 10_000 });
-            const summary = result.status === 0 ? (result.stdout ?? "").trim() : null;
-            res.json({ summary });
+            const filePath = typeof req.query.file === "string" ? req.query.file : null;
+            if (filePath) {
+                // Per-file diff
+                const tracked = spawnSync("git", ["-C", wtPath, "diff", "--", filePath], {
+                    encoding: "utf8",
+                    stdio: "pipe",
+                }).stdout || "";
+                if (tracked) {
+                    return res.json({ type: "diff", diff: tracked, path: filePath });
+                }
+                // Might be untracked (new file) — read content
+                const fullPath = join(wtPath, filePath);
+                if (existsSync(fullPath)) {
+                    const content = readFileSync(fullPath, "utf8");
+                    return res.json({ type: "new", content, path: filePath });
+                }
+                return res.json({ type: "deleted", diff: "", path: filePath });
+            }
+            // Full diff
+            const diff = spawnSync("git", ["-C", wtPath, "diff"], {
+                encoding: "utf8",
+                stdio: "pipe",
+            }).stdout || "";
+            res.json({ type: "diff", diff });
         }
-        catch {
-            res.json({ summary: null });
+        catch (err) {
+            res.status(500).json({ error: err.message });
+        }
+    });
+    // GET /api/playgrounds/:name/change-report — 구조화된 변경 리포트 (changes-summary 대체)
+    app.get("/api/playgrounds/:name/change-report", async (req, res) => {
+        const { name } = req.params;
+        if (!getOne(name))
+            return res.status(404).json({ error: "not found" });
+        try {
+            const wtPath = campPath(name);
+            const files = getChangedFiles(wtPath);
+            if (files.length === 0) {
+                return res.json({
+                    files: [],
+                    totalCount: 0,
+                    byCategory: {},
+                    warnings: [],
+                    summary: null,
+                    humanDescription: null,
+                    categoryDetails: null,
+                });
+            }
+            const validStatuses = new Set(["수정", "추가", "삭제", "새 파일"]);
+            const reportFiles = files.map((f) => ({
+                path: f.path,
+                status: (validStatuses.has(f.status) ? f.status : "수정"),
+            }));
+            let report = buildChangeReport(reportFiles);
+            // AI 요약은 ?ai=true 일 때만 (비용 절약)
+            if (req.query.ai === "true") {
+                const diffStat = spawnSync("git", ["-C", wtPath, "diff", "--stat"], {
+                    encoding: "utf8",
+                    stdio: "pipe",
+                }).stdout || "";
+                const diff = spawnSync("git", ["-C", wtPath, "diff"], {
+                    encoding: "utf8",
+                    stdio: "pipe",
+                }).stdout || "";
+                report = generateReportSummary(diffStat, diff, report);
+            }
+            res.json(report);
+        }
+        catch (err) {
+            res.status(500).json({ error: err.message });
+        }
+    });
+    // GET /api/playgrounds/:name/commit-report/:hash — 특정 커밋의 변경 리포트
+    app.get("/api/playgrounds/:name/commit-report/:hash", async (req, res) => {
+        const { name, hash } = req.params;
+        if (!getOne(name))
+            return res.status(404).json({ error: "not found" });
+        try {
+            const wtPath = campPath(name);
+            // 해당 커밋의 diff (부모 대비)
+            const diffNames = spawnSync("git", ["-C", wtPath, "diff", "--name-status", `${hash}~1..${hash}`], {
+                encoding: "utf8",
+                stdio: "pipe",
+            }).stdout?.trim() || "";
+            if (!diffNames)
+                return res.json({
+                    files: [],
+                    totalCount: 0,
+                    byCategory: {},
+                    warnings: [],
+                    summary: null,
+                    humanDescription: null,
+                    categoryDetails: null,
+                });
+            const validStatuses = new Set(["수정", "추가", "삭제", "새 파일"]);
+            const statusMap = { M: "수정", A: "새 파일", D: "삭제" };
+            const parsedFiles = diffNames.split("\n").map((line) => {
+                const [st, ...pathParts] = line.split("\t");
+                const mapped = statusMap[st || ""] || "수정";
+                return {
+                    path: pathParts.join("\t"),
+                    status: (validStatuses.has(mapped) ? mapped : "수정"),
+                };
+            });
+            let report = buildChangeReport(parsedFiles);
+            if (req.query.ai === "true") {
+                const diffStat = spawnSync("git", ["-C", wtPath, "diff", "--stat", `${hash}~1..${hash}`], {
+                    encoding: "utf8",
+                    stdio: "pipe",
+                }).stdout || "";
+                const diff = spawnSync("git", ["-C", wtPath, "diff", `${hash}~1..${hash}`], { encoding: "utf8", stdio: "pipe" })
+                    .stdout || "";
+                report = generateReportSummary(diffStat, diff, report);
+            }
+            res.json(report);
+        }
+        catch (err) {
+            res.status(500).json({ error: err.message });
         }
     });
     app.post("/api/playgrounds/:name/ship", async (req, res) => {
@@ -797,9 +1144,15 @@ export async function createApp(projectRoot, options = {}) {
         try {
             const wtPath = campPath(name);
             // 1. Reattach to branch if detached
-            const headRef = spawnSync("git", ["-C", wtPath, "symbolic-ref", "--quiet", "HEAD"], { encoding: "utf8", stdio: "pipe" });
+            const headRef = spawnSync("git", ["-C", wtPath, "symbolic-ref", "--quiet", "HEAD"], {
+                encoding: "utf8",
+                stdio: "pipe",
+            });
             if (headRef.status !== 0 && pg.branch) {
-                const cur = spawnSync("git", ["-C", wtPath, "rev-parse", "HEAD"], { encoding: "utf8", stdio: "pipe" }).stdout?.trim();
+                const cur = spawnSync("git", ["-C", wtPath, "rev-parse", "HEAD"], {
+                    encoding: "utf8",
+                    stdio: "pipe",
+                }).stdout?.trim();
                 if (cur) {
                     spawnSync("git", ["-C", wtPath, "branch", "-f", pg.branch, cur], { stdio: "pipe" });
                     spawnSync("git", ["-C", wtPath, "checkout", pg.branch], { stdio: "pipe" });
@@ -818,8 +1171,14 @@ export async function createApp(projectRoot, options = {}) {
             // 3. Check there are commits to ship (vs base)
             const base = pg.baseCommit;
             const logCheck = base
-                ? spawnSync("git", ["-C", wtPath, "log", "--oneline", `${base}..HEAD`], { encoding: "utf8", stdio: "pipe" }).stdout?.trim()
-                : spawnSync("git", ["-C", wtPath, "log", "--oneline", "-1", "HEAD"], { encoding: "utf8", stdio: "pipe" }).stdout?.trim();
+                ? spawnSync("git", ["-C", wtPath, "log", "--oneline", `${base}..HEAD`], {
+                    encoding: "utf8",
+                    stdio: "pipe",
+                }).stdout?.trim()
+                : spawnSync("git", ["-C", wtPath, "log", "--oneline", "-1", "HEAD"], {
+                    encoding: "utf8",
+                    stdio: "pipe",
+                }).stdout?.trim();
             if (!logCheck) {
                 return res.status(400).json({ error: "보낼 변경사항이 없습니다." });
             }
@@ -851,6 +1210,33 @@ export async function createApp(projectRoot, options = {}) {
                     const diffStat = spawnSync("git", ["-C", wtPath, "diff", "--stat", "HEAD~1"], { encoding: "utf8", stdio: "pipe" }).stdout ||
                         "";
                     const diff = spawnSync("git", ["-C", wtPath, "diff", "HEAD~1"], { encoding: "utf8", stdio: "pipe" }).stdout || "";
+                    // Change report warnings for PR body — based on full diff since camp creation
+                    let reportWarnings = "";
+                    try {
+                        const base = pg.baseCommit;
+                        if (base) {
+                            const diffFiles = spawnSync("git", ["-C", wtPath, "diff", "--name-status", `${base}..HEAD`], {
+                                encoding: "utf8",
+                                stdio: "pipe",
+                            }).stdout?.trim() || "";
+                            if (diffFiles) {
+                                const parsedFiles = diffFiles.split("\n").map((line) => {
+                                    const [st, ...pathParts] = line.split("\t");
+                                    return {
+                                        path: pathParts.join("\t"),
+                                        status: (st === "M" ? "수정" : st === "D" ? "삭제" : st === "A" ? "추가" : "수정"),
+                                    };
+                                });
+                                const shipReport = buildChangeReport(parsedFiles);
+                                if (shipReport.warnings.length > 0) {
+                                    reportWarnings = "\n\n### ⚠️ 주의사항\n" + shipReport.warnings.map((w) => `- ${w.message}`).join("\n");
+                                }
+                            }
+                        }
+                    }
+                    catch {
+                        /* non-critical */
+                    }
                     // Try Claude for rich PR body, fallback to simple
                     const claudeCheck = spawnSync("which", ["claude"], { stdio: "pipe" });
                     let prBody;
@@ -865,11 +1251,11 @@ export async function createApp(projectRoot, options = {}) {
                         });
                         prBody =
                             claudeResult.status === 0 && claudeResult.stdout?.trim()
-                                ? claudeResult.stdout.trim()
-                                : buildFallbackPrBody({ message, actions, diffStat });
+                                ? claudeResult.stdout.trim() + reportWarnings
+                                : buildFallbackPrBody({ message, actions, diffStat }) + reportWarnings;
                     }
                     else {
-                        prBody = buildFallbackPrBody({ message, actions, diffStat });
+                        prBody = buildFallbackPrBody({ message, actions, diffStat }) + reportWarnings;
                     }
                     const prResult = spawnSync("gh", ["pr", "create", "--title", message, "--body", prBody, "--head", branchName], { cwd: wtPath, encoding: "utf8", stdio: ["pipe", "pipe", "pipe"] });
                     if (prResult.status === 0) {
@@ -899,7 +1285,12 @@ export async function createApp(projectRoot, options = {}) {
             if (claudeCheck.status !== 0) {
                 return res.json({ passed: true, skipped: true, reason: "claude CLI 없음 — 테스트 생략" });
             }
-            const result = spawnSync("claude", ["-p", "--model", "haiku", `이 프로젝트에서 PR 전에 돌려야 할 테스트 명령어를 찾아서 실행해줘. .github/workflows/ 디렉토리, package.json scripts, Makefile 등을 확인해. typecheck과 test를 우선 실행하고 결과를 알려줘. 명령어와 결과만 간단히.`], { cwd: wtPath, encoding: "utf8", stdio: "pipe", timeout: 120_000 });
+            const result = spawnSync("claude", [
+                "-p",
+                "--model",
+                "haiku",
+                `이 프로젝트에서 PR 전에 돌려야 할 테스트 명령어를 찾아서 실행해줘. .github/workflows/ 디렉토리, package.json scripts, Makefile 등을 확인해. typecheck과 test를 우선 실행하고 결과를 알려줘. 명령어와 결과만 간단히.`,
+            ], { cwd: wtPath, encoding: "utf8", stdio: "pipe", timeout: 120_000 });
             const output = result.stdout?.trim() || "";
             const failed = result.status !== 0 || /fail|error|FAIL|ERROR/i.test(output);
             broadcast({ type: "log", name, source: "sanjang", data: failed ? "❌ 테스트 실패" : "✅ 테스트 통과" });
@@ -921,7 +1312,11 @@ export async function createApp(projectRoot, options = {}) {
             return res.status(400).json({ error: "되돌릴 파일을 선택해주세요." });
         // Validate file paths against traversal and shell injection
         for (const file of files) {
-            if (typeof file !== "string" || file.includes("..") || file.startsWith("/") || /[`$;"'\\|&]/.test(file)) {
+            if (typeof file !== "string" ||
+                file.includes("..") ||
+                file.startsWith("/") ||
+                file.startsWith("-") ||
+                /[`$;"'\\|&]/.test(file)) {
                 return res.status(400).json({ error: `invalid file path: ${file}` });
             }
         }
@@ -1004,7 +1399,16 @@ export async function createApp(projectRoot, options = {}) {
                     stdio: "pipe",
                 }).stdout || "";
                 const conflictFiles = parseConflictFiles(statusOut);
-                res.json({ synced: false, conflict: true, conflictFiles, message: "충돌이 있습니다. 어떻게 할까요?" });
+                const conflictDetails = conflictFiles.map((f) => {
+                    try {
+                        const content = readFileSync(join(campPath(name), f), "utf8");
+                        return { path: f, sections: parseConflictSections(content) };
+                    }
+                    catch {
+                        return { path: f, sections: [] };
+                    }
+                });
+                res.json({ synced: false, conflict: true, conflictFiles, conflictDetails, message: "충돌이 있습니다. 어떻게 할까요?" });
             }
             else {
                 broadcast({ type: "playground-synced", name });
@@ -1019,7 +1423,16 @@ export async function createApp(projectRoot, options = {}) {
                     stdio: "pipe",
                 }).stdout || "";
                 const conflictFiles = parseConflictFiles(statusOut);
-                res.json({ synced: false, conflict: true, conflictFiles, message: "충돌이 있습니다. 어떻게 할까요?" });
+                const conflictDetails = conflictFiles.map((f) => {
+                    try {
+                        const content = readFileSync(join(campPath(name), f), "utf8");
+                        return { path: f, sections: parseConflictSections(content) };
+                    }
+                    catch {
+                        return { path: f, sections: [] };
+                    }
+                });
+                res.json({ synced: false, conflict: true, conflictFiles, conflictDetails, message: "충돌이 있습니다. 어떻게 할까요?" });
             }
             else {
                 res.status(500).json({ error: err.message });
@@ -1105,13 +1518,95 @@ export async function createApp(projectRoot, options = {}) {
         spawnSync("git", ["-C", wtPath, "merge", "--abort"], { stdio: "pipe" });
         res.json({ aborted: true });
     });
-    // Task runner removed — use Claude Code directly in the terminal
+    // POST /api/playgrounds/:name/resolve-file — resolve a single file
+    app.post("/api/playgrounds/:name/resolve-file", (req, res) => {
+        const { name } = req.params;
+        const { path: filePath, strategy } = req.body ?? {};
+        if (!getOne(name))
+            return res.status(404).json({ error: "not found" });
+        if (!filePath || !["ours", "theirs"].includes(strategy)) {
+            return res.status(400).json({ error: "path and strategy (ours/theirs) required" });
+        }
+        const wtPath = campPath(name);
+        spawnSync("git", ["-C", wtPath, "checkout", `--${strategy}`, "--", filePath], { stdio: "pipe" });
+        spawnSync("git", ["-C", wtPath, "add", "--", filePath], { stdio: "pipe" });
+        // Check if all conflicts are resolved
+        const statusOut = spawnSync("git", ["-C", wtPath, "status", "--porcelain"], {
+            encoding: "utf8",
+            stdio: "pipe",
+        }).stdout || "";
+        const remaining = parseConflictFiles(statusOut);
+        res.json({ resolved: true, file: filePath, strategy, remaining: remaining.length });
+    });
+    // POST /api/playgrounds/:name/resolve-finalize — commit after all files resolved
+    app.post("/api/playgrounds/:name/resolve-finalize", (req, res) => {
+        const { name } = req.params;
+        if (!getOne(name))
+            return res.status(404).json({ error: "not found" });
+        const wtPath = campPath(name);
+        const result = spawnSync("git", ["-C", wtPath, "commit", "--no-edit"], {
+            encoding: "utf8",
+            stdio: "pipe",
+        });
+        if (result.status === 0) {
+            broadcast({ type: "conflict-resolved", name });
+            res.json({ finalized: true });
+        }
+        else {
+            res.status(500).json({ error: (result.stderr || "").trim() || "커밋 실패" });
+        }
+    });
+    // POST /api/playgrounds/:name/test — run test command and stream output
+    const testProcs = new Map();
+    app.post("/api/playgrounds/:name/test", (req, res) => {
+        const { name } = req.params;
+        const pg = getOne(name);
+        if (!pg)
+            return res.status(404).json({ error: "not found" });
+        // Kill existing test if running
+        const existing = testProcs.get(name);
+        if (existing) {
+            try {
+                existing.kill("SIGTERM");
+            }
+            catch { /* */ }
+            testProcs.delete(name);
+        }
+        const wtPath = campPath(name);
+        const testCmd = config.test?.command || detectTestCommand(projectRoot, config.dev.cwd) || "npm test";
+        const testCwd = config.test?.cwd ? join(wtPath, config.test.cwd) : join(wtPath, config.dev.cwd || ".");
+        const child = spawn(testCmd, [], {
+            cwd: testCwd,
+            shell: true,
+            stdio: ["ignore", "pipe", "pipe"],
+            env: { ...process.env, FORCE_COLOR: "1", CI: "true" },
+        });
+        testProcs.set(name, child);
+        broadcast({ type: "test-started", name });
+        child.stdout.on("data", (d) => {
+            broadcast({ type: "test-output", name, data: { text: d.toString() } });
+        });
+        child.stderr.on("data", (d) => {
+            broadcast({ type: "test-output", name, data: { text: d.toString() } });
+        });
+        child.on("close", (code) => {
+            testProcs.delete(name);
+            broadcast({ type: "test-done", name, data: { exitCode: code ?? 1 } });
+        });
+        child.on("error", (err) => {
+            testProcs.delete(name);
+            broadcast({ type: "test-done", name, data: { exitCode: 1, error: err.message } });
+        });
+        res.json({ started: true, command: testCmd });
+    });
     // POST /api/playgrounds/:name/enter — 캠프 진입 (정보 조회만, 터미널은 별도)
     app.post("/api/playgrounds/:name/enter", async (req, res) => {
         const { name } = req.params;
         const pg = getOne(name);
         if (!pg)
             return res.status(404).json({ error: "not found" });
+        // Track last access
+        upsert({ ...pg, lastAccessedAt: new Date().toISOString() });
         const wtPath = campPath(name);
         // 변경사항 조회
         let changes = { count: 0, files: [], actions: [] };
@@ -1131,7 +1626,7 @@ export async function createApp(projectRoot, options = {}) {
                 : ["-C", wtPath, "log", "--oneline", "--format=%h\t%s\t%cr", "--max-count=5", "HEAD"];
             const log = spawnSync("git", logArgs, { encoding: "utf8", stdio: "pipe" }).stdout?.trim() || "";
             if (log) {
-                commits = log.split("\n").map(line => {
+                commits = log.split("\n").map((line) => {
                     const [hash = "", message = "", date = ""] = line.split("\t");
                     return { hash, message, date };
                 });
@@ -1270,14 +1765,15 @@ export async function createApp(projectRoot, options = {}) {
             setConfig(freshConfig2);
             if (freshConfig2.ports)
                 setPortConfig(freshConfig2.ports);
-            const { slot, fePort, bePort } = allocate(existing);
+            const { slot, fePort, bePort } = await allocate(existing);
             const actualFePort2 = freshConfig2.dev?.portFlag ? fePort : freshConfig2.dev?.port || fePort;
             await addWorktree(name, branch);
             const wtPath = campPath(name);
             copyCampFiles(projectRoot, wtPath, freshConfig2.copyFiles, (msg) => {
                 broadcast({ type: "log", name, source: "sanjang", data: msg });
             });
-            const baseCommit2 = spawnSync("git", ["-C", wtPath, "rev-parse", "HEAD"], { encoding: "utf8", stdio: "pipe" }).stdout?.trim() || undefined;
+            const baseCommit2 = spawnSync("git", ["-C", wtPath, "rev-parse", "HEAD"], { encoding: "utf8", stdio: "pipe" }).stdout?.trim() ||
+                undefined;
             const record = {
                 name,
                 branch,
@@ -1292,7 +1788,7 @@ export async function createApp(projectRoot, options = {}) {
             upsert(record);
             broadcast({ type: "playground-created", name, data: record });
             res.status(201).json(record);
-            setupCampDeps(name, wtPath, freshConfig2, broadcast);
+            setupCampDeps(name, wtPath, freshConfig2, broadcast, () => triggerStart(name));
         }
         catch (err) {
             try {
@@ -1344,7 +1840,8 @@ export async function createApp(projectRoot, options = {}) {
                     stopWatcher(name);
                     updateCampStatus(name, "starting");
                     broadcast({ type: "playground-status", name, data: { status: "starting" } });
-                    const detectedPort = await startCamp(pg, (event) => {
+                    const fixReserved = new Set(getAll().filter((c) => c.name !== name).map((c) => c.fePort));
+                    const detectedPort = await startCamp({ ...pg, reservedPorts: fixReserved }, (event) => {
                         broadcast({ type: event.type, name, data: event.data, source: event.source });
                     });
                     const url = `http://localhost:${detectedPort}`;
@@ -1353,7 +1850,7 @@ export async function createApp(projectRoot, options = {}) {
                     startWatcher(name);
                     return res.json({ fixed: true, description: fix.description });
                 }
-                catch (retryErr) {
+                catch (_retryErr) {
                     return res.json({ fixed: false, description: "설정을 고쳤지만 시작에 실패했습니다." });
                 }
             }
@@ -1362,6 +1859,32 @@ export async function createApp(projectRoot, options = {}) {
     });
     let activityCache = null;
     const ACTIVITY_CACHE_TTL = 5 * 60 * 1000; // 5 minutes
+    // GET /api/compare/status — main 서버 상태
+    app.get("/api/compare/status", (_req, res) => {
+        res.json(getMainServerState());
+    });
+    // POST /api/compare/start — main 서버 시작
+    app.post("/api/compare/start", async (_req, res) => {
+        const mainState = getMainServerState();
+        if (mainState.status === "running") {
+            return res.json(mainState);
+        }
+        try {
+            await startMainServer(projectRoot, config, {
+                onReady: (port) => { broadcast({ type: "compare-ready", data: { port } }); },
+                onLog: (msg) => { broadcast({ type: "log", name: "__main__", source: "sanjang", data: msg }); },
+            });
+            res.json(getMainServerState());
+        }
+        catch (err) {
+            res.status(500).json({ error: err.message });
+        }
+    });
+    // POST /api/compare/stop — main 서버 중지
+    app.post("/api/compare/stop", (_req, res) => {
+        stopMainServer();
+        res.json({ ok: true });
+    });
     app.get("/api/activity", (_req, res) => {
         if (activityCache && Date.now() - activityCache.ts < ACTIVITY_CACHE_TTL) {
             return res.json(activityCache.data);
@@ -1413,8 +1936,6 @@ export async function createApp(projectRoot, options = {}) {
                 streak++;
             }
             else if (key === todayStr) {
-                // Today having 0 commits is ok — streak can start from yesterday
-                continue;
             }
             else {
                 break;
@@ -1424,26 +1945,111 @@ export async function createApp(projectRoot, options = {}) {
         activityCache = { data, ts: Date.now() };
         res.json(data);
     });
-    // SPA fallback
+    // Vite resource proxy — catch-all for non-dashboard paths.
+    // Instead of whitelisting Vite prefixes (/@, /src/, /node_modules/, /@fs/, /.vite/, ...),
+    // we blacklist known dashboard routes and proxy everything else to a running camp.
+    app.use((req, res, next) => {
+        const url = req.url;
+        // Dashboard routes — let them through to SPA fallback
+        if (url === "/" || url.startsWith("/api/") || url.startsWith("/preview/")) {
+            return next();
+        }
+        // Dashboard static files are already handled by express.static above
+        // Determine target dev server port (camp or main comparison server)
+        const referer = req.headers.referer || "";
+        const refMatch = /\/preview\/(\d+)/.exec(referer);
+        const camps = getAll();
+        const runningCamps = camps.filter((c) => c.status === "running");
+        const mainState = getMainServerState();
+        // Build set of all known dev server ports
+        const knownPorts = new Set(camps.map((c) => c.fePort));
+        if (mainState.status === "running" && mainState.port)
+            knownPorts.add(mainState.port);
+        let targetPort = null;
+        if (refMatch) {
+            const port = parseInt(refMatch[1], 10);
+            if (knownPorts.has(port))
+                targetPort = port;
+        }
+        // Fallback: extract camp name from /@fs/ path containing .sanjang/camps/<name>/
+        // in either the request URL or the Referer. This handles nested module imports
+        // whose Referer is another /@fs/ module URL (not the preview page URL).
+        if (!targetPort) {
+            const fsPattern = /\/@fs\/.*?\/\.sanjang\/camps\/([^/]+)\//;
+            const fsMatch = fsPattern.exec(url) || fsPattern.exec(referer);
+            if (fsMatch) {
+                const camp = camps.find((c) => c.name === fsMatch[1]);
+                if (camp && camp.status === "running")
+                    targetPort = camp.fePort;
+            }
+        }
+        // Fallback: read port from cookie (set by preview proxy on HTML responses).
+        // This handles client-side navigation where neither URL nor Referer
+        // contains camp info (e.g. goto('/login') from a SvelteKit app).
+        if (!targetPort) {
+            const cookieHeader = req.headers.cookie || "";
+            const portCookie = /(?:^|;\s*)_sanjang_port=(\d+)/.exec(cookieHeader);
+            if (portCookie) {
+                const cookiePort = parseInt(portCookie[1], 10);
+                if (knownPorts.has(cookiePort))
+                    targetPort = cookiePort;
+            }
+        }
+        // Fall back: if only one running dev server total, use it
+        const allRunningPorts = [
+            ...runningCamps.map((c) => c.fePort),
+            ...(mainState.status === "running" && mainState.port ? [mainState.port] : []),
+        ];
+        if (!targetPort && allRunningPorts.length === 1) {
+            targetPort = allRunningPorts[0];
+        }
+        if (!targetPort)
+            return next();
+        // Proxy to the target Vite dev server
+        const proxyReq = httpRequest({
+            hostname: "localhost",
+            port: targetPort,
+            path: url,
+            method: req.method,
+            headers: { ...req.headers, host: `localhost:${targetPort}` },
+        }, (proxyRes) => {
+            res.writeHead(proxyRes.statusCode ?? 200, proxyRes.headers);
+            proxyRes.pipe(res);
+        });
+        proxyReq.on("error", () => next());
+        req.pipe(proxyReq);
+    });
+    // SPA fallback — only for dashboard routes that passed through above
     app.get("*", (_req, res) => {
         res.sendFile(join(dashboardDir, "index.html"));
     });
-    return { app, server, port, runningTasks, warpStatus, watchers };
+    return { app, server, port, runningTasks, warpStatus, watchers, healthCheckTimer };
 }
 export async function startServer(projectRoot, options = {}) {
-    const { server, port, runningTasks, warpStatus, watchers } = await createApp(projectRoot, options);
+    const { server, port, runningTasks, warpStatus, watchers, healthCheckTimer } = await createApp(projectRoot, options);
     server.listen(port, "127.0.0.1", () => {
-        console.log(`⛰ 산장 서버 실행 중 — http://localhost:${port}`);
+        const url = `http://localhost:${port}`;
+        console.log(`⛰ 산장 서버 실행 중 — ${url}`);
+        startBranchRefresh();
         if (warpStatus.installed) {
             console.log("  Warp 감지됨 ✓ — 캠프 진입 시 터미널이 자동으로 열립니다");
         }
         else {
             console.log("  ℹ Warp를 설치하면 캠프↔터미널 자동 연동을 사용할 수 있습니다");
         }
+        // Auto-open browser
+        const openCmd = process.platform === "darwin" ? "open" : process.platform === "win32" ? "start" : "xdg-open";
+        try {
+            spawn(openCmd, [url], { stdio: "ignore", detached: true }).unref();
+        }
+        catch {
+            // Silently ignore — CLI-only environments
+        }
     });
     // Graceful shutdown
     function shutdown() {
         console.log("\n⛰ 산장 종료 중...");
+        clearInterval(healthCheckTimer);
         for (const [, child] of runningTasks) {
             try {
                 child.kill("SIGTERM");
@@ -1456,6 +2062,7 @@ export async function startServer(projectRoot, options = {}) {
             w.stop();
         watchers.clear();
         stopAllCamps();
+        stopMainServer();
         server.close(() => process.exit(0));
         // Force exit after 10s if cleanup hangs
         setTimeout(() => process.exit(1), 10_000);