@forwardreach/saas-mcp 0.1.0

package/dist/node/better-auth.js

@@ -0,0 +1,77 @@
+function dateMs(value) {
+    if (!value)
+        return null;
+    const parsed = value instanceof Date ? value.getTime() : Date.parse(value);
+    return Number.isFinite(parsed) ? parsed : null;
+}
+/** Return whether a BetterAuth session satisfies a fresh-auth age window. */
+export function isFreshBetterAuthSession(session, maxAgeMs = 15 * 60 * 1000, now = Date.now()) {
+    if (!session)
+        return false;
+    if (session.fresh === true)
+        return true;
+    const updatedAt = dateMs(session.updatedAt) ?? dateMs(session.createdAt);
+    return updatedAt !== null && now - updatedAt <= maxAgeMs;
+}
+/** Normalize BetterAuth session data into the shared MCP user shape. */
+export function normalizeBetterAuthSessionIdentity(input) {
+    const { user, session = null } = input.result;
+    return {
+        user: {
+            id: user.id,
+            authProviderKey: input.providerKey ?? "better-auth",
+            authIssuer: input.issuer ?? null,
+            authSubject: user.id,
+            email: user.email ?? null,
+            emailVerified: user.emailVerified ?? null,
+            displayName: user.displayName ?? user.name ?? null,
+            imageUrl: user.image ?? null
+        },
+        sessionFresh: isFreshBetterAuthSession(session, input.freshSessionMaxAgeMs),
+        rawSession: session
+    };
+}
+/** Normalize verified JWT claims into the shared MCP user shape. */
+export function normalizeBetterAuthJwtIdentity(input) {
+    return {
+        user: {
+            id: input.claims.sub ?? "",
+            authProviderKey: input.providerKey ?? "better-auth-jwt",
+            authIssuer: input.claims.iss ?? input.issuer ?? null,
+            authSubject: input.claims.sub ?? null,
+            email: input.claims.email ?? null,
+            emailVerified: input.claims.email_verified ?? null,
+            displayName: input.claims.name ?? null,
+            imageUrl: input.claims.picture ?? null
+        },
+        sessionFresh: false,
+        rawClaims: input.claims
+    };
+}
+/** Resolve human identity from a BetterAuth session first, then optional JWT. */
+export async function resolveBetterAuthMcpIdentity(headers, adapter) {
+    const session = adapter.resolveSession ? await adapter.resolveSession(headers) : null;
+    if (session) {
+        return normalizeBetterAuthSessionIdentity({
+            result: session,
+            providerKey: adapter.providerKey,
+            issuer: adapter.issuer,
+            freshSessionMaxAgeMs: adapter.freshSessionMaxAgeMs
+        });
+    }
+    const authorization = headers.get("authorization");
+    const bearer = authorization?.match(/^Bearer\s+(.+)$/i)?.[1]?.trim();
+    if (!bearer || !adapter.verifyJwt)
+        return null;
+    const claims = await adapter.verifyJwt(bearer);
+    return claims ? normalizeBetterAuthJwtIdentity({ claims, providerKey: adapter.providerKey, issuer: adapter.issuer }) : null;
+}
+/** Combine normalized identity with product workspace membership context. */
+export function createMcpHumanIdentityContext(input) {
+    return {
+        user: input.identity.user,
+        workspace: input.workspace,
+        membership: input.membership,
+        sessionFresh: input.identity.sessionFresh
+    };
+}

package/dist/node/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./better-auth.js";
+export * from "./oauth.js";

package/dist/node/index.js

@@ -0,0 +1,2 @@
+export * from "./better-auth.js";
+export * from "./oauth.js";

package/dist/node/oauth.d.ts

@@ -0,0 +1,18 @@
+import { buildMcpAuthorizationServerMetadata, buildMcpBearerChallenge, buildMcpProtectedResourceMetadata } from "../core/urls.js";
+export { buildMcpAuthorizationServerMetadata, buildMcpBearerChallenge, buildMcpProtectedResourceMetadata };
+/** Encode bytes for OAuth/PKCE token material without padding. */
+export declare function base64Url(value: Buffer): string;
+/** Generate a random MCP token with a product-provided prefix. */
+export declare function randomMcpToken(prefix: string, byteLength?: number): string;
+/** Hash raw OAuth/developer tokens before persistence. */
+export declare function hashMcpToken(token: string): string;
+/** Compute an OAuth PKCE S256 code challenge. */
+export declare function pkceS256Challenge(verifier: string): string;
+/** Timing-safe verification of an OAuth PKCE S256 verifier/challenge pair. */
+export declare function verifyPkceS256(verifier: string, challenge: string): boolean;
+/** Add seconds to a Date and return an ISO timestamp. */
+export declare function addSeconds(date: Date, seconds: number): string;
+/** Parse a bearer token from a Request authorization header. */
+export declare function parseBearerToken(request: Request): string | null;
+/** Heuristic used to reject app-session tokens on MCP bearer endpoints. */
+export declare function looksLikeBetterAuthAppToken(token: string): boolean;

package/dist/node/oauth.js

