@mcp-b/react-components 0.40.0 → 0.41.0

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";
@@ -7,8 +8,9 @@ import { Dialog } from "../foundations/Dialog.js";
 import { i as formatErrorMessage } from "../../format-DB2mX9DA.js";
 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 { SearchField } from "../foundations/SearchField.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,7 +114,15 @@ 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
 		]
 	});
 }
@@ -250,7 +268,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,13 +1,13 @@
 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";
 import { o as titleCase } from "../../format-DB2mX9DA.js";
 import { Separator } from "../foundations/Separator.js";
 import { ScrollArea } from "../foundations/ScrollArea.js";
-import { t as ProviderLogo } from "../../provider-logos-zjZycgV6.js";
 import { EmptyState } from "../foundations/EmptyState.js";
+import { t as ProviderLogo } from "../../provider-logos-zjZycgV6.js";
 import * as React from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { createPortal } from "react-dom";

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,9 +1,9 @@
 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 { SubagentRunIndicator, getSubagentRunName, getSubagentRunTooltip } from "./SubagentRunIndicator.js";
+import { NaniteMark } from "../nanites/NaniteScene.js";
 import "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/agents-sdk/SubagentRunSelector.tsx
@@ -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-DyGHj01E.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/ThinkChat.js

@@ -1,2 +1,2 @@
-import { a as thinkPendingExecutionApprovalsQueryOptions, i as ThinkChatRoot, n as ThinkChatMessages, o as useThinkChat, r as ThinkChatProvider, s as useThinkPendingExecutionApprovals, t as ThinkChat } from "../../ThinkChat-DkA4Wr71.js";
+import { a as thinkPendingExecutionApprovalsQueryOptions, i as ThinkChatRoot, n as ThinkChatMessages, o as useThinkChat, r as ThinkChatProvider, s as useThinkPendingExecutionApprovals, t as ThinkChat } from "../../ThinkChat-BES_3Mb-.js";
 export { ThinkChat, ThinkChatMessages, ThinkChatProvider, ThinkChatRoot, thinkPendingExecutionApprovalsQueryOptions, useThinkChat, useThinkPendingExecutionApprovals };

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-DyGHj01E.js";
 export { ThinkChatActivity, ThinkChatActivityProps, ThinkChatActivityRendererOptions, ThinkChatToolRenderer, ThinkChatToolRenderers, createThinkChatActivityRenderer, renderThinkChatActivityPart };

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

@@ -2,9 +2,9 @@ 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 { AgentActivityFavicon, AgentActivityIcon } from "./AgentActivity.js";
 import { useOptionalAgentToolRuns } from "./AgentToolRunsContext.js";
 import { SubagentRunList } from "./SubagentRunList.js";
-import { AgentActivityFavicon, AgentActivityIcon } from "./AgentActivity.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,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";

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

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

@@ -1,9 +1,10 @@
 import { t as cx } from "../../class-names-BiMDVpUo.js";
-import { C as FileIcon, G as RefreshIcon, O as InfoIcon, d as CheckIcon, et as TerminalIcon, it as XIcon, n as ArrowDownIcon } from "../../icons-MmIXciMO.js";
-import { Activity, ActivityContent, ActivityItem, ActivityItemGroup, ActivityOutput, ActivityPanel, ActivityTrigger } from "../ai-sdk/Activity.js";
+import { S as FileIcon, T as InfoIcon } from "../../icons-CVFSeTJn.js";
+import { Activity, ActivityContent, ActivityItemGroup, ActivityOutput, ActivityTrigger } from "../ai-sdk/Activity.js";
 import { a as formatUnknownValue } from "../../format-DB2mX9DA.js";
 import { EmptyState } from "../foundations/EmptyState.js";
