@kushalkhemka/opensec-pi-subagents 0.20.3 → 0.20.4

package/dist/ui/conversation-viewer.js

@@ -2,16 +2,20 @@
  * conversation-viewer.ts — Live conversation overlay for viewing agent sessions.
  *
  * Displays a scrollable, live-updating view of an agent's conversation.
- * Subscribes to session events for real-time streaming updates.
+ * Subscribes to session events for real-time streaming updates. The
+ * transcript is drawn with Pi's own chat components (`viewer-transcript.ts`),
+ * so it looks exactly like Pi's main session; the frame around it (header,
+ * footer, scrolling, steering) is the viewer's.
  */
 import { getMarkdownTheme } from "@earendil-works/pi-coding-agent";
-import { Input, Markdown, matchesKey, ScrollView, stripTerminalSequences, truncateToWidth, visibleWidth, wrapTextWithAnsi } from "@earendil-works/pi-tui";
+import { Input, matchesKey, ScrollView, stripTerminalSequences, truncateToWidth, visibleWidth, wrapTextWithAnsi } from "@earendil-works/pi-tui";
 import { renderAgentName } from "../agent-color.js";
 import { extractText } from "../context.js";
 import { getCachedSessionContextPercent, getLifetimeCost, getLifetimeTotal } from "../usage.js";
 import { buildInvocationTags, describeActivity, fgPreservingNestedStyles, formatCost, formatDuration, formatSessionTokens, getPromptModeLabel } from "./agent-widget.js";
 import { sanitizeTerminalText } from "./terminal-text.js";
 import { createViewerKeys } from "./viewer-keys.js";
+import { PiTranscript } from "./viewer-transcript.js";
 /** Base lines consumed by chrome: top border + header + header sep + footer sep + footer + bottom border. */
 const CHROME_LINES_BASE = 6;
 const MIN_VIEWPORT = 3;
@@ -30,20 +34,10 @@ export function getConversationOverlayOptions(tui) {
         ? { anchor: "top-left", width: "100%", maxHeight: "100%", margin: 0 }
         : { anchor: "center", width: "90%", maxHeight: `${VIEWPORT_HEIGHT_PCT}%` };
 }
+/** Footer click target for the expand toggle, which may be bound to any key. */
+const EXPAND_TARGET = "expand";
 /** Message roles the fullscreen jump marker counts as "new messages" (not streaming updates). */
 const COUNTED_ROLES = new Set(["user", "assistant", "toolResult", "bashExecution"]);
-/**
- * Cap on a single tool result or bash output before the viewer elides the rest.
- *
- * The cap is not cosmetic — it bounds render cost. A message's lines are
- * rebuilt whenever the width or Markdown mode changes, and the streaming tail
- * on every frame it changes, so an uncapped 200 KB result costs ~6 ms per
- * rebuild to parse as Markdown, against ~0.5 ms once capped (best of 5, width
- * 76). 16 KB is roughly a screenful at every terminal size and still ~30x the
- * 500 characters this replaces, which was small enough to cut most real
- * results mid-sentence.
- */
-export const RESULT_MAX_CHARS = 16_000;
 /**
  * Session events that fire per streamed token or tool-output chunk. They are
  * coalesced into one redraw per frame; every other event redraws at once.
@@ -51,103 +45,33 @@ export const RESULT_MAX_CHARS = 16_000;
 const STREAMING_EVENTS = new Set(["message_update", "tool_execution_update"]);
 /** Redraw cadence while streaming — the widget's spinner frame. */
 const STREAM_FRAME_MS = 80;
