@stigmer/react 3.12.2 → 3.12.4

package/src/provider-standing/__tests__/ProviderStandingConsole.test.tsx

@@ -0,0 +1,143 @@
+import { describe, it, expect, vi, afterEach } from "vitest";
+import { cleanup, render, screen, waitFor } from "@testing-library/react";
+import type { ReactNode } from "react";
+import { create } from "@bufbuild/protobuf";
+import { timestampFromDate } from "@bufbuild/protobuf/wkt";
+import { StigmerError } from "@stigmer/sdk";
+import {
+  ProviderStandingEntrySchema,
+  ProviderStandingViewSchema,
+} from "@stigmer/protos/ai/stigmer/platform/providerstanding/v1/io_pb";
+import { StigmerContext } from "../../context";
+import { FetchCacheContext } from "../../internal/FetchCacheProvider";
+import { ProviderStandingConsole } from "../ProviderStandingConsole";
+
+function createMockStigmer(getStandingView: ReturnType<typeof vi.fn>) {
+  return {
+    providerStanding: { getStandingView },
+  } 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>
+    );
+  };
+}
+
+function entry(overrides: Record<string, unknown> = {}) {
+  return create(ProviderStandingEntrySchema, {
+    provider: "anthropic",
+    status: "healthy",
+    httpStatus: 200,
+    latencyMs: BigInt(842),
+    errorSummary: "",
+    checkedAt: timestampFromDate(new Date()),
+    ...overrides,
+  });
+}
+
+function view(entries: ReturnType<typeof entry>[]) {
+  return create(ProviderStandingViewSchema, { providers: entries });
+}
+
+afterEach(() => {
+  cleanup();
+  vi.restoreAllMocks();
+});
+
+describe("ProviderStandingConsole", () => {
+  it("renders one card per provider with status, latency, and probe time", async () => {
+    const client = createMockStigmer(
+      vi.fn().mockResolvedValue(
+        view([
+          entry(),
+          entry({
+            provider: "openai",
+            status: "platform_billing",
+            httpStatus: 429,
+            latencyMs: BigInt(0),
+            errorSummary: "insufficient_quota: billing hard limit reached",
+          }),
+        ]),
+      ),
+    );
+    render(<ProviderStandingConsole />, { wrapper: wrapper(client) });
+
+    await waitFor(() => {
+      expect(screen.getByText("anthropic")).toBeTruthy();
+    });
+    expect(screen.getByText("Healthy")).toBeTruthy();
+    expect(screen.getByText("842ms")).toBeTruthy();
+
+    expect(screen.getByText("openai")).toBeTruthy();
+    expect(screen.getByText("Billing rejected")).toBeTruthy();
+    expect(screen.getByText("429")).toBeTruthy();
+    expect(
+      screen.getByText("insufficient_quota: billing hard limit reached"),
+    ).toBeTruthy();
+  });
+
+  it("flags a verdict older than the probe-silence window as stale", async () => {
+    const fourHoursAgo = new Date(Date.now() - 4 * 60 * 60 * 1000);
+    const client = createMockStigmer(
+      vi.fn().mockResolvedValue(
+        view([entry({ checkedAt: timestampFromDate(fourHoursAgo) })]),
+      ),
+    );
+    render(<ProviderStandingConsole />, { wrapper: wrapper(client) });
+
+    await waitFor(() => {
+      expect(screen.getByText(/— stale/)).toBeTruthy();
+    });
+  });
+
+  it("degrades an unknown future status label to a muted badge with the raw label", async () => {
+    const client = createMockStigmer(
+      vi.fn().mockResolvedValue(view([entry({ status: "rate_limited" })])),
+    );
+    render(<ProviderStandingConsole />, { wrapper: wrapper(client) });
+
+    await waitFor(() => {
+      expect(screen.getByText("rate_limited")).toBeTruthy();
+    });
+  });
+
+  it("shows the designed access notice on permission denied, not a raw RPC error", async () => {
+    const client = createMockStigmer(
+      vi.fn().mockRejectedValue(
+        new StigmerError("permission-denied", "only platform operators can view provider standing", 7),
+      ),
+    );
+    render(<ProviderStandingConsole />, { wrapper: wrapper(client) });
+
+    await waitFor(() => {
+      expect(screen.getByText("Platform operator access required")).toBeTruthy();
+    });
+  });
+
+  it("shows the error message for non-permission failures", async () => {
+    const client = createMockStigmer(
+      vi.fn().mockRejectedValue(new StigmerError("internal", "standing lookup failed", 13)),
+    );
+    render(<ProviderStandingConsole />, { wrapper: wrapper(client) });
+
+    await waitFor(() => {
+      expect(screen.getByRole("alert")).toBeTruthy();
+    });
+  });
+
+  it("explains the empty state before the probe's first pass", async () => {
+    const client = createMockStigmer(vi.fn().mockResolvedValue(view([])));
+    render(<ProviderStandingConsole />, { wrapper: wrapper(client) });
+
+    await waitFor(() => {
+      expect(screen.getByText(/No probe verdicts recorded yet/)).toBeTruthy();
+    });
+  });
+});

