@stigmer/react 3.10.0 → 3.11.1-dev.20260812192248

package/src/workflow/inspector/NestedTaskList.tsx

@@ -2,6 +2,7 @@
 
 import { memo, useCallback } from "react";
 import { cn } from "@stigmer/theme";
+import { Tooltip, TooltipContent, TooltipTrigger } from "../../internal/tooltip.js";
 
 /** A nested task entry for display in the inspector. */
 export interface NestedTaskEntry {
@@ -60,34 +61,34 @@ export const NestedTaskList = memo(function NestedTaskList({
 
   if (tasks.length === 0) {
     return (
-      <p className="text-[11px] text-[var(--stgm-muted-foreground,#737373)] italic">
+      <p className="stg:text-[11px] stg:text-[var(--stgm-muted-foreground,#737373)] stg:italic">
         {emptyLabel}
       </p>
     );
   }
 
   return (
-    <div className="flex flex-col gap-1" role="list" aria-label="Nested tasks">
+    <div className="stg:flex stg:flex-col stg:gap-1" role="list" aria-label="Nested tasks">
       {tasks.map((task, idx) => (
         <div
           key={`${task.name}-${idx}`}
           role="listitem"
           className={cn(
-            "group/task flex items-center gap-2 rounded px-2 py-1 transition-colors",
-            dashed ? "border border-dashed border-[var(--stgm-border,#e5e5e5)]" : "border border-[var(--stgm-border,#e5e5e5)]",
-            onSelect && "cursor-pointer hover:bg-[var(--stgm-accent,#f5f5f5)]",
+            "stg:group/task stg:flex stg:items-center stg:gap-2 stg:rounded stg:px-2 stg:py-1 stg:transition-colors",
+            dashed ? "stg:border stg:border-dashed stg:border-[var(--stgm-border,#e5e5e5)]" : "stg:border stg:border-[var(--stgm-border,#e5e5e5)]",
+            onSelect && "stg:cursor-pointer stg:hover:bg-[var(--stgm-accent,#f5f5f5)]",
           )}
           onClick={onSelect ? () => onSelect(idx) : undefined}
           aria-label={`${task.kind} task: ${task.name}`}
         >
           {/* Reorder controls */}
           {editable && onReorder && (
-            <div className="flex flex-col gap-0.5 opacity-0 group-hover/task:opacity-100 transition-opacity">
+            <div className="stg:flex stg:flex-col stg:gap-0.5 stg:opacity-0 stg:group-hover/task:opacity-100 stg:transition-opacity">
               <button
                 type="button"
                 onClick={(e) => { e.stopPropagation(); handleMoveUp(idx); }}
                 disabled={idx === 0}
-                className="text-[var(--stgm-muted-foreground,#737373)] disabled:opacity-30 hover:text-[var(--stgm-foreground,#1a1a2e)]"
+                className="stg:text-[var(--stgm-muted-foreground,#737373)] stg:disabled:opacity-30 stg:hover:text-[var(--stgm-foreground,#1a1a2e)]"
                 aria-label={`Move ${task.name} up`}
               >
                 <svg width="8" height="8" viewBox="0 0 8 8" fill="currentColor" aria-hidden="true">
@@ -98,7 +99,7 @@ export const NestedTaskList = memo(function NestedTaskList({
                 type="button"
                 onClick={(e) => { e.stopPropagation(); handleMoveDown(idx); }}
                 disabled={idx === tasks.length - 1}
-                className="text-[var(--stgm-muted-foreground,#737373)] disabled:opacity-30 hover:text-[var(--stgm-foreground,#1a1a2e)]"
+                className="stg:text-[var(--stgm-muted-foreground,#737373)] stg:disabled:opacity-30 stg:hover:text-[var(--stgm-foreground,#1a1a2e)]"
                 aria-label={`Move ${task.name} down`}
               >
                 <svg width="8" height="8" viewBox="0 0 8 8" fill="currentColor" aria-hidden="true">
@@ -109,26 +110,32 @@ export const NestedTaskList = memo(function NestedTaskList({
           )}
 
           {/* Task info */}
-          <span className="shrink-0 rounded bg-[var(--stgm-muted,#f5f5f5)] px-1 py-px text-[9px] font-mono text-[var(--stgm-muted-foreground,#737373)]">
+          <span className="stg:shrink-0 stg:rounded stg:bg-[var(--stgm-muted,#f5f5f5)] stg:px-1 stg:py-px stg:text-[9px] stg:font-mono stg:text-[var(--stgm-muted-foreground,#737373)]">
             {task.kind}
           </span>
-          <span className="min-w-0 flex-1 truncate text-[11px] text-[var(--stgm-foreground,#1a1a2e)]">
+          <span className="stg:min-w-0 stg:flex-1 stg:truncate stg:text-[11px] stg:text-[var(--stgm-foreground,#1a1a2e)]">
             {task.name}
           </span>
 
           {/* Remove button */}
           {editable && onRemove && (
-            <button
-              type="button"
-              onClick={(e) => { e.stopPropagation(); onRemove(idx); }}
-              className="shrink-0 opacity-0 group-hover/task:opacity-100 transition-opacity text-[var(--stgm-muted-foreground,#737373)] hover:text-[var(--stgm-destructive,#ef4444)]"
-              aria-label={`Remove task ${task.name}`}
-              title="Remove"
-            >
-              <svg width="10" height="10" viewBox="0 0 10 10" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" aria-hidden="true">
-                <path d="M2.5 2.5l5 5M7.5 2.5l-5 5" />
-              </svg>
-            </button>
+            <Tooltip>
+              <TooltipTrigger
+                render={
+                  <button
+                    type="button"
+                    onClick={(e) => { e.stopPropagation(); onRemove(idx); }}
+                    className="stg:shrink-0 stg:opacity-0 stg:group-hover/task:opacity-100 stg:transition-opacity stg:text-[var(--stgm-muted-foreground,#737373)] stg:hover:text-[var(--stgm-destructive,#ef4444)]"
+                    aria-label={`Remove task ${task.name}`}
+                  />
+                }
+              >
+                <svg width="10" height="10" viewBox="0 0 10 10" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" aria-hidden="true">
+                  <path d="M2.5 2.5l5 5M7.5 2.5l-5 5" />
+                </svg>
+              </TooltipTrigger>
+              <TooltipContent side="top">Remove</TooltipContent>
+            </Tooltip>
           )}
         </div>
       ))}

package/src/workflow/inspector/SentinelInspector.tsx

@@ -21,11 +21,11 @@ export function SentinelInspector({ node, className }: SentinelInspectorProps) {
   const isStart = node.id === START_NODE_ID;
 
   return (
-    <div className={cn("flex h-full flex-col gap-2 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-2 stg:p-3", className)}>
+      <h3 className="stg:text-[11px] stg:font-semibold stg:uppercase stg:tracking-wide stg:text-[var(--stgm-muted-foreground,#737373)]">
         {isStart ? "Start" : "End"}
       </h3>
-      <p className="text-xs text-[var(--stgm-muted-foreground,#737373)]">
+      <p className="stg:text-xs stg:text-[var(--stgm-muted-foreground,#737373)]">
         {isStart
           ? "Entry point of the workflow. The first task is connected automatically."
           : "Terminal point. Tasks routing here end the workflow execution."}

package/src/workflow/inspector/WorkflowSummaryPanel.tsx

@@ -6,6 +6,7 @@ import type { WorkflowGraphModel, WorkflowGraphBudget, WorkflowGraphEnvVar } fro
 import { START_NODE_ID, END_NODE_ID } from "../workflow-graph-model.js";
 import { CATEGORY_DISPLAY_NAMES } from "../canvas-constants.js";
 import type { TopologyNodeCategory } from "../useWorkflowTopology.js";
+import { TruncatedText } from "../../internal/truncated-text.js";
 
 /** Props for {@link WorkflowSummaryPanel}. */
 export interface WorkflowSummaryPanelProps {
@@ -56,14 +57,14 @@ export const WorkflowSummaryPanel = memo(function WorkflowSummaryPanel({
   }, [validationErrors]);
 
   return (
-    <div className={cn("flex h-full flex-col overflow-y-auto", className)}>
+    <div className={cn("stg:flex stg:h-full stg:flex-col stg:overflow-y-auto", className)}>
       {/* Workflow identity */}
-      <section className="flex flex-col gap-1.5 px-3 py-3">
+      <section className="stg:flex stg:flex-col stg:gap-1.5 stg:px-3 stg:py-3">
         <SectionHeader>Workflow</SectionHeader>
-        <h3 className="text-sm font-semibold text-[var(--stgm-foreground,#1a1a2e)]">
+        <h3 className="stg:text-sm stg:font-semibold stg:text-[var(--stgm-foreground,#1a1a2e)]">
           {doc.name}
         </h3>
-        <div className="flex flex-wrap gap-1.5 text-[10px] text-[var(--stgm-muted-foreground,#737373)]">
+        <div className="stg:flex stg:flex-wrap stg:gap-1.5 stg:text-[10px] stg:text-[var(--stgm-muted-foreground,#737373)]">
           <span>{doc.namespace}</span>
           <span>·</span>
           <span>v{doc.version}</span>
@@ -71,7 +72,7 @@ export const WorkflowSummaryPanel = memo(function WorkflowSummaryPanel({
           <span>DSL {doc.dsl}</span>
         </div>
         {doc.description && (
-          <p className="text-xs leading-relaxed text-[var(--stgm-muted-foreground,#737373)]">
+          <p className="stg:text-xs stg:leading-relaxed stg:text-[var(--stgm-muted-foreground,#737373)]">
             {doc.description}
           </p>
         )}
@@ -79,24 +80,24 @@ export const WorkflowSummaryPanel = memo(function WorkflowSummaryPanel({
 
       {/* Validation issues */}
       {totalErrors > 0 && validationErrors && (
-        <section className="border-t border-[var(--stgm-border,#e5e5e5)] px-3 py-3">
+        <section className="stg:border-t stg:border-[var(--stgm-border,#e5e5e5)] stg:px-3 stg:py-3">
           <ValidationSection errors={validationErrors} totalCount={totalErrors} />
         </section>
       )}
 
       {/* Task statistics */}
-      <section className="border-t border-[var(--stgm-border,#e5e5e5)] px-3 py-3">
+      <section className="stg:border-t stg:border-[var(--stgm-border,#e5e5e5)] stg:px-3 stg:py-3">
         <SectionHeader>Tasks</SectionHeader>
-        <div className="mt-1 flex flex-col gap-1">
-          <span className="text-xs text-[var(--stgm-foreground,#1a1a2e)]">
+        <div className="stg:mt-1 stg:flex stg:flex-col stg:gap-1">
+          <span className="stg:text-xs stg:text-[var(--stgm-foreground,#1a1a2e)]">
             {stats.taskCount} task{stats.taskCount !== 1 ? "s" : ""}
           </span>
           {stats.byCategory.size > 0 && (
-            <div className="flex flex-wrap gap-1.5">
+            <div className="stg:flex stg:flex-wrap stg:gap-1.5">
               {Array.from(stats.byCategory.entries()).map(([cat, count]) => (
                 <span
                   key={cat}
-                  className="rounded bg-[var(--stgm-muted,#f5f5f5)] px-1.5 py-0.5 text-[10px] text-[var(--stgm-muted-foreground,#737373)]"
+                  className="stg:rounded stg:bg-[var(--stgm-muted,#f5f5f5)] stg:px-1.5 stg:py-0.5 stg:text-[10px] stg:text-[var(--stgm-muted-foreground,#737373)]"
                 >
                   {CATEGORY_DISPLAY_NAMES[cat as keyof typeof CATEGORY_DISPLAY_NAMES] ?? cat} ({count})
                 </span>
@@ -108,14 +109,14 @@ export const WorkflowSummaryPanel = memo(function WorkflowSummaryPanel({
 
       {/* Environment variables */}
       {envEntries.length > 0 && (
-        <section className="border-t border-[var(--stgm-border,#e5e5e5)] px-3 py-3">
+        <section className="stg:border-t stg:border-[var(--stgm-border,#e5e5e5)] stg:px-3 stg:py-3">
           <EnvVarsSection entries={envEntries} />
         </section>
       )}
 
       {/* Budget */}
       {graph.budget && (
-        <section className="border-t border-[var(--stgm-border,#e5e5e5)] px-3 py-3">
+        <section className="stg:border-t stg:border-[var(--stgm-border,#e5e5e5)] stg:px-3 stg:py-3">
           <BudgetSection budget={graph.budget} />
         </section>
       )}
@@ -138,33 +139,33 @@ function ValidationSection({
   const toggle = useCallback(() => setExpanded((v) => !v), []);
 
   return (
-    <div className="flex flex-col gap-1.5">
+    <div className="stg:flex stg:flex-col stg:gap-1.5">
       <button
         type="button"
         onClick={toggle}
-        className="flex items-center gap-1.5 text-left"
+        className="stg:flex stg:items-center stg:gap-1.5 stg:text-left"
         aria-expanded={expanded}
       >
         <SectionHeader>
           Validation
         </SectionHeader>
-        <span className="rounded-full bg-[var(--stgm-destructive,#ef4444)]/10 px-1.5 py-0.5 text-[10px] font-medium text-[var(--stgm-destructive,#ef4444)]">
+        <span className="stg:rounded-full stg:bg-[var(--stgm-destructive,#ef4444)]/10 stg:px-1.5 stg:py-0.5 stg:text-[10px] stg:font-medium stg:text-[var(--stgm-destructive,#ef4444)]">
           {totalCount} issue{totalCount !== 1 ? "s" : ""}
         </span>
       </button>
 
       {expanded && (
-        <ul className="flex flex-col gap-1" role="list">
+        <ul className="stg:flex stg:flex-col stg:gap-1" role="list">
           {Array.from(errors.entries()).map(([nodeId, nodeErrors]) =>
             nodeErrors.map((error, i) => (
               <li
                 key={`${nodeId}-${i}`}
-                className="flex items-start gap-1.5 text-[11px]"
+                className="stg:flex stg:items-start stg:gap-1.5 stg:text-[11px]"
               >
-                <span className="shrink-0 font-medium text-[var(--stgm-foreground,#1a1a2e)]">
+                <span className="stg:shrink-0 stg:font-medium stg:text-[var(--stgm-foreground,#1a1a2e)]">
                   {nodeId}:
                 </span>
-                <span className="text-[var(--stgm-destructive,#ef4444)]">{error}</span>
+                <span className="stg:text-[var(--stgm-destructive,#ef4444)]">{error}</span>
               </li>
             )),
           )}
@@ -184,26 +185,27 @@ function EnvVarsSection({
   entries: [string, WorkflowGraphEnvVar][];
 }) {
   return (
-    <div className="flex flex-col gap-1.5">
+    <div className="stg:flex stg:flex-col stg:gap-1.5">
       <SectionHeader>Environment variables</SectionHeader>
-      <div className="flex flex-col gap-1">
+      <div className="stg:flex stg:flex-col stg:gap-1">
         {entries.map(([name, env]) => (
-          <div key={name} className="flex items-baseline gap-2 text-[11px]">
-            <span className="shrink-0 font-mono font-medium text-[var(--stgm-foreground,#1a1a2e)]">
+          <div key={name} className="stg:flex stg:items-baseline stg:gap-2 stg:text-[11px]">
+            <span className="stg:shrink-0 stg:font-mono stg:font-medium stg:text-[var(--stgm-foreground,#1a1a2e)]">
               {name}
             </span>
             {env.isSecret && (
-              <span className="rounded bg-[var(--stgm-warning,#f59e0b)]/10 px-1 text-[9px] font-medium text-[var(--stgm-warning,#f59e0b)]">
+              <span className="stg:rounded stg:bg-[var(--stgm-warning,#f59e0b)]/10 stg:px-1 stg:text-[9px] stg:font-medium stg:text-[var(--stgm-warning,#f59e0b)]">
                 secret
               </span>
             )}
             {env.optional && (
-              <span className="text-[var(--stgm-muted-foreground,#737373)]">optional</span>
+              <span className="stg:text-[var(--stgm-muted-foreground,#737373)]">optional</span>
             )}
             {env.description && (
-              <span className="truncate text-[var(--stgm-muted-foreground,#737373)]" title={env.description}>
-                {env.description}
-              </span>
+              <TruncatedText
+                text={env.description}
+                className="stg:text-[var(--stgm-muted-foreground,#737373)]"
+              />
             )}
           </div>
         ))}
@@ -237,13 +239,13 @@ function BudgetSection({ budget }: { budget: WorkflowGraphBudget }) {
   if (items.length === 0) return null;
 
   return (
-    <div className="flex flex-col gap-1.5">
+    <div className="stg:flex stg:flex-col stg:gap-1.5">
       <SectionHeader>Budget</SectionHeader>
-      <div className="flex flex-col gap-1">
+      <div className="stg:flex stg:flex-col stg:gap-1">
         {items.map((item) => (
-          <div key={item.label} className="flex items-baseline gap-2 text-[11px]">
-            <span className="shrink-0 text-[var(--stgm-muted-foreground,#737373)]">{item.label}:</span>
-            <span className="font-medium text-[var(--stgm-foreground,#1a1a2e)]">{item.value}</span>
+          <div key={item.label} className="stg:flex stg:items-baseline stg:gap-2 stg:text-[11px]">
+            <span className="stg:shrink-0 stg:text-[var(--stgm-muted-foreground,#737373)]">{item.label}:</span>
+            <span className="stg:font-medium stg:text-[var(--stgm-foreground,#1a1a2e)]">{item.value}</span>
           </div>
         ))}
       </div>
@@ -257,7 +259,7 @@ function BudgetSection({ budget }: { budget: WorkflowGraphBudget }) {
 
 function SectionHeader({ children }: { children: React.ReactNode }) {
   return (
-    <h4 className="text-[11px] font-semibold uppercase tracking-wide text-[var(--stgm-muted-foreground,#737373)]">
+    <h4 className="stg:text-[11px] stg:font-semibold stg:uppercase stg:tracking-wide stg:text-[var(--stgm-muted-foreground,#737373)]">
       {children}
     </h4>
   );

package/src/workflow/inspector/forms/AgentCallForm.tsx

@@ -11,7 +11,7 @@ export interface AgentCallFormProps {
 }
 
 const inputClass =
-  "w-full rounded-md border border-[var(--stgm-border,#d4d4d8)] bg-[var(--stgm-background,#fff)] px-2 py-1.5 text-xs text-[var(--stgm-foreground,#1a1a2e)] placeholder:text-[var(--stgm-muted-foreground,#a3a3a3)] focus:outline-none focus:ring-1 focus:ring-[var(--stgm-ring,#3b82f6)]";
+  "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.5 stg:text-xs stg:text-[var(--stgm-foreground,#1a1a2e)] stg:placeholder:text-[var(--stgm-muted-foreground,#a3a3a3)] stg:focus:outline-none stg:focus:ring-1 stg:focus:ring-[var(--stgm-ring,#3b82f6)]";
 
 /**
  * Specialized configuration form for `agent_call` tasks.
@@ -99,9 +99,9 @@ export const AgentCallForm = memo(function AgentCallForm({
   }, [config.env]);
 
   return (
-    <div className="flex flex-col gap-4 px-3 py-3">
+    <div className="stg:flex stg:flex-col stg:gap-4 stg:px-3 stg:py-3">
       {/* Agent identity */}
-      <section className="flex flex-col gap-2">
+      <section className="stg:flex stg:flex-col stg:gap-2">
         <SectionLabel>Agent</SectionLabel>
         <FieldRow label="Agent" hint='Slug or "org/slug" format' required>
           <input
@@ -115,24 +115,24 @@ export const AgentCallForm = memo(function AgentCallForm({
         </FieldRow>
 
         <FieldRow label="Harness" hint="Execution engine for this agent call">
-          <div className="flex gap-3">
-            <label className="flex items-center gap-1.5 text-xs">
+          <div className="stg:flex stg:gap-3">
+            <label className="stg:flex stg:items-center stg:gap-1.5 stg:text-xs">
               <input
                 type="radio"
                 name={`${node.id}-harness`}
                 checked={!config.harness || config.harness === "HARNESS_NATIVE" || config.harness === "native"}
                 onChange={() => handleChange("harness", undefined)}
-                className="h-3.5 w-3.5 border-[var(--stgm-border,#d4d4d8)] text-[var(--stgm-primary,#6366f1)]"
+                className="stg:h-3.5 stg:w-3.5 stg:border-[var(--stgm-border,#d4d4d8)] stg:text-[var(--stgm-primary,#6366f1)]"
               />
               Native
             </label>
-            <label className="flex items-center gap-1.5 text-xs">
+            <label className="stg:flex stg:items-center stg:gap-1.5 stg:text-xs">
               <input
                 type="radio"
                 name={`${node.id}-harness`}
                 checked={config.harness === "cursor" || config.harness === "HARNESS_CURSOR"}
                 onChange={() => handleChange("harness", "cursor")}
-                className="h-3.5 w-3.5 border-[var(--stgm-border,#d4d4d8)] text-[var(--stgm-primary,#6366f1)]"
+                className="stg:h-3.5 stg:w-3.5 stg:border-[var(--stgm-border,#d4d4d8)] stg:text-[var(--stgm-primary,#6366f1)]"
               />
               Cursor
             </label>
@@ -141,7 +141,7 @@ export const AgentCallForm = memo(function AgentCallForm({
       </section>
 
       {/* Message */}
-      <section className="flex flex-col gap-2">
+      <section className="stg:flex stg:flex-col stg:gap-2">
         <SectionLabel>Message</SectionLabel>
         <FieldRow label="Prompt" hint="Instructions sent to the agent. Supports ${ } expressions." required>
           <textarea
@@ -149,7 +149,7 @@ export const AgentCallForm = memo(function AgentCallForm({
             onChange={(e) => handleChange("message", e.target.value)}
             placeholder="Analyze this data: ${ $context.fetchData.body }"
             rows={4}
-            className={`${inputClass} resize-y font-mono border-[var(--stgm-chart-purple,#8b5cf6)]/40`}
+            className={`${inputClass} stg:resize-y stg:font-mono stg:border-[var(--stgm-chart-purple,#8b5cf6)]/40`}
             data-testid="agent-call-message-input"
           />
         </FieldRow>
@@ -157,16 +157,16 @@ export const AgentCallForm = memo(function AgentCallForm({
 
       {/* Environment */}
       {envEntries.length > 0 && (
-        <section className="flex flex-col gap-2">
+        <section className="stg:flex stg:flex-col stg:gap-2">
           <SectionLabel>Environment</SectionLabel>
-          <div className="flex flex-col gap-1.5">
+          <div className="stg:flex stg:flex-col stg:gap-1.5">
             {envEntries.map(([key, val]) => (
-              <div key={key} className="flex items-start gap-1">
+              <div key={key} className="stg:flex stg:items-start stg:gap-1">
                 <input
                   type="text"
                   value={key}
                   readOnly
-                  className={`${inputClass} w-1/3 bg-[var(--stgm-muted,#f5f5f5)]`}
+                  className={`${inputClass} stg:w-1/3 stg:bg-[var(--stgm-muted,#f5f5f5)]`}
                 />
                 <input
                   type="text"
@@ -177,7 +177,7 @@ export const AgentCallForm = memo(function AgentCallForm({
                     handleChange("env", env);
                   }}
                   placeholder="value"
-                  className={`${inputClass} flex-1`}
+                  className={`${inputClass} stg:flex-1`}
                 />
               </div>
             ))}
@@ -186,7 +186,7 @@ export const AgentCallForm = memo(function AgentCallForm({
       )}
 
       {/* Run config */}
-      <section className="flex flex-col gap-2">
+      <section className="stg:flex stg:flex-col stg:gap-2">
         <SectionLabel>Execution</SectionLabel>
         <FieldRow label="Model" hint="Override the agent's default model">
           <input
@@ -225,24 +225,24 @@ export const AgentCallForm = memo(function AgentCallForm({
       />
 
       {/* Structured output */}
-      <section className="flex flex-col gap-2">
-        <div className="flex items-center gap-2">
+      <section className="stg:flex stg:flex-col stg:gap-2">
+        <div className="stg:flex stg:items-center stg:gap-2">
           <SectionLabel>Structured output</SectionLabel>
-          <label className="flex cursor-pointer items-center gap-1.5">
+          <label className="stg:flex stg:cursor-pointer stg:items-center stg:gap-1.5">
             <input
               type="checkbox"
               checked={showOutput}
               onChange={toggleOutput}
-              className="h-3.5 w-3.5 rounded border-[var(--stgm-border,#d4d4d8)] text-[var(--stgm-primary,#6366f1)]"
+              className="stg:h-3.5 stg:w-3.5 stg:rounded stg:border-[var(--stgm-border,#d4d4d8)] stg:text-[var(--stgm-primary,#6366f1)]"
             />
-            <span className="text-[10px] text-[var(--stgm-muted-foreground,#737373)]">
+            <span className="stg:text-[10px] stg:text-[var(--stgm-muted-foreground,#737373)]">
               {showOutput ? "Enabled" : "Disabled"}
             </span>
           </label>
         </div>
 
         {showOutput && (
-          <div className="flex flex-col gap-2">
+          <div className="stg:flex stg:flex-col stg:gap-2">
             <FieldRow label="Schema" hint="JSON Schema for the agent's structured response">
               <OutputSchemaEditor
                 value={outputContract.schema}
@@ -339,35 +339,35 @@ function WorkspaceEntriesSection({
   );
 
   return (
-    <section className="flex flex-col gap-2">
-      <div className="flex items-center justify-between">
+    <section className="stg:flex stg:flex-col stg:gap-2">
+      <div className="stg:flex stg:items-center stg:justify-between">
         <SectionLabel>Workspace</SectionLabel>
         <button
           type="button"
           onClick={() => commit([...rows, { source: { git_repo: { url: "" } } }])}
-          className="text-[10px] font-medium text-[var(--stgm-primary,#6366f1)]"
+          className="stg:text-[10px] stg:font-medium stg:text-[var(--stgm-primary,#6366f1)]"
           data-testid="agent-call-workspace-add"
         >
           + Add repository
         </button>
       </div>
       {rows.length === 0 ? (
-        <p className="text-[10px] leading-tight text-[var(--stgm-muted-foreground,#737373)]">
+        <p className="stg:text-[10px] stg:leading-tight stg:text-[var(--stgm-muted-foreground,#737373)]">
           Git repositories the agent works on. Private repos need an org-shared
           environment holding GITHUB_TOKEN bound under Environments.
         </p>
       ) : (
-        <div className="flex flex-col gap-1.5">
+        <div className="stg:flex stg:flex-col stg:gap-1.5">
           {rows.map((row, i) => {
             const gitRepo = row.source?.git_repo ?? {};
             return (
-              <div key={i} className="flex items-start gap-1">
+              <div key={i} className="stg:flex stg:items-start stg:gap-1">
                 <input
                   type="text"
                   value={gitRepo.url ?? ""}
                   onChange={(e) => updateRow(i, e.target.value, gitRepo.branch ?? "")}
                   placeholder="https://github.com/org/repo"
-                  className={`${inputClass} flex-1`}
+                  className={`${inputClass} stg:flex-1`}
                   data-testid={`agent-call-workspace-url-${i}`}
                 />
                 <input
@@ -375,14 +375,14 @@ function WorkspaceEntriesSection({
                   value={gitRepo.branch ?? ""}
                   onChange={(e) => updateRow(i, gitRepo.url ?? "", e.target.value)}
                   placeholder="branch"
-                  className={`${inputClass} w-1/4`}
+                  className={`${inputClass} stg:w-1/4`}
                   data-testid={`agent-call-workspace-branch-${i}`}
                 />
                 <button
                   type="button"
                   onClick={() => commit(rows.filter((_, j) => j !== i))}
                   aria-label={`Remove workspace entry ${i + 1}`}
-                  className="mt-1 text-[var(--stgm-muted-foreground,#737373)] hover:text-[var(--stgm-destructive,#ef4444)]"
+                  className="stg:mt-1 stg:text-[var(--stgm-muted-foreground,#737373)] stg:hover:text-[var(--stgm-destructive,#ef4444)]"
                 >
                   ×
                 </button>
@@ -448,33 +448,33 @@ function EnvironmentRefsSection({
   );
 
   return (
-    <section className="flex flex-col gap-2">
-      <div className="flex items-center justify-between">
+    <section className="stg:flex stg:flex-col stg:gap-2">
+      <div className="stg:flex stg:items-center stg:justify-between">
         <SectionLabel>Environments</SectionLabel>
         <button
           type="button"
           onClick={() => commit([...rows, { slug: "" }])}
-          className="text-[10px] font-medium text-[var(--stgm-primary,#6366f1)]"
+          className="stg:text-[10px] stg:font-medium stg:text-[var(--stgm-primary,#6366f1)]"
           data-testid="agent-call-envref-add"
         >
           + Bind environment
         </button>
       </div>
       {rows.length === 0 ? (
-        <p className="text-[10px] leading-tight text-[var(--stgm-muted-foreground,#737373)]">
+        <p className="stg:text-[10px] stg:leading-tight stg:text-[var(--stgm-muted-foreground,#737373)]">
           Environment resources whose values are provided to this call&apos;s runs
           — credentials bind here, not on the agent.
         </p>
       ) : (
-        <div className="flex flex-col gap-1.5">
+        <div className="stg:flex stg:flex-col stg:gap-1.5">
           {rows.map((row, i) => (
-            <div key={i} className="flex items-start gap-1">
+            <div key={i} className="stg:flex stg:items-start stg:gap-1">
               <input
                 type="text"
                 value={row.org ?? ""}
                 onChange={(e) => updateRow(i, "org", e.target.value)}
                 placeholder="org (optional)"
-                className={`${inputClass} w-1/3`}
+                className={`${inputClass} stg:w-1/3`}
                 data-testid={`agent-call-envref-org-${i}`}
               />
               <input
@@ -482,14 +482,14 @@ function EnvironmentRefsSection({
                 value={row.slug ?? ""}
                 onChange={(e) => updateRow(i, "slug", e.target.value)}
                 placeholder="environment slug"
-                className={`${inputClass} flex-1`}
+                className={`${inputClass} stg:flex-1`}
                 data-testid={`agent-call-envref-slug-${i}`}
               />
               <button
                 type="button"
                 onClick={() => commit(rows.filter((_, j) => j !== i))}
                 aria-label={`Remove environment reference ${i + 1}`}
-                className="mt-1 text-[var(--stgm-muted-foreground,#737373)] hover:text-[var(--stgm-destructive,#ef4444)]"
+                className="stg:mt-1 stg:text-[var(--stgm-muted-foreground,#737373)] stg:hover:text-[var(--stgm-destructive,#ef4444)]"
               >
                 ×
               </button>
@@ -537,16 +537,16 @@ function OutputSchemaEditor({
   );
 
   return (
-    <div className="flex flex-col gap-0.5">
+    <div className="stg:flex stg:flex-col stg:gap-0.5">
       <textarea
         value={localValue}
         onChange={handleChange}
         rows={5}
-        className={`${inputClass} resize-y font-mono text-[11px]`}
+        className={`${inputClass} stg:resize-y stg:font-mono stg:text-[11px]`}
         placeholder='{ "type": "object", "properties": { ... } }'
       />
       {parseError && (
-        <span className="text-[10px] text-[var(--stgm-destructive,#ef4444)]">{parseError}</span>
+        <span className="stg:text-[10px] stg:text-[var(--stgm-destructive,#ef4444)]">{parseError}</span>
       )}
     </div>
   );
@@ -558,7 +558,7 @@ function OutputSchemaEditor({
 
 function SectionLabel({ children }: { children: React.ReactNode }) {
   return (
-    <h4 className="text-[11px] font-semibold uppercase tracking-wide text-[var(--stgm-muted-foreground,#737373)]">
+    <h4 className="stg:text-[11px] stg:font-semibold stg:uppercase stg:tracking-wide stg:text-[var(--stgm-muted-foreground,#737373)]">
       {children}
     </h4>
   );
@@ -576,13 +576,13 @@ function FieldRow({
   children: React.ReactNode;
 }) {
   return (
-    <div className="flex flex-col gap-1">
-      <label className="flex items-center gap-1 text-[11px] font-medium text-[var(--stgm-foreground,#1a1a2e)]">
+    <div className="stg:flex stg:flex-col stg:gap-1">
+      <label className="stg:flex stg:items-center stg:gap-1 stg:text-[11px] stg:font-medium stg:text-[var(--stgm-foreground,#1a1a2e)]">
         {label}
-        {required && <span className="text-[var(--stgm-destructive,#ef4444)]" aria-label="required">*</span>}
+        {required && <span className="stg:text-[var(--stgm-destructive,#ef4444)]" aria-label="required">*</span>}
       </label>
       {hint && (
-        <p className="text-[10px] leading-tight text-[var(--stgm-muted-foreground,#737373)]">{hint}</p>
+        <p className="stg:text-[10px] stg:leading-tight stg:text-[var(--stgm-muted-foreground,#737373)]">{hint}</p>
       )}
       {children}
     </div>