npm - coxpit - Versions diffs - 6.1.0 → 6.2.0 - Mend

coxpit 6.1.0 → 6.2.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 (4) hide show

package/package.json CHANGED Viewed

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

package/src/board.ts CHANGED Viewed

@@ -1,6 +1,7 @@
 // 데몬이 서빙하는 단일 페이지 플릿 콘솔(빌드 스텝 0, 자가완결).
 // /api/fleet 로 하이드레이트 → /ws 구독 델타 → run 상세(타임라인·diff·터미널)·비교/머지.
 import { ICON_SPRITE, ICON_CSS, ICON_JS_HELPER } from './icons.js';
+import { HUMANIZE_JS } from './humanize';
 export const BOARD_HTML = /* html */ `<!doctype html>
 <html lang="en">
@@ -1479,64 +1480,7 @@ $('cfmOk').addEventListener('click', ()=>cfmClose(true));
 $('cfmCancel').addEventListener('click', ()=>cfmClose(false));
 $('cfmOverlay').addEventListener('click',(e)=>{ if(e.target===$('cfmOverlay')) cfmClose(false); });
-/* 이벤트 인간화 — JSON 원문 대신 사람이 읽는 한 줄로. null = 표시 생략(노이즈). */
-function humanize(e){
-  const kind = e.kind, payload = e.payload;
-  if (kind === 'rate_limit_event') return null;
-  if (kind === 'steer') return { k:'steer', t:'→ '+payload };
-  if (kind === 'ask') return { k:'ask', t:'? '+payload };
-  if (kind === 'sync') return { k:'sync', t:payload };
-  if (kind === 'export'){ try{ const o=JSON.parse(payload); return { k:'export', t:o.copied+' file(s) → '+o.dest }; }catch{ return { k:'export', t:payload }; } }
-  if (kind === 'pr') return { k:'pr', t:payload };
-  if (kind === 'stderr') return { k:'stderr', t:payload };
-  try{
-    const o = JSON.parse(payload);
-    if (o.type === 'system'){
-      if (o.subtype === 'init' || !o.subtype) return { k:'session',
-        t:'started'+(o.model?' · '+String(o.model).replace(/\\u001b\\[[0-9;]*m/g,'')
-                                                  .replace(/\\x1b\\[[0-9;]*m/g,'') : '') };
-      if (o.subtype === 'permission_denied') return { k:'denied', t:'⛔ '+(o.tool_name||o.tool||'tool use')+' blocked — attach the Terminal to approve, or widen COXPIT_AGENT_PERM' };
-      return null; // thinking_tokens 등 스트림 잡음
-    }
-    if (o.type === 'user') return null; // tool 결과 회신 — 노이즈
-    if (o.type === 'assistant' && o.message){
-      const parts = [];
-      for (const x of (o.message.content||[])){
-        if (x.type === 'text' && x.text) parts.push({ k:'said', t:x.text });
-        else if (x.type === 'tool_use'){
-          const i = x.input || {};
-          const arg = i.file_path || i.command || i.path || i.pattern || '';
-          parts.push({ k:'tool', t:'▸ '+x.name+(arg?' — '+String(arg).split('/').slice(-2).join('/').slice(0,60):'') });
-        }
-      }
-      return parts.length ? parts : null;
-    }
-    if (o.type === 'assistant' && o.text) return { k:'said', t:o.text };
-    if (o.type === 'result') return { k:'done', t:o.result || 'finished' };
-    if (kind === 'meta' && o.subtask) return { k:'swarm', t:'↳ spawned task #'+o.subtask+' — '+String(o.title||'').slice(0,60)+' ('+((o.runs||[]).map(x=>'r'+x).join(' '))+')' };
-    if (kind === 'meta') return { k:'start', t:'worktree '+String(o.worktree||'').split('/').slice(-2).join('/') };
-    return { k:kind, t:payload.slice(0,140) };
-  }catch{
-    // 파싱 실패(과거에 잘려 저장된 이벤트 등) — JSON 잔해를 그대로 보여주지 않는다:
-    // text 조각만 구제하고, 없으면 생략.
-    if (payload.trim().startsWith('{')){
-      const texts = [];
-      const re = /"text":"((?:[^"\\\\]|\\\\.)*)"/g; let m;
-      while ((m = re.exec(payload)) && texts.length < 2) texts.push(m[1].replace(/\\\\n/g,' ').slice(0,140));
-      return texts.length ? { k:'said', t:texts.join(' · ') } : null;
-    }
-    return { k:kind, t:payload };
-  }
-}
-function humanLines(events){
-  const out = [];
-  for (const e of (events||[])){
-    const h = humanize(e);
-    if (!h) continue;
-    if (Array.isArray(h)) out.push(...h); else out.push(h);
-  }
-  return out;
-}
+${HUMANIZE_JS}
 function summarize(kind, payload){
   const h = humanize({kind, payload});
   if (!h) return '';

package/src/cockpit.ts CHANGED Viewed

@@ -1,6 +1,8 @@
 // Cockpit — 터미널 우선 셸 (병행 개발, /cockpit). board.ts 처럼 자가완결 단일 HTML(빌드 0).
 // 백엔드(server 라우트·term.ts·orchestrator)는 보드와 전부 공유. Phase 5에서 데스크톱 기본을 여기로 플립.
 // Phase 2 = 워크스페이스 트리(/api/fleet 라이브) + 페인 그리드 터미널(오토타일=창분할, 각 페인 /ws/term attach).
+import { HUMANIZE_JS } from './humanize';
 export const COCKPIT_HTML = /* html */ `<!doctype html>
 <html lang="en">
 <head>
@@ -293,6 +295,11 @@ export const COCKPIT_HTML = /* html */ `<!doctype html>
   .pick-row .ic{width:14px;text-align:center;color:var(--faint)}
   .pick-row.up .ic{color:var(--muted)}
   .pick-row .rp{margin-left:auto;font-size:9px;color:var(--brand);border:1px solid rgba(78,201,176,.3);border-radius:999px;padding:0 6px}
+  /* v5.28 G5 — 폴더 행 안의 인라인 액션(Register · Start here). 보드의 .btn 을 끌어오지 않는다(토큰만). */
+  .pick-row .pbtn{margin-left:auto;flex:none;font-family:var(--mono);font-size:10.5px;line-height:1;color:var(--muted);
+    background:none;border:1px solid var(--line-hi);border-radius:5px;padding:4px 7px;cursor:pointer}
+  .pick-row .rp+.pbtn{margin-left:8px}
+  .pick-row .pbtn:hover{color:var(--brand);background:var(--surface2)}
   .pick-f{display:flex;align-items:center;gap:10px;padding:12px 15px;border-top:1px solid var(--line)}
   .pick-f .go{margin-left:auto;font-family:var(--mono);font-size:12px;font-weight:600;color:var(--brand-ink);background:var(--brand);border:none;border-radius:8px;padding:9px 15px;cursor:pointer}
   .pick-f .home{font-family:var(--mono);font-size:11px;color:var(--muted);background:none;border:1px solid var(--line);border-radius:7px;padding:7px 11px;cursor:pointer}
@@ -335,23 +342,77 @@ export const COCKPIT_HTML = /* html */ `<!doctype html>
   .leaf-h .qr{display:inline-flex;align-items:center;gap:3px;flex:none}
   .leaf-h .qr:empty{display:none}
   /* 빠른 답은 대기의 색(--blocked)을 빌린다 — 칩·미머지 표식과 같은 주의색, 새 색 없음 */
