@agimon-ai/po-team 0.0.0-alpha.35 → 0.0.0-alpha.37

package/dist/extensions/native.mjs

@@ -4,8 +4,9 @@ import { createElement, useCallback, useEffect, useState, useSyncExternalStore }
 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 { Pressable } from "react-native-unistyles/components/native/Pressable";
+import { FlatList } from "react-native-unistyles/components/native/FlatList";
 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: {
@@ -389,329 +390,488 @@ 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 = {
+//#region src/extensions/workspaces/sessions/(frontend)/_components/CompactAgents.native.tsx
+const BADGES = {
 	queued: {
-		label: "QUEUED",
+		label: "Queued",
 		tone: "neutral"
 	},
 	running: {
-		label: "RUNNING",
+		label: "Running",
 		tone: "running"
 	},
 	done: {
-		label: "DONE",
+		label: "Done",
 		tone: "ok"
 	},
 	failed: {
-		label: "FAILED",
+		label: "Failed",
 		tone: "error"
 	},
 	stopped: {
-		label: "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);
-		return () => sub.unsubscribe();
-	}, []);
-	return useSyncExternalStore(subscribe, () => subagents.select(subagents.store.state, sessionId));
+function terminal(item) {
+	return item.state === "done" || item.state === "failed" || item.state === "stopped";
 }
-function useNow() {
-	const [now, setNow] = useState(() => Date.now());
-	useEffect(() => {
-		const timer = setInterval(() => setNow(Date.now()), TICK_MS$1);
-		return () => clearInterval(timer);
-	}, []);
-	return now;
+function elapsedRun(item, now) {
+	return formatRunDuration(Math.max(0, (item.endedAt ?? (terminal(item) ? item.lastUpdate : now)) - item.startedAt));
 }
-/** 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 firstLine(text) {
+	return text.split("\n").find((line) => line.trim() !== "") ?? "";
 }
-function subagentsTab() {
-	return {
-		id: "subagents",
-		label: "Agents",
-		panel: SubagentsPanel
-	};
-}
-function agentThreadTab(run) {
-	const runId = run.runId;
-	return {
-		id: `subagents-run-${runId}`,
-		label: agentRunLabel(run),
-		panel: (props) => /* @__PURE__ */ jsx(AgentThreadPanel, {
-			...props,
-			runId
-		}, `${props.sessionId}:${runId}`)
-	};
+/** Only the elapsed leaf ticks, and only for an active, still-listed run. */
+function RunElapsed({ item, now, active = true }) {
+	const [time, setTime] = useState(() => Date.now());
+	const ticking = now === void 0 && active && !terminal(item);
+	useEffect(() => {
+		if (!ticking) return void 0;
+		const timer = setInterval(() => setTime(Date.now()), 1e4);
+		return () => clearInterval(timer);
+	}, [ticking]);
+	return /* @__PURE__ */ jsx(Fragment, { children: elapsedRun(item, now ?? time) });
 }
-/** 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
-		})]
+function RunActions({ item, stopping, initiallyOpen, onAction }) {
+	return /* @__PURE__ */ jsxs(DropdownMenu, {
+		defaultOpen: initiallyOpen,
+		children: [/* @__PURE__ */ jsx(DropdownMenuTrigger, {
+			variant: "ghost",
+			size: "icon",
+			style: styles$2.menu,
+			testID: `compact-run-menu-${item.runId}`,
+			accessibilityLabel: `Actions for ${agentRunLabel(item)}`,
+			children: /* @__PURE__ */ jsx(KebabIcon, { size: 14 })
+		}), /* @__PURE__ */ jsxs(DropdownMenuContent, { children: [
+			/* @__PURE__ */ jsx(DropdownMenuItem, {
+				onSelect: () => onAction("thread", item),
+				children: "Open thread"
+			}),
+			/* @__PURE__ */ jsx(DropdownMenuItem, {
+				onSelect: () => onAction("details", item),
+				children: "Details"
+			}),
+			/* @__PURE__ */ jsx(DropdownMenuSeparator, {}),
+			terminal(item) ? /* @__PURE__ */ jsx(DropdownMenuItem, {
+				onSelect: () => onAction("clear", item),
+				children: "Clear from the list"
+			}) : /* @__PURE__ */ jsx(DropdownMenuItem, {
+				variant: "destructive",
+				disabled: stopping,
+				onSelect: () => onAction("stop", item),
+				children: stopping ? "Stopping…" : "Stop"
+			})
+		] })]
 	});
 }
-/** 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"
-		}),
-		/* @__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);
+function CompactRun({ now, item, stopping, menuRunId, stopError, onAction }) {
+	const who = agentDisplay(item);
+	const badge = BADGES[item.state];
+	const summary = item.promptWithheld ? "Prompt withheld: this task was marked sensitive." : firstLine(item.error ?? item.summary ?? item.task) || "No prompt recorded";
 	return /* @__PURE__ */ jsxs(Panel, {
-		testID: `run-card-${run.runId}`,
-		style: styles$1.card(STATUS_EDGE[badge.tone]),
+		testID: `compact-run-${item.runId}`,
+		style: styles$2.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,
+			testID: `compact-run-open-${item.runId}`,
+			onPress: () => onAction("thread", item),
+			style: styles$2.open,
 			children: [
 				/* @__PURE__ */ jsxs(View, {
-					style: styles$1.cardHead,
+					style: styles$2.rowHead,
 					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__ */ jsxs(View, {
+							style: styles$2.nameBlock,
+							children: [/* @__PURE__ */ jsx(Text, {
+								numberOfLines: 2,
+								style: styles$2.name,
+								children: who.name
+							}), who.role ? /* @__PURE__ */ jsxs(Text, {
+								numberOfLines: 1,
+								style: styles$2.dim,
+								children: [
+									who.role,
+									" · ",
+									/* @__PURE__ */ jsx(RunElapsed, {
+										item,
+										now
+									})
+								]
+							}) : null]
 						}),
 						/* @__PURE__ */ jsx(StatusBadge, {
 							tone: badge.tone,
-							testID: "run-state",
-							children: badge.label
+							children: stopping ? "Stopping…" : 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
-					})
+				/* @__PURE__ */ jsx(Text, {
+					numberOfLines: 2,
+					style: item.error ? styles$2.error : styles$2.workText,
+					children: summary
 				}),
-				run.state === "failed" && run.error ? /* @__PURE__ */ jsx(Text, {
-					testID: "run-error",
-					numberOfLines: 1,
-					style: [styles$1.error, styles$1.cardError],
-					children: run.error
+				stopError ? /* @__PURE__ */ jsx(Text, {
+					accessibilityRole: "alert",
+					style: styles$2.error,
+					children: stopError
 				}) : 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
-				})
-			]
+		}), /* @__PURE__ */ jsx(RunActions, {
+			item,
+			stopping,
+			initiallyOpen: menuRunId === item.runId,
+			onAction
 		})]
 	});
 }
