npm - coxpit - Versions diffs - 5.3.2 → 5.5.0 - Mend

coxpit 5.3.2 → 5.5.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 (7) hide show

package/package.json CHANGED Viewed

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

package/src/board.ts CHANGED Viewed

@@ -57,6 +57,9 @@ export const BOARD_HTML = /* html */ `<!doctype html>
   .daemon-badge{font-family:var(--mono);font-size:10.5px;color:var(--faint);padding:3px 9px;
     border:1px solid var(--line);border-radius:999px;background:var(--surface);cursor:default}
   .daemon-badge b{color:var(--muted);font-weight:500}
+  .cockpit-link{text-decoration:none;color:var(--muted);font-family:var(--mono);font-size:11.5px;
+    border:1px solid var(--line);border-radius:7px;padding:5px 10px;display:inline-flex;align-items:center;gap:4px}
+  .cockpit-link:hover{color:var(--brand);border-color:var(--line-hi)}
   .ws{display:flex;align-items:center;gap:7px;font-family:var(--mono);font-size:11px;color:var(--muted);
     padding:4px 10px;border:1px solid var(--line);border-radius:999px;background:var(--surface)}
   .dot{width:7px;height:7px;border-radius:50%;background:var(--s-failed);transition:background .3s}
@@ -842,7 +845,7 @@ export const BOARD_HTML = /* html */ `<!doctype html>
     .fab{display:inline-flex}
     #newBtn,.newnote{display:none}
     header{padding:0 12px;gap:9px}
-    .brand .sub,.daemon-badge,.machines{display:none}
+    .brand .sub,.daemon-badge,.machines,.cockpit-link{display:none}
     main{padding:14px}
     .grid{grid-template-columns:1fr}
     /* 모달 = 풀블리드 */
@@ -879,6 +882,7 @@ ${ICON_SPRITE}
   <div class="ws"><span class="dot" id="wsdot"></span><span id="wstext">connecting</span></div>
   <button class="btn-ghost sm" id="bell" title="notify when a run settles"><svg class="ic"><use href="#i-bell-off"/></svg></button>
   <button class="btn-ghost sm" id="remoteBtn" title="reach this daemon from elsewhere (Tailscale · recipes)"><svg class="ic"><use href="#i-external-link"/></svg></button>
+  <a class="cockpit-link" href="/cockpit" title="터미널 우선 셸 (preview)">◨ Cockpit</a>
   <div class="machines" id="machines"></div>
 </header>
 <div class="scrim" id="scrim"></div>

package/src/cockpit.ts ADDED Viewed

