@stigmer/react 3.2.3 → 3.3.0

package/src/billing/ModelCatalogPanel.tsx

@@ -0,0 +1,283 @@
+"use client";
+
+import { useCallback, useMemo, useState } from "react";
+import { cn } from "@stigmer/theme";
+import { getUserMessage, isPermissionDenied } from "@stigmer/sdk";
+import {
+  ModelPricingBaselineStatus,
+  type ModelPricingBaseline,
+} from "@stigmer/protos/ai/stigmer/billing/v1/model_pricing_baseline_pb";
+import { Button } from "../button/index.js";
+import { BaselineEditor } from "./BaselineEditor.js";
+import { RetireConfirm } from "./RetireConfirm.js";
+import { OperatorAccessNotice } from "./OperatorAccessNotice.js";
+import { ZERO, formatRate } from "./pricing-format.js";
+import { useModelPricingBaselines } from "./useModelPricingBaselines.js";
+import { useUpsertModelPricingBaseline } from "./useUpsertModelPricingBaseline.js";
+import { useRetireModelPricingBaseline } from "./useRetireModelPricingBaseline.js";
+
+/** Props for {@link ModelCatalogPanel}. */
+export interface ModelCatalogPanelProps {
+  /** Additional CSS class names. */
+  readonly className?: string;
+}
+
+type EditorState =
+  | { readonly mode: "create" }
+  | { readonly mode: "edit"; readonly baseline: ModelPricingBaseline };
+
+/**
+ * Platform-operator panel for authoring the model registry baseline:
+ * the catalog list with revision history, an add/edit form with an
+ * explicit old-to-new rate confirmation, and typed-confirmation
+ * retirement (DD-004 — this replaces hand edits of
+ * `model-registry.json`).
+ *
+ * Prefer {@link PricingGovernanceConsole} for new surfaces — it
+ * composes this catalog with the governance view into one tabbed
+ * console. This standalone panel remains for consumers embedding just
+ * the catalog editor.
+ *
+ * Requires `can_manage_model_pricing` on `platform:stigmer` — render it
+ * only in operator-scoped surfaces. Rates are raw provider prices
+ * (pre-markup), not customer prices.
+ *
+ * @example
+ * ```tsx
+ * <ModelCatalogPanel />
+ * ```
+ */
+export function ModelCatalogPanel({ className }: ModelCatalogPanelProps) {
+  const [showHistory, setShowHistory] = useState(false);
+  const { baselines, isLoading, error, refetch } = useModelPricingBaselines({
+    includeHistory: showHistory,
+  });
+  const { upsert, isSubmitting: isUpserting, error: upsertError, clearError: clearUpsertError } =
+    useUpsertModelPricingBaseline();
+  const { retire, isSubmitting: isRetiring, error: retireError, clearError: clearRetireError } =
+    useRetireModelPricingBaseline();
+
+  const [editor, setEditor] = useState<EditorState | null>(null);
+  const [retireTarget, setRetireTarget] = useState<ModelPricingBaseline | null>(null);
+
+  const activeBaselines = useMemo(
+    () =>
+      (baselines ?? []).filter(
+        (b) => b.status === ModelPricingBaselineStatus.pricing_baseline_active,
+      ),
+    [baselines],
+  );
+  const historyByKey = useMemo(() => {
+    const map = new Map<string, ModelPricingBaseline[]>();
+    if (!showHistory) return map;
+    for (const b of baselines ?? []) {
+      if (b.status === ModelPricingBaselineStatus.pricing_baseline_active) continue;
+      const key = `${b.modelId}|${b.provider}|${b.harness}`;
+      map.set(key, [...(map.get(key) ?? []), b]);
+    }
+    return map;
+  }, [baselines, showHistory]);
+
+  const closeEditor = useCallback(() => {
+    setEditor(null);
+    clearUpsertError();
+  }, [clearUpsertError]);
+
+  const handleUpsert = useCallback(
+    async (baseline: ModelPricingBaseline, revisionNote: string) => {
+      await upsert({ baseline, revisionNote: revisionNote || undefined });
+      setEditor(null);
+      refetch();
+    },
+    [upsert, refetch],
+  );
+
+  const handleRetire = useCallback(
+    async (target: ModelPricingBaseline, revisionNote: string) => {
+      await retire({
+        modelId: target.modelId,
+        provider: target.provider,
+        harness: target.harness,
+        revisionNote: revisionNote || undefined,
+      });
+      setRetireTarget(null);
+      refetch();
+    },
+    [retire, refetch],
+  );
+
+  if (isLoading) {
+    return (
+      <div className={cn("space-y-2", className)} aria-busy="true">
+        <div className="h-4 w-40 animate-pulse rounded bg-muted-subtle" />
+        {Array.from({ length: 4 }, (_, i) => (
+          <div key={i} className="h-10 animate-pulse rounded-lg 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 <OperatorAccessNotice className={className} />;
+    }
+    return (
+      <p className={cn("text-destructive text-xs", className)} role="alert">
+        {getUserMessage(error)}
+      </p>
+    );
+  }
+
+  return (
+    <section className={cn("space-y-3", className)} aria-label="Model catalog">
+      <div className="flex items-center justify-between">
+        <h3 className="text-xs font-semibold text-foreground">Model Catalog</h3>
+        <div className="flex items-center gap-3">
+          <label className="flex cursor-pointer items-center gap-1.5 text-[11px] text-muted-foreground">
+            <input
+              type="checkbox"
+              checked={showHistory}
+              onChange={(e) => setShowHistory(e.target.checked)}
+            />
+            Show revision history
+          </label>
+          <Button size="sm" onClick={() => setEditor({ mode: "create" })} disabled={editor !== null}>
+            Add model
+          </Button>
+        </div>
+      </div>
+
+      {editor && (
+        <BaselineEditor
+          initial={editor.mode === "edit" ? editor.baseline : null}
+          isSubmitting={isUpserting}
+          submitError={upsertError}
+          onSubmit={handleUpsert}
+          onCancel={closeEditor}
+        />
+      )}
+
+      {retireTarget && (
+        <RetireConfirm
+          target={retireTarget}
+          isSubmitting={isRetiring}
+          submitError={retireError}
+          onConfirm={handleRetire}
+          onCancel={() => {
+            setRetireTarget(null);
+            clearRetireError();
+          }}
+        />
+      )}
+
+      <div className="rounded-lg border border-border bg-card" role="table" aria-label="Baseline catalog">
+        <div
+          role="row"
+          className="grid grid-cols-[2fr_1fr_1fr_1fr_1fr_auto] gap-2 border-b border-border px-3 py-2 text-[11px] font-medium text-muted-foreground"
+        >
+          <span role="columnheader">Model</span>
+          <span role="columnheader">Harness</span>
+          <span role="columnheader" className="text-right">Input</span>
+          <span role="columnheader" className="text-right">Output</span>
+          <span role="columnheader" className="text-right">Variants</span>
+          <span role="columnheader" className="sr-only">Actions</span>
+        </div>
+        {activeBaselines.length === 0 ? (
+          <p className="px-3 py-2 text-xs text-muted-foreground">
+            The catalog is empty — has the baseline seed migration run?
+          </p>
+        ) : (
+          activeBaselines.map((baseline) => (
+            <CatalogRow
+              key={baseline.baselineId}
+              baseline={baseline}
+              history={historyByKey.get(
+                `${baseline.modelId}|${baseline.provider}|${baseline.harness}`,
+              )}
+              disabled={editor !== null || retireTarget !== null}
+              onEdit={() => setEditor({ mode: "edit", baseline })}
+              onRetire={() => setRetireTarget(baseline)}
+            />
+          ))
+        )}
+      </div>
+    </section>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// CatalogRow (internal)
+// ---------------------------------------------------------------------------
+
+function CatalogRow({
+  baseline,
+  history,
+  disabled,
+  onEdit,
+  onRetire,
+}: {
+  readonly baseline: ModelPricingBaseline;
+  readonly history?: readonly ModelPricingBaseline[];
+  readonly disabled: boolean;
+  readonly onEdit: () => void;
+  readonly onRetire: () => void;
+}) {
+  const variantCount = Object.keys(baseline.pricingVariants).length;
+  return (
+    <div className="border-b border-border last:border-b-0">
+      <div
+        role="row"
+        className="grid grid-cols-[2fr_1fr_1fr_1fr_1fr_auto] items-center gap-2 px-3 py-2 text-xs"
+      >
+        <span role="cell" className="min-w-0">
+          <span className="block truncate font-medium text-foreground" title={baseline.modelId}>
+            {baseline.displayName || baseline.modelId}
+          </span>
+          <span className="block truncate text-[11px] text-muted-foreground">
+            {baseline.modelId}
+            {baseline.featured ? " · featured" : ""}
+          </span>
+        </span>
+        <span role="cell" className="text-muted-foreground">
+          {baseline.harness}
+        </span>
+        <span role="cell" className="text-right text-foreground">
+          {formatRate(baseline.pricing?.inputPriceMicrosPerMillion ?? ZERO)}
+        </span>
+        <span role="cell" className="text-right text-foreground">
+          {formatRate(baseline.pricing?.outputPriceMicrosPerMillion ?? ZERO)}
+        </span>
+        <span role="cell" className="text-right text-muted-foreground">
+          {variantCount > 0 ? variantCount : "—"}
+        </span>
+        <span role="cell" className="flex shrink-0 justify-end gap-2">
+          <Button size="sm" variant="outline" disabled={disabled} onClick={onEdit}>
+            Edit
+          </Button>
+          <Button size="sm" variant="outline" disabled={disabled} onClick={onRetire}>
+            Retire
+          </Button>
+        </span>
+      </div>
+      {history && history.length > 0 && (
+        <div className="space-y-1 px-3 pb-2">
+          {history.map((revision) => (
+            <p key={revision.baselineId} className="text-[11px] text-muted-foreground">
+              {revision.status === ModelPricingBaselineStatus.pricing_baseline_retired
+                ? "Retired"
+                : "Superseded"}
+              {" · "}
+              {formatRate(revision.pricing?.inputPriceMicrosPerMillion ?? ZERO)} in /{" "}
+              {formatRate(revision.pricing?.outputPriceMicrosPerMillion ?? ZERO)} out
+              {" · "}
+              {revision.decidedBy}
+              {revision.revisionNote ? ` — ${revision.revisionNote}` : ""}
+            </p>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}

package/src/billing/ModelGovernanceDetail.tsx

@@ -0,0 +1,289 @@
+"use client";
+
+import { cn } from "@stigmer/theme";
+import { ModelPricingBaselineStatus } from "@stigmer/protos/ai/stigmer/billing/v1/model_pricing_baseline_pb";
+import type { PricingBlock } from "@stigmer/protos/ai/stigmer/billing/v1/model_pricing_baseline_pb";
+import { Button } from "../button/index.js";
+import { GovernanceBadge } from "./governance-primitives.js";
+import type { ModelGovernanceRow } from "./useModelGovernanceView.js";
+import {
+  RATE_FIELD_LABELS,
+  ZERO,
+  formatDeltaBp,
+  formatRate,
+} from "./pricing-format.js";
+
+// ---------------------------------------------------------------------------
+// ModelGovernanceDetail — the read-only record of one model: catalog
+// metadata, baseline-vs-effective rate card, variants with wire ids,
+// active overrides with provenance, and revision history. Editing is a
+// separate, deliberate step (Edit / Retire actions in the header).
+// Internal to the billing module.
+// ---------------------------------------------------------------------------
+
+interface RateRow {
+  readonly label: string;
+  readonly baseline: bigint;
+  readonly effective: bigint | null;
+}
+
+/** The five rate fields of a pricing block, in canonical display order. */
+function blockRates(pricing: PricingBlock | undefined): readonly (readonly [string, bigint])[] {
+  return [
+    ["Input", pricing?.inputPriceMicrosPerMillion ?? ZERO],
+    ["Output", pricing?.outputPriceMicrosPerMillion ?? ZERO],
+    ["Cache write", pricing?.cacheWritePriceMicrosPerMillion ?? ZERO],
+    ["Cache read", pricing?.cacheReadPriceMicrosPerMillion ?? ZERO],
+    ["Cursor token rate", pricing?.cursorTokenRateMicrosPerMillion ?? ZERO],
+  ];
+}
+
+export function ModelGovernanceDetail({
+  row,
+  onEdit,
+  onRetire,
+  onBack,
+}: {
+  readonly row: ModelGovernanceRow;
+  readonly onEdit: () => void;
+  readonly onRetire: () => void;
+  readonly onBack: () => void;
+}) {
+  const { baseline, governance } = row;
+  const hasOverrides = (governance?.activeOverrides.length ?? 0) > 0;
+
+  const baseRates: readonly RateRow[] = [
+    {
+      label: "Input",
+      baseline: baseline.pricing?.inputPriceMicrosPerMillion ?? ZERO,
+      effective: governance?.effectiveInputMicrosPerMillion ?? null,
+    },
+    {
+      label: "Output",
+      baseline: baseline.pricing?.outputPriceMicrosPerMillion ?? ZERO,
+      effective: governance?.effectiveOutputMicrosPerMillion ?? null,
+    },
+    {
+      label: "Cache write",
+      baseline: baseline.pricing?.cacheWritePriceMicrosPerMillion ?? ZERO,
+      effective: governance?.effectiveCacheWriteMicrosPerMillion ?? null,
+    },
+    {
+      label: "Cache read",
+      baseline: baseline.pricing?.cacheReadPriceMicrosPerMillion ?? ZERO,
+      effective: governance?.effectiveCacheReadMicrosPerMillion ?? null,
+    },
+    {
+      label: "Cursor token rate",
+      baseline: baseline.pricing?.cursorTokenRateMicrosPerMillion ?? ZERO,
+      effective: governance?.effectiveCursorTokenRateMicrosPerMillion ?? null,
+    },
+  ];
+
+  return (
+    <div className="space-y-4 rounded-lg border border-border bg-card px-4 py-3">
+      {/* ── header: identity + actions ──────────────────────────────────── */}
+      <div className="flex items-start justify-between gap-3">
+        <div className="min-w-0">
+          <h4 className="flex flex-wrap items-center gap-2 text-sm font-semibold text-foreground">
+            {baseline.displayName || baseline.modelId}
+            {governance && (
+              <GovernanceBadge
+                ledgerReconcilable={governance.ledgerReconcilable}
+                hasOverrides={hasOverrides}
+              />
+            )}
+            {baseline.featured && (
+              <span className="rounded bg-accent px-1.5 py-0.5 text-[10px] font-medium text-primary">
+                Featured
+              </span>
+            )}
+          </h4>
+          <p className="mt-0.5 text-[11px] text-muted-foreground">
+            {baseline.modelId} · {baseline.provider} · {baseline.harness}
+            {baseline.shortDescription ? ` — ${baseline.shortDescription}` : ""}
+          </p>
+        </div>
+        <div className="flex shrink-0 gap-2">
+          <Button size="sm" variant="outline" onClick={onBack}>
+            Back
+          </Button>
+          <Button size="sm" onClick={onEdit}>
+            Edit
+          </Button>
+          <Button size="sm" variant="outline" onClick={onRetire}>
+            Retire
+          </Button>
+        </div>
+      </div>
+
+      {/* ── rate card: baseline vs effective ────────────────────────────── */}
+      <section aria-label="Rates">
+        <h5 className="mb-1.5 text-[11px] font-medium uppercase tracking-wider text-muted-foreground">
+          Rates ($ per million tokens)
+        </h5>
+        <div className="rounded-md border border-border-muted" role="table" aria-label="Baseline vs effective rates">
+          <div
+            role="row"
+            className="grid grid-cols-[1.5fr_1fr_1fr] gap-2 border-b border-border-muted px-2.5 py-1.5 text-[11px] font-medium text-muted-foreground"
+          >
+            <span role="columnheader">Rate</span>
+            <span role="columnheader" className="text-right">Baseline</span>
+            <span role="columnheader" className="text-right">Effective</span>
+          </div>
+          {baseRates.map((rate) => {
+            const overridden = rate.effective !== null && rate.effective !== rate.baseline;
+            return (
+              <div
+                key={rate.label}
+                role="row"
+                className="grid grid-cols-[1.5fr_1fr_1fr] gap-2 border-b border-border-muted px-2.5 py-1.5 text-xs last:border-b-0"
+              >
+                <span role="cell" className="text-muted-foreground">{rate.label}</span>
+                <span
+                  role="cell"
+                  className={cn("text-right text-foreground", overridden && "line-through text-muted-foreground")}
+                >
+                  {formatRate(rate.baseline)}
+                </span>
+                <span role="cell" className={cn("text-right text-foreground", overridden && "font-medium")}>
+                  {rate.effective !== null ? formatRate(rate.effective) : "—"}
+                </span>
+              </div>
+            );
+          })}
+        </div>
+      </section>
+
+      {/* ── active overrides with provenance ────────────────────────────── */}
+      {hasOverrides && governance && (
+        <section aria-label="Active pricing overrides">
+          <h5 className="mb-1.5 text-[11px] font-medium uppercase tracking-wider text-muted-foreground">
+            Active Overrides
+          </h5>
+          <div className="space-y-1">
+            {governance.activeOverrides.map((override) => (
+              <p key={override.overrideId} className="text-[11px] text-muted-foreground">
+                <span className="font-medium text-foreground">
+                  {RATE_FIELD_LABELS[override.rateField] ?? "Rate"}
+                  {override.variant ? ` (${override.variant})` : ""}
+                </span>
+                {" → "}
+                {formatRate(override.rateMicrosPerMillion)}
+                {override.provenance && (
+                  <>
+                    {" · ledger observed "}
+                    {formatRate(override.provenance.observedRateMicrosPerMillion)}
+                    {" ("}
+                    {formatDeltaBp(override.provenance.deltaBasisPoints)}
+                    {") over "}
+                    {override.provenance.windowFrom}..{override.provenance.windowTo}
+                  </>
+                )}
+              </p>
+            ))}
+          </div>
+        </section>
+      )}
+
+      {/* ── variants ─────────────────────────────────────────────────────── */}
+      {Object.keys(baseline.pricingVariants).length > 0 && (
+        <section aria-label="Pricing variants">
+          <h5 className="mb-1.5 text-[11px] font-medium uppercase tracking-wider text-muted-foreground">
+            Variants
+          </h5>
+          <div className="space-y-2">
+            {Object.entries(baseline.pricingVariants).map(([key, variant]) => {
+              const variantEntry =
+                row.variantGovernance.find((entry) => entry.variant === key) ?? null;
+              return (
+                <div key={key} className="rounded-md border border-border-muted px-2.5 py-2">
+                  <p className="text-xs font-medium text-foreground">
+                    {key}
+                    {variantEntry && (
+                      <span className="ml-2 align-middle">
+                        <GovernanceBadge
+                          ledgerReconcilable={variantEntry.ledgerReconcilable}
+                          hasOverrides={variantEntry.activeOverrides.length > 0}
+                        />
+                      </span>
+                    )}
+                  </p>
+                  <p className="mt-0.5 text-[11px] text-muted-foreground">
+                    {blockRates(variant.pricing)
+                      .filter(([, micros]) => micros > ZERO)
+                      .map(([label, micros]) => `${label} ${formatRate(micros)}`)
+                      .join(" · ") || "No rates set"}
+                  </p>
+                  {variant.wireIds.length > 0 && (
+                    <p className="mt-0.5 text-[11px] text-muted-foreground">
+                      Wire ids: {variant.wireIds.join(", ")}
+                    </p>
+                  )}
+                </div>
+              );
+            })}
+          </div>
+        </section>
+      )}
+
+      {/* ── catalog metadata ─────────────────────────────────────────────── */}
+      <section aria-label="Catalog metadata">
+        <h5 className="mb-1.5 text-[11px] font-medium uppercase tracking-wider text-muted-foreground">
+          Catalog
+        </h5>
+        <dl className="grid grid-cols-2 gap-x-4 gap-y-1 text-xs sm:grid-cols-3">
+          <MetaItem label="Provider API id" value={baseline.apiModelId || "—"} />
+          <MetaItem label="Speed tier" value={baseline.speedTier || "—"} />
+          <MetaItem label="Cost tier" value={baseline.costTier || "—"} />
+          <MetaItem
+            label="Context window"
+            value={baseline.contextWindowTokens > 0 ? baseline.contextWindowTokens.toLocaleString() : "—"}
+          />
+          <MetaItem
+            label="Max output tokens"
+            value={baseline.maxOutputTokens > 0 ? baseline.maxOutputTokens.toLocaleString() : "—"}
+          />
+          <MetaItem label="Token counter" value={baseline.tokenCounterMethod || "—"} />
+        </dl>
+      </section>
+
+      {/* ── revision history ─────────────────────────────────────────────── */}
+      <section aria-label="Revision history">
+        <h5 className="mb-1.5 text-[11px] font-medium uppercase tracking-wider text-muted-foreground">
+          Revision History
+        </h5>
+        {row.history.length === 0 ? (
+          <p className="text-[11px] text-muted-foreground">
+            No previous revisions — this is the original entry.
+          </p>
+        ) : (
+          <div className="space-y-1">
+            {row.history.map((revision) => (
+              <p key={revision.baselineId} className="text-[11px] text-muted-foreground">
+                {revision.status === ModelPricingBaselineStatus.pricing_baseline_retired
+                  ? "Retired"
+                  : "Superseded"}
+                {" · "}
+                {formatRate(revision.pricing?.inputPriceMicrosPerMillion ?? ZERO)} in /{" "}
+                {formatRate(revision.pricing?.outputPriceMicrosPerMillion ?? ZERO)} out
+                {" · "}
+                {revision.decidedBy}
+                {revision.revisionNote ? ` — ${revision.revisionNote}` : ""}
+              </p>
+            ))}
+          </div>
+        )}
+      </section>
+    </div>
+  );
+}
+
+function MetaItem({ label, value }: { readonly label: string; readonly value: string }) {
+  return (
+    <div>
+      <dt className="text-[11px] text-muted-foreground">{label}</dt>
+      <dd className="text-foreground">{value}</dd>
+    </div>
+  );
+}

package/src/billing/OperatorAccessNotice.tsx

@@ -0,0 +1,32 @@
+"use client";
+
+import { cn } from "@stigmer/theme";
+
+/**
+ * The access-denied state for platform-operator pricing surfaces
+ * (governance + catalog panels). Server-side authorization
+ * (`can_manage_model_pricing` on `platform:stigmer`) is the real gate —
+ * this is the honest, designed face of that denial for anyone who
+ * navigates to an operator route without the permission, instead of a
+ * raw RPC error string.
+ */
+export function OperatorAccessNotice({ className }: { readonly className?: string }) {
+  return (
+    <div
+      className={cn(
+        "rounded-lg border border-border bg-card px-4 py-6 text-center",
+        className,
+      )}
+      role="status"
+    >
+      <p className="text-xs font-semibold text-foreground">
+        Platform operator access required
+      </p>
+      <p className="mx-auto mt-1 max-w-md text-xs text-muted-foreground">
+        Model pricing governance is a Stigmer-internal surface. It needs the
+        platform operator role — organization roles do not grant it. If you
+        believe you should have access, contact a platform operator.
+      </p>
+    </div>
+  );
+}