@agimon-ai/po-computer-use 0.0.0-alpha.73 → 0.0.0-alpha.75

package/dist/extensions/native.mjs

@@ -1,7 +1,7 @@
-import { createApiClient, defineActivityGroup, defineChannelFile, defineFill, defineNativePlugin, defineSessionStore, nativeApiTransport, sessionApiAddress } from "@agimon-ai/po-core/native";
+import { createApiClient, defineActivityGroup, defineChannelFile, defineFill, defineNativePlugin, defineSessionStore, defineToolRenderer, nativeApiTransport, sessionApiAddress } from "@agimon-ai/po-core/native";
 import { View } from "react-native-unistyles/components/native/View";
 import { Text } from "react-native-unistyles/components/native/Text";
-import { Button, CheckIcon, Dialog, DialogBody, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger, SegmentedControl, fontOf } from "@agimon-ai/po-native-components";
+import { Badge, Button, CheckIcon, Dialog, DialogBody, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger, MessageItem, MessageItemBody, MessageItemHeader, MessageItemStatus, SegmentedControl, fontOf, toolTone } from "@agimon-ai/po-native-components";
 import { useCallback, useEffect, useRef, useState, useSyncExternalStore } from "react";
 import { StyleSheet } from "react-native-unistyles";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
@@ -204,7 +204,7 @@ createApiClient(routes, {
 });
 //#endregion
 //#region src/extensions/workspaces/sessions/(frontend)/fill/_components/ComputerUsePanel.native.tsx
