@stigmer/react 0.2.3 → 0.3.1

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

@@ -0,0 +1,209 @@
+import { describe, it, expect } from "vitest";
+import { renderHook } from "@testing-library/react";
+import { useModelRegistry } from "../useModelRegistry";
+import {
+  MODEL_REGISTRY,
+  DEFAULT_MODEL_ID,
+  DEFAULT_CURSOR_MODEL_ID,
+  DISABLED_PROVIDERS,
+  modelKey,
+} from "../registry";
+
+describe("useModelRegistry", () => {
+  describe("unified mode (no harness)", () => {
+    it("excludes DISABLED_PROVIDERS from models", () => {
+      const { result } = renderHook(() => useModelRegistry());
+      for (const model of result.current.models) {
+        expect(DISABLED_PROVIDERS.has(model.provider)).toBe(false);
+      }
+    });
+
+    it("includes models from both native and cursor harnesses", () => {
+      const { result } = renderHook(() => useModelRegistry());
+      const harnesses = new Set(result.current.models.map((m) => m.harness));
+      expect(harnesses.has("native")).toBe(true);
+      expect(harnesses.has("cursor")).toBe(true);
+    });
+
+    it("includes all non-disabled models from MODEL_REGISTRY", () => {
+      const { result } = renderHook(() => useModelRegistry());
+      const expected = MODEL_REGISTRY.filter(
+        (m) => !DISABLED_PROVIDERS.has(m.provider),
+      );
+      expect(result.current.models).toHaveLength(expected.length);
+    });
+
+    it("resolves defaultModel to DEFAULT_MODEL_ID", () => {
+      const { result } = renderHook(() => useModelRegistry());
+      expect(result.current.defaultModel.modelId).toBe(DEFAULT_MODEL_ID);
+    });
+
+    it("groups models by provider in byProvider map", () => {
+      const { result } = renderHook(() => useModelRegistry());
+      for (const [provider, models] of result.current.byProvider) {
+        for (const m of models) {
+          expect(m.provider).toBe(provider);
+        }
+      }
+    });
+
+    it("returns providers matching byProvider keys in order", () => {
+      const { result } = renderHook(() => useModelRegistry());
+      const fromMap = Array.from(result.current.byProvider.keys());
+      expect(result.current.providers).toEqual(fromMap);
+    });
+
+    it("looks up enabled models by getModel", () => {
+      const { result } = renderHook(() => useModelRegistry());
+      const model = result.current.getModel(DEFAULT_MODEL_ID);
+      expect(model).toBeDefined();
+      expect(model!.modelId).toBe(DEFAULT_MODEL_ID);
+    });
+
+    it("returns undefined for disabled provider models via getModel", () => {
+      const { result } = renderHook(() => useModelRegistry());
+      const disabledModel = MODEL_REGISTRY.find((m) =>
+        DISABLED_PROVIDERS.has(m.provider),
+      );
+      if (disabledModel) {
+        expect(result.current.getModel(disabledModel.modelId)).toBeUndefined();
+      }
+    });
+
+    it("returns undefined for unknown model IDs via getModel", () => {
+      const { result } = renderHook(() => useModelRegistry());
+      expect(result.current.getModel("nonexistent-model")).toBeUndefined();
+    });
+
+    it("returns featured models subset", () => {
+      const { result } = renderHook(() => useModelRegistry());
+      expect(result.current.featured.length).toBeGreaterThan(0);
+      for (const model of result.current.featured) {
+        expect(model.featured).toBe(true);
+      }
+    });
+
+    it("featured models are a subset of all models", () => {
+      const { result } = renderHook(() => useModelRegistry());
+      const allKeys = new Set(
+        result.current.models.map((m) => modelKey(m.harness, m.modelId)),
+      );
+      for (const model of result.current.featured) {
+        expect(allKeys.has(modelKey(model.harness, model.modelId))).toBe(true);
+      }
+    });
+
+    it("resolves models by compound key via getByKey", () => {
+      const { result } = renderHook(() => useModelRegistry());
+      const key = modelKey("native", DEFAULT_MODEL_ID);
+      const model = result.current.getByKey(key);
+      expect(model).toBeDefined();
+      expect(model!.modelId).toBe(DEFAULT_MODEL_ID);
+      expect(model!.harness).toBe("native");
+    });
+
+    it("resolves cursor models by compound key via getByKey", () => {
+      const { result } = renderHook(() => useModelRegistry());
+      const key = modelKey("cursor", DEFAULT_CURSOR_MODEL_ID);
+      const model = result.current.getByKey(key);
+      expect(model).toBeDefined();
+      expect(model!.modelId).toBe(DEFAULT_CURSOR_MODEL_ID);
+      expect(model!.harness).toBe("cursor");
+    });
+
+    it("returns undefined for unknown compound keys via getByKey", () => {
+      const { result } = renderHook(() => useModelRegistry());
+      expect(result.current.getByKey("native/nonexistent")).toBeUndefined();
+    });
+  });
+
+  describe("native harness (explicit)", () => {
+    it("shows only native-harness models", () => {
+      const { result } = renderHook(() =>
+        useModelRegistry({ harness: "native" }),
+      );
+      for (const model of result.current.models) {
+        expect(model.harness).toBe("native");
+      }
+    });
+
+    it("excludes cursor-harness models", () => {
+      const { result } = renderHook(() =>
+        useModelRegistry({ harness: "native" }),
+      );
+      const cursorModels = result.current.models.filter(
+        (m) => m.harness === "cursor",
+      );
+      expect(cursorModels).toHaveLength(0);
+    });
+
+    it("resolves defaultModel to DEFAULT_MODEL_ID", () => {
+      const { result } = renderHook(() =>
+        useModelRegistry({ harness: "native" }),
+      );
+      expect(result.current.defaultModel.modelId).toBe(DEFAULT_MODEL_ID);
+    });
+  });
+
+  describe("cursor harness", () => {
+    it("shows only cursor-harness models", () => {
+      const { result } = renderHook(() =>
+        useModelRegistry({ harness: "cursor" }),
+      );
+      for (const model of result.current.models) {
+        expect(model.harness).toBe("cursor");
+      }
+    });
+
+    it("includes cursor-harness models from multiple providers", () => {
+      const { result } = renderHook(() =>
+        useModelRegistry({ harness: "cursor" }),
+      );
+      const providers = new Set(result.current.models.map((m) => m.provider));
+      expect(providers.size).toBeGreaterThan(1);
+    });
+
+    it("includes all cursor-harness models from MODEL_REGISTRY", () => {
+      const { result } = renderHook(() =>
+        useModelRegistry({ harness: "cursor" }),
+      );
+      const cursorModels = MODEL_REGISTRY.filter(
+        (m) => m.harness === "cursor",
+      );
+      expect(result.current.models).toHaveLength(cursorModels.length);
+    });
+
+    it("resolves defaultModel to DEFAULT_CURSOR_MODEL_ID", () => {
+      const { result } = renderHook(() =>
+        useModelRegistry({ harness: "cursor" }),
+      );
+      expect(result.current.defaultModel.modelId).toBe(
+        DEFAULT_CURSOR_MODEL_ID,
+      );
+    });
+
+    it("looks up cursor models via getModel", () => {
+      const { result } = renderHook(() =>
+        useModelRegistry({ harness: "cursor" }),
+      );
+      expect(
+        result.current.getModel(DEFAULT_CURSOR_MODEL_ID),
+      ).toBeDefined();
+    });
+
+    it("cannot look up native-only models via getModel", () => {
+      const { result } = renderHook(() =>
+        useModelRegistry({ harness: "cursor" }),
+      );
+      expect(result.current.getModel(DEFAULT_MODEL_ID)).toBeUndefined();
+    });
+  });
+
+  describe("defaultModel fallback", () => {
+    it("falls back to the first enabled model when default ID is missing", () => {
+      const { result } = renderHook(() => useModelRegistry());
+      expect(result.current.defaultModel).toBeDefined();
+      expect(result.current.models).toContain(result.current.defaultModel);
+    });
+  });
+});

