@stigmer/react 3.5.3 → 3.7.0

package/src/composer/__tests__/SessionComposer-serviceTier.test.tsx

@@ -0,0 +1,156 @@
+import { describe, it, expect, vi, afterEach, beforeAll } from "vitest";
+import { render, screen, cleanup, fireEvent, waitFor } from "@testing-library/react";
+import { type ReactNode } from "react";
+import type { Stigmer } from "@stigmer/sdk";
+import { StigmerContext } from "../../context";
+import { ModelRegistryContext } from "../../models/ModelRegistryContext";
+import type { ModelInfo } from "../../models/registry";
+import { SessionComposer } from "../SessionComposer";
+
+// 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() {}
+      };
+  }
+});
+
+/**
+ * End-to-end composer wiring for the service tier (stigmer/stigmer#357):
+ * the toolbar's ModelSelector toggle must reach composer state, and an
+ * active fast selection must ride the submit context to execution create.
+ * This seam (SessionComposer → ComposerToolbar props → submit context) is
+ * exactly where the feature can silently die while every layer on either
+ * side unit-tests green.
+ */
+
+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"],
+};
+
+function createMinimalStigmerMock(): Stigmer {
+  return {
+    agentExecution: { uploadAttachment: vi.fn() },
+    environment: { getPersonal: vi.fn().mockResolvedValue(null) },
+    baseUrl: "http://localhost:8080",
+    getAuthCredential: vi.fn().mockResolvedValue("test-token"),
+    config: {
+      baseUrl: "http://localhost:8080",
+      getAccessToken: vi.fn().mockResolvedValue(""),
+    },
+  } as unknown as Stigmer;
+}
+
+function createWrapper(client: Stigmer) {
+  return function Wrapper({ children }: { children: ReactNode }) {
+    return (
+      <StigmerContext.Provider value={client}>
+        <ModelRegistryContext.Provider
+          value={{
+            models: [FAST_CAPABLE],
+            isLoading: false,
+            error: null,
+            refetch: vi.fn(),
+          }}
+        >
+          {children}
+        </ModelRegistryContext.Provider>
+      </StigmerContext.Provider>
+    );
+  };
+}
+
+function renderComposer() {
+  const client = createMinimalStigmerMock();
+  const onSubmit = vi.fn();
+
+  const result = render(
+    <SessionComposer
+      onSubmit={onSubmit}
+      harness="cursor"
+      defaultModelId="composer-2.5"
+    />,
+    { wrapper: createWrapper(client) },
+  );
+
+  return { ...result, onSubmit };
+}
+
+function submitMessage(message: string) {
+  const textarea = screen.getByRole("textbox");
+  fireEvent.change(textarea, { target: { value: message } });
+  fireEvent.keyDown(textarea, { key: "Enter", shiftKey: false });
+}
+
+/**
+ * Open the model selector popover (Base UI portals mount asynchronously in
+ * jsdom — the switch is awaited) and flip the fast-tier toggle.
+ */
+async function toggleFastTier() {
+  fireEvent.click(screen.getByRole("button", { name: /Composer 2\.5/ }));
+  const toggle = await screen.findByRole("switch", { name: "Fast tier" });
+  fireEvent.click(toggle);
+  fireEvent.keyDown(document.activeElement ?? document.body, { key: "Escape" });
+}
+
+afterEach(cleanup);
+
+describe("SessionComposer — service tier submit contract", () => {
+  it("renders the tier toggle through the toolbar for a fast-capable model", async () => {
+    renderComposer();
+
+    fireEvent.click(screen.getByRole("button", { name: /Composer 2\.5/ }));
+    expect(await screen.findByRole("switch", { name: "Fast tier" })).toBeTruthy();
+  });
+
+  it("carries serviceTier 'fast' on the submit context after toggling", async () => {
+    const { onSubmit } = renderComposer();
+
+    await toggleFastTier();
+    submitMessage("Run it fast");
+
+    await waitFor(() => expect(onSubmit).toHaveBeenCalledOnce());
+    const context = onSubmit.mock.calls[0][2];
+    expect(context?.serviceTier).toBe("fast");
+  });
+
+  it("leaves serviceTier undefined when the toggle is untouched", async () => {
+    const { onSubmit } = renderComposer();
+
+    submitMessage("Run it normally");
+
+    await waitFor(() => expect(onSubmit).toHaveBeenCalledOnce());
+    const context = onSubmit.mock.calls[0][2];
+    expect(context?.serviceTier).toBeUndefined();
+  });
+
+  it("leaves serviceTier undefined after toggling fast on and back off", async () => {
+    const { onSubmit } = renderComposer();
+
+    await toggleFastTier();
+    await toggleFastTier();
+    submitMessage("Changed my mind");
+
+    await waitFor(() => expect(onSubmit).toHaveBeenCalledOnce());
+    const context = onSubmit.mock.calls[0][2];
+    expect(context?.serviceTier).toBeUndefined();
+  });
+});

