@agi-fans/dsh-tui 0.20.0 → 0.22.0

package/lib/views/transcript-render.js

@@ -6,30 +6,42 @@
  */
 import { leadingSlashCommandNameRange, renderAutocomplete, slashInlineHint } from "./autocomplete.js";
 import { HISTORY_SEARCH_MAX_VISIBLE, renderHistorySearch } from "./history-search.js";
-import { renderEditor, renderFramedBlock, renderWelcome, renderWorking } from "../chrome/box.js";
+import { DEEP_DRIVING_LABEL, renderEditor, renderFramedBlock, renderWelcome } from "../chrome/box.js";
 import { renderMarkdown } from "../chrome/markdown.js";
-import { renderCopySelector } from "./copy-selector.js";
 import { renderSettings } from "./settings-list.js";
 import { renderTrajectory } from "./trajectory.js";
-import { renderAgentHub } from "./agent-hub.js";
-import { renderImagePreviewPage, renderPlanReviewPage, renderPromptSelector, renderPromptSelectorPage, renderPromptTreePage, } from "./prompt-selector.js";
+import { renderImagePreviewPage, renderPlanReviewPage, renderPromptSelector, renderPromptTreePage, } from "./prompt-selector.js";
 import { resolveStatusBarConfig } from "../chrome/status-config.js";
 import { renderPermissionBadge, renderStatusFooter } from "../chrome/status-line.js";
 import { createTheme, paintSurface, SPINNER, SYMBOL, BOX } from "../chrome/theme.js";
+import { highlightToolText, toolPayloadLanguage } from "../chrome/code-highlight.js";
 import { renderGoalBar } from "../chrome/goal-bar.js";
-import { padToWidth, stripAnsi, truncateToWidth, visibleWidth, wrapText } from "../chrome/width.js";
+import { padToWidth, sliceCells, stripAnsi, truncateToWidth, visibleWidth, wrapTextStable } from "../chrome/width.js";
 import { alignFileDiffs, wrapPaintedDiffRows, } from "../chrome/diff-render.js";
-import { workspaceBlockLines } from "./workspace-changes.js";
+import { workspaceBlockLines, WORKSPACE_COLLAPSED_LINES } from "./workspace-changes.js";
+import { blockFileAction } from "./file-actions.js";
 import { renderTool, toolArgSubject } from "../chrome/tool-renderers.js";
 import { toolArgsObject } from "../chrome/tool-args.js";
-import { renderToolsPanel } from "../chrome/tools-list.js";
-import { renderCommandOutput, renderCommandSeparator } from "../chrome/command-output.js";
+import { renderCommandOutput, renderCommandSeparator, renderShell } from "../chrome/command-output.js";
+import { terminalColorsKey } from "../chrome/terminal-colors.js";
 import { renderPathMentionRows } from "../chrome/path-mentions.js";
-import { blockMatchesQuery, transcriptSearchHint } from "./transcript-search.js";
+import { formatElapsed } from "../chrome/relative-time.js";
+import { maskSecrets } from "../chrome/secret-mask.js";
+import { formatOverlayHint } from "./hotkey-format.js";
+import { blockMatchesQuery, matchedRows, searchMatches, transcriptSearchHint, } from "./transcript-search.js";
+export { formatElapsed };
 import { contentToText, prettyArgs, reasoningKey, } from "./transcript-types.js";
 function isBlockPending(block) {
     return (block.kind === 'assistant' && block.streaming) || (block.kind === 'tool' && block.status === 'running');
 }