package/src/models/harness.ts

@@ -0,0 +1,45 @@
+import { Harness } from "@stigmer/protos/ai/stigmer/agentic/session/v1/enum_pb";
+
+/**
+ * String literal alias for the proto {@link Harness} enum.
+ *
+ * Used on component props and hook options so platform builders
+ * do not need to import proto enums to use the SDK.
+ */
+export type HarnessOption = "native" | "cursor";
+
+/** User-facing labels for each harness option. */
+export const HARNESS_LABELS: Readonly<Record<HarnessOption, string>> = {
+  native: "Stigmer",
+  cursor: "Cursor",
+};
+
+/** Platform default — resolves to the native engine. */
+export const DEFAULT_HARNESS: HarnessOption = "native";
+
+/** Convert a {@link HarnessOption} string to the proto {@link Harness} enum. */
+export function toProtoHarness(h: HarnessOption): Harness {
+  switch (h) {
+    case "cursor":
+      return Harness.CURSOR;
+    case "native":
+    default:
+      return Harness.NATIVE;
+  }
+}
+
+/**
+ * Convert a proto {@link Harness} enum to a {@link HarnessOption} string.
+ *
+ * `UNSPECIFIED` and any unknown values map to `"native"`.
+ */
+export function fromProtoHarness(h: Harness): HarnessOption {
+  switch (h) {
+    case Harness.CURSOR:
+      return "cursor";
+    case Harness.NATIVE:
+    case Harness.UNSPECIFIED:
+    default:
+      return "native";
+  }
+}

