@stigmer/react 3.10.0 → 3.11.1-dev.20260812192248

package/src/dashboard/DashboardFailedRuns.tsx

@@ -41,13 +41,13 @@ export const DashboardFailedRuns = memo(function DashboardFailedRuns({
   if (isLoading) {
     return (
       <div
-        className={cn("rounded-lg border border-border bg-card p-4", className)}
+        className={cn("stg:rounded-lg stg:border stg:border-border stg:bg-card stg:p-4", className)}
         aria-busy="true"
       >
-        <div className="mb-3 h-4 w-32 animate-pulse rounded bg-muted" />
-        <div className="space-y-2">
+        <div className="stg:mb-3 stg:h-4 stg:w-32 stg:animate-pulse stg:rounded stg:bg-muted" />
+        <div className="stg:space-y-2">
           {Array.from({ length: 3 }, (_, i) => (
-            <div key={i} className="h-10 animate-pulse rounded bg-muted/50" />
+            <div key={i} className="stg:h-10 stg:animate-pulse stg:rounded stg:bg-muted/50" />
           ))}
         </div>
       </div>
@@ -55,47 +55,47 @@ export const DashboardFailedRuns = memo(function DashboardFailedRuns({
   }
 
   return (
-    <div className={cn("rounded-lg border border-border bg-card p-4", className)}>
-      <h3 className="mb-3 text-sm font-semibold text-foreground">
+    <div className={cn("stg:rounded-lg stg:border stg:border-border stg:bg-card stg:p-4", className)}>
+      <h3 className="stg:mb-3 stg:text-sm stg:font-semibold stg:text-foreground">
         Recent Failures
       </h3>
       {failedRuns.length === 0 ? (
-        <p className="py-6 text-center text-xs text-muted-foreground">
+        <p className="stg:py-6 stg:text-center stg:text-xs stg:text-muted-foreground">
           No recent failures
         </p>
       ) : (
-        <ul className="space-y-1.5" role="list">
+        <ul className="stg:space-y-1.5" role="list">
           {failedRuns.map((run) => (
             <li
               key={run.id}
-              className="flex items-start gap-2 rounded-md px-2 py-1.5 text-xs hover:bg-muted/50"
+              className="stg:flex stg:items-start stg:gap-2 stg:rounded-md stg:px-2 stg:py-1.5 stg:text-xs stg:hover:bg-muted/50"
             >
               <span
                 className={cn(
-                  "mt-0.5 shrink-0 rounded px-1 py-0.5 text-[10px] font-medium leading-none",
+                  "stg:mt-0.5 stg:shrink-0 stg:rounded stg:px-1 stg:py-0.5 stg:text-[10px] stg:font-medium stg:leading-none",
                   run.type === "agent_execution"
-                    ? "bg-primary/10 text-primary"
-                    : "bg-muted text-muted-foreground",
+                    ? "stg:bg-primary/10 stg:text-primary"
+                    : "stg:bg-muted stg:text-muted-foreground",
                 )}
               >
                 {run.type === "agent_execution" ? "Agent" : "Workflow"}
               </span>
-              <div className="min-w-0 flex-1">
-                <p className="truncate font-medium text-foreground">
+              <div className="stg:min-w-0 stg:flex-1">
+                <p className="stg:truncate stg:font-medium stg:text-foreground">
                   {run.name}
                 </p>
                 {run.error && (
-                  <p className="truncate text-muted-foreground">{run.error}</p>
+                  <p className="stg:truncate stg:text-muted-foreground">{run.error}</p>
                 )}
               </div>
-              <span className="shrink-0 text-muted-foreground">
+              <span className="stg:shrink-0 stg:text-muted-foreground">
                 {timeAgo(run.failedAt)}
               </span>
               {onViewClick && (
                 <button
                   type="button"
                   onClick={() => onViewClick(run.id, run.type)}
-                  className="shrink-0 text-primary hover:underline"
+                  className="stg:shrink-0 stg:text-primary stg:hover:underline"
                 >
                   View
                 </button>

package/src/dashboard/DashboardKPICards.tsx

@@ -27,7 +27,7 @@ function formatCost(usd: number): string {
 const STAT_CARDS: readonly StatCardDef[] = [
   {
     label: "Active",
-    valueClass: "text-foreground",
+    valueClass: "stg:text-foreground",
     getValue: (s) => String(s.activeCount),
     getBreakdown: (s) => {
       const ag = s.agent?.activeCount ?? 0;
@@ -38,7 +38,7 @@ const STAT_CARDS: readonly StatCardDef[] = [
   },
   {
     label: "Completed",
-    valueClass: "text-success",
+    valueClass: "stg:text-success",
     getValue: (s) => String(s.completedCount),
     getBreakdown: (s) => {
       const ag = s.agent?.phaseCounts[3] ?? 0;
@@ -49,7 +49,7 @@ const STAT_CARDS: readonly StatCardDef[] = [
   },
   {
     label: "Failed",
-    valueClass: "text-destructive",
+    valueClass: "stg:text-destructive",
     getValue: (s) => String(s.failedCount),
     getBreakdown: (s) => {
       const ag = s.agent?.phaseCounts[4] ?? 0;
@@ -60,7 +60,7 @@ const STAT_CARDS: readonly StatCardDef[] = [
   },
   {
     label: "Total Cost",
-    valueClass: "text-foreground",
+    valueClass: "stg:text-foreground",
     getValue: (s) => formatCost(s.totalCostUsd),
     getBreakdown: () => null,
   },
@@ -84,12 +84,12 @@ export const DashboardKPICards = memo(function DashboardKPICards({
 }: DashboardKPICardsProps) {
   if (isLoading) {
     return (
-      <div className={cn("space-y-3", className)} aria-busy="true">
-        <div className="grid gap-3 sm:grid-cols-2 lg:grid-cols-4">
+      <div className={cn("stg:space-y-3", className)} aria-busy="true">
+        <div className="stg:grid stg:gap-3 stg:sm:grid-cols-2 stg:lg:grid-cols-4">
           {Array.from({ length: 4 }, (_, i) => (
             <div
               key={i}
-              className="h-[72px] animate-pulse rounded-lg border border-border bg-muted/50"
+              className="stg:h-[72px] stg:animate-pulse stg:rounded-lg stg:border stg:border-border stg:bg-muted/50"
             />
           ))}
         </div>
@@ -100,23 +100,24 @@ export const DashboardKPICards = memo(function DashboardKPICards({
   if (!summary) return null;
 
   return (
-    <div className={cn("grid gap-3 sm:grid-cols-2 lg:grid-cols-4", className)}>
+    <div className={cn("stg:grid stg:gap-3 stg:sm:grid-cols-2 stg:lg:grid-cols-4", className)}>
       {STAT_CARDS.map((card) => {
         const breakdown = card.getBreakdown(summary);
+        // No tooltip on the card: the breakdown is rendered visibly below
+        // the value, so the old title only repeated on-screen text.
         return (
           <div
             key={card.label}
-            className="rounded-lg border border-border bg-card px-4 py-3"
-            title={breakdown ?? undefined}
+            className="stg:rounded-lg stg:border stg:border-border stg:bg-card stg:px-4 stg:py-3"
           >
-            <p className="text-xs font-medium text-muted-foreground">
+            <p className="stg:text-xs stg:font-medium stg:text-muted-foreground">
               {card.label}
             </p>
-            <p className={cn("mt-1 text-2xl font-semibold", card.valueClass)}>
+            <p className={cn("stg:mt-1 stg:text-2xl stg:font-semibold", card.valueClass)}>
               {card.getValue(summary)}
             </p>
             {breakdown && (
-              <p className="mt-0.5 text-[10px] text-muted-foreground">
+              <p className="stg:mt-0.5 stg:text-[10px] stg:text-muted-foreground">
                 {breakdown}
               </p>
             )}

package/src/dashboard/OperationalDashboard.tsx

@@ -74,11 +74,11 @@ export const OperationalDashboard = memo(function OperationalDashboard({
   return (
     <section
       aria-label="Platform dashboard"
-      className={cn("space-y-6", className)}
+      className={cn("stg:space-y-6", className)}
     >
       <DashboardKPICards summary={summary} isLoading={summaryLoading} />
 
-      <div className="grid gap-6 lg:grid-cols-2">
+      <div className="stg:grid stg:gap-6 stg:lg:grid-cols-2">
         <PendingApprovalsWidget
           approvals={approvals}
           totalCount={approvalCount}

package/src/datastore/CollectionRecordsBrowser.tsx

@@ -14,6 +14,7 @@ import type {
   CollectionDescription,
   RecordEnvelope,
 } from "@stigmer/protos/ai/stigmer/agentic/datastore/v1/record_io_pb";
+import { TruncatedText } from "../internal/truncated-text.js";
 import { ResourceTable } from "../resource-workbench/components/ResourceTable.js";
 import { ConfirmDialog } from "../resource-detail/ConfirmDialog.js";
 import { useConfirmAction } from "../resource-detail/useConfirmAction.js";
@@ -103,7 +104,7 @@ export function CollectionRecordsBrowser({
 
   if (collections.length === 0) {
     return (
-      <p className={cn("px-3 py-6 text-center text-sm text-muted-foreground", className)}>
+      <p className={cn("stg:px-3 stg:py-6 stg:text-center stg:text-sm stg:text-muted-foreground", className)}>
         This datastore declares no collections.
       </p>
     );
@@ -115,12 +116,12 @@ export function CollectionRecordsBrowser({
   );
 
   return (
-    <div className={cn("flex flex-col gap-3", className)}>
-      <div className="flex flex-wrap items-center gap-2">
-        <label className="flex items-center gap-1.5 text-xs font-medium text-muted-foreground">
+    <div className={cn("stg:flex stg:flex-col stg:gap-3", className)}>
+      <div className="stg:flex stg:flex-wrap stg:items-center stg:gap-2">
+        <label className="stg:flex stg:items-center stg:gap-1.5 stg:text-xs stg:font-medium stg:text-muted-foreground">
           Collection
           <select
-            className={cn(FIELD_INPUT_CLASSES, "w-auto")}
+            className={cn(FIELD_INPUT_CLASSES, "stg:w-auto")}
             value={collectionName}
             onChange={(e) => selectCollection(e.target.value)}
           >
@@ -131,10 +132,10 @@ export function CollectionRecordsBrowser({
             ))}
           </select>
         </label>
-        <label className="flex items-center gap-1.5 text-xs font-medium text-muted-foreground">
+        <label className="stg:flex stg:items-center stg:gap-1.5 stg:text-xs stg:font-medium stg:text-muted-foreground">
           Partition
           <select
-            className={cn(FIELD_INPUT_CLASSES, "w-auto")}
+            className={cn(FIELD_INPUT_CLASSES, "stg:w-auto")}
             value={partition}
             onChange={(e) => selectPartition(e.target.value)}
           >
@@ -305,23 +306,23 @@ function RecordsPane({
   const totalPages = Math.max(records.totalPages, 1);
 
   return (
-    <div className="flex flex-col gap-3">
-      <div className="flex flex-wrap items-center gap-2">
+    <div className="stg:flex stg:flex-col stg:gap-3">
+      <div className="stg:flex stg:flex-wrap stg:items-center stg:gap-2">
         <RecordFilterBuilder
           collection={collection}
           readableFields={readableFields}
           conditions={conditions}
           onChange={onConditionsChange}
-          className="min-w-0 flex-1"
+          className="stg:min-w-0 stg:flex-1"
         />
         {canInsert && (
           <button
             type="button"
             onClick={openInsert}
             className={cn(
-              "shrink-0 rounded-md bg-primary px-3 py-1.5 text-xs font-medium text-primary-foreground",
-              "hover:bg-primary-hover",
-              "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+              "stg:shrink-0 stg:rounded-md stg:bg-primary stg:px-3 stg:py-1.5 stg:text-xs stg:font-medium stg:text-primary-foreground",
+              "stg:hover:bg-primary-hover",
+              "stg:focus-visible:outline-none stg:focus-visible:ring-2 stg:focus-visible:ring-ring",
             )}
           >
             Insert record
@@ -332,23 +333,23 @@ function RecordsPane({
       {records.error ? (
         <div
           role="alert"
-          className="rounded-md border border-destructive bg-card px-3 py-2 text-sm text-destructive"
+          className="stg:rounded-md stg:border stg:border-destructive stg:bg-card stg:px-3 stg:py-2 stg:text-sm stg:text-destructive"
         >
           {getUserMessage(records.error)}
         </div>
       ) : records.isLoading ? (
-        <div className="rounded-lg border border-border px-3 py-6 text-center text-sm text-muted-foreground">
+        <div className="stg:rounded-lg stg:border stg:border-border stg:px-3 stg:py-6 stg:text-center stg:text-sm stg:text-muted-foreground">
           Loading records…
         </div>
       ) : records.records.length === 0 ? (
-        <div className="rounded-lg border border-border px-3 py-6 text-center text-sm text-muted-foreground">
+        <div className="stg:rounded-lg stg:border stg:border-border stg:px-3 stg:py-6 stg:text-center stg:text-sm stg:text-muted-foreground">
           {conditions.length > 0
             ? "No records match the current filters."
             : `No records in “${collection.name}” yet.`}
         </div>
       ) : (
         records.table && (
-          <div className="overflow-x-auto rounded-lg border border-border">
+          <div className="stg:overflow-x-auto stg:rounded-lg stg:border stg:border-border">
             <ResourceTable
               table={records.table}
               aria-label={`Records in ${collection.name}`}
@@ -370,11 +371,11 @@ function RecordsPane({
         )
       )}
 
-      <div className="flex items-center justify-between text-xs text-muted-foreground">
+      <div className="stg:flex stg:items-center stg:justify-between stg:text-xs stg:text-muted-foreground">
         <span>
           {records.total} record{records.total === 1 ? "" : "s"}
         </span>
-        <div className="flex items-center gap-2">
+        <div className="stg:flex stg:items-center stg:gap-2">
           <button
             type="button"
             onClick={() => onPageChange(page - 1)}
@@ -411,10 +412,10 @@ function RecordsPane({
 }
 
 const paginationButtonClass = cn(
-  "rounded-md border border-input bg-background px-2 py-1 text-xs font-medium text-foreground",
-  "hover:bg-accent hover:text-accent-foreground",
-  "focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring",
-  "disabled:pointer-events-none disabled:opacity-50",
+  "stg:rounded-md stg:border stg:border-input stg:bg-background stg:px-2 stg:py-1 stg:text-xs stg:font-medium stg:text-foreground",
+  "stg:hover:bg-accent stg:hover:text-accent-foreground",
+  "stg:focus-visible:outline-none stg:focus-visible:ring-1 stg:focus-visible:ring-ring",
+  "stg:disabled:pointer-events-none stg:disabled:opacity-50",
 );
 
 // ---------------------------------------------------------------------------
@@ -425,13 +426,13 @@ function DeniedPanel({ message }: { readonly message: string }) {
   return (
     <div
       role="status"
-      className="flex flex-col items-center gap-2 rounded-lg border border-border bg-muted px-4 py-8 text-center"
+      className="stg:flex stg:flex-col stg:items-center stg:gap-2 stg:rounded-lg stg:border stg:border-border stg:bg-muted stg:px-4 stg:py-8 stg:text-center"
     >
-      <p className="text-sm font-medium text-foreground">{message}</p>
-      <p className="max-w-md text-xs text-muted-foreground">
+      <p className="stg:text-sm stg:font-medium stg:text-foreground">{message}</p>
+      <p className="stg:max-w-md stg:text-xs stg:text-muted-foreground">
         Record access is granted by the datastore's authorization block. To
         gain access, add a role binding for your principal or set a{" "}
-        <code className="font-mono">default_role</code> in the datastore YAML,
+        <code className="stg:font-mono">default_role</code> in the datastore YAML,
         with the verbs you need granted on this collection.
       </p>
     </div>
@@ -505,18 +506,18 @@ function TypedCell({
   readonly numeric?: boolean;
   readonly mono?: boolean;
 }) {
-  const truncated = value.length > 80 ? `${value.slice(0, 79)}…` : value;
+  // TruncatedText's overflow gating supersedes the old hand-rolled
+  // 80-character slice + conditional title: CSS truncates the cell and the
+  // tooltip opens only when the value is actually clipped.
   return (
-    <span
-      title={value.length > 80 ? value : undefined}
+    <TruncatedText
+      text={value}
       className={cn(
-        "block max-w-xs truncate",
-        numeric && "text-right tabular-nums",
-        mono && "font-mono",
+        "stg:block stg:max-w-xs",
+        numeric && "stg:text-right stg:tabular-nums",
+        mono && "stg:font-mono",
       )}
-    >
-      {truncated}
-    </span>
+    />
   );
 }
 
@@ -538,7 +539,7 @@ function RowActions({
   readonly onDelete: (record: RecordEnvelope) => void;
 }) {
   return (
-    <div className="flex items-center gap-1">
+    <div className="stg:flex stg:items-center stg:gap-1">
       {canUpdate && (
         <button
           type="button"
@@ -554,7 +555,7 @@ function RowActions({
           type="button"
           onClick={() => onDelete(record)}
           aria-label={`Delete record ${record.id}`}
-          className={cn(rowActionClass, "text-destructive hover:text-destructive")}
+          className={cn(rowActionClass, "stg:text-destructive stg:hover:text-destructive")}
         >
           Delete
         </button>
@@ -564,7 +565,7 @@ function RowActions({
 }
 
 const rowActionClass = cn(
-  "rounded-md px-1.5 py-0.5 text-xs font-medium text-muted-foreground",
-  "hover:bg-accent hover:text-foreground",
-  "focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring",
+  "stg:rounded-md stg:px-1.5 stg:py-0.5 stg:text-xs stg:font-medium stg:text-muted-foreground",
+  "stg:hover:bg-accent stg:hover:text-foreground",
+  "stg:focus-visible:outline-none stg:focus-visible:ring-1 stg:focus-visible:ring-ring",
 );

package/src/datastore/CollectionSchemaView.tsx

@@ -37,7 +37,7 @@ export interface CollectionSchemaViewProps {
  */
 export function CollectionSchemaView({ spec, className }: CollectionSchemaViewProps) {
   return (
-    <div className={cn("flex flex-col gap-6", className)}>
+    <div className={cn("stg:flex stg:flex-col stg:gap-6", className)}>
       <AuthorizationSummary authorization={spec.authorization} timezone={spec.timezone} />
       {spec.collections.map((coll) => (
         <CollectionSchema key={coll.name} collection={coll} />
@@ -63,44 +63,44 @@ function AuthorizationSummary({
 
   return (
     <Section title="Authorization">
-      <div className="flex flex-col gap-3 p-3 text-sm">
-        <div className="flex flex-wrap items-center gap-2">
-          <span className="text-xs font-medium text-muted-foreground">Roles</span>
+      <div className="stg:flex stg:flex-col stg:gap-3 stg:p-3 stg:text-sm">
+        <div className="stg:flex stg:flex-wrap stg:items-center stg:gap-2">
+          <span className="stg:text-xs stg:font-medium stg:text-muted-foreground">Roles</span>
           {roles.length === 0 ? (
-            <span className="text-xs text-muted-foreground">none declared</span>
+            <span className="stg:text-xs stg:text-muted-foreground">none declared</span>
           ) : (
             roles.map((r) => (
               <span
                 key={r.name}
-                className="rounded-full bg-muted px-2 py-0.5 text-xs font-medium text-foreground"
+                className="stg:rounded-full stg:bg-muted stg:px-2 stg:py-0.5 stg:text-xs stg:font-medium stg:text-foreground"
               >
                 {r.name}
               </span>
             ))
           )}
         </div>
-        <div className="flex flex-wrap items-center gap-2">
-          <span className="text-xs font-medium text-muted-foreground">Default role</span>
+        <div className="stg:flex stg:flex-wrap stg:items-center stg:gap-2">
+          <span className="stg:text-xs stg:font-medium stg:text-muted-foreground">Default role</span>
           {defaultRole ? (
-            <span className="rounded-full bg-muted px-2 py-0.5 text-xs font-medium text-foreground">
+            <span className="stg:rounded-full stg:bg-muted stg:px-2 stg:py-0.5 stg:text-xs stg:font-medium stg:text-foreground">
               {defaultRole}
             </span>
           ) : (
-            <span className="text-xs text-muted-foreground">
+            <span className="stg:text-xs stg:text-muted-foreground">
               none — unbound callers are denied
             </span>
           )}
         </div>
         {bindings.length > 0 && (
-          <div className="flex flex-col gap-1">
-            <span className="text-xs font-medium text-muted-foreground">
+          <div className="stg:flex stg:flex-col stg:gap-1">
+            <span className="stg:text-xs stg:font-medium stg:text-muted-foreground">
               Bindings ({bindings.length})
             </span>
-            <ul className="flex flex-col gap-0.5">
+            <ul className="stg:flex stg:flex-col stg:gap-0.5">
               {bindings.map((b, i) => (
-                <li key={i} className="text-xs text-foreground">
-                  <code className="font-mono">{formatSubject(b.subject)}</code>
-                  <span className="text-muted-foreground"> → </span>
+                <li key={i} className="stg:text-xs stg:text-foreground">
+                  <code className="stg:font-mono">{formatSubject(b.subject)}</code>
+                  <span className="stg:text-muted-foreground"> → </span>
                   {b.role}
                 </li>
               ))}
@@ -108,9 +108,9 @@ function AuthorizationSummary({
           </div>
         )}
         {timezone && (
-          <div className="flex items-center gap-2">
-            <span className="text-xs font-medium text-muted-foreground">Timezone</span>
-            <span className="text-xs text-foreground">{timezone}</span>
+          <div className="stg:flex stg:items-center stg:gap-2">
+            <span className="stg:text-xs stg:font-medium stg:text-muted-foreground">Timezone</span>
+            <span className="stg:text-xs stg:text-foreground">{timezone}</span>
           </div>
         )}
       </div>
@@ -178,63 +178,63 @@ function CollectionSchema({ collection }: { readonly collection: CollectionDecla
 
   return (
     <Section title={collection.name} count={collection.fields.length}>
-      <div className="flex flex-col">
+      <div className="stg:flex stg:flex-col">
         {collection.description && (
-          <p className="border-b border-border px-3 py-2 text-xs text-muted-foreground">
+          <p className="stg:border-b stg:border-border stg:px-3 stg:py-2 stg:text-xs stg:text-muted-foreground">
             {collection.description}
           </p>
         )}
 
-        <table className="w-full text-left text-xs">
+        <table className="stg:w-full stg:text-left stg:text-xs">
           <thead>
-            <tr className="border-b border-border text-muted-foreground">
-              <th scope="col" className="px-3 py-2 font-medium">Field</th>
-              <th scope="col" className="px-3 py-2 font-medium">Type</th>
-              <th scope="col" className="px-3 py-2 font-medium">Required</th>
-              <th scope="col" className="px-3 py-2 font-medium">Default</th>
-              <th scope="col" className="px-3 py-2 font-medium">Description</th>
+            <tr className="stg:border-b stg:border-border stg:text-muted-foreground">
+              <th scope="col" className="stg:px-3 stg:py-2 stg:font-medium">Field</th>
+              <th scope="col" className="stg:px-3 stg:py-2 stg:font-medium">Type</th>
+              <th scope="col" className="stg:px-3 stg:py-2 stg:font-medium">Required</th>
+              <th scope="col" className="stg:px-3 stg:py-2 stg:font-medium">Default</th>
+              <th scope="col" className="stg:px-3 stg:py-2 stg:font-medium">Description</th>
             </tr>
           </thead>
           <tbody>
             {collection.fields.map((f) => (
-              <tr key={f.name} className="border-b border-border last:border-b-0">
-                <td className="px-3 py-2 font-mono text-foreground">{f.name}</td>
-                <td className="px-3 py-2 text-foreground">
+              <tr key={f.name} className="stg:border-b stg:border-border stg:last:border-b-0">
+                <td className="stg:px-3 stg:py-2 stg:font-mono stg:text-foreground">{f.name}</td>
+                <td className="stg:px-3 stg:py-2 stg:text-foreground">
                   {FieldType[f.type]}
                   {f.enumValues.length > 0 && (
-                    <span className="text-muted-foreground">
+                    <span className="stg:text-muted-foreground">
                       {" "}
                       ({f.enumValues.join(" | ")})
                     </span>
                   )}
                 </td>
-                <td className="px-3 py-2 text-muted-foreground">{f.required ? "yes" : ""}</td>
-                <td className="px-3 py-2 font-mono text-muted-foreground">
+                <td className="stg:px-3 stg:py-2 stg:text-muted-foreground">{f.required ? "yes" : ""}</td>
+                <td className="stg:px-3 stg:py-2 stg:font-mono stg:text-muted-foreground">
                   {f.default !== undefined
                     ? formatFieldValue(f.type, toJson(ValueSchema, f.default))
                     : ""}
                 </td>
-                <td className="px-3 py-2 text-muted-foreground">{f.description}</td>
+                <td className="stg:px-3 stg:py-2 stg:text-muted-foreground">{f.description}</td>
               </tr>
             ))}
           </tbody>
         </table>
 
         {constraints.length > 0 && (
-          <div className="border-t border-border">
-            <h4 className="px-3 pt-2 text-xs font-medium uppercase tracking-wider text-muted-foreground">
+          <div className="stg:border-t stg:border-border">
+            <h4 className="stg:px-3 stg:pt-2 stg:text-xs stg:font-medium stg:uppercase stg:tracking-wider stg:text-muted-foreground">
               Constraints
             </h4>
-            <ul className="flex flex-col gap-1 p-3">
+            <ul className="stg:flex stg:flex-col stg:gap-1 stg:p-3">
               {constraints.map((c) => (
-                <li key={`${c.kind}:${c.name}`} className="flex flex-wrap items-baseline gap-2 text-xs">
-                  <span className="rounded bg-muted px-1.5 py-0.5 font-medium text-muted-foreground">
+                <li key={`${c.kind}:${c.name}`} className="stg:flex stg:flex-wrap stg:items-baseline stg:gap-2 stg:text-xs">
+                  <span className="stg:rounded stg:bg-muted stg:px-1.5 stg:py-0.5 stg:font-medium stg:text-muted-foreground">
                     {c.kind}
                   </span>
-                  <code className="font-mono text-foreground">{c.name}</code>
-                  {c.fields && <span className="text-muted-foreground">({c.fields})</span>}
+                  <code className="stg:font-mono stg:text-foreground">{c.name}</code>
+                  {c.fields && <span className="stg:text-muted-foreground">({c.fields})</span>}
                   {c.message && (
-                    <span className="text-muted-foreground">— “{c.message}”</span>
+                    <span className="stg:text-muted-foreground">— “{c.message}”</span>
                   )}
                 </li>
               ))}

package/src/datastore/DatastoreDetailView.tsx

@@ -87,7 +87,7 @@ export function DatastoreDetailView({
     org: meta?.org,
     slug: meta?.slug,
     description: spec?.description,
-    icon: <DatastoreIcon className="size-6 text-muted-foreground" />,
+    icon: <DatastoreIcon className="stg:size-6 stg:text-muted-foreground" />,
     createdAt: specAudit?.createdAt ? timestampDate(specAudit.createdAt) : null,
     updatedAt: specAudit?.updatedAt ? timestampDate(specAudit.updatedAt) : null,
   };
@@ -107,7 +107,7 @@ export function DatastoreDetailView({
       className={className}
     >
       {tab === "overview" ? (
-        <div className="flex flex-col gap-6">
+        <div className="stg:flex stg:flex-col stg:gap-6">
           {status && <DatastoreSyncReport status={status} />}
           {spec && <CollectionSchemaView spec={spec} />}
         </div>
@@ -132,28 +132,28 @@ export function DatastoreDetailView({
 function LoadingSkeleton({ className }: { readonly className?: string }) {
   return (
     <div
-      className={cn("flex flex-col gap-6", className)}
+      className={cn("stg:flex stg:flex-col stg:gap-6", className)}
       aria-busy="true"
       aria-label="Loading datastore details"
     >
-      <div className="flex items-start gap-3">
-        <div className="mt-1 size-6 shrink-0 animate-pulse rounded bg-muted" />
-        <div className="flex-1 space-y-2">
-          <div className="h-5 w-48 animate-pulse rounded bg-muted" />
-          <div className="h-3 w-64 animate-pulse rounded bg-muted" />
+      <div className="stg:flex stg:items-start stg:gap-3">
+        <div className="stg:mt-1 stg:size-6 stg:shrink-0 stg:animate-pulse stg:rounded stg:bg-muted" />
+        <div className="stg:flex-1 stg:space-y-2">
+          <div className="stg:h-5 stg:w-48 stg:animate-pulse stg:rounded stg:bg-muted" />
+          <div className="stg:h-3 stg:w-64 stg:animate-pulse stg:rounded stg:bg-muted" />
         </div>
       </div>
-      <div className="space-y-2">
-        <div className="h-3 w-28 animate-pulse rounded bg-muted" />
+      <div className="stg:space-y-2">
+        <div className="stg:h-3 stg:w-28 stg:animate-pulse stg:rounded stg:bg-muted" />
         <div
-          className="animate-pulse rounded-lg border border-border bg-muted-faint"
+          className="stg:animate-pulse stg:rounded-lg stg:border stg:border-border stg:bg-muted-faint"
           style={{ height: "160px" }}
         />
       </div>
-      <div className="space-y-2">
-        <div className="h-3 w-20 animate-pulse rounded bg-muted" />
+      <div className="stg:space-y-2">
+        <div className="stg:h-3 stg:w-20 stg:animate-pulse stg:rounded stg:bg-muted" />
         <div
-          className="animate-pulse rounded-lg border border-border bg-muted-faint"
+          className="stg:animate-pulse stg:rounded-lg stg:border stg:border-border stg:bg-muted-faint"
           style={{ height: "240px" }}
         />
       </div>
@@ -165,11 +165,11 @@ function NotFoundState({ className }: { readonly className?: string }) {
   return (
     <div
       role="status"
-      className={cn("flex flex-col items-center gap-2 py-12 text-center", className)}
+      className={cn("stg:flex stg:flex-col stg:items-center stg:gap-2 stg:py-12 stg:text-center", className)}
     >
-      <DatastoreIcon className="size-10 text-muted-foreground-faint" />
-      <p className="text-sm font-medium text-muted-foreground">Datastore not found</p>
-      <p className="text-xs text-muted-foreground-subtle">
+      <DatastoreIcon className="stg:size-10 stg:text-muted-foreground-faint" />
+      <p className="stg:text-sm stg:font-medium stg:text-muted-foreground">Datastore not found</p>
+      <p className="stg:text-xs stg:text-muted-foreground-subtle">
         This datastore doesn&apos;t exist or you don&apos;t have access to it.
       </p>
     </div>