@stigmer/react 3.10.0 → 3.11.1-dev.20260812192248

package/src/execution/ArtifactPreviewModal.tsx

@@ -120,7 +120,7 @@ export function ArtifactPreviewContent({
   }, [onImplement, onClose]);
 
   return (
-    <div className={cn("flex max-h-[80vh] flex-col", className)}>
+    <div className={cn("stg:flex stg:max-h-[80vh] stg:flex-col", className)}>
       <ContentHeader
         artifact={artifact}
         isDirectory={inspection.isDirectory}
@@ -137,7 +137,7 @@ export function ArtifactPreviewContent({
         error={inspection.error}
         isTruncated={inspection.isTruncated}
         skillDetection={inspection.skillDetection}
-        className="min-h-0 flex-1 overflow-y-auto border-t border-border"
+        className="stg:min-h-0 stg:flex-1 stg:overflow-y-auto stg:border-t stg:border-border"
       />
 
       <ActionBar
@@ -161,7 +161,7 @@ export function ArtifactPreviewContent({
         role="status"
         aria-live="polite"
         aria-atomic="true"
-        className="sr-only"
+        className="stg:sr-only"
       >
         {inspection.copied && "Content copied to clipboard"}
       </div>
@@ -280,8 +280,8 @@ export function ArtifactPreviewModal({
       onCancel={handleCancel}
       aria-label={`Preview ${artifact.name}`}
       className={cn(
-        "fixed inset-0 m-auto w-full max-w-3xl rounded-lg border border-border bg-background p-0 text-foreground shadow-lg outline-none",
-        "[&::backdrop]:bg-black/50",
+        "stg:fixed stg:inset-0 stg:m-auto stg:w-full stg:max-w-3xl stg:rounded-lg stg:border stg:border-border stg:bg-background stg:p-0 stg:text-foreground stg:shadow-lg stg:outline-none",
+        "stg:[&::backdrop]:bg-black/50",
         className,
       )}
     >
@@ -305,7 +305,7 @@ export function ArtifactPreviewModal({
 // ---------------------------------------------------------------------------
 
 const FOCUS_RING_CLASSES =
-  "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:rounded-sm";
+  "stg:focus-visible:outline-none stg:focus-visible:ring-2 stg:focus-visible:ring-ring stg:focus-visible:rounded-sm";
 
 // ---------------------------------------------------------------------------
 // ContentHeader (internal)
@@ -325,28 +325,28 @@ function ContentHeader({
   readonly onClose: () => void;
 }) {
   return (
-    <div className="flex items-start gap-3 p-4 pb-3">
-      <span className="mt-0.5 shrink-0 text-muted-foreground">
+    <div className="stg:flex stg:items-start stg:gap-3 stg:p-4 stg:pb-3">
+      <span className="stg:mt-0.5 stg:shrink-0 stg:text-muted-foreground">
         {isDirectory ? <FolderIcon /> : <FileIcon />}
       </span>
 
-      <div className="min-w-0 flex-1">
-        <h2 className="truncate text-sm font-semibold text-foreground">
+      <div className="stg:min-w-0 stg:flex-1">
+        <h2 className="stg:truncate stg:text-sm stg:font-semibold stg:text-foreground">
           {artifact.name}
           {isDirectory && "/"}
         </h2>
-        <div className="mt-0.5 flex flex-wrap items-center gap-2">
-          <span className="text-xs tabular-nums text-muted-foreground">
+        <div className="stg:mt-0.5 stg:flex stg:flex-wrap stg:items-center stg:gap-2">
+          <span className="stg:text-xs stg:tabular-nums stg:text-muted-foreground">
             {formatArtifactSize(artifact.sizeBytes)}
           </span>
           {isDetecting && !detectionLabel && (
             <span
-              className="h-4 w-24 animate-pulse rounded-full bg-muted"
+              className="stg:h-4 stg:w-24 stg:animate-pulse stg:rounded-full stg:bg-muted"
               aria-hidden="true"
             />
           )}
           {detectionLabel && (
-            <span className="inline-flex items-center rounded-full bg-primary-subtle px-2 py-0.5 text-xs font-medium text-primary">
+            <span className="stg:inline-flex stg:items-center stg:rounded-full stg:bg-primary-subtle stg:px-2 stg:py-0.5 stg:text-xs stg:font-medium stg:text-primary">
               {detectionLabel}
             </span>
           )}
@@ -358,7 +358,7 @@ function ContentHeader({
         onClick={onClose}
         aria-label="Close preview"
         className={cn(
-          "shrink-0 rounded-sm p-1 text-muted-foreground transition-colors hover:text-foreground",
+          "stg:shrink-0 stg:rounded-sm stg:p-1 stg:text-muted-foreground stg:transition-colors stg:hover:text-foreground",
           FOCUS_RING_CLASSES,
         )}
       >
@@ -405,18 +405,18 @@ function ActionBar({
 }) {
   const { download, isDownloading } = useArtifactDownload(executionId);
   return (
-    <div className="flex items-center justify-between gap-3 border-t border-border px-4 py-3">
-      <div className="flex items-center gap-3">
+    <div className="stg:flex stg:items-center stg:justify-between stg:gap-3 stg:border-t stg:border-border stg:px-4 stg:py-3">
+      <div className="stg:flex stg:items-center stg:gap-3">
         {!isDirectory && hasContent && (
           <button
             type="button"
             onClick={onCopy}
             aria-label={copied ? "Copied to clipboard" : "Copy content"}
             className={cn(
-              "inline-flex items-center gap-1.5 text-xs font-medium transition-colors",
+              "stg:inline-flex stg:items-center stg:gap-1.5 stg:text-xs stg:font-medium stg:transition-colors",
               copied
-                ? "text-success"
-                : "text-muted-foreground hover:text-foreground",
+                ? "stg:text-success"
+                : "stg:text-muted-foreground stg:hover:text-foreground",
               FOCUS_RING_CLASSES,
             )}
           >
@@ -430,7 +430,7 @@ function ActionBar({
           onClick={() => download(artifact.storageKey, artifact.name)}
           disabled={isDownloading}
           className={cn(
-            "inline-flex items-center gap-1.5 text-xs font-medium text-muted-foreground transition-colors hover:text-foreground disabled:opacity-50",
+            "stg:inline-flex stg:items-center stg:gap-1.5 stg:text-xs stg:font-medium stg:text-muted-foreground stg:transition-colors stg:hover:text-foreground stg:disabled:opacity-50",
             FOCUS_RING_CLASSES,
           )}
         >
@@ -439,15 +439,15 @@ function ActionBar({
         </button>
       </div>
 
-      <div className="flex shrink-0 items-center gap-3">
+      <div className="stg:flex stg:shrink-0 stg:items-center stg:gap-3">
         {onImplement && (
           <button
             type="button"
             onClick={onImplement}
             className={cn(
-              "inline-flex items-center gap-1.5 rounded-md px-4 py-1.5 text-xs font-medium transition-colors",
-              "bg-primary text-primary-foreground hover:bg-primary-hover",
-              "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+              "stg:inline-flex stg:items-center stg:gap-1.5 stg:rounded-md stg:px-4 stg:py-1.5 stg:text-xs stg:font-medium stg:transition-colors",
+              "stg:bg-primary stg:text-primary-foreground stg:hover:bg-primary-hover",
+              "stg:focus-visible:outline-none stg:focus-visible:ring-2 stg:focus-visible:ring-ring stg:focus-visible:ring-offset-2",
             )}
           >
             <ImplementIcon />
@@ -455,20 +455,20 @@ function ActionBar({
           </button>
         )}
         {applyResult ? (
-          <span className="inline-flex items-center gap-1.5 text-xs font-medium text-success">
+          <span className="stg:inline-flex stg:items-center stg:gap-1.5 stg:text-xs stg:font-medium stg:text-success">
             <CheckIcon />
             Applied {"\u00B7"} {applyResult.name || applyResult.kind}
           </span>
         ) : applyError ? (
-          <span className="inline-flex items-center gap-2" role="alert">
-            <span className="text-xs text-destructive">
+          <span className="stg:inline-flex stg:items-center stg:gap-2" role="alert">
+            <span className="stg:text-xs stg:text-destructive">
               {applyError.message}
             </span>
             <button
               type="button"
               onClick={onApply}
               className={cn(
-                "text-xs font-medium text-destructive underline transition-colors hover:text-destructive-muted",
+                "stg:text-xs stg:font-medium stg:text-destructive stg:underline stg:transition-colors stg:hover:text-destructive-muted",
                 FOCUS_RING_CLASSES,
               )}
             >
@@ -561,7 +561,7 @@ function CopyIcon() {
       strokeWidth="1.2"
       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" />
@@ -581,7 +581,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" />
@@ -602,7 +602,7 @@ function ImplementIcon() {
       strokeWidth="1.5"
       strokeLinecap="round"
       strokeLinejoin="round"
-      className="shrink-0"
+      className="stg:shrink-0"
       aria-hidden="true"
     >
       <path d="M2 6h8M7 3l3 3-3 3" />
@@ -621,7 +621,7 @@ function CheckIcon() {
       strokeWidth="1.5"
       strokeLinecap="round"
       strokeLinejoin="round"
-      className="shrink-0"
+      className="stg:shrink-0"
       aria-hidden="true"
     >
       <path d="M2 6.5L4.5 9L10 3" />

package/src/execution/ArtifactRowView.tsx

@@ -5,6 +5,7 @@
 
 import { cn } from "@stigmer/theme";
 import { FileTypeIcon, FolderTypeIcon } from "../internal/file-icons/index.js";
+import { Tooltip, TooltipContent, TooltipTrigger } from "../internal/tooltip.js";
 import type { ArtifactRowItem } from "./artifact-row-item.js";
 import { formatArtifactSize } from "./artifact-utils.js";
 
@@ -58,55 +59,74 @@ export function ArtifactRowView({
   className,
 }: ArtifactRowViewProps) {
   return (
-    <li className={cn("group flex 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",
-        )}
-      >
-        <span className="shrink-0 text-muted-foreground">
-          {item.isDirectory ? (
-            <FolderTypeIcon open={false} />
-          ) : (
-            <FileTypeIcon fileName={item.name} />
-          )}
-        </span>
-        <span className="min-w-0 flex-1 truncate text-foreground">
-          {item.name}
-          {item.isDirectory && "/"}
-          {item.subtitlePath && (
-            <span className="ml-1.5 text-[0.65rem] text-muted-foreground">
-              {item.subtitlePath}
-            </span>
-          )}
-        </span>
-        <span className="shrink-0 tabular-nums text-[0.65rem] text-muted-foreground-faint">
-          {formatArtifactSize(item.sizeBytes)}
-        </span>
-      </button>
-      <button
-        type="button"
-        onClick={onDownload}
-        disabled={isDownloading}
-        aria-label={
-          isDownloading ? `Preparing ${item.name}` : `Download ${item.name}`
-        }
-        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",
-        )}
-      >
-        <DownloadIcon />
-      </button>
+    <li className={cn("stg:group stg:flex stg:items-stretch", className)}>
+      {/* The open button is its own tooltip trigger (hover and keyboard focus
+          both reveal the full path); the Download button's trigger is a
+          wrapper span so the hint survives the in-flight `disabled` state
+          (browsers suppress pointer events on disabled form controls, so a
+          disabled button can never open its own tooltip). */}
+      <Tooltip>
+        <TooltipTrigger
+          render={
+            <button
+              type="button"
+              onClick={onOpen}
+              onDoubleClick={onActivate}
+              className={cn(
+                "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="stg:shrink-0 stg:text-muted-foreground">
+            {item.isDirectory ? (
+              <FolderTypeIcon open={false} />
+            ) : (
+              <FileTypeIcon fileName={item.name} />
+            )}
+          </span>
+          <span className="stg:min-w-0 stg:flex-1 stg:truncate stg:text-foreground">
+            {item.name}
+            {item.isDirectory && "/"}
+            {item.subtitlePath && (
+              <span className="stg:ml-1.5 stg:text-[0.65rem] stg:text-muted-foreground">
+                {item.subtitlePath}
+              </span>
+            )}
+          </span>
+          <span className="stg:shrink-0 stg:tabular-nums stg:text-[0.65rem] stg:text-muted-foreground-faint">
+            {formatArtifactSize(item.sizeBytes)}
+          </span>
+        </TooltipTrigger>
+        <TooltipContent side="top" className="stg:break-all">
+          {item.tooltip}
+        </TooltipContent>
+      </Tooltip>
+      <Tooltip>
+        <TooltipTrigger render={<span className="stg:flex stg:shrink-0" />}>
+          <button
+            type="button"
+            onClick={onDownload}
+            disabled={isDownloading}
+            aria-label={
+              isDownloading ? `Preparing ${item.name}` : `Download ${item.name}`
+            }
+            className={cn(
+              "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 />
+          </button>
+        </TooltipTrigger>
+        <TooltipContent side="top">
+          {item.isDirectory ? "Download ZIP" : "Download"}
+        </TooltipContent>
+      </Tooltip>
     </li>
   );
 }
@@ -126,7 +146,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>