@stigmer/react 3.10.0 → 3.11.1-dev.20260812192248

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,18 +401,16 @@ 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>
 
       {/* De-emphasized provenance, trailing the decision it explains. Only the
-          informative reasons reach here (see showGateReason); the full phrase is
-          on hover. */}
+          informative reasons reach here (see showGateReason). */}
       {showGateReason && (
         <p
-          className="text-[11px] italic text-muted-foreground"
-          title={gateReason ?? undefined}
+          className="stg:text-[11px] stg:italic stg:text-muted-foreground"
           data-cursor-target="approval-gate-reason"
         >
           {gateReason}
@@ -479,7 +477,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" />

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