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

coxpit 4.6.0 → 4.8.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 (14) 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>
@@ -125,6 +127,13 @@ export const BOARD_HTML = /* html */ `<!doctype html>
   .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}
+  /* ── deliverable 계약 칩(Task compose) ── */
+  .ochips{display:flex;flex-wrap:wrap;gap:5px}
+  .ochip{background:transparent;color:var(--muted);border:1px solid var(--line);cursor:pointer;
+    font-family:var(--mono);font-size:11px;padding:4px 10px;border-radius:999px;
+    transition:border-color .15s,color .15s,background .15s}
+  .ochip:hover{color:var(--ink);border-color:var(--line-hi)}
+  .ochip.on{background:var(--brand-dim);color:var(--brand);border-color:rgba(78,201,176,.4)}
   /* ── buttons ────────────────────────────── */
   .btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;border:none;cursor:pointer;
@@ -187,6 +196,64 @@ export const BOARD_HTML = /* html */ `<!doctype html>
   .conv .turn .msg{color:var(--ink);white-space:pre-wrap;word-break:break-word;line-height:1.55}
   .conv .turn.you .msg{color:var(--muted)}
   .conv .turn .ro-note{font-family:var(--mono);font-size:9.5px;color:var(--faint);letter-spacing:.02em}
+  /* ── v4.7 converge cockpit — group action bar + per-run decision rows ── */
+  .gbar{display:flex;align-items:center;gap:12px;padding:10px 18px;border-bottom:1px solid var(--line);
+    background:var(--surface2);font-family:var(--mono);font-size:11.5px}
+  .gbar .selc{color:var(--muted)}
+  .gbar .sp{flex:1}
+  .gbar button{font-family:var(--mono);font-size:11.5px;background:transparent;border:1px solid var(--line-hi);
+    color:var(--muted);border-radius:7px;padding:5px 11px;cursor:pointer}
+  .gbar button:hover{color:var(--ink);border-color:var(--line-hi)}
+  .gbar button.brand{background:var(--brand);border-color:var(--brand);color:var(--brand-ink);font-weight:700}
+  .gbar button.brand[disabled]{opacity:.4;cursor:not-allowed}
+  .gbar button.danger{color:var(--s-failed);border-color:rgba(226,91,103,.4)}
+  .runs{padding:10px 12px;display:flex;flex-direction:column;gap:8px}
+  .runs .empty-note{color:var(--faint);font-family:var(--mono);font-size:11.5px;text-align:center;padding:24px 0}
+  .run{border:1px solid var(--line);border-radius:12px;background:var(--surface);overflow:hidden}
+  .run.sel{border-color:var(--brand);box-shadow:inset 0 0 0 1px var(--brand-dim)}
+  .run.dim{opacity:.6}
+  .run-h{display:flex;align-items:center;gap:11px;padding:11px 13px;cursor:pointer}
+  .run-h .cb{width:14px;height:14px;border:1px solid var(--line-hi);border-radius:4px;flex:none;
+    display:inline-flex;align-items:center;justify-content:center;color:var(--brand);font-size:10px;cursor:pointer}
+  .run.sel .run-h .cb{background:var(--brand);border-color:var(--brand);color:var(--brand-ink)}
+  .run .dot{width:8px;height:8px;border-radius:50%;flex:none}
+  .run-id{font-family:var(--mono);font-size:12px;font-weight:700;color:var(--ink);flex:none}
+  .run-title{font-size:13.5px;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
+  .run-meta{font-family:var(--mono);font-size:10.5px;color:var(--faint);flex:none}
+  .run-badge{font-family:var(--mono);font-size:10px;padding:2px 7px;border-radius:999px;flex:none}
+  .run-badge.merged{color:var(--s-merged);border:1px solid rgba(78,201,176,.4)}
+  .run-badge.running{color:var(--s-running);border:1px solid rgba(85,167,224,.4)}
+  .run-h .grow{flex:1}
+  .run .acts{display:flex;gap:6px;flex:none}
+  .run .acts .b{font-family:var(--sans);font-size:11.5px;font-weight:600;border-radius:7px;padding:5px 11px;
+    cursor:pointer;border:1px solid var(--line-hi);background:transparent;color:var(--muted)}
+  .run .acts .b:hover{color:var(--ink)}
+  .run .acts .b.merge{background:var(--brand);border-color:var(--brand);color:var(--brand-ink)}
+  .run .acts .b.close:hover{color:var(--s-failed);border-color:rgba(226,91,103,.45)}
+  .run .acts .b.ghost{color:var(--muted)}
+  .run .caret{color:var(--faint);font-family:var(--mono);font-size:12px;flex:none;width:14px;text-align:center;
+    transition:transform .16s}
+  .run.open .caret{transform:rotate(90deg)}
+  .run-b{display:none;border-top:1px solid var(--line);padding:12px 14px 14px;background:#0e1118}
+  .run.open .run-b{display:block}
+  .run-b .rout{margin-bottom:10px}
+  .run-b .rout-cards{display:flex;flex-direction:column;gap:6px}
+  .run-b .ocard{padding:8px 11px}
+  .run-b .rout-detail{margin-top:8px;border:1px solid var(--line);border-radius:8px;overflow:hidden}
+  .run-b .rout-back{font-family:var(--mono);font-size:10.5px;color:var(--muted);cursor:pointer;
+    padding:7px 11px;border-bottom:1px solid var(--line);background:var(--surface2)}
+  .run-b .rout-back:hover{color:var(--brand)}
+  .run-b .rout-body{padding:10px 12px;max-height:300px;overflow:auto}
+  .run-b .review{margin:10px 0;display:flex;gap:8px;align-items:flex-start;font-size:12.5px;line-height:1.55}
+  .run-b .review .rk{font-family:var(--mono);font-size:10.5px;color:var(--brand);flex:none;padding-top:2px}
+  .run-b .review .rt{color:var(--muted)}
+  .run-b .fix{margin-top:10px;display:flex;gap:8px}
+  .run-b .fix input{flex:1;background:var(--bg);border:1px solid var(--line-hi);border-radius:7px;color:var(--ink);
+    font-family:var(--sans);font-size:12.5px;padding:8px 11px;outline:none}
+  .run-b .fix input:focus{border-color:var(--brand)}
+  .run-b .fix .b{white-space:nowrap;font-family:var(--sans);font-size:11.5px;font-weight:600;border-radius:7px;
+    padding:5px 11px;cursor:pointer;border:1px solid var(--line-hi);background:transparent;color:var(--muted)}
+  .run-b .fix .b:hover{color:var(--ink);border-color:var(--brand)}
   .send-only{display:flex;gap:8px;align-items:center}
   .send-only .ro-hint{flex:1;font-family:var(--mono);font-size:10px;color:var(--faint);letter-spacing:.02em}
   .composer{border-top:1px solid var(--line);padding:12px 18px;display:flex;flex-direction:column;gap:8px}
@@ -335,7 +402,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;
@@ -436,9 +503,60 @@ export const BOARD_HTML = /* html */ `<!doctype html>
   .doc-md p{margin:0 0 8px}
   .doc-frame{width:100%;height:420px;border:1px solid var(--line);border-radius:8px;background:#fff;margin-bottom:16px}
   .pane-tgl{margin-left:auto;font-size:10px;padding:2px 9px;text-transform:none;letter-spacing:0}
-  /* run 모달의 diff 라인 = steer 참조 클릭 타깃 */
-  #mDiffWrap .dl-line{cursor:pointer;border-radius:3px}
-  #mDiffWrap .dl-line:hover{background:rgba(78,201,176,.09)}
+  /* run 모달의 diff 라인 = steer 참조 클릭 타깃(code 카드 상세) */
+  #outDetail .dl-line{cursor:pointer;border-radius:3px}
+  #outDetail .dl-line:hover{background:rgba(78,201,176,.09)}
+  /* ── v4.7 산출물 계약(contract strip) — 모달 헤더 아래 요청 산출물 요약 ── */
+  .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}
+  .contract[hidden]{display:none}
+  .contract .clabel{letter-spacing:.04em;text-transform:none}
+  .contract .csep{color:var(--line-hi)}
+  .req{display:inline-flex;align-items:center;gap:4px;padding:2px 8px;border-radius:999px;
+    border:1px solid var(--line);color:var(--muted);text-transform:none;letter-spacing:.02em}
+  .req.ok{color:var(--s-done);border-color:rgba(88,179,104,.4)}
+  .req.warn{color:var(--s-preparing);border-color:rgba(214,162,73,.45)}
+  .req.aux{color:var(--faint);border-style:dashed}
+  .req .rg{font-size:11px;line-height:1}
+  /* ── v4.7 출력 카드 목록(오른쪽 컬럼) ── */
+  #outWrap{display:flex;flex-direction:column;min-height:0;flex:1}
+  #outCards{display:flex;flex-direction:column;gap:8px;padding:12px 16px;overflow:auto;flex:1;min-height:0}
+  .ocard{display:flex;align-items:center;gap:10px;padding:11px 13px;border:1px solid var(--line);
+    border-radius:var(--r-card);background:var(--surface);cursor:pointer;
+    transition:border-color .16s,transform .16s}
+  .ocard:hover{border-color:#323b4e;transform:translateY(-1px)}
+  .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}
+  .ocard .om{font-family:var(--mono);font-size:10px;color:var(--faint);
+    white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
+  .ocard .obadge{font-family:var(--mono);font-size:9.5px;text-transform:uppercase;letter-spacing:.06em;
+    padding:2px 7px;border-radius:999px;border:1px solid var(--line);color:var(--faint);flex:0 0 auto}
+  .ocard .obadge.req{color:var(--brand);border-color:rgba(78,201,176,.4)}
+  .ocard .obadge.warn{color:var(--s-preparing);border-color:rgba(214,162,73,.45)}
+  .ocard .oc{color:var(--faint);font-size:13px;flex:0 0 auto}
+  .ocards-empty{color:var(--faint);font-family:var(--mono);font-size:11px;padding:22px 4px;text-align:center}
+  /* ── v4.7 출력 카드 상세 뷰어 ── */
+  #outDetail{display:none;flex-direction:column;min-height:0;flex:1}
+  #outDetail.on{display:flex}
+  #outWrap.detailing #outCards{display:none}
+  .oback{display:inline-flex;align-items:center;gap:6px;font-family:var(--mono);font-size:11px;
+    color:var(--muted);cursor:pointer;padding:9px 16px;border-bottom:1px solid var(--line);
+    background:var(--surface2);flex:0 0 auto}
+  .oback:hover{color:var(--brand)}
+  .odetail-c{overflow:auto;padding:12px 16px;flex:1;min-height:0}
+  .oimg{max-width:100%;border:1px solid var(--line);border-radius:8px;background:#fff}
+  .odl{display:inline-block;margin-top:6px;font-family:var(--mono);font-size:11.5px;color:var(--brand);
+    text-decoration:none;border:1px solid var(--line);border-radius:var(--r-ctl);padding:6px 11px}
+  .odl:hover{border-color:var(--brand)}
   /* ── terminal ───────────────────────────── */
   .term-body{flex:1;min-height:0;background:#0b0d12;padding:8px 4px 4px 10px}
@@ -488,9 +606,11 @@ 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>
@@ -500,8 +620,8 @@ export const BOARD_HTML = /* html */ `<!doctype html>
     <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>
@@ -517,8 +637,8 @@ export const BOARD_HTML = /* html */ `<!doctype html>
         <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">
@@ -549,6 +669,14 @@ export const BOARD_HTML = /* html */ `<!doctype html>
           <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>
         </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>
@@ -564,7 +692,7 @@ export const BOARD_HTML = /* html */ `<!doctype html>
         <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" />
-          <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>
@@ -590,6 +718,8 @@ export const BOARD_HTML = /* html */ `<!doctype html>
       <div class="arch-bar">
         <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)"><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>
@@ -603,17 +733,23 @@ 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">
       <div class="pane">
         <div class="pane-h">Timeline</div>
         <div class="pane-c tl" id="mTimeline"></div>
       </div>
       <div class="pane">
-        <div class="pane-h" style="display:flex;align-items:center;gap:8px">Diff <span id="mStat" style="text-transform:none;letter-spacing:0"></span>
-          <button class="btn-ghost sm pane-tgl" id="mDocsTgl" hidden>Rendered</button></div>
-        <div class="pane-c" id="mDiffWrap"><pre class="diff" id="mDiff">loading…</pre></div>
+        <div class="pane-h" style="display:flex;align-items:center;gap:8px">Outputs <span id="mStat" style="text-transform:none;letter-spacing:0"></span></div>
+        <div id="outWrap">
+          <div id="outCards"><div class="ocards-empty">loading…</div></div>
+          <div id="outDetail">
+            <div class="oback" id="outBack">‹ 산출물 목록</div>
+            <div class="odetail-c" id="outDetailC"></div>
+          </div>
+        </div>
       </div>
     </div>
     <div class="modal-f" id="steerRow" style="border-top:1px solid var(--line)">
@@ -622,14 +758,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 diff</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>
@@ -645,11 +781,18 @@ 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>
+      <span class="sp"></span>
+      <button type="button" id="roomReviewAll">전체 리뷰</button>
+      <button type="button" class="danger" id="roomGroupClose">그룹 클로즈</button>
+    </div>
     <div class="body">
-      <div class="feed" id="roomFeed"></div>
+      <div class="runs" id="roomRuns"></div>
       <div class="conv" id="roomConv" hidden></div>
     </div>
     <div class="composer">
@@ -660,7 +803,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">
@@ -686,7 +829,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>
@@ -700,7 +843,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">
@@ -722,12 +865,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>
@@ -845,13 +988,14 @@ let remoteAuthOpen = false; // true = no password → Funnel guard on (from /api
 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);
 }
