codehere 0.6.0-alpha.1 → 0.6.1

package/dist/infrastructure/protocols/ui-page-v2.js

@@ -0,0 +1,505 @@
+const SHARED_STYLES = `
+  :root {
+    --bg: hsl(0 0% 3.9%); --bg-1: hsl(0 0% 6%); --bg-2: hsl(0 0% 9%);
+    --fg: hsl(0 0% 98%); --fg-70: rgba(255,255,255,0.70);
+    --fg-50: rgba(255,255,255,0.50); --fg-40: rgba(255,255,255,0.40);
+    --fg-30: rgba(255,255,255,0.30); --fg-20: rgba(255,255,255,0.20);
+    --border: rgba(255,255,255,0.10); --border-soft: rgba(255,255,255,0.06);
+    --accent: #ff9a76; --accent-wash: rgba(255,154,118,0.10);
+    --allow: #28c840; --block: #ff5f57; --warn: #febc2e;
+    --radius: 8px;
+    --sans: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
+    --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
+  }
+  * { box-sizing: border-box; margin: 0; }
+  body {
+    margin: 0; background: var(--bg); color: var(--fg);
+    font-family: var(--sans); font-size: 13px; line-height: 1.55;
+    -webkit-font-smoothing: antialiased; height: 100vh; overflow: hidden;
+  }
+  .app { height: 100vh; display: flex; flex-direction: column; }
+
+  .header {
+    display: flex; align-items: center; gap: 16px;
+    padding: 10px 20px; border-bottom: 1px solid var(--border-soft);
+    background: rgba(0,0,0,0.3); flex-shrink: 0;
+  }
+  .logo { font-family: var(--mono); font-size: 14px; font-weight: 600; color: var(--fg); }
+  .budget { margin-left: auto; font-family: var(--mono); font-size: 11px; color: var(--fg-50); }
+  .budget.safe { color: var(--fg-50); }
+  .budget.warn { color: var(--warn); }
+  .budget.block { color: var(--block); font-weight: 600; }
+  .v1-link {
+    font-family: var(--mono); font-size: 11px; color: var(--fg-40);
+    text-decoration: none; padding: 4px 10px; border: 1px solid var(--border);
+    border-radius: 6px;
+  }
+  .v1-link:hover { color: var(--fg); border-color: var(--fg-30); }
+
+  .squad-row {
+    display: flex; align-items: center; gap: 12px;
+    padding: 6px 20px; border-bottom: 1px solid var(--border-soft);
+    font-size: 11px; color: var(--fg-50); flex-shrink: 0;
+  }
+  .squad-agent { display: flex; align-items: center; gap: 4px; }
+  .squad-dot { width: 6px; height: 6px; border-radius: 50%; }
+  .squad-dot.ready { background: var(--allow); }
+  .squad-dot.busy { background: var(--warn); }
+  .squad-dot.offline { background: var(--fg-30); }
+
+  .bar {
+    display: flex; align-items: center; gap: 8px;
+    padding: 10px 20px; border-bottom: 1px solid var(--border-soft);
+    flex-shrink: 0;
+  }
+  .new-btn {
+    background: var(--accent); color: #000; font-weight: 600;
+    border: none; border-radius: 6px; padding: 6px 14px;
+    font-family: var(--sans); font-size: 12px; cursor: pointer; white-space: nowrap;
+  }
+  .new-btn:hover { filter: brightness(1.05); }
+
+  .filter-tab {
+    font-family: var(--mono); font-size: 11px; color: var(--fg-50);
+    cursor: pointer; padding: 4px 10px; border-radius: 6px;
+    border: 1px solid transparent; white-space: nowrap;
+  }
+  .filter-tab:hover { color: var(--fg); background: rgba(255,255,255,0.04); }
+  .filter-tab.active { color: var(--fg); background: rgba(255,154,118,0.08); border-color: rgba(255,154,118,0.25); }
+  .filter-tab .cnt { color: var(--fg-40); margin-left: 2px; }
+
+  .content { flex: 1; overflow-y: auto; }
+  .content-inner { padding: 16px 20px; max-width: 900px; margin: 0 auto; }
+  .section-label {
+    font-family: var(--mono); font-size: 10px; letter-spacing: 0.12em;
+    color: var(--fg-40); text-transform: uppercase; margin: 16px 0 8px;
+  }
+  .section-label:first-child { margin-top: 0; }
+
+  .task-card {
+    background: rgba(255,255,255,0.02); border: 1px solid var(--border);
+    border-radius: 8px; padding: 12px 14px; margin-bottom: 6px;
+    cursor: pointer; transition: border-color 0.15s, background 0.15s;
+  }
+  .task-card:hover { border-color: var(--fg-30); background: rgba(255,255,255,0.04); }
+  .card-row1 { display: flex; align-items: center; gap: 8px; }
+  .status-icon { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
+  .status-icon.running { background: var(--accent); animation: pulse 1.5s ease infinite; }
+  .status-icon.paused { background: var(--warn); }
+  .status-icon.done { background: var(--allow); }
+  .status-icon.failed { background: var(--block); }
+  .status-icon.crashed { background: var(--block); }
+  .status-icon.killed { background: var(--fg-30); }
+  .status-icon.queued { background: var(--fg-30); }
+  .status-icon.blocked { background: var(--warn); }
+  @keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.4; } }
+
+  .card-title { font-weight: 600; color: var(--fg); font-size: 13px; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+  .card-agent { font-family: var(--mono); font-size: 10px; color: var(--fg-50); background: rgba(255,255,255,0.04); padding: 2px 6px; border-radius: 4px; }
+  .card-row2 { display: flex; align-items: center; gap: 10px; margin-top: 6px; font-family: var(--mono); font-size: 10px; color: var(--fg-40); }
+  .card-row3 { margin-top: 6px; display: flex; gap: 6px; }
+  .card-btn {
+    font-family: var(--mono); font-size: 10px; padding: 3px 8px;
+    border: 1px solid var(--border); border-radius: 4px; cursor: pointer;
+    background: transparent; color: var(--fg-50);
+  }
+  .card-btn:hover { color: var(--fg); border-color: var(--fg-30); }
+  .card-btn.kill:hover { color: var(--block); border-color: var(--block); }
+  .card-btn.pause:hover { color: var(--warn); border-color: var(--warn); }
+  .card-btn.verify:hover { color: var(--allow); border-color: var(--allow); }
+  .card-btn.restart:hover { color: var(--accent); border-color: var(--accent); }
+  .verify-badge { font-family: var(--mono); font-size: 9px; padding: 1px 5px; border-radius: 4px; }
+  .verify-badge.verified { color: var(--allow); background: rgba(40,200,64,0.10); }
+  .verify-badge.unverified { color: var(--fg-30); background: rgba(255,255,255,0.04); }
+  .verify-badge.failed { color: var(--block); background: rgba(255,95,87,0.10); }
+
+  .empty-state { text-align: center; padding: 60px 20px; color: var(--fg-40); }
+  .empty-state h2 { color: var(--fg-70); margin-bottom: 8px; font-weight: 500; font-size: 15px; }
+
+  .skeleton { padding: 16px 20px; max-width: 900px; margin: 0 auto; }
+  .skeleton-card {
+    height: 60px; border-radius: 8px; margin-bottom: 8px;
+    background: linear-gradient(90deg, rgba(255,255,255,0.02) 25%, rgba(255,255,255,0.06) 50%, rgba(255,255,255,0.02) 75%);
+    background-size: 200% 100%; animation: shimmer 1.5s ease infinite;
+  }
+  @keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
+
+  .detail-header {
+    display: flex; align-items: center; gap: 10px; margin-bottom: 12px;
+  }
+  .back-btn {
+    font-family: var(--mono); font-size: 12px; color: var(--accent);
+    cursor: pointer; padding: 4px 8px; border-radius: 4px;
+    border: 1px solid rgba(255,154,118,0.2);
+  }
+  .back-btn:hover { background: var(--accent-wash); }
+  .detail-title { font-weight: 600; font-size: 15px; flex: 1; }
+  .detail-meta { font-family: var(--mono); font-size: 11px; color: var(--fg-50); margin-bottom: 16px; }
+  .detail-actions { display: flex; gap: 6px; }
+
+  .panel {
+    border: 1px solid var(--border); border-radius: 8px;
+    padding: 12px 14px; margin-bottom: 12px;
+  }
+  .panel-title { font-family: var(--mono); font-size: 10px; color: var(--fg-40); text-transform: uppercase; margin-bottom: 8px; }
+  .outcome-item { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--fg-70); margin-bottom: 4px; }
+  .outcome-item .check { color: var(--allow); }
+  .outcome-item .cross { color: var(--block); }
+  .outcome-item .pending { color: var(--fg-40); }
+  .progress-dots { display: flex; gap: 3px; margin: 8px 0; }
+  .pdot { width: 10px; height: 10px; border-radius: 50%; border: 1px solid var(--border); }
+  .pdot.done { background: var(--allow); border-color: var(--allow); }
+  .pdot.current { background: var(--accent); border-color: var(--accent); animation: pulse 1.5s ease infinite; }
+  .pdot.pending { background: transparent; }
+
+  .verdict { font-family: var(--mono); font-size: 11px; margin-top: 8px; }
+  .verdict.unverified { color: var(--fg-40); }
+  .verdict.verified { color: var(--allow); }
+  .verdict.failed { color: var(--block); }
+
+  details.collapsible { margin-bottom: 12px; }
+  details.collapsible summary {
+    font-family: var(--mono); font-size: 11px; color: var(--fg-50);
+    cursor: pointer; padding: 8px 0; user-select: none;
+  }
+  details.collapsible summary:hover { color: var(--fg); }
+  .turn { padding: 6px 0; border-bottom: 1px solid var(--border-soft); font-size: 12px; }
+  .turn.user { color: var(--accent); }
+  .turn.agent { color: var(--fg-70); }
+  .tc { font-size: 11px; padding: 4px 0; color: var(--fg-50); font-family: var(--mono); }
+  .tc code { color: var(--accent); }
+
+  .input-area {
+    border-top: 1px solid var(--border-soft); padding: 12px 20px;
+    background: var(--bg-1); flex-shrink: 0;
+  }
+  .input-bar {
+    display: flex; align-items: center; gap: 10px;
+    background: var(--bg-2); border: 1px solid var(--border);
+    border-radius: 10px; padding: 10px 14px; max-width: 900px; margin: 0 auto;
+  }
+  .input-bar:focus-within { border-color: rgba(255,154,118,0.4); }
+  .input-bar.warn { border-color: var(--warn); }
+  .input-bar.block { border-color: var(--block); }
+  .input-ta {
+    flex: 1; background: transparent; border: none;
+    color: var(--fg); font-family: var(--sans); font-size: 13px;
+    resize: none; outline: none; height: 22px; line-height: 22px;
+  }
+  .input-ta::placeholder { color: var(--fg-40); }
+  .input-ta:disabled { color: var(--fg-30); }
+  .input-meta { font-family: var(--mono); font-size: 10px; color: var(--fg-40); white-space: nowrap; }
+  .send-btn {
+    background: var(--accent); color: #000; border: none; border-radius: 6px;
+    width: 28px; height: 28px; display: flex; align-items: center;
+    justify-content: center; cursor: pointer; flex-shrink: 0;
+    transition: transform 0.2s;
+  }
+  .send-btn:hover { filter: brightness(1.05); }
+  .send-btn:disabled { opacity: 0.35; cursor: default; }
+  .offline-banner {
+    text-align: center; padding: 4px; font-size: 10px; font-family: var(--mono);
+    color: var(--warn); background: rgba(254,188,46,0.06);
+    border-bottom: 1px solid rgba(254,188,46,0.15);
+  }
+  ::-webkit-scrollbar { width: 6px; }
+  ::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
+`;
+const APP_SCRIPT = `
+const _cached = {};
+let _filter = 'all', _detail = null, _offline = false;
+const ICONS = { queued:'\\u23F3', running:'\\u25CF', paused:'\\u23F8', blocked:'\\uD83D\\uDD12', done:'\\u2713', failed:'\\u2715', crashed:'!', killed:'\\u2298' };
+const STAT_ORDER = ['running','queued','paused','blocked','done','failed','crashed','killed'];
+const FILTERS = { all: s=>true, running: s=>['running','queued','paused','blocked'].includes(s.status), done: s=>['done','completed'].includes(s.status), failed: s=>['failed','crashed','killed','error'].includes(s.status) };
+
+function ms(t) { return t?'\\u2713':'\\u2715'; }
+function dur(ms) { if(!ms&&ms!==0)return''; const s=Math.floor(ms/1000); if(s<60)return s+'s'; return Math.floor(s/60)+'m '+(s%60)+'s'; }
+function title(p) { return (p||'Untitled').split('\\n')[0].slice(0,80); }
+function allS(d) { const sp=d.spawned||d.sessions||[], pe=d.persisted||[], seen=new Set(sp.map(s=>s.sessionId)); return [...sp,...pe.filter(p=>!seen.has(p.sessionId))]; }
+function cardActions(s) {
+  const m={
+    running:'<button class="card-btn pause" onclick="event.stopPropagation();a(\\'pause\\',\\''+s+'\\')">Pause</button><button class="card-btn kill" onclick="event.stopPropagation();a(\\'kill\\',\\''+s+'\\')">Kill</button>',
+    paused:'<button class="card-btn" onclick="event.stopPropagation();a(\\'resume\\',\\''+s+'\\')">Resume</button><button class="card-btn kill" onclick="event.stopPropagation();a(\\'kill\\',\\''+s+'\\')">Kill</button>',
+    queued:'<button class="card-btn kill" onclick="event.stopPropagation();a(\\'kill\\',\\''+s+'\\')">Cancel</button>',
+    crashed:'<button class="card-btn restart" onclick="event.stopPropagation();a(\\'restart\\',\\''+s+'\\')">Restart</button>',
+    failed:'<button class="card-btn restart" onclick="event.stopPropagation();a(\\'restart\\',\\''+s+'\\')">Restart</button>',
+    blocked:'<button class="card-btn kill" onclick="event.stopPropagation();a(\\'kill\\',\\''+s+'\\')">Cancel</button>',
+  };
+  return m[mapped(s)]||'';
+}
+function statIcon(s) { return '<span class="status-icon '+s+'"></span>'; }
+function verB(v) { return v&&v!=='unverified'?'<span class="verify-badge '+v+'">'+v+'</span>':''; }
+function tagHtml(t) { return t.map(x=>'<span style="font-size:10px;color:var(--fg-40);font-family:var(--mono)">'+x+'</span>').join(''); }
+
+function st(s) {
+  if(s==='completed')return'done'; if(s==='error'||s==='killed')return'failed'; if(s==='paused')return'paused'; return s;
+}
+function aStat(s) { return s==='blocked'?'paused':s==='killed'?'failed':s==='crashed'?'failed':st(s); }
+function mapped(s) { return s==='queued'?'running':s==='blocked'?'paused':aStat(s); }
+
+function findS(id) { const s=allS(_cached.tasks||{}); return s.find(x=>x.sessionId===id)||null; }
+
+function render() {
+  if(_detail){ const t=findS(_detail); if(t)renderD(t); else{ _detail=null; renderL(); } }
+  else renderL();
+  upCnt(); upBud(); upSq();
+}
+
+function renderL() {
+  const c=document.getElementById('task-list'), all=allS(_cached.tasks||{});
+  const fl=all.filter(FILTERS[_filter]||FILTERS.all);
+  let html='';
+  for(const g of STAT_ORDER){
+    const items=fl.filter(x=>aStat(x.status)===g||(g==='running'&&['running','queued'].includes(x.status))||(g==='failed'&&['crashed','killed','error'].includes(x.status)));
+    if(!items.length)continue;
+    const label={running:'Running',queued:'Running',paused:'Paused',blocked:'Blocked',done:'Done',failed:'Failed',crashed:'Failed',killed:'Failed'}[g]||g;
+    html+='<div class="section-label">'+label+'</div>';
+    for(const t of items)html+=cardH(t);
+  }
+  if(!html){
+    const h={all:'No tasks yet. Type a task below to get started.',running:'No running tasks.',done:'No completed tasks.',failed:'No failed tasks.'};
+    html='<div class="empty-state"><h2>'+(h[_filter]||'No tasks found.')+'</h2></div>';
+  }
+  c.innerHTML=html;
+}
+
+function cardH(t) {
+  const s=st(t.status), steps=(t.steps||[]).length, files=t.artifacts?.files?.length??0, d=dur(t.durationMs||(t.completedAt?t.completedAt-t.startedAt:Date.now()-t.startedAt));
+  const co=t.cost?t.cost.spent:null;
+  return '<div class="task-card" onclick="showD(\\''+t.sessionId+'\\')">'
+    +'<div class="card-row1">'+statIcon(s)+'<span class="card-title">'+title(t.prompt)+'</span>'+tagHtml(t.tags||[])+'<span class="card-agent">'+(t.agent||'?')+'</span></div>'
+    +'<div class="card-row2"><span>'+d+'</span>'+(co!==null?'<span>· $'+(co/100).toFixed(2)+'</span>':'')+'<span>· '+steps+' tools</span><span>· '+files+' files</span>'+verB(t.verification)+'</div>'
+    +(cardActions(t.sessionId)?'<div class="card-row3">'+cardActions(t.sessionId)+'</div>':'')+'</div>';
+}
+
+function upCnt() {
+  const s=allS(_cached.tasks||{}), f={all:s.length,running:s.filter(x=>['running','queued','paused','blocked'].includes(x.status)).length,done:s.filter(x=>x.status==='completed'||x.status==='done').length,failed:s.filter(x=>['error','killed','crashed','failed'].includes(x.status)).length};
+  const set=(id,n)=>{const e=document.getElementById(id);if(e)e.textContent=n;};
+  set('c-all',f.all);set('c-running',f.running);set('c-done',f.done);set('c-failed',f.failed);
+}
+
+function upBud() {
+  const p=_cached.pricing||_cached.tasks?.pricing;
+  const e=document.getElementById('budget');
+  if(!p||!p.dailyBudgetCents){e.textContent='';e.className='budget';return;}
+  const d=p.dailyBudgetCents,s=p.spentTodayCents||0;
+  e.textContent='$'+(s/100).toFixed(2)+'/$'+(d/100).toFixed(2);
+  e.className='budget'+(s>=d?' block':s>=d*0.8?' warn':' safe');
+  const ib=document.querySelector('.input-bar');
+  if(ib){ib.className='input-bar'+(s>=d?' block':s>=d*0.8?' warn':'');}
+}
+
+function upSq() {
+  const d=_cached.readiness||{}, a=d.agents||[], auto=d.auto?[{id:'auto',label:'Auto (Conductor)',state:d.auto.state}]:[], all=[...auto,...a];
+  const e=document.getElementById('squad');
+  e.innerHTML=all.map(x=>{const r=agentS(x.state),n=x.label||x.name||x.id||'?';return'<span class="squad-agent"><span class="squad-dot '+r+'"></span>'+n+'</span>';}).join('');
+  if(!all.length)e.innerHTML='<span style="color:var(--fg-40)">No agents configured</span>';
+}
+function agentS(state){if(!state||state==='error')return'offline';if(state==='installed'||state==='ready')return'ready';return'busy';}
+
+function setFilter(f){
+  _filter=f;
+  document.querySelectorAll('.filter-tab').forEach(el=>el.classList.toggle('active',el.dataset.filter===f));
+  if(_cached.tasks)render();
+}
+
+function showD(id){
+  _detail=id;
+  const t=findS(id);
+  if(!t){_detail=null;return;}
+  document.getElementById('task-list-view').style.display='none';
+  document.getElementById('task-detail-view').style.display='block';
+  renderD(t);
+}
+function hideD(){
+  _detail=null;
+  document.getElementById('task-list-view').style.display='';
+  document.getElementById('task-detail-view').style.display='none';
+  render();
+}
+
+function renderD(t) {
+  const s=st(t.status), steps=(t.steps||[]), files=t.artifacts?.files||[], d=dur(t.durationMs||(t.completedAt?t.completedAt-t.startedAt:Date.now()-t.startedAt));
+  const co=t.cost?t.cost.spent:null, v=t.verification||'unverified';
+  const nStep=steps.length, cStep=steps.filter(x=>x.status==='completed').length;
+  const progDots=Array.from({length:Math.max(nStep,3)},(_,i)=>i<cStep?'<span class="pdot done"></span>':i===cStep?'<span class="pdot current"></span>':'<span class="pdot pending"></span>').join('');
+
+  let oHtml='<div class="panel"><div class="panel-title">Outcome</div>';
+  if(t.status==='running'||t.status==='queued'){
+    oHtml+='<div class="progress-dots">'+progDots+'</div><div class="outcome-item pending">'+cStep+'/'+Math.max(nStep,3)+' steps</div>';
+  } else {
+    oHtml+=(files.length?'<div class="outcome-item"><span class="check">'+ms(true)+'</span> '+files.length+' files changed</div>':'');
+    oHtml+='<div class="outcome-item"><span class="'+(nStep>0?'check':'pending')+'">'+(nStep>0?ms(true):'\\u2022')+'</span> '+nStep+' tool calls</div>';
+    oHtml+=t.finalReport?'<div class="outcome-item"><span class="check">'+ms(true)+'</span> Final Report</div>':'';
+    oHtml+='<div class="verdict '+v+'">Status: '+v+(v==='unverified'?' \\u2014 review the output and verify manually':'')+'</div>';
+    if(v==='unverified')oHtml+='<button class="card-btn verify" style="margin-top:8px" onclick="vfy(\\''+t.sessionId+'\\')">Verify</button>';
+  }
+  oHtml+='</div>';
+
+  const turns=t.turns||t.steps||[], tc=t.toolTrace||[];
+  const convHtml='<details class="collapsible"><summary>'+(turns.length>0?turns.length+' messages':'No messages')+'</summary>'
+    +turns.map(u=>'<div class="turn '+(u.role||'agent')+'"><b>'+(u.role||'agent')+':</b> '+(u.content||u.output||JSON.stringify(u))+'</div>').join('')+'</details>';
+  const traceHtml='<details class="collapsible"><summary>'+(tc.length>0?tc.length+' tool calls':'No tool trace')+'</summary>'
+    +tc.map(z=>'<div class="tc"><code>'+z.tool+'</code> '+(z.args||'')+' <span style="color:var(--fg-30)">'+(z.durationMs?z.durationMs+'ms':'')+'</span></div>').join('')+'</details>';
+
+  const inputDisabled=t.status!=='running'&&t.status!=='done'&&t.status!=='failed'&&t.status!=='crashed';
+  const ta=document.getElementById('detail-ta'), btn=document.getElementById('detail-btn');
+  if(ta){ta.disabled=inputDisabled;ta.placeholder=inputDisabled?'Follow-up unavailable for this state':'Request changes or ask a question...';}
+  if(btn)btn.disabled=inputDisabled;
+
+  document.getElementById('detail-view').innerHTML='<div class="detail-header">'
+    +'<span class="back-btn" onclick="hideD()">\\u2190 Back</span>'
+    +'<span class="detail-title">'+title(t.prompt)+'</span>'
+    +'<span class="card-agent" style="margin-left:auto">'+(t.agent||'?')+'</span>'
+    +'</div>'
+    +'<div class="detail-meta"><span class="status-icon '+s+'"></span> '+s+' \\u00B7 '+d+(co!==null?' \\u00B7 $'+(co/100).toFixed(2):'')+'</div>'
+    +oHtml+convHtml+traceHtml;
+}
+
+async function a(action, id) {
+  if(action==='kill'){ try{await fetch('/api/task/'+id+'/kill',{method:'POST'});fetchAll();}catch(e){al('Failed: '+e.message);} return; }
+  if(action==='pause'){ al('Pause not yet wired to agent API'); return; }
+  if(action==='resume'){ al('Resume not yet wired to agent API'); return; }
+  if(action==='restart'){ al('Restart not yet wired'); return; }
+}
+
+function vfy(id) {
+  const s=allS(_cached.tasks||{}), t=s.find(x=>x.sessionId===id);
+  if(!t)return;
+  t.verification='verified';
+  render();
+}
+
+function al(m){const e=document.getElementById('toast');if(e){e.textContent=m;e.style.display='block';setTimeout(()=>{e.style.display='none';},3000);}}
+
+async function fetchAll() {
+  const sk=document.getElementById('skeleton');if(sk){const p=sk.parentNode;if(p)p.removeChild(sk);}
+  try {
+    const [t,r]=await Promise.all([fetch('/api/tasks').then(x=>x.json()),fetch('/api/readiness/agents').then(x=>x.json())]);
+    _cached.tasks=t;_cached.readiness=r;
+    if(t.pricing)_cached.pricing=t.pricing;
+    render();
+  }catch(e){console.error('fetch error',e);}
+  try {
+    if(!_cached.pricing){
+      const p=await fetch('/api/spend/today').then(x=>x.json());
+      if(p&&p.budget){_cached.pricing={dailyBudgetCents:Math.round((p.budget.dailyUsd||0)*100),spentTodayCents:Math.round((p.totalUsd||0)*100)}; upBud();}
+    }
+  }catch{}
+}
+
+async function submit(ta,btn){
+  const p=ta.value.trim();
+  if(!p)return;
+  btn.disabled=true;ta.disabled=true;
+  try {
+    const r=await fetch('/api/task',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({prompt:p})});
+    if(!r.ok){const e=await r.json();al('Failed: '+(e.error||'unknown'));}else{
+      ta.value='';btn.textContent='\\u2713';setTimeout(()=>{btn.textContent='\\u2191';btn.disabled=false;ta.disabled=false;ta.focus();},1200);
+      fetchAll();
+    }
+  }catch(e){al('Network error: '+e.message);btn.disabled=false;ta.disabled=false;}
+}
+
+function offlineMode(v){
+  _offline=v;
+  const b=document.getElementById('offline-banner');
+  if(b)b.style.display=v?'block':'none';
+}
+
+document.addEventListener('DOMContentLoaded',()=>{
+  fetchAll();
+
+  const es=new EventSource('/api/events/sessions');
+  let pollTimer=setInterval(fetchAll,30000), sseTimer=null;
+  es.addEventListener('message',e=>{try{const m=JSON.parse(e.data);if(m.type==='change')fetchAll();}catch{}});
+  es.addEventListener('error',()=>{
+    clearInterval(pollTimer);pollTimer=setInterval(fetchAll,8000);
+    if(sseTimer)clearTimeout(sseTimer);
+    sseTimer=setTimeout(()=>{clearInterval(pollTimer);pollTimer=setInterval(fetchAll,30000);sseTimer=null;},60000);
+  });
+  es.addEventListener('open',()=>{if(sseTimer){clearInterval(pollTimer);pollTimer=setInterval(fetchAll,8000);setTimeout(()=>{clearInterval(pollTimer);pollTimer=setInterval(fetchAll,30000);},10000);}});
+
+  window.addEventListener('offline',()=>offlineMode(true));
+  window.addEventListener('online',()=>{offlineMode(false);fetchAll();});
+
+  document.addEventListener('keydown',e=>{
+    if(e.key==='Escape'&&_detail)hideD();
+    if((e.metaKey||e.ctrlKey)&&e.key==='k'){e.preventDefault();const ta=document.getElementById('main-ta')||document.getElementById('detail-ta');if(ta)ta.focus();}
+  });
+
+  const ta=document.getElementById('main-ta'), btn=document.getElementById('main-btn');
+  if(btn)btn.addEventListener('click',()=>submit(ta,btn));
+  if(ta)ta.addEventListener('keydown',e=>{if(e.key==='Enter'&&!e.shiftKey&&!ta.disabled&&btn&&!btn.disabled){e.preventDefault();submit(ta,btn);}});
+
+  const dta=document.getElementById('detail-ta'), dbtn=document.getElementById('detail-btn');
+  if(dbtn)dbtn.addEventListener('click',()=>submit(dta,dbtn));
+  if(dta)dta.addEventListener('keydown',e=>{if(e.key==='Enter'&&!e.shiftKey&&!dta.disabled&&dbtn&&!dbtn.disabled){e.preventDefault();submit(dta,dbtn);}});
+});
+`;
+export const TASK_HTML_V2 = `<!doctype html>
+<html lang="en">
+<head>
+<meta charset="utf-8" />
+<meta name="viewport" content="width=device-width,initial-scale=1" />
+<title>codehere</title>
+<style>${SHARED_STYLES}</style>
+</head>
+<body>
+<div class="app">
+  <div class="header">
+    <span class="logo">codehere</span>
+    <span class="budget safe" id="budget"></span>
+    <a href="/" class="v1-link">v1 Dashboard</a>
+  </div>
+
+  <div class="squad-row" id="squad">
+    <span style="color:var(--fg-30)">Squad:</span>
+    <span class="squad-agent"><span class="squad-dot offline"></span>loading...</span>
+  </div>
+
+  <div class="bar">
+    <button class="new-btn" onclick="document.getElementById('main-ta')?.focus()">+ New Task</button>
+    <span class="filter-tab active" data-filter="all" onclick="setFilter('all')">All <span class="cnt" id="c-all">0</span></span>
+    <span class="filter-tab" data-filter="running" onclick="setFilter('running')">&bull; Running <span class="cnt" id="c-running">0</span></span>
+    <span class="filter-tab" data-filter="done" onclick="setFilter('done')">&check; Done <span class="cnt" id="c-done">0</span></span>
+    <span class="filter-tab" data-filter="failed" onclick="setFilter('failed')">&times; Failed <span class="cnt" id="c-failed">0</span></span>
+  </div>
+
+  <div class="content">
+    <div id="task-list-view" class="content-inner">
+      <div id="task-list">
+        <div class="skeleton" id="skeleton">
+          <div class="skeleton-card"></div>
+          <div class="skeleton-card"></div>
+          <div class="skeleton-card"></div>
+        </div>
+      </div>
+    </div>
+    <div id="task-detail-view" style="display:none" class="content-inner">
+      <div id="detail-view"></div>
+      <div class="input-area" style="border-top:none;padding:12px 0">
+        <div class="input-bar" style="max-width:100%">
+          <textarea class="input-ta" id="detail-ta" placeholder="Request changes or ask a question..." rows="1" disabled></textarea>
+          <div class="input-meta"><span>Auto</span></div>
+          <button class="send-btn" id="detail-btn" disabled>&#8593;</button>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <div class="input-area">
+    <div class="input-bar">
+      <textarea class="input-ta" id="main-ta" placeholder="Describe a task or ask a question..." rows="1"></textarea>
+      <div class="input-meta"><span>Auto</span></div>
+      <button class="send-btn" id="main-btn">&#8593;</button>
+    </div>
+  </div>
+
+  <div id="offline-banner" class="offline-banner" style="display:none">You're offline. Actions will resume when connected.</div>
+  <div id="toast" style="display:none;position:fixed;bottom:80px;left:50%;transform:translateX(-50%);background:var(--bg-2);border:1px solid var(--border);border-radius:8px;padding:8px 16px;font-size:12px;color:var(--fg-70);z-index:100"></div>
+</div>
+<script>${APP_SCRIPT}</script>
+</body>
+</html>`;
+//# sourceMappingURL=ui-page-v2.js.map