package/src/models/index.ts

@@ -1,6 +1,11 @@
-export { MODEL_REGISTRY, DEFAULT_MODEL_ID, DISABLED_PROVIDERS } from "./registry";
+export { MODEL_REGISTRY, DEFAULT_MODEL_ID, DEFAULT_CURSOR_MODEL_ID, DISABLED_PROVIDERS, modelKey, parseModelKey } from "./registry";
+export type { ParsedModelKey } from "./registry";
 export type { ModelInfo, Provider, CostTier } from "./registry";
 export { useModelRegistry } from "./useModelRegistry";
-export type { UseModelRegistryReturn } from "./useModelRegistry";
+export type { UseModelRegistryReturn, UseModelRegistryOptions } from "./useModelRegistry";
 export { ModelSelector } from "./ModelSelector";
 export type { ModelSelectorProps } from "./ModelSelector";
+export { HarnessSelector } from "./HarnessSelector";
+export type { HarnessSelectorProps } from "./HarnessSelector";
+export { DEFAULT_HARNESS, HARNESS_LABELS, toProtoHarness, fromProtoHarness } from "./harness";
+export type { HarnessOption } from "./harness";

package/src/models/registry.ts

@@ -1,15 +1,16 @@
 /**
  * Model registry — UI-relevant metadata for all platform-supported LLM models.
  *
- * Ported from the Python source of truth at
- * backend/libs/python/graphton/src/graphton/core/model_registry.py.
+ * 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.
  *
- * This is a static, hardcoded list. A future backend RPC will replace it
- * with a dynamic query; when that happens consumers will only need to
- * swap from the static constant to a fetched result — the shape stays
- * the same.
+ * Update it with: @update-model-registry
  */
 
+import type { HarnessOption } from "./harness";
+import registryData from "../../data/model-registry.json";
+
 /**
  * Pricing bracket for a model.
  *
@@ -21,10 +22,18 @@ export type CostTier = "economy" | "standard" | "premium";
 
 /**
  * LLM provider identifier. Each provider maps to a distinct inference
- * backend. The {@link MODEL_REGISTRY} groups models by provider for
- * display in {@link ModelSelector}.
+ * backend (or intermediary, in the case of Cursor-served third-party
+ * models). The {@link MODEL_REGISTRY} uses this for grouping in the
+ * "Show All" expanded view.
  */
