codehere 0.7.1 → 1.0.1

package/dist/infrastructure/protocols/ui/app-script-render.js

@@ -0,0 +1,166 @@
+// Pure render helpers extracted from app-script.ts (god-file split 2/2, 2026-06-29).
+// A browser-JS string fragment interpolated into APP_SCRIPT at the same scope —
+// function declarations hoist exactly as before, so no behavior change.
+export const RENDER_HELPERS = `
+function costPill(cents, paid) {
+  if (cents === 0 || cents === null || cents === undefined) {
+    return '<span class="cost-signal free">$0.00</span>';
+  }
+  const dollars = '$' + (cents/100).toFixed(cents < 10 ? 4 : 2);
+  return '<span class="cost-signal ' + (paid === false ? 'free' : 'paid') + '">' + dollars + '</span>';
+}
+// Inline code-card renderer · single-pass tokenizer · processes one token at
+// a time so substitution markup never gets re-matched on the next replace.
+// Lightweight intentionally · "looks like code", not a real lexer.
+function codeCard(path, snippet, lang) {
+  const ext = (lang || path.split('.').pop() || '').toLowerCase();
+  const langLabel = ext === 'ts' || ext === 'tsx' ? 'typescript'
+    : ext === 'js' || ext === 'jsx' ? 'javascript'
+    : ext === 'py' ? 'python'
+    : ext === 'rs' ? 'rust'
+    : ext === 'go' ? 'go'
+    : ext === 'lua' ? 'lua'
+    : (ext || 'text');
+  function esc(s){ return s.replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;'); }
+  const KW = /^(const|let|var|function|return|if|else|for|while|import|export|from|class|extends|new|await|async|throw|try|catch|finally|of|in|typeof|null|true|false|this|interface|type|public|private|readonly|static|enum|as)\\b/;
+  const TP = /^(string|number|boolean|void|any|unknown|Promise|Array|Record|Map|Set|Request|Response|NextFunction)\\b/;
+  // Priority alternation · line-comment / single-quote string / double-quote string / number / identifier.
+  const TOKEN = /^(\\/\\/[^\\n]*|'(?:\\\\.|[^'\\\\])*'|"(?:\\\\.|[^"\\\\])*"|\\d+(?:\\.\\d+)?|[A-Za-z_$][A-Za-z0-9_$]*)/;
+  function tokenize(line){
+    let out = '', i = 0;
+    while(i < line.length){
+      const rest = line.slice(i);
+      const m = TOKEN.exec(rest);
+      if(!m){ out += esc(rest[0]); i += 1; continue; }
+      const tok = m[0];
+      if(tok.charAt(0)==='/') out += '<span class="cm">'+esc(tok)+'</span>';
+      else if(tok.charAt(0)==='"' || tok.charAt(0)==='\\'') out += '<span class="str">'+esc(tok)+'</span>';
+      else if(/^\\d/.test(tok)) out += '<span class="num">'+esc(tok)+'</span>';
+      else if(KW.test(tok)) out += '<span class="kw">'+esc(tok)+'</span>';
+      else if(TP.test(tok)) out += '<span class="tp">'+esc(tok)+'</span>';
+      else if(line.charAt(i + tok.length) === '(') out += '<span class="fn">'+esc(tok)+'</span>';
+      else out += esc(tok);
+      i += tok.length;
+    }
+    return out;
+  }
+  const lines = String(snippet || '').split('\\n');
+  const body = lines.map(function(raw, i){
+    return '<span class="ln">'+String(i+1).padStart(2,' ')+'</span>'+tokenize(raw);
+  }).join('\\n');
+  const meta = lines.length + (lines.length===1?' line':' lines');
+  return '<div class="code-card">'
+    + '<div class="head"><span class="lang">'+langLabel+'</span>'
+    + '<span class="path">'+esc(path)+'</span>'
+    + '<span class="meta">'+meta+'</span></div>'
+    + '<pre>'+body+'</pre></div>';
+}
+// Markdown renderer for agent prose (Final Report + say steps). The report used
+// to escape raw text, so fenced code blocks, inline code, bold and numbered
+// lists all leaked as literal characters — the "code not in a proper block"
+// complaint. Reuses codeCard for fenced blocks. Fence/backtick chars are built
+// from charCode 96 because this whole file is a backtick template literal.
+function mdInline(s){
+  var BT=String.fromCharCode(96);
+  s=s.replace(/\\*\\*([^*]+)\\*\\*/g,'<strong>$1</strong>');
+  var parts=s.split(BT);
+  if(parts.length>1 && parts.length%2===1){
+    var out='';
+    for(var i=0;i<parts.length;i++){ out+=(i%2===1)?'<code class="ic">'+parts[i]+'</code>':parts[i]; }
+    s=out;
+  }
+  return s;
+}
+function mdProse(t){
+  var esc=String(t==null?'':t).replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;');
+  var blocks=esc.split(/\\n\\s*\\n/).map(function(b){return b.replace(/^\\n+|\\n+$/g,'').trim();}).filter(Boolean);
+  function cells(l){ return l.trim().replace(/^\\|/,'').replace(/\\|$/,'').split('|').map(function(c){return mdInline(c.trim());}); }
+  return blocks.map(function(b){
+    var lines=b.split('\\n');
+    // ATX header (# .. ######): emit the heading, render any trailing lines as prose
+    var hm=lines[0].match(/^(#{1,6})\\s+(.*)$/);
+    if(hm){
+      var lvl=Math.min(hm[1].length+1,6);
+      var rest=lines.slice(1).join('\\n').trim();
+      return '<h'+lvl+' class="rep-h">'+mdInline(hm[2])+'</h'+lvl+'>'+(rest?mdProse(rest):'');
+    }
+    // pipe table: every line starts with |, line 2 is the |---|---| separator
+    if(lines.length>=2 && lines.every(function(l){return /^\\s*\\|/.test(l);}) && /^[\\s|:-]+$/.test(lines[1]) && lines[1].indexOf('-')!==-1){
+      var thead='<tr>'+cells(lines[0]).map(function(c){return '<th>'+c+'</th>';}).join('')+'</tr>';
+      var tbody=lines.slice(2).map(function(l){return '<tr>'+cells(l).map(function(c){return '<td>'+c+'</td>';}).join('')+'</tr>';}).join('');
+      return '<table class="rep-table"><thead>'+thead+'</thead><tbody>'+tbody+'</tbody></table>';
+    }
+    var isList=lines.length>0 && lines.every(function(l){return /^\\s*(\\d+\\.|[-*])\\s+/.test(l);});
+    if(isList){
+      var ordered=/^\\s*\\d+\\./.test(lines[0]);
+      var items=lines.map(function(l){return '<li>'+mdInline(l.replace(/^\\s*(\\d+\\.|[-*])\\s+/,''))+'</li>';}).join('');
+      return (ordered?'<ol':'<ul')+' class="rep-list">'+items+(ordered?'</ol>':'</ul>');
+    }
+    return '<p class="rep-p">'+mdInline(lines.join('<br>'))+'</p>';
+  }).join('');
+}
+function renderReportMd(raw){
+  var BT=String.fromCharCode(96), FENCE=BT+BT+BT;
+  var segs=String(raw==null?'':raw).split(FENCE);
+  var html='';
+  for(var i=0;i<segs.length;i++){
+    if(i%2===1){
+      var lines=segs[i].split('\\n');
+      var lang='';
+      if(lines.length && /^[a-zA-Z]{1,12}$/.test(lines[0].trim())){ lang=lines[0].trim(); lines=lines.slice(1); }
+      var codeBody=lines.join('\\n').replace(/^\\n+|\\n+$/g,'');
+      html+=codeCard('', codeBody, lang);
+    } else if(segs[i].trim()){
+      html+=mdProse(segs[i]);
+    }
+  }
+  return html||mdProse(String(raw||''));
+}
+// Compact one-line label for the step trace — drops fenced code (shown in full
+// in the conversation), collapses whitespace, escapes, renders inline md, and
+// truncates. Was dumping the whole raw say (incl. literal fences, unescaped).
+function compactLabel(s){
+  var BT=String.fromCharCode(96);
+  var t=String(s==null?'':s).split(BT+BT+BT).filter(function(_,i){return i%2===0;}).join(' ');
+  t=t.replace(/\\s+/g,' ').trim();
+  var esc=t.replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;');
+  if(esc.length>140) esc=esc.slice(0,140)+'\\u2026';
+  return mdInline(esc);
+}
+// ANSI -> HTML: render the SGR colors a real terminal shows (npm test, git,
+// stack traces) instead of leaking raw escape codes as garbage. Stateless,
+// hand-rolled, 16 colors + bold/dim/underline — NOT a terminal emulator. ESC is
+// charCode 27; regexes built via new RegExp to keep the escaping sane.
+function ansiToHtml(raw){
+  var ESC=String.fromCharCode(27);
+  var s=String(raw==null?'':raw);
+  // drop non-SGR CSI (cursor moves / clears) + other ESC seqs so they don't leak
+  s=s.replace(new RegExp(ESC+'\\\\[[0-9;?]*[A-LN-Za-ln-z]','g'),'').replace(new RegExp(ESC+'[^\\\\[]','g'),'');
+  var COLORS={'30':'#5c6370','31':'#e06c75','32':'#98c379','33':'#e5c07b','34':'#61afef','35':'#c678dd','36':'#56b6c2','37':'#abb2bf','90':'#7f848e','91':'#e06c75','92':'#98c379','93':'#e5c07b','94':'#61afef','95':'#c678dd','96':'#56b6c2','97':'#ffffff'};
+  function esc(t){ return t.replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;'); }
+  var cur={};
+  function open(){ var st=''; if(cur.color)st+='color:'+cur.color+';'; if(cur.bold)st+='font-weight:600;'; if(cur.dim)st+='opacity:.6;'; if(cur.underline)st+='text-decoration:underline;'; return st?'<span style="'+st+'">':''; }
+  var re=new RegExp(ESC+'\\\\[([0-9;]*)m','g');
+  var out='', last=0, m;
+  function emit(text){ if(!text)return; var o=open(); out+= o ? o+esc(text)+'</span>' : esc(text); }
+  while((m=re.exec(s))!==null){
+    emit(s.slice(last,m.index)); last=re.lastIndex;
+    var codes=m[1]?m[1].split(';'):['0'];
+    for(var i=0;i<codes.length;i++){ var c=codes[i]||'0'; if(c==='0'||c==='')cur={}; else if(c==='1')cur.bold=true; else if(c==='2')cur.dim=true; else if(c==='4')cur.underline=true; else if(c==='22'){cur.bold=false;cur.dim=false;} else if(c==='39')cur.color=null; else if(COLORS[c])cur.color=COLORS[c]; }
+  }
+  emit(s.slice(last));
+  return out;
+}
+// Render a tool step's output: ANSI-colored preview inline; if the full output
+// is longer, a <details> expander reveals the whole thing (test runs, diffs,
+// stack traces were silently clipped to 400 chars before).
+function renderStepOutput(z){
+  var prev=z.output!=null?String(z.output):'';
+  var full=z.fullOutput!=null?String(z.fullOutput):prev;
+  if(!prev && !full) return '';
+  if(full.length<=prev.length+2) return '<div class="tl-out" data-user-content>'+ansiToHtml(prev)+'</div>';
+  return '<details class="tl-out-x"><summary><span class="tl-caret">\\u25B8</span><span class="tl-out tl-out-prev" data-user-content>'+ansiToHtml(prev)+'</span><span class="tl-out-more">show full output</span></summary>'
+    +'<pre class="tl-out-full" data-user-content>'+ansiToHtml(full)+'</pre></details>';
+}
+`;
+//# sourceMappingURL=app-script-render.js.map

