@dungle-scrubs/admin-ui-soft 0.0.0-stage → 0.1.0

package/dist/components/assistant-ui/elements/markdown-text.js

@@ -0,0 +1,152 @@
+"use client";
+import { __exportAll } from "../../../_virtual/_rolldown/runtime.js";
+import { cn } from "../../../lib/utils.js";
+import { TooltipIconButton } from "./tooltip-icon-button.js";
+import { useCopyToClipboard } from "../../../hooks/use-copy-to-clipboard.js";
+import { memo, useMemo, useRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { CheckIcon, CopyIcon } from "lucide-react";
+import { MarkdownTextPrimitive, unstable_memoizeMarkdownComponents, useIsMarkdownCodeBlock } from "@assistant-ui/react-markdown";
+import remarkGfm from "remark-gfm";
+//#region src/components/assistant-ui/elements/markdown-text.tsx
+var markdown_text_exports = /* @__PURE__ */ __exportAll({ MarkdownText: () => MarkdownText });
+const useShallowStable = (value) => {
+	const ref = useRef(value);
+	if (value !== ref.current) {
+		const prev = ref.current;
+		if (!(value !== void 0 && prev !== void 0 && Object.keys(prev).length === Object.keys(value).length && Object.keys(value).every((key) => prev[key] === value[key]))) ref.current = value;
+	}
+	return ref.current;
+};
+const MarkdownTextImpl = ({ components }) => {
+	const stableComponents = useShallowStable(components);
+	const markdownComponents = useMemo(() => {
+		if (!stableComponents) return defaultComponents;
+		return {
+			...defaultComponents,
+			...unstable_memoizeMarkdownComponents(stableComponents)
+		};
+	}, [stableComponents]);
+	return /* @__PURE__ */ jsx(MarkdownTextPrimitive, {
+		remarkPlugins: [remarkGfm],
+		className: "aui-md",
+		components: markdownComponents,
+		defer: true
+	});
+};
+const MarkdownText = memo(MarkdownTextImpl);
+const CodeHeader = ({ language, code }) => {
+	const { isCopied, copyToClipboard } = useCopyToClipboard();
+	const onCopy = () => {
+		if (!code || isCopied) return;
+		copyToClipboard(code);
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		className: "aui-code-header-root border-border/50 bg-muted/50 mt-3 flex items-center justify-between rounded-t-xl border border-b-0 px-3.5 py-1.5 text-xs",
+		children: [/* @__PURE__ */ jsx("span", {
+			className: "aui-code-header-language text-muted-foreground font-medium lowercase",
+			children: language
+		}), /* @__PURE__ */ jsxs(TooltipIconButton, {
+			tooltip: "Copy",
+			onClick: onCopy,
+			children: [!isCopied && /* @__PURE__ */ jsx(CopyIcon, { className: "animate-in zoom-in-75 fade-in duration-150" }), isCopied && /* @__PURE__ */ jsx(CheckIcon, { className: "animate-in zoom-in-50 fade-in duration-200 ease-out" })]
+		})]
+	});
+};
+const defaultComponents = unstable_memoizeMarkdownComponents({
+	h1: ({ className, ...props }) => /* @__PURE__ */ jsx("h1", {
+		className: cn("aui-md-h1 mt-5 mb-2 scroll-m-20 text-xl font-semibold first:mt-0 last:mb-0", className),
+		...props
+	}),
+	h2: ({ className, ...props }) => /* @__PURE__ */ jsx("h2", {
+		className: cn("aui-md-h2 mt-5 mb-2 scroll-m-20 text-lg font-semibold first:mt-0 last:mb-0", className),
+		...props
+	}),
+	h3: ({ className, ...props }) => /* @__PURE__ */ jsx("h3", {
+		className: cn("aui-md-h3 mt-4 mb-1.5 scroll-m-20 text-base font-semibold first:mt-0 last:mb-0", className),
+		...props
+	}),
+	h4: ({ className, ...props }) => /* @__PURE__ */ jsx("h4", {
+		className: cn("aui-md-h4 mt-3.5 mb-1 scroll-m-20 text-base font-medium first:mt-0 last:mb-0", className),
+		...props
+	}),
+	h5: ({ className, ...props }) => /* @__PURE__ */ jsx("h5", {
+		className: cn("aui-md-h5 mt-3 mb-1 text-sm font-semibold first:mt-0 last:mb-0", className),
+		...props
+	}),
+	h6: ({ className, ...props }) => /* @__PURE__ */ jsx("h6", {
+		className: cn("aui-md-h6 mt-3 mb-1 text-sm font-medium first:mt-0 last:mb-0", className),
+		...props
+	}),
+	p: ({ className, ...props }) => /* @__PURE__ */ jsx("p", {
+		className: cn("aui-md-p my-3 leading-relaxed first:mt-0 last:mb-0", className),
+		...props
+	}),
+	a: ({ className, ...props }) => /* @__PURE__ */ jsx("a", {
+		className: cn("aui-md-a text-primary hover:text-primary/80 underline underline-offset-2", className),
+		...props,
+		rel: "noopener noreferrer"
+	}),
+	blockquote: ({ className, ...props }) => /* @__PURE__ */ jsx("blockquote", {
+		className: cn("aui-md-blockquote border-muted-foreground/30 text-muted-foreground my-3 border-s-2 ps-4", className),
+		...props
+	}),
+	ul: ({ className, ...props }) => /* @__PURE__ */ jsx("ul", {
+		className: cn("aui-md-ul marker:text-muted-foreground my-3 ms-5 list-disc [&>li]:mt-1", className),
+		...props
+	}),
+	ol: ({ className, ...props }) => /* @__PURE__ */ jsx("ol", {
+		className: cn("aui-md-ol marker:text-muted-foreground my-3 ms-5 list-decimal [&>li]:mt-1", className),
+		...props
+	}),
+	hr: ({ className, ...props }) => /* @__PURE__ */ jsx("hr", {
+		className: cn("aui-md-hr border-muted-foreground/20 my-3", className),
+		...props
+	}),
+	table: ({ className, ...props }) => /* @__PURE__ */ jsx("div", {
+		className: "aui-md-table-wrapper my-3 overflow-x-auto",
+		children: /* @__PURE__ */ jsx("table", {
+			className: cn("aui-md-table w-full border-separate border-spacing-0", className),
+			...props
+		})
+	}),
+	th: ({ className, ...props }) => /* @__PURE__ */ jsx("th", {
+		className: cn("aui-md-th bg-muted px-3 py-1.5 text-start font-medium first:rounded-ss-lg last:rounded-se-lg [[align=center]]:text-center [[align=right]]:text-right", className),
+		...props
+	}),
+	td: ({ className, ...props }) => /* @__PURE__ */ jsx("td", {
+		className: cn("aui-md-td border-muted-foreground/20 border-s border-b px-3 py-1.5 text-start last:border-e [[align=center]]:text-center [[align=right]]:text-right", className),
+		...props
+	}),
+	tr: ({ className, ...props }) => /* @__PURE__ */ jsx("tr", {
+		className: cn("aui-md-tr m-0 border-b p-0 first:border-t [&:last-child>td:first-child]:rounded-es-lg [&:last-child>td:last-child]:rounded-ee-lg", className),
+		...props
+	}),
+	li: ({ className, ...props }) => /* @__PURE__ */ jsx("li", {
+		className: cn("aui-md-li leading-relaxed", className),
+		...props
+	}),
+	strong: ({ className, ...props }) => /* @__PURE__ */ jsx("strong", {
+		className: cn("aui-md-strong font-semibold", className),
+		...props
+	}),
+	sup: ({ className, ...props }) => /* @__PURE__ */ jsx("sup", {
+		className: cn("aui-md-sup [&>a]:text-xs [&>a]:no-underline", className),
+		...props
+	}),
+	pre: ({ className, ...props }) => /* @__PURE__ */ jsx("pre", {
+		tabIndex: 0,
+		className: cn("aui-md-pre border-border/50 bg-muted/30 overflow-x-auto rounded-t-none rounded-b-xl border border-t-0 p-3.5 text-[13px] leading-relaxed", className),
+		...props
+	}),
+	code: function Code({ className, ...props }) {
+		const isCodeBlock = useIsMarkdownCodeBlock();
+		return /* @__PURE__ */ jsx("code", {
+			className: cn(!isCodeBlock && "aui-md-inline-code bg-muted rounded-md px-1.5 py-0.5 font-mono text-[0.85em]", className),
+			...props
+		});
+	},
+	CodeHeader
+});
+//#endregion
+export { MarkdownText, markdown_text_exports };

