@stigmer/react 3.10.0 → 3.11.1-dev.20260812192248

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/mcp-server/useMcpServerSetup.ts

@@ -5,6 +5,7 @@ import type { EnvVarInput, McpServerUsageInput, ResourceRef } from "@stigmer/sdk
 import { create } from "@bufbuild/protobuf";
 import type { McpServer } from "@stigmer/protos/ai/stigmer/agentic/mcpserver/v1/api_pb";
 import { GetOAuthGrantStatusInputSchema } from "@stigmer/protos/ai/stigmer/agentic/mcpserver/v1/io_pb";
+import type { OAuthConnectionHealth } from "@stigmer/protos/ai/stigmer/agentic/mcpserver/v1/io_pb";
 import type { DiscoveredTool } from "@stigmer/protos/ai/stigmer/agentic/mcpserver/v1/status_pb";
 import { ApiResourceKind } from "@stigmer/protos/ai/stigmer/commons/apiresource/apiresourcekind/api_resource_kind_pb";
 import { useStigmer } from "../hooks.js";
@@ -287,6 +288,11 @@ export function useMcpServerSetup(
           Object.keys(personalEnv.environment?.spec?.data ?? {}),
         );
 
+        // Carried onto the entry so consumers can tell a healthy grant
+        // that merely lacks tool discovery (offer bare discovery,
+        // stigmer/stigmer#418) apart from an expired one (offer re-auth).
+        let oauthConnectionHealth: OAuthConnectionHealth | undefined;
+
         const auth = mcpServer.spec?.auth;
         if (auth?.targetEnvVar && mcpServer.metadata?.id) {
           try {
@@ -296,6 +302,7 @@ export function useMcpServerSetup(
                 org,
               }),
             );
+            oauthConnectionHealth = grantStatus.connectionHealth;
             if (grantStatus.connected) {
               existingKeys.add(auth.targetEnvVar);
             }
@@ -319,6 +326,7 @@ export function useMcpServerSetup(
               mcpServer,
               discoveredTools,
             ),
+            oauthConnectionHealth,
           });
           return;
         }
@@ -330,6 +338,7 @@ export function useMcpServerSetup(
           missingVariables: requiredMissing,
           discoveredTools,
           toolApprovals,
+          oauthConnectionHealth,
         });
       } catch (err) {
         dispatch({ type: "SET_ERROR", key, error: toError(err) });

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 =