+/** The depth a frame encodes with. */
+function colorDepthOf(options) {
+    return options.colorDepth ?? 'ansi16';
+}
+/** Cache key for everything the color depth and the reported terminal colors can change. */
+function terminalKey(options) {
+    return `${colorDepthOf(options)}|${terminalColorsKey(options.terminal)}`;
+}
 function exclusiveDiffs(presentation) {
     if (presentation?.result?.card === 'diff')
         return presentation.result.diffs;
@@ -107,7 +119,9 @@ function assistantMarkdown(source, theme, width, style) {
  */
 function userBubble(text, theme, width) {
     const gutter = '  ';
-    const wrapped = renderPathMentionRows(text, Math.max(1, width - gutter.length), theme);
+    // Drawn masked, stored plain: the key still reaches the model and the copy
+    // action still returns what the reader sent, but a shared screen shows stars.
+    const wrapped = renderPathMentionRows(maskSecrets(text), Math.max(1, width - gutter.length), theme);
     const rows = ['', ...wrapped, ''];
     // The padding rows share the prompt's tint, so the prompt is one slab that
     // opens the turn. Unpainted, they were two blank rows of their own on top of
@@ -116,7 +130,8 @@ function userBubble(text, theme, width) {
     return rows.map((row, index) => {
         if (row === '')
             return paintSurface(theme, 'userMessageBg', 'userMessageText', padToWidth('', width));
-        const content = padToWidth((index === 1 ? gutter : '') + row, width);
+        const promptMark = index === 1 && theme.colors ? '\x1b]133;A\x07' : '';
+        const content = padToWidth((index === 1 ? promptMark + gutter : '') + row, width);
         return paintSurface(theme, 'userMessageBg', 'userMessageText', content);
     });
 }
@@ -275,7 +290,7 @@ function toolRowSubject(block, presentation, label) {
     return firstLineOf(verb !== '' && title.startsWith(verb + ' ') ? title.slice(verb.length + 1) : title);
 }
 /** Tool content shared by a running turn and a completed turn opened for reading. */
-function toolBlockLines(block, theme, width, mode = 'preview', detailsKey = 'Alt+O') {
+function toolBlockLines(block, theme, width, mode = 'preview', detailsKey = 'Alt+O', surface = 'toolSuccessBg') {
     const full = mode !== 'preview';
     const presentation = renderTool({
         name: block.name, arguments: prettyArgs(block.args), output: block.output,
@@ -301,8 +316,15 @@ function toolBlockLines(block, theme, width, mode = 'preview', detailsKey = 'Alt
         : call?.card === 'generic' || call?.card === 'diff' ? call.title
             : !read && presentation.title !== undefined && presentation.title !== block.name ? presentation.title
                 : `${block.name}${subject === '' ? '' : ` ${subject}`}`;
-    const head = theme.bold(theme.fg(block.status === 'error' ? 'error' : 'toolTitle', title));
-    const rows = wrapText(head, room);
+    // The command line is one ink, not a highlighted program.
+    //
+    // A command is the reader's own intent, and it has to be recognisable at a
+    // glance; syntax colouring it competes with the output below, which is the
+    // part that actually has to be read. Pi splits the two the same way: a flat
+    // bold `toolTitle` line for the call, and language highlighting for whatever
+    // the call returned.
+    const titleInk = block.status === 'error' ? 'error' : 'toolTitle';
+    const rows = wrapTextStable(theme.bold(theme.fg(titleInk, title)), room);
     let body = [];
     if (mode === 'details') {
         let input = block.args;
@@ -311,20 +333,26 @@ function toolBlockLines(block, theme, width, mode = 'preview', detailsKey = 'Alt
         }
         catch { /* Partial arguments retain their received text. */ }
         const output = presentation.output.length > 0 ? presentation.output : block.output.split('\n');
-        const outputRows = diffs === undefined
-            ? output.flatMap(line => wrapText(theme.fg(block.status === 'error' ? 'error' : 'toolOutput', line), room))
-            : wrapPaintedDiffRows(alignFileDiffs(diffs), theme, room);
+        const detailLanguage = shell ? 'bash' : toolPayloadLanguage(block.name, subject);
+        const outputRows = diffs !== undefined
+            ? wrapPaintedDiffRows(alignFileDiffs(diffs), theme, room)
+            : (detailLanguage === undefined
+                ? output.map(line => theme.fg(block.status === 'error' ? 'error' : 'toolOutput', line))
+                : highlightedLines(output, detailLanguage, theme, block.status === 'error' ? 'error' : undefined))
+                .flatMap(line => wrapTextStable(line, room));
         body = [
-            ...wrapText(theme.fg('dim', 'Input'), room),
-            ...input.split('\n').flatMap(line => wrapText(theme.fg('toolOutput', line), room)),
-            '', ...wrapText(theme.fg('dim', 'Output'), room),
+            ...wrapTextStable(theme.fg('dim', 'Input'), room),
+            // The arguments are JSON here (they were re-serialized above), so they are
+            // highlighted as JSON whatever the tool itself reads.
+            ...highlightedLines(input.split('\n'), 'json', theme, undefined, room),
+            '', ...wrapTextStable(theme.fg('dim', 'Output'), room),
             ...outputRows,
         ];
         // Keep the tool's rich presentation, but expose received text it replaced.
         if (block.output !== '' && (diffs !== undefined || block.output !== output.join('\n'))) {
-            body.push('', ...wrapText(theme.fg('dim', 'Raw result'), room));
+            body.push('', ...wrapTextStable(theme.fg('dim', 'Raw result'), room));
             for (const line of block.output.split('\n')) {
-                body.push(...wrapText(theme.fg(block.status === 'error' ? 'error' : 'toolOutput', line), room));
+                body.push(...wrapTextStable(theme.fg(block.status === 'error' ? 'error' : 'toolOutput', line), room));
             }
         }
     }
@@ -332,13 +360,21 @@ function toolBlockLines(block, theme, width, mode = 'preview', detailsKey = 'Alt
         body = wrapPaintedDiffRows(alignFileDiffs(diffs), theme, room);
     }
     else if (full || !read || block.status === 'error') {
-        const output = presentation.output.map(line => theme.fg(block.status === 'error' ? 'error' : 'toolOutput', line));
+        // One highlight pass over the whole payload. Painting line by line handed
+        // the tokenizer a fragment with no opening construct, so a second and third
+        // command row came back bare — the "only the first line is highlighted"
+        // report. A file payload uses the subject's own language.
+        const language = shell ? 'bash' : toolPayloadLanguage(block.name, subject);
+        const output = language === undefined
+            ? presentation.output.map(line => theme.fg(block.status === 'error' ? 'error' : 'toolOutput', line))
+            : highlightedLines(presentation.output, language, theme, block.status === 'error' ? 'error' : undefined);
         const input = !shell && !read && (call?.card === 'generic' || (call === undefined && presentation.title !== block.name))
-            ? presentation.input.flatMap(line => wrapText(theme.fg('toolOutput', line), room)) : [];
-        body = [...input, ...output.flatMap(line => wrapText(line, room))];
+            ? highlightedLines(presentation.input, language ?? 'text', theme, undefined, room)
+            : [];
+        body = [...input, ...output.flatMap(line => wrapTextStable(line, room))];
         // Writes carry their content in arguments before the result arrives.
         if (body.length === 0 && block.name === 'write' && typeof args?.['content'] === 'string') {
-            body = args['content'].split('\n').flatMap(line => wrapText(theme.fg('toolOutput', line), room));
+            body = highlightedLines(args['content'].split('\n'), toolPayloadLanguage('write', subject) ?? 'text', theme, undefined, room);
         }
     }
     while (body.length > 0 && stripAnsi(body[body.length - 1]).trim() === '')
@@ -351,12 +387,12 @@ function toolBlockLines(block, theme, width, mode = 'preview', detailsKey = 'Alt
         const shortcut = detailsKey === 'Disabled' ? '' : ` · ${detailsKey}: Expand`;
         const hint = theme.fg('dim', `… ${omitted} ${shell ? 'earlier' : 'more'} lines${shortcut}`);
         if (shell)
-            body.unshift(...wrapText(hint, room));
+            body.unshift(...wrapTextStable(hint, room));
         else
-            body.push(...wrapText(hint, room));
+            body.push(...wrapTextStable(hint, room));
     }
     if (!full && read && block.status !== 'error' && block.output !== '' && detailsKey !== 'Disabled') {
-        body.push(...wrapText(theme.fg('dim', `${detailsKey}: Expand result`), room));
+        body.push(...wrapTextStable(theme.fg('dim', `${detailsKey}: Expand result`), room));
     }
     if (full && block.status === 'error' && call?.card === 'diff')
         rows.push('', ...wrapPaintedDiffRows(alignFileDiffs(call.diffs), theme, room));
@@ -366,10 +402,15 @@ function toolBlockLines(block, theme, width, mode = 'preview', detailsKey = 'Alt
             rows.push(row);
     }
     if (block.status === 'error')
-        rows.push(...wrapText(theme.fg('error', 'Tool failed'), room));
-    if (block.job !== undefined)
-        rows.push(...wrapText(theme.fg(block.status === 'error' ? 'error' : 'muted', `Job ${block.job.id} · ${block.job.detail ?? block.job.status}`), room));
-    const bg = block.status === 'running' ? 'toolPendingBg' : block.status === 'error' ? 'toolErrorBg' : 'toolSuccessBg';
+        rows.push(...wrapTextStable(theme.fg('error', 'Tool failed'), room));
+    if (block.job !== undefined) {
+        // The settlement line belongs to the call, not to its output: without a gap
+        // it reads as one more line of whatever the command printed.
+        if (rows.length > 0)
+            rows.push('');
+        rows.push(...wrapTextStable(theme.fg(block.status === 'error' ? 'error' : 'muted', `Job ${block.job.id} · ${block.job.detail ?? block.job.status}`), room));
+    }
+    const bg = block.status === 'running' ? 'toolPendingBg' : block.status === 'error' ? 'toolErrorBg' : surface;
     return ['', ...rows, ''].map(row => paintSurface(theme, bg, 'toolOutput', padToWidth(' '.repeat(padding + nest) + row, width)));
 }
 function firstLineOf(text) {
@@ -380,6 +421,18 @@ function firstLineOf(text) {
     }
     return '';
 }
+/**
+ * One row standing in for a thought the reader has not opened.
+ *
+ * The first line is kept so a collapsed thought still says what it was about —
+ * a labelled placeholder would make every thought look the same.
+ */
+function reasoningSummaryRow(reasoning, theme, width) {
+    const paddingX = width > ASSISTANT_PADDING_X * 2 ? ASSISTANT_PADDING_X : 0;
+    const label = `Thinking: ${firstLineOf(reasoning)}`;
+    return assistantContentLines([theme.fg('dim', truncateToWidth(label, Math.max(1, width - paddingX * 2)))], width, paddingX)[0]
+        ?? '';
+}
 /** Thinking uses the same quiet Markdown style throughout the turn. */
 function openReasoningLines(block, theme, width, mathMode = 'auto') {
     return assistantMarkdown(block.reasoning, theme, width, { color: 'thinkingText', italic: true, mathMode });
@@ -400,27 +453,103 @@ function groupMembers(group) {
  * last row and its words are the answer painted below the run, so the run
  * paints the thought and nothing else.
  */
-function groupMemberLines(index, context, thoughtOnly = false) {
+function groupMemberLines(index, context, thoughtOnly = false, toolOrdinal = 0, 
+/** The reader opened this run, so its thoughts are laid out in full. */
+openRun = false) {
     const { blocks, options, theme, width } = context;
     const block = blocks[index];
     // Search must reveal a match even when it falls outside a tool's normal preview.
     const full = block.kind === 'tool' && (context.matches.has(index) || options.expandedTools?.has(block.callId) === true);
-    const signature = [width, options.colors, context.trueColor, context.themeName, options.mathMode, options.mermaidMode, thoughtOnly, full, options.toolDetailsKey].join('\0');
+    const surface = toolOrdinal % 2 === 0 ? 'toolSuccessBg' : 'toolAltBg';
+    const thinkingOpen = openRun
+        || (block.kind === 'assistant' && context.openedThoughts.has(reasoningKey(block)));
+    const signature = [width, options.colors, context.depth, context.themeName, terminalKey(options), options.mathMode, options.mermaidMode, thoughtOnly, full, options.toolDetailsKey, surface, thinkingOpen].join('\0');
     const cached = groupMemberCache.get(block);
     let lines;
     if (cached?.signature === signature)
         lines = cached.lines;
     else {
-        lines = block.kind === 'tool' ? toolBlockLines(block, theme, width, full ? 'details' : 'preview', options.toolDetailsKey)
-            : block.kind === 'assistant' ? thoughtOnly ? openReasoningLines(block, theme, width, options.mathMode)
-                : blockLines(block, theme, width, { mathMode: options.mathMode ?? 'auto', mermaidMode: options.mermaidMode ?? 'auto' })
+        lines = block.kind === 'tool' ? toolBlockLines(block, theme, width, full ? 'details' : 'preview', options.toolDetailsKey, surface)
+            : block.kind === 'assistant' ? thoughtOnly
+                ? (options.hideThinking !== true || thinkingOpen
+                    ? openReasoningLines(block, theme, width, options.mathMode)
+                    : [reasoningSummaryRow(block.reasoning, theme, width)])
+                : blockLines(block, theme, width, {
+                    mathMode: options.mathMode ?? 'auto',
+                    mermaidMode: options.mermaidMode ?? 'auto',
+                    hideThinking: options.hideThinking === true,
+                    thinkingOpen,
+                })
                 : block.kind === 'notice' ? blockLines(block, theme, width) : [];
         groupMemberCache.set(block, { signature, lines });
     }
-    const search = options.transcriptSearch;
-    return search !== undefined && context.matches.has(index)
-        ? lines.map(line => blockMatchesQuery(stripAnsi(line), search.query) ? theme.inverse(line) : line)
-        : [...lines];
+    return [...paintSearch(lines, index, context.occurrences, theme)];
+}
+/**
+ * Paint the query occurrences of one block onto its rows.
+ *
+ * One painter for both the run path and the block path: painting the row instead
+ * of the occurrence was the original defect, and having two copies of the fix
+ * would let one of them regress back to it.
+ */
+function paintSearch(lines, block, occurrences, theme) {
+    const spansByRow = matchedRows(occurrences, block);
+    if (spansByRow.size === 0)
+        return lines;
+    return lines.map((line, row) => {
+        const spans = spansByRow.get(row);
+        return spans === undefined ? line : inverseSpans(line, spans, theme);
+    });
+}
+/**
+ * Invert the given display-cell spans of one rendered row.
+ *
+ * `sliceCells` is what makes this safe for CJK, emoji, and combining marks: the
+ * spans are in display cells, which is the only measure the reader's eye agrees
+ * with. Offsets computed from string indexes land mid-glyph and shear the row.
+ */
+function inverseSpans(line, spans, theme) {
+    const plain = stripAnsi(line);
+    const total = visibleWidth(plain);
+    // Merge overlapping spans, then walk them left to right so no cell is painted
+    // twice and the untouched gaps keep their original styling.
+    const ordered = [...spans].sort((left, right) => left.start - right.start);
+    const merged = [];
+    for (const span of ordered) {
+        const last = merged.at(-1);
+        const end = span.start + span.width;
+        if (last !== undefined && span.start <= last.start + last.width) {
+            last.width = Math.max(last.width, end - last.start);
+        }
+        else
+            merged.push({ start: span.start, width: span.width });
+    }
+    let out = '';
+    let at = 0;
+    for (const span of merged) {
+        const start = Math.max(at, Math.min(span.start, total));
+        const end = Math.min(total, Math.max(start, span.start + span.width));
+        if (start > at)
+            out += sliceCells(line, at, start - at);
+        if (end > start)
+            out += theme.inverse(sliceCells(line, start, end - start));
+        at = end;
+    }
+    if (at < total)
+        out += sliceCells(line, at, total - at);
+    return out;
+}
+/**
+ * Highlight a payload once, then wrap it.
+ *
+ * Every caller goes through this so no tool view can quietly fall back to
+ * per-line painting — the shape that produced a single highlighted row above a
+ * block of plain ones.
+ */
+function highlightedLines(lines, language, theme, errorInk, width) {
+    const highlighted = highlightToolText(lines.join('\n'), language, theme);
+    const rows = highlighted.map(line => errorInk === undefined ? line : theme.fg(errorInk, line));
+    return width === undefined ? rows : rows.flatMap(line => wrapTextStable(line, width));
 }
 /** A notice that reports on the run's work, as one of its rows. */
 function processNoticeLine(block, theme, width, indent) {
@@ -439,25 +568,21 @@ const groupMemberCache = new WeakMap();
 function processGroupBody(group, context) {
     const lines = [];
     const offsets = new Map();
+    const spans = [];
     for (const index of groupMembers(group)) {
-        const rows = groupMemberLines(index, context, index === group.answer && group.tookThought);
+        const isTool = context.blocks[index]?.kind === 'tool';
+        const rows = groupMemberLines(index, context, index === group.answer && group.tookThought, context.toolCards.count, true);
+        if (isTool && rows.length > 0)
+            context.toolCards.count += 1;
         if (rows.length > 0 && lines.length > 0)
             lines.push('');
         offsets.set(index, lines.length);
+        if (context.blocks[index]?.kind === 'tool')
+            spans.push({ index, start: lines.length, end: lines.length + rows.length });
         for (const row of rows)
             lines.push(row);
     }
-    return { lines, offsets };
-}
-/** A settled turn's length, the way a person would say it. */
-export function formatElapsed(ms) {
-    const seconds = Math.max(0, Math.round(ms / 1000));
-    if (seconds < 60)
-        return `${seconds}s`;
-    const minutes = Math.floor(seconds / 60);
-    if (minutes < 60)
-        return `${minutes}m ${seconds % 60}s`;
-    return `${Math.floor(minutes / 60)}h ${minutes % 60}m`;
+    return { lines, offsets, spans };
 }
 /** A completed turn's duration and any failures remain visible when folded. */
 function processGroupHeader(group, theme, width, elapsed, expandKey = 'Ctrl+O') {
@@ -475,13 +600,16 @@ function processGroupHeader(group, theme, width, elapsed, expandKey = 'Ctrl+O')
  * to direct callers; turn inspection uses previews. omitReasoning excludes
  * thinking already drawn by a run.
  */
-export function blockLines(block, theme, width, { toolsExpanded = false, omitReasoning = false, toolDetailsKey = 'Alt+O', mathMode = 'auto', mermaidMode = 'auto' } = {}) {
+export function blockLines(block, theme, width, { toolsExpanded = false, omitReasoning = false, toolDetailsKey = 'Alt+O', mathMode = 'auto', mermaidMode = 'auto', hideThinking = false, thinkingOpen = false, expandedOutput = false, outputExpandKey = 'Ctrl+O' } = {}) {
     if (block.kind === 'user')
         return userBubble(block.text, theme, width);
     if (block.kind === 'assistant') {
         const lines = [];
         if (block.reasoning !== '' && !omitReasoning) {
-            lines.push(...openReasoningLines(block, theme, width, mathMode));
+            const collapsed = hideThinking && !thinkingOpen;
+            lines.push(...(collapsed
+                ? [reasoningSummaryRow(block.reasoning, theme, width)]
+                : openReasoningLines(block, theme, width, mathMode)));
             if (block.text !== '')
                 lines.push('');
         }
@@ -501,12 +629,30 @@ export function blockLines(block, theme, width, { toolsExpanded = false, omitRea
     if (block.kind === 'tool') {
         return toolBlockLines(block, theme, width, toolsExpanded ? 'full' : 'preview', toolDetailsKey);
     }
-    if (block.kind === 'toolCatalog')
-        return renderToolsPanel(block.tools, theme, width, toolsExpanded);
     if (block.kind === 'workspace')
         return workspaceBlockLines(block, theme, width, toolsExpanded);
-    if (block.kind === 'commandOutput')
-        return renderCommandOutput(block.command, block.text, theme, width);
+    if (block.kind === 'commandOutput') {
+        return renderCommandOutput(block.command, block.text, theme, width, {
+            ...(block.surface === undefined ? {} : { surface: block.surface }),
+            expanded: expandedOutput,
+            ...(expandedOutput ? {} : { expandKey: outputExpandKey }),
+        });
+    }
+    if (block.kind === 'aside') {
+        // One line when closed, the whole answer when opened — the same fold a long
+        // command result uses, so there is one expand gesture in the product.
+        const head = ' ' + theme.bold(theme.fg('accent', '/btw')) + ' ' + theme.fg('text', block.question);
+        if (expandedOutput) {
+            return [
+                truncateToWidth(head, width),
+                '',
+                ...renderMarkdown(block.text, theme, Math.max(1, width - 2)).map(line => '  ' + line),
+            ];
+        }
+        return [truncateToWidth(head + theme.fg('dim', ` · ${outputExpandKey}: Expand`), width)];
+    }
+    if (block.kind === 'shell')
+        return renderShell(block, theme, width);
     if (block.boundary === true)
         return [renderTranscriptBoundary(block.text, theme, width)];
     if (block.process !== undefined && block.framed !== true)
@@ -515,11 +661,11 @@ export function blockLines(block, theme, width, { toolsExpanded = false, omitRea
         const prefix = '  ';
         const continuation = ' '.repeat(visibleWidth(prefix));
         const tone = block.level === 'error' ? 'error' : block.level === 'warning' ? 'warning' : 'dim';
-        return wrapText(block.text, Math.max(1, width - visibleWidth(prefix))).map((line, index) => truncateToWidth((index === 0 ? prefix : continuation) + theme.fg(tone, line), width));
+        return wrapTextStable(block.text, Math.max(1, width - visibleWidth(prefix))).map((line, index) => truncateToWidth((index === 0 ? prefix : continuation) + theme.fg(tone, line), width));
     }
     const state = block.level === 'error' ? 'error' : block.level === 'warning' ? 'warning' : 'info';
     const paint = (text) => theme.fg(block.level === 'error' ? 'error' : block.level === 'warning' ? 'warning' : 'dim', text);
-    const wrapped = wrapText(block.text, Math.max(1, width - 4));
+    const wrapped = wrapTextStable(block.text, Math.max(1, width - 4));
     const title = paint(wrapped[0] ?? '');
     return renderFramedBlock({
         header: title,
@@ -563,6 +709,55 @@ function renderTranscriptBoundary(label, theme, width) {
     const left = Math.floor(room / 2);
     return rule.repeat(left) + ' ' + labelText + ' ' + rule.repeat(room - left);
 }
+/**
+ * Rendered rows of every block, as the search index sees them.
+ *
+ * The searchable text used to be the block's source (`blockSearchText`), which is
+ * not what the reader is looking at: Markdown source carries `**` and backticks,
+ * a table is one source line but several rendered rows, and a folded run hides
+ * rows that the source still contains. Matching rendered rows is the only way the
+ * reported hit and the painted span agree.
+ *
+ * Plain text only — the caller strips SGR — and cached on the block array, which
+ * is replaced rather than mutated whenever the transcript changes.
+ */
+const renderedBlockCache = new WeakMap();
+export function renderedBlocks(state, options) {
+    const theme = createTheme(options.colors === true, options.colorDepth ?? 'truecolor', options.themeName ?? 'dark', options.terminal);
+    const key = [
+        options.width,
+        options.toolsExpanded === true,
+        options.hideThinking === true,
+        [...(options.expandedTools ?? [])].sort().join(','),
+        [...(options.expandedReasoning ?? [])].sort().join(','),
+        [...(options.openedGroups ?? [])].sort().join(','),
+    ].join('\u0000');
+    const cached = renderedBlockCache.get(state.blocks)?.get(key);
+    if (cached !== undefined)
+        return cached;
+    const blocks = state.blocks.map((block, index) => ({
+        block: index,
+        // The source text is the fallback for a block kind the painter does not lay
+        // out as rows of its own; matching something is better than matching nothing.
+        lines: renderedRows(block, theme, options).map(stripAnsi),
+    }));
+    const byKey = new Map(renderedBlockCache.get(state.blocks) ?? []);
+    byKey.set(key, blocks);
+    renderedBlockCache.set(state.blocks, byKey);
+    return blocks;
+}
+/** Plain rows one block contributes, without the search highlighting applied. */
+function renderedRows(block, theme, options) {
+    if (block.kind === 'assistant') {
+        const thinkingOpen = options.hideThinking !== true || options.expandedReasoning?.has(reasoningKey(block)) === true;
+        return thinkingOpen && block.reasoning !== ''
+            ? openReasoningLines(block, theme, options.width, options.mathMode)
+            : assistantMarkdown(block.text, theme, options.width, {
+                ...(options.mathMode === undefined ? {} : { mathMode: options.mathMode }),
+            });
+    }
+    return blockSearchText(block).split('\n');
+}
 /** Plain text of one block, used by transcript search and match painting. */
 export function blockSearchText(block) {
     if (block.kind === 'assistant') {
@@ -570,14 +765,13 @@ export function blockSearchText(block) {
     }
     if (block.kind === 'tool')
         return `${block.args}\n${block.output}${block.job === undefined ? '' : `\n${block.job.id} ${block.job.status} ${block.job.detail ?? ''}`}`;
-    if (block.kind === 'toolCatalog') {
-        return block.tools.map(tool => `${tool.name} ${tool.description}`).join('\n');
-    }
     if (block.kind === 'workspace') {
         // Only the served file paths are searchable; a turn whose summary the
         // host no longer holds contributes no path text.
         return block.summary?.files.map(file => file.display).join('\n') ?? `turn ${block.turn}`;
     }
+    if (block.kind === 'shell')
+        return `${block.command}\n${block.output}`;
     return block.text;
 }
 function fitFrame(lines, width, stablePrefix = 0) {
@@ -601,35 +795,53 @@ function fitFrame(lines, width, stablePrefix = 0) {
 const transcriptBodyCache = new WeakMap();
 /** Settled immutable blocks keep their expensive Markdown/tool layout. */
 const blockLinesCache = new WeakMap();
-function cachedBlockLines(block, options, theme, themeName, trueColor, expanded, omitReasoning = false) {
+function cachedBlockLines(block, options, theme, themeName, depth, expanded, omitReasoning = false) {
     const cached = blockLinesCache.get(block);
     if (cached !== undefined
         && cached.width === options.width
         && cached.colors === options.colors
-        && cached.trueColor === trueColor
+        && cached.depth === depth
         && cached.themeName === themeName
+        && cached.terminalKey === terminalKey(options)
         && cached.expanded === expanded
         && cached.omitReasoning === omitReasoning
+        && cached.hideThinking === (options.hideThinking === true)
+        && cached.thinkingOpen === (block.kind === 'assistant' && options.expandedReasoning?.has(reasoningKey(block)) === true)
         && cached.mathMode === options.mathMode
         && cached.mermaidMode === options.mermaidMode
         && cached.toolDetailsKey === options.toolDetailsKey
-        && cached.toolDetails === (block.kind === 'tool' && options.expandedTools?.has(block.callId) === true))
+        && cached.toolDetails === (block.kind === 'tool' && options.expandedTools?.has(block.callId) === true)
+        && cached.expandedOutput === (options.expandedOutputs?.has(block) === true))
         return cached.lines;
     const toolDetails = block.kind === 'tool' && options.expandedTools?.has(block.callId) === true;
     const lines = block.kind === 'tool' && toolDetails
         ? toolBlockLines(block, theme, options.width, 'details', options.toolDetailsKey)
-        : blockLines(block, theme, options.width, { toolsExpanded: expanded, omitReasoning, toolDetailsKey: options.toolDetailsKey ?? 'Alt+O', mathMode: options.mathMode ?? 'auto', mermaidMode: options.mermaidMode ?? 'auto' });
+        : blockLines(block, theme, options.width, {
+            toolsExpanded: expanded,
+            omitReasoning,
+            toolDetailsKey: options.toolDetailsKey ?? 'Alt+O',
+            mathMode: options.mathMode ?? 'auto',
+            mermaidMode: options.mermaidMode ?? 'auto',
+            hideThinking: options.hideThinking === true,
+            thinkingOpen: block.kind === 'assistant' && options.expandedReasoning?.has(reasoningKey(block)) === true,
+            expandedOutput: options.expandedOutputs?.has(block) === true,
+            outputExpandKey: options.turnDetailsKey ?? 'Ctrl+O',
+        });
     blockLinesCache.set(block, {
         mathMode: options.mathMode,
         mermaidMode: options.mermaidMode,
         toolDetailsKey: options.toolDetailsKey,
         toolDetails,
+        expandedOutput: options.expandedOutputs?.has(block) === true,
         width: options.width,
         colors: options.colors,
-        trueColor,
+        depth,
         themeName,
+        terminalKey: terminalKey(options),
         expanded,
         omitReasoning,
+        hideThinking: options.hideThinking === true,
+        thinkingOpen: block.kind === 'assistant' && options.expandedReasoning?.has(reasoningKey(block)) === true,
         lines,
     });
     return lines;
@@ -653,7 +865,7 @@ const PROCESS_LABELS = [
     { match: /^(web_search)$/, label: 'Search web' },
     { match: /^(web_fetch)$/, label: 'Fetch page' },
     {
-        match: /^(subagent|subagent_fork|subagent_isolated|agent|ralph|workflow_run)$/, label: 'Run subagent',
+        match: /^(subagent|subagent_fork|subagent_isolated|subagent_codex|subagent_claude_code|agent|ralph|workflow_run)$/, label: 'Run subagent',
     },
     {
         match: /^(session_search|session_trace|session_event_read|session_event_search|session_event_trace)$/,
@@ -861,29 +1073,46 @@ function renderTranscriptBody(state, options, theme, spinnerFrame) {
     const toolsExpanded = options.toolsExpanded === true;
     const expandedTools = [...(options.expandedTools ?? [])].sort().join('\0');
     const expandedReasoning = [...(options.expandedReasoning ?? [])].sort().join('\0');
+    const hideThinking = options.hideThinking === true;
     const openedGroups = [...(options.openedGroups ?? [])].sort().join('\0');
+    // A command output the reader opened paints different rows, so the body cache
+    // has to see it; without this the frame is reused and the key looks dead.
+    const expandedOutputs = [...(options.expandedOutputs ?? [])].join('\u0000');
     const themeName = options.themeName ?? 'dark';
-    const trueColor = options.trueColor === true;
+    const depth = colorDepthOf(options);
     const animatedSpinnerFrame = state.blocks.some(block => block.kind === 'tool' && block.status === 'running')
         ? spinnerFrame
         : -1;
     const search = options.transcriptSearch;
-    const searchKey = search === undefined
-        ? ''
-        : `${search.query}\u0000${search.focus}\u0000${search.matches.join(',')}`;
+    const searchKey = search === undefined ? '' : `${search.query}\u0000${search.focus}`;
+    /*
+     * The fold logic asks "does this range contain a hit", which is a question about
+     * blocks; the painter asks "which cells on this row". Both are answered from one
+     * occurrence list, computed from the rendered rows so a hit cannot exist in the
+     * count and be missing from the paint.
+     *
+     * It is computed before the cache check because the composer hint reports its
+     * length: a cache hit still has to say how many matches there are.
+     */
+    const occurrences = search === undefined || search.query.trim() === ''
+        ? []
+        : searchMatches(renderedBlocks(state, options), search.query);
     const cached = transcriptBodyCache.get(state.blocks);
     if (cached !== undefined
         && cached.width === options.width
         && cached.colors === options.colors
-        && cached.trueColor === trueColor
+        && cached.depth === depth
         && cached.themeName === themeName
+        && cached.terminalKey === terminalKey(options)
         && cached.spinnerFrame === animatedSpinnerFrame
         && cached.mathMode === options.mathMode
         && cached.mermaidMode === options.mermaidMode
         && cached.toolsExpanded === toolsExpanded
         && cached.expandedTools === expandedTools
         && cached.expandedReasoning === expandedReasoning
+        && cached.hideThinking === hideThinking
         && cached.openedGroups === openedGroups
+        && cached.expandedOutputs === expandedOutputs
         && cached.toolDetailsKey === options.toolDetailsKey
         && cached.turnSpans === state.turnSpans
         && cached.turnDetailsKey === options.turnDetailsKey
@@ -892,15 +1121,33 @@ function renderTranscriptBody(state, options, theme, spinnerFrame) {
         && cached.focusBlock === options.focusBlock) {
         return {
             lines: cached.lines,
+            fileRegions: cached.fileRegions,
             blockStarts: cached.blockStarts,
             blockDrawStarts: cached.blockDrawStarts,
             foldShape: cached.foldShape,
             foldMarks: cached.foldMarks,
             liveFrom: cached.liveFrom,
+            // Recomputed on a cache hit from the same input, so the hint's count is
+            // never a stale number left over from an earlier query.
+            occurrences,
         };
     }
-    const matches = new Set(search?.matches ?? []);
+    const matches = new Set(occurrences.map(match => match.block));
     const lines = [];
+    const fileRegions = [];
+    const filesAt = (index, start, length, expanded = false) => {
+        const block = state.blocks[index];
+        if (length === 0 || blockFileAction(block) === undefined)
+            return;
+        if (block.kind === 'workspace') {
+            fileRegions.push({ block: index, start, end: start + 1 });
+            const visible = Math.min(block.summary.files.length, expanded ? length - 1 : WORKSPACE_COLLAPSED_LINES);
+            for (let file = 0; file < visible; file += 1)
+                fileRegions.push({ block: index, start: start + file + 1, end: start + file + 2, file });
+        }
+        else
+            fileRegions.push({ block: index, start, end: start + length });
+    };
     const blockStarts = [];
     // Where each block is drawn, apart from the offsets above: a search can aim a
     // block's offset at the thought it also carries, but its drawn span does not
@@ -960,10 +1207,16 @@ function renderTranscriptBody(state, options, theme, spinnerFrame) {
     const foldMarks = [];
     if (toolsExpanded)
         foldMarks.push({ key: 'all', row: 0 });
+    // Collapsing or revealing every thought reshapes from the top, like the
+    // global tool switch above, so it reports the same kind of mark.
+    if (hideThinking)
+        foldMarks.push({ key: 'thinking', row: 0 });
     let liveFrom;
     const context = {
-        blocks: state.blocks, theme, themeName, trueColor, width: options.width,
-        matches, options: { ...options, expandedReasoning: openedThoughts },
+        blocks: state.blocks, theme, themeName, depth, width: options.width,
+        matches, occurrences, options: { ...options, expandedReasoning: openedThoughts },
+        openedThoughts,
+        toolCards: { count: 0 },
     };
     const compactProcessRow = (block) => {
         if (block?.kind === 'notice')
@@ -993,21 +1246,34 @@ function renderTranscriptBody(state, options, theme, spinnerFrame) {
                 lines.push('');
             const headerRow = lines.length;
             const opened = openGroups.has(groupIndex);
-            const shape = group.live ? 'live' : opened ? 'open' : 'folded';
+            /**
+             * A run the reader stopped keeps the rows it had while it ran.
+             *
+             * Folding it at the moment of the interrupt would take those rows out from
+             * under the reader, and — because a fold shortens the document — leave the
+             * viewport starting inside rows already committed to native history, which
+             * cannot be repainted. It stays open until the next submission, which is
+             * the point at which the reader has moved on.
+             */
+            const stopped = group.turn !== undefined && (state.stoppedTurns ?? []).includes(group.turn);
+            const shown = opened || stopped;
+            const shape = group.live ? 'live' : shown ? 'open' : 'folded';
             foldMarks.push({ key: `run:${group.key}:${shape}`, row: headerRow });
             if (group.live)
                 liveFrom ??= headerRow;
             // A live run has no header: it becomes a group when its turn ends.
-            if (!group.live && !opened) {
+            if (!group.live && !shown) {
                 lines.push(...processGroupHeader(group, theme, options.width, elapsedOf(groupIndex), options.turnDetailsKey));
             }
             const bodyRow = lines.length;
             let offsets = new Map();
-            if (group.live || opened) {
+            if (group.live || shown) {
                 const body = processGroupBody(group, context);
                 for (const line of body.lines)
                     lines.push(line);
                 offsets = body.offsets;
+                for (const span of body.spans)
+                    filesAt(span.index, bodyRow + span.start, span.end - span.start);
             }
             else {
                 for (let at = group.start; at < (group.answer ?? group.until); at += 1) {
@@ -1016,7 +1282,9 @@ function renderTranscriptBody(state, options, theme, spinnerFrame) {
                         && !(member.kind === 'notice' && member.level === 'error'))
                         continue;
                     offsets.set(at, lines.length - bodyRow);
-                    lines.push(...(member.kind === 'tool' ? toolRowLine(member, theme, options.width, spinnerFrame) : groupMemberLines(at, context)));
+                    const rows = member.kind === 'tool' ? toolRowLine(member, theme, options.width, spinnerFrame) : groupMemberLines(at, context);
+                    filesAt(at, lines.length, rows.length);
+                    lines.push(...rows);
                 }
             }
             // The turn's answer, painted as a row of its own between the run's work
@@ -1045,10 +1313,8 @@ function renderTranscriptBody(state, options, theme, spinnerFrame) {
                 blockDrawStarts[group.answer] = lines.length;
                 offsets.set(group.answer, lines.length - bodyRow);
                 const answer = state.blocks[group.answer];
-                const rendered = cachedBlockLines(answer, options, theme, themeName, trueColor, toolsExpanded, absorbed.has(group.answer));
-                for (const line of (search !== undefined && matches.has(group.answer)
-                    ? rendered.map(row => blockMatchesQuery(stripAnsi(row), search.query) ? theme.inverse(row) : row)
-                    : rendered))
+                const rendered = cachedBlockLines(answer, options, theme, themeName, depth, toolsExpanded, absorbed.has(group.answer));
+                for (const line of paintSearch(rendered, group.answer, occurrences, theme))
                     lines.push(line);
                 if (thoughtHit && thoughtRow !== undefined)
                     blockStarts[group.answer] = bodyRow + thoughtRow;
@@ -1074,7 +1340,8 @@ function renderTranscriptBody(state, options, theme, spinnerFrame) {
                     offsets.set(at, lines.length - bodyRow);
                     const rows = !group.live && !opened && trailing?.kind === 'tool'
                         ? toolRowLine(trailing, theme, options.width, spinnerFrame)
-                        : groupMemberLines(at, context);
+                        : groupMemberLines(at, context, false, 0, group.live || opened);
+                    filesAt(at, lines.length, rows.length);
                     for (const line of rows)
                         lines.push(line);
                 }
@@ -1135,10 +1402,9 @@ function renderTranscriptBody(state, options, theme, spinnerFrame) {
             liveFrom ??= lines.length;
         const expanded = (block.kind === 'workspace' && groups.some((group, at) => group.turn === block.turn && openGroups.has(at))) || matches.has(index) || toolsExpanded
             || (block.kind === 'tool' && options.expandedTools?.has(block.callId) === true);
-        const rendered = cachedBlockLines(block, options, theme, themeName, trueColor, expanded, absorbed.has(index));
-        lines.push(...(search !== undefined && matches.has(index)
-            ? rendered.map(line => blockMatchesQuery(stripAnsi(line), search.query) ? theme.inverse(line) : line)
-            : rendered));
+        const rendered = cachedBlockLines(block, options, theme, themeName, depth, expanded, absorbed.has(index));
+        filesAt(index, lines.length, rendered.length, expanded);
+        lines.push(...paintSearch(rendered, index, occurrences, theme));
         blockDrawStarts[index] = blockStarts[index];
         previous = block;
     }
@@ -1146,6 +1412,7 @@ function renderTranscriptBody(state, options, theme, spinnerFrame) {
     // this; opening, folding, or a run settling at turn end do.
     const foldShape = foldMarks.map(mark => mark.key).join('\u0001');
     transcriptBodyCache.set(state.blocks, {
+        fileRegions,
         mathMode: options.mathMode,
         mermaidMode: options.mermaidMode,
         toolDetailsKey: options.toolDetailsKey,
@@ -1153,13 +1420,16 @@ function renderTranscriptBody(state, options, theme, spinnerFrame) {
         blockDrawStarts,
         width: options.width,
         colors: options.colors,
-        trueColor,
+        depth,
         themeName,
+        terminalKey: terminalKey(options),
         spinnerFrame: animatedSpinnerFrame,
         toolsExpanded,
         expandedTools,
         expandedReasoning,
+        hideThinking,
         openedGroups,
+        expandedOutputs,
         searchKey,
         turnSpans: state.turnSpans,
         status: state.status,
@@ -1170,11 +1440,9 @@ function renderTranscriptBody(state, options, theme, spinnerFrame) {
         lines,
         blockStarts,
     });
-    return { lines, blockStarts, blockDrawStarts, foldShape, foldMarks, liveFrom };
+    return { lines, blockStarts, blockDrawStarts, fileRegions, foldShape, foldMarks, liveFrom, occurrences };
 }
 function commandSurfaceName(block) {
-    if (block?.kind === 'toolCatalog')
-        return 'tools';
     if (block?.kind === 'commandOutput')
         return block.command;
     return undefined;
@@ -1353,6 +1621,39 @@ function todoPreviewStart(todos) {
     const pending = todos.findIndex(todo => todo.status === 'pending');
     return pending >= 0 ? pending : Math.max(0, todos.length - TODO_PREVIEW);
 }
+/** How many rows the pane may take before it starts scrolling. */
+const ASIDE_MAX_ROWS = 12;
+/**
+ * The side-conversation pane: a rule, the question, the answer, and how to leave.
+ *
+ * A pane rather than a transcript block because the exchange belongs to a
+ * conversation that is not this one: the reader is working in the transcript, and
+ * an answer from elsewhere should not become a row of it. Docked above the
+ * composer, `Esc` closes it and the session looks exactly as it did.
+ */
+export function renderAside(panel, theme, width, available = ASIDE_MAX_ROWS) {
+    if (width <= 0)
+        return [];
+    const rule = theme.fg('border', '─'.repeat(width));
+    const head = ' ' + theme.bold(theme.fg('accent', '/btw')) + ' ' + theme.fg('text', panel.question);
+    const body = panel.text === ''
+        ? [theme.fg('dim', panel.status === 'running' ? '…' : 'No answer.')]
+        : renderMarkdown(panel.text, theme, Math.max(1, width - 2));
+    const detail = panel.detail === undefined || panel.detail === ''
+        ? []
+        : ['', theme.fg('dim', panel.detail)];
+    const hint = ' ' + theme.fg('dim', formatOverlayHint([{ keys: '↑↓', action: 'scroll' }, { keys: '/copy', action: 'copy' }, { keys: 'Esc', action: 'close' }]));
+    // Two rules, the question, its blank line, and the hint are always drawn. What
+    // is left is the answer's window, so the pane never grows past its cap.
+    const cap = Math.max(6, Math.min(ASIDE_MAX_ROWS, available));
+    const windowRows = Math.max(1, cap - 4);
+    const content = [...body, ...detail];
+    const maxStart = Math.max(0, content.length - windowRows);
+    const first = Math.max(0, Math.min(panel.scroll, maxStart));
+    const rows = [head, '', ...content.slice(first, first + windowRows)];
+    return [rule, ...rows.map(line => '  ' + line).map(line => truncateToWidth(line, width)),
+        truncateToWidth(hint, width), rule];
+}
 /** Compact, unframed Todo tree placed above queued messages. */
 export function renderTodos(todos, theme, width) {
     if (todos.length === 0 || width <= 0)
@@ -1382,7 +1683,8 @@ export function renderTodos(todos, theme, width) {
         })];
     return lines.map(line => truncateToWidth(line, width));
 }
-function subagentPreviewStart(agents) {
+/** First row the bar shows; the provider starts its selection here. */
+export function subagentPreviewStart(agents) {
     if (agents.length <= SUBAGENT_PREVIEW)
         return 0;
     const active = agents.findIndex(agent => agent.phase === 'running' || agent.phase === 'starting');
@@ -1406,12 +1708,24 @@ function subagentPhaseGlyph(phase, theme, spinnerFrame) {
 const SUBAGENT_PHASE_LABELS = {
     starting: 'Starting', running: 'Running', waiting: 'Waiting', completed: 'Done', error: 'Failed',
 };
+/** How long a child has been (or was) running, as one label. */
+export function formatAgentElapsed(agent, now = Date.now()) {
+    if (agent.startedAt === undefined)
+        return '—';
+    const live = agent.phase === 'running' || agent.phase === 'starting';
+    const ms = Math.max(0, (live ? now : agent.updatedAt ?? now) - agent.startedAt);
+    if (ms < 1_000)
+        return `${Math.round(ms)}ms`;
+    if (ms < 60_000)
+        return `${(ms / 1_000).toFixed(ms < 10_000 ? 1 : 0)}s`;
+    return `${Math.floor(ms / 60_000)}m${String(Math.floor((ms % 60_000) / 1_000)).padStart(2, '0')}s`;
+}
 function subagentRowText(agent) {
     const indent = agent.depth > 1 ? '  '.repeat(agent.depth - 1) : '';
     return `${indent}${agent.label} · ${SUBAGENT_PHASE_LABELS[agent.phase]}`;
 }
 /** Compact, unframed descendant-subagent tree placed above Todos. */
-export function renderSubagents(roster, theme, width, spinnerFrame = 0, inspectedId, launcherFocused = false) {
+export function renderSubagents(roster, theme, width, spinnerFrame = 0, inspectedId, selected) {
     const agents = roster?.agents ?? [];
     if (agents.length === 0 || width <= 0)
         return [];
@@ -1425,10 +1739,16 @@ export function renderSubagents(roster, theme, width, spinnerFrame = 0, inspecte
         done === 0 ? undefined : `${done} done`,
         failed === 0 ? undefined : `${failed} failed`,
     ].filter((part) => part !== undefined);
+    const pointing = selected !== undefined;
     const headerBody = theme.bold(theme.fg('accent', 'Agents'))
         + (counts.length === 0 ? '' : theme.fg('dim', ` · ${counts.join(' · ')}`))
-        + theme.fg('dim', launcherFocused ? ' · Enter open · Esc return' : ' · ↓ select · Alt+A open');
-    const header = '  ' + (launcherFocused ? theme.inverse(headerBody) : headerBody);
+        // Short enough to survive a narrow bar: the counts already use the width.
+        + theme.fg('dim', pointing ? ' · ↑↓ · Enter open · Esc' : ' · ↓ select');
+    const header = '  ' + (pointing ? theme.inverse(headerBody) : headerBody);
+    // A workflow run belongs to the same roster: it is the one place a reader learns
+    // that a workflow is still going, so it stays as the bar's first row rather than
+    // living in the screen this bar replaced.
+    const workflows = (roster?.workflows ?? []).map(run => '  ' + theme.fg(run.status === 'completed' ? 'success' : run.status === 'open' ? 'accent' : 'warning', `Workflow · ${run.name} · ${run.status}${run.phase === undefined ? '' : ` · ${run.phase}`}`));
     const start = subagentPreviewStart(agents);
     const end = Math.min(agents.length, start + SUBAGENT_PREVIEW);
     const rows = [
@@ -1436,11 +1756,11 @@ export function renderSubagents(roster, theme, width, spinnerFrame = 0, inspecte
         ...agents.slice(start, end),
         ...(end === agents.length ? [] : [`… ${agents.length - end} more`]),
     ];
-    const lines = [header, ...rows.map((row, index) => {
+    const lines = [header, ...workflows, ...rows.map((row, index) => {
             const branch = '  ' + theme.fg('dim', index === rows.length - 1 ? '└─' : '├─') + ' ';
             if (typeof row === 'string')
                 return branch + theme.fg('dim', row);
-            const selected = inspectedId === row.id;
+            const current = inspectedId === row.id;
             const paint = row.phase === 'completed'
                 ? (text) => theme.fg('dim', theme.strikethrough(text))
                 : row.phase === 'error'
@@ -1448,9 +1768,10 @@ export function renderSubagents(roster, theme, width, spinnerFrame = 0, inspecte
                     : row.phase === 'waiting'
                         ? (text) => theme.fg('dim', text)
                         : (text) => text;
-            const marker = selected ? theme.fg('accent', SYMBOL.cursor) + ' ' : '';
+            const pointed = index === selected;
+            const marker = current || pointed ? theme.fg('accent', SYMBOL.cursor) + ' ' : '';
             const body = marker + subagentPhaseGlyph(row.phase, theme, spinnerFrame) + ' ' + paint(subagentRowText(row));
-            return branch + (selected ? theme.bold(body) : body);
+            return branch + (current || pointed ? theme.bold(body) : body);
         })];
     return lines.map(line => truncateToWidth(line, width));
 }
@@ -1540,27 +1861,32 @@ export function renderQueuedSubmissions(submissions, theme, width, inbox = []) {
         const paintedLeft = truncateToWidth(left, width - actionWidth - 2);
         return paintedLeft + '  ' + action;
     };
+    const editSingleHint = width >= 72 ? '↑/Alt+Up edit · Alt+Q queue' : '↑ edit';
+    const editMultiHint = width >= 72 ? '↑/Alt+Up edit latest · Alt+Q queue' : '↑ edit latest';
     if (labels.length === 1) {
-        return [alignAction(rail + queueLabel + theme.fg('dim', ' · ') + theme.fg('dim', 'next turn · ') + theme.fg('text', labels[0] ?? ''), theme.fg('dim', '↑ edit'))];
+        return [alignAction(
+            // Pi's vocabulary: what Enter typed was a follow-up, and the row says so
+            // in the same word the composer hint uses.
+            rail + queueLabel + theme.fg('dim', ' · ') + theme.fg('dim', 'follow-up · ') + theme.fg('text', labels[0] ?? ''), theme.fg('dim', editSingleHint))];
     }
-    const summary = ` · ${labels.length} · next turn${hidden === 0 ? '' : ` · ${hidden} earlier`}`;
+    const summary = ` · ${labels.length} · follow-up${hidden === 0 ? '' : ` · ${hidden} earlier`}`;
     const visibleLabels = labels.slice(start);
     const lines = [
-        alignAction(rail + queueLabel + theme.fg('dim', summary), theme.fg('dim', '↑ edit latest'), false),
+        alignAction(rail + queueLabel + theme.fg('dim', summary), theme.fg('dim', editMultiHint), false),
         ...visibleLabels.map((label, index) => rail + theme.fg(index === visibleLabels.length - 1 ? 'accent' : 'dim', String(start + index + 1))
             + '  ' + theme.fg('text', label)),
     ];
     return lines.map(line => truncateToWidth(line, width));
 }
 /**
- * Compose the welcome card, transcript, working row, and rounded editor into
+ * Compose the startup header, transcript, working row, and ruled editor into
  * one frame — the oh-my-pi surface.
  * @param state - transcript state.
  * @param options - terminal geometry and input state.
  * @returns the frame to hand to a renderer.
  */
 export function renderView(state, options) {
-    const theme = createTheme(options.colors, options.trueColor === true, options.themeName ?? 'dark');
+    const theme = createTheme(options.colors === true, options.colorDepth ?? 'truecolor', options.themeName ?? 'dark', options.terminal);
     const width = options.width;
     const height = options.height;
     const appName = options.appName ?? 'omdsh';
@@ -1568,16 +1894,6 @@ export function renderView(state, options) {
     const pwd = options.pwd ?? '';
     const motion = options.motion ?? 'full';
     const spinnerFrame = motion === 'off' ? -1 : options.spinnerFrame ?? 0;
-    if (options.agentHub !== undefined) {
-        const hub = renderAgentHub(options.agentHub, theme, width, height);
-        return {
-            lines: fitFrame(hub.lines, width),
-            cursor: hub.cursor,
-            cursorVisible: hub.cursorVisible,
-            // A full-screen surface drew no transcript body.
-            documentRows: null,
-        };
-    }
     if (options.trajectory !== undefined) {
         const trajectory = renderTrajectory(options.trajectory, theme, width, height);
         return {
@@ -1598,17 +1914,6 @@ export function renderView(state, options) {
             documentRows: null,
         };
     }
-    if (options.promptSelector?.request.presentation === 'fullscreen-list' || options.promptSelector?.request.presentation === 'fullscreen-tree') {
-        const selector = (options.promptSelector.request.presentation === 'fullscreen-tree' ? renderPromptTreePage : renderPromptSelectorPage)(options.promptSelector, theme, width, height, options.input, options.inputCursor, appName);
-        return {
-            lines: fitFrame(selector.lines, width),
-            ...(selector.document === undefined ? {} : { promptDocument: selector.document }),
-            cursor: selector.cursor,
-            cursorVisible: true,
-            // A full-screen surface drew no transcript body.
-            documentRows: null,
-        };
-    }
     if (options.promptSelector?.request.presentation === 'plan-review' || options.promptSelector?.request.presentation === 'document') {
         const review = options.promptSelector.request.documentImage === undefined ? renderPlanReviewPage(options.promptSelector, theme, width, height, options.input, options.inputCursor, appName) : renderImagePreviewPage(options.promptSelector, theme, width, height, appName, options.imageProtocol, options.imageCellSize);
         return {
@@ -1623,12 +1928,8 @@ export function renderView(state, options) {
     }
     const welcome = renderWelcome({
         width,
-        model: options.model,
-        ...(options.reasoningEffort === undefined ? {} : { reasoningEffort: options.reasoningEffort }),
         version,
-        appName,
-        ...(options.recentSessions === undefined ? {} : { recentSessions: options.recentSessions }),
-        ...(options.welcomeTips === undefined ? {} : { tips: options.welcomeTips }),
+        appName: options.displayName ?? appName,
     }, theme);
     const transcript = renderTranscriptBody(state, options, theme, spinnerFrame);
     const body = [...welcome];
@@ -1639,22 +1940,37 @@ export function renderView(state, options) {
         transcriptStart = body.length;
         body.push(...transcript.lines);
     }
-    const working = state.status === 'running'
-        ? renderWorking(theme, Math.max(0, spinnerFrame), undefined, width, motion)
+    // The activity is drawn inside the composer frame rather than as its own row.
+    // A separate row cost a line, read as another component, and moved when the
+    // composer grew; the frame is where the reader is already looking.
+    const activityLabelText = state.status === 'running'
+        ? options.workingLabel ?? DEEP_DRIVING_LABEL
         : state.status === 'compacting'
-            ? renderWorking(theme, Math.max(0, spinnerFrame), 'Compacting', width, motion)
-            : [];
+            ? options.workingLabel ?? 'Compacting'
+            : undefined;
+    const working = [];
     const statusBar = resolveStatusBarConfig(options.statusBar, options.statusPreset);
+    const placeholder = options.inspected === undefined && state.status === 'idle'
+        && options.input === '' && (options.inputImages ?? 0) === 0
+        ? options.modelReady === false
+            ? 'Run /login to connect a model'
+            // `/ commands` and `@ files` are already on the header's hint line, and this
+            // one is the copy that costs every frame: the header's scrolls into history
+            // once the conversation starts, this one does not. A bare prompt is enough
+            // to say the composer is ready for words.
+            : 'Ask anything'
+        : null;
     const inlineHint = options.transcriptSearch !== undefined
         ? transcriptSearchHint({
             query: options.transcriptSearch.query,
             editing: options.transcriptSearch.editing,
             focus: options.transcriptSearch.focus,
-        }, options.transcriptSearch.matches.length)
+        }, transcript.occurrences.length)
         : options.inspected === undefined
             ? slashInlineHint(options.input, options.inputCursor, options.commands)
+                ?? placeholder
                 ?? (state.status === 'running' && options.steerKey !== undefined
-                    ? `Enter: next turn · ${options.steerKey}: next step` : null)
+                    ? `Enter: follow-up · ${options.steerKey}: next step` : null)
             : options.inspected.writable
                 ? slashInlineHint(options.input, options.inputCursor, options.commands) ?? 'Enter to steer · Esc to return'
                 : 'Read-only · Esc to return';
@@ -1677,29 +1993,52 @@ export function renderView(state, options) {
         inputCursor: options.inputCursor,
         status: ' ' + theme.fg('accent', '🐳') + ' ',
         ...(permissionBadge === '' ? {} : { statusRight: ' ' + permissionBadge + ' ' }),
-        border: options.inspected !== undefined && options.inspected.writable !== true
-            || state.status === 'idle'
-            ? 'border'
-            : 'accent',
+        // A composer starting with `!` is not talking to the model, and the border
+        // says so the moment the character is typed — before the reader commits to
+        // running anything. Green is the one ink that means "this runs on your
+        // machine", which is also what a successful tool card uses.
+        border: options.input.trimStart().startsWith('!')
+            ? 'shellMode'
+            : options.inspected !== undefined && options.inspected.writable !== true
+                || state.status === 'idle'
+                ? 'border'
+                : 'accent',
         ...(theme.colors && (leadingSlashCommandNameRange(options.input) !== null
             || (options.inputImages !== undefined && options.inputImages !== 0))
             ? { paintInput: (text, start) => paintComposerInputSlice(options.input, text, start, theme) }
             : {}),
         ...(inlineHint !== null ? { inlineHint } : {}),
+        ...(options.transientStatus === undefined ? {} : { note: options.transientStatus }),
+        ...(activityLabelText === undefined ? {} : {
+            activity: {
+                frame: motion === 'off' ? SYMBOL.running : SPINNER[Math.max(0, spinnerFrame) % SPINNER.length] ?? SYMBOL.running,
+                label: activityLabelText,
+                shimmer: activityLabelText === DEEP_DRIVING_LABEL && motion === 'full',
+            },
+            spinnerFrame: Math.max(0, spinnerFrame),
+        }),
     };
-    const promptSelector = options.promptSelector === undefined
+    /**
+     * A tree is not a page.
+     *
+     * It used to take the whole frame, which hid the conversation the reader was
+     * about to rewind to — the one thing they need to see while choosing a point in
+     * it. Bounded to a little over half the screen it sits above the composer with
+     * the transcript still behind it, the way pi mounts its tree selector.
+     */
+    const treeRows = options.promptSelector === undefined || options.promptSelector.request.presentation !== 'tree'
+        ? undefined
+        : renderPromptTreePage(options.promptSelector, theme, width, Math.max(10, Math.min(height - 8, Math.floor(height * 0.6))), options.input, options.inputCursor, appName);
+    const promptSelector = treeRows ?? (options.promptSelector === undefined
         ? undefined
-        : renderPromptSelector(options.promptSelector, theme, width, options.input, options.inputCursor, Math.max(3, Math.min(10, height - working.length - 14)));
+        : renderPromptSelector(options.promptSelector, theme, width, options.input, options.inputCursor, Math.max(3, Math.min(10, height - working.length - 14))));
     const settings = promptSelector !== undefined || options.settings === undefined
         ? undefined
         : renderSettings(options.settings, theme, width);
-    const copySelector = promptSelector !== undefined || settings !== undefined || options.copySelector === undefined
-        ? undefined
-        : renderCopySelector(options.copySelector, theme, width);
-    const search = promptSelector !== undefined || settings !== undefined || copySelector !== undefined || options.historySearch === undefined
+    const search = promptSelector !== undefined || settings !== undefined || options.historySearch === undefined
         ? undefined
         : renderHistorySearch(options.historySearch, theme, width, Math.max(1, Math.min(HISTORY_SEARCH_MAX_VISIBLE, height - working.length - 8)));
-    const editor = promptSelector === undefined && settings === undefined && copySelector === undefined && search === undefined
+    const editor = promptSelector === undefined && settings === undefined && search === undefined
         ? renderEditor(editorOpts, theme)
         : undefined;
     const queuedSubmissions = editor === undefined || options.inspected !== undefined
@@ -1714,6 +2053,9 @@ export function renderView(state, options) {
         ? []
         : renderTurnError(state.turnError, theme, width);
     const todos = editor === undefined || options.inspected !== undefined ? [] : renderTodos(state.todos, theme, width);
+    const aside = editor === undefined || options.inspected !== undefined || options.aside === undefined
+        ? []
+        : renderAside(options.aside, theme, width, Math.max(4, Math.floor(height / 2)));
     const goal = editor === undefined || options.inspected !== undefined || options.sessionControls?.goal === undefined
         ? []
         : renderGoalBar(options.sessionControls.goal, theme, width);
@@ -1724,15 +2066,15 @@ export function renderView(state, options) {
     const inspect = editor === undefined ? [] : renderInspectBanner(options.inspected, theme, width, spinnerFrame);
     const subagents = editor === undefined
         ? []
-        : renderSubagents(options.subagents, theme, width, spinnerFrame, options.inspected?.id, options.subagentLauncherFocused);
-    const autocomplete = promptSelector !== undefined || settings !== undefined || copySelector !== undefined || search !== undefined
+        : renderSubagents(options.subagents, theme, width, spinnerFrame, options.inspected?.id, options.subagentSelection);
+    const autocomplete = promptSelector !== undefined || settings !== undefined || search !== undefined
         || options.autocomplete === undefined
         ? []
         : renderAutocomplete(options.autocomplete.items, options.autocomplete.selected, theme, width);
-    const inputLines = promptSelector?.lines ?? settings?.lines ?? copySelector?.lines ?? search?.lines
+    const inputLines = promptSelector?.lines ?? settings?.lines ?? search?.lines
         ?? (editor === undefined ? [] : editor.lines);
     const spacer = 1;
-    const reserved = inputLines.length + working.length + inspect.length + subagents.length + todos.length + goal.length + questions.length + queuedSubmissions.length + turnError.length + spacer + autocomplete.length + statusFooter.length;
+    const reserved = aside.length + inputLines.length + working.length + inspect.length + subagents.length + todos.length + goal.length + questions.length + queuedSubmissions.length + turnError.length + spacer + autocomplete.length + statusFooter.length;
     const budget = Math.max(0, height - reserved);
     const focusIndex = options.focusBlock === undefined
         ? undefined
@@ -1746,7 +2088,7 @@ export function renderView(state, options) {
     const requestedStart = focusStart === undefined
         ? (options.scrollStart ?? Number.POSITIVE_INFINITY)
         : transcriptStart + focusStart;
-    const hasOverlay = promptSelector !== undefined || settings !== undefined || copySelector !== undefined || search !== undefined;
+    const hasOverlay = promptSelector !== undefined || settings !== undefined || search !== undefined;
     const isFollowing = requestedStart === Number.POSITIVE_INFINITY && !hasOverlay;
     // A run still at work reshapes as it goes — its newest rows scroll, it folds
     // when the turn ends — so none of it may freeze into history until it
@@ -1766,9 +2108,29 @@ export function renderView(state, options) {
     if (visible.length > 0)
         lines.push(showJump
             ? ' '.repeat(jumpColumn) + theme.inverse(jumpText) : '');
-    const bottomRows = working.length + goal.length + questions.length + inspect.length + subagents.length + todos.length + queuedSubmissions.length + turnError.length + inputLines.length + autocomplete.length + statusFooter.length;
+    const bottomRows = aside.length + working.length + goal.length + questions.length + inspect.length + subagents.length + todos.length + queuedSubmissions.length + turnError.length + inputLines.length + autocomplete.length + statusFooter.length;
     const fill = Math.max(0, height - lines.length - bottomRows);
-    lines.push(...Array.from({ length: fill }, () => ''));
+    /**
+     * Spare rows sit between the header and the conversation while at the tail.
+     *
+     * A short transcript used to leave its slack below the last row, so folding a
+     * run — which shortens the transcript — widened a gap in the middle of the
+     * screen while nothing the reader was looking at moved. Moving the slack to the
+     * top of the *frame* fixed that but dragged the header down with it, and a
+     * header that drops to the bottom the moment the first message arrives is worse
+     * than the gap.
+     *
+     * Between the header and the transcript, both stay put: the header keeps the
+     * row it is read on, the newest rows keep the row they are watched on, and the
+     * slack absorbs whatever a fold removes.
+     *
+     * Not while scrolled: a window is already full, and padding a scrollback view
+     * would shift the rows the reader deliberately positioned.
+     */
+    const topPad = windowed === undefined && transcript.lines.length > 0 ? fill : 0;
+    if (topPad === 0)
+        lines.push(...Array.from({ length: fill }, () => ''));
+    lines.push(...aside);
     lines.push(...working);
     lines.push(...goal);
     lines.push(...questions);
@@ -1789,10 +2151,10 @@ export function renderView(state, options) {
             ? pendingRow
             : Math.min(pendingRow ?? transcript.liveFrom, transcript.liveFrom);
         if (liveRow !== undefined) {
-            liveStart = transcriptStart + liveRow;
+            liveStart = transcriptStart + liveRow + topPad;
         }
         else {
-            liveStart = lines.length - bottomRows;
+            liveStart = lines.length - bottomRows + topPad;
         }
         // liveStart marks the first row that is still live/mutable. Rows above it
         // are committed. Off-screen live rows are bounded by the renderer: it only
@@ -1802,18 +2164,23 @@ export function renderView(state, options) {
     else {
         liveStart = 0;
     }
+    // Padding rows are not document rows: `frameStart` below tells the renderer
+    // which frame row the document begins at, so they never map to content.
+    const frameLines = topPad === 0
+        ? lines
+        : [...lines.slice(0, transcriptStart), ...Array.from({ length: topPad }, () => ''), ...lines.slice(transcriptStart)];
     // Every settled block was already rendered against this width. Mirroring
     // OMP's stable-prefix preparation, only validate the mutable suffix instead
     // of measuring the complete native-scrollback history on every frame.
-    const trimmed = fitFrame(lines, width, isFollowing ? liveStart : 0);
-    const caret = promptSelector?.cursor ?? settings?.cursor ?? copySelector?.cursor ?? search?.cursor ?? editor?.cursor ?? { row: 0, column: 0 };
+    const trimmed = fitFrame(frameLines, width, isFollowing ? liveStart + topPad : 0);
+    const caret = promptSelector?.cursor ?? settings?.cursor ?? search?.cursor ?? editor?.cursor ?? { row: 0, column: 0 };
     // Which document rows this frame's body came from. `body` already includes the
     // header, so a window's own range is already in document coordinates and must
     // not have the header added again. No window means the whole body was drawn —
     // that is a known range, not a frame that failed to report one, and treating
     // it as "no body" would clear the record on every ordinary follow frame.
     const windowRange = windowed === undefined
-        ? (body.length === 0 ? null : { documentStart: 0, documentEnd: body.length, frameStart: 0 })
+        ? (body.length === 0 ? null : { documentStart: 0, documentEnd: body.length + topPad, frameStart: 0 })
         : windowed.documentRows;
     const bodySource = windowRange === undefined
         ? null
@@ -1826,11 +2193,11 @@ export function renderView(state, options) {
                 continue;
             const previous = stickyHeaders.at(-1);
             if (previous !== undefined)
-                previous.end = transcriptStart + transcript.blockStarts[at];
+                previous.end = transcriptStart + topPad + transcript.blockStarts[at];
             const padding = width > 4 ? 2 : 0;
             const label = truncateToWidth(promptSummary(block), Math.max(1, width - padding * 2));
             stickyHeaders.push({
-                start: transcriptStart + (transcript.blockStarts[at + 1] ?? transcript.lines.length),
+                start: transcriptStart + topPad + (transcript.blockStarts[at + 1] ?? transcript.lines.length),
                 end: body.length,
                 text: paintSurface(theme, 'userMessageBg', 'userMessageText', padToWidth(' '.repeat(padding) + label, width)),
             });
@@ -1839,16 +2206,20 @@ export function renderView(state, options) {
     return {
         lines: trimmed,
         stickyHeaders,
-        ...(jumpToLatest === undefined ? {} : { jumpToLatest }),
+        ...(jumpToLatest === undefined ? {} : { jumpToLatest: { ...jumpToLatest, row: jumpToLatest.row + topPad } }),
+        // The tree's preview is a scrollable document too: without its coordinates
+        // the advertised Ctrl+↑↓ had nothing to move, because the card path never
+        // reported them.
+        ...(promptSelector?.document === undefined ? {} : { promptDocument: promptSelector.document }),
         documentRows: bodySource,
         cursor: {
-            row: editorStart + caret.row,
+            row: editorStart + caret.row + topPad,
             column: Math.min(caret.column, width),
         },
         cursorVisible: state.status === 'compacting'
             || (options.inspected !== undefined && options.inspected.writable !== true)
             ? false
-            : promptSelector?.cursorVisible ?? (settings === undefined && copySelector === undefined),
+            : promptSelector?.cursorVisible ?? (settings === undefined),
         liveStart,
         livePinned,
         // A transient frame is either a full-screen surface or the user browsing
@@ -1864,10 +2235,11 @@ export function renderView(state, options) {
                 hiddenBelow: 0,
             }),
             blockStarts: transcript.blockStarts,
+            fileRegions: transcript.fileRegions.map(region => ({ ...region, start: transcriptStart + topPad + region.start, end: transcriptStart + topPad + region.end })),
             blockDrawStarts: transcript.blockDrawStarts,
             foldShape: transcript.foldShape,
             foldMarks: transcript.foldMarks,
-            bodyRow: transcriptStart,
+            bodyRow: transcriptStart + topPad,
         },
     };
 }