@esso0428/pi-subagents 0.15.5 → 0.15.7

package/src/ui/conversation-viewer.ts

@@ -1,24 +1,32 @@
 /**
- * conversation-viewer.ts — Live conversation overlay for viewing agent sessions.
+ * conversation-viewer.ts — Live and historical conversation overlay.
  *
- * Displays a scrollable, live-updating view of an agent's conversation.
- * Subscribes to session events for real-time streaming updates.
+ * The viewer deliberately keeps rendering state separate from the transcript:
+ * blocks are formatted data, while Markdown/ANSI lines are a bounded cache.
  */
 
-import type { AgentSession } from "@earendil-works/pi-coding-agent";
-import { type Component, Input, matchesKey, type TUI, truncateToWidth, visibleWidth, wrapTextWithAnsi } from "@earendil-works/pi-tui";
-import { extractText } from "../context.js";
+import type { ExtensionAPI, ExtensionContext, AgentSession } 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 type { Theme } from "./agent-widget.js";
 import { type AgentActivity, buildInvocationTags, describeActivity, fgPreservingNestedStyles, formatDuration, formatSessionTokens, getDisplayName, getPromptModeLabel } from "./agent-widget.js";
+import { formatConversationMessages, type ConversationBlock } from "./conversation-blocks.js";
+import { ConversationTimeline, type TimelineRenderLine } from "./conversation-timeline.js";
+import { renderConversationRoleHeader } from "./conversation-role.js";
+import { editLiveAssistantBlockInNvim, viewConversationBlockInNvim } from "./conversation-nvim.js";
+import { findConversationMatches, highlightConversationLine, nearestConversationMatchAfter, nearestConversationMatchBefore, stripAnsi, type ConversationMatch } from "./conversation-search.js";
 import { createViewerKeys, type ViewerKeybindings, type ViewerKeys } from "./viewer-keys.js";
 
-/** Base lines consumed by chrome: top border + header + header sep + footer sep + footer + bottom border. */
+/** Base lines consumed by the overlay: borders, header, separator and footer. */
 const CHROME_LINES_BASE = 6;
 const MIN_VIEWPORT = 3;
-/** Height ceiling shared by the overlay's `maxHeight` and the viewer's internal viewport cap. */
 export const VIEWPORT_HEIGHT_PCT = 70;
+const MAX_COPY_CHARS = 500_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";
 
 /** The live fields needed by the viewer; historical viewers use a static source. */
 export type ConversationSource = Pick<AgentSession, "messages" | "subscribe">;
@@ -29,17 +37,38 @@ export function createStaticConversationSource(
   return { messages, subscribe: () => () => {} };
 }
 
