@robota-sdk/agent-ui-web 3.0.0-beta.95 → 3.0.0-beta.99

package/dist/browser/index.js

@@ -1,4 +1,4 @@
-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";
@@ -256,8 +256,8 @@ const SERVER_MESSAGE_HANDLING = {
 	command_result: "reducer-state",
 	messages: "reducer-state",
 	history: "intentionally-not-rendered",
-	history_changed: "intentionally-not-rendered",
-	context: "intentionally-not-rendered",
+	history_changed: "visible-notice",
+	context: "reducer-state",
 	turn_source: "intentionally-not-rendered",
 	commands: "reducer-state",
 	session_status: "reducer-state",
@@ -285,8 +285,8 @@ const SERVER_MESSAGE_HANDLING = {
 	project_status: "reducer-state",
 	project_diff: "reducer-state",
 	project_memory: "reducer-state",
-	app_view: "intentionally-not-rendered",
-	app_tool_result: "intentionally-not-rendered",
+	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",
@@ -311,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
@@ -349,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",
@@ -372,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({
@@ -393,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
@@ -1077,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). */
@@ -1175,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("");
@@ -1299,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);
@@ -1306,12 +1429,16 @@ function useSessionClient(makeClient) {
 	settingsOpenRef.current = settingsState.settingsOpen;
 	const { handleAgentDefinitionsMessage, resolveSwitchResult, openAgentSwitcher, ...agentSwitcherState } = useAgentSwitcherState(send);
 	const { handleSchedulesMessage, requestSchedules, ...schedulesState } = useSchedulesState(send);
+	const clearCompactionNotices = useCallback(() => {
+		setSessionNotices((previous) => previous.filter((notice) => notice.kind !== "context-compacted"));
+	}, []);
 	const handleMessage = useCallback((msg) => {
 		SERVER_MESSAGE_HANDLING[msg.type];
 		if (handleUsageMessage(msg)) return;
 		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;
@@ -1448,9 +1575,11 @@ function useSessionClient(makeClient) {
 				requestSessions();
 				break;
 			case "session_switched":
+				rejectPendingAppRequests("The active session changed.");
 				settleSessionChange();
 				sessionStatusRef.current = null;
 				setSessionStatus(null);
+				clearCompactionNotices();
 				streamingTextRef.current = "";
 				turnSegmentsRef.current = [];
 				setStreamingText("");
@@ -1472,6 +1601,8 @@ function useSessionClient(makeClient) {
 				requestSchedules();
 				break;
 			case "history_cleared":
+				clearCompactionNotices();
+				rejectPendingAppRequests("The session history was cleared.");
 				streamingTextRef.current = "";
 				turnSegmentsRef.current = [];
 				setStreamingText("");
@@ -1557,6 +1688,25 @@ function useSessionClient(makeClient) {
 				setCommandCatalog(catalog);
 				break;
 			}
+			case "context":
+				if (sessionStatusRef.current !== null) {
+					const next = {
+						...sessionStatusRef.current,
+						context: msg.state
+					};
+					sessionStatusRef.current = next;
+					setSessionStatus(next);
+				}
+				break;
+			case "history_changed": {
+				const compact = msg.compact;
+				if (compact?.trigger === "auto") setSessionNotices((previous) => [...previous, {
+					id: nextId(),
+					kind: "context-compacted",
+					message: `Auto compacted context: ${Math.round(compact.beforeUsedPercentage)}% → ${Math.round(compact.afterUsedPercentage)}%`
+				}]);
+				break;
+			}
 			case "session_status":
 				sessionStatusRef.current = msg.status;
 				setSessionStatus(msg.status);
@@ -1610,8 +1760,10 @@ function useSessionClient(makeClient) {
 		appendEntry,
 		canListSessions,
 		closeExecutionDetail,
+		clearCompactionNotices,
 		finishTurn,
 		handleAgentDefinitionsMessage,
+		handleAppViewMessage,
 		handleExecutionDetailMessage,
 		handleModelListMessage,
 		handleProjectMessage,
@@ -1626,6 +1778,7 @@ function useSessionClient(makeClient) {
 		requestSchedules,
 		requestSessions,
 		resolveSwitchResult,
+		rejectPendingAppRequests,
 		send,
 		setSessionSidebarOpen,
 		settleSessionChange,
@@ -1644,7 +1797,12 @@ function useSessionClient(makeClient) {
 	}, []);
 	useEffect(() => {
 		const onStatusChange = (next) => {
+			statusRef.current = next;
 			setStatus(next);
+			if (next !== "connected") {
+				rejectPendingAppRequests();
+				clearCompactionNotices();
+			}
 			if (next === "connected") {
 				commandsInFlightRef.current = 0;
 				silentCommandRequestIdsRef.current.clear();
@@ -1668,13 +1826,16 @@ function useSessionClient(makeClient) {
 		return () => {
 			client.disconnect();
 			clientRef.current = null;
+			rejectPendingAppRequests();
 		};
 	}, [
 		makeClient,
 		handleMessage,
+		clearCompactionNotices,
 		requestSessions,
 		requestSchedules,
-		armRestore
+		armRestore,
+		rejectPendingAppRequests
 	]);
 	return {
 		status,
@@ -1706,6 +1867,8 @@ function useSessionClient(makeClient) {
 		openAgentSwitcher,
 		...agentSwitcherState,
 		...schedulesState,
+		readAppView,
+		callAppTool,
 		helpOpen,
 		openHelp,
 		closeHelp
@@ -1896,6 +2059,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
@@ -2409,42 +2904,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. */
@@ -2570,7 +3072,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,
@@ -6438,7 +6943,7 @@ function noticeSentence(notice) {
 	}
 }
 /**
-* Session and protocol failures, as dismissible toasts over the top-right corner: they stay until
+* Session outcomes and protocol failures, as dismissible toasts over the top-right corner: they stay until
 * dismissed, and never push the conversation or the composer out of view. Command output is not
 * here — it belongs to the conversation. A provider error classified at the wire boundary shows one
 * plain sentence with the next step; its raw text sits behind "Details" rather than as the headline.
@@ -6450,11 +6955,12 @@ function SessionNotices({ state }) {
 		className: "pointer-events-none absolute right-4 top-16 z-40 flex w-[min(400px,calc(100%-32px))] flex-col gap-2",
 		children: notices.slice(-3).map((notice) => {
 			const sentence = noticeSentence(notice);
+			const compacted = notice.kind === "context-compacted";
 			return /* @__PURE__ */ jsxs("div", {
-				role: "alert",
+				role: compacted ? "status" : "alert",
 				className: "gui-rise pointer-events-auto flex items-start gap-3 rounded-xl bg-popover px-4 py-3 text-[14px] leading-snug text-popover-foreground shadow-xl shadow-black/30",
 				children: [
-					/* @__PURE__ */ jsx("span", { className: "mt-[7px] h-2 w-2 flex-shrink-0 rounded-full bg-destructive" }),
+					/* @__PURE__ */ jsx("span", { className: `mt-[7px] h-2 w-2 flex-shrink-0 rounded-full ${compacted ? "bg-primary" : "bg-destructive"}` }),
 					/* @__PURE__ */ jsxs("span", {
 						className: "max-h-40 flex-1 overflow-y-auto whitespace-pre-wrap break-words",
 						children: [sentence ?? notice.message, sentence && /* @__PURE__ */ jsxs("details", {
@@ -7510,6 +8016,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
@@ -7576,8 +8083,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");
@@ -7706,12 +8230,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", {