npm - coxpit - Versions diffs - 4.8.0 → 5.0.0 - Mend

coxpit 4.8.0 → 5.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (5) hide show

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "coxpit",
-  "version": "4.8.0",
+  "version": "5.0.0",
   "description": "Self-hosted cockpit for running a fleet of AI coding agents across your own machines — parallel worktree runs, live board, compare & merge, web terminal, design capture.",
   "type": "module",
   "license": "MIT",

package/src/board.ts CHANGED Viewed

@@ -23,8 +23,12 @@ export const BOARD_HTML = /* html */ `<!doctype html>
   *{box-sizing:border-box}
   [hidden]{display:none !important}
   html,body{height:100%}
+  /* mobile stability — kill the iOS left-right rubber-band + horizontal pan.
+     overscroll-behavior on the root stops the rubber-band; overflow-x:hidden is on BODY only
+     (NOT html — overflow on html breaks iOS position:fixed/sticky, which the header + drawer use). */
+  html{overscroll-behavior:none}
   body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:14px;line-height:1.5;
-    -webkit-font-smoothing:antialiased}
+    -webkit-font-smoothing:antialiased;overflow-x:hidden;overscroll-behavior-x:none}
   ::selection{background:var(--brand-dim)}
   ::-webkit-scrollbar{width:9px;height:9px}
   ::-webkit-scrollbar-thumb{background:#252c3a;border-radius:5px;border:2px solid var(--bg)}
@@ -82,6 +86,94 @@ export const BOARD_HTML = /* html */ `<!doctype html>
     color:var(--faint);margin:2px 0 -2px}
   .btn[disabled]{opacity:.4;cursor:not-allowed;filter:none}