-import { formatThinkExecutionRunProgress, formatThinkExecutionStatus, formatThinkExecutionTimestamp, getThinkExecutionRunError, getThinkExecutionRunId, getThinkExecutionRunProgressedAt, getThinkExecutionRunProgressedLabel, getThinkExecutionRunStatus, getThinkExecutionRunTitle, isThinkSubmissionRun } from "./ThinkExecutionRun.js";
+import { DescriptionList } from "../foundations/DescriptionList.js";
+import { formatThinkExecutionTimestamp, getThinkExecutionRunError, getThinkExecutionRunId, getThinkExecutionRunKindLabel, getThinkExecutionRunProgressedAt, getThinkExecutionRunProgressedLabel, getThinkExecutionRunTitle, isThinkSubmissionRun } from "./ThinkExecutionRun.js";
 import { ThinkExecutionStatus } from "./ThinkExecutionStatus.js";
 import "react";
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -27,52 +28,51 @@ function ThinkExecutionDetail({ className, emptyState = "Select a run to view it
 		ref,
 		className: cx("think-execution-detail", className),
 		...props,
-		children: [/* @__PURE__ */ jsxs("header", {
-			className: "think-execution-workbench__detail-header",
-			children: [/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("h3", { children: getThinkExecutionRunTitle(run) }), !isThinkSubmissionRun(run) ? /* @__PURE__ */ jsx("code", { children: id }) : null] }), /* @__PURE__ */ jsxs("div", {
-				className: "think-execution-workbench__detail-status",
-				children: [/* @__PURE__ */ jsx(ThinkExecutionStatus, { run }), /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("strong", { children: formatThinkExecutionStatus(getThinkExecutionRunStatus(run)) }), /* @__PURE__ */ jsx("span", { children: formatThinkExecutionRunProgress(run) })] })]
-			})]
-		}), /* @__PURE__ */ jsxs(Activity, {
-			defaultOpen: true,
-			children: [/* @__PURE__ */ jsx(ActivityTrigger, {
-				icon: /* @__PURE__ */ jsx(TerminalIcon, {}),
-				action: "Activity"
-			}), /* @__PURE__ */ jsxs(ActivityContent, { children: [
-				/* @__PURE__ */ jsx(ActivityItem, {
-					icon: /* @__PURE__ */ jsx(ArrowDownIcon, {}),
-					children: `Created ${formatThinkExecutionTimestamp(run.createdAt)}`
-				}),
-				progressedAt ? /* @__PURE__ */ jsx(ActivityItem, {
-					icon: /* @__PURE__ */ jsx(RefreshIcon, {}),
-					children: `${getThinkExecutionRunProgressedLabel(run)} ${formatThinkExecutionTimestamp(progressedAt)}`
-				}) : null,
-				run.completedAt ? /* @__PURE__ */ jsx(ActivityItem, {
-					icon: /* @__PURE__ */ jsx(CheckIcon, {}),
-					children: `Finished ${formatThinkExecutionTimestamp(run.completedAt)}`
-				}) : null,
-				error ? /* @__PURE__ */ jsx(ActivityItemGroup, {
-					icon: /* @__PURE__ */ jsx(XIcon, {}),
-					action: "Failure",
-					children: /* @__PURE__ */ jsx(ActivityPanel, {
-						label: "Error",
-						text: error,
-						status: "error",
-						error: true
-					})
-				}) : null,
-				run.metadata ? /* @__PURE__ */ jsx(ActivityItemGroup, {
+		children: [
+			/* @__PURE__ */ jsxs("header", {
+				className: "think-execution-detail__header",
+				children: [
+					/* @__PURE__ */ jsx("p", {
+						className: "think-execution-detail__eyebrow",
+						children: getThinkExecutionRunKindLabel(run)
+					}),
+					/* @__PURE__ */ jsxs("div", {
+						className: "think-execution-detail__heading",
+						children: [/* @__PURE__ */ jsx("h3", { children: getThinkExecutionRunTitle(run) }), /* @__PURE__ */ jsx(ThinkExecutionStatus, { run })]
+					}),
+					!isThinkSubmissionRun(run) ? /* @__PURE__ */ jsx("code", { children: id }) : null
+				]
+			}),
+			error ? /* @__PURE__ */ jsx("p", {
+				className: "think-execution-detail__error",
+				role: "alert",
+				children: error
+			}) : null,
+			/* @__PURE__ */ jsxs(DescriptionList.Root, {
+				variant: "divided",
+				className: "think-execution-detail__facts",
+				children: [
+					/* @__PURE__ */ jsxs(DescriptionList.Item, { children: [/* @__PURE__ */ jsx(DescriptionList.Term, { children: "Created" }), /* @__PURE__ */ jsx(DescriptionList.Details, { children: formatThinkExecutionTimestamp(run.createdAt) })] }),
+					progressedAt ? /* @__PURE__ */ jsxs(DescriptionList.Item, { children: [/* @__PURE__ */ jsx(DescriptionList.Term, { children: getThinkExecutionRunProgressedLabel(run) }), /* @__PURE__ */ jsx(DescriptionList.Details, { children: formatThinkExecutionTimestamp(progressedAt) })] }) : null,
+					run.completedAt ? /* @__PURE__ */ jsxs(DescriptionList.Item, { children: [/* @__PURE__ */ jsx(DescriptionList.Term, { children: "Finished" }), /* @__PURE__ */ jsx(DescriptionList.Details, { children: formatThinkExecutionTimestamp(run.completedAt) })] }) : null
+				]
+			}),
+			/* @__PURE__ */ jsxs(Activity, {
+				defaultOpen: true,
+				children: [/* @__PURE__ */ jsx(ActivityTrigger, {
+					icon: /* @__PURE__ */ jsx(FileIcon, {}),
+					action: "Record"
+				}), /* @__PURE__ */ jsxs(ActivityContent, { children: [run.metadata ? /* @__PURE__ */ jsx(ActivityItemGroup, {
 					icon: /* @__PURE__ */ jsx(InfoIcon, {}),
 					action: "Metadata",
 					children: /* @__PURE__ */ jsx(ActivityOutput, { children: formatJson(run.metadata) })
-				}) : null,
-				/* @__PURE__ */ jsx(ActivityItemGroup, {
+				}) : null, /* @__PURE__ */ jsx(ActivityItemGroup, {
 					icon: /* @__PURE__ */ jsx(FileIcon, {}),
 					action: "Raw record",
 					children: /* @__PURE__ */ jsx(ActivityOutput, { children: formatJson(run) })
-				})
-			] })]
-		})]
+				})] })]
+			})
+		]
 	});
 }
 //#endregion

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

