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

coxpit 4.3.1 → 4.6.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 (9) hide show

package/src/board.ts CHANGED Viewed

@@ -152,6 +152,56 @@ export const BOARD_HTML = /* html */ `<!doctype html>
   .gband.folded .gband-grid{display:none}
   .gband-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(360px,1fr));gap:14px}
   .attempt{color:var(--brand);opacity:.8}
+  /* ── goal workroom (v4.6) — 한 goal 을 여는 단일 방 ── */
+  .gband-open{margin-left:2px}
+  .room{width:min(920px,96vw);max-height:90vh;background:var(--surface);border:1px solid var(--line);
+    border-radius:16px;display:flex;flex-direction:column;overflow:hidden;box-shadow:var(--shadow)}
+  .rh{display:flex;align-items:center;gap:10px;padding:14px 18px;border-bottom:1px solid var(--line);
+    background:linear-gradient(180deg,var(--brand-dim),transparent)}
+  .rh .rh-glyph{color:var(--brand);font-family:var(--mono);font-size:15px}
+  .rh .rh-t{font-weight:600;font-size:14px;flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
+  .rh .rh-n{font-family:var(--mono);font-size:11px;color:var(--faint)}
+  .rh .x{background:transparent;border:none;color:var(--muted);font-size:19px;cursor:pointer;
+    padding:2px 9px;border-radius:6px;line-height:1}
+  .rh .x:hover{color:var(--ink);background:var(--surface2)}
+  .chips{display:flex;flex-wrap:wrap;gap:7px;padding:12px 18px;border-bottom:1px solid var(--line)}
+  .room .chip{cursor:pointer;transition:border-color .15s,filter .15s}
+  .room .chip:hover{filter:brightness(1.15)}
+  .room .chip .cid{font-weight:600}
+  .room .chip .cmeta{opacity:.7;text-transform:none;letter-spacing:0}
+  .room .chip.new{border-style:dashed}
+  .body{overflow:auto;flex:1;min-height:120px}
+  .feed{display:flex;flex-direction:column;gap:6px;padding:12px 18px;font-family:var(--mono);font-size:11.5px}
+  .feed .fl{display:flex;gap:9px;align-items:baseline;min-width:0}
+  .feed .fl .who{min-width:52px;flex:none;opacity:.9}
+  .feed .fl .ft{color:var(--muted);word-break:break-word;flex:1}
+  .feed .fl.mark .who{color:var(--brand)}
+  .feed .empty-note{color:var(--faint)}
+  .conv{display:flex;flex-direction:column;gap:12px;padding:12px 18px;font-size:12.5px}
+  .conv .empty-note{color:var(--faint);font-family:var(--mono);font-size:11.5px}
+  .conv .turn{display:flex;flex-direction:column;gap:3px}
+  .conv .turn .role{font-family:var(--mono);font-size:9.5px;font-weight:600;text-transform:uppercase;letter-spacing:.06em}
+  .conv .turn.you .role{color:var(--muted)}
+  .conv .turn.coord .role{color:var(--brand)}
+  .conv .turn .msg{color:var(--ink);white-space:pre-wrap;word-break:break-word;line-height:1.55}
+  .conv .turn.you .msg{color:var(--muted)}
+  .conv .turn .ro-note{font-family:var(--mono);font-size:9.5px;color:var(--faint);letter-spacing:.02em}
+  .send-only{display:flex;gap:8px;align-items:center}
+  .send-only .ro-hint{flex:1;font-family:var(--mono);font-size:10px;color:var(--faint);letter-spacing:.02em}
+  .composer{border-top:1px solid var(--line);padding:12px 18px;display:flex;flex-direction:column;gap:8px}
+  .composer .comp-seg{flex:0 0 auto}
+  .composer .comp-hint{font-family:var(--mono);font-size:10.5px;color:var(--faint);letter-spacing:.02em}
+  .composer textarea{min-height:52px}
+  .verbs{display:flex;gap:8px;align-items:center}
+  .verbs .grow{flex:1}
+  .conv-menu{position:relative}
+  .conv-pop{position:absolute;bottom:calc(100% + 6px);right:0;z-index:5;background:var(--surface2);
+    border:1px solid var(--line-hi);border-radius:9px;box-shadow:var(--shadow);padding:4px;min-width:200px;display:none}
+  .conv-menu.open .conv-pop{display:block}
+  .conv-pop button{display:block;width:100%;text-align:left;background:transparent;border:none;
+    color:var(--muted);font-size:12.5px;padding:8px 10px;border-radius:6px;cursor:pointer}
+  .conv-pop button:hover{background:var(--surface);color:var(--ink)}
   /* ── active/archive view seg + archive list ── */
   .view-seg{padding:2px;gap:2px}
   .view-seg .seg-opt{padding:4px 12px;font-size:11.5px}
@@ -241,6 +291,52 @@ export const BOARD_HTML = /* html */ `<!doctype html>
   .setup-steps li{margin-bottom:7px}
   .setup-steps b{color:var(--ink)}
