@mcp-b/react-components 0.5.7 → 0.6.1

package/dist/components/AgentConnection.d.ts

@@ -1,3 +1,4 @@
+import { McpServerCard, McpServerManualSetup } from "../utils/mcp-server-catalog.js";
 import * as React from "react";
 
 //#region src/components/AgentConnection.d.ts
@@ -24,14 +25,19 @@ 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;
 };
 type AgentConnectionPopoverProps = Omit<AgentConnectionPanelProps, "section"> & {
   readonly className?: string;
 };
+type McpServerSetupProps = {
+  readonly setup: McpServerManualSetup;
+};
 declare function Connection({
   fromX,
   fromY,
@@ -53,11 +59,16 @@ declare function buildNanitesAgentConnectionCommands(origin: string, {
 declare function AgentConnectionPanel({
   className,
   commands: commandsProp,
+  dcrMcpServers,
   defaultTarget,
   headingLevel,
+  manualMcpServers,
   origin,
   section
 }: AgentConnectionPanelProps): React.JSX.Element | null;
+declare function McpServerSetup({
+  setup
+}: McpServerSetupProps): React.JSX.Element;
 /**
  * Compact popover trigger for showing AgentConnectionPanel inline.
  */
@@ -66,4 +77,4 @@ declare function AgentConnectionPopover({
   ...props
 }: AgentConnectionPopoverProps): React.JSX.Element;
 //#endregion
-export { AgentConnectionCommand, AgentConnectionPanel, AgentConnectionPanelProps, AgentConnectionPopover, AgentConnectionPopoverProps, AgentConnectionTarget, Connection, ConnectionProps, NanitesAgentConnectionOptions, buildNanitesAgentConnectionCommands };
+export { AgentConnectionCommand, AgentConnectionPanel, AgentConnectionPanelProps, AgentConnectionPopover, AgentConnectionPopoverProps, AgentConnectionTarget, Connection, ConnectionProps, McpServerSetup, McpServerSetupProps, NanitesAgentConnectionOptions, buildNanitesAgentConnectionCommands };

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.
 */
@@ -173,4 +250,4 @@ function AgentConnectionPopover({ className, ...props }) {
 	}) })] });
 }
 //#endregion
-export { AgentConnectionPanel, AgentConnectionPopover, Connection, buildNanitesAgentConnectionCommands };
+export { AgentConnectionPanel, AgentConnectionPopover, Connection, McpServerSetup, buildNanitesAgentConnectionCommands };

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/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));
   }