wisp-agents 0.21.0 → 0.22.0

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);
+    }
+  });
+}

package/web/js/features/turns.js

@@ -10,16 +10,16 @@ import { S } from '../core/state.js';
 import { overlay } from '../ui/overlay.js';
 import { toastError } from '../ui/toast.js';
 import { execAction, moreMenu, openInEditor, revertFile, rollbackTurn, takeOver, toggleDone } from './actions.js';
+import { btwTip, paintBtw } from './btw.js';
 import { draftInto, renderDock, sendReply, startOptimistic, updateDock } from './composer.js';
-import { scheduleRefetch } from './feed.js';
+import { expand, fetchFull, renderFeed, scheduleRefetch, setFocus } from './feed.js';
 import { feedbackOn, rateTurn, whyForm } from './feedback.js';
 import { projectById } from './places.js';
 import { agentName, DEFAULT_MODE, effortLabel, modelBadge, MODES } from './runners.js';
-import { scrollByPx, watching } from './scroll.js';
+import { scrollByPx, topInset, watching } from './scroll.js';
 import { renderPrStrip, shipDialog } from './ship.js';
 import { copiesOf, memberLabel, renderSubs, subKey, teamLiveHtml, teamSize } from './team.js';
-
-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' };
+import { appendStep, KIND_ICON, pickView, renderLiveTranscript, renderTranscript, sameStep, transcriptOn, updateStep } from './transcript.js';
 
 export function ctxFor(s, turn, isLatest) {
   return {
@@ -34,6 +34,7 @@ export function ctxFor(s, turn, isLatest) {
     revertFile: (file, restore) => revertFile(s.id, turn.id, file, restore),
     exec: (command, key) => execAction(s.id, turn.id, command, key),
     approve: (allow) => approveBlocked(s, turn, allow),
+    refresh: () => fetchFull(s.id).then(() => S.full.get(s.id)),
   };
 }
 
@@ -67,6 +68,7 @@ export function renderBody(id, { fresh }) {
         <div class="it-bar">
           <div class="it-meta"></div>
           <div class="it-actions">
+            <button class="ghost xs tx-toggle" data-a="transcript" aria-pressed="false">${icon('transcript')}<span>Transcript</span></button>
             <button class="ghost xs" data-a="replay" title="Replay presentation (R)">${icon('replay')}</button>
             <button class="ghost xs" data-a="takeover" title="Take over in your terminal (T)">${icon('terminal')}</button>
             <button class="ghost xs" data-a="ship" title="Commit, push and open a pull request (S)" hidden>${icon('send')}<span>Ship it</span></button>
@@ -83,11 +85,13 @@ export function renderBody(id, { fresh }) {
     n.body = body;
     $('.it-bar', body).addEventListener('click', (e) => {
       const a = e.target.closest('[data-a]')?.dataset.a;
+      if (a === 'transcript') toggleTranscript(id);
       if (a === 'replay') replay(id);
       if (a === 'takeover') takeOver(id);
       if (a === 'ship') shipDialog(id);
       if (a === 'done') toggleDone(id);
       if (a === 'more') moreMenu(id, e.target.closest('button'));
+      if (a === 'moved') openMoved(S.full.get(id)?.movedTo?.id);
     });
     $('.earlier', body).onclick = () => ((n.showAll = true), renderBody(id, { fresh: false }));
     renderDock(id);
@@ -106,6 +110,8 @@ export function renderBody(id, { fresh }) {
     ${s.worktree ? `<span class="m branch" title="Worktree: ${esc(s.worktree.path)}\nFrom ${esc(s.worktree.baseRef)}">${icon('branch')}${esc(s.worktree.branch)}</span>` : ''}
     ${(s.also || []).map((a, i) => `<span class="m also c-${summary.also?.[i]?.color || 'slate'}" title="${esc(`Also works in ${a.cwd}${a.worktree ? `\nWorktree: ${a.worktree.path}\nBranch ${a.worktree.branch}, from ${a.worktree.baseRef}` : ''}`)}"><i class="p-dot"></i>${esc(summary.also?.[i]?.project || a.cwd.split(/[\\/]/).pop())}</span>`).join('')}
     ${s.subagents?.length ? `<span class="m team-m" title="${esc(s.subagents.map((m) => `@${m.name}${copiesOf(m) > 1 ? ` ×${copiesOf(m)}` : ''}: ${memberLabel(m)}${m.use ? ` — ${m.use}` : ''}`).join('\n'))}">${icon('agent')}${teamSize(s.subagents)} subagent${teamSize(s.subagents) > 1 ? 's' : ''}</span>` : ''}
+    ${s.moved?.from ? `<span class="m" title="${esc(`This task ran on ${s.moved.from} before it moved here, with its work and history`)}">${icon('server')}From ${esc(s.moved.from)}</span>` : ''}
+    ${s.movedTo?.id ? `<button class="m moved-to" data-a="moved" title="This task carries on as a new session on ${esc(s.movedTo.place)}">${icon('server')}Continues on ${esc(s.movedTo.place)}</button>` : ''}
     ${s.origin ? `<span class="m" title="${s.origin.kind === 'telegram' ? 'Started from Telegram' : `Launched by a ${esc(s.origin.kind)}`}">${icon({ trigger: 'replay', telegram: 'send' }[s.origin.kind] || 'spark')}${esc(s.origin.name)}</span>` : ''}`;
   const live = s.state === 'running' || s.state === 'waiting';
   // Ship and Done sit in the top bar and again next to the composer, so they're there on opening the
@@ -117,6 +123,11 @@ export function renderBody(id, { fresh }) {
     $('span', b).textContent = s.state === 'done' ? 'Reopen' : 'Mark done';
   });
   $('[data-a="takeover"]', body).hidden = !s.agentSessionId;
+  const tx = transcriptOn(id);
+  const txBtn = $('[data-a="transcript"]', body);
+  txBtn.classList.toggle('on', tx);
+  txBtn.setAttribute('aria-pressed', tx);
+  txBtn.title = tx ? 'Back to the presentation (V)' : 'Full transcript: every message and step (V)';
 
   // Turns: keep nodes whose content hasn't changed so animations don't replay.
   const turnsEl = $('.turns', body);
@@ -141,12 +152,12 @@ export function renderBody(id, { fresh }) {
     const isLatest = t.id === latestId;
     const folded = !isLatest && !n.unfolded.has(t.id);
     const revKey = `${t.rolledBackAt || 0}:${(t.changes || []).map((c) => (c.reverted ? 1 : 0)).join('')}`;
-    const key = `${t.status}|${isLatest}|${folded}|${revKey}|${t.approval || ''}|${t.status === 'running' ? (s.ask?.id || '') + s.queue?.length : ''}|${subKey(s, t)}`;
+    const key = `${t.status}|${isLatest}|${folded}|${revKey}|${t.approval || ''}|${t.status === 'running' ? (s.ask?.id || '') + s.queue?.length : ''}|${subKey(s, t)}|${tx}`;
     const prev = n.turnNodes.get(t.id);
     let node = prev?.node;
     if (!prev || prev.key !== key) {
       const toggle = () => (n.unfolded.has(t.id) ? n.unfolded.delete(t.id) : n.unfolded.add(t.id), renderBody(id, { fresh: false }));
-      node = folded ? renderFoldedTurn(t, toggle) : renderTurn(s, t, isLatest, isLatest ? null : toggle);
+      node = folded ? renderFoldedTurn(t, toggle) : renderTurn(s, t, isLatest, isLatest ? null : toggle, tx);
       if (prev) prev.node.replaceWith(node);
       if (!prev && !fresh && !folded) firstNew ??= node;
       if (prev && prev.status === 'running' && t.status !== 'running') firstNew ??= node;
@@ -158,10 +169,45 @@ export function renderBody(id, { fresh }) {
     if (turnsEl.children[i] !== node) turnsEl.insertBefore(node, turnsEl.children[i] || null);
   });
   for (const [tid, v] of n.turnNodes) if (!keep.has(tid)) (v.node.remove(), n.turnNodes.delete(tid));
+  paintBtw(id); // side questions update in place, so they don't re-render their turn
 
   updateDock(id);
   if (dock?.isConnected) scrollByPx(dock.getBoundingClientRect().top - dockTop);
-  if (firstNew && watched) requestAnimationFrame(() => firstNew.scrollIntoView({ behavior: 'smooth', block: 'start' }));
+  // A transcript was being read at its tail: its result lands right there, so show that, not the prompt.
+  const landing = firstNew && tx ? $('.tx-end', firstNew) || firstNew : firstNew;
+  if (landing && watched) requestAnimationFrame(() => landing.scrollIntoView({ behavior: 'smooth', block: 'start' }));
+}
+
+// The full transcript or the presentation, for one card. The turn being read keeps its place: its
+// prompt stays where it was on screen, or comes back into view if it had scrolled off the top.
+export function toggleTranscript(id) {
+  const n = S.nodes.get(id);
+  pickView(id, !transcriptOn(id));
+  if (!S.open.has(id)) return expand(id);
+  if (!n?.body?.querySelector('.turns')) return;
+  const turns = [...n.body.querySelectorAll('.turn:not(.folded)')];
+  const mid = innerHeight / 2;
+  const reading = turns.find((x) => { const r = x.getBoundingClientRect(); return r.top <= mid && r.bottom >= mid; }) || turns.at(-1);
+  const tid = reading?.dataset.turn;
+  const before = reading && $('.ask', reading)?.getBoundingClientRect().top;
+  renderBody(id, { fresh: false });
+  const ask = tid && $(`.turn[data-turn="${tid}"] .ask`, n.body);
+  if (!ask || before === undefined) return;
+  if (before < topInset()) ask.scrollIntoView({ block: 'start', behavior: 'smooth' });
+  else scrollByPx(ask.getBoundingClientRect().top - before);
+}
+
+// After the setting changes: every open card follows it.
+export function repaintViews() {
+  for (const id of S.open) if (S.full.has(id)) renderBody(id, { fresh: false });
+}
+
+// The session a moved task carries on in: shown, opened and focused (archived ones stay hidden).
+function openMoved(next) {
+  if (!next || !S.sessions.has(next)) return;
+  renderFeed();
+  expand(next);
+  setFocus(next);
 }
 
 function renderFoldedTurn(t, unfold) {
@@ -172,6 +218,7 @@ function renderFoldedTurn(t, unfold) {
         ${icon('chevron', 'chev')}
         <span class="t-prompt">${t.by === 'wisp' ? '<b class="t-by">wisp</b> ' : ''}${mentionHtml(esc(t.prompt.replace(/\s+/g, ' ')), { link: false })}</span>
         ${t.rolledBackAt ? '<span class="rev-tag">Rolled back</span>' : ''}
+        ${t.moved ? `<span class="t-moved" title="${esc(`Ran on ${t.moved}`)}">${icon('server')}${esc(t.moved)}</span>` : ''}
         ${hero?.title ? `<span class="t-result">${esc(hero.title)}</span>` : ''}
         <time>${new Date(t.startedAt).toLocaleString([], { month: 'short', day: 'numeric', hour: '2-digit', minute: '2-digit' })}</time>
       </button>
@@ -188,8 +235,9 @@ function modeSwitch(s, t) {
   return m ? `<span class="t-mode m-${m.id}" title="Switched from ${esc(MODES.find((x) => x.id === prev)?.label || prev)} to ${m.label} for this follow-up">${icon(m.icon)}${m.label}</span>` : '';
 }
 
-// `fold` is set for older turns the user unfolded, so they can tuck them away again.
-function renderTurn(s, t, isLatest, fold) {
+// `fold` is set for older turns the user unfolded, so they can tuck them away again. `tx`: the card
+// shows the full transcript.
+function renderTurn(s, t, isLatest, fold, tx) {
   const node = el(`<article class="turn ${t.rolledBackAt ? 'is-rolled-back' : ''}" data-turn="${t.id}"></article>`);
   const long = t.prompt.length > 360 || t.prompt.split('\n').length > 5;
   const cp = t.checkpoint;
@@ -203,6 +251,7 @@ function renderTurn(s, t, isLatest, fold) {
       <div class="ask-foot">
         ${modelBadge(t.agent || s.agent, t.model ?? s.model, t.effort ?? s.effort)}
         ${modeSwitch(s, t)}
+        ${t.moved ? `<span class="t-moved" title="${esc(`Ran on ${t.moved}, before the task moved`)}">${icon('server')}${esc(t.moved)}</span>` : ''}
         <time>${new Date(t.startedAt).toLocaleString([], { month: 'short', day: 'numeric', hour: '2-digit', minute: '2-digit' })}</time>
         ${cpLabel ? `<span class="cp-sha" title="Git checkpoint before this turn (${esc(cp.head)}${cp.dirty ? ' + uncommitted changes' : ''})">${icon('branch')}${esc(cpLabel)}</span>` : ''}
         ${t.rolledBackAt ? '<span class="rev-tag">Rolled back</span>' : ''}
@@ -218,20 +267,25 @@ function renderTurn(s, t, isLatest, fold) {
   node.append(ask);
 
   if (t.status === 'running') {
-    node.append(renderWorking(s, t));
+    if (tx) node.append(renderLiveTranscript(s, t, ctxFor(s, t, isLatest)));
+    node.append(renderWorking(s, t, tx));
   } else {
-    node.append(renderPresentation(t.presentation, ctxFor(s, t, isLatest)));
+    const ctx = ctxFor(s, t, isLatest);
+    node.append(tx ? renderTranscript(s, t, ctx) : renderPresentation(t.presentation, ctx));
     const subs = renderSubs(s, t);
     if (subs) node.append(subs);
-    node.append(renderTrail(s, t));
+    node.append(renderTrail(s, t, tx));
   }
+  node.append(el('<div class="btw-list"></div>')); // side questions asked during this turn (btw.js)
   return node;
 }
 
-function renderWorking(s, t) {
+// The live panel. With the transcript on, the steps are already on the timeline above it, so it
+// keeps only the status, the question, the team and Stop.
+function renderWorking(s, t, tx) {
   const waiting = !!s.ask;
   const node = el(`
-    <div class="w-panel ${waiting ? 'waiting' : ''}">
+    <div class="w-panel ${waiting ? 'waiting' : ''} ${tx ? 'tx-panel' : ''}">
       <div class="w-orb"><div class="orb live"><i></i><i></i><i></i></div></div>
       <div class="w-body">
         <div class="w-status">
@@ -241,9 +295,9 @@ function renderWorking(s, t) {
         </div>
         <div class="ask-slot"></div>
         ${teamLiveHtml(s, t)}
-        <ul class="ticker"></ul>
+        ${tx ? '' : '<ul class="ticker"></ul>'}
         <div class="w-actions">
-          <button class="link xs peek">Show all activity</button>
+          ${tx ? '' : '<button class="link xs peek">Show all activity</button>'}
           ${s.queue?.length ? `<span class="w-queued">${s.queue.length} follow-up${s.queue.length > 1 ? 's' : ''} queued</span>` : ''}
           <span class="grow"></span>
           <button class="ghost sm danger stop">${icon('stop')}Stop</button>
@@ -252,11 +306,16 @@ function renderWorking(s, t) {
       </div>
     </div>`);
   if (waiting) $('.ask-slot', node).append(renderAskCard(s));
+  // The /btw tip goes after Show all activity. The transcript's panel has none: it leads the row with Stop.
+  const tip = btwTip(s.id);
+  if (tip && tx) $('.w-actions', node).prepend(tip);
+  else if (tip) $('.peek', node).after(tip);
   const ticker = $('.ticker', node);
-  t.activity
-    .filter((a) => a.kind !== 'text')
-    .slice(-5)
-    .forEach((a) => ticker.prepend(actItem(a)));
+  if (ticker)
+    t.activity
+      .filter((a) => a.kind !== 'text')
+      .slice(-5)
+      .forEach((a) => ticker.prepend(actItem(a)));
   $('.stop', node).onclick = async (e) => {
     // Shows at once; the run winds down and the live update replaces this panel.
     const btn = e.currentTarget;
@@ -270,7 +329,7 @@ function renderWorking(s, t) {
       toastError(err);
     });
   };
-  $('.peek', node).onclick = (e) => {
+  if (!tx) $('.peek', node).onclick = (e) => {
     const log = $('.log', node);
     log.hidden = !log.hidden;
     e.target.textContent = log.hidden ? 'Show all activity' : 'Hide activity';
@@ -279,8 +338,10 @@ function renderWorking(s, t) {
   return node;
 }
 
+// A line in the ticker and the activity log. A message (kept whole for the transcript) shows its start.
 function actItem(a) {
-  return el(`<li class="act k-${a.kind}">${icon(KIND_ICON[a.kind] || 'tool')}<span>${esc(a.label || '')}</span></li>`);
+  const label = a.kind === 'text' && a.label?.length > 400 ? `${a.label.slice(0, 400)}…` : a.label || '';
+  return el(`<li class="act k-${a.kind}">${icon(KIND_ICON[a.kind] || 'tool')}<span>${esc(label)}</span></li>`);
 }
 
 function renderAskCard(s) {
@@ -326,7 +387,9 @@ function renderAskCard(s) {
   return node;
 }
 
-function renderTrail(s, t) {
+// Under a finished turn. With the transcript showing, its steps and the agent's notes are already on
+// the page, so the bar drops those two.
+function renderTrail(s, t, tx) {
   const acts = t.activity || [];
   const count = (k) => acts.filter((a) => a.kind === k).length;
   const parts = [
@@ -347,13 +410,13 @@ function renderTrail(s, t) {
   const node = el(`
     <div class="trail">
       <div class="trail-bar">
-        ${acts.length ? `<button class="tb-acts" data-tab="activity" title="Show activity">${parts.length ? parts.map(([ic, l, n]) => `<span class="tb" title="${n} ${l}">${icon(ic)}${n}</span>`).join('') : 'Activity'}</button>` : ''}
+        ${acts.length && !tx ? `<button class="tb-acts" data-tab="activity" title="Show activity">${parts.length ? parts.map(([ic, l, n]) => `<span class="tb" title="${n} ${l}">${icon(ic)}${n}</span>`).join('') : 'Activity'}</button>` : ''}
         ${t.endedAt ? `<span class="tb">${fmtDuration(t.endedAt - t.startedAt)}</span>` : ''}
         ${st.costUsd ? `<span class="tb">$${st.costUsd.toFixed(2)}</span>` : ''}
         <span class="grow"></span>
         ${t.changes?.length ? `<button class="link xs" data-tab="changes">${t.changes.length} file${t.changes.length > 1 ? 's' : ''} <span class="plus">+${totals.add}</span> <span class="minus">−${totals.del}</span></button>` : ''}
         <span class="tb-tools">
-          ${t.presentation?.notes ? `<button class="tb-btn" data-tab="notes" title="Agent notes" aria-label="Agent notes">${icon('text')}</button>` : ''}
+          ${t.presentation?.notes && !tx ? `<button class="tb-btn" data-tab="notes" title="Agent notes" aria-label="Agent notes">${icon('text')}</button>` : ''}
           ${canRollback ? (rolledBack
             ? `<button class="link xs cp-rollback rolled-back" data-a="rollback" title="Re-apply changes from this turn">${icon('rerun')}Re-apply</button>`
             : `<button class="tb-btn cp-rollback" data-a="rollback" title="Restore working tree to before this turn${t.checkpoint?.head ? ` (${t.checkpoint.head.slice(0, 7)})` : ''}" aria-label="Restore to before this turn">${icon('replay')}</button>`) : ''}
@@ -403,13 +466,21 @@ function renderTrail(s, t) {
   return node;
 }
 
-// Live activity without re-rendering the whole turn.
-export function onActivity({ sessionId, turnId, item }) {
+// Live activity without re-rendering the whole turn. `update`: a step already shown changed (its
+// output came in).
+export function onActivity({ sessionId, turnId, item, update }) {
   const s = S.full.get(sessionId);
   if (!s) return;
   const turn = s.turns.find((t) => t.id === turnId);
-  if (turn && !turn.activity.includes(item)) turn.activity.push(item);
   const node = S.nodes.get(sessionId)?.turnNodes.get(turnId)?.node;
+  if (update) {
+    const known = turn?.activity.findLast((a) => sameStep(a, item));
+    if (known) Object.assign(known, item);
+    if (node) updateStep(node, item, turn);
+    return;
+  }
+  if (turn && !turn.activity.includes(item)) turn.activity.push(item);
+  if (node && turn) appendStep(node, item, turn, scrollByPx);
   if (!node || item.kind === 'text') return;
   const ticker = $('.ticker', node);
   if (ticker) {