@mcp-b/react-components 0.45.0 → 0.46.0

package/dist/{AgentChat-Bibfj7u1.d.ts → AgentChat-BLmQghkt.d.ts}

@@ -1,6 +1,6 @@
 import { i as AgentMessageRenderPartContext } from "./AgentMessageParts-C7L-Mv9U.js";
 import { n as AgentChatStartScreenProps } from "./AgentChatStartScreen-Bkv7Avni.js";
-import { D as PromptInputCommandDefinition, F as PromptInputDictationProps, K as PromptInputMessage, M as PromptInputContextSelectorProps, Q as PromptInputReference, n as PermissionMode } from "./PromptInput-BRX7FhjH.js";
+import { D as PromptInputCommandDefinition, F as PromptInputDictationProps, K as PromptInputMessage, M as PromptInputContextSelectorProps, Q as PromptInputReference, n as PermissionMode } from "./PromptInput-DtJHyp0S.js";
 import * as React from "react";
 import { ChatAddToolApproveResponseFunction, ChatStatus, UIMessage } from "ai";
 import { PendingApproval, Think } from "@cloudflare/think";
@@ -138,7 +138,7 @@ interface AgentChatProps<MessageT extends UIMessage = UIMessage> {
   onCompact?: () => Promise<{
     compacted: boolean;
   }>;
-  /** Controlled MCP catalog revealed by `@`; selections become composer references. */
+  /** Controlled MCP or tab catalog revealed by `@`; selections become composer links. */
   mentionCommands?: {
     items: readonly PromptInputCommandDefinition[];
     onSelect?: (command: PromptInputCommandDefinition, draft: AgentChatComposerDraft) => void;

package/dist/{CodeBlock-8K1p1BDU.js → CodeBlock-BpooTofO.js}

@@ -1,6 +1,6 @@
 import { t as cx } from "./class-names-BiMDVpUo.js";
 import { Select } from "./components/foundations/Select.js";
-import { t as CopyButton } from "./copy-button-BpA7wQva.js";
+import { t as CopyButton } from "./copy-button-D7ySsRRo.js";
 import * as React from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { createHighlighter } from "shiki";

package/dist/{FileTree-QTP57Qz4.js → FileTree-CAXWXH63.js}

@@ -1,5 +1,5 @@
 import { t as cx } from "./class-names-BiMDVpUo.js";
-import { C as FolderIcon, S as FileIcon, p as ChevronRightIcon, w as FolderOpenIcon } from "./icons-DbrksZyY.js";
+import { C as FolderIcon, S as FileIcon, p as ChevronRightIcon, w as FolderOpenIcon } from "./icons-BNEY4gO5.js";
 import { t as NavigationLink } from "./navigation-link-kqMa81v5.js";
 import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";

package/dist/{McpConnectorForm-MRm1r59e.d.ts → McpConnectorForm-BETdVBRk.d.ts}

@@ -1,4 +1,4 @@
-import { d as McpServerSetupAuthFieldName, l as McpServerSetupAuth } from "./mcp-server-catalog-CCj2ItkV.js";
+import { d as McpServerSetupAuthFieldName, l as McpServerSetupAuth } from "./mcp-server-catalog-Cbu483Zb.js";
 import * as React from "react";
 
 //#region src/components/agents-sdk/McpConnectorForm.d.ts

package/dist/{McpPluginCatalog-mbGw8FTu.d.ts → McpPluginCatalog-C6ip9IvL.d.ts}

@@ -1,5 +1,5 @@
-import { o as McpServerCard } from "./mcp-server-catalog-CCj2ItkV.js";
-import { r as McpConnectorFormValues } from "./McpConnectorForm-MRm1r59e.js";
+import { o as McpServerCard } from "./mcp-server-catalog-Cbu483Zb.js";
+import { r as McpConnectorFormValues } from "./McpConnectorForm-BETdVBRk.js";
 import { l as DialogProps } from "./Dialog-B_FhRWaz.js";
 import * as React from "react";
 import { MCPServersState } from "agents";

package/dist/{PromptInput-BRX7FhjH.d.ts → PromptInput-DtJHyp0S.d.ts}

@@ -442,13 +442,20 @@ declare function PromptInputTabLabel({
 }: PromptInputTabLabelProps & {
   ref?: React.Ref<HTMLHeadingElement>;
 }): React.JSX.Element;
-interface PromptInputTabItemProps extends React.HTMLAttributes<HTMLDivElement> {}
+interface PromptInputTabItemProps extends React.HTMLAttributes<HTMLElement> {
+  /** When set, the row is a composer entity link rather than a static tab row. */
+  href?: string;
+  icon?: React.ReactNode;
+}
 declare function PromptInputTabItem({
   className,
+  href,
+  icon,
+  children,
   ref,
   ...props
 }: PromptInputTabItemProps & {
-  ref?: React.Ref<HTMLDivElement>;
+  ref?: React.Ref<HTMLElement>;
 }): React.JSX.Element;
 interface PromptInputCommandDefinition {
   /** Stable identity for keyed rendering. */
@@ -458,6 +465,10 @@ interface PromptInputCommandDefinition {
   label: string;
   description?: string;
   icon?: React.ReactNode;
+  /** Persistable mark used when the command is inserted as a composer link. */
+  iconSrc?: string;
+  /** Optional explicit composer href. Derived from the trigger when omitted. */
+  href?: string;
   keywords?: readonly string[];
   disabled?: boolean;
   group?: string;
@@ -470,12 +481,15 @@ interface PromptInputReference {
   value: string;
   label: string;
   icon?: React.ReactNode;
+  iconSrc?: string;
+  href?: string;
   /** Records which picker produced the reference. */
   trigger?: PromptInputCommandTrigger;
 }
+declare function composerLinksToReferences(text: string): PromptInputReference[];
 interface PromptInputCommandComposerProps extends Omit<PromptInputTextareaProps, "value" | "defaultValue" | "onChange"> {
   commands: readonly PromptInputCommandDefinition[];
-  /** MCP or other mentionable entries revealed by an `@` draft. */
+  /** MCP, tab, or other mentionable entries revealed by an `@` draft. */
   mentionCommands?: readonly PromptInputCommandDefinition[];
   value: string;
   onValueChange: (value: string) => void;
@@ -484,8 +498,8 @@ interface PromptInputCommandComposerProps extends Omit<PromptInputTextareaProps,
   mentionEmptyMessage?: React.ReactNode;
 }
 /**
- * Controlled PromptInput textarea with slash-command discovery. The host owns
- * both the command catalog and the draft policy applied after selection.
+ * Controlled composer field with slash-command and mention discovery.
+ * Selection inserts a special href into the draft — not a chip button.
  */
 declare function PromptInputCommandComposer({
   commands,
@@ -497,24 +511,15 @@ declare function PromptInputCommandComposer({
   mentionEmptyMessage,
   onKeyDown,
   ref,
-  ...textareaProps
-}: PromptInputCommandComposerProps & {
-  ref?: React.Ref<HTMLTextAreaElement>;
-}): React.JSX.Element;
-interface PromptInputReferencesProps extends React.HTMLAttributes<HTMLDivElement> {
-  references: readonly PromptInputReference[];
-  onRemove: (reference: PromptInputReference) => void;
-}
-/** Removable inline context selected from slash-command or mention pickers. */
-declare function PromptInputReferences({
-  references,
-  onRemove,
+  placeholder,
+  disabled,
   className,
-  ref,
-  ...props
-}: PromptInputReferencesProps & {
+  minHeight,
+  maxHeight,
+  "aria-label": ariaLabel
+}: PromptInputCommandComposerProps & {
   ref?: React.Ref<HTMLDivElement>;
-}): React.JSX.Element | null;
+}): React.JSX.Element;
 interface PromptInputContextItem {
   /** Exact host identifier or path preserved through selection. */
   value: string;
@@ -545,4 +550,4 @@ declare function PromptInputContextSelector({
   action
 }: PromptInputContextSelectorProps): React.JSX.Element;
 //#endregion
-export { PromptInputReferences as $, PromptInputContextItem as A, PromptInputHoverCard as B, PromptInputButtonProps as C, usePromptInputAttachments as Ct, PromptInputCommandDefinition as D, PromptInputCommandComposerProps as E, PromptInputDictationProps as F, PromptInputHoverCardTriggerProps as G, PromptInputHoverCardContentProps as H, PromptInputFooter as I, PromptInputPermissionSelectorProps as J, PromptInputMessage as K, PromptInputFooterProps as L, PromptInputContextSelectorProps as M, PromptInputControllerProps as N, PromptInputCommandTrigger as O, PromptInputDictation as P, PromptInputReference as Q, PromptInputHeader as R, PromptInputButton as S, TooltipSide as St, PromptInputCommandComposer as T, useProviderAttachments as Tt, PromptInputHoverCardProps as U, PromptInputHoverCardContent as V, PromptInputHoverCardTrigger as W, PromptInputProvider as X, PromptInputProps as Y, PromptInputProviderProps as Z, PromptInputAttachmentProps as _, PromptInputTooltipConfig as _t, PromptInputActionAddAttachmentsProps as a, PromptInputTabBodyProps as at, PromptInputBody as b, PromptInputVoiceInput as bt, PromptInputActionMenu as c, PromptInputTabLabel as ct, PromptInputActionMenuItem as d, PromptInputTabsList as dt, PromptInputReferencesProps as et, PromptInputActionMenuItemProps as f, PromptInputTabsListProps as ft, PromptInputAttachment as g, PromptInputToolsProps as gt, PromptInputActionMenuTriggerProps as h, PromptInputTools as ht, PromptInputActionAddAttachments as i, PromptInputTabBody as it, PromptInputContextSelector as j, PromptInputContextAction as k, PromptInputActionMenuContent as l, PromptInputTabLabelProps as lt, PromptInputActionMenuTrigger as m, PromptInputTextareaProps as mt, PermissionMode as n, PromptInputSubmitProps as nt, PromptInputActionAddScreenshot as o, PromptInputTabItem as ot, PromptInputActionMenuProps as p, PromptInputTextarea as pt, PromptInputPermissionSelector as q, PromptInput as r, PromptInputTab as rt, PromptInputActionAddScreenshotProps as s, PromptInputTabItemProps as st, AttachmentsContext as t, PromptInputSubmit as tt, PromptInputActionMenuContentProps as u, PromptInputTabProps as ut, PromptInputAttachments as v, PromptInputTray as vt, PromptInputButtonTooltip as w, usePromptInputController as wt, PromptInputBodyProps as x, TextInputContext as xt, PromptInputAttachmentsProps as y, PromptInputTrayProps as yt, PromptInputHeaderProps as z };
+export { PromptInputSubmit as $, PromptInputContextItem as A, PromptInputHoverCard as B, PromptInputButtonProps as C, usePromptInputController as Ct, PromptInputCommandDefinition as D, PromptInputCommandComposerProps as E, PromptInputDictationProps as F, PromptInputHoverCardTriggerProps as G, PromptInputHoverCardContentProps as H, PromptInputFooter as I, PromptInputPermissionSelectorProps as J, PromptInputMessage as K, PromptInputFooterProps as L, PromptInputContextSelectorProps as M, PromptInputControllerProps as N, PromptInputCommandTrigger as O, PromptInputDictation as P, PromptInputReference as Q, PromptInputHeader as R, PromptInputButton as S, usePromptInputAttachments as St, PromptInputCommandComposer as T, PromptInputHoverCardProps as U, PromptInputHoverCardContent as V, PromptInputHoverCardTrigger as W, PromptInputProvider as X, PromptInputProps as Y, PromptInputProviderProps as Z, PromptInputAttachmentProps as _, PromptInputTrayProps as _t, PromptInputActionAddAttachmentsProps as a, PromptInputTabItemProps as at, PromptInputBody as b, TooltipSide as bt, PromptInputActionMenu as c, PromptInputTabProps as ct, PromptInputActionMenuItem as d, PromptInputTextarea as dt, PromptInputSubmitProps as et, PromptInputActionMenuItemProps as f, PromptInputTextareaProps as ft, PromptInputAttachment as g, PromptInputTray as gt, PromptInputActionMenuTriggerProps as h, PromptInputTooltipConfig as ht, PromptInputActionAddAttachments as i, PromptInputTabItem as it, PromptInputContextSelector as j, PromptInputContextAction as k, PromptInputActionMenuContent as l, PromptInputTabsList as lt, PromptInputActionMenuTrigger as m, PromptInputToolsProps as mt, PermissionMode as n, PromptInputTabBody as nt, PromptInputActionAddScreenshot as o, PromptInputTabLabel as ot, PromptInputActionMenuProps as p, PromptInputTools as pt, PromptInputPermissionSelector as q, PromptInput as r, PromptInputTabBodyProps as rt, PromptInputActionAddScreenshotProps as s, PromptInputTabLabelProps as st, AttachmentsContext as t, PromptInputTab as tt, PromptInputActionMenuContentProps as u, PromptInputTabsListProps as ut, PromptInputAttachments as v, PromptInputVoiceInput as vt, PromptInputButtonTooltip as w, useProviderAttachments as wt, PromptInputBodyProps as x, composerLinksToReferences as xt, PromptInputAttachmentsProps as y, TextInputContext as yt, PromptInputHeaderProps as z };

package/dist/{SetupChecklist-CZeToAbu.js → SetupChecklist-DyPZWzK2.js}

@@ -1,5 +1,5 @@
 import { n as mergeBaseClassName } from "./class-names-BiMDVpUo.js";
-import { V as PlusIcon, d as CheckIcon, et as WarningIcon, f as ChevronDownIcon } from "./icons-DbrksZyY.js";
+import { V as PlusIcon, d as CheckIcon, et as WarningIcon, f as ChevronDownIcon } from "./icons-BNEY4gO5.js";
 import { Button } from "./components/foundations/Button.js";
 import { Menu } from "./components/foundations/Menu.js";
 import * as React from "react";
@@ -57,7 +57,7 @@ function SetupChecklistAction({ actionLabel, label, entries, onSelect }) {
 		type: "button",
 		variant: "ghost",
 		color: "neutral",
-		size: "md",
+		size: "sm",
 		"aria-label": `${actionLabel} — ${completed} of ${entries.length} set up`,
 		render: /* @__PURE__ */ jsx(Menu.Trigger, { unstyled: true }),
 		children: [completed === entries.length ? /* @__PURE__ */ jsx(CheckIcon, { "aria-hidden": "true" }) : /* @__PURE__ */ jsx(WarningIcon, { "aria-hidden": "true" }), /* @__PURE__ */ jsx("span", { children: actionLabel })]

package/dist/{ThinkChat-CWMcl79Q.js → ThinkChat-qztQ6Clo.js}

@@ -1,3 +1,4 @@
+import { composerDraftToPrompt, parseComposerLinks } from "./utils/composer-link.js";
 import { TransitionSurface } from "./components/foundations/TransitionSurface.js";
 import { AgentToolRunsProvider, useSourceScopedAgentToolEvents } from "./components/agents-sdk/AgentToolRunsContext.js";
 import { AgentChat, compactingNotice } from "./components/agents-sdk/AgentChat.js";
@@ -259,7 +260,9 @@ function ThinkChatMessages({ draft, loading, renderPart, excludeTools, renderAge
 	const recoveryActive = chat && (chat.isRecovering || chat.connectionError || chat.error);
 	const submit = ({ text, files, references }, send) => {
 		setDismissedCompaction(sessionCompaction?.lastCompaction ?? null);
-		const prompt = [...references?.map(({ trigger, value }) => trigger ? `${trigger}${value}` : value) ?? [], text.trim()].filter(Boolean).join(" ");
+		const fromLinks = composerDraftToPrompt(text);
+		const referenceTokens = references?.map(({ trigger, value }) => trigger ? `${trigger}${value}` : value) ?? [];
+		const prompt = parseComposerLinks(text).length ? fromLinks : [...referenceTokens, text.trim()].filter(Boolean).join(" ");
 		if (!prompt && !files.length) return;
 		return send({
 			text: prompt,

package/dist/{ThinkChatActivity-CgvmTXXB.d.ts → ThinkChatActivity-B3lGVS-6.d.ts}

@@ -1,5 +1,5 @@
 import { i as AgentMessageRenderPartContext } from "./AgentMessageParts-C7L-Mv9U.js";
-import { r as AgentChatProps } from "./AgentChat-Bibfj7u1.js";
+import { r as AgentChatProps } from "./AgentChat-BLmQghkt.js";
 import { l as ThinkChatPart } from "./ThinkChatToolParts-D4qcnnxt.js";
 import { t as ThinkChatActivityDescription } from "./ThinkChatActivitySummary-BtBQgMg6.js";
 import * as React from "react";

package/dist/{WorkspaceFileView-DJ8Oxz57.js → WorkspaceFileView-BvDbKM2c.js}

@@ -1,6 +1,6 @@
-import { b as EyeIcon, d as CheckIcon, et as WarningIcon, k as MaximizeIcon, m as CodeIcon, r as ArrowLeftIcon, v as DownloadIcon } from "./icons-DbrksZyY.js";
+import { b as EyeIcon, d as CheckIcon, et as WarningIcon, k as MaximizeIcon, m as CodeIcon, r as ArrowLeftIcon, v as DownloadIcon } from "./icons-BNEY4gO5.js";
 import { i as formatClock } from "./format-COCyV98Z.js";
-import { a as CodeBlockCopyButton, i as CodeBlockContent, r as CodeBlockContainer, t as CodeBlock } from "./CodeBlock-8K1p1BDU.js";
+import { a as CodeBlockCopyButton, i as CodeBlockContent, r as CodeBlockContainer, t as CodeBlock } from "./CodeBlock-BpooTofO.js";
 import { AppTopBar } from "./components/general-purpose/AppTopBar.js";
 import { inferWorkspaceLanguage, inferWorkspaceMedia, isWorkspaceMarkdownPath, isWorkspaceSkillPath, parseWorkspaceSkill } from "./components/agents-sdk/WorkspaceFile.js";
 import { c as useWorkspaceNavigationContext, s as useWorkspaceNavigationRestoration } from "./WorkspaceLink-DtH66bAY.js";

package/dist/components/agents-sdk/AgentActivity.js

@@ -1,5 +1,5 @@
 import { canRequestFavicon, inferFaviconUrl } from "../../utils/favicon.js";
-import { D as LinkIcon, P as MonitorIcon, Q as TerminalIcon, S as FileIcon, T as InfoIcon, W as SearchIcon, et as WarningIcon, tt as WrenchIcon, z as PencilIcon } from "../../icons-DbrksZyY.js";
+import { D as LinkIcon, P as MonitorIcon, Q as TerminalIcon, S as FileIcon, T as InfoIcon, W as SearchIcon, et as WarningIcon, tt as WrenchIcon, z as PencilIcon } from "../../icons-BNEY4gO5.js";
 import * as React from "react";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/agents-sdk/AgentActivity.tsx

package/dist/components/agents-sdk/AgentChat.d.ts

@@ -1,2 +1,2 @@
-import { a as PermissionModeControl, i as AgentChatRenderMessageContext, n as AgentChatComposerDraft, o as compactingNotice, r as AgentChatProps, t as AgentChat } from "../../AgentChat-Bibfj7u1.js";
+import { a as PermissionModeControl, i as AgentChatRenderMessageContext, n as AgentChatComposerDraft, o as compactingNotice, r as AgentChatProps, t as AgentChat } from "../../AgentChat-BLmQghkt.js";
 export { AgentChat, AgentChatComposerDraft, AgentChatProps, AgentChatRenderMessageContext, PermissionModeControl, compactingNotice };

package/dist/components/agents-sdk/AgentChat.js

@@ -1,16 +1,17 @@
+import { replaceComposerTrigger } from "../../utils/composer-link.js";
 import { t as cx } from "../../class-names-BiMDVpUo.js";
 import { ExpansionStateProvider } from "../ai-sdk/ExpansionState.js";
-import { $ as TrashIcon, H as QueueIcon, I as MoveToFrontIcon, U as RefreshIcon, V as PlusIcon, q as SpinnerIcon, t as ArchiveIcon, z as PencilIcon } from "../../icons-DbrksZyY.js";
+import { $ as TrashIcon, H as QueueIcon, I as MoveToFrontIcon, U as RefreshIcon, V as PlusIcon, q as SpinnerIcon, t as ArchiveIcon, z as PencilIcon } from "../../icons-BNEY4gO5.js";
 import { Button } from "../foundations/Button.js";
 import { AgentChatMessageEditor } from "../ai-sdk/AgentChatMessageEditor.js";
 import { IconButton } from "../foundations/IconButton.js";
 import { Menu } from "../foundations/Menu.js";
-import { PromptInput, PromptInputActionAddAttachments, PromptInputActionMenu, PromptInputActionMenuContent, PromptInputActionMenuTrigger, PromptInputAttachments, PromptInputBody, PromptInputButton, PromptInputCommandComposer, PromptInputContextSelector, PromptInputDictation, PromptInputFooter, PromptInputHeader, PromptInputPermissionSelector, PromptInputReferences, PromptInputSubmit, PromptInputTextarea, PromptInputTools, PromptInputTray, usePromptInputAttachments } from "../ai-sdk/PromptInput.js";
+import { PromptInput, PromptInputActionAddAttachments, PromptInputActionMenu, PromptInputActionMenuContent, PromptInputActionMenuTrigger, PromptInputAttachments, PromptInputBody, PromptInputButton, PromptInputCommandComposer, PromptInputContextSelector, PromptInputDictation, PromptInputFooter, PromptInputHeader, PromptInputPermissionSelector, PromptInputSubmit, PromptInputTextarea, PromptInputTools, PromptInputTray, composerLinksToReferences, usePromptInputAttachments } from "../ai-sdk/PromptInput.js";
 import { AgentChatStartScreen } from "../ai-sdk/AgentChatStartScreen.js";
 import { Message, MessageAction, MessageActions, MessageMeta, MessageTimestamp } from "../ai-sdk/Message.js";
 import { AgentMessageParts } from "../ai-sdk/AgentMessageParts.js";
 import { Marker, MarkerContent } from "../foundations/Marker.js";
-import { t as CopyButton } from "../../copy-button-BpA7wQva.js";
+import { t as CopyButton } from "../../copy-button-D7ySsRRo.js";
 import { Context, ContextContent, ContextContentBody, ContextContentHeader, ContextTrigger, getContextUsage, getContextUsedTokens } from "../ai-sdk/Context.js";
 import { VirtualMessageScroller } from "../ai-sdk/MessageScrollerVirtual.js";
 import { QueueItem, QueueItemActions, QueueItemContent } from "../ai-sdk/Queue.js";
@@ -280,7 +281,6 @@ function AgentChat({ className, messages, status = "ready", onSubmit, showCompos
 	const disabled = composerDisabled || loading;
 	const [copyAnnouncement, setCopyAnnouncement] = React.useState("");
 	const [composerDraft, setComposerDraft] = React.useState("");
-	const [composerReferences, setComposerReferences] = React.useState([]);
 	const composerInputRef = React.useRef(null);
 	const restoreComposerFocusAfterApproval = React.useRef(false);
 	const respondToPendingApproval = React.useCallback((response) => {
@@ -298,10 +298,20 @@ function AgentChat({ className, messages, status = "ready", onSubmit, showCompos
 	const [compactionState, setCompactionState] = React.useState(null);
 	const compactionInFlight = React.useRef(false);
 	const addComposerReference = React.useCallback((reference) => {
-		setComposerReferences((current) => current.some((item) => item.id === reference.id && item.trigger === reference.trigger) ? current : [...current, reference]);
+		setComposerDraft((current) => {
+			if (composerLinksToReferences(current).some((item) => item.id === reference.id && item.trigger === reference.trigger)) return current;
+			return replaceComposerTrigger(current, {
+				id: reference.id,
+				value: reference.value,
+				label: reference.label,
+				href: reference.href,
+				iconSrc: reference.iconSrc
+			}, reference.trigger ?? "/");
+		});
 	}, []);
 	const removeComposerReference = React.useCallback((reference) => {
-		setComposerReferences((current) => current.filter((item) => item.id !== reference.id || item.trigger !== reference.trigger));
+		if (!reference.href) return;
+		setComposerDraft((current) => current.replace(`[${reference.label}](${reference.href})`, "").replace(/\s{2,}/g, " "));
 	}, []);
 	const copyAnnouncementTimer = React.useRef(null);
 	const announceCopyStatus = React.useCallback((message) => {
@@ -316,13 +326,15 @@ function AgentChat({ className, messages, status = "ready", onSubmit, showCompos
 		if (copyAnnouncementTimer.current !== null) window.clearTimeout(copyAnnouncementTimer.current);
 	}, []);
 	const handleSubmit = React.useCallback((message) => {
+		const text = message.text || composerDraft;
+		const references = composerLinksToReferences(text);
 		const prompt = {
 			...message,
-			...composerReferences.length ? { references: composerReferences } : {}
+			text,
+			...references.length ? { references } : {}
 		};
 		setQueueHeld(false);
 		setComposerDraft("");
-		setComposerReferences([]);
 		setCompactionState(null);
 		if (busy || pendingPrompts.length && !queueHeld) {
 			setPendingPrompts((current) => [...current, {
@@ -335,7 +347,7 @@ function AgentChat({ className, messages, status = "ready", onSubmit, showCompos
 		return onSubmit?.(prompt);
 	}, [
 		busy,
-		composerReferences,
+		composerDraft,
 		onPromptQueued,
 		onSubmit,
 		pendingPrompts.length,
@@ -374,30 +386,20 @@ function AgentChat({ className, messages, status = "ready", onSubmit, showCompos
 			});
 			return;
 		}
-		const reference = {
-			id: command.id,
-			value: command.value,
-			label: command.label,
-			icon: command.icon,
-			trigger
-		};
-		const nextReferences = composerReferences.some((item) => item.id === reference.id && item.trigger === reference.trigger) ? composerReferences : [...composerReferences, reference];
-		addComposerReference(reference);
-		const catalog = trigger === "@" ? mentionCommands : slashCommands;
-		if (catalog?.onSelect) catalog.onSelect(command, {
-			value: composerDraft,
+		const nextDraft = replaceComposerTrigger(composerDraft, command, trigger);
+		const nextReferences = composerLinksToReferences(nextDraft);
+		(trigger === "@" ? mentionCommands : slashCommands)?.onSelect?.(command, {
+			value: nextDraft,
 			references: nextReferences,
 			setValue: setComposerDraft,
 			clear: () => setComposerDraft(""),
 			addReference: addComposerReference,
 			removeReference: removeComposerReference
 		});
-		else setComposerDraft("");
 	}, [
 		addComposerReference,
 		busy,
 		composerDraft,
-		composerReferences,
 		mentionCommands,
 		onCompact,
 		removeComposerReference,
@@ -619,13 +621,10 @@ function AgentChat({ className, messages, status = "ready", onSubmit, showCompos
 				}) : /* @__PURE__ */ jsxs(Fragment, { children: [
 					composerHeader ? /* @__PURE__ */ jsx(PromptInputHeader, { children: composerHeader }) : null,
 					/* @__PURE__ */ jsx(PromptInputAttachments, {}),
-					/* @__PURE__ */ jsxs(PromptInputBody, { children: [/* @__PURE__ */ jsx(PromptInputReferences, {
-						references: composerReferences,
-						onRemove: removeComposerReference
-					}), slashCommands || mentionCommands || onCompact ? /* @__PURE__ */ jsx(PromptInputCommandComposer, {
+					/* @__PURE__ */ jsx(PromptInputBody, { children: slashCommands || mentionCommands || onCompact ? /* @__PURE__ */ jsx(PromptInputCommandComposer, {
 						ref: composerInputRef,
 						"aria-label": "Message",
-						placeholder: composerReferences.length ? "" : placeholder,
+						placeholder,
 						disabled,
 						commands: onCompact && !busy ? [COMPACT_SLASH_COMMAND, ...slashCommands?.items ?? []] : slashCommands?.items ?? [],
 						mentionCommands: mentionCommands?.items,
@@ -639,7 +638,7 @@ function AgentChat({ className, messages, status = "ready", onSubmit, showCompos
 						disabled,
 						value: composerDraft,
 						onChange: (event) => setComposerDraft(event.currentTarget.value)
-					})] }),
+					}) }),
 					/* @__PURE__ */ jsxs(PromptInputFooter, { children: [/* @__PURE__ */ jsxs(PromptInputTools, { children: [
 						/* @__PURE__ */ jsx(AgentChatAddMenu, { children: composerAddMenuItems }),
 						contextSelector ? /* @__PURE__ */ jsx(PromptInputContextSelector, { ...contextSelector }) : null,
@@ -668,7 +667,7 @@ function AgentChat({ className, messages, status = "ready", onSubmit, showCompos
 								status,
 								onStop: handleStop,
 								disabled,
-								hasDraft: Boolean(composerDraft.trim() || composerReferences.length)
+								hasDraft: Boolean(composerDraft.trim())
 							})
 						]
 					})] })

package/dist/components/agents-sdk/BrowserLiveScreen.js

@@ -1,4 +1,4 @@
-import { E as KeyboardIcon, U as RefreshIcon, r as ArrowLeftIcon } from "../../icons-DbrksZyY.js";
+import { E as KeyboardIcon, U as RefreshIcon, r as ArrowLeftIcon } from "../../icons-BNEY4gO5.js";
 import { Button } from "../foundations/Button.js";
 import { WebPreviewNavigationButton } from "../general-purpose/WebPreview.js";
 import { BrowserLiveView } from "./BrowserLiveView.js";

package/dist/components/agents-sdk/BrowserLiveView.js

@@ -1,5 +1,5 @@
 import { t as cx } from "../../class-names-BiMDVpUo.js";
-import { _ as DotIcon, k as MaximizeIcon, q as SpinnerIcon } from "../../icons-DbrksZyY.js";
+import { _ as DotIcon, k as MaximizeIcon, q as SpinnerIcon } from "../../icons-BNEY4gO5.js";
 import { Button } from "../foundations/Button.js";
 import { Dialog } from "../foundations/Dialog.js";
 import { TransitionSurface } from "../foundations/TransitionSurface.js";

package/dist/components/agents-sdk/BrowserReplay.js

@@ -1,5 +1,5 @@
 import { t as cx } from "../../class-names-BiMDVpUo.js";
-import { B as PlayIcon, R as PauseIcon } from "../../icons-DbrksZyY.js";
+import { B as PlayIcon, R as PauseIcon } from "../../icons-BNEY4gO5.js";
 import { IconButton } from "../foundations/IconButton.js";
 import { i as formatClock } from "../../format-COCyV98Z.js";
 import { EmptyState } from "../foundations/EmptyState.js";

package/dist/components/agents-sdk/BrowserRunPanel.js

@@ -1,5 +1,5 @@
 import { t as cx } from "../../class-names-BiMDVpUo.js";
-import { nt as XIcon, q as SpinnerIcon } from "../../icons-DbrksZyY.js";
+import { nt as XIcon, q as SpinnerIcon } from "../../icons-BNEY4gO5.js";
 import { Tabs } from "../foundations/Tabs.js";
 import { WebPreview, WebPreviewNavigation, WebPreviewNavigationButton, WebPreviewUrl } from "../general-purpose/WebPreview.js";
 import { BrowserLiveView } from "./BrowserLiveView.js";

package/dist/components/agents-sdk/ManagerOffice.d.ts

@@ -72,7 +72,8 @@ interface ManagerOfficeChannel {
   detail?: string;
   /**
    * App-owned service mark. Products know their own integrations, so the mark
-   * comes from them; the package draws the first letter when none is supplied.
+   * comes from them. When omitted, a catalog plugin mark is used when the
+   * channel name matches a known connector; otherwise the first letter.
    */
   icon?: React.ReactNode;
 }

package/dist/components/agents-sdk/ManagerOffice.js

@@ -1,13 +1,15 @@
+import { getMcpServerIconSrc } from "../../utils/mcp-server-catalog.js";
 import { t as cx } from "../../class-names-BiMDVpUo.js";
 import { Collapsible } from "../foundations/Collapsible.js";
-import { B as PlayIcon, C as FolderIcon, D as LinkIcon, P as MonitorIcon, R as PauseIcon, T as InfoIcon, U as RefreshIcon, V as PlusIcon, _ as DotIcon, a as ArrowUpIcon, b as EyeIcon, d as CheckIcon, et as WarningIcon, f as ChevronDownIcon, j as MessageSquareIcon, n as ArrowDownIcon, nt as XIcon, p as ChevronRightIcon, q as SpinnerIcon, u as CalendarIcon, v as DownloadIcon, z as PencilIcon } from "../../icons-DbrksZyY.js";
+import { B as PlayIcon, C as FolderIcon, D as LinkIcon, P as MonitorIcon, R as PauseIcon, T as InfoIcon, U as RefreshIcon, V as PlusIcon, _ as DotIcon, a as ArrowUpIcon, b as EyeIcon, d as CheckIcon, et as WarningIcon, f as ChevronDownIcon, j as MessageSquareIcon, n as ArrowDownIcon, nt as XIcon, p as ChevronRightIcon, q as SpinnerIcon, u as CalendarIcon, v as DownloadIcon, z as PencilIcon } from "../../icons-BNEY4gO5.js";
 import { Button } from "../foundations/Button.js";
 import { AgentAttention, AgentAttentionActions, AgentAttentionBody, AgentAttentionHeader } from "../ai-sdk/AgentAttention.js";
 import { Tooltip } from "../foundations/Tooltip.js";
 import { Menu } from "../foundations/Menu.js";
-import { Select } from "../foundations/Select.js";
 import { Avatar } from "../foundations/Avatar.js";
 import { AppIcon } from "../foundations/AppIcon.js";
+import { n as findCatalogMcpServerCard } from "../../mcp-server-7NR24ASj.js";
+import { Select } from "../foundations/Select.js";
 import { EmptyState } from "../foundations/EmptyState.js";
 import { LinkButton } from "../foundations/LinkButton.js";
 import "../foundations/icons.js";
@@ -385,6 +387,28 @@ const channelStatusLabels = {
 	"needs-auth": "Needs sign-in",
 	error: "Error"
 };
+function ChannelMark({ channel }) {
+	if (channel.icon) return /* @__PURE__ */ jsx("span", {
+		className: "manager-office__channel-mark",
+		children: channel.icon
+	});
+	const card = findCatalogMcpServerCard({
+		id: channel.id,
+		name: channel.name
+	});
+	const src = card ? getMcpServerIconSrc(card) : void 0;
+	if (src) return /* @__PURE__ */ jsx("span", {
+		className: "manager-office__channel-mark",
+		children: /* @__PURE__ */ jsx("img", {
+			alt: "",
+			className: "sigvelo-brand-mark sigvelo-brand-mark--colorful",
+			decoding: "async",
+			referrerPolicy: "no-referrer",
+			src
+		})
+	});
+	return /* @__PURE__ */ jsx(AppIcon.Fallback, { children: channel.name.slice(0, 1) });
+}
 function ChannelRow({ channel }) {
 	return /* @__PURE__ */ jsxs("li", {
 		className: "manager-office__channel",
@@ -393,10 +417,7 @@ function ChannelRow({ channel }) {
 			/* @__PURE__ */ jsx(AppIcon.Root, {
 				size: "sm",
 				"aria-hidden": "true",
-				children: channel.icon ? /* @__PURE__ */ jsx("span", {
-					className: "manager-office__channel-mark",
-					children: channel.icon
-				}) : /* @__PURE__ */ jsx(AppIcon.Fallback, { children: channel.name.slice(0, 1) })
+				children: /* @__PURE__ */ jsx(ChannelMark, { channel })
 			}),
 			/* @__PURE__ */ jsxs("span", {
 				className: "manager-office__identity",
@@ -777,10 +798,7 @@ function DashboardConnections({ employee }) {
 						"data-status": channel.status
 					}),
 					role: "img",
-					children: channel.icon ? /* @__PURE__ */ jsx("span", {
-						className: "manager-office__channel-mark",
-						children: channel.icon
-					}) : /* @__PURE__ */ jsx(AppIcon.Fallback, { children: channel.name.slice(0, 1) })
+					children: /* @__PURE__ */ jsx(ChannelMark, { channel })
 				}), /* @__PURE__ */ jsx(Tooltip.Portal, { children: /* @__PURE__ */ jsx(Tooltip.Positioner, {
 					side: "top",
 					sideOffset: 6,

package/dist/components/agents-sdk/McpConnectionRequest.d.ts

@@ -1,4 +1,4 @@
-import { o as McpServerCard } from "../../mcp-server-catalog-CCj2ItkV.js";
+import { o as McpServerCard } from "../../mcp-server-catalog-Cbu483Zb.js";
 import * as React from "react";
 import { DynamicToolUIPart, ToolUIPart } from "ai";
 import { MCPServersState } from "agents";

package/dist/components/agents-sdk/McpConnectionRequest.js

@@ -1,10 +1,10 @@
 import { t as cx } from "../../class-names-BiMDVpUo.js";
-import { A as McpIcon, d as CheckIcon, et as WarningIcon, q as SpinnerIcon } from "../../icons-DbrksZyY.js";
+import { d as CheckIcon, et as WarningIcon, q as SpinnerIcon } from "../../icons-BNEY4gO5.js";
 import { Button } from "../foundations/Button.js";
 import { AgentAttention, AgentAttentionActions, AgentAttentionBody, AgentAttentionHeader } from "../ai-sdk/AgentAttention.js";
 import { a as formatErrorMessage } from "../../format-COCyV98Z.js";
+import { r as getMcpServerProjection, t as McpServerIcon } from "../../mcp-server-7NR24ASj.js";
 import { DescriptionList } from "../foundations/DescriptionList.js";
-import { n as getMcpServerProjection } from "../../mcp-server-SD_S-IpB.js";
 import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { getToolPartState } from "@cloudflare/think/react";
@@ -80,7 +80,10 @@ function McpConnectionRequestContent({ part, server, reason, mcp: _mcp, serverId
 			role: failed ? "alert" : "status",
 			tone: failed ? "attention" : "neutral",
 			children: [/* @__PURE__ */ jsx(AgentAttentionHeader, {
-				icon: failed ? /* @__PURE__ */ jsx(WarningIcon, {}) : outcome === "connected" ? /* @__PURE__ */ jsx(CheckIcon, {}) : /* @__PURE__ */ jsx(McpIcon, {}),
+				icon: failed ? /* @__PURE__ */ jsx(WarningIcon, {}) : outcome === "connected" ? /* @__PURE__ */ jsx(CheckIcon, {}) : /* @__PURE__ */ jsx(McpServerIcon, {
+					server,
+					size: "xs"
+				}),
 				title: failed ? `Couldn’t connect ${server.name}` : declined ? `Skipped connecting ${server.name}` : outcome === "connected" ? `Connected to ${server.name}` : `Connection request completed for ${server.name}`
 			}), error ? /* @__PURE__ */ jsx(AgentAttentionBody, { children: /* @__PURE__ */ jsx("div", {
 				className: "mcp-connection-request__error",
@@ -103,7 +106,10 @@ function McpConnectionRequestContent({ part, server, reason, mcp: _mcp, serverId
 		children: [
 			/* @__PURE__ */ jsx(AgentAttentionHeader, {
 				description,
-				icon: preparing || connecting ? /* @__PURE__ */ jsx(SpinnerIcon, {}) : ready ? /* @__PURE__ */ jsx(CheckIcon, {}) : authorizing ? /* @__PURE__ */ jsx(McpIcon, {}) : reconnect ? /* @__PURE__ */ jsx(WarningIcon, {}) : /* @__PURE__ */ jsx(McpIcon, {}),
+				icon: preparing || connecting ? /* @__PURE__ */ jsx(SpinnerIcon, {}) : ready ? /* @__PURE__ */ jsx(CheckIcon, {}) : reconnect ? /* @__PURE__ */ jsx(WarningIcon, {}) : /* @__PURE__ */ jsx(McpServerIcon, {
+					server,
+					size: "xs"
+				}),
 				title
 			}),
 			/* @__PURE__ */ jsxs(AgentAttentionBody, {

package/dist/components/agents-sdk/McpConnectorForm.d.ts

@@ -1,2 +1,2 @@
-import { n as McpConnectorFormProps, r as McpConnectorFormValues, t as McpConnectorForm } from "../../McpConnectorForm-MRm1r59e.js";
+import { n as McpConnectorFormProps, r as McpConnectorFormValues, t as McpConnectorForm } from "../../McpConnectorForm-BETdVBRk.js";
 export { McpConnectorForm, McpConnectorFormProps, McpConnectorFormValues };

package/dist/components/agents-sdk/McpPluginCatalog.d.ts

@@ -1,2 +1,2 @@
-import { a as McpPluginDetailsDialogProps, i as McpPluginDetailsDialog, n as McpPluginCatalogProps, r as McpPluginDetails, t as McpPluginCatalog } from "../../McpPluginCatalog-mbGw8FTu.js";
+import { a as McpPluginDetailsDialogProps, i as McpPluginDetailsDialog, n as McpPluginCatalogProps, r as McpPluginDetails, t as McpPluginCatalog } from "../../McpPluginCatalog-C6ip9IvL.js";
 export { McpPluginCatalog, McpPluginCatalogProps, McpPluginDetails, McpPluginDetailsDialog, McpPluginDetailsDialogProps };

package/dist/components/agents-sdk/McpPluginCatalog.js

@@ -1,15 +1,15 @@
 import { CUSTOM_MCP_SERVER_CARD } from "../../utils/mcp-server-catalog.js";
 import { t as cx } from "../../class-names-BiMDVpUo.js";
-import { V as PlusIcon, et as WarningIcon, nt as XIcon, o as ArrowUpRightIcon, q as SpinnerIcon, y as EllipsisIcon } from "../../icons-DbrksZyY.js";
+import { V as PlusIcon, et as WarningIcon, nt as XIcon, o as ArrowUpRightIcon, q as SpinnerIcon, y as EllipsisIcon } from "../../icons-BNEY4gO5.js";
 import { Button } from "../foundations/Button.js";
 import { AgentAttention, AgentAttentionBody, AgentAttentionHeader } from "../ai-sdk/AgentAttention.js";
 import { IconButton } from "../foundations/IconButton.js";
 import { Dialog } from "../foundations/Dialog.js";
 import { a as formatErrorMessage } from "../../format-COCyV98Z.js";
-import { Separator } from "../foundations/Separator.js";
 import { AppIcon } from "../foundations/AppIcon.js";
+import { r as getMcpServerProjection, t as McpServerIcon } from "../../mcp-server-7NR24ASj.js";
+import { Separator } from "../foundations/Separator.js";
 import { SearchField } from "../foundations/SearchField.js";
-import { n as getMcpServerProjection, t as McpServerIcon } from "../../mcp-server-SD_S-IpB.js";
 import { McpServerSetupDialog } from "./McpServerPicker.js";
 import * as React from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
@@ -129,6 +129,7 @@ function McpPluginCatalog({ servers, mcp, detailsByServerId, featuredServerIds =
 /** Reference-derived plugin detail surface without a parallel install state. */
 function McpPluginDetailsDialog({ server, details, mcp, brandName = "your AI", brandLogo = /* @__PURE__ */ jsx("img", {
 	alt: "",
+	className: "sigvelo-brand-mark sigvelo-brand-mark--colorful",
 	src: new URL("../../assets/think-browser-host.png", import.meta.url).href,
 	width: 128,
 	height: 128
@@ -175,7 +176,7 @@ function McpPluginDetailsDialog({ server, details, mcp, brandName = "your AI", b
 							/* @__PURE__ */ jsx(Separator, { orientation: "vertical" }),
 							/* @__PURE__ */ jsx(AppIcon.Root, {
 								size: "xl",
-								variant: "contrast",
+								variant: "surface",
 								children: brandLogo
 							})
 						]
@@ -223,7 +224,10 @@ function McpPluginCard({ server, details, mcp, onSelect }) {
 			size: "xl",
 			variant: "ghost",
 			onClick: onSelect,
-			children: [/* @__PURE__ */ jsx(McpServerIcon, { server }), /* @__PURE__ */ jsxs("span", {
+			children: [/* @__PURE__ */ jsx(McpServerIcon, {
+				server,
+				size: "md"
+			}), /* @__PURE__ */ jsxs("span", {
 				className: "mcp-plugin-catalog__card-copy",
 				children: [/* @__PURE__ */ jsx("span", {
 					className: "mcp-plugin-catalog__card-name sigvelo-truncate",

package/dist/components/agents-sdk/McpServerPicker.d.ts

@@ -1,6 +1,6 @@
 import { s as MenuItemProps, t as Menu } from "../../Menu-yb6QXWA3.js";
-import { o as McpServerCard } from "../../mcp-server-catalog-CCj2ItkV.js";
-import { n as McpConnectorFormProps } from "../../McpConnectorForm-MRm1r59e.js";
+import { o as McpServerCard } from "../../mcp-server-catalog-Cbu483Zb.js";
+import { n as McpConnectorFormProps } from "../../McpConnectorForm-BETdVBRk.js";
 import { l as DialogProps } from "../../Dialog-B_FhRWaz.js";
 import * as React from "react";
 import { MCPServersState } from "agents";

package/dist/components/agents-sdk/McpServerPicker.js

@@ -1,11 +1,11 @@
 import { n as mergeBaseClassName } from "../../class-names-BiMDVpUo.js";
-import { N as MinusIcon, d as CheckIcon, et as WarningIcon, q as SpinnerIcon } from "../../icons-DbrksZyY.js";
+import { N as MinusIcon, d as CheckIcon, et as WarningIcon, q as SpinnerIcon } from "../../icons-BNEY4gO5.js";
 import { buttonVariants } from "../foundations/Button.js";
 import { Menu } from "../foundations/Menu.js";
 import { Dialog } from "../foundations/Dialog.js";
 import { a as formatErrorMessage } from "../../format-COCyV98Z.js";
+import { r as getMcpServerProjection, t as McpServerIcon } from "../../mcp-server-7NR24ASj.js";
 import { PromptInputActionMenu, PromptInputActionMenuContent, PromptInputActionMenuTrigger } from "../ai-sdk/PromptInput.js";
-import { n as getMcpServerProjection, t as McpServerIcon } from "../../mcp-server-SD_S-IpB.js";
 import { McpConnectorForm } from "./McpConnectorForm.js";
 import * as React from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";