@@ -0,0 +1,39 @@
+import { createHash, randomBytes, timingSafeEqual } from "node:crypto";
+import { buildMcpAuthorizationServerMetadata, buildMcpBearerChallenge, buildMcpProtectedResourceMetadata } from "../core/urls.js";
+export { buildMcpAuthorizationServerMetadata, buildMcpBearerChallenge, buildMcpProtectedResourceMetadata };
+/** Encode bytes for OAuth/PKCE token material without padding. */
+export function base64Url(value) {
+    return value.toString("base64url");
+}
+/** Generate a random MCP token with a product-provided prefix. */
+export function randomMcpToken(prefix, byteLength = 32) {
+    return `${prefix}_${base64Url(randomBytes(byteLength))}`;
+}
+/** Hash raw OAuth/developer tokens before persistence. */
+export function hashMcpToken(token) {
+    return createHash("sha256").update(token).digest("base64url");
+}
+/** Compute an OAuth PKCE S256 code challenge. */
+export function pkceS256Challenge(verifier) {
+    return base64Url(createHash("sha256").update(verifier).digest());
+}
+/** Timing-safe verification of an OAuth PKCE S256 verifier/challenge pair. */
+export function verifyPkceS256(verifier, challenge) {
+    const computed = Buffer.from(pkceS256Challenge(verifier));
+    const expected = Buffer.from(challenge);
+    return computed.length === expected.length && timingSafeEqual(computed, expected);
+}
+/** Add seconds to a Date and return an ISO timestamp. */
+export function addSeconds(date, seconds) {
+    return new Date(date.getTime() + seconds * 1000).toISOString();
+}
+/** Parse a bearer token from a Request authorization header. */
+export function parseBearerToken(request) {
+    const authorization = request.headers.get("authorization");
+    const match = authorization?.match(/^Bearer\s+(.+)$/i);
+    return match?.[1]?.trim() ?? null;
+}
+/** Heuristic used to reject app-session tokens on MCP bearer endpoints. */
+export function looksLikeBetterAuthAppToken(token) {
+    return token.startsWith("better-auth.") || token.startsWith("ba_") || token.split(".").length === 3;
+}

package/dist/react/McpActivity.d.ts

@@ -0,0 +1,32 @@
+import * as React from "react";
+import type { McpManagementClient } from "../client/management.js";
+import type { McpAuditEvent, McpConnectionSummary, McpDeveloperTokenSummary, McpScopeValue } from "../core/types.js";
+/** Props for the MCP activity section. */
+export interface McpActivityProps<S extends McpScopeValue = McpScopeValue> {
+    /** Workspace whose MCP activity is reviewed. */
+    workspace: {
+        id: string;
+        displayName?: string;
+    };
+    /** Current signed-in user. */
+    user: {
+        id: string;
+    };
+    /** Server-provided initial audit events for the workspace. */
+    initialAuditEvents: McpAuditEvent[];
+    /** Connections used to resolve client names and populate the source filter (optional). */
+    connections?: McpConnectionSummary<S>[];
+    /** Developer/access tokens used to resolve token names and populate the source filter (optional). */
+    developerTokens?: McpDeveloperTokenSummary<S>[];
+    /** Optional management client; defaults to `createMcpManagementClient`. */
+    managementClient?: McpManagementClient<S>;
+    /** Optional product renderer for links to affected business records. */
+    renderRecordLink?: (recordId: string) => React.ReactNode;
+}
+/**
+ * MCP activity: a filtered slice of workspace activity (source = MCP). This is a
+ * thin MCP adapter over the presentational `AuditLog` from `@forwardreach/saas-ui`:
+ * it owns MCP-specific data fetching and filters, resolves client/token/user ids
+ * to display labels, and maps `McpAuditEvent`s onto generic `AuditLogEntry`s.
+ */
+export declare function McpActivity<S extends McpScopeValue = McpScopeValue>({ workspace, user, initialAuditEvents, connections, developerTokens, managementClient, renderRecordLink, }: McpActivityProps<S>): import("react/jsx-runtime").JSX.Element;

package/dist/react/McpActivity.js

