npm - coxpit - Versions diffs - 3.5.0 → 3.7.0 - Mend

coxpit 3.5.0 → 3.7.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 (6) hide show

package/README.md CHANGED Viewed

@@ -75,6 +75,7 @@ Your keys and login never touch coxpit's config or database.
 | `COXPIT_CODEX_BIN` | `codex` | Codex CLI command (optional second provider) |
 | `COXPIT_CODEX_SANDBOX` | `workspace-write` | Codex sandbox policy (`danger-full-access` for full autonomy) |
 | `COXPIT_WEBHOOK_URL` | — | POSTs `{event:"run.settled",run:{...}}` when a run finishes — wire it to Telegram, Slack, anything |
+| `COXPIT_PUBLIC_URL` | — | if set, the webhook payload adds `url: <base>/?run=<id>` — tap it on your phone and the board opens that run |
 Running on the open internet? Put it behind your own front door (Tailscale, Cloudflare Access, a reverse proxy with TLS) and keep basic auth on — it exposes shells.

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "coxpit",
-  "version": "3.5.0",
+  "version": "3.7.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

@@ -4,7 +4,7 @@ export const BOARD_HTML = /* html */ `<!doctype html>
 <html lang="en">
 <head>
 <meta charset="utf-8" />
-<meta name="viewport" content="width=device-width, initial-scale=1" />
+<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
 <title>coxpit · fleet</title>
 <link rel="stylesheet" href="/vendor/xterm.css" />
 <style>
@@ -290,27 +290,73 @@ export const BOARD_HTML = /* html */ `<!doctype html>
   .cmp-review code{font-family:var(--mono);font-size:.9em;background:#0e1118;padding:1px 5px;border-radius:4px;color:var(--brand)}
   .cmp-review p{margin:0 0 8px}
+  /* ── doc mode (rendered output) ─────────── */
+  .doc-h{font-family:var(--mono);font-size:10.5px;color:var(--brand);padding:8px 0 4px;
+    border-bottom:1px solid var(--line);margin-bottom:8px;word-break:break-all}
+  .doc-md{font-size:13px;line-height:1.65;color:var(--muted);margin-bottom:16px;font-family:var(--sans)}
+  .doc-md h1,.doc-md h2{font-size:14px;color:var(--ink);margin:12px 0 6px}
+  .doc-md h3{font-size:12.5px;color:var(--ink);margin:10px 0 4px}
+  .doc-md ul{margin:4px 0 8px;padding-left:18px}
+  .doc-md li{margin-bottom:3px}
+  .doc-md strong{color:var(--ink)}
+  .doc-md code{font-family:var(--mono);font-size:.9em;background:#0e1118;padding:1px 5px;border-radius:4px;color:var(--brand)}
+  .doc-md p{margin:0 0 8px}
+  .doc-frame{width:100%;height:420px;border:1px solid var(--line);border-radius:8px;background:#fff;margin-bottom:16px}
+  .pane-tgl{margin-left:auto;font-size:10px;padding:2px 9px;text-transform:none;letter-spacing:0}
+  /* run 모달의 diff 라인 = steer 참조 클릭 타깃 */
+  #mDiffWrap .dl-line{cursor:pointer;border-radius:3px}
+  #mDiffWrap .dl-line:hover{background:rgba(78,201,176,.09)}
   /* ── terminal ───────────────────────────── */
   .term-body{flex:1;min-height:0;background:#0b0d12;padding:8px 4px 4px 10px}
   #xterm{width:100%;height:100%}
   .term-hint{font-family:var(--mono);font-size:11px;color:var(--faint)}
+  /* ── mobile · the pocket pass ───────────── */
+  .menu-btn{display:none;font-size:15px;padding:5px 10px}
+  .scrim{position:fixed;inset:0;top:54px;background:rgba(5,7,10,.5);z-index:29;display:none}
   @media (max-width:860px){
-    .layout{grid-template-columns:1fr}
-    aside{border-right:none;border-bottom:1px solid var(--line)}
-    .modal-b{grid-template-columns:1fr}
+    .layout{grid-template-columns:1fr;min-height:calc(100dvh - 55px)}
+    /* 사이드바 = 오프캔버스 드로어 — 플릿이 첫 화면, 런처는 ☰ 뒤에 */
+    .menu-btn{display:inline-flex}
+    aside{position:fixed;top:54px;bottom:0;left:0;width:min(86vw,340px);z-index:30;
+      transform:translateX(-103%);transition:transform .22s ease;overflow-y:auto;
+      -webkit-overflow-scrolling:touch;box-shadow:var(--shadow)}
+    aside.open{transform:translateX(0)}
+    .scrim.on{display:block}
+    header{padding:0 12px;gap:9px}
+    .brand .sub,.daemon-badge,.machines{display:none}
+    main{padding:14px}
+    .grid{grid-template-columns:1fr}
+    /* 모달 = 풀블리드 */
+    .overlay.open{padding:0}
+    .modal,.modal.wide{width:100%;height:100dvh;max-height:none;border:none;border-radius:0}
+    .modal-b{grid-template-columns:1fr;grid-template-rows:1fr 1fr}
     .pane{border-right:none;border-bottom:1px solid var(--line)}
+    .modal-f{flex-wrap:wrap;padding:10px 12px}
+    #steerRow .seg{flex:0 0 108px}
+    /* iOS: 16px 미만 input 포커스 시 강제 줌 — 폰에서만 16px 로 */
+    input,textarea,select,.dd-btn{font-size:16px}
+    /* 온보딩 패널이 좁은 화면을 넘치지 않게 */
+    .empty{padding:24px 0}
+    .setup{max-width:100%;width:100%;margin:8px 0}
+    .chk .v{min-width:0}
+    .cmp{flex-direction:column;overflow-y:auto;overflow-x:hidden}
+    .cmp-col{min-width:0;border-right:none;border-bottom:1px solid var(--line);flex:0 0 auto;max-height:72vh}
   }
+  @media (prefers-reduced-motion:reduce){aside{transition:none}}
 </style>
 </head>
 <body>
 <header>
+  <button class="btn-ghost sm menu-btn" id="menuBtn" aria-label="open launcher">☰</button>
   <div class="brand"><span class="mark">coxpit</span><span class="sub">fleet console</span></div>
   <span class="daemon-badge" id="daemonBadge" style="display:none"></span>
   <div class="ws"><span class="dot" id="wsdot"></span><span id="wstext">connecting</span></div>
   <button class="btn-ghost sm" id="bell" title="notify when a run settles">🔕</button>
   <div class="machines" id="machines"></div>
 </header>
+<div class="scrim" id="scrim"></div>
 <div class="layout">
   <aside>
     <div class="sect">
@@ -403,8 +449,9 @@ export const BOARD_HTML = /* html */ `<!doctype html>
         <div class="pane-c tl" id="mTimeline"></div>
       </div>
       <div class="pane">
-        <div class="pane-h">Diff <span id="mStat" style="text-transform:none;letter-spacing:0"></span></div>
-        <div class="pane-c"><pre class="diff" id="mDiff">loading…</pre></div>
+        <div class="pane-h" style="display:flex;align-items:center;gap:8px">Diff <span id="mStat" style="text-transform:none;letter-spacing:0"></span>
+          <button class="btn-ghost sm pane-tgl" id="mDocsTgl" hidden>Rendered</button></div>
+        <div class="pane-c" id="mDiffWrap"><pre class="diff" id="mDiff">loading…</pre></div>
       </div>
     </div>
     <div class="modal-f" id="steerRow" style="border-top:1px solid var(--line)">
@@ -434,6 +481,7 @@ export const BOARD_HTML = /* html */ `<!doctype html>
     <div class="modal-h">
       <span class="title" id="cmpTitle">Compare</span>
       <button class="btn sm" id="cmpAI">AI review</button>
+      <button class="btn-ghost sm" id="cmpDocsTgl">Rendered</button>
       <button class="btn-ghost sm" id="cmpRefresh">Refresh</button>
       <button class="x" id="cmpClose" aria-label="close">×</button>
     </div>
@@ -515,6 +563,7 @@ let repos = [], machines = [], captures = [];
 const $ = (id) => document.getElementById(id);
 const esc = (s) => String(s).replace(/[&<>]/g, (c) => ({'&':'&amp;','<':'&lt;','>':'&gt;'}[c]));
+const escA = (s) => esc(s).replace(/"/g, '&quot;');
 const statusColor = (s) => 'var(--s-' + (s||'pending') + ', var(--muted))';
 /* ── custom toast / confirm (시스템 alert·confirm 대체) ── */
@@ -687,12 +736,23 @@ function summarize(kind, payload){
 }
 function diffHTML(text){
   if (!text.trim()) return '<span style="color:var(--faint)">no changes</span>';
+  let file = '';
   return text.split('\\n').map(l=>{
     const e = esc(l);
-    if (l.startsWith('diff --git')||l.startsWith('+++')||l.startsWith('---')) return '<span class="dl-file">'+e+'</span>';
+    if (l.startsWith('+++')){
+      const f = l.replace(/^\\+\\+\\+ [ab]\\//,'').trim();
+      if (f && f !== '/dev/null') file = f;
+      return '<span class="dl-file">'+e+'</span>';
+    }
+    if (l.startsWith('---')){
+      const f = l.replace(/^--- [ab]\\//,'').trim();
+      if (f && f !== '/dev/null') file = f;
+      return '<span class="dl-file">'+e+'</span>';
+    }
+    if (l.startsWith('diff --git')) return '<span class="dl-file">'+e+'</span>';
     if (l.startsWith('@@')) return '<span class="dl-hunk">'+e+'</span>';
-    if (l.startsWith('+')) return '<span class="dl-add">'+e+'</span>';
-    if (l.startsWith('-')) return '<span class="dl-del">'+e+'</span>';
+    if (l.startsWith('+')) return '<span class="dl-add dl-line" data-f="'+escA(file)+'" title="click to reference in a steer">'+e+'</span>';
+    if (l.startsWith('-')) return '<span class="dl-del dl-line" data-f="'+escA(file)+'" title="click to reference in a steer">'+e+'</span>';
     return e;
   }).join('\\n');
 }
@@ -868,10 +928,12 @@ function notifySettleUI(ev){
   if (!notifyOn) return;
   const t = tasks.get(ev.taskId ?? (runs.get(ev.runId)||{}).taskId);
   try {
-    new Notification('coxpit · r'+ev.runId+' '+ev.status, {
+    const n = new Notification('coxpit · r'+ev.runId+' '+ev.status, {
       body: (t ? t.title+' — ' : '') + (ev.filesChanged??0)+' file(s) changed',
       tag: 'coxpit-r'+ev.runId,
     });
+    // 딥링크 — 알림 탭이 곧 그 run 의 모달
+    n.onclick = ()=>{ try{ window.focus(); }catch{} if (runs.has(ev.runId)) openModal(ev.runId); n.close(); };
   } catch {}
 }
@@ -925,17 +987,59 @@ function paintModal(){
   ).join('') || '<span style="color:var(--faint)">no events yet</span>';
 }
 async function loadDiff(){
-  if (openRunId==null) return;
-  $('mDiff').textContent = 'loading…'; $('mStat').textContent='';
+  if (openRunId==null || docMode) return;
+  const pre = $('mDiff'); if (!pre) return;
+  pre.textContent = 'loading…'; $('mStat').textContent='';
   try{
     const d = await fetch('/api/runs/'+openRunId+'/diff').then(x=>x.json());
-    if (!d.ok){ $('mDiff').textContent = d.stat||'no worktree'; return; }
+    if (!d.ok){ pre.textContent = d.stat||'no worktree'; return; }
     const files = d.stat ? d.stat.split('\\n').filter(Boolean).length : 0;
     $('mStat').textContent = files ? '· '+files+' file'+(files>1?'s':'') : '· clean';
-    $('mDiff').innerHTML = diffHTML(d.diff||'');
-  }catch{ $('mDiff').textContent = 'diff failed'; }
+    // 변경분에 문서(md/html)가 있으면 Rendered 토글 노출
+    $('mDocsTgl').hidden = !/\\.(md|markdown|html?|htm)$/im.test(d.stat||'');
+    pre.innerHTML = diffHTML(d.diff||'');
+  }catch{ pre.textContent = 'diff failed'; }
+}
+/* ── doc 모드 — diff 대신 렌더된 문서 산출물 ── */
+let docMode = false;
+function docsHTML(docs){
+  if (!docs.length) return '<span style="color:var(--faint)">no changed docs (md/html) in this worktree</span>';
+  return docs.map(d=>'<div class="doc-h">'+esc(d.path)+'</div>'
+    + (d.kind==='md'
+        ? '<div class="doc-md">'+mdLite(d.content)+'</div>'
+        : '<iframe class="doc-frame" sandbox="" srcdoc="'+escA(d.content)+'"></iframe>')).join('');
+}
+async function paintDocs(){
+  if (openRunId==null) return;
+  $('mDiffWrap').innerHTML = '<span style="color:var(--faint)">rendering…</span>';
+  try{
+    const d = await fetch('/api/runs/'+openRunId+'/docs').then(x=>x.json());
+    $('mDiffWrap').innerHTML = docsHTML(d.docs||[]);
+  }catch{ $('mDiffWrap').textContent = 'docs failed'; }
+}
+function setDocMode(on){
+  docMode = on;
+  $('mDocsTgl').textContent = on ? 'Diff' : 'Rendered';
+  if (on) paintDocs();
+  else { $('mDiffWrap').innerHTML = '<pre class="diff" id="mDiff">loading…</pre>'; loadDiff(); }
+}
+$('mDocsTgl').addEventListener('click', ()=>setDocMode(!docMode));
+/* diff 라인 클릭 → steer 입력에 참조 인용 (정착 run 에서만 — steerRow 표시 중일 때) */
+$('mDiffWrap').addEventListener('click', (e)=>{
+  const t = e.target.closest ? e.target.closest('.dl-line') : null;
+  if (!t) return;
+  if ($('steerRow').style.display === 'none') return;
+  const line = (t.textContent||'').slice(1).trim().slice(0,120);
+  const f = t.dataset.f || '';
+  $('steerInput').value = (f ? f+': ' : '') + '"'+line+'" — ';
+  $('steerInput').focus();
+});
+function openModal(id){
+  openRunId = id;
+  if (docMode){ docMode=false; $('mDocsTgl').textContent='Rendered'; $('mDiffWrap').innerHTML='<pre class="diff" id="mDiff">loading…</pre>'; }
+  $('mDocsTgl').hidden = true;
+  paintModal(); $('overlay').classList.add('open'); loadDiff();
 }
-function openModal(id){ openRunId = id; paintModal(); $('overlay').classList.add('open'); loadDiff(); }
 function closeModal(){ openRunId=null; $('overlay').classList.remove('open'); }
 /* ── select mode (integrate) ── */
 let selectMode = false;
@@ -1059,13 +1163,20 @@ $('mCloseTask').addEventListener('click', async ()=>{
 /* ── compare view ── */
 let cmpTaskId = null;
+let cmpDocMode = false;
 async function openCompare(taskId){
   cmpTaskId = taskId;
+  cmpDocMode = false; $('cmpDocsTgl').textContent = 'Rendered';
   $('cmpReview').hidden = true; $('cmpReview').innerHTML = '';
   $('cmpOverlay').classList.add('open');
   $('cmpBody').innerHTML = '<div class="empty" style="flex:1">loading…</div>';
   await paintCompare();
 }
+$('cmpDocsTgl').addEventListener('click', async ()=>{
+  cmpDocMode = !cmpDocMode;
+  $('cmpDocsTgl').textContent = cmpDocMode ? 'Diff' : 'Rendered';
+  await paintCompare();
+});
 async function paintCompare(){
   if (cmpTaskId==null) return;
   let d;
@@ -1092,6 +1203,15 @@ async function paintCompare(){
           + '<button class="btn sm" data-merge="'+r.id+'"'+(mergeable?'':' disabled')+'>Merge this</button>')
       + '</div></div>';
   }).join('');
+  // doc 모드 — 각 열의 diff 를 렌더된 문서로 치환 (열별 비동기, 도착 순)
+  if (cmpDocMode){
+    for (const r of d.runs){
+      fetch('/api/runs/'+r.id+'/docs').then(x=>x.json()).then(j=>{
+        const col = document.querySelector('.cmp-col[data-run="'+r.id+'"] .cmp-diff');
+        if (col && cmpDocMode) col.innerHTML = docsHTML(j.docs||[]);
+      }).catch(()=>{});
+    }
+  }
 }
 $('cmpBody').addEventListener('click', async (e)=>{
   const prBtn = e.target.closest('button[data-pr]');
@@ -1323,6 +1443,7 @@ $('repoForm').addEventListener('submit', async (e)=>{
 });
 $('taskForm').addEventListener('submit', async (e)=>{
   e.preventDefault();
+  setDrawer(false); // 모바일: 발사하면 드로어를 닫고 플릿을 보여준다
   if (lTab === 'goal') return submitGoal();
   if (lTab === 'bench') return submitBench();
   const repoId = Number($('taskRepo').value);
@@ -1371,7 +1492,21 @@ let savedAgent = null;
 try { savedAgent = localStorage.getItem('coxpit.agent'); } catch {}
 if (savedAgent === 'codex') setProvider('codex', false);
-hydrate().then(connectWS);
+/* ── mobile drawer ── */
+const asideEl = document.querySelector('aside');
+function setDrawer(on){ asideEl.classList.toggle('open', on); $('scrim').classList.toggle('on', on); }
+$('menuBtn').addEventListener('click', ()=>setDrawer(!asideEl.classList.contains('open')));
+$('scrim').addEventListener('click', ()=>setDrawer(false));
+/* 딥링크 — /?run=N 이면 하이드레이션 후 그 run 모달을 연다 (웹훅 링크·알림용) */
+function openFromURL(){
+  const q = new URLSearchParams(location.search).get('run');
+  const id = Number(q);
+  if (q && runs.has(id)){ openModal(id); }
+  if (q) history.replaceState(null, '', location.pathname);
+}
+hydrate().then(()=>{ connectWS(); openFromURL(); });
 </script>
 </body>
 </html>`;

package/src/config.ts CHANGED Viewed

@@ -65,6 +65,8 @@ export const config = {
   sshKey: process.env.COXPIT_SSH_KEY ?? '',
   // run 정착 시 POST 할 웹훅(선택) — 텔레그램 브릿지 등 사용자 연결용.
   webhookUrl: process.env.COXPIT_WEBHOOK_URL ?? '',
+  // 웹훅 payload 의 딥링크 base(선택) — 설정 시 url: <base>/?run=<id> 포함 (폰에서 탭 → 그 run)
+  publicUrl: (process.env.COXPIT_PUBLIC_URL ?? '').replace(/\/+$/, ''),
   agent: {
     // 기본 드라이런(모의 에이전트). 실제 CLI 실행은 켤 때만(크레딧 소모).
     real: process.env.COXPIT_AGENT_REAL === '1',

package/src/orchestrator.ts CHANGED Viewed

@@ -218,6 +218,8 @@ async function notifySettle(runId: number, status: string, filesChanged: number,
       body: JSON.stringify({
         event: 'run.settled',
         run: { id: runId, status, filesChanged, exitSummary: exitSummary.slice(0, 300), task: tr[0]?.title ?? '' },
+        // COXPIT_PUBLIC_URL 설정 시 폰에서 탭 → 보드가 그 run 모달을 딥링크로 연다
+        ...(config.publicUrl ? { url: `${config.publicUrl}/?run=${runId}` } : {}),
       }),
       signal: AbortSignal.timeout(8000),
     });
@@ -325,6 +327,35 @@ export async function getRunDiff(runId: number): Promise<{ ok: boolean; diff: st
   return { ok: true, stat: stat.trim(), diff: diff.slice(0, 200_000) };
 }
+/**
+ * Doc 모드 — run worktree 의 변경 파일 중 문서(md/html)만 내용째 회수.
+ * 보드가 diff 대신 "렌더된 산출물"을 보여줄 때 사용 (읽기 전용).
+ */
+export async function getRunDocs(runId: number): Promise<{
+  ok: boolean; docs: Array<{ path: string; kind: 'md' | 'html'; content: string }>; detail?: string;
+}> {
+  const ctx = await loadContext(runId);
+  const rr = await db.select().from(agentRuns).where(eq(agentRuns.id, runId)).limit(1);
+  const run = rr[0];
+  if (!ctx || !run || !run.worktreePath) return { ok: false, docs: [], detail: 'no worktree' };
+  const wt = run.worktreePath;
+  // 변경 파일 목록 = tracked 수정 + untracked (status --porcelain 경로 필드)
+  const ls = await runShellOn(ctx.machine, `git -C ${shq(wt)} status --porcelain`, 15000);
+  if (!ls.ok) return { ok: false, docs: [], detail: 'status failed' };
+  const kindOf = (p: string): 'md' | 'html' | null =>
+    /\.(md|markdown)$/i.test(p) ? 'md' : /\.(html?|htm)$/i.test(p) ? 'html' : null;
+  const paths = ls.stdout.split('\n')
+    .map((l) => l.slice(3).trim().replace(/^"|"$/g, ''))
+    .filter((p) => p && kindOf(p) !== null)
+    .slice(0, 6); // 문서 비교 용도 — 상한
+  const docs: Array<{ path: string; kind: 'md' | 'html'; content: string }> = [];
+  for (const p of paths) {
+    const cat = await runShellOn(ctx.machine, `head -c 200000 ${shq(ppath.join(wt, p))}`, 15000);
+    if (cat.ok) docs.push({ path: p, kind: kindOf(p)!, content: cat.stdout });
+  }
+  return { ok: true, docs };
+}
 /**
  * base 동기화 — 오래 사는 세션의 worktree 에 base 브랜치 최신을 머지한다.
  * 충돌 시 자동 abort — 그땐 steer 로 에이전트에게 머지를 맡기라고 안내.

package/src/server.ts CHANGED Viewed

@@ -12,7 +12,7 @@ import { db } from './db';
 import { machines, repos, tasks, agentRuns, agentEvents, designCaptures } from './db/schema';
 import { BOOKMARKLET_JS } from './design';
 import { runShellOn, shq } from './exec';
-import { launchRun, cleanupRun, stopRun, getRunDiff, mergeRun, getRunTermInfo, steerRun, exportRun, prRun, integrateRuns, planFanout, reviewTask, syncRun, openWorkbench } from './orchestrator';
+import { launchRun, cleanupRun, stopRun, getRunDiff, getRunDocs, mergeRun, getRunTermInfo, steerRun, exportRun, prRun, integrateRuns, planFanout, reviewTask, syncRun, openWorkbench } from './orchestrator';
 import { openTerm } from './term';
 import { addSink, removeSink, broadcast } from './hub';
 import { getProvider, listProviders } from './providers';
@@ -509,6 +509,14 @@ export async function buildServer(): Promise<FastifyInstance> {
     return getRunDiff(id);
   });
+  // Doc 모드 — 변경된 문서(md/html)를 내용째 (렌더 비교용, 읽기 전용)
+  app.get('/api/runs/:id/docs', async (req, reply) => {
+    const id = Number((req.params as { id: string }).id);
+    const rr = await db.select().from(agentRuns).where(eq(agentRuns.id, id)).limit(1);
+    if (!rr[0]) return reply.code(404).send({ error: 'not found' });
+    return getRunDocs(id);
+  });
   // 라이브 스트림 좌석 — 오케스트레이터가 run/event 를 여기로 broadcast.
   app.get('/ws', { websocket: true }, (socket) => {
     addSink(socket);