@stigmer/react 3.10.0 → 3.11.0

package/src/workflow/CostByWorkflowChart.tsx

@@ -52,13 +52,13 @@ export const CostByWorkflowChart = memo(function CostByWorkflowChart({
 
   if (isLoading) {
     return (
-      <div className={cn("space-y-3", className)} aria-busy="true">
-        <div className="h-4 w-40 animate-pulse rounded bg-muted" />
+      <div className={cn("stg:space-y-3", className)} aria-busy="true">
+        <div className="stg:h-4 stg:w-40 stg:animate-pulse stg:rounded stg:bg-muted" />
         {Array.from({ length: 4 }, (_, i) => (
-          <div key={i} className="space-y-1">
-            <div className="h-3 w-24 animate-pulse rounded bg-muted" />
+          <div key={i} className="stg:space-y-1">
+            <div className="stg:h-3 stg:w-24 stg:animate-pulse stg:rounded stg:bg-muted" />
             <div
-              className="h-6 animate-pulse rounded bg-muted/50"
+              className="stg:h-6 stg:animate-pulse stg:rounded stg:bg-muted/50"
               style={{ width: `${80 - i * 15}%` }}
             />
           </div>
@@ -69,11 +69,11 @@ export const CostByWorkflowChart = memo(function CostByWorkflowChart({
 
   if (sorted.length === 0) {
     return (
-      <div className={cn("space-y-3", className)}>
-        <h3 className="text-sm font-semibold text-foreground">
+      <div className={cn("stg:space-y-3", className)}>
+        <h3 className="stg:text-sm stg:font-semibold stg:text-foreground">
           Cost by Workflow
         </h3>
-        <p className="py-6 text-center text-xs text-muted-foreground">
+        <p className="stg:py-6 stg:text-center stg:text-xs stg:text-muted-foreground">
           No cost data available
         </p>
       </div>
@@ -81,33 +81,33 @@ export const CostByWorkflowChart = memo(function CostByWorkflowChart({
   }
 
   return (
-    <div className={cn("space-y-3", className)}>
-      <h3 className="text-sm font-semibold text-foreground">
+    <div className={cn("stg:space-y-3", className)}>
+      <h3 className="stg:text-sm stg:font-semibold stg:text-foreground">
         Cost by Workflow
       </h3>
-      <div className="space-y-2.5" role="list" aria-label="Cost by workflow">
+      <div className="stg:space-y-2.5" role="list" aria-label="Cost by workflow">
         {sorted.map((breakdown, i) => {
           const pct = maxCost > 0 ? (breakdown.totalCostUsd / maxCost) * 100 : 0;
           const color = BAR_COLORS[i % BAR_COLORS.length];
 
           return (
             <div key={breakdown.workflowSlug} role="listitem">
-              <div className="mb-0.5 flex items-baseline justify-between gap-2">
-                <span className="truncate text-xs font-medium text-foreground">
+              <div className="stg:mb-0.5 stg:flex stg:items-baseline stg:justify-between stg:gap-2">
+                <span className="stg:truncate stg:text-xs stg:font-medium stg:text-foreground">
                   {breakdown.workflowName || breakdown.workflowSlug}
                 </span>
-                <span className="flex shrink-0 items-baseline gap-2">
-                  <span className="text-xs font-medium tabular-nums text-foreground">
+                <span className="stg:flex stg:shrink-0 stg:items-baseline stg:gap-2">
+                  <span className="stg:text-xs stg:font-medium stg:tabular-nums stg:text-foreground">
                     {formatCost(breakdown.totalCostUsd)}
                   </span>
-                  <span className="text-xs tabular-nums text-muted-foreground">
+                  <span className="stg:text-xs stg:tabular-nums stg:text-muted-foreground">
                     {breakdown.executionCount} runs
                   </span>
                 </span>
               </div>
-              <div className="h-2 overflow-hidden rounded-full bg-muted">
+              <div className="stg:h-2 stg:overflow-hidden stg:rounded-full stg:bg-muted">
                 <div
-                  className="h-full rounded-full transition-all duration-500"
+                  className="stg:h-full stg:rounded-full stg:transition-all stg:duration-500"
                   style={{ width: `${pct}%`, backgroundColor: color }}
                 />
               </div>

package/src/workflow/ExecutionActiveTaskIndicator.tsx

@@ -77,26 +77,26 @@ export const ExecutionActiveTaskIndicator = memo(function ExecutionActiveTaskInd
     : `Now running: ${activeTask.taskName}`;
 
   return (
-    <div className={cn("absolute left-3 top-3 z-50 flex items-center gap-2", className)}>
+    <div className={cn("stg:absolute stg:left-3 stg:top-3 stg:z-50 stg:flex stg:items-center stg:gap-2", className)}>
       {/* Main indicator pill */}
       <button
         type="button"
         onClick={onJumpToTask}
         className={cn(
-          "flex items-center gap-2 rounded-md border px-2.5 py-1.5 text-xs font-medium shadow-sm backdrop-blur-sm transition-colors",
+          "stg:flex stg:items-center stg:gap-2 stg:rounded-md stg:border stg:px-2.5 stg:py-1.5 stg:text-xs stg:font-medium stg:shadow-sm stg:backdrop-blur-sm stg:transition-colors",
           isApproval
-            ? "border-[var(--stgm-warning,#f59e0b)]/40 bg-[var(--stgm-warning,#f59e0b)]/10 text-[var(--stgm-foreground,#1a1a2e)] hover:bg-[var(--stgm-warning,#f59e0b)]/20"
-            : "border-[var(--stgm-primary,#6366f1)]/30 bg-[var(--stgm-card,#fff)]/90 text-[var(--stgm-foreground,#1a1a2e)] hover:bg-[var(--stgm-primary,#6366f1)]/10",
+            ? "stg:border-[var(--stgm-warning,#f59e0b)]/40 stg:bg-[var(--stgm-warning,#f59e0b)]/10 stg:text-[var(--stgm-foreground,#1a1a2e)] stg:hover:bg-[var(--stgm-warning,#f59e0b)]/20"
+            : "stg:border-[var(--stgm-primary,#6366f1)]/30 stg:bg-[var(--stgm-card,#fff)]/90 stg:text-[var(--stgm-foreground,#1a1a2e)] stg:hover:bg-[var(--stgm-primary,#6366f1)]/10",
         )}
         title="Click to center on active task"
       >
         {/* Pulsing status dot */}
         <span
           className={cn(
-            "inline-block h-2 w-2 rounded-full motion-safe:animate-pulse",
+            "stg:inline-block stg:h-2 stg:w-2 stg:rounded-full stg:motion-safe:animate-pulse",
             isApproval
-              ? "bg-[var(--stgm-warning,#f59e0b)]"
-              : "bg-[var(--stgm-primary,#6366f1)]",
+              ? "stg:bg-[var(--stgm-warning,#f59e0b)]"
+              : "stg:bg-[var(--stgm-primary,#6366f1)]",
           )}
           aria-hidden="true"
         />
@@ -105,8 +105,8 @@ export const ExecutionActiveTaskIndicator = memo(function ExecutionActiveTaskInd
 
         {elapsedMs > 0 && (
           <>
-            <span className="text-[var(--stgm-muted-foreground,#737373)]" aria-hidden="true">·</span>
-            <span className="tabular-nums text-[var(--stgm-muted-foreground,#737373)]">
+            <span className="stg:text-[var(--stgm-muted-foreground,#737373)]" aria-hidden="true">·</span>
+            <span className="stg:tabular-nums stg:text-[var(--stgm-muted-foreground,#737373)]">
               {formatDuration(elapsedMs)}
             </span>
           </>
@@ -118,10 +118,10 @@ export const ExecutionActiveTaskIndicator = memo(function ExecutionActiveTaskInd
         type="button"
         onClick={onFollowToggle}
         className={cn(
-          "flex h-7 w-7 items-center justify-center rounded-md border shadow-sm backdrop-blur-sm transition-colors",
+          "stg:flex stg:h-7 stg:w-7 stg:items-center stg:justify-center stg:rounded-md stg:border stg:shadow-sm stg:backdrop-blur-sm stg:transition-colors",
           isFollowing
-            ? "border-[var(--stgm-primary,#6366f1)]/40 bg-[var(--stgm-primary,#6366f1)]/10 text-[var(--stgm-primary,#6366f1)]"
-            : "border-[var(--stgm-border,#e5e5e5)] bg-[var(--stgm-card,#fff)]/90 text-[var(--stgm-muted-foreground,#737373)] hover:text-[var(--stgm-foreground,#1a1a2e)]",
+            ? "stg:border-[var(--stgm-primary,#6366f1)]/40 stg:bg-[var(--stgm-primary,#6366f1)]/10 stg:text-[var(--stgm-primary,#6366f1)]"
+            : "stg:border-[var(--stgm-border,#e5e5e5)] stg:bg-[var(--stgm-card,#fff)]/90 stg:text-[var(--stgm-muted-foreground,#737373)] stg:hover:text-[var(--stgm-foreground,#1a1a2e)]",
         )}
         title={isFollowing ? "Following active task (click to stop)" : "Follow active task"}
         aria-label={isFollowing ? "Stop following active task" : "Follow active task"}
@@ -149,7 +149,7 @@ export const ExecutionActiveTaskIndicator = memo(function ExecutionActiveTaskInd
         role="status"
         aria-live="polite"
         aria-atomic="true"
-        className="sr-only"
+        className="stg:sr-only"
       >
         {announcementText}
       </span>

package/src/workflow/ExecutionSummaryWidget.tsx

@@ -31,24 +31,24 @@ const PHASE_LABEL: ReadonlyMap<number, string> = new Map([
 const STAT_CARDS: readonly StatCardDef[] = [
   {
     label: "Active",
-    valueClass: "text-foreground",
+    valueClass: "stg:text-foreground",
     getValue: (s) => String(s.activeCount),
   },
   {
     label: "Completed",
-    valueClass: "text-success",
+    valueClass: "stg:text-success",
     getValue: (s) =>
       String(s.phaseCounts[ExecutionPhase.EXECUTION_COMPLETED] ?? 0),
   },
   {
     label: "Failed",
-    valueClass: "text-destructive",
+    valueClass: "stg:text-destructive",
     getValue: (s) =>
       String(s.phaseCounts[ExecutionPhase.EXECUTION_FAILED] ?? 0),
   },
   {
     label: "Total Cost",
-    valueClass: "text-foreground",
+    valueClass: "stg:text-foreground",
     getValue: (s) =>
       s.totalCost?.totalCostUsd
         ? `$${s.totalCost.totalCostUsd.toFixed(2)}`
@@ -74,13 +74,13 @@ export const ExecutionSummaryWidget = memo(function ExecutionSummaryWidget({
     if (!summary) return [];
     const entries: { label: string; count: number; colorClass: string }[] = [];
     const colorMap: Record<number, string> = {
-      [ExecutionPhase.EXECUTION_PENDING]: "bg-muted-foreground",
-      [ExecutionPhase.EXECUTION_IN_PROGRESS]: "bg-primary",
-      [ExecutionPhase.EXECUTION_COMPLETED]: "bg-success",
-      [ExecutionPhase.EXECUTION_FAILED]: "bg-destructive",
-      [ExecutionPhase.EXECUTION_CANCELLED]: "bg-muted-foreground",
-      [ExecutionPhase.EXECUTION_TERMINATED]: "bg-destructive",
-      [ExecutionPhase.EXECUTION_PAUSED]: "bg-muted-foreground",
+      [ExecutionPhase.EXECUTION_PENDING]: "stg:bg-muted-foreground",
+      [ExecutionPhase.EXECUTION_IN_PROGRESS]: "stg:bg-primary",
+      [ExecutionPhase.EXECUTION_COMPLETED]: "stg:bg-success",
+      [ExecutionPhase.EXECUTION_FAILED]: "stg:bg-destructive",
+      [ExecutionPhase.EXECUTION_CANCELLED]: "stg:bg-muted-foreground",
+      [ExecutionPhase.EXECUTION_TERMINATED]: "stg:bg-destructive",
+      [ExecutionPhase.EXECUTION_PAUSED]: "stg:bg-muted-foreground",
     };
     for (const [phase, count] of Object.entries(summary.phaseCounts)) {
       const p = Number(phase);
@@ -88,7 +88,7 @@ export const ExecutionSummaryWidget = memo(function ExecutionSummaryWidget({
         entries.push({
           label: PHASE_LABEL.get(p) ?? `Phase ${p}`,
           count,
-          colorClass: colorMap[p] ?? "bg-muted",
+          colorClass: colorMap[p] ?? "stg:bg-muted",
         });
       }
     }
@@ -99,12 +99,12 @@ export const ExecutionSummaryWidget = memo(function ExecutionSummaryWidget({
 
   if (isLoading) {
     return (
-      <div className={cn("space-y-3", className)} aria-busy="true">
-        <div className="grid gap-3 sm:grid-cols-2 lg:grid-cols-4">
+      <div className={cn("stg:space-y-3", className)} aria-busy="true">
+        <div className="stg:grid stg:gap-3 stg:sm:grid-cols-2 stg:lg:grid-cols-4">
           {Array.from({ length: 4 }, (_, i) => (
             <div
               key={i}
-              className="h-[72px] animate-pulse rounded-lg border border-border bg-muted/50"
+              className="stg:h-[72px] stg:animate-pulse stg:rounded-lg stg:border stg:border-border stg:bg-muted/50"
             />
           ))}
         </div>
@@ -119,17 +119,17 @@ export const ExecutionSummaryWidget = memo(function ExecutionSummaryWidget({
     : 0;
 
   return (
-    <div className={cn("space-y-4", className)}>
-      <div className="grid gap-3 sm:grid-cols-2 lg:grid-cols-4">
+    <div className={cn("stg:space-y-4", className)}>
+      <div className="stg:grid stg:gap-3 stg:sm:grid-cols-2 stg:lg:grid-cols-4">
         {STAT_CARDS.map((card) => (
           <div
             key={card.label}
-            className="rounded-lg border border-border bg-card px-4 py-3"
+            className="stg:rounded-lg stg:border stg:border-border stg:bg-card stg:px-4 stg:py-3"
           >
-            <p className="text-xs font-medium text-muted-foreground">
+            <p className="stg:text-xs stg:font-medium stg:text-muted-foreground">
               {card.label}
             </p>
-            <p className={cn("mt-1 text-2xl font-semibold", card.valueClass)}>
+            <p className={cn("stg:mt-1 stg:text-2xl stg:font-semibold", card.valueClass)}>
               {card.getValue(summary)}
             </p>
           </div>
@@ -137,11 +137,11 @@ export const ExecutionSummaryWidget = memo(function ExecutionSummaryWidget({
       </div>
 
       {(avgSeconds > 0 || totalExecutions > 0) && (
-        <div className="flex items-center gap-6 text-xs text-muted-foreground">
+        <div className="stg:flex stg:items-center stg:gap-6 stg:text-xs stg:text-muted-foreground">
           {avgSeconds > 0 && (
             <span>
               Avg duration:{" "}
-              <span className="font-medium text-foreground">
+              <span className="stg:font-medium stg:text-foreground">
                 {formatDurationSec(avgSeconds)}
               </span>
             </span>
@@ -149,7 +149,7 @@ export const ExecutionSummaryWidget = memo(function ExecutionSummaryWidget({
           {totalExecutions > 0 && (
             <span>
               Total:{" "}
-              <span className="font-medium text-foreground">
+              <span className="stg:font-medium stg:text-foreground">
                 {totalExecutions}
               </span>{" "}
               executions
@@ -159,26 +159,26 @@ export const ExecutionSummaryWidget = memo(function ExecutionSummaryWidget({
       )}
 
       {totalExecutions > 0 && (
-        <div className="space-y-2">
+        <div className="stg:space-y-2">
           <div
-            className="flex h-2 overflow-hidden rounded-full bg-muted"
+            className="stg:flex stg:h-2 stg:overflow-hidden stg:rounded-full stg:bg-muted"
             role="img"
             aria-label="Execution phase breakdown"
           >
             {phaseBreakdown.map((entry) => (
               <div
                 key={entry.label}
-                className={cn("h-full", entry.colorClass)}
+                className={cn("stg:h-full", entry.colorClass)}
                 style={{
                   width: `${(entry.count / totalExecutions) * 100}%`,
                 }}
               />
             ))}
           </div>
-          <div className="flex flex-wrap gap-x-4 gap-y-1">
+          <div className="stg:flex stg:flex-wrap stg:gap-x-4 stg:gap-y-1">
             {phaseBreakdown.map((entry) => (
-              <span key={entry.label} className="flex items-center gap-1.5 text-xs text-muted-foreground">
-                <span className={cn("inline-block h-2 w-2 rounded-full", entry.colorClass)} />
+              <span key={entry.label} className="stg:flex stg:items-center stg:gap-1.5 stg:text-xs stg:text-muted-foreground">
+                <span className={cn("stg:inline-block stg:h-2 stg:w-2 stg:rounded-full", entry.colorClass)} />
                 {entry.label}: {entry.count}
               </span>
             ))}

package/src/workflow/ExecutionTrendChart.tsx

@@ -24,31 +24,31 @@ const PHASE_DISPLAY: ReadonlyMap<
 > = new Map([
   [
     ExecutionPhase.EXECUTION_COMPLETED,
-    { label: "Completed", colorClass: "text-success", bgColorClass: "bg-success" },
+    { label: "Completed", colorClass: "stg:text-success", bgColorClass: "stg:bg-success" },
   ],
   [
     ExecutionPhase.EXECUTION_FAILED,
-    { label: "Failed", colorClass: "text-destructive", bgColorClass: "bg-destructive" },
+    { label: "Failed", colorClass: "stg:text-destructive", bgColorClass: "stg:bg-destructive" },
   ],
   [
     ExecutionPhase.EXECUTION_IN_PROGRESS,
-    { label: "Running", colorClass: "text-primary", bgColorClass: "bg-primary" },
+    { label: "Running", colorClass: "stg:text-primary", bgColorClass: "stg:bg-primary" },
   ],
   [
     ExecutionPhase.EXECUTION_PENDING,
-    { label: "Pending", colorClass: "text-muted-foreground", bgColorClass: "bg-muted-foreground" },
+    { label: "Pending", colorClass: "stg:text-muted-foreground", bgColorClass: "stg:bg-muted-foreground" },
   ],
   [
     ExecutionPhase.EXECUTION_PAUSED,
-    { label: "Paused", colorClass: "text-muted-foreground", bgColorClass: "bg-muted-foreground/60" },
+    { label: "Paused", colorClass: "stg:text-muted-foreground", bgColorClass: "stg:bg-muted-foreground/60" },
   ],
   [
     ExecutionPhase.EXECUTION_CANCELLED,
-    { label: "Cancelled", colorClass: "text-muted-foreground", bgColorClass: "bg-muted-foreground/40" },
+    { label: "Cancelled", colorClass: "stg:text-muted-foreground", bgColorClass: "stg:bg-muted-foreground/40" },
   ],
   [
     ExecutionPhase.EXECUTION_TERMINATED,
-    { label: "Terminated", colorClass: "text-destructive", bgColorClass: "bg-destructive/60" },
+    { label: "Terminated", colorClass: "stg:text-destructive", bgColorClass: "stg:bg-destructive/60" },
   ],
 ]);
 
@@ -83,12 +83,12 @@ export const ExecutionTrendChart = memo(function ExecutionTrendChart({
 
   if (isLoading) {
     return (
-      <div className={cn("space-y-3", className)} aria-busy="true">
-        <div className="h-4 w-36 animate-pulse rounded bg-muted" />
-        <div className="h-8 animate-pulse rounded-full bg-muted/50" />
-        <div className="flex gap-4">
+      <div className={cn("stg:space-y-3", className)} aria-busy="true">
+        <div className="stg:h-4 stg:w-36 stg:animate-pulse stg:rounded stg:bg-muted" />
+        <div className="stg:h-8 stg:animate-pulse stg:rounded-full stg:bg-muted/50" />
+        <div className="stg:flex stg:gap-4">
           {Array.from({ length: 3 }, (_, i) => (
-            <div key={i} className="h-3 w-16 animate-pulse rounded bg-muted" />
+            <div key={i} className="stg:h-3 stg:w-16 stg:animate-pulse stg:rounded stg:bg-muted" />
           ))}
         </div>
       </div>
@@ -97,11 +97,11 @@ export const ExecutionTrendChart = memo(function ExecutionTrendChart({
 
   if (!summary || total === 0) {
     return (
-      <div className={cn("space-y-3", className)}>
-        <h3 className="text-sm font-semibold text-foreground">
+      <div className={cn("stg:space-y-3", className)}>
+        <h3 className="stg:text-sm stg:font-semibold stg:text-foreground">
           Execution Distribution
         </h3>
-        <p className="py-6 text-center text-xs text-muted-foreground">
+        <p className="stg:py-6 stg:text-center stg:text-xs stg:text-muted-foreground">
           No execution data available
         </p>
       </div>
@@ -109,44 +109,44 @@ export const ExecutionTrendChart = memo(function ExecutionTrendChart({
   }
 
   return (
-    <div className={cn("space-y-3", className)}>
-      <div className="flex items-baseline justify-between">
-        <h3 className="text-sm font-semibold text-foreground">
+    <div className={cn("stg:space-y-3", className)}>
+      <div className="stg:flex stg:items-baseline stg:justify-between">
+        <h3 className="stg:text-sm stg:font-semibold stg:text-foreground">
           Execution Distribution
         </h3>
-        <span className="text-xs tabular-nums text-muted-foreground">
+        <span className="stg:text-xs stg:tabular-nums stg:text-muted-foreground">
           {total} total
         </span>
       </div>
 
       <div
-        className="flex h-3 overflow-hidden rounded-full bg-muted"
+        className="stg:flex stg:h-3 stg:overflow-hidden stg:rounded-full stg:bg-muted"
         role="img"
         aria-label="Execution phase distribution"
       >
         {segments.map((seg) => (
           <div
             key={seg.label}
-            className={cn("h-full transition-all duration-500", seg.bgColorClass)}
+            className={cn("stg:h-full stg:transition-all stg:duration-500", seg.bgColorClass)}
             style={{ width: `${(seg.count / total) * 100}%` }}
           />
         ))}
       </div>
 
-      <div className="flex flex-wrap gap-x-4 gap-y-1.5">
+      <div className="stg:flex stg:flex-wrap stg:gap-x-4 stg:gap-y-1.5">
         {segments.map((seg) => (
           <span
             key={seg.label}
-            className="flex items-center gap-1.5 text-xs text-muted-foreground"
+            className="stg:flex stg:items-center stg:gap-1.5 stg:text-xs stg:text-muted-foreground"
           >
             <span
               className={cn(
-                "inline-block h-2.5 w-2.5 rounded-sm",
+                "stg:inline-block stg:h-2.5 stg:w-2.5 stg:rounded-sm",
                 seg.bgColorClass,
               )}
             />
             <span>{seg.label}</span>
-            <span className={cn("font-semibold tabular-nums", seg.colorClass)}>
+            <span className={cn("stg:font-semibold stg:tabular-nums", seg.colorClass)}>
               {seg.count}
             </span>
           </span>

package/src/workflow/FailedRunsWidget.tsx

@@ -38,12 +38,12 @@ export const FailedRunsWidget = memo(function FailedRunsWidget({
 }: FailedRunsWidgetProps) {
   if (isLoading) {
     return (
-      <div className={cn("space-y-2", className)} aria-busy="true">
-        <div className="h-4 w-24 animate-pulse rounded bg-muted" />
+      <div className={cn("stg:space-y-2", className)} aria-busy="true">
+        <div className="stg:h-4 stg:w-24 stg:animate-pulse stg:rounded stg:bg-muted" />
         {Array.from({ length: 3 }, (_, i) => (
           <div
             key={i}
-            className="h-14 animate-pulse rounded-lg border border-border bg-muted/50"
+            className="stg:h-14 stg:animate-pulse stg:rounded-lg stg:border stg:border-border stg:bg-muted/50"
           />
         ))}
       </div>
@@ -51,17 +51,17 @@ export const FailedRunsWidget = memo(function FailedRunsWidget({
   }
 
   return (
-    <div className={cn("space-y-3", className)}>
-      <h3 className="text-sm font-semibold text-foreground">
+    <div className={cn("stg:space-y-3", className)}>
+      <h3 className="stg:text-sm stg:font-semibold stg:text-foreground">
         Recent Failures
       </h3>
 
       {executions.length === 0 ? (
-        <p className="py-4 text-center text-xs text-muted-foreground">
+        <p className="stg:py-4 stg:text-center stg:text-xs stg:text-muted-foreground">
           No recent failures
         </p>
       ) : (
-        <ul className="space-y-2" role="list">
+        <ul className="stg:space-y-2" role="list">
           {executions.map((exec) => {
             const id = exec.metadata?.id;
             const name =
@@ -73,18 +73,18 @@ export const FailedRunsWidget = memo(function FailedRunsWidget({
             return (
               <li
                 key={id}
-                className="rounded-lg border border-destructive/20 bg-destructive/5 px-3 py-2.5"
+                className="stg:rounded-lg stg:border stg:border-destructive/20 stg:bg-destructive/5 stg:px-3 stg:py-2.5"
               >
-                <div className="flex items-start justify-between gap-2">
-                  <div className="min-w-0 flex-1">
-                    <p className="truncate text-sm font-medium text-foreground">
+                <div className="stg:flex stg:items-start stg:justify-between stg:gap-2">
+                  <div className="stg:min-w-0 stg:flex-1">
+                    <p className="stg:truncate stg:text-sm stg:font-medium stg:text-foreground">
                       {name}
                     </p>
-                    <p className="mt-0.5 line-clamp-1 text-xs text-destructive">
+                    <p className="stg:mt-0.5 stg:line-clamp-1 stg:text-xs stg:text-destructive">
                       {errorMsg}
                     </p>
                     {failedDate && (
-                      <p className="mt-0.5 text-xs text-muted-foreground">
+                      <p className="stg:mt-0.5 stg:text-xs stg:text-muted-foreground">
                         {formatTimeAgo(failedDate)}
                       </p>
                     )}
@@ -93,7 +93,7 @@ export const FailedRunsWidget = memo(function FailedRunsWidget({
                     <button
                       type="button"
                       onClick={() => onViewClick(id)}
-                      className="shrink-0 rounded-md border border-border bg-background px-2.5 py-1 text-xs font-medium text-foreground transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+                      className="stg:shrink-0 stg:rounded-md stg:border stg:border-border stg:bg-background stg:px-2.5 stg:py-1 stg:text-xs stg:font-medium stg:text-foreground stg:transition-colors stg:hover:bg-accent stg:hover:text-accent-foreground stg:focus-visible:outline-none stg:focus-visible:ring-2 stg:focus-visible:ring-ring"
                     >
                       View
                     </button>

package/src/workflow/PendingApprovalsWidget.tsx

@@ -39,15 +39,15 @@ export const PendingApprovalsWidget = memo(function PendingApprovalsWidget({
 }: PendingApprovalsWidgetProps) {
   if (isLoading) {
     return (
-      <div className={cn("space-y-2", className)} aria-busy="true">
-        <div className="flex items-center justify-between">
-          <div className="h-4 w-32 animate-pulse rounded bg-muted" />
-          <div className="h-4 w-8 animate-pulse rounded bg-muted" />
+      <div className={cn("stg:space-y-2", className)} aria-busy="true">
+        <div className="stg:flex stg:items-center stg:justify-between">
+          <div className="stg:h-4 stg:w-32 stg:animate-pulse stg:rounded stg:bg-muted" />
+          <div className="stg:h-4 stg:w-8 stg:animate-pulse stg:rounded stg:bg-muted" />
         </div>
         {Array.from({ length: 3 }, (_, i) => (
           <div
             key={i}
-            className="h-14 animate-pulse rounded-lg border border-border bg-muted/50"
+            className="stg:h-14 stg:animate-pulse stg:rounded-lg stg:border stg:border-border stg:bg-muted/50"
           />
         ))}
       </div>
@@ -55,24 +55,24 @@ export const PendingApprovalsWidget = memo(function PendingApprovalsWidget({
   }
 
   return (
-    <div className={cn("space-y-3", className)}>
-      <div className="flex items-center justify-between">
-        <h3 className="text-sm font-semibold text-foreground">
+    <div className={cn("stg:space-y-3", className)}>
+      <div className="stg:flex stg:items-center stg:justify-between">
+        <h3 className="stg:text-sm stg:font-semibold stg:text-foreground">
           Pending Approvals
         </h3>
         {totalCount > 0 && (
-          <span className="rounded-full bg-warning/10 px-2 py-0.5 text-xs font-medium text-warning">
+          <span className="stg:rounded-full stg:bg-warning/10 stg:px-2 stg:py-0.5 stg:text-xs stg:font-medium stg:text-warning">
             {totalCount}
           </span>
         )}
       </div>
 
       {approvals.length === 0 ? (
-        <p className="py-4 text-center text-xs text-muted-foreground">
+        <p className="stg:py-4 stg:text-center stg:text-xs stg:text-muted-foreground">
           No approvals pending
         </p>
       ) : (
-        <ul className="space-y-2" role="list">
+        <ul className="stg:space-y-2" role="list">
           {approvals.map((approval) => {
             const requestedAt = approval.requestedAt
               ? timestampDate(approval.requestedAt)
@@ -81,21 +81,21 @@ export const PendingApprovalsWidget = memo(function PendingApprovalsWidget({
             return (
               <li
                 key={`${approval.executionId}-${approval.taskName}`}
-                className="rounded-lg border border-border px-3 py-2.5"
+                className="stg:rounded-lg stg:border stg:border-border stg:px-3 stg:py-2.5"
               >
-                <div className="flex items-start justify-between gap-2">
-                  <div className="min-w-0 flex-1">
-                    <div className="flex items-center gap-1.5">
-                      <p className="truncate text-sm font-medium text-foreground">
+                <div className="stg:flex stg:items-start stg:justify-between stg:gap-2">
+                  <div className="stg:min-w-0 stg:flex-1">
+                    <div className="stg:flex stg:items-center stg:gap-1.5">
+                      <p className="stg:truncate stg:text-sm stg:font-medium stg:text-foreground">
                         {approval.workflowName || approval.executionId}
                       </p>
                       {approval.uiHint && (
-                        <span className="shrink-0 rounded bg-muted px-1.5 py-0.5 text-[10px] font-medium text-muted-foreground">
+                        <span className="stg:shrink-0 stg:rounded stg:bg-muted stg:px-1.5 stg:py-0.5 stg:text-[10px] stg:font-medium stg:text-muted-foreground">
                           {approval.uiHint}
                         </span>
                       )}
                     </div>
-                    <p className="mt-0.5 truncate text-xs text-muted-foreground">
+                    <p className="stg:mt-0.5 stg:truncate stg:text-xs stg:text-muted-foreground">
                       Task: {approval.taskName}
                       {requestedAt && (
                         <> &middot; {formatTimeAgo(requestedAt)}</>
@@ -106,7 +106,7 @@ export const PendingApprovalsWidget = memo(function PendingApprovalsWidget({
                     <button
                       type="button"
                       onClick={() => onReviewClick(approval.executionId)}
-                      className="shrink-0 rounded-md bg-primary px-2.5 py-1 text-xs font-medium text-primary-foreground transition-colors hover:bg-primary-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+                      className="stg:shrink-0 stg:rounded-md stg:bg-primary stg:px-2.5 stg:py-1 stg:text-xs stg:font-medium stg:text-primary-foreground stg:transition-colors stg:hover:bg-primary-hover stg:focus-visible:outline-none stg:focus-visible:ring-2 stg:focus-visible:ring-ring"
                     >
                       Review
                     </button>