@stigmer/react 3.9.0 → 3.11.0

package/src/workflow/inspector/tabs/IterationTab.tsx

@@ -101,10 +101,10 @@ export const IterationTab = memo(function IterationTab({
   );
 
   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">
       {/* Variable name */}
       <div>
-        <label className="mb-1 block text-[10px] font-medium text-[var(--stgm-muted-foreground,#737373)]">
+        <label className="stg:mb-1 stg:block stg:text-[10px] stg:font-medium stg:text-[var(--stgm-muted-foreground,#737373)]">
           Item variable name
         </label>
         <input
@@ -113,17 +113,17 @@ export const IterationTab = memo(function IterationTab({
           onChange={(e) => setEach(e.target.value)}
           onBlur={handleEachBlur}
           onKeyDown={(e) => { if (e.key === "Enter") handleEachBlur(); }}
-          className="w-full rounded border border-[var(--stgm-border,#e5e5e5)] bg-[var(--stgm-input-bg,var(--stgm-background,#fff))] px-2 py-1.5 text-xs font-mono text-[var(--stgm-foreground,#1a1a2e)] outline-none focus:ring-1 focus:ring-[var(--stgm-ring,#3b82f6)]"
+          className="stg:w-full stg:rounded stg:border stg:border-[var(--stgm-border,#e5e5e5)] stg:bg-[var(--stgm-input-bg,var(--stgm-background,#fff))] stg:px-2 stg:py-1.5 stg:text-xs stg:font-mono stg:text-[var(--stgm-foreground,#1a1a2e)] stg:outline-none stg:focus:ring-1 stg:focus:ring-[var(--stgm-ring,#3b82f6)]"
           placeholder="item"
         />
-        <p className="mt-0.5 text-[10px] text-[var(--stgm-muted-foreground,#737373)]">
-          Access as <code className="font-mono">{"${"}$data.{each || "item"}{"}"}</code> in nested tasks
+        <p className="stg:mt-0.5 stg:text-[10px] stg:text-[var(--stgm-muted-foreground,#737373)]">
+          Access as <code className="stg:font-mono">{"${"}$data.{each || "item"}{"}"}</code> in nested tasks
         </p>
       </div>
 
       {/* Collection expression */}
       <div>
-        <label className="mb-1 block text-[10px] font-medium text-[var(--stgm-muted-foreground,#737373)]">
+        <label className="stg:mb-1 stg:block stg:text-[10px] stg:font-medium stg:text-[var(--stgm-muted-foreground,#737373)]">
           Collection expression
         </label>
         <input
@@ -132,14 +132,14 @@ export const IterationTab = memo(function IterationTab({
           onChange={(e) => setInExpr(e.target.value)}
           onBlur={handleInBlur}
           onKeyDown={(e) => { if (e.key === "Enter") handleInBlur(); }}
-          className="w-full rounded border border-[var(--stgm-border,#e5e5e5)] bg-[var(--stgm-input-bg,var(--stgm-background,#fff))] px-2 py-1.5 text-xs font-mono text-[var(--stgm-foreground,#1a1a2e)] outline-none focus:ring-1 focus:ring-[var(--stgm-ring,#3b82f6)]"
+          className="stg:w-full stg:rounded stg:border stg:border-[var(--stgm-border,#e5e5e5)] stg:bg-[var(--stgm-input-bg,var(--stgm-background,#fff))] stg:px-2 stg:py-1.5 stg:text-xs stg:font-mono stg:text-[var(--stgm-foreground,#1a1a2e)] stg:outline-none stg:focus:ring-1 stg:focus:ring-[var(--stgm-ring,#3b82f6)]"
           placeholder="${ $data.items }"
         />
       </div>
 
       {/* Concurrency */}
       <div>
-        <label className="mb-1 block text-[10px] font-medium text-[var(--stgm-muted-foreground,#737373)]">
+        <label className="stg:mb-1 stg:block stg:text-[10px] stg:font-medium stg:text-[var(--stgm-muted-foreground,#737373)]">
           Concurrency (max_parallelism)
         </label>
         <input
@@ -148,9 +148,9 @@ export const IterationTab = memo(function IterationTab({
           value={parallelism}
           onChange={(e) => setParallelism(Math.max(0, parseInt(e.target.value) || 0))}
           onBlur={handleParallelismBlur}
-          className="w-full rounded border border-[var(--stgm-border,#e5e5e5)] bg-[var(--stgm-input-bg,var(--stgm-background,#fff))] px-2 py-1.5 text-xs text-[var(--stgm-foreground,#1a1a2e)] outline-none focus:ring-1 focus:ring-[var(--stgm-ring,#3b82f6)]"
+          className="stg:w-full stg:rounded stg:border stg:border-[var(--stgm-border,#e5e5e5)] stg:bg-[var(--stgm-input-bg,var(--stgm-background,#fff))] stg:px-2 stg:py-1.5 stg:text-xs stg:text-[var(--stgm-foreground,#1a1a2e)] stg:outline-none stg:focus:ring-1 stg:focus:ring-[var(--stgm-ring,#3b82f6)]"
         />
-        <p className="mt-0.5 text-[10px] text-[var(--stgm-muted-foreground,#737373)]">
+        <p className="stg:mt-0.5 stg:text-[10px] stg:text-[var(--stgm-muted-foreground,#737373)]">
           {parallelism === 0 ? "Sequential execution (one at a time)" : `Up to ${parallelism} iterations in parallel`}
         </p>
       </div>
@@ -158,7 +158,7 @@ export const IterationTab = memo(function IterationTab({
       {/* Batch size — only visible when parallel */}
       {parallelism > 0 && (
         <div>
-          <label className="mb-1 block text-[10px] font-medium text-[var(--stgm-muted-foreground,#737373)]">
+          <label className="stg:mb-1 stg:block stg:text-[10px] stg:font-medium stg:text-[var(--stgm-muted-foreground,#737373)]">
             Batch size
           </label>
           <input
@@ -167,9 +167,9 @@ export const IterationTab = memo(function IterationTab({
             value={batchSize}
             onChange={(e) => setBatchSize(Math.max(0, parseInt(e.target.value) || 0))}
             onBlur={handleBatchSizeBlur}
-            className="w-full rounded border border-[var(--stgm-border,#e5e5e5)] bg-[var(--stgm-input-bg,var(--stgm-background,#fff))] px-2 py-1.5 text-xs text-[var(--stgm-foreground,#1a1a2e)] outline-none focus:ring-1 focus:ring-[var(--stgm-ring,#3b82f6)]"
+            className="stg:w-full stg:rounded stg:border stg:border-[var(--stgm-border,#e5e5e5)] stg:bg-[var(--stgm-input-bg,var(--stgm-background,#fff))] stg:px-2 stg:py-1.5 stg:text-xs stg:text-[var(--stgm-foreground,#1a1a2e)] stg:outline-none stg:focus:ring-1 stg:focus:ring-[var(--stgm-ring,#3b82f6)]"
           />
-          <p className="mt-0.5 text-[10px] text-[var(--stgm-muted-foreground,#737373)]">
+          <p className="stg:mt-0.5 stg:text-[10px] stg:text-[var(--stgm-muted-foreground,#737373)]">
             {batchSize === 0 ? "No batching — all items available for parallel execution" : `Process ${batchSize} items per batch`}
           </p>
         </div>
@@ -178,14 +178,14 @@ export const IterationTab = memo(function IterationTab({
       {/* Error policy */}
       {parallelism > 0 && (
         <fieldset>
-          <legend className="text-[10px] font-medium text-[var(--stgm-muted-foreground,#737373)] mb-1.5">
+          <legend className="stg:text-[10px] stg:font-medium stg:text-[var(--stgm-muted-foreground,#737373)] stg:mb-1.5">
             Error policy
           </legend>
-          <div className="flex flex-col gap-1.5">
+          <div className="stg:flex stg:flex-col stg:gap-1.5">
             {ERROR_POLICY_OPTIONS.map((opt) => (
               <label
                 key={opt.value}
-                className="flex items-start gap-2 text-[11px] text-[var(--stgm-foreground,#1a1a2e)] cursor-pointer"
+                className="stg:flex stg:items-start stg:gap-2 stg:text-[11px] stg:text-[var(--stgm-foreground,#1a1a2e)] stg:cursor-pointer"
               >
                 <input
                   type="radio"
@@ -193,12 +193,12 @@ export const IterationTab = memo(function IterationTab({
                   value={opt.value}
                   checked={onError === opt.value}
                   onChange={() => handleErrorPolicyChange(opt.value)}
-                  className="mt-0.5 h-3 w-3 accent-[var(--stgm-primary,#6366f1)]"
+                  className="stg:mt-0.5 stg:h-3 stg:w-3 stg:accent-[var(--stgm-primary,#6366f1)]"
                 />
                 <span>
-                  <span className="font-medium">{opt.label}</span>
+                  <span className="stg:font-medium">{opt.label}</span>
                   <br />
-                  <span className="text-[10px] text-[var(--stgm-muted-foreground,#737373)]">
+                  <span className="stg:text-[10px] stg:text-[var(--stgm-muted-foreground,#737373)]">
                     {opt.description}
                   </span>
                 </span>
@@ -210,24 +210,24 @@ export const IterationTab = memo(function IterationTab({
 
       {/* Nested tasks */}
       <section>
-        <h3 className="text-xs font-semibold text-[var(--stgm-foreground,#1a1a2e)] mb-1.5">
+        <h3 className="stg:text-xs stg:font-semibold stg:text-[var(--stgm-foreground,#1a1a2e)] stg:mb-1.5">
           Loop body ({nestedTasks.length} {nestedTasks.length === 1 ? "task" : "tasks"})
         </h3>
         {nestedTasks.length === 0 ? (
-          <p className="text-[11px] text-[var(--stgm-muted-foreground,#737373)]">
+          <p className="stg:text-[11px] stg:text-[var(--stgm-muted-foreground,#737373)]">
             No tasks in loop body.
           </p>
         ) : (
-          <div className="flex flex-col gap-1">
+          <div className="stg:flex stg:flex-col stg:gap-1">
             {nestedTasks.map((task, idx) => (
               <div
                 key={`${task.name}-${idx}`}
-                className="flex items-center gap-2 rounded border border-[var(--stgm-border,#e5e5e5)] px-2 py-1"
+                className="stg:flex stg:items-center stg:gap-2 stg:rounded stg:border stg:border-[var(--stgm-border,#e5e5e5)] stg:px-2 stg:py-1"
               >
-                <span className="text-[10px] font-mono text-[var(--stgm-muted-foreground,#737373)]">
+                <span className="stg:text-[10px] stg:font-mono stg:text-[var(--stgm-muted-foreground,#737373)]">
                   {task.kind}
                 </span>
-                <span className="text-[11px] text-[var(--stgm-foreground,#1a1a2e)] truncate">
+                <span className="stg:text-[11px] stg:text-[var(--stgm-foreground,#1a1a2e)] stg:truncate">
                   {task.name}
                 </span>
               </div>

package/src/workflow/inspector/tabs/RuntimeTab.tsx

@@ -43,7 +43,7 @@ export const RuntimeTab = memo(function RuntimeTab({
   );
 
   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">
       {kindString === "agent_call" && (
         <AgentCallRuntimeSection config={config} onChange={handleChange} />
       )}
@@ -65,7 +65,7 @@ export const RuntimeTab = memo(function RuntimeTab({
       )}
 
       {!isAi && !isInvocation && kindString !== "fork" && kindString !== "for_each" && (
-        <p className="text-xs text-[var(--stgm-muted-foreground,#737373)]">
+        <p className="stg:text-xs stg:text-[var(--stgm-muted-foreground,#737373)]">
           No runtime settings available for this task kind.
         </p>
       )}
@@ -108,7 +108,7 @@ function AgentCallRuntimeSection({
   );
 
   return (
-    <section className="flex flex-col gap-3">
+    <section className="stg:flex stg:flex-col stg:gap-3">
       <SectionLabel>Execution</SectionLabel>
 
       <FieldRow label="Model" hint="Override agent default model">
@@ -157,7 +157,7 @@ function AgentRuntimeSection({
   );
 
   return (
-    <section className="flex flex-col gap-3">
+    <section className="stg:flex stg:flex-col stg:gap-3">
       <SectionLabel>Execution</SectionLabel>
 
       <FieldRow label="Timeout" hint="Seconds before the task is cancelled">
@@ -203,7 +203,7 @@ function TimeoutSection({
   const currentValue = config[fieldName];
 
   return (
-    <section className="flex flex-col gap-3">
+    <section className="stg:flex stg:flex-col stg:gap-3">
       <SectionLabel>Execution</SectionLabel>
       <FieldRow label="Timeout" hint="Seconds before the request is cancelled">
         <input
@@ -233,20 +233,20 @@ function ForkRuntimeSection({
   const compete = config.compete === true;
 
   return (
-    <section className="flex flex-col gap-3">
+    <section className="stg:flex stg:flex-col stg:gap-3">
       <SectionLabel>Join policy</SectionLabel>
-      <label className="flex cursor-pointer items-center gap-2">
+      <label className="stg:flex stg:cursor-pointer stg:items-center stg:gap-2">
         <input
           type="checkbox"
           checked={compete}
           onChange={(e) => onChange("compete", e.target.checked || undefined)}
-          className="h-4 w-4 rounded border-[var(--stgm-border,#d4d4d8)] text-[var(--stgm-primary,#6366f1)]"
+          className="stg:h-4 stg:w-4 stg:rounded stg:border-[var(--stgm-border,#d4d4d8)] stg:text-[var(--stgm-primary,#6366f1)]"
         />
-        <span className="text-xs text-[var(--stgm-foreground,#1a1a2e)]">
+        <span className="stg:text-xs stg:text-[var(--stgm-foreground,#1a1a2e)]">
           Compete mode (first branch wins)
         </span>
       </label>
-      <p className="text-[10px] text-[var(--stgm-muted-foreground,#737373)]">
+      <p className="stg:text-[10px] stg:text-[var(--stgm-muted-foreground,#737373)]">
         {compete
           ? "The join resumes when any branch completes. Other branches are cancelled."
           : "The join waits for all branches to complete before continuing."}
@@ -267,7 +267,7 @@ function ForEachRuntimeSection({
   onChange: (field: string, value: unknown) => void;
 }) {
   return (
-    <section className="flex flex-col gap-3">
+    <section className="stg:flex stg:flex-col stg:gap-3">
       <SectionLabel>Iteration</SectionLabel>
       <FieldRow label="Collection" hint="Expression that produces the items to iterate">
         <input
@@ -287,11 +287,11 @@ function ForEachRuntimeSection({
 // ---------------------------------------------------------------------------
 
 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)]";
 
 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>
   );
@@ -307,12 +307,12 @@ function FieldRow({
   children: React.ReactNode;
 }) {
   return (
-    <div className="flex flex-col gap-1">
-      <label className="text-[11px] font-medium text-[var(--stgm-foreground,#1a1a2e)]">
+    <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)]">
+        <p className="stg:text-[10px] stg:leading-tight stg:text-[var(--stgm-muted-foreground,#737373)]">
           {hint}
         </p>
       )}

package/src/workflow/instance/CreateWorkflowInstanceDialog.tsx

@@ -105,15 +105,15 @@ export function CreateWorkflowInstanceDialog({
       ref={dialogRef}
       onClose={handleClose}
       className={cn(
-        "fixed inset-0 m-auto w-full max-w-lg rounded-xl border border-border bg-popover p-0 shadow-xl",
-        "backdrop:bg-black/50",
+        "stg:fixed stg:inset-0 stg:m-auto stg:w-full stg:max-w-lg stg:rounded-xl stg:border stg:border-border stg:bg-popover stg:p-0 stg:shadow-xl",
+        "stg:backdrop:bg-black/50",
       )}
       aria-labelledby="create-instance-title"
     >
-      <form onSubmit={handleSubmit} className="flex flex-col">
+      <form onSubmit={handleSubmit} className="stg:flex stg:flex-col">
         {/* Header */}
-        <div className="flex items-center justify-between border-b border-border px-6 py-4">
-          <h2 id="create-instance-title" className="text-base font-semibold text-foreground">
+        <div className="stg:flex stg:items-center stg:justify-between stg:border-b stg:border-border stg:px-6 stg:py-4">
+          <h2 id="create-instance-title" className="stg:text-base stg:font-semibold stg:text-foreground">
             Create Workflow Instance
           </h2>
           <button
@@ -121,9 +121,9 @@ export function CreateWorkflowInstanceDialog({
             onClick={handleClose}
             aria-label="Close"
             className={cn(
-              "rounded-md p-1 text-muted-foreground",
-              "hover:text-foreground hover:bg-accent-hover",
-              "focus:outline-none focus:ring-2 focus:ring-ring",
+              "stg:rounded-md stg:p-1 stg:text-muted-foreground",
+              "stg:hover:text-foreground stg:hover:bg-accent-hover",
+              "stg:focus:outline-none stg:focus:ring-2 stg:focus:ring-ring",
             )}
           >
             <CloseIcon />
@@ -131,11 +131,11 @@ export function CreateWorkflowInstanceDialog({
         </div>
 
         {/* Body */}
-        <div className="space-y-5 px-6 py-5">
+        <div className="stg:space-y-5 stg:px-6 stg:py-5">
           {/* Name */}
           <div>
-            <label htmlFor="instance-name" className="block text-sm font-medium text-foreground mb-1.5">
-              Name <span className="text-destructive">*</span>
+            <label htmlFor="instance-name" className="stg:block stg:text-sm stg:font-medium stg:text-foreground stg:mb-1.5">
+              Name <span className="stg:text-destructive">*</span>
             </label>
             <input
               id="instance-name"
@@ -146,21 +146,21 @@ export function CreateWorkflowInstanceDialog({
               placeholder="e.g. prod-deploy, staging, qa-team"
               disabled={isCreating}
               className={cn(
-                "w-full rounded-md border border-border bg-background px-3 py-2 text-sm",
-                "text-foreground placeholder:text-muted-foreground",
-                "focus:outline-none focus:ring-2 focus:ring-ring",
-                "disabled:cursor-not-allowed disabled:opacity-50",
+                "stg:w-full stg:rounded-md stg:border stg:border-border stg:bg-background stg:px-3 stg:py-2 stg:text-sm",
+                "stg:text-foreground stg:placeholder:text-muted-foreground",
+                "stg:focus:outline-none stg:focus:ring-2 stg:focus:ring-ring",
+                "stg:disabled:cursor-not-allowed stg:disabled:opacity-50",
               )}
               autoFocus
             />
-            <p className="mt-1 text-[0.65rem] text-muted-foreground">
+            <p className="stg:mt-1 stg:text-[0.65rem] stg:text-muted-foreground">
               A URL-friendly slug will be generated from this name.
             </p>
           </div>
 
           {/* Description */}
           <div>
-            <label htmlFor="instance-description" className="block text-sm font-medium text-foreground mb-1.5">
+            <label htmlFor="instance-description" className="stg:block stg:text-sm stg:font-medium stg:text-foreground stg:mb-1.5">
               Description
             </label>
             <textarea
@@ -171,20 +171,20 @@ export function CreateWorkflowInstanceDialog({
               disabled={isCreating}
               rows={2}
               className={cn(
-                "w-full rounded-md border border-border bg-background px-3 py-2 text-sm resize-none",
-                "text-foreground placeholder:text-muted-foreground",
-                "focus:outline-none focus:ring-2 focus:ring-ring",
-                "disabled:cursor-not-allowed disabled:opacity-50",
+                "stg:w-full stg:rounded-md stg:border stg:border-border stg:bg-background stg:px-3 stg:py-2 stg:text-sm stg:resize-none",
+                "stg:text-foreground stg:placeholder:text-muted-foreground",
+                "stg:focus:outline-none stg:focus:ring-2 stg:focus:ring-ring",
+                "stg:disabled:cursor-not-allowed stg:disabled:opacity-50",
               )}
             />
           </div>
 
           {/* Environments */}
           <div>
-            <label className="block text-sm font-medium text-foreground mb-1.5">
+            <label className="stg:block stg:text-sm stg:font-medium stg:text-foreground stg:mb-1.5">
               Environments
             </label>
-            <p className="text-[0.65rem] text-muted-foreground mb-2">
+            <p className="stg:text-[0.65rem] stg:text-muted-foreground stg:mb-2">
               Bind credentials and configuration to this instance.
             </p>
             <EnvironmentPicker
@@ -197,7 +197,7 @@ export function CreateWorkflowInstanceDialog({
 
           {/* Visibility */}
           <div>
-            <label className="block text-sm font-medium text-foreground mb-1.5">
+            <label className="stg:block stg:text-sm stg:font-medium stg:text-foreground stg:mb-1.5">
               Visibility
             </label>
             <InstanceVisibilitySelector
@@ -210,23 +210,23 @@ export function CreateWorkflowInstanceDialog({
 
           {/* Error */}
           {error && (
-            <div className="rounded-md bg-destructive/10 px-3 py-2 text-sm text-destructive" role="alert">
+            <div className="stg:rounded-md stg:bg-destructive/10 stg:px-3 stg:py-2 stg:text-sm stg:text-destructive" role="alert">
               {getUserMessage(error)}
             </div>
           )}
         </div>
 
         {/* Footer */}
-        <div className="flex items-center justify-end gap-2 border-t border-border px-6 py-4">
+        <div className="stg:flex stg:items-center stg:justify-end stg:gap-2 stg:border-t stg:border-border stg:px-6 stg:py-4">
           <button
             type="button"
             onClick={handleClose}
             disabled={isCreating}
             className={cn(
-              "rounded-md px-3 py-1.5 text-sm font-medium",
-              "text-foreground hover:bg-accent-hover",
-              "focus:outline-none focus:ring-2 focus:ring-ring",
-              "disabled:cursor-not-allowed disabled:opacity-50",
+              "stg:rounded-md stg:px-3 stg:py-1.5 stg:text-sm stg:font-medium",
+              "stg:text-foreground stg:hover:bg-accent-hover",
+              "stg:focus:outline-none stg:focus:ring-2 stg:focus:ring-ring",
+              "stg:disabled:cursor-not-allowed stg:disabled:opacity-50",
             )}
           >
             Cancel
@@ -235,11 +235,11 @@ export function CreateWorkflowInstanceDialog({
             type="submit"
             disabled={isCreating || !name.trim()}
             className={cn(
-              "rounded-md px-3 py-1.5 text-sm font-medium",
-              "bg-primary text-primary-foreground",
-              "hover:bg-primary/90",
-              "focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
-              "disabled:cursor-not-allowed disabled:opacity-50",
+              "stg:rounded-md stg:px-3 stg:py-1.5 stg:text-sm stg:font-medium",
+              "stg:bg-primary stg:text-primary-foreground",
+              "stg:hover:bg-primary/90",
+              "stg:focus:outline-none stg:focus:ring-2 stg:focus:ring-ring stg:focus:ring-offset-2",
+              "stg:disabled:cursor-not-allowed stg:disabled:opacity-50",
             )}
           >
             {isCreating ? "Creating..." : "Create Instance"}

package/src/workflow/instance/RunVisibilityControl.tsx

@@ -75,11 +75,11 @@ export function RunVisibilityControl({
   );
 
   return (
-    <div className="space-y-2">
+    <div className="stg:space-y-2">
       <div
         role="radiogroup"
         aria-label="Run visibility"
-        className="flex flex-col gap-1.5"
+        className="stg:flex stg:flex-col stg:gap-1.5"
       >
         {RUN_VISIBILITY_OPTIONS.map((option) => {
           const selected = option.value === current;
@@ -92,22 +92,22 @@ export function RunVisibilityControl({
               disabled={isUpdating}
               onClick={() => handleSelect(option.value)}
               className={cn(
-                "flex flex-col items-start gap-0.5 rounded-md border px-3 py-2 text-left",
-                "focus:outline-none focus:ring-2 focus:ring-ring",
-                "disabled:opacity-60",
+                "stg:flex stg:flex-col stg:items-start stg:gap-0.5 stg:rounded-md stg:border stg:px-3 stg:py-2 stg:text-left",
+                "stg:focus:outline-none stg:focus:ring-2 stg:focus:ring-ring",
+                "stg:disabled:opacity-60",
                 selected
-                  ? "border-primary bg-primary/5"
-                  : "border-border hover:bg-accent-hover",
+                  ? "stg:border-primary stg:bg-primary/5"
+                  : "stg:border-border stg:hover:bg-accent-hover",
               )}
             >
-              <span className="text-xs font-medium text-foreground">{option.label}</span>
-              <span className="text-[0.65rem] text-muted-foreground">{option.description}</span>
+              <span className="stg:text-xs stg:font-medium stg:text-foreground">{option.label}</span>
+              <span className="stg:text-[0.65rem] stg:text-muted-foreground">{option.description}</span>
             </button>
           );
         })}
       </div>
       {error && (
-        <p className="text-xs text-destructive" role="alert">
+        <p className="stg:text-xs stg:text-destructive" role="alert">
           {getUserMessage(error)}
         </p>
       )}