-export type Provider = "anthropic" | "openai" | "ollama";
+export type Provider =
+  | "anthropic"
+  | "openai"
+  | "google"
+  | "xai"
+  | "cursor"
+  | "moonshot"
+  | "ollama";
 
 /**
  * Providers whose models should be hidden from the UI.
@@ -36,7 +45,6 @@ export type Provider = "anthropic" | "openai" | "ollama";
  * To re-enable a provider, simply remove it from this set.
  */
 export const DISABLED_PROVIDERS: ReadonlySet<Provider> = new Set([
-  "openai",
   "ollama",
 ]);
 
@@ -56,54 +64,118 @@ export interface ModelInfo {
   readonly modelId: string;
   /** LLM provider that serves this model. */
   readonly provider: Provider;
-  /** Human-readable name shown in the {@link ModelSelector} dropdown. */
+  /** Human-readable name shown in the model picker. */
   readonly displayName: string;
   /** Pricing bracket used for cost-tier indicators in the UI. */
   readonly costTier: CostTier;
+  /** Which execution engine serves this model. */
+  readonly harness: HarnessOption;
+  /**
+   * When `true`, appears in the curated default list (the short view
+   * before "Show All Models" is expanded or search is used).
+   */
+  readonly featured: boolean;
+}
+
+/**
+ * Per-model cost entry for programmatic access to pricing data.
+ * Re-exported for consumers that need dollar-level pricing beyond the
+ * coarse `CostTier` label.
+ */
+export interface ModelCostEntry {
+  readonly modelId: string;
+  readonly inputPricePerMillion: number;
+  readonly outputPricePerMillion: number;
+  readonly cacheWritePricePerMillion: number;
+  readonly cacheReadPricePerMillion: number;
+}
+
+/**
+ * Build a compound key that uniquely identifies a model across harnesses.
+ *
+ * The same underlying model name (e.g. `claude-4.6-sonnet`) can exist in
+ * both native and cursor harnesses. The compound key disambiguates.
+ */
+export function modelKey(harness: HarnessOption, modelId: string): string {
+  return `${harness}/${modelId}`;
+}
+
+/** Parsed result of a compound `harness/modelId` key. */
+export interface ParsedModelKey {
+  /** Harness portion of the compound key. */
+  harness: HarnessOption;
+  /** Model ID portion of the compound key. */
+  modelId: string;
 }
 
 /**
- * Static catalog of all platform-supported LLM models.
+ * Parse a compound key back into its `(harness, modelId)` parts.
+ * Returns `undefined` for malformed keys.
+ */
+export function parseModelKey(key: string): ParsedModelKey | undefined {
+  const idx = key.indexOf("/");
+  if (idx < 1) return undefined;
+  const harness = key.slice(0, idx);
+  if (harness !== "native" && harness !== "cursor") return undefined;
+  return { harness, modelId: key.slice(idx + 1) };
+}
+
+// ---------------------------------------------------------------------------
+// JSON → ModelInfo mapping
+// ---------------------------------------------------------------------------
+
+interface RegistryJsonEntry {
+  id?: string;
+  displayName?: string;
+  provider?: string;
+  harness?: string;
+  costTier?: string;
+  featured?: boolean;
+  pricing?: {
+    inputPricePerMillion: number;
+    outputPricePerMillion: number;
+    cacheWritePricePerMillion: number;
+    cacheReadPricePerMillion: number;
+  };
+  $comment?: string;
+}
+
+const VALID_COST_TIERS = new Set(["economy", "standard", "premium"]);
+const VALID_HARNESSES = new Set(["native", "cursor"]);
+
+function isModelEntry(entry: RegistryJsonEntry): entry is Required<Pick<RegistryJsonEntry, "id" | "displayName" | "provider" | "harness" | "costTier">> & RegistryJsonEntry {
+  return (
+    typeof entry.id === "string" &&
+    typeof entry.displayName === "string" &&
+    typeof entry.provider === "string" &&
+    typeof entry.harness === "string" && VALID_HARNESSES.has(entry.harness) &&
+    typeof entry.costTier === "string" && VALID_COST_TIERS.has(entry.costTier)
+  );
+}
+
+/**
+ * Static catalog of all platform-supported LLM models, loaded from the
+ * unified JSON registry.
  *
- * Each entry carries the metadata needed for model selection UI.
  * {@link useModelRegistry} filters out disabled providers and provides
  * lookup helpers on top of this list.
  */
