@stigmer/react 3.10.0 → 3.11.1-dev.20260812192248

package/src/pricing-governance/ModelCatalogPanel.tsx

@@ -8,6 +8,7 @@ import {
   type ModelPricingBaseline,
 } from "@stigmer/protos/ai/stigmer/billing/v1/model_pricing_baseline_pb";
 import { Button } from "../button/index.js";
+import { TruncatedText } from "../internal/truncated-text.js";
 import { BaselineEditor } from "./BaselineEditor.js";
 import { RetireConfirm } from "./RetireConfirm.js";
 import { OperatorAccessNotice } from "./OperatorAccessNotice.js";
@@ -108,10 +109,10 @@ export function ModelCatalogPanel({ className }: ModelCatalogPanelProps) {
 
   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" />
+      <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: 4 }, (_, i) => (
-          <div key={i} className="h-10 animate-pulse rounded-lg bg-muted-subtle" />
+          <div key={i} className="stg:h-10 stg:animate-pulse stg:rounded-lg stg:bg-muted-subtle" />
         ))}
       </div>
     );
@@ -124,18 +125,18 @@ export function ModelCatalogPanel({ className }: ModelCatalogPanelProps) {
       return <OperatorAccessNotice className={className} />;
     }
     return (
-      <p className={cn("text-destructive text-xs", className)} role="alert">
+      <p className={cn("stg:text-destructive stg: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">
+    <section className={cn("stg:space-y-3", className)} aria-label="Model catalog">
+      <div className="stg:flex stg:items-center stg:justify-between">
+        <h3 className="stg:text-xs stg:font-semibold stg:text-foreground">Model Catalog</h3>
+        <div className="stg:flex stg:items-center stg:gap-3">
+          <label className="stg:flex stg:cursor-pointer stg:items-center stg:gap-1.5 stg:text-[11px] stg:text-muted-foreground">
             <input
               type="checkbox"
               checked={showHistory}
@@ -172,20 +173,20 @@ export function ModelCatalogPanel({ className }: ModelCatalogPanelProps) {
         />
       )}
 
-      <div className="rounded-lg border border-border bg-card" role="table" aria-label="Baseline catalog">
+      <div className="stg:rounded-lg stg:border stg:border-border stg: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"
+          className="stg:grid stg:grid-cols-[2fr_1fr_1fr_1fr_1fr_auto] stg:gap-2 stg:border-b stg:border-border stg:px-3 stg:py-2 stg:text-[11px] stg:font-medium stg: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>
+          <span role="columnheader" className="stg:text-right">Input</span>
+          <span role="columnheader" className="stg:text-right">Output</span>
+          <span role="columnheader" className="stg:text-right">Variants</span>
+          <span role="columnheader" className="stg:sr-only">Actions</span>
         </div>
         {activeBaselines.length === 0 ? (
-          <p className="px-3 py-2 text-xs text-muted-foreground">
+          <p className="stg:px-3 stg:py-2 stg:text-xs stg:text-muted-foreground">
             The catalog is empty — has the baseline seed migration run?
           </p>
         ) : (
@@ -226,33 +227,36 @@ function CatalogRow({
 }) {
   const variantCount = Object.keys(baseline.pricingVariants).length;
   return (
-    <div className="border-b border-border last:border-b-0">
+    <div className="stg:border-b stg:border-border stg: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"
+        className="stg:grid stg:grid-cols-[2fr_1fr_1fr_1fr_1fr_auto] stg:items-center stg:gap-2 stg:px-3 stg:py-2 stg:text-xs"
       >
-        <span role="cell" className="min-w-0">
-          <span className="block truncate font-medium text-foreground" title={baseline.modelId}>
+        <span role="cell" className="stg:min-w-0">
+          {/* The display name needs no tooltip: the model id it used to
+              reveal is printed on the line below, which shows its own
+              tooltip when clipped. */}
+          <span className="stg:block stg:truncate stg:font-medium stg:text-foreground">
             {baseline.displayName || baseline.modelId}
           </span>
-          <span className="block truncate text-[11px] text-muted-foreground">
-            {baseline.modelId}
-            {baseline.featured ? " · featured" : ""}
-          </span>
+          <TruncatedText
+            text={`${baseline.modelId}${baseline.featured ? " · featured" : ""}`}
+            className="stg:block stg:text-[11px] stg:text-muted-foreground"
+          />
         </span>
-        <span role="cell" className="text-muted-foreground">
+        <span role="cell" className="stg:text-muted-foreground">
           {baseline.harness}
         </span>
-        <span role="cell" className="text-right text-foreground">
+        <span role="cell" className="stg:text-right stg:text-foreground">
           {formatRate(baseline.pricing?.inputPriceMicrosPerMillion ?? ZERO)}
         </span>
-        <span role="cell" className="text-right text-foreground">
+        <span role="cell" className="stg:text-right stg:text-foreground">
           {formatRate(baseline.pricing?.outputPriceMicrosPerMillion ?? ZERO)}
         </span>
-        <span role="cell" className="text-right text-muted-foreground">
+        <span role="cell" className="stg:text-right stg:text-muted-foreground">
           {variantCount > 0 ? variantCount : "—"}
         </span>
-        <span role="cell" className="flex shrink-0 justify-end gap-2">
+        <span role="cell" className="stg:flex stg:shrink-0 stg:justify-end stg:gap-2">
           <Button size="sm" variant="outline" disabled={disabled} onClick={onEdit}>
             Edit
           </Button>
@@ -262,9 +266,9 @@ function CatalogRow({
         </span>
       </div>
       {history && history.length > 0 && (
-        <div className="space-y-1 px-3 pb-2">
+        <div className="stg:space-y-1 stg:px-3 stg:pb-2">
           {history.map((revision) => (
-            <p key={revision.baselineId} className="text-[11px] text-muted-foreground">
+            <p key={revision.baselineId} className="stg:text-[11px] stg:text-muted-foreground">
               {revision.status === ModelPricingBaselineStatus.pricing_baseline_retired
                 ? "Retired"
                 : "Superseded"}

package/src/pricing-governance/ModelGovernanceDetail.tsx

@@ -81,11 +81,11 @@ export function ModelGovernanceDetail({
   ];
 
   return (
-    <div className="space-y-4 rounded-lg border border-border bg-card px-4 py-3">
+    <div className="stg:space-y-4 stg:rounded-lg stg:border stg:border-border stg:bg-card stg:px-4 stg: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">
+      <div className="stg:flex stg:items-start stg:justify-between stg:gap-3">
+        <div className="stg:min-w-0">
+          <h4 className="stg:flex stg:flex-wrap stg:items-center stg:gap-2 stg:text-sm stg:font-semibold stg:text-foreground">
             {baseline.displayName || baseline.modelId}
             {governance && (
               <GovernanceBadge
@@ -94,17 +94,17 @@ export function ModelGovernanceDetail({
               />
             )}
             {baseline.featured && (
-              <span className="rounded bg-accent px-1.5 py-0.5 text-[10px] font-medium text-primary">
+              <span className="stg:rounded stg:bg-accent stg:px-1.5 stg:py-0.5 stg:text-[10px] stg:font-medium stg:text-primary">
                 Featured
               </span>
             )}
           </h4>
-          <p className="mt-0.5 text-[11px] text-muted-foreground">
+          <p className="stg:mt-0.5 stg:text-[11px] stg:text-muted-foreground">
             {baseline.modelId} · {baseline.provider} · {baseline.harness}
             {baseline.shortDescription ? ` — ${baseline.shortDescription}` : ""}
           </p>
         </div>
-        <div className="flex shrink-0 gap-2">
+        <div className="stg:flex stg:shrink-0 stg:gap-2">
           <Button size="sm" variant="outline" onClick={onBack}>
             Back
           </Button>
@@ -119,17 +119,17 @@ export function ModelGovernanceDetail({
 
       {/* ── rate card: baseline vs effective ────────────────────────────── */}
       <section aria-label="Rates">
-        <h5 className="mb-1.5 text-[11px] font-medium uppercase tracking-wider text-muted-foreground">
+        <h5 className="stg:mb-1.5 stg:text-[11px] stg:font-medium stg:uppercase stg:tracking-wider stg: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 className="stg:rounded-md stg:border stg: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"
+            className="stg:grid stg:grid-cols-[1.5fr_1fr_1fr] stg:gap-2 stg:border-b stg:border-border-muted stg:px-2.5 stg:py-1.5 stg:text-[11px] stg:font-medium stg:text-muted-foreground"
           >
             <span role="columnheader">Rate</span>
-            <span role="columnheader" className="text-right">Baseline</span>
-            <span role="columnheader" className="text-right">Effective</span>
+            <span role="columnheader" className="stg:text-right">Baseline</span>
+            <span role="columnheader" className="stg:text-right">Effective</span>
           </div>
           {baseRates.map((rate) => {
             const overridden = rate.effective !== null && rate.effective !== rate.baseline;
@@ -137,16 +137,16 @@ export function ModelGovernanceDetail({
               <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"
+                className="stg:grid stg:grid-cols-[1.5fr_1fr_1fr] stg:gap-2 stg:border-b stg:border-border-muted stg:px-2.5 stg:py-1.5 stg:text-xs stg:last:border-b-0"
               >
-                <span role="cell" className="text-muted-foreground">{rate.label}</span>
+                <span role="cell" className="stg:text-muted-foreground">{rate.label}</span>
                 <span
                   role="cell"
-                  className={cn("text-right text-foreground", overridden && "line-through text-muted-foreground")}
+                  className={cn("stg:text-right stg:text-foreground", overridden && "stg:line-through stg:text-muted-foreground")}
                 >
                   {formatRate(rate.baseline)}
                 </span>
-                <span role="cell" className={cn("text-right text-foreground", overridden && "font-medium")}>
+                <span role="cell" className={cn("stg:text-right stg:text-foreground", overridden && "stg:font-medium")}>
                   {rate.effective !== null ? formatRate(rate.effective) : "—"}
                 </span>
               </div>
@@ -158,13 +158,13 @@ export function ModelGovernanceDetail({
       {/* ── 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">
+          <h5 className="stg:mb-1.5 stg:text-[11px] stg:font-medium stg:uppercase stg:tracking-wider stg:text-muted-foreground">
             Active Overrides
           </h5>
-          <div className="space-y-1">
+          <div className="stg:space-y-1">
             {governance.activeOverrides.map((override) => (
-              <p key={override.overrideId} className="text-[11px] text-muted-foreground">
-                <span className="font-medium text-foreground">
+              <p key={override.overrideId} className="stg:text-[11px] stg:text-muted-foreground">
+                <span className="stg:font-medium stg:text-foreground">
                   {RATE_FIELD_LABELS[override.rateField] ?? "Rate"}
                   {override.variant ? ` (${override.variant})` : ""}
                 </span>
@@ -189,19 +189,19 @@ export function ModelGovernanceDetail({
       {/* ── 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">
+          <h5 className="stg:mb-1.5 stg:text-[11px] stg:font-medium stg:uppercase stg:tracking-wider stg:text-muted-foreground">
             Variants
           </h5>
-          <div className="space-y-2">
+          <div className="stg: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">
+                <div key={key} className="stg:rounded-md stg:border stg:border-border-muted stg:px-2.5 stg:py-2">
+                  <p className="stg:text-xs stg:font-medium stg:text-foreground">
                     {key}
                     {variantEntry && (
-                      <span className="ml-2 align-middle">
+                      <span className="stg:ml-2 stg:align-middle">
                         <GovernanceBadge
                           ledgerReconcilable={variantEntry.ledgerReconcilable}
                           hasOverrides={variantEntry.activeOverrides.length > 0}
@@ -209,14 +209,14 @@ export function ModelGovernanceDetail({
                       </span>
                     )}
                   </p>
-                  <p className="mt-0.5 text-[11px] text-muted-foreground">
+                  <p className="stg:mt-0.5 stg:text-[11px] stg: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">
+                    <p className="stg:mt-0.5 stg:text-[11px] stg:text-muted-foreground">
                       Wire ids: {variant.wireIds.join(", ")}
                     </p>
                   )}
@@ -229,10 +229,10 @@ export function ModelGovernanceDetail({
 
       {/* ── catalog metadata ─────────────────────────────────────────────── */}
       <section aria-label="Catalog metadata">
-        <h5 className="mb-1.5 text-[11px] font-medium uppercase tracking-wider text-muted-foreground">
+        <h5 className="stg:mb-1.5 stg:text-[11px] stg:font-medium stg:uppercase stg:tracking-wider stg:text-muted-foreground">
           Catalog
         </h5>
-        <dl className="grid grid-cols-2 gap-x-4 gap-y-1 text-xs sm:grid-cols-3">
+        <dl className="stg:grid stg:grid-cols-2 stg:gap-x-4 stg:gap-y-1 stg:text-xs stg: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 || "—"} />
@@ -250,17 +250,17 @@ export function ModelGovernanceDetail({
 
       {/* ── revision history ─────────────────────────────────────────────── */}
       <section aria-label="Revision history">
-        <h5 className="mb-1.5 text-[11px] font-medium uppercase tracking-wider text-muted-foreground">
+        <h5 className="stg:mb-1.5 stg:text-[11px] stg:font-medium stg:uppercase stg:tracking-wider stg:text-muted-foreground">
           Revision History
         </h5>
         {row.history.length === 0 ? (
-          <p className="text-[11px] text-muted-foreground">
+          <p className="stg:text-[11px] stg:text-muted-foreground">
             No previous revisions — this is the original entry.
           </p>
         ) : (
-          <div className="space-y-1">
+          <div className="stg:space-y-1">
             {row.history.map((revision) => (
-              <p key={revision.baselineId} className="text-[11px] text-muted-foreground">
+              <p key={revision.baselineId} className="stg:text-[11px] stg:text-muted-foreground">
                 {revision.status === ModelPricingBaselineStatus.pricing_baseline_retired
                   ? "Retired"
                   : "Superseded"}
@@ -282,8 +282,8 @@ export function ModelGovernanceDetail({
 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>
+      <dt className="stg:text-[11px] stg:text-muted-foreground">{label}</dt>
+      <dd className="stg:text-foreground">{value}</dd>
     </div>
   );
 }

package/src/pricing-governance/OperatorAccessNotice.tsx

@@ -14,15 +14,15 @@ export function OperatorAccessNotice({ className }: { readonly className?: strin
   return (
     <div
       className={cn(
-        "rounded-lg border border-border bg-card px-4 py-6 text-center",
+        "stg:rounded-lg stg:border stg:border-border stg:bg-card stg:px-4 stg:py-6 stg:text-center",
         className,
       )}
       role="status"
     >
-      <p className="text-xs font-semibold text-foreground">
+      <p className="stg:text-xs stg:font-semibold stg:text-foreground">
         Platform operator access required
       </p>
-      <p className="mx-auto mt-1 max-w-md text-xs text-muted-foreground">
+      <p className="stg:mx-auto stg:mt-1 stg:max-w-md stg:text-xs stg: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.

package/src/pricing-governance/PricingGovernanceConsole.tsx

@@ -12,6 +12,7 @@ import { ModelGovernanceDetail } from "./ModelGovernanceDetail.js";
 import { OperatorAccessNotice } from "./OperatorAccessNotice.js";
 import { GovernanceBadge, PendingOverrideCard, RateCell } from "./governance-primitives.js";
 import { INPUT_CLASSES } from "../internal/form-primitives.js";
+import { TruncatedText } from "../internal/truncated-text.js";
 import { ZERO } from "./pricing-format.js";
 import { useDecidePricingOverride } from "./useDecidePricingOverride.js";
 import { useRetireModelPricingBaseline } from "./useRetireModelPricingBaseline.js";
@@ -158,10 +159,10 @@ export function PricingGovernanceConsole({
 
   if (view.isLoading) {
     return (
-      <div className={cn("space-y-2", className)} aria-busy="true">
-        <div className="h-4 w-40 animate-pulse rounded bg-muted-subtle" />
+      <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: 4 }, (_, i) => (
-          <div key={i} className="h-10 animate-pulse rounded-lg bg-muted-subtle" />
+          <div key={i} className="stg:h-10 stg:animate-pulse stg:rounded-lg stg:bg-muted-subtle" />
         ))}
       </div>
     );
@@ -174,7 +175,7 @@ export function PricingGovernanceConsole({
       return <OperatorAccessNotice className={className} />;
     }
     return (
-      <p className={cn("text-destructive text-xs", className)} role="alert">
+      <p className={cn("stg:text-destructive stg:text-xs", className)} role="alert">
         {getUserMessage(view.error)}
       </p>
     );
@@ -290,11 +291,11 @@ function ModelsTab({
   }
 
   return (
-    <div className="space-y-3">
-      <div className="flex items-center justify-between gap-3">
+    <div className="stg:space-y-3">
+      <div className="stg:flex stg:items-center stg:justify-between stg:gap-3">
         <input
           type="search"
-          className={cn(INPUT_CLASSES, "max-w-xs")}
+          className={cn(INPUT_CLASSES, "stg:max-w-xs")}
           value={view.modelQuery}
           onChange={(e) => view.setModelQuery(e.target.value)}
           placeholder="Search models…"
@@ -305,29 +306,29 @@ function ModelsTab({
         </Button>
       </div>
 
-      <div className="rounded-lg border border-border bg-card">
+      <div className="stg:rounded-lg stg:border stg:border-border stg:bg-card">
         {/* Presentational column guide — each row is a self-describing
             button (its full text content is its accessible name), so
             the header is a visual aid, not an ARIA table header. */}
         <div
           aria-hidden="true"
-          className="grid grid-cols-[2fr_1fr_1fr_1fr_0.7fr_1fr] gap-2 border-b border-border px-3 py-2 text-[11px] font-medium text-muted-foreground"
+          className="stg:grid stg:grid-cols-[2fr_1fr_1fr_1fr_0.7fr_1fr] stg:gap-2 stg:border-b stg:border-border stg:px-3 stg:py-2 stg:text-[11px] stg:font-medium stg:text-muted-foreground"
         >
           <span>Model</span>
           <span>Harness</span>
-          <span className="text-right">Input</span>
-          <span className="text-right">Output</span>
-          <span className="text-right">Variants</span>
-          <span className="text-right">Governance</span>
+          <span className="stg:text-right">Input</span>
+          <span className="stg:text-right">Output</span>
+          <span className="stg:text-right">Variants</span>
+          <span className="stg:text-right">Governance</span>
         </div>
         {view.models.length === 0 ? (
-          <p className="px-3 py-2 text-xs text-muted-foreground">
+          <p className="stg:px-3 stg:py-2 stg:text-xs stg:text-muted-foreground">
             {view.modelQuery.trim() !== ""
               ? `No models match "${view.modelQuery.trim()}".`
               : "The catalog is empty — has the baseline seed migration run?"}
           </p>
         ) : (
-          <ul role="list" aria-label="Models" className="m-0 list-none p-0">
+          <ul role="list" aria-label="Models" className="stg:m-0 stg:list-none stg:p-0">
             {view.models.map((row) => (
               <ModelRow key={row.key} row={row} onOpen={() => view.openDetail(row.key)} />
             ))}
@@ -356,26 +357,29 @@ function ModelRow({
   const hasOverrides = (governance?.activeOverrides.length ?? 0) > 0;
 
   return (
-    <li className="border-b border-border last:border-b-0">
+    <li className="stg:border-b stg:border-border stg:last:border-b-0">
       <button
         type="button"
         onClick={onOpen}
         className={cn(
-          "grid w-full grid-cols-[2fr_1fr_1fr_1fr_0.7fr_1fr] items-center gap-2 px-3 py-2 text-left text-xs",
-          "transition-colors hover:bg-accent",
-          "focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring",
+          "stg:grid stg:w-full stg:grid-cols-[2fr_1fr_1fr_1fr_0.7fr_1fr] stg:items-center stg:gap-2 stg:px-3 stg:py-2 stg:text-left stg:text-xs",
+          "stg:transition-colors stg:hover:bg-accent",
+          "stg:focus-visible:outline-none stg:focus-visible:ring-1 stg:focus-visible:ring-ring",
         )}
       >
-        <span className="min-w-0">
-          <span className="block truncate font-medium text-foreground" title={baseline.modelId}>
+        <span className="stg:min-w-0">
+          {/* The display name needs no tooltip: the model id it used to
+              reveal is printed on the line below, which shows its own
+              tooltip when clipped. */}
+          <span className="stg:block stg:truncate stg:font-medium stg:text-foreground">
             {baseline.displayName || baseline.modelId}
           </span>
-          <span className="block truncate text-[11px] text-muted-foreground">
-            {baseline.modelId}
-            {baseline.featured ? " · featured" : ""}
-          </span>
+          <TruncatedText
+            text={`${baseline.modelId}${baseline.featured ? " · featured" : ""}`}
+            className="stg:block stg:text-[11px] stg:text-muted-foreground"
+          />
         </span>
-        <span className="text-muted-foreground">{baseline.harness}</span>
+        <span className="stg:text-muted-foreground">{baseline.harness}</span>
         <RateCell
           baseline={baseline.pricing?.inputPriceMicrosPerMillion ?? ZERO}
           effective={
@@ -392,17 +396,17 @@ function ModelRow({
             ZERO
           }
         />
-        <span className="text-right text-muted-foreground">
+        <span className="stg:text-right stg:text-muted-foreground">
           {variantCount > 0 ? variantCount : "—"}
         </span>
-        <span className="text-right">
+        <span className="stg:text-right">
           {governance ? (
             <GovernanceBadge
               ledgerReconcilable={governance.ledgerReconcilable}
               hasOverrides={hasOverrides}
             />
           ) : (
-            <span className="text-[10px] text-muted-foreground">—</span>
+            <span className="stg:text-[10px] stg:text-muted-foreground">—</span>
           )}
         </span>
       </button>
@@ -426,10 +430,10 @@ function SignOffsTab({
   readonly onDecide: (overrideId: string, approve: boolean) => void;
 }) {
   return (
-    <div className="space-y-3">
+    <div className="stg:space-y-3">
       <input
         type="search"
-        className={cn(INPUT_CLASSES, "max-w-xs")}
+        className={cn(INPUT_CLASSES, "stg:max-w-xs")}
         value={view.signOffQuery}
         onChange={(e) => view.setSignOffQuery(e.target.value)}
         placeholder="Search sign-offs…"
@@ -437,19 +441,19 @@ function SignOffsTab({
       />
 
       {decisionError && (
-        <p className="text-destructive text-xs" role="alert">
+        <p className="stg:text-destructive stg:text-xs" role="alert">
           {getUserMessage(decisionError)}
         </p>
       )}
 
       {view.pendingOverrides.length === 0 ? (
-        <p className="text-xs text-muted-foreground">
+        <p className="stg:text-xs stg:text-muted-foreground">
           {view.signOffQuery.trim() !== ""
             ? `No pending sign-offs match "${view.signOffQuery.trim()}".`
             : "No pricing overrides awaiting a decision."}
         </p>
       ) : (
-        <div className="space-y-2">
+        <div className="stg:space-y-2">
           {view.pendingOverrides.map((override) => (
             <PendingOverrideCard
               key={override.overrideId}