@stigmer/react 3.12.1 → 3.12.2

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

package/src/oauth-app/OAuthAppDetailPanel.tsx

@@ -1,6 +1,6 @@
 "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";
@@ -8,6 +8,7 @@ import { VendorApprovalStatus } from "@stigmer/protos/ai/stigmer/iam/oauthapp/v1
 import { timestampDate, type Timestamp } from "@bufbuild/protobuf/wkt";
 import { useUpdateOAuthApp } from "./useUpdateOAuthApp.js";
 import { useDeleteOAuthApp } from "./useDeleteOAuthApp.js";
+import { SpinnerIcon } from "../internal/SpinnerIcon.js";
 
 // ---------------------------------------------------------------------------
 // Public API
@@ -61,6 +62,7 @@ export function OAuthAppDetailPanel({
   onBack,
   className,
 }: OAuthAppDetailPanelProps) {
+  const baseId = useId();
   const spec = oauthApp.spec;
   const meta = oauthApp.metadata;
 
@@ -265,7 +267,7 @@ export function OAuthAppDetailPanel({
                 "stg:disabled:pointer-events-none stg:disabled:opacity-40",
               )}
             >
-              {isDeleting && <SpinnerIcon />}
+              {isDeleting && <SpinnerIcon size={12} />}
               Delete permanently
             </button>
             <button
@@ -297,7 +299,7 @@ export function OAuthAppDetailPanel({
       ) : (
         <form onSubmit={handleSave} className="stg:space-y-3">
           <FieldInput
-            id="stgm-oauth-edit-provider"
+            id={`${baseId}-provider`}
             label="Provider"
             value={provider}
             onChange={setProvider}
@@ -306,7 +308,7 @@ export function OAuthAppDetailPanel({
             required
           />
           <FieldInput
-            id="stgm-oauth-edit-client-id"
+            id={`${baseId}-client-id`}
             label="Client ID"
             value={clientId}
             onChange={setClientId}
@@ -315,7 +317,7 @@ export function OAuthAppDetailPanel({
             required
           />
           <FieldInput
-            id="stgm-oauth-edit-client-secret"
+            id={`${baseId}-client-secret`}
             label="Client secret"
             value={clientSecret}
             onChange={setClientSecret}
@@ -325,7 +327,7 @@ export function OAuthAppDetailPanel({
             disabled={isUpdating}
           />
           <FieldInput
-            id="stgm-oauth-edit-auth-url"
+            id={`${baseId}-auth-url`}
             label="Authorization URL"
             value={authorizationUrl}
             onChange={setAuthorizationUrl}
@@ -334,7 +336,7 @@ export function OAuthAppDetailPanel({
             required
           />
           <FieldInput
-            id="stgm-oauth-edit-token-url"
+            id={`${baseId}-token-url`}
             label="Token URL"
             value={tokenUrl}
             onChange={setTokenUrl}
@@ -343,7 +345,7 @@ export function OAuthAppDetailPanel({
             required
           />
           <FieldInput
-            id="stgm-oauth-edit-scopes"
+            id={`${baseId}-scopes`}
             label="Scopes"
             value={scopes}
             onChange={setScopes}
@@ -352,7 +354,7 @@ export function OAuthAppDetailPanel({
             disabled={isUpdating}
           />
           <FieldInput
-            id="stgm-oauth-edit-userinfo-url"
+            id={`${baseId}-userinfo-url`}
             label="Userinfo URL"
             value={userinfoUrl}
             onChange={setUserinfoUrl}
@@ -361,7 +363,7 @@ export function OAuthAppDetailPanel({
             disabled={isUpdating}
           />
           <FieldInput
-            id="stgm-oauth-edit-scope-param"
+            id={`${baseId}-scope-param`}
             label="Scope parameter name"
             value={scopeParameterName}
             onChange={setScopeParameterName}
@@ -372,13 +374,13 @@ export function OAuthAppDetailPanel({
 
           <div className="stg:space-y-1">
             <label
-              htmlFor="stgm-oauth-edit-approval-status"
+              htmlFor={`${baseId}-approval-status`}
               className="stg:text-xs stg:font-medium stg:text-foreground"
             >
               Vendor approval status
             </label>
             <select
-              id="stgm-oauth-edit-approval-status"
+              id={`${baseId}-approval-status`}
               value={vendorApprovalStatus}
               onChange={(e) =>
                 setVendorApprovalStatus(
@@ -400,7 +402,7 @@ export function OAuthAppDetailPanel({
           </div>
 
           <FieldInput
-            id="stgm-oauth-edit-approval-docs"
+            id={`${baseId}-approval-docs`}
             label="Vendor approval docs URL"
             value={vendorApprovalDocsUrl}
             onChange={setVendorApprovalDocsUrl}
@@ -425,7 +427,7 @@ export function OAuthAppDetailPanel({
                 "stg:disabled:pointer-events-none stg:disabled:opacity-40",
               )}
             >
-              {isUpdating && <SpinnerIcon />}
+              {isUpdating && <SpinnerIcon size={12} />}
               Save changes
             </button>
             <button
@@ -652,20 +654,3 @@ function ArrowLeftIcon() {
   );
 }
 
-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>
-  );
-}