-/** Cycle order for the viewer's `m` key. */
-const MARKDOWN_MODES = ["off", "assistant", "all"];
-/** Footer labels — short, because the idle footer is already full at 80 columns. */
-const MARKDOWN_MODE_LABELS = {
-    off: "raw",
-    assistant: "md",
-    all: "md+",
-};
-/**
- * Both options keep the renderer from *rewriting* source that only looks like
- * Markdown: without them `3) a / 7) b / 9) c` comes back renumbered `3. 4. 5.`
- * and backslash escapes are normalized away. Neither is a safe edit to make to
- * a tool's output, and both are cheap to switch off.
- */
-const MARKDOWN_OPTIONS = {
-    preserveOrderedListMarkers: true,
-    preserveBackslashEscapes: true,
-};
 /**
- * Pi's own Markdown theme when this process has one, else a theme built from the
- * viewer's `Theme`.
- *
- * Preferring pi's is what buys syntax-highlighted code fences (it carries a
- * `highlightCode`), and it keeps this surface consistent with the notification
- * renderer, which uses the same source. It has to be *probed* rather than
- * try/caught around the call: `getMarkdownTheme()` returns arrow functions that
- * read pi's global theme lazily, so an uninitialized theme throws inside
- * `render()` — long after this returns — and takes the overlay with it. That is
- * the case in tests and any embedded session that never called `initTheme()`.
+ * Whether Pi's global theme is initialized. Pi's components read it while they
+ * are built and rendered, and throw without it; Pi's interactive mode always
+ * has one, tests and embedded sessions may not.
  */
