@stigmer/react 3.6.0 → 3.7.0

package/src/models/ModelSelector.tsx

@@ -7,6 +7,7 @@ import { useStigmerPortalContainer } from "../portal-container.js";
 import { useModelRegistry } from "./useModelRegistry.js";
 import type { ModelInfo, CostTier, SpeedTier } from "./registry.js";
 import { HARNESS_META, HARNESS_OPTIONS, type HarnessOption } from "./harness.js";
+import { FAST_SERVICE_TIER, type ServiceTierOption } from "./service-tier.js";
 
 const COST_TIER_LABEL: Record<CostTier, string> = {
   economy: "$",
@@ -61,6 +62,31 @@ export interface ModelSelectorProps {
   readonly className?: string;
   /** When true, disables the selector. */
   readonly disabled?: boolean;
+  /**
+   * Trigger label shown while `value` is empty, instead of falling back
+   * to the registry's default model. Lets a form distinguish "nothing
+   * pinned — the platform default applies" from an actual selection
+   * (the schedule form's contract: an unset model inherits the
+   * surface's platform default). The harness prefix is hidden while
+   * the placeholder shows, since no engine is pinned either.
+   */
+  readonly placeholderLabel?: string;
+
+  /**
+   * Current service tier for the selected model (stigmer/stigmer#357).
+   * Defaults to "standard". Only meaningful together with
+   * {@link onServiceTierChange}.
+   */
+  readonly serviceTier?: ServiceTierOption;
+  /**
+   * Called when the user toggles the fast tier. Providing this enables the
+   * tier toggle, which renders ONLY when the selected model prices a fast
+   * variant ({@link ModelInfo.serviceTiers}) — no dead controls. Selecting
+   * a model without a fast tier while "fast" is active resets the tier to
+   * "standard" through this callback, so an unsupported combination can
+   * never be submitted.
+   */
+  readonly onServiceTierChange?: (tier: ServiceTierOption) => void;
 
   /**
    * @deprecated Use {@link onHarnessChange} instead.
@@ -104,6 +130,9 @@ export function ModelSelector({
   compact = false,
   className,
   disabled,
+  placeholderLabel,
+  serviceTier = "standard",
+  onServiceTierChange,
 }: ModelSelectorProps) {
   const portalContainer = useStigmerPortalContainer();
 
@@ -216,9 +245,19 @@ export function ModelSelector({
   const selectModel = useCallback(
     (model: ModelInfo) => {
       onValueChange(model.modelId);
+      // Fail-safe: the fast tier is per-model; carrying it onto a model
+      // that does not price it would be refused at create time (#357), so
+      // reset here instead of surfacing a dead selection.
+      if (
+        serviceTier === "fast"
+        && onServiceTierChange
+        && !model.serviceTiers.includes(FAST_SERVICE_TIER)
+      ) {
+        onServiceTierChange("standard");
+      }
       setOpen(false);
     },
-    [onValueChange],
+    [onValueChange, serviceTier, onServiceTierChange],
   );
 
   const scrollHighlightIntoView = useCallback((idx: number) => {
@@ -265,8 +304,23 @@ export function ModelSelector({
 
   const showShowAllButton = !isSearching && !showAll && featuredModels.length > 0 && featuredModels.length < models.length;
 
-  const triggerLabel = selectedModel?.displayName ?? "Select model";
-  const triggerHarness = !isHarnessLocked ? HARNESS_META[activeHarness].label : undefined;
+  // The tier toggle exists only where it applies: a consumer opted in AND
+  // the selected model prices a fast variant (recognition over recall —
+  // never a dead control on models with no tier choice).
+  const showServiceTierToggle =
+    onServiceTierChange !== undefined
+    && selectedModel !== undefined
+    && selectedModel.serviceTiers.includes(FAST_SERVICE_TIER);
+  const fastActive = serviceTier === "fast";
+
+  const usingPlaceholder = !value && placeholderLabel !== undefined;
+  const triggerLabel = usingPlaceholder
+    ? placeholderLabel
+    : (selectedModel?.displayName ?? "Select model");
+  const triggerHarness =
+    !isHarnessLocked && !usingPlaceholder
+      ? HARNESS_META[activeHarness].label
+      : undefined;
 
   return (
     <Popover.Root open={open} onOpenChange={setOpen}>
@@ -288,6 +342,16 @@ export function ModelSelector({
           <span className="shrink-0 text-border" aria-hidden>·</span>
         )}
         <span className="truncate">{triggerLabel}</span>
+        {showServiceTierToggle && fastActive && (
+          <span
+            className={cn(
+              "shrink-0 rounded-sm border border-border px-1 py-px",
+              "text-[0.6rem] font-medium uppercase tracking-wider text-muted-foreground",
+            )}
+          >
+            Fast
+          </span>
+        )}
         <ChevronIcon />
       </Popover.Trigger>
 
@@ -471,6 +535,39 @@ export function ModelSelector({
                 </button>
               )}
             </div>
+
+            {/* Service tier toggle — only for models that price a fast variant (#357) */}
+            {showServiceTierToggle && (
+              <div className="flex items-center justify-between border-t border-border px-3 py-2">
+                <div className="flex flex-col">
+                  <span className="text-xs text-foreground">Fast tier</span>
+                  <span className="text-[0.65rem] text-muted-foreground">
+                    Faster responses at higher per-token rates
+                  </span>
+                </div>
+                <button
+                  type="button"
+                  role="switch"
+                  aria-checked={fastActive}
+                  aria-label="Fast tier"
+                  className={cn(
+                    "relative h-4.5 w-8 shrink-0 rounded-full transition-colors cursor-pointer",
+                    "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+                    fastActive ? "bg-primary" : "bg-muted",
+                  )}
+                  onClick={() =>
+                    onServiceTierChange?.(fastActive ? "standard" : "fast")
+                  }
+                >
+                  <span
+                    className={cn(
+                      "absolute top-0.5 size-3.5 rounded-full bg-background shadow-sm transition-transform",
+                      fastActive ? "translate-x-4" : "translate-x-0.5",
+                    )}
+                  />
+                </button>
+              </div>
+            )}
           </Popover.Popup>
         </Popover.Positioner>
       </Popover.Portal>

package/src/models/__tests__/ModelSelector-serviceTier.test.tsx

@@ -0,0 +1,172 @@
+import { describe, it, expect, vi, afterEach, beforeAll } from "vitest";
+import { render, screen, cleanup, fireEvent } from "@testing-library/react";
+import { ModelSelector } from "../ModelSelector";
+import { ModelRegistryContext } from "../ModelRegistryContext";
+import type { ModelInfo } from "../registry";
+
+// Portal into document.body so the popover mounts under happy-dom, and shim
+// ResizeObserver for Base UI's positioner (the scheduleCreation.test.tsx
+// pattern).
+vi.mock("../../portal-container", () => ({
+  useStigmerPortalContainer: () => document.body,
+}));
+
+beforeAll(() => {
+  if (!("ResizeObserver" in globalThis)) {
+    (globalThis as unknown as { ResizeObserver: unknown }).ResizeObserver =
+      class {
+        observe() {}
+        unobserve() {}
+        disconnect() {}
+      };
+  }
+});
+
+/**
+ * Service-tier toggle gating (stigmer/stigmer#357).
+ *
+ * The toggle is capability-gated: it renders only when the consumer opted in
+ * (onServiceTierChange) AND the selected model prices a fast variant
+ * (ModelInfo.serviceTiers). Switching to a model without a fast tier resets
+ * an active fast selection — a stale tier would be refused at create time.
+ */
+
+const FAST_CAPABLE: ModelInfo = {
+  modelId: "composer-2.5",
+  provider: "cursor",
+  displayName: "Composer 2.5",
+  shortDescription: "Fast agentic model",
+  speedTier: "fastest",
+  costTier: "economy",
+  harness: "cursor",
+  featured: true,
+  serviceTiers: ["fast"],
+};
+
+const NO_FAST_TIER: ModelInfo = {
+  modelId: "claude-haiku-4-5",
+  provider: "anthropic",
+  displayName: "Haiku 4.5",
+  shortDescription: "Small fast model",
+  speedTier: "fastest",
+  costTier: "economy",
+  harness: "cursor",
+  featured: true,
+  serviceTiers: [],
+};
+
+function renderSelector(
+  props?: Partial<React.ComponentProps<typeof ModelSelector>>,
+) {
+  const onValueChange = vi.fn();
+  const onServiceTierChange = vi.fn();
+
+  const result = render(
+    <ModelRegistryContext.Provider
+      value={{
+        models: [FAST_CAPABLE, NO_FAST_TIER],
+        isLoading: false,
+        error: null,
+        refetch: vi.fn(),
+      }}
+    >
+      <ModelSelector
+        value="composer-2.5"
+        onValueChange={onValueChange}
+        harness="cursor"
+        serviceTier="standard"
+        onServiceTierChange={onServiceTierChange}
+        {...props}
+      />
+    </ModelRegistryContext.Provider>,
+  );
+
+  return { ...result, onValueChange, onServiceTierChange };
+}
+
+/**
+ * Open the popover via its trigger and wait for the portaled popup to
+ * mount (Base UI portals render asynchronously in jsdom). The search
+ * input is the popup's always-present landmark.
+ */
+async function openPopover(triggerLabel: string) {
+  fireEvent.click(screen.getByRole("button", { name: new RegExp(triggerLabel) }));
+  await screen.findByPlaceholderText("Search models…");
+}
+
+/** A model row inside the popup list (never matches the trigger). */
+function modelOption(displayName: string): HTMLElement {
+  const option = screen
+    .getAllByText(displayName)
+    .map((el) => el.closest<HTMLElement>("[data-model-option]"))
+    .find((el) => el != null);
+  if (!option) throw new Error(`No popup option for "${displayName}"`);
+  return option;
+}
+
+afterEach(cleanup);
+
+describe("ModelSelector — service tier toggle", () => {
+  it("renders the toggle for a fast-capable model", async () => {
+    renderSelector();
+    await openPopover("Composer 2.5");
+
+    const toggle = screen.getByRole("switch", { name: "Fast tier" });
+    expect(toggle.getAttribute("aria-checked")).toBe("false");
+  });
+
+  it("does not render the toggle for a model without a fast tier", async () => {
+    renderSelector({ value: "claude-haiku-4-5" });
+    await openPopover("Haiku 4.5");
+
+    expect(screen.queryByRole("switch", { name: "Fast tier" })).toBeNull();
+  });
+
+  it("does not render the toggle when the consumer did not opt in", async () => {
+    renderSelector({ onServiceTierChange: undefined });
+    await openPopover("Composer 2.5");
+
+    expect(screen.queryByRole("switch", { name: "Fast tier" })).toBeNull();
+  });
+
+  it("toggling fires onServiceTierChange with the flipped tier", async () => {
+    const { onServiceTierChange } = renderSelector();
+    await openPopover("Composer 2.5");
+
+    fireEvent.click(screen.getByRole("switch", { name: "Fast tier" }));
+    expect(onServiceTierChange).toHaveBeenCalledOnce();
+    expect(onServiceTierChange).toHaveBeenCalledWith("fast");
+  });
+
+  it("shows the Fast badge on the trigger when the fast tier is active", () => {
+    renderSelector({ serviceTier: "fast" });
+
+    expect(screen.getByText("Fast")).toBeTruthy();
+  });
+
+  it("resets an active fast tier when selecting a model without one", async () => {
+    const { onValueChange, onServiceTierChange } = renderSelector({
+      serviceTier: "fast",
+    });
+    await openPopover("Composer 2.5");
+
+    fireEvent.click(modelOption("Haiku 4.5"));
+
+    expect(onValueChange).toHaveBeenCalledOnce();
+    expect(onValueChange).toHaveBeenCalledWith("claude-haiku-4-5");
+    expect(onServiceTierChange).toHaveBeenCalledOnce();
+    expect(onServiceTierChange).toHaveBeenCalledWith("standard");
+  });
+
+  it("keeps an active fast tier when selecting another fast-capable model", async () => {
+    const { onServiceTierChange } = renderSelector({
+      serviceTier: "fast",
+      value: "claude-haiku-4-5",
+    });
+    await openPopover("Haiku 4.5");
+
+    fireEvent.click(modelOption("Composer 2.5"));
+
+    expect(onServiceTierChange).not.toHaveBeenCalled();
+  });
+});

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

@@ -73,6 +73,9 @@ const TEST_REGISTRY_JSON = {
       costTier: "standard",
       featured: false,
       pricing: { inputPricePerMillion: 3, outputPricePerMillion: 15, cacheWritePricePerMillion: 3.75, cacheReadPricePerMillion: 0.3 },
+      pricingVariants: {
+        fast: { inputPricePerMillion: 18, outputPricePerMillion: 90 },
+      },
     },
     {
       id: "ollama-local",
@@ -103,6 +106,18 @@ function createWrapper(models: readonly ModelInfo[] = TEST_MODELS) {
   };
 }
 
+describe("parseRegistryJson service tiers (#357)", () => {
+  it("surfaces pricingVariants keys as serviceTiers", () => {
+    const withVariants = TEST_MODELS.find((m) => m.modelId === "claude-4.6-sonnet");
+    expect(withVariants?.serviceTiers).toEqual(["fast"]);
+  });
+
+  it("yields an empty serviceTiers list for models without variants", () => {
+    const withoutVariants = TEST_MODELS.find((m) => m.modelId === "claude-sonnet-4.6");
+    expect(withoutVariants?.serviceTiers).toEqual([]);
+  });
+});
+
 describe("useModelRegistry", () => {
   describe("unified mode (no harness)", () => {
     it("excludes DISABLED_PROVIDERS from models", () => {

package/src/models/index.ts

@@ -11,3 +11,5 @@ export { HarnessSelector } from "./HarnessSelector.js";
 export type { HarnessSelectorProps } from "./HarnessSelector.js";
 export { DEFAULT_HARNESS, HARNESS_LABELS, HARNESS_META, HARNESS_OPTIONS, toProtoHarness, fromProtoHarness } from "./harness.js";
 export type { HarnessOption, HarnessDisplayInfo } from "./harness.js";
+export { FAST_SERVICE_TIER, toProtoServiceTier, fromProtoServiceTier } from "./service-tier.js";
+export type { ServiceTierOption } from "./service-tier.js";

package/src/models/registry.ts

@@ -89,6 +89,16 @@ export interface ModelInfo {
    * before "Show All Models" is expanded or search is used).
    */
   readonly featured: boolean;
+  /**
+   * Pricing-variant keys the registry prices for this model (e.g.
+   * `["fast"]`). A priced variant is a *selectable* service tier
+   * (stigmer/stigmer#357): the tier toggle renders only for models whose
+   * `serviceTiers` includes it. Empty for models with no variants.
+   *
+   * Distinct from {@link speedTier}, which is a static latency badge,
+   * not a selectable option.
+   */
+  readonly serviceTiers: readonly string[];
 }
 
 /**
@@ -153,6 +163,8 @@ interface RegistryJsonEntry {
     cacheWritePricePerMillion: number;
     cacheReadPricePerMillion: number;
   };
+  /** Variant-key → variant pricing block; only the key set matters here. */
+  pricingVariants?: Record<string, unknown>;
   $comment?: string;
 }
 
@@ -192,6 +204,10 @@ export function parseRegistryJson(data: unknown): ModelInfo[] {
       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()
+          : [],
     }));
 }
 

package/src/models/service-tier.ts

@@ -0,0 +1,49 @@
+import { ServiceTier } from "@stigmer/protos/ai/stigmer/agentic/agentexecution/v1/enum_pb";
+
+/**
+ * String form of the service tier for component props and hook inputs
+ * (stigmer/stigmer#357). Mirrors {@link HarnessOption}: components speak
+ * strings, execution creation speaks proto.
+ *
+ * "standard" is the model's base-priced configuration; "fast" is the
+ * provider's fast variant at the registry's fast rates — selectable only
+ * for models whose {@link ModelInfo.serviceTiers} includes "fast".
+ */
+export type ServiceTierOption = "standard" | "fast";
+
+/** The tier key a model must price for the fast toggle to render. */
+export const FAST_SERVICE_TIER = "fast";
+
+/**
+ * Convert a {@link ServiceTierOption} string to the proto enum.
+ */
+export function toProtoServiceTier(tier: ServiceTierOption): ServiceTier {
+  switch (tier) {
+    case "fast":
+      return ServiceTier.FAST;
+    case "standard":
+    default:
+      return ServiceTier.STANDARD;
+  }
+}
+
+/**
+ * Convert a proto {@link ServiceTier} enum to its string form.
+ *
+ * `UNSPECIFIED` (and any unknown value) maps to `undefined` so callers can
+ * decide their own default — matching the proto contract (`UNSPECIFIED`
+ * resolves to `SERVICE_TIER_STANDARD` in the runner, never the provider
+ * account default).
+ */
+export function fromProtoServiceTier(
+  tier: ServiceTier | undefined,
+): ServiceTierOption | undefined {
+  switch (tier) {
+    case ServiceTier.STANDARD:
+      return "standard";
+    case ServiceTier.FAST:
+      return "fast";
+    default:
+      return undefined;
+  }
+}