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

coxpit 4.7.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 (11) hide show

package/src/board.ts CHANGED Viewed

@@ -1,5 +1,7 @@
 // 데몬이 서빙하는 단일 페이지 플릿 콘솔(빌드 스텝 0, 자가완결).
 // /api/fleet 로 하이드레이트 → /ws 구독 델타 → run 상세(타임라인·diff·터미널)·비교/머지.
+import { ICON_SPRITE, ICON_CSS, ICON_JS_HELPER } from './icons.js';
 export const BOARD_HTML = /* html */ `<!doctype html>
 <html lang="en">
 <head>
@@ -21,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)}
@@ -80,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}
@@ -400,7 +494,7 @@ export const BOARD_HTML = /* html */ `<!doctype html>
   .rmt-tbl th{color:var(--faint);font-family:var(--mono);font-size:10px;text-transform:uppercase;letter-spacing:.1em}
   .rmt-tbl code{font-family:var(--mono);font-size:10.5px;color:var(--brand);white-space:nowrap}
   .rmt-tbl .star{color:var(--brand)}
-  /* header 🔗 affordance shares the ghost-button look */
+  /* header remote-access affordance shares the ghost-button look */
   /* ── toasts ─────────────────────────────── */
   .toasts{position:fixed;top:66px;right:18px;z-index:60;display:flex;flex-direction:column;gap:8px;
@@ -476,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}
@@ -505,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}
@@ -529,6 +623,7 @@ export const BOARD_HTML = /* html */ `<!doctype html>
   .ocard.miss{opacity:.72;border-style:dashed;cursor:default}
   .ocard.miss:hover{transform:none;border-color:var(--line)}
   .ocard .og{font-size:15px;line-height:1;flex:0 0 auto;width:20px;text-align:center;color:var(--muted)}
+  .ocard.miss .og{color:var(--s-preparing)}
   .ocard .ob{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
   .ocard .ot{font-family:var(--sans);font-size:12.5px;color:var(--ink);font-weight:600;
     white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@@ -577,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}
@@ -603,37 +701,88 @@ export const BOARD_HTML = /* html */ `<!doctype html>
     .cmp-col{min-width:0;border-right:none;border-bottom:1px solid var(--line);flex:0 0 auto;max-height:72vh}
   }
   @media (prefers-reduced-motion:reduce){aside{transition:none}}
+  ${ICON_CSS}
 </style>
 </head>
 <body>
+${ICON_SPRITE}
 <header>
   <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">🔕</button>
-  <button class="btn-ghost sm" id="remoteBtn" title="reach this daemon from elsewhere (Tailscale · recipes)">🔗</button>
+  <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>
-        <button type="button" class="btn-ghost sm" id="repoBranch" style="flex:0 0 auto" title="change the base branch — merges, Sync base and PRs all target it">⎇</button>
-        <button type="button" class="btn-ghost sm" id="repoRemove" style="flex:0 0 auto" title="remove selected repository from coxpit">×</button>
+        <button type="button" class="btn-ghost sm" id="repoBranch" style="flex:0 0 auto" title="change the base branch — merges, Sync base and PRs all target it"><svg class="ic"><use href="#i-branch"/></svg></button>
+        <button type="button" class="btn-ghost sm" id="repoRemove" style="flex:0 0 auto" title="remove selected repository from coxpit"><svg class="ic"><use href="#i-x"/></svg></button>
       </div>
       <form id="repoForm" hidden>
         <div class="row">
@@ -641,68 +790,68 @@ export const BOARD_HTML = /* html */ `<!doctype html>
           <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">Run fleet</button>
+          <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>
@@ -714,7 +863,7 @@ export const BOARD_HTML = /* html */ `<!doctype html>
         <input id="archQ" placeholder="search title…" autocomplete="off" />
         <select id="archRepo"><option value="">all repos</option></select>
         <button type="button" class="btn-ghost sm" id="reclaimBtn" hidden
-          title="remove worktrees left by cleaned/failed runs — reclaims disk (active work untouched)">♻ Reclaim <span id="reclaimHint"></span></button>
+          title="remove worktrees left by cleaned/failed runs — reclaims disk (active work untouched)"><svg class="ic"><use href="#i-recycle"/></svg> Reclaim <span id="reclaimHint"></span></button>
       </div>
       <div id="archList"></div>
       <div style="text-align:center;margin-top:14px"><button class="btn-ghost sm" id="archMore" hidden>load 50 more</button></div>
