@mcp-b/react-components 0.46.3 → 0.46.4

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

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

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

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

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

@@ -1,4 +1,5 @@
 import { n as ResponsiveSidebarShell } from "../../ResponsiveSidebarShell-BTVPxLJK.js";
+import { ThinkRoutine } from "./ThinkRoutine.js";
 import * as React from "react";
 
 //#region src/components/agents-sdk/ManagerOffice.d.ts
@@ -44,20 +45,6 @@ interface ManagerOfficeWork {
   /** Unix timestamp in milliseconds of the latest lifecycle transition. */
   updatedAt: number;
 }
-interface ManagerOfficeRoutine {
-  /** Stable routine identity. */
-  id: string;
-  /** Human-readable recurring responsibility. */
-  name: string;
-  /** Human-readable schedule supplied by the host. */
-  schedule: string;
-  /** Whether future occurrences are enabled. */
-  enabled: boolean;
-  /** Completed runs among the bounded recent run history. */
-  completedRuns: number;
-  /** Terminal runs among the bounded recent run history. */
-  finishedRuns: number;
-}
 /** Which way work moves through a channel, from the employee's side. */
 type ManagerOfficeChannelDirection = "input" | "output" | "both";
 type ManagerOfficeChannelStatus = "connected" | "needs-auth" | "error";
