@bastani/atomic 0.9.13 → 0.9.14-alpha.2

package/dist/builtin/workflows/src/tui/graph-view-input.ts

@@ -1,6 +1,6 @@
 import { GRAPH_SCROLL_STEP_COLS } from "./graph-view-constants.js";
 import { GraphViewRenderer } from "./graph-view-render.js";
-import { isKeybindingsLike, type KeybindingsLike } from "./keybindings-adapter.js";
+import { APP_ACTION, isKeybindingsLike, type KeybindingsLike, matchesAction } from "./keybindings-adapter.js";
 import { isTerminalLeftMousePress, parseTerminalMouseInput, terminalMouseWheelDirection } from "./mouse-input.js";
 import { defaultResponseFor, handlePromptCardInput } from "./prompt-card.js";
 import { filterStages, type SwitcherState } from "./switcher.js";
@@ -12,11 +12,14 @@ interface MouseWheelDelta {
 }
 
 const GRAPH_SCROLL_WHEEL_LINES = 4;
+/** Raw Ctrl+O is only a compatibility fallback for hosts without keybindings. */
+const TOOL_EXPAND_FALLBACK = "\x0f";
 
 /** Keyboard, mouse, switcher, prompt, and focus navigation handling. */
 export abstract class GraphViewInputController extends GraphViewRenderer {
 	/** Returns true if consumed. */
 	handleInput(data: string): boolean {
+		if (this.toolDetail !== null) return this._handleToolDetailInput(data);
 		if (this._isReturnToMainChatInput(data)) {
 			this._returnToMainChat();
 			return true;
@@ -35,10 +38,89 @@ export abstract class GraphViewInputController extends GraphViewRenderer {
 		return this._handleGraphInput(data);
 	}
 
+	private _handleToolDetailInput(data: string): boolean {
+		if (this.graphLayout.handleScrollbarInput(data)) {
+			this.pendingEnsureFocusedVisible = false;
+			return true;
+		}
+		const wheelDelta = this._mouseWheelDelta(data);
+		if (wheelDelta) {
+			if (wheelDelta.rows !== 0) this._scrollGraphVertically(wheelDelta.rows);
+			return true;
+		}
+		if (this._matchesToolExpandInput(data)) {
+			this.toolDetailExpanded = !this.toolDetailExpanded;
+			this.pendingEnsureFocusedVisible = true;
+			return true;
+		}
+		if (this._isReturnToMainChatInput(data) || matchesKey(data, Key.escape)) {
+			this._closeToolDetail();
+			return true;
+		}
+		if (matchesKey(data, Key.ctrl("c"))) {
+			this.onClose?.();
+			return true;
+		}
+		if (matchesKey(data, "h") && this.onHide) {
+			this.onHide();
+			return true;
+		}
+		// A capped payload still renders far more rows than a terminal shows, so
+		// the detail must be readable without a mouse: these keys drive the same
+		// vertical scroll the wheel and scrollbar drive.
+		if (matchesKey(data, Key.down)) {
+			this._scrollGraphVertically(1);
+			return true;
+		}
+		if (matchesKey(data, Key.up)) {
+			this._scrollGraphVertically(-1);
+			return true;
+		}
+		if (matchesKey(data, Key.pageDown)) {
+			this._scrollGraphVertically(this._toolDetailPageRows());
+			return true;
+		}
+		if (matchesKey(data, Key.pageUp)) {
+			this._scrollGraphVertically(-this._toolDetailPageRows());
+			return true;
+		}
+		if (matchesKey(data, Key.home)) {
+			this.pendingEnsureFocusedVisible = false;
+			this.graphLayout.scrollView.scrollToStart();
+			return true;
+		}
+		if (matchesKey(data, Key.end)) {
+			this.pendingEnsureFocusedVisible = false;
+			this.graphLayout.scrollView.scrollToEnd();
+			return true;
+		}
+		if (
+			matchesKey(data, Key.enter) ||
+			matchesKey(data, Key.left) ||
+			matchesKey(data, Key.right) ||
+			matchesKey(data, "/") ||
+			parseTerminalMouseInput(data) !== null
+		)
+			return true;
+		return false;
+	}
+
+	/** One page is the visible body, less a row of overlap for continuity. */
+	private _toolDetailPageRows(): number {
+		return Math.max(1, this.graphLayout.viewportRows - 1);
+	}
+
 	private _promptKeybindings(): KeybindingsLike | undefined {
 		return isKeybindingsLike(this.piKeybindings) ? this.piKeybindings : undefined;
 	}
 
+	private _matchesToolExpandInput(data: string): boolean {
+		const keybindings = this._promptKeybindings();
+		// Do not run a raw fallback beside a host manager: a user remap must win,
+		// and an explicitly unbound action must remain unbound.
+		return keybindings ? matchesAction(keybindings, data, APP_ACTION.toolsExpand) : data === TOOL_EXPAND_FALLBACK;
+	}
+
 	private _isReturnToMainChatInput(data: string): boolean {
 		return matchesKey(data, Key.ctrl("x"));
 	}
@@ -151,11 +233,13 @@ export abstract class GraphViewInputController extends GraphViewRenderer {
 				const idx = this.cachedLayout.findIndex((n) => n.stage.id === selected.id);
 				if (idx !== -1) {
 					this._setFocusedIndex(idx);
-					// Selecting from the `/` switcher should complete the same
-					// action as pressing Enter on a graph node: jump straight
-					// into that stage's chat when the attach shell is present.
+					// Selecting from the switcher opens tool detail or preserves the
+					// existing stage attach path; stages without an attach callback
+					// retain their historical no-op behavior.
 					this.switcherOpen = false;
-					if (this._attachFocusedStage()) return true;
+					if (this.cachedLayout[idx]?.stage.nodeKind === "tool") this._openFocusedToolDetail();
+					else this._attachFocusedStage();
+					return true;
 				}
 			}
 			this.switcherOpen = false;
@@ -241,6 +325,9 @@ export abstract class GraphViewInputController extends GraphViewRenderer {
 	}
 
 	private _activateFocusedNode(): void {
+		// Tool nodes open a read-only snapshot detail; they never enter the
+		// stage-chat attach path even though they share the graph card shape.
+		if (this._openFocusedToolDetail()) return;
 		// Enter and direct node clicks attach the popup interior to the focused
 		// stage. The attach shell swaps in the stage-chat view without remounting
 		// the overlay; without a callback, fall back to the legacy expand/collapse
@@ -309,10 +396,18 @@ export abstract class GraphViewInputController extends GraphViewRenderer {
 		if (direction === "right") return { cols: GRAPH_SCROLL_STEP_COLS, rows: 0 };
 		return null;
 	}
+
 	get _graphScrollbarGeometry() {
 		return this.graphLayout.scrollbarGeometry;
 	}
 
+	get _toolDetail(): typeof this.toolDetail {
+		return this.toolDetail;
+	}
+	get _toolDetailExpanded(): boolean {
+		return this.toolDetailExpanded;
+	}
+
 	// ---- test seams ----
 	get _focusedIndex(): number {
 		return this.focusedIndex;

package/dist/builtin/workflows/src/tui/graph-view-layout.ts

@@ -85,6 +85,7 @@ export class GraphViewLayout {
 	private readonly callbacks: GraphViewLayoutCallbacks;
 	private bodyViewportRows = 0;
 	private bodyContentRows = 0;
+	private lastBodyWidth: number | undefined;
 	private scrollbar: ScrollbarGeometry | undefined;
 	private draggingScrollbar: { grabOffset: number } | undefined;
 
@@ -93,7 +94,12 @@ export class GraphViewLayout {
 
 		const margin = new CallbackComponent(() => [""]);
 		const header = new CallbackComponent((width) => this.callbacks.renderHeader(width));
-		const body = new CallbackComponent((width) => this.renderBody(width));
+		const body = new CallbackComponent((width) => {
+			// The ScrollView reserves its scrollbar column from the width it hands
+			// the body, so this is the only place the real body width is known.
+			this.lastBodyWidth = width;
+			return this.renderBody(width);
+		});
 		const footer = new CallbackComponent((width) => this.callbacks.renderFooter(width));
 		this.scrollView = new ScrollView(body, {
 			axis: "vertical",
@@ -117,16 +123,20 @@ export class GraphViewLayout {
 		const safeHeight = Math.max(1, Math.floor(height));
 		const marginRows = graphLayoutMarginRows(safeHeight);
 		this.bodyViewportRows = graphLayoutBodyRows(safeHeight);
-		this.bodyContentRows = Math.max(
-			0,
-			Math.floor(this.callbacks.bodyContentHeight(safeWidth, this.bodyViewportRows)),
-		);
-		const requestRender = this.callbacks.requestRender ?? EMPTY_RENDER;
-		this.scrollView.updateLayout(this.bodyContentRows, this.bodyViewportRows, requestRender);
-		this.scrollView.setScrollbar(this.bodyContentRows > this.bodyViewportRows ? "always" : "hidden");
-		this.callbacks.beforeFrame?.(this.scrollView, this.bodyViewportRows, this.bodyContentRows, safeWidth);
-
-		const frame = renderLayoutFrame(this.root, safeWidth, safeHeight, requestRender);
+		// Content height can depend on the width the body is laid out at, and that
+		// is narrower than the frame whenever the ScrollView reserves its
+		// scrollbar column. Measuring at the frame width clamps the scroll range
+		// to a height the body never produced, which strands its tail rows for
+		// every input path. Measure at the width the body actually received last
+		// time, then reconcile if this frame disagrees; when no column is
+		// reserved the two are already the same width and nothing re-runs.
+		const requestedTop = this.scrollView.scrollTop;
+		const expectedWidth = this.lastBodyWidth ?? safeWidth;
+		let frame = this.renderPass(safeWidth, safeHeight, expectedWidth);
+		const measuredWidth = this.lastBodyWidth ?? safeWidth;
+		if (measuredWidth !== expectedWidth && this.contentRowsFor(measuredWidth) !== this.bodyContentRows) {
+			frame = this.renderPass(safeWidth, safeHeight, measuredWidth, requestedTop);
+		}
 		const bodyBox = getScrollViewBox(frame, this.scrollView);
 		this.scrollbar = bodyBox ? getScrollbarGeometry(bodyBox) : undefined;
 		if (!this.scrollbar) this.draggingScrollbar = undefined;
@@ -142,6 +152,27 @@ export class GraphViewLayout {
 		};
 	}
 
+	private contentRowsFor(width: number): number {
+		return Math.max(0, Math.floor(this.callbacks.bodyContentHeight(width, this.bodyViewportRows)));
+	}
+
+	/**
+	 * One full layout pass whose scroll range is measured at `measureWidth`.
+	 *
+	 * `restoreTop` re-applies a scroll position that a previous pass' stale,
+	 * shorter content height clamped away, so reconciling never scrolls the
+	 * user back up a frame.
+	 */
+	private renderPass(safeWidth: number, safeHeight: number, measureWidth: number, restoreTop?: number): LayoutFrame {
+		const requestRender = this.callbacks.requestRender ?? EMPTY_RENDER;
+		this.bodyContentRows = this.contentRowsFor(measureWidth);
+		this.scrollView.updateLayout(this.bodyContentRows, this.bodyViewportRows, requestRender);
+		if (restoreTop !== undefined && this.scrollView.scrollTop < restoreTop) this.scrollView.scrollTo(restoreTop);
+		this.scrollView.setScrollbar(this.bodyContentRows > this.bodyViewportRows ? "always" : "hidden");
+		this.callbacks.beforeFrame?.(this.scrollView, this.bodyViewportRows, this.bodyContentRows, safeWidth);
+		return renderLayoutFrame(this.root, safeWidth, safeHeight, requestRender);
+	}
+
 	/** Repaint the thumb after overlays that cover the body rows. */
 	paintScrollbar(lines: string[], width: number): void {
 		const geometry = this.scrollbar;

package/dist/builtin/workflows/src/tui/graph-view-render-helpers.ts

@@ -1,12 +1,27 @@
 import { BOLD, hexBg, hexToAnsi, RESET } from "./color-utils.js";
 import type { GraphCanvas } from "./graph-canvas.js";
-import { COMPACT_HINT_KEYS, HINT_KEYS, MODE_PILL_LABEL } from "./graph-view-constants.js";
+import {
+	COMPACT_HINT_KEYS,
+	COMPACT_TOOL_DETAIL_HINT_KEYS,
+	HINT_KEYS,
+	MODE_PILL_LABEL,
+	TOOL_DETAIL_HINT_KEYS,
+} from "./graph-view-constants.js";
 import { GraphViewState } from "./graph-view-state.js";
 import { renderOutlinePill } from "./header.js";
+import { APP_ACTION, isKeybindingsLike } from "./keybindings-adapter.js";
 import { NODE_H, NODE_W } from "./layout.js";
 import { sliceColumns, truncateToWidth, visibleWidth } from "./text-helpers.js";
 import { OVERLAY_HIDDEN_STATUS_KEYS, WORKFLOW_STATUS_KEY } from "./workflow-status.js";
 
+export function toolExpandKey(piKeybindings: unknown): string {
+	const keybindings = isKeybindingsLike(piKeybindings) ? piKeybindings : undefined;
+	const keys = keybindings?.getKeys?.(APP_ACTION.toolsExpand);
+	// Missing manager → default. Empty list → explicitly unbound; do not
+	// invent a keyless `expand` label the way `"".join` used to.
+	if (keys === undefined) return "ctrl+o";
+	return keys.filter((key) => key.length > 0).join("/");
+}
 /** Low-level overlay geometry, chrome, ANSI canvas, and edge helpers. */
 export abstract class GraphViewRenderHelpers extends GraphViewState {
 	/**
@@ -45,13 +60,47 @@ export abstract class GraphViewRenderHelpers extends GraphViewState {
 		const rightEdgePad = 2;
 		const hintsBudget = Math.max(0, width - leftEdgePad - pillW - rightEdgePad);
 		const fullHierarchyHint = "ctrl+x return to main chat";
+		// A focused tool node has no stage chat, but Enter now opens its read-only
+		// detail, so it keeps an activation hint of its own instead of losing the
+		// `↵` affordance entirely the way an unfocusable node does. Both lookups
+		// resolve once per frame: the two hint lists below are built eagerly, and
+		// re-resolving focus inside each would double this frame's layout reads.
+		const chatTarget = this.toolDetail === null ? this._focusedStageChatTarget() : undefined;
+		const focusedToolNode = this.toolDetail === null && this._focusedTool() !== undefined;
+		const relabelActivation = (
+			keys: ReadonlyArray<{ key: string; label: string }>,
+			label: string,
+		): Array<{ key: string; label: string }> =>
+			keys.map((hint) => (hint.key === "↵" ? { key: hint.key, label } : hint));
+		const toolDetailExpandKey = toolExpandKey(this.piKeybindings);
+		const expandHint =
+			toolDetailExpandKey.length > 0
+				? [{ key: toolDetailExpandKey, label: this.toolDetailExpanded ? "collapse" : "expand" }]
+				: [];
+		const toolDetailHintKeys = this.toolDetail === null ? [] : [...TOOL_DETAIL_HINT_KEYS, ...expandHint];
+		const compactToolDetailHintKeys =
+			this.toolDetail === null ? [] : [...COMPACT_TOOL_DETAIL_HINT_KEYS, ...expandHint];
 		const availableHintKeys =
-			this._focusedStageChatTarget() === undefined ? HINT_KEYS.filter(({ key }) => key !== "↵") : HINT_KEYS;
+			this.toolDetail !== null
+				? toolDetailHintKeys
+				: focusedToolNode
+					? relabelActivation(HINT_KEYS, "open tool detail")
+					: chatTarget === undefined
+						? HINT_KEYS.filter(({ key }) => key !== "↵")
+						: HINT_KEYS;
 		const availableCompactHintKeys =
-			this._focusedStageChatTarget() === undefined
-				? COMPACT_HINT_KEYS.filter(({ key }) => key !== "↵")
-				: COMPACT_HINT_KEYS;
-		const hintKeys = hintsBudget >= visibleWidth(fullHierarchyHint) ? availableHintKeys : availableCompactHintKeys;
+			this.toolDetail !== null
+				? compactToolDetailHintKeys
+				: focusedToolNode
+					? relabelActivation(COMPACT_HINT_KEYS, "tool detail")
+					: chatTarget === undefined
+						? COMPACT_HINT_KEYS.filter(({ key }) => key !== "↵")
+						: COMPACT_HINT_KEYS;
+		const fullHintWidth =
+			this.toolDetail !== null
+				? toolDetailHintKeys.map(({ key, label }) => `${key} ${label}`).join("  ·  ")
+				: fullHierarchyHint;
+		const hintKeys = hintsBudget >= visibleWidth(fullHintWidth) ? availableHintKeys : availableCompactHintKeys;
 		const statusText = this._externalStatusText();
 		const statusSegment = statusText ? [`${accent}${statusText}${RESET}${chromeBg}`] : [];
 		const hintSegments = hintKeys.map(

package/dist/builtin/workflows/src/tui/graph-view-render.ts

@@ -2,12 +2,15 @@ import type { RunSnapshot } from "../shared/store-types.js";
 import { hexBg, hexToAnsi, RESET } from "./color-utils.js";
 import { GraphViewGraphRenderer } from "./graph-view-graph-render.js";
 import { GRAPH_HEADER_ROWS, GraphViewLayout, graphLayoutNaturalHeight } from "./graph-view-layout.js";
+import { toolExpandKey } from "./graph-view-render-helpers.js";
 import type { GraphViewOpts } from "./graph-view-types.js";
 import { renderHeader, renderOutlinePill } from "./header.js";
+import { isKeybindingsLike } from "./keybindings-adapter.js";
 import { NODE_H } from "./layout.js";
 import { renderPromptCard } from "./prompt-card.js";
 import { renderSwitcher } from "./switcher.js";
 import { truncateToWidth, visibleWidth } from "./text-helpers.js";
+import { renderToolDetailLines } from "./tool-detail.js";
 
 /**
  * `renderLayoutFrame` wraps each painted row with its segment reset. The
@@ -23,20 +26,28 @@ function stripLayoutWrapper(line: string): string {
 	const end = endsWithWrapper ? line.length - LAYOUT_OSC_RESET.length : line.length;
 	return line.slice(start, Math.max(start, end));
 }
+/** One frame's tool-message geometry, derived once and shared by both callbacks. */
+interface ToolDetailFrame {
+	readonly width: number;
+	readonly blockWidth: number;
+	readonly leftPad: number;
+	readonly lines: readonly string[];
+}
+
 /** Overlay/widget rendering orchestration for GraphView. */
 export abstract class GraphViewRenderer extends GraphViewGraphRenderer {
 	protected readonly graphLayout: GraphViewLayout;
 	private lastOverlayFrameHeight = 0;
 	private hasReportedViewportRows = false;
 	private renderRun: RunSnapshot | null | undefined;
-
+	private detailFrame: ToolDetailFrame | null = null;
 	constructor(opts: GraphViewOpts) {
 		super(opts);
 		this.graphLayout = new GraphViewLayout({
 			renderHeader: (width) => this._renderHeader(width),
 			renderBody: (width, top, rows, contentRows) => this._renderBody(width, top, rows, contentRows),
 			renderFooter: (width) => this._renderStatusline(width),
-			bodyContentHeight: (_width, viewportRows) => this._graphBodyContentHeight(viewportRows),
+			bodyContentHeight: (width, viewportRows) => this._graphBodyContentHeight(width, viewportRows),
 			beforeFrame: (scrollView, viewportRows, contentRows, width) =>
 				this._prepareGraphScroll(scrollView, viewportRows, contentRows, width),
 			requestRender: () => this.requestRender?.(),
@@ -77,6 +88,10 @@ export abstract class GraphViewRenderer extends GraphViewGraphRenderer {
 		const frameWidth = Math.max(40, width);
 		const run = this._getCurrentRun();
 		this.renderRun = run;
+		// One frame, one detail layout: the scroll clamp and the painted rows
+		// must come from the same line array, and a running node's timing must
+		// still advance between frames.
+		this.detailFrame = null;
 		try {
 			const frameHeight = this._overlayFrameHeight(run);
 			const layoutFrame = this.graphLayout.render(frameWidth, frameHeight);
@@ -91,9 +106,14 @@ export abstract class GraphViewRenderer extends GraphViewGraphRenderer {
 			const bodyStart = layoutFrame.bodyBox?.rect.y ?? layoutFrame.topMarginRows + GRAPH_HEADER_ROWS;
 			const bodyRows = layoutFrame.bodyBox?.rect.height ?? this.graphLayout.viewportRows;
 			if (run) {
-				this._recordGraphNodeHitRects(bodyStart + this.lastGraphTopPad, this.lastGraphVisibleRows);
-				this._renderSwitcherOverlay(lines, run, frameWidth, bodyStart, bodyRows);
-				this._renderPromptOverlay(lines, frameWidth, bodyStart, bodyRows);
+				if (this.toolDetail !== null) {
+					this.graphNodeHitRects = [];
+					this.lastGraphViewport = null;
+				} else {
+					this._recordGraphNodeHitRects(bodyStart + this.lastGraphTopPad, this.lastGraphVisibleRows);
+					this._renderSwitcherOverlay(lines, run, frameWidth, bodyStart, bodyRows);
+					this._renderPromptOverlay(lines, frameWidth, bodyStart, bodyRows);
+				}
 			} else {
 				this.graphNodeHitRects = [];
 				this.lastGraphViewport = null;
@@ -127,8 +147,42 @@ export abstract class GraphViewRenderer extends GraphViewGraphRenderer {
 		return this.renderRun !== undefined ? this.renderRun : this._getCurrentRun();
 	}
 
-	private _graphBodyContentHeight(viewportRows: number): number {
+	/**
+	 * Lay the tool message block out once per frame width.
+	 *
+	 * The height callback and the body callback are invoked separately by the
+	 * layout, and the body may be handed a narrower width when the ScrollView
+	 * reserves its scrollbar column. Both go through here, so the rows the
+	 * scroll range is clamped to are the rows that were actually produced.
+	 */
+	private _toolDetailFrame(node: NonNullable<GraphViewRenderer["toolDetail"]>, width: number): ToolDetailFrame {
+		const safeWidth = Math.max(1, Math.floor(width));
+		const cached = this.detailFrame;
+		if (cached !== null && cached.width === safeWidth) return cached;
+		// Match the flat message surface used by agent tool calls. The one-cell
+		// leading inset gives the block the same breathing room without drawing a
+		// standalone rounded panel or hiding content behind a border.
+		const blockWidth = Math.max(1, safeWidth - 1);
+		const frame: ToolDetailFrame = {
+			width: safeWidth,
+			blockWidth,
+			leftPad: safeWidth > 1 ? 1 : 0,
+			lines: renderToolDetailLines(node, {
+				theme: this.graphTheme,
+				width: blockWidth,
+				expanded: this.toolDetailExpanded,
+				expandKey: toolExpandKey(isKeybindingsLike(this.piKeybindings) ? this.piKeybindings : undefined),
+			}),
+		};
+		this.detailFrame = frame;
+		return frame;
+	}
+
+	private _graphBodyContentHeight(width: number, viewportRows: number): number {
 		const rows = Math.max(0, Math.floor(viewportRows));
+		if (this.toolDetail !== null) {
+			return Math.max(rows, this._toolDetailFrame(this.toolDetail, width).lines.length);
+		}
 		if (!this._currentRenderRun() || this.cachedRenderGeometry.totalRows <= 0) return rows;
 		return Math.max(rows, this.cachedRenderGeometry.totalRows);
 	}
@@ -141,6 +195,11 @@ export abstract class GraphViewRenderer extends GraphViewGraphRenderer {
 	): void {
 		const run = this._currentRenderRun();
 		if (viewportRows <= 0) return;
+		if (this.toolDetail !== null) {
+			if (this.pendingEnsureFocusedVisible) scrollView.scrollToStart();
+			this.pendingEnsureFocusedVisible = false;
+			return;
+		}
 		if (!run || this.cachedRenderGeometry.totalRows <= 0) {
 			scrollView.scrollToStart();
 			this.pendingEnsureFocusedVisible = false;
@@ -188,6 +247,12 @@ export abstract class GraphViewRenderer extends GraphViewGraphRenderer {
 	}
 
 	private _renderBody(width: number, top: number, rows: number, _contentRows: number): string[] {
+		if (this.toolDetail !== null) {
+			const detail = this._toolDetailFrame(this.toolDetail, width);
+			return detail.lines
+				.slice(top, top + rows)
+				.map((line) => this._canvasRow(`${" ".repeat(detail.leftPad)}${line}`, width));
+		}
 		const run = this._currentRenderRun();
 		const raw = run ? this._renderGraph(width, top, rows, run) : this._renderEmptyBody(width, rows);
 		return raw.map((line) => this._canvasRow(line, width));

package/dist/builtin/workflows/src/tui/graph-view-state.ts

@@ -3,6 +3,7 @@ import {
 	type ExpandedWorkflowGraph,
 	type ExpandedWorkflowStage,
 	type ExpandedWorkflowStageTarget,
+	type ExpandedWorkflowTool,
 	expandedStageTarget,
 	expandWorkflowGraph,
 	refreshExpandedWorkflowGraph,
@@ -103,6 +104,10 @@ export abstract class GraphViewState {
 		targets: new Map(),
 	};
 	protected currentSnapshot: StoreSnapshot | null = null;
+	/** Selected read-only tool detail; tool nodes never become stage chats. */
+	protected toolDetail: ExpandedWorkflowTool | null = null;
+	/** Tool message blocks open collapsed and own expansion independently of graph cards. */
+	protected toolDetailExpanded = false;
 	protected abstract _graphScrollTop(): number;
 	protected graphScrollColOffset = 0;
 	protected graphNodeHitRects: GraphNodeHitRect[] = [];
@@ -192,6 +197,7 @@ export abstract class GraphViewState {
 			this.lastGraphViewport = null;
 			this.pendingEnsureFocusedVisible = true;
 			this.promptState = null;
+			this.toolDetail = null;
 			this.topologySnapshot = this.currentSnapshot;
 			this.hasAnimatingStages = false;
 			this.lastBuiltSnapshotVersion = version;
@@ -219,6 +225,7 @@ export abstract class GraphViewState {
 				(stage) => stage.status === "running" || stage.status === "awaiting_input",
 			);
 			this._finalizeFocusAndPrompt(run, previousFocusedStageId, true);
+			this._syncToolDetail();
 			this.lastBuiltSnapshotVersion = version;
 			return;
 		}
@@ -233,6 +240,7 @@ export abstract class GraphViewState {
 		this.graphNodeHitRects = [];
 		this.lastGraphViewport = null;
 		this._finalizeFocusAndPrompt(run, previousFocusedStageId, false);
+		this._syncToolDetail();
 		this.lastBuiltSnapshotVersion = version;
 	}
 
@@ -434,6 +442,41 @@ export abstract class GraphViewState {
 		if (!stage || stage.nodeKind === "tool") return undefined;
 		return expandedStageTarget(this.expandedGraph, stage.id);
 	}
+	/** Resolve the focused graph projection back to its full tool snapshot. */
+	protected _focusedTool(): ExpandedWorkflowTool | undefined {
+		const stage = this.cachedLayout[this.focusedIndex]?.stage;
+		if (stage?.nodeKind !== "tool") return undefined;
+		return this.expandedGraph.tools.find((tool) => tool.id === stage.id);
+	}
+
+	protected _openFocusedToolDetail(): boolean {
+		const tool = this._focusedTool();
+		if (tool === undefined) return false;
+		this.toolDetail = tool;
+		this.toolDetailExpanded = false;
+		this.graphLayoutInvalidateForDetail();
+		return true;
+	}
+
+	protected _closeToolDetail(): boolean {
+		if (this.toolDetail === null) return false;
+		this.toolDetail = null;
+		this.toolDetailExpanded = false;
+		this.graphLayoutInvalidateForDetail();
+		return true;
+	}
+
+	private _syncToolDetail(): void {
+		if (this.toolDetail === null) return;
+		this.toolDetail = this.expandedGraph.tools.find((tool) => tool.id === this.toolDetail?.id) ?? null;
+	}
+
+	/** Let the renderer discard any cached body frame after a detail transition. */
+	private graphLayoutInvalidateForDetail(): void {
+		this.pendingEnsureFocusedVisible = true;
+		this.graphNodeHitRects = [];
+		this.lastGraphViewport = null;
+	}
 
 	/**
 	 * Pending queued messages for a rendered node. Tool nodes own no session, and

package/dist/builtin/workflows/src/tui/keybindings-adapter.ts

@@ -36,6 +36,8 @@
  */
 export interface KeybindingsLike {
 	matches(data: string, action: string): boolean;
+	/** Optional host display lookup; structural test doubles may omit it. */
+	getKeys?(action: string): readonly string[];
 }
 
 export const APP_ACTION = {

package/dist/builtin/workflows/src/tui/node-card.ts

@@ -272,9 +272,13 @@ export function renderNodeCard(stage: StageSnapshot, opts: NodeCardOpts): string
 	const top = `${bg}${bc}╭${topMiddle}╮${RESET}`;
 	const bottom = `${bg}${bc}╰${"─".repeat(innerWidth)}╯${RESET}`;
 
+	// A tool card is a fixed-size graph node, not a result preview: the read-only
+	// detail view owns args, result, error, and timing. The body is constant in
+	// every state so the card stops competing with it, while the status, meta,
+	// and dependency rows below keep their own content.
 	const bodyText =
 		stage.nodeKind === "tool"
-			? (stage.error ?? stage.result ?? "durable tool")
+			? "durable tool"
 			: stage.status === "blocked"
 				? blockedBadgeText(stage, opts.stages, innerWidth)
 				: durationText(stage);

package/dist/builtin/workflows/src/tui/stage-chat-view-archive-history.ts

@@ -33,6 +33,12 @@ function postMortemUnavailableMessage(reason: StageChatViewContext["postMortemUn
 	}
 }
 
+/**
+ * `renderTranscript` paints the archived chat rows into the budget it is given.
+ * `StageChatView` passes the search-aware painter so an open find box searches
+ * and highlights a read-only archive exactly as it does a live chat; the
+ * default keeps this function usable on its own.
+ */
 export function renderReadOnlyArchiveBody(
 	ctx: StageChatViewContext,
 	width: number,
@@ -40,6 +46,7 @@ export function renderReadOnlyArchiveBody(
 	stage: StageSnapshot | undefined,
 	indicatorLines: readonly string[] = [],
 	renderIndicator: () => readonly string[] = () => indicatorLines,
+	renderTranscript: (rows: number) => string[] = (rows) => ctx.chatHost.renderBody(width, rows),
 ): string[] {
 	if (stage?.promptFootprint) {
 		return renderReadOnlyPromptArchiveBody(ctx, width, budget, stage);
@@ -74,7 +81,7 @@ export function renderReadOnlyArchiveBody(
 	const reservedIndicatorRows =
 		indicatorLines.length > 0 && transcriptBudget > indicatorLines.length ? indicatorLines.length : 0;
 	const transcriptRows = transcriptBudget - reservedIndicatorRows;
-	const lines = transcriptRows > 0 ? ctx.chatHost.renderBody(width, transcriptRows) : [];
+	const lines = transcriptRows > 0 ? renderTranscript(transcriptRows) : [];
 	const visibleIndicatorLines =
 		reservedIndicatorRows > 0 ? [...renderIndicator().slice(0, reservedIndicatorRows)] : [];
 	while (visibleIndicatorLines.length < reservedIndicatorRows) visibleIndicatorLines.push(blankLine(width));
@@ -171,12 +178,14 @@ function formatReadOnlyPromptAnswer(value: unknown, kind: PendingPrompt["kind"])
 	}
 }
 
+/** `renderTranscript` as in `renderReadOnlyArchiveBody`: a paused chat is searchable too. */
 export function renderPausedBody(
 	ctx: StageChatViewContext,
 	width: number,
 	budget: number,
 	indicatorLines: readonly string[] = [],
 	renderIndicator: () => readonly string[] = () => indicatorLines,
+	renderTranscript: (rows: number) => string[] = (rows) => ctx.chatHost.renderBody(width, rows),
 ): string[] {
 	const t = ctx.theme;
 	const callout: string[] = [];
@@ -194,7 +203,7 @@ export function renderPausedBody(
 	const reservedIndicatorRows =
 		indicatorLines.length > 0 && transcriptBudget > indicatorLines.length ? indicatorLines.length : 0;
 	const transcriptRows = transcriptBudget - reservedIndicatorRows;
-	const lines = transcriptRows > 0 ? ctx.chatHost.renderBody(width, transcriptRows) : [];
+	const lines = transcriptRows > 0 ? renderTranscript(transcriptRows) : [];
 	const visibleIndicatorLines =
 		reservedIndicatorRows > 0 ? [...renderIndicator().slice(0, reservedIndicatorRows)] : [];
 	while (visibleIndicatorLines.length < reservedIndicatorRows) visibleIndicatorLines.push(blankLine(width));