@esso0428/pi-subagents 0.17.5 → 0.17.7

package/dist/ui/conversation-viewer.js

@@ -6,8 +6,9 @@
  */
 import { copyToClipboard } from "@earendil-works/pi-coding-agent";
 import { Input, Key, matchesKey, truncateToWidth, visibleWidth } from "@earendil-works/pi-tui";
-import { getLifetimeTotal, getSessionContextPercent } from "../usage.js";
-import { buildInvocationTags, describeActivity, fgPreservingNestedStyles, formatDuration, formatSessionTokens, getDisplayName, getPromptModeLabel } from "./agent-widget.js";
+import { renderAgentName } from "../agent-color.js";
+import { getLifetimeCost, getLifetimeTotal, getSessionContextPercent } from "../usage.js";
+import { buildInvocationTags, describeActivity, fgPreservingNestedStyles, formatCost, formatDuration, formatSessionTokens, getPromptModeLabel } from "./agent-widget.js";
 import { createViewerCcstyleResult } from "./ccstyle/tool-result.js";
 import { formatConversationMessages } from "./conversation-blocks.js";
 import { editLiveAssistantBlockInNvim, viewConversationBlockInNvim } from "./conversation-nvim.js";
@@ -20,9 +21,16 @@ const CHROME_LINES_BASE = 6;
 const MIN_VIEWPORT = 3;
 export const VIEWPORT_HEIGHT_PCT = 70;
 const MAX_COPY_CHARS = 500_000;
+export const RESULT_MAX_CHARS = 16_000;
 const MATCH_BG = "\x1b[48;5;238m";
 const MATCH_BG_CURRENT = "\x1b[48;5;220m\x1b[30m";
 const BG_RESET = "\x1b[49m\x1b[39m";
