@mcp-b/react-components 0.27.0 → 0.29.0

package/dist/components/ChatGptSignInScreen.js

@@ -6,7 +6,7 @@ import "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/ChatGptSignInScreen.tsx
 /** Full-screen ChatGPT authentication prompt for MCP-B onboarding. */
-function ChatGptSignInScreen({ busy = false, error = false, label = "Sign in with ChatGPT", title = "Welcome to MCP-B", brandName = "SigVelo", brandLogo = /* @__PURE__ */ jsx(SigVeloMark, {}), className, onPointerLeave, onPointerMove, onSignIn, ref, ...props }) {
+function ChatGptSignInScreen({ busy = false, error = false, label = "Sign in with ChatGPT", title = "Welcome to MCP-B", brandName = "SigVelo", brandLogo = /* @__PURE__ */ jsx(SigVeloMark, {}), className, onPointerLeave, onPointerMove, onSignIn, secondaryAction, ref, ...props }) {
 	const handlePointerMove = (event) => {
 		onPointerMove?.(event);
 		setPointerPosition(event.currentTarget, event, "chatgpt-sign-in-pointer");
@@ -16,14 +16,14 @@ function ChatGptSignInScreen({ busy = false, error = false, label = "Sign in wit
 		onPointerLeave?.(event);
 		delete event.currentTarget.dataset.pointerActive;
 	};
-	return /* @__PURE__ */ jsx("main", {
+	return /* @__PURE__ */ jsxs("main", {
 		ref,
 		className: cx("chatgpt-sign-in", className),
 		"aria-label": "ChatGPT authentication",
 		onPointerLeave: handlePointerLeave,
 		onPointerMove: handlePointerMove,
 		...props,
-		children: /* @__PURE__ */ jsxs("div", {
+		children: [/* @__PURE__ */ jsxs("div", {
 			className: "chatgpt-sign-in__panel",
 			children: [/* @__PURE__ */ jsxs("div", {
 				className: "chatgpt-sign-in__brand",
@@ -56,7 +56,18 @@ function ChatGptSignInScreen({ busy = false, error = false, label = "Sign in wit
 					children: label
 				})]
 			})]
-		})
+		}), secondaryAction ? /* @__PURE__ */ jsx("div", {
+			className: "chatgpt-sign-in__secondary-action",
+			children: /* @__PURE__ */ jsx(Button, {
+				type: "button",
+				variant: "ghost",
+				color: "neutral",
+				size: "xs",
+				disabled: secondaryAction.disabled,
+				onClick: secondaryAction.onSelect,
+				children: secondaryAction.label
+			})
+		}) : null]
 	});
 }
 function handleSignInButtonPointerMove(event) {

package/dist/components/ConversationTabPicker.d.ts

@@ -0,0 +1,31 @@
+import * as React from "react";
+
+//#region src/components/ConversationTabPicker.d.ts
+type ConversationTabId = string | number;
+interface ConversationTabPickerItem {
+  id: ConversationTabId;
+  title?: string;
+  url?: string;
+  iconSrc?: string;
+}
+interface ConversationTabPickerProps {
+  /** Browser-enriched tabs already scoped to the current conversation. */
+  tabs: readonly ConversationTabPickerItem[];
+  /** Host-owned activation, such as Chrome tab/window focus. */
+  onSelect: (id: ConversationTabId) => void | Promise<void>;
+  /** Maximum avatars shown in the collapsed trigger. */
+  maxVisible?: number;
+  groupLabel?: React.ReactNode;
+}
+/**
+ * Shared tab-menu presentation over host-resolved browser data.
+ *
+ * The browser adapter owns tab lookup and activation. This component owns URL
+ * labels, favicon fallbacks, menu state, and async activation feedback.
+ */
+declare function ConversationTabPicker({
+  tabs,
+  ...props
+}: ConversationTabPickerProps): React.JSX.Element | null;
+//#endregion
+export { ConversationTabId, ConversationTabPicker, ConversationTabPickerItem, ConversationTabPickerProps };

package/dist/components/ConversationTabPicker.js

@@ -0,0 +1,117 @@
+import { Button } from "./Button.js";
+import { tt as WarningIcon } from "../icons-B4mGvCvc.js";
+import { Avatar } from "./Avatar.js";
+import { Menu } from "./Menu.js";
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/ConversationTabPicker.tsx
+function tabFallback(tab) {
+	const domain = tabDomain(tab);
+	if (domain && domain !== `Tab ${tab.id}`) return domain.charAt(0).toUpperCase();
+	return tab.title?.trim().charAt(0).toUpperCase() || "T";
+}
+function tabDomain(tab) {
+	if (!tab.url) return `Tab ${tab.id}`;
+	try {
+		return new URL(tab.url).hostname.replace(/^www\./, "") || tab.url;
+	} catch {
+		return tab.url;
+	}
+}
+function TabAvatar({ tab }) {
+	return /* @__PURE__ */ jsxs(Avatar.Root, {
+		size: "sm",
+		"aria-hidden": "true",
+		children: [tab.iconSrc ? /* @__PURE__ */ jsx(Avatar.Image, {
+			src: tab.iconSrc,
+			alt: "",
+			referrerPolicy: "no-referrer"
+		}) : null, /* @__PURE__ */ jsx(Avatar.Fallback, {
+			"aria-hidden": "true",
+			children: tabFallback(tab)
+		})]
+	});
+}
+/**
+* Shared tab-menu presentation over host-resolved browser data.
+*
+* The browser adapter owns tab lookup and activation. This component owns URL
+* labels, favicon fallbacks, menu state, and async activation feedback.
+*/
+function ConversationTabPicker({ tabs, ...props }) {
+	if (tabs.length === 0) return null;
+	return /* @__PURE__ */ jsx(ConversationTabPickerMenu, {
+		tabs,
+		...props
+	});
+}
+function ConversationTabPickerMenu({ tabs, onSelect, maxVisible = 3, groupLabel = "Tabs in this conversation" }) {
+	const [open, setOpen] = React.useState(false);
+	const [action, setAction] = React.useState(null);
+	const visibleTabs = tabs.slice(0, Math.max(0, maxVisible));
+	const hiddenCount = tabs.length - visibleTabs.length;
+	const pending = action && "pending" in action ? action.pending : null;
+	const error = action && "error" in action ? action.error : null;
+	const label = `${tabs.length} controlled ${tabs.length === 1 ? "tab" : "tabs"}`;
+	async function selectTab(id) {
+		if (pending !== null) return;
+		setAction({ pending: id });
+		try {
+			await onSelect(id);
+			setAction(null);
+			setOpen(false);
+		} catch (cause) {
+			setAction({ error: cause instanceof Error ? cause.message : String(cause) });
+		}
+	}
+	return /* @__PURE__ */ jsxs(Menu.Root, {
+		open,
+		onOpenChange: setOpen,
+		children: [/* @__PURE__ */ jsx(Menu.Trigger, {
+			render: /* @__PURE__ */ jsx(Button, {
+				type: "button",
+				variant: "ghost",
+				color: "neutral",
+				size: "sm",
+				disabled: pending !== null,
+				focusableWhenDisabled: pending !== null
+			}),
+			"aria-label": `Show ${label}`,
+			children: /* @__PURE__ */ jsxs(Avatar.Group, {
+				"aria-hidden": "true",
+				children: [visibleTabs.map((tab) => /* @__PURE__ */ jsx(TabAvatar, { tab }, tab.id)), hiddenCount > 0 ? /* @__PURE__ */ jsxs(Avatar.GroupCount, { children: ["+", hiddenCount] }) : null]
+			})
+		}), /* @__PURE__ */ jsx(Menu.Portal, { children: /* @__PURE__ */ jsx(Menu.Positioner, {
+			side: "top",
+			align: "start",
+			sideOffset: 8,
+			children: /* @__PURE__ */ jsx(Menu.Popup, { children: /* @__PURE__ */ jsxs(Menu.Group, { children: [
+				/* @__PURE__ */ jsx(Menu.GroupLabel, { children: groupLabel }),
+				error ? /* @__PURE__ */ jsxs("div", {
+					className: "conversation-tab-picker__error",
+					role: "alert",
+					children: [/* @__PURE__ */ jsx(WarningIcon, {}), error]
+				}) : null,
+				tabs.map((tab) => /* @__PURE__ */ jsxs(Menu.Item, {
+					"aria-busy": pending === tab.id || void 0,
+					closeOnClick: false,
+					"data-tab-id": tab.id,
+					disabled: pending !== null,
+					onClick: () => void selectTab(tab.id),
+					children: [/* @__PURE__ */ jsx(TabAvatar, { tab }), /* @__PURE__ */ jsxs("span", {
+						className: "conversation-tab-picker__identity sigvelo-truncate-grow",
+						children: [/* @__PURE__ */ jsx("span", {
+							className: "sigvelo-truncate",
+							children: tab.title ?? tab.url ?? `Tab ${tab.id}`
+						}), /* @__PURE__ */ jsx("span", {
+							className: "conversation-tab-picker__domain sigvelo-truncate",
+							children: tabDomain(tab)
+						})]
+					})]
+				}, tab.id))
+			] }) })
+		}) })]
+	});
+}
+//#endregion
+export { ConversationTabPicker };

package/dist/components/Goal.d.ts

@@ -85,5 +85,32 @@ declare function GoalActions({
 }: GoalActionsProps & {
   ref?: React.Ref<HTMLDivElement>;
 }): React.JSX.Element;
+interface GoalBannerProps extends Omit<GoalProps, "children" | "title"> {
+  /** User- or model-authored objective. */
+  objective: string;
+  /** Host-formatted progress such as elapsed time or token spend. */
+  meta?: React.ReactNode;
+  /** Full progress detail exposed without expanding the capped row. */
+  progressSummary?: string;
+  onPause?: () => void | Promise<void>;
+  onResume?: () => void | Promise<void>;
+  onClear?: () => void | Promise<void>;
+}
+/**
+ * Data-and-callable rendering of the standard goal anatomy.
+ *
+ * The host still owns persistence and lifecycle policy. This component owns
+ * action pending/error state and the shared banner markup.
+ */
+declare function GoalBanner({
+  objective,
+  meta,
+  progressSummary,
+  status,
+  onPause,
+  onResume,
+  onClear,
+  ...props
+}: GoalBannerProps): React.JSX.Element;
 //#endregion
-export { Goal, GoalActions, GoalActionsProps, GoalContent, GoalContentProps, GoalIcon, GoalIconProps, GoalMeta, GoalMetaProps, GoalObjective, GoalObjectiveProps, GoalProps, GoalStatus, GoalTitle, GoalTitleProps };
+export { Goal, GoalActions, GoalActionsProps, GoalBanner, GoalBannerProps, GoalContent, GoalContentProps, GoalIcon, GoalIconProps, GoalMeta, GoalMetaProps, GoalObjective, GoalObjectiveProps, GoalProps, GoalStatus, GoalTitle, GoalTitleProps };

package/dist/components/Goal.js

@@ -1,7 +1,8 @@
 import { t as cx } from "../class-names-BiMDVpUo.js";
-import { Q as TargetIcon } from "../icons-B4mGvCvc.js";
+import { Q as TargetIcon, V as PlayIcon, et as TrashIcon, z as PauseIcon } from "../icons-B4mGvCvc.js";
+import { IconButton } from "./IconButton.js";
 import * as React from "react";
-import { jsx } from "react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/Goal.tsx
 const GoalStatusContext = React.createContext("pursuing");
 const STATUS_LABELS = {
@@ -90,5 +91,77 @@ function GoalActions({ className, ref, ...props }) {
 		...props
 	});
 }
+/**
+* Data-and-callable rendering of the standard goal anatomy.
+*
+* The host still owns persistence and lifecycle policy. This component owns
+* action pending/error state and the shared banner markup.
+*/
+function GoalBanner({ objective, meta, progressSummary, status = "pursuing", onPause, onResume, onClear, ...props }) {
+	const [action, setAction] = React.useState(null);
+	const pending = action && "pending" in action ? action.pending : null;
+	const error = action && "error" in action ? action.error : null;
+	async function runAction(name, callback) {
+		if (pending) return;
+		setAction({ pending: name });
+		try {
+			await callback();
+			setAction(null);
+		} catch (cause) {
+			setAction({ error: cause instanceof Error ? cause.message : String(cause) });
+		}
+	}
+	return /* @__PURE__ */ jsxs(Goal, {
+		status,
+		title: progressSummary,
+		...props,
+		children: [
+			/* @__PURE__ */ jsx(GoalIcon, {}),
+			/* @__PURE__ */ jsxs(GoalContent, { children: [
+				/* @__PURE__ */ jsx(GoalTitle, {}),
+				/* @__PURE__ */ jsx(GoalObjective, {
+					title: objective,
+					children: objective
+				}),
+				error ? /* @__PURE__ */ jsx(GoalMeta, {
+					role: "alert",
+					children: error
+				}) : meta ? /* @__PURE__ */ jsx(GoalMeta, { children: meta }) : null
+			] }),
+			onPause || onResume || onClear ? /* @__PURE__ */ jsxs(GoalActions, { children: [
+				status === "pursuing" && onPause ? /* @__PURE__ */ jsx(IconButton, {
+					label: pending === "pause" ? "Pausing goal" : "Pause goal",
+					size: "xs",
+					variant: "ghost",
+					color: "neutral",
+					disabled: pending !== null,
+					focusableWhenDisabled: pending !== null,
+					onClick: () => void runAction("pause", onPause),
+					children: /* @__PURE__ */ jsx(PauseIcon, {})
+				}) : null,
+				status === "paused" && onResume ? /* @__PURE__ */ jsx(IconButton, {
+					label: pending === "resume" ? "Resuming goal" : "Resume goal",
+					size: "xs",
+					variant: "ghost",
+					color: "neutral",
+					disabled: pending !== null,
+					focusableWhenDisabled: pending !== null,
+					onClick: () => void runAction("resume", onResume),
+					children: /* @__PURE__ */ jsx(PlayIcon, {})
+				}) : null,
+				onClear ? /* @__PURE__ */ jsx(IconButton, {
+					label: pending === "clear" ? "Clearing goal" : "Clear goal",
+					size: "xs",
+					variant: "ghost",
+					color: "neutral",
+					disabled: pending !== null,
+					focusableWhenDisabled: pending !== null,
+					onClick: () => void runAction("clear", onClear),
+					children: /* @__PURE__ */ jsx(TrashIcon, {})
+				}) : null
+			] }) : null
+		]
+	});
+}
 //#endregion
-export { Goal, GoalActions, GoalContent, GoalIcon, GoalMeta, GoalObjective, GoalTitle };
+export { Goal, GoalActions, GoalBanner, GoalContent, GoalIcon, GoalMeta, GoalObjective, GoalTitle };

package/dist/components/McpConnectionRequest.d.ts

@@ -1,11 +1,11 @@
-import { o as McpServerCard } from "../mcp-server-catalog-BewjV7Eq.js";
+import { o as McpServerCard } from "../mcp-server-catalog-CO7GAl1f.js";
 import * as React from "react";
 import { DynamicToolUIPart, ToolUIPart } from "ai";
 import { MCPServersState } from "agents";
 
 //#region src/components/McpConnectionRequest.d.ts
-type McpConnectionRequestOutcome = "connected" | "declined" | "failed";
-interface McpConnectionRequestProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "children" | "part"> {
+type McpConnectionRequestOutcome = "authorization-required" | "connected" | "declined" | "failed";
+interface McpConnectionRequestBaseProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "children" | "part"> {
   /** Whole upstream AI SDK tool part whose lifecycle this card renders. */
   part: ToolUIPart | DynamicToolUIPart;
   /** Canonical catalog/custom display data after the host validates the request. */
@@ -14,13 +14,18 @@ interface McpConnectionRequestProps extends Omit<React.HTMLAttributes<HTMLDivEle
   reason: React.ReactNode;
   /** Whole upstream Agents MCP state, kept separate from the tool lifecycle. */
   mcp?: MCPServersState;
-  /** App-validated meaning of an available tool output. */
-  outcome?: McpConnectionRequestOutcome;
   /** Starts a new connection or replaces a stale non-ready upstream entry. */
   onConnect?: (server: McpServerCard) => void | Promise<void>;
   /** Declines the request. The host may remove any existing non-ready entry. */
   onDecline?: () => void | Promise<void>;
 }
+type McpConnectionRequestProps = (McpConnectionRequestBaseProps & {
+  /** A live authorization outcome must identify its assigned Agents MCP entry. */outcome: "authorization-required";
+  serverId: string;
+}) | (McpConnectionRequestBaseProps & {
+  /** App-validated terminal outcome, or omitted while the request is active. */outcome?: Exclude<McpConnectionRequestOutcome, "authorization-required">;
+  serverId?: never;
+});
 /**
  * In-chat MCP connection request backed by the AI SDK tool part and Agents MCP
  * state. Failed and interrupted connections deliberately restart through the
@@ -31,6 +36,7 @@ declare function McpConnectionRequest({
   server,
   reason,
   mcp,
+  serverId,
   outcome,
   onConnect,
   onDecline,

package/dist/components/McpConnectionRequest.js

@@ -13,18 +13,23 @@ import { getToolPartState } from "@cloudflare/think/react";
 * state. Failed and interrupted connections deliberately restart through the
 * same `onConnect` seam instead of introducing recovery operations.
 */
-function McpConnectionRequest({ part, server, reason, mcp, outcome, onConnect, onDecline, className, ref, ...props }) {
+function McpConnectionRequest({ part, server, reason, mcp, serverId, outcome, onConnect, onDecline, className, ref, ...props }) {
 	const [action, setAction] = React.useState(null);
-	const connectedServer = getMcpServerEntry(server, mcp)?.[1];
+	const entry = getMcpServerEntry(server, mcp);
+	const connectedServer = serverId === void 0 ? entry?.[1] : mcp?.servers[serverId];
 	const serverState = connectedServer ? getMcpServerRuntimeState(connectedServer) : void 0;
 	const pendingAction = action && "pending" in action ? action.pending : null;
 	const actionError = action && "error" in action ? action.error : null;
 	const toolState = part.state === "output-available" && part.preliminary === true ? "streaming" : getToolPartState(part);
-	const settled = toolState === "complete" || toolState === "error" || toolState === "denied";
+	const authorizationPending = outcome === "authorization-required" && toolState === "complete";
+	const settled = toolState === "error" || toolState === "denied" || toolState === "complete" && !authorizationPending;
 	const preparing = !settled && (toolState === "streaming" || toolState === "waiting-approval" || toolState === "approved");
-	const connecting = pendingAction === "connect" || serverState === "connecting" || serverState === "discovering" || serverState === "connected" && !connectedServer?.error;
+	const ready = serverState === "ready";
+	const authorizationFailed = authorizationPending && (serverState === "failed" || serverState === "not-connected" || Boolean(connectedServer?.error) || Boolean(actionError));
+	const authorizing = authorizationPending && !ready && !authorizationFailed;
+	const connecting = !authorizationPending && (pendingAction === "connect" || serverState === "connecting" || serverState === "discovering" || serverState === "connected" && !connectedServer?.error);
 	const reconnect = Boolean(actionError) || serverState === "authenticating" || serverState === "failed" || serverState === "not-connected" || serverState === "connected" && Boolean(connectedServer?.error);
-	const connectionError = actionError ?? connectedServer?.error ?? (serverState === "failed" ? "Connection failed. Reconnect to try again." : void 0);
+	const connectionError = actionError ?? connectedServer?.error ?? (serverState === "failed" ? "Connection failed. Reconnect to try again." : authorizationFailed ? "Connection did not complete." : void 0);
 	async function runAction(kind, callback) {
 		if (pendingAction) return;
 		setAction({ pending: kind });
@@ -56,21 +61,22 @@ function McpConnectionRequest({ part, server, reason, mcp, outcome, onConnect, o
 			}) }) : null]
 		});
 	}
-	const ready = serverState === "ready";
-	const title = preparing ? "Preparing connection request" : connecting ? `Connecting ${server.name}` : ready ? `Connected to ${server.name}` : reconnect ? `Reconnect ${server.name}` : `Connect ${server.name}`;
-	const description = preparing ? "Reading assistant request" : connecting ? "Setting up connection" : ready ? "Connection is ready" : reconnect ? "The previous connection needs attention" : "Assistant requested access";
+	const title = preparing ? "Preparing connection request" : authorizationFailed ? `Couldn’t connect ${server.name}` : authorizing ? `Authorizing ${server.name}` : connecting ? `Connecting ${server.name}` : ready ? `Connected to ${server.name}` : reconnect ? `Reconnect ${server.name}` : `Connect ${server.name}`;
+	const description = preparing ? "Reading assistant request" : authorizationFailed ? "Connection failed" : authorizing ? "The agent is completing sign-in" : connecting ? "Setting up connection" : ready ? "Connection is ready" : reconnect ? "The previous connection needs attention" : "Assistant requested access";
 	const connectLabel = pendingAction === "connect" ? "Connecting…" : ready ? "Continue" : reconnect ? `Reconnect ${server.name}` : `Connect ${server.name}`;
 	return /* @__PURE__ */ jsxs(AgentAttention, {
 		ref,
 		...props,
-		busy: preparing || connecting,
+		"aria-atomic": "true",
+		busy: preparing || connecting || authorizing,
 		className: cx("mcp-connection-request", className),
-		"data-state": serverState ?? (preparing ? "preparing" : "idle"),
+		"data-state": authorizationFailed ? "failed" : serverState ?? (preparing ? "preparing" : authorizing ? "authenticating" : "idle"),
+		role: authorizationFailed ? "alert" : "status",
 		tone: connectionError ? "warning" : "neutral",
 		children: [
 			/* @__PURE__ */ jsx(AgentAttentionHeader, {
 				description,
-				icon: preparing || connecting ? /* @__PURE__ */ jsx(SpinnerIcon, {}) : ready ? /* @__PURE__ */ jsx(CheckIcon, {}) : reconnect ? /* @__PURE__ */ jsx(WarningIcon, {}) : /* @__PURE__ */ jsx(McpIcon, {}),
+				icon: preparing || connecting ? /* @__PURE__ */ jsx(SpinnerIcon, {}) : ready ? /* @__PURE__ */ jsx(CheckIcon, {}) : authorizing ? /* @__PURE__ */ jsx(McpIcon, {}) : reconnect ? /* @__PURE__ */ jsx(WarningIcon, {}) : /* @__PURE__ */ jsx(McpIcon, {}),
 				title
 			}),
 			/* @__PURE__ */ jsxs(AgentAttentionBody, {
@@ -93,21 +99,21 @@ function McpConnectionRequest({ part, server, reason, mcp, outcome, onConnect, o
 					}),
 					connectionError ? /* @__PURE__ */ jsxs("div", {
 						className: "mcp-connection-request__error",
-						role: "alert",
+						role: authorizationFailed ? void 0 : "alert",
 						children: [/* @__PURE__ */ jsx(WarningIcon, {}), /* @__PURE__ */ jsx("span", { children: connectionError })]
 					}) : null
 				]
 			}),
 			onConnect || onDecline ? /* @__PURE__ */ jsxs(AgentAttentionActions, { children: [onConnect ? /* @__PURE__ */ jsx(Button, {
-				disabled: preparing || connecting || pendingAction !== null,
-				focusableWhenDisabled: preparing || connecting,
+				disabled: preparing || connecting || authorizing || pendingAction !== null,
+				focusableWhenDisabled: preparing || connecting || authorizing,
 				onClick: () => void runAction("connect", () => onConnect(server)),
 				size: "sm",
 				type: "button",
-				children: preparing ? "Preparing…" : connecting ? "Connecting…" : connectLabel
+				children: preparing ? "Preparing…" : connecting ? "Connecting…" : authorizing ? "Authorizing…" : connectLabel
 			}) : null, onDecline ? /* @__PURE__ */ jsx(Button, {
 				color: "neutral",
-				disabled: preparing || pendingAction !== null,
+				disabled: preparing || authorizing || pendingAction !== null,
 				focusableWhenDisabled: pendingAction === "decline",
 				onClick: () => void runAction("decline", onDecline),
 				size: "sm",

package/dist/components/McpPluginCatalog.d.ts

@@ -1,4 +1,4 @@
-import { o as McpServerCard } from "../mcp-server-catalog-BewjV7Eq.js";
+import { o as McpServerCard } from "../mcp-server-catalog-CO7GAl1f.js";
 import { l as DialogProps } from "../Dialog-BD8NBKaE.js";
 import * as React from "react";
 import { MCPServersState } from "agents";

package/dist/components/McpServerPicker.d.ts

@@ -1,5 +1,5 @@
 import { s as MenuItemProps, t as Menu } from "../Menu-L6MZm-7N.js";
-import { o as McpServerCard } from "../mcp-server-catalog-BewjV7Eq.js";
+import { o as McpServerCard } from "../mcp-server-catalog-CO7GAl1f.js";
 import { McpConnectorFormProps } from "./AgentConnection.js";
 import { l as DialogProps } from "../Dialog-BD8NBKaE.js";
 import * as React from "react";
@@ -15,6 +15,9 @@ interface McpServerPickerProps {
   mcp?: MCPServersState;
   /** Called when an upstream server entry should be removed. */
   onDisconnect?: (serverId: string) => void | Promise<void>;
+  /** App-owned connection actions shown before the server catalog. */
+  actions?: readonly McpServerPickerActionItem[];
+  actionsLabel?: React.ReactNode;
   /** Offset from the plus trigger to the menu, useful for prompt composers. */
   sideOffset?: number;
   /** Accessible name for the plus trigger. */
@@ -31,6 +34,14 @@ interface McpServerPickerActionProps extends Omit<MenuItemProps, "children" | "l
   label: React.ReactNode;
   description?: React.ReactNode;
 }
+interface McpServerPickerActionItem {
+  id: string;
+  icon?: React.ReactNode;
+  label: React.ReactNode;
+  description?: React.ReactNode;
+  disabled?: boolean;
+  onSelect: () => void;
+}
 interface McpServerSetupDialogProps extends Pick<McpConnectorFormProps, "defaults" | "onSubmit" | "redirectUrl" | "status"> {
   /** Selected catalog entry. Passing null closes the dialog. */
   server: McpServerCard | null;
@@ -52,6 +63,8 @@ declare function McpServerPicker({
   onConnect,
   mcp,
   onDisconnect,
+  actions,
+  actionsLabel,
   sideOffset,
   triggerLabel
 }: McpServerPickerProps): React.JSX.Element;
@@ -59,7 +72,9 @@ declare function McpServerPickerItems({
   servers,
   onConnect,
   mcp,
-  onDisconnect
+  onDisconnect,
+  actions,
+  actionsLabel
 }: McpServerPickerItemsProps): React.JSX.Element;
 declare function McpServerPickerGroup({
   label,
@@ -75,4 +90,4 @@ declare function McpServerPickerAction({
   ...props
 }: McpServerPickerActionProps): React.JSX.Element;
 //#endregion
-export { McpServerPicker, McpServerPickerAction, McpServerPickerActionProps, McpServerPickerGroup, McpServerPickerGroupProps, McpServerPickerItems, McpServerPickerItemsProps, McpServerPickerProps, McpServerSetupDialog, McpServerSetupDialogProps };
+export { McpServerPicker, McpServerPickerAction, McpServerPickerActionItem, McpServerPickerActionProps, McpServerPickerGroup, McpServerPickerGroupProps, McpServerPickerItems, McpServerPickerItemsProps, McpServerPickerProps, McpServerSetupDialog, McpServerSetupDialogProps };

package/dist/components/McpServerPicker.js

@@ -56,7 +56,7 @@ function McpServerSetupDialog({ server, defaults, onOpenChange, onSubmit, redire
 	});
 }
 /** Prompt plus-menu picker for connecting and removing MCP servers. */
-function McpServerPicker({ servers, onConnect, mcp, onDisconnect, sideOffset = 12, triggerLabel = "Add server" }) {
+function McpServerPicker({ servers, onConnect, mcp, onDisconnect, actions, actionsLabel, sideOffset = 12, triggerLabel = "Add server" }) {
 	return /* @__PURE__ */ jsxs(PromptInputActionMenu, { children: [/* @__PURE__ */ jsx(PromptInputActionMenuTrigger, { "aria-label": triggerLabel }), /* @__PURE__ */ jsx(PromptInputActionMenuContent, {
 		tabIndex: -1,
 		"aria-label": "Servers",
@@ -70,11 +70,13 @@ function McpServerPicker({ servers, onConnect, mcp, onDisconnect, sideOffset = 1
 			servers,
 			onConnect,
 			mcp,
-			onDisconnect
+			onDisconnect,
+			actions,
+			actionsLabel
 		})
 	})] });
 }
-function McpServerPickerItems({ servers, onConnect, mcp, onDisconnect }) {
+function McpServerPickerItems({ servers, onConnect, mcp, onDisconnect, actions, actionsLabel = "Connections" }) {
 	const [action, setAction] = React.useState(null);
 	const rows = getPickerRows(servers, mcp);
 	const pendingAction = action && "pending" in action ? action.pending : null;
@@ -89,26 +91,39 @@ function McpServerPickerItems({ servers, onConnect, mcp, onDisconnect }) {
 			setAction({ error: error instanceof Error ? error.message : String(error) });
 		}
 	}
-	return /* @__PURE__ */ jsxs(Fragment, { children: [actionError ? /* @__PURE__ */ jsxs(Menu.Item, {
-		"aria-atomic": "true",
-		"aria-live": "polite",
-		className: "mcp-server-picker__action-error",
-		closeOnClick: false,
-		disabled: true,
-		children: [/* @__PURE__ */ jsx(WarningIcon, { size: 14 }), /* @__PURE__ */ jsx("span", { children: actionError })]
-	}) : null, rows.length === 0 ? /* @__PURE__ */ jsx(Menu.Item, {
-		disabled: true,
-		className: "mcp-server-picker__empty",
-		children: "No servers available."
-	}) : groupPickerRows(rows).map(([label, groupRows]) => /* @__PURE__ */ jsx(McpServerPickerGroup, {
-		label,
-		children: groupRows.map((row) => /* @__PURE__ */ jsx(McpServerPickerRow, {
-			pendingAction,
-			row,
-			onConnect: onConnect ? (server) => runAction(`connect:${server.id}:${server.url}`, () => onConnect(server)) : void 0,
-			onDisconnect: onDisconnect ? (id) => runAction(`disconnect:${id}`, () => onDisconnect(id)) : void 0
-		}, `${row.server.id}:${row.server.url}`))
-	}, label))] });
+	return /* @__PURE__ */ jsxs(Fragment, { children: [
+		actionError ? /* @__PURE__ */ jsxs(Menu.Item, {
+			"aria-atomic": "true",
+			"aria-live": "polite",
+			className: "mcp-server-picker__action-error",
+			closeOnClick: false,
+			disabled: true,
+			children: [/* @__PURE__ */ jsx(WarningIcon, { size: 14 }), /* @__PURE__ */ jsx("span", { children: actionError })]
+		}) : null,
+		actions?.length ? /* @__PURE__ */ jsx(McpServerPickerGroup, {
+			label: actionsLabel,
+			children: actions.map((item) => /* @__PURE__ */ jsx(McpServerPickerAction, {
+				icon: item.icon,
+				label: item.label,
+				description: item.description,
+				disabled: item.disabled,
+				onClick: item.onSelect
+			}, item.id))
+		}) : null,
+		rows.length === 0 ? /* @__PURE__ */ jsx(Menu.Item, {
+			disabled: true,
+			className: "mcp-server-picker__empty",
+			children: "No servers available."
+		}) : groupPickerRows(rows).map(([label, groupRows]) => /* @__PURE__ */ jsx(McpServerPickerGroup, {
+			label,
+			children: groupRows.map((row) => /* @__PURE__ */ jsx(McpServerPickerRow, {
+				pendingAction,
+				row,
+				onConnect: onConnect ? (server) => runAction(`connect:${server.id}:${server.url}`, () => onConnect(server)) : void 0,
+				onDisconnect: onDisconnect ? (id) => runAction(`disconnect:${id}`, () => onDisconnect(id)) : void 0
+			}, `${row.server.id}:${row.server.url}`))
+		}, label))
+	] });
 }
 function McpServerPickerGroup({ label, children, className, ...props }) {
 	return /* @__PURE__ */ jsxs(Menu.Group, {

package/dist/components/Plan.d.ts

@@ -159,5 +159,22 @@ declare function PlanSummaryContent({
   children,
   ...props
 }: PlanSummaryContentProps): React.JSX.Element;
+interface PlanSummaryStep {
+  /** Stable optional identity; the list index is used when omitted. */
+  id?: React.Key;
+  step: React.ReactNode;
+  status: PlanStepStatus;
+}
+interface PlanSummaryListProps {
+  /** Complete normalized plan state from the host. */
+  steps: readonly PlanSummaryStep[];
+  /** The pill usually sits above a composer, so default "top". */
+  side?: PlanSummaryContentProps["side"];
+}
+/** Data-only convenience renderer for the complete plan summary anatomy. */
+declare function PlanSummaryList({
+  steps,
+  side
+}: PlanSummaryListProps): React.JSX.Element | null;
 //#endregion
-export { Plan, PlanContent, PlanContentProps, PlanDescription, PlanDescriptionProps, PlanHeader, PlanHeaderProps, PlanProps, PlanStep, PlanStepDescription, PlanStepDescriptionProps, PlanStepIndicator, PlanStepIndicatorProps, PlanStepProps, PlanStepStatus, PlanStepTitle, PlanStepTitleProps, PlanSummary, PlanSummaryContent, PlanSummaryContentProps, PlanSummaryProps, PlanSummaryTrigger, PlanSummaryTriggerProps, PlanTitle, PlanTitleProps };
+export { Plan, PlanContent, PlanContentProps, PlanDescription, PlanDescriptionProps, PlanHeader, PlanHeaderProps, PlanProps, PlanStep, PlanStepDescription, PlanStepDescriptionProps, PlanStepIndicator, PlanStepIndicatorProps, PlanStepProps, PlanStepStatus, PlanStepTitle, PlanStepTitleProps, PlanSummary, PlanSummaryContent, PlanSummaryContentProps, PlanSummaryList, PlanSummaryListProps, PlanSummaryProps, PlanSummaryStep, PlanSummaryTrigger, PlanSummaryTriggerProps, PlanTitle, PlanTitleProps };

package/dist/components/Plan.js

@@ -189,5 +189,21 @@ function PlanSummaryContent({ className, side = "top", children, ...props }) {
 		})
 	}) });
 }
+/** Data-only convenience renderer for the complete plan summary anatomy. */
+function PlanSummaryList({ steps, side }) {
+	if (steps.length === 0) return null;
+	const completed = steps.filter((item) => item.status === "complete").length;
+	return /* @__PURE__ */ jsxs(PlanSummary, {
+		completed,
+		total: steps.length,
+		children: [/* @__PURE__ */ jsx(PlanSummaryTrigger, {}), /* @__PURE__ */ jsx(PlanSummaryContent, {
+			side,
+			children: /* @__PURE__ */ jsx(Plan, { children: /* @__PURE__ */ jsx(PlanContent, { children: steps.map((item, index) => /* @__PURE__ */ jsxs(PlanStep, {
+				status: item.status,
+				children: [/* @__PURE__ */ jsx(PlanStepIndicator, {}), /* @__PURE__ */ jsx(PlanStepTitle, { children: item.step })]
+			}, item.id ?? index)) }) })
+		})]
+	});
+}
 //#endregion
-export { Plan, PlanContent, PlanDescription, PlanHeader, PlanStep, PlanStepDescription, PlanStepIndicator, PlanStepTitle, PlanSummary, PlanSummaryContent, PlanSummaryTrigger, PlanTitle };
+export { Plan, PlanContent, PlanDescription, PlanHeader, PlanStep, PlanStepDescription, PlanStepIndicator, PlanStepTitle, PlanSummary, PlanSummaryContent, PlanSummaryList, PlanSummaryTrigger, PlanTitle };