@stigmer/react 3.12.0 → 3.12.2

package/src/models/__tests__/useModelRegistry.test.tsx

@@ -7,6 +7,7 @@ import {
   DEFAULT_CURSOR_MODEL_ID,
   DISABLED_PROVIDERS,
   modelKey,
+  parseRegistryDocument,
   parseRegistryJson,
 } from "../registry";
 import { ModelRegistryContext } from "../ModelRegistryContext";
@@ -106,6 +107,101 @@ function createWrapper(models: readonly ModelInfo[] = TEST_MODELS) {
   };
 }
 
+describe("parseRegistryDocument vision data (#365, #386)", () => {
+  const entry = (overrides: Record<string, unknown>) => ({
+    id: "m",
+    displayName: "M",
+    provider: "anthropic",
+    harness: "native",
+    costTier: "standard",
+    pricing: { inputPricePerMillion: 1, outputPricePerMillion: 2, cacheWritePricePerMillion: 0, cacheReadPricePerMillion: 0 },
+    ...overrides,
+  });
+
+  it("parses explicit vision:false into visionCapability", () => {
+    const doc = parseRegistryDocument({
+      models: [entry({ capabilities: { toolUse: true, vision: false, streaming: true, thinking: false, adaptiveThinking: false } })],
+    });
+    expect(doc.models[0].visionCapability).toBe(false);
+  });
+
+  it("parses explicit vision:true into visionCapability", () => {
+    const doc = parseRegistryDocument({
+      models: [entry({ capabilities: { toolUse: true, vision: true, streaming: true, thinking: true, adaptiveThinking: false } })],
+    });
+    expect(doc.models[0].visionCapability).toBe(true);
+  });
+
+  it("keeps an unassessed model free of the visionCapability key (tri-state, never coerced to false)", () => {
+    const doc = parseRegistryDocument({ models: [entry({})] });
+    expect(doc.models[0].visionCapability).toBeUndefined();
+    expect("visionCapability" in doc.models[0]).toBe(false);
+  });
+
+  it("treats a malformed capabilities block as unassessed", () => {
+    const doc = parseRegistryDocument({
+      models: [entry({ capabilities: "broken" }), entry({ id: "m2", capabilities: { vision: "yes" } })],
+    });
+    expect(doc.models[0].visionCapability).toBeUndefined();
+    expect(doc.models[1].visionCapability).toBeUndefined();
+  });
+
+  it("parses the document-level limits.vision block", () => {
+    const doc = parseRegistryDocument({
+      limits: { vision: { maxImageBytes: 3145728, maxTotalBytes: 4194304, maxImages: 10 } },
+      models: [entry({})],
+    });
+    expect(doc.visionLimits).toEqual({
+      maxImageBytes: 3145728,
+      maxTotalBytes: 4194304,
+      maxImages: 10,
+    });
+  });
+
+  it("leaves visionLimits undefined for documents predating the limits block", () => {
+    const doc = parseRegistryDocument({ models: [entry({})] });
+    expect(doc.visionLimits).toBeUndefined();
+  });
+
+  it.each([
+    ["missing field", { vision: { maxImageBytes: 1, maxTotalBytes: 2 } }],
+    ["non-numeric field", { vision: { maxImageBytes: "3MB", maxTotalBytes: 2, maxImages: 1 } }],
+    ["zero cap", { vision: { maxImageBytes: 0, maxTotalBytes: 2, maxImages: 1 } }],
+    ["negative cap", { vision: { maxImageBytes: 1, maxTotalBytes: -2, maxImages: 1 } }],
+    ["vision not an object", { vision: 42 }],
+  ])("rejects a garbled limits block (%s) rather than half-parsing it", (_name, limits) => {
+    const doc = parseRegistryDocument({ limits, models: [entry({})] });
+    expect(doc.visionLimits).toBeUndefined();
+  });
+
+  it("keeps parseRegistryJson byte-compatible (models only, same rows)", () => {
+    const raw = {
+      limits: { vision: { maxImageBytes: 1, maxTotalBytes: 2, maxImages: 3 } },
+      models: [entry({})],
+    };
+    expect(parseRegistryJson(raw)).toEqual([...parseRegistryDocument(raw).models]);
+  });
+});
+
+describe("useModelRegistry visionLimits pass-through (#365)", () => {
+  it("exposes visionLimits from context", () => {
+    const limits = { maxImageBytes: 3145728, maxTotalBytes: 4194304, maxImages: 10 };
+    const state: ModelRegistryState = {
+      models: TEST_MODELS, visionLimits: limits, isLoading: false, error: null, refetch: noopRefetch,
+    };
+    const wrapper = ({ children }: { children: ReactNode }) => (
+      <ModelRegistryContext.Provider value={state}>{children}</ModelRegistryContext.Provider>
+    );
+    const { result } = renderHook(() => useModelRegistry(), { wrapper });
+    expect(result.current.visionLimits).toEqual(limits);
+  });
+
+  it("stays undefined when the context has no limits (older server)", () => {
+    const { result } = renderHook(() => useModelRegistry(), { wrapper: createWrapper() });
+    expect(result.current.visionLimits).toBeUndefined();
+  });
+});
+
 describe("parseRegistryJson service tiers (#357)", () => {
   it("surfaces pricingVariants keys as serviceTiers", () => {
     const withVariants = TEST_MODELS.find((m) => m.modelId === "claude-4.6-sonnet");
@@ -246,13 +342,12 @@ describe("useModelRegistry", () => {
       expect(cursorModels).toHaveLength(0);
     });
 
-    it("resolves defaultModel to the first featured native model", () => {
+    it("resolves defaultModel to the featured standard-cost native model (what an unpinned execution runs, #663)", () => {
       const { result } = renderHook(() =>
         useModelRegistry({ harness: "native" }),
       { wrapper: createWrapper() });
-      const featured = result.current.featured;
-      expect(featured.length).toBeGreaterThan(0);
-      expect(result.current.defaultModel!.modelId).toBe(featured[0].modelId);
+      expect(result.current.defaultModel!.modelId).toBe("claude-sonnet-4.6");
+      expect(result.current.defaultModel!.costTier).toBe("standard");
     });
   });
 

package/src/models/index.ts

@@ -1,6 +1,6 @@
-export { DEFAULT_MODEL_ID, DEFAULT_CURSOR_MODEL_ID, DISABLED_PROVIDERS, modelKey, parseModelKey, resolveDefaultModelId, fetchModelRegistry, parseRegistryJson } from "./registry.js";
+export { DEFAULT_MODEL_ID, DEFAULT_CURSOR_MODEL_ID, DISABLED_PROVIDERS, modelKey, parseModelKey, resolveDefaultModelId, fetchModelRegistry, fetchModelRegistryDocument, parseRegistryJson, parseRegistryDocument } from "./registry.js";
 export type { ParsedModelKey, DefaultModelResolution, DefaultModelSource } from "./registry.js";
-export type { ModelInfo, Provider, CostTier, SpeedTier } from "./registry.js";
+export type { ModelInfo, ModelRegistryDocument, Provider, CostTier, SpeedTier, VisionLimits } from "./registry.js";
 export { useModelRegistry } from "./useModelRegistry.js";
 export type { UseModelRegistryReturn, UseModelRegistryOptions } from "./useModelRegistry.js";
 export { ModelRegistryContext, useModelRegistryContext } from "./ModelRegistryContext.js";

package/src/models/registry.ts

@@ -5,7 +5,7 @@
  * the result in the {@link StigmerProvider} context. This eliminates the
  * static JSON file that previously shipped in the npm package.
  *
- * Platform consumers (React SDK, cursor-runner, graphton) all fetch from the
+ * Platform consumers (React SDK, the runner) all fetch from the
  * same endpoint, each with their own local TTL cache.
  */
 
@@ -100,6 +100,52 @@ export interface ModelInfo {
    * not a selectable option.
    */
   readonly serviceTiers: readonly string[];
+  /**
+   * Tri-state vision capability from the registry's `capabilities` block
+   * (stigmer/stigmer#386). The registry serializes `capabilities` only for
+   * models whose capabilities were actually assessed, so:
+   *
+   * - `true` — images sent with a turn reach the model
+   * - `false` — explicitly assessed as blind; warn at selection/send time
+   * - `undefined` — never assessed; **stay silent, never treat as false**
+   *
+   * Mirrors the runner's `parseVisionCapability` convention
+   * (backend/services/runner/src/shared/model-registry.ts) — both sides
+   * parse the same document and must agree on what absence means.
+   */
+  readonly visionCapability?: boolean;
+}
+
+/**
+ * Document-level vision byte budget advertised by the registry
+ * (stigmer/stigmer#365) — the runner's inline-image delivery caps, exposed
+ * so clients can warn *before* an upload the runner would degrade to
+ * "not viewable inline". Field names match the runner's `VisionBudget`
+ * options verbatim (backend/services/runner/src/shared/attachment-vision.ts).
+ *
+ * ADVERTISED == ENFORCED: the serving side (cloud
+ * `ModelRegistryDocumentCodec`) and the runner pin the same literal values
+ * in their test suites. Treat an absent block as unassessed — no warnings —
+ * exactly like the per-model `capabilities` tri-state.
+ */
+export interface VisionLimits {
+  /** Per-image raw byte cap for inline vision delivery. */
+  readonly maxImageBytes: number;
+  /** Per-turn total byte cap across all inline images. */
+  readonly maxTotalBytes: number;
+  /** Per-turn inline image count cap. */
+  readonly maxImages: number;
+}
+
+/**
+ * Parsed model-registry document: the per-model list plus document-level
+ * platform metadata. `visionLimits` is `undefined` when the served document
+ * predates the `limits` block (older servers) — consumers must stay silent
+ * rather than assume a budget.
+ */
+export interface ModelRegistryDocument {
+  readonly models: readonly ModelInfo[];
+  readonly visionLimits?: VisionLimits;
 }
 
 /**
@@ -166,9 +212,46 @@ interface RegistryJsonEntry {
   };
   /** Variant-key → variant pricing block; only the key set matters here. */
   pricingVariants?: Record<string, unknown>;
+  /** Capability flags; present only for capability-assessed models. */
+  capabilities?: unknown;
   $comment?: string;
 }
 
+/**
+ * Extract `capabilities.vision` preserving the tri-state: a missing or
+ * malformed `capabilities` block stays `undefined` (never coerced to
+ * false). Byte-for-byte the runner's convention — see
+ * `parseVisionCapability` in the runner's `shared/model-registry.ts`.
+ */
+function parseVisionCapability(capabilities: unknown): boolean | undefined {
+  if (!capabilities || typeof capabilities !== "object") return undefined;
+  const vision = (capabilities as Record<string, unknown>).vision;
+  return typeof vision === "boolean" ? vision : undefined;
+}
+
+/**
+ * Parse the document-level `limits.vision` block. Returns `undefined` for
+ * documents that predate the block or carry a malformed one — absence
+ * means "unassessed", and a partial block must not masquerade as a budget
+ * (warning against a garbled cap is worse than staying silent).
+ */
+function parseVisionLimits(data: Record<string, unknown>): VisionLimits | undefined {
+  const limits = data.limits;
+  if (!limits || typeof limits !== "object") return undefined;
+  const vision = (limits as Record<string, unknown>).vision;
+  if (!vision || typeof vision !== "object") return undefined;
+
+  const { maxImageBytes, maxTotalBytes, maxImages } = vision as Record<string, unknown>;
+  if (
+    typeof maxImageBytes !== "number" || maxImageBytes <= 0 ||
+    typeof maxTotalBytes !== "number" || maxTotalBytes <= 0 ||
+    typeof maxImages !== "number" || maxImages <= 0
+  ) {
+    return undefined;
+  }
+  return { maxImageBytes, maxTotalBytes, maxImages };
+}
+
 const VALID_COST_TIERS = new Set(["economy", "standard", "premium"]);
 const VALID_SPEED_TIERS = new Set(["fastest", "fast", "balanced", "slow"]);
 const VALID_HARNESSES = new Set(["native", "cursor", "copilot", "claude_code", "codex", "devin"]);
@@ -184,49 +267,76 @@ function isModelEntry(entry: RegistryJsonEntry): entry is Required<Pick<Registry
 }
 
 /**
- * Parse raw registry JSON (from the API or a static file) into `ModelInfo[]`.
+ * Parse a raw registry document (from the API or a static file) into the
+ * per-model list plus document-level metadata.
  *
- * Expects the shape `{ models: RegistryJsonEntry[] }`. Filters out comment
- * entries and invalid rows, then maps to the `ModelInfo` interface.
+ * Expects the shape `{ models: RegistryJsonEntry[], limits?: {...} }`.
+ * Filters out comment entries and invalid rows. Unknown top-level fields
+ * are ignored (the document contract is additive).
  */
-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 [];
+export function parseRegistryDocument(data: unknown): ModelRegistryDocument {
+  if (!data || typeof data !== "object") return { models: [] };
+  const root = data as Record<string, unknown>;
+  const models = root.models;
+  if (!Array.isArray(models)) return { models: [] };
 
-  return (models as RegistryJsonEntry[])
+  const parsed = (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,
-      serviceTiers:
-        m.pricingVariants && typeof m.pricingVariants === "object"
-          ? Object.keys(m.pricingVariants).sort()
-          : [],
-    }));
+    .map((m) => {
+      const visionCapability = parseVisionCapability(m.capabilities);
+      return {
+        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,
+        serviceTiers:
+          m.pricingVariants && typeof m.pricingVariants === "object"
+            ? Object.keys(m.pricingVariants).sort()
+            : [],
+        // Conditional spread keeps unassessed models free of the key
+        // (tri-state absence, not an explicit undefined).
+        ...(visionCapability !== undefined ? { visionCapability } : {}),
+      };
+    });
+
+  const visionLimits = parseVisionLimits(root);
+  return {
+    models: parsed,
+    ...(visionLimits !== undefined ? { visionLimits } : {}),
+  };
 }
 
 /**
- * Fetch the model registry from the authenticated API endpoint.
+ * Parse raw registry JSON into `ModelInfo[]`.
+ *
+ * Thin compatibility wrapper over {@link parseRegistryDocument} — prefer
+ * the document parser when the caller also needs document-level metadata
+ * such as {@link VisionLimits}.
+ */
+export function parseRegistryJson(data: unknown): ModelInfo[] {
+  return [...parseRegistryDocument(data).models];
+}
+
+/**
+ * Fetch the model-registry document 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()`)
  * @param customFetch - Optional custom `fetch` implementation. Required in
  *   Tauri where the global `fetch` is restricted by webview CSP/CORS policies.
  *   When omitted, the global `fetch` is used.
- * @returns Parsed `ModelInfo[]`.
+ * @returns Parsed {@link ModelRegistryDocument} — models plus document-level
+ *   metadata like {@link VisionLimits}.
  */