@@ -117,7 +104,8 @@ interface ManagerOfficeConnectedEmployee extends ManagerOfficeEmployeeBase {
   role: string;
   handoffs: readonly ManagerOfficeHandoff[];
   work: readonly ManagerOfficeWork[];
-  routines: readonly ManagerOfficeRoutine[];
+  /** Whole upstream-backed routines, including their native task, schedule, and runs. */
+  routines: readonly ThinkRoutine[];
   /** Every service the employee reads from or acts on. Empty is meaningful. */
   channels: readonly ManagerOfficeChannel[];
   /** The live tab the manager can glance at from the office. */
@@ -151,7 +139,7 @@ type ManagerOfficeDestination = {
 } | {
   kind: "routine";
   employee: ManagerOfficeConnectedEmployee;
-  routine: ManagerOfficeRoutine;
+  routine: ThinkRoutine;
 } | {
   kind: "new-work";
   employee: ManagerOfficeConnectedEmployee;
@@ -260,4 +248,4 @@ declare function ManagerOffice({
   ...props
 }: ManagerOfficeProps): React.JSX.Element;
 //#endregion
-export { ManagerOffice, ManagerOfficeAnalyticsPoint, ManagerOfficeBrowserPreview, ManagerOfficeChannel, ManagerOfficeChannelDirection, ManagerOfficeChannelStatus, ManagerOfficeConnectedEmployee, ManagerOfficeDestination, ManagerOfficeDisconnectedEmployee, ManagerOfficeEmployee, ManagerOfficeEmployeeAnalytics, ManagerOfficeEmployeeStatus, ManagerOfficeHandoff, ManagerOfficeProps, ManagerOfficeReportSelection, ManagerOfficeRoutine, ManagerOfficeSidebar, ManagerOfficeSidebarAlert, ManagerOfficeSidebarAlertProps, ManagerOfficeSidebarProps, ManagerOfficeView, ManagerOfficeWork, ManagerOfficeWorkStatus };
+export { ManagerOffice, ManagerOfficeAnalyticsPoint, ManagerOfficeBrowserPreview, ManagerOfficeChannel, ManagerOfficeChannelDirection, ManagerOfficeChannelStatus, ManagerOfficeConnectedEmployee, ManagerOfficeDestination, ManagerOfficeDisconnectedEmployee, ManagerOfficeEmployee, ManagerOfficeEmployeeAnalytics, ManagerOfficeEmployeeStatus, ManagerOfficeHandoff, ManagerOfficeProps, ManagerOfficeReportSelection, ManagerOfficeSidebar, ManagerOfficeSidebarAlert, ManagerOfficeSidebarAlertProps, ManagerOfficeSidebarProps, ManagerOfficeView, ManagerOfficeWork, ManagerOfficeWorkStatus };

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

@@ -15,6 +15,7 @@ import { LinkButton } from "../foundations/LinkButton.js";
 import "../foundations/icons.js";
 import { AppTopBar } from "../general-purpose/AppTopBar.js";
 import { ResponsiveSidebarShell } from "../general-purpose/ResponsiveSidebarShell.js";
+import { getThinkExecutionRunStatus } from "./ThinkExecutionRun.js";
 import * as React from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/_internal/chrome-profile-colors.ts
@@ -354,6 +355,15 @@ function relativeTime(timestamp, now) {
 	if (elapsed < day) return `${Math.floor(elapsed / hour)}h`;
 	return `${Math.floor(elapsed / day)}d`;
 }
+function routineDetail(routine) {
+	const schedule = routine.enabled ? routine.task.schedule : `Paused · ${routine.task.schedule}`;
+	const finishedRuns = routine.runs.filter((run) => run.completedAt != null);
+	if (!finishedRuns.length) return schedule;
+	return `${schedule} · ${finishedRuns.filter((run) => {
+		const status = getThinkExecutionRunStatus(run);
+		return status === "completed" || status === "complete";
+	}).length} of ${finishedRuns.length} recent runs completed`;
+}
 function Timestamp({ now, timestamp }) {
 	const date = new Date(timestamp);
 	return /* @__PURE__ */ jsx("time", {
@@ -1598,7 +1608,7 @@ function EmployeeDetail({ employee, renderLink, now, profileColor }) {
 													children: routine.name
 												}), /* @__PURE__ */ jsx("small", {
 													className: "sigvelo-truncate",
-													children: routine.enabled ? routine.schedule : `Paused · ${routine.schedule}`
+													children: routineDetail(routine)
 												})]
 											}),
 											/* @__PURE__ */ jsx(ChevronRightIcon, { className: "manager-office__row-chevron" })

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

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

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

@@ -1,2 +1,2 @@
-import { n as McpConnectorFormProps, r as McpConnectorFormValues, t as McpConnectorForm } from "../../McpConnectorForm-BETdVBRk.js";
+import { n as McpConnectorFormProps, r as McpConnectorFormValues, t as McpConnectorForm } from "../../McpConnectorForm-CeYNY0MI.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-C6ip9IvL.js";
+import { a as McpPluginDetailsDialogProps, i as McpPluginDetailsDialog, n as McpPluginCatalogProps, r as McpPluginDetails, t as McpPluginCatalog } from "../../McpPluginCatalog-3qWu8oK1.js";
 export { McpPluginCatalog, McpPluginCatalogProps, McpPluginDetails, McpPluginDetailsDialog, McpPluginDetailsDialogProps };

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-Cbu483Zb.js";
-import { n as McpConnectorFormProps } from "../../McpConnectorForm-BETdVBRk.js";
+import { o as McpServerCard } from "../../mcp-server-catalog-C_g7C-9o.js";
+import { n as McpConnectorFormProps } from "../../McpConnectorForm-CeYNY0MI.js";
 import { l as DialogProps } from "../../Dialog-B_FhRWaz.js";
 import * as React from "react";
 import { MCPServersState } from "agents";

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

@@ -1,7 +1,7 @@
 import { l as WorkspaceNavigationAdapter } from "../../WorkspaceLink-Bh9-Jo1r.js";
 import { n as AgentToolEventsValue } from "../../AgentToolRunsContext-jtmveaRE.js";
 import { n as ResponsiveSidebarShell, t as AppBarSlots } from "../../ResponsiveSidebarShell-BTVPxLJK.js";
-import { n as McpPluginCatalogProps } from "../../McpPluginCatalog-C6ip9IvL.js";
+import { n as McpPluginCatalogProps } from "../../McpPluginCatalog-3qWu8oK1.js";
 import { ThinkChatMessagesProps } from "./ThinkChat.js";
 import { ThinkThreadStatusSummary } from "./ThinkThreadPicker.js";
 import { r as WorkspaceFileAssetResolver } from "../../WorkspaceFile-Dq-GC0_T.js";

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

@@ -1,7 +1,7 @@
+import { ThinkRoutine } from "./ThinkRoutine.js";
 import { ThinkChatDraft } from "./ThinkChat.js";
 import { ThinkThreadItem } from "./ThinkThreadPicker.js";
 import { ThinkFullAppAgent, ThinkFullAppConversation, ThinkFullAppProps } from "./ThinkFullApp.js";
-import { ThinkRoutine } from "./ThinkRoutine.js";
 import { SetupChecklistEntry } from "../general-purpose/SetupChecklist.js";
 import * as React from "react";
 import { UIMessage } from "ai";

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

@@ -18,8 +18,8 @@ import { AppTopBar } from "../general-purpose/AppTopBar.js";
 import { t as SetupChecklistAction } from "../../SetupChecklist-DyPZWzK2.js";
 import { NaniteMark } from "../nanites/NaniteScene.js";
 import { SubagentRunLabel } from "./SubagentRunIndicator.js";
-import { McpServerPickerAction, McpServerPickerItems } from "./McpServerPicker.js";
 import { getThinkExecutionRunId } from "./ThinkExecutionRun.js";
+import { McpServerPickerAction, McpServerPickerItems } from "./McpServerPicker.js";
 import { ThinkThreadPicker, summarizeThinkThreads } from "./ThinkThreadPicker.js";
 import { ThinkFullApp } from "./ThinkFullApp.js";
 import { ThinkRoutineLibrary } from "./ThinkRoutineLibrary.js";

package/dist/{mcp-server-catalog-Cbu483Zb.d.ts → mcp-server-catalog-C_g7C-9o.d.ts}

@@ -420,6 +420,30 @@ declare const MANUAL_MCP_SERVER_CARDS: readonly [{
       readonly url: "https://developers.asana.com/docs/connecting-mcp-clients-to-asanas-v2-server";
     }];
   };
