wisp-agents 0.20.0 → 0.22.0

package/web/js/features/settings.js

@@ -20,6 +20,8 @@ import { openPhone, phoneSummary } from './phone.js';
 import { machinesSummary } from './places.js';
 import { AUTO_GOALS, harnessLogo } from './runners.js';
 import { INSTALLABLE, installHarness, isInstalling } from './setup.js';
+import { clearPicks } from './transcript.js';
+import { repaintViews } from './turns.js';
 import { openUsage } from './usage.js';
 
 // A sidebar of sections and one pane at a time, like every other app's settings. Big lists
@@ -80,6 +82,9 @@ export function openSettings(opts) {
             ${row('Worktree per task', 'Each task gets its own branch from origin/main, in git repos', '<button class="switch" id="wtDefault" role="switch"></button>')}
             ${row('Auto-fix PR conflicts', 'Without waiting for a click on Fix conflicts: when a shipped PR conflicts with its base, the task merges the base in, resolves it and pushes', '<button class="switch" id="fixConflicts" role="switch"></button>')}
           </div>
+          <div class="sx-group">
+            ${row('Full transcript', 'Every message and step the agent took, with its presentation at the end. Any one card switches with its Transcript button or <kbd>V</kbd>', '<button class="switch" id="txDefault" role="switch"></button>')}
+          </div>
         </section>
         <section class="sx-pane" data-pane="notifications">
           <div class="sx-group">
@@ -116,7 +121,7 @@ export function openSettings(opts) {
           <div class="sx-group">
             ${row('Machines', '<span class="machines-hint"></span>', '<button class="ghost sm" id="openMachines">Manage</button>')}
           </div>
-          <p class="hint">Also in the top bar, and in Projects: add folders on a machine, then launch there like anywhere else.</p>
+          <p class="hint">Also in the top bar. Every project runs on every machine: pick one under Run on and wisp clones the project there the first time. A follow-up or a rerun can move a task to another one.</p>
         </section>
         <section class="sx-pane" data-pane="memory">
           <div class="sx-group">
@@ -308,6 +313,9 @@ export function openSettings(opts) {
     });
     if (!saved) return;
     paintWt();
+    renderLauncher();
+  };
+  paintWt();
   const fc = $('#fixConflicts', node);
   const paintFc = () => fc.setAttribute('aria-checked', S.config.defaults.fixConflicts === 'on');
   fc.onclick = async () => {
@@ -321,9 +329,22 @@ export function openSettings(opts) {
     }
   };
   paintFc();
-    renderLauncher();
+  // The transcript switch flips every open card at once; a refused save flips them back.
+  const tx = $('#txDefault', node);
+  const paintTx = () => tx.setAttribute('aria-checked', S.config.defaults.transcript === 'on');
+  const setTx = (v) => {
+    S.config.defaults.transcript = v;
+    clearPicks();
+    paintTx();
+    repaintViews();
   };
