@mcp-b/react-components 0.48.0 → 0.49.0

package/dist/components/agents-sdk/SubagentRunIndicator.d.ts

@@ -1,8 +1,9 @@
+import { n as AgentToolRunValue } from "../../AgentToolRunsContext-GMe_hSnD.js";
 import * as React from "react";
-import { AgentToolRunPart, AgentToolRunState } from "agents/agent-tools";
+import { AgentToolRunPart } from "agents/agent-tools";
 
 //#region src/components/agents-sdk/SubagentRunIndicator.d.ts
-declare function getSubagentRunName(run: AgentToolRunState): string;
+declare function getSubagentRunName(run: AgentToolRunValue): string;
 /**
  * One line of status for a retained run, derived from upstream's whole
  * record: the latest progress report or streamed text while it runs, the
@@ -11,10 +12,10 @@ declare function getSubagentRunName(run: AgentToolRunState): string;
  * source is cut in one place here, because a host's progress message, error,
  * and report are all unbounded prose.
  */
-declare function getSubagentRunStatusText(run: AgentToolRunState): string;
+declare function getSubagentRunStatusText(run: AgentToolRunValue): string;
 interface SubagentRunIndicatorProps<Part extends AgentToolRunPart = AgentToolRunPart> extends Omit<React.HTMLAttributes<HTMLSpanElement>, "children"> {
   /** Complete retained-run state returned by `useAgentToolEvents()`. */
-  run: AgentToolRunState<Part>;
+  run: AgentToolRunValue<Part>;
 }
 /** Decorative status mark derived from a whole upstream retained-run record. */
 declare function SubagentRunIndicator<Part extends AgentToolRunPart = AgentToolRunPart>({
@@ -26,15 +27,14 @@ declare function SubagentRunIndicator<Part extends AgentToolRunPart = AgentToolR
   ref?: React.Ref<HTMLSpanElement>;
 }): React.JSX.Element;
 /**
- * How a run labels itself anywhere it appears: its Nanite, its name over its
- * live status line, and its status mark. The selector chip and the drill-in's
- * top bar share this so what a person clicks and what they land on read the
- * same. The caller owns the surrounding row (a link, a bar title).
+ * How a run labels itself anywhere it appears: one status mark followed by its
+ * name and live status line. The selector and drill-in bar share this so what a
+ * person clicks and what they land on read the same.
  */
 declare function SubagentRunLabel<Part extends AgentToolRunPart = AgentToolRunPart>({
   run
 }: {
-  /** Complete retained-run state returned by `useAgentToolEvents()`. */run: AgentToolRunState<Part>;
+  /** Complete retained-run state returned by `useAgentToolEvents()`. */run: AgentToolRunValue<Part>;
 }): React.JSX.Element;
 //#endregion
 export { SubagentRunIndicator, SubagentRunIndicatorProps, SubagentRunLabel, getSubagentRunName, getSubagentRunStatusText };

package/dist/components/agents-sdk/SubagentRunIndicator.js

@@ -1,7 +1,6 @@
 import { t as cx } from "../../class-names-BiMDVpUo.js";
-import { J as StopIcon, K as SpinnerIcon, d as CheckIcon, et as WarningIcon } from "../../icons-CeGfXO21.js";
+import { J as StopIcon, K as SpinnerIcon, d as CheckIcon, et as WarningIcon } from "../../icons-cuEtsgj9.js";
 import { r as firstLine, s as textLines } from "../../format-COCyV98Z.js";
-import { NaniteMark } from "../nanites/NaniteScene.js";
 import "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/agents-sdk/SubagentRunIndicator.tsx
