@stigmer/react 3.10.0 → 3.11.1-dev.20260812192248

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" />

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

@@ -40,15 +40,15 @@ export const HealthMetricsStrip = memo(function HealthMetricsStrip({
     return (
       <div
         className={cn(
-          "flex items-center gap-4 overflow-x-auto rounded-lg border border-[var(--stgm-border,#d4d4d8)] bg-[var(--stgm-background,#fff)] px-4 py-2.5",
+          "stg:flex stg:items-center stg:gap-4 stg:overflow-x-auto stg:rounded-lg stg:border stg:border-[var(--stgm-border,#d4d4d8)] stg:bg-[var(--stgm-background,#fff)] stg:px-4 stg:py-2.5",
           className,
         )}
         aria-label="Loading health metrics"
       >
         {Array.from({ length: 6 }, (_, i) => (
-          <div key={i} className="flex items-center gap-2">
-            <div className="h-3 w-12 animate-pulse rounded bg-[var(--stgm-muted,#e5e5e5)]" />
-            <div className="h-4 w-8 animate-pulse rounded bg-[var(--stgm-muted,#e5e5e5)]" />
+          <div key={i} className="stg:flex stg:items-center stg:gap-2">
+            <div className="stg:h-3 stg:w-12 stg:animate-pulse stg:rounded stg:bg-[var(--stgm-muted,#e5e5e5)]" />
+            <div className="stg:h-4 stg:w-8 stg:animate-pulse stg:rounded stg:bg-[var(--stgm-muted,#e5e5e5)]" />
           </div>
         ))}
       </div>
@@ -63,11 +63,11 @@ export const HealthMetricsStrip = memo(function HealthMetricsStrip({
 
   const successPct = successRate >= 0 ? `${Math.round(successRate * 100)}%` : "\u2014";
   const successColor = successRate >= 0.9
-    ? "text-[var(--stgm-success,#22c55e)]"
+    ? "stg:text-[var(--stgm-success,#22c55e)]"
     : successRate >= 0.7
-      ? "text-[var(--stgm-warning,#f59e0b)]"
+      ? "stg:text-[var(--stgm-warning,#f59e0b)]"
       : successRate >= 0
-        ? "text-[var(--stgm-destructive,#ef4444)]"
+        ? "stg:text-[var(--stgm-destructive,#ef4444)]"
         : "";
 
   const avgDuration = summary.avgDuration
@@ -87,7 +87,7 @@ export const HealthMetricsStrip = memo(function HealthMetricsStrip({
       role="region"
       aria-label="Execution health metrics"
       className={cn(
-        "flex flex-wrap items-center gap-x-4 gap-y-1 rounded-lg border border-[var(--stgm-border,#d4d4d8)] bg-[var(--stgm-background,#fff)] px-4 py-2.5",
+        "stg:flex stg:flex-wrap stg:items-center stg:gap-x-4 stg:gap-y-1 stg:rounded-lg stg:border stg:border-[var(--stgm-border,#d4d4d8)] stg:bg-[var(--stgm-background,#fff)] stg:px-4 stg:py-2.5",
         className,
       )}
     >
@@ -102,7 +102,7 @@ export const HealthMetricsStrip = memo(function HealthMetricsStrip({
       <Metric
         label="Active"
         value={String(activeCount)}
-        valueClassName={activeCount > 0 ? "text-[var(--stgm-primary,#6366f1)]" : ""}
+        valueClassName={activeCount > 0 ? "stg:text-[var(--stgm-primary,#6366f1)]" : ""}
         badge={activeCount > 0 ? <LiveDot /> : undefined}
       />
       <Divider />
@@ -130,11 +130,11 @@ function Metric({
   readonly badge?: React.ReactNode;
 }) {
   return (
-    <div className="flex items-baseline gap-1.5">
-      <span className="text-[11px] font-medium text-[var(--stgm-muted-foreground,#737373)] whitespace-nowrap">
+    <div className="stg:flex stg:items-baseline stg:gap-1.5">
+      <span className="stg:text-[11px] stg:font-medium stg:text-[var(--stgm-muted-foreground,#737373)] stg:whitespace-nowrap">
         {label}
       </span>
-      <span className={cn("text-sm font-semibold tabular-nums text-[var(--stgm-foreground,#1a1a2e)]", valueClassName)}>
+      <span className={cn("stg:text-sm stg:font-semibold stg:tabular-nums stg:text-[var(--stgm-foreground,#1a1a2e)]", valueClassName)}>
         {value}
       </span>
       {badge}
@@ -146,16 +146,16 @@ function Divider() {
   return (
     <span
       aria-hidden="true"
-      className="h-4 w-px shrink-0 bg-[var(--stgm-border,#d4d4d8)]"
+      className="stg:h-4 stg:w-px stg:shrink-0 stg:bg-[var(--stgm-border,#d4d4d8)]"
     />
   );
 }
 
 function LiveDot() {
   return (
-    <span className="relative inline-flex h-1.5 w-1.5" aria-hidden="true">
-      <span className="absolute inline-flex h-full w-full animate-ping rounded-full bg-[var(--stgm-primary,#6366f1)] opacity-75" />
-      <span className="relative inline-flex h-1.5 w-1.5 rounded-full bg-[var(--stgm-primary,#6366f1)]" />
+    <span className="stg:relative stg:inline-flex stg:h-1.5 stg:w-1.5" aria-hidden="true">
+      <span className="stg:absolute stg:inline-flex stg:h-full stg:w-full stg:animate-ping stg:rounded-full stg:bg-[var(--stgm-primary,#6366f1)] stg:opacity-75" />
+      <span className="stg:relative stg:inline-flex stg:h-1.5 stg:w-1.5 stg:rounded-full stg:bg-[var(--stgm-primary,#6366f1)]" />
     </span>
   );
 }

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

@@ -93,7 +93,7 @@ export const WorkflowExecutionHistory = memo(function WorkflowExecutionHistory({
   return (
     <section
       aria-label="Execution history"
-      className={cn("flex flex-col gap-4", className)}
+      className={cn("stg:flex stg:flex-col stg:gap-4", className)}
     >
       <HealthMetricsStrip summary={summary} isLoading={summaryLoading} />
 

package/src/workflow/facets/WorkflowArtifactsTab.tsx

@@ -46,8 +46,8 @@ export function WorkflowArtifactsTab({
 
   if (entries.length === 0) {
     return (
-      <div className="flex flex-col items-center justify-center px-4 py-8 text-center">
-        <p className="text-xs text-muted-foreground">
+      <div className="stg:flex stg:flex-col stg:items-center stg:justify-center stg:px-4 stg:py-8 stg:text-center">
+        <p className="stg:text-xs stg:text-muted-foreground">
           No artifacts yet. Files produced by workflow tasks will appear here.
         </p>
       </div>
@@ -55,7 +55,7 @@ export function WorkflowArtifactsTab({
   }
 
   return (
-    <ul role="list" className="flex flex-col">
+    <ul role="list" className="stg:flex stg:flex-col">
       {entries.map(({ artifact, item }) => (
         <WorkflowArtifactRow
           key={artifact.metadata?.id ?? item.name}

package/src/workflow/facets/WorkflowChangesTab.tsx

@@ -69,18 +69,18 @@ export function WorkflowChangesTab({
     return (
       <div
         role="status"
-        className="flex flex-col items-center justify-center px-4 py-8 text-center"
+        className="stg:flex stg:flex-col stg:items-center stg:justify-center stg:px-4 stg:py-8 stg:text-center"
       >
-        <p className="text-xs text-muted-foreground">Loading file changes…</p>
+        <p className="stg:text-xs stg:text-muted-foreground">Loading file changes…</p>
       </div>
     );
   }
 
   if (fileChanges.length === 0) {
     return (
-      <div className="flex flex-col gap-2 px-4 py-8 text-center">
+      <div className="stg:flex stg:flex-col stg:gap-2 stg:px-4 stg:py-8 stg:text-center">
         {error && <ErrorNotice error={error} />}
-        <p className="text-xs text-muted-foreground">
+        <p className="stg:text-xs stg:text-muted-foreground">
           No file changes yet. Files edited by agent tasks will appear here.
         </p>
       </div>
@@ -88,9 +88,9 @@ export function WorkflowChangesTab({
   }
 
   return (
-    <div className="flex flex-col gap-2">
+    <div className="stg:flex stg:flex-col stg:gap-2">
       {error && (
-        <div className="px-2 pt-2">
+        <div className="stg:px-2 stg:pt-2">
           <ErrorNotice error={error} />
         </div>
       )}
@@ -105,7 +105,7 @@ export function WorkflowChangesTab({
       />
 
       {isRefetching && (
-        <p role="status" className="px-3 pb-2 text-[0.65rem] text-muted-foreground-faint">
+        <p role="status" className="stg:px-3 stg:pb-2 stg:text-[0.65rem] stg:text-muted-foreground-faint">
           Updating…
         </p>
       )}
@@ -121,7 +121,7 @@ function ErrorNotice({ error }: { readonly error: Error }) {
   return (
     <div
       role="alert"
-      className="rounded-md border border-border bg-muted-subtle px-3 py-2 text-left text-xs text-destructive"
+      className="stg:rounded-md stg:border stg:border-border stg:bg-muted-subtle stg:px-3 stg:py-2 stg:text-left stg:text-xs stg:text-destructive"
     >
       Some task changes could not be loaded: {error.message}
     </div>

package/src/workflow/facets/WorkflowUsageTab.tsx

@@ -55,8 +55,8 @@ export function WorkflowUsageTab({
 
   if (!hasAggregate && items.length === 0) {
     return (
-      <div className="flex flex-col items-center justify-center px-4 py-8 text-center">
-        <p className="text-xs text-muted-foreground">
+      <div className="stg:flex stg:flex-col stg:items-center stg:justify-center stg:px-4 stg:py-8 stg:text-center">
+        <p className="stg:text-xs stg:text-muted-foreground">
           No usage data yet. Cost and token stats will appear here.
         </p>
       </div>
@@ -64,15 +64,15 @@ export function WorkflowUsageTab({
   }
 
   return (
-    <div className="flex flex-col gap-4">
+    <div className="stg:flex stg:flex-col stg:gap-4">
       <UsageSummary costSummary={costSummary} />
 
       {items.length > 0 && (
-        <div className="flex flex-col gap-1">
-          <h3 className="px-2 text-xs font-semibold uppercase tracking-wider text-muted-foreground">
+        <div className="stg:flex stg:flex-col stg:gap-1">
+          <h3 className="stg:px-2 stg:text-xs stg:font-semibold stg:uppercase stg:tracking-wider stg:text-muted-foreground">
             By task
           </h3>
-          <ul role="list" className="flex flex-col">
+          <ul role="list" className="stg:flex stg:flex-col">
             {items.map((item) => (
               <UsageRow key={item.taskName} item={item} />
             ))}
@@ -107,16 +107,16 @@ function UsageSummary({
 
   return (
     <div
-      className="flex flex-col gap-1.5 px-2"
+      className="stg:flex stg:flex-col stg:gap-1.5 stg:px-2"
       role="region"
       aria-label="Execution cost summary"
     >
-      <div className="flex items-baseline gap-1.5">
-        <span className="text-sm font-medium tabular-nums text-foreground">
+      <div className="stg:flex stg:items-baseline stg:gap-1.5">
+        <span className="stg:text-sm stg:font-medium stg:tabular-nums stg:text-foreground">
           {formatMicroUsd(costSummary.costConsumedMicros)}
         </span>
         {costLimit !== undefined && (
-          <span className="text-xs tabular-nums text-muted-foreground">
+          <span className="stg:text-xs stg:tabular-nums stg:text-muted-foreground">
             of {formatMicroUsd(costLimit)} budget
           </span>
         )}
@@ -128,7 +128,7 @@ function UsageSummary({
         label="Cost budget"
       />
 
-      <div className="text-xs tabular-nums text-muted-foreground">
+      <div className="stg:text-xs stg:tabular-nums stg:text-muted-foreground">
         {formatTokenCount(costSummary.tokensConsumed)} tokens
         {tokenLimit !== undefined && ` of ${formatTokenCount(tokenLimit)}`}
       </div>
@@ -140,7 +140,7 @@ function UsageSummary({
       />
 
       {costSummary.thresholdBreached && (
-        <p className="flex items-center gap-1.5 text-xs text-warning">
+        <p className="stg:flex stg:items-center stg:gap-1.5 stg:text-xs stg:text-warning">
           <WarningIcon />
           Budget threshold breached
         </p>
@@ -169,23 +169,23 @@ function BudgetGauge({
   const percentage = Number((consumed * BigInt(100)) / limit);
 
   return (
-    <div className="flex items-center gap-2" aria-label={label}>
+    <div className="stg:flex stg:items-center stg:gap-2" aria-label={label}>
       <div
         role="progressbar"
         aria-valuenow={Math.min(percentage, 100)}
         aria-valuemin={0}
         aria-valuemax={100}
-        className="h-1.5 min-w-0 flex-1 overflow-hidden rounded-full bg-muted"
+        className="stg:h-1.5 stg:min-w-0 stg:flex-1 stg:overflow-hidden stg:rounded-full stg:bg-muted"
       >
         <div
           className={cn(
-            "h-full rounded-full transition-all",
-            breached || percentage > 80 ? "bg-warning" : "bg-primary",
+            "stg:h-full stg:rounded-full stg:transition-all",
+            breached || percentage > 80 ? "stg:bg-warning" : "stg:bg-primary",
           )}
           style={{ width: `${Math.min(percentage, 100)}%` }}
         />
       </div>
-      <span className="shrink-0 text-[10px] tabular-nums text-muted-foreground">
+      <span className="stg:shrink-0 stg:text-[10px] stg:tabular-nums stg:text-muted-foreground">
         {percentage.toFixed(0)}%
       </span>
     </div>
@@ -199,19 +199,19 @@ function BudgetGauge({
  */
 function UsageRow({ item }: { readonly item: WorkflowUsageItem }) {
   return (
-    <li className="flex items-stretch">
-      <div className="flex min-w-0 flex-1 items-center gap-2 px-2 py-1 text-left text-xs text-muted-foreground">
-        <span className="min-w-0 flex-1 truncate text-foreground">
+    <li className="stg:flex stg:items-stretch">
+      <div className="stg:flex stg:min-w-0 stg:flex-1 stg:items-center stg:gap-2 stg:px-2 stg:py-1 stg:text-left stg:text-xs stg:text-muted-foreground">
+        <span className="stg:min-w-0 stg:flex-1 stg:truncate stg:text-foreground">
           {item.taskName}
-          <span className="ml-1.5 text-[0.65rem] text-muted-foreground">
+          <span className="stg:ml-1.5 stg:text-[0.65rem] stg:text-muted-foreground">
             {item.kindLabel}
             {isInFlight(item.status) && ` · ${statusLabel(item.status)}`}
           </span>
         </span>
-        <span className="shrink-0 tabular-nums text-foreground">
+        <span className="stg:shrink-0 stg:tabular-nums stg:text-foreground">
           {formatMicroUsd(item.costMicros)}
         </span>
-        <span className="w-14 shrink-0 text-right tabular-nums text-[0.65rem] text-muted-foreground-faint">
+        <span className="stg:w-14 stg:shrink-0 stg:text-right stg:tabular-nums stg:text-[0.65rem] stg:text-muted-foreground-faint">
           {formatTokenCount(item.tokensUsed)} tok
         </span>
       </div>
@@ -247,7 +247,7 @@ function WarningIcon() {
       strokeWidth="2"
       strokeLinecap="round"
       strokeLinejoin="round"
-      className="shrink-0"
+      className="stg:shrink-0"
       aria-hidden="true"
     >
       <path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z" />

package/src/workflow/inspector/EdgeInspector.tsx

@@ -28,33 +28,33 @@ export function EdgeInspector({
   const targetNode = graph.nodes.find((n) => n.id === edge.target);
 
   return (
-    <div className={cn("flex h-full flex-col gap-4 p-3", className)}>
-      <h3 className="text-[11px] font-semibold uppercase tracking-wide text-[var(--stgm-muted-foreground,#737373)]">
+    <div className={cn("stg:flex stg:h-full stg:flex-col stg:gap-4 stg:p-3", className)}>
+      <h3 className="stg:text-[11px] stg:font-semibold stg:uppercase stg:tracking-wide stg:text-[var(--stgm-muted-foreground,#737373)]">
         Connection
       </h3>
 
-      <div className="flex flex-col gap-2">
-        <div className="flex items-center gap-2 text-xs">
-          <span className="font-medium text-[var(--stgm-foreground,#1a1a2e)]">
+      <div className="stg:flex stg:flex-col stg:gap-2">
+        <div className="stg:flex stg:items-center stg:gap-2 stg:text-xs">
+          <span className="stg:font-medium stg:text-[var(--stgm-foreground,#1a1a2e)]">
             {sourceNode?.taskName ?? edge.source}
           </span>
-          <span className="text-[var(--stgm-muted-foreground,#737373)]">→</span>
-          <span className="font-medium text-[var(--stgm-foreground,#1a1a2e)]">
+          <span className="stg:text-[var(--stgm-muted-foreground,#737373)]">→</span>
+          <span className="stg:font-medium stg:text-[var(--stgm-foreground,#1a1a2e)]">
             {targetNode?.taskName ?? edge.target}
           </span>
         </div>
 
         {edge.label && (
-          <div className="flex items-center gap-1.5">
-            <span className="text-[11px] text-[var(--stgm-muted-foreground,#737373)]">Label:</span>
-            <span className="text-xs text-[var(--stgm-foreground,#1a1a2e)]">{edge.label}</span>
+          <div className="stg:flex stg:items-center stg:gap-1.5">
+            <span className="stg:text-[11px] stg:text-[var(--stgm-muted-foreground,#737373)]">Label:</span>
+            <span className="stg:text-xs stg:text-[var(--stgm-foreground,#1a1a2e)]">{edge.label}</span>
           </div>
         )}
 
         {edge.sourceHandle && (
-          <div className="flex items-center gap-1.5">
-            <span className="text-[11px] text-[var(--stgm-muted-foreground,#737373)]">Port:</span>
-            <span className="text-xs text-[var(--stgm-foreground,#1a1a2e)]">{edge.sourceHandle}</span>
+          <div className="stg:flex stg:items-center stg:gap-1.5">
+            <span className="stg:text-[11px] stg:text-[var(--stgm-muted-foreground,#737373)]">Port:</span>
+            <span className="stg:text-xs stg:text-[var(--stgm-foreground,#1a1a2e)]">{edge.sourceHandle}</span>
           </div>
         )}
       </div>
@@ -63,7 +63,7 @@ export function EdgeInspector({
         <button
           type="button"
           onClick={() => onDeleteEdge(edge.id)}
-          className="self-start rounded px-2 py-1 text-xs text-[var(--stgm-destructive,#ef4444)] hover:bg-[var(--stgm-destructive,#ef4444)]/10"
+          className="stg:self-start stg:rounded stg:px-2 stg:py-1 stg:text-xs stg:text-[var(--stgm-destructive,#ef4444)] stg:hover:bg-[var(--stgm-destructive,#ef4444)]/10"
         >
           Delete connection
         </button>

package/src/workflow/inspector/InspectorHeader.tsx

@@ -5,6 +5,8 @@ import { cn } from "@stigmer/theme";
 import type { WorkflowGraphModel } from "../workflow-graph-model.js";
 import { TASK_NAME_PATTERN, TASK_NAME_PATTERN_ERROR } from "../canvas-constants.js";
 import type { InspectorNodeIdentity, InspectorMutations } from "./types.js";
+import { Tooltip, TooltipContent, TooltipTrigger } from "../../internal/tooltip.js";
+import { TruncatedText } from "../../internal/truncated-text.js";
 
 /** Props for {@link InspectorHeader}. */
 export interface InspectorHeaderProps {
@@ -87,12 +89,12 @@ export const InspectorHeader = memo(function InspectorHeader({
   const closeMenu = useCallback(() => setMenuOpen(false), []);
 
   return (
-    <div className={cn("flex flex-col gap-1.5 border-b border-[var(--stgm-border,#e5e5e5)] px-3 py-2.5", className)}>
+    <div className={cn("stg:flex stg:flex-col stg:gap-1.5 stg:border-b stg:border-[var(--stgm-border,#e5e5e5)] stg:px-3 stg:py-2.5", className)}>
       {/* Row 1: task name + overflow menu */}
-      <div className="flex items-center gap-1">
-        <div className="min-w-0 flex-1">
+      <div className="stg:flex stg:items-center stg:gap-1">
+        <div className="stg:min-w-0 stg:flex-1">
           {editingName ? (
-            <div className="flex flex-col gap-0.5">
+            <div className="stg:flex stg:flex-col stg:gap-0.5">
               <input
                 type="text"
                 value={nameValue}
@@ -100,30 +102,36 @@ export const InspectorHeader = memo(function InspectorHeader({
                 onBlur={commitName}
                 onKeyDown={handleKeyDown}
                 autoFocus
-                className="w-full rounded-md border border-[var(--stgm-border,#d4d4d8)] bg-[var(--stgm-background,#fff)] px-2 py-1 text-sm font-semibold text-[var(--stgm-foreground,#1a1a2e)] focus:outline-none focus:ring-1 focus:ring-[var(--stgm-ring,#3b82f6)]"
+                className="stg:w-full stg:rounded-md stg:border stg:border-[var(--stgm-border,#d4d4d8)] stg:bg-[var(--stgm-background,#fff)] stg:px-2 stg:py-1 stg:text-sm stg:font-semibold stg:text-[var(--stgm-foreground,#1a1a2e)] stg:focus:outline-none stg:focus:ring-1 stg:focus:ring-[var(--stgm-ring,#3b82f6)]"
               />
               {nameError && (
-                <span className="text-[10px] text-[var(--stgm-destructive,#ef4444)]">{nameError}</span>
+                <span className="stg:text-[10px] stg:text-[var(--stgm-destructive,#ef4444)]">{nameError}</span>
               )}
             </div>
           ) : (
-            <button
-              type="button"
-              onClick={startEditing}
-              className="w-fit max-w-full truncate text-left text-sm font-semibold text-[var(--stgm-foreground,#1a1a2e)] hover:underline"
-              title="Click to rename"
-            >
-              {identity.taskName}
-            </button>
+            <Tooltip>
+              <TooltipTrigger
+                render={
+                  <button
+                    type="button"
+                    onClick={startEditing}
+                    className="stg:w-fit stg:max-w-full stg:truncate stg:text-left stg:text-sm stg:font-semibold stg:text-[var(--stgm-foreground,#1a1a2e)] stg:hover:underline"
+                  />
+                }
+              >
+                {identity.taskName}
+              </TooltipTrigger>
+              <TooltipContent side="top">Click to rename</TooltipContent>
+            </Tooltip>
           )}
         </div>
 
         {/* Overflow menu trigger */}
-        <div className="relative shrink-0">
+        <div className="stg:relative stg:shrink-0">
           <button
             type="button"
             onClick={toggleMenu}
-            className="flex h-6 w-6 items-center justify-center rounded text-[var(--stgm-muted-foreground,#737373)] hover:bg-[var(--stgm-muted,#f5f5f5)] hover:text-[var(--stgm-foreground,#1a1a2e)]"
+            className="stg:flex stg:h-6 stg:w-6 stg:items-center stg:justify-center stg:rounded stg:text-[var(--stgm-muted-foreground,#737373)] stg:hover:bg-[var(--stgm-muted,#f5f5f5)] stg:hover:text-[var(--stgm-foreground,#1a1a2e)]"
             aria-label="Node actions"
             aria-expanded={menuOpen}
             aria-haspopup="true"
@@ -144,9 +152,9 @@ export const InspectorHeader = memo(function InspectorHeader({
       </div>
 
       {/* Row 2: kind badge + category */}
-      <div className="flex items-center gap-1.5">
+      <div className="stg:flex stg:items-center stg:gap-1.5">
         <span
-          className="inline-block rounded px-1.5 py-0.5 text-[10px] font-medium leading-tight"
+          className="stg:inline-block stg:rounded stg:px-1.5 stg:py-0.5 stg:text-[10px] stg:font-medium stg:leading-tight"
           style={{
             color: identity.categoryColor,
             backgroundColor: `color-mix(in srgb, ${identity.categoryColor} 12%, transparent)`,
@@ -155,9 +163,10 @@ export const InspectorHeader = memo(function InspectorHeader({
           {identity.kindString.replace(/_/g, " ")}
         </span>
         {identity.description && (
-          <span className="truncate text-[10px] text-[var(--stgm-muted-foreground,#737373)]" title={identity.description}>
-            {identity.description}
-          </span>
+          <TruncatedText
+            text={identity.description}
+            className="stg:text-[10px] stg:text-[var(--stgm-muted-foreground,#737373)]"
+          />
         )}
       </div>
     </div>
@@ -192,11 +201,11 @@ function ActionsMenu({
   return (
     <>
       {/* Click-away backdrop */}
-      <div className="fixed inset-0 z-40" onClick={onClose} aria-hidden="true" />
+      <div className="stg:fixed stg:inset-0 stg:z-40" onClick={onClose} aria-hidden="true" />
 
       <div
         role="menu"
-        className="absolute right-0 top-full z-50 mt-1 min-w-[160px] rounded-md border border-[var(--stgm-border,#e5e5e5)] bg-[var(--stgm-popover,var(--stgm-background,#fff))] py-1 shadow-md"
+        className="stg:absolute stg:right-0 stg:top-full stg:z-50 stg:mt-1 stg:min-w-[160px] stg:rounded-md stg:border stg:border-[var(--stgm-border,#e5e5e5)] stg:bg-[var(--stgm-popover,var(--stgm-background,#fff))] stg:py-1 stg:shadow-md"
       >
         <MenuItem label="Rename" onClick={() => handleAction(onRename)} />
         {mutations.onDuplicateNode && (
@@ -239,10 +248,10 @@ function MenuItem({
       role="menuitem"
       onClick={onClick}
       className={cn(
-        "flex w-full items-center px-3 py-1.5 text-left text-xs transition-colors",
+        "stg:flex stg:w-full stg:items-center stg:px-3 stg:py-1.5 stg:text-left stg:text-xs stg:transition-colors",
         destructive
-          ? "text-[var(--stgm-destructive,#ef4444)] hover:bg-[var(--stgm-destructive,#ef4444)]/10"
-          : "text-[var(--stgm-foreground,#1a1a2e)] hover:bg-[var(--stgm-muted,#f5f5f5)]",
+          ? "stg:text-[var(--stgm-destructive,#ef4444)] stg:hover:bg-[var(--stgm-destructive,#ef4444)]/10"
+          : "stg:text-[var(--stgm-foreground,#1a1a2e)] stg:hover:bg-[var(--stgm-muted,#f5f5f5)]",
       )}
     >
       {label}
@@ -251,7 +260,7 @@ function MenuItem({
 }
 
 function MenuDivider() {
-  return <div className="my-1 border-t border-[var(--stgm-border,#e5e5e5)]" />;
+  return <div className="stg:my-1 stg:border-t stg:border-[var(--stgm-border,#e5e5e5)]" />;
 }
 
 function MoreIcon() {

package/src/workflow/inspector/InspectorShell.tsx

@@ -66,10 +66,10 @@ export const InspectorShell = memo(function InspectorShell({
 }: InspectorShellProps) {
   if (!selection || !graph) {
     return (
-      <div className={cn("flex h-full flex-col", className)}>
+      <div className={cn("stg:flex stg:h-full stg:flex-col", className)}>
         {emptyState ?? (
-          <div className="flex flex-1 items-center justify-center p-4">
-            <span className="text-xs text-[var(--stgm-muted-foreground,#737373)]">
+          <div className="stg:flex stg:flex-1 stg:items-center stg:justify-center stg:p-4">
+            <span className="stg:text-xs stg:text-[var(--stgm-muted-foreground,#737373)]">
               Select a task or connection to inspect
             </span>
           </div>
@@ -175,7 +175,7 @@ function NodeInspectorShell({
   const nodeErrors = validationErrors?.get(node.id);
 
   return (
-    <div className={cn("flex h-full flex-col", className)}>
+    <div className={cn("stg:flex stg:h-full stg:flex-col", className)}>
       <InspectorHeader
         identity={identity}
         graph={graph}
@@ -188,9 +188,9 @@ function NodeInspectorShell({
         activeTab={activeTab}
         onTabChange={handleTabChange}
         aria-label="Task configuration"
-        className="min-h-0 flex-1"
+        className="stg:min-h-0 stg:flex-1"
       >
-        <div className="overflow-y-auto">
+        <div className="stg:overflow-y-auto">
           {activeTab === "configure" && (
             <ConfigureTab
               node={node}