-  .leaf-h .qbtn{font-family:var(--mono);font-size:10px;color:var(--blocked);background:none;
+  /* (v5.28 E — 같은 알약이 활동 페인 액션바에도 그대로 선다. 규칙은 안 바꾸고 선택자만 넓힌다) */
+  .act-bar .qbtn,.leaf-h .qbtn{font-family:var(--mono);font-size:10px;color:var(--blocked);background:none;
     border:1px solid var(--line-hi);border-radius:999px;padding:1px 7px;cursor:pointer;white-space:nowrap}
-  .leaf-h .qbtn:hover,.leaf-h .qbtn:focus-visible{color:var(--ink);border-color:var(--blocked)}
-  .leaf-h .qbtn.qadd{color:var(--faint);padding:1px 6px}
+  .act-bar .qbtn:hover,.act-bar .qbtn:focus-visible,.leaf-h .qbtn:hover,.leaf-h .qbtn:focus-visible{color:var(--ink);border-color:var(--blocked)}
+  .act-bar .qbtn.qadd,.leaf-h .qbtn.qadd{color:var(--faint);padding:1px 6px}
   /* 시작·이어서는 부름이 아니라 제안이라 더 조용하다(--muted 위 --line) */
   .leaf-h .sbtn{font-family:var(--mono);font-size:10px;color:var(--muted);background:none;
     border:1px solid var(--line);border-radius:999px;padding:1px 7px;cursor:pointer;white-space:nowrap}
   .leaf-h .sbtn:hover,.leaf-h .sbtn:focus-visible{color:var(--brand);border-color:var(--line-hi)}
+  /* ── v5.28 E — 활동 페인(Activity) ──
+     에이전트 run 을 누르면 빈 worktree 셸이 아니라 **지금 하고 있는 일**이 열린다.
+     읽는 자리라 조용하다: 색을 갖는 곳은 상태 칩과 "지금" 한 줄뿐이고, 둘 다 이미 있는 토큰이다.
+     터미널은 사라지지 않는다 — 액션바 첫 버튼이 그 자리로 되돌린다(E4). */
+  .act-host{flex:1;min-height:0;min-width:0;display:flex;flex-direction:column;background:var(--bg);font-family:var(--mono);font-size:11.5px}
+  .act-h{display:flex;align-items:center;gap:8px;flex:none;padding:9px 12px 8px;border-bottom:1px solid var(--line);flex-wrap:wrap}
+  .act-h .anm{color:var(--ink);font-size:12.5px;white-space:nowrap}
+  .act-h .apath{color:var(--faint);flex:1;min-width:60px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
+  .act-h .ameta{color:var(--faint);font-size:10.5px;white-space:nowrap}
+  /* 상태 칩 — Part A 의 네 상태를 **같은 토큰**으로(working/waiting/idle/exited). 새 색 없음.
+     상태가 없으면 :empty 가 자리를 지운다 — 없는 상태를 지어내지 않는다는 규칙의 표면 쪽 절반. */
+  .act-chip{font-size:9px;text-transform:uppercase;letter-spacing:.04em;padding:1px 7px;border-radius:999px;
+    border:1px solid currentColor;white-space:nowrap}
+  .act-chip:empty{display:none}
+  .act-chip.as-working{color:var(--running)}
+  .act-chip.as-waiting{color:var(--blocked)}
+  .act-chip.as-idle{color:var(--faint)}
+  .act-chip.as-exited{color:var(--done)}
+  /* "지금" 한 줄 — 가장 알고 싶은 답이라 이 페인에서 제일 크다 */
+  .act-now{flex:none;padding:10px 12px;color:var(--brand);font-size:15px;border-bottom:1px solid var(--line);
+    white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
+  .act-tlwrap{flex:1;min-height:0;position:relative;display:flex}
+  .act-tl{flex:1;min-height:0;overflow:auto;padding:8px 12px;line-height:1.55}
+  .act-l{display:flex;gap:9px;padding:1px 0}
+  .act-l .ak{color:var(--faint);flex:none;min-width:44px;text-align:right}
+  .act-l .at{color:var(--muted);white-space:pre-wrap;word-break:break-word;min-width:0}
+  .act-empty{color:var(--faint);padding:8px 12px}
+  /* 꼬리에 붙어 있을 때만 따라 내려간다 — 위로 올렸으면 멈추고, 돌아갈 길을 하나 띄운다 */
+  .act-jump{position:absolute;right:16px;bottom:10px;font-family:var(--mono);font-size:10px;
+    color:var(--brand-ink);background:var(--brand);border:none;border-radius:999px;padding:3px 10px;cursor:pointer}
+  .act-jump[hidden]{display:none}
+  .act-chg{flex:none;border-top:1px solid var(--line);display:flex;flex-direction:column;min-height:0}
+  .act-chg-h{display:flex;align-items:center;gap:8px;padding:6px 12px;color:var(--muted)}
+  .act-chg-h .afiles{color:var(--faint)}
+  .act-chg .rv-diff{max-height:210px;border-top:1px solid var(--line)}
+  .act-bar{flex:none;display:flex;align-items:center;gap:6px;flex-wrap:wrap;padding:8px 12px;
+    border-top:1px solid var(--line);background:var(--surface)}
+  /* .abtn = 활동 뷰 버튼. 툴바 .tc-btn 과 같은 치수(radius 6·pad 3/8)로 맞춘다. 셀렉터는 bare —
+     .act-chg-h 의 '변경' 버튼도 같은 규칙을 받아야 한다(전엔 .act-bar 스코프라 그 버튼이 흰 네이티브였다). */
+  .abtn{font-family:var(--mono);font-size:11px;color:var(--muted);background:none;
+    border:1px solid var(--line);border-radius:6px;padding:3px 8px;cursor:pointer;white-space:nowrap}
+  .abtn:hover:not([disabled]),.abtn:focus-visible{color:var(--ink);border-color:var(--line-hi)}
+  .abtn.prim{color:var(--brand-ink);background:var(--brand);border-color:var(--brand)}
+  .act-bar .qr{display:inline-flex;align-items:center;gap:3px}
+  .act-bar .qr:empty{display:none}
+  /* Activity | Terminal — 요청바의 .modes/.mode 세그를 페인 헤더 크기로만 줄여 쓴다(새 컴포넌트 없음) */
+  .leaf-h .modes{padding:1px;border-radius:6px;flex:none}
+  .leaf-h .mode{font-size:9.5px;padding:1px 6px}
   .leaf-h .bsel{display:none;color:var(--faint);border:none;background:none;cursor:pointer;font-size:11px;padding:0 2px}
   body.bcastmode .leaf-h .bsel{display:inline-block}   /* 브로드캐스트 모드에서만 대상 선택 토글 노출 */
   .leaf-h .bsel.on{color:var(--open)}
   .leaf-h .lock{color:var(--faint);border:none;background:none;cursor:pointer;font-size:12px;padding:0 2px}
   .leaf-h .lock:hover{color:var(--brand)}
   .leaf-h .sendkey{font:inherit;font-family:var(--mono);font-size:11px;color:var(--ink);background:var(--panel);border:1px solid var(--brand);border-radius:5px;padding:1px 6px;width:150px;outline:none}
-  .lbl .lnk{color:var(--brand);cursor:pointer;font-size:10px;letter-spacing:0;text-transform:none}
-  /* 섹션 라벨에 액션이 둘 이상이면 한 묶음으로 — 양쪽 끝으로 흩어지지 않게(.tact+.tact 와 같은 이유) */
-  .lbl .lacts{display:flex;align-items:center;gap:10px}
+  /* 섹션 라벨에 액션이 둘 이상이면 한 묶음으로 — 양쪽 끝으로 흩어지지 않게(.tact+.tact 와 같은 이유).
+     min-width:0 로 flex 아이템이 필요하면 줄어들 수 있게(넘칠 땐 각 라벨은 nowrap 이라 통째로 유지) */
+  .lbl .lacts{display:flex;align-items:center;gap:10px;min-width:0}
+  /* v5.28 F1/G — 섹션 헤더의 ⋯. repo 행 .tmore 와 같은 모양·같은 메뉴(#rowMenu)를 쓴다.
+     헤더는 이름과 ⋯ 하나뿐이고(Workspace·Scratch·Projects 모두), 액션은 그 뒤에 산다 */
+  .lbl .tmore{font-family:var(--mono);font-size:10.5px;line-height:1;color:var(--faint);
+    background:none;border:none;border-radius:5px;padding:3px 5px;cursor:pointer}
+  .lbl .tmore:hover,.lbl .tmore[aria-expanded="true"]{color:var(--brand);background:var(--surface2)}
   /* v6.0 S1 — Scratch 안내문은 제거함(의뢰자 요청 2026-09-17). .tree-note 미사용 */
   .tnode.session{padding-left:20px;cursor:pointer} .tnode.session:hover{background:var(--surface)}
   .tnode.session.open{background:var(--brand-dim);color:var(--ink);box-shadow:inset 0 0 0 1px rgba(78,201,176,.22)}
@@ -524,8 +585,9 @@ export const COCKPIT_HTML = /* html */ `<!doctype html>
   <div class="right">
     <span class="ver" id="ver" title="로드된 cockpit 버전 (캐시 확인용)">v__COXPIT_VER__</span>
     <button type="button" class="waitchip" id="waitChip" hidden title="입력을 기다리는 에이전트 — 클릭하면 차례로 그 터미널로">◔ <span id="waitN">0</span></button>
+    <span class="ws" id="ws"><span class="dot"></span><span id="wstext" class="b-txt">connecting</span></span>
     <div class="apwrap" id="apWrap">
-      <button type="button" class="toggle" id="attnBtn" aria-haspopup="true" aria-expanded="false" title="알림 — 소리 · 브라우저 알림 · 울릴 전이">◎</button>
+      <button type="button" class="toggle" id="topMore" data-menu="top" aria-haspopup="menu" aria-expanded="false" title="더 보기 — 시크릿(env 주입) · 알림">⋯</button>
       <div class="apop" id="attnPop" hidden role="group" aria-label="알림">
         <div class="lbl"><span>알림</span></div>
         <label class="rchk" title="대기·완료 전이에 짧은 신호음"><input type="checkbox" id="attnSound" /> 소리</label>
@@ -538,8 +600,6 @@ export const COCKPIT_HTML = /* html */ `<!doctype html>
         <div class="apop-note">전부 기본 꺼짐. 보고 있는 탭은 자신을 울리지 않습니다.</div>
       </div>
     </div>
-    <span class="ws" id="ws"><span class="dot"></span><span id="wstext" class="b-txt">connecting</span></span>
-    <button type="button" class="toggle" id="secretsBtn" title="시크릿(API 키) 관리 — 세션에 env 로 주입">∗<span class="b-txt"> Secrets</span></button>
     <a class="toggle" href="/" title="보드(모니터) 뷰로">←<span class="b-txt"> Board</span></a>
   </div>
 </header>
@@ -547,7 +607,7 @@ export const COCKPIT_HTML = /* html */ `<!doctype html>
 <div class="scrim" id="scrim"></div>
 <div class="layout" id="layout">
   <aside class="rail" id="rail">
-    <div class="lbl"><span>Workspace</span><span class="lacts"><span class="lnk" id="wtBtn" title="worktree 회수 — 끝난 run 이 남긴 .coxpit-worktrees 폴더의 총량을 보고 되찾습니다(미머지 산출물은 표시만 하고 미리 고르지 않습니다)">▤ worktree</span><span class="lnk" id="reapBtn" title="고아 터미널 — run 기록이 없는 coxpit-r* tmux 세션을 찾아 정리합니다(유지보수: 보드의 Reclaim 과 같은 가족)">↻ 고아 터미널</span><span id="machName" style="color:var(--faint)">local</span></span></div>
+    <div class="lbl"><span>Workspace</span><span class="lacts"><button type="button" class="tmore" id="wsMore" data-menu="ws" aria-haspopup="menu" aria-expanded="false" title="유지보수 — worktree 회수 · 고아 tmux 세션 정리">⋯</button></span></div>
     <div id="tree"></div>
     <div class="railfoot">클릭한 run·세션은 <b>탭</b>으로 열립니다 · split 으로 페인을 나란히 배치</div>
   </aside>
@@ -556,13 +616,13 @@ export const COCKPIT_HTML = /* html */ `<!doctype html>
     <div class="tabbar">
       <div class="tabs" id="tabs"></div>
       <div class="tabctl">
-        <button class="tc-btn" id="splitRow" title="세로 분할 — 포커스 페인을 좌우로" disabled>▐ split</button>
-        <button class="tc-btn" id="splitCol" title="가로 분할 — 포커스 페인을 상하로" disabled>▬ split</button>
+        <button class="tc-btn" id="splitRow" title="세로 분할 — 포커스 페인을 좌우로" disabled>▐<span class="b-txt"> Split</span></button>
+        <button class="tc-btn" id="splitCol" title="가로 분할 — 포커스 페인을 상하로" disabled>▬<span class="b-txt"> Split</span></button>
         <button class="tc-btn session" id="sessionBtn" title="자유 세션(폴더 지정 터미널) 열기">＋<span class="b-txt"> Session</span></button>
         <button class="tc-btn" id="fileBtn" title="파일 보기 — md·html·pdf·이미지·텍스트 뷰어(터미널 옆 페인)">▤<span class="b-txt"> File</span></button>
-        <button class="tc-btn" id="attachBtn" title="파일 첨부 — 포커스한 터미널 폴더로 업로드 + 경로 삽입 (드롭도 가능)">↥<span class="b-txt"> 첨부</span></button>
+        <button class="tc-btn" id="attachBtn" title="파일 첨부 — 포커스한 터미널 폴더로 업로드 + 경로 삽입 (드롭도 가능)">↥<span class="b-txt"> Attach</span></button>
         <button class="tc-btn" id="focusBtn" title="포커스 모드 — 트리·요청바 숨기고 페인만 (⌘.)">◱<span class="b-txt"> Focus</span></button>
-        <button class="tc-btn" id="closeBtn" title="포커스 페인 닫기(탭은 유지)" disabled>×<span class="b-txt"> pane</span></button>
+        <button class="tc-btn" id="closeBtn" title="포커스 페인 닫기(탭은 유지)" disabled>×<span class="b-txt"> Pane</span></button>
       </div>
     </div>
     <div class="panes" id="panes"></div>
@@ -655,6 +715,21 @@ export const COCKPIT_HTML = /* html */ `<!doctype html>
   </div>
 </div>
+<div class="modal" id="projModal">
+  <div class="pick" style="width:min(560px,92vw)">
+    <div class="pick-h"><span class="t">＋ Add project</span><button class="x" id="projClose" title="닫기">×</button></div>
+    <div class="pick-path" id="projPath">…</div>
+    <div class="sheet-note">폴더를 눌러 들어갑니다 — <b>경로를 칠 일은 없습니다</b>. git 폴더는 <b>Register</b>(목록에 올리기만 — 디스크의 파일은 손대지 않습니다), <b>빈 폴더</b>는 <b>Start here</b>(빈 초기 커밋 하나를 심고 등록합니다). <b>파일이 있는 폴더에는 아무것도 심지 않습니다.</b></div>
+    <div class="pick-list" id="projList"></div>
+    <div class="sheet-err" id="projErr" hidden></div>
+    <div class="pick-f">
+      <button class="home" id="projHome" title="홈으로">⌂ home</button>
+      <span id="projHint" style="flex:1;font-size:11px;color:var(--faint)">…</span>
+      <button class="go" id="projRegHere" hidden>Register this folder</button>
+    </div>
+  </div>
+</div>
 <div class="modal" id="workModal">
   <div class="pick" style="width:min(460px,92vw)">
     <div class="pick-h"><span class="t">새 작업</span><button class="x" id="workClose" title="닫기">×</button></div>
@@ -756,7 +831,7 @@ export const COCKPIT_HTML = /* html */ `<!doctype html>
 <div class="modal" id="reapModal">
   <div class="pick" style="width:min(560px,92vw)">
-    <div class="pick-h"><span class="t">↻ 고아 터미널</span><button class="x" id="reapClose" title="닫기">×</button></div>
+    <div class="pick-h"><span class="t">↻ Orphans</span><button class="x" id="reapClose" title="닫기">×</button></div>
     <div class="sheet-note">run 기록이 사라졌는데 남아 있는 <b>coxpit-r* tmux 세션</b>들입니다 — <b>살아 있는 run 의 세션은 여기 오르지 않습니다</b>. 빈 셸만 미리 체크했고, <b>무언가 돌고 있는 세션은 표시만 하고 절대 미리 고르지 않습니다</b>. 종료되는 것은 터미널뿐, 폴더·파일은 그대로입니다.</div>
     <div class="pick-list" id="reapList"></div>
     <div class="pick-f">
@@ -768,7 +843,7 @@ export const COCKPIT_HTML = /* html */ `<!doctype html>
 <div class="modal" id="wtModal">
   <div class="pick" style="width:min(600px,92vw)">
-    <div class="pick-h"><span class="t">▤ worktree 회수</span><button class="x" id="wtClose" title="닫기">×</button></div>
+    <div class="pick-h"><span class="t">▤ Reclaim worktrees</span><button class="x" id="wtClose" title="닫기">×</button></div>
     <div class="pick-path" id="wtTotal">…</div>
     <div class="sheet-note">끝난 run 이 남긴 <b>격리 worktree</b>입니다 — 하나에 node_modules 가 통째로 들어 있어 수백 MB씩 쌓입니다. <b>돌고 있는 run 은 여기 오르지 않습니다.</b> 머지됐거나 export·PR 로 빠져나간 것은 미리 체크했고, <b>아직 아무 데도 없는 변경(미머지)은 표시만 하고 절대 미리 고르지 않습니다</b> — 그 worktree 가 <b>유일한 사본</b>이라 지우면 그 변경은 사라집니다. repo 체크아웃과 그 파일은 그대로입니다.</div>
     <div class="pick-list" id="wtList"></div>
@@ -942,6 +1017,7 @@ export const COCKPIT_HTML = /* html */ `<!doctype html>
     var row=$('tree').querySelector('.tnode[data-run="'+runId+'"] .st');
     if (row){ var r=runById[runId]; row.className='st '+((r&&r.status)||'')+(cls?' '+cls:''); }
     paintPaneStrip(runId);   // 페인 헤더 스트립도 같은 표적 칠하기 — waiting 이면 빠른 답, 없으면 시작/이어서(C1·C2)
+    paintActivity(runId);    // 열려 있는 활동 페인의 상태 칩·"지금" 줄·타임라인도 그 자리만(E3)
     updateWaitChip();
     raiseAttention(runId, prev, state);   // 점·칩은 항상 켜져 있고, 소리/알림만 취향을 탄다
   }
@@ -1025,16 +1101,18 @@ export const COCKPIT_HTML = /* html */ `<!doctype html>
     $('attnSound').checked = attn.sound;
     $('attnNotify').checked = attn.notify;
     Object.keys(AT_ON).forEach(function(k){ $(AT_ON[k]).classList.toggle('on', attn.on===k); });
-    $('attnBtn').classList.toggle('on', attn.sound||attn.notify);
+    // v5.28 G4 — 팝오버의 주인은 이제 상단바 ⋯ 다. 무언가 켜져 있으면 그 ⋯ 가 액센트를 든다(켜짐은 헤더에서 보여야 한다).
+    $('topMore').classList.toggle('on', attn.sound||attn.notify);
   }
+  // 판 자체는 그대로다(체크박스·세그·닫기 배선 전부) — 여는 손잡이만 상단바 ⋯ 메뉴로 옮겼다.
+  // #apWrap 안에 ⋯ 가 그대로 있으므로 앵커(position:absolute)도, 바깥클릭 가드도 예전 그대로 성립한다.
   function setAttnPop(open){
     $('attnPop').hidden = !open;
-    $('attnBtn').setAttribute('aria-expanded', open?'true':'false');
+    $('topMore').setAttribute('aria-expanded', open?'true':'false');
     if (open) $('attnSound').focus();   // 키보드로 열어도 바로 첫 행에 선다
   }
-  $('attnBtn').addEventListener('click', function(e){ e.stopPropagation(); setAttnPop($('attnPop').hidden); });
   document.addEventListener('click', function(e){ if(!$('attnPop').hidden && !$('apWrap').contains(e.target)) setAttnPop(false); });
-  document.addEventListener('keydown', function(e){ if(e.key==='Escape' && !$('attnPop').hidden){ e.preventDefault(); setAttnPop(false); $('attnBtn').focus(); } });
+  document.addEventListener('keydown', function(e){ if(e.key==='Escape' && !$('attnPop').hidden){ e.preventDefault(); setAttnPop(false); $('topMore').focus(); } });
   $('apWrap').addEventListener('focusout', function(){
     setTimeout(function(){ if(!$('apWrap').contains(document.activeElement)) setAttnPop(false); }, 0);
   });
@@ -1064,7 +1142,8 @@ export const COCKPIT_HTML = /* html */ `<!doctype html>
       (d.runs||[]).forEach(function(r){ runById[r.id]=r; });
       (d.tasks||[]).forEach(function(t){ taskById[t.id]=t; });
       (d.repos||[]).forEach(function(r){ repoById[r.id]=r; });
-      if (d.machines && d.machines[0]) { $('mach').textContent = d.machines[0].slug; $('machName').textContent = d.machines[0].slug; }
+      // 기계 이름은 위 칩(#mach) 한 곳에만 산다 — v5.28 F1 에서 Workspace 헤더의 사본은 걷어냈다
+      if (d.machines && d.machines[0]) { $('mach').textContent = d.machines[0].slug; }
       // 에이전트 상태 씨앗 — 갓 뜬(또는 재연결한) 코크핏이 다음 델타를 기다리지 않게. 맵은 서버가 준 것으로 통째 교체한다
       // (터미널이 떨어진 run 은 서버 맵에서 빠지므로 여기서 자연히 사라진다).
       agentState={}; var asm=d.agentStates||{};
@@ -1128,9 +1207,10 @@ export const COCKPIT_HTML = /* html */ `<!doctype html>
     // ── SCRATCH (자유 세션 = 아직 프로젝트가 아닌 것들) ──
     // v6.0 S1: 데이터는 그대로(kind='sessions') — 바뀐 건 이름과 어포던스다. 여기서 바로
     // 정리(S1b)하고, 여기서 바로 프로젝트로 졸업(S2)시킨다. 어지러워지는 자리에서 치울 수 있어야 한다.
+    // v5.28 G2: 헤더는 이름과 ⋯ 하나다 — 두 액션(＋ Session · Tidy…)은 그 뒤에 살고, 하는 일은 그대로다.
     html += '<div class="lbl"><span>Scratch</span><span class="lacts">'
-      + '<span class="lnk" data-scrub="1" title="정리 — 터미널이 없는 세션을 한 번에 지웁니다(폴더는 보존)">정리…</span>'
-      + '<span class="lnk" data-newsession="1">＋ 새 세션</span></span></div>';
+      + '<button type="button" class="tmore" data-menu="scratch" aria-haspopup="menu" aria-expanded="false"'
+      + ' title="Scratch — 새 세션(폴더 지정) · 정리(터미널 없는 세션 삭제, 폴더는 보존)">⋯</button></span></div>';
     if (sessRuns.length){
       sessRuns.forEach(function(s){
         var r=s.run; var open = tabs[r.id] ? ' open' : '';
@@ -1143,11 +1223,14 @@ export const COCKPIT_HTML = /* html */ `<!doctype html>
           + '<button class="del" data-delsession="'+r.id+'" title="세션 삭제 — 터미널만 종료, 폴더·파일은 보존">×</button></div>';
       });
     } else {
-      html += '<div class="tnode empty" style="padding-left:14px">열린 세션 없음 — ＋ Session 으로 폴더 지정</div>';
+      html += '<div class="tnode empty" style="padding-left:14px">열린 세션 없음 — ⋯ 에서 ＋ Session</div>';
     }
     html += '<div class="tree-sep"></div>';
