@stigmer/react 3.10.0 → 3.11.0

package/src/workflow/WorkflowVersionTimeline.tsx

@@ -73,7 +73,7 @@ export function WorkflowVersionTimeline({
   const hasMore = versions.length > visibleCount;
 
   return (
-    <div className={cn("flex flex-col pt-2", className)}>
+    <div className={cn("stg:flex stg:flex-col stg:pt-2", className)}>
       <div role="list" aria-label="Workflow version history">
         {visibleVersions.map((entry, index) => (
           <VersionTimelineRow
@@ -91,9 +91,9 @@ export function WorkflowVersionTimeline({
           type="button"
           onClick={handleLoadMore}
           className={cn(
-            "mt-2 self-center rounded-md px-3 py-1.5 text-xs font-medium text-primary transition-colors",
-            "hover:bg-primary-subtle",
-            "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+            "stg:mt-2 stg:self-center stg:rounded-md stg:px-3 stg:py-1.5 stg:text-xs stg:font-medium stg:text-primary stg:transition-colors",
+            "stg:hover:bg-primary-subtle",
+            "stg:focus-visible:outline-none stg:focus-visible:ring-2 stg:focus-visible:ring-ring",
           )}
         >
           Load more ({versions.length - visibleCount} remaining)
@@ -126,22 +126,22 @@ function VersionTimelineRow({
   };
 
   return (
-    <div role="listitem" className="relative flex gap-3">
+    <div role="listitem" className="stg:relative stg:flex stg:gap-3">
       {/* Timeline connector */}
-      <div className="flex flex-col items-center pt-1">
+      <div className="stg:flex stg:flex-col stg:items-center stg:pt-1">
         <div
           className={cn(
-            "size-2.5 shrink-0 rounded-full border-2",
+            "stg:size-2.5 stg:shrink-0 stg:rounded-full stg:border-2",
             entry.isCurrent
-              ? "border-primary bg-primary"
+              ? "stg:border-primary stg:bg-primary"
               : isSelected
-                ? "border-primary bg-background"
-                : "border-border bg-background",
+                ? "stg:border-primary stg:bg-background"
+                : "stg:border-border stg:bg-background",
           )}
           aria-hidden="true"
         />
         {!isLast && (
-          <div className="mt-1 w-px flex-1 bg-border" aria-hidden="true" />
+          <div className="stg:mt-1 stg:w-px stg:flex-1 stg:bg-border" aria-hidden="true" />
         )}
       </div>
 
@@ -153,13 +153,13 @@ function VersionTimelineRow({
         tabIndex={0}
         aria-selected={isSelected}
         className={cn(
-          "mb-4 flex min-w-0 flex-1 flex-col gap-1 rounded-md px-2.5 py-2 text-left transition-colors",
-          "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
-          isSelected ? "bg-accent-hover" : "hover:bg-accent-hover",
+          "stg:mb-4 stg:flex stg:min-w-0 stg:flex-1 stg:flex-col stg:gap-1 stg:rounded-md stg:px-2.5 stg:py-2 stg:text-left stg:transition-colors",
+          "stg:focus-visible:outline-none stg:focus-visible:ring-2 stg:focus-visible:ring-ring",
+          isSelected ? "stg:bg-accent-hover" : "stg:hover:bg-accent-hover",
         )}
       >
         {/* Top line: version badge */}
-        <div className="flex items-center gap-2">
+        <div className="stg:flex stg:items-center stg:gap-2">
           <WorkflowVersionBadge
             versionHash={entry.id}
             tag={entry.tag}
@@ -168,7 +168,7 @@ function VersionTimelineRow({
         </div>
 
         {/* Second line: timestamp + actor */}
-        <div className="flex items-center gap-2 text-xs text-muted-foreground">
+        <div className="stg:flex stg:items-center stg:gap-2 stg:text-xs stg:text-muted-foreground">
           <time
             dateTime={entry.timestamp.toISOString()}
             title={entry.timestamp.toLocaleString()}
@@ -179,12 +179,12 @@ function VersionTimelineRow({
           {entry.actor && (
             <>
               <span aria-hidden="true">&middot;</span>
-              <span className="flex items-center gap-1">
+              <span className="stg:flex stg:items-center stg:gap-1">
                 {entry.actor.avatar && (
                   <img
                     src={entry.actor.avatar}
                     alt=""
-                    className="size-3.5 rounded-full"
+                    className="stg:size-3.5 stg:rounded-full"
                   />
                 )}
                 <span>{entry.actor.displayName || entry.actor.id}</span>
@@ -195,7 +195,7 @@ function VersionTimelineRow({
 
         {/* Commit message */}
         {entry.sublabel && (
-          <p className="text-xs text-muted-foreground">{entry.sublabel}</p>
+          <p className="stg:text-xs stg:text-muted-foreground">{entry.sublabel}</p>
         )}
       </button>
     </div>
@@ -209,22 +209,22 @@ function VersionTimelineRow({
 function TimelineSkeleton({ className }: { readonly className?: string }) {
   return (
     <div
-      className={cn("flex flex-col gap-4 pt-2", className)}
+      className={cn("stg:flex stg:flex-col stg:gap-4 stg:pt-2", className)}
       aria-busy="true"
       aria-label="Loading workflow version history"
     >
       {[1, 2, 3].map((i) => (
-        <div key={i} className="flex gap-3">
-          <div className="flex flex-col items-center">
-            <div className="size-2.5 animate-pulse rounded-full bg-muted" />
-            {i < 3 && <div className="mt-1 w-px flex-1 bg-border" />}
+        <div key={i} className="stg:flex stg:gap-3">
+          <div className="stg:flex stg:flex-col stg:items-center">
+            <div className="stg:size-2.5 stg:animate-pulse stg:rounded-full stg:bg-muted" />
+            {i < 3 && <div className="stg:mt-1 stg:w-px stg:flex-1 stg:bg-border" />}
           </div>
-          <div className="mb-4 flex-1 space-y-2 px-2.5 py-2">
-            <div className="flex gap-2">
-              <div className="h-4 w-16 animate-pulse rounded bg-muted" />
-              <div className="h-4 w-10 animate-pulse rounded-full bg-muted" />
+          <div className="stg:mb-4 stg:flex-1 stg:space-y-2 stg:px-2.5 stg:py-2">
+            <div className="stg:flex stg:gap-2">
+              <div className="stg:h-4 stg:w-16 stg:animate-pulse stg:rounded stg:bg-muted" />
+              <div className="stg:h-4 stg:w-10 stg:animate-pulse stg:rounded-full stg:bg-muted" />
             </div>
-            <div className="h-3 w-28 animate-pulse rounded bg-muted" />
+            <div className="stg:h-3 stg:w-28 stg:animate-pulse stg:rounded stg:bg-muted" />
           </div>
         </div>
       ))}
@@ -237,12 +237,12 @@ function EmptyState({ className }: { readonly className?: string }) {
     <div
       role="status"
       className={cn(
-        "flex flex-col items-center gap-2 py-8 text-center",
+        "stg:flex stg:flex-col stg:items-center stg:gap-2 stg:py-8 stg:text-center",
         className,
       )}
     >
-      <HistoryIcon className="size-8 text-muted-foreground-faint" />
-      <p className="text-sm text-muted-foreground">
+      <HistoryIcon className="stg:size-8 stg:text-muted-foreground-faint" />
+      <p className="stg:text-sm stg:text-muted-foreground">
         No version history available
       </p>
     </div>

package/src/workflow/WorkflowVersionsTab.tsx

@@ -50,12 +50,12 @@ export function WorkflowVersionsTab({
     selectedVersionHash !== null && selectedVersionHash !== currentVersionHash;
 
   return (
-    <div className={cn("flex min-h-[24rem] gap-4", className)}>
+    <div className={cn("stg:flex stg:min-h-[24rem] stg:gap-4", className)}>
       {/* Timeline panel */}
       <div
         className={cn(
-          "flex shrink-0 flex-col overflow-y-auto",
-          showDiff ? "w-[280px]" : "w-full max-w-md",
+          "stg:flex stg:shrink-0 stg:flex-col stg:overflow-y-auto",
+          showDiff ? "stg:w-[280px]" : "stg:w-full stg:max-w-md",
         )}
       >
         <WorkflowVersionTimeline
@@ -69,11 +69,11 @@ export function WorkflowVersionsTab({
 
       {/* Diff panel */}
       {showDiff && (
-        <div className="flex min-w-0 flex-1 flex-col">
-          <div className="mb-2 flex items-center gap-2 text-xs text-muted-foreground">
+        <div className="stg:flex stg:min-w-0 stg:flex-1 stg:flex-col">
+          <div className="stg:mb-2 stg:flex stg:items-center stg:gap-2 stg:text-xs stg:text-muted-foreground">
             <span>
               Comparing{" "}
-              <code className="rounded bg-muted px-1 py-0.5 font-mono text-[11px]">
+              <code className="stg:rounded stg:bg-muted stg:px-1 stg:py-0.5 stg:font-mono stg:text-[11px]">
                 {selectedVersionHash.slice(0, 8)}
               </code>{" "}
               with current
@@ -83,7 +83,7 @@ export function WorkflowVersionsTab({
             workflowId={workflowId}
             hashA={selectedVersionHash}
             hashB={currentVersionHash}
-            className="flex-1"
+            className="stg:flex-1"
           />
         </div>
       )}

package/src/workflow/__tests__/WorkflowAgentCallTranscript.test.tsx

@@ -199,8 +199,8 @@ describe("WorkflowAgentCallTranscript", () => {
     render(<WorkflowAgentCallTranscript childExecutionId="aex_1" />);
 
     const root = screen.getByRole("group", { name: "Agent transcript" });
-    expect(root.className).toContain("max-h-[60vh]");
-    expect(root.className).not.toContain("h-full");
+    expect(root.className).toContain("stg:max-h-[60vh]");
+    expect(root.className).not.toContain("stg:h-full");
   });
 
   it("is read-only without hitl: no thread handlers, no records, no dock (DD-011)", () => {

package/src/workflow/__tests__/WorkflowExecutionViewer.reconciliation.test.tsx

@@ -327,8 +327,8 @@ describe("WorkflowExecutionViewer (center-column Thread|Graph toggle, S9)", () =
     const { container } = renderViewer();
     const { graph, thread } = centerWrappers(container);
 
-    expect(thread.classList.contains("hidden")).toBe(false);
-    expect(graph.classList.contains("hidden")).toBe(true);
+    expect(thread.classList.contains("stg:hidden")).toBe(false);
+    expect(graph.classList.contains("stg:hidden")).toBe(true);
     // Mounted, never conditionally rendered (DD-009).
     expect(screen.getByTestId("graph-stub")).toBeTruthy();
     expect(
@@ -343,7 +343,7 @@ describe("WorkflowExecutionViewer (center-column Thread|Graph toggle, S9)", () =
     const { container } = renderViewer();
 
     const { thread } = centerWrappers(container);
-    expect(thread.classList.contains("hidden")).toBe(false);
+    expect(thread.classList.contains("stg:hidden")).toBe(false);
     // The legacy key is cleaned up on mount.
     expect(localStorage.getItem("stgm-wf-exec-center-view")).toBeNull();
   });
@@ -354,8 +354,8 @@ describe("WorkflowExecutionViewer (center-column Thread|Graph toggle, S9)", () =
     fireEvent.click(screen.getByRole("radio", { name: "Graph" }));
 
     const { graph, thread } = centerWrappers(container);
-    expect(graph.classList.contains("hidden")).toBe(false);
-    expect(thread.classList.contains("hidden")).toBe(true);
+    expect(graph.classList.contains("stg:hidden")).toBe(false);
+    expect(thread.classList.contains("stg:hidden")).toBe(true);
     expect(localStorage.getItem("stgm-wf-exec-center-view.v2")).toBe("graph");
   });
 
@@ -364,7 +364,7 @@ describe("WorkflowExecutionViewer (center-column Thread|Graph toggle, S9)", () =
     const { container } = renderViewer();
 
     const { graph } = centerWrappers(container);
-    expect(graph.classList.contains("hidden")).toBe(false);
+    expect(graph.classList.contains("stg:hidden")).toBe(false);
     expect(
       screen.getByRole("radio", { name: "Graph" }).getAttribute("aria-checked"),
     ).toBe("true");

package/src/workflow/__tests__/WorkflowTaskApprovalCard.test.tsx

@@ -45,8 +45,8 @@ describe("WorkflowTaskApprovalCard", () => {
     it("first outcome is the neutral chip (primary), never the loud success green", () => {
       render(<WorkflowTaskApprovalCard {...defaultProps} />);
       const btn = screen.getByRole("button", { name: "Approve" });
-      expect(btn.className).toContain("bg-accent");
-      expect(btn.className).not.toContain("bg-success");
+      expect(btn.className).toContain("stg:bg-accent");
+      expect(btn.className).not.toContain("stg:bg-success");
     });
 
     it('outcome named "reject" is a quiet danger ghost (no red fill)', () => {
@@ -57,8 +57,8 @@ describe("WorkflowTaskApprovalCard", () => {
       ];
       render(<WorkflowTaskApprovalCard {...defaultProps} outcomes={outcomes} />);
       const btn = screen.getByRole("button", { name: "Reject" });
-      expect(btn.className).toContain("hover:text-destructive");
-      expect(btn.className).not.toContain("bg-destructive text-destructive-foreground");
+      expect(btn.className).toContain("stg:hover:text-destructive");
+      expect(btn.className).not.toContain("stg:bg-destructive stg:text-destructive-foreground");
     });
 
     it('outcome named "deny" is a quiet danger ghost (no red fill)', () => {
@@ -69,8 +69,8 @@ describe("WorkflowTaskApprovalCard", () => {
       ];
       render(<WorkflowTaskApprovalCard {...defaultProps} outcomes={outcomes} />);
       const btn = screen.getByRole("button", { name: "Deny" });
-      expect(btn.className).toContain("hover:text-destructive");
-      expect(btn.className).not.toContain("bg-destructive text-destructive-foreground");
+      expect(btn.className).toContain("stg:hover:text-destructive");
+      expect(btn.className).not.toContain("stg:bg-destructive stg:text-destructive-foreground");
     });
 
     it("second of two outcomes is the danger ghost (binary fallback)", () => {
@@ -80,7 +80,7 @@ describe("WorkflowTaskApprovalCard", () => {
       ];
       render(<WorkflowTaskApprovalCard {...defaultProps} outcomes={outcomes} />);
       const btn = screen.getByRole("button", { name: "Decline" });
-      expect(btn.className).toContain("hover:text-destructive");
+      expect(btn.className).toContain("stg:hover:text-destructive");
     });
 
     it("middle outcomes in 3+ are neutral ghosts (no resting fill)", () => {
@@ -91,16 +91,16 @@ describe("WorkflowTaskApprovalCard", () => {
       ];
       render(<WorkflowTaskApprovalCard {...defaultProps} outcomes={outcomes} />);
       const btn = screen.getByRole("button", { name: "Defer" });
-      expect(btn.className).toContain("text-muted-foreground");
+      expect(btn.className).toContain("stg:text-muted-foreground");
       expect(btn.className).not.toMatch(/(?:^|\s)bg-/);
     });
 
     it("the card uses neutral chrome + warning accent, never the old amber fill", () => {
       render(<WorkflowTaskApprovalCard {...defaultProps} />);
       const card = screen.getByRole("form");
-      expect(card.className).toContain("border-border-prominent");
-      expect(card.className).toContain("border-l-warning");
-      expect(card.className).not.toContain("bg-warning");
+      expect(card.className).toContain("stg:border-border-prominent");
+      expect(card.className).toContain("stg:border-l-warning");
+      expect(card.className).not.toContain("stg:bg-warning");
     });
   });
 
@@ -251,10 +251,10 @@ describe("WorkflowTaskApprovalCard", () => {
       rerender(<WorkflowTaskApprovalCard {...defaultProps} isSubmitting={true} />);
 
       const approveBtn = screen.getByRole("button", { name: "Approve" });
-      expect(approveBtn.querySelector(".animate-spin")).toBeTruthy();
+      expect(approveBtn.querySelector(".stg\\:animate-spin")).toBeTruthy();
 
       const rejectBtn = screen.getByRole("button", { name: "Reject" });
-      expect(rejectBtn.querySelector(".animate-spin")).toBeNull();
+      expect(rejectBtn.querySelector(".stg\\:animate-spin")).toBeNull();
     });
 
     it("activeOutcome clears when isSubmitting transitions to false", () => {
@@ -265,12 +265,12 @@ describe("WorkflowTaskApprovalCard", () => {
 
       rerender(<WorkflowTaskApprovalCard {...defaultProps} isSubmitting={true} />);
       expect(
-        screen.getByRole("button", { name: "Approve" }).querySelector(".animate-spin"),
+        screen.getByRole("button", { name: "Approve" }).querySelector(".stg\\:animate-spin"),
       ).toBeTruthy();
 
       rerender(<WorkflowTaskApprovalCard {...defaultProps} isSubmitting={false} />);
       expect(
-        screen.getByRole("button", { name: "Approve" }).querySelector(".animate-spin"),
+        screen.getByRole("button", { name: "Approve" }).querySelector(".stg\\:animate-spin"),
       ).toBeNull();
     });
   });

package/src/workflow/__tests__/WorkflowTaskApprovalSummary.test.tsx

@@ -104,7 +104,7 @@ describe("WorkflowTaskApprovalSummary", () => {
         <WorkflowTaskApprovalSummary {...baseProps} decision={makeDecision({ reviewer: "bob" })} />,
       );
       const raw = screen.getByText("bob");
-      expect(raw.className).toContain("font-mono");
+      expect(raw.className).toContain("stg:font-mono");
     });
 
     it("omits the 'by' segment entirely for unattributed decisions", () => {

package/src/workflow/__tests__/node-shell.test.ts

@@ -183,6 +183,8 @@ describe("getShapePath", () => {
 // ---------------------------------------------------------------------------
 
 describe("getContentInsets", () => {
+  // prefix-classnames-ignore: VisualClass is the node-shape taxonomy, not
+  // CSS — "container" collides with the Tailwind utility name.
   const ALL_VISUAL_CLASSES: VisualClass[] = [
     "task-card",
     "subworkflow-card",

package/src/workflow/__tests__/task-type-visual-registry.test.ts

@@ -15,6 +15,8 @@ const ALL_KIND_STRINGS = Object.entries(WorkflowTaskKind)
   )
   .map(([name]) => name);
 
+// prefix-classnames-ignore: VisualClass is the node-shape taxonomy, not CSS —
+// "container" collides with the Tailwind utility name.
 const ALL_VISUAL_CLASSES: VisualClass[] = [
   "task-card",
   "decision-diamond",

package/src/workflow/diff/DiffSummaryBar.tsx

@@ -23,7 +23,7 @@ export const DiffSummaryBar = memo(function DiffSummaryBar({
     return (
       <div
         className={cn(
-          "flex items-center gap-2 rounded-md border border-[var(--stgm-border,#e5e5e5)] bg-[var(--stgm-card,var(--stgm-background,#fff))] px-3 py-1.5 text-xs text-[var(--stgm-muted-foreground,#737373)] shadow-sm",
+          "stg:flex stg:items-center stg:gap-2 stg:rounded-md stg:border stg:border-[var(--stgm-border,#e5e5e5)] stg:bg-[var(--stgm-card,var(--stgm-background,#fff))] stg:px-3 stg:py-1.5 stg:text-xs stg:text-[var(--stgm-muted-foreground,#737373)] stg:shadow-sm",
           className,
         )}
       >
@@ -35,26 +35,26 @@ export const DiffSummaryBar = memo(function DiffSummaryBar({
   return (
     <div
       className={cn(
-        "flex items-center gap-3 rounded-md border border-[var(--stgm-border,#e5e5e5)] bg-[var(--stgm-card,var(--stgm-background,#fff))] px-3 py-1.5 text-xs font-medium shadow-sm",
+        "stg:flex stg:items-center stg:gap-3 stg:rounded-md stg:border stg:border-[var(--stgm-border,#e5e5e5)] stg:bg-[var(--stgm-card,var(--stgm-background,#fff))] stg:px-3 stg:py-1.5 stg:text-xs stg:font-medium stg:shadow-sm",
         className,
       )}
       role="status"
       aria-label={`Diff summary: ${added} added, ${removed} removed, ${modified} modified`}
     >
       {added > 0 && (
-        <span className="flex items-center gap-1 text-[var(--stgm-success,#22c55e)]">
+        <span className="stg:flex stg:items-center stg:gap-1 stg:text-[var(--stgm-success,#22c55e)]">
           <span aria-hidden="true">+</span>
           {added} added
         </span>
       )}
       {removed > 0 && (
-        <span className="flex items-center gap-1 text-[var(--stgm-destructive,#ef4444)]">
+        <span className="stg:flex stg:items-center stg:gap-1 stg:text-[var(--stgm-destructive,#ef4444)]">
           <span aria-hidden="true">−</span>
           {removed} removed
         </span>
       )}
       {modified > 0 && (
-        <span className="flex items-center gap-1 text-[var(--stgm-warning,#f59e0b)]">
+        <span className="stg:flex stg:items-center stg:gap-1 stg:text-[var(--stgm-warning,#f59e0b)]">
           <span aria-hidden="true">~</span>
           {modified} modified
         </span>

package/src/workflow/execution-comparison/ComparisonSummaryCards.tsx

@@ -36,32 +36,32 @@ export const ComparisonSummaryCards = memo(function ComparisonSummaryCards({
 
   return (
     <div
-      className={cn("grid grid-cols-2 gap-3 lg:grid-cols-4", className)}
+      className={cn("stg:grid stg:grid-cols-2 stg:gap-3 stg:lg:grid-cols-4", className)}
       aria-label="Comparison summary"
     >
       {cards.map((card) => (
         <div
           key={card.label}
-          className="rounded-lg border border-[var(--stgm-border,#e5e5e5)] bg-[var(--stgm-card,#fff)] p-3"
+          className="stg:rounded-lg stg:border stg:border-[var(--stgm-border,#e5e5e5)] stg:bg-[var(--stgm-card,#fff)] stg:p-3"
         >
-          <span className="text-[10px] font-medium uppercase tracking-wide text-[var(--stgm-muted-foreground,#737373)]">
+          <span className="stg:text-[10px] stg:font-medium stg:uppercase stg:tracking-wide stg:text-[var(--stgm-muted-foreground,#737373)]">
             {card.label}
           </span>
-          <div className="mt-1.5 flex items-baseline gap-2">
-            <span className="text-sm font-semibold text-[var(--stgm-foreground,#1a1a2e)]">
+          <div className="stg:mt-1.5 stg:flex stg:items-baseline stg:gap-2">
+            <span className="stg:text-sm stg:font-semibold stg:text-[var(--stgm-foreground,#1a1a2e)]">
               {card.baseValue}
             </span>
-            <span className="text-[10px] text-[var(--stgm-muted-foreground,#737373)]">
+            <span className="stg:text-[10px] stg:text-[var(--stgm-muted-foreground,#737373)]">
               vs {card.compareValue}
             </span>
           </div>
-          <div className="mt-1">
+          <div className="stg:mt-1">
             <span
               className={cn(
-                "text-xs font-medium",
-                card.deltaDirection === "better" && "text-[var(--stgm-success,#16a34a)]",
-                card.deltaDirection === "worse" && "text-[var(--stgm-destructive,#dc2626)]",
-                card.deltaDirection === "neutral" && "text-[var(--stgm-muted-foreground,#737373)]",
+                "stg:text-xs stg:font-medium",
+                card.deltaDirection === "better" && "stg:text-[var(--stgm-success,#16a34a)]",
+                card.deltaDirection === "worse" && "stg:text-[var(--stgm-destructive,#dc2626)]",
+                card.deltaDirection === "neutral" && "stg:text-[var(--stgm-muted-foreground,#737373)]",
               )}
             >
               {card.delta}

package/src/workflow/execution-comparison/ExecutionComparisonPicker.tsx

@@ -118,22 +118,22 @@ export const ExecutionComparisonPicker = memo(function ExecutionComparisonPicker
     <dialog
       ref={dialogRef}
       className={cn(
-        "stgm m-auto max-h-[70vh] w-full max-w-md rounded-lg border border-[var(--stgm-border,#e5e5e5)] bg-[var(--stgm-background,#fff)] p-0 shadow-xl",
-        "backdrop:bg-black/40",
+        "stgm stg:m-auto stg:max-h-[70vh] stg:w-full stg:max-w-md stg:rounded-lg stg:border stg:border-[var(--stgm-border,#e5e5e5)] stg:bg-[var(--stgm-background,#fff)] stg:p-0 stg:shadow-xl",
+        "stg:backdrop:bg-black/40",
       )}
       onClick={handleBackdropClick}
       aria-label="Select execution to compare"
     >
-      <div className="flex flex-col">
+      <div className="stg:flex stg:flex-col">
         {/* Header */}
-        <div className="flex items-center justify-between border-b border-[var(--stgm-border,#e5e5e5)] px-4 py-3">
-          <span className="text-sm font-semibold text-[var(--stgm-foreground,#1a1a2e)]">
+        <div className="stg:flex stg:items-center stg:justify-between stg:border-b stg:border-[var(--stgm-border,#e5e5e5)] stg:px-4 stg:py-3">
+          <span className="stg:text-sm stg:font-semibold stg:text-[var(--stgm-foreground,#1a1a2e)]">
             Compare with...
           </span>
           <button
             type="button"
             onClick={onClose}
-            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="Close"
           >
             <svg width="12" height="12" viewBox="0 0 12 12" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" aria-hidden="true">
@@ -143,14 +143,14 @@ export const ExecutionComparisonPicker = memo(function ExecutionComparisonPicker
         </div>
 
         {/* Execution list */}
-        <div className="max-h-[50vh] overflow-y-auto p-2" role="listbox" aria-label="Recent executions">
+        <div className="stg:max-h-[50vh] stg:overflow-y-auto stg:p-2" role="listbox" aria-label="Recent executions">
           {isLoading && (
-            <div className="flex items-center justify-center py-8 text-xs text-[var(--stgm-muted-foreground,#737373)]">
+            <div className="stg:flex stg:items-center stg:justify-center stg:py-8 stg:text-xs stg:text-[var(--stgm-muted-foreground,#737373)]">
               Loading executions...
             </div>
           )}
           {!isLoading && candidates.length === 0 && (
-            <div className="flex items-center justify-center py-8 text-xs text-[var(--stgm-muted-foreground,#737373)]">
+            <div className="stg:flex stg:items-center stg:justify-center stg:py-8 stg:text-xs stg:text-[var(--stgm-muted-foreground,#737373)]">
               No other completed executions found.
             </div>
           )}
@@ -171,18 +171,18 @@ export const ExecutionComparisonPicker = memo(function ExecutionComparisonPicker
                 aria-selected={isSelected}
                 onClick={() => setSelectedId(id)}
                 className={cn(
-                  "flex w-full items-center gap-3 rounded-md px-3 py-2 text-left text-sm transition-colors",
+                  "stg:flex stg:w-full stg:items-center stg:gap-3 stg:rounded-md stg:px-3 stg:py-2 stg:text-left stg:text-sm stg:transition-colors",
                   isSelected
-                    ? "bg-[var(--stgm-primary,#4f46e5)]/10 ring-1 ring-[var(--stgm-primary,#4f46e5)]"
-                    : "hover:bg-[var(--stgm-muted,#f5f5f5)]",
+                    ? "stg:bg-[var(--stgm-primary,#4f46e5)]/10 stg:ring-1 stg:ring-[var(--stgm-primary,#4f46e5)]"
+                    : "stg:hover:bg-[var(--stgm-muted,#f5f5f5)]",
                 )}
               >
                 <WorkflowExecutionPhaseBadge phase={phase} />
-                <div className="flex flex-1 flex-col gap-0.5 overflow-hidden">
-                  <span className="truncate text-xs font-medium text-[var(--stgm-foreground,#1a1a2e)]">
+                <div className="stg:flex stg:flex-1 stg:flex-col stg:gap-0.5 stg:overflow-hidden">
+                  <span className="stg:truncate stg:text-xs stg:font-medium stg:text-[var(--stgm-foreground,#1a1a2e)]">
                     {name}
                   </span>
-                  <span className="text-[10px] text-[var(--stgm-muted-foreground,#737373)]">
+                  <span className="stg:text-[10px] stg:text-[var(--stgm-muted-foreground,#737373)]">
                     {startedAt ? formatRelative(startedAt) : "—"}
                     {durationMs != null && ` · ${formatDuration(durationMs)}`}
                   </span>
@@ -193,11 +193,11 @@ export const ExecutionComparisonPicker = memo(function ExecutionComparisonPicker
         </div>
 
         {/* Footer */}
-        <div className="flex items-center justify-end gap-2 border-t border-[var(--stgm-border,#e5e5e5)] px-4 py-3">
+        <div className="stg:flex stg:items-center stg:justify-end stg:gap-2 stg:border-t stg:border-[var(--stgm-border,#e5e5e5)] stg:px-4 stg:py-3">
           <button
             type="button"
             onClick={onClose}
-            className="rounded-md px-3 py-1.5 text-xs font-medium text-[var(--stgm-muted-foreground,#737373)] hover:bg-[var(--stgm-muted,#f5f5f5)] hover:text-[var(--stgm-foreground,#1a1a2e)]"
+            className="stg:rounded-md stg:px-3 stg:py-1.5 stg:text-xs stg:font-medium stg:text-[var(--stgm-muted-foreground,#737373)] stg:hover:bg-[var(--stgm-muted,#f5f5f5)] stg:hover:text-[var(--stgm-foreground,#1a1a2e)]"
           >
             Cancel
           </button>
@@ -206,10 +206,10 @@ export const ExecutionComparisonPicker = memo(function ExecutionComparisonPicker
             onClick={handleConfirm}
             disabled={!selectedId}
             className={cn(
-              "rounded-md px-3 py-1.5 text-xs font-medium",
+              "stg:rounded-md stg:px-3 stg:py-1.5 stg:text-xs stg:font-medium",
               selectedId
-                ? "bg-[var(--stgm-primary,#4f46e5)] text-[var(--stgm-primary-foreground,#fff)] hover:bg-[var(--stgm-primary,#4f46e5)]/90"
-                : "cursor-not-allowed bg-[var(--stgm-muted,#f5f5f5)] text-[var(--stgm-muted-foreground,#737373)]",
+                ? "stg:bg-[var(--stgm-primary,#4f46e5)] stg:text-[var(--stgm-primary-foreground,#fff)] stg:hover:bg-[var(--stgm-primary,#4f46e5)]/90"
+                : "stg:cursor-not-allowed stg:bg-[var(--stgm-muted,#f5f5f5)] stg:text-[var(--stgm-muted-foreground,#737373)]",
             )}
           >
             Compare