-export async function fetchModelRegistry(
+export async function fetchModelRegistryDocument(
   apiUrl: string,
   token: string | null,
   customFetch?: typeof globalThis.fetch,
-): Promise<ModelInfo[]> {
+): Promise<ModelRegistryDocument> {
   const doFetch = customFetch ?? globalThis.fetch;
   const headers: Record<string, string> = {};
   if (token) {
@@ -235,7 +345,25 @@ export async function fetchModelRegistry(
   const res = await doFetch(`${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);
+  return parseRegistryDocument(data);
+}
+
+/**
+ * Fetch the model registry from the authenticated API endpoint.
+ *
+ * Thin compatibility wrapper over {@link fetchModelRegistryDocument} —
+ * prefer the document fetch when the caller also needs document-level
+ * metadata such as {@link VisionLimits}.
+ *
+ * @returns Parsed `ModelInfo[]`.
+ */
+export async function fetchModelRegistry(
+  apiUrl: string,
+  token: string | null,
+  customFetch?: typeof globalThis.fetch,
+): Promise<ModelInfo[]> {
+  const document = await fetchModelRegistryDocument(apiUrl, token, customFetch);
+  return [...document.models];
 }
 
 /**
@@ -274,11 +402,28 @@ export interface DefaultModelResolution {
  *
  * Priority (Phase 1 — no backend):
  * 1. localStorage user preference (passed in as `userPreference`)
- * 2. First featured model for the harness from the registry
+ * 2. What the platform actually runs when nothing is pinned (see below)
  * 3. Hardcoded platform fallback
  *
  * Future phases will add org-level and agent-level defaults between
  * user preference and harness default.
+ *
+ * **The harness-default arm is a contract, not a suggestion**
+ * (stigmer/stigmer#663): this resolution feeds the composer's model pill,
+ * and the submission adopts what the pill displays — so the default MUST
+ * be the model the platform would run for an unpinned execution, or the
+ * pill promises one model while a different one serves the request.
+ * Concretely:
+ *
+ * - `cursor` — the registry's Auto entry ({@link DEFAULT_CURSOR_MODEL_ID}):
+ *   the runner coerces an empty `model_name` to `"default"` (Auto), so
+ *   suggesting Auto and sending it explicitly are byte-identical to the
+ *   pre-#663 empty send. Auto prices no fast variant, so the fast-tier
+ *   switch correctly never renders for a fresh composer.
+ * - `native` — the runner's own `getDefaultModel()` rule: featured AND
+ *   standard cost, then any standard-cost model. A first-featured pick
+ *   with no cost filter (the pre-#663 behavior) could suggest — and now
+ *   would run — a premium model for users who never opened the picker.
  */
 export function resolveDefaultModelId(
   harness: HarnessOption,
@@ -310,6 +455,28 @@ export function resolveDefaultModelId(
     if (model) return { modelId: model.modelId, source: "agent_default" };
   }
 
+  if (harness === "cursor") {
+    const auto = models.find(
+      (m) => m.harness === harness && m.modelId === DEFAULT_CURSOR_MODEL_ID,
+    );
+    if (auto) return { modelId: auto.modelId, source: "harness_default" };
+  } else {
+    // Mirrors the runner's unpinned resolution (featured+standard, then
+    // any standard). Deliberately NOT extracted to share with the runner:
+    // the runner reads its own registry snapshot on another process.
+    const standardDefault =
+      models.find(
+        (m) => m.harness === harness && m.featured && m.costTier === "standard",
+      )
+      ?? models.find((m) => m.harness === harness && m.costTier === "standard");
+    if (standardDefault) {
+      return { modelId: standardDefault.modelId, source: "harness_default" };
+    }
+  }
+
+  // Degenerate registries only (no Auto entry / no standard-cost model):
+  // fall back to the old first-featured pick before the hardcoded id, so
+  // the suggestion at least names a model that exists.
   const featured = models.find(
     (m) => m.harness === harness && m.featured,
   );

package/src/models/useModelRegistry.ts

@@ -9,6 +9,7 @@ import {
   modelKey,
   type ModelInfo,
   type Provider,
+  type VisionLimits,
 } from "./registry.js";
 import type { HarnessOption } from "./harness.js";
 import { useModelRegistryContext } from "./ModelRegistryContext.js";
@@ -51,6 +52,12 @@ export interface UseModelRegistryReturn {
    * Always unambiguous, even in unified mode.
    */
   readonly getByKey: (key: string) => ModelInfo | undefined;
+  /**
+   * Document-level vision byte budget advertised by the registry
+   * (stigmer/stigmer#365). `undefined` while loading or when the server
+   * predates the `limits` block — treat as unassessed and stay silent.
+   */
+  readonly visionLimits: VisionLimits | 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. */
@@ -87,7 +94,7 @@ export interface UseModelRegistryReturn {
  */
 export function useModelRegistry(options?: UseModelRegistryOptions): UseModelRegistryReturn {
   const harness = options?.harness;
-  const { models: allModels, isLoading, error, refetch } = useModelRegistryContext();
+  const { models: allModels, visionLimits, isLoading, error, refetch } = useModelRegistryContext();
 
   return useMemo(() => {
     const isUnified = harness === undefined;
@@ -143,9 +150,10 @@ export function useModelRegistry(options?: UseModelRegistryOptions): UseModelReg
       providers,
       featured: featuredModels,
       getByKey: (key: string) => byCompoundKey.get(key),
+      visionLimits,
       isLoading,
       error,
       refetch,
     };
-  }, [harness, allModels, isLoading, error, refetch]);
+  }, [harness, allModels, visionLimits, isLoading, error, refetch]);
 }

package/src/oauth-app/CreateOAuthAppForm.tsx

@@ -1,11 +1,12 @@
 "use client";
 
-import { useCallback, useState, type FormEvent } from "react";
+import { type FormEvent, useCallback, useId, useState } from "react";
 import { cn } from "@stigmer/theme";
 import { getUserMessage } from "@stigmer/sdk";
 import type { OAuthApp } from "@stigmer/protos/ai/stigmer/iam/oauthapp/v1/api_pb";
 import { VendorApprovalStatus } from "@stigmer/protos/ai/stigmer/iam/oauthapp/v1/spec_pb";
 import { useCreateOAuthApp } from "./useCreateOAuthApp.js";
+import { SpinnerIcon } from "../internal/SpinnerIcon.js";
 
 // ---------------------------------------------------------------------------
 // Public API
@@ -56,6 +57,7 @@ export function CreateOAuthAppForm({
   onCancel,
   className,
 }: CreateOAuthAppFormProps) {
+  const baseId = useId();
   const { create, isCreating, error, clearError } = useCreateOAuthApp();
 
   const [name, setName] = useState("");
@@ -151,7 +153,7 @@ export function CreateOAuthAppForm({
     <form onSubmit={handleSubmit} className={cn("stg:space-y-3", className)}>
       <div className="stg:space-y-3">
         <FormField
-          id="stgm-oauth-name"
+          id={`${baseId}-name`}
           label="Name"
           value={name}
           onChange={setName}
@@ -161,7 +163,7 @@ export function CreateOAuthAppForm({
         />
 
         <FormField
-          id="stgm-oauth-provider"
+          id={`${baseId}-provider`}
           label="Provider"
           value={provider}
           onChange={setProvider}
@@ -172,7 +174,7 @@ export function CreateOAuthAppForm({
         />
 
         <FormField
-          id="stgm-oauth-client-id"
+          id={`${baseId}-client-id`}
           label="Client ID"
           value={clientId}
           onChange={setClientId}
@@ -182,7 +184,7 @@ export function CreateOAuthAppForm({
         />
 
         <FormField
-          id="stgm-oauth-client-secret"
+          id={`${baseId}-client-secret`}
           label="Client secret"
           value={clientSecret}
           onChange={setClientSecret}
@@ -193,7 +195,7 @@ export function CreateOAuthAppForm({
         />
 
         <FormField
-          id="stgm-oauth-auth-url"
+          id={`${baseId}-auth-url`}
           label="Authorization URL"
           value={authorizationUrl}
           onChange={setAuthorizationUrl}
@@ -204,7 +206,7 @@ export function CreateOAuthAppForm({
         />
 
         <FormField
-          id="stgm-oauth-token-url"
+          id={`${baseId}-token-url`}
           label="Token URL"
           value={tokenUrl}
           onChange={setTokenUrl}
@@ -228,7 +230,7 @@ export function CreateOAuthAppForm({
           {showAdvanced && (
             <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"
+                id={`${baseId}-scopes`}
                 label="Scopes"
                 value={scopes}
                 onChange={setScopes}
@@ -238,7 +240,7 @@ export function CreateOAuthAppForm({
               />
 
               <FormField
-                id="stgm-oauth-userinfo-url"
+                id={`${baseId}-userinfo-url`}
                 label="Userinfo URL"
                 value={userinfoUrl}
                 onChange={setUserinfoUrl}
@@ -248,7 +250,7 @@ export function CreateOAuthAppForm({
               />
 
               <FormField
-                id="stgm-oauth-scope-param"
+                id={`${baseId}-scope-param`}
                 label="Scope parameter name"
                 value={scopeParameterName}
                 onChange={setScopeParameterName}
@@ -259,13 +261,13 @@ export function CreateOAuthAppForm({
 
               <div className="stg:space-y-1">
                 <label
-                  htmlFor="stgm-oauth-approval-status"
+                  htmlFor={`${baseId}-approval-status`}
                   className="stg:text-xs stg:font-medium stg:text-foreground"
                 >
                   Vendor approval status
                 </label>
                 <select
-                  id="stgm-oauth-approval-status"
+                  id={`${baseId}-approval-status`}
                   value={vendorApprovalStatus}
                   onChange={(e) =>
                     setVendorApprovalStatus(
@@ -290,7 +292,7 @@ export function CreateOAuthAppForm({
               </div>
 
               <FormField
-                id="stgm-oauth-approval-docs"
+                id={`${baseId}-approval-docs`}
                 label="Vendor approval docs URL"
                 value={vendorApprovalDocsUrl}
                 onChange={setVendorApprovalDocsUrl}
@@ -319,7 +321,7 @@ export function CreateOAuthAppForm({
             "stg:disabled:pointer-events-none stg:disabled:opacity-40",
           )}
         >
-          {isCreating && <SpinnerIcon />}
+          {isCreating && <SpinnerIcon size={12} />}
           Create OAuth app
         </button>
 
@@ -430,20 +432,3 @@ function ChevronIcon({ expanded }: { expanded: boolean }) {
   );
 }
 
-function SpinnerIcon() {
-  return (
-    <svg
-      width="12"
-      height="12"
-      viewBox="0 0 16 16"
-      fill="none"
-      stroke="currentColor"
-      strokeWidth="2"
-      strokeLinecap="round"
-      className="stg:animate-spin"
-      aria-hidden="true"
-    >
-      <path d="M8 2a6 6 0 1 0 6 6" />
-    </svg>
-  );
-}