@stigmer/react 3.9.0 → 3.11.0

package/src/execution/ArtifactRowView.tsx

@@ -58,35 +58,35 @@ export function ArtifactRowView({
   className,
 }: ArtifactRowViewProps) {
   return (
-    <li className={cn("group flex items-stretch", className)}>
+    <li className={cn("stg:group stg:flex stg:items-stretch", className)}>
       <button
         type="button"
         onClick={onOpen}
         onDoubleClick={onActivate}
         title={item.tooltip}
         className={cn(
-          "flex min-w-0 flex-1 items-center gap-2 px-2 py-1 text-left text-xs text-muted-foreground transition-colors",
-          "hover:bg-muted hover:text-foreground",
-          "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring",
+          "stg:flex stg:min-w-0 stg:flex-1 stg:items-center stg:gap-2 stg:px-2 stg:py-1 stg:text-left stg:text-xs stg:text-muted-foreground stg:transition-colors",
+          "stg:hover:bg-muted stg:hover:text-foreground",
+          "stg:focus-visible:outline-none stg:focus-visible:ring-2 stg:focus-visible:ring-inset stg:focus-visible:ring-ring",
         )}
       >
-        <span className="shrink-0 text-muted-foreground">
+        <span className="stg:shrink-0 stg:text-muted-foreground">
           {item.isDirectory ? (
             <FolderTypeIcon open={false} />
           ) : (
             <FileTypeIcon fileName={item.name} />
           )}
         </span>
-        <span className="min-w-0 flex-1 truncate text-foreground">
+        <span className="stg:min-w-0 stg:flex-1 stg:truncate stg:text-foreground">
           {item.name}
           {item.isDirectory && "/"}
           {item.subtitlePath && (
-            <span className="ml-1.5 text-[0.65rem] text-muted-foreground">
+            <span className="stg:ml-1.5 stg:text-[0.65rem] stg:text-muted-foreground">
               {item.subtitlePath}
             </span>
           )}
         </span>
-        <span className="shrink-0 tabular-nums text-[0.65rem] text-muted-foreground-faint">
+        <span className="stg:shrink-0 stg:tabular-nums stg:text-[0.65rem] stg:text-muted-foreground-faint">
           {formatArtifactSize(item.sizeBytes)}
         </span>
       </button>
@@ -99,10 +99,10 @@ export function ArtifactRowView({
         }
         title={item.isDirectory ? "Download ZIP" : "Download"}
         className={cn(
-          "flex shrink-0 items-center px-2 text-muted-foreground opacity-0 transition-opacity",
-          "group-hover:opacity-100 focus-visible:opacity-100",
-          "hover:text-foreground disabled:opacity-50",
-          "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring",
+          "stg:flex stg:shrink-0 stg:items-center stg:px-2 stg:text-muted-foreground stg:opacity-0 stg:transition-opacity",
+          "stg:group-hover:opacity-100 stg:focus-visible:opacity-100",
+          "stg:hover:text-foreground stg:disabled:opacity-50",
+          "stg:focus-visible:outline-none stg:focus-visible:ring-2 stg:focus-visible:ring-inset stg:focus-visible:ring-ring",
         )}
       >
         <DownloadIcon />
@@ -126,7 +126,7 @@ function DownloadIcon() {
       strokeWidth="1.5"
       strokeLinecap="round"
       strokeLinejoin="round"
-      className="shrink-0"
+      className="stg:shrink-0"
       aria-hidden="true"
     >
       <path d="M6 1.5V8.5" />

package/src/execution/ArtifactsWidget.tsx

@@ -109,14 +109,14 @@ export function ArtifactsWidget({
 
   return (
     <section aria-label="Artifacts" className={cn(className)}>
-      <div className="mb-2 flex items-center gap-2">
-        <h3 className="text-sm font-medium text-foreground">Artifacts</h3>
-        <span className="inline-flex min-w-[1.25rem] items-center justify-center rounded-full bg-muted px-1.5 text-xs tabular-nums text-muted-foreground">
+      <div className="stg:mb-2 stg:flex stg:items-center stg:gap-2">
+        <h3 className="stg:text-sm stg:font-medium stg:text-foreground">Artifacts</h3>
+        <span className="stg:inline-flex stg:min-w-[1.25rem] stg:items-center stg:justify-center stg:rounded-full stg:bg-muted stg:px-1.5 stg:text-xs stg:tabular-nums stg:text-muted-foreground">
           {artifactCount}
         </span>
       </div>
 
-      <ul role="list" className="flex flex-col">
+      <ul role="list" className="stg:flex stg:flex-col">
         {artifacts.map((entry) => (
           <ArtifactRow
             key={artifactKey(entry.artifact)}

package/src/execution/ContextGauge.tsx

@@ -28,15 +28,15 @@ export interface ContextGaugeProps {
 }
 
 const HEALTH_BAR_COLORS: Record<ContextHealth, string> = {
-  healthy: "bg-success",
-  warning: "bg-warning",
-  critical: "bg-destructive",
+  healthy: "stg:bg-success",
+  warning: "stg:bg-warning",
+  critical: "stg:bg-destructive",
 };
 
 const HEALTH_TEXT_COLORS: Record<ContextHealth, string> = {
-  healthy: "text-success",
-  warning: "text-warning",
-  critical: "text-destructive",
+  healthy: "stg:text-success",
+  warning: "stg:text-warning",
+  critical: "stg:text-destructive",
 };
 
 const HEALTH_LABELS: Record<ContextHealth, string> = {
@@ -108,12 +108,12 @@ const CompactGauge = memo(function CompactGauge({
       aria-valuemin={0}
       aria-valuemax={ctx.contextWindowLimit}
       aria-valuetext={`${Math.round(ctx.utilizationPercent)}% context used`}
-      className={cn("flex items-center gap-2", className)}
+      className={cn("stg:flex stg:items-center stg:gap-2", className)}
     >
-      <div className="h-1.5 flex-1 overflow-hidden rounded-full bg-muted">
+      <div className="stg:h-1.5 stg:flex-1 stg:overflow-hidden stg:rounded-full stg:bg-muted">
         <div
           className={cn(
-            "h-full rounded-full transition-colors",
+            "stg:h-full stg:rounded-full stg:transition-colors",
             HEALTH_BAR_COLORS[ctx.health],
           )}
           style={{ width: `${barPercent}%` }}
@@ -121,7 +121,7 @@ const CompactGauge = memo(function CompactGauge({
       </div>
       <span
         className={cn(
-          "shrink-0 text-xs tabular-nums",
+          "stg:shrink-0 stg:text-xs stg:tabular-nums",
           HEALTH_TEXT_COLORS[ctx.health],
         )}
       >
@@ -152,16 +152,16 @@ const FullGauge = memo(function FullGauge({
       aria-valuemin={0}
       aria-valuemax={ctx.contextWindowLimit}
       aria-valuetext={`${formatCompactTokens(ctx.currentTokenCount)} of ${formatCompactTokens(ctx.contextWindowLimit)} tokens used, ${Math.round(ctx.utilizationPercent)}%`}
-      className={cn("flex flex-col gap-1.5", className)}
+      className={cn("stg:flex stg:flex-col stg:gap-1.5", className)}
     >
       {/* Header: label + percentage */}
-      <div className="flex items-baseline justify-between">
-        <span className="text-xs font-medium text-foreground">
+      <div className="stg:flex stg:items-baseline stg:justify-between">
+        <span className="stg:text-xs stg:font-medium stg:text-foreground">
           Context
         </span>
         <span
           className={cn(
-            "text-xs tabular-nums font-medium",
+            "stg:text-xs stg:tabular-nums stg:font-medium",
             HEALTH_TEXT_COLORS[ctx.health],
           )}
         >
@@ -170,11 +170,11 @@ const FullGauge = memo(function FullGauge({
       </div>
 
       {/* Progress bar with threshold marker */}
-      <div className="relative">
-        <div className="h-2 overflow-hidden rounded-full bg-muted">
+      <div className="stg:relative">
+        <div className="stg:h-2 stg:overflow-hidden stg:rounded-full stg:bg-muted">
           <div
             className={cn(
-              "h-full rounded-full transition-colors",
+              "stg:h-full stg:rounded-full stg:transition-colors",
               HEALTH_BAR_COLORS[ctx.health],
             )}
             style={{ width: `${barPercent}%` }}
@@ -182,7 +182,7 @@ const FullGauge = memo(function FullGauge({
         </div>
         {triggerPercent > 0 && triggerPercent < 100 && (
           <div
-            className="absolute top-0 h-2 w-px bg-muted-foreground/40"
+            className="stg:absolute stg:top-0 stg:h-2 stg:w-px stg:bg-muted-foreground/40"
             style={{ left: `${triggerPercent}%` }}
             aria-hidden="true"
           />
@@ -190,25 +190,25 @@ const FullGauge = memo(function FullGauge({
       </div>
 
       {/* Token counts */}
-      <div className="text-xs tabular-nums text-muted-foreground">
+      <div className="stg:text-xs stg:tabular-nums stg:text-muted-foreground">
         {formatCompactTokens(ctx.currentTokenCount)} /{" "}
         {formatCompactTokens(ctx.contextWindowLimit)} tokens
       </div>
 
       {/* Health status + summarization count */}
-      <div className="flex items-center gap-1.5">
+      <div className="stg:flex stg:items-center stg:gap-1.5">
         <span
           className={cn(
-            "inline-flex h-1.5 w-1.5 rounded-full",
+            "stg:inline-flex stg:h-1.5 stg:w-1.5 stg:rounded-full",
             HEALTH_BAR_COLORS[ctx.health],
           )}
           aria-hidden="true"
         />
-        <span className="text-xs text-muted-foreground">
+        <span className="stg:text-xs stg:text-muted-foreground">
           {HEALTH_LABELS[ctx.health]}
         </span>
         {ctx.summarizationEvents.length > 0 && (
-          <span className="text-xs text-muted-foreground">
+          <span className="stg:text-xs stg:text-muted-foreground">
             · {ctx.summarizationEvents.length}{" "}
             {ctx.summarizationEvents.length === 1
               ? "summarization"
@@ -234,7 +234,7 @@ function SummarizationSummary({
   if (!latest) return null;
 
   return (
-    <div className="pl-3 text-xs tabular-nums text-muted-foreground">
+    <div className="stg:pl-3 stg:text-xs stg:tabular-nums stg:text-muted-foreground">
       Last: {formatTokenCount(latest.tokensBefore)} →{" "}
       {formatTokenCount(latest.tokensAfter)} tokens (
       {Math.round(latest.compressionRatio * 100)}% reduction)

package/src/execution/EmptyChangeNotice.tsx

@@ -52,7 +52,7 @@ export function EmptyChangeNotice({ kind, className }: EmptyChangeNoticeProps) {
       role="status"
       data-cursor-target="empty-change-notice"
       className={cn(
-        "rounded-md border border-border bg-muted-subtle px-3 py-2 text-xs text-muted-foreground",
+        "stg:rounded-md stg:border stg:border-border stg:bg-muted-subtle stg:px-3 stg:py-2 stg:text-xs stg:text-muted-foreground",
         className,
       )}
     >

package/src/execution/ExecutionPhaseBadge.tsx

@@ -24,7 +24,7 @@ const PHASE_CONFIG: ReadonlyMap<ExecutionPhase, PhaseConfig> = new Map([
     {
       label: "Pending",
       icon: PulseDotIcon,
-      colorClass: "text-muted-foreground",
+      colorClass: "stg:text-muted-foreground",
     },
   ],
   [
@@ -32,7 +32,7 @@ const PHASE_CONFIG: ReadonlyMap<ExecutionPhase, PhaseConfig> = new Map([
     {
       label: "Running",
       icon: PulseDotIcon,
-      colorClass: "text-foreground",
+      colorClass: "stg:text-foreground",
     },
   ],
   [
@@ -40,7 +40,7 @@ const PHASE_CONFIG: ReadonlyMap<ExecutionPhase, PhaseConfig> = new Map([
     {
       label: "Completed",
       icon: CheckIcon,
-      colorClass: "text-success",
+      colorClass: "stg:text-success",
     },
   ],
   [
@@ -48,7 +48,7 @@ const PHASE_CONFIG: ReadonlyMap<ExecutionPhase, PhaseConfig> = new Map([
     {
       label: "Failed",
       icon: XIcon,
-      colorClass: "text-destructive",
+      colorClass: "stg:text-destructive",
     },
   ],
   [
@@ -56,7 +56,7 @@ const PHASE_CONFIG: ReadonlyMap<ExecutionPhase, PhaseConfig> = new Map([
     {
       label: "Cancelled",
       icon: XIcon,
-      colorClass: "text-muted-foreground",
+      colorClass: "stg:text-muted-foreground",
     },
   ],
   [
@@ -64,7 +64,7 @@ const PHASE_CONFIG: ReadonlyMap<ExecutionPhase, PhaseConfig> = new Map([
     {
       label: "Terminated",
       icon: StopIcon,
-      colorClass: "text-destructive",
+      colorClass: "stg:text-destructive",
     },
   ],
   [
@@ -72,7 +72,7 @@ const PHASE_CONFIG: ReadonlyMap<ExecutionPhase, PhaseConfig> = new Map([
     {
       label: "Waiting for approval",
       icon: ClockIcon,
-      colorClass: "text-warning",
+      colorClass: "stg:text-warning",
     },
   ],
   [
@@ -80,7 +80,7 @@ const PHASE_CONFIG: ReadonlyMap<ExecutionPhase, PhaseConfig> = new Map([
     {
       label: "Paused",
       icon: PauseIcon,
-      colorClass: "text-muted-foreground",
+      colorClass: "stg:text-muted-foreground",
     },
   ],
 ]);
@@ -112,7 +112,7 @@ export const ExecutionPhaseBadge = memo(function ExecutionPhaseBadge({
       role="status"
       aria-label={config.label}
       className={cn(
-        "inline-flex items-center gap-1.5 text-xs font-medium",
+        "stg:inline-flex stg:items-center stg:gap-1.5 stg:text-xs stg:font-medium",
         config.colorClass,
         className,
       )}
@@ -140,9 +140,9 @@ function DotIcon() {
 
 function PulseDotIcon() {
   return (
-    <span className="relative flex h-2 w-2">
-      <span className="absolute inline-flex h-full w-full animate-ping rounded-full bg-current opacity-75" />
-      <span className="relative inline-flex h-2 w-2 rounded-full bg-current" />
+    <span className="stg:relative stg:flex stg:h-2 stg:w-2">
+      <span className="stg:absolute stg:inline-flex stg:h-full stg:w-full stg:animate-ping stg:rounded-full stg:bg-current stg:opacity-75" />
+      <span className="stg:relative stg:inline-flex stg:h-2 stg:w-2 stg:rounded-full stg:bg-current" />
     </span>
   );
 }

package/src/execution/ExecutionProgress.tsx

@@ -64,7 +64,7 @@ export function ExecutionProgress({
 
   return (
     <div
-      className={cn("flex flex-col gap-2", className)}
+      className={cn("stg:flex stg:flex-col stg:gap-2", className)}
       role="region"
       aria-label="Execution progress"
     >
@@ -72,7 +72,7 @@ export function ExecutionProgress({
       {error && (
         <p
           role="alert"
-          className="text-xs whitespace-pre-wrap break-words text-destructive"
+          className="stg:text-xs stg:whitespace-pre-wrap stg:break-words stg:text-destructive"
         >
           {error}
         </p>

package/src/execution/FileChangeProgressBar.tsx

@@ -67,40 +67,40 @@ export const FileChangeProgressBar = memo(function FileChangeProgressBar({
       role="region"
       aria-label="File changes in progress"
       data-cursor-target="file-change-progress-bar"
-      className={cn("border-t border-border-muted px-4 py-2", className)}
+      className={cn("stg:border-t stg:border-border-muted stg:px-4 stg:py-2", className)}
     >
-      <div className="flex items-center gap-2">
+      <div className="stg:flex stg:items-center stg:gap-2">
         <button
           type="button"
           onClick={() => setExpanded((prev) => !prev)}
           aria-expanded={expanded}
-          className="flex min-w-0 flex-1 items-center gap-2 text-left text-xs text-muted-foreground hover:text-foreground"
+          className="stg:flex stg:min-w-0 stg:flex-1 stg:items-center stg:gap-2 stg:text-left stg:text-xs stg:text-muted-foreground stg:hover:text-foreground"
         >
           <span
             aria-hidden="true"
-            className={cn("shrink-0 transition-transform", expanded && "rotate-90")}
+            className={cn("stg:shrink-0 stg:transition-transform", expanded && "stg:rotate-90")}
           >
             ▸
           </span>
           {/* Only the count is live: a screen reader hears the aggregate move,
               not a per-file announcement on every refresh. */}
-          <span aria-live="polite" className="min-w-0 truncate">
+          <span aria-live="polite" className="stg:min-w-0 stg:truncate">
             {filesChanged} {filesChanged === 1 ? "file" : "files"} changing…
           </span>
         </button>
         <FileLineStats linesAdded={linesAdded} linesRemoved={linesRemoved} />
       </div>
       {expanded && (
-        <ul className="mt-2 max-h-[30vh] space-y-1 overflow-y-auto">
+        <ul className="stg:mt-2 stg:max-h-[30vh] stg:space-y-1 stg:overflow-y-auto">
           {entries.map((entry) => {
             const path = entry.pathAfter || entry.pathBefore;
             return (
-              <li key={path} className="flex items-center gap-2">
+              <li key={path} className="stg:flex stg:items-center stg:gap-2">
                 <FileKindBadge kind={entry.kind} />
                 <FilePathLink
                   path={path}
                   dirDisplay="dim"
-                  className="min-w-0 flex-1 text-xs"
+                  className="stg:min-w-0 stg:flex-1 stg:text-xs"
                 />
                 <FileLineStats
                   linesAdded={entry.linesAdded}
@@ -110,7 +110,7 @@ export const FileChangeProgressBar = memo(function FileChangeProgressBar({
             );
           })}
           {hiddenCount > 0 && (
-            <li className="text-xs text-muted-foreground-faint">
+            <li className="stg:text-xs stg:text-muted-foreground-faint">
               … and {hiddenCount} more
             </li>
           )}

package/src/execution/FileChangesView.tsx

@@ -76,7 +76,7 @@ export function FileChangesView({ changes, className }: FileChangesViewProps) {
   if (changes.length === 0 || !selected) return null;
 
   return (
-    <div className={cn("flex flex-col gap-3", className)}>
+    <div className={cn("stg:flex stg:flex-col stg:gap-3", className)}>
       <DiffSummary
         fileCount={changes.length}
         additions={totals.additions}
@@ -84,7 +84,7 @@ export function FileChangesView({ changes, className }: FileChangesViewProps) {
       />
 
       {changes.length > 1 && (
-        <div className="overflow-hidden rounded-lg border border-border">
+        <div className="stg:overflow-hidden stg:rounded-lg stg:border stg:border-border">
           <DiffFileList
             files={entries}
             selectedPath={selected.path}
@@ -181,25 +181,25 @@ export function FileChangeDiff({
 
   return (
     <div
-      className={cn("flex flex-col gap-1.5", className)}
+      className={cn("stg:flex stg:flex-col stg:gap-1.5", className)}
       data-cursor-target="file-diff"
     >
       {(showFileName || showStatsRow) && (
-        <div className="flex items-center gap-2 text-xs text-muted-foreground">
+        <div className="stg:flex stg:items-center stg:gap-2 stg:text-xs stg:text-muted-foreground">
           {showFileName &&
             change.changeType === FileChangeType.RENAME &&
             change.renameFrom && (
-              <span className="min-w-0 truncate font-mono text-muted-foreground-faint">
+              <span className="stg:min-w-0 stg:truncate stg:font-mono stg:text-muted-foreground-faint">
                 {change.renameFrom} →
               </span>
             )}
           {showFileName && (
-            <FilePathLink path={change.path} dirDisplay="dim" className="text-xs" />
+            <FilePathLink path={change.path} dirDisplay="dim" className="stg:text-xs" />
           )}
           {showStatsRow && (
-            <span className="shrink-0 tabular-nums">
-              <span className="text-diff-added-fg">+{stats.additions}</span>{" "}
-              <span className="text-diff-removed-fg">-{stats.deletions}</span>
+            <span className="stg:shrink-0 stg:tabular-nums">
+              <span className="stg:text-diff-added-fg">+{stats.additions}</span>{" "}
+              <span className="stg:text-diff-removed-fg">-{stats.deletions}</span>
             </span>
           )}
         </div>
@@ -283,7 +283,7 @@ function FileChangeBody({
             href={downloadUrl}
             target="_blank"
             rel="noreferrer"
-            className="font-medium text-primary underline-offset-2 hover:underline focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+            className="stg:font-medium stg:text-primary stg:underline-offset-2 stg:hover:underline stg:focus-visible:outline-none stg:focus-visible:ring-2 stg:focus-visible:ring-ring"
           >
             Download the full file
           </a>
@@ -318,8 +318,8 @@ function Notice({
     <div
       role="status"
       className={cn(
-        "rounded-md border border-border bg-muted-subtle px-3 py-2 text-xs",
-        variant === "error" ? "text-destructive" : "text-muted-foreground",
+        "stg:rounded-md stg:border stg:border-border stg:bg-muted-subtle stg:px-3 stg:py-2 stg:text-xs",
+        variant === "error" ? "stg:text-destructive" : "stg:text-muted-foreground",
       )}
     >
       {children}

package/src/execution/FilePathLink.tsx

@@ -117,22 +117,22 @@ export function FilePathLink({
   );
 
   const sharedClasses = cn(
-    "inline-flex min-w-0 items-center gap-1 font-mono text-foreground",
-    "transition-colors hover:text-primary hover:underline",
-    "focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:rounded-sm",
+    "stg:inline-flex stg:min-w-0 stg:items-center stg:gap-1 stg:font-mono stg:text-foreground",
+    "stg:transition-colors stg:hover:text-primary stg:hover:underline",
+    "stg:focus-visible:outline-none stg:focus-visible:ring-1 stg:focus-visible:ring-ring stg:focus-visible:rounded-sm",
     className,
   );
 
   // The directory truncates (it is context); the base never shrinks (it is
   // identity). Together they keep the file name legible at any width.
   const label = copied ? (
-    <span className="min-w-0 truncate">Copied</span>
+    <span className="stg:min-w-0 stg:truncate">Copied</span>
   ) : (
     <>
       {dirDisplay === "dim" && dir && (
-        <span className="min-w-0 truncate text-muted-foreground-faint">{dir}</span>
+        <span className="stg:min-w-0 stg:truncate stg:text-muted-foreground-faint">{dir}</span>
       )}
-      <span className="shrink-0">{base}</span>
+      <span className="stg:shrink-0">{base}</span>
     </>
   );
 
@@ -150,7 +150,7 @@ export function FilePathLink({
         onClick={handleClick}
         aria-label={ariaLabel}
         title={title}
-        className={cn(sharedClasses, "group/fpl")}
+        className={cn(sharedClasses, "stg:group/fpl")}
       >
         {label}
         <ExternalLinkIcon />
@@ -164,7 +164,7 @@ export function FilePathLink({
       onClick={handleClick}
       aria-label={ariaLabel}
       title={title}
-      className={cn(sharedClasses, "group/fpl cursor-pointer")}
+      className={cn(sharedClasses, "stg:group/fpl stg:cursor-pointer")}
     >
       {label}
       {!copied && <CopyIcon />}
@@ -187,7 +187,7 @@ function ExternalLinkIcon() {
       strokeWidth="1.2"
       strokeLinecap="round"
       strokeLinejoin="round"
-      className="shrink-0 opacity-0 transition-opacity group-hover/fpl:opacity-70"
+      className="stg:shrink-0 stg:opacity-0 stg:transition-opacity stg:group-hover/fpl:opacity-70"
       aria-hidden="true"
     >
       <path d="M9 3L5 7" />
@@ -208,7 +208,7 @@ function CopyIcon() {
       strokeWidth="1.2"
       strokeLinecap="round"
       strokeLinejoin="round"
-      className="shrink-0 opacity-0 transition-opacity group-hover/fpl:opacity-70"
+      className="stg:shrink-0 stg:opacity-0 stg:transition-opacity stg:group-hover/fpl:opacity-70"
       aria-hidden="true"
     >
       <rect x="4" y="4" width="6.5" height="6.5" rx="1" />

package/src/execution/FileReviewAtoms.tsx

@@ -26,12 +26,12 @@ export function FileLineStats({
   if (linesAdded === 0 && linesRemoved === 0) return null;
   return (
     <span
-      className="shrink-0 text-xs tabular-nums"
+      className="stg:shrink-0 stg:text-xs stg:tabular-nums"
       aria-label={`${linesAdded} added, ${linesRemoved} removed`}
       data-cursor-target="file-review-line-stats"
     >
-      <span className="text-diff-added-fg">+{linesAdded}</span>{" "}
-      <span className="text-diff-removed-fg">-{linesRemoved}</span>
+      <span className="stg:text-diff-added-fg">+{linesAdded}</span>{" "}
+      <span className="stg:text-diff-removed-fg">-{linesRemoved}</span>
     </span>
   );
 }
@@ -42,29 +42,29 @@ const KIND_BADGE: Partial<
 > = {
   [FileChangeKind.ADD]: {
     letter: "A",
-    colorClass: "text-diff-added-fg",
+    colorClass: "stg:text-diff-added-fg",
     label: "added",
   },
   [FileChangeKind.MODIFY]: {
     letter: "M",
-    colorClass: "text-diff-hunk-header-fg",
+    colorClass: "stg:text-diff-hunk-header-fg",
     label: "modified",
   },
   [FileChangeKind.DELETE]: {
     letter: "D",
-    colorClass: "text-diff-removed-fg",
+    colorClass: "stg:text-diff-removed-fg",
     label: "deleted",
   },
   [FileChangeKind.RENAME]: {
     letter: "R",
-    colorClass: "text-diff-hunk-header-fg",
+    colorClass: "stg:text-diff-hunk-header-fg",
     label: "renamed",
   },
   // A binary change is a modification whose diff is not text; the letter stays
   // M and the binary-ness is told by the row's "Keep anyway" + reason note.
   [FileChangeKind.BINARY_CHANGE]: {
     letter: "M",
-    colorClass: "text-diff-hunk-header-fg",
+    colorClass: "stg:text-diff-hunk-header-fg",
     label: "modified (binary)",
   },
 };
@@ -80,7 +80,7 @@ export function FileKindBadge({ kind }: { kind: FileChangeKind }) {
   if (!badge) return null;
   return (
     <span
-      className={cn("shrink-0 font-mono text-[10px] font-bold", badge.colorClass)}
+      className={cn("stg:shrink-0 stg:font-mono stg:text-[10px] stg:font-bold", badge.colorClass)}
       aria-label={badge.label}
     >
       {badge.letter}