+  /* ── navigator rail (v5.0) — machine · repos · view nav · New ── */
+  aside.rail{padding:12px 10px;gap:4px;overflow-y:auto}
+  .rail .machine{display:flex;align-items:center;gap:8px;font-family:var(--mono);font-size:11.5px;
+    color:var(--ink);border:1px solid var(--line-hi);border-radius:8px;padding:7px 10px;margin-bottom:6px;
+    cursor:pointer;background:transparent;text-align:left;width:100%}
+  .rail .machine:hover{border-color:rgba(78,201,176,.4)}
+  .rail .machine .ic{width:14px;height:14px;color:var(--muted)}
+  .rail .machine .msp{flex:1;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
+  .rail .machine .mdot2{width:6px;height:6px;border-radius:50%;background:var(--faint);flex:none}
+  .rail .machine .mdot2.on{background:var(--s-done)}
+  .rlabel{font-family:var(--mono);font-size:9.5px;text-transform:uppercase;letter-spacing:.13em;
+    color:var(--faint);margin:8px 6px 4px}
+  /* rail repo rows — #repoList + the add row(#repoAdd) 만 (라이브러리 캡처 .repo 는 건드리지 않음) */
+  #repoList .repo,.repo.add{display:flex;align-items:center;gap:9px;padding:7px 10px;border-radius:8px;cursor:pointer;
+    color:var(--muted);font-family:var(--sans);font-size:13px;border:none;background:transparent;
+    position:relative;width:100%;text-align:left}
+  #repoList .repo:hover,.repo.add:hover{background:var(--surface2);color:var(--ink)}
+  #repoList .repo.on{background:var(--brand-dim);color:var(--ink)}
+  #repoList .repo .ic,.repo.add .ic{width:15px;height:15px;color:var(--faint)}
+  #repoList .repo.on .ic{color:var(--brand)}
+  #repoList .repo .nm,.repo.add .nm{flex:1;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:inherit}
+  #repoList .repo .cnt{font-family:var(--mono);font-size:10px;color:var(--brand);background:var(--brand-dim);
+    border-radius:99px;padding:1px 7px;flex:none}
+  #repoList .repo .attn{width:7px;height:7px;border-radius:50%;background:var(--s-failed);flex:none;
+    box-shadow:0 0 0 2px var(--surface)}
+  .repo.add{color:var(--faint);font-size:12px}
+  #repoList .repo .rowmenu{display:none;align-items:center;gap:2px;flex:none}
+  #repoList .repo:hover .rowmenu{display:flex}
+  #repoList .repo:hover .cnt{display:none}
+  #repoList .repo .rmbtn{background:none;border:none;color:var(--faint);cursor:pointer;padding:2px;
+    display:inline-flex;border-radius:5px}
+  #repoList .repo .rmbtn:hover{color:var(--ink);background:var(--line)}
+  #repoList .repo .rmbtn .ic{width:13px;height:13px;color:inherit}
+  .navi{display:flex;align-items:center;gap:9px;padding:7px 10px;border-radius:8px;color:var(--muted);
+    cursor:pointer;font-size:13px;border:none;background:transparent;width:100%;text-align:left;font-family:var(--sans)}
+  .navi:hover{background:var(--surface2)}
+  .navi.on{background:var(--surface2);color:var(--ink)}
+  .navi .ic{width:15px;height:15px}
+  .navi.on .ic{color:var(--brand)}
+  .navi .nsp{flex:1}
+  .navi .n{font-family:var(--mono);font-size:10.5px;color:var(--faint)}
+  .railsp{flex:1;min-height:8px}
+  .newbtn{display:flex;align-items:center;justify-content:center;gap:7px;background:var(--brand);
+    color:var(--brand-ink);border:none;border-radius:var(--r-ctl);font-family:var(--sans);font-weight:700;
+    font-size:13px;padding:10px;cursor:pointer;margin-top:8px}
+  .newbtn:hover{filter:brightness(1.08)}
+  .newbtn[disabled]{opacity:.4;cursor:not-allowed;filter:none}
+  .newbtn .ic{width:16px;height:16px}
+  .newnote{font-family:var(--mono);font-size:9.5px;color:var(--faint);text-align:center;margin-top:5px}
+  /* mobile FAB (v5.0 pocket board) — floating ＋ opens the compose sheet; hidden on desktop */
+  .fab{display:none;position:fixed;z-index:28;right:18px;
+    right:calc(18px + env(safe-area-inset-right));bottom:20px;bottom:calc(20px + env(safe-area-inset-bottom));
+    width:52px;height:52px;border-radius:50%;border:none;background:var(--brand);color:var(--brand-ink);
+    box-shadow:0 6px 20px rgba(0,0,0,.4);cursor:pointer;align-items:center;justify-content:center}
+  .fab:active{filter:brightness(.94)}
+  .fab .ic{width:24px;height:24px}
+  /* machine menu (native select 대체) — 레일 컨텍스트 앵커 */
+  .mmenu{position:absolute;z-index:45;min-width:170px;background:var(--surface2);border:1px solid var(--line-hi);
+    border-radius:9px;box-shadow:var(--shadow);padding:4px;display:none}
+  .mmenu.open{display:block}
+  .mmenu .mopt{display:flex;align-items:center;gap:8px;padding:7px 10px;border-radius:6px;
+    font-family:var(--mono);font-size:12px;color:var(--muted);cursor:pointer;white-space:nowrap}
+  .mmenu .mopt:hover{background:var(--surface);color:var(--ink)}
+  .mmenu .mopt.on{color:var(--brand)}
+  .mmenu .mopt .mdot2{width:6px;height:6px;border-radius:50%;background:var(--faint);flex:none}
+  .mmenu .mopt .mdot2.on{background:var(--s-done)}
+  /* ── New sheet (v5.0 Part B — focused compose Task|Goal|Workbench) ── */
+  .sheet{width:min(400px,94vw);max-height:88vh;background:var(--surface);
+    border:1px solid var(--line-hi);border-radius:14px;box-shadow:var(--shadow);
+    display:flex;flex-direction:column;gap:13px;padding:16px 18px 16px}
+  .sheet-h{display:flex;align-items:center;gap:9px;font-family:var(--mono);font-size:12px}
+  .sheet-h .t{color:var(--ink);font-weight:700}.sheet-h .r{color:var(--faint);overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
+  .sheet-h .sp{flex:1}.sheet-h .x{color:var(--muted);cursor:pointer;background:none;border:none;padding:2px}
+  .sheet #taskForm{display:flex;flex-direction:column;gap:13px;min-height:0}
+  .sheet-body{display:flex;flex-direction:column;gap:8px;overflow-y:auto;min-height:0;max-height:60vh;padding:1px}
+  .sheet-f{display:flex;align-items:center;gap:8px;padding-top:12px;border-top:1px solid var(--line)}
+  .sheet-f #modeSeg{flex:1}
+  .sheet-f #runFleetBtn{flex:0 0 auto}
+  /* progressive Options reveal (rarely-used Task fields) */
+  .opt{border:1px solid var(--line);border-radius:var(--r-ctl);background:#0e1118;overflow:hidden}
+  .opt-h{width:100%;display:flex;align-items:center;gap:8px;background:transparent;border:none;cursor:pointer;
+    padding:8px 10px;font-size:12px;font-weight:600;color:var(--muted);text-align:left}
+  .opt-h:hover{color:var(--ink)}
+  .opt-h .opt-car{width:14px;height:14px;color:var(--faint);transform:rotate(0deg);transition:transform .16s}
+  .opt-h[aria-expanded="true"] .opt-car{transform:rotate(90deg)}
+  .opt-h .opt-sub{margin-left:auto;font-family:var(--mono);font-size:10px;color:var(--faint);font-weight:500}
+  .opt-b{display:flex;flex-direction:column;gap:8px;padding:2px 10px 11px}
   /* ── repo browser ── */
   .brw{width:min(560px,94vw);max-height:78vh;background:var(--surface);border:1px solid var(--line);
     border-radius:14px;box-shadow:var(--shadow);display:flex;flex-direction:column;overflow:hidden}
@@ -478,8 +570,8 @@ export const BOARD_HTML = /* html */ `<!doctype html>
     white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
   /* ── AI review panel (compare) ── */
-  .cmp-review{border-bottom:1px solid var(--line);background:var(--surface2);padding:14px 20px;
-    max-height:42vh;overflow:auto;font-size:13px;line-height:1.65;color:var(--muted)}
+  .cmp-review{flex:1;min-height:0;overflow:auto;background:var(--surface2);
+    padding:20px max(20px,calc((100% - 880px)/2));font-size:13.5px;line-height:1.7;color:var(--muted)}
   .cmp-review[hidden]{display:none}
   .cmp-review h2{font-size:13px;color:var(--brand);margin:14px 0 6px;letter-spacing:.02em}
   .cmp-review h3{font-size:12.5px;color:var(--ink);margin:12px 0 4px}
@@ -507,7 +599,7 @@ export const BOARD_HTML = /* html */ `<!doctype html>
   #outDetail .dl-line{cursor:pointer;border-radius:3px}
   #outDetail .dl-line:hover{background:rgba(78,201,176,.09)}
-  /* ── v4.7 산출물 계약(contract strip) — 모달 헤더 아래 요청 산출물 요약 ── */
+  /* ── v4.7 outputs contract (contract strip) — required-outputs summary under the modal header ── */
   .contract{display:flex;flex-wrap:wrap;align-items:center;gap:7px;padding:9px 18px;
     border-bottom:1px solid var(--line);background:var(--surface2);
     font-family:var(--mono);font-size:10.5px;color:var(--faint);line-height:1.5}
@@ -580,11 +672,14 @@ export const BOARD_HTML = /* html */ `<!doctype html>
     .layout{grid-template-columns:1fr;min-height:calc(100dvh - 55px)}
     /* 사이드바 = 오프캔버스 드로어 — 플릿이 첫 화면, 런처는 ☰ 뒤에 */
     .menu-btn{display:inline-flex}
-    aside{position:fixed;top:54px;bottom:0;left:0;width:min(86vw,340px);z-index:30;
-      transform:translateX(-103%);transition:transform .22s ease;overflow-y:auto;
+    aside{position:fixed;top:54px;bottom:0;left:0;width:min(86vw,340px);max-width:100vw;z-index:30;
+      transform:translateX(-103%);transition:transform .22s ease;overflow-y:auto;overflow-x:hidden;
       -webkit-overflow-scrolling:touch;box-shadow:var(--shadow)}
     aside.open{transform:translateX(0)}
     .scrim.on{display:block}
+    /* pocket board — drawer is JUST the navigator; the ＋ FAB opens the compose sheet */
+    .fab{display:inline-flex}
+    #newBtn,.newnote{display:none}
     header{padding:0 12px;gap:9px}
     .brand .sub,.daemon-badge,.machines{display:none}
     main{padding:14px}
@@ -615,25 +710,74 @@ ${ICON_SPRITE}
   <button class="btn-ghost sm menu-btn" id="menuBtn" aria-label="open launcher">☰</button>
   <div class="brand"><span class="mark">coxpit</span><span class="sub">fleet console</span></div>
   <span class="daemon-badge" id="daemonBadge" style="display:none"></span>
-  <div class="seg view-seg" id="viewSeg">
-    <button type="button" class="seg-opt on" data-view="active">Active</button>
-    <button type="button" class="seg-opt" data-view="archive">Archive <span id="archN" class="seg-hint"></span></button>
-  </div>
   <div class="ws"><span class="dot" id="wsdot"></span><span id="wstext">connecting</span></div>
   <button class="btn-ghost sm" id="bell" title="notify when a run settles"><svg class="ic"><use href="#i-bell-off"/></svg></button>
   <button class="btn-ghost sm" id="remoteBtn" title="reach this daemon from elsewhere (Tailscale · recipes)"><svg class="ic"><use href="#i-external-link"/></svg></button>
   <div class="machines" id="machines"></div>
 </header>
 <div class="scrim" id="scrim"></div>
+<!-- pocket board FAB (v5.0 Part C) — mobile-only; opens the compose sheet -->
+<button type="button" class="fab" id="fab" aria-label="new task"><svg class="ic"><use href="#i-plus"/></svg></button>
 <div class="layout">
-  <aside>
-    <div class="sect">
-      <p class="sect-label">Context</p>
-      <p class="flabel">machine</p>
-      <select id="repoMachine"></select>
-      <p class="flabel">repository</p>
-      <select id="taskRepo"></select>
-      <div class="row">
+  <aside class="rail">
+    <button type="button" class="machine" id="machineSwitch">
+      <svg class="ic"><use href="#i-server"/></svg>
+      <span class="msp" id="machineLbl">local</span>
+      <span class="mdot2" id="machineDot"></span>
+    </button>
+    <div class="mmenu" id="machineMenu"></div>
+    <p class="rlabel">Repositories</p>
+    <div id="repoList"></div>
+    <button type="button" class="repo add" id="repoAdd">
+      <svg class="ic"><use href="#i-plus"/></svg><span class="nm">Add repository…</span>
+    </button>
+    <p class="rlabel">View</p>
+    <nav id="viewNav">
+      <button type="button" class="navi on" data-view="active">
+        <svg class="ic"><use href="#i-layers"/></svg><span>Active</span><span class="nsp"></span><span class="n" id="navActiveN"></span>
+      </button>
+      <button type="button" class="navi" data-view="goals">
+        <svg class="ic"><use href="#i-target"/></svg><span>Goals</span><span class="nsp"></span><span class="n" id="navGoalsN"></span>
+      </button>
+      <button type="button" class="navi" data-view="archive">
+        <svg class="ic"><use href="#i-archive"/></svg><span>Archive</span><span class="nsp"></span><span class="n" id="navArchiveN"></span>
+      </button>
+    </nav>
+    <div class="railsp"></div>
+    <button type="button" class="newbtn" id="newBtn"><svg class="ic"><use href="#i-plus"/></svg> New</button>
+    <p class="newnote">Task · Goal · Workbench</p>
+    <details class="sect" id="libraryBox" style="margin-top:12px">
+      <summary class="sect-label" style="cursor:pointer;list-style:none">Library · design captures ▾</summary>
+      <div id="captures" style="display:flex;flex-direction:column;gap:6px;margin-top:10px"></div>
+      <a id="bmk" class="btn-ghost sm" style="text-decoration:none;text-align:center;display:block;padding:6px;margin-top:6px"
+         title="drag me to your bookmarks bar, then click it on your running app">⌖ coxpit inspect</a>
+      <span style="font-size:11px;color:var(--faint)">Drag to bookmarks. Click it on your app, then click an element.
+      With auth on, append ?k=&lt;pass&gt; to the script URL.</span>
+    </details>
+  </aside>
+  <!-- New sheet (v5.0 Part B — focused compose: Task | Goal | Workbench) -->
+  <div class="overlay" id="newSheet">
+    <div class="sheet" id="sheetCard">
+      <div class="sheet-h"><svg class="ic" style="color:var(--brand)"><use href="#i-plus"/></svg>
+        <span class="t">New</span><span class="r" id="sheetRepoLbl"></span><span class="sp"></span>
+        <button type="button" class="x" id="sheetClose" aria-label="close"><svg class="ic"><use href="#i-x"/></svg></button></div>
+      <div class="seg" id="launchTabs" role="group" aria-label="launch type">
+        <button type="button" class="seg-opt on" data-tab="task">Task</button>
+        <button type="button" class="seg-opt" data-tab="goal">Goal</button>
+        <button type="button" class="seg-opt" data-tab="bench">Workbench</button>
+      </div>
+      <!-- hidden state selects (target machine/repo — driven by the rail + repo picker) -->
+      <select id="repoMachine" hidden></select>
+      <select id="taskRepo" hidden></select>
+      <!-- repo picker affordances (opened from the Add-repository rail button / handlers) -->
+      <div class="row" id="repoActions" hidden>
         <button type="button" class="btn-ghost sm" id="repoBrowse" style="flex:1">Browse…</button>
         <button type="button" class="btn-ghost sm" id="repoNew" style="flex:0 0 auto" title="start a new project — empty folder in, scaffolded repo out">New</button>
         <button type="button" class="btn-ghost sm" id="repoManual" style="flex:0 0 auto" title="type an absolute path">Path</button>
@@ -646,68 +790,68 @@ ${ICON_SPRITE}
           <button class="btn-ghost sm" type="submit" style="flex:0 0 auto">Register</button>
         </div>
       </form>
-    </div>
-    <div class="sect">
-      <p class="sect-label">Start</p>
-      <div class="seg" id="launchTabs">
-        <button type="button" class="seg-opt on" data-tab="task">Task</button>
-        <button type="button" class="seg-opt" data-tab="goal">Goal</button>
-        <button type="button" class="seg-opt" data-tab="bench">Workbench</button>
-      </div>
       <form id="taskForm">
-        <div id="panelTask" style="display:flex;flex-direction:column;gap:8px">
-          <input id="taskTitle" placeholder="Task title" />
-          <textarea id="taskPrompt" placeholder="Prompt — target files, constraints, how to verify"></textarea>
-          <button type="button" class="btn-ghost sm" id="ghImport">From GitHub issue / PR…</button>
-          <div class="seg" id="provSeg" role="group" aria-label="agent provider">
-            <button type="button" class="seg-opt on" data-agent="claude-code">Claude</button>
-            <button type="button" class="seg-opt" data-agent="codex">Codex</button>
+        <div class="sheet-body">
+          <div id="panelTask" style="display:flex;flex-direction:column;gap:8px">
+            <input id="taskTitle" placeholder="Task title" />
+            <textarea id="taskPrompt" placeholder="Prompt — target files, constraints, how to verify"></textarea>
+            <button type="button" class="btn-ghost sm" id="ghImport">From GitHub issue / PR…</button>
+            <div class="seg" id="provSeg" role="group" aria-label="agent provider">
+              <button type="button" class="seg-opt on" data-agent="claude-code">Claude</button>
+              <button type="button" class="seg-opt" data-agent="codex">Codex</button>
+            </div>
+            <div class="opt" id="taskOpt">
+              <button type="button" class="opt-h" id="taskOptToggle" aria-expanded="false">
+                <svg class="ic opt-car"><use href="#i-chevron"/></svg>
+                <span>Options</span><span class="opt-sub">model · design · deliverables</span>
+              </button>
+              <div class="opt-b" id="taskOptBody" hidden>
+                <p class="flabel">model · optional</p>
+                <input id="taskModel" placeholder="CLI default" list="modelHist" autocomplete="off" />
+                <datalist id="modelHist"></datalist>
+                <p class="flabel">design capture · optional</p>
+                <select id="taskCapture"><option value="">no design capture</option></select>
+                <p class="flabel">deliverables · optional (contract)</p>
+                <div class="ochips" id="taskOutputs" role="group" aria-label="declared deliverables">
+                  <button type="button" class="ochip" data-out="answer">Answer</button>
+                  <button type="button" class="ochip" data-out="code">Code</button>
+                  <button type="button" class="ochip" data-out="doc">Doc</button>
+                  <button type="button" class="ochip" data-out="page">Page</button>
+                  <button type="button" class="ochip" data-out="file">File</button>
+                </div>
+              </div>
+            </div>
           </div>
-          <p class="flabel">model · optional</p>
-          <input id="taskModel" placeholder="CLI default" list="modelHist" autocomplete="off" />
-          <datalist id="modelHist"></datalist>
-          <p class="flabel">design capture · optional</p>
-          <select id="taskCapture"><option value="">no design capture</option></select>
-          <p class="flabel">deliverables · optional (계약)</p>
-          <div class="ochips" id="taskOutputs" role="group" aria-label="declared deliverables">
-            <button type="button" class="ochip" data-out="answer">답변</button>
-            <button type="button" class="ochip" data-out="code">코드</button>
-            <button type="button" class="ochip" data-out="doc">문서</button>
-            <button type="button" class="ochip" data-out="page">페이지</button>
-            <button type="button" class="ochip" data-out="file">파일</button>
+          <div id="panelGoal" hidden style="flex-direction:column;gap:8px">
+            <textarea id="planGoal" placeholder="One goal — a planner agent reads the repo, splits it into independent tasks, and launches them all. Converge with Select runs → Integrate."></textarea>
+            <div class="seg" id="provSegGoal" role="group" aria-label="agent provider">
+              <button type="button" class="seg-opt on" data-agent="claude-code">Claude</button>
+              <button type="button" class="seg-opt" data-agent="codex">Codex</button>
+            </div>
+          </div>
+          <div id="panelBench" hidden style="flex-direction:column;gap:8px">
+            <input id="benchTitle" placeholder="Workbench name · optional" />
+            <p style="font-size:11.5px;color:var(--faint);margin:0;line-height:1.55">Isolated worktree + terminal. Work interactively — run <span style="color:var(--brand);font-family:var(--mono)">claude</span> inside, take hours — then decide the merge from the card.</p>
           </div>
         </div>
-        <div id="panelGoal" hidden style="flex-direction:column;gap:8px">
-          <textarea id="planGoal" placeholder="One goal — a planner agent reads the repo, splits it into independent tasks, and launches them all. Converge with Select runs → Integrate."></textarea>
-        </div>
-        <div id="panelBench" hidden style="flex-direction:column;gap:8px">
-          <input id="benchTitle" placeholder="Workbench name · optional" />
-          <p style="font-size:11.5px;color:var(--faint);margin:0;line-height:1.55">Isolated worktree + terminal. Work interactively — run <span style="color:var(--brand);font-family:var(--mono)">claude</span> inside, take hours — then decide the merge from the card.</p>
-        </div>
-        <div class="seg" id="modeSeg" role="group" aria-label="agent mode">
-          <button type="button" class="seg-opt" data-real="0">Dry run</button>
-          <button type="button" class="seg-opt" data-real="1">Real agent<span class="seg-hint">spends credits</span></button>
-        </div>
-        <input type="checkbox" id="taskReal" hidden />
-        <div class="row">
+        <div class="sheet-f" id="sheetFooter">
+          <div class="seg" id="modeSeg" role="group" aria-label="agent mode">
+            <button type="button" class="seg-opt" data-real="0">Dry run</button>
+            <button type="button" class="seg-opt" data-real="1">Real agent<span class="seg-hint">spends credits</span></button>
+          </div>
+          <input type="checkbox" id="taskReal" hidden />
           <input id="taskCount" class="narrow" type="number" min="1" max="8" value="1" title="agents — 1 for a job, N to explore variants" />
           <button class="btn" type="submit" id="runFleetBtn"><svg class="ic"><use href="#i-play"/></svg> Run fleet</button>
         </div>
       </form>
     </div>
-    <details class="sect" id="libraryBox">
-      <summary class="sect-label" style="cursor:pointer;list-style:none">Library · design captures ▾</summary>
-      <div id="captures" style="display:flex;flex-direction:column;gap:6px;margin-top:10px"></div>
-      <a id="bmk" class="btn-ghost sm" style="text-decoration:none;text-align:center;display:block;padding:6px;margin-top:6px"
-         title="drag me to your bookmarks bar, then click it on your running app">⌖ coxpit inspect</a>
-      <span style="font-size:11px;color:var(--faint)">Drag to bookmarks. Click it on your app, then click an element.
-      With auth on, append ?k=&lt;pass&gt; to the script URL.</span>
-    </details>
-  </aside>
+  </div>
   <main>
-    <div class="toolbar"><button class="btn-ghost sm" id="selToggle">Select runs</button></div>
+    <div class="toolbar" style="display:flex;align-items:center;gap:12px">
+      <span id="boardHint" style="font-family:var(--mono);font-size:11px;color:var(--faint)"></span>
+      <span style="flex:1"></span>
+      <button class="btn-ghost sm" id="selToggle">Select runs</button></div>
     <div class="grid" id="grid"></div>
     <div class="empty" id="empty">
       <span class="glyph">▚▞▚</span>
@@ -746,7 +890,7 @@ ${ICON_SPRITE}
         <div id="outWrap">
           <div id="outCards"><div class="ocards-empty">loading…</div></div>
           <div id="outDetail">
-            <div class="oback" id="outBack">‹ 산출물 목록</div>
+            <div class="oback" id="outBack">‹ Outputs</div>
             <div class="odetail-c" id="outDetailC"></div>
           </div>
         </div>
@@ -786,10 +930,10 @@ ${ICON_SPRITE}
     <div class="chips" id="roomChips"></div>
     <div class="gbar" id="roomGbar">
       <span class="selc" id="roomSelC">☑ 0 selected</span>
-      <button type="button" class="brand" id="roomIntegrateSel">Integrate 선택 (0)</button>
+      <button type="button" class="brand" id="roomIntegrateSel">Integrate selected (0)</button>
       <span class="sp"></span>
-      <button type="button" id="roomReviewAll">전체 리뷰</button>
-      <button type="button" class="danger" id="roomGroupClose">그룹 클로즈</button>
+      <button type="button" id="roomReviewAll">Review all</button>
+      <button type="button" class="danger" id="roomGroupClose">Close group</button>
     </div>
     <div class="body">
       <div class="runs" id="roomRuns"></div>
@@ -982,6 +1126,9 @@ const runs = new Map();      // runId -> run object
 const tasks = new Map();     // taskId -> task
 const groups = new Map();    // groupId -> {id, kind, title}
 let repos = [], machines = [], captures = [];
+// v5.0 rail — 선택된 repo 로 보드 스코프(client-side). null = All repositories.
+let selectedRepo = null;
+try { const s = localStorage.getItem('coxpit.repo'); selectedRepo = s ? Number(s) : null; } catch {}
 let daemonPort = 8210;    // real config.port — filled from /api/fleet daemon block (recipes interpolate it)
 let remoteAuthOpen = false; // true = no password → Funnel guard on (from /api/fleet daemon.authOpen)
@@ -1255,11 +1402,16 @@ function bandHTML(g, grpRuns){
     + '<button class="gband-fold" data-gfold="'+g.id+'" title="fold">'+(folded?'▸':'▾')+'</button></div>'
     + '<div class="gband-grid">'+cards+'</div></div>';
 }
+// v5.0 — 레일에서 고른 repo 로 run 을 스코프(client-side). selectedRepo=null → 전체.
+function runInScope(r){
+  if (selectedRepo==null) return true;
+  const t = tasks.get(r.taskId);
+  return t ? t.repoId===selectedRepo : false;
+}
 function render(){
   if (boardView==='archive') return;   // 아카이브 뷰는 자체 리스트 — grid 안 건드림
-  const list = [...runs.values()].sort((a,b)=>b.id-a.id);
-  $('empty').style.display = list.length ? 'none' : 'flex';
-  if (!list.length){ paintOnboarding(); $('grid').innerHTML=''; return; }
+  const goalsOnly = boardView==='goals';   // Goals 뷰 = 그룹 밴드만
+  const list = [...runs.values()].filter(runInScope).sort((a,b)=>b.id-a.id);
   // 그룹 파티션 — grouped run 은 밴드로 클러스터, ungrouped 는 뒤에 flat.
   const byGroup = new Map(); const flat = [];
   for (const r of list){
@@ -1268,12 +1420,25 @@ function render(){
     if (gid==null) flat.push(r);
     else { if(!byGroup.has(gid)) byGroup.set(gid, []); byGroup.get(gid).push(r); }
   }
+  const visible = goalsOnly ? byGroup.size : list.length;
+  $('empty').style.display = visible ? 'none' : 'flex';
+  renderRail();   // 레일 카운트 배지·attention 을 라이브로 (paintNavCounts·boardHint 포함)
+  if (!visible){ paintOnboarding(goalsOnly); $('grid').innerHTML=''; return; }
   let html = '';
   for (const gid of [...byGroup.keys()].sort((a,b)=>b-a)) html += bandHTML(groups.get(gid), byGroup.get(gid));
-  html += flat.map(cardHTML).join('');
+  if (!goalsOnly) html += flat.map(cardHTML).join('');
   $('grid').innerHTML = html;
+  paintBoardHint();
   if (termRunId!=null) termTabsRender();   // 터미널 열려있으면 세션 탭도 동기화
 }
+// 보드 상단 힌트: <repo> · <view> · N runs (스코프 반영)
+function paintBoardHint(){
+  const el = $('boardHint'); if(!el) return;
+  const scope = selectedRepo!=null ? (repos.find(r=>r.id===selectedRepo)||{}).name || 'repo' : 'All repositories';
+  const label = boardView==='goals' ? 'Goals' : 'Active';
+  const n = [...runs.values()].filter(runInScope).length;
+  el.textContent = scope + ' · ' + label + ' · ' + n + ' run' + (n===1?'':'s');
+}
 /* ── active / archive view ─────────────────────────────── */
 let boardView = 'active';
@@ -1281,7 +1446,7 @@ let archOffset = 0, archTotal = 0;
 const ARCH_LIMIT = 50;
 function setView(v){
   boardView = v;
-  document.querySelectorAll('#viewSeg .seg-opt').forEach(b=>{
+  document.querySelectorAll('#viewNav .navi').forEach(b=>{
     const on = b.dataset.view===v;
     b.classList.toggle('on', on); b.setAttribute('aria-pressed', on?'true':'false');
   });
@@ -1289,11 +1454,19 @@ function setView(v){
   $('archive').hidden = !archive;
   $('grid').style.display = archive ? 'none' : '';
   $('empty').style.display = archive ? 'none' : ($('grid').innerHTML ? 'none' : 'flex');
-  document.querySelector('.toolbar').style.display = archive ? 'none' : '';
-  if (archive){ paintArchRepos(); archFetch(true); reclaimRefresh(); }
+  document.querySelector('.toolbar').style.display = archive ? 'none' : 'flex';
+  if (archive){ paintArchRepos(); $('archRepo').value = selectedRepo!=null ? String(selectedRepo) : ''; archFetch(true); reclaimRefresh(); }
   else render();
 }
-document.querySelectorAll('#viewSeg .seg-opt').forEach(b=>b.addEventListener('click', ()=>setView(b.dataset.view)));
+document.querySelectorAll('#viewNav .navi').forEach(b=>b.addEventListener('click', ()=>setView(b.dataset.view)));
+// 뷰 nav 카운트 — Active=스코프 run 수, Goals=스코프 그룹 수, Archive=닫힌 태스크 수(hydrate)
+function paintNavCounts(){
+  const scoped = [...runs.values()].filter(runInScope);
+  $('navActiveN').textContent = scoped.length || '';
+  const gset = new Set();
+  for (const r of scoped){ const t = tasks.get(r.taskId); if (t && t.groupId!=null && groups.has(t.groupId)) gset.add(t.groupId); }
+  $('navGoalsN').textContent = gset.size || '';
+}
 function paintArchRepos(){
   const sel = $('archRepo'); const cur = sel.value;
   sel.innerHTML = '<option value="">all repos</option>' + repos.map(r=>'<option value="'+r.id+'">'+esc(r.name)+'</option>').join('');
@@ -1385,7 +1558,15 @@ function chkRow(name, ok, val){
   return '<div class="chk '+cls+'"><span class="st">'+st+'</span><span class="nm">'+esc(name)+'</span>'
     + '<span class="v">'+esc(val||'')+'</span></div>';
 }
-function paintOnboarding(){
+function paintOnboarding(goalsOnly){
+  // 스코프/뷰 필터 때문에 비어 보이는 경우(전체엔 run 이 있음) → 가벼운 안내만.
+  const totalRuns = runs.size;
+  if (totalRuns && (goalsOnly || selectedRepo!=null)){
+    const msg = goalsOnly ? 'No goal groups here' : 'No runs in this repository';
+    $('empty').innerHTML = '<span class="glyph">▚▞▚</span><span>'+esc(msg)+'</span>'
+      + '<span style="color:#3d4657">'+(selectedRepo!=null?'switch to <b>All repositories</b> or hit ＋ New':'plan a Goal with ＋ New')+'</span>';
+    return;
+  }
   const r = readiness;
   const agentBin = r && r.agent ? r.agent.bin : 'claude';
   let checks;
@@ -1454,7 +1635,7 @@ function upsertRun(patch){
 async function hydrate(){
   const r = await fetch('/api/fleet?view=active').then(x=>x.json());
   machines = r.machines||[]; repos = r.repos||[]; captures = r.captures||[];
-  if (r.counts){ const n = r.counts.closedTasks||0; $('archN').textContent = n ? '· '+n : ''; }
+  if (r.counts){ const n = r.counts.closedTasks||0; $('navArchiveN').textContent = n ? String(n) : ''; }
   tasks.clear();
   (r.tasks||[]).forEach(t => tasks.set(t.id, t));
   groups.clear();
@@ -1474,6 +1655,8 @@ async function hydrate(){
   paintSidebar(); render();
 }
 function paintSidebar(){
+  // 스코프 정합 — 사라진 repo 를 물고 있으면 스코프 해제
+  if (selectedRepo!=null && !repos.some(r=>r.id===selectedRepo)){ selectedRepo = null; try{ localStorage.removeItem('coxpit.repo'); }catch{} }
   $('machines').innerHTML = machines.map(m =>
     '<span class="mchip"><span class="mdot '+(m.online?'on':'')+'"></span><b>'+esc(m.slug)+'</b></span>').join('');
   $('repoMachine').innerHTML = machines.map(m=>'<option value="'+esc(m.slug)+'">'+esc(m.slug)+'</option>').join('');
@@ -1481,8 +1664,12 @@ function paintSidebar(){
   $('taskRepo').innerHTML = repos.length
     ? repos.map(r=>'<option value="'+r.id+'">'+esc(r.name)+' · '+esc(r.defaultBranch)+'</option>').join('')
     : '<option value="">register a repo — Browse… ↓</option>';
-  if (prevRepo && repos.some(r=>String(r.id)===prevRepo)) $('taskRepo').value = prevRepo;
+  // 런처 타겟 기본값 = 스코프된 repo(있으면), 아니면 직전 선택 유지
+  if (selectedRepo!=null && repos.some(r=>r.id===selectedRepo)) $('taskRepo').value = String(selectedRepo);
+  else if (prevRepo && repos.some(r=>String(r.id)===prevRepo)) $('taskRepo').value = prevRepo;
   $('runFleetBtn').disabled = !repos.length;
+  $('newBtn').disabled = !repos.length && false; // New 는 항상 열림(repo 등록 UI 포함)
+  renderRail();
   const capSel = $('taskCapture');
   const cur = capSel.value;
   capSel.innerHTML = '<option value="">no design capture</option>' + captures.map(c=>
@@ -1497,34 +1684,104 @@ function paintSidebar(){
   $('bmk').href = "javascript:(function(){var s=document.createElement('script');s.src='"
     + location.origin + "/design/bookmarklet.js';document.body.appendChild(s)})()";
 }
+/* ── v5.0 navigator rail — machine switcher · repo list(counts+attention+scope) · nav counts ── */
+const FAILED_STATES = ['failed','error'];
+function railCounts(){
+  // repoId → { active, attn } — /api/fleet active runs 를 client-side 로 그룹
+  const m = new Map();
+  for (const r of runs.values()){
+    const t = tasks.get(r.taskId); if (!t) continue;
+    const rec = m.get(t.repoId) || { active:0, attn:false };
+    rec.active++;
+    if (FAILED_STATES.includes(r.status)) rec.attn = true;
+    m.set(t.repoId, rec);
+  }
+  return m;
+}
+function renderRail(){
+  // machine switcher — 첫 online 머신(없으면 첫 머신) 을 표시, 선택은 #repoMachine 이 보관
+  const cur = $('repoMachine').value || (machines[0] && machines[0].slug) || 'local';
+  const cm = machines.find(x=>x.slug===cur) || machines[0];
+  $('machineLbl').textContent = cm ? cm.slug : 'local';
+  $('machineDot').classList.toggle('on', !!(cm && cm.online));
+  $('machineMenu').innerHTML = machines.map(m=>
+    '<div class="mopt'+(m.slug===cur?' on':'')+'" data-m="'+escA(m.slug)+'">'
+    + '<span class="mdot2'+(m.online?' on':'')+'"></span>'+esc(m.slug)+'</div>').join('')
+    || '<div class="mopt">no machines</div>';
+  // repo list
+  const cnt = railCounts();
+  let html = '';
+  if (repos.length){
+    html += '<button type="button" class="repo'+(selectedRepo==null?' on':'')+'" data-repo="all">'
+      + ic('layers')+'<span class="nm">All repositories</span></button>';
+    for (const r of repos){
+      const c = cnt.get(r.id) || { active:0, attn:false };
+      const on = selectedRepo===r.id;
+      html += '<button type="button" class="repo'+(on?' on':'')+'" data-repo="'+r.id+'" title="'+escA(r.path||r.name)+'">'
+        + ic('folder')+'<span class="nm">'+esc(r.name)+'</span>'
+        + (c.attn ? '<span class="attn" title="a run needs a hand"></span>' : '')
+        + (c.active>0 ? '<span class="cnt">'+c.active+'</span>' : '')
+        + '<span class="rowmenu">'
+        +   '<button type="button" class="rmbtn" data-rbranch="'+r.id+'" title="base branch">'+ic('branch')+'</button>'
+        +   '<button type="button" class="rmbtn" data-rremove="'+r.id+'" title="remove">'+ic('x')+'</button>'
+        + '</span></button>';
+    }
+  } else {
+    // empty state — 첫 repo 추가 CTA
+    html += '<div style="padding:10px 6px;font-size:12px;color:var(--faint);line-height:1.6">'
+      + 'No repositories yet.<br><b style="color:var(--brand)">Add your first repository</b> to start.</div>';
+  }
+  $('repoList').innerHTML = html;
+  paintNavCounts();
+  paintBoardHint();
+}
+// 스코프 설정 — 레일 repo 클릭
+function setScope(repoId){
+  selectedRepo = repoId;
+  try { if (repoId==null) localStorage.removeItem('coxpit.repo'); else localStorage.setItem('coxpit.repo', String(repoId)); } catch {}
+  if (repoId!=null) $('taskRepo').value = String(repoId), syncSelect('taskRepo');
+  renderRail();
+  if (boardView!=='archive') render();
+  else { paintArchRepos(); $('archRepo').value = repoId!=null ? String(repoId) : ''; syncSelect('archRepo'); archFetch(true); }
+}
+$('repoList').addEventListener('click', (e)=>{
+  const br = e.target.closest('button[data-rbranch]');
+  if (br){ e.stopPropagation(); openBranchFor(Number(br.dataset.rbranch)); return; }
+  const rm = e.target.closest('button[data-rremove]');
+  if (rm){ e.stopPropagation(); removeRepoById(Number(rm.dataset.rremove)); return; }
+  const row = e.target.closest('.repo[data-repo]'); if(!row) return;
+  setScope(row.dataset.repo==='all' ? null : Number(row.dataset.repo));
+});
 $('captures').addEventListener('click', async (e)=>{
   const b = e.target.closest('button[data-delcap]'); if(!b) return;
   await fetch('/api/design/'+b.dataset.delcap,{method:'DELETE'});
   hydrate();
 });
-$('repoRemove').addEventListener('click', async ()=>{
-  const rid = $('taskRepo').value;
+async function removeRepoById(rid){
   if (!rid){ toast('no repository selected', 'error'); return; }
   const yes = await confirmUI('Remove the selected repository from coxpit?',
     { sub: 'The repo itself is untouched — only the registration is removed. Refused while it has open tasks.', danger: true, okLabel: 'Remove' });
   if (!yes) return;
   const res = await fetch('/api/repos/'+rid,{method:'DELETE'});
   const j = await res.json().catch(()=>({}));
-  if (res.ok){ toast('repo removed', 'ok'); hydrate(); }
+  if (res.ok){ if (selectedRepo===Number(rid)) setScope(null); toast('repo removed', 'ok'); hydrate(); }
   else toast('remove: '+(j.detail||res.status), 'error');
-});
+}
+$('repoRemove').addEventListener('click', ()=>removeRepoById($('taskRepo').value));
 /* ── 기본 브랜치 변경 ── */
-$('repoBranch').addEventListener('click', ()=>{
-  const rid = $('taskRepo').value;
+let brRepoId = null;
+function openBranchFor(rid){
   if (!rid){ toast('no repository selected', 'error'); return; }
+  brRepoId = rid;
   const repo = repos.find(r=>String(r.id)===String(rid));
   $('brInput').value = repo ? repo.defaultBranch : '';
   $('brOverlay').classList.add('open'); $('brInput').focus();
-});
+}
+$('repoBranch').addEventListener('click', ()=>openBranchFor($('taskRepo').value));
 $('brCancel').addEventListener('click', ()=>$('brOverlay').classList.remove('open'));
 $('brOverlay').addEventListener('click',(e)=>{ if(e.target===$('brOverlay')) $('brOverlay').classList.remove('open'); });
 async function brSave(){
-  const rid = $('taskRepo').value; const branch = $('brInput').value.trim();
+  const rid = brRepoId; const branch = $('brInput').value.trim();
   if (!rid || !branch) return;
   const res = await fetch('/api/repos/'+rid,{method:'PATCH',headers:{'content-type':'application/json'},body:JSON.stringify({defaultBranch:branch})});
   const j = await res.json().catch(()=>({}));
@@ -1641,21 +1898,21 @@ function paintModal(){
    answer/doc → mdLite · page → sandbox iframe · code → 기존 diff 렌더러 · file → 이미지/다운로드. */
 let outCards = [];                 // 이 run 의 마지막 카드 목록(RunOutputCard[])
 const OUT_ICON = { answer:'message', code:'code', doc:'file', page:'image', file:'image' };
-const OUT_LABEL = { answer:'답변', code:'코드', doc:'문서', page:'페이지', file:'파일' };
+const OUT_LABEL = { answer:'Answer', code:'Code', doc:'Doc', page:'Page', file:'File' };
 function contractHTML(cards){
   const declared = cards.filter(c=>c.required);
   const aux = cards.filter(c=>!c.required && c.present);
   if (!declared.length && !aux.length) return '';   // 계약도 부수도 없으면 스트립 숨김
-  let h = '<span class="clabel">요청 산출물(계약):</span>';
+  let h = '<span class="clabel">Required outputs (contract):</span>';
   if (declared.length){
     h += declared.map(c=>{
       const ok = c.present;
       return '<span class="req '+(ok?'ok':'warn')+'"><span class="rg">'+ic(ok?'check':'alert-triangle')+'</span>'
         + esc(OUT_LABEL[c.type]||c.type)+'</span>';
     }).join('');
-  } else h += '<span class="req aux">없음</span>';
+  } else h += '<span class="req aux">none</span>';
   if (aux.length){
-    h += '<span class="csep">—</span><span class="clabel">부수:</span>'
+    h += '<span class="csep">—</span><span class="clabel">Extra:</span>'
       + aux.map(c=>'<span class="req aux">'+esc(OUT_LABEL[c.type]||c.type)+'</span>').join('');
   }
   return h;
@@ -1663,10 +1920,10 @@ function contractHTML(cards){
 function outCardHTML(c, i){
   const miss = !c.present;
   const badge = c.required
-    ? '<span class="obadge '+(c.present?'req':'warn')+'">요청됨</span>'
-    : '<span class="obadge">부수</span>';
+    ? '<span class="obadge '+(c.present?'req':'warn')+'">Required</span>'
+    : '<span class="obadge">Extra</span>';
   const gname = miss ? 'alert-triangle' : (OUT_ICON[c.type] || 'circle');
-  const meta = miss ? '산출물 미충족 — '+esc(c.meta||'') : esc(c.meta||'');
+  const meta = miss ? 'output not met — '+esc(c.meta||'') : esc(c.meta||'');
   return '<div class="ocard'+(miss?' miss':'')+'" data-oi="'+i+'">'
     + '<span class="og">'+ic(gname)+'</span>'
     + '<span class="ob"><span class="ot">'+esc(c.title||c.type)+'</span>'
@@ -1685,7 +1942,7 @@ function pickDefaultCard(cards){
   if (!hasCode && docish) return cards.indexOf(docish);
   if (hasCode){
     const codeCard = present.find(c=>c.type==='code');
-    // 코드 위주라도 선언된 문서/답변이 있으면 그 계약을 우선(코드는 언제나 카드로 접근 가능)
+    // even when code-heavy, a declared doc/answer wins the contract (code is always reachable via its card)
     const declaredDoc = present.find(c=>c.required && (c.type==='answer'||c.type==='doc'||c.type==='page'));
     if (declaredDoc) return cards.indexOf(declaredDoc);
     return cards.indexOf(codeCard);
@@ -2000,6 +2257,7 @@ async function openCompare(taskId){
   cmpTaskId = taskId;
   cmpDocMode = false; $('cmpDocsTgl').textContent = 'Rendered';
   $('cmpReview').hidden = true; $('cmpReview').innerHTML = '';
+  $('cmpBody').hidden = false; $('cmpAI').textContent = 'AI review'; $('cmpAI').classList.remove('on');
   $('cmpOverlay').classList.add('open');
   $('cmpBody').innerHTML = '<div class="empty" style="flex:1">loading…</div>';
   await paintCompare();
@@ -2090,18 +2348,30 @@ function mdLite(src){
 }
 $('cmpAI').addEventListener('click', async ()=>{
   if (cmpTaskId==null) return;
-  const yes = await confirmUI('Run an AI review of these implementations?',
-    { sub: 'A reviewer agent reads every diff and summarizes each approach, pros/cons, and a recommendation — so you judge instead of reading all the code. Real agent, spends credits (~1–2 min).', okLabel: 'Review' });
-  if (!yes) return;
   const btn = $('cmpAI');
-  btn.disabled = true; btn.textContent = 'Reviewing…';
-  try{
-    const res = await fetch('/api/tasks/'+cmpTaskId+'/review',{method:'POST',
-      headers:{'content-type':'application/json'}, body:JSON.stringify({real:true})});
-    const j = await res.json().catch(()=>({}));
-    if (res.ok){ $('cmpReview').innerHTML = mdLite(j.review||''); $('cmpReview').hidden = false; }
-    else toast('review: '+(j.detail||res.status), 'error');
-  } finally { btn.disabled = false; btn.textContent = 'AI review'; }
+  // 이미 리뷰가 떠 있으면 → diff 로 토글백
+  if (!$('cmpReview').hidden){
+    $('cmpReview').hidden = true; $('cmpBody').hidden = false;
+    btn.classList.remove('on'); btn.textContent = 'AI review';
+    return;
+  }
+  // 아직 안 불러왔으면 확인 후 리뷰 실행(같은 compare 안에선 1회만)
+  if (!$('cmpReview').innerHTML.trim()){
+    const yes = await confirmUI('Run an AI review of these implementations?',
+      { sub: 'A reviewer agent reads every diff and summarizes each approach, pros/cons, and a recommendation — so you judge instead of reading all the code. Real agent, spends credits (~1–2 min).', okLabel: 'Review' });
+    if (!yes) return;
+    btn.disabled = true; btn.textContent = 'Reviewing…';
+    try{
+      const res = await fetch('/api/tasks/'+cmpTaskId+'/review',{method:'POST',
+        headers:{'content-type':'application/json'}, body:JSON.stringify({real:true})});
+      const j = await res.json().catch(()=>({}));
+      if (!res.ok){ toast('review: '+(j.detail||res.status), 'error'); btn.disabled = false; btn.textContent = 'AI review'; return; }
+      $('cmpReview').innerHTML = mdLite(j.review||'');
+    } finally { btn.disabled = false; }
+  }
+  // 리뷰를 풀높이로, diff 컬럼은 숨김
+  $('cmpReview').hidden = false; $('cmpBody').hidden = true;
+  btn.classList.add('on'); btn.textContent = 'Diffs';
 });
 $('mCompare').addEventListener('click', ()=>{
   if (openRunId==null) return;
@@ -2147,15 +2417,15 @@ function roomRunRowHTML(r){
   const meta = (r.agent?esc(r.agent)+' · ':'') + (r.filesChanged? '+'+r.filesChanged+'f' : 'no changes');
   let acts;
   if (merged){
-    acts = '<div class="acts"><button class="b ghost" data-ract="open" data-rrid="'+r.runId+'">열기</button></div>';
+    acts = '<div class="acts"><button class="b ghost" data-ract="open" data-rrid="'+r.runId+'">Open</button></div>';
   } else if (running){
-    acts = '<div class="acts"><button class="b ghost" data-ract="open" data-rrid="'+r.runId+'">열기 · 정착 후 결정</button></div>';
+    acts = '<div class="acts"><button class="b ghost" data-ract="open" data-rrid="'+r.runId+'">Open · decide once settled</button></div>';
   } else {
     acts = '<div class="acts">'
-      + '<button class="b ghost" data-ract="review" data-rrid="'+r.runId+'">리뷰</button>'
-      + '<button class="b" data-ract="fix" data-rrid="'+r.runId+'">수정</button>'
-      + '<button class="b merge" data-ract="merge" data-rrid="'+r.runId+'">머지</button>'
-      + '<button class="b close" data-ract="close" data-rrid="'+r.runId+'">클로즈</button>'
+      + '<button class="b ghost" data-ract="review" data-rrid="'+r.runId+'">Review</button>'
+      + '<button class="b" data-ract="fix" data-rrid="'+r.runId+'">Steer</button>'
+      + '<button class="b merge" data-ract="merge" data-rrid="'+r.runId+'">Merge</button>'
+      + '<button class="b close" data-ract="close" data-rrid="'+r.runId+'">Close</button>'
       + '</div>';
   }
   const badge = merged
@@ -2178,10 +2448,10 @@ function roomRunRowHTML(r){
     + '<div class="run-b" data-rbody="'+r.runId+'">'
     +   '<div class="rout" data-rout="'+r.runId+'"><div class="rout-cards"><div class="ocards-empty">…</div></div></div>'
     +   (roomDone(s) && r.steerable
-        ? '<div class="fix"><input data-rfix="'+r.runId+'" placeholder="수정 지시 — 같은 세션·worktree 이어서…" />'
-          + '<button class="b" data-ract="fixsend" data-rrid="'+r.runId+'">수정 지시 → 세션 이어서</button></div>'
-        : '<div class="review"><span class="rk">·</span><span class="rt">이 run 은 steer 불가('
-          + (running?'아직 실행 중':(roomDone(s)?'세션 없음 — dry/정리됨':'상태 '+esc(s)))+').</span></div>')
+        ? '<div class="fix"><input data-rfix="'+r.runId+'" placeholder="Next instruction — same session &amp; worktree…" />'
+          + '<button class="b" data-ract="fixsend" data-rrid="'+r.runId+'">Steer → continue session</button></div>'
+        : '<div class="review"><span class="rk">·</span><span class="rt">This run can\\'t be steered ('
+          + (running?'still running':(roomDone(s)?'no session — dry/cleaned up':'status '+esc(s)))+').</span></div>')
     + '</div></div>';
 }
 function roomRenderRuns(){
@@ -2198,7 +2468,7 @@ function roomRenderRuns(){
 function roomUpdateGbar(){
   const n = roomSel.size;
   $('roomSelC').textContent = '☑ '+n+' selected';
-  $('roomIntegrateSel').textContent = 'Integrate 선택 ('+n+')';
+  $('roomIntegrateSel').textContent = 'Integrate selected ('+n+')';
   $('roomIntegrateSel').disabled = n===0;
 }
 /* 펼친 행의 출력 카드 로드 — 모달과 같은 /outputs + renderOutCardInto 재사용(중복 없음). */
@@ -2223,7 +2493,7 @@ function roomOpenCard(rid, i){
   let det = wrap.querySelector('.rout-detail');
   if (!det){
     det = document.createElement('div'); det.className='rout-detail';
-    det.innerHTML = '<div class="rout-back">‹ 산출물 목록</div><div class="rout-body"></div>';
+    det.innerHTML = '<div class="rout-back">‹ Outputs</div><div class="rout-body"></div>';
     wrap.appendChild(det);
   }
   det.style.display='';
@@ -2369,7 +2639,7 @@ async function roomRunAction(act, rid){
   if (act==='fix'){ // 펼치고 steer 입력에 포커스
     if (!roomOpen.has(rid)){ roomOpen.add(rid); const row=document.querySelector('.run[data-rrun="'+rid+'"]'); if(row){ row.classList.add('open'); roomLoadRunOutputs(rid); } }
     const inp = document.querySelector('[data-rfix="'+rid+'"]'); if (inp) inp.focus();
-    else toast('r'+rid+': steer 불가(정착·세션 필요)', 'error');
+    else toast('r'+rid+': can\\'t steer (needs a settled run with a session)', 'error');
     return;
   }
   if (act==='fixsend'){
@@ -2377,7 +2647,7 @@ async function roomRunAction(act, rid){
     if (!msg){ if(inp) inp.focus(); return; }
     const res = await fetch('/api/runs/'+rid+'/steer',{method:'POST',
       headers:{'content-type':'application/json'}, body:JSON.stringify({message:msg, mode:'work'})});
-    if (res.ok){ if(inp) inp.value=''; toast('r'+rid+': 수정 지시 — 같은 세션 이어서', 'ok'); }
+    if (res.ok){ if(inp) inp.value=''; toast('r'+rid+': steered — continuing the same session', 'ok'); }
     else { const j = await res.json().catch(()=>({})); toast('steer: '+(j.detail||res.status), 'error'); }
     return;
   }
@@ -2424,21 +2694,21 @@ async function reviewOneRun(r){
   let rv = body.querySelector('.review.airev');
   if (!rv){ rv = document.createElement('div'); rv.className='review airev'; body.insertBefore(rv, body.querySelector('.fix')||null); }
   const real = $('taskReal').checked;
-  rv.innerHTML = '<span class="rk">'+ic('message')+' 리뷰</span><span class="rt">reviewing… ('+(real?'real':'dry')+')</span>';
+  rv.innerHTML = '<span class="rk">'+ic('message')+' Review</span><span class="rt">reviewing… ('+(real?'real':'dry')+')</span>';
   try{
     const res = await fetch('/api/tasks/'+r.taskId+'/review',{method:'POST',
       headers:{'content-type':'application/json'}, body:JSON.stringify({real})});
     const j = await res.json().catch(()=>({}));
-    if (res.ok){ rv.innerHTML = '<span class="rk">'+ic('message')+' 리뷰</span><span class="rt">'+mdLite(j.review||'(no summary)')+'</span>'; }
-    else { rv.innerHTML = '<span class="rk">'+ic('message')+' 리뷰</span><span class="rt">review 실패 — '+esc(j.detail||String(res.status))+'</span>'; toast('review: '+(j.detail||res.status), 'error'); }
-  }catch{ rv.innerHTML = '<span class="rk">'+ic('message')+' 리뷰</span><span class="rt">review 요청 실패</span>'; }
+    if (res.ok){ rv.innerHTML = '<span class="rk">'+ic('message')+' Review</span><span class="rt">'+mdLite(j.review||'(no summary)')+'</span>'; }
+    else { rv.innerHTML = '<span class="rk">'+ic('message')+' Review</span><span class="rt">review failed — '+esc(j.detail||String(res.status))+'</span>'; toast('review: '+(j.detail||res.status), 'error'); }
+  }catch{ rv.innerHTML = '<span class="rk">'+ic('message')+' Review</span><span class="rt">review request failed</span>'; }
 }
 /* steer 입력 Enter → 전송 */
 $('roomRuns').addEventListener('keydown', (e)=>{
   const inp = e.target.closest ? e.target.closest('[data-rfix]') : null;
   if (inp && e.key==='Enter'){ e.preventDefault(); roomRunAction('fixsend', Number(inp.dataset.rfix)); }
 });
-/* ── 그룹 액션 바 — Integrate 선택 · 전체 리뷰 · 그룹 클로즈(전부 기존 흐름 재사용) ── */
+/* ── group action bar — Integrate selected · Review all · Close group (all reuse existing flows) ── */
 $('roomIntegrateSel').addEventListener('click', async ()=>{
   if (!roomSel.size){ toast('select settled runs with changes first', 'error'); return; }
   // 기존 select mode + selbar + /api/integrate 재사용 — 방을 닫고 선택을 밴드 select 로 옮긴다.
@@ -2467,7 +2737,7 @@ $('roomReviewAll').addEventListener('click', async ()=>{
 $('roomGroupClose').addEventListener('click', async ()=>{
   if (roomGroupId==null) return;
   const g = roomGroupId;
-  await closeGroup(g);       // 기존 그룹 클로즈(guard·atRisk 집계 재사용)
+  await closeGroup(g);       // reuse existing group close (guard · atRisk tally)
   if (roomGroupId===g) await roomLoad();
 });
 /* ＋ New attempt — 같은 그룹에 새 시도 발사 (현재 dry/real 토글 반영) */
@@ -2699,23 +2969,37 @@ $('mTerm').addEventListener('click', ()=>{
 });
 /* ── forms ── */
-/* ── 런처 탭 — 하나의 시작점: Task | Goal | Workbench ── */
+/* ── New sheet type seg — Task | Goal | Workbench (body + footer adapt, mock's setV) ── */
 let lTab = 'task';
-const L_LABEL = { task: 'Run fleet', goal: 'Plan & fan out', bench: 'Open workbench' };
+const L_LABEL = { task: 'Run fleet', goal: 'Plan & run', bench: 'Open workbench' };
+const L_ICON  = { task: 'play',      goal: 'target',     bench: 'terminal' };
+function setV(tab){
+  lTab = tab;
+  document.querySelectorAll('#launchTabs .seg-opt').forEach(x=>x.classList.toggle('on', x.dataset.tab===tab));
+  $('panelTask').style.display = tab==='task' ? 'flex' : 'none';
+  $('panelGoal').hidden = tab!=='goal';
+  $('panelGoal').style.display = tab==='goal' ? 'flex' : 'none';
+  $('panelBench').hidden = tab!=='bench';
+  $('panelBench').style.display = tab==='bench' ? 'flex' : 'none';
+  // footer adapts: Task=Dry/Real·count·Run fleet · Goal=Dry/Real·Plan & run · Workbench=Open workbench only
+  $('modeSeg').style.display  = tab==='bench' ? 'none' : 'flex';  // workbench 는 에이전트 없음
+  $('taskCount').style.display = tab==='task' ? '' : 'none';      // count 는 Task 만(플래너·워크벤치는 1)
+  $('runFleetBtn').innerHTML = ic(L_ICON[tab]) + ' ' + L_LABEL[tab];
+}
 document.querySelectorAll('#launchTabs .seg-opt').forEach(b=>{
-  b.addEventListener('click', ()=>{
-    lTab = b.dataset.tab;
-    document.querySelectorAll('#launchTabs .seg-opt').forEach(x=>x.classList.toggle('on', x===b));
-    $('panelTask').style.display = lTab==='task' ? 'flex' : 'none';
-    $('panelGoal').hidden = lTab!=='goal';
-    $('panelGoal').style.display = lTab==='goal' ? 'flex' : 'none';
-    $('panelBench').hidden = lTab!=='bench';
-    $('panelBench').style.display = lTab==='bench' ? 'flex' : 'none';
-    $('modeSeg').style.display = lTab==='bench' ? 'none' : 'flex';   // workbench 는 에이전트 없음
-    $('taskCount').style.display = lTab==='task' ? '' : 'none';
-    $('runFleetBtn').textContent = L_LABEL[lTab];
-  });
+  b.addEventListener('click', ()=>setV(b.dataset.tab));
+});
+/* ── progressive Options reveal (rarely-used Task fields; expanded state remembered per session) ── */
+function setTaskOpt(open){
+  $('taskOptToggle').setAttribute('aria-expanded', open ? 'true' : 'false');
+  $('taskOptBody').hidden = !open;
+  try{ sessionStorage.setItem('coxpit.taskOpt', open ? '1' : '0'); }catch{}
+}
+$('taskOptToggle').addEventListener('click', ()=>{
+  setTaskOpt($('taskOptToggle').getAttribute('aria-expanded') !== 'true');
 });
+setTaskOpt((()=>{ try{ return sessionStorage.getItem('coxpit.taskOpt')==='1'; }catch{ return false; } })());
 async function submitGoal(){
   const repoId = Number($('taskRepo').value);
@@ -2729,7 +3013,7 @@ async function submitGoal(){
     const res = await fetch('/api/plan',{method:'POST',headers:{'content-type':'application/json'},
       body:JSON.stringify({repoId, goal, real})});
     const j = await res.json().catch(()=>({}));
-    if (res.ok){ toast(j.tasks.length+' task(s) planned & launched', 'ok'); $('planGoal').value=''; hydrate(); }
+    if (res.ok){ toast(j.tasks.length+' task(s) planned & launched', 'ok'); $('planGoal').value=''; closeLaunch(); hydrate(); }
     else toast('plan: '+(j.detail||j.error||res.status), 'error');
   } finally { btn.disabled = false; btn.textContent = L_LABEL[lTab]; }
 }
@@ -2743,6 +3027,7 @@ async function submitBench(){
   if (!res.ok){ toast('workbench: '+(j.detail||j.error||res.status), 'error'); return; }
   toast('workbench open — terminal attached', 'ok');
   $('benchTitle').value='';
+  closeLaunch();
   await hydrate();
   openTerm(j.runId);   // 바로 터미널로
 }
@@ -2782,6 +3067,7 @@ $('taskForm').addEventListener('submit', async (e)=>{
     body:JSON.stringify({count:Number($('taskCount').value)||1, real: $('taskReal').checked, agent: selAgent, model})});
   if (model) rememberModel(model);
   $('taskTitle').value=''; $('taskPrompt').value=''; clearOutputs();
+  closeLaunch();
 });
 /* ── deliverable 계약 칩 — 선택된 타입 배열을 tasks.outputs 로 보낸다(기본=빈=오늘의 동작) ── */
 const OUTPUT_ORDER = ['answer','code','doc','page','file'];
@@ -2830,7 +3116,7 @@ setMode(savedMode === '1', false);
 /* ── provider segmented control — Task 탭 전용(Goal 플래너·Workbench 는 무관) ── */
 let selAgent = 'claude-code';
-const provOpts = Array.from(document.querySelectorAll('#provSeg .seg-opt'));
+const provOpts = Array.from(document.querySelectorAll('#provSeg .seg-opt, #provSegGoal .seg-opt'));
 function setProvider(id, persist){
   selAgent = id;
   for (const b of provOpts){
@@ -3069,6 +3355,43 @@ function setDrawer(on){ asideEl.classList.toggle('open', on); $('scrim').classLi
 $('menuBtn').addEventListener('click', ()=>setDrawer(!asideEl.classList.contains('open')));
 $('scrim').addEventListener('click', ()=>setDrawer(false));
+/* ── v5.0 rail interactions — machine switcher · New sheet · Add repository ── */
+function openLaunch(tab){
+  const r = repos.find(x=>x.id===selectedRepo);
+  $('sheetRepoLbl').textContent = r ? ('· '+r.name) : (repos.length ? '· all repositories' : '· register a repo first');
+  setV(tab || 'task');   // ＋ New 는 Task 로 열림; 타입 seg 가 안에서 전환
+  $('newSheet').classList.add('open');
+  setDrawer(false);
+}
+function closeLaunch(){ $('newSheet').classList.remove('open'); $('repoActions').hidden = true; $('repoForm').hidden = true; }
+$('newBtn').addEventListener('click', ()=>openLaunch('task'));
+$('fab').addEventListener('click', ()=>openLaunch('task'));   // mobile pocket-board FAB → same sheet
+$('sheetClose').addEventListener('click', closeLaunch);
+$('newSheet').addEventListener('click', (e)=>{ if(e.target===$('newSheet')) closeLaunch(); });
+// Add repository — 시트를 열고 repo 피커(Browse/New-folder/Path 내장)를 노출
+$('repoAdd').addEventListener('click', ()=>{ openLaunch('task'); $('repoActions').hidden = false; $('repoBrowse').click(); });
+// machine switcher — 컴팩트 버튼 + 메뉴(기존 #repoMachine 이 선택 상태 보관)
+function positionMachineMenu(){
+  const b = $('machineSwitch').getBoundingClientRect();
+  const mm = $('machineMenu');
+  mm.style.left = b.left + 'px';
+  mm.style.top = (b.bottom + 4) + 'px';
+}
+$('machineSwitch').addEventListener('click', (e)=>{
+  e.stopPropagation();
+  const mm = $('machineMenu');
+  const was = mm.classList.contains('open');
+  closeDropdowns(); mm.classList.remove('open');
+  if (!was){ positionMachineMenu(); mm.classList.add('open'); }
+});
+$('machineMenu').addEventListener('click', (e)=>{
+  const o = e.target.closest('.mopt[data-m]'); if(!o) return;
+  $('repoMachine').value = o.dataset.m; syncSelect('repoMachine');
+  $('machineMenu').classList.remove('open');
+  renderRail();
+});
+document.addEventListener('click', ()=>$('machineMenu').classList.remove('open'));
 /* 딥링크 — /?run=N 이면 하이드레이션 후 그 run 모달을 연다 (웹훅 링크·알림용) */
 function openFromURL(){
   const q = new URLSearchParams(location.search).get('run');

package/src/icons.ts CHANGED Viewed

@@ -31,6 +31,10 @@ export const ICON_SPRITE = `<svg style="position:absolute;width:0;height:0" aria
   <symbol id="i-bell-off" viewBox="0 0 24 24"><path d="M10.268 21a2 2 0 0 0 3.464 0"/><path d="M17 17H4a1 1 0 0 1-.74-1.673C4.59 13.956 6 12.499 6 8a6 6 0 0 1 .258-1.742"/><path d="m2 2 20 20"/><path d="M8.668 3.01A6 6 0 0 1 18 8c0 2.687.77 4.653 1.707 6.05"/></symbol>
   <symbol id="i-download" viewBox="0 0 24 24"><path d="M12 15V3"/><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><path d="m7 10 5 5 5-5"/></symbol>
   <symbol id="i-circle" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"/></symbol>
+  <symbol id="i-server" viewBox="0 0 24 24"><rect width="20" height="8" x="2" y="2" rx="2"/><rect width="20" height="8" x="2" y="14" rx="2"/><path d="M6 6h.01"/><path d="M6 18h.01"/></symbol>
+  <symbol id="i-layers" viewBox="0 0 24 24"><path d="M12.83 2.18a2 2 0 0 0-1.66 0L2.6 6.08a1 1 0 0 0 0 1.83l8.58 3.91a2 2 0 0 0 1.66 0l8.58-3.9a1 1 0 0 0 0-1.83Z"/><path d="m22 17.65-9.17 4.16a2 2 0 0 1-1.66 0L2 17.65"/><path d="m22 12.65-9.17 4.16a2 2 0 0 1-1.66 0L2 12.65"/></symbol>
+  <symbol id="i-target" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"/><circle cx="12" cy="12" r="6"/><circle cx="12" cy="12" r="2"/></symbol>
+  <symbol id="i-archive" viewBox="0 0 24 24"><rect width="20" height="5" x="2" y="3" rx="1"/><path d="M4 8v11a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8"/><path d="M10 12h4"/></symbol>
 </svg>`;
 /** .ic 아이콘 스타일(1em·currentColor 상속·stroke). board/login 공통. */

package/src/login.ts CHANGED Viewed

@@ -1,11 +1,25 @@
 // 브랜디드 접근키 언락/셋업 페이지(단일 자가완결 HTML — 빌드 0, 보드 토큰 매치).
-// 브라우저 basic-auth 팝업을 대체한다. fetch 로 A2/A3 엔드포인트 POST → 성공 시 보드로 reload.
+// 브라우저 basic-auth 팝업을 대체한다.
+// ── Safari 쿠키 레이스 수정(v5.0) ──
+// 폼은 real navigation POST(urlencoded, hidden nav=1)로 /api/auth/{unlock,setup} 에 제출한다.
+// 서버는 성공 시 303 → GET /(브라우저가 그 응답의 Set-Cookie 를 커밋한 뒤 이동)로 답하므로,
+// fetch-then-location.replace 가 겪던 "쿠키 미커밋 → 다시 로그인" 레이스가 사라진다.
+// 실패는 서버가 이 페이지를 error 와 함께 다시 렌더한다(JS 없이도 동작). JSON API 는 그대로 유지.
 // setup=true → 첫 실행(키 설정, confirm 필드+토큰 힌트), false → 언락(키 1개).
 import { ICON_SPRITE, ICON_CSS } from './icons.js';
-/** login/setup 페이지 HTML. setup 이면 셋업(키+확인), 아니면 언락. */
-export function loginPageHTML(setup: boolean): string {
+/** HTML 속성 값 이스케이프(서버 렌더 에러 문자열 안전 주입용). */
+function escA(s: string): string {
+  return s.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;');
+}
+export interface LoginOpts { error?: string }
+/** login/setup 페이지 HTML. setup 이면 셋업(키+확인), 아니면 언락. opts.error 는 서버가 재렌더 시 주입. */
+export function loginPageHTML(setup: boolean, opts: LoginOpts = {}): string {
   const title = setup ? 'set an access key' : 'unlock';
+  const initialErr = opts.error ? escA(opts.error) : '';
+  const action = setup ? '/api/auth/setup' : '/api/auth/unlock';
   return /* html */ `<!doctype html>
 <html lang="en">
 <head>
@@ -25,8 +39,11 @@ export function loginPageHTML(setup: boolean): string {
   *{box-sizing:border-box}
   [hidden]{display:none !important}
   html,body{height:100%}
+  html{overscroll-behavior:none}
   body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:14px;line-height:1.5;
-    -webkit-font-smoothing:antialiased;display:flex;align-items:center;justify-content:center;padding:24px}
+    -webkit-font-smoothing:antialiased;display:flex;align-items:center;justify-content:center;
+    padding:24px;padding:max(24px,env(safe-area-inset-top)) max(24px,env(safe-area-inset-right)) max(24px,env(safe-area-inset-bottom)) max(24px,env(safe-area-inset-left));
+    overflow-x:hidden}
   ::selection{background:var(--brand-dim)}
   .card{width:100%;max-width:380px;background:var(--surface);border:1px solid var(--line);
     border-radius:var(--r-card);box-shadow:var(--shadow);padding:26px 24px 22px}
@@ -38,7 +55,7 @@ export function loginPageHTML(setup: boolean): string {
   .flabel{display:block;font-family:var(--mono);font-size:10px;text-transform:uppercase;letter-spacing:.12em;
     color:var(--faint);margin:0 0 6px}
   input[type=password]{width:100%;background:#0e1118;border:1px solid var(--line);border-radius:var(--r-ctl);
-    color:var(--ink);font-family:var(--mono);font-size:14px;padding:10px 12px;outline:none}
+    color:var(--ink);font-family:var(--mono);font-size:16px;padding:10px 12px;outline:none}
   input[type=password]:focus{border-color:var(--brand)}
   input::placeholder{color:var(--faint)}
   .fld{margin-bottom:14px}
@@ -62,7 +79,8 @@ export function loginPageHTML(setup: boolean): string {
 </head>
 <body>
 ${ICON_SPRITE}
-  <form class="card" id="f" autocomplete="off">
+  <form class="card" id="f" method="post" action="${action}" autocomplete="off">
+    <input type="hidden" name="nav" value="1">
     <div class="mark"><svg class="ic"><use href="#i-lock"/></svg><span>coxpit</span></div>
     <h1>${setup ? 'Protect this coxpit' : 'Unlock this coxpit'}</h1>
     <p class="sub">${setup
@@ -71,14 +89,18 @@ ${ICON_SPRITE}
     ${setup ? `<div class="hint">To prove you own this machine, this first-time setup needs the one-time
       <code>setup token</code> printed in the daemon log &mdash; unless you&#39;re on
       <code>http://127.0.0.1</code> directly. Paste it below if asked.</div>` : ''}
-    <div class="err" id="err"></div>
+    <div class="err" id="err">${initialErr}</div>
     ${setup ? `<div class="fld"><label class="flabel" for="tok">setup token (from the daemon log)</label>
-      <input id="tok" type="password" placeholder="paste if not on localhost" autocomplete="off"></div>` : ''}
+      <input id="tok" name="token" type="password" placeholder="paste if not on localhost" autocomplete="off"
+        autocapitalize="none" autocorrect="off" spellcheck="false"></div>` : ''}
     <div class="fld"><label class="flabel" for="key">access key</label>
-      <input id="key" type="password" placeholder="&#8226;&#8226;&#8226;&#8226;&#8226;&#8226;&#8226;&#8226;" autocomplete="${setup ? 'new-password' : 'current-password'}" autofocus></div>
+      <input id="key" name="key" type="password" placeholder="&#8226;&#8226;&#8226;&#8226;&#8226;&#8226;&#8226;&#8226;"
+        autocomplete="${setup ? 'new-password' : 'current-password'}"
+        autocapitalize="none" autocorrect="off" spellcheck="false" autofocus></div>
     ${setup ? `<div class="fld"><label class="flabel" for="key2">confirm access key</label>
-      <input id="key2" type="password" placeholder="&#8226;&#8226;&#8226;&#8226;&#8226;&#8226;&#8226;&#8226;" autocomplete="new-password"></div>` : ''}
-    <label class="row"><input id="rem" type="checkbox"${setup ? ' checked' : ''}><span>Remember this device</span></label>
+      <input id="key2" type="password" placeholder="&#8226;&#8226;&#8226;&#8226;&#8226;&#8226;&#8226;&#8226;"
+        autocomplete="new-password" autocapitalize="none" autocorrect="off" spellcheck="false"></div>` : ''}
+    <label class="row"><input id="rem" name="remember" type="checkbox" value="on"${setup ? ' checked' : ''}><span>Remember this device</span></label>
     <button class="btn" id="go" type="submit"><svg class="ic"><use href="#i-${setup ? 'lock' : 'unlock'}"/></svg><span>${setup ? 'Set key &amp; enter' : 'Unlock'}</span></button>
     <div class="ft"><a href="https://github.com/hanmariyang/coxpit-oss#remote-access" target="_blank" rel="noopener">Fronting with Cloudflare Access / Tailscale? &rarr;</a></div>
   </form>
@@ -89,33 +111,18 @@ ${ICON_SPRITE}
   var err = document.getElementById('err');
   var go = document.getElementById('go');
   function show(m){ err.textContent = m || ''; }
+  // 폼은 native navigation POST 로 제출된다(Safari 가 응답의 Set-Cookie 를 커밋 → 303 GET /).
+  // 여기서는 클라이언트 사전검증만: 비면 막고, setup 이면 confirm/길이 확인. 통과 시 native 제출 진행.
   f.addEventListener('submit', function(ev){
-    ev.preventDefault();
-    show('');
     var key = document.getElementById('key').value;
-    var rem = document.getElementById('rem').checked;
-    if (!key){ show('access key required'); return; }
-    var body, url;
+    if (!key){ ev.preventDefault(); show('access key required'); return; }
     if (SETUP){
       var key2 = document.getElementById('key2').value;
-      if (key !== key2){ show('keys do not match'); return; }
-      if (key.length < 6){ show('use at least 6 characters'); return; }
-      url = '/api/auth/setup';
-      body = { key: key, token: document.getElementById('tok').value, remember: rem };
-    } else {
-      url = '/api/auth/unlock';
-      body = { key: key, remember: rem };
+      if (key !== key2){ ev.preventDefault(); show('keys do not match'); return; }
+      if (key.length < 6){ ev.preventDefault(); show('use at least 6 characters'); return; }
     }
-    go.disabled = true;
-    fetch(url, { method:'POST', headers:{'content-type':'application/json'}, body: JSON.stringify(body) })
-      .then(function(r){ return r.json().then(function(j){ return { s:r.status, j:j }; }); })
-      .then(function(res){
-        if (res.s >= 200 && res.s < 300 && res.j && res.j.ok){ location.replace('/'); return; }
-        go.disabled = false;
-        var m = (res.j && (res.j.detail || res.j.error)) || ('error ' + res.s);
-        show(m);
-      })
-      .catch(function(){ go.disabled = false; show('network error'); });
+    show('');
+    go.disabled = true;           // 네비게이션 진행 중 중복 제출 방지(네이티브 제출은 계속)
   });
 })();
 </script>

