@esso0428/pi-subagents 0.17.5 → 0.17.7

package/src/ui/conversation-viewer.ts

@@ -8,10 +8,11 @@
 import type { AgentSession, ExtensionAPI, ExtensionContext } from "@earendil-works/pi-coding-agent";
 import { copyToClipboard } from "@earendil-works/pi-coding-agent";
 import { type Component, Input, Key, matchesKey, type TUI, type TuiMouseEvent, truncateToWidth, visibleWidth } from "@earendil-works/pi-tui";
-import type { AgentRecord } from "../types.js";
-import { getLifetimeTotal, getSessionContextPercent } from "../usage.js";
+import { renderAgentName } from "../agent-color.js";
+import type { AgentRecord, EffectiveThinkingLevel, ViewerMarkdownMode } from "../types.js";
+import { getLifetimeCost, getLifetimeTotal, getSessionContextPercent } from "../usage.js";
 import type { Theme } from "./agent-widget.js";
-import { type AgentActivity, buildInvocationTags, describeActivity, fgPreservingNestedStyles, formatDuration, formatSessionTokens, getDisplayName, getPromptModeLabel } from "./agent-widget.js";
+import { type AgentActivity, buildInvocationTags, describeActivity, fgPreservingNestedStyles, formatCost, formatDuration, formatSessionTokens, getPromptModeLabel } from "./agent-widget.js";
 import { createViewerCcstyleResult } from "./ccstyle/tool-result.js";
 import { type ConversationBlock, formatConversationMessages } from "./conversation-blocks.js";
 import { editLiveAssistantBlockInNvim, viewConversationBlockInNvim } from "./conversation-nvim.js";