-export const MODEL_REGISTRY: readonly ModelInfo[] = [
-  // ── Anthropic — Generation 4.6 ────────────────────────────────────
-  { modelId: "claude-opus-4.6", provider: "anthropic", displayName: "Claude Opus 4.6", costTier: "premium" },
-  { modelId: "claude-sonnet-4.6", provider: "anthropic", displayName: "Claude Sonnet 4.6", costTier: "standard" },
-
-  // ── Anthropic — Generation 4.5 ────────────────────────────────────
-  { modelId: "claude-opus-4.5", provider: "anthropic", displayName: "Claude Opus 4.5", costTier: "premium" },
-  { modelId: "claude-sonnet-4.5", provider: "anthropic", displayName: "Claude Sonnet 4.5", costTier: "standard" },
-
-  // ── Anthropic — Generation 4 ──────────────────────────────────────
-  { modelId: "claude-opus-4", provider: "anthropic", displayName: "Claude Opus 4", costTier: "premium" },
-  { modelId: "claude-haiku-4.5", provider: "anthropic", displayName: "Claude Haiku 4.5", costTier: "economy" },
-
-  // ── Anthropic — Generation 3.5 ────────────────────────────────────
-  { modelId: "claude-sonnet-3.5", provider: "anthropic", displayName: "Claude Sonnet 3.5", costTier: "standard" },
-  { modelId: "claude-haiku-3.5", provider: "anthropic", displayName: "Claude Haiku 3.5", costTier: "economy" },
-
-  // ── OpenAI ────────────────────────────────────────────────────────
-  { modelId: "gpt-4", provider: "openai", displayName: "GPT-4", costTier: "premium" },
-  { modelId: "gpt-4-turbo", provider: "openai", displayName: "GPT-4 Turbo", costTier: "standard" },
-  { modelId: "gpt-4o", provider: "openai", displayName: "GPT-4o", costTier: "standard" },
-  { modelId: "gpt-4o-mini", provider: "openai", displayName: "GPT-4o Mini", costTier: "economy" },
-  { modelId: "gpt-3.5-turbo", provider: "openai", displayName: "GPT-3.5 Turbo", costTier: "economy" },
-  { modelId: "o1", provider: "openai", displayName: "o1", costTier: "premium" },
-  { modelId: "o1-mini", provider: "openai", displayName: "o1 Mini", costTier: "standard" },
-
-  // ── Ollama (local, no cost) ───────────────────────────────────────
-  { modelId: "qwen2.5-coder:7b", provider: "ollama", displayName: "Qwen 2.5 Coder 7B", costTier: "economy" },
-  { modelId: "qwen2.5-coder:14b", provider: "ollama", displayName: "Qwen 2.5 Coder 14B", costTier: "economy" },
-  { modelId: "codellama:7b", provider: "ollama", displayName: "Code Llama 7B", costTier: "economy" },
-  { modelId: "codellama:13b", provider: "ollama", displayName: "Code Llama 13B", costTier: "economy" },
-  { modelId: "deepseek-coder-v2:16b", provider: "ollama", displayName: "DeepSeek Coder V2 16B", costTier: "economy" },
-  { modelId: "llama3.2:3b", provider: "ollama", displayName: "Llama 3.2 3B", costTier: "economy" },
-  { modelId: "mistral:7b", provider: "ollama", displayName: "Mistral 7B", costTier: "economy" },
-] as const;
-
-/** Model ID used when no user preference is set. */
+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,
+    costTier: m.costTier as CostTier,
+    harness: m.harness as HarnessOption,
+    featured: m.featured ?? false,
+  }));
+
+/** Model ID used when no user preference is set (native harness). */
 export const DEFAULT_MODEL_ID = "claude-sonnet-4.5";