+  /* ── remote access card (v4.5) ──────────── */
+  .rmt{font-size:13px;color:var(--muted)}
+  .rmt-line{margin:2px 0 10px;line-height:1.55}
+  .rmt-name{font-family:var(--mono);font-size:12px;color:var(--ink);background:#0e1118;
+    border:1px solid var(--line);border-radius:6px;padding:2px 7px;word-break:break-all}
+  .rmt-row{display:flex;align-items:center;gap:10px;padding:9px 0;border-top:1px solid var(--line)}
+  .rmt-row .rmt-l{flex:1;min-width:0}
+  .rmt-row .rmt-t{color:var(--ink);font-weight:600;font-size:13px}
+  .rmt-row .rmt-d{color:var(--faint);font-size:11.5px;margin-top:2px}
+  .rmt-row.risky .rmt-t{color:var(--s-failed)}
+  .rmt-url{display:flex;align-items:center;gap:7px;margin:6px 0 2px}
+  .rmt-url code{flex:1;min-width:0;font-family:var(--mono);font-size:11.5px;color:var(--brand);
+    background:#0e1118;border:1px solid var(--line);border-radius:6px;padding:5px 8px;
+    overflow-x:auto;white-space:nowrap}
+  .rmt-warn{color:var(--s-failed);font-size:11.5px;margin:5px 0 2px;line-height:1.5}
+  .rmt-note{color:var(--faint);font-size:11.5px;margin:4px 0 2px;line-height:1.5}
+  /* toggle switch — quiet until on (brand) or risky (red) */
+  .tgl{position:relative;width:38px;height:22px;flex:none;background:var(--surface2);
+    border:1px solid var(--line);border-radius:999px;cursor:pointer;transition:background .15s,border-color .15s}
+  .tgl::after{content:'';position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;
+    background:var(--muted);transition:transform .15s,background .15s}
+  .tgl.on{background:var(--brand-dim);border-color:var(--brand)}
+  .tgl.on::after{transform:translateX(16px);background:var(--brand)}
+  .tgl.risky.on{background:rgba(226,91,103,.16);border-color:var(--s-failed)}
+  .tgl.risky.on::after{background:var(--s-failed)}
+  .tgl[aria-disabled="true"]{opacity:.4;cursor:not-allowed}
+  .rmt-cp{font-family:var(--mono);font-size:11px;color:var(--muted);background:var(--surface2);
+    border:1px solid var(--line);border-radius:6px;padding:5px 10px;cursor:pointer;flex:none}
+  .rmt-cp:hover{color:var(--ink);border-color:var(--line-hi)}
+  /* collapsible recipes / url table */
+  .rmt-more{margin-top:12px;border-top:1px solid var(--line);padding-top:10px}
+  .rmt-more summary{cursor:pointer;font-size:12.5px;color:var(--muted);list-style:none;user-select:none}
+  .rmt-more summary::-webkit-details-marker{display:none}
+  .rmt-more summary::before{content:'▸ ';color:var(--faint)}
+  .rmt-more[open] summary::before{content:'▾ '}
+  .rmt-more pre{margin:8px 0 4px;padding:10px 12px;background:#0e1118;border:1px solid var(--line);
+    border-radius:8px;font-family:var(--mono);font-size:11px;color:var(--muted);overflow-x:auto;white-space:pre}
+  .rmt-cap{color:var(--faint);font-size:11px;margin:2px 0 10px;line-height:1.5}
+  .rmt-tbl{width:100%;border-collapse:collapse;margin:8px 0 2px;font-size:11.5px}
+  .rmt-tbl th,.rmt-tbl td{text-align:left;padding:5px 8px;border-bottom:1px solid var(--line);
+    color:var(--muted);vertical-align:top}
+  .rmt-tbl th{color:var(--faint);font-family:var(--mono);font-size:10px;text-transform:uppercase;letter-spacing:.1em}
+  .rmt-tbl code{font-family:var(--mono);font-size:10.5px;color:var(--brand);white-space:nowrap}
+  .rmt-tbl .star{color:var(--brand)}
+  /* header 🔗 affordance shares the ghost-button look */
   /* ── toasts ─────────────────────────────── */
   .toasts{position:fixed;top:66px;right:18px;z-index:60;display:flex;flex-direction:column;gap:8px;
     max-width:380px}
@@ -405,6 +501,7 @@ export const BOARD_HTML = /* html */ `<!doctype html>
   </div>
   <div class="ws"><span class="dot" id="wsdot"></span><span id="wstext">connecting</span></div>
   <button class="btn-ghost sm" id="bell" title="notify when a run settles">🔕</button>
+  <button class="btn-ghost sm" id="remoteBtn" title="reach this daemon from elsewhere (Tailscale · recipes)">🔗</button>
   <div class="machines" id="machines"></div>
 </header>
 <div class="scrim" id="scrim"></div>
@@ -418,6 +515,7 @@ export const BOARD_HTML = /* html */ `<!doctype html>
       <select id="taskRepo"></select>
       <div class="row">
         <button type="button" class="btn-ghost sm" id="repoBrowse" style="flex:1">Browse…</button>
+        <button type="button" class="btn-ghost sm" id="repoNew" style="flex:0 0 auto" title="start a new project — empty folder in, scaffolded repo out">New</button>
         <button type="button" class="btn-ghost sm" id="repoManual" style="flex:0 0 auto" title="type an absolute path">Path</button>
         <button type="button" class="btn-ghost sm" id="repoBranch" style="flex:0 0 auto" title="change the base branch — merges, Sync base and PRs all target it">⎇</button>
         <button type="button" class="btn-ghost sm" id="repoRemove" style="flex:0 0 auto" title="remove selected repository from coxpit">×</button>
@@ -541,6 +639,46 @@ export const BOARD_HTML = /* html */ `<!doctype html>
   </div>
 </div>
+<div class="overlay" id="groupRoomOverlay">
+  <div class="room">
+    <div class="rh">
+      <span class="rh-glyph">⌒</span>
+      <span class="rh-t" id="roomTitle">Goal</span>
+      <span class="rh-n" id="roomCount"></span>
+      <button class="x" id="roomClose" aria-label="close">×</button>
+    </div>
+    <div class="chips" id="roomChips"></div>
+    <div class="body">
+      <div class="feed" id="roomFeed"></div>
+      <div class="conv" id="roomConv" hidden></div>
+    </div>
+    <div class="composer">
+      <div class="seg comp-seg" id="roomSeg" role="group" aria-label="workroom mode">
+        <button type="button" class="seg-opt on" data-rmode="work">✎ Work</button>
+        <button type="button" class="seg-opt" data-rmode="ask">? Ask</button>
+      </div>
+      <div class="comp-hint" id="roomHint"></div>
+      <textarea id="roomInput" placeholder="New attempt prompt, or a broadcast to the settled runs…"></textarea>
+      <div class="verbs" id="roomVerbs">
+        <button type="button" class="btn-ghost sm" id="roomNew">＋ New attempt</button>
+        <button type="button" class="btn-ghost sm" id="roomBroadcast">→ Broadcast</button>
+        <span class="grow"></span>
+        <div class="conv-menu" id="roomConvMenu">
+          <button type="button" class="btn sm" id="roomConverge">Converge ▾</button>
+          <div class="conv-pop">
+            <button type="button" id="roomReview">Review group</button>
+            <button type="button" id="roomIntegrate">Select runs to integrate</button>
+          </div>
+        </div>
+      </div>
+      <div class="send-only" id="roomSend" hidden>
+        <span class="ro-hint">read-only — switch to Work to act</span>
+        <button type="button" class="btn sm" id="roomAsk">Ask</button>
+      </div>
+    </div>
+  </div>
+</div>
 <div class="overlay" id="cmpOverlay">
   <div class="modal wide">
     <div class="modal-h">
@@ -588,9 +726,14 @@ export const BOARD_HTML = /* html */ `<!doctype html>
     </div>
     <div class="brw-list" id="brwList"></div>
     <div class="brw-f">
-      <span class="hint">folders with a <span style="color:var(--brand)">git</span> badge are repositories — hit Register</span>
+      <span class="hint"><span style="color:var(--brand)">git</span> badge = repo (Register) · empty folder = Start here</span>
+      <button class="btn-ghost sm" id="brwNewFolder">＋ New folder here</button>
       <button class="btn sm" id="brwRegHere" style="display:none">Register this folder</button>
     </div>
+    <form class="brw-f" id="brwNewForm" hidden>
+      <input id="brwNewName" placeholder="new-project-folder-name" style="flex:1" />
+      <button class="btn sm" type="submit" id="brwNewGo">Create &amp; start</button>
+    </form>
   </div>
 </div>
