@robota-sdk/agent-ui-web 3.0.0-beta.94 → 3.0.0-beta.96

package/dist/browser/index.js

@@ -1,9 +1,9 @@
-import React, { createContext, forwardRef, useCallback, useContext, useEffect, useId, useImperativeHandle, useLayoutEffect, useRef, useState } from "react";
+import React, { createContext, forwardRef, useCallback, useContext, useEffect, useId, useImperativeHandle, useLayoutEffect, useMemo, useRef, useState } from "react";
 import { decodeFrame, decodeServerMessage } from "@robota-sdk/agent-transport/client";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import ReactMarkdown from "react-markdown";
 import remarkGfm from "remark-gfm";
-import { ArrowDown, ArrowUp, Bot, Check, ChevronDown, ChevronLeft, ChevronRight, CircleCheck, CircleDashed, CircleX, Copy, ExternalLink, FileText, Gauge, GitBranch, Globe, LoaderCircle, MessageCircleQuestion, MoreHorizontal, PanelLeftClose, PanelLeftOpen, Paperclip, Pause, Pencil, Play, RefreshCw, Search, Settings, Shield, ShieldAlert, Sparkles, Square, SquarePen, SquareTerminal, Target, Trash2, Wrench, X } from "lucide-react";
+import { ArrowDown, ArrowUp, Bot, Check, ChevronDown, ChevronLeft, ChevronRight, CircleCheck, CircleDashed, CircleX, Copy, ExternalLink, FileText, Gauge, GitBranch, Globe, LoaderCircle, MessageCircleQuestion, MoreHorizontal, PanelLeftClose, PanelLeftOpen, Paperclip, Pause, Pencil, Play, RefreshCw, Search, Settings, Shield, ShieldAlert, Sparkles, Square, SquareCheck, SquarePen, SquareTerminal, Target, Trash2, Wrench, X } from "lucide-react";
 import { AGENT_DRIVER_ID, OWNER_DRIVER_ID } from "@robota-sdk/agent-interface-session";
 //#region src/hooks/excluded-commands.ts
 /**
@@ -285,6 +285,8 @@ const SERVER_MESSAGE_HANDLING = {
 	project_status: "reducer-state",
 	project_diff: "reducer-state",
 	project_memory: "reducer-state",
+	app_view: "reducer-state",
+	app_tool_result: "reducer-state",
 	background_task_event: "intentionally-not-rendered",
 	background_job_group_event: "intentionally-not-rendered",
 	plan_event: "intentionally-not-rendered",
@@ -309,10 +311,10 @@ const SERVER_MESSAGE_HANDLING = {
 };
 //#endregion
 //#region src/hooks/use-agent-switcher-state.ts
-let requestCounter$6 = 0;
-function nextRequestId$6(prefix) {
-	requestCounter$6 += 1;
-	return `${prefix}_${requestCounter$6}_${Date.now()}`;
+let requestCounter$7 = 0;
+function nextRequestId$7(prefix) {
+	requestCounter$7 += 1;
+	return `${prefix}_${requestCounter$7}_${Date.now()}`;
 }
 /**
 * #3282 §4 part b-3: the agent switcher sheet's own correlated request/response state, the same
@@ -347,7 +349,7 @@ function useAgentSwitcherState(send) {
 		return true;
 	}, []);
 	const requestAgentDefinitions = useCallback(() => {
-		const requestId = nextRequestId$6("get_agent_definitions");
+		const requestId = nextRequestId$7("get_agent_definitions");
 		listRequestRef.current = requestId;
 		send({
 			type: "get-agent-definitions",
@@ -370,7 +372,7 @@ function useAgentSwitcherState(send) {
 			setAgentSwitcherOpen(false);
 		}, []),
 		selectAgent: useCallback((agentType) => {
-			const requestId = nextRequestId$6("agent_switch");
+			const requestId = nextRequestId$7("agent_switch");
 			switchRequestRef.current = requestId;
 			setAgentSwitchMessage(null);
 			send({
@@ -391,6 +393,126 @@ function useAgentSwitcherState(send) {
 	};
 }
 //#endregion
+//#region src/hooks/use-app-view-requests.ts
+let requestCounter$6 = 0;
+function nextRequestId$6(prefix) {
+	requestCounter$6 += 1;
+	return `${prefix}_${requestCounter$6}_${Date.now()}`;
+}
+const CONNECTION_CLOSED = "The connection to the session closed.";
+/**
+* The key a finished call's app view is read and called by, taken from the tool row's `appView`
+* reference; `undefined` when the row gives none. Everything outside this module treats it as an
+* opaque string — it is read here and put on the two wire messages below, nowhere else.
+*/
+function appViewKey(tool) {
+	return tool.appView?.viewId;
+}
+function readAppViewMessage(requestId, viewKey) {
+	return {
+		type: "read-app-view",
+		requestId,
+		viewId: viewKey
+	};
+}
+function callAppToolMessage(requestId, viewKey, name, args) {
+	return {
+		type: "call-app-tool",
+		requestId,
+		viewId: viewKey,
+		name,
+		arguments: args
+	};
+}
+/**
+* The app-view host's two requests to the session, each a promise settled by the reply that echoes
+* its `requestId` (`app_view` / `app_tool_result`, or a `protocol_error` naming it). Unlike the
+* panels' latest-wins state, several can be outstanding at once (one per frame on screen), so each
+* keeps its own entry. A reply that lost its connection never arrives: the owner of the connection
+* rejects every outstanding request when it drops, is replaced or goes away (`rejectPendingAppRequests`).
+*/
+function useAppViewRequests(send, isConnected) {
+	const pendingRef = useRef(/* @__PURE__ */ new Map());
+	const [requestOwner] = useState(() => nextRequestId$6("app_request"));
+	const rejectPendingAppRequests = useCallback((reason = CONNECTION_CLOSED) => {
+		const pending = [...pendingRef.current.values()];
+		pendingRef.current.clear();
+		for (const request of pending) {
+			request.dispose();
+			request.reject(new Error(reason));
+		}
+	}, []);
+	const request = useCallback((prefix, message, pending, signal) => new Promise((resolve, reject) => {
+		if (!isConnected() || signal?.aborted) {
+			reject(/* @__PURE__ */ new Error(signal?.aborted ? "The app view closed." : CONNECTION_CLOSED));
+			return;
+		}
+		const requestId = nextRequestId$6(`${requestOwner}_${prefix}`);
+		const dispose = () => signal?.removeEventListener("abort", abort);
+		const abort = () => {
+			pendingRef.current.delete(requestId);
+			dispose();
+			reject(/* @__PURE__ */ new Error("The app view closed."));
+		};
+		pendingRef.current.set(requestId, pending(resolve, reject, dispose));
+		signal?.addEventListener("abort", abort, { once: true });
+		try {
+			send(message(requestId));
+		} catch (error) {
+			pendingRef.current.delete(requestId);
+			dispose();
+			reject(error instanceof Error ? error : new Error(String(error)));
+		}
+	}), [
+		isConnected,
+		requestOwner,
+		send
+	]);
+	return {
+		readAppView: useCallback((viewKey, signal) => request("app_view", (requestId) => readAppViewMessage(requestId, viewKey), (resolve, reject, dispose) => ({
+			answer: "app_view",
+			resolve,
+			reject,
+			dispose
+		}), signal), [request]),
+		callAppTool: useCallback((viewKey, name, args, signal) => request("app_tool", (requestId) => callAppToolMessage(requestId, viewKey, name, args), (resolve, reject, dispose) => ({
+			answer: "app_tool_result",
+			resolve,
+			reject,
+			dispose
+		}), signal), [request]),
+		handleAppViewMessage: useCallback((msg) => {
+			if (msg.type === "app_view" || msg.type === "app_tool_result") {
+				const pending = pendingRef.current.get(msg.requestId);
+				if (pending === void 0 || pending.answer !== msg.type) return true;
+				pendingRef.current.delete(msg.requestId);
+				pending.dispose();
+				if (msg.type === "app_view" && pending.answer === "app_view") pending.resolve(msg.view);
+				else if (msg.type === "app_tool_result" && pending.answer === "app_tool_result") {
+					const { success, data, parts, error } = msg;
+					pending.resolve({
+						success,
+						...data !== void 0 ? { data } : {},
+						...parts !== void 0 ? { parts } : {},
+						...error !== void 0 ? { error } : {}
+					});
+				}
+				return true;
+			}
+			if (msg.type === "protocol_error" && msg.requestId !== void 0) {
+				const pending = pendingRef.current.get(msg.requestId);
+				if (pending === void 0) return msg.requestId.startsWith(`${requestOwner}_`);
+				pendingRef.current.delete(msg.requestId);
+				pending.dispose();
+				pending.reject(new Error(msg.message));
+				return true;
+			}
+			return false;
+		}, [requestOwner]),
+		rejectPendingAppRequests
+	};
+}
+//#endregion
 //#region src/hooks/use-execution-detail.ts
 /**
 * #3288 §1: the detail sheet's own correlated request/response state — which entry is open, its
@@ -1075,7 +1197,8 @@ function toolEndFields(state) {
 		...state.diffLines ? { diffLines: state.diffLines } : {},
 		...state.diffFile ? { diffFile: state.diffFile } : {},
 		...state.toolResultData !== void 0 ? { toolResultData: state.toolResultData } : {},
-		...state.toolResultParts ? { toolResultParts: state.toolResultParts } : {}
+		...state.toolResultParts ? { toolResultParts: state.toolResultParts } : {},
+		...state.appView ? { appView: state.appView } : {}
 	};
 }
 /** Apply a `tool_end` to the ONE matching running tool across a turn's segments (never all of them). */
