@tshu-w/pi-agents 0.1.1 → 0.2.1

package/src/ui/viewer.ts

@@ -1,5 +1,7 @@
 import {
 	AssistantMessageComponent,
+	BashExecutionComponent,
+	BranchSummaryMessageComponent,
 	CompactionSummaryMessageComponent,
 	CustomEditor,
 	CustomMessageComponent,
@@ -8,7 +10,8 @@ import {
 	getMarkdownTheme,
 	getSelectListTheme,
 	keyHint,
-	keyText,
+	parseSkillBlock,
+	SkillInvocationMessageComponent,
 	ToolExecutionComponent,
 	UserMessageComponent,
 	type AgentSession,
@@ -22,7 +25,6 @@ import {
 	fuzzyFilter,
 	Input,
 	Loader,
-	matchesKey,
 	SelectList,
 	Spacer,
 	Text,
@@ -36,12 +38,22 @@ import {
 } from "@earendil-works/pi-tui";
 import { MESSAGE_TYPE, nodes, onTreeChange, programLabel, programsOf, type AgentNode, type Entry } 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";
+import { agentSession } from "../roots/rpc.ts";
 import { execFileSync } from "node:child_process";
 
 type Message = AgentSession["messages"][number];
 type ToolResult = Parameters<ToolExecutionComponent["updateResult"]>[0];
 type StatusIndicator = Parameters<CustomEditor["setWorkingStatusIndicator"]>[0];
 
+/** Stops the elapsed-time timer of a tool component the viewer drops; only a final result stops it otherwise. */
+function stopTimer(tool: ToolExecutionComponent): void {
+	const state = (tool as unknown as { rendererState: { interval?: ReturnType<typeof setInterval> } }).rendererState;
+	clearInterval(state.interval);
+	state.interval = undefined;
+}
+
 /** A spinner and message for the editor's top border, like Pi's working status. */
 class WorkingStatus extends Loader {
 	renderInBorder(width: number): string {
@@ -86,7 +98,7 @@ class AgentViewer implements Component, Focusable {
 	private live?: { component: AssistantMessageComponent; calls: string };
 	/** Tool components without a result from the last rebuild. */
 	private tools = new Map<string, ToolExecutionComponent>();
-	private running = new Map<string, { name: string; partial?: ToolResult }>();
+	private running = new Map<string, { partial?: ToolResult }>();
 	private expanded = false;
 	/** Lines scrolled up from the end. */
 	private scroll = 0;
@@ -101,7 +113,7 @@ class AgentViewer implements Component, Focusable {
 	constructor(
 		private tui: TUI,
 		private theme: Theme,
-		keys: KeybindingsManager,
+		private keys: KeybindingsManager,
 		private ctx: ExtensionContext,
 		private owner: AgentNode,
 		private entry: Entry,
@@ -142,8 +154,9 @@ class AgentViewer implements Component, Focusable {
 
 	handleInput(data: string): void {
 		const page = Math.max(1, this.tui.terminal.rows - 8);
-		if (matchesKey(data, "pageUp")) this.scroll += page;
-		else if (matchesKey(data, "pageDown")) this.scroll = Math.max(0, this.scroll - page);
+		// 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);
 		else this.editor.handleInput(data);
 		this.tui.requestRender();
 	}
@@ -179,6 +192,7 @@ class AgentViewer implements Component, Focusable {
 	dispose(): void {
 		this.indicator?.dispose();
 		this.footer.dispose();
+		for (const tool of this.tools.values()) stopTimer(tool);
 		for (const dispose of this.disposers.splice(0)) dispose();
 	}
 
@@ -206,7 +220,7 @@ class AgentViewer implements Component, Focusable {
 		this.disposers.push(session.subscribe((event) => {
 			if (event.type === "message_start" || event.type === "message_update") this.streaming = event.message;
 			else if (event.type === "message_end") this.streaming = undefined;
-			else if (event.type === "tool_execution_start") this.running.set(event.toolCallId, { name: event.toolName });
+			else if (event.type === "tool_execution_start") this.running.set(event.toolCallId, {});
 			else if (event.type === "tool_execution_update") {
 				const tool = this.running.get(event.toolCallId);
 				if (tool) tool.partial = event.partialResult as ToolResult;
@@ -223,7 +237,7 @@ class AgentViewer implements Component, Focusable {
 			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;
-			this.live.component.updateContent(event.message);
+			this.live.component.updateContent(event.message, true);
 			for (const call of calls) this.tools.get(call.id)?.updateArgs(call.arguments);
 			return true;
 		}
@@ -243,20 +257,19 @@ class AgentViewer implements Component, Focusable {
 		this.tui.requestRender();
 	}
 
-	/** The working status in the editor's border, and its color from the Agent's thinking level, as in Pi. */
+	/**
+	 * 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 {
 		this.editor.borderColor = this.theme.getThinkingBorderColor((conversation?.thinkingLevel ?? "off") as never);
 		const state = this.owner.agents.counts(this.entry.id)?.state;
-		const busy = state === "running" || state === "waiting";
-		const tool = [...this.running.values()].at(-1);
-		const abort = `${keyText("app.interrupt")} to abort`;
-		const text = !busy ? "" : tool ? `Running ${tool.name}... (${abort})` : `Working... (${abort})`;
+		const text = state === "running" || state === "waiting" ? "Working" : "";
 		if (text === this.status) return;
 		this.status = text;
 		this.indicator?.dispose();
-		this.indicator = text
-			? new WorkingStatus(this.tui, (part) => this.editor.borderColor(part), (part) => this.theme.fg("muted", part), text)
-			: undefined;
+		const color = (part: string) => this.editor.borderColor(part);
+		this.indicator = text ? new WorkingStatus(this.tui, color, color, text) : undefined;
 		this.editor.setWorkingStatusIndicator(this.indicator as unknown as StatusIndicator);
 	}
 
@@ -264,6 +277,7 @@ class AgentViewer implements Component, Focusable {
 		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];
@@ -273,23 +287,33 @@ class AgentViewer implements Component, Focusable {
 		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);
-		const markdown = getMarkdownTheme();
+		// 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, false, markdown);
+				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") };
 				}
 				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, { showImages: false },
+					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") {
-						tool.updateResult({ content: [{ type: "text", text: message.errorMessage || "Operation aborted" }], isError: true });
+						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);
 					}
@@ -300,23 +324,45 @@ class AgentViewer implements Component, Focusable {
 			} else if (message.role === "user") {
 				const text = typeof message.content === "string"
 					? message.content
-					: message.content.flatMap((part) => part.type === "text" ? [part.text] : []).join("\n");
+					: message.content.flatMap((part) => part.type === "text" ? [part.text] : []).join("");
 				if (!text) continue;
 				this.transcript.addChild(new Spacer(1));
-				this.transcript.addChild(new UserMessageComponent(text, markdown));
+				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;
-				this.transcript.addChild(new Spacer(1));
 				if (user && typeof message.content === "string") {
-					this.transcript.addChild(new UserMessageComponent(message.content, markdown));
+					this.transcript.addChild(new Spacer(1));
+					this.transcript.addChild(new UserMessageComponent(message.content, markdown, pad, transformers));
 				} else {
-					const component = new CustomMessageComponent(message, undefined, markdown);
+					// 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);
 				}
-			} else if (message.role === "compactionSummary") {
+			} 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));
-				this.transcript.addChild(new CompactionSummaryMessageComponent(message, markdown));
+				const component = message.role === "compactionSummary"
+					? new CompactionSummaryMessageComponent(message, markdown, pad)
+					: new BranchSummaryMessageComponent(message, markdown, pad);
+				component.setExpanded(this.expanded);
+				this.transcript.addChild(component);
 			}
 		}
 		for (const [id, tool] of this.tools) {
@@ -328,6 +374,82 @@ class AgentViewer implements Component, Focusable {
 	}
 }
 
+/** The user's view of one background Program, as its tool call shows in the foreground. */
+class ProgramViewer implements Component, Focusable {
+	private readonly tool: ToolExecutionComponent;
+	private expanded = false;
+	/** Lines scrolled up from the end. */
+	private scroll = 0;
+	private disposers: Array<() => void> = [];
+	focused = false;
+
+	constructor(
+		private tui: TUI,
+		private theme: Theme,
+		private keys: KeybindingsManager,
+		private ctx: ExtensionContext,
+		private programs: Programs,
+		private id: string,
+		private done: () => void,
+	) {
+		const code = programs.view(id)?.code;
+		const settings = agentSession(ctx.sessionManager)?.settingsManager;
+		this.tool = new ToolExecutionComponent(PROGRAM_TOOL_NAME, `program-${id}`, { action: "run", background: true, ...(code !== undefined && { code }) }, {
+			showImages: settings?.getShowImages() ?? false, imageWidthCells: settings?.getImageWidthCells(), outputPad: settings?.getOutputPad(),
+		}, agentSession(ctx.sessionManager)?.getToolDefinition(PROGRAM_TOOL_NAME), tui, ctx.cwd);
+		this.tool.markExecutionStarted();
+		this.sync();
+		this.disposers.push(programs.onView(() => {
+			this.sync();
+			this.tui.requestRender();
+		}));
+	}
+
+	handleInput(data: string): void {
+		const page = 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);
+		this.tui.requestRender();
+	}
+
+	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 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);
+		const lines = this.tool.render(width);
+		this.scroll = Math.min(this.scroll, Math.max(0, lines.length - budget));
+		const end = lines.length - this.scroll;
+		// As tall as its content, so the Session shows above it.
+		return [...border, ...lines.slice(Math.max(0, end - budget), end), " ".repeat(width), footer];
+	}
+
+	invalidate(): void {
+		this.tool.invalidate();
+	}
+
+	dispose(): void {
+		stopTimer(this.tool);
+		for (const dispose of this.disposers.splice(0)) dispose();
+	}
+
+	private sync(): void {
+		const view = this.programs.view(this.id);
+		if (view?.result) this.tool.updateResult(view.result as ToolResult, view.record.state === "running");
+	}
+
+	private stop(): void {
+		this.programs.stop(this.programs.target(this.id)).catch((error: unknown) =>
+			this.ctx.ui.notify(error instanceof Error ? error.message : String(error), "error"));
+	}
+}
+
 /** A filterable list in place of the editor, like Pi Durable's conversation switcher. */
 class ListSelector extends Container implements Focusable {
 	private readonly input = new Input();
@@ -404,12 +526,17 @@ export function ownedEntries(self: AgentNode): Entry[] {
 	return entries.sort((a, b) => Number(b.state !== "idle") - Number(a.state !== "idle") || (b.createdAt ?? "").localeCompare(a.createdAt ?? ""));
 }
 
-/** `/agents`: picks an owned Agent 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 openAgentViewer(ctx: ExtensionContext, self: AgentNode, paddingX: number): Promise<void> {
+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.
+ */
+export async function openTaskViewer(ctx: ExtensionContext, self: AgentNode, programs: Programs | undefined, paddingX: number): Promise<void> {
 	const entries = ownedEntries(self);
-	if (entries.length === 0) {
-		ctx.ui.notify("No owned Agents.", "info");
+	const records = programs?.list() ?? [];
+	if (entries.length === 0 && records.length === 0) {
+		ctx.ui.notify("No tasks.", "info");
 		return;
 	}
 	const byId = new Map(entries.map((entry) => [entry.id, entry]));
@@ -421,13 +548,30 @@ export async function openAgentViewer(ctx: ExtensionContext, self: AgentNode, pa
 		return program?.program ? ` ‹ ${programLabel(program)}${owners(program.ownerId)}` : "";
 	};
 	const path = (entry: Entry): string => `${entry.name ?? entry.id}${owners(entry.ownerId)}`;
-	const items: SelectItem[] = entries.map((entry) => ({
-		value: entry.id,
-		label: path(entry),
-		description: [entry.state, latestActivity(entry.sessionFile) ?? ""].filter(Boolean).join("  "),
-	}));
+	const tasks = [
+		...entries.map((entry) => ({ live: entry.state !== "idle", at: entry.createdAt ?? "", item: {
+			value: entry.id,
+			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: {
+			value: PROGRAM_ITEM + record.id,
+			label: `Program ${programs!.label(record)}`,
+			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 Agent:", items, theme, keys, (value) => done(value), () => done(undefined)));
+		new ListSelector("Open task:", items, theme, keys, (value) => done(value), () => done(undefined)));
+	if (id?.startsWith(PROGRAM_ITEM) && programs) {
+		await ctx.ui.custom<void>(
+			(tui, theme, keys, done) => new ProgramViewer(tui, theme, keys, ctx, programs, id.slice(PROGRAM_ITEM.length), () => done()),
+			{ overlay: true, overlayOptions: { width: "100%", maxHeight: "100%", anchor: "bottom-center" } },
+		);
+		return;
+	}
 	const entry = id === undefined ? undefined : byId.get(id);
 	const owner = entry?.ownerId === undefined ? undefined : nodes.get(entry.ownerId);
 	if (!entry || !owner) return;