@stigmer/react 0.0.83 → 0.0.84

package/src/mcp-server/OAuthAppForm.tsx

@@ -0,0 +1,304 @@
+"use client";
+
+import { useCallback, useId, useState } from "react";
+import { cn } from "@stigmer/theme";
+import { getUserMessage } from "@stigmer/sdk";
+
+/** Props for {@link OAuthAppForm}. */
+export interface OAuthAppFormProps {
+  /**
+   * Vendor / provider display name shown in the instruction text.
+   * Example: `"Figma"`, `"Slack"`.
+   */
+  readonly providerName: string;
+  /**
+   * URL to the vendor's OAuth app registration page. When provided,
+   * a help link is rendered so the user can register their app.
+   */
+  readonly vendorDocsUrl?: string | null;
+  /**
+   * Called when the form is submitted with valid credentials.
+   * The parent is responsible for calling the `setOrgOAuthApp` mutation
+   * and handling errors.
+   */
+  readonly onSubmit: (clientId: string, clientSecret: string) => Promise<void>;
+  /** Called when the user cancels the form. */
+  readonly onCancel: () => void;
+  /** `true` while the submit mutation is in flight. */
+  readonly isSubmitting: boolean;
+  /** Error from the last failed submit, or `null`. */
+  readonly error: Error | null;
+  /** Additional CSS classes for the form root. */
+  readonly className?: string;
+}
+
+/**
+ * Two-field form for registering an org-level OAuth app override (BYOA).
+ *
+ * Collects only `client_id` and `client_secret` — all other OAuth
+ * configuration (endpoint URLs, scopes) is cloned from the platform's
+ * OAuthApp template by the backend.
+ *
+ * This is a pure presentational component with no dialog wrapper
+ * (headless-first). The parent is responsible for rendering it inside
+ * a `<dialog>`, modal, sheet, or inline context as needed. Platform
+ * builders who want a different container can import just the form.
+ *
+ * All styling flows through `--stgm-*` design tokens via `cn()`.
+ *
+ * @example
+ * ```tsx
+ * <OAuthAppForm
+ *   providerName="Figma"
+ *   vendorDocsUrl="https://www.figma.com/developers/api#oauth2"
+ *   onSubmit={async (clientId, clientSecret) => {
+ *     await orgOAuthApp.setOrgOAuthApp(clientId, clientSecret);
+ *     orgOAuthApp.refetch();
+ *   }}
+ *   onCancel={() => setShowForm(false)}
+ *   isSubmitting={orgOAuthApp.isSetting}
+ *   error={orgOAuthApp.setError}
+ * />
+ * ```
+ */
+export function OAuthAppForm({
+  providerName,
+  vendorDocsUrl,
+  onSubmit,
+  onCancel,
+  isSubmitting,
+  error,
+  className,
+}: OAuthAppFormProps) {
+  const [clientId, setClientId] = useState("");
+  const [clientSecret, setClientSecret] = useState("");
+  const [secretRevealed, setSecretRevealed] = useState(false);
+
+  const formId = useId();
+  const clientIdId = `${formId}-client-id`;
+  const clientSecretId = `${formId}-client-secret`;
+
+  const canSubmit = clientId.trim().length > 0 && clientSecret.trim().length > 0;
+  const isDisabled = isSubmitting;
+
+  const handleSubmit = useCallback(
+    async (e: React.FormEvent) => {
+      e.preventDefault();
+      if (!canSubmit || isDisabled) return;
+      await onSubmit(clientId.trim(), clientSecret.trim());
+    },
+    [canSubmit, isDisabled, onSubmit, clientId, clientSecret],
+  );
+
+  return (
+    <form
+      onSubmit={handleSubmit}
+      className={cn("flex flex-col gap-4", className)}
+    >
+      {/* Instructions */}
+      <div className="space-y-1.5">
+        <p className="text-sm text-foreground">
+          Register an OAuth app with{" "}
+          <span className="font-medium">{providerName}</span> and enter your
+          credentials below.
+        </p>
+        {vendorDocsUrl && (
+          <a
+            href={vendorDocsUrl}
+            target="_blank"
+            rel="noopener noreferrer"
+            className="inline-flex items-center gap-1 text-xs text-primary underline decoration-primary/40 underline-offset-2 hover:decoration-primary"
+          >
+            {providerName} OAuth app registration
+            <ExternalLinkIcon className="size-3 shrink-0" />
+          </a>
+        )}
+      </div>
+
+      {/* Fields */}
+      <div className="flex flex-col gap-3">
+        <div className="flex flex-col gap-1.5">
+          <label htmlFor={clientIdId} className="text-xs font-medium text-foreground">
+            Client ID
+          </label>
+          <input
+            id={clientIdId}
+            type="text"
+            value={clientId}
+            onChange={(e) => setClientId(e.target.value)}
+            disabled={isDisabled}
+            required
+            aria-required
+            autoComplete="off"
+            autoFocus
+            placeholder="e.g. 1234567890abcdef"
+            className={cn(
+              "w-full rounded-md border border-input bg-background px-2.5 py-1.5 text-xs text-foreground",
+              "placeholder:text-muted-foreground",
+              "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+              "disabled:pointer-events-none disabled:opacity-50",
+            )}
+          />
+        </div>
+
+        <div className="flex flex-col gap-1.5">
+          <label htmlFor={clientSecretId} className="text-xs font-medium text-foreground">
+            Client Secret
+          </label>
+          <div className="relative">
+            <input
+              id={clientSecretId}
+              type={secretRevealed ? "text" : "password"}
+              value={clientSecret}
+              onChange={(e) => setClientSecret(e.target.value)}
+              disabled={isDisabled}
+              required
+              aria-required
+              autoComplete="off"
+              placeholder="Your client secret"
+              className={cn(
+                "w-full rounded-md border border-input bg-background px-2.5 py-1.5 pr-8 text-xs text-foreground",
+                "placeholder:text-muted-foreground",
+                "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+                "disabled:pointer-events-none disabled:opacity-50",
+              )}
+            />
+            <button
+              type="button"
+              onClick={() => setSecretRevealed((v) => !v)}
+              disabled={isDisabled}
+              className={cn(
+                "absolute right-2 top-1/2 -translate-y-1/2",
+                "text-muted-foreground hover:text-foreground",
+                "disabled:pointer-events-none disabled:opacity-50",
+              )}
+              aria-label={secretRevealed ? "Hide client secret" : "Show client secret"}
+              tabIndex={-1}
+            >
+              {secretRevealed ? <EyeOffIcon /> : <EyeIcon />}
+            </button>
+          </div>
+        </div>
+      </div>
+
+      {/* Error */}
+      {error && (
+        <div
+          role="alert"
+          className="rounded-md border border-destructive/30 bg-destructive/10 px-2.5 py-2 text-xs text-destructive"
+        >
+          {getUserMessage(error)}
+        </div>
+      )}
+
+      {/* Actions */}
+      <div className="flex items-center justify-end gap-2">
+        <button
+          type="button"
+          onClick={onCancel}
+          disabled={isDisabled}
+          className={cn(
+            "rounded-md px-3 py-1.5 text-xs",
+            "text-muted-foreground hover:text-foreground hover:bg-accent/50",
+            "disabled:pointer-events-none disabled:opacity-50",
+          )}
+        >
+          Cancel
+        </button>
+        <button
+          type="submit"
+          disabled={!canSubmit || isDisabled}
+          className={cn(
+            "inline-flex items-center gap-1.5 rounded-md px-3 py-1.5 text-xs font-medium",
+            "bg-primary text-primary-foreground hover:bg-primary/90",
+            "disabled:pointer-events-none disabled:opacity-40",
+          )}
+        >
+          {isSubmitting && <SpinnerIcon />}
+          Save
+        </button>
+      </div>
+    </form>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// Icons (internal to this module — avoids cross-file dependencies)
+// ---------------------------------------------------------------------------
+
+function ExternalLinkIcon({ className }: { readonly className?: string }) {
+  return (
+    <svg
+      className={className}
+      viewBox="0 0 16 16"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="1.5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      aria-hidden="true"
+    >
+      <path d="M6 3.5H3.5a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V10" />
+      <path d="M9.5 2.5h4v4" />
+      <path d="M13.5 2.5 8 8" />
+    </svg>
+  );
+}
+
+function EyeIcon() {
+  return (
+    <svg
+      width="14"
+      height="14"
+      viewBox="0 0 16 16"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="1.5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      aria-hidden="true"
+    >
+      <path d="M1.5 8s2.5-4.5 6.5-4.5S14.5 8 14.5 8s-2.5 4.5-6.5 4.5S1.5 8 1.5 8z" />
+      <circle cx="8" cy="8" r="2" />
+    </svg>
+  );
+}
+
+function EyeOffIcon() {
+  return (
+    <svg
+      width="14"
+      height="14"
+      viewBox="0 0 16 16"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="1.5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      aria-hidden="true"
+    >
+      <path d="M6.59 6.59a2 2 0 0 0 2.82 2.82" />
+      <path d="M10.73 10.73A6.5 6.5 0 0 1 8 12.5c-4 0-6.5-4.5-6.5-4.5a11.5 11.5 0 0 1 3.77-3.73" />
+      <path d="M5.71 3.56A6.3 6.3 0 0 1 8 3.5c4 0 6.5 4.5 6.5 4.5a11.5 11.5 0 0 1-1.28 1.73" />
+      <path d="M2 2l12 12" />
+    </svg>
+  );
+}
+
+function SpinnerIcon() {
+  return (
+    <svg
+      width="12"
+      height="12"
+      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>
+  );
+}

package/src/mcp-server/index.ts

@@ -22,6 +22,15 @@ export type { UseMcpServerReturn } from "./useMcpServer";
 export { useOAuthGrantStatus } from "./useOAuthGrantStatus";
 export type { UseOAuthGrantStatusReturn } from "./useOAuthGrantStatus";
 
+export { useDisconnectOAuth } from "./useDisconnectOAuth";
+export type { UseDisconnectOAuthReturn } from "./useDisconnectOAuth";
+
+export { useOrgOAuthApp } from "./useOrgOAuthApp";
+export type { UseOrgOAuthAppReturn } from "./useOrgOAuthApp";
+
+export { OAuthAppForm } from "./OAuthAppForm";
+export type { OAuthAppFormProps } from "./OAuthAppForm";
+
 export { McpServerPicker } from "./McpServerPicker";
 export type {
   McpServerPickerProps,

package/src/mcp-server/useDisconnectOAuth.ts

@@ -0,0 +1,76 @@
+"use client";
+
+import { useCallback, useState } from "react";
+import { create } from "@bufbuild/protobuf";
+import { DisconnectOAuthInputSchema } from "@stigmer/protos/ai/stigmer/agentic/mcpserver/v1/io_pb";
+import { useStigmer } from "../hooks";
+import { toError } from "../internal/toError";
+
+/** Return value of {@link useDisconnectOAuth}. */
+export interface UseDisconnectOAuthReturn {
+  /**
+   * Disconnect the current user's OAuth grant for an MCP server.
+   *
+   * Deletes the managed environment (secrets first) and then the grant
+   * document. The operation is idempotent — disconnecting when no grant
+   * exists returns `false` without error.
+   *
+   * Resolves with `true` when a grant was removed, `false` when no
+   * grant existed. Callers should `refetch()` grant status and
+   * credentials after a successful disconnect.
+   */
+  readonly disconnect: (resourceId: string, org: string) => Promise<boolean>;
+  /** `true` while the disconnect request is in flight. */
+  readonly isDisconnecting: boolean;
+  /** Error from the last failed disconnect, or `null` when healthy. */
+  readonly error: Error | null;
+  /** Reset `error` to `null`. */
+  readonly clearError: () => void;
+}
+
+/**
+ * Behavior hook that wraps `mcpServer.disconnectOAuth()` with loading
+ * and error state.
+ *
+ * Removes the user's OAuth grant and associated managed environment
+ * for a given MCP server resource. After a successful disconnect the
+ * UI should revert to the "Not connected" state — call `refetch()` on
+ * the credentials / grant status hooks to reflect the change.
+ *
+ * @example
+ * ```tsx
+ * const { disconnect, isDisconnecting, error } = useDisconnectOAuth();
+ *
+ * await disconnect(mcpServerId, org);
+ * credentials.refetch(); // refresh grant status + env
+ * ```
+ */
+export function useDisconnectOAuth(): UseDisconnectOAuthReturn {
+  const stigmer = useStigmer();
+  const [isDisconnecting, setIsDisconnecting] = useState(false);
+  const [error, setError] = useState<Error | null>(null);
+
+  const clearError = useCallback(() => setError(null), []);
+
+  const disconnect = useCallback(
+    async (resourceId: string, org: string): Promise<boolean> => {
+      setIsDisconnecting(true);
+      setError(null);
+
+      try {
+        const result = await stigmer.mcpServer.disconnectOAuth(
+          create(DisconnectOAuthInputSchema, { resourceId, org }),
+        );
+        return result.disconnected;
+      } catch (err) {
+        setError(toError(err));
+        throw err;
+      } finally {
+        setIsDisconnecting(false);
+      }
+    },
+    [stigmer],
+  );
+
+  return { disconnect, isDisconnecting, error, clearError };
+}

package/src/mcp-server/useMcpServerCredentials.ts

@@ -3,6 +3,8 @@
 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 { OAuthConnectionHealth } from "@stigmer/protos/ai/stigmer/agentic/mcpserver/v1/io_pb";
+import { OAuthAppSource } from "@stigmer/protos/ai/stigmer/agentic/mcpserver/v1/status_pb";
 import { VendorApprovalStatus } from "@stigmer/protos/ai/stigmer/iam/oauthapp/v1/spec_pb";
 import { usePersonalEnvironment } from "../environment/usePersonalEnvironment";
 import { diffEnv } from "../environment/diffEnv";
@@ -41,6 +43,20 @@ export interface UseMcpServerCredentialsReturn {
    * environment key presence. Always `false` when `authMode` is `"manual"`.
    */
   readonly isOAuthConnected: boolean;
+  /**
+   * Health of the OAuth connection for this server.
+   *
+   * Provides a four-state signal beyond the binary `isOAuthConnected`:
+   * healthy, expired-but-refreshable, expired (re-auth needed), or no
+   * grant. `UNSPECIFIED` when `authMode` is `"manual"` or the status
+   * has not been fetched yet.
+   */
+  readonly connectionHealth: OAuthConnectionHealth;
+  /**
+   * `true` when the user can disconnect (i.e., an OAuth grant exists).
+   * Always `false` when `authMode` is `"manual"` or no grant is present.
+   */
+  readonly canDisconnect: boolean;
   /**
    * When the OAuth access token expires (Unix timestamp seconds).
    * `BigInt(0)` when no grant exists, `authMode` is `"manual"`, or the token
@@ -105,6 +121,38 @@ export interface UseMcpServerCredentialsReturn {
    * `null` when no documentation link is available.
    */
   readonly vendorApprovalDocsUrl: string | null;
+  /**
+   * `true` when the platform OAuth app's vendor approval is PENDING or
+   * REJECTED — i.e., the platform sign-in flow is blocked. Covers both
+   * statuses since the user-facing behavior is the same: sign-in is
+   * disabled and BYOA / manual entry are the available alternatives.
+   *
+   * See also {@link isVendorApprovalPending} which only checks PENDING.
+   */
+  readonly isVendorApprovalBlocked: boolean;
+  /**
+   * Where the effective OAuth app was resolved from for the caller's org.
+   *
+   * Enriched at query time by the backend — no additional RPC needed.
+   * `UNSPECIFIED` when `authMode` is `"manual"` or enrichment has not
+   * been performed yet.
+   */
+  readonly effectiveOAuthSource: OAuthAppSource;
+  /**
+   * `true` when an org-level BYOA override is active for this server.
+   * Derived from `effectiveOAuthSource === OAUTH_APP_SOURCE_ORG_OVERRIDE`.
+   */
+  readonly isOrgOAuthApp: boolean;
+  /**
+   * `true` when the BYOA option is relevant for this server: the server
+   * uses vendor OAuth (`authMode === "oauth"` with an `oauth_app_ref`)
+   * and no org override is currently active.
+   *
+   * When `true`, the UI should offer "Use your own OAuth app" as either
+   * a primary action (when vendor approval is blocked) or a secondary
+   * link (when vendor approval is granted).
+   */
+  readonly canBringOwnApp: boolean;
   /**
    * When `true`, the user has opted to bypass OAuth and enter the
    * `target_env_var` token manually. In this state:
@@ -203,10 +251,24 @@ export function useMcpServerCredentials(
   const oauthTargetEnvVar = auth?.targetEnvVar || null;
   const tokenLifetimeHint = auth?.tokenLifetimeHint || null;
 
+  const oauthStatus = mcpServer?.status?.oauthStatus;
   const isVendorApprovalPending =
     authMode === "oauth" &&
-    auth?.vendorApprovalStatus === VendorApprovalStatus.PENDING;
-  const vendorApprovalDocsUrl = auth?.vendorApprovalDocsUrl || null;
+    oauthStatus?.vendorApprovalStatus === VendorApprovalStatus.PENDING;
+  const isVendorApprovalBlocked =
+    authMode === "oauth" &&
+    (oauthStatus?.vendorApprovalStatus === VendorApprovalStatus.PENDING ||
+      oauthStatus?.vendorApprovalStatus === VendorApprovalStatus.REJECTED);
+  const vendorApprovalDocsUrl = oauthStatus?.vendorApprovalDocsUrl || null;
+
+  const effectiveOAuthSource =
+    oauthStatus?.effectiveOauthSource ??
+    OAuthAppSource.OAUTH_APP_SOURCE_UNSPECIFIED;
+  const isOrgOAuthApp =
+    effectiveOAuthSource === OAuthAppSource.OAUTH_APP_SOURCE_ORG_OVERRIDE;
+  const hasOAuthAppRef = Boolean(auth?.oauthAppRef?.slug);
+  const canBringOwnApp =
+    authMode === "oauth" && hasOAuthAppRef && !isOrgOAuthApp;
 
   const grantStatus = useOAuthGrantStatus(
     authMode === "oauth" ? (mcpServer?.metadata?.id ?? null) : null,
@@ -263,10 +325,16 @@ export function useMcpServerCredentials(
     authMode,
     oauthTargetEnvVar,
     isOAuthConnected,
+    connectionHealth: grantStatus.connectionHealth,
+    canDisconnect: isOAuthConnected,
     accessTokenExpiresAt: grantStatus.accessTokenExpiresAt,
     tokenLifetimeHint,
     isVendorApprovalPending,
+    isVendorApprovalBlocked,
     vendorApprovalDocsUrl,
+    effectiveOAuthSource,
+    isOrgOAuthApp,
+    canBringOwnApp,
     missingVariables,
     isReady,
     isLoading: personalEnv.isLoading || grantStatus.isLoading,

package/src/mcp-server/useOAuthGrantStatus.ts

@@ -2,7 +2,10 @@
 
 import { useCallback, useEffect, useState } from "react";
 import { create } from "@bufbuild/protobuf";
-import { GetOAuthGrantStatusInputSchema } from "@stigmer/protos/ai/stigmer/agentic/mcpserver/v1/io_pb";
+import {
+  OAuthConnectionHealth,
+  GetOAuthGrantStatusInputSchema,
+} from "@stigmer/protos/ai/stigmer/agentic/mcpserver/v1/io_pb";
 import { useStigmer } from "../hooks";
 import { toError } from "../internal/toError";
 
@@ -19,6 +22,14 @@ export interface UseOAuthGrantStatusReturn {
   readonly targetEnvVar: string;
   /** Auth method used (`"mcp_oauth"` or `"vendor_oauth"`), or empty string. */
   readonly authMethod: string;
+  /**
+   * Health of the OAuth connection, as evaluated by the backend.
+   *
+   * Gives the frontend an actionable signal beyond the binary `connected`
+   * boolean: healthy, expired-but-refreshable, expired (re-auth needed),
+   * or no grant at all. `UNSPECIFIED` when the status has not been fetched.
+   */
+  readonly connectionHealth: OAuthConnectionHealth;
   /** `true` while the grant status is being fetched. */
   readonly isLoading: boolean;
   /** Error from the last failed request, or `null` when healthy. */
@@ -34,6 +45,7 @@ const IDLE: UseOAuthGrantStatusReturn = {
   accessTokenExpiresAt: BIGINT_ZERO,
   targetEnvVar: "",
   authMethod: "",
+  connectionHealth: OAuthConnectionHealth.OAUTH_CONNECTION_HEALTH_UNSPECIFIED,
   isLoading: false,
   error: null,
   refetch: () => {},
@@ -67,6 +79,9 @@ export function useOAuthGrantStatus(
   const [accessTokenExpiresAt, setAccessTokenExpiresAt] = useState(BIGINT_ZERO);
   const [targetEnvVar, setTargetEnvVar] = useState("");
   const [authMethod, setAuthMethod] = useState("");
+  const [connectionHealth, setConnectionHealth] = useState(
+    OAuthConnectionHealth.OAUTH_CONNECTION_HEALTH_UNSPECIFIED,
+  );
   const [isLoading, setIsLoading] = useState(false);
   const [error, setError] = useState<Error | null>(null);
   const [fetchKey, setFetchKey] = useState(0);
@@ -79,6 +94,7 @@ export function useOAuthGrantStatus(
       setAccessTokenExpiresAt(BIGINT_ZERO);
       setTargetEnvVar("");
       setAuthMethod("");
+      setConnectionHealth(OAuthConnectionHealth.OAUTH_CONNECTION_HEALTH_UNSPECIFIED);
       setIsLoading(false);
       setError(null);
       return;
@@ -97,6 +113,7 @@ export function useOAuthGrantStatus(
           setAccessTokenExpiresAt(result.accessTokenExpiresAt);
           setTargetEnvVar(result.targetEnvVar);
           setAuthMethod(result.authMethod);
+          setConnectionHealth(result.connectionHealth);
           setIsLoading(false);
         },
         (err) => {
@@ -118,6 +135,7 @@ export function useOAuthGrantStatus(
     accessTokenExpiresAt,
     targetEnvVar,
     authMethod,
+    connectionHealth,
     isLoading,
     error,
     refetch,