-    html += '<div class="lbl"><span>Projects</span></div>';
-    if (!realRepos.length){ html += '<div class="tnode empty">등록된 repo 가 없습니다 — 보드에서 추가하세요.</div>'; }
+    // v5.28 G3: 같은 모양 — 이름과 ⋯ 하나. 프로젝트는 이제 보드에 가지 않고 여기서 태어난다.
+    html += '<div class="lbl"><span>Projects</span><span class="lacts">'
+      + '<button type="button" class="tmore" data-menu="projects" aria-haspopup="menu" aria-expanded="false"'
+      + ' title="프로젝트 — 폴더를 골라 등록하거나 빈 폴더에서 새로 시작">⋯</button></span></div>';
+    if (!realRepos.length){ html += '<div class="tnode empty">등록된 repo 가 없습니다 — ⋯ 에서 ＋ Add project</div>'; }
     // 프로젝트(repo) 하나 = 섹션 하나. 그 안에 작업(task) 들이 있고, 작업 아래에 세션(run) 이 달린다.
     realRepos.forEach(function(repo){
       var rk = 'repo'+repo.id;
@@ -1178,10 +1261,17 @@ export const COCKPIT_HTML = /* html */ `<!doctype html>
     el.innerHTML = html;
     // 열려 있던 ⋯ 메뉴는 트리가 다시 그려져도 살아 있어야 한다(델타마다 닫히면 못 누른다) —
     // 같은 repo 의 새 버튼으로 주인을 옮기고, 그 행이 사라졌으면 그때 닫는다.
-    if (rowMenuOwner){
+    // (Workspace 헤더의 ⋯(#wsMore)는 트리 밖 정적 마크업이라 다시 그려지지 않는다 — 건드리지 않는다.)
+    if (rowMenuOwner && rowMenuOwner.hasAttribute('data-more')){
       var again = el.querySelector('[data-more="'+rowMenuOwner.getAttribute('data-more')+'"]');
       if (again){ again.setAttribute('aria-expanded','true'); rowMenuOwner=again; } else closeRowMenu();
     }
+    // v5.28 G — 섹션 헤더의 ⋯(Scratch·Projects)도 트리 안에 산다. 같은 규칙으로 주인을 옮긴다.
+    // (트리 밖 정적 ⋯ — #wsMore·#topMore — 는 document 에 그대로 있으므로 여기 걸리지 않는다.)
+    else if (rowMenuOwner && rowMenuOwner.hasAttribute('data-menu') && !document.contains(rowMenuOwner)){
+      var back = el.querySelector('[data-menu="'+rowMenuOwner.getAttribute('data-menu')+'"]');
+      if (back){ back.setAttribute('aria-expanded','true'); rowMenuOwner=back; } else closeRowMenu();
+    }
   }
   // 작업(task) 한 줄 + 그 아래 세션(run) 들. 이름은 작업이 갖고, run 은 역할로 읽힌다.
   function taskHTML(t, rns){
@@ -1204,8 +1294,9 @@ export const COCKPIT_HTML = /* html */ `<!doctype html>
     return s;
   }
   $('tree').addEventListener('click', function(e){
-    if (e.target.closest('[data-newsession]')){ openSession(); return; }
-    if (e.target.closest('[data-scrub]')){ openScrub(); return; }
+    // 섹션 헤더의 ⋯ (Scratch·Projects) — 트리는 델타마다 다시 그려지므로 위임으로 받는다.
+    var sm = e.target.closest('[data-menu]');
+    if (sm){ e.stopPropagation(); openSecMenu(sm); return; }
     var pm = e.target.closest('[data-promote]');
     if (pm){ e.stopPropagation(); openPromote(+pm.dataset.promote); return; }
     // 노드 액션은 접기(data-fold)·열기(data-run) 보다 먼저 가로챈다 — 같은 행 안에 있으므로.
@@ -1233,22 +1324,51 @@ export const COCKPIT_HTML = /* html */ `<!doctype html>
     { act:'tidy',    label:'정리…' },
     { act:'unreg',   label:'등록 해제' }
   ];
-  function openRowMenu(btn, repoId){
+  // 여는 자리는 하나다(#rowMenu) — repo 행이든 어느 섹션 헤더든 같은 판을 같은 규칙으로 띄운다.
+  function paintRowMenu(btn, html){
     var m=$('rowMenu');
-    if (rowMenuOwner===btn && !m.hidden){ closeRowMenu(); return; }
-    m.innerHTML = ROW_MENU_ACTS.map(function(a){
-      return '<button type="button" role="menuitem" data-act="'+a.act+'" data-repo="'+repoId+'">'+esc(a.label)+'</button>';
-    }).join('');
+    m.innerHTML = html;
     m.hidden=false;
     // 버튼 아래 왼쪽 정렬, 화면 밖으로 나가면 안쪽으로 당긴다(fixed 좌표라 레일 스크롤과 무관).
     var r=btn.getBoundingClientRect();
     var w=m.offsetWidth, h=m.offsetHeight;
     m.style.left = Math.max(6, Math.min(r.left, window.innerWidth - w - 6)) + 'px';
     m.style.top  = ((r.bottom + h + 6 > window.innerHeight) ? Math.max(6, r.top - h - 4) : r.bottom + 4) + 'px';
+    // ⋯ 가 넷이 됐으므로(repo 행·Workspace·섹션·상단바) 주인을 넘길 때 옛 주인의 표시를 반드시 내린다 —
+    // 안 그러면 닫힌 ⋯ 가 aria-expanded="true" 인 채 남아 브랜드색으로 떠 있는다.
+    if (rowMenuOwner && rowMenuOwner!==btn) rowMenuOwner.setAttribute('aria-expanded','false');
     btn.setAttribute('aria-expanded','true');
     rowMenuOwner=btn;
     var first=m.querySelector('button'); if(first) first.focus();
   }
+  // v5.28 G1 — ⋯ 는 여럿, 판은 하나. 어느 ⋯ 를 눌러도 같은 판이 같은 규칙으로 뜨고,
+  // 다른 것은 **항목 목록뿐**이다. 두 번째 메뉴 시스템은 만들지 않는다.
+  function openMenuAt(btn, acts, repoId){
+    if (rowMenuOwner===btn && !$('rowMenu').hidden){ closeRowMenu(); return; }   // 같은 ⋯ 를 또 누르면 토글
+    paintRowMenu(btn, acts.map(function(a){
+      return '<button type="button" role="menuitem" data-act="'+a.act+'"'
+        + (repoId==null?'':' data-repo="'+repoId+'"')+'>'+esc(a.label)+'</button>';
+    }).join(''));
+  }
+  function openRowMenu(btn, repoId){ openMenuAt(btn, ROW_MENU_ACTS, repoId); }
+  // ── Workspace 헤더 넘침 메뉴 (v5.28 F1) ──
+  // 헤더는 이름과 ⋯ 하나만 이고, 유지보수 둘은 그 뒤에 산다. 하는 일은 하나도 안 바뀐다 —
+  // 같은 핸들러(openWt·openReap)를 그대로 부른다. 기계 이름은 위 칩(#mach)에 한 번만 선다.
+  var WS_MENU_ACTS = [
+    { act:'wt',   label:'▤ Worktrees' },
+    { act:'reap', label:'↻ Orphans' }
+  ];
+  function openWsMenu(btn){ openMenuAt(btn, WS_MENU_ACTS); }
+  $('wsMore').addEventListener('click', function(e){ e.stopPropagation(); openWsMenu(this); });
+  // ── 섹션·상단바 헤더 넘침 메뉴 (v5.28 G2·G3·G4) ──
+  // 같은 모양을 끝까지 민다: 헤더는 이름(또는 상태) 하나와 ⋯ 하나. 항목은 전부 **이미 있는 핸들러**를 부른다.
+  var SEC_MENU_ACTS = {
+    scratch:  [ { act:'newsession', label:'＋ Session' }, { act:'scrub', label:'Tidy…' } ],
+    projects: [ { act:'addproject', label:'＋ Add project…' } ],
+    top:      [ { act:'secrets',    label:'∗ Secrets' },   { act:'attn',  label:'◎ Notifications' } ]
+  };
+  function openSecMenu(btn){ openMenuAt(btn, SEC_MENU_ACTS[btn.getAttribute('data-menu')]||[]); }
+  $('topMore').addEventListener('click', function(e){ e.stopPropagation(); openSecMenu(this); });
   function closeRowMenu(){
     var m=$('rowMenu'); if(m.hidden) return;
     m.hidden=true; m.innerHTML='';
@@ -1258,19 +1378,31 @@ export const COCKPIT_HTML = /* html */ `<!doctype html>
     var b=e.target.closest('button[data-act]'); if(!b) return;
     var id=+b.dataset.repo, act=b.dataset.act;
     closeRowMenu();
-    if (act==='newwork') openNewWork(id);
+    if (act==='wt') openWt();
+    else if (act==='reap') openReap();
+    else if (act==='newwork') openNewWork(id);
     else if (act==='tidy') openTidy(id);
     else if (act==='unreg') openUnreg(id);
+    else if (act==='newsession') openSession();
+    else if (act==='scrub') openScrub();
+    else if (act==='addproject') openAddProject();
+    else if (act==='secrets') openSecrets();
+    // 알림은 판을 다시 짓지 않는다 — 있던 팝오버를 그대로 연다. 한 틱 미루는 이유: 이 클릭이
+    // document 까지 올라가 "바깥 클릭"으로 읽히면 방금 연 판이 도로 닫힌다.
+    else if (act==='attn') setTimeout(function(){ setAttnPop(true); }, 0);
   });
   // 닫기 배선은 주의 팝오버(#attnPop)와 같은 모양이다 — 바깥 클릭 · Escape(포커스 되돌림) · 포커스 이탈.
-  document.addEventListener('click', function(e){ if(!$('rowMenu').hidden && !$('rowMenu').contains(e.target) && !e.target.closest('[data-more]')) closeRowMenu(); });
+  // 여는 버튼은 repo 행의 ⋯([data-more])과 헤더들의 ⋯([data-menu] — Workspace·Scratch·Projects·상단바).
+  // 그중 어느 것을 누른 것도 "바깥"이 아니다(누르자마자 닫히면 토글이 성립하지 않는다).
+  var MENU_BTN_SEL = '[data-more],[data-menu]';
+  document.addEventListener('click', function(e){ if(!$('rowMenu').hidden && !$('rowMenu').contains(e.target) && !e.target.closest(MENU_BTN_SEL)) closeRowMenu(); });
   document.addEventListener('keydown', function(e){ if(e.key==='Escape' && !$('rowMenu').hidden){ e.preventDefault(); var o=rowMenuOwner; closeRowMenu(); if(o) o.focus(); } });
   $('rowMenu').addEventListener('focusout', function(){
     // ⋯ 로 포커스가 돌아간 경우는 닫지 않는다 — 안 그러면 두 번째 클릭이 토글이 아니라 재개방이 된다
     // (mousedown 이 먼저 포커스를 옮기고, 그 focusout 이 닫아버린 뒤 click 이 다시 연다).
     setTimeout(function(){
       var a=document.activeElement;
-      if(!$('rowMenu').hidden && !$('rowMenu').contains(a) && !(a && a.closest && a.closest('[data-more]'))) closeRowMenu();
+      if(!$('rowMenu').hidden && !$('rowMenu').contains(a) && !(a && a.closest && a.closest(MENU_BTN_SEL))) closeRowMenu();
     }, 0);
   });
   window.addEventListener('resize', closeRowMenu);
@@ -1317,14 +1449,29 @@ export const COCKPIT_HTML = /* html */ `<!doctype html>
   // 탭 라벨 = 역할 하나(작업 이름은 트리가 이미 보여준다).
   function tabName(runId){ return runLabel(runId); }
+  // 탭은 runId 하나로 키를 잡는다 — 한 run 이 두 탭이 될 수 없으니, 대신 **모드**를 갖는다(v5.28 E1).
+  // 에이전트 run 은 활동 페인으로 열리고, 날 PTY 는 사람이 Terminal 로 넘길 때 비로소 만들어진다.
   function ensureTab(runId){
     if (tabs[runId]) return tabs[runId];
+    var t={ runId:runId, name:tabName(runId), mode:defaultTabMode(runId), term:null, fit:null, ws:null, retry:0,
+            closing:false, host:null, ro:null, opened:false, connected:false, search:null, actHost:null };
+    tabs[runId]=t; tabOrder.push(runId);
+    if (t.mode==='terminal') ensureTerm(t);
+    return t;   // open·connect 는 attachHosts 에서(Phase 2 순서: open → connect)
+  }
+  // 터미널 실체(호스트 DOM + xterm + 애드온). 활동 페인에서 넘어오면 여기서 처음 생기고, 그 뒤로는 유지된다.
+  function ensureTerm(t){
+    if (t.term) return t;
+    var runId=t.runId;
     var host=document.createElement('div'); host.className='term-host';
     var term=new window.Terminal({
       fontFamily: "ui-monospace, 'SF Mono', Menlo, Monaco, 'Apple SD Gothic Neo', 'Noto Sans KR', monospace",
       fontSize: isMobile() ? 11 : 12, cursorBlink: true, allowProposedApi: true, scrollback: 4000,
       macOptionClickForcesSelection: true,   // ⌥+드래그 = 로컬 선택(마우스모드 앱 안에서도) → mouseup 복사가 됨
       rightClickSelectsWord: true,
+      // 검은 바탕에 검은 글자(ANSI black=SGR30) 안 보이던 것 방지 — 배경과 대비가 이 비율 미만인
+      // 전경색은 xterm 이 자동으로 끌어올린다. 3 = 안 보이던 것만 구제하고 의도된 어두운 톤은 대체로 보존(2026-09-18).
+      minimumContrastRatio: 3,
       theme: { background:'#0b0d12', foreground:'#dee4ec', cursor:'#4ec9b0', selectionBackground:'rgba(78,201,176,.25)', black:'#1c212c', brightBlack:'#5c6675' },
     });
     var fit=new window.FitAddon.FitAddon(); term.loadAddon(fit);
@@ -1395,9 +1542,8 @@ export const COCKPIT_HTML = /* html */ `<!doctype html>
       return true;
     });
     // term.open 은 host 가 DOM 에 붙은 뒤(attachHosts) 최초 1회 — detached 에서 open 하면 렌더러가 안 뜬다.