+}, {
+  readonly id: "github";
+  readonly name: "GitHub";
+  readonly url: "https://api.githubcopilot.com/mcp/";
+  readonly description: "Clone, push, and open pull requests as a connected GitHub account";
+  readonly category: "Manual";
+  readonly manualSetup: {
+    readonly auth: {
+      readonly type: "bearer";
+      readonly label: "Personal access token (classic)";
+      readonly fields: readonly [{
+        readonly name: "bearerToken";
+        readonly label: "Personal access token";
+        readonly inputType: "password";
+        readonly placeholder: "ghp_…";
+        readonly required: true;
+      }];
+    };
+    readonly description: "Paste a classic personal access token with all scopes from the agent's own GitHub account — the account is the access boundary. Git and the GitHub API both authenticate as this account.";
+    readonly links: readonly [{
+      readonly label: "Create a classic token";
+      readonly url: "https://github.com/settings/tokens";
+    }];
+  };
 }, {
   readonly id: "gmail";
   readonly name: "Gmail";

package/dist/styles/browser-control-overlay.css

@@ -1,18 +1,20 @@
 /*
- * Standalone stylesheet for browser-control chrome mounted in a closed shadow
- * root. It intentionally uses system colors so it remains legible on arbitrary
- * pages without leaking the full document-level token sheet into the host.
+ * Browser-control chrome, mounted in a closed shadow root on someone else's
+ * page. This standalone design-system leaf is isolated by `:host { all:
+ * initial }`, so it shares no variable, scale, or primitive with the document
+ * stylesheet.
  *
- * Every length here is a literal on purpose. The token layer does not exist
- * inside this shadow root, so a --sigvelo-* reference resolves to nothing and
- * takes its whole declaration with it — silently, and only on a real host page,
- * which is the one place this is hard to notice. Keep the values on the 4px
- * grid by hand; audit:css-recipes checks both halves of that.
+ * Every length is a literal on purpose. A --sigvelo-* reference here resolves
+ * to nothing and silently takes its whole declaration with it, and only on a
+ * real host page — the one place that is hardest to notice. Keep the values on
+ * the 4px grid by hand.
+ *
+ * System colors keep the chrome legible on an arbitrary page's palette and in
+ * forced-colors mode.
  */
 
 :host {
   --browser-control-accent: Highlight;
-  --browser-control-accent-text: HighlightText;
   --browser-control-warning: Mark;
   --browser-control-warning-text: MarkText;
   --browser-control-shadow: color-mix(in srgb, CanvasText 28%, transparent);
@@ -31,50 +33,56 @@
   z-index: 2147483647;
 }
 
+/*
+ * Only the waiting mode draws an edge. A tab under agent control is identified
+ * by its pointer; a border around the whole viewport reads as an error state
+ * and hides the page's own chrome. Waiting is the exception because the page
+ * is being handed back and the user has to notice.
+ */
 :host .frame {
-  background: color-mix(in srgb, var(--browser-control-accent) 5%, transparent);
-  border: 3px solid color-mix(in srgb, var(--browser-control-accent) 88%, transparent);
-  box-shadow: inset 0 0 18px color-mix(in srgb, var(--browser-control-accent) 28%, transparent);
+  box-shadow:
+    inset 0 0 0 3px var(--browser-control-warning),
+    inset 0 0 24px color-mix(in srgb, var(--browser-control-warning) 32%, transparent);
   box-sizing: border-box;
   inset: 0;
   pointer-events: none;
   position: fixed;
 }
 
-:host .frame.waiting {
-  background: color-mix(in srgb, var(--browser-control-warning) 12%, transparent);
-  border-color: var(--browser-control-warning);
-  box-shadow: inset 0 0 18px color-mix(in srgb, var(--browser-control-warning) 32%, transparent);
-}
-
+/*
+ * The pointer artwork. The file is cropped to its alpha, and the alpha includes
+ * the soft white halo -- so the arrow's ink apex, which is what the eye reads as
+ * the point, sits 5px into a 40x41 image, or 3.41px once `contain` renders it
+ * 28px tall. The box is offset by that much and the pivot moved onto it, so the
+ * apex lands on the page's pointer and every rotation the planner emits turns
+ * about it. Shifting the background instead would do the same thing and clip the
+ * halo off the leading edge.
+ *
+ * Position comes from the Web Animations API during a move and from
+ * --think-cursor-x/y at rest; no transform transition, since a CSS transition
+ * and a script-driven animation would fight over the same property.
+ */
 :host .cursor {
-  filter: drop-shadow(0 2px 4px var(--browser-control-shadow));
+  background: url(../assets/browser-control-cursor.png) no-repeat 0 0 / contain;
+  /* Two shadows rather than one: a tight halo that separates the artwork from
+     whatever it is over, and a wide one that reads as the accent glow. */
+  filter: drop-shadow(0 0 6px color-mix(in srgb, var(--browser-control-accent) 90%, transparent))
+    drop-shadow(0 0 15px color-mix(in srgb, var(--browser-control-accent) 48%, transparent));
   height: 28px;
-  left: 0;
-  opacity: 0;
+  left: -3.41px;
   pointer-events: none;
   position: fixed;
-  top: 0;
+  top: -3.41px;
   transform: translate3d(var(--think-cursor-x, 16px), var(--think-cursor-y, 16px), 0);
-  transition:
-    transform 140ms cubic-bezier(0.2, 0.8, 0.2, 1),
-    opacity 80ms linear;
+  /* The ink apex, not the box corner and not the centre. The offset above puts
+     this point on the pointer, and the body swings around it. */
+  transform-origin: 3.41px 3.41px;
   width: 28px;
 }
 
-:host .cursor.visible {
-  opacity: 1;
-}
-
-:host .cursor path {
-  fill: var(--browser-control-accent);
-  stroke: var(--browser-control-accent-text);
-}
-
 :host button {
   appearance: none;
   border-radius: 999px;
-  box-shadow: 0 2px 10px var(--browser-control-shadow);
   cursor: pointer;
   font:
     600 12px/1.2 system-ui,
@@ -92,41 +100,6 @@
   opacity: 0.72;
 }
 
-:host .takeover,
-:host .owner {
-  background: var(--browser-control-accent);
-  border: solid 1px var(--browser-control-accent-text);
-  box-shadow: 0 2px 10px var(--browser-control-shadow);
-  color: var(--browser-control-accent-text);
-}
-
-:host .takeover {
-  pointer-events: none;
-  position: fixed;
-  right: 10px;
-  top: 10px;
-}
-
-:host .takeover.takeover-armed {
-  pointer-events: auto;
-}
-
-:host .owner {
-  border-radius: 999px;
-  font:
-    600 12px/1.2 system-ui,
-    sans-serif;
-  left: 10px;
-  max-width: min(360px, 60vw);
-  overflow: hidden;
-  padding: 8px 12px;
-  pointer-events: none;
-  position: fixed;
-  text-overflow: ellipsis;
-  top: 10px;
-  white-space: nowrap;
-}
-
 :host .banner {
   align-items: center;
   background: var(--browser-control-warning);
@@ -158,6 +131,7 @@
 :host .banner .done,
 :host .banner .cannot {
   border: solid 1px currentcolor;
+  box-shadow: 0 2px 10px var(--browser-control-shadow);
   color: inherit;
   flex-shrink: 0;
 }
@@ -171,12 +145,6 @@
   box-shadow: none;
 }
 
-@media (prefers-reduced-motion: reduce) {
-  :host .cursor {
-    transition: none;
-  }
-}
-
 @media print {
   :host {
     display: none !important;
@@ -184,10 +152,8 @@
 }
 
 @media (forced-colors: active) {
-  :host .frame,
-  :host .takeover,
-  :host .owner,
   :host .banner {
-    forced-color-adjust: none;
+    background: Canvas;
+    color: CanvasText;
   }
 }

package/dist/styles/extension-status.css

@@ -0,0 +1,46 @@
+/*
+ * Standalone extension interstitial. It intentionally does not load the token
+ * cascade; system colors follow the user's light, dark, and forced-color theme.
+ */
+
+.extension-status-page {
+  background: Canvas;
+  color: CanvasText;
+  color-scheme: light dark;
+  display: grid;
+  font:
+    0.875rem/1.5 system-ui,
+    -apple-system,
+    BlinkMacSystemFont,
+    "Segoe UI",
+    Roboto,
+    sans-serif;
+  margin: 0;
+  min-block-size: 100dvb;
+  place-items: center;
+}
+
+.extension-status {
+  /* Mirrors --sigvelo-layout-gutter without loading the document token sheet. */
+  display: grid;
+  gap: 0.75rem;
+  justify-items: center;
+  max-inline-size: 30rem;
+  padding: 0.75rem;
+  text-align: center;
+}
+
+.extension-status h1 {
+  font-size: inherit;
+  font-weight: 600;
+  margin: 0;
+}
+
+.extension-status p {
+  color: GrayText;
+  margin: 0;
+}
+
+.extension-status button {
+  font: inherit;
+}

package/dist/styles/index.css

@@ -86,7 +86,6 @@
 @import "./artifact.css" layer(components);
 @import "./browser-live-view.css" layer(components);
 @import "./browser-live-screen.css" layer(components);
-@import "./browser-control-overlay.css" layer(components);
 @import "./browser-run-panel.css" layer(components);
 @import "./chain-of-thought.css" layer(components);
 @import "./checkpoint.css" layer(components);

package/dist/utils/mcp-server-catalog.d.ts

@@ -1,2 +1,2 @@
-import { a as MCP_SERVER_SETUP_AUTH, c as McpServerManualSetup, d as McpServerSetupAuthFieldName, f as McpServerSetupLink, h as getMcpServerRuntimeState, i as MANUAL_MCP_SERVER_CARDS, l as McpServerSetupAuth, m as getMcpServerIconSrc, n as DCR_MCP_SERVER_CARDS, o as McpServerCard, p as getMcpServerEntry, r as DEFAULT_MCP_SERVER_CARDS, s as McpServerCardIcon, t as CUSTOM_MCP_SERVER_CARD, u as McpServerSetupAuthField } from "../mcp-server-catalog-Cbu483Zb.js";
+import { a as MCP_SERVER_SETUP_AUTH, c as McpServerManualSetup, d as McpServerSetupAuthFieldName, f as McpServerSetupLink, h as getMcpServerRuntimeState, i as MANUAL_MCP_SERVER_CARDS, l as McpServerSetupAuth, m as getMcpServerIconSrc, n as DCR_MCP_SERVER_CARDS, o as McpServerCard, p as getMcpServerEntry, r as DEFAULT_MCP_SERVER_CARDS, s as McpServerCardIcon, t as CUSTOM_MCP_SERVER_CARD, u as McpServerSetupAuthField } from "../mcp-server-catalog-C_g7C-9o.js";
 export { CUSTOM_MCP_SERVER_CARD, DCR_MCP_SERVER_CARDS, DEFAULT_MCP_SERVER_CARDS, MANUAL_MCP_SERVER_CARDS, MCP_SERVER_SETUP_AUTH, McpServerCard, McpServerCardIcon, McpServerManualSetup, McpServerSetupAuth, McpServerSetupAuthField, McpServerSetupAuthFieldName, McpServerSetupLink, getMcpServerEntry, getMcpServerIconSrc, getMcpServerRuntimeState };

package/dist/utils/mcp-server-catalog.js

@@ -1,4 +1,5 @@
 import { inferFaviconUrl } from "./favicon.js";
+import { siAirtable, siAsana, siAtlassian, siCalendly, siCloudflare, siDatadog, siEgnyte, siGithub, siGitlab, siGrafana, siHubspot, siHuggingface, siLinear, siMiro, siNeon, siNotion, siPaypal, siPosthog, siPostman, siRailway, siSentry, siStripe, siSupabase, siWebflow, siWix, siZapier, siZoom } from "simple-icons";
 //#region src/utils/mcp-server-catalog.ts
 /**
 * Read the complete state emitted by the pinned Agents runtime.
@@ -38,6 +39,40 @@ function normalizeMcpServerUrl(url) {
 }
 const DCR_CATEGORY = "Auto";
 const MANUAL_CATEGORY = "Manual";
+const SIMPLE_ICONS = Object.fromEntries([
+	siAirtable,
+	siAsana,
+	siAtlassian,
+	siCalendly,
+	siCloudflare,
+	siDatadog,
+	siEgnyte,
+	siGithub,
+	siGitlab,
+	siGrafana,
+	siHubspot,
+	siHuggingface,
+	siLinear,
+	siMiro,
+	siNeon,
+	siNotion,
+	siPaypal,
+	siPosthog,
+	siPostman,
+	siRailway,
+	siSentry,
+	siStripe,
+	siSupabase,
+	siWebflow,
+	siWix,
+	siZapier,
+	siZoom
+].map((icon) => [icon.slug, icon.svg]));
+function bundledSimpleIcon(server) {
+	const slug = server.id === "zoom-workspace" ? "zoom" : server.id.replaceAll("-", "");
+	const svg = SIMPLE_ICONS[slug];
+	return svg ? `data:image/svg+xml,${encodeURIComponent(svg)}` : void 0;
+}
 const MCP_SERVER_SETUP_AUTH = {
 	bearer: {
 		type: "bearer",
@@ -120,6 +155,8 @@ const CUSTOM_MCP_SERVER_CARD = {
 function getMcpServerIconSrc(server) {
 	if (typeof server.icon === "string") return server.icon;
 	if (server.icon?.src) return server.icon.src;
+	const bundled = bundledSimpleIcon(server);
+	if (bundled) return bundled;
 	return inferFaviconUrl(server.url);
 }
 /** Remote MCP servers whose OAuth metadata exposes a registration_endpoint. */
@@ -425,6 +462,31 @@ const MANUAL_MCP_SERVER_CARDS = [
 			]
 		}
 	},