@@ -0,0 +1,182 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Activity, ExternalLink } from "lucide-react";
+import * as React from "react";
+import { AuditLog } from "@forwardreach/saas-ui";
+import { formatDate, useMcpManagementClient } from "./mcp-settings-shared.js";
+const outcomeOptions = ["created", "updated", "matched", "rejected", "revoked", "error", "partial_success"];
+const activityOptions = ["read", "write", "management"];
+const sourceLabels = { oauth: "OAuth", personal_access_token: "Access token" };
+/**
+ * MCP activity: a filtered slice of workspace activity (source = MCP). This is a
+ * thin MCP adapter over the presentational `AuditLog` from `@forwardreach/saas-ui`:
+ * it owns MCP-specific data fetching and filters, resolves client/token/user ids
+ * to display labels, and maps `McpAuditEvent`s onto generic `AuditLogEntry`s.
+ */
+export function McpActivity({ workspace, user, initialAuditEvents, connections = [], developerTokens = [], managementClient, renderRecordLink, }) {
+    const client = useMcpManagementClient(workspace.id, managementClient);
+    const [auditEvents, setAuditEvents] = React.useState(initialAuditEvents);
+    const [sourceFilter, setSourceFilter] = React.useState("all");
+    const [clientFilter, setClientFilter] = React.useState("all");
+    const [toolFilter, setToolFilter] = React.useState("all");
+    const [outcomeFilter, setOutcomeFilter] = React.useState("all");
+    const [activityFilter, setActivityFilter] = React.useState("all");
+    const [auditLoading, setAuditLoading] = React.useState(false);
+    const [auditError, setAuditError] = React.useState(null);
+    const isFirstAuditRun = React.useRef(true);
+    const sourceOptions = React.useMemo(() => {
+        const oauth = connections.map((connection) => ({ id: connection.clientId, label: connection.clientName, filterKey: "clientId" }));
+        const tokens = developerTokens.map((token) => ({ id: token.tokenId, label: token.name, filterKey: "accessTokenId" }));
+        return [...oauth, ...tokens];
+    }, [connections, developerTokens]);
+    // id -> display label maps for resolving raw ids to human-readable names (RF3).
+    const clientLabels = React.useMemo(() => new Map(connections.map((connection) => [connection.clientId, connection.clientName])), [connections]);
+    const tokenLabels = React.useMemo(() => new Map(developerTokens.map((token) => [token.tokenId, token.name])), [developerTokens]);
+    // Resolve users from both OAuth connections and access tokens so access-token
+    // rows show the user's email even when they have no OAuth connection (RF3).
+    const userLabels = React.useMemo(() => {
+        const labels = new Map();
+        for (const token of developerTokens)
+            if (token.userEmail)
+                labels.set(token.userId, token.userEmail);
+        for (const connection of connections)
+            if (connection.userEmail)
+                labels.set(connection.userId, connection.userEmail);
+        return labels;
+    }, [connections, developerTokens]);
+    const auditFilters = React.useMemo(() => {
+        const filters = {};
+        const selectedSource = sourceOptions.find((option) => option.id === clientFilter);
+        if (sourceFilter !== "all")
+            filters.sourceKind = sourceFilter;
+        if (clientFilter !== "all") {
+            if (selectedSource?.filterKey === "accessTokenId")
+                filters.accessTokenId = clientFilter;
+            else
+                filters.clientId = clientFilter;
+        }
+        if (toolFilter !== "all")
+            filters.toolName = toolFilter;
+        if (outcomeFilter !== "all")
+            filters.outcome = outcomeFilter;
+        if (activityFilter !== "all")
+            filters.activityKind = activityFilter;
+        return filters;
+    }, [activityFilter, clientFilter, outcomeFilter, sourceFilter, sourceOptions, toolFilter]);
+    const filteredEvents = auditEvents.filter((event) => {
+        if (sourceFilter !== "all" && event.sourceKind !== sourceFilter)
+            return false;
+        if (clientFilter !== "all" && event.clientId !== clientFilter && event.accessTokenId !== clientFilter)
+            return false;
+        if (toolFilter !== "all" && event.toolName !== toolFilter)
+            return false;
+        if (outcomeFilter !== "all" && event.outcome !== outcomeFilter)
+            return false;
+        if (activityFilter !== "all" && event.activityKind !== activityFilter)
+            return false;
+        return true;
+    });
+    // Key the effect on the filter *values*, not the object identity. `auditFilters`
+    // gets a fresh identity every render (its inputs, e.g. default arrays, are not
+    // referentially stable), so depending on it directly re-runs the effect each
+    // render — the cleanup then cancels the in-flight fetch before it resolves and
+    // the loading state never clears. A stable string key re-runs the effect only
+    // when a filter actually changes.
+    const auditFilterKey = JSON.stringify(auditFilters);
+    React.useEffect(() => {
+        // Don't fetch on mount; server-provided initial events are already shown.
+        if (isFirstAuditRun.current) {
+            isFirstAuditRun.current = false;
+            return;
+        }
+        let cancelled = false;
+        setAuditLoading(true);
+        setAuditError(null);
+        void client
+            .listAuditEvents(auditFilters)
+            .then((response) => {
+            if (!cancelled)
+                setAuditEvents(response.events);
+        })
+            .catch((error) => {
+            if (!cancelled)
+                setAuditError(error instanceof Error ? error.message : "Audit events could not be loaded.");
+        })
+            .finally(() => {
+            if (!cancelled)
+                setAuditLoading(false);
+        });
+        return () => {
+            cancelled = true;
+        };
+        // `auditFilters` is intentionally read via the stable `auditFilterKey`.
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [auditFilterKey, client]);
+    /** Resolve the acting client/token id to a display name (falls back to the raw id). */
+    function actorLabelFor(event) {
+        if (event.accessTokenId && tokenLabels.has(event.accessTokenId))
+            return tokenLabels.get(event.accessTokenId);
+        return clientLabels.get(event.clientId) ?? event.clientId;
+    }
+    const entries = React.useMemo(() => filteredEvents.map((event) => ({
+        id: event.id,
+        timestamp: event.createdAt,
+        title: event.toolName,
+        actorLabel: actorLabelFor(event),
+        badges: [sourceLabels[event.sourceKind] ?? event.sourceKind, event.activityKind],
+        outcome: event.outcome,
+        targetIds: event.targetRecordIds,
+        details: [
+            { label: "User", value: userLabels.get(event.userId) ?? event.userId },
+            { label: "Client", value: actorLabelFor(event) },
+            { label: "Workspace", value: event.workspaceId },
+        ],
+        metadata: event.metadata,
+    })), 
+    // actorLabelFor depends on the label maps captured above.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [filteredEvents, clientLabels, tokenLabels, userLabels]);
+    const filters = [
+        {
+            id: "source",
+            ariaLabel: "Source",
+            value: sourceFilter,
+            onChange: (value) => setSourceFilter(value),
+            options: [
+                { value: "all", label: "All sources" },
+                { value: "oauth", label: "OAuth" },
+                { value: "personal_access_token", label: "Access token" },
+            ],
+        },
+        {
+            id: "client",
+            ariaLabel: "Client",
+            value: clientFilter,
+            onChange: setClientFilter,
+            options: [{ value: "all", label: "All clients" }, ...sourceOptions.map((option) => ({ value: option.id, label: option.label }))],
+        },
+        {
+            id: "tool",
+            ariaLabel: "Tool",
+            value: toolFilter,
+            onChange: setToolFilter,
+            options: [{ value: "all", label: "All tools" }, ...[...new Set(auditEvents.map((event) => event.toolName))].map((toolName) => ({ value: toolName, label: toolName }))],
+        },
+        {
+            id: "outcome",
+            ariaLabel: "Outcome",
+            value: outcomeFilter,
+            onChange: (value) => setOutcomeFilter(value),
+            options: [{ value: "all", label: "All outcomes" }, ...outcomeOptions.map((outcome) => ({ value: outcome, label: outcome }))],
+        },
+        {
+            id: "activity",
+            ariaLabel: "Activity",
+            value: activityFilter,
+            onChange: (value) => setActivityFilter(value),
+            options: [{ value: "all", label: "All activity" }, ...activityOptions.map((activity) => ({ value: activity, label: activity }))],
+        },
+    ];
+    return (_jsx(AuditLog, { description: "A filtered slice of workspace activity (source = MCP): externally authorized MCP tool calls.", emptyState: "No external MCP activity has been recorded.", entries: entries, error: auditError, filters: filters, formatTimestamp: formatDate, icon: _jsx(Activity, {}), loading: auditLoading, renderTargetLink: renderRecordLink ??
+            (() => (_jsxs("span", { className: "inline-flex items-center gap-1 rounded-md bg-[color:var(--ssui-surface-muted)] px-1.5 py-0.5 text-xs text-[color:var(--ssui-text-muted)]", children: ["Record ", _jsx(ExternalLink, { className: "h-3 w-3" })] }))), title: "MCP activity" }));
+}

package/dist/react/McpConnectedClients.d.ts

@@ -0,0 +1,27 @@
+import type { McpManagementClient } from "../client/management.js";
+import type { McpConnectionSummary, McpScopeValue, McpToolDescriptor } from "../core/types.js";
+/** Props for the connected-clients section. */
+export interface McpConnectedClientsProps<S extends McpScopeValue = McpScopeValue> {
+    /** Workspace whose connections are listed. */
+    workspace: {
+        id: string;
+        displayName?: string;
+    };
+    /** Current signed-in user managing MCP access. */
+    user: {
+        id: string;
+    };
+    /** Product-owned MCP tool descriptors used to show granted tools per connection. */
+    tools: Array<McpToolDescriptor<S> & {
+        activityKind?: "read" | "write";
+    }>;
+    /** Server-provided initial OAuth connections for the workspace. */
+    initialConnections: McpConnectionSummary<S>[];
+    /** Optional management client; defaults to `createMcpManagementClient`. */
+    managementClient?: McpManagementClient<S>;
+}
+/**
+ * Connected clients: lists active and revoked MCP OAuth connections with an
+ * expandable detail view and per-connection revoke.
+ */
+export declare function McpConnectedClients<S extends McpScopeValue = McpScopeValue>({ workspace, user, tools, initialConnections, managementClient, }: McpConnectedClientsProps<S>): import("react/jsx-runtime").JSX.Element;

package/dist/react/McpConnectedClients.js

@@ -0,0 +1,34 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ShieldCheck, Trash2 } from "lucide-react";
+import * as React from "react";
+import { Button, SettingsSection } from "@forwardreach/saas-ui";
+import { hasRequiredMcpScopes } from "../core/scopes.js";
+import { cx, formatDate, ScopePills, statusLabel, useMcpManagementClient } from "./mcp-settings-shared.js";
+/**
+ * Connected clients: lists active and revoked MCP OAuth connections with an
+ * expandable detail view and per-connection revoke.
+ */
+export function McpConnectedClients({ workspace, user, tools, initialConnections, managementClient, }) {
+    const client = useMcpManagementClient(workspace.id, managementClient);
+    const [connections, setConnections] = React.useState(initialConnections);
+    const [pendingId, setPendingId] = React.useState(null);
+    async function revokeConnection(grantId) {
+        setPendingId(grantId);
+        try {
+            const response = await client.revokeConnection(grantId, { userId: user.id });
+            setConnections((current) => current.map((connection) => (connection.grantId === grantId ? response.connection : connection)));
+        }
+        finally {
+            setPendingId(null);
+        }
+    }
+    return (_jsx(SettingsSection, { action: _jsxs("span", { className: "text-xs text-[color:var(--ssui-text-muted)]", children: [connections.length, " grants"] }), description: "AI clients connected to this workspace through interactive OAuth.", icon: _jsx(ShieldCheck, {}), title: "Connected clients", children: _jsxs("div", { className: "divide-y divide-[color:var(--ssui-border)] rounded-[var(--ssui-radius)] border border-[color:var(--ssui-border)]", children: [connections.length === 0 && (_jsx("div", { className: "px-3 py-6 text-center text-sm text-[color:var(--ssui-text-muted)]", children: "No MCP clients are connected." })), connections.map((connection) => {
+                    const status = statusLabel({ revokedAt: connection.revokedAt });
+                    const grantedTools = tools.filter((tool) => hasRequiredMcpScopes(connection.scopes, tool.requiredScopes));
+                    return (_jsxs("details", { className: "group", children: [_jsxs("summary", { className: "flex cursor-pointer list-none items-start justify-between gap-3 px-3 py-3", children: [_jsxs("div", { className: "min-w-0", children: [_jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [_jsx("span", { className: "font-medium", children: connection.clientName }), _jsxs("span", { className: cx("inline-flex items-center gap-1 rounded-md px-1.5 py-0.5 text-xs", status.className), children: [_jsx(status.Icon, { className: "h-3 w-3" }), status.label] })] }), _jsx("div", { className: "mt-1 break-all text-xs text-[color:var(--ssui-text-muted)]", children: connection.redirectOrigin ?? "Unknown origin" }), _jsx("div", { className: "mt-2", children: _jsx(ScopePills, { scopes: connection.scopes }) })] }), _jsxs(Button, { disabled: Boolean(connection.revokedAt) || pendingId === connection.grantId, onClick: (event) => {
+                                            event.preventDefault();
+                                            void revokeConnection(connection.grantId);
+                                        }, title: "Revoke connection", type: "button", variant: "ghost", children: [_jsx(Trash2, { className: "h-4 w-4" }), "Revoke"] })] }), _jsxs("div", { className: "grid gap-3 border-t border-[color:var(--ssui-border)] px-3 py-3 text-sm md:grid-cols-2", children: [_jsxs("div", { className: "space-y-1 text-xs text-[color:var(--ssui-text-muted)]", children: [_jsxs("div", { children: ["Created: ", formatDate(connection.createdAt)] }), _jsxs("div", { children: ["Last used: ", formatDate(connection.lastUsedAt)] }), _jsxs("div", { children: ["Expires: ", formatDate(connection.expiresAt)] }), _jsxs("div", { children: ["Active sessions: ", connection.activeSessionCount] }), _jsxs("div", { className: "break-all", children: ["Resource: ", connection.resource] })] }), _jsxs("div", { children: [_jsx("div", { className: "mb-2 text-xs font-medium uppercase text-[color:var(--ssui-text-muted)]", children: "Granted tools" }), grantedTools.length === 0 ? (_jsx("div", { className: "text-xs text-[color:var(--ssui-text-muted)]", children: "No tools available for these scopes." })) : (_jsx("div", { className: "mb-4 space-y-1 text-xs text-[color:var(--ssui-text-muted)]", children: grantedTools.map((tool) => (_jsxs("div", { className: "flex justify-between gap-2", children: [_jsx("span", { children: tool.title }), _jsx("span", { className: "font-mono", children: tool.name })] }, tool.name))) })), _jsx("div", { className: "mb-2 text-xs font-medium uppercase text-[color:var(--ssui-text-muted)]", children: "Recent activity" }), connection.recentAuditEvents.length === 0 ? (_jsx("div", { className: "text-xs text-[color:var(--ssui-text-muted)]", children: "No activity recorded for this connection." })) : (_jsx("div", { className: "space-y-1 text-xs text-[color:var(--ssui-text-muted)]", children: connection.recentAuditEvents.map((event) => (_jsxs("div", { className: "flex justify-between gap-2", children: [_jsx("span", { children: event.toolName }), _jsx("span", { children: event.outcome })] }, event.id))) }))] })] })] }, connection.grantId));
+                })] }) }));
+}

