@mcp-b/react-components 0.10.0 → 0.12.0

package/dist/components/BrowserRunPanel.js

@@ -0,0 +1,159 @@
+import { t as cx } from "../class-names-9UtZwb0J.js";
+import { L as XIcon, M as SpinnerIcon } from "../icons-D2Q5n5C1.js";
+import { Button } from "./Button.js";
+import { BrowserLiveView } from "./BrowserLiveView.js";
+import { WebPreview, WebPreviewNavigation, WebPreviewNavigationButton, WebPreviewUrl } from "./WebPreview.js";
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/BrowserRunPanel.tsx
+function isInspectablePage(target) {
+	const pageUrl = target.pageUrl;
+	return Boolean(pageUrl && !pageUrl.startsWith("about:") && !pageUrl.startsWith("chrome:") && !pageUrl.startsWith("devtools:"));
+}
+function targetLabel(target) {
+	return target.title || target.pageUrl || target.targetId;
+}
+function targetGlyph(target) {
+	return (target.title || target.pageUrl || target.targetId).trim().charAt(0).toUpperCase() || "•";
+}
+function pickTarget(targets, targetId) {
+	return (targetId ? targets.find((target) => target.targetId === targetId) : void 0) ?? targets.find(isInspectablePage) ?? targets[0];
+}
+function BrowserRunPanelState({ children, role, tone = "neutral" }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: "web-preview__body--empty browser-run-panel__state",
+		"data-tone": tone,
+		role: role ?? (tone === "danger" ? "alert" : void 0),
+		children
+	});
+}
+/**
+* Right-side Browser Run panel for `ThinkFullApp.workbenchPanels`.
+*
+* The app owns `createBrowserRuntime()`, `connector.liveView()`, polling, and
+* session cleanup. This component only renders upstream `BrowserLiveView`
+* data and calls app-provided refresh/close callbacks.
+*/
+function BrowserRunPanel({ liveView, onRefresh, onCloseSession, loading, error, label = "Browser", empty = "No live browser session", fallback, className, ref, ...props }) {
+	const [selectedTargetId, setSelectedTargetId] = React.useState();
+	const [receivedAt, setReceivedAt] = React.useState(() => Date.now());
+	const tabRefs = React.useRef(/* @__PURE__ */ new Map());
+	const tabListId = React.useId();
+	React.useEffect(() => {
+		if (liveView) setReceivedAt(Date.now());
+	}, [liveView]);
+	const targets = liveView?.targets ?? [];
+	const target = pickTarget(targets, selectedTargetId);
+	const pageUrl = target?.pageUrl ?? "";
+	const selectTarget = React.useCallback((nextTarget) => {
+		setSelectedTargetId(nextTarget.targetId);
+	}, []);
+	const handleTabListKeyDown = (event) => {
+		const currentIndex = targets.findIndex((candidate) => candidate.targetId === target?.targetId);
+		if (currentIndex < 0) return;
+		let nextIndex;
+		if (event.key === "ArrowRight") nextIndex = (currentIndex + 1) % targets.length;
+		if (event.key === "ArrowLeft") nextIndex = (currentIndex - 1 + targets.length) % targets.length;
+		if (event.key === "Home") nextIndex = 0;
+		if (event.key === "End") nextIndex = targets.length - 1;
+		if (nextIndex === void 0) return;
+		event.preventDefault();
+		const nextTarget = targets[nextIndex];
+		if (!nextTarget) return;
+		selectTarget(nextTarget);
+		tabRefs.current.get(nextTarget.targetId)?.focus();
+	};
+	return /* @__PURE__ */ jsxs(WebPreview, {
+		ref,
+		className: cx("browser-run-panel", className),
+		url: pageUrl,
+		role: "region",
+		"aria-label": typeof label === "string" ? label : "Browser",
+		...props,
+		children: [
+			targets.length > 1 ? /* @__PURE__ */ jsx(WebPreviewNavigation, { children: /* @__PURE__ */ jsx("div", {
+				id: tabListId,
+				className: "browser-run-panel__tabs",
+				role: "tablist",
+				"aria-label": "Open browser pages",
+				onKeyDown: handleTabListKeyDown,
+				children: targets.map((candidate) => {
+					const selected = candidate.targetId === target?.targetId;
+					return /* @__PURE__ */ jsxs(Button, {
+						ref: (node) => {
+							if (node) tabRefs.current.set(candidate.targetId, node);
+							else tabRefs.current.delete(candidate.targetId);
+						},
+						type: "button",
+						variant: "ghost",
+						color: "neutral",
+						size: "sm",
+						className: "browser-run-panel__tab",
+						role: "tab",
+						id: `${tabListId}-${candidate.targetId}`,
+						"aria-selected": selected,
+						"aria-controls": `${tabListId}-panel`,
+						tabIndex: selected ? 0 : -1,
+						onClick: () => selectTarget(candidate),
+						children: [/* @__PURE__ */ jsx("span", {
+							className: "browser-run-panel__tab-glyph",
+							"aria-hidden": "true",
+							children: targetGlyph(candidate)
+						}), /* @__PURE__ */ jsx("span", {
+							className: "browser-run-panel__tab-title",
+							children: targetLabel(candidate)
+						})]
+					}, candidate.targetId);
+				})
+			}) }) : null,
+			/* @__PURE__ */ jsxs(WebPreviewNavigation, {
+				className: "browser-run-panel__address-bar",
+				children: [
+					/* @__PURE__ */ jsx(WebPreviewUrl, {
+						"aria-label": "Browser page URL",
+						placeholder: "Waiting for browser session",
+						readOnly: true
+					}),
+					onRefresh ? /* @__PURE__ */ jsx(WebPreviewNavigationButton, {
+						action: "reload",
+						label: "Refresh browser view",
+						disabled: loading,
+						onClick: () => void onRefresh()
+					}) : null,
+					onCloseSession ? /* @__PURE__ */ jsx(WebPreviewNavigationButton, {
+						label: "Close browser session",
+						onClick: () => void onCloseSession(),
+						children: /* @__PURE__ */ jsx(XIcon, {})
+					}) : null
+				]
+			}),
+			error ? /* @__PURE__ */ jsx(BrowserRunPanelState, {
+				tone: "danger",
+				children: error
+			}) : null,
+			/* @__PURE__ */ jsx("div", {
+				id: `${tabListId}-panel`,
+				className: "web-preview__body browser-run-panel__body",
+				role: targets.length > 1 ? "tabpanel" : void 0,
+				"aria-labelledby": targets.length > 1 && target ? `${tabListId}-${target.targetId}` : void 0,
+				"aria-busy": loading || void 0,
+				children: target && liveView ? /* @__PURE__ */ jsx(BrowserLiveView, {
+					source: {
+						url: target.url,
+						targetId: target.targetId,
+						expiresInMs: liveView.expiresInMs
+					},
+					receivedAt,
+					pageTitle: target.title ?? target.pageUrl,
+					fallback,
+					className: "browser-run-panel__live-view"
+				}) : loading ? /* @__PURE__ */ jsxs(BrowserRunPanelState, {
+					role: "status",
+					children: [/* @__PURE__ */ jsx(SpinnerIcon, { className: "browser-run-panel__spinner" }), "Loading browser session"]
+				}) : /* @__PURE__ */ jsx(BrowserRunPanelState, { children: empty })
+			})
+		]
+	});
+}
+//#endregion
+export { BrowserRunPanel };

