mini-coder 0.5.12 → 0.5.14

package/src/ui/conversation.ts

@@ -17,12 +17,9 @@ import {
   normalize,
   relative,
 } from "node:path";
-import {
-  SyntaxHighlight,
-  type SyntaxHighlightTheme,
-} from "@cel-tui/components";
+import { SyntaxHighlight } from "@cel-tui/components";
 import { HStack, measureContentHeight, Text, VStack } from "@cel-tui/core";
-import type { Color, Node } from "@cel-tui/types";
+import type { Node } from "@cel-tui/types";
 import type {
   AssistantMessage,
   TextContent,
@@ -32,11 +29,13 @@ import type {
 import type { AppState } from "../index.ts";
 import type { UiMessage } from "../session.ts";
 import { readBoolean, readFiniteNumber, readString } from "../shared.ts";
-import type { Theme } from "../theme.ts";
+import { getSyntaxHighlightTheme, type Theme } from "../theme.ts";
 import {
   parseGrepResult,
+  parseLegacyShellResult,
   parseReadContinuationHint,
   parseReadResult,
+  parseShellResultDetails,
   parseTodoSnapshot,
   type TodoItem,
 } from "../tools.ts";
@@ -54,26 +53,6 @@ const DEFAULT_TOOL_PREVIEW_WIDTH = 80;
 /** Horizontal columns consumed by tool-block padding and the left border. */
 const TOOL_BLOCK_CHROME_WIDTH = 4;
 
-/** ANSI16 fallback hex values for syntax-highlighter theme overrides. */
-const ANSI_COLOR_HEX: Readonly<Record<Color, string>> = {
-  color00: "#000000",
-  color01: "#cd3131",
-  color02: "#0dbc79",
-  color03: "#e5e510",
-  color04: "#2472c8",
-  color05: "#bc3fbc",
-  color06: "#11a8cd",
-  color07: "#e5e5e5",
-  color08: "#666666",
-  color09: "#f14c4c",
-  color10: "#23d18b",
-  color11: "#f5f543",
-  color12: "#3b8eea",
-  color13: "#d670d6",
-  color14: "#29b8db",
-  color15: "#ffffff",
-};
-
 /** A pending tool result shown in the streaming tail. */
 export interface PendingToolResult {
   /** Tool call id from the assistant message. */
@@ -82,6 +61,8 @@ export interface PendingToolResult {
   toolName: string;
   /** Progressive or final tool-result content captured so far. */
   content: ToolResultMessage["content"];
+  /** Optional structured details preserved on the tool result. */
+  details?: ToolResultMessage["details"];
   /** Whether the tool result was an error. */
   isError: boolean;
 }
@@ -138,16 +119,14 @@ interface ToolCallArgsCache {
   entries: Map<string, ToolCallRenderInfo>;
 }
 
-interface ConversationRenderCache {
-  messages: readonly ConversationMessage[] | null;
-  startIndex: number;
-  count: number;
+interface ConversationMessageRenderCacheEntry {
+  node: Node | null;
+  height: number;
   showReasoning: boolean;
   verbose: boolean;
   previewWidth: number;
   cwd: string | null;
   theme: Theme | null;
-  nodes: Node[];
 }
 
 type ToolRenderDirection = "->" | "<-";
@@ -200,9 +179,36 @@ export interface ToolRenderLine {
   text: string;
 }
 
+/** A rendered conversation item plus its measured height. */
+export interface ConversationLogItem {
+  /** Rendered conversation node. */
+  node: Node;
+  /** Intrinsic item height in rows, excluding conversation gaps. */
+  height: number;
+}
+
+/** Rendered items plus cached cumulative intrinsic heights. */
+export interface ConversationLayoutSnapshot {
+  /** Rendered items in on-screen order. */
+  items: readonly ConversationLogItem[];
+  /** Cumulative intrinsic heights, excluding inter-item gaps. */
+  prefixHeights: readonly number[];
+}
+
+interface ConversationLayoutCache {
+  messages: readonly ConversationMessage[] | null;
+  count: number;
+  showReasoning: boolean;
+  verbose: boolean;
+  previewWidth: number;
+  cwd: string | null;
+  theme: Theme | null;
+  items: ConversationLogItem[];
+  prefixHeights: number[];
+}
+
 const EMPTY_STREAMING_CONTENT: AssistantMessage["content"] = [];
 const EMPTY_PENDING_TOOL_RESULTS: readonly PendingToolResult[] = [];
-const EMPTY_RENDER_NODES: Node[] = [];
 const EMPTY_TOOL_RESULT_ARGS: Record<string, unknown> = Object.freeze({});
 
 const toolCallArgsCache: ToolCallArgsCache = {
@@ -211,16 +217,21 @@ const toolCallArgsCache: ToolCallArgsCache = {
   entries: new Map(),
 };
 
-const conversationRenderCache: ConversationRenderCache = {
+let conversationMessageRenderCache = new WeakMap<
+  ConversationMessage,
+  ConversationMessageRenderCacheEntry
+>();
+
+const conversationLayoutCache: ConversationLayoutCache = {
   messages: null,
-  startIndex: 0,
   count: 0,
   showReasoning: false,
   verbose: false,
   previewWidth: DEFAULT_TOOL_PREVIEW_WIDTH,
   cwd: null,
   theme: null,
-  nodes: EMPTY_RENDER_NODES,
+  items: [],
+  prefixHeights: [0],
 };
 
 /** Reset cached committed conversation renders. */
@@ -228,15 +239,16 @@ export function resetConversationRenderCache(): void {
   toolCallArgsCache.messages = null;
   toolCallArgsCache.count = 0;
   toolCallArgsCache.entries = new Map();
-  conversationRenderCache.messages = null;
-  conversationRenderCache.startIndex = 0;
-  conversationRenderCache.count = 0;
-  conversationRenderCache.showReasoning = false;
-  conversationRenderCache.verbose = false;
-  conversationRenderCache.previewWidth = DEFAULT_TOOL_PREVIEW_WIDTH;
-  conversationRenderCache.cwd = null;
-  conversationRenderCache.theme = null;
-  conversationRenderCache.nodes = EMPTY_RENDER_NODES;
+  conversationMessageRenderCache = new WeakMap();
+  conversationLayoutCache.messages = null;
+  conversationLayoutCache.count = 0;
+  conversationLayoutCache.showReasoning = false;
+  conversationLayoutCache.verbose = false;
+  conversationLayoutCache.previewWidth = DEFAULT_TOOL_PREVIEW_WIDTH;
+  conversationLayoutCache.cwd = null;
+  conversationLayoutCache.theme = null;
+  conversationLayoutCache.items = [];
+  conversationLayoutCache.prefixHeights = [0];
 }
 
 /** Render a user message with a subtle background. */
@@ -551,12 +563,56 @@ function formatTodoWriteCallSummary(args: Record<string, unknown>): string {
   return `Updating todos... ${todoCount} ${todoLabel} updated`;
 }
 
-/** Strip shell execution labels and normalize the exit line for the UI. */
-function normalizeShellOutput(output: string): string {
-  return output
-    .replace(/^Exit code: (\d+)(?:\n|$)/, (_, code: string) => `exit ${code}\n`)
-    .replace(/(^|\n)\[stderr\]\n/g, "$1")
-    .replace(/\n$/, "");
+function parseShellToolContent(
+  content: ToolResultMessage["content"],
+  details?: ToolResultMessage["details"],
+) {
+  return (
+    parseShellResultDetails(details) ??
+    parseLegacyShellResult(getToolContentText(content))
+  );
+}
+
+function buildShellResultLines(
+  content: ToolResultMessage["content"],
+  details?: ToolResultMessage["details"],
+): { bodyLines: ToolRenderLine[]; footerLines?: ToolRenderLine[] } {
+  const result = parseShellToolContent(content, details);
+  if (!result) {
+    return {
+      bodyLines: splitToolTextLines(
+        normalizeDisplayLineEndings(getToolContentText(content)),
+        "text",
+      ),
+    };
+  }
+
+  const bodyLines: ToolRenderLine[] = [];
+  const stdout = normalizeDisplayLineEndings(result.stdout);
+  const stderr = normalizeDisplayLineEndings(result.stderr);
+
+  if (stdout !== "") {
+    bodyLines.push(...splitToolTextLines(stdout, "text"));
+  }
+  if (stderr !== "") {
+    if (bodyLines.length > 0) {
+      bodyLines.push({ kind: "text", text: "" });
+    }
+    bodyLines.push(...splitToolTextLines(stderr, "text"));
+  }
+  if (bodyLines.length === 0) {
+    bodyLines.push({ kind: "summary", text: "(no output)" });
+  }
+
+  return {
+    bodyLines,
+    footerLines: [
+      {
+        kind: "text",
+        text: `exit ${result.exitCode}`,
+      },
+    ],
+  };
 }
 
 function getToolHeaderName(toolName: string): string {
@@ -579,137 +635,6 @@ function getToolHeaderColor(toolName: string, theme: Theme) {
   }
 }
 
-type SyntaxThemeRegistration = Exclude<SyntaxHighlightTheme, string>;
-type SyntaxThemeTokenColor = NonNullable<
-  SyntaxThemeRegistration["tokenColors"]
->[number];
-
-const syntaxThemeCache: Record<
-  SyntaxThemeVariant,
-  WeakMap<Theme, SyntaxThemeRegistration>
-> = {
-  markdown: new WeakMap(),
-  code: new WeakMap(),
-  shell: new WeakMap(),
-};
-
-function colorToHex(color: Color | undefined): string | undefined {
-  return color ? ANSI_COLOR_HEX[color] : undefined;
-}
-
-function pushSyntaxTokenColor(
-  tokenColors: SyntaxThemeTokenColor[],
-  scope: string | readonly string[],
-  foreground: Color | undefined,
-  fontStyle?: string,
-): void {
-  const foregroundHex = colorToHex(foreground);
-  if (!foregroundHex && !fontStyle) {
-    return;
-  }
-
-  tokenColors.push({
-    scope,
-    settings: {
-      ...(foregroundHex ? { foreground: foregroundHex } : {}),
-      ...(fontStyle ? { fontStyle } : {}),
-    },
-  });
-}
-
-function pushShellSyntaxTokenColors(
-  tokenColors: SyntaxThemeTokenColor[],
-  theme: Theme,
-): void {
-  pushSyntaxTokenColor(
-    tokenColors,
-    ["comment", "quote", "doctag"],
-    theme.mutedText,
-    "italic",
-  );
-  pushSyntaxTokenColor(
-    tokenColors,
-    ["keyword", "operator"],
-    theme.secondaryAccentText,
-  );
-  pushSyntaxTokenColor(
-    tokenColors,
-    ["function_", "function", "title"],
-    theme.accentText,
-  );
-  pushSyntaxTokenColor(
-    tokenColors,
-    ["built_in", "class_", "class", "inherited__", "type"],
-    theme.accentText,
-  );
-  pushSyntaxTokenColor(
-    tokenColors,
-    ["escape", "literal", "number", "symbol"],
-    theme.secondaryAccentText ?? theme.accentText,
-  );
-  pushSyntaxTokenColor(tokenColors, ["code", "string"], theme.diffAdded);
-  pushSyntaxTokenColor(tokenColors, "regexp", theme.diffRemoved);
-  pushSyntaxTokenColor(
-    tokenColors,
-    ["attr", "attribute", "params", "property", "selector-attr"],
-    theme.accentText,
-  );
-  pushSyntaxTokenColor(
-    tokenColors,
-    [
-      "name",
-      "tag",
-      "selector-class",
-      "selector-id",
-      "selector-pseudo",
-      "selector-tag",
-    ],
-    theme.accentText,
-  );
-}
-
-function pushMarkdownSyntaxTokenColors(
-  tokenColors: SyntaxThemeTokenColor[],
-  theme: Theme,
-): void {
-  pushSyntaxTokenColor(tokenColors, "quote", theme.mutedText, "italic");
-  pushSyntaxTokenColor(tokenColors, "section", theme.accentText, "bold");
-  pushSyntaxTokenColor(
-    tokenColors,
-    "bullet",
-    theme.secondaryAccentText,
-    "bold",
-  );
-  pushSyntaxTokenColor(tokenColors, ["code", "string"], theme.diffAdded);
-  pushSyntaxTokenColor(tokenColors, "link", theme.accentText, "underline");
-  pushSyntaxTokenColor(tokenColors, "strong", undefined, "bold");
-  pushSyntaxTokenColor(tokenColors, "emphasis", undefined, "italic");
-}
-
-function getSyntaxTheme(
-  theme: Theme,
-  variant: SyntaxThemeVariant,
-): SyntaxThemeRegistration {
-  const cache = syntaxThemeCache[variant];
-  const cached = cache.get(theme);
-  if (cached) {
-    return cached;
-  }
-
-  const tokenColors: SyntaxThemeTokenColor[] = [];
-  if (variant === "markdown") {
-    pushMarkdownSyntaxTokenColors(tokenColors, theme);
-  } else {
-    pushShellSyntaxTokenColors(tokenColors, theme);
-  }
-
-  const syntaxTheme: SyntaxThemeRegistration = {
-    tokenColors,
-  };
-  cache.set(theme, syntaxTheme);
-  return syntaxTheme;
-}
-
 function getHighlightedBodyNode(
   spec: HighlightedBodySpec,
   theme: Theme,
@@ -720,7 +645,7 @@ function getHighlightedBodyNode(
 
   try {
     return SyntaxHighlight(spec.text, spec.language, {
-      theme: getSyntaxTheme(theme, spec.themeVariant),
+      theme: getSyntaxHighlightTheme(theme, spec.themeVariant),
     });
   } catch {
     return null;
@@ -812,36 +737,58 @@ function renderTodoChecklist(todos: readonly TodoItem[], theme: Theme): Node {
   );
 }
 
-function measureToolNodesHeight(lines: readonly Node[], width: number): number {
-  if (lines.length === 0) {
-    return 0;
+function measureToolNodeHeight(node: Node, width: number): number {
+  return measureContentHeight(VStack({}, [node]), { width });
+}
+
+function renderFullToolBody(spec: ToolBlockSpec, theme: Theme): Node | null {
+  if (spec.highlightedBody) {
+    const highlighted = getHighlightedBodyNode(spec.highlightedBody, theme);
+    if (highlighted) {
+      return highlighted;
+    }
   }
 
-  return measureContentHeight(VStack({}, [...lines]), { width });
-}
+  if (spec.bodyLines.length === 0) {
+    return null;
+  }
 
-function measureToolNodeHeight(line: Node, width: number): number {
-  return measureContentHeight(VStack({}, [line]), { width });
+  return VStack({}, renderToolLines(spec.bodyLines, theme));
 }
 
-function countVisibleTailNodes(
-  lines: readonly Node[],
-  width: number,
-  maxRows: number,
-): number {
-  let remainingRows = maxRows;
-  let visibleLineCount = 0;
+function renderToolBodyLines(
+  spec: ToolBlockSpec,
+  lines: readonly ToolRenderLine[],
+  theme: Theme,
+): Node | null {
+  if (lines.length === 0) {
+    return null;
+  }
 
-  for (let index = lines.length - 1; index >= 0; index--) {
-    const lineHeight = measureToolNodeHeight(lines[index]!, width);
-    if (lineHeight > remainingRows) {
-      return visibleLineCount > 0 ? visibleLineCount : 1;
+  if (spec.highlightedBody) {
+    const highlighted = getHighlightedBodyNode(
+      {
+        ...spec.highlightedBody,
+        text: lines.map((line) => line.text).join("\n"),
+      },
+      theme,
+    );
+    if (highlighted) {
+      return highlighted;
     }
-    remainingRows -= lineHeight;
-    visibleLineCount += 1;
   }
 
-  return visibleLineCount;
+  return VStack({}, renderToolLines(lines, theme));
+}
+
+function wrapToolPreviewBody(body: Node): Node {
+  return VStack(
+    {
+      height: UI_TOOL_PREVIEW_ROWS,
+      justifyContent: "end",
+    },
+    body.type === "vstack" ? [...body.children] : [body],
+  );
 }
 
 function renderToolHeaderPill(
@@ -874,93 +821,47 @@ function renderToolHeaderRow(spec: ToolBlockSpec, theme: Theme): Node {
   return HStack({}, children);
 }
 
-function renderToolBodyFromNodes(
-  lines: readonly Node[],
-  previewBody: boolean,
-  opts: Pick<ConversationRenderOpts, "previewWidth" | "theme" | "verbose">,
+function renderCompactToolBody(
+  spec: ToolBlockSpec,
+  opts: Pick<ConversationRenderOpts, "previewWidth" | "theme">,
 ): { body: Node | null; summary?: ToolRenderLine } {
-  if (lines.length === 0) {
+  if (spec.bodyLines.length === 0) {
     return { body: null };
   }
 
-  if (opts.verbose || !previewBody) {
-    return { body: VStack({}, [...lines]) };
-  }
-
   const bodyWidth = getToolBodyWidth(opts.previewWidth);
-  const totalHeight = measureToolNodesHeight(lines, bodyWidth);
-  if (totalHeight <= UI_TOOL_PREVIEW_ROWS) {
-    return { body: VStack({}, [...lines]) };
-  }
+  let previewStart = Math.max(0, spec.bodyLines.length - UI_TOOL_PREVIEW_ROWS);
 
-  const visibleLineCount = countVisibleTailNodes(
-    lines,
-    bodyWidth,
-    UI_TOOL_PREVIEW_ROWS,
-  );
-  const previewLines = lines.slice(-visibleLineCount);
-  const hiddenLineCount = Math.max(0, lines.length - visibleLineCount);
-
-  return {
-    body: VStack(
-      {
-        height: UI_TOOL_PREVIEW_ROWS,
-        justifyContent: "end",
-      },
-      [...previewLines],
-    ),
-    summary:
-      hiddenLineCount > 0
-        ? {
-            kind: "summary",
-            text: `And ${hiddenLineCount} lines more`,
-          }
-        : undefined,
-  };
-}
+  for (;;) {
+    const previewLines = spec.bodyLines.slice(previewStart);
+    const previewBody = renderToolBodyLines(spec, previewLines, opts.theme);
+    if (!previewBody) {
+      return { body: null };
+    }
 
-function renderToolBodyFromHighlightedNode(
-  highlighted: Node,
-  previewBody: boolean,
-  opts: Pick<ConversationRenderOpts, "previewWidth" | "theme" | "verbose">,
-): { body: Node | null; summary?: ToolRenderLine } {
-  if (opts.verbose || !previewBody) {
-    return { body: highlighted };
-  }
+    const previewHeight = measureToolNodeHeight(previewBody, bodyWidth);
+    if (
+      previewHeight <= UI_TOOL_PREVIEW_ROWS ||
+      previewStart >= spec.bodyLines.length - 1
+    ) {
+      const hiddenLineCount = previewStart;
+      return {
+        body:
+          hiddenLineCount > 0 || previewHeight > UI_TOOL_PREVIEW_ROWS
+            ? wrapToolPreviewBody(previewBody)
+            : previewBody,
+        summary:
+          hiddenLineCount > 0
+            ? {
+                kind: "summary",
+                text: `And ${hiddenLineCount} lines more`,
+              }
+            : undefined,
+      };
+    }
 
-  const bodyWidth = getToolBodyWidth(opts.previewWidth);
-  const totalHeight = measureToolNodeHeight(highlighted, bodyWidth);
-  if (totalHeight <= UI_TOOL_PREVIEW_ROWS || highlighted.type !== "vstack") {
-    return { body: highlighted };
+    previewStart += 1;
   }
-
-  const visibleLineCount = countVisibleTailNodes(
-    highlighted.children,
-    bodyWidth,
-    UI_TOOL_PREVIEW_ROWS,
-  );
-  const previewLines = highlighted.children.slice(-visibleLineCount);
-  const hiddenLineCount = Math.max(
-    0,
-    highlighted.children.length - visibleLineCount,
-  );
-
-  return {
-    body: VStack(
-      {
-        height: UI_TOOL_PREVIEW_ROWS,
-        justifyContent: "end",
-      },
-      [...previewLines],
-    ),
-    summary:
-      hiddenLineCount > 0
-        ? {
-            kind: "summary",
-            text: `And ${hiddenLineCount} lines more`,
-          }
-        : undefined,
-  };
 }
 
 function renderToolBody(
@@ -971,25 +872,13 @@ function renderToolBody(
     return { body: spec.bodyNode };
   }
 
-  if (spec.highlightedBody) {
-    const highlighted = getHighlightedBodyNode(
-      spec.highlightedBody,
-      opts.theme,
-    );
-    if (highlighted) {
-      return renderToolBodyFromHighlightedNode(
-        highlighted,
-        spec.previewBody,
-        opts,
-      );
-    }
+  if (opts.verbose || !spec.previewBody) {
+    return {
+      body: renderFullToolBody(spec, opts.theme),
+    };
   }
 
-  return renderToolBodyFromNodes(
-    renderToolLines(spec.bodyLines, opts.theme),
-    spec.previewBody,
-    opts,
-  );
+  return renderCompactToolBody(spec, opts);
 }
 
 /** Render a tool block with a left border and compact header pill. */
@@ -1169,6 +1058,10 @@ function buildReadImageToolCallSpec(
   };
 }
 
+function isMcpToolName(toolName: string): boolean {
+  return toolName.includes("__");
+}
+
 function buildGenericToolCallSpec(
   toolName: string,
   args: Record<string, unknown>,
@@ -1178,7 +1071,7 @@ function buildGenericToolCallSpec(
     toolName,
     direction: "->",
     bodyLines: text && text !== "{}" ? splitToolTextLines(text, "text") : [],
-    previewBody: false,
+    previewBody: isMcpToolName(toolName),
   };
 }
 
@@ -1219,14 +1112,16 @@ function renderToolCall(
 
 function buildShellToolResultSpec(
   content: ToolResultMessage["content"],
+  details?: ToolResultMessage["details"],
 ): ToolBlockSpec {
+  const shellResult = buildShellResultLines(content, details);
   return {
     toolName: "shell",
     direction: "<-",
-    bodyLines: splitToolTextLines(
-      normalizeShellOutput(getToolContentText(content)),
-      "text",
-    ),
+    bodyLines: shellResult.bodyLines,
+    ...(shellResult.footerLines
+      ? { footerLines: shellResult.footerLines }
+      : {}),
     previewBody: true,
   };
 }
@@ -1414,7 +1309,7 @@ function buildGenericToolResultSpec(
     toolName,
     direction: "<-",
     bodyLines: splitToolTextLines(output, isError ? "error" : "text"),
-    previewBody: false,
+    previewBody: isMcpToolName(toolName),
   };
 }
 
@@ -1427,9 +1322,10 @@ function renderToolResultContent(
     ConversationRenderOpts,
     "previewWidth" | "verbose" | "theme" | "cwd"
   >,
+  details?: ToolResultMessage["details"],
 ): Node {
   if (toolName === "shell") {
-    return renderToolBlock(buildShellToolResultSpec(content), opts);
+    return renderToolBlock(buildShellToolResultSpec(content, details), opts);
   }
   if (toolName === "read") {
     return renderToolBlock(
@@ -1476,6 +1372,7 @@ function renderToolResultContent(
  * @param resultText - Text content from the tool result message.
  * @param isError - Whether the tool execution failed.
  * @param opts - Shared conversation render options.
+ * @param details - Optional structured tool-result details.
  * @returns The rendered tool block node.
  */
 export function renderToolResult(
@@ -1484,12 +1381,20 @@ export function renderToolResult(
   resultText: string,
   isError: boolean,
   opts: ConversationRenderOpts,
+  details?: ToolResultMessage["details"],
 ): Node {
   const content: ToolResultMessage["content"] = resultText
     ? [{ type: "text", text: resultText }]
     : [];
 
-  return renderToolResultContent(toolName, args, content, isError, opts);
+  return renderToolResultContent(
+    toolName,
+    args,
+    content,
+    isError,
+    opts,
+    details,
+  );
 }
 
 function renderUiTodoMessage(
@@ -1548,13 +1453,6 @@ function renderEmptyConversationBanner(
   ]);
 }
 
-function pushConversationNode(nodes: Node[], node: Node | null): void {
-  if (!node) {
-    return;
-  }
-  nodes.push(node);
-}
-
 function rememberToolCallArgs(
   message: AssistantMessage,
   toolCallArgs: Map<string, ToolCallRenderInfo>,
@@ -1576,8 +1474,16 @@ function renderToolResultMessage(
   content: ToolResultMessage["content"],
   isError: boolean,
   renderOpts: ConversationRenderOpts,
+  details?: ToolResultMessage["details"],
 ): Node {
-  return renderToolResultContent(toolName, args, content, isError, renderOpts);
+  return renderToolResultContent(
+    toolName,
+    args,
+    content,
+    isError,
+    renderOpts,
+    details,
+  );
 }
 
 function renderConversationMessage(
@@ -1604,6 +1510,7 @@ function renderConversationMessage(
     message.content,
     message.isError,
     renderOpts,
+    message.details,
   );
 }
 
@@ -1627,60 +1534,150 @@ function cacheToolCallArgs(messages: readonly ConversationMessage[]): void {
   toolCallArgsCache.count = messages.length;
 }
 
-function canReuseCommittedConversationCache(
-  state: ConversationLogState,
-  startIndex: number,
+function canReuseConversationMessageRender(
+  cached: ConversationMessageRenderCacheEntry | undefined,
+  renderOpts: ConversationRenderOpts,
   previewWidth: number,
-): boolean {
+): cached is ConversationMessageRenderCacheEntry {
   return (
-    conversationRenderCache.messages === state.messages &&
-    conversationRenderCache.startIndex === startIndex &&
-    conversationRenderCache.showReasoning === state.showReasoning &&
-    conversationRenderCache.verbose === state.verbose &&
-    conversationRenderCache.previewWidth === previewWidth &&
-    conversationRenderCache.cwd === state.cwd &&
-    conversationRenderCache.theme === state.theme &&
-    conversationRenderCache.count <= state.messages.length
+    cached !== undefined &&
+    cached.showReasoning === renderOpts.showReasoning &&
+    cached.verbose === renderOpts.verbose &&
+    cached.previewWidth === previewWidth &&
+    cached.cwd === renderOpts.cwd &&
+    cached.theme === renderOpts.theme
   );
 }
 
-function cacheCommittedConversation(
+function canReuseCommittedConversationLayout(
   state: ConversationLogState,
   renderOpts: ConversationRenderOpts,
-  startIndex: number,
+  previewWidth: number,
+): boolean {
+  return (
+    conversationLayoutCache.messages === state.messages &&
+    conversationLayoutCache.count <= state.messages.length &&
+    conversationLayoutCache.showReasoning === renderOpts.showReasoning &&
+    conversationLayoutCache.verbose === renderOpts.verbose &&
+    conversationLayoutCache.previewWidth === previewWidth &&
+    conversationLayoutCache.cwd === renderOpts.cwd &&
+    conversationLayoutCache.theme === renderOpts.theme
+  );
+}
+
+function appendConversationLogItem(
+  items: ConversationLogItem[],
+  prefixHeights: number[],
+  item: ConversationLogItem | null,
 ): void {
+  if (!item) {
+    return;
+  }
+
+  items.push(item);
+  prefixHeights.push(prefixHeights[prefixHeights.length - 1]! + item.height);
+}
+
+function measureConversationItemHeight(
+  node: Node,
+  previewWidth: number,
+): number {
+  return measureContentHeight(node, {
+    width: getPreviewWidth(previewWidth),
+  });
+}
+
+function createConversationLogItem(
+  node: Node | null,
+  previewWidth: number,
+): ConversationLogItem | null {
+  if (!node) {
+    return null;
+  }
+
+  return {
+    node,
+    height: measureConversationItemHeight(node, previewWidth),
+  };
+}
+
+function getCommittedConversationLogItem(
+  message: ConversationMessage,
+  renderOpts: ConversationRenderOpts,
+): ConversationLogItem | null {
   const previewWidth = getPreviewWidth(renderOpts.previewWidth);
-  cacheToolCallArgs(state.messages);
+  const cached = conversationMessageRenderCache.get(message);
+  if (canReuseConversationMessageRender(cached, renderOpts, previewWidth)) {
+    if (!cached.node) {
+      return null;
+    }
+    return {
+      node: cached.node,
+      height: cached.height,
+    };
+  }
 
-  if (!canReuseCommittedConversationCache(state, startIndex, previewWidth)) {
-    conversationRenderCache.messages = state.messages;
-    conversationRenderCache.startIndex = startIndex;
-    conversationRenderCache.count = startIndex;
-    conversationRenderCache.showReasoning = state.showReasoning;
-    conversationRenderCache.verbose = state.verbose;
-    conversationRenderCache.previewWidth = previewWidth;
-    conversationRenderCache.cwd = state.cwd;
-    conversationRenderCache.theme = state.theme;
-    conversationRenderCache.nodes = [];
+  const node = renderConversationMessage(
+    message,
+    renderOpts,
+    toolCallArgsCache.entries,
+    renderOpts.theme,
+  );
+  const nextEntry: ConversationMessageRenderCacheEntry = {
+    node,
+    height: node ? measureConversationItemHeight(node, previewWidth) : 0,
+    showReasoning: renderOpts.showReasoning,
+    verbose: renderOpts.verbose,
+    previewWidth,
+    cwd: renderOpts.cwd ?? null,
+    theme: renderOpts.theme,
+  };
+  conversationMessageRenderCache.set(message, nextEntry);
+
+  if (!node) {
+    return null;
+  }
+
+  return {
+    node,
+    height: nextEntry.height,
+  };
+}
+
+function getCommittedConversationLayoutSnapshot(
+  state: ConversationLogState,
+  renderOpts: ConversationRenderOpts,
+): ConversationLayoutSnapshot {
+  const previewWidth = getPreviewWidth(renderOpts.previewWidth);
+  if (!canReuseCommittedConversationLayout(state, renderOpts, previewWidth)) {
+    conversationLayoutCache.messages = state.messages;
+    conversationLayoutCache.count = 0;
+    conversationLayoutCache.showReasoning = renderOpts.showReasoning;
+    conversationLayoutCache.verbose = renderOpts.verbose;
+    conversationLayoutCache.previewWidth = previewWidth;
+    conversationLayoutCache.cwd = renderOpts.cwd ?? null;
+    conversationLayoutCache.theme = renderOpts.theme;
+    conversationLayoutCache.items = [];
+    conversationLayoutCache.prefixHeights = [0];
   }
 
   for (
-    let index = conversationRenderCache.count;
+    let index = conversationLayoutCache.count;
     index < state.messages.length;
     index++
   ) {
-    pushConversationNode(
-      conversationRenderCache.nodes,
-      renderConversationMessage(
-        state.messages[index]!,
-        renderOpts,
-        toolCallArgsCache.entries,
-        state.theme,
-      ),
+    appendConversationLogItem(
+      conversationLayoutCache.items,
+      conversationLayoutCache.prefixHeights,
+      getCommittedConversationLogItem(state.messages[index]!, renderOpts),
     );
   }
 
-  conversationRenderCache.count = state.messages.length;
+  conversationLayoutCache.count = state.messages.length;
+  return {
+    items: conversationLayoutCache.items,
+    prefixHeights: conversationLayoutCache.prefixHeights,
+  };
 }
 
 function hasStreamingTail(streaming: StreamingConversationState): boolean {
@@ -1691,21 +1688,78 @@ function hasStreamingTail(streaming: StreamingConversationState): boolean {
   );
 }
 
+function appendStreamingConversationLogItems(
+  items: ConversationLogItem[],
+  prefixHeights: number[],
+  streaming: StreamingConversationState,
+  renderOpts: ConversationRenderOpts,
+  previewWidth: number,
+): void {
+  appendConversationLogItem(
+    items,
+    prefixHeights,
+    createConversationLogItem(
+      renderAssistantMessage(
+        {
+          content: streaming.content,
+        },
+        renderOpts,
+      ),
+      previewWidth,
+    ),
+  );
+
+  for (const pendingToolResult of streaming.pendingToolResults) {
+    const info = toolCallArgsCache.entries.get(pendingToolResult.toolCallId);
+    appendConversationLogItem(
+      items,
+      prefixHeights,
+      createConversationLogItem(
+        renderToolResultMessage(
+          info?.name ?? pendingToolResult.toolName,
+          info?.args ?? EMPTY_TOOL_RESULT_ARGS,
+          pendingToolResult.content,
+          pendingToolResult.isError,
+          renderOpts,
+          pendingToolResult.details,
+        ),
+        previewWidth,
+      ),
+    );
+  }
+}
+
+function buildEmptyConversationBannerSnapshot(
+  state: ConversationLogState,
+  previewWidth: number,
+): ConversationLayoutSnapshot {
+  const banner = renderEmptyConversationBanner(
+    state.theme,
+    state.versionLabel ?? DEV_VERSION_LABEL,
+  );
+  const item = {
+    node: banner,
+    height: measureConversationItemHeight(banner, previewWidth),
+  };
+  return {
+    items: [item],
+    prefixHeights: [0, item.height],
+  };
+}
+
 /**
- * Build the full conversation log as an array of nodes.
+ * Build rendered conversation items plus cached cumulative intrinsic heights.
  *
  * @param state - Conversation rendering state.
  * @param streaming - Current in-progress assistant tail, if any.
- * @param startIndex - Index of the first committed message to render.
  * @param previewWidth - Available terminal width for width-aware tool previews.
- * @returns The rendered conversation log nodes.
+ * @returns Rendered items plus cumulative heights in on-screen order.
  */
-export function buildConversationLogNodes(
+export function buildConversationLayoutSnapshot(
   state: ConversationLogState,
   streaming: StreamingConversationState,
-  startIndex = 0,
   previewWidth = DEFAULT_TOOL_PREVIEW_WIDTH,
-): Node[] {
+): ConversationLayoutSnapshot {
   const renderOpts: ConversationRenderOpts = {
     showReasoning: state.showReasoning,
     verbose: state.verbose,
@@ -1714,45 +1768,69 @@ export function buildConversationLogNodes(
     previewWidth,
   };
 
-  if (state.messages.length === 0 && !hasStreamingTail(streaming)) {
-    return [
-      renderEmptyConversationBanner(
-        state.theme,
-        state.versionLabel ?? DEV_VERSION_LABEL,
-      ),
-    ];
-  }
-
-  cacheCommittedConversation(state, renderOpts, startIndex);
+  cacheToolCallArgs(state.messages);
 
-  if (!hasStreamingTail(streaming)) {
-    return conversationRenderCache.nodes;
+  const committedSnapshot = getCommittedConversationLayoutSnapshot(
+    state,
+    renderOpts,
+  );
+  const streamingTailVisible = hasStreamingTail(streaming);
+  if (!streamingTailVisible) {
+    if (committedSnapshot.items.length > 0 || state.messages.length > 0) {
+      return committedSnapshot;
+    }
+    return buildEmptyConversationBannerSnapshot(state, previewWidth);
   }
 
-  const nodes = [...conversationRenderCache.nodes];
-  pushConversationNode(
-    nodes,
-    renderAssistantMessage(
-      {
-        content: streaming.content,
-      },
-      renderOpts,
-    ),
+  const items = [...committedSnapshot.items];
+  const prefixHeights = [...committedSnapshot.prefixHeights];
+  appendStreamingConversationLogItems(
+    items,
+    prefixHeights,
+    streaming,
+    renderOpts,
+    previewWidth,
   );
+  return {
+    items,
+    prefixHeights,
+  };
+}
 
-  for (const pendingToolResult of streaming.pendingToolResults) {
-    const info = toolCallArgsCache.entries.get(pendingToolResult.toolCallId);
-    pushConversationNode(
-      nodes,
-      renderToolResultMessage(
-        info?.name ?? pendingToolResult.toolName,
-        info?.args ?? EMPTY_TOOL_RESULT_ARGS,
-        pendingToolResult.content,
-        pendingToolResult.isError,
-        renderOpts,
-      ),
-    );
-  }
+/**
+ * Build the rendered conversation items with cached per-message nodes/heights.
+ *
+ * @param state - Conversation rendering state.
+ * @param streaming - Current in-progress assistant tail, if any.
+ * @param previewWidth - Available terminal width for width-aware tool previews.
+ * @returns Rendered items in on-screen order.
+ */
+export function buildConversationLogItems(
+  state: ConversationLogState,
+  streaming: StreamingConversationState,
+  previewWidth = DEFAULT_TOOL_PREVIEW_WIDTH,
+): readonly ConversationLogItem[] {
+  return buildConversationLayoutSnapshot(state, streaming, previewWidth).items;
+}
 
-  return nodes;
+/**
+ * Build the full conversation log as an array of nodes.
+ *
+ * @param state - Conversation rendering state.
+ * @param streaming - Current in-progress assistant tail, if any.
+ * @param startIndex - Index of the first rendered item to include.
+ * @param previewWidth - Available terminal width for width-aware tool previews.
+ * @param endIndex - Exclusive rendered-item end index.
+ * @returns The rendered conversation log nodes.
+ */
+export function buildConversationLogNodes(
+  state: ConversationLogState,
+  streaming: StreamingConversationState,
+  startIndex = 0,
+  previewWidth = DEFAULT_TOOL_PREVIEW_WIDTH,
+  endIndex = Number.POSITIVE_INFINITY,
+): Node[] {
+  return buildConversationLogItems(state, streaming, previewWidth)
+    .slice(startIndex, endIndex)
+    .map((item) => item.node);
 }