@stigmer/react 3.10.0 → 3.11.0

package/src/workflow/WorkflowRepairCard.tsx

@@ -123,21 +123,21 @@ export function WorkflowRepairCard({
   return (
     <div
       className={cn(
-        "flex h-full flex-col bg-background",
+        "stg:flex stg:h-full stg:flex-col stg:bg-background",
         className,
       )}
       role="complementary"
       aria-label="Workflow diagnosis panel"
     >
       {/* Header */}
-      <div className="flex items-center justify-between border-b border-border px-3 py-2">
-        <div className="flex items-center gap-1.5">
+      <div className="stg:flex stg:items-center stg:justify-between stg:border-b stg:border-border stg:px-3 stg:py-2">
+        <div className="stg:flex stg:items-center stg:gap-1.5">
           <SparklesIcon />
-          <h3 className="text-xs font-semibold text-foreground">
+          <h3 className="stg:text-xs stg:font-semibold stg:text-foreground">
             AI Diagnosis
           </h3>
           {flow.isStreaming && (
-            <span className="inline-flex items-center gap-1 text-[0.65rem] text-muted-foreground">
+            <span className="stg:inline-flex stg:items-center stg:gap-1 stg:text-[0.65rem] stg:text-muted-foreground">
               <SpinnerIcon size={10} />
               Analyzing…
             </span>
@@ -147,7 +147,7 @@ export function WorkflowRepairCard({
           <button
             type="button"
             onClick={onClose}
-            className="rounded p-0.5 text-muted-foreground hover:bg-muted hover:text-foreground"
+            className="stg:rounded stg:p-0.5 stg:text-muted-foreground stg:hover:bg-muted stg:hover:text-foreground"
             aria-label="Close diagnosis panel"
           >
             <CloseIcon />
@@ -156,12 +156,12 @@ export function WorkflowRepairCard({
       </div>
 
       {/* Scrollable content area */}
-      <div ref={scrollRef} className="flex min-h-0 flex-1 flex-col overflow-y-auto">
+      <div ref={scrollRef} className="stg:flex stg:min-h-0 stg:flex-1 stg:flex-col stg:overflow-y-auto">
         {/* Starting indicator */}
         {flow.phase === "starting" && !hasConversation && (
-          <div className="flex flex-col items-center justify-center gap-2 py-8">
+          <div className="stg:flex stg:flex-col stg:items-center stg:justify-center stg:gap-2 stg:py-8">
             <SpinnerIcon />
-            <p className="text-xs text-muted-foreground">
+            <p className="stg:text-xs stg:text-muted-foreground">
               Starting Workflow Architect…
             </p>
           </div>
@@ -172,15 +172,15 @@ export function WorkflowRepairCard({
           <MessageThread
             executions={flow.completedExecutions}
             activeStreamExecution={flow.activeExecution}
-            className="flex-1"
+            className="stg:flex-1"
           />
         )}
 
         {/* Error */}
         {flow.error && flow.phase === "error" && (
-          <div className="mx-3 mt-3 space-y-2">
+          <div className="stg:mx-3 stg:mt-3 stg:space-y-2">
             <div
-              className="rounded-md border border-destructive/30 bg-destructive/5 px-3 py-2 text-xs text-destructive"
+              className="stg:rounded-md stg:border stg:border-destructive/30 stg:bg-destructive/5 stg:px-3 stg:py-2 stg:text-xs stg:text-destructive"
               role="alert"
             >
               {flow.error}
@@ -189,9 +189,9 @@ export function WorkflowRepairCard({
               type="button"
               onClick={handleRetry}
               className={cn(
-                "w-full rounded-md px-3 py-1.5 text-xs font-medium transition-colors",
-                "border border-input bg-background text-foreground",
-                "hover:bg-accent hover:text-accent-foreground",
+                "stg:w-full stg:rounded-md stg:px-3 stg:py-1.5 stg:text-xs stg:font-medium stg:transition-colors",
+                "stg:border stg:border-input stg:bg-background stg:text-foreground",
+                "stg:hover:bg-accent stg:hover:text-accent-foreground",
               )}
             >
               Try Again
@@ -213,15 +213,15 @@ export function WorkflowRepairCard({
 
       {/* Runtime error notice (no fix available) */}
       {flow.phase === "ready" && !flow.extractedYaml && flow.completedExecutions.length > 0 && (
-        <div className="border-t border-border px-3 py-2">
-          <div className="rounded-md border border-border bg-muted/50 px-2.5 py-2 text-[0.7rem] text-muted-foreground">
+        <div className="stg:border-t stg:border-border stg:px-3 stg:py-2">
+          <div className="stg:rounded-md stg:border stg:border-border stg:bg-muted/50 stg:px-2.5 stg:py-2 stg:text-[0.7rem] stg:text-muted-foreground">
             No workflow definition changes are needed. Check the analysis above for remediation steps.
           </div>
         </div>
       )}
 
       {/* Follow-up composer (pinned to bottom) */}
-      <div className="border-t border-border p-3">
+      <div className="stg:border-t stg:border-border stg:p-3">
         <textarea
           value={followUp}
           onChange={(e) => setFollowUp(e.target.value)}
@@ -230,14 +230,14 @@ export function WorkflowRepairCard({
           disabled={!composerEnabled}
           rows={2}
           className={cn(
-            "w-full resize-none rounded-md border border-input bg-background px-2.5 py-1.5 text-sm text-foreground",
-            "placeholder:text-muted-foreground",
-            "focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring",
-            "disabled:pointer-events-none disabled:opacity-50",
+            "stg:w-full stg:resize-none stg:rounded-md stg:border stg:border-input stg:bg-background stg:px-2.5 stg:py-1.5 stg:text-sm stg:text-foreground",
+            "stg:placeholder:text-muted-foreground",
+            "stg:focus-visible:outline-none stg:focus-visible:ring-1 stg:focus-visible:ring-ring",
+            "stg:disabled:pointer-events-none stg:disabled:opacity-50",
           )}
         />
-        <div className="mt-2 flex items-center justify-between">
-          <p className="text-[0.65rem] text-muted-foreground">
+        <div className="stg:mt-2 stg:flex stg:items-center stg:justify-between">
+          <p className="stg:text-[0.65rem] stg:text-muted-foreground">
             {"\u2318"}+Enter to send
           </p>
           <button
@@ -245,10 +245,10 @@ export function WorkflowRepairCard({
             onClick={handleSendFollowUp}
             disabled={!composerEnabled || followUp.trim().length < 5}
             className={cn(
-              "inline-flex items-center gap-1.5 rounded-md px-3 py-1.5 text-xs font-medium transition-colors",
-              "bg-primary text-primary-foreground hover:bg-primary/90",
-              "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
-              "disabled:pointer-events-none disabled:opacity-40",
+              "stg:inline-flex stg:items-center stg:gap-1.5 stg:rounded-md stg:px-3 stg:py-1.5 stg:text-xs stg:font-medium stg:transition-colors",
+              "stg:bg-primary stg:text-primary-foreground stg:hover:bg-primary/90",
+              "stg:focus-visible:outline-none stg:focus-visible:ring-2 stg:focus-visible:ring-ring",
+              "stg:disabled:pointer-events-none stg:disabled:opacity-40",
             )}
           >
             Send
@@ -283,14 +283,14 @@ function ResultStrip({
   const hasChanges = diffLines?.some((l) => l.type !== "equal") ?? false;
 
   return (
-    <div className="border-t border-border px-3 py-3" aria-live="polite">
+    <div className="stg:border-t stg:border-border stg:px-3 stg:py-3" aria-live="polite">
       {/* Explanation */}
       {explanation && (
-        <div className="mb-3">
-          <h4 className="mb-1 text-[0.65rem] font-medium uppercase tracking-wider text-muted-foreground">
+        <div className="stg:mb-3">
+          <h4 className="stg:mb-1 stg:text-[0.65rem] stg:font-medium stg:uppercase stg:tracking-wider stg:text-muted-foreground">
             Suggested Fix
           </h4>
-          <p className="text-xs leading-relaxed text-foreground">
+          <p className="stg:text-xs stg:leading-relaxed stg:text-foreground">
             {explanation}
           </p>
         </div>
@@ -298,8 +298,8 @@ function ResultStrip({
 
       {/* Visual graph diff */}
       {hasChanges && beforeYaml && (
-        <div className="mb-3">
-          <div className="h-[200px] overflow-hidden rounded-md border border-border">
+        <div className="stg:mb-3">
+          <div className="stg:h-[200px] stg:overflow-hidden stg:rounded-md stg:border stg:border-border">
             <WorkflowDiffGraph
               beforeYaml={beforeYaml}
               afterYaml={extractedYaml}
@@ -310,16 +310,16 @@ function ResultStrip({
 
       {/* Collapsible YAML diff toggle */}
       {hasChanges && diffLines && (
-        <div className="mb-3">
+        <div className="stg:mb-3">
           <button
             type="button"
             onClick={() => setShowYamlDiff((v) => !v)}
-            className="text-[0.65rem] font-medium text-muted-foreground hover:text-foreground"
+            className="stg:text-[0.65rem] stg:font-medium stg:text-muted-foreground stg:hover:text-foreground"
           >
             {showYamlDiff ? "▾ Hide YAML diff" : "▸ View YAML diff"}
           </button>
           {showYamlDiff && (
-            <div className="mt-1">
+            <div className="stg:mt-1">
               <DiffPreview lines={diffLines} />
             </div>
           )}
@@ -327,15 +327,15 @@ function ResultStrip({
       )}
 
       {/* Actions */}
-      <div className="flex gap-2">
+      <div className="stg:flex stg:gap-2">
         {onApplyFix && (
           <button
             type="button"
             onClick={onApplyFix}
             className={cn(
-              "flex-1 rounded-md px-3 py-1.5 text-xs font-medium transition-colors",
-              "bg-primary text-primary-foreground hover:bg-primary/90",
-              "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+              "stg:flex-1 stg:rounded-md stg:px-3 stg:py-1.5 stg:text-xs stg:font-medium stg:transition-colors",
+              "stg:bg-primary stg:text-primary-foreground stg:hover:bg-primary/90",
+              "stg:focus-visible:outline-none stg:focus-visible:ring-2 stg:focus-visible:ring-ring",
             )}
           >
             Apply Fix
@@ -345,10 +345,10 @@ function ResultStrip({
           type="button"
           onClick={onDiscard}
           className={cn(
-            "flex-1 rounded-md px-3 py-1.5 text-xs font-medium transition-colors",
-            "border border-input bg-background text-foreground",
-            "hover:bg-accent hover:text-accent-foreground",
-            "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+            "stg:flex-1 stg:rounded-md stg:px-3 stg:py-1.5 stg:text-xs stg:font-medium stg:transition-colors",
+            "stg:border stg:border-input stg:bg-background stg:text-foreground",
+            "stg:hover:bg-accent stg:hover:text-accent-foreground",
+            "stg:focus-visible:outline-none stg:focus-visible:ring-2 stg:focus-visible:ring-ring",
           )}
         >
           Discard
@@ -369,25 +369,25 @@ function DiffPreview({ lines }: { readonly lines: readonly DiffLine[] }) {
 
   if (filteredLines.length > 200) {
     return (
-      <p className="text-[0.7rem] text-muted-foreground">
+      <p className="stg:text-[0.7rem] stg:text-muted-foreground">
         Diff is too large to display. Apply the fix to see the updated YAML.
       </p>
     );
   }
 
   return (
-    <pre className="max-h-60 overflow-auto rounded-md border border-border text-[0.7rem] leading-relaxed">
+    <pre className="stg:max-h-60 stg:overflow-auto stg:rounded-md stg:border stg:border-border stg:text-[0.7rem] stg:leading-relaxed">
       {lines.map((line, i) => (
         <div
           key={i}
           className={cn(
-            "px-2",
-            line.type === "added" && "bg-success/10 text-success",
-            line.type === "removed" && "bg-destructive/10 text-destructive",
-            line.type === "equal" && "text-muted-foreground",
+            "stg:px-2",
+            line.type === "added" && "stg:bg-success/10 stg:text-success",
+            line.type === "removed" && "stg:bg-destructive/10 stg:text-destructive",
+            line.type === "equal" && "stg:text-muted-foreground",
           )}
         >
-          <span className="mr-2 inline-block w-3 select-none text-right opacity-60">
+          <span className="stg:mr-2 stg:inline-block stg:w-3 stg:select-none stg:text-right stg:opacity-60">
             {line.type === "added" ? "+" : line.type === "removed" ? "-" : " "}
           </span>
           {line.content}
@@ -446,7 +446,7 @@ function SpinnerIcon({ size = 14 }: { readonly size?: number }) {
       stroke="currentColor"
       strokeWidth="2"
       strokeLinecap="round"
-      className="animate-spin"
+      className="stg:animate-spin"
       aria-hidden="true"
     >
       <path d="M8 2a6 6 0 1 0 6 6" />

package/src/workflow/WorkflowRunDialog.tsx

@@ -126,27 +126,27 @@ export function WorkflowRunDialog({
       onCancel={handleDialogCancel}
       onClick={handleBackdropClick}
       className={cn(
-        "fixed inset-0 z-50 m-auto w-full max-w-lg rounded-lg border border-border bg-popover p-0 text-popover-foreground shadow-lg",
-        "backdrop:bg-black/50",
-        "open:animate-in open:fade-in-0 open:zoom-in-95",
+        "stg:fixed stg:inset-0 stg:z-50 stg:m-auto stg:w-full stg:max-w-lg stg:rounded-lg stg:border stg:border-border stg:bg-popover stg:p-0 stg:text-popover-foreground stg:shadow-lg",
+        "stg:backdrop:bg-black/50",
+        "stg:open:animate-in stg:open:fade-in-0 stg:open:zoom-in-95",
       )}
     >
-      <div className="flex flex-col">
+      <div className="stg:flex stg:flex-col">
         {/* Header */}
-        <div className="border-b border-border px-6 py-4">
-          <h3 className="text-base font-semibold text-foreground">
+        <div className="stg:border-b stg:border-border stg:px-6 stg:py-4">
+          <h3 className="stg:text-base stg:font-semibold stg:text-foreground">
             Run {workflowName}
           </h3>
-          <p className="mt-0.5 text-xs text-muted-foreground">
+          <p className="stg:mt-0.5 stg:text-xs stg:text-muted-foreground">
             Configure inputs and start a new execution
           </p>
         </div>
 
         {/* Body */}
-        <div className="max-h-[60vh] overflow-y-auto px-6 py-4">
+        <div className="stg:max-h-[60vh] stg:overflow-y-auto stg:px-6 stg:py-4">
           {flow.error && (
             <div
-              className="mb-4 rounded-md border border-destructive bg-destructive-muted px-3 py-2 text-sm text-destructive"
+              className="stg:mb-4 stg:rounded-md stg:border stg:border-destructive stg:bg-destructive-muted stg:px-3 stg:py-2 stg:text-sm stg:text-destructive"
               role="alert"
             >
               {flow.error}
@@ -172,17 +172,17 @@ export function WorkflowRunDialog({
         </div>
 
         {/* Footer */}
-        <div className="flex justify-end gap-2 border-t border-border px-6 py-3">
+        <div className="stg:flex stg:justify-end stg:gap-2 stg:border-t stg:border-border stg:px-6 stg:py-3">
           <button
             type="button"
             onClick={() => onOpenChange(false)}
             disabled={flow.isSubmitting}
             className={cn(
-              "rounded-md px-3 py-1.5 text-sm font-medium transition-colors",
-              "border border-input bg-background text-foreground",
-              "hover:bg-accent hover:text-accent-foreground",
-              "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
-              "disabled:pointer-events-none disabled:opacity-50",
+              "stg:rounded-md stg:px-3 stg:py-1.5 stg:text-sm stg:font-medium stg:transition-colors",
+              "stg:border stg:border-input stg:bg-background stg:text-foreground",
+              "stg:hover:bg-accent stg:hover:text-accent-foreground",
+              "stg:focus-visible:outline-none stg:focus-visible:ring-2 stg:focus-visible:ring-ring",
+              "stg:disabled:pointer-events-none stg:disabled:opacity-50",
             )}
           >
             Cancel
@@ -192,10 +192,10 @@ export function WorkflowRunDialog({
             onClick={flow.submit}
             disabled={flow.isSubmitting}
             className={cn(
-              "inline-flex items-center gap-1.5 rounded-md px-3 py-1.5 text-sm font-medium transition-colors",
-              "bg-primary text-primary-foreground hover:bg-primary-hover",
-              "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
-              "disabled:pointer-events-none disabled:opacity-40",
+              "stg:inline-flex stg:items-center stg:gap-1.5 stg:rounded-md stg:px-3 stg:py-1.5 stg:text-sm stg:font-medium stg:transition-colors",
+              "stg:bg-primary stg:text-primary-foreground stg:hover:bg-primary-hover",
+              "stg:focus-visible:outline-none stg:focus-visible:ring-2 stg:focus-visible:ring-ring",
+              "stg:disabled:pointer-events-none stg:disabled:opacity-40",
             )}
           >
             {flow.isSubmitting && <SpinnerIcon />}
@@ -221,7 +221,7 @@ function SpinnerIcon() {
       stroke="currentColor"
       strokeWidth="2"
       strokeLinecap="round"
-      className="animate-spin"
+      className="stg:animate-spin"
       aria-hidden="true"
     >
       <path d="M8 2a6 6 0 1 0 6 6" />

package/src/workflow/WorkflowRunForm.tsx

@@ -58,10 +58,10 @@ export interface WorkflowRunFormProps {
 }
 
 const INPUT_CLASSES = cn(
-  "w-full rounded-md border border-input bg-background px-2.5 py-1.5 text-sm text-foreground",
-  "placeholder:text-muted-foreground",
-  "focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring",
-  "disabled:pointer-events-none disabled:opacity-50",
+  "stg:w-full stg:rounded-md stg:border stg:border-input stg:bg-background stg:px-2.5 stg:py-1.5 stg:text-sm stg:text-foreground",
+  "stg:placeholder:text-muted-foreground",
+  "stg:focus-visible:outline-none stg:focus-visible:ring-1 stg:focus-visible:ring-ring",
+  "stg:disabled:pointer-events-none stg:disabled:opacity-50",
 );
 
 /**
@@ -128,7 +128,7 @@ export function WorkflowRunForm({
     : instances.length > 1;
 
   return (
-    <div className={cn("flex flex-col gap-4", className)}>
+    <div className={cn("stg:flex stg:flex-col stg:gap-4", className)}>
       {/* Instance selector — shown first so env var state reacts to selection */}
       {showInstanceSelector && (
         <FieldGroup>
@@ -158,8 +158,8 @@ export function WorkflowRunForm({
 
       {/* Environment variables */}
       {envEntries.length > 0 && (
-        <div className="flex flex-col gap-3">
-          <h4 className="text-xs font-medium text-muted-foreground">
+        <div className="stg:flex stg:flex-col stg:gap-3">
+          <h4 className="stg:text-xs stg:font-medium stg:text-muted-foreground">
             Environment Variables
           </h4>
           {envEntries.map(([key, decl]) => {
@@ -170,10 +170,10 @@ export function WorkflowRunForm({
             return (
               <FieldGroup key={key}>
                 <FieldLabel htmlFor={fieldId}>
-                  <code className="text-xs">{key}</code>
+                  <code className="stg:text-xs">{key}</code>
                   {isRequired && (
                     <span
-                      className="ml-1 text-destructive"
+                      className="stg:ml-1 stg:text-destructive"
                       aria-label="required"
                     >
                       *
@@ -203,7 +203,7 @@ export function WorkflowRunForm({
                   }
                   className={cn(
                     INPUT_CLASSES,
-                    fieldError && "border-destructive focus-visible:ring-destructive",
+                    fieldError && "stg:border-destructive stg:focus-visible:ring-destructive",
                   )}
                 />
                 {satisfiedByInstance && !fieldError && (
@@ -223,7 +223,7 @@ export function WorkflowRunForm({
                 {fieldError && (
                   <p
                     id={`${fieldId}-error`}
-                    className="text-[0.7rem] text-destructive"
+                    className="stg:text-[0.7rem] stg:text-destructive"
                     role="alert"
                   >
                     {fieldError}
@@ -248,11 +248,11 @@ export function WorkflowRunForm({
             placeholder="Optional message or JSON payload to trigger the workflow"
             disabled={disabled}
             rows={3}
-            className={cn(INPUT_CLASSES, "resize-y")}
+            className={cn(INPUT_CLASSES, "stg:resize-y")}
           />
           <FieldHint>
             Accessible in the workflow as{" "}
-            <code className="text-[0.7rem]">
+            <code className="stg:text-[0.7rem]">
               {"${ $input }"}
             </code>
           </FieldHint>
@@ -263,9 +263,9 @@ export function WorkflowRunForm({
           onClick={() => onShowTriggerMessageChange(true)}
           disabled={disabled}
           className={cn(
-            "self-start text-[0.7rem] text-muted-foreground underline-offset-2 hover:text-foreground hover:underline",
-            "focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:rounded-sm",
-            "disabled:pointer-events-none disabled:opacity-50",
+            "stg:self-start stg:text-[0.7rem] stg:text-muted-foreground stg:underline-offset-2 stg:hover:text-foreground stg:hover:underline",
+            "stg:focus-visible:outline-none stg:focus-visible:ring-1 stg:focus-visible:ring-ring stg:focus-visible:rounded-sm",
+            "stg:disabled:pointer-events-none stg:disabled:opacity-50",
           )}
         >
           + Add trigger input
@@ -284,7 +284,7 @@ function FieldGroup({
 }: {
   readonly children: React.ReactNode;
 }) {
-  return <div className="flex flex-col gap-1">{children}</div>;
+  return <div className="stg:flex stg:flex-col stg:gap-1">{children}</div>;
 }
 
 function FieldLabel({
@@ -295,7 +295,7 @@ function FieldLabel({
   readonly children: React.ReactNode;
 }) {
   return (
-    <label htmlFor={htmlFor} className="text-xs font-medium text-foreground">
+    <label htmlFor={htmlFor} className="stg:text-xs stg:font-medium stg:text-foreground">
       {children}
     </label>
   );
@@ -309,7 +309,7 @@ function FieldHint({
   readonly children: React.ReactNode;
 }) {
   return (
-    <p id={id} className="text-[0.7rem] text-muted-foreground">
+    <p id={id} className="stg:text-[0.7rem] stg:text-muted-foreground">
       {children}
     </p>
   );

package/src/workflow/WorkflowTaskApprovalCard.tsx

@@ -160,12 +160,12 @@ export const WorkflowTaskApprovalCard = memo(function WorkflowTaskApprovalCard({
       // Neutral card + 2px warning left accent — the quiet Cursor-grade chrome
       // shared with ApprovalCard. (Replaces the old amber `bg-warning/5` fill.)
       className={cn(
-        "mt-2 rounded-lg border border-border-prominent border-l-2 border-l-warning p-3",
+        "stg:mt-2 stg:rounded-lg stg:border stg:border-border-prominent stg:border-l-2 stg:border-l-warning stg:p-3",
         className,
       )}
     >
       {prompt && (
-        <div className="mb-3 max-h-80 overflow-y-auto rounded border border-border bg-background p-3">
+        <div className="stg:mb-3 stg:max-h-80 stg:overflow-y-auto stg:rounded stg:border stg:border-border stg:bg-background stg:p-3">
           <div className="stgm-prose">
             <Markdown components={MARKDOWN_COMPONENTS} remarkPlugins={REMARK_PLUGINS}>
               {prompt}
@@ -177,12 +177,12 @@ export const WorkflowTaskApprovalCard = memo(function WorkflowTaskApprovalCard({
       {payload !== null && (
         <div
           aria-label={`Review material for ${taskName}`}
-          className="mb-3 max-h-96 overflow-y-auto rounded border border-border bg-background p-3"
+          className="stg:mb-3 stg:max-h-96 stg:overflow-y-auto stg:rounded stg:border stg:border-border stg:bg-background stg:p-3"
         >
           {isPlainObject(payload) ? (
             <StructuredDataViewer data={payload} />
           ) : (
-            <pre className="overflow-auto whitespace-pre-wrap break-words font-mono text-xs leading-relaxed text-foreground">
+            <pre className="stg:overflow-auto stg:whitespace-pre-wrap stg:break-words stg:font-mono stg:text-xs stg:leading-relaxed stg:text-foreground">
               <code>{formatJson(payload)}</code>
             </pre>
           )}
@@ -190,12 +190,12 @@ export const WorkflowTaskApprovalCard = memo(function WorkflowTaskApprovalCard({
       )}
 
       {formFields.length > 0 && (
-        <div className="mb-3 space-y-2">
+        <div className="stg:mb-3 stg:space-y-2">
           {formFields.map((field) => (
             <div key={field.name}>
               <label
                 htmlFor={`${taskName}-${field.name}`}
-                className="mb-1 block text-xs font-medium text-foreground"
+                className="stg:mb-1 stg:block stg:text-xs stg:font-medium stg:text-foreground"
               >
                 {field.label}
               </label>
@@ -207,11 +207,11 @@ export const WorkflowTaskApprovalCard = memo(function WorkflowTaskApprovalCard({
                 disabled={isSubmitting}
                 rows={2}
                 className={cn(
-                  "w-full rounded border border-border bg-background px-2 py-1.5 text-xs text-foreground",
-                  "placeholder:text-muted-foreground",
-                  "focus:outline-none focus:ring-1 focus:ring-ring",
-                  "disabled:opacity-50",
-                  "resize-y",
+                  "stg:w-full stg:rounded stg:border stg:border-border stg:bg-background stg:px-2 stg:py-1.5 stg:text-xs stg:text-foreground",
+                  "stg:placeholder:text-muted-foreground",
+                  "stg:focus:outline-none stg:focus:ring-1 stg:focus:ring-ring",
+                  "stg:disabled:opacity-50",
+                  "stg:resize-y",
                 )}
               />
             </div>
@@ -219,7 +219,7 @@ export const WorkflowTaskApprovalCard = memo(function WorkflowTaskApprovalCard({
         </div>
       )}
 
-      <div className="mb-2">
+      <div className="stg:mb-2">
         <textarea
           value={comment}
           onChange={(e) => setComment(e.target.value)}
@@ -227,16 +227,16 @@ export const WorkflowTaskApprovalCard = memo(function WorkflowTaskApprovalCard({
           disabled={isSubmitting}
           rows={1}
           className={cn(
-            "w-full rounded border border-border bg-background px-2 py-1.5 text-xs text-foreground",
-            "placeholder:text-muted-foreground",
-            "focus:outline-none focus:ring-1 focus:ring-ring",
-            "disabled:opacity-50",
-            "resize-y",
+            "stg:w-full stg:rounded stg:border stg:border-border stg:bg-background stg:px-2 stg:py-1.5 stg:text-xs stg:text-foreground",
+            "stg:placeholder:text-muted-foreground",
+            "stg:focus:outline-none stg:focus:ring-1 stg:focus:ring-ring",
+            "stg:disabled:opacity-50",
+            "stg:resize-y",
           )}
         />
       </div>
 
-      <div className="flex flex-wrap gap-2">
+      <div className="stg:flex stg:flex-wrap stg:gap-2">
         {outcomes.map((outcome, index) => (
           <DecisionButton
             key={outcome.name}
@@ -255,7 +255,7 @@ export const WorkflowTaskApprovalCard = memo(function WorkflowTaskApprovalCard({
           spinner has already reverted, and this explains the snap-back. Shared
           with the agent ApprovalCard / FileReviewCard via InCardDecisionError. */}
       {error && (
-        <div className="mt-2">
+        <div className="stg:mt-2">
           <InCardDecisionError
             error={error}
             leadIn="submit decision"