@@ -25,11 +24,12 @@ function lastStreamedLine(run) {
 /** Where a run's status line comes from, before it is cut to one line. */
 function statusSource(run) {
 	switch (run.status) {
+		case "starting": return "Starting";
 		case "running": return run.progress?.message ?? run.progress?.phase ?? lastStreamedLine(run) ?? "Running";
 		case "completed": return run.summary ?? "Completed";
 		case "error": return run.error ?? "Agent run failed";
-		case "aborted": return run.error ?? "Agent run stopped";
-		case "interrupted": return run.error ?? (run.childStillRunning ? "Interrupted · agent may still be running" : "Interrupted");
+		case "aborted": return run.childStillRunning !== false ? `Stop requested; child may still be running${run.error ? `. ${run.error}` : ""}` : run.error ?? "Agent run stopped";
+		case "interrupted": return `${run.childStillRunning !== false ? "Interrupted; child may still be running" : "Interrupted"}${run.error ? `. ${run.error}` : ""}`;
 	}
 }
 /**
@@ -45,7 +45,7 @@ function getSubagentRunStatusText(run) {
 }
 /** Decorative status mark derived from a whole upstream retained-run record. */
 function SubagentRunIndicator({ className, run, ref, ...props }) {
-	const icon = run.status === "running" ? /* @__PURE__ */ jsx(SpinnerIcon, {}) : run.status === "completed" ? /* @__PURE__ */ jsx(CheckIcon, {}) : run.status === "aborted" ? /* @__PURE__ */ jsx(StopIcon, {}) : /* @__PURE__ */ jsx(WarningIcon, {});
+	const icon = run.status === "running" || run.status === "starting" ? /* @__PURE__ */ jsx(SpinnerIcon, {}) : run.status === "completed" ? /* @__PURE__ */ jsx(CheckIcon, {}) : run.status === "aborted" && run.childStillRunning === false ? /* @__PURE__ */ jsx(StopIcon, {}) : /* @__PURE__ */ jsx(WarningIcon, {});
 	return /* @__PURE__ */ jsx("span", {
 		ref,
 		"data-slot": "subagent-run-indicator",
@@ -57,27 +57,22 @@ function SubagentRunIndicator({ className, run, ref, ...props }) {
 	});
 }
 /**
-* How a run labels itself anywhere it appears: its Nanite, its name over its
-* live status line, and its status mark. The selector chip and the drill-in's
-* top bar share this so what a person clicks and what they land on read the
-* same. The caller owns the surrounding row (a link, a bar title).
+* How a run labels itself anywhere it appears: one status mark followed by its
+* name and live status line. The selector and drill-in bar share this so what a
+* person clicks and what they land on read the same.
 */
 function SubagentRunLabel({ run }) {
-	return /* @__PURE__ */ jsxs(Fragment, { children: [
-		/* @__PURE__ */ jsx(NaniteMark, { index: run.order }),
-		/* @__PURE__ */ jsxs("span", {
-			className: "subagent-run__text",
-			"data-status": run.status,
-			children: [/* @__PURE__ */ jsx("span", {
-				className: "subagent-run__title sigvelo-truncate",
-				children: getSubagentRunName(run)
-			}), /* @__PURE__ */ jsx("span", {
-				className: "subagent-run__status sigvelo-truncate",
-				children: getSubagentRunStatusText(run)
-			})]
-		}),
-		/* @__PURE__ */ jsx(SubagentRunIndicator, { run })
-	] });
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(SubagentRunIndicator, { run }), /* @__PURE__ */ jsxs("span", {
+		className: "subagent-run__text",
+		"data-status": run.status,
+		children: [/* @__PURE__ */ jsx("span", {
+			className: "subagent-run__title sigvelo-truncate",
+			children: getSubagentRunName(run)
+		}), /* @__PURE__ */ jsx("span", {
+			className: "subagent-run__status sigvelo-truncate",
+			children: getSubagentRunStatusText(run)
+		})]
+	})] });
 }
 //#endregion
 export { SubagentRunIndicator, SubagentRunLabel, getSubagentRunName, getSubagentRunStatusText };

package/dist/components/agents-sdk/SubagentRunList.d.ts

@@ -1,18 +1,21 @@
+import { n as AgentToolRunValue } from "../../AgentToolRunsContext-GMe_hSnD.js";
 import * as React from "react";
 import { UIMessage } from "ai";
