@stigmer/react 3.3.0 → 3.4.1

package/src/manifest/useApplyManifest.ts

@@ -55,9 +55,13 @@ export interface UseApplyManifestReturn {
   /**
    * Apply all documents sequentially in dependency order. Entries update
    * live. Stops at the first failure (later entries become `"skipped"`).
-   * Resolves `true` when every document applied.
+   * Resolves to the final per-document entries with terminal statuses —
+   * the caller derives full success (`every applied`) and the applied
+   * subset (for a list refresh) without re-reading React state, which is
+   * still stale in the calling closure. Empty when there was nothing to
+   * apply.
    */
-  readonly applyAll: () => Promise<boolean>;
+  readonly applyAll: () => Promise<readonly ManifestPreviewEntry[]>;
   /** `true` while applies are in flight. */
   readonly isApplying: boolean;
   /** Clear all state (content, preview, errors). */
@@ -194,8 +198,8 @@ export function useApplyManifest(org: string): UseApplyManifestReturn {
     return () => clearTimeout(timer);
   }, [content, stigmer, isApplying]);
 
-  const applyAll = useCallback(async (): Promise<boolean> => {
-    if (!entries || entries.length === 0) return false;
+  const applyAll = useCallback(async (): Promise<readonly ManifestPreviewEntry[]> => {
+    if (!entries || entries.length === 0) return [];
 
     // Invalidate any in-flight validation so it cannot clobber apply statuses.
     validateSeq.current++;
@@ -206,10 +210,10 @@ export function useApplyManifest(org: string): UseApplyManifestReturn {
     const working = entries.map((entry): ManifestPreviewEntry => ({ ...entry, status: "pending" }));
     const commit = () => setEntries([...working]);
 
-    let allApplied = true;
+    let stopped = false;
 
     for (let i = 0; i < working.length; i++) {
-      if (!allApplied) {
+      if (stopped) {
         working[i] = { ...working[i], status: "skipped" };
         continue;
       }
@@ -226,14 +230,14 @@ export function useApplyManifest(org: string): UseApplyManifestReturn {
           status: "failed",
           errorMessage: toError(err).message,
         };
-        allApplied = false;
+        stopped = true;
       }
       commit();
     }
 
     commit();
     setIsApplying(false);
-    return allApplied;
+    return working;
   }, [entries, stigmer]);
 
   const hasRedactedSecrets = useMemo(

package/src/mcp-server/McpServerDetailView.tsx

@@ -14,6 +14,7 @@ import type { ToolApprovalPolicy, McpServerSpec } from "@stigmer/protos/ai/stigm
 import { ValidationState } from "@stigmer/protos/ai/stigmer/agentic/mcpserver/v1/status_pb";
 import type { EnvVarDeclaration } from "@stigmer/protos/ai/stigmer/agentic/environment/v1/spec_pb";
 import { useMcpServer } from "./useMcpServer.js";
+import type { UseMcpServerReturn } from "./useMcpServer.js";
 import { useUpdateMcpServer } from "./useUpdateMcpServer.js";
 import { mcpServerToInput } from "./internal/mcpServerToInput.js";
 import { useMcpServerConnect } from "./useMcpServerConnect.js";
@@ -51,6 +52,31 @@ export interface McpServerDetailViewProps {
   readonly org: string;
   /** MCP server slug (URL-friendly identifier unique within the org). */
   readonly slug: string;
+  /**
+   * Hoisted resource state from {@link useMcpServer}, for callers that
+   * already own the fetch. When provided, the view issues **no**
+   * `getByReference` RPC of its own and renders entirely from this state —
+   * loading, error, and not-found included, so a caller mid-fetch still
+   * gets the loading skeleton rather than a false not-found.
+   *
+   * Ownership contract: supplying this state means supplying its
+   * lifecycle. The view calls `mcpServerState.refetch()` after connect,
+   * disconnect, and inline edits, so the `refetch` you pass must refresh
+   * the data behind `mcpServer` or the view will render stale state after
+   * those actions.
+   *
+   * Two callers this serves:
+   * - A page that already fetched the server (e.g. for export/YAML
+   *   actions) passes `useMcpServer(org, slug)` straight through instead
+   *   of paying a duplicate RPC.
+   * - A guided tour or demo supplies frozen state
+   *   (`{ mcpServer, isLoading: false, isRefetching: false, error: null,
+   *   refetch: noop }`) so every depicted beat renders deterministically
+   *   from data the tour owns (scenar-cloud DD-006).
+   *
+   * When omitted, the view fetches by `org`/`slug` itself, as before.
+   */
+  readonly mcpServerState?: UseMcpServerReturn;
   /**
    * Called once when the MCP server resource has been fetched successfully.
    * Provides the resource display name for use cases like breadcrumbs,
@@ -115,7 +141,8 @@ export interface McpServerDetailViewProps {
 /**
  * Detail view for an MCP Server integration.
  *
- * Fetches the server via {@link useMcpServer} internally and renders
+ * Fetches the server via {@link useMcpServer} internally — or renders
+ * from hoisted state when the caller passes `mcpServerState` — and shows
  * its full configuration: validation banner (if invalid), header,
  * a **Connect bar** with a single Connect/Reconnect action, and a
  * **tabbed capabilities panel** (Tools, Policies, and optionally
@@ -135,10 +162,20 @@ export interface McpServerDetailViewProps {
  * // Minimal — self-contained, fetches its own data
  * <McpServerDetailView org="acme" slug="github" />
  * ```
+ *
+ * @example
+ * ```tsx
+ * // Hoisted — the page already fetched the server (e.g. for YAML
+ * // export actions), so pass that state through instead of paying a
+ * // second getByReference RPC.
+ * const state = useMcpServer(org, slug);
+ * <McpServerDetailView org={org} slug={slug} mcpServerState={state} />
+ * ```
  */
 export function McpServerDetailView({
   org,
   slug,
+  mcpServerState,
   onResourceLoad,
   defaultCapabilityTab = "tools",
   defaultShowCredentialForm = false,
@@ -150,7 +187,16 @@ export function McpServerDetailView({
   onResourceUpdated,
   className,
 }: McpServerDetailViewProps) {
-  const { mcpServer, isLoading, error, refetch } = useMcpServer(org, slug);
+  // Hoisted-state mode: when the caller supplies `mcpServerState`, disable
+  // the internal fetch via the hook's documented null-skip (a stable no-op,
+  // so `fetched` reports isLoading=false with no RPC) and render from the
+  // caller's state instead — all four states (loading/error/not-found/data)
+  // transfer intact.
+  const fetched = useMcpServer(
+    mcpServerState ? null : org,
+    mcpServerState ? null : slug,
+  );
+  const { mcpServer, isLoading, error, refetch } = mcpServerState ?? fetched;
   const { update: updateMcpServer, isUpdating } = useUpdateMcpServer();
 
   const saveMcpField = useCallback(
@@ -493,7 +539,9 @@ export function McpServerDetailView({
         />
       )}
 
-      <Section title="Connection">
+      {/* scrollTarget: guided tours/demos bring the connect flow into view
+          (see IdentityTransportStep's "mcp-transport" for the convention). */}
+      <Section title="Connection" scrollTarget="mcp-connection">
         <StdioSandboxNotice serverType={spec?.serverType} className="mb-3" />
         <OAuthRequiredNotice oauthOnly={spec?.auth?.oauthOnly} className="mb-3" />
         <ConnectBar
@@ -582,7 +630,7 @@ export function McpServerDetailView({
         />
       </dialog>
 
-      <Section title="Capabilities">
+      <Section title="Capabilities" scrollTarget="mcp-capabilities">
         <Tabs
           tabs={capabilityTabs}
           activeTab={capabilityTab}

package/src/mcp-server/__tests__/McpServerDetailView.test.tsx

@@ -0,0 +1,345 @@
+import { describe, it, expect, vi, beforeAll, afterEach } from "vitest";
+import { render, screen, cleanup, fireEvent, within } from "@testing-library/react";
+import type { ReactNode } from "react";
+import { create } from "@bufbuild/protobuf";
+import { timestampFromDate } from "@bufbuild/protobuf/wkt";
+import { createRouterTransport, ConnectError, Code } from "@connectrpc/connect";
+import { Stigmer } from "@stigmer/sdk";
+import { McpServerQueryController } from "@stigmer/protos/ai/stigmer/agentic/mcpserver/v1/query_pb";
+import {
+  McpServerSpecSchema,
+  HttpServerConfigSchema,
+  ToolApprovalPolicySchema,
+} from "@stigmer/protos/ai/stigmer/agentic/mcpserver/v1/spec_pb";
+import {
+  McpServerStatusSchema,
+  DiscoveredCapabilitiesSchema,
+  DiscoveredToolSchema,
+  ValidationState,
+} from "@stigmer/protos/ai/stigmer/agentic/mcpserver/v1/status_pb";
+import { EnvVarDeclarationSchema } from "@stigmer/protos/ai/stigmer/agentic/environment/v1/spec_pb";
+import type { McpServer } from "@stigmer/protos/ai/stigmer/agentic/mcpserver/v1/api_pb";
+import { samples } from "../../test/samples";
+import { StigmerContext } from "../../context";
+import { McpServerDetailView } from "../McpServerDetailView";
+import type { UseMcpServerReturn } from "../useMcpServer";
+
+// The kebab menu and dialogs portal their content; without a StigmerProvider
+// the portal container is null — pin it to document.body like sibling tests.
+vi.mock("../../portal-container", () => ({
+  useStigmerPortalContainer: () => document.body,
+}));
+
+beforeAll(() => {
+  // happy-dom lacks ResizeObserver, which Base UI positioners observe.
+  if (!("ResizeObserver" in globalThis)) {
+    (globalThis as unknown as { ResizeObserver: unknown }).ResizeObserver =
+      class {
+        observe() {}
+        unobserve() {}
+        disconnect() {}
+      };
+  }
+});
+
+afterEach(cleanup);
+
+const ORG = "acme";
+const SLUG = "order-management-api";
+
+/** Frozen discovery instant — fixtures must never read the real clock. */
+const DISCOVERED_AT = new Date("2026-07-20T09:30:00Z");
+
+/** The server as registered: HTTP transport, one secret env var, no tools. */
+function buildBaseServer(): McpServer {
+  const server = samples.mcpServer({ name: "Order Management API", org: ORG, slug: SLUG });
+  server.spec = create(McpServerSpecSchema, {
+    description: "REST API for order lookup, inventory, and return processing.",
+    serverType: {
+      case: "http",
+      value: create(HttpServerConfigSchema, { url: "https://api.acme.com/mcp" }),
+    },
+    env: {
+      API_TOKEN: create(EnvVarDeclarationSchema, {
+        isSecret: true,
+        description: "Bearer token for the Order Management API",
+      }),
+    },
+  });
+  return server;
+}
+
+/** The same server after Connect: 3 discovered tools, 1 classified policy. */
+function buildConnectedServer(): McpServer {
+  const server = buildBaseServer();
+  server.status = create(McpServerStatusSchema, {
+    validationState: ValidationState.valid,
+    discoveredCapabilities: create(DiscoveredCapabilitiesSchema, {
+      lastDiscoveredAt: timestampFromDate(DISCOVERED_AT),
+      tools: [
+        create(DiscoveredToolSchema, { name: "get_order", description: "Retrieve one order by ID." }),
+        create(DiscoveredToolSchema, { name: "list_orders", description: "List recent orders." }),
+        create(DiscoveredToolSchema, { name: "process_return", description: "Initiate a return and refund." }),
+      ],
+    }),
+    toolApprovals: [
+      create(ToolApprovalPolicySchema, {
+        toolName: "process_return",
+        message: "Process return for order '{{args.order_id}}'",
+      }),
+    ],
+  });
+  return server;
+}
+
+/** Hoisted-state bag in its settled, data-loaded shape. */
+function loadedState(server: McpServer): UseMcpServerReturn {
+  return { mcpServer: server, isLoading: false, isRefetching: false, error: null, refetch: vi.fn() };
+}
+
+/**
+ * Mounts the view against a real Connect router transport. RPCs the test
+ * does not register fall through to Connect's `unimplemented`, which the
+ * SDK hooks degrade from — the same contract the tours rely on.
+ */
+function renderView(
+  ui: ReactNode,
+  register: Parameters<typeof createRouterTransport>[0] = () => {},
+) {
+  const client = new Stigmer({
+    baseUrl: "/",
+    getAccessToken: () => "test-token",
+    customTransport: createRouterTransport(register),
+  });
+  return render(
+    <StigmerContext.Provider value={client}>{ui}</StigmerContext.Provider>,
+  );
+}
+
+describe("McpServerDetailView — hoisted mcpServerState", () => {
+  it("renders from injected state without issuing getByReference", async () => {
+    const getByReference = vi.fn(() => {
+      throw new ConnectError("must not fetch", Code.FailedPrecondition);
+    });
+
+    renderView(
+      <McpServerDetailView
+        org={ORG}
+        slug={SLUG}
+        mcpServerState={loadedState(buildBaseServer())}
+      />,
+      (router) => {
+        router.service(McpServerQueryController, { getByReference });
+      },
+    );
+
+    // Content is on screen synchronously — no skeleton frame first.
+    expect(
+      screen.getByRole("heading", { name: "Order Management API" }),
+    ).toBeTruthy();
+    expect(screen.queryByLabelText("Loading MCP server details")).toBeNull();
+
+    // Let pending microtasks (credentials/permission fetches) settle, then
+    // confirm the resource fetch never fired.
+    await screen.findByRole("tab", { name: /Tools/ });
+    expect(getByReference).not.toHaveBeenCalled();
+  });
+
+  it("shows the loading skeleton while the injected state is loading", () => {
+    renderView(
+      <McpServerDetailView
+        org={ORG}
+        slug={SLUG}
+        mcpServerState={{
+          mcpServer: null,
+          isLoading: true,
+          isRefetching: false,
+          error: null,
+          refetch: vi.fn(),
+        }}
+      />,
+    );
+    expect(screen.getByLabelText("Loading MCP server details")).toBeTruthy();
+    // A loading owner must never read as a missing resource.
+    expect(screen.queryByText("MCP Server not found")).toBeNull();
+  });
+
+  it("routes the error state's Retry to the injected refetch", () => {
+    const refetch = vi.fn();
+    renderView(
+      <McpServerDetailView
+        org={ORG}
+        slug={SLUG}
+        mcpServerState={{
+          mcpServer: null,
+          isLoading: false,
+          isRefetching: false,
+          error: new ConnectError("backend down", Code.Unavailable),
+          refetch,
+        }}
+      />,
+    );
+
+    fireEvent.click(screen.getByRole("button", { name: /retry/i }));
+    expect(refetch).toHaveBeenCalledTimes(1);
+  });
+
+  it("renders not-found when the injected state settles with no resource", () => {
+    renderView(
+      <McpServerDetailView
+        org={ORG}
+        slug={SLUG}
+        mcpServerState={{
+          mcpServer: null,
+          isLoading: false,
+          isRefetching: false,
+          error: null,
+          refetch: vi.fn(),
+        }}
+      />,
+    );
+    expect(screen.getByText("MCP Server not found")).toBeTruthy();
+  });
+});
+
+describe("McpServerDetailView — self-fetching mode (unchanged behaviour)", () => {
+  it("fetches by org/slug and renders the resolved server", async () => {
+    const getByReference = vi.fn(() => buildBaseServer());
+    renderView(<McpServerDetailView org={ORG} slug={SLUG} />, (router) => {
+      router.service(McpServerQueryController, { getByReference });
+    });
+
+    // First paint is the skeleton; content follows the fetch.
+    expect(screen.getByLabelText("Loading MCP server details")).toBeTruthy();
+    expect(
+      await screen.findByRole("heading", { name: "Order Management API" }),
+    ).toBeTruthy();
+    expect(getByReference).toHaveBeenCalledTimes(1);
+  });
+
+  it("renders not-found when the fetch 404s", async () => {
+    renderView(<McpServerDetailView org={ORG} slug={SLUG} />, (router) => {
+      router.service(McpServerQueryController, {
+        getByReference: () => {
+          throw new ConnectError("no such server", Code.NotFound);
+        },
+      });
+    });
+    expect(await screen.findByText("MCP Server not found")).toBeTruthy();
+  });
+});
+
+describe("McpServerDetailView — connect bar and capability tabs", () => {
+  it("offers Connect with the not-connected status before discovery", () => {
+    renderView(
+      <McpServerDetailView
+        org={ORG}
+        slug={SLUG}
+        mcpServerState={loadedState(buildBaseServer())}
+      />,
+    );
+    expect(screen.getByRole("button", { name: /^Connect$/ })).toBeTruthy();
+    expect(screen.getByText("Not connected yet")).toBeTruthy();
+    expect(
+      screen.getByText("Connect to this MCP server to discover its available tools."),
+    ).toBeTruthy();
+  });
+
+  it("offers Reconnect with the connected status and discovery date after discovery", () => {
+    renderView(
+      <McpServerDetailView
+        org={ORG}
+        slug={SLUG}
+        mcpServerState={loadedState(buildConnectedServer())}
+      />,
+    );
+    expect(screen.getByRole("button", { name: /Reconnect/ })).toBeTruthy();
+    expect(screen.getByText("Connected")).toBeTruthy();
+    expect(screen.getByText("Valid")).toBeTruthy();
+    expect(screen.getByText(/Discovered/)).toBeTruthy();
+  });
+
+  it("lists the discovered tools with the count badge", () => {
+    renderView(
+      <McpServerDetailView
+        org={ORG}
+        slug={SLUG}
+        mcpServerState={loadedState(buildConnectedServer())}
+      />,
+    );
+    const toolsTab = screen.getByRole("tab", { name: /Tools/ });
+    expect(toolsTab.textContent).toContain("3");
+    expect(screen.getByText("get_order")).toBeTruthy();
+    expect(screen.getByText("list_orders")).toBeTruthy();
+    expect(screen.getByText("process_return")).toBeTruthy();
+  });
+
+  it("groups the classified policy under Auto-classified with a badge of 1, not 3", () => {
+    renderView(
+      <McpServerDetailView
+        org={ORG}
+        slug={SLUG}
+        defaultCapabilityTab="policies"
+        mcpServerState={loadedState(buildConnectedServer())}
+      />,
+    );
+    const policiesTab = screen.getByRole("tab", { name: /Policies/ });
+    expect(policiesTab.textContent).toContain("1");
+    expect(policiesTab.textContent).not.toContain("3");
+
+    const panel = screen.getByRole("tabpanel");
+    expect(within(panel).getByText(/Auto-classified/)).toBeTruthy();
+    expect(within(panel).getByText("process_return")).toBeTruthy();
+    expect(within(panel).getByText("requires approval")).toBeTruthy();
+  });
+});
+
+describe("McpServerDetailView — tour scroll anchors", () => {
+  it("marks the Connection and Capabilities sections as scroll targets", () => {
+    const { container } = renderView(
+      <McpServerDetailView
+        org={ORG}
+        slug={SLUG}
+        mcpServerState={loadedState(buildBaseServer())}
+      />,
+    );
+    expect(
+      container.querySelector('[data-scroll-target="mcp-connection"]'),
+    ).toBeTruthy();
+    expect(
+      container.querySelector('[data-scroll-target="mcp-capabilities"]'),
+    ).toBeTruthy();
+  });
+});
+
+describe("McpServerDetailView — credential form gating", () => {
+  it("opens the credential form for the declared missing variable when asked", async () => {
+    renderView(
+      <McpServerDetailView
+        org={ORG}
+        slug={SLUG}
+        defaultShowCredentialForm
+        mcpServerState={loadedState(buildBaseServer())}
+      />,
+    );
+    expect(await screen.findByText("Credentials Required")).toBeTruthy();
+    // Scope to the credential form — the Environment section also lists
+    // API_TOKEN as a declaration.
+    const form = screen.getByRole("form", {
+      name: /Configure Credentials Required/i,
+    });
+    // Anchored: the secret input's reveal button is labelled "Show API_TOKEN".
+    expect(within(form).getByLabelText(/^API_TOKEN/)).toBeTruthy();
+  });
+
+  it("keeps the form closed by default", () => {
+    renderView(
+      <McpServerDetailView
+        org={ORG}
+        slug={SLUG}
+        mcpServerState={loadedState(buildBaseServer())}
+      />,
+    );
+    expect(screen.queryByText("Credentials Required")).toBeNull();
+  });
+});

package/src/mcp-server/index.ts

@@ -100,4 +100,17 @@ export type {
   McpServerCreationResult,
 } from "./McpServerCreationWizard.js";
 
+// Individual wizard steps are exported as presentational building blocks:
+// they are fully prop-driven (data, validationError, error, isCreating),
+// which lets platform builders and guided tours/demos render any wizard
+// state — including validation and submit failures — deterministically,
+// without driving the stateful McpServerCreationWizard through user events.
+export { IdentityTransportStep } from "./steps/IdentityTransportStep.js";
+export type { IdentityTransportStepProps } from "./steps/IdentityTransportStep.js";
+export { EnvironmentAuthStep } from "./steps/EnvironmentAuthStep.js";
+export type { EnvironmentAuthStepProps } from "./steps/EnvironmentAuthStep.js";
+export { ReviewStep } from "./steps/ReviewStep.js";
+export type { ReviewStepProps } from "./steps/ReviewStep.js";
+
+export { createInitialMcpServerWizardData } from "./steps/types.js";
 export type { McpServerWizardData } from "./steps/types.js";

package/src/mcp-server/steps/EnvironmentAuthStep.tsx

@@ -16,6 +16,10 @@ export interface EnvironmentAuthStepProps {
  * Both sections are optional. Env vars start expanded if any exist;
  * auth starts collapsed unless already enabled. No validation gate —
  * the user can proceed with zero configuration.
+ *
+ * Fully presentational: form state lives in the `data` prop and edits
+ * flow out through `updateData`, so standalone consumers (embedded
+ * builders, guided tours) can render any configuration state from props.
  */
 export function EnvironmentAuthStep({
   data,

package/src/mcp-server/steps/IdentityTransportStep.tsx

@@ -23,6 +23,12 @@ const SLUG_PATTERN = /^[a-z0-9]+(-[a-z0-9]+)*$/;
  *
  * Transport type uses a radio group (mutually exclusive modes).
  * Conditional fields render based on the selected transport.
+ *
+ * Fully presentational: state lives in the `data` prop and every edit
+ * flows out through `updateData`. Inside `McpServerCreationWizard` that
+ * state comes from `useWizardState`; standalone consumers (embedded
+ * builders, guided tours) can render any form state — including a
+ * `validationError` — deterministically from props.
  */
 export function IdentityTransportStep({
   data,
@@ -195,7 +201,9 @@ export function IdentityTransportStep({
         </fieldset>
       </div>
 
-      <fieldset className="space-y-3">
+      {/* data-scroll-target: guided tours/demos scroll the transport config
+          (the step's decision point) into view within the wizard's scroll area. */}
+      <fieldset className="space-y-3" data-scroll-target="mcp-transport">
         <legend className="text-sm font-medium text-foreground">
           Transport <span className="text-destructive">*</span>
         </legend>

package/src/mcp-server/steps/ReviewStep.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { useMemo } from "react";
+import { useEffect, useMemo, useRef } from "react";
 import { cn } from "@stigmer/theme";
 import { buildMcpServerProto, getUserMessage, serializeManifest } from "@stigmer/sdk";
 import type { McpServerInput } from "@stigmer/sdk";
@@ -20,6 +20,11 @@ export interface ReviewStepProps {
  * Shows a summary card with key configuration details and a full
  * YAML preview of the MCP server that will be created. The "Create"
  * action is in the WizardNav footer, not in this component.
+ *
+ * Fully presentational: renders entirely from props, including the
+ * `isCreating` in-flight state and a submit `error`. Standalone
+ * consumers (embedded builders, guided tours) can therefore depict
+ * any review state — success preview or failure — deterministically.
  */
 export function ReviewStep({
   org,
@@ -27,6 +32,17 @@ export function ReviewStep({
   isCreating,
   error,
 }: ReviewStepProps) {
+  const errorRef = useRef<HTMLDivElement>(null);
+
+  // The error panel renders below the (tall) YAML preview inside the wizard's
+  // internal scroll area, so a failed create could otherwise report itself
+  // out of view. Bring it into view whenever a new error arrives.
+  useEffect(() => {
+    if (error) {
+      errorRef.current?.scrollIntoView({ block: "nearest" });
+    }
+  }, [error]);
+
   const mcpServerInput = useMemo(
     () => buildMcpServerInput(org, data),
     [org, data],
@@ -113,6 +129,7 @@ export function ReviewStep({
       {/* Error display */}
       {error && (
         <div
+          ref={errorRef}
           className="rounded-md border border-destructive bg-muted-faint px-4 py-3"
           role="alert"
         >

package/src/mcp-server/useMcpServerCount.ts

@@ -17,6 +17,8 @@ export interface UseMcpServerCountOptions {
    * @default "org"
    */
   readonly scope?: ResourceListScope;
+  /** Opaque token that forces a recount when its value changes. */
+  readonly refetchToken?: unknown;
 }
 
 /** Return value of {@link useMcpServerCount}. */

package/src/{billing → pricing-governance}/BaselineEditor.tsx

@@ -10,7 +10,7 @@ import {
   type ModelPricingBaseline,
 } from "@stigmer/protos/ai/stigmer/billing/v1/model_pricing_baseline_pb";
 import { Button } from "../button/index.js";
-import { Field, INPUT_CLASSES, RateField } from "./form-primitives.js";
+import { Field, INPUT_CLASSES } from "../internal/form-primitives.js";
 import {
   ZERO,
   dollarsToMicros,
@@ -23,10 +23,43 @@ import {
 // explicit old→new rate confirmation step (a billing-critical edit is never
 // submitted without the operator seeing exactly which rates move).
 //
-// Internal to the billing module: rendered by PricingGovernanceConsole and
-// ModelCatalogPanel, never exported from the barrel.
+// Internal to the pricing-governance module: rendered by
+// PricingGovernanceConsole and ModelCatalogPanel, never exported from the
+// barrel.
 // ---------------------------------------------------------------------------
 
+/**
+ * Dollar-rate input field (decimal keypad, "$ per million tokens").
+ * File-local: this is the editor's own composition of the shared form
+ * primitives, used nowhere else.
+ */
+function RateField({
+  label,
+  value,
+  placeholder,
+  disabled,
+  onChange,
+}: {
+  readonly label: string;
+  readonly value: string;
+  readonly placeholder?: string;
+  readonly disabled: boolean;
+  readonly onChange: (value: string) => void;
+}) {
+  return (
+    <Field label={label}>
+      <input
+        className={INPUT_CLASSES}
+        inputMode="decimal"
+        value={value}
+        onChange={(e) => onChange(e.target.value)}
+        placeholder={placeholder ?? "0.00"}
+        disabled={disabled}
+      />
+    </Field>
+  );
+}
+
 // ---------------------------------------------------------------------------
 // Form model — strings while editing, converted + validated on submit.
 // Validation mirrors the protovalidate rules on ModelPricingBaseline so