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

coxpit 4.8.0 → 5.0.1

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/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)}
@@ -72,9 +76,29 @@ export const BOARD_HTML = /* html */ `<!doctype html>
   input:focus,select:focus,textarea:focus{border-color:rgba(78,201,176,.55);outline:none}
   input::placeholder,textarea::placeholder{color:var(--faint)}
   textarea{resize:vertical;min-height:56px;line-height:1.5}
+  /* no native browser chrome — any bare <select> strips the OS arrow and draws a token chevron
+     (dressed selects hide entirely; this covers the undressed fallback like #archRepo) */
+  select{appearance:none;-webkit-appearance:none;-moz-appearance:none;padding-right:26px;
+    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238792a2' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
+    background-repeat:no-repeat;background-position:right 8px center;background-size:13px}
+  select option{background:#12151c;color:var(--ink)}
+  /* kill the native number spinner — a token stepper (below) replaces it */
+  input[type=number]{appearance:none;-webkit-appearance:none;-moz-appearance:textfield}
+  input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
   .row{display:flex;gap:8px}
   .row>*{flex:1}
   .row .narrow{flex:0 0 64px}
+  /* count stepper — token − N + (btn-ghost feel, dark, no native spinner) */
+  .stepper{display:flex;align-items:center;gap:0;flex:0 0 auto;border:1px solid var(--line);
+    border-radius:var(--r-ctl);background:#0e1118;overflow:hidden}
+  .stepper .stp{display:inline-flex;align-items:center;justify-content:center;width:26px;height:32px;
+    background:transparent;border:none;color:var(--muted);cursor:pointer;font-size:15px;line-height:1;
+    transition:background .15s,color .15s}
+  .stepper .stp:hover{background:var(--surface2);color:var(--ink)}
+  .stepper .stp .ic{width:14px;height:14px}
+  .stepper input.narrow{flex:0 0 30px;width:30px;text-align:center;border:none;border-radius:0;
+    background:transparent;padding:8px 0;font-variant-numeric:tabular-nums}
+  .stepper input.narrow:focus{border:none}
   .check{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--muted);cursor:pointer;user-select:none}
   .check input{width:auto;accent-color:var(--brand)}
@@ -82,6 +106,95 @@ 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}
+  /* rail repo-row actions — icon-ghost, never white: transparent bg · muted icon · hover ink + surface */
+  #repoList .repo .rmbtn{background:transparent;border:1px solid transparent;color:var(--muted);cursor:pointer;
+    padding:3px;display:inline-flex;border-radius:6px;transition:color .15s,background .15s,border-color .15s}
+  #repoList .repo .rmbtn:hover{color:var(--ink);background:var(--surface);border-color:var(--line-hi)}
+  #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}
@@ -119,14 +232,34 @@ export const BOARD_HTML = /* html */ `<!doctype html>
   .dd-opt:hover{background:var(--surface);color:var(--ink)}
   .dd-opt.on{color:var(--brand)}
   .dd-opt.on::before{content:'✓ ';font-size:10px}