-    var t={ runId:runId, name:tabName(runId), term:term, fit:fit, ws:null, retry:0, closing:false, host:host, ro:null, opened:false, connected:false, search:search };
+    t.term=term; t.fit=fit; t.host=host; t.search=search; t.opened=false; t.connected=false;
     term.onData(function(d){ if(t.ws&&t.ws.readyState===1) t.ws.send(JSON.stringify({t:'i',d:d})); });
-    tabs[runId]=t; tabOrder.push(runId);
     return t;   // open·connect 는 attachHosts 에서(Phase 2 순서: open → connect)
   }
@@ -1575,7 +1721,7 @@ export const COCKPIT_HTML = /* html */ `<!doctype html>
   }
   function fitTab(t){ if(!t||!t.fit||!t.term) return; try{ t.fit.fit(); if(t.ws&&t.ws.readyState===1) t.ws.send(JSON.stringify({t:'r',cols:t.term.cols,rows:t.term.rows})); }catch(e){} }
-  function fitAllVisible(){ eachLeaf(layout,function(l){ if(l.tab!=null && tabs[l.tab] && tabs[l.tab].kind!=='viewer' && tabs[l.tab].host.isConnected) fitTab(tabs[l.tab]); }); }
+  function fitAllVisible(){ eachLeaf(layout,function(l){ var t=l.tab!=null?tabs[l.tab]:null; if(t && t.kind!=='viewer' && t.term && t.host && t.host.isConnected) fitTab(t); }); }
   // ── 탭 바 렌더(터미널 없음 — 언제든 안전) ──
   function renderTabs(){
@@ -1612,6 +1758,12 @@ export const COCKPIT_HTML = /* html */ `<!doctype html>
           ? '<span class="st vdoc">▤</span><span class="nm">'+esc(t.name)+'</span>'
             + zoomBtn + '<button class="x" title="이 페인 닫기(뷰어 유지)">×</button>'
           : '<span class="st '+esc(r?r.status:'')+'"></span><span class="nm">'+esc(t.name)+'</span>'