+const MARKDOWN_MODES = ["off", "assistant", "all"];
+const MARKDOWN_MODE_LABELS = {
+    off: "raw",
+    assistant: "md",
+    all: "md+",
+};
 function renderScrollbarCell(theme, totalLines, viewportHeight, scrollOffset, lineIndex, active) {
     const total = Math.max(0, Math.floor(totalLines));
     const viewport = Math.max(1, Math.floor(viewportHeight));
@@ -50,6 +58,38 @@ function renderScrollMoreRule(theme, width, direction, hiddenLines) {
 export function createStaticConversationSource(messages) {
     return { messages, subscribe: () => () => { } };
 }
+function makeRenderLine(fields) {
+    return fields;
+}
+class PublicRenderLines extends Array {
+    static get [Symbol.species]() { return Array; }
+    constructor(values) {
+        super(...values.map(value => Object.assign(new String(value), { text: value })));
+    }
+    includes(searchElement, fromIndex) {
+        return this.some((value, index) => {
+            if (index < (fromIndex ?? 0))
+                return false;
+            const text = String(value);
+            return text === searchElement || stripAnsi(text) === searchElement;
+        });
+    }
+    find(predicate, thisArg) {
+        for (let index = 0; index < this.length; index++) {
+            const value = this[index];
+            if (predicate.call(thisArg, value, index, this))
+                return String(value);
+        }
+        return undefined;
+    }
+}
+function publicRenderLines(lines) {
+    return new PublicRenderLines(lines.map(line => {
+        const plain = stripAnsi(line.text);
+        const truncationStart = plain.indexOf("... (truncated,");
+        return truncationStart >= 0 ? plain.slice(truncationStart).trimEnd() : line.text;
+    }));
+}
 const FULL_TOOL_PREVIEW_MAX_CHARS = 500_000;
 class FullToolPreview {
     tui;
@@ -169,7 +209,6 @@ export class ConversationViewer {
     done;
     onStop;
     onSteer;
-    operations;
     blocks = [];
     showTools = true;
     selectedMessageIdx = 0;
@@ -181,6 +220,7 @@ export class ConversationViewer {
     cacheVersion = 0;
     cachedVersion = -1;
     sessionRefreshQueued = false;
+    lastSessionKey = "";
     selectedBlockId;
     scrollOffset = 0;
     autoScroll = true;
@@ -189,6 +229,8 @@ export class ConversationViewer {
     closed = false;
     stopArmed = false;
     hoveredClose = false;
+    hoveredPreview = false;
+    pressedHeaderAction;
     keys;
     composer;
     searchMode = false;
@@ -201,6 +243,11 @@ export class ConversationViewer {
     steerHistoryDraft = "";
     timeline;
     toolPreview;
+    operations;
+    showCost;
+    viewerMarkdown;
+    onMarkdownMode;
+    markdownModeOverride;
     constructor(tui, session, record, activity, theme, done, 
     /** Abort the agent shown here. Omitted means read-only history. */
     onStop, 
@@ -208,8 +255,8 @@ export class ConversationViewer {
     keybindings, 
     /** Send a steering message to the agent. */
     onSteer, 
-    /** Optional clipboard/nvim operation context, appended for compatibility. */
-    operations) {
+    /** Cost flag in upstream's constructor; fork callers may pass operations here. */
+    showCostOrOperations, viewerMarkdown, onMarkdownMode) {
         this.tui = tui;
         this.session = session;
         this.record = record;
@@ -218,12 +265,17 @@ export class ConversationViewer {
         this.done = done;
         this.onStop = onStop;
         this.onSteer = onSteer;
-        this.operations = operations;
+        this.operations = typeof showCostOrOperations === "object" ? showCostOrOperations : undefined;
+        this.showCost = typeof showCostOrOperations === "boolean" ? showCostOrOperations : false;
+        this.viewerMarkdown = viewerMarkdown;
+        this.onMarkdownMode = onMarkdownMode;
         this.keys = createViewerKeys(keybindings);
         this.blocks = formatConversationMessages(session.messages);
+        this.lastSessionKey = this.sessionKey();
         this.timeline = new ConversationTimeline(tui, theme, {
-            cwd: operations?.ctx.cwd,
+            cwd: this.operations?.ctx.cwd,
             record,
+            markdownMode: () => this.currentMarkdownMode(),
             onChange: (change) => this.handleTimelineChange(change),
         });
         this.timeline.setBlocks(this.blocks);
@@ -253,17 +305,27 @@ export class ConversationViewer {
             this.handleSearchInput(data);
             return;
         }
+        if (matchesKey(data, Key.ctrl("c"))) {
+            this.closed = true;
+            this.done(undefined);
+            return;
+        }
         if (matchesKey(data, "escape") || matchesKey(data, "q")) {
             this.closed = true;
             this.done(undefined);
             return;
         }
         if (matchesKey(data, "enter")) {
-            this.buildContentLines(this.lastInnerW || 80);
+            this.buildContentLines(this.transcriptWidth(this.lastInnerW || 80));
             if (this.timeline.isToolFocused()) {
                 this.timeline.toggleFocusedTool();
                 return;
             }
+            if (this.canSteer()) {
+                this.stopArmed = false;
+                this.openComposer();
+                return;
+            }
         }
         if (data === "e" && this.canSteer()) {
             this.stopArmed = false;
@@ -286,7 +348,7 @@ export class ConversationViewer {
         if (this.stopArmed)
             this.stopArmed = false;
         // Input can arrive before the first render in tests and in a freshly-opened overlay.
-        this.buildContentLines(this.lastInnerW || 80);
+        this.buildContentLines(this.transcriptWidth(this.lastInnerW || 80));
         const viewportHeight = this.viewportHeight();
         const maxScroll = Math.max(0, this.cachedLines.length - viewportHeight);
         if (data === "t") {
@@ -334,6 +396,9 @@ export class ConversationViewer {
         else if (data === "M") {
             void this.copyCurrentMessage();
         }
+        else if (data === "m") {
+            this.cycleMarkdownMode();
+        }
         else if (data === "o") {
             void this.viewCurrentInNvim();
         }
@@ -369,27 +434,52 @@ export class ConversationViewer {
         if (this.toolPreview)
             return this.toolPreview.handleMouse(event);
         const innerW = Math.max(1, this.lastInnerW || event.width - 4);
+        const contentWidth = this.transcriptWidth(innerW);
+        const railX = 2 + contentWidth;
+        const previewHit = this.isPreviewButtonHit(event.x, event.y, innerW);
         const closeHit = this.isCloseButtonHit(event.x, event.y, innerW);
         if (event.type === "move") {
+            const previewChanged = previewHit !== this.hoveredPreview;
             const closeChanged = closeHit !== this.hoveredClose;
+            this.hoveredPreview = previewHit;
             this.hoveredClose = closeHit;
-            if (this.composer || this.searchMode)
-                return closeChanged ? { handled: true, render: true } : undefined;
-            const contentLines = this.buildContentLines(innerW);
+            if (this.composer || this.searchMode) {
+                return previewChanged || closeChanged ? { handled: true, render: true } : undefined;
+            }
+            if (event.x === railX)
+                return previewChanged || closeChanged ? { handled: true, render: true } : undefined;
+            this.buildContentLines(contentWidth);
+            const contentLines = this.cachedLines;
             const viewportHeight = this.viewportHeight();
             const maxScroll = Math.max(0, contentLines.length - viewportHeight);
             if (this.autoScroll)
                 this.scrollOffset = maxScroll;
             const visibleStart = Math.min(this.scrollOffset, maxScroll);
-            const contentOrigin = 3 + (this.invocationLine() ? 1 : 0);
+            const contentOrigin = 4;
             const contentY = event.y - contentOrigin + visibleStart;
             const timelineResult = this.timeline.handleMouse({ ...event, y: contentY });
-            return timelineResult ?? (closeChanged ? { handled: true, render: true } : undefined);
+            return timelineResult ?? (previewChanged || closeChanged ? { handled: true, render: true } : undefined);
         }
-        if (closeHit && event.button === "left") {
-            if (event.type === "press")
+        if (event.button === "left") {
+            if (event.type === "press" && previewHit) {
+                this.pressedHeaderAction = "preview";
                 return { handled: true, capture: true, render: false };
-            if (event.type === "click") {
+            }
+            if (event.type === "press" && closeHit) {
+                this.pressedHeaderAction = "close";
+                return { handled: true, capture: true, render: false };
+            }
+            if (event.type === "release" && this.pressedHeaderAction) {
+                this.pressedHeaderAction = undefined;
+                return { handled: true, render: false };
+            }
+            if (event.type === "click" && previewHit) {
+                this.pressedHeaderAction = undefined;
+                this.openFocusedToolPreview();
+                return { handled: true, render: false };
+            }
+            if (event.type === "click" && closeHit) {
+                this.pressedHeaderAction = undefined;
                 this.closed = true;
                 this.done(undefined);
                 return { handled: true, render: false };
@@ -397,11 +487,11 @@ export class ConversationViewer {
         }
         if (this.composer || this.searchMode)
             return undefined;
-        const contentLines = this.buildContentLines(innerW);
+        const contentLines = this.buildContentLines(contentWidth);
         const viewportHeight = this.viewportHeight();
         const maxScroll = Math.max(0, contentLines.length - viewportHeight);
         const visibleStart = Math.min(this.scrollOffset, maxScroll);
-        const contentOrigin = 3 + (this.invocationLine() ? 1 : 0);
+        const contentOrigin = 4;
         if (event.type === "wheel") {
             if (event.y < contentOrigin || event.y >= contentOrigin + viewportHeight)
                 return undefined;
@@ -411,9 +501,12 @@ export class ConversationViewer {
         const contentY = event.y - contentOrigin + visibleStart;
         if (contentY < 0 || contentY >= contentLines.length)
             return undefined;
+        // The reserved rail is visual-only; wheel events above remain handled by the viewport.
+        if ((event.type === "click" || event.type === "press") && event.x === railX)
+            return undefined;
         // Rows have one leading space and one trailing space inside the frame.
-        // Neither padding nor the frame itself is a focus target.
-        if ((event.type === "click" || event.type === "press") && (event.x < 2 || event.x >= 2 + innerW))
+        // Neither padding, the rail, nor the frame itself is a focus target.
+        if ((event.type === "click" || event.type === "press") && (event.x < 2 || event.x >= 2 + contentWidth))
             return undefined;
         const result = this.timeline.handleMouse({ ...event, y: contentY });
         if (result?.handled && event.type === "click") {
@@ -423,7 +516,7 @@ export class ConversationViewer {
                 selected = this.timeline.getSnapshot().messageBlocks.findIndex((block) => block.toolCallId === focusedTool);
             }
             if (selected !== undefined && selected >= 0) {
-                this.buildContentLines(innerW);
+                this.buildContentLines(contentWidth);
                 this.setFocusFromMessageIndex(selected);
                 this.autoScroll = false;
                 this.scrollTargetIntoView(selected);
@@ -432,10 +525,18 @@ export class ConversationViewer {
         }
         return result;
     }
+    isPreviewButtonHit(x, y, innerW) {
+        if (y !== 1)
+            return false;
+        const previewWidth = visibleWidth("[preview]");
+        const closeWidth = visibleWidth("[Esc]");
+        const labelStart = 2 + Math.max(0, innerW - previewWidth - 1 - closeWidth);
+        return x >= labelStart && x < labelStart + previewWidth;
+    }
     isCloseButtonHit(x, y, innerW) {
         if (y !== 1)
             return false;
-        const labelWidth = visibleWidth("[esc]");
+        const labelWidth = visibleWidth("[Esc]");
         const labelStart = 2 + Math.max(0, innerW - labelWidth);
         return x >= labelStart && x < 2 + innerW;
     }
@@ -447,14 +548,24 @@ export class ConversationViewer {
         const th = this.theme;
         const innerW = Math.max(1, width - 4);
         this.lastInnerW = innerW;
+        const contentWidth = this.transcriptWidth(innerW);
         const lines = [];
         const pad = (s, len) => s + " ".repeat(Math.max(0, len - visibleWidth(s)));
         const row = (content) => th.fg("border", "│") + " " + truncateToWidth(pad(content, innerW), innerW, "...", true) + " " + th.fg("border", "│");
+        const contentRow = (content, lineIndex, totalLines, viewportHeight, offset) => {
+            const isTruncationNote = stripAnsi(content).includes("... (truncated,");
+            const text = isTruncationNote
+                ? truncateToWidth(content, contentWidth, "...", true)
+                : truncateToWidth(pad(content, contentWidth), contentWidth, "...", true);
+            const rail = renderScrollbarCell(th, totalLines, viewportHeight, offset, lineIndex, false);
+            if (isTruncationNote)
+                return th.fg("border", "│") + " " + text + th.fg("border", "│");
+            return th.fg("border", "│") + " " + text + rail + " " + th.fg("border", "│");
+        };
         const hrTop = th.fg("border", `╭${"─".repeat(Math.max(0, width - 2))}╮`);
         const hrBot = th.fg("border", `╰${"─".repeat(Math.max(0, width - 2))}╯`);
         const hrMid = row(th.fg("dim", "─".repeat(innerW)));
         lines.push(hrTop);
-        const name = getDisplayName(this.record.type);
         const modeLabel = getPromptModeLabel(this.record.type);
         const modeTag = modeLabel ? ` ${th.fg("dim", `(${modeLabel})`)}` : "";
         const statusIcon = this.record.status === "running" ? th.fg("accent", "●") : this.record.status === "completed" ? th.fg("success", "✓") : this.record.status === "error" ? th.fg("error", "✗") : th.fg("dim", "○");
@@ -463,22 +574,27 @@ export class ConversationViewer {
         const toolUses = this.activity?.toolUses ?? this.record.toolUses;
         if (toolUses > 0)
             headerParts.unshift(`${toolUses} tool${toolUses === 1 ? "" : "s"}`);
-        const tokens = getLifetimeTotal(this.activity?.lifetimeUsage);
+        const usage = this.activity?.lifetimeUsage ?? this.record.lifetimeUsage;
+        const tokens = getLifetimeTotal(usage);
         if (tokens > 0) {
-            const percent = getSessionContextPercent(this.activity?.session);
-            headerParts.push(formatSessionTokens(tokens, percent, th, this.record.compactionCount));
-        }
-        const headerText = `${statusIcon} ${th.bold(name)}${modeTag}  ${th.fg("muted", this.record.description)} ${th.fg("dim", "·")} ${fgPreservingNestedStyles(th, "dim", headerParts.join(" · "))}`;
-        const closeLabel = this.hoveredClose ? th.fg("text", th.bold("[esc]")) : th.fg("dim", "[esc]");
-        const closeWidth = visibleWidth(closeLabel);
-        const headerLeft = truncateToWidth(headerText, Math.max(0, innerW - closeWidth - 1), "", true);
-        const headerGap = Math.max(1, innerW - visibleWidth(headerLeft) - closeWidth);
-        lines.push(row(headerLeft + " ".repeat(headerGap) + closeLabel));
+            const percent = getSessionContextPercent(this.activity?.session ?? this.record.session);
+            const tokenText = formatSessionTokens(tokens, percent, th, this.record.compactionCount);
+            const costText = this.showCost ? formatCost(getLifetimeCost(usage)) : "";
+            headerParts.push(costText ? `${tokenText} ${costText}` : tokenText);
+        }
+        const styledName = renderAgentName(this.record.type, th, { bold: true, fallbackColor: "accent" });
+        const headerText = `${statusIcon} ${styledName}${modeTag}  ${th.fg("muted", this.record.description)} ${th.fg("dim", "·")} ${fgPreservingNestedStyles(th, "dim", headerParts.join(" · "))}`;
+        const previewLabel = this.hoveredPreview ? th.fg("text", th.bold("[preview]")) : th.fg("dim", "[preview]");
+        const closeLabel = this.hoveredClose ? th.fg("text", th.bold("[Esc]")) : th.fg("dim", "[Esc]");
+        const actionsWidth = visibleWidth(previewLabel) + 1 + visibleWidth(closeLabel);
+        const headerLeft = truncateToWidth(headerText, Math.max(0, innerW - actionsWidth - 1), "", true);
+        const headerGap = Math.max(1, innerW - visibleWidth(headerLeft) - actionsWidth);
+        lines.push(row(headerLeft + " ".repeat(headerGap) + previewLabel + " " + closeLabel));
         const invocationLine = this.invocationLine();
-        if (invocationLine)
-            lines.push(row(invocationLine));
+        lines.push(row(invocationLine ?? ""));
         lines.push(hrMid);
-        const contentLines = this.buildContentLines(innerW);
+        this.buildContentLines(contentWidth);
+        const contentLines = this.cachedLines;
         const viewportHeight = this.viewportHeight();
         const maxScroll = Math.max(0, contentLines.length - viewportHeight);
         if (this.autoScroll)
@@ -493,7 +609,7 @@ export class ConversationViewer {
             const block = this.cachedMessageBlocks[this.currentMessageIndex()];
             if (block) {
                 const header = renderConversationRoleHeader(block, this.theme);
-                displayed[0] = { text: ` ${header}`, plain: header, blockIndex: currentBlockIdx, railable: true };
+                displayed[0] = makeRenderLine({ text: ` ${header}`, plain: header, blockIndex: currentBlockIdx, railable: true });
             }
         }
         for (let i = 0; i < displayed.length; i++) {
@@ -510,10 +626,14 @@ export class ConversationViewer {
                 const railGlyph = currentBlock?.kind === "tool" ? "▌" : "▎";
                 text = text.startsWith(" ") ? th.fg(railColor, railGlyph) + text.slice(1) : th.fg(railColor, railGlyph) + text;
             }
-            lines.push(row(text));
+            const plainText = stripAnsi(text);
+            lines.push(plainText.includes("... (truncated,")
+                ? th.fg("border", "│") + " " + text + th.fg("border", "│")
+                : contentRow(text, i, contentLines.length, viewportHeight, visibleStart));
+        }
+        for (let i = displayed.length; i < viewportHeight; i++) {
+            lines.push(contentRow("", i, contentLines.length, viewportHeight, visibleStart));
         }
-        for (let i = displayed.length; i < viewportHeight; i++)
-            lines.push(row(""));
         lines.push(hrMid);
         if (this.composer) {
             lines.push(row(this.composer.render(innerW)[0] ?? ""));
@@ -532,15 +652,22 @@ export class ConversationViewer {
         else {
             const actions = [];
             if (this.canSteer())
-                actions.push(th.fg("dim", "e steer"));
+                actions.push(th.fg("dim", innerW < 100 ? "Enter steer (e steer)" : "e steer"));
             if (this.isStoppable())
                 actions.push(this.stopArmed ? th.fg("error", "x again to STOP") : th.fg("dim", "x stop"));
             const editHint = this.isLive() ? " O" : "";
-            const shortcutHints = [
-                `j/k scroll · J/K messages · [/] tools · w preview · g/G   t   M o${editHint}   /n N   q`,
-                `[/] tools · w preview · M o${editHint}   /n N   q`,
-                `[/] tools · w · M o${editHint} /n N q`,
-            ];
+            const markdownHint = innerW < 100 ? `m ${MARKDOWN_MODE_LABELS[this.currentMarkdownMode()]}` : "";
+            const shortcutHints = innerW < 100
+                ? [
+                    `j/k scroll · J/K messages · [/] tools · w preview · g/G   t   ${markdownHint}   M o${editHint}   /n N   q`,
+                    `[/] tools · w preview · ${markdownHint} · M o${editHint}   /n N   q`,
+                    `${markdownHint} · M o${editHint} /n N · Esc close`,
+                ]
+                : [
+                    `j/k scroll · J/K messages · [/] tools · w preview · g/G   t   M o${editHint}   /n N   q`,
+                    `[/] tools · w preview · M o${editHint}   /n N   q`,
+                    `[/] tools · w · M o${editHint} /n N q`,
+                ];
             const scrollPct = contentLines.length <= viewportHeight ? "100%" : `${Math.round(((visibleStart + viewportHeight) / contentLines.length) * 100)}%`;
             const count = th.fg("dim", `${contentLines.length} lines · ${scrollPct}`);
             const countWidth = visibleWidth(count);
@@ -584,6 +711,7 @@ export class ConversationViewer {
             if (this.hasFocusedBlock)
                 this.selectedBlockId = this.currentBlock()?.id;
             this.blocks = formatConversationMessages(this.session.messages);
+            this.lastSessionKey = this.sessionKey();
             this.timeline.setBlocks(this.blocks);
             this.cacheVersion++;
             this.invalidate();
@@ -603,7 +731,7 @@ export class ConversationViewer {
                 for (let index = start; index < end; index++) {
                     const line = snapshotLines[index];
                     if (line)
-                        this.cachedLines[index] = { ...line };
+                        this.cachedLines[index] = makeRenderLine({ ...line });
                 }
             }
         }
@@ -618,47 +746,120 @@ export class ConversationViewer {
         const maxRows = Math.floor((this.tui.terminal.rows * VIEWPORT_HEIGHT_PCT) / 100);
         return Math.max(MIN_VIEWPORT, maxRows - this.chromeLines());
     }
+    /** Full inner width includes the one column reserved for the transcript rail. */
+    transcriptWidth(innerW) {
+        return Math.max(1, innerW - 1);
+    }
     chromeLines() {
-        return CHROME_LINES_BASE + (this.invocationLine() ? 1 : 0) + (this.composer ? 1 : 0);
+        return CHROME_LINES_BASE + 1 + (this.composer ? 1 : 0);
     }
     invocationLine() {
         const liveModel = this.isLive() ? this.record.session?.model : undefined;
-        const invocation = this.record.invocation
+        const captured = this.record.invocation;
+        const invocation = captured
             ? {
-                ...this.record.invocation,
-                ...(liveModel && { effectiveModelName: liveModel.name ?? liveModel.id }),
-                ...(this.isLive() && { effectiveThinking: this.record.session?.thinkingLevel }),
+                ...captured,
+                ...(captured.modelName === undefined && captured.effectiveModelName !== undefined && { modelName: captured.effectiveModelName }),
+                ...(captured.modelId === undefined && captured.effectiveModelId !== undefined && { modelId: captured.effectiveModelId }),
+                ...(captured.thinking === undefined && captured.effectiveThinking !== undefined && { thinking: captured.effectiveThinking }),
+                ...(liveModel && { modelName: liveModel.name ?? liveModel.id, modelId: `${liveModel.provider}/${liveModel.id}` }),
+                ...(this.isLive() && { thinking: this.record.session?.thinkingLevel }),
             }
-            : liveModel || (this.isLive() && this.record.session?.thinkingLevel)
-                ? {
-                    effectiveModelName: liveModel?.name ?? liveModel?.id,
-                    effectiveThinking: this.record.session?.thinkingLevel,
-                }
+            : liveModel
+                ? { modelName: liveModel.name ?? liveModel.id, modelId: `${liveModel.provider}/${liveModel.id}`, thinking: this.record.session?.thinkingLevel }
                 : undefined;
         if (!invocation)
-            return this.theme.fg("dim", "  ↳ model: unknown · thinking: unknown");
-        const { modelName, tags } = buildInvocationTags(invocation);
-        const effectiveModelName = invocation.effectiveModelName ?? modelName;
-        const parts = effectiveModelName ? [`model: ${effectiveModelName}`, ...tags] : ["model: inherit", ...tags];
-        return this.theme.fg("dim", `  ↳ ${parts.join(" · ")}`);
+            return undefined;
+        const { modelName, modelId, tags } = buildInvocationTags(invocation);
+        const effectiveModelName = modelId ?? modelName;
+        if (!effectiveModelName && tags.length === 0)
+            return undefined;
+        const displayModel = captured?.effectiveModelName !== undefined
+            ? `model: ${captured.effectiveModelName}`
+            : effectiveModelName;
+        return this.theme.fg("dim", `  ↳ ${[displayModel, ...tags].filter(Boolean).join(" · ")}`);
+    }
+    currentMarkdownMode() {
+        return this.markdownModeOverride ?? this.viewerMarkdown?.() ?? "assistant";
+    }
+    cycleMarkdownMode() {
+        const current = this.currentMarkdownMode();
+        const next = MARKDOWN_MODES[(MARKDOWN_MODES.indexOf(current) + 1) % MARKDOWN_MODES.length];
+        this.markdownModeOverride = next;
+        this.onMarkdownMode?.(next);
+        this.timeline.setMarkdownMode(() => this.currentMarkdownMode());
+        this.invalidate();
+        this.tui.requestRender();
+    }
+    sessionKey() {
+        return this.session.messages.map(message => {
+            const value = message;
+            const content = value.content;
+            const summarize = (text) => `${text.length}:${text.slice(0, 24)}:${text.slice(-24)}`;
+            const contentSummary = typeof content === "string"
+                ? summarize(content)
+                : Array.isArray(content)
+                    ? content.map(part => typeof part === "object" && part && "text" in part && typeof part.text === "string" ? summarize(part.text) : "").join("|")
+                    : "";
+            return `${String(value.role)}:${contentSummary}:${typeof value.output === "string" ? summarize(value.output) : ""}:${typeof value.command === "string" ? summarize(value.command) : ""}`;
+        }).join("\u0001");
+    }
+    blockSignature(block) {
+        let resultLength = 0;
+        const content = block.toolResult?.content;
+        if (typeof content === "string")
+            resultLength = content.length;
+        else if (Array.isArray(content))
+            resultLength = content.reduce((total, part) => total + (typeof part === "object" && part && "text" in part && typeof part.text === "string" ? part.text.length : 0), 0);
+        return `${block.id}\u0000${block.markdown}\u0000${block.fullText}\u0000${block.toolLine ?? ""}\u0000${resultLength}`;
+    }
+    syncBlocksFromSession() {
+        const sessionKey = this.sessionKey();
+        if (sessionKey === this.lastSessionKey)
+            return;
+        this.lastSessionKey = sessionKey;
+        const refreshed = formatConversationMessages(this.session.messages);
+        const sameShape = refreshed.length === this.blocks.length && refreshed.every((block, index) => block.id === this.blocks[index]?.id);
+        if (!sameShape) {
+            this.blocks = refreshed;
+            this.timeline.setBlocks(this.blocks);
+            this.cacheVersion++;
+            this.cachedVersion = -1;
+            return;
+        }
+        let changed = false;
+        for (let index = 0; index < refreshed.length; index++) {
+            const current = this.blocks[index];
+            const next = refreshed[index];
+            if (this.blockSignature(current) !== this.blockSignature(next))
+                changed = true;
+            Object.assign(current, next);
+        }
+        if (changed) {
+            this.cacheVersion++;
+            this.cachedVersion = -1;
+        }
     }
     buildContentLines(width) {
         if (width <= 0)
-            return [];
-        if (this.cachedVersion === this.cacheVersion && this.cachedWidth === width)
-            return this.cachedLines;
+            return new PublicRenderLines([]);
+        this.syncBlocksFromSession();
+        if (this.cachedVersion === this.cacheVersion && this.cachedWidth === width) {
+            this.timeline.render(width);
+            return publicRenderLines(this.cachedLines);
+        }
         this.timeline.setShowTools(this.showTools);
         this.timeline.render(width);
         const timelineSnapshot = this.timeline.getSnapshot();
         const lines = timelineSnapshot.lines.map((line) => {
             const rawText = typeof line?.text === "string" ? line.text : "";
             const text = truncateToWidth(rawText, width, "", true);
-            return {
+            return makeRenderLine({
                 text,
                 plain: stripAnsi(text),
                 blockIndex: typeof line?.blockIndex === "number" ? line.blockIndex : -1,
                 ...(line?.railable ? { railable: true } : {}),
-            };
+            });
         });
         this.cachedMessageStarts = [...timelineSnapshot.messageStarts];
         this.cachedMessageBlocks = [...timelineSnapshot.messageBlocks];
@@ -678,14 +879,14 @@ export class ConversationViewer {
         if (this.record.status === "running" && this.activity) {
             const act = describeActivity(this.activity.activeTools, this.activity.responseText);
             const text = `▍ ${act}`;
-            lines.push({ text: truncateToWidth(this.theme.fg("accent", "▍ ") + this.theme.fg("dim", act), width), plain: text, blockIndex: -1 });
+            lines.push(makeRenderLine({ text: truncateToWidth(this.theme.fg("accent", "▍ ") + this.theme.fg("dim", act), width), plain: text, blockIndex: -1 }));
         }
         this.cachedWidth = width;
         this.cachedVersion = this.cacheVersion;
         this.cachedLines = lines;
         if (this.searchMode || this.searchQuery)
             this.recomputeMatches();
-        return lines;
+        return publicRenderLines(lines);
     }
     currentMessageIndex() {
         return this.cachedMessageStarts.length === 0 ? 0 : Math.max(0, Math.min(this.selectedMessageIdx, this.cachedMessageStarts.length - 1));
@@ -749,7 +950,7 @@ export class ConversationViewer {
         if (!this.timeline.moveFocus(direction))
             return;
         const focused = this.timeline.getFocusedToolCallId();
-        this.buildContentLines(this.lastInnerW || 80);
+        this.buildContentLines(this.transcriptWidth(this.lastInnerW || 80));
         const index = this.cachedMessageBlocks.findIndex((block) => block.toolCallId === focused);
         if (index >= 0) {
             this.setFocusFromMessageIndex(index);
@@ -759,7 +960,7 @@ export class ConversationViewer {
         this.tui.requestRender();
     }
     focusNearbyTool(direction) {
-        this.buildContentLines(this.lastInnerW || 80);
+        this.buildContentLines(this.transcriptWidth(this.lastInnerW || 80));
         const toolIndices = this.cachedMessageBlocks
             .map((block, index) => block.kind === "tool" && block.toolCallId ? index : -1)
             .filter((index) => index >= 0);
@@ -791,7 +992,7 @@ export class ConversationViewer {
         this.scrollOffset = Math.max(0, Math.min(maxScroll, this.scrollOffset));
     }
     openFocusedToolPreview() {
-        this.buildContentLines(this.lastInnerW || 80);
+        this.buildContentLines(this.transcriptWidth(this.lastInnerW || 80));
         const focusedToolCallId = this.timeline.getFocusedToolCallId();
         const block = focusedToolCallId
             ? this.cachedMessageBlocks.find((candidate) => candidate.toolCallId === focusedToolCallId)