+  /* model combo — free-text input + a .dd-style recent-models menu (no native datalist/white popup) */
+  .mcombo{position:relative;display:flex;align-items:stretch;gap:0}
+  .mcombo input{border-top-right-radius:0;border-bottom-right-radius:0;border-right:none}
+  .mcombo .mc-tog{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;width:30px;
+    background:#0e1118;color:var(--faint);border:1px solid var(--line);border-left:none;
+    border-top-right-radius:var(--r-ctl);border-bottom-right-radius:var(--r-ctl);cursor:pointer;
+    transition:color .15s,border-color .15s}
+  .mcombo .mc-tog:hover{color:var(--ink)}
+  .mcombo .mc-tog .ic{width:13px;height:13px;transition:transform .15s}
+  .mcombo.open input,.mcombo.open .mc-tog{border-color:rgba(78,201,176,.55)}
+  .mcombo.open .mc-tog .ic{transform:rotate(180deg)}
+  .mcombo .dd-panel{top:calc(100% + 5px)}
+  .mcombo.open .dd-panel{display:block}
+  .mc-empty{padding:7px 10px;font-family:var(--mono);font-size:11px;color:var(--faint)}
   .seg{display:flex;gap:3px;padding:3px;border:1px solid var(--line);border-radius:var(--r-ctl);background:#0e1118}
-  .seg-opt{flex:1;display:flex;flex-direction:column;align-items:center;gap:1px;padding:6px 8px;border:none;
+  /* slim single-row option — matches the type/provider seg height; the risky hint rides inline, subtle */
+  .seg-opt{flex:1;display:inline-flex;flex-direction:row;align-items:center;justify-content:center;gap:5px;
+    padding:6px 8px;border:none;min-width:0;
     background:transparent;color:var(--muted);font-size:12px;font-weight:600;cursor:pointer;
     border-radius:calc(var(--r-ctl) - 3px);transition:background .15s,color .15s}
   .seg-opt:hover{color:var(--ink)}
   .seg-opt.on{background:var(--surface2);color:var(--ink)}
   .seg-opt[data-real="1"].on{background:var(--brand);color:var(--brand-ink)}
-  .seg-hint{font-family:var(--mono);font-size:9.5px;font-weight:500;text-transform:uppercase;letter-spacing:.06em;opacity:.7}
+  .seg-hint{font-family:var(--mono);font-size:9px;font-weight:500;text-transform:uppercase;letter-spacing:.05em;
+    opacity:.6;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
+  /* the credit hint only reads once the risky option is chosen — keeps the resting seg clean & slim */
+  .seg-opt[data-real="1"]:not(.on) .seg-hint{display:none}
+  .seg-opt[data-real="1"].on .seg-hint{opacity:.75}
   /* ── deliverable 계약 칩(Task compose) ── */
   .ochips{display:flex;flex-wrap:wrap;gap:5px}
   .ochip{background:transparent;color:var(--muted);border:1px solid var(--line);cursor:pointer;
@@ -478,8 +611,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 +640,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 +713,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 +751,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 +831,75 @@ ${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>
+                <div class="mcombo" id="modelCombo">
+                  <input id="taskModel" placeholder="CLI default" autocomplete="off" spellcheck="false" />
+                  <button type="button" class="mc-tog" id="modelTog" aria-label="recent models" title="recent models"><svg class="ic"><use href="#i-chevron-down"/></svg></button>
+                  <div class="dd-panel" id="modelMenu"></div>
+                </div>
+                <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">
-          <input id="taskCount" class="narrow" type="number" min="1" max="8" value="1" title="agents — 1 for a job, N to explore variants" />
+        <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 />
+          <div class="stepper" id="taskCountStep" title="agents — 1 for a job, N to explore variants">
+            <button type="button" class="stp" id="cntDown" aria-label="fewer agents"><svg class="ic"><use href="#i-minus"/></svg></button>
+            <input id="taskCount" class="narrow" type="number" min="1" max="8" value="1" inputmode="numeric" aria-label="agent count" />
+            <button type="button" class="stp" id="cntUp" aria-label="more agents"><svg class="ic"><use href="#i-plus"/></svg></button>
+          </div>
           <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 +938,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 +978,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 +1174,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 +1450,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 +1468,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 +1494,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 +1502,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 +1606,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 +1683,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 +1703,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 +1712,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 +1732,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 +1946,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 +1968,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 +1990,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 +2305,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 +2396,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 +2465,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 +2496,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 +2516,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 +2541,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 +2687,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 +2695,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 +2742,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 +2785,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,24 +3017,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 는 에이전트 없음
+  $('taskCountStep').style.display = tab==='task' ? 'flex' : '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();
@@ -2729,7 +3061,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 +3075,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 +3115,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'];
@@ -2805,12 +3139,40 @@ function rememberModel(m){
   }catch{}
   paintModelHist();
 }
+function modelHistList(){
+  try{ return JSON.parse(localStorage.getItem('coxpit.models')||'[]'); }catch{ return []; }
+}
 function paintModelHist(){
-  let h = [];
-  try{ h = JSON.parse(localStorage.getItem('coxpit.models')||'[]'); }catch{}
-  $('modelHist').innerHTML = h.map(m=>'<option value="'+escA(m)+'"></option>').join('');
+  const h = modelHistList();
+  const cur = $('taskModel').value.trim();
+  $('modelMenu').innerHTML = h.length
+    ? h.map(m=>'<div class="dd-opt'+(m===cur?' on':'')+'" data-m="'+escA(m)+'">'+esc(m)+'</div>').join('')
+    : '<div class="mc-empty">no recent models</div>';
 }
 paintModelHist();
+// model combo — free text stays; the caret opens a .dd-style recent-models menu (no native datalist)
+function closeModelMenu(){ $('modelCombo').classList.remove('open'); }
+$('modelTog').addEventListener('click', (e)=>{
+  e.stopPropagation();
+  const open = $('modelCombo').classList.contains('open');
+  closeDropdowns(); closeModelMenu();
+  if (!open){ paintModelHist(); $('modelCombo').classList.add('open'); }
+});
+$('modelMenu').addEventListener('click', (e)=>{
+  const o = e.target.closest('.dd-opt'); if(!o) return;
+  $('taskModel').value = o.dataset.m; closeModelMenu(); $('taskModel').focus();
+});
+document.addEventListener('click', closeModelMenu);
+/* ── count stepper — token −/+ mirror the number input, clamped 1..8 ── */
+function stepCount(delta){
+  const el = $('taskCount');
+  const n = Math.max(1, Math.min(8, (Number(el.value)||1) + delta));
+  el.value = String(n);
+}
+$('cntDown').addEventListener('click', ()=>stepCount(-1));
+$('cntUp').addEventListener('click', ()=>stepCount(1));
+$('taskCount').addEventListener('change', ()=>stepCount(0)); // clamp manual typing
 /* ── agent mode segmented control (mirrors hidden #taskReal) ── */
 const segOpts = Array.from(document.querySelectorAll('#modeSeg .seg-opt'));
@@ -2830,7 +3192,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 +3431,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');