+            // v5.28 E1 — 이 페인이 무엇을 보여줄지. 에이전트 run 에만 뜬다(손 세션·워크벤치는 터미널 그대로).
+            + (runIsAgent(node.tab)
+              ? '<span class="modes acttog" data-role="mtog">'
+                + '<button type="button" class="mode'+(t.mode==='activity'?' on':'')+'" data-pmode="activity" data-prun="'+node.tab+'" title="이 에이전트가 지금 하고 있는 일 (이벤트 스트림)">Activity</button>'
+                + '<button type="button" class="mode'+(t.mode!=='activity'?' on':'')+'" data-pmode="terminal" data-prun="'+node.tab+'" title="이 run 의 worktree 셸 (날 터미널)">Terminal</button></span>'
+              : '')
             + '<span data-role="act" class="pane-act">'+esc(latestActivity(node.tab))+'</span>'
             // v5.28 C1·C2 — 이 페인의 에이전트 상태가 정하는 스트립. 상태가 바뀌면 이 자리만 다시 칠한다.
             + '<span data-role="qr" class="qr" data-qrun="'+node.tab+'">'+paneStripHTML(node.tab)+'</span>'
@@ -1637,8 +1789,11 @@ export const COCKPIT_HTML = /* html */ `<!doctype html>
     el.appendChild(a); el.appendChild(g); el.appendChild(b); return el;
   }
   // host 를 DOM 에 붙이고, 최초 1회 open → connect(Phase 2 순서). fit 은 render 의 rAF 에서.
-  function attachHosts(){ eachLeaf(layout,function(l){ if(l.tab==null||!tabs[l.tab]) return; var t=tabs[l.tab]; var body=$('panes').querySelector('[data-leafbody="'+l.id+'"]'); if(!body) return; body.appendChild(t.host);
-    if(t.kind==='viewer') return;   // 뷰어는 DOM 만 붙이면 끝(터미널 open/connect 없음)
+  function attachHosts(){ eachLeaf(layout,function(l){ if(l.tab==null||!tabs[l.tab]) return; var t=tabs[l.tab]; var body=$('panes').querySelector('[data-leafbody="'+l.id+'"]'); if(!body) return;
+    if(t.kind==='viewer'){ body.appendChild(t.host); return; }   // 뷰어는 DOM 만 붙이면 끝(터미널 open/connect 없음)
+    // 활동 페인(v5.28 E) — PTY 를 만들지 않는다. 터미널은 사람이 Terminal 을 누를 때 생긴다.
+    if(t.mode==='activity'){ body.appendChild(actHostOf(t)); renderActivity(t); return; }
+    ensureTerm(t); body.appendChild(t.host);
     if(!t.opened){ try{ t.term.open(t.host); t.opened=true; }catch(e){} }
     if(!t.connected){ t.connected=true; connectTab(t); }
   }); }
@@ -1809,6 +1964,8 @@ export const COCKPIT_HTML = /* html */ `<!doctype html>
       var chip=head.querySelector('[data-role=chip]'); if(chip){ chip.className='chip '+r.status; chip.textContent=r.status; }
       var vslot=head.querySelector('[data-role=vslot]'); if(vslot) vslot.innerHTML=vbadge(r.verifyStatus);
       var act=head.querySelector('[data-role=act]'); if(act) act.textContent=latestActivity(l.tab);
+      // 이벤트 델타가 실린 하이드레이트 — 열려 있는 활동 페인은 **새 줄만 이어붙인다**(통째로 다시 그리지 않는다, E3)
+      paintActivity(l.tab);
     });
   }