package/dist/components/ChatGptSignInScreen.js

@@ -1,7 +1,7 @@
 import { t as cx } from "../class-names-9UtZwb0J.js";
 import { M as SpinnerIcon } from "../icons-D2Q5n5C1.js";
 import { Button } from "./Button.js";
-import { u as ModelSelectorLogo } from "../ModelSelector-DXtpcRmT.js";
+import { u as ModelSelectorLogo } from "../ModelSelector-BB-xB-Es.js";
 import "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/ChatGptSignInScreen.tsx

package/dist/components/CodexModelSelector.d.ts

@@ -0,0 +1,63 @@
+import * as React from "react";
+
+//#region src/components/CodexModelSelector.d.ts
+/** One server-supported value for a Codex response setting. */
+interface CodexModelSelectorSetting {
+  readonly id: string;
+  readonly label: string;
+  /** Optional explanation shown below the option, such as its usage impact. */
+  readonly description?: string;
+}
+interface CodexModelSelectorProps {
+  /** Model options allowed by the consuming app. Keep authentication and entitlement checks server-side. */
+  readonly models: readonly CodexModelSelectorSetting[];
+  /** Current model id used by the consuming app's AI SDK provider. */
+  readonly selectedModelId?: string | null;
+  /** Called only with an id from the app-provided catalog. */
+  readonly onSelectModel: (modelId: string) => void;
+  /** Server-supported reasoning effort values for the selected model. */
+  readonly effortOptions?: readonly CodexModelSelectorSetting[];
+  readonly selectedEffortId?: string | null;
+  readonly onSelectEffort?: (effortId: string) => void;
+  /** Server-supported response-speed values for the selected model. */
+  readonly speedOptions?: readonly CodexModelSelectorSetting[];
+  readonly selectedSpeedId?: string | null;
+  readonly onSelectSpeed?: (speedId: string) => void;
+  /** Restores all values to the consuming app's preferred defaults. */
+  readonly onReset?: () => void;
+  readonly disabled?: boolean;
+  readonly className?: string;
+  /** Controlled menu open state. */
+  readonly open?: boolean;
+  /** Initial menu state for uncontrolled usage. */
+  readonly defaultOpen?: boolean;
+  readonly onOpenChange?: (open: boolean) => void;
+  readonly "aria-label"?: string;
+}
+/**
+ * A compact Codex-style response settings picker: model, reasoning effort,
+ * response speed, and reset are kept in one cascading menu.
+ *
+ * The consuming app supplies every selectable value. This component only
+ * renders those values and never guesses model ids or account entitlements.
+ */
+declare function CodexModelSelector({
+  models,
+  selectedModelId,
+  onSelectModel,
+  effortOptions,
+  selectedEffortId,
+  onSelectEffort,
+  speedOptions,
+  selectedSpeedId,
+  onSelectSpeed,
+  onReset,
+  disabled,
+  className,
+  open,
+  defaultOpen,
+  onOpenChange,
+  "aria-label": ariaLabel
+}: CodexModelSelectorProps): React.JSX.Element;
+//#endregion
+export { CodexModelSelector, CodexModelSelectorProps, CodexModelSelectorSetting };