+
+/** Model ID used when the Cursor harness is selected and no user preference is set. */
+export const DEFAULT_CURSOR_MODEL_ID = "default";
+

package/src/models/useModelRegistry.ts

@@ -4,23 +4,52 @@ import { useMemo } from "react";
 import {
   MODEL_REGISTRY,
   DEFAULT_MODEL_ID,
+  DEFAULT_CURSOR_MODEL_ID,
   DISABLED_PROVIDERS,
+  modelKey,
   type ModelInfo,
   type Provider,
 } from "./registry";
+import type { HarnessOption } from "./harness";
+
+/** Options for {@link useModelRegistry}. */
+export interface UseModelRegistryOptions {
+  /**
+   * Restrict to a single harness.
+   *
+   * - `"cursor"` — only Cursor-harness models, default → {@link DEFAULT_CURSOR_MODEL_ID}
+   * - `"native"` — only native-harness models, filtered by {@link DISABLED_PROVIDERS}
+   * - omitted — **unified mode**: all enabled models from both harnesses
+   */
+  readonly harness?: HarnessOption;
+}
 
 /** Return value of {@link useModelRegistry}. */
 export interface UseModelRegistryReturn {
-  /** All enabled models, filtered to exclude {@link DISABLED_PROVIDERS}. */
+  /** All enabled models for the selected mode. */
   readonly models: readonly ModelInfo[];
   /** Models grouped by provider for sectioned rendering. */
   readonly byProvider: ReadonlyMap<Provider, readonly ModelInfo[]>;
-  /** The platform default model, resolved from {@link DEFAULT_MODEL_ID}. */
+  /** The platform default model for the current mode. */
   readonly defaultModel: ModelInfo;
-  /** Look up a single model by its `modelId`. Returns `undefined` for unknown or disabled models. */
+  /**
+   * Look up a single model by its `modelId`.
+   *
+   * In unified mode the same modelId can exist under both harnesses
+   * (e.g. `claude-sonnet-4.5` on native and `claude-4.5-sonnet` on cursor).
+   * This returns the first match. Use {@link getByKey} with a compound key
+   * for an unambiguous lookup.
+   */
   readonly getModel: (modelId: string) => ModelInfo | undefined;
   /** Ordered list of enabled provider identifiers. */
   readonly providers: readonly Provider[];
+  /** Curated subset of models marked as `featured` in the registry. */
+  readonly featured: readonly ModelInfo[];
+  /**
+   * Look up a model by its compound key (`"native/claude-sonnet-4.6"`).
+   * Always unambiguous, even in unified mode.
+   */
+  readonly getByKey: (key: string) => ModelInfo | undefined;
 }
 
 /**
@@ -31,38 +60,53 @@ export interface UseModelRegistryReturn {
  * who want full control over rendering import this hook and build
  * their own UI.
  *
+ * **Modes:**
+ * - `options.harness === "cursor"` — Cursor-harness models only
+ * - `options.harness === "native"` — native models, excluding disabled providers
+ * - `options.harness` omitted — unified: both harnesses, excluding disabled providers
+ *
  * @example
  * ```tsx
- * function CustomModelPicker({ onSelect }: { onSelect: (id: string) => void }) {
- *   const { models, byProvider, defaultModel, getModel } = useModelRegistry();
+ * // Unified mode — flat picker with all models
+ * const { featured, models, getByKey } = useModelRegistry();
  *
- *   return (
- *     <select
- *       defaultValue={defaultModel.modelId}
- *       onChange={(e) => onSelect(e.target.value)}
- *     >
- *       {models.map((m) => (
- *         <option key={m.modelId} value={m.modelId}>
- *           {m.displayName} ({m.costTier})
- *         </option>
- *       ))}
- *     </select>
- *   );
- * }
+ * // Legacy single-harness mode
+ * const { models, defaultModel } = useModelRegistry({ harness: "native" });
  * ```
  */
