synabun 2.0.9 → 2.1.0

package/neural-interface/public/shared/assistant/asst-render.js

@@ -17,25 +17,60 @@
 // out. mascot() names the character on screen for the panel's director
 // (asst-mascot.js), which may hold its pose; stills are painted SVGs, never
 // rigs.
-
-import { assistantEventKey, fmtCost, fmtElapsed, isRemovableRun, isRunIdle, isTerminalRunStatus, modelShortName, providerShortLabel, routeTargetLabel, runTone, summarizeMailbox } from './asst-state.js';
+// A dispatched run's card opens a stage while its worker works
+// (asst-run-stage.js): the run's own mascot and scene, independent of the
+// Assistant's turn, so a worker that outlives the turn keeps moving. Run
+// cards are not journaled: a reload restores them from the runs the agents
+// tray lists (restoreRuns), next to the call that dispatched them.
+// The Assistant's own work on a direct route (an approved "do it here" route
+// of a task class: research, browser, quick…) uses the same scenes: its
+// racks' stages show the class's scene under the mascot, and the scene the
+// bubble's call implies (a browser tool the browser, a web search research),
+// for the turn the route runs in (noteDirectRoute, paintRackScene). A
+// conversation opened again learns its route from the journal like any other
+// event (no rack of the history moves: none is live) and lends it to the
+// resumed work once its turn runs (lendRouteScene).
+// What a turn leaves for the user to click sits under the row it belongs to:
+// the follow-ups a message offers (its ```synabun-followups block, or best
+// effort its prose: asst-followups.js) and, under an error that is a usage
+// limit, the waiting card with its countdown (asst-limit-wait.js); a limited
+// run's card shows the same waiting card. The user's next prompt answers
+// them or leaves them stale, and so does a new turn (settleOffers). A card
+// that asks and is still open is lifted to the transcript's bottom while it
+// waits (asst-ask-tail.js), so text and tool output streaming in after it
+// never bury it; once answered it goes back under its row.
+// A follow-ups card and the question cards the panel appends (appendNode with
+// an `_ask`) are presented by the mascot (asst-ask.js): the newest one still
+// open is the character on screen, its face a live rig (liveAsk,
+// activateRigs); every other card's face is a painted still.
+
+import { assistantEventKey, fmtCost, fmtElapsed, isRemovableRun, isTerminalRunStatus, modelShortName, providerShortLabel, routeTargetLabel, runTone, summarizeMailbox } from './asst-state.js';
 import { createRouteLine } from './asst-route.js';
 import { closeMenu, isMenuOpen } from './asst-menu.js';
 import { computerToolName, describeComputerAction, frameUrls, markerPercent, openFrameLightbox, parseComputerResult, swapImage } from './asst-computer.js';
 import * as mascotLib from '../synabun-mascot.js';
 import { isReducedMotion, subscribe } from '../synabun-ticker.js';
-import { KIND_SPECS, callOutcome, commandOf, editDiff, editPaths, fmtDuration, groupSubject, kindOf, maskEcho, mcpServerOf, middleEllipsis, planState, plural, prettyServer, receiptSentence, redactInput, resultDetail, sayCall, shouldFoldNarration, stationAggregate, stationKey, targetKey, toolWords, verbText } from './asst-tool-kinds.js';
+import { KIND_SPECS, callOutcome, commandOf, editDiff, editPaths, fmtDuration, groupSubject, headEllipsis, kindOf, maskEcho, mcpServerOf, middleEllipsis, planState, plural, prettyServer, receiptSentence, redactInput, resultDetail, sayCall, shouldFoldNarration, stationAggregate, stationKey, targetKey, toolWords, verbText, wrapRuns } from './asst-tool-kinds.js';
 import { injectRackStyles } from './asst-rack-styles.js';
+import { injectSceneStyles } from './asst-scene-styles.js';
+import { activityScene, compactActivity, isLivePhase, runChip, sceneOfClass, sceneSvg, stagePhase } from './asst-scenes.js';
+import { STAGE_TIMING, createWorkerStage } from './asst-run-stage.js';
 import { formatRunTokens } from './asst-usage.js';
 import { sanitizeHtmlString, sanitizeInto } from './asst-sanitize.js';
 import { automationView } from './asst-automation.js';
