@mcp-b/react-components 0.29.0 → 0.30.1

package/dist/components/{SettingsFormDialog.js → general-purpose/SettingsFormDialog.js}

@@ -1,10 +1,11 @@
-import { Button } from "./Button.js";
-import { Dialog } from "./Dialog.js";
-import { Field } from "./Field.js";
-import { Form } from "./Form.js";
+import { Button } from "../foundations/Button.js";
+import { Field } from "../foundations/Field.js";
+import { Form } from "../foundations/Form.js";
+import { Dialog } from "../foundations/Dialog.js";
+import { i as formatErrorMessage } from "../../format-CmopcfqJ.js";
 import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-//#region src/components/SettingsFormDialog.tsx
+//#region src/components/general-purpose/SettingsFormDialog.tsx
 function readSettingsValues(data, fields) {
 	return Object.fromEntries(fields.map((field) => {
 		const value = data[field.name];
@@ -31,7 +32,7 @@ function SettingsFormDialogContent({ fields, initialValues, submitLabel, submitt
 			onOpenChange(false);
 		} catch (cause) {
 			if (!active.current) return;
-			setSubmission({ error: cause instanceof Error ? cause.message : String(cause) });
+			setSubmission({ error: formatErrorMessage(cause) });
 		}
 	}
 	async function remove() {
@@ -44,7 +45,7 @@ function SettingsFormDialogContent({ fields, initialValues, submitLabel, submitt
 			onOpenChange(false);
 		} catch (cause) {
 			if (!active.current) return;
-			setSubmission({ error: cause instanceof Error ? cause.message : String(cause) });
+			setSubmission({ error: formatErrorMessage(cause) });
 		}
 	}
 	return /* @__PURE__ */ jsxs(Form, {

package/dist/components/{SetupChecklist.d.ts → general-purpose/SetupChecklist.d.ts}

@@ -1,6 +1,6 @@
 import * as React from "react";
 
-//#region src/components/SetupChecklist.d.ts
+//#region src/components/general-purpose/SetupChecklist.d.ts
 interface SetupChecklistEntry<Id extends string = string> {
   id: Id;
   /** Accessible subject, announced as "<name>, complete" or "<name>, not set up". */
@@ -15,6 +15,8 @@ interface SetupChecklistGroupProps<Id extends string = string> {
   /** Quiet visible heading above the checklist rows. */
   label: React.ReactNode;
   entries: readonly SetupChecklistEntry<Id>[];
+  /** Whether rows are visible when the containing menu first opens. */
+  defaultOpen?: boolean;
   /** Called with the selected entry id — complete rows re-run their setup. */
   onSelect: (id: Id) => void;
 }
@@ -22,6 +24,7 @@ interface SetupChecklistGroupProps<Id extends string = string> {
 declare function SetupChecklistGroup<Id extends string = string>({
   label,
   entries,
+  defaultOpen,
   onSelect
 }: SetupChecklistGroupProps<Id>): React.JSX.Element;
 interface SetupChecklistActionProps<Id extends string = string> extends SetupChecklistGroupProps<Id> {

package/dist/components/{SetupChecklist.js → general-purpose/SetupChecklist.js}

@@ -1,23 +1,28 @@
-import { Button } from "./Button.js";
-import { H as PlusIcon, d as CheckIcon, tt as WarningIcon } from "../icons-B4mGvCvc.js";
-import { Menu } from "./Menu.js";
+import { H as PlusIcon, d as CheckIcon, tt as WarningIcon } from "../../icons-B4mGvCvc.js";
+import { Button } from "../foundations/Button.js";
+import { Menu } from "../foundations/Menu.js";
+import { t as MenuDisclosureGroup } from "../../MenuDisclosureGroup-BUOZ42me.js";
 import "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-//#region src/components/SetupChecklist.tsx
+//#region src/components/general-purpose/SetupChecklist.tsx
 /** Checklist rows for any Menu surface (composer plus menu, tray menu). */
-function SetupChecklistGroup({ label, entries, onSelect }) {
-	return /* @__PURE__ */ jsxs(Menu.Group, { children: [/* @__PURE__ */ jsx(Menu.GroupLabel, { children: label }), entries.map((entry) => /* @__PURE__ */ jsxs(Menu.Item, {
-		"aria-label": `${entry.name}, ${entry.complete ? "complete" : "not set up"}`,
-		onClick: () => onSelect(entry.id),
-		children: [
-			entry.icon,
-			/* @__PURE__ */ jsx("span", {
-				className: "sigvelo-truncate-grow",
-				children: entry.description
-			}),
-			entry.complete ? /* @__PURE__ */ jsx(CheckIcon, { "aria-hidden": "true" }) : /* @__PURE__ */ jsx(PlusIcon, { "aria-hidden": "true" })
-		]
-	}, entry.id))] });
+function SetupChecklistGroup({ label, entries, defaultOpen = false, onSelect }) {
+	return /* @__PURE__ */ jsx(MenuDisclosureGroup, {
+		label,
+		defaultOpen,
+		children: entries.map((entry) => /* @__PURE__ */ jsxs(Menu.Item, {
+			"aria-label": `${entry.name}, ${entry.complete ? "complete" : "not set up"}`,
+			onClick: () => onSelect(entry.id),
+			children: [
+				entry.icon,
+				/* @__PURE__ */ jsx("span", {
+					className: "sigvelo-truncate-grow",
+					children: entry.description
+				}),
+				entry.complete ? /* @__PURE__ */ jsx(CheckIcon, { "aria-hidden": "true" }) : /* @__PURE__ */ jsx(PlusIcon, { "aria-hidden": "true" })
+			]
+		}, entry.id))
+	});
 }
 /** Progress-aware tray trigger opening the checklist in its own menu. */
 function SetupChecklistAction({ actionLabel, label, entries, onSelect }) {
@@ -35,6 +40,7 @@ function SetupChecklistAction({ actionLabel, label, entries, onSelect }) {
 		align: "start",
 		sideOffset: 4,
 		children: /* @__PURE__ */ jsx(Menu.Popup, { children: /* @__PURE__ */ jsx(SetupChecklistGroup, {
+			defaultOpen: true,
 			label,
 			entries,
 			onSelect

package/dist/components/{Shell.d.ts → general-purpose/Shell.d.ts}

@@ -1,6 +1,6 @@
 import * as React from "react";
 
-//#region src/components/Shell.d.ts
+//#region src/components/general-purpose/Shell.d.ts
 /**
  * Props for the Shell.Root component.
  */

package/dist/components/{Shell.js → general-purpose/Shell.js}

@@ -1,7 +1,7 @@
-import { t as cx } from "../class-names-BiMDVpUo.js";
+import { t as cx } from "../../class-names-BiMDVpUo.js";
 import "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-//#region src/components/Shell.tsx
+//#region src/components/general-purpose/Shell.tsx
 /**
 * Root container for the shell layout.
 * Provides a structured layout with optional header, action bar, panel, and content areas.

package/dist/components/{Terminal.d.ts → general-purpose/Terminal.d.ts}

@@ -1,8 +1,8 @@
-import { n as IconButtonProps } from "../IconButton-CFKhu6OR.js";
-import { t as CopyButtonProps } from "../copy-button-EBv_B9F6.js";
+import { n as IconButtonProps } from "../../IconButton-BAUFhUk8.js";
+import { t as CopyButtonProps } from "../../copy-button-C0JyjClr.js";
 import * as React from "react";
 
-//#region src/components/Terminal.d.ts
+//#region src/components/general-purpose/Terminal.d.ts
 interface TerminalProps extends React.HTMLAttributes<HTMLDivElement> {
   /** Terminal output; may include ANSI escape codes. */
   output: string;

package/dist/components/{Terminal.js → general-purpose/Terminal.js}

@@ -1,9 +1,9 @@
-import { t as cx } from "../class-names-BiMDVpUo.js";
-import { $ as TerminalIcon, rt as XIcon } from "../icons-B4mGvCvc.js";
-import { IconButton } from "./IconButton.js";
-import { t as CopyButton } from "../copy-button-7ttJAorN.js";
-import { Badge } from "./Badge.js";
-import { ScrollArea } from "./ScrollArea.js";
+import { t as cx } from "../../class-names-BiMDVpUo.js";
+import { $ as TerminalIcon, rt as XIcon } from "../../icons-B4mGvCvc.js";
+import { IconButton } from "../foundations/IconButton.js";
+import { t as CopyButton } from "../../copy-button-4YvddK4e.js";
+import { Badge } from "../foundations/Badge.js";
+import { ScrollArea } from "../foundations/ScrollArea.js";
 import * as React from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import Anser from "anser";
@@ -58,7 +58,7 @@ function parseAnsi(input) {
 	}));
 }
 //#endregion
-//#region src/components/Terminal.tsx
+//#region src/components/general-purpose/Terminal.tsx
 const TerminalContext = React.createContext(null);
 function useTerminalContext() {
 	const ctx = React.useContext(TerminalContext);

package/dist/components/{TestResults.d.ts → general-purpose/TestResults.d.ts}

@@ -1,7 +1,7 @@
-import { t as Collapsible } from "../Collapsible-N64ASIQr.js";
+import { Collapsible } from "../foundations/Collapsible.js";
 import * as React from "react";
 
-//#region src/components/TestResults.d.ts
+//#region src/components/general-purpose/TestResults.d.ts
 type TestStatusValue = "passed" | "failed" | "skipped" | "running";
 interface TestSummary {
   /** Number of passed tests. */

package/dist/components/{TestResults.js → general-purpose/TestResults.js}

@@ -1,11 +1,11 @@
-import { t as cx } from "../class-names-BiMDVpUo.js";
-import { Collapsible } from "./Collapsible.js";
-import { J as SpinnerIcon, d as CheckIcon, m as ChevronRightIcon, rt as XIcon } from "../icons-B4mGvCvc.js";
-import { Progress } from "./Progress.js";
-import { Badge } from "./Badge.js";
+import { t as cx } from "../../class-names-BiMDVpUo.js";
+import { Collapsible } from "../foundations/Collapsible.js";
+import { J as SpinnerIcon, d as CheckIcon, m as ChevronRightIcon, rt as XIcon } from "../../icons-B4mGvCvc.js";
+import { Badge } from "../foundations/Badge.js";
+import { Progress } from "../foundations/Progress.js";
 import * as React from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-//#region src/components/TestResults.tsx
+//#region src/components/general-purpose/TestResults.tsx
 const STATUS_COLOR = {
 	passed: "success",
 	failed: "destructive",

package/dist/components/{ThemeModeControl.d.ts → general-purpose/ThemeModeControl.d.ts}

@@ -1,4 +1,4 @@
-//#region src/components/ThemeModeControl.d.ts
+//#region src/components/general-purpose/ThemeModeControl.d.ts
 interface ThemeModeControlProps {
   /** Show text beside each icon. @default true */
   showLabels?: boolean;

package/dist/components/{ThemeModeControl.js → general-purpose/ThemeModeControl.js}

@@ -1,8 +1,8 @@
-import { F as MonitorIcon, I as MoonIcon, Z as SunIcon } from "../icons-B4mGvCvc.js";
-import { Radio, RadioGroup } from "./RadioGroup.js";
-import { useTheme } from "./ThemeProvider.js";
+import { F as MonitorIcon, I as MoonIcon, Z as SunIcon } from "../../icons-B4mGvCvc.js";
+import { Radio, RadioGroup } from "../foundations/RadioGroup.js";
+import { useTheme } from "../foundations/ThemeProvider.js";
 import { jsx, jsxs } from "react/jsx-runtime";
-//#region src/components/ThemeModeControl.tsx
+//#region src/components/general-purpose/ThemeModeControl.tsx
 const modes = [
 	{
 		value: "light",

package/dist/components/{WebPreview.d.ts → general-purpose/WebPreview.d.ts}

@@ -1,7 +1,7 @@
-import { n as IconButtonProps } from "../IconButton-CFKhu6OR.js";
+import { n as IconButtonProps } from "../../IconButton-BAUFhUk8.js";
 import * as React from "react";
 
-//#region src/components/WebPreview.d.ts
+//#region src/components/general-purpose/WebPreview.d.ts
 interface WebPreviewContextValue {
   url: string;
   setUrl: (next: string) => void;
@@ -35,8 +35,8 @@ interface WebPreviewProps extends React.HTMLAttributes<HTMLDivElement> {
  * known URL with local navigation controls. Do not use it for trusted app
  * embedding that needs custom iframe permissions; add those explicitly here.
  *
- * Sigvelo changes: composes IconButton, Input, ScrollArea, and Badge;
- * keeps a conservative sandbox; maps navigation and console UI to Sigvelo CSS
+ * Sigvelo changes: composes IconButton, Input, ScrollArea, and Badge; keeps a
+ * conservative sandbox; and maps navigation and console UI to Sigvelo CSS
  * tokens.
  *
  * The iframe has a fixed title and sandbox. Navigation buttons provide

package/dist/components/{WebPreview.js → general-purpose/WebPreview.js}

@@ -1,13 +1,13 @@
-import { t as cx } from "../class-names-BiMDVpUo.js";
-import { Collapsible } from "./Collapsible.js";
-import { W as RefreshIcon, f as ChevronDownIcon, i as ArrowRightIcon, r as ArrowLeftIcon } from "../icons-B4mGvCvc.js";
-import { IconButton } from "./IconButton.js";
-import { Badge } from "./Badge.js";
-import { Input } from "./Input.js";
-import { ScrollArea } from "./ScrollArea.js";
+import { t as cx } from "../../class-names-BiMDVpUo.js";
+import { Collapsible } from "../foundations/Collapsible.js";
+import { W as RefreshIcon, f as ChevronDownIcon, i as ArrowRightIcon, r as ArrowLeftIcon } from "../../icons-B4mGvCvc.js";
+import { IconButton } from "../foundations/IconButton.js";
+import { Badge } from "../foundations/Badge.js";
+import { ScrollArea } from "../foundations/ScrollArea.js";
+import { Input } from "../foundations/Input.js";
 import * as React from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-//#region src/components/WebPreview.tsx
+//#region src/components/general-purpose/WebPreview.tsx
 const WebPreviewContext = React.createContext(null);
 function useWebPreviewContext() {
 	const ctx = React.useContext(WebPreviewContext);
@@ -23,8 +23,8 @@ function useWebPreviewContext() {
 * known URL with local navigation controls. Do not use it for trusted app
 * embedding that needs custom iframe permissions; add those explicitly here.
 *
-* Sigvelo changes: composes IconButton, Input, ScrollArea, and Badge;
-* keeps a conservative sandbox; maps navigation and console UI to Sigvelo CSS
+* Sigvelo changes: composes IconButton, Input, ScrollArea, and Badge; keeps a
+* conservative sandbox; and maps navigation and console UI to Sigvelo CSS
 * tokens.
 *
 * The iframe has a fixed title and sandbox. Navigation buttons provide
@@ -269,7 +269,7 @@ function WebPreviewConsole({ className, logs = [], children, ref, ...props }) {
 						children: logs.length === 0 ? /* @__PURE__ */ jsx("li", {
 							className: "web-preview__console-empty",
 							children: "No console output"
-						}) : logs.map((log, i) => /* @__PURE__ */ jsxs("li", {
+						}) : logs.map((log, index) => /* @__PURE__ */ jsxs("li", {
 							className: cx("web-preview__console-item", `web-preview__console-item--${log.level}`),
 							children: [
 								/* @__PURE__ */ jsx(Badge, {
@@ -286,7 +286,7 @@ function WebPreviewConsole({ className, logs = [], children, ref, ...props }) {
 									children: log.timestamp.toLocaleTimeString()
 								})
 							]
-						}, i))
+						}, index))
 					}), children]
 				}), /* @__PURE__ */ jsx(ScrollArea.Scrollbar, {
 					orientation: "vertical",

package/dist/components/{AgentConnection.d.ts → nanites/AgentConnection.d.ts}

@@ -1,7 +1,6 @@
-import { d as McpServerSetupAuthFieldName, l as McpServerSetupAuth } from "../mcp-server-catalog-CO7GAl1f.js";
 import * as React from "react";
 
-//#region src/components/AgentConnection.d.ts
+//#region src/components/nanites/AgentConnection.d.ts
 type AgentConnectionTarget = string;
 type AgentConnectionCommand = {
   readonly target: AgentConnectionTarget;
@@ -34,22 +33,6 @@ type AgentConnectionPanelProps = {
 type AgentConnectionPopoverProps = Omit<AgentConnectionPanelProps, "section"> & {
   readonly className?: string;
 };
-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>;
-};
 declare function Connection({
   fromX,
   fromY,
@@ -77,23 +60,6 @@ declare function AgentConnectionPanel({
   origin,
   section
 }: AgentConnectionPanelProps): React.JSX.Element | null;
-/** 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;
 /**
  * Compact popover trigger for showing AgentConnectionPanel inline.
  */
@@ -102,4 +68,4 @@ declare function AgentConnectionPopover({
   ...props
 }: AgentConnectionPopoverProps): React.JSX.Element;
 //#endregion
-export { AgentConnectionCommand, AgentConnectionPanel, AgentConnectionPanelProps, AgentConnectionPopover, AgentConnectionPopoverProps, AgentConnectionTarget, Connection, ConnectionProps, McpConnectorForm, McpConnectorFormProps, McpConnectorFormValues, NanitesAgentConnectionOptions, buildNanitesAgentConnectionCommands };
+export { AgentConnectionCommand, AgentConnectionPanel, AgentConnectionPanelProps, AgentConnectionPopover, AgentConnectionPopoverProps, AgentConnectionTarget, Connection, ConnectionProps, NanitesAgentConnectionOptions, buildNanitesAgentConnectionCommands };

package/dist/components/{AgentConnection.js → nanites/AgentConnection.js}

@@ -1,21 +1,13 @@
-import { t as cx } from "../class-names-BiMDVpUo.js";
-import { Button } from "./Button.js";
-import { k as LinkIcon } from "../icons-B4mGvCvc.js";
-import { Popover } from "./Popover.js";
-import { Field } from "./Field.js";
-import { Form } from "./Form.js";
-import { a as CodeBlockCopyButton, i as CodeBlockContent, n as CodeBlockActions, p as CodeBlockTitle, r as CodeBlockContainer, s as CodeBlockHeader, t as CodeBlock } from "../CodeBlock-BUfEhDia.js";
-import { CUSTOM_MCP_SERVER_CARD } from "../utils/mcp-server-catalog.js";
+import { t as cx } from "../../class-names-BiMDVpUo.js";
+import { k as LinkIcon } from "../../icons-B4mGvCvc.js";
+import { Button } from "../foundations/Button.js";
+import { a as CodeBlockCopyButton, i as CodeBlockContent, n as CodeBlockActions, p as CodeBlockTitle, r as CodeBlockContainer, s as CodeBlockHeader, t as CodeBlock } from "../../CodeBlock-B5I7wje1.js";
+import { Popover } from "../foundations/Popover.js";
 import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-//#region src/components/AgentConnection.tsx
+//#region src/components/nanites/AgentConnection.tsx
 const DEFAULT_LOCAL_ORIGIN = "http://localhost:5173";
 const CONNECTION_CURVE_MIDPOINT = .5;
-const CUSTOM_AUTH_FIELDS = [{
-	inputType: "password",
-	label: "Bearer",
-	name: "bearerToken"
-}];
 function Connection({ fromX, fromY, toX, toY, ...props }) {
 	const controlX = fromX + (toX - fromX) * CONNECTION_CURVE_MIDPOINT;
 	return /* @__PURE__ */ jsxs("g", {
@@ -154,140 +146,6 @@ function AgentConnectionPanel({ className, commands: commandsProp, defaultTarget
 		]
 	});
 }
-/** Collects MCP connector settings and optional credentials with native form validation. */
-function McpConnectorForm({ auth, className, defaults, namePattern, readOnlyServer = false, redirectUrl = "", status, submitLabel = "Connect MCP", submittingLabel = "Connecting", onSubmit, ref, ...props }) {
-	const [submission, setSubmission] = React.useState(null);
-	const credentialFields = (auth?.fields ?? CUSTOM_AUTH_FIELDS).filter(isCredentialAuthField);
-	const redirectUrlField = auth?.fields.find((field) => field.name === "redirectUrl");
-	async function handleSubmit(values) {
-		setSubmission(true);
-		try {
-			await onSubmit(readMcpConnectorFormValues(values));
-			setSubmission(null);
-		} catch (error) {
-			setSubmission(error instanceof Error ? error.message : String(error));
-		}
-	}
-	return /* @__PURE__ */ jsxs(Form, {
-		ref,
-		"aria-label": "MCP connector",
-		className: cx("agent-connect__mcp-form", className),
-		onFormSubmit: handleSubmit,
-		...props,
-		children: [
-			/* @__PURE__ */ jsxs(Field.Root, {
-				name: "name",
-				children: [
-					/* @__PURE__ */ jsx(Field.Label, { children: "MCP name" }),
-					/* @__PURE__ */ jsx(Field.Control, {
-						defaultValue: defaults?.name ?? CUSTOM_MCP_SERVER_CARD.id,
-						pattern: namePattern,
-						readOnly: readOnlyServer,
-						required: true,
-						title: namePattern ? "Use the required name format." : void 0
-					}),
-					/* @__PURE__ */ jsx(Field.Error, {
-						match: "valueMissing",
-						children: "MCP name is required."
-					}),
-					/* @__PURE__ */ jsx(Field.Error, {
-						match: "patternMismatch",
-						children: "Use the required name format."
-					})
-				]
-			}),
-			/* @__PURE__ */ jsxs(Field.Root, {
-				name: "url",
-				children: [
-					/* @__PURE__ */ jsx(Field.Label, { children: "MCP URL" }),
-					/* @__PURE__ */ jsx(Field.Control, {
-						defaultValue: defaults?.url ?? "",
-						placeholder: "http://127.0.0.1:8787/mcp",
-						readOnly: readOnlyServer,
-						required: true,
-						type: "url"
-					}),
-					/* @__PURE__ */ jsx(Field.Error, {
-						match: "valueMissing",
-						children: "MCP URL is required."
-					}),
-					/* @__PURE__ */ jsx(Field.Error, {
-						match: "typeMismatch",
-						children: "MCP URL must use http or https."
-					})
-				]
-			}),
-			redirectUrlField ? /* @__PURE__ */ jsxs(Field.Root, {
-				name: "redirectUrl",
-				children: [/* @__PURE__ */ jsx(Field.Label, { children: redirectUrlField.label }), /* @__PURE__ */ jsx(Field.Control, {
-					readOnly: true,
-					type: "url",
-					value: redirectUrl
-				})]
-			}) : null,
-			credentialFields.length > 0 ? /* @__PURE__ */ jsxs(Field.Set, { children: [/* @__PURE__ */ jsx(Field.Legend, {
-				variant: "label",
-				children: auth?.label ?? "Credentials"
-			}), /* @__PURE__ */ jsx(Field.Group, { children: credentialFields.map((authField) => /* @__PURE__ */ jsxs(Field.Root, {
-				name: authField.name,
-				children: [
-					/* @__PURE__ */ jsx(Field.Label, { children: authField.label }),
-					/* @__PURE__ */ jsx(Field.Control, {
-						autoComplete: "off",
-						defaultValue: defaults?.[authField.name],
-						placeholder: authField.placeholder,
-						required: authField.required,
-						type: authField.inputType ?? "text"
-					}),
-					/* @__PURE__ */ jsxs(Field.Error, {
-						match: "valueMissing",
-						children: [authField.label, " is required."]
-					})
-				]
-			}, authField.name)) })] }) : null,
-			/* @__PURE__ */ jsx("div", {
-				className: "agent-connect__mcp-form-actions",
-				children: /* @__PURE__ */ jsx(Button, {
-					type: "submit",
-					size: "sm",
-					disabled: submission === true,
-					focusableWhenDisabled: submission === true,
-					children: submission === true ? submittingLabel : submitLabel
-				})
-			}),
-			typeof submission === "string" ? /* @__PURE__ */ jsx("span", {
-				className: "agent-connect__mcp-form-status",
-				"aria-atomic": "true",
-				role: "alert",
-				children: submission
-			}) : status ? /* @__PURE__ */ jsx("span", {
-				className: "agent-connect__mcp-form-status",
-				"aria-atomic": "true",
-				role: "status",
-				children: status
-			}) : null
-		]
-	});
-}
-function readMcpConnectorFormValues(data) {
-	const bearerToken = readFormString(data, "bearerToken");
-	const clientId = readFormString(data, "clientId");
-	const clientSecret = readFormString(data, "clientSecret");
-	return {
-		...bearerToken ? { bearerToken } : {},
-		...clientId ? { clientId } : {},
-		...clientSecret ? { clientSecret } : {},
-		name: readFormString(data, "name"),
-		url: readFormString(data, "url")
-	};
-}
-function readFormString(data, name) {
-	const value = data[name];
-	return typeof value === "string" ? value.trim() : "";
-}
-function isCredentialAuthField(field) {
-	return field.name !== "redirectUrl";
-}
 /**
 * Compact popover trigger for showing AgentConnectionPanel inline.
 */
@@ -319,4 +177,4 @@ function AgentConnectionPopover({ className, ...props }) {
 	}) })] });
 }
 //#endregion
-export { AgentConnectionPanel, AgentConnectionPopover, Connection, McpConnectorForm, buildNanitesAgentConnectionCommands };
+export { AgentConnectionPanel, AgentConnectionPopover, Connection, buildNanitesAgentConnectionCommands };

package/dist/components/{AgentToolDetail.d.ts → nanites/AgentToolDetail.d.ts}

@@ -1,12 +1,12 @@
-import { i as ThinkChatValue } from "../ThinkChatContext-B-Nk84Wi.js";
-import { ThinkChatMessagesProps } from "./ThinkChat.js";
-import { t as ThinkAgent } from "../think-agent-Cip5KAPj.js";
+import { i as ThinkChatValue } from "../../ThinkChatContext-COIgzkYp.js";
+import { ThinkChatMessagesProps } from "../agents-sdk/ThinkChat.js";
+import { t as ThinkAgent } from "../../think-agent-Cip5KAPj.js";
 import * as React from "react";
 import { UIMessage } from "ai";
 import { UseAgentOptions, useAgent } from "agents/react";
 import { AgentToolRunState } from "agents/agent-tools";
 
-//#region src/components/AgentToolDetail.d.ts
+//#region src/components/nanites/AgentToolDetail.d.ts
 interface AgentToolDetailProps<State = unknown, MessageT extends UIMessage = UIMessage> extends React.HTMLAttributes<HTMLDivElement> {
   /** Whole retained run selected from the parent `useAgentToolEvents` result. */
   run: AgentToolRunState<MessageT["parts"][number]>;

package/dist/components/{AgentToolDetail.js → nanites/AgentToolDetail.js}

@@ -1,16 +1,16 @@
-import { t as cx } from "../class-names-BiMDVpUo.js";
-import { r as ArrowLeftIcon } from "../icons-B4mGvCvc.js";
-import { TransitionSurface } from "./TransitionSurface.js";
-import { AppTopBar } from "./AppTopBar.js";
+import { t as cx } from "../../class-names-BiMDVpUo.js";
+import { r as ArrowLeftIcon } from "../../icons-B4mGvCvc.js";
+import { TransitionSurface } from "../foundations/TransitionSurface.js";
+import { SubagentRunMilestone, SubagentRunMilestones, SubagentRunProgress } from "../agents-sdk/SubagentRunDetails.js";
+import { SubagentRunIndicator, getSubagentRunName } from "../agents-sdk/SubagentRunIndicator.js";
+import { t as ThinkChat } from "../../ThinkChat-yid8e_Jb.js";
+import { AppTopBar } from "../general-purpose/AppTopBar.js";
 import { NaniteMark } from "./NaniteScene.js";
-import { SubagentRunIndicator, getSubagentRunName } from "./SubagentRunIndicator.js";
-import { SubagentRunMilestone, SubagentRunMilestones, SubagentRunProgress } from "./SubagentRunDetails.js";
-import { t as ThinkChat } from "../ThinkChat-Bp-nAnoW.js";
 import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useAgentChat } from "@cloudflare/think/react";
 import { useAgent } from "agents/react";
-//#region src/components/AgentToolDetail.tsx
+//#region src/components/nanites/AgentToolDetail.tsx
 /**
 * Live retained-child detail composed from upstream connection and chat values.
 * The full child transcript comes from `chat.messages`; `run.parts` remains a

package/dist/components/{GithubMotionMark.d.ts → nanites/GithubMotionMark.d.ts}

@@ -1,4 +1,4 @@
-//#region src/components/GithubMotionMark.d.ts
+//#region src/components/nanites/GithubMotionMark.d.ts
 /**
  * Small GitHub motion mark used next to install or repository connection text.
  */

package/dist/components/{GithubMotionMark.js → nanites/GithubMotionMark.js}

@@ -1,6 +1,6 @@
-import { t as cx } from "../class-names-BiMDVpUo.js";
+import { t as cx } from "../../class-names-BiMDVpUo.js";
 import { jsx } from "react/jsx-runtime";
-//#region src/components/GithubMotionMark.tsx
+//#region src/components/nanites/GithubMotionMark.tsx
 /**
 * Small GitHub motion mark used next to install or repository connection text.
 */

package/dist/components/{NaniteScene.d.ts → nanites/NaniteScene.d.ts}

@@ -1,4 +1,4 @@
-//#region src/components/NaniteScene.d.ts
+//#region src/components/nanites/NaniteScene.d.ts
 type NaniteSceneVariant = "idle" | "helmet" | "working" | "celebrating" | "concerned";
 type NaniteSceneProps = {
   /** Visual state to render. */readonly variant: NaniteSceneVariant; /** Render three compact Nanites or one status Nanite with optional screen art. */

package/dist/components/{NaniteScene.js → nanites/NaniteScene.js}

@@ -1,6 +1,6 @@
-import { t as cx } from "../class-names-BiMDVpUo.js";
+import { t as cx } from "../../class-names-BiMDVpUo.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-//#region src/components/NaniteScene.tsx
+//#region src/components/nanites/NaniteScene.tsx
 const BODY_COLORS = [
 	"#0f7b6c",
 	"#2d5a8a",

package/dist/{copy-button-7ttJAorN.js → copy-button-4YvddK4e.js}

@@ -1,5 +1,5 @@
 import { d as CheckIcon, g as CopyIcon } from "./icons-B4mGvCvc.js";
-import { IconButton } from "./components/IconButton.js";
+import { IconButton } from "./components/foundations/IconButton.js";
 import * as React from "react";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/_internal/copy-button.tsx

package/dist/{copy-button-EBv_B9F6.d.ts → copy-button-C0JyjClr.d.ts}

@@ -1,4 +1,4 @@
-import { n as IconButtonProps } from "./IconButton-CFKhu6OR.js";
+import { n as IconButtonProps } from "./IconButton-BAUFhUk8.js";
 import * as React from "react";
 
 //#region src/components/_internal/copy-button.d.ts

package/dist/{format-S6uWyoSb.js → format-CmopcfqJ.js}

@@ -34,5 +34,8 @@ function formatClock(totalSeconds) {
 	const seconds = String(total % 60).padStart(2, "0");
 	return hours > 0 ? `${hours}:${String(minutes).padStart(2, "0")}:${seconds}` : `${minutes}:${seconds}`;
 }
+function formatErrorMessage(error) {
+	return error instanceof Error ? error.message : String(error);
+}
 //#endregion
-export { titleCase as i, clamp as n, formatClock as r, capitalize as t };
+export { titleCase as a, formatErrorMessage as i, clamp as n, formatClock as r, capitalize as t };