@stigmer/react 0.4.4 → 0.4.6

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" });

package/src/usage/OrgUsagePanel.tsx

@@ -239,19 +239,19 @@ function SummaryCards({
 
       {/* Secondary row */}
       <div className="grid grid-cols-3 gap-3">
-        <div className="rounded-lg border border-border-muted bg-card/50 px-3.5 py-2.5">
+        <div className="rounded-lg border border-border-muted bg-muted-subtle px-3.5 py-2.5">
           <div className="text-sm font-semibold tabular-nums text-foreground">
             {formatCompactNumber(report.totalExecutions)}
           </div>
           <div className="text-[0.65rem] text-muted-foreground">Executions</div>
         </div>
-        <div className="rounded-lg border border-border-muted bg-card/50 px-3.5 py-2.5">
+        <div className="rounded-lg border border-border-muted bg-muted-subtle px-3.5 py-2.5">
           <div className="text-sm font-semibold tabular-nums text-foreground">
             {formatCompactNumber(report.totalAgents)}
           </div>
           <div className="text-[0.65rem] text-muted-foreground">Agents</div>
         </div>
-        <div className="rounded-lg border border-border-muted bg-card/50 px-3.5 py-2.5">
+        <div className="rounded-lg border border-border-muted bg-muted-subtle px-3.5 py-2.5">
           <div className="text-sm font-semibold tabular-nums text-foreground">
             {formatCompactNumber(report.totalSessions)}
           </div>