@esso0428/pi-subagents 0.15.12 → 0.15.14

package/src/ui/ccstyle/tool-result.ts

@@ -25,13 +25,13 @@ function rawTextFromResult(result: any): string {
     : "";
 }
 
-export function textFromResult(result: any, expanded = false): string {
-  const content = sanitizeToolResultText(rawTextFromResult(result), 16_384);
+export function textFromResult(result: any, expanded = false, maxChars = 16_384): string {
+  const content = sanitizeToolResultText(rawTextFromResult(result), maxChars);
   const detail = result?.details;
   if (!expanded || detail === undefined) return content;
   const details = sanitizeToolResultText(
     typeof detail === "string" ? detail : safeJson(detail),
-    16_384,
+    maxChars,
   );
   if (!details || details === content) return content;
   return content ? `${content}\nDetails:\n${details}` : details;
@@ -51,56 +51,209 @@ export function outputLineCount(result: any): number {
 }
 
 export function countLines(text: string): number {
-  return text.trim() ? text.trim().split("\n").length : 0;
+  return text.trim() ? text.trim().split("\n").filter((line) => line.trim().length > 0).length : 0;
 }
 
+/** Format arguments as stable, readable `key: value` rows for the Input rail. */
 export function formatToolInputArgs(args: unknown, maxChars = 8_000): string {
   if (args === undefined || args === null) return "";
-  const rendered =
-    typeof args === "object" ? safeJson(args) : sanitizeToolResultText(String(args));
-  const bounded = sanitizeToolResultText(rendered, maxChars);
-  return rendered.length > maxChars ? `${bounded}…` : bounded;
+  if (typeof args !== "object") {
+    const text = sanitizeToolResultText(String(args));
+    return text.length > maxChars ? `${text.slice(0, maxChars)}…` : text;
+  }
+  if (Array.isArray(args)) {
+    const text = safeJson(args);
+    return text.length > maxChars ? `${text.slice(0, maxChars)}…` : text;
+  }
+
+  const preferred = [
+    "path", "file_path", "command", "query", "pattern", "url", "name",
+    "message", "content", "old_string", "new_string",
+  ];
+  const entries = Object.entries(args as Record<string, unknown>)
+    .filter(([, value]) => value !== undefined)
+    .sort(([left], [right]) => {
+      const li = preferred.indexOf(left);
+      const ri = preferred.indexOf(right);
+      if (li < 0 && ri < 0) return left.localeCompare(right);
+      if (li < 0) return 1;
+      if (ri < 0) return -1;
+      return li - ri;
+    });
+  const lines: string[] = [];
+  for (const [rawKey, value] of entries) {
+    const key = sanitizeToolResultText(rawKey);
+    if (typeof value === "string") {
+      const safeValue = sanitizeToolResultText(value);
+      if (safeValue.includes("\n")) {
+        lines.push(`${key}:`);
+        for (const line of safeValue.split("\n")) lines.push(`  ${line}`);
+      } else {
+        lines.push(`${key}: ${safeValue}`);
+      }
+      continue;
+    }
+    if (typeof value === "number" || typeof value === "boolean" || value === null) {
+      lines.push(`${key}: ${String(value)}`);
+      continue;
+    }
+    const json = safeJson(value);
+    if (json.includes("\n")) {
+      lines.push(`${key}:`);
+      for (const line of json.split("\n")) lines.push(`  ${line}`);
+    } else {
+      lines.push(`${key}: ${json}`);
+    }
+  }
+  const text = lines.join("\n");
+  return text.length > maxChars ? `${text.slice(0, maxChars)}…` : text;
 }
 
 function hasExpandableDetail(text: string, args: unknown): boolean {
   return countLines(text) > 1 || formatToolInputArgs(args).trim().length > 0;
 }
 
-/** Small Component used for the viewer-local Input/Output card. */
+export type ToolIoSection = "input" | "output";
+
+/**
+ * Viewer-local Input/Output card. The rail and show-more rows intentionally
+ * mirror ccstyle, but state is kept on this component so history remains
+ * deterministic and no global terminal mouse handler is needed.
+ */
 class ExpandedToolIoView implements Component {
-  private readonly input: string;
-  private readonly output: string;
   private readonly isError: boolean;
+  private input: string;
+  private output: string;
+  private maxOutputLines: number;
+  private maxInputLines: number;
+  private theme: any;
+  private cachedWidth: number | undefined;
+  private cachedLines: string[] | undefined;
+  private lineSections: Array<ToolIoSection | null> = [];
+  private hoveredSection: ToolIoSection | null = null;
+  private showMoreRows: Partial<Record<ToolIoSection, number>> = {};
 
-  constructor(input: string, output: string, isError: boolean) {
+  constructor(
+    input: string,
+    output: string,
+    isError: boolean,
+    maxOutputLines = DEFAULT_TOOL_DISPLAY_CONFIG.expandedPreviewMaxLines,
+    maxInputLines = DEFAULT_TOOL_DISPLAY_CONFIG.expandedPreviewMaxLines,
+    theme?: any,
+  ) {
     this.input = input;
-    this.output = output || "Done";
+    this.output = output;
     this.isError = isError;
+    this.maxOutputLines = Math.max(1, maxOutputLines);
+    this.maxInputLines = Math.max(1, maxInputLines);
+    this.theme = theme;
+  }
+
+  getInputBody(): string {
+    return this.input;
+  }
+
+  getOutputBody(): string {
+    return this.output.trim() ? this.output : "Done";
+  }
+
+  setHoveredSection(section: ToolIoSection | null): void {
+    if (this.hoveredSection === section) return;
+    this.hoveredSection = section;
+    this.invalidate();
+  }
+
+  sectionAtLine(line: number): ToolIoSection | null {
+    return this.lineSections[line] ?? null;
+  }
+
+  showMoreLine(section: ToolIoSection): number | undefined {
+    return this.showMoreRows[section];
   }
 
   render(width: number): string[] {
     const safeWidth = toolViewportWidth(width);
+    if (this.cachedLines && this.cachedWidth === safeWidth) return this.cachedLines;
+
+    const bodyColor = this.isError ? "error" : "toolOutput";
+    const rail = " │ ";
+    const contentWidth = Math.max(1, safeWidth - visibleWidth(rail));
     const rows: string[] = [];
-    const addSection = (title: string, body: string, last: boolean) => {
-      rows.push(truncateToWidth(`${last ? "└" : "├"} ${title}`, safeWidth, ""));
-      const source = body.replace(/\t/g, "   ").replace(/\n+$/, "") || "(empty)";
-      for (const line of source.split("\n")) {
-        for (const wrapped of wrapTextWithAnsi(line, Math.max(1, safeWidth - 3))) {
-          const prefix = last ? "  " : "│ ";
-          rows.push(truncateToWidth(`${prefix}${wrapped}`, safeWidth, ""));
-        }
+    this.lineSections = [];
+    this.showMoreRows = {};
+
+    const push = (line: string, section: ToolIoSection | null) => {
+      rows.push(truncateToWidth(line, safeWidth, ""));
+      this.lineSections.push(section);
+    };
+    // The theme is optional so the component remains safe in small/test hosts.
+    const theme = this.theme;
+    const color = (name: string, value: string): string => typeof theme?.fg === "function" ? theme.fg(name, value) : value;
+    const bold = (value: string): string => typeof theme?.bold === "function" ? theme.bold(value) : value;
+    const pushHeader = (corner: "├" | "└", title: string) => push(
+      color("dim", ` ${corner} `) + color("accent", bold(title)),
+      null,
+    );
+    const pushRail = (value: string, section: ToolIoSection, continued: boolean) => push(
+      color("dim", continued ? rail : "   ") + value,
+      section,
+    );
+    const pushBlank = () => push(color("dim", " │"), null);
+    const styleInput = (line: string): string => {
+      const match = line.match(/^([A-Za-z_][\w.-]*)(:\s*)(.*)$/);
+      return match
+        ? color("dim", `${match[1]}${match[2]}`) + color("muted", match[3] ?? "")
+        : color("muted", line);
+    };
+    const pushBody = (body: string, section: ToolIoSection, limit: number, continued: boolean, input: boolean) => {
+      const raw = body.replace(/\t/g, "   ").replace(/\n+$/, "");
+      if (!raw.trim()) {
+        pushRail(color("dim", "(empty)"), section, continued);
+        return;
+      }
+      const sources = raw.split("\n");
+      const wrapped: string[] = [];
+      for (const source of sources) {
+        const styled = input ? styleInput(source) : color(bodyColor, source);
+        const parts = wrapTextWithAnsi(styled, contentWidth);
+        wrapped.push(...(parts.length ? parts : [styled]));
+      }
+      const truncated = sources.length > limit || wrapped.length > limit;
+      const visible = truncated ? wrapped.slice(0, limit) : wrapped;
+      for (const line of visible) pushRail(line, section, continued);
+      if (truncated) {
+        const hidden = Math.max(1, wrapped.length - visible.length);
+        const hintColor = this.hoveredSection === section ? "text" : "dim";
+        pushRail(
+          color("dim", `… +${hidden} more lines`) +
+            color("dim", " •") + color(hintColor, ` ${showMoreHintText()}`),
+          section,
+          continued,
+        );
+        this.showMoreRows[section] = rows.length - 1;
       }
     };
-    if (this.input.trim()) {
-      addSection("Input", this.input, false);
-      addSection("Output", this.output, true);
-    } else {
-      addSection("Output", this.output, true);
+
+    const hasInput = this.input.trim().length > 0;
+    const output = this.getOutputBody();
+    if (hasInput) {
+      pushHeader("├", "Input");
+      pushBody(this.input, "input", this.maxInputLines, true, true);
+      pushBlank();
     }
-    return rows.map((row) => (this.isError ? row : row));
+    pushHeader("└", "Output");
+    pushBody(output, "output", this.maxOutputLines, false, false);
+
+    this.cachedWidth = safeWidth;
+    this.cachedLines = rows;
+    return rows;
+  }
+
+  invalidate(): void {
+    this.cachedWidth = undefined;
+    this.cachedLines = undefined;
   }
 
-  invalidate(): void {}
 }
 
 function unavailableComponent(reason: string, theme: any): Component {
@@ -210,9 +363,20 @@ function settledIcon(context: any): string {
 function renderFallbackResult(result: any, options: any, theme: any, context: any): Component {
   const error = options?.isError || context?.isError;
   const expanded = options?.expanded === true || context?.expanded === true;
-  const text = textFromResult(result, expanded);
-  if (expanded && (text.trim() || formatToolInputArgs(context?.args).trim())) {
-    return new ExpandedToolIoView(formatToolInputArgs(context?.args), text, Boolean(error));
+  const maxChars = Number.isFinite(context?.maxChars) ? Math.max(0, Math.floor(context.maxChars)) : 16_384;
+  const text = textFromResult(result, expanded, maxChars);
+  if (expanded && (text.trim() || formatToolInputArgs(context?.args, maxChars).trim())) {
+    const maxLines = Number.isFinite(context?.diffConfig?.expandedPreviewMaxLines)
+      ? Math.max(1, Math.floor(context.diffConfig.expandedPreviewMaxLines))
+      : DEFAULT_TOOL_DISPLAY_CONFIG.expandedPreviewMaxLines;
+    return new ExpandedToolIoView(
+      formatToolInputArgs(context?.args, maxChars),
+      text,
+      Boolean(error),
+      maxLines,
+      maxLines,
+      theme,
+    );
   }
   const lines = text ? text.split("\n") : [];
   const count = lines.length;

package/src/ui/conversation-timeline.ts

@@ -143,6 +143,8 @@ export class ConversationTimeline implements Component {
   private focusedToolCallId: string | undefined;
   private expandedTools = new Set<string>();
   private hoveredToolCallId: string | undefined;
+  private hoveredIoView: any;
+  private hoveredIoSection: "input" | "output" | null = null;
   /** The last tool clicked; used to make only clickCount=2 collapse it. */
   private lastClickedToolCallId: string | undefined;
   private lastClickedPoint: { x: number; y: number } | undefined;
@@ -167,6 +169,11 @@ export class ConversationTimeline implements Component {
     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;
     if (this.hoveredToolCallId && !ids.has(this.hoveredToolCallId)) this.hoveredToolCallId = undefined;
+    if (this.hoveredIoView && typeof this.hoveredIoView.setHoveredSection === "function") {
+      this.hoveredIoView.setHoveredSection(null);
+      this.hoveredIoView = undefined;
+      this.hoveredIoSection = null;
+    }
     if (this.lastClickedToolCallId && !ids.has(this.lastClickedToolCallId)) {
       this.lastClickedToolCallId = undefined;
       this.lastClickedPoint = undefined;
@@ -182,6 +189,11 @@ export class ConversationTimeline implements Component {
     if (!show) {
       this.focusedToolCallId = undefined;
       this.hoveredToolCallId = undefined;
+      if (this.hoveredIoView && typeof this.hoveredIoView.setHoveredSection === "function") {
+        this.hoveredIoView.setHoveredSection(null);
+      }
+      this.hoveredIoView = undefined;
+      this.hoveredIoSection = null;
       this.lastClickedToolCallId = undefined;
       this.lastClickedPoint = undefined;
     }
@@ -360,8 +372,33 @@ export class ConversationTimeline implements Component {
         event.y >= span.clickStartLine &&
         event.y < span.clickStartLine + (span.clickHeight ?? 1),
       )?.toolCallId;
-      if (hovered === this.hoveredToolCallId) return undefined;
+      const fullSpan = this.snapshot.toolSpans.find((span) =>
+        event.y >= span.startLine && event.y < span.startLine + span.height,
+      );
+      let nextIoView: any;
+      let nextIoSection: "input" | "output" | null = null;
+      if (fullSpan) {
+        const component = this.toolComponents.get(fullSpan.toolCallId) as any;
+        const view = component?.resultRendererComponent;
+        const localRow = event.y - fullSpan.startLine;
+        if (view && typeof view.sectionAtLine === "function" && typeof view.showMoreLine === "function" && typeof view.setHoveredSection === "function") {
+          const section = view.sectionAtLine(localRow);
+          if (section && view.showMoreLine(section) === localRow) {
+            nextIoView = view;
+            nextIoSection = section;
+          }
+        }
+      }
+      const unchanged = hovered === this.hoveredToolCallId &&
+        nextIoView === this.hoveredIoView && nextIoSection === this.hoveredIoSection;
+      if (unchanged) return undefined;
+      if (this.hoveredIoView && this.hoveredIoView !== nextIoView && typeof this.hoveredIoView.setHoveredSection === "function") {
+        this.hoveredIoView.setHoveredSection(null);
+      }
       this.hoveredToolCallId = hovered;
+      this.hoveredIoView = nextIoView;
+      this.hoveredIoSection = nextIoSection;
+      if (nextIoView) nextIoView.setHoveredSection(nextIoSection);
       this.invalidate();
       this.options.onChange?.();
       return { handled: true, render: true };

package/src/ui/conversation-viewer.ts

@@ -18,9 +18,104 @@ 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";
+import { createViewerCcstyleResult } from "./ccstyle/tool-result.js";
 
 /** Base lines consumed by the overlay: borders, header, separator and footer. */
 const CHROME_LINES_BASE = 6;
+const FULL_TOOL_PREVIEW_MAX_CHARS = 500_000;
+
+class FullToolPreview implements Component {
+  private readonly body: Component;
+  private scrollOffset = 0;
+  private pageSize = 1;
+  private totalLines = 1;
+  private hoveredClose = false;
+
+  constructor(
+    private readonly tui: TUI,
+    private readonly theme: Theme,
+    private readonly title: string,
+    body: Component,
+    private readonly done: (result: undefined) => void,
+  ) {
+    this.body = body;
+  }
+
+  handleInput(data: string): void {
+    if (matchesKey(data, Key.escape) || matchesKey(data, "q")) {
+      this.done(undefined);
+      return;
+    }
+    const delta = matchesKey(data, Key.up) ? -1 : matchesKey(data, Key.down) ? 1 :
+      matchesKey(data, "pageUp") ? -this.pageSize : matchesKey(data, "pageDown") ? this.pageSize :
+        matchesKey(data, Key.home) ? -this.totalLines : matchesKey(data, Key.end) ? this.totalLines : 0;
+    if (delta !== 0) {
+      this.scrollTo(this.scrollOffset + delta);
+    }
+  }
+
+  handleMouse(event: TuiMouseEvent): { handled?: boolean; capture?: boolean; render?: boolean } | undefined {
+    const closeHit = event.y === 1 && event.x >= Math.max(0, event.width - 7) && event.x < event.width;
+    if (event.type === "move") {
+      if (closeHit === this.hoveredClose) return undefined;
+      this.hoveredClose = closeHit;
+      return { handled: true, render: true };
+    }
+    if (closeHit && event.button === "left") {
+      if (event.type === "press") return { handled: true, capture: true, render: false };
+      if (event.type === "click") {
+        this.done(undefined);
+        return { handled: true, render: false };
+      }
+    }
+    if (event.type === "wheel") {
+      this.scrollTo(this.scrollOffset + Math.trunc(event.wheelDelta ?? 0));
+      return { handled: true, render: true };
+    }
+    return undefined;
+  }
+
+  render(width: number): string[] {
+    const safeWidth = Math.max(12, Math.floor(Number.isFinite(width) ? width : 12));
+    const inner = Math.max(1, safeWidth - 2);
+    const bodyWidth = Math.max(1, inner - 1);
+    const terminalRows = Math.max(1, this.tui.terminal.rows);
+    const viewport = Math.max(1, Math.min(30, Math.floor(terminalRows * 0.8), terminalRows - 6));
+    const wrapped = this.body.render(bodyWidth);
+    this.totalLines = wrapped.length;
+    this.pageSize = viewport;
+    this.scrollOffset = Math.min(this.scrollOffset, Math.max(0, this.totalLines - this.pageSize));
+    const visible = wrapped.slice(this.scrollOffset, this.scrollOffset + this.pageSize);
+    const border = (text: string) => this.theme.fg("border", text);
+    const pad = (text: string, rowWidth = inner): string => {
+      const clipped = truncateToWidth(text, rowWidth, "…", true);
+      return clipped + " ".repeat(Math.max(0, rowWidth - visibleWidth(clipped)));
+    };
+    const close = this.theme.fg(this.hoveredClose ? "text" : "dim", "[esc]");
+    const header = `${this.theme.bold(this.theme.fg("accent", this.title))}`;
+    const status = `${this.scrollOffset + 1}-${Math.min(this.totalLines, this.scrollOffset + this.pageSize)} / ${this.totalLines} lines · ↑↓ PgUp/PgDn Home/End · [esc] close`;
+    return [
+      border(`╭${"─".repeat(inner)}╮`),
+      `${border("│")}${pad(` ${header}`, inner - visibleWidth(close))}${close}${border("│")}`,
+      `${border("├")}${border("─".repeat(inner))}${border("┤")}`,
+      ...Array.from({ length: viewport }, (_, index) => `${border("│")}${pad(` ${visible[index] ?? ""}`, bodyWidth)}${border("│")}`),
+      `${border("├")}${border("─".repeat(inner))}${border("┤")}`,
+      `${border("│")}${pad(this.theme.fg("dim", ` ${status}`))}${border("│")}`,
+      border(`╰${"─".repeat(inner)}╯`),
+    ];
+  }
+
+  invalidate(): void {
+    this.body.invalidate();
+  }
+
+  private scrollTo(offset: number): void {
+    const next = Math.max(0, Math.min(Math.max(0, this.totalLines - this.pageSize), offset));
+    if (next === this.scrollOffset) return;
+    this.scrollOffset = next;
+    this.tui.requestRender();
+  }
+}
 const MIN_VIEWPORT = 3;
 export const VIEWPORT_HEIGHT_PCT = 70;
 const MAX_COPY_CHARS = 500_000;
@@ -174,6 +269,12 @@ export class ConversationViewer implements Component {
       this.jumpToMessage(1);
     } else if (data === "K" || matchesKey(data, Key.shift("k"))) {
       this.jumpToMessage(-1);
+    } else if (data === "]") {
+      this.focusNearbyTool(1);
+    } else if (data === "[") {
+      this.focusNearbyTool(-1);
+    } else if (data === "w") {
+      this.openFocusedToolPreview();
     } else if (data === "g") {
       this.scrollToTop();
     } else if (data === "G" || matchesKey(data, Key.shift("g"))) {
@@ -361,9 +462,9 @@ export class ConversationViewer implements Component {
       if (this.isStoppable()) actions.push(this.stopArmed ? th.fg("error", "x again to STOP") : th.fg("dim", "x stop"));
       const editHint = this.isLive() ? " O" : "";
       const shortcutHints = [
-        `j/k scroll · J/K messages · g/G   t   M o${editHint}   /n N   q`,
-        `M o${editHint}   /n N   q`,
-        `M o${editHint} /n N q`,
+        `j/k scroll · J/K messages · [/] tools · w preview · g/G   t   M o${editHint}   /n N   q`,
+        `[/] tools · w preview · M o${editHint}   /n N   q`,
+        `[/] tools · w · M o${editHint} /n N q`,
       ];
       const scrollPct = contentLines.length <= viewportHeight ? "100%" : `${Math.round(((visibleStart + viewportHeight) / contentLines.length) * 100)}%`;
       const count = th.fg("dim", `${contentLines.length} lines · ${scrollPct}`);
@@ -521,12 +622,90 @@ export class ConversationViewer implements Component {
     const focused = this.timeline.getFocusedToolCallId();
     const refreshed = this.timeline.getSnapshot();
     const index = refreshed.messageBlocks.findIndex((block) => block.toolCallId === focused);
-    if (index >= 0) this.selectedMessageIdx = index;
+    if (index >= 0) {
+      this.selectedMessageIdx = index;
+      this.buildContentLines(this.lastInnerW || 80);
+      this.autoScroll = false;
+      this.scrollTargetIntoView(index);
+    }
+    this.invalidate();
+    this.tui.requestRender();
+  }
+
+  private focusNearbyTool(direction: 1 | -1): void {
+    this.buildContentLines(this.lastInnerW || 80);
+    const toolIndices = this.cachedMessageBlocks
+      .map((block, index) => block.kind === "tool" && block.toolCallId ? index : -1)
+      .filter((index): index is number => index >= 0);
+    if (toolIndices.length === 0) return;
+
+    const focusedId = this.timeline.getFocusedToolCallId();
+    const focusedIndex = focusedId
+      ? this.cachedMessageBlocks.findIndex((block) => block.toolCallId === focusedId)
+      : -1;
+    const current = focusedIndex >= 0 ? focusedIndex : this.currentMessageIndex();
+    const target = focusedIndex < 0
+      ? direction > 0 ? toolIndices[0] : toolIndices[toolIndices.length - 1]
+      : direction > 0
+        ? toolIndices.find((index) => index > current)
+        : [...toolIndices].reverse().find((index) => index < current);
+    if (target === undefined) return;
+
+    const block = this.cachedMessageBlocks[target];
+    this.selectedMessageIdx = target;
     this.autoScroll = false;
+    this.scrollTargetIntoView(target);
+    this.timeline.setFocusedToolCallId(block.toolCallId);
     this.invalidate();
     this.tui.requestRender();
   }
 
+  private scrollTargetIntoView(index: number): void {
+    if (index < 0 || index >= this.cachedMessageStarts.length) return;
+    const targetLine = this.cachedMessageStarts[index];
+    const viewportHeight = this.viewportHeight();
+    const maxScroll = Math.max(0, this.cachedLines.length - viewportHeight);
+    if (targetLine < this.scrollOffset) this.scrollOffset = targetLine;
+    else if (targetLine >= this.scrollOffset + viewportHeight) this.scrollOffset = targetLine - viewportHeight + 1;
+    this.scrollOffset = Math.max(0, Math.min(maxScroll, this.scrollOffset));
+  }
+
+  private openFocusedToolPreview(): void {
+    this.buildContentLines(this.lastInnerW || 80);
+    const block = this.currentBlock();
+    const custom = this.operations?.ctx?.ui?.custom;
+    if (block?.kind !== "tool" || typeof custom !== "function") return;
+
+    const toolName = block.toolName || "tool";
+    const args = block.args ?? block.toolArguments;
+    const result = block.toolResult ?? block.result ?? { content: [] };
+    const title = `${toolName} · full preview`;
+
+    void custom.call(this.operations!.ctx.ui, (tui, overlayTheme, _keybindings, done) => {
+      const body = createViewerCcstyleResult(
+        toolName,
+        result,
+        { expanded: true, isError: result.isError === true },
+        overlayTheme,
+        {
+          args,
+          maxChars: FULL_TOOL_PREVIEW_MAX_CHARS,
+          diffConfig: { expandedPreviewMaxLines: Number.MAX_SAFE_INTEGER },
+        },
+      );
+      return new FullToolPreview(tui, overlayTheme as Theme, title, body, done);
+    }, {
+        overlay: true,
+        overlayOptions: {
+          anchor: "center",
+          width: "85%",
+          minWidth: 50,
+          maxHeight: "80%",
+          margin: 2,
+        },
+      }).catch(() => undefined);
+  }
+
   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));

package/test/ui/conversation-diff.test.ts

@@ -66,6 +66,25 @@ describe("viewer-local ccstyle diff renderer", () => {
     expect(rendered).not.toContain("later");
   });
 
+  it("matches the pi-cc Input/Output tree style and hover affordance", () => {
+    const component = createViewerCcstyleResult("read", {
+      content: [{ type: "text", text: "one\ntwo\nthree" }],
+    }, { expanded: true }, theme, {
+      args: { path: "file.txt", offset: 2 },
+      diffConfig: { expandedPreviewMaxLines: 2 },
+    }) as any;
+
+    const initial = component.render(100).join("\n");
+    expect(initial).toContain("<accent><bold>Input</bold></accent>");
+    expect(initial).toContain("<dim>path: </dim><muted>file.txt</muted>");
+    expect(initial).toContain("<accent><bold>Output</bold></accent>");
+    expect(initial).toContain("click to show more");
+    const outputHintLine = component.showMoreLine("output");
+    expect(outputHintLine).toEqual(expect.any(Number));
+    component.setHoveredSection("output");
+    expect(component.render(100).join("\n")).toContain("<text> click to show more</text>");
+  });
+
   it("reads tool-hint hover state at render time", () => {
     let hovered = false;
     const component = createViewerCcstyleResult("read", {

package/test/ui/conversation-viewer.test.ts

@@ -82,7 +82,7 @@ describe("ConversationViewer", () => {
       { pi: {} as any, ctx: {} as any, readOnly: false },
     );
     const liveFooter = live.render(120).join("\n");
-    expect(liveFooter).toContain("j/k scroll · J/K messages · g/G   t   M o O   /n N   q");
+    expect(liveFooter).toContain("j/k scroll · J/K messages · [/] tools · w preview · g/G   t   M o O   /n N   q");
     expect(liveFooter).toContain("e steer");
     expect(liveFooter).toContain("x stop");
     live.handleInput("\r");
@@ -104,7 +104,7 @@ describe("ConversationViewer", () => {
       { pi: {} as any, ctx: {} as any, readOnly: true },
     );
     const historyFooter = history.render(120).join("\n");
-    expect(historyFooter).toContain("j/k scroll · J/K messages · g/G   t   M o   /n N   q");
+    expect(historyFooter).toContain("j/k scroll · J/K messages · [/] tools · w preview · g/G   t   M o   /n N   q");
     expect(historyFooter).not.toContain("M o O");
   });
 
@@ -180,6 +180,69 @@ describe("ConversationViewer", () => {
     expect((viewer as any).currentBlock().markdown).toBe("first");
   });
 
+  it("focuses nearby tools with [ and ] without changing line-scroll keys", () => {
+    const viewer = new ConversationViewer(
+      tui(),
+      createStaticConversationSource([
+        { role: "assistant", content: [{ type: "toolCall", name: "read", arguments: { path: "first" } }] },
+        { role: "toolResult", toolName: "read", content: [{ type: "text", text: "first output" }] },
+        { role: "assistant", content: [{ type: "text", text: "between" }, { type: "toolCall", name: "read", arguments: { path: "second" } }] },
+        { role: "toolResult", toolName: "read", content: [{ type: "text", text: "second output" }] },
+      ] as any),
+      record(),
+      undefined,
+      theme,
+      vi.fn(),
+    );
+    viewer.render(120);
+    const timeline = (viewer as any).timeline;
+    const ids = timeline.getSnapshot().interactiveToolIds;
+    expect(ids).toHaveLength(2);
+
+    viewer.handleInput("]");
+    expect(timeline.getFocusedToolCallId()).toBe(ids[0]);
+    viewer.render(120);
+    expect((viewer as any).currentBlock().toolCallId).toBe(ids[0]);
+    viewer.handleInput("]");
+    expect(timeline.getFocusedToolCallId()).toBe(ids[1]);
+    viewer.render(120);
+    expect((viewer as any).currentBlock().toolCallId).toBe(ids[1]);
+    viewer.handleInput("[");
+    expect(timeline.getFocusedToolCallId()).toBe(ids[0]);
+  });
+
+  it("opens a complete read-only tool preview with w for the focused tool", () => {
+    const ui = tui();
+    const custom = vi.fn((factory: any) => {
+      const preview = factory(ui, theme, undefined, vi.fn());
+      const rendered = preview.render(100).join("\\n");
+      expect(rendered).toContain("Input");
+      expect(rendered).toContain("Output");
+      expect(rendered).toContain("one");
+      expect(rendered).toContain("six");
+      return Promise.resolve(undefined);
+    });
+    const viewer = new ConversationViewer(
+      ui,
+      createStaticConversationSource([
+        { role: "assistant", content: [{ type: "toolCall", name: "read", arguments: { path: "x" } }] },
+        { role: "toolResult", toolName: "read", content: [{ type: "text", text: "one\ntwo\nthree\nfour\nfive\nsix" }] },
+      ] as any),
+      record(),
+      undefined,
+      theme,
+      vi.fn(),
+      undefined,
+      undefined,
+      undefined,
+      { pi: {} as any, ctx: { ui: { custom } } as any, readOnly: true },
+    );
+    viewer.render(120);
+    viewer.handleInput("]");
+    viewer.handleInput("w");
+    expect(custom).toHaveBeenCalledWith(expect.any(Function), expect.objectContaining({ overlay: true }));
+  });
+
   it("uses a distinct focus rail for tool cards", () => {
     const railTheme = {
       fg: (name: string, text: string) => `<${name}>${text}</${name}>`,