package/src/provider-standing/index.ts

@@ -0,0 +1,8 @@
+// Data hooks
+export { useProviderStanding } from "./useProviderStanding.js";
+export type { UseProviderStandingReturn } from "./useProviderStanding.js";
+
+// Styled components
+export { ProviderStandingConsole } from "./ProviderStandingConsole.js";
+export type { ProviderStandingConsoleProps } from "./ProviderStandingConsole.js";
+export { ProviderStandingAccessNotice } from "./ProviderStandingAccessNotice.js";

package/src/provider-standing/useProviderStanding.ts

@@ -0,0 +1,50 @@
+"use client";
+
+import type { ProviderStandingView } from "@stigmer/protos/ai/stigmer/platform/providerstanding/v1/io_pb";
+import { useStigmer } from "../hooks.js";
+import { useFetch } from "../internal/useFetch.js";
+
+/** Return value of {@link useProviderStanding}. */
+export interface UseProviderStandingReturn {
+  /** The standing view, or `null` before the first successful fetch. */
+  readonly standing: ProviderStandingView | null;
+  /** `true` while the initial fetch is in flight. */
+  readonly isLoading: boolean;
+  /** `true` while a background refetch is in flight and stale data is shown. */
+  readonly isRefetching: boolean;
+  /** Error from the last failed request, or `null` when healthy. */
+  readonly error: Error | null;
+  /** Discard cached data and re-fetch from the server. */
+  readonly refetch: () => void;
+}
+
+/**
+ * Data hook for platform provider standing: the latest canary-probe
+ * verdict per platform LLM provider account (status, latency, bounded
+ * error summary, probe time), recorded hourly by the standing probe.
+ *
+ * Platform-operator surface: the caller needs
+ * `can_view_provider_standing` on `platform:stigmer`. Cloud-only — the
+ * OSS Go server does not implement the controller.
+ *
+ * Pass `enabled: false` to skip fetching (stable no-op).
+ *
+ * @example
+ * ```tsx
+ * const { standing, isLoading, refetch } = useProviderStanding();
+ * ```
+ */
+export function useProviderStanding(
+  options?: { readonly enabled?: boolean },
+): UseProviderStandingReturn {
+  const stigmer = useStigmer();
+  const enabled = options?.enabled ?? true;
+
+  const { data: standing, isLoading, isRefetching, error, refetch } = useFetch(
+    enabled ? () => stigmer.providerStanding.getStandingView() : null,
+    [enabled, stigmer],
+    null as ProviderStandingView | null,
+  );
+
+  return { standing, isLoading, isRefetching, error, refetch };
+}

package/src/provider.tsx

@@ -240,6 +240,18 @@ const EMPTY_REVIEW_RENDERERS: ReviewRenderers = {};
  * column makes it balloon even in a content-sized page), so only
  * the host — which knows its layout — can apply it safely.
  *
