@stigmer/react 3.12.3 → 3.12.4

package/src/provider-standing/ProviderStandingConsole.tsx

@@ -0,0 +1,216 @@
+"use client";
+
+import { cn } from "@stigmer/theme";
+import { getUserMessage, isPermissionDenied } from "@stigmer/sdk";
+import type { Timestamp } from "@bufbuild/protobuf/wkt";
+import type { ProviderStandingEntry } from "@stigmer/protos/ai/stigmer/platform/providerstanding/v1/io_pb";
+import { Button } from "../button/index.js";
+import { ProviderStandingAccessNotice } from "./ProviderStandingAccessNotice.js";
+import { useProviderStanding } from "./useProviderStanding.js";
+
+/** Props for {@link ProviderStandingConsole}. */
+export interface ProviderStandingConsoleProps {
+  /** Additional CSS class names. */
+  readonly className?: string;
+}
+
+// BigInt literals (0n) require an ES2020 target, which not every consuming
+// app's tsconfig guarantees — the constructor form is target-agnostic (the
+// cursor-account-format precedent).
+const ZERO = BigInt(0);
+
+/**
+ * A probe verdict older than this is flagged stale — the probe-silence
+ * alert's UI twin: the probe runs hourly and the alert fires at 3h (the
+ * 60m interval plus generous grace), so the console goes amber on the
+ * same clock operators are paged on.
+ */
+const STALE_AFTER_MS = 3 * 60 * 60 * 1000;
+
+/**
+ * Display metadata for the probe's closed status vocabulary (the
+ * lowercase labels StandingStatus persists). An unknown future label
+ * degrades to a muted badge showing the raw label — the wire contract is
+ * a string precisely so consoles never fail to decode a new status.
+ */
+const STATUS_DISPLAY: Record<string, { label: string; tone: "ok" | "warn" | "muted" }> = {
+  healthy: { label: "Healthy", tone: "ok" },
+  platform_billing: { label: "Billing rejected", tone: "warn" },
+  platform_auth: { label: "Auth rejected", tone: "warn" },
+  unclassified_error: { label: "Erroring", tone: "warn" },
+  unreachable: { label: "Unreachable", tone: "warn" },
+  not_configured: { label: "Not configured", tone: "muted" },
+};
+
+/**
+ * The platform-operator console page for provider standing: one card per
+ * platform LLM provider account with the latest canary-probe verdict —
+ * status, round-trip latency, upstream HTTP status, a bounded error
+ * summary, and when the probe last ran (flagged when stale).
+ *
+ * Read-only by design: the detection core (hourly probe, standing store,
+ * degraded/silence alerts) lives server-side; this surface only makes it
+ * visible where operators already look. Requires
+ * `can_view_provider_standing` on `platform:stigmer` — non-operators see
+ * the designed access notice.
+ *
+ * @example
+ * ```tsx
+ * <ProviderStandingConsole />
+ * ```
+ */
+export function ProviderStandingConsole({ className }: ProviderStandingConsoleProps) {
+  const { standing, isLoading, isRefetching, error, refetch } = useProviderStanding();
+
+  if (isLoading) {
+    return (
+      <div className={cn("stg:space-y-2", className)} aria-busy="true">
+        <div className="stg:h-4 stg:w-40 stg:animate-pulse stg:rounded stg:bg-muted-subtle" />
+        {Array.from({ length: 2 }, (_, i) => (
+          <div key={i} className="stg:h-16 stg:animate-pulse stg:rounded-lg stg:bg-muted-subtle" />
+        ))}
+      </div>
+    );
+  }
+
+  if (error) {
+    // A non-operator landing here is expected (the route is reachable by
+    // URL) — show the designed access notice, not a raw RPC error.
+    if (isPermissionDenied(error)) {
+      return <ProviderStandingAccessNotice className={className} />;
+    }
+    return (
+      <p className={cn("stg:text-destructive stg:text-xs", className)} role="alert">
+        {getUserMessage(error)}
+      </p>
+    );
+  }
+
+  const providers = standing?.providers ?? [];
+
+  return (
+    <div className={cn("stg:space-y-3", className)}>
+      <div className="stg:flex stg:items-center stg:justify-between">
+        <p className="stg:text-xs stg:text-muted-foreground">
+          Latest canary verdict per platform provider account, probed hourly.
+        </p>
+        <Button
+          variant="outline"
+          size="sm"
+          onClick={refetch}
+          disabled={isRefetching}
+        >
+          {isRefetching ? "Refreshing…" : "Refresh"}
+        </Button>
+      </div>
+
+      {providers.length === 0 ? (
+        <p className="stg:rounded-lg stg:border stg:border-border stg:bg-card stg:px-4 stg:py-6 stg:text-center stg:text-xs stg:text-muted-foreground">
+          No probe verdicts recorded yet — the standing probe has not
+          completed a pass since this deployment came up.
+        </p>
+      ) : (
+        <ul className="stg:m-0 stg:grid stg:list-none stg:gap-2 stg:p-0 sm:stg:grid-cols-2">
+          {providers.map((entry) => (
+            <StandingCard key={entry.provider} entry={entry} />
+          ))}
+        </ul>
+      )}
+    </div>
+  );
+}
+
+function StandingCard({ entry }: { readonly entry: ProviderStandingEntry }) {
+  const display = STATUS_DISPLAY[entry.status] ?? {
+    label: entry.status || "unknown",
+    tone: "muted" as const,
+  };
+  const stale = isStale(entry.checkedAt);
+
+  return (
+    <li className="stg:rounded-lg stg:border stg:border-border stg:bg-card stg:p-3">
+      <div className="stg:flex stg:items-center stg:justify-between stg:gap-2">
+        <span className="stg:text-sm stg:font-semibold stg:capitalize stg:text-foreground">
+          {entry.provider}
+        </span>
+        <StatusBadge tone={display.tone} label={display.label} />
+      </div>
+
+      <dl className="stg:mt-2 stg:flex stg:flex-wrap stg:gap-x-4 stg:gap-y-1 stg:text-xs stg:text-muted-foreground">
+        {entry.latencyMs > ZERO && (
+          <div className="stg:flex stg:gap-1">
+            <dt>Latency</dt>
+            <dd className="stg:m-0 stg:text-foreground">{`${entry.latencyMs}ms`}</dd>
+          </div>
+        )}
+        {entry.httpStatus > 0 && (
+          <div className="stg:flex stg:gap-1">
+            <dt>HTTP</dt>
+            <dd className="stg:m-0 stg:text-foreground">{entry.httpStatus}</dd>
+          </div>
+        )}
+        <div className="stg:flex stg:gap-1">
+          <dt>Probed</dt>
+          <dd
+            className={cn(
+              "stg:m-0",
+              stale ? "stg:font-medium stg:text-destructive" : "stg:text-foreground",
+            )}
+          >
+            {formatProbeTime(entry.checkedAt)}
+            {stale ? " — stale" : ""}
+          </dd>
+        </div>
+      </dl>
+
+      {entry.errorSummary && (
+        <p className="stg:mt-2 stg:break-words stg:rounded stg:bg-muted-subtle stg:px-2 stg:py-1 stg:text-[11px] stg:text-muted-foreground">
+          {entry.errorSummary}
+        </p>
+      )}
+    </li>
+  );
+}
+
+/**
+ * Small tonal status badge — the cursor-accounts StateBadge shape, local
+ * to this module (the two operator surfaces evolve independently).
+ */
+function StatusBadge({
+  tone,
+  label,
+}: {
+  readonly tone: "ok" | "warn" | "muted";
+  readonly label: string;
+}) {
+  return (
+    <span
+      className={cn(
+        "stg:inline-block stg:rounded stg:px-1.5 stg:py-0.5 stg:text-[10px] stg:font-medium",
+        tone === "ok" && "stg:bg-accent stg:text-primary",
+        tone === "warn" && "stg:bg-muted-subtle stg:text-destructive",
+        tone === "muted" && "stg:bg-muted-subtle stg:text-muted-foreground",
+      )}
+    >
+      {label}
+    </span>
+  );
+}
+
+function isStale(ts: Timestamp | undefined): boolean {
+  if (!ts || ts.seconds === ZERO) return true;
+  return Date.now() - Number(ts.seconds) * 1000 > STALE_AFTER_MS;
+}
+
+/** Proto Timestamp to a compact local date-time (e.g. "Jul 22, 14:05"). */
+function formatProbeTime(ts: Timestamp | undefined): string {
+  if (!ts || ts.seconds === ZERO) {
+    return "never";
+  }
+  return new Date(Number(ts.seconds) * 1000).toLocaleString(undefined, {
+    month: "short",
+    day: "numeric",
+    hour: "2-digit",
+    minute: "2-digit",
+  });
+}

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/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 () => {