@stigmer/react 3.10.0 → 3.11.0

package/src/workflow/execution-history/HealthMetricsStrip.tsx

@@ -40,15 +40,15 @@ export const HealthMetricsStrip = memo(function HealthMetricsStrip({
     return (
       <div
         className={cn(
-          "flex items-center gap-4 overflow-x-auto rounded-lg border border-[var(--stgm-border,#d4d4d8)] bg-[var(--stgm-background,#fff)] px-4 py-2.5",
+          "stg:flex stg:items-center stg:gap-4 stg:overflow-x-auto stg:rounded-lg stg:border stg:border-[var(--stgm-border,#d4d4d8)] stg:bg-[var(--stgm-background,#fff)] stg:px-4 stg:py-2.5",
           className,
         )}
         aria-label="Loading health metrics"
       >
         {Array.from({ length: 6 }, (_, i) => (
-          <div key={i} className="flex items-center gap-2">
-            <div className="h-3 w-12 animate-pulse rounded bg-[var(--stgm-muted,#e5e5e5)]" />
-            <div className="h-4 w-8 animate-pulse rounded bg-[var(--stgm-muted,#e5e5e5)]" />
+          <div key={i} className="stg:flex stg:items-center stg:gap-2">
+            <div className="stg:h-3 stg:w-12 stg:animate-pulse stg:rounded stg:bg-[var(--stgm-muted,#e5e5e5)]" />
+            <div className="stg:h-4 stg:w-8 stg:animate-pulse stg:rounded stg:bg-[var(--stgm-muted,#e5e5e5)]" />
           </div>
         ))}
       </div>
@@ -63,11 +63,11 @@ export const HealthMetricsStrip = memo(function HealthMetricsStrip({
 
   const successPct = successRate >= 0 ? `${Math.round(successRate * 100)}%` : "\u2014";
   const successColor = successRate >= 0.9
-    ? "text-[var(--stgm-success,#22c55e)]"
+    ? "stg:text-[var(--stgm-success,#22c55e)]"
     : successRate >= 0.7
-      ? "text-[var(--stgm-warning,#f59e0b)]"
+      ? "stg:text-[var(--stgm-warning,#f59e0b)]"
       : successRate >= 0
-        ? "text-[var(--stgm-destructive,#ef4444)]"
+        ? "stg:text-[var(--stgm-destructive,#ef4444)]"
         : "";
 
   const avgDuration = summary.avgDuration
@@ -87,7 +87,7 @@ export const HealthMetricsStrip = memo(function HealthMetricsStrip({
       role="region"
       aria-label="Execution health metrics"
       className={cn(
-        "flex flex-wrap items-center gap-x-4 gap-y-1 rounded-lg border border-[var(--stgm-border,#d4d4d8)] bg-[var(--stgm-background,#fff)] px-4 py-2.5",
+        "stg:flex stg:flex-wrap stg:items-center stg:gap-x-4 stg:gap-y-1 stg:rounded-lg stg:border stg:border-[var(--stgm-border,#d4d4d8)] stg:bg-[var(--stgm-background,#fff)] stg:px-4 stg:py-2.5",
         className,
       )}
     >
@@ -102,7 +102,7 @@ export const HealthMetricsStrip = memo(function HealthMetricsStrip({
       <Metric
         label="Active"
         value={String(activeCount)}
-        valueClassName={activeCount > 0 ? "text-[var(--stgm-primary,#6366f1)]" : ""}
+        valueClassName={activeCount > 0 ? "stg:text-[var(--stgm-primary,#6366f1)]" : ""}
         badge={activeCount > 0 ? <LiveDot /> : undefined}
       />
       <Divider />
@@ -130,11 +130,11 @@ function Metric({
   readonly badge?: React.ReactNode;
 }) {
   return (
-    <div className="flex items-baseline gap-1.5">
-      <span className="text-[11px] font-medium text-[var(--stgm-muted-foreground,#737373)] whitespace-nowrap">
+    <div className="stg:flex stg:items-baseline stg:gap-1.5">
+      <span className="stg:text-[11px] stg:font-medium stg:text-[var(--stgm-muted-foreground,#737373)] stg:whitespace-nowrap">
         {label}
       </span>
-      <span className={cn("text-sm font-semibold tabular-nums text-[var(--stgm-foreground,#1a1a2e)]", valueClassName)}>
+      <span className={cn("stg:text-sm stg:font-semibold stg:tabular-nums stg:text-[var(--stgm-foreground,#1a1a2e)]", valueClassName)}>
         {value}
       </span>
       {badge}
@@ -146,16 +146,16 @@ function Divider() {
   return (
     <span
       aria-hidden="true"
-      className="h-4 w-px shrink-0 bg-[var(--stgm-border,#d4d4d8)]"
+      className="stg:h-4 stg:w-px stg:shrink-0 stg:bg-[var(--stgm-border,#d4d4d8)]"
     />
   );
 }
 
 function LiveDot() {
   return (
-    <span className="relative inline-flex h-1.5 w-1.5" aria-hidden="true">
-      <span className="absolute inline-flex h-full w-full animate-ping rounded-full bg-[var(--stgm-primary,#6366f1)] opacity-75" />
-      <span className="relative inline-flex h-1.5 w-1.5 rounded-full bg-[var(--stgm-primary,#6366f1)]" />
+    <span className="stg:relative stg:inline-flex stg:h-1.5 stg:w-1.5" aria-hidden="true">
+      <span className="stg:absolute stg:inline-flex stg:h-full stg:w-full stg:animate-ping stg:rounded-full stg:bg-[var(--stgm-primary,#6366f1)] stg:opacity-75" />
+      <span className="stg:relative stg:inline-flex stg:h-1.5 stg:w-1.5 stg:rounded-full stg:bg-[var(--stgm-primary,#6366f1)]" />
     </span>
   );
 }

package/src/workflow/execution-history/WorkflowExecutionHistory.tsx

@@ -93,7 +93,7 @@ export const WorkflowExecutionHistory = memo(function WorkflowExecutionHistory({
   return (
     <section
       aria-label="Execution history"
-      className={cn("flex flex-col gap-4", className)}
+      className={cn("stg:flex stg:flex-col stg:gap-4", className)}
     >
       <HealthMetricsStrip summary={summary} isLoading={summaryLoading} />
 

package/src/workflow/facets/WorkflowArtifactsTab.tsx

@@ -46,8 +46,8 @@ export function WorkflowArtifactsTab({
 
   if (entries.length === 0) {
     return (
-      <div className="flex flex-col items-center justify-center px-4 py-8 text-center">
-        <p className="text-xs text-muted-foreground">
+      <div className="stg:flex stg:flex-col stg:items-center stg:justify-center stg:px-4 stg:py-8 stg:text-center">
+        <p className="stg:text-xs stg:text-muted-foreground">
           No artifacts yet. Files produced by workflow tasks will appear here.
         </p>
       </div>
@@ -55,7 +55,7 @@ export function WorkflowArtifactsTab({
   }
 
   return (
-    <ul role="list" className="flex flex-col">
+    <ul role="list" className="stg:flex stg:flex-col">
       {entries.map(({ artifact, item }) => (
         <WorkflowArtifactRow
           key={artifact.metadata?.id ?? item.name}

package/src/workflow/facets/WorkflowChangesTab.tsx

@@ -69,18 +69,18 @@ export function WorkflowChangesTab({
     return (
       <div
         role="status"
-        className="flex flex-col items-center justify-center px-4 py-8 text-center"
+        className="stg:flex stg:flex-col stg:items-center stg:justify-center stg:px-4 stg:py-8 stg:text-center"
       >
-        <p className="text-xs text-muted-foreground">Loading file changes…</p>
+        <p className="stg:text-xs stg:text-muted-foreground">Loading file changes…</p>
       </div>
     );
   }
 
   if (fileChanges.length === 0) {
     return (
-      <div className="flex flex-col gap-2 px-4 py-8 text-center">
+      <div className="stg:flex stg:flex-col stg:gap-2 stg:px-4 stg:py-8 stg:text-center">
         {error && <ErrorNotice error={error} />}
-        <p className="text-xs text-muted-foreground">
+        <p className="stg:text-xs stg:text-muted-foreground">
           No file changes yet. Files edited by agent tasks will appear here.
         </p>
       </div>
@@ -88,9 +88,9 @@ export function WorkflowChangesTab({
   }
 
   return (
-    <div className="flex flex-col gap-2">
+    <div className="stg:flex stg:flex-col stg:gap-2">
       {error && (
-        <div className="px-2 pt-2">
+        <div className="stg:px-2 stg:pt-2">
           <ErrorNotice error={error} />
         </div>
       )}
@@ -105,7 +105,7 @@ export function WorkflowChangesTab({
       />
 
       {isRefetching && (
-        <p role="status" className="px-3 pb-2 text-[0.65rem] text-muted-foreground-faint">
+        <p role="status" className="stg:px-3 stg:pb-2 stg:text-[0.65rem] stg:text-muted-foreground-faint">
           Updating…
         </p>
       )}
@@ -121,7 +121,7 @@ function ErrorNotice({ error }: { readonly error: Error }) {
   return (
     <div
       role="alert"
-      className="rounded-md border border-border bg-muted-subtle px-3 py-2 text-left text-xs text-destructive"
+      className="stg:rounded-md stg:border stg:border-border stg:bg-muted-subtle stg:px-3 stg:py-2 stg:text-left stg:text-xs stg:text-destructive"
     >
       Some task changes could not be loaded: {error.message}
     </div>

package/src/workflow/facets/WorkflowUsageTab.tsx

@@ -55,8 +55,8 @@ export function WorkflowUsageTab({
 
   if (!hasAggregate && items.length === 0) {
     return (
-      <div className="flex flex-col items-center justify-center px-4 py-8 text-center">
-        <p className="text-xs text-muted-foreground">
+      <div className="stg:flex stg:flex-col stg:items-center stg:justify-center stg:px-4 stg:py-8 stg:text-center">
+        <p className="stg:text-xs stg:text-muted-foreground">
           No usage data yet. Cost and token stats will appear here.
         </p>
       </div>
@@ -64,15 +64,15 @@ export function WorkflowUsageTab({
   }
 
   return (
-    <div className="flex flex-col gap-4">
+    <div className="stg:flex stg:flex-col stg:gap-4">
       <UsageSummary costSummary={costSummary} />
 
       {items.length > 0 && (
-        <div className="flex flex-col gap-1">
-          <h3 className="px-2 text-xs font-semibold uppercase tracking-wider text-muted-foreground">
+        <div className="stg:flex stg:flex-col stg:gap-1">
+          <h3 className="stg:px-2 stg:text-xs stg:font-semibold stg:uppercase stg:tracking-wider stg:text-muted-foreground">
             By task
           </h3>
-          <ul role="list" className="flex flex-col">
+          <ul role="list" className="stg:flex stg:flex-col">
             {items.map((item) => (
               <UsageRow key={item.taskName} item={item} />
             ))}
@@ -107,16 +107,16 @@ function UsageSummary({
 
   return (
     <div
-      className="flex flex-col gap-1.5 px-2"
+      className="stg:flex stg:flex-col stg:gap-1.5 stg:px-2"
       role="region"
       aria-label="Execution cost summary"
     >
-      <div className="flex items-baseline gap-1.5">
-        <span className="text-sm font-medium tabular-nums text-foreground">
+      <div className="stg:flex stg:items-baseline stg:gap-1.5">
+        <span className="stg:text-sm stg:font-medium stg:tabular-nums stg:text-foreground">
           {formatMicroUsd(costSummary.costConsumedMicros)}
         </span>
         {costLimit !== undefined && (
-          <span className="text-xs tabular-nums text-muted-foreground">
+          <span className="stg:text-xs stg:tabular-nums stg:text-muted-foreground">
             of {formatMicroUsd(costLimit)} budget
           </span>
         )}
@@ -128,7 +128,7 @@ function UsageSummary({
         label="Cost budget"
       />
 
-      <div className="text-xs tabular-nums text-muted-foreground">
+      <div className="stg:text-xs stg:tabular-nums stg:text-muted-foreground">
         {formatTokenCount(costSummary.tokensConsumed)} tokens
         {tokenLimit !== undefined && ` of ${formatTokenCount(tokenLimit)}`}
       </div>
@@ -140,7 +140,7 @@ function UsageSummary({
       />
 
       {costSummary.thresholdBreached && (
-        <p className="flex items-center gap-1.5 text-xs text-warning">
+        <p className="stg:flex stg:items-center stg:gap-1.5 stg:text-xs stg:text-warning">
           <WarningIcon />
           Budget threshold breached
         </p>
@@ -169,23 +169,23 @@ function BudgetGauge({
   const percentage = Number((consumed * BigInt(100)) / limit);
 
   return (
-    <div className="flex items-center gap-2" aria-label={label}>
+    <div className="stg:flex stg:items-center stg:gap-2" aria-label={label}>
       <div
         role="progressbar"
         aria-valuenow={Math.min(percentage, 100)}
         aria-valuemin={0}
         aria-valuemax={100}
-        className="h-1.5 min-w-0 flex-1 overflow-hidden rounded-full bg-muted"
+        className="stg:h-1.5 stg:min-w-0 stg:flex-1 stg:overflow-hidden stg:rounded-full stg:bg-muted"
       >
         <div
           className={cn(
-            "h-full rounded-full transition-all",
-            breached || percentage > 80 ? "bg-warning" : "bg-primary",
+            "stg:h-full stg:rounded-full stg:transition-all",
+            breached || percentage > 80 ? "stg:bg-warning" : "stg:bg-primary",
           )}
           style={{ width: `${Math.min(percentage, 100)}%` }}
         />
       </div>
-      <span className="shrink-0 text-[10px] tabular-nums text-muted-foreground">
+      <span className="stg:shrink-0 stg:text-[10px] stg:tabular-nums stg:text-muted-foreground">
         {percentage.toFixed(0)}%
       </span>
     </div>
@@ -199,19 +199,19 @@ function BudgetGauge({
  */
 function UsageRow({ item }: { readonly item: WorkflowUsageItem }) {
   return (
-    <li className="flex items-stretch">
-      <div className="flex min-w-0 flex-1 items-center gap-2 px-2 py-1 text-left text-xs text-muted-foreground">
-        <span className="min-w-0 flex-1 truncate text-foreground">
+    <li className="stg:flex stg:items-stretch">
+      <div className="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">
+        <span className="stg:min-w-0 stg:flex-1 stg:truncate stg:text-foreground">
           {item.taskName}
-          <span className="ml-1.5 text-[0.65rem] text-muted-foreground">
+          <span className="stg:ml-1.5 stg:text-[0.65rem] stg:text-muted-foreground">
             {item.kindLabel}
             {isInFlight(item.status) && ` · ${statusLabel(item.status)}`}
           </span>
         </span>
-        <span className="shrink-0 tabular-nums text-foreground">
+        <span className="stg:shrink-0 stg:tabular-nums stg:text-foreground">
           {formatMicroUsd(item.costMicros)}
         </span>
-        <span className="w-14 shrink-0 text-right tabular-nums text-[0.65rem] text-muted-foreground-faint">
+        <span className="stg:w-14 stg:shrink-0 stg:text-right stg:tabular-nums stg:text-[0.65rem] stg:text-muted-foreground-faint">
           {formatTokenCount(item.tokensUsed)} tok
         </span>
       </div>
@@ -247,7 +247,7 @@ function WarningIcon() {
       strokeWidth="2"
       strokeLinecap="round"
       strokeLinejoin="round"
-      className="shrink-0"
+      className="stg:shrink-0"
       aria-hidden="true"
     >
       <path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z" />

package/src/workflow/inspector/EdgeInspector.tsx

@@ -28,33 +28,33 @@ export function EdgeInspector({
   const targetNode = graph.nodes.find((n) => n.id === edge.target);
 
   return (
-    <div className={cn("flex h-full flex-col gap-4 p-3", className)}>
-      <h3 className="text-[11px] font-semibold uppercase tracking-wide text-[var(--stgm-muted-foreground,#737373)]">
+    <div className={cn("stg:flex stg:h-full stg:flex-col stg:gap-4 stg:p-3", className)}>
+      <h3 className="stg:text-[11px] stg:font-semibold stg:uppercase stg:tracking-wide stg:text-[var(--stgm-muted-foreground,#737373)]">
         Connection
       </h3>
 
-      <div className="flex flex-col gap-2">
-        <div className="flex items-center gap-2 text-xs">
-          <span className="font-medium text-[var(--stgm-foreground,#1a1a2e)]">
+      <div className="stg:flex stg:flex-col stg:gap-2">
+        <div className="stg:flex stg:items-center stg:gap-2 stg:text-xs">
+          <span className="stg:font-medium stg:text-[var(--stgm-foreground,#1a1a2e)]">
             {sourceNode?.taskName ?? edge.source}
           </span>
-          <span className="text-[var(--stgm-muted-foreground,#737373)]">→</span>
-          <span className="font-medium text-[var(--stgm-foreground,#1a1a2e)]">
+          <span className="stg:text-[var(--stgm-muted-foreground,#737373)]">→</span>
+          <span className="stg:font-medium stg:text-[var(--stgm-foreground,#1a1a2e)]">
             {targetNode?.taskName ?? edge.target}
           </span>
         </div>
 
         {edge.label && (
-          <div className="flex items-center gap-1.5">
-            <span className="text-[11px] text-[var(--stgm-muted-foreground,#737373)]">Label:</span>
-            <span className="text-xs text-[var(--stgm-foreground,#1a1a2e)]">{edge.label}</span>
+          <div className="stg:flex stg:items-center stg:gap-1.5">
+            <span className="stg:text-[11px] stg:text-[var(--stgm-muted-foreground,#737373)]">Label:</span>
+            <span className="stg:text-xs stg:text-[var(--stgm-foreground,#1a1a2e)]">{edge.label}</span>
           </div>
         )}
 
         {edge.sourceHandle && (
-          <div className="flex items-center gap-1.5">
-            <span className="text-[11px] text-[var(--stgm-muted-foreground,#737373)]">Port:</span>
-            <span className="text-xs text-[var(--stgm-foreground,#1a1a2e)]">{edge.sourceHandle}</span>
+          <div className="stg:flex stg:items-center stg:gap-1.5">
+            <span className="stg:text-[11px] stg:text-[var(--stgm-muted-foreground,#737373)]">Port:</span>
+            <span className="stg:text-xs stg:text-[var(--stgm-foreground,#1a1a2e)]">{edge.sourceHandle}</span>
           </div>
         )}
       </div>
@@ -63,7 +63,7 @@ export function EdgeInspector({
         <button
           type="button"
           onClick={() => onDeleteEdge(edge.id)}
-          className="self-start rounded px-2 py-1 text-xs text-[var(--stgm-destructive,#ef4444)] hover:bg-[var(--stgm-destructive,#ef4444)]/10"
+          className="stg:self-start stg:rounded stg:px-2 stg:py-1 stg:text-xs stg:text-[var(--stgm-destructive,#ef4444)] stg:hover:bg-[var(--stgm-destructive,#ef4444)]/10"
         >
           Delete connection
         </button>

package/src/workflow/inspector/InspectorHeader.tsx

@@ -87,12 +87,12 @@ export const InspectorHeader = memo(function InspectorHeader({
   const closeMenu = useCallback(() => setMenuOpen(false), []);
 
   return (
-    <div className={cn("flex flex-col gap-1.5 border-b border-[var(--stgm-border,#e5e5e5)] px-3 py-2.5", className)}>
+    <div className={cn("stg:flex stg:flex-col stg:gap-1.5 stg:border-b stg:border-[var(--stgm-border,#e5e5e5)] stg:px-3 stg:py-2.5", className)}>
       {/* Row 1: task name + overflow menu */}
-      <div className="flex items-center gap-1">
-        <div className="min-w-0 flex-1">
+      <div className="stg:flex stg:items-center stg:gap-1">
+        <div className="stg:min-w-0 stg:flex-1">
           {editingName ? (
-            <div className="flex flex-col gap-0.5">
+            <div className="stg:flex stg:flex-col stg:gap-0.5">
               <input
                 type="text"
                 value={nameValue}
@@ -100,17 +100,17 @@ export const InspectorHeader = memo(function InspectorHeader({
                 onBlur={commitName}
                 onKeyDown={handleKeyDown}
                 autoFocus
-                className="w-full rounded-md border border-[var(--stgm-border,#d4d4d8)] bg-[var(--stgm-background,#fff)] px-2 py-1 text-sm font-semibold text-[var(--stgm-foreground,#1a1a2e)] focus:outline-none focus:ring-1 focus:ring-[var(--stgm-ring,#3b82f6)]"
+                className="stg:w-full stg:rounded-md stg:border stg:border-[var(--stgm-border,#d4d4d8)] stg:bg-[var(--stgm-background,#fff)] stg:px-2 stg:py-1 stg:text-sm stg:font-semibold stg:text-[var(--stgm-foreground,#1a1a2e)] stg:focus:outline-none stg:focus:ring-1 stg:focus:ring-[var(--stgm-ring,#3b82f6)]"
               />
               {nameError && (
-                <span className="text-[10px] text-[var(--stgm-destructive,#ef4444)]">{nameError}</span>
+                <span className="stg:text-[10px] stg:text-[var(--stgm-destructive,#ef4444)]">{nameError}</span>
               )}
             </div>
           ) : (
             <button
               type="button"
               onClick={startEditing}
-              className="w-fit max-w-full truncate text-left text-sm font-semibold text-[var(--stgm-foreground,#1a1a2e)] hover:underline"
+              className="stg:w-fit stg:max-w-full stg:truncate stg:text-left stg:text-sm stg:font-semibold stg:text-[var(--stgm-foreground,#1a1a2e)] stg:hover:underline"
               title="Click to rename"
             >
               {identity.taskName}
@@ -119,11 +119,11 @@ export const InspectorHeader = memo(function InspectorHeader({
         </div>
 
         {/* Overflow menu trigger */}
-        <div className="relative shrink-0">
+        <div className="stg:relative stg:shrink-0">
           <button
             type="button"
             onClick={toggleMenu}
-            className="flex h-6 w-6 items-center justify-center rounded text-[var(--stgm-muted-foreground,#737373)] hover:bg-[var(--stgm-muted,#f5f5f5)] hover:text-[var(--stgm-foreground,#1a1a2e)]"
+            className="stg:flex stg:h-6 stg:w-6 stg:items-center stg:justify-center stg:rounded stg:text-[var(--stgm-muted-foreground,#737373)] stg:hover:bg-[var(--stgm-muted,#f5f5f5)] stg:hover:text-[var(--stgm-foreground,#1a1a2e)]"
             aria-label="Node actions"
             aria-expanded={menuOpen}
             aria-haspopup="true"
@@ -144,9 +144,9 @@ export const InspectorHeader = memo(function InspectorHeader({
       </div>
 
       {/* Row 2: kind badge + category */}
-      <div className="flex items-center gap-1.5">
+      <div className="stg:flex stg:items-center stg:gap-1.5">
         <span
-          className="inline-block rounded px-1.5 py-0.5 text-[10px] font-medium leading-tight"
+          className="stg:inline-block stg:rounded stg:px-1.5 stg:py-0.5 stg:text-[10px] stg:font-medium stg:leading-tight"
           style={{
             color: identity.categoryColor,
             backgroundColor: `color-mix(in srgb, ${identity.categoryColor} 12%, transparent)`,
@@ -155,7 +155,7 @@ export const InspectorHeader = memo(function InspectorHeader({
           {identity.kindString.replace(/_/g, " ")}
         </span>
         {identity.description && (
-          <span className="truncate text-[10px] text-[var(--stgm-muted-foreground,#737373)]" title={identity.description}>
+          <span className="stg:truncate stg:text-[10px] stg:text-[var(--stgm-muted-foreground,#737373)]" title={identity.description}>
             {identity.description}
           </span>
         )}
@@ -192,11 +192,11 @@ function ActionsMenu({
   return (
     <>
       {/* Click-away backdrop */}
-      <div className="fixed inset-0 z-40" onClick={onClose} aria-hidden="true" />
+      <div className="stg:fixed stg:inset-0 stg:z-40" onClick={onClose} aria-hidden="true" />
 
       <div
         role="menu"
-        className="absolute right-0 top-full z-50 mt-1 min-w-[160px] rounded-md border border-[var(--stgm-border,#e5e5e5)] bg-[var(--stgm-popover,var(--stgm-background,#fff))] py-1 shadow-md"
+        className="stg:absolute stg:right-0 stg:top-full stg:z-50 stg:mt-1 stg:min-w-[160px] stg:rounded-md stg:border stg:border-[var(--stgm-border,#e5e5e5)] stg:bg-[var(--stgm-popover,var(--stgm-background,#fff))] stg:py-1 stg:shadow-md"
       >
         <MenuItem label="Rename" onClick={() => handleAction(onRename)} />
         {mutations.onDuplicateNode && (
@@ -239,10 +239,10 @@ function MenuItem({
       role="menuitem"
       onClick={onClick}
       className={cn(
-        "flex w-full items-center px-3 py-1.5 text-left text-xs transition-colors",
+        "stg:flex stg:w-full stg:items-center stg:px-3 stg:py-1.5 stg:text-left stg:text-xs stg:transition-colors",
         destructive
-          ? "text-[var(--stgm-destructive,#ef4444)] hover:bg-[var(--stgm-destructive,#ef4444)]/10"
-          : "text-[var(--stgm-foreground,#1a1a2e)] hover:bg-[var(--stgm-muted,#f5f5f5)]",
+          ? "stg:text-[var(--stgm-destructive,#ef4444)] stg:hover:bg-[var(--stgm-destructive,#ef4444)]/10"
+          : "stg:text-[var(--stgm-foreground,#1a1a2e)] stg:hover:bg-[var(--stgm-muted,#f5f5f5)]",
       )}
     >
       {label}
@@ -251,7 +251,7 @@ function MenuItem({
 }
 
 function MenuDivider() {
-  return <div className="my-1 border-t border-[var(--stgm-border,#e5e5e5)]" />;
+  return <div className="stg:my-1 stg:border-t stg:border-[var(--stgm-border,#e5e5e5)]" />;
 }
 
 function MoreIcon() {

package/src/workflow/inspector/InspectorShell.tsx

@@ -66,10 +66,10 @@ export const InspectorShell = memo(function InspectorShell({
 }: InspectorShellProps) {
   if (!selection || !graph) {
     return (
-      <div className={cn("flex h-full flex-col", className)}>
+      <div className={cn("stg:flex stg:h-full stg:flex-col", className)}>
         {emptyState ?? (
-          <div className="flex flex-1 items-center justify-center p-4">
-            <span className="text-xs text-[var(--stgm-muted-foreground,#737373)]">
+          <div className="stg:flex stg:flex-1 stg:items-center stg:justify-center stg:p-4">
+            <span className="stg:text-xs stg:text-[var(--stgm-muted-foreground,#737373)]">
               Select a task or connection to inspect
             </span>
           </div>
@@ -175,7 +175,7 @@ function NodeInspectorShell({
   const nodeErrors = validationErrors?.get(node.id);
 
   return (
-    <div className={cn("flex h-full flex-col", className)}>
+    <div className={cn("stg:flex stg:h-full stg:flex-col", className)}>
       <InspectorHeader
         identity={identity}
         graph={graph}
@@ -188,9 +188,9 @@ function NodeInspectorShell({
         activeTab={activeTab}
         onTabChange={handleTabChange}
         aria-label="Task configuration"
-        className="min-h-0 flex-1"
+        className="stg:min-h-0 stg:flex-1"
       >
-        <div className="overflow-y-auto">
+        <div className="stg:overflow-y-auto">
           {activeTab === "configure" && (
             <ConfigureTab
               node={node}

package/src/workflow/inspector/NestedTaskList.tsx

@@ -60,34 +60,34 @@ export const NestedTaskList = memo(function NestedTaskList({
 
   if (tasks.length === 0) {
     return (
-      <p className="text-[11px] text-[var(--stgm-muted-foreground,#737373)] italic">
+      <p className="stg:text-[11px] stg:text-[var(--stgm-muted-foreground,#737373)] stg:italic">
         {emptyLabel}
       </p>
     );
   }
 
   return (
-    <div className="flex flex-col gap-1" role="list" aria-label="Nested tasks">
+    <div className="stg:flex stg:flex-col stg:gap-1" role="list" aria-label="Nested tasks">
       {tasks.map((task, idx) => (
         <div
           key={`${task.name}-${idx}`}
           role="listitem"
           className={cn(
-            "group/task flex items-center gap-2 rounded px-2 py-1 transition-colors",
-            dashed ? "border border-dashed border-[var(--stgm-border,#e5e5e5)]" : "border border-[var(--stgm-border,#e5e5e5)]",
-            onSelect && "cursor-pointer hover:bg-[var(--stgm-accent,#f5f5f5)]",
+            "stg:group/task stg:flex stg:items-center stg:gap-2 stg:rounded stg:px-2 stg:py-1 stg:transition-colors",
+            dashed ? "stg:border stg:border-dashed stg:border-[var(--stgm-border,#e5e5e5)]" : "stg:border stg:border-[var(--stgm-border,#e5e5e5)]",
+            onSelect && "stg:cursor-pointer stg:hover:bg-[var(--stgm-accent,#f5f5f5)]",
           )}
           onClick={onSelect ? () => onSelect(idx) : undefined}
           aria-label={`${task.kind} task: ${task.name}`}
         >
           {/* Reorder controls */}
           {editable && onReorder && (
-            <div className="flex flex-col gap-0.5 opacity-0 group-hover/task:opacity-100 transition-opacity">
+            <div className="stg:flex stg:flex-col stg:gap-0.5 stg:opacity-0 stg:group-hover/task:opacity-100 stg:transition-opacity">
               <button
                 type="button"
                 onClick={(e) => { e.stopPropagation(); handleMoveUp(idx); }}
                 disabled={idx === 0}
-                className="text-[var(--stgm-muted-foreground,#737373)] disabled:opacity-30 hover:text-[var(--stgm-foreground,#1a1a2e)]"
+                className="stg:text-[var(--stgm-muted-foreground,#737373)] stg:disabled:opacity-30 stg:hover:text-[var(--stgm-foreground,#1a1a2e)]"
                 aria-label={`Move ${task.name} up`}
               >
                 <svg width="8" height="8" viewBox="0 0 8 8" fill="currentColor" aria-hidden="true">
@@ -98,7 +98,7 @@ export const NestedTaskList = memo(function NestedTaskList({
                 type="button"
                 onClick={(e) => { e.stopPropagation(); handleMoveDown(idx); }}
                 disabled={idx === tasks.length - 1}
-                className="text-[var(--stgm-muted-foreground,#737373)] disabled:opacity-30 hover:text-[var(--stgm-foreground,#1a1a2e)]"
+                className="stg:text-[var(--stgm-muted-foreground,#737373)] stg:disabled:opacity-30 stg:hover:text-[var(--stgm-foreground,#1a1a2e)]"
                 aria-label={`Move ${task.name} down`}
               >
                 <svg width="8" height="8" viewBox="0 0 8 8" fill="currentColor" aria-hidden="true">
@@ -109,10 +109,10 @@ export const NestedTaskList = memo(function NestedTaskList({
           )}
 
           {/* Task info */}
-          <span className="shrink-0 rounded bg-[var(--stgm-muted,#f5f5f5)] px-1 py-px text-[9px] font-mono text-[var(--stgm-muted-foreground,#737373)]">
+          <span className="stg:shrink-0 stg:rounded stg:bg-[var(--stgm-muted,#f5f5f5)] stg:px-1 stg:py-px stg:text-[9px] stg:font-mono stg:text-[var(--stgm-muted-foreground,#737373)]">
             {task.kind}
           </span>
-          <span className="min-w-0 flex-1 truncate text-[11px] text-[var(--stgm-foreground,#1a1a2e)]">
+          <span className="stg:min-w-0 stg:flex-1 stg:truncate stg:text-[11px] stg:text-[var(--stgm-foreground,#1a1a2e)]">
             {task.name}
           </span>
 
@@ -121,7 +121,7 @@ export const NestedTaskList = memo(function NestedTaskList({
             <button
               type="button"
               onClick={(e) => { e.stopPropagation(); onRemove(idx); }}
-              className="shrink-0 opacity-0 group-hover/task:opacity-100 transition-opacity text-[var(--stgm-muted-foreground,#737373)] hover:text-[var(--stgm-destructive,#ef4444)]"
+              className="stg:shrink-0 stg:opacity-0 stg:group-hover/task:opacity-100 stg:transition-opacity stg:text-[var(--stgm-muted-foreground,#737373)] stg:hover:text-[var(--stgm-destructive,#ef4444)]"
               aria-label={`Remove task ${task.name}`}
               title="Remove"
             >

package/src/workflow/inspector/SentinelInspector.tsx

@@ -21,11 +21,11 @@ export function SentinelInspector({ node, className }: SentinelInspectorProps) {
   const isStart = node.id === START_NODE_ID;
 
   return (
-    <div className={cn("flex h-full flex-col gap-2 p-3", className)}>
-      <h3 className="text-[11px] font-semibold uppercase tracking-wide text-[var(--stgm-muted-foreground,#737373)]">
+    <div className={cn("stg:flex stg:h-full stg:flex-col stg:gap-2 stg:p-3", className)}>
+      <h3 className="stg:text-[11px] stg:font-semibold stg:uppercase stg:tracking-wide stg:text-[var(--stgm-muted-foreground,#737373)]">
         {isStart ? "Start" : "End"}
       </h3>
-      <p className="text-xs text-[var(--stgm-muted-foreground,#737373)]">
+      <p className="stg:text-xs stg:text-[var(--stgm-muted-foreground,#737373)]">
         {isStart
           ? "Entry point of the workflow. The first task is connected automatically."
           : "Terminal point. Tasks routing here end the workflow execution."}