Add ToolRenderResult interface for custom tool rendering

- Changed ToolRenderer return type from TemplateResult to ToolRenderResult
- ToolRenderResult = { content: TemplateResult, isCustom: boolean }
- isCustom: true = no card wrapper, false = wrap in card
- Updated all existing tool renderers to return new format
- Updated Messages.ts to handle custom rendering

This enables tools to render without default card chrome when needed.

packages/web-ui/src/agent/agent.ts

@@ -1,4 +1,4 @@
-import type { Context } from "@mariozechner/pi-ai";
+import type { Context, QueuedMessage } from "@mariozechner/pi-ai";
 import {
 	type AgentTool,
 	type AssistantMessage as AssistantMessageType,
@@ -47,7 +47,9 @@ export interface AgentState {
 export type AgentEvent =
 	| { type: "state-update"; state: AgentState }
 	| { type: "error-no-model" }
-	| { type: "error-no-api-key"; provider: string };
+	| { type: "error-no-api-key"; provider: string }
+	| { type: "started" }
+	| { type: "completed" };
 
 export interface AgentOptions {
 	initialState?: Partial<AgentState>;
@@ -74,6 +76,7 @@ export class Agent {
 	private transport: AgentTransport;
 	private debugListener?: (entry: DebugLogEntry) => void;
 	private messageTransformer: (messages: AppMessage[]) => Message[] | Promise<Message[]>;
+	private messageQueue: Array<QueuedMessage<AppMessage>> = [];
 
 	constructor(opts: AgentOptions) {
 		this._state = { ...this._state, ...opts.initialState };
@@ -111,6 +114,14 @@ export class Agent {
 	appendMessage(m: AppMessage) {
 		this.patch({ messages: [...this._state.messages, m] });
 	}
+	async queueMessage(m: AppMessage) {
+		// Transform message and queue it for injection at next turn
+		const transformed = await this.messageTransformer([m]);
+		this.messageQueue.push({
+			original: m,
+			llm: transformed[0], // undefined if filtered out
+		});
+	}
 	clearMessages() {
 		this.patch({ messages: [] });
 	}
@@ -119,6 +130,11 @@ export class Agent {
 		this.abortController?.abort();
 	}
 
+	private logState(message: string) {
+		const { systemPrompt, model, messages } = this._state;
+		console.log(message, { systemPrompt, model, messages });
+	}
+
 	async prompt(input: string, attachments?: Attachment[]) {
 		const model = this._state.model;
 		if (!model) {
@@ -150,6 +166,7 @@ export class Agent {
 
 		this.abortController = new AbortController();
 		this.patch({ isStreaming: true, streamMessage: null, error: undefined });
+		this.emit({ type: "started" });
 
 		const reasoning =
 			this._state.thinkingLevel === "off"
@@ -162,6 +179,12 @@ export class Agent {
 			tools: this._state.tools,
 			model,
 			reasoning,
+			getQueuedMessages: async <T>() => {
+				// Return queued messages (they'll be added to state via message_end event)
+				const queued = this.messageQueue.slice();
+				this.messageQueue = [];
+				return queued as QueuedMessage<T>[];
+			},
 		};
 
 		try {
@@ -169,9 +192,12 @@ export class Agent {
 			let turnDebug: DebugLogEntry | null = null;
 			let turnStart = 0;
 
-			// Transform app messages to LLM-compatible messages
+			this.logState("prompt started, current state:");
+
+			// Transform app messages to LLM-compatible messages (initial set)
 			const llmMessages = await this.messageTransformer(this._state.messages);
 
+			console.log("transformed messages:", llmMessages);
 			for await (const ev of this.transport.run(
 				llmMessages,
 				userMessage as Message,
@@ -292,11 +318,9 @@ export class Agent {
 		} finally {
 			this.patch({ isStreaming: false, streamMessage: null, pendingToolCalls: new Set<string>() });
 			this.abortController = undefined;
+			this.emit({ type: "completed" });
 		}
-		{
-			const { systemPrompt, model, messages } = this._state;
-			console.log("final state:", { systemPrompt, model, messages });
-		}
+		this.logState("final state:");
 	}
 
 	private patch(p: Partial<AgentState>): void {

packages/web-ui/src/agent/transports/AppTransport.ts

@@ -1,12 +1,12 @@
 import type {
 	AgentContext,
+	AgentLoopConfig,
 	Api,
 	AssistantMessage,
 	AssistantMessageEvent,
 	Context,
 	Message,
 	Model,
-	PromptConfig,
 	SimpleStreamOptions,
 	ToolCall,
 	UserMessage,
@@ -348,9 +348,10 @@ export class AppTransport implements AgentTransport {
 			tools: cfg.tools,
 		};
 
-		const pc: PromptConfig = {
+		const pc: AgentLoopConfig = {
 			model: cfg.model,
 			reasoning: cfg.reasoning,
+			getQueuedMessages: cfg.getQueuedMessages,
 		};
 
 		// Yield events from the upstream agentLoop iterator

packages/web-ui/src/agent/transports/ProviderTransport.ts

@@ -1,4 +1,10 @@
-import { type AgentContext, agentLoop, type Message, type PromptConfig, type UserMessage } from "@mariozechner/pi-ai";
+import {
+	type AgentContext,
+	type AgentLoopConfig,
+	agentLoop,
+	type Message,
+	type UserMessage,
+} from "@mariozechner/pi-ai";
 import { getAppStorage } from "../../storage/app-storage.js";
 import type { AgentRunConfig, AgentTransport } from "./types.js";
 
@@ -34,10 +40,11 @@ export class ProviderTransport implements AgentTransport {
 			tools: cfg.tools,
 		};
 
-		const pc: PromptConfig = {
+		const pc: AgentLoopConfig = {
 			model,
 			reasoning: cfg.reasoning,
 			apiKey,
+			getQueuedMessages: cfg.getQueuedMessages,
 		};
 
 		// Yield events from agentLoop

packages/web-ui/src/agent/transports/types.ts

@@ -1,4 +1,4 @@
-import type { AgentEvent, AgentTool, Message, Model } from "@mariozechner/pi-ai";
+import type { AgentEvent, AgentTool, Message, Model, QueuedMessage } from "@mariozechner/pi-ai";
 
 // The minimal configuration needed to run a turn.
 export interface AgentRunConfig {
@@ -6,6 +6,7 @@ export interface AgentRunConfig {
 	tools: AgentTool<any>[];
 	model: Model<any>;
 	reasoning?: "low" | "medium" | "high";
+	getQueuedMessages?: <T>() => Promise<QueuedMessage<T>[]>;
 }
 
 // Events yielded by transports must match the @mariozechner/pi-ai prompt() events.