@stigmer/react 3.5.3 → 3.7.0

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

package/src/organization/OrgProvider.tsx

@@ -12,6 +12,7 @@ import {
 } from "react";
 import type { Organization } from "@stigmer/protos/ai/stigmer/tenancy/organization/v1/api_pb";
 import { useStigmer } from "../hooks.js";
+import { useFetchCache } from "../internal/FetchCacheProvider.js";
 
 /** Value exposed by {@link OrgProvider} via {@link useOrg}. */
 export interface OrgContextValue {
@@ -63,19 +64,27 @@ function persistSlug(slug: string): void {
  * organization selection, and persists the choice to `localStorage`
  * under the key `stigmer:activeOrgSlug`.
  *
- * Must be rendered inside a {@link StigmerProvider}.
+ * Must be rendered inside a {@link StigmerProvider}. Mount it BELOW
+ * `FetchCacheProvider` (when one is used): switching the active org clears
+ * the nearest fetch cache, so view state cached under the previous org
+ * context — session and execution entries are keyed by id, not org — can
+ * never bleed into the new one. Navigation on switch stays the host's
+ * responsibility via `OrgSwitcher`'s `onOrgChanged` callback.
  *
  * @example
  * ```tsx
  * <StigmerProvider client={client}>
- *   <OrgProvider>
- *     <App />
- *   </OrgProvider>
+ *   <FetchCacheProvider>
+ *     <OrgProvider>
+ *       <App />
+ *     </OrgProvider>
+ *   </FetchCacheProvider>
  * </StigmerProvider>
  * ```
  */
 export function OrgProvider({ children }: { children: ReactNode }) {
   const stigmer = useStigmer();
+  const fetchCache = useFetchCache();
   const [orgs, setOrgs] = useState<Organization[]>([]);
   const [activeOrg, setActiveOrgState] = useState<Organization | null>(null);
   const [isLoading, setIsLoading] = useState(true);
@@ -140,6 +149,22 @@ export function OrgProvider({ children }: { children: ReactNode }) {
     }
   }, []);
 
+  // Org-switch invariant: view state cached under one org context must not
+  // survive into another. Covers every path that changes the active org
+  // (explicit switch, post-create refresh) while skipping the initial
+  // restore (previous slug is null). Cache keys for sessions/executions are
+  // id-scoped, not org-scoped, so a TTL'd entry would otherwise outlive the
+  // switch. No-op when no FetchCacheProvider is mounted.
+  const previousSlugRef = useRef<string | null>(null);
+  const activeSlug = activeOrg?.metadata?.slug ?? null;
+  useEffect(() => {
+    const previous = previousSlugRef.current;
+    previousSlugRef.current = activeSlug;
+    if (previous !== null && activeSlug !== null && previous !== activeSlug) {
+      fetchCache?.clear();
+    }
+  }, [activeSlug, fetchCache]);
+
   const value = useMemo<OrgContextValue>(
     () => ({
       orgs,

package/src/organization/__tests__/OrgProvider.orgSwitch.test.tsx

@@ -0,0 +1,89 @@
+import { describe, it, expect, vi, beforeEach } from "vitest";
+import { act, renderHook, waitFor } from "@testing-library/react";
+import type { ReactNode } from "react";
+import type { Organization } from "@stigmer/protos/ai/stigmer/tenancy/organization/v1/api_pb";
+import { StigmerContext } from "../../context";
+import { FetchCache } from "../../internal/fetch-cache";
+import { FetchCacheContext } from "../../internal/FetchCacheProvider";
+import { OrgProvider, useOrg } from "../OrgProvider";
+
+const acme = { metadata: { id: "acme", slug: "acme", name: "Acme" } } as Organization;
+const globex = { metadata: { id: "globex", slug: "globex", name: "Globex" } } as Organization;
+
+function createMockStigmer(orgs: Organization[]) {
+  return {
+    organization: {
+      findMyOrganizations: vi.fn().mockResolvedValue({ entries: orgs }),
+    },
+  } as never;
+}
+
+function wrapper(client: unknown, cache: FetchCache | null) {
+  return function Wrapper({ children }: { children: ReactNode }) {
+    return (
+      <StigmerContext.Provider value={client as never}>
+        <FetchCacheContext.Provider value={cache}>
+          <OrgProvider>{children}</OrgProvider>
+        </FetchCacheContext.Provider>
+      </StigmerContext.Provider>
+    );
+  };
+}
+
+describe("OrgProvider — org-switch cache invalidation", () => {
+  beforeEach(() => {
+    localStorage.clear();
+  });
+
+  it("clears the fetch cache when the active org changes", async () => {
+    const cache = new FetchCache();
+    cache.set("session:ses_1", { stale: "from previous org context" });
+
+    const { result } = renderHook(() => useOrg(), {
+      wrapper: wrapper(createMockStigmer([acme, globex]), cache),
+    });
+
+    await waitFor(() => expect(result.current.activeOrg).not.toBeNull());
+
+    // Initial restore must NOT clear — only a genuine change of context does.
+    // Session/execution cache keys are id-scoped (not org-scoped), so without
+    // the clear a switched-away org's view state would survive its 5-min TTL.
+    expect(cache.has("session:ses_1")).toBe(true);
+
+    act(() => result.current.setActiveOrg(globex));
+
+    await waitFor(() => expect(cache.has("session:ses_1")).toBe(false));
+    expect(result.current.activeOrg?.metadata?.slug).toBe("globex");
+  });
+
+  it("does not clear when re-selecting the already-active org", async () => {
+    const cache = new FetchCache();
+
+    const { result } = renderHook(() => useOrg(), {
+      wrapper: wrapper(createMockStigmer([acme, globex]), cache),
+    });
+
+    await waitFor(() => expect(result.current.activeOrg).not.toBeNull());
+    const active = result.current.activeOrg!;
+
+    cache.set("session:ses_1", { fresh: true });
+    act(() => result.current.setActiveOrg(active));
+
+    await new Promise((resolve) => setTimeout(resolve, 0));
+    expect(cache.has("session:ses_1")).toBe(true);
+  });
+
+  it("works without a FetchCacheProvider (no-op, no crash)", async () => {
+    const { result } = renderHook(() => useOrg(), {
+      wrapper: wrapper(createMockStigmer([acme, globex]), null),
+    });
+
+    await waitFor(() => expect(result.current.activeOrg).not.toBeNull());
+
+    act(() => result.current.setActiveOrg(globex));
+
+    await waitFor(() =>
+      expect(result.current.activeOrg?.metadata?.slug).toBe("globex"),
+    );
+  });
+});

package/src/resource-detail/useDeleteResource.ts

@@ -6,7 +6,12 @@ import { toError } from "../internal/toError.js";
 import { toast } from "../feedback/toast.js";
 
 /** Resource types that support deletion from detail pages. */
-export type DeletableResourceKind = "agent" | "skill" | "mcpServer" | "workflow";
+export type DeletableResourceKind =
+  | "agent"
+  | "skill"
+  | "mcpServer"
+  | "workflow"
+  | "schedule";
 
 export interface UseDeleteResourceReturn {
   /**
@@ -74,6 +79,9 @@ export function useDeleteResource(
         case "workflow":
           await stigmer.workflow.delete(resourceId);
           break;
+        case "schedule":
+          await stigmer.schedule.delete(resourceId);
+          break;
       }
       toast.success(
         resourceName
@@ -106,5 +114,7 @@ function kindLabel(kind: DeletableResourceKind): string {
       return "MCP server";
     case "workflow":
       return "workflow";
+    case "schedule":
+      return "schedule";
   }
 }

package/src/resource-workbench/__tests__/ResourceWorkbench.test.tsx

@@ -0,0 +1,112 @@
+import { describe, it, expect, vi, afterEach } from "vitest";
+import { render, renderHook, screen, waitFor, cleanup } from "@testing-library/react";
+import type { ReactNode } from "react";
+import type { ListResult } from "@stigmer/sdk";
+import { FetchCacheContext } from "../../internal/FetchCacheProvider";
+import { ResourceWorkbench } from "../components/ResourceWorkbench";
+import { useResourceCollection } from "../hooks/useResourceCollection";
+
+afterEach(cleanup);
+
+function Wrapper({ children }: { children: ReactNode }) {
+  return (
+    <FetchCacheContext.Provider value={null}>
+      {children}
+    </FetchCacheContext.Provider>
+  );
+}
+
+/** A row shaped like a resource proto: the id lives under metadata. */
+interface ProtoLikeRow {
+  readonly metadata: { readonly id: string; readonly slug: string };
+}
+
+function listFnReturning(entries: unknown[], totalCount = entries.length) {
+  return vi.fn(
+    async (): Promise<ListResult> => ({
+      entries: entries as ListResult["entries"],
+      totalCount,
+      totalPages: 1,
+    }),
+  );
+}
+
+describe("ResourceWorkbench searchable prop", () => {
+  it("renders the search input by default", async () => {
+    render(
+      <ResourceWorkbench listFn={listFnReturning([])} org="acme" />,
+      { wrapper: Wrapper },
+    );
+
+    await waitFor(() =>
+      expect(screen.getByRole("textbox", { name: "Search…" })).toBeTruthy(),
+    );
+  });
+
+  it("hides the search input when searchable is false", async () => {
+    render(
+      <ResourceWorkbench
+        listFn={listFnReturning([])}
+        org="acme"
+        searchable={false}
+      />,
+      { wrapper: Wrapper },
+    );
+
+    await waitFor(() => expect(screen.getByText("No resources found")).toBeTruthy());
+    expect(screen.queryByRole("textbox")).toBeNull();
+  });
+});
+
+describe("useResourceCollection row identity", () => {
+  const protoRows: ProtoLikeRow[] = [
+    { metadata: { id: "sch_a", slug: "a" } },
+    { metadata: { id: "sch_b", slug: "b" } },
+  ];
+
+  const columns = [
+    {
+      id: "slug",
+      header: "Slug",
+      cell: (row: ProtoLikeRow) => row.metadata.slug,
+    },
+  ];
+
+  it("uses getItemId for rows without a top-level id", async () => {
+    // Hoisted: a listFn re-created per render would retrigger useFetch.
+    const listFn = listFnReturning(protoRows);
+    const { result } = renderHook(
+      () =>
+        useResourceCollection<ProtoLikeRow>({
+          listFn,
+          org: "acme",
+          columns,
+          getItemId: (row) => row.metadata.id,
+        }),
+      { wrapper: Wrapper },
+    );
+
+    await waitFor(() => expect(result.current.items).toHaveLength(2));
+    const rowIds = result.current.table!.getRowModel().rows.map((r) => r.id);
+    expect(rowIds).toEqual(["sch_a", "sch_b"]);
+  });
+
+  it("falls back to SearchResult.id, then the row index", async () => {
+    const mixed = [{ id: "res_1" }, { name: "no-id" }];
+    const listFn = listFnReturning(mixed);
+    const fallbackColumns = [{ id: "c", header: "C", cell: () => null }];
+    const { result } = renderHook(
+      () =>
+        useResourceCollection({
+          listFn,
+          org: "acme",
+          columns: fallbackColumns,
+        }),
+      { wrapper: Wrapper },
+    );
+
+    await waitFor(() => expect(result.current.items).toHaveLength(2));
+    const rowIds = result.current.table!.getRowModel().rows.map((r) => r.id);
+    expect(rowIds).toEqual(["res_1", "1"]);
+  });
+});

package/src/resource-workbench/components/ResourceWorkbench.tsx

@@ -155,6 +155,15 @@ export interface ResourceWorkbenchProps<TData = SearchResult> {
 
   // --- Layout ------------------------------------------------------------
 
+  /**
+   * Whether the toolbar renders the text-search input. Set `false` for
+   * kinds whose list backend has no text search (e.g. schedules, which
+   * use the direct query instead of the search service) — a search box
+   * that silently matches nothing is worse than none (DD-006). Opt-in
+   * per DD-011: existing consumers keep the search box.
+   * @default true
+   */
+  readonly searchable?: boolean;
   /** Search input placeholder text. @default "Search\u2026" */
   readonly searchPlaceholder?: string;
   /** Accessible label for the workbench region. @default "Resource workbench" */
@@ -228,6 +237,7 @@ export function ResourceWorkbench<TData = SearchResult>({
   emptyAction,
   onRetry,
   headerAction,
+  searchable = true,
   searchPlaceholder = "Search\u2026",
   "aria-label": ariaLabel = "Resource workbench",
   className,
@@ -267,6 +277,7 @@ export function ResourceWorkbench<TData = SearchResult>({
     onSortChange: filtersHook.setSort,
     columns: columns as WorkbenchColumnDef<TData>[],
     enableSelection,
+    getItemId,
     refetchToken,
   });
 
@@ -305,21 +316,27 @@ export function ResourceWorkbench<TData = SearchResult>({
     >
       {/* --- Toolbar: search + filters + view switcher --- */}
       <div className="flex flex-wrap items-center gap-2">
-        <div className="relative flex-1">
-          <SearchIcon className="pointer-events-none absolute left-2.5 top-1/2 h-3.5 w-3.5 -translate-y-1/2 text-muted-foreground-subtle" />
-          <input
-            type="text"
-            value={filtersHook.query}
-            onChange={(e) => filtersHook.setQuery(e.target.value)}
-            placeholder={searchPlaceholder}
-            aria-label={searchPlaceholder}
-            className={cn(
-              "w-full rounded-md border border-input bg-background py-1.5 pl-8 pr-3 text-sm",
-              "placeholder:text-muted-foreground-subtle",
-              "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
-            )}
-          />
-        </div>
+        {searchable ? (
+          <div className="relative flex-1">
+            <SearchIcon className="pointer-events-none absolute left-2.5 top-1/2 h-3.5 w-3.5 -translate-y-1/2 text-muted-foreground-subtle" />
+            <input
+              type="text"
+              value={filtersHook.query}
+              onChange={(e) => filtersHook.setQuery(e.target.value)}
+              placeholder={searchPlaceholder}
+              aria-label={searchPlaceholder}
+              className={cn(
+                "w-full rounded-md border border-input bg-background py-1.5 pl-8 pr-3 text-sm",
+                "placeholder:text-muted-foreground-subtle",
+                "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+              )}
+            />
+          </div>
+        ) : (
+          // Spacer keeps the scope toggle / view switcher / header action
+          // right-aligned, matching the searchable layout.
+          <div className="flex-1" aria-hidden="true" />
+        )}
         {onScopeChange && (
           <ScopeToggle value={controlledScope} onChange={onScopeChange} />
         )}