@stigmer/react 3.10.0 → 3.11.1-dev.20260812192248

package/src/mcp-server/McpServerConfigPanel.tsx

@@ -14,7 +14,11 @@ import {
   type EnvVarFormSubmitOptions,
 } from "../environment/EnvVarForm.js";
 import { McpToolSelector } from "./McpToolSelector.js";
-import type { OAuthConnectPhase } from "./useMcpServerOAuthConnect.js";
+import { VendorApprovalBlockedNotice } from "./VendorApprovalBlockedNotice.js";
+import {
+  getOAuthConnectErrorMessage,
+  type OAuthConnectPhase,
+} from "./useMcpServerOAuthConnect.js";
 
 // ---------------------------------------------------------------------------
 // Credential sub-props
@@ -93,8 +97,27 @@ export interface McpServerOAuthSignInProps {
   readonly onClearDisconnectError?: () => void;
   /** Error from the most recent failed OAuth attempt, or `null`. */
   readonly error: Error | null;
+  /**
+   * The OAuth flow phase in which {@link error} was thrown, or `null`.
+   *
+   * Threading it lets the panel compose error copy through
+   * `getOAuthConnectErrorMessage`: a `"connecting"`-phase failure means
+   * sign-in SUCCEEDED and only the chained tool discovery failed —
+   * without this, the raw RPC error reads as a failed sign-in
+   * (stigmer/stigmer#418).
+   */
+  readonly failedPhase?: OAuthConnectPhase | null;
   /** Clear the OAuth error state. */
   readonly onClearError: () => void;
+  /**
+   * `true` when the user is signed in but the server has no discovered
+   * tools — the "signed in — tools not discovered yet" state
+   * (stigmer/stigmer#229/#418). The action button reads "Discover tools"
+   * and `onSignIn` is expected to run bare discovery instead of the
+   * OAuth popup. The caller owns that branch; this prop only drives
+   * presentation.
+   */
+  readonly isOAuthStranded?: boolean;
   /**
    * `true` when the platform's OAuth app is pending vendor approval.
    * Disables the sign-in button and shows an informational message.
@@ -120,6 +143,16 @@ export interface McpServerOAuthSignInProps {
    * `true` when an org-level BYOA override is active.
    */
   readonly isOrgOAuthApp?: boolean;
+  /**
+   * Whether a manually-entered static token can authenticate this server
+   * (`false` for `oauth_only` servers whose endpoint rejects static
+   * tokens). Consulted by the vendor-approval-blocked message so it never
+   * recommends manual entry on a server where it cannot work.
+   * When omitted, falls back to whether `onSwitchToManual` is wired on
+   * {@link McpServerConfigPanelProps} — callers gate that affordance on
+   * the same fact.
+   */
+  readonly manualEntrySupported?: boolean;
   /**
    * Open the BYOA form. The parent is responsible for rendering the
    * form/dialog and handling the mutation.
@@ -274,43 +307,43 @@ export function McpServerConfigPanel({
 
   return (
     <div
-      className={cn("space-y-3", className)}
+      className={cn("stg:space-y-3", className)}
       role="region"
       aria-label={`Configure ${serverName}`}
     >
       {/* Header */}
-      <div className="flex items-start gap-2">
+      <div className="stg:flex stg:items-start stg:gap-2">
         <button
           type="button"
           onClick={onBack}
           disabled={credentials?.isSubmitting || isOAuthBusy}
           className={cn(
-            "mt-0.5 shrink-0 rounded p-0.5",
-            "text-muted-foreground hover:text-foreground hover:bg-accent-hover",
-            "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
-            "disabled:pointer-events-none disabled:opacity-50",
+            "stg:mt-0.5 stg:shrink-0 stg:rounded stg:p-0.5",
+            "stg:text-muted-foreground stg:hover:text-foreground stg:hover:bg-accent-hover",
+            "stg:focus-visible:outline-none stg:focus-visible:ring-2 stg:focus-visible:ring-ring",
+            "stg:disabled:pointer-events-none stg:disabled:opacity-50",
           )}
           aria-label="Back to MCP server list"
         >
           <BackArrowIcon />
         </button>
 
-        <div className="flex min-w-0 flex-1 items-start gap-2">
+        <div className="stg:flex stg:min-w-0 stg:flex-1 stg:items-start stg:gap-2">
           {iconUrl && (
             <img
               src={iconUrl}
               alt=""
               width={16}
               height={16}
-              className="mt-0.5 size-4 shrink-0 rounded-sm object-contain"
+              className="stg:mt-0.5 stg:size-4 stg:shrink-0 stg:rounded-sm stg:object-contain"
             />
           )}