+ * **Hosts without a global CSS reset.** SDK components carry their
+ * own per-element resets (lists, fieldsets, form controls) and the
+ * markdown surfaces declare their margins explicitly, so they render
+ * correctly with no Tailwind-preflight-style reset in the host page
+ * (#695). Two deliberate boundaries remain the host's: font-family
+ * inherits from the host (an embedded widget adopting host typography
+ * is correct — set `--stgm-font-sans` to override), and the host's
+ * OWN content inside the provider keeps its user-agent styling — the
+ * SDK never resets elements it did not render. If your reset-less
+ * page composes its own `<p>`/`<h*>` content between SDK components,
+ * their user-agent margins are yours to manage.
+ *
  * Two stable selector hooks are part of the public contract:
  * `data-stgm-root` marks the in-tree container (and only it);
  * `data-stgm-portal` marks the portal container appended to

package/src/resource-creation/StepIndicator.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import { cn } from "@stigmer/theme";
+import { UNSTYLED_LIST } from "../internal/element-resets.js";
 
 /** Props for {@link StepIndicator}. */
 export interface StepIndicatorProps {
@@ -37,7 +38,7 @@ export function StepIndicator({
       aria-label="Wizard progress"
       className={cn("stg:flex stg:flex-col stg:gap-1", className)}
     >
-      <ol className="stg:flex stg:flex-col stg:gap-1" role="list">
+      <ol className={cn(UNSTYLED_LIST, "stg:flex stg:flex-col stg:gap-1")} role="list">
         {steps.map((step, index) => {
           const state = getStepState(index, currentStepIndex);
           const isClickable = state === "completed" && onStepClick != null;

package/src/resource-detail/ConfirmDialog.tsx

@@ -1,7 +1,8 @@
 "use client";
 
-import { useCallback, useEffect, useRef } from "react";
+import { useCallback } from "react";
 import { cn } from "@stigmer/theme";
+import { DialogShell } from "../internal/DialogShell.js";
 import type { ConfirmState } from "./types.js";
 
 export interface ConfirmDialogProps {
@@ -16,9 +17,8 @@ export interface ConfirmDialogProps {
 /**
  * Accessible confirmation dialog for destructive actions.
  *
- * Uses the native `<dialog>` element with `showModal()` for built-in
- * focus trapping, Escape key handling, and backdrop. Styled via
- * `--stgm-*` design tokens.
+ * Renders on {@link DialogShell} (native `<dialog>` + `showModal()` — focus
+ * trapping, Escape, token backdrop). Styled via `--stgm-*` design tokens.
  *
  * Pairs with {@link useConfirmAction} which manages the imperative
  * `confirm()` → Promise pattern.
@@ -51,22 +51,9 @@ export function ConfirmDialog({
   onConfirm,
   onCancel,
 }: ConfirmDialogProps) {
-  const dialogRef = useRef<HTMLDialogElement>(null);
-
-  useEffect(() => {
-    const dialog = dialogRef.current;
-    if (!dialog) return;
-    if (state && !dialog.open) {
-      dialog.showModal();
-    } else if (!state && dialog.open) {
-      dialog.close();
-    }
-  }, [state]);
-
-  const handleDialogCancel = useCallback(
-    (e: React.SyntheticEvent) => {
-      e.preventDefault();
-      onCancel();
+  const handleOpenChange = useCallback(
+    (open: boolean) => {
+      if (!open) onCancel();
     },
     [onCancel],
   );
@@ -76,15 +63,7 @@ export function ConfirmDialog({
   const isDestructive = state.variant === "destructive";
 
   return (
-    <dialog
-      ref={dialogRef}
-      onCancel={handleDialogCancel}
-      className={cn(
-        "stg:fixed stg:inset-0 stg:z-50 stg:m-auto stg:w-full stg:max-w-sm stg:rounded-lg stg:border stg:border-border stg:bg-popover stg:p-0 stg:text-popover-foreground stg:shadow-lg",
-        "stg:backdrop:bg-backdrop",
-        "stg:open:animate-in stg:open:fade-in-0 stg:open:zoom-in-95",
-      )}
-    >
+    <DialogShell open onOpenChange={handleOpenChange} width="sm" aria-label={state.title}>
       <div className="stg:flex stg:flex-col stg:gap-4 stg:p-6">
         <div className="stg:flex stg:flex-col stg:gap-1.5">
           <h3 className="stg:text-base stg:font-semibold stg:text-foreground">
@@ -122,6 +101,6 @@ export function ConfirmDialog({
           </button>
         </div>
       </div>
-    </dialog>
+    </DialogShell>
   );
 }

package/src/schedule/ScheduleDetailView.tsx

@@ -2,6 +2,7 @@
 
 import { useCallback, useEffect, useMemo, useState } from "react";
 import { cn } from "@stigmer/theme";
+import { UNSTYLED_LIST } from "../internal/element-resets.js";
 import { create } from "@bufbuild/protobuf";
 import { timestampDate } from "@bufbuild/protobuf/wkt";
 import type { Schedule } from "@stigmer/protos/ai/stigmer/agentic/schedule/v1/api_pb";
@@ -1356,7 +1357,7 @@ function EnvironmentRefList({
     return <span className="stg:text-sm stg:text-muted-foreground">—</span>;
   }
   return (
-    <ul className="stg:flex stg:flex-col stg:gap-0.5">
+    <ul className={cn(UNSTYLED_LIST, "stg:flex stg:flex-col stg:gap-0.5")}>
       {refs.map((ref, i) => (
         <li
           key={`${ref.org}/${ref.slug}-${i}`}
@@ -1470,7 +1471,7 @@ function WorkspaceSummary({
     return <span className="stg:text-sm stg:text-muted-foreground">—</span>;
   }
   return (
-    <ul className="stg:flex stg:flex-col stg:gap-0.5">
+    <ul className={cn(UNSTYLED_LIST, "stg:flex stg:flex-col stg:gap-0.5")}>
       {entries.map((entry, i) => {
         const git =
           entry.source?.source?.case === "gitRepo"

package/src/schedule/ScheduleRunsTable.tsx

@@ -2,6 +2,7 @@
 
 import { useState } from "react";
 import { cn } from "@stigmer/theme";
+import { UNSTYLED_LIST } from "../internal/element-resets.js";
 import { timestampDate } from "@bufbuild/protobuf/wkt";
 import {
   ScheduleRunOrigin,
@@ -277,7 +278,7 @@ export function ScheduleRunsCompactList({
     return <EmptyRuns />;
   }
   return (
-    <ul className="stg:divide-y stg:divide-border">
+    <ul className={cn(UNSTYLED_LIST, "stg:divide-y stg:divide-border")}>
       {runs.map((run, i) => (
         <CompactRunRow
           key={runKey(run, i)}

package/src/session/__tests__/UsageTab.test.tsx

@@ -0,0 +1,136 @@
+// The #362 console surface: the Usage tab pairs billing's RESOLVED
+// per-execution model (the after-the-fact truth for Cursor Auto runs)
+// with the tier the runner REQUESTED (the streaming summary's audit
+// record that the account default was never left in control).
+
+import { describe, it, expect, afterEach, vi } from "vitest";
+import { render, screen, cleanup } from "@testing-library/react";
+import { create } from "@bufbuild/protobuf";
+import { AgentExecutionSchema } from "@stigmer/protos/ai/stigmer/agentic/agentexecution/v1/api_pb";
+import { ServiceTier } from "@stigmer/protos/ai/stigmer/agentic/agentexecution/v1/enum_pb";
+import type { UseSessionUsageReturn } from "../useSessionUsage.js";
+
+// UsageTab's render contract is what this suite pins; the aggregation
+// itself (billing-report-wins, streaming fallback, breakdown mapping) is
+// useSessionUsage's own suite. Mocking the hook also spares the RPC
+// provider plumbing.
+const usageMock = vi.hoisted(() => vi.fn<() => UseSessionUsageReturn>());
+vi.mock("../useSessionUsage.js", async (importOriginal) => ({
+  ...(await importOriginal<object>()),
+  useSessionUsage: () => usageMock(),
+}));
+
+import { UsageTab } from "../facets/UsageTab.js";
+
+// UsageWidget re-aggregates via the real hook internally — with the module
+// mocked above it sees the same mocked value, which is exactly the intent.
+
+const EMPTY_USAGE: UseSessionUsageReturn = {
+  totalCostUsd: 0,
+  totalTokens: 0,
+  inputTokens: 0,
+  outputTokens: 0,
+  cacheReadTokens: 0,
+  cacheCreationTokens: 0,
+  llmCallCount: 0,
+  modelBreakdown: [],
+  executionBreakdown: [],
+  primaryModel: "",
+  primaryProvider: "",
+  hasUsage: false,
+  isEstimated: false,
+};
+
+function usageWith(overrides: Partial<UseSessionUsageReturn>): UseSessionUsageReturn {
+  return {
+    ...EMPTY_USAGE,
+    hasUsage: true,
+    totalCostUsd: 0.0123,
+    totalTokens: 100,
+    llmCallCount: 1,
+    primaryModel: "composer-2.5",
+    primaryProvider: "cursor",
+    ...overrides,
+  };
+}
+
+function executionWithTier(id: string, tier?: ServiceTier) {
+  return create(AgentExecutionSchema, {
+    metadata: { id },
+    spec: { sessionId: "ses_1" },
+    status: {
+      streamingUsage: {
+        totalTokens: 100n,
+        turnCount: 1,
+        estimatedCostUsd: 0.01,
+        model: "default",
+        ...(tier !== undefined ? { requestedServiceTier: tier } : {}),
+      },
+    },
+  });
+}
+
+afterEach(cleanup);
+
+describe("UsageTab (#362 model provenance)", () => {
+  it("shows the empty state when no usage exists", () => {
+    usageMock.mockReturnValue(EMPTY_USAGE);
+    render(<UsageTab executions={[]} />);
+    expect(screen.getByText(/No usage data yet/)).toBeTruthy();
+  });
+
+  it("renders the billing-resolved model per run with its cost — the Auto forensics view", () => {
+    usageMock.mockReturnValue(usageWith({
+      executionBreakdown: [{
+        executionId: "exe_1",
+        resolvedModel: "cursor-grok-4.5-high-fast",
+        billableCostUsd: 0.0123,
+        isEstimated: false,
+      }],
+    }));
+
+    render(<UsageTab executions={[executionWithTier("exe_1", ServiceTier.STANDARD)]} />);
+
+    expect(screen.getByText(/cursor-grok-4\.5-high-fast/)).toBeTruthy();
+    expect(screen.getByRole("list", { name: "Per-execution model and tier" })).toBeTruthy();
+  });
+
+  it("pairs the run with the tier the runner requested", () => {
+    usageMock.mockReturnValue(usageWith({
+      executionBreakdown: [{
+        executionId: "exe_1",
+        resolvedModel: "composer-2.5",
+        billableCostUsd: 0.0123,
+        isEstimated: false,
+      }],
+    }));
+
+    render(<UsageTab executions={[executionWithTier("exe_1", ServiceTier.FAST)]} />);
+
+    expect(screen.getByText("fast requested")).toBeTruthy();
+  });
+
+  it("omits the tier chip for executions that predate the tier attribute", () => {
+    usageMock.mockReturnValue(usageWith({
+      executionBreakdown: [{
+        executionId: "exe_0",
+        resolvedModel: "claude-haiku-4.5",
+        billableCostUsd: 0.0042,
+        isEstimated: false,
+      }],
+    }));
+
+    render(<UsageTab executions={[executionWithTier("exe_0")]} />);
+
+    expect(screen.getByText(/claude-haiku-4\.5/)).toBeTruthy();
+    expect(screen.queryByText(/requested/)).toBeNull();
+  });
+
+  it("renders no provenance list before any billing record lands", () => {
+    usageMock.mockReturnValue(usageWith({ executionBreakdown: [] }));
+
+    render(<UsageTab executions={[executionWithTier("exe_1", ServiceTier.STANDARD)]} />);
+
+    expect(screen.queryByRole("list", { name: "Per-execution model and tier" })).toBeNull();
+  });
+});

package/src/session/__tests__/useSessionUsage.test.ts

@@ -53,6 +53,14 @@ function authoritativeReport(billableMicros: bigint): GetSessionUsageReportOutpu
       primaryProvider: "cursor",
     },
     modelBreakdown: [],
+    executions: [
+      {
+        executionId: "exe_1",
+        primaryModel: "claude-sonnet-4-6",
+        billableCostMicros: billableMicros,
+        isEstimated: false,
+      },
+    ],
     isEstimated: false,
   } as unknown as GetSessionUsageReportOutput;
 }
@@ -71,6 +79,7 @@ function emptyReport(): GetSessionUsageReportOutput {
       primaryProvider: "",
     },
     modelBreakdown: [],
+    executions: [],
     isEstimated: true,
   } as unknown as GetSessionUsageReportOutput;
 }
@@ -122,6 +131,16 @@ describe("useSessionUsage", () => {
     // 60_000 micros = $0.06 billable, replacing the $0.05 estimate.
     expect(result.current.totalCostUsd).toBeCloseTo(0.06);
     expect(result.current.llmCallCount).toBe(2);
+    // The #362 provenance rows ride the same report: billing-RESOLVED
+    // model per execution, never the runner's requested echo.
+    expect(result.current.executionBreakdown).toEqual([
+      {
+        executionId: "exe_1",
+        resolvedModel: "claude-sonnet-4-6",
+        billableCostUsd: 0.06,
+        isEstimated: false,
+      },
+    ]);
   });
 
   it("polls the usage report while an execution is in progress", async () => {

package/src/session/facets/ArtifactsTab.tsx

@@ -7,6 +7,7 @@ import {
   artifactKey,
   type SessionArtifactEntry,
 } from "../useSessionArtifacts.js";
+import { UNSTYLED_LIST } from "../../internal/element-resets.js";
 import { ArtifactPreviewModal } from "../../execution/ArtifactPreviewModal.js";
 import { ArtifactRow } from "../../execution/ArtifactRow.js";
 import { isPlanArtifact } from "../../library/detect-plan-artifact.js";
@@ -123,7 +124,7 @@ export function ArtifactsTab({
 
   return (
     <>
-      <ul role="list" className="stg:flex stg:flex-col">
+      <ul role="list" className={`${UNSTYLED_LIST} stg:flex stg:flex-col`}>
         {artifacts.map((entry) => (
           <ArtifactRow
             key={artifactKey(entry.artifact)}

package/src/session/facets/ChangesTab.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import type { AgentExecution } from "@stigmer/protos/ai/stigmer/agentic/agentexecution/v1/api_pb";
+import { UNSTYLED_LIST } from "../../internal/element-resets.js";
 import { useSessionWriteBacks } from "../useSessionWriteBacks.js";
 import { WriteBackCard } from "../../execution/WriteBackCard.js";
 
@@ -48,7 +49,7 @@ export function ChangesTab({
     // Dense row groups matching the Artifacts facet's list — gap separates
     // entries only in multi-repo sessions (single-entry lists stay seamless).
     return (
-      <ul role="list" className="stg:flex stg:flex-col stg:gap-3">
+      <ul role="list" className={`${UNSTYLED_LIST} stg:flex stg:flex-col stg:gap-3`}>
         {writeBacks.map((entry) => (
           <li key={entry.writeBack.workspaceEntryName}>
             <WriteBackCard writeBack={entry.writeBack} />