sanjang 0.3.4 → 0.3.6

package/dashboard/style.css

@@ -7,6 +7,18 @@
 
 @import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600&family=Outfit:wght@400;500;600;700&display=swap');
 
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0,0,0,0);
+  white-space: nowrap;
+  border: 0;
+}
+
 *, *::before, *::after {
   box-sizing: border-box;
   margin: 0;
@@ -684,6 +696,35 @@ header h1::before {
   letter-spacing: -0.01em;
 }
 
+.new-camp-tabs {
+  display: flex;
+  gap: 0;
+  border-bottom: 1px solid var(--border);
+  margin: -8px 0 0;
+}
+
+.new-camp-tab {
+  flex: 1;
+  padding: 8px 12px;
+  background: none;
+  border: none;
+  border-bottom: 2px solid transparent;
+  color: var(--text-muted);
+  font-size: 13px;
+  cursor: pointer;
+  transition: color 0.15s, border-color 0.15s;
+}
+
+.new-camp-tab:hover {
+  color: var(--text-primary);
+}
+
+.new-camp-tab.active {
+  color: var(--text-primary);
+  border-bottom-color: var(--accent);
+  font-weight: 500;
+}
+
 /* Form elements */
 .form-group {
   display: flex;
@@ -968,6 +1009,49 @@ header h1::before {
   font-weight: 600;
 }
 
+/* Camp switcher dropdown */
+.ws-camp-switcher { position: relative; }
+.ws-camp-switch-btn {
+  background: none;
+  border: 1px solid transparent;
+  border-radius: 6px;
+  padding: 4px 8px;
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--text);
+  cursor: pointer;
+}
+.ws-camp-switch-btn:hover { border-color: var(--border-subtle); background: var(--surface); }
+.ws-camp-switch-btn::after { content: ' ▾'; font-size: 10px; color: var(--text-muted); }
+.ws-camp-dropdown {
+  display: none;
+  position: absolute;
+  top: 100%;
+  left: 0;
+  z-index: 100;
+  min-width: 220px;
+  background: var(--bg);
+  border: 1px solid var(--border-subtle);
+  border-radius: 8px;
+  box-shadow: 0 8px 24px rgba(0,0,0,0.15);
+  padding: 4px;
+  margin-top: 4px;
+}
+.ws-camp-dropdown.open { display: block; }
+.ws-camp-dd-item {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 10px;
+  border-radius: 6px;
+  cursor: pointer;
+  font-size: 13px;
+}
+.ws-camp-dd-item:hover { background: var(--surface); }
+.ws-camp-dd-name { font-weight: 500; color: var(--text); }
+.ws-camp-dd-branch { color: var(--text-muted); font-size: 11px; margin-left: auto; }
+.ws-camp-dd-empty { padding: 12px; color: var(--text-muted); font-size: 12px; text-align: center; }
+
 /* Preview — full screen behind topbar */
 .ws-preview-full {
   position: absolute;
@@ -1074,6 +1158,7 @@ header h1::before {
   padding: 3px 0;
   border-bottom: 1px solid var(--border-subtle);
   display: flex;
+  flex-wrap: wrap;
   gap: 6px;
   align-items: baseline;
 }
@@ -1090,13 +1175,113 @@ header h1::before {
   word-break: break-all;
 }
 
-.ws-error-badge {
+.ws-error-stack {
+  width: 100%;
+  margin-top: 2px;
+}
+
+.ws-error-stack summary {
+  cursor: pointer;
+  color: var(--text-muted);
+  font-size: 10px;
+  user-select: none;
+}
+
+.ws-error-stack pre {
+  margin: 4px 0 0;
+  padding: 6px 8px;
+  background: rgba(0,0,0,0.3);
+  border-radius: 4px;
+  font-size: 10px;
+  line-height: 1.5;
+  color: var(--text-secondary);
+  white-space: pre-wrap;
+  word-break: break-all;
+  max-height: 150px;
+  overflow-y: auto;
+}
+
+.btn-fix {
+  display: block;
+  width: 100%;
+  margin-top: 8px;
+  padding: 8px 12px;
+  background: linear-gradient(135deg, #ef4444 0%, #f97316 100%);
+  color: #fff;
+  border: none;
+  border-radius: 6px;
+  font-size: 13px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: opacity 0.15s, transform 0.1s;
+}
+.btn-fix:hover { opacity: 0.9; transform: translateY(-1px); }
+.btn-fix:active { transform: translateY(0); }
+
+.ws-error-badge, .ws-devtab-badge {
   background: #ef4444;
   color: white;
   font-size: 10px;
   padding: 1px 6px;
   border-radius: 10px;
-  margin-left: 6px;
+  margin-left: 4px;
+}
+
+/* Devtools tabs */
+.ws-devtabs {
+  display: flex;
+  gap: 0;
+  border-bottom: 1px solid var(--border-subtle);
+  margin-bottom: 8px;
+}
+.ws-devtab-btn {
+  background: none;
+  border: none;
+  border-bottom: 2px solid transparent;
+  padding: 6px 10px;
+  font-size: 12px;
+  color: var(--text-muted);
+  cursor: pointer;
+  white-space: nowrap;
+}
+.ws-devtab-btn:hover { color: var(--text); }
+.ws-devtab-btn.ws-devtab-active { color: var(--text); border-bottom-color: var(--accent); }
+.ws-devtab-panel { max-height: 300px; overflow-y: auto; }
+
+/* Console panel */
+.ws-console-panel { padding: 4px 8px; font-size: 11px; font-family: var(--font-mono); }
+.ws-console-item { padding: 2px 0; border-bottom: 1px solid var(--border-subtle); word-break: break-all; }
+.ws-console-log { color: var(--text); }
+.ws-console-warn { color: #f59e0b; }
+.ws-console-info { color: #3b82f6; }
+
+/* Network panel */
+.ws-network-panel { padding: 4px 8px; font-size: 11px; font-family: var(--font-mono); }
+.ws-net-item { display: flex; align-items: center; gap: 6px; padding: 3px 0; border-bottom: 1px solid var(--border-subtle); }
+.ws-net-method { font-weight: 600; font-size: 10px; padding: 1px 4px; border-radius: 3px; flex-shrink: 0; }
+.ws-net-method-get { color: #22c55e; }
+.ws-net-method-post { color: #3b82f6; }
+.ws-net-method-put { color: #f59e0b; }
+.ws-net-method-delete { color: #ef4444; }
+.ws-net-method-patch { color: #a855f7; }
+.ws-net-url { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); }
+.ws-net-status { font-weight: 600; flex-shrink: 0; }
+.ws-net-ok { color: #22c55e; }
+.ws-net-warn { color: #f59e0b; }
+.ws-net-err { color: #ef4444; }
+.ws-net-dur { color: var(--text-muted); flex-shrink: 0; }
+
+/* Test runner panel */
+.ws-test-panel { padding: 4px 8px; font-size: 12px; }
+.ws-test-status { padding: 8px; font-weight: 600; border-radius: 6px; margin-bottom: 8px; }
+.ws-test-running { background: color-mix(in srgb, var(--accent) 15%, transparent); color: var(--accent); }
+.ws-test-pass { background: #dcfce7; color: #166534; }
+.ws-test-fail { background: #fef2f2; color: #991b1b; }
+.ws-test-output { max-height: 250px; overflow: auto; font-family: var(--font-mono); font-size: 11px; line-height: 1.5; white-space: pre-wrap; word-break: break-all; padding: 8px; background: var(--surface); border-radius: 6px; }
+.ws-test-badge { font-size: 10px; }
+@media (prefers-color-scheme: dark) {
+  .ws-test-pass { background: #052e16; color: #86efac; }
+  .ws-test-fail { background: #450a0a; color: #fca5a5; }
 }
 
 .ws-file-item {
@@ -1106,6 +1291,62 @@ header h1::before {
   padding: 3px 0;
   font-size: 13px;
 }
+/* Stale camp banner + cleanup */
+.portal-stale-banner {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 10px 16px;
+  margin: 0 16px;
+  background: color-mix(in srgb, #f59e0b 12%, transparent);
+  border: 1px solid color-mix(in srgb, #f59e0b 30%, transparent);
+  border-radius: 8px;
+  font-size: 13px;
+  color: var(--text);
+}
+.ws-stale-item {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 0;
+  border-bottom: 1px solid var(--border-subtle);
+  font-size: 13px;
+  cursor: pointer;
+}
+.ws-stale-item:last-child { border-bottom: none; }
+.ws-stale-item input { flex-shrink: 0; }
+
+/* Conflict resolution */
+.conflict-file { border: 1px solid var(--border-subtle); border-radius: 8px; margin-bottom: 8px; overflow: hidden; transition: opacity 0.3s; }
+.conflict-file-header { display: flex; align-items: center; justify-content: space-between; padding: 8px 12px; background: var(--surface); }
+.conflict-file-header code { font-size: 12px; }
+.conflict-file-actions { display: flex; gap: 4px; }
+.conflict-section { display: flex; gap: 0; }
+.conflict-side { flex: 1; padding: 8px; font-size: 11px; overflow: auto; }
+.conflict-side pre { margin: 0; white-space: pre-wrap; word-break: break-all; font-family: var(--font-mono); font-size: 11px; }
+.conflict-side-label { font-size: 10px; font-weight: 600; margin-bottom: 4px; }
+.conflict-ours { background: color-mix(in srgb, #3b82f6 10%, transparent); border-right: 1px solid var(--border-subtle); }
+.conflict-ours .conflict-side-label { color: #3b82f6; }
+.conflict-theirs { background: color-mix(in srgb, #f59e0b 10%, transparent); }
+.conflict-theirs .conflict-side-label { color: #f59e0b; }
+
+.ws-file-clickable { cursor: pointer; border-radius: 4px; padding: 3px 4px; }
+.ws-file-clickable:hover { background: color-mix(in srgb, var(--accent) 10%, transparent); }
+
+/* Diff modal */
+.modal-wide { max-width: 720px; width: 90vw; }
+.diff-content { max-height: 60vh; overflow: auto; }
+.diff-header { font-size: 13px; font-weight: 600; color: var(--text-muted); padding: 8px 0 4px; }
+.diff-pre { margin: 0; font-size: 12px; line-height: 1.6; white-space: pre-wrap; word-break: break-all; }
+.diff-line { padding: 0 8px; }
+.diff-line-add { background: #dcfce7; color: #166534; }
+.diff-line-del { background: #fef2f2; color: #991b1b; }
+.diff-line-hunk { background: var(--surface); color: var(--accent); font-weight: 600; margin-top: 8px; }
+.diff-line-meta { color: var(--text-muted); font-weight: 600; }
+@media (prefers-color-scheme: dark) {
+  .diff-line-add { background: #052e16; color: #86efac; }
+  .diff-line-del { background: #450a0a; color: #fca5a5; }
+}
 
 .ws-action-item {
   font-size: 13px;
@@ -1707,11 +1948,8 @@ header.hidden {
   margin-top: 8px;
 }
 .ws-commit-item {
-  display: flex;
-  justify-content: space-between;
-  align-items: baseline;
-  gap: 8px;
-  padding: 4px 0;
+  display: block;
+  padding: 0;
   font-size: 13px;
   border-bottom: 1px solid var(--border);
 }
@@ -1720,6 +1958,10 @@ header.hidden {
 }
 .ws-commit-msg {
   color: var(--text-primary);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  min-width: 0;
 }
 .ws-commit-date {
   color: var(--text-muted);
@@ -2096,6 +2338,9 @@ header.hidden {
   font-size: 11px;
   color: #e4e8f0;
   white-space: nowrap;
+  max-width: min(320px, calc(100vw - 120px));
+  overflow: hidden;
+  text-overflow: ellipsis;
   animation: bubble-float 3s ease-in-out infinite;
 }
 
@@ -2169,3 +2414,125 @@ header.hidden {
   font-size: 11px;
   color: var(--text-muted);
 }
+
+/* Change Report */
+.ws-report-section { border-top: 1px solid var(--border); padding-top: 12px; }
+.ws-report-desc { font-size: 14px; line-height: 1.6; color: var(--text); margin-bottom: 8px; white-space: pre-line; }
+.ws-report-warning { display: flex; align-items: center; gap: 6px; padding: 6px 8px; margin-bottom: 4px; background: rgba(255, 180, 0, 0.08); border-radius: 6px; font-size: 13px; color: var(--text-muted); }
+.ws-report-warning-icon { font-size: 14px; flex-shrink: 0; }
+.ws-report-categories { display: flex; flex-direction: column; gap: 10px; margin-top: 8px; }
+.ws-report-cat-group { }
+.ws-report-cat-header { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; }
+.ws-report-cat-label { font-size: 13px; font-weight: 600; color: var(--text); }
+.ws-report-cat-count { font-size: 11px; color: var(--text-muted); background: var(--surface); padding: 1px 6px; border-radius: 8px; }
+.ws-report-cat-items { list-style: none; margin: 0; padding: 0; }
+.ws-report-cat-items li { font-size: 13px; color: var(--text-muted); padding: 2px 0 2px 16px; position: relative; line-height: 1.5; }
+.ws-report-cat-items li::before { content: '•'; position: absolute; left: 4px; color: var(--text-muted); }
+.ws-report-nav-item { cursor: pointer; transition: color 0.15s, background 0.15s; border-radius: 4px; }
+.ws-report-nav-item:hover { color: var(--accent) !important; background: color-mix(in srgb, var(--accent) 10%, transparent); }
+.ws-report-nav-hint { font-size: 11px; color: var(--accent); opacity: 0; transition: opacity 0.15s; margin-left: 4px; }
+.ws-report-nav-item:hover .ws-report-nav-hint { opacity: 1; }
+.ws-report-saved { opacity: 0.7; }
+.ws-report-saved-desc { font-size: 13px; color: var(--text-muted); }
+
+/* Commit report (details/summary dropdown) */
+details.ws-commit-item { border-radius: 6px; margin-bottom: 4px; }
+details.ws-commit-item > summary.ws-commit-summary { display: flex; align-items: center; gap: 6px; cursor: pointer; list-style: none; padding: 6px 8px; border-radius: 6px; flex-wrap: nowrap; }
+details.ws-commit-item > summary.ws-commit-summary::-webkit-details-marker { display: none; }
+details.ws-commit-item > summary.ws-commit-summary:hover { background: var(--surface); }
+.ws-commit-arrow { font-size: 10px; color: var(--text-muted); flex-shrink: 0; transition: transform 0.15s; display: inline-block; }
+details.ws-commit-item[open] .ws-commit-arrow { transform: rotate(90deg); }
+.ws-commit-report { margin: 4px 8px 8px 8px; padding: 10px 12px; background: var(--surface); border-radius: 6px; font-size: 12px; width: auto; }
+.ws-commit-report-loading, .ws-commit-report-empty { color: var(--text-muted); }
+.ws-commit-cat { margin-bottom: 6px; }
+.ws-commit-cat:last-child { margin-bottom: 0; }
+.ws-commit-cat-label { font-size: 11px; font-weight: 600; color: var(--text-muted); display: block; margin-bottom: 2px; }
+.ws-commit-cat-item { color: var(--text-muted); padding-left: 12px; position: relative; line-height: 1.5; }
+.ws-commit-cat-item::before { content: '•'; position: absolute; left: 3px; color: var(--text-muted); }
+
+/* Preview toolbar — URL bar + viewport switcher */
+.ws-preview-toolbar {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 4px 8px;
+  background: var(--bg);
+  border-bottom: 1px solid var(--border-subtle);
+  flex-shrink: 0;
+}
+.ws-url-bar {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  flex: 1;
+  min-width: 0;
+}
+.ws-url-back, .ws-url-refresh {
+  background: none;
+  border: 1px solid var(--border-subtle);
+  border-radius: 4px;
+  width: 28px;
+  height: 28px;
+  cursor: pointer;
+  font-size: 14px;
+  color: var(--text-muted);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+}
+.ws-url-back:hover, .ws-url-refresh:hover { background: var(--surface); color: var(--text); }
+.ws-url-input {
+  flex: 1;
+  min-width: 0;
+  height: 28px;
+  padding: 0 8px;
+  border: 1px solid var(--border-subtle);
+  border-radius: 4px;
+  background: var(--surface);
+  color: var(--text);
+  font-family: var(--font-mono);
+  font-size: 12px;
+}
+.ws-url-input:focus { outline: none; border-color: var(--accent); }
+.ws-viewport-switcher {
+  display: flex;
+  gap: 2px;
+  flex-shrink: 0;
+}
+.ws-vp-btn {
+  background: none;
+  border: 1px solid transparent;
+  border-radius: 4px;
+  width: 28px;
+  height: 28px;
+  cursor: pointer;
+  font-size: 14px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.ws-vp-btn:hover { background: var(--surface); }
+.ws-vp-btn.ws-vp-active { background: var(--surface); border-color: var(--accent); }
+
+/* Split-view compare */
+.ws-preview-container { position: relative; flex: 1; display: flex; }
+.ws-preview-container .ws-preview-full { flex: 1; }
+.ws-preview-main { display: none; flex: 1; flex-direction: column; border-left: 2px solid var(--accent); position: relative; }
+.ws-preview-main.hidden { display: none !important; }
+.ws-split-view .ws-preview-full,
+.ws-split-view .ws-preview-main { flex: 1; display: flex; flex-direction: column; min-width: 0; position: relative !important; top: auto !important; left: auto !important; right: auto !important; bottom: auto !important; }
+.ws-split-view .ws-preview-iframe { width: 100%; height: 100%; border: none; }
+.ws-preview-label { position: absolute; top: 8px; left: 8px; z-index: 10; background: var(--surface); padding: 2px 8px; border-radius: 4px; font-size: 11px; color: var(--text-muted); pointer-events: none; }
+.ws-preview-loading { display: flex; align-items: center; justify-content: center; flex: 1; color: var(--text-muted); font-size: 14px; }
+.btn-active { background: var(--accent) !important; color: white !important; }
+.ws-split-view .ws-preview-full::before {
+  content: '⛺ 내 캠프';
+  position: absolute; top: 8px; left: 8px; z-index: 10;
+  background: var(--surface); padding: 2px 8px; border-radius: 4px;
+  font-size: 11px; color: var(--text-muted); pointer-events: none;
+}
+
+/* Ship report preview */
+.ship-report-preview { margin-bottom: 12px; padding: 10px; background: var(--surface); border-radius: 6px; font-size: 13px; line-height: 1.5; }
+.ship-report-desc { margin-bottom: 8px; }

package/dist/bin/sanjang.js

@@ -1,4 +1,12 @@
 #!/usr/bin/env node
+// Node 22+ required for --experimental-transform-types
+const nodeVersion = parseInt(process.versions.node.split(".")[0], 10);
+if (nodeVersion < 22) {
+    console.error(`⛰ 산장: Node 22 이상이 필요합니다. (현재: v${process.versions.node})`);
+    console.error("  해결: nvm install 22 && nvm use 22");
+    console.error("  또는: https://nodejs.org 에서 최신 LTS를 설치하세요.");
+    process.exit(1);
+}
 import { execSync } from "node:child_process";
 import { existsSync } from "node:fs";
 import { resolve } from "node:path";
@@ -14,7 +22,7 @@ for (let i = 0; i < args.length; i++) {
         i++;
     }
     if (args[i] === "--port" && args[i + 1]) {
-        port = parseInt(args[i + 1]);
+        port = parseInt(args[i + 1], 10);
         i++;
     }
     if (args[i] === "--force") {
@@ -53,8 +61,8 @@ if (command === "init") {
             rl.question("  어떤 앱을 띄울까요? [번호]: ", resolve);
         });
         rl.close();
-        const idx = parseInt(answer) - 1;
-        if (idx < 0 || idx >= apps.length || isNaN(idx)) {
+        const idx = parseInt(answer, 10) - 1;
+        if (idx < 0 || idx >= apps.length || Number.isNaN(idx)) {
             console.error("⛰ 잘못된 선택입니다.");
             process.exit(1);
         }
@@ -116,21 +124,156 @@ if (command === "init") {
 }
 else if (command === "help" || command === "--help" || command === "-h") {
     console.log(`
-⛰ 산장 (Sanjang) — 바이브코더를 위한 로컬 개발 환경 매니저
+⛰ 산장 (Sanjang) — 비개발자가 AI로 코드를 고치고 PR을 보낼 수 있는 로컬 개발 환경
 
 사용법:
   sanjang              서버 시작 (대시보드: http://localhost:4000)
   sanjang init         프로젝트 분석 → sanjang.config.js 생성
+  sanjang list         캠프 목록 보기
+  sanjang status       서버 + 캠프 상태 확인
+  sanjang start <name> 캠프 시작
+  sanjang stop <name>  캠프 중지
+  sanjang open <name>  캠프를 브라우저에서 열기
   sanjang help         이 도움말
 
 옵션:
   --port <N>           대시보드 포트 (기본: 4000)
   --project <path>     프로젝트 경로 (기본: 현재 디렉토리)
+  --json               JSON으로 출력 (Claude Code 등 자동화용)
   --force              기존 설정을 덮어쓰고 다시 생성
 
 자세히: https://github.com/paul-sherpas/sanjang
 `);
 }
+else if (command === "list" || command === "status" || command === "start" || command === "stop" || command === "open") {
+    // CLI commands that talk to the running sanjang server
+    const jsonMode = args.includes("--json");
+    const campName = args[1] && !args[1].startsWith("-") ? args[1] : undefined;
+    const baseUrl = `http://127.0.0.1:${port}`;
+    async function apiFetch(path, method = "GET", body) {
+        const opts = { method, headers: { "content-type": "application/json" } };
+        if (body)
+            opts.body = JSON.stringify(body);
+        const res = await fetch(`${baseUrl}${path}`, opts);
+        if (!res.ok) {
+            const err = await res.json().catch(() => ({ error: res.statusText }));
+            throw new Error(err.error || `HTTP ${res.status}`);
+        }
+        return res.json();
+    }
+    async function tryApi(fn) {
+        try {
+            return await fn();
+        }
+        catch (err) {
+            if (err.cause && String(err.cause).includes("ECONNREFUSED")) {
+                console.error("⛰ 산장 서버가 실행되지 않고 있습니다.");
+                console.error(`  sanjang 또는 npx sanjang 으로 먼저 시작하세요.`);
+                process.exit(1);
+            }
+            throw err;
+        }
+    }
+    try {
+        if (command === "list") {
+            const camps = await tryApi(() => apiFetch("/api/playgrounds"));
+            if (jsonMode) {
+                process.stdout.write(JSON.stringify(camps, null, 2) + "\n");
+            }
+            else if (camps.length === 0) {
+                console.log("⛰ 캠프가 없습니다. 대시보드에서 만들어보세요.");
+            }
+            else {
+                console.log("⛰ 캠프 목록:\n");
+                for (const c of camps) {
+                    const status = c.status === "running" ? "🟢" : c.status === "error" ? "🔴" : "⚪";
+                    const url = c.status === "running" && c.fePort ? `http://localhost:${c.fePort}` : "";
+                    console.log(`  ${status} ${c.name}\t${c.branch}\t${url}`);
+                }
+            }
+        }
+        else if (command === "status") {
+            const camps = await tryApi(() => apiFetch("/api/playgrounds"));
+            const running = camps.filter(c => c.status === "running").length;
+            const total = camps.length;
+            if (jsonMode) {
+                process.stdout.write(JSON.stringify({ server: { url: baseUrl, status: "running" }, camps }, null, 2) + "\n");
+            }
+            else {
+                console.log(`⛰ 산장 서버: ${baseUrl}`);
+                console.log(`  캠프: ${total}개 (실행 중 ${running}개)`);
+                for (const c of camps) {
+                    const status = c.status === "running" ? "🟢" : c.status === "error" ? "🔴" : "⚪";
+                    console.log(`  ${status} ${c.name} (${c.status})`);
+                }
+            }
+        }
+        else if (command === "start") {
+            if (!campName) {
+                console.error("⛰ 사용법: sanjang start <캠프이름>");
+                process.exit(1);
+            }
+            const result = await tryApi(() => apiFetch(`/api/playgrounds/${campName}/start`, "POST"));
+            if (jsonMode) {
+                process.stdout.write(JSON.stringify(result, null, 2) + "\n");
+            }
+            else {
+                console.log(`⛰ ${campName} 캠프를 시작합니다.`);
+            }
+        }
+        else if (command === "stop") {
+            if (!campName) {
+                console.error("⛰ 사용법: sanjang stop <캠프이름>");
+                process.exit(1);
+            }
+            const result = await tryApi(() => apiFetch(`/api/playgrounds/${campName}/stop`, "POST"));
+            if (jsonMode) {
+                process.stdout.write(JSON.stringify(result, null, 2) + "\n");
+            }
+            else {
+                console.log(`⛰ ${campName} 캠프를 중지합니다.`);
+            }
+        }
+        else if (command === "open") {
+            if (!campName) {
+                console.error("⛰ 사용법: sanjang open <캠프이름>");
+                process.exit(1);
+            }
+            const camps = await tryApi(() => apiFetch("/api/playgrounds"));
+            const camp = camps.find(c => c.name === campName);
+            if (!camp) {
+                console.error(`⛰ "${campName}" 캠프를 찾을 수 없습니다.`);
+                process.exit(1);
+            }
+            if (camp.status !== "running" || !camp.fePort) {
+                console.error(`⛰ "${campName}" 캠프가 실행 중이 아닙니다. sanjang start ${campName} 을 먼저 실행하세요.`);
+                process.exit(1);
+            }
+            const campUrl = `http://localhost:${camp.fePort}`;
+            if (jsonMode) {
+                process.stdout.write(JSON.stringify({ name: campName, url: campUrl, status: camp.status }, null, 2) + "\n");
+            }
+            else {
+                console.log(`⛰ ${campName} 캠프를 브라우저에서 엽니다. → ${campUrl}`);
+            }
+            const { spawn: spawnOpen } = await import("node:child_process");
+            const openCmd = process.platform === "darwin" ? "open" : process.platform === "win32" ? "start" : "xdg-open";
+            try {
+                spawnOpen(openCmd, [campUrl], { stdio: "ignore", detached: true }).unref();
+            }
+            catch { /* */ }
+        }
+    }
+    catch (err) {
+        if (jsonMode) {
+            process.stdout.write(JSON.stringify({ error: err.message }, null, 2) + "\n");
+        }
+        else {
+            console.error(`⛰ 오류: ${err.message}`);
+        }
+        process.exit(1);
+    }
+}
 else {
     // Default: start server — auto-init if no config exists
     const configPath = resolve(projectRoot, "sanjang.config.js");
@@ -147,10 +290,12 @@ else {
             console.log("");
             const { createInterface } = await import("node:readline");
             const rl = createInterface({ input: process.stdin, output: process.stdout });
-            const answer = await new Promise((r) => { rl.question("  어떤 앱을 띄울까요? [번호]: ", r); });
+            const answer = await new Promise((r) => {
+                rl.question("  어떤 앱을 띄울까요? [번호]: ", r);
+            });
             rl.close();
-            const idx = parseInt(answer) - 1;
-            if (idx < 0 || idx >= apps.length || isNaN(idx)) {
+            const idx = parseInt(answer, 10) - 1;
+            if (idx < 0 || idx >= apps.length || Number.isNaN(idx)) {
                 console.error("⛰ 잘못된 선택입니다.");
                 process.exit(1);
             }

package/dist/lib/config.d.ts

@@ -4,6 +4,11 @@ import type { DetectedApp, DetectedProject, GenerateConfigResult, SanjangConfig
  * Returns merged config with defaults.
  */
 export declare function loadConfig(projectRoot: string): Promise<SanjangConfig>;
+/**
+ * Auto-detect a test command from package.json.
+ * Returns null if no test script found or it's the npm default placeholder.
+ */
+export declare function detectTestCommand(projectRoot: string, cwd?: string): string | null;
 /**
  * Auto-detect project type and generate config.
  */