-function text(value, fallback) {
+function text$1(value, fallback) {
 	return typeof value === "string" || typeof value === "number" ? String(value) : fallback;
 }
 function remaining(ms) {
@@ -222,7 +222,7 @@ function ComputerUseView({ state, targets = [], busy = false, error, submitting
 		label: "Whole desktop",
 		target: { scope: "desktop" }
 	}, ...targets.map((target) => ({
-		label: `${text(target.applicationName, "Application")}: ${text(target.windowTitle, text(target.windowId, "Window"))}`,
+		label: `${text$1(target.applicationName, "Application")}: ${text$1(target.windowTitle, text$1(target.windowId, "Window"))}`,
 		target
 	}))];
 	const chosen = choices[selected] ?? choices[0];
@@ -240,41 +240,41 @@ function ComputerUseView({ state, targets = [], busy = false, error, submitting
 	const total = state.durationMs ?? 3e5;
 	const controlled = state.target?.scope === "desktop" ? "your whole desktop" : typeof state.target?.applicationName === "string" ? state.target.applicationName : "the chosen window";
 	return /* @__PURE__ */ jsxs(View, {
-		style: styles.panel,
+		style: styles$4.panel,
 		children: [
 			/* @__PURE__ */ jsx(Text, {
-				style: styles.title,
+				style: styles$4.title,
 				accessibilityRole: "header",
 				children: "Computer use"
 			}),
 			busy ? /* @__PURE__ */ jsx(Text, {
-				style: styles.detail,
+				style: styles$4.detail,
 				children: "Computer use is busy in another session."
 			}) : null,
 			failure ? /* @__PURE__ */ jsx(Text, {
-				style: styles.error,
+				style: styles$4.error,
 				accessibilityRole: "alert",
 				children: failure
 			}) : null,
 			state.artifact?.status === "ready" ? /* @__PURE__ */ jsxs(View, {
-				style: styles.row,
+				style: styles$4.row,
 				children: [/* @__PURE__ */ jsx(View, {
-					style: styles.check,
+					style: styles$4.check,
 					children: /* @__PURE__ */ jsx(CheckIcon, {
 						size: 12,
 						color: "rail"
 					})
 				}), /* @__PURE__ */ jsx(Text, {
-					style: styles.text,
+					style: styles$4.text,
 					children: "Recording saved to session artifacts."
 				})]
 			}) : null,
 			state.artifact?.failure ? /* @__PURE__ */ jsx(Text, {
-				style: styles.error,
+				style: styles$4.error,
 				children: state.artifact.failure.message
 			}) : null,
 			pending ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Text, {
-				style: styles.text,
+				style: styles$4.text,
 				children: "Desktop activation is pending."
 			}), /* @__PURE__ */ jsx(Button, {
 				variant: "outline",
@@ -283,17 +283,17 @@ function ComputerUseView({ state, targets = [], busy = false, error, submitting
 				children: "Cancel activation"
 			})] }) : active ? /* @__PURE__ */ jsxs(Fragment, { children: [
 				/* @__PURE__ */ jsxs(View, {
-					style: styles.row,
+					style: styles$4.row,
 					accessibilityLiveRegion: "polite",
-					children: [/* @__PURE__ */ jsx(View, { style: styles.dot }), /* @__PURE__ */ jsx(Text, {
-						style: styles.live,
+					children: [/* @__PURE__ */ jsx(View, { style: styles$4.dot }), /* @__PURE__ */ jsx(Text, {
+						style: styles$4.live,
 						children: state.phase === "stopping" ? "Po is handing control back" : `Po is controlling ${controlled}`
 					})]
 				}),
 				left === void 0 ? null : /* @__PURE__ */ jsxs(View, {
-					style: styles.row,
+					style: styles$4.row,
 					children: [/* @__PURE__ */ jsx(View, {
-						style: styles.track,
+						style: styles$4.track,
 						accessibilityRole: "progressbar",
 						accessibilityLabel: "Time left",
 						accessibilityValue: {
@@ -301,9 +301,9 @@ function ComputerUseView({ state, targets = [], busy = false, error, submitting
 							max: total,
 							now: Math.max(0, left)
 						},
-						children: /* @__PURE__ */ jsx(View, { style: [styles.fill, { width: `${Math.min(100, Math.max(0, left / total * 100))}%` }] })
+						children: /* @__PURE__ */ jsx(View, { style: [styles$4.fill, { width: `${Math.min(100, Math.max(0, left / total * 100))}%` }] })
 					}), /* @__PURE__ */ jsx(Text, {
-						style: styles.detail,
+						style: styles$4.detail,
 						children: remaining(left)
 					})]
 				}),
@@ -315,7 +315,7 @@ function ComputerUseView({ state, targets = [], busy = false, error, submitting
 				})
 			] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
 				/* @__PURE__ */ jsx(Text, {
-					style: styles.detail,
+					style: styles$4.detail,
 					children: "Po asks before it takes control. You can stop at any time."
 				}),
 				/* @__PURE__ */ jsxs(DropdownMenu, { children: [/* @__PURE__ */ jsx(DropdownMenuTrigger, {
@@ -442,7 +442,7 @@ function SessionPanel({ sessionId, sendSessionFrame }) {
 }
 function ComputerUsePanel(props) {
 	return props.sessionId === null ? /* @__PURE__ */ jsx(Text, {
-		style: styles.detail,
+		style: styles$4.detail,
 		children: "Select a session."
 	}) : /* @__PURE__ */ jsx(SessionPanel, {
 		...props,
@@ -461,9 +461,9 @@ function ComputerUseConfirmation({ target, durationMs, onConfirm, onCancel }) {
 			desktop ? "your whole desktop" : "this window",
 			"?"
 		] }) }), /* @__PURE__ */ jsxs(DialogBody, { children: [
-			/* @__PURE__ */ jsx(DialogDescription, { children: desktop ? "Every app window on the main display, except Po and system security windows." : `${text(target.applicationName, "Application")}: ${text(target.windowTitle, text(target.windowId, "Window"))}` }),
+			/* @__PURE__ */ jsx(DialogDescription, { children: desktop ? "Every app window on the main display, except Po and system security windows." : `${text$1(target.applicationName, "Application")}: ${text$1(target.windowTitle, text$1(target.windowId, "Window"))}` }),
 			/* @__PURE__ */ jsxs(Text, {
-				style: styles.text,
+				style: styles$4.text,
 				children: [
 					"For ",
 					durationMs / 6e4,
@@ -471,7 +471,7 @@ function ComputerUseConfirmation({ target, durationMs, onConfirm, onCancel }) {
 				]
 			}),
 			/* @__PURE__ */ jsxs(Text, {
-				style: styles.detail,
+				style: styles$4.detail,
 				children: [
 					"Po records ",
 					desktop ? "the main display" : "this window",
@@ -479,7 +479,7 @@ function ComputerUseConfirmation({ target, durationMs, onConfirm, onCancel }) {
 				]
 			}),
 			/* @__PURE__ */ jsx(Text, {
-				style: styles.detail,
+				style: styles$4.detail,
 				children: "Only this session and its approved device receive control."
 			}),
 			/* @__PURE__ */ jsxs(DialogFooter, { children: [/* @__PURE__ */ jsx(Button, {
@@ -494,7 +494,7 @@ function ComputerUseConfirmation({ target, durationMs, onConfirm, onCancel }) {
 		] })] })
 	});
 }
-const styles = StyleSheet.create((theme) => ({
+const styles$4 = StyleSheet.create((theme) => ({
 	panel: {
 		gap: theme.spacing(3),
 		uni__dependencies: [0]
@@ -581,6 +581,740 @@ var ComputerUse_activity_computer_use_native_default = defineFill({
 	slot: "activity.computer-use",
 	component: ComputerUsePanel
 });
+const MS_PER_SECOND = 1e3;
+/** The computer_state call's summary: it always observes the one authorized window. */
+function computerStateCallSummary(_args) {
+	return "authorized window";
+}
+/**
+* The computer_action call as its two pieces: the action kind first, the element
+* it targets second. Either may be missing; the empty ones are dropped.
+*/
+function computerActionCallParts(args) {
+	return [typeof args.kind === "string" ? args.kind : "", typeof args.elementRef === "string" ? args.elementRef : ""].filter(Boolean);
+}
+/** The computer_exec call's summary: the script it ran. */
+function computerExecCallSummary(args) {
+	return typeof args.scriptPath === "string" ? args.scriptPath : "";
+}
+/**
+* The script path as its folder and its file name, so a phone header can let the
+* folder truncate while the script name stays whole.
+*/
+function computerExecPathParts(path) {
+	const cut = path.lastIndexOf("/");
+	return cut < 0 ? {
+		folder: "",
+		name: path
+	} : {
+		folder: path.slice(0, cut + 1),
+		name: path.slice(cut + 1)
+	};
+}
+function record(value) {
+	return typeof value === "object" && value !== null && !Array.isArray(value) ? value : void 0;
+}
+const text = (value) => typeof value === "string" ? value : "";
+const count = (value) => typeof value === "number" && Number.isFinite(value) && value >= 0 ? value : void 0;
+/** The result's text blocks joined; images (the screenshot) are dropped, as the web cards drop them. */
+function computerResultText(content) {
+	return content.flatMap((block) => {
+		const entry = record(block);
+		return entry?.type === "text" && typeof entry.text === "string" ? [entry.text] : [];
+	}).join("\n");
+}
+/** `AXTextField` as `text field`; a role without the AX prefix is kept as it came. */
+function computerRoleWords(role) {
+	if (!role.startsWith("AX")) return role;
+	return role.slice(2).replace(/([a-z])([A-Z])/gu, "$1 $2").toLowerCase();
+}
+function element(value) {
+	const entry = record(value);
+	if (entry === void 0 || typeof entry.ref !== "string") return [];
+	return [{
+		ref: entry.ref,
+		role: computerRoleWords(text(entry.role)),
+		label: text(entry.label) || text(entry.value),
+		enabled: entry.enabled !== false,
+		secure: entry.secure === true
+	}];
+}
+/** An observation when the value is one: an application name and an element list. */
+function computerObservationView(value) {
+	const entry = record(value);
+	if (entry === void 0 || typeof entry.applicationName !== "string" || !Array.isArray(entry.elements)) return void 0;
+	const nextOffset = count(entry.nextOffset);
+	const artifact = text(entry.screenshotArtifact);
+	return {
+		applicationName: entry.applicationName,
+		windowTitle: text(entry.windowTitle),
+		elements: entry.elements.flatMap(element),
+		truncated: entry.truncated === true || nextOffset !== void 0,
+		...nextOffset === void 0 ? {} : { nextOffset },
+		...artifact.length > 0 ? { screenshotArtifact: artifact } : {}
+	};
+}
+/** One value of a script result as a short phrase: scalars as they read, collections by their size. */
+function phrase(value) {
+	if (value === null || value === void 0) return "none";
+	if (typeof value === "string") return value;
+	if (typeof value === "number" || typeof value === "boolean") return String(value);
+	if (Array.isArray(value)) return `${String(value.length)} item${value.length === 1 ? "" : "s"}`;
+	const size = Object.keys(value).length;
+	return `${String(size)} field${size === 1 ? "" : "s"}`;
+}
+/** A script's return value as fields: an object's own keys, or one `result` field for anything else. */
+function computerResultFields(value) {
+	if (value === void 0) return [];
+	const entry = record(value);
+	if (entry === void 0) return [{
+		key: "result",
+		value: phrase(value)
+	}];
+	return Object.entries(entry).map(([key, field]) => ({
+		key,
+		value: phrase(field)
+	}));
+}
+function run(entry) {
+	if (!Array.isArray(entry.logs)) return void 0;
+	const observation = computerObservationView(entry.observation);
+	const metrics = record(entry.metrics);
+	const actions = count(metrics?.actions);
+	const observations = count(metrics?.observations);
+	const durationMs = count(metrics?.durationMs);
+	return {
+		fields: computerResultFields(entry.result),
+		logs: entry.logs.filter((line) => typeof line === "string"),
+		...actions === void 0 ? {} : { actions },
+		...observations === void 0 ? {} : { observations },
+		...durationMs === void 0 ? {} : { duration: `${(durationMs / MS_PER_SECOND).toFixed(1)}s` },
+		...observation === void 0 ? {} : { observation }
+	};
+}
+function failure(entry) {
+	if (typeof entry.error !== "string") return void 0;
+	const completedActions = count(entry.completedActions);
+	return {
+		reason: entry.error,
+		...completedActions === void 0 ? {} : { completedActions },
+		outcomeUncertain: entry.outcomeUncertain === true
+	};
+}
+/** The text as lines a card can count: CRLF folded, tabs widened, trailing blank lines dropped. */
+function lines(value) {
+	if (value.length === 0) return [];
+	const split = value.replaceAll("\r\n", "\n").replaceAll("	", "  ").split("\n");
+	while (split.length > 0 && split.at(-1)?.trim() === "") split.pop();
+	return split;
+}
+/**
+* A computer tool result as the card lays it out. The tools answer in JSON (an
+* observation, an action's outcome, a script run, a script failure) or in a
+* plain sentence when they fail early; anything that does not parse as a shape
+* the card knows falls back to its text lines.
+*/
+function computerResultView(content) {
+	const raw = computerResultText(content);
+	let parsed;
+	try {
+		parsed = JSON.parse(raw);
+	} catch {
+		return {
+			kind: "text",
+			lines: lines(raw)
+		};
+	}
+	const entry = record(parsed);
+	const observation = computerObservationView(parsed);
+	if (observation !== void 0) return {
+		kind: "observation",
+		observation
+	};
+	const ran = entry === void 0 ? void 0 : run(entry);
+	if (ran !== void 0) return {
+		kind: "run",
+		run: ran
+	};
+	const failed = entry === void 0 ? void 0 : failure(entry);
+	if (failed !== void 0) return {
+		kind: "failure",
+		failure: failed
+	};
+	if (entry?.launched === true && typeof entry.applicationName === "string") return {
+		kind: "launched",
+		applicationName: entry.applicationName,
+		bundleId: text(entry.bundleId)
+	};
+	if (entry?.applied === true) return { kind: "applied" };
+	return {
+		kind: "text",
+		lines: lines(raw)
+	};
+}
+/** How many rows the view holds back while collapsed, so the card offers expand only when it reveals something. */
+function computerResultHidden(view) {
+	switch (view.kind) {
+		case "observation": return Math.max(0, view.observation.elements.length - 5);
+		case "run": return Math.max(0, view.run.logs.length - 3);
+		case "text": return Math.max(0, view.lines.length - 8);
+		default: return 0;
+	}
+}
+//#endregion
+//#region src/extensions/workspaces/sessions/(frontend)/tool/_components/ComputerResultBody.native.tsx
+/** The parsed result, or none before the tool answers. */
+function computerResult(props) {
+	return props.result === null ? void 0 : computerResultView(props.result.content);
+}
+/** Whether the card has rows to reveal: the header offers expand only then, and never on a failure. */
+function computerResultExpandable(props) {
+	const view = computerResult(props);
+	return !props.isError && view !== void 0 && computerResultHidden(view) > 0;
+}
+/**
+* The body the three computer tool cards share on native. The web cards print
+* the result's text; the tools answer in JSON, so this lays the parsed result
+* out instead: the window and its elements, a script's figures and logs, an
+* action's outcome. A preview shows while collapsed, as the web's first lines
+* do. A failure shows only its reason in red, with a quiet note of any actions
+* that already ran; the header's edge and outcome already say it failed.
+*/
+function ComputerResultBody({ props, expanded }) {
+	const { toolName, output, running, isError } = props;
+	const view = computerResult(props);
+	const testID = `tool-result-${toolName}`;
+	if (isError) {
+		const failure = view?.kind === "failure" ? view.failure : {
+			reason: view?.kind === "text" ? view.lines.join("\n") : output.trim(),
+			outcomeUncertain: false
+		};
+		return failure.reason.length === 0 ? null : /* @__PURE__ */ jsx(MessageItemBody, {
+			testID,
+			children: /* @__PURE__ */ jsx(FailureBlock, { failure })
+		});
+	}
+	if (view === void 0) return running ? /* @__PURE__ */ jsx(MessageItemBody, {
+		testID,
+		children: /* @__PURE__ */ jsx(MessageItemStatus, {
+			tone: "running",
+			children: "running"
+		})
+	}) : null;
+	if (view.kind === "text" && view.lines.length === 0) return null;
+	return /* @__PURE__ */ jsx(MessageItemBody, {
+		testID,
+		children: /* @__PURE__ */ jsxs(View, {
+			style: styles$3.stack,
+			children: [
+				view.kind === "observation" ? /* @__PURE__ */ jsx(ObservationBlock, {
+					observation: view.observation,
+					expanded
+				}) : null,
+				view.kind === "run" ? /* @__PURE__ */ jsx(RunBlock, {
+					run: view.run,
+					expanded
+				}) : null,
+				view.kind === "applied" ? /* @__PURE__ */ jsx(Text, {
+					style: [styles$3.sans, styles$3.text],
+					children: "Applied to the element."
+				}) : null,
+				view.kind === "launched" ? /* @__PURE__ */ jsxs(View, {
+					style: styles$3.figure,
+					children: [/* @__PURE__ */ jsxs(Text, {
+						numberOfLines: 1,
+						style: [
+							styles$3.sans,
+							styles$3.strong,
+							styles$3.keep
+						],
+						children: ["Opened ", view.applicationName]
+					}), /* @__PURE__ */ jsx(Text, {
+						numberOfLines: 1,
+						style: [
+							styles$3.mono,
+							styles$3.faint,
+							styles$3.yield
+						],
+						children: view.bundleId
+					})]
+				}) : null,
+				view.kind === "text" ? /* @__PURE__ */ jsx(TextLines, {
+					lines: view.lines,
+					expanded
+				}) : null,
+				running ? /* @__PURE__ */ jsx(MessageItemStatus, {
+					tone: "running",
+					children: "running"
+				}) : null
+			]
+		})
+	});
+}
+function FailureBlock({ failure }) {
+	const done = failure.completedActions;
+	const note = [done === void 0 ? "" : `${String(done)} action${done === 1 ? "" : "s"} already ran`, failure.outcomeUncertain ? "the last outcome is uncertain" : ""].filter(Boolean);
+	return /* @__PURE__ */ jsxs(View, {
+		style: styles$3.stack,
+		children: [/* @__PURE__ */ jsx(Text, {
+			selectable: true,
+			style: [styles$3.sans, styles$3.error],
+			children: failure.reason
+		}), note.length > 0 ? /* @__PURE__ */ jsxs(Text, {
+			style: [styles$3.small, styles$3.faint],
+			children: [note.join(", "), "."]
+		}) : null]
+	});
+}
+function WindowLine({ observation, lead }) {
+	return /* @__PURE__ */ jsxs(View, {
+		style: styles$3.figure,
+		children: [/* @__PURE__ */ jsxs(Text, {
+			numberOfLines: 1,
+			style: [
+				styles$3.sans,
+				styles$3.strong,
+				styles$3.keep
+			],
+			children: [lead === void 0 ? "" : `${lead} `, observation.applicationName]
+		}), observation.windowTitle.length > 0 ? /* @__PURE__ */ jsx(Text, {
+			numberOfLines: 1,
+			style: [
+				styles$3.sans,
+				styles$3.dim,
+				styles$3.yield
+			],
+			children: observation.windowTitle
+		}) : null]
+	});
+}
+function ElementRow({ element }) {
+	const secure = element.secure && !element.role.includes("secure");
+	const traits = [
+		element.role,
+		element.enabled ? "" : "disabled",
+		secure ? "secure" : ""
+	].filter(Boolean);
+	return /* @__PURE__ */ jsxs(View, {
+		style: styles$3.row,
+		accessibilityLabel: `${element.label} ${traits.join(" ")} ${element.ref}`,
+		children: [
+			/* @__PURE__ */ jsx(Text, {
+				numberOfLines: 1,
+				style: [
+					styles$3.sans,
+					element.enabled ? styles$3.text : styles$3.faint,
+					styles$3.yield
+				],
+				children: element.label.length > 0 ? element.label : element.role
+			}),
+			/* @__PURE__ */ jsx(Text, {
+				numberOfLines: 1,
+				style: [
+					styles$3.small,
+					styles$3.faint,
+					styles$3.keep
+				],
+				children: traits.join(" · ")
+			}),
+			/* @__PURE__ */ jsx(Text, {
+				numberOfLines: 1,
+				style: [
+					styles$3.mono,
+					styles$3.faint,
+					styles$3.ref
+				],
+				children: element.ref
+			})
+		]
+	});
+}
+function ObservationBlock({ observation, expanded }) {
+	const { elements } = observation;
+	const shown = expanded ? elements : elements.slice(0, 5);
+	const hidden = elements.length - shown.length;
+	return /* @__PURE__ */ jsxs(Fragment, { children: [
+		/* @__PURE__ */ jsx(WindowLine, { observation }),
+		/* @__PURE__ */ jsxs(View, {
+			style: styles$3.chips,
+			children: [/* @__PURE__ */ jsx(Badge, {
+				size: "xs",
+				children: `${String(elements.length)} element${elements.length === 1 ? "" : "s"}`
+			}), observation.truncated ? /* @__PURE__ */ jsx(Badge, {
+				size: "xs",
+				tone: "yellow",
+				children: observation.nextOffset === void 0 ? "more not shown" : `more from offset ${String(observation.nextOffset)}`
+			}) : null]
+		}),
+		shown.length > 0 ? /* @__PURE__ */ jsx(View, {
+			style: styles$3.list,
+			children: shown.map((element) => /* @__PURE__ */ jsx(ElementRow, { element }, element.ref))
+		}) : null,
+		hidden > 0 ? /* @__PURE__ */ jsxs(MessageItemStatus, {
+			expands: true,
+			children: [hidden, " more elements"]
+		}) : null,
+		observation.screenshotArtifact === void 0 ? null : /* @__PURE__ */ jsxs(Text, {
+			numberOfLines: 2,
+			style: [styles$3.small, styles$3.faint],
+			children: ["Screenshot saved to ", observation.screenshotArtifact]
+		})
+	] });
+}
+function RunBlock({ run, expanded }) {
+	const figures = [
+		run.actions === void 0 ? "" : `${String(run.actions)} action${run.actions === 1 ? "" : "s"}`,
+		run.observations === void 0 ? "" : `${String(run.observations)} observation${run.observations === 1 ? "" : "s"}`,
+		run.duration ?? ""
+	].filter(Boolean);
+	const logs = expanded ? run.logs : run.logs.slice(0, 3);
+	const hidden = run.logs.length - logs.length;
+	return /* @__PURE__ */ jsxs(Fragment, { children: [
+		figures.length > 0 ? /* @__PURE__ */ jsx(View, {
+			style: styles$3.chips,
+			children: figures.map((figure) => /* @__PURE__ */ jsx(Badge, {
+				size: "xs",
+				children: figure
+			}, figure))
+		}) : null,
+		run.fields.length > 0 ? /* @__PURE__ */ jsx(View, {
+			style: styles$3.list,
+			children: run.fields.map((field) => /* @__PURE__ */ jsxs(View, {
+				style: styles$3.row,
+				children: [/* @__PURE__ */ jsx(Text, {
+					numberOfLines: 1,
+					style: [
+						styles$3.small,
+						styles$3.faint,
+						styles$3.key
+					],
+					children: field.key
+				}), /* @__PURE__ */ jsx(Text, {
+					numberOfLines: 1,
+					selectable: true,
+					style: [
+						styles$3.sans,
+						styles$3.text,
+						styles$3.yield
+					],
+					children: field.value
+				})]
+			}, field.key))
+		}) : null,
+		logs.length > 0 ? /* @__PURE__ */ jsx(View, {
+			style: styles$3.list,
+			children: logs.map((line, index) => /* @__PURE__ */ jsx(Text, {
+				numberOfLines: 1,
+				selectable: true,
+				style: [styles$3.mono, styles$3.dim],
+				children: line
+			}, `${String(index)}-${line}`))
+		}) : null,
+		hidden > 0 ? /* @__PURE__ */ jsxs(MessageItemStatus, {
+			expands: true,
+			children: [hidden, " more log lines"]
+		}) : null,
+		run.observation === void 0 ? null : /* @__PURE__ */ jsx(WindowLine, {
+			observation: run.observation,
+			lead: "Ended on"
+		})
+	] });
+}
+function TextLines({ lines, expanded }) {
+	const shown = expanded ? lines : lines.slice(0, 8);
+	const hidden = lines.length - shown.length;
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(View, {
+		style: styles$3.list,
+		children: shown.map((line, index) => /* @__PURE__ */ jsx(Text, {
+			selectable: true,
+			style: [styles$3.sans, styles$3.dim],
+			children: line
+		}, `${String(index)}-${line}`))
+	}), hidden > 0 ? /* @__PURE__ */ jsxs(MessageItemStatus, {
+		expands: true,
+		children: [hidden, " more line(s)"]
+	}) : null] });
+}
+const styles$3 = StyleSheet.create((theme) => ({
+	stack: {
+		gap: theme.spacing(2),
+		uni__dependencies: [0]
+	},
+	list: {
+		gap: theme.spacing(1),
+		uni__dependencies: [0]
+	},
+	chips: {
+		flexDirection: "row",
+		flexWrap: "wrap",
+		gap: theme.spacing(1.5),
+		uni__dependencies: [0]
+	},
+	figure: {
+		flexDirection: "row",
+		alignItems: "baseline",
+		gap: theme.spacing(2),
+		minWidth: 0,
+		uni__dependencies: [0]
+	},
+	row: {
+		flexDirection: "row",
+		alignItems: "baseline",
+		gap: theme.spacing(2),
+		minWidth: 0,
+		uni__dependencies: [0]
+	},
+	sans: {
+		fontFamily: fontOf(theme.fontFamily.sans),
+		fontSize: theme.fontSize.base,
+		lineHeight: theme.lineHeight.base,
+		uni__dependencies: [0]
+	},
+	small: {
+		fontFamily: fontOf(theme.fontFamily.sans),
+		fontSize: theme.fontSize.sm,
+		lineHeight: theme.lineHeight.sm,
+		uni__dependencies: [0]
+	},
+	mono: {
+		fontFamily: fontOf(theme.fontFamily.mono),
+		fontSize: theme.fontSize.sm,
+		lineHeight: theme.lineHeight.sm,
+		uni__dependencies: [0]
+	},
+	strong: {
+		color: theme.colors.text,
+		fontWeight: theme.fontWeight.semibold,
+		uni__dependencies: [0]
+	},
+	text: {
+		color: theme.colors.text,
+		uni__dependencies: [0]
+	},
+	dim: {
+		color: theme.colors.dim,
+		uni__dependencies: [0]
+	},
+	faint: {
+		color: theme.colors.faint,
+		uni__dependencies: [0]
+	},
+	error: {
+		color: theme.colors.red,
+		uni__dependencies: [0]
+	},
+	keep: {
+		flexShrink: 0,
+		maxWidth: "60%"
+	},
+	yield: {
+		flexShrink: 1,
+		minWidth: 0
+	},
+	key: {
+		flexShrink: 0,
+		maxWidth: "40%"
+	},
+	ref: {
+		flexShrink: 0,
+		marginLeft: "auto"
+	}
+}));
+//#endregion
+//#region src/extensions/workspaces/sessions/(frontend)/tool/_components/ComputerActionToolCard.native.tsx
+/**
+* The computer_action tool's timeline item on native, as the web's: the action
+* and the element it targets in the header, the outcome's first lines beneath.
+*/
+function ComputerActionToolCard(props) {
+	const { toolName, args, running, isError } = props;
+	const [kind, ...target] = computerActionCallParts(args);
+	return /* @__PURE__ */ jsx(MessageItem, {
+		tone: toolTone({
+			running,
+			isError
+		}),
+		expandable: computerResultExpandable(props),
+		children: ({ expanded }) => /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(MessageItemHeader, {
+			title: toolName,
+			children: /* @__PURE__ */ jsxs(View, {
+				testID: `tool-call-${toolName}`,
+				style: styles$2.summary,
+				children: [kind === void 0 ? null : /* @__PURE__ */ jsx(Text, {
+					numberOfLines: 1,
+					style: [styles$2.sans, styles$2.primary],
+					children: kind
+				}), target.length > 0 ? /* @__PURE__ */ jsx(Text, {
+					numberOfLines: 1,
+					style: [styles$2.sans, styles$2.detail],
+					children: target.join(" ")
+				}) : null]
+			})
+		}), /* @__PURE__ */ jsx(ComputerResultBody, {
+			props,
+			expanded
+		})] })
+	});
+}
+const styles$2 = StyleSheet.create((theme) => ({
+	summary: {
+		flex: 1,
+		flexDirection: "row",
+		alignItems: "center",
+		gap: theme.spacing(2),
+		minWidth: 0,
+		uni__dependencies: [0]
+	},
+	sans: {
+		fontFamily: fontOf(theme.fontFamily.sans),
+		fontSize: theme.fontSize.base,
+		lineHeight: theme.lineHeight.base,
+		uni__dependencies: [0]
+	},
+	primary: {
+		flexShrink: 0,
+		maxWidth: "45%",
+		color: theme.colors.text,
+		uni__dependencies: [0]
+	},
+	detail: {
+		flexShrink: 1,
+		color: theme.colors.dim,
+		uni__dependencies: [0]
+	}
+}));
+//#endregion
+//#region src/extensions/workspaces/sessions/(frontend)/tool/computer-action.native.tsx
+var computer_action_native_default = defineToolRenderer({
+	tools: ["computer_action"],
+	message: ComputerActionToolCard
+});
+//#endregion
+//#region src/extensions/workspaces/sessions/(frontend)/tool/_components/ComputerExecToolCard.native.tsx
+/**
+* The computer_exec tool's timeline item on native, as the web's: the script
+* path in the header, the run's first lines beneath it.
+*/
+function ComputerExecToolCard(props) {
+	const { toolName, args, running, isError } = props;
+	const path = computerExecPathParts(computerExecCallSummary(args));
+	return /* @__PURE__ */ jsx(MessageItem, {
+		tone: toolTone({
+			running,
+			isError
+		}),
+		expandable: computerResultExpandable(props),
+		children: ({ expanded }) => /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(MessageItemHeader, {
+			title: toolName,
+			children: /* @__PURE__ */ jsxs(View, {
+				testID: `tool-call-${toolName}`,
+				style: styles$1.summary,
+				children: [path.folder.length > 0 ? /* @__PURE__ */ jsx(Text, {
+					numberOfLines: 1,
+					style: [styles$1.sans, styles$1.folder],
+					children: path.folder
+				}) : null, /* @__PURE__ */ jsx(Text, {
+					numberOfLines: 1,
+					style: [styles$1.sans, styles$1.primary],
+					children: path.name
+				})]
+			})
+		}), /* @__PURE__ */ jsx(ComputerResultBody, {
+			props,
+			expanded
+		})] })
+	});
+}
+const styles$1 = StyleSheet.create((theme) => ({
+	summary: {
+		flex: 1,
+		flexDirection: "row",
+		alignItems: "center",
+		minWidth: 0
+	},
+	sans: {
+		fontFamily: fontOf(theme.fontFamily.sans),
+		fontSize: theme.fontSize.base,
+		lineHeight: theme.lineHeight.base,
+		uni__dependencies: [0]
+	},
+	folder: {
+		flexShrink: 1,
+		minWidth: 0,
+		color: theme.colors.dim,
+		uni__dependencies: [0]
+	},
+	primary: {
+		flexShrink: 0,
+		maxWidth: "100%",
+		color: theme.colors.text,
+		uni__dependencies: [0]
+	}
+}));
+//#endregion
+//#region src/extensions/workspaces/sessions/(frontend)/tool/computer-exec.native.tsx
+var computer_exec_native_default = defineToolRenderer({
+	tools: ["computer_exec"],
+	message: ComputerExecToolCard
+});
+//#endregion
+//#region src/extensions/workspaces/sessions/(frontend)/tool/_components/ComputerStateToolCard.native.tsx
+/**
+* The computer_state tool's timeline item on native, as the web's: the observed
+* window in the header, the observation's first lines beneath it.
+*/
+function ComputerStateToolCard(props) {
+	const { toolName, args, running, isError } = props;
+	return /* @__PURE__ */ jsx(MessageItem, {
+		tone: toolTone({
+			running,
+			isError
+		}),
+		expandable: computerResultExpandable(props),
+		children: ({ expanded }) => /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(MessageItemHeader, {
+			title: toolName,
+			children: /* @__PURE__ */ jsx(View, {
+				testID: `tool-call-${toolName}`,
+				style: styles.summary,
+				children: /* @__PURE__ */ jsx(Text, {
+					numberOfLines: 1,
+					style: [styles.sans, styles.primary],
+					children: computerStateCallSummary(args)
+				})
+			})
+		}), /* @__PURE__ */ jsx(ComputerResultBody, {
+			props,
+			expanded
+		})] })
+	});
+}
+const styles = StyleSheet.create((theme) => ({
+	summary: {
+		flex: 1,
+		flexDirection: "row",
+		alignItems: "center",
+		gap: theme.spacing(2),
+		minWidth: 0,
+		uni__dependencies: [0]
+	},
+	sans: {
+		fontFamily: fontOf(theme.fontFamily.sans),
+		fontSize: theme.fontSize.base,
+		lineHeight: theme.lineHeight.base,
+		uni__dependencies: [0]
+	},
+	primary: {
+		flexShrink: 1,
+		color: theme.colors.text,
+		uni__dependencies: [0]
+	}
+}));
+//#endregion
+//#region src/extensions/workspaces/sessions/(frontend)/tool/computer-state.native.tsx
+var computer_state_native_default = defineToolRenderer({
+	tools: ["computer_state"],
+	message: ComputerStateToolCard
+});
 //#endregion
 //#region generated/native.ts
 const via = (identity, value) => value === void 0 ? void 0 : {
@@ -601,6 +1335,13 @@ const nativePlugin = defineNativePlugin({
 				slot: "activity.computer-use",
 				id: "computer-use"
 			}, ComputerUse_activity_computer_use_native_default)];
+		},
+		get toolRenderers() {
+			return [
+				via({ tools: ["computer_action"] }, computer_action_native_default),
+				via({ tools: ["computer_exec"] }, computer_exec_native_default),
+				via({ tools: ["computer_state"] }, computer_state_native_default)
+			];
 		}
 	}
 });