package/dist/components/CodexModelSelector.js

@@ -0,0 +1,148 @@
+import { t as cx } from "../class-names-9UtZwb0J.js";
+import { a as CheckIcon, c as ChevronRightIcon, k as RefreshIcon, o as ChevronDownIcon } from "../icons-D2Q5n5C1.js";
+import { MenuContent, MenuGroup, MenuGroupLabel, MenuItem, MenuRadioGroup, MenuRadioItem, MenuRadioItemIndicator, MenuRoot, MenuSeparator, MenuSub, MenuSubContent, MenuSubmenuTrigger, MenuTrigger } from "./Menu.js";
+import * as React from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/CodexModelSelector.tsx
+/**
+* A compact Codex-style response settings picker: model, reasoning effort,
+* response speed, and reset are kept in one cascading menu.
+*
+* The consuming app supplies every selectable value. This component only
+* renders those values and never guesses model ids or account entitlements.
+*/
+function CodexModelSelector({ models, selectedModelId = null, onSelectModel, effortOptions = [], selectedEffortId = null, onSelectEffort, speedOptions = [], selectedSpeedId = null, onSelectSpeed, onReset, disabled = false, className, open, defaultOpen, onOpenChange, "aria-label": ariaLabel = "Codex response settings" }) {
+	const [internalOpen, setInternalOpen] = React.useState(defaultOpen);
+	const selectedModel = models.find((model) => model.id === selectedModelId);
+	const selectedEffort = effortOptions.find((option) => option.id === selectedEffortId);
+	const selectedSpeed = speedOptions.find((option) => option.id === selectedSpeedId);
+	const currentOpen = open ?? internalOpen;
+	const handleOpenChange = React.useCallback((nextOpen) => {
+		if (open === void 0) setInternalOpen(nextOpen);
+		onOpenChange?.(nextOpen);
+	}, [onOpenChange, open]);
+	const handleSelectModel = React.useCallback((modelId) => {
+		onSelectModel(modelId);
+		handleOpenChange(false);
+	}, [handleOpenChange, onSelectModel]);
+	const handleSelectEffort = React.useCallback((effortId) => {
+		onSelectEffort?.(effortId);
+		handleOpenChange(false);
+	}, [handleOpenChange, onSelectEffort]);
+	const handleSelectSpeed = React.useCallback((speedId) => {
+		onSelectSpeed?.(speedId);
+		handleOpenChange(false);
+	}, [handleOpenChange, onSelectSpeed]);
+	const handleReset = React.useCallback(() => {
+		onReset?.();
+		handleOpenChange(false);
+	}, [handleOpenChange, onReset]);
+	return /* @__PURE__ */ jsxs(MenuRoot, {
+		open: currentOpen,
+		onOpenChange: handleOpenChange,
+		children: [/* @__PURE__ */ jsxs(MenuTrigger, {
+			unstyled: true,
+			className: cx("codex-model-selector__trigger", className),
+			disabled,
+			"aria-label": ariaLabel,
+			children: [/* @__PURE__ */ jsxs("span", {
+				className: "codex-model-selector__summary",
+				children: [/* @__PURE__ */ jsx("span", { children: selectedModel?.label ?? "Select model" }), selectedEffort ? /* @__PURE__ */ jsx("span", {
+					className: cx("codex-model-selector__summary-effort", selectedEffort.id === "ultra" && "codex-model-selector__summary-effort--ultra"),
+					children: selectedEffort.label
+				}) : null]
+			}), /* @__PURE__ */ jsx(ChevronDownIcon, { className: "codex-model-selector__trigger-icon" })]
+		}), /* @__PURE__ */ jsxs(MenuContent, {
+			className: "codex-model-selector__menu",
+			side: "top",
+			align: "end",
+			children: [
+				/* @__PURE__ */ jsx(CodexModelSelectorSubmenu, {
+					label: "Model",
+					value: selectedModel?.label ?? "Select",
+					disabled: models.length === 0,
+					children: /* @__PURE__ */ jsx(MenuRadioGroup, {
+						value: selectedModelId ?? void 0,
+						onValueChange: handleSelectModel,
+						children: models.map((model) => /* @__PURE__ */ jsx(CodexModelSelectorRadioItem, {
+							value: model.id,
+							description: model.description,
+							children: model.label
+						}, model.id))
+					})
+				}),
+				effortOptions.length > 0 && onSelectEffort ? /* @__PURE__ */ jsx(CodexModelSelectorSubmenu, {
+					label: "Effort",
+					value: selectedEffort?.label ?? "Select",
+					children: /* @__PURE__ */ jsx(MenuRadioGroup, {
+						value: selectedEffortId ?? void 0,
+						onValueChange: handleSelectEffort,
+						children: effortOptions.map((option) => /* @__PURE__ */ jsx(CodexModelSelectorRadioItem, {
+							value: option.id,
+							description: option.description,
+							children: option.label
+						}, option.id))
+					})
+				}) : null,
+				speedOptions.length > 0 && onSelectSpeed ? /* @__PURE__ */ jsx(CodexModelSelectorSubmenu, {
+					label: "Speed",
+					value: selectedSpeed?.label ?? "Select",
+					children: /* @__PURE__ */ jsx(MenuRadioGroup, {
+						value: selectedSpeedId ?? void 0,
+						onValueChange: handleSelectSpeed,
+						children: speedOptions.map((option) => /* @__PURE__ */ jsx(CodexModelSelectorRadioItem, {
+							value: option.id,
+							description: option.description,
+							children: option.label
+						}, option.id))
+					})
+				}) : null,
+				onReset ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(MenuSeparator, {}), /* @__PURE__ */ jsxs(MenuItem, {
+					className: "codex-model-selector__reset",
+					onClick: handleReset,
+					children: ["Reset to default", /* @__PURE__ */ jsx(RefreshIcon, { className: "codex-model-selector__reset-icon" })]
+				})] }) : null
+			]
+		})]
+	});
+}
+function CodexModelSelectorSubmenu({ label, value, disabled = false, children }) {
+	return /* @__PURE__ */ jsxs(MenuSub, { children: [/* @__PURE__ */ jsxs(MenuSubmenuTrigger, {
+		className: "codex-model-selector__submenu-trigger",
+		disabled,
+		children: [
+			/* @__PURE__ */ jsx("span", { children: label }),
+			/* @__PURE__ */ jsx("span", {
+				className: "codex-model-selector__submenu-value",
+				children: value
+			}),
+			/* @__PURE__ */ jsx(ChevronRightIcon, { className: "codex-model-selector__submenu-icon" })
+		]
+	}), /* @__PURE__ */ jsx(MenuSubContent, {
+		className: cx("codex-model-selector__submenu", `codex-model-selector__submenu--${label.toLowerCase()}`),
+		side: "right",
+		align: "start",
+		children: /* @__PURE__ */ jsxs(MenuGroup, { children: [/* @__PURE__ */ jsx(MenuGroupLabel, {
+			className: "codex-model-selector__submenu-title",
+			children: label
+		}), children] })
+	})] });
+}
+function CodexModelSelectorRadioItem({ children, description, ...props }) {
+	return /* @__PURE__ */ jsxs(MenuRadioItem, {
+		className: "codex-model-selector__option",
+		...props,
+		children: [/* @__PURE__ */ jsxs("span", { children: [/* @__PURE__ */ jsx("span", {
+			className: "codex-model-selector__option-label",
+			children
+		}), description ? /* @__PURE__ */ jsx("span", {
+			className: "codex-model-selector__option-description",
+			children: description
+		}) : null] }), /* @__PURE__ */ jsx(MenuRadioItemIndicator, {
+			className: "codex-model-selector__option-indicator",
+			children: /* @__PURE__ */ jsx(CheckIcon, {})
+		})]
+	});
+}
+//#endregion
+export { CodexModelSelector };