-          <div className="min-w-0 flex-1">
-            <h3 className="truncate text-xs font-medium text-foreground">
+          <div className="stg:min-w-0 stg:flex-1">
+            <h3 className="stg:truncate stg:text-xs stg:font-medium stg:text-foreground">
               {serverName}
             </h3>
             {description && (
-              <p className="line-clamp-2 text-[0.65rem] leading-relaxed text-muted-foreground">
+              <p className="stg:line-clamp-2 stg:text-[0.65rem] stg:leading-relaxed stg:text-muted-foreground">
                 {description}
               </p>
             )}
@@ -331,6 +364,8 @@ export function McpServerConfigPanel({
           disconnectError={oauthSignIn.disconnectError}
           onClearDisconnectError={oauthSignIn.onClearDisconnectError}
           error={oauthSignIn.error}
+          failedPhase={oauthSignIn.failedPhase}
+          isOAuthStranded={oauthSignIn.isOAuthStranded}
           onClearError={oauthSignIn.onClearError}
           isVendorApprovalPending={oauthSignIn.isVendorApprovalPending}
           isVendorApprovalBlocked={oauthSignIn.isVendorApprovalBlocked}
@@ -340,6 +375,7 @@ export function McpServerConfigPanel({
           onBringOwnApp={oauthSignIn.onBringOwnApp}
           onRemoveOrgApp={oauthSignIn.onRemoveOrgApp}
           isRemovingOrgApp={oauthSignIn.isRemovingOrgApp}
+          manualEntrySupported={oauthSignIn.manualEntrySupported}
           onSwitchToManual={onSwitchToManual}
         />
       )}
@@ -349,7 +385,7 @@ export function McpServerConfigPanel({
         <button
           type="button"
           onClick={onSwitchToOAuth}
-          className="text-[0.65rem] text-muted-foreground underline decoration-muted-foreground/40 underline-offset-2 hover:text-foreground hover:decoration-foreground"
+          className="stg:text-[0.65rem] stg:text-muted-foreground stg:underline stg:decoration-muted-foreground/40 stg:underline-offset-2 stg:hover:text-foreground stg:hover:decoration-foreground"
         >
           Sign in with OAuth instead
         </button>
@@ -366,7 +402,7 @@ export function McpServerConfigPanel({
           defaultSaveForFuture={credentials.defaultSaveForFuture}
           hideSaveToggle={credentials.hideSaveToggle}
           poolValues={credentials.poolValues}
-          className="w-full"
+          className="stg:w-full"
         />
       )}
 
@@ -374,7 +410,7 @@ export function McpServerConfigPanel({
       {error && (
         <div
           role="alert"
-          className="rounded-md border border-destructive/30 bg-destructive-subtle px-2.5 py-2 text-xs text-destructive"
+          className="stg:rounded-md stg:border stg:border-destructive/30 stg:bg-destructive-subtle stg:px-2.5 stg:py-2 stg:text-xs stg:text-destructive"
         >
           {getUserMessage(error)}
         </div>
@@ -404,34 +440,34 @@ function inlineHealthProps(
 ): { textClass: string; dotClass: string; label: string } {
   if (isVendorApprovalPending && !isConnected) {
     return {
-      textClass: "text-amber-600 dark:text-amber-400",
-      dotClass: "bg-amber-500",
+      textClass: "stg:text-amber-600 stg:dark:text-amber-400",
+      dotClass: "stg:bg-amber-500",
       label: "Pending approval",
     };
   }
   switch (health) {
     case OAuthConnectionHealth.OAUTH_CONNECTION_HEALTH_HEALTHY:
       return {
-        textClass: "text-success",
-        dotClass: "bg-success",
+        textClass: "stg:text-success",
+        dotClass: "stg:bg-success",
         label: "Signed in",
       };
     case OAuthConnectionHealth.OAUTH_CONNECTION_HEALTH_TOKEN_EXPIRED_REFRESHABLE:
       return {
-        textClass: "text-amber-600 dark:text-amber-400",
-        dotClass: "bg-amber-500",
+        textClass: "stg:text-amber-600 stg:dark:text-amber-400",
+        dotClass: "stg:bg-amber-500",
         label: "Token expired",
       };
     case OAuthConnectionHealth.OAUTH_CONNECTION_HEALTH_TOKEN_EXPIRED:
       return {
-        textClass: "text-destructive",
-        dotClass: "bg-destructive",
+        textClass: "stg:text-destructive",
+        dotClass: "stg:bg-destructive",
         label: "Re-auth needed",
       };
     default:
       return {
-        textClass: "text-muted-foreground",
-        dotClass: "bg-muted-foreground",
+        textClass: "stg:text-muted-foreground",
+        dotClass: "stg:bg-muted-foreground",
         label: "Sign-in required",
       };
   }
@@ -451,6 +487,8 @@ function InlineOAuthSignIn({
   disconnectError,
   onClearDisconnectError,
   error,
+  failedPhase,
+  isOAuthStranded,
   onClearError,
   isVendorApprovalPending,
   isVendorApprovalBlocked,
@@ -460,6 +498,7 @@ function InlineOAuthSignIn({
   onBringOwnApp,
   onRemoveOrgApp,
   isRemovingOrgApp,
+  manualEntrySupported,
   onSwitchToManual,
 }: {
   readonly serverName: string;
@@ -472,6 +511,8 @@ function InlineOAuthSignIn({
   readonly disconnectError?: Error | null;
   readonly onClearDisconnectError?: () => void;
   readonly error: Error | null;
+  readonly failedPhase?: OAuthConnectPhase | null;
+  readonly isOAuthStranded?: boolean;
   readonly onClearError: () => void;
   readonly isVendorApprovalPending?: boolean;
   readonly isVendorApprovalBlocked?: boolean;
@@ -481,6 +522,7 @@ function InlineOAuthSignIn({
   readonly onBringOwnApp?: () => void;
   readonly onRemoveOrgApp?: () => Promise<void>;
   readonly isRemovingOrgApp?: boolean;
+  readonly manualEntrySupported?: boolean;
   readonly onSwitchToManual?: () => void;
 }) {
   const [disconnectPhase, setDisconnectPhase] = useState<InlineDisconnectPhase>("idle");
@@ -494,17 +536,28 @@ function InlineOAuthSignIn({
     phase === "completing" ||
     phase === "connecting";
 
-  const signInDisabled = isBusy || (!!blocked && !isOrgOAuthApp);
+  // Stranded ("signed in — tools not discovered yet", stigmer/stigmer#418):
+  // the action is bare tool discovery, which needs no OAuth app — so the
+  // vendor-approval block must not gate it.
+  const stranded = !!isOAuthStranded;
+
+  const signInDisabled = isBusy || (!!blocked && !isOrgOAuthApp && !stranded);
   const anyBusy = isBusy || !!isDisconnecting || !!isRemovingOrgApp;
 
   const needsReAuth =
     connectionHealth === OAuthConnectionHealth.OAUTH_CONNECTION_HEALTH_TOKEN_EXPIRED;
 
-  const status = inlineHealthProps(
-    connectionHealth,
-    isConnected,
-    !!isVendorApprovalPending && !isOrgOAuthApp,
-  );
+  const status = stranded
+    ? {
+        textClass: "stg:text-amber-600 stg:dark:text-amber-400",
+        dotClass: "stg:bg-amber-500",
+        label: "Signed in \u2014 tools not discovered yet",
+      }
+    : inlineHealthProps(
+        connectionHealth,
+        isConnected,
+        !!isVendorApprovalPending && !isOrgOAuthApp,
+      );
 
   const showDisconnectLink =
     isConnected && onDisconnect && !anyBusy && disconnectPhase === "idle";
@@ -515,11 +568,11 @@ function InlineOAuthSignIn({
   // Inline disconnect confirmation
   if (disconnectPhase === "confirming" || disconnectPhase === "disconnecting") {
     return (
-      <div className="space-y-1.5">
-        <p className="text-[0.65rem] text-foreground">
+      <div className="stg:space-y-1.5">
+        <p className="stg:text-[0.65rem] stg:text-foreground">
           Remove credentials? You can reconnect at any time.
         </p>
-        <div className="flex items-center gap-1.5">
+        <div className="stg:flex stg:items-center stg:gap-1.5">
           <button
             type="button"
             disabled={!!isDisconnecting}
@@ -534,9 +587,9 @@ function InlineOAuthSignIn({
               }
             }}
             className={cn(
-              "inline-flex items-center gap-1 rounded px-2 py-0.5 text-[0.65rem] font-medium",
-              "bg-destructive text-destructive-foreground hover:bg-destructive-hover",
-              "disabled:pointer-events-none disabled:opacity-50",
+              "stg:inline-flex stg:items-center stg:gap-1 stg:rounded stg:px-2 stg:py-0.5 stg:text-[0.65rem] stg:font-medium",
+              "stg:bg-destructive stg:text-destructive-foreground stg:hover:bg-destructive-hover",
+              "stg:disabled:pointer-events-none stg:disabled:opacity-50",
             )}
           >
             {isDisconnecting && <InlineSpinner />}
@@ -550,21 +603,21 @@ function InlineOAuthSignIn({
               onClearDisconnectError?.();
             }}
             className={cn(
-              "inline-flex items-center rounded px-2 py-0.5 text-[0.65rem] font-medium",
-              "text-muted-foreground hover:text-foreground hover:bg-accent-hover",
-              "disabled:pointer-events-none disabled:opacity-50",
+              "stg:inline-flex stg:items-center stg:rounded stg:px-2 stg:py-0.5 stg:text-[0.65rem] stg:font-medium",
+              "stg:text-muted-foreground stg:hover:text-foreground stg:hover:bg-accent-hover",
+              "stg:disabled:pointer-events-none stg:disabled:opacity-50",
             )}
           >
             Cancel
           </button>
         </div>
         {disconnectError && (
-          <div className="flex items-start gap-1.5 text-[0.65rem] text-destructive" role="alert">
-            <span className="flex-1">{getUserMessage(disconnectError)}</span>
+          <div className="stg:flex stg:items-start stg:gap-1.5 stg:text-[0.65rem] stg:text-destructive" role="alert">
+            <span className="stg:flex-1">{getUserMessage(disconnectError)}</span>
             <button
               type="button"
               onClick={() => onClearDisconnectError?.()}
-              className="shrink-0 underline underline-offset-2 hover:no-underline"
+              className="stg:shrink-0 stg:underline stg:underline-offset-2 stg:hover:no-underline"
             >
               Dismiss
             </button>
@@ -577,12 +630,12 @@ function InlineOAuthSignIn({
   // Inline "remove custom app" confirmation
   if (removeOrgAppPhase === "confirming" || removeOrgAppPhase === "removing") {
     return (
-      <div className="space-y-1.5">
-        <p className="text-[0.65rem] text-foreground">
+      <div className="stg:space-y-1.5">
+        <p className="stg:text-[0.65rem] stg:text-foreground">
           Remove your custom OAuth app? The server will revert to the
           platform&apos;s app.
         </p>
-        <div className="flex items-center gap-1.5">
+        <div className="stg:flex stg:items-center stg:gap-1.5">
           <button
             type="button"
             disabled={!!isRemovingOrgApp}
@@ -597,9 +650,9 @@ function InlineOAuthSignIn({
               }
             }}
             className={cn(
-              "inline-flex items-center gap-1 rounded px-2 py-0.5 text-[0.65rem] font-medium",
-              "bg-destructive text-destructive-foreground hover:bg-destructive-hover",
-              "disabled:pointer-events-none disabled:opacity-50",
+              "stg:inline-flex stg:items-center stg:gap-1 stg:rounded stg:px-2 stg:py-0.5 stg:text-[0.65rem] stg:font-medium",
+              "stg:bg-destructive stg:text-destructive-foreground stg:hover:bg-destructive-hover",
+              "stg:disabled:pointer-events-none stg:disabled:opacity-50",
             )}
           >
             {isRemovingOrgApp && <InlineSpinner />}
@@ -610,9 +663,9 @@ function InlineOAuthSignIn({
             disabled={!!isRemovingOrgApp}
             onClick={() => setRemoveOrgAppPhase("idle")}
             className={cn(
-              "inline-flex items-center rounded px-2 py-0.5 text-[0.65rem] font-medium",
-              "text-muted-foreground hover:text-foreground hover:bg-accent-hover",
-              "disabled:pointer-events-none disabled:opacity-50",
+              "stg:inline-flex stg:items-center stg:rounded stg:px-2 stg:py-0.5 stg:text-[0.65rem] stg:font-medium",
+              "stg:text-muted-foreground stg:hover:text-foreground stg:hover:bg-accent-hover",
+              "stg:disabled:pointer-events-none stg:disabled:opacity-50",
             )}
           >
             Cancel
@@ -623,23 +676,23 @@ function InlineOAuthSignIn({
   }
 
   return (
-    <div className="space-y-1.5">
-      <div className="flex items-center justify-between">
-        <div className="flex items-center gap-1.5">
+    <div className="stg:space-y-1.5">
+      <div className="stg:flex stg:items-center stg:justify-between">
+        <div className="stg:flex stg:items-center stg:gap-1.5">
           <span
             className={cn(
-              "inline-flex items-center gap-1 text-[0.65rem] font-medium",
+              "stg:inline-flex stg:items-center stg:gap-1 stg:text-[0.65rem] stg:font-medium",
               status.textClass,
             )}
           >
             <span
-              className={cn("size-1.5 rounded-full", status.dotClass)}
+              className={cn("stg:size-1.5 stg:rounded-full", status.dotClass)}
               aria-hidden="true"
             />
             {status.label}
           </span>
           {isOrgOAuthApp && isConnected && (
-            <span className="text-[0.6rem] text-muted-foreground">
+            <span className="stg:text-[0.6rem] stg:text-muted-foreground">
               Your app
             </span>
           )}
@@ -647,7 +700,7 @@ function InlineOAuthSignIn({
             <button
               type="button"
               onClick={() => setDisconnectPhase("confirming")}
-              className="text-[0.65rem] text-muted-foreground underline decoration-muted-foreground/40 underline-offset-2 hover:text-foreground hover:decoration-foreground"
+              className="stg:text-[0.65rem] stg:text-muted-foreground stg:underline stg:decoration-muted-foreground/40 stg:underline-offset-2 stg:hover:text-foreground stg:hover:decoration-foreground"
             >
               Disconnect
             </button>
@@ -656,7 +709,7 @@ function InlineOAuthSignIn({
             <button
               type="button"
               onClick={() => setRemoveOrgAppPhase("confirming")}
-              className="text-[0.65rem] text-muted-foreground underline decoration-muted-foreground/40 underline-offset-2 hover:text-foreground hover:decoration-foreground"
+              className="stg:text-[0.65rem] stg:text-muted-foreground stg:underline stg:decoration-muted-foreground/40 stg:underline-offset-2 stg:hover:text-foreground stg:hover:decoration-foreground"
             >
               Remove custom app
             </button>
@@ -667,15 +720,17 @@ function InlineOAuthSignIn({
           onClick={onSignIn}
           disabled={signInDisabled}
           className={cn(
-            "inline-flex items-center gap-1 rounded px-2 py-0.5 text-[0.65rem] font-medium",
-            isConnected && !needsReAuth
-              ? "text-muted-foreground hover:text-foreground hover:bg-accent-hover"
-              : "bg-primary text-primary-foreground hover:bg-primary-hover",
-            "disabled:pointer-events-none disabled:opacity-50",
+            "stg:inline-flex stg:items-center stg:gap-1 stg:rounded stg:px-2 stg:py-0.5 stg:text-[0.65rem] stg:font-medium",
+            isConnected && !needsReAuth && !stranded
+              ? "stg:text-muted-foreground stg:hover:text-foreground stg:hover:bg-accent-hover"
+              : "stg:bg-primary stg:text-primary-foreground stg:hover:bg-primary-hover",
+            "stg:disabled:pointer-events-none stg:disabled:opacity-50",
           )}
         >
           {isBusy ? (
             <InlineSpinner />
+          ) : stranded ? (
+            "Discover tools"
           ) : isOrgOAuthApp && !isConnected ? (
             "Sign in with your app"
           ) : isConnected && !needsReAuth ? (
@@ -689,47 +744,34 @@ function InlineOAuthSignIn({
       </div>
 
       {/* Vendor approval blocked message with BYOA CTA */}
-      {blocked && !isConnected && !isOrgOAuthApp && (
-        <div className="text-[0.65rem] text-amber-700 dark:text-amber-300">
-          <p>
-            OAuth sign-in is pending vendor approval.
-            {canBringOwnApp && onBringOwnApp
-              ? " You can use your own OAuth app or enter a token manually."
-              : ""}
-          </p>
-          {canBringOwnApp && onBringOwnApp && (
-            <button
-              type="button"
-              onClick={onBringOwnApp}
-              className="mt-1 inline-flex items-center gap-1 rounded bg-amber-600 px-2 py-0.5 text-[0.6rem] font-medium text-white hover:bg-amber-700 dark:bg-amber-500 dark:text-amber-950 dark:hover:bg-amber-400"
-            >
-              Use your own OAuth app
-            </button>
-          )}
-          {vendorApprovalDocsUrl && !canBringOwnApp && (
-            <a
-              href={vendorApprovalDocsUrl}
-              target="_blank"
-              rel="noopener noreferrer"
-              className="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
-            </a>
-          )}
-        </div>
+      {!isConnected && !isOrgOAuthApp && (
+        <VendorApprovalBlockedNotice
+          blocked={!!blocked}
+          pending={!!isVendorApprovalPending}
+          manualEntrySupported={manualEntrySupported ?? Boolean(onSwitchToManual)}
+          canBringOwnApp={Boolean(canBringOwnApp && onBringOwnApp)}
+          docsUrl={vendorApprovalDocsUrl ?? null}
+          onBringOwnApp={onBringOwnApp}
+          compact
+        />
       )}
 
       {/* Org override indicator when not connected */}
       {isOrgOAuthApp && !isConnected && (
-        <span className="text-[0.6rem] text-muted-foreground">
+        <span className="stg:text-[0.6rem] stg:text-muted-foreground">
           Using your OAuth app
         </span>
       )}
 
       {error && (
-        <div className="flex items-start gap-1.5 text-[0.65rem] text-destructive" role="alert">
-          <span className="flex-1">{getUserMessage(error)}</span>
-          <div className="flex shrink-0 items-center gap-1.5">
+        <div className="stg:flex stg:items-start stg:gap-1.5 stg:text-[0.65rem] stg:text-destructive" role="alert">
+          {/* Phase-aware copy: a "connecting"-phase failure means sign-in
+              succeeded and only tool discovery failed — the raw RPC message
+              alone reads as a failed sign-in (stigmer/stigmer#418). */}
+          <span className="stg:flex-1">
+            {getOAuthConnectErrorMessage(error, failedPhase ?? null)}
+          </span>
+          <div className="stg:flex stg:shrink-0 stg:items-center stg:gap-1.5">
             {isRetryableError(error) && (
               <button
                 type="button"
@@ -737,7 +779,7 @@ function InlineOAuthSignIn({
                   onClearError();
                   onSignIn();
                 }}
-                className="font-medium underline underline-offset-2 hover:no-underline"
+                className="stg:font-medium stg:underline stg:underline-offset-2 stg:hover:no-underline"
               >
                 Try again
               </button>
@@ -745,7 +787,7 @@ function InlineOAuthSignIn({
             <button
               type="button"
               onClick={onClearError}
-              className="underline underline-offset-2 hover:no-underline"
+              className="stg:underline stg:underline-offset-2 stg:hover:no-underline"
             >
               Dismiss
             </button>
@@ -755,12 +797,12 @@ function InlineOAuthSignIn({
 
       {/* Secondary actions: manual entry, BYOA */}
       {!isConnected && !isBusy && (
-        <div className="flex items-center gap-2">
+        <div className="stg:flex stg:items-center stg:gap-2">
           {onSwitchToManual && (
             <button
               type="button"
               onClick={onSwitchToManual}
-              className="text-[0.65rem] text-muted-foreground underline decoration-muted-foreground/40 underline-offset-2 hover:text-foreground hover:decoration-foreground"
+              className="stg:text-[0.65rem] stg:text-muted-foreground stg:underline stg:decoration-muted-foreground/40 stg:underline-offset-2 stg:hover:text-foreground stg:hover:decoration-foreground"
             >
               Enter token manually
             </button>
@@ -769,7 +811,7 @@ function InlineOAuthSignIn({
             <button
               type="button"
               onClick={onBringOwnApp}
-              className="text-[0.65rem] text-muted-foreground underline decoration-muted-foreground/40 underline-offset-2 hover:text-foreground hover:decoration-foreground"
+              className="stg:text-[0.65rem] stg:text-muted-foreground stg:underline stg:decoration-muted-foreground/40 stg:underline-offset-2 stg:hover:text-foreground stg:hover:decoration-foreground"
             >
               Use your own OAuth app
             </button>
@@ -790,7 +832,7 @@ function InlineSpinner() {
       stroke="currentColor"
       strokeWidth="2"
       strokeLinecap="round"
-      className="animate-spin"
+      className="stg:animate-spin"
       aria-hidden="true"
     >
       <path d="M8 2a6 6 0 1 0 6 6" />