@@ -1885,6 +2042,22 @@ export const COCKPIT_HTML = /* html */ `<!doctype html>
     if (injBtn){ e.stopPropagation(); var il=findLeaf(injBtn.getAttribute('data-inject')); if(il&&il.tab!=null){ setLeafFocus(il.id); openInjMenu(injBtn, il.tab); } return; }
     var lockBtn=e.target.closest('[data-lock]');
     if (lockBtn){ e.stopPropagation(); startSecretSend(lockBtn.getAttribute('data-lock'), lockBtn); return; }
+    // v5.28 E — 활동 페인. 모드 전환(Activity|Terminal) + 페인 안의 읽기/행동 버튼들.
+    var pmBtn=e.target.closest('[data-pmode]');
+    if (pmBtn){ e.stopPropagation(); setTabMode(tabKeyOf(pmBtn.getAttribute('data-prun')), pmBtn.getAttribute('data-pmode')); return; }
+    var atBtn=e.target.closest('[data-actterm]');
+    if (atBtn){ e.stopPropagation(); setTabMode(tabKeyOf(atBtn.getAttribute('data-actterm')), 'terminal'); return; }
+    var asteerBtn=e.target.closest('[data-actsteer]');
+    if (asteerBtn){ e.stopPropagation(); actSteer(tabKeyOf(asteerBtn.getAttribute('data-actsteer'))); return; }
+    var arevBtn=e.target.closest('[data-actreview]');
+    if (arevBtn){ e.stopPropagation(); gotoBoardRun(arevBtn.getAttribute('data-actreview')); return; }
+    var adiffBtn=e.target.closest('[data-actdiff]');
+    if (adiffBtn){ e.stopPropagation(); actToggleDiff(tabKeyOf(adiffBtn.getAttribute('data-actdiff'))); return; }
+    var awsBtn=e.target.closest('[data-actws]');
+    if (awsBtn){ e.stopPropagation(); actToggleWs(tabKeyOf(awsBtn.getAttribute('data-actws'))); return; }
+    var ajBtn=e.target.closest('[data-actjump]');
+    if (ajBtn){ e.stopPropagation(); var jt=tabs[tabKeyOf(ajBtn.getAttribute('data-actjump'))];
+      if(jt && jt.actHost){ var jel=jt.actHost.querySelector('[data-role=acttl]'); if(jel){ jt._tlPinned=true; jel.scrollTop=jel.scrollHeight; } ajBtn.hidden=true; } return; }
     var leaf=e.target.closest('[data-leaf]'); if(!leaf) return;
     if (e.target.closest('.leaf-h .x')){ closeSlot(leaf.dataset.leaf); return; }
     setLeafFocus(leaf.dataset.leaf);
@@ -2062,7 +2235,11 @@ export const COCKPIT_HTML = /* html */ `<!doctype html>
   // ── 모바일 터미널 입력바 — 조합 완료 텍스트를 통째로 포커스 탭의 PTY 로(IME 안전) ──
   function focusedWs(){ var rid=focusedRunId(); return (rid!=null && tabs[rid]) ? tabs[rid].ws : null; }
   function termSendRaw(d){ var ws=focusedWs(); if(ws && ws.readyState===1) ws.send(JSON.stringify({t:'i',d:d})); }
-  function termSendLine(){ var inp=$('termInput'); var v=inp.value; if(!v){ termSendRaw('\\r'); return; } termSendRaw(v+'\\r'); inp.value=''; inp.focus(); }
+  function termSendLine(){ var inp=$('termInput'); var v=inp.value;
+    // 활동 페인에는 아직 PTY 가 없다 — 친 글을 조용히 삼키지 않고 길을 알려 준다(v5.28 E4).
+    var frid=focusedRunId(); var ft=(frid!=null)?tabs[frid]:null;
+    if(ft && ft.kind!=='viewer' && ft.mode==='activity'){ toast('이 페인은 Activity 입니다 — Open terminal 을 누르면 입력할 수 있어요'); return; }
+    if(!v){ termSendRaw('\\r'); return; } termSendRaw(v+'\\r'); inp.value=''; inp.focus(); }
   $('termSend').addEventListener('click', termSendLine);
   $('termInput').addEventListener('keydown', function(e){ if(e.isComposing) return; if(e.key==='Enter'){ e.preventDefault(); termSendLine(); } });
   // 멀티라인 붙여넣기(D-io) — 한 줄 <input> 은 개행을 삼킨다. 개행이 있으면 기본동작을 막고
@@ -2470,7 +2647,7 @@ export const COCKPIT_HTML = /* html */ `<!doctype html>
   function reapCount(){ var n=0; Object.keys(reapSel).forEach(function(k){ if(reapSel[k]) n++; }); return n; }
   function renderReap(){
     $('reapList').innerHTML = reapRows.length ? reapRows.map(reapRowHTML).join('')
-      : '<div class="pick-row" style="cursor:default;color:var(--faint)">고아 터미널이 없습니다 — 남은 tmux 세션은 모두 아는 run 의 것입니다</div>';
+      : '<div class="pick-row" style="cursor:default;color:var(--faint)">No orphans — every remaining tmux session belongs to a known run</div>';
     var n=reapCount(), busy=0;
     reapRows.forEach(function(x){ if(!x.idle) busy++; });
     $('reapHint').textContent = reapRows.length
@@ -2502,12 +2679,12 @@ export const COCKPIT_HTML = /* html */ `<!doctype html>
         body:JSON.stringify({sessions:names})});
       var j=await res.json().catch(function(){return{};});
       if (!res.ok){ toast('종료 실패: '+(j.detail||j.error||('HTTP '+res.status))); }
-      else { toast('고아 터미널 '+(j.count||0)+'개 종료됨'+((j.skipped&&j.skipped.length)?(' · 건너뜀 '+j.skipped.length+'개'):'')); }
+      else { toast('Orphans '+(j.count||0)+'개 종료됨'+((j.skipped&&j.skipped.length)?(' · 건너뜀 '+j.skipped.length+'개'):'')); }
     }catch(e){ toast('종료 실패: '+e); }
     finally{ reaping=false; }
     await loadReap();
   }
-  $('reapBtn').addEventListener('click', openReap);
+  // 여는 입구는 Workspace 헤더의 ⋯ 메뉴 하나다(v5.28 F1) — 인라인 링크는 사라졌다.
   $('reapClose').addEventListener('click', closeReap);
   $('reapModal').addEventListener('click', function(e){ if(e.target===this) closeReap(); });
   $('reapGo').addEventListener('click', runReap);
@@ -2577,7 +2754,7 @@ export const COCKPIT_HTML = /* html */ `<!doctype html>
     await hydrate();
     await loadWt();
   }
-  $('wtBtn').addEventListener('click', openWt);
+  // 여는 입구는 Workspace 헤더의 ⋯ 메뉴 하나다(v5.28 F1) — 인라인 링크는 사라졌다.
   $('wtClose').addEventListener('click', closeWt);
   $('wtModal').addEventListener('click', function(e){ if(e.target===this) closeWt(); });
   $('wtGo').addEventListener('click', runWt);
@@ -2745,6 +2922,68 @@ export const COCKPIT_HTML = /* html */ `<!doctype html>
   $('pickName').addEventListener('keydown', function(e){ if(e.key==='Enter'){ e.preventDefault(); $('pickGo').click(); } });
   $('sessionBtn').addEventListener('click', openSession);
+  // ── v5.28 G5 — 코크핏에서 프로젝트 만들기(Projects ⋯ > ＋ Add project…) ──
+  // 보드의 repo 브라우저와 **같은 창구**(GET /api/browse · POST /api/repos · POST /api/repos/new)를
+  // 코크핏의 시트 껍데기로 가져온 것뿐이다. 새 전송도, 새 동작도 없다 — 옮긴 것은 "닿는 자리"다.
+  // 경로는 절대 타이핑하지 않는다: 폴더를 눌러 들어가고, git 폴더에는 Register, 빈 폴더에는 Start here.
+  var projCur='';
+  function projErr(msg){ var el=$('projErr'); if(!msg){ el.hidden=true; el.textContent=''; return; } el.textContent=msg; el.hidden=false; }
+  function openAddProject(){ $('projModal').classList.add('on'); projErr(''); projBrowse(projCur||''); }
+  function closeAddProject(){ $('projModal').classList.remove('on'); }
+  async function projBrowse(p){
+    $('projList').innerHTML = '<div class="pick-row" style="cursor:default;color:var(--faint)">불러오는 중…</div>';
+    try{
+      var res = await fetch('/api/browse'+(p?('?path='+encodeURIComponent(p)):''));
+      if(!res.ok){ $('projList').innerHTML = '<div class="pick-row" style="color:var(--failed)">'+(res.status===401?'인증이 만료됐어요 — 새로고침 후 다시 로그인':'폴더를 읽을 수 없습니다 (HTTP '+res.status+')')+'</div>'; return; }
+      var d = await res.json();
+      projCur = d.path; $('projPath').textContent = d.path;
+      // 지금 서 있는 폴더 자체가 repo 면 그 자리에서 등록할 수 있다(보드의 Register here 와 같은 규칙).
+      $('projRegHere').hidden = !d.isRepo;
+      $('projHint').textContent = d.isRepo ? '이 폴더는 git repo 입니다 — 바로 등록할 수 있습니다'
+                                           : '폴더를 눌러 들어갑니다 · git 은 Register · 빈 폴더는 Start here';
+      var html = '';
+      if (d.parent && d.parent!==d.path) html += '<div class="pick-row up" data-projgo="'+esc(d.parent)+'"><span class="ic">↑</span><span>..</span></div>';
+      (d.dirs||[]).forEach(function(x){
+        var full = d.path==='/' ? '/'+x.name : d.path+'/'+x.name;
+        html += '<div class="pick-row" data-projgo="'+esc(full)+'"><span class="ic">'+(x.isRepo?'◆':'▸')+'</span>'
+          + '<span>'+esc(x.name)+'</span>'
+          + (x.isRepo ? '<span class="rp">git</span><button type="button" class="pbtn" data-projreg="'+esc(full)+'" title="등록 — 목록에 올리기만 합니다(디스크의 파일은 그대로)">Register</button>'
+             : (x.isEmpty ? '<button type="button" class="pbtn" data-projnew="'+esc(full)+'" title="여기서 시작 — 빈 초기 커밋 하나를 심고 등록합니다">Start here</button>' : ''))
+          + '</div>';
+      });
+      if (!(d.dirs||[]).length) html += '<div class="pick-row" style="cursor:default;color:var(--faint)">하위 폴더 없음</div>';
+      $('projList').innerHTML = html;
+    }catch(e){ $('projList').innerHTML = '<div class="pick-row" style="color:var(--failed)">폴더를 읽을 수 없습니다</div>'; }
+  }
+  var addingProject=false;
+  // 성공하면 트리가 곧 그 프로젝트를 든다 — hydrate 가 renderTree 를 부르므로 따로 그릴 것이 없다.
+  async function projPost(url, full, okMsg){
+    if (addingProject) return;
+    addingProject=true; projErr('');
+    try{
+      var res = await fetch(url,{method:'POST',headers:{'content-type':'application/json'},
+        body:JSON.stringify({machineSlug:machineSlug(), path:full})});
+      var j = await res.json().catch(function(){return{};});
+      if (res.ok){ closeAddProject(); await hydrate(); toast(okMsg+' · '+full); return; }
+      // 커밋이 없는 repo 는 등록이 거절된다 — 대신 어디로 가야 하는지 그 자리에서 말한다(G6: 창구는 그대로).
+      if (j.code==='NO_COMMITS') projErr('커밋이 아직 없는 repo 입니다 — Start here 로 시작하면 빈 초기 커밋을 심고 등록합니다');
+      else projErr((j.detail||j.error||('HTTP '+res.status)));
+    }catch(e){ projErr('실패: '+e); }
+    finally{ addingProject=false; }
+  }
+  function projRegister(full){ projPost('/api/repos', full, '프로젝트 등록'); }
+  function projStartHere(full){ projPost('/api/repos/new', full, '새 프로젝트 시작'); }
+  $('projList').addEventListener('click', function(e){
+    var rg=e.target.closest('[data-projreg]'); if(rg){ e.stopPropagation(); projRegister(rg.dataset.projreg); return; }
+    var nw=e.target.closest('[data-projnew]'); if(nw){ e.stopPropagation(); projStartHere(nw.dataset.projnew); return; }
+    var go=e.target.closest('[data-projgo]'); if(go){ projErr(''); projBrowse(go.dataset.projgo); }
+  });
+  $('projRegHere').addEventListener('click', function(){ if(projCur) projRegister(projCur); });
+  $('projHome').addEventListener('click', function(){ projErr(''); projBrowse(''); });
+  $('projClose').addEventListener('click', closeAddProject);
+  $('projModal').addEventListener('click', function(e){ if(e.target===this) closeAddProject(); });
+  document.addEventListener('keydown', function(e){ if(e.key==='Escape' && $('projModal').classList.contains('on')){ e.preventDefault(); closeAddProject(); } });
   // ── v6.0 Part T — 새 작업(＋ 새 작업) / 에이전트 추가(＋ 에이전트) ──
   // 작업 = task(이름이 사는 곳), 그 아래 세션 = run. 작업을 만들면 repo 체크아웃에
   // main 터미널(root 세션)이 바로 열리고, 에이전트는 그 작업 아래에 worktree 로 붙는다.