-export function useModelRegistry(): UseModelRegistryReturn {
+export function useModelRegistry(options?: UseModelRegistryOptions): UseModelRegistryReturn {
+  const harness = options?.harness;
+
   return useMemo(() => {
+    const isCursor = harness === "cursor";
+    const isNative = harness === "native";
+    const isUnified = harness === undefined;
+    const defaultId = isCursor ? DEFAULT_CURSOR_MODEL_ID : DEFAULT_MODEL_ID;
+
     const byProvider = new Map<Provider, ModelInfo[]>();
     const byId = new Map<string, ModelInfo>();
+    const byCompoundKey = new Map<string, ModelInfo>();
     const enabledModels: ModelInfo[] = [];
+    const featuredModels: ModelInfo[] = [];
     let defaultModel: ModelInfo | undefined;
 
     for (const model of MODEL_REGISTRY) {
-      if (DISABLED_PROVIDERS.has(model.provider)) continue;
+      if (isCursor) {
+        if (model.harness !== "cursor") continue;
+      } else if (isNative) {
+        if (model.harness !== "native") continue;
+        if (DISABLED_PROVIDERS.has(model.provider)) continue;
+      } else {
+        // Unified — include both harnesses, still respect DISABLED_PROVIDERS
+        if (DISABLED_PROVIDERS.has(model.provider)) continue;
+      }
 
       enabledModels.push(model);
-      byId.set(model.modelId, model);
+      byCompoundKey.set(modelKey(model.harness, model.modelId), model);
+
+      if (!byId.has(model.modelId)) {
+        byId.set(model.modelId, model);
+      }
 
       const group = byProvider.get(model.provider);
       if (group) {
@@ -71,8 +115,12 @@ export function useModelRegistry(): UseModelRegistryReturn {
         byProvider.set(model.provider, [model]);
       }
 
-      if (model.modelId === DEFAULT_MODEL_ID) {
-        defaultModel = model;
+      if (model.modelId === defaultId) {
+        defaultModel ??= model;
+      }
+
+      if (model.featured) {
+        featuredModels.push(model);
       }
     }
 
@@ -84,6 +132,8 @@ export function useModelRegistry(): UseModelRegistryReturn {
       defaultModel: defaultModel ?? enabledModels[0],
       getModel: (modelId: string) => byId.get(modelId),
       providers,
+      featured: featuredModels,
+      getByKey: (key: string) => byCompoundKey.get(key),
     };
-  }, []);
+  }, [harness]);
 }

package/src/runner/RunnerListPanel.tsx

@@ -576,13 +576,21 @@ function ActionMenu({
 // ---------------------------------------------------------------------------
 
 function PhaseBadge({ phase }: { phase: RunnerPhase }) {
+  const starting = phase === RunnerPhase.STARTING;
   return (
     <span className="inline-flex shrink-0 items-center gap-1">
-      <span
-        className={`inline-block h-1.5 w-1.5 rounded-full ${phaseDotColor(phase)}`}
-        aria-hidden="true"
-      />
-      <span className="text-[0.65rem] text-muted-foreground">
+      {starting ? (
+        <span
+          className="inline-block h-2.5 w-2.5 animate-spin rounded-full border border-primary border-t-transparent"
+          aria-hidden="true"
+        />
+      ) : (
+        <span
+          className={`inline-block h-1.5 w-1.5 rounded-full ${phaseDotColor(phase)}`}
+          aria-hidden="true"
+        />
+      )}
+      <span className={cn("text-[0.65rem]", starting ? "text-primary" : "text-muted-foreground")}>
         {phaseLabel(phase)}
       </span>
     </span>