+type RenderLine = TimelineRenderLine;
+
+/** Optional operations are appended so all existing constructor call sites stay valid. */
+export interface ConversationViewerOperations {
+  pi: ExtensionAPI;
+  ctx: ExtensionContext;
+  readOnly?: boolean;
+}
+
 export class ConversationViewer implements Component {
+  private blocks: ConversationBlock[] = [];
+  private showTools = true;
+  private selectedMessageIdx = 0;
+  private cachedWidth = 0;
+  private cachedLines: RenderLine[] = [];
+  private cachedMessageStarts: number[] = [];
+  private cachedMessageBlocks: ConversationBlock[] = [];
+  private cacheVersion = 0;
+  private cachedVersion = -1;
   private scrollOffset = 0;
   private autoScroll = true;
   private unsubscribe: (() => void) | undefined;
   private lastInnerW = 0;
   private closed = false;
-  /** Two-press confirm guard for the stop key, so a stray key can't kill the agent. */
   private stopArmed = false;
   private keys: ViewerKeys;
-  /** Steering composer — present while the user is typing a message to the agent. */
   private composer: Input | undefined;
+  private searchMode = false;
+  private searchQuery = "";
+  private searchMatches: ConversationMatch[] = [];
+  private currentMatchIdx = -1;
+  private timeline: ConversationTimeline;
 
   constructor(
     private tui: TUI,
@@ -48,46 +77,64 @@ export class ConversationViewer implements Component {
     private activity: AgentActivity | undefined,
     private theme: Theme,
     private done: (result: undefined) => void,
-    /** Abort the agent shown here. Omitted → no stop affordance (e.g. read-only history). */
+    /** Abort the agent shown here. Omitted means read-only history. */
     private onStop?: () => void,
-    /** User keybindings from `ctx.ui.custom()`. Omitted → hardcoded defaults. */
+    /** User keybindings from ctx.ui.custom(). */
     keybindings?: ViewerKeybindings,
-    /** Send a steering message to the agent. Omitted → no compose affordance. */
+    /** Send a steering message to the agent. */
     private onSteer?: (message: string) => void,
+    /** Optional clipboard/nvim operation context, appended for compatibility. */
+    private operations?: ConversationViewerOperations,
   ) {
     this.keys = createViewerKeys(keybindings);
+    this.blocks = formatConversationMessages(session.messages);
+    this.timeline = new ConversationTimeline(tui, theme, {
+      cwd: operations?.ctx.cwd,
+      record,
+      onChange: () => {
+        this.cacheVersion++;
+        this.invalidate();
+        this.tui.requestRender();
+      },
+    });
+    this.timeline.setBlocks(this.blocks);
     this.unsubscribe = session.subscribe(() => {
       if (this.closed) return;
+      this.blocks = formatConversationMessages(this.session.messages);
+      this.timeline.setBlocks(this.blocks);
+      this.cacheVersion++;
+      this.invalidate();
       this.tui.requestRender();
     });
   }
 
   handleInput(data: string): void {
-    // While composing a steer message, the input owns all keys (Enter sends,
-    // Esc cancels — both wired in openComposer()). Editing keys flow through.
     if (this.composer) {
       this.composer.handleInput(data);
       this.tui.requestRender();
       return;
     }
-
+    if (this.searchMode) {
+      this.handleSearchInput(data);
+      return;
+    }
     if (matchesKey(data, "escape") || matchesKey(data, "q")) {
       this.closed = true;
       this.done(undefined);
       return;
     }
-
-    // Enter opens the steering composer (only while the agent can still be
-    // steered) — then type + Enter sends, Esc or an empty submit returns. When
-    // not steerable, fall through so the key still disarms a pending stop.
-    if (matchesKey(data, "enter") && this.canSteer()) {
-      this.stopArmed = false;
-      this.openComposer();
-      return;
+    if (matchesKey(data, "enter")) {
+      this.buildContentLines(this.lastInnerW || 80);
+      if (this.timeline.isToolFocused()) {
+        this.timeline.toggleFocusedTool();
+        return;
+      }
+      if (this.canSteer()) {
+        this.stopArmed = false;
+        this.openComposer();
+        return;
+      }
     }
-
-    // Stop/abort the agent (only while it can still be stopped). Two-press:
-    // first "x" arms, second confirms — any other key disarms.
     if (matchesKey(data, "x")) {
       if (this.isStoppable()) {
         if (this.stopArmed) {
@@ -102,62 +149,102 @@ export class ConversationViewer implements Component {
     }
     if (this.stopArmed) this.stopArmed = false;
 
-    const totalLines = this.buildContentLines(this.lastInnerW).length;
+    // Input can arrive before the first render in tests and in a freshly-opened overlay.
+    this.buildContentLines(this.lastInnerW || 80);
     const viewportHeight = this.viewportHeight();
-    const maxScroll = Math.max(0, totalLines - viewportHeight);
+    const maxScroll = Math.max(0, this.cachedLines.length - viewportHeight);
 
-    if (this.keys.scrollUp(data)) {
-      this.scrollOffset = Math.max(0, this.scrollOffset - 1);
-      this.autoScroll = this.scrollOffset >= maxScroll;
+    if (data === "t") {
+      this.showTools = !this.showTools;
+      this.timeline.setShowTools(this.showTools);
+      this.invalidate();
+      this.tui.requestRender();
+    } else if (data === "\t") {
+      this.timeline.moveFocus(1);
+      this.invalidate();
+      this.tui.requestRender();
+    } else if (matchesKey(data, Key.shift("tab"))) {
+      this.timeline.moveFocus(-1);
+      this.invalidate();
+      this.tui.requestRender();
+    } else if (data === "J" || matchesKey(data, Key.shift("j"))) {
+      this.jumpToMessage(1);
+    } else if (data === "K" || matchesKey(data, Key.shift("k"))) {
+      this.jumpToMessage(-1);
+    } else if (data === "g") {
+      this.scrollToTop();
+    } else if (data === "G" || matchesKey(data, Key.shift("g"))) {
+      this.scrollToBottom();
+    } else if (data === "/") {
+      this.enterSearch();
+    } else if (data === "n") {
+      this.gotoMatch(1);
+    } else if (data === "N") {
+      this.gotoMatch(-1);
+    } else if (data === "M") {
+      void this.copyCurrentMessage();
+    } else if (data === "o") {
+      void this.viewCurrentInNvim();
+    } else if (data === "O" && this.isLive()) {
+      void this.editCurrentInNvim();
+    } else if (this.keys.scrollUp(data)) {
+      this.scrollBy(-1);
     } else if (this.keys.scrollDown(data)) {
-      this.scrollOffset = Math.min(maxScroll, this.scrollOffset + 1);
-      this.autoScroll = this.scrollOffset >= maxScroll;
+      this.scrollBy(1);
     } else if (this.keys.pageUp(data)) {
-      this.scrollOffset = Math.max(0, this.scrollOffset - viewportHeight);
-      this.autoScroll = false;
+      this.scrollBy(-viewportHeight);
     } else if (this.keys.pageDown(data)) {
-      this.scrollOffset = Math.min(maxScroll, this.scrollOffset + viewportHeight);
-      this.autoScroll = this.scrollOffset >= maxScroll;
+      this.scrollBy(viewportHeight);
     } else if (matchesKey(data, "home")) {
       this.scrollOffset = 0;
+      this.selectedMessageIdx = 0;
       this.autoScroll = false;
+      this.tui.requestRender();
     } else if (matchesKey(data, "end")) {
-      this.scrollOffset = maxScroll;
-      this.autoScroll = true;
+      this.scrollToBottom();
     }
+
+    // Keep the computed max alive for the key path even when the cache is empty.
+    void maxScroll;
+  }
+
+  handleMouse(event: TuiMouseEvent): { handled?: boolean; render?: boolean } | undefined {
+    if (this.composer || this.searchMode) return undefined;
+    const innerW = Math.max(1, this.lastInnerW || event.width - 4);
+    const contentLines = this.buildContentLines(innerW);
+    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 contentY = event.y - contentOrigin + visibleStart;
+    if (contentY < 0 || contentY >= contentLines.length) return undefined;
+    const result = this.timeline.handleMouse({ ...event, y: contentY });
+    if (result?.handled) {
+      this.cacheVersion++;
+      this.invalidate();
+      this.tui.requestRender();
+    }
+    return result;
   }
 
   render(width: number): string[] {
-    if (width < 6) return []; // too narrow for any meaningful rendering
+    if (width < 6) return [];
     const th = this.theme;
-    const innerW = width - 4; // border + padding
+    const innerW = Math.max(1, width - 4);
     this.lastInnerW = innerW;
     const lines: string[] = [];
-
-    const pad = (s: string, len: number) => {
-      const vis = visibleWidth(s);
-      return s + " ".repeat(Math.max(0, len - vis));
-    };
-    const row = (content: string) =>
-      th.fg("border", "│") + " " + truncateToWidth(pad(content, innerW), innerW, "...", true) + " " + th.fg("border", "│");
-    const hrTop = th.fg("border", `╭${"─".repeat(width - 2)}╮`);
-    const hrBot = th.fg("border", `╰${"─".repeat(width - 2)}╯`);
+    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 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)));
 
-    // Header
     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", "○");
+    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", "○");
     const duration = formatDuration(this.record.startedAt, this.record.completedAt);
-
     const headerParts: string[] = [duration];
     const toolUses = this.activity?.toolUses ?? this.record.toolUses;
     if (toolUses > 0) headerParts.unshift(`${toolUses} tool${toolUses === 1 ? "" : "s"}`);
@@ -166,206 +253,327 @@ export class ConversationViewer implements Component {
       const percent = getSessionContextPercent(this.activity?.session);
       headerParts.push(formatSessionTokens(tokens, percent, th, this.record.compactionCount));
     }
-
-    lines.push(row(
-      `${statusIcon} ${th.bold(name)}${modeTag}  ${th.fg("muted", this.record.description)} ${th.fg("dim", "·")} ${fgPreservingNestedStyles(th, "dim", headerParts.join(" · "))}`,
-    ));
+    lines.push(row(`${statusIcon} ${th.bold(name)}${modeTag}  ${th.fg("muted", this.record.description)} ${th.fg("dim", "·")} ${fgPreservingNestedStyles(th, "dim", headerParts.join(" · "))}`));
     const invocationLine = this.invocationLine();
     if (invocationLine) lines.push(row(invocationLine));
     lines.push(hrMid);
 
-    // Content area — rebuild every render (live data, no cache needed)
     const contentLines = this.buildContentLines(innerW);
     const viewportHeight = this.viewportHeight();
     const maxScroll = Math.max(0, contentLines.length - viewportHeight);
-
-    if (this.autoScroll) {
-      this.scrollOffset = maxScroll;
-    }
-
+    if (this.autoScroll) this.scrollOffset = maxScroll;
     const visibleStart = Math.min(this.scrollOffset, maxScroll);
     const visible = contentLines.slice(visibleStart, visibleStart + viewportHeight);
-
-    for (let i = 0; i < viewportHeight; i++) {
-      lines.push(row(visible[i] ?? ""));
+    const currentBlockIdx = this.currentBlockGlobalIndex();
+    const headerLine = this.activeHeaderLine();
+    const showSticky = headerLine >= 0 && headerLine < visibleStart && visible.length > 0;
+    const displayed = visible.slice();
+    if (showSticky) {
+      const block = this.cachedMessageBlocks[this.currentMessageIndex()];
+      if (block) {
+        const header = renderConversationRoleHeader(block, this.theme);
+        displayed[0] = { text: ` ${header}`, plain: header, blockIndex: currentBlockIdx, railable: true };
+      }
+    }
+    for (let i = 0; i < displayed.length; i++) {
+      const line = displayed[i];
+      let text = line.text;
+      if (this.searchMatches.length > 0 && !(showSticky && i === 0)) {
+        const hits = this.searchMatches.filter((match) => match.lineIdx === visibleStart + i).map((match) => ({ lineIdx: match.lineIdx, col: match.col, len: match.len, current: this.searchMatches.indexOf(match) === this.currentMatchIdx }));
+        if (hits.length > 0) text = highlightConversationLine(text, hits, MATCH_BG, MATCH_BG_CURRENT, BG_RESET);
+      }
+      if (line.railable && line.blockIndex === currentBlockIdx) {
+        text = text.startsWith(" ") ? th.fg("accent", "▎") + text.slice(1) : th.fg("accent", "▎") + text;
+      }
+      lines.push(row(text));
     }
+    for (let i = displayed.length; i < viewportHeight; i++) lines.push(row(""));
 
-    // Footer
     lines.push(hrMid);
     if (this.composer) {
-      // Composer row: the Input renders its own `> ` prompt and cursor.
       lines.push(row(this.composer.render(innerW)[0] ?? ""));
-      const composeHint = th.fg("dim", "Enter send · Esc cancel");
-      const composeLeft = th.fg("accent", "✎ steer");
-      const composeGap = Math.max(1, innerW - visibleWidth(composeLeft) - visibleWidth(composeHint));
-      lines.push(row(composeLeft + " ".repeat(composeGap) + composeHint));
+      const hint = th.fg("dim", "Enter send · Esc cancel");
+      const label = th.fg("accent", "✎ steer");
+      lines.push(row(label + " ".repeat(Math.max(1, innerW - visibleWidth(label) - visibleWidth(hint))) + hint));
+    } else if (this.searchMode) {
+      const query = `/${this.searchQuery}`;
+      const matchCount = this.searchMatches.length > 0
+        ? ` · ${this.searchMatches.length} match${this.searchMatches.length === 1 ? "" : "es"}`
+        : "";
+      const hints = th.fg("dim", " · Enter apply · Esc cancel");
+      lines.push(row(truncateToWidth(th.fg("accent", query) + th.fg("dim", matchCount) + hints, innerW, "...", true)));
     } else {
-      // Actions on the left, navigation on the right. The scroll hint keeps its
-      // full key list so the less-obvious bindings stay discoverable; it leads
-      // the right group so "Esc close" is the only part that truncates first.
-      const sep = th.fg("dim", " · ");
       const actions: string[] = [];
       if (this.canSteer()) actions.push(th.fg("dim", "Enter steer"));
-      if (this.isStoppable()) {
-        actions.push(this.stopArmed ? th.fg("error", "x again to STOP") : th.fg("dim", "x stop"));
-      }
-      const footerRight = th.fg("dim", "↑↓ scroll · PgUp/PgDn or Shift+↑↓ · Esc close");
-
-      // Prepend the line-count/scroll-% readout only when there's spare width —
-      // it's the first thing dropped so it never crowds out the hints.
-      const scrollPct = contentLines.length <= viewportHeight
-        ? "100%"
-        : `${Math.round(((visibleStart + viewportHeight) / contentLines.length) * 100)}%`;
+      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 · J/K · g/G   t   M o${editHint}   /n N   q`,
+        `M o${editHint}   /n N   q`,
+        `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 withCount = [count, ...actions].join(sep);
-      const footerLeft = visibleWidth(withCount) + visibleWidth(footerRight) + 1 <= innerW
-        ? withCount
-        : actions.join(sep);
-
-      const footerGap = Math.max(1, innerW - visibleWidth(footerLeft) - visibleWidth(footerRight));
-      lines.push(row(footerLeft + " ".repeat(footerGap) + footerRight));
+      const countWidth = visibleWidth(count);
+      let status = "";
+      for (const hint of shortcutHints) {
+        const styledHint = th.fg("dim", hint);
+        const withActions = [styledHint, ...actions].join("   ");
+        if (visibleWidth(withActions) <= innerW) {
+          status = withActions;
+          break;
+        }
+        if (visibleWidth(styledHint) <= innerW) status ||= styledHint;
+      }
+      if (!status) status = th.fg("dim", shortcutHints[shortcutHints.length - 1]);
+      const statusWidth = visibleWidth(status);
+      const footer = statusWidth + countWidth + 1 <= innerW
+        ? status + " ".repeat(Math.max(1, innerW - statusWidth - countWidth)) + count
+        : status;
+      lines.push(row(truncateToWidth(footer, innerW, "...", true)));
     }
     lines.push(hrBot);
-
     return lines;
   }
 
-  /** Stoppable only when a stop handler exists and the agent is still active. */
-  private isStoppable(): boolean {
-    return !!this.onStop && (this.record.status === "running" || this.record.status === "queued");
-  }
-
-  /** Steerable only when a steer handler exists and the agent is still active. */
-  private canSteer(): boolean {
-    return !!this.onSteer && (this.record.status === "running" || this.record.status === "queued");
+  invalidate(): void {
+    this.cachedWidth = 0;
+    this.cachedLines = [];
+    this.cachedMessageStarts = [];
+    this.cachedMessageBlocks = [];
+    this.cachedVersion = -1;
   }
 
-  /** Open the inline steering composer and route subsequent input to it. */
-  private openComposer(): void {
-    const input = new Input();
-    input.focused = true;
-    input.onSubmit = (value: string) => {
-      const message = value.trim();
-      this.composer = undefined;
-      if (message) this.onSteer?.(message);
-      this.tui.requestRender();
-    };
-    input.onEscape = () => {
-      this.composer = undefined;
-      this.tui.requestRender();
-    };
-    this.composer = input;
-    this.tui.requestRender();
-  }
-
-  invalidate(): void { /* no cached state to clear */ }
-
   dispose(): void {
     this.closed = true;
-    if (this.unsubscribe) {
-      this.unsubscribe();
-      this.unsubscribe = undefined;
-    }
+    this.unsubscribe?.();
+    this.unsubscribe = undefined;
   }
 
-  // ---- Private ----
-
   private viewportHeight(): number {
-    // Cap mirrors the overlay's maxHeight — otherwise the viewer would render
-    // more lines than the overlay shows and clip the footer.
     const maxRows = Math.floor((this.tui.terminal.rows * VIEWPORT_HEIGHT_PCT) / 100);
     return Math.max(MIN_VIEWPORT, maxRows - this.chromeLines());
   }
 
   private chromeLines(): number {
-    // The composer adds one row above the footer hint while it's open.
     return CHROME_LINES_BASE + (this.invocationLine() ? 1 : 0) + (this.composer ? 1 : 0);
   }
 
   private invocationLine(): string | undefined {
-    const { modelName, tags } = buildInvocationTags(this.record.invocation);
-    const parts = modelName ? [modelName, ...tags] : tags;
-    if (parts.length === 0) return undefined;
+    const liveModel = this.isLive() ? this.record.session?.model : undefined;
+    const invocation = this.record.invocation
+      ? {
+          ...this.record.invocation,
+          ...(liveModel && { effectiveModelName: liveModel.name ?? liveModel.id }),
+          ...(this.isLive() && { effectiveThinking: this.record.session?.thinkingLevel }),
+        }
+      : liveModel || (this.isLive() && this.record.session?.thinkingLevel)
+        ? {
+            effectiveModelName: liveModel?.name ?? liveModel?.id,
+            effectiveThinking: 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(" · ")}`);
   }
 
-  private buildContentLines(width: number): string[] {
+  private buildContentLines(width: number): RenderLine[] {
     if (width <= 0) return [];
+    if (this.cachedVersion === this.cacheVersion && this.cachedWidth === width) return this.cachedLines;
+    this.timeline.setShowTools(this.showTools);
+    this.timeline.render(width);
+    const timelineSnapshot = this.timeline.getSnapshot();
+    const lines: RenderLine[] = timelineSnapshot.lines.map((line) => ({ ...line }));
+    this.cachedMessageStarts = [...timelineSnapshot.messageStarts];
+    this.cachedMessageBlocks = [...timelineSnapshot.messageBlocks];
+    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 });
+    }
+    this.cachedWidth = width;
+    this.cachedVersion = this.cacheVersion;
+    this.cachedLines = lines;
+    if (this.searchMode || this.searchQuery) this.recomputeMatches();
+    return lines;
+  }
 
-    const th = this.theme;
-    const messages = this.session.messages;
-    const lines: string[] = [];
+  private currentMessageIndex(): number {
+    return this.cachedMessageStarts.length === 0 ? 0 : Math.max(0, Math.min(this.selectedMessageIdx, this.cachedMessageStarts.length - 1));
+  }
+
+  private currentBlockGlobalIndex(): number {
+    const block = this.cachedMessageBlocks[this.currentMessageIndex()];
+    return block ? this.blocks.indexOf(block) : -1;
+  }
+
+  private activeHeaderLine(): number {
+    return this.cachedMessageStarts[this.currentMessageIndex()] ?? -1;
+  }
+
+  private currentBlock(): ConversationBlock | undefined {
+    return this.cachedMessageBlocks[this.currentMessageIndex()];
+  }
 
-    if (messages.length === 0) {
-      lines.push(th.fg("dim", "(waiting for first message...)"));
-      return lines;
+  private messageIndexForOffset(offset: number): number {
+    let result = 0;
+    for (let i = 0; i < this.cachedMessageStarts.length; i++) {
+      if (this.cachedMessageStarts[i] <= offset) result = i;
+      else break;
     }
+    return result;
+  }
 
-    let needsSeparator = false;
-    for (const msg of messages) {
-      if (msg.role === "user") {
-        const text = typeof msg.content === "string"
-          ? msg.content
-          : extractText(msg.content);
-        if (!text.trim()) continue;
-        if (needsSeparator) lines.push(th.fg("dim", "───"));
-        lines.push(th.fg("accent", "[User]"));
-        for (const line of wrapTextWithAnsi(text.trim(), width)) {
-          lines.push(line);
-        }
-      } else if (msg.role === "assistant") {
-        const textParts: string[] = [];
-        const toolCalls: string[] = [];
-        for (const c of msg.content) {
-          if (c.type === "text" && c.text) textParts.push(c.text);
-          else if (c.type === "toolCall") {
-            toolCalls.push((c as any).name ?? (c as any).toolName ?? "unknown");
-          }
-        }
-        if (needsSeparator) lines.push(th.fg("dim", "───"));
-        lines.push(th.bold("[Assistant]"));
-        if (textParts.length > 0) {
-          for (const line of wrapTextWithAnsi(textParts.join("\n").trim(), width)) {
-            lines.push(line);
-          }
-        }
-        for (const name of toolCalls) {
-          lines.push(truncateToWidth(th.fg("muted", `  [Tool: ${name}]`), width));
-        }
-      } else if (msg.role === "toolResult") {
-        const text = extractText(msg.content);
-        const truncated = text.length > 500 ? text.slice(0, 500) + "... (truncated)" : text;
-        if (!truncated.trim()) continue;
-        if (needsSeparator) lines.push(th.fg("dim", "───"));
-        lines.push(th.fg("dim", "[Result]"));
-        for (const line of wrapTextWithAnsi(truncated.trim(), width)) {
-          lines.push(th.fg("dim", line));
-        }
-      } else if ((msg as any).role === "bashExecution") {
-        const bash = msg as any;
-        if (needsSeparator) lines.push(th.fg("dim", "───"));
-        lines.push(truncateToWidth(th.fg("muted", `  $ ${bash.command}`), width));
-        if (bash.output?.trim()) {
-          const out = bash.output.length > 500
-            ? bash.output.slice(0, 500) + "... (truncated)"
-            : bash.output;
-          for (const line of wrapTextWithAnsi(out.trim(), width)) {
-            lines.push(th.fg("dim", line));
-          }
-        }
-      } else {
-        continue;
-      }
-      needsSeparator = true;
+  private jumpToMessage(dir: 1 | -1): void {
+    if (this.cachedMessageStarts.length === 0) return;
+    const target = this.currentMessageIndex() + dir;
+    if (target < 0 || target >= this.cachedMessageStarts.length) return;
+    this.selectedMessageIdx = target;
+    this.scrollOffset = Math.min(this.cachedMessageStarts[target], Math.max(0, this.cachedLines.length - this.viewportHeight()));
+    this.autoScroll = false;
+    this.tui.requestRender();
+  }
+
+  private scrollBy(delta: number): void {
+    const max = Math.max(0, this.cachedLines.length - this.viewportHeight());
+    this.scrollOffset = Math.max(0, Math.min(max, this.scrollOffset + delta));
+    this.selectedMessageIdx = this.messageIndexForOffset(this.scrollOffset);
+    this.autoScroll = this.scrollOffset >= max;
+    this.tui.requestRender();
+  }
+
+  private scrollToTop(): void {
+    this.scrollOffset = 0;
+    this.selectedMessageIdx = 0;
+    this.autoScroll = false;
+    this.tui.requestRender();
+  }
+
+  private scrollToBottom(): void {
+    this.scrollOffset = Math.max(0, this.cachedLines.length - this.viewportHeight());
+    this.selectedMessageIdx = Math.max(0, this.cachedMessageStarts.length - 1);
+    this.autoScroll = true;
+    this.tui.requestRender();
+  }
+
+  private enterSearch(): void {
+    this.searchMode = true;
+    this.searchQuery = "";
+    this.searchMatches = [];
+    this.currentMatchIdx = -1;
+    this.tui.requestRender();
+  }
+
+  private handleSearchInput(data: string): void {
+    if (matchesKey(data, "escape") || matchesKey(data, Key.ctrl("c"))) {
+      this.searchMode = false;
+      this.searchQuery = "";
+      this.searchMatches = [];
+      this.currentMatchIdx = -1;
+    } else if (matchesKey(data, "enter") || data === "\r" || data === "\n") {
+      this.searchMode = false;
+      if (this.searchMatches.length > 0) this.scrollToMatch(this.currentMatchIdx < 0 ? 0 : this.currentMatchIdx);
+    } else if (matchesKey(data, "backspace") || data === "\x7f" || data === "\b") {
+      this.searchQuery = this.searchQuery.slice(0, -1);
+      this.recomputeMatches();
+    } else if (data.length === 1 && data >= " " && data !== "\x7f") {
+      this.searchQuery += data;
+      this.recomputeMatches();
     }
+    this.tui.requestRender();
+  }
 
-    // Streaming indicator for running agents
-    if (this.record.status === "running" && this.activity) {
-      const act = describeActivity(this.activity.activeTools, this.activity.responseText);
-      lines.push("");
-      lines.push(truncateToWidth(th.fg("accent", "▍ ") + th.fg("dim", act), width));
+  private recomputeMatches(): void {
+    this.searchMatches = findConversationMatches(this.cachedLines, this.searchQuery);
+    this.currentMatchIdx = this.searchMatches.length > 0 ? Math.min(Math.max(this.currentMatchIdx, 0), this.searchMatches.length - 1) : -1;
+  }
+
+  private gotoMatch(dir: 1 | -1): void {
+    if (this.searchMatches.length === 0) return;
+    this.currentMatchIdx = this.currentMatchIdx < 0
+      ? (dir === 1 ? nearestConversationMatchAfter(this.searchMatches, this.scrollOffset) : nearestConversationMatchBefore(this.searchMatches, this.scrollOffset))
+      : (this.currentMatchIdx + dir + this.searchMatches.length) % this.searchMatches.length;
+    this.scrollToMatch(this.currentMatchIdx);
+    this.tui.requestRender();
+  }
+
+  private scrollToMatch(index: number): void {
+    const match = this.searchMatches[index];
+    if (!match) return;
+    const max = Math.max(0, this.cachedLines.length - this.viewportHeight());
+    this.scrollOffset = Math.max(0, Math.min(max, match.lineIdx - Math.floor(this.viewportHeight() / 2)));
+    this.selectedMessageIdx = this.messageIndexForOffset(this.scrollOffset);
+    this.autoScroll = false;
+  }
+
+  private async copyCurrentMessage(): Promise<void> {
+    const block = this.currentBlock();
+    if (!block || !this.operations) {
+      if (!this.operations) return;
+      return;
+    }
+    const source = `${stripAnsi(block.header)}\n${block.copyText}`.trimEnd();
+    const clipped = source.length > MAX_COPY_CHARS ? `${source.slice(0, MAX_COPY_CHARS)}\n… [truncated by subagent copy]` : source;
+    try {
+      await copyToClipboard(clipped);
+      this.operations.ctx.ui.notify(`Copied current message (${clipped.length} chars)`, "info");
+    } catch (error) {
+      this.operations.ctx.ui.notify(`Copy failed: ${error instanceof Error ? error.message : String(error)}`, "error");
+    }
+  }
+
+  private async viewCurrentInNvim(): Promise<void> {
+    const block = this.currentBlock();
+    if (!block || !this.operations) return;
+    await viewConversationBlockInNvim(this.tui, this.operations.ctx, block);
+    this.invalidate();
+    this.tui.requestRender(true);
+  }
+
+  private async editCurrentInNvim(): Promise<void> {
+    const block = this.currentBlock();
+    if (!block || !this.operations || !this.isLive() || block.role !== "assistant") return;
+    const sent = await editLiveAssistantBlockInNvim(this.operations.pi, this.tui, this.operations.ctx, block);
+    if (sent) this.done(undefined);
+    else {
+      this.invalidate();
+      this.tui.requestRender(true);
     }
+  }
+
+  private isReadOnly(): boolean {
+    return this.operations?.readOnly === true;
+  }
+
+  private isLive(): boolean {
+    return !this.isReadOnly() && this.record.session !== undefined;
+  }
 
-    return lines.map(l => truncateToWidth(l, width));
+  private isStoppable(): boolean {
+    return !this.isReadOnly() && !!this.onStop && (this.record.status === "running" || this.record.status === "queued");
+  }
+
+  private canSteer(): boolean {
+    return !this.isReadOnly() && !!this.onSteer && (this.record.status === "running" || this.record.status === "queued");
+  }
+
+  private openComposer(): void {
+    const input = new Input();
+    input.focused = true;
+    input.onSubmit = (value: string) => {
+      const message = value.trim();
+      this.composer = undefined;
+      if (message) this.onSteer?.(message);
+      this.tui.requestRender();
+    };
+    input.onEscape = () => {
+      this.composer = undefined;
+      this.tui.requestRender();
+    };
+    this.composer = input;
+    this.tui.requestRender();
   }
 }