@stigmer/react 0.0.80 → 0.0.82

package/src/mcp-server/McpServerDetailView.tsx

@@ -121,7 +121,7 @@ export function McpServerDetailView({
   className,
 }: McpServerDetailViewProps) {
   const { mcpServer, isLoading, error, refetch } = useMcpServer(org, slug);
-  const credentials = useMcpServerCredentials(org, mcpServer ?? null);
+  const credentials = useMcpServerCredentials(activeOrg ?? org, mcpServer ?? null);
   const connection = useMcpServerConnect();
   const oauth = useMcpServerOAuthConnect();
 
@@ -140,8 +140,9 @@ export function McpServerDetailView({
   const handleOAuthSignIn = useCallback(async () => {
     if (!mcpServer?.metadata?.id) return;
 
+    const envKeys = Object.keys(mcpServer.spec?.env ?? {});
     try {
-      await oauth.startOAuth(mcpServer.metadata.id, activeOrg ?? org);
+      await oauth.startOAuth(mcpServer.metadata.id, activeOrg ?? org, envKeys);
       credentials.refetch();
       refetch();
     } catch {
@@ -152,7 +153,11 @@ export function McpServerDetailView({
   const handleConnectClick = useCallback(async () => {
     if (!mcpServer?.metadata?.id) return;
 
-    if (credentials.authMode === "oauth" && !credentials.isOAuthConnected) {
+    if (
+      credentials.authMode === "oauth" &&
+      !credentials.isOAuthConnected &&
+      !credentials.manualOverride
+    ) {
       handleOAuthSignIn();
       return;
     }
@@ -162,13 +167,14 @@ export function McpServerDetailView({
       return;
     }
 
+    const envKeys = Object.keys(mcpServer.spec?.env ?? {});
     try {
-      await connection.connect(mcpServer.metadata.id);
+      await connection.connect(mcpServer.metadata.id, activeOrg ?? org, undefined, envKeys);
       refetch();
     } catch {
       // error state is managed by the hook
     }
-  }, [mcpServer, credentials.authMode, credentials.isOAuthConnected, credentials.isReady, connection, refetch, handleOAuthSignIn]);
+  }, [mcpServer, credentials.authMode, credentials.isOAuthConnected, credentials.manualOverride, credentials.isReady, connection, refetch, handleOAuthSignIn]);
 
   const handleCredentialSubmit = useCallback(
     async (
@@ -184,10 +190,12 @@ export function McpServerDetailView({
         setShowCredentialForm(false);
 
         if (mcpServer?.metadata?.id) {
+          const envKeys = Object.keys(mcpServer.spec?.env ?? {});
+          const connectOrg = activeOrg ?? org;
           if (options.saveForFuture) {
-            await connection.connect(mcpServer.metadata.id);
+            await connection.connect(mcpServer.metadata.id, connectOrg, undefined, envKeys);
           } else {
-            await connection.connect(mcpServer.metadata.id, values);
+            await connection.connect(mcpServer.metadata.id, connectOrg, values, envKeys);
           }
           refetch();
         }
@@ -288,6 +296,17 @@ export function McpServerDetailView({
           isOAuthConnected={credentials.isOAuthConnected}
           accessTokenExpiresAt={credentials.accessTokenExpiresAt}
           tokenLifetimeHint={credentials.tokenLifetimeHint}
+          isVendorApprovalPending={credentials.isVendorApprovalPending}
+          vendorApprovalDocsUrl={credentials.vendorApprovalDocsUrl}
+          manualOverride={credentials.manualOverride}
+          onManualOverride={() => {
+            credentials.setManualOverride(true);
+            setShowCredentialForm(true);
+          }}
+          onBackToOAuth={() => {
+            credentials.setManualOverride(false);
+            setShowCredentialForm(false);
+          }}
         />
 
         {showCredentialForm && credentials.missingVariables.length > 0 && (
@@ -357,6 +376,11 @@ function ConnectBar({
   isOAuthConnected,
   accessTokenExpiresAt,
   tokenLifetimeHint,
+  isVendorApprovalPending,
+  vendorApprovalDocsUrl,
+  manualOverride,
+  onManualOverride,
+  onBackToOAuth,
 }: {
   readonly isConnecting: boolean;
   readonly connectionError: Error | null;
@@ -371,6 +395,11 @@ function ConnectBar({
   readonly isOAuthConnected: boolean;
   readonly accessTokenExpiresAt: bigint;
   readonly tokenLifetimeHint: string | null;
+  readonly isVendorApprovalPending: boolean;
+  readonly vendorApprovalDocsUrl: string | null;
+  readonly manualOverride: boolean;
+  readonly onManualOverride: () => void;
+  readonly onBackToOAuth: () => void;
 }) {
   const isOAuthBusy =
     oauthPhase === "initiating" ||
@@ -378,17 +407,22 @@ function ConnectBar({
     oauthPhase === "completing" ||
     oauthPhase === "connecting";
 
+  const showOAuthPrimary =
+    authMode === "oauth" && !isOAuthConnected && !manualOverride;
+
+  const oauthSignInDisabled = isVendorApprovalPending && showOAuthPrimary;
+
   const buttonLabel = (() => {
     if (isOAuthBusy) return oauthPhaseLabel(oauthPhase);
     if (isConnecting) return "Connecting...";
-    if (authMode === "oauth" && !isOAuthConnected) return "Sign in to connect";
+    if (showOAuthPrimary) return "Sign in to connect";
     if (hasDiscoveredTools) return "Reconnect";
     return "Connect";
   })();
 
   const buttonIcon = (() => {
     if (isOAuthBusy || isConnecting) return <Spinner />;
-    if (authMode === "oauth" && !isOAuthConnected) return <OAuthIcon className="size-3.5" />;
+    if (showOAuthPrimary) return <OAuthIcon className="size-3.5" />;
     if (hasDiscoveredTools) return <RefreshIcon className="size-3.5" />;
     return <ConnectIcon className="size-3.5" />;
   })();
@@ -402,6 +436,7 @@ function ConnectBar({
         : "";
       return `Tokens refresh automatically${hint}`;
     }
+    if (manualOverride) return "Entering token manually";
     if (hasDiscoveredTools) return formatConnectionSummary(toolCount, policyCount);
     return "Not connected yet";
   })();
@@ -410,37 +445,43 @@ function ConnectBar({
     <div className="flex flex-col">
       <div className="flex items-center justify-between px-3 py-2">
         <div className="flex items-center gap-2">
-          {authMode === "oauth" && (
+          {authMode === "oauth" && !manualOverride && (
             <span
               className={cn(
                 "inline-flex items-center gap-1.5 rounded-full px-2 py-0.5 text-[10px] font-medium",
                 isOAuthConnected
                   ? "bg-success/10 text-success"
-                  : "bg-muted text-muted-foreground",
+                  : oauthSignInDisabled
+                    ? "bg-amber-500/10 text-amber-600 dark:text-amber-400"
+                    : "bg-muted text-muted-foreground",
               )}
             >
               <span
                 className={cn(
                   "size-1.5 rounded-full",
-                  isOAuthConnected ? "bg-success" : "bg-muted-foreground",
+                  isOAuthConnected
+                    ? "bg-success"
+                    : oauthSignInDisabled
+                      ? "bg-amber-500"
+                      : "bg-muted-foreground",
                 )}
                 aria-hidden="true"
               />
-              {isOAuthConnected ? "Connected" : "Not connected"}
+              {isOAuthConnected ? "Connected" : oauthSignInDisabled ? "Pending approval" : "Not connected"}
             </span>
           )}
           <span className="text-xs text-muted-foreground">
-            {statusText}
+            {oauthSignInDisabled ? "OAuth sign-in is pending vendor approval" : statusText}
           </span>
         </div>
         <button
           type="button"
           onClick={onConnect}
-          disabled={isConnecting || isOAuthBusy || credentialsLoading}
+          disabled={isConnecting || isOAuthBusy || credentialsLoading || oauthSignInDisabled}
           data-cursor-target="connect-button"
           className={cn(
             "inline-flex items-center gap-1.5 rounded-md px-2.5 py-1 text-xs font-medium",
-            authMode === "oauth" && !isOAuthConnected
+            showOAuthPrimary
               ? "bg-primary text-primary-foreground hover:bg-primary-hover"
               : "border border-border bg-background text-foreground hover:bg-accent hover:text-accent-foreground",
             "disabled:pointer-events-none disabled:opacity-50",
@@ -451,6 +492,53 @@ function ConnectBar({
         </button>
       </div>
 
+      {/* Vendor approval pending banner with docs link */}
+      {oauthSignInDisabled && (
+        <div className="flex items-start gap-2 border-t border-amber-500/20 bg-amber-500/5 px-3 py-2">
+          <WarningIcon className="mt-0.5 size-3.5 shrink-0 text-amber-600 dark:text-amber-400" />
+          <div className="flex-1 text-xs text-amber-700 dark:text-amber-300">
+            <p>
+              The platform&apos;s OAuth app is awaiting vendor approval.
+              You can still connect by entering your own token manually.
+            </p>
+            {vendorApprovalDocsUrl && (
+              <a
+                href={vendorApprovalDocsUrl}
+                target="_blank"
+                rel="noopener noreferrer"
+                className="mt-1 inline-flex items-center gap-1 underline decoration-amber-600/40 underline-offset-2 hover:decoration-amber-600 dark:decoration-amber-400/40 dark:hover:decoration-amber-400"
+              >
+                Learn how to bring your own token
+                <ExternalLinkIcon className="size-3 shrink-0" />
+              </a>
+            )}
+          </div>
+        </div>
+      )}
+
+      {/* Secondary action: switch between OAuth and manual token entry */}
+      {authMode === "oauth" && !isOAuthConnected && !isOAuthBusy && !isConnecting && (
+        <div className="border-t border-border px-3 py-1.5">
+          {manualOverride ? (
+            <button
+              type="button"
+              onClick={onBackToOAuth}
+              className="text-[11px] text-muted-foreground underline decoration-muted-foreground/40 underline-offset-2 hover:text-foreground hover:decoration-foreground"
+            >
+              {isVendorApprovalPending ? "Back to OAuth status" : "Sign in with OAuth instead"}
+            </button>
+          ) : (
+            <button
+              type="button"
+              onClick={onManualOverride}
+              className="text-[11px] text-muted-foreground underline decoration-muted-foreground/40 underline-offset-2 hover:text-foreground hover:decoration-foreground"
+            >
+              Enter token manually
+            </button>
+          )}
+        </div>
+      )}
+
       {connectionError && (
         <div className="flex items-start gap-2 border-t border-destructive/20 bg-destructive/5 px-3 py-2">
           <WarningIcon className="mt-0.5 size-3.5 shrink-0 text-destructive" />

package/src/mcp-server/McpServerPicker.tsx

@@ -272,6 +272,9 @@ export function McpServerPicker({
       ? { type: "configure", serverKey: initialServerKey }
       : { type: "list" },
   );
+  const [manualOverrideKeys, setManualOverrideKeys] = useState<Set<string>>(
+    () => new Set(),
+  );
   const searchRef = useRef<HTMLInputElement>(null);
   const results_ = useScrollShadows();
   const selected_ = useScrollShadows();
@@ -397,13 +400,15 @@ export function McpServerPicker({
     const auth = entry.mcpServer.spec?.auth;
     const oauthTargetEnvVar = auth?.targetEnvVar || null;
     const hasOAuth = !!auth;
+    const isManualOverride = manualOverrideKeys.has(view.serverKey);
 
     const entryMissingVars =
       entry.status === "needsSetup" ? entry.missingVariables : [];
 
-    const filteredMissingVars = oauthTargetEnvVar
-      ? entryMissingVars.filter((v) => v.key !== oauthTargetEnvVar)
-      : entryMissingVars;
+    const filteredMissingVars =
+      oauthTargetEnvVar && !isManualOverride
+        ? entryMissingVars.filter((v) => v.key !== oauthTargetEnvVar)
+        : entryMissingVars;
 
     const hasManualVars = filteredMissingVars.length > 0;
 
@@ -411,24 +416,55 @@ export function McpServerPicker({
       ? entryMissingVars.some((v) => v.key === oauthTargetEnvVar)
       : false;
 
-    const oauthSignInProps = hasOAuth
-      ? {
-          onSignIn: async () => {
-            if (!entry.mcpServer.metadata?.id) return;
-            try {
-              await oauth.startOAuth(entry.mcpServer.metadata.id, activeOrg ?? org);
-              setup.onServerAdded(ref);
-            } catch {
-              // error state managed by oauth hook
-            }
-          },
-          phase: oauth.phase,
-          isConnected: !oauthTokenMissing,
-          error: oauth.error,
-          onClearError: oauth.clearError,
+    const vendorApprovalStatus = auth?.vendorApprovalStatus;
+    const isVendorApprovalPending =
+      hasOAuth && vendorApprovalStatus === 1; // VendorApprovalStatus.PENDING
+
+    const oauthSignInProps =
+      hasOAuth && !isManualOverride
+        ? {
+            onSignIn: async () => {
+              if (!entry.mcpServer.metadata?.id) return;
+              try {
+                await oauth.startOAuth(
+                  entry.mcpServer.metadata.id,
+                  activeOrg ?? org,
+                );
+                setup.onServerAdded(ref);
+              } catch {
+                // error state managed by oauth hook
+              }
+            },
+            phase: oauth.phase,
+            isConnected: !oauthTokenMissing,
+            error: oauth.error,
+            onClearError: oauth.clearError,
+            isVendorApprovalPending,
+            vendorApprovalDocsUrl: auth?.vendorApprovalDocsUrl || null,
+          }
+        : undefined;
+
+    const handleSwitchToManual = hasOAuth
+      ? () => {
+          setManualOverrideKeys((prev) => {
+            const next = new Set(prev);
+            next.add(view.serverKey);
+            return next;
+          });
         }
       : undefined;
 
+    const handleSwitchToOAuth =
+      hasOAuth && isManualOverride
+        ? () => {
+            setManualOverrideKeys((prev) => {
+              const next = new Set(prev);
+              next.delete(view.serverKey);
+              return next;
+            });
+          }
+        : undefined;
+
     return (
       <div className={cn("w-72", className)}>
         <McpServerConfigPanel
@@ -445,6 +481,8 @@ export function McpServerPicker({
                 }
               : undefined
           }
+          onSwitchToManual={handleSwitchToManual}
+          onSwitchToOAuth={handleSwitchToOAuth}
           discoveredTools={entry.discoveredTools}
           toolApprovals={entry.toolApprovals}
           enabledTools={

package/src/mcp-server/OAuthCallbackHandler.tsx

@@ -2,7 +2,10 @@
 
 import { useEffect, useRef, useState } from "react";
 import { cn } from "@stigmer/theme";
-import { OAUTH_CALLBACK_MESSAGE_TYPE } from "./useMcpServerOAuthConnect";
+import {
+  OAUTH_CALLBACK_MESSAGE_TYPE,
+  OAUTH_BROADCAST_CHANNEL,
+} from "./useMcpServerOAuthConnect";
 import type { OAuthCallbackMessage } from "./useMcpServerOAuthConnect";
 
 /** Parameters extracted from the OAuth callback URL. */
@@ -92,28 +95,52 @@ export function OAuthCallbackHandler({
       return;
     }
 
+    const message: OAuthCallbackMessage = {
+      type: OAUTH_CALLBACK_MESSAGE_TYPE,
+      code,
+      state,
+    };
+
+    // Always broadcast via BroadcastChannel — works even when
+    // Cross-Origin-Opener-Policy has severed window.opener.
+    let broadcastSent = false;
+    try {
+      const bc = new BroadcastChannel(OAUTH_BROADCAST_CHANNEL);
+      bc.postMessage(message);
+      bc.close();
+      broadcastSent = true;
+    } catch {
+      // BroadcastChannel unavailable — rely on postMessage below.
+    }
+
     const opener = window.opener as Window | null;
     if (opener && !opener.closed) {
-      const message: OAuthCallbackMessage = {
-        type: OAUTH_CALLBACK_MESSAGE_TYPE,
-        code,
-        state,
-      };
-
       try {
         opener.postMessage(message, window.location.origin);
         setStatus("done");
         window.close();
       } catch {
-        setErrorMessage(
-          "Could not communicate with the parent window. " +
-            "Please close this tab and try again.",
-        );
-        setStatus("error");
+        if (broadcastSent) {
+          setStatus("done");
+          window.close();
+        } else {
+          setErrorMessage(
+            "Could not communicate with the parent window. " +
+              "Please close this tab and try again.",
+          );
+          setStatus("error");
+        }
       }
       return;
     }
 
+    // opener is null (COOP case) but BroadcastChannel delivered the message.
+    if (broadcastSent) {
+      setStatus("done");
+      window.close();
+      return;
+    }
+
     if (onFallback) {
       onFallback({ code, state });
       setStatus("done");

package/src/mcp-server/useMcpServerConnect.ts

@@ -6,7 +6,7 @@ import type { McpServer } from "@stigmer/protos/ai/stigmer/agentic/mcpserver/v1/
 import { ConnectInputSchema } from "@stigmer/protos/ai/stigmer/agentic/mcpserver/v1/io_pb";
 import type { EnvVarInput } from "@stigmer/sdk";
 import { useStigmer } from "../hooks";
-import { resolveSystemEnvVarValues } from "../environment/systemEnvVars";
+import { resolveDeclaredSystemEnvVars } from "../environment/systemEnvVars";
 import { toError } from "../internal/toError";
 
 /** Return value of {@link useMcpServerConnect}. */
@@ -20,20 +20,30 @@ export interface UseMcpServerConnectReturn {
    * (typically 5-15 seconds, ~30s timeout).
    *
    * Platform system env vars (`STIGMER_SERVER_ADDRESS`,
-   * `STIGMER_API_KEY`) are always injected automatically from
-   * the current SDK context. When `runtimeEnv` is also provided,
-   * those values are merged on top (caller values win). The backend
-   * merges the result on top of the user's personal environment so
-   * saved credentials (e.g., OAuth tokens) are still resolved.
+   * `STIGMER_API_KEY`) are injected only when the MCP server
+   * declares them in its `spec.env`. Pass `declaredEnvKeys` so the
+   * hook can determine which system vars the server actually needs.
+   * When omitted, no system vars are injected.
+   *
+   * When `runtimeEnv` is provided, those values are merged on top
+   * (caller values win). The backend merges the result on top of
+   * the user's personal environment so saved credentials (e.g.,
+   * OAuth tokens) are still resolved.
    *
    * @param mcpServerId - System-generated ID of the MCP server (metadata.id).
+   * @param org - The caller's active organization slug. Required for
+   *   OAuth grant lookup and personal environment resolution.
    * @param runtimeEnv - Optional additional environment variables.
+   * @param declaredEnvKeys - Keys from the server's `spec.env` declaration.
+   *   System vars are only injected when declared here.
    * @returns The updated McpServer with populated status.discovered_capabilities
    *          and status.tool_approvals.
    */
   readonly connect: (
     mcpServerId: string,
+    org: string,
     runtimeEnv?: Record<string, EnvVarInput>,
+    declaredEnvKeys?: readonly string[],
   ) => Promise<McpServer>;
   /** `true` while the connect RPC is in flight. */
   readonly isConnecting: boolean;
@@ -52,10 +62,10 @@ export interface UseMcpServerConnectReturn {
  * approval policy via a structured-output LLM call.
  *
  * Platform system env vars (`STIGMER_SERVER_ADDRESS`,
- * `STIGMER_API_KEY`) are always injected from the current SDK
- * context. The backend merges these on top of the caller's personal
- * environment, so saved credentials (e.g., OAuth tokens) are still
- * resolved while platform addresses are always up to date.
+ * `STIGMER_API_KEY`) are injected only when the target MCP server
+ * declares them in `spec.env`. Pass the server's declared env keys
+ * via `declaredEnvKeys` so the hook knows which system vars to
+ * include. When not provided, no system vars are injected.
  *
  * Additional one-time credentials can be passed via `runtimeEnv`
  * and will override both system vars and personal env values.
@@ -67,13 +77,15 @@ export interface UseMcpServerConnectReturn {
  *
  * // Saved credentials: already in personal environment
  * async function handleConnectSaved() {
- *   await connect(mcpServer.metadata.id);
+ *   const envKeys = Object.keys(mcpServer.spec?.env ?? {});
+ *   await connect(mcpServer.metadata.id, undefined, envKeys);
  *   refetch();
  * }
  *
  * // One-time use: pass credentials directly
  * async function handleConnectTemporary(values: Record<string, EnvVarInput>) {
- *   await connect(mcpServer.metadata.id, values);
+ *   const envKeys = Object.keys(mcpServer.spec?.env ?? {});
+ *   await connect(mcpServer.metadata.id, values, envKeys);
  *   refetch();
  * }
  * ```
@@ -88,13 +100,17 @@ export function useMcpServerConnect(): UseMcpServerConnectReturn {
   const connect = useCallback(
     async (
       mcpServerId: string,
+      org: string,
       runtimeEnv?: Record<string, EnvVarInput>,
+      declaredEnvKeys?: readonly string[],
     ): Promise<McpServer> => {
       setIsConnecting(true);
       setError(null);
 
       try {
-        const systemEnv = await resolveSystemEnvVarValues(stigmer);
+        const systemEnv = declaredEnvKeys
+          ? await resolveDeclaredSystemEnvVars(stigmer, declaredEnvKeys)
+          : {};
         const mergedEnv = { ...systemEnv, ...(runtimeEnv ?? {}) };
 
         const runtimeEnvMap: Record<string, { value: string; isSecret: boolean }> = {};
@@ -107,7 +123,10 @@ export function useMcpServerConnect(): UseMcpServerConnectReturn {
 
         const input = create(ConnectInputSchema, {
           mcpServerId,
-          runtimeEnv: runtimeEnvMap,
+          org,
+          ...(Object.keys(runtimeEnvMap).length > 0
+            ? { runtimeEnv: runtimeEnvMap }
+            : {}),
         });
 
         return await stigmer.mcpServer.connect(input);

package/src/mcp-server/useMcpServerCredentials.ts

@@ -1,8 +1,9 @@
 "use client";
 
-import { useCallback, useMemo } from "react";
+import { useCallback, useMemo, useState } from "react";
 import type { EnvVarInput } from "@stigmer/sdk";
 import type { McpServer } from "@stigmer/protos/ai/stigmer/agentic/mcpserver/v1/api_pb";
+import { VendorApprovalStatus } from "@stigmer/protos/ai/stigmer/iam/oauthapp/v1/spec_pb";
 import { usePersonalEnvironment } from "../environment/usePersonalEnvironment";
 import { diffEnv } from "../environment/diffEnv";
 import { SYSTEM_ENV_VAR_KEYS } from "../environment/systemEnvVars";
@@ -91,6 +92,35 @@ export interface UseMcpServerCredentialsReturn {
   readonly isSaving: boolean;
   /** Re-check the personal environment. */
   readonly refetch: () => void;
+  /**
+   * `true` when the referenced OAuthApp's vendor approval is still pending.
+   * When pending, the platform-managed OAuth sign-in flow is unavailable
+   * and the sign-in button should be disabled. Users can still connect
+   * via manual token entry (manual override).
+   */
+  readonly isVendorApprovalPending: boolean;
+  /**
+   * Documentation URL for users who want to bring their own OAuth
+   * credentials while the platform's OAuth app is pending vendor approval.
+   * `null` when no documentation link is available.
+   */
+  readonly vendorApprovalDocsUrl: string | null;
+  /**
+   * When `true`, the user has opted to bypass OAuth and enter the
+   * `target_env_var` token manually. In this state:
+   *
+   * - {@link missingVariables} includes the OAuth-managed variable
+   * - {@link isReady} no longer requires an active OAuth grant
+   *
+   * Only meaningful when `authMode` is `"oauth"`. Has no effect on
+   * manual-only servers.
+   */
+  readonly manualOverride: boolean;
+  /**
+   * Toggle the manual override. Pass `true` to switch from OAuth to
+   * manual token entry; `false` to revert to the OAuth flow.
+   */
+  readonly setManualOverride: (override: boolean) => void;
 }
 
 /**
@@ -121,9 +151,31 @@ export interface UseMcpServerCredentialsReturn {
  * ```tsx
  * const creds = useMcpServerCredentials("acme", mcpServer);
  *
- * // OAuth server — sign-in button + optional manual form
+ * // OAuth server — sign-in button + manual override escape hatch
  * if (creds.authMode === "oauth" && !creds.isOAuthConnected) {
- *   return <button onClick={startOAuth}>Sign in</button>;
+ *   if (creds.manualOverride) {
+ *     // User opted to enter the token manually
+ *     return (
+ *       <>
+ *         <EnvVarForm
+ *           variables={creds.missingVariables}
+ *           onSubmit={(values) => creds.saveCredentials(values)}
+ *           isSubmitting={creds.isSaving}
+ *         />
+ *         <button onClick={() => creds.setManualOverride(false)}>
+ *           Sign in with OAuth instead
+ *         </button>
+ *       </>
+ *     );
+ *   }
+ *   return (
+ *     <>
+ *       <button onClick={startOAuth}>Sign in</button>
+ *       <button onClick={() => creds.setManualOverride(true)}>
+ *         Enter token manually
+ *       </button>
+ *     </>
+ *   );
  * }
  *
  * // Manual vars still needed (mixed mode or manual-only)
@@ -144,12 +196,18 @@ export function useMcpServerCredentials(
   mcpServer: McpServer | null,
 ): UseMcpServerCredentialsReturn {
   const personalEnv = usePersonalEnvironment(org);
+  const [manualOverride, setManualOverride] = useState(false);
 
   const auth = mcpServer?.spec?.auth;
   const authMode: McpServerAuthMode = auth ? "oauth" : "manual";
   const oauthTargetEnvVar = auth?.targetEnvVar || null;
   const tokenLifetimeHint = auth?.tokenLifetimeHint || null;
 
+  const isVendorApprovalPending =
+    authMode === "oauth" &&
+    auth?.vendorApprovalStatus === VendorApprovalStatus.PENDING;
+  const vendorApprovalDocsUrl = auth?.vendorApprovalDocsUrl || null;
+
   const grantStatus = useOAuthGrantStatus(
     authMode === "oauth" ? (mcpServer?.metadata?.id ?? null) : null,
     authMode === "oauth" ? org : null,
@@ -178,15 +236,15 @@ export function useMcpServerCredentials(
   );
 
   const missingVariables = useMemo(() => {
-    if (!oauthTargetEnvVar) return requiredMissing;
+    if (!oauthTargetEnvVar || manualOverride) return requiredMissing;
     return requiredMissing.filter((v) => v.key !== oauthTargetEnvVar);
-  }, [requiredMissing, oauthTargetEnvVar]);
+  }, [requiredMissing, oauthTargetEnvVar, manualOverride]);
 
   const isReady =
     !personalEnv.isLoading &&
     !grantStatus.isLoading &&
     missingVariables.length === 0 &&
-    (authMode === "manual" || isOAuthConnected);
+    (authMode === "manual" || manualOverride || isOAuthConnected);
 
   const saveCredentials = useCallback(
     async (values: Record<string, EnvVarInput>): Promise<void> => {
@@ -207,6 +265,8 @@ export function useMcpServerCredentials(
     isOAuthConnected,
     accessTokenExpiresAt: grantStatus.accessTokenExpiresAt,
     tokenLifetimeHint,
+    isVendorApprovalPending,
+    vendorApprovalDocsUrl,
     missingVariables,
     isReady,
     isLoading: personalEnv.isLoading || grantStatus.isLoading,
@@ -214,5 +274,7 @@ export function useMcpServerCredentials(
     saveCredentials,
     isSaving: personalEnv.isMutating,
     refetch,
+    manualOverride,
+    setManualOverride,
   };
 }