package/dist/components/assistant-ui/elements/math-block.d.ts

@@ -0,0 +1,25 @@
+import { ComponentProps } from "react";
+declare namespace math_block_d_exports {
+  export { Frac, MathBlock, MathStep, Sub, Sup };
+}
+export interface MathStep {
+  expression: React.ReactNode;
+  note?: string;
+}
+export declare function MathBlock({ label, steps, visibleSteps, className, ...props }: Omit<ComponentProps<"div">, "children" | "label" | "steps" | "visibleSteps"> & {
+  label?: string;
+  steps: readonly MathStep[];
+  visibleSteps: number;
+}): import("react").JSX.Element;
+export declare function Frac({ over, under }: {
+  over: React.ReactNode;
+  under: React.ReactNode;
+}): import("react").JSX.Element;
+export declare function Sup({ children }: {
+  children: React.ReactNode;
+}): import("react").JSX.Element;
+export declare function Sub({ children }: {
+  children: React.ReactNode;
+}): import("react").JSX.Element;
+//#endregion
+export { math_block_d_exports };

package/dist/components/assistant-ui/elements/math-block.js

@@ -0,0 +1,60 @@
+"use client";
+import { __exportAll } from "../../../_virtual/_rolldown/runtime.js";
+import { cn } from "../../../lib/utils.js";
+import { paper } from "./surfaces.js";
+import { take } from "../utils/range.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/assistant-ui/elements/math-block.tsx
+var math_block_exports = /* @__PURE__ */ __exportAll({
+	Frac: () => Frac,
+	MathBlock: () => MathBlock,
+	Sub: () => Sub,
+	Sup: () => Sup
+});
+function MathBlock({ label, steps, visibleSteps, className, ...props }) {
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "math-block",
+		className: cn(paper, "flex w-full max-w-sm flex-col gap-2.5 rounded-2xl p-4", className),
+		...props,
+		children: [label && /* @__PURE__ */ jsx("span", {
+			className: cn("font-mono text-[11px] tracking-tight", "text-muted-foreground"),
+			children: label
+		}), take(steps, visibleSteps).map((step, i) => /* @__PURE__ */ jsxs("div", {
+			className: "fade-in slide-in-from-bottom-1 animate-in fill-mode-both flex flex-col gap-1 duration-300",
+			children: [/* @__PURE__ */ jsx("span", {
+				className: "text-foreground/90 overflow-x-auto py-1 text-center font-serif text-[17px] leading-relaxed italic",
+				children: step.expression
+			}), step.note && /* @__PURE__ */ jsx("span", {
+				className: cn("font-mono text-[11px] tracking-tight", "text-muted-foreground text-center"),
+				children: step.note
+			})]
+		}, i))]
+	});
+}
+function Frac({ over, under }) {
+	return /* @__PURE__ */ jsxs("span", {
+		"data-slot": "frac",
+		className: "inline-flex flex-col items-center align-middle text-[1em] leading-tight",
+		children: [/* @__PURE__ */ jsx("span", {
+			className: "px-1",
+			children: over
+		}), /* @__PURE__ */ jsx("span", {
+			className: "border-foreground/40 w-full border-t px-1",
+			children: under
+		})]
+	});
+}
+function Sup({ children }) {
+	return /* @__PURE__ */ jsx("sup", {
+		className: "text-[0.65em] not-italic",
+		children
+	});
+}
+function Sub({ children }) {
+	return /* @__PURE__ */ jsx("sub", {
+		className: "text-[0.65em] not-italic",
+		children
+	});
+}
+//#endregion
+export { Frac, MathBlock, Sub, Sup, math_block_exports };