@@ -728,7 +877,7 @@ export const BOARD_HTML = /* html */ `<!doctype html>
       <span class="rid" id="mRid"></span>
       <span class="title" id="mTitle"></span>
       <span class="chip" id="mChip"><i></i><span id="mChipTxt"></span></span>
-      <button class="x" id="mClose" aria-label="close">×</button>
+      <button class="x" id="mClose" aria-label="close"><svg class="ic"><use href="#i-x"/></svg></button>
     </div>
     <div class="contract" id="mContract" hidden></div>
     <div class="modal-b">
@@ -741,7 +890,7 @@ export const BOARD_HTML = /* html */ `<!doctype html>
         <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>
@@ -753,14 +902,14 @@ export const BOARD_HTML = /* html */ `<!doctype html>
         <button type="button" class="seg-opt" data-mode="ask">Ask</button>
       </div>
       <input id="steerInput" placeholder="Next instruction — same session &amp; worktree…" style="flex:1" />
-      <button class="btn sm" id="steerSend">Send</button>
+      <button class="btn sm" id="steerSend"><svg class="ic"><use href="#i-pencil"/></svg> Send</button>
     </div>
     <div class="modal-f">
-      <button class="btn-ghost sm" id="mTerm">Terminal</button>
-      <button class="btn-ghost sm" id="mRefreshDiff">Refresh outputs</button>
+      <button class="btn-ghost sm" id="mTerm"><svg class="ic"><use href="#i-terminal"/></svg> Terminal</button>
+      <button class="btn-ghost sm" id="mRefreshDiff"><svg class="ic"><use href="#i-refresh"/></svg> Refresh outputs</button>
       <button class="btn-ghost sm" id="mCompare">Compare runs</button>
-      <button class="btn-ghost sm" id="mExport">Export files…</button>
-      <button class="btn-ghost sm" id="mSync">Sync base</button>
+      <button class="btn-ghost sm" id="mExport"><svg class="ic"><use href="#i-download"/></svg> Export files…</button>
+      <button class="btn-ghost sm" id="mSync"><svg class="ic"><use href="#i-branch"/></svg> Sync base</button>
       <button class="btn-ghost sm" id="mShare" title="create a read-only share link (no auth, snapshot view)">Share</button>
       <span class="spacer"></span>
       <button class="btn-danger sm" id="mStop">Stop</button>
@@ -776,15 +925,15 @@ export const BOARD_HTML = /* html */ `<!doctype html>
       <span class="rh-glyph">⌒</span>
       <span class="rh-t" id="roomTitle">Goal</span>
       <span class="rh-n" id="roomCount"></span>
-      <button class="x" id="roomClose" aria-label="close">×</button>
+      <button class="x" id="roomClose" aria-label="close"><svg class="ic"><use href="#i-x"/></svg></button>
     </div>
     <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>
@@ -798,7 +947,7 @@ export const BOARD_HTML = /* html */ `<!doctype html>
       <div class="comp-hint" id="roomHint"></div>
       <textarea id="roomInput" placeholder="New attempt prompt, or a broadcast to the settled runs…"></textarea>
       <div class="verbs" id="roomVerbs">
-        <button type="button" class="btn-ghost sm" id="roomNew">＋ New attempt</button>
+        <button type="button" class="btn-ghost sm" id="roomNew"><svg class="ic"><use href="#i-plus"/></svg> New attempt</button>
         <button type="button" class="btn-ghost sm" id="roomBroadcast">→ Broadcast</button>
         <span class="grow"></span>
         <div class="conv-menu" id="roomConvMenu">
@@ -824,7 +973,7 @@ export const BOARD_HTML = /* html */ `<!doctype html>
       <button class="btn sm" id="cmpAI">AI review</button>
       <button class="btn-ghost sm" id="cmpDocsTgl">Rendered</button>
       <button class="btn-ghost sm" id="cmpRefresh">Refresh</button>
-      <button class="x" id="cmpClose" aria-label="close">×</button>
+      <button class="x" id="cmpClose" aria-label="close"><svg class="ic"><use href="#i-x"/></svg></button>
     </div>
     <div class="cmp-review" id="cmpReview" hidden></div>
     <div class="cmp" id="cmpBody"></div>
