@stigmer/react 3.10.0 → 3.11.0

package/src/execution/ToolCallDetail.tsx

@@ -77,7 +77,7 @@ export function ToolCallDetail({
   );
 
   return (
-    <div className={cn("space-y-2 text-xs", className)}>
+    <div className={cn("stg:space-y-2 stg:text-xs", className)}>
       <CategoryDetail
         toolCall={toolCall}
         category={category}
@@ -248,9 +248,9 @@ function SearchQueryBlock({
 }) {
   const label = category === "list" ? "Path" : "Query";
   return (
-    <div className="space-y-1">
-      <span className="font-medium text-muted-foreground">{label}</span>
-      <code className="block whitespace-pre-wrap break-words rounded bg-muted px-1.5 py-0.5 font-mono text-foreground">
+    <div className="stg:space-y-1">
+      <span className="stg:font-medium stg:text-muted-foreground">{label}</span>
+      <code className="stg:block stg:whitespace-pre-wrap stg:break-words stg:rounded stg:bg-muted stg:px-1.5 stg:py-0.5 stg:font-mono stg:text-foreground">
         {value}
       </code>
     </div>
@@ -274,10 +274,10 @@ function ThinkToolDetail({ toolCall }: { toolCall: ToolCall }) {
   if (!thought) return null;
 
   return (
-    <div className="rounded-md border border-border-muted bg-muted-faint p-3">
+    <div className="stg:rounded-md stg:border stg:border-border-muted stg:bg-muted-faint stg:p-3">
       <CollapsiblePre
         content={thought}
-        className="italic text-muted-foreground whitespace-pre-wrap"
+        className="stg:italic stg:text-muted-foreground stg:whitespace-pre-wrap"
       />
     </div>
   );
@@ -313,7 +313,7 @@ function ProvenanceNote({ toolCall }: { toolCall: ToolCall }) {
 
   return (
     <p
-      className="text-[11px] italic text-muted-foreground"
+      className="stg:text-[11px] stg:italic stg:text-muted-foreground"
       title={provenance}
     >
       {provenance}

package/src/execution/ToolCallGroup.tsx

@@ -140,7 +140,7 @@ export const ToolCallGroup = memo(function ToolCallGroup({
         // self-contained card; the turn's tools stack with a small gap between
         // them rather than sharing a left rail, so the thread reads as a column
         // of discrete cards.
-        "flex flex-col gap-2",
+        "stg:flex stg:flex-col stg:gap-2",
         className,
       )}
     >

package/src/execution/ToolCallItem.tsx

@@ -178,7 +178,7 @@ export const ToolCallItem = memo(function ToolCallItem({
       {approvalBadge && (
         <span
           className={cn(
-            "shrink-0 rounded px-1 py-0.5 text-[10px] font-medium leading-none",
+            "stg:shrink-0 stg:rounded stg:px-1 stg:py-0.5 stg:text-[10px] stg:font-medium stg:leading-none",
             approvalBadge.colorClass,
           )}
         >
@@ -189,7 +189,7 @@ export const ToolCallItem = memo(function ToolCallItem({
       {reviewBadge && (
         <span
           className={cn(
-            "shrink-0 rounded px-1 py-0.5 text-[10px] font-medium leading-none",
+            "stg:shrink-0 stg:rounded stg:px-1 stg:py-0.5 stg:text-[10px] stg:font-medium stg:leading-none",
             reviewBadge.colorClass,
           )}
           data-cursor-target="file-review-row-badge"
@@ -199,20 +199,20 @@ export const ToolCallItem = memo(function ToolCallItem({
       )}
 
       {toolCall.mcpServerSlug && (
-        <span className="shrink-0 rounded bg-muted px-1 py-0.5 font-mono text-muted-foreground">
+        <span className="stg:shrink-0 stg:rounded stg:bg-muted stg:px-1 stg:py-0.5 stg:font-mono stg:text-muted-foreground">
           {toolCall.mcpServerSlug}
         </span>
       )}
 
       <span
-        className={cn("shrink-0", STATUS_COLOR[status])}
+        className={cn("stg:shrink-0", STATUS_COLOR[status])}
         aria-hidden="true"
       >
         <StatusIcon />
       </span>
 
       {duration && (
-        <span className="shrink-0 tabular-nums text-muted-foreground">
+        <span className="stg:shrink-0 stg:tabular-nums stg:text-muted-foreground">
           {duration}
         </span>
       )}
@@ -228,16 +228,16 @@ export const ToolCallItem = memo(function ToolCallItem({
         className={className}
       >
         <ThreadCardHeader>
-          <span className="shrink-0 text-muted-foreground" aria-hidden="true">
+          <span className="stg:shrink-0 stg:text-muted-foreground" aria-hidden="true">
             <CategoryIcon />
           </span>
 
-          <span className="min-w-0 flex-1 flex items-center gap-1.5 overflow-hidden">
-            <span className="shrink-0 font-medium text-foreground">
+          <span className="stg:min-w-0 stg:flex-1 stg:flex stg:items-center stg:gap-1.5 stg:overflow-hidden">
+            <span className="stg:shrink-0 stg:font-medium stg:text-foreground">
               {displayLabel}
             </span>
             {primaryArg && (
-              <FilePathLink path={primaryArg} className="min-w-0 text-xs" />
+              <FilePathLink path={primaryArg} className="stg:min-w-0 stg:text-xs" />
             )}
           </span>
 
@@ -292,32 +292,32 @@ export const ToolCallItem = memo(function ToolCallItem({
   // only by the summary layout below).
   const headerInner = (
     <>
-      <span className="shrink-0 text-muted-foreground" aria-hidden="true">
+      <span className="stg:shrink-0 stg:text-muted-foreground" aria-hidden="true">
         <CategoryIcon />
       </span>
 
-      <span className="min-w-0 flex-1 flex items-baseline gap-1.5 overflow-hidden">
-        <span className="shrink-0 font-medium text-foreground">
+      <span className="stg:min-w-0 stg:flex-1 stg:flex stg:items-baseline stg:gap-1.5 stg:overflow-hidden">
+        <span className="stg:shrink-0 stg:font-medium stg:text-foreground">
           {displayLabel}
         </span>
         {subtitleIsFilePath && primaryArg ? (
           <FilePathLink
             path={primaryArg}
-            className="min-w-0 text-xs text-muted-foreground"
+            className="stg:min-w-0 stg:text-xs stg:text-muted-foreground"
           />
         ) : (
           displaySubtitle && (
             <span
               ref={measuresSubtitle ? subtitleRef : undefined}
               title={displaySubtitle}
-              className="min-w-0 truncate text-muted-foreground font-mono"
+              className="stg:min-w-0 stg:truncate stg:text-muted-foreground stg:font-mono"
             >
               {displaySubtitle}
             </span>
           )
         )}
         {!isSubAgent && category !== "shell" && resultSummary && (
-          <span className="shrink-0 tabular-nums text-muted-foreground">
+          <span className="stg:shrink-0 stg:tabular-nums stg:text-muted-foreground">
             {resultSummary}
           </span>
         )}
@@ -380,11 +380,11 @@ function getApprovalBadge(toolCall: ToolCall): ApprovalBadgeInfo | null {
   if (!toolCall.requiresApproval) return null;
   switch (toolCall.approvalAction) {
     case ApprovalAction.APPROVE:
-      return { label: "Approved", colorClass: "bg-success/15 text-success" };
+      return { label: "Approved", colorClass: "stg:bg-success/15 stg:text-success" };
     case ApprovalAction.SKIP:
-      return { label: "Skipped", colorClass: "bg-muted text-muted-foreground" };
+      return { label: "Skipped", colorClass: "stg:bg-muted stg:text-muted-foreground" };
     case ApprovalAction.REJECT:
-      return { label: "Rejected", colorClass: "bg-destructive/15 text-destructive" };
+      return { label: "Rejected", colorClass: "stg:bg-destructive/15 stg:text-destructive" };
     default:
       return null;
   }
@@ -401,10 +401,10 @@ function getApprovalBadge(toolCall: ToolCall): ApprovalBadgeInfo | null {
  * the same language.
  */
 const REVIEW_BADGE: Record<FileReviewRowState, ApprovalBadgeInfo> = {
-  pending: { label: "Pending review", colorClass: "bg-warning/15 text-warning" },
-  kept: { label: "Kept", colorClass: "bg-success/15 text-success" },
-  discarded: { label: "Discarded", colorClass: "bg-destructive/15 text-destructive" },
-  failed: { label: "Review failed", colorClass: "bg-destructive/15 text-destructive" },
+  pending: { label: "Pending review", colorClass: "stg:bg-warning/15 stg:text-warning" },
+  kept: { label: "Kept", colorClass: "stg:bg-success/15 stg:text-success" },
+  discarded: { label: "Discarded", colorClass: "stg:bg-destructive/15 stg:text-destructive" },
+  failed: { label: "Review failed", colorClass: "stg:bg-destructive/15 stg:text-destructive" },
 };
 
 // ---------------------------------------------------------------------------
@@ -443,12 +443,12 @@ function mapToolCallStatus(toolCall: ToolCall): ItemStatus {
 }
 
 const STATUS_COLOR: Record<ItemStatus, string> = {
-  running: "text-foreground",
-  waiting: "text-warning",
-  failed: "text-destructive",
-  completed: "text-success",
-  pending: "text-muted-foreground",
-  interrupted: "text-muted-foreground",
+  running: "stg:text-foreground",
+  waiting: "stg:text-warning",
+  failed: "stg:text-destructive",
+  completed: "stg:text-success",
+  pending: "stg:text-muted-foreground",
+  interrupted: "stg:text-muted-foreground",
 };
 
 // ---------------------------------------------------------------------------

package/src/execution/ToolRunGroup.tsx

@@ -88,7 +88,7 @@ export const ToolRunGroup = memo(function ToolRunGroup({
       aria-label={label}
       data-cursor-target="tool-run-group"
       className={cn(
-        "rounded-lg border border-border-prominent overflow-hidden",
+        "stg:rounded-lg stg:border stg:border-border-prominent stg:overflow-hidden",
         className,
       )}
     >
@@ -97,26 +97,26 @@ export const ToolRunGroup = memo(function ToolRunGroup({
         aria-expanded={expanded}
         onClick={handleToggle}
         className={cn(
-          "flex w-full cursor-pointer items-center gap-2 px-2.5 py-1.5 text-left text-xs text-muted-foreground transition-colors",
-          "hover:bg-muted-subtle",
+          "stg:flex stg:w-full stg:cursor-pointer stg:items-center stg:gap-2 stg:px-2.5 stg:py-1.5 stg:text-left stg:text-xs stg:text-muted-foreground stg:transition-colors",
+          "stg:hover:bg-muted-subtle",
           // ring-inset so the card's overflow-hidden does not clip the focus ring.
-          "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring",
+          "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" aria-hidden="true">
+        <span className="stg:shrink-0 stg:text-muted-foreground" aria-hidden="true">
           <Icon />
         </span>
-        <span className="min-w-0 flex-1 truncate font-medium text-foreground">
+        <span className="stg:min-w-0 stg:flex-1 stg:truncate stg:font-medium stg:text-foreground">
           {label}
         </span>
-        <span className={cn("shrink-0", STATUS_COLOR[status])} aria-hidden="true">
+        <span className={cn("stg:shrink-0", STATUS_COLOR[status])} aria-hidden="true">
           <StatusIcon />
         </span>
         <ChevronIcon expanded={expanded} />
       </button>
 
       {expanded && (
-        <div className="border-t border-border-muted">
+        <div className="stg:border-t stg:border-border-muted">
           {/* The chip is already the card; its children render as
               divider-separated rows (bordered={false}) to avoid a card-in-a-card. */}
           {toolCalls.map((tc) => (
@@ -221,11 +221,11 @@ function deriveAggregateStatus(toolCalls: readonly ToolCall[]): AggregateStatus
 }
 
 const STATUS_COLOR: Record<AggregateStatus, string> = {
-  running: "text-foreground",
-  waiting: "text-warning",
-  failed: "text-destructive",
-  completed: "text-success",
-  pending: "text-muted-foreground",
+  running: "stg:text-foreground",
+  waiting: "stg:text-warning",
+  failed: "stg:text-destructive",
+  completed: "stg:text-success",
+  pending: "stg:text-muted-foreground",
 };
 
 const STATUS_ICON: Record<AggregateStatus, () => React.JSX.Element> = {
@@ -242,7 +242,7 @@ const STATUS_ICON: Record<AggregateStatus, () => React.JSX.Element> = {
 
 function SpinnerIcon() {
   return (
-    <svg width="10" height="10" viewBox="0 0 12 12" fill="none" stroke="currentColor" strokeWidth="1.5" className="animate-spin">
+    <svg width="10" height="10" viewBox="0 0 12 12" fill="none" stroke="currentColor" strokeWidth="1.5" className="stg:animate-spin">
       <path d="M6 1.5A4.5 4.5 0 1 1 1.5 6" strokeLinecap="round" />
     </svg>
   );
@@ -295,8 +295,8 @@ function ChevronIcon({ expanded }: { expanded: boolean }) {
       strokeLinecap="round"
       strokeLinejoin="round"
       className={cn(
-        "shrink-0 text-muted-foreground transition-transform duration-150",
-        expanded && "rotate-90",
+        "stg:shrink-0 stg:text-muted-foreground stg:transition-transform stg:duration-150",
+        expanded && "stg:rotate-90",
       )}
       aria-hidden="true"
     >

package/src/execution/UsageWidget.tsx

@@ -60,16 +60,16 @@ export function UsageWidget({ executions, className }: UsageWidgetProps) {
 
   return (
     <div
-      className={cn("flex flex-col gap-1.5", className)}
+      className={cn("stg:flex stg:flex-col stg:gap-1.5", className)}
       role="region"
       aria-label="Session cost summary"
     >
-      <div className="flex items-baseline gap-1.5">
-        <span className="text-sm font-medium tabular-nums text-foreground">
+      <div className="stg:flex stg:items-baseline stg:gap-1.5">
+        <span className="stg:text-sm stg:font-medium stg:tabular-nums stg:text-foreground">
           {formatCost(usage.totalCostUsd)}
         </span>
         {usage.isEstimated && (
-          <span className="rounded bg-muted px-1 py-0.5 text-[10px] font-medium leading-none text-muted-foreground">
+          <span className="stg:rounded stg:bg-muted stg:px-1 stg:py-0.5 stg:text-[10px] stg:font-medium stg:leading-none stg:text-muted-foreground">
             Estimated
           </span>
         )}
@@ -78,18 +78,18 @@ export function UsageWidget({ executions, className }: UsageWidgetProps) {
       {multiModel ? (
         <ModelBreakdown models={usage.modelBreakdown} />
       ) : (
-        <div className="truncate text-xs text-muted-foreground">
+        <div className="stg:truncate stg:text-xs stg:text-muted-foreground">
           {usage.primaryModel}
           {usage.primaryProvider && ` · ${usage.primaryProvider}`}
         </div>
       )}
 
-      <div className="text-xs tabular-nums text-muted-foreground">
+      <div className="stg:text-xs stg:tabular-nums stg:text-muted-foreground">
         {formatTokenCount(usage.totalTokens)} tokens ·{" "}
         {usage.llmCallCount} {usage.llmCallCount === 1 ? "call" : "calls"}
       </div>
 
-      <div className="pl-2 text-xs tabular-nums text-muted-foreground">
+      <div className="stg:pl-2 stg:text-xs stg:tabular-nums stg:text-muted-foreground">
         prompt {formatTokenCount(usage.inputTokens)} · completion{" "}
         {formatTokenCount(usage.outputTokens)}
       </div>
@@ -111,18 +111,18 @@ function ModelBreakdown({
 }) {
   return (
     <div
-      className="flex flex-col gap-0.5"
+      className="stg:flex stg:flex-col stg:gap-0.5"
       role="list"
       aria-label="Model cost breakdown"
     >
       {models.map((entry) => (
         <div
           key={`${entry.model}\0${entry.provider}`}
-          className="flex items-baseline justify-between text-xs text-muted-foreground"
+          className="stg:flex stg:items-baseline stg:justify-between stg:text-xs stg:text-muted-foreground"
           role="listitem"
         >
-          <span className="truncate">{entry.model}</span>
-          <span className="ml-2 shrink-0 tabular-nums">
+          <span className="stg:truncate">{entry.model}</span>
+          <span className="stg:ml-2 stg:shrink-0 stg:tabular-nums">
             {formatCost(entry.estimatedCostUsd)}
           </span>
         </div>
@@ -144,7 +144,7 @@ function CacheLine({
     parts.push(`${formatTokenCount(creationTokens)} write`);
 
   return (
-    <div className="pl-2 text-xs tabular-nums text-muted-foreground">
+    <div className="stg:pl-2 stg:text-xs stg:tabular-nums stg:text-muted-foreground">
       cache {parts.join(" · ")}
     </div>
   );

package/src/execution/WriteBackCard.tsx

@@ -69,12 +69,12 @@ export function WriteBackCard({ writeBack, className }: WriteBackCardProps) {
     <div
       role="article"
       aria-label={`Write-back: ${displayName}`}
-      className={cn("flex flex-col", className)}
+      className={cn("stg:flex stg:flex-col", className)}
     >
       {/* Header: workspace name + quiet phase caption */}
-      <div className="flex items-center gap-2 px-2 py-1">
+      <div className="stg:flex stg:items-center stg:gap-2 stg:px-2 stg:py-1">
         <span
-          className="min-w-0 flex-1 truncate text-xs font-medium text-foreground"
+          className="stg:min-w-0 stg:flex-1 stg:truncate stg:text-xs stg:font-medium stg:text-foreground"
           title={displayName}
         >
           {displayName}
@@ -107,10 +107,10 @@ export function WriteBackCard({ writeBack, className }: WriteBackCardProps) {
       {writeBack.error && (
         <div
           className={cn(
-            "mx-2 my-1 rounded px-2 py-1 text-xs",
+            "stg:mx-2 stg:my-1 stg:rounded stg:px-2 stg:py-1 stg:text-xs",
             isFailed
-              ? "bg-destructive-subtle text-destructive"
-              : "bg-status-degraded-subtle text-status-degraded",
+              ? "stg:bg-destructive-subtle stg:text-destructive"
+              : "stg:bg-status-degraded-subtle stg:text-status-degraded",
           )}
         >
           {writeBack.error}
@@ -155,10 +155,10 @@ function PhaseCaption({
   return (
     <span
       className={cn(
-        "shrink-0 text-[10px] font-medium tabular-nums",
+        "stg:shrink-0 stg:text-[10px] stg:font-medium stg:tabular-nums",
         phase === WorkspaceWriteBackPhase.WORKSPACE_WRITE_BACK_FAILED
-          ? "text-destructive"
-          : "text-muted-foreground",
+          ? "stg:text-destructive"
+          : "stg:text-muted-foreground",
       )}
     >
       {label}
@@ -177,19 +177,19 @@ function PullRequestRow({ url, number }: { url: string; number: number }) {
       target="_blank"
       rel="noopener noreferrer"
       className={cn(
-        "group flex items-center gap-2 px-2 py-1 text-xs text-muted-foreground transition-colors",
-        "hover:bg-muted hover:text-foreground",
+        "stg:group stg:flex stg:items-center stg:gap-2 stg:px-2 stg:py-1 stg:text-xs stg:text-muted-foreground stg:transition-colors",
+        "stg:hover:bg-muted stg:hover:text-foreground",
         FOCUS_RING_CLASSES,
       )}
     >
-      <span className="shrink-0">
+      <span className="stg:shrink-0">
         <PullRequestIcon />
       </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">
         {number > 0 ? `Pull Request #${number}` : "Pull Request"}
       </span>
       <span
-        className="shrink-0 opacity-0 transition-opacity group-hover:opacity-100 group-focus-visible:opacity-100"
+        className="stg:shrink-0 stg:opacity-0 stg:transition-opacity stg:group-hover:opacity-100 stg:group-focus-visible:opacity-100"
         aria-hidden="true"
       >
         <ExternalLinkIcon />
@@ -235,19 +235,19 @@ function BranchRow({
   }, [branchName]);
 
   return (
-    <div className="group flex items-stretch">
+    <div className="stg:group stg:flex stg:items-stretch">
       <div
-        className="flex min-w-0 flex-1 items-center gap-2 px-2 py-1 text-xs"
+        className="stg:flex stg:min-w-0 stg:flex-1 stg:items-center stg:gap-2 stg:px-2 stg:py-1 stg:text-xs"
         title={baseBranch ? `${branchName} \u2190 ${baseBranch}` : branchName}
       >
-        <span className="shrink-0 text-muted-foreground">
+        <span className="stg:shrink-0 stg:text-muted-foreground">
           <GitBranchIcon />
         </span>
-        <span className="min-w-0 truncate font-mono text-foreground">
+        <span className="stg:min-w-0 stg:truncate stg:font-mono stg:text-foreground">
           {branchName}
         </span>
         {baseBranch && (
-          <span className="shrink-0 font-mono text-muted-foreground-faint">
+          <span className="stg:shrink-0 stg:font-mono stg:text-muted-foreground-faint">
             {"\u2190 "}
             {baseBranch}
           </span>
@@ -259,12 +259,12 @@ function BranchRow({
         aria-label={copied ? "Branch name copied" : `Copy branch name ${branchName}`}
         title={copied ? "Copied" : "Copy branch name"}
         className={cn(
-          "flex shrink-0 items-center px-2 text-muted-foreground transition-opacity",
+          "stg:flex stg:shrink-0 stg:items-center stg:px-2 stg:text-muted-foreground stg:transition-opacity",
           copied
-            ? "opacity-100"
-            : "opacity-0 group-hover:opacity-100 focus-visible:opacity-100",
-          "hover:text-foreground",
-          "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring",
+            ? "stg:opacity-100"
+            : "stg:opacity-0 stg:group-hover:opacity-100 stg:focus-visible:opacity-100",
+          "stg:hover:text-foreground",
+          "stg:focus-visible:outline-none stg:focus-visible:ring-2 stg:focus-visible:ring-inset stg:focus-visible:ring-ring",
         )}
       >
         {copied ? <CheckIcon /> : <CopyIcon />}
@@ -286,7 +286,7 @@ function StatLine({ diffSummary }: { diffSummary: string }) {
         fileCount={stats.filesChanged}
         additions={stats.insertions}
         deletions={stats.deletions}
-        className="px-2 py-1"
+        className="stg:px-2 stg:py-1"
       />
     );
   }
@@ -297,7 +297,7 @@ function StatLine({ diffSummary }: { diffSummary: string }) {
   if (!raw) return null;
 
   return (
-    <div className="px-2 py-1 font-mono text-xs text-muted-foreground">
+    <div className="stg:px-2 stg:py-1 stg:font-mono stg:text-xs stg:text-muted-foreground">
       {raw}
     </div>
   );
@@ -308,7 +308,7 @@ function StatLine({ diffSummary }: { diffSummary: string }) {
 // ---------------------------------------------------------------------------
 
 const FOCUS_RING_CLASSES =
-  "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring";
+  "stg:focus-visible:outline-none stg:focus-visible:ring-2 stg:focus-visible:ring-inset stg:focus-visible:ring-ring";
 
 // ---------------------------------------------------------------------------
 // Inline SVG icons — monochrome, `currentColor`-tinted (DD-005; SDK
@@ -372,7 +372,7 @@ function ExternalLinkIcon() {
       strokeWidth="1.5"
       strokeLinecap="round"
       strokeLinejoin="round"
-      className="shrink-0"
+      className="stg:shrink-0"
       aria-hidden="true"
     >
       <path d="M9 3L3 9" />
@@ -393,7 +393,7 @@ function CopyIcon() {
       strokeWidth="1.5"
       strokeLinecap="round"
       strokeLinejoin="round"
-      className="shrink-0"
+      className="stg:shrink-0"
       aria-hidden="true"
     >
       <rect x="4" y="4" width="6.5" height="6.5" rx="1" />
@@ -413,7 +413,7 @@ function CheckIcon() {
       strokeWidth="1.5"
       strokeLinecap="round"
       strokeLinejoin="round"
-      className="shrink-0"
+      className="stg:shrink-0"
       aria-hidden="true"
     >
       <path d="M2.5 6.5L5 9L9.5 3.5" />

package/src/execution/WriteBacksWidget.tsx

@@ -64,14 +64,14 @@ export function WriteBacksWidget({
 
   return (
     <section aria-label="Pull Requests" className={cn(className)}>
-      <div className="mb-2 flex items-center gap-2">
-        <h3 className="text-sm font-medium text-foreground">Pull Requests</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">Pull Requests</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">
           {writeBackCount}
         </span>
       </div>
 
-      <ul role="list" className="flex flex-col gap-3">
+      <ul role="list" className="stg:flex stg:flex-col stg:gap-3">
         {writeBacks.map((entry) => (
           <li key={entry.writeBack.workspaceEntryName}>
             <WriteBackCard writeBack={entry.writeBack} />

package/src/execution/__tests__/ApprovalCard.test.tsx

@@ -38,9 +38,9 @@ describe("ApprovalCard chrome", () => {
     // old amber background fill. (Class presence only; that the line actually
     // RENDERS is proven by the layer-invariant + e2e computed-style guards —
     // happy-dom cannot resolve `@layer`.)
-    expect(card.className).toContain("border-border-prominent");
-    expect(card.className).toContain("border-l-warning");
-    expect(card.className).not.toContain("bg-warning");
+    expect(card.className).toContain("stg:border-border-prominent");
+    expect(card.className).toContain("stg:border-l-warning");
+    expect(card.className).not.toContain("stg:bg-warning");
   });
 
   it("keeps a destructive red accent for a delete approval (hard safety signal)", () => {
@@ -53,8 +53,8 @@ describe("ApprovalCard chrome", () => {
     render(<ApprovalCard pendingApproval={approval} onSubmit={noop} />);
 
     const card = screen.getByRole("alert");
-    expect(card.className).toContain("border-l-destructive");
-    expect(card.className).not.toContain("bg-destructive-subtle");
+    expect(card.className).toContain("stg:border-l-destructive");
+    expect(card.className).not.toContain("stg:bg-destructive-subtle");
   });
 
   it("shows a shell gate's command in the body terminal session, once, not in the header", () => {
@@ -127,28 +127,28 @@ describe("ApprovalCard quiet decision buttons", () => {
   it("Approve is the neutral chip, never the loud success green", () => {
     renderGate();
     const approve = screen.getByRole("button", { name: "Approve" });
-    expect(approve.className).toContain("bg-accent");
+    expect(approve.className).toContain("stg:bg-accent");
     expect(approve.className).toContain("border");
-    expect(approve.className).not.toContain("bg-success");
+    expect(approve.className).not.toContain("stg:bg-success");
   });
 
   it("Skip and Reject are quiet ghosts with no resting fill", () => {
     renderGate();
     const skip = screen.getByRole("button", { name: "Skip" });
     const reject = screen.getByRole("button", { name: "Reject" });
-    expect(skip.className).toContain("text-muted-foreground");
+    expect(skip.className).toContain("stg:text-muted-foreground");
     expect(skip.className).not.toMatch(/(?:^|\s)bg-/); // hover-only wash, no rest fill
     // Reject reveals its danger affordance on hover/focus, not as a red fill.
-    expect(reject.className).toContain("hover:text-destructive");
+    expect(reject.className).toContain("stg:hover:text-destructive");
     expect(reject.className).not.toMatch(/(?:^|\s)bg-/);
-    expect(reject.className).not.toContain("bg-destructive text-destructive-foreground");
+    expect(reject.className).not.toContain("stg:bg-destructive stg:text-destructive-foreground");
   });
 
   it("demotes Approve-all to the far right (ml-auto) at the lowest weight", () => {
     renderGate();
     const approveAll = screen.getByRole("button", { name: "Approve all file edits" });
-    expect(approveAll.className).toContain("ml-auto");
-    expect(approveAll.className).toContain("text-muted-foreground");
+    expect(approveAll.className).toContain("stg:ml-auto");
+    expect(approveAll.className).toContain("stg:text-muted-foreground");
   });
 
   it("uses no `bg-token/NN` opacity modifiers on any decision button", () => {

package/src/execution/__tests__/ArtifactContentRenderer.test.tsx

@@ -82,8 +82,8 @@ describe("ArtifactContentRenderer — reveal (jump-to-line)", () => {
     // Every line is addressable; exactly the target row carries the highlight.
     expect(container.querySelectorAll("[data-line]").length).toBe(3);
     const target = container.querySelector('[data-line="2"]');
-    expect(target?.className).toContain("bg-primary-subtle");
-    expect(container.querySelectorAll(".bg-primary-subtle").length).toBe(1);
+    expect(target?.className).toContain("stg:bg-primary-subtle");
+    expect(container.querySelectorAll(".stg\\:bg-primary-subtle").length).toBe(1);
   });
 
   it("does not highlight anything when the target line is out of range", () => {
@@ -94,7 +94,7 @@ describe("ArtifactContentRenderer — reveal (jump-to-line)", () => {
         reveal={{ line: 99, nonce: 1 }}
       />,
     );
-    expect(container.querySelectorAll(".bg-primary-subtle").length).toBe(0);
+    expect(container.querySelectorAll(".stg\\:bg-primary-subtle").length).toBe(0);
   });
 
   it("forces Markdown to its Source (line-faithful) view when revealing", () => {

package/src/execution/__tests__/FileChangesView.test.tsx

@@ -108,7 +108,7 @@ describe("FileChangeDiff", () => {
       <FileChangeDiff change={wholeFile("src/full.ts", "alpha\n", "beta\n")} />,
     );
     // No shared preview clamp: the Changes review surface shows the whole diff.
-    expect(container.querySelector(".overflow-hidden.max-h-48")).toBeNull();
+    expect(container.querySelector(".stg\\:overflow-hidden.stg\\:max-h-48")).toBeNull();
     expect(container.querySelector("table")).not.toBeNull();
   });
 
@@ -118,7 +118,7 @@ describe("FileChangeDiff", () => {
       <FileChangeDiff change={wholeFile("src/bound.ts", "alpha\n", "beta\n")} bounded />,
     );
     // Opt-in clamp wraps the diff body via the shared BoundedContent primitive.
-    const clamp = container.querySelector(".overflow-hidden.max-h-48");
+    const clamp = container.querySelector(".stg\\:overflow-hidden.stg\\:max-h-48");
     expect(clamp).not.toBeNull();
     expect(clamp!.querySelector("table")).not.toBeNull();
   });