@stigmer/react 3.9.0 → 3.11.0

package/src/environment/EnvironmentVariableEditor.tsx

@@ -151,14 +151,14 @@ export function EnvironmentVariableEditor({
   if (isLoading) {
     return (
       <div
-        className={cn("space-y-2", className)}
+        className={cn("stg:space-y-2", className)}
         aria-busy="true"
         aria-label="Loading variables"
       >
         {Array.from({ length: 3 }, (_, i) => (
           <div
             key={i}
-            className="bg-muted-subtle h-8 animate-pulse rounded"
+            className="stg:bg-muted-subtle stg:h-8 stg:animate-pulse stg:rounded"
             style={{ width: `${85 - i * 10}%` }}
           />
         ))}
@@ -168,21 +168,21 @@ export function EnvironmentVariableEditor({
 
   if (loadError) {
     return (
-      <p className={cn("text-destructive text-xs", className)} role="alert">
+      <p className={cn("stg:text-destructive stg:text-xs", className)} role="alert">
         {getUserMessage(loadError)}
       </p>
     );
   }
 
   return (
-    <div className={cn("space-y-1", className)}>
+    <div className={cn("stg:space-y-1", className)}>
       {variables.length === 0 && !showAddForm ? (
-        <p className="text-muted-foreground py-4 text-center text-xs">
+        <p className="stg:text-muted-foreground stg:py-4 stg:text-center stg:text-xs">
           No variables configured.
         </p>
       ) : (
         <div
-          className="divide-border/60 divide-y"
+          className="stg:divide-border/60 stg:divide-y"
           role="list"
           aria-label="Environment variables"
         >
@@ -211,9 +211,9 @@ export function EnvironmentVariableEditor({
             type="button"
             onClick={() => setShowAddForm(true)}
             className={cn(
-              "mt-1 flex items-center gap-1.5 rounded-md px-2 py-1.5 text-xs",
-              "text-muted-foreground hover:text-foreground hover:bg-accent-hover",
-              "transition-colors",
+              "stg:mt-1 stg:flex stg:items-center stg:gap-1.5 stg:rounded-md stg:px-2 stg:py-1.5 stg:text-xs",
+              "stg:text-muted-foreground stg:hover:text-foreground stg:hover:bg-accent-hover",
+              "stg:transition-colors",
             )}
           >
             <PlusIcon />
@@ -336,8 +336,8 @@ function VariableRow({
   if (mode === "editing") {
     return (
       <div role="listitem">
-        <div className="flex items-center gap-2 py-2">
-          <span className="shrink-0 font-mono text-xs font-medium text-foreground">
+        <div className="stg:flex stg:items-center stg:gap-2 stg:py-2">
+          <span className="stg:shrink-0 stg:font-mono stg:text-xs stg:font-medium stg:text-foreground">
             {variable.key}
           </span>
 
@@ -349,10 +349,10 @@ function VariableRow({
             placeholder={variable.isSecret ? "Enter new value" : "Value"}
             autoFocus
             className={cn(
-              "min-w-0 flex-1 rounded-md border border-input bg-background px-2 py-1 font-mono text-xs text-foreground",
-              "placeholder:text-muted-foreground",
-              "focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring",
-              "disabled:pointer-events-none disabled:opacity-50",
+              "stg:min-w-0 stg:flex-1 stg:rounded-md stg:border stg:border-input stg:bg-background stg:px-2 stg:py-1 stg:font-mono stg:text-xs stg:text-foreground",
+              "stg:placeholder:text-muted-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",
             )}
             onKeyDown={(e) => {
               if (e.key === "Enter") handleSave();
@@ -387,17 +387,17 @@ function VariableRow({
   // --- Idle / Confirming mode ---
   return (
     <div role="listitem">
-      <div className="group flex items-center gap-3 py-2">
+      <div className="stg:group stg:flex stg:items-center stg:gap-3 stg:py-2">
         {/* Key + badge */}
-        <div className="flex shrink-0 items-baseline gap-1.5">
+        <div className="stg:flex stg:shrink-0 stg:items-baseline stg:gap-1.5">
           <span
-            className="font-mono text-xs font-medium text-foreground"
+            className="stg:font-mono stg:text-xs stg:font-medium stg:text-foreground"
             title={variable.description || undefined}
           >
             {variable.key}
           </span>
           {variable.isSecret && (
-            <span className="text-[0.55rem] uppercase tracking-wider text-muted-foreground-subtle">
+            <span className="stg:text-[0.55rem] stg:uppercase stg:tracking-wider stg:text-muted-foreground-subtle">
               secret
             </span>
           )}
@@ -406,10 +406,10 @@ function VariableRow({
         {/* Value */}
         <span
           className={cn(
-            "min-w-0 flex-1 truncate font-mono text-xs",
+            "stg:min-w-0 stg:flex-1 stg:truncate stg:font-mono stg:text-xs",
             variable.isSecret && revealedValue !== null
-              ? "text-foreground"
-              : "text-muted-foreground",
+              ? "stg:text-foreground"
+              : "stg:text-muted-foreground",
           )}
         >
           {displayValue}
@@ -417,8 +417,8 @@ function VariableRow({
 
         {/* Actions */}
         {mode === "confirming" ? (
-          <div className="flex shrink-0 items-center gap-1">
-            <span className="text-destructive text-[0.65rem]">Delete?</span>
+          <div className="stg:flex stg:shrink-0 stg:items-center stg:gap-1">
+            <span className="stg:text-destructive stg:text-[0.65rem]">Delete?</span>
             <ActionButton
               onClick={confirmDelete}
               disabled={isDeleting}
@@ -437,7 +437,7 @@ function VariableRow({
           </div>
         ) : (
           !readOnly && (
-            <div className="flex shrink-0 items-center gap-0.5 opacity-0 transition-opacity group-hover:opacity-100 group-focus-within:opacity-100">
+            <div className="stg:flex stg:shrink-0 stg:items-center stg:gap-0.5 stg:opacity-0 stg:transition-opacity stg:group-hover:opacity-100 stg:group-focus-within:opacity-100">
               {variable.isSecret && (
                 /* Secret reveal is creator-only (can_read_secrets) at every
                    visibility level — org sharing never widens it. Hide the
@@ -533,8 +533,8 @@ function AddVariableForm({
   );
 
   return (
-    <form onSubmit={handleSubmit} className="space-y-2 pt-2">
-      <div className="flex items-center gap-2">
+    <form onSubmit={handleSubmit} className="stg:space-y-2 stg:pt-2">
+      <div className="stg:flex stg:items-center stg:gap-2">
         <input
           type="text"
           value={key}
@@ -543,11 +543,11 @@ function AddVariableForm({
           disabled={isAdding}
           autoFocus
           className={cn(
-            "w-40 rounded-md border bg-background px-2 py-1 font-mono text-xs text-foreground",
-            "placeholder:text-muted-foreground",
-            "focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring",
-            "disabled:pointer-events-none disabled:opacity-50",
-            isDuplicate ? "border-amber-500/70" : "border-input",
+            "stg:w-40 stg:rounded-md stg:border stg:bg-background stg:px-2 stg:py-1 stg:font-mono stg:text-xs stg:text-foreground",
+            "stg:placeholder:text-muted-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",
+            isDuplicate ? "stg:border-amber-500/70" : "stg:border-input",
           )}
         />
 
@@ -558,44 +558,44 @@ function AddVariableForm({
           placeholder="Value"
           disabled={isAdding}
           className={cn(
-            "min-w-0 flex-1 rounded-md border border-input bg-background px-2 py-1 font-mono text-xs text-foreground",
-            "placeholder:text-muted-foreground",
-            "focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring",
-            "disabled:pointer-events-none disabled:opacity-50",
+            "stg:min-w-0 stg:flex-1 stg:rounded-md stg:border stg:border-input stg:bg-background stg:px-2 stg:py-1 stg:font-mono stg:text-xs stg:text-foreground",
+            "stg:placeholder:text-muted-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",
           )}
           onKeyDown={(e) => {
             if (e.key === "Escape") onCancel();
           }}
         />
 
-        <label className="flex shrink-0 cursor-pointer items-center gap-1 text-[0.65rem] text-muted-foreground select-none">
+        <label className="stg:flex stg:shrink-0 stg:cursor-pointer stg:items-center stg:gap-1 stg:text-[0.65rem] stg:text-muted-foreground stg:select-none">
           <input
             type="checkbox"
             checked={isSecret}
             onChange={(e) => setIsSecret(e.target.checked)}
             disabled={isAdding}
-            className="accent-primary size-3"
+            className="stg:accent-primary stg:size-3"
           />
           Secret
         </label>
       </div>
 
       {isDuplicate && (
-        <p className="text-[0.65rem] text-amber-600 dark:text-amber-400">
+        <p className="stg:text-[0.65rem] stg:text-amber-600 stg:dark:text-amber-400">
           This key already exists and will be overwritten.
         </p>
       )}
 
       <RowError error={error} />
 
-      <div className="flex items-center gap-2">
+      <div className="stg:flex stg:items-center stg:gap-2">
         <button
           type="submit"
           disabled={!canSubmit}
           className={cn(
-            "inline-flex items-center gap-1.5 rounded-md px-3 py-1 text-xs font-medium",
-            "bg-primary text-primary-foreground hover:bg-primary-hover",
-            "disabled:pointer-events-none disabled:opacity-40",
+            "stg:inline-flex stg:items-center stg:gap-1.5 stg:rounded-md stg:px-3 stg:py-1 stg:text-xs stg:font-medium",
+            "stg:bg-primary stg:text-primary-foreground stg:hover:bg-primary-hover",
+            "stg:disabled:pointer-events-none stg:disabled:opacity-40",
           )}
         >
           {isAdding && <SpinnerIcon />}
@@ -606,9 +606,9 @@ function AddVariableForm({
           onClick={onCancel}
           disabled={isAdding}
           className={cn(
-            "rounded-md px-3 py-1 text-xs",
-            "text-muted-foreground hover:text-foreground hover:bg-accent-hover",
-            "disabled:pointer-events-none disabled:opacity-50",
+            "stg:rounded-md stg:px-3 stg:py-1 stg:text-xs",
+            "stg:text-muted-foreground stg:hover:text-foreground stg:hover:bg-accent-hover",
+            "stg:disabled:pointer-events-none stg:disabled:opacity-50",
           )}
         >
           Cancel
@@ -636,10 +636,10 @@ function ActionButton({
   children: React.ReactNode;
 }) {
   const colorClass = {
-    primary: "text-primary hover:text-primary-muted",
-    muted: "text-muted-foreground hover:text-foreground",
-    "muted-danger": "text-muted-foreground hover:text-destructive",
-    danger: "text-destructive hover:text-destructive-muted",
+    primary: "stg:text-primary stg:hover:text-primary-muted",
+    muted: "stg:text-muted-foreground stg:hover:text-foreground",
+    "muted-danger": "stg:text-muted-foreground stg:hover:text-destructive",
+    danger: "stg:text-destructive stg:hover:text-destructive-muted",
   }[variant];
 
   return (
@@ -649,7 +649,7 @@ function ActionButton({
       disabled={disabled}
       aria-label={label}
       className={cn(
-        "rounded p-1 transition-colors disabled:pointer-events-none disabled:opacity-40",
+        "stg:rounded stg:p-1 stg:transition-colors stg:disabled:pointer-events-none stg:disabled:opacity-40",
         colorClass,
       )}
     >
@@ -661,7 +661,7 @@ function ActionButton({
 function RowError({ error }: { error: Error | null }) {
   if (!error) return null;
   return (
-    <p className="text-destructive pb-1 text-[0.6rem]" role="alert">
+    <p className="stg:text-destructive stg:pb-1 stg:text-[0.6rem]" role="alert">
       {getUserMessage(error)}
     </p>
   );
@@ -814,7 +814,7 @@ function SpinnerIcon() {
       stroke="currentColor"
       strokeWidth="2"
       strokeLinecap="round"
-      className="animate-spin"
+      className="stg:animate-spin"
       aria-hidden="true"
     >
       <path d="M8 2a6 6 0 1 0 6 6" />

package/src/error/ErrorMessage.tsx

@@ -75,47 +75,47 @@ export function ErrorMessage({
     <div
       role="alert"
       className={cn(
-        "bg-destructive-subtle border-destructive/20 text-destructive rounded-lg border p-4",
+        "stg:bg-destructive-subtle stg:border-destructive/20 stg:text-destructive stg:rounded-lg stg:border stg:p-4",
         className,
       )}
     >
-      <div className="flex items-start gap-3">
+      <div className="stg:flex stg:items-start stg:gap-3">
         {isShield ? (
-          <ShieldXIcon className="mt-0.5 size-4 shrink-0" />
+          <ShieldXIcon className="stg:mt-0.5 stg:size-4 stg:shrink-0" />
         ) : (
-          <AlertTriangleIcon className="mt-0.5 size-4 shrink-0" />
+          <AlertTriangleIcon className="stg:mt-0.5 stg:size-4 stg:shrink-0" />
         )}
 
-        <div className="min-w-0 flex-1 space-y-1">
-          <p className="text-sm font-medium">
+        <div className="stg:min-w-0 stg:flex-1 stg:space-y-1">
+          <p className="stg:text-sm stg:font-medium">
             {title ?? CATEGORY_TITLES[category]}
           </p>
-          <p className="text-destructive-muted text-sm">{message}</p>
+          <p className="stg:text-destructive-muted stg:text-sm">{message}</p>
 
           {metadata && (
-            <div className="pt-1">
+            <div className="stg:pt-1">
               <button
                 type="button"
                 onClick={() => setDetailsOpen((prev) => !prev)}
-                className="text-destructive-muted hover:text-destructive-muted inline-flex items-center gap-1 text-xs transition-colors"
+                className="stg:text-destructive-muted stg:hover:text-destructive-muted stg:inline-flex stg:items-center stg:gap-1 stg:text-xs stg:transition-colors"
               >
                 <ChevronDownIcon
                   className={cn(
-                    "size-3 transition-transform",
-                    detailsOpen && "rotate-180",
+                    "stg:size-3 stg:transition-transform",
+                    detailsOpen && "stg:rotate-180",
                   )}
                 />
                 Technical details
               </button>
               {detailsOpen && (
-                <dl className="text-destructive-muted mt-1.5 space-y-0.5 font-mono text-xs">
-                  <div className="flex gap-2">
-                    <dt className="shrink-0">Method:</dt>
-                    <dd className="truncate">{metadata.method}</dd>
+                <dl className="stg:text-destructive-muted stg:mt-1.5 stg:space-y-0.5 stg:font-mono stg:text-xs">
+                  <div className="stg:flex stg:gap-2">
+                    <dt className="stg:shrink-0">Method:</dt>
+                    <dd className="stg:truncate">{metadata.method}</dd>
                   </div>
-                  <div className="flex gap-2">
-                    <dt className="shrink-0">Path:</dt>
-                    <dd className="truncate">{metadata.path}</dd>
+                  <div className="stg:flex stg:gap-2">
+                    <dt className="stg:shrink-0">Path:</dt>
+                    <dd className="stg:truncate">{metadata.path}</dd>
                   </div>
                 </dl>
               )}
@@ -128,12 +128,12 @@ export function ErrorMessage({
             type="button"
             onClick={retry}
             className={cn(
-              "inline-flex shrink-0 items-center gap-1.5 rounded-md border px-2.5 py-1.5 text-xs font-medium",
-              "border-destructive/20 text-destructive hover:bg-destructive-subtle",
-              "transition-colors",
+              "stg:inline-flex stg:shrink-0 stg:items-center stg:gap-1.5 stg:rounded-md stg:border stg:px-2.5 stg:py-1.5 stg:text-xs stg:font-medium",
+              "stg:border-destructive/20 stg:text-destructive stg:hover:bg-destructive-subtle",
+              "stg:transition-colors",
             )}
           >
-            <RotateCcwIcon className="size-3" />
+            <RotateCcwIcon className="stg:size-3" />
             Retry
           </button>
         )}

package/src/error/SecretFlowErrorGuide.tsx

@@ -95,29 +95,29 @@ export function SecretFlowErrorGuide({
     <div
       role="alert"
       className={cn(
-        "rounded-lg border border-amber-500/30 bg-amber-500/5 p-4",
+        "stg:rounded-lg stg:border stg:border-amber-500/30 stg:bg-amber-500/5 stg:p-4",
         className,
       )}
     >
-      <div className="flex items-start gap-3">
-        <KeyIcon className="mt-0.5 size-4 shrink-0 text-amber-600 dark:text-amber-400" />
+      <div className="stg:flex stg:items-start stg:gap-3">
+        <KeyIcon className="stg:mt-0.5 stg:size-4 stg:shrink-0 stg:text-amber-600 stg:dark:text-amber-400" />
 
-        <div className="min-w-0 flex-1 space-y-2">
-          <p className="text-sm font-medium text-amber-800 dark:text-amber-200">
+        <div className="stg:min-w-0 stg:flex-1 stg:space-y-2">
+          <p className="stg:text-sm stg:font-medium stg:text-amber-800 stg:dark:text-amber-200">
             Missing environment variables
           </p>
 
-          <div className="space-y-1.5">
+          <div className="stg:space-y-1.5">
             {Array.from(grouped).map(([server, vars]) => (
               <div key={server}>
-                <p className="text-xs text-amber-700 dark:text-amber-300">
-                  <span className="font-medium">{server}</span> requires:
+                <p className="stg:text-xs stg:text-amber-700 stg:dark:text-amber-300">
+                  <span className="stg:font-medium">{server}</span> requires:
                 </p>
-                <ul className="mt-0.5 space-y-0.5">
+                <ul className="stg:mt-0.5 stg:space-y-0.5">
                   {vars.map((v) => (
                     <li
                       key={v}
-                      className="text-xs font-mono text-amber-800/80 dark:text-amber-200/80 pl-3"
+                      className="stg:text-xs stg:font-mono stg:text-amber-800/80 stg:dark:text-amber-200/80 stg:pl-3"
                     >
                       {v}
                     </li>
@@ -127,24 +127,24 @@ export function SecretFlowErrorGuide({
             ))}
           </div>
 
-          <div className="border-t border-amber-500/20 pt-2">
-            <p className="text-xs text-amber-700/90 dark:text-amber-300/90">
+          <div className="stg:border-t stg:border-amber-500/20 stg:pt-2">
+            <p className="stg:text-xs stg:text-amber-700/90 stg:dark:text-amber-300/90">
               You can provide these values in two ways:
             </p>
-            <ul className="mt-1 space-y-0.5 text-xs text-amber-700/80 dark:text-amber-300/80">
-              <li className="flex items-start gap-1.5">
-                <span className="mt-px shrink-0">•</span>
+            <ul className="stg:mt-1 stg:space-y-0.5 stg:text-xs stg:text-amber-700/80 stg:dark:text-amber-300/80">
+              <li className="stg:flex stg:items-start stg:gap-1.5">
+                <span className="stg:mt-px stg:shrink-0">•</span>
                 <span>
                   Add them to your{" "}
-                  <strong className="font-medium">personal environment</strong>{" "}
+                  <strong className="stg:font-medium">personal environment</strong>{" "}
                   in Settings for automatic reuse across sessions.
                 </span>
               </li>
-              <li className="flex items-start gap-1.5">
-                <span className="mt-px shrink-0">•</span>
+              <li className="stg:flex stg:items-start stg:gap-1.5">
+                <span className="stg:mt-px stg:shrink-0">•</span>
                 <span>
                   Provide them as{" "}
-                  <strong className="font-medium">session variables</strong>{" "}
+                  <strong className="stg:font-medium">session variables</strong>{" "}
                   when sending a message.
                 </span>
               </li>

package/src/execution/ApprovalCard.tsx

@@ -96,15 +96,15 @@ export const ApprovalCard = memo(function ApprovalCard({
   // destructive (delete) gate keeps a red accent as a hard safety signal.
   const accentClass =
     categoryInfo.category === "delete"
-      ? "border-l-2 border-l-destructive"
-      : "border-l-2 border-l-warning";
+      ? "stg:border-l-2 stg:border-l-destructive"
+      : "stg:border-l-2 stg:border-l-warning";
 
   return (
     <div
       role="alert"
       aria-label={`Approval required for ${pendingApproval.toolName}`}
       className={cn(
-        "rounded-lg border border-border-prominent",
+        "stg:rounded-lg stg:border stg:border-border-prominent",
         accentClass,
         className,
       )}
@@ -163,16 +163,16 @@ export function ApprovalCardHeader({
   return (
     <div
       className={cn(
-        "flex items-center gap-2 px-2.5 py-1.5 text-xs",
-        bordered && "border-b border-border-muted",
+        "stg:flex stg:items-center stg:gap-2 stg:px-2.5 stg:py-1.5 stg:text-xs",
+        bordered && "stg:border-b stg:border-border-muted",
       )}
     >
-      <span className="shrink-0 text-warning" aria-hidden="true">
+      <span className="stg:shrink-0 stg:text-warning" 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">
           {categoryInfo.label}
         </span>
         {primaryArg &&
@@ -182,26 +182,26 @@ export function ApprovalCardHeader({
             // with the full path on hover, matching the ToolCallItem header.
             <FilePathLink
               path={primaryArg}
-              className="min-w-0 text-xs text-muted-foreground"
+              className="stg:min-w-0 stg:text-xs stg:text-muted-foreground"
             />
           ) : (
             // Shell is the exception: its command is shown in the body's
             // terminal session, so the header stays minimal (icon + label).
-            <span className="min-w-0 truncate font-mono text-muted-foreground">
+            <span className="stg:min-w-0 stg:truncate stg:font-mono stg:text-muted-foreground">
               {primaryArg}
             </span>
           ))}
       </span>
 
       {pendingApproval.fromSubAgent && pendingApproval.subAgentName && (
-        <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">
           via {pendingApproval.subAgentSubject || pendingApproval.subAgentName}
         </span>
       )}
 
       <WaitingDuration requestedAt={pendingApproval.requestedAt} />
 
-      <span className="shrink-0 text-warning" aria-hidden="true">
+      <span className="stg:shrink-0 stg:text-warning" aria-hidden="true">
         <ClockIcon />
       </span>
     </div>
@@ -344,9 +344,9 @@ export function ApprovalCardBody({
   }
 
   return (
-    <div className={cn("px-3 py-2.5 space-y-2", className)}>
+    <div className={cn("stg:px-3 stg:py-2.5 stg:space-y-2", className)}>
       {showMessage && (
-        <p className="text-xs text-foreground">{pendingApproval.message}</p>
+        <p className="stg:text-xs stg:text-foreground">{pendingApproval.message}</p>
       )}
 
       {preview}
@@ -357,7 +357,7 @@ export function ApprovalCardBody({
           never re-gates. A mixed turn (commands + file-tool edits) still
           reviews everything, so this line under-promises rather than over-. */}
       {categoryInfo.category === "shell" && (
-        <p className="text-[11px] italic text-muted-foreground">
+        <p className="stg:text-[11px] stg:italic stg:text-muted-foreground">
           Files this command creates or changes are covered by this approval —
           they are kept automatically, with no second review.
         </p>
@@ -368,7 +368,7 @@ export function ApprovalCardBody({
           run-lifetime lease (Approve all) is demoted to the far right via
           `ml-auto` so it never competes with — or is mis-clicked for — the
           per-call Approve (Fitts/Hick). */}
-      <div className="flex items-center gap-2 pt-1">
+      <div className="stg:flex stg:items-center stg:gap-2 stg:pt-1">
         <DecisionButton
           label="Approve"
           variant="primary"
@@ -401,7 +401,7 @@ export function ApprovalCardBody({
           onClick={() => handleAction(ApprovalAction.APPROVE_ALL)}
           isActive={activeAction === ApprovalAction.APPROVE_ALL}
           isSubmitting={isSubmitting}
-          className="ml-auto"
+          className="stg:ml-auto"
           cursorTarget="approve-all-button"
         />
       </div>
@@ -411,7 +411,7 @@ export function ApprovalCardBody({
           on hover. */}
       {showGateReason && (
         <p
-          className="text-[11px] italic text-muted-foreground"
+          className="stg:text-[11px] stg:italic stg:text-muted-foreground"
           title={gateReason ?? undefined}
           data-cursor-target="approval-gate-reason"
         >
@@ -479,7 +479,7 @@ function WaitingDuration({ requestedAt }: { requestedAt: string }) {
   if (elapsed === null) return null;
 
   return (
-    <span className="shrink-0 text-xs text-muted-foreground">
+    <span className="stg:shrink-0 stg:text-xs stg:text-muted-foreground">
       {formatElapsed(elapsed)}
     </span>
   );

package/src/execution/ArtifactApplyButton.tsx

@@ -41,16 +41,16 @@ export function ArtifactApplyButton({
       disabled={!canApply}
       aria-busy={isApplying}
       className={cn(
-        "rounded-md px-4 py-1.5 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",
+        "stg:rounded-md stg:px-4 stg:py-1.5 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",
         canApply
-          ? "bg-primary text-primary-foreground hover:bg-primary-hover"
-          : "bg-muted text-muted-foreground",
+          ? "stg:bg-primary stg:text-primary-foreground stg:hover:bg-primary-hover"
+          : "stg:bg-muted stg:text-muted-foreground",
       )}
     >
       {isApplying ? (
-        <span className="inline-flex items-center gap-1.5">
+        <span className="stg:inline-flex stg:items-center stg:gap-1.5">
           <SpinnerIcon />
           Applying{"\u2026"}
         </span>
@@ -70,7 +70,7 @@ function SpinnerIcon() {
       fill="none"
       stroke="currentColor"
       strokeWidth="1.5"
-      className="shrink-0 animate-spin"
+      className="stg:shrink-0 stg:animate-spin"
       aria-hidden="true"
     >
       <path d="M6 1.5A4.5 4.5 0 1 1 1.5 6" strokeLinecap="round" />