@tshu-w/pi-agents 0.2.2 → 0.4.0

package/src/ui/viewer.ts

@@ -10,6 +10,7 @@ import {
 	getMarkdownTheme,
 	getSelectListTheme,
 	keyHint,
+	keyText,
 	parseSkillBlock,
 	SkillInvocationMessageComponent,
 	ToolExecutionComponent,
@@ -24,7 +25,9 @@ import {
 	Container,
 	fuzzyFilter,
 	Input,
+	isViewportTUI,
 	Loader,
+	ScrollView,
 	SelectList,
 	Spacer,
 	Text,
@@ -35,8 +38,12 @@ import {
 	type KeybindingsManager,
 	type SelectItem,
 	type TUI,
+	type TuiMouseEvent,
+	type TuiMouseEventResult,
+	type ViewportTUI,
+	VStack,
 } from "@earendil-works/pi-tui";
-import { MESSAGE_TYPE, nodes, onTreeChange, programLabel, programsOf, type AgentNode, type Entry } from "../agents/registry.ts";
+import { MESSAGE_TYPE, nodes, onTreeChange, programLabel, tasksOf, type AgentNode, type Entry, type Task } from "../agents/registry.ts";
 import { latestActivity } from "../agents/search.ts";
 import { PROGRAM_TOOL_NAME } from "../programs/execute.ts";
 import type { Programs } from "../programs/programs.ts";
@@ -46,6 +53,9 @@ import { execFileSync } from "node:child_process";
 type Message = AgentSession["messages"][number];
 type ToolResult = Parameters<ToolExecutionComponent["updateResult"]>[0];
 type StatusIndicator = Parameters<CustomEditor["setWorkingStatusIndicator"]>[0];
+type Conversation = NonNullable<ReturnType<AgentNode["agents"]["conversation"]>>;
+type ToolCall = Extract<Extract<Message, { role: "assistant" }>["content"][number], { type: "toolCall" }>;
+type Display = ReturnType<AgentViewer["display"]>;
 
 /** Stops the elapsed-time timer of a tool component the viewer drops; only a final result stops it otherwise. */
 function stopTimer(tool: ToolExecutionComponent): void {
@@ -87,6 +97,39 @@ function footerData(cwd: string, ctx: ExtensionContext): ReadonlyFooterDataProvi
 	};
 }
 
+/** The lines a scroll key of Pi's fullscreen mode moves the view up, negative for down, or undefined for another key. */
+function scrollKey(keys: KeybindingsManager, data: string, page: number): number | undefined {
+	const moves = [
+		["tui.altScreen.pageUp", page], ["tui.altScreen.pageDown", -page],
+		["tui.altScreen.halfPageUp", Math.ceil(page / 2)], ["tui.altScreen.halfPageDown", -Math.ceil(page / 2)],
+		["tui.altScreen.lineUp", 1], ["tui.altScreen.lineDown", -1],
+		["tui.altScreen.top", Infinity], ["tui.altScreen.bottom", -Infinity],
+	] as const;
+	return moves.find(([action]) => keys.matches(data, action))?.[1];
+}
+
+/**
+ * Shows a viewer in place of Pi's chat in fullscreen mode, and returns a function that restores it. The viewer takes
+ * Pi's layout, so its transcript above `dock` is browsed as Pi's transcript.
+ */
+function mountViewer(tui: ViewportTUI, theme: Theme, ctx: ExtensionContext, transcript: Component, dock: Component[]): () => void {
+	const previous = (tui as unknown as { layoutRoot?: Component }).layoutRoot;
+	const view = new ScrollView(transcript, {
+		follow: "end",
+		primary: true,
+		overscroll: "chain",
+		scrollbar: agentSession(ctx.sessionManager)?.settingsManager.getFullscreenScrollbar() ?? "auto",
+		scrollbarTrackStyle: (text) => theme.fg("scrollbarTrack", text),
+		scrollbarThumbStyle: (text) => theme.fg("scrollbarThumb", text),
+	});
+	// As Pi's fullscreen layout: the transcript takes the room the dock leaves.
+	tui.setLayoutRoot(new VStack([
+		{ component: view, basis: 0, grow: 1, shrink: 1, minSize: 1 },
+		{ component: new VStack(dock.map((component) => ({ component, shrink: 1, minSize: 0 }))), basis: "auto", grow: 0, shrink: 1, minSize: 1 },
+	]));
+	return () => tui.setLayoutRoot(previous);
+}
+
 /** The user's view of one owned Agent: its conversation, and an editor whose text goes to it. */
 class AgentViewer implements Component, Focusable {
 	private readonly editor: CustomEditor;
@@ -94,15 +137,20 @@ class AgentViewer implements Component, Focusable {
 	private readonly footer: FooterComponent;
 	private session?: AgentSession;
 	private streaming?: Message;
-	/** The streaming message's component and tool calls from the last rebuild, which its updates change in place. */
-	private live?: { component: AssistantMessageComponent; calls: string };
-	/** Tool components without a result from the last rebuild. */
+	/** The component of the streaming assistant message and its tool calls, which its updates change in place. */
+	private live?: { component: AssistantMessageComponent; calls: Set<string> };
+	/** Tool components without a result. */
 	private tools = new Map<string, ToolExecutionComponent>();
 	private running = new Map<string, { partial?: ToolResult }>();
+	/** The conversation's messages the transcript shows, by their count and the last one. */
+	private shown = 0;
+	private last?: Message;
+	/** Streaming messages that ended in the transcript before reaching the conversation's messages. */
+	private ended = 0;
 	private expanded = false;
-	/** Lines scrolled up from the end. */
+	/** Lines scrolled up from the end, in regular mode. */
 	private scroll = 0;
-	private dirty = true;
+	private fullscreen: boolean;
 	private status = "";
 	private indicator?: WorkingStatus;
 	/** Inputs sent from the viewer that the Agent has not received yet, as Pi shows queued messages. */
@@ -136,11 +184,21 @@ class AgentViewer implements Component, Focusable {
 		this.editor.onAction("app.message.followUp", () => this.send(this.editor.getText(), "followUp"));
 		this.editor.onAction("app.tools.expand", () => {
 			this.expanded = !this.expanded;
-			this.dirty = true;
+			// As Pi does, in place.
+			for (const child of this.transcript.children) (child as { setExpanded?: (expanded: boolean) => void }).setExpanded?.(this.expanded);
 			this.tui.requestRender();
 		});
 		this.disposers.push(onTreeChange(() => this.refresh()));
 		this.attach();
+		this.fullscreen = isViewportTUI(tui);
+		if (isViewportTUI(tui)) {
+			const part = (render: (width: number) => string[]): Component => ({ render, invalidate: () => this.invalidate() });
+			this.disposers.push(mountViewer(tui, theme, ctx, part((width) => this.renderTranscript(width)), [
+				part((width) => [" ".repeat(width), ...this.renderQueue(width)]),
+				this.editor,
+				part((width) => this.renderFooter(width)),
+			]));
+		}
 	}
 
 	get focused(): boolean {
@@ -153,28 +211,20 @@ class AgentViewer implements Component, Focusable {
 	}
 
 	handleInput(data: string): void {
-		const page = Math.max(1, this.tui.terminal.rows - 8);
-		// The page keys of Pi's fullscreen mode.
-		if (this.keys.matches(data, "tui.altScreen.pageUp")) this.scroll += page;
-		else if (this.keys.matches(data, "tui.altScreen.pageDown")) this.scroll = Math.max(0, this.scroll - page);
+		const lines = this.fullscreen ? undefined : scrollKey(this.keys, data, Math.max(1, this.tui.terminal.rows - 8));
+		if (lines !== undefined) this.scroll = Math.max(0, this.scroll + lines);
 		else this.editor.handleInput(data);
 		this.tui.requestRender();
 	}
 
+	/** In fullscreen mode, the viewer draws itself in place of Pi's chat (`mountViewer`); in regular mode, over the screen. */
 	render(width: number): string[] {
-		const conversation = this.owner.agents.conversation(this.entry.id);
-		if (this.dirty) this.rebuild(conversation);
-		this.syncStatus(conversation);
-		const queue = this.outbox.map(({ text, delivery }) =>
-			truncateToWidth(this.theme.fg("dim", ` ${delivery === "steer" ? "Steering" : "Follow-up"}: ${text.replace(/\s+/g, " ")}`), width));
+		if (this.fullscreen) return [];
+		const queue = this.renderQueue(width);
 		const editor = this.editor.render(width);
-		const [cwd = "", ...footer] = this.footer.render(width);
-		// The way back sits at the right of the footer's first line, when it fits.
-		const back = keyHint("app.clear", "back");
-		const gap = width - visibleWidth(cwd) - visibleWidth(back);
-		footer.unshift(gap >= 2 ? cwd + " ".repeat(gap) + back : cwd);
+		const footer = this.renderFooter(width);
 		const budget = Math.max(1, this.tui.terminal.rows - queue.length - editor.length - footer.length - 1);
-		const lines = this.transcript.render(width);
+		const lines = this.renderTranscript(width);
 		this.scroll = Math.min(this.scroll, Math.max(0, lines.length - budget));
 		const end = lines.length - this.scroll;
 		const shown = lines.slice(Math.max(0, end - budget), end);
@@ -184,8 +234,34 @@ class AgentViewer implements Component, Focusable {
 		return [...padding, ...shown, blank, ...queue, ...editor, ...footer];
 	}
 
+	private renderTranscript(width: number): string[] {
+		this.prepare();
+		return this.transcript.render(width);
+	}
+
+	/** Brings the transcript, the outbox and the working status up to the conversation, before any of them renders. */
+	private prepare(): void {
+		const conversation = this.owner.agents.conversation(this.entry.id);
+		this.sync(conversation);
+		this.syncStatus(conversation);
+	}
+
+	private renderQueue(width: number): string[] {
+		this.prepare();
+		return this.outbox.map(({ text, delivery }) =>
+			truncateToWidth(this.theme.fg("dim", ` ${delivery === "steer" ? "Steering" : "Follow-up"}: ${text.replace(/\s+/g, " ")}`), width));
+	}
+
+	/** Pi's footer for the Agent, with the way back at the right of its first line when it fits, marked so it stands out. */
+	private renderFooter(width: number): string[] {
+		const [cwd = "", ...footer] = this.footer.render(width);
+		const back = this.theme.fg("accent", `${keyText("app.clear")} back`);
+		const gap = width - visibleWidth(cwd) - visibleWidth(back);
+		return [gap >= 2 ? cwd + " ".repeat(gap) + back : cwd, ...footer];
+	}
+
 	invalidate(): void {
-		this.dirty = true;
+		this.transcript.invalidate();
 		this.editor.invalidate();
 	}
 
@@ -206,7 +282,7 @@ class AgentViewer implements Component, Focusable {
 			this.editor.addToHistory(trimmed);
 			this.editor.setText("");
 			this.scroll = 0;
-			this.dirty = true;
+			this.tui.requestRender();
 		} catch (error) {
 			this.ctx.ui.notify(error instanceof Error ? error.message : String(error), "error");
 		}
@@ -225,35 +301,32 @@ class AgentViewer implements Component, Focusable {
 				const tool = this.running.get(event.toolCallId);
 				if (tool) tool.partial = event.partialResult as ToolResult;
 			} else if (event.type === "tool_execution_end") this.running.delete(event.toolCallId);
-			if (!this.update(event)) this.dirty = true;
+			this.update(event);
 			this.tui.requestRender();
 		}));
 	}
 
-	/** Applies a streaming update to the shown components, as Pi does; false when the transcript needs a rebuild. */
-	private update(event: AgentSessionEvent): boolean {
-		if (this.dirty) return false;
-		if (event.type === "message_update") {
-			if (!this.live || event.message.role !== "assistant") return false;
-			const calls = event.message.content.flatMap((part) => part.type === "toolCall" ? [part] : []);
-			if (calls.map((call) => call.id).join("\n") !== this.live.calls) return false;
+	/** Applies a streaming update to the shown components in place, as Pi does; the next render adds new messages. */
+	private update(event: AgentSessionEvent): void {
+		if (event.type === "message_update" && this.live && event.message.role === "assistant") {
 			this.live.component.updateContent(event.message, true);
-			for (const call of calls) this.tools.get(call.id)?.updateArgs(call.arguments);
-			return true;
-		}
-		if (event.type === "tool_execution_start" || event.type === "tool_execution_update") {
-			const tool = this.tools.get(event.toolCallId);
-			if (!tool) return false;
-			if (event.type === "tool_execution_start") tool.markExecutionStarted();
-			else tool.updateResult(event.partialResult as ToolResult, true);
-			return true;
-		}
-		return false;
+			const conversation = this.owner.agents.conversation(this.entry.id);
+			for (const part of event.message.content) {
+				if (part.type !== "toolCall") continue;
+				if (this.live.calls.has(part.id)) this.tools.get(part.id)?.updateArgs(part.arguments);
+				else if (conversation) this.addTool(part, conversation, this.display(conversation), this.live.calls);
+			}
+		} else if (event.type === "message_end" && this.live && event.message.role === "assistant") {
+			// As Pi does, the streaming message's component ends with it, before the next message streams.
+			const conversation = this.owner.agents.conversation(this.entry.id);
+			if (conversation) this.end(event.message, conversation, this.display(conversation));
+			this.ended++;
+		} else if (event.type === "tool_execution_start") this.tools.get(event.toolCallId)?.markExecutionStarted();
+		else if (event.type === "tool_execution_update") this.tools.get(event.toolCallId)?.updateResult(event.partialResult as ToolResult, true);
 	}
 
 	private refresh(): void {
 		this.attach();
-		this.dirty = true;
 		this.tui.requestRender();
 	}
 
@@ -261,7 +334,7 @@ class AgentViewer implements Component, Focusable {
 	 * The working status in the editor's border, and its color from the Agent's thinking level, as in Pi: `Working`,
 	 * spinner and text in the border's color.
 	 */
-	private syncStatus(conversation: ReturnType<AgentNode["agents"]["conversation"]>): void {
+	private syncStatus(conversation: Conversation | undefined): void {
 		this.editor.borderColor = this.theme.getThinkingBorderColor((conversation?.thinkingLevel ?? "off") as never);
 		const state = this.owner.agents.counts(this.entry.id)?.state;
 		const text = state === "running" || state === "waiting" ? "Working" : "";
@@ -273,103 +346,145 @@ class AgentViewer implements Component, Focusable {
 		this.editor.setWorkingStatusIndicator(this.indicator as unknown as StatusIndicator);
 	}
 
-	private rebuild(conversation: ReturnType<AgentNode["agents"]["conversation"]>): void {
-		this.dirty = false;
-		this.transcript.clear();
-		this.live = undefined;
-		for (const tool of this.tools.values()) stopTimer(tool);
-		this.tools.clear();
-		if (!conversation) return;
-		const messages = [...conversation.messages];
+	/** The transcript's display settings: as Pi's chat shows messages, with the settings of the Session the viewer is in. */
+	private display(conversation: Conversation) {
+		const current = agentSession(this.ctx.sessionManager);
+		const settings = current?.settingsManager;
+		const pad = settings?.getOutputPad() ?? 1;
+		return {
+			settings,
+			markdown: settings ? { ...getMarkdownTheme(), codeBlockIndent: settings.getCodeBlockIndent() } : getMarkdownTheme(),
+			transformers: current?.extensionRunner.getMarkdownTransformers(),
+			pad,
+			runner: (conversation.session ?? current)?.extensionRunner,
+			images: { showImages: settings?.getShowImages() ?? false, imageWidthCells: settings?.getImageWidthCells(), outputPad: pad },
+		};
+	}
+
+	/** Adds the conversation's new messages to the transcript, and starts over when its earlier messages changed. */
+	private sync(conversation: Conversation | undefined): void {
+		const messages = conversation?.messages ?? [];
+		if (messages.length < this.shown || (this.shown > 0 && messages[this.shown - 1] !== this.last)) {
+			this.transcript.clear();
+			this.live = undefined;
+			for (const tool of this.tools.values()) stopTimer(tool);
+			this.tools.clear();
+			this.shown = 0;
+			this.ended = 0;
+		}
 		// An input leaves the outbox once it is in the conversation, or when the Agent ends its work without it.
 		const state = this.owner.agents.counts(this.entry.id)?.state;
 		const working = state !== undefined && state !== "idle";
 		this.outbox = this.outbox.filter(({ text, after }) => working && !messages.slice(after).some((message) =>
 			message.role === "custom" && message.content === text && (message.details as { user?: boolean } | undefined)?.user));
-		if (this.streaming && !messages.includes(this.streaming)) messages.push(this.streaming);
-		// As Pi's chat shows them, with the display settings of the Session the viewer is in.
-		const current = agentSession(this.ctx.sessionManager);
-		const settings = current?.settingsManager;
-		const markdown = settings ? { ...getMarkdownTheme(), codeBlockIndent: settings.getCodeBlockIndent() } : getMarkdownTheme();
-		const transformers = current?.extensionRunner.getMarkdownTransformers();
-		const pad = settings?.getOutputPad() ?? 1;
-		const runner = (conversation.session ?? current)?.extensionRunner;
-		const images = { showImages: settings?.getShowImages() ?? false, imageWidthCells: settings?.getImageWidthCells(), outputPad: pad };
-		for (const message of messages) {
-			if (message.role === "assistant") {
-				const component = new AssistantMessageComponent(message, settings?.getHideThinkingBlock() ?? false, markdown, undefined, pad, transformers);
-				if (message === this.streaming) {
-					// As Pi does, so Markdown transformers know the message is still streaming.
-					component.updateContent(message, true);
-					const calls = message.content.flatMap((part) => part.type === "toolCall" ? [part.id] : []);
-					this.live = { component, calls: calls.join("\n") };
-				}
+		if (!conversation) return;
+		const streaming = this.streaming?.role === "assistant" && !this.live && !messages.includes(this.streaming) ? this.streaming : undefined;
+		if (messages.length === this.shown && !streaming) return;
+		const display = this.display(conversation);
+		for (const message of messages.slice(this.shown)) {
+			if (message.role !== "assistant") this.add(message, conversation, display);
+			// An ended streaming message is shown already.
+			else if (this.ended > 0) this.ended--;
+			else if (this.live) this.end(message, conversation, display);
+			else this.add(message, conversation, display);
+		}
+		this.shown = messages.length;
+		this.last = messages.at(-1);
+		if (streaming?.role === "assistant") {
+			const component = new AssistantMessageComponent(streaming, display.settings?.getHideThinkingBlock() ?? false, display.markdown, undefined, display.pad, display.transformers);
+			// As Pi does, so Markdown transformers know the message is still streaming.
+			component.updateContent(streaming, true);
+			this.transcript.addChild(component);
+			this.live = { component, calls: new Set() };
+			for (const part of streaming.content) if (part.type === "toolCall") this.addTool(part, conversation, display, this.live.calls);
+		}
+	}
+
+	/** Shows the streaming message whole as it ended. */
+	private end(message: Message, conversation: Conversation, display: Display): void {
+		if (!this.live || message.role !== "assistant") return;
+		this.live.component.updateContent(message);
+		for (const part of message.content) if (part.type === "toolCall" && !this.live.calls.has(part.id)) this.addTool(part, conversation, display);
+		this.live = undefined;
+		this.settle(message);
+	}
+
+	private addTool(call: ToolCall, conversation: Conversation, display: Display, calls?: Set<string>): void {
+		const tool = new ToolExecutionComponent(call.name, call.id, call.arguments, display.images,
+			conversation.session?.getToolDefinition(call.name), this.tui, conversation.cwd);
+		tool.setExpanded(this.expanded);
+		this.transcript.addChild(tool);
+		this.tools.set(call.id, tool);
+		calls?.add(call.id);
+		const running = this.running.get(call.id);
+		if (running) {
+			tool.markExecutionStarted();
+			if (running.partial) tool.updateResult(running.partial, true);
+		}
+	}
+
+	/** Ends the tool calls of an assistant message that stopped without running them. */
+	private settle(message: Message): void {
+		if (message.role !== "assistant" || (message.stopReason !== "aborted" && message.stopReason !== "error")) return;
+		const text = message.stopReason === "aborted" ? "Operation aborted" : message.errorMessage || "Error";
+		for (const part of message.content) {
+			if (part.type !== "toolCall") continue;
+			this.tools.get(part.id)?.updateResult({ content: [{ type: "text", text }], isError: true });
+			this.tools.delete(part.id);
+		}
+	}
+
+	private add(message: Message, conversation: Conversation, display: Display): void {
+		const { markdown, transformers, pad, runner } = display;
+		if (message.role === "assistant") {
+			this.transcript.addChild(new AssistantMessageComponent(message, display.settings?.getHideThinkingBlock() ?? false, markdown, undefined, pad, transformers));
+			for (const part of message.content) if (part.type === "toolCall") this.addTool(part, conversation, display);
+			this.settle(message);
+		} else if (message.role === "toolResult") {
+			this.tools.get(message.toolCallId)?.updateResult(message);
+			this.tools.delete(message.toolCallId);
+		} else if (message.role === "user") {
+			const text = typeof message.content === "string"
+				? message.content
+				: message.content.flatMap((part) => part.type === "text" ? [part.text] : []).join("");
+			if (!text) return;
+			this.transcript.addChild(new Spacer(1));
+			const skill = parseSkillBlock(text);
+			if (skill) {
+				const component = new SkillInvocationMessageComponent(skill, markdown, pad);
+				component.setExpanded(this.expanded);
 				this.transcript.addChild(component);
-				for (const part of message.content) {
-					if (part.type !== "toolCall") continue;
-					const tool = new ToolExecutionComponent(part.name, part.id, part.arguments, images,
-						conversation.session?.getToolDefinition(part.name), this.tui, conversation.cwd);
-					tool.setExpanded(this.expanded);
-					this.transcript.addChild(tool);
-					if (message.stopReason === "aborted" || message.stopReason === "error") {
-						const text = message.stopReason === "aborted" ? "Operation aborted" : message.errorMessage || "Error";
-						tool.updateResult({ content: [{ type: "text", text }], isError: true });
-					} else {
-						this.tools.set(part.id, tool);
-					}
-				}
-			} else if (message.role === "toolResult") {
-				this.tools.get(message.toolCallId)?.updateResult(message);
-				this.tools.delete(message.toolCallId);
-			} else if (message.role === "user") {
-				const text = typeof message.content === "string"
-					? message.content
-					: message.content.flatMap((part) => part.type === "text" ? [part.text] : []).join("");
-				if (!text) continue;
-				this.transcript.addChild(new Spacer(1));
-				const skill = parseSkillBlock(text);
-				if (skill) {
-					const component = new SkillInvocationMessageComponent(skill, markdown, pad);
-					component.setExpanded(this.expanded);
-					this.transcript.addChild(component);
-					if (skill.userMessage) {
-						this.transcript.addChild(new Spacer(1));
-						this.transcript.addChild(new UserMessageComponent(skill.userMessage, markdown, pad, transformers));
-					}
-				} else {
-					this.transcript.addChild(new UserMessageComponent(text, markdown, pad, transformers));
-				}
-			} else if (message.role === "custom" && message.display) {
-				const user = message.customType === MESSAGE_TYPE && (message.details as { user?: boolean } | undefined)?.user;
-				if (user && typeof message.content === "string") {
+				if (skill.userMessage) {
 					this.transcript.addChild(new Spacer(1));
-					this.transcript.addChild(new UserMessageComponent(message.content, markdown, pad, transformers));
-				} else {
-					// The component starts with its own blank line.
-					const component = new CustomMessageComponent(message, runner?.getMessageRenderer(message.customType), markdown, pad);
-					component.setExpanded(this.expanded);
-					this.transcript.addChild(component);
+					this.transcript.addChild(new UserMessageComponent(skill.userMessage, markdown, pad, transformers));
 				}
-			} else if (message.role === "bashExecution") {
-				const component = new BashExecutionComponent(message.command, this.tui, message.excludeFromContext, pad);
-				if (message.output) component.appendOutput(message.output);
-				component.setComplete(message.exitCode, message.cancelled, message.truncated ? { truncated: true } as never : undefined, message.fullOutputPath);
-				component.setExpanded(this.expanded);
-				this.transcript.addChild(component);
-			} else if (message.role === "compactionSummary" || message.role === "branchSummary") {
+			} else {
+				this.transcript.addChild(new UserMessageComponent(text, markdown, pad, transformers));
+			}
+		} else if (message.role === "custom" && message.display) {
+			const user = message.customType === MESSAGE_TYPE && (message.details as { user?: boolean } | undefined)?.user;
+			if (user && typeof message.content === "string") {
 				this.transcript.addChild(new Spacer(1));
-				const component = message.role === "compactionSummary"
-					? new CompactionSummaryMessageComponent(message, markdown, pad)
-					: new BranchSummaryMessageComponent(message, markdown, pad);
+				this.transcript.addChild(new UserMessageComponent(message.content, markdown, pad, transformers));
+			} else {
+				// The component starts with its own blank line.
+				const component = new CustomMessageComponent(message, runner?.getMessageRenderer(message.customType), markdown, pad);
 				component.setExpanded(this.expanded);
 				this.transcript.addChild(component);
 			}
-		}
-		for (const [id, tool] of this.tools) {
-			const running = this.running.get(id);
-			if (!running) continue;
-			tool.markExecutionStarted();
-			if (running.partial) tool.updateResult(running.partial, true);
+		} else if (message.role === "bashExecution") {
+			const component = new BashExecutionComponent(message.command, this.tui, message.excludeFromContext, pad);
+			if (message.output) component.appendOutput(message.output);
+			component.setComplete(message.exitCode, message.cancelled, message.truncated ? { truncated: true } as never : undefined, message.fullOutputPath);
+			component.setExpanded(this.expanded);
+			this.transcript.addChild(component);
+		} else if (message.role === "compactionSummary" || message.role === "branchSummary") {
+			this.transcript.addChild(new Spacer(1));
+			const component = message.role === "compactionSummary"
+				? new CompactionSummaryMessageComponent(message, markdown, pad)
+				: new BranchSummaryMessageComponent(message, markdown, pad);
+			component.setExpanded(this.expanded);
+			this.transcript.addChild(component);
 		}
 	}
 }
@@ -406,20 +521,25 @@ class ProgramViewer implements Component, Focusable {
 	}
 
 	handleInput(data: string): void {
-		const page = Math.max(1, this.tui.terminal.rows - 4);
+		const lines = scrollKey(this.keys, data, Math.max(1, this.tui.terminal.rows - 4));
 		if (this.keys.matches(data, "app.clear" as never)) return this.done();
 		if (this.keys.matches(data, "app.interrupt" as never)) this.stop();
 		else if (this.keys.matches(data, "app.tools.expand" as never)) {
 			this.expanded = !this.expanded;
 			this.tool.setExpanded(this.expanded);
-		} else if (this.keys.matches(data, "tui.altScreen.pageUp")) this.scroll += page;
-		else if (this.keys.matches(data, "tui.altScreen.pageDown")) this.scroll = Math.max(0, this.scroll - page);
+		} else if (lines !== undefined) this.scroll = Math.max(0, this.scroll + lines);
 		this.tui.requestRender();
 	}
 
+	handleMouse(event: TuiMouseEvent): TuiMouseEventResult | undefined {
+		if (event.type !== "wheel" || !event.wheelDelta) return undefined;
+		this.scroll = Math.max(0, this.scroll - event.wheelDelta);
+		return { handled: true };
+	}
+
 	render(width: number): string[] {
 		const running = this.programs.view(this.id)?.record.state === "running";
-		const hints = [...running ? [keyHint("app.interrupt", "stop")] : [], keyHint("app.clear", "back")].join("  ");
+		const hints = [...running ? [keyHint("app.interrupt", "stop")] : [], this.theme.fg("accent", `${keyText("app.clear")} back`)].join("  ");
 		const footer = truncateToWidth(" ".repeat(Math.max(0, width - visibleWidth(hints))) + hints, width);
 		const border = new DynamicBorder().render(width);
 		const budget = Math.max(1, this.tui.terminal.rows - border.length - 2);
@@ -514,27 +634,28 @@ class ListSelector extends Container implements Focusable {
 /** The Agents in the current Agent's tree, including Programs' Agents, those not idle first and newest first within each group. */
 export function ownedEntries(self: AgentNode): Entry[] {
 	const entries: Entry[] = [];
-	const visit = (node: AgentNode) => {
-		for (const agent of node.agents.owned()) {
-			entries.push({ ...agent, ownerId: node.id });
-			const loaded = nodes.get(agent.id);
-			if (loaded) visit(loaded);
+	const visit = (tasks: Task[]) => {
+		for (const task of tasks) {
+			if ("entry" in task) entries.push(task.entry);
+			visit(task.tasks);
 		}
-		for (const program of programsOf(node)) visit(program);
 	};
-	visit(self);
+	visit(tasksOf(self));
 	return entries.sort((a, b) => Number(b.state !== "idle") - Number(a.state !== "idle") || (b.createdAt ?? "").localeCompare(a.createdAt ?? ""));
 }
 
 const PROGRAM_ITEM = "program:";
 
 /**
- * `/tasks`: picks an Agent in the tree or a background Program, live ones first and newest first, and opens it in
- * the viewer. `paddingX` is Pi's editor padding, so the viewer's editor lines up as Pi's does.
+ * `/tasks`: picks an Agent in the tree, a background Program of the current Agent, or a running one of another Agent, live ones first and newest first, and opens
+ * it in the viewer. `paddingX` is Pi's editor padding, so the viewer's editor lines up as Pi's does.
  */
-export async function openTaskViewer(ctx: ExtensionContext, self: AgentNode, programs: Programs | undefined, paddingX: number): Promise<void> {
+export async function openTaskViewer(ctx: ExtensionContext, self: AgentNode, paddingX: number): Promise<void> {
 	const entries = ownedEntries(self);
-	const records = programs?.list() ?? [];
+	const records = [self, ...entries.flatMap((entry) => nodes.get(entry.id) ?? [])]
+		.flatMap((caller) => caller.programs?.list().map((record) => ({ caller, programs: caller.programs!, record })) ?? [])
+		// Another Agent's ended Programs show in its conversation; its Session may not be loaded to list them.
+		.filter(({ caller, record }) => caller === self || record.state === "running");
 	if (entries.length === 0 && records.length === 0) {
 		ctx.ui.notify("No tasks.", "info");
 		return;
@@ -554,20 +675,25 @@ export async function openTaskViewer(ctx: ExtensionContext, self: AgentNode, pro
 			label: path(entry),
 			description: [entry.state, latestActivity(entry.sessionFile) ?? ""].filter(Boolean).join("  "),
 		} })),
-		...records.map((record) => ({ live: record.state === "running", at: new Date(record.startedAt).toISOString(), item: {
+		...records.map(({ caller, programs, record }) => ({ live: record.state === "running", at: new Date(record.startedAt).toISOString(), item: {
 			value: PROGRAM_ITEM + record.id,
-			label: `Program ${programs!.label(record)}`,
+			label: `Program ${programs.label(record)}${caller === self ? "" : ` ‹ ${path(byId.get(caller.id)!)}`}`,
 			description: record.state,
 		} })),
 	];
 	const items: SelectItem[] = tasks
 		.sort((a, b) => Number(b.live) - Number(a.live) || b.at.localeCompare(a.at))
 		.map((task) => task.item);
-	const id = await ctx.ui.custom<string | undefined>((_tui, theme, keys, done) =>
-		new ListSelector("Open task:", items, theme, keys, (value) => done(value), () => done(undefined)));
-	if (id?.startsWith(PROGRAM_ITEM) && programs) {
+	// In regular mode, a viewer shows over the screen; in fullscreen mode, it takes Pi's layout (`mountViewer`).
+	let overlay = true;
+	const id = await ctx.ui.custom<string | undefined>((tui, theme, keys, done) => {
+		overlay = !isViewportTUI(tui);
+		return new ListSelector("Open task:", items, theme, keys, (value) => done(value), () => done(undefined));
+	});
+	const program = id?.startsWith(PROGRAM_ITEM) ? records.find(({ record }) => record.id === id.slice(PROGRAM_ITEM.length)) : undefined;
+	if (program) {
 		await ctx.ui.custom<void>(
-			(tui, theme, keys, done) => new ProgramViewer(tui, theme, keys, ctx, programs, id.slice(PROGRAM_ITEM.length), () => done()),
+			(tui, theme, keys, done) => new ProgramViewer(tui, theme, keys, ctx, program.programs, program.record.id, () => done()),
 			{ overlay: true, overlayOptions: { width: "100%", maxHeight: "100%", anchor: "bottom-center" } },
 		);
 		return;
@@ -584,6 +710,6 @@ export async function openTaskViewer(ctx: ExtensionContext, self: AgentNode, pro
 	}
 	await ctx.ui.custom<void>(
 		(tui, theme, keys, done) => new AgentViewer(tui, theme, keys, ctx, owner, entry, session, paddingX, () => done()),
-		{ overlay: true, overlayOptions: { width: "100%", maxHeight: "100%", anchor: "bottom-center" } },
+		overlay ? { overlay: true, overlayOptions: { width: "100%", maxHeight: "100%", anchor: "bottom-center" } } : undefined,
 	);
 }