package/src/server.ts CHANGED Viewed

@@ -8,6 +8,7 @@ import Fastify, { type FastifyInstance, type FastifyReply } from 'fastify';
 import websocket from '@fastify/websocket';
 import { eq, inArray, and, like, desc } from 'drizzle-orm';
 import { authGate } from './auth';
+import { loginPageHTML } from './login';
 import {
   authMode, authIsOpen, verifyKey, storeKey, signSession, SESSION_COOKIE,
   clientKey, rateCheck, rateFail, rateReset, setupAllowed,
@@ -179,6 +180,20 @@ function sharePageHTML(
 export async function buildServer(): Promise<FastifyInstance> {
   const app = Fastify({ logger: true });
   await app.register(websocket);
+  // urlencoded 본문 파서(deps 0) — login/setup 폼이 real navigation POST 를 보내면
+  // 브라우저가 그 응답의 Set-Cookie 를 확정 커밋한다(Safari fetch-then-replace 레이스 회피).
+  app.addContentTypeParser(
+    'application/x-www-form-urlencoded',
+    { parseAs: 'string' },
+    (_req, body, done) => {
+      try {
+        const out: Record<string, string> = {};
+        const p = new URLSearchParams(body as string);
+        for (const [k, v] of p.entries()) out[k] = v;
+        done(null, out);
+      } catch (e) { done(e as Error, undefined); }
+    },
+  );
   app.addHook('onRequest', authGate);
   // 무인증 헬스(외부 감시용)
@@ -210,45 +225,71 @@ export async function buildServer(): Promise<FastifyInstance> {
   };
   const socketIp = (req: { socket?: { remoteAddress?: string } }): string =>
     String(req.socket?.remoteAddress ?? '');
+  // real form navigation POST(urlencoded + nav flag) 인가 — 그러면 JSON 대신 303/HTML 로 답한다.
+  // 이 경로는 브라우저가 응답의 Set-Cookie 를 커밋한 뒤 GET / 로 이동하므로 Safari 쿠키 레이스가 없다.
+  const isFormNav = (req: { body?: unknown; headers: Record<string, unknown> }): boolean => {
+    const ct = String(req.headers['content-type'] ?? '');
+    const b = (req.body ?? {}) as { nav?: unknown };
+    return ct.includes('application/x-www-form-urlencoded') || b.nav != null;
+  };
+  const truthy = (v: unknown): boolean =>
+    v === true || v === 'true' || v === 'on' || v === '1' || v === 1;
   // 첫 실행 셋업(anti-claim) — 셋업 토큰 일치 OR 진짜 로컬(loopback+no-fwd)만 허용.
   // 키가 이미 있으면 409(단발). 성공 시 해시 저장 + 세션 쿠키.
   app.post('/api/auth/setup', async (req, reply) => {
-    if (authMode().mode !== 'setup') return reply.code(409).send({ error: 'already configured' });
-    const b = (req.body ?? {}) as { key?: string; token?: string; remember?: boolean };
+    const nav = isFormNav(req);
+    // form-nav 실패는 로그인 페이지를 에러와 함께 다시 렌더(JSON 자동화는 아래처럼 JSON 유지).
+    const fail = (code: number, detail: string): FastifyReply => {
+      if (nav) return reply.type('text/html').code(code).send(loginPageHTML(true, { error: detail }));
+      return reply.code(code).send({ error: 'setup', detail });
+    };
+    if (authMode().mode !== 'setup') return fail(409, 'already configured');
+    const b = (req.body ?? {}) as { key?: string; token?: string; remember?: unknown };
     const key = String(b.key ?? '');
-    if (key.length < 6) return reply.code(400).send({ error: 'key too short', detail: 'use at least 6 characters' });
+    if (key.length < 6) return fail(400, 'use at least 6 characters');
     const gate = setupAllowed(req.headers as Record<string, unknown>, socketIp(req), String(b.token ?? ''));
     if (!gate.ok) {
-      return reply.code(403).send({ error: 'setup not allowed', detail: 'paste the one-time setup token from the daemon log (this request is not local)' });
+      return fail(403, 'paste the one-time setup token from the daemon log (this request is not local)');
     }
     storeKey(key); // 평문 키는 절대 로그하지 않음
-    setSessionCookie(reply, req, b.remember === true);
+    setSessionCookie(reply, req, truthy(b.remember));
+    // form-nav → 303 redirect to /(브라우저가 Set-Cookie 커밋 후 이동). JSON → 201.
+    if (nav) return reply.code(303).header('location', '/').send();
     return reply.code(201).send({ ok: true });
   });
   // 언락 — 상수시간 검증 + per-client 레이트리밋(백오프). 성공 시 세션 쿠키.
   app.post('/api/auth/unlock', async (req, reply) => {
+    const nav = isFormNav(req);
+    const fail = (code: number, detail: string): FastifyReply => {
+      if (nav) return reply.type('text/html').code(code).send(loginPageHTML(false, { error: detail }));
+      return reply.code(code).send({ error: 'unlock', detail });
+    };
     const m = authMode();
-    if (m.mode === 'disabled') return reply.send({ ok: true });
-    if (m.mode === 'setup') return reply.code(409).send({ error: 'not configured', detail: 'set an access key first' });
+    if (m.mode === 'disabled') {
+      if (nav) return reply.code(303).header('location', '/').send();
+      return reply.send({ ok: true });
+    }
+    if (m.mode === 'setup') return fail(409, 'set an access key first');
     const id = clientKey(req.headers as Record<string, unknown>, socketIp(req));
     const rc = rateCheck(id);
     if (rc.blocked) {
       const secs = Math.ceil(rc.retryMs / 1000);
-      return reply.code(429).send({ error: 'too many attempts', detail: `try again in ${secs}s` });
+      return fail(429, `too many attempts — try again in ${secs}s`);
     }
-    const b = (req.body ?? {}) as { key?: string; remember?: boolean };
+    const b = (req.body ?? {}) as { key?: string; remember?: unknown };
     if (verifyKey(String(b.key ?? ''), m)) {
       rateReset(id);
-      setSessionCookie(reply, req, b.remember === true);
+      setSessionCookie(reply, req, truthy(b.remember));
+      if (nav) return reply.code(303).header('location', '/').send();
       return reply.send({ ok: true });
     }
     const after = rateFail(id);
     const detail = after.retryMs > 0
       ? `wrong key — try again in ${Math.ceil(after.retryMs / 1000)}s`
       : `wrong key — ${after.attemptsLeft} attempt(s) left`;
-    return reply.code(401).send({ error: 'wrong key', detail });
+    return fail(401, detail);
   });
   // 로그아웃 — 쿠키 제거(Max-Age=0).