@stigmer/react 3.10.0 → 3.11.0

package/src/mcp-server/useMcpServerOAuthConnect.ts

@@ -2,6 +2,7 @@
 
 import { useCallback, useEffect, useRef, useState } from "react";
 import { create } from "@bufbuild/protobuf";
+import { getUserMessage } from "@stigmer/sdk";
 import type { McpServer } from "@stigmer/protos/ai/stigmer/agentic/mcpserver/v1/api_pb";
 import {
   InitiateOAuthConnectInputSchema,
@@ -36,6 +37,34 @@ export type OAuthConnectPhase =
   | "connecting"
   | "done";
 
+/**
+ * User-facing message for an OAuth connect failure, honest about *where*
+ * the chain broke.
+ *
+ * The flow persists state in two acts: `completeOAuthConnect` stores the
+ * grant ("Connected" from then on), and only afterwards does the chained
+ * `connect` run tool discovery. A failure in the `"connecting"` phase
+ * therefore means sign-in itself SUCCEEDED — presenting the raw RPC error
+ * alone reads as if OAuth failed and sends users back through the popup
+ * for nothing (stigmer/stigmer#229). Every surface that renders
+ * {@link UseMcpServerOAuthConnectReturn.error} should compose its copy
+ * through this helper.
+ *
+ * The error object is never wrapped or mutated: `classifyError` /
+ * `isRetryableError` dispatch on the original `StigmerError`/`ConnectError`
+ * instance, so retry affordances keep working on the error as thrown.
+ */
+export function getOAuthConnectErrorMessage(
+  error: Error,
+  failedPhase: OAuthConnectPhase | null,
+): string {
+  const base = getUserMessage(error);
+  if (failedPhase === "connecting") {
+    return `Signed in successfully, but tool discovery failed: ${base}`;
+  }
+  return base;
+}
+
 /** Return value of {@link useMcpServerOAuthConnect}. */
 export interface UseMcpServerOAuthConnectReturn {
   /**
@@ -63,6 +92,17 @@ export interface UseMcpServerOAuthConnectReturn {
   readonly phase: OAuthConnectPhase;
   /** Error from the most recent unsuccessful attempt, or `null`. */
   readonly error: Error | null;
+  /**
+   * The phase the flow was in when {@link error} was thrown, or `null`
+   * when there is no error.
+   *
+   * The load-bearing value is `"connecting"`: it means OAuth sign-in
+   * completed (the grant is stored server-side) and only the chained
+   * tool-discovery `connect` failed. Consumers should branch on it to
+   * (a) render honest copy via {@link getOAuthConnectErrorMessage} and
+   * (b) retry with a bare `connect` instead of relaunching the popup.
+   */
+  readonly failedPhase: OAuthConnectPhase | null;
   /** Reset the hook to idle state, clearing any error. */
   readonly clearError: () => void;
 }
@@ -107,10 +147,20 @@ export function useMcpServerOAuthConnect(): UseMcpServerOAuthConnectReturn {
   const stigmer = useStigmer();
   const [phase, setPhase] = useState<OAuthConnectPhase>("idle");
   const [error, setError] = useState<Error | null>(null);
+  const [failedPhase, setFailedPhase] = useState<OAuthConnectPhase | null>(null);
 
   const popupRef = useRef<Window | null>(null);
   const cleanupRef = useRef<(() => void) | null>(null);
   const cancelledRef = useRef(false);
+  // Mirrors the phase state for the catch block: React state reads would be
+  // stale inside the async flow, and failedPhase must record exactly where
+  // the chain broke (completeOAuthConnect vs the chained connect).
+  const phaseRef = useRef<OAuthConnectPhase>("idle");
+
+  const advancePhase = useCallback((next: OAuthConnectPhase) => {
+    phaseRef.current = next;
+    setPhase(next);
+  }, []);
 
   useEffect(() => {
     return () => {
@@ -126,14 +176,16 @@ export function useMcpServerOAuthConnect(): UseMcpServerOAuthConnectReturn {
       popupRef.current = null;
       cleanupRef.current = null;
     }
-    setPhase("idle");
+    advancePhase("idle");
     setError(null);
-  }, []);
+    setFailedPhase(null);
+  }, [advancePhase]);
 
   const startOAuth = useCallback(
     async (mcpServerId: string, org: string, declaredEnvKeys?: readonly string[]): Promise<McpServer> => {
-      setPhase("initiating");
+      advancePhase("initiating");
       setError(null);
+      setFailedPhase(null);
       cancelledRef.current = false;
 
       cleanupRef.current?.();
@@ -142,7 +194,8 @@ export function useMcpServerOAuthConnect(): UseMcpServerOAuthConnectReturn {
       if (!popup) {
         const blocked = popupBlockedError();
         setError(blocked);
-        setPhase("idle");
+        setFailedPhase("initiating");
+        advancePhase("idle");
         throw blocked;
       }
 
@@ -154,7 +207,7 @@ export function useMcpServerOAuthConnect(): UseMcpServerOAuthConnectReturn {
         );
 
         popup.location.href = initOutput.authorizationUrl;
-        setPhase("awaiting-callback");
+        advancePhase("awaiting-callback");
 
         const { code, state } = await waitForOAuthCallback(
           popup,
@@ -164,7 +217,7 @@ export function useMcpServerOAuthConnect(): UseMcpServerOAuthConnectReturn {
           },
         );
 
-        setPhase("completing");
+        advancePhase("completing");
 
         await stigmer.mcpServer.completeOAuthConnect(
           create(CompleteOAuthConnectInputSchema, {
@@ -174,7 +227,7 @@ export function useMcpServerOAuthConnect(): UseMcpServerOAuthConnectReturn {
           }),
         );
 
-        setPhase("connecting");
+        advancePhase("connecting");
 
         const systemEnv = declaredEnvKeys
           ? await resolveDeclaredSystemEnvVars(stigmer, declaredEnvKeys)
@@ -197,13 +250,14 @@ export function useMcpServerOAuthConnect(): UseMcpServerOAuthConnectReturn {
 
         const server = await stigmer.mcpServer.connect(input);
 
-        setPhase("done");
+        advancePhase("done");
         return server;
       } catch (err) {
         const wrapped = toError(err);
         if (!cancelledRef.current) {
           setError(wrapped);
-          setPhase("idle");
+          setFailedPhase(phaseRef.current);
+          advancePhase("idle");
           closeOAuthPopup(popup);
         }
         cancelledRef.current = false;
@@ -213,7 +267,7 @@ export function useMcpServerOAuthConnect(): UseMcpServerOAuthConnectReturn {
         cleanupRef.current = null;
       }
     },
-    [stigmer],
+    [stigmer, advancePhase],
   );
 
   return {
@@ -221,6 +275,7 @@ export function useMcpServerOAuthConnect(): UseMcpServerOAuthConnectReturn {
     isInProgress: phase !== "idle" && phase !== "done",
     phase,
     error,
+    failedPhase,
     clearError,
   };
 }

package/src/models/HarnessSelector.tsx

@@ -82,8 +82,8 @@ export function HarnessSelector({
       aria-label="Execution engine"
       onKeyDown={handleKeyDown}
       className={[
-        "inline-flex items-center rounded-md border border-border bg-background p-0.5",
-        disabled ? "pointer-events-none opacity-50" : undefined,
+        "stg:inline-flex stg:items-center stg:rounded-md stg:border stg:border-border stg:bg-background stg:p-0.5",
+        disabled ? "stg:pointer-events-none stg:opacity-50" : undefined,
         className,
       ]
         .filter(Boolean)
@@ -105,19 +105,19 @@ export function HarnessSelector({
               if (!isActive) onValueChange(option);
             }}
             className={[
-              "inline-flex items-center gap-1 rounded-[5px] px-2 py-1 text-xs transition-colors",
-              "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
-              "disabled:pointer-events-none",
+              "stg:inline-flex stg:items-center stg:gap-1 stg:rounded-[5px] stg:px-2 stg:py-1 stg:text-xs stg:transition-colors",
+              "stg:focus-visible:outline-none stg:focus-visible:ring-2 stg:focus-visible:ring-ring",
+              "stg:disabled:pointer-events-none",
               isActive
-                ? "bg-accent font-medium text-foreground shadow-sm"
-                : "text-muted-foreground hover:text-foreground",
+                ? "stg:bg-accent stg:font-medium stg:text-foreground stg:shadow-sm"
+                : "stg:text-muted-foreground stg:hover:text-foreground",
             ].join(" ")}
           >
             {HARNESS_LABELS[option]}
             {option === "cursor" && (
               <span
                 aria-label="premium"
-                className="text-[0.6rem] text-muted-foreground"
+                className="stg:text-[0.6rem] stg:text-muted-foreground"
               >
                 $$$
               </span>

package/src/models/ModelSelector.tsx

@@ -353,26 +353,26 @@ export function ModelSelector({
       <Popover.Trigger
         disabled={disabled}
         className={cn(
-          "inline-flex items-center gap-1.5 rounded-md border border-border",
-          "bg-background px-2.5 py-1.5 text-xs 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",
-          "transition-colors max-w-[20rem] max-sm:max-w-[12rem]",
+          "stg:inline-flex stg:items-center stg:gap-1.5 stg:rounded-md stg:border stg:border-border",
+          "stg:bg-background stg:px-2.5 stg:py-1.5 stg:text-xs stg: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",
+          "stg:transition-colors stg:max-w-[20rem] stg:max-sm:max-w-[12rem]",
           className,
         )}
       >
         {triggerHarness && (
-          <span className="shrink-0 text-muted-foreground">{triggerHarness}</span>
+          <span className="stg:shrink-0 stg:text-muted-foreground">{triggerHarness}</span>
         )}
         {triggerHarness && (
-          <span className="shrink-0 text-border" aria-hidden>·</span>
+          <span className="stg:shrink-0 stg:text-border" aria-hidden>·</span>
         )}
-        <span className="truncate">{triggerLabel}</span>
+        <span className="stg:truncate">{triggerLabel}</span>
         {fastActive && (
           <span
             className={cn(
-              "inline-flex shrink-0 items-center gap-0.5 rounded-full border border-primary px-1.5 py-px",
-              "text-[0.6rem] font-medium uppercase tracking-wider text-primary",
+              "stg:inline-flex stg:shrink-0 stg:items-center stg:gap-0.5 stg:rounded-full stg:border stg:border-primary stg:px-1.5 stg:py-px",
+              "stg:text-[0.6rem] stg:font-medium stg:uppercase stg:tracking-wider stg:text-primary",
             )}
           >
             <BoltIcon />
@@ -388,13 +388,13 @@ export function ModelSelector({
             role="dialog"
             aria-label="Model selector"
             className={cn(
-              "z-popover w-72 rounded-lg border border-border bg-popover shadow-md",
-              "text-popover-foreground",
+              "stg:z-popover stg:w-72 stg:rounded-lg stg:border stg:border-border stg:bg-popover stg:shadow-md",
+              "stg:text-popover-foreground",
             )}
           >
             {/* Harness selector — inline label + compact dropdown; disabled when locked */}
-            <div className="relative flex items-center justify-between border-b border-border px-3 py-2">
-              <span className="text-xs text-muted-foreground">Harness</span>
+            <div className="stg:relative stg:flex stg:items-center stg:justify-between stg:border-b stg:border-border stg:px-3 stg:py-2">
+              <span className="stg:text-xs stg:text-muted-foreground">Harness</span>
               <button
                 type="button"
                 aria-haspopup="listbox"
@@ -402,13 +402,13 @@ export function ModelSelector({
                 aria-label="Select harness"
                 disabled={isHarnessLocked}
                 className={cn(
-                  "inline-flex items-center gap-1.5 rounded-md border border-border",
-                  "bg-background px-2.5 py-1.5 text-xs text-foreground",
-                  "transition-colors",
-                  "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+                  "stg:inline-flex stg:items-center stg:gap-1.5 stg:rounded-md stg:border stg:border-border",
+                  "stg:bg-background stg:px-2.5 stg:py-1.5 stg:text-xs stg:text-foreground",
+                  "stg:transition-colors",
+                  "stg:focus-visible:outline-none stg:focus-visible:ring-2 stg:focus-visible:ring-ring",
                   isHarnessLocked
-                    ? "cursor-not-allowed opacity-50"
-                    : "hover:bg-accent-hover",
+                    ? "stg:cursor-not-allowed stg:opacity-50"
+                    : "stg:hover:bg-accent-hover",
                 )}
                 onClick={() => {
                   if (!isHarnessLocked) setHarnessOpen(!harnessOpen);
@@ -429,8 +429,8 @@ export function ModelSelector({
                   role="listbox"
                   aria-label="Available harnesses"
                   className={cn(
-                    "absolute right-3 top-full z-10 mt-1 overflow-hidden rounded-md border border-border",
-                    "bg-popover shadow-md",
+                    "stg:absolute stg:right-3 stg:top-full stg:z-10 stg:mt-1 stg:overflow-hidden stg:rounded-md stg:border stg:border-border",
+                    "stg:bg-popover stg:shadow-md",
                   )}
                 >
                   {resolvedHarnesses.map((h) => {
@@ -442,17 +442,17 @@ export function ModelSelector({
                         role="option"
                         aria-selected={isActive}
                         className={cn(
-                          "flex w-full items-center gap-2 px-2.5 py-1.5 text-xs transition-colors",
-                          "hover:bg-accent-hover",
-                          isActive && "font-medium",
+                          "stg:flex stg:w-full stg:items-center stg:gap-2 stg:px-2.5 stg:py-1.5 stg:text-xs stg:transition-colors",
+                          "stg:hover:bg-accent-hover",
+                          isActive && "stg:font-medium",
                         )}
                         onClick={() => {
                           handleHarnessChange(h);
                           setHarnessOpen(false);
                         }}
                       >
-                        <span className="flex-1 text-left">{HARNESS_META[h].label}</span>
-                        {isActive && <CheckIcon className="shrink-0 text-primary" />}
+                        <span className="stg:flex-1 stg:text-left">{HARNESS_META[h].label}</span>
+                        {isActive && <CheckIcon className="stg:shrink-0 stg:text-primary" />}
                       </button>
                     );
                   })}
@@ -466,10 +466,10 @@ export function ModelSelector({
                 Rendered only while the selected model prices a fast
                 variant (#357). */}
             {showServiceTierToggle && (
-              <div className="flex items-center justify-between border-b border-border px-3 py-2">
-                <div className="flex flex-col">
-                  <span className="text-xs text-foreground">Fast tier</span>
-                  <span className="text-[0.65rem] text-muted-foreground">
+              <div className="stg:flex stg:items-center stg:justify-between stg:border-b stg:border-border stg:px-3 stg:py-2">
+                <div className="stg:flex stg:flex-col">
+                  <span className="stg:text-xs stg:text-foreground">Fast tier</span>
+                  <span className="stg:text-[0.65rem] stg:text-muted-foreground">
                     Faster responses at higher per-token rates
                   </span>
                 </div>
@@ -484,7 +484,7 @@ export function ModelSelector({
             )}
 
             {/* Search input */}
-            <div className="border-b border-border px-3 py-1.5">
+            <div className="stg:border-b stg:border-border stg:px-3 stg:py-1.5">
               <input
                 ref={searchRef}
                 role="searchbox"
@@ -494,8 +494,8 @@ export function ModelSelector({
                 onChange={(e) => setSearchQuery(e.target.value)}
                 onKeyDown={handleKeyDown}
                 className={cn(
-                  "w-full bg-transparent text-xs text-foreground placeholder:text-muted-foreground",
-                  "outline-none",
+                  "stg:w-full stg:bg-transparent stg:text-xs stg:text-foreground stg:placeholder:text-muted-foreground",
+                  "stg:outline-none",
                 )}
               />
             </div>
@@ -505,23 +505,23 @@ export function ModelSelector({
               ref={listRef}
               role="listbox"
               aria-label="Available models"
-              className="max-h-72 overflow-y-auto p-1"
+              className="stg:max-h-72 stg:overflow-y-auto stg:p-1"
             >
               {visibleModels.length === 0 && isLoading && (
-                <div className="flex items-center justify-center gap-2 px-2 py-3">
-                  <div className="size-3 animate-spin rounded-full border border-muted border-t-primary" />
-                  <span className="text-xs text-muted-foreground">Loading models…</span>
+                <div className="stg:flex stg:items-center stg:justify-center stg:gap-2 stg:px-2 stg:py-3">
+                  <div className="stg:size-3 stg:animate-spin stg:rounded-full stg:border stg:border-muted stg:border-t-primary" />
+                  <span className="stg:text-xs stg:text-muted-foreground">Loading models…</span>
                 </div>
               )}
 
               {visibleModels.length === 0 && !isLoading && error != null && (
-                <div className="flex flex-col items-center gap-1.5 px-2 py-3">
-                  <span className="text-xs text-muted-foreground">Failed to load models</span>
+                <div className="stg:flex stg:flex-col stg:items-center stg:gap-1.5 stg:px-2 stg:py-3">
+                  <span className="stg:text-xs stg:text-muted-foreground">Failed to load models</span>
                   <button
                     type="button"
                     className={cn(
-                      "rounded-md border border-border bg-background px-2.5 py-1 text-xs text-foreground",
-                      "hover:bg-accent-hover transition-colors cursor-pointer",
+                      "stg:rounded-md stg:border stg:border-border stg:bg-background stg:px-2.5 stg:py-1 stg:text-xs stg:text-foreground",
+                      "stg:hover:bg-accent-hover stg:transition-colors stg:cursor-pointer",
                     )}
                     onClick={refetch}
                   >
@@ -531,7 +531,7 @@ export function ModelSelector({
               )}
 
               {visibleModels.length === 0 && !isLoading && error == null && (
-                <div className="px-2 py-3 text-center text-xs text-muted-foreground">
+                <div className="stg:px-2 stg:py-3 stg:text-center stg:text-xs stg:text-muted-foreground">
                   No models found
                 </div>
               )}
@@ -540,7 +540,7 @@ export function ModelSelector({
               {groupedModels ? (
                 Array.from(groupedModels.entries()).map(([group, groupModels]) => (
                   <div key={group}>
-                    <div className="px-2 pb-0.5 pt-2 text-[0.6rem] font-medium uppercase tracking-wider text-muted-foreground">
+                    <div className="stg:px-2 stg:pb-0.5 stg:pt-2 stg:text-[0.6rem] stg:font-medium stg:uppercase stg:tracking-wider stg:text-muted-foreground">
                       {group}
                     </div>
                     {groupModels.map((model) => (
@@ -575,9 +575,9 @@ export function ModelSelector({
                 <button
                   type="button"
                   className={cn(
-                    "mt-1 flex w-full items-center justify-center rounded-md border border-dashed border-border",
-                    "px-2 py-1.5 text-xs text-muted-foreground",
-                    "hover:bg-accent-hover hover:text-foreground transition-colors cursor-pointer",
+                    "stg:mt-1 stg:flex stg:w-full stg:items-center stg:justify-center stg:rounded-md stg:border stg:border-dashed stg:border-border",
+                    "stg:px-2 stg:py-1.5 stg:text-xs stg:text-muted-foreground",
+                    "stg:hover:bg-accent-hover stg:hover:text-foreground stg:transition-colors stg:cursor-pointer",
                   )}
                   onClick={() => setShowAll(true)}
                 >
@@ -618,28 +618,28 @@ function ModelRow({
       aria-selected={isSelected}
       type="button"
       className={cn(
-        "flex w-full cursor-pointer flex-col rounded-md px-2 py-1.5 text-xs outline-none",
-        "transition-colors",
-        isHighlighted && "bg-accent text-accent-foreground",
-        !isHighlighted && "hover:bg-accent-hover",
+        "stg:flex stg:w-full stg:cursor-pointer stg:flex-col stg:rounded-md stg:px-2 stg:py-1.5 stg:text-xs stg:outline-none",
+        "stg:transition-colors",
+        isHighlighted && "stg:bg-accent stg:text-accent-foreground",
+        !isHighlighted && "stg:hover:bg-accent-hover",
       )}
       onClick={onClick}
       onMouseEnter={onMouseEnter}
     >
-      <div className="flex w-full items-center gap-2">
-        <span className="flex-1 truncate text-left font-medium">{model.displayName}</span>
+      <div className="stg:flex stg:w-full stg:items-center stg:gap-2">
+        <span className="stg:flex-1 stg:truncate stg:text-left stg:font-medium">{model.displayName}</span>
 
-        <span className="shrink-0 text-[0.6rem] text-muted-foreground">
+        <span className="stg:shrink-0 stg:text-[0.6rem] stg:text-muted-foreground">
           {showSpeedBadge
             ? `${SPEED_TIER_LABEL[model.speedTier]} ${COST_TIER_LABEL[model.costTier]}`
             : COST_TIER_LABEL[model.costTier]}
         </span>
 
-        {isSelected && <CheckIcon className="shrink-0 text-primary" />}
+        {isSelected && <CheckIcon className="stg:shrink-0 stg:text-primary" />}
       </div>
 
       {showDescription && model.shortDescription && (
-        <span className="mt-0.5 block text-left text-[0.65rem] text-muted-foreground">
+        <span className="stg:mt-0.5 stg:block stg:text-left stg:text-[0.65rem] stg:text-muted-foreground">
           {model.shortDescription}
         </span>
       )}
@@ -650,7 +650,7 @@ function ModelRow({
 function ChevronIcon() {
   return (
     <svg
-      className="shrink-0 text-muted-foreground"
+      className="stg:shrink-0 stg:text-muted-foreground"
       width="10"
       height="10"
       viewBox="0 0 10 10"
@@ -686,7 +686,7 @@ function CheckIcon({ className }: { className?: string }) {
 function BoltIcon() {
   return (
     <svg
-      className="shrink-0"
+      className="stg:shrink-0"
       width="8"
       height="10"
       viewBox="0 0 8 10"

package/src/models/__tests__/ModelSelector-serviceTier.test.tsx

@@ -4,13 +4,8 @@ import { ModelSelector } from "../ModelSelector";
 import { ModelRegistryContext } from "../ModelRegistryContext";
 import type { ModelInfo } from "../registry";
 
-// Portal into document.body so the popover mounts under happy-dom, and shim
-// ResizeObserver for Base UI's positioner (the scheduleCreation.test.tsx
-// pattern).
-vi.mock("../../portal-container", () => ({
-  useStigmerPortalContainer: () => document.body,
-}));
-
+// Shim ResizeObserver for Base UI's positioner (the
+// scheduleCreation.test.tsx pattern).
 beforeAll(() => {
   if (!("ResizeObserver" in globalThis)) {
     (globalThis as unknown as { ResizeObserver: unknown }).ResizeObserver =

package/src/oauth-app/CreateOAuthAppForm.tsx

@@ -148,8 +148,8 @@ export function CreateOAuthAppForm({
   );
 
   return (
-    <form onSubmit={handleSubmit} className={cn("space-y-3", className)}>
-      <div className="space-y-3">
+    <form onSubmit={handleSubmit} className={cn("stg:space-y-3", className)}>
+      <div className="stg:space-y-3">
         <FormField
           id="stgm-oauth-name"
           label="Name"
@@ -219,14 +219,14 @@ export function CreateOAuthAppForm({
           <button
             type="button"
             onClick={() => setShowAdvanced((v) => !v)}
-            className="text-muted-foreground hover:text-foreground flex items-center gap-1 text-[0.65rem] font-medium transition-colors"
+            className="stg:text-muted-foreground stg:hover:text-foreground stg:flex stg:items-center stg:gap-1 stg:text-[0.65rem] stg:font-medium stg:transition-colors"
           >
             <ChevronIcon expanded={showAdvanced} />
             Advanced settings
           </button>
 
           {showAdvanced && (
-            <div className="mt-2 space-y-3 border-l-2 border-border-muted pl-3">
+            <div className="stg:mt-2 stg:space-y-3 stg:border-l-2 stg:border-border-muted stg:pl-3">
               <FormField
                 id="stgm-oauth-scopes"
                 label="Scopes"
@@ -257,10 +257,10 @@ export function CreateOAuthAppForm({
                 disabled={isCreating}
               />
 
-              <div className="space-y-1">
+              <div className="stg:space-y-1">
                 <label
                   htmlFor="stgm-oauth-approval-status"
-                  className="text-xs font-medium text-foreground"
+                  className="stg:text-xs stg:font-medium stg:text-foreground"
                 >
                   Vendor approval status
                 </label>
@@ -274,9 +274,9 @@ export function CreateOAuthAppForm({
                   }
                   disabled={isCreating}
                   className={cn(
-                    "w-full rounded-md border border-input bg-background px-2.5 py-1.5 text-xs text-foreground",
-                    "focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring",
-                    "disabled:pointer-events-none disabled:opacity-50",
+                    "stg:w-full stg:rounded-md stg:border stg:border-input stg:bg-background stg:px-2.5 stg:py-1.5 stg:text-xs stg:text-foreground",
+                    "stg:focus-visible:outline-none stg:focus-visible:ring-1 stg:focus-visible:ring-ring",
+                    "stg:disabled:pointer-events-none stg:disabled:opacity-50",
                   )}
                 >
                   <option value="unspecified">Unspecified (treated as approved)</option>
@@ -284,7 +284,7 @@ export function CreateOAuthAppForm({
                   <option value="approved">Approved</option>
                   <option value="rejected">Rejected</option>
                 </select>
-                <p className="text-[0.65rem] text-muted-foreground">
+                <p className="stg:text-[0.65rem] stg:text-muted-foreground">
                   Vendor marketplace approval lifecycle status
                 </p>
               </div>
@@ -304,19 +304,19 @@ export function CreateOAuthAppForm({
       </div>
 
       {error && (
-        <p className="text-destructive text-[0.65rem]" role="alert">
+        <p className="stg:text-destructive stg:text-[0.65rem]" role="alert">
           {getUserMessage(error)}
         </p>
       )}
 
-      <div className="flex items-center gap-2">
+      <div className="stg:flex stg:items-center stg:gap-2">
         <button
           type="submit"
           disabled={!canSubmit}
           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-hover",
-            "disabled:pointer-events-none disabled:opacity-40",
+            "stg:inline-flex stg:items-center stg:gap-1.5 stg:rounded-md stg:px-3 stg:py-1.5 stg:text-xs stg:font-medium",
+            "stg:bg-primary stg:text-primary-foreground stg:hover:bg-primary-hover",
+            "stg:disabled:pointer-events-none stg:disabled:opacity-40",
           )}
         >
           {isCreating && <SpinnerIcon />}
@@ -329,9 +329,9 @@ export function CreateOAuthAppForm({
             onClick={onCancel}
             disabled={isCreating}
             className={cn(
-              "rounded-md px-3 py-1.5 text-xs",
-              "text-muted-foreground hover:text-foreground hover:bg-accent-hover",
-              "disabled:pointer-events-none disabled:opacity-50",
+              "stg:rounded-md stg:px-3 stg:py-1.5 stg:text-xs",
+              "stg:text-muted-foreground stg:hover:text-foreground stg:hover:bg-accent-hover",
+              "stg:disabled:pointer-events-none stg:disabled:opacity-50",
             )}
           >
             Cancel
@@ -378,8 +378,8 @@ function FormField({
   required?: boolean;
 }) {
   return (
-    <div className="space-y-1">
-      <label htmlFor={id} className="text-xs font-medium text-foreground">
+    <div className="stg:space-y-1">
+      <label htmlFor={id} className="stg:text-xs stg:font-medium stg:text-foreground">
         {label}
       </label>
       <input
@@ -391,14 +391,14 @@ function FormField({
         disabled={disabled}
         required={required}
         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-1 focus-visible:ring-ring",
-          "disabled:pointer-events-none disabled:opacity-50",
+          "stg:w-full stg:rounded-md stg:border stg:border-input stg:bg-background stg:px-2.5 stg:py-1.5 stg:text-xs stg:text-foreground",
+          "stg:placeholder:text-muted-foreground",
+          "stg:focus-visible:outline-none stg:focus-visible:ring-1 stg:focus-visible:ring-ring",
+          "stg:disabled:pointer-events-none stg:disabled:opacity-50",
         )}
       />
       {hint && (
-        <p className="text-[0.65rem] text-muted-foreground">{hint}</p>
+        <p className="stg:text-[0.65rem] stg:text-muted-foreground">{hint}</p>
       )}
     </div>
   );
@@ -421,8 +421,8 @@ function ChevronIcon({ expanded }: { expanded: boolean }) {
       strokeLinejoin="round"
       aria-hidden="true"
       className={cn(
-        "shrink-0 transition-transform",
-        expanded && "rotate-90",
+        "stg:shrink-0 stg:transition-transform",
+        expanded && "stg:rotate-90",
       )}
     >
       <path d="M6 4l4 4-4 4" />
@@ -440,7 +440,7 @@ function SpinnerIcon() {
       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" />