@@ -1,2 +1,2 @@
-import { _ as isThinkSubmissionRun, a as formatThinkExecutionStatus, c as getThinkExecutionRunError, d as getThinkExecutionRunProgressedLabel, f as getThinkExecutionRunStatus, g as isSameThinkExecutionRun, h as getThinkExecutionRunTitle, i as formatThinkExecutionShortTimestamp, l as getThinkExecutionRunId, m as getThinkExecutionRunSubtitle, n as ThinkExecutionStatusTone, o as formatThinkExecutionTimestamp, p as getThinkExecutionRunStatusTone, r as formatThinkExecutionRunProgress, s as getThinkExecutionRunAccessibleName, t as ThinkExecutionRun, u as getThinkExecutionRunProgressedAt } from "../../ThinkExecutionRun-lYYgyeE1.js";
-export { ThinkExecutionRun, ThinkExecutionStatusTone, formatThinkExecutionRunProgress, formatThinkExecutionShortTimestamp, formatThinkExecutionStatus, formatThinkExecutionTimestamp, getThinkExecutionRunAccessibleName, getThinkExecutionRunError, getThinkExecutionRunId, getThinkExecutionRunProgressedAt, getThinkExecutionRunProgressedLabel, getThinkExecutionRunStatus, getThinkExecutionRunStatusTone, getThinkExecutionRunSubtitle, getThinkExecutionRunTitle, isSameThinkExecutionRun, isThinkSubmissionRun };
+import { _ as isThinkSubmissionRun, a as formatThinkExecutionStatus, c as getThinkExecutionRunError, d as getThinkExecutionRunProgressedAt, f as getThinkExecutionRunProgressedLabel, g as getThinkExecutionRunTitle, h as getThinkExecutionRunSubtitle, i as formatThinkExecutionShortTimestamp, l as getThinkExecutionRunId, m as getThinkExecutionRunStatusTone, n as ThinkExecutionStatusTone, o as formatThinkExecutionTimestamp, p as getThinkExecutionRunStatus, r as formatThinkExecutionRunProgress, s as getThinkExecutionRunAccessibleName, t as ThinkExecutionRun, u as getThinkExecutionRunKindLabel } from "../../ThinkExecutionRun-k8bpyXqt.js";
+export { ThinkExecutionRun, ThinkExecutionStatusTone, formatThinkExecutionRunProgress, formatThinkExecutionShortTimestamp, formatThinkExecutionStatus, formatThinkExecutionTimestamp, getThinkExecutionRunAccessibleName, getThinkExecutionRunError, getThinkExecutionRunId, getThinkExecutionRunKindLabel, getThinkExecutionRunProgressedAt, getThinkExecutionRunProgressedLabel, getThinkExecutionRunStatus, getThinkExecutionRunStatusTone, getThinkExecutionRunSubtitle, getThinkExecutionRunTitle, isThinkSubmissionRun };