@mcp-b/react-components 0.6.4 → 0.7.0

package/dist/styles/message-scroller.css

@@ -0,0 +1,90 @@
+.message-scroller {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+  min-height: 0;
+  overflow: hidden;
+  font-family: var(--sigvelo-font-sans);
+  color: var(--sigvelo-color-text);
+}
+
+.message-scroller__viewport {
+  width: 100%;
+  height: 100%;
+  min-width: 0;
+  min-height: 0;
+  overflow-y: auto;
+  overflow-x: hidden;
+  overscroll-behavior: contain;
+  scrollbar-gutter: stable;
+  contain: content;
+}
+
+.message-scroller__content {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  min-height: 100%;
+}
+
+.message-scroller__item {
+  min-width: 0;
+  flex-shrink: 0;
+}
+
+.message-scroller__button {
+  position: absolute;
+  inset-inline-start: 50%;
+  inset-block-end: 1rem;
+  z-index: 1;
+  translate: -50% 0;
+  box-shadow: var(--sigvelo-shadow-sm);
+  background-color: var(--sigvelo-color-surface);
+  transition:
+    opacity var(--sigvelo-duration-fast) var(--sigvelo-ease-standard),
+    scale var(--sigvelo-duration-fast) var(--sigvelo-ease-standard),
+    translate var(--sigvelo-duration-fast) var(--sigvelo-ease-standard);
+}
+
+.message-scroller__button[data-direction="start"] {
+  inset-block-start: 1rem;
+  inset-block-end: auto;
+}
+
+.message-scroller__button[data-active="false"] {
+  pointer-events: none;
+  opacity: 0;
+  scale: 0.95;
+}
+
+.message-scroller__button[data-direction="end"][data-active="false"] {
+  translate: -50% 0.5rem;
+}
+
+.message-scroller__button[data-direction="start"][data-active="false"] {
+  translate: -50% -0.5rem;
+}
+
+.message-scroller__button[data-direction="start"] svg {
+  rotate: 180deg;
+}
+
+.message-scroller__button-label {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip-path: inset(50%);
+  white-space: nowrap;
+  border: 0;
+}
+
+@media (forced-colors: active) {
+  .message-scroller__button {
+    border: 1px solid CanvasText;
+  }
+}

package/dist/styles/message.css

@@ -54,7 +54,8 @@
 }
 
 .message__content :where(pre) {
-  overflow: auto;
+  overflow-x: auto;
+  overflow-y: clip;
 }
 
 .message__response {

package/dist/styles/scrollbars.css

@@ -2,13 +2,21 @@
   --scrollbar-thumb: var(--app-scrollbar-thumb, var(--sigvelo-color-neutral-border-muted));
   --scrollbar-track: var(--app-scrollbar-track, var(--sigvelo-color-neutral-bg-subtle));
 
-  overflow: auto;
-  overscroll-behavior: contain;
   scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
   scrollbar-gutter: stable;
   scrollbar-width: thin;
 }
 
