@stigmer/react 3.9.0 → 3.11.0

package/src/workflow/WorkflowExecutionGraph.tsx

@@ -252,7 +252,7 @@ function WorkflowExecutionGraphInner({
 
   if (isLoading) {
     return (
-      <div className={cn("flex h-full items-center justify-center", className)}>
+      <div className={cn("stg:flex stg:h-full stg:items-center stg:justify-center", className)}>
         <GraphLoadingSkeleton />
       </div>
     );
@@ -260,15 +260,15 @@ function WorkflowExecutionGraphInner({
 
   if (error) {
     return (
-      <div className={cn("flex h-full flex-col items-center justify-center gap-2 px-6 text-center", className)}>
-        <p className="text-sm text-[var(--stgm-muted-foreground,#737373)]">{error}</p>
+      <div className={cn("stg:flex stg:h-full stg:flex-col stg:items-center stg:justify-center stg:gap-2 stg:px-6 stg:text-center", className)}>
+        <p className="stg:text-sm stg:text-[var(--stgm-muted-foreground,#737373)]">{error}</p>
       </div>
     );
   }
 
   if (nodes.length === 0) {
     return (
-      <div className={cn("flex h-full items-center justify-center text-sm text-[var(--stgm-muted-foreground,#737373)]", className)}>
+      <div className={cn("stg:flex stg:h-full stg:items-center stg:justify-center stg:text-sm stg:text-[var(--stgm-muted-foreground,#737373)]", className)}>
         No graph available for this execution
       </div>
     );
@@ -276,9 +276,9 @@ function WorkflowExecutionGraphInner({
 
   return (
     <WorkflowGraphModeProvider mode="execution">
-      <div className={cn("relative h-full w-full", className)}>
+      <div className={cn("stg:relative stg:h-full stg:w-full", className)}>
         {versionMismatch && (
-          <div className="absolute left-3 right-3 top-3 z-50 rounded-md border border-[var(--stgm-warning,#f59e0b)]/30 bg-[var(--stgm-warning,#f59e0b)]/5 px-3 py-2 text-xs text-[var(--stgm-foreground,#1a1a2e)]">
+          <div className="stg:absolute stg:left-3 stg:right-3 stg:top-3 stg:z-50 stg:rounded-md stg:border stg:border-[var(--stgm-warning,#f59e0b)]/30 stg:bg-[var(--stgm-warning,#f59e0b)]/5 stg:px-3 stg:py-2 stg:text-xs stg:text-[var(--stgm-foreground,#1a1a2e)]">
             {versionMismatch}
           </div>
         )}
@@ -299,8 +299,8 @@ function WorkflowExecutionGraphInner({
             type="button"
             onClick={handleResetLayout}
             className={cn(
-              "absolute left-3 z-50 rounded-full border border-[var(--stgm-border,#e5e5e5)] bg-[var(--stgm-background,#fff)] px-3 py-1 text-xs text-[var(--stgm-foreground,#1a1a2e)] shadow-sm transition-colors hover:bg-[var(--stgm-muted,#f5f5f5)]",
-              versionMismatch ? "top-12" : "top-3",
+              "stg:absolute stg:left-3 stg:z-50 stg:rounded-full stg:border stg:border-[var(--stgm-border,#e5e5e5)] stg:bg-[var(--stgm-background,#fff)] stg:px-3 stg:py-1 stg:text-xs stg:text-[var(--stgm-foreground,#1a1a2e)] stg:shadow-sm stg:transition-colors stg:hover:bg-[var(--stgm-muted,#f5f5f5)]",
+              versionMismatch ? "stg:top-12" : "stg:top-3",
             )}
           >
             Reset layout
@@ -350,7 +350,7 @@ function WorkflowExecutionGraphInner({
             role="log"
             aria-live="polite"
             aria-atomic="false"
-            className="sr-only"
+            className="stg:sr-only"
           >
             {announcement}
           </div>
@@ -362,12 +362,12 @@ function WorkflowExecutionGraphInner({
 
 function GraphLoadingSkeleton() {
   return (
-    <div className="flex flex-col items-center gap-3">
-      <div className="h-8 w-8 animate-pulse rounded-full bg-[var(--stgm-muted,#e5e5e5)]" />
-      <div className="h-3 w-24 animate-pulse rounded bg-[var(--stgm-muted,#e5e5e5)]" />
-      <div className="mt-2 flex gap-4">
-        <div className="h-10 w-32 animate-pulse rounded-md bg-[var(--stgm-muted,#e5e5e5)]" />
-        <div className="h-10 w-32 animate-pulse rounded-md bg-[var(--stgm-muted,#e5e5e5)]" />
+    <div className="stg:flex stg:flex-col stg:items-center stg:gap-3">
+      <div className="stg:h-8 stg:w-8 stg:animate-pulse stg:rounded-full stg:bg-[var(--stgm-muted,#e5e5e5)]" />
+      <div className="stg:h-3 stg:w-24 stg:animate-pulse stg:rounded stg:bg-[var(--stgm-muted,#e5e5e5)]" />
+      <div className="stg:mt-2 stg:flex stg:gap-4">
+        <div className="stg:h-10 stg:w-32 stg:animate-pulse stg:rounded-md stg:bg-[var(--stgm-muted,#e5e5e5)]" />
+        <div className="stg:h-10 stg:w-32 stg:animate-pulse stg:rounded-md stg:bg-[var(--stgm-muted,#e5e5e5)]" />
       </div>
     </div>
   );

package/src/workflow/WorkflowExecutionHeader.tsx

@@ -88,32 +88,32 @@ export const WorkflowExecutionHeader = memo(function WorkflowExecutionHeader({
     streamState.stage === "reconnecting";
 
   return (
-    <header className={cn("flex items-center gap-3 border-b border-border px-4 py-3", className)}>
+    <header className={cn("stg:flex stg:items-center stg:gap-3 stg:border-b stg:border-border stg:px-4 stg:py-3", className)}>
       <WorkflowExecutionPhaseBadge phase={phase} />
 
-      <h2 className="min-w-0 flex-1 truncate text-sm font-semibold text-foreground">
+      <h2 className="stg:min-w-0 stg:flex-1 stg:truncate stg:text-sm stg:font-semibold stg:text-foreground">
         {name}
       </h2>
 
       {duration && (
-        <span className="shrink-0 text-xs text-muted-foreground">{duration}</span>
+        <span className="stg:shrink-0 stg:text-xs stg:text-muted-foreground">{duration}</span>
       )}
 
       {costDisplay && (
-        <span className="shrink-0 text-xs text-muted-foreground">{costDisplay}</span>
+        <span className="stg:shrink-0 stg:text-xs stg:text-muted-foreground">{costDisplay}</span>
       )}
 
       {isLive && (
-        <span className="flex items-center gap-1 text-xs text-muted-foreground">
-          <span className="relative flex h-1.5 w-1.5">
-            <span className="absolute inline-flex h-full w-full animate-ping rounded-full bg-success opacity-75" />
-            <span className="relative inline-flex h-1.5 w-1.5 rounded-full bg-success" />
+        <span className="stg:flex stg:items-center stg:gap-1 stg:text-xs stg:text-muted-foreground">
+          <span className="stg:relative stg:flex stg:h-1.5 stg:w-1.5">
+            <span className="stg:absolute stg:inline-flex stg:h-full stg:w-full stg:animate-ping stg:rounded-full stg:bg-success stg:opacity-75" />
+            <span className="stg:relative stg:inline-flex stg:h-1.5 stg:w-1.5 stg:rounded-full stg:bg-success" />
           </span>
           Live
         </span>
       )}
 
-      <div className="flex shrink-0 items-center gap-1.5">
+      <div className="stg:flex stg:shrink-0 stg:items-center stg:gap-1.5">
         {onCompare && TERMINAL_PHASES.has(phase) && (
           <ActionButton
             label="Compare with…"
@@ -172,7 +172,7 @@ export const WorkflowExecutionHeader = memo(function WorkflowExecutionHeader({
         )}
 
         {headerActions && (
-          <div className="relative flex items-center">{headerActions}</div>
+          <div className="stg:relative stg:flex stg:items-center">{headerActions}</div>
         )}
       </div>
     </header>
@@ -196,11 +196,11 @@ function ActionButton({
       onClick={onClick}
       disabled={disabled}
       className={cn(
-        "rounded px-2 py-1 text-xs font-medium transition-colors",
-        "disabled:pointer-events-none disabled:opacity-50",
+        "stg:rounded stg:px-2 stg:py-1 stg:text-xs stg:font-medium stg:transition-colors",
+        "stg:disabled:pointer-events-none stg:disabled:opacity-50",
         variant === "destructive"
-          ? "border border-destructive/30 text-destructive hover:bg-destructive/10"
-          : "border border-border text-foreground hover:bg-muted",
+          ? "stg:border stg:border-destructive/30 stg:text-destructive stg:hover:bg-destructive/10"
+          : "stg:border stg:border-border stg:text-foreground stg:hover:bg-muted",
       )}
     >
       {label}

package/src/workflow/WorkflowExecutionPhaseBadge.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: "Paused",
       icon: PauseIcon,
-      colorClass: "text-muted-foreground",
+      colorClass: "stg:text-muted-foreground",
     },
   ],
 ]);
@@ -104,7 +104,7 @@ export const WorkflowExecutionPhaseBadge = memo(function WorkflowExecutionPhaseB
       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,
       )}
@@ -119,9 +119,9 @@ export const WorkflowExecutionPhaseBadge = memo(function WorkflowExecutionPhaseB
 
 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/workflow/WorkflowExecutionViewer.tsx

@@ -413,7 +413,7 @@ export const WorkflowExecutionViewer = memo(function WorkflowExecutionViewer({
   // Loading state
   if (isLoadingExecution) {
     return (
-      <div className={cn("flex h-full items-center justify-center", className)}>
+      <div className={cn("stg:flex stg:h-full stg:items-center stg:justify-center", className)}>
         <LoadingSkeleton />
       </div>
     );
@@ -422,12 +422,12 @@ export const WorkflowExecutionViewer = memo(function WorkflowExecutionViewer({
   // Error state
   if (executionError) {
     return (
-      <div className={cn("flex h-full flex-col items-center justify-center gap-3 px-6", className)}>
-        <p className="text-sm text-destructive">{executionError.message}</p>
+      <div className={cn("stg:flex stg:h-full stg:flex-col stg:items-center stg:justify-center stg:gap-3 stg:px-6", className)}>
+        <p className="stg:text-sm stg:text-destructive">{executionError.message}</p>
         <button
           type="button"
           onClick={refetchExecution}
-          className="rounded border border-border px-3 py-1.5 text-xs font-medium text-foreground hover:bg-muted"
+          className="stg:rounded stg:border stg:border-border stg:px-3 stg:py-1.5 stg:text-xs stg:font-medium stg:text-foreground stg:hover:bg-muted"
         >
           Retry
         </button>
@@ -438,14 +438,14 @@ export const WorkflowExecutionViewer = memo(function WorkflowExecutionViewer({
   // Not found
   if (!execution) {
     return (
-      <div className={cn("flex h-full items-center justify-center text-sm text-muted-foreground", className)}>
+      <div className={cn("stg:flex stg:h-full stg:items-center stg:justify-center stg:text-sm stg:text-muted-foreground", className)}>
         Execution not found
       </div>
     );
   }
 
   return (
-    <div className={cn("flex h-full flex-col overflow-hidden", className)}>
+    <div className={cn("stg:flex stg:h-full stg:flex-col stg:overflow-hidden", className)}>
       <WorkflowExecutionHeader
         execution={execution}
         streamState={streamState}
@@ -487,12 +487,12 @@ export const WorkflowExecutionViewer = memo(function WorkflowExecutionViewer({
           resume/recover). Approval failures are per-gate and surface in-card on
           the failing approval card, never here. */}
       {actions.error && (
-        <div className="flex items-center gap-2 border-b border-destructive/20 bg-destructive/5 px-4 py-2">
-          <p className="flex-1 text-xs text-destructive">{actions.error.message}</p>
+        <div className="stg:flex stg:items-center stg:gap-2 stg:border-b stg:border-destructive/20 stg:bg-destructive/5 stg:px-4 stg:py-2">
+          <p className="stg:flex-1 stg:text-xs stg:text-destructive">{actions.error.message}</p>
           <button
             type="button"
             onClick={actions.clearError}
-            className="shrink-0 rounded border border-destructive/30 px-2 py-1 text-xs text-destructive hover:bg-destructive/10"
+            className="stg:shrink-0 stg:rounded stg:border stg:border-destructive/30 stg:px-2 stg:py-1 stg:text-xs stg:text-destructive stg:hover:bg-destructive/10"
           >
             Dismiss
           </button>
@@ -501,7 +501,7 @@ export const WorkflowExecutionViewer = memo(function WorkflowExecutionViewer({
 
       {/* Comparison view (replaces normal content when active) */}
       {compareTargetId ? (
-        <div className="min-h-0 flex-1 overflow-y-auto p-4">
+        <div className="stg:min-h-0 stg:flex-1 stg:overflow-y-auto stg:p-4">
           <ExecutionComparisonView
             baseExecutionId={executionId}
             compareExecutionId={compareTargetId}
@@ -512,12 +512,12 @@ export const WorkflowExecutionViewer = memo(function WorkflowExecutionViewer({
       <>
       {/* Stream error banner */}
       {streamError && (
-        <div className="flex items-center gap-2 border-b border-destructive/20 bg-destructive/5 px-4 py-2">
-          <p className="flex-1 text-xs text-destructive">{streamError.message}</p>
+        <div className="stg:flex stg:items-center stg:gap-2 stg:border-b stg:border-destructive/20 stg:bg-destructive/5 stg:px-4 stg:py-2">
+          <p className="stg:flex-1 stg:text-xs stg:text-destructive">{streamError.message}</p>
           <button
             type="button"
             onClick={reconnect}
-            className="shrink-0 rounded border border-destructive/30 px-2 py-1 text-xs text-destructive hover:bg-destructive/10"
+            className="stg:shrink-0 stg:rounded stg:border stg:border-destructive/30 stg:px-2 stg:py-1 stg:text-xs stg:text-destructive stg:hover:bg-destructive/10"
           >
             Reconnect
           </button>
@@ -538,16 +538,16 @@ export const WorkflowExecutionViewer = memo(function WorkflowExecutionViewer({
         maxSize={960}
         storageKey="stgm-wf-exec-panel-width"
         ariaLabel="Resize execution panel"
-        className="min-h-0 flex-1"
+        className="stg:min-h-0 stg:flex-1"
         primary={
-      <div className="flex h-full min-h-0 flex-1 flex-col">
+      <div className="stg:flex stg:h-full stg:min-h-0 stg:flex-1 stg:flex-col">
         {/* Center-column view switcher (S8). Graph is the default; the
             thread is the session-style card-per-task view (T02 pivot). */}
         <CenterViewSwitcher view={centerView} onChange={handleCenterViewChange} />
 
         {/* One always-visible live region for task state changes — see the
             ownership note on `announcement` above. */}
-        <div role="log" aria-live="polite" aria-atomic="false" className="sr-only">
+        <div role="log" aria-live="polite" aria-atomic="false" className="stg:sr-only">
           {announcement}
         </div>
 
@@ -558,7 +558,7 @@ export const WorkflowExecutionViewer = memo(function WorkflowExecutionViewer({
             a passive topology visualization. */}
         <div
           data-center-view="thread"
-          className={cn("min-h-0 flex-1", centerView !== "thread" && "hidden")}
+          className={cn("stg:min-h-0 stg:flex-1", centerView !== "thread" && "stg:hidden")}
         >
           <WorkflowTaskThread
             taskStates={effectiveTaskStates}
@@ -573,12 +573,12 @@ export const WorkflowExecutionViewer = memo(function WorkflowExecutionViewer({
             // Full per-task I/O for the card bodies (T04) — an O(1)
             // per-card snapshot lookup.
             taskSnapshotsByName={taskSnapshotsByName}
-            className="h-full"
+            className="stg:h-full"
           />
         </div>
         <div
           data-center-view="graph"
-          className={cn("min-h-0 flex-1", centerView !== "graph" && "hidden")}
+          className={cn("stg:min-h-0 stg:flex-1", centerView !== "graph" && "stg:hidden")}
         >
           <WorkflowExecutionGraph
             executionId={executionId}
@@ -591,7 +591,7 @@ export const WorkflowExecutionViewer = memo(function WorkflowExecutionViewer({
             // graph's own would go silent while CSS-hidden in Thread view.
             announceTaskStates={false}
             nodesDraggable={nodesDraggable}
-            className="h-full"
+            className="stg:h-full"
           />
         </div>
       </div>
@@ -737,7 +737,7 @@ function ExecutionWorkspacePanel({
               entryId: FILE_CHANGE_DOCUMENT_ENTRY_ID,
               path: editor.path,
               content: change ? (
-                <div className="mx-auto w-full max-w-5xl px-4 py-4">
+                <div className="stg:mx-auto stg:w-full stg:max-w-5xl stg:px-4 stg:py-4">
                   <FileChangeDiff key={editor.path} change={change} />
                 </div>
               ) : (
@@ -786,7 +786,7 @@ function ExecutionWorkspacePanel({
       onPinEditor={panel.pinEditor}
       onCloseEditor={panel.closeEditor}
       onCollapse={panel.closePanel}
-      className="h-full"
+      className="stg:h-full"
     />
   );
 }
@@ -795,12 +795,12 @@ function FileChangeUnavailableNotice() {
   return (
     <div
       role="status"
-      className="mx-auto flex w-full max-w-3xl flex-col items-center gap-1 px-4 py-8 text-center"
+      className="stg:mx-auto stg:flex stg:w-full stg:max-w-3xl stg:flex-col stg:items-center stg:gap-1 stg:px-4 stg:py-8 stg:text-center"
     >
-      <p className="text-xs font-medium text-foreground">
+      <p className="stg:text-xs stg:font-medium stg:text-foreground">
         This file change is no longer available.
       </p>
-      <p className="text-xs text-muted-foreground">
+      <p className="stg:text-xs stg:text-muted-foreground">
         The rollup was refreshed and this file no longer appears among the
         execution&apos;s changes.
       </p>
@@ -812,12 +812,12 @@ function ArtifactUnavailableNotice() {
   return (
     <div
       role="status"
-      className="mx-auto flex w-full max-w-3xl flex-col items-center gap-1 px-4 py-8 text-center"
+      className="stg:mx-auto stg:flex stg:w-full stg:max-w-3xl stg:flex-col stg:items-center stg:gap-1 stg:px-4 stg:py-8 stg:text-center"
     >
-      <p className="text-xs font-medium text-foreground">
+      <p className="stg:text-xs stg:font-medium stg:text-foreground">
         This artifact is no longer available.
       </p>
-      <p className="text-xs text-muted-foreground">
+      <p className="stg:text-xs stg:text-muted-foreground">
         It may have expired or been removed from storage.
       </p>
     </div>
@@ -826,14 +826,14 @@ function ArtifactUnavailableNotice() {
 
 function LoadingSkeleton() {
   return (
-    <div className="flex w-full flex-col gap-3 p-6">
-      <div className="h-4 w-48 animate-pulse rounded bg-muted" />
-      <div className="h-3 w-32 animate-pulse rounded bg-muted" />
-      <div className="mt-4 space-y-2">
+    <div className="stg:flex stg:w-full stg:flex-col stg:gap-3 stg:p-6">
+      <div className="stg:h-4 stg:w-48 stg:animate-pulse stg:rounded stg:bg-muted" />
+      <div className="stg:h-3 stg:w-32 stg:animate-pulse stg:rounded stg:bg-muted" />
+      <div className="stg:mt-4 stg:space-y-2">
         {Array.from({ length: 5 }, (_, i) => (
-          <div key={i} className="flex items-center gap-3">
-            <div className="size-3 animate-pulse rounded-full bg-muted" />
-            <div className="h-3 flex-1 animate-pulse rounded bg-muted" />
+          <div key={i} className="stg:flex stg:items-center stg:gap-3">
+            <div className="stg:size-3 stg:animate-pulse stg:rounded-full stg:bg-muted" />
+            <div className="stg:h-3 stg:flex-1 stg:animate-pulse stg:rounded stg:bg-muted" />
           </div>
         ))}
       </div>
@@ -864,7 +864,7 @@ function CenterViewSwitcher({
     <div
       role="radiogroup"
       aria-label="Center view"
-      className="flex items-center gap-0.5 border-b border-[var(--stgm-border,#e5e5e5)] px-2 py-1"
+      className="stg:flex stg:items-center stg:gap-0.5 stg:border-b stg:border-[var(--stgm-border,#e5e5e5)] stg:px-2 stg:py-1"
     >
       <CenterViewButton
         label="Thread"
@@ -896,10 +896,10 @@ function CenterViewButton({
       aria-checked={isActive}
       onClick={onClick}
       className={cn(
-        "rounded px-2 py-0.5 text-xs font-medium transition-colors",
+        "stg:rounded stg:px-2 stg:py-0.5 stg:text-xs stg:font-medium stg:transition-colors",
         isActive
-          ? "bg-[var(--stgm-muted,#f5f5f5)] text-[var(--stgm-foreground,#171717)]"
-          : "text-[var(--stgm-muted-foreground,#737373)] hover:text-[var(--stgm-foreground,#171717)]",
+          ? "stg:bg-[var(--stgm-muted,#f5f5f5)] stg:text-[var(--stgm-foreground,#171717)]"
+          : "stg:text-[var(--stgm-muted-foreground,#737373)] stg:hover:text-[var(--stgm-foreground,#171717)]",
       )}
     >
       {label}

package/src/workflow/WorkflowExplainDialog.tsx

@@ -88,37 +88,37 @@ export function WorkflowExplainDialog({
       onCancel={handleDialogCancel}
       onClick={handleBackdropClick}
       className={cn(
-        "fixed inset-0 z-50 m-auto w-full max-w-2xl rounded-lg border border-border bg-popover p-0 text-popover-foreground shadow-lg",
-        "backdrop:bg-black/50",
-        "open:animate-in open:fade-in-0 open:zoom-in-95",
+        "stg:fixed stg:inset-0 stg:z-50 stg:m-auto stg:w-full stg:max-w-2xl stg:rounded-lg stg:border stg:border-border stg:bg-popover stg:p-0 stg:text-popover-foreground stg:shadow-lg",
+        "stg:backdrop:bg-black/50",
+        "stg:open:animate-in stg:open:fade-in-0 stg:open:zoom-in-95",
       )}
     >
-      <div className="flex flex-col">
+      <div className="stg:flex stg:flex-col">
         {/* Header */}
-        <div className="border-b border-border px-6 py-4">
-          <div className="flex items-center gap-2">
-            <h3 className="text-base font-semibold text-foreground">
+        <div className="stg:border-b stg:border-border stg:px-6 stg:py-4">
+          <div className="stg:flex stg:items-center stg:gap-2">
+            <h3 className="stg:text-base stg:font-semibold stg:text-foreground">
               Workflow Explanation
             </h3>
             {flow.isStreaming && (
-              <span className="inline-flex items-center gap-1.5 text-xs text-muted-foreground">
+              <span className="stg:inline-flex stg:items-center stg:gap-1.5 stg:text-xs stg:text-muted-foreground">
                 <SpinnerIcon />
                 Analyzing…
               </span>
             )}
           </div>
-          <p className="mt-0.5 text-xs text-muted-foreground">
+          <p className="stg:mt-0.5 stg:text-xs stg:text-muted-foreground">
             A plain-language walkthrough of what this workflow does
           </p>
         </div>
 
         {/* Content */}
-        <div className="max-h-[60vh] overflow-y-auto px-6 py-4">
+        <div className="stg:max-h-[60vh] stg:overflow-y-auto stg:px-6 stg:py-4">
           {/* Starting state */}
           {flow.phase === "starting" && (
-            <div className="flex flex-col items-center justify-center gap-2 py-8">
+            <div className="stg:flex stg:flex-col stg:items-center stg:justify-center stg:gap-2 stg:py-8">
               <SpinnerIcon size={20} />
-              <p className="text-sm text-muted-foreground">
+              <p className="stg:text-sm stg:text-muted-foreground">
                 Starting Workflow Architect…
               </p>
             </div>
@@ -129,13 +129,13 @@ export function WorkflowExplainDialog({
             <MessageThread
               executions={[]}
               activeStreamExecution={flow.execution}
-              className="min-h-[100px]"
+              className="stg:min-h-[100px]"
             />
           )}
 
           {/* Complete: show the explanation */}
           {flow.phase === "complete" && flow.explanation && (
-            <div className="whitespace-pre-wrap text-sm leading-relaxed text-foreground">
+            <div className="stg:whitespace-pre-wrap stg:text-sm stg:leading-relaxed stg:text-foreground">
               {flow.explanation}
             </div>
           )}
@@ -145,14 +145,14 @@ export function WorkflowExplainDialog({
             <MessageThread
               executions={[flow.execution]}
               activeStreamExecution={null}
-              className="min-h-[100px]"
+              className="stg:min-h-[100px]"
             />
           )}
 
           {/* Error */}
           {flow.error && flow.phase === "error" && (
             <div
-              className="rounded-md border border-destructive/30 bg-destructive/5 px-3 py-2 text-sm text-destructive"
+              className="stg:rounded-md stg:border stg:border-destructive/30 stg:bg-destructive/5 stg:px-3 stg:py-2 stg:text-sm stg:text-destructive"
               role="alert"
             >
               {flow.error}
@@ -161,29 +161,29 @@ export function WorkflowExplainDialog({
         </div>
 
         {/* Footer */}
-        <div className="flex justify-between border-t border-border px-6 py-3">
+        <div className="stg:flex stg:justify-between stg:border-t stg:border-border stg:px-6 stg:py-3">
           <button
             type="button"
             onClick={() => onOpenChange(false)}
             className={cn(
-              "rounded-md px-3 py-1.5 text-sm font-medium transition-colors",
-              "border border-input bg-background text-foreground",
-              "hover:bg-accent hover:text-accent-foreground",
-              "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+              "stg:rounded-md stg:px-3 stg:py-1.5 stg:text-sm stg:font-medium stg:transition-colors",
+              "stg:border stg:border-input stg:bg-background stg:text-foreground",
+              "stg:hover:bg-accent stg:hover:text-accent-foreground",
+              "stg:focus-visible:outline-none stg:focus-visible:ring-2 stg:focus-visible:ring-ring",
             )}
           >
             Close
           </button>
-          <div className="flex gap-2">
+          <div className="stg:flex stg:gap-2">
             {flow.phase === "error" && (
               <button
                 type="button"
                 onClick={flow.explain}
                 className={cn(
-                  "rounded-md px-3 py-1.5 text-sm font-medium transition-colors",
-                  "border border-input bg-background text-foreground",
-                  "hover:bg-accent hover:text-accent-foreground",
-                  "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+                  "stg:rounded-md stg:px-3 stg:py-1.5 stg:text-sm stg:font-medium stg:transition-colors",
+                  "stg:border stg:border-input stg:bg-background stg:text-foreground",
+                  "stg:hover:bg-accent stg:hover:text-accent-foreground",
+                  "stg:focus-visible:outline-none stg:focus-visible:ring-2 stg:focus-visible:ring-ring",
                 )}
               >
                 Try Again
@@ -194,9 +194,9 @@ export function WorkflowExplainDialog({
                 type="button"
                 onClick={handleCopy}
                 className={cn(
-                  "inline-flex items-center gap-1.5 rounded-md px-3 py-1.5 text-sm font-medium transition-colors",
-                  "bg-primary text-primary-foreground hover:bg-primary/90",
-                  "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+                  "stg:inline-flex stg:items-center stg:gap-1.5 stg:rounded-md stg:px-3 stg:py-1.5 stg:text-sm stg:font-medium stg:transition-colors",
+                  "stg:bg-primary stg:text-primary-foreground stg:hover:bg-primary/90",
+                  "stg:focus-visible:outline-none stg:focus-visible:ring-2 stg:focus-visible:ring-ring",
                 )}
               >
                 Copy to clipboard
@@ -219,7 +219,7 @@ function SpinnerIcon({ size = 14 }: { readonly size?: number }) {
       stroke="currentColor"
       strokeWidth="2"
       strokeLinecap="round"
-      className="animate-spin"
+      className="stg:animate-spin"
       aria-hidden="true"
     >
       <path d="M8 2a6 6 0 1 0 6 6" />

package/src/workflow/WorkflowFileReviewList.tsx

@@ -71,7 +71,7 @@ export function WorkflowFileReviewList({
   if (pendingFileReviews.length === 0) return null;
 
   return (
-    <div className={cn("stgm space-y-3", className)}>
+    <div className={cn("stgm stg:space-y-3", className)}>
       {pendingFileReviews.map((ref) => (
         <WorkflowChildFileReview
           key={ref.childAgentExecutionId}
@@ -125,12 +125,12 @@ function WorkflowChildFileReview({
   if (changeSets.length === 0) return null;
 
   return (
-    <div className="space-y-2">
+    <div className="stg:space-y-2">
       {onNavigateToAgentExecution && (
         <button
           type="button"
           onClick={() => onNavigateToAgentExecution(childId)}
-          className="text-xs text-muted-foreground hover:text-foreground underline underline-offset-2"
+          className="stg:text-xs stg:text-muted-foreground stg:hover:text-foreground stg:underline stg:underline-offset-2"
         >
           View agent execution
         </button>