@stigmer/react 3.10.0 → 3.11.1-dev.20260812192248

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

@@ -2,6 +2,7 @@
 
 import { useCallback, useContext, useMemo, useState } from "react";
 import { cn } from "@stigmer/theme";
+import { Tooltip, TooltipContent, TooltipTrigger } from "../internal/tooltip.js";
 import { FilePathContext } from "./FilePathContext.js";
 import { resolvePathAction, splitDisplayPath } from "./file-path-resolver.js";
 
@@ -18,9 +19,9 @@ export interface FilePathLinkProps {
   readonly path: string;
   /**
    * How much of the directory prefix to show. Defaults to `"hide"` (file name
-   * only); the full path is always available on hover via `title`. Use `"dim"`
-   * where the surrounding directory aids comprehension (diff headers, the
-   * multi-file changes list).
+   * only); the full path is always available on the hover/focus tooltip. Use
+   * `"dim"` where the surrounding directory aids comprehension (diff headers,
+   * the multi-file changes list).
    */
   readonly dirDisplay?: FilePathDirDisplay;
   /** Additional CSS class names for the root element. */
@@ -35,7 +36,7 @@ const COPIED_FEEDBACK_MS = 2000;
  *
  * **Filename-first.** It shows the base name prominently and never clips it;
  * the directory is optional (`dirDisplay`) and dimmed, and the *full* path is
- * always available on hover via `title` (and to screen readers via
+ * always available on the hover/focus tooltip (and to screen readers via
  * `aria-label`). This fixes the prior behaviour, where a single `truncate` on
  * the whole path clipped the file name — the one part that identifies the
  * change — and surfaced only the action verb on hover.
@@ -75,7 +76,6 @@ export function FilePathLink({
   // path. The action verb moves into the aria-label so hover surfaces the path,
   // not "Copy path".
   const fullPath = resolved.action === "copy" ? resolved.value : path;
-  const title = fullPath;
   const ariaLabel = `${resolved.tooltip}: ${fullPath}`;
 
   const handleCopy = useCallback(() => {
@@ -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>
     </>
   );
 
@@ -143,32 +143,48 @@ export function FilePathLink({
   // in-app viewer) and only calls `preventDefault` when the handler took it.
   if (resolved.action === "link") {
     return (
-      <a
-        href={resolved.url}
-        target="_blank"
-        rel="noopener noreferrer"
-        onClick={handleClick}
-        aria-label={ariaLabel}
-        title={title}
-        className={cn(sharedClasses, "group/fpl")}
-      >
-        {label}
-        <ExternalLinkIcon />
-      </a>
+      <Tooltip>
+        <TooltipTrigger
+          render={
+            <a
+              href={resolved.url}
+              target="_blank"
+              rel="noopener noreferrer"
+              onClick={handleClick}
+              aria-label={ariaLabel}
+              className={cn(sharedClasses, "stg:group/fpl")}
+            />
+          }
+        >
+          {label}
+          <ExternalLinkIcon />
+        </TooltipTrigger>
+        <TooltipContent side="top" className="stg:break-all">
+          {fullPath}
+        </TooltipContent>
+      </Tooltip>
     );
   }
 
   return (
-    <button
-      type="button"
-      onClick={handleClick}
-      aria-label={ariaLabel}
-      title={title}
-      className={cn(sharedClasses, "group/fpl cursor-pointer")}
-    >
-      {label}
-      {!copied && <CopyIcon />}
-    </button>
+    <Tooltip>
+      <TooltipTrigger
+        render={
+          <button
+            type="button"
+            onClick={handleClick}
+            aria-label={ariaLabel}
+            className={cn(sharedClasses, "stg:group/fpl stg:cursor-pointer")}
+          />
+        }
+      >
+        {label}
+        {!copied && <CopyIcon />}
+      </TooltipTrigger>
+      <TooltipContent side="top" className="stg:break-all">
+        {fullPath}
+      </TooltipContent>
+    </Tooltip>
   );
 }
 
@@ -187,7 +203,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 +224,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}

package/src/execution/FileReviewCard.tsx

@@ -315,22 +315,22 @@ export const FileReviewCard = memo(function FileReviewCard({
           : `${total} file change${total === 1 ? "" : "s"}`
       }
       className={cn(
-        "rounded-lg border border-border-prominent",
-        interactive && "border-l-2 border-l-warning",
+        "stg:rounded-lg stg:border stg:border-border-prominent",
+        interactive && "stg:border-l-2 stg:border-l-warning",
         className,
       )}
     >
       {/* The bar: summary + whole-set verdict + the detail expander, one line. */}
-      <div className="flex flex-wrap items-center gap-2 px-2.5 py-1.5 text-xs">
-        <span className="shrink-0 font-medium text-foreground">
+      <div className="stg:flex stg:flex-wrap stg:items-center stg:gap-2 stg:px-2.5 stg:py-1.5 stg:text-xs">
+        <span className="stg:shrink-0 stg:font-medium stg:text-foreground">
           {interactive ? "Review file changes" : "File changes"}
         </span>
         {/* The flexible middle: the summary (truncating) plus the set's
             aggregate +N −M, visible even while collapsed so the bar carries
             the magnitude of what is being decided, not just the file count.
             Hidden when no file has counts (FileLineStats). */}
-        <span className="flex min-w-0 flex-1 items-center gap-2">
-          <span className="min-w-0 truncate text-muted-foreground">{summary}</span>
+        <span className="stg:flex stg:min-w-0 stg:flex-1 stg:items-center stg:gap-2">
+          <span className="stg:min-w-0 stg:truncate stg:text-muted-foreground">{summary}</span>
           <FileLineStats
             linesAdded={totals.additions}
             linesRemoved={totals.deletions}
@@ -367,10 +367,10 @@ export const FileReviewCard = memo(function FileReviewCard({
           onClick={() => setExpanded((v) => !v)}
           data-cursor-target="file-review-expander"
           className={cn(
-            "inline-flex shrink-0 items-center gap-1 rounded-md border border-border px-2 py-1",
-            "text-xs font-medium text-muted-foreground transition-colors",
-            "hover:bg-accent-hover hover:text-foreground",
-            "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+            "stg:inline-flex stg:shrink-0 stg:items-center stg:gap-1 stg:rounded-md stg:border stg:border-border stg:px-2 stg:py-1",
+            "stg:text-xs stg:font-medium stg:text-muted-foreground stg:transition-colors",
+            "stg:hover:bg-accent-hover stg:hover:text-foreground",
+            "stg:focus-visible:outline-none stg:focus-visible:ring-2 stg:focus-visible:ring-ring",
           )}
         >
           {/* The closed label states what expanding reveals: the reviewable
@@ -386,7 +386,7 @@ export const FileReviewCard = memo(function FileReviewCard({
       {interactive && incomplete && showBulkControls && (
         <p
           id={incompleteNoticeId}
-          className="px-2.5 pb-1.5 text-[11px] italic text-muted-foreground"
+          className="stg:px-2.5 stg:pb-1.5 stg:text-[11px] stg:italic stg:text-muted-foreground"
         >
           {incompleteNotice(showPerFile, blockSummary, binaryOnly)}
         </p>
@@ -398,7 +398,7 @@ export const FileReviewCard = memo(function FileReviewCard({
           control it belongs to — something a single global banner cannot do.
           Rendered on the bar so it is visible regardless of expansion. */}
       {interactive && wholeSetError && (
-        <div className="px-2.5 pb-1.5">
+        <div className="stg:px-2.5 stg:pb-1.5">
           <InCardDecisionError
             error={wholeSetError}
             leadIn="submit decision"
@@ -410,7 +410,7 @@ export const FileReviewCard = memo(function FileReviewCard({
       {expanded && (
         <div
           id={bodyId}
-          className="space-y-2 border-t border-border-muted px-3 py-2.5"
+          className="stg:space-y-2 stg:border-t stg:border-border-muted stg:px-3 stg:py-2.5"
         >
           {/* The list body carries no summary header: the bar already shows
               the file count and the aggregate +N −M (per-file counts are
@@ -456,7 +456,7 @@ export const FileReviewCard = memo(function FileReviewCard({
                 // its detail is informational, with no per-file control.
                 changes.map((change) =>
                   showDiffs ? (
-                    <div key={change.id} className="space-y-1.5">
+                    <div key={change.id} className="stg:space-y-1.5">
                       <CaptureBadge change={change} />
                       <CapturedChangeDiff change={change} />
                     </div>
@@ -528,8 +528,8 @@ function ExpanderChevron({ expanded }: { expanded: boolean }) {
       strokeLinecap="round"
       strokeLinejoin="round"
       className={cn(
-        "shrink-0 transition-transform duration-150",
-        expanded && "rotate-90",
+        "stg:shrink-0 stg:transition-transform stg:duration-150",
+        expanded && "stg:rotate-90",
       )}
       aria-hidden="true"
     >
@@ -585,7 +585,7 @@ const FileChangeReviewRow = memo(function FileChangeReviewRow({
     />
   );
   return (
-    <div className="space-y-1.5">
+    <div className="stg:space-y-1.5">
       {showDiffs ? (
         <>
           <CaptureBadge change={change} />
@@ -635,8 +635,8 @@ const SettledFileRow = memo(function SettledFileRow({
     return <FileListRow change={change} trailing={<VerdictBadge verdict={verdict} />} />;
   }
   return (
-    <div className="space-y-1.5">
-      <div className="flex items-center gap-2">
+    <div className="stg:space-y-1.5">
+      <div className="stg:flex stg:items-center stg:gap-2">
         <CaptureBadge change={change} />
         <VerdictBadge verdict={verdict} />
       </div>
@@ -690,16 +690,16 @@ function FileListRow({
       : "";
   return (
     <div
-      className="flex flex-wrap items-center gap-x-2 gap-y-1"
+      className="stg:flex stg:flex-wrap stg:items-center stg:gap-x-2 stg:gap-y-1"
       data-cursor-target="file-review-list-row"
     >
       <FileKindBadge kind={change.kind} />
       {renamedFrom && (
-        <span className="min-w-0 truncate font-mono text-xs text-muted-foreground-faint">
+        <span className="stg:min-w-0 stg:truncate stg:font-mono stg:text-xs stg:text-muted-foreground-faint">
           {renamedFrom}&nbsp;→&nbsp;
         </span>
       )}
-      <FilePathLink path={path} dirDisplay="dim" className="min-w-0 flex-1 text-xs" />
+      <FilePathLink path={path} dirDisplay="dim" className="stg:min-w-0 stg:flex-1 stg:text-xs" />
       <FileLineStats
         linesAdded={change.linesAdded}
         linesRemoved={change.linesRemoved}
@@ -720,18 +720,18 @@ function FileListRow({
 function VerdictBadge({ verdict }: { verdict: FileDecisionAction | null }) {
   if (verdict === FileDecisionAction.APPROVE) {
     return (
-      <span className="shrink-0 text-[11px] font-medium text-diff-added-fg">Kept</span>
+      <span className="stg:shrink-0 stg:text-[11px] stg:font-medium stg:text-diff-added-fg">Kept</span>
     );
   }
   if (verdict === FileDecisionAction.REJECT) {
     return (
-      <span className="shrink-0 text-[11px] font-medium text-diff-removed-fg">
+      <span className="stg:shrink-0 stg:text-[11px] stg:font-medium stg:text-diff-removed-fg">
         Discarded
       </span>
     );
   }
   return (
-    <span className="shrink-0 text-[11px] italic text-muted-foreground">
+    <span className="stg:shrink-0 stg:text-[11px] stg:italic stg:text-muted-foreground">
       Not reviewed
     </span>
   );
@@ -806,7 +806,7 @@ function FileVerdictControl({
       role="radiogroup"
       aria-label={`Decision for ${path}`}
       aria-describedby={describedById}
-      className="flex items-center gap-1.5"
+      className="stg:flex stg:items-center stg:gap-1.5"
     >
       <VerdictOption
         label={keepLabel}
@@ -844,17 +844,17 @@ interface VerdictOptionProps {
 // fill AND tone (not color alone), and every property flows through `--stgm-*`
 // tokens with no opacity modifiers.
 const VERDICT_BASE = cn(
-  "inline-flex items-center justify-center gap-1.5 rounded-md border px-2.5 py-1",
-  "text-xs font-medium transition-colors",
-  "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
-  "disabled:cursor-not-allowed disabled:opacity-50",
+  "stg:inline-flex stg:items-center stg:justify-center stg:gap-1.5 stg:rounded-md stg:border stg:px-2.5 stg:py-1",
+  "stg:text-xs stg:font-medium stg:transition-colors",
+  "stg:focus-visible:outline-none stg:focus-visible:ring-2 stg:focus-visible:ring-ring stg:focus-visible:ring-offset-2",
+  "stg:disabled:cursor-not-allowed stg:disabled:opacity-50",
 );
 
-const VERDICT_REST = "border-border text-muted-foreground hover:bg-accent-hover hover:text-foreground";
+const VERDICT_REST = "stg:border-border stg:text-muted-foreground stg:hover:bg-accent-hover stg:hover:text-foreground";
 
 const VERDICT_SELECTED: Record<VerdictOptionProps["tone"], string> = {
-  keep: "border-success bg-success-subtle text-success",
-  discard: "border-destructive bg-destructive-subtle text-destructive",
+  keep: "stg:border-success stg:bg-success-subtle stg:text-success",
+  discard: "stg:border-destructive stg:bg-destructive-subtle stg:text-destructive",
 };
 
 function VerdictOption({
@@ -910,7 +910,7 @@ function CaptureBadge({ change }: { change: CapturedFileChange }) {
   if (!provenance) return null;
   return (
     <span
-      className="inline-flex w-fit items-center rounded border border-border bg-muted-subtle px-1.5 py-0.5 text-[11px] font-medium text-muted-foreground"
+      className="stg:inline-flex stg:w-fit stg:items-center stg:rounded stg:border stg:border-border stg:bg-muted-subtle stg:px-1.5 stg:py-0.5 stg:text-[11px] stg:font-medium stg:text-muted-foreground"
       aria-label={provenance.aria}
       data-cursor-target="file-review-capture"
     >
@@ -943,7 +943,7 @@ function BlockReasonNote({
   return (
     <p
       id={id}
-      className="text-[11px] italic text-muted-foreground"
+      className="stg:text-[11px] stg:italic stg:text-muted-foreground"
       data-cursor-target="file-review-block-reason"
     >
       {text}
@@ -1015,7 +1015,7 @@ function incompleteNotice(
 
 function ReviewProgress({ decided, total }: { decided: number; total: number }) {
   return (
-    <p role="status" className="text-[11px] text-muted-foreground">
+    <p role="status" className="stg:text-[11px] stg:text-muted-foreground">
       {decided} of {total} files reviewed
       {decided > 0 && decided < total && " — decide the rest to continue"}
     </p>
@@ -1076,7 +1076,7 @@ function SpinnerIcon() {
       fill="none"
       stroke="currentColor"
       strokeWidth="1.5"
-      className="animate-spin"
+      className="stg:animate-spin"
       aria-hidden="true"
     >
       <path d="M6 1.5A4.5 4.5 0 1 1 1.5 6" strokeLinecap="round" />

package/src/execution/FileReviewDock.tsx

@@ -94,11 +94,11 @@ export function FileReviewDock({
       role="region"
       aria-label="File changes awaiting review"
       data-cursor-target="file-review-dock"
-      className={cn("border-t border-border-muted", className)}
+      className={cn("stg:border-t stg:border-border-muted", className)}
     >
       {/* The cap bounds the dock, not each card: with the (defensive) multi-set
           case the whole surface stays within reach of the composer. */}
-      <div className="max-h-[40vh] space-y-2 overflow-y-auto px-4 py-2">
+      <div className="stg:max-h-[40vh] stg:space-y-2 stg:overflow-y-auto stg:px-4 stg:py-2">
         {changeSets.map((changeSet) => (
           <DockedChangeSet
             key={changeSet.id}

package/src/execution/FollowUpInput.tsx

@@ -136,15 +136,15 @@ export function FollowUpInput({
       role="form"
       aria-label="Send follow-up message"
       className={cn(
-        "shrink-0 px-4 py-3",
+        "stg:shrink-0 stg:px-4 stg:py-3",
         className,
       )}
     >
       <div
         className={cn(
-          "rounded-xl border border-border bg-card shadow-sm",
-          "focus-within:ring-2 focus-within:ring-ring",
-          isDisabled && "opacity-50",
+          "stg:rounded-xl stg:border stg:border-border stg:bg-card stg:shadow-sm",
+          "stg:focus-within:ring-2 stg:focus-within:ring-ring",
+          isDisabled && "stg:opacity-50",
         )}
       >
         <textarea
@@ -158,11 +158,11 @@ export function FollowUpInput({
           placeholder={placeholder}
           disabled={isDisabled}
           rows={1}
-          className="block w-full resize-none bg-transparent px-4 pt-3 pb-2 text-sm text-foreground placeholder:text-muted-foreground focus:outline-none disabled:cursor-not-allowed"
+          className="stg:block stg:w-full stg:resize-none stg:bg-transparent stg:px-4 stg:pt-3 stg:pb-2 stg:text-sm stg:text-foreground stg:placeholder:text-muted-foreground stg:focus:outline-none stg:disabled:cursor-not-allowed"
         />
 
-        <div className="flex items-center justify-between gap-2 border-t border-border-muted px-3 py-2">
-          <div className="flex items-center gap-2">
+        <div className="stg:flex stg:items-center stg:justify-between stg:gap-2 stg:border-t stg:border-border-muted stg:px-3 stg:py-2">
+          <div className="stg:flex stg:items-center stg:gap-2">
             {showModelSelector && (
               <ModelSelector
                 value={modelId}
@@ -176,7 +176,7 @@ export function FollowUpInput({
             type="button"
             disabled={!canSubmit}
             onClick={handleSubmit}
-            className="flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-primary text-primary-foreground transition-colors hover:bg-primary-hover disabled:pointer-events-none disabled:opacity-40"
+            className="stg:flex stg:h-8 stg:w-8 stg:shrink-0 stg:items-center stg:justify-center stg:rounded-lg stg:bg-primary stg:text-primary-foreground stg:transition-colors stg:hover:bg-primary-hover stg:disabled:pointer-events-none stg:disabled:opacity-40"
             aria-label="Send message"
           >
             {isSubmitting ? <SpinnerIcon /> : <ArrowUpIcon />}
@@ -214,7 +214,7 @@ function SpinnerIcon() {
       stroke="currentColor"
       strokeWidth="2"
       strokeLinecap="round"
-      className="animate-spin"
+      className="stg:animate-spin"
     >
       <path d="M8 2a6 6 0 1 0 6 6" />
     </svg>

package/src/execution/InteractionModeBadge.tsx

@@ -41,8 +41,8 @@ export const InteractionModeBadge = memo(function InteractionModeBadge({
       role="status"
       aria-label="Plan mode"
       className={cn(
-        "inline-flex items-center gap-1 rounded-md px-1.5 py-0.5 text-[0.65rem] font-medium",
-        "bg-accent text-muted-foreground",
+        "stg:inline-flex stg:items-center stg:gap-1 stg:rounded-md stg:px-1.5 stg:py-0.5 stg:text-[0.65rem] stg:font-medium",
+        "stg:bg-accent stg:text-muted-foreground",
         className,
       )}
     >