@mcp-b/react-components 0.6.5 → 0.7.1

package/dist/ThinkChatToolParts-DnUiZgCC.d.ts

@@ -0,0 +1,83 @@
+import { InferUITools, ToolUIPart, UIMessage } from "ai";
+import { ProxyToolInput, ProxyToolOutput } from "@cloudflare/codemode";
+import { QuickActionExtractInput, QuickActionPage, QuickActionScrapeInput, QuickActionToolName } from "@cloudflare/think/tools/browser";
+import { FetchResult } from "@cloudflare/think/tools/fetch";
+import { WorkspaceTools } from "@cloudflare/think/tools/workspace";
+
+//#region src/components/ThinkChatToolParts.d.ts
+type ThinkChatPart = UIMessage["parts"][number];
+type WorkspaceUITools = InferUITools<Required<WorkspaceTools>>;
+type WorkspaceToolPart = ToolUIPart<WorkspaceUITools>;
+type ThinkWorkspaceToolName = keyof WorkspaceUITools;
+type ThinkBashToolPart = Extract<WorkspaceToolPart, {
+  type: "tool-bash";
+}>;
+type ThinkBashToolOutput = WorkspaceUITools["bash"]["output"];
+declare function isWorkspaceToolPart(part: ThinkChatPart): part is WorkspaceToolPart;
+type SkillUITools = {
+  activate_skill: {
+    input: {
+      name: string;
+    };
+    output: string;
+  };
+  read_skill_resource: {
+    input: {
+      name?: string;
+      path: string;
+    };
+    output: string;
+  };
+  run_skill_script: {
+    input: {
+      name: string;
+      path: string;
+      input?: unknown;
+    };
+    output: unknown;
+  };
+};
+type SkillToolPart = ToolUIPart<SkillUITools>;
+declare function isSkillToolPart(part: ThinkChatPart): part is SkillToolPart;
+type FetchToolPart = ToolUIPart<Record<string, {
+  input: {
+    url?: string;
+    path?: string;
+  };
+  output: FetchResult;
+}>>;
+declare function isFetchToolPart(part: ThinkChatPart): part is FetchToolPart;
+type QuickActionInputs = {
+  markdown: QuickActionPage;
+  extract: QuickActionExtractInput;
+  links: QuickActionPage;
+  scrape: QuickActionScrapeInput;
+  content: QuickActionPage;
+};
+type BrowserUITools = {
+  browser_execute: {
+    input: ProxyToolInput;
+    output: ProxyToolOutput;
+  };
+} & { [K in QuickActionToolName as `browser_${K}`]: {
+  input: QuickActionInputs[K];
+  output: unknown;
+} };
+type BrowserToolPart = ToolUIPart<BrowserUITools>;
+declare function isBrowserToolPart(part: ThinkChatPart): part is BrowserToolPart;
+type ExecuteToolPart = ToolUIPart<{
+  execute: {
+    input: ProxyToolInput;
+    output: ProxyToolOutput;
+  };
+}>;
+declare function isExecuteToolPart(part: ThinkChatPart): part is ExecuteToolPart;
+/** Agent work (reasoning, tool calls, step boundaries) vs. content shown to the user. */
+declare function isThinkChatActivityPart(part: ThinkChatPart | undefined, excludeTools?: ReadonlySet<string>): boolean;
+/** In-flight: the stream opened this part but hasn't delivered its result yet. */
+declare function isPartWorking(part: ThinkChatPart): boolean;
+/** Errored or denied — upstream's simplified tool-part state vocabulary. */
+declare function isPartFailed(part: ThinkChatPart): boolean;
+declare function displayUrl(url: string | undefined): string;
+//#endregion
+export { isThinkChatActivityPart as _, ThinkBashToolOutput as a, ThinkWorkspaceToolName as c, isBrowserToolPart as d, isExecuteToolPart as f, isSkillToolPart as g, isPartWorking as h, SkillToolPart as i, WorkspaceToolPart as l, isPartFailed as m, ExecuteToolPart as n, ThinkBashToolPart as o, isFetchToolPart as p, FetchToolPart as r, ThinkChatPart as s, BrowserToolPart as t, displayUrl as u, isWorkspaceToolPart as v };

package/dist/components/Activity.js