+	{
+		id: "github",
+		name: "GitHub",
+		url: "https://api.githubcopilot.com/mcp/",
+		description: "Clone, push, and open pull requests as a connected GitHub account",
+		category: MANUAL_CATEGORY,
+		manualSetup: {
+			auth: {
+				type: "bearer",
+				label: "Personal access token (classic)",
+				fields: [{
+					name: "bearerToken",
+					label: "Personal access token",
+					inputType: "password",
+					placeholder: "ghp_…",
+					required: true
+				}]
+			},
+			description: "Paste a classic personal access token with all scopes from the agent's own GitHub account — the account is the access boundary. Git and the GitHub API both authenticate as this account.",
+			links: [{
+				label: "Create a classic token",
+				url: "https://github.com/settings/tokens"
+			}]
+		}
+	},
 	{
 		id: "gmail",
 		name: "Gmail",
@@ -870,6 +932,12 @@ const DEFAULT_MCP_SERVER_CARDS = [
 	...DCR_MCP_SERVER_CARDS,
 	CUSTOM_MCP_SERVER_CARD,
 	...MANUAL_MCP_SERVER_CARDS
-];
+].map((server) => {
+	const icon = bundledSimpleIcon(server);
+	return icon ? {
+		...server,
+		icon
+	} : server;
+});
 //#endregion
 export { CUSTOM_MCP_SERVER_CARD, DCR_MCP_SERVER_CARDS, DEFAULT_MCP_SERVER_CARDS, MANUAL_MCP_SERVER_CARDS, MCP_SERVER_SETUP_AUTH, getMcpServerEntry, getMcpServerIconSrc, getMcpServerRuntimeState };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mcp-b/react-components",
-  "version": "0.46.3",
+  "version": "0.46.4",
   "description": "MCP-B React components built on Base UI and shared design tokens, including Cloudflare Think chat primitives.",
   "homepage": "https://design-system.sigvelo.com",
   "bugs": {
@@ -50,10 +50,11 @@
     "react-icons": "^5.7.0",
     "rehype-slug": "^6.0.0",
     "shiki": "^3.23.0",
+    "simple-icons": "16.28.0",
     "streamdown": "^2.5.0",
     "unist-util-visit": "^5.1.0",
     "yet-another-react-lightbox": "^3.32.2",
-    "@mcp-b/design-tokens": "0.46.3"
+    "@mcp-b/design-tokens": "0.46.4"
   },
   "devDependencies": {
     "@ai-sdk/react": "^3.0.249",