@stigmer/react 3.9.0 → 3.11.0

package/src/execution/ArtifactContentBody.tsx

@@ -84,14 +84,14 @@ function DirectoryContentView({
   const entries = artifact.entries;
 
   return (
-    <div className="p-4">
+    <div className="stg:p-4">
       {skillDetection.detected && (
-        <div className="mb-4 rounded-md bg-primary-subtle p-3">
-          <p className="text-sm font-medium text-foreground">
+        <div className="stg:mb-4 stg:rounded-md stg:bg-primary-subtle stg:p-3">
+          <p className="stg:text-sm stg:font-medium stg:text-foreground">
             {skillDetection.skillName}
           </p>
           {skillDetection.skillDescription && (
-            <p className="mt-1 text-xs text-muted-foreground">
+            <p className="stg:mt-1 stg:text-xs stg:text-muted-foreground">
               {skillDetection.skillDescription}
             </p>
           )}
@@ -100,23 +100,23 @@ function DirectoryContentView({
 
       {entries.length > 0 ? (
         <div>
-          <h3 className="mb-2 text-xs font-medium text-muted-foreground">
+          <h3 className="stg:mb-2 stg:text-xs stg:font-medium stg:text-muted-foreground">
             Files ({entries.length})
           </h3>
-          <ul className="space-y-0.5" role="list">
+          <ul className="stg:space-y-0.5" role="list">
             {entries.map((entry) => (
               <li
                 key={entry}
-                className="flex items-center gap-2 rounded-sm px-2 py-1 font-mono text-xs text-foreground"
+                className="stg:flex stg:items-center stg:gap-2 stg:rounded-sm stg:px-2 stg:py-1 stg:font-mono stg:text-xs stg:text-foreground"
               >
                 <EntryIcon name={entry} />
-                <span className="min-w-0 truncate">{entry}</span>
+                <span className="stg:min-w-0 stg:truncate">{entry}</span>
               </li>
             ))}
           </ul>
         </div>
       ) : (
-        <p className="text-sm text-muted-foreground">
+        <p className="stg:text-sm stg:text-muted-foreground">
           File listing not available.
         </p>
       )}
@@ -144,7 +144,7 @@ function FileSmallIcon() {
       strokeWidth="1.5"
       strokeLinecap="round"
       strokeLinejoin="round"
-      className="shrink-0 text-muted-foreground"
+      className="stg:shrink-0 stg:text-muted-foreground"
       aria-hidden="true"
     >
       <path d="M8 1H4C3.45 1 3 1.45 3 2V12C3 12.55 3.45 13 4 13H10C10.55 13 11 12.55 11 12V4L8 1Z" />
@@ -164,7 +164,7 @@ function FolderSmallIcon() {
       strokeWidth="1.5"
       strokeLinecap="round"
       strokeLinejoin="round"
-      className="shrink-0 text-muted-foreground"
+      className="stg:shrink-0 stg:text-muted-foreground"
       aria-hidden="true"
     >
       <path d="M13 11C13 11.55 12.55 12 12 12H2C1.45 12 1 11.55 1 11V3C1 2.45 1.45 2 2 2H5L7 4H12C12.55 4 13 4.45 13 5V11Z" />

package/src/execution/ArtifactContentRenderer.tsx

@@ -146,9 +146,9 @@ function MarkdownView({
 
   return (
     <div>
-      <div className="flex items-center border-b border-border px-4 py-1.5">
+      <div className="stg:flex stg:items-center stg:border-b stg:border-border stg:px-4 stg:py-1.5">
         <div
-          className="inline-flex rounded-md bg-muted p-0.5"
+          className="stg:inline-flex stg:rounded-md stg:bg-muted stg:p-0.5"
           role="tablist"
           aria-label="View mode"
         >
@@ -166,7 +166,7 @@ function MarkdownView({
       </div>
 
       {tab === "rendered" ? (
-        <div className="p-5">
+        <div className="stg:p-5">
           <Markdown
             remarkPlugins={REMARK_PLUGINS}
             components={MARKDOWN_COMPONENTS}
@@ -197,11 +197,11 @@ function TabButton({
       aria-selected={active}
       onClick={onClick}
       className={cn(
-        "rounded-sm px-2.5 py-1 text-xs font-medium transition-colors",
-        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+        "stg:rounded-sm 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",
         active
-          ? "bg-background text-foreground shadow-sm"
-          : "text-muted-foreground hover:text-foreground",
+          ? "stg:bg-background stg:text-foreground stg:shadow-sm"
+          : "stg:text-muted-foreground stg:hover:text-foreground",
       )}
     >
       {label}
@@ -231,7 +231,7 @@ function highlightYamlLine(line: string): ReactNode {
   if (!line.trim()) return line;
 
   if (/^---\s*$/.test(line) || /^\.\.\.\s*$/.test(line)) {
-    return <span className="text-muted-foreground">{line}</span>;
+    return <span className="stg:text-muted-foreground">{line}</span>;
   }
 
   const commentMatch = line.match(/^(\s*)(#.*)$/);
@@ -239,7 +239,7 @@ function highlightYamlLine(line: string): ReactNode {
     return (
       <>
         {commentMatch[1]}
-        <span className="text-muted-foreground italic">{commentMatch[2]}</span>
+        <span className="stg:text-muted-foreground stg:italic">{commentMatch[2]}</span>
       </>
     );
   }
@@ -250,8 +250,8 @@ function highlightYamlLine(line: string): ReactNode {
     return (
       <>
         {indent}
-        <span className="text-primary">{key}</span>
-        <span className="text-muted-foreground">{colon}</span>
+        <span className="stg:text-primary">{key}</span>
+        <span className="stg:text-muted-foreground">{colon}</span>
         {value ? highlightYamlValue(value) : null}
       </>
     );
@@ -264,11 +264,11 @@ function highlightYamlValue(value: string): ReactNode {
   const trimmed = value.trim();
 
   if (/^[|>][-+]?\s*$/.test(trimmed)) {
-    return <span className="text-muted-foreground">{value}</span>;
+    return <span className="stg:text-muted-foreground">{value}</span>;
   }
 
   if (/^(true|false|null|~)$/.test(trimmed)) {
-    return <span className="font-medium">{value}</span>;
+    return <span className="stg:font-medium">{value}</span>;
   }
 
   return <>{value}</>;
@@ -285,7 +285,7 @@ function YamlView({
   const lines = content.split("\n");
 
   return (
-    <pre className="overflow-x-auto p-4 font-mono text-xs leading-relaxed text-foreground">
+    <pre className="stg:overflow-x-auto stg:p-4 stg:font-mono stg:text-xs stg:leading-relaxed stg:text-foreground">
       <code ref={containerRef}>
         {lines.map((line, i) => (
           <span
@@ -294,13 +294,13 @@ function YamlView({
             className={cn(
               // Transparent left border by default so revealing a line only
               // changes its color — never shifts the text (no layout jump).
-              "block border-l-2 border-transparent",
-              isRevealed(i + 1) && "border-primary bg-primary-subtle",
+              "stg:block stg:border-l-2 stg:border-transparent",
+              isRevealed(i + 1) && "stg:border-primary stg:bg-primary-subtle",
             )}
           >
             {/* whitespace-pre inner + `\n` fallback preserves indentation and
                 the height of blank lines, mirroring LineNumberedPre. */}
-            <span className="whitespace-pre">
+            <span className="stg:whitespace-pre">
               {line.trim() ? highlightYamlLine(line) : "\n"}
             </span>
           </span>
@@ -330,8 +330,8 @@ function highlightJson(content: string): ReactNode {
         <span key={i}>
           {i > 0 && "\n"}
           {indent}
-          <span className="text-primary">&quot;{key}&quot;</span>
-          <span className="text-muted-foreground">{colon}</span>
+          <span className="stg:text-primary">&quot;{key}&quot;</span>
+          <span className="stg:text-muted-foreground">{colon}</span>
           {highlightJsonValue(rest)}
         </span>
       );
@@ -353,7 +353,7 @@ function highlightJsonValue(value: string): ReactNode {
     return (
       <>
         {" "}
-        <span className="text-success">{trimmed}</span>
+        <span className="stg:text-success">{trimmed}</span>
         {trailingComma}
       </>
     );
@@ -363,7 +363,7 @@ function highlightJsonValue(value: string): ReactNode {
     return (
       <>
         {" "}
-        <span className="font-medium">{trimmed}</span>
+        <span className="stg:font-medium">{trimmed}</span>
         {trailingComma}
       </>
     );
@@ -373,7 +373,7 @@ function highlightJsonValue(value: string): ReactNode {
     return (
       <>
         {" "}
-        <span className="text-warning">{trimmed}</span>
+        <span className="stg:text-warning">{trimmed}</span>
         {trailingComma}
       </>
     );
@@ -384,7 +384,7 @@ function highlightJsonValue(value: string): ReactNode {
 
 function JsonView({ content }: { readonly content: string }) {
   return (
-    <pre className="overflow-x-auto p-4 font-mono text-xs leading-relaxed text-foreground">
+    <pre className="stg:overflow-x-auto stg:p-4 stg:font-mono stg:text-xs stg:leading-relaxed stg:text-foreground">
       <code>{highlightJson(content)}</code>
     </pre>
   );
@@ -422,7 +422,7 @@ function LineNumberedPre({
   const gutterWidth = String(lines.length).length;
 
   return (
-    <pre className="overflow-x-auto font-mono text-xs leading-relaxed text-foreground">
+    <pre className="stg:overflow-x-auto stg:font-mono stg:text-xs stg:leading-relaxed stg:text-foreground">
       <code ref={containerRef}>
         {lines.map((line, i) => (
           <span
@@ -431,18 +431,18 @@ function LineNumberedPre({
             className={cn(
               // Transparent left border by default so a reveal only recolors the
               // row — never shifts its text (no layout jump).
-              "flex border-l-2 border-transparent",
-              isRevealed(i + 1) && "border-primary bg-primary-subtle",
+              "stg:flex stg:border-l-2 stg:border-transparent",
+              isRevealed(i + 1) && "stg:border-primary stg:bg-primary-subtle",
             )}
           >
             <span
-              className="sticky left-0 select-none bg-background pr-4 text-right text-muted-foreground"
+              className="stg:sticky stg:left-0 stg:select-none stg:bg-background stg:pr-4 stg:text-right stg:text-muted-foreground"
               style={{ minWidth: `${gutterWidth + 2}ch` }}
               aria-hidden="true"
             >
               {i + 1}
             </span>
-            <span className="flex-1 whitespace-pre pl-2">{line || "\n"}</span>
+            <span className="stg:flex-1 stg:whitespace-pre stg:pl-2">{line || "\n"}</span>
           </span>
         ))}
       </code>
@@ -456,7 +456,7 @@ function LineNumberedPre({
 
 function TruncationWarning() {
   return (
-    <div className="border-t border-border bg-warning/10 px-4 py-2 text-xs text-warning">
+    <div className="stg:border-t stg:border-border stg:bg-warning/10 stg:px-4 stg:py-2 stg:text-xs stg:text-warning">
       Content was truncated. Download the full file for complete content.
     </div>
   );

package/src/execution/ArtifactDocument.tsx

@@ -78,36 +78,36 @@ export function ArtifactDocument({
     <div
       role="article"
       aria-label={`Artifact ${artifact.name}`}
-      className={cn("flex min-h-0 min-w-0 flex-1 flex-col", className)}
+      className={cn("stg:flex stg:min-h-0 stg:min-w-0 stg:flex-1 stg:flex-col", className)}
     >
       {/* Toolbar sticks to the top of the editor pane's scroll container so the
           file identity and actions stay visible while the body scrolls. Rows
           wrap on narrow panes (min-w-0 + flex-wrap) rather than forcing a
           horizontal scrollbar — the DD-20 reflow contract. */}
-      <div className="sticky top-0 z-10 flex min-w-0 flex-wrap items-center gap-x-3 gap-y-1.5 border-b border-border bg-background px-4 py-2">
-        <span className="shrink-0 text-muted-foreground">
+      <div className="stg:sticky stg:top-0 stg:z-10 stg:flex stg:min-w-0 stg:flex-wrap stg:items-center stg:gap-x-3 stg:gap-y-1.5 stg:border-b stg:border-border stg:bg-background stg:px-4 stg:py-2">
+        <span className="stg:shrink-0 stg:text-muted-foreground">
           {inspection.isDirectory ? <FolderIcon /> : <FileIcon />}
         </span>
-        <span className="truncate text-sm font-medium text-foreground">
+        <span className="stg:truncate stg:text-sm stg:font-medium stg:text-foreground">
           {artifact.name}
           {inspection.isDirectory && "/"}
         </span>
-        <span className="shrink-0 text-[0.65rem] tabular-nums text-muted-foreground-faint">
+        <span className="stg:shrink-0 stg:text-[0.65rem] stg:tabular-nums stg:text-muted-foreground-faint">
           {formatArtifactSize(artifact.sizeBytes)}
         </span>
         {inspection.isDetecting && !inspection.detectionLabel && (
           <span
-            className="h-4 w-24 shrink-0 animate-pulse rounded-full bg-muted"
+            className="stg:h-4 stg:w-24 stg:shrink-0 stg:animate-pulse stg:rounded-full stg:bg-muted"
             aria-hidden="true"
           />
         )}
         {inspection.detectionLabel && (
-          <span className="inline-flex shrink-0 items-center rounded-full bg-primary-subtle px-2 py-0.5 text-xs font-medium text-primary">
+          <span className="stg:inline-flex stg:shrink-0 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">
             {inspection.detectionLabel}
           </span>
         )}
 
-        <div className="ml-auto flex min-w-0 flex-wrap items-center gap-3">
+        <div className="stg:ml-auto stg:flex stg:min-w-0 stg:flex-wrap stg:items-center stg:gap-3">
           {showCopy && (
             <button
               type="button"
@@ -116,10 +116,10 @@ export function ArtifactDocument({
                 inspection.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",
                 inspection.copied
-                  ? "text-success"
-                  : "text-muted-foreground hover:text-foreground",
+                  ? "stg:text-success"
+                  : "stg:text-muted-foreground stg:hover:text-foreground",
                 FOCUS_RING_CLASSES,
               )}
             >
@@ -132,7 +132,7 @@ export function ArtifactDocument({
             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,
             )}
           >
@@ -163,10 +163,10 @@ export function ArtifactDocument({
         error={inspection.error}
         isTruncated={inspection.isTruncated}
         skillDetection={inspection.skillDetection}
-        className="min-w-0"
+        className="stg:min-w-0"
       />
 
-      <div role="status" aria-live="polite" aria-atomic="true" className="sr-only">
+      <div role="status" aria-live="polite" aria-atomic="true" className="stg:sr-only">
         {inspection.copied && "Content copied to clipboard"}
       </div>
     </div>
@@ -197,7 +197,7 @@ function ApplyCluster({
 }) {
   if (applyResult) {
     return (
-      <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>
@@ -205,13 +205,13 @@ function ApplyCluster({
   }
   if (applyError) {
     return (
-      <span className="inline-flex items-center gap-2" role="alert">
-        <span className="text-xs text-destructive">{applyError.message}</span>
+      <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,
           )}
         >
@@ -240,7 +240,7 @@ function ApplyCluster({
 // ---------------------------------------------------------------------------
 
 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";
 
 // ---------------------------------------------------------------------------
 // Inline SVG icons (SDK independence — no lucide dependency)
@@ -294,7 +294,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" />
@@ -314,7 +314,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" />
@@ -335,7 +335,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/ArtifactFileContent.tsx

@@ -44,11 +44,11 @@ export function ArtifactFileContent({
 }: ArtifactFileContentProps) {
   if (isLoading) {
     return (
-      <div className="space-y-2 p-4" aria-busy="true" aria-label="Loading content">
+      <div className="stg:space-y-2 stg:p-4" aria-busy="true" aria-label="Loading content">
         {SKELETON_LINE_WIDTHS.map((width, i) => (
           <div
             key={i}
-            className="h-4 animate-pulse rounded bg-muted"
+            className="stg:h-4 stg:animate-pulse stg:rounded stg:bg-muted"
             style={{ width: `${width}%` }}
             aria-hidden="true"
           />
@@ -59,16 +59,16 @@ export function ArtifactFileContent({
 
   if (error) {
     return (
-      <div className="flex flex-col items-center justify-center gap-2 p-8 text-center">
+      <div className="stg:flex stg:flex-col stg:items-center stg:justify-center stg:gap-2 stg:p-8 stg:text-center">
         <ErrorAlertIcon />
-        <p className="text-sm text-destructive">{error.message}</p>
+        <p className="stg:text-sm stg:text-destructive">{error.message}</p>
       </div>
     );
   }
 
   if (content === null) {
     return (
-      <div className="p-8 text-center text-sm text-muted-foreground">
+      <div className="stg:p-8 stg:text-center stg:text-sm stg:text-muted-foreground">
         Content not available for preview.
       </div>
     );
@@ -99,7 +99,7 @@ function ErrorAlertIcon() {
       strokeWidth="1.5"
       strokeLinecap="round"
       strokeLinejoin="round"
-      className="text-destructive"
+      className="stg:text-destructive"
       aria-hidden="true"
     >
       <circle cx="8" cy="8" r="6.5" />

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" />