@mcp-b/react-components 0.40.0 → 0.42.0

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

@@ -1,5 +1,5 @@
 import { t as cx } from "../../class-names-BiMDVpUo.js";
-import { M as McpIcon, Y as SpinnerIcon, d as CheckIcon, nt as WarningIcon } from "../../icons-MmIXciMO.js";
+import { $ as WarningIcon, K as SpinnerIcon, d as CheckIcon, k as McpIcon } from "../../icons-CVFSeTJn.js";
 import { Button } from "../foundations/Button.js";
 import { AgentAttention, AgentAttentionActions, AgentAttentionBody, AgentAttentionHeader } from "../ai-sdk/AgentAttention.js";
 import { i as formatErrorMessage } from "../../format-DB2mX9DA.js";
@@ -78,7 +78,7 @@ function McpConnectionRequestContent({ part, server, reason, mcp: _mcp, serverId
 			className: cx("mcp-connection-request", "mcp-connection-request--settled", className),
 			"data-state": failed ? "failed" : declined ? "declined" : "connected",
 			role: failed ? "alert" : "status",
-			tone: failed ? "warning" : "neutral",
+			tone: failed ? "attention" : "neutral",
 			children: [/* @__PURE__ */ jsx(AgentAttentionHeader, {
 				icon: failed ? /* @__PURE__ */ jsx(WarningIcon, {}) : outcome === "connected" ? /* @__PURE__ */ jsx(CheckIcon, {}) : /* @__PURE__ */ jsx(McpIcon, {}),
 				title: failed ? `Couldn’t connect ${server.name}` : declined ? `Skipped connecting ${server.name}` : outcome === "connected" ? `Connected to ${server.name}` : `Connection request completed for ${server.name}`
@@ -99,7 +99,7 @@ function McpConnectionRequestContent({ part, server, reason, mcp: _mcp, serverId
 		className: cx("mcp-connection-request", className),
 		"data-state": authorizationFailed ? "failed" : serverState ?? (preparing ? "preparing" : authorizing ? "authenticating" : "idle"),
 		role: authorizationFailed ? "alert" : "status",
-		tone: connectionError ? "warning" : "neutral",
+		tone: connectionError ? "attention" : "neutral",
 		children: [
 			/* @__PURE__ */ jsx(AgentAttentionHeader, {
 				description,

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

@@ -1,39 +1,2 @@
-import { d as McpServerSetupAuthFieldName, l as McpServerSetupAuth } from "../../mcp-server-catalog-CCj2ItkV.js";
-import * as React from "react";
-
-//#region src/components/agents-sdk/McpConnectorForm.d.ts
-type CredentialFieldName = Exclude<McpServerSetupAuthFieldName, "redirectUrl">;
-type McpConnectorFormValues = Readonly<Partial<Record<CredentialFieldName, string>> & {
-  readonly name: string;
-  readonly url: string;
-}>;
-type McpConnectorFormProps = Omit<React.FormHTMLAttributes<HTMLFormElement>, "onSubmit" | "status"> & {
-  /** Authentication metadata that decides which credential fields render. */readonly auth?: McpServerSetupAuth; /** Initial connector values. Publisher client credentials remain app-owned. */
-  readonly defaults?: Partial<McpConnectorFormValues>; /** Optional pattern used to validate the MCP name field. */
-  readonly namePattern?: string; /** Keep a catalog-owned MCP name and URL visible but immutable. */
-  readonly readOnlyServer?: boolean; /** Read-only redirect URL shown for manual OAuth client setup. */
-  readonly redirectUrl?: string; /** Inline connection status announced politely to assistive tech. */
-  readonly status?: React.ReactNode; /** Label for the submit button. */
-  readonly submitLabel?: string; /** Label shown while submit is pending. */
-  readonly submittingLabel?: string; /** Called with normalized connector values after native form validation passes. */
-  readonly onSubmit: (values: McpConnectorFormValues) => void | Promise<void>;
-};
-/** Collects MCP connector settings and optional credentials with native form validation. */
-declare function McpConnectorForm({
-  auth,
-  className,
-  defaults,
-  namePattern,
-  readOnlyServer,
-  redirectUrl,
-  status,
-  submitLabel,
-  submittingLabel,
-  onSubmit,
-  ref,
-  ...props
-}: McpConnectorFormProps & {
-  ref?: React.Ref<HTMLFormElement>;
-}): React.JSX.Element;
-//#endregion
+import { n as McpConnectorFormProps, r as McpConnectorFormValues, t as McpConnectorForm } from "../../McpConnectorForm-MRm1r59e.js";
 export { McpConnectorForm, McpConnectorFormProps, McpConnectorFormValues };

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

@@ -1,4 +1,5 @@
 import { o as McpServerCard } from "../../mcp-server-catalog-CCj2ItkV.js";
+import { r as McpConnectorFormValues } from "../../McpConnectorForm-MRm1r59e.js";
 import { l as DialogProps } from "../../Dialog-B_FhRWaz.js";
 import * as React from "react";
 import { MCPServersState } from "agents";
@@ -31,8 +32,13 @@ interface McpPluginCatalogProps extends Omit<React.HTMLAttributes<HTMLElement>,
   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;
-  description?: React.ReactNode;
   searchLabel?: string;
   emptyMessage?: React.ReactNode;
 }
@@ -63,8 +69,8 @@ declare function McpPluginCatalog({
   disclosure,
   onConnect,
   onDisconnect,
+  onAddCustom,
   heading,
-  description,
   searchLabel,
   emptyMessage,
   className,

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

@@ -1,5 +1,6 @@
+import { CUSTOM_MCP_SERVER_CARD } from "../../utils/mcp-server-catalog.js";
 import { t as cx } from "../../class-names-BiMDVpUo.js";
-import { U as PlusIcon, Y as SpinnerIcon, b as EllipsisIcon, it as XIcon, nt as WarningIcon, o as ArrowUpRightIcon } from "../../icons-MmIXciMO.js";
+import { $ as WarningIcon, B as PlusIcon, K as SpinnerIcon, o as ArrowUpRightIcon, tt as XIcon, y as EllipsisIcon } from "../../icons-CVFSeTJn.js";
 import { Button } from "../foundations/Button.js";
 import { AgentAttention, AgentAttentionBody, AgentAttentionHeader } from "../ai-sdk/AgentAttention.js";
 import { IconButton } from "../foundations/IconButton.js";
@@ -9,6 +10,7 @@ import { Separator } from "../foundations/Separator.js";
 import { AppIcon } from "../foundations/AppIcon.js";
 import { SearchField } from "../foundations/SearchField.js";
 import { n as getMcpServerProjection, t as McpServerIcon } from "../../mcp-server-SD_S-IpB.js";
+import { McpServerSetupDialog } from "./McpServerPicker.js";
 import * as React from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/agents-sdk/McpPluginCatalog.tsx
@@ -17,8 +19,9 @@ import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 * state as {@link McpServerPicker}. Selecting a row opens the shared details
 * dialog; connecting still delegates to the host's existing MCP/OAuth path.
 */
-function McpPluginCatalog({ servers, mcp, detailsByServerId, featuredServerIds = [], brandName, brandLogo, disclosure, onConnect, onDisconnect, heading = "Plugins", description = "Work with your AI across your favorite tools.", searchLabel = "Search plugins", emptyMessage = "No plugins found.", className, ...props }) {
+function McpPluginCatalog({ servers, mcp, detailsByServerId, featuredServerIds = [], brandName, brandLogo, disclosure, onConnect, onDisconnect, onAddCustom, heading = "Plugins", searchLabel = "Search plugins", emptyMessage = "No plugins found.", className, ...props }) {
 	const [query, setQuery] = React.useState("");
+	const [customSetupOpen, setCustomSetupOpen] = React.useState(false);
 	const [selectedServer, setSelectedServer] = React.useState(null);
 	const headingIdPrefix = React.useId();
 	const sections = groupServers(filterServers(servers, detailsByServerId, query), featuredServerIds, query);
@@ -27,72 +30,79 @@ function McpPluginCatalog({ servers, mcp, detailsByServerId, featuredServerIds =
 		className: cx("mcp-plugin-catalog", className),
 		...props,
 		children: [
-			/* @__PURE__ */ jsxs("div", {
+			/* @__PURE__ */ jsxs("header", {
 				className: "mcp-plugin-catalog__header",
-				children: [/* @__PURE__ */ jsxs("div", {
-					className: "mcp-plugin-catalog__heading-copy",
-					children: [/* @__PURE__ */ jsx("h1", {
-						className: "mcp-plugin-catalog__heading",
-						children: heading
-					}), description ? /* @__PURE__ */ jsx("p", {
-						className: "mcp-plugin-catalog__description",
-						children: description
-					}) : null]
-				}), /* @__PURE__ */ jsxs(SearchField.Root, {
-					className: "mcp-plugin-catalog__search",
-					children: [/* @__PURE__ */ jsx(SearchField.Label, {
+				children: [
+					/* @__PURE__ */ jsx("h1", {
 						className: "sigvelo-visually-hidden",
-						children: searchLabel
-					}), /* @__PURE__ */ jsx(SearchField.Control, {
-						"aria-label": searchLabel,
-						placeholder: searchLabel,
-						value: query,
-						onChange: (event) => setQuery(event.target.value)
-					})]
-				})]
-			}),
-			installedServers.length ? /* @__PURE__ */ jsxs("section", {
-				"aria-labelledby": `${headingIdPrefix}-installed-heading`,
-				className: "mcp-plugin-catalog__installed",
-				children: [/* @__PURE__ */ jsx("h2", {
-					id: `${headingIdPrefix}-installed-heading`,
-					className: "mcp-plugin-catalog__section-heading",
-					children: "Installed"
-				}), /* @__PURE__ */ jsx("ul", {
-					className: "mcp-plugin-catalog__installed-list",
-					children: installedServers.map((server) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(IconButton, {
+						children: heading
+					}),
+					/* @__PURE__ */ jsxs(SearchField.Root, {
+						className: "mcp-plugin-catalog__search",
+						children: [/* @__PURE__ */ jsx(SearchField.Label, {
+							className: "sigvelo-visually-hidden",
+							children: searchLabel
+						}), /* @__PURE__ */ jsx(SearchField.Control, {
+							"aria-label": searchLabel,
+							placeholder: searchLabel,
+							value: query,
+							onChange: (event) => setQuery(event.target.value)
+						})]
+					}),
+					onAddCustom ? /* @__PURE__ */ jsxs(Button, {
+						className: "mcp-plugin-catalog__add-custom",
 						color: "neutral",
-						label: `Open installed ${server.name}`,
-						size: "xl",
-						tooltipSide: "bottom",
+						size: "sm",
 						variant: "ghost",
-						onClick: () => setSelectedServer(server),
-						children: /* @__PURE__ */ jsx(McpServerIcon, { server })
-					}) }, `${server.id}:${server.url}`))
-				})]
-			}) : null,
-			sections.length === 0 ? /* @__PURE__ */ jsx("p", {
-				className: "mcp-plugin-catalog__empty",
-				children: emptyMessage
-			}) : /* @__PURE__ */ jsx("div", {
-				className: "mcp-plugin-catalog__sections",
-				children: sections.map((section) => /* @__PURE__ */ jsxs("section", {
-					"aria-labelledby": `${headingIdPrefix}-${section.id}-heading`,
-					className: "mcp-plugin-catalog__section",
+						onClick: () => setCustomSetupOpen(true),
+						children: [/* @__PURE__ */ jsx(PlusIcon, {}), "Custom plugin"]
+					}) : null
+				]
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "mcp-plugin-catalog__body",
+				children: [installedServers.length ? /* @__PURE__ */ jsxs("section", {
+					"aria-labelledby": `${headingIdPrefix}-installed-heading`,
+					className: "mcp-plugin-catalog__installed",
 					children: [/* @__PURE__ */ jsx("h2", {
-						id: `${headingIdPrefix}-${section.id}-heading`,
+						id: `${headingIdPrefix}-installed-heading`,
 						className: "mcp-plugin-catalog__section-heading",
-						children: section.label
+						children: "Installed"
 					}), /* @__PURE__ */ jsx("ul", {
-						className: "mcp-plugin-catalog__list",
-						children: section.servers.map((server) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(McpPluginCard, {
-							server,
-							details: detailsByServerId?.[server.id],
-							mcp,
-							onSelect: () => setSelectedServer(server)
+						className: "mcp-plugin-catalog__installed-list",
+						children: installedServers.map((server) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(IconButton, {
+							color: "neutral",
+							label: `Open installed ${server.name}`,
+							size: "xl",
+							tooltipSide: "bottom",
+							variant: "ghost",
+							onClick: () => setSelectedServer(server),
+							children: /* @__PURE__ */ jsx(McpServerIcon, { server })
 						}) }, `${server.id}:${server.url}`))
 					})]
-				}, section.id))
+				}) : null, sections.length === 0 ? /* @__PURE__ */ jsx("p", {
+					className: "mcp-plugin-catalog__empty",
+					children: emptyMessage
+				}) : /* @__PURE__ */ jsx("div", {
+					className: "mcp-plugin-catalog__sections",
+					children: sections.map((section) => /* @__PURE__ */ jsxs("section", {
+						"aria-labelledby": `${headingIdPrefix}-${section.id}-heading`,
+						className: "mcp-plugin-catalog__section",
+						children: [/* @__PURE__ */ jsx("h2", {
+							id: `${headingIdPrefix}-${section.id}-heading`,
+							className: "mcp-plugin-catalog__section-heading",
+							children: section.label
+						}), /* @__PURE__ */ jsx("ul", {
+							className: "mcp-plugin-catalog__list",
+							children: section.servers.map((server) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(McpPluginCard, {
+								server,
+								details: detailsByServerId?.[server.id],
+								mcp,
+								onSelect: () => setSelectedServer(server)
+							}) }, `${server.id}:${server.url}`))
+						})]
+					}, section.id))
+				})]
 			}),
 			/* @__PURE__ */ jsx(McpPluginDetailsDialog, {
 				details: selectedServer ? detailsByServerId?.[selectedServer.id] : void 0,
@@ -104,14 +114,24 @@ function McpPluginCatalog({ servers, mcp, detailsByServerId, featuredServerIds =
 				onConnect,
 				onDisconnect,
 				onOpenChange: (open) => !open && setSelectedServer(null)
-			})
+			}),
+			onAddCustom ? /* @__PURE__ */ jsx(McpServerSetupDialog, {
+				server: customSetupOpen ? CUSTOM_MCP_SERVER_CARD : null,
+				onOpenChange: setCustomSetupOpen,
+				onSubmit: async (values) => {
+					await onAddCustom(values);
+					setCustomSetupOpen(false);
+				}
+			}) : null
 		]
 	});
 }
 /** Reference-derived plugin detail surface without a parallel install state. */
 function McpPluginDetailsDialog({ server, details, mcp, brandName = "your AI", brandLogo = /* @__PURE__ */ jsx("img", {
 	alt: "",
-	src: new URL("../../assets/think-browser-host.png", import.meta.url).href
+	src: new URL("../../assets/think-browser-host.png", import.meta.url).href,
+	width: 128,
+	height: 128
 }), disclosure = /* @__PURE__ */ jsxs(Fragment, { children: [
 	/* @__PURE__ */ jsxs("p", { children: [/* @__PURE__ */ jsx("strong", { children: "You're in control." }), " This plugin is limited to the account and permissions you approve, and you can disconnect it at any time."] }),
 	/* @__PURE__ */ jsxs("p", { children: [/* @__PURE__ */ jsx("strong", { children: "Plugins may introduce elevated risk." }), " Only connect tools you trust. A compromised plugin could use its access to read or change data in the connected service."] }),
@@ -250,7 +270,7 @@ function McpPluginDialogActions({ projection, server, onConnect, onDisconnect })
 	}
 	return /* @__PURE__ */ jsxs(Fragment, { children: [action.error ? /* @__PURE__ */ jsxs(AgentAttention, {
 		role: "alert",
-		tone: "warning",
+		tone: "attention",
 		children: [/* @__PURE__ */ jsx(AgentAttentionHeader, {
 			icon: /* @__PURE__ */ jsx(WarningIcon, {}),
 			title: disconnect ? "Disconnect failed" : "Connection failed"

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

@@ -1,6 +1,6 @@
 import { s as MenuItemProps, t as Menu } from "../../Menu-yb6QXWA3.js";
 import { o as McpServerCard } from "../../mcp-server-catalog-CCj2ItkV.js";
-import { McpConnectorFormProps } from "./McpConnectorForm.js";
+import { n as McpConnectorFormProps } from "../../McpConnectorForm-MRm1r59e.js";
 import { l as DialogProps } from "../../Dialog-B_FhRWaz.js";
 import * as React from "react";
 import { MCPServersState } from "agents";

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

@@ -1,5 +1,5 @@
 import { n as mergeBaseClassName } from "../../class-names-BiMDVpUo.js";
-import { F as MinusIcon, Y as SpinnerIcon, d as CheckIcon, nt as WarningIcon } from "../../icons-MmIXciMO.js";
+import { $ as WarningIcon, K as SpinnerIcon, M as MinusIcon, d as CheckIcon } from "../../icons-CVFSeTJn.js";
 import { buttonVariants } from "../foundations/Button.js";
 import { Menu } from "../foundations/Menu.js";
 import { Dialog } from "../foundations/Dialog.js";
@@ -29,7 +29,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} 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` : "MCP connectors" }), /* @__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", {

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

@@ -1,5 +1,5 @@
 import { t as cx } from "../../class-names-BiMDVpUo.js";
-import { K as SearchIcon, f as ChevronDownIcon } from "../../icons-MmIXciMO.js";
+import { U as SearchIcon, f as ChevronDownIcon } from "../../icons-CVFSeTJn.js";
 import { Button } from "../foundations/Button.js";
 import { Autocomplete } from "../foundations/Autocomplete.js";
 import { Dialog } from "../foundations/Dialog.js";

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

@@ -1,4 +1,4 @@
-import { M as McpIcon, c as BoxIcon } from "../../icons-MmIXciMO.js";
+import { c as BoxIcon, k as McpIcon } from "../../icons-CVFSeTJn.js";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/agents-sdk/PromptInputCommands.tsx
 /** Project whole upstream Agents MCP state into composer mention commands. */

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

@@ -16,14 +16,6 @@ declare function SubagentRunProgress({
 }: SubagentRunProgressProps & {
   ref?: React.Ref<HTMLDivElement>;
 }): React.JSX.Element;
-interface SubagentRunActionsProps extends React.HTMLAttributes<HTMLDivElement> {}
-declare function SubagentRunActions({
-  className,
-  ref,
-  ...props
-}: SubagentRunActionsProps & {
-  ref?: React.Ref<HTMLDivElement>;
-}): React.JSX.Element;
 interface SubagentRunMilestonesProps extends React.OlHTMLAttributes<HTMLOListElement> {}
 declare function SubagentRunMilestones({
   className,
@@ -41,4 +33,4 @@ declare function SubagentRunMilestone({
   ref?: React.Ref<HTMLLIElement>;
 }): React.JSX.Element;
 //#endregion
-export { SubagentRunActions, SubagentRunActionsProps, SubagentRunMilestone, SubagentRunMilestoneProps, SubagentRunMilestones, SubagentRunMilestonesProps, SubagentRunProgress, SubagentRunProgressProps };
+export { SubagentRunMilestone, SubagentRunMilestoneProps, SubagentRunMilestones, SubagentRunMilestonesProps, SubagentRunProgress, SubagentRunProgressProps };

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

@@ -22,14 +22,6 @@ function SubagentRunProgress({ className, label, value, ref, ...props }) {
 		})]
 	});
 }
-function SubagentRunActions({ className, ref, ...props }) {
-	return /* @__PURE__ */ jsx("div", {
-		ref,
-		"data-slot": "subagent-run-actions",
-		className: cx("subagent-run__actions", className),
-		...props
-	});
-}
 function SubagentRunMilestones({ className, ref, ...props }) {
 	return /* @__PURE__ */ jsx("ol", {
 		ref,
@@ -47,4 +39,4 @@ function SubagentRunMilestone({ className, ref, ...props }) {
 	});
 }
 //#endregion
-export { SubagentRunActions, SubagentRunMilestone, SubagentRunMilestones, SubagentRunProgress };
+export { SubagentRunMilestone, SubagentRunMilestones, SubagentRunProgress };

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

@@ -1,5 +1,5 @@
 import { t as cx } from "../../class-names-BiMDVpUo.js";
-import { Y as SpinnerIcon, Z as StopIcon, d as CheckIcon, nt as WarningIcon } from "../../icons-MmIXciMO.js";
+import { $ as WarningIcon, J as StopIcon, K as SpinnerIcon, d as CheckIcon } from "../../icons-CVFSeTJn.js";
 import "react";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/agents-sdk/SubagentRunIndicator.tsx

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

@@ -16,8 +16,10 @@ interface SubagentRunSelectorProps<Part extends AgentToolRunPart = UIMessage["pa
  *
  * The component consumes `AgentToolRunState` whole and derives its label and
  * status from upstream fields. The application-authored Link routes
- * `run.subAgent` into an adjacent detail surface; this component never invents
- * a second transcript or expands child content inline.
+ * `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.
  */
 declare function SubagentRunSelector<Part extends AgentToolRunPart = UIMessage["parts"][number]>({
   className,

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

@@ -1,8 +1,8 @@
 import { t as cx } from "../../class-names-BiMDVpUo.js";
-import { l as BrainIcon } from "../../icons-MmIXciMO.js";
 import { buttonVariants } from "../foundations/Button.js";
 import { Tooltip } from "../foundations/Tooltip.js";
 import { t as NavigationLink } from "../../navigation-link-kqMa81v5.js";
+import { NaniteMark } from "../nanites/NaniteScene.js";
 import { SubagentRunIndicator, getSubagentRunName, getSubagentRunTooltip } from "./SubagentRunIndicator.js";
 import "react";
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -12,8 +12,10 @@ import { jsx, jsxs } from "react/jsx-runtime";
 *
 * The component consumes `AgentToolRunState` whole and derives its label and
 * status from upstream fields. The application-authored Link routes
-* `run.subAgent` into an adjacent detail surface; this component never invents
-* a second transcript or expands child content inline.
+* `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 }) {
 	const name = getSubagentRunName(run);
@@ -21,16 +23,15 @@ function SubagentRunSelector({ className, render, run, tooltip, ref, "aria-label
 		ref,
 		render,
 		"data-slot": "subagent-run-selector",
-		"data-run-status": run.status,
 		className: cx(buttonVariants({
-			variant: "outline",
+			variant: "ghost",
 			color: "neutral",
 			size: "sm"
 		}), "subagent-run__selector", className),
 		"aria-label": ariaLabel ?? `Open ${name}, ${run.status}`,
 		...props,
 		children: [
-			/* @__PURE__ */ jsx(BrainIcon, { "aria-hidden": "true" }),
+			/* @__PURE__ */ jsx(NaniteMark, { index: run.order }),
 			/* @__PURE__ */ jsx("span", {
 				className: "subagent-run__title sigvelo-truncate",
 				children: name

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

@@ -1,12 +1,12 @@
 import { i as AgentMessageRenderPartContext } from "../../AgentMessageParts-C7L-Mv9U.js";
 import { K as PromptInputMessage } from "../../PromptInput-BRX7FhjH.js";
-import { r as AgentChatProps } from "../../AgentChat-CVO7xyLC.js";
-import { n as AgentToolEventsValue } from "../../AgentToolRunsContext-BCVqCtJ1.js";
+import { r as AgentChatProps } from "../../AgentChat-DVr2giwD.js";
+import { n as AgentToolEventsValue } from "../../AgentToolRunsContext-daY67hFM.js";
 import { o as UseSessionCompactionResult } from "../../SessionCompaction-CmTJFpzj.js";
-import { o as createThinkChatActivityRenderer, r as ThinkChatActivityRendererOptions, t as ThinkChatActivity } from "../../ThinkChatActivity-D6-_5Phw.js";
+import { o as createThinkChatActivityRenderer, r as ThinkChatActivityRendererOptions, t as ThinkChatActivity } from "../../ThinkChatActivity-CsDql-ER.js";
 import { i as ThinkChatValue } from "../../ThinkChatContext-COIgzkYp.js";
 import { t as ThinkRecoveryNotice } from "../../ThinkRecoveryNotice-DGWr94rk.js";
-import { n as WorkspaceHtmlArtifactRenderer } from "../../WorkspaceMessageResponse-Cy28WGSz.js";
+import { n as WorkspaceHtmlArtifactRenderer } from "../../WorkspaceMessageResponse-D66ty4FO.js";
 import * as React from "react";
 import { UIMessage } from "ai";
 import { UseAgentOptions } from "agents/react";

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

@@ -1,2 +1,2 @@
-import { a as ThinkChatToolRenderers, i as ThinkChatToolRenderer, n as ThinkChatActivityProps, o as createThinkChatActivityRenderer, r as ThinkChatActivityRendererOptions, s as renderThinkChatActivityPart, t as ThinkChatActivity } from "../../ThinkChatActivity-D6-_5Phw.js";
+import { a as ThinkChatToolRenderers, i as ThinkChatToolRenderer, n as ThinkChatActivityProps, o as createThinkChatActivityRenderer, r as ThinkChatActivityRendererOptions, s as renderThinkChatActivityPart, t as ThinkChatActivity } from "../../ThinkChatActivity-CsDql-ER.js";
 export { ThinkChatActivity, ThinkChatActivityProps, ThinkChatActivityRendererOptions, ThinkChatToolRenderer, ThinkChatToolRenderers, createThinkChatActivityRenderer, renderThinkChatActivityPart };

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

@@ -32,7 +32,7 @@ function activityPartIcon(part) {
 * thousands-of-tools run expandable.
 */
 const VISIBLE_STEP_LIMIT = 100;
-function ThinkChatActivity({ parts, defaultOpen, isStreaming, toolRenderers, stateKey }) {
+function ThinkChatActivity({ parts, defaultOpen, isStreaming, toolRenderers, settledAction, stateKey }) {
 	const steps = parts.flatMap((part, index) => {
 		const description = describeThinkChatActivityPart(part, toolRenderers);
 		if (!description) return [];
@@ -59,8 +59,8 @@ function ThinkChatActivity({ parts, defaultOpen, isStreaming, toolRenderers, sta
 		stateKey: scope,
 		children: [/* @__PURE__ */ jsx(ActivityTrigger, {
 			icon: header.url ? /* @__PURE__ */ jsx(AgentActivityFavicon, { url: header.url }) : /* @__PURE__ */ jsx(AgentActivityIcon, { kind: header.iconKind }),
-			action: header.action,
-			detail: header.detail
+			action: !streaming && settledAction ? settledAction : header.action,
+			detail: !streaming && settledAction ? void 0 : header.detail
 		}), /* @__PURE__ */ jsxs(ActivityContent, { children: [hiddenStepCount > 0 ? /* @__PURE__ */ jsxs(Button, {
 			size: "sm",
 			variant: "ghost",
@@ -153,7 +153,18 @@ function ThinkChatActivityStep({ description, part, stateKey, toolRenderers }) {
 		children: text
 	});
 }
-function ThinkChatActivityGroup({ message, parts, renderAgentToolRunLink, isTrailing, toolRenderers, stateKey }) {
+function terminalActivityAction(message) {
+	const metadata = message.metadata;
+	if (typeof metadata !== "object" || metadata === null || !("durationMs" in metadata) || typeof metadata.durationMs !== "number" || !Number.isFinite(metadata.durationMs) || metadata.durationMs < 0) return;
+	const totalSeconds = Math.max(1, Math.round(metadata.durationMs / 1e3));
+	const minutes = Math.floor(totalSeconds / 60);
+	const seconds = totalSeconds % 60;
+	const duration = minutes ? seconds ? `${minutes}m ${seconds}s` : `${minutes}m` : `${totalSeconds}s`;
+	const status = "status" in metadata ? metadata.status : void 0;
+	if (status === "completed") return `Worked for ${duration}`;
+	if (status === "aborted") return `You stopped after ${duration}`;
+}
+function ThinkChatActivityGroup({ message, parts, renderAgentToolRunLink, isTrailing, settledAction, toolRenderers, stateKey }) {
 	const live = useOptionalThinkChatLive();
 	const streaming = isTrailing && (live ? live.isStreaming && live.lastMessageId === message.id : parts.some(isPartWorking));
 	const agentTools = useOptionalAgentToolRuns();
@@ -168,6 +179,7 @@ function ThinkChatActivityGroup({ message, parts, renderAgentToolRunLink, isTrai
 	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(ThinkChatActivity, {
 		parts,
 		isStreaming: streaming,
+		settledAction,
 		toolRenderers,
 		stateKey
 	}), runs.length && renderAgentToolRunLink ? /* @__PURE__ */ jsx(SubagentRunList, {
@@ -212,11 +224,13 @@ function createThinkChatActivityRenderer({ excludeTools, renderAgentToolRunLink,
 		if (partIndex !== start) return null;
 		let end = partIndex;
 		while (end + 1 < message.parts.length && runStarts[end + 1] === start) end++;
+		const isLastActivityRun = runStarts.findLast((runStart) => runStart !== -1) === start;
 		return /* @__PURE__ */ jsx(ThinkChatActivityGroup, {
 			message,
 			parts: message.parts.slice(start, end + 1),
 			stateKey: `${message.id}:${start}`,
 			isTrailing: end === message.parts.length - 1,
+			settledAction: isLastActivityRun ? terminalActivityAction(message) : void 0,
 			toolRenderers,
 			renderAgentToolRunLink
 		});

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

@@ -1,7 +1,7 @@
 import { ActivityOutput, ActivityPanel } from "../ai-sdk/Activity.js";
 import { Tabs } from "../foundations/Tabs.js";
 import { a as formatUnknownValue } from "../../format-DB2mX9DA.js";
-import { t as CodeBlock } from "../../CodeBlock-CWk1FVtm.js";
+import { t as CodeBlock } from "../../CodeBlock-BjELA-_s.js";
 import { BrowserLiveView } from "./BrowserLiveView.js";
 import { inferWorkspaceLanguage } from "./WorkspaceFile.js";
 import { displayUrl, isSessionContextToolFailure } from "./ThinkChatToolParts.js";
@@ -386,12 +386,16 @@ function ThinkChatBrowserPanel({ part }) {
 			receivedAt: seenAt,
 			fallback: media.screenshot ? /* @__PURE__ */ jsx("img", {
 				src: media.screenshot,
-				alt: "Last browser state"
+				alt: "Last browser state",
+				width: 16,
+				height: 10
 			}) : void 0
 		}) : media.screenshot ? /* @__PURE__ */ jsx("img", {
 			className: "activity__browser-screenshot",
 			src: media.screenshot,
-			alt: "Browser screenshot"
+			alt: "Browser screenshot",
+			width: 16,
+			height: 10
 		}) : null;
 		const codeView = /* @__PURE__ */ jsx(ExecuteCodeView, {
 			code,

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

@@ -1,4 +1,4 @@
-import { t as ThinkExecutionRun } from "../../ThinkExecutionRun-lYYgyeE1.js";
+import { t as ThinkExecutionRun } from "../../ThinkExecutionRun-k8bpyXqt.js";
 import * as React from "react";
 
 //#region src/components/agents-sdk/ThinkExecutionDetail.d.ts