-
-// ── Markdown (lazy marked, same CDN build as the sidepanels) ───────────────
+import { guessFollowups, splitFollowups } from './asst-followups.js';
+import { createFollowupsCard } from './asst-followups-card.js';
+import { createAskTail } from './asst-ask-tail.js';
+import { limitFromText } from './asst-limit.js';
+import { createLimitDock } from './asst-limit-dock.js';
+import { createLimitWait } from './asst-limit-wait.js';
+
+// ── Markdown (lazy marked, the vendored build the sidepanels use too) ───────────────
 let _marked = null;
 let _markedLoading = null;
 function loadMarked() {
   if (_marked || _markedLoading) return _markedLoading;
-  _markedLoading = import('https://cdn.jsdelivr.net/npm/marked@14/lib/marked.esm.js')
+  _markedLoading = import('/vendor/marked/marked-14.1.4.esm.js')
     .then((m) => {
       _marked = m?.marked || m?.default || null;
       if (_marked?.setOptions) _marked.setOptions({ breaks: true, gfm: true });
@@ -126,10 +161,6 @@ function memoryTitle(memory) {
 
 // ── Run cards (shared with the agents dock) ────────────────────────────────
 
-function runWaitingForRoute(run) {
-  return run?.state === 'awaiting_route' || run?.turnState === 'awaiting_route' || run?.route?.status === 'pending';
-}
-
 /**
  * buildRunCard(run, { t, providerIcon, providerColor, onFocus, onStop, onRead, onEscalate, compact, result, index })
  * Returns a card element; call updateRunCard(el, run, opts) to refresh it in place.
@@ -191,20 +222,13 @@ export function updateRunCard(card, run, opts = {}) {
   const title = card.querySelector('.asst-run-title');
   const label = run.title || run.task || run.runId || '';
   if (title) { title.textContent = label; title.title = label; }
-  const waitingRoute = runWaitingForRoute(run);
   const pill = card.querySelector('.asst-pill');
   if (pill) {
-    const tone = waitingRoute ? 'action' : runTone(run);
-    pill.dataset.tone = tone;
-    (pill.querySelector('.asst-pill-label') || pill).textContent = waitingRoute ? t('assistant.run.awaitingRoute', 'waiting for your model choice')
-      : run.turnState === 'awaiting_permission' ? t('assistant.run.needsApproval', 'needs approval')
-        : run.turnState === 'needs_input' ? t('assistant.run.needsInput', 'needs input')
-          : run.queued && run.status !== 'running' ? t('assistant.run.queued', 'queued')
-            // A warm worker between turns reports what its last turn ended with, not "running".
-            : isRunIdle(run) ? (run.outcome || run.lastResult?.status
-              ? t('assistant.run.idleWith', '{outcome} · idle', { outcome: run.outcome || run.lastResult.status })
-              : t('assistant.run.idle', 'idle'))
-              : (run.status || tone);
+    // What it waits on (a route card, your answer: the stage's own words) > its approval > queued > what a warm
+    // worker's last turn ended with > its status (asst-scenes.js runChip).
+    const chip = runChip(run, t);
+    pill.dataset.tone = chip.tone;
+    (pill.querySelector('.asst-pill-label') || pill).textContent = chip.label;
   }
   const meta = card.querySelector('.asst-run-meta');
   if (meta) {
@@ -254,12 +278,15 @@ export function updateRunCard(card, run, opts = {}) {
   const readBtn = card.querySelector('[data-action="read"]');
   if (readBtn) readBtn.disabled = run.status === 'queued';
 
+  // A provider's usage limit stopped it: the waiting card, whose Retry now stands in for "Retry on" the same model.
+  const limitShown = syncRunLimit(card, run, opts, t);
+
   // Escalation offer ("Escalate to ‹label›", or "Retry on ‹label›" after a
   // temporary failure) when the server proposes one; a note without a button
   // when a stronger model would hit the same wall (access, the user's input).
   let esc8 = card.querySelector('.asst-run-escalate');
   const escalationRaw = run.escalation && typeof run.escalation === 'object' ? run.escalation : null;
-  const escalation = escalationRaw?.to ? escalationRaw : null;
+  const escalation = escalationRaw?.to && !(limitShown && escalationRaw.kind === 'retry') ? escalationRaw : null;
   const needsNote = escalationRaw && escalationRaw.kind === 'none' ? escalationRaw : null;
   const onEscalate = opts.onEscalate || card._runOpts?.onEscalate;
   if (esc8 && esc8.dataset.kind !== (needsNote ? 'note' : 'offer')) { esc8.remove(); esc8 = null; card._escalation = null; }
@@ -317,6 +344,49 @@ export function updateRunCard(card, run, opts = {}) {
   updateRunMedia(card, run, { t, lightboxT: opts.t || card._runOpts?.t });
 }
 
+/** What Retry now runs a limited run on: the server's same-model retry, else the run's own provider and model. */
+function limitRetryTarget(run) {
+  const esc = run?.escalation && typeof run.escalation === 'object' ? run.escalation : null;
+  if (esc?.kind === 'retry' && esc.to?.provider) return esc.to;
+  return { provider: run.provider || 'claude-code', model: run.model || null, effort: run.effort || null, accountId: run.accountId || null };
+}
+
+/**
+ * A run a provider's usage limit stopped (run.limit, lib/assistant-dispatch.js): the waiting card
+ * is registered with the conversation's single bottom dock; a standalone card can own its wait.
+ * Retry now runs it again on the same model. Never while running or in the compact agents tray.
+ */
+function syncRunLimit(card, run, opts, t) {
+  const limit = run.limit && typeof run.limit === 'object' ? run.limit : null;
+  const tone = runTone(run);
+  const show = !opts.compact && !!limit && tone !== 'running' && tone !== 'queued' && !run.removed;
+  let wait = card._limitWait || null;
+  if (!show) {
+    (opts.onLimitWait || card._runOpts?.onLimitWait)?.(run, null);
+    if (wait) { wait.destroy(); wait.el.remove(); card._limitWait = null; }
+    return false;
+  }
+  const shared = opts.onLimitWait || card._runOpts?.onLimitWait;
+  if (shared) { shared(run, show && !limit.retriedAt && !run.escalation?.started ? limit : null); return show; }
+  if (!wait || !wait.el.isConnected) {
+    const onEscalate = opts.onEscalate || card._runOpts?.onEscalate;
+    wait = createLimitWait({
+      t,
+      resetsAt: limit.resetsAt || null,
+      since: Date.parse(limit.detectedAt || run.completedAt || '') || Date.now(),
+      provider: providerShortLabel(run.provider || 'claude-code'),
+      onRetry: typeof onEscalate === 'function' ? () => onEscalate(card.dataset.runId, limitRetryTarget(card._usageRun || run)) : null,
+    });
+    card._limitWait = wait;
+    const meta = card.querySelector('.asst-run-meta');
+    if (meta) meta.after(wait.el); else card.appendChild(wait.el);
+  } else if (limit.resetsAt) {
+    wait.update({ resetsAt: limit.resetsAt });
+  }
+  if (limit.retriedAt || run.escalation?.started) wait.retried();
+  return true;
+}
+
 const MAX_RUN_MEDIA = 8;
 
 /**
@@ -419,7 +489,7 @@ const PREVIEW_LINES = 5;
 const THINK_PREVIEW_LINES = 10;
 const MAX_DIFF_LINES = 400; // an edit's mini diff draws this many lines; "Show full input" draws the rest
 // The empty state's suggestions (asst-panel.js ids) and the kind each one is about.
-const SUGGESTION_KINDS = { computer: 'computer', web: 'web', fix: 'edit', schedule: 'plan', remember: 'memory' };
+const SUGGESTION_KINDS = { computer: 'computer', web: 'web', fix: 'edit', skill: 'skill', schedule: 'plan', remember: 'memory' };
 
 /**
  * createRenderer(transcriptEl, hooks)
@@ -428,18 +498,29 @@ const SUGGESTION_KINDS = { computer: 'computer', web: 'web', fix: 'edit', schedu
  *          emptySuggestions() → [{ id, label, template }], onSuggestion(template),
  *          brainLabel() → string, onChangeRoutes(), onRouteEvent(ev) → bool (true = handled by an open card),
  *          heroOrigin() → DOMRect | null (where the empty state's character flies in from: the host's placeholder),
- *          onMascotChange() (the character on screen changed: mascot()) }
+ *          onMascotChange() (the character on screen changed: mascot()),
+ *          onFollowup(text, { set, indices }) (a follow-up was clicked: send `text` as the user's message),
+ *          onFollowupOther() ("Something else…": the composer), limitInfo() → the session's limit notice
+ *          ({ status, resetsAt } | null), brainProvider() → the brain's provider id, onLimitRetry(text)
+ *          (Retry now on the Assistant's own limit card: send `text`) }
  */
 export function createRenderer(transcriptEl, hooks = {}) {
   loadMarked();
   injectRackStyles();
+  injectSceneStyles();
   const $msgs = transcriptEl;
   const scopes = new Map(); // parent_tool_use_id → { container, stream, key }
   const runCards = new Map(); // runId → card element
+  const stages = new Map(); // runId → its card's worker stage (asst-run-stage.js)
+  const runActivity = new Map(); // runId → what its worker does now, compact ({ kind, name, step, at }), while the run lasts
+  let unsubStageTick = null;
   const routeLines = new Map(); // routeId → line handle
   const autoRows = new Map(); // traceId → the turn's automation trace row
   let working = null;
   let workingFace = null; // the "Thinking" row's character: { still, rig?, el, target? } (syncWorkingFace)
+  // The open card's slot under every row (asst-ask-tail.js): a card that waits on the user is drawn
+  // there, above the "Working…" row, until it is answered; rows appended meanwhile go above it.
+  const askTail = createAskTail($msgs, { anchor: () => (working?.parentNode === $msgs ? working : null) });
   let followTail = true;
   let emptyEl = null;
   let hero = null; // the empty state's character: { rig, el, box, parked, leaving, held, dock, egg, target }
@@ -451,6 +532,25 @@ export function createRenderer(transcriptEl, hooks = {}) {
   let turn = { calls: 0, last: null, errored: false, answerRow: null }; // what the turn did: the mascot's verdict, the announced answer
   let grace = null; // the stage on screen when the result arrived: it waits for the turn's verdict (finishTurn)
   let waiting = null; // a card waits on the user: { id: the tool_use id it holds or null, since } (setWaiting)
+  // An approved direct route (synabun.route auto / decided, target.kind 'direct', a class with a scene) lends its
+  // class's scene to the racks of the turn it runs in (noteDirectRoute): { routeId, taskClass, turn, rackAt } with
+  // `turn` the turnSeq it belongs to, null until a turn takes it (a pick made while no turn runs, or a route the
+  // journal's last turn was still running), and `rackAt` the last rack made before it (its racks come after).
+  // A route the journal records (`journal`) belongs to the journal's last turn only: the turn the reattach finds
+  // running takes it; with none running, that turn is over (it ended with no result) and nothing later takes it.
+  let directRoute = null;
+  let lastDirect = null; // the last one approved since the user's prompt: a "do it here" continuation turn takes it again
+  let turnSeq = 0; // turns this renderer has seen start (showWorking)
+  let reattachRunning = null; // what the last reattach said: a turn runs (true), none (false), not asked yet (null)
+  // What a turn left for the user to click: follow-up cards under its messages (asst-followups-card.js).
+  // The user's next prompt answers them or they go
+  // stale, and so does a new turn; live and from the journal alike, so a reload draws the same states.
+  const offers = new Set(); // { el, set, settle(text) → answered, stale() }
+  // The cards the mascot presents (asst-ask.js): follow-ups cards and the question cards the panel appends.
+  // The newest one still open is the character on screen (above any stage); see liveAsk / activateRigs.
+  const askCards = new Set(); // { el, presenter, isOpen(), onChange, seq }
+  let askSeq = 0;
+  let lastTextRow = null; // the newest root message since the user's last prompt: the one a guess reads
 
   // ── Activity racks ──
   // Every burst of agent work (tool calls, thinking, short narration) is one
@@ -463,6 +563,27 @@ export function createRenderer(transcriptEl, hooks = {}) {
   let rackSeq = 0;
   let stepSeq = 0;
   let unsubTick = null;
+  // A staged rack's bubble is cut to its stage's width (subjectBudget, fitSubject): when that width
+  // changes, the bubble is cut again once it has held still (one pass when a drag ends, never one per
+  // frame of it), instead of on the next tick. Heights are not watched.
+  const RECUT_SETTLE_MS = 120;
+  const stageWidths = new WeakMap(); // stage element → { rack, width }
+  const toRecut = new Set();
+  let recutTimer = 0;
+  const stageResizes = typeof ResizeObserver === 'function' ? new ResizeObserver((entries) => {
+    for (const entry of entries) {
+      const seen = stageWidths.get(entry.target);
+      if (!seen) continue;
+      const width = Math.round(entry.contentRect.width);
+      if (seen.width === null) { seen.width = width; continue; } // the first report: the width it was cut at
+      if (width === seen.width) continue;
+      seen.width = width;
+      toRecut.add(seen.rack);
+    }
+    if (!toRecut.size) return;
+    clearTimeout(recutTimer);
+    recutTimer = setTimeout(recutBubbles, RECUT_SETTLE_MS);
+  }) : null;
   let muted = false; // inside handleEvent(…, { silent: true }): no motion, no announcements
   let replayDraw = false; // inside handleEvent(…, { replay: true }): a reattach's missed packets (drawn like the journal)
   let clockAt = null; // the journal `at` of the entry being replayed
@@ -499,6 +620,7 @@ export function createRenderer(transcriptEl, hooks = {}) {
     if (step.ghost && step.type === 'call' && !Object.keys(step.input || {}).length) { say.text = '…'; say.detail = '…'; say.segments = null; say.mono = false; say.meta = []; }
     return say;
   };
+  const limitDock = createLimitDock($msgs, { t });
   const nowMs = () => (clockAt ?? Date.now());
   const isTimed = () => !muted || clockAt != null;
   const locale = () => (typeof document !== 'undefined' && document.documentElement?.lang) || 'en';
@@ -699,12 +821,46 @@ export function createRenderer(transcriptEl, hooks = {}) {
     return best;
   }
 
-  /** The mascot on screen: the hero, else the newest stage, else the "Thinking" row's, else none. */
+  /** The mascot on screen: the hero, else the newest open card's, else the newest stage, else the "Thinking" row's, else none. */
   function visibleMascot() {
     if (hero?.rig) return hero.target;
+    const ask = liveAsk();
+    if (ask?.presenter?.isLive?.()) return ask.presenter.target;
     return newestStage()?.target || workingFace?.target || null;
   }
 
+  // ── Cards the mascot presents ──
+  /**
+   * A follow-ups card or a question card (its `_ask`): its face may be the character on screen while it is
+   * open. Every ask — a route card too, which has no face — waits at the transcript's bottom until answered.
+   */
+  function registerAsk(handle) {
+    if (!handle?.el || askCards.has(handle)) return;
+    handle.seq = (askSeq += 1);
+    handle.onChange = () => { askTail.sync(); mascotChanged(); };
+    askCards.add(handle);
+    askTail.pin(handle);
+    mascotChanged();
+  }
+
+  /** The newest card with a face that is still open (answers can still be picked): the one whose face is live. */
+  function liveAsk() {
+    let best = null;
+    for (const handle of [...askCards]) {
+      if (!handle.el?.isConnected) { askCards.delete(handle); handle.presenter?.destroy?.(); continue; }
+      // A route card asks, but has no face of its own: it waits at the bottom without taking the character.
+      if (!handle.presenter || !handle.isOpen() || (best && best.seq > handle.seq)) continue;
+      best = handle;
+    }
+    return best;
+  }
+
+  function dropAsks() {
+    for (const handle of askCards) { try { handle.presenter?.destroy?.(); } catch { /* gone */ } }
+    askCards.clear();
+    askTail.clear();
+  }
+
   function mascotChanged() {
     activateRigs();
     try { hooks.onMascotChange?.(); } catch { /* the director is gone */ }
@@ -715,12 +871,12 @@ export function createRenderer(transcriptEl, hooks = {}) {
     while (rows.length > MAX_MESSAGES && rows[0] !== working) rows[0].remove();
   }
 
-  /** Insert a row before "Working…" so the indicator stays the last row. */
+  /** Insert a row before the open cards (if any) and before "Working…", so the indicator stays the last row. */
   function append(node, scope = rootScope, { park = false } = {}) {
     hideEmpty({ park });
-    if (scope.container === $msgs && working && working.parentNode === $msgs) $msgs.insertBefore(node, working);
+    if (scope.container === $msgs) askTail.insert(node);
     else scope.container.appendChild(node);
-    if (scope === rootScope) prune();
+    if (scope === rootScope) { prune(); askTail.sync(); }
     // Text, a card, a notice…: the parked hero would sit on it. The prompt and a rack leave it to settleHero().
     if (hero?.parked && scope === rootScope && !node._rack && !node.classList.contains('msg-user')) dismissHero();
     if (racks.size) syncRacks();
@@ -785,6 +941,99 @@ export function createRenderer(transcriptEl, hooks = {}) {
     linkify(body);
   }
 
+  /**
+   * A message's text without its follow-ups block (asst-followups.js). While it streams, a block
+   * being typed stays hidden; once the text is final, the block becomes the card under the row
+   * (root messages only: a subagent's offers are not the user's to answer).
+   */
+  function paintMessage(row, body, text, { streaming = false, scope = rootScope } = {}) {
+    const split = splitFollowups(text, { streaming });
+    renderMarkdownInto(body, split.body);
+    if (!streaming && split.block && scope === rootScope) attachFollowups(row, split.block);
+    return split;
+  }
+  /** What a streaming text shows: '' while it is nothing but the start of a block. */
+  const shownText = (text) => splitFollowups(text, { streaming: true }).body;
+
+  // ── Offers ──
+  /**
+   * The follow-ups card under a message row: once per row, registered as an open offer, and presented by
+   * the mascot (its face is live while it is the newest open card: activateRigs).
+   */
+  function attachFollowups(row, set) {
+    if (!row || !set?.items?.length) return null;
+    if (row._followups?.el.isConnected) return row._followups;
+    const card = createFollowupsCard(set, {
+      t,
+      // A card drawn from the journal comes in quietly; a live one with a nod.
+      entrance: calm() ? null : 'nod',
+      onSend: (text, meta) => hooks.onFollowup?.(text, meta),
+      onOther: () => hooks.onFollowupOther?.(),
+      onFocusComposer: () => hooks.onFollowupOther?.(),
+    });
+    row._followups = card;
+    (row.querySelector('.asst-msg-content') || row).appendChild(card.el);
+    offers.add(card);
+    registerAsk(card);
+    enterRow(card.el);
+    scrollEnd();
+    return card;
+  }
+
+  /**
+   * A finished turn whose last message still ends in a list of options or an "I can X, or Y" offer,
+   * with no block: best-effort items read from the prose. Once per message.
+   */
+  function guessOffer() {
+    const row = lastTextRow;
+    if (!row?.isConnected || row._followups || row._guessed || row.classList.contains('asst-msg-error')) return;
+    row._guessed = true;
+    const set = guessFollowups(row._text || '');
+    if (set) attachFollowups(row, set);
+  }
+
+  /**
+   * The user's next prompt reached the transcript (`text`), or a new turn started (no text): every open
+   * offer is answered by it or goes stale. A guessed set nobody took leaves: its message says it in words.
+   */
+  function settleOffers(text = null) {
+    for (const offer of [...offers]) {
+      offers.delete(offer);
+      if (!offer.el?.isConnected) continue;
+      const answered = text !== null ? offer.settle(text) : (offer.stale(), false);
+      if (!answered && offer.set?.source === 'heuristic') offer.el.remove();
+    }
+    if (text !== null) lastTextRow = null;
+  }
+
+  const sameText = (a, b) => String(a ?? '').replace(/\s+/g, ' ').trim().toLowerCase() === String(b ?? '').replace(/\s+/g, ' ').trim().toLowerCase();
+
+  /**
+   * A provider's usage limit (asst-limit.js) updates the conversation's single bottom countdown.
+   * The reset time is the session's own limit report while live (hooks.limitInfo: the Claude SDK's
+   * rate_limit_info), else the one the message names, read from when it was written. Retry now sends one
+   * message that retries the blocked work.
+   */
+  function offerLimitWait(text, { brainError = false, limit = null } = {}) {
+    const read = limitFromText(text, { now: nowMs() });
+    let info = limit;
+    if (!info && !muted) { try { info = hooks.limitInfo?.() || null; } catch { info = null; } }
+    const reported = info?.status === 'rejected';
+    // The brain's own error while the session's report says the limit holds is that limit, whatever its words.
+    if (!read && !(brainError && reported)) return null;
+    const resetsAt = reported ? info.resetsAt : read?.resetsAt;
+    const retryText = t('assistant.limitWait.continue', 'The usage limit has reset. Retry what was blocked and continue where you left off.');
+    let provider = '';
+    try { provider = providerShortLabel(hooks.brainProvider?.() || ''); } catch { /* unknown */ }
+    return limitDock.set('brain', { resetsAt, since: nowMs(), provider, onRetry: () => { limitDock.set('brain', null); hooks.onLimitRetry?.(retryText); } });
+  }
+
+  /** The session's limit report changed (assistant:limit): this turn's waiting card counts to its reset time. */
+  function noteLimit(limit) {
+    if (limit?.status === 'rejected') offerLimitWait('', { brainError: true, limit });
+    else if (limit?.status && limit.status !== 'rejected') limitDock.set('brain', null);
+  }
+
   function copyText(text) {
     const value = String(text ?? '');
     if (!value) return;
@@ -817,10 +1066,18 @@ export function createRenderer(transcriptEl, hooks = {}) {
     if (!s) return;
     if (s.mdTimer) { clearTimeout(s.mdTimer); s.mdTimer = null; }
     if (s.thinkTimer) { clearTimeout(s.thinkTimer); s.thinkTimer = null; }
-    if (s.bodyEl && s.textBuf.trim()) renderMarkdownInto(s.bodyEl, s.textBuf);
+    if (s.bodyEl && s.textBuf.trim()) paintMessage(s.row, s.bodyEl, s.textBuf, { streaming: true, scope });
     if (s.think) refreshStep(s.think);
   }
 
+  /** A streamed row that stays as the message (no final message replaced it): its text is final now. */
+  function sealStreamRow(scope) {
+    const s = scope.stream;
+    if (!s?.row || !s.bodyEl || !s.textBuf.trim()) return;
+    s.row.classList.remove('streaming');
+    paintMessage(s.row, s.bodyEl, s.textBuf, { scope });
+  }
+
   /** The stream's text row goes (the final message renders the text again). */
   function dropStreamText(scope) {
     const s = scope.stream;
@@ -890,10 +1147,12 @@ export function createRenderer(transcriptEl, hooks = {}) {
         if (!s.thinkTimer) s.thinkTimer = setTimeout(() => { s.thinkTimer = null; refreshStep(step); if (step.rack.live) paintStage(step.rack); }, STREAM_TICK_MS);
       } else if (delta.type === 'text_delta' && delta.text != null) {
         s.textBuf += delta.text;
-        if (!s.bodyEl && s.textBuf.trim()) {
+        // A row once there is something to show: a follow-ups block on its own is the card, later.
+        if (!s.bodyEl && shownText(s.textBuf).trim()) {
           const { row, wrap } = assistantRow(scope, { _text: s.textBuf, _msgId: s.msgId, _claude: s.claude });
           row.classList.add('streaming');
           noteAnswer(scope, row);
+          if (scope === rootScope) lastTextRow = row;
           s.row = row;
           s.wrap = wrap;
           s.bodyEl = el('div', 'asst-md');
@@ -904,7 +1163,7 @@ export function createRenderer(transcriptEl, hooks = {}) {
           s.mdTimer = setTimeout(() => {
             s.mdTimer = null;
             if (!s.bodyEl) return;
-            renderMarkdownInto(s.bodyEl, s.textBuf);
+            paintMessage(s.row, s.bodyEl, s.textBuf, { streaming: true, scope });
             scrollEnd();
           }, STREAM_TICK_MS);
         }
@@ -913,7 +1172,7 @@ export function createRenderer(transcriptEl, hooks = {}) {
     }
     if (type === 'content_block_stop') {
       const s = scope.stream;
-      if (s?.bodyEl && s.mdTimer) { clearTimeout(s.mdTimer); s.mdTimer = null; renderMarkdownInto(s.bodyEl, s.textBuf); }
+      if (s?.bodyEl && s.mdTimer) { clearTimeout(s.mdTimer); s.mdTimer = null; paintMessage(s.row, s.bodyEl, s.textBuf, { streaming: true, scope }); }
       if (s?.think && s.thinkTimer) { clearTimeout(s.thinkTimer); s.thinkTimer = null; refreshStep(s.think); }
     }
   }
@@ -983,9 +1242,10 @@ export function createRenderer(transcriptEl, hooks = {}) {
   function textRow(scope, text, ctx = {}) {
     const { row, wrap } = assistantRow(scope, { _text: text, _msgId: ctx.msgId || null, _claude: !!ctx.claude });
     const body = el('div', 'asst-md');
-    renderMarkdownInto(body, text);
     wrap.appendChild(body);
+    paintMessage(row, body, text, { scope });
     noteAnswer(scope, row);
+    if (scope === rootScope) lastTextRow = row;
     return row;
   }
 
@@ -1012,7 +1272,7 @@ export function createRenderer(transcriptEl, hooks = {}) {
       else if (s.row) {
         s.row.classList.remove('streaming');
         if (!s.wrap.children.length) s.row.remove();
-        else if (s.textBuf.trim()) (scope.kept ||= new Set()).add(textKey(s.textBuf));
+        else if (s.textBuf.trim()) { (scope.kept ||= new Set()).add(textKey(s.textBuf)); sealStreamRow(scope); }
       }
       if (streamedThink && !thinks.length) finishThink(streamedThink);
       scope.stream = null;
@@ -1173,10 +1433,10 @@ export function createRenderer(transcriptEl, hooks = {}) {
     return prev;
   }
 
-  /** The scope's last row, skipping "Working…" and rows folding into a rack. */
+  /** The scope's last row, skipping "Working…", the open card's slot and rows folding into a rack. */
   function tailRow(scope) {
     let node = scope.container.lastElementChild;
-    while (node && (node === working || node.classList.contains('asst-folding'))) node = node.previousElementSibling;
+    while (node && (node === working || node === askTail.slot || node.classList.contains('asst-folding'))) node = node.previousElementSibling;
     return node;
   }
 
@@ -1256,6 +1516,25 @@ export function createRenderer(transcriptEl, hooks = {}) {
   }
 
   // ── Racks ──
+  /**
+   * The class whose scene a new rack of this turn shows: an approved direct route this turn runs, else ''. Live, or
+   * a reattach's replay of the running turn; never the journal (no turn runs while it is drawn).
+   */
+  function directSceneClass() {
+    return (!muted || replayDraw) && turnActive && directRoute && directRoute.turn === turnSeq ? directRoute.taskClass : '';
+  }
+
+  /**
+   * A route a turn takes when it starts (a conversation opened again mid-turn, a pick made while no turn ran): the
+   * open racks made after it are that turn's work, and show its scene from now on. Settled racks never move.
+   */
+  function lendRouteScene(route) {
+    for (const rack of racks) {
+      if (rack.nested || rack.closed || rack.sceneClass || !(rack.id > (route.rackAt ?? Infinity))) continue;
+      rack.sceneClass = route.taskClass;
+    }
+  }
+
   function createRack(scope) {
     const id = ++rackSeq;
     const nested = scope.container !== $msgs;
@@ -1265,9 +1544,9 @@ export function createRenderer(transcriptEl, hooks = {}) {
     row.setAttribute('role', 'group');
     const ledgerId = `asst-rack-${id}-ledger`;
     row.innerHTML = `<div class="asst-rack-stage">
-        <div class="asst-rack-face" aria-hidden="true"></div>
+        <div class="asst-rack-set"><div class="asst-rack-face" aria-hidden="true"></div><div class="asst-rack-scene" aria-hidden="true"></div></div>
         <div class="asst-rack-caption"></div>
-        <div class="asst-bubble" aria-live="off" hidden><span class="asst-bubble-verb"></span><span class="asst-bubble-subject" role="button" tabindex="-1" aria-expanded="false"><span class="asst-bubble-text"></span><span class="asst-bubble-caret" aria-hidden="true"></span></span><span class="asst-bubble-meta"></span><span class="asst-bubble-err" hidden></span></div>
+        <div class="asst-bubble" aria-live="off" hidden><span class="asst-bubble-line"><span class="asst-bubble-verb"></span><span class="asst-bubble-subject" role="button" tabindex="-1" aria-expanded="false"><span class="asst-bubble-text"></span></span><span class="asst-bubble-meta"></span></span><span class="asst-bubble-err" hidden></span></div>
         <div class="asst-rack-sweep" aria-hidden="true"></div>
       </div>
       <button type="button" class="asst-rack-receipt" aria-expanded="false" aria-controls="${ledgerId}"><span class="asst-rack-receipt-face" aria-hidden="true"></span><span class="asst-rack-receipt-text"></span><span class="asst-rack-receipt-failed" hidden></span><span class="asst-rack-receipt-clock"></span><span class="asst-rack-chev" aria-hidden="true">&#x203A;</span></button>
@@ -1278,7 +1557,10 @@ export function createRenderer(transcriptEl, hooks = {}) {
     const rack = {
       id, row, scope, nested, closed: false, live: false, staged: false, open: false, view: 'kind', everAwake: false,
       stations: new Map(), steps: [], timeline: [], said: [], firstAt: 0,
-      stage: { el: q('.asst-rack-stage'), face: q('.asst-rack-face'), caption: q('.asst-rack-caption'), bubble: q('.asst-bubble'), verb: q('.asst-bubble-verb'), subject: q('.asst-bubble-subject'), text: q('.asst-bubble-text'), meta: q('.asst-bubble-meta'), err: q('.asst-bubble-err') },
+      // The direct route's class whose scene the stage shows: set here, or once when a reopened conversation's route
+      // resumes (lendRouteScene); a rack never loses its scene.
+      sceneClass: nested ? '' : directSceneClass(), sceneId: '', sceneAt: -Infinity,
+      stage: { el: q('.asst-rack-stage'), set: q('.asst-rack-set'), face: q('.asst-rack-face'), scene: q('.asst-rack-scene'), caption: q('.asst-rack-caption'), bubble: q('.asst-bubble'), line: q('.asst-bubble-line'), verb: q('.asst-bubble-verb'), subject: q('.asst-bubble-subject'), text: q('.asst-bubble-text'), meta: q('.asst-bubble-meta'), err: q('.asst-bubble-err') },
       receipt: { btn: q('.asst-rack-receipt'), face: q('.asst-rack-receipt-face'), text: q('.asst-rack-receipt-text'), failed: q('.asst-rack-receipt-failed'), clock: q('.asst-rack-receipt-clock'), faceBuilt: false, pose: '', svg: null },
       ledger: q('.asst-rack-ledger'), statusEl: q('.asst-rack-status'), alertEl: q('.asst-rack-alert'), timelineEl: null, timelineSig: '',
       rig: null, target: null, held: false, holdUntil: 0, holdTimer: 0, pose: null, awake: null, awakeKey: null,
@@ -1454,6 +1736,8 @@ export function createRenderer(transcriptEl, hooks = {}) {
     renderRackLabel(rack, sentence);
     if (live) { if (rack.staged) paintStage(rack, now); scheduleStage(rack, now); needTicker(); }
     else if (was) settle(rack);
+    // The scene moves while the rack is live, as its sweep does: never while a card holds it, nor once it settled.
+    rack.stage.scene.firstElementChild?.toggleAttribute('data-live', live && !rack.waiting);
     if (rack.open && rack.view === 'time') renderTimeline(rack);
     if (working?.isConnected) syncWorkingFace();
   }
@@ -1506,6 +1790,7 @@ export function createRenderer(transcriptEl, hooks = {}) {
       clearTimeout(rack.clearTimer);
       rack.clearTimer = 0;
       rack.row.classList.add('is-staged');
+      watchStageWidth(rack, true);
       if (!rack.rig) {
         try { rack.rig = mascotLib.createMascot(rack.stage.face, { width: 72, height: 36, rangeX: 10, rangeY: 7, pose: 'idle' }); } catch { rack.rig = null; }
         rack.pose = null;
@@ -1544,6 +1829,7 @@ export function createRenderer(transcriptEl, hooks = {}) {
   /** A folded stage keeps nothing: its rig goes, its texts empty (a settled rack is the same live or replayed). */
   function clearStage(rack) {
     if (rack.staged) return;
+    watchStageWidth(rack, false);
     const had = !!rack.rig;
     rack.rig?.destroy?.();
     rack.rig = null;
@@ -1553,6 +1839,10 @@ export function createRenderer(transcriptEl, hooks = {}) {
     if (had) mascotChanged();
     const s = rack.stage;
     s.face.textContent = '';
+    s.scene.textContent = '';
+    delete s.el.dataset.scene;
+    rack.sceneId = '';
+    rack.sceneAt = -Infinity;
     s.caption.textContent = '';
     s.bubble.hidden = true;
     delete s.bubble.dataset.state;
@@ -1561,6 +1851,7 @@ export function createRenderer(transcriptEl, hooks = {}) {
     s.text.textContent = '';
     s.subject.removeAttribute('title');
     s.subject.className = 'asst-bubble-subject';
+    s.subject.hidden = false;
     s.subject.setAttribute('aria-expanded', 'false');
     s.meta.textContent = '';
     s.err.textContent = '';
@@ -1570,15 +1861,21 @@ export function createRenderer(transcriptEl, hooks = {}) {
   }
 
   /**
-   * One rig of this transcript animates: the hero, else the newest stage, else
-   * the "Thinking" row's. The rule ends at this renderer: every other panel
-   * runs its own, so N live sessions show N moving characters.
+   * One rig of this transcript animates: the hero, else the newest open card
+   * the mascot presents (a follow-ups card, a question card: its face is a rig
+   * only then, and never while calm), else the newest stage, else the
+   * "Thinking" row's. The rule ends at this renderer: every other panel runs
+   * its own, so N live sessions show N moving characters.
    */
   function activateRigs() {
-    const newest = hero?.rig ? null : newestStage();
+    const ask = hero?.rig ? null : liveAsk();
+    const askLive = !!ask && !calm();
+    for (const handle of askCards) handle.presenter?.setLive?.(askLive && handle === ask);
+    const asking = askLive && !!ask.presenter?.isLive?.();
+    const newest = hero?.rig || asking ? null : newestStage();
     for (const rack of racks) if (rack.rig) rack.rig.setActive?.(rack === newest);
     hero?.rig?.setActive?.(true);
-    workingFace?.rig?.setActive?.(!hero?.rig && !newest);
+    workingFace?.rig?.setActive?.(!hero?.rig && !asking && !newest);
   }
 
   /** The bubble's call: the awake one, else the newest; it holds 900 ms (3 s for thinking) before the next wins. */
@@ -1638,11 +1935,32 @@ export function createRenderer(transcriptEl, hooks = {}) {
       if (!rack.waiting && shown && shown.rack === rack && now - rack.bubble.since < hold) rack.bubble.pendingAt = rack.bubble.since + hold;
       else { rack.bubble.step = target; rack.bubble.since = now; }
     }
+    paintRackScene(rack, now); // before the bubble: the set it sits beside takes the scene's width
     poseStage(rack);
     paintBubble(rack, now, { swap: true });
     paintCaption(rack);
   }
 
+  /**
+   * A direct route's rack: the scene under the mascot is the route class's
+   * (asst-scenes.js), or the one the bubble's call implies (a browser tool the
+   * browser, a computer tool the computer, a web search or a page read
+   * research); a scene a call picked holds STAGE_TIMING.sceneDwellMs, as on a
+   * run's stage (tickRacks tries again). Nothing for a rack without a route.
+   */
+  function paintRackScene(rack, now) {
+    if (!rack.sceneClass || !rack.staged) return;
+    const step = rack.bubble.step;
+    const call = step?.type === 'call' ? { kind: step.kind, name: step.name } : null;
+    const want = activityScene(call, rack.sceneClass) || sceneOfClass(rack.sceneClass);
+    if (want === rack.sceneId) return;
+    if (rack.sceneId && now - rack.sceneAt < STAGE_TIMING.sceneDwellMs) return;
+    rack.sceneId = want;
+    rack.sceneAt = now;
+    rack.stage.scene.innerHTML = sceneSvg(want, { live: rack.live && !rack.waiting });
+    rack.stage.el.dataset.scene = want;
+  }
+
   function paintCaption(rack) {
     const step = rack.bubble.step;
     const say = step ? sayOf(step) : null;
@@ -1667,25 +1985,39 @@ export function createRenderer(transcriptEl, hooks = {}) {
     const held = rack.waiting && step === waitingStep(rack);
     const verb = held ? t('assistant.rack.waiting', 'Waiting for you') : verbText(say.verb, running, t);
     const grouped = groupedSubject(rack, step);
-    const full = grouped || say.text;
+    // A thought with no words yet says only "Thinking" (the mascot's thought dots are the one busy sign):
+    // the subject's "…" placeholder stays for a call whose input is still streaming.
+    const bare = step.type === 'think' && say.text === '…';
+    // A command as the stage says it: one "…" however many paths its summary shortens (say.stage).
+    const full = bare ? '' : grouped || say.stage || say.text;
     const literal = !grouped && say.full ? say.full : full; // the command as written: the title and the opened bubble
     const open = rack.bubble.open;
-    // Narrow stages cut from the head, so the file name (the tail) survives.
-    const cut = subjectCut(rack);
-    const budget = subjectBudget(rack, verb, cut);
-    const shownText = open ? literal : cut === 'head' ? headEllipsis(full, budget) : middleEllipsis(full, budget, 24);
-    const key = `${step.id}|${verb}|${shownText}|${say.muted ? 1 : 0}`;
     s.bubble.hidden = !full && !verb;
     s.bubble.dataset.state = held ? 'waiting' : running ? 'running' : step.state;
     s.bubble.dataset.kind = step.kind;
+    // The numbers first: they share the subject's line, so the cut below measures the room they leave.
+    paintBubbleMeta(rack, step, say, now);
+    // Narrow stages cut from the head, so the file name (the tail) survives. A small budget keeps a
+    // shorter tail (24 chars of it would not fit beside the verb). A subject already cut from its head
+    // (a streamed thought's tail) is cut from the head again: one "…", never two.
+    const cut = full.startsWith('…') ? 'head' : subjectCut(rack);
+    const cutTo = (n) => (open ? literal : cut === 'head' ? headEllipsis(full, n) : middleEllipsis(full, n, Math.min(24, Math.max(8, n - 6))));
+    const shownText = bare ? '' : cutTo(subjectBudget(rack, verb, cut));
+    const key = `${step.id}|${verb}|${shownText}|${say.muted ? 1 : 0}|${bare ? 1 : 0}`;
     if (key !== rack.bubble.key) {
       const changedStep = !rack.bubble.key.startsWith(`${step.id}|`);
       rack.bubble.key = key;
       const write = () => {
         s.verb.textContent = verb;
         s.subject.className = `asst-bubble-subject${say.mono ? ' is-mono' : ''}${say.muted ? ' is-muted' : ''}`;
-        writeSubject(s.text, grouped || open ? null : say.segments, shownText);
-        if (literal !== shownText || open) s.subject.title = literal; else s.subject.removeAttribute('title');
+        s.subject.hidden = bare;
+        const segments = grouped || open ? null : say.segments;
+        writeSubject(s.text, segments, shownText);
+        // The budget is an estimate (a long token wraps whole to the next line): what the two-line
+        // clamp would hide is cut here instead, so the subject is never cut a second time.
+        const fitted = open || bare ? shownText : fitSubject(s, shownText, cutTo, segments);
+        s.subject.classList.toggle('is-cut', fitted.startsWith('…'));
+        if (literal !== fitted || open) s.subject.title = literal; else s.subject.removeAttribute('title');
       };
       if (swap && changedStep && !calm() && typeof s.subject.animate === 'function' && s.text.textContent) {
         s.subject.getAnimations?.().forEach(a => a.cancel());
@@ -1697,7 +2029,6 @@ export function createRenderer(transcriptEl, hooks = {}) {
         };
       } else write();
     }
-    paintBubbleMeta(rack, step, say, now);
     const err = step.state === 'error' ? (step.detail || exitText(step)) : '';
     s.err.hidden = !err;
     if (s.err.textContent !== err) s.err.textContent = err;
@@ -1708,24 +2039,32 @@ export function createRenderer(transcriptEl, hooks = {}) {
   }
 
   /**
-   * How many characters of subject fit the bubble: two lines of the column
-   * beside the verb, measured on the laid-out stage. The text is cut in the
-   * middle so its tail (the file, the last argument) stays; on a narrow stage
-   * from the head (subjectCut).
+   * How many characters of subject fit the bubble: two lines of its one
+   * text flow, less the verb at the head and the numbers at the end,
+   * measured on the laid-out stage. The text is cut in the middle so its
+   * tail (the file, the last argument) stays; on a narrow stage from the
+   * head (subjectCut).
    */
   function subjectBudget(rack, verb, cut = 'middle') {
     const s = rack.stage;
     const width = s.el.clientWidth;
     if (!width) return 96;
-    const face = s.face.getBoundingClientRect();
+    const face = (s.set || s.face).getBoundingClientRect(); // the mascot's column (with a scene under it, as wide as the scene)
     const bubble = s.bubble.hidden ? null : s.bubble.getBoundingClientRect();
     const beside = !bubble || bubble.left >= face.right - 1;
     const verbPx = Math.max(s.verb.getBoundingClientRect().width, verb.length * 7);
-    const column = width - 28 - 22 - (beside ? face.width + 8 : 0) - verbPx - 7;
+    // The numbers at the end of the line (painted first): a running call keeps a clock's room before it shows.
+    const metaPx = s.meta.textContent ? s.meta.getBoundingClientRect().width : 0;
+    const numbersPx = Math.max(metaPx, rack.bubble.step?.state === 'running' ? 28 : 0);
+    // The bubble's text column: the stage's 14px sides, the notch's 8px, the bubble's 10px sides.
+    const column = width - 28 - 8 - 20 - (beside ? face.width + 8 : 0);
     const perLine = Math.max(12, Math.floor(column / 7));
-    // Two lines, less what wrapping at token boundaries wastes (a head cut wraps anywhere: two full lines).
-    const lines = getComputedStyle(s.subject).whiteSpace === 'nowrap' ? 1 : cut === 'head' ? 2 : 1.7;
-    return Math.max(24, Math.min(240, Math.floor(perLine * lines) - 1));
+    // Two lines, less what wrapping at token boundaries wastes (a head cut is one tail: close to two full
+    // lines, a path's pieces wrapping at its separators); a guess on the generous side, since fitSubject
+    // cuts what the clamp would hide or a piece would push past the edge.
+    const lines = getComputedStyle(s.line).whiteSpace === 'nowrap' ? 1 : cut === 'head' ? 2 : 1.85;
+    const taken = Math.ceil((verbPx + 7 + (numbersPx ? numbersPx + 7 : 0)) / 7);
+    return Math.max(24, Math.min(240, Math.floor(perLine * lines) - taken - 1));
   }
 
   /** 'head' where the stylesheet says so (≤320 px: keep the tail), else 'middle'. */
@@ -1733,21 +2072,59 @@ export function createRenderer(transcriptEl, hooks = {}) {
     try { return getComputedStyle(rack.stage.subject).getPropertyValue('--rk-cut').trim() === 'head' ? 'head' : 'middle'; } catch { return 'middle'; }
   }
 
-  /** "…ender-events.browser.mjs": the last `max` chars, from a token boundary when one is near. */
-  function headEllipsis(text, max) {
-    const s = String(text ?? '');
-    if (s.length <= max) return s;
-    let tail = s.slice(s.length - Math.max(8, max - 1));
-    const cut = tail.search(/[\s/]/);
-    if (cut > 0 && cut < tail.length * 0.4) tail = tail.slice(tail[cut] === '/' ? cut : cut + 1);
-    return `…${tail}`;
-  }
-
+  /**
+   * The subject's text, in its segments' spans (a read's dim folder, its
+   * bold name). A URL or path in it is one `.asst-bubble-piece` (nowrap) per
+   * piece with a <wbr> between them (wrapRuns): it wraps after "/" and at
+   * its other separators, never mid-word.
+   */
   function writeSubject(node, segments, text) {
     node.textContent = '';
-    if (Array.isArray(segments) && segments.length && segments.map(x => x.text).join('') === text) {
-      for (const seg of segments) node.appendChild(el('span', seg.cls ? `is-${seg.cls}` : '', seg.text));
-    } else node.textContent = text;
+    const segs = Array.isArray(segments) && segments.length && segments.map(x => x.text).join('') === text ? segments : null;
+    let end = 0;
+    const bounds = segs ? segs.map(seg => [end += seg.text.length, seg.cls]) : [[text.length, null]];
+    // text[from, to) into `host`, one span per segment it crosses.
+    const put = (host, from, to) => {
+      for (const [stop, cls] of bounds) {
+        if (from >= to) break;
+        if (stop <= from) continue;
+        const slice = text.slice(from, Math.min(stop, to));
+        host.appendChild(segs ? el('span', cls ? `is-${cls}` : '', slice) : document.createTextNode(slice));
+        from += slice.length;
+      }
+    };
+    let at = 0;
+    for (const run of wrapRuns(text)) {
+      if (!run.pieces) { put(node, at, at += run.text.length); continue; }
+      run.pieces.forEach((piece, i) => {
+        if (i) node.appendChild(document.createElement('wbr'));
+        put(node.appendChild(el('span', 'asst-bubble-piece')), at, at += piece.length);
+      });
+    }
+  }
+
+  /** A path piece wider than what is left of its line: it runs past the line's edge, where the line's overflow hides it. */
+  function pieceOverflows(s) {
+    const pieces = s.text.getElementsByClassName('asst-bubble-piece');
+    if (!pieces.length) return false;
+    const right = s.line.getBoundingClientRect().right + 0.5;
+    for (const piece of pieces) for (const r of piece.getClientRects()) if (r.right > right) return true;
+    return false;
+  }
+
+  /**
+   * The bubble's subject cut shorter (`cutTo`, six steps at most) until the line's clamp hides none of it
+   * (nor the numbers after it) and no path piece runs past its edge; the text it shows.
+   */
+  function fitSubject(s, text, cutTo, segments) {
+    let shown = text;
+    let budget = shown.length;
+    for (let i = 0; i < 6 && budget > 12 && (s.line.scrollHeight > s.line.clientHeight + 1 || pieceOverflows(s)); i += 1) {
+      budget = Math.floor(budget * 0.85);
+      shown = cutTo(budget);
+      writeSubject(s.text, segments, shown);
+    }
+    return shown;
   }
 
   /** How many calls of the rack act on the bubble call's target (itself included): a re-run or re-read reads ×N. */
@@ -1771,7 +2148,7 @@ export function createRenderer(transcriptEl, hooks = {}) {
     // A subagent's bubble follows its child: the step the agent is on now.
     if (step.kind === 'subagent' && step.children?.length) {
       const child = step.children.filter(c => c.type === 'call' || (c.state === 'running' && !c.stale)).reduce((a, b) => (!a || b.startedAt >= a.startedAt ? b : a), null);
-      if (child) parts.push(['m', middleEllipsis(stepSentence(child, child.state === 'running' && !child.stale), 60, 24)]);
+      if (child) parts.push(['m', middleEllipsis(stepSentence(child, child.state === 'running' && !child.stale, { stage: true }), 60, 24)]);
     }
     // ×N only for the same target again (a re-run, a re-read): a number the ledger agrees with.
     // Other calls in the same 800 ms burst read as a sentence instead.
@@ -2065,10 +2442,10 @@ export function createRenderer(transcriptEl, hooks = {}) {
     return t('assistant.rack.state.done', 'done');
   }
 
-  /** "Running npm test" / "Ran npm test". */
-  function stepSentence(step, running) {
+  /** "Running npm test" / "Ran npm test"; `stage`: as the stage bubble says it (say.stage). */
+  function stepSentence(step, running, { stage = false } = {}) {
     const say = sayOf(step);
-    return `${verbText(say.verb, running, t)} ${String(say.text || '').replace(/^\$ /, '')}`.trim();
+    return `${verbText(say.verb, running, t)} ${String((stage && say.stage) || say.text || '').replace(/^\$ /, '')}`.trim();
   }
 
   /** The receipt: one call says what it did; a burst says it in one sentence. */
@@ -2462,6 +2839,30 @@ export function createRenderer(transcriptEl, hooks = {}) {
     unsubTick = null;
   }
 
+  /** The bubbles whose stage changed width: cut and fit again (the same text may fit differently now). */
+  function recutBubbles() {
+    recutTimer = 0;
+    for (const rack of toRecut) {
+      if (!rack.staged || !rack.bubble.step || !rack.row.isConnected) continue;
+      rack.bubble.key = '';
+      paintBubble(rack, Date.now(), { swap: false });
+    }
+    toRecut.clear();
+  }
+
+  function watchStageWidth(rack, on) {
+    if (!stageResizes) return;
+    const stage = rack.stage.el;
+    if (on && !stageWidths.has(stage)) {
+      stageWidths.set(stage, { rack, width: null });
+      stageResizes.observe(stage);
+    } else if (!on && stageWidths.has(stage)) {
+      stageWidths.delete(stage);
+      stageResizes.unobserve(stage);
+      toRecut.delete(rack);
+    }
+  }
+
   /** Once a second while a rack is live: its clocks (and any wake-up the timers have not caught). */
   function tickRacks() {
     let any = false;
@@ -2470,7 +2871,8 @@ export function createRenderer(transcriptEl, hooks = {}) {
       if (!rack.live) continue;
       any = true;
       const now = Date.now();
-      if (rack.staged && rack.bubble.step) paintBubble(rack, now, { swap: false }); // clocks, and the cut after a resize
+      if (rack.staged && rack.sceneClass) paintRackScene(rack, now); // a scene swap the dwell held back
+      if (rack.staged && rack.bubble.step) paintBubble(rack, now, { swap: false }); // its clocks (a resize re-cuts it: recutBubbles)
       for (const st of rack.stations.values()) { const time = stationTime(st, true, rackNow(rack)); if (st.time.textContent !== time) st.time.textContent = time; }
       for (const step of rack.steps) if (step.state === 'running' && step.type === 'call' && step.progress >= 1) refreshStep(step);
     }
@@ -2478,6 +2880,7 @@ export function createRenderer(transcriptEl, hooks = {}) {
   }
 
   function dropRack(rack) {
+    watchStageWidth(rack, false);
     clearTimeout(rack.stageTimer);
     clearTimeout(rack.clearTimer);
     clearTimeout(rack.sr.timer);
@@ -2544,7 +2947,12 @@ export function createRenderer(transcriptEl, hooks = {}) {
   }
 
   function appendUser(text, { images = [], files = [], memories = [], origin = null, imageCount = 0 } = {}) {
+    // The prompt answers what the last turn offered (one of its follow-ups, a retry), or it leaves it behind.
+    settleOffers(String(text ?? ''));
+    limitDock.set('brain', null);
     turnFrames = [];
+    directRoute = null; // a new prompt is a new task: its own route decides
+    lastDirect = null;
     rootScope.kept = null;
     lastErrorText = '';
     const row = el('div', 'asst-msg msg-user');
@@ -2581,17 +2989,21 @@ export function createRenderer(transcriptEl, hooks = {}) {
   }
 
   function appendError(text) {
-    return appendStatus(text || t('assistant.errorGeneric', 'Something went wrong'), 'error');
+    const row = appendStatus(text || t('assistant.errorGeneric', 'Something went wrong'), 'error');
+    if (text) offerLimitWait(text); // a usage limit: the waiting card under it
+    return row;
   }
 
   function appendDivider(label) {
     return append(el('div', 'asst-divider', label || ''));
   }
 
-  /** Place an arbitrary node (control / route card) as a transcript row. */
+  /** Place an arbitrary node (control / route card) as a transcript row; a card that asks is presented by the mascot. */
   function appendNode(node) {
     if (!node) return null;
-    return append(node);
+    const row = append(node);
+    if (node._ask) registerAsk(node._ask);
+    return row;
   }
 
   function showWorking(label) {
@@ -2604,7 +3016,17 @@ export function createRenderer(transcriptEl, hooks = {}) {
     working.querySelector('.asst-working-label').textContent = label || t('assistant.rack.verb.think.now', 'Thinking');
     hideEmpty({ park: true });
     $msgs.appendChild(working);
-    if (!turnActive) turn = { calls: 0, last: null, errored: false, answerRow: null };
+    if (!turnActive) {
+      // A new turn: what the last one offered and nobody took is no longer clickable.
+      settleOffers();
+      limitDock.set('brain', null);
+      turn = { calls: 0, last: null, errored: false, answerRow: null };
+      turnSeq += 1;
+      if (directRoute && directRoute.turn == null) { // a route picked while no turn ran, or one the journal left running, is this turn's
+        directRoute.turn = turnSeq;
+        lendRouteScene(directRoute);
+      }
+    }
     turnActive = true;
     if (racks.size) syncRacks();
     syncWorkingFace();
@@ -2685,33 +3107,178 @@ export function createRenderer(transcriptEl, hooks = {}) {
       onStop: hooks.onStopRun,
       onRead: hooks.onReadRun,
       onEscalate: hooks.onEscalateRun,
+      onLimitWait: (run, limit) => limitDock.set(`run:${run.runId}`, limit ? {
+        resetsAt: limit.resetsAt || null,
+        since: Date.parse(limit.detectedAt || run.completedAt || '') || nowMs(),
+        provider: providerShortLabel(run.provider || 'claude-code'),
+        onRetry: () => { limitDock.set(`run:${run.runId}`, null); hooks.onEscalateRun?.(run.runId, limitRetryTarget(run)); },
+      } : null),
       result,
       keepSummary: true,
     };
   }
 
-  function upsertRunCard(run, { result = null } = {}) {
-    if (!run?.runId) return null;
+  /** What the renderer knows of a run (titles for the stage bubble, the route line's live state). */
+  function noteRun(run) {
     const prev = runInfo.get(run.runId);
     const status = run.status || prev?.state;
     const tone = status ? runTone({ ...run, status }) : '';
     const routeId = run.route?.routeId || prev?.routeId || '';
     runInfo.set(run.runId, { ...prev, title: run.title || run.task || prev?.title, state: status, provider: run.provider, routeId, working: tone === 'running' || tone === 'queued' });
+    if (isTerminalRunStatus(status)) runActivity.delete(run.runId); // the run is over: so is what it was doing
     if (routeId) syncRouteLive(routeId);
+  }
+
+  function upsertRunCard(run, { result = null } = {}) {
+    if (!run?.runId) return null;
+    noteRun(run);
     const cardOpts = runCardOpts(result);
     let card = runCards.get(run.runId);
     if (card && card.isConnected) {
       updateRunCard(card, run, cardOpts);
+      syncStage(run.runId, card, run);
       for (const rack of racks) if (rack.live) renderRack(rack); // "Waiting on <title>" learns the title
       return card;
     }
+    dropStage(run.runId); // a card that left the transcript took its stage with it
     card = buildRunCard(run, cardOpts);
     runCards.set(run.runId, card);
     const { wrap } = assistantRow(rootScope);
     wrap.appendChild(card);
+    syncStage(run.runId, card, run);
     return card;
   }
 
+  /**
+   * A run update from anywhere (the agents tray's sources: the sync bus, its
+   * fetch): the card and its stage update in place, the route line learns
+   * whether its run works. Never adds a card.
+   */
+  function syncRun(run) {
+    if (!run?.runId) return null;
+    noteRun(run);
+    const card = runCards.get(run.runId);
+    if (!card?.isConnected) { limitDock.set(`run:${run.runId}`, null); return null; }
+    updateRunCard(card, run, runCardOpts()); // fresh options: the run's own lastResult, never a result the card was built with
+    syncStage(run.runId, card, run);
+    return card;
+  }
+
+  // ── Worker stages (asst-run-stage.js) ──
+  /** The card's stage: made when the run first works, then updated in place for as long as the card lives. */
+  function syncStage(runId, card, run) {
+    let stage = stages.get(runId);
+    if (!stage) {
+      if (!isLivePhase(stagePhase(run))) return;
+      stage = createWorkerStage(card, { t, calm: () => reducedMotion() });
+      stages.set(runId, stage);
+      stage.setActivity(runActivity.get(runId) || null);
+    }
+    stage.update(run);
+    if (stage.live()) needStageTicker();
+  }
+
+  function dropStage(runId) {
+    const stage = stages.get(runId);
+    if (!stage) return;
+    stages.delete(runId);
+    try { stage.destroy(); } catch { /* gone */ }
+  }
+
+  function needStageTicker() {
+    if (unsubStageTick) return;
+    try { unsubStageTick = subscribe(tickStages, { fps: 1 }); } catch { unsubStageTick = null; }
+  }
+
+  function stopStageTicker() {
+    if (!unsubStageTick) return;
+    try { unsubStageTick(); } catch { /* already gone */ }
+    unsubStageTick = null;
+  }
+
+  /** Once a second while a stage is open: its beat, and the card's elapsed time (the run's one clock: the details line). */
+  function tickStages() {
+    let any = false;
+    const now = Date.now();
+    for (const [runId, stage] of [...stages]) {
+      const card = runCards.get(runId);
+      if (!card?.isConnected) { dropStage(runId); continue; }
+      if (!stage.live()) continue;
+      any = true;
+      stage.tick(now);
+      if (card._usageRun) tickRunCard(card, card._usageRun);
+    }
+    if (!any) stopStageTicker();
+  }
+
+  /** What a run's worker does now (its provider events: Claude and Codex workers). Kept compact, and only while the run lasts. */
+  function setRunActivity(runId, activity) {
+    if (!runId) return;
+    const next = isTerminalRunStatus(runInfo.get(runId)?.state) ? null : compactActivity(activity, t);
+    if (next) runActivity.set(runId, next); else runActivity.delete(runId);
+    while (runActivity.size > 200) runActivity.delete(runActivity.keys().next().value);
+    stages.get(runId)?.setActivity(next);
+  }
+
+  /** The row a restored card sits after: its dispatch call's rack, else its route line; null when neither is drawn. */
+  function dispatchAnchor(run) {
+    const routeId = run.route?.routeId || '';
+    let byRoute = null;
+    for (const step of stepsById.values()) {
+      if (step.type !== 'call' || step.kind !== 'runs' || step.rack.nested || !/agent_dispatch$/i.test(String(step.name))) continue;
+      if (step.result && step.result.includes(run.runId)) return step.rack.row;
+      if (!byRoute && routeId && (step.input?.route_id === routeId || step.input?.routeId === routeId)) byRoute = step.rack.row;
+    }
+    if (byRoute?.isConnected) return byRoute;
+    const line = routeId ? routeLines.get(routeId) : null;
+    return line?.el?.isConnected ? line.el : null;
+  }
+
+  const startMs = (run) => new Date(run.startedAt || run.createdAt || 0).getTime() || 0;
+
+  /**
+   * After a reload (run cards are not journaled): each run's card comes back
+   * next to the call that dispatched it (runs of one call in the order they
+   * started), live when its worker still works. A finished run with nothing
+   * in the transcript to sit by is left to the tray; one still working is
+   * added at the end. A card already drawn is only updated.
+   */
+  function restoreRuns(list) {
+    const placed = new Map(); // anchor row → the last card row put after it
+    const runs = (Array.isArray(list) ? list : []).filter(run => run?.runId).sort((a, b) => startMs(a) - startMs(b));
+    for (const run of runs) {
+      if (runCards.get(run.runId)?.isConnected) { syncRun(run); continue; }
+      const anchor = dispatchAnchor(run);
+      if (!anchor && isTerminalRunStatus(run.status)) { noteRun(run); continue; }
+      const row = upsertRunCard(run)?.closest('.asst-msg');
+      if (!row || !anchor?.isConnected || anchor === row) continue;
+      const after = placed.get(anchor);
+      (after?.isConnected ? after : anchor).after(row);
+      placed.set(anchor, row);
+    }
+  }
+
+  /** Bring a run's card into view and hand it focus (the agents tray's mini scenes and lanes). */
+  function revealRun(runId) {
+    const card = runCards.get(runId);
+    if (!card?.isConnected) return false;
+    const top = card.getBoundingClientRect().top - $msgs.getBoundingClientRect().top + $msgs.scrollTop - 16;
+    try { $msgs.scrollTo({ top: Math.max(0, top), behavior: calm() ? 'auto' : 'smooth' }); } catch { $msgs.scrollTop = Math.max(0, top); }
+    card.classList.remove('is-revealed');
+    void card.offsetWidth; // restart the highlight
+    card.classList.add('is-revealed');
+    clearTimeout(card._revealTimer);
+    card._revealTimer = setTimeout(() => card.classList.remove('is-revealed'), 1600);
+    if (!card.hasAttribute('tabindex')) card.tabIndex = -1;
+    try { card.focus({ preventScroll: true }); } catch { /* not focusable */ }
+    return true;
+  }
+
+  function dropStages() {
+    for (const runId of [...stages.keys()]) dropStage(runId);
+    stopStageTicker();
+  }
+
   function patchRunUsage(runId, tokens, fidelity) {
     const card = runCards.get(runId);
     if (!card?.isConnected || !card._usageRun) return;
@@ -2749,6 +3316,43 @@ export function createRenderer(transcriptEl, hooks = {}) {
   }
 
   // ── Route lines ──
+  /**
+   * A decided route says what the Assistant's own racks show. A direct one
+   * ("do it here") whose class has a scene lends it to the racks of the turn
+   * it runs in: this turn, or the next one when it was picked while no turn
+   * ran (a late card answer). A dispatch or chat route takes it back, and so
+   * does the end of its card (declined, expired, cancelled). The scene goes
+   * with its turn (finishTurn; in a journal or a replay, the turn's `result`) and with a new prompt (appendUser).
+   */
+  function noteDirectRoute(route, phase) {
+    const id = String(route?.routeId || '');
+    if (phase !== 'auto' && phase !== 'decided') {
+      if (directRoute && directRoute.routeId === id && (phase === 'declined' || phase === 'expired' || phase === 'cancelled')) directRoute = null;
+      return;
+    }
+    const target = route?.target && typeof route.target === 'object' ? route.target : null;
+    const cls = sceneOfClass(route?.taskClass);
+    const direct = !!target && String(target.kind || 'direct') === 'direct' && cls !== 'generic';
+    // Drawn from the journal (not a live event, not a reattach's replay of the running turn): its turn is the journal's last.
+    const journal = muted && !replayDraw;
+    // That turn is known to be over (the reattach found nothing running, e.g. the journal was drawn again after it):
+    // nothing takes its route.
+    const over = journal && !turnActive && reattachRunning === false;
+    directRoute = direct && !over ? { routeId: id, taskClass: cls, turn: turnActive ? turnSeq : null, rackAt: rackSeq, journal } : null;
+    lastDirect = direct ? { routeId: id, taskClass: cls } : null;
+  }
+
+  /**
+   * What a reattach said (asst-panel.js reattach_result). With no turn running, a route the journal left without its
+   * turn's result belonged to a turn that is over: a later turn (one the CLI starts on its own, a mailbox turn) is
+   * something else and never takes its scene. With one running, that turn is the journal's last: it takes the route
+   * when it starts (showWorking).
+   */
+  function reattached(running) {
+    reattachRunning = !!running;
+    if (!running && directRoute?.journal && directRoute.turn == null) directRoute = null;
+  }
+
   function routeLineOpts(phase) {
     return { phase, t: hooks.t, providerIcon: hooks.providerIcon, brainLabel: hooks.brainLabel, onChangeRoutes: hooks.onChangeRoutes };
   }
@@ -2894,8 +3498,8 @@ export function createRenderer(transcriptEl, hooks = {}) {
     // Under the reply once the turn has ended; a later snapshot (learning) never moves it again.
     const ended = ev.phase !== 'sent';
     if (fresh || (ended && !row.atEnd)) {
-      // Placed like any row (before "Working…"), but a status line of the harness never dismisses the hero.
-      if (working && working.parentNode === $msgs) $msgs.insertBefore(row.el, working);
+      // Placed like any row (above the open cards and before "Working…"), but a status line of the harness never dismisses the hero.
+      if (askTail.slot || (working && working.parentNode === $msgs)) askTail.insert(row.el);
       else $msgs.appendChild(row.el);
       if (ended) row.atEnd = true;
       prune();
@@ -2909,13 +3513,14 @@ export function createRenderer(transcriptEl, hooks = {}) {
   function showEmpty() {
     if (emptyEl || $msgs.querySelector(':scope > :not(.asst-working)')) return;
     emptyEl = el('div', 'asst-empty');
+    // One column, one hierarchy: the character and the heading, the greeting when there is one,
+    // the starters, then the context line (Project · Budget). No lead: the starters say what it can do.
     emptyEl.innerHTML = `
       <div class="asst-empty-mascot" aria-hidden="true"></div>
       <div class="asst-empty-title" role="heading" aria-level="2">${esc(t('assistant.empty.heading', 'What should we do?'))}</div>
-      <div class="asst-empty-body">${esc(t('assistant.empty.lead', 'I can use your Mac, look things up on the web, edit files and run commands, and remember or schedule things.'))}</div>
       <div class="asst-empty-greet"></div>
-      <div class="asst-empty-project" hidden></div>
-      <div class="asst-suggestions" role="list"></div>`;
+      <div class="asst-suggestions" role="list" aria-label="${esc(t('assistant.empty.starters', 'Starters'))}"></div>
+      <div class="asst-empty-project" role="group" aria-label="${esc(t('assistant.empty.context', 'Context'))}" hidden></div>`;
     const box = emptyEl.querySelector('.asst-empty-mascot');
     try {
       const rig = mascotLib.createMascot(box, { width: 120, height: 60 });
@@ -2923,8 +3528,8 @@ export function createRenderer(transcriptEl, hooks = {}) {
       hero.target = heroTarget(hero);
       wireEgg(hero);
     } catch { hero = null; }
-    // The project the conversation works in, under the lead: the host draws the picker (the brain
-    // picker's project field), so it and the toolbar's Working project are one control.
+    // The project the conversation works in, on the context line under the starters: the host draws
+    // the picker (the brain picker's project field), so it and the toolbar's Working project are one control.
     const projectSlot = emptyEl.querySelector('.asst-empty-project');
     let picker = null;
     try { picker = typeof hooks.mountEmptyProject === 'function' ? hooks.mountEmptyProject(projectSlot) : null; } catch { picker = null; }
@@ -2941,8 +3546,8 @@ export function createRenderer(transcriptEl, hooks = {}) {
   }
 
   /**
-   * The greeting SynaBun prepared for this return (public/shared/greeting/) takes the lead's place.
-   * The panel calls it once it knows the conversation is new: a restored one is never greeted.
+   * The greeting SynaBun prepared for this return (public/shared/greeting/) sits between the heading
+   * and the starters. The panel calls it once it knows the conversation is new: a restored one is never greeted.
    */
   function offerGreeting() {
     const owner = emptyEl;
@@ -2960,12 +3565,16 @@ export function createRenderer(transcriptEl, hooks = {}) {
     host.innerHTML = '';
     let list = [];
     try { list = typeof hooks.emptySuggestions === 'function' ? (hooks.emptySuggestions() || []) : []; } catch { list = []; }
+    let i = 0;
     for (const s of list) {
-      // glyph | seam | label: the kind's prop, and the character acts it out while the suggestion is hovered or focused.
+      // A ghost row: the kind's prop and the label (no capsule, no seam); it comes in staggered by --i,
+      // and the character acts the kind out while the suggestion is hovered or focused.
       const chip = el('button', 'asst-chip asst-suggestion');
       chip.type = 'button';
       chip.setAttribute('role', 'listitem');
       chip.dataset.suggestion = s.id || '';
+      chip.style.setProperty('--i', String(i + 1));
+      i += 1;
       const kind = s.kind || SUGGESTION_KINDS[s.id] || null;
       if (kind) {
         chip.dataset.kind = kind;
@@ -2979,10 +3588,28 @@ export function createRenderer(transcriptEl, hooks = {}) {
         chip.addEventListener('blur', () => previewHero(null));
       }
       chip.appendChild(el('span', 'asst-chip-text', s.label));
-      chip.addEventListener('click', () => hooks.onSuggestion?.(s.template, s));
+      if (s.meta) chip.appendChild(el('span', 'asst-chip-meta', s.meta));
+      chip.addEventListener('click', () => {
+        // The picked starter keeps the gold on-state while its text is the draft (setDrafting clears it);
+        // a row with an action (the Workspace tour) fills nothing, so it is never "picked".
+        if (!s.action) {
+          for (const other of host.querySelectorAll('.is-picked')) other.classList.remove('is-picked');
+          chip.classList.add('is-picked');
+        }
+        hooks.onSuggestion?.(s.template, s);
+      });
       host.appendChild(chip);
     }
     host.hidden = !list.length;
+    // The context line comes in after the last starter.
+    emptyEl.querySelector('.asst-empty-project')?.style.setProperty('--i', String(list.length + 1));
+  }
+
+  /** The composer holds a draft: the starters recede (the picked one stays lit) until it is cleared. */
+  function setDrafting(on) {
+    if (!emptyEl) return;
+    emptyEl.classList.toggle('is-drafting', !!on);
+    if (!on) for (const chip of emptyEl.querySelectorAll('.asst-suggestion.is-picked')) chip.classList.remove('is-picked');
   }
 
   /** The empty state's character tries a suggestion on (null: back to idle); never over a pose the director holds. */
@@ -3187,6 +3814,7 @@ export function createRenderer(transcriptEl, hooks = {}) {
           const content = Array.isArray(ev.message.content) ? ev.message.content : [];
           lastErrorText = typeof ev.message.content === 'string' ? ev.message.content.trim()
             : content.filter((b) => b?.type === 'text').map((b) => b.text).join('\n').trim();
+          if (!parentId) offerLimitWait(lastErrorText, { brainError: true });
         }
         return true;
       }
@@ -3212,6 +3840,10 @@ export function createRenderer(transcriptEl, hooks = {}) {
         if (!parentId && !muted) grace = newestStage();
         if (grace) grace.holdUntil = Infinity;
         if (!parentId) endBursts(rootScope);
+        // A journal's or a replay's turn ended here (live, finishTurn ends it): so did the route it ran.
+        if (!parentId && muted) directRoute = null;
+        // A turn that ended well: its last message's options in prose become items (no block of its own).
+        if (!parentId && !ev.is_error && !String(ev.subtype || '').startsWith('error')) guessOffer();
         hooks.onResult?.(ev);
         if (errorText && errorText !== lastErrorText) appendError(errorText);
         if (!parentId) { lastErrorText = ''; rootScope.kept = null; releaseGrace(); }
@@ -3270,11 +3902,16 @@ export function createRenderer(transcriptEl, hooks = {}) {
         return true;
       case 'synabun.route': {
         const phase = ev.phase || 'decided';
+        noteDirectRoute(ev.route, phase); // the journal's too: a conversation opened again keeps the route of its last turn
         if (hooks.onRouteEvent?.(ev)) return true; // an open card represents it
         if (phase === 'card' && silent) return true; // replayed card: the pending control re-sends it
         upsertRouteLine(ev.route || {}, phase);
         return true;
       }
+      case 'synabun.continuation':
+        // A "do it here" pick on another model runs as a turn of its own: the route it approved goes on there.
+        if (lastDirect) directRoute = { ...lastDirect, turn: turnActive ? turnSeq : null, rackAt: rackSeq };
+        return true;
       case 'synabun.clarify':
         // The card itself arrives as a control_request; its outcome is a line (the panel's card shows it live).
         if (ev.phase !== 'card') appendStatus(clarifyLine(ev), 'info');
@@ -3313,14 +3950,19 @@ export function createRenderer(transcriptEl, hooks = {}) {
   /**
    * The turn ended. `holdMs`: the panel plays a one-shot (success, error) on
    * the character on screen, so its stage stays up that long before it folds.
+   * `guess`: the turn ended well, so options its last message offers in prose may become items.
    */
-  function finishTurn({ holdMs = 0 } = {}) {
+  function finishTurn({ holdMs = 0, guess = true } = {}) {
     flushStream(rootScope);
+    sealStreamRow(rootScope);
     if (rootScope.stream?.row) rootScope.stream.row.classList.remove('streaming');
+    // The `result` usually guessed already; a turn that ended well without one gets it here (never a stopped or failed one).
+    if (guess && !turn.errored) guessOffer();
     for (const scope of scopes.values()) flushStream(scope);
     closeStreamThinks();
     hideWorking();
     turnActive = false;
+    if (directRoute && directRoute.turn === turnSeq) directRoute = null; // its turn is over
     const stage = grace || newestStage();
     grace = null;
     const hold = holdMs > 0 && !calm();
@@ -3356,11 +3998,14 @@ export function createRenderer(transcriptEl, hooks = {}) {
     }
     if (failed) console.warn(`[assistant] ${failed} of ${list.length} transcript entries could not be drawn`, firstError);
     flushStream(rootScope);
+    sealStreamRow(rootScope);
     if (rootScope.stream?.row) rootScope.stream.row.classList.remove('streaming');
     for (const scope of scopes.values()) flushStream(scope);
     hideWorking();
     turnActive = false;
     for (const rack of [...racks]) renderRack(rack);
+    // Drawn quietly: a card the history leaves open (nobody answered it yet) comes to life now.
+    mascotChanged();
     scrollEnd(true);
   }
 
@@ -3402,6 +4047,14 @@ export function createRenderer(transcriptEl, hooks = {}) {
     if (rootScope.stream?.mdTimer) clearTimeout(rootScope.stream.mdTimer);
     if (rootScope.stream?.thinkTimer) clearTimeout(rootScope.stream.thinkTimer);
     scopes.clear();
+    dropStages();
+    limitDock.clear();
+    for (const offer of offers) { try { offer.wait?.destroy(); } catch { /* gone */ } }
+    offers.clear();
+    dropAsks();
+    lastTextRow = null;
+    for (const card of runCards.values()) { try { card._limitWait?.destroy(); } catch { /* gone */ } }
+    runActivity.clear();
     runCards.clear();
     routeLines.clear();
     autoRows.clear();
@@ -3417,6 +4070,8 @@ export function createRenderer(transcriptEl, hooks = {}) {
     dropHero();
     grace = null;
     turn = { calls: 0, last: null, errored: false, answerRow: null };
+    directRoute = null;
+    lastDirect = null;
     mcpWarned.clear();
     seen.clear();
     snapshot = null;
@@ -3430,7 +4085,7 @@ export function createRenderer(transcriptEl, hooks = {}) {
   return {
     el: $msgs,
     clear,
-    destroy: () => { hideWorking(); dropHero(); dropAll(); },
+    destroy: () => { clear(); limitDock.destroy(); },
     appendUser,
     appendAssistantMarkdown,
     appendStatus,
@@ -3441,6 +4096,16 @@ export function createRenderer(transcriptEl, hooks = {}) {
     appendMemorySaved,
     appendMailbox,
     upsertRunCard,
+    /** A run update that never adds a card (the tray's sources): the card, its stage and the route line follow it. */
+    syncRun,
+    /** After a reload: these runs' cards again, next to the calls that dispatched them (see restoreRuns). */
+    restoreRuns,
+    /** What a run's worker does now: its stage's scene and step follow it. */
+    setRunActivity,
+    /** Scroll a run's card into view and focus it. */
+    revealRun,
+    /** For tests and devtools: a run card's stage ({ open, phase, scene, final, pose, step, label }) or null. */
+    stageOf: (runId) => stages.get(runId)?.state() || null,
     patchRunUsage,
     upsertRouteLine,
     registerRouteLine,
@@ -3453,10 +4118,14 @@ export function createRenderer(transcriptEl, hooks = {}) {
     claimEvent,
     /** A reattach's buffered packets minus what is on screen (see planReplay). */
     planReplay,
+    /** What the reattach said (a turn runs or not): a route the journal left open goes only to that turn (see reattached). */
+    reattached,
     /** Forget what was drawn (a brain switch starts a new id space). */
     forgetSeen: () => { seen.clear(); snapshot = null; },
     /** A card waits on the user: `toolUseId` names the call it holds (the newest live stage when unknown); false clears it. */
     setWaiting,
+    /** The session's usage-limit report changed: this turn's waiting card counts to its reset time. */
+    noteLimit,
     finishTurn,
     renderTranscript,
     showWorking,
@@ -3465,6 +4134,7 @@ export function createRenderer(transcriptEl, hooks = {}) {
     showEmpty,
     offerGreeting,
     refreshEmpty: renderSuggestions,
+    setDrafting,
     isEmpty: () => !!emptyEl,
     scrollEnd,
     isNearBottom,