package/src/dashboard/__tests__/useDashboardFailedRuns.test.tsx

@@ -0,0 +1,106 @@
+import { describe, it, expect, vi } from "vitest";
+import { renderHook, waitFor } from "@testing-library/react";
+import type { ReactNode } from "react";
+import { ExecutionPhase as AgentPhase } from "@stigmer/protos/ai/stigmer/agentic/agentexecution/v1/enum_pb";
+import { ExecutionPhase as WorkflowPhase } from "@stigmer/protos/ai/stigmer/agentic/workflowexecution/v1/enum_pb";
+import { StigmerContext } from "../../context";
+import { FetchCacheContext } from "../../internal/FetchCacheProvider";
+import { useDashboardFailedRuns } from "../useDashboardFailedRuns";
+
+function createMockStigmer(overrides: {
+  agentList?: (...args: unknown[]) => Promise<unknown>;
+  workflowList?: (...args: unknown[]) => Promise<unknown>;
+} = {}) {
+  return {
+    agentExecution: {
+      list: overrides.agentList ?? vi.fn().mockResolvedValue({ entries: [] }),
+    },
+    workflowExecution: {
+      list: overrides.workflowList ?? vi.fn().mockResolvedValue({ entries: [] }),
+    },
+  } as never;
+}
+
+function wrapper(client: unknown) {
+  return function Wrapper({ children }: { children: ReactNode }) {
+    return (
+      <FetchCacheContext.Provider value={null}>
+        <StigmerContext.Provider value={client as never}>
+          {children}
+        </StigmerContext.Provider>
+      </FetchCacheContext.Provider>
+    );
+  };
+}
+
+describe("useDashboardFailedRuns", () => {
+  it("scopes both list requests to the active org and the FAILED phase", async () => {
+    const agentList = vi.fn().mockResolvedValue({ entries: [] });
+    const workflowList = vi.fn().mockResolvedValue({ entries: [] });
+    const client = createMockStigmer({ agentList, workflowList });
+
+    const { result } = renderHook(() => useDashboardFailedRuns("acme"), {
+      wrapper: wrapper(client),
+    });
+
+    await waitFor(() => expect(result.current.isLoading).toBe(false));
+
+    // Regression guard: the pre-fix hook used org only as a fetch gate and
+    // sent no org on the wire, so a brand-new org's dashboard showed other
+    // orgs' failures.
+    const agentRequest = agentList.mock.calls[0][0];
+    expect(agentRequest.org).toBe("acme");
+    expect(agentRequest.phase).toBe(AgentPhase.EXECUTION_FAILED);
+
+    const workflowRequest = workflowList.mock.calls[0][0];
+    expect(workflowRequest.org).toBe("acme");
+    expect(workflowRequest.phase).toBe(WorkflowPhase.EXECUTION_FAILED);
+  });
+
+  it("does not fetch until an org is available", async () => {
+    const agentList = vi.fn().mockResolvedValue({ entries: [] });
+    const workflowList = vi.fn().mockResolvedValue({ entries: [] });
+    const client = createMockStigmer({ agentList, workflowList });
+
+    renderHook(() => useDashboardFailedRuns(null), {
+      wrapper: wrapper(client),
+    });
+
+    // Give any wrongly-armed fetch a tick to fire.
+    await new Promise((resolve) => setTimeout(resolve, 0));
+
+    expect(agentList).not.toHaveBeenCalled();
+    expect(workflowList).not.toHaveBeenCalled();
+  });
+
+  it("interleaves agent and workflow failures newest-first, capped at 5", async () => {
+    const ts = (secs: number) => ({ seconds: BigInt(secs), nanos: 0 });
+    const agentEntries = [1, 3, 5].map((n) => ({
+      metadata: { id: `aex_${n}`, name: `agent ${n}` },
+      spec: { agentId: `agt_${n}` },
+      status: { error: "boom", audit: { specAudit: { createdAt: ts(n) } } },
+    }));
+    const workflowEntries = [2, 4, 6].map((n) => ({
+      metadata: { id: `wex_${n}`, name: `workflow ${n}`, slug: `wf-${n}` },
+      status: { error: "boom", audit: { specAudit: { createdAt: ts(n) } } },
+    }));
+    const client = createMockStigmer({
+      agentList: vi.fn().mockResolvedValue({ entries: agentEntries }),
+      workflowList: vi.fn().mockResolvedValue({ entries: workflowEntries }),
+    });
+
+    const { result } = renderHook(() => useDashboardFailedRuns("acme"), {
+      wrapper: wrapper(client),
+    });
+
+    await waitFor(() => expect(result.current.failedRuns).toHaveLength(5));
+
+    expect(result.current.failedRuns.map((run) => run.id)).toEqual([
+      "wex_6",
+      "aex_5",
+      "wex_4",
+      "aex_3",
+      "wex_2",
+    ]);
+  });
+});