package/dist/react/McpConnectorOverview.d.ts

@@ -0,0 +1,21 @@
+import * as React from "react";
+/** Props for the connector-overview section. */
+export interface McpConnectorOverviewProps {
+    /** Canonical MCP connector URL to copy into remote clients. */
+    connectorUrl: string;
+    /** Workspace whose connector is being configured. */
+    workspaceName: string;
+    /** Whether the connector URL is suitable for remote HTTPS clients. */
+    publicHttpsReady: boolean;
+    /** Public application base URL used for HTTPS readiness messaging. */
+    appBaseUrl: string;
+    /** Optional product-specific HTTPS warning copy. */
+    httpsWarningText?: string;
+    /** Optional description override for the section body. */
+    description?: React.ReactNode;
+}
+/**
+ * Connector overview: the copyable connector URL plus the public-HTTPS warning
+ * shown when the deployment base URL is not a public HTTPS origin.
+ */
+export declare function McpConnectorOverview({ connectorUrl, workspaceName, publicHttpsReady, appBaseUrl, httpsWarningText, description, }: McpConnectorOverviewProps): import("react/jsx-runtime").JSX.Element;

package/dist/react/McpConnectorOverview.js

@@ -0,0 +1,12 @@
+"use client";
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { PlugZap } from "lucide-react";
+import * as React from "react";
+import { CopyField, InlineNotice, SettingsSection } from "@forwardreach/saas-ui";
+/**
+ * Connector overview: the copyable connector URL plus the public-HTTPS warning
+ * shown when the deployment base URL is not a public HTTPS origin.
+ */
+export function McpConnectorOverview({ connectorUrl, workspaceName, publicHttpsReady, appBaseUrl, httpsWarningText, description, }) {
+    return (_jsxs("div", { className: "space-y-4", children: [!publicHttpsReady && (_jsxs(InlineNotice, { title: httpsWarningText ?? "Remote AI coworkers need a public HTTPS URL.", variant: "warning", children: ["Current base URL: ", appBaseUrl] })), _jsx(SettingsSection, { description: description ?? `Add this URL as a remote MCP connector in your AI client to connect ${workspaceName}.`, icon: _jsx(PlugZap, {}), title: "Connector URL", children: _jsx(CopyField, { label: "Connector URL", value: connectorUrl }) })] }));
+}