package/dist/infrastructure/protocols/ui/app-script-share.js

@@ -0,0 +1,78 @@
+/**
+ * Share-thread modal wire-up — turning a local thread into something that can be handed to
+ * someone else, and the controls around that.
+ *
+ * Split out of app-script.ts (strangler fig). Verbatim slice, interpolated back at the
+ * position it was cut from so it keeps sharing the surrounding IIFE scope — its functions
+ * are still called from the code left behind. Verified by hashing the composed APP_SCRIPT
+ * before and after: same bytes.
+ */
+export const SHARE_MODAL = `  /* v0.8 S4 · share-thread modal wire-up */
+  let _shareBundle = null;
+  let _shareLink = '';
+  const shareModal = document.getElementById('share-modal');
+  const openShare = async ()=>{
+    // Fix D10 (2026-05-23) · Two bugs in one:
+    //   (a) _detail is a STRING sessionId, not an object · _detail.sessionId
+    //       would have been undefined even when a session WAS selected.
+    //   (b) No session selected previously threw a useless toast · now we
+    //       auto-pick the most-recent completed session. The user can still
+    //       open the modal from any task by clicking it first.
+    let sessionId = _detail;
+    if(!sessionId){
+      const all = allS(_cached.tasks||{});
+      const done = all.filter(x=>x.status==='completed'||x.status==='done');
+      if(!done.length){
+        flashToast('No completed sessions yet · run a task first');
+        return;
+      }
+      // Most recent done (sort by completedAt desc)
+      done.sort((a,b)=>(b.completedAt||0)-(a.completedAt||0));
+      sessionId = done[0].sessionId;
+    }
+    shareModal.classList.add('open');
+    document.getElementById('share-link-id').textContent = '…fetching…';
+    document.getElementById('share-link-fp').textContent = '…';
+    try{
+      const r = await fetch('/api/thread/' + encodeURIComponent(sessionId) + '/export', { method:'POST' });
+      if(!r.ok) throw new Error('export failed · HTTP ' + r.status);
+      const j = await r.json();
+      _shareBundle = j.bundle;
+      _shareLink = j.link;
+      document.getElementById('share-link-id').textContent = (j.bundle?.body?.sessionId || sessionId || '').slice(0,12);
+      document.getElementById('share-link-fp').textContent = (j.fingerprint || '').replace('...', '…');
+    }catch(err){
+      document.getElementById('share-link-id').textContent = 'error';
+      document.getElementById('share-link-fp').textContent = (err && err.message) || 'see console';
+      console.error('share export failed', err);
+    }
+  };
+  const closeShare = ()=>shareModal.classList.remove('open');
+  // S13 · the share button left the header — the ⌘K "Share this thread"
+  // command invokes this same opener (existing modal, existing export).
+  window.openShare = openShare;
+  document.getElementById('share-close')?.addEventListener('click', closeShare);
+  shareModal?.addEventListener('click', e=>{ if(e.target===shareModal) closeShare(); });
+  document.getElementById('share-copy-link')?.addEventListener('click', async ()=>{
+    if(!_shareLink) return;
+    try{ await navigator.clipboard.writeText(_shareLink); flashToast('Link copied'); }
+    catch{ flashToast('Could not copy · try the .json download'); }
+  });
+  document.getElementById('share-download')?.addEventListener('click', ()=>{
+    if(!_shareBundle) return;
+    const blob = new Blob([JSON.stringify(_shareBundle, null, 2)], { type:'application/json' });
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement('a');
+    a.href = url;
+    a.download = (_shareBundle.body?.sessionId?.slice(0,12) || 'thread') + '.codehere.json';
+    document.body.appendChild(a); a.click(); a.remove();
+    setTimeout(()=>URL.revokeObjectURL(url), 1000);
+  });
+  function flashToast(msg){
+    const t = document.getElementById('share-toast');
+    if(!t) return;
+    t.textContent = msg; t.classList.add('show');
+    setTimeout(()=>t.classList.remove('show'), 1600);
+  }
+`;
+//# sourceMappingURL=app-script-share.js.map