@@ -0,0 +1,364 @@
+// Cockpit — 터미널 우선 셸 (병행 개발, /cockpit). board.ts 처럼 자가완결 단일 HTML(빌드 0).
+// 백엔드(server 라우트·term.ts·orchestrator)는 보드와 전부 공유. Phase 5에서 데스크톱 기본을 여기로 플립.
+// Phase 2 = 워크스페이스 트리(/api/fleet 라이브) + 페인 그리드 터미널(오토타일=창분할, 각 페인 /ws/term attach).
+export const COCKPIT_HTML = /* html */ `<!doctype html>
+<html lang="en">
+<head>
+<meta charset="utf-8" />
+<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
+<title>coxpit · cockpit</title>
+<link rel="icon" href="/brand/favicon.ico" sizes="any" />
+<link rel="icon" type="image/png" sizes="32x32" href="/brand/favicon-32.png" />
+<link rel="apple-touch-icon" href="/brand/apple-touch-icon.png" />
+<link rel="stylesheet" href="/vendor/xterm.css" />
+<style>
+  @font-face{font-family:'Pixelify';src:url('/brand/pixelify.woff2') format('woff2');font-weight:400 700;font-display:swap}
+  :root{
+    --bg:#0b0d12; --surface:#12151c; --surface2:#171b24; --panel:#0e1118;
+    --line:#222835; --line-hi:#2f3648;
+    --ink:#dee4ec; --muted:#8792a2; --faint:#5c6675;
+    --brand:#4ec9b0; --brand-ink:#062822; --brand-dim:rgba(78,201,176,.13);
+    --running:#55a7e0; --done:#58b368; --blocked:#d6a249; --failed:#e25b67; --merged:#4ec9b0; --open:#7f9cf5; --stopped:#b58be0;
+    --mono:ui-monospace,'SF Mono',SFMono-Regular,Menlo,Consolas,monospace;
+    --sans:-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,Roboto,sans-serif;
+  }
+  *{box-sizing:border-box}
+  html,body{height:100%}
+  body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:14px;line-height:1.5;
+    -webkit-font-smoothing:antialiased;overflow:hidden}
+  button{font-family:var(--sans)}
+  :focus-visible{outline:2px solid rgba(78,201,176,.5);outline-offset:1px;border-radius:4px}
+  header{display:flex;align-items:center;gap:13px;height:46px;padding:0 14px;
+    border-bottom:1px solid var(--line);background:rgba(18,21,28,.92);font-family:var(--mono)}
+  .brand{display:inline-flex;align-items:center;gap:8px;text-decoration:none}
+  .brand img{height:22px;width:auto;display:block}
+  .brand .wm{font-family:'Pixelify';font-weight:600;font-size:19px;color:var(--ink);letter-spacing:.01em;margin-left:-2px}
+  .mach{display:inline-flex;align-items:center;gap:7px;font-size:12px;color:var(--muted);border:1px solid var(--line);border-radius:7px;padding:4px 10px}
+  .mach .dot{width:6px;height:6px;border-radius:50%;background:var(--done)}
+  .vtabs{display:flex;gap:4px;margin-left:4px}
+  .vtab{font-size:12px;color:var(--muted);padding:6px 11px;border-radius:7px;display:inline-flex;align-items:center;gap:7px;cursor:pointer;background:none;border:none;font-family:var(--mono)}
+  .vtab.on{background:var(--brand-dim);color:var(--ink);box-shadow:inset 0 0 0 1px rgba(78,201,176,.28)}
+  .vtab .g{color:var(--brand)}
+  .vtab[disabled]{opacity:.5;cursor:default}
+  .right{margin-left:auto;display:flex;align-items:center;gap:9px}
+  .ws{display:flex;align-items:center;gap:6px;font-size:11px;color:var(--muted)}
+  .ws .dot{width:6px;height:6px;border-radius:50%;background:var(--faint)}
+  .ws.on .dot{background:var(--done)}
+  .wip{font-size:10.5px;color:var(--blocked);border:1px solid rgba(214,162,73,.4);border-radius:999px;padding:2px 9px}
+  .toggle{font-size:12px;color:var(--muted);text-decoration:none;border:1px solid var(--line);border-radius:7px;padding:5px 11px}
+  .toggle:hover{color:var(--ink);border-color:var(--line-hi)}
+  .layout{display:grid;grid-template-columns:270px 1fr;height:calc(100vh - 46px)}
+  .layout > *{min-height:0;min-width:0}
+  /* ── workspace tree ── */
+  .rail{border-right:1px solid var(--line);overflow:auto;padding:10px 8px;font-family:var(--mono);font-size:12.5px;display:flex;flex-direction:column}
+  .lbl{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--faint);padding:6px 8px 10px;display:flex;justify-content:space-between}
+  .tnode{display:flex;align-items:center;gap:8px;padding:6px 8px;border-radius:7px;color:var(--muted);white-space:nowrap;cursor:default}
+  .tnode .car{color:var(--faint);width:9px;display:inline-block;text-align:center;cursor:pointer}
+  .tnode .n{overflow:hidden;text-overflow:ellipsis;flex:1}
+  .tnode .meta{color:var(--faint);font-size:11px}
+  .tnode.repo{color:var(--ink)}
+  .tnode.goal{padding-left:20px} .tnode.goal .gi{color:var(--brand)}
+  .tnode.task{padding-left:30px}
+  .tnode.run{padding-left:44px;font-size:12px;cursor:pointer}
+  .tnode.run:hover{background:var(--surface)}
+  .tnode.run.open{background:var(--brand-dim);color:var(--ink);box-shadow:inset 0 0 0 1px rgba(78,201,176,.22)}
+  .tnode.empty{color:var(--faint);padding:8px}
+  .st{width:6px;height:6px;border-radius:50%;flex:none}
+  .st.running{background:var(--running);box-shadow:0 0 0 3px rgba(85,167,224,.16)}
+  .st.done{background:var(--done)} .st.blocked{background:var(--blocked)} .st.failed,.st.error{background:var(--failed)}
+  .st.merged{background:var(--merged)} .st.open{background:var(--open)} .st.stopped{background:var(--stopped)}
+  .st.preparing,.st.pending,.st.starting{background:var(--blocked)}
+  .tree-sep{height:1px;background:var(--line);margin:8px 4px}
+  .railfoot{margin-top:auto;padding:8px;color:var(--faint);font-size:11px;border-top:1px solid var(--line)}
+  /* ── pane grid (창분할) ── */
+  .stage{display:flex;flex-direction:column;min-width:0;background:var(--bg)}
+  .panebar{display:flex;align-items:center;gap:8px;height:36px;padding:0 12px;border-bottom:1px solid var(--line);background:var(--panel);font-family:var(--mono);font-size:11.5px;color:var(--faint)}
+  .panebar .grow{flex:1}
+  .pb-btn{background:none;border:1px solid var(--line);border-radius:6px;color:var(--muted);font-size:11px;padding:3px 9px;cursor:pointer;font-family:var(--mono)}
+  .pb-btn:hover:not([disabled]){color:var(--ink);border-color:var(--line-hi)}
+  .pb-btn[disabled]{opacity:.4;cursor:default}
+  .panes{flex:1;display:grid;gap:1px;background:var(--line);padding:1px;min-height:0}
+  .pane{display:flex;flex-direction:column;background:var(--bg);min-width:0;min-height:0;overflow:hidden}
+  .pane.focus .pane-h{background:var(--brand-dim)}
+  .pane.focus{box-shadow:inset 0 0 0 1px rgba(78,201,176,.4)}
+  .pane-h{display:flex;align-items:center;gap:8px;height:28px;padding:0 10px;background:var(--surface);border-bottom:1px solid var(--line);font-family:var(--mono);font-size:11px;color:var(--muted);cursor:pointer;flex:none}
+  .pane-h .rid{color:var(--ink);font-weight:600}
+  .pane-h .chip{font-size:9px;text-transform:uppercase;letter-spacing:.04em;padding:1px 6px;border-radius:999px}
+  .chip.running{color:var(--running);background:rgba(85,167,224,.14)}
+  .chip.done,.chip.merged{color:var(--done);background:rgba(88,179,104,.14)}
+  .chip.blocked,.chip.preparing,.chip.pending,.chip.starting{color:var(--blocked);background:rgba(214,162,73,.16)}
+  .chip.failed,.chip.error{color:var(--failed);background:rgba(226,91,103,.14)}
+  .chip.open{color:var(--open);background:rgba(127,156,245,.14)}
+  .chip.stopped{color:var(--stopped);background:rgba(181,139,224,.14)}
+  .pane-h .title{flex:1;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;color:var(--faint)}
+  .pane-h .x{color:var(--faint);border:none;background:none;cursor:pointer;font-size:13px;padding:0 3px}
+  .pane-h .x:hover{color:var(--failed)}
+  .pane-term{flex:1;min-height:0;padding:4px 2px 2px 8px}
+  .pane-term .xterm{height:100%}
+  .empty{flex:1;display:flex;align-items:center;justify-content:center;text-align:center;padding:24px}
+  .empty .card{max-width:440px}
+  .empty .glyph{font-family:var(--mono);font-size:24px;color:#2c3444;letter-spacing:5px;margin-bottom:14px}
+  .empty h1{font-family:var(--mono);font-size:16px;margin:0 0 8px;color:var(--ink)}
+  .empty p{color:var(--muted);font-size:13px;margin:0}
+  .reqbar{display:flex;align-items:center;gap:10px;border-top:1px solid var(--line);background:var(--surface);padding:11px 14px;font-family:var(--mono)}
+  .reqbar .ctx{font-size:11px;color:var(--brand-ink);background:var(--brand);border-radius:6px;padding:3px 9px;font-weight:600}
+  .reqbar .caret{color:var(--brand)}
+  .reqbar .ph{color:var(--faint);font-size:13px;flex:1}
+  .reqbar .kbd{border:1px solid var(--line-hi);border-radius:5px;padding:1px 6px;color:var(--faint);font-size:11px}
+</style>
+</head>
+<body>
+<header>
+  <a class="brand" href="/"><img src="/brand/mark.png" alt="" /><span class="wm">coxpit</span></a>
+  <span class="mach"><span class="dot"></span><span id="mach">local</span></span>
+  <div class="vtabs">
+    <button type="button" class="vtab on"><span class="g">⌗</span>Terminal</button>
+    <button type="button" class="vtab" disabled title="Phase 3"><span class="g">⧉</span>Review</button>
+    <button type="button" class="vtab" disabled title="Phase 3"><span class="g">▤</span>Docs</button>
+  </div>
+  <div class="right">
+    <span class="ws" id="ws"><span class="dot"></span><span id="wstext">connecting</span></span>
+    <span class="wip">preview · Phase 2</span>
+    <a class="toggle" href="/">← Board</a>
+  </div>
+</header>
+<div class="layout">
+  <aside class="rail">
+    <div class="lbl"><span>Workspace</span><span id="machName" style="color:var(--faint)">local</span></div>
+    <div id="tree"></div>
+    <div class="railfoot">클릭한 run 은 오른쪽 페인에서 열립니다 · 분할(⊞)로 여러 에이전트를 나란히</div>
+  </aside>
+  <main class="stage">
+    <div class="panebar">
+      <span id="paneCount">0 panes</span>
+      <span style="color:var(--faint)">· run 을 열수록 자동 분할(타일)</span>
+      <span class="grow"></span>
+      <button class="pb-btn" id="closeBtn" disabled title="포커스 페인 닫기">× close focused</button>
+    </div>
+    <div class="panes" id="panes"></div>
+    <div class="empty" id="empty">
+      <div class="card">
+        <div class="glyph">⌗ ⌗ ⌗</div>
+        <h1>페인이 비어 있습니다</h1>
+        <p>왼쪽 트리에서 <b>run</b> 을 클릭하면 그 에이전트 터미널이 여기 페인으로 열립니다. 여러 개 열면 자동으로 분할(타일)됩니다.</p>
+      </div>
+    </div>
+    <div class="reqbar">
+      <span class="ctx">cockpit</span><span class="caret">›</span>
+      <span class="ph">요청바 — Phase 3 (repo 문맥에서 팬아웃)</span>
+      <span class="kbd">⏎</span>
+    </div>
+  </main>
+</div>
+<script src="/vendor/xterm.js"></script>
+<script src="/vendor/addon-fit.js"></script>
+<script src="/vendor/addon-unicode11.js"></script>
+<script>
+  // 모바일은 터미널 우선 대신 보드(모니터)로.
+  if (window.innerWidth <= 860 && matchMedia('(pointer:coarse)').matches) location.replace('/');
+  var esc = function(s){ return String(s==null?'':s).replace(/[&<>"]/g, function(c){ return ({'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;'})[c]; }); };
+  var $ = function(id){ return document.getElementById(id); };
+  // ── fleet 상태 ──
+  var fleet = { machines:[], repos:[], tasks:[], groups:[], runs:[] };
+  var runById = {};
+  var fold = {};   // 접힘 상태(repo/goal/task 노드)
+  function isFold(k){ return fold[k]===true; }
+  async function hydrate(){
+    try{
+      var d = await (await fetch('/api/fleet?view=all')).json();
+      fleet = d; runById = {};
+      (d.runs||[]).forEach(function(r){ runById[r.id]=r; });
+      if (d.machines && d.machines[0]) { $('mach').textContent = d.machines[0].slug; $('machName').textContent = d.machines[0].slug; }
+      renderTree();
+      syncPanes();
+    }catch(e){ /* 재시도는 WS 재연결 or 다음 hydrate */ }
+  }
+  // ── 트리 렌더: Machine ▸ Repo ▸ Goal ▸ Task ▸ Run ──
+  function renderTree(){
+    var el = $('tree');
+    var repos = fleet.repos||[], tasks = fleet.tasks||[], groups = fleet.groups||[], runs = fleet.runs||[];
+    var groupById = {}; groups.forEach(function(g){ groupById[g.id]=g; });
+    var tasksByRepo = {}; tasks.forEach(function(t){ (tasksByRepo[t.repoId]=tasksByRepo[t.repoId]||[]).push(t); });
+    var runsByTask = {}; runs.forEach(function(r){ (runsByTask[r.taskId]=runsByTask[r.taskId]||[]).push(r); });
+    if (!repos.length){ el.innerHTML = '<div class="tnode empty">등록된 repo 가 없습니다 — 보드에서 추가하세요.</div>'; return; }
+    var html = '';
+    repos.forEach(function(repo){
+      var rk = 'repo'+repo.id;
+      var rTasks = (tasksByRepo[repo.id]||[]).filter(function(t){ return t.status!=='closed'; });
+      var runCount = rTasks.reduce(function(n,t){ return n+((runsByTask[t.id]||[]).length); }, 0);
+      html += '<div class="tnode repo" data-fold="'+rk+'"><span class="car">'+(isFold(rk)?'▸':'▾')+'</span>'
+        + '<span class="n">'+esc(repo.name)+'</span><span class="meta">'+runCount+' run'+(runCount===1?'':'s')+'</span></div>';
+      if (isFold(rk)) return;
+      // goal(group) 로 묶기
+      var byGroup = {}, ungrouped = [];
+      rTasks.forEach(function(t){ if (t.groupId && groupById[t.groupId]) (byGroup[t.groupId]=byGroup[t.groupId]||[]).push(t); else ungrouped.push(t); });
+      Object.keys(byGroup).forEach(function(gid){
+        var g = groupById[gid]; var gk='goal'+gid;
+        html += '<div class="tnode goal" data-fold="'+gk+'"><span class="car">'+(isFold(gk)?'▸':'▾')+'</span>'
+          + '<span class="gi">⌁</span><span class="n">'+esc(g.title)+'</span><span class="meta">'+(g.kind||'goal')+'</span></div>';
+        if (!isFold(gk)) byGroup[gid].forEach(function(t){ html += taskHTML(t, runsByTask[t.id]||[]); });
+      });
+      ungrouped.forEach(function(t){ html += taskHTML(t, runsByTask[t.id]||[]); });
+      if (!rTasks.length) html += '<div class="tnode empty" style="padding-left:30px">태스크 없음</div>';
+    });
+    el.innerHTML = html;
+  }
+  function taskHTML(t, rns){
+    var tk='task'+t.id;
+    var s = '<div class="tnode task" data-fold="'+tk+'"><span class="car">'+(rns.length?(isFold(tk)?'▸':'▾'):' ')+'</span>'
+      + '<span class="n">'+esc(t.title)+'</span></div>';
+    if (!isFold(tk)) rns.sort(function(a,b){return a.id-b.id;}).forEach(function(r){
+      var open = paneByRun[r.id] ? ' open' : '';
+      s += '<div class="tnode run'+open+'" data-run="'+r.id+'"><span class="st '+esc(r.status)+'"></span>'
+        + '<span class="n">r'+r.id+' · '+esc(r.status)+'</span></div>';
+    });
+    return s;
+  }
+  $('tree').addEventListener('click', function(e){
+    var run = e.target.closest('.tnode.run');
+    if (run){ openRunPane(+run.dataset.run); return; }
+    var fn = e.target.closest('[data-fold]');
+    if (fn){ var k = fn.dataset.fold; fold[k] = !isFold(k); renderTree(); }
+  });
+  // ── 페인 그리드(창분할, 오토타일) ──
+  var panes = [];            // { id, runId, el, term, fit, ws, retry, closing, ro }
+  var paneByRun = {};        // runId -> pane
+  var focusId = null;
+  var paneSeq = 0;
+  var MAX_PANES = 8;
+  function layoutPanes(){
+    var host = $('panes'); var n = panes.length;
+    $('empty').style.display = n ? 'none' : 'flex';
+    host.style.display = n ? 'grid' : 'none';
+    $('paneCount').textContent = n + ' pane' + (n===1?'':'s');
+    $('closeBtn').disabled = !focusId;
+    if (!n) return;
+    var cols = Math.ceil(Math.sqrt(n));
+    var rows = Math.ceil(n / cols);
+    host.style.gridTemplateColumns = 'repeat(' + cols + ', 1fr)';
+    host.style.gridTemplateRows = 'repeat(' + rows + ', 1fr)';
+    // 레이아웃 후 각 터미널 리핏
+    requestAnimationFrame(function(){ panes.forEach(fitPane); });
+  }
+  function fitPane(p){
+    if (!p.fit || !p.term) return;
+    try{ p.fit.fit(); if (p.ws && p.ws.readyState===1) p.ws.send(JSON.stringify({t:'r',cols:p.term.cols,rows:p.term.rows})); }catch(e){}
+  }
+  function setFocus(id){
+    focusId = id;
+    panes.forEach(function(p){ p.el.classList.toggle('focus', p.id===id); });
+    $('closeBtn').disabled = !focusId;
+    var p = panes.find(function(x){return x.id===id;});
+    if (p && p.term) try{ p.term.focus(); }catch(e){}
+  }
+  function openRunPane(runId){
+    var existing = paneByRun[runId];
+    if (existing){ setFocus(existing.id); return; }
+    if (panes.length >= MAX_PANES){ return; }
+    var r = runById[runId];
+    var p = { id: ++paneSeq, runId: runId, retry: 0, closing: false };
+    var el = document.createElement('div'); el.className = 'pane'; p.el = el;
+    el.innerHTML = '<div class="pane-h"><span class="rid">r'+runId+'</span>'
+      + '<span class="chip '+esc(r?r.status:'')+'" data-role="chip">'+esc(r?r.status:'')+'</span>'
+      + '<span class="title" data-role="title">'+esc(r&&r.tmuxWindow||'terminal')+'</span>'
+      + '<button class="x" title="close">×</button></div>'
+      + '<div class="pane-term"></div>';
+    $('panes').appendChild(el);
+    el.querySelector('.pane-h').addEventListener('click', function(ev){
+      if (ev.target.closest('.x')) return; setFocus(p.id);
+    });
+    el.querySelector('.x').addEventListener('click', function(){ closePane(p.id); });
+    // xterm
+    var term = new window.Terminal({
+      fontFamily: "ui-monospace, 'SF Mono', Menlo, Monaco, 'Apple SD Gothic Neo', 'Noto Sans KR', monospace",
+      fontSize: 12, cursorBlink: true, allowProposedApi: true, scrollback: 4000,
+      theme: { background:'#0b0d12', foreground:'#dee4ec', cursor:'#4ec9b0', selectionBackground:'rgba(78,201,176,.25)', black:'#1c212c', brightBlack:'#5c6675' },
+    });
+    p.term = term;
+    p.fit = new window.FitAddon.FitAddon(); term.loadAddon(p.fit);
+    try{ term.loadAddon(new window.Unicode11Addon.Unicode11Addon()); term.unicode.activeVersion='11'; }catch(e){}
+    term.open(el.querySelector('.pane-term'));
+    term.onData(function(d){ if (p.ws && p.ws.readyState===1) p.ws.send(JSON.stringify({t:'i',d:d})); });
+    p.ro = new ResizeObserver(function(){ fitPane(p); }); p.ro.observe(el.querySelector('.pane-term'));
+    panes.push(p); paneByRun[runId] = p;
+    layoutPanes();
+    connectPane(p);
+    setFocus(p.id);
+    renderTree();
+  }
+  function connectPane(p){
+    if (p.closing || !p.term) return;
+    try{ p.fit.fit(); }catch(e){}
+    var proto = location.protocol==='https:'?'wss':'ws';
+    var sock = new WebSocket(proto+'://'+location.host+'/ws/term/'+p.runId+'?cols='+p.term.cols+'&rows='+p.term.rows);
+    p.ws = sock;
+    sock.onopen = function(){ if (sock!==p.ws){ try{sock.close();}catch(e){} return; } p.retry=0; };
+    sock.onmessage = function(m){
+      if (sock!==p.ws || !p.term) return;
+      try{ var d = JSON.parse(m.data);
+        if (d.t==='o') p.term.write(d.d);
+        else if (d.t==='err') p.term.write('\\r\\n\\x1b[31m'+d.d+'\\x1b[0m\\r\\n');
+        else if (d.t==='exit') p.term.write('\\r\\n\\x1b[90m[session ended — 재연결 시 소생]\\x1b[0m\\r\\n');
+      }catch(e){}
+    };
+    sock.onclose = function(){
+      if (sock!==p.ws || p.closing) return;
+      var delay = Math.min(8000, 800 * Math.pow(2, p.retry++));
+      setTimeout(function(){ connectPane(p); }, delay);
+    };
+  }
+  function closePane(id){
+    var i = panes.findIndex(function(p){return p.id===id;});
+    if (i<0) return;
+    var p = panes[i]; p.closing = true;
+    try{ if (p.ws) p.ws.close(); }catch(e){}
+    try{ if (p.ro) p.ro.disconnect(); }catch(e){}
+    try{ if (p.term) p.term.dispose(); }catch(e){}
+    try{ p.el.remove(); }catch(e){}
+    delete paneByRun[p.runId];
+    panes.splice(i,1);
+    if (focusId===id) focusId = panes.length ? panes[panes.length-1].id : null;
+    layoutPanes(); if (focusId) setFocus(focusId);
+    renderTree();
+  }
+  // 페인 상태/타이틀을 fleet 갱신에 맞춰 갱신 + 사라진 run 페인 정리
+  function syncPanes(){
+    panes.forEach(function(p){
+      var r = runById[p.runId];
+      var chip = p.el.querySelector('[data-role=chip]'); var title = p.el.querySelector('[data-role=title]');
+      if (r){ if(chip){ chip.className='chip '+r.status; chip.textContent=r.status; } if(title) title.textContent = r.tmuxWindow||'terminal'; }
+    });
+  }
+  $('closeBtn').addEventListener('click', function(){ if (focusId) closePane(focusId); });
+  // ── /ws 라이브 구독 → 트리·페인 갱신 ──
+  function wsConnect(){
+    var proto = location.protocol==='https:'?'wss':'ws';
+    var ws = new WebSocket(proto+'://'+location.host+'/ws');
+    ws.onopen = function(){ $('ws').classList.add('on'); $('wstext').textContent='live'; };
+    ws.onclose = function(){ $('ws').classList.remove('on'); $('wstext').textContent='reconnecting'; setTimeout(wsConnect, 1500); };
+    ws.onmessage = function(){ /* 델타는 종류가 많아 단순히 전체 리하이드레이트(디바운스) */ scheduleHydrate(); };
+  }
+  var hydT=null;
+  function scheduleHydrate(){ if (hydT) return; hydT = setTimeout(function(){ hydT=null; hydrate(); }, 400); }
+  hydrate();
+  wsConnect();
+  window.addEventListener('resize', function(){ panes.forEach(fitPane); });
+</script>
+</body>
+</html>`;

