@xopcai/xopc 0.0.303 → 0.0.307

package/dist/src/tui/components/chat-log.js

@@ -8,9 +8,9 @@ import { CompactionSummaryComponent } from "./compaction-summary.js";
 import { CustomMessageComponent } from "./custom-message.js";
 import { ToolExecutionComponent } from "./tool-execution.js";
 import { UserMessageComponent } from "./user-message.js";
+import { SemanticCellComponent } from "./semantic-cell.js";
 import { Container, Spacer, Text } from "@earendil-works/pi-tui";
 //#region src/tui/components/chat-log.ts
-const MAX_COMPONENTS = 180;
 function assistantPlainText(message) {
 	const content = message.content;
 	if (typeof content === "string") return content;
@@ -28,11 +28,12 @@ var ChatLog = class extends Container {
 	branchBlocks = [];
 	branchMessageBlocks = [];
 	customBlocks = [];
+	semanticCells = /* @__PURE__ */ new Map();
 	customMessageRenderers = /* @__PURE__ */ new Map();
 	assistantMessages = [];
-	streamingRuns = /* @__PURE__ */ new Map();
+	activeAssistantByRun = /* @__PURE__ */ new Map();
 	/** After finalizeAssistant, late tool execution events can still arrive; keep the bubble to link tools. */
-	assistantAnchorByRunId = /* @__PURE__ */ new Map();
+	committedAssistantByRun = /* @__PURE__ */ new Map();
 	runsWithTools = /* @__PURE__ */ new Set();
 	toolsExpanded = false;
 	showThinking = true;
@@ -45,44 +46,22 @@ var ChatLog = class extends Container {
 	entryRecords = [];
 	viewportRowsProvider;
 	historyViewDisplayIndex = null;
+	renderMode = "compact";
+	activeCells = /* @__PURE__ */ new Set();
+	committedCells = /* @__PURE__ */ new Set();
 	constructor(keybindings) {
 		super();
 		this.keybindings = keybindings;
 		if (keybindings) this.toolImageOptions.keybindings = keybindings;
 	}
-	pruneOverflow() {
-		while (this.children.length > MAX_COMPONENTS) {
-			const oldest = this.children[0];
-			if (!oldest) return;
-			this.removeChild(oldest);
-			this.dropReferences(oldest);
-		}
-	}
-	dropReferences(component) {
-		for (const [id, tool] of this.toolById.entries()) if (tool === component) this.toolById.delete(id);
-		for (const [runId, msg] of this.streamingRuns.entries()) if (msg === component) this.streamingRuns.delete(runId);
-		for (const [runId, msg] of this.assistantAnchorByRunId.entries()) if (msg === component) this.assistantAnchorByRunId.delete(runId);
-		this.bashBlocks = this.bashBlocks.filter((entry) => entry !== component);
-		this.compactionBlocks = this.compactionBlocks.filter((entry) => entry !== component);
-		this.branchBlocks = this.branchBlocks.filter((entry) => entry !== component);
-		this.branchMessageBlocks = this.branchMessageBlocks.filter((entry) => entry !== component);
-		this.customBlocks = this.customBlocks.filter((entry) => entry !== component);
-		this.assistantMessages = this.assistantMessages.filter((entry) => entry !== component);
-		if (this.lastStatusEntry === component) {
-			this.lastStatusEntry = null;
-			this.lastStatusText = null;
-		}
-		for (const [runId, status] of this.workflowStatusByRunId.entries()) if (status.entry === component) this.workflowStatusByRunId.delete(runId);
-		this.entryRecords = this.entryRecords.filter((entry) => entry.component !== component);
-		if (!this.findEntryRecord(this.historyViewDisplayIndex)) this.historyViewDisplayIndex = null;
-	}
-	append(component, meta) {
+	append(component, meta, lifecycle = "committed") {
 		this.addChild(component);
+		(lifecycle === "active" ? this.activeCells : this.committedCells).add(component);
 		if (meta) this.entryRecords.push({
 			component,
 			...meta
 		});
-		this.pruneOverflow();
+		this.applyRenderMode(component);
 	}
 	clearAll() {
 		this.clear();
@@ -92,9 +71,10 @@ var ChatLog = class extends Container {
 		this.branchBlocks = [];
 		this.branchMessageBlocks = [];
 		this.customBlocks = [];
+		this.semanticCells.clear();
 		this.assistantMessages = [];
-		this.streamingRuns.clear();
-		this.assistantAnchorByRunId.clear();
+		this.activeAssistantByRun.clear();
+		this.committedAssistantByRun.clear();
 		this.runsWithTools.clear();
 		this.lastAssistantText = "";
 		this.lastStatusEntry = null;
@@ -102,6 +82,8 @@ var ChatLog = class extends Container {
 		this.workflowStatusByRunId.clear();
 		this.entryRecords = [];
 		this.historyViewDisplayIndex = null;
+		this.activeCells.clear();
+		this.committedCells.clear();
 	}
 	createAssistantMessage(message) {
 		const component = new AssistantMessageComponent(message, {
@@ -159,31 +141,42 @@ var ChatLog = class extends Container {
 		this.append(component);
 	}
 	addBranchMessageSummary(summary) {
-		this.assistantAnchorByRunId.clear();
+		this.committedAssistantByRun.clear();
 		const component = new BranchMessageSummaryComponent(summary, this.keybindings);
 		component.setExpanded(this.toolsExpanded);
 		this.branchMessageBlocks.push(component);
 		this.append(component);
 	}
 	addCustomMessage(summary) {
-		this.assistantAnchorByRunId.clear();
+		this.committedAssistantByRun.clear();
 		const component = new CustomMessageComponent(summary, this.customMessageRenderers.get(summary.customType));
 		component.setExpanded(this.toolsExpanded);
 		this.customBlocks.push(component);
 		this.append(component);
 	}
+	upsertSemanticCell(id, data) {
+		const existing = this.semanticCells.get(id);
+		if (existing) {
+			existing.update(data);
+			existing.invalidate();
+			return;
+		}
+		const component = new SemanticCellComponent(data);
+		this.semanticCells.set(id, component);
+		this.append(component);
+	}
 	setCustomMessageRenderer(customType, renderer) {
 		if (renderer) this.customMessageRenderers.set(customType, renderer);
 		else this.customMessageRenderers.delete(customType);
 		for (const block of this.customBlocks) if (block.matchesCustomType(customType)) block.setRenderer(renderer);
 	}
 	addUser(text, meta) {
-		this.assistantAnchorByRunId.clear();
+		this.committedAssistantByRun.clear();
 		this.append(new UserMessageComponent(text), meta);
 	}
 	/** Stream local `!command` output in a bordered block. */
 	addBashExecution(command, ui, excludeFromContext) {
-		this.assistantAnchorByRunId.clear();
+		this.committedAssistantByRun.clear();
 		const component = new BashExecutionComponent(command, ui, excludeFromContext, this.keybindings);
 		component.setExpanded(this.toolsExpanded);
 		this.bashBlocks.push(component);
@@ -192,7 +185,7 @@ var ChatLog = class extends Container {
 	}
 	/** Replay a completed shell execution from persisted transcript history. */
 	addBashSummary(summary) {
-		this.assistantAnchorByRunId.clear();
+		this.committedAssistantByRun.clear();
 		const component = new BashSummaryComponent(summary, this.keybindings);
 		component.setExpanded(this.toolsExpanded);
 		this.bashBlocks.push(component);
@@ -201,7 +194,7 @@ var ChatLog = class extends Container {
 	startAssistant(message, runId) {
 		const text = assistantPlainText(message);
 		if (text.trim()) this.lastAssistantText = text;
-		const existing = this.streamingRuns.get(runId);
+		const existing = this.activeAssistantByRun.get(runId);
 		if (existing) {
 			existing.updateContent(message);
 			existing.setHasToolCalls(this.runsWithTools.has(runId));
@@ -209,13 +202,13 @@ var ChatLog = class extends Container {
 		}
 		const component = this.createAssistantMessage(message);
 		component.setHasToolCalls(this.runsWithTools.has(runId));
-		this.streamingRuns.set(runId, component);
-		this.append(component);
+		this.activeAssistantByRun.set(runId, component);
+		this.append(component, void 0, "active");
 	}
 	updateAssistant(message, runId) {
 		const text = assistantPlainText(message);
 		if (text.trim()) this.lastAssistantText = text;
-		const existing = this.streamingRuns.get(runId);
+		const existing = this.activeAssistantByRun.get(runId);
 		if (!existing) {
 			this.startAssistant(message, runId);
 			return;
@@ -226,24 +219,26 @@ var ChatLog = class extends Container {
 	finalizeAssistant(message, runId, meta) {
 		const text = assistantPlainText(message);
 		if (text.trim()) this.lastAssistantText = text;
-		const existing = this.streamingRuns.get(runId);
+		const existing = this.activeAssistantByRun.get(runId);
 		if (existing) {
 			existing.updateContent(message);
 			existing.setHasToolCalls(this.runsWithTools.has(runId));
-			this.streamingRuns.delete(runId);
-			this.assistantAnchorByRunId.set(runId, existing);
+			this.activeAssistantByRun.delete(runId);
+			this.committedAssistantByRun.set(runId, existing);
+			this.commitCell(existing);
 			return;
 		}
 		const finalMessage = this.createAssistantMessage(message);
 		finalMessage.setHasToolCalls(this.runsWithTools.has(runId));
 		this.append(finalMessage, meta);
-		if (text.trim()) this.assistantAnchorByRunId.set(runId, finalMessage);
+		if (text.trim()) this.committedAssistantByRun.set(runId, finalMessage);
 	}
 	dropAssistant(runId) {
-		const existing = this.streamingRuns.get(runId);
+		const existing = this.activeAssistantByRun.get(runId);
 		if (!existing) return;
 		this.removeChild(existing);
-		this.streamingRuns.delete(runId);
+		this.activeAssistantByRun.delete(runId);
+		this.activeCells.delete(existing);
 	}
 	startTool(toolCallId, toolName, args, runId) {
 		const existing = this.toolById.get(toolCallId);
@@ -255,8 +250,8 @@ var ChatLog = class extends Container {
 		const component = new ToolExecutionComponent(toolName, toolCallId, args, { ...this.toolImageOptions });
 		component.setExpanded(this.toolsExpanded);
 		this.toolById.set(toolCallId, component);
-		(this.streamingRuns.get(runId) ?? this.assistantAnchorByRunId.get(runId))?.setHasToolCalls(true);
-		this.append(component);
+		(this.activeAssistantByRun.get(runId) ?? this.committedAssistantByRun.get(runId))?.setHasToolCalls(true);
+		this.append(component, void 0, "active");
 	}
 	markToolExecutionStarted(toolCallId) {
 		const existing = this.toolById.get(toolCallId);
@@ -272,6 +267,7 @@ var ChatLog = class extends Container {
 		const existing = this.toolById.get(toolCallId);
 		if (!existing) return;
 		existing.updateResult(result, isPartial, isError);
+		if (!isPartial) this.commitCell(existing);
 	}
 	updateToolDetails(toolCallId, details) {
 		const existing = this.toolById.get(toolCallId);
@@ -307,6 +303,28 @@ var ChatLog = class extends Container {
 		};
 		for (const tool of this.toolById.values()) tool.setImageOptions(this.toolImageOptions);
 	}
+	setRenderMode(mode) {
+		if (this.renderMode === mode) return;
+		this.renderMode = mode;
+		for (const child of this.children) this.applyRenderMode(child);
+		this.invalidate();
+	}
+	getRenderMode() {
+		return this.renderMode;
+	}
+	applyRenderMode(component) {
+		component.setRenderMode?.(this.renderMode);
+	}
+	getCellLifecycleCounts() {
+		return {
+			active: this.activeCells.size,
+			committed: this.committedCells.size
+		};
+	}
+	commitCell(component) {
+		if (!this.activeCells.delete(component)) return;
+		this.committedCells.add(component);
+	}
 	getLastAssistantText() {
 		return this.lastAssistantText;
 	}

package/dist/src/tui/components/custom-editor.d.ts

@@ -5,14 +5,14 @@ import type { XopcTuiAppKeybinding } from '../xopc-tui-keybindings.js';
  */
 export declare class CustomEditor extends Editor {
     private readonly keybindings;
-    readonly actionHandlers: Map<XopcTuiAppKeybinding, () => void>;
+    readonly actionHandlers: Map<XopcTuiAppKeybinding, () => boolean | void>;
     onEscape?: () => void;
     onCtrlD?: () => void;
     onCtrlC?: () => void;
     onPasteImage?: () => void;
     onExtensionShortcut?: (data: string) => boolean;
     constructor(tui: TUI, theme: EditorTheme, keybindings: KeybindingsManager, options?: EditorOptions);
-    onAction(action: XopcTuiAppKeybinding, handler: () => void): void;
+    onAction(action: XopcTuiAppKeybinding, handler: () => boolean | void): void;
     replaceHistory(itemsNewestFirst: string[]): void;
     handleInput(data: string): void;
 }

package/dist/src/tui/components/custom-editor.js

@@ -51,7 +51,11 @@ var CustomEditor = class extends Editor {
 		for (const [action, handler] of this.actionHandlers) {
 			if (action === "app.interrupt" || action === "app.exit") continue;
 			if (this.keybindings.matches(data, action)) {
-				(action === "app.clear" ? this.onCtrlC ?? handler : handler)();
+				if (action === "app.message.followUp" && this.isShowingAutocomplete()) {
+					super.handleInput(data);
+					return;
+				}
+				if ((action === "app.clear" ? this.onCtrlC ?? handler : handler)() === false) super.handleInput(data);
 				return;
 			}
 		}

package/dist/src/tui/components/pending-input-preview.d.ts

@@ -0,0 +1,9 @@
+import type { Component, KeybindingsManager } from '@earendil-works/pi-tui';
+import { type TuiChatInputState } from '../tui-chat-input-state.js';
+export declare class PendingInputPreview implements Component {
+    private readonly getState;
+    private readonly keybindings;
+    constructor(getState: () => TuiChatInputState, keybindings: KeybindingsManager);
+    invalidate(): void;
+    render(width: number): string[];
+}

package/dist/src/tui/components/pending-input-preview.js

@@ -0,0 +1,33 @@
+import { theme } from "../theme.js";
+import { formatKeyIds } from "../format-tui-hotkeys.js";
+import { findLastEditableChatInput, isPendingChatInput } from "../tui-chat-input-state.js";
+import { sanitizeStatusText } from "./tui-bottom-bar.js";
+import { truncateToWidth } from "@earendil-works/pi-tui";
+//#region src/tui/components/pending-input-preview.ts
+function labelForInput(input) {
+	if (input.status === "injecting") return "Steering";
+	if (input.requestedDelivery === "steer" && input.effectiveDelivery === "next") return "Deferred steer";
+	if (input.status === "interrupted") return "Interrupted";
+	return "Follow-up";
+}
+var PendingInputPreview = class {
+	constructor(getState, keybindings) {
+		this.getState = getState;
+		this.keybindings = keybindings;
+	}
+	invalidate() {}
+	render(width) {
+		const state = this.getState();
+		const inputs = state.inputs.filter(isPendingChatInput);
+		if (inputs.length === 0) return [];
+		const actions = findLastEditableChatInput(state) ? ` · ${formatKeyIds(this.keybindings, "app.message.editQueued", { capitalize: true })} edit last · ${formatKeyIds(this.keybindings, "app.message.deleteQueued", { capitalize: true })} remove last` : "";
+		const lines = [truncateToWidth(theme.dim(`Pending inputs (${inputs.length})${actions}`), width, theme.dim("…"))];
+		for (const input of inputs) {
+			const content = sanitizeStatusText(input.content) || "(empty)";
+			lines.push(truncateToWidth(theme.dim(`  ${labelForInput(input)}: ${content}`), width, theme.dim("…")));
+		}
+		return lines;
+	}
+};
+//#endregion
+export { PendingInputPreview };

package/dist/src/tui/components/semantic-cell.d.ts

@@ -0,0 +1,17 @@
+import { Container } from '@earendil-works/pi-tui';
+import type { CellRenderMode, ModeAwareCell } from './cell-render-mode.js';
+export type SemanticCellKind = 'plan' | 'web' | 'approval' | 'question' | 'mcp';
+export interface SemanticCellData {
+    kind: SemanticCellKind;
+    title: string;
+    lines?: string[];
+    raw?: unknown;
+}
+export declare class SemanticCellComponent extends Container implements ModeAwareCell {
+    private data;
+    private renderMode;
+    constructor(data: SemanticCellData);
+    update(data: SemanticCellData): void;
+    setRenderMode(mode: CellRenderMode): void;
+    render(width: number): string[];
+}

package/dist/src/tui/components/semantic-cell.js

@@ -0,0 +1,29 @@
+import { theme } from "../theme.js";
+import { Container, Spacer, Text } from "@earendil-works/pi-tui";
+//#region src/tui/components/semantic-cell.ts
+var SemanticCellComponent = class extends Container {
+	renderMode = "compact";
+	constructor(data) {
+		super();
+		this.data = data;
+	}
+	update(data) {
+		this.data = data;
+	}
+	setRenderMode(mode) {
+		this.renderMode = mode;
+	}
+	render(width) {
+		if (this.renderMode === "raw") return new Text(JSON.stringify(this.data.raw ?? this.data, null, 2), 0, 0).render(width);
+		const body = new Container();
+		body.addChild(new Spacer(1));
+		body.addChild(new Text(theme.bold(theme.accent(`${this.data.kind.toUpperCase()} · ${this.data.title}`)), 1, 0));
+		const lines = this.data.lines ?? [];
+		const visible = this.renderMode === "compact" ? lines.slice(0, 4) : lines;
+		for (const line of visible) body.addChild(new Text(theme.dim(line), 3, 0));
+		if (visible.length < lines.length) body.addChild(new Text(theme.dim(`… ${lines.length - visible.length} more`), 3, 0));
+		return body.render(width);
+	}
+};
+//#endregion
+export { SemanticCellComponent };

package/dist/src/tui/components/tool-execution.d.ts

@@ -1,6 +1,7 @@
 import { Container, type KeybindingsManager } from '@earendil-works/pi-tui';
 import type { AgentToolResult } from '@earendil-works/pi-agent-core';
 import { type TuiToolContentBlock } from '../tui-tool-result.js';
+import type { CellRenderMode, ModeAwareCell } from './cell-render-mode.js';
 export interface ToolExecutionOptions {
     showImages?: boolean;
     imageWidthCells?: number;
@@ -12,7 +13,7 @@ export declare function getToolResultDisplayText(content: TuiToolContentBlock[],
     showImages: boolean;
     supportsInlineImages: boolean;
 }): string;
-export declare class ToolExecutionComponent extends Container {
+export declare class ToolExecutionComponent extends Container implements ModeAwareCell {
     private contentContainer;
     private contentText;
     private collapsedOutputComponent;
@@ -45,11 +46,14 @@ export declare class ToolExecutionComponent extends Container {
     private executionStarted;
     private startedAt;
     private completedAt;
+    private renderMode;
     constructor(toolName: string, toolCallId: string, args: unknown, options?: ToolExecutionOptions);
     setArgs(args: unknown): void;
     markExecutionStarted(): void;
     setArgsComplete(): void;
     setExpanded(expanded: boolean): void;
+    setRenderMode(mode: CellRenderMode): void;
+    render(width: number): string[];
     updateResult(result: AgentToolResult<any> | unknown, isPartial?: boolean, isError?: boolean): void;
     setImageOptions(options: ToolExecutionOptions): void;
     setPartialDetails(details: unknown): void;

package/dist/src/tui/components/tool-execution.js

@@ -15,6 +15,10 @@ function sanitize(text) {
 function trimTrailingBlankDisplayLines(text) {
 	return text.replace(/(?:\r?\n[ \t]*)+$/g, "");
 }
+function semanticToolLabel(toolName) {
+	if (toolName === "web_search" || toolName === "web_fetch" || toolName === "web_extract") return "WEB";
+	if (toolName.startsWith("mcp:") || toolName.includes("__")) return "MCP";
+}
 function getToolResultDisplayText(content, options) {
 	const parts = [];
 	for (const block of content) {
@@ -66,6 +70,7 @@ var ToolExecutionComponent = class extends Container {
 	executionStarted = false;
 	startedAt = Date.now();
 	completedAt;
+	renderMode = "compact";
 	constructor(toolName, toolCallId, args, options = {}) {
 		super();
 		this.toolName = toolName;
@@ -100,6 +105,24 @@ var ToolExecutionComponent = class extends Container {
 		this.expanded = expanded;
 		this.refresh();
 	}
+	setRenderMode(mode) {
+		if (this.renderMode === mode) return;
+		this.renderMode = mode;
+		this.refresh();
+	}
+	render(width) {
+		if (this.renderMode === "raw") return new Text(JSON.stringify({
+			type: "tool",
+			toolName: this.toolName,
+			toolCallId: this.toolCallId,
+			args: this.args,
+			result: this.resultContent ?? this.resultText,
+			details: this.resultDetails,
+			isError: this.isError,
+			isPartial: this.isPartial
+		}, null, 2), 0, 0).render(width);
+		return super.render(width);
+	}
 	updateResult(result, isPartial = false, isError = false) {
 		const parsed = parseTuiToolResult(result);
 		this.resultText = sanitize(parsed.text);
@@ -231,13 +254,13 @@ var ToolExecutionComponent = class extends Container {
 			argsComplete: this.argsComplete,
 			isError: this.isError,
 			isPartial: this.isPartial,
-			expanded: this.expanded,
+			expanded: this.renderMode === "transcript" || this.expanded,
 			showImages: this.showImages
 		};
 	}
 	formatToolCallFallback() {
 		const argsStr = formatArgsSummary(this.args, this.toolName);
-		const titleParts = [theme.dim(this.toolStatusLabel()), theme.toolTitle(theme.bold(displayToolName(this.toolName)))];
+		const titleParts = [theme.dim(this.toolStatusLabel()), theme.toolTitle(theme.bold([semanticToolLabel(this.toolName), displayToolName(this.toolName)].filter(Boolean).join(" · ")))];
 		if (argsStr) titleParts.push(theme.dim(`(${argsStr})`));
 		const duration = this.toolDurationLabel();
 		if (duration) titleParts.push(theme.dim(duration));
@@ -251,9 +274,9 @@ var ToolExecutionComponent = class extends Container {
 			const expandKey = this.keybindings ? formatKeyIds(this.keybindings, "app.tools.expand", { capitalize: true }) : "Ctrl+O";
 			const lineCount = output.split("\n").length;
 			const useDiff = isDiffFriendlyTool(this.toolName) && looksLikeUnifiedDiff(output);
-			if (this.expanded && useDiff) text += renderPatchSummary(output) ?? renderUnifiedDiff(output);
-			else if (this.expanded && isExecStyleTool(this.toolName)) this.refreshExpandedOutput(theme.toolOutput(formatExecExpandedOutput(output, this.resultDetails)));
-			else if (this.expanded) this.refreshExpandedOutput(theme.toolOutput(output));
+			if ((this.renderMode === "transcript" || this.expanded) && useDiff) text += renderPatchSummary(output) ?? renderUnifiedDiff(output);
+			else if ((this.renderMode === "transcript" || this.expanded) && isExecStyleTool(this.toolName)) this.refreshExpandedOutput(theme.toolOutput(formatExecExpandedOutput(output, this.resultDetails)));
+			else if (this.renderMode === "transcript" || this.expanded) this.refreshExpandedOutput(theme.toolOutput(output));
 			else if (useDiff) text += theme.dim("preview");
 			else if (getToolSummaryKind(this.toolName) !== "generic") text += this.collapsedSpecializedSummary(output, expandKey);
 			else {
@@ -269,7 +292,7 @@ var ToolExecutionComponent = class extends Container {
 	}
 	formatToolExecution() {
 		const argsStr = formatArgsSummary(this.args, this.toolName);
-		const titleParts = [theme.dim(this.toolStatusLabel()), theme.toolTitle(theme.bold(displayToolName(this.toolName)))];
+		const titleParts = [theme.dim(this.toolStatusLabel()), theme.toolTitle(theme.bold([semanticToolLabel(this.toolName), displayToolName(this.toolName)].filter(Boolean).join(" · ")))];
 		if (argsStr) titleParts.push(theme.dim(`(${argsStr})`));
 		const duration = this.toolDurationLabel();
 		if (duration) titleParts.push(theme.dim(duration));
@@ -279,9 +302,9 @@ var ToolExecutionComponent = class extends Container {
 			const expandKey = this.keybindings ? formatKeyIds(this.keybindings, "app.tools.expand", { capitalize: true }) : "Ctrl+O";
 			const lineCount = output.split("\n").length;
 			const useDiff = isDiffFriendlyTool(this.toolName) && looksLikeUnifiedDiff(output);
-			if (this.expanded && useDiff) text += `\n${renderPatchSummary(output) ?? renderUnifiedDiff(output)}`;
-			else if (this.expanded && isExecStyleTool(this.toolName)) this.refreshExpandedOutput(theme.toolOutput(formatExecExpandedOutput(output, this.resultDetails)));
-			else if (this.expanded) this.refreshExpandedOutput(theme.toolOutput(output));
+			if ((this.renderMode === "transcript" || this.expanded) && useDiff) text += `\n${renderPatchSummary(output) ?? renderUnifiedDiff(output)}`;
+			else if ((this.renderMode === "transcript" || this.expanded) && isExecStyleTool(this.toolName)) this.refreshExpandedOutput(theme.toolOutput(formatExecExpandedOutput(output, this.resultDetails)));
+			else if (this.renderMode === "transcript" || this.expanded) this.refreshExpandedOutput(theme.toolOutput(output));
 			else if (useDiff) {
 				const suffix = output.split("\n").length > COLLAPSED_RESULT_VISUAL_LINES ? theme.dim(` (${output.split("\n").length} lines; ${expandKey} to expand)`) : "";
 				text += `\n${theme.dim(`preview${suffix}`)}`;
@@ -323,7 +346,7 @@ var ToolExecutionComponent = class extends Container {
 		}));
 	}
 	shouldRenderDetailsPreview() {
-		return this.expanded && this.resultDetails !== void 0 && !isExecStyleTool(this.toolName);
+		return (this.renderMode === "transcript" || this.expanded) && this.resultDetails !== void 0 && !isExecStyleTool(this.toolName);
 	}
 	getDisplayResultText() {
 		if (!this.resultContent) return trimTrailingBlankDisplayLines(this.resultText);

package/dist/src/tui/components/transcript-overlay.d.ts

@@ -0,0 +1,29 @@
+import { Container, type Focusable, type KeybindingsManager } from '@earendil-works/pi-tui';
+import type { TuiHistoryWindow } from '../tui-backend.js';
+import type { CellRenderMode } from './cell-render-mode.js';
+export interface TranscriptOverlayOptions {
+    keybindings: KeybindingsManager;
+    loadWindow: (rowNumber: number) => Promise<TuiHistoryWindow>;
+    onClose: () => void;
+    onRender: () => void;
+    viewportRows: () => number;
+    initialMode?: Exclude<CellRenderMode, 'compact'>;
+}
+export declare class TranscriptOverlay extends Container implements Focusable {
+    private readonly options;
+    private readonly log;
+    private messages;
+    private startRowNumber;
+    private totalRows;
+    private scrollOffset;
+    private loading;
+    private mode;
+    private _focused;
+    constructor(options: TranscriptOverlayOptions);
+    get focused(): boolean;
+    set focused(value: boolean);
+    initialize(): Promise<void>;
+    handleInput(data: string): void;
+    render(width: number): string[];
+    private loadPage;
+}

package/dist/src/tui/components/transcript-overlay.js

@@ -0,0 +1,114 @@
+import { theme } from "../theme.js";
+import { appendHistoryToChatLog } from "../chat-history.js";
+import { ChatLog } from "./chat-log.js";
+import { Container } from "@earendil-works/pi-tui";
+//#region src/tui/components/transcript-overlay.ts
+var TranscriptOverlay = class extends Container {
+	log;
+	messages = [];
+	startRowNumber = 0;
+	totalRows = 0;
+	scrollOffset = 0;
+	loading = false;
+	mode;
+	_focused = false;
+	constructor(options) {
+		super();
+		this.options = options;
+		this.mode = options.initialMode ?? "transcript";
+		this.log = new ChatLog(options.keybindings);
+		this.log.setRenderMode(this.mode);
+	}
+	get focused() {
+		return this._focused;
+	}
+	set focused(value) {
+		this._focused = value;
+	}
+	async initialize() {
+		await this.loadPage(Number.MAX_SAFE_INTEGER, false);
+	}
+	handleInput(data) {
+		if (this.options.keybindings.matches(data, "tui.select.cancel") || data === "\x1B") {
+			this.options.onClose();
+			return;
+		}
+		if (this.options.keybindings.matches(data, "app.transcript.open")) {
+			this.options.onClose();
+			return;
+		}
+		if (this.options.keybindings.matches(data, "app.transcript.raw")) {
+			this.mode = this.mode === "raw" ? "transcript" : "raw";
+			this.log.setRenderMode(this.mode);
+			this.options.onRender();
+			return;
+		}
+		const page = Math.max(4, this.options.viewportRows() - 5);
+		if (data === "\x1B[5~") {
+			this.scrollOffset += page;
+			if (this.startRowNumber > 1) this.loadPage(this.startRowNumber - 1, true);
+			this.options.onRender();
+			return;
+		}
+		if (data === "\x1B[6~") {
+			this.scrollOffset = Math.max(0, this.scrollOffset - page);
+			this.options.onRender();
+			return;
+		}
+		if (this.options.keybindings.matches(data, "tui.select.up")) {
+			this.scrollOffset++;
+			this.options.onRender();
+			return;
+		}
+		if (this.options.keybindings.matches(data, "tui.select.down")) {
+			this.scrollOffset = Math.max(0, this.scrollOffset - 1);
+			this.options.onRender();
+		}
+	}
+	render(width) {
+		const viewportRows = Math.max(6, this.options.viewportRows() - 3);
+		const content = this.log.render(width);
+		this.scrollOffset = Math.min(this.scrollOffset, Math.max(0, content.length - viewportRows));
+		const end = Math.max(0, content.length - this.scrollOffset);
+		const start = Math.max(0, end - viewportRows);
+		const position = this.totalRows > 0 ? `${this.startRowNumber}-${this.totalRows}` : "empty";
+		return [
+			theme.bold(theme.accent(`Transcript · ${this.mode} · rows ${position}`)),
+			theme.dim("↑/↓ scroll · PgUp/PgDn page · Alt+R raw · Ctrl+T/Esc close"),
+			...this.loading ? [theme.dim("Loading SQLite transcript…")] : [],
+			...content.slice(start, end)
+		];
+	}
+	async loadPage(rowNumber, prepend) {
+		if (this.loading) return;
+		this.loading = true;
+		this.options.onRender();
+		try {
+			const page = await this.options.loadWindow(rowNumber);
+			const merged = prepend ? [...page.messages, ...this.messages] : page.messages;
+			const seen = /* @__PURE__ */ new Set();
+			this.messages = merged.filter((message) => {
+				const key = message.id ? `id:${message.id}` : JSON.stringify([
+					message.kind,
+					message.role,
+					message.timestamp,
+					message.content
+				]);
+				if (seen.has(key)) return false;
+				seen.add(key);
+				return true;
+			});
+			this.startRowNumber = page.startRowNumber;
+			this.totalRows = page.totalRows;
+			this.log.clearAll();
+			appendHistoryToChatLog(this.log, this.messages, true, true);
+			this.log.setRenderMode(this.mode);
+			if (prepend) this.scrollOffset = Number.MAX_SAFE_INTEGER;
+		} finally {
+			this.loading = false;
+			this.options.onRender();
+		}
+	}
+};
+//#endregion
+export { TranscriptOverlay };