package/dist/infrastructure/protocols/ui/app-script-sidebar.js

@@ -0,0 +1,194 @@
+// The project sidebar — the rail that IS the navigator. Extracted from
+// app-script.ts (strangler-fig split 4, 2026-08-08; same pattern as
+// app-script-render.ts and app-script-conversation.ts). A browser-JS string
+// fragment interpolated into APP_SCRIPT at the same scope: function
+// declarations hoist exactly as before, so this is a MOVE, not a rewrite —
+// proven by the built APP_SCRIPT hashing identically before and after.
+//
+// Owns: sidebar state (_sbExpanded/_sbThreads/_sbQuery), per-project thread
+// leaves (sbLeavesHtml), the team roster (loadTeam/teamSectionHtml — where the
+// per-agent rainbow was killed, DESIGN.md §5), the nav section, renderSidebar
+// itself, and the row/leaf click handlers.
+//
+// House rules for this file (it is INSIDE a TS template literal when served):
+// no literal backticks, unicode escapes stay double-escaped, served regexes
+// double-escaped. The opening backtick hugs the first line and the closing one
+// hugs the last ON PURPOSE: a stray newline either side changes the served
+// bytes, which the identity check catches.
+export const SIDEBAR = `var _sbExpanded = {}; // slug -> true (user-toggled expansion)
+var _sbThreads = {};  // slug -> tasks[] (lazy-loaded per project; undefined = not fetched)
+var _sbQuery = {};    // slug -> filter string (the per-project thread search)
+function _sbEsc(s){return String(s==null?'':s).replace(/[&<>"]/g,function(c){return {'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;'}[c];});}
+var SB_SHOW=8; // recent threads shown per project before "view all"; the rest live in the room
+function sbLeavesHtml(tasks, cwd, slug, query){
+  if(tasks===null||tasks===undefined) return '<div class="sb-loading">loading\\u2026</div>';
+  // A "thread" is a real top-level task: not a reply turn (parentSessionId), not a
+  // review, not archived/demo, and not a failover-lineage marker.
+  var all=tasks.filter(function(t){
+    if(!t || t.archived || t.parentSessionId) return false;
+    if(/^demo-/.test(t.sessionId||'')) return false;
+    var p=t.prompt||''; if(p.indexOf('Switched from')>=0 && p.indexOf('rate limit')>=0) return false;
+    return true;
+  }).sort(function(a,b){return (b.startedAt||0)-(a.startedAt||0);});
+  var enc=encodeURIComponent(cwd), q=(query||'').trim().toLowerCase(), h='';
+  // Search box once a project has more threads than fit — so a big project is
+  // navigable by typing, never an endless scroll.
+  if(all.length>SB_SHOW || q){
+    h+='<div class="sb-search"><input type="text" class="sb-q" placeholder="Filter '+all.length+' threads\\u2026" value="'+_sbEsc(query||'')+'" oninput="sbSearch(\\''+_sbEsc(slug)+'\\',\\''+enc+'\\',this.value)" onclick="event.stopPropagation()" onkeydown="event.stopPropagation()"></div>';
+  }
+  if(!all.length) return h+'<div class="sb-loading">no tasks yet</div>';
+  var matched=q?all.filter(function(t){return (t.prompt||'').toLowerCase().indexOf(q)>=0;}):all;
+  if(!matched.length) return h+'<div class="sb-loading">no match</div>';
+  var cap=matched.slice(0, q?40:SB_SHOW);
+  cap.forEach(function(t){
+    var sel=(_detail===t.sessionId); var k=agentKey(t.agent);
+    h+='<div class="sb-task'+(sel?' active':'')+'" tabindex="0" role="button" onclick="openLeaf(\\''+enc+'\\',\\''+t.sessionId+'\\')" onkeydown="if(event.key===\\'Enter\\'){openLeaf(\\''+enc+'\\',\\''+t.sessionId+'\\')}"><span class="ab stk '+k+'">'+(String(agentInitials(t.agent)).charAt(0)||'?')+'</span><span class="tt" data-user-content>'+_sbEsc(title(t.prompt))+'</span></div>';
+  });
+  var rest=matched.length-cap.length;
+  if(rest>0) h+='<div class="sb-more" role="button" tabindex="0" onclick="openRoom(\\''+enc+'\\')" onkeydown="if(event.key===\\'Enter\\'){openRoom(\\''+enc+'\\')}">+'+rest+(q?' more matches \\u00b7 open':' more \\u00b7 view all in project')+'</div>';
+  return h;
+}
+// Focus-safe search: re-render ONLY the leaves container (keep the input + caret).
+function sbSearch(slug, enc, value){
+  _sbQuery[slug]=value;
+  var proj=document.querySelector('.sb-proj[data-slug="'+slug+'"]'); if(!proj) return;
+  var leavesEl=proj.querySelector('.sb-leaves'); if(!leavesEl) return;
+  var active=proj.classList.contains('active');
+  var tasks=active?((_roomThread&&_roomThread.tasks)||[]):_sbThreads[slug];
+  var caret=null, hadFocus=false; var oldI=leavesEl.querySelector('.sb-q');
+  if(oldI){ caret=oldI.selectionStart; hadFocus=(document.activeElement===oldI); }
+  leavesEl.innerHTML=sbLeavesHtml(tasks, decodeURIComponent(enc), slug, value);
+  if(hadFocus){ var ni=leavesEl.querySelector('.sb-q'); if(ni){ ni.focus(); if(caret!=null){try{ni.setSelectionRange(caret,caret);}catch(e){}} } }
+}
+// DESIGN.md §4.1 "your team" — the roster that makes the memorable thing ("my
+// agents feel like a team") literal. Each agent is a row with an identity-hue
+// presence dot; the one currently working pulses, an unavailable one dims to
+// 35% and says the honest state. Fed by real readiness (/api/readiness/agents),
+// working derived live from running tasks. Fetched once, re-rendered on poll.
+var _teamAgents = null; // null = not fetched yet
+var _teamFetching = false;
+// The dot carries STATE, never identity. Identity is the agent's NAME, which is
+// rendered right beside it. This used to be a TEAM_HUE map giving every agent
+// its own colour — the per-agent rainbow that styles.ts declares dead and
+// DESIGN.md §5 bans — and it survived in JS where a CSS gate could not see it.
+var TEAM_STATE_COLOR = { working: 'var(--fg)', ready: 'var(--fg-70)', off: 'var(--fg-30)' };
+function loadTeam(){
+  if(_teamFetching) return; _teamFetching=true;
+  fetch('/api/readiness/agents').then(function(r){return r.json();}).then(function(d){
+    _teamAgents=(d&&d.agents)||[]; _teamFetching=false; renderSidebar();
+  }).catch(function(){ _teamAgents=[]; _teamFetching=false; });
+}
+function teamSectionHtml(){
+  if(_teamAgents===null){ loadTeam(); return ''; }
+  if(!_teamAgents.length) return '';
+  // an agent is "working" if a running/queued task uses it right now
+  var live=(allS(_cached.tasks||{})||[]).filter(function(t){return ['running','queued'].indexOf(t.status)>=0;});
+  var working={}; live.forEach(function(t){ var a=String(t.agent||'').toLowerCase().replace(/\\s+/g,'-'); working[a]=1; });
+  var rows=_teamAgents.map(function(a){
+    var id=String(a.id||'').toLowerCase();
+    var ready=a.state==='ready';
+    var isWorking=!!working[id];
+    // Say what the state actually IS. This read \`a.state==='not_installed' ? 'not installed'
+    // : 'needs auth'\` — but the adapters emit 'needs_install', never 'not_installed' (that
+    // literal belongs to readiness.ts, a different subsystem with its own vocabulary). The
+    // comparison could not match, so EVERY non-ready agent fell through to "needs auth". On a
+    // machine with nothing installed the rail told the user all six agents needed
+    // authentication, sending them to look for a login screen for software they do not have.
+    // 'billed_key_required' landed there too, which is a third different answer.
+    var state=isWorking?'working':(ready?'ready'
+      :(a.state==='needs_install'||a.state==='not_installed')?'not installed'
+      :a.state==='billed_key_required'?'needs paid key'
+      :a.state==='needs_auth'?'needs auth'
+      :'unknown');
+    var hue=TEAM_STATE_COLOR[isWorking?'working':(ready?'ready':'off')];
+    var dot='<span class="sb-dot'+(isWorking?' working':'')+'" style="background:'+hue+'"></span>';
+    return '<div class="sb-mate" title="'+convHe(String(a.description||''))+'"><span class="sb-dot-wrap">'+dot+'</span><span class="sb-mate-nm" data-user-content>'+convHe(String(a.label||id))+'</span><span class="sb-mate-st">'+state+'</span></div>';
+  }).join('');
+  return '<div class="sb-head sb-team-head">Your team</div><div class="sb-team">'+rows+'</div>';
+}
+// Nav option B (Ega-approved 2026-07-06): the rail is THE navigator. Two
+// destination rows above the roster, you-are-here = --bg-2 fill (DESIGN §4.1),
+// derived from the same state the URL spine projects. The top-right
+// Spend & Audit button and the room's "← Projects" back-link died for this —
+// one way to move around, not three.
+function navSectionHtml(){
+  var onSpend=_spendVisible();
+  var onHome=!_room && !_detail && !onSpend;
+  function row(here, click, label){
+    return '<div class="sb-nav-row'+(here?' here':'')+'" role="button" tabindex="0"'+(here?' aria-current="page"':'')
+      +' onclick="'+click+'" onkeydown="if(event.key===\\'Enter\\')'+click+'">'+label+'</div>';
+  }
+  return '<nav class="sb-nav" aria-label="Navigate">'
+    +row(onHome,'goHome()','Today')
+    +row(onSpend,'showSpend()','Spend &amp; Audit')
+    +'</nav>';
+}
+function goHome(){
+  // Widened gate (ship-review catch): the not-found screen nulls _detail but
+  // keeps the detail container visible — gating on _detail alone left "No task
+  // with this id here." stuck under a home URL. Same gate as the Esc handler.
+  if(_detail||document.body.classList.contains('detail-open')) hideD();
+  if(_spendVisible()){ document.getElementById('spend-view').style.display='none'; document.getElementById('task-list-view').style.display=''; }
+  if(_room) closeRoom(); else render();
+  // Home owns a CLEAN URL — hideD/closeRoom clear their own prefixes, but
+  // leaving Spend left '#/spend' under a home screen: a reload dragged the
+  // user back to Spend (loop-7 verifier catch, reproduced with a reload).
+  try{ if((location.hash||'').indexOf('#/')===0) history.replaceState(null,'',location.pathname+location.search); }catch(e){}
+  renderSidebar();
+}
+function renderSidebar(){
+  var el=document.getElementById('sidebar'); if(!el) return;
+  var ps=(_cached.projects||[]);
+  var html=navSectionHtml()+teamSectionHtml()+'<div class="sb-head">Projects<button class="sb-add" title="Clone a GitHub repo and open it as a project" aria-label="Add a project from GitHub" onclick="openClone()">+</button></div>';
+  if(!ps.length){
+    html+='<div class="sb-empty">no projects yet \\u00b7 describe a task below to start</div>';
+  } else {
+    ps.forEach(function(p){
+      var cwd=(p&&p.localPaths&&p.localPaths[0])||(p&&p.cwd)||'';
+      var slug=(p&&p.slug)||'';
+      var active=!!(_room && projPaths(p).indexOf(normC(_room))>=0);
+      // Explicit toggle wins; an active project DEFAULTS to expanded but can still
+      // be collapsed (the bug: 'active || toggled' forced the open one stuck open).
+      var expanded=(slug in _sbExpanded)?_sbExpanded[slug]:active;
+      var enc=encodeURIComponent(cwd);
+      var tasks = active
+        ? ((_roomThread && _roomThread.cwd===_room && _roomThread.tasks)?_roomThread.tasks:[])
+        : (expanded ? _sbThreads[slug] : []); // undefined => "loading"
+      html+='<div class="sb-proj'+(expanded?' expanded':'')+(active?' active':'')+'" data-slug="'+_sbEsc(slug)+'">'
+        +'<div class="sb-proj-head'+(active?' active':'')+'" role="button" tabindex="0" aria-expanded="'+(expanded?'true':'false')+'" onclick="clickSbProject(\\''+enc+'\\',\\''+_sbEsc(slug)+'\\',event)" onkeydown="if(event.key===\\'Enter\\'){clickSbProject(\\''+enc+'\\',\\''+_sbEsc(slug)+'\\',event)}">'
+          +'<span class="sb-car" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 6l6 6-6 6"/></svg></span>'
+          +'<span class="sb-pname" data-user-content>'+_sbEsc(projName(p))+'</span>'
+          +'<span class="ct">'+(p.taskCount||0)+'</span>'
+        +'</div>'
+        +'<div class="sb-leaves">'+(expanded?sbLeavesHtml(tasks, cwd, slug, _sbQuery[slug]):'')+'</div>'
+      +'</div>';
+    });
+  }
+  morphInto(el, html);
+}
+// Caret: toggle a project's tasks open/closed (CSS animates). First open lazily
+// fetches that project's tasks (the active one already has _roomThread).
+function toggleSbProject(slug, e){
+  if(e){ e.stopPropagation(); }
+  // Read the CURRENT rendered state (covers the active-defaults-expanded case) and
+  // flip it explicitly, so even the open project collapses.
+  var node=document.querySelector('.sb-proj[data-slug="'+slug+'"]');
+  var cur=node?node.classList.contains('expanded'):false;
+  _sbExpanded[slug]=!cur;
+  renderSidebar();
+  if(_sbExpanded[slug] && _sbThreads[slug]===undefined){
+    fetch('/api/projects/'+encodeURIComponent(slug)).then(function(x){return x.json();}).then(function(j){
+      _sbThreads[slug]=(j&&j.thread&&j.thread.tasks)||[]; renderSidebar();
+    }).catch(function(){ _sbThreads[slug]=[]; renderSidebar(); });
+  }
+}
+// Name: open the project in the main pane (and expand it).
+function openSbProject(cwd, slug){ if(slug) _sbExpanded[slug]=true; openRoom(cwd); }
+// Click anywhere on the project row → toggle its tree open/closed AND open it in
+// the main pane. Users reach for the whole name, not just the caret; one click
+// does both (the caret is now only the indicator).
+function clickSbProject(enc, slug, e){ toggleSbProject(slug, e); openRoom(enc); }
+// Leaf: open the project, then its run in the main pane (findS sees _sbThreads).
+function openLeaf(cwd, sid){ openRoom(cwd); showD(sid); }
+`;
+//# sourceMappingURL=app-script-sidebar.js.map