-import { AgentToolRunPart, AgentToolRunState } from "agents/agent-tools";
+import { AgentToolRunPart } from "agents/agent-tools";
 
 //#region src/components/agents-sdk/SubagentRunList.d.ts
 interface SubagentRunListProps<Part extends AgentToolRunPart = UIMessage["parts"][number]> extends Omit<React.HTMLAttributes<HTMLUListElement>, "children" | "onSelect"> {
   /** Complete retained runs returned by `useAgentToolEvents()`, in display order. */
-  runs: readonly AgentToolRunState<Part>[];
+  runs: readonly AgentToolRunValue<Part>[];
   /** App-authored TanStack Router Link for every retained run destination. */
-  renderRunLink: (run: AgentToolRunState<Part>) => React.ReactElement;
+  renderRunLink: (run: AgentToolRunValue<Part>) => React.ReactElement;
+  selectedRunId?: string;
 }
 /** Semantic, wrapping list of retained-run selectors. */
 declare function SubagentRunList<Part extends AgentToolRunPart = UIMessage["parts"][number]>({
   className,
   renderRunLink,
+  selectedRunId,
   runs,
   ref,
   ...props

package/dist/components/agents-sdk/SubagentRunList.js

@@ -4,7 +4,7 @@ import "react";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/agents-sdk/SubagentRunList.tsx
 /** Semantic, wrapping list of retained-run selectors. */
-function SubagentRunList({ className, renderRunLink, runs, ref, ...props }) {
+function SubagentRunList({ className, renderRunLink, selectedRunId, runs, ref, ...props }) {
 	return /* @__PURE__ */ jsx("ul", {
 		ref,
 		"data-slot": "subagent-run-list",
@@ -13,9 +13,11 @@ function SubagentRunList({ className, renderRunLink, runs, ref, ...props }) {
 		role: "list",
 		children: runs.map((run) => /* @__PURE__ */ jsx("li", {
 			className: "subagent-run__list-item",
+			"data-run-id": run.runId,
 			children: /* @__PURE__ */ jsx(SubagentRunSelector, {
 				run,
-				render: renderRunLink(run)
+				render: renderRunLink(run),
+				"aria-current": run.runId === selectedRunId ? "page" : void 0
 			})
 		}, run.runId))
 	});

package/dist/components/agents-sdk/SubagentRunPanel.d.ts

@@ -0,0 +1,60 @@
+import { n as AgentToolRunValue, t as AgentToolEventsValue } from "../../AgentToolRunsContext-GMe_hSnD.js";
+import { ExpansionStore } from "../ai-sdk/ExpansionState.js";
+import * as React from "react";
+import { AgentToolRunPart } from "agents/agent-tools";
+
+//#region src/components/agents-sdk/SubagentRunPanel.d.ts
+interface CommandState {
+  pending: boolean;
+  error?: string;
+}
+/** Controlled collection facts supplied by the connection owner. */
+interface SubagentRunCollectionState {
+  status: "loading" | "ready" | "error";
+  stale: boolean;
+  error?: string;
+}
+interface SubagentRunPanelProviderProps {
+  /** The one upstream event-hook value from the parent connection. */
+  agentTools: AgentToolEventsValue<AgentToolRunPart>;
+  collection: SubagentRunCollectionState;
+  /** The host's native execution predicate; presentation does not own cancellation policy. */
+  mayExecute: (run: AgentToolRunValue) => boolean;
+  selectedRunId?: string;
+  parentRunning: boolean;
+  onStopCurrentWork: () => Promise<void>;
+  onStopRun: (runId: string) => Promise<void>;
+  children: React.ReactNode;
+}
+interface SubagentRunPanelValue extends Pick<SubagentRunPanelProviderProps, "agentTools" | "collection" | "mayExecute" | "selectedRunId" | "parentRunning"> {
+  open: boolean;
+  setOpen: (open: boolean) => void;
+  hiddenCompleted: ReadonlySet<string>;
+  setHiddenCompleted: (ids: ReadonlySet<string>) => void;
+  reportDisclosures: ExpansionStore;
+  restoreFocusRunId: React.RefObject<string | undefined>;
+  commands: Readonly<Record<string, CommandState>>;
+  stopCurrentWork: () => Promise<void>;
+  stopRun: (runId: string) => Promise<void>;
+}
+/** A thread's transient controls/disclosure state; run facts remain in the SDK value. */
+declare function SubagentRunPanelProvider({
+  agentTools,
+  collection,
+  mayExecute,
+  selectedRunId,
+  parentRunning,
+  onStopCurrentWork,
+  onStopRun,
+  children
+}: SubagentRunPanelProviderProps): React.JSX.Element;
+declare function useOptionalSubagentRunPanel(): SubagentRunPanelValue | null;
+interface SubagentRunPanelProps {
+  renderRunLink: (run: AgentToolRunValue) => React.ReactElement;
+}
+/** Parent-scoped run queue composed beside queued prompts above the parent composer. */
+declare function SubagentRunPanel({
+  renderRunLink
+}: SubagentRunPanelProps): React.JSX.Element | null;
+//#endregion
+export { SubagentRunCollectionState, SubagentRunPanel, SubagentRunPanelProps, SubagentRunPanelProvider, SubagentRunPanelProviderProps, useOptionalSubagentRunPanel };

package/dist/components/agents-sdk/SubagentRunPanel.js

@@ -0,0 +1,255 @@
+import { createExpansionStore } from "../ai-sdk/ExpansionState.js";
+import { Button } from "../foundations/Button.js";
+import { getSubagentRunName } from "./SubagentRunIndicator.js";
+import { useOptionalAgentChatQueue } from "./AgentChatQueue.js";
+import { Queue, QueueItem, QueueItemAction, QueueItemActions, QueueItemContent, QueueItemDescription, QueueList, QueueSection, QueueSectionActions, QueueSectionContent, QueueSectionLabel, QueueSectionTrigger } from "../ai-sdk/Queue.js";
+import { AgentChatNotice, AgentChatPromptTray } from "./AgentChat.js";
+import { SubagentRunSelector } from "./SubagentRunSelector.js";
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/agents-sdk/SubagentRunPanel.tsx
+const IDLE = { pending: false };
+const SubagentRunPanelContext = React.createContext(null);
+/** A thread's transient controls/disclosure state; run facts remain in the SDK value. */
+function SubagentRunPanelProvider({ agentTools, collection, mayExecute, selectedRunId, parentRunning, onStopCurrentWork, onStopRun, children }) {
+	const [open, setOpen] = React.useState(true);
+	const [reportDisclosures] = React.useState(createExpansionStore);
+	const [hiddenCompleted, setHiddenCompleted] = React.useState(/* @__PURE__ */ new Set());
+	const [commands, setCommands] = React.useState({});
+	const inFlight = React.useRef(/* @__PURE__ */ new Map());
+	const restoreFocusRunId = React.useRef(selectedRunId);
+	React.useLayoutEffect(() => {
+		if (selectedRunId) restoreFocusRunId.current = selectedRunId;
+	}, [selectedRunId]);
+	const execute = React.useCallback((key, command) => {
+		const pending = inFlight.current.get(key);
+		if (pending) return pending;
+		setCommands((current) => ({
+			...current,
+			[key]: { pending: true }
+		}));
+		const operation = Promise.resolve().then(command).then(() => setCommands((current) => ({
+			...current,
+			[key]: IDLE
+		})), (cause) => {
+			const error = cause instanceof Error ? cause.message : "Stop could not be confirmed. Try again.";
+			setCommands((current) => ({
+				...current,
+				[key]: {
+					pending: false,
+					error
+				}
+			}));
+			throw cause;
+		}).finally(() => inFlight.current.delete(key));
+		inFlight.current.set(key, operation);
+		return operation;
+	}, []);
+	const stopCurrentWork = React.useCallback(() => execute("current-work", onStopCurrentWork), [execute, onStopCurrentWork]);
+	const stopRun = React.useCallback((id) => execute(id, () => onStopRun(id)), [execute, onStopRun]);
+	const value = React.useMemo(() => ({
+		agentTools,
+		collection,
+		mayExecute,
+		selectedRunId,
+		parentRunning,
+		open,
+		setOpen,
+		hiddenCompleted,
+		setHiddenCompleted,
+		reportDisclosures,
+		restoreFocusRunId,
+		commands,
+		stopCurrentWork,
+		stopRun
+	}), [
+		agentTools,
+		collection,
+		mayExecute,
+		selectedRunId,
+		parentRunning,
+		open,
+		hiddenCompleted,
+		reportDisclosures,
+		commands,
+		stopCurrentWork,
+		stopRun
+	]);
+	return /* @__PURE__ */ jsx(SubagentRunPanelContext.Provider, {
+		value,
+		children
+	});
+}
+function useOptionalSubagentRunPanel() {
+	return React.useContext(SubagentRunPanelContext);
+}
+function getSubagentRunRows(panel) {
+	const runs = Object.values(panel.agentTools.runsById).sort((a, b) => Number(!panel.mayExecute(a)) - Number(!panel.mayExecute(b)) || a.order - b.order);
+	return {
+		runs,
+		active: runs.filter(panel.mayExecute),
+		completed: runs.filter((run) => !panel.mayExecute(run)),
+		visible: runs.filter((run) => !panel.hiddenCompleted.has(run.runId) || panel.mayExecute(run))
+	};
+}
+function useSubagentRunFocus(panel, visible) {
+	const rootRef = React.useRef(null);
+	const focusedControl = React.useRef(null);
+	const [focusedOrder, setFocusedOrder] = React.useState(null);
+	const ranks = focusedOrder ? new Map(focusedOrder.map((id, index) => [id, index])) : null;
+	const ordered = ranks ? visible.toSorted((a, b) => (ranks.get(a.runId) ?? Infinity) - (ranks.get(b.runId) ?? Infinity)) : visible;
+	React.useLayoutEffect(() => {
+		const previous = focusedControl.current;
+		if (!previous || previous.element.isConnected || document.activeElement !== document.body) return;
+		(Array.from(rootRef.current?.querySelectorAll("[data-run-id]") ?? []).find((element) => element.dataset.runId === previous.runId)?.querySelector("a") ?? rootRef.current?.querySelector("[data-slot=\"subagent-run-panel-trigger\"]"))?.focus({ preventScroll: true });
+	});
+	React.useEffect(() => {
+		const focusId = panel.restoreFocusRunId.current;
+		const root = rootRef.current;
+		if (panel.selectedRunId || !root) return;
+		if (!focusId) return;
+		(Array.from(root.querySelectorAll("[data-run-id]")).find((element) => element.dataset.runId === focusId)?.querySelector("a") ?? root.querySelector("[data-slot=\"subagent-run-panel-trigger\"]"))?.focus({ preventScroll: true });
+		panel.restoreFocusRunId.current = void 0;
+	}, [panel.restoreFocusRunId, panel.selectedRunId]);
+	const onFocusCapture = (event) => {
+		focusedControl.current = {
+			element: event.target,
+			runId: event.target.closest("[data-run-id]")?.dataset.runId
+		};
+		if (!focusedOrder && event.target.closest("[data-run-id]")) setFocusedOrder(ordered.map((run) => run.runId));
+	};
+	const onBlurCapture = (event) => {
+		if (!event.currentTarget.contains(event.relatedTarget)) {
+			focusedControl.current = null;
+			setFocusedOrder(null);
+		}
+	};
+	return {
+		rootRef,
+		ordered,
+		onFocusCapture,
+		onBlurCapture
+	};
+}
+function delegatedWorkLabel(active, completed) {
+	const counts = [active ? `${active} active` : null, completed ? `${completed} finished` : null].filter(Boolean).join(", ");
+	return `Delegated work${counts ? `, ${counts}` : ""}`;
+}
+function SubagentRunPanelControls({ panel, active, completed }) {
+	const queue = useOptionalAgentChatQueue();
+	const stop = panel.commands["current-work"] ?? IDLE;
+	const canStop = panel.parentRunning || active > 1 || panel.collection.status !== "ready";
+	if (!canStop && !stop.error && !stop.pending && !completed.length) return null;
+	return /* @__PURE__ */ jsxs(QueueSectionActions, {
+		"aria-label": "Delegated work controls",
+		children: [canStop || stop.error || stop.pending ? /* @__PURE__ */ jsx(Button, {
+			size: "xs",
+			variant: "ghost",
+			color: "neutral",
+			disabled: stop.pending,
+			focusableWhenDisabled: true,
+			"aria-busy": stop.pending,
+			onClick: () => {
+				queue?.hold();
+				panel.stopCurrentWork().catch(() => void 0);
+			},
+			children: stop.pending ? "Stopping current work…" : "Stop current work"
+		}) : null, completed.length ? /* @__PURE__ */ jsx(Button, {
+			size: "xs",
+			variant: "ghost",
+			color: "neutral",
+			onClick: () => panel.setHiddenCompleted(panel.hiddenCompleted.size ? /* @__PURE__ */ new Set() : new Set(completed.map((run) => run.runId))),
+			children: panel.hiddenCompleted.size ? `Show completed (${completed.length})` : "Hide completed"
+		}) : null]
+	});
+}
+function SubagentRunRow({ panel, run, renderRunLink }) {
+	const command = panel.commands[run.runId] ?? IDLE;
+	const actionable = panel.mayExecute(run) || command.error || command.pending;
+	return /* @__PURE__ */ jsxs(QueueItem, {
+		"data-run-id": run.runId,
+		children: [/* @__PURE__ */ jsxs(QueueItemContent, { children: [/* @__PURE__ */ jsx(SubagentRunSelector, {
+			run,
+			render: renderRunLink(run),
+			surface: "plain",
+			"aria-current": run.runId === panel.selectedRunId ? "page" : void 0
+		}), command.error ? /* @__PURE__ */ jsx(QueueItemDescription, {
+			role: "alert",
+			children: command.error
+		}) : null] }), actionable ? /* @__PURE__ */ jsx(QueueItemActions, {
+			persistent: true,
+			children: /* @__PURE__ */ jsx(QueueItemAction, {
+				disabled: command.pending,
+				focusableWhenDisabled: true,
+				"aria-busy": command.pending,
+				"aria-label": `Stop ${getSubagentRunName(run)}`,
+				onClick: () => {
+					panel.stopRun(run.runId).catch(() => void 0);
+				},
+				children: command.pending ? "Stopping…" : "Stop"
+			})
+		}) : null]
+	});
+}
+function SubagentRunPanelContent({ panel, renderRunLink }) {
+	const { runs, active, completed, visible } = getSubagentRunRows(panel);
+	const focus = useSubagentRunFocus(panel, visible);
+	const stop = panel.commands["current-work"] ?? IDLE;
+	if (panel.collection.status === "ready" && !runs.length && !panel.parentRunning) return null;
+	return /* @__PURE__ */ jsx(AgentChatPromptTray, {
+		"data-subagent-run-panel": "",
+		children: /* @__PURE__ */ jsx(Queue, {
+			density: "compact",
+			children: /* @__PURE__ */ jsxs(QueueSection, {
+				ref: focus.rootRef,
+				open: panel.open,
+				onOpenChange: panel.setOpen,
+				onFocusCapture: focus.onFocusCapture,
+				onBlurCapture: focus.onBlurCapture,
+				children: [/* @__PURE__ */ jsx(QueueSectionTrigger, {
+					"data-slot": "subagent-run-panel-trigger",
+					"aria-label": delegatedWorkLabel(active.length, completed.length),
+					children: /* @__PURE__ */ jsx(QueueSectionLabel, {
+						count: runs.length || void 0,
+						children: "Delegated work"
+					})
+				}), /* @__PURE__ */ jsxs(QueueSectionContent, { children: [
+					stop.error ? /* @__PURE__ */ jsx(AgentChatNotice, {
+						"data-tone": "danger",
+						role: "alert",
+						children: stop.error
+					}) : null,
+					panel.collection.status === "loading" ? /* @__PURE__ */ jsx(AgentChatNotice, { children: panel.collection.stale ? "Reconnecting. Last known runs are shown." : "Loading delegated work…" }) : null,
+					panel.collection.status === "error" ? /* @__PURE__ */ jsx(AgentChatNotice, {
+						"data-tone": "danger",
+						role: "alert",
+						children: panel.collection.error ?? "Could not refresh delegated work. Last known runs are retained."
+					}) : null,
+					/* @__PURE__ */ jsx(QueueList, {
+						"aria-label": "Delegated work runs",
+						children: focus.ordered.map((run) => /* @__PURE__ */ jsx(SubagentRunRow, {
+							panel,
+							run,
+							renderRunLink
+						}, run.runId))
+					}),
+					/* @__PURE__ */ jsx(SubagentRunPanelControls, {
+						panel,
+						active: active.length,
+						completed
+					})
+				] })]
+			})
+		})
+	});
+}
+/** Parent-scoped run queue composed beside queued prompts above the parent composer. */
+function SubagentRunPanel({ renderRunLink }) {
+	const panel = useOptionalSubagentRunPanel();
+	return panel ? /* @__PURE__ */ jsx(SubagentRunPanelContent, {
+		panel,
+		renderRunLink
+	}) : null;
+}
+//#endregion
+export { SubagentRunPanel, SubagentRunPanelProvider, useOptionalSubagentRunPanel };

package/dist/components/agents-sdk/SubagentRunSelector.d.ts

@@ -1,20 +1,23 @@
+import { n as AgentToolRunValue } from "../../AgentToolRunsContext-GMe_hSnD.js";
 import * as React from "react";
 import { UIMessage } from "ai";
-import { AgentToolRunPart, AgentToolRunState } from "agents/agent-tools";
+import { AgentToolRunPart } from "agents/agent-tools";
 
 //#region src/components/agents-sdk/SubagentRunSelector.d.ts
 interface SubagentRunSelectorProps<Part extends AgentToolRunPart = UIMessage["parts"][number]> extends Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, "children"> {
   /** Complete retained-run state returned by `useAgentToolEvents()`. */
-  run: AgentToolRunState<Part>;
+  run: AgentToolRunValue<Part>;
   /** App-authored TanStack Router Link for this retained run. */
   render: React.ReactElement;
   /** Short supplementary status shown on hover and keyboard focus. `false` disables it. */
   tooltip?: React.ReactNode | false;
+  /** Plain navigation rows sit on the containing panel's existing surface. */
+  surface?: "raised" | "plain";
 }
 /**
  * Compact selector for a retained Cloudflare Agent Tool run.
  *
- * The component consumes `AgentToolRunState` whole and derives its label and
+ * The component consumes `AgentToolRunValue` whole and derives its label and
  * status from upstream fields. The application-authored Link routes
  * `run.subAgent` to a run surface that replaces the conversation — the
  * workspace drill-in pattern — with the top bar's back link as the way out;
@@ -26,11 +29,12 @@ declare function SubagentRunSelector<Part extends AgentToolRunPart = UIMessage["
   render,
   run,
   tooltip,
+  surface,
   ref,
   "aria-label": ariaLabel,
   ...props
 }: SubagentRunSelectorProps<Part> & {
-  ref?: React.Ref<HTMLAnchorElement>;
+  /** Ref forwarded to the component's rendered root element. */ref?: React.Ref<HTMLAnchorElement>;
 }): React.JSX.Element;
 //#endregion
 export { SubagentRunSelector, SubagentRunSelectorProps };

package/dist/components/agents-sdk/SubagentRunSelector.js

@@ -1,34 +1,36 @@
 import { t as cx } from "../../class-names-BiMDVpUo.js";
 import { buttonVariants } from "../foundations/Button.js";
 import { Tooltip } from "../foundations/Tooltip.js";
-import { t as NavigationLink } from "../../navigation-link-kqMa81v5.js";
 import { SubagentRunLabel, getSubagentRunName, getSubagentRunStatusText } from "./SubagentRunIndicator.js";
+import { t as NavigationLink } from "../../navigation-link-kqMa81v5.js";
 import "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/agents-sdk/SubagentRunSelector.tsx
 /**
 * Compact selector for a retained Cloudflare Agent Tool run.
 *
-* The component consumes `AgentToolRunState` whole and derives its label and
+* The component consumes `AgentToolRunValue` whole and derives its label and
 * status from upstream fields. The application-authored Link routes
 * `run.subAgent` to a run surface that replaces the conversation — the
 * workspace drill-in pattern — with the top bar's back link as the way out;
 * this component never invents a second transcript or expands child content
 * inline.
 */
-function SubagentRunSelector({ className, render, run, tooltip, ref, "aria-label": ariaLabel, ...props }) {
+function SubagentRunSelector({ className, render, run, tooltip, surface = "raised", ref, "aria-label": ariaLabel, ...props }) {
 	const name = getSubagentRunName(run);
 	const link = /* @__PURE__ */ jsx(NavigationLink, {
 		ref,
 		render,
 		"data-slot": "subagent-run-selector",
 		"data-status": run.status,
+		"data-surface": surface,
 		className: cx(buttonVariants({
 			variant: "ghost",
 			color: "neutral",
 			size: "sm"
 		}), "subagent-run__selector", className),
 		"aria-label": ariaLabel ?? `Open ${name}, ${run.status}`,
+		"aria-description": getSubagentRunStatusText(run),
 		...props,
 		children: /* @__PURE__ */ jsx(SubagentRunLabel, { run })
 	});