@agimon-ai/po-team 0.0.0-alpha.22 → 0.0.0-alpha.24

package/dist/extensions/native.mjs

@@ -1,11 +1,12 @@
-import { createApiClient, defineActivityGroup, defineApiRoutes, defineChannelFile, defineFill, defineNativePlugin, defineSessionStore, nativeApiTransport, sessionApiAddress } from "@agimon-ai/po-core/native";
-import { Badge, Button, Dot, Input, ListRow, SegmentedControl, Sheet, SheetBody, SheetContent, SheetHeader, SheetTitle, Textarea, UsersIcon } from "@agimon-ai/po-native-components";
+import { createApiClient, defineActivityGroup, defineApiRoutes, defineChannelFile, defineFill, defineNativePlugin, defineSessionStore, defineSlot, nativeApiTransport, sessionApiAddress } from "@agimon-ai/po-core/native";
+import { AgentAvatar, ArrowRightIcon, Badge, Button, ChevronDownIcon, Dot, DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuTrigger, Input, KebabIcon, ListRow, Panel, STATUS_EDGE, SegmentedControl, SendIcon, Sheet, SheetBody, SheetContent, SheetHeader, SheetTitle, StatusBadge, Textarea, UsersIcon, fontOf } from "@agimon-ai/po-native-components";
 import { createElement, useCallback, useEffect, useState, useSyncExternalStore } from "react";
-import { ScrollView } from "react-native-unistyles/components/native/ScrollView";
 import { View } from "react-native-unistyles/components/native/View";
 import { Text } from "react-native-unistyles/components/native/Text";