@@ -1,6 +1,6 @@
 import { CollapsiblePanel, CollapsibleRoot, CollapsibleTrigger } from "./Collapsible.js";
 import { t as cx } from "../class-names-9UtZwb0J.js";
-import { c as ChevronRightIcon } from "../icons-BCNawx-T.js";
+import { c as ChevronRightIcon } from "../icons-BAlTbWWP.js";
 import "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/Activity.tsx

package/dist/components/AgentChat.d.ts

@@ -1,104 +1,2 @@
-import { ExecutionApprovals, PromptInputMessage, PromptInputStatus } from "./PromptInput.js";
-import * as React from "react";
-import { ChatAddToolApproveResponseFunction, UIMessage } from "ai";
-
-//#region src/components/AgentChat.d.ts
-type AgentChatPart<MessageT extends UIMessage = UIMessage> = MessageT["parts"][number];
-interface AgentChatRenderPartContext<MessageT extends UIMessage = UIMessage> {
-  message: MessageT;
-  part: AgentChatPart<MessageT>;
-  partIndex: number;
-  defaultRender: () => React.ReactNode;
-}
-interface AgentChatRenderMessageContext<MessageT extends UIMessage = UIMessage> {
-  message: MessageT;
-  messageIndex: number;
-}
-interface AgentChatProps<MessageT extends UIMessage = UIMessage> {
-  className?: string;
-  /** AI SDK `UIMessage`s to render, oldest first. */
-  messages: readonly MessageT[];
-  /** Drives the composer's send/stop affordance and streaming indicators. */
-  status?: PromptInputStatus;
-  /** Called with the composed message when the user submits. Omit for a read-only transcript. */
-  onSubmit?: (message: PromptInputMessage) => void | Promise<void>;
-  /** Called when the user hits stop while `status` is streaming/submitted. */
-  onStop?: () => void;
-  placeholder?: string;
-  disabled?: boolean;
-  /** Rendered in place of the transcript while `messages` is empty. */
-  emptyState?: React.ReactNode;
-  /** Extra controls rendered in the composer toolbar. */
-  composerTools?: React.ReactNode;
-  /** Extra rows rendered in the built-in plus menu after files. */
-  composerAddMenuItems?: React.ReactNode;
-  /**
-   * Transient status rendered between the transcript and the composer —
-   * e.g. a "Reconnecting…" pill. `ThinkChat.Messages` fills this from the
-   * hook's `isRecovering`/`connectionError` automatically.
-   */
-  notice?: React.ReactNode;
-  /**
-   * When set, the last assistant message gets a Retry action that calls this
-   * with its message id — pass to the AI SDK's `regenerate({ messageId })`.
-   */
-  onRegenerate?: (messageId: string) => void;
-  /**
-   * Pass `addToolApprovalResponse` from `useAgentChat`/`useChat` directly.
-   * When set and a tool call awaits approval, the composer becomes the
-   * confirmation.
-   */
-  onApprovalResponse?: ChatAddToolApproveResponseFunction;
-  /**
-   * When set, paused codemode executions surface in the same composer
-   * confirmation as tool approvals. See {@link ExecutionApprovals}.
-   */
-  executionApprovals?: ExecutionApprovals;
-  /**
-   * When set, a Context ring in the composer footer shows how much of the
-   * model's window the conversation occupies. Used tokens come from the
-   * newest message carrying `metadata.usage` (the AI SDK `messageMetadata`
-   * convention; Think merges it into message metadata as turns finish).
-   */
-  contextWindow?: {
-    maxTokens: number;
-    modelId?: string;
-  };
-  /** Override rendering per part; return `undefined` to fall back to the default part UI. */
-  renderPart?: (context: AgentChatRenderPartContext<MessageT>) => React.ReactNode | undefined;
-  /** Rendered after each message's parts — for actions, citations, and the like. */
-  renderMessageAfter?: (context: AgentChatRenderMessageContext<MessageT>) => React.ReactNode;
-}
-/**
- * A complete agent chat surface: auto-scrolling conversation of AI SDK
- * `UIMessage`s (text, reasoning, and tool parts rendered by default) plus a
- * prompt composer. Customize per-part rendering with `renderPart`.
- *
- * This is the presentational layer under `ThinkChat` — props in, no
- * transport. Use it directly with plain AI SDK `useChat` or a read-only
- * transcript; if you have a Cloudflare Think agent, use `ThinkChat` instead.
- */
-declare function AgentChat<MessageT extends UIMessage = UIMessage>({
-  className,
-  messages,
-  status,
-  onSubmit,
-  onStop,
-  placeholder,
-  disabled,
-  emptyState,
-  composerTools,
-  composerAddMenuItems,
-  notice,
-  onRegenerate,
-  onApprovalResponse,
-  executionApprovals,
-  contextWindow,
-  renderPart,
-  renderMessageAfter,
-  ref
-}: AgentChatProps<MessageT> & {
-  ref?: React.Ref<HTMLDivElement>;
-}): React.JSX.Element;
-//#endregion
+import { a as AgentChatRenderPartContext, i as AgentChatRenderMessageContext, n as AgentChatPart, r as AgentChatProps, t as AgentChat } from "../AgentChat-403mckDG.js";
 export { AgentChat, AgentChatPart, AgentChatProps, AgentChatRenderMessageContext, AgentChatRenderPartContext };