package/src/db/index.ts CHANGED Viewed

@@ -101,4 +101,6 @@ export async function ensureSchema(): Promise<void> {
   try { await client.execute('ALTER TABLE tasks ADD COLUMN closed_at INTEGER'); } catch { /* exists */ }
   try { await client.execute("ALTER TABLE task_groups ADD COLUMN coord_session_id TEXT NOT NULL DEFAULT ''"); } catch { /* exists */ }
   try { await client.execute("ALTER TABLE tasks ADD COLUMN outputs TEXT NOT NULL DEFAULT '[]'"); } catch { /* exists */ }
+  try { await client.execute('ALTER TABLE agent_runs ADD COLUMN agent_pid INTEGER NOT NULL DEFAULT 0'); } catch { /* exists */ }
+  try { await client.execute('ALTER TABLE agent_runs ADD COLUMN log_offset INTEGER NOT NULL DEFAULT 0'); } catch { /* exists */ }
 }

package/src/db/schema.ts CHANGED Viewed

@@ -88,6 +88,8 @@ export const agentRuns = sqliteTable('agent_runs', {
   prUrl: text('pr_url').notNull().default(''), // PR 모드로 올린 pull request URL
   model: text('model').notNull().default(''), // 런치별 모델 지정(빈값 = CLI 기본)
   filesChanged: integer('files_changed').notNull().default(0),
+  agentPid: integer('agent_pid').notNull().default(0),   // detached sh pgid — 재시작 후 생존 판정/stop
+  logOffset: integer('log_offset').notNull().default(0), // 내구 로그에서 tail 이 소비한 바이트(재-adopt 시 여기부터)
   startedAt: integer('started_at', { mode: 'timestamp' }),
   endedAt: integer('ended_at', { mode: 'timestamp' }),
   exitSummary: text('exit_summary').notNull().default(''),

package/src/orchestrator.ts CHANGED Viewed

@@ -1,8 +1,8 @@
 import { randomBytes } from 'node:crypto';
 import { posix as ppath } from 'node:path';
 import { createInterface } from 'node:readline';
-import { existsSync } from 'node:fs';
-import { mkdir, copyFile, readFile, writeFile, rm } from 'node:fs/promises';
+import { existsSync, statSync, openSync, readSync, closeSync, mkdirSync } from 'node:fs';
+import { mkdir, copyFile, readFile, writeFile, rm, unlink } from 'node:fs/promises';
 import { homedir } from 'node:os';
 import type { ChildProcess } from 'node:child_process';
 import { eq, inArray } from 'drizzle-orm';
@@ -111,6 +111,80 @@ async function setRun(runId: number, patch: Partial<typeof agentRuns.$inferInser
 // 실행 중 run 의 자식 프로세스(stop 용). stoppedRuns = 사용자가 멈춘 run 표식.
 const liveChildren = new Map<number, ChildProcess>();
 const stoppedRuns = new Set<number>();
+// 재시작 후 재-adopt 되어 로그를 tail 중인 run(자식 객체는 없지만 살아있음).
+const adoptedRuns = new Set<number>();
+const sleep = (ms: number) => new Promise<void>((r) => setTimeout(r, ms));
+function pidAlive(pid: number): boolean {
+  if (!pid) return false;
+  try { process.kill(pid, 0); return true; } catch { return false; }
+}
+// ── 내구 실행 로그(재시작 내성 토대) ──────────────────────────
+// 에이전트 출력은 데몬 파이프가 아니라 이 파일로 리다이렉트된다 → 데몬이 죽어도
+// detached 에이전트가 계속 파일에 쓰고, 데몬은 부팅 후 offset 부터 재-tail 한다.
+function runsDir(): string {
+  const d = ppath.join(ppath.dirname(config.dbPath), 'runs');
+  try { mkdirSync(d, { recursive: true }); } catch { /* best effort */ }
+  return d;
+}
+function runLogPath(runId: number): string { return ppath.join(runsDir(), `r${runId}.log`); }
+const DONE_RE = /^__COXPIT_DONE__:(-?\d+)\s*$/;
+/** 로그 파일 tail — offset 부터 새 바이트를 읽어 라인 파싱→이벤트, 종료 센티넬(__COXPIT_DONE__) 감지.
+ *  aliveCheck 가 false 면(센티넬 없이 프로세스 사망) code=-1 로 종료. offset 은 주기적으로 영속. */
+async function tailRunLog(
+  runId: number, provider: Provider, fromOffset: number,
+  aliveCheck?: () => boolean,
+): Promise<{ code: number; lastResult: string; offset: number }> {
+  const log = runLogPath(runId);
+  let offset = Math.max(0, fromOffset);
+  let buf = '';
+  let lastResult = '';
+  let code = 0;
+  let done = false;
+  let sincePersist = 0;
+  const consume = () => {
+    if (!existsSync(log)) return;
+    const size = statSync(log).size;
+    if (size <= offset) return;
+    const fd = openSync(log, 'r');
+    try {
+      const b = Buffer.alloc(size - offset);
+      readSync(fd, b, 0, b.length, offset);
+      offset = size; buf += b.toString('utf8');
+    } finally { closeSync(fd); }
+    let nl: number;
+    while ((nl = buf.indexOf('\n')) >= 0) {
+      const line = buf.slice(0, nl); buf = buf.slice(nl + 1);
+      const m = DONE_RE.exec(line);
+      if (m) { code = parseInt(m[1] ?? '0', 10) || 0; done = true; continue; }
+      const p = provider.parseLine(line);
+      if (p) {
+        if (p.sessionId) void setRun(runId, { sessionId: p.sessionId });
+        if (p.resultText != null) lastResult = p.resultText;
+        void recordEvent(runId, p.kind, p.stored.slice(0, 2000));
+        continue;
+      }
+      // stdout+stderr 를 한 로그로 합쳤으므로(2>&1), stream-json 이 아닌 non-json 라인 = stderr 로 살린다.
+      const t = line.trim();
+      if (t && t[0] !== '{') void recordEvent(runId, 'stderr', t.slice(0, 2000));
+    }
+  };
+  while (!done) {
+    consume();
+    if (done) break;
+    if (aliveCheck && !aliveCheck()) { consume(); if (!done) { code = -1; } break; }
+    if (++sincePersist >= 8) { sincePersist = 0; void persistLogOffset(runId, offset); }
+    await sleep(250);
+  }
+  consume();
+  void persistLogOffset(runId, offset);
+  return { code, lastResult, offset };
+}
+/** offset 만 가볍게 영속(broadcast 없이 — setRun 은 매번 broadcast 라 부적합). */
+async function persistLogOffset(runId: number, offset: number): Promise<void> {
+  try { await db.update(agentRuns).set({ logOffset: offset }).where(eq(agentRuns.id, runId)); } catch { /* best effort */ }
+}
 // ── 에이전트 셀프 오케스트레이션 ──────────────────────────────
 // run 마다 1회용 토큰을 발급해 에이전트 env 로 준다. 에이전트는 그 토큰으로
@@ -130,9 +204,9 @@ export function resolveAgentToken(token: string): number | null {
   return agentTokens.get(token) ?? null;
 }
-/** run 이 지금 살아 있는가(자식 프로세스 보유). aggregate 뷰의 live/steerable 판정용. */
+/** run 이 지금 살아 있는가(자식 프로세스 보유 or 재-adopt tail 중). aggregate 뷰의 live/steerable 판정용. */
 export function isRunLive(runId: number): boolean {
-  return liveChildren.has(runId);
+  return liveChildren.has(runId) || adoptedRuns.has(runId);
 }
 /** 에이전트 프롬프트에 붙는 능력 고지 — 독립 하위작업을 병렬 서브런으로 뺄 수 있다.
@@ -408,34 +482,48 @@ export async function launchRun(runId: number, real?: boolean): Promise<void> {
  * 에이전트 자식 프로세스 배선(공용) — 프로바이더가 stdout 라인을 정규화 이벤트로
  * 파싱, session 캡처, 종료 시 files_changed 집계 + 상태 전이. launchRun/steerRun 공유.
  */
-async function runAgentChild(runId: number, machine: MachineTarget, wtPath: string, cmd: string, provider: Provider): Promise<void> {
-  const child = spawnShellOn(machine, cmd);
-  liveChildren.set(runId, child);
+async function runAgentChild(runId: number, machine: MachineTarget, wtPath: string, cmd: string, provider: Provider, opts?: { fresh?: boolean }): Promise<void> {
+  const isRemote = machine.kind !== 'local' && machine.address !== '';
+  let code: number;
   let lastResult = '';
-  if (child.stdout) {
-    const rl = createInterface({ input: child.stdout });
-    rl.on('line', (line: string) => {
-      const p = provider.parseLine(line);
-      if (!p) return;
-      if (p.sessionId) void setRun(runId, { sessionId: p.sessionId }); // steer(resume)용 세션 키
-      if (p.resultText != null) lastResult = p.resultText;
-      void recordEvent(runId, p.kind, p.stored.slice(0, 2000));
-    });
-  }
-  if (child.stderr) {
-    const rle = createInterface({ input: child.stderr });
-    rle.on('line', (line: string) => {
-      const s = line.trim();
-      if (s) void recordEvent(runId, 'stderr', s.slice(0, 2000));
-    });
-  }
-  const code: number = await new Promise((resolve) => {
-    child.on('close', (c) => resolve(c ?? 0));
-    child.on('error', () => resolve(-1));
-  });
-  liveChildren.delete(runId);
+  if (isRemote) {
+    // 원격: ssh stdout 파이프를 실시간 파싱(기존 동작). 로그 파일/재-adopt 는 로컬 전용.
+    const child = spawnShellOn(machine, cmd);
+    liveChildren.set(runId, child);
+    if (child.stdout) {
+      const rl = createInterface({ input: child.stdout });
+      rl.on('line', (line: string) => {
+        const p = provider.parseLine(line);
+        if (!p) return;
+        if (p.sessionId) void setRun(runId, { sessionId: p.sessionId });
+        if (p.resultText != null) lastResult = p.resultText;
+        void recordEvent(runId, p.kind, p.stored.slice(0, 2000));
+      });
+    }
+    if (child.stderr) {
+      const rle = createInterface({ input: child.stderr });
+      rle.on('line', (line: string) => { const s = line.trim(); if (s) void recordEvent(runId, 'stderr', s.slice(0, 2000)); });
+    }
+    code = await new Promise((resolve) => { child.on('close', (c) => resolve(c ?? 0)); child.on('error', () => resolve(-1)); });
+    liveChildren.delete(runId);
+  } else {
+    // 로컬: 에이전트 출력을 내구 로그로 리다이렉트 + 파일 tail(재시작 내성). 종료는 __COXPIT_DONE__ 센티넬.
+    const fresh = opts?.fresh !== false;   // launch=새 로그 / steer=이어쓰기
+    const log = runLogPath(runId);
+    const wrapped = `{ ${cmd} ; } ${fresh ? '>' : '>>'} ${shq(log)} 2>&1; printf '\\n__COXPIT_DONE__:%s\\n' "$?" >> ${shq(log)}`;
+    let fromOffset = 0;
+    if (fresh) { await setRun(runId, { logOffset: 0, agentPid: 0 }); }
+    else { const r = (await db.select({ o: agentRuns.logOffset }).from(agentRuns).where(eq(agentRuns.id, runId)).limit(1))[0]; fromOffset = r?.o ?? 0; }
+    const child = spawnShellOn(machine, wrapped);
+    liveChildren.set(runId, child);
+    child.on('error', () => { /* 파이프 미사용 — 로그 tail 이 진실 */ });
+    const pid = child.pid ?? 0;
+    if (pid) await setRun(runId, { agentPid: pid });
+    const r = await tailRunLog(runId, provider, fromOffset, () => pidAlive(pid));
+    code = r.code; lastResult = r.lastResult;
+    liveChildren.delete(runId);
+  }
   const stat = await runShellOn(machine, `git -C ${shq(wtPath)} status --porcelain | wc -l`, 10000);
   const filesChanged = stat.ok ? parseInt(stat.stdout.trim(), 10) || 0 : 0;
@@ -443,7 +531,7 @@ async function runAgentChild(runId: number, machine: MachineTarget, wtPath: stri
   const wasStopped = stoppedRuns.delete(runId);
   const status = wasStopped ? 'stopped' : code === 0 ? 'done' : 'failed';
   const exitSummary = wasStopped ? 'stopped by user' : lastResult ? lastResult.slice(0, 500) : `exit ${code}`;
-  await setRun(runId, { status, endedAt: new Date(), filesChanged, exitSummary });
+  await setRun(runId, { status, endedAt: new Date(), filesChanged, exitSummary, agentPid: 0 });
   // 문서 산출물을 정착 시점에 스냅샷 — worktree 소멸(머지·Close) 후에도 렌더 뷰 유지. best-effort.
   if (filesChanged > 0) void snapshotRunDocs(runId);
   void notifySettle(runId, status, filesChanged, exitSummary);
@@ -528,9 +616,9 @@ export async function steerRun(runId: number, message: string, mode: 'work' | 'a
   const cmd = `cd ${shq(wt)} && ${envPrefix}${pidPrefix}{ ${resume}; }`;
   if (!isRemote && config.agentOrch) {
     const orchTimer = startOrchWatch(runId, wt, true);
-    void runAgentChild(runId, ctx.machine, wt, cmd, provider).finally(() => clearInterval(orchTimer));
+    void runAgentChild(runId, ctx.machine, wt, cmd, provider, { fresh: false }).finally(() => clearInterval(orchTimer));
   } else {
-    void runAgentChild(runId, ctx.machine, wt, cmd, provider);
+    void runAgentChild(runId, ctx.machine, wt, cmd, provider, { fresh: false });
   }
   return { ok: true, detail: 'steering' };
 }
@@ -554,6 +642,12 @@ export async function stopRun(runId: number): Promise<{ ok: boolean; detail: str
     // stop 요청을 정산으로 처리해 카드가 영원히 '진행 중'으로 남지 않게 한다.
     const zr = (await db.select().from(agentRuns).where(eq(agentRuns.id, runId)).limit(1))[0];
     if (zr && (zr.status === 'running' || zr.status === 'starting')) {
+      // 재-adopt 되어 tail 중인 살아있는 로컬 에이전트 — 프로세스 그룹 종료. tailer 가 stopped 로 정산.
+      if (zr.agentPid && pidAlive(zr.agentPid)) {
+        stoppedRuns.add(runId);
+        try { process.kill(-zr.agentPid, 'SIGTERM'); } catch { try { process.kill(zr.agentPid, 'SIGTERM'); } catch { /* gone */ } }
+        return { ok: true, detail: 'stopping (re-adopted agent)' };
+      }
       await setRun(runId, { status: 'stopped', endedAt: new Date(), exitSummary: 'orphaned (daemon restarted) — settled by stop' });
       await recordEvent(runId, 'meta', JSON.stringify({ orphanSettled: true }));
       return { ok: true, detail: 'no live process — settled as stopped' };
@@ -1446,15 +1540,67 @@ export async function listDocuments(): Promise<{ runs: Array<{
  * 부팅 정산 — 데몬 재시작 후 살아있는 자식이 있을 수 없는데 DB 가 running/starting 인
  * run(고아)을 failed 로 정리한다. workbench('open')는 에이전트가 없으므로 대상 아님.
  */
+/** 재-adopt: 살아있는 로컬 run 의 로그를 offset 부터 이어 tail → 완료 시 정산. status 는 running 유지. */
+async function reAdoptRun(run: typeof agentRuns.$inferSelect): Promise<void> {
+  adoptedRuns.add(run.id);
+  await recordEvent(run.id, 'meta', JSON.stringify({ reAdopted: true }));
+  const ctx = await loadContext(run.id);
+  const provider = getProvider(run.agent || 'claude-code');
+  const machine: MachineTarget = ctx?.machine ?? { slug: 'local', kind: 'local', address: '', sshUser: '' };
+  const wasStopped0 = stoppedRuns.has(run.id);
+  const { code, lastResult } = await tailRunLog(run.id, provider, run.logOffset ?? 0, () => pidAlive(run.agentPid));
+  adoptedRuns.delete(run.id);
+  const stat = await runShellOn(machine, `git -C ${shq(run.worktreePath)} status --porcelain | wc -l`, 10000);
+  const filesChanged = stat.ok ? parseInt(stat.stdout.trim(), 10) || 0 : 0;
+  const wasStopped = stoppedRuns.delete(run.id) || wasStopped0;
+  const status = wasStopped ? 'stopped' : code === 0 ? 'done' : 'failed';
+  const exitSummary = wasStopped ? 'stopped by user' : lastResult ? lastResult.slice(0, 500) : `exit ${code}`;
+  await setRun(run.id, { status, endedAt: new Date(), filesChanged, exitSummary, agentPid: 0 });
+  if (filesChanged > 0) void snapshotRunDocs(run.id);
+  void notifySettle(run.id, status, filesChanged, exitSummary);
+}
+/**
+ * 부팅 시 이전 인스턴스의 라이브 run 정산 — 이제 무조건 failed 가 아니라:
+ *  ① 에이전트 프로세스(agentPid)가 살아있으면 로그를 이어 tail(재-adopt) → running 유지
+ *  ② 이미 로그에 __COXPIT_DONE__ 이 있거나 프로세스 죽음 → 그 결과로 정산
+ *  ③ 그 외(원격·pid 없음) → orphaned failed (기존 동작, worktree/diff 보존)
+ * 반환 = 재-adopt 된 run 수(정산된 고아는 미포함).
+ */
 export async function reconcileOrphanRuns(): Promise<number> {
   const stale = (await db.select().from(agentRuns)).filter(
     (r) => r.status === 'running' || r.status === 'starting',
   );
+  let adopted = 0;
   for (const r of stale) {
-    await setRun(r.id, { status: 'failed', endedAt: new Date(), exitSummary: 'orphaned by daemon restart' });
+    if (r.agentPid && pidAlive(r.agentPid)) {
+      // 아직 살아있는 로컬 에이전트 — 이어받는다(백그라운드 tail).
+      void reAdoptRun(r);
+      adopted++;
+      continue;
+    }
+    // 죽었지만 로그에 완료 센티넬이 있으면 그 결과로 정산(다운타임 중 끝난 경우).
+    const log = runLogPath(r.id);
+    let doneCode: number | null = null;
+    try {
+      if (existsSync(log)) {
+        const tail = (await readFile(log, 'utf8')).slice(-4000);
+        const m = /__COXPIT_DONE__:(-?\d+)/.exec(tail);
+        if (m) doneCode = parseInt(m[1] ?? '0', 10) || 0;
+      }
+    } catch { /* ignore */ }
+    if (doneCode !== null) {
+      const stat = await runShellOn({ slug: 'local', kind: 'local', address: '', sshUser: '' }, `git -C ${shq(r.worktreePath)} status --porcelain | wc -l`, 10000);
+      const filesChanged = stat.ok ? parseInt(stat.stdout.trim(), 10) || 0 : 0;
+      const status = doneCode === 0 ? 'done' : 'failed';
+      await setRun(r.id, { status, endedAt: new Date(), filesChanged, exitSummary: `settled on restart (exit ${doneCode})`, agentPid: 0 });
+      if (filesChanged > 0) void snapshotRunDocs(r.id);
+      continue;
+    }
+    await setRun(r.id, { status: 'failed', endedAt: new Date(), exitSummary: 'orphaned by daemon restart', agentPid: 0 });
     await recordEvent(r.id, 'error', 'daemon restarted while this run was live — settled as failed (worktree/branch preserved; diff still reviewable)');
   }
-  return stale.length;
+  return adopted;
 }
 /**
@@ -1614,6 +1760,8 @@ export async function cleanupRun(runId: number): Promise<{ ok: boolean; detail:
   if (!ctx || !run || !run.worktreePath) return { ok: false, detail: 'no worktree' };
   // worktree 를 지우기 전에 문서 스냅샷(정착 안 하는 워크벤치·수정편집도 포착). best-effort.
   await snapshotRunDocs(runId).catch(() => { /* 스냅샷 실패는 정리를 막지 않음 */ });
+  // 내구 실행 로그도 정리(무한 증가 방지). best-effort. (아래 지역변수 rm 과 이름 충돌 회피로 unlink 사용)
+  try { await unlink(runLogPath(runId)); } catch { /* gone */ }
   // 원격에 잔존 에이전트가 있으면 worktree 제거 전에 죽인다(파일 잠금·좀비 방지).
   if (ctx.machine.kind !== 'local' && ctx.machine.address !== '') {
     await runShellOn(ctx.machine, remoteKillScript(run.worktreePath), 15000);

package/src/server.ts CHANGED Viewed

@@ -25,6 +25,7 @@ import { addSink, removeSink, broadcast } from './hub';
 import { getProvider, listProviders } from './providers';
 import { remoteState, setServe, setFunnel } from './remote';
 import { BOARD_HTML } from './board';
+import { COCKPIT_HTML } from './cockpit';
 const require_ = createRequire(import.meta.url);
@@ -203,6 +204,8 @@ export async function buildServer(): Promise<FastifyInstance> {
   // 플릿 보드(단일 페이지). 인증 게이트 적용됨(무인증 요청은 게이트가 login/setup 페이지로 응답).
   app.get('/', async (_req, reply) => reply.type('text/html').send(BOARD_HTML));
+  // 터미널 우선 셸(병행 개발) — 백엔드는 보드와 공유. Phase 5에서 데스크톱 기본을 여기로 플립 예정.
+  app.get('/cockpit', async (_req, reply) => reply.type('text/html').send(COCKPIT_HTML));
   // ─── 접근키 인증(access-key) ────────────────────────────────────
   // 요청이 tunnel/https 를 탔나 — Secure 쿠키 여부 결정용.