@stigmer/react 0.0.77 → 0.0.79

package/mcp-server/useMcpServerCredentials.js

@@ -13,6 +13,12 @@ import { SYSTEM_ENV_VAR_KEYS } from "../environment/systemEnvVars";
  * computes the missing set and exposes `saveCredentials` to persist
  * them.
  *
+ * **Auth-mode-aware**: when `spec.auth` is configured, the hook
+ * identifies the OAuth-managed variable (`target_env_var`) and
+ * excludes it from `missingVariables` — that variable is acquired
+ * via {@link useMcpServerOAuthConnect}, not a manual form. Additional
+ * non-OAuth vars still appear in `missingVariables` (mixed mode).
+ *
  * Unlike {@link useMcpServerSetup} which manages multi-server setup
  * for session creation, this hook is scoped to a single server and
  * always persists to the personal environment (no one-time option).
@@ -21,15 +27,20 @@ import { SYSTEM_ENV_VAR_KEYS } from "../environment/systemEnvVars";
  *
  * @example
  * ```tsx
- * const { missingVariables, isReady, saveCredentials, isSaving } =
- *   useMcpServerCredentials("acme", mcpServer);
+ * const creds = useMcpServerCredentials("acme", mcpServer);
+ *
+ * // OAuth server — sign-in button + optional manual form
+ * if (creds.authMode === "oauth" && !creds.isOAuthConnected) {
+ *   return <button onClick={startOAuth}>Sign in</button>;
+ * }
  *
- * if (!isReady) {
+ * // Manual vars still needed (mixed mode or manual-only)
+ * if (creds.missingVariables.length > 0) {
  *   return (
  *     <EnvVarForm
- *       variables={missingVariables}
- *       onSubmit={(values) => saveCredentials(values)}
- *       isSubmitting={isSaving}
+ *       variables={creds.missingVariables}
+ *       onSubmit={(values) => creds.saveCredentials(values)}
+ *       isSubmitting={creds.isSaving}
  *       hideSaveToggle
  *     />
  *   );
@@ -38,21 +49,37 @@ import { SYSTEM_ENV_VAR_KEYS } from "../environment/systemEnvVars";
  */
 export function useMcpServerCredentials(org, mcpServer) {
     const personalEnv = usePersonalEnvironment(org);
-    const missingVariables = useMemo(() => {
+    const auth = mcpServer?.spec?.auth;
+    const authMode = auth ? "oauth" : "manual";
+    const oauthTargetEnvVar = auth?.targetEnvVar || null;
+    const tokenLifetimeHint = auth?.tokenLifetimeHint || null;
+    const existingKeys = useMemo(() => new Set(Object.keys(personalEnv.environment?.spec?.data ?? {})), [personalEnv.environment]);
+    const isOAuthConnected = authMode === "oauth"
+        && oauthTargetEnvVar !== null
+        && existingKeys.has(oauthTargetEnvVar);
+    const allMissingVariables = useMemo(() => {
         if (!mcpServer)
             return [];
         const envSpecData = mcpServer.spec?.envSpec?.data;
         if (!envSpecData || Object.keys(envSpecData).length === 0)
             return [];
-        const existingKeys = new Set(Object.keys(personalEnv.environment?.spec?.data ?? {}));
         return diffEnvSpec(envSpecData, existingKeys).filter((v) => !SYSTEM_ENV_VAR_KEYS.has(v.key));
-    }, [mcpServer, personalEnv.environment]);
-    const isReady = !personalEnv.isLoading && missingVariables.length === 0;
+    }, [mcpServer, existingKeys]);
+    const missingVariables = useMemo(() => {
+        if (!oauthTargetEnvVar)
+            return allMissingVariables;
+        return allMissingVariables.filter((v) => v.key !== oauthTargetEnvVar);
+    }, [allMissingVariables, oauthTargetEnvVar]);
+    const isReady = !personalEnv.isLoading && allMissingVariables.length === 0;
     const saveCredentials = useCallback(async (values) => {
         await personalEnv.getOrCreate();
         await personalEnv.addVariables(values);
     }, [personalEnv]);
     return {
+        authMode,
+        oauthTargetEnvVar,
+        isOAuthConnected,
+        tokenLifetimeHint,
         missingVariables,
         isReady,
         isLoading: personalEnv.isLoading,

package/mcp-server/useMcpServerCredentials.js.map

@@ -1 +1 @@
-{"version":3,"file":"useMcpServerCredentials.js","sourceRoot":"","sources":["../../src/mcp-server/useMcpServerCredentials.ts"],"names":[],"mappings":"AAAA,YAAY,CAAC;AAEb,OAAO,EAAE,WAAW,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AAG7C,OAAO,EAAE,sBAAsB,EAAE,MAAM,uCAAuC,CAAC;AAC/E,OAAO,EAAE,WAAW,EAAE,MAAM,4BAA4B,CAAC;AACzD,OAAO,EAAE,mBAAmB,EAAE,MAAM,8BAA8B,CAAC;AAgCnE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgCG;AACH,MAAM,UAAU,uBAAuB,CACrC,GAAkB,EAClB,SAA2B;IAE3B,MAAM,WAAW,GAAG,sBAAsB,CAAC,GAAG,CAAC,CAAC;IAEhD,MAAM,gBAAgB,GAAG,OAAO,CAAC,GAAG,EAAE;QACpC,IAAI,CAAC,SAAS;YAAE,OAAO,EAAE,CAAC;QAC1B,MAAM,WAAW,GAAG,SAAS,CAAC,IAAI,EAAE,OAAO,EAAE,IAAI,CAAC;QAClD,IAAI,CAAC,WAAW,IAAI,MAAM,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC,MAAM,KAAK,CAAC;YAAE,OAAO,EAAE,CAAC;QAErE,MAAM,YAAY,GAAG,IAAI,GAAG,CAC1B,MAAM,CAAC,IAAI,CAAC,WAAW,CAAC,WAAW,EAAE,IAAI,EAAE,IAAI,IAAI,EAAE,CAAC,CACvD,CAAC;QACF,OAAO,WAAW,CAAC,WAAW,EAAE,YAAY,CAAC,CAAC,MAAM,CAClD,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,mBAAmB,CAAC,GAAG,CAAC,CAAC,CAAC,GAAG,CAAC,CACvC,CAAC;IACJ,CAAC,EAAE,CAAC,SAAS,EAAE,WAAW,CAAC,WAAW,CAAC,CAAC,CAAC;IAEzC,MAAM,OAAO,GACX,CAAC,WAAW,CAAC,SAAS,IAAI,gBAAgB,CAAC,MAAM,KAAK,CAAC,CAAC;IAE1D,MAAM,eAAe,GAAG,WAAW,CACjC,KAAK,EAAE,MAAmC,EAAiB,EAAE;QAC3D,MAAM,WAAW,CAAC,WAAW,EAAE,CAAC;QAChC,MAAM,WAAW,CAAC,YAAY,CAAC,MAAM,CAAC,CAAC;IACzC,CAAC,EACD,CAAC,WAAW,CAAC,CACd,CAAC;IAEF,OAAO;QACL,gBAAgB;QAChB,OAAO;QACP,SAAS,EAAE,WAAW,CAAC,SAAS;QAChC,KAAK,EAAE,WAAW,CAAC,KAAK;QACxB,eAAe;QACf,QAAQ,EAAE,WAAW,CAAC,UAAU;QAChC,OAAO,EAAE,WAAW,CAAC,OAAO;KAC7B,CAAC;AACJ,CAAC"}
+{"version":3,"file":"useMcpServerCredentials.js","sourceRoot":"","sources":["../../src/mcp-server/useMcpServerCredentials.ts"],"names":[],"mappings":"AAAA,YAAY,CAAC;AAEb,OAAO,EAAE,WAAW,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AAG7C,OAAO,EAAE,sBAAsB,EAAE,MAAM,uCAAuC,CAAC;AAC/E,OAAO,EAAE,WAAW,EAAE,MAAM,4BAA4B,CAAC;AACzD,OAAO,EAAE,mBAAmB,EAAE,MAAM,8BAA8B,CAAC;AA0EnE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2CG;AACH,MAAM,UAAU,uBAAuB,CACrC,GAAkB,EAClB,SAA2B;IAE3B,MAAM,WAAW,GAAG,sBAAsB,CAAC,GAAG,CAAC,CAAC;IAEhD,MAAM,IAAI,GAAG,SAAS,EAAE,IAAI,EAAE,IAAI,CAAC;IACnC,MAAM,QAAQ,GAAsB,IAAI,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,QAAQ,CAAC;IAC9D,MAAM,iBAAiB,GAAG,IAAI,EAAE,YAAY,IAAI,IAAI,CAAC;IACrD,MAAM,iBAAiB,GAAG,IAAI,EAAE,iBAAiB,IAAI,IAAI,CAAC;IAE1D,MAAM,YAAY,GAAG,OAAO,CAC1B,GAAG,EAAE,CAAC,IAAI,GAAG,CAAC,MAAM,CAAC,IAAI,CAAC,WAAW,CAAC,WAAW,EAAE,IAAI,EAAE,IAAI,IAAI,EAAE,CAAC,CAAC,EACrE,CAAC,WAAW,CAAC,WAAW,CAAC,CAC1B,CAAC;IAEF,MAAM,gBAAgB,GAAG,QAAQ,KAAK,OAAO;WACxC,iBAAiB,KAAK,IAAI;WAC1B,YAAY,CAAC,GAAG,CAAC,iBAAiB,CAAC,CAAC;IAEzC,MAAM,mBAAmB,GAAG,OAAO,CAAC,GAAG,EAAE;QACvC,IAAI,CAAC,SAAS;YAAE,OAAO,EAAE,CAAC;QAC1B,MAAM,WAAW,GAAG,SAAS,CAAC,IAAI,EAAE,OAAO,EAAE,IAAI,CAAC;QAClD,IAAI,CAAC,WAAW,IAAI,MAAM,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC,MAAM,KAAK,CAAC;YAAE,OAAO,EAAE,CAAC;QAErE,OAAO,WAAW,CAAC,WAAW,EAAE,YAAY,CAAC,CAAC,MAAM,CAClD,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,mBAAmB,CAAC,GAAG,CAAC,CAAC,CAAC,GAAG,CAAC,CACvC,CAAC;IACJ,CAAC,EAAE,CAAC,SAAS,EAAE,YAAY,CAAC,CAAC,CAAC;IAE9B,MAAM,gBAAgB,GAAG,OAAO,CAAC,GAAG,EAAE;QACpC,IAAI,CAAC,iBAAiB;YAAE,OAAO,mBAAmB,CAAC;QACnD,OAAO,mBAAmB,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,GAAG,KAAK,iBAAiB,CAAC,CAAC;IACxE,CAAC,EAAE,CAAC,mBAAmB,EAAE,iBAAiB,CAAC,CAAC,CAAC;IAE7C,MAAM,OAAO,GACX,CAAC,WAAW,CAAC,SAAS,IAAI,mBAAmB,CAAC,MAAM,KAAK,CAAC,CAAC;IAE7D,MAAM,eAAe,GAAG,WAAW,CACjC,KAAK,EAAE,MAAmC,EAAiB,EAAE;QAC3D,MAAM,WAAW,CAAC,WAAW,EAAE,CAAC;QAChC,MAAM,WAAW,CAAC,YAAY,CAAC,MAAM,CAAC,CAAC;IACzC,CAAC,EACD,CAAC,WAAW,CAAC,CACd,CAAC;IAEF,OAAO;QACL,QAAQ;QACR,iBAAiB;QACjB,gBAAgB;QAChB,iBAAiB;QACjB,gBAAgB;QAChB,OAAO;QACP,SAAS,EAAE,WAAW,CAAC,SAAS;QAChC,KAAK,EAAE,WAAW,CAAC,KAAK;QACxB,eAAe;QACf,QAAQ,EAAE,WAAW,CAAC,UAAU;QAChC,OAAO,EAAE,WAAW,CAAC,OAAO;KAC7B,CAAC;AACJ,CAAC"}

package/mcp-server/useMcpServerOAuthConnect.d.ts

@@ -0,0 +1,82 @@
+import type { McpServer } from "@stigmer/protos/ai/stigmer/agentic/mcpserver/v1/api_pb";
+/**
+ * Message type posted by {@link OAuthCallbackHandler} to the opener window.
+ *
+ * @internal
+ */
+export declare const OAUTH_CALLBACK_MESSAGE_TYPE = "stigmer:oauth:callback";
+/**
+ * Shape of the `postMessage` payload sent from the OAuth callback popup.
+ *
+ * @internal
+ */
+export interface OAuthCallbackMessage {
+    readonly type: typeof OAUTH_CALLBACK_MESSAGE_TYPE;
+    readonly code: string;
+    readonly state: string;
+}
+/** Progress phases of the OAuth connect flow. */
+export type OAuthConnectPhase = "idle" | "initiating" | "awaiting-callback" | "completing" | "connecting" | "done";
+/** Return value of {@link useMcpServerOAuthConnect}. */
+export interface UseMcpServerOAuthConnectReturn {
+    /**
+     * Start the OAuth connect flow for an MCP server.
+     *
+     * Opens a popup for the OAuth consent screen, waits for the callback,
+     * exchanges the authorization code for tokens, then chains to the
+     * `connect` RPC for tool discovery.
+     *
+     * **Must be called from a synchronous user-gesture handler** (e.g.,
+     * an `onClick` callback) so the browser allows the popup. The popup
+     * is opened synchronously before any async work to avoid popup
+     * blockers.
+     *
+     * @param mcpServerId - System-generated ID (metadata.id) of the MCP server.
+     * @param org - Organization context for token storage (caller's active org).
+     * @returns The updated McpServer after tool discovery completes.
+     */
+    readonly startOAuth: (mcpServerId: string, org: string) => Promise<McpServer>;
+    /** `true` while any phase of the OAuth flow is in progress. */
+    readonly isInProgress: boolean;
+    /** Current phase of the OAuth flow. */
+    readonly phase: OAuthConnectPhase;
+    /** Error from the most recent unsuccessful attempt, or `null`. */
+    readonly error: Error | null;
+    /** Reset the hook to idle state, clearing any error. */
+    readonly clearError: () => void;
+}
+/**
+ * Action hook that orchestrates the full OAuth popup flow for MCP servers.
+ *
+ * Handles the complete lifecycle:
+ * 1. Calls `initiateOAuthConnect` to get the authorization URL
+ * 2. Opens a popup window to the OAuth consent screen
+ * 3. Listens for the callback via `window.postMessage`
+ * 4. Calls `completeOAuthConnect` to exchange the code for tokens
+ * 5. Chains to `connect` for tool discovery
+ *
+ * The popup is opened **synchronously** before the `initiateOAuthConnect`
+ * RPC to avoid browser popup blockers. A blank page is shown briefly
+ * while the RPC resolves, then the popup navigates to the auth URL.
+ *
+ * @example
+ * ```tsx
+ * const oauth = useMcpServerOAuthConnect();
+ * const { refetch } = useMcpServer(org, slug);
+ *
+ * async function handleSignIn() {
+ *   try {
+ *     await oauth.startOAuth(mcpServer.metadata.id, org);
+ *     refetch();
+ *   } catch {
+ *     // error is available via oauth.error
+ *   }
+ * }
+ *
+ * <button onClick={handleSignIn} disabled={oauth.isInProgress}>
+ *   {oauth.isInProgress ? "Signing in..." : "Sign in with OAuth"}
+ * </button>
+ * ```
+ */
+export declare function useMcpServerOAuthConnect(): UseMcpServerOAuthConnectReturn;
+//# sourceMappingURL=useMcpServerOAuthConnect.d.ts.map

package/mcp-server/useMcpServerOAuthConnect.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useMcpServerOAuthConnect.d.ts","sourceRoot":"","sources":["../../src/mcp-server/useMcpServerOAuthConnect.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,wDAAwD,CAAC;AAUxF;;;;GAIG;AACH,eAAO,MAAM,2BAA2B,2BAA2B,CAAC;AAEpE;;;;GAIG;AACH,MAAM,WAAW,oBAAoB;IACnC,QAAQ,CAAC,IAAI,EAAE,OAAO,2BAA2B,CAAC;IAClD,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;CACxB;AAED,iDAAiD;AACjD,MAAM,MAAM,iBAAiB,GACzB,MAAM,GACN,YAAY,GACZ,mBAAmB,GACnB,YAAY,GACZ,YAAY,GACZ,MAAM,CAAC;AAEX,wDAAwD;AACxD,MAAM,WAAW,8BAA8B;IAC7C;;;;;;;;;;;;;;;OAeG;IACH,QAAQ,CAAC,UAAU,EAAE,CAAC,WAAW,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,KAAK,OAAO,CAAC,SAAS,CAAC,CAAC;IAC9E,+DAA+D;IAC/D,QAAQ,CAAC,YAAY,EAAE,OAAO,CAAC;IAC/B,uCAAuC;IACvC,QAAQ,CAAC,KAAK,EAAE,iBAAiB,CAAC;IAClC,kEAAkE;IAClE,QAAQ,CAAC,KAAK,EAAE,KAAK,GAAG,IAAI,CAAC;IAC7B,wDAAwD;IACxD,QAAQ,CAAC,UAAU,EAAE,MAAM,IAAI,CAAC;CACjC;AAMD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgCG;AACH,wBAAgB,wBAAwB,IAAI,8BAA8B,CAiHzE"}

package/mcp-server/useMcpServerOAuthConnect.js

@@ -0,0 +1,199 @@
+"use client";
+import { useCallback, useEffect, useRef, useState } from "react";
+import { create } from "@bufbuild/protobuf";
+import { InitiateOAuthConnectInputSchema, CompleteOAuthConnectInputSchema, ConnectInputSchema, } from "@stigmer/protos/ai/stigmer/agentic/mcpserver/v1/io_pb";
+import { useStigmer } from "../hooks";
+import { resolveSystemEnvVarValues } from "../environment/systemEnvVars";
+import { toError } from "../internal/toError";
+/**
+ * Message type posted by {@link OAuthCallbackHandler} to the opener window.
+ *
+ * @internal
+ */
+export const OAUTH_CALLBACK_MESSAGE_TYPE = "stigmer:oauth:callback";
+const POPUP_WIDTH = 600;
+const POPUP_HEIGHT = 700;
+const POPUP_CALLBACK_TIMEOUT_MS = 120_000;
+/**
+ * Action hook that orchestrates the full OAuth popup flow for MCP servers.
+ *
+ * Handles the complete lifecycle:
+ * 1. Calls `initiateOAuthConnect` to get the authorization URL
+ * 2. Opens a popup window to the OAuth consent screen
+ * 3. Listens for the callback via `window.postMessage`
+ * 4. Calls `completeOAuthConnect` to exchange the code for tokens
+ * 5. Chains to `connect` for tool discovery
+ *
+ * The popup is opened **synchronously** before the `initiateOAuthConnect`
+ * RPC to avoid browser popup blockers. A blank page is shown briefly
+ * while the RPC resolves, then the popup navigates to the auth URL.
+ *
+ * @example
+ * ```tsx
+ * const oauth = useMcpServerOAuthConnect();
+ * const { refetch } = useMcpServer(org, slug);
+ *
+ * async function handleSignIn() {
+ *   try {
+ *     await oauth.startOAuth(mcpServer.metadata.id, org);
+ *     refetch();
+ *   } catch {
+ *     // error is available via oauth.error
+ *   }
+ * }
+ *
+ * <button onClick={handleSignIn} disabled={oauth.isInProgress}>
+ *   {oauth.isInProgress ? "Signing in..." : "Sign in with OAuth"}
+ * </button>
+ * ```
+ */
+export function useMcpServerOAuthConnect() {
+    const stigmer = useStigmer();
+    const [phase, setPhase] = useState("idle");
+    const [error, setError] = useState(null);
+    const popupRef = useRef(null);
+    const cleanupRef = useRef(null);
+    useEffect(() => {
+        return () => {
+            cleanupRef.current?.();
+        };
+    }, []);
+    const clearError = useCallback(() => {
+        setPhase("idle");
+        setError(null);
+    }, []);
+    const startOAuth = useCallback(async (mcpServerId, org) => {
+        setPhase("initiating");
+        setError(null);
+        cleanupRef.current?.();
+        const left = window.screenX + (window.outerWidth - POPUP_WIDTH) / 2;
+        const top = window.screenY + (window.outerHeight - POPUP_HEIGHT) / 2;
+        const popup = window.open("about:blank", "stigmer_oauth", `width=${POPUP_WIDTH},height=${POPUP_HEIGHT},left=${left},top=${top},popup=yes`);
+        if (!popup) {
+            const blocked = new Error("Your browser blocked the authentication popup. " +
+                "Please allow popups for this site and try again.");
+            setError(blocked);
+            setPhase("idle");
+            throw blocked;
+        }
+        popupRef.current = popup;
+        try {
+            const initOutput = await stigmer.mcpServer.initiateOAuthConnect(create(InitiateOAuthConnectInputSchema, { mcpServerId, org }));
+            popup.location.href = initOutput.authorizationUrl;
+            setPhase("awaiting-callback");
+            const { code, state } = await waitForOAuthCallback(popup, initOutput.state, (dispose) => {
+                cleanupRef.current = dispose;
+            });
+            setPhase("completing");
+            await stigmer.mcpServer.completeOAuthConnect(create(CompleteOAuthConnectInputSchema, {
+                mcpServerId,
+                authorizationCode: code,
+                state,
+            }));
+            setPhase("connecting");
+            const systemEnv = await resolveSystemEnvVarValues(stigmer);
+            const runtimeEnvMap = {};
+            for (const [key, envInput] of Object.entries(systemEnv)) {
+                runtimeEnvMap[key] = {
+                    value: envInput.value,
+                    isSecret: envInput.isSecret ?? false,
+                };
+            }
+            const server = await stigmer.mcpServer.connect(create(ConnectInputSchema, {
+                mcpServerId,
+                runtimeEnv: runtimeEnvMap,
+            }));
+            setPhase("done");
+            return server;
+        }
+        catch (err) {
+            const wrapped = toError(err);
+            setError(wrapped);
+            setPhase("idle");
+            closePopup(popup);
+            throw wrapped;
+        }
+        finally {
+            popupRef.current = null;
+            cleanupRef.current = null;
+        }
+    }, [stigmer]);
+    return {
+        startOAuth,
+        isInProgress: phase !== "idle" && phase !== "done",
+        phase,
+        error,
+        clearError,
+    };
+}
+// ---------------------------------------------------------------------------
+// Popup callback listener
+// ---------------------------------------------------------------------------
+function waitForOAuthCallback(popup, expectedState, onDispose) {
+    return new Promise((resolve, reject) => {
+        let settled = false;
+        let timeoutId;
+        let pollId;
+        function cleanup() {
+            if (timeoutId)
+                clearTimeout(timeoutId);
+            if (pollId)
+                clearInterval(pollId);
+            window.removeEventListener("message", onMessage);
+        }
+        function settle(outcome) {
+            if (settled)
+                return;
+            settled = true;
+            cleanup();
+            if (outcome instanceof Error) {
+                reject(outcome);
+            }
+            else {
+                resolve(outcome);
+            }
+        }
+        onDispose(() => {
+            settle(new Error("OAuth flow was cancelled."));
+            closePopup(popup);
+        });
+        function onMessage(event) {
+            if (event.origin !== window.location.origin)
+                return;
+            const data = event.data;
+            if (data?.type !== OAUTH_CALLBACK_MESSAGE_TYPE)
+                return;
+            if (data.state !== expectedState) {
+                settle(new Error("OAuth state mismatch — the callback did not match the " +
+                    "initiated flow. Please try again."));
+                return;
+            }
+            if (!data.code) {
+                settle(new Error("No authorization code received from the OAuth provider."));
+                return;
+            }
+            settle({ code: data.code, state: data.state });
+        }
+        window.addEventListener("message", onMessage);
+        timeoutId = setTimeout(() => {
+            settle(new Error("OAuth authentication timed out. Ensure your callback page " +
+                "renders <OAuthCallbackHandler /> from @stigmer/react at " +
+                "the URL configured as your OAuth redirect URI."));
+            closePopup(popup);
+        }, POPUP_CALLBACK_TIMEOUT_MS);
+        pollId = setInterval(() => {
+            if (popup.closed) {
+                settle(new Error("The authentication window was closed before completing sign-in."));
+            }
+        }, 500);
+    });
+}
+function closePopup(popup) {
+    try {
+        popup?.close();
+    }
+    catch {
+        // Cross-origin popup may throw on close — safe to ignore.
+    }
+}
+//# sourceMappingURL=useMcpServerOAuthConnect.js.map

package/mcp-server/useMcpServerOAuthConnect.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useMcpServerOAuthConnect.js","sourceRoot":"","sources":["../../src/mcp-server/useMcpServerOAuthConnect.ts"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stigmer/react",
-  "version": "0.0.77",
+  "version": "0.0.79",
   "description": "React provider and client hook for the Stigmer platform SDK",
   "license": "Apache-2.0",
   "type": "module",
@@ -35,7 +35,7 @@
     }
   },
   "dependencies": {
-    "@stigmer/theme": "0.0.77",
+    "@stigmer/theme": "0.0.79",
     "react-markdown": "^10.1.0",
     "remark-gfm": "^4.0.1",
     "yaml": "^2.8.2"
@@ -43,8 +43,8 @@
   "peerDependencies": {
     "@base-ui/react": "^1.0.0",
     "@bufbuild/protobuf": "^2.0.0",
-    "@stigmer/protos": "0.0.77",
-    "@stigmer/sdk": "0.0.77",
+    "@stigmer/protos": "0.0.79",
+    "@stigmer/sdk": "0.0.79",
     "react": "^19.0.0",
     "react-dom": "^19.0.0"
   }

package/src/index.ts

@@ -211,7 +211,7 @@ export type {
   SessionComposerSubmitContext,
 } from "./composer";
 
-// MCP Server — data hook, count hook, list hook, search hook, picker, config panel, tool selector, detail view, and setup orchestration
+// MCP Server — data hook, count hook, list hook, search hook, picker, config panel, tool selector, detail view, setup orchestration, and OAuth connect
 export {
   useMcpServer,
   useMcpServerCount,
@@ -219,7 +219,9 @@ export {
   useMcpServerSearch,
   useMcpServerSetup,
   useMcpServerConnect,
+  useMcpServerOAuthConnect,
   useMcpServerCredentials,
+  OAuthCallbackHandler,
   McpServerPicker,
   McpServerConfigPanel,
   McpServerDetailView,
@@ -243,11 +245,17 @@ export type {
   McpServerSetupIntegration,
   McpServerConfigPanelProps,
   McpServerCredentialsProps,
+  McpServerOAuthSignInProps,
   McpServerDetailViewProps,
   CapabilityTab,
   McpToolSelectorProps,
   UseMcpServerConnectReturn,
+  UseMcpServerOAuthConnectReturn,
+  OAuthConnectPhase,
+  OAuthCallbackHandlerProps,
+  OAuthCallbackParams,
   UseMcpServerCredentialsReturn,
+  McpServerAuthMode,
 } from "./mcp-server";
 
 // Skill — data hook, count hook, list hook, search hook, picker, and detail view component

package/src/mcp-server/McpServerConfigPanel.tsx

@@ -12,6 +12,7 @@ import {
   type EnvVarFormSubmitOptions,
 } from "../environment/EnvVarForm";
 import { McpToolSelector } from "./McpToolSelector";
+import type { OAuthConnectPhase } from "./useMcpServerOAuthConnect";
 
 // ---------------------------------------------------------------------------
 // Credential sub-props
@@ -54,6 +55,29 @@ export interface McpServerCredentialsProps {
   readonly poolValues?: (key: string) => EnvVarInput | undefined;
 }
 
+// ---------------------------------------------------------------------------
+// OAuth sign-in sub-props
+// ---------------------------------------------------------------------------
+
+/**
+ * Props for the inline OAuth sign-in action shown when a server requires
+ * OAuth authentication. Presence controls rendering — when `oauthSignIn`
+ * is provided on {@link McpServerConfigPanelProps}, the OAuth button
+ * is rendered above the credentials form.
+ */
+export interface McpServerOAuthSignInProps {
+  /** Initiates the OAuth popup flow. Must be called from a click handler. */
+  readonly onSignIn: () => void;
+  /** Current phase of the OAuth flow. */
+  readonly phase: OAuthConnectPhase;
+  /** `true` when the OAuth token already exists in the personal environment. */
+  readonly isConnected: boolean;
+  /** Error from the most recent failed OAuth attempt, or `null`. */
+  readonly error: Error | null;
+  /** Clear the OAuth error state. */
+  readonly onClearError: () => void;
+}
+
 // ---------------------------------------------------------------------------
 // Component props
 // ---------------------------------------------------------------------------
@@ -71,6 +95,14 @@ export interface McpServerConfigPanelProps {
    * step 2 (tool customization).
    */
   readonly credentials?: McpServerCredentialsProps;
+  /**
+   * When provided, an inline OAuth sign-in button is rendered above the
+   * credentials form. The button initiates the popup-based OAuth flow.
+   *
+   * Use alongside `credentials` for mixed-mode servers that require
+   * both OAuth and manual env vars, or on its own for OAuth-only servers.
+   */
+  readonly oauthSignIn?: McpServerOAuthSignInProps;
   /** Discovered tools from `status.discovered_capabilities.tools`. */
   readonly discoveredTools: DiscoveredTool[];
   /** Approval policies from `status.tool_approvals` and `spec.pinned_tool_approvals`. */
@@ -141,6 +173,7 @@ export interface McpServerConfigPanelProps {
 export function McpServerConfigPanel({
   mcpServer,
   credentials,
+  oauthSignIn,
   discoveredTools,
   toolApprovals,
   enabledTools,
@@ -155,6 +188,13 @@ export function McpServerConfigPanel({
   const description = mcpServer.spec?.description;
   const isDisabled = disabled || credentials?.isSubmitting;
 
+  const isOAuthBusy = oauthSignIn
+    ? oauthSignIn.phase === "initiating" ||
+      oauthSignIn.phase === "awaiting-callback" ||
+      oauthSignIn.phase === "completing" ||
+      oauthSignIn.phase === "connecting"
+    : false;
+
   const handleCredentialSubmit = useCallback(
     (values: Record<string, EnvVarInput>, options: EnvVarFormSubmitOptions) => {
       credentials?.onSubmit(values, options);
@@ -173,7 +213,7 @@ export function McpServerConfigPanel({
         <button
           type="button"
           onClick={onBack}
-          disabled={credentials?.isSubmitting}
+          disabled={credentials?.isSubmitting || isOAuthBusy}
           className={cn(
             "mt-0.5 shrink-0 rounded p-0.5",
             "text-muted-foreground hover:text-foreground hover:bg-accent/50",
@@ -208,13 +248,25 @@ export function McpServerConfigPanel({
         </div>
       </div>
 
+      {/* OAuth sign-in — shown when the server requires OAuth authentication */}
+      {oauthSignIn && (
+        <InlineOAuthSignIn
+          serverName={serverName}
+          isConnected={oauthSignIn.isConnected}
+          phase={oauthSignIn.phase}
+          onSignIn={oauthSignIn.onSignIn}
+          error={oauthSignIn.error}
+          onClearError={oauthSignIn.onClearError}
+        />
+      )}
+
       {/* Credentials form — only when credentials prop is provided */}
       {credentials && (
         <EnvVarForm
           variables={credentials.variables}
           onSubmit={handleCredentialSubmit}
           isSubmitting={credentials.isSubmitting}
-          disabled={disabled}
+          disabled={disabled || isOAuthBusy}
           title="Credentials required"
           defaultSaveForFuture={credentials.defaultSaveForFuture}
           hideSaveToggle={credentials.hideSaveToggle}
@@ -239,12 +291,110 @@ export function McpServerConfigPanel({
         toolApprovals={toolApprovals}
         enabledTools={enabledTools}
         onChange={onEnabledToolsChange}
-        disabled={!!isDisabled || !!credentials}
+        disabled={!!isDisabled || !!credentials || isOAuthBusy}
       />
     </div>
   );
 }
 
+// ---------------------------------------------------------------------------
+// Inline OAuth sign-in (compact, for config panel context)
+// ---------------------------------------------------------------------------
+
+function InlineOAuthSignIn({
+  serverName,
+  isConnected,
+  phase,
+  onSignIn,
+  error,
+  onClearError,
+}: {
+  readonly serverName: string;
+  readonly isConnected: boolean;
+  readonly phase: OAuthConnectPhase;
+  readonly onSignIn: () => void;
+  readonly error: Error | null;
+  readonly onClearError: () => void;
+}) {
+  const isBusy =
+    phase === "initiating" ||
+    phase === "awaiting-callback" ||
+    phase === "completing" ||
+    phase === "connecting";
+
+  return (
+    <div className="space-y-1.5">
+      <div className="flex items-center justify-between">
+        <span
+          className={cn(
+            "inline-flex items-center gap-1 text-[0.65rem] font-medium",
+            isConnected ? "text-success" : "text-muted-foreground",
+          )}
+        >
+          <span
+            className={cn(
+              "size-1.5 rounded-full",
+              isConnected ? "bg-success" : "bg-muted-foreground",
+            )}
+            aria-hidden="true"
+          />
+          {isConnected ? "Signed in" : "Sign-in required"}
+        </span>
+        <button
+          type="button"
+          onClick={onSignIn}
+          disabled={isBusy}
+          className={cn(
+            "inline-flex items-center gap-1 rounded px-2 py-0.5 text-[0.65rem] font-medium",
+            isConnected
+              ? "text-muted-foreground hover:text-foreground hover:bg-accent/50"
+              : "bg-primary text-primary-foreground hover:bg-primary-hover",
+            "disabled:pointer-events-none disabled:opacity-50",
+          )}
+        >
+          {isBusy ? (
+            <InlineSpinner />
+          ) : isConnected ? (
+            "Re-authenticate"
+          ) : (
+            `Sign in with ${serverName}`
+          )}
+        </button>
+      </div>
+      {error && (
+        <div className="flex items-start gap-1.5 text-[0.65rem] text-destructive">
+          <span className="flex-1">{error.message}</span>
+          <button
+            type="button"
+            onClick={onClearError}
+            className="shrink-0 underline underline-offset-2 hover:no-underline"
+          >
+            Dismiss
+          </button>
+        </div>
+      )}
+    </div>
+  );
+}
+
+function InlineSpinner() {
+  return (
+    <svg
+      width="10"
+      height="10"
+      viewBox="0 0 16 16"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      className="animate-spin"
+      aria-hidden="true"
+    >
+      <path d="M8 2a6 6 0 1 0 6 6" />
+    </svg>
+  );
+}
+
 // ---------------------------------------------------------------------------
 // Icons (internal to this module)
 // ---------------------------------------------------------------------------