@@ -903,7 +1047,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('')
@@ -1146,7 +1290,7 @@ function setView(v){
   $('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); }
+  if (archive){ paintArchRepos(); archFetch(true); reclaimRefresh(); }
   else render();
 }
 document.querySelectorAll('#viewSeg .seg-opt').forEach(b=>b.addEventListener('click', ()=>setView(b.dataset.view)));
@@ -1198,6 +1342,32 @@ $('archList').addEventListener('click', async (e)=>{
   }catch{ toast('could not open task', 'error'); }
 });
+/* ── Reclaim orphaned worktrees ── cleaned/failed run worktrees are disk debt
+   (~180MB each — node_modules lives inside). Only shown when there's something
+   to reclaim; active/successful work is never listed by the server. */
+let reclaimN = 0;
+async function reclaimRefresh(){
+  try{
+    const j = await fetch('/api/worktrees').then(x=>x.json());
+    reclaimN = (j.items||[]).length;
+    const mb = Math.round((j.totalKb||0)/1024);
+    $('reclaimHint').textContent = reclaimN ? (reclaimN+' · ~'+mb+'MB') : '';
+    $('reclaimBtn').hidden = reclaimN===0;
+  }catch{ $('reclaimBtn').hidden = true; }
+}
+$('reclaimBtn').addEventListener('click', async ()=>{
+  if (!reclaimN) return;
+  const ok = await confirmUI('remove '+reclaimN+' cleaned/failed run worktree'+(reclaimN===1?'':'s')+'?', {
+    sub:'active work is untouched — only closed tasks and failed/error/stopped runs are reclaimed',
+    okLabel:'Reclaim', danger:true });
+  if (!ok) return;
+  try{
+    const r = await fetch('/api/worktrees/prune',{method:'POST',headers:{'content-type':'application/json'},body:JSON.stringify({})}).then(x=>x.json());
+    toast('reclaimed '+(r.count||0)+' worktree'+((r.count||0)===1?'':'s'), 'ok');
+  }catch{ toast('reclaim failed', 'error'); }
+  reclaimRefresh();
+});
 /* ── first-run onboarding (빈 보드 = 준비 상태 점검 + 시작 안내) ── */
 let readiness = null, probing = false;
 async function probeFirstMachine(){
@@ -1211,7 +1381,7 @@ 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>';
 }