-function resolveMarkdownTheme(th) {
+function piThemeReady() {
     try {
-        const piTheme = getMarkdownTheme();
-        piTheme.heading("probe");
-        return piTheme;
+        getMarkdownTheme().heading("probe");
+        return true;
     }
     catch {
-        return fallbackMarkdownTheme(th);
+        return false;
     }
 }
 /**
- * `Theme` carries only `fg` and `bold`, so the three remaining styles are
- * written as raw SGR. Rendering them as plain text instead would silently drop
- * `*emphasis*`'s markers with nothing in their place, turning a formatting
- * change into a content change.
- */
-function fallbackMarkdownTheme(th) {
-    const sgr = (on, off) => (text) => `\x1b[${on}m${text}\x1b[${off}m`;
-    return {
-        heading: text => th.bold(th.fg("accent", text)),
-        link: text => th.fg("accent", text),
-        linkUrl: text => th.fg("muted", text),
-        code: text => th.fg("muted", text),
-        codeBlock: text => th.fg("muted", text),
-        codeBlockBorder: text => th.fg("dim", text),
-        quote: text => th.fg("muted", text),
-        quoteBorder: text => th.fg("dim", text),
-        hr: text => th.fg("dim", text),
-        listBullet: text => th.fg("accent", text),
-        bold: text => th.bold(text),
-        italic: sgr(3, 23),
-        underline: sgr(4, 24),
-        strikethrough: sgr(9, 29),
-    };
-}
-/**
- * Cap `text` at `RESULT_MAX_CHARS`, reporting the elision separately rather than
- * appending it.
- *
- * Separately because the notice is the viewer's chrome, not the tool's output.
- * Appended into the string it becomes content: a cut landing inside a fenced
- * code block — likely, on exactly the large `ctx_execute` results this is for —
- * renders the notice as a line of source inside the fence.
- */
-function capResult(text) {
-    if (text.length <= RESULT_MAX_CHARS)
-        return { text, elided: 0 };
-    return {
-        text: text.slice(0, RESULT_MAX_CHARS),
-        elided: text.length - RESULT_MAX_CHARS,
-    };
-}
-/**
- * `999` · `1.5k` · `8.4M` — a magnitude cue, not an exact count, past 1000.
- *
- * The bracket is chosen against the *rounded* value, so 999,999 reads `1M`
- * rather than the `1000.0k` a naive `< 1e6` test produces.
+ * The footer's left group, dropping what fits least first: the line-count
+ * readout, then the expand hint (Pi's components already say "ctrl+o to
+ * expand" beside anything collapsed), never the actions.
  */
-function humanCount(n) {
-    if (n < 1_000)
-        return `${n}`;
-    const thousands = n < 999_950;
-    const value = thousands ? n / 1_000 : n / 1_000_000;
-    return `${value.toFixed(1).replace(/\.0$/, "")}${thousands ? "k" : "M"}`;
-}
-function truncationNote(elided) {
-    return `... (truncated, ${humanCount(elided)} more character${elided === 1 ? "" : "s"})`;
+function fitFooterLeft(count, actions, expand, sep, room) {
+    const tail = expand ? [...actions, expand] : actions;
+    for (const parts of [[count, ...tail], tail]) {
+        const text = parts.join(sep);
+        if (visibleWidth(text) <= room)
+            return text;
+    }
+    return actions.join(sep);
 }
 export class ConversationViewer {
     tui;
@@ -159,8 +83,6 @@ export class ConversationViewer {
     onStop;
     onSteer;
     showCost;
-    viewerMarkdown;
-    onMarkdownMode;
     onBackground;
     scrollOffset = 0;
     autoScroll = true;
@@ -203,39 +125,13 @@ export class ConversationViewer {
     keys;
     /** Steering composer — present while the user is typing a message to the agent. */
     composer;
-    /** Resolved once: pi's Markdown theme is fixed for the life of the process. */
-    markdownTheme;
-    /** Set by the `m` key. Wins over the setting so `m` works without a persist hook. */
-    markdownModeOverride;
-    /**
-     * One `Markdown` per message, so its own text/width cache does the work. A
-     * fresh instance per render would re-parse the whole transcript on every
-     * keystroke — the component caches, but only across calls to the same object.
-     * Weak so a compacted-away message doesn't pin its render.
-     */
-    markdownCache = new WeakMap();
-    /**
-     * The transcript, kept between frames. `blocks[i]` renders `messages[i]`;
-     * `lines` holds every block's lines (and separators) in order, and
-     * `blockStart[i]` is where block `i`'s part of it begins. All of it is valid
-     * for `cacheWidth` and `cacheMode` only.
-     */
-    blocks = [];
-    blockStart = [];
-    lines = [];
-    /** `lineWidths[i]` is the visible width of `lines[i]`, measured once when the line is built. */
-    lineWidths = [];
     /**
-     * The messages array the cache was last validated against. Pi only appends
-     * to that array and replaces it wholesale otherwise, so while it is the same
-     * object only the unsettled tail needs checking — what keeps a frame's cost
-     * flat however long the transcript gets.
+     * The transcript drawn with Pi's components, its lines cached between
+     * frames. Undefined when Pi's theme is not initialized (see `plainLines`).
      */
-    cacheMessages;
-    cacheWidth = -1;
-    cacheMode;
-    /** Messages from this index on may still change in place; earlier ones are settled. */
-    unsettledFrom = 0;
+    transcript;
+    /** The plain fallback's lines and what they were built for. */
+    plain;
     /** Pending coalesced redraw for streaming events. */
     streamRenderTimer;
     constructor(tui, session, record, activity, theme, done, 
@@ -251,17 +147,6 @@ export class ConversationViewer {
      * cannot change while it is on screen.
      */
     showCost = false, 
-    /**
-     * The current `viewerMarkdown` setting. Read live rather than captured,
-     * unlike `showCost`: `m` changes it while the overlay is on screen.
-     * Omitted → `assistant`.
-     */
-    viewerMarkdown, 
-    /**
-     * Persist a mode chosen with `m`, so the key and `/agents → Settings` mean
-     * the same thing. Omitted → `m` still cycles, viewer-locally.
-     */
-    onMarkdownMode, 
     /**
      * Hand this run to the background. `available` is read live — it turns
      * false the instant the handoff lands or the run ends. Omitted → no `b`
@@ -269,7 +154,9 @@ export class ConversationViewer {
      */
     onBackground, 
     /** Pi's `fullscreenScrollbar` preference, captured when the viewer opens. */
-    scrollbarMode = "auto") {
+    scrollbarMode = "auto", 
+    /** Pi's chat settings (thinking blocks, padding, code indent), read when the viewer opens. */
+    renderOptions) {
         this.tui = tui;
         this.session = session;
         this.record = record;
@@ -279,23 +166,23 @@ export class ConversationViewer {
         this.onStop = onStop;
         this.onSteer = onSteer;
         this.showCost = showCost;
-        this.viewerMarkdown = viewerMarkdown;
-        this.onMarkdownMode = onMarkdownMode;
         this.onBackground = onBackground;
         this.fullscreen = tui.mode === "fullscreen";
-        this.markdownTheme = resolveMarkdownTheme(theme);
         this.keys = createViewerKeys(keybindings);
+        this.transcript = piThemeReady() ? new PiTranscript(session, this.requestRender, renderOptions) : undefined;
         this.scrollView = new ScrollView({ render: () => [], invalidate: () => { } }, { follow: "end", scrollbar: this.fullscreen ? scrollbarMode : "hidden" });
         this.unsubscribe = session.subscribe((event) => {
             if (this.closed)
                 return;
             const e = event;
+            if (e)
+                this.transcript?.handleEvent(e);
             if (this.fullscreen && e?.type === "message_start" && !this.scrollView.isFollowingEnd && COUNTED_ROLES.has(e.message?.role ?? "")) {
                 this.newMessages++;
             }
             if (STREAMING_EVENTS.has(e?.type ?? "")) {
-                // A token delta changes at most the activity line; one redraw per
-                // frame is enough, and unthrottled it was one per token.
+                // A token delta redraws only the streamed message's block; one redraw
+                // per frame is enough, and unthrottled it was one per token.
                 this.streamRenderTimer ??= setTimeout(() => {
                     this.streamRenderTimer = undefined;
                     if (!this.closed)
@@ -357,15 +244,9 @@ export class ConversationViewer {
             }
             return;
         }
-        // Cycle raw → assistant-only → everything. The escape hatch that makes
-        // Markdown rendering safe to default on: a result the renderer reshapes
-        // (a diff, an indented log, a `#`-commented script) is one key from verbatim.
-        if (matchesKey(data, "m")) {
-            this.stopArmed = false;
-            const next = MARKDOWN_MODES[(MARKDOWN_MODES.indexOf(this.markdownMode()) + 1) % MARKDOWN_MODES.length];
-            this.markdownModeOverride = next;
-            this.onMarkdownMode?.(next);
-            this.tui.requestRender();
+        // Expand or collapse tool output, as Pi's ctrl+o (`app.tools.expand`).
+        if (this.keys.toggleExpand(data)) {
+            this.toggleExpand();
             return;
         }
         if (this.stopArmed)
@@ -466,7 +347,10 @@ export class ConversationViewer {
             if (event.y === this.tui.terminal.rows - 1) {
                 const target = this.footerTargets.find(t => event.x >= t.start && event.x < t.end);
                 if (target) {
-                    this.handleInput(target.key);
+                    if (target.key === EXPAND_TARGET)
+                        this.toggleExpand();
+                    else
+                        this.handleInput(target.key);
                     return { handled: true, render: true };
                 }
             }
@@ -543,7 +427,7 @@ export class ConversationViewer {
         if (at < content.base.length) {
             const text = content.base[at];
             // The cached transcript has its widths; the empty-session placeholder does not.
-            return { text, width: content.base === this.lines ? this.lineWidths[at] : visibleWidth(text) };
+            return { text, width: content.widths ? content.widths[at] : visibleWidth(text) };
         }
         const text = content.tail[at - content.base.length] ?? "";
         return { text, width: text ? visibleWidth(text) : 0 };
@@ -600,7 +484,7 @@ export class ConversationViewer {
             const scrollPct = totalLines <= viewportHeight
                 ? "100%"
                 : `${Math.round(((visibleStart + viewportHeight) / totalLines) * 100)}%`;
-            const footerKey = `${width}|${this.canSteer()}|${this.canSendToBackground()}|${this.isStoppable()}|${this.stopArmed}|${this.markdownMode()}|${totalLines}|${scrollPct}`;
+            const footerKey = `${width}|${this.canSteer()}|${this.canSendToBackground()}|${this.isStoppable()}|${this.stopArmed}|${this.transcript?.isExpanded}|${totalLines}|${scrollPct}`;
             lines.push(this.chrome("r:footer", footerKey, () => {
                 // Actions on the left, navigation on the right. The scroll hint keeps its
                 // full key list so the less-obvious bindings stay discoverable; it leads
@@ -609,24 +493,18 @@ export class ConversationViewer {
                 const actions = [];
                 if (this.canSteer())
                     actions.push(th.fg("dim", "Enter steer"));
-                // Abbreviated for the same reason as the Markdown group below.
+                // Abbreviated: the idle footer is already full at 80 columns.
                 if (this.canSendToBackground())
                     actions.push(th.fg("dim", "b bg"));
                 if (this.isStoppable()) {
                     actions.push(this.stopArmed ? th.fg("error", "x again to STOP") : th.fg("dim", "x stop"));
                 }
-                // Abbreviated (`raw`/`md`/`md+`) because the idle footer is already full
-                // at 80 columns with steer + stop present, and this group has no
-                // degradation step below "drop the line-count readout".
-                actions.push(th.fg("dim", `m ${MARKDOWN_MODE_LABELS[this.markdownMode()]}`));
+                const expand = this.expandHint();
                 const footerRight = th.fg("dim", "↑↓ scroll · PgUp/PgDn or Shift+↑↓ · Esc close");
                 // Prepend the line-count/scroll-% readout only when there's spare width —
                 // it's the first thing dropped so it never crowds out the hints.
                 const count = th.fg("dim", `${totalLines} lines · ${scrollPct}`);
-                const withCount = [count, ...actions].join(sep);
-                const footerLeft = visibleWidth(withCount) + visibleWidth(footerRight) + 1 <= innerW
-                    ? withCount
-                    : actions.join(sep);
+                const footerLeft = fitFooterLeft(count, actions, expand && th.fg("dim", expand.label), sep, innerW - visibleWidth(footerRight) - 1);
                 const footerGap = Math.max(1, innerW - visibleWidth(footerLeft) - visibleWidth(footerRight));
                 return row(footerLeft + " ".repeat(footerGap) + footerRight);
             }));
@@ -719,7 +597,7 @@ export class ConversationViewer {
             : `${Math.round(((visibleStart + viewportHeight) / totalLines) * 100)}%`;
         const footerKey = this.composer
             ? `${width}|composer`
-            : `${width}|${this.canSteer()}|${this.canSendToBackground()}|${this.isStoppable()}|${this.stopArmed}|${this.markdownMode()}|${totalLines}|${scrollPct}`;
+            : `${width}|${this.canSteer()}|${this.canSendToBackground()}|${this.isStoppable()}|${this.stopArmed}|${this.transcript?.isExpanded}|${totalLines}|${scrollPct}`;
         const { footer, targets } = this.chrome("f:footer", footerKey, () => this.fullscreenFooter(innerW, totalLines, scrollPct, row));
         this.footerTargets = targets;
         // The footer stays on screen even in a terminal shorter than the chrome.
@@ -744,13 +622,14 @@ export class ConversationViewer {
                 footerActions.push({ label: "b bg", key: "b" });
             if (this.isStoppable())
                 footerActions.push({ label: this.stopArmed ? "x again to STOP" : "x stop", key: "x" });
-            footerActions.push({ label: `m ${MARKDOWN_MODE_LABELS[this.markdownMode()]}`, key: "m" });
             const actions = footerActions.map(a => th.fg(a.key === "x" && this.stopArmed ? "error" : "dim", a.label));
+            const expand = this.expandHint();
+            if (expand)
+                footerActions.push(expand);
             footerActions.push({ label: "Esc close", key: "\x1b" });
             const footerRight = th.fg("dim", "wheel/↑↓ scroll · PgUp/PgDn · Esc close");
             const count = th.fg("dim", `${totalLines} lines · ${scrollPct}`);
-            const withCount = [count, ...actions].join(sep);
-            const footerLeft = visibleWidth(withCount) + visibleWidth(footerRight) + 1 <= innerW ? withCount : actions.join(sep);
+            const footerLeft = fitFooterLeft(count, actions, expand && th.fg("dim", expand.label), sep, innerW - visibleWidth(footerRight) - 1);
             footer = row(footerLeft + " ".repeat(Math.max(1, innerW - visibleWidth(footerLeft) - visibleWidth(footerRight))) + footerRight);
         }
         const targets = [];
@@ -776,56 +655,17 @@ export class ConversationViewer {
     canSendToBackground() {
         return this.onBackground?.available() === true;
     }
-    /** The mode in force: an `m` press, else the setting, else the default. */
-    markdownMode() {
-        return this.markdownModeOverride ?? this.viewerMarkdown?.() ?? "assistant";
-    }
-    /** Wrap `text` literally — the pre-Markdown path, and the fallback from it. */
-    rawLines(text, width, dim) {
-        const lines = wrapTextWithAnsi(sanitizeTerminalText(text), width);
-        return dim ? lines.map(l => this.theme.fg("dim", l)) : lines;
+    /** Expand or collapse every tool, bash and summary block, as Pi's `app.tools.expand`. */
+    toggleExpand() {
+        this.stopArmed = false;
+        this.transcript?.setExpanded(!this.transcript.isExpanded);
+        this.tui.requestRender();
     }
-    /** Render `text` as Markdown, reusing this message's component instance. */
-    markdownLines(msg, raw, width, dim) {
-        const text = sanitizeTerminalText(raw);
-        let entry = this.markdownCache.get(msg);
-        if (!entry) {
-            entry = {
-                md: new Markdown(text, 0, 0, this.markdownTheme, 
-                // Keeps result prose visually receded, the way the raw path's
-                // per-line `fg("dim", …)` did. Fenced code is the exception and is
-                // left alone deliberately: pi's theme highlights it with its own
-                // colors, which this would otherwise flatten.
-                dim ? { color: (t) => this.theme.fg("dim", t) } : undefined, MARKDOWN_OPTIONS),
-                text,
-            };
-            this.markdownCache.set(msg, entry);
-        }
-        else if (entry.text !== text) {
-            // Streaming: the message object is stable, its text grows. A failed
-            // prefix remains unsafe after append-only deltas, so retry only when the
-            // content was replaced or truncated.
-            const shouldRetry = !text.startsWith(entry.text);
-            entry.md.setText(text);
-            entry.text = text;
-            if (shouldRetry)
-                entry.failed = false;
-        }
-        if (entry.failed)
-            return this.rawLines(text, width, dim);
-        try {
-            return entry.md.render(width);
-        }
-        catch {
-            // The parser is recursive and this is arbitrary tool output: ~54 nested
-            // blockquotes overflow the stack, and no amount of fuzzing proves that is
-            // the only such input. `render()` is on the TUI's critical path, so a
-            // throw here takes the overlay down for content the literal path shows
-            // fine — degrade to that instead, and remember, since the throw would
-            // otherwise repeat on every render and every scroll key.
-            entry.failed = true;
-            return this.rawLines(text, width, dim);
-        }
+    /** The expand toggle's footer control: the key bound to it and what it does next. */
+    expandHint() {
+        if (!this.transcript || !this.keys.expandLabel)
+            return undefined;
+        return { label: `${this.keys.expandLabel} ${this.transcript.isExpanded ? "collapse" : "expand"}`, key: EXPAND_TARGET };
     }
     /** Steerable only when a steer handler exists and the agent is still active. */
     canSteer() {
@@ -850,7 +690,9 @@ export class ConversationViewer {
         this.tui.requestRender();
     }
     invalidate() {
-        this.cacheWidth = -1;
+        // Pi invalidates the TUI on a theme change: every block re-renders.
+        this.transcript?.invalidate();
+        this.plain = undefined;
         this.chromeCache.clear();
     }
     dispose() {
@@ -864,6 +706,7 @@ export class ConversationViewer {
             this.unsubscribe();
             this.unsubscribe = undefined;
         }
+        this.transcript?.dispose();
     }
     // ---- Private ----
     viewportHeight() {
@@ -898,174 +741,76 @@ export class ConversationViewer {
         return view.base.length + view.tail.length;
     }
     /**
-     * The content area as cached transcript lines (`base`, owned by the viewer —
-     * do not mutate) plus the live activity indicator (`tail`).
-     *
-     * Only messages that changed are rebuilt. A message is matched to its block
-     * by identity; messages from `unsettledFrom` on (the last one when the
-     * previous frame was drawn, and anything after it) are also compared by
-     * content, because older pi streams into the last message in place and a
-     * message can be edited and then pushed past before the next frame. Earlier
-     * messages are settled: pi never rewrites a message once another follows it,
-     * and compaction replaces the objects, which the identity check catches.
+     * The content area as cached transcript lines (`base`, owned by the
+     * transcript — do not mutate) with their widths, plus the live activity
+     * indicator (`tail`). Only blocks that changed are re-rendered, so a frame
+     * where nothing changed costs a few comparisons however long the transcript.
      */
     contentView(width) {
         if (width <= 0)
-            return { base: [], tail: [] };
+            return { base: [], widths: undefined, tail: [] };
         const th = this.theme;
-        const messages = this.session.messages;
-        if (messages.length === 0) {
-            return { base: [truncateToWidth(th.fg("dim", "(waiting for first message...)"), width)], tail: [] };
+        const transcript = this.transcript;
+        if (transcript ? !transcript.hasContent : this.session.messages.length === 0) {
+            return { base: [truncateToWidth(th.fg("dim", "(waiting for first message...)"), width)], widths: undefined, tail: [] };
         }
-        const mode = this.markdownMode();
-        if (width !== this.cacheWidth || mode !== this.cacheMode) {
-            this.blocks = [];
-            this.blockStart = [];
-            this.lines = [];
-            this.lineWidths = [];
-            this.cacheWidth = width;
-            this.cacheMode = mode;
-            this.unsettledFrom = 0;
-            this.cacheMessages = undefined;
+        let base;
+        let widths;
+        if (transcript) {
+            transcript.sync(width);
+            base = transcript.lines;
+            widths = transcript.widths;
         }
-        // First block that no longer matches its message. The same array as last
-        // frame has only grown at its end, so its settled part needs no check.
-        let stale = Math.min(this.blocks.length, messages.length);
-        const from = messages === this.cacheMessages && this.blocks.length <= messages.length ? Math.min(this.unsettledFrom, stale) : 0;
-        this.cacheMessages = messages;
-        for (let i = Math.max(0, from); i < stale; i++) {
-            const block = this.blocks[i];
-            if (block.msg !== messages[i] || (i >= this.unsettledFrom && block.source !== this.messageSource(messages[i]))) {
-                stale = i;
-                break;
-            }
-        }
-        if (stale < this.blocks.length || stale < messages.length) {
-            this.lines.length = stale < this.blockStart.length ? this.blockStart[stale] : this.lines.length;
-            this.lineWidths.length = this.lines.length;
-            this.blocks.length = stale;
-            this.blockStart.length = stale;
-            // Any line before the first rebuilt block means a block rendered there.
-            let needsSeparator = this.lines.length > 0;
-            const separator = truncateToWidth(th.fg("dim", "───"), width);
-            const separatorWidth = visibleWidth(separator);
-            for (let i = stale; i < messages.length; i++) {
-                const msg = messages[i];
-                const source = this.messageSource(msg);
-                const body = this.messageLines(msg, width, mode);
-                this.blocks.push({ msg, source, lines: body });
-                this.blockStart.push(this.lines.length);
-                if (!body)
-                    continue;
-                if (needsSeparator) {
-                    this.lines.push(separator);
-                    this.lineWidths.push(separatorWidth);
-                }
-                for (const line of body) {
-                    this.lines.push(line);
-                    this.lineWidths.push(visibleWidth(line));
-                }
-                needsSeparator = true;
-            }
+        else {
+            ({ lines: base, widths } = this.plainLines(width));
         }
-        this.unsettledFrom = messages.length - 1;
         // Streaming indicator for running agents
         const tail = [];
         if (this.record.status === "running" && this.activity) {
             const act = describeActivity(this.activity.activeTools, this.activity.responseText);
             tail.push("", truncateToWidth(th.fg("accent", "▍ ") + th.fg("dim", sanitizeTerminalText(act)), width));
         }
-        return { base: this.lines, tail };
+        return { base, widths, tail };
     }
     /**
-     * Everything a message's rendered lines depend on, besides width and mode.
-     * Cheap next to rendering: string joins, no wrapping or parsing.
+     * The transcript as plain wrapped text, for a process whose Pi theme is not
+     * initialized (Pi's components cannot render there). Never the case in Pi's
+     * interactive mode; it keeps the viewer usable rather than throwing.
      */
-    messageSource(msg) {
-        const m = msg;
-        switch (m.role) {
-            case "user":
-                return typeof m.content === "string" ? m.content : extractText(m.content);
-            case "assistant": {
-                let out = "";
-                for (const c of m.content) {
-                    if (c.type === "text" && c.text)
-                        out += `t${c.text.length}:${c.text}`;
-                    else if (c.type === "toolCall")
-                        out += `c${c.name ?? c.toolName ?? "unknown"}\n`;
-                }
-                return out;
-            }
-            case "toolResult":
-                return extractText(m.content);
-            case "bashExecution":
-                return `${String(m.command)}\n${m.output ?? ""}`;
-            default:
-                return "";
-        }
-    }
-    /** One message's lines without its separator, clamped to `width`; undefined when it renders nothing. */
-    messageLines(msg, width, mode) {
-        const th = this.theme;
+    plainLines(width) {
+        const messages = this.session.messages;
+        const cached = this.plain;
+        if (cached && cached.messages === messages && cached.count === messages.length && cached.width === width)
+            return cached;
         const lines = [];
-        if (msg.role === "user") {
-            const text = typeof msg.content === "string"
-                ? msg.content
-                : extractText(msg.content);
-            if (!text.trim())
-                return undefined;
-            lines.push(th.fg("accent", "[User]"));
-            for (const line of wrapTextWithAnsi(sanitizeTerminalText(text.trim()), width)) {
-                lines.push(line);
+        for (const raw of messages) {
+            const msg = raw;
+            let text = "";
+            if (msg.role === "user" || msg.role === "toolResult" || msg.role === "custom") {
+                text = typeof msg.content === "string" ? msg.content : extractText(msg.content);
             }
-        }
-        else if (msg.role === "assistant") {
-            const textParts = [];
-            const toolCalls = [];
-            for (const c of msg.content) {
-                if (c.type === "text" && c.text)
-                    textParts.push(c.text);
-                else if (c.type === "toolCall") {
-                    toolCalls.push(c.name ?? c.toolName ?? "unknown");
-                }
+            else if (msg.role === "assistant" && Array.isArray(msg.content)) {
+                text = msg.content
+                    .map(c => c.type === "text" ? c.text ?? "" : c.type === "toolCall" ? `[${c.name ?? "tool"}]` : "")
+                    .filter(Boolean)
+                    .join("\n");
             }
-            lines.push(th.bold("[Assistant]"));
-            if (textParts.length > 0) {
-                const text = textParts.join("\n").trim();
-                lines.push(...(mode === "off"
-                    ? this.rawLines(text, width, false)
-                    : this.markdownLines(msg, text, width, false)));
+            else if (msg.role === "bashExecution") {
+                text = `$ ${String(msg.command)}\n${String(msg.output ?? "")}`;
             }
-            for (const name of toolCalls) {
-                lines.push(truncateToWidth(th.fg("muted", `  [Tool: ${sanitizeTerminalText(name)}]`), width));
+            else if (msg.role === "compactionSummary" || msg.role === "branchSummary") {
+                text = String(msg.summary ?? "");
             }
-        }
-        else if (msg.role === "toolResult") {
-            const { text, elided } = capResult(extractText(msg.content).trim());
+            text = sanitizeTerminalText(text).trim();
             if (!text)
-                return undefined;
-            lines.push(th.fg("dim", "[Result]"));
-            lines.push(...(mode === "all"
-                ? this.markdownLines(msg, text, width, true)
-                : this.rawLines(text, width, true)));
-            if (elided)
-                lines.push(truncateToWidth(th.fg("dim", truncationNote(elided)), width));
-        }
-        else if (msg.role === "bashExecution") {
-            const bash = msg;
-            lines.push(truncateToWidth(th.fg("muted", `  $ ${sanitizeTerminalText(String(bash.command))}`), width));
-            if (bash.output?.trim()) {
-                // Same cap as a tool result, never Markdown: command output is the one
-                // thing here that is definitionally not authored as Markdown.
-                const { text, elided } = capResult(bash.output.trim());
-                lines.push(...this.rawLines(text, width, true));
-                if (elided)
-                    lines.push(truncateToWidth(th.fg("dim", truncationNote(elided)), width));
-            }
-        }
-        else {
-            return undefined;
-        }
-        return lines.map(l => truncateToWidth(l, width));
+                continue;
+            if (lines.length > 0)
+                lines.push("");
+            for (const line of wrapTextWithAnsi(text, width))
+                lines.push(truncateToWidth(line, width));
+        }
+        const plain = { messages, count: messages.length, width, lines, widths: lines.map(l => visibleWidth(l)) };
+        this.plain = plain;
+        return plain;
     }
 }