@stigmer/react 3.9.0 → 3.11.0

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

@@ -55,8 +55,8 @@ export const ExecutionComparisonView = memo(function ExecutionComparisonView({
 
   if (isLoading) {
     return (
-      <div className={cn("flex items-center justify-center py-16", className)}>
-        <span className="text-sm text-[var(--stgm-muted-foreground,#737373)]">
+      <div className={cn("stg:flex stg:items-center stg:justify-center stg:py-16", className)}>
+        <span className="stg:text-sm stg:text-[var(--stgm-muted-foreground,#737373)]">
           Loading comparison...
         </span>
       </div>
@@ -65,11 +65,11 @@ export const ExecutionComparisonView = memo(function ExecutionComparisonView({
 
   if (error) {
     return (
-      <div className={cn("flex flex-col items-center justify-center gap-2 py-16", className)}>
-        <span className="text-sm text-[var(--stgm-destructive,#dc2626)]">
+      <div className={cn("stg:flex stg:flex-col stg:items-center stg:justify-center stg:gap-2 stg:py-16", className)}>
+        <span className="stg:text-sm stg:text-[var(--stgm-destructive,#dc2626)]">
           Failed to load executions
         </span>
-        <span className="text-xs text-[var(--stgm-muted-foreground,#737373)]">
+        <span className="stg:text-xs stg:text-[var(--stgm-muted-foreground,#737373)]">
           {error.message}
         </span>
       </div>
@@ -80,15 +80,15 @@ export const ExecutionComparisonView = memo(function ExecutionComparisonView({
 
   return (
     <section
-      className={cn("flex flex-col gap-4", className)}
+      className={cn("stg:flex stg:flex-col stg:gap-4", className)}
       aria-label="Execution comparison"
     >
       {/* Header */}
-      <div className="flex items-center gap-3">
+      <div className="stg:flex stg:items-center stg:gap-3">
         <button
           type="button"
           onClick={onBack}
-          className="flex items-center gap-1.5 rounded-md px-2 py-1 text-xs font-medium text-[var(--stgm-muted-foreground,#737373)] hover:bg-[var(--stgm-muted,#f5f5f5)] hover:text-[var(--stgm-foreground,#1a1a2e)]"
+          className="stg:flex stg:items-center stg:gap-1.5 stg:rounded-md stg:px-2 stg:py-1 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)]"
           aria-label="Back to execution"
         >
           <svg width="12" height="12" viewBox="0 0 12 12" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
@@ -97,13 +97,13 @@ export const ExecutionComparisonView = memo(function ExecutionComparisonView({
           Back
         </button>
 
-        <div className="flex flex-1 items-center gap-2">
+        <div className="stg:flex stg:flex-1 stg:items-center stg:gap-2">
           <ExecutionLabel
             name={comparison.baseRow.name || baseExecutionId}
             phase={comparison.baseRow.phase}
             label="Base"
           />
-          <span className="text-xs text-[var(--stgm-muted-foreground,#737373)]">vs</span>
+          <span className="stg:text-xs stg:text-[var(--stgm-muted-foreground,#737373)]">vs</span>
           <ExecutionLabel
             name={comparison.compareRow.name || compareExecutionId}
             phase={comparison.compareRow.phase}
@@ -114,9 +114,9 @@ export const ExecutionComparisonView = memo(function ExecutionComparisonView({
 
       {/* Divergence callout */}
       {comparison.divergencePoint && (
-        <div className="flex items-center gap-2 rounded-md border border-[var(--stgm-warning,#f59e0b)]/30 bg-[var(--stgm-warning,#f59e0b)]/5 px-3 py-2">
-          <span className="inline-block h-2 w-2 rounded-full bg-[var(--stgm-warning,#f59e0b)]" aria-hidden="true" />
-          <span className="text-xs text-[var(--stgm-foreground,#1a1a2e)]">
+        <div className="stg:flex stg:items-center stg:gap-2 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">
+          <span className="stg:inline-block stg:h-2 stg:w-2 stg:rounded-full stg:bg-[var(--stgm-warning,#f59e0b)]" aria-hidden="true" />
+          <span className="stg:text-xs stg:text-[var(--stgm-foreground,#1a1a2e)]">
             First divergence at <strong>{comparison.divergencePoint}</strong>
           </span>
         </div>
@@ -141,12 +141,12 @@ function ExecutionLabel({
   label: string;
 }) {
   return (
-    <div className="flex items-center gap-1.5">
-      <span className="text-[10px] font-medium uppercase tracking-wide text-[var(--stgm-muted-foreground,#737373)]">
+    <div className="stg:flex stg:items-center stg:gap-1.5">
+      <span className="stg:text-[10px] stg:font-medium stg:uppercase stg:tracking-wide stg:text-[var(--stgm-muted-foreground,#737373)]">
         {label}:
       </span>
       <WorkflowExecutionPhaseBadge phase={phase} />
-      <span className="max-w-[10rem] truncate text-xs font-medium text-[var(--stgm-foreground,#1a1a2e)]" title={name}>
+      <span className="stg:max-w-[10rem] stg:truncate stg:text-xs stg:font-medium stg:text-[var(--stgm-foreground,#1a1a2e)]" title={name}>
         {name}
       </span>
     </div>

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

@@ -51,9 +51,9 @@ export const TaskComparisonTable = memo(function TaskComparisonTable({
   const handleFilterChange = useCallback((mode: FilterMode) => setFilter(mode), []);
 
   return (
-    <div className={cn("flex flex-col gap-2", className)}>
+    <div className={cn("stg:flex stg:flex-col stg:gap-2", className)}>
       {/* Filter controls */}
-      <div className="flex items-center gap-1" role="tablist" aria-label="Task filter">
+      <div className="stg:flex stg:items-center stg:gap-1" role="tablist" aria-label="Task filter">
         <FilterChip
           label="All"
           count={comparison.tasks.length}
@@ -79,23 +79,23 @@ export const TaskComparisonTable = memo(function TaskComparisonTable({
       </div>
 
       {/* Table */}
-      <div className="overflow-x-auto rounded-md border border-[var(--stgm-border,#e5e5e5)]">
-        <table className="w-full text-xs" aria-label="Task comparison">
+      <div className="stg:overflow-x-auto stg:rounded-md stg:border stg:border-[var(--stgm-border,#e5e5e5)]">
+        <table className="stg:w-full stg:text-xs" aria-label="Task comparison">
           <thead>
-            <tr className="border-b border-[var(--stgm-border,#e5e5e5)] bg-[var(--stgm-muted,#f5f5f5)]">
-              <th className="px-3 py-2 text-left font-medium text-[var(--stgm-muted-foreground,#737373)]">
+            <tr className="stg:border-b stg:border-[var(--stgm-border,#e5e5e5)] stg:bg-[var(--stgm-muted,#f5f5f5)]">
+              <th className="stg:px-3 stg:py-2 stg:text-left stg:font-medium stg:text-[var(--stgm-muted-foreground,#737373)]">
                 Task
               </th>
-              <th className="px-3 py-2 text-center font-medium text-[var(--stgm-muted-foreground,#737373)]">
+              <th className="stg:px-3 stg:py-2 stg:text-center stg:font-medium stg:text-[var(--stgm-muted-foreground,#737373)]">
                 Base Status
               </th>
-              <th className="px-3 py-2 text-center font-medium text-[var(--stgm-muted-foreground,#737373)]">
+              <th className="stg:px-3 stg:py-2 stg:text-center stg:font-medium stg:text-[var(--stgm-muted-foreground,#737373)]">
                 Compare Status
               </th>
-              <th className="px-3 py-2 text-right font-medium text-[var(--stgm-muted-foreground,#737373)]">
+              <th className="stg:px-3 stg:py-2 stg:text-right stg:font-medium stg:text-[var(--stgm-muted-foreground,#737373)]">
                 Duration
               </th>
-              <th className="px-3 py-2 text-right font-medium text-[var(--stgm-muted-foreground,#737373)]">
+              <th className="stg:px-3 stg:py-2 stg:text-right stg:font-medium stg:text-[var(--stgm-muted-foreground,#737373)]">
                 Cost
               </th>
             </tr>
@@ -103,7 +103,7 @@ export const TaskComparisonTable = memo(function TaskComparisonTable({
           <tbody>
             {filtered.length === 0 && (
               <tr>
-                <td colSpan={5} className="px-3 py-6 text-center text-[var(--stgm-muted-foreground,#737373)]">
+                <td colSpan={5} className="stg:px-3 stg:py-6 stg:text-center stg:text-[var(--stgm-muted-foreground,#737373)]">
                   {filter === "all" ? "No tasks to compare." : "No matching tasks."}
                 </td>
               </tr>
@@ -121,7 +121,7 @@ export const TaskComparisonTable = memo(function TaskComparisonTable({
 
       {/* Unmatched tasks */}
       {(comparison.tasksOnlyInBase.length > 0 || comparison.tasksOnlyInCompare.length > 0) && (
-        <div className="mt-1 text-[10px] text-[var(--stgm-muted-foreground,#737373)]">
+        <div className="stg:mt-1 stg:text-[10px] stg:text-[var(--stgm-muted-foreground,#737373)]">
           {comparison.tasksOnlyInBase.length > 0 && (
             <p>Only in base: {comparison.tasksOnlyInBase.join(", ")}</p>
           )}
@@ -144,35 +144,35 @@ const TaskRow = memo(function TaskRow({
   return (
     <tr
       className={cn(
-        "border-b border-[var(--stgm-border,#e5e5e5)] last:border-b-0",
-        task.statusChanged && "bg-[var(--stgm-destructive,#dc2626)]/5",
-        isDivergencePoint && "ring-1 ring-inset ring-[var(--stgm-warning,#f59e0b)]/50",
+        "stg:border-b stg:border-[var(--stgm-border,#e5e5e5)] stg:last:border-b-0",
+        task.statusChanged && "stg:bg-[var(--stgm-destructive,#dc2626)]/5",
+        isDivergencePoint && "stg:ring-1 stg:ring-inset stg:ring-[var(--stgm-warning,#f59e0b)]/50",
       )}
     >
-      <td className="px-3 py-2">
-        <div className="flex items-center gap-1.5">
+      <td className="stg:px-3 stg:py-2">
+        <div className="stg:flex stg:items-center stg:gap-1.5">
           {isDivergencePoint && (
             <span
-              className="inline-block h-1.5 w-1.5 rounded-full bg-[var(--stgm-warning,#f59e0b)]"
+              className="stg:inline-block stg:h-1.5 stg:w-1.5 stg:rounded-full stg:bg-[var(--stgm-warning,#f59e0b)]"
               title="First point of divergence"
               aria-label="Divergence point"
             />
           )}
-          <span className="font-medium text-[var(--stgm-foreground,#1a1a2e)]">
+          <span className="stg:font-medium stg:text-[var(--stgm-foreground,#1a1a2e)]">
             {task.taskName}
           </span>
         </div>
       </td>
-      <td className="px-3 py-2 text-center">
+      <td className="stg:px-3 stg:py-2 stg:text-center">
         <TaskStatusBadge status={task.baseStatus} />
       </td>
-      <td className="px-3 py-2 text-center">
+      <td className="stg:px-3 stg:py-2 stg:text-center">
         <TaskStatusBadge status={task.compareStatus} />
       </td>
-      <td className="px-3 py-2 text-right">
+      <td className="stg:px-3 stg:py-2 stg:text-right">
         <DurationCell task={task} />
       </td>
-      <td className="px-3 py-2 text-right">
+      <td className="stg:px-3 stg:py-2 stg:text-right">
         <CostCell task={task} />
       </td>
     </tr>
@@ -180,9 +180,9 @@ const TaskRow = memo(function TaskRow({
 });
 
 function TaskStatusBadge({ status }: { status: WorkflowTaskStatus }) {
-  const config = TASK_STATUS_CONFIG.get(status) ?? { label: "Unknown", colorClass: "text-[var(--stgm-muted-foreground,#737373)]" };
+  const config = TASK_STATUS_CONFIG.get(status) ?? { label: "Unknown", colorClass: "stg:text-[var(--stgm-muted-foreground,#737373)]" };
   return (
-    <span className={cn("inline-flex items-center gap-1 text-[10px] font-medium", config.colorClass)}>
+    <span className={cn("stg:inline-flex stg:items-center stg:gap-1 stg:text-[10px] stg:font-medium", config.colorClass)}>
       {config.label}
     </span>
   );
@@ -195,19 +195,19 @@ function DurationCell({ task }: { task: TaskComparison }) {
   const compareStr = task.compareDurationMs != null ? formatDuration(task.compareDurationMs) : "—";
 
   if (task.durationDeltaMs == null || task.durationDeltaMs === 0) {
-    return <span className="text-[var(--stgm-muted-foreground,#737373)]">{baseStr}</span>;
+    return <span className="stg:text-[var(--stgm-muted-foreground,#737373)]">{baseStr}</span>;
   }
 
   const sign = task.durationDeltaMs > 0 ? "+" : "−";
   const abs = Math.abs(task.durationDeltaMs);
   const deltaColor = task.durationDeltaMs > 0
-    ? "text-[var(--stgm-destructive,#dc2626)]"
-    : "text-[var(--stgm-success,#16a34a)]";
+    ? "stg:text-[var(--stgm-destructive,#dc2626)]"
+    : "stg:text-[var(--stgm-success,#16a34a)]";
 
   return (
-    <span className="flex flex-col items-end">
-      <span className="text-[var(--stgm-foreground,#1a1a2e)]">{baseStr} / {compareStr}</span>
-      <span className={cn("text-[10px]", deltaColor)}>
+    <span className="stg:flex stg:flex-col stg:items-end">
+      <span className="stg:text-[var(--stgm-foreground,#1a1a2e)]">{baseStr} / {compareStr}</span>
+      <span className={cn("stg:text-[10px]", deltaColor)}>
         {sign}{formatDuration(abs)}
       </span>
     </span>
@@ -216,7 +216,7 @@ function DurationCell({ task }: { task: TaskComparison }) {
 
 function CostCell({ task }: { task: TaskComparison }) {
   if (task.baseCostMicros === BIGINT_ZERO && task.compareCostMicros === BIGINT_ZERO) {
-    return <span className="text-[var(--stgm-muted-foreground,#737373)]">—</span>;
+    return <span className="stg:text-[var(--stgm-muted-foreground,#737373)]">—</span>;
   }
 
   const baseStr = task.baseCostMicros > BIGINT_ZERO ? formatMicroUsd(task.baseCostMicros) : "—";
@@ -224,11 +224,11 @@ function CostCell({ task }: { task: TaskComparison }) {
   const delta = task.baseCostMicros - task.compareCostMicros;
 
   if (delta === BIGINT_ZERO) {
-    return <span className="text-[var(--stgm-muted-foreground,#737373)]">{baseStr}</span>;
+    return <span className="stg:text-[var(--stgm-muted-foreground,#737373)]">{baseStr}</span>;
   }
 
   return (
-    <span className="text-[var(--stgm-foreground,#1a1a2e)]">{baseStr} / {compareStr}</span>
+    <span className="stg:text-[var(--stgm-foreground,#1a1a2e)]">{baseStr} / {compareStr}</span>
   );
 }
 
@@ -250,10 +250,10 @@ function FilterChip({
       aria-selected={active}
       onClick={onClick}
       className={cn(
-        "rounded-full px-2.5 py-1 text-[10px] font-medium transition-colors",
+        "stg:rounded-full stg:px-2.5 stg:py-1 stg:text-[10px] stg:font-medium stg:transition-colors",
         active
-          ? "bg-[var(--stgm-foreground,#1a1a2e)] text-[var(--stgm-background,#fff)]"
-          : "bg-[var(--stgm-muted,#f5f5f5)] text-[var(--stgm-muted-foreground,#737373)] hover:bg-[var(--stgm-border,#e5e5e5)]",
+          ? "stg:bg-[var(--stgm-foreground,#1a1a2e)] stg:text-[var(--stgm-background,#fff)]"
+          : "stg:bg-[var(--stgm-muted,#f5f5f5)] stg:text-[var(--stgm-muted-foreground,#737373)] stg:hover:bg-[var(--stgm-border,#e5e5e5)]",
       )}
     >
       {label} ({count})
@@ -262,11 +262,11 @@ function FilterChip({
 }
 
 const TASK_STATUS_CONFIG = new Map<WorkflowTaskStatus, { label: string; colorClass: string }>([
-  [WorkflowTaskStatus.WORKFLOW_TASK_STATUS_UNSPECIFIED, { label: "—", colorClass: "text-[var(--stgm-muted-foreground,#737373)]" }],
-  [WorkflowTaskStatus.WORKFLOW_TASK_PENDING, { label: "Pending", colorClass: "text-[var(--stgm-muted-foreground,#737373)]" }],
-  [WorkflowTaskStatus.WORKFLOW_TASK_IN_PROGRESS, { label: "Running", colorClass: "text-[var(--stgm-foreground,#1a1a2e)]" }],
-  [WorkflowTaskStatus.WORKFLOW_TASK_COMPLETED, { label: "Completed", colorClass: "text-[var(--stgm-success,#16a34a)]" }],
-  [WorkflowTaskStatus.WORKFLOW_TASK_FAILED, { label: "Failed", colorClass: "text-[var(--stgm-destructive,#dc2626)]" }],
-  [WorkflowTaskStatus.WORKFLOW_TASK_SKIPPED, { label: "Skipped", colorClass: "text-[var(--stgm-muted-foreground,#737373)]" }],
-  [WorkflowTaskStatus.WORKFLOW_TASK_WAITING_APPROVAL, { label: "Waiting", colorClass: "text-[var(--stgm-warning,#f59e0b)]" }],
+  [WorkflowTaskStatus.WORKFLOW_TASK_STATUS_UNSPECIFIED, { label: "—", colorClass: "stg:text-[var(--stgm-muted-foreground,#737373)]" }],
+  [WorkflowTaskStatus.WORKFLOW_TASK_PENDING, { label: "Pending", colorClass: "stg:text-[var(--stgm-muted-foreground,#737373)]" }],
+  [WorkflowTaskStatus.WORKFLOW_TASK_IN_PROGRESS, { label: "Running", colorClass: "stg:text-[var(--stgm-foreground,#1a1a2e)]" }],
+  [WorkflowTaskStatus.WORKFLOW_TASK_COMPLETED, { label: "Completed", colorClass: "stg:text-[var(--stgm-success,#16a34a)]" }],
+  [WorkflowTaskStatus.WORKFLOW_TASK_FAILED, { label: "Failed", colorClass: "stg:text-[var(--stgm-destructive,#dc2626)]" }],
+  [WorkflowTaskStatus.WORKFLOW_TASK_SKIPPED, { label: "Skipped", colorClass: "stg:text-[var(--stgm-muted-foreground,#737373)]" }],
+  [WorkflowTaskStatus.WORKFLOW_TASK_WAITING_APPROVAL, { label: "Waiting", colorClass: "stg:text-[var(--stgm-warning,#f59e0b)]" }],
 ]);

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

@@ -176,11 +176,11 @@ export const ExecutionFilterBar = memo(function ExecutionFilterBar({
     <div
       role="toolbar"
       aria-label="Execution filters"
-      className={cn("flex flex-col gap-2", className)}
+      className={cn("stg:flex stg:flex-col stg:gap-2", className)}
     >
       {/* Row 1: Phase chips */}
-      <div className="flex flex-wrap items-center gap-1.5">
-        <span className="mr-1 text-[11px] font-medium text-[var(--stgm-muted-foreground,#737373)]">
+      <div className="stg:flex stg:flex-wrap stg:items-center stg:gap-1.5">
+        <span className="stg:mr-1 stg:text-[11px] stg:font-medium stg:text-[var(--stgm-muted-foreground,#737373)]">
           Status
         </span>
         {PHASE_CHIPS.map(({ phase, label }) => (
@@ -196,7 +196,7 @@ export const ExecutionFilterBar = memo(function ExecutionFilterBar({
           <button
             type="button"
             onClick={() => setShowMore(true)}
-            className="ml-2 text-[11px] font-medium text-[var(--stgm-primary,#6366f1)] hover:underline"
+            className="stg:ml-2 stg:text-[11px] stg:font-medium stg:text-[var(--stgm-primary,#6366f1)] stg:hover:underline"
           >
             More filters
           </button>
@@ -206,7 +206,7 @@ export const ExecutionFilterBar = memo(function ExecutionFilterBar({
           <button
             type="button"
             onClick={clearAll}
-            className="ml-auto text-[11px] font-medium text-[var(--stgm-muted-foreground,#737373)] hover:text-[var(--stgm-foreground,#1a1a2e)]"
+            className="stg:ml-auto stg:text-[11px] stg:font-medium stg:text-[var(--stgm-muted-foreground,#737373)] stg:hover:text-[var(--stgm-foreground,#1a1a2e)]"
           >
             Clear all ({activeCount})
           </button>
@@ -215,7 +215,7 @@ export const ExecutionFilterBar = memo(function ExecutionFilterBar({
 
       {/* Row 2: Additional filters (shown on "More filters") */}
       {showMore && (
-        <div className="flex flex-wrap items-center gap-x-4 gap-y-2">
+        <div className="stg:flex stg:flex-wrap stg:items-center stg:gap-x-4 stg:gap-y-2">
           <FilterGroup label="Duration">
             {DURATION_PRESETS.map((preset, idx) => (
               <FilterChip
@@ -268,11 +268,11 @@ function FilterChip({
       onClick={onClick}
       aria-pressed={isActive}
       className={cn(
-        "rounded-full px-2.5 py-0.5 text-[11px] font-medium transition-colors",
-        "border focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--stgm-ring,#6366f1)]",
+        "stg:rounded-full stg:px-2.5 stg:py-0.5 stg:text-[11px] stg:font-medium stg:transition-colors",
+        "stg:border stg:focus-visible:outline-none stg:focus-visible:ring-2 stg:focus-visible:ring-[var(--stgm-ring,#6366f1)]",
         isActive
-          ? "border-transparent bg-[var(--stgm-primary,#6366f1)] text-[var(--stgm-primary-foreground,#fff)]"
-          : "border-[var(--stgm-border,#d4d4d8)] bg-[var(--stgm-background,#fff)] text-[var(--stgm-foreground,#1a1a2e)] hover:bg-[var(--stgm-accent,#f5f5f5)]",
+          ? "stg:border-transparent stg:bg-[var(--stgm-primary,#6366f1)] stg:text-[var(--stgm-primary-foreground,#fff)]"
+          : "stg:border-[var(--stgm-border,#d4d4d8)] stg:bg-[var(--stgm-background,#fff)] stg:text-[var(--stgm-foreground,#1a1a2e)] stg:hover:bg-[var(--stgm-accent,#f5f5f5)]",
       )}
     >
       {label}
@@ -288,8 +288,8 @@ function FilterGroup({
   readonly children: React.ReactNode;
 }) {
   return (
-    <div className="flex items-center gap-1.5">
-      <span className="mr-0.5 text-[11px] font-medium text-[var(--stgm-muted-foreground,#737373)]">
+    <div className="stg:flex stg:items-center stg:gap-1.5">
+      <span className="stg:mr-0.5 stg:text-[11px] stg:font-medium stg:text-[var(--stgm-muted-foreground,#737373)]">
         {label}
       </span>
       {children}

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

@@ -33,7 +33,7 @@ const COLUMNS: readonly ColumnDef[] = [
     header: "Name",
     sortField: "name",
     cell: (row) => (
-      <span className="font-medium text-foreground truncate max-w-[12rem] inline-block" title={row.name}>
+      <span className="stg:font-medium stg:text-foreground stg:truncate stg:max-w-[12rem] stg:inline-block" title={row.name}>
         {row.name || "\u2014"}
       </span>
     ),
@@ -124,8 +124,8 @@ const COLUMNS: readonly ColumnDef[] = [
       return (
         <span
           className={cn(
-            "truncate max-w-[10rem] inline-block text-xs",
-            isFailed ? "text-destructive" : "text-muted-foreground",
+            "stg:truncate stg:max-w-[10rem] stg:inline-block stg:text-xs",
+            isFailed ? "stg:text-destructive" : "stg:text-muted-foreground",
           )}
           title={label}
         >
@@ -229,7 +229,7 @@ export const ExecutionHistoryTable = memo(function ExecutionHistoryTable({
     return (
       <div
         role="alert"
-        className={cn("rounded-lg border border-destructive/20 bg-destructive/5 p-6 text-center text-sm text-destructive", className)}
+        className={cn("stg:rounded-lg stg:border stg:border-destructive/20 stg:bg-destructive/5 stg:p-6 stg:text-center stg:text-sm stg:text-destructive", className)}
       >
         Failed to load executions{error.message ? `: ${error.message}` : ""}
       </div>
@@ -242,21 +242,21 @@ export const ExecutionHistoryTable = memo(function ExecutionHistoryTable({
 
   if (rows.length === 0) {
     return (
-      <div className={cn("rounded-lg border border-border p-8 text-center text-sm text-muted-foreground", className)}>
+      <div className={cn("stg:rounded-lg stg:border stg:border-border stg:p-8 stg:text-center stg:text-sm stg:text-muted-foreground", className)}>
         No executions yet
       </div>
     );
   }
 
   return (
-    <div className={cn("overflow-x-auto rounded-lg border border-border", className)}>
+    <div className={cn("stg:overflow-x-auto stg:rounded-lg stg:border stg:border-border", className)}>
       <table
         role="table"
         aria-label="Execution history"
-        className="w-full border-collapse text-sm"
+        className="stg:w-full stg:border-collapse stg:text-sm"
       >
         <thead>
-          <tr className="border-b border-border bg-[var(--stgm-muted,#f4f4f5)]/50">
+          <tr className="stg:border-b stg:border-border stg:bg-[var(--stgm-muted,#f4f4f5)]/50">
             {activeColumns.map((col) => {
               const isSorted = col.sortField === sortField;
               const ariaSortValue = isSorted
@@ -270,9 +270,9 @@ export const ExecutionHistoryTable = memo(function ExecutionHistoryTable({
                   key={col.id}
                   scope="col"
                   className={cn(
-                    "px-3 py-2 text-xs font-medium text-muted-foreground whitespace-nowrap",
-                    col.align === "right" ? "text-right" : "text-left",
-                    col.sortField && "cursor-pointer select-none hover:text-foreground transition-colors",
+                    "stg:px-3 stg:py-2 stg:text-xs stg:font-medium stg:text-muted-foreground stg:whitespace-nowrap",
+                    col.align === "right" ? "stg:text-right" : "stg:text-left",
+                    col.sortField && "stg:cursor-pointer stg:select-none stg:hover:text-foreground stg:transition-colors",
                   )}
                   style={{ minWidth: col.minWidth }}
                   aria-sort={ariaSortValue}
@@ -290,7 +290,7 @@ export const ExecutionHistoryTable = memo(function ExecutionHistoryTable({
                   tabIndex={col.sortField ? 0 : undefined}
                   role={col.sortField ? "columnheader" : undefined}
                 >
-                  <span className="inline-flex items-center gap-1">
+                  <span className="stg:inline-flex stg:items-center stg:gap-1">
                     {col.header}
                     {col.sortField && isSorted && (
                       <SortIndicator direction={sortDir} />
@@ -334,8 +334,8 @@ const ExecutionTableRow = memo(function ExecutionTableRow({
   return (
     <tr
       className={cn(
-        "border-b border-border-muted transition-colors",
-        clickable && "cursor-pointer hover:bg-[var(--stgm-accent-hover,#f5f5f5)]",
+        "stg:border-b stg:border-border-muted stg:transition-colors",
+        clickable && "stg:cursor-pointer stg:hover:bg-[var(--stgm-accent-hover,#f5f5f5)]",
       )}
       onClick={clickable ? () => onRowClick(row.id) : undefined}
       onKeyDown={
@@ -355,8 +355,8 @@ const ExecutionTableRow = memo(function ExecutionTableRow({
         <td
           key={col.id}
           className={cn(
-            "px-3 py-2.5 text-sm tabular-nums",
-            col.align === "right" ? "text-right" : "text-left",
+            "stg:px-3 stg:py-2.5 stg:text-sm stg:tabular-nums",
+            col.align === "right" ? "stg:text-right" : "stg:text-left",
           )}
         >
           {col.cell(row)}
@@ -378,7 +378,7 @@ function SortIndicator({ direction }: { readonly direction: SortDirection }) {
       viewBox="0 0 10 10"
       fill="currentColor"
       aria-hidden="true"
-      className="opacity-60"
+      className="stg:opacity-60"
     >
       {direction === "asc" ? (
         <path d="M5 2L8.5 7H1.5L5 2Z" />
@@ -401,23 +401,23 @@ function LoadingSkeleton({
   readonly className?: string;
 }) {
   return (
-    <div className={cn("overflow-hidden rounded-lg border border-border", className)}>
-      <table className="w-full border-collapse text-sm" aria-label="Loading execution history">
+    <div className={cn("stg:overflow-hidden stg:rounded-lg stg:border stg:border-border", className)}>
+      <table className="stg:w-full stg:border-collapse stg:text-sm" aria-label="Loading execution history">
         <thead>
-          <tr className="border-b border-border bg-[var(--stgm-muted,#f4f4f5)]/50">
+          <tr className="stg:border-b stg:border-border stg:bg-[var(--stgm-muted,#f4f4f5)]/50">
             {Array.from({ length: columnCount }, (_, i) => (
-              <th key={i} className="px-3 py-2">
-                <div className="h-3 w-16 animate-pulse rounded bg-muted" />
+              <th key={i} className="stg:px-3 stg:py-2">
+                <div className="stg:h-3 stg:w-16 stg:animate-pulse stg:rounded stg:bg-muted" />
               </th>
             ))}
           </tr>
         </thead>
         <tbody>
           {Array.from({ length: 5 }, (_, rowIdx) => (
-            <tr key={rowIdx} className="border-b border-border-muted">
+            <tr key={rowIdx} className="stg:border-b stg:border-border-muted">
               {Array.from({ length: columnCount }, (_, colIdx) => (
-                <td key={colIdx} className="px-3 py-2.5">
-                  <div className="h-4 animate-pulse rounded bg-muted" style={{ width: `${40 + (colIdx * 12) % 40}%` }} />
+                <td key={colIdx} className="stg:px-3 stg:py-2.5">
+                  <div className="stg:h-4 stg:animate-pulse stg:rounded stg:bg-muted" style={{ width: `${40 + (colIdx * 12) % 40}%` }} />
                 </td>
               ))}
             </tr>

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

@@ -72,20 +72,20 @@ export const FailureAnalysisPanel = memo(function FailureAnalysisPanel({
     <section
       aria-label="Failure analysis"
       className={cn(
-        "rounded-lg border border-[var(--stgm-border,#d4d4d8)] bg-[var(--stgm-background,#fff)]",
+        "stg:rounded-lg stg:border stg:border-[var(--stgm-border,#d4d4d8)] stg:bg-[var(--stgm-background,#fff)]",
         className,
       )}
     >
-      <div className="flex items-center justify-between border-b border-[var(--stgm-border,#d4d4d8)] px-4 py-2.5">
-        <h3 className="text-xs font-semibold uppercase tracking-wider text-[var(--stgm-muted-foreground,#737373)]">
+      <div className="stg:flex stg:items-center stg:justify-between stg:border-b stg:border-[var(--stgm-border,#d4d4d8)] stg:px-4 stg:py-2.5">
+        <h3 className="stg:text-xs stg:font-semibold stg:uppercase stg:tracking-wider stg:text-[var(--stgm-muted-foreground,#737373)]">
           Recent Failures
         </h3>
-        <span className="text-xs tabular-nums text-[var(--stgm-destructive,#ef4444)]">
+        <span className="stg:text-xs stg:tabular-nums stg:text-[var(--stgm-destructive,#ef4444)]">
           {groups.reduce((sum, g) => sum + g.count, 0)} failed
         </span>
       </div>
 
-      <div className="divide-y divide-[var(--stgm-border-muted,#e5e5e5)]">
+      <div className="stg:divide-y stg:divide-[var(--stgm-border-muted,#e5e5e5)]">
         {visibleGroups.map((group) => (
           <FailureGroupRow
             key={group.taskName}
@@ -101,7 +101,7 @@ export const FailureAnalysisPanel = memo(function FailureAnalysisPanel({
         <button
           type="button"
           onClick={() => setShowAll(true)}
-          className="w-full border-t border-[var(--stgm-border,#d4d4d8)] px-4 py-2 text-xs font-medium text-[var(--stgm-primary,#6366f1)] transition-colors hover:bg-[var(--stgm-accent,#f5f5f5)]"
+          className="stg:w-full stg:border-t stg:border-[var(--stgm-border,#d4d4d8)] stg:px-4 stg:py-2 stg:text-xs stg:font-medium stg:text-[var(--stgm-primary,#6366f1)] stg:transition-colors stg:hover:bg-[var(--stgm-accent,#f5f5f5)]"
         >
           Show {hiddenCount} more failing task{hiddenCount > 1 ? "s" : ""}
         </button>
@@ -131,30 +131,30 @@ function FailureGroupRow({
         type="button"
         onClick={() => onToggle(group.taskName)}
         aria-expanded={isExpanded}
-        className="flex w-full items-center gap-3 px-4 py-2.5 text-left transition-colors hover:bg-[var(--stgm-accent,#f5f5f5)]"
+        className="stg:flex stg:w-full stg:items-center stg:gap-3 stg:px-4 stg:py-2.5 stg:text-left stg:transition-colors stg:hover:bg-[var(--stgm-accent,#f5f5f5)]"
       >
         <ChevronIcon expanded={isExpanded} />
-        <span className="flex-1 min-w-0">
-          <span className="block text-sm font-medium text-[var(--stgm-foreground,#1a1a2e)] truncate">
+        <span className="stg:flex-1 stg:min-w-0">
+          <span className="stg:block stg:text-sm stg:font-medium stg:text-[var(--stgm-foreground,#1a1a2e)] stg:truncate">
             {group.taskName}
           </span>
-          <span className="block text-xs text-[var(--stgm-muted-foreground,#737373)] truncate">
+          <span className="stg:block stg:text-xs stg:text-[var(--stgm-muted-foreground,#737373)] stg:truncate">
             {group.latestError || "No error message"}
           </span>
         </span>
-        <span className="shrink-0 rounded-full bg-[var(--stgm-destructive,#ef4444)]/10 px-2 py-0.5 text-xs font-medium tabular-nums text-[var(--stgm-destructive,#ef4444)]">
+        <span className="stg:shrink-0 stg:rounded-full stg:bg-[var(--stgm-destructive,#ef4444)]/10 stg:px-2 stg:py-0.5 stg:text-xs stg:font-medium stg:tabular-nums stg:text-[var(--stgm-destructive,#ef4444)]">
           {group.count}
         </span>
       </button>
 
       {isExpanded && group.instances.length > 0 && (
-        <div className="border-t border-[var(--stgm-border-muted,#e5e5e5)] bg-[var(--stgm-muted,#f4f4f5)]/30">
+        <div className="stg:border-t stg:border-[var(--stgm-border-muted,#e5e5e5)] stg:bg-[var(--stgm-muted,#f4f4f5)]/30">
           {group.instances.map((inst) => (
             <div
               key={inst.executionId}
               className={cn(
-                "flex items-center gap-3 px-4 py-1.5 pl-10 text-xs",
-                onExecutionClick && "cursor-pointer hover:bg-[var(--stgm-accent-hover,#f5f5f5)]",
+                "stg:flex stg:items-center stg:gap-3 stg:px-4 stg:py-1.5 stg:pl-10 stg:text-xs",
+                onExecutionClick && "stg:cursor-pointer stg:hover:bg-[var(--stgm-accent-hover,#f5f5f5)]",
               )}
               role={onExecutionClick ? "link" : undefined}
               tabIndex={onExecutionClick ? 0 : undefined}
@@ -170,12 +170,12 @@ function FailureGroupRow({
                   : undefined
               }
             >
-              <span className="text-[var(--stgm-foreground,#1a1a2e)] truncate flex-1">
+              <span className="stg:text-[var(--stgm-foreground,#1a1a2e)] stg:truncate stg:flex-1">
                 {inst.executionName || inst.executionId}
               </span>
               {inst.failedAt && (
                 <time
-                  className="shrink-0 text-[var(--stgm-muted-foreground,#737373)]"
+                  className="stg:shrink-0 stg:text-[var(--stgm-muted-foreground,#737373)]"
                   dateTime={inst.failedAt.toISOString()}
                 >
                   {inst.failedAt.toLocaleDateString()}
@@ -206,8 +206,8 @@ function ChevronIcon({ expanded }: { readonly expanded: boolean }) {
       strokeLinejoin="round"
       aria-hidden="true"
       className={cn(
-        "shrink-0 text-[var(--stgm-muted-foreground,#737373)] transition-transform duration-150",
-        expanded && "rotate-90",
+        "stg:shrink-0 stg:text-[var(--stgm-muted-foreground,#737373)] stg:transition-transform stg:duration-150",
+        expanded && "stg:rotate-90",
       )}
     >
       <path d="M4.5 2.5L8 6L4.5 9.5" />