-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];
+/** Same prompt/report/failure and control contract as the current RunDetailSheet. */
+function CompactRunDetails({ now, actions, stopError, item, stopping, onClose, onAction }) {
+	const badge = BADGES[item.state];
+	const facts = [
+		["Run", item.runId],
+		...item.taskRef ? [["Task", item.taskRef]] : [],
+		["Model", item.model ?? "The runtime default"],
+		["Folder", abbreviateCwd(item.cwd)],
+		...item.currentTool ? [["Current action", item.currentTool]] : [],
+		["Work", [item.toolCount === void 0 ? "No tools reported" : `${item.toolCount} tools`, item.tokens === void 0 ? void 0 : `${item.tokens.toLocaleString("en-US")} tk`].filter(Boolean).join(" · ")]
+	];
 	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 }),
+		children: /* @__PURE__ */ jsxs(SheetContent, { children: [/* @__PURE__ */ jsxs(SheetHeader, { children: [/* @__PURE__ */ jsx(SheetTitle, { children: agentRunLabel(item) }), /* @__PURE__ */ jsx(StatusBadge, {
+			tone: badge.tone,
+			children: badge.label
+		})] }), /* @__PURE__ */ jsxs(SheetBody, { children: [
+			actions,
+			stopError ? /* @__PURE__ */ jsx(Text, {
+				accessibilityRole: "alert",
+				style: styles$2.error,
+				children: stopError
+			}) : null,
 			/* @__PURE__ */ jsx(Text, {
-				style: styles$1.dim,
-				children: elapsedRun(run, now)
+				style: styles$2.dim,
+				children: /* @__PURE__ */ jsx(RunElapsed, {
+					item,
+					now
+				})
 			}),
-			renderSlot(RUN_ACTIONS_SLOT.slot),
-			/* @__PURE__ */ jsx(RunControl, {
-				sessionId,
-				run,
-				stopping
-			})
-		] }), /* @__PURE__ */ jsxs(SheetBody, { children: [
+			facts.map(([label, value]) => /* @__PURE__ */ jsxs(View, {
+				style: styles$2.fact,
+				children: [/* @__PURE__ */ jsx(Text, {
+					style: styles$2.factLabel,
+					children: label
+				}), /* @__PURE__ */ jsx(Text, {
+					selectable: true,
+					style: styles$2.factValue,
+					children: value
+				})]
+			}, label)),
 			/* @__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)"
+				style: styles$2.detailBlock,
+				children: [/* @__PURE__ */ jsx(Text, {
+					style: styles$2.name,
+					children: "Prompt from the main agent"
+				}), /* @__PURE__ */ jsx(Text, {
+					selectable: true,
+					style: styles$2.body,
+					children: item.promptWithheld ? "Withheld: this task was marked sensitive." : item.task || "(no prompt recorded)"
+				})]
 			}),
-			run.summary ? /* @__PURE__ */ jsx(SheetBlock, {
-				label: "REPORT",
-				testId: "sheet-summary",
-				text: run.summary
+			item.summary ? /* @__PURE__ */ jsxs(View, {
+				style: styles$2.detailBlock,
+				children: [/* @__PURE__ */ jsx(Text, {
+					style: styles$2.name,
+					children: "Report"
+				}), /* @__PURE__ */ jsx(Text, {
+					selectable: true,
+					style: styles$2.body,
+					children: item.summary
+				})]
 			}) : null,
-			run.error ? /* @__PURE__ */ jsx(SheetBlock, {
-				label: "FAILURE",
-				testId: "sheet-error",
-				text: run.error,
-				failure: true
-			}) : null
+			item.error ? /* @__PURE__ */ jsxs(View, {
+				style: styles$2.detailBlock,
+				children: [/* @__PURE__ */ jsx(Text, {
+					style: styles$2.name,
+					children: "Failure"
+				}), /* @__PURE__ */ jsx(Text, {
+					selectable: true,
+					style: styles$2.error,
+					children: item.error
+				})]
+			}) : null,
+			/* @__PURE__ */ jsx(Button, {
+				variant: terminal(item) || stopping ? "outline" : "danger-outline",
+				disabled: stopping,
+				onPress: () => onAction(terminal(item) ? "clear" : "stop", item),
+				children: terminal(item) ? "Clear from the list" : stopping ? "Stopping…" : "Stop"
+			})
 		] })] })
 	});
 }