package/dist/react/McpConsentPanel.d.ts

@@ -0,0 +1,47 @@
+import type { McpScopeDefinition, McpScopeValue, McpToolDescriptor } from "../core/types.js";
+/** Props for the shared MCP OAuth consent review surface. */
+export interface McpConsentPanelProps<S extends McpScopeValue = McpScopeValue> {
+    /** Registered OAuth client requesting MCP access. */
+    client: {
+        id: string;
+        name: string;
+        displayName?: string | null;
+    };
+    /** Origin derived from the selected redirect URI. */
+    redirectOrigin: string;
+    /** Workspace the grant will be bound to. */
+    workspace: {
+        id: string;
+        displayName: string;
+    };
+    /** Signed-in user approving or canceling the grant. */
+    user: {
+        id: string;
+        email: string | null;
+        displayName?: string | null;
+    };
+    /** Requested scopes after product validation/normalization. */
+    requestedScopes: readonly S[];
+    /** Product scope labels and descriptions keyed by scope value. */
+    scopeDefinitions: Record<S, Omit<McpScopeDefinition<S>, "scope">>;
+    /** Product tools implied by the requested scopes. */
+    allowedTools: Array<McpToolDescriptor<S>>;
+    /** MCP resource URI the resulting tokens will target. */
+    resource: string;
+    /** Product route that accepts the POSTed approve/cancel decision. */
+    formAction: string;
+    /** OAuth request fields that must be posted back with the decision. */
+    hiddenFields: Record<string, string>;
+    /** Optional label for the approve submit button. */
+    approveLabel?: string;
+    /** Optional label for the cancel submit button. */
+    cancelLabel?: string;
+}
+/**
+ * Shared consent panel for first-party MCP OAuth authorization.
+ *
+ * The component displays the client, workspace, requested scopes, allowed tools,
+ * and resource URI, then posts an explicit approve/cancel decision to the
+ * product-owned authorization endpoint.
+ */
+export declare function McpConsentPanel<S extends McpScopeValue = McpScopeValue>({ client, redirectOrigin, workspace, user, requestedScopes, scopeDefinitions, allowedTools, resource, formAction, hiddenFields, approveLabel, cancelLabel }: McpConsentPanelProps<S>): import("react/jsx-runtime").JSX.Element;