@@ -2931,7 +3170,7 @@ export const COCKPIT_HTML = /* html */ `<!doctype html>
       else{ var j=await res.json().catch(function(){return{};}); toast('저장 실패: '+(j.error||res.status)); }
     }catch(e){ toast('저장 실패: '+e); }
   }
-  $('secretsBtn').addEventListener('click', openSecrets);
+  // 여는 자리는 둘 — 상단바 ⋯ 메뉴의 ∗ Secrets(v5.28 G4)와 ⌘K 팔레트. 헤더의 인라인 버튼은 그 메뉴로 들어갔다.
   $('secretsClose').addEventListener('click', closeSecrets);
   $('secretsModal').addEventListener('click', function(e){ if(e.target===this) closeSecrets(); });
   $('secAdd').addEventListener('click', addSecret);
@@ -3215,11 +3454,183 @@ export const COCKPIT_HTML = /* html */ `<!doctype html>
   document.addEventListener('keydown', function(e){ if(e.key==='Escape' && !$('injMenu').hidden){ e.preventDefault(); var o=injMenuOwner; closeInjMenu(); if(o) o.focus(); } });
   window.addEventListener('resize', closeInjMenu);
+  // ══ v5.28 Part E — 활동 페인(run activity view) ═════════════════════════════
+  // 돌고 있는 에이전트를 눌렀을 때 보여야 하는 것은 **그 에이전트가 하고 있는 일**이다.
+  // 헤드리스 run 의 tmux 는 빈 worktree 셸이고(에이전트는 떨어져 나가 돈다), 진짜 작업은
+  // 이미 파싱돼 있는 이벤트 스트림(r.events · latestActivity · Part A agentstate)에 있다.
+  // 이 페인은 그것을 **읽을 뿐**이다 — 새 창구도, 새 색도, 새 상태도 만들지 않는다.
+  //   ① 터미널은 없어지지 않는다(액션바 첫 버튼이 한 번에 되돌린다)
+  //   ② 없는 것은 지어내지 않는다(아직 이벤트가 없으면 starting…)
+  //   ③ 에이전트 run 에만 뜬다(손 세션·워크벤치는 진짜 셸이라 터미널이 옳다)
+  // 보드 타임라인과 **같은 한 벌**(src/humanize.ts) — 같은 줄을 같은 규칙으로. 사본을 만들지 않는다.
+${HUMANIZE_JS}
+  // 에이전트 run = 이벤트 스트림을 가진 run. 자유 세션·손 터미널(agent='session')·워크벤치는 아니다.
+  function runIsAgent(runId){
+    if(runId==null || isViewer(runId)) return false;
+    var r=runById[runId]; if(!r) return false;
+    if(runIsSession(runId)) return false;
+    return r.agent!=='session' && r.agent!=='workbench';
+  }
+  // 탭이 열릴 때의 기본 모드(E1). 모르는 run 은 오늘과 똑같이 터미널이다.
+  function defaultTabMode(runId){ return runIsAgent(runId) ? 'activity' : 'terminal'; }
+  function actHostOf(t){
+    if(!t.actHost){ var h=document.createElement('div'); h.className='act-host'; t.actHost=h; }
+    return t.actHost;
+  }
+  // 모드 전환 — 터미널은 **여기서 처음** 만들어지고(lazy), 한 번 만든 뒤로는 계속 산다(되돌아오기는 즉시).
+  function setTabMode(runId, mode){
+    var t=tabs[runId]; if(!t || t.kind==='viewer') return;
+    var want=(mode==='terminal')?'terminal':'activity';
+    if(t.mode===want) return;
+    t.mode=want;
+    if(want==='terminal') ensureTerm(t);
+    render();
+  }
+  // "지금" 한 줄 — 파싱된 스트림에서 온 것만. 아직 아무 이벤트도 없으면 지어내지 않고 starting… 이라 말한다.
+  function actNowText(runId){
+    var r=runById[runId]; if(!r) return '';
+    var live=(r.status==='running'||r.status==='pending'||r.status==='preparing');
+    if(!(r.events||[]).length) return live ? 'starting…' : String(r.status||'');
+    return latestActivity(runId) || String(r.status||'');
+  }
+  function actPath(runId){
+    var r=runById[runId]; if(!r) return '';
+    var task=taskById[r.taskId]; var rp=task&&repoById[task.repoId];
+    return (rp?rp.name:'?')+' ▸ '+((task&&task.title)||('task '+(r.taskId!=null?r.taskId:'?')));
+  }
+  // 모델 · 브랜치. 브랜치가 없는 run 은 없다고 말한다(in-place — 트리 행·Review 와 같은 표기).
+  function actMeta(runId){
+    var r=runById[runId]; if(!r) return '';
+    var bits=[]; if(r.model) bits.push(r.model);
+    bits.push(r.branch || 'in-place');
+    return bits.join(' · ');
+  }
+  function actFilesText(runId){ var r=runById[runId]; return 'filesChanged '+((r&&r.filesChanged)||0); }
+  function activityHTML(runId){
+    var s=agentStateOf(runId);
+    return '<div class="act-h">'
+      + '<span class="anm">'+esc(runLabel(runId))+'</span>'
+      + '<span class="apath">'+esc(actPath(runId))+'</span>'
+      + '<span class="act-chip '+asClass(s)+'" data-role="actchip">'+esc(s)+'</span>'
+      + '<span class="ameta">'+esc(actMeta(runId))+'</span>'
+      + '</div>'
+      + '<div class="act-now" data-role="actnow">'+esc(actNowText(runId))+'</div>'
+      + '<div class="act-tlwrap"><div class="act-tl" data-role="acttl"></div>'
+      +   '<button type="button" class="act-jump" data-role="actjump" data-actjump="'+runId+'" hidden>Latest ↓</button></div>'
+      + '<div class="act-chg"><div class="act-chg-h">'
+      +   '<span class="afiles" data-role="actfiles">'+esc(actFilesText(runId))+'</span>'
+      +   '<button type="button" class="abtn" data-actdiff="'+runId+'" title="Diff so far — same renderer as Review">Changes</button>'
+      +   '<button type="button" class="rv-ws" data-actws="'+runId+'" title="Show whitespace (space/tab)" hidden>␣ WS</button>'
+      +   '</div><div class="rv-diff" data-role="actdiffbody" hidden></div></div>'
+      + '<div class="act-bar">'
+      +   '<button type="button" class="abtn prim" data-actterm="'+runId+'" title="이 페인을 날 터미널(worktree 셸)로 — 언제든 한 번에 돌아옵니다">Open terminal</button>'
+      +   '<button type="button" class="abtn" data-actsteer="'+runId+'" title="이 run 에 후속 지시 (요청바 Steer 경로 그대로)">Steer…</button>'
+      // 대기 중일 때만 Part C 빠른 답이 그대로 선다 — 여기서 새로 만들지 않는다.
+      // 자리 이름은 data-arun 이다(헤더 스트립의 data-qrun 과 달라서, paintPaneStrip 이 이 칸을 덧칠하지 않는다).
+      +   '<span class="qr" data-role="qr" data-arun="'+runId+'">'+(s==='waiting'?paneStripHTML(runId):'')+'</span>'
+      +   '<button type="button" class="abtn" data-actreview="'+runId+'" title="보드의 run 상세로 (전체 타임라인·산출물)">Review</button>'
+      + '</div>';
+  }
+  function renderActivity(t){
+    var h=actHostOf(t);
+    h.innerHTML=activityHTML(t.runId);
+    t._tlKeys=null; t._tlPinned=true;
+    var tl=h.querySelector('[data-role=acttl]');
+    if(tl) tl.addEventListener('scroll', function(){
+      var atEnd=(tl.scrollHeight - tl.scrollTop - tl.clientHeight) < 24;
+      t._tlPinned=atEnd;
+      var j=h.querySelector('[data-role=actjump]'); if(j) j.hidden=atEnd;
+    });
+    actPaintTimeline(t);
+    if(t._diffOpen){ var db=h.querySelector('[data-actdiff]'); if(db) db.textContent='Hide changes'; actLoadDiff(t.runId); }
+  }
+  function actKey(h){ return h.k+'\\u0000'+h.t; }
+  // 새 줄은 **아래에 잇는다**. 통째로 다시 그리는 것은 이을 자리를 못 찾았을 때뿐이다
+  // (이벤트 창이 40개로 밀려 앞이 잘린 경우). 꼬리에 붙어 있을 때만 따라 내려간다.
+  function actPaintTimeline(t){
+    var h=t.actHost; if(!h) return;
+    var el=h.querySelector('[data-role=acttl]'); if(!el) return;
+    var r=runById[t.runId];
+    var lines=humanLines((r&&r.events)||[]);
+    var prev=t._tlKeys, start=0;
+    if(!prev || !prev.length){ el.innerHTML=''; prev=[]; }
+    else {
+      var last=prev[prev.length-1], at=-1;
+      for(var i=lines.length-1;i>=0;i--){ if(actKey(lines[i])===last){ at=i; break; } }
+      if(at<0){ el.innerHTML=''; prev=[]; } else start=at+1;
+    }
+    for(var j=start;j<lines.length;j++){
+      var d=document.createElement('div'); d.className='act-l';
+      d.innerHTML='<span class="ak">'+esc(lines[j].k)+'</span><span class="at">'+esc(lines[j].t)+'</span>';
+      el.appendChild(d); prev.push(actKey(lines[j]));
+    }
+    t._tlKeys=prev;
+    var jb=h.querySelector('[data-role=actjump]');
+    if(!prev.length){ el.innerHTML='<div class="act-empty">No events yet — starting…</div>'; if(jb) jb.hidden=true; return; }
+    if(t._tlPinned){ el.scrollTop=el.scrollHeight; if(jb) jb.hidden=true; }
+    else if(start<lines.length && jb) jb.hidden=false;
+  }
+  // 델타 한 건 = 열려 있는 활동 페인의 그 자리만 고쳐 칠한다(리하이드레이트 없음 — A4 규율 그대로).
+  function paintActivity(runId){
+    var t=tabs[runId]; if(!t || t.kind==='viewer' || t.mode!=='activity' || !t.actHost) return;
+    var h=t.actHost, s=agentStateOf(runId);
+    var chip=h.querySelector('[data-role=actchip]'); if(chip){ chip.className='act-chip '+asClass(s); chip.textContent=s; }
+    var now=h.querySelector('[data-role=actnow]'); if(now) now.textContent=actNowText(runId);
+    var files=h.querySelector('[data-role=actfiles]'); if(files) files.textContent=actFilesText(runId);
+    var qr=h.querySelector('[data-role=qr]'); if(qr) qr.innerHTML=(s==='waiting')?paneStripHTML(runId):'';
+    actPaintTimeline(t);
+  }
+  // 변경 미리보기 — Review 가 쓰는 그 창구(/api/runs/:id/diff)와 그 렌더러(diffHTML·공백 토글) 그대로.
+  function actLoadDiff(runId){
+    var t=tabs[runId]; if(!t||!t.actHost) return;
+    var body=t.actHost.querySelector('[data-role=actdiffbody]'); if(!body) return;
+    body.hidden=false; body.textContent='Loading…';
+    var wsBtn=t.actHost.querySelector('[data-actws]'); if(wsBtn){ wsBtn.hidden=false; wsBtn.classList.toggle('on', rvShowWs); }
+    fetch('/api/runs/'+runId+'/diff').then(function(x){ return x.json(); }).then(function(d){
+      if(tabs[runId]!==t || !t._diffOpen) return;
+      if(d && d.ok) body.innerHTML=diffHTML(d.diff||'');
+      else body.textContent=(d&&d.stat)||'worktree 가 없어 diff 를 볼 수 없습니다';
+    }).catch(function(){ body.textContent='diff 를 가져오지 못했습니다'; });
+  }
+  function actToggleDiff(runId){
+    var t=tabs[runId]; if(!t||!t.actHost) return;
+    t._diffOpen=!t._diffOpen;
+    var btn=t.actHost.querySelector('[data-actdiff]'); if(btn) btn.textContent=t._diffOpen?'Hide changes':'Changes';
+    if(t._diffOpen){ actLoadDiff(runId); return; }
+    var body=t.actHost.querySelector('[data-role=actdiffbody]'); if(body){ body.hidden=true; body.innerHTML=''; }
+    var wsBtn=t.actHost.querySelector('[data-actws]'); if(wsBtn) wsBtn.hidden=true;
+  }
+  // 공백 표시는 Review 와 **같은 취향 하나**를 나눠 쓴다(두 군데서 따로 기억하지 않는다).
+  function actToggleWs(runId){
+    rvShowWs=!rvShowWs;
+    try{ $('rvWs').classList.toggle('on', rvShowWs); }catch(e){}
+    var t=tabs[runId];
+    if(t && t.actHost){ var b=t.actHost.querySelector('[data-actws]'); if(b) b.classList.toggle('on', rvShowWs); }
+    if(t && t._diffOpen) actLoadDiff(runId);
+    if(reviewOn && rvTaskId!=null) loadCompare(rvTaskId);
+  }
+  // Steer… = 요청바의 steer 경로 그대로(새 창구 없음). 빈 지시는 보내지 않고 작성칸에 세워 준다.
+  function actSteer(runId){
+    var l=null; eachLeaf(layout,function(x){ if(l==null && x.tab===runId) l=x; });
+    if(l) setLeafFocus(l.id);
+    setMode('steer');
+    try{ $('reqInput').focus(); }catch(e){}
+    toast('r'+runId+' 에 이어서 보낼 지시를 적고 ⏎');
+  }
+  // Review = 보드의 run 상세. 이미 있는 /?run=N 딥링크로 갈 뿐, 코크핏이 상세를 다시 그리지 않는다.
+  function gotoBoardRun(runId){ location.href='/?run='+encodeURIComponent(runId); }
   // ── 요청바: New(팬아웃) / Steer / Broadcast ──
   var reqMode = 'new';
   function setMode(m){
     reqMode = m;
-    Array.prototype.forEach.call(document.querySelectorAll('.mode'), function(b){ b.classList.toggle('on', b.dataset.mode===m); });
+    // 요청바의 세그만 — 같은 .mode 알갱이를 쓰는 다른 세그(시트의 provider·place, 페인의 Activity|Terminal)는
+    // 자기 'on' 을 스스로 들고 있다. data-mode 를 가진 것만 만진다.
+    Array.prototype.forEach.call(document.querySelectorAll('.mode[data-mode]'), function(b){ b.classList.toggle('on', b.dataset.mode===m); });
     var go=$('reqGo'), inp=$('reqInput');
     $('newCtl').style.display = m==='new'?'inline-flex':'none';
     $('reqTgt').style.display = m==='new'?'none':'inline';

package/src/humanize.ts ADDED Viewed

@@ -0,0 +1,62 @@
+// 이벤트 인간화 — 보드와 코크핏이 **같은 한 벌**을 쓴다(사본 금지).
+// 보드 모달의 타임라인과 코크핏 활동 페인(v5.28 E)이 같은 줄을 같은 규칙으로 보여야 하므로,
+// 클라이언트 JS 를 여기 한 곳에 두고 두 페이지의 <script> 에 그대로 끼워 넣는다(icons.ts 전례).
+// 문자열 안의 이스케이프는 **클라이언트 기준**이다: \\n 은 클라이언트의 \n 이 된다.
+export const HUMANIZE_JS = `/* 이벤트 인간화 — JSON 원문 대신 사람이 읽는 한 줄로. null = 표시 생략(노이즈). */
+function humanize(e){
+  const kind = e.kind, payload = e.payload;
+  if (kind === 'rate_limit_event') return null;
+  if (kind === 'steer') return { k:'steer', t:'→ '+payload };
+  if (kind === 'ask') return { k:'ask', t:'? '+payload };
+  if (kind === 'sync') return { k:'sync', t:payload };
+  if (kind === 'export'){ try{ const o=JSON.parse(payload); return { k:'export', t:o.copied+' file(s) → '+o.dest }; }catch{ return { k:'export', t:payload }; } }
+  if (kind === 'pr') return { k:'pr', t:payload };
+  if (kind === 'stderr') return { k:'stderr', t:payload };
+  try{
+    const o = JSON.parse(payload);
+    if (o.type === 'system'){
+      if (o.subtype === 'init' || !o.subtype) return { k:'session',
+        t:'started'+(o.model?' · '+String(o.model).replace(/\\u001b\\[[0-9;]*m/g,'')
+                                                  .replace(/\\x1b\\[[0-9;]*m/g,'') : '') };
+      if (o.subtype === 'permission_denied') return { k:'denied', t:'⛔ '+(o.tool_name||o.tool||'tool use')+' blocked — attach the Terminal to approve, or widen COXPIT_AGENT_PERM' };
+      return null; // thinking_tokens 등 스트림 잡음
+    }
+    if (o.type === 'user') return null; // tool 결과 회신 — 노이즈
+    if (o.type === 'assistant' && o.message){
+      const parts = [];
+      for (const x of (o.message.content||[])){
+        if (x.type === 'text' && x.text) parts.push({ k:'said', t:x.text });
+        else if (x.type === 'tool_use'){
+          const i = x.input || {};
+          const arg = i.file_path || i.command || i.path || i.pattern || '';
+          parts.push({ k:'tool', t:'▸ '+x.name+(arg?' — '+String(arg).split('/').slice(-2).join('/').slice(0,60):'') });
+        }
+      }
+      return parts.length ? parts : null;
+    }
+    if (o.type === 'assistant' && o.text) return { k:'said', t:o.text };
+    if (o.type === 'result') return { k:'done', t:o.result || 'finished' };
+    if (kind === 'meta' && o.subtask) return { k:'swarm', t:'↳ spawned task #'+o.subtask+' — '+String(o.title||'').slice(0,60)+' ('+((o.runs||[]).map(x=>'r'+x).join(' '))+')' };
+    if (kind === 'meta') return { k:'start', t:'worktree '+String(o.worktree||'').split('/').slice(-2).join('/') };
+    return { k:kind, t:payload.slice(0,140) };
+  }catch{
+    // 파싱 실패(과거에 잘려 저장된 이벤트 등) — JSON 잔해를 그대로 보여주지 않는다:
+    // text 조각만 구제하고, 없으면 생략.
+    if (payload.trim().startsWith('{')){
+      const texts = [];
+      const re = /"text":"((?:[^"\\\\]|\\\\.)*)"/g; let m;
+      while ((m = re.exec(payload)) && texts.length < 2) texts.push(m[1].replace(/\\\\n/g,' ').slice(0,140));
+      return texts.length ? { k:'said', t:texts.join(' · ') } : null;
+    }
+    return { k:kind, t:payload };
+  }
+}
+function humanLines(events){
+  const out = [];
+  for (const e of (events||[])){
+    const h = humanize(e);
+    if (!h) continue;
+    if (Array.isArray(h)) out.push(...h); else out.push(h);
+  }
+  return out;
+}`;