+import { ScrollView } from "react-native-unistyles/components/native/ScrollView";
+import { Pressable } from "react-native-unistyles/components/native/Pressable";
 import { StyleSheet } from "react-native-unistyles";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 //#region src/extensions/workspaces/(frontend)/fill/Team.home.native.ts
 var Team_home_native_default = defineFill({ data: {
 	version: 1,
@@ -208,6 +209,11 @@ function formatRunDuration(elapsedMs) {
 	const minutes = Math.floor(elapsedMs % HOUR_MS / MINUTE_MS);
 	return `${hours}h ${String(minutes).padStart(2, "0")}m`;
 }
+function abbreviateCwd(cwd) {
+	const match = /^\/(?:Users|home)\/[^/]+/u.exec(cwd);
+	if (!match) return cwd;
+	return `~${cwd.slice(match[0].length)}`;
+}
 /** What to call a run on screen: the identity's first name, else the agent name. Never a run id. */
 function agentRunLabel(run) {
 	return agentDisplay(run).name;
@@ -264,6 +270,10 @@ function agentMeta(agent) {
 	return `${agent.tools.length === 0 ? "all tools" : `tools ${agent.tools.slice(0, META_TOOL_LIMIT).join(", ")}${agent.tools.length > META_TOOL_LIMIT ? ` +${agent.tools.length - META_TOOL_LIMIT}` : ""}`}${agent.skills.length > 0 ? ` · ${agent.skills.length} skill${agent.skills.length === 1 ? "" : "s"}` : ""} · ${agent.defaultContext === "fork" ? "forks the session" : "fresh context"}`;
 }
 //#endregion
+//#region src/extensions/workspaces/sessions/(frontend)/_lib/runActionsSlot.native.ts
+/** The native twin of `runActionsSlot.ts`: the same slot name, declared from the native SDK. */
+const RUN_ACTIONS_SLOT = defineSlot({ slot: "subagents.run-actions" });
+//#endregion
 //#region src/extensions/workspaces/sessions/(frontend)/_lib/subagentsStore.native.ts
 const TERMINAL_STATES = /* @__PURE__ */ new Set([
 	"done",
@@ -341,6 +351,18 @@ function clearPendingLaunch(sessionId) {
 		pendingLaunch: void 0
 	}));
 }
+function clearAutoOpen(sessionId) {
+	subagents.update(sessionId, (current) => ({
+		...current,
+		autoOpenRunId: void 0
+	}));
+}
+function openRun(sessionId, runId) {
+	subagents.update(sessionId, (current) => ({
+		...current,
+		openRunId: runId
+	}));
+}
 /** The plugin's session data channel: 'subagent_runs' payloads into the store. */
 const subagentRunsChannel = subagents.channel({
 	channel: SUBAGENT_RUNS_TYPE,
@@ -368,6 +390,38 @@ const subagentRunsChannel = subagents.channel({
 });
 //#endregion
 //#region src/extensions/workspaces/sessions/(frontend)/_components/SubagentsPanel.native.tsx
+const TICK_MS$1 = 1e4;
+/** How much of a run's own conversation a card carries; the whole thread is one press away. */
+const CARD_THREAD_ENTRIES = 8;
+/** One run state, in the host's shared outcome vocabulary. */
+const RUN_BADGE = {
+	queued: {
+		label: "QUEUED",
+		tone: "neutral"
+	},
+	running: {
+		label: "RUNNING",
+		tone: "running"
+	},
+	done: {
+		label: "DONE",
+		tone: "ok"
+	},
+	failed: {
+		label: "FAILED",
+		tone: "error"
+	},
+	stopped: {
+		label: "STOPPED",
+		tone: "neutral"
+	}
+};
+const NOT_REPORTED = "Not reported";
+const END_NOTE = {
+	done: "This run has finished. Start a new run from Agents.",
+	failed: "This run failed. Start a new run from Agents.",
+	stopped: "This run was stopped. Start a new run from Agents."
+};
 function useSubagents(sessionId) {
 	const subscribe = useCallback((listener) => {
 		const sub = subagents.store.subscribe(listener);
@@ -375,10 +429,23 @@ function useSubagents(sessionId) {
 	}, []);
 	return useSyncExternalStore(subscribe, () => subagents.select(subagents.store.state, sessionId));
 }
+function useNow() {
+	const [now, setNow] = useState(() => Date.now());
+	useEffect(() => {
+		const timer = setInterval(() => setNow(Date.now()), TICK_MS$1);
+		return () => clearInterval(timer);
+	}, []);
+	return now;
+}
+/** How long the run has been going, or took; the clock only matters while it is active. */
+function elapsedRun(run, now) {
+	const end = run.endedAt ?? (run.state === "running" || run.state === "queued" ? now : run.lastUpdate);
+	return formatRunDuration(Math.max(0, end - run.startedAt));
+}
 function subagentsTab() {
 	return {
 		id: "subagents",
-		label: "agents",
+		label: "Agents",
 		panel: SubagentsPanel
 	};
 }
@@ -390,40 +457,355 @@ function agentThreadTab(run) {
 		panel: (props) => /* @__PURE__ */ jsx(AgentThreadPanel, {
 			...props,
 			runId
-		})
+		}, `${props.sessionId}:${runId}`)
 	};
 }
-function AgentRunRow({ run, onPress }) {
-	const detail = run.error ?? run.summary?.split("\n").find((line) => line.trim() !== "") ?? run.currentTool ?? run.tail.at(-1) ?? run.state;
-	return /* @__PURE__ */ jsx(ListRow, {
-		leading: /* @__PURE__ */ jsx(Dot, { tone: run.state === "failed" ? "red" : run.state === "running" ? "yellow" : run.state === "done" ? "green" : "muted" }),
-		title: /* @__PURE__ */ jsx(Button, {
-			variant: "ghost",
-			onPress,
-			testID: `activity-run-${run.runId}`,
-			children: agentRunLabel(run)
+/** The card's work line: a task binding wins; otherwise the delegation prompt. */
+function WorkLine({ run }) {
+	const firstLine = run.task.split("\n").find((line) => line.trim() !== "") ?? "";
+	return /* @__PURE__ */ jsxs(View, {
+		style: styles$1.work,
+		children: [run.taskRef ? /* @__PURE__ */ jsxs(Badge, {
+			tone: "violet",
+			size: "xs",
+			children: ["TASK ", run.taskRef]
+		}) : /* @__PURE__ */ jsx(Text, {
+			style: styles$1.workLabel,
+			children: "Prompt"
+		}), /* @__PURE__ */ jsx(Text, {
+			testID: "run-work",
+			numberOfLines: 1,
+			style: run.taskRef ? styles$1.workHi : styles$1.workDim,
+			children: firstLine
+		})]
+	});
+}
+/** Everything a card can do, behind one control. */
+function RunMenu({ sessionId, run, stopping, onOpenThread, onOpenDetail }) {
+	const [error, setError] = useState();
+	const stop = () => {
+		setError(void 0);
+		requestRunStop(sessionId, run.runId).catch((cause) => setError(cause instanceof Error ? cause.message : String(cause)));
+	};
+	return /* @__PURE__ */ jsxs(Fragment, { children: [error ? /* @__PURE__ */ jsx(Text, {
+		accessibilityRole: "alert",
+		testID: `run-menu-stop-error-${run.runId}`,
+		numberOfLines: 1,
+		style: styles$1.error,
+		children: error
+	}) : null, /* @__PURE__ */ jsxs(DropdownMenu, { children: [/* @__PURE__ */ jsx(DropdownMenuTrigger, {
+		variant: "ghost",
+		size: "icon",
+		testID: `run-menu-${run.runId}`,
+		accessibilityLabel: "run actions",
+		children: /* @__PURE__ */ jsx(KebabIcon, { size: 12 })
+	}), /* @__PURE__ */ jsxs(DropdownMenuContent, { children: [
+		/* @__PURE__ */ jsx(DropdownMenuItem, {
+			onSelect: onOpenThread,
+			children: "open thread"
+		}),
+		/* @__PURE__ */ jsx(DropdownMenuItem, {
+			onSelect: onOpenDetail,
+			children: "details"
 		}),
-		description: detail,
-		trailing: /* @__PURE__ */ jsx(Badge, { children: run.state })
+		/* @__PURE__ */ jsx(DropdownMenuSeparator, {}),
+		isTerminalRun(run) ? /* @__PURE__ */ jsx(DropdownMenuItem, {
+			onSelect: () => dismissRun(sessionId, run.runId),
+			children: "clear from the grid"
+		}) : /* @__PURE__ */ jsx(DropdownMenuItem, {
+			variant: "destructive",
+			disabled: stopping,
+			onSelect: stop,
+			children: stopping ? "stopping…" : "stop"
+		})
+	] })] })] });
+}
+/** One run in the fleet: its live conversation under a header; the whole card is the way into the run's tab. */
+function RunCard({ sessionId, run, now, stopping, renderThread, onOpenThread, onOpenDetail }) {
+	const badge = RUN_BADGE[run.state];
+	const who = agentDisplay(run);
+	return /* @__PURE__ */ jsxs(Panel, {
+		testID: `run-card-${run.runId}`,
+		style: styles$1.card(STATUS_EDGE[badge.tone]),
+		children: [/* @__PURE__ */ jsxs(Pressable, {
+			accessibilityRole: "button",
+			accessibilityLabel: `Open ${who.name}'s conversation`,
+			testID: `run-open-card-${run.runId}`,
+			onPress: onOpenThread,
+			style: styles$1.cardOpen,
+			children: [
+				/* @__PURE__ */ jsxs(View, {
+					style: styles$1.cardHead,
+					children: [
+						/* @__PURE__ */ jsx(AgentAvatar, {
+							name: who.name,
+							seed: who.seed,
+							size: "sm"
+						}),
+						/* @__PURE__ */ jsx(Text, {
+							testID: "run-agent",
+							numberOfLines: 1,
+							style: styles$1.name,
+							children: who.name
+						}),
+						who.role ? /* @__PURE__ */ jsx(Text, {
+							numberOfLines: 1,
+							style: styles$1.dim,
+							children: who.role
+						}) : null,
+						/* @__PURE__ */ jsx(View, { style: styles$1.spacer }),
+						/* @__PURE__ */ jsx(Text, {
+							style: styles$1.dim,
+							children: elapsedRun(run, now)
+						}),
+						/* @__PURE__ */ jsx(StatusBadge, {
+							tone: badge.tone,
+							testID: "run-state",
+							children: badge.label
+						})
+					]
+				}),
+				/* @__PURE__ */ jsx(WorkLine, { run }),
+				/* @__PURE__ */ jsx(View, {
+					testID: "run-stream",
+					pointerEvents: "none",
+					style: styles$1.stream,
+					children: renderThread(run.runId, {
+						limit: CARD_THREAD_ENTRIES,
+						compact: true
+					})
+				}),
+				run.state === "failed" && run.error ? /* @__PURE__ */ jsx(Text, {
+					testID: "run-error",
+					numberOfLines: 1,
+					style: [styles$1.error, styles$1.cardError],
+					children: run.error
+				}) : null
+			]
+		}), /* @__PURE__ */ jsxs(View, {
+			style: styles$1.cardFoot,
+			children: [
+				/* @__PURE__ */ jsxs(Text, {
+					numberOfLines: 1,
+					style: styles$1.dim,
+					children: [
+						run.toolCount !== void 0 ? `${run.toolCount} tools` : "—",
+						run.tokens !== void 0 ? ` · ${run.tokens.toLocaleString()} tk` : "",
+						run.model ? ` · ${run.model.split("/").pop() ?? run.model}` : ""
+					]
+				}),
+				/* @__PURE__ */ jsx(View, { style: styles$1.spacer }),
+				/* @__PURE__ */ jsx(RunMenu, {
+					sessionId,
+					run,
+					stopping,
+					onOpenThread,
+					onOpenDetail
+				})
+			]
+		})]
+	});
+}
+function SheetRow({ label, value, violet }) {
+	return /* @__PURE__ */ jsxs(View, {
+		style: styles$1.sheetRow,
+		children: [/* @__PURE__ */ jsx(Text, {
+			style: [styles$1.dim, styles$1.sheetRowLabel],
+			children: label
+		}), /* @__PURE__ */ jsx(Text, {
+			style: violet ? styles$1.violet : styles$1.bodyDim,
+			children: value
+		})]
 	});
 }
+function SheetBlock({ label, text, testId, failure }) {
+	return /* @__PURE__ */ jsxs(View, {
+		style: styles$1.sheetBlock,
+		children: [/* @__PURE__ */ jsx(Text, {
+			style: styles$1.sheetBlockLabel,
+			children: label
+		}), /* @__PURE__ */ jsx(Text, {
+			testID: testId,
+			style: failure ? styles$1.bodyRed : styles$1.bodyText,
+			children: text
+		})]
+	});
+}
+/** What the run was asked to do and what it was given to do it with, over the fleet. */
+function RunDetailSheet({ sessionId, run, now, stopping, renderSlot, onClose }) {
+	const badge = RUN_BADGE[run.state];
+	return /* @__PURE__ */ jsx(Sheet, {
+		open: true,
+		onOpenChange: (open) => {
+			if (!open) onClose();
+		},
+		children: /* @__PURE__ */ jsxs(SheetContent, { children: [/* @__PURE__ */ jsxs(SheetHeader, { children: [
+			/* @__PURE__ */ jsx(SheetTitle, {
+				testID: "sheet-agent",
+				children: agentRunLabel(run)
+			}),
+			/* @__PURE__ */ jsx(StatusBadge, {
+				tone: badge.tone,
+				children: badge.label
+			}),
+			/* @__PURE__ */ jsx(View, { style: styles$1.spacer }),
+			/* @__PURE__ */ jsx(Text, {
+				style: styles$1.dim,
+				children: elapsedRun(run, now)
+			}),
+			renderSlot(RUN_ACTIONS_SLOT.slot),
+			/* @__PURE__ */ jsx(RunControl, {
+				sessionId,
+				run,
+				stopping
+			})
+		] }), /* @__PURE__ */ jsxs(SheetBody, { children: [
+			/* @__PURE__ */ jsxs(View, {
+				style: styles$1.sheetRows,
+				children: [
+					/* @__PURE__ */ jsx(SheetRow, {
+						label: "run",
+						value: run.runId
+					}),
+					run.taskRef ? /* @__PURE__ */ jsx(SheetRow, {
+						label: "task",
+						value: run.taskRef,
+						violet: true
+					}) : null,
+					/* @__PURE__ */ jsx(SheetRow, {
+						label: "model",
+						value: run.model ?? "the runtime default"
+					}),
+					/* @__PURE__ */ jsx(SheetRow, {
+						label: "cwd",
+						value: abbreviateCwd(run.cwd)
+					}),
+					/* @__PURE__ */ jsx(SheetRow, {
+						label: "work",
+						value: `${run.toolCount === void 0 ? "no" : String(run.toolCount)} tools${run.tokens === void 0 ? "" : ` · ${run.tokens.toLocaleString()} tk`}`
+					})
+				]
+			}),
+			/* @__PURE__ */ jsx(SheetBlock, {
+				label: "PROMPT FROM THE MAIN AGENT",
+				testId: "sheet-task",
+				text: run.task || "(no prompt recorded)"
+			}),
+			run.summary ? /* @__PURE__ */ jsx(SheetBlock, {
+				label: "REPORT",
+				testId: "sheet-summary",
+				text: run.summary
+			}) : null,
+			run.error ? /* @__PURE__ */ jsx(SheetBlock, {
+				label: "FAILURE",
+				testId: "sheet-error",
+				text: run.error,
+				failure: true
+			}) : null
+		] })] })
+	});
+}
+/** The subagents tab: the focused session's fleet, one card per run. */
 function SubagentsPanel(props) {
-	const state = useSubagents(props.sessionId);
-	return /* @__PURE__ */ jsxs(ScrollView, {
-		contentContainerStyle: styles.body,
+	const { sessionId, renderSlot, renderThread, openTransientTab } = props;
+	const state = useSubagents(sessionId);
+	const runs = visibleRuns(state);
+	const { openRunId, stopRequested, autoOpenRunId } = state;
+	const now = useNow();
+	useEffect(() => {
+		if (autoOpenRunId === void 0 || sessionId === null) return;
+		const run = runs.find((candidate) => candidate.runId === autoOpenRunId);
+		if (run) openTransientTab(agentThreadTab(run));
+		clearAutoOpen(sessionId);
+	}, [
+		autoOpenRunId,
+		runs,
+		sessionId,
+		openTransientTab
+	]);
+	const shownRun = openRunId === void 0 ? void 0 : runs.find((run) => run.runId === openRunId);
+	const stopping = (run) => stopRequested.includes(run.runId);
+	const runningTally = runs.filter((run) => run.state === "running" || run.state === "queued").length;
+	const doneTally = runs.filter((run) => run.state === "done").length;
+	const failedTally = runs.filter((run) => run.state === "failed" || run.state === "stopped").length;
+	return /* @__PURE__ */ jsxs(View, {
+		testID: "subagents-panel",
+		style: styles$1.screen,
 		children: [
-			/* @__PURE__ */ jsx(Button, {
-				testID: "activity-agents-launch",
-				onPress: () => {
-					if (props.sessionId !== null) openCatalog(props.sessionId);
-				},
-				children: "Launch an agent"
+			/* @__PURE__ */ jsxs(ScrollView, {
+				contentContainerStyle: styles$1.fleet,
+				children: [/* @__PURE__ */ jsxs(View, {
+					style: styles$1.fleetHead,
+					children: [
+						/* @__PURE__ */ jsx(Text, {
+							style: styles$1.heading,
+							children: "Agents · this session"
+						}),
+						/* @__PURE__ */ jsx(Button, {
+							variant: "primary",
+							testID: "subagents-launch",
+							style: styles$1.launch,
+							onPress: () => {
+								if (sessionId === null) return;
+								openRun(sessionId, void 0);
+								openCatalog(sessionId);
+							},
+							children: "New agent run"
+						}),
+						/* @__PURE__ */ jsx(Text, {
+							testID: "subagents-tally",
+							style: [styles$1.dim, styles$1.tally],
+							children: runs.length === 0 ? "no runs yet" : `${runningTally} running · ${doneTally} done · ${failedTally} failed`
+						})
+					]
+				}), runs.length === 0 ? /* @__PURE__ */ jsxs(View, {
+					testID: "subagents-empty",
+					children: [
+						/* @__PURE__ */ jsx(Text, {
+							style: styles$1.bodyDim,
+							children: "No runs yet"
+						}),
+						/* @__PURE__ */ jsx(Text, {
+							style: styles$1.bodyDim,
+							children: "Start an agent run to get help with your work."
+						}),
+						/* @__PURE__ */ jsx(Text, {
+							style: [styles$1.dim, styles$1.emptyHint],
+							children: "Agent runs will appear here once you start one."
+						})
+					]
+				}) : /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(View, {
+					testID: "subagents-grid",
+					style: styles$1.grid,
+					children: sessionId === null ? null : runs.map((run) => /* @__PURE__ */ jsx(RunCard, {
+						sessionId,
+						run,
+						now,
+						stopping: stopping(run),
+						renderThread,
+						onOpenThread: () => {
+							closeCatalog(sessionId);
+							openTransientTab(agentThreadTab(run));
+						},
+						onOpenDetail: () => {
+							closeCatalog(sessionId);
+							openRun(sessionId, run.runId);
+						}
+					}, run.runId))
+				}), /* @__PURE__ */ jsx(Text, {
+					style: styles$1.dim,
+					children: "tap a card to open the run's thread · the card menu holds details, stop and clear · finished runs leave the grid after 10m"
+				})] })]
 			}),
-			visibleRuns(state).map((run) => /* @__PURE__ */ jsx(AgentRunRow, {
-				run,
-				onPress: () => props.openTransientTab(agentThreadTab(run))
-			}, run.runId)),
-			/* @__PURE__ */ jsx(AgentCatalog, { ...props })
+			/* @__PURE__ */ jsx(AgentCatalog, { ...props }),
+			shownRun && sessionId !== null ? /* @__PURE__ */ jsx(RunDetailSheet, {
+				sessionId,
+				run: shownRun,
+				now,
+				stopping: stopping(shownRun),
+				renderSlot,
+				onClose: () => openRun(sessionId, void 0)
+			}) : null
 		]
 	});
 }
@@ -457,7 +839,7 @@ function AgentCatalog({ sessionId }) {
 				setAgent(void 0);
 			}
 		}, agent.name) : /* @__PURE__ */ jsxs(View, {
-			style: styles.body,
+			style: styles$1.body,
 			children: [
 				/* @__PURE__ */ jsx(Input, {
 					accessibilityLabel: "Filter agents",
@@ -466,11 +848,11 @@ function AgentCatalog({ sessionId }) {
 					onChangeText: setFilter
 				}),
 				state.loading ? /* @__PURE__ */ jsx(Text, {
-					style: styles.meta,
+					style: styles$1.meta,
 					children: "Loading agents…"
 				}) : null,
 				state.warning ? /* @__PURE__ */ jsx(Text, {
-					style: styles.error,
+					style: styles$1.error,
 					children: state.warning
 				}) : null,
 				filterCatalog(state.agents, filter).map((item) => /* @__PURE__ */ jsx(ListRow, {
@@ -512,10 +894,10 @@ function AgentLaunch({ sessionId, agent, models, initialTask, onClose }) {
 		}
 	};
 	return /* @__PURE__ */ jsxs(View, {
-		style: styles.body,
+		style: styles$1.body,
 		children: [
 			/* @__PURE__ */ jsx(Text, {
-				style: styles.meta,
+				style: styles$1.meta,
 				children: agent.description
 			}),
 			/* @__PURE__ */ jsx(Textarea, {
@@ -536,7 +918,7 @@ function AgentLaunch({ sessionId, agent, models, initialTask, onClose }) {
 				}]
 			}),
 			/* @__PURE__ */ jsx(Text, {
-				style: styles.meta,
+				style: styles$1.meta,
 				children: "Model"
 			}),
 			/* @__PURE__ */ jsxs(Button, {
@@ -551,7 +933,7 @@ function AgentLaunch({ sessionId, agent, models, initialTask, onClose }) {
 				children: choice
 			}, choice)),
 			error ? /* @__PURE__ */ jsx(Text, {
-				style: styles.error,
+				style: styles$1.error,
 				children: error
 			}) : null,
 			/* @__PURE__ */ jsx(Button, {
@@ -563,135 +945,669 @@ function AgentLaunch({ sessionId, agent, models, initialTask, onClose }) {
 		]
 	});
 }
+/**
+* The one control a run offers: stop while it is active, clear once it is not.
+* Stop is a request the runtime acknowledges in its own time, so the button
+* reads "stopping" until the run's own status says otherwise.
+*/
+function RunControl({ sessionId, run, stopping }) {
+	const [error, setError] = useState();
+	if (isTerminalRun(run)) return /* @__PURE__ */ jsx(Button, {
+		variant: "outline",
+		size: "xs",
+		testID: `run-clear-${run.runId}`,
+		onPress: () => dismissRun(sessionId, run.runId),
+		children: "clear"
+	});
+	return /* @__PURE__ */ jsxs(Fragment, { children: [error ? /* @__PURE__ */ jsx(Text, {
+		accessibilityRole: "alert",
+		testID: `run-stop-error-${run.runId}`,
+		numberOfLines: 1,
+		style: styles$1.error,
+		children: error
+	}) : null, /* @__PURE__ */ jsx(Button, {
+		variant: stopping ? "outline" : "danger-outline",
+		size: "xs",
+		testID: `run-stop-${run.runId}`,
+		disabled: stopping,
+		onPress: () => {
+			setError(void 0);
+			requestRunStop(sessionId, run.runId).catch((cause) => setError(cause instanceof Error ? cause.message : String(cause)));
+		},
+		children: stopping ? "stopping…" : "stop"
+	})] });
+}
+function InfoRow({ label, children }) {
+	return /* @__PURE__ */ jsxs(View, {
+		style: styles$1.infoRow,
+		children: [/* @__PURE__ */ jsx(Text, {
+			style: [styles$1.dim, styles$1.infoLabel],
+			children: label
+		}), /* @__PURE__ */ jsx(View, {
+			style: styles$1.infoValue,
+			children
+		})]
+	});
+}
+/** What the run is: the agent, what it was asked, and how it thinks. Only what the runtime recorded. */
+function RunInfo({ run }) {
+	const usage = [run?.toolCount === void 0 ? void 0 : `${run.toolCount} tools`, run?.tokens === void 0 ? void 0 : `${run.tokens.toLocaleString()} tokens`].filter(Boolean).join(" · ");
+	return /* @__PURE__ */ jsxs(Fragment, { children: [
+		/* @__PURE__ */ jsxs(InfoRow, {
+			label: "Agent",
+			children: [
+				/* @__PURE__ */ jsx(Text, {
+					style: styles$1.name,
+					children: run?.agent ?? NOT_REPORTED
+				}),
+				run?.agentDescription ? /* @__PURE__ */ jsx(Text, {
+					style: styles$1.bodyDim,
+					children: run.agentDescription
+				}) : null,
+				run?.agentFilePath ? /* @__PURE__ */ jsx(Text, {
+					style: styles$1.monoDim,
+					children: run.agentFilePath
+				}) : null
+			]
+		}),
+		/* @__PURE__ */ jsx(InfoRow, {
+			label: "Model",
+			children: /* @__PURE__ */ jsxs(Text, {
+				style: styles$1.bodyText,
+				children: [run?.model ?? NOT_REPORTED, run?.model && run.modelSource === "configured" ? /* @__PURE__ */ jsx(Text, {
+					style: styles$1.bodyDim,
+					children: " · configured, not confirmed by the runtime"
+				}) : null]
+			})
+		}),
+		/* @__PURE__ */ jsx(InfoRow, {
+			label: "Thinking",
+			children: /* @__PURE__ */ jsx(Text, {
+				style: [styles$1.bodyText, styles$1.capitalize],
+				children: run?.thinking ?? NOT_REPORTED
+			})
+		}),
+		/* @__PURE__ */ jsx(InfoRow, {
+			label: "Prompt",
+			children: run?.promptWithheld ? /* @__PURE__ */ jsx(Text, {
+				style: styles$1.bodyDim,
+				children: "Withheld: this task was marked sensitive."
+			}) : /* @__PURE__ */ jsx(ScrollView, {
+				style: styles$1.prompt,
+				nestedScrollEnabled: true,
+				children: /* @__PURE__ */ jsx(Text, {
+					style: styles$1.bodyText,
+					children: run?.task || NOT_REPORTED
+				})
+			})
+		}),
+		run?.taskRef ? /* @__PURE__ */ jsx(InfoRow, {
+			label: "Task",
+			children: /* @__PURE__ */ jsx(Badge, {
+				tone: "violet",
+				size: "xs",
+				children: run.taskRef
+			})
+		}) : null,
+		/* @__PURE__ */ jsx(InfoRow, {
+			label: "Folder",
+			children: /* @__PURE__ */ jsx(Text, {
+				style: styles$1.mono,
+				children: run?.cwd ? abbreviateCwd(run.cwd) : NOT_REPORTED
+			})
+		}),
+		/* @__PURE__ */ jsx(InfoRow, {
+			label: "Usage",
+			children: /* @__PURE__ */ jsx(Text, {
+				style: styles$1.bodyDim,
+				children: usage || NOT_REPORTED
+			})
+		})
+	] });
+}
+function RunChip({ dot, open, onPress, children }) {
+	return /* @__PURE__ */ jsxs(Button, {
+		variant: "outline",
+		size: "md",
+		accessibilityState: { expanded: open },
+		onPress,
+		style: styles$1.chip,
+		children: [
+			/* @__PURE__ */ jsx(Dot, {
+				tone: dot,
+				size: "sm"
+			}),
+			children,
+			/* @__PURE__ */ jsx(ChevronDownIcon, { size: 14 })
+		]
+	});
+}
+/**
+* A run's own conversation on the host's transcript, with its live actions.
+* The run can leave the fleet feed before the reader is done; the thread and
+* what the run last reported stay, and the panel says so.
+*/
 function AgentThreadPanel({ sessionId, runId, renderThread }) {
-	const state = useSubagents(sessionId);
-	const run = state.runs.find((item) => item.runId === runId);
+	const { runs, stopRequested } = useSubagents(sessionId);
+	const listed = runs.find((candidate) => candidate.runId === runId);
+	const [seen, setSeen] = useState(listed);
+	if (listed !== void 0 && listed !== seen) setSeen(listed);
+	const run = listed ?? seen;
+	const gone = listed === void 0;
+	const now = useNow();
 	const [guidance, setGuidance] = useState("");
-	const [busy, setBusy] = useState(false);
+	const [sending, setSending] = useState(false);
+	const [error, setError] = useState();
 	const [notice, setNotice] = useState();
-	const [confirmClear, setConfirmClear] = useState(false);
-	const act = async (action) => {
-		setBusy(true);
+	const [infoOpen, setInfoOpen] = useState(false);
+	const live = sessionId !== null && listed !== void 0 && !isTerminalRun(listed);
+	const stopping = stopRequested.includes(runId);
+	const canSteer = live && listed.canSteer !== false;
+	const submitGuidance = async () => {
+		const message = guidance.trim();
+		if (!canSteer || stopping || !message || sending) return;
+		setSending(true);
+		setError(void 0);
 		setNotice(void 0);
 		try {
-			await action();
+			const result = await steerRun(sessionId, runId, message);
+			if (result.state === "failed") {
+				setError(result.message);
+				return;
+			}
+			setGuidance("");
+			if (result.state === "pending") setNotice(result.message);
 		} catch (cause) {
-			setNotice(cause instanceof Error ? cause.message : String(cause));
+			setError(cause instanceof Error ? cause.message : String(cause));
 		} finally {
-			setBusy(false);
+			setSending(false);
 		}
 	};
+	const who = run ? agentDisplay(run) : void 0;
+	const badge = run ? RUN_BADGE[run.state] : void 0;
+	const elapsed = run ? elapsedRun(gone ? {
+		...run,
+		endedAt: run.endedAt ?? run.lastUpdate
+	} : run, now) : void 0;
+	const endNote = run && isTerminalRun(run) ? END_NOTE[run.state] : run?.canSteer === false && !gone ? "This runtime does not take guidance while it runs." : "Guidance is unavailable for this run.";
+	const toggleInfo = () => setInfoOpen((current) => !current);
 	return /* @__PURE__ */ jsxs(View, {
-		style: styles.screen,
+		testID: "agent-thread-panel",
+		style: styles$1.screen,
 		children: [
-			run ? /* @__PURE__ */ jsxs(View, {
-				style: styles.body,
+			/* @__PURE__ */ jsxs(View, {
+				testID: "agent-thread-header",
+				style: styles$1.threadHead,
 				children: [
-					/* @__PURE__ */ jsxs(Text, {
-						style: styles.title,
-						children: [
-							agentRunLabel(run),
-							" · ",
-							run.state
-						]
+					run && who ? /* @__PURE__ */ jsx(AgentAvatar, {
+						name: who.name,
+						seed: who.seed,
+						size: "sm"
+					}) : null,
+					/* @__PURE__ */ jsx(Text, {
+						testID: "agent-thread-agent",
+						numberOfLines: 1,
+						style: styles$1.name,
+						children: run ? agentRunLabel(run) : "Agent run"
 					}),
-					/* @__PURE__ */ jsxs(Text, {
-						style: styles.meta,
-						children: [
-							run.model,
-							"\\n",
-							run.task,
-							"\\n",
-							formatRunDuration(Math.max(0, (run.endedAt ?? run.lastUpdate) - run.startedAt))
-						]
+					who?.role ? /* @__PURE__ */ jsx(Text, {
+						numberOfLines: 1,
+						style: styles$1.dim,
+						children: who.role
+					}) : null,
+					badge && run ? /* @__PURE__ */ jsx(StatusBadge, {
+						tone: badge.tone,
+						testID: "agent-thread-state",
+						children: stopping && !isTerminalRun(run) ? "STOPPING…" : badge.label
+					}) : null,
+					/* @__PURE__ */ jsx(Text, {
+						numberOfLines: 1,
+						style: [styles$1.dim, styles$1.grow],
+						children: elapsed
 					}),
-					sessionId !== null ? isTerminalRun(run) ? /* @__PURE__ */ jsx(Button, {
-						variant: "outline",
-						onPress: () => setConfirmClear(true),
-						children: "Clear run"
-					}) : /* @__PURE__ */ jsx(Button, {
-						variant: "danger-outline",
-						disabled: busy || state.stopRequested.includes(runId),
-						onPress: () => void act(() => requestRunStop(sessionId, runId)),
-						children: state.stopRequested.includes(runId) ? "Stopping…" : "Stop"
+					live ? /* @__PURE__ */ jsx(RunControl, {
+						sessionId,
+						run: listed,
+						stopping
 					}) : null
 				]
-			}) : /* @__PURE__ */ jsx(Text, {
-				style: styles.meta,
-				children: "This run is no longer listed; its transcript stays readable."
 			}),
+			gone ? /* @__PURE__ */ jsx(Text, {
+				testID: "agent-thread-gone",
+				style: [styles$1.dim, styles$1.gone],
+				children: "This run is no longer listed. Its thread stays readable."
+			}) : null,
 			/* @__PURE__ */ jsx(View, {
-				style: styles.transcript,
+				style: styles$1.transcript,
 				children: renderThread(runId)
 			}),
-			run && sessionId !== null && !isTerminalRun(run) ? /* @__PURE__ */ jsxs(View, {
-				style: styles.body,
-				children: [/* @__PURE__ */ jsx(Textarea, {
-					accessibilityLabel: "Steering guidance",
-					value: guidance,
-					onChangeText: setGuidance,
-					placeholder: "Guide this agent…"
-				}), /* @__PURE__ */ jsx(Button, {
-					disabled: busy || guidance.trim() === "",
-					onPress: () => void act(async () => {
-						const result = await steerRun(sessionId, runId, guidance.trim());
-						setNotice(result.message);
-						if (result.state !== "failed") setGuidance("");
-					}),
-					children: "Send guidance"
-				})]
+			infoOpen ? /* @__PURE__ */ jsx(ScrollView, {
+				accessibilityLabel: "Run info",
+				testID: "run-info",
+				style: styles$1.info,
+				contentContainerStyle: styles$1.infoBody,
+				children: /* @__PURE__ */ jsx(RunInfo, { run })
 			}) : null,
-			notice ? /* @__PURE__ */ jsx(Text, {
-				style: styles.meta,
-				children: notice
-			}) : null,
-			/* @__PURE__ */ jsx(Sheet, {
-				open: confirmClear,
-				onOpenChange: setConfirmClear,
-				children: /* @__PURE__ */ jsxs(SheetContent, { children: [/* @__PURE__ */ jsx(SheetHeader, { children: /* @__PURE__ */ jsx(SheetTitle, { children: "Clear this run?" }) }), /* @__PURE__ */ jsxs(SheetBody, { children: [/* @__PURE__ */ jsx(Text, {
-					style: styles.meta,
-					children: "This hides the finished run. Its transcript stays on disk."
-				}), /* @__PURE__ */ jsx(Button, {
-					variant: "danger-outline",
-					onPress: () => {
-						if (sessionId !== null) dismissRun(sessionId, runId);
-						setConfirmClear(false);
-					},
-					children: "Clear"
-				})] })] })
+			canSteer ? /* @__PURE__ */ jsx(View, {
+				testID: "agent-steer-composer",
+				style: styles$1.composerWrap,
+				children: /* @__PURE__ */ jsxs(View, {
+					style: styles$1.composer,
+					children: [
+						/* @__PURE__ */ jsx(Textarea, {
+							variant: "bare",
+							testID: "agent-steer-input",
+							accessibilityLabel: "Steering guidance",
+							rows: 2,
+							value: guidance,
+							readOnly: sending,
+							disabled: stopping,
+							placeholder: stopping ? "Stopping, guidance paused" : "Guide this agent · it reads this at its next step",
+							style: styles$1.composerInput,
+							onChangeText: setGuidance
+						}),
+						error ? /* @__PURE__ */ jsx(Text, {
+							accessibilityRole: "alert",
+							testID: "agent-steer-error",
+							style: [styles$1.error, styles$1.composerPad],
+							children: error
+						}) : null,
+						/* @__PURE__ */ jsxs(View, {
+							style: styles$1.composerFoot,
+							children: [/* @__PURE__ */ jsx(Text, {
+								testID: "agent-steer-hint",
+								numberOfLines: 1,
+								style: [styles$1.dim, styles$1.grow],
+								children: notice
+							}), /* @__PURE__ */ jsxs(Button, {
+								testID: "agent-steer-submit",
+								variant: "primary",
+								size: "lg",
+								disabled: stopping || sending || guidance.trim() === "",
+								onPress: () => void submitGuidance(),
+								children: [/* @__PURE__ */ jsx(SendIcon, { size: 16 }), sending ? "Sending…" : "Send"]
+							})]
+						})
+					]
+				})
+			}) : /* @__PURE__ */ jsx(Text, {
+				testID: "agent-thread-end",
+				style: [styles$1.dim, styles$1.end],
+				children: endNote
+			}),
+			/* @__PURE__ */ jsxs(View, {
+				style: styles$1.chips,
+				children: [
+					/* @__PURE__ */ jsx(RunChip, {
+						dot: "magenta",
+						open: infoOpen,
+						onPress: toggleInfo,
+						children: run?.agent ?? "Agent"
+					}),
+					/* @__PURE__ */ jsxs(RunChip, {
+						dot: "green",
+						open: infoOpen,
+						onPress: toggleInfo,
+						children: [run?.model ? run.model.split("/").pop() ?? run.model : "Model not reported", run?.thinking ? /* @__PURE__ */ jsxs(Text, {
+							style: styles$1.dim,
+							children: [" ", run.thinking]
+						}) : null]
+					}),
+					/* @__PURE__ */ jsx(RunChip, {
+						dot: "blue",
+						open: infoOpen,
+						onPress: toggleInfo,
+						children: "Prompt"
+					})
+				]
 			})
 		]
 	});
 }
-const styles = StyleSheet.create((theme) => ({
-	screen: {
-		flex: 1,
-		backgroundColor: theme.colors.bg,
-		uni__dependencies: [0]
-	},
-	transcript: { flex: 1 },
-	body: {
-		padding: theme.spacing(3),
-		gap: theme.spacing(2),
-		uni__dependencies: [0]
-	},
-	title: {
-		color: theme.colors.hi,
-		fontSize: theme.fontSize.base,
-		fontWeight: "600",
-		uni__dependencies: [0]
-	},
-	meta: {
-		color: theme.colors.dim,
-		fontSize: theme.fontSize.sm,
-		uni__dependencies: [0]
-	},
-	error: {
-		color: theme.colors.red,
+/** `px-[26px]`: the cockpit's gutter. */
+const GUTTER = 26;
+const styles$1 = StyleSheet.create((theme) => {
+	const sans = fontOf(theme.fontFamily.sans);
+	const mono = fontOf(theme.fontFamily.mono);
+	const sm = {
+		fontFamily: sans,
 		fontSize: theme.fontSize.sm,
-		uni__dependencies: [0]
-	}
-}));
+		lineHeight: theme.lineHeight.sm
+	};
+	const base = {
+		fontFamily: sans,
+		fontSize: theme.fontSize.base,
+		lineHeight: theme.lineHeight.base
+	};
+	return {
+		screen: {
+			flex: 1,
+			backgroundColor: theme.colors.bg,
+			uni__dependencies: [0]
+		},
+		transcript: {
+			flex: 1,
+			minHeight: 0
+		},
+		body: {
+			padding: theme.spacing(3),
+			gap: theme.spacing(2),
+			uni__dependencies: [0]
+		},
+		grow: {
+			flex: 1,
+			minWidth: 0
+		},
+		spacer: { flex: 1 },
+		title: {
+			color: theme.colors.hi,
+			fontSize: theme.fontSize.base,
+			fontWeight: "600",
+			uni__dependencies: [0]
+		},
+		meta: {
+			color: theme.colors.dim,
+			fontSize: theme.fontSize.sm,
+			uni__dependencies: [0]
+		},
+		dim: {
+			...sm,
+			color: theme.colors.dim,
+			flexShrink: 1,
+			uni__dependencies: [0]
+		},
+		error: {
+			...sm,
+			color: theme.colors.red,
+			flexShrink: 1,
+			uni__dependencies: [0]
+		},
+		name: {
+			...base,
+			fontWeight: theme.fontWeight.semibold,
+			color: theme.colors.hi,
+			flexShrink: 1,
+			uni__dependencies: [0]
+		},
+		bodyText: {
+			...base,
+			color: theme.colors.text,
+			uni__dependencies: [0]
+		},
+		bodyDim: {
+			...base,
+			color: theme.colors.dim,
+			uni__dependencies: [0]
+		},
+		bodyRed: {
+			...base,
+			color: theme.colors.red,
+			uni__dependencies: [0]
+		},
+		violet: {
+			...base,
+			color: theme.colors.violet,
+			uni__dependencies: [0]
+		},
+		mono: {
+			fontFamily: mono,
+			fontSize: theme.fontSize.sm,
+			lineHeight: theme.lineHeight.sm,
+			color: theme.colors.text,
+			uni__dependencies: [0]
+		},
+		monoDim: {
+			fontFamily: mono,
+			fontSize: theme.fontSize.sm,
+			lineHeight: theme.lineHeight.sm,
+			color: theme.colors.dim,
+			uni__dependencies: [0]
+		},
+		capitalize: { textTransform: "capitalize" },
+		fleet: {
+			padding: theme.spacing(3),
+			gap: theme.spacing(3),
+			uni__dependencies: [0]
+		},
+		fleetHead: {
+			flexDirection: "row",
+			flexWrap: "wrap",
+			alignItems: "center",
+			columnGap: theme.spacing(3),
+			rowGap: theme.spacing(2),
+			uni__dependencies: [0]
+		},
+		heading: {
+			fontFamily: sans,
+			fontSize: theme.fontSize.lg,
+			lineHeight: theme.lineHeight.lg,
+			fontWeight: theme.fontWeight.semibold,
+			color: theme.colors.hi,
+			uni__dependencies: [0]
+		},
+		launch: { marginLeft: "auto" },
+		tally: { width: "100%" },
+		emptyHint: {
+			paddingVertical: theme.spacing(32),
+			textAlign: "center",
+			uni__dependencies: [0]
+		},
+		grid: {
+			gap: theme.spacing(4),
+			uni__dependencies: [0]
+		},
+		card: (edge) => ({
+			height: 280,
+			overflow: "hidden",
+			borderColor: theme.colors[edge],
+			uni__dependencies: [0]
+		}),
+		cardOpen: {
+			flex: 1,
+			minHeight: 0
+		},
+		cardHead: {
+			flexDirection: "row",
+			alignItems: "center",
+			gap: theme.spacing(2),
+			paddingHorizontal: theme.spacing(3),
+			paddingTop: theme.spacing(2.5),
+			paddingBottom: theme.spacing(1.5),
+			uni__dependencies: [0]
+		},
+		work: {
+			flexDirection: "row",
+			alignItems: "center",
+			gap: theme.spacing(2),
+			paddingHorizontal: theme.spacing(3),
+			paddingBottom: theme.spacing(2.5),
+			uni__dependencies: [0]
+		},
+		workLabel: {
+			...base,
+			fontWeight: theme.fontWeight.medium,
+			color: theme.colors.dim,
+			uni__dependencies: [0]
+		},
+		workHi: {
+			...base,
+			color: theme.colors.hi,
+			flexShrink: 1,
+			uni__dependencies: [0]
+		},
+		workDim: {
+			...base,
+			color: theme.colors.dim,
+			flexShrink: 1,
+			uni__dependencies: [0]
+		},
+		stream: {
+			flex: 1,
+			minHeight: 0,
+			overflow: "hidden",
+			borderTopWidth: 1,
+			borderTopColor: theme.colors["border-soft"],
+			backgroundColor: theme.colors.deep,
+			uni__dependencies: [0]
+		},
+		cardError: {
+			borderTopWidth: 1,
+			borderTopColor: theme.colors["border-soft"],
+			paddingHorizontal: theme.spacing(3),
+			paddingVertical: theme.spacing(1.5),
+			uni__dependencies: [0]
+		},
+		cardFoot: {
+			flexDirection: "row",
+			alignItems: "center",
+			gap: theme.spacing(3),
+			borderTopWidth: 1,
+			borderTopColor: theme.colors["border-soft"],
+			paddingHorizontal: theme.spacing(3),
+			paddingVertical: theme.spacing(1.5),
+			uni__dependencies: [0]
+		},
+		sheetRows: {
+			gap: theme.spacing(1.5),
+			uni__dependencies: [0]
+		},
+		sheetRow: {
+			flexDirection: "row",
+			gap: theme.spacing(2.5),
+			uni__dependencies: [0]
+		},
+		sheetRowLabel: {
+			width: 44,
+			flexShrink: 0
+		},
+		sheetBlock: {
+			gap: theme.spacing(1),
+			borderRadius: theme.borderRadius.md,
+			borderWidth: 1,
+			borderColor: theme.colors.border,
+			backgroundColor: theme.colors.deep,
+			paddingHorizontal: theme.spacing(3),
+			paddingVertical: theme.spacing(2.5),
+			uni__dependencies: [0]
+		},
+		sheetBlockLabel: {
+			...base,
+			fontWeight: theme.fontWeight.medium,
+			color: theme.colors.dim,
+			uni__dependencies: [0]
+		},
+		threadHead: {
+			flexDirection: "row",
+			alignItems: "center",
+			gap: theme.spacing(2.5),
+			height: 44,
+			paddingHorizontal: GUTTER,
+			borderBottomWidth: 1,
+			borderBottomColor: theme.colors["border-soft"],
+			backgroundColor: theme.colors.rail,
+			uni__dependencies: [0]
+		},
+		gone: {
+			paddingHorizontal: GUTTER,
+			paddingVertical: theme.spacing(2),
+			borderBottomWidth: 1,
+			borderBottomColor: theme.colors["border-soft"],
+			uni__dependencies: [0]
+		},
+		info: {
+			marginHorizontal: GUTTER,
+			marginBottom: theme.spacing(2),
+			maxHeight: "40%",
+			flexGrow: 0,
+			borderRadius: theme.borderRadius.lg,
+			borderWidth: 1,
+			borderColor: theme.colors.border,
+			backgroundColor: theme.colors.panel,
+			uni__dependencies: [0]
+		},
+		infoBody: {
+			gap: theme.spacing(3),
+			paddingHorizontal: theme.spacing(4),
+			paddingVertical: theme.spacing(3),
+			uni__dependencies: [0]
+		},
+		infoRow: {
+			flexDirection: "row",
+			gap: theme.spacing(3),
+			uni__dependencies: [0]
+		},
+		infoLabel: {
+			width: 96,
+			flexShrink: 0
+		},
+		infoValue: {
+			flex: 1,
+			minWidth: 0
+		},
+		prompt: {
+			maxHeight: 160,
+			borderRadius: theme.borderRadius.md,
+			backgroundColor: theme.colors.deep,
+			paddingHorizontal: theme.spacing(3),
+			paddingVertical: theme.spacing(2),
+			uni__dependencies: [0]
+		},
+		composerWrap: {
+			paddingHorizontal: GUTTER,
+			paddingTop: theme.spacing(2),
+			paddingBottom: theme.spacing(2),
+			uni__dependencies: [0]
+		},
+		composer: {
+			borderRadius: theme.borderRadius.lg,
+			borderWidth: 1,
+			borderColor: theme.colors.border,
+			backgroundColor: theme.colors.panel,
+			uni__dependencies: [0]
+		},
+		composerInput: {
+			paddingHorizontal: theme.spacing(4),
+			paddingTop: theme.spacing(3),
+			fontSize: theme.fontSize.lg,
+			lineHeight: theme.lineHeightRelaxed.lg,
+			uni__dependencies: [0]
+		},
+		composerPad: {
+			paddingHorizontal: theme.spacing(4),
+			paddingTop: theme.spacing(1),
+			uni__dependencies: [0]
+		},
+		composerFoot: {
+			flexDirection: "row",
+			alignItems: "center",
+			gap: theme.spacing(3),
+			paddingHorizontal: theme.spacing(4),
+			paddingTop: theme.spacing(1),
+			paddingBottom: theme.spacing(3),
+			uni__dependencies: [0]
+		},
+		end: {
+			paddingHorizontal: GUTTER,
+			paddingTop: theme.spacing(3),
+			paddingBottom: theme.spacing(2),
+			uni__dependencies: [0]
+		},
+		chips: {
+			flexDirection: "row",
+			flexWrap: "wrap",
+			alignItems: "center",
+			gap: theme.spacing(2),
+			paddingHorizontal: GUTTER,
+			paddingBottom: theme.spacing(4),
+			uni__dependencies: [0]
+		},
+		chip: {
+			maxWidth: "100%",
+			gap: theme.spacing(2),
+			uni__dependencies: [0]
+		}
+	};
+});
 //#endregion
 //#region src/extensions/workspaces/sessions/(frontend)/activity-group/agents.native.ts
 var agents_native_default = defineActivityGroup({
@@ -718,24 +1634,191 @@ var subagent_catalog_native_default = defineChannelFile(subagentCatalogChannel);
 var subagent_runs_native_default = defineChannelFile(subagentRunsChannel);
 //#endregion
 //#region src/extensions/workspaces/sessions/(frontend)/fill/_components/AgentsActivitySection.native.tsx
+const TICK_MS = 1e4;
+const AVATAR_STATE = {
+	queued: "waiting",
+	running: "running",
+	done: "done",
+	failed: "failed",
+	stopped: "done"
+};
+function elapsed(run, now) {
+	const end = run.endedAt ?? (isTerminalRun(run) ? run.lastUpdate : now);
+	return formatRunDuration(Math.max(0, end - run.startedAt));
+}
+/** The one-liner under a row: what the run is doing, or how it ended. */
+function detail(run) {
+	if (run.state === "failed" && run.error) return run.error;
+	if (run.summary) return run.summary.split("\n").find((line) => line.trim() !== "") ?? "";
+	return run.currentTool ?? run.tail.at(-1) ?? (run.state === "running" ? "" : run.state);
+}
 function AgentsActivitySection({ sessionId, openTransientTab }) {
 	const runs = activityRuns(useSubagents(sessionId));
-	return /* @__PURE__ */ jsxs(View, { children: [runs.map((run) => /* @__PURE__ */ jsx(AgentRunRow, {
-		run,
-		onPress: () => openTransientTab(agentThreadTab(run))
-	}, run.runId)), runs.length === 0 ? /* @__PURE__ */ jsx(Button, {
-		variant: "ghost",
-		testID: "activity-agents-launch",
-		disabled: sessionId === null,
-		onPress: () => {
-			if (sessionId !== null) {
-				openCatalog(sessionId);
-				openTransientTab(subagentsTab());
-			}
-		},
-		children: "Launch an agent"
-	}) : null] });
+	const [now, setNow] = useState(() => Date.now());
+	useEffect(() => {
+		const timer = setInterval(() => setNow(Date.now()), TICK_MS);
+		return () => clearInterval(timer);
+	}, []);
+	if (runs.length === 0) return /* @__PURE__ */ jsxs(View, {
+		style: styles.idle,
+		children: [/* @__PURE__ */ jsx(Text, {
+			testID: "activity-summary-agents",
+			style: styles.status,
+			children: "Idle"
+		}), /* @__PURE__ */ jsxs(Pressable, {
+			accessibilityRole: "button",
+			accessibilityState: { disabled: sessionId === null },
+			testID: "activity-agents-launch",
+			disabled: sessionId === null,
+			hitSlop: 10,
+			onPress: () => {
+				if (sessionId !== null) {
+					openCatalog(sessionId);
+					openTransientTab(subagentsTab());
+				}
+			},
+			style: styles.action,
+			children: [/* @__PURE__ */ jsx(Text, {
+				style: styles.actionText(sessionId === null),
+				children: "Launch an agent"
+			}), /* @__PURE__ */ jsx(ArrowRightIcon, {
+				size: 14,
+				color: sessionId === null ? "dim" : "green"
+			})]
+		})]
+	});
+	return /* @__PURE__ */ jsx(View, {
+		testID: "activity-agent-runs",
+		style: styles.runs,
+		children: runs.map((run) => {
+			const who = agentDisplay(run);
+			const description = detail(run);
+			return /* @__PURE__ */ jsx(Button, {
+				variant: "ghost",
+				size: "card",
+				testID: `activity-run-${run.runId}`,
+				accessibilityLabel: `Open ${who.name}'s conversation`,
+				onPress: () => {
+					if (sessionId !== null) openTransientTab(agentThreadTab(run));
+				},
+				style: styles.run,
+				children: /* @__PURE__ */ jsxs(View, {
+					style: styles.line,
+					children: [
+						/* @__PURE__ */ jsx(AgentAvatar, {
+							name: who.name,
+							seed: who.seed,
+							state: AVATAR_STATE[run.state],
+							size: "sm"
+						}),
+						/* @__PURE__ */ jsxs(View, {
+							style: styles.text,
+							children: [/* @__PURE__ */ jsxs(View, {
+								style: styles.who,
+								children: [/* @__PURE__ */ jsx(Text, {
+									numberOfLines: 1,
+									style: styles.name,
+									children: who.name
+								}), who.role ? /* @__PURE__ */ jsx(Text, {
+									numberOfLines: 1,
+									style: styles.dim,
+									children: who.role
+								}) : null]
+							}), description ? /* @__PURE__ */ jsx(Text, {
+								numberOfLines: 1,
+								style: run.state === "failed" ? styles.failed : styles.dim,
+								children: description
+							}) : null]
+						}),
+						/* @__PURE__ */ jsxs(Text, {
+							style: styles.dim,
+							children: [elapsed(run, now), run.toolCount !== void 0 ? ` · ${run.toolCount} tools` : ""]
+						})
+					]
+				})
+			}, run.runId);
+		})
+	});
 }
+const styles = StyleSheet.create((theme) => {
+	const small = {
+		fontFamily: fontOf(theme.fontFamily.sans),
+		fontSize: theme.fontSize.sm,
+		lineHeight: theme.lineHeight.sm
+	};
+	return {
+		idle: {
+			flexDirection: "row",
+			alignItems: "center",
+			flexWrap: "wrap",
+			gap: theme.spacing(4),
+			uni__dependencies: [0]
+		},
+		status: {
+			...small,
+			color: theme.colors.dim,
+			uni__dependencies: [0]
+		},
+		action: {
+			flexDirection: "row",
+			alignItems: "center",
+			gap: theme.spacing(1),
+			uni__dependencies: [0]
+		},
+		actionText: (disabled) => ({
+			fontFamily: fontOf(theme.fontFamily.sans),
+			fontSize: theme.fontSize.base,
+			lineHeight: theme.lineHeight.base,
+			fontWeight: theme.fontWeight.medium,
+			color: disabled ? theme.colors.dim : theme.colors.green,
+			uni__dependencies: [0]
+		}),
+		runs: { gap: 2 },
+		run: {
+			paddingHorizontal: theme.spacing(1),
+			paddingVertical: theme.spacing(1),
+			uni__dependencies: [0]
+		},
+		line: {
+			flexDirection: "row",
+			alignItems: "center",
+			gap: theme.spacing(2),
+			minWidth: 0,
+			uni__dependencies: [0]
+		},
+		text: {
+			flex: 1,
+			minWidth: 0
+		},
+		who: {
+			flexDirection: "row",
+			alignItems: "baseline",
+			gap: theme.spacing(1.5),
+			minWidth: 0,
+			uni__dependencies: [0]
+		},
+		name: {
+			fontFamily: fontOf(theme.fontFamily.sans),
+			fontSize: theme.fontSize.base,
+			lineHeight: theme.lineHeight.base,
+			fontWeight: theme.fontWeight.semibold,
+			color: theme.colors.hi,
+			flexShrink: 1,
+			uni__dependencies: [0]
+		},
+		dim: {
+			...small,
+			color: theme.colors.dim,
+			flexShrink: 1,
+			uni__dependencies: [0]
+		},
+		failed: {
+			...small,
+			color: theme.colors.red,
+			uni__dependencies: [0]
+		}
+	};
+});
 //#endregion
 //#region src/extensions/workspaces/sessions/(frontend)/fill/Agents.activity.agents.native.tsx
 var Agents_activity_agents_native_default = defineFill({ component: AgentsActivitySection });