@@ -838,7 +987,7 @@ export const BOARD_HTML = /* html */ `<!doctype html>
       <span class="title" id="termTitle">terminal</span>
       <div class="term-tabs" id="termTabs"></div>
       <span class="term-hint">tmux session · Ctrl-b d detaches · Esc closes</span>
-      <button class="x" id="termClose" aria-label="close">×</button>
+      <button class="x" id="termClose" aria-label="close"><svg class="ic"><use href="#i-x"/></svg></button>
     </div>
     <div class="term-body"><div id="xterm"></div></div>
     <div class="term-ibar" id="termIbar">
@@ -860,12 +1009,12 @@ export const BOARD_HTML = /* html */ `<!doctype html>
       <button class="btn-ghost sm" id="brwUp">↑ Up</button>
       <button class="btn-ghost sm" id="brwHome">Home</button>
       <span class="brw-path" id="brwPath"></span>
-      <button class="x" id="brwClose" aria-label="close">×</button>
+      <button class="x" id="brwClose" aria-label="close"><svg class="ic"><use href="#i-x"/></svg></button>
     </div>
     <div class="brw-list" id="brwList"></div>
     <div class="brw-f">
       <span class="hint"><span style="color:var(--brand)">git</span> badge = repo (Register) · empty folder = Start here</span>
-      <button class="btn-ghost sm" id="brwNewFolder">＋ New folder here</button>
+      <button class="btn-ghost sm" id="brwNewFolder"><svg class="ic"><use href="#i-plus"/></svg> New folder here</button>
       <button class="btn sm" id="brwRegHere" style="display:none">Register this folder</button>
     </div>
     <form class="brw-f" id="brwNewForm" hidden>
