@stigmer/react 0.4.5 → 0.4.6

package/src/models/registry.ts

@@ -1,15 +1,15 @@
 /**
  * Model registry — UI-relevant metadata for all platform-supported LLM models.
  *
- * Reads from the unified JSON registry at backend/libs/model-registry.json,
- * which is the single source of truth for model IDs, display names, pricing,
- * and cost tiers across all harnesses and runtimes.
+ * Fetches from the public model registry API endpoint at runtime and caches
+ * the result in the {@link StigmerProvider} context. This eliminates the
+ * static JSON file that previously shipped in the npm package.
  *
- * Update it with: @update-model-registry
+ * Platform consumers (React SDK, cursor-runner, graphton) all fetch from the
+ * same endpoint, each with their own local TTL cache.
  */
 
 import type { HarnessOption } from "./harness";
-import registryData from "../../data/model-registry.json";
 
 /**
  * Pricing bracket for a model.
@@ -33,7 +33,7 @@ export type SpeedTier = "fastest" | "fast" | "balanced" | "slow";
 /**
  * LLM provider identifier. Each provider maps to a distinct inference
  * backend (or intermediary, in the case of Cursor-served third-party
- * models). The {@link MODEL_REGISTRY} uses this for grouping in the
+ * models). The model registry uses this for grouping in the
  * "Show All" expanded view.
  */
 export type Provider =
@@ -48,7 +48,7 @@ export type Provider =
 /**
  * Providers whose models should be hidden from the UI.
  *
- * The model entries themselves stay in MODEL_REGISTRY so backend
+ * The model entries themselves stay in the registry so backend
  * compatibility is preserved. The useModelRegistry hook filters
  * them out before anything reaches a component.
  *
@@ -171,26 +171,47 @@ function isModelEntry(entry: RegistryJsonEntry): entry is Required<Pick<Registry
 }
 
 /**
- * Static catalog of all platform-supported LLM models, loaded from the
- * unified JSON registry.
+ * Parse raw registry JSON (from the API or a static file) into `ModelInfo[]`.
  *
- * {@link useModelRegistry} filters out disabled providers and provides
- * lookup helpers on top of this list.
+ * Expects the shape `{ models: RegistryJsonEntry[] }`. Filters out comment
+ * entries and invalid rows, then maps to the `ModelInfo` interface.
  */
