@mcp-b/react-components 0.51.2 → 0.53.0

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

@@ -1,3 +1,2 @@
-import "../foundations/icons.js";
-import { n as ManagerOfficeSidebar, r as ManagerOfficeSidebarAlert, t as ManagerOffice } from "../../ManagerOffice-D-7SOJ4x.js";
+import { n as ManagerOfficeSidebar, r as ManagerOfficeSidebarAlert, t as ManagerOffice } from "../../ManagerOffice-CJwBAEMv.js";
 export { ManagerOffice, ManagerOfficeSidebar, ManagerOfficeSidebarAlert };

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

@@ -1,4 +1,4 @@
-import { EmployeeShellProps } from "./EmployeeChrome.js";
+import { f as EmployeeShellProps } from "../../EmployeeChrome-B605rpVz.js";
 import { ManagerOfficeConnectedEmployee, ManagerOfficeDestination, ManagerOfficeEmployee } from "./ManagerOffice.js";
 import * as React from "react";
 
@@ -9,7 +9,7 @@ type ManagerOfficeView = {
   kind: "employee";
   employeeId: string;
 };
-interface ManagerWorkShellProps extends EmployeeShellProps {
+interface ManagerWorkShellProps extends Omit<EmployeeShellProps, "appBarLeading"> {
   employees: readonly ManagerOfficeEmployee[];
   employee: ManagerOfficeEmployee;
   renderOfficeLink: (destination: ManagerOfficeDestination) => React.ReactElement;

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

@@ -1,11 +1,11 @@
-import { B as PlusIcon, C as FolderIcon, G as SlackIcon, P as MonitorIcon, R as PencilIcon, et as WarningIcon, j as MessageSquareIcon } from "../../icons-cuEtsgj9.js";
+import { B as PlusIcon, C as FolderIcon, G as SlackIcon, P as MonitorIcon, R as PencilIcon, W as SidebarIcon, et as WarningIcon, r as ArrowLeftIcon } from "../../icons-CeGfXO21.js";
+import { IconButton } from "../foundations/IconButton.js";
 import { EmptyState } from "../foundations/EmptyState.js";
-import "../foundations/icons.js";
 import { AppTopBar } from "../general-purpose/AppTopBar.js";
 import { ResponsiveSidebarShell } from "../general-purpose/ResponsiveSidebarShell.js";
 import { ThinkThreadPicker } from "./ThinkThreadPicker.js";
 import { EmployeeChrome } from "./EmployeeChrome.js";
-import { n as ManagerOfficeSidebar, r as ManagerOfficeSidebarAlert, t as ManagerOffice } from "../../ManagerOffice-D-7SOJ4x.js";
+import { n as ManagerOfficeSidebar, r as ManagerOfficeSidebarAlert, t as ManagerOffice } from "../../ManagerOffice-CJwBAEMv.js";
 import "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/agents-sdk/ManagerOfficeScreens.tsx
@@ -16,35 +16,47 @@ function ManagerWorkShell({ employees, employee, renderOfficeLink, officeActions
 		renderLink: renderOfficeLink,
 		children: /* @__PURE__ */ jsx(EmployeeChrome.Shell, {
 			...chrome,
+			appBarLeading: /* @__PURE__ */ jsx(AppTopBar.Link, {
+				label: "Back to office",
+				render: renderOfficeLink({
+					kind: "employee",
+					employee
+				}),
+				children: /* @__PURE__ */ jsx(ArrowLeftIcon, {})
+			}),
 			sidebarLabel: "employees",
 			navigation: [
-				{
-					id: "chat",
-					label: "Chat",
-					icon: /* @__PURE__ */ jsx(MessageSquareIcon, {})
-				},
 				{
 					id: "files",
 					label: "Files",
+					description: "Browse files in this employee’s workspace.",
 					icon: /* @__PURE__ */ jsx(FolderIcon, {})
 				},
 				{
-					id: "live",
+					id: "browser",
 					label: "Browser",
+					description: "View this employee’s browser and current activity.",
 					icon: /* @__PURE__ */ jsx(MonitorIcon, {})
 				},
 				{
 					id: "channels",
 					label: "Channels",
+					description: "Manage the messaging channels connected to this employee.",
 					icon: /* @__PURE__ */ jsx(SlackIcon, {})
 				}
 			],
-			sidebar: ({ closeSidebarOnCompact }) => /* @__PURE__ */ jsx(ManagerOfficeSidebar, {
+			sidebar: ({ closeSidebar, closeSidebarOnCompact }) => /* @__PURE__ */ jsx(ManagerOfficeSidebar, {
 				layout: "chat",
 				employees,
 				selectedEmployeeId: employee.id,
 				closeSidebarOnCompact,
-				officeActions,
+				officeActions: /* @__PURE__ */ jsxs(Fragment, { children: [officeActions, /* @__PURE__ */ jsx(IconButton, {
+					label: "Hide workforce",
+					variant: "ghost",
+					size: "sm",
+					onClick: closeSidebar,
+					children: /* @__PURE__ */ jsx(SidebarIcon, {})
+				})] }),
 				renderLink: (destination) => {
 					if (destination.kind === "employee" && "work" in destination.employee) {
 						const first = destination.employee.work[0];
@@ -127,18 +139,26 @@ function ManagerOfficeScreen({ employees, renderLink, view, emptyOfficeAction, o
 		employees,
 		renderLink,
 		render: /* @__PURE__ */ jsx(ResponsiveSidebarShell, {
+			className: "employee-shell__navigation",
 			sidebarLabel: "employees",
 			showMainLabel: "Show workforce",
-			sidebar: ({ closeSidebarOnCompact }) => /* @__PURE__ */ jsx(ManagerOfficeSidebar, {
+			sidebar: ({ closeSidebar, closeSidebarOnCompact }) => /* @__PURE__ */ jsx(ManagerOfficeSidebar, {
 				employees,
 				renderLink,
 				selectedEmployeeId: employee?.id ?? null,
 				closeSidebarOnCompact,
-				officeActions
+				officeActions: /* @__PURE__ */ jsxs(Fragment, { children: [officeActions, /* @__PURE__ */ jsx(IconButton, {
+					label: "Hide workforce",
+					variant: "ghost",
+					size: "sm",
+					onClick: closeSidebar,
+					children: /* @__PURE__ */ jsx(SidebarIcon, {})
+				})] })
 			}),
 			bar: {
 				label: "Workforce controls",
 				title,
+				compactTitleTrigger: /* @__PURE__ */ jsx("span", { children: title }),
 				titleRender: (props) => /* @__PURE__ */ jsx("h1", {
 					...props,
 					children: props.children

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

@@ -1,11 +1,11 @@
 import { t as cx } from "../../class-names-BiMDVpUo.js";
-import { K as SpinnerIcon, d as CheckIcon, et as WarningIcon } from "../../icons-cuEtsgj9.js";
+import { K as SpinnerIcon, d as CheckIcon, et as WarningIcon } from "../../icons-CeGfXO21.js";
 import { Button } from "../foundations/Button.js";
+import { AgentAttention, AgentAttentionActions, AgentAttentionBody, AgentAttentionHeader } from "../ai-sdk/AgentAttention.js";
 import { a as formatErrorMessage } from "../../format-COCyV98Z.js";
 import { DescriptionList } from "../foundations/DescriptionList.js";
 import { McpServerIcon } from "./McpServerIcon.js";
 import { t as getMcpServerProjection } from "../../mcp-server-mAErsxHU.js";
-import { AgentAttention, AgentAttentionActions, AgentAttentionBody, AgentAttentionHeader } from "../ai-sdk/AgentAttention.js";
 import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { getToolPartState } from "@cloudflare/think/react";

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

@@ -1,9 +1,9 @@
 import { CUSTOM_MCP_SERVER_CARD } from "../../utils/mcp-server-catalog.js";
 import { t as cx } from "../../class-names-BiMDVpUo.js";
 import { Button } from "../foundations/Button.js";
-import { a as formatErrorMessage } from "../../format-COCyV98Z.js";
 import { Field } from "../foundations/Field.js";
 import { Form } from "../foundations/Form.js";
+import { a as formatErrorMessage } from "../../format-COCyV98Z.js";
 import { Fieldset } from "../foundations/Fieldset.js";
 import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";

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

@@ -1,94 +1,2 @@
-import { l as DialogProps } from "../../Dialog-88GF7_Th.js";
-import { o as McpServerCard } from "../../mcp-server-catalog-D9p4gGeJ.js";
-import { r as McpConnectorFormValues } from "../../McpConnectorForm--HB0MEGC.js";
-import * as React from "react";
-import { MCPServersState } from "agents";
-
-//#region src/components/agents-sdk/McpPluginCatalog.d.ts
-/** Optional plugin-specific copy layered over the canonical MCP server card. */
-interface McpPluginDetails {
-  developerName?: string;
-  marketplaceName?: string;
-  longDescription?: string;
-  capabilities?: readonly string[];
-  skills?: readonly string[];
-}
-interface McpPluginCatalogProps extends Omit<React.HTMLAttributes<HTMLElement>, "onSelect"> {
-  /** Canonical connector cards. The directory does not create a second plugin registry. */
-  servers: readonly McpServerCard[];
-  /** Upstream Agents MCP state used to project connected and recovery states. */
-  mcp?: MCPServersState;
-  /** Optional plugin metadata keyed by the canonical server ID. */
-  detailsByServerId?: Readonly<Record<string, McpPluginDetails | undefined>>;
-  /** Server IDs promoted into the Featured section, in display order. */
-  featuredServerIds?: readonly string[];
-  /** Host product name paired with the plugin in the connection dialog. */
-  brandName?: string;
-  /** Host product mark paired with the plugin in the connection dialog. */
-  brandLogo?: React.ReactNode;
-  /** Product-authored trust and data-sharing copy. Pass null to omit it. */
-  disclosure?: React.ReactNode;
-  /** Starts or recovers the existing MCP connection path. */
-  onConnect?: (server: McpServerCard) => void | Promise<void>;
-  /** Removes the exact upstream MCP entry. */
-  onDisconnect?: (serverId: string) => void | Promise<void>;
-  /**
-   * Connects a user-supplied MCP server. Providing it puts the "Custom
-   * plugin" action in the bar, opening the shared connector setup dialog.
-   */
-  onAddCustom?: (values: McpConnectorFormValues) => void | Promise<void>;
-  /** Accessible name only — the hosting tab or icon is the visible title. */
-  heading?: React.ReactNode;
-  /** Accessible label and placeholder for the plugin filter. */
-  searchLabel?: string;
-  /** Content shown when no plugins match the current filter. */
-  emptyMessage?: React.ReactNode;
-}
-interface McpPluginDetailsDialogProps {
-  /** Selected canonical server card. Passing null closes the dialog. */
-  server: McpServerCard | null;
-  details?: McpPluginDetails;
-  mcp?: MCPServersState;
-  brandName?: string;
-  brandLogo?: React.ReactNode;
-  disclosure?: React.ReactNode;
-  onConnect?: (server: McpServerCard) => void | Promise<void>;
-  onDisconnect?: (serverId: string) => void | Promise<void>;
-  onOpenChange: NonNullable<DialogProps["onOpenChange"]>;
-}
-/**
- * Searchable plugin directory backed by the same MCP cards and live Agents
- * state as {@link McpServerPicker}. Selecting a row opens the shared details
- * dialog; connecting still delegates to the host's existing MCP/OAuth path.
- */
-declare function McpPluginCatalog({
-  servers,
-  mcp,
-  detailsByServerId,
-  featuredServerIds,
-  brandName,
-  brandLogo,
-  disclosure,
-  onConnect,
-  onDisconnect,
-  onAddCustom,
-  heading,
-  searchLabel,
-  emptyMessage,
-  className,
-  ...props
-}: McpPluginCatalogProps): React.JSX.Element;
-/** Reference-derived plugin detail surface without a parallel install state. */
-declare function McpPluginDetailsDialog({
-  server,
-  details,
-  mcp,
-  brandName,
-  brandLogo,
-  disclosure,
-  onConnect,
-  onDisconnect,
-  onOpenChange
-}: McpPluginDetailsDialogProps): React.JSX.Element;
-//#endregion
+import { a as McpPluginDetailsDialogProps, i as McpPluginDetailsDialog, n as McpPluginCatalogProps, r as McpPluginDetails, t as McpPluginCatalog } from "../../McpPluginCatalog-DNeHDrts.js";
 export { McpPluginCatalog, McpPluginCatalogProps, McpPluginDetails, McpPluginDetailsDialog, McpPluginDetailsDialogProps };

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

@@ -1,7 +1,8 @@
 import { CUSTOM_MCP_SERVER_CARD } from "../../utils/mcp-server-catalog.js";
 import { t as cx } from "../../class-names-BiMDVpUo.js";
-import { B as PlusIcon, K as SpinnerIcon, et as WarningIcon, nt as XIcon, o as ArrowUpRightIcon, y as EllipsisIcon } from "../../icons-cuEtsgj9.js";
+import { B as PlusIcon, K as SpinnerIcon, et as WarningIcon, nt as XIcon, o as ArrowUpRightIcon, y as EllipsisIcon } from "../../icons-CeGfXO21.js";
 import { Button } from "../foundations/Button.js";
+import { AgentAttention, AgentAttentionBody, AgentAttentionHeader } from "../ai-sdk/AgentAttention.js";
 import { IconButton } from "../foundations/IconButton.js";
 import { Dialog } from "../foundations/Dialog.js";
 import { a as formatErrorMessage } from "../../format-COCyV98Z.js";
@@ -11,7 +12,6 @@ import { McpServerIcon } from "./McpServerIcon.js";
 import { SearchField } from "../foundations/SearchField.js";
 import { t as getMcpServerProjection } from "../../mcp-server-mAErsxHU.js";
 import { McpServerSetupDialog } from "./McpServerPicker.js";
-import { AgentAttention, AgentAttentionBody, AgentAttentionHeader } from "../ai-sdk/AgentAttention.js";
 import * as React from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/agents-sdk/McpPluginCatalog.tsx
@@ -35,7 +35,7 @@ function McpPluginCatalog({ servers, mcp, detailsByServerId, featuredServerIds =
 				className: "mcp-plugin-catalog__header",
 				children: [
 					/* @__PURE__ */ jsx("h1", {
-						className: "sigvelo-visually-hidden",
+						className: "mcp-plugin-catalog__title",
 						children: heading
 					}),
 					/* @__PURE__ */ jsxs(SearchField.Root, {
@@ -131,7 +131,7 @@ function McpPluginCatalog({ servers, mcp, detailsByServerId, featuredServerIds =
 function McpPluginDetailsDialog({ server, details, mcp, brandName = "your AI", brandLogo = /* @__PURE__ */ jsx("img", {
 	alt: "",
 	className: "sigvelo-brand-mark sigvelo-brand-mark--colorful",
-	src: new URL("../../assets/think-browser-host.png", import.meta.url).href,
+	src: new URL("../../assets/sigvelo-logo.svg", import.meta.url).href,
 	width: 128,
 	height: 128
 }), disclosure = /* @__PURE__ */ jsxs(Fragment, { children: [
@@ -227,7 +227,7 @@ function McpPluginCard({ server, details, mcp, onSelect }) {
 			onClick: onSelect,
 			children: [/* @__PURE__ */ jsx(McpServerIcon, {
 				server,
-				size: "md"
+				size: "sm"
 			}), /* @__PURE__ */ jsxs("span", {
 				className: "mcp-plugin-catalog__card-copy",
 				children: [/* @__PURE__ */ jsx("span", {

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

@@ -1,9 +1,9 @@
 import { n as mergeBaseClassName } from "../../class-names-BiMDVpUo.js";
-import { K as SpinnerIcon, N as MinusIcon, d as CheckIcon, et as WarningIcon } from "../../icons-cuEtsgj9.js";
+import { K as SpinnerIcon, N as MinusIcon, d as CheckIcon, et as WarningIcon } from "../../icons-CeGfXO21.js";
 import { buttonVariants } from "../foundations/Button.js";
+import { Menu } from "../foundations/Menu.js";
 import { Dialog } from "../foundations/Dialog.js";
 import { a as formatErrorMessage } from "../../format-COCyV98Z.js";
-import { Menu } from "../foundations/Menu.js";
 import { PromptInputActionMenu, PromptInputActionMenuContent, PromptInputActionMenuTrigger } from "../ai-sdk/PromptInput.js";
 import { McpServerIcon } from "./McpServerIcon.js";
 import { t as getMcpServerProjection } from "../../mcp-server-mAErsxHU.js";
@@ -30,7 +30,7 @@ function McpServerSetupDialog({ server, defaults, onOpenChange, onSubmit, redire
 		open: server !== null,
 		onOpenChange,
 		children: /* @__PURE__ */ jsxs(Dialog.Portal, { children: [/* @__PURE__ */ jsx(Dialog.Backdrop, {}), /* @__PURE__ */ jsx(Dialog.Viewport, { children: /* @__PURE__ */ jsxs(Dialog.Popup, { children: [
-			/* @__PURE__ */ jsxs(Dialog.Header, { children: [/* @__PURE__ */ jsx(Dialog.Title, { children: server ? server.name.endsWith("MCP") ? server.name : `${server.name} MCP` : "MCP connectors" }), /* @__PURE__ */ jsx(Dialog.Description, { children: server?.manualSetup?.description ?? "Connect a remote MCP server the model can call." })] }),
+			/* @__PURE__ */ jsxs(Dialog.Header, { children: [/* @__PURE__ */ jsx(Dialog.Title, { children: server ? server.name.endsWith("MCP") ? server.name : `${server.name} MCP` : "Plugins" }), /* @__PURE__ */ jsx(Dialog.Description, { children: server?.manualSetup?.description ?? "Connect a remote MCP server the model can call." })] }),
 			server?.manualSetup?.links.length ? /* @__PURE__ */ jsx("div", {
 				className: "mcp-server-setup-dialog__links",
 				children: server.manualSetup.links.map((link) => /* @__PURE__ */ jsx("a", {
@@ -262,14 +262,14 @@ function getPickerRows(servers, mcp) {
 function groupPickerRows(rows) {
 	const groups = /* @__PURE__ */ new Map();
 	for (const row of rows) {
-		const key = row.projection.connectionKind === "connected" ? "Connected" : row.server.category === "Auto" ? "MCP connectors" : row.server.category === "Manual" ? "Manual setup" : row.server.category ?? "Other";
+		const key = row.projection.connectionKind === "connected" ? "Connected" : row.server.category === "Auto" ? "Plugins" : row.server.category === "Manual" ? "Manual setup" : row.server.category ?? "Other";
 		const group = groups.get(key) ?? [];
 		group.push(row);
 		groups.set(key, group);
 	}
 	const order = [
 		"Connected",
-		"MCP connectors",
+		"Plugins",
 		"Manual setup",
 		"Other"
 	];

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

@@ -1,13 +1,13 @@
 import { t as cx } from "../../class-names-BiMDVpUo.js";
-import { U as SearchIcon, f as ChevronDownIcon } from "../../icons-cuEtsgj9.js";
+import { U as SearchIcon, f as ChevronDownIcon } from "../../icons-CeGfXO21.js";
 import { Button } from "../foundations/Button.js";
+import { Autocomplete } from "../foundations/Autocomplete.js";
 import { Dialog } from "../foundations/Dialog.js";
 import { c as titleCase } from "../../format-COCyV98Z.js";
-import { Autocomplete } from "../foundations/Autocomplete.js";
+import { Separator } from "../foundations/Separator.js";
 import { ScrollArea } from "../foundations/ScrollArea.js";
-import { EmptyState } from "../foundations/EmptyState.js";
 import { t as ProviderLogo } from "../../provider-logos-DWYY8wNz.js";
-import { Separator } from "../foundations/Separator.js";
+import { EmptyState } from "../foundations/EmptyState.js";
 import * as React from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { createPortal } from "react-dom";

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

@@ -1,6 +1,6 @@
 import { t as cx } from "../../class-names-BiMDVpUo.js";
-import { ThinkExecutionApproval, ThinkPendingApproval, getPausedExecution } from "./ThinkPendingApproval.js";
 import { ToolApproval } from "../ai-sdk/ToolApproval.js";
+import { ThinkExecutionApproval, ThinkPendingApproval, getPausedExecution } from "./ThinkPendingApproval.js";
 import "react";
 import { jsx } from "react/jsx-runtime";
 import { isToolUIPart } from "ai";

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

@@ -1,6 +1,6 @@
 import { composerLinkHref } from "../../utils/composer-link.js";
 import { findCatalogMcpServerCard, getMcpServerIconSrc } from "../../utils/mcp-server-catalog.js";
-import { A as McpIcon, c as BoxIcon } from "../../icons-cuEtsgj9.js";
+import { A as McpIcon, c as BoxIcon } from "../../icons-CeGfXO21.js";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/agents-sdk/PromptInputCommands.tsx
 function mcpServerCommandIcon(server) {

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

@@ -1,5 +1,5 @@
 import { t as cx } from "../../class-names-BiMDVpUo.js";
-import { J as StopIcon, K as SpinnerIcon, d as CheckIcon, et as WarningIcon } from "../../icons-cuEtsgj9.js";
+import { J as StopIcon, K as SpinnerIcon, d as CheckIcon, et as WarningIcon } from "../../icons-CeGfXO21.js";
 import { r as firstLine, s as textLines } from "../../format-COCyV98Z.js";
 import "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";

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

@@ -15,6 +15,8 @@ interface SubagentRunCollectionState {
   error?: string;
 }
 interface SubagentRunPanelProviderProps {
+  /** Conversation identity; changing it resets transient controls without remounting children. */
+  scopeKey: string;
   /** The one upstream event-hook value from the parent connection. */
   agentTools: AgentToolEventsValue<AgentToolRunPart>;
   collection: SubagentRunCollectionState;
@@ -39,6 +41,7 @@ interface SubagentRunPanelValue extends Pick<SubagentRunPanelProviderProps, "age
 }
 /** A thread's transient controls/disclosure state; run facts remain in the SDK value. */
 declare function SubagentRunPanelProvider({
+  scopeKey,
   agentTools,
   collection,
   mayExecute,

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

@@ -1,8 +1,8 @@
 import { createExpansionStore } from "../ai-sdk/ExpansionState.js";
 import { Button } from "../foundations/Button.js";
+import { Queue, QueueItem, QueueItemAction, QueueItemActions, QueueItemContent, QueueItemDescription, QueueList, QueueSection, QueueSectionActions, QueueSectionContent, QueueSectionLabel, QueueSectionTrigger } from "../ai-sdk/Queue.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";
@@ -10,41 +10,55 @@ import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/agents-sdk/SubagentRunPanel.tsx
 const IDLE = { pending: false };
 const SubagentRunPanelContext = React.createContext(null);
+function createPanelState(scopeKey, selectedRunId) {
+	return {
+		scopeKey,
+		open: true,
+		hiddenCompleted: /* @__PURE__ */ new Set(),
+		commands: {},
+		reportDisclosures: createExpansionStore(),
+		inFlight: /* @__PURE__ */ new Map(),
+		restoreFocusRunId: { current: selectedRunId }
+	};
+}
 /** 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);
+function SubagentRunPanelProvider({ scopeKey, agentTools, collection, mayExecute, selectedRunId, parentRunning, onStopCurrentWork, onStopRun, children }) {
+	const [state, setState] = React.useState(() => createPanelState(scopeKey, selectedRunId));
+	if (state.scopeKey !== scopeKey) setState(createPanelState(scopeKey, selectedRunId));
+	const { open, hiddenCompleted, commands, reportDisclosures, inFlight, restoreFocusRunId } = state;
+	const setOpen = React.useCallback((open) => setState((current) => current.inFlight === inFlight ? {
+		...current,
+		open
+	} : current), [inFlight]);
+	const setHiddenCompleted = React.useCallback((hiddenCompleted) => setState((current) => current.inFlight === inFlight ? {
+		...current,
+		hiddenCompleted
+	} : current), [inFlight]);
 	React.useLayoutEffect(() => {
 		if (selectedRunId) restoreFocusRunId.current = selectedRunId;
-	}, [selectedRunId]);
+	}, [restoreFocusRunId, selectedRunId]);
 	const execute = React.useCallback((key, command) => {
-		const pending = inFlight.current.get(key);
+		const pending = inFlight.get(key);
 		if (pending) return pending;
-		setCommands((current) => ({
-			...current,
-			[key]: { pending: true }
-		}));
-		const operation = Promise.resolve().then(command).then(() => setCommands((current) => ({
+		const setCommand = (command) => setState((current) => current.inFlight === inFlight ? {
 			...current,
-			[key]: IDLE
-		})), (cause) => {
+			commands: {
+				...current.commands,
+				[key]: command
+			}
+		} : current);
+		setCommand({ pending: true });
+		const operation = Promise.resolve().then(command).then(() => setCommand(IDLE), (cause) => {
 			const error = cause instanceof Error ? cause.message : "Stop could not be confirmed. Try again.";
-			setCommands((current) => ({
-				...current,
-				[key]: {
-					pending: false,
-					error
-				}
-			}));
+			setCommand({
+				pending: false,
+				error
+			});
 			throw cause;
-		}).finally(() => inFlight.current.delete(key));
-		inFlight.current.set(key, operation);
+		}).finally(() => inFlight.delete(key));
+		inFlight.set(key, operation);
 		return operation;
-	}, []);
+	}, [inFlight]);
 	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(() => ({
@@ -71,6 +85,9 @@ function SubagentRunPanelProvider({ agentTools, collection, mayExecute, selected
 		open,
 		hiddenCompleted,
 		reportDisclosures,
+		restoreFocusRunId,
+		setOpen,
+		setHiddenCompleted,
 		commands,
 		stopCurrentWork,
 		stopRun
@@ -135,14 +152,14 @@ 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 }) {
+function SubagentRunPanelControls({ panel, active }) {
 	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, {
+	if (!canStop && !stop.error && !stop.pending) return null;
+	return /* @__PURE__ */ jsx(QueueSectionActions, {
 		"aria-label": "Delegated work controls",
-		children: [canStop || stop.error || stop.pending ? /* @__PURE__ */ jsx(Button, {
+		children: canStop || stop.error || stop.pending ? /* @__PURE__ */ jsx(Button, {
 			size: "xs",
 			variant: "ghost",
 			color: "neutral",
@@ -154,13 +171,7 @@ function SubagentRunPanelControls({ panel, active, completed }) {
 				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]
+		}) : null
 	});
 }
 function SubagentRunRow({ panel, run, renderRunLink }) {
@@ -206,13 +217,23 @@ function SubagentRunPanelContent({ panel, renderRunLink }) {
 				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"
-					})
+				children: [/* @__PURE__ */ jsxs("div", {
+					className: "subagent-run__panel-header",
+					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"
+						})
+					}), completed.length ? /* @__PURE__ */ jsx(Button, {
+						className: "subagent-run__completed-toggle",
+						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]
 				}), /* @__PURE__ */ jsxs(QueueSectionContent, { children: [
 					stop.error ? /* @__PURE__ */ jsx(AgentChatNotice, {
 						"data-tone": "danger",
@@ -235,8 +256,7 @@ function SubagentRunPanelContent({ panel, renderRunLink }) {
 					}),
 					/* @__PURE__ */ jsx(SubagentRunPanelControls, {
 						panel,
-						active: active.length,
-						completed
+						active: active.length
 					})
 				] })]
 			})

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

@@ -1,8 +1,8 @@
 import { t as cx } from "../../class-names-BiMDVpUo.js";
 import { buttonVariants } from "../foundations/Button.js";
 import { Tooltip } from "../foundations/Tooltip.js";
-import { SubagentRunLabel, getSubagentRunName, getSubagentRunStatusText } from "./SubagentRunIndicator.js";
 import { t as NavigationLink } from "../../navigation-link-kqMa81v5.js";
+import { SubagentRunLabel, getSubagentRunName, getSubagentRunStatusText } from "./SubagentRunIndicator.js";
 import "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/agents-sdk/SubagentRunSelector.tsx

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

@@ -3,7 +3,7 @@ import { i as AgentMessageRenderPartContext } from "../../AgentMessageParts-C7L-
 import { AgentChatMessageContentProps, AgentChatRootProps } from "./AgentChat.js";
 import { o as createThinkChatActivityRenderer, r as ThinkChatActivityRendererOptions, t as ThinkChatActivity } from "../../ThinkChatActivity-DENkintt.js";
 import { i as ThinkChatValue } from "../../ThinkChatContext-COIgzkYp.js";
-import { n as WorkspaceFileRenderer } from "../../WorkspaceMessageResponse-8lOSAbw_.js";
+import { n as WorkspaceFileRenderer } from "../../WorkspaceMessageResponse-BApg8KZv.js";
 import { o as UseSessionCompactionResult } from "../../SessionCompaction-CmTJFpzj.js";
 import * as React from "react";
 import { ChatStatus, UIMessage } from "ai";

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

@@ -1,11 +1,11 @@
-import { AgentActivityFavicon, AgentActivityIcon } from "./AgentActivity.js";
 import { useExpansionState } from "../ai-sdk/ExpansionState.js";
 import { Activity, ActivityContent, ActivityItem, ActivityItemGroup, ActivityText, ActivityTrigger } from "../ai-sdk/Activity.js";
 import { Button } from "../foundations/Button.js";
 import { MessageResponse } from "../ai-sdk/Message.js";
+import { t as NavigationLink } from "../../navigation-link-kqMa81v5.js";
+import { AgentActivityFavicon, AgentActivityIcon } from "./AgentActivity.js";
 import { useOptionalAgentToolRuns } from "./AgentToolRunsContext.js";
 import { getSubagentRunName } from "./SubagentRunIndicator.js";
-import { t as NavigationLink } from "../../navigation-link-kqMa81v5.js";
 import { useOptionalThinkChatLive } from "./ThinkChatContext.js";
 import { isBrowserToolPart, isExecuteToolPart, isFetchToolPart, isPartWorking, isSessionContextToolPart, isSkillToolPart, isThinkChatActivityPart, isWorkspaceToolPart } from "./ThinkChatToolParts.js";
 import { ThinkChatBrowserPanel, ThinkChatExecutePanel, ThinkChatFetchPanel, ThinkChatSessionContextPanel, ThinkChatSkillPanel, ThinkChatWorkspacePanel } from "./ThinkChatToolPanels.js";

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

@@ -1,8 +1,8 @@
 import { ActivityOutput, ActivityPanel } from "../ai-sdk/Activity.js";
-import { o as formatUnknownValue } from "../../format-COCyV98Z.js";
 import { Tabs } from "../foundations/Tabs.js";
+import { o as formatUnknownValue } from "../../format-COCyV98Z.js";
+import { i as CodeBlockContent, r as CodeBlockContainer, t as CodeBlock } from "../../CodeBlock-Dw1z6jc8.js";
 import { BrowserLiveView } from "./BrowserLiveView.js";
-import { i as CodeBlockContent, r as CodeBlockContainer, t as CodeBlock } from "../../CodeBlock-g8sADidM.js";
 import { inferWorkspaceLanguage } from "./WorkspaceFile.js";
 import { displayUrl, isSessionContextToolFailure } from "./ThinkChatToolParts.js";
 import * as React from "react";

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

@@ -1,9 +1,9 @@
 import { t as cx } from "../../class-names-BiMDVpUo.js";
-import { S as FileIcon, T as InfoIcon } from "../../icons-cuEtsgj9.js";
+import { S as FileIcon, T as InfoIcon } from "../../icons-CeGfXO21.js";
 import { Activity, ActivityContent, ActivityItemGroup, ActivityOutput, ActivityTrigger } from "../ai-sdk/Activity.js";
 import { o as formatUnknownValue } from "../../format-COCyV98Z.js";
-import { EmptyState } from "../foundations/EmptyState.js";
 import { DescriptionList } from "../foundations/DescriptionList.js";
+import { EmptyState } from "../foundations/EmptyState.js";
 import { formatThinkExecutionTimestamp, getThinkExecutionRunError, getThinkExecutionRunId, getThinkExecutionRunKindLabel, getThinkExecutionRunProgressedAt, getThinkExecutionRunProgressedLabel, getThinkExecutionRunTitle, isThinkSubmissionRun } from "./ThinkExecutionRun.js";
 import { ThinkExecutionStatus } from "./ThinkExecutionStatus.js";
 import "react";

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

@@ -1,5 +1,5 @@
 import { t as cx } from "../../class-names-BiMDVpUo.js";
-import { K as SpinnerIcon, L as PauseIcon, T as InfoIcon, d as CheckIcon, nt as XIcon } from "../../icons-cuEtsgj9.js";
+import { K as SpinnerIcon, L as PauseIcon, T as InfoIcon, d as CheckIcon, nt as XIcon } from "../../icons-CeGfXO21.js";
 import { Tooltip } from "../foundations/Tooltip.js";
 import { formatThinkExecutionRunProgress, formatThinkExecutionStatus, getThinkExecutionRunKindLabel, getThinkExecutionRunStatus, getThinkExecutionRunStatusTone, getThinkExecutionRunTitle } from "./ThinkExecutionRun.js";
 import "react";