@mcp-b/react-components 0.5.6 → 0.6.0

package/dist/components/Activity.d.ts

@@ -40,6 +40,8 @@ interface ActivityTriggerProps extends Omit<CollapsibleTriggerProps, "className"
   className?: string;
   /** Header text. Defaults to "Working…". */
   label?: React.ReactNode;
+  /** Optional leading icon for the header. */
+  icon?: React.ReactNode;
 }
 /**
  * Clickable header line that toggles the activity log. The label shimmers
@@ -48,6 +50,7 @@ interface ActivityTriggerProps extends Omit<CollapsibleTriggerProps, "className"
 declare function ActivityTrigger({
   className,
   label,
+  icon,
   children,
   ref,
   ...props

package/dist/components/Activity.js

@@ -38,7 +38,7 @@ function Activity({ className, isStreaming = false, defaultOpen = false, ref, ..
 * Clickable header line that toggles the activity log. The label shimmers
 * while the parent Activity is streaming.
 */
-function ActivityTrigger({ className, label = "Working…", children, ref, ...props }) {
+function ActivityTrigger({ className, label = "Working…", icon, children, ref, ...props }) {
 	if (children !== void 0 && children !== null) return /* @__PURE__ */ jsx(CollapsibleTrigger, {
 		ref,
 		className: cx("activity__trigger", className),
@@ -51,14 +51,22 @@ function ActivityTrigger({ className, label = "Working…", children, ref, ...pr
 		className: cx("activity__trigger", className),
 		...props,
 		unstyled: true,
-		children: [/* @__PURE__ */ jsx("span", {
-			className: "activity__trigger-label",
-			children: label
-		}), /* @__PURE__ */ jsx("span", {
-			className: "activity__trigger-icon",
-			"aria-hidden": "true",
-			children: /* @__PURE__ */ jsx(ChevronRightIcon, {})
-		})]
+		children: [
+			icon ? /* @__PURE__ */ jsx("span", {
+				className: "activity__item-icon",
+				"aria-hidden": "true",
+				children: icon
+			}) : null,
+			/* @__PURE__ */ jsx("span", {
+				className: "activity__trigger-label",
+				children: label
+			}),
+			/* @__PURE__ */ jsx("span", {
+				className: "activity__trigger-icon",
+				"aria-hidden": "true",
+				children: /* @__PURE__ */ jsx(ChevronRightIcon, {})
+			})
+		]
 	});
 }
 /** The collapsible log of ActivityItem children. */

package/dist/components/AgentConnection.d.ts

@@ -1,3 +1,4 @@
+import { McpServerCard } from "../utils/mcp-server-catalog.js";
 import * as React from "react";
 
 //#region src/components/AgentConnection.d.ts
@@ -24,8 +25,10 @@ type NanitesAgentConnectionOptions = {
 type AgentConnectionPanelProps = {
   readonly className?: string;
   readonly commands?: readonly AgentConnectionCommand[];
+  readonly dcrMcpServers?: readonly McpServerCard[];
   readonly defaultTarget?: AgentConnectionTarget;
   readonly headingLevel?: 2 | 3;
+  readonly manualMcpServers?: readonly McpServerCard[];
   readonly origin?: string;
   readonly section?: boolean;
 };
@@ -53,8 +56,10 @@ declare function buildNanitesAgentConnectionCommands(origin: string, {
 declare function AgentConnectionPanel({
   className,
   commands: commandsProp,
+  dcrMcpServers,
   defaultTarget,
   headingLevel,
+  manualMcpServers,
   origin,
   section
 }: AgentConnectionPanelProps): React.JSX.Element | null;

package/dist/components/AgentConnection.js

@@ -3,6 +3,7 @@ import { y as LinkIcon } from "../icons-BCNawx-T.js";
 import { Popover } from "./Popover.js";
 import { Button } from "./Button.js";
 import { a as CodeBlockCopyButton, i as CodeBlockContent, n as CodeBlockActions, p as CodeBlockTitle, r as CodeBlockContainer, s as CodeBlockHeader, t as CodeBlock } from "../CodeBlock-BK0sOAbV.js";
+import { DCR_MCP_SERVER_CARDS, MANUAL_MCP_SERVER_CARDS } from "../utils/mcp-server-catalog.js";
 import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/AgentConnection.tsx
@@ -95,7 +96,7 @@ function buildNanitesAgentConnectionCommands(origin, { mcpName = "nanites", plug
 * Use inside setup screens where users need Codex, Claude Code, skill-only,
 * or raw MCP JSON connection instructions.
 */
-function AgentConnectionPanel({ className, commands: commandsProp, defaultTarget = "codex", headingLevel = 2, origin, section = true }) {
+function AgentConnectionPanel({ className, commands: commandsProp, dcrMcpServers = DCR_MCP_SERVER_CARDS, defaultTarget = "codex", headingLevel = 2, manualMcpServers = MANUAL_MCP_SERVER_CARDS, origin, section = true }) {
 	const commands = React.useMemo(() => commandsProp ?? buildNanitesAgentConnectionCommands(origin ?? getBrowserOrigin()), [commandsProp, origin]);
 	const [target, setTarget] = React.useState(defaultTarget);
 	const selected = commands.find((command) => command.target === target) ?? commands[0];
@@ -141,10 +142,86 @@ function AgentConnectionPanel({ className, commands: commandsProp, defaultTarget
 				code: selected.code,
 				language: selected.language,
 				children: [/* @__PURE__ */ jsxs(CodeBlockHeader, { children: [/* @__PURE__ */ jsx(CodeBlockTitle, { children: selected.label }), /* @__PURE__ */ jsx(CodeBlockActions, { children: /* @__PURE__ */ jsx(CodeBlockCopyButton, {}) })] }), /* @__PURE__ */ jsx(CodeBlockContainer, { children: /* @__PURE__ */ jsx(CodeBlockContent, {}) })]
-			})
+			}),
+			dcrMcpServers.length > 0 ? /* @__PURE__ */ jsx(McpServerList, {
+				heading: "DCR-ready MCP servers",
+				servers: dcrMcpServers
+			}) : null,
+			manualMcpServers.length > 0 ? /* @__PURE__ */ jsx(McpServerList, {
+				heading: "Manual setup MCP servers",
+				servers: manualMcpServers
+			}) : null
 		]
 	});
 }
+function McpServerList({ heading, servers }) {
+	return /* @__PURE__ */ jsxs("div", {
+		className: "agent-connect__mcp",
+		children: [/* @__PURE__ */ jsx("p", {
+			className: "agent-connect__mcp-heading",
+			children: heading
+		}), /* @__PURE__ */ jsx("ul", {
+			className: "agent-connect__mcp-list",
+			role: "list",
+			children: servers.map((server) => /* @__PURE__ */ jsxs("li", {
+				className: "agent-connect__mcp-item",
+				children: [/* @__PURE__ */ jsx("span", {
+					className: "agent-connect__mcp-icon",
+					children: renderMcpServerIcon(server)
+				}), /* @__PURE__ */ jsxs("div", {
+					className: "agent-connect__mcp-copy",
+					children: [
+						/* @__PURE__ */ jsx("a", {
+							className: "agent-connect__mcp-name",
+							href: server.url,
+							target: "_blank",
+							rel: "noreferrer",
+							children: server.name
+						}),
+						server.description ? /* @__PURE__ */ jsx("span", {
+							className: "agent-connect__mcp-description",
+							children: server.description
+						}) : null,
+						server.manualSetup ? /* @__PURE__ */ jsx(McpServerSetup, { setup: server.manualSetup }) : null
+					]
+				})]
+			}, server.id))
+		})]
+	});
+}
+function McpServerSetup({ setup }) {
+	return /* @__PURE__ */ jsxs("div", {
+		className: "agent-connect__mcp-setup",
+		children: [/* @__PURE__ */ jsx("p", { children: setup.description }), setup.links.length > 0 ? /* @__PURE__ */ jsx("ul", {
+			className: "agent-connect__mcp-setup-links",
+			role: "list",
+			children: setup.links.map((link) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx("a", {
+				href: link.url,
+				target: "_blank",
+				rel: "noreferrer",
+				children: link.label
+			}) }, `${link.label}:${link.url}`))
+		}) : null]
+	});
+}
+function renderMcpServerIcon(server) {
+	const icon = server.icon;
+	if (typeof icon === "string") return /* @__PURE__ */ jsx("img", {
+		src: icon,
+		alt: "",
+		loading: "lazy",
+		decoding: "async",
+		referrerPolicy: "no-referrer"
+	});
+	if (icon) return /* @__PURE__ */ jsx("img", {
+		src: icon.src,
+		alt: "",
+		loading: "lazy",
+		decoding: "async",
+		referrerPolicy: "no-referrer"
+	});
+	return server.name.slice(0, 1);
+}
 /**
 * Compact popover trigger for showing AgentConnectionPanel inline.
 */

package/dist/components/McpServerPicker.d.ts

@@ -1,20 +1,7 @@
+import { McpServerCard } from "../utils/mcp-server-catalog.js";
 import * as React from "react";
 
 //#region src/components/McpServerPicker.d.ts
-type McpServerPickerStatus = "connecting" | "needs-auth" | "authenticating" | "ready" | "failed";
-interface McpServerCardIcon {
-  src: string;
-}
-interface McpServerCard {
-  id: string;
-  name: string;
-  url: string;
-  description?: string;
-  category?: string;
-  icon?: string | McpServerCardIcon;
-  status?: McpServerPickerStatus;
-  statusLabel?: string;
-}
 interface McpServerPickerProps {
   /** MCP servers to show in the plus-menu picker. */
   servers: readonly McpServerCard[];
@@ -38,4 +25,4 @@ declare function McpServerPickerItems({
   onConnect
 }: McpServerPickerItemsProps): React.JSX.Element | React.JSX.Element[];
 //#endregion
-export { McpServerCard, McpServerCardIcon, McpServerPicker, McpServerPickerItems, McpServerPickerItemsProps, McpServerPickerProps, McpServerPickerStatus };
+export { McpServerPicker, McpServerPickerItems, McpServerPickerItemsProps, McpServerPickerProps };

package/dist/components/ThinkChat.js

@@ -1,3 +1,4 @@
+import { M as TerminalIcon, N as WarningIcon, P as WrenchIcon, S as MonitorIcon, T as PencilIcon, k as SearchIcon, m as FileIcon, v as InfoIcon, y as LinkIcon } from "../icons-BCNawx-T.js";
 import { Activity, ActivityContent, ActivityItem, ActivityItemGroup, ActivityOutput, ActivityPanel, ActivityText, ActivityTrigger } from "./Activity.js";
 import { Tab, TabPanel, Tabs, TabsList } from "./Tabs.js";
 import { AgentChat } from "./AgentChat.js";
@@ -171,6 +172,142 @@ function summarizeToolInput(input) {
 	}
 	return null;
 }
+const HTTP_URL_PATTERN = /https?:\/\/[^\s"'<>)}\]]+/i;
+function firstHttpUrl(value) {
+	const text = typeof value === "string" ? value : JSON.stringify(value) ?? "";
+	const raw = HTTP_URL_PATTERN.exec(text)?.[0]?.replace(/[.,;:!?]+$/, "");
+	if (!raw) return null;
+	try {
+		return new URL(raw).href;
+	} catch {
+		return null;
+	}
+}
+function ActivityFavicon({ url }) {
+	const src = faviconHref(url);
+	const [failed, setFailed] = React.useState(false);
+	React.useEffect(() => setFailed(false), [src]);
+	if (!src || failed) return /* @__PURE__ */ jsx(LinkIcon, {});
+	return /* @__PURE__ */ jsx("img", {
+		className: "activity__favicon",
+		src,
+		alt: "",
+		loading: "lazy",
+		decoding: "async",
+		onError: () => setFailed(true)
+	});
+}
+function faviconHref(url) {
+	try {
+		return new URL("/favicon.ico", url).href;
+	} catch {
+		return null;
+	}
+}
+function ActivityKindIcon({ kind }) {
+	switch (kind) {
+		case "thought": return /* @__PURE__ */ jsx(InfoIcon, {});
+		case "read": return /* @__PURE__ */ jsx(FileIcon, {});
+		case "edit": return /* @__PURE__ */ jsx(PencilIcon, {});
+		case "search": return /* @__PURE__ */ jsx(SearchIcon, {});
+		case "web": return /* @__PURE__ */ jsx(LinkIcon, {});
+		case "command": return /* @__PURE__ */ jsx(TerminalIcon, {});
+		case "browser": return /* @__PURE__ */ jsx(MonitorIcon, {});
+		case "tool": return /* @__PURE__ */ jsx(WrenchIcon, {});
+	}
+}
+function genericToolLabels(name, hasUrl) {
+	const normalized = name.toLowerCase();
+	if (normalized.includes("grep") || normalized.includes("find") || normalized.includes("code")) return {
+		working: "Searching code",
+		done: "Searched code",
+		failed: "Code search failed",
+		summary: "searched code",
+		icon: "search"
+	};
+	if (normalized.includes("search") || normalized.includes("web") || normalized.includes("browser") || normalized.includes("google")) return {
+		working: "Searching the web",
+		done: "Searched the web",
+		failed: "Web search failed",
+		summary: "searched the web",
+		icon: "web"
+	};
+	if (hasUrl || normalized.includes("fetch") || normalized.includes("http") || normalized.includes("url")) return {
+		working: "Reading a URL",
+		done: "Read a URL",
+		failed: "URL read failed",
+		summary: "read a URL",
+		icon: "web"
+	};
+	if (normalized.includes("edit") || normalized.includes("write") || normalized.includes("delete") || normalized.includes("patch") || normalized.includes("apply") || normalized.includes("create") || normalized.includes("update")) return {
+		working: "Editing files",
+		done: "Edited files",
+		failed: "Edit failed",
+		summary: "edited files",
+		icon: "edit"
+	};
+	if (normalized.includes("exec") || normalized.includes("bash") || normalized.includes("shell") || normalized.includes("terminal") || normalized.includes("command")) return {
+		working: "Running a command",
+		done: "Ran a command",
+		failed: "Command failed",
+		summary: "ran a command",
+		icon: "command"
+	};
+	if (normalized.includes("read") || normalized.includes("open") || normalized.includes("list") || normalized.includes("file")) return {
+		working: "Reading files",
+		done: "Read files",
+		failed: "Read failed",
+		summary: "read files",
+		icon: "read"
+	};
+	return {
+		working: "Using a tool",
+		done: "Used a tool",
+		failed: "Tool failed",
+		summary: "used a tool",
+		icon: "tool"
+	};
+}
+function describeGenericToolPart(part) {
+	const labels = genericToolLabels(getToolName(part), activityPartUrl(part) !== null);
+	const label = isPartFailed(part) ? labels.failed : isPartWorking(part) ? labels.working : labels.done;
+	const detail = summarizeToolInput(part.input);
+	return detail ? `${label} · ${detail}` : label;
+}
+function activityPartUrl(part) {
+	if (isFetchToolPart(part)) return firstHttpUrl(part.input?.url ?? part.input?.path);
+	if (isBrowserToolPart(part) && part.type !== "tool-browser_execute") return firstHttpUrl(part.input?.url);
+	if (isToolUIPart(part) && !isExecuteToolPart(part)) return firstHttpUrl(part.input) ?? (part.state === "output-available" ? firstHttpUrl(part.output) : null);
+	return null;
+}
+function activityPartIconKind(part) {
+	if (isReasoningUIPart(part)) return "thought";
+	if (isWorkspaceToolPart(part)) switch (part.type) {
+		case "tool-read":
+		case "tool-list": return "read";
+		case "tool-write":
+		case "tool-edit":
+		case "tool-delete": return "edit";
+		case "tool-find":
+		case "tool-grep": return "search";
+		case "tool-bash": return "command";
+	}
+	if (isSkillToolPart(part)) return "tool";
+	if (isFetchToolPart(part)) return "web";
+	if (isBrowserToolPart(part)) return part.type === "tool-browser_execute" ? "browser" : "web";
+	if (isExecuteToolPart(part)) return "command";
+	if (isToolUIPart(part)) return genericToolLabels(getToolName(part), activityPartUrl(part) !== null).icon;
+	return "tool";
+}
+function activityPartIcon(part) {
+	const url = activityPartUrl(part);
+	return url ? /* @__PURE__ */ jsx(ActivityFavicon, { url }) : /* @__PURE__ */ jsx(ActivityKindIcon, { kind: activityPartIconKind(part) });
+}
+function activitySummaryIcon(parts) {
+	if (parts.find((part) => isToolUIPart(part) && isPartFailed(part))) return /* @__PURE__ */ jsx(WarningIcon, {});
+	const representative = parts.find((part) => activityPartIconKind(part) === "edit") ?? parts.find((part) => activityPartUrl(part)) ?? parts.find((part) => describeThinkChatActivityPart(part));
+	return representative ? activityPartIcon(representative) : /* @__PURE__ */ jsx(ActivityKindIcon, { kind: "tool" });
+}
 /**
 * One-line natural-language label for an activity part ("Ran vp test",
 * "Fetched developers.cloudflare.com/agents/"); `null` for boundaries that
@@ -192,12 +329,7 @@ function describeThinkChatActivityPart(part, toolRenderers) {
 	if (isFetchToolPart(part)) return describeFetchToolPart(part);
 	if (isBrowserToolPart(part)) return describeBrowserToolPart(part);
 	if (isExecuteToolPart(part)) return describeExecuteToolPart(part);
-	if (isToolUIPart(part)) {
-		const name = getToolName(part);
-		const verb = isPartFailed(part) ? `${name} failed` : isPartWorking(part) ? `Running ${name}` : `Ran ${name}`;
-		const detail = summarizeToolInput(part.input);
-		return detail ? `${verb} · ${detail}` : verb;
-	}
+	if (isToolUIPart(part)) return describeGenericToolPart(part);
 	return null;
 }
 function basename(path) {
@@ -283,7 +415,7 @@ function describeFetchToolPart(part) {
 }
 function summarizeActivitySteps(parts) {
 	const byTool = /* @__PURE__ */ new Map();
-	const otherTools = /* @__PURE__ */ new Set();
+	const genericSegments = /* @__PURE__ */ new Set();
 	const skillNames = /* @__PURE__ */ new Set();
 	let thoughts = 0;
 	let skillParts = 0;
@@ -300,7 +432,7 @@ function summarizeActivitySteps(parts) {
 	} else if (isFetchToolPart(part)) fetches++;
 	else if (isBrowserToolPart(part)) browses++;
 	else if (isExecuteToolPart(part)) codeRuns++;
-	else if (isToolUIPart(part)) otherTools.add(getToolName(part));
+	else if (isToolUIPart(part)) genericSegments.add(genericToolLabels(getToolName(part), activityPartUrl(part) !== null).summary);
 	const count = (name) => byTool.get(name) ?? 0;
 	const files = (n) => n === 1 ? "a file" : `${n} files`;
 	const reads = count("read");
@@ -319,7 +451,15 @@ function summarizeActivitySteps(parts) {
 	if (browses > 0) segments.push("used the browser");
 	if (codeRuns > 0) segments.push("ran code");
 	if (commands > 0) segments.push(commands === 1 ? "ran a command" : `ran ${commands} commands`);
-	for (const tool of otherTools) segments.push(`used ${tool}`);
+	for (const segment of [
+		"edited files",
+		"searched code",
+		"searched the web",
+		"read a URL",
+		"ran a command",
+		"read files",
+		"used a tool"
+	]) if (genericSegments.has(segment)) segments.push(segment);
 	if (segments.length === 0) return "Worked";
 	const top = segments.slice(0, 3);
 	const joined = top.length === 1 ? top[0] : `${top.slice(0, -1).join(", ")} and ${top.at(-1)}`;
@@ -349,7 +489,10 @@ function ThinkChatActivity({ parts, defaultOpen, isStreaming, toolRenderers }) {
 	return /* @__PURE__ */ jsxs(Activity, {
 		isStreaming: streaming,
 		defaultOpen,
-		children: [/* @__PURE__ */ jsx(ActivityTrigger, { label: streaming && latest ? latest.text : settledLabel }), /* @__PURE__ */ jsx(ActivityContent, { children: steps.map((step) => /* @__PURE__ */ jsx(ThinkChatActivityStep, {
+		children: [/* @__PURE__ */ jsx(ActivityTrigger, {
+			icon: streaming && latest ? activityPartIcon(latest.part) : activitySummaryIcon(parts),
+			label: streaming && latest ? latest.text : settledLabel
+		}), /* @__PURE__ */ jsx(ActivityContent, { children: steps.map((step) => /* @__PURE__ */ jsx(ThinkChatActivityStep, {
 			text: step.text,
 			part: step.part,
 			toolRenderers
@@ -357,39 +500,53 @@ function ThinkChatActivity({ parts, defaultOpen, isStreaming, toolRenderers }) {
 	});
 }
 function ThinkChatActivityStep({ text, part, toolRenderers }) {
+	const icon = activityPartIcon(part);
 	if (isToolUIPart(part)) {
 		const customPanel = toolRenderers?.[getToolName(part)]?.panel?.(part);
-		if (customPanel === null) return /* @__PURE__ */ jsx(ActivityItem, { children: text });
+		if (customPanel === null) return /* @__PURE__ */ jsx(ActivityItem, {
+			icon,
+			children: text
+		});
 		if (customPanel !== void 0) return /* @__PURE__ */ jsx(ActivityItemGroup, {
 			label: text,
+			icon,
 			children: customPanel
 		});
 	}
 	if (isReasoningUIPart(part) && part.text.trim()) return /* @__PURE__ */ jsx(ActivityItemGroup, {
 		label: text,
+		icon,
 		children: /* @__PURE__ */ jsx(ActivityText, { children: part.text })
 	});
 	if (isWorkspaceToolPart(part) && part.type !== "tool-delete") return /* @__PURE__ */ jsx(ActivityItemGroup, {
 		label: text,
+		icon,
 		children: /* @__PURE__ */ jsx(ThinkChatWorkspacePanel, { part })
 	});
 	if (isSkillToolPart(part)) return /* @__PURE__ */ jsx(ActivityItemGroup, {
 		label: text,
+		icon,
 		children: /* @__PURE__ */ jsx(ThinkChatSkillPanel, { part })
 	});
 	if (isFetchToolPart(part)) return /* @__PURE__ */ jsx(ActivityItemGroup, {
 		label: text,
+		icon,
 		children: /* @__PURE__ */ jsx(ThinkChatFetchPanel, { part })
 	});
 	if (isBrowserToolPart(part)) return /* @__PURE__ */ jsx(ActivityItemGroup, {
 		label: text,
+		icon,
 		children: /* @__PURE__ */ jsx(ThinkChatBrowserPanel, { part })
 	});
 	if (isExecuteToolPart(part)) return /* @__PURE__ */ jsx(ActivityItemGroup, {
 		label: text,
+		icon,
 		children: /* @__PURE__ */ jsx(ThinkChatExecutePanel, { part })
 	});
-	return /* @__PURE__ */ jsx(ActivityItem, { children: text });
+	return /* @__PURE__ */ jsx(ActivityItem, {
+		icon,
+		children: text
+	});
 }
 function renderDeniedPanel(label, reason) {
 	return /* @__PURE__ */ jsx(ActivityPanel, {

package/dist/styles/activity.css

@@ -342,6 +342,15 @@
   color: var(--sigvelo-color-text-muted);
 }
 
+.activity__favicon {
+  display: block;
+  width: 1rem;
+  height: 1rem;
+  border-radius: var(--sigvelo-radius-xs);
+  background-color: var(--sigvelo-color-surface);
+  object-fit: contain;
+}
+
 .activity__item-text {
   min-width: 0;
   overflow-wrap: anywhere;

package/dist/styles/agent-connection.css

@@ -145,6 +145,146 @@
   line-height: 1.5;
 }
 
+.agent-connect__mcp {
+  display: grid;
+  gap: 0.5rem;
+  min-inline-size: 0;
+}
+
+.agent-connect__mcp-heading {
+  margin: 0;
+  color: var(--sigvelo-color-text-muted);
+  font-size: 0.74rem;
+  font-weight: var(--sigvelo-font-weight-semibold);
+  line-height: 1.25;
+}
+
+.agent-connect__mcp-list {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 0.35rem;
+  max-block-size: 24rem;
+  margin: 0;
+  padding: 0;
+  overflow-y: auto;
+  overscroll-behavior: contain;
+  list-style: none;
+}
+
+.agent-connect__mcp-item {
+  display: grid;
+  grid-template-columns: 1.625rem minmax(0, 1fr);
+  gap: 0.5rem;
+  align-items: start;
+  min-inline-size: 0;
+  padding: 0.5rem;
+  border: var(--sigvelo-border-style) var(--sigvelo-border-width)
+    var(--sigvelo-color-neutral-border-subtle);
+  border-radius: var(--sigvelo-radius-md);
+  background: var(--sigvelo-color-surface);
+}
+
+.agent-connect__mcp-icon {
+  display: grid;
+  place-items: center;
+  inline-size: 1.625rem;
+  block-size: 1.625rem;
+  border-radius: var(--sigvelo-radius-sm);
+  background: var(--sigvelo-color-neutral-bg-subtle);
+  color: var(--sigvelo-color-text-muted);
+  font-size: 0.72rem;
+  font-weight: var(--sigvelo-font-weight-bold);
+  line-height: 1;
+}
+
+.agent-connect__mcp-icon img {
+  display: block;
+  max-inline-size: 1rem;
+  max-block-size: 1rem;
+}
+
+.agent-connect__mcp-copy {
+  display: grid;
+  gap: 0.08rem;
+  min-inline-size: 0;
+}
+
+.agent-connect__mcp-name {
+  color: var(--sigvelo-color-text);
+  font-size: 0.78rem;
+  font-weight: var(--sigvelo-font-weight-semibold);
+  line-height: 1.2;
+  overflow-wrap: anywhere;
+  text-decoration: none;
+}
+
+.agent-connect__mcp-name:hover {
+  color: var(--sigvelo-color-primary-text);
+  text-decoration: underline;
+  text-underline-offset: 0.16em;
+}
+
+.agent-connect__mcp-name:focus-visible {
+  outline: 2px solid var(--sigvelo-color-focus);
+  outline-offset: 2px;
+}
+
+.agent-connect__mcp-description {
+  color: var(--sigvelo-color-text-muted);
+  font-size: 0.7rem;
+  line-height: 1.25;
+  overflow-wrap: anywhere;
+}
+
+.agent-connect__mcp-setup {
+  display: grid;
+  gap: 0.3rem;
+  margin-block-start: 0.2rem;
+  min-inline-size: 0;
+}
+
+.agent-connect__mcp-setup p {
+  margin: 0;
+  color: var(--sigvelo-color-text-muted);
+  font-size: 0.68rem;
+  line-height: 1.3;
+  overflow-wrap: anywhere;
+}
+
+.agent-connect__mcp-setup-links {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.25rem;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.agent-connect__mcp-setup-links a {
+  display: inline-flex;
+  align-items: center;
+  min-block-size: 1.35rem;
+  padding: 0 0.35rem;
+  border: var(--sigvelo-border-style) var(--sigvelo-border-width)
+    var(--sigvelo-color-neutral-border-subtle);
+  border-radius: var(--sigvelo-radius-sm);
+  color: var(--sigvelo-color-text-muted);
+  font-size: 0.65rem;
+  font-weight: var(--sigvelo-font-weight-semibold);
+  line-height: 1.1;
+  text-decoration: none;
+}
+
+.agent-connect__mcp-setup-links a:hover {
+  border-color: var(--sigvelo-color-primary-border-muted);
+  color: var(--sigvelo-color-primary-text);
+}
+
+.agent-connect__mcp-setup-links a:focus-visible {
+  outline: 2px solid var(--sigvelo-color-focus);
+  outline-offset: 2px;
+}
+
 .agent-connect-trigger {
   inline-size: 100%;
 }
@@ -160,6 +300,10 @@
     grid-template-columns: repeat(2, minmax(0, 1fr));
   }
 
+  .agent-connect__mcp-list {
+    grid-template-columns: 1fr;
+  }
+
   .agent-connect-popover {
     inline-size: min(24rem, calc(100dvi - 1.5rem));
   }