package/dist/infrastructure/protocols/ui/app-script-tour.js

@@ -0,0 +1,78 @@
+/**
+ * The replayable tour and its first-run helpers — the agent lineup detected on this machine,
+ * the example-prompt fill, and the tooltip walkthrough with its positioning.
+ *
+ * Split out of app-script.ts (strangler fig, split 13). Verbatim slice, interpolated back where
+ * it was cut so it keeps sharing the surrounding IIFE scope: the welcome card calls startTour,
+ * the palette offers "Go -> Take the tour", and the tooltip markup calls tourStep/endTour
+ * through inline handlers. Verified by hashing the composed APP_SCRIPT before and after: same
+ * bytes.
+ *
+ * The tour is deliberately never forced — it replaced a splash that was, and it stays
+ * reachable from the palette instead of ambushing a first run.
+ */
+export const TOUR = `// First-run orientation: fill the composer from a clicked example prompt + focus
+// it, so a new user goes one-click from "what do I type?" to an editable first task.
+function exFill(s){ var ta=document.getElementById('main-ta'); if(ta){ ta.value=s; ta.focus(); try{ ta.dispatchEvent(new Event('input',{bubbles:true})); ta.setSelectionRange(s.length,s.length); }catch(e){} } }
+
+// First-run onboarding: the coding agents detected on THIS machine, with REAL
+// readiness (agentS over _cached.readiness). codehere's whole point is the
+// cross-vendor lineup, so onboarding leads with it + nudges toward 2+ vendors.
+function obAgentsHtml(){
+  var ags=(_cached.readiness&&_cached.readiness.agents)||[];
+  var byId={}; ags.forEach(function(a){ if(a&&(a.id||a.agent)) byId[a.id||a.agent]=a; });
+  var KNOWN=['claude-code','codex','aider','gemini','opencode']; var readyN=0; var chips='';
+  KNOWN.forEach(function(id){
+    var a=byId[id]; var st=a?agentS(a.state):null;
+    if(st==='ready') readyN++;
+    var word=st==='ready'?'ready':(st==='setup'?'setup':(st==='busy'?'busy':'not detected'));
+    var cls=st==='ready'?'ready':(st==='setup'?'setup':(st==='busy'?'busy':'off'));
+    chips+='<div class="ob-agent"><span class="ab stk '+agentKey(id)+'">'+(String(agentInitials(id)).charAt(0)||'?')+'</span><span class="ob-an">'+agentLabel(id)+'</span><span class="ob-ast"><span class="ob-dot '+cls+'"></span>'+word+'</span></div>';
+  });
+  var nudge = readyN>=2
+    ? '<div class="ob-hint">'+readyN+' agents ready. Run a task with one, then have a different vendor check it. That\\u2019s the cross-vendor proof.</div>'
+    : '<div class="ob-hint">'+readyN+' ready \\u00b7 install another CLI (codex, aider, gemini\\u2026) so codehere can prove one agent\\u2019s work with a different vendor.</div>';
+  return '<div class="ob-agents">'+chips+'</div>'+nudge;
+}
+
+// Interactive onboarding walkthrough — subtle spotlight coachmarks over the REAL
+// UI (sidebar -> composer -> agent picker -> send), so a new user learns the
+// actual controls by seeing them. Non-blocking (clicks pass through; you can act
+// as you go), Next/Skip, shown once (localStorage), replayable from the welcome.
+var TOUR=[
+  {sel:'#sidebar', title:'Your projects', body:'Every repo you work in lives here. Open one to see its runs.', pos:'right'},
+  {sel:'.sb-add', title:'1. Add a project', body:'New here? Point codehere at a GitHub repo (or a local folder) with +. This is the one way a project gets in.', pos:'right'},
+  {sel:'#main-ta', title:'2. Describe a task', body:'The other way in: with a project open, type what you want done. That puts an agent to work. No + needed.', pos:'top'},
+  {sel:'#agentpick-btn', title:'Pick who runs it', body:'Claude Code, Codex, Aider, Gemini, OpenCode. Or let Auto pick.', pos:'top'},
+  {sel:'#main-btn', title:'Send, and it\\u2019s on the record', body:'An agent picks it up. codehere records what it did, checks it against the real result, and shows the cost.', pos:'top'}
+];
+var _tourChecked=false;
+function startTour(){ var t=document.getElementById('ob-tour'); if(!t) return; t.hidden=false; tourStep(0); }
+function endTour(markDone){ var t=document.getElementById('ob-tour'); if(t) t.hidden=true; if(markDone){ try{ localStorage.setItem('ch_tour_done','1'); }catch(e){} } }
+function tourStep(i){
+  var step=TOUR[i]; if(!step){ endTour(true); return; }
+  var target=document.querySelector(step.sel);
+  if(!target){ tourStep(i+1); return; } // skip a target that isn't on this view
+  if(target.scrollIntoView){ try{ target.scrollIntoView({block:'nearest'}); }catch(e){} }
+  var r=target.getBoundingClientRect(); var pad=6;
+  var spot=document.getElementById('ob-spot');
+  spot.style.left=(r.left-pad)+'px'; spot.style.top=(r.top-pad)+'px';
+  spot.style.width=(r.width+pad*2)+'px'; spot.style.height=(r.height+pad*2)+'px';
+  var pop=document.getElementById('ob-pop');
+  var dots=''; for(var k=0;k<TOUR.length;k++) dots+='<span class="ob-pdot'+(k===i?' on':'')+'"></span>';
+  var last=(i+1>=TOUR.length);
+  pop.innerHTML='<div class="ob-pt">'+step.title+'</div><div class="ob-pb">'+step.body+'</div>'
+    +'<div class="ob-pf"><span class="ob-pdots">'+dots+'</span><span class="ob-pbtns">'
+    +'<button class="ob-skip" onclick="endTour(true)">'+(last?'':'Skip')+'</button>'
+    +'<button class="ob-next" onclick="'+(last?'endTour(true)':'tourStep('+(i+1)+')')+'">'+(last?'Got it':'Next')+'</button>'
+    +'</span></div>';
+  pop.style.visibility='hidden'; pop.style.left='0px'; pop.style.top='0px';
+  var pr=pop.getBoundingClientRect(); var left, top;
+  if(step.pos==='right'){ left=r.right+14; top=Math.max(12,r.top); }
+  else if(step.pos==='top'){ left=r.left+r.width/2-pr.width/2; top=r.top-pr.height-14; }
+  else { left=r.left; top=r.bottom+14; }
+  left=Math.max(12, Math.min(left, window.innerWidth-pr.width-12));
+  top=Math.max(12, Math.min(top, window.innerHeight-pr.height-12));
+  pop.style.left=left+'px'; pop.style.top=top+'px'; pop.style.visibility='visible';
+}`;
+//# sourceMappingURL=app-script-tour.js.map