@esso0428/pi-subagents 0.15.6 → 0.15.7

package/src/ui/conversation-blocks.ts

@@ -3,6 +3,15 @@ import type { AgentSession } from "@earendil-works/pi-coding-agent";
 export type ConversationBlockKind = "text" | "tool" | "meta";
 export type ConversationBlockRole = "user" | "assistant" | "tool" | "custom" | "meta";
 
+/** The durable result snapshot attached to a normalized tool block. */
+export interface ConversationToolResultSnapshot {
+  toolCallId?: string;
+  toolName?: string;
+  content?: unknown;
+  details?: unknown;
+  isError?: boolean;
+}
+
 export interface ConversationBlock {
   id: string;
   kind: ConversationBlockKind;
@@ -12,6 +21,18 @@ export interface ConversationBlock {
   copyText: string;
   fullText: string;
   toolLine?: string;
+  /** Stable call id, including a synthetic id when the provider omitted one. */
+  toolCallId?: string;
+  toolName?: string;
+  /** Original tool arguments are retained for rich input rendering. */
+  toolArguments?: unknown;
+  /** Compatibility-facing short alias used by the timeline renderer. */
+  args?: unknown;
+  /** Result details/content are retained for rich output and durable diff rendering. */
+  toolResult?: ConversationToolResultSnapshot;
+  /** Compatibility-facing short alias used by the timeline renderer. */
+  result?: ConversationToolResultSnapshot;
+  toolStatus?: "pending" | "success" | "error";
 }
 
 export interface ConversationFormatOptions {
@@ -29,11 +50,17 @@ type UnknownMessage = {
   command?: unknown;
   output?: unknown;
   toolName?: unknown;
+  toolCallId?: unknown;
+  id?: unknown;
+  name?: unknown;
+  details?: unknown;
   isError?: unknown;
   customType?: unknown;
   display?: unknown;
 };
 
+type UnknownToolCall = Record<string, unknown>;
+
 function charLimit(value: number | undefined, fallback: number): number {
   if (value === undefined || !Number.isFinite(value)) return fallback;
   return Math.max(0, Math.floor(value));
@@ -49,7 +76,7 @@ function bound(value: string, limit: number): string {
 }
 
 function asString(value: unknown): string | undefined {
-  return typeof value === "string" ? value : undefined;
+  return typeof value === "string" && value.length > 0 ? value : undefined;
 }
 
 /** Extract displayable text without leaking provider-specific or unknown parts. */
@@ -76,7 +103,7 @@ function firstNonEmptyLine(text: string): string {
   return line.trim().replace(/\s+/g, " ");
 }
 
-function toolSummary(name: string, call: Record<string, unknown>): string {
+function toolSummary(name: string, call: UnknownToolCall): string {
   const args = call.arguments && typeof call.arguments === "object"
     ? call.arguments as Record<string, unknown>
     : call.input && typeof call.input === "object"
@@ -100,6 +127,18 @@ function blockId(messageIndex: number, emitted: number, toolIndex?: number): str
   return `message-${messageIndex}-tool-${toolIndex ?? emitted}`;
 }
 
+function uniqueBlockId(preferred: string, used: Set<string>): string {
+  if (!used.has(preferred)) {
+    used.add(preferred);
+    return preferred;
+  }
+  let suffix = 2;
+  while (used.has(`${preferred}-${suffix}`)) suffix++;
+  const id = `${preferred}-${suffix}`;
+  used.add(id);
+  return id;
+}
+
 function textBlock(
   id: string,
   role: "user" | "assistant",
@@ -118,37 +157,73 @@ function textBlock(
 
 function toolCallBlock(
   id: string,
+  callId: string,
   name: string,
+  call: UnknownToolCall,
   summary: string,
 ): ConversationBlock {
   const toolLine = `· ${name} → ${summary || "(no details)"}`;
   return {
     id,
     kind: "tool",
-    role: "assistant",
-    header: "Assistant tool call",
+    role: "tool",
+    header: name,
     markdown: "",
     copyText: toolLine,
     fullText: toolLine,
     toolLine,
+    toolCallId: callId,
+    toolName: name,
+    toolArguments: call.arguments ?? call.input,
+    args: call.arguments ?? call.input,
+    toolStatus: "pending",
   };
 }
 
-function toolResultBlock(
-  id: string,
-  message: UnknownMessage,
+function resultSnapshot(message: UnknownMessage): ConversationToolResultSnapshot {
+  return {
+    toolCallId: asString(message.toolCallId) ?? asString(message.id),
+    toolName: asString(message.toolName) ?? asString(message.name),
+    content: message.content,
+    details: message.details,
+    isError: message.isError === true,
+  };
+}
+
+function applyToolResult(
+  block: ConversationBlock,
+  result: ConversationToolResultSnapshot,
   maxChars: number,
-): ConversationBlock | undefined {
-  const name = asString(message.toolName) ?? "tool";
-  const output = contentText(message.content);
-  const normalized = output.replace(/\r\n?/g, "\n");
-  if (!normalized.trim() && maxChars === 0) return undefined;
-  const success = message.isError === true ? "✗" : "✓";
+): void {
+  const name = result.toolName ?? block.toolName ?? "tool";
+  const normalized = contentText(result.content).replace(/\r\n?/g, "\n");
+  const success = result.isError ? "✗" : "✓";
   const lineCount = normalized.length === 0 ? 0 : normalized.split("\n").length;
   const charCount = normalized.length;
   const summary = firstNonEmptyLine(normalized);
+  block.toolResult = result;
+  block.result = result;
+  block.toolStatus = result.isError ? "error" : "success";
+  block.toolName = name;
+  block.header = name;
+  block.copyText = bound(`${name} ${success}\n${normalized}`, maxChars);
+  block.fullText = block.copyText;
+  block.toolLine = `· ${name} ${success} ${summary} ${lineCount}L/${charCount}c`;
+}
+
+function orphanToolResultBlock(
+  id: string,
+  result: ConversationToolResultSnapshot,
+  maxChars: number,
+): ConversationBlock {
+  const name = result.toolName ?? "tool";
+  const output = contentText(result.content).replace(/\r\n?/g, "\n");
+  const success = result.isError ? "✗" : "✓";
+  const lineCount = output.length === 0 ? 0 : output.split("\n").length;
+  const charCount = output.length;
+  const summary = firstNonEmptyLine(output);
   const toolLine = `· ${name} ${success} ${summary} ${lineCount}L/${charCount}c`;
-  const fullText = bound(`${name} ${success}\n${normalized}`, maxChars);
+  const fullText = bound(`${name} ${success}\n${output}`, maxChars);
   return {
     id,
     kind: "tool",
@@ -158,6 +233,11 @@ function toolResultBlock(
     copyText: fullText,
     fullText,
     toolLine,
+    toolCallId: result.toolCallId,
+    toolName: name,
+    toolResult: result,
+    result,
+    toolStatus: result.isError ? "error" : "success",
   };
 }
 
@@ -165,11 +245,10 @@ function bashBlock(
   id: string,
   message: UnknownMessage,
   maxChars: number,
-): ConversationBlock | undefined {
+): ConversationBlock {
   const command = asString(message.command) ?? "";
   const output = asString(message.output) ?? contentText(message.content);
   const body = command ? `$ ${command}${output ? `\n${output}` : ""}` : output;
-  if (!body.trim() && maxChars === 0) return undefined;
   const toolLine = `· bash → ${command || "(no command)"}`;
   const fullText = bound(body, maxChars);
   return {
@@ -181,6 +260,7 @@ function bashBlock(
     copyText: fullText,
     fullText,
     toolLine,
+    toolName: "bash",
   };
 }
 
@@ -204,6 +284,13 @@ function metaBlock(
   };
 }
 
+/**
+ * Convert provider messages into stable, render-oriented blocks.
+ *
+ * Tool results are attached to the original call when possible. This keeps the
+ * block in call/source order while preserving the complete result snapshot for
+ * rich rendering. Results that cannot be matched remain visible as orphan cards.
+ */
 export function formatConversationMessages(
   messages: AgentSession["messages"],
   options?: ConversationFormatOptions,
@@ -211,6 +298,26 @@ export function formatConversationMessages(
   const maxEntryChars = charLimit(options?.maxEntryChars, DEFAULT_MAX_CHARS);
   const maxToolResultChars = charLimit(options?.maxToolResultChars, DEFAULT_MAX_CHARS);
   const blocks: ConversationBlock[] = [];
+  const usedBlockIds = new Set<string>();
+  const callsById = new Map<string, ConversationBlock>();
+  const callsByName = new Map<string, ConversationBlock[]>();
+
+  const registerCall = (name: string, block: ConversationBlock) => {
+    callsById.set(block.toolCallId!, block);
+    const nameKey = name.toLowerCase();
+    const candidates = callsByName.get(nameKey) ?? [];
+    candidates.push(block);
+    callsByName.set(nameKey, candidates);
+  };
+  const unregisterCall = (block: ConversationBlock) => {
+    if (block.toolCallId) callsById.delete(block.toolCallId);
+    const nameKey = (block.toolName ?? "tool").toLowerCase();
+    const candidates = callsByName.get(nameKey);
+    if (!candidates) return;
+    const index = candidates.indexOf(block);
+    if (index >= 0) candidates.splice(index, 1);
+    if (candidates.length === 0) callsByName.delete(nameKey);
+  };
 
   for (let messageIndex = 0; messageIndex < messages.length; messageIndex++) {
     const message = messages[messageIndex] as unknown as UnknownMessage;
@@ -219,49 +326,76 @@ export function formatConversationMessages(
 
     if (role === "user") {
       const text = bound(contentText(message.content), maxEntryChars);
-      if (text.trim()) blocks.push(textBlock(blockId(messageIndex, emitted++), "user", text));
+      if (text.trim()) {
+        blocks.push(textBlock(uniqueBlockId(blockId(messageIndex, emitted), usedBlockIds), "user", text));
+      }
       continue;
     }
 
     if (role === "assistant") {
       const parts = Array.isArray(message.content) ? message.content : [];
       const text = bound(contentText(parts), maxEntryChars);
-      if (text.trim()) blocks.push(textBlock(blockId(messageIndex, emitted++), "assistant", text));
+      if (text.trim()) {
+        blocks.push(textBlock(uniqueBlockId(blockId(messageIndex, emitted++), usedBlockIds), "assistant", text));
+      }
 
       let toolIndex = 0;
       for (const part of parts) {
         if (!part || typeof part !== "object" || (part as any).type !== "toolCall") continue;
-        const call = part as Record<string, unknown>;
+        const call = part as UnknownToolCall;
         const name = asString(call.name) ?? asString(call.toolName) ?? "unknown";
-        blocks.push(toolCallBlock(blockId(messageIndex, emitted++, toolIndex), name, toolSummary(name, call)));
+        const preferredId = asString(call.id) ?? asString(call.toolCallId)
+          ?? `message-${messageIndex}-tool-${toolIndex}`;
+        const callId = callsById.has(preferredId)
+          ? uniqueBlockId(preferredId, new Set(callsById.keys()))
+          : preferredId;
+        const block = toolCallBlock(
+          uniqueBlockId(blockId(messageIndex, emitted++, toolIndex), usedBlockIds),
+          callId,
+          name,
+          call,
+          toolSummary(name, call),
+        );
+        blocks.push(block);
+        registerCall(name, block);
         toolIndex++;
       }
       continue;
     }
 
     if (role === "toolResult") {
-      const block = toolResultBlock(blockId(messageIndex, emitted), message, maxToolResultChars);
-      if (block) blocks.push(block);
+      const result = resultSnapshot(message);
+      const direct = result.toolCallId ? callsById.get(result.toolCallId) : undefined;
+      let match = direct;
+      if (!match && result.toolName) {
+        match = callsByName.get(result.toolName.toLowerCase())?.[0];
+      }
+      if (match) {
+        applyToolResult(match, result, maxToolResultChars);
+        unregisterCall(match);
+      } else {
+        const preferred = blockId(messageIndex, emitted);
+        blocks.push(orphanToolResultBlock(uniqueBlockId(preferred, usedBlockIds), result, maxToolResultChars));
+      }
       continue;
     }
 
     if (role === "bashExecution") {
-      const block = bashBlock(blockId(messageIndex, emitted), message, maxToolResultChars);
-      if (block) blocks.push(block);
+      blocks.push(bashBlock(uniqueBlockId(blockId(messageIndex, emitted), usedBlockIds), message, maxToolResultChars));
       continue;
     }
 
     if (role === "custom") {
       if (message.display === false) continue;
       const header = asString(message.customType) || "Custom";
-      const block = metaBlock(blockId(messageIndex, emitted), header, message.content, maxEntryChars);
+      const block = metaBlock(uniqueBlockId(blockId(messageIndex, emitted), usedBlockIds), header, message.content, maxEntryChars);
       if (block) blocks.push({ ...block, role: "custom" });
       continue;
     }
 
     if (role === "compactionSummary" || role === "branchSummary" || role === "summary") {
       const header = role === "summary" ? "Summary" : role === "compactionSummary" ? "Compaction summary" : "Branch summary";
-      const block = metaBlock(blockId(messageIndex, emitted), header, message.summary, maxEntryChars);
+      const block = metaBlock(uniqueBlockId(blockId(messageIndex, emitted), usedBlockIds), header, message.summary, maxEntryChars);
       if (block) blocks.push(block);
     }
   }

package/src/ui/conversation-role.ts

@@ -0,0 +1,45 @@
+import type { Component } from "@earendil-works/pi-tui";
+import type { ConversationBlock } from "./conversation-blocks.js";
+import type { Theme } from "./agent-widget.js";
+
+export type ConversationRoleTheme = Pick<Theme, "fg">;
+
+/**
+ * Render a semantic role label without coloring the whole message body.
+ * These names intentionally mirror the labels used by peek-style viewers.
+ */
+export function conversationRoleLabel(block: ConversationBlock): string {
+  if (block.kind === "tool") return (block.toolName || "TOOL").toUpperCase();
+  if (block.role === "user") return "USER";
+  if (block.role === "assistant") return "ASSISTANT";
+  if (block.role === "custom") return block.header || "CUSTOM";
+  return block.header || "META";
+}
+
+export function renderConversationRoleHeader(
+  block: ConversationBlock,
+  theme: ConversationRoleTheme,
+): string {
+  const label = conversationRoleLabel(block);
+  const color = block.kind === "tool"
+    ? "toolTitle"
+    : block.role === "user"
+      ? "userMessageText"
+      : block.role === "assistant"
+        ? "accent"
+        : block.role === "custom"
+          ? "customMessageLabel"
+          : "muted";
+  const detail = block.kind === "tool" && block.toolCallId
+    ? theme.fg("dim", ` · ${block.toolCallId}`)
+    : "";
+  return `${theme.fg(color, label)}${detail}`;
+}
+
+/** Adapter useful to callers that need a Component-shaped role row. */
+export function conversationRoleComponent(block: ConversationBlock, theme: ConversationRoleTheme): Component {
+  return {
+    render: () => [` ${renderConversationRoleHeader(block, theme)}`],
+    invalidate() {},
+  };
+}

package/src/ui/conversation-timeline.ts

@@ -0,0 +1,315 @@
+import * as CodingAgent from "@earendil-works/pi-coding-agent";
+import {
+  Markdown,
+  Text,
+  type Component,
+  type TUI,
+  type TuiMouseEvent,
+  truncateToWidth,
+} from "@earendil-works/pi-tui";
+import { getMarkdownTheme } from "@earendil-works/pi-coding-agent";
+import type { AgentRecord } from "../types.js";
+import type { Theme } from "./agent-widget.js";
+import {
+  type ConversationBlock,
+  type ConversationToolResultSnapshot,
+} from "./conversation-blocks.js";
+import { renderConversationRoleHeader } from "./conversation-role.js";
+import { stripAnsi } from "./conversation-search.js";
+import {
+  createViewerCcstyleTool,
+  type ViewerToolRenderers,
+} from "./ccstyle/tool-renderer.js";
+
+export interface TimelineRenderLine {
+  text: string;
+  plain: string;
+  blockIndex: number;
+  railable?: boolean;
+}
+
+export interface TimelineToolSpan {
+  toolCallId: string;
+  startLine: number;
+  height: number;
+}
+
+export interface ConversationTimelineSnapshot {
+  lines: TimelineRenderLine[];
+  messageStarts: number[];
+  messageBlocks: ConversationBlock[];
+  interactiveToolIds: string[];
+  toolSpans: TimelineToolSpan[];
+}
+
+export interface ConversationTimelineOptions {
+  cwd?: string;
+  record?: AgentRecord;
+  onChange?: () => void;
+}
+
+function safeWidth(width: number): number {
+  return Math.max(1, Math.floor(Number.isFinite(width) ? width : 1));
+}
+
+function resultContent(result: ConversationToolResultSnapshot): Array<Record<string, unknown>> {
+  if (Array.isArray(result.content)) return result.content as Array<Record<string, unknown>>;
+  if (typeof result.content === "string") return [{ type: "text", text: result.content }];
+  return [];
+}
+
+function fallbackToolLines(block: ConversationBlock, width: number, expanded = false): string[] {
+  const summary = block.toolLine || block.fullText || block.toolName || "tool";
+  const output = block.toolResult
+    ? block.toolResult.content
+    : undefined;
+  const outputText = typeof output === "string"
+    ? output
+    : Array.isArray(output)
+      ? output.filter((item: any) => item?.type === "text").map((item: any) => String(item.text ?? "")).join("\n")
+      : "";
+  const outputLines = outputText.split(/\r?\n/);
+  const displayOutput = expanded || outputLines.length <= 4
+    ? outputLines
+    : [...outputLines.slice(0, 4), `… (${outputLines.length - 4} more lines · Enter to expand)`];
+  const body = outputText ? [summary, ...displayOutput].join("\n") : summary;
+  return body.split(/\r?\n/).map((line) => truncateToWidth(line, width, ""));
+}
+
+function applyToolComponentState(component: any, block: ConversationBlock, expanded: boolean): void {
+  component.updateArgs?.(block.args ?? block.toolArguments ?? {});
+  component.setArgsComplete?.();
+  if (block.result ?? block.toolResult) {
+    const result = (block.result ?? block.toolResult)!;
+    component.updateResult?.({
+      content: resultContent(result),
+      details: result.details,
+      isError: result.isError === true,
+    }, false);
+  }
+  component.setExpanded?.(expanded);
+}
+
+function createToolComponent(
+  block: ConversationBlock,
+  tui: TUI,
+  cwd: string,
+  expanded: boolean,
+): Component | undefined {
+  const Constructor = (CodingAgent as any).ToolExecutionComponent as (new (...args: any[]) => Component) | undefined;
+  if (typeof Constructor !== "function" || !block.toolName || !block.toolCallId) return undefined;
+
+  try {
+    const renderer = createViewerCcstyleTool(block.toolName) as ViewerToolRenderers;
+    const component = new Constructor(
+      block.toolName,
+      block.toolCallId,
+      block.args ?? block.toolArguments ?? {},
+      { showImages: false },
+      renderer,
+      tui,
+      cwd,
+    ) as any;
+    component.markExecutionStarted?.();
+    applyToolComponentState(component, block, expanded);
+    return component;
+  } catch {
+    return undefined;
+  }
+}
+
+/**
+ * Component-aware, snapshot-driven conversation timeline.
+ * ToolExecutionComponent state is rebuilt from normalized blocks when a call id
+ * first appears and then reused; history never needs a live session, spinner,
+ * stream, or process handle.
+ */
+export class ConversationTimeline implements Component {
+  private blocks: ConversationBlock[] = [];
+  private showTools = true;
+  private focusedToolCallId: string | undefined;
+  private expandedTools = new Set<string>();
+  private toolComponents = new Map<string, Component & { handleMouse?: (event: TuiMouseEvent) => unknown }>();
+  private snapshot: ConversationTimelineSnapshot = {
+    lines: [],
+    messageStarts: [],
+    messageBlocks: [],
+    interactiveToolIds: [],
+    toolSpans: [],
+  };
+  private lastWidth = 0;
+
+  constructor(
+    private readonly tui: TUI,
+    private readonly theme: Theme,
+    private readonly options: ConversationTimelineOptions = {},
+  ) {}
+
+  setBlocks(blocks: readonly ConversationBlock[]): void {
+    this.blocks = [...blocks];
+    const ids = new Set(this.blocks.filter((block) => block.kind === "tool" && block.toolCallId).map((block) => block.toolCallId!));
+    if (this.focusedToolCallId && !ids.has(this.focusedToolCallId)) this.focusedToolCallId = undefined;
+    for (const id of this.expandedTools) if (!ids.has(id)) this.expandedTools.delete(id);
+    for (const id of this.toolComponents.keys()) if (!ids.has(id)) this.toolComponents.delete(id);
+    this.invalidate();
+  }
+
+  setShowTools(show: boolean): void {
+    if (this.showTools === show) return;
+    this.showTools = show;
+    if (!show) this.focusedToolCallId = undefined;
+    this.invalidate();
+  }
+
+  getShowTools(): boolean {
+    return this.showTools;
+  }
+
+  setFocusedToolCallId(id: string | undefined): void {
+    this.focusedToolCallId = id;
+    this.invalidate();
+  }
+
+  getFocusedToolCallId(): string | undefined {
+    return this.focusedToolCallId;
+  }
+
+  getSnapshot(): ConversationTimelineSnapshot {
+    if (this.lastWidth <= 0) this.render(80);
+    return this.snapshot;
+  }
+
+  moveFocus(direction: 1 | -1): boolean {
+    const ids = this.getSnapshot().interactiveToolIds;
+    if (ids.length === 0) return false;
+    const current = this.focusedToolCallId ? ids.indexOf(this.focusedToolCallId) : -1;
+    const next = current < 0
+      ? direction > 0 ? 0 : ids.length - 1
+      : (current + direction + ids.length) % ids.length;
+    this.focusedToolCallId = ids[next];
+    this.invalidate();
+    this.options.onChange?.();
+    return true;
+  }
+
+  toggleFocusedTool(): boolean {
+    const id = this.focusedToolCallId;
+    if (!id) return false;
+    if (this.expandedTools.has(id)) this.expandedTools.delete(id);
+    else this.expandedTools.add(id);
+    this.invalidate();
+    this.options.onChange?.();
+    return true;
+  }
+
+  isToolFocused(): boolean {
+    return this.focusedToolCallId !== undefined;
+  }
+
+  render(width: number): string[] {
+    const requestedWidth = safeWidth(width);
+    const lines: TimelineRenderLine[] = [];
+    const messageStarts: number[] = [];
+    const messageBlocks: ConversationBlock[] = [];
+    const interactiveToolIds: string[] = [];
+    const toolSpans: TimelineToolSpan[] = [];
+    const visibleBlocks = this.blocks.filter((block) => this.showTools || block.kind !== "tool");
+
+    if (visibleBlocks.length === 0) {
+      const text = this.blocks.length === 0 ? "(waiting for first message...)" : "(tools hidden)";
+      lines.push({ text: this.theme.fg("dim", text), plain: text, blockIndex: -1 });
+    }
+
+    for (const block of visibleBlocks) {
+      const blockIndex = this.blocks.indexOf(block);
+      if (lines.length > 0) {
+        const separator = this.theme.fg("border", "   " + "─ ".repeat(Math.max(1, Math.floor((requestedWidth - 6) / 2))).trimEnd());
+        lines.push({ text: truncateToWidth(separator, requestedWidth), plain: stripAnsi(separator), blockIndex });
+      }
+
+      const headerLine = ` ${renderConversationRoleHeader(block, this.theme)}`;
+      messageStarts.push(lines.length);
+      messageBlocks.push(block);
+      lines.push({ text: truncateToWidth(headerLine, requestedWidth), plain: stripAnsi(headerLine), blockIndex, railable: true });
+
+      if (block.kind === "tool") {
+        const id = block.toolCallId;
+        if (id) interactiveToolIds.push(id);
+        let component: (Component & { handleMouse?: (event: TuiMouseEvent) => unknown }) | undefined;
+        if (id) {
+          const existing = this.toolComponents.get(id);
+          if (existing) {
+            applyToolComponentState(existing, block, this.expandedTools.has(id));
+            component = existing;
+          } else {
+            component = createToolComponent(block, this.tui, this.options.cwd ?? process.cwd(), this.expandedTools.has(id)) as (Component & { handleMouse?: (event: TuiMouseEvent) => unknown }) | undefined;
+            if (component) this.toolComponents.set(id, component);
+          }
+        }
+        let rendered: string[];
+        try {
+          rendered = component?.render(requestedWidth) ?? fallbackToolLines(block, requestedWidth, id ? this.expandedTools.has(id) : false);
+        } catch {
+          // Pi's interactive theme is a capability, not a viewer dependency;
+          // test hosts and older Pi versions can lack its initialized theme.
+          rendered = fallbackToolLines(block, requestedWidth, id ? this.expandedTools.has(id) : false);
+        }
+        for (const line of rendered) {
+          lines.push({ text: truncateToWidth(line, requestedWidth), plain: stripAnsi(line), blockIndex, railable: true });
+        }
+        if (id) toolSpans.push({ toolCallId: id, startLine: messageStarts[messageStarts.length - 1], height: lines.length - messageStarts[messageStarts.length - 1] });
+        continue;
+      }
+
+      try {
+        const markdown = new Markdown(block.markdown || "∅", 2, 0, getMarkdownTheme(), {
+          color: (text) => this.theme.fg(block.role === "meta" ? "muted" : "text", text),
+        });
+        for (const line of markdown.render(requestedWidth)) {
+          lines.push({ text: truncateToWidth(line, requestedWidth), plain: stripAnsi(line), blockIndex, railable: true });
+        }
+      } catch {
+        try {
+          for (const line of new Text(block.markdown || "∅").render(requestedWidth)) {
+            lines.push({ text: truncateToWidth(line, requestedWidth), plain: stripAnsi(line), blockIndex, railable: true });
+          }
+        } catch {
+          for (const line of (block.markdown || "∅").split("\n")) {
+            lines.push({ text: truncateToWidth(line, requestedWidth), plain: line, blockIndex, railable: true });
+          }
+        }
+      }
+    }
+
+    this.lastWidth = requestedWidth;
+    this.snapshot = { lines, messageStarts, messageBlocks, interactiveToolIds, toolSpans };
+    return lines.map((line) => line.text);
+  }
+
+  handleMouse(event: TuiMouseEvent): { handled?: boolean; render?: boolean } | undefined {
+    if (event.type !== "click" && event.type !== "press") return undefined;
+    const span = this.snapshot.toolSpans.find((candidate) => event.y >= candidate.startLine && event.y < candidate.startLine + candidate.height);
+    if (!span) return undefined;
+    this.focusedToolCallId = span.toolCallId;
+    const component = this.toolComponents.get(span.toolCallId);
+    try {
+      // Keep Pi's normalized mouse contract in the component tree. The local
+      // role header occupies the first row; ToolExecutionComponent receives
+      // the remaining card-relative coordinate.
+      component?.handleMouse?.({ ...event, y: event.y - span.startLine, height: span.height });
+    } catch {
+      // A missing/older Pi mouse implementation must not break the viewer.
+    }
+    this.expandedTools.has(span.toolCallId)
+      ? this.expandedTools.delete(span.toolCallId)
+      : this.expandedTools.add(span.toolCallId);
+    this.invalidate();
+    this.options.onChange?.();
+    return { handled: true, render: true };
+  }
+
+  invalidate(): void {
+    this.lastWidth = 0;
+    this.snapshot = { lines: [], messageStarts: [], messageBlocks: [], interactiveToolIds: [], toolSpans: [] };
+  }
+}