-export const MODEL_REGISTRY: readonly ModelInfo[] = (
-  registryData.models as RegistryJsonEntry[]
-)
-  .filter(isModelEntry)
-  .map((m) => ({
-    modelId: m.id,
-    provider: m.provider as Provider,
-    displayName: m.displayName,
-    shortDescription: m.shortDescription ?? "",
-    speedTier: (VALID_SPEED_TIERS.has(m.speedTier ?? "") ? m.speedTier : "fast") as SpeedTier,
-    costTier: m.costTier as CostTier,
-    harness: m.harness as HarnessOption,
-    featured: m.featured ?? false,
-  }));
+export function parseRegistryJson(data: unknown): ModelInfo[] {
+  if (!data || typeof data !== "object") return [];
+  const models = (data as Record<string, unknown>).models;
+  if (!Array.isArray(models)) return [];
+
+  return (models as RegistryJsonEntry[])
+    .filter(isModelEntry)
+    .map((m) => ({
+      modelId: m.id,
+      provider: m.provider as Provider,
+      displayName: m.displayName,
+      shortDescription: m.shortDescription ?? "",
+      speedTier: (VALID_SPEED_TIERS.has(m.speedTier ?? "") ? m.speedTier : "fast") as SpeedTier,
+      costTier: m.costTier as CostTier,
+      harness: m.harness as HarnessOption,
+      featured: m.featured ?? false,
+    }));
+}
+
+/**
+ * Fetch the model registry from the authenticated API endpoint.
+ *
+ * @param apiUrl - Base URL of the Stigmer Cloud API (e.g. `https://api.stigmer.ai`)
+ * @param token - Bearer token for authentication (from `client.getAuthCredential()`)
+ * @returns Parsed `ModelInfo[]`.
+ */
+export async function fetchModelRegistry(apiUrl: string, token: string | null): Promise<ModelInfo[]> {
+  const headers: Record<string, string> = {};
+  if (token) {
+    headers["Authorization"] = `Bearer ${token}`;
+  }
+  const res = await fetch(`${apiUrl}/v1/proxy/model-registry`, { headers });
+  if (!res.ok) throw new Error(`Model registry fetch failed: ${res.status}`);
+  const data: unknown = await res.json();
+  return parseRegistryJson(data);
+}
 
 /**
  * Model ID used when no user preference is set (native harness).
@@ -236,6 +257,7 @@ export interface DefaultModelResolution {
  */
 export function resolveDefaultModelId(
   harness: HarnessOption,
+  models: readonly ModelInfo[],
   options?: {
     userPreference?: string;
     orgDefault?: string;
@@ -243,27 +265,27 @@ export function resolveDefaultModelId(
   },
 ): DefaultModelResolution {
   if (options?.userPreference) {
-    const model = MODEL_REGISTRY.find(
+    const model = models.find(
       (m) => m.harness === harness && m.modelId === options.userPreference,
     );
     if (model) return { modelId: model.modelId, source: "user_preference" };
   }
 
   if (options?.orgDefault) {
-    const model = MODEL_REGISTRY.find(
+    const model = models.find(
       (m) => m.harness === harness && m.modelId === options.orgDefault,
     );
     if (model) return { modelId: model.modelId, source: "org_default" };
   }
 
   if (options?.agentDefault) {
-    const model = MODEL_REGISTRY.find(
+    const model = models.find(
       (m) => m.harness === harness && m.modelId === options.agentDefault,
     );
     if (model) return { modelId: model.modelId, source: "agent_default" };
   }
 
-  const featured = MODEL_REGISTRY.find(
+  const featured = models.find(
     (m) => m.harness === harness && m.featured,
   );
   if (featured) return { modelId: featured.modelId, source: "harness_default" };
@@ -271,4 +293,3 @@ export function resolveDefaultModelId(
   const fallbackId = harness === "cursor" ? DEFAULT_CURSOR_MODEL_ID : DEFAULT_MODEL_ID;
   return { modelId: fallbackId, source: "platform_fallback" };
 }
-

package/src/models/useModelRegistry.ts

@@ -2,7 +2,6 @@
 
 import { useMemo } from "react";
 import {
-  MODEL_REGISTRY,
   DEFAULT_MODEL_ID,
   DEFAULT_CURSOR_MODEL_ID,
   DISABLED_PROVIDERS,
@@ -12,6 +11,7 @@ import {
   type Provider,
 } from "./registry";
 import type { HarnessOption } from "./harness";
+import { useModelRegistryContext } from "./ModelRegistryContext";
 
 /** Options for {@link useModelRegistry}. */
 export interface UseModelRegistryOptions {
@@ -31,8 +31,8 @@ export interface UseModelRegistryReturn {
   readonly models: readonly ModelInfo[];
   /** Models grouped by provider for sectioned rendering. */
   readonly byProvider: ReadonlyMap<Provider, readonly ModelInfo[]>;
-  /** The platform default model for the current mode. */
-  readonly defaultModel: ModelInfo;
+  /** The platform default model for the current mode. `undefined` while the registry is loading. */
+  readonly defaultModel: ModelInfo | undefined;
   /**
    * Look up a single model by its `modelId`.
    *
@@ -51,6 +51,10 @@ export interface UseModelRegistryReturn {
    * Always unambiguous, even in unified mode.
    */
   readonly getByKey: (key: string) => ModelInfo | undefined;
+  /** `true` while the model registry is being fetched from the API. */
+  readonly isLoading: boolean;
+  /** Non-null if the API fetch failed. Models will be empty in this case. */
+  readonly error: Error | null;
 }
 
 /**
@@ -61,6 +65,10 @@ export interface UseModelRegistryReturn {
  * who want full control over rendering import this hook and build
  * their own UI.
  *
+ * The model data is fetched from the public model registry API by
+ * {@link StigmerProvider} and cached in context. During loading,
+ * `isLoading` is `true` and `models` is empty.
+ *
  * **Modes:**
  * - `options.harness === "cursor"` — Cursor-harness models only
  * - `options.harness === "native"` — native models, excluding disabled providers
@@ -69,7 +77,7 @@ export interface UseModelRegistryReturn {
  * @example
  * ```tsx
  * // Unified mode — flat picker with all models
- * const { featured, models, getByKey } = useModelRegistry();
+ * const { featured, models, getByKey, isLoading } = useModelRegistry();
  *
  * // Legacy single-harness mode
  * const { models, defaultModel } = useModelRegistry({ harness: "native" });
@@ -77,11 +85,12 @@ export interface UseModelRegistryReturn {
  */
 export function useModelRegistry(options?: UseModelRegistryOptions): UseModelRegistryReturn {
   const harness = options?.harness;
+  const { models: allModels, isLoading, error } = useModelRegistryContext();
 
   return useMemo(() => {
     const isUnified = harness === undefined;
     const { modelId: defaultId } = harness
-      ? resolveDefaultModelId(harness)
+      ? resolveDefaultModelId(harness, allModels)
       : { modelId: DEFAULT_MODEL_ID };
 
     const byProvider = new Map<Provider, ModelInfo[]>();
@@ -91,7 +100,7 @@ export function useModelRegistry(options?: UseModelRegistryOptions): UseModelReg
     const featuredModels: ModelInfo[] = [];
     let defaultModel: ModelInfo | undefined;
 
-    for (const model of MODEL_REGISTRY) {
+    for (const model of allModels) {
       if (isUnified) {
         if (DISABLED_PROVIDERS.has(model.provider)) continue;
       } else {
@@ -132,6 +141,8 @@ export function useModelRegistry(options?: UseModelRegistryOptions): UseModelReg
       providers,
       featured: featuredModels,
       getByKey: (key: string) => byCompoundKey.get(key),
+      isLoading,
+      error,
     };
-  }, [harness]);
+  }, [harness, allModels, isLoading, error]);
 }

package/src/provider.tsx

@@ -9,6 +9,9 @@ import { DeploymentModeContext } from "./deployment-mode";
 import type { ColorMode, ResolvedColorMode } from "./color-mode";
 import { ColorModeContext, useSystemColorMode } from "./color-mode";
 import { PortalContainerContext } from "./portal-container";
+import { ModelRegistryContext } from "./models/ModelRegistryContext";
+import type { ModelRegistryState } from "./models/ModelRegistryContext";
+import { fetchModelRegistry } from "./models/registry";
 
 /** Props for {@link StigmerProvider}. */
 export interface StigmerProviderProps {
@@ -126,25 +129,72 @@ export function StigmerProvider({
   const presetClass = preset ? resolvePresetClass(preset) : "";
 
   const portalContainer = usePortalContainer(resolvedMode, presetClass);
+  const registryState = useModelRegistryFetch(client);
 
   return (
     <StigmerContext.Provider value={client}>
       <DeploymentModeContext.Provider value={deploymentMode}>
         <ColorModeContext.Provider value={resolvedMode}>
-          <PortalContainerContext.Provider value={portalContainer}>
-            <div
-              className={cn("stgm", presetClass, className)}
-              data-stgm-color-mode={resolvedMode}
-            >
-              {children}
-            </div>
-          </PortalContainerContext.Provider>
+          <ModelRegistryContext.Provider value={registryState}>
+            <PortalContainerContext.Provider value={portalContainer}>
+              <div
+                className={cn("stgm", presetClass, className)}
+                data-stgm-color-mode={resolvedMode}
+              >
+                {children}
+              </div>
+            </PortalContainerContext.Provider>
+          </ModelRegistryContext.Provider>
         </ColorModeContext.Provider>
       </DeploymentModeContext.Provider>
     </StigmerContext.Provider>
   );
 }
 
+/**
+ * Fetches the model registry from the authenticated API on mount and
+ * caches the result for the lifetime of the provider.
+ *
+ * Uses the client's `baseUrl` and `getAuthCredential()` so the fetch
+ * is authenticated with the same token the SDK uses for all other calls.
+ */
+function useModelRegistryFetch(client: Stigmer): ModelRegistryState {
+  const [state, setState] = useState<ModelRegistryState>({
+    models: [],
+    isLoading: true,
+    error: null,
+  });
+
+  const clientRef = useRef(client);
+  clientRef.current = client;
+
+  useEffect(() => {
+    let cancelled = false;
+
+    const c = clientRef.current;
+    c.getAuthCredential()
+      .then((token) => fetchModelRegistry(c.baseUrl, token))
+      .then((models) => {
+        if (!cancelled) {
+          setState({ models, isLoading: false, error: null });
+        }
+      })
+      .catch((err: unknown) => {
+        if (!cancelled) {
+          setState({
+            models: [],
+            isLoading: false,
+            error: err instanceof Error ? err : new Error(String(err)),
+          });
+        }
+      });
+
+    return () => { cancelled = true; };
+  }, []);
+
+  return state;
+}
+
 /**
  * Creates and manages a portal container `<div>` appended to
  * `document.body` that mirrors the scoping attributes of the main

package/src/session/__tests__/useNewSessionFlow.test.tsx

@@ -1,6 +1,9 @@
 import { describe, it, expect, vi, beforeEach, afterEach } from "vitest";
 import { renderHook, act } from "@testing-library/react";
-import { DEFAULT_MODEL_ID, DEFAULT_CURSOR_MODEL_ID } from "../../models/registry";
+import type { ReactNode } from "react";
+import { DEFAULT_MODEL_ID, DEFAULT_CURSOR_MODEL_ID, parseRegistryJson } from "../../models/registry";
+import { ModelRegistryContext } from "../../models/ModelRegistryContext";
+import type { ModelRegistryState } from "../../models/ModelRegistryContext";
 import type { UseCreateSessionReturn } from "../useCreateSession";
 
 const mockCreateSession = vi.fn<UseCreateSessionReturn["create"]>();
@@ -60,6 +63,24 @@ vi.mock("../../execution/useSessionVariables", () => ({
 
 import { useNewSessionFlow } from "../useNewSessionFlow";
 
+const TEST_MODELS = parseRegistryJson({
+  models: [
+    { id: "claude-sonnet-4.6", displayName: "Claude Sonnet 4.6", shortDescription: "", speedTier: "fast", provider: "anthropic", harness: "native", costTier: "standard", featured: true, pricing: { inputPricePerMillion: 3, outputPricePerMillion: 15, cacheWritePricePerMillion: 3.75, cacheReadPricePerMillion: 0.3 } },
+    { id: "default", displayName: "Cursor Auto", shortDescription: "", speedTier: "fast", provider: "cursor", harness: "cursor", costTier: "standard", featured: true, pricing: { inputPricePerMillion: 1.25, outputPricePerMillion: 6, cacheWritePricePerMillion: 1.25, cacheReadPricePerMillion: 0.25 } },
+  ],
+});
+
+function createWrapper() {
+  const state: ModelRegistryState = { models: TEST_MODELS, isLoading: false, error: null };
+  return function Wrapper({ children }: { children: ReactNode }) {
+    return (
+      <ModelRegistryContext.Provider value={state}>
+        {children}
+      </ModelRegistryContext.Provider>
+    );
+  };
+}
+
 const STORAGE_KEY_HARNESS = "stigmer:session:harness";
 const STORAGE_KEY_MODEL_NATIVE = "stigmer:session:model";
 const STORAGE_KEY_MODEL_CURSOR = "stigmer:session:model:cursor";
@@ -91,24 +112,24 @@ describe("useNewSessionFlow", () => {
 
   describe("harness state", () => {
     it("defaults to native when localStorage is empty", () => {
-      const { result } = renderHook(() => useNewSessionFlow(defaultOptions()));
+      const { result } = renderHook(() => useNewSessionFlow(defaultOptions()), { wrapper: createWrapper() });
       expect(result.current.harness).toBe("native");
     });
 
     it("restores cursor harness from localStorage", () => {
       localStorage.setItem(STORAGE_KEY_HARNESS, "cursor");
-      const { result } = renderHook(() => useNewSessionFlow(defaultOptions()));
+      const { result } = renderHook(() => useNewSessionFlow(defaultOptions()), { wrapper: createWrapper() });
       expect(result.current.harness).toBe("cursor");
     });
 
     it("falls back to native for unknown localStorage values", () => {
       localStorage.setItem(STORAGE_KEY_HARNESS, "unknown-value");
-      const { result } = renderHook(() => useNewSessionFlow(defaultOptions()));
+      const { result } = renderHook(() => useNewSessionFlow(defaultOptions()), { wrapper: createWrapper() });
       expect(result.current.harness).toBe("native");
     });
 
     it("persists harness to localStorage on change", () => {
-      const { result } = renderHook(() => useNewSessionFlow(defaultOptions()));
+      const { result } = renderHook(() => useNewSessionFlow(defaultOptions()), { wrapper: createWrapper() });
 
       act(() => result.current.setHarness("cursor"));
 
@@ -118,7 +139,7 @@ describe("useNewSessionFlow", () => {
 
     it("persists native harness to localStorage", () => {
       localStorage.setItem(STORAGE_KEY_HARNESS, "cursor");
-      const { result } = renderHook(() => useNewSessionFlow(defaultOptions()));
+      const { result } = renderHook(() => useNewSessionFlow(defaultOptions()), { wrapper: createWrapper() });
 
       act(() => result.current.setHarness("native"));
 
@@ -128,7 +149,7 @@ describe("useNewSessionFlow", () => {
 
   describe("per-harness model persistence", () => {
     it("uses separate storage keys for native and cursor models", () => {
-      const { result } = renderHook(() => useNewSessionFlow(defaultOptions()));
+      const { result } = renderHook(() => useNewSessionFlow(defaultOptions()), { wrapper: createWrapper() });
 
       act(() => result.current.setModelId(DEFAULT_MODEL_ID));
 
@@ -140,7 +161,7 @@ describe("useNewSessionFlow", () => {
 
     it("persists cursor model to cursor-specific key", () => {
       localStorage.setItem(STORAGE_KEY_HARNESS, "cursor");
-      const { result } = renderHook(() => useNewSessionFlow(defaultOptions()));
+      const { result } = renderHook(() => useNewSessionFlow(defaultOptions()), { wrapper: createWrapper() });
 
       act(() => result.current.setModelId(DEFAULT_CURSOR_MODEL_ID));
 
@@ -152,7 +173,7 @@ describe("useNewSessionFlow", () => {
     it("restores per-harness model when switching harness", () => {
       localStorage.setItem(STORAGE_KEY_MODEL_CURSOR, DEFAULT_CURSOR_MODEL_ID);
 
-      const { result } = renderHook(() => useNewSessionFlow(defaultOptions()));
+      const { result } = renderHook(() => useNewSessionFlow(defaultOptions()), { wrapper: createWrapper() });
 
       act(() => result.current.setHarness("cursor"));
 
@@ -160,7 +181,7 @@ describe("useNewSessionFlow", () => {
     });
 
     it("clears modelId when switching to a harness with no stored model", () => {
-      const { result } = renderHook(() => useNewSessionFlow(defaultOptions()));
+      const { result } = renderHook(() => useNewSessionFlow(defaultOptions()), { wrapper: createWrapper() });
 
       act(() => result.current.setModelId(DEFAULT_MODEL_ID));
       expect(result.current.modelId).toBe(DEFAULT_MODEL_ID);
@@ -178,7 +199,7 @@ describe("useNewSessionFlow", () => {
     });
 
     it("invalidates modelId when it is not in the active harness registry", () => {
-      const { result } = renderHook(() => useNewSessionFlow(defaultOptions()));
+      const { result } = renderHook(() => useNewSessionFlow(defaultOptions()), { wrapper: createWrapper() });
 
       // Set a native-only model
       act(() => result.current.setModelId(DEFAULT_MODEL_ID));
@@ -193,7 +214,7 @@ describe("useNewSessionFlow", () => {
 
     it("strips compound keys before persisting to localStorage", () => {
       localStorage.setItem(STORAGE_KEY_HARNESS, "cursor");
-      const { result } = renderHook(() => useNewSessionFlow(defaultOptions()));
+      const { result } = renderHook(() => useNewSessionFlow(defaultOptions()), { wrapper: createWrapper() });
 
       // Simulate compound key from unified mode ModelSelector
       act(() => result.current.setModelId("cursor/default"));
@@ -207,7 +228,7 @@ describe("useNewSessionFlow", () => {
       // Legacy: compound key was stored before fix
       localStorage.setItem(STORAGE_KEY_MODEL_CURSOR, "cursor/default");
 
-      const { result } = renderHook(() => useNewSessionFlow(defaultOptions()));
+      const { result } = renderHook(() => useNewSessionFlow(defaultOptions()), { wrapper: createWrapper() });
 
       // Should extract plain modelId and validate against registry
       expect(result.current.modelId).toBe(DEFAULT_CURSOR_MODEL_ID);
@@ -217,7 +238,7 @@ describe("useNewSessionFlow", () => {
   describe("submit with harness", () => {
     it("passes harness field to createSession", async () => {
       const opts = defaultOptions();
-      const { result } = renderHook(() => useNewSessionFlow(opts));
+      const { result } = renderHook(() => useNewSessionFlow(opts), { wrapper: createWrapper() });
 
       await act(async () => {
         await result.current.submit("Hello");
@@ -230,7 +251,7 @@ describe("useNewSessionFlow", () => {
 
     it("passes cursor harness to createSession after switching", async () => {
       const opts = defaultOptions();
-      const { result } = renderHook(() => useNewSessionFlow(opts));
+      const { result } = renderHook(() => useNewSessionFlow(opts), { wrapper: createWrapper() });
 
       act(() => result.current.setHarness("cursor"));
 
@@ -244,7 +265,7 @@ describe("useNewSessionFlow", () => {
 
     it("calls onSessionCreated on success", async () => {
       const opts = defaultOptions();
-      const { result } = renderHook(() => useNewSessionFlow(opts));
+      const { result } = renderHook(() => useNewSessionFlow(opts), { wrapper: createWrapper() });
 
       await act(async () => {
         await result.current.submit("Hello");
@@ -256,7 +277,7 @@ describe("useNewSessionFlow", () => {
     it("sets submitError and calls onError on failure", async () => {
       mockCreateSession.mockRejectedValueOnce(new Error("RPC fail"));
       const opts = defaultOptions();
-      const { result } = renderHook(() => useNewSessionFlow(opts));
+      const { result } = renderHook(() => useNewSessionFlow(opts), { wrapper: createWrapper() });
 
       await act(async () => {
         await result.current.submit("Hello");
@@ -268,7 +289,7 @@ describe("useNewSessionFlow", () => {
 
     it("resets isSubmitting after completion", async () => {
       const opts = defaultOptions();
-      const { result } = renderHook(() => useNewSessionFlow(opts));
+      const { result } = renderHook(() => useNewSessionFlow(opts), { wrapper: createWrapper() });
 
       await act(async () => {
         await result.current.submit("Hello");

package/src/session/__tests__/usePersistedModel.test.tsx

@@ -1,7 +1,28 @@
 import { describe, it, expect, beforeEach, afterEach } from "vitest";
 import { renderHook, act } from "@testing-library/react";
+import type { ReactNode } from "react";
 import { usePersistedModel } from "../usePersistedModel";
-import { DEFAULT_MODEL_ID, DEFAULT_CURSOR_MODEL_ID } from "../../models/registry";
+import { DEFAULT_MODEL_ID, DEFAULT_CURSOR_MODEL_ID, parseRegistryJson } from "../../models/registry";
+import { ModelRegistryContext } from "../../models/ModelRegistryContext";
+import type { ModelRegistryState } from "../../models/ModelRegistryContext";
+
+const TEST_MODELS = parseRegistryJson({
+  models: [
+    { id: "claude-sonnet-4.6", displayName: "Claude Sonnet 4.6", shortDescription: "", speedTier: "fast", provider: "anthropic", harness: "native", costTier: "standard", featured: true, pricing: { inputPricePerMillion: 3, outputPricePerMillion: 15, cacheWritePricePerMillion: 3.75, cacheReadPricePerMillion: 0.3 } },
+    { id: "default", displayName: "Cursor Auto", shortDescription: "", speedTier: "fast", provider: "cursor", harness: "cursor", costTier: "standard", featured: true, pricing: { inputPricePerMillion: 1.25, outputPricePerMillion: 6, cacheWritePricePerMillion: 1.25, cacheReadPricePerMillion: 0.25 } },
+  ],
+});
+
+function createWrapper() {
+  const state: ModelRegistryState = { models: TEST_MODELS, isLoading: false, error: null };
+  return function Wrapper({ children }: { children: ReactNode }) {
+    return (
+      <ModelRegistryContext.Provider value={state}>
+        {children}
+      </ModelRegistryContext.Provider>
+    );
+  };
+}
 
 const STORAGE_KEY_NATIVE = "stigmer:session:model";
 const STORAGE_KEY_CURSOR = "stigmer:session:model:cursor";
@@ -17,24 +38,24 @@ describe("usePersistedModel", () => {
 
   describe("basic persistence", () => {
     it("returns undefined when localStorage is empty", () => {
-      const { result } = renderHook(() => usePersistedModel({ harness: "native" }));
+      const { result } = renderHook(() => usePersistedModel({ harness: "native" }), { wrapper: createWrapper() });
       expect(result.current[0]).toBeUndefined();
     });
 
     it("restores a valid model from localStorage", () => {
       localStorage.setItem(STORAGE_KEY_NATIVE, DEFAULT_MODEL_ID);
-      const { result } = renderHook(() => usePersistedModel({ harness: "native" }));
+      const { result } = renderHook(() => usePersistedModel({ harness: "native" }), { wrapper: createWrapper() });
       expect(result.current[0]).toBe(DEFAULT_MODEL_ID);
     });
 
     it("returns undefined for an invalid model in localStorage", () => {
       localStorage.setItem(STORAGE_KEY_NATIVE, "nonexistent-model-xyz");
-      const { result } = renderHook(() => usePersistedModel({ harness: "native" }));
+      const { result } = renderHook(() => usePersistedModel({ harness: "native" }), { wrapper: createWrapper() });
       expect(result.current[0]).toBeUndefined();
     });
 
     it("persists model on change", () => {
-      const { result } = renderHook(() => usePersistedModel({ harness: "native" }));
+      const { result } = renderHook(() => usePersistedModel({ harness: "native" }), { wrapper: createWrapper() });
 
       act(() => result.current[1](DEFAULT_MODEL_ID));
 
@@ -44,7 +65,7 @@ describe("usePersistedModel", () => {
 
     it("uses cursor-specific key for cursor harness", () => {
       localStorage.setItem(STORAGE_KEY_CURSOR, DEFAULT_CURSOR_MODEL_ID);
-      const { result } = renderHook(() => usePersistedModel({ harness: "cursor" }));
+      const { result } = renderHook(() => usePersistedModel({ harness: "cursor" }), { wrapper: createWrapper() });
       expect(result.current[0]).toBe(DEFAULT_CURSOR_MODEL_ID);
     });
   });
@@ -52,19 +73,19 @@ describe("usePersistedModel", () => {
   describe("compound key handling", () => {
     it("extracts plain modelId from compound key in localStorage", () => {
       localStorage.setItem(STORAGE_KEY_CURSOR, "cursor/default");
-      const { result } = renderHook(() => usePersistedModel({ harness: "cursor" }));
+      const { result } = renderHook(() => usePersistedModel({ harness: "cursor" }), { wrapper: createWrapper() });
       expect(result.current[0]).toBe(DEFAULT_CURSOR_MODEL_ID);
     });
 
     it("extracts plain modelId from native compound key", () => {
       localStorage.setItem(STORAGE_KEY_NATIVE, `native/${DEFAULT_MODEL_ID}`);
-      const { result } = renderHook(() => usePersistedModel({ harness: "native" }));
+      const { result } = renderHook(() => usePersistedModel({ harness: "native" }), { wrapper: createWrapper() });
       expect(result.current[0]).toBe(DEFAULT_MODEL_ID);
     });
 
     it("handles non-compound values unchanged", () => {
       localStorage.setItem(STORAGE_KEY_CURSOR, DEFAULT_CURSOR_MODEL_ID);
-      const { result } = renderHook(() => usePersistedModel({ harness: "cursor" }));
+      const { result } = renderHook(() => usePersistedModel({ harness: "cursor" }), { wrapper: createWrapper() });
       expect(result.current[0]).toBe(DEFAULT_CURSOR_MODEL_ID);
     });
   });
@@ -76,7 +97,7 @@ describe("usePersistedModel", () => {
 
       const { result, rerender } = renderHook(
         ({ harness }: { harness: "native" | "cursor" }) => usePersistedModel({ harness }),
-        { initialProps: { harness: "native" } },
+        { initialProps: { harness: "native" }, wrapper: createWrapper() },
       );
 
       expect(result.current[0]).toBe(DEFAULT_MODEL_ID);
@@ -91,7 +112,7 @@ describe("usePersistedModel", () => {
 
       const { result, rerender } = renderHook(
         ({ harness }: { harness: "native" | "cursor" }) => usePersistedModel({ harness }),
-        { initialProps: { harness: "native" } },
+        { initialProps: { harness: "native" }, wrapper: createWrapper() },
       );
 
       expect(result.current[0]).toBe(DEFAULT_MODEL_ID);
@@ -106,7 +127,7 @@ describe("usePersistedModel", () => {
 
       const { result, rerender } = renderHook(
         ({ harness }: { harness: "native" | "cursor" }) => usePersistedModel({ harness }),
-        { initialProps: { harness: "native" } },
+        { initialProps: { harness: "native" }, wrapper: createWrapper() },
       );
 
       rerender({ harness: "cursor" });