package/dist/react/McpConsentPanel.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { ShieldCheck, XCircle } from "lucide-react";
+import { Button } from "@forwardreach/saas-ui";
+/**
+ * Shared consent panel for first-party MCP OAuth authorization.
+ *
+ * The component displays the client, workspace, requested scopes, allowed tools,
+ * and resource URI, then posts an explicit approve/cancel decision to the
+ * product-owned authorization endpoint.
+ */
+export function McpConsentPanel({ client, redirectOrigin, workspace, user, requestedScopes, scopeDefinitions, allowedTools, resource, formAction, hiddenFields, approveLabel = "Approve", cancelLabel = "Cancel" }) {
+    const clientName = client.displayName || client.name;
+    return (_jsxs("section", { className: "space-y-5", children: [_jsxs("header", { className: "flex items-start gap-3", children: [_jsx("div", { className: "grid h-10 w-10 shrink-0 place-items-center rounded-md border border-zinc-200 bg-zinc-50", children: _jsx(ShieldCheck, { className: "h-5 w-5" }) }), _jsxs("div", { children: [_jsxs("h1", { className: "text-xl font-semibold tracking-normal md:text-2xl", children: ["Connect ", clientName] }), _jsxs("p", { className: "text-sm text-zinc-600", children: ["Authorize this MCP client for ", workspace.displayName, "."] })] })] }), _jsxs("div", { className: "grid gap-3 md:grid-cols-2", children: [_jsxs("div", { className: "rounded-md border border-zinc-200 bg-white p-4", children: [_jsx("div", { className: "text-xs font-medium uppercase text-zinc-500", children: "Client" }), _jsx("div", { className: "mt-1 text-sm font-medium", children: clientName }), _jsx("div", { className: "mt-1 break-all text-xs text-zinc-600", children: redirectOrigin })] }), _jsxs("div", { className: "rounded-md border border-zinc-200 bg-white p-4", children: [_jsx("div", { className: "text-xs font-medium uppercase text-zinc-500", children: "Workspace" }), _jsx("div", { className: "mt-1 text-sm font-medium", children: workspace.displayName }), _jsx("div", { className: "mt-1 text-xs text-zinc-600", children: user.email })] })] }), _jsxs("section", { className: "rounded-md border border-zinc-200 bg-white p-4", children: [_jsx("h2", { className: "text-sm font-semibold", children: "Requested Access" }), _jsx("div", { className: "mt-3 grid gap-2", children: requestedScopes.map((scope) => {
+                            const definition = scopeDefinitions[scope];
+                            return (_jsxs("div", { className: "rounded-md border border-zinc-200 bg-zinc-50 p-3", children: [_jsx("div", { className: "text-sm font-medium", children: definition?.title ?? scope }), definition?.description && _jsx("div", { className: "mt-1 text-xs text-zinc-600", children: definition.description }), _jsx("div", { className: "mt-2 font-mono text-xs text-zinc-500", children: scope })] }, scope));
+                        }) })] }), _jsxs("section", { className: "rounded-md border border-zinc-200 bg-white p-4", children: [_jsx("h2", { className: "text-sm font-semibold", children: "Allowed MCP Actions" }), _jsx("div", { className: "mt-3 divide-y divide-zinc-200 rounded-md border border-zinc-200", children: allowedTools.map((tool) => (_jsxs("div", { className: "flex items-start justify-between gap-3 px-3 py-2.5", children: [_jsxs("div", { children: [_jsx("div", { className: "text-sm font-medium", children: tool.title }), _jsx("div", { className: "mt-1 text-xs text-zinc-600", children: tool.description })] }), _jsx("span", { className: "shrink-0 rounded-md bg-zinc-100 px-1.5 py-0.5 text-xs text-zinc-600", children: tool.annotations?.readOnlyHint ? "Read" : "Write" })] }, tool.name))) })] }), _jsxs("section", { className: "rounded-md border border-zinc-200 bg-white p-4", children: [_jsx("h2", { className: "text-sm font-semibold", children: "MCP Resource" }), _jsx("div", { className: "mt-2 break-all rounded-md border border-zinc-200 bg-zinc-50 px-3 py-2 font-mono text-xs text-zinc-600", children: resource })] }), _jsxs("form", { action: formAction, className: "flex flex-col gap-2 sm:flex-row", method: "post", children: [Object.entries(hiddenFields).map(([name, value]) => (_jsx("input", { name: name, type: "hidden", value: value }, name))), _jsxs(Button, { className: "sm:w-auto", name: "consent_action", type: "submit", value: "approve", children: [_jsx(ShieldCheck, { className: "h-4 w-4" }), approveLabel] }), _jsxs(Button, { className: "sm:w-auto", name: "consent_action", type: "submit", value: "cancel", variant: "secondary", children: [_jsx(XCircle, { className: "h-4 w-4" }), cancelLabel] })] })] }));
+}