@@ -1259,7 +1429,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>'
@@ -1268,7 +1438,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>';
 }
@@ -1371,7 +1541,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){
@@ -1434,6 +1604,14 @@ function connectWS(){
 /* ── run detail modal ── */
 let openRunId = null;
+/* 터미널이 붙을 수 없는 사유(있으면 그 문자열, 없으면 '') — 닫힌 task·정리된 worktree.
+   cleanupRun 이 worktreePath 를 비우므로 merged/cleanup/closed 는 모두 여기서 걸린다. */
+function termUnavailReason(r, task){
+  if (task && task.status==='closed') return 'worktree cleaned — terminal unavailable (task closed)';
+  if (r.status==='merged') return 'worktree cleaned — terminal unavailable (merged)';
+  if ('worktreePath' in r && !r.worktreePath) return 'worktree cleaned — terminal unavailable';
+  return '';
+}
 function paintModal(){
   if (openRunId==null) return;
   const r = runs.get(openRunId); if(!r) return;
@@ -1448,40 +1626,157 @@ function paintModal(){
   $('mStop').style.display = (r.status==='running'||r.status==='preparing'||r.status==='pending') ? '' : 'none';
   // steer 는 정착한 real run 에서만 의미(드라이런은 세션 없음 — 서버가 사유와 함께 거절)
   $('steerRow').style.display = ['done','failed','stopped'].includes(r.status) ? '' : 'none';
+  // 터미널 가드 — 닫힌 task·worktree 정리된 run(merged/cleanup) 은 tmux 세션이 죽어
+  //   attach 하면 에러. 버튼을 잠그고 사유를 툴팁으로.
+  const termGuard = termUnavailReason(r, task);
+  const tbtn = $('mTerm');
+  tbtn.disabled = !!termGuard;
+  tbtn.title = termGuard || 'attach a tmux terminal to this run';
   $('mTimeline').innerHTML = humanLines(r.events).map(h =>
     '<div class="ev"><span class="k">'+esc(h.k)+'</span><span class="t">'+esc(h.t)+'</span></div>'
   ).join('') || '<span style="color:var(--faint)">no events yet</span>';
 }
-async function loadDiff(){
-  if (openRunId==null || docMode) return;
-  const pre = $('mDiff'); if (!pre) return;
+/* ── v4.7 산출물 계약 · 출력 카드 — 오른쪽 컬럼(diff/Rendered 토글을 흡수) ──
+   /outputs 로 카드 목록을 받아 렌더하고, 클릭하면 타입별 실뷰어를 오른쪽에 띄운다.
+   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:'파일' };
+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>';
+  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>';
+  if (aux.length){
+    h += '<span class="csep">—</span><span class="clabel">부수:</span>'
+      + aux.map(c=>'<span class="req aux">'+esc(OUT_LABEL[c.type]||c.type)+'</span>').join('');
+  }
+  return h;
+}
+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 gname = miss ? 'alert-triangle' : (OUT_ICON[c.type] || 'circle');
+  const meta = miss ? '산출물 미충족 — '+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>'
+    + '<span class="om">'+meta+'</span></span>'
+    + badge
+    + (miss?'':'<span class="oc">'+ic('chevron')+'</span>')
+    + '</div>';
+}
+/* run 형태로 기본 카드 선택 — 코드 변경 없고 answer/doc 있으면 그걸, 코드 위주면 code,
+   아니면 첫 present 선언 카드(없으면 첫 present 카드). 미충족 카드는 절대 자동 오픈 안 함. */
+function pickDefaultCard(cards){
+  const present = cards.filter(c=>c.present);
+  if (!present.length) return -1;
+  const hasCode = present.some(c=>c.type==='code');
+  const docish = present.find(c=>c.type==='answer' || c.type==='doc');
+  if (!hasCode && docish) return cards.indexOf(docish);
+  if (hasCode){
+    const codeCard = present.find(c=>c.type==='code');
+    // 코드 위주라도 선언된 문서/답변이 있으면 그 계약을 우선(코드는 언제나 카드로 접근 가능)
+    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);
+  }
+  const declared = present.find(c=>c.required);
+  return cards.indexOf(declared || present[0]);
+}
+async function loadDiff(){   // 이름은 유지(모달 refresh·정착 이벤트가 호출) — 이제 outputs 를 로드
+  if (openRunId==null) return;
   const rid = openRunId;
-  pre.textContent = 'loading…'; $('mStat').textContent='';
+  $('outCards').innerHTML = '<div class="ocards-empty">loading…</div>';
+  $('mStat').textContent='';
+  showOutCards();   // 상세에서 목록으로
   try{
-    const d = await fetch('/api/runs/'+rid+'/diff').then(x=>x.json());
-    if (!d.ok){
-      pre.textContent = d.stat||'no worktree';
-      // worktree 는 없지만 스냅샷 문서가 있으면 Rendered 토글 노출(머지·Close 후 뷰어)
-      maybeShowDocsToggle(rid);
-      return;
-    }
-    const files = d.stat ? d.stat.split('\\n').filter(Boolean).length : 0;
-    $('mStat').textContent = files ? '· '+files+' file'+(files>1?'s':'') : '· clean';
-    pre.innerHTML = diffHTML(d.diff||'');
-    // 변경분에 문서(md/html)가 있으면 즉시 노출, 없으면 스냅샷 확인
-    if (/\\.(md|markdown|html?|htm)$/im.test(d.stat||'')) $('mDocsTgl').hidden = false;
-    else maybeShowDocsToggle(rid);
-  }catch{ pre.textContent = 'diff failed'; }
-}
-/* worktree 에 라이브 문서가 없을 때만 — 스냅샷이라도 있으면 토글을 켠다 */
-async function maybeShowDocsToggle(rid){
+    const j = await fetch('/api/runs/'+rid+'/outputs').then(x=>x.json());
+    if (rid !== openRunId) return;
+    outCards = (j.outputs)||[];
+    $('mContract').innerHTML = contractHTML(outCards);
+    $('mContract').hidden = !$('mContract').innerHTML;
+    const nPresent = outCards.filter(c=>c.present).length;
+    $('mStat').textContent = nPresent ? '· '+nPresent+' output'+(nPresent>1?'s':'') : '· none';
+    if (!outCards.length){ $('outCards').innerHTML = '<div class="ocards-empty">no outputs yet</div>'; return; }
+    $('outCards').innerHTML = outCards.map(outCardHTML).join('');
+    const def = pickDefaultCard(outCards);
+    if (def>=0) openOutCard(def);
+  }catch{ $('outCards').innerHTML = '<div class="ocards-empty">outputs failed</div>'; }
+}
+function showOutCards(){
+  $('outWrap').classList.remove('detailing');
+  $('outDetail').classList.remove('on');
+}
+function showOutDetail(){
+  $('outWrap').classList.add('detailing');
+  $('outDetail').classList.add('on');
+}
+/* 카드 상세 렌더러(재사용) — 모달 오른쪽 컬럼과 워크룸 펼침 peek 이 공유.
+   rid = 대상 run, c = 카드, box = 그릴 곳, alive() = 아직 이 뷰가 유효한지(스테일 가드). */
+async function renderOutCardInto(rid, c, box, alive){
+  if (!c || !c.present) return;
+  const ok = alive || (()=>true);
+  box.innerHTML = '<span style="color:var(--faint);font-family:var(--mono);font-size:11px">rendering…</span>';
   try{
-    const j = await fetch('/api/runs/'+rid+'/docs').then(x=>x.json());
-    if (rid===openRunId && (j.docs||[]).length) $('mDocsTgl').hidden = false;
-  }catch{}
+    if (c.type==='answer' || c.type==='doc'){
+      const q = '/api/runs/'+rid+'/output?type='+c.type+(c.path?'&path='+encodeURIComponent(c.path):'');
+      const j = await fetch(q).then(x=>x.json());
+      if (!ok()) return;
+      box.innerHTML = (c.path?'<div class="doc-h">'+esc(c.path)+'</div>':'')
+        + '<div class="doc-md">'+mdLite(j.content||'')+'</div>';
+    } else if (c.type==='page'){
+      const q = '/api/runs/'+rid+'/output?type=page'+(c.path?'&path='+encodeURIComponent(c.path):'');
+      const j = await fetch(q).then(x=>x.json());
+      if (!ok()) return;
+      box.innerHTML = (c.path?'<div class="doc-h">'+esc(c.path)+'</div>':'')
+        + '<iframe class="doc-frame" sandbox="" srcdoc="'+escA(j.content||'')+'"></iframe>';
+    } else if (c.type==='code'){
+      box.innerHTML = '<pre class="diff">loading…</pre>';
+      const d = await fetch('/api/runs/'+rid+'/diff').then(x=>x.json());
+      if (!ok()) return;
+      const pre = box.querySelector('pre.diff'); if (!pre) return;
+      if (!d.ok){ pre.textContent = d.stat||'no worktree — diff unavailable'; return; }
+      pre.innerHTML = diffHTML(d.diff||'');
+    } else if (c.type==='file'){
+      const raw = '/api/runs/'+rid+'/file?path='+encodeURIComponent(c.path||'');
+      const isImg = /\\.(png|jpe?g|gif|webp|svg|bmp|ico|avif)$/i.test(c.path||'');
+      if (isImg){
+        box.innerHTML = '<div class="doc-h">'+esc(c.path||'')+'</div>'
+          + '<img class="oimg" src="'+escA(raw)+'" alt="'+escA(c.path||'')+'">';
+      } else {
+        const isText = /\\.(txt|md|json|csv|log|ya?ml|ini|cfg|xml|ts|js|py|sh)$/i.test(c.path||'');
+        let extra = '';
+        if (isText){
+          try{
+            const r = await fetch(raw);
+            if (ok() && r.ok){
+              const t = await r.text();
+              extra = '<pre class="diff" style="margin-top:8px">'+esc(t.slice(0,20000))+'</pre>';
+            }
+          }catch{}
+        }
+        box.innerHTML = '<div class="doc-h">'+esc(c.path||'')+'</div>'
+          + '<a class="odl" href="'+escA(raw)+'" download>↓ download</a>' + extra;
+      }
+    }
+  }catch{ box.innerHTML = '<span style="color:var(--faint)">viewer failed</span>'; }
+}
+async function openOutCard(i){
+  const c = outCards[i]; if (!c || !c.present) return;
+  const rid = openRunId;
+  showOutDetail();
+  await renderOutCardInto(rid, c, $('outDetailC'), ()=>rid===openRunId);
 }
-/* ── doc 모드 — diff 대신 렌더된 문서 산출물 ── */
-let docMode = false;
 function docsHTML(docs){
   if (!docs.length) return '<span style="color:var(--faint)">no changed docs (md/html) in this worktree</span>';
   return docs.map(d=>'<div class="doc-h">'+esc(d.path)+'</div>'
@@ -1489,25 +1784,15 @@ function docsHTML(docs){
         ? '<div class="doc-md">'+mdLite(d.content)+'</div>'
         : '<iframe class="doc-frame" sandbox="" srcdoc="'+escA(d.content)+'"></iframe>')).join('');
 }
-async function paintDocs(){
-  if (openRunId==null) return;
-  $('mDiffWrap').innerHTML = '<span style="color:var(--faint)">rendering…</span>';
-  try{
-    const d = await fetch('/api/runs/'+openRunId+'/docs').then(x=>x.json());
-    const src = d.source==='snapshot'
-      ? '<div class="doc-src">worktree gone — snapshot taken at settle</div>' : '';
-    $('mDiffWrap').innerHTML = src + docsHTML(d.docs||[]);
-  }catch{ $('mDiffWrap').textContent = 'docs failed'; }
-}
-function setDocMode(on){
-  docMode = on;
-  $('mDocsTgl').textContent = on ? 'Diff' : 'Rendered';
-  if (on) paintDocs();
-  else { $('mDiffWrap').innerHTML = '<pre class="diff" id="mDiff">loading…</pre>'; loadDiff(); }
-}
-$('mDocsTgl').addEventListener('click', ()=>setDocMode(!docMode));
-/* diff 라인 클릭 → steer 입력에 참조 인용 (정착 run 에서만 — steerRow 표시 중일 때) */
-$('mDiffWrap').addEventListener('click', (e)=>{
+/* 출력 카드 클릭 → 상세 뷰어 */
+$('outCards').addEventListener('click', (e)=>{
+  const card = e.target.closest ? e.target.closest('.ocard') : null;
+  if (!card || card.classList.contains('miss')) return;
+  openOutCard(Number(card.dataset.oi));
+});
+$('outBack').addEventListener('click', showOutCards);
+/* code 카드 diff 라인 클릭 → steer 입력에 참조 인용 (정착 run 에서만 — steerRow 표시 중일 때) */
+$('outDetail').addEventListener('click', (e)=>{
   const t = e.target.closest ? e.target.closest('.dl-line') : null;
   if (!t) return;
   if ($('steerRow').style.display === 'none') return;
@@ -1518,9 +1803,11 @@ $('mDiffWrap').addEventListener('click', (e)=>{
 });
 async function openModal(id){
   openRunId = id;
-  if (docMode){ docMode=false; $('mDocsTgl').textContent='Rendered'; $('mDiffWrap').innerHTML='<pre class="diff" id="mDiff">loading…</pre>'; }
-  $('mDocsTgl').hidden = true;
-  paintModal(); $('overlay').classList.add('open'); loadDiff();
+  outCards = [];
+  showOutCards();
+  $('mContract').hidden = true; $('mContract').innerHTML = '';
+  $('outCards').innerHTML = '<div class="ocards-empty">loading…</div>';
+  paintModal(); $('overlay').classList.add('open'); loadDiff();   // loadDiff = /outputs 로드
   // fleet 는 run 당 최근 40 이벤트만 내림 — 모달은 전체 타임라인을 다시 가져온다.
   try{
     const j = await fetch('/api/runs/'+id).then(x=>x.json());
@@ -1740,7 +2027,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')
@@ -1826,7 +2113,6 @@ $('mCompare').addEventListener('click', ()=>{
 let roomGroupId = null;               // 열려있는 그룹 id (null = 닫힘)
 const roomRunSet = new Set();         // 이 그룹에 속한 runId — WS 필터용
 let roomRuns = [];                    // 마지막 aggregate 의 runs (chips/scope hint)
-const roomExtra = [];                 // goal-level 마커(spawn/broadcast) — 피드에 섞음
 const roomTurns = [];                 // Ask 대화 턴 [{role:'you'|'coord', text}] — 읽기 전용
 let roomMode = 'work';                // 'work' | 'ask' — 방 composer 모드(스틸모드와 무관, 방 전용)
 /* run → 상태색 (chip / who) */
@@ -1845,27 +2131,103 @@ function roomRenderChips(){
     ? roomRuns.map(roomChipHTML).join('')
     : '<span style="color:var(--faint);font-family:var(--mono);font-size:11.5px">no runs yet</span>';
 }
-function roomFeedLine(who, whoStatus, text, mark){
-  return '<div class="fl'+(mark?' mark':'')+'"><span class="who" style="color:'
-    + (mark?'var(--brand)':roomStatusColor(whoStatus))+'">'+esc(who)+'</span>'
-    + '<span class="ft">'+esc(text)+'</span></div>';
-}
-function roomRenderFeed(events){
-  // run 이벤트 + goal-level 마커를 시간(id/순서)대로. 간단히: 이벤트 먼저, 마커는 append.
-  const statusOf = (rid)=>{ const r = roomRuns.find(x=>x.runId===rid); return r? r.status : 'pending'; };
-  const rows = [];
-  for (const e of (events||[])){
-    const h = humanize({ kind:e.kind, payload:e.payload });
-    if (!h) continue;
-    const list = Array.isArray(h) ? h : [h];
-    for (const x of list) rows.push(roomFeedLine('r'+e.runId, statusOf(e.runId), x.k+' · '+x.t, false));
+/* ── 수렴 콕핏(Work body) — run 하나당 결정 행. 서버 엔드포인트만 재사용(merge/steer/review/close). ──
+   접힘 head = 체크박스·상태점·rN·제목·메타·인라인[리뷰][수정][머지][클로즈]·caret.
+   펼침 body = P2 출력 카드(리뷰 peek, renderRunOutputsInto 재사용) + 수정(steer) 입력. */
+const roomSel = new Set();      // Integrate 선택된 runId
+const roomOpen = new Set();     // 펼쳐진 runId (WS 재렌더에도 유지)
+function roomDone(s){ return ['done','failed','stopped'].includes(s); }
+function roomRunRowHTML(r){
+  const s = r.status||'pending';
+  const merged = s==='merged';
+  const running = r.live || s==='running' || s==='preparing' || s==='pending';
+  const sel = roomSel.has(r.runId);
+  const open = roomOpen.has(r.runId);
+  const dotCls = merged?'merged':(running?'running':(s==='failed'?'failed':'done'));
+  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>';
+  } else if (running){
+    acts = '<div class="acts"><button class="b ghost" data-ract="open" data-rrid="'+r.runId+'">열기 · 정착 후 결정</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>'
+      + '</div>';
   }
-  for (const m of roomExtra){
-    rows.push(roomFeedLine(m.who, 'pending', m.text, true));
+  const badge = merged
+    ? '<span class="run-badge merged">merged → base</span>'
+    : (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?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>'
+    + '<span class="run-id">r'+r.runId+'</span>'
+    + '<span class="run-title">'+esc(r.title||'task '+r.taskId)+'</span>'
+    + '<span class="grow"></span>'
+    + badge
+    + '<span class="run-meta">'+meta+'</span>'
+    + acts
+    + '<span class="caret">›</span>'
+    + '</div>'
+    + '<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></div>';
+}
+function roomRenderRuns(){
+  const el = $('roomRuns');
+  if (!roomRuns.length){
+    el.innerHTML = '<div class="empty-note">no runs yet — spawn an attempt or wait for the plan to fan out</div>';
+    roomUpdateGbar(); return;
+  }
+  el.innerHTML = roomRuns.map(roomRunRowHTML).join('');
+  // 펼쳐진 행의 출력 카드 재하이드레이트
+  for (const r of roomRuns){ if (roomOpen.has(r.runId)) roomLoadRunOutputs(r.runId); }
+  roomUpdateGbar();
+}
+function roomUpdateGbar(){
+  const n = roomSel.size;
+  $('roomSelC').textContent = '☑ '+n+' selected';
+  $('roomIntegrateSel').textContent = 'Integrate 선택 ('+n+')';
+  $('roomIntegrateSel').disabled = n===0;
+}
+/* 펼친 행의 출력 카드 로드 — 모달과 같은 /outputs + renderOutCardInto 재사용(중복 없음). */
+async function roomLoadRunOutputs(rid){
+  const wrap = document.querySelector('.rout[data-rout="'+rid+'"]'); if (!wrap) return;
+  const cards = wrap.querySelector('.rout-cards');
+  cards.innerHTML = '<div class="ocards-empty">loading…</div>';
+  try{
+    const j = await fetch('/api/runs/'+rid+'/outputs').then(x=>x.json());
+    if (!roomOpen.has(rid)) return;
+    const list = j.outputs||[];
+    if (!list.length){ cards.innerHTML = '<div class="ocards-empty">no outputs yet</div>'; return; }
+    wrap.dataset.cards = JSON.stringify(list);
+    cards.innerHTML = list.map(outCardHTML).join('');
+  }catch{ cards.innerHTML = '<div class="ocards-empty">outputs failed</div>'; }
+}
+/* 워크룸 출력 카드 클릭 → 그 행 안에서 상세 뷰어(모달과 동일 렌더러). */
+function roomOpenCard(rid, i){
+  const wrap = document.querySelector('.rout[data-rout="'+rid+'"]'); if (!wrap) return;
+  const list = wrap.dataset.cards ? JSON.parse(wrap.dataset.cards) : [];
+  const c = list[i]; if (!c || !c.present) return;
+  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>';
+    wrap.appendChild(det);
   }
-  $('roomFeed').innerHTML = rows.length ? rows.join('')
-    : '<div class="empty-note">no activity yet — spawn an attempt or wait for runs to report</div>';
-  $('roomFeed').scrollTop = $('roomFeed').scrollHeight;
+  det.style.display='';
+  renderOutCardInto(rid, c, det.querySelector('.rout-body'), ()=>roomOpen.has(rid));
 }
 /* Ask 대화(읽기 전용) — you / coordinator 턴. 코디네이터 답 아래 read-only 노트. */
 function roomRenderConv(){
@@ -1901,10 +2263,11 @@ function roomRenderHint(){
   const steerable = roomRuns.filter(r=>r.steerable).length;
   $('roomHint').textContent = steerable+' steerable now · '+running+' still running';
 }
-/* feed↔conv, verbs↔send-only 를 roomMode 로 스왑. */
+/* runs(수렴 콕핏)↔conv, verbs↔send-only 를 roomMode 로 스왑. Work=결정 패널·Ask=읽기전용. */
 function roomApplyMode(){
   const ask = roomMode==='ask';
-  $('roomFeed').hidden = ask;
+  $('roomRuns').hidden = ask;
+  $('roomGbar').hidden = ask;    // 그룹 액션 바는 Work 에서만
   $('roomConv').hidden = !ask;
   $('roomVerbs').hidden = ask;
   $('roomSend').hidden = !ask;
@@ -1917,15 +2280,17 @@ function roomApplyMode(){
 }
 async function openRoom(groupId){
   roomGroupId = groupId;
-  roomExtra.length = 0; roomRunSet.clear(); roomRuns = []; roomTurns.length = 0;
+  roomRunSet.clear(); roomRuns = []; roomTurns.length = 0;
+  roomSel.clear(); roomOpen.clear();
   roomMode = 'work';
   $('roomInput').value = '';
   $('roomChips').innerHTML = '<span style="color:var(--faint);font-family:var(--mono);font-size:11.5px">loading…</span>';
-  $('roomFeed').innerHTML = '';
+  $('roomRuns').innerHTML = '';
   $('roomConv').innerHTML = '';
   $('roomTitle').textContent = 'Goal';
   $('roomCount').textContent = '';
   $('roomHint').textContent = '';
+  roomUpdateGbar();
   roomApplyMode();
   $('groupRoomOverlay').classList.add('open');
   await roomLoad();
@@ -1940,9 +2305,12 @@ async function roomLoad(){
   roomRuns = j.runs||[];
   roomRunSet.clear();
   roomRuns.forEach(r=>roomRunSet.add(r.runId));
+  // 사라진 run 은 선택/펼침에서 정리
+  for (const id of [...roomSel]) if (!roomRunSet.has(id)) roomSel.delete(id);
+  for (const id of [...roomOpen]) if (!roomRunSet.has(id)) roomOpen.delete(id);
   roomRenderChips();
   roomRenderHeaderAndHint();
-  roomRenderFeed(j.events||[]);
+  roomRenderRuns();
 }
 function closeRoom(){ roomGroupId = null; $('groupRoomOverlay').classList.remove('open'); }
 /* chip 클릭 → 그 run 을 기존 run 모달로 */
@@ -1957,6 +2325,151 @@ $('roomChips').addEventListener('click',(e)=>{
 });
 $('roomClose').addEventListener('click', closeRoom);
 $('groupRoomOverlay').addEventListener('click',(e)=>{ if(e.target===$('groupRoomOverlay')) closeRoom(); });
+/* ── 수렴 콕핏 상호작용 — 행 펼침·체크박스·인라인 액션(전부 기존 엔드포인트 재사용) ── */
+$('roomRuns').addEventListener('click', async (e)=>{
+  // 출력 카드 클릭 → 행 안 상세 뷰어
+  const card = e.target.closest ? e.target.closest('.ocard') : null;
+  if (card && !card.classList.contains('miss')){
+    const wrap = card.closest('.rout'); if (wrap){ roomOpenCard(Number(wrap.dataset.rout), Number(card.dataset.oi)); return; }
+  }
+  const back = e.target.closest ? e.target.closest('.rout-back') : null;
+  if (back){ const det = back.closest('.rout-detail'); if (det) det.style.display='none'; return; }
+  // 체크박스 → Integrate 선택 토글
+  const cb = e.target.closest ? e.target.closest('.cb') : null;
+  if (cb){
+    e.stopPropagation();
+    const id = Number(cb.dataset.rcb); if (!id) return;
+    if (roomSel.has(id)) roomSel.delete(id); else roomSel.add(id);
+    cb.innerHTML = roomSel.has(id) ? ic('check') : '';
+    cb.closest('.run').classList.toggle('sel', roomSel.has(id));
+    roomUpdateGbar();
+    return;
+  }
+  // 인라인 액션 버튼
+  const ab = e.target.closest ? e.target.closest('[data-ract]') : null;
+  if (ab){ e.stopPropagation(); await roomRunAction(ab.dataset.ract, Number(ab.dataset.rrid)); return; }
+  // head 클릭 → 펼침 토글
+  const head = e.target.closest ? e.target.closest('.run-h') : null;
+  if (head){
+    const rid = Number(head.parentElement.dataset.rrun);
+    if (roomOpen.has(rid)){ roomOpen.delete(rid); head.parentElement.classList.remove('open'); }
+    else { roomOpen.add(rid); head.parentElement.classList.add('open'); roomLoadRunOutputs(rid); }
+  }
+});
+/* 행 액션 디스패치 — merge/steer/review/close 서버 엔드포인트만. 결정 로직 재구현 없음. */
+async function roomRunAction(act, rid){
+  const r = roomRuns.find(x=>x.runId===rid); if(!r) return;
+  if (act==='open'){
+    closeRoom();
+    if (runs.has(rid)) openModal(rid);
+    else fetch('/api/runs/'+rid).then(x=>x.json()).then(d=>{ if(d.run){ runs.set(rid,{...d.run,events:d.events||[]}); openModal(rid); } }).catch(()=>{});
+    return;
+  }
+  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');
+    return;
+  }
+  if (act==='fixsend'){
+    const inp = document.querySelector('[data-rfix="'+rid+'"]'); const msg = inp ? inp.value.trim() : '';
+    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'); }
+    else { const j = await res.json().catch(()=>({})); toast('steer: '+(j.detail||res.status), 'error'); }
+    return;
+  }
+  if (act==='review'){
+    await reviewOneRun(r);
+    return;
+  }
+  if (act==='merge'){
+    const yes = await confirmUI('Merge r'+rid+' into the base branch?',
+      { sub: 'Uncommitted worktree changes are committed first. Conflicts abort automatically.', okLabel: 'Merge' });
+    if (!yes) return;
+    const res = await fetch('/api/runs/'+rid+'/merge',{method:'POST'});
+    const j = await res.json().catch(()=>({detail:'merge failed'}));
+    if (res.ok){ toast('r'+rid+' merged to base', 'ok'); await roomLoad(); hydrate(); }
+    else toast('merge: '+(j.detail||res.status), 'error');
+    return;
+  }
+  if (act==='close'){
+    const yes = await confirmUI('Close r'+rid+' task?',
+      { sub: 'Stops any live runs and removes every worktree and branch of the task.', danger:true, okLabel:'Close task' });
+    if (!yes) return;
+    const close = (force)=>fetch('/api/tasks/'+r.taskId+'/close',{method:'POST',
+      headers:{'content-type':'application/json'}, body:JSON.stringify({force})});
+    let res = await close(false);
+    if (res.status===409){
+      const j = await res.json().catch(()=>({}));
+      const risk = (j.atRisk||[]).map(a=>'r'+a.runId+' · '+a.filesChanged+' file'+(a.filesChanged>1?'s':'')).join(' · ');
+      const ok = await confirmUI('Close and delete unmerged output?',
+        { danger:true, sub: risk+' — not merged, not exported. Worktrees are deleted on close.', okLabel:'Close anyway' });
+      if (!ok) return;
+      res = await close(true);
+    }
+    if (!res.ok){ toast('close failed ('+res.status+')', 'error'); return; }
+    toast('r'+rid+' task closed', 'ok');
+    await roomLoad(); hydrate();
+    return;
+  }
+}
+/* [리뷰] — 그 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); }
+  const body = row.querySelector('.run-b');
+  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>';
+  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>'; }
+}
+/* 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 선택 · 전체 리뷰 · 그룹 클로즈(전부 기존 흐름 재사용) ── */
+$('roomIntegrateSel').addEventListener('click', async ()=>{
+  if (!roomSel.size){ toast('select settled runs with changes first', 'error'); return; }
+  // 기존 select mode + selbar + /api/integrate 재사용 — 방을 닫고 선택을 밴드 select 로 옮긴다.
+  const ids = [...roomSel].sort((a,b)=>a-b);
+  closeRoom();
+  if (!selectMode) setSelectMode(true);
+  selected.clear(); selOrder.length = 0;
+  for (const id of ids){
+    const r = runs.get(id);
+    const ok = r && ['done','failed','stopped'].includes(r.status) && (r.filesChanged||0)>0 && r.status!=='merged';
+    if (ok){ selected.add(id); selOrder.push(id); }
+  }
+  $('selCnt').textContent = selected.size + ' selected';
+  render();
+  if (!selected.size) toast('selected runs are no longer integratable', 'error');
+  else toast(selected.size+' run(s) staged — press Integrate in the bar', 'ok');
+});
+$('roomReviewAll').addEventListener('click', async ()=>{
+  // 정착·변경 있는 run 을 위→아래로 리뷰(reviewTask 루프). dry/real 은 전역 토글.
+  const targets = roomRuns.filter(r=>roomDone(r.status) && (r.filesChanged||0)>0 && r.status!=='merged');
+  if (!targets.length){ toast('no settled runs with changes to review', 'error'); return; }
+  const btn = $('roomReviewAll'); btn.disabled = true;
+  try{ for (const r of targets) await reviewOneRun(r); }
+  finally { btn.disabled = false; }
+});
+$('roomGroupClose').addEventListener('click', async ()=>{
+  if (roomGroupId==null) return;
+  const g = roomGroupId;
+  await closeGroup(g);       // 기존 그룹 클로즈(guard·atRisk 집계 재사용)
+  if (roomGroupId===g) await roomLoad();
+});
 /* ＋ New attempt — 같은 그룹에 새 시도 발사 (현재 dry/real 토글 반영) */
 $('roomNew').addEventListener('click', async ()=>{
   if (roomGroupId==null) return;
@@ -1970,9 +2483,9 @@ $('roomNew').addEventListener('click', async ()=>{
     const j = await res.json().catch(()=>({}));
     if (res.ok){
       $('roomInput').value='';
-      (j.tasks||[]).forEach(t=>{ roomExtra.push({ who:'goal ＋', text:'new attempt r'+t.runId+' — '+prompt.slice(0,60) }); roomRunSet.add(t.runId); });
+      (j.tasks||[]).forEach(t=>{ roomRunSet.add(t.runId); });
       toast((j.tasks||[]).length+' attempt(s) launched'+(real?'':' (dry)'), 'ok');
-      roomRenderFeed([]); await roomLoad(); hydrate();
+      await roomLoad(); hydrate();
     } else toast('spawn: '+(j.error||res.status), 'error');
   } finally { btn.disabled = false; }
 });
@@ -1988,9 +2501,8 @@ $('roomBroadcast').addEventListener('click', async ()=>{
     const j = await res.json().catch(()=>({}));
     if (res.ok){
       $('roomInput').value='';
-      roomExtra.push({ who:'goal →', text:message.slice(0,80)+'  ('+j.detail+')' });
       toast('broadcast: '+j.detail, (j.skipped&&j.skipped.length)?undefined:'ok');
-      roomRenderFeed([]); await roomLoad();
+      await roomLoad();
     } else toast('broadcast: '+(j.error||res.status), 'error');
   } finally { btn.disabled = false; }
 });
@@ -2056,18 +2568,9 @@ function roomOnWS(ev){
   if (ev.type==='run'){
     const rid = ev.runId ?? ev.id;
     if (!roomRunSet.has(rid)) return;   // 이 방 소속만
-    roomLoad();                          // 상태·steerable 재계산은 aggregate 로 (정확)
-  } else if (ev.type==='event'){
-    if (!roomRunSet.has(ev.runId)) return;
-    const h = humanize({ kind:ev.kind, payload:ev.payload });
-    if (h){
-      const r = roomRuns.find(x=>x.runId===ev.runId);
-      const list = Array.isArray(h) ? h : [h];
-      const frag = list.map(x=>roomFeedLine('r'+ev.runId, r?r.status:'pending', x.k+' · '+x.t, false)).join('');
-      $('roomFeed').insertAdjacentHTML('beforeend', frag);
-      $('roomFeed').scrollTop = $('roomFeed').scrollHeight;
-    }
+    roomLoad();                          // 상태·steerable 재계산 → 결정 행 재렌더(aggregate, 정확)
   }
+  // event 티커는 수렴 콕핏에선 행 안 출력 카드로 대체 — 상태 변화는 run 이벤트가 재렌더한다.
 }
 /* ── terminal — 초기크기 접속·자동 재연결(백오프)·unicode11·CJK 폰트 ── */
@@ -2269,15 +2772,29 @@ $('taskForm').addEventListener('submit', async (e)=>{
   const title = $('taskTitle').value.trim();
   if (!repoId || !title){ toast(!repoId?'register a repo first':'task title required', 'error'); return; }
   const capId = Number($('taskCapture').value) || undefined;
+  const outputs = selectedOutputs();
   const t = await fetch('/api/tasks',{method:'POST',headers:{'content-type':'application/json'},
-    body:JSON.stringify({repoId,title,prompt:$('taskPrompt').value,designCaptureId:capId})}).then(x=>x.json());
+    body:JSON.stringify({repoId,title,prompt:$('taskPrompt').value,designCaptureId:capId,outputs})}).then(x=>x.json());
   if (!t.ok){ toast('task create failed', 'error'); return; }
   tasks.set(t.task.id, t.task);
   const model = $('taskModel').value.trim();
   await fetch('/api/tasks/'+t.task.id+'/run',{method:'POST',headers:{'content-type':'application/json'},
     body:JSON.stringify({count:Number($('taskCount').value)||1, real: $('taskReal').checked, agent: selAgent, model})});
   if (model) rememberModel(model);
-  $('taskTitle').value=''; $('taskPrompt').value='';
+  $('taskTitle').value=''; $('taskPrompt').value=''; clearOutputs();
+});
+/* ── deliverable 계약 칩 — 선택된 타입 배열을 tasks.outputs 로 보낸다(기본=빈=오늘의 동작) ── */
+const OUTPUT_ORDER = ['answer','code','doc','page','file'];
+function selectedOutputs(){
+  const on = new Set(Array.from(document.querySelectorAll('#taskOutputs .ochip.on')).map(b=>b.dataset.out));
+  return OUTPUT_ORDER.filter(t=>on.has(t));
+}
+function clearOutputs(){ document.querySelectorAll('#taskOutputs .ochip.on').forEach(b=>b.classList.remove('on')); }
+document.querySelectorAll('#taskOutputs .ochip').forEach(b=>{
+  b.addEventListener('click', ()=>{
+    const on = b.classList.toggle('on');
+    b.setAttribute('aria-pressed', on ? 'true' : 'false');
+  });
 });
 /* ── model 최근값 기억(기기별, 최대 5) ── */