package/dist/components/assistant-ui/elements/mcp-config.aui.d.ts

@@ -0,0 +1,28 @@
+import { FC, ReactNode } from "react";
+declare namespace mcp_config_aui_d_exports {
+  export { McpConfigDialog };
+}
+export declare namespace McpConfigDialog {
+  type Props = {
+    /** Trigger element. Defaults to a ghost button with a plug icon. */
+    children?: ReactNode;
+  };
+}
+/**
+ * Drop-in MCP server configuration dialog. Lists app-defined connectors and
+ * user-added custom servers, with inline auth controls and an add form.
+ *
+ * Mount the manager once at the root of your app, on the runtime provider
+ * itself:
+ * ```tsx
+ * const config = AuiConfig({ mcp: McpManagerResource({ connectors }) });
+ *
+ * <AssistantRuntimeProvider runtime={runtime} config={config}>
+ *   {children}
+ * </AssistantRuntimeProvider>;
+ * ```
+ * then render `<McpConfigDialog />` anywhere inside it.
+ */
+export declare const McpConfigDialog: FC<McpConfigDialog.Props>;
+//#endregion
+export { mcp_config_aui_d_exports };

package/dist/components/assistant-ui/elements/mcp-config.aui.js

@@ -0,0 +1,380 @@
+"use client";
+import { __exportAll } from "../../../_virtual/_rolldown/runtime.js";
+import { Button, buttonVariants } from "../../ui/button.js";
+import { Separator } from "../../ui/separator.js";
+import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, DialogTrigger } from "../../ui/dialog.js";
+import { cn } from "../../../lib/utils.js";
+import { Label } from "../../ui/label.js";
+import { isValidElement, useEffect, useId, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { ChevronDownIcon, Loader2Icon, PlugIcon, PlugZapIcon, PlusIcon, ServerIcon, ShieldAlertIcon, Trash2Icon, XIcon } from "lucide-react";
+import { useAuiState } from "@assistant-ui/react";
+import { McpAddFormPrimitive, McpManagerPrimitive, McpServerPrimitive } from "@assistant-ui/react-mcp";
+//#region src/components/assistant-ui/elements/mcp-config.aui.tsx
+var mcp_config_aui_exports = /* @__PURE__ */ __exportAll({ McpConfigDialog: () => McpConfigDialog });
+const inputClassName = "border-input selection:bg-primary selection:text-primary-foreground file:text-foreground placeholder:text-muted-foreground dark:bg-input/30 h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base transition-colors outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-1 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40";
+const FOCUSABLE_SELECTOR = "button:not([disabled]), a[href]";
+const firstFocusable = (element) => element?.matches(FOCUSABLE_SELECTOR) ? element : element?.querySelector(FOCUSABLE_SELECTOR);
+const indexOfServer = (list, element) => [...list.children].findIndex((card) => card.contains(element));
+const isFocusLost = () => {
+	const active = document.activeElement;
+	return !active || active === document.body || active.getAttribute("role") === "dialog";
+};
+/**
+* Drop-in MCP server configuration dialog. Lists app-defined connectors and
+* user-added custom servers, with inline auth controls and an add form.
+*
+* Mount the manager once at the root of your app, on the runtime provider
+* itself:
+* ```tsx
+* const config = AuiConfig({ mcp: McpManagerResource({ connectors }) });
+*
+* <AssistantRuntimeProvider runtime={runtime} config={config}>
+*   {children}
+* </AssistantRuntimeProvider>;
+* ```
+* then render `<McpConfigDialog />` anywhere inside it.
+*/
+const McpConfigDialog = ({ children }) => {
+	return /* @__PURE__ */ jsxs(Dialog, { children: [isValidElement(children) ? /* @__PURE__ */ jsx(DialogTrigger, { render: children }) : /* @__PURE__ */ jsxs(DialogTrigger, {
+		render: /* @__PURE__ */ jsx(Button, {
+			variant: "outline",
+			size: "sm",
+			className: "aui-mcp-config-trigger gap-2"
+		}),
+		children: [/* @__PURE__ */ jsx(PlugIcon, { className: "size-4" }), "MCP servers"]
+	}), /* @__PURE__ */ jsxs(DialogContent, {
+		className: "aui-mcp-config-content sm:max-w-lg",
+		children: [/* @__PURE__ */ jsxs(DialogHeader, { children: [/* @__PURE__ */ jsx(DialogTitle, { children: "MCP servers" }), /* @__PURE__ */ jsx(DialogDescription, { children: "Connect to Model Context Protocol servers to expose their tools to this assistant." })] }), /* @__PURE__ */ jsx(McpManagerPrimitive.Root, { children: /* @__PURE__ */ jsxs("div", {
+			className: "flex flex-col gap-4",
+			children: [
+				/* @__PURE__ */ jsx(ConnectorsSection, {}),
+				/* @__PURE__ */ jsx(Separator, {}),
+				/* @__PURE__ */ jsx(CustomServersSection, {})
+			]
+		}) })]
+	})] });
+};
+McpConfigDialog.displayName = "McpConfigDialog";
+const ConnectorsSection = () => {
+	return /* @__PURE__ */ jsxs("section", {
+		className: "aui-mcp-connectors flex flex-col gap-2",
+		children: [/* @__PURE__ */ jsx(SectionTitle, { children: "Connectors" }), /* @__PURE__ */ jsx("div", {
+			className: "flex flex-col gap-2",
+			children: /* @__PURE__ */ jsx(McpManagerPrimitive.Connectors, { children: () => /* @__PURE__ */ jsx(ServerCard, {}) })
+		})]
+	});
+};
+const CustomServersSection = () => {
+	const serverIds = useAuiState((s) => s.mcp.customServers.map((server) => server.id).join(""));
+	const [showForm, setShowForm] = useState(false);
+	const listRef = useRef(null);
+	const focusedServerRef = useRef(null);
+	const addTriggerRef = useRef(null);
+	const restoreFocusRef = useRef(false);
+	useEffect(() => {
+		if (showForm || !restoreFocusRef.current) return;
+		restoreFocusRef.current = false;
+		addTriggerRef.current?.focus();
+	}, [showForm]);
+	useEffect(() => {
+		const list = listRef.current;
+		const focused = focusedServerRef.current;
+		if (!list || !focused) return;
+		if (focused.element.isConnected) {
+			focused.index = indexOfServer(list, focused.element);
+			return;
+		}
+		focusedServerRef.current = null;
+		if (!isFocusLost()) return;
+		(firstFocusable(list.children[focused.index]) ?? firstFocusable(list.nextElementSibling))?.focus();
+	}, [serverIds]);
+	const handleClose = () => {
+		restoreFocusRef.current = true;
+		setShowForm(false);
+	};
+	return /* @__PURE__ */ jsxs("section", {
+		className: "aui-mcp-custom-servers flex flex-col gap-2",
+		children: [
+			/* @__PURE__ */ jsx(SectionTitle, { children: "Custom servers" }),
+			/* @__PURE__ */ jsx("div", {
+				ref: listRef,
+				className: "flex flex-col gap-2",
+				onFocus: (e) => {
+					focusedServerRef.current = {
+						element: e.target,
+						index: indexOfServer(e.currentTarget, e.target)
+					};
+				},
+				children: /* @__PURE__ */ jsx(McpManagerPrimitive.CustomServers, { children: () => /* @__PURE__ */ jsx(ServerCard, {}) })
+			}),
+			!showForm && /* @__PURE__ */ jsxs(McpManagerPrimitive.AddCustomTrigger, {
+				ref: addTriggerRef,
+				className: cn(buttonVariants({ variant: "outline" }), "aui-mcp-add-trigger h-9 justify-start gap-2 rounded-lg px-3 text-sm"),
+				onClick: () => setShowForm(true),
+				children: [/* @__PURE__ */ jsx(PlusIcon, { className: "size-4" }), "Add server"]
+			}),
+			showForm && /* @__PURE__ */ jsx(AddServerForm, { onClose: handleClose })
+		]
+	});
+};
+const SectionTitle = ({ children }) => /* @__PURE__ */ jsx("h3", {
+	className: "text-muted-foreground text-xs font-medium tracking-wide uppercase",
+	children
+});
+const ServerCard = () => {
+	return /* @__PURE__ */ jsxs(McpServerPrimitive.Root, {
+		className: cn("aui-mcp-server-card flex flex-col gap-2 rounded-lg border p-3", "data-[connection-state=error]:border-destructive/40"),
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex items-center gap-3",
+				children: [
+					/* @__PURE__ */ jsx(ServerAvatar, {}),
+					/* @__PURE__ */ jsxs("div", {
+						className: "flex min-w-0 flex-1 flex-col gap-0.5",
+						children: [/* @__PURE__ */ jsx("span", {
+							className: "truncate text-sm font-medium",
+							children: /* @__PURE__ */ jsx(McpServerPrimitive.Name, {})
+						}), /* @__PURE__ */ jsx(StatusLine, {})]
+					}),
+					/* @__PURE__ */ jsxs("div", {
+						className: "flex items-center gap-1",
+						children: [/* @__PURE__ */ jsx(ServerActions, {}), /* @__PURE__ */ jsxs(McpServerPrimitive.RemoveButton, {
+							className: cn(buttonVariants({
+								variant: "ghost",
+								size: "icon"
+							}), "aui-mcp-server-remove text-muted-foreground hover:text-destructive size-7"),
+							children: [/* @__PURE__ */ jsx(Trash2Icon, { className: "size-4" }), /* @__PURE__ */ jsx("span", {
+								className: "sr-only",
+								children: "Remove"
+							})]
+						})]
+					})
+				]
+			}),
+			/* @__PURE__ */ jsx(ServerError, {}),
+			/* @__PURE__ */ jsx(ServerAnnouncement, {})
+		]
+	});
+};
+const ServerAvatar = () => {
+	const icon = useAuiState((s) => s.mcpServer.icon ?? null);
+	const name = useAuiState((s) => s.mcpServer.name);
+	return /* @__PURE__ */ jsx("div", {
+		className: "bg-muted text-muted-foreground flex size-8 shrink-0 items-center justify-center overflow-hidden rounded-md border",
+		children: icon ? /* @__PURE__ */ jsx("img", {
+			src: icon,
+			alt: name,
+			className: "size-full object-cover"
+		}) : /* @__PURE__ */ jsx(ServerIcon, { className: "size-4" })
+	});
+};
+const STATUS_DOT = {
+	connected: "bg-chart-2",
+	connecting: "bg-muted-foreground",
+	authRequired: "bg-muted-foreground",
+	authPending: "bg-muted-foreground",
+	error: "bg-destructive",
+	disconnected: "bg-muted-foreground/60"
+};
+const STATUS_LABEL = {
+	connected: "Connected",
+	connecting: "Connecting…",
+	authRequired: "Auth required",
+	authPending: "Authorizing…",
+	error: "Error",
+	disconnected: "Disconnected"
+};
+const StatusLine = () => {
+	const status = useAuiState((s) => s.mcpServer.connectionState);
+	const label = STATUS_LABEL[status];
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("flex items-center gap-1.5 text-xs", status === "error" ? "text-destructive" : "text-muted-foreground"),
+		children: [status === "connecting" || status === "authPending" ? /* @__PURE__ */ jsx(Loader2Icon, {
+			"aria-hidden": "true",
+			className: "size-3 animate-spin"
+		}) : /* @__PURE__ */ jsx("span", {
+			"aria-hidden": "true",
+			className: cn("size-1.5 shrink-0 rounded-full", STATUS_DOT[status])
+		}), label]
+	});
+};
+const ServerAnnouncement = () => {
+	const status = useAuiState((s) => s.mcpServer.connectionState);
+	const message = useAuiState((s) => s.mcpServer.lastError?.message ?? null);
+	const [seen, setSeen] = useState({
+		status,
+		message
+	});
+	const [announcement, setAnnouncement] = useState("");
+	if (seen.status !== status || seen.message !== message) {
+		setSeen({
+			status,
+			message
+		});
+		if (message && message !== seen.message) setAnnouncement(`${STATUS_LABEL.error}: ${message}`);
+		else if (status !== seen.status) setAnnouncement(STATUS_LABEL[status]);
+	}
+	useEffect(() => {
+		if (!announcement) return;
+		const timeout = setTimeout(() => setAnnouncement(""), 1e3);
+		return () => clearTimeout(timeout);
+	}, [announcement]);
+	return /* @__PURE__ */ jsx("div", {
+		role: "status",
+		className: "sr-only",
+		children: announcement
+	});
+};
+const ServerError = () => {
+	const message = useAuiState((s) => s.mcpServer.lastError?.message ?? null);
+	if (!message) return null;
+	return /* @__PURE__ */ jsxs("div", {
+		className: "border-destructive/40 bg-destructive/5 text-destructive flex items-start gap-2 rounded-md border px-2 py-1.5 text-xs",
+		children: [/* @__PURE__ */ jsx(ShieldAlertIcon, { className: "mt-0.5 size-3.5 shrink-0" }), /* @__PURE__ */ jsx("span", {
+			className: "break-words",
+			children: message
+		})]
+	});
+};
+const ServerActions = () => {
+	const state = useAuiState((s) => s.mcpServer.connectionState);
+	const actionRef = useRef(null);
+	const focusedRef = useRef(null);
+	useEffect(() => {
+		const focused = focusedRef.current;
+		if (!focused || focused.isConnected) return;
+		focusedRef.current = null;
+		if (isFocusLost()) actionRef.current?.focus();
+	}, [state]);
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex flex-wrap gap-2",
+		onFocus: (e) => {
+			focusedRef.current = e.target;
+		},
+		children: [
+			/* @__PURE__ */ jsxs(McpServerPrimitive.ConnectButton, {
+				ref: actionRef,
+				className: cn(buttonVariants({
+					variant: "default",
+					size: "sm"
+				}), "aui-mcp-server-connect h-8 gap-2 text-xs"),
+				children: [/* @__PURE__ */ jsx(PlugZapIcon, { className: "size-3.5" }), "Connect"]
+			}),
+			/* @__PURE__ */ jsx(McpServerPrimitive.OAuthLink, {
+				className: cn(buttonVariants({
+					variant: "default",
+					size: "sm"
+				}), "aui-mcp-server-authorize h-8 gap-2 text-xs"),
+				children: "Authorize"
+			}),
+			/* @__PURE__ */ jsx(McpServerPrimitive.DisconnectButton, {
+				ref: actionRef,
+				className: cn(buttonVariants({
+					variant: "outline",
+					size: "sm"
+				}), "aui-mcp-server-disconnect h-8 text-xs"),
+				children: "Disconnect"
+			})
+		]
+	});
+};
+const AddServerForm = ({ onClose }) => {
+	const formId = useId();
+	const fieldIds = {
+		name: `${formId}-name`,
+		url: `${formId}-url`,
+		auth: `${formId}-auth`
+	};
+	return /* @__PURE__ */ jsx(McpAddFormPrimitive.Root, {
+		onSubmitted: onClose,
+		onCancel: onClose,
+		children: /* @__PURE__ */ jsxs("div", {
+			className: "aui-mcp-add-form flex flex-col gap-3 rounded-lg border p-3",
+			children: [
+				/* @__PURE__ */ jsxs("div", {
+					className: "flex items-center justify-between",
+					children: [/* @__PURE__ */ jsx("h4", {
+						className: "text-sm font-medium",
+						children: "New server"
+					}), /* @__PURE__ */ jsxs(McpAddFormPrimitive.Cancel, {
+						type: "button",
+						className: cn(buttonVariants({
+							variant: "ghost",
+							size: "icon"
+						}), "text-muted-foreground size-7"),
+						children: [/* @__PURE__ */ jsx(XIcon, { className: "size-4" }), /* @__PURE__ */ jsx("span", {
+							className: "sr-only",
+							children: "Close form"
+						})]
+					})]
+				}),
+				/* @__PURE__ */ jsx(FormRow, {
+					label: "Name",
+					htmlFor: fieldIds.name,
+					children: /* @__PURE__ */ jsx(McpAddFormPrimitive.NameField, {
+						autoFocus: true,
+						id: fieldIds.name,
+						placeholder: "My MCP server",
+						className: inputClassName
+					})
+				}),
+				/* @__PURE__ */ jsx(FormRow, {
+					label: "URL",
+					htmlFor: fieldIds.url,
+					children: /* @__PURE__ */ jsx(McpAddFormPrimitive.UrlField, {
+						id: fieldIds.url,
+						placeholder: "https://example.com/mcp",
+						className: inputClassName
+					})
+				}),
+				/* @__PURE__ */ jsxs(FormRow, {
+					label: "Auth",
+					htmlFor: fieldIds.auth,
+					children: [/* @__PURE__ */ jsxs("div", {
+						className: "relative w-full",
+						children: [/* @__PURE__ */ jsx(McpAddFormPrimitive.AuthSelect, {
+							id: fieldIds.auth,
+							className: "aui-mcp-auth-select border-input dark:bg-input/30 h-9 w-full min-w-0 cursor-pointer appearance-none rounded-md border bg-input/20 px-3 py-1 pr-8 text-base transition-colors outline-none md:text-sm focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-1"
+						}), /* @__PURE__ */ jsx(ChevronDownIcon, {
+							"aria-hidden": true,
+							className: "text-muted-foreground pointer-events-none absolute end-2.5 top-1/2 size-4 -translate-y-1/2"
+						})]
+					}), /* @__PURE__ */ jsx("div", {
+						className: cn("[&_[data-mcp-auth-field-label]]:text-xs [&_[data-mcp-auth-field-label]]:font-medium [&>div]:flex [&>div]:flex-col [&>div]:gap-1.5", "[&_input]:border-input empty:hidden [&_input]:flex [&_input]:h-9 [&_input]:w-full [&_input]:rounded-md [&_input]:border [&_input]:bg-transparent [&_input]:px-3 [&_input]:py-1 [&_input]:text-sm [&_input]:transition-colors [&_input]:outline-none", "[&_input:focus-visible]:border-ring [&_input:focus-visible]:ring-ring/50 [&_input:focus-visible]:ring-[3px]", "[&_input[aria-invalid=true]]:border-destructive [&_input[aria-invalid=true]]:ring-destructive/20 dark:[&_input[aria-invalid=true]]:ring-destructive/40", "[&_input::placeholder]:text-muted-foreground"),
+						children: /* @__PURE__ */ jsx(McpAddFormPrimitive.AuthFields, {})
+					})]
+				}),
+				/* @__PURE__ */ jsx(McpAddFormPrimitive.Error, { className: "text-destructive text-xs" }),
+				/* @__PURE__ */ jsxs("div", {
+					className: "flex justify-end gap-2",
+					children: [/* @__PURE__ */ jsx(McpAddFormPrimitive.Cancel, {
+						type: "button",
+						className: cn(buttonVariants({
+							variant: "ghost",
+							size: "sm"
+						})),
+						children: "Cancel"
+					}), /* @__PURE__ */ jsx(McpAddFormPrimitive.Submit, {
+						type: "submit",
+						className: cn(buttonVariants({ size: "sm" })),
+						children: "Add server"
+					})]
+				})
+			]
+		})
+	});
+};
+const FormRow = ({ label, htmlFor, children }) => /* @__PURE__ */ jsxs("div", {
+	className: "flex flex-col gap-1.5",
+	children: [/* @__PURE__ */ jsx(Label, {
+		className: "text-xs",
+		htmlFor,
+		children: label
+	}), /* @__PURE__ */ jsx("div", {
+		className: "flex flex-col gap-2",
+		children
+	})]
+});
+//#endregion
+export { McpConfigDialog, mcp_config_aui_exports };

package/dist/components/assistant-ui/elements/mcp-server-panel.d.ts

@@ -0,0 +1,20 @@
+import { ComponentProps } from "react";
+declare namespace mcp_server_panel_d_exports {
+  export { McpServer, McpServerPanel, McpServerStatus };
+}
+export type McpServerStatus = "connected" | "connecting" | "needs-auth" | "failed";
+export interface McpServer {
+  id: string;
+  name: string;
+  transport: string;
+  status: McpServerStatus;
+  tools: readonly string[];
+}
+export declare function McpServerPanel({ servers, expandedId, onToggle, onAuthorize, className, ...props }: Omit<ComponentProps<"div">, "children" | "servers" | "expandedId" | "onToggle" | "onAuthorize"> & {
+  servers: readonly McpServer[];
+  expandedId?: string;
+  onToggle?: (id: string) => void;
+  onAuthorize?: (id: string) => void;
+}): import("react").JSX.Element;
+//#endregion
+export { mcp_server_panel_d_exports };