@@ -618,6 +761,36 @@ export const BOARD_HTML = /* html */ `<!doctype html>
   </div>
 </div>
+<div class="overlay" id="npOverlay">
+  <div class="cfm">
+    <div class="cfm-b">
+      <div class="m">Start a new project</div>
+      <div class="s">Creates the folder if needed, then git init + an empty initial commit as the base. Never touches non-empty folders. Then: write a task like 'scaffold a … app', run a fleet of 2–3, and compare the foundations.</div>
+      <p class="flabel" style="margin-top:12px">new project path</p>
+      <input id="npPath" placeholder="/abs/path/to/new-project" />
+      <p class="flabel" style="margin-top:10px">name · optional</p>
+      <input id="npName" placeholder="defaults to the folder name" />
+    </div>
+    <div class="cfm-f">
+      <button class="btn-ghost sm" id="npCancel">Cancel</button>
+      <button class="btn sm" id="npOk">Start new project</button>
+    </div>
+  </div>
+</div>
+<div class="overlay" id="remoteOverlay">
+  <div class="cfm" style="width:min(560px,94vw)">
+    <div class="cfm-b">
+      <div class="m">Remote access</div>
+      <div class="s">Reach this daemon from your other devices — coxpit detects your Tailscale and drives it, or hands a copy-paste recipe. It never hosts a relay.</div>
+      <div id="remoteBody" class="rmt" style="margin-top:14px">loading…</div>
+    </div>
+    <div class="cfm-f">
+      <button class="btn-ghost sm" id="remoteClose">Close</button>
+    </div>
+  </div>
+</div>
 <div class="overlay" id="brOverlay">
   <div class="cfm">
     <div class="cfm-b">
@@ -666,6 +839,8 @@ const runs = new Map();      // runId -> run object
 const tasks = new Map();     // taskId -> task
 const groups = new Map();    // groupId -> {id, kind, title}
 let repos = [], machines = [], captures = [];
+let daemonPort = 8210;    // real config.port — filled from /api/fleet daemon block (recipes interpolate it)
+let remoteAuthOpen = false; // true = no password → Funnel guard on (from /api/fleet daemon.authOpen)
 const $ = (id) => document.getElementById(id);
 const esc = (s) => String(s).replace(/[&<>]/g, (c) => ({'&':'&amp;','<':'&lt;','>':'&gt;'}[c]));
@@ -729,7 +904,8 @@ async function brwGo(p){
     (d.error ? '<div class="brw-row"><span class="nm" style="color:var(--s-failed)">'+esc(d.error)+'</span></div>' : '')
     + (d.dirs.map(x =>
         '<div class="brw-row" data-n="'+esc(x.name)+'"><span class="ico">▸</span><span class="nm">'+esc(x.name)+'</span>'
-        + (x.isRepo ? '<span class="gitchip">git</span><button type="button" class="btn sm" data-reg="'+esc(x.name)+'">Register</button>' : '')
+        + (x.isRepo ? '<span class="gitchip">git</span><button type="button" class="btn sm" data-reg="'+esc(x.name)+'">Register</button>'
+           : x.isEmpty ? '<button type="button" class="btn-ghost sm" data-start="'+esc(x.name)+'">Start here</button>' : '')
         + '</div>').join('')
       || '<div class="brw-row"><span class="nm" style="color:var(--faint)">no folders here</span></div>');
 }
@@ -740,26 +916,56 @@ async function brwRegister(fullPath){
     toast('repo registered — pick it under Launch agents', 'ok');
     $('brwOverlay').classList.remove('open');
     await hydrate();
-  } else {
-    const j = await res.json().catch(()=>({}));
-    toast('register: '+(j.detail||j.error||res.status), 'error');
+    return;
+  }
+  const j = await res.json().catch(()=>({}));
+  if (res.status === 400 && j.code === 'NO_COMMITS'){
+    const yes = await confirmUI('This folder has no commits yet — start a new project here?',
+      { sub: 'coxpit will create an empty initial commit as the base, then register the repo. The folder itself is untouched.', okLabel: 'Start new project' });
+    if (yes && await createNewProject(fullPath)) $('brwOverlay').classList.remove('open');
+    return;
   }
+  toast('register: '+(j.detail||j.error||res.status), 'error');
 }
 $('repoBrowse').addEventListener('click', ()=>{
   const m = machines.find(x=>x.slug===$('repoMachine').value);
   if (m && m.address){ toast('remote machine — type the path manually for now', 'error'); return; }
+  $('brwNewForm').hidden = true; $('brwNewName').value = '';
   $('brwOverlay').classList.add('open');
   brwGo(brwCur || '');
 });
 $('brwList').addEventListener('click',(e)=>{
   const reg = e.target.closest('button[data-reg]');
   if (reg){ brwRegister(brwCur.replace(/\\/$/,'')+'/'+reg.dataset.reg); return; }
+  const start = e.target.closest('button[data-start]');
+  if (start){ brwStartHere(brwCur.replace(/\\/$/,'')+'/'+start.dataset.start); return; }
   const row = e.target.closest('.brw-row[data-n]');
   if (row) brwGo(brwCur.replace(/\\/$/,'')+'/'+row.dataset.n);
 });
 $('brwUp').addEventListener('click',(e)=>brwGo(e.currentTarget.dataset.p));
 $('brwHome').addEventListener('click',(e)=>brwGo(e.currentTarget.dataset.p));
 $('brwRegHere').addEventListener('click',()=>brwRegister(brwCur));
+/* 빈 폴더 행의 Start here — 클릭한 폴더에 greenfield 씨앗 심고 등록 */
+async function brwStartHere(fullPath){
+  if (await createNewProject(fullPath)) $('brwOverlay').classList.remove('open');
+}
+/* ＋ New folder here — 현재 탐색 위치에 새 폴더명만 받아 생성+시작 (절대경로 타이핑 불필요) */
+$('brwNewFolder').addEventListener('click', ()=>{
+  const f = $('brwNewForm'); f.hidden = !f.hidden; if(!f.hidden) $('brwNewName').focus();
+});
+$('brwNewForm').addEventListener('submit', async (e)=>{
+  e.preventDefault();
+  const name = $('brwNewName').value.trim();
+  if (!name){ toast('enter a folder name', 'error'); return; }
+  if (name.includes('/')){ toast('folder name cannot contain /', 'error'); return; }
+  const go = $('brwNewGo'); go.disabled = true; go.textContent = 'Creating…';
+  try{
+    if (await createNewProject(brwCur.replace(/\\/$/,'')+'/'+name)){
+      $('brwNewName').value=''; $('brwNewForm').hidden=true;
+      $('brwOverlay').classList.remove('open');
+    }
+  } finally { go.disabled=false; go.textContent='Create & start'; }
+});
 $('brwClose').addEventListener('click',()=>$('brwOverlay').classList.remove('open'));
 $('brwOverlay').addEventListener('click',(e)=>{ if(e.target===$('brwOverlay')) $('brwOverlay').classList.remove('open'); });
@@ -793,7 +999,9 @@ function humanize(e){
   try{
     const o = JSON.parse(payload);
     if (o.type === 'system'){
-      if (o.subtype === 'init' || !o.subtype) return { k:'session', t:'started'+(o.model?' · '+o.model:'') };
+      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 등 스트림 잡음
     }
@@ -897,6 +1105,7 @@ function bandHTML(g, grpRuns){
     + '<span class="gband-t">'+title+'</span>'
     + '<span class="gband-n">'+taskIds.length+' task'+(taskIds.length>1?'s':'')+' · '+settled+' settled</span>'
     + '<span class="gband-sp"></span>'
+    + '<button class="btn-ghost sm gband-open" data-groom="'+g.id+'">⌒ Open workroom</button>'
     + '<button class="btn-ghost sm" data-gsel="'+g.id+'">Select runs</button>'
     + '<button class="btn-ghost sm" data-gclose="'+g.id+'">Close group</button>'
     + '<button class="gband-fold" data-gfold="'+g.id+'" title="fold">'+(folded?'▸':'▾')+'</button></div>'
@@ -1033,7 +1242,11 @@ function paintOnboarding(){
     + '<li><b>Register a repo</b> — absolute path, in the left sidebar</li>'
     + '<li><b>Write a task</b> — title + a prompt that names the target files</li>'
     + '<li><b>Run fleet</b> — try <b>Dry run</b> first (free rehearsal), then <b>Real agent</b></li>'
-    + '</ol></div></div>';
+    + '</ol></div>'
+    + '<div class="setup-sec"><p class="setup-label">Remote access</p>'
+    + '<div id="rmtOnboard" class="rmt">checking Tailscale…</div></div>'
+    + '</div>';
+  loadRemote();
 }
 function cardHTML(r){
   const task = tasks.get(r.taskId);
@@ -1080,6 +1293,8 @@ async function hydrate(){
   (r.runs||[]).forEach(rn => runs.set(rn.id, { ...rn, events: rn.events||[] }));
   if (r.daemon) {
     const d = r.daemon;
+    if (d.port) daemonPort = d.port;
+    remoteAuthOpen = !!d.authOpen;
     const db = String(d.dbPath||'').replace(/^\\/(?:Users|home)\\/[^/]+/, '~');
     const el = $('daemonBadge');
     el.innerHTML = 'daemon <b>v'+esc(String(d.version||'?'))+'</b> · :'+esc(String(d.port||'?'));
@@ -1191,6 +1406,7 @@ function connectWS(){
     let ev; try{ ev = JSON.parse(m.data); }catch{ return; }
     // 아카이브 뷰는 정적 스냅샷 — 라이브 갱신으로 뒤엎지 않는다.
     if (boardView==='archive' && (ev.type==='run'||ev.type==='event'||ev.type==='task')) return;
+    roomOnWS(ev);   // 워크룸이 열려있으면 그룹 소속 run/event 를 방에 반영
     if (ev.type==='run'){
       const rid = ev.runId ?? ev.id;
       const known = runs.has(rid);
@@ -1342,6 +1558,8 @@ $('selGo').addEventListener('click', async ()=>{
 /* ── 그룹 밴드 액션 (fold / Select runs / Close group) ── */
 $('grid').addEventListener('click', async (e)=>{
+  const groom = e.target.closest('[data-groom]');
+  if (groom){ openRoom(Number(groom.dataset.groom)); return; }
   const fold = e.target.closest('[data-gfold]');
   if (fold){ const g=Number(fold.dataset.gfold); if(gfold.has(g)) gfold.delete(g); else gfold.add(g); saveGfold(); render(); return; }
   const gsel = e.target.closest('[data-gsel]');
@@ -1402,7 +1620,7 @@ $('grid').addEventListener('click',(e)=>{
 });
 $('mClose').addEventListener('click', closeModal);
 $('overlay').addEventListener('click',(e)=>{ if(e.target===$('overlay')) closeModal(); });
-document.addEventListener('keydown',(e)=>{ if(e.key==='Escape'){ closeDropdowns(); cfmClose(false); $('brwOverlay').classList.remove('open'); $('expOverlay').classList.remove('open'); $('ghOverlay').classList.remove('open'); $('brOverlay').classList.remove('open'); closeTerm(); closeModal(); cmpTaskId=null; $('cmpOverlay').classList.remove('open'); } });
+document.addEventListener('keydown',(e)=>{ if(e.key==='Escape'){ closeDropdowns(); cfmClose(false); $('brwOverlay').classList.remove('open'); $('expOverlay').classList.remove('open'); $('ghOverlay').classList.remove('open'); $('npOverlay').classList.remove('open'); $('brOverlay').classList.remove('open'); $('remoteOverlay').classList.remove('open'); closeRoom(); closeTerm(); closeModal(); cmpTaskId=null; $('cmpOverlay').classList.remove('open'); } });
 $('mRefreshDiff').addEventListener('click', loadDiff);
 $('mExport').addEventListener('click', ()=>{
   if (openRunId==null) return;
@@ -1604,6 +1822,254 @@ $('mCompare').addEventListener('click', ()=>{
   closeModal(); openCompare(r.taskId);
 });
+/* ── goal workroom (v4.6 L1) — 한 goal 을 여는 단일 방 ── */
+let roomGroupId = null;               // 열려있는 그룹 id (null = 닫힘)
+const roomRunSet = new Set();         // 이 그룹에 속한 runId — WS 필터용
+let roomRuns = [];                    // 마지막 aggregate 의 runs (chips/scope hint)
+const roomExtra = [];                 // goal-level 마커(spawn/broadcast) — 피드에 섞음
+const roomTurns = [];                 // Ask 대화 턴 [{role:'you'|'coord', text}] — 읽기 전용
+let roomMode = 'work';                // 'work' | 'ask' — 방 composer 모드(스틸모드와 무관, 방 전용)
+/* run → 상태색 (chip / who) */
+function roomStatusColor(s){ return statusColor(s); }
+function roomChipHTML(r){
+  const s = r.status||'pending';
+  const meta = ['done','failed','stopped','merged'].includes(s)
+    ? (r.filesChanged? '+'+r.filesChanged+'f' : 'no changes')
+    : (r.agent||'agent')+(s==='running'?' · editing…':'');
+  return '<span class="chip'+(s==='running'?' running':'')+(r.isNew?' new':'')+'" data-roomrun="'+r.runId+'"'
+    + ' style="color:'+roomStatusColor(s)+';border-color:'+roomStatusColor(s)+'">'
+    + '<i></i><span class="cid">r'+r.runId+'</span> <span class="cmeta">'+esc(meta)+'</span></span>';
+}
+function roomRenderChips(){
+  $('roomChips').innerHTML = roomRuns.length
+    ? roomRuns.map(roomChipHTML).join('')
+    : '<span style="color:var(--faint);font-family:var(--mono);font-size:11.5px">no runs yet</span>';
+}
+function roomFeedLine(who, whoStatus, text, mark){
+  return '<div class="fl'+(mark?' mark':'')+'"><span class="who" style="color:'
+    + (mark?'var(--brand)':roomStatusColor(whoStatus))+'">'+esc(who)+'</span>'
+    + '<span class="ft">'+esc(text)+'</span></div>';
+}
+function roomRenderFeed(events){
+  // run 이벤트 + goal-level 마커를 시간(id/순서)대로. 간단히: 이벤트 먼저, 마커는 append.
+  const statusOf = (rid)=>{ const r = roomRuns.find(x=>x.runId===rid); return r? r.status : 'pending'; };
+  const rows = [];
+  for (const e of (events||[])){
+    const h = humanize({ kind:e.kind, payload:e.payload });
+    if (!h) continue;
+    const list = Array.isArray(h) ? h : [h];
+    for (const x of list) rows.push(roomFeedLine('r'+e.runId, statusOf(e.runId), x.k+' · '+x.t, false));
+  }
+  for (const m of roomExtra){
+    rows.push(roomFeedLine(m.who, 'pending', m.text, true));
+  }
+  $('roomFeed').innerHTML = rows.length ? rows.join('')
+    : '<div class="empty-note">no activity yet — spawn an attempt or wait for runs to report</div>';
+  $('roomFeed').scrollTop = $('roomFeed').scrollHeight;
+}
+/* Ask 대화(읽기 전용) — you / coordinator 턴. 코디네이터 답 아래 read-only 노트. */
+function roomRenderConv(){
+  if (!roomTurns.length){
+    $('roomConv').innerHTML = '<div class="empty-note">read-only coordinator — ask what these attempts are doing. it never acts.</div>';
+    return;
+  }
+  $('roomConv').innerHTML = roomTurns.map(t=>{
+    const role = t.role==='you' ? 'you' : 'coordinator';
+    const note = t.role==='coord'
+      ? '<span class="ro-note">read-only — switch to Work to act</span>' : '';
+    return '<div class="turn '+t.role+'"><span class="role">'+esc(role)+'</span>'
+      + '<span class="msg">'+esc(t.text)+'</span>'+note+'</div>';
+  }).join('');
+  $('roomConv').scrollTop = $('roomConv').scrollHeight;
+}
+function roomRenderHeaderAndHint(){
+  const g = groups.get(roomGroupId) || {};
+  const done = roomRuns.filter(r=>['done','failed','stopped','merged'].includes(r.status)).length;
+  const running = roomRuns.filter(r=>r.live).length;
+  $('roomTitle').textContent = 'Goal: '+(g.title||'');
+  $('roomCount').textContent = '· '+roomRuns.length+' run'+(roomRuns.length===1?'':'s')
+    +' · '+done+' done · '+running+' running';
+  roomRenderHint();
+}
+/* Work=정직한 steer 스코프, Ask=읽기 전용 안내. 모드에 따라 힌트/뷰/composer 전환. */
+function roomRenderHint(){
+  if (roomMode==='ask'){
+    $('roomHint').textContent = 'read-only coordinator · reads run diffs, never acts';
+    return;
+  }
+  const running = roomRuns.filter(r=>r.live).length;
+  const steerable = roomRuns.filter(r=>r.steerable).length;
+  $('roomHint').textContent = steerable+' steerable now · '+running+' still running';
+}
+/* feed↔conv, verbs↔send-only 를 roomMode 로 스왑. */
+function roomApplyMode(){
+  const ask = roomMode==='ask';
+  $('roomFeed').hidden = ask;
+  $('roomConv').hidden = !ask;
+  $('roomVerbs').hidden = ask;
+  $('roomSend').hidden = !ask;
+  $('roomInput').placeholder = ask
+    ? 'Ask the coordinator about these attempts (read-only)…'
+    : 'New attempt prompt, or a broadcast to the settled runs…';
+  document.querySelectorAll('#roomSeg .seg-opt').forEach(x=>x.classList.toggle('on', x.dataset.rmode===roomMode));
+  roomRenderHint();
+  if (ask) roomRenderConv();
+}
+async function openRoom(groupId){
+  roomGroupId = groupId;
+  roomExtra.length = 0; roomRunSet.clear(); roomRuns = []; roomTurns.length = 0;
+  roomMode = 'work';
+  $('roomInput').value = '';
+  $('roomChips').innerHTML = '<span style="color:var(--faint);font-family:var(--mono);font-size:11.5px">loading…</span>';
+  $('roomFeed').innerHTML = '';
+  $('roomConv').innerHTML = '';
+  $('roomTitle').textContent = 'Goal';
+  $('roomCount').textContent = '';
+  $('roomHint').textContent = '';
+  roomApplyMode();
+  $('groupRoomOverlay').classList.add('open');
+  await roomLoad();
+}
+async function roomLoad(){
+  if (roomGroupId==null) return;
+  let j;
+  try{ j = await fetch('/api/groups/'+roomGroupId).then(x=>x.json()); }
+  catch{ toast('workroom load failed', 'error'); return; }
+  if (!j || !j.group){ toast('group not found', 'error'); return; }
+  if (!groups.has(j.group.id)) groups.set(j.group.id, j.group);
+  roomRuns = j.runs||[];
+  roomRunSet.clear();
+  roomRuns.forEach(r=>roomRunSet.add(r.runId));
+  roomRenderChips();
+  roomRenderHeaderAndHint();
+  roomRenderFeed(j.events||[]);
+}
+function closeRoom(){ roomGroupId = null; $('groupRoomOverlay').classList.remove('open'); }
+/* chip 클릭 → 그 run 을 기존 run 모달로 */
+$('roomChips').addEventListener('click',(e)=>{
+  const c = e.target.closest('[data-roomrun]'); if(!c) return;
+  const rid = Number(c.dataset.roomrun);
+  closeRoom();
+  if (runs.has(rid)) openModal(rid);
+  else { // 아카이브 등 맵에 없는 run — 태스크로 하이드레이트 후 연다
+    fetch('/api/runs/'+rid).then(x=>x.json()).then(d=>{ if(d.run){ runs.set(rid, {...d.run, events:d.events||[]}); openModal(rid); } }).catch(()=>{});
+  }
+});
+$('roomClose').addEventListener('click', closeRoom);
+$('groupRoomOverlay').addEventListener('click',(e)=>{ if(e.target===$('groupRoomOverlay')) closeRoom(); });
+/* ＋ New attempt — 같은 그룹에 새 시도 발사 (현재 dry/real 토글 반영) */
+$('roomNew').addEventListener('click', async ()=>{
+  if (roomGroupId==null) return;
+  const prompt = $('roomInput').value.trim();
+  if (!prompt){ toast('write a prompt for the new attempt', 'error'); return; }
+  const real = $('taskReal').checked;
+  const btn = $('roomNew'); btn.disabled = true;
+  try{
+    const res = await fetch('/api/groups/'+roomGroupId+'/spawn',{method:'POST',
+      headers:{'content-type':'application/json'}, body:JSON.stringify({prompt, real})});
+    const j = await res.json().catch(()=>({}));
+    if (res.ok){
+      $('roomInput').value='';
+      (j.tasks||[]).forEach(t=>{ roomExtra.push({ who:'goal ＋', text:'new attempt r'+t.runId+' — '+prompt.slice(0,60) }); roomRunSet.add(t.runId); });
+      toast((j.tasks||[]).length+' attempt(s) launched'+(real?'':' (dry)'), 'ok');
+      roomRenderFeed([]); await roomLoad(); hydrate();
+    } else toast('spawn: '+(j.error||res.status), 'error');
+  } finally { btn.disabled = false; }
+});
+/* → Broadcast — 그룹의 정착 steerable run 전부에 후속 지시(라이브/드라이는 정직하게 skip) */
+$('roomBroadcast').addEventListener('click', async ()=>{
+  if (roomGroupId==null) return;
+  const message = $('roomInput').value.trim();
+  if (!message){ toast('write a broadcast message', 'error'); return; }
+  const btn = $('roomBroadcast'); btn.disabled = true;
+  try{
+    const res = await fetch('/api/groups/'+roomGroupId+'/steer',{method:'POST',
+      headers:{'content-type':'application/json'}, body:JSON.stringify({message, mode:roomMode})});
+    const j = await res.json().catch(()=>({}));
+    if (res.ok){
+      $('roomInput').value='';
+      roomExtra.push({ who:'goal →', text:message.slice(0,80)+'  ('+j.detail+')' });
+      toast('broadcast: '+j.detail, (j.skipped&&j.skipped.length)?undefined:'ok');
+      roomRenderFeed([]); await roomLoad();
+    } else toast('broadcast: '+(j.error||res.status), 'error');
+  } finally { btn.disabled = false; }
+});
+/* Converge ▾ — 기존 review/integrate 를 노출(재구현 아님) */
+$('roomConverge').addEventListener('click',(e)=>{ e.stopPropagation(); $('roomConvMenu').classList.toggle('open'); });
+document.addEventListener('click',()=>$('roomConvMenu').classList.remove('open'));
+$('roomReview').addEventListener('click', ()=>{
+  $('roomConvMenu').classList.remove('open');
+  // 그룹 태스크가 여럿이면 각 태스크가 자체 비교/리뷰를 가짐 — 첫 태스크의 Compare 로 진입.
+  const first = roomRuns[0];
+  if (!first){ toast('no runs to review', 'error'); return; }
+  closeRoom(); openCompare(first.taskId);
+});
+$('roomIntegrate').addEventListener('click', ()=>{
+  $('roomConvMenu').classList.remove('open');
+  const g = roomGroupId; closeRoom();
+  if (!selectMode) setSelectMode(true);
+  // 그룹의 정착·변경 run 전부 사전 선택(기존 밴드 Select runs 와 동일 규칙)
+  const tids = new Set([...tasks.values()].filter(t=>t.groupId===g).map(t=>t.id));
+  for (const r of [...runs.values()].sort((a,b)=>a.id-b.id)){
+    if (!tids.has(r.taskId)) continue;
+    const ok = ['done','failed','stopped'].includes(r.status) && (r.filesChanged||0)>0 && r.status!=='merged';
+    if (ok && !selected.has(r.id)){ selected.add(r.id); selOrder.push(r.id); }
+  }
+  $('selCnt').textContent = selected.size + ' selected';
+  render();
+  if (!selected.size) toast('no settled runs with changes in this group yet', 'error');
+});
+/* Work | Ask 세그 — Work=행동(spawn/broadcast/converge), Ask=읽기 전용 코디네이터. 방 전용 모드. */
+document.querySelectorAll('#roomSeg .seg-opt').forEach(b=>{
+  b.addEventListener('click', ()=>{
+    roomMode = b.dataset.rmode;
+    roomApplyMode();
+  });
+});
+/* ? Ask — 그룹 스코프 읽기 전용 코디네이터. 절대 발사·steer·쓰기 없음 (POST /ask). */
+$('roomAsk').addEventListener('click', async ()=>{
+  if (roomGroupId==null) return;
+  const message = $('roomInput').value.trim();
+  if (!message){ toast('write a question for the coordinator', 'error'); return; }
+  const real = $('taskReal').checked;
+  const btn = $('roomAsk'); btn.disabled = true;
+  roomTurns.push({ role:'you', text:message });
+  roomRenderConv();
+  $('roomInput').value='';
+  try{
+    const res = await fetch('/api/groups/'+roomGroupId+'/ask',{method:'POST',
+      headers:{'content-type':'application/json'}, body:JSON.stringify({message, real})});
+    const j = await res.json().catch(()=>({}));
+    if (res.ok && j.answer){
+      roomTurns.push({ role:'coord', text:j.answer });
+    } else {
+      roomTurns.push({ role:'coord', text:'(ask failed — '+(j.error||res.status)+')' });
+      toast('ask: '+(j.error||res.status), 'error');
+    }
+    roomRenderConv();
+  } catch { toast('ask request failed', 'error'); }
+  finally { btn.disabled = false; }
+});
+/* WS 라이브 — 그룹 소속 run/event 만 방에 반영 (connectWS 가 호출) */
+function roomOnWS(ev){
+  if (roomGroupId==null) return;
+  if (ev.type==='run'){
+    const rid = ev.runId ?? ev.id;
+    if (!roomRunSet.has(rid)) return;   // 이 방 소속만
+    roomLoad();                          // 상태·steerable 재계산은 aggregate 로 (정확)
+  } else if (ev.type==='event'){
+    if (!roomRunSet.has(ev.runId)) return;
+    const h = humanize({ kind:ev.kind, payload:ev.payload });
+    if (h){
+      const r = roomRuns.find(x=>x.runId===ev.runId);
+      const list = Array.isArray(h) ? h : [h];
+      const frag = list.map(x=>roomFeedLine('r'+ev.runId, r?r.status:'pending', x.k+' · '+x.t, false)).join('');
+      $('roomFeed').insertAdjacentHTML('beforeend', frag);
+      $('roomFeed').scrollTop = $('roomFeed').scrollHeight;
+    }
+  }
+}
 /* ── terminal — 초기크기 접속·자동 재연결(백오프)·unicode11·CJK 폰트 ── */
 let termWS = null, termObj = null, fitAddon = null, termResizeObs = null;
 let termRunId = null, termClosing = false, termRetry = 0, termRetryTimer = null;
@@ -1780,11 +2246,19 @@ async function submitBench(){
 $('repoForm').addEventListener('submit', async (e)=>{
   e.preventDefault();
-  const body = { machineSlug: $('repoMachine').value, path: $('repoPath').value.trim() };
-  if (!body.path) return;
+  const path = $('repoPath').value.trim();
+  const body = { machineSlug: $('repoMachine').value, path };
+  if (!path) return;
   const res = await fetch('/api/repos',{method:'POST',headers:{'content-type':'application/json'},body:JSON.stringify(body)});
-  if (res.ok){ $('repoPath').value=''; toast('repo registered', 'ok'); await hydrate(); }
-  else { const j = await res.json().catch(()=>({})); toast('repo: '+(j.detail||j.error||res.status), 'error'); }
+  if (res.ok){ $('repoPath').value=''; toast('repo registered', 'ok'); await hydrate(); return; }
+  const j = await res.json().catch(()=>({}));
+  if (res.status === 400 && j.code === 'NO_COMMITS'){
+    const yes = await confirmUI('This folder has no commits yet — start a new project here?',
+      { sub: 'coxpit will create an empty initial commit as the base, then register the repo. The folder itself is untouched.', okLabel: 'Start new project' });
+    if (yes && await createNewProject(path)) $('repoPath').value='';
+    return;
+  }
+  toast('repo: '+(j.detail||j.error||res.status), 'error');
 });
 $('taskForm').addEventListener('submit', async (e)=>{
   e.preventDefault();
@@ -1874,6 +2348,42 @@ async function ghFetch(){
 $('ghOk').addEventListener('click', ghFetch);
 $('ghUrl').addEventListener('keydown',(e)=>{ if(e.key==='Enter') ghFetch(); });
+/* ── greenfield — start a new project (empty folder in, scaffolded repo out) ── */
+// POST /api/repos/new; 성공 시 hydrate 후 새 repo 를 자동 선택하고 toast.
+async function createNewProject(path, name){
+  const body = { machineSlug: $('repoMachine').value, path };
+  if (name) body.name = name;
+  const res = await fetch('/api/repos/new',{method:'POST',headers:{'content-type':'application/json'},body:JSON.stringify(body)});
+  const j = await res.json().catch(()=>({}));
+  if (!res.ok){ toast(j.error||('new project: '+res.status), 'error'); return false; }
+  await hydrate();
+  if (j.repo){
+    $('taskRepo').value = String(j.repo.id);
+    syncSelect('taskRepo');
+  }
+  toast('project ready — write a scaffold task and Run fleet', 'ok');
+  return true;
+}
+$('repoNew').addEventListener('click', ()=>{
+  const m = machines.find(x=>x.slug===$('repoMachine').value);
+  $('npPath').value = ''; $('npName').value = '';
+  $('npOverlay').classList.add('open'); $('npPath').focus();
+});
+$('npCancel').addEventListener('click', ()=>$('npOverlay').classList.remove('open'));
+$('npOverlay').addEventListener('click',(e)=>{ if(e.target===$('npOverlay')) $('npOverlay').classList.remove('open'); });
+async function npStart(){
+  const path = $('npPath').value.trim();
+  if (!path){ toast('enter an absolute project path', 'error'); return; }
+  $('npOk').disabled = true; $('npOk').textContent = 'Starting…';
+  try{
+    const ok = await createNewProject(path, $('npName').value.trim());
+    if (ok) $('npOverlay').classList.remove('open');
+  } finally { $('npOk').disabled = false; $('npOk').textContent = 'Start new project'; }
+}
+$('npOk').addEventListener('click', npStart);
+$('npPath').addEventListener('keydown',(e)=>{ if(e.key==='Enter') npStart(); });
+$('npName').addEventListener('keydown',(e)=>{ if(e.key==='Enter') npStart(); });
 /* ── 읽기 전용 공유 링크 ── */
 $('mShare').addEventListener('click', async ()=>{
   if (openRunId==null) return;
@@ -1886,6 +2396,156 @@ $('mShare').addEventListener('click', async ()=>{
   toast((j.existing?'share link (existing)':'share link created')+(copied?' — copied':'')+': '+url, 'ok');
 });
+/* ── remote access (v4.5) — detect Tailscale, drive Serve/Funnel, or hand a recipe.
+   coxpit never hosts a relay: it detects and drives the user's own tool. ── */
+let remoteData = null, remoteBusy = false;
+// clipboard write with a synchronous execCommand fallback (clipboard API alone is
+// unreliable outside secure/focused contexts — mirrors the terminal copy helper).
+function copyText(text){
+  let ok = false;
+  try{ if (navigator.clipboard && navigator.clipboard.writeText) { navigator.clipboard.writeText(text); ok = true; } }catch{}
+  try{
+    const ta = document.createElement('textarea');
+    ta.value = text; ta.setAttribute('readonly',''); ta.style.position='fixed'; ta.style.top='-1000px';
+    document.body.appendChild(ta); ta.select();
+    if (document.execCommand('copy')) ok = true;
+    document.body.removeChild(ta);
+  }catch{}
+  return ok;
+}
+// recipe text with the daemon's REAL port interpolated (guidance, not magic).
+function cfRecipe(){
+  return 'cloudflared tunnel --url http://localhost:'+daemonPort+'\\n'
+    + '# or a named tunnel + Cloudflare Access policy (recommended — exposes shells)';
+}
+function caddyRecipe(){
+  return 'coxpit.example.com {\\n  reverse_proxy 127.0.0.1:'+daemonPort+'\\n}';
+}
+function urlTableHTML(){
+  const rows = [
+    ['local', 'http://127.0.0.1:'+daemonPort, 'same machine'],
+    ['LAN', 'http://192.168.x.y:'+daemonPort, 'home network'],
+    ['Tailscale IP', 'http://100.x.y.z:'+daemonPort, 'your tailnet'],
+    ['MagicDNS', 'http://&lt;machine&gt;.&lt;tailnet&gt;.ts.net:'+daemonPort, 'your tailnet'],
+    ['Serve ⭐', 'https://&lt;machine&gt;.&lt;tailnet&gt;.ts.net', 'your tailnet · HTTPS'],
+    ['Funnel', 'https://&lt;machine&gt;.&lt;tailnet&gt;.ts.net', 'public internet'],
+    ['Cloudflare', 'https://coxpit.yourdomain.com', 'public (+ CF Access)'],
+    ['reverse proxy', 'https://coxpit.yourdomain.com', 'public'],
+  ];
+  let body = '';
+  for (const row of rows){
+    const star = row[0].indexOf('⭐') >= 0 ? ' class="star"' : '';
+    body += '<tr'+star+'><td>'+esc(row[0])+'</td><td><code>'+row[1]+'</code></td><td>'+esc(row[2])+'</td></tr>';
+  }
+  return '<table class="rmt-tbl"><tr><th>method</th><th>url shape</th><th>who reaches it</th></tr>'+body+'</table>'
+    + '<div class="rmt-cap">coxpit hands you a <code style="color:var(--brand)">*.ts.net</code> name in one click; a <b>custom</b> domain stays a Cloudflare/proxy recipe.</div>';
+}
+function recipesHTML(){
+  return '<details class="rmt-more"><summary>Recipes — Cloudflare Tunnel &amp; reverse proxy</summary>'
+    + '<pre>'+esc(cfRecipe())+'</pre>'
+    + '<div class="rmt-cap">public = shells exposed; keep coxpit auth on.</div>'
+    + '<pre>'+esc(caddyRecipe())+'</pre>'
+    + '<div class="rmt-cap">public = shells exposed; keep coxpit auth on.</div>'
+    + '</details>';
+}
+// authOpen: no password set → Funnel would expose shells to the internet.
+function remoteCardHTML(rd){
+  if (!rd) return '<div class="rmt-line">checking Tailscale…</div>' + recipesHTML();
+  const authOpen = !!rd.authOpen;
+  let h = '';
+  if (rd.tailscale === 'missing'){
+    h += '<div class="rmt-line">Install Tailscale to reach this daemon by name from your other devices — or use a reverse-proxy recipe below. '
+      + '<a href="https://tailscale.com/download" target="_blank" rel="noopener" style="color:var(--brand)">tailscale.com/download</a></div>';
+  } else if (rd.tailscale === 'stopped'){
+    h += '<div class="rmt-line">Tailscale is installed but not running. Start it, then <a href="#" id="rmtRefresh" style="color:var(--brand)">refresh</a>.</div>';
+  } else {
+    // running
+    h += '<div class="rmt-line">This machine on your tailnet: <span class="rmt-name">'+esc(rd.dnsName||'')+'</span></div>';
+    const serveUrl = 'https://'+(rd.dnsName||'');
+    // Serve row (safe default)
+    h += '<div class="rmt-row"><div class="rmt-l"><div class="rmt-t">Serve</div>'
+      + '<div class="rmt-d">your tailnet only · HTTPS · no port</div></div>'
+      + '<div class="tgl'+(rd.serve?' on':'')+'" id="rmtServe" role="switch" aria-checked="'+(rd.serve?'true':'false')+'"></div></div>';
+    if (rd.serve){
+      h += '<div class="rmt-url"><code>'+esc(serveUrl)+'</code>'
+        + '<button class="rmt-cp" data-copy="'+escA(serveUrl)+'">Copy</button></div>';
+    }
+    // Funnel row (risky)
+    h += '<div class="rmt-row risky"><div class="rmt-l"><div class="rmt-t">Funnel · Public internet</div>'
+      + '<div class="rmt-d">'+(authOpen?'set COXPIT_AUTH_PASS first — Funnel exposes shells':'anyone with the URL can reach this — auth is your only gate')+'</div></div>'
+      + '<div class="tgl risky'+(rd.funnel?' on':'')+'" id="rmtFunnel" role="switch" aria-checked="'+(rd.funnel?'true':'false')+'"'+(authOpen?' aria-disabled="true"':'')+'></div></div>';
+    if (rd.funnel){
+      h += '<div class="rmt-url"><code>'+esc(serveUrl)+'</code>'
+        + '<button class="rmt-cp" data-copy="'+escA(serveUrl)+'">Copy</button></div>';
+      h += '<div class="rmt-warn">anyone with the URL can reach this — auth is your only gate.</div>';
+    }
+  }
+  h += recipesHTML();
+  h += '<details class="rmt-more"><summary>how URLs differ</summary>'+urlTableHTML()+'</details>';
+  return h;
+}
+async function loadRemote(){
+  // /api/remote stays a pure RemoteState; the auth-open flag comes from /api/fleet
+  // (remoteAuthOpen) so the Funnel toggle can disable itself before any POST.
+  try{
+    const rd = await fetch('/api/remote').then(x=>x.json());
+    remoteData = rd; remoteData.authOpen = remoteAuthOpen;
+    paintRemote();
+  }catch{ remoteData = { tailscale:'missing', serve:false, funnel:false, authOpen: remoteAuthOpen }; paintRemote(); }
+}
+function paintRemote(){
+  const html = remoteCardHTML(remoteData);
+  const ov = $('remoteBody'); if (ov) ov.innerHTML = html;
+  const ob = $('rmtOnboard'); if (ob) ob.innerHTML = html;
+  wireRemote($('remoteOverlay'));
+  wireRemote(document.getElementById('empty'));
+}
+function wireRemote(scope){
+  if (!scope) return;
+  scope.querySelectorAll('[data-copy]').forEach(b=>{
+    if (b.dataset.wired) return; b.dataset.wired='1';
+    b.addEventListener('click', ()=>{
+      const ok = copyText(b.getAttribute('data-copy')||'');
+      toast(ok?'URL copied':'copy failed — select it manually', ok?'ok':'error');
+    });
+  });
+  const rf = scope.querySelector('#rmtRefresh');
+  if (rf && !rf.dataset.wired){ rf.dataset.wired='1'; rf.addEventListener('click',(e)=>{ e.preventDefault(); loadRemote(); }); }
+  const sv = scope.querySelector('#rmtServe');
+  if (sv && !sv.dataset.wired){ sv.dataset.wired='1'; sv.addEventListener('click', ()=>toggleRemote('serve', !(remoteData&&remoteData.serve))); }
+  const fn = scope.querySelector('#rmtFunnel');
+  if (fn && !fn.dataset.wired){ fn.dataset.wired='1'; fn.addEventListener('click', ()=>{
+    if (fn.getAttribute('aria-disabled')==='true'){ toast('set COXPIT_AUTH_PASS first — Funnel exposes shells', 'error'); return; }
+    toggleRemote('funnel', !(remoteData&&remoteData.funnel));
+  }); }
+}
+async function toggleRemote(which, on){
+  if (remoteBusy) return; remoteBusy = true;
+  try{
+    const res = await fetch('/api/remote/'+which,{method:'POST',headers:{'content-type':'application/json'},body:JSON.stringify({on})});
+    const j = await res.json().catch(()=>({}));
+    if (!res.ok){
+      if (j.code==='NO_AUTH'){ remoteAuthOpen = true; if (remoteData) remoteData.authOpen = true; paintRemote(); toast('set COXPIT_AUTH_PASS first — Funnel exposes shells', 'error'); }
+      else toast(which+': '+(j.error||res.status), 'error');
+      return;
+    }
+    remoteData = j; remoteData.authOpen = remoteAuthOpen;
+    paintRemote();
+    toast(which+(on?' on':' off'), 'ok');
+  } finally { remoteBusy = false; }
+}
+$('remoteBtn').addEventListener('click', ()=>{ $('remoteOverlay').classList.add('open'); loadRemote(); });
+$('remoteClose').addEventListener('click', ()=>$('remoteOverlay').classList.remove('open'));
+$('remoteOverlay').addEventListener('click',(e)=>{ if(e.target===$('remoteOverlay')) $('remoteOverlay').classList.remove('open'); });
 /* ── mobile drawer ── */
 const asideEl = document.querySelector('aside');
 function setDrawer(on){ asideEl.classList.toggle('open', on); $('scrim').classList.toggle('on', on); }