package/dist/components/AgentChat.js

@@ -1,16 +1,18 @@
 import { t as cx } from "../class-names-9UtZwb0J.js";
-import { D as PlusIcon, O as RefreshIcon } from "../icons-BCNawx-T.js";
+import { O as PlusIcon, k as RefreshIcon } from "../icons-BAlTbWWP.js";
 import { Activity, ActivityContent, ActivityPanel, ActivityTrigger } from "./Activity.js";
 import { Context, ContextContent, ContextContentBody, ContextContentHeader, ContextTrigger, getContextUsage, getContextUsedTokens } from "./Context.js";
-import { Conversation, ConversationContent, ConversationEmptyState, ConversationScrollButton } from "./Conversation.js";
+import { MessageScroller, MessageScrollerButton, MessageScrollerContent, MessageScrollerItem, MessageScrollerProvider, MessageScrollerViewport } from "./MessageScroller.js";
+import { ConversationEmptyState } from "./Conversation.js";
 import { Message, MessageAction, MessageActions, MessageAttachment, MessageContent, MessageResponse } from "./Message.js";
 import { MenuGroup, MenuGroupLabel } from "./Menu.js";
 import { PromptInput, PromptInputActionAddAttachments, PromptInputActionMenu, PromptInputActionMenuContent, PromptInputActionMenuTrigger, PromptInputApproval, PromptInputAttachments, PromptInputBody, PromptInputButton, PromptInputFooter, PromptInputPermissionSelector, PromptInputSubmit, PromptInputTextarea, PromptInputTools, getApprovalRequestId, getApprovalStateKey, getPendingToolApprovals, usePromptInputAttachments } from "./PromptInput.js";
 import { Reasoning, ReasoningContent, ReasoningTrigger } from "./Reasoning.js";
 import * as React from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { getToolName, isFileUIPart, isReasoningUIPart, isTextUIPart, isToolOrDynamicToolUIPart } from "ai";
+import { getToolName, isFileUIPart, isReasoningUIPart, isTextUIPart, isToolUIPart } from "ai";
 //#region src/components/AgentChat.tsx