@@ -1173,6 +1296,7 @@ function buildConversationEntriesFromDisplaySegments(displaySegments) {
 }
 function useSessionClient(makeClient) {
 	const [status, setStatus] = useState("disconnected");
+	const statusRef = useRef("disconnected");
 	const [messages, setMessages] = useState([]);
 	const [activeTools, setActiveTools] = useState([]);
 	const [streamingText, setStreamingText] = useState("");
@@ -1297,6 +1421,7 @@ function useSessionClient(makeClient) {
 	const { handleExecutionDetailMessage, closeExecutionDetail, ...executionDetailState } = useExecutionDetailState(send);
 	const { handleModelListMessage, ...modelListState } = useModelListState(send);
 	const { handleProjectMessage, ...projectPanelState } = useProjectPanelState(send);
+	const { handleAppViewMessage, rejectPendingAppRequests, readAppView, callAppTool } = useAppViewRequests(send, useCallback(() => statusRef.current === "connected", []));
 	const { handleSessionsMessage, canListSessions, markCurrent, armRestore, ...sessionDirectoryState } = useSessionDirectoryState(send);
 	const { requestSessions, setSessionSidebarOpen } = sessionDirectoryState;
 	const { handleSettingsMessage, openSettings, refreshSettings, ...settingsState } = useSettingsState(send);
@@ -1310,6 +1435,7 @@ function useSessionClient(makeClient) {
 		if (handleExecutionDetailMessage(msg)) return;
 		if (handleModelListMessage(msg)) return;
 		if (handleProjectMessage(msg)) return;
+		if (handleAppViewMessage(msg)) return;
 		if (handleSessionsMessage(msg)) return;
 		if (handleSettingsMessage(msg)) return;
 		if (handleAgentDefinitionsMessage(msg)) return;
@@ -1446,6 +1572,7 @@ function useSessionClient(makeClient) {
 				requestSessions();
 				break;
 			case "session_switched":
+				rejectPendingAppRequests("The active session changed.");
 				settleSessionChange();
 				sessionStatusRef.current = null;
 				setSessionStatus(null);
@@ -1470,6 +1597,7 @@ function useSessionClient(makeClient) {
 				requestSchedules();
 				break;
 			case "history_cleared":
+				rejectPendingAppRequests("The session history was cleared.");
 				streamingTextRef.current = "";
 				turnSegmentsRef.current = [];
 				setStreamingText("");
@@ -1610,6 +1738,7 @@ function useSessionClient(makeClient) {
 		closeExecutionDetail,
 		finishTurn,
 		handleAgentDefinitionsMessage,
+		handleAppViewMessage,
 		handleExecutionDetailMessage,
 		handleModelListMessage,
 		handleProjectMessage,
@@ -1624,6 +1753,7 @@ function useSessionClient(makeClient) {
 		requestSchedules,
 		requestSessions,
 		resolveSwitchResult,
+		rejectPendingAppRequests,
 		send,
 		setSessionSidebarOpen,
 		settleSessionChange,
@@ -1642,7 +1772,9 @@ function useSessionClient(makeClient) {
 	}, []);
 	useEffect(() => {
 		const onStatusChange = (next) => {
+			statusRef.current = next;
 			setStatus(next);
+			if (next !== "connected") rejectPendingAppRequests();
 			if (next === "connected") {
 				commandsInFlightRef.current = 0;
 				silentCommandRequestIdsRef.current.clear();
@@ -1666,13 +1798,15 @@ function useSessionClient(makeClient) {
 		return () => {
 			client.disconnect();
 			clientRef.current = null;
+			rejectPendingAppRequests();
 		};
 	}, [
 		makeClient,
 		handleMessage,
 		requestSessions,
 		requestSchedules,
-		armRestore
+		armRestore,
+		rejectPendingAppRequests
 	]);
 	return {
 		status,
@@ -1704,6 +1838,8 @@ function useSessionClient(makeClient) {
 		openAgentSwitcher,
 		...agentSwitcherState,
 		...schedulesState,
+		readAppView,
+		callAppTool,
 		helpOpen,
 		openHelp,
 		closeHelp
@@ -1894,6 +2030,338 @@ function driverAttributionText(driverId) {
 	return `from ${humanDriverLabel(driverId)}`;
 }
 //#endregion
+//#region src/app-view/call-tool-result.ts
+function isRecord(value) {
+	return typeof value === "object" && value !== null && !Array.isArray(value);
+}
+function contentFromParts(parts) {
+	const content = [];
+	for (const part of parts ?? []) if (part.type === "text") content.push({
+		type: "text",
+		text: part.text
+	});
+	else if (part.type === "image_inline") content.push({
+		type: "image",
+		data: part.data,
+		mimeType: part.mimeType
+	});
+	else if (part.type === "audio_inline") content.push({
+		type: "audio",
+		data: part.data,
+		mimeType: part.mimeType
+	});
+	return content;
+}
+function outcomeToCallToolResult(outcome) {
+	let content = contentFromParts(outcome.parts);
+	if (content.length === 0 && typeof outcome.data === "string") content = [{
+		type: "text",
+		text: outcome.data
+	}];
+	if (!outcome.success && outcome.error !== void 0) content = [...content, {
+		type: "text",
+		text: outcome.error
+	}];
+	return {
+		content,
+		...isRecord(outcome.data) ? { structuredContent: outcome.data } : {},
+		isError: !outcome.success
+	};
+}
+function toCallToolResult(tool, view) {
+	let content = contentFromParts(tool.toolResultParts);
+	if (content.length === 0 && tool.toolResultData !== void 0) content = [{
+		type: "text",
+		text: tool.toolResultData
+	}];
+	return {
+		content,
+		...isRecord(view.structuredContent) ? { structuredContent: view.structuredContent } : {},
+		isError: tool.status === "error"
+	};
+}
+//#endregion
+//#region src/app-view/bridge.ts
+const APP_VIEW_PROTOCOL_VERSION = "2026-01-26";
+const INVALID_PARAMS = -32602;
+const METHOD_NOT_FOUND = -32601;
+const HOST_ERROR = -32e3;
+const SANDBOX_PROXY_READY = "ui/notifications/sandbox-proxy-ready";
+const SANDBOX_RESOURCE_READY = "ui/notifications/sandbox-resource-ready";
+function isPlainObject(value) {
+	if (typeof value !== "object" || value === null || Array.isArray(value)) return false;
+	const prototype = Object.getPrototypeOf(value);
+	return prototype === null || Object.getPrototypeOf(prototype) === null;
+}
+function errorMessage(error) {
+	return error instanceof Error ? error.message : String(error);
+}
+function createAppViewBridge(options) {
+	const { view } = options;
+	let disposed = false;
+	let sandboxAnswered = false;
+	let initialization = "uninitialized";
+	let callInFlight = false;
+	const respond = (id, result) => {
+		options.post({
+			jsonrpc: "2.0",
+			id,
+			result
+		});
+	};
+	const refuse = (id, code, message) => {
+		options.post({
+			jsonrpc: "2.0",
+			id,
+			error: {
+				code,
+				message
+			}
+		});
+	};
+	const callTool = (id, params) => {
+		if (initialization !== "ready") {
+			refuse(id, HOST_ERROR, "This app view has not initialized.");
+			return;
+		}
+		const name = isPlainObject(params) ? params["name"] : void 0;
+		const runtimeName = typeof name === "string" && Object.hasOwn(view.callableTools, name) ? view.callableTools[name] : void 0;
+		if (!isPlainObject(params) || runtimeName === void 0) {
+			refuse(id, INVALID_PARAMS, "This tool is not available to this view.");
+			return;
+		}
+		const rawArguments = params["arguments"] === void 0 ? {} : params["arguments"];
+		if (!isPlainObject(rawArguments)) {
+			refuse(id, INVALID_PARAMS, "Tool arguments must be an object.");
+			return;
+		}
+		if (callInFlight) {
+			refuse(id, HOST_ERROR, "Another tool call from this view is still running.");
+			return;
+		}
+		callInFlight = true;
+		let outcome;
+		try {
+			outcome = options.callAppTool(runtimeName, rawArguments);
+		} catch (error) {
+			outcome = Promise.reject(error);
+		}
+		outcome.then((settled) => {
+			callInFlight = false;
+			if (!disposed) respond(id, outcomeToCallToolResult(settled));
+		}, (error) => {
+			callInFlight = false;
+			if (!disposed) refuse(id, HOST_ERROR, errorMessage(error));
+		});
+	};
+	const handleRequest = (id, method, params) => {
+		switch (method) {
+			case "ui/initialize":
+				if (initialization === "uninitialized") initialization = "initializing";
+				respond(id, {
+					protocolVersion: APP_VIEW_PROTOCOL_VERSION,
+					hostCapabilities: { serverTools: {} },
+					hostInfo: options.hostInfo,
+					hostContext: options.hostContext
+				});
+				return;
+			case "tools/call":
+				callTool(id, params);
+				return;
+			case "ping":
+				respond(id, {});
+				return;
+			case "ui/request-display-mode":
+				respond(id, { mode: "inline" });
+				return;
+			default: refuse(id, METHOD_NOT_FOUND, `This host does not support ${method}.`);
+		}
+	};
+	const handleNotification = (method, params) => {
+		switch (method) {
+			case SANDBOX_PROXY_READY:
+				if (sandboxAnswered) return;
+				sandboxAnswered = true;
+				options.post({
+					jsonrpc: "2.0",
+					method: SANDBOX_RESOURCE_READY,
+					params: { html: view.html }
+				});
+				return;
+			case "ui/notifications/initialized":
+				if (initialization !== "initializing") return;
+				initialization = "ready";
+				options.post({
+					jsonrpc: "2.0",
+					method: "ui/notifications/tool-input",
+					params: { arguments: view.toolInput ?? {} }
+				});
+				options.post({
+					jsonrpc: "2.0",
+					method: "ui/notifications/tool-result",
+					params: options.toolResult
+				});
+				return;
+			case "ui/notifications/size-changed": {
+				const height = isPlainObject(params) ? params["height"] : void 0;
+				if (typeof height !== "number" || !Number.isFinite(height)) return;
+				options.onHeight(Math.min(640, Math.max(48, Math.round(height))));
+				return;
+			}
+			default: return;
+		}
+	};
+	return {
+		handleMessage(event) {
+			if (disposed) return;
+			const frame = options.source();
+			if (frame === null || event.source !== frame) return;
+			const data = event.data;
+			if (!isPlainObject(data) || data["jsonrpc"] !== "2.0") return;
+			const { method, id } = data;
+			if (typeof method !== "string") return;
+			if (id === void 0) handleNotification(method, data["params"]);
+			else if (typeof id === "string" || typeof id === "number") handleRequest(id, method, data["params"]);
+		},
+		dispose() {
+			if (disposed) return;
+			disposed = true;
+			if (initialization === "ready") options.post({
+				jsonrpc: "2.0",
+				id: "teardown",
+				method: "ui/resource-teardown",
+				params: { reason: "closed" }
+			});
+		}
+	};
+}
+//#endregion
+//#region src/app-view/host-context.ts
+const AppViewHostContext = createContext(null);
+function readAppViewHostContext(platform) {
+	return {
+		theme: typeof window !== "undefined" && typeof window.matchMedia === "function" && window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light",
+		displayMode: "inline",
+		availableDisplayModes: ["inline"],
+		containerDimensions: { maxHeight: 640 },
+		platform,
+		locale: typeof navigator === "undefined" ? "en-US" : navigator.language,
+		timeZone: Intl.DateTimeFormat().resolvedOptions().timeZone
+	};
+}
+//#endregion
+//#region src/components/AppView.tsx
+const INITIAL_HEIGHT_PX = 160;
+const APP_VIEW_UNAVAILABLE_TEXT = "This tool returned an app view, which this window cannot show.";
+function AppView({ tool }) {
+	const host = useContext(AppViewHostContext);
+	if (tool.appView === void 0) return null;
+	const viewKey = appViewKey(tool);
+	if (host === null || host.sandboxUrl === void 0 || viewKey === void 0) return /* @__PURE__ */ jsx("p", {
+		className: "text-[13px] text-subtle",
+		children: APP_VIEW_UNAVAILABLE_TEXT
+	});
+	return /* @__PURE__ */ jsx(AppViewFrame, {
+		tool,
+		host,
+		sandboxUrl: host.sandboxUrl,
+		viewKey,
+		sourceId: tool.appView.sourceId
+	}, viewKey);
+}
+function AppViewFrame({ tool, host, sandboxUrl, viewKey, sourceId }) {
+	const [load, setLoad] = useState({ status: "loading" });
+	const [height, setHeight] = useState(INITIAL_HEIGHT_PX);
+	const frameRef = useRef(null);
+	const toolRef = useRef(tool);
+	toolRef.current = tool;
+	useEffect(() => {
+		const controller = new AbortController();
+		setLoad({ status: "loading" });
+		host.readAppView(viewKey, controller.signal).then((view) => {
+			if (!controller.signal.aborted) setLoad({
+				status: "ready",
+				view,
+				host,
+				sandboxUrl,
+				signal: controller.signal
+			});
+		}, (error) => {
+			if (!controller.signal.aborted) setLoad({
+				status: "failed",
+				reason: error instanceof Error ? error.message : String(error)
+			});
+		});
+		return () => {
+			controller.abort();
+		};
+	}, [
+		viewKey,
+		host.readAppView,
+		host.callAppTool,
+		sandboxUrl
+	]);
+	const ready = load.status === "ready" && load.host.readAppView === host.readAppView && load.host.callAppTool === host.callAppTool && load.sandboxUrl === sandboxUrl ? load : null;
+	useLayoutEffect(() => {
+		const frame = frameRef.current;
+		if (ready === null || frame === null) return void 0;
+		const current = ready.host;
+		const view = ready.view;
+		const bridge = createAppViewBridge({
+			view,
+			toolResult: toCallToolResult(toolRef.current, view),
+			hostInfo: current.hostInfo,
+			hostContext: readAppViewHostContext(current.platform),
+			post: (message) => frame.contentWindow?.postMessage(message, "*"),
+			source: () => frame.contentWindow,
+			callAppTool: (name, args) => current.callAppTool(viewKey, name, args, ready.signal),
+			onHeight: setHeight
+		});
+		const onMessage = (event) => bridge.handleMessage(event);
+		window.addEventListener("message", onMessage);
+		return () => {
+			window.removeEventListener("message", onMessage);
+			bridge.dispose();
+		};
+	}, [ready, viewKey]);
+	if (load.status === "failed") return /* @__PURE__ */ jsxs("p", {
+		className: "text-[13px] text-subtle",
+		children: [
+			"The app from ",
+			sourceId,
+			" could not be shown: ",
+			load.reason
+		]
+	});
+	if (ready === null) return /* @__PURE__ */ jsxs("p", {
+		className: "text-[13px] text-subtle",
+		children: [
+			"Loading the app from ",
+			sourceId,
+			"…"
+		]
+	});
+	return /* @__PURE__ */ jsxs("div", {
+		className: "my-1 flex flex-col gap-1",
+		children: [/* @__PURE__ */ jsxs("p", {
+			className: "text-[12px] text-subtle",
+			children: ["App from ", sourceId]
+		}), /* @__PURE__ */ jsx("iframe", {
+			ref: frameRef,
+			sandbox: "allow-scripts",
+			src: sandboxUrl,
+			title: `App from ${sourceId}`,
+			referrerPolicy: "no-referrer",
+			"data-testid": "app-view-frame",
+			style: {
+				width: "100%",
+				height
+			},
+			className: "block rounded-lg border border-border bg-card"
+		})]
+	});
+}
+//#endregion
 //#region src/components/DiffLines.tsx
 /**
 * #3288: renders a unified diff already built server-side (the ONE diff builder, in
@@ -2407,42 +2875,49 @@ function ToolGroup({ tools }) {
 	if (visible.length === 0) return null;
 	return /* @__PURE__ */ jsxs("div", {
 		className: "text-[14px]",
-		children: [/* @__PURE__ */ jsxs("button", {
-			type: "button",
-			"aria-expanded": open,
-			onClick: () => setOpen((value) => !value),
-			className: "group -mx-2 flex max-w-full items-center gap-2.5 rounded-lg px-2 py-1 text-left text-muted-foreground hover:bg-hover hover:text-foreground",
-			children: [
-				/* @__PURE__ */ jsx(Wrench, {
-					size: 15,
-					strokeWidth: 1.75,
-					className: "flex-shrink-0 text-subtle"
-				}),
-				/* @__PURE__ */ jsxs("span", {
-					className: "flex-shrink-0",
-					children: [
-						visible.length,
-						" tool ",
-						visible.length === 1 ? "call" : "calls"
-					]
-				}),
-				/* @__PURE__ */ jsx("span", {
-					className: "min-w-0 truncate text-subtle",
-					children: names
-				}),
-				failed > 0 && /* @__PURE__ */ jsxs("span", {
-					className: "flex-shrink-0 rounded-md bg-destructive/12 px-1.5 text-[12.5px] text-destructive",
-					children: [failed, " failed"]
-				}),
-				/* @__PURE__ */ jsx(ChevronRight, {
-					size: 14,
-					className: `flex-shrink-0 text-subtle transition-transform ${open ? "rotate-90" : ""}`
-				})
-			]
-		}), open && /* @__PURE__ */ jsx("div", {
-			className: "mt-0.5 flex flex-col pl-[25px]",
-			children: visible.map((tool) => /* @__PURE__ */ jsx(ToolCard, { tool }, tool.id))
-		})]
+		children: [
+			/* @__PURE__ */ jsxs("button", {
+				type: "button",
+				"aria-expanded": open,
+				onClick: () => setOpen((value) => !value),
+				className: "group -mx-2 flex max-w-full items-center gap-2.5 rounded-lg px-2 py-1 text-left text-muted-foreground hover:bg-hover hover:text-foreground",
+				children: [
+					/* @__PURE__ */ jsx(Wrench, {
+						size: 15,
+						strokeWidth: 1.75,
+						className: "flex-shrink-0 text-subtle"
+					}),
+					/* @__PURE__ */ jsxs("span", {
+						className: "flex-shrink-0",
+						children: [
+							visible.length,
+							" tool ",
+							visible.length === 1 ? "call" : "calls"
+						]
+					}),
+					/* @__PURE__ */ jsx("span", {
+						className: "min-w-0 truncate text-subtle",
+						children: names
+					}),
+					failed > 0 && /* @__PURE__ */ jsxs("span", {
+						className: "flex-shrink-0 rounded-md bg-destructive/12 px-1.5 text-[12.5px] text-destructive",
+						children: [failed, " failed"]
+					}),
+					/* @__PURE__ */ jsx(ChevronRight, {
+						size: 14,
+						className: `flex-shrink-0 text-subtle transition-transform ${open ? "rotate-90" : ""}`
+					})
+				]
+			}),
+			visible.filter((tool) => tool.appView !== void 0).map((tool) => /* @__PURE__ */ jsx("div", {
+				className: "pl-[25px]",
+				children: /* @__PURE__ */ jsx(AppView, { tool })
+			}, tool.id)),
+			open && /* @__PURE__ */ jsx("div", {
+				className: "mt-0.5 flex flex-col pl-[25px]",
+				children: visible.map((tool) => /* @__PURE__ */ jsx(ToolCard, { tool }, tool.id))
+			})
+		]
 	});
 }
 /** #3288: a turn that changed files ends with this compact row — a click opens that file's diff. */
@@ -2568,7 +3043,10 @@ function ConversationView({ messages, activeTools, streamingText, isThinking, ow
 					isThinking && !streamingText && /* @__PURE__ */ jsx(ThinkingIndicator, {}),
 					activeTools.some((tool) => !tool.internal) && /* @__PURE__ */ jsx("div", {
 						className: "flex flex-col",
-						children: activeTools.filter((tool) => !tool.internal).map((tool) => /* @__PURE__ */ jsx(ToolCard, { tool }, tool.id))
+						children: activeTools.filter((tool) => !tool.internal).map((tool) => /* @__PURE__ */ jsxs(React.Fragment, { children: [/* @__PURE__ */ jsx(ToolCard, { tool }), tool.appView !== void 0 && tool.status !== "running" && /* @__PURE__ */ jsx("div", {
+							className: "pl-[25px]",
+							children: /* @__PURE__ */ jsx(AppView, { tool })
+						})] }, tool.id))
 					}),
 					streamingText && /* @__PURE__ */ jsx(AgentBlock, {
 						content: streamingText,
@@ -3211,6 +3689,26 @@ function isEditableElement(element) {
 function isDestructiveAskOption(requestId, value) {
 	return requestId === "provider-profile-action" && value === "delete";
 }
+/**
+* The multi-select shape of an ask, or undefined for every other ask (which answers on click). The
+* rules mirror the terminal checklist (`MultiSelectList` in agent-ui-terminal): `minSelect` (default 1)
+* gates the submit, and `maxSelect` caps the ticks — a toggle beyond the cap is ignored, never swapped
+* for the oldest tick. `default.values` pre-select; a default that names no option is dropped, and
+* more defaults than the cap keep the first ones in option order, so the answer never breaks the cap.
+*/
+function readMultiSelect(request) {
+	const max = request.maxSelect ?? 1;
+	if (max <= 1) return void 0;
+	const options = (request.options ?? []).filter((opt) => !isDestructiveAskOption(request.id, opt.value));
+	const wanted = new Set(request.default?.values ?? []);
+	const defaults = options.filter((opt) => wanted.has(opt.value)).slice(0, max);
+	return {
+		min: request.minSelect ?? 1,
+		max,
+		options,
+		defaults: new Set(defaults.map((opt) => opt.value))
+	};
+}
 function PermissionPrompt({ prompts, onAnswerPermission, onAnswerAsk, ownDriverId = null, layout = "modal", armDelayMs = 450, onFocusReturn }) {
 	const prompt = prompts[0];
 	const promptId = prompt?.id;
@@ -3222,6 +3720,7 @@ function PermissionPrompt({ prompts, onAnswerPermission, onAnswerAsk, ownDriverI
 	const [fieldFocused, setFieldFocused] = useState(false);
 	const fieldHandleRef = useRef(null);
 	const pendingFocusReturnRef = useRef(false);
+	const [selection, setSelection] = useState(void 0);
 	useEffect(() => {
 		if (promptId === void 0 || armDelayMs <= 0) return void 0;
 		const timer = setTimeout(() => setArmedId(promptId), armDelayMs);
@@ -3286,6 +3785,28 @@ function PermissionPrompt({ prompts, onAnswerPermission, onAnswerAsk, ownDriverI
 		fieldHandleRef.current?.clear();
 		onAnswerAsk(id, response);
 	};
+	const multi = prompt.kind === "ask" ? readMultiSelect(prompt.request) : void 0;
+	const ticks = selection?.promptId === prompt.id ? selection.values : multi?.defaults;
+	const selectedValues = multi && ticks ? multi.options.map((opt) => opt.value).filter((value) => ticks.has(value)) : [];
+	const canSubmit = multi !== void 0 && selectedValues.length >= multi.min;
+	const toggleOption = (value) => {
+		if (!multi) return;
+		setSelection((current) => {
+			const next = new Set(current?.promptId === prompt.id ? current.values : multi.defaults);
+			if (next.has(value)) next.delete(value);
+			else if (next.size < multi.max) next.add(value);
+			return {
+				promptId: prompt.id,
+				values: next
+			};
+		});
+	};
+	const submitSelection = () => {
+		if (canSubmit) answerAsk(prompt.id, {
+			type: "answer",
+			values: selectedValues
+		});
+	};
 	/** A click anywhere in the prompt that isn't on a button or the field itself focuses the field. */
 	const onContainerClick = (event) => {
 		if (!hasFreeText) return;
@@ -3305,6 +3826,13 @@ function PermissionPrompt({ prompts, onAnswerPermission, onAnswerAsk, ownDriverI
 			return;
 		}
 		if (!armed) return;
+		if (multi && event.key === "Enter") {
+			if (event.target === event.currentTarget) {
+				event.preventDefault();
+				submitSelection();
+			}
+			return;
+		}
 		const index = Number(event.key) - 1;
 		if (!Number.isInteger(index) || index < 0) return;
 		if (prompt.kind === "permission") {
@@ -3312,7 +3840,9 @@ function PermissionPrompt({ prompts, onAnswerPermission, onAnswerAsk, ownDriverI
 			return;
 		}
 		const option = (prompt.request.options ?? []).filter((opt) => !isDestructiveAskOption(prompt.request.id, opt.value))[index];
-		if (option) answerAsk(prompt.id, {
+		if (!option) return;
+		if (multi) toggleOption(option.value);
+		else answerAsk(prompt.id, {
 			type: "answer",
 			values: [option.value]
 		});
@@ -3324,7 +3854,7 @@ function PermissionPrompt({ prompts, onAnswerPermission, onAnswerAsk, ownDriverI
 	const askOptions = prompt.kind === "ask" ? prompt.request.options ?? [] : [];
 	const destructiveAskOption = askOptions.find((opt) => isDestructiveAskOption(askRequestId, opt.value));
 	const primaryAskOptions = destructiveAskOption ? askOptions.filter((opt) => opt !== destructiveAskOption) : askOptions;
-	const askArmedHint = hasFreeText && fieldFocused ? "Enter to submit · Esc to cancel" : askOptions.length > 0 ? "1–9 choose · Esc cancel" : "Esc cancels";
+	const askArmedHint = hasFreeText && fieldFocused ? "Enter to submit · Esc to cancel" : multi && askOptions.length > 0 ? "1–9 toggle · Enter submit · Esc cancel" : askOptions.length > 0 ? "1–9 choose · Esc cancel" : "Esc cancels";
 	return /* @__PURE__ */ jsx("div", {
 		className: dock ? "agent-ui gui-rise flex-shrink-0" : "agent-ui fixed inset-0 z-50 flex items-center justify-center bg-black/55 p-4 backdrop-blur-[2px]",
 		children: /* @__PURE__ */ jsx("div", {
@@ -3476,12 +4006,23 @@ function PermissionPrompt({ prompts, onAnswerPermission, onAnswerAsk, ownDriverI
 							children: [/* @__PURE__ */ jsxs("button", {
 								type: "button",
 								"aria-keyshortcuts": dock && index < 9 ? String(index + 1) : void 0,
-								className: index === 0 ? PRIMARY_BUTTON$1 : SECONDARY_BUTTON$1,
-								onClick: onButton(() => answerAsk(prompt.id, {
+								"aria-pressed": multi ? selectedValues.includes(opt.value) : void 0,
+								className: (multi ? selectedValues.includes(opt.value) : index === 0) ? PRIMARY_BUTTON$1 : SECONDARY_BUTTON$1,
+								onClick: onButton(() => multi ? toggleOption(opt.value) : answerAsk(prompt.id, {
 									type: "answer",
 									values: [opt.value]
 								})),
-								children: [/* @__PURE__ */ jsx("span", { children: opt.label }), dock && index < 9 && /* @__PURE__ */ jsx(Kbd, { children: index + 1 })]
+								children: [
+									multi && (selectedValues.includes(opt.value) ? /* @__PURE__ */ jsx(SquareCheck, {
+										size: 15,
+										strokeWidth: 2
+									}) : /* @__PURE__ */ jsx(Square, {
+										size: 15,
+										strokeWidth: 2
+									})),
+									/* @__PURE__ */ jsx("span", { children: opt.label }),
+									dock && index < 9 && /* @__PURE__ */ jsx(Kbd, { children: index + 1 })
+								]
 							}), opt.description && /* @__PURE__ */ jsx("p", {
 								className: "pl-0.5 text-[11.5px] leading-snug text-subtle",
 								children: opt.description
@@ -3523,16 +4064,26 @@ function PermissionPrompt({ prompts, onAnswerPermission, onAnswerAsk, ownDriverI
 					}),
 					/* @__PURE__ */ jsxs("div", {
 						className: "flex flex-wrap items-center gap-2",
-						children: [/* @__PURE__ */ jsx("button", {
-							type: "button",
-							className: GHOST_BUTTON,
-							onClick: onButton(() => answerAsk(prompt.id, { type: "cancelled" })),
-							children: "Cancel"
-						}), dock && /* @__PURE__ */ jsx(KeyHint, {
-							hasFocus,
-							armed,
-							armedText: askArmedHint
-						})]
+						children: [
+							multi && /* @__PURE__ */ jsx("button", {
+								type: "button",
+								className: `${PRIMARY_BUTTON$1} disabled:opacity-60`,
+								disabled: !canSubmit,
+								onClick: onButton(submitSelection),
+								children: canSubmit ? "Submit" : `Submit (min ${multi.min})`
+							}),
+							/* @__PURE__ */ jsx("button", {
+								type: "button",
+								className: GHOST_BUTTON,
+								onClick: onButton(() => answerAsk(prompt.id, { type: "cancelled" })),
+								children: "Cancel"
+							}),
+							dock && /* @__PURE__ */ jsx(KeyHint, {
+								hasFocus,
+								armed,
+								armedText: askArmedHint
+							})
+						]
 					})
 				]
 			})] })
@@ -7435,6 +7986,7 @@ const NARROW_WINDOW_QUERY = "(max-width: 767.98px)";
 */
 /** The column every part of the conversation shares, so messages, prompt and composer line up. */
 const COLUMN = "mx-auto w-full max-w-[760px] px-6";
+const APP_VIEW_HOST_VERSION = "1.0.0";
 /**
 * Designed empty state shown before the first turn. Renders in the same slot as `ConversationView`
 * (never together), so it carries the same `main` landmark and label (#3289 §3 review) — nothing
@@ -7501,8 +8053,25 @@ function SetupPanel({ onSetUp, disabled }) {
 * The full desktop layout over an `IWsSessionState`. `surface` is an optional label shown next to the
 * mark (e.g. "app").
 */
-function SessionSurface({ state, surface, personalUsageEnabled = false, onReconnect, pickFiles, getPathForFile, onOpenMemoryInEditor }) {
+function SessionSurface({ state, surface, personalUsageEnabled = false, onReconnect, pickFiles, getPathForFile, onOpenMemoryInEditor, appViewSandboxUrl }) {
 	const [view, setView] = useState("chat");
+	const { identity } = useProductIdentity();
+	const appViewHost = useMemo(() => ({
+		...appViewSandboxUrl !== void 0 ? { sandboxUrl: appViewSandboxUrl } : {},
+		readAppView: state.readAppView,
+		callAppTool: state.callAppTool,
+		hostInfo: {
+			name: identity.displayName,
+			version: APP_VIEW_HOST_VERSION
+		},
+		platform: surface === "app" ? "desktop" : "web"
+	}), [
+		appViewSandboxUrl,
+		state.readAppView,
+		state.callAppTool,
+		identity.displayName,
+		surface
+	]);
 	const composerRef = useRef(null);
 	const tasks = state.executionWorkspace?.entries ?? [];
 	const hasTasks = tasks.some((entry) => entry.kind !== "main_thread");
@@ -7631,12 +8200,15 @@ function SessionSurface({ state, surface, personalUsageEnabled = false, onReconn
 											args: "add"
 										}),
 										disabled: state.status !== "connected"
-									}) : isEmpty ? /* @__PURE__ */ jsx(EmptyState, {}) : /* @__PURE__ */ jsx(ConversationView, {
-										messages: state.messages,
-										activeTools: state.activeTools,
-										streamingText: state.streamingText,
-										isThinking: state.isThinking,
-										ownDriverId: state.ownDriverId
+									}) : isEmpty ? /* @__PURE__ */ jsx(EmptyState, {}) : /* @__PURE__ */ jsx(AppViewHostContext.Provider, {
+										value: appViewHost,
+										children: /* @__PURE__ */ jsx(ConversationView, {
+											messages: state.messages,
+											activeTools: state.activeTools,
+											streamingText: state.streamingText,
+											isThinking: state.isThinking,
+											ownDriverId: state.ownDriverId
+										})
 									})
 								}),
 								/* @__PURE__ */ jsxs("div", {