+function CompactAgents({ now, items, stoppingRunId, stoppingRunIds = [], menuRunId, stopError, stopErrorRunId, onAction }) {
+	const tally = Object.keys(BADGES).map((state) => `${items.filter((item) => item.state === state).length} ${state}`).join(" · ");
+	return /* @__PURE__ */ jsx(View, {
+		style: styles$2.screen,
+		children: /* @__PURE__ */ jsx(FlatList, {
+			accessibilityLabel: "Agent runs",
+			data: items,
+			keyExtractor: (item) => item.runId,
+			style: styles$2.list,
+			contentContainerStyle: styles$2.listContent,
+			initialNumToRender: 8,
+			maxToRenderPerBatch: 8,
+			windowSize: 5,
+			ListHeaderComponent: /* @__PURE__ */ jsxs(View, {
+				style: styles$2.headingBlock,
+				children: [/* @__PURE__ */ jsxs(View, {
+					style: styles$2.headingRow,
+					children: [/* @__PURE__ */ jsx(Text, {
+						accessibilityRole: "header",
+						style: styles$2.heading,
+						children: "Agents · this session"
+					}), /* @__PURE__ */ jsx(Button, {
+						variant: "primary",
+						testID: "compact-agent-launch",
+						onPress: () => onAction("launch"),
+						children: "New agent run"
+					})]
+				}), /* @__PURE__ */ jsx(Text, {
+					testID: "compact-agent-tally",
+					style: styles$2.dim,
+					children: items.length === 0 ? "No runs yet" : tally
+				})]
+			}),
+			ListEmptyComponent: /* @__PURE__ */ jsxs(View, {
+				style: styles$2.empty,
+				children: [/* @__PURE__ */ jsx(Text, {
+					style: styles$2.body,
+					children: "No runs yet"
+				}), /* @__PURE__ */ jsx(Text, {
+					style: styles$2.dim,
+					children: "Start an agent run to get help with your work."
+				})]
+			}),
+			renderItem: ({ item }) => /* @__PURE__ */ jsx(CompactRun, {
+				item,
+				now,
+				stopping: stoppingRunId === item.runId || stoppingRunIds.includes(item.runId),
+				menuRunId,
+				stopError: item.runId === (stopErrorRunId ?? items[0]?.runId) ? stopError : void 0,
+				onAction
+			}),
+			ListFooterComponent: items.length === 0 ? void 0 : /* @__PURE__ */ jsx(Text, {
+				style: styles$2.dim,
+				children: "Tap a run to open its thread. Run actions holds details, stop and clear. Finished runs leave the list after 10m."
+			})
+		})
+	});
+}
+const styles$2 = StyleSheet.create((theme) => {
+	const sans = fontOf(theme.fontFamily.sans);
+	const small = {
+		fontFamily: sans,
+		fontSize: theme.fontSize.sm,
+		lineHeight: theme.lineHeight.sm
+	};
+	const base = {
+		fontFamily: sans,
+		fontSize: theme.fontSize.base,
+		lineHeight: theme.lineHeight.base
+	};
+	return {
+		list: { flex: 1 },
+		listContent: {
+			padding: theme.spacing(3),
+			uni__dependencies: [0]
+		},
+		screen: {
+			flex: 1,
+			backgroundColor: theme.colors.bg,
+			uni__dependencies: [0]
+		},
+		headingBlock: {
+			gap: theme.spacing(2),
+			paddingBottom: theme.spacing(3),
+			uni__dependencies: [0]
+		},
+		headingRow: {
+			flexDirection: "row",
+			flexWrap: "wrap",
+			alignItems: "center",
+			justifyContent: "space-between",
+			gap: 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]
+		},
+		card: (edge) => ({
+			flexDirection: "row",
+			marginBottom: theme.spacing(3),
+			borderColor: theme.colors[edge],
+			uni__dependencies: [0]
+		}),
+		open: {
+			flex: 1,
+			minWidth: 0,
+			minHeight: 44,
+			padding: theme.spacing(3),
+			gap: theme.spacing(1.5),
+			uni__dependencies: [0]
+		},
+		rowHead: {
+			flexDirection: "row",
+			alignItems: "center",
+			gap: theme.spacing(2),
+			uni__dependencies: [0]
+		},
+		nameBlock: {
+			flex: 1,
+			minWidth: 0
+		},
+		name: {
+			...base,
+			fontWeight: theme.fontWeight.semibold,
+			color: theme.colors.hi,
+			uni__dependencies: [0]
+		},
+		dim: {
+			...small,
+			color: theme.colors.dim,
+			uni__dependencies: [0]
+		},
+		error: {
+			...small,
+			color: theme.colors.red,
+			uni__dependencies: [0]
+		},
+		body: {
+			...base,
+			color: theme.colors.text,
+			uni__dependencies: [0]
+		},
+		workText: {
+			...base,
+			minWidth: 0,
+			color: theme.colors.text,
+			uni__dependencies: [0]
+		},
+		menu: {
+			width: 44,
+			minWidth: 44,
+			minHeight: 44,
+			alignSelf: "flex-start"
+		},
+		empty: {
+			gap: theme.spacing(2),
+			paddingVertical: theme.spacing(3),
+			uni__dependencies: [0]
+		},
+		fact: {
+			flexDirection: "row",
+			gap: theme.spacing(3),
+			uni__dependencies: [0]
+		},
+		factLabel: {
+			...small,
+			width: 44,
+			color: theme.colors.dim,
+			uni__dependencies: [0]
+		},
+		factValue: {
+			...base,
+			flex: 1,
+			minWidth: 0,
+			color: theme.colors.text,
+			uni__dependencies: [0]
+		},
+		detailBlock: {
+			gap: theme.spacing(1),
+			borderWidth: 1,
+			borderColor: theme.colors.border,
+			borderRadius: theme.borderRadius.md,
+			backgroundColor: theme.colors.deep,
+			padding: theme.spacing(3),
+			uni__dependencies: [0]
+		}
+	};
+});
+//#endregion
+//#region src/extensions/workspaces/sessions/(frontend)/_components/SubagentsPanel.native.tsx
+/** 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);
+		return () => sub.unsubscribe();
+	}, []);
+	return useSyncExternalStore(subscribe, () => subagents.select(subagents.store.state, sessionId));
+}
+function subagentsTab() {
+	return {
+		id: "subagents",
+		label: "Agents",
+		panel: SubagentsPanel
+	};
+}
+function agentThreadTab(run) {
+	const runId = run.runId;
+	return {
+		id: `subagents-run-${runId}`,
+		label: agentRunLabel(run),
+		panel: (props) => /* @__PURE__ */ jsx(AgentThreadPanel, {
+			...props,
+			runId
+		}, `${props.sessionId}:${runId}`)
+	};
+}
 /** The subagents tab: the focused session's fleet, one card per run. */
 function SubagentsPanel(props) {
-	const { sessionId, renderSlot, renderThread, openTransientTab } = props;
+	const { sessionId, renderSlot, 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);
@@ -725,86 +885,48 @@ function SubagentsPanel(props) {
 	]);
 	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;