package/src/dashboard/useDashboardFailedRuns.ts

@@ -48,6 +48,7 @@ export function useDashboardFailedRuns(
               create(ListAgentExecutionsRequestSchema, {
                 pageSize: PAGE_SIZE,
                 phase: AgentPhase.EXECUTION_FAILED,
+                org: orgVal,
               }),
             );
             return [...resp.entries] as readonly AgentExecution[];
@@ -64,6 +65,7 @@ export function useDashboardFailedRuns(
               create(ListWorkflowExecutionsRequestSchema, {
                 pageSize: PAGE_SIZE,
                 phase: WorkflowPhase.EXECUTION_FAILED,
+                org: orgVal,
               }),
             );
             return [...resp.entries] as readonly WorkflowExecution[];

package/src/execution/useCreateAgentExecution.ts

@@ -13,6 +13,7 @@ import {
 import { useStigmer } from "../hooks.js";
 import { toError } from "../internal/toError.js";
 import { toProtoInteractionMode } from "../composer/interaction-mode.js";
+import { toProtoServiceTier, type ServiceTierOption } from "../models/service-tier.js";
 import { toProtoHarness, type HarnessOption } from "../models/harness.js";
 import {
   toProtoExecutionTarget,
@@ -123,6 +124,19 @@ export interface SharedAgentExecutionFields {
    * Maps to `ExecutionConfig.interaction_mode` in the proto.
    */
   readonly interactionMode?: "agent" | "plan";
+  /**
+   * Service tier for this execution's model calls (stigmer/stigmer#357).
+   *
+   * - `"standard"` (default): the model's base-priced configuration,
+   *   requested explicitly — never the provider account default.
+   * - `"fast"`: the provider's fast variant at fast rates. Valid only for
+   *   models whose registry entry prices a fast variant — the backend
+   *   refuses the create otherwise, so gate the option on
+   *   `ModelInfo.serviceTiers`.
+   *
+   * Maps to `ExecutionConfig.service_tier` in the proto.
+   */
+  readonly serviceTier?: ServiceTierOption;
   /**
    * Marks this execution as a Build-from-plan turn: the user approved a
    * plan from a prior Plan-mode execution and asked the agent to implement
@@ -302,6 +316,7 @@ export function useCreateAgentExecution(): UseCreateAgentExecutionReturn {
         const hasConfig =
           input.modelName ||
           input.interactionMode ||
+          input.serviceTier ||
           input.structuredOutputSchema ||
           input.buildFromPlan;
         const executionConfig = hasConfig
@@ -310,6 +325,9 @@ export function useCreateAgentExecution(): UseCreateAgentExecutionReturn {
               ...(input.interactionMode
                 ? { interactionMode: toProtoInteractionMode(input.interactionMode) }
                 : {}),
+              ...(input.serviceTier
+                ? { serviceTier: toProtoServiceTier(input.serviceTier) }
+                : {}),
               ...(input.structuredOutputSchema
                 ? { structuredOutputSchema: input.structuredOutputSchema }
                 : {}),

package/src/index.ts

@@ -770,6 +770,66 @@ export type {
   DatastoreDetailViewProps,
 } from "./datastore/index.js";
 
+// Schedule — the disabled-vs-paused state derivation, the direct-query
+// list core + workbench adapter (schedules are not search-backed), data
+// hooks (get by reference, paginated list, count), behavior hooks
+// (create via apply, resume, trigger once, owner enable/disable and
+// per-field spec edits via lossless manifest apply), the cadence model
+// (preset ⇄ cron, no cron parsing — recognition of builder-emitted
+// shapes only), the cadence builder, the creation form, the tabbed
+// detail view with inline editing, and the paginated run-history table
+export {
+  deriveScheduleState,
+  formatNextFire,
+  createScheduleListFn,
+  listSchedulesPage,
+  useSchedule,
+  useScheduleList,
+  useScheduleCount,
+  useCreateSchedule,
+  useResumeSchedule,
+  useTriggerSchedule,
+  useSetScheduleEnabled,
+  useUpdateScheduleSpec,
+  createScheduleColumns,
+  cadenceToCron,
+  cronToCadence,
+  describeCadence,
+  validateCron,
+  validateTimeZone,
+  WEEKDAY_LABELS,
+  CadenceField,
+  ScheduleForm,
+  ScheduleRowActions,
+  ScheduleDetailView,
+  ScheduleIcon,
+  ScheduleRunsTable,
+} from "./schedule/index.js";
+export type {
+  ScheduleState,
+  ScheduleStateInfo,
+  ScheduleListClient,
+  SchedulePage,
+  UseScheduleReturn,
+  UseScheduleListOptions,
+  UseScheduleListReturn,
+  UseScheduleCountOptions,
+  UseScheduleCountReturn,
+  UseCreateScheduleReturn,
+  UseResumeScheduleReturn,
+  UseTriggerScheduleReturn,
+  UseSetScheduleEnabledReturn,
+  CadencePreset,
+  CadenceKind,
+  CadenceFieldProps,
+  ScheduleFormProps,
+  ScheduleColumnsOptions,
+  ScheduleRowActionsProps,
+  ScheduleDetailViewProps,
+  ScheduleRunsTableProps,
+  UseUpdateScheduleSpecReturn,
+} from "./schedule/index.js";
+
 // Environment — data hooks, list hook, personal convenience hook, secret reveal, variable management, env var form, system env vars, and styled components
 export {
   useEnvironment,
@@ -1259,13 +1319,18 @@ export {
   useConnectSlackChannel,
   useInstallChannel,
   useChannelToolReadiness,
+  useChannelTemplateReadiness,
   useChannelSessions,
+  useChannelTemplateList,
+  templateStatusPhase,
+  splitTemplateBody,
   AgentChannelsPanel,
   ConnectSlackDialog,
   ConnectWhatsAppDialog,
   ChannelCredentialsDialog,
   ChannelToolCredentials,
   ChannelConversationsDialog,
+  ChannelTemplatesDialog,
 } from "./channel/index.js";
 export type {
   UseAgentChannelListReturn,
@@ -1277,13 +1342,18 @@ export type {
   SlackConnectPhase,
   UseInstallChannelReturn,
   InstallChannelPhase,
+  ChannelTemplateReadiness,
   UseChannelSessionsReturn,
+  UseChannelTemplateListOptions,
+  UseChannelTemplateListReturn,
+  TemplateBodySegment,
   AgentChannelsPanelProps,
   ConnectSlackDialogProps,
   ConnectWhatsAppDialogProps,
   ChannelCredentialsDialogProps,
   ChannelToolCredentialsProps,
   ChannelConversationsDialogProps,
+  ChannelTemplatesDialogProps,
 } from "./channel/index.js";
 
 // Error — structured error display with classification, retry, and contextual guidance

package/src/internal/Pagination.tsx

@@ -0,0 +1,72 @@
+"use client";
+
+/**
+ * Shared prev/next pagination control for paginated SDK tables.
+ *
+ * Extracted from `CreditLedgerTable` (its original, file-private home)
+ * when `ScheduleRunsTable` became the second consumer. Deliberately
+ * minimal — Previous / "Page N of M" / Next — because every paginated
+ * surface in the SDK so far wants exactly this shape; page-number
+ * jumping earns its complexity only when a consumer actually needs it.
+ *
+ * Internal (not barrel-exported): the public contract is each table
+ * component, not this control.
+ */
+
+import { cn } from "@stigmer/theme";
+
+/** Props for {@link Pagination}. */
+export interface PaginationProps {
+  /** Current page number, 1-indexed. */
+  readonly pageNum: number;
+  /** Total number of pages. Render the control only when > 1. */
+  readonly totalPages: number;
+  /** Called with the new page number when the user navigates. */
+  readonly onPageChange: (page: number) => void;
+  /** Accessible label naming what is being paginated (e.g. "Run history pagination"). */
+  readonly ariaLabel: string;
+  /** Additional CSS classes for the root container. */
+  readonly className?: string;
+}
+
+const buttonClasses = cn(
+  "rounded-md px-2.5 py-1 text-xs font-medium text-muted-foreground transition-colors",
+  "hover:bg-accent hover:text-foreground",
+  "disabled:pointer-events-none disabled:opacity-40",
+);
+
+export function Pagination({
+  pageNum,
+  totalPages,
+  onPageChange,
+  ariaLabel,
+  className,
+}: PaginationProps) {
+  return (
+    <div
+      className={cn("flex items-center justify-between", className)}
+      role="navigation"
+      aria-label={ariaLabel}
+    >
+      <button
+        type="button"
+        disabled={pageNum <= 1}
+        onClick={() => onPageChange(pageNum - 1)}
+        className={buttonClasses}
+      >
+        Previous
+      </button>
+      <span className="text-xs tabular-nums text-muted-foreground">
+        Page {pageNum} of {totalPages}
+      </span>
+      <button
+        type="button"
+        disabled={pageNum >= totalPages}
+        onClick={() => onPageChange(pageNum + 1)}
+        className={buttonClasses}
+      >
+        Next
+      </button>
+    </div>
+  );
+}

package/src/library/useExportResource.ts

@@ -5,6 +5,7 @@ import { parse as parseYaml } from "yaml";
 import type { Agent } from "@stigmer/protos/ai/stigmer/agentic/agent/v1/api_pb";
 import type { Datastore } from "@stigmer/protos/ai/stigmer/agentic/datastore/v1/api_pb";
 import type { McpServer } from "@stigmer/protos/ai/stigmer/agentic/mcpserver/v1/api_pb";
+import type { Schedule } from "@stigmer/protos/ai/stigmer/agentic/schedule/v1/api_pb";
 import type { Workflow } from "@stigmer/protos/ai/stigmer/agentic/workflow/v1/api_pb";
 import { serializeManifest } from "@stigmer/sdk";
 import { toast } from "../feedback/toast.js";
@@ -17,9 +18,9 @@ import { serializeWorkflowYaml } from "../workflow/serialize-workflow-yaml.js";
 /** Options for {@link useExportResource}. */
 export interface UseExportResourceOptions {
   /** The resource kind — determines which serializer is used. */
-  readonly kind: "Agent" | "McpServer" | "Workflow" | "Datastore";
+  readonly kind: "Agent" | "McpServer" | "Workflow" | "Datastore" | "Schedule";
   /** The proto resource to export, or `null` when not yet loaded. */
-  readonly resource: Agent | McpServer | Workflow | Datastore | null;
+  readonly resource: Agent | McpServer | Workflow | Datastore | Schedule | null;
 }
 
 /** Return value of {@link useExportResource}. */
@@ -44,7 +45,7 @@ export interface UseExportResourceReturn {
 
 /**
  * Headless export hook for Stigmer resources (Agent, McpServer,
- * Workflow, Datastore).
+ * Workflow, Datastore, Schedule).
  *
  * Serializes the resource into YAML and JSON formats and provides
  * stable callbacks for copying to clipboard or triggering a file

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>