@@ -25,9 +26,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: readonly ViewerMarkdownMode[] = ["off", "assistant", "all"];
+const MARKDOWN_MODE_LABELS: Record<ViewerMarkdownMode, string> = {
+  off: "raw",
+  assistant: "md",
+  all: "md+",
+};
 
 function renderScrollbarCell(
   theme: Theme,
@@ -78,6 +86,42 @@ export function createStaticConversationSource(
 
 type RenderLine = TimelineRenderLine;
 
+function makeRenderLine(fields: TimelineRenderLine): RenderLine {
+  return fields;
+}
+
+class PublicRenderLines extends Array<string> {
+  static get [Symbol.species](): ArrayConstructor { return Array; }
+
+  constructor(values: readonly string[]) {
+    super(...values.map(value => Object.assign(new String(value), { text: value }) as unknown as string));
+  }
+
+  override includes(searchElement: string, fromIndex?: number): boolean {
+    return this.some((value, index) => {
+      if (index < (fromIndex ?? 0)) return false;
+      const text = String(value);
+      return text === searchElement || stripAnsi(text) === searchElement;
+    });
+  }
+
+  find(predicate: (value: string, index: number, array: string[]) => unknown, thisArg?: unknown): string | undefined {
+    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: readonly RenderLine[]): PublicRenderLines {
+  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 implements Component {
@@ -212,6 +256,7 @@ export class ConversationViewer implements Component {
   private cacheVersion = 0;
   private cachedVersion = -1;
   private sessionRefreshQueued = false;
+  private lastSessionKey = "";
   private selectedBlockId: string | undefined;
   private scrollOffset = 0;
   private autoScroll = true;
@@ -220,6 +265,8 @@ export class ConversationViewer implements Component {
   private closed = false;
   private stopArmed = false;
   private hoveredClose = false;
+  private hoveredPreview = false;
+  private pressedHeaderAction: "preview" | "close" | undefined;
   private keys: ViewerKeys;
   private composer: Input | undefined;
   private searchMode = false;
@@ -232,6 +279,11 @@ export class ConversationViewer implements Component {
   private steerHistoryDraft = "";
   private timeline: ConversationTimeline;
   private toolPreview: FullToolPreview | undefined;
+  private readonly operations: ConversationViewerOperations | undefined;
+  private readonly showCost: boolean;
+  private readonly viewerMarkdown: (() => ViewerMarkdownMode) | undefined;
+  private readonly onMarkdownMode: ((mode: ViewerMarkdownMode) => void) | undefined;
+  private markdownModeOverride: ViewerMarkdownMode | undefined;
 
   constructor(
     private tui: TUI,
@@ -246,14 +298,22 @@ export class ConversationViewer implements Component {
     keybindings?: ViewerKeybindings,
     /** Send a steering message to the agent. */
     private onSteer?: (message: string) => void,
-    /** Optional clipboard/nvim operation context, appended for compatibility. */
-    private operations?: ConversationViewerOperations,
+    /** Cost flag in upstream's constructor; fork callers may pass operations here. */
+    showCostOrOperations?: boolean | ConversationViewerOperations,
+    viewerMarkdown?: () => ViewerMarkdownMode,
+    onMarkdownMode?: (mode: ViewerMarkdownMode) => void,
   ) {
+    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);
@@ -283,17 +343,27 @@ export class ConversationViewer implements Component {
       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;
@@ -315,7 +385,7 @@ export class ConversationViewer implements Component {
     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);
 
@@ -350,6 +420,8 @@ export class ConversationViewer implements Component {
       this.gotoMatch(-1);
     } else if (data === "M") {
       void this.copyCurrentMessage();
+    } else if (data === "m") {
+      this.cycleMarkdownMode();
     } else if (data === "o") {
       void this.viewCurrentInNvim();
     } else if (data === "O" && this.isLive()) {
@@ -379,35 +451,61 @@ export class ConversationViewer implements Component {
   handleMouse(event: TuiMouseEvent): { handled?: boolean; capture?: boolean; render?: boolean } | undefined {
     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") return { handled: true, capture: true, render: false };
-      if (event.type === "click") {
+    if (event.button === "left") {
+      if (event.type === "press" && previewHit) {
+        this.pressedHeaderAction = "preview";
+        return { handled: true, capture: true, render: false };
+      }
+      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 };
       }
     }
     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;
       this.scrollBy(Math.trunc(event.wheelDelta ?? 0));
@@ -415,9 +513,11 @@ export class ConversationViewer implements Component {
     }
     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)) return undefined;
+    // 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") {
       let selected = result.focusedBlockIndex;
@@ -426,7 +526,7 @@ export class ConversationViewer implements Component {
         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);
@@ -436,9 +536,17 @@ export class ConversationViewer implements Component {
     return result;
   }
 
+  private isPreviewButtonHit(x: number, y: number, innerW: number): boolean {
+    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;
+  }
+
   private isCloseButtonHit(x: number, y: number, innerW: number): boolean {
     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;
   }
@@ -449,15 +557,24 @@ export class ConversationViewer implements Component {
     const th = this.theme;
     const innerW = Math.max(1, width - 4);
     this.lastInnerW = innerW;
+    const contentWidth = this.transcriptWidth(innerW);
     const lines: string[] = [];
     const pad = (s: string, len: number) => s + " ".repeat(Math.max(0, len - visibleWidth(s)));
     const row = (content: string) => th.fg("border", "│") + " " + truncateToWidth(pad(content, innerW), innerW, "...", true) + " " + th.fg("border", "│");
+    const contentRow = (content: string, lineIndex: number, totalLines: number, viewportHeight: number, offset: number) => {
+      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", "○");
@@ -465,22 +582,28 @@ export class ConversationViewer implements Component {
     const headerParts: string[] = [duration];
     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) this.scrollOffset = maxScroll;
@@ -494,7 +617,7 @@ export class ConversationViewer implements Component {
       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,9 +633,14 @@ export class ConversationViewer implements Component {
         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) {
@@ -529,14 +657,21 @@ export class ConversationViewer implements Component {
       lines.push(row(truncateToWidth(th.fg("accent", query) + th.fg("dim", matchCount) + hints, innerW, "...", true)));
     } else {
       const actions: string[] = [];
-      if (this.canSteer()) actions.push(th.fg("dim", "e steer"));
+      if (this.canSteer()) 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);
@@ -577,6 +712,7 @@ export class ConversationViewer implements Component {
       if (this.closed) return;
       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();
@@ -595,7 +731,7 @@ export class ConversationViewer implements Component {
         const end = Math.min(this.cachedLines.length, start + Math.max(0, range.height));
         for (let index = start; index < end; index++) {
           const line = snapshotLines[index];
-          if (line) this.cachedLines[index] = { ...line };
+          if (line) this.cachedLines[index] = makeRenderLine({ ...line });
         }
       }
     }
@@ -613,46 +749,125 @@ export class ConversationViewer implements Component {
     return Math.max(MIN_VIEWPORT, maxRows - this.chromeLines());
   }
 
+  /** Full inner width includes the one column reserved for the transcript rail. */
+  private transcriptWidth(innerW: number): number {
+    return Math.max(1, innerW - 1);
+  }
+
   private chromeLines(): number {
-    return CHROME_LINES_BASE + (this.invocationLine() ? 1 : 0) + (this.composer ? 1 : 0);
+    return CHROME_LINES_BASE + 1 + (this.composer ? 1 : 0);
   }
 
   private invocationLine(): string | undefined {
     const liveModel = this.isLive() ? this.record.session?.model : undefined;
-    const invocation = this.record.invocation
+    const captured = this.record.invocation as (AgentRecord["invocation"] & {
+      effectiveModelName?: string;
+      effectiveModelId?: string;
+      effectiveThinking?: EffectiveThinkingLevel;
+    }) | undefined;
+    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(" · ")}`);
+    if (!invocation) 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(" · ")}`);
+  }
+
+  private currentMarkdownMode(): ViewerMarkdownMode {
+    return this.markdownModeOverride ?? this.viewerMarkdown?.() ?? "assistant";
+  }
+
+  private cycleMarkdownMode(): void {
+    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();
   }
 
-  private buildContentLines(width: number): RenderLine[] {
-    if (width <= 0) return [];
-    if (this.cachedVersion === this.cacheVersion && this.cachedWidth === width) return this.cachedLines;
+  private sessionKey(): string {
+    return this.session.messages.map(message => {
+      const value = message as unknown as { role?: unknown; content?: unknown; output?: unknown; command?: unknown };
+      const content = value.content;
+      const summarize = (text: string): string => `${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");
+  }
+
+  private blockSignature(block: ConversationBlock): string {
+    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}`;
+  }
+
+  private syncBlocksFromSession(): void {
+    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;
+    }
+  }
+
+  private buildContentLines(width: number): PublicRenderLines {
+    if (width <= 0) 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: RenderLine[] = 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];
@@ -672,13 +887,13 @@ export class ConversationViewer implements Component {
     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);
   }
 
   private currentMessageIndex(): number {
@@ -744,7 +959,7 @@ export class ConversationViewer implements Component {
   private moveToolFocus(direction: 1 | -1): void {
     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);
@@ -755,7 +970,7 @@ export class ConversationViewer implements Component {
   }
 
   private focusNearbyTool(direction: 1 | -1): void {
-    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 is number => index >= 0);
@@ -786,7 +1001,7 @@ export class ConversationViewer implements Component {
   }
 
   private openFocusedToolPreview(): void {
-    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)