package/dist/react/McpDeveloperTokens.d.ts

@@ -0,0 +1,27 @@
+import type { McpManagementClient } from "../client/management.js";
+import type { McpDeveloperTokenSummary, McpScopeDefinition, McpScopeValue } from "../core/types.js";
+/** Props for the developer-tokens section. */
+export interface McpDeveloperTokensProps<S extends McpScopeValue = McpScopeValue> {
+    /** Product name used in placeholder copy. */
+    productName: string;
+    /** Workspace whose developer tokens are managed. */
+    workspace: {
+        id: string;
+        displayName?: string;
+    };
+    /** Current signed-in user creating and revoking tokens. */
+    user: {
+        id: string;
+    };
+    /** Product-supported MCP scopes offered during token creation. */
+    scopes: McpScopeDefinition<S>[];
+    /** Server-provided initial developer tokens for the workspace. */
+    initialDeveloperTokens: McpDeveloperTokenSummary<S>[];
+    /** Optional management client; defaults to `createMcpManagementClient`. */
+    managementClient?: McpManagementClient<S>;
+}
+/**
+ * Developer tokens: manually copied MCP bearer tokens for local agents,
+ * scripts, and debugging — create form, one-time secret reveal, list, revoke.
+ */
+export declare function McpDeveloperTokens<S extends McpScopeValue = McpScopeValue>({ productName, workspace, user, scopes, initialDeveloperTokens, managementClient, }: McpDeveloperTokensProps<S>): import("react/jsx-runtime").JSX.Element;

package/dist/react/McpDeveloperTokens.js

