@stigmer/react 3.9.0 → 3.11.0

package/src/workflow/instance/WorkflowInstanceDetailPanel.tsx

@@ -141,30 +141,30 @@ export function WorkflowInstanceDetailPanel({
   const updatedAt = audit?.updatedAt ? timestampDate(audit.updatedAt) : null;
 
   return (
-    <div className="border border-border rounded-lg bg-background overflow-hidden">
+    <div className="stg:border stg:border-border stg:rounded-lg stg:bg-background stg:overflow-hidden">
       {/* Header */}
-      <div className="flex items-center justify-between border-b border-border px-4 py-3">
+      <div className="stg:flex stg:items-center stg:justify-between stg:border-b stg:border-border stg:px-4 stg:py-3">
         <div>
-          <div className="flex items-center gap-2">
-            <h3 className="text-sm font-semibold text-foreground">
+          <div className="stg:flex stg:items-center stg:gap-2">
+            <h3 className="stg:text-sm stg:font-semibold stg:text-foreground">
               {meta?.name || meta?.slug || "Instance"}
             </h3>
             <VisibilityBadge visibility={visibility} />
           </div>
-          <p className="text-[0.65rem] text-muted-foreground">
+          <p className="stg:text-[0.65rem] stg:text-muted-foreground">
             {createdAt && `Created ${createdAt.toLocaleDateString()}`}
             {updatedAt && ` · Updated ${updatedAt.toLocaleDateString()}`}
           </p>
         </div>
-        <div className="flex items-center gap-2">
+        <div className="stg:flex stg:items-center stg:gap-2">
           {onRunClick && (
             <button
               type="button"
               onClick={() => onRunClick(instance)}
               className={cn(
-                "rounded-md px-2.5 py-1 text-xs font-medium",
-                "bg-primary text-primary-foreground hover:bg-primary/90",
-                "focus:outline-none focus:ring-2 focus:ring-ring",
+                "stg:rounded-md stg:px-2.5 stg:py-1 stg:text-xs stg:font-medium",
+                "stg:bg-primary stg:text-primary-foreground stg:hover:bg-primary/90",
+                "stg:focus:outline-none stg:focus:ring-2 stg:focus:ring-ring",
               )}
             >
               Run
@@ -190,8 +190,8 @@ export function WorkflowInstanceDetailPanel({
             onClick={onClose}
             aria-label="Close panel"
             className={cn(
-              "rounded-md p-1 text-muted-foreground",
-              "hover:text-foreground hover:bg-accent-hover",
+              "stg:rounded-md stg:p-1 stg:text-muted-foreground",
+              "stg:hover:text-foreground stg:hover:bg-accent-hover",
             )}
           >
             <CloseIcon />
@@ -199,19 +199,19 @@ export function WorkflowInstanceDetailPanel({
         </div>
       </div>
 
-      <div className="divide-y divide-border">
+      <div className="stg:divide-y stg:divide-border">
         {/* Description */}
         {spec?.description && (
-          <div className="px-4 py-3">
-            <h4 className="text-xs font-medium text-muted-foreground mb-1">Description</h4>
-            <p className="text-sm text-foreground">{spec.description}</p>
+          <div className="stg:px-4 stg:py-3">
+            <h4 className="stg:text-xs stg:font-medium stg:text-muted-foreground stg:mb-1">Description</h4>
+            <p className="stg:text-sm stg:text-foreground">{spec.description}</p>
           </div>
         )}
 
         {/* Environments */}
-        <div className="px-4 py-3">
-          <div className="flex items-center justify-between mb-2">
-            <h4 className="text-xs font-medium text-muted-foreground">
+        <div className="stg:px-4 stg:py-3">
+          <div className="stg:flex stg:items-center stg:justify-between stg:mb-2">
+            <h4 className="stg:text-xs stg:font-medium stg:text-muted-foreground">
               Environments ({spec?.environmentRefs?.length ?? 0})
             </h4>
             {!isEditingEnvs && (
@@ -219,7 +219,7 @@ export function WorkflowInstanceDetailPanel({
                 <button
                   type="button"
                   onClick={handleStartEditEnvs}
-                  className="text-[0.65rem] text-primary hover:underline"
+                  className="stg:text-[0.65rem] stg:text-primary stg:hover:underline"
                 >
                   Edit
                 </button>
@@ -228,22 +228,22 @@ export function WorkflowInstanceDetailPanel({
           </div>
 
           {isEditingEnvs ? (
-            <div className="space-y-2">
+            <div className="stg:space-y-2">
               <EnvironmentPicker
                 org={org}
                 value={editEnvRefs}
                 onChange={setEditEnvRefs}
                 disabled={isUpdating}
               />
-              <div className="flex items-center gap-2">
+              <div className="stg:flex stg:items-center stg:gap-2">
                 <button
                   type="button"
                   onClick={handleSaveEnvs}
                   disabled={isUpdating}
                   className={cn(
-                    "rounded-md px-2.5 py-1 text-xs font-medium",
-                    "bg-primary text-primary-foreground hover:bg-primary/90",
-                    "disabled:opacity-50",
+                    "stg:rounded-md stg:px-2.5 stg:py-1 stg:text-xs stg:font-medium",
+                    "stg:bg-primary stg:text-primary-foreground stg:hover:bg-primary/90",
+                    "stg:disabled:opacity-50",
                   )}
                 >
                   {isUpdating ? "Saving..." : "Save"}
@@ -252,7 +252,7 @@ export function WorkflowInstanceDetailPanel({
                   type="button"
                   onClick={() => setIsEditingEnvs(false)}
                   disabled={isUpdating}
-                  className="rounded-md px-2.5 py-1 text-xs font-medium text-foreground hover:bg-accent-hover"
+                  className="stg:rounded-md stg:px-2.5 stg:py-1 stg:text-xs stg:font-medium stg:text-foreground stg:hover:bg-accent-hover"
                 >
                   Cancel
                 </button>
@@ -261,13 +261,13 @@ export function WorkflowInstanceDetailPanel({
           ) : (
             <div>
               {(spec?.environmentRefs?.length ?? 0) === 0 ? (
-                <p className="text-xs text-muted-foreground">No environments bound.</p>
+                <p className="stg:text-xs stg:text-muted-foreground">No environments bound.</p>
               ) : (
-                <ol className="space-y-1">
+                <ol className="stg:space-y-1">
                   {spec!.environmentRefs.map((ref, idx) => (
-                    <li key={`${ref.slug}-${idx}`} className="flex items-center gap-2 text-sm">
-                      <span className="text-xs text-muted-foreground w-4 text-right">{idx + 1}.</span>
-                      <span className="text-foreground">{resolveEnvName(ref.slug)}</span>
+                    <li key={`${ref.slug}-${idx}`} className="stg:flex stg:items-center stg:gap-2 stg:text-sm">
+                      <span className="stg:text-xs stg:text-muted-foreground stg:w-4 stg:text-right">{idx + 1}.</span>
+                      <span className="stg:text-foreground">{resolveEnvName(ref.slug)}</span>
                     </li>
                   ))}
                 </ol>
@@ -278,42 +278,42 @@ export function WorkflowInstanceDetailPanel({
 
         {/* Delete */}
         <PermissionGate resource={{ kind: "workflow_instance", id }} relation="can_delete">
-          <div className="px-4 py-3">
-            <h4 className="text-xs font-medium text-destructive mb-2">Danger Zone</h4>
+          <div className="stg:px-4 stg:py-3">
+            <h4 className="stg:text-xs stg:font-medium stg:text-destructive stg:mb-2">Danger Zone</h4>
             {!showDeleteConfirm ? (
               <button
                 type="button"
                 onClick={() => setShowDeleteConfirm(true)}
                 className={cn(
-                  "rounded-md px-3 py-1.5 text-xs font-medium",
-                  "border border-destructive/30 text-destructive",
-                  "hover:bg-destructive/10",
-                  "focus:outline-none focus:ring-2 focus:ring-destructive",
+                  "stg:rounded-md stg:px-3 stg:py-1.5 stg:text-xs stg:font-medium",
+                  "stg:border stg:border-destructive/30 stg:text-destructive",
+                  "stg:hover:bg-destructive/10",
+                  "stg:focus:outline-none stg:focus:ring-2 stg:focus:ring-destructive",
                 )}
               >
                 Delete Instance
               </button>
             ) : (
-              <div className="space-y-2 rounded-md border border-destructive/30 p-3 bg-destructive/5">
-                <p className="text-xs text-destructive font-medium">
+              <div className="stg:space-y-2 stg:rounded-md stg:border stg:border-destructive/30 stg:p-3 stg:bg-destructive/5">
+                <p className="stg:text-xs stg:text-destructive stg:font-medium">
                   This will permanently delete this instance and all its execution history.
                   This action cannot be undone.
                 </p>
                 {deleteError && (
-                  <p className="text-xs text-destructive" role="alert">
+                  <p className="stg:text-xs stg:text-destructive" role="alert">
                     {getUserMessage(deleteError)}
                   </p>
                 )}
-                <div className="flex items-center gap-2">
+                <div className="stg:flex stg:items-center stg:gap-2">
                   <button
                     type="button"
                     onClick={handleDelete}
                     disabled={isDeleting}
                     className={cn(
-                      "rounded-md px-3 py-1.5 text-xs font-medium",
-                      "bg-destructive text-destructive-foreground",
-                      "hover:bg-destructive/90",
-                      "disabled:opacity-50",
+                      "stg:rounded-md stg:px-3 stg:py-1.5 stg:text-xs stg:font-medium",
+                      "stg:bg-destructive stg:text-destructive-foreground",
+                      "stg:hover:bg-destructive/90",
+                      "stg:disabled:opacity-50",
                     )}
                   >
                     {isDeleting ? "Deleting..." : "Confirm Delete"}
@@ -322,7 +322,7 @@ export function WorkflowInstanceDetailPanel({
                     type="button"
                     onClick={() => setShowDeleteConfirm(false)}
                     disabled={isDeleting}
-                    className="rounded-md px-3 py-1.5 text-xs font-medium text-foreground hover:bg-accent-hover"
+                    className="stg:rounded-md stg:px-3 stg:py-1.5 stg:text-xs stg:font-medium stg:text-foreground stg:hover:bg-accent-hover"
                   >
                     Cancel
                   </button>

package/src/workflow/instance/WorkflowInstanceList.tsx

@@ -104,7 +104,7 @@ export function WorkflowInstanceList({
 
   if (error) {
     return (
-      <div className="py-8 text-center text-sm text-destructive">
+      <div className="stg:py-8 stg:text-center stg:text-sm stg:text-destructive">
         Failed to load instances
       </div>
     );
@@ -115,9 +115,9 @@ export function WorkflowInstanceList({
   }
 
   return (
-    <div className={cn("space-y-3", className)}>
-      <div className="flex items-center justify-between">
-        <h3 className="text-sm font-medium 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-medium stg:text-foreground">
           {userInstances.length} {userInstances.length === 1 ? "instance" : "instances"}
         </h3>
         {onCreateClick && (
@@ -132,20 +132,20 @@ export function WorkflowInstanceList({
         )}
       </div>
 
-      <div className="overflow-hidden rounded-lg border border-border">
+      <div className="stg:overflow-hidden stg:rounded-lg stg:border stg:border-border">
         {/* table-fixed keeps the layout deterministic: Name/Environments flex
             and truncate, Visibility/Actions take fixed widths, so long
             content can never push the Actions kebab off the panel's edge. */}
-        <table className="w-full table-fixed text-sm">
+        <table className="stg:w-full stg:table-fixed stg:text-sm">
           <thead>
-            <tr className="border-b border-border bg-muted-subtle">
-              <th className="px-4 py-2 text-left font-medium text-muted-foreground">Name</th>
-              <th className="px-4 py-2 text-left font-medium text-muted-foreground">Environments</th>
-              <th className="w-36 px-4 py-2 text-left font-medium text-muted-foreground">Visibility</th>
-              <th className="w-16 px-4 py-2 text-right font-medium text-muted-foreground">Actions</th>
+            <tr className="stg:border-b stg:border-border stg:bg-muted-subtle">
+              <th className="stg:px-4 stg:py-2 stg:text-left stg:font-medium stg:text-muted-foreground">Name</th>
+              <th className="stg:px-4 stg:py-2 stg:text-left stg:font-medium stg:text-muted-foreground">Environments</th>
+              <th className="stg:w-36 stg:px-4 stg:py-2 stg:text-left stg:font-medium stg:text-muted-foreground">Visibility</th>
+              <th className="stg:w-16 stg:px-4 stg:py-2 stg:text-right stg:font-medium stg:text-muted-foreground">Actions</th>
             </tr>
           </thead>
-          <tbody className="divide-y divide-border">
+          <tbody className="stg:divide-y stg:divide-border">
             {userInstances.map((inst) => (
               <InstanceRow
                 key={inst.metadata?.id}
@@ -199,40 +199,40 @@ function InstanceRow({
   return (
     <tr
       className={cn(
-        "transition-colors",
-        onRowClick && "cursor-pointer hover:bg-accent-hover",
+        "stg:transition-colors",
+        onRowClick && "stg:cursor-pointer stg:hover:bg-accent-hover",
       )}
       onClick={() => onRowClick?.(instance)}
     >
-      <td className="px-4 py-2.5">
-        <div className="min-w-0">
+      <td className="stg:px-4 stg:py-2.5">
+        <div className="stg:min-w-0">
           <span
-            className="block truncate font-medium text-foreground"
+            className="stg:block stg:truncate stg:font-medium stg:text-foreground"
             title={meta?.name || meta?.slug || undefined}
           >
             {meta?.name || meta?.slug || "—"}
           </span>
           {instance.spec?.description && (
-            <p className="text-[0.65rem] text-muted-foreground truncate">
+            <p className="stg:text-[0.65rem] stg:text-muted-foreground stg:truncate">
               {instance.spec.description}
             </p>
           )}
         </div>
       </td>
 
-      <td className="px-4 py-2.5">
+      <td className="stg:px-4 stg:py-2.5">
         {envRefs.length === 0 ? (
-          <span className="text-xs text-muted-foreground">None</span>
+          <span className="stg:text-xs stg:text-muted-foreground">None</span>
         ) : (
-          <div className="flex flex-wrap gap-1">
+          <div className="stg:flex stg:flex-wrap stg:gap-1">
             {envRefs.map((ref, idx) => (
               <span
                 key={`${ref.slug}-${idx}`}
                 className={cn(
-                  "inline-flex items-center rounded-md px-1.5 py-0.5",
-                  "text-[0.65rem] font-medium",
-                  "bg-muted text-muted-foreground",
-                  "border border-border",
+                  "stg:inline-flex stg:items-center stg:rounded-md stg:px-1.5 stg:py-0.5",
+                  "stg:text-[0.65rem] stg:font-medium",
+                  "stg:bg-muted stg:text-muted-foreground",
+                  "stg:border stg:border-border",
                 )}
               >
                 {resolveEnvName(ref.slug)}
@@ -242,7 +242,7 @@ function InstanceRow({
         )}
       </td>
 
-      <td className="px-4 py-2.5" onClick={(e) => e.stopPropagation()}>
+      <td className="stg:px-4 stg:py-2.5" onClick={(e) => e.stopPropagation()}>
         {id ? (
           <ResourceVisibilityControl
             kind="workflowInstance"
@@ -251,21 +251,21 @@ function InstanceRow({
             onChanged={refetch}
           />
         ) : (
-          <span className="text-xs text-muted-foreground">—</span>
+          <span className="stg:text-xs stg:text-muted-foreground">—</span>
         )}
       </td>
 
       {/* stopPropagation so opening the kebab never triggers the row's
           click. The menu content itself is portaled, so its items never
           bubble to the row regardless. */}
-      <td className="px-4 py-2.5 text-right" onClick={(e) => e.stopPropagation()}>
+      <td className="stg:px-4 stg:py-2.5 stg:text-right" onClick={(e) => e.stopPropagation()}>
         {(showRun || showDelete) && (
           <ActionMenu>
             <ActionMenu.Trigger
-              className="ml-auto"
+              className="stg:ml-auto"
               aria-label={`Actions for ${meta?.name || meta?.slug}`}
             >
-              <MoreHorizontal className="size-4" />
+              <MoreHorizontal className="stg:size-4" />
             </ActionMenu.Trigger>
             <ActionMenu.Content>
               {showRun && (
@@ -296,9 +296,9 @@ function InstanceRow({
 
 function LoadingSkeleton() {
   return (
-    <div className="space-y-2 py-4">
+    <div className="stg:space-y-2 stg:py-4">
       {[1, 2, 3].map((i) => (
-        <div key={i} className="h-12 animate-pulse rounded-md bg-muted-faint" />
+        <div key={i} className="stg:h-12 stg:animate-pulse stg:rounded-md stg:bg-muted-faint" />
       ))}
     </div>
   );

package/src/workflow/instance/__tests__/WorkflowInstanceList.test.tsx

@@ -3,12 +3,6 @@ import { render, screen, fireEvent, cleanup } from "@testing-library/react";
 import { ApiResourceVisibility } from "@stigmer/protos/ai/stigmer/commons/apiresource/enum_pb";
 import { WorkflowInstanceList } from "../WorkflowInstanceList";
 
-// The kebab menu portals its content; without a StigmerProvider the portal
-// container is null and nothing mounts — pin it to document.body.
-vi.mock("../../../portal-container", () => ({
-  useStigmerPortalContainer: () => document.body,
-}));
-
 // Isolate the row-actions behavior under test from the data, environment,
 // visibility, and permission subsystems (each has its own tests).
 const data = vi.hoisted(() => ({

package/src/workflow/node-shell/BranchBadge.tsx

@@ -59,22 +59,22 @@ function ForkBadge({ config }: { config: Record<string, unknown> }) {
   const overflow = branches.length > maxVisible ? branches.length - maxVisible : 0;
 
   return (
-    <div className="absolute left-1/2 -translate-x-1/2 top-full mt-1 flex items-center gap-0.5 pointer-events-none">
+    <div className="stg:absolute stg:left-1/2 stg:-translate-x-1/2 stg:top-full stg:mt-1 stg:flex stg:items-center stg:gap-0.5 stg:pointer-events-none">
       {visible.map((name) => (
         <span
           key={name}
-          className="rounded bg-[var(--stgm-muted,#f5f5f5)] border border-[var(--stgm-border,#e5e5e5)] px-1 py-px text-[8px] font-medium text-[var(--stgm-muted-foreground,#737373)] whitespace-nowrap"
+          className="stg:rounded stg:bg-[var(--stgm-muted,#f5f5f5)] stg:border stg:border-[var(--stgm-border,#e5e5e5)] stg:px-1 stg:py-px stg:text-[8px] stg:font-medium stg:text-[var(--stgm-muted-foreground,#737373)] stg:whitespace-nowrap"
         >
           {name}
         </span>
       ))}
       {overflow > 0 && (
-        <span className="text-[8px] text-[var(--stgm-muted-foreground,#737373)]">
+        <span className="stg:text-[8px] stg:text-[var(--stgm-muted-foreground,#737373)]">
           +{overflow}
         </span>
       )}
       {compete && (
-        <span className="ml-0.5 rounded bg-[var(--stgm-chart-amber,#f59e0b)]/10 border border-[var(--stgm-chart-amber,#f59e0b)]/30 px-1 py-px text-[8px] font-medium text-[var(--stgm-chart-amber,#f59e0b)] whitespace-nowrap">
+        <span className="stg:ml-0.5 stg:rounded stg:bg-[var(--stgm-chart-amber,#f59e0b)]/10 stg:border stg:border-[var(--stgm-chart-amber,#f59e0b)]/30 stg:px-1 stg:py-px stg:text-[8px] stg:font-medium stg:text-[var(--stgm-chart-amber,#f59e0b)] stg:whitespace-nowrap">
           race
         </span>
       )}
@@ -89,8 +89,8 @@ function TryCatchBadge({ config }: { config: Record<string, unknown> }) {
   const asVar = (catchBlock as Record<string, unknown>).as as string | undefined;
 
   return (
-    <div className="absolute left-1/2 -translate-x-1/2 top-full mt-1 flex items-center gap-0.5 pointer-events-none">
-      <span className="rounded bg-[var(--stgm-destructive,#ef4444)]/10 border border-[var(--stgm-destructive,#ef4444)]/20 px-1 py-px text-[8px] font-medium text-[var(--stgm-destructive,#ef4444)] whitespace-nowrap">
+    <div className="stg:absolute stg:left-1/2 stg:-translate-x-1/2 stg:top-full stg:mt-1 stg:flex stg:items-center stg:gap-0.5 stg:pointer-events-none">
+      <span className="stg:rounded stg:bg-[var(--stgm-destructive,#ef4444)]/10 stg:border stg:border-[var(--stgm-destructive,#ef4444)]/20 stg:px-1 stg:py-px stg:text-[8px] stg:font-medium stg:text-[var(--stgm-destructive,#ef4444)] stg:whitespace-nowrap">
         catch: {asVar || "error"}
       </span>
     </div>
@@ -111,12 +111,12 @@ function ForEachBadge({ config }: { config: Record<string, unknown> }) {
   const showErrorPolicy = parallelism > 0 && onError && onError !== "FOR_EACH_FAIL_FAST" && onError !== "FOR_EACH_ERROR_POLICY_UNSPECIFIED";
 
   return (
-    <div className="absolute left-1/2 -translate-x-1/2 top-full mt-1 flex items-center gap-0.5 pointer-events-none">
-      <span className="rounded bg-[var(--stgm-muted,#f5f5f5)] border border-[var(--stgm-border,#e5e5e5)] px-1 py-px text-[8px] font-medium text-[var(--stgm-muted-foreground,#737373)] whitespace-nowrap">
+    <div className="stg:absolute stg:left-1/2 stg:-translate-x-1/2 stg:top-full stg:mt-1 stg:flex stg:items-center stg:gap-0.5 stg:pointer-events-none">
+      <span className="stg:rounded stg:bg-[var(--stgm-muted,#f5f5f5)] stg:border stg:border-[var(--stgm-border,#e5e5e5)] stg:px-1 stg:py-px stg:text-[8px] stg:font-medium stg:text-[var(--stgm-muted-foreground,#737373)] stg:whitespace-nowrap">
         ↻ {parts.join(" ")}
       </span>
       {showErrorPolicy && (
-        <span className="rounded bg-[var(--stgm-chart-amber,#f59e0b)]/10 border border-[var(--stgm-chart-amber,#f59e0b)]/30 px-1 py-px text-[8px] font-medium text-[var(--stgm-chart-amber,#f59e0b)] whitespace-nowrap">
+        <span className="stg:rounded stg:bg-[var(--stgm-chart-amber,#f59e0b)]/10 stg:border stg:border-[var(--stgm-chart-amber,#f59e0b)]/30 stg:px-1 stg:py-px stg:text-[8px] stg:font-medium stg:text-[var(--stgm-chart-amber,#f59e0b)] stg:whitespace-nowrap">
           {onError === "FOR_EACH_CONTINUE" ? "continue" : "skip"}
         </span>
       )}

package/src/workflow/node-shell/DiffBadge.tsx

@@ -32,7 +32,7 @@ export const DiffBadge = memo(function DiffBadge({
   return (
     <span
       className={cn(
-        "absolute -right-1.5 -top-1.5 z-20 flex h-5 min-w-5 items-center justify-center rounded-full px-1 text-[10px] font-semibold leading-none shadow-sm",
+        "stg:absolute stg:-right-1.5 stg:-top-1.5 stg:z-20 stg:flex stg:h-5 stg:min-w-5 stg:items-center stg:justify-center stg:rounded-full stg:px-1 stg:text-[10px] stg:font-semibold stg:leading-none stg:shadow-sm",
         className,
       )}
       title={label}
@@ -57,16 +57,16 @@ const DIFF_BADGE_CONFIG: Record<
   added: {
     icon: "+",
     label: "Added",
-    className: "bg-[var(--stgm-success,#22c55e)] text-[var(--stgm-success-foreground,#fff)]",
+    className: "stg:bg-[var(--stgm-success,#22c55e)] stg:text-[var(--stgm-success-foreground,#fff)]",
   },
   removed: {
     icon: "−",
     label: "Removed",
-    className: "bg-[var(--stgm-destructive,#ef4444)] text-[var(--stgm-destructive-foreground,#fff)]",
+    className: "stg:bg-[var(--stgm-destructive,#ef4444)] stg:text-[var(--stgm-destructive-foreground,#fff)]",
   },
   modified: {
     icon: "~",
     label: "Modified",
-    className: "bg-[var(--stgm-warning,#f59e0b)] text-[var(--stgm-warning-foreground,#fff)]",
+    className: "stg:bg-[var(--stgm-warning,#f59e0b)] stg:text-[var(--stgm-warning-foreground,#fff)]",
   },
 };

package/src/workflow/node-shell/ExecutionBadge.tsx

@@ -56,14 +56,14 @@ export const ExecutionBadge = memo(function ExecutionBadge({
     return (
       <span
         className={cn(
-          "absolute -right-1.5 -top-1.5 z-20 flex h-5 items-center gap-0.5 rounded-full px-1.5 text-[10px] font-semibold leading-none shadow-sm",
-          "bg-[var(--stgm-warning,#f59e0b)] text-[var(--stgm-warning-foreground,#fff)]",
+          "stg:absolute stg:-right-1.5 stg:-top-1.5 stg:z-20 stg:flex stg:h-5 stg:items-center stg:gap-0.5 stg:rounded-full stg:px-1.5 stg:text-[10px] stg:font-semibold stg:leading-none stg:shadow-sm",
+          "stg:bg-[var(--stgm-warning,#f59e0b)] stg:text-[var(--stgm-warning-foreground,#fff)]",
         )}
         title={approvalLabel}
         aria-label={approvalLabel}
       >
         ✋
-        <span className="max-w-[60px] truncate">{approvalToolName}</span>
+        <span className="stg:max-w-[60px] stg:truncate">{approvalToolName}</span>
       </span>
     );
   }
@@ -78,14 +78,14 @@ export const ExecutionBadge = memo(function ExecutionBadge({
     return (
       <span
         className={cn(
-          "absolute -right-1.5 -top-1.5 z-20 flex h-5 items-center gap-0.5 rounded-full px-1.5 text-[10px] font-semibold leading-none shadow-sm",
-          "bg-[var(--stgm-primary,#6366f1)] text-[var(--stgm-primary-foreground,#fff)]",
+          "stg:absolute stg:-right-1.5 stg:-top-1.5 stg:z-20 stg:flex stg:h-5 stg:items-center stg:gap-0.5 stg:rounded-full stg:px-1.5 stg:text-[10px] stg:font-semibold stg:leading-none stg:shadow-sm",
+          "stg:bg-[var(--stgm-primary,#6366f1)] stg:text-[var(--stgm-primary-foreground,#fff)]",
         )}
         title={agentLabel}
         aria-label={agentLabel}
       >
         {agentActivity.currentToolName ? "🔧" : "💬"}
-        <span className="max-w-[60px] truncate">{displayText}</span>
+        <span className="stg:max-w-[60px] stg:truncate">{displayText}</span>
       </span>
     );
   }
@@ -99,14 +99,14 @@ export const ExecutionBadge = memo(function ExecutionBadge({
     return (
       <span
         className={cn(
-          "absolute -right-1.5 -top-1.5 z-20 flex h-5 min-w-5 items-center justify-center rounded-full px-1.5 text-[10px] font-semibold leading-none shadow-sm",
-          "bg-[var(--stgm-primary,#6366f1)] text-[var(--stgm-primary-foreground,#fff)]",
+          "stg:absolute stg:-right-1.5 stg:-top-1.5 stg:z-20 stg:flex stg:h-5 stg:min-w-5 stg:items-center stg:justify-center stg:rounded-full stg:px-1.5 stg:text-[10px] stg:font-semibold stg:leading-none stg:shadow-sm",
+          "stg:bg-[var(--stgm-primary,#6366f1)] stg:text-[var(--stgm-primary-foreground,#fff)]",
         )}
         title={progressLabel}
         aria-label={progressLabel}
       >
         {forkProgress.completed}/{forkProgress.total}
-        {forkProgress.compete && <span className="ml-0.5">⚡</span>}
+        {forkProgress.compete && <span className="stg:ml-0.5">⚡</span>}
       </span>
     );
   }
@@ -116,7 +116,7 @@ export const ExecutionBadge = memo(function ExecutionBadge({
   return (
     <span
       className={cn(
-        "absolute -right-1.5 -top-1.5 z-20 flex h-5 min-w-5 items-center justify-center rounded-full px-1 text-[10px] font-semibold leading-none shadow-sm",
+        "stg:absolute stg:-right-1.5 stg:-top-1.5 stg:z-20 stg:flex stg:h-5 stg:min-w-5 stg:items-center stg:justify-center stg:rounded-full stg:px-1 stg:text-[10px] stg:font-semibold stg:leading-none stg:shadow-sm",
         className,
       )}
       title={label + (attemptNumber && attemptNumber > 1 ? ` (attempt ${attemptNumber})` : "")}
@@ -124,7 +124,7 @@ export const ExecutionBadge = memo(function ExecutionBadge({
     >
       {icon}
       {status === "retrying" && attemptNumber != null && attemptNumber > 1 && (
-        <span className="ml-0.5">{attemptNumber}</span>
+        <span className="stg:ml-0.5">{attemptNumber}</span>
       )}
     </span>
   );
@@ -140,31 +140,31 @@ const BADGE_CONFIG: Record<Exclude<NodeExecutionStatus, "not_reached" | "pending
   running: {
     icon: "⟳",
     label: "Running",
-    className: "bg-[var(--stgm-primary,#6366f1)] text-[var(--stgm-primary-foreground,#fff)]",
+    className: "stg:bg-[var(--stgm-primary,#6366f1)] stg:text-[var(--stgm-primary-foreground,#fff)]",
   },
   completed: {
     icon: "✓",
     label: "Completed",
-    className: "bg-[var(--stgm-success,#22c55e)] text-[var(--stgm-success-foreground,#fff)]",
+    className: "stg:bg-[var(--stgm-success,#22c55e)] stg:text-[var(--stgm-success-foreground,#fff)]",
   },
   failed: {
     icon: "✕",
     label: "Failed",
-    className: "bg-[var(--stgm-destructive,#ef4444)] text-[var(--stgm-destructive-foreground,#fff)]",
+    className: "stg:bg-[var(--stgm-destructive,#ef4444)] stg:text-[var(--stgm-destructive-foreground,#fff)]",
   },
   skipped: {
     icon: "—",
     label: "Skipped",
-    className: "bg-[var(--stgm-muted,#e5e5e5)] text-[var(--stgm-muted-foreground,#737373)]",
+    className: "stg:bg-[var(--stgm-muted,#e5e5e5)] stg:text-[var(--stgm-muted-foreground,#737373)]",
   },
   retrying: {
     icon: "↻",
     label: "Retrying",
-    className: "bg-[var(--stgm-warning,#f59e0b)] text-[var(--stgm-warning-foreground,#fff)]",
+    className: "stg:bg-[var(--stgm-warning,#f59e0b)] stg:text-[var(--stgm-warning-foreground,#fff)]",
   },
   waiting_approval: {
     icon: "✋",
     label: "Waiting for approval",
-    className: "bg-[var(--stgm-warning,#f59e0b)] text-[var(--stgm-warning-foreground,#fff)]",
+    className: "stg:bg-[var(--stgm-warning,#f59e0b)] stg:text-[var(--stgm-warning-foreground,#fff)]",
   },
 };