+:where(.message__content pre) {
+  overflow-x: auto;
+  overflow-y: clip;
+}
+
+:where(.observability-table-wrap) {
+  overflow: auto;
+  overscroll-behavior: contain;
+}
+
 @media (prefers-contrast: more) {
   :where(.message__content pre, .observability-table-wrap) {
     --scrollbar-thumb: var(--sigvelo-color-text);

package/dist/styles/streamdown.css

@@ -250,6 +250,7 @@ button[data-streamdown="link"] {
 
 [data-streamdown="code-block-body"] {
   overflow-x: auto;
+  overflow-y: clip;
   border-radius: var(--sigvelo-radius-md);
 }
 
@@ -261,6 +262,7 @@ button[data-streamdown="link"] {
   font-family: var(--sigvelo-font-mono);
   font-size: 0.8125rem;
   line-height: 1.55;
+  overflow: visible;
 }
 
 /* The code plugin emits one <span class="block"> per line with no newline

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

@@ -7,7 +7,21 @@ interface McpServerSetupLink {
   label: string;
   url: string;
 }
+type McpServerSetupAuthFieldName = "bearerToken" | "clientId" | "clientSecret" | "redirectUrl" | "scope";
+interface McpServerSetupAuthField {
+  name: McpServerSetupAuthFieldName;
+  label: string;
+  inputType?: "password" | "text" | "url";
+  placeholder?: string;
+  required?: boolean;
+}
+interface McpServerSetupAuth {
+  type: "bearer" | "manual_oauth_client" | "none";
+  label: string;
+  fields: readonly McpServerSetupAuthField[];
+}
 interface McpServerManualSetup {
+  auth: McpServerSetupAuth;
   description: string;
   links: readonly McpServerSetupLink[];
 }
@@ -22,6 +36,70 @@ interface McpServerCard {
   statusLabel?: string;
   manualSetup?: McpServerManualSetup;
 }
+declare const MCP_SERVER_SETUP_AUTH: {
+  readonly bearer: {
+    readonly type: "bearer";
+    readonly label: "Bearer / API key";
+    readonly fields: readonly [{
+      readonly name: "bearerToken";
+      readonly label: "API key / Bearer token";
+      readonly inputType: "password";
+      readonly placeholder: "Paste token";
+      readonly required: true;
+    }];
+  };
+  readonly manualOAuthClient: {
+    readonly type: "manual_oauth_client";
+    readonly label: "OAuth client ID";
+    readonly fields: readonly [{
+      readonly name: "clientId";
+      readonly label: "OAuth client ID";
+      readonly placeholder: "Client ID";
+      readonly required: true;
+    }, {
+      readonly name: "redirectUrl";
+      readonly label: "Redirect URL";
+      readonly inputType: "url";
+      readonly placeholder: "Registered OAuth callback URL";
+    }, {
+      readonly name: "scope";
+      readonly label: "Scope";
+      readonly placeholder: "Space-separated scopes";
+    }];
+  };
+  readonly manualOAuthClientSecret: {
+    readonly type: "manual_oauth_client";
+    readonly label: "OAuth client ID + secret";
+    readonly fields: readonly [{
+      readonly name: "clientId";
+      readonly label: "OAuth client ID";
+      readonly placeholder: "Client ID";
+      readonly required: true;
+    }, {
+      readonly name: "clientSecret";
+      readonly label: "OAuth client secret";
+      readonly inputType: "password";
+      readonly placeholder: "Client secret";
+      readonly required: true;
+    }, {
+      readonly name: "redirectUrl";
+      readonly label: "Redirect URL";
+      readonly inputType: "url";
+      readonly placeholder: "Registered OAuth callback URL";
+    }, {
+      readonly name: "scope";
+      readonly label: "Scope";
+      readonly placeholder: "Space-separated scopes";
+    }];
+  };
+  readonly none: {
+    readonly type: "none";
+    readonly label: "No auth";
+    readonly fields: readonly [];
+  };
+};
+declare function getMcpServerIconSrc(server: Pick<McpServerCard, "icon" | "url">): string | undefined;
+declare function inferMcpServerFaviconUrl(url: string): string | undefined;
 /** Remote MCP servers whose OAuth metadata exposes a registration_endpoint. */
 declare const DCR_MCP_SERVER_CARDS: readonly [{
   readonly id: "airtable";
@@ -257,6 +335,31 @@ declare const MANUAL_MCP_SERVER_CARDS: readonly [{
   readonly category: "Manual";
   readonly icon: "https://cdn.simpleicons.org/asana/F06A6A";
   readonly manualSetup: {
+    readonly auth: {
+      readonly type: "manual_oauth_client";
+      readonly label: "OAuth client ID + secret";
+      readonly fields: readonly [{
+        readonly name: "clientId";
+        readonly label: "OAuth client ID";
+        readonly placeholder: "Client ID";
+        readonly required: true;
+      }, {
+        readonly name: "clientSecret";
+        readonly label: "OAuth client secret";
+        readonly inputType: "password";
+        readonly placeholder: "Client secret";
+        readonly required: true;
+      }, {
+        readonly name: "redirectUrl";
+        readonly label: "Redirect URL";
+        readonly inputType: "url";
+        readonly placeholder: "Registered OAuth callback URL";
+      }, {
+        readonly name: "scope";
+        readonly label: "Scope";
+        readonly placeholder: "Space-separated scopes";
+      }];
+    };
     readonly description: "Create an Asana MCP app, configure its redirect URL and workspace distribution, then connect with the app client ID and secret.";
     readonly links: readonly [{
       readonly label: "Developer console";
@@ -277,6 +380,25 @@ declare const MANUAL_MCP_SERVER_CARDS: readonly [{
   readonly category: "Manual";
   readonly icon: "https://cdn.simpleicons.org/gmail/EA4335";
   readonly manualSetup: {
+    readonly auth: {
+      readonly type: "manual_oauth_client";
+      readonly label: "OAuth client ID";
+      readonly fields: readonly [{
+        readonly name: "clientId";
+        readonly label: "OAuth client ID";
+        readonly placeholder: "Client ID";
+        readonly required: true;
+      }, {
+        readonly name: "redirectUrl";
+        readonly label: "Redirect URL";
+        readonly inputType: "url";
+        readonly placeholder: "Registered OAuth callback URL";
+      }, {
+        readonly name: "scope";
+        readonly label: "Scope";
+        readonly placeholder: "Space-separated scopes";
+      }];
+    };
     readonly description: "Enable Gmail and Gmail MCP APIs, configure OAuth consent, add Gmail read/compose scopes, and create a web OAuth client.";
     readonly links: readonly [{
       readonly label: "Setup guide";
@@ -300,6 +422,25 @@ declare const MANUAL_MCP_SERVER_CARDS: readonly [{
   readonly category: "Manual";
   readonly icon: "https://cdn.simpleicons.org/googlecalendar/4285F4";
   readonly manualSetup: {
+    readonly auth: {
+      readonly type: "manual_oauth_client";
+      readonly label: "OAuth client ID";
+      readonly fields: readonly [{
+        readonly name: "clientId";
+        readonly label: "OAuth client ID";
+        readonly placeholder: "Client ID";
+        readonly required: true;
+      }, {
+        readonly name: "redirectUrl";
+        readonly label: "Redirect URL";
+        readonly inputType: "url";
+        readonly placeholder: "Registered OAuth callback URL";
+      }, {
+        readonly name: "scope";
+        readonly label: "Scope";
+        readonly placeholder: "Space-separated scopes";
+      }];
+    };
     readonly description: "Enable Calendar and Calendar MCP APIs, configure OAuth consent, add calendar read/freebusy scopes, and create a web OAuth client.";
     readonly links: readonly [{
       readonly label: "Setup guide";
@@ -323,6 +464,25 @@ declare const MANUAL_MCP_SERVER_CARDS: readonly [{
   readonly category: "Manual";
   readonly icon: "https://cdn.simpleicons.org/googlechat/00AC47";
   readonly manualSetup: {
+    readonly auth: {
+      readonly type: "manual_oauth_client";
+      readonly label: "OAuth client ID";
+      readonly fields: readonly [{
+        readonly name: "clientId";
+        readonly label: "OAuth client ID";
+        readonly placeholder: "Client ID";
+        readonly required: true;
+      }, {
+        readonly name: "redirectUrl";
+        readonly label: "Redirect URL";
+        readonly inputType: "url";
+        readonly placeholder: "Registered OAuth callback URL";
+      }, {
+        readonly name: "scope";
+        readonly label: "Scope";
+        readonly placeholder: "Space-separated scopes";
+      }];
+    };
     readonly description: "Enable Chat and Chat MCP APIs, configure a Chat app, add Chat read/send scopes, and create a web OAuth client.";
     readonly links: readonly [{
       readonly label: "Setup guide";
@@ -346,6 +506,25 @@ declare const MANUAL_MCP_SERVER_CARDS: readonly [{
   readonly category: "Manual";
   readonly icon: "https://cdn.simpleicons.org/googledrive/4285F4";
   readonly manualSetup: {
+    readonly auth: {
+      readonly type: "manual_oauth_client";
+      readonly label: "OAuth client ID";
+      readonly fields: readonly [{
+        readonly name: "clientId";
+        readonly label: "OAuth client ID";
+        readonly placeholder: "Client ID";
+        readonly required: true;
+      }, {
+        readonly name: "redirectUrl";
+        readonly label: "Redirect URL";
+        readonly inputType: "url";
+        readonly placeholder: "Registered OAuth callback URL";
+      }, {
+        readonly name: "scope";
+        readonly label: "Scope";
+        readonly placeholder: "Space-separated scopes";
+      }];
+    };
     readonly description: "Enable Drive and Drive MCP APIs, configure OAuth consent, add Drive read/file scopes, and create a web OAuth client.";
     readonly links: readonly [{
       readonly label: "Setup guide";
@@ -369,6 +548,25 @@ declare const MANUAL_MCP_SERVER_CARDS: readonly [{
   readonly category: "Manual";
   readonly icon: "https://cdn.simpleicons.org/google/4285F4";
   readonly manualSetup: {
+    readonly auth: {
+      readonly type: "manual_oauth_client";
+      readonly label: "OAuth client ID";
+      readonly fields: readonly [{
+        readonly name: "clientId";
+        readonly label: "OAuth client ID";
+        readonly placeholder: "Client ID";
+        readonly required: true;
+      }, {
+        readonly name: "redirectUrl";
+        readonly label: "Redirect URL";
+        readonly inputType: "url";
+        readonly placeholder: "Registered OAuth callback URL";
+      }, {
+        readonly name: "scope";
+        readonly label: "Scope";
+        readonly placeholder: "Space-separated scopes";
+      }];
+    };
     readonly description: "Enable People API, configure OAuth consent, add contacts/profile/directory scopes, and create a web OAuth client.";
     readonly links: readonly [{
       readonly label: "Setup guide";
@@ -392,6 +590,25 @@ declare const MANUAL_MCP_SERVER_CARDS: readonly [{
   readonly category: "Manual";
   readonly icon: "https://cdn.simpleicons.org/google/4285F4";
   readonly manualSetup: {
+    readonly auth: {
+      readonly type: "manual_oauth_client";
+      readonly label: "OAuth client ID";
+      readonly fields: readonly [{
+        readonly name: "clientId";
+        readonly label: "OAuth client ID";
+        readonly placeholder: "Client ID";
+        readonly required: true;
+      }, {
+        readonly name: "redirectUrl";
+        readonly label: "Redirect URL";
+        readonly inputType: "url";
+        readonly placeholder: "Registered OAuth callback URL";
+      }, {
+        readonly name: "scope";
+        readonly label: "Scope";
+        readonly placeholder: "Space-separated scopes";
+      }];
+    };
     readonly description: "Enable the Workspace MCP service plus Gmail, Drive, Calendar, and Chat APIs, then configure OAuth consent and readonly search scopes.";
     readonly links: readonly [{
       readonly label: "Setup guide";
@@ -407,6 +624,62 @@ declare const MANUAL_MCP_SERVER_CARDS: readonly [{
       readonly url: "https://console.cloud.google.com/apis/credentials";
     }];
   };
+}, {
+  readonly id: "posthog";
+  readonly name: "PostHog";
+  readonly url: "https://mcp.posthog.com/mcp";
+  readonly description: "Analyze product analytics and feature flags";
+  readonly category: "Manual";
+  readonly icon: "https://cdn.simpleicons.org/posthog/000000";
+  readonly manualSetup: {
+    readonly auth: {
+      readonly type: "bearer";
+      readonly label: "Bearer / API key";
+      readonly fields: readonly [{
+        readonly name: "bearerToken";
+        readonly label: "API key / Bearer token";
+        readonly inputType: "password";
+        readonly placeholder: "Paste token";
+        readonly required: true;
+      }];
+    };
+    readonly description: "Create a PostHog personal API key with the MCP Server preset, then connect with that key as a bearer token.";
+    readonly links: readonly [{
+      readonly label: "MCP docs";
+      readonly url: "https://posthog.com/docs/model-context-protocol";
+    }, {
+      readonly label: "API keys";
+      readonly url: "https://app.posthog.com/settings/user-api-keys";
+    }];
+  };
+}, {
+  readonly id: "firecrawl";
+  readonly name: "Firecrawl";
+  readonly url: "https://mcp.firecrawl.dev/v2/mcp";
+  readonly description: "Search, crawl, scrape, and extract web data";
+  readonly category: "Manual";
+  readonly icon: "https://www.firecrawl.dev/favicon.ico";
+  readonly manualSetup: {
+    readonly auth: {
+      readonly type: "bearer";
+      readonly label: "Bearer / API key";
+      readonly fields: readonly [{
+        readonly name: "bearerToken";
+        readonly label: "API key / Bearer token";
+        readonly inputType: "password";
+        readonly placeholder: "Paste token";
+        readonly required: true;
+      }];
+    };
+    readonly description: "Create a Firecrawl API key, then connect the hosted MCP endpoint with Authorization: Bearer.";
+    readonly links: readonly [{
+      readonly label: "MCP server";
+      readonly url: "https://github.com/firecrawl/firecrawl-mcp-server";
+    }, {
+      readonly label: "API auth";
+      readonly url: "https://docs.firecrawl.dev/api-reference/introduction";
+    }];
+  };
 }, {
   readonly id: "hubspot";
   readonly name: "HubSpot";
@@ -415,6 +688,31 @@ declare const MANUAL_MCP_SERVER_CARDS: readonly [{
   readonly category: "Manual";
   readonly icon: "https://cdn.simpleicons.org/hubspot/FF7A59";
   readonly manualSetup: {
+    readonly auth: {
+      readonly type: "manual_oauth_client";
+      readonly label: "OAuth client ID + secret";
+      readonly fields: readonly [{
+        readonly name: "clientId";
+        readonly label: "OAuth client ID";
+        readonly placeholder: "Client ID";
+        readonly required: true;
+      }, {
+        readonly name: "clientSecret";
+        readonly label: "OAuth client secret";
+        readonly inputType: "password";
+        readonly placeholder: "Client secret";
+        readonly required: true;
+      }, {
+        readonly name: "redirectUrl";
+        readonly label: "Redirect URL";
+        readonly inputType: "url";
+        readonly placeholder: "Registered OAuth callback URL";
+      }, {
+        readonly name: "scope";
+        readonly label: "Scope";
+        readonly placeholder: "Space-separated scopes";
+      }];
+    };
     readonly description: "Create a HubSpot MCP Auth App, configure the redirect URL, and connect with OAuth credentials from a PKCE-capable client.";
     readonly links: readonly [{
       readonly label: "Setup guide";
@@ -432,6 +730,25 @@ declare const MANUAL_MCP_SERVER_CARDS: readonly [{
   readonly category: "Manual";
   readonly icon: "https://www.microsoft.com/favicon.ico";
   readonly manualSetup: {
+    readonly auth: {
+      readonly type: "manual_oauth_client";
+      readonly label: "OAuth client ID";
+      readonly fields: readonly [{
+        readonly name: "clientId";
+        readonly label: "OAuth client ID";
+        readonly placeholder: "Client ID";
+        readonly required: true;
+      }, {
+        readonly name: "redirectUrl";
+        readonly label: "Redirect URL";
+        readonly inputType: "url";
+        readonly placeholder: "Registered OAuth callback URL";
+      }, {
+        readonly name: "scope";
+        readonly label: "Scope";
+        readonly placeholder: "Space-separated scopes";
+      }];
+    };
     readonly description: "Provision the preview tenant resource, register the client, grant delegated MCP permissions, and connect with Microsoft Entra OAuth.";
     readonly links: readonly [{
       readonly label: "Overview";
@@ -449,6 +766,11 @@ declare const MANUAL_MCP_SERVER_CARDS: readonly [{
   readonly category: "Manual";
   readonly icon: "https://www.microsoft.com/favicon.ico";
   readonly manualSetup: {
+    readonly auth: {
+      readonly type: "none";
+      readonly label: "No auth";
+      readonly fields: readonly [];
+    };
     readonly description: "No OAuth is required; add the Streamable HTTP endpoint directly to the MCP client.";
     readonly links: readonly [{
       readonly label: "Setup guide";
@@ -463,6 +785,25 @@ declare const MANUAL_MCP_SERVER_CARDS: readonly [{
   readonly category: "Manual";
   readonly icon: "https://www.salesforce.com/favicon.ico";
   readonly manualSetup: {
+    readonly auth: {
+      readonly type: "manual_oauth_client";
+      readonly label: "OAuth client ID";
+      readonly fields: readonly [{
+        readonly name: "clientId";
+        readonly label: "OAuth client ID";
+        readonly placeholder: "Client ID";
+        readonly required: true;
+      }, {
+        readonly name: "redirectUrl";
+        readonly label: "Redirect URL";
+        readonly inputType: "url";
+        readonly placeholder: "Registered OAuth callback URL";
+      }, {
+        readonly name: "scope";
+        readonly label: "Scope";
+        readonly placeholder: "Space-separated scopes";
+      }];
+    };
     readonly description: "Create a Salesforce External Client App with mcp_api and refresh_token scopes, require PKCE, activate the hosted server, and connect with the consumer key.";
     readonly links: readonly [{
       readonly label: "Client connection";
@@ -483,6 +824,31 @@ declare const MANUAL_MCP_SERVER_CARDS: readonly [{
   readonly category: "Manual";
   readonly icon: "https://slack.com/favicon.ico";
   readonly manualSetup: {
+    readonly auth: {
+      readonly type: "manual_oauth_client";
+      readonly label: "OAuth client ID + secret";
+      readonly fields: readonly [{
+        readonly name: "clientId";
+        readonly label: "OAuth client ID";
+        readonly placeholder: "Client ID";
+        readonly required: true;
+      }, {
+        readonly name: "clientSecret";
+        readonly label: "OAuth client secret";
+        readonly inputType: "password";
+        readonly placeholder: "Client secret";
+        readonly required: true;
+      }, {
+        readonly name: "redirectUrl";
+        readonly label: "Redirect URL";
+        readonly inputType: "url";
+        readonly placeholder: "Registered OAuth callback URL";
+      }, {
+        readonly name: "scope";
+        readonly label: "Scope";
+        readonly placeholder: "Space-separated scopes";
+      }];
+    };
     readonly description: "Create or reuse a Slack app, enable MCP access, add user scopes and redirect URLs, then connect with the app client ID and secret.";
     readonly links: readonly [{
       readonly label: "Slack apps";
@@ -503,6 +869,31 @@ declare const MANUAL_MCP_SERVER_CARDS: readonly [{
   readonly category: "Manual";
   readonly icon: "https://cdn.simpleicons.org/zoom/0B5CFF";
   readonly manualSetup: {
+    readonly auth: {
+      readonly type: "manual_oauth_client";
+      readonly label: "OAuth client ID + secret";
+      readonly fields: readonly [{
+        readonly name: "clientId";
+        readonly label: "OAuth client ID";
+        readonly placeholder: "Client ID";
+        readonly required: true;
+      }, {
+        readonly name: "clientSecret";
+        readonly label: "OAuth client secret";
+        readonly inputType: "password";
+        readonly placeholder: "Client secret";
+        readonly required: true;
+      }, {
+        readonly name: "redirectUrl";
+        readonly label: "Redirect URL";
+        readonly inputType: "url";
+        readonly placeholder: "Registered OAuth callback URL";
+      }, {
+        readonly name: "scope";
+        readonly label: "Scope";
+        readonly placeholder: "Space-separated scopes";
+      }];
+    };
     readonly description: "Create a Zoom Marketplace General app, add the MCP product scopes, configure the client redirect URL, and connect with OAuth credentials.";
     readonly links: readonly [{
       readonly label: "Setup guide";
@@ -517,4 +908,4 @@ declare const MANUAL_MCP_SERVER_CARDS: readonly [{
   };
 }];
 //#endregion
-export { DCR_MCP_SERVER_CARDS, MANUAL_MCP_SERVER_CARDS, McpServerCard, McpServerCardIcon, McpServerManualSetup, McpServerPickerStatus, McpServerSetupLink };
+export { DCR_MCP_SERVER_CARDS, MANUAL_MCP_SERVER_CARDS, MCP_SERVER_SETUP_AUTH, McpServerCard, McpServerCardIcon, McpServerManualSetup, McpServerPickerStatus, McpServerSetupAuth, McpServerSetupAuthField, McpServerSetupAuthFieldName, McpServerSetupLink, getMcpServerIconSrc, inferMcpServerFaviconUrl };