@@ -0,0 +1,46 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { KeyRound, Trash2 } from "lucide-react";
+import * as React from "react";
+import { Button, CopyField, SettingsSection } from "@forwardreach/saas-ui";
+import { cx, formatDate, ScopePills, statusLabel, useMcpManagementClient } from "./mcp-settings-shared.js";
+/**
+ * Developer tokens: manually copied MCP bearer tokens for local agents,
+ * scripts, and debugging — create form, one-time secret reveal, list, revoke.
+ */
+export function McpDeveloperTokens({ productName, workspace, user, scopes, initialDeveloperTokens, managementClient, }) {
+    const client = useMcpManagementClient(workspace.id, managementClient);
+    const [developerTokens, setDeveloperTokens] = React.useState(initialDeveloperTokens);
+    const [createdSecret, setCreatedSecret] = React.useState(null);
+    const [pendingId, setPendingId] = React.useState(null);
+    async function revokeDeveloperToken(tokenId) {
+        setPendingId(tokenId);
+        try {
+            const response = await client.revokeDeveloperToken(tokenId, { userId: user.id });
+            setDeveloperTokens((current) => current.map((token) => (token.tokenId === tokenId ? response.token : token)));
+        }
+        finally {
+            setPendingId(null);
+        }
+    }
+    async function createDeveloperToken(event) {
+        event.preventDefault();
+        const formElement = event.currentTarget;
+        const form = new FormData(formElement);
+        const selectedScopes = form.getAll("scopes").map(String);
+        const response = await client.createDeveloperToken({
+            userId: user.id,
+            name: String(form.get("name") ?? ""),
+            scopes: selectedScopes,
+            expiresInDays: Number(form.get("expiresInDays") ?? 30),
+        });
+        setDeveloperTokens((current) => [response.token, ...current.filter((token) => token.tokenId !== response.token.tokenId)]);
+        setCreatedSecret({ tokenId: response.token.tokenId, rawToken: response.rawToken });
+        formElement.reset();
+    }
+    const inputClass = "h-10 w-full rounded-[var(--ssui-radius)] border border-[color:var(--ssui-border)] bg-[color:var(--ssui-surface)] px-3 text-sm text-[color:var(--ssui-text)]";
+    return (_jsxs(SettingsSection, { description: "Manually copied bearer tokens for local agents, scripts, and debugging.", icon: _jsx(KeyRound, {}), title: "Access tokens", children: [_jsxs("form", { className: "grid gap-3 border-b border-[color:var(--ssui-border)] pb-4 md:grid-cols-[minmax(0,1fr)_auto_auto]", onSubmit: createDeveloperToken, children: [_jsxs("label", { className: "block", children: [_jsx("span", { className: "mb-1.5 block text-xs font-medium text-[color:var(--ssui-text-muted)]", children: "Token name" }), _jsx("input", { className: inputClass, name: "name", placeholder: `Local ${productName} token`, required: true })] }), _jsxs("label", { className: "block", children: [_jsx("span", { className: "mb-1.5 block text-xs font-medium text-[color:var(--ssui-text-muted)]", children: "Expiration" }), _jsxs("select", { className: cx(inputClass, "min-w-32"), defaultValue: "30", name: "expiresInDays", children: [_jsx("option", { value: "7", children: "7 days" }), _jsx("option", { value: "30", children: "30 days" }), _jsx("option", { value: "90", children: "90 days" })] })] }), _jsxs("div", { children: [_jsx("span", { className: "mb-1.5 block text-xs font-medium text-[color:var(--ssui-text-muted)]", children: "Scopes" }), _jsx("div", { className: "flex min-h-10 flex-wrap items-center gap-2", children: scopes.map((scope, index) => (_jsxs("label", { className: "flex items-center gap-1.5 text-xs text-[color:var(--ssui-text-muted)]", children: [_jsx("input", { defaultChecked: index === 0, name: "scopes", type: "checkbox", value: scope.scope }), scope.title] }, scope.scope))) })] }), _jsx("div", { className: "md:col-span-3", children: _jsxs(Button, { type: "submit", children: [_jsx(KeyRound, { className: "h-4 w-4" }), "Create token"] }) })] }), createdSecret && (_jsxs("div", { className: "mt-4 space-y-2 rounded-[var(--ssui-radius)] border border-[color:var(--ssui-border)] bg-[color:var(--ssui-surface-muted)] p-3", children: [_jsxs("div", { children: [_jsx("div", { className: "text-sm font-medium", children: "New token secret" }), _jsx("div", { className: "mt-1 text-xs text-[color:var(--ssui-text-muted)]", children: "This secret is shown only now." })] }), _jsx(CopyField, { label: "Access token", value: createdSecret.rawToken })] })), _jsxs("div", { className: "mt-4 divide-y divide-[color:var(--ssui-border)] rounded-[var(--ssui-radius)] border border-[color:var(--ssui-border)]", children: [developerTokens.length === 0 && (_jsx("div", { className: "px-3 py-6 text-center text-sm text-[color:var(--ssui-text-muted)]", children: "No access tokens have been created." })), developerTokens.map((token) => {
+                        const status = statusLabel(token);
+                        return (_jsxs("div", { className: "grid gap-3 px-3 py-3 md:grid-cols-[minmax(0,1fr)_auto]", children: [_jsxs("div", { className: "min-w-0", children: [_jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [_jsx("span", { className: "font-medium", children: token.name }), _jsxs("span", { className: cx("inline-flex items-center gap-1 rounded-md px-1.5 py-0.5 text-xs", status.className), children: [_jsx(status.Icon, { className: "h-3 w-3" }), status.label] })] }), _jsx("div", { className: "mt-2", children: _jsx(ScopePills, { scopes: token.scopes }) }), _jsxs("div", { className: "mt-2 grid gap-1 text-xs text-[color:var(--ssui-text-muted)] md:grid-cols-3", children: [_jsxs("div", { children: ["Created: ", formatDate(token.createdAt)] }), _jsxs("div", { children: ["Expires: ", formatDate(token.expiresAt)] }), _jsxs("div", { children: ["Last used: ", formatDate(token.lastUsedAt)] })] })] }), _jsxs(Button, { disabled: Boolean(token.revokedAt) || pendingId === token.tokenId, onClick: () => void revokeDeveloperToken(token.tokenId), title: "Revoke access token", type: "button", variant: "ghost", children: [_jsx(Trash2, { className: "h-4 w-4" }), "Revoke"] })] }, token.tokenId));
+                    })] })] }));
+}