package/dist/components/Commit.d.ts

@@ -1,5 +1,5 @@
 import { CollapsiblePanelProps, CollapsibleRootProps, CollapsibleTriggerProps } from "./Collapsible.js";
-import { r as ButtonProps } from "../Button-Ct5I6aTu.js";
+import { t as CopyButtonProps } from "../copy-button-BKXqGiNm.js";
 import * as React from "react";
 
 //#region src/components/Commit.d.ts
@@ -133,7 +133,7 @@ declare function CommitHash({
 }: CommitHashProps & {
   ref?: React.Ref<HTMLSpanElement>;
 }): React.JSX.Element;
-interface CommitCopyButtonProps extends Omit<ButtonProps, "children" | "variant" | "size" | "color" | "className" | "onClick"> {
+interface CommitCopyButtonProps extends Omit<CopyButtonProps, "label" | "stopPropagation" | "text"> {
   hash: string;
   label?: string;
   className?: string;

package/dist/components/Commit.js

@@ -1,11 +1,10 @@
 import { CollapsiblePanel, CollapsibleRoot, CollapsibleTrigger } from "./Collapsible.js";
 import { t as cx } from "../class-names-9UtZwb0J.js";
-import { a as CheckIcon, c as ChevronRightIcon, h as FileIcon, l as CopyIcon } from "../icons-D2Q5n5C1.js";
-import { Button } from "./Button.js";
-import { Tooltip, TooltipPopup, TooltipPortal, TooltipPositioner, TooltipTrigger } from "./Tooltip.js";
+import { c as ChevronRightIcon, h as FileIcon } from "../icons-D2Q5n5C1.js";
+import { t as CopyButton } from "../copy-button-C6JSKtFE.js";
 import { Avatar } from "./Avatar.js";
 import { Badge } from "./Badge.js";
-import * as React from "react";
+import "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/Commit.tsx
 const FILE_STATUS_COLOR = {
@@ -141,25 +140,14 @@ function CommitHash({ className, children, hash, ref, ...props }) {
 	});
 }
 function CommitCopyButton({ className, hash, label = "Copy hash", onClick, ...props }) {
-	const [copied, setCopied] = React.useState(false);
-	const handleClick = React.useCallback(async (e) => {
-		e.stopPropagation();
-		try {
-			await navigator.clipboard.writeText(hash);
-			setCopied(true);
-			window.setTimeout(() => setCopied(false), 1500);
-		} catch {}
-		onClick?.(e);
-	}, [hash, onClick]);
-	return /* @__PURE__ */ jsxs(Tooltip, { children: [/* @__PURE__ */ jsx(TooltipTrigger, { render: /* @__PURE__ */ jsx(Button, {
-		variant: "ghost",
-		size: "icon",
-		"aria-label": label,
-		className: cx("commit__copy", className),
+	return /* @__PURE__ */ jsx(CopyButton, {
 		...props,
-		onClick: handleClick,
-		children: copied ? /* @__PURE__ */ jsx(CheckIcon, {}) : /* @__PURE__ */ jsx(CopyIcon, {})
-	}) }), /* @__PURE__ */ jsx(TooltipPortal, { children: /* @__PURE__ */ jsx(TooltipPositioner, { children: /* @__PURE__ */ jsx(TooltipPopup, { children: copied ? "Copied" : label }) }) })] });
+		text: hash,
+		label,
+		stopPropagation: true,
+		className: cx("commit__copy", className),
+		onClick
+	});
 }
 function CommitTimestamp({ className, children, date, ref, ...props }) {
 	return /* @__PURE__ */ jsx("time", {

package/dist/components/Conversation.d.ts

@@ -4,12 +4,8 @@ import * as React from "react";
 import { UIMessage } from "ai";
 
 //#region src/components/Conversation.d.ts
-/** AI SDK `UIMessage`, or a plain text fallback for non-chat exports. */
-type ConversationMessage = UIMessage | {
-  id?: string;
-  role: string;
-  content?: string;
-};
+/** Whole AI SDK message accepted by transcript export helpers. */
+type ConversationMessage = UIMessage;
 interface ConversationProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "children"> {
   /** Additional class names for layout only; do not override scroll behavior from apps. */
   className?: string;

package/dist/components/Conversation.js

@@ -133,11 +133,10 @@ function ConversationScrollButton({ className, variant = "outline", color = "neu
 const ROLE_HEADING = {
 	user: "### User",
 	assistant: "### Assistant",
-	system: "### System",
-	tool: "### Tool"
+	system: "### System"
 };
 function defaultFormatMessage(message) {
-	return `${ROLE_HEADING[message.role] ?? `### ${message.role}`}\n\n${("parts" in message ? message.parts.filter((part) => isTextUIPart(part) || isReasoningUIPart(part)).map((part) => part.text).join("") : message.content ?? "").trim()}`;
+	return `${ROLE_HEADING[message.role]}\n\n${message.parts.filter((part) => isTextUIPart(part) || isReasoningUIPart(part)).map((part) => part.text).join("").trim()}`;
 }
 /**
 * Converts a conversation to a Markdown document with a heading per message.

package/dist/components/EnvironmentVariables.d.ts

@@ -1,4 +1,4 @@
-import { r as ButtonProps } from "../Button-Ct5I6aTu.js";
+import { t as CopyButtonProps } from "../copy-button-BKXqGiNm.js";
 import * as React from "react";
 
 //#region src/components/EnvironmentVariables.d.ts
@@ -142,15 +142,10 @@ declare function EnvironmentVariableValue({
   ref?: React.Ref<HTMLSpanElement>;
 }): React.JSX.Element;
 type EnvironmentVariableCopyFormat = "name" | "value" | "export";
-interface EnvironmentVariableCopyButtonProps extends Omit<ButtonProps, "children" | "variant" | "size" | "color" | "className" | "onClick" | "onError"> {
+interface EnvironmentVariableCopyButtonProps extends Omit<CopyButtonProps, "label" | "stopPropagation" | "text"> {
   format?: EnvironmentVariableCopyFormat;
   copyFormat?: EnvironmentVariableCopyFormat;
   label?: string;
-  className?: string;
-  onClick?: React.MouseEventHandler<HTMLButtonElement>;
-  onCopy?: () => void;
-  onError?: (error: Error) => void;
-  timeout?: number;
 }
 declare function EnvironmentVariableCopyButton({
   className,

package/dist/components/EnvironmentVariables.js

@@ -1,7 +1,6 @@
 import { t as cx } from "../class-names-9UtZwb0J.js";
-import { a as CheckIcon, l as CopyIcon, m as EyeOffIcon, p as EyeIcon } from "../icons-D2Q5n5C1.js";
-import { Button } from "./Button.js";
-import { Tooltip, TooltipPopup, TooltipPortal, TooltipPositioner, TooltipTrigger } from "./Tooltip.js";
+import { m as EyeOffIcon, p as EyeIcon } from "../icons-D2Q5n5C1.js";
+import { t as CopyButton } from "../copy-button-C6JSKtFE.js";
 import { Badge } from "./Badge.js";
 import { Switch, SwitchThumb } from "./Switch.js";
 import * as React from "react";
@@ -171,41 +170,19 @@ function EnvironmentVariableValue({ className, children, ref, ...props }) {
 }
 function EnvironmentVariableCopyButton({ className, format = "value", copyFormat, label, onClick, onCopy, onError, timeout = 1500, ...props }) {
 	const { name, value } = useVariableContext();
-	const [copied, setCopied] = React.useState(false);
-	const timeoutRef = React.useRef(null);
 	const resolvedFormat = copyFormat ?? format;
 	const text = resolvedFormat === "name" ? name : resolvedFormat === "export" ? `export ${name}="${value}"` : value;
 	const buttonLabel = label ?? `Copy ${resolvedFormat}`;
-	const handleClick = React.useCallback(async (e) => {
-		try {
-			await navigator.clipboard.writeText(text);
-			setCopied(true);
-			onCopy?.();
-			if (timeoutRef.current !== null) window.clearTimeout(timeoutRef.current);
-			timeoutRef.current = window.setTimeout(() => setCopied(false), timeout);
-		} catch (error) {
-			onError?.(error);
-		}
-		onClick?.(e);
-	}, [
-		onClick,
-		onCopy,
-		onError,
+	return /* @__PURE__ */ jsx(CopyButton, {
+		...props,
 		text,
-		timeout
-	]);
-	React.useEffect(() => () => {
-		if (timeoutRef.current !== null) window.clearTimeout(timeoutRef.current);
-	}, []);
-	return /* @__PURE__ */ jsxs(Tooltip, { children: [/* @__PURE__ */ jsx(TooltipTrigger, { render: /* @__PURE__ */ jsx(Button, {
-		variant: "ghost",
-		size: "icon",
-		"aria-label": buttonLabel,
+		label: buttonLabel,
+		timeout,
 		className: cx("environment-variables__copy", className),
-		...props,
-		onClick: handleClick,
-		children: copied ? /* @__PURE__ */ jsx(CheckIcon, {}) : /* @__PURE__ */ jsx(CopyIcon, {})
-	}) }), /* @__PURE__ */ jsx(TooltipPortal, { children: /* @__PURE__ */ jsx(TooltipPositioner, { children: /* @__PURE__ */ jsx(TooltipPopup, { children: copied ? "Copied" : buttonLabel }) }) })] });
+		onCopy,
+		onError,
+		onClick
+	});
 }
 function EnvironmentVariableRequired({ className, children, ref, ...props }) {
 	return /* @__PURE__ */ jsx(Badge, {

package/dist/components/Marker.js

@@ -1,25 +1,11 @@
 import { t as cx } from "../class-names-9UtZwb0J.js";
+import { n as mergeRefs } from "../merge-refs-DF_7w2x_.js";
 import * as React from "react";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/Marker.tsx
 function markerVariants({ variant = "default", className } = {}) {
 	return cx("marker", `marker--${variant ?? "default"}`, className);
 }
-function assignRef(ref, value) {
-	if (!ref) return;
-	if (typeof ref === "function") {
-		ref(value);
-		return;
-	}
-	ref.current = value;
-}
-function mergeRefs(...refs) {
-	const activeRefs = refs.filter(Boolean);
-	if (activeRefs.length === 0) return void 0;
-	return (value) => {
-		for (const activeRef of activeRefs) assignRef(activeRef, value);
-	};
-}
 function isEventHandler(propName, value) {
 	return /^on[A-Z]/.test(propName) && typeof value === "function";
 }

package/dist/components/McpServerPicker.d.ts

@@ -1,16 +1,30 @@
 import { McpServerCard } from "../utils/mcp-server-catalog.js";
 import * as React from "react";
+import { MCPServer, MCPServersState } from "agents";
 
 //#region src/components/McpServerPicker.d.ts
 interface McpServerPickerProps {
   /** MCP servers to show in the plus-menu picker. */
   servers: readonly McpServerCard[];
   /** Called when the user chooses a server; hosts own OAuth and connection state. */
-  onConnect: (server: McpServerCard) => void | Promise<void>;
+  onConnect?: (server: McpServerCard) => void | Promise<void>;
+  /** Upstream Agents SDK MCP state from `getMcpServers()` or `useAgent({ onMcpUpdate })`. */
+  mcp?: MCPServersState;
+  /** Called when an OAuth server needs user authorization. */
+  onAuthorize?: McpServerConnectionAction;
+  /** Called when a failed server should retry through an app-owned Agent RPC. */
+  onRetry?: McpServerConnectionAction;
+  /** Called when a ready/connected server should refresh discovery through an app-owned Agent RPC. */
+  onRefresh?: McpServerConnectionAction;
+  /** Called when a server transport should close but the stored config should remain. */
+  onDisconnect?: McpServerConnectionAction;
   /** Offset from the plus trigger to the menu, useful for prompt composers. */
   sideOffset?: number;
+  /** Accessible name for the plus trigger. */
+  triggerLabel?: string;
 }
-type McpServerPickerItemsProps = Pick<McpServerPickerProps, "servers" | "onConnect">;
+type McpServerConnectionAction = (serverId: string, server: MCPServer) => void | Promise<void>;
+type McpServerPickerItemsProps = Omit<McpServerPickerProps, "sideOffset" | "triggerLabel">;
 /**
  * Prompt plus-menu picker for choosing an MCP server and handing connection
  * work back to the host app.
@@ -18,11 +32,22 @@ type McpServerPickerItemsProps = Pick<McpServerPickerProps, "servers" | "onConne
 declare function McpServerPicker({
   servers,
   onConnect,
-  sideOffset
+  mcp,
+  onAuthorize,
+  onDisconnect,
+  onRefresh,
+  onRetry,
+  sideOffset,
+  triggerLabel
 }: McpServerPickerProps): React.JSX.Element;
 declare function McpServerPickerItems({
   servers,
-  onConnect
-}: McpServerPickerItemsProps): React.JSX.Element | React.JSX.Element[];
+  onConnect,
+  mcp,
+  onAuthorize,
+  onDisconnect,
+  onRefresh,
+  onRetry
+}: McpServerPickerItemsProps): React.JSX.Element;
 //#endregion
-export { McpServerPicker, McpServerPickerItems, McpServerPickerItemsProps, McpServerPickerProps };
+export { McpServerConnectionAction, McpServerPicker, McpServerPickerItems, McpServerPickerItemsProps, McpServerPickerProps };