@@ -977,19 +1126,23 @@ 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)
 const $ = (id) => document.getElementById(id);
 const esc = (s) => String(s).replace(/[&<>]/g, (c) => ({'&':'&amp;','<':'&lt;','>':'&gt;'}[c]));
 const escA = (s) => esc(s).replace(/"/g, '&quot;');
+${ICON_JS_HELPER}   // ic('x') → '<svg class="ic"><use href="#i-x"/></svg>' (Lucide 스프라이트)
 const statusColor = (s) => 'var(--s-' + (s||'pending') + ', var(--muted))';
 /* ── custom toast / confirm (시스템 alert·confirm 대체) ── */
 function toast(msg, kind){
   const el = document.createElement('div');
   el.className = 'toast ' + (kind==='error'?'err':kind==='ok'?'ok':'');
-  el.innerHTML = '<span class="tk">'+(kind==='error'?'✕':kind==='ok'?'✓':'·')+'</span><span>'+esc(msg)+'</span>';
+  el.innerHTML = '<span class="tk">'+(kind==='error'?ic('x'):kind==='ok'?ic('check'):'·')+'</span><span>'+esc(msg)+'</span>';
   $('toasts').appendChild(el);
   setTimeout(()=>{ el.style.opacity='0'; el.style.transition='opacity .25s'; setTimeout(()=>el.remove(),260); }, 4200);
 }
@@ -1041,7 +1194,7 @@ async function brwGo(p){
   $('brwList').innerHTML =
     (d.error ? '<div class="brw-row"><span class="nm" style="color:var(--s-failed)">'+esc(d.error)+'</span></div>' : '')
     + (d.dirs.map(x =>
-        '<div class="brw-row" data-n="'+esc(x.name)+'"><span class="ico">▸</span><span class="nm">'+esc(x.name)+'</span>'
+        '<div class="brw-row" data-n="'+esc(x.name)+'"><span class="ico">'+ic('folder')+'</span><span class="nm">'+esc(x.name)+'</span>'
         + (x.isRepo ? '<span class="gitchip">git</span><button type="button" class="btn sm" data-reg="'+esc(x.name)+'">Register</button>'
            : x.isEmpty ? '<button type="button" class="btn-ghost sm" data-start="'+esc(x.name)+'">Start here</button>' : '')
         + '</div>').join('')
@@ -1249,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){
@@ -1262,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';
@@ -1275,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');
   });
@@ -1283,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('');
@@ -1375,11 +1554,19 @@ async function probeFirstMachine(){
 }
 function chkRow(name, ok, val){
   const cls = ok===null ? 'wait' : ok ? 'ok' : 'bad';
-  const st = ok===null ? '…' : ok ? '✓' : '✕';
+  const st = ok===null ? '…' : ok ? ic('check') : ic('x');
   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;
@@ -1423,7 +1610,7 @@ function cardHTML(r){
   const selCls = (selectMode?' selmode':'') + (selected.has(r.id)?' selected':'') + (closed?' closed':'');
   return '<div class="card'+selCls+'" id="card-'+r.id+'">'
     + '<div class="card-h"><span class="rid">r'+r.id+'</span><span class="title">'+title+'</span>'
-    + '<span class="selbox">✓</span>'+chipHTML(r.status)+'</div>'
+    + '<span class="selbox">'+ic('check')+'</span>'+chipHTML(r.status)+'</div>'
     + '<div class="meta"><span>branch <b>'+esc(r.branch||'—')+'</b></span>'
     + '<span>files <b>'+(r.filesChanged??0)+'</b></span>'
     + '<span>'+esc(r.agent||'')+'</span>'
@@ -1432,7 +1619,7 @@ function cardHTML(r){
     + (task && task.parentRunId ? '<span title="spawned by agent r'+task.parentRunId+'">↳ by r'+task.parentRunId+'</span>' : '')
     + (r.sessionId && ['done','failed','stopped'].includes(r.status)
         ? '<span class="resumable" title="agent session preserved — open the run and Send a next instruction to continue">↻ resumable</span>' : '')
-    + (r.prUrl ? '<a href="'+esc(r.prUrl)+'" target="_blank" rel="noopener" style="margin-left:auto">PR ↗</a>' : '')
+    + (r.prUrl ? '<a href="'+esc(r.prUrl)+'" target="_blank" rel="noopener" style="margin-left:auto">PR '+ic('external-link')+'</a>' : '')
     + '</div>'
     + '<div class="log">'+evs+'</div></div>';
 }
@@ -1448,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();
@@ -1468,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('');
@@ -1475,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=>
@@ -1491,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(()=>({}));
@@ -1535,7 +1798,7 @@ $('repoManual').addEventListener('click', ()=>{
 /* ── 완료 알림(브라우저) — 벨 토글, run 정착 시 통지 ── */
 let notifyOn = false;
 try { notifyOn = localStorage.getItem('coxpit.notify') === '1' && Notification.permission === 'granted'; } catch {}
-function paintBell(){ $('bell').textContent = notifyOn ? '🔔' : '🔕'; }
+function paintBell(){ $('bell').innerHTML = ic(notifyOn ? 'bell' : 'bell-off'); }
 $('bell').addEventListener('click', async ()=>{
   if (!('Notification' in window)){ toast('this browser has no notification support', 'error'); return; }
   if (!notifyOn){
@@ -1634,22 +1897,22 @@ function paintModal(){
    /outputs 로 카드 목록을 받아 렌더하고, 클릭하면 타입별 실뷰어를 오른쪽에 띄운다.
    answer/doc → mdLite · page → sandbox iframe · code → 기존 diff 렌더러 · file → 이미지/다운로드. */
 let outCards = [];                 // 이 run 의 마지막 카드 목록(RunOutputCard[])
-const OUT_GLYPH = { answer:'✦', code:'‹›', doc:'▤', page:'◱', file:'⎘' };
-const OUT_LABEL = { answer:'답변', code:'코드', doc:'문서', page:'페이지', file:'파일' };
+const OUT_ICON = { answer:'message', code:'code', doc:'file', page:'image', file:'image' };
+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">'+(ok?'✓':'!')+'</span>'
+      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;
@@ -1657,16 +1920,16 @@ 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>';
-  const glyph = OUT_GLYPH[c.type] || '•';
-  const meta = miss ? '산출물 미충족 — '+esc(c.meta||'') : esc(c.meta||'');
+    ? '<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 ? 'output not met — '+esc(c.meta||'') : esc(c.meta||'');
   return '<div class="ocard'+(miss?' miss':'')+'" data-oi="'+i+'">'
-    + '<span class="og">'+esc(glyph)+'</span>'
+    + '<span class="og">'+ic(gname)+'</span>'
     + '<span class="ob"><span class="ot">'+esc(c.title||c.type)+'</span>'
     + '<span class="om">'+meta+'</span></span>'
     + badge
-    + (miss?'':'<span class="oc">›</span>')
+    + (miss?'':'<span class="oc">'+ic('chevron')+'</span>')
     + '</div>';
 }
 /* run 형태로 기본 카드 선택 — 코드 변경 없고 answer/doc 있으면 그걸, 코드 위주면 code,
@@ -1679,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);
@@ -1994,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();
@@ -2021,7 +2285,7 @@ async function paintCompare(){
       + '<div class="cmp-meta" title="'+esc(summary)+'">'+(summary?esc(summary):'—')+'</div>'
       + '<div class="cmp-diff"><pre class="diff">'+diffHTML(r.diff||'')+'</pre></div>'
       + '<div class="cmp-f"><span class="msg" id="cmpMsg-'+r.id+'">'
-      + (r.prUrl ? '<a href="'+esc(r.prUrl)+'" target="_blank" rel="noopener">PR ↗ '+esc(r.prUrl.split('/').slice(-1)[0])+'</a>' : '')
+      + (r.prUrl ? '<a href="'+esc(r.prUrl)+'" target="_blank" rel="noopener">PR '+ic('external-link')+' '+esc(r.prUrl.split('/').slice(-1)[0])+'</a>' : '')
       + '</span>'
       + (merged
         ? chipHTML('merged')
@@ -2084,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;
@@ -2141,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
@@ -2157,7 +2433,7 @@ function roomRunRowHTML(r){
     : (running ? '<span class="run-badge running">running</span>' : '');
   // running·merged 는 체크박스로 선택 불가(정착·미머지만 Integrate 대상)
   const selectable = !merged && !running && (r.filesChanged||0)>0;
-  const cb = '<span class="cb" data-rcb="'+(selectable?r.runId:'')+'"'+(selectable?'':' style="opacity:.4;cursor:default"')+'>'+(sel?'✓':'')+'</span>';
+  const cb = '<span class="cb" data-rcb="'+(selectable?r.runId:'')+'"'+(selectable?'':' style="opacity:.4;cursor:default"')+'>'+(sel?ic('check'):'')+'</span>';
   return '<div class="run'+(sel?' sel':'')+(merged?' dim':'')+(open?' open':'')+'" data-rrun="'+r.runId+'">'
     + '<div class="run-h">'+cb
     + '<span class="dot '+dotCls+'"></span>'
@@ -2172,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(){
@@ -2192,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 재사용(중복 없음). */
@@ -2217,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='';
@@ -2335,7 +2611,7 @@ $('roomRuns').addEventListener('click', async (e)=>{
     e.stopPropagation();
     const id = Number(cb.dataset.rcb); if (!id) return;
     if (roomSel.has(id)) roomSel.delete(id); else roomSel.add(id);
-    cb.textContent = roomSel.has(id) ? '✓' : '';
+    cb.innerHTML = roomSel.has(id) ? ic('check') : '';
     cb.closest('.run').classList.toggle('sel', roomSel.has(id));
     roomUpdateGbar();
     return;
@@ -2363,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'){
@@ -2371,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;
   }
@@ -2410,7 +2686,7 @@ async function roomRunAction(act, rid){
     return;
   }
 }
-/* [리뷰] — 그 run 의 태스크에 reviewTask(/tasks/:id/review) 를 돌려 ◆ 요약을 행 안에 인라인 표시. */
+/* [리뷰] — 그 run 의 태스크에 reviewTask(/tasks/:id/review) 를 돌려 요약을 행 안에 인라인 표시. */
 async function reviewOneRun(r){
   const row = document.querySelector('.run[data-rrun="'+r.runId+'"]'); if(!row) return;
   if (!roomOpen.has(r.runId)){ roomOpen.add(r.runId); row.classList.add('open'); roomLoadRunOutputs(r.runId); }
@@ -2418,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">◆ 리뷰</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">◆ 리뷰</span><span class="rt">'+mdLite(j.review||'(no summary)')+'</span>'; }
-    else { rv.innerHTML = '<span class="rk">◆ 리뷰</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">◆ 리뷰</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 로 옮긴다.
@@ -2461,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 토글 반영) */
@@ -2693,24 +2969,38 @@ $('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);
   const goal = $('planGoal').value.trim();
@@ -2723,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]; }
 }
@@ -2737,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);   // 바로 터미널로
 }
@@ -2776,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'];
@@ -2824,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){
@@ -3063,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');