-  paintWt();
+  tx.onclick = async () => {
+    const was = S.config.defaults.transcript || 'off';
+    setTx(was === 'on' ? 'off' : 'on');
+    const saved = await tryApi(() => api('/config', { method: 'PATCH', body: { defaults: { transcript: S.config.defaults.transcript } } }));
+    if (!saved) setTx(was);
+  };
+  paintTx();
   // Auto: goal, exploring and allowed harnesses here; the full record in its own view.
   const paintAuto = async () => {
     const r = await api('/router').catch(() => null);

package/web/js/features/ship.js

@@ -31,16 +31,25 @@ const STEP_LABEL = { commit: 'Commit', push: 'Push', pr: 'Open PR' };
 const STEP_DOING = { commit: 'Committing', push: 'Pushing', pr: 'Opening the PR' };
 const shipping = (s) => !!(s?.shipping || (ships.has(s?.id) && !ships.get(s.id).error));
 
+// A task in several repos (also) has a PR per repo: its own first, then the others', each { repo, pr }.
+export const prsOf = (s) => [...(s?.pr ? [{ repo: s.project, pr: s.pr }] : []), ...(s?.also || []).filter((a) => a.pr).map((a) => ({ repo: a.project, pr: a.pr }))];
+export const prOf = (s) => prsOf(s)[0]?.pr || null; // the one the card's pill shows
+const branches = (s) => [s?.branch, ...(s?.also || []).map((a) => a.branch)].filter(Boolean);
+const severalRepos = (s) => branches(s).length > 1;
+
 // Ship it only makes sense on a finished worktree task with something to ship: uncommitted
 // changes, or commits its open PR (or a new one) doesn't have yet. Unchecked yet: assume it might.
+// Several repos: the server counts the ones with something new (toShip.repos).
 export function shippable(s) {
-  if (!s?.branch || s.agent === 'wisp' || s.state === 'running' || s.state === 'waiting' || s.pr?.state === 'MERGED' || shipping(s)) return false;
+  if (!branches(s).length || s.agent === 'wisp' || s.state === 'running' || s.state === 'waiting' || shipping(s)) return false;
   const t = s.toShip;
+  if (t?.repos !== undefined) return t.repos > 0;
+  if (s.pr?.state === 'MERGED') return false;
   return !t || !!(t.dirty || (s.pr?.state === 'OPEN' ? t.unpushed : t.ahead));
 }
-export const shipLabel = (s) => (s.pr?.state === 'OPEN' ? `Push to PR #${s.pr.number}` : 'Ship it…');
+export const shipLabel = (s) => (severalRepos(s) ? (prsOf(s).some((x) => x.pr.state === 'OPEN') ? 'Push to the PRs…' : 'Ship it…') : s.pr?.state === 'OPEN' ? `Push to PR #${s.pr.number}` : 'Ship it…');
 
-export const shipPill = (s) => (s.shipping ? `<span class="pill ship-pill" title="Shipping: ${esc(STEP_DOING[s.shipping.step] || 'Starting')}…"><i></i>Shipping</span>` : '');
+export const shipPill = (s) => (s.shipping ? `<span class="pill ship-pill" title="Shipping: ${esc(STEP_DOING[s.shipping.step] || 'Starting')}${s.shipping.repo ? ` ${esc(s.shipping.repo)}` : ''}…"><i></i>Shipping</span>` : '');
 
 export const prPill = (pr, fix) => `<span class="pill pr pr-${prTone(pr, fix)}" title="PR #${pr.number}: ${esc(prLine(pr, fix))}"><i></i>#${pr.number}</span>`;
 
@@ -50,29 +59,41 @@ export function renderPrStrip(id) {
   const node = n?.body && $('.pr-strip', n.body);
   const s = S.sessions.get(id);
   if (!node || !s) return;
-  const pr = s.pr;
+  const prs = prsOf(s);
+  const pr = prs[0]?.pr;
+  const several = prs.length > 1;
   $$('[data-a="ship"]', n.body).forEach((b) => {
     b.hidden = !shippable(s);
-    $('span', b).textContent = pr?.state === 'OPEN' ? `Push to #${pr.number}` : pr ? 'Ship again' : 'Ship it';
+    $('span', b).textContent = severalRepos(s) ? (prs.some((x) => x.pr.state === 'OPEN') ? 'Push to PRs' : prs.length ? 'Ship again' : 'Ship it') : pr?.state === 'OPEN' ? `Push to #${pr.number}` : pr ? 'Ship again' : 'Ship it';
   });
   // Started here, or elsewhere (another tab, the API): the server's stage moves the track along.
   const run = ships.get(id) || (s.shipping && { steps: s.shipping.update ? ['push', 'pr'] : ['commit', 'push', 'pr'], step: 'push' });
-  if (run && STEP_LABEL[s.shipping?.step] && !run.error) run.step = s.shipping.step;
+  if (run && STEP_LABEL[s.shipping?.step] && !run.error) Object.assign(run, { step: s.shipping.step, repo: s.shipping.repo, at: s.shipping.at, of: s.shipping.of });
   if (run) return renderShipRun(node, id, run);
   const landed = node.classList.contains('ship-run') && !node.classList.contains('failed');
   node.hidden = !pr;
   if (!pr) return;
-  const tone = prTone(pr, s.conflictFix);
+  // Several repos: the first PR leads the row and the others follow as small links, each in its
+  // own tone; the row takes the worst of them, and Merge merges them all.
+  const fix = s.pr ? s.conflictFix : null; // wisp fixes conflicts on the task's own PR only
+  const TONES = ['fail', 'pending', 'pass', 'merged', 'closed'];
+  const tone = prs.map((x, i) => prTone(x.pr, i ? null : fix)).sort((a, b) => TONES.indexOf(a) - TONES.indexOf(b))[0];
+  const open = prs.filter((x) => x.pr.state === 'OPEN');
+  const conflict = open.some((x) => x.pr.conflict);
   node.className = `pr-strip pr-${tone}${landed ? ' landed' : ''}`;
   node.innerHTML = `
     <span class="pr-dot"></span>
-    <a href="${esc(pr.url)}" target="_blank" class="pr-num">PR #${pr.number}</a>
-    <span class="pr-line">${esc(prLine(pr, s.conflictFix))}</span>
+    <a href="${esc(pr.url)}" target="_blank" class="pr-num">${several ? `${esc(prs[0].repo)} #${pr.number}` : `PR #${pr.number}`}</a>
+    ${prs
+      .slice(1)
+      .map((x) => `<a href="${esc(x.pr.url)}" target="_blank" class="pr-also pr-${prTone(x.pr)}" title="${esc(`${x.repo}: PR #${x.pr.number} · ${prLine(x.pr)}`)}"><i></i>${esc(x.repo)} #${x.pr.number}</a>`)
+      .join('')}
+    <span class="pr-line">${esc(prLine(pr, fix))}</span>
     <span class="grow"></span>
-    ${pr.state === 'OPEN' && pr.conflict && !fixing(s.conflictFix) && s.state !== 'running' ? `<button class="ghost xs pr-fix" data-pr="fix" title="Send the task a follow-up to merge the base in and resolve the conflicts; wisp pushes the fix to the PR">${icon('merge')}<span>Fix conflicts</span></button>` : ''}
-    ${pr.state === 'OPEN' ? `<button class="ghost xs" data-pr="refresh" title="Check now (wisp also checks every minute)">${icon('replay')}</button>` : ''}
-    <a class="ghost xs" href="${esc(pr.url)}" target="_blank">${icon('external')}<span>GitHub</span></a>
-    ${pr.state === 'OPEN' && !pr.conflict ? `<button class="ghost xs pr-merge" data-pr="merge" title="Squash-merge, then fast-forward your local ${esc(s.branch ? 'base branch' : 'checkout')}">${icon('check')}<span>Merge</span></button>` : ''}`;
+    ${pr.state === 'OPEN' && pr.conflict && s.pr && !fixing(fix) && s.state !== 'running' ? `<button class="ghost xs pr-fix" data-pr="fix" title="Send the task a follow-up to merge the base in and resolve the conflicts; wisp pushes the fix to the PR">${icon('merge')}<span>Fix conflicts</span></button>` : ''}
+    ${open.length ? `<button class="ghost xs" data-pr="refresh" title="Check now (wisp also checks every minute)">${icon('replay')}</button>` : ''}
+    ${several ? '' : `<a class="ghost xs" href="${esc(pr.url)}" target="_blank">${icon('external')}<span>GitHub</span></a>`}
+    ${open.length && !conflict ? `<button class="ghost xs pr-merge" data-pr="merge" title="Squash-merge${open.length > 1 ? ` all ${open.length} PRs` : ''}, then fast-forward your local base branch${open.length > 1 ? 'es' : ''}">${icon('check')}<span>Merge${open.length > 1 ? ' all' : ''}</span></button>` : ''}`;
   node.onclick = (e) => {
     const a = e.target.closest('[data-pr]')?.dataset.pr;
     if (a === 'refresh') refreshPr(id, e.target.closest('[data-pr]'));
@@ -135,7 +156,8 @@ function renderShipRun(node, id, run) {
   node.className = `pr-strip ship-run${failed ? ' failed pr-fail' : ''}`;
   node.title = failed ? run.error : '';
   $$('.ship-track li', node).forEach((li, i) => (li.className = i < at ? 'done' : i === at ? (failed ? 'bad' : 'now') : ''));
-  const what = failed ? `Ship failed at ${STEP_LABEL[run.steps[at]] || 'start'}: <span class="ship-err">${esc(run.error)}</span>` : `${STEP_DOING[run.steps[at]]}<span class="dots"></span>`;
+  const repo = !failed && run.repo ? ` ${esc(run.repo)}${run.of > 1 ? ` <span class="muted">(${run.at} of ${run.of})</span>` : ''}` : '';
+  const what = failed ? `Ship failed at ${STEP_LABEL[run.steps[at]] || 'start'}: <span class="ship-err">${esc(run.error)}</span>` : `${STEP_DOING[run.steps[at]]}${repo}<span class="dots"></span>`;
   if ($('.ship-what', node).innerHTML !== what) $('.ship-what', node).innerHTML = what;
   const acts = failed ? `<button class="ghost xs" data-ship="retry">${icon('replay')}<span>Retry</span></button><button class="ghost xs" data-ship="dismiss" title="Dismiss">${icon('x')}</button>` : '';
   if ($('.ship-acts', node).innerHTML !== acts) $('.ship-acts', node).innerHTML = acts;
@@ -151,19 +173,23 @@ export async function shipDialog(id) {
   } catch (err) {
     return toastError(err);
   }
-  const open = info.pr?.state === 'OPEN';
+  // Several repos: a route line each, and the PRs open or update together.
+  const repos = info.repos || [info];
+  const open = repos.every((r) => r.pr?.state === 'OPEN');
   const typed = ships.get(id)?.values; // a failed ship's message, back for Retry
   const nothing = !info.dirty && !info.ahead;
+  const noRemote = repos.every((r) => !r.remote);
+  const route = (r) => `<p class="ship-route">${icon('branch')}${info.repos ? `<b class="ship-repo">${esc(r.repo)}</b>` : ''}<code>${esc(r.branch)}</code>${icon('arrow')}<code>${esc(r.remote || 'no remote')}/${esc(r.base)}</code>
+        <span class="muted">${r.dirty ? `${r.dirty} uncommitted change${r.dirty > 1 ? 's' : ''}` : 'Nothing uncommitted'} · ${r.ahead} commit${r.ahead === 1 ? '' : 's'} on the branch${info.repos && r.pr ? ` · PR #${r.pr.number}` : ''}</span></p>`;
   const node = el(`
     <div class="modal ship-modal">
-      <header><h2>${open ? `Push to PR #${info.pr.number}` : 'Ship it'}</h2><button class="icon-btn close">${icon('x')}</button></header>
-      <p class="ship-route">${icon('branch')}<code>${esc(info.branch)}</code>${icon('arrow')}<code>${esc(info.remote || 'no remote')}/${esc(info.base)}</code>
-        <span class="muted">${info.dirty ? `${info.dirty} uncommitted change${info.dirty > 1 ? 's' : ''}` : 'Nothing uncommitted'} · ${info.ahead} commit${info.ahead === 1 ? '' : 's'} on the branch</span></p>
+      <header><h2>${open ? (info.repos ? `Push to ${repos.length} PRs` : `Push to PR #${info.pr.number}`) : info.repos ? `Ship it to ${repos.length} repos` : 'Ship it'}</h2><button class="icon-btn close">${icon('x')}</button></header>
+      ${repos.map(route).join('')}
       ${info.dirty ? `<label class="ship-field"><span>Commit message${open ? '' : ' · PR title'}</span><input class="input" name="title" spellcheck="false" maxlength="100"></label>` : ''}
       ${open ? '' : `<label class="ship-field"><span>Pull request description</span><textarea class="textarea mono" name="body" rows="9" spellcheck="false"></textarea></label>
       <label class="check ship-check"><input type="checkbox" name="draft"> Open as a draft</label>`}
-      ${!info.remote ? '<p class="hint bad">This repo has no <code>origin</code> remote, so there is nowhere to push.</p>' : nothing ? '<p class="hint">Nothing to ship yet: the branch has no changes.</p>' : ''}
-      <div class="ship-foot"><span class="muted xs">Runs <code>git commit</code>, <code>git push</code>${open ? '' : ' and <code>gh pr create</code>'} in the worktree.</span><button class="primary sm" data-a="go" ${nothing || !info.remote ? 'disabled' : ''}>${icon('send')}${open ? 'Commit & push' : 'Commit, push & open PR'}</button></div>
+      ${noRemote ? `<p class="hint bad">${info.repos ? 'These repos have' : 'This repo has'} no <code>origin</code> remote, so there is nowhere to push.</p>` : nothing ? '<p class="hint">Nothing to ship yet: the branch has no changes.</p>' : ''}
+      <div class="ship-foot"><span class="muted xs">Runs <code>git commit</code>, <code>git push</code>${open ? '' : ' and <code>gh pr create</code>'} in ${info.repos ? 'each worktree with changes, one PR per repo' : 'the worktree'}.</span><button class="primary sm" data-a="go" ${nothing || noRemote ? 'disabled' : ''}>${icon('send')}${open ? 'Commit & push' : info.repos ? 'Commit, push & open PRs' : 'Commit, push & open PR'}</button></div>
     </div>`);
   const close = overlay(node);
   $('.close', node).onclick = close;
@@ -188,10 +214,12 @@ export async function shipDialog(id) {
       (pr) => {
         const s = S.sessions.get(id);
         // Everything just went up: no Push to #n until the server's recheck finds something new.
-        if (s) S.sessions.set(id, { ...s, pr: { ...s.pr, ...pr }, shipping: null, toShip: s.toShip && { ...s.toShip, dirty: 0, unpushed: 0 } });
+        // Several repos: their PRs come with the server's next summary.
+        if (s) S.sessions.set(id, { ...s, ...(!pr.prs && { pr: { ...s.pr, ...pr } }), shipping: null, toShip: s.toShip && { ...s.toShip, dirty: 0, unpushed: 0, ...(s.toShip.repos !== undefined && { repos: 0 }) } });
         ships.delete(id);
         renderPrStrip(id);
-        toast(`${icon('branch')} ${open ? 'Pushed to' : 'Opened'} <b>PR #${pr.number}</b>`, { action: { label: 'Open', run: () => window.open(pr.url, '_blank') }, timeout: 8000 });
+        const what = pr.prs ? pr.prs.map((x) => `<b>${esc(x.repo)} #${x.number}</b>`).join(', ') : `<b>PR #${pr.number}</b>`;
+        toast(`${icon('branch')} ${open ? 'Pushed to' : pr.prs ? 'PRs:' : 'Opened'} ${what}`, { action: { label: 'Open', run: () => window.open(pr.url, '_blank') }, timeout: 8000 });
       },
       (err) => {
         if (ships.has(id)) ships.get(id).error = err.message;
@@ -210,15 +238,24 @@ export async function shipDialog(id) {
 
 export async function mergePr(id) {
   const s = S.sessions.get(id);
-  const pr = s?.pr;
-  if (!pr || pr.state !== 'OPEN') return;
-  const c = pr.checks || {};
-  const warn = c.fail ? `\n\n⚠ ${c.fail} check${c.fail > 1 ? 's are' : ' is'} failing.` : c.pending ? `\n\n⚠ ${c.pending} check${c.pending > 1 ? 's are' : ' is'} still running.` : '';
-  if (!confirm(`Squash-merge PR #${pr.number}${pr.draft ? ' (marks it ready first)' : ''}, then fast-forward your local base branch and remove the worktree?${warn}`)) return;
-  toast(`Merging PR #${pr.number}…`);
+  const open = prsOf(s).filter((x) => x.pr.state === 'OPEN');
+  if (!open.length) return;
+  const several = open.length > 1;
+  const warn = open
+    .map(({ repo, pr }) => {
+      const c = pr.checks || {};
+      const where = several ? ` in ${repo}` : '';
+      return c.fail ? `⚠ ${c.fail} check${c.fail > 1 ? 's are' : ' is'} failing${where}.` : c.pending ? `⚠ ${c.pending} check${c.pending > 1 ? 's are' : ' is'} still running${where}.` : '';
+    })
+    .filter(Boolean)
+    .join('\n');
+  const what = several ? `these ${open.length} PRs (${open.map((x) => `${x.repo} #${x.pr.number}`).join(', ')})` : `PR #${open[0].pr.number}${open[0].pr.draft ? ' (marks it ready first)' : ''}`;
+  if (!confirm(`Squash-merge ${what}, then fast-forward your local base branch${several ? 'es' : ''} and remove the worktree${several ? 's' : ''}?${warn ? `\n\n${warn}` : ''}`)) return;
+  toast(several ? `Merging ${open.length} PRs…` : `Merging PR #${open[0].pr.number}…`);
   try {
     const r = await api(`/sessions/${id}/merge`, { method: 'POST', body: {} });
-    toast(`${icon('check')} Merged <b>PR #${r.pr.number}</b>. ${esc(r.sync.text)}`, { tone: r.sync.ok ? '' : 'bad', timeout: 10_000 });
+    const merged = r.prs ? r.prs.filter((x) => x.state === 'MERGED').map((x) => `${esc(x.repo)} #${x.number}`).join(', ') : `PR #${r.pr.number}`;
+    toast(`${icon('check')} Merged <b>${merged}</b>. ${esc(r.sync.text)}`, { tone: r.sync.ok ? '' : 'bad', timeout: 10_000 });
   } catch (err) {
     toastError(err, { timeout: 12_000 });
   }

package/web/js/features/slash.js

@@ -0,0 +1,63 @@
+// The / menu in a follow-up box: type "/" to see the commands, pick one with ↑↓ and Tab (or Enter,
+// or a click) and the box reads "/btw " ready for the rest. Esc closes it.
+
+import { esc } from '../md.js';
+import { el } from '../core/dom.js';
+import { SLASH, slashMatches } from '../slash-text.js';
+import { feedbackOn } from './feedback.js';
+
+// Register before the box's own Enter handler: picking a command must not send it.
+export function slashMenu(ta, host) {
+  const menu = el('<div class="slash-menu" role="listbox" aria-label="Commands" hidden></div>');
+  host.append(menu);
+  let items = [];
+  let sel = 0;
+  let closed = false; // Esc: hidden until the text changes
+  const commands = () => SLASH.filter((c) => c.name !== 'feedback' || feedbackOn());
+  const paint = () => {
+    const next = !closed && document.activeElement === ta ? slashMatches(ta.value, commands()) : [];
+    if (next.map((c) => c.name).join() !== items.map((c) => c.name).join()) sel = 0;
+    items = next;
+    menu.hidden = !items.length;
+    menu.innerHTML = items
+      .map((c, i) => `<button type="button" class="slash-item${i === sel ? ' on' : ''}" role="option" aria-selected="${i === sel}" data-i="${i}"><b>/${c.name}</b><span class="slash-args">${esc(c.args)}</span><span class="slash-hint">${esc(c.hint)}</span></button>`)
+      .join('');
+  };
+  const pick = (c) => {
+    ta.value = `/${c.name} `;
+    ta.dispatchEvent(new Event('input'));
+    ta.focus();
+    ta.setSelectionRange(ta.value.length, ta.value.length);
+  };
+  ta.addEventListener('input', () => {
+    closed = false;
+    paint();
+  });
+  ta.addEventListener('focus', paint);
+  ta.addEventListener('blur', paint);
+  menu.addEventListener('mousedown', (e) => e.preventDefault()); // keep the focus in the box
+  menu.addEventListener('click', (e) => {
+    const b = e.target.closest('[data-i]');
+    if (b) pick(items[b.dataset.i]);
+  });
+  ta.addEventListener('keydown', (e) => {
+    if (menu.hidden || e.isComposing) return;
+    const c = items[sel];
+    // Enter on a command typed out in full that works on its own (/feedback opens the dialog) sends it.
+    const complete = (e.key === 'Tab' && !e.shiftKey) || (e.key === 'Enter' && !e.shiftKey && !(c.bare && ta.value.slice(1).toLowerCase() === c.name));
+    if (e.key === 'ArrowDown' || e.key === 'ArrowUp') {
+      e.preventDefault();
+      sel = (sel + (e.key === 'ArrowDown' ? 1 : items.length - 1)) % items.length;
+      paint();
+    } else if (complete) {
+      e.preventDefault();
+      e.stopImmediatePropagation();
+      pick(c);
+    } else if (e.key === 'Escape') {
+      e.preventDefault();
+      e.stopPropagation();
+      closed = true;
+      paint();
+    }
+  });
+}

package/web/js/features/transcript.js

@@ -0,0 +1,290 @@
+// The full transcript: everything the agent said and did in a turn, oldest first, on a timeline that
+// ends with its presentation, rendered as blocks. Off by default (Settings → General → Full
+// transcript); any card switches with its Transcript button or V.
+
+import { countChanges, fmtDuration, renderPresentation } from '../blocks.js';
+import { esc, md } from '../md.js';
+import { $, el, icon } from '../core/dom.js';
+import { load, S, save } from '../core/state.js';
+
+export const KIND_ICON = { check: 'check', read: 'read', edit: 'pen', run: 'terminal', search: 'search', web: 'web', agent: 'agent', plan: 'plan', tool: 'tool', text: 'text', error: 'warn', ask: 'ask', answer: 'check', wait: 'ask', background: 'clock' };
+
+// --- which view a card shows ---------------------------------------------------
+
+// Cards switched away from the setting: session id → true (transcript) or false (presentation).
+const picked = new Map(Object.entries(load('wisp.transcript', {})));
+const savePicks = () => save('wisp.transcript', Object.fromEntries(picked));
+
+export const transcriptByDefault = () => S.config.defaults?.transcript === 'on';
+export const transcriptOn = (id) => picked.get(id) ?? transcriptByDefault();
+
+export function pickView(id, on) {
+  if (on === transcriptByDefault()) picked.delete(id);
+  else picked.set(id, on);
+  if (S.sessions.size) for (const k of picked.keys()) if (!S.sessions.has(k)) picked.delete(k);
+  savePicks();
+}
+
+// A new setting applies to every card, including the ones switched by hand before.
+export function clearPicks() {
+  picked.clear();
+  savePicks();
+}
+
+// --- what the transcript shows -----------------------------------------------
+
+// The agent's final answer is its presentation, shown as blocks at the end rather than as a message.
+// It's the turn's last message (or last few: some harnesses stream it in parts); wisp's own notes
+// after it (Auto's test check) don't break the run. Returns their indexes in turn.activity.
+export function finalAnswer(t) {
+  const out = new Set();
+  const raw = typeof t.raw === 'string' ? t.raw : '';
+  const acts = t.activity || [];
+  if (!raw.trim()) return out;
+  for (let i = acts.length - 1; i >= 0; i--) {
+    const a = acts[i];
+    if (a.by === 'wisp') continue;
+    const head = a.kind === 'text' ? String(a.label || '').trim().slice(0, 200) : '';
+    if (!head || !raw.includes(head)) break;
+    out.add(i);
+  }
+  return out;
+}
+
+// A message as it reads mid-run: the presentation it ends with is on its way, not prose to show.
+export const messageText = (text) => {
+  const s = String(text || '');
+  const open = s.search(/```wisp/);
+  return (open < 0 ? s : s.slice(0, open)).trim();
+};
+
+// Steps between two messages, in runs. A run longer than FOLD_AT shows KEEP at each end and folds the
+// middle behind one row.
+const FOLD_AT = 12;
+const KEEP = 4;
+export function layout(items) {
+  const out = [];
+  let run = [];
+  const flush = () => {
+    if (run.length > FOLD_AT) out.push(...run.slice(0, KEEP), { fold: run.slice(KEEP, -KEEP) }, ...run.slice(-KEEP));
+    else out.push(...run);
+    run = [];
+  };
+  for (const it of items) {
+    if (it.kind === 'text') {
+      flush();
+      out.push(it);
+    } else run.push(it);
+  }
+  flush();
+  return out;
+}
+
+const OPENS = new Set(['run', 'search', 'web', 'tool', 'agent']);
+const findChange = (t, file) => t?.changes?.find((c) => c.file === file);
+// Edits a step made: its own slice of the file's edits when the server linked them, else the file's.
+const editsOf = (a, t) => {
+  const c = findChange(t, a.file);
+  if (!c) return null;
+  return Array.isArray(a.edits) ? c.edits.slice(a.edits[0], a.edits[1]) : c.edits;
+};
+
+// Whether a step opens up to more: a command and what it printed, an edit's diff, an error in full.
+// Mid-run an edit's diff isn't loaded yet, so it opens anyway and fetches it.
+function opens(a, t, live) {
+  if (a.kind === 'error') return true;
+  if (a.kind === 'edit') return !!a.file && (live || !!findChange(t, a.file));
+  return OPENS.has(a.kind) && !!(a.output || a.detail);
+}
+
+// How far into the turn a step came, shown on hover.
+const since = (a, t) => (a.t && t.startedAt ? `<time class="tx-t" title="Since the turn started">${fmtDuration(Math.max(0, a.t - t.startedAt))}</time>` : '');
+
+function stepHtml(a, k, t, live) {
+  const more = opens(a, t, live);
+  // The command itself, unless the label already is it ("Running ls; …" when there was no description).
+  const flat = a.kind === 'run' && a.detail ? a.detail.replace(/\s+/g, ' ').trim() : '';
+  const cmd = flat && !String(a.label || '').replace(/\s+/g, ' ').includes(flat.slice(0, 24)) ? flat : '';
+  const edits = a.kind === 'edit' && editsOf(a, t);
+  const n = edits ? countChanges(edits) : null;
+  return `<li class="tx-step k-${esc(a.kind)}${a.by === 'wisp' ? ' by-wisp' : ''}" data-k="${k}">
+    <div class="tx-row" ${more ? 'role="button" tabindex="0" aria-expanded="false"' : ''}>
+      <span class="tx-ic">${icon(a.by === 'wisp' ? 'spark' : KIND_ICON[a.kind] || 'tool')}</span>
+      <span class="tx-label">${esc(a.label || '')}</span>
+      ${cmd ? `<code class="tx-cmd">${esc(cmd)}</code>` : ''}
+      ${n ? `<span class="nums"><span class="plus">+${n.add}</span><span class="minus">−${n.del}</span></span>` : ''}
+      ${since(a, t)}
+      ${a.file && (a.kind === 'read' || a.kind === 'edit') ? `<button class="tx-open" title="Open in editor" aria-label="Open in editor">${icon('external')}</button>` : ''}
+      ${more ? icon('chevron', 'chev') : ''}
+    </div>
+  </li>`;
+}
+
+function msgHtml(a, k, t) {
+  const text = messageText(a.label);
+  return text ? `<li class="tx-msg" data-k="${k}"><span class="tx-dot"></span><div class="prose">${md(text)}</div>${since(a, t)}</li>` : '';
+}
+
+const foldHtml = (n, k) => `<li class="tx-fold" data-k="${k}"><button class="tx-row"><span class="tx-ic">${icon('dots')}</span><span class="tx-label">${n} more step${n === 1 ? '' : 's'}</span></button></li>`;
+
+// The steps rendered into a list, by data-k: the row's item, or a fold's hidden items.
+const registry = new WeakMap();
+
+function listHtml(list, items, t, live, { fold = true } = {}) {
+  const reg = registry.get(list);
+  return (fold ? layout(items) : items)
+    .map((it) => {
+      const k = reg.push(it) - 1;
+      if (it.fold) return foldHtml(it.fold.length, k);
+      return it.kind === 'text' ? msgHtml(it, k, t) : stepHtml(it, k, t, live);
+    })
+    .join('');
+}
+
+// --- rendering ---------------------------------------------------------------
+
+// Where the timeline ends. How long it took is on the hero right under it.
+const endLabel = (t) => {
+  if (t.status === 'error') return ['Ended with an error', 'warn'];
+  if (t.status === 'stopped') return [t.presentation?.blocks?.[0]?.title === 'Interrupted' ? 'Interrupted' : 'Stopped', 'stop'];
+  return ['Finished', 'done'];
+};
+
+// A finished turn: the timeline, then the presentation. ctx is the block context (turns.js ctxFor).
+export function renderTranscript(s, t, ctx) {
+  const skip = finalAnswer(t);
+  const items = (t.activity || []).filter((_, i) => !skip.has(i));
+  const notes = t.presentation?.notes;
+  if (notes) items.push({ kind: 'text', label: notes, t: t.endedAt });
+  const msgs = items.filter((a) => a.kind === 'text').length;
+  const steps = items.length - msgs;
+  const [end, endIcon] = endLabel(t);
+  const node = el(`
+    <div class="tx">
+      <div class="tx-head">
+        <span class="tx-title">${icon('transcript')}Transcript</span>
+        <span class="tx-count">${[msgs && `${msgs} message${msgs === 1 ? '' : 's'}`, steps && `${steps} step${steps === 1 ? '' : 's'}`].filter(Boolean).join(' · ') || 'Nothing recorded'}</span>
+        ${t.trimmed ? `<span class="tx-count" title="A turn keeps its latest steps">· ${t.trimmed} earlier not kept</span>` : ''}
+        <span class="grow"></span>
+        ${items.length > 10 ? `<button class="link xs tx-jump">Jump to the result${icon('arrow')}</button>` : ''}
+      </div>
+      <ol class="tx-list"></ol>
+    </div>`);
+  const list = $('.tx-list', node);
+  registry.set(list, []);
+  list.innerHTML = listHtml(list, items, t, false) + `<li class="tx-end st-${esc(t.status)}"><span class="tx-ic">${icon(endIcon)}</span><span class="tx-label">${esc(end)}</span></li>`;
+  node.append(renderPresentation(t.presentation, ctx));
+  wire(node, s, t, ctx);
+  return node;
+}
+
+// A running turn: the timeline so far, which onActivity grows (appendStep). The working panel with
+// its Stop button and any question sits under it (turns.js).
+export function renderLiveTranscript(s, t, ctx) {
+  const node = el(`<div class="tx live"><ol class="tx-list"></ol></div>`);
+  const list = $('.tx-list', node);
+  registry.set(list, []);
+  list.innerHTML = listHtml(list, t.activity || [], t, true);
+  wire(node, s, t, ctx);
+  return node;
+}
+
+// A new step. In a running turn it goes at the end, and the working panel under the timeline holds
+// still on screen while the timeline grows above it, so watching a run reads like a chat; scrolled
+// away, nothing moves. A finished turn still gets wisp's own steps after the agent's answer (Auto
+// checking the tests): they go above the end marker, and what you're reading below doesn't move.
+export function appendStep(turnNode, item, t, scrollBy) {
+  const list = $('.tx-list', turnNode);
+  const reg = list && registry.get(list);
+  if (!reg) return;
+  const live = !!list.closest('.live');
+  const html = item.kind === 'text' ? msgHtml(item, reg.length, t) : stepHtml(item, reg.length, t, live);
+  if (!html) return;
+  reg.push(item);
+  const end = $(':scope > .tx-end', list);
+  const anchor = live ? $('.w-panel', turnNode) : end;
+  const r = anchor?.getBoundingClientRect();
+  const held = !r ? null : live ? (r.bottom > 0 && r.top < innerHeight ? r.top : null) : r.bottom <= 0 ? r.top : null;
+  const li = el(html);
+  li.classList.add('new');
+  list.insertBefore(li, end);
+  if (held !== null) scrollBy(anchor.getBoundingClientRect().top - held);
+}
+
+// A step that changed after it was shown (its output came in).
+export const sameStep = (a, b) => (a.call || b.call ? a.call === b.call : a.t === b.t && a.kind === b.kind && a.label === b.label);
+export function updateStep(turnNode, item, t) {
+  for (const list of turnNode.querySelectorAll('.tx-list')) {
+    const reg = registry.get(list) || [];
+    const k = reg.findLastIndex((x) => !x.fold && sameStep(x, item));
+    if (k < 0) continue;
+    Object.assign(reg[k], item);
+    const li = $(`.tx-step[data-k="${k}"]`, list);
+    if (!li) continue;
+    const open = li.classList.contains('open');
+    const next = el(stepHtml(reg[k], k, t, list.closest('.live') !== null));
+    li.replaceWith(next);
+    if (open) toggleStep(next, reg[k], t, null);
+  }
+}
+
+// What a step opens to.
+function moreEl(a, t, ctx) {
+  if (a.kind === 'edit') {
+    const edits = editsOf(a, t);
+    if (!edits) return el(`<div class="tx-more"><p class="tx-none">No captured edits for this file.</p></div>`);
+    const blocks = edits.map((e) => ({ type: 'diff', file: a.file, before: e.before, after: e.after, bare: true }));
+    const box = el(`<div class="tx-more tx-diff"></div>`);
+    box.append(renderPresentation({ blocks }, { ...ctx, turn: t }));
+    return box;
+  }
+  if (a.kind === 'error') return el(`<div class="tx-more"><pre class="tx-out err">${esc(a.label)}</pre></div>`);
+  const cmd = a.detail ? `<span class="tx-cmdline">${a.kind === 'run' ? '<b>$</b> ' : ''}${esc(a.detail)}</span>` : '';
+  const out = a.output ? `<span class="tx-res">${esc(a.output)}</span>` : '';
+  return el(`<div class="tx-more"><pre class="tx-out">${cmd}${out}</pre></div>`);
+}
+
+async function toggleStep(li, a, t, ctx) {
+  const row = $('.tx-row', li);
+  const open = !li.classList.contains('open');
+  li.classList.toggle('open', open);
+  row.setAttribute('aria-expanded', open);
+  $('.tx-more', li)?.remove();
+  if (!open) return;
+  // Mid-run, the card's copy of the turn predates this edit: load it first.
+  if (a.kind === 'edit' && !findChange(t, a.file) && ctx?.refresh) {
+    li.classList.add('loading');
+    t = (await ctx.refresh())?.turns?.find((x) => x.id === t.id) || t;
+    a.edits ??= t.activity?.findLast((x) => sameStep(x, a))?.edits; // linked to its edit after it was shown
+    li.classList.remove('loading');
+    if (!li.classList.contains('open')) return;
+  }
+  li.append(moreEl(a, t, ctx || {}));
+}
+
+function wire(node, s, t, ctx) {
+  // The latest copy of the turn: a refetch replaces it while this node stays.
+  const turn = () => S.full.get(s.id)?.turns?.find((x) => x.id === t.id) || t;
+  const itemOf = (li) => registry.get(li.closest('.tx-list'))?.[li.dataset.k];
+  const act = (e) => {
+    if (e.target.closest('.tx-jump')) return $('.tx-end', node)?.scrollIntoView({ block: 'start', behavior: 'smooth' });
+    const li = e.target.closest('.tx-step, .tx-fold');
+    const a = li && itemOf(li);
+    if (!a) return;
+    if (e.target.closest('.tx-open')) return ctx.openFile(a.file);
+    if (a.fold) {
+      const list = li.closest('.tx-list');
+      li.outerHTML = listHtml(list, a.fold, turn(), node.classList.contains('live'), { fold: false });
+      return;
+    }
+    if (e.target.closest('.tx-row[role="button"]') && !e.target.closest('.tx-more')) toggleStep(li, a, turn(), ctx);
+  };
+  node.addEventListener('click', act);
+  node.addEventListener('keydown', (e) => {
+    if ((e.key === 'Enter' || e.key === ' ') && e.target.matches('.tx-row[role="button"]')) {
+      e.preventDefault();
+      e.stopPropagation(); // Enter on the page would fold the whole card (keys.js)
+      act(e);
+    }
+  });
+}