sanjang 0.3.5 → 0.3.7

package/dist/lib/server.js

@@ -1,15 +1,16 @@
 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 { buildChangeReport, generateReportSummary } from "./engine/change-report.js";
 import { applyConfigFix, suggestConfigFix } from "./engine/config-hotfix.js";
-import { buildConflictPrompt, parseConflictFiles } from "./engine/conflict.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";
@@ -23,7 +24,7 @@ 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 { 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
@@ -99,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 || ".";
@@ -117,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}), 설치 중...` });
@@ -140,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})` });
@@ -257,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());
@@ -266,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) {
@@ -279,8 +368,8 @@ 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 {
@@ -302,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>`;
@@ -333,21 +468,24 @@ export async function createApp(projectRoot, options = {}) {
         const campName = camp?.name ?? "__main__";
         const targetPath = req.url || "/";
         const proxyReq = httpRequest({
-            hostname: "127.0.0.1",
+            hostname: "localhost",
             port: targetPort,
             path: targetPath,
             method: req.method,
-            headers: { ...req.headers, host: `localhost:${targetPort}` },
+            // 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", () => {
@@ -356,7 +494,11 @@ export async function createApp(projectRoot, options = {}) {
                     .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>`);
                 }
@@ -376,6 +518,15 @@ export async function createApp(projectRoot, options = {}) {
                 if (typeof headers["content-security-policy"] === "string") {
                     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);
             });
@@ -389,10 +540,42 @@ export async function createApp(projectRoot, options = {}) {
     // -------------------------------------------------------------------------
     // REST API
     // -------------------------------------------------------------------------
+    // CORS for extension — localhost cross-port requests
+    app.use("/api/", (req, res, next) => {
+        const origin = req.headers.origin || "";
+        if (origin.startsWith("http://localhost:") || origin.startsWith("http://127.0.0.1:") ||
+            origin.startsWith("https://localhost:") || origin.startsWith("https://127.0.0.1:")) {
+            res.setHeader("Access-Control-Allow-Origin", origin);
+            res.setHeader("Access-Control-Allow-Methods", "GET, POST, DELETE, OPTIONS");
+            res.setHeader("Access-Control-Allow-Headers", "Content-Type");
+        }
+        if (req.method === "OPTIONS")
+            return res.sendStatus(204);
+        next();
+    });
+    // Extension API — 확장이 현재 포트가 산장 캠프인지 확인
+    app.get("/api/camps/by-port/:port", (req, res) => {
+        const targetPort = parseInt(req.params.port, 10);
+        if (!Number.isFinite(targetPort))
+            return res.status(400).json({ error: "invalid port" });
+        const camps = getAll();
+        const camp = camps.find((c) => c.fePort === targetPort && c.status === "running");
+        if (!camp)
+            return res.status(404).json({ error: "not found" });
+        res.json({
+            name: camp.name,
+            branch: camp.branch,
+            status: camp.status,
+            fePort: camp.fePort,
+        });
+    });
+    app.get("/api/extension/version", (_req, res) => {
+        res.json({ serverVersion: "0.3.7", minExtVersion: "0.1.0" });
+    });
     // 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());
@@ -423,7 +606,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);
@@ -447,7 +630,7 @@ export async function createApp(projectRoot, options = {}) {
             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
@@ -462,24 +645,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);
@@ -487,7 +673,6 @@ 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);
                 if (autoFixable.length > 0) {
@@ -506,15 +691,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
@@ -530,6 +721,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;
@@ -735,6 +936,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));
@@ -814,6 +1038,42 @@ export async function createApp(projectRoot, options = {}) {
             res.status(500).json({ error: err.message });
         }
     });
+    // 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 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 (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;
@@ -1171,7 +1431,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 });
@@ -1186,7 +1455,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 });
@@ -1272,13 +1550,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: [] };
@@ -1437,7 +1797,7 @@ 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);
@@ -1460,7 +1820,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 {
@@ -1512,7 +1872,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}`;
@@ -1541,8 +1902,9 @@ export async function createApp(projectRoot, options = {}) {
             return res.json(mainState);
         }
         try {
-            await startMainServer(projectRoot, config, (port) => {
-                broadcast({ type: "compare-ready", data: { port } });
+            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());
         }
@@ -1615,26 +1977,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");