+const EMPTY_PENDING_APPROVALS = [];
 function AgentChatAttachButton() {
 	const attachments = usePromptInputAttachments();
 	return /* @__PURE__ */ jsx(PromptInputButton, {
@@ -33,11 +35,11 @@ function AgentChatAddMenu({ children }) {
 function isCompactedPart(message, part, partIndex) {
 	const metadata = message.metadata;
 	if (isTextUIPart(part)) return Array.isArray(metadata?.compactedTextParts) && metadata.compactedTextParts.includes(partIndex);
-	if (isToolOrDynamicToolUIPart(part)) return Array.isArray(metadata?.compactedToolOutputs) && metadata.compactedToolOutputs.includes(part.toolCallId);
+	if (isToolUIPart(part)) return Array.isArray(metadata?.compactedToolOutputs) && metadata.compactedToolOutputs.includes(part.toolCallId);
 	return false;
 }
 function getPartKey(part, partIndex) {
-	if (isToolOrDynamicToolUIPart(part)) return part.toolCallId;
+	if (isToolUIPart(part)) return part.toolCallId;
 	if ("id" in part && typeof part.id === "string") return `${part.type}-${part.id}`;
 	return `${part.type}-${partIndex}`;
 }
@@ -88,39 +90,35 @@ function renderDefaultPart(part) {
 		isStreaming: part.state === "streaming",
 		children: [/* @__PURE__ */ jsx(ReasoningTrigger, {}), /* @__PURE__ */ jsx(ReasoningContent, { children: part.text })]
 	});
-	if (isToolOrDynamicToolUIPart(part)) return renderToolActivity(part);
+	if (isToolUIPart(part)) return renderToolActivity(part);
 	return null;
 }
 /**
-* A complete agent chat surface: auto-scrolling conversation of AI SDK
-* `UIMessage`s (text, reasoning, and tool parts rendered by default) plus a
-* prompt composer. Customize per-part rendering with `renderPart`.
-*
-* This is the presentational layer under `ThinkChat` — props in, no
-* transport. Use it directly with plain AI SDK `useChat` or a read-only
-* transcript; if you have a Cloudflare Think agent, use `ThinkChat` instead.
+* Low-level transcript/composer surface used by `ThinkChat`: props in, no
+* transport. Product code that talks to a Cloudflare Think agent should render
+* `ThinkChat`; use this directly only for plain AI SDK or read-only messages.
 */
-function AgentChat({ className, messages, status = "ready", onSubmit, onStop, placeholder = "Ask anything...", disabled, emptyState, composerTools, composerAddMenuItems, notice, onRegenerate, onApprovalResponse, executionApprovals, contextWindow, renderPart, renderMessageAfter, ref }) {
+function AgentChat({ className, messages, status = "ready", onSubmit, onStop, placeholder = "Ask anything...", disabled, emptyState, composerTools, composerAddMenuItems, notice, onRegenerate, onApprovalResponse, executionApprovals, pendingApprovals: durableApprovals = EMPTY_PENDING_APPROVALS, contextWindow, renderPart, renderMessageAfter, ref }) {
 	const handleSubmit = React.useCallback((message) => {
 		onSubmit?.(message);
 	}, [onSubmit]);
 	const [skippedApprovalIds, setSkippedApprovalIds] = React.useState([]);
-	const pendingApprovals = getPendingToolApprovals(messages, { pausedExecutions: Boolean(executionApprovals) }).filter(({ part }) => {
+	const pendingApprovalItems = [...getPendingToolApprovals(messages, { pausedExecutions: Boolean(executionApprovals) }).filter(({ part }) => {
 		if (part.state === "approval-requested" && !onApprovalResponse) return false;
 		const id = getApprovalStateKey(part);
 		return Boolean(id) && !skippedApprovalIds.includes(id);
-	});
+	}).map((approval) => ({ part: approval.part })), ...executionApprovals ? durableApprovals.filter((approval) => approval.source === "action" && !skippedApprovalIds.includes(approval.executionId)).map((approval) => ({ approval })) : []];
 	const approvalsWired = Boolean(onApprovalResponse || executionApprovals);
 	const [permissionMode, setPermissionMode] = React.useState("ask");
 	const autoApprovedIds = React.useRef(/* @__PURE__ */ new Set());
 	React.useEffect(() => {
 		if (permissionMode !== "bypass") return;
-		for (const { part } of pendingApprovals) {
-			const id = getApprovalRequestId(part);
-			const key = getApprovalStateKey(part);
+		for (const item of pendingApprovalItems) {
+			const id = "part" in item ? getApprovalRequestId(item.part) : item.approval.executionId;
+			const key = "part" in item ? getApprovalStateKey(item.part) : item.approval.executionId;
 			if (!id || !key || autoApprovedIds.current.has(key)) continue;
 			autoApprovedIds.current.add(key);
-			if (part.state === "approval-requested") onApprovalResponse?.({
+			if ("part" in item && item.part.state === "approval-requested") onApprovalResponse?.({
 				id,
 				approved: true
 			});
@@ -129,10 +127,11 @@ function AgentChat({ className, messages, status = "ready", onSubmit, onStop, pl
 	}, [
 		permissionMode,
 		messages,
+		durableApprovals,
 		onApprovalResponse,
 		executionApprovals
 	]);
-	const pendingApproval = permissionMode === "bypass" ? void 0 : pendingApprovals[0];
+	const pendingApproval = permissionMode === "bypass" ? void 0 : pendingApprovalItems[0];
 	const contextUsage = contextWindow ? getContextUsage(messages) : void 0;
 	const lastAssistantIndex = onRegenerate && status !== "streaming" && status !== "submitted" ? messages.findLastIndex((message) => message.role === "assistant") : -1;
 	const composerRef = (el) => {
@@ -147,40 +146,59 @@ function AgentChat({ className, messages, status = "ready", onSubmit, onStop, pl
 	return /* @__PURE__ */ jsxs("div", {
 		ref,
 		className: cx("agent-chat", className),
-		children: [/* @__PURE__ */ jsxs(Conversation, {
-			className: "agent-chat__conversation",
-			children: [/* @__PURE__ */ jsxs(ConversationContent, { children: [messages.length === 0 ? emptyState ?? /* @__PURE__ */ jsx(ConversationEmptyState, {
-				title: "Start a conversation",
-				description: "Ask the agent to inspect, plan, or build."
-			}) : null, messages.map((message, messageIndex) => /* @__PURE__ */ jsxs(Message, {
-				from: message.role,
-				children: [
-					message.parts.map((part, partIndex) => {
-						const defaultRender = () => renderDefaultPart(part);
-						const custom = renderPart?.({
-							message,
-							part,
-							partIndex,
-							defaultRender
-						});
-						const rendered = custom === void 0 ? defaultRender() : custom;
-						return rendered ? /* @__PURE__ */ jsxs(MessageContent, { children: [rendered, isCompactedPart(message, part, partIndex) ? /* @__PURE__ */ jsx("div", {
-							className: "message__compacted",
-							children: "Output truncated for storage"
-						}) : null] }, getPartKey(part, partIndex)) : null;
-					}),
-					renderMessageAfter?.({
-						message,
-						messageIndex
-					}),
-					onRegenerate && messageIndex === lastAssistantIndex ? /* @__PURE__ */ jsx(MessageActions, { children: /* @__PURE__ */ jsx(MessageAction, {
-						label: "Retry",
-						tooltip: "Regenerate response",
-						onClick: () => onRegenerate(message.id),
-						children: /* @__PURE__ */ jsx(RefreshIcon, { size: 14 })
-					}) }) : null
-				]
-			}, message.id ?? messageIndex))] }), /* @__PURE__ */ jsx(ConversationScrollButton, {})]
+		children: [/* @__PURE__ */ jsx(MessageScrollerProvider, {
+			autoScroll: true,
+			defaultScrollPosition: "last-anchor",
+			children: /* @__PURE__ */ jsxs(MessageScroller, {
+				className: "agent-chat__conversation",
+				children: [/* @__PURE__ */ jsx(MessageScrollerViewport, { children: /* @__PURE__ */ jsxs(MessageScrollerContent, {
+					"aria-busy": status === "streaming" || status === "submitted",
+					className: "agent-chat__transcript-content",
+					children: [messages.length === 0 ? /* @__PURE__ */ jsx(MessageScrollerItem, {
+						className: "agent-chat__empty-row",
+						children: emptyState ?? /* @__PURE__ */ jsx(ConversationEmptyState, {
+							title: "Start a conversation",
+							description: "Ask the agent to inspect, plan, or build."
+						})
+					}) : null, messages.map((message, messageIndex) => /* @__PURE__ */ jsx(MessageScrollerItem, {
+						messageId: message.id,
+						scrollAnchor: message.role === "user",
+						children: /* @__PURE__ */ jsxs(Message, {
+							from: message.role,
+							children: [
+								message.parts.map((part, partIndex) => {
+									const defaultRender = () => renderDefaultPart(part);
+									const custom = renderPart?.({
+										message,
+										part,
+										partIndex,
+										defaultRender
+									});
+									const rendered = custom === void 0 ? defaultRender() : custom;
+									return rendered ? /* @__PURE__ */ jsxs(MessageContent, { children: [rendered, isCompactedPart(message, part, partIndex) ? /* @__PURE__ */ jsx("div", {
+										className: "message__compacted",
+										children: "Output truncated for storage"
+									}) : null] }, getPartKey(part, partIndex)) : null;
+								}),
+								renderMessageAfter?.({
+									message,
+									messageIndex
+								}),
+								onRegenerate && messageIndex === lastAssistantIndex ? /* @__PURE__ */ jsx(MessageActions, { children: /* @__PURE__ */ jsx(MessageAction, {
+									label: "Retry",
+									tooltip: "Regenerate response",
+									onClick: () => onRegenerate(message.id),
+									children: /* @__PURE__ */ jsx(RefreshIcon, { size: 14 })
+								}) }) : null
+							]
+						})
+					}, message.id ?? messageIndex))]
+				}) }), /* @__PURE__ */ jsx(MessageScrollerButton, {
+					"aria-label": "Scroll to latest",
+					className: "agent-chat__scroll-button",
+					size: "icon"
+				})]
+			})
 		}), /* @__PURE__ */ jsxs("div", {
 			ref: composerRef,
 			className: "agent-chat__composer",
@@ -191,12 +209,13 @@ function AgentChat({ className, messages, status = "ready", onSubmit, onStop, pl
 				multiple: true,
 				onSubmit: handleSubmit,
 				children: pendingApproval ? /* @__PURE__ */ jsx(PromptInputApproval, {
-					part: pendingApproval.part,
-					count: pendingApprovals.length,
+					part: "part" in pendingApproval ? pendingApproval.part : void 0,
+					approval: "approval" in pendingApproval ? pendingApproval.approval : void 0,
+					count: pendingApprovalItems.length,
 					onRespond: onApprovalResponse,
 					executionApprovals,
 					onSkip: () => {
-						const id = getApprovalStateKey(pendingApproval.part);
+						const id = "part" in pendingApproval ? getApprovalStateKey(pendingApproval.part) : pendingApproval.approval.executionId;
 						if (id) setSkippedApprovalIds((previous) => [...previous, id]);
 					}
 				}) : /* @__PURE__ */ jsxs(Fragment, { children: [

package/dist/components/AgentConnection.d.ts

@@ -1,4 +1,4 @@
-import { McpServerCard, McpServerManualSetup } from "../utils/mcp-server-catalog.js";
+import { McpServerCard, McpServerManualSetup, McpServerSetupAuth } from "../utils/mcp-server-catalog.js";
 import * as React from "react";
 
 //#region src/components/AgentConnection.d.ts
@@ -38,6 +38,28 @@ type AgentConnectionPopoverProps = Omit<AgentConnectionPanelProps, "section"> &
 type McpServerSetupProps = {
   readonly setup: McpServerManualSetup;
 };
+type McpConnectorFormValues = {
+  readonly bearerToken?: string;
+  readonly clientId?: string;
+  readonly clientSecret?: string;
+  readonly name: string;
+  readonly scope?: string;
+  readonly url: string;
+};
+type McpConnectorFormDefaults = Partial<Pick<McpConnectorFormValues, "name" | "url">>;
+type McpConnectorFormProps = Omit<React.FormHTMLAttributes<HTMLFormElement>, "onSubmit" | "status"> & {
+  /** Authentication metadata that decides which credential fields render. */readonly auth?: McpServerSetupAuth; /** Label for the OAuth authorization button. */
+  readonly authorizeLabel?: string; /** Initial MCP name and URL values. */
+  readonly defaults?: McpConnectorFormDefaults; /** Pattern used to validate the MCP name field. */
+  readonly namePattern?: string; /** OAuth URL waiting for the user to authorize, when available. */
+  readonly pendingAuthUrl?: string | null; /** 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 when the user starts OAuth authorization. */
+  readonly onAuthorize?: () => void | Promise<void>; /** Called with normalized connector values after native form validation passes. */
+  readonly onSubmit: (values: McpConnectorFormValues) => void | Promise<void>;
+};
 declare function Connection({
   fromX,
   fromY,
@@ -69,6 +91,25 @@ declare function AgentConnectionPanel({
 declare function McpServerSetup({
   setup
 }: McpServerSetupProps): React.JSX.Element;
+/** Collects MCP connector settings and optional credentials with native form validation. */
+declare function McpConnectorForm({
+  auth,
+  authorizeLabel,
+  className,
+  defaults,
+  namePattern,
+  pendingAuthUrl,
+  redirectUrl,
+  status,
+  submitLabel,
+  submittingLabel,
+  onAuthorize,
+  onSubmit,
+  ref,
+  ...props
+}: McpConnectorFormProps & {
+  ref?: React.Ref<HTMLFormElement>;
+}): React.JSX.Element;
 /**
  * Compact popover trigger for showing AgentConnectionPanel inline.
  */
@@ -77,4 +118,4 @@ declare function AgentConnectionPopover({
   ...props
 }: AgentConnectionPopoverProps): React.JSX.Element;
 //#endregion
-export { AgentConnectionCommand, AgentConnectionPanel, AgentConnectionPanelProps, AgentConnectionPopover, AgentConnectionPopoverProps, AgentConnectionTarget, Connection, ConnectionProps, McpServerSetup, McpServerSetupProps, NanitesAgentConnectionOptions, buildNanitesAgentConnectionCommands };
+export { AgentConnectionCommand, AgentConnectionPanel, AgentConnectionPanelProps, AgentConnectionPopover, AgentConnectionPopoverProps, AgentConnectionTarget, Connection, ConnectionProps, McpConnectorForm, McpConnectorFormDefaults, McpConnectorFormProps, McpConnectorFormValues, McpServerSetup, McpServerSetupProps, NanitesAgentConnectionOptions, buildNanitesAgentConnectionCommands };

package/dist/components/AgentConnection.js

@@ -1,14 +1,22 @@
 import { t as cx } from "../class-names-9UtZwb0J.js";
-import { y as LinkIcon } from "../icons-BCNawx-T.js";
+import { b as LinkIcon } from "../icons-BAlTbWWP.js";
 import { Popover } from "./Popover.js";
 import { Button } from "./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-BK0sOAbV.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-D9koxDA7.js";
+import { Field } from "./Field.js";
+import { Form } from "./Form.js";
 import { DCR_MCP_SERVER_CARDS, MANUAL_MCP_SERVER_CARDS, getMcpServerIconSrc } from "../utils/mcp-server-catalog.js";
 import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/AgentConnection.tsx
 const DEFAULT_LOCAL_ORIGIN = "http://localhost:5173";
 const CONNECTION_CURVE_MIDPOINT = .5;
+const MCP_CONNECTOR_NAME_PATTERN = "[A-Za-z_$][A-Za-z0-9_$]*";
+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", {
@@ -211,6 +219,149 @@ function McpServerSetup({ setup }) {
 		]
 	});
 }
+/** Collects MCP connector settings and optional credentials with native form validation. */
+function McpConnectorForm({ auth, authorizeLabel = "Authorize", className, defaults, namePattern = MCP_CONNECTOR_NAME_PATTERN, pendingAuthUrl, redirectUrl = "", status, submitLabel = "Connect MCP", submittingLabel = "Connecting", onAuthorize, onSubmit, ref, ...props }) {
+	const [submitting, setSubmitting] = React.useState(false);
+	const credentialFields = (auth?.fields ?? CUSTOM_AUTH_FIELDS).filter(isCredentialAuthField);
+	const redirectUrlField = auth?.fields.find((field) => field.name === "redirectUrl");
+	async function handleSubmit(event) {
+		event.preventDefault();
+		event.stopPropagation();
+		if (!event.currentTarget.reportValidity()) return;
+		setSubmitting(true);
+		try {
+			await onSubmit(readMcpConnectorFormValues(new FormData(event.currentTarget)));
+		} finally {
+			setSubmitting(false);
+		}
+	}
+	return /* @__PURE__ */ jsxs(Form, {
+		ref,
+		"aria-label": "MCP connector",
+		className: cx("agent-connect__mcp-form", className),
+		noValidate: false,
+		onSubmit: handleSubmit,
+		...props,
+		children: [
+			/* @__PURE__ */ jsxs(Field.Root, { children: [
+				/* @__PURE__ */ jsx(Field.Label, {
+					htmlFor: "mcpName",
+					children: "MCP name"
+				}),
+				/* @__PURE__ */ jsx(Field.Control, {
+					id: "mcpName",
+					name: "name",
+					pattern: namePattern,
+					required: true,
+					title: "Use a valid JavaScript identifier.",
+					defaultValue: defaults?.name ?? "localMcp"
+				}),
+				/* @__PURE__ */ jsx(Field.Error, {
+					match: "valueMissing",
+					children: "MCP name is required."
+				}),
+				/* @__PURE__ */ jsx(Field.Error, {
+					match: "patternMismatch",
+					children: "Use a valid JavaScript identifier."
+				})
+			] }),
+			/* @__PURE__ */ jsxs(Field.Root, { children: [
+				/* @__PURE__ */ jsx(Field.Label, {
+					htmlFor: "mcpUrl",
+					children: "MCP URL"
+				}),
+				/* @__PURE__ */ jsx(Field.Control, {
+					id: "mcpUrl",
+					name: "url",
+					placeholder: "http://127.0.0.1:8787/mcp",
+					required: true,
+					type: "url",
+					defaultValue: defaults?.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, { children: [/* @__PURE__ */ jsx(Field.Label, {
+				htmlFor: "mcpRedirectUrl",
+				children: redirectUrlField.label
+			}), /* @__PURE__ */ jsx(Field.Control, {
+				id: "mcpRedirectUrl",
+				name: "redirectUrl",
+				readOnly: true,
+				type: "url",
+				value: redirectUrl
+			})] }) : null,
+			credentialFields.map((authField) => /* @__PURE__ */ jsxs(Field.Root, { children: [
+				/* @__PURE__ */ jsx(Field.Label, {
+					htmlFor: `mcp-${authField.name}`,
+					children: authField.label
+				}),
+				/* @__PURE__ */ jsx(Field.Control, {
+					autoComplete: "off",
+					id: `mcp-${authField.name}`,
+					name: 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)),
+			/* @__PURE__ */ jsxs("div", {
+				className: "agent-connect__mcp-form-actions",
+				children: [/* @__PURE__ */ jsx(Button, {
+					type: "submit",
+					size: "sm",
+					disabled: submitting,
+					children: submitting ? submittingLabel : submitLabel
+				}), pendingAuthUrl ? /* @__PURE__ */ jsx(Button, {
+					type: "button",
+					variant: "outline",
+					color: "neutral",
+					size: "sm",
+					onClick: () => {
+						onAuthorize?.();
+					},
+					children: authorizeLabel
+				}) : null]
+			}),
+			status ? /* @__PURE__ */ jsx("span", {
+				className: "agent-connect__mcp-form-status",
+				"aria-live": "polite",
+				children: status
+			}) : null
+		]
+	});
+}
+function readMcpConnectorFormValues(data) {
+	const bearerToken = readFormString(data, "bearerToken");
+	const clientId = readFormString(data, "clientId");
+	const clientSecret = readFormString(data, "clientSecret");
+	const scope = readFormString(data, "scope");
+	return {
+		...bearerToken ? { bearerToken } : {},
+		...clientId ? { clientId } : {},
+		...clientSecret ? { clientSecret } : {},
+		name: readFormString(data, "name"),
+		...scope ? { scope } : {},
+		url: readFormString(data, "url")
+	};
+}
+function readFormString(data, name) {
+	const value = data.get(name);
+	return typeof value === "string" ? value.trim() : "";
+}
+function isCredentialAuthField(field) {
+	return field.name !== "redirectUrl";
+}
 function renderMcpServerIcon(server) {
 	const src = getMcpServerIconSrc(server);
 	if (src) return /* @__PURE__ */ jsx(McpServerIconImage, {
@@ -261,4 +412,4 @@ function AgentConnectionPopover({ className, ...props }) {
 	}) })] });
 }
 //#endregion
-export { AgentConnectionPanel, AgentConnectionPopover, Connection, McpServerSetup, buildNanitesAgentConnectionCommands };
+export { AgentConnectionPanel, AgentConnectionPopover, Connection, McpConnectorForm, McpServerSetup, buildNanitesAgentConnectionCommands };

package/dist/components/Artifact.js

@@ -1,5 +1,5 @@
 import { t as cx } from "../class-names-9UtZwb0J.js";
-import { F as XIcon } from "../icons-BCNawx-T.js";
+import { I as XIcon } from "../icons-BAlTbWWP.js";
 import { Button } from "./Button.js";
 import { Tooltip, TooltipPopup, TooltipPortal, TooltipPositioner, TooltipTrigger } from "./Tooltip.js";
 import "react";