+	const [stopError, setStopError] = useState();
+	const onAction = (action, run) => {
+		if (sessionId === null) return;
+		if (action === "launch") {
+			openRun(sessionId, void 0);
+			openCatalog(sessionId);
+		} else if (run) {
+			if (action === "thread") {
+				closeCatalog(sessionId);
+				openTransientTab(agentThreadTab(run));
+			} else if (action === "details") {
+				closeCatalog(sessionId);
+				openRun(sessionId, run.runId);
+			} else if (action === "clear") dismissRun(sessionId, run.runId);
+			else if (action === "stop") {
+				setStopError(void 0);
+				requestRunStop(sessionId, run.runId).catch((cause) => setStopError({
+					runId: run.runId,
+					message: cause instanceof Error ? cause.message : String(cause)
+				}));
+			}
+		}
+	};
 	return /* @__PURE__ */ jsxs(View, {
 		testID: "subagents-panel",
 		style: styles$1.screen,
 		children: [
-			/* @__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"
-				})] })]
+			/* @__PURE__ */ jsx(CompactAgents, {
+				items: runs,
+				stoppingRunIds: stopRequested,
+				stopError: stopError?.message,
+				stopErrorRunId: stopError?.runId,
+				onAction
 			}),
 			/* @__PURE__ */ jsx(AgentCatalog, { ...props }),
-			shownRun && sessionId !== null ? /* @__PURE__ */ jsx(RunDetailSheet, {
-				sessionId,
-				run: shownRun,
-				now,
+			shownRun && sessionId !== null ? /* @__PURE__ */ jsx(CompactRunDetails, {
+				item: shownRun,
 				stopping: stopping(shownRun),
-				renderSlot,
-				onClose: () => openRun(sessionId, void 0)
+				actions: renderSlot(RUN_ACTIONS_SLOT.slot),
+				stopError: stopError?.runId === shownRun.runId ? stopError.message : void 0,
+				onClose: () => openRun(sessionId, void 0),
+				onAction
 			}) : null
 		]
 	});
@@ -1094,7 +1216,6 @@ function AgentThreadPanel({ sessionId, runId, renderThread }) {
 	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 [sending, setSending] = useState(false);
 	const [error, setError] = useState();
@@ -1125,10 +1246,6 @@ function AgentThreadPanel({ sessionId, runId, renderThread }) {
 	};
 	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, {
@@ -1163,7 +1280,13 @@ function AgentThreadPanel({ sessionId, runId, renderThread }) {
 					/* @__PURE__ */ jsx(Text, {
 						numberOfLines: 1,
 						style: [styles$1.dim, styles$1.grow],
-						children: elapsed
+						children: run ? /* @__PURE__ */ jsx(RunElapsed, {
+							item: gone ? {
+								...run,
+								endedAt: run.endedAt ?? run.lastUpdate
+							} : run,
+							active: !gone
+						}) : null
 					}),
 					live ? /* @__PURE__ */ jsx(RunControl, {
 						sessionId,
@@ -1364,138 +1487,6 @@ const styles$1 = StyleSheet.create((theme) => {
 			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",