@stigmer/react 3.10.0 → 3.11.0

package/src/workflow/TaskConfigForm.tsx

@@ -45,14 +45,14 @@ export const TaskConfigForm = memo(function TaskConfigForm({
 
   if (fields.length === 0) {
     return (
-      <div className={cn("px-3 py-4 text-xs text-[var(--stgm-muted-foreground,#737373)]", className)}>
+      <div className={cn("stg:px-3 stg:py-4 stg:text-xs stg:text-[var(--stgm-muted-foreground,#737373)]", className)}>
         No configurable fields for this task kind.
       </div>
     );
   }
 
   return (
-    <div className={cn("flex flex-col gap-1", className)}>
+    <div className={cn("stg:flex stg:flex-col stg:gap-1", className)}>
       {groupedFields.map((group) => (
         <FieldGroupSection
           key={group.id}
@@ -90,20 +90,20 @@ function FieldGroupSection({
   const toggle = useCallback(() => setCollapsed((c) => !c), []);
 
   return (
-    <div className="border-b border-[var(--stgm-border,#e5e5e5)] last:border-b-0">
+    <div className="stg:border-b stg:border-[var(--stgm-border,#e5e5e5)] stg:last:border-b-0">
       <button
         type="button"
         onClick={toggle}
-        className="flex w-full items-center gap-1.5 px-3 py-2 text-left text-xs font-semibold text-[var(--stgm-foreground,#1a1a2e)] hover:bg-[var(--stgm-muted,#f5f5f5)]"
+        className="stg:flex stg:w-full stg:items-center stg:gap-1.5 stg:px-3 stg:py-2 stg:text-left stg:text-xs stg:font-semibold stg:text-[var(--stgm-foreground,#1a1a2e)] stg:hover:bg-[var(--stgm-muted,#f5f5f5)]"
         aria-expanded={!collapsed}
       >
         <ChevronIcon collapsed={collapsed} />
         {group.displayName}
       </button>
       {!collapsed && (
-        <div className="flex flex-col gap-3 px-3 pb-3">
+        <div className="stg:flex stg:flex-col stg:gap-3 stg:px-3 stg:pb-3">
           {group.description && (
-            <p className="text-[10px] text-[var(--stgm-muted-foreground,#737373)]">
+            <p className="stg:text-[10px] stg:text-[var(--stgm-muted-foreground,#737373)]">
               {group.description}
             </p>
           )}
@@ -138,20 +138,20 @@ function FieldRenderer({
   depth: number;
 }) {
   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)]">
         {field.displayName}
         {field.required && (
-          <span className="text-[var(--stgm-destructive,#ef4444)]" aria-label="required">*</span>
+          <span className="stg:text-[var(--stgm-destructive,#ef4444)]" aria-label="required">*</span>
         )}
         {field.isExpression && (
-          <span className="rounded bg-[var(--stgm-accent,#e5e5e5)] px-1 text-[9px] font-normal text-[var(--stgm-muted-foreground,#737373)]">
+          <span className="stg:rounded stg:bg-[var(--stgm-accent,#e5e5e5)] stg:px-1 stg:text-[9px] stg:font-normal stg:text-[var(--stgm-muted-foreground,#737373)]">
             expr
           </span>
         )}
       </label>
       {field.description && (
-        <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)]">
           {field.description}
         </p>
       )}
@@ -205,7 +205,7 @@ function FieldControl({
 // ---------------------------------------------------------------------------
 
 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 StringField({
   field,
@@ -234,7 +234,7 @@ function StringField({
         onChange={handleChange}
         placeholder={placeholder}
         rows={4}
-        className={cn(inputClass, "resize-y font-mono", field.isExpression && "border-[var(--stgm-chart-purple,#8b5cf6)]/40")}
+        className={cn(inputClass, "stg:resize-y stg:font-mono", field.isExpression && "stg:border-[var(--stgm-chart-purple,#8b5cf6)]/40")}
       />
     );
   }
@@ -245,7 +245,7 @@ function StringField({
       value={strValue}
       onChange={handleChange}
       placeholder={placeholder}
-      className={cn(inputClass, field.isExpression && "border-[var(--stgm-chart-purple,#8b5cf6)]/40")}
+      className={cn(inputClass, field.isExpression && "stg:border-[var(--stgm-chart-purple,#8b5cf6)]/40")}
     />
   );
 }
@@ -303,14 +303,14 @@ function BoolField({
   );
 
   return (
-    <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={checked}
         onChange={handleChange}
-        className="h-4 w-4 rounded border-[var(--stgm-border,#d4d4d8)] text-[var(--stgm-primary,#6366f1)] focus:ring-[var(--stgm-ring,#3b82f6)]"
+        className="stg:h-4 stg:w-4 stg:rounded stg:border-[var(--stgm-border,#d4d4d8)] stg:text-[var(--stgm-primary,#6366f1)] stg:focus:ring-[var(--stgm-ring,#3b82f6)]"
       />
-      <span className="text-xs text-[var(--stgm-muted-foreground,#737373)]">
+      <span className="stg:text-xs stg:text-[var(--stgm-muted-foreground,#737373)]">
         {checked ? "Enabled" : "Disabled"}
       </span>
     </label>
@@ -379,16 +379,16 @@ function JsonField({
   );
 
   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={4}
-        className={cn(inputClass, "resize-y font-mono text-[11px]")}
+        className={cn(inputClass, "stg:resize-y stg:font-mono stg:text-[11px]")}
         placeholder="{}"
       />
       {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>
   );
@@ -426,19 +426,19 @@ function RepeatedField({
   );
 
   return (
-    <div className="flex flex-col gap-1.5">
+    <div className="stg:flex stg:flex-col stg:gap-1.5">
       {items.map((item, 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={typeof item === "string" ? item : JSON.stringify(item ?? "")}
             onChange={(e) => updateItem(idx, e.target.value || undefined)}
-            className={cn(inputClass, "flex-1")}
+            className={cn(inputClass, "stg:flex-1")}
           />
           <button
             type="button"
             onClick={() => removeItem(idx)}
-            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 item ${idx + 1}`}
           >
             ✕
@@ -448,7 +448,7 @@ function RepeatedField({
       <button
         type="button"
         onClick={addItem}
-        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 item
       </button>
@@ -496,27 +496,27 @@ function MapField({
   );
 
   return (
-    <div className="flex flex-col gap-1.5">
+    <div className="stg:flex stg:flex-col stg:gap-1.5">
       {entries.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) => updateEntry(key, e.target.value, val)}
             placeholder="key"
-            className={cn(inputClass, "w-1/3")}
+            className={cn(inputClass, "stg:w-1/3")}
           />
           <input
             type="text"
             value={typeof val === "string" ? val : JSON.stringify(val ?? "")}
             onChange={(e) => updateEntry(key, key, e.target.value || undefined)}
             placeholder="value"
-            className={cn(inputClass, "flex-1")}
+            className={cn(inputClass, "stg:flex-1")}
           />
           <button
             type="button"
             onClick={() => removeEntry(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 entry ${key}`}
           >
             ✕
@@ -526,7 +526,7 @@ function MapField({
       <button
         type="button"
         onClick={addEntry}
-        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 entry
       </button>
@@ -549,7 +549,7 @@ function ChevronIcon({ collapsed }: { collapsed: boolean }) {
       strokeWidth="2"
       strokeLinecap="round"
       strokeLinejoin="round"
-      className={cn("transition-transform", !collapsed && "rotate-90")}
+      className={cn("stg:transition-transform", !collapsed && "stg:rotate-90")}
     >
       <path d="M6 4l4 4-4 4" />
     </svg>

package/src/workflow/TaskPickerPopover.tsx

@@ -159,54 +159,54 @@ export const TaskPickerPopover = memo(function TaskPickerPopover({
         >
           <Popover.Popup
             className={cn(
-              "stgm z-popover w-56 overflow-hidden rounded-lg border border-border bg-popover shadow-md text-popover-foreground",
+              "stgm stg:z-popover stg:w-56 stg:overflow-hidden stg:rounded-lg stg:border stg:border-border stg:bg-popover stg:shadow-md stg:text-popover-foreground",
               className,
             )}
           >
             <div
-              className="flex flex-col"
+              className="stg:flex stg:flex-col"
               role="dialog"
               aria-label="Select task type"
               onKeyDown={handleKeyDown}
             >
               {insertionContext && (
-                <div className="border-b border-border px-3 py-2">
-                  <div className="text-[11px] font-medium text-[var(--stgm-muted-foreground,#737373)]">
+                <div className="stg:border-b stg:border-border stg:px-3 stg:py-2">
+                  <div className="stg:text-[11px] stg:font-medium stg:text-[var(--stgm-muted-foreground,#737373)]">
                     {pickerData.header}
                   </div>
                 </div>
               )}
 
-              <div className="border-b border-border p-2">
+              <div className="stg:border-b stg:border-border stg:p-2">
                 <input
                   ref={searchRef}
                   type="search"
                   placeholder="Search tasks…"
                   value={searchQuery}
                   onChange={handleSearchChange}
-                  className="w-full rounded border border-border bg-[var(--stgm-input-bg,var(--stgm-background,#fff))] px-2 py-1.5 text-xs text-[var(--stgm-foreground,#1a1a2e)] placeholder:text-[var(--stgm-muted-foreground,#737373)] outline-none focus:ring-1 focus:ring-[var(--stgm-ring,#3b82f6)]"
+                  className="stg:w-full stg:rounded stg:border stg:border-border 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:placeholder:text-[var(--stgm-muted-foreground,#737373)] stg:outline-none stg:focus:ring-1 stg:focus:ring-[var(--stgm-ring,#3b82f6)]"
                   aria-label="Search task types"
                 />
               </div>
 
               <div
-                className="max-h-64 overflow-y-auto p-1.5"
+                className="stg:max-h-64 stg:overflow-y-auto stg:p-1.5"
                 role="listbox"
                 aria-label="Task types"
               >
                 {isLoading && (
-                  <div className="space-y-2 p-2">
+                  <div className="stg:space-y-2 stg:p-2">
                     {Array.from({ length: 3 }).map((_, i) => (
                       <div
                         key={i}
-                        className="h-8 animate-pulse rounded bg-[var(--stgm-muted,#f5f5f5)]"
+                        className="stg:h-8 stg:animate-pulse stg:rounded stg:bg-[var(--stgm-muted,#f5f5f5)]"
                       />
                     ))}
                   </div>
                 )}
 
                 {!isLoading && pickerData.sections.length === 0 && (
-                  <div className="py-4 text-center text-xs text-[var(--stgm-muted-foreground,#737373)]">
+                  <div className="stg:py-4 stg:text-center stg:text-xs stg:text-[var(--stgm-muted-foreground,#737373)]">
                     {searchQuery ? "No matching tasks" : "No task types available"}
                   </div>
                 )}
@@ -252,16 +252,16 @@ function PickerCategory({
     : (CATEGORY_DISPLAY_NAMES[category] ?? section.label);
 
   return (
-    <div className="mb-1 last:mb-0">
-      <div className="flex items-center gap-1.5 px-1.5 py-1 text-[10px] font-semibold uppercase tracking-wider text-[var(--stgm-muted-foreground,#737373)]">
+    <div className="stg:mb-1 stg:last:mb-0">
+      <div className="stg:flex stg:items-center stg:gap-1.5 stg:px-1.5 stg:py-1 stg:text-[10px] stg:font-semibold stg:uppercase stg:tracking-wider stg:text-[var(--stgm-muted-foreground,#737373)]">
         {categoryColor ? (
           <span
-            className="inline-block h-1.5 w-1.5 rounded-full"
+            className="stg:inline-block stg:h-1.5 stg:w-1.5 stg:rounded-full"
             style={{ backgroundColor: categoryColor }}
             aria-hidden="true"
           />
         ) : (
-          <span className="inline-block h-1.5 w-1.5 rounded-full bg-[var(--stgm-muted-foreground,#737373)]" aria-hidden="true" />
+          <span className="stg:inline-block stg:h-1.5 stg:w-1.5 stg:rounded-full stg:bg-[var(--stgm-muted-foreground,#737373)]" aria-hidden="true" />
         )}
         {label}
       </div>
@@ -311,25 +311,25 @@ function PickerItem({
       title={item.disabled ? item.disabledReason : undefined}
       onClick={item.disabled ? undefined : () => onSelect(item.descriptor.kind)}
       className={cn(
-        "flex w-full items-start gap-2 rounded px-2 py-1.5 text-left transition-colors",
+        "stg:flex stg:w-full stg:items-start stg:gap-2 stg:rounded stg:px-2 stg:py-1.5 stg:text-left stg:transition-colors",
         item.disabled
-          ? "cursor-not-allowed opacity-55"
-          : "hover:bg-[var(--stgm-muted,#f5f5f5)]",
-        isFocused && !item.disabled && "bg-[var(--stgm-muted,#f5f5f5)]",
+          ? "stg:cursor-not-allowed stg:opacity-55"
+          : "stg:hover:bg-[var(--stgm-muted,#f5f5f5)]",
+        isFocused && !item.disabled && "stg:bg-[var(--stgm-muted,#f5f5f5)]",
       )}
     >
       {categoryColor && (
         <span
-          className="mt-1 inline-block h-2 w-0.5 shrink-0 rounded-full"
+          className="stg:mt-1 stg:inline-block stg:h-2 stg:w-0.5 stg:shrink-0 stg:rounded-full"
           style={{ backgroundColor: categoryColor }}
           aria-hidden="true"
         />
       )}
-      <div className="min-w-0 flex-1">
-        <div className="truncate text-xs font-medium text-[var(--stgm-foreground,#1a1a2e)]">
+      <div className="stg:min-w-0 stg:flex-1">
+        <div className="stg:truncate stg:text-xs stg:font-medium stg:text-[var(--stgm-foreground,#1a1a2e)]">
           {item.descriptor.displayName}
         </div>
-        <div className="truncate text-[10px] leading-tight text-[var(--stgm-muted-foreground,#737373)]">
+        <div className="stg:truncate stg:text-[10px] stg:leading-tight stg:text-[var(--stgm-muted-foreground,#737373)]">
           {item.disabled ? item.disabledReason : item.descriptor.description}
         </div>
       </div>

package/src/workflow/ViewYamlDialog.tsx

@@ -91,34 +91,34 @@ export const ViewYamlDialog = memo(function ViewYamlDialog({
     <dialog
       ref={dialogRef}
       className={cn(
-        "stgm m-auto max-h-[80vh] w-full max-w-lg rounded-lg border border-[var(--stgm-border,#e5e5e5)] bg-[var(--stgm-background,#fff)] p-0 shadow-xl",
-        "backdrop:bg-black/40",
+        "stgm stg:m-auto stg:max-h-[80vh] stg:w-full stg:max-w-lg stg:rounded-lg stg:border stg:border-[var(--stgm-border,#e5e5e5)] stg:bg-[var(--stgm-background,#fff)] stg:p-0 stg:shadow-xl",
+        "stg:backdrop:bg-black/40",
       )}
       onClick={handleBackdropClick}
       aria-label={node ? `YAML for ${node.taskName}` : "View YAML"}
     >
       {node && (
-        <div className="flex flex-col">
+        <div className="stg:flex stg:flex-col">
           {/* Header */}
-          <div className="flex items-center justify-between border-b border-[var(--stgm-border,#e5e5e5)] px-4 py-3">
-            <div className="flex items-center gap-2">
+          <div className="stg:flex stg:items-center stg:justify-between stg:border-b stg:border-[var(--stgm-border,#e5e5e5)] stg:px-4 stg:py-3">
+            <div className="stg:flex stg:items-center stg:gap-2">
               <CodeBracketIcon />
-              <span className="text-sm font-semibold text-[var(--stgm-foreground,#1a1a2e)]">
+              <span className="stg:text-sm stg:font-semibold stg:text-[var(--stgm-foreground,#1a1a2e)]">
                 {node.taskName}
               </span>
             </div>
-            <div className="flex items-center gap-1">
+            <div className="stg:flex stg:items-center stg:gap-1">
               <button
                 type="button"
                 onClick={handleCopy}
-                className="rounded px-2 py-1 text-xs font-medium text-[var(--stgm-foreground,#1a1a2e)] hover:bg-[var(--stgm-muted,#f5f5f5)]"
+                className="stg:rounded stg:px-2 stg:py-1 stg:text-xs stg:font-medium stg:text-[var(--stgm-foreground,#1a1a2e)] stg:hover:bg-[var(--stgm-muted,#f5f5f5)]"
               >
                 {copied ? "Copied!" : "Copy"}
               </button>
               <button
                 type="button"
                 onClick={onClose}
-                className="flex h-6 w-6 items-center justify-center rounded text-[var(--stgm-muted-foreground,#737373)] hover:bg-[var(--stgm-muted,#f5f5f5)] hover:text-[var(--stgm-foreground,#1a1a2e)]"
+                className="stg:flex stg:h-6 stg:w-6 stg:items-center stg:justify-center stg:rounded stg:text-[var(--stgm-muted-foreground,#737373)] stg:hover:bg-[var(--stgm-muted,#f5f5f5)] stg:hover:text-[var(--stgm-foreground,#1a1a2e)]"
                 aria-label="Close"
               >
                 <svg width="12" height="12" viewBox="0 0 12 12" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" aria-hidden="true">
@@ -129,8 +129,8 @@ export const ViewYamlDialog = memo(function ViewYamlDialog({
           </div>
 
           {/* YAML content */}
-          <div className="overflow-auto p-4">
-            <pre className="whitespace-pre text-xs leading-relaxed text-[var(--stgm-foreground,#1a1a2e)]">
+          <div className="stg:overflow-auto stg:p-4">
+            <pre className="stg:whitespace-pre stg:text-xs stg:leading-relaxed stg:text-[var(--stgm-foreground,#1a1a2e)]">
               <code>{yaml}</code>
             </pre>
           </div>
@@ -142,7 +142,7 @@ export const ViewYamlDialog = memo(function ViewYamlDialog({
 
 function CodeBracketIcon() {
   return (
-    <svg width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.3" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true" className="text-[var(--stgm-muted-foreground,#737373)]">
+    <svg width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.3" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true" className="stg:text-[var(--stgm-muted-foreground,#737373)]">
       <path d="M5 4L1.5 8 5 12M11 4l3.5 4-3.5 4M9 2l-2 12" />
     </svg>
   );

package/src/workflow/WorkflowAgentCallTranscript.tsx

@@ -171,20 +171,20 @@ export const WorkflowAgentCallTranscript = memo(
         aria-label={
           agentSlug ? `Transcript of agent ${agentSlug}` : "Agent transcript"
         }
-        className={cn("flex max-h-[60vh] min-w-0 flex-col", className)}
+        className={cn("stg:flex stg:max-h-[60vh] stg:min-w-0 stg:flex-col", className)}
       >
         {/* Only what the card header cannot express: the child stream's
             reconnecting state and the standalone pop-out. */}
         {showBar && (
-          <div className="flex min-w-0 shrink-0 items-center gap-3 pb-1.5">
+          <div className="stg:flex stg:min-w-0 stg:shrink-0 stg:items-center stg:gap-3 stg:pb-1.5">
             {isReconnecting && (
-              <span className="text-xs text-muted-foreground">Reconnecting…</span>
+              <span className="stg:text-xs stg:text-muted-foreground">Reconnecting…</span>
             )}
             {onNavigateToAgentExecution && (
               <button
                 type="button"
                 onClick={() => onNavigateToAgentExecution(childExecutionId)}
-                className="ml-auto inline-flex shrink-0 items-center gap-1.5 text-xs font-medium text-muted-foreground transition-colors hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:rounded-sm"
+                className="stg:ml-auto stg:inline-flex stg:shrink-0 stg:items-center stg:gap-1.5 stg:text-xs stg:font-medium stg:text-muted-foreground stg:transition-colors stg:hover:text-foreground stg:focus-visible:outline-none stg:focus-visible:ring-2 stg:focus-visible:ring-ring stg:focus-visible:rounded-sm"
               >
                 <PopOutIcon />
                 Open standalone
@@ -196,7 +196,7 @@ export const WorkflowAgentCallTranscript = memo(
         {/* The thread owns the scrolling inside the bounded box (its
             auto-scroll machine + jump-to-latest need the scroll container);
             min-h-0 lets the flex slot shrink to the cap. */}
-        <div className="min-h-0 min-w-0 flex-1">
+        <div className="stg:min-h-0 stg:min-w-0 stg:flex-1">
           {execution ? (
             <MessageThread
               executions={EMPTY_EXECUTIONS}
@@ -205,30 +205,30 @@ export const WorkflowAgentCallTranscript = memo(
               submittingApprovalIds={hitl?.approvalSubmittingToolCallIds}
               approvalErrors={hitl?.approvalErrorsByToolCallId}
               showFileReviewRecords={hitl != null}
-              className="h-full"
+              className="stg:h-full"
             />
           ) : isLoading ? (
-            <ThreadSkeleton className="py-2" />
+            <ThreadSkeleton className="stg:py-2" />
           ) : error ? (
             <div
               role="alert"
-              className="flex flex-col items-start gap-2 py-2"
+              className="stg:flex stg:flex-col stg:items-start stg:gap-2 stg:py-2"
             >
-              <p className="text-xs text-destructive">{error.message}</p>
+              <p className="stg:text-xs stg:text-destructive">{error.message}</p>
               <button
                 type="button"
                 onClick={reconnect}
-                className="rounded border border-border px-3 py-1.5 text-xs font-medium text-foreground hover:bg-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+                className="stg:rounded stg:border stg:border-border stg:px-3 stg:py-1.5 stg:text-xs stg:font-medium stg:text-foreground stg:hover:bg-muted stg:focus-visible:outline-none stg:focus-visible:ring-2 stg:focus-visible:ring-ring"
               >
                 Retry
               </button>
             </div>
           ) : (
-            <div role="status" className="flex flex-col gap-1 py-2">
-              <p className="text-xs font-medium text-foreground">
+            <div role="status" className="stg:flex stg:flex-col stg:gap-1 stg:py-2">
+              <p className="stg:text-xs stg:font-medium stg:text-foreground">
                 This agent execution is no longer available.
               </p>
-              <p className="text-xs text-muted-foreground">
+              <p className="stg:text-xs stg:text-muted-foreground">
                 It may have been removed, or the workflow run predates
                 transcript retention.
               </p>
@@ -245,7 +245,7 @@ export const WorkflowAgentCallTranscript = memo(
             onSubmit={handleFileDecision}
             submittingDecisionKeys={hitl.fileDecisionSubmittingKeys}
             decisionErrors={hitl.fileDecisionErrorsByKey}
-            className="shrink-0"
+            className="stg:shrink-0"
           />
         )}
       </div>
@@ -268,7 +268,7 @@ function PopOutIcon() {
       strokeWidth="1.3"
       strokeLinecap="round"
       strokeLinejoin="round"
-      className="shrink-0"
+      className="stg:shrink-0"
       aria-hidden="true"
     >
       <path d="M10.5 4.5V1.5H7.5" />

package/src/workflow/WorkflowApprovalList.tsx

@@ -82,7 +82,7 @@ export function WorkflowApprovalList({
   if (pendingApprovals.length === 0) return null;
 
   return (
-    <div className={cn("stgm space-y-3", className)}>
+    <div className={cn("stgm stg:space-y-3", className)}>
       {pendingApprovals.map((ref) => {
         // A surfaced gate without its approval payload cannot be decided
         // (there is no toolCallId to route) — skip rather than render a
@@ -137,12 +137,12 @@ const WorkflowApprovalItem = memo(function WorkflowApprovalItem({
   );
 
   return (
-    <div className="space-y-2">
+    <div className="stg:space-y-2">
       {onNavigateToAgentExecution && (
         <button
           type="button"
           onClick={() => onNavigateToAgentExecution(childAgentExecutionId)}
-          className="text-xs text-muted-foreground hover:text-foreground underline underline-offset-2"
+          className="stg:text-xs stg:text-muted-foreground stg:hover:text-foreground stg:underline stg:underline-offset-2"
         >
           View agent execution
         </button>