@stigmer/react 3.9.0 → 3.11.0

package/src/workflow/inspector/WorkflowSummaryPanel.tsx

@@ -56,14 +56,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 +71,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 +79,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 +108,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 +138,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,24 +184,24 @@ 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}>
+              <span className="stg:truncate stg:text-[var(--stgm-muted-foreground,#737373)]" title={env.description}>
                 {env.description}
               </span>
             )}
@@ -237,13 +237,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 +257,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>

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

@@ -14,7 +14,7 @@ const HTTP_METHODS = ["GET", "POST", "PUT", "DELETE", "PATCH"] as const;
 const BODY_METHODS = new Set(["POST", "PUT", "PATCH"]);
 
 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 `http_call` tasks.
@@ -112,15 +112,15 @@ export const HttpCallForm = memo(function HttpCallForm({
   );
 
   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">
       {/* Method + URL */}
-      <section className="flex flex-col gap-2">
+      <section className="stg:flex stg:flex-col stg:gap-2">
         <SectionLabel>Request</SectionLabel>
-        <div className="flex gap-2">
+        <div className="stg:flex stg:gap-2">
           <select
             value={method}
             onChange={(e) => handleChange("method", e.target.value)}
-            className={`${inputClass} w-24 shrink-0`}
+            className={`${inputClass} stg:w-24 stg:shrink-0`}
             data-testid="http-call-method-select"
           >
             {HTTP_METHODS.map((m) => (
@@ -132,37 +132,37 @@ export const HttpCallForm = memo(function HttpCallForm({
             value={typeof endpoint.uri === "string" ? endpoint.uri : ""}
             onChange={(e) => handleEndpointChange("uri", e.target.value)}
             placeholder="https://api.example.com/data"
-            className={`${inputClass} flex-1 font-mono border-[var(--stgm-chart-purple,#8b5cf6)]/40`}
+            className={`${inputClass} stg:flex-1 stg:font-mono stg:border-[var(--stgm-chart-purple,#8b5cf6)]/40`}
             data-testid="http-call-url-input"
           />
         </div>
       </section>
 
       {/* Headers */}
-      <section className="flex flex-col gap-2">
+      <section className="stg:flex stg:flex-col stg:gap-2">
         <SectionLabel>Headers</SectionLabel>
         {headerEntries.length > 0 && (
-          <div className="flex flex-col gap-1.5">
+          <div className="stg:flex stg:flex-col stg:gap-1.5">
             {headerEntries.map(([key, val], idx) => (
-              <div key={idx} className="flex items-start gap-1">
+              <div key={idx} className="stg:flex stg:items-start stg:gap-1">
                 <input
                   type="text"
                   value={key}
                   onChange={(e) => handleHeaderChange(key, e.target.value, val)}
                   placeholder="Header name"
-                  className={`${inputClass} w-2/5`}
+                  className={`${inputClass} stg:w-2/5`}
                 />
                 <input
                   type="text"
                   value={typeof val === "string" ? val : ""}
                   onChange={(e) => handleHeaderChange(key, key, e.target.value)}
                   placeholder="Value"
-                  className={`${inputClass} flex-1`}
+                  className={`${inputClass} stg:flex-1`}
                 />
                 <button
                   type="button"
                   onClick={() => removeHeader(key)}
-                  className="mt-1 text-[10px] text-[var(--stgm-destructive,#ef4444)] hover:underline"
+                  className="stg:mt-1 stg:text-[10px] stg:text-[var(--stgm-destructive,#ef4444)] stg:hover:underline"
                   aria-label={`Remove header ${key}`}
                 >
                   ✕
@@ -174,7 +174,7 @@ export const HttpCallForm = memo(function HttpCallForm({
         <button
           type="button"
           onClick={addHeader}
-          className="self-start text-[11px] font-medium text-[var(--stgm-primary,#6366f1)] hover:underline"
+          className="stg:self-start stg:text-[11px] stg:font-medium stg:text-[var(--stgm-primary,#6366f1)] stg:hover:underline"
         >
           + Add header
         </button>
@@ -182,26 +182,26 @@ export const HttpCallForm = memo(function HttpCallForm({
 
       {/* Body */}
       {showBody && (
-        <section className="flex flex-col gap-2">
+        <section className="stg:flex stg:flex-col stg:gap-2">
           <SectionLabel>Body</SectionLabel>
-          <div className="flex flex-col gap-0.5">
+          <div className="stg:flex stg:flex-col stg:gap-0.5">
             <textarea
               value={bodyValue}
               onChange={handleBodyChange}
               rows={5}
-              className={`${inputClass} resize-y font-mono text-[11px]`}
+              className={`${inputClass} stg:resize-y stg:font-mono stg:text-[11px]`}
               placeholder='{ "key": "value" }'
               data-testid="http-call-body-input"
             />
             {bodyError && (
-              <span className="text-[10px] text-[var(--stgm-destructive,#ef4444)]">{bodyError}</span>
+              <span className="stg:text-[10px] stg:text-[var(--stgm-destructive,#ef4444)]">{bodyError}</span>
             )}
           </div>
         </section>
       )}
 
       {/* Timeout */}
-      <section className="flex flex-col gap-2">
+      <section className="stg:flex stg:flex-col stg:gap-2">
         <SectionLabel>Settings</SectionLabel>
         <FieldRow label="Timeout" hint="Seconds (1–300)">
           <input
@@ -225,7 +225,7 @@ export const HttpCallForm = memo(function HttpCallForm({
 
 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>
   );
@@ -241,10 +241,10 @@ function FieldRow({
   children: React.ReactNode;
 }) {
   return (
-    <div className="flex flex-col gap-1">
-      <label className="text-[11px] font-medium text-[var(--stgm-foreground,#1a1a2e)]">{label}</label>
+    <div className="stg:flex stg:flex-col stg:gap-1">
+      <label className="stg:text-[11px] stg:font-medium stg:text-[var(--stgm-foreground,#1a1a2e)]">{label}</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>