@stigmer/react 3.9.0 → 3.11.0

package/src/workflow/templates/WorkflowTemplateCard.tsx

@@ -15,24 +15,24 @@ export interface WorkflowTemplateCardProps {
 }
 
 const CATEGORY_COLORS: Record<string, string> = {
-  "customer-support": "bg-blue-500/10 text-blue-700 dark:text-blue-400",
-  "code-review": "bg-violet-500/10 text-violet-700 dark:text-violet-400",
-  "data-analysis": "bg-amber-500/10 text-amber-700 dark:text-amber-400",
-  devops: "bg-emerald-500/10 text-emerald-700 dark:text-emerald-400",
-  content: "bg-pink-500/10 text-pink-700 dark:text-pink-400",
-  integration: "bg-cyan-500/10 text-cyan-700 dark:text-cyan-400",
-  general: "bg-muted text-muted-foreground",
+  "customer-support": "stg:bg-blue-500/10 stg:text-blue-700 stg:dark:text-blue-400",
+  "code-review": "stg:bg-violet-500/10 stg:text-violet-700 stg:dark:text-violet-400",
+  "data-analysis": "stg:bg-amber-500/10 stg:text-amber-700 stg:dark:text-amber-400",
+  devops: "stg:bg-emerald-500/10 stg:text-emerald-700 stg:dark:text-emerald-400",
+  content: "stg:bg-pink-500/10 stg:text-pink-700 stg:dark:text-pink-400",
+  integration: "stg:bg-cyan-500/10 stg:text-cyan-700 stg:dark:text-cyan-400",
+  general: "stg:bg-muted stg:text-muted-foreground",
 };
 
 const PATTERN_COLORS: Record<string, string> = {
-  parallel: "bg-violet-500/10 text-violet-700 dark:text-violet-400",
-  branching: "bg-amber-500/10 text-amber-700 dark:text-amber-400",
-  hitl: "bg-emerald-500/10 text-emerald-700 dark:text-emerald-400",
-  loop: "bg-pink-500/10 text-pink-700 dark:text-pink-400",
-  "error-handling": "bg-red-500/10 text-red-700 dark:text-red-400",
-  batch: "bg-cyan-500/10 text-cyan-700 dark:text-cyan-400",
-  "ai-pipeline": "bg-blue-500/10 text-blue-700 dark:text-blue-400",
-  "http-integration": "bg-orange-500/10 text-orange-700 dark:text-orange-400",
+  parallel: "stg:bg-violet-500/10 stg:text-violet-700 stg:dark:text-violet-400",
+  branching: "stg:bg-amber-500/10 stg:text-amber-700 stg:dark:text-amber-400",
+  hitl: "stg:bg-emerald-500/10 stg:text-emerald-700 stg:dark:text-emerald-400",
+  loop: "stg:bg-pink-500/10 stg:text-pink-700 stg:dark:text-pink-400",
+  "error-handling": "stg:bg-red-500/10 stg:text-red-700 stg:dark:text-red-400",
+  batch: "stg:bg-cyan-500/10 stg:text-cyan-700 stg:dark:text-cyan-400",
+  "ai-pipeline": "stg:bg-blue-500/10 stg:text-blue-700 stg:dark:text-blue-400",
+  "http-integration": "stg:bg-orange-500/10 stg:text-orange-700 stg:dark:text-orange-400",
 };
 
 /**
@@ -86,21 +86,21 @@ export function WorkflowTemplateCard({
       onKeyDown={handleKeyDown}
       aria-label={`Use ${template.name} template`}
       className={cn(
-        "group flex cursor-pointer flex-col gap-3 rounded-lg border border-border bg-card p-4",
-        "transition-colors hover:border-primary hover:bg-accent",
-        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+        "stg:group stg:flex stg:cursor-pointer stg:flex-col stg:gap-3 stg:rounded-lg stg:border stg:border-border stg:bg-card stg:p-4",
+        "stg:transition-colors stg:hover:border-primary stg:hover:bg-accent",
+        "stg:focus-visible:outline-none stg:focus-visible:ring-2 stg:focus-visible:ring-ring",
         className,
       )}
     >
       {/* Header: name + category */}
-      <div className="flex items-start justify-between gap-2">
-        <div className="min-w-0 flex-1">
-          <p className="text-sm font-medium text-foreground">
+      <div className="stg:flex stg:items-start stg:justify-between stg:gap-2">
+        <div className="stg:min-w-0 stg:flex-1">
+          <p className="stg:text-sm stg:font-medium stg:text-foreground">
             {template.name}
           </p>
           <span
             className={cn(
-              "mt-1 inline-block rounded-full px-2 py-0.5 text-[10px] font-medium",
+              "stg:mt-1 stg:inline-block stg:rounded-full stg:px-2 stg:py-0.5 stg:text-[10px] stg:font-medium",
               CATEGORY_COLORS[template.category] ?? CATEGORY_COLORS.general,
             )}
           >
@@ -113,10 +113,10 @@ export function WorkflowTemplateCard({
             onClick={handlePreview}
             aria-label={`Preview ${template.name}`}
             className={cn(
-              "rounded-md p-1 text-muted-foreground opacity-0 transition-opacity",
-              "hover:bg-accent hover:text-accent-foreground",
-              "focus-visible:opacity-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
-              "group-hover:opacity-100",
+              "stg:rounded-md stg:p-1 stg:text-muted-foreground stg:opacity-0 stg:transition-opacity",
+              "stg:hover:bg-accent stg:hover:text-accent-foreground",
+              "stg:focus-visible:opacity-100 stg:focus-visible:outline-none stg:focus-visible:ring-2 stg:focus-visible:ring-ring",
+              "stg:group-hover:opacity-100",
             )}
           >
             <PreviewIcon />
@@ -125,19 +125,19 @@ export function WorkflowTemplateCard({
       </div>
 
       {/* Description */}
-      <p className="line-clamp-2 text-xs leading-relaxed text-muted-foreground">
+      <p className="stg:line-clamp-2 stg:text-xs stg:leading-relaxed stg:text-muted-foreground">
         {template.description}
       </p>
 
       {/* Pattern badges */}
       {meta.patterns.length > 0 && (
-        <div className="flex flex-wrap gap-1">
+        <div className="stg:flex stg:flex-wrap stg:gap-1">
           {meta.patterns.slice(0, 3).map((pattern) => (
             <span
               key={pattern}
               className={cn(
-                "rounded px-1.5 py-0.5 text-[10px] font-medium",
-                PATTERN_COLORS[pattern] ?? "bg-muted text-muted-foreground",
+                "stg:rounded stg:px-1.5 stg:py-0.5 stg:text-[10px] stg:font-medium",
+                PATTERN_COLORS[pattern] ?? "stg:bg-muted stg:text-muted-foreground",
               )}
             >
               {PATTERN_LABELS[pattern]}
@@ -147,7 +147,7 @@ export function WorkflowTemplateCard({
       )}
 
       {/* Metadata chips */}
-      <div className="flex items-center gap-3 text-[10px] text-muted-foreground">
+      <div className="stg:flex stg:items-center stg:gap-3 stg:text-[10px] stg:text-muted-foreground">
         <span>{meta.taskCount} tasks</span>
         {meta.envVarCount > 0 && <span>{meta.envVarCount} env vars</span>}
         {meta.hasBudget && <span>Budget</span>}
@@ -159,7 +159,7 @@ export function WorkflowTemplateCard({
 function PreviewIcon() {
   return (
     <svg
-      className="size-4"
+      className="stg:size-4"
       xmlns="http://www.w3.org/2000/svg"
       viewBox="0 0 24 24"
       fill="none"

package/src/workflow/templates/WorkflowTemplateGallery.tsx

@@ -94,9 +94,9 @@ export function WorkflowTemplateGallery({
   );
 
   return (
-    <div className={cn("flex flex-col gap-4", className)}>
+    <div className={cn("stg:flex stg:flex-col stg:gap-4", className)}>
       {/* Search input */}
-      <div className="relative">
+      <div className="stg:relative">
         <SearchIcon />
         <input
           type="search"
@@ -105,9 +105,9 @@ export function WorkflowTemplateGallery({
           placeholder="Search templates…"
           aria-label="Search workflow templates"
           className={cn(
-            "w-full rounded-md border border-input bg-input-bg py-2 pl-9 pr-3 text-sm text-foreground",
-            "placeholder:text-muted-foreground",
-            "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+            "stg:w-full stg:rounded-md stg:border stg:border-input stg:bg-input-bg stg:py-2 stg:pl-9 stg:pr-3 stg:text-sm stg:text-foreground",
+            "stg:placeholder:text-muted-foreground",
+            "stg:focus-visible:outline-none stg:focus-visible:ring-2 stg:focus-visible:ring-ring",
           )}
         />
       </div>
@@ -118,7 +118,7 @@ export function WorkflowTemplateGallery({
           role="tablist"
           aria-label="Template categories"
           onKeyDown={handleTabKeyDown}
-          className="flex flex-wrap gap-1"
+          className="stg:flex stg:flex-wrap stg:gap-1"
         >
           <CategoryTab
             label="All"
@@ -141,7 +141,7 @@ export function WorkflowTemplateGallery({
         <div
           role="list"
           aria-label="Workflow templates"
-          className="grid grid-cols-1 gap-3 sm:grid-cols-2 lg:grid-cols-3"
+          className="stg:grid stg:grid-cols-1 stg:gap-3 stg:sm:grid-cols-2 stg:lg:grid-cols-3"
         >
           {filtered.map((template) => (
             <div key={template.id} role="listitem">
@@ -155,7 +155,7 @@ export function WorkflowTemplateGallery({
         </div>
       ) : (
         (emptyContent ?? (
-          <div className="py-8 text-center text-sm text-muted-foreground">
+          <div className="stg:py-8 stg:text-center stg:text-sm stg:text-muted-foreground">
             No templates match your search.
           </div>
         ))
@@ -189,11 +189,11 @@ function CategoryTab({
       tabIndex={isActive ? 0 : -1}
       onClick={onClick}
       className={cn(
-        "rounded-md px-2.5 py-1 text-xs font-medium transition-colors",
-        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+        "stg:rounded-md stg:px-2.5 stg:py-1 stg:text-xs stg:font-medium stg:transition-colors",
+        "stg:focus-visible:outline-none stg:focus-visible:ring-2 stg:focus-visible:ring-ring",
         isActive
-          ? "bg-primary text-primary-foreground"
-          : "bg-muted text-muted-foreground hover:bg-accent hover:text-accent-foreground",
+          ? "stg:bg-primary stg:text-primary-foreground"
+          : "stg:bg-muted stg:text-muted-foreground stg:hover:bg-accent stg:hover:text-accent-foreground",
       )}
     >
       {label}
@@ -204,7 +204,7 @@ function CategoryTab({
 function SearchIcon() {
   return (
     <svg
-      className="pointer-events-none absolute left-3 top-1/2 size-4 -translate-y-1/2 text-muted-foreground"
+      className="stg:pointer-events-none stg:absolute stg:left-3 stg:top-1/2 stg:size-4 stg:-translate-y-1/2 stg:text-muted-foreground"
       xmlns="http://www.w3.org/2000/svg"
       viewBox="0 0 24 24"
       fill="none"

package/src/workflow/templates/WorkflowTemplatePreview.tsx

@@ -72,7 +72,7 @@ export function WorkflowTemplatePreview({
   );
 
   if (!template || !meta) {
-    return <dialog ref={dialogRef} className="hidden" />;
+    return <dialog ref={dialogRef} className="stg:hidden" />;
   }
 
   const categoryLabel =
@@ -82,18 +82,18 @@ export function WorkflowTemplatePreview({
     <dialog
       ref={dialogRef}
       className={cn(
-        "stgm m-auto max-h-[85vh] w-full max-w-3xl rounded-lg border border-border bg-background p-0 shadow-lg",
-        "backdrop:bg-black/50",
+        "stgm stg:m-auto stg:max-h-[85vh] stg:w-full stg:max-w-3xl stg:rounded-lg stg:border stg:border-border stg:bg-background stg:p-0 stg:shadow-lg",
+        "stg:backdrop:bg-black/50",
       )}
     >
-      <div className="flex flex-col">
+      <div className="stg:flex stg:flex-col">
         {/* Header */}
-        <div className="flex items-center justify-between border-b border-border px-5 py-4">
+        <div className="stg:flex stg:items-center stg:justify-between stg:border-b stg:border-border stg:px-5 stg:py-4">
           <div>
-            <h2 className="text-base font-semibold text-foreground">
+            <h2 className="stg:text-base stg:font-semibold stg:text-foreground">
               {template.name}
             </h2>
-            <span className="text-xs text-muted-foreground">
+            <span className="stg:text-xs stg:text-muted-foreground">
               {categoryLabel}
             </span>
           </div>
@@ -102,9 +102,9 @@ export function WorkflowTemplatePreview({
             onClick={onClose}
             aria-label="Close preview"
             className={cn(
-              "rounded-md p-1.5 text-muted-foreground transition-colors",
-              "hover:bg-accent hover:text-accent-foreground",
-              "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+              "stg:rounded-md stg:p-1.5 stg:text-muted-foreground stg:transition-colors",
+              "stg:hover:bg-accent stg:hover:text-accent-foreground",
+              "stg:focus-visible:outline-none stg:focus-visible:ring-2 stg:focus-visible:ring-ring",
             )}
           >
             <CloseIcon />
@@ -112,14 +112,14 @@ export function WorkflowTemplatePreview({
         </div>
 
         {/* Body */}
-        <div className="flex flex-col gap-4 px-5 py-4">
+        <div className="stg:flex stg:flex-col stg:gap-4 stg:px-5 stg:py-4">
           {/* Description */}
-          <p className="text-sm leading-relaxed text-muted-foreground">
+          <p className="stg:text-sm stg:leading-relaxed stg:text-muted-foreground">
             {template.description}
           </p>
 
           {/* Metadata row */}
-          <div className="flex flex-wrap items-center gap-3">
+          <div className="stg:flex stg:flex-wrap stg:items-center stg:gap-3">
             <MetaChip label={`${meta.taskCount} tasks`} />
             <MetaChip label={`${meta.taskKinds.length} task types`} />
             {meta.envVarCount > 0 && (
@@ -130,11 +130,11 @@ export function WorkflowTemplatePreview({
 
           {/* Pattern badges */}
           {meta.patterns.length > 0 && (
-            <div className="flex flex-wrap gap-1.5">
+            <div className="stg:flex stg:flex-wrap stg:gap-1.5">
               {meta.patterns.map((pattern) => (
                 <span
                   key={pattern}
-                  className="rounded-full bg-muted px-2.5 py-0.5 text-xs font-medium text-muted-foreground"
+                  className="stg:rounded-full stg:bg-muted stg:px-2.5 stg:py-0.5 stg:text-xs stg:font-medium stg:text-muted-foreground"
                 >
                   {PATTERN_LABELS[pattern]}
                 </span>
@@ -144,14 +144,14 @@ export function WorkflowTemplatePreview({
 
           {/* Task kinds */}
           <div>
-            <h3 className="mb-1.5 text-xs font-medium text-foreground">
+            <h3 className="stg:mb-1.5 stg:text-xs stg:font-medium stg:text-foreground">
               Task types used
             </h3>
-            <div className="flex flex-wrap gap-1.5">
+            <div className="stg:flex stg:flex-wrap stg:gap-1.5">
               {meta.taskKinds.map((kind) => (
                 <code
                   key={kind}
-                  className="rounded bg-muted px-1.5 py-0.5 text-[11px] text-muted-foreground"
+                  className="stg:rounded stg:bg-muted stg:px-1.5 stg:py-0.5 stg:text-[11px] stg:text-muted-foreground"
                 >
                   {kind}
                 </code>
@@ -160,7 +160,7 @@ export function WorkflowTemplatePreview({
           </div>
 
           {/* Graph preview */}
-          <div className="h-64 overflow-hidden rounded-md border border-border bg-muted/30">
+          <div className="stg:h-64 stg:overflow-hidden stg:rounded-md stg:border stg:border-border stg:bg-muted/30">
             <ReactFlowProvider>
               <TemplateGraphPreview yaml={template.data.yaml ?? ""} />
             </ReactFlowProvider>
@@ -168,14 +168,14 @@ export function WorkflowTemplatePreview({
         </div>
 
         {/* Footer */}
-        <div className="flex items-center justify-end gap-2 border-t border-border px-5 py-3">
+        <div className="stg:flex stg:items-center stg:justify-end stg:gap-2 stg:border-t stg:border-border stg:px-5 stg:py-3">
           <button
             type="button"
             onClick={onClose}
             className={cn(
-              "rounded-md px-3 py-1.5 text-sm font-medium text-muted-foreground transition-colors",
-              "hover:bg-accent hover:text-accent-foreground",
-              "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+              "stg:rounded-md stg:px-3 stg:py-1.5 stg:text-sm stg:font-medium stg:text-muted-foreground stg:transition-colors",
+              "stg:hover:bg-accent stg:hover:text-accent-foreground",
+              "stg:focus-visible:outline-none stg:focus-visible:ring-2 stg:focus-visible:ring-ring",
             )}
           >
             Cancel
@@ -184,9 +184,9 @@ export function WorkflowTemplatePreview({
             type="button"
             onClick={handleSelect}
             className={cn(
-              "rounded-md bg-primary px-4 py-1.5 text-sm font-medium text-primary-foreground transition-colors",
-              "hover:bg-primary/90",
-              "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+              "stg:rounded-md stg:bg-primary stg:px-4 stg:py-1.5 stg:text-sm stg:font-medium stg:text-primary-foreground stg:transition-colors",
+              "stg:hover:bg-primary/90",
+              "stg:focus-visible:outline-none stg:focus-visible:ring-2 stg:focus-visible:ring-ring",
             )}
           >
             Use this template
@@ -269,7 +269,7 @@ function TemplateGraphPreview({ yaml }: { readonly yaml: string }) {
 
   if (elements.nodes.length === 0) {
     return (
-      <div className="flex h-full items-center justify-center text-xs text-muted-foreground">
+      <div className="stg:flex stg:h-full stg:items-center stg:justify-center stg:text-xs stg:text-muted-foreground">
         No preview available
       </div>
     );
@@ -294,7 +294,7 @@ function TemplateGraphPreview({ yaml }: { readonly yaml: string }) {
 
 function MetaChip({ label }: { readonly label: string }) {
   return (
-    <span className="rounded-md bg-muted px-2 py-0.5 text-[11px] font-medium text-muted-foreground">
+    <span className="stg:rounded-md stg:bg-muted stg:px-2 stg:py-0.5 stg:text-[11px] stg:font-medium stg:text-muted-foreground">
       {label}
     </span>
   );
@@ -303,7 +303,7 @@ function MetaChip({ label }: { readonly label: string }) {
 function CloseIcon() {
   return (
     <svg
-      className="size-4"
+      className="stg:size-4"
       xmlns="http://www.w3.org/2000/svg"
       viewBox="0 0 24 24"
       fill="none"

package/src/workflow/thread/WorkflowTaskThread.tsx

@@ -142,13 +142,13 @@ export const WorkflowTaskThread = memo(function WorkflowTaskThread({
     useAutoScroll();
 
   return (
-    <div className={cn("relative flex h-full min-h-0 flex-col", className)}>
+    <div className={cn("stg:relative stg:flex stg:h-full stg:min-h-0 stg:flex-col", className)}>
       <ThreadProgressHeader progress={progress} isRunning={isRunning} />
 
-      <div ref={scrollRef} className="min-h-0 flex-1 overflow-y-auto">
+      <div ref={scrollRef} className="stg:min-h-0 stg:flex-1 stg:overflow-y-auto">
         <div
           ref={contentRef}
-          className="mx-auto flex w-full max-w-3xl flex-col gap-2 px-4 py-4"
+          className="stg:mx-auto stg:flex stg:w-full stg:max-w-3xl stg:flex-col stg:gap-2 stg:px-4 stg:py-4"
         >
           {items.length === 0 ? (
             <ThreadEmptyState isRunning={isRunning} />
@@ -196,15 +196,15 @@ function ThreadProgressHeader({
       : `${settledTasks} ${settledTasks === 1 ? "task" : "tasks"}`;
 
   return (
-    <div className="flex items-center gap-2 border-b border-border px-4 py-1.5 text-xs text-muted-foreground">
+    <div className="stg:flex stg:items-center stg:gap-2 stg:border-b stg:border-border stg:px-4 stg:py-1.5 stg:text-xs stg:text-muted-foreground">
       <span>{settled}</span>
       {activeTasks > 0 && (
-        <span className="flex items-center gap-1.5">
+        <span className="stg:flex stg:items-center stg:gap-1.5">
           <span
             aria-hidden="true"
             className={cn(
-              "size-1.5 rounded-full bg-primary",
-              isRunning && "animate-pulse",
+              "stg:size-1.5 stg:rounded-full stg:bg-primary",
+              isRunning && "stg:animate-pulse",
             )}
           />
           {activeTasks} active
@@ -220,7 +220,7 @@ function ThreadProgressHeader({
 
 function ThreadEmptyState({ isRunning }: { readonly isRunning: boolean }) {
   return (
-    <div role="status" className="px-4 py-10 text-center text-sm text-muted-foreground">
+    <div role="status" className="stg:px-4 stg:py-10 stg:text-center stg:text-sm stg:text-muted-foreground">
       {isRunning
         ? "Waiting for the first task to start…"
         : "No task activity was recorded for this execution."}
@@ -355,29 +355,29 @@ const ThreadTaskCard = memo(function ThreadTaskCard({
         }
       >
         <StatusGlyph status={item.status} />
-        <span className="min-w-0 flex-1 flex items-baseline gap-1.5 overflow-hidden">
-          <span className="shrink-0 font-medium text-foreground">
+        <span className="stg:min-w-0 stg:flex-1 stg:flex stg:items-baseline stg:gap-1.5 stg:overflow-hidden">
+          <span className="stg:shrink-0 stg:font-medium stg:text-foreground">
             {item.taskName}
           </span>
           {item.kindLabel && (
-            <span className="shrink-0 rounded border border-border px-1 py-px text-[10px] uppercase tracking-wide text-muted-foreground">
+            <span className="stg:shrink-0 stg:rounded stg:border stg:border-border stg:px-1 stg:py-px stg:text-[10px] stg:uppercase stg:tracking-wide stg:text-muted-foreground">
               {item.kindLabel}
             </span>
           )}
           {item.attemptNumber > 1 && (
-            <span className="shrink-0 text-muted-foreground">
+            <span className="stg:shrink-0 stg:text-muted-foreground">
               attempt {item.attemptNumber}
             </span>
           )}
           {preview && (
-            <span className="min-w-0 truncate text-muted-foreground">
+            <span className="stg:min-w-0 stg:truncate stg:text-muted-foreground">
               {preview}
             </span>
           )}
         </span>
 
         {meta && (
-          <span className="shrink-0 tabular-nums text-muted-foreground">
+          <span className="stg:shrink-0 stg:tabular-nums stg:text-muted-foreground">
             {meta}
           </span>
         )}
@@ -404,10 +404,10 @@ const ThreadTaskCard = memo(function ThreadTaskCard({
           own error (e.g. "child execution failed") renders above it. */}
       {showTranscript && (
         <ThreadCardBody cursorTarget="task-transcript">
-          <div className="flex flex-col gap-2">
+          <div className="stg:flex stg:flex-col stg:gap-2">
             {item.error && (
               <BoundedContent>
-                <pre className="whitespace-pre-wrap break-words text-xs text-destructive">
+                <pre className="stg:whitespace-pre-wrap stg:break-words stg:text-xs stg:text-destructive">
                   {item.error}
                 </pre>
               </BoundedContent>
@@ -498,7 +498,7 @@ function ThreadTaskCardHitl({
   // No captured request payload (event stream unavailable) — state the
   // block honestly rather than rendering a gate with no material.
   return (
-    <p className="text-xs text-muted-foreground">
+    <p className="stg:text-xs stg:text-muted-foreground">
       Review required to continue this run.
     </p>
   );
@@ -523,12 +523,12 @@ function ThreadTaskIOSection({
   readonly io: TaskDetailIO;
 }) {
   return (
-    <div className="flex flex-col gap-1">
-      <span className="text-[10px] font-medium uppercase tracking-wide text-muted-foreground">
+    <div className="stg:flex stg:flex-col stg:gap-1">
+      <span className="stg:text-[10px] stg:font-medium stg:uppercase stg:tracking-wide stg:text-muted-foreground">
         {label}
       </span>
       {io.source === "event-summary" && (
-        <p className="text-[10px] text-muted-foreground">
+        <p className="stg:text-[10px] stg:text-muted-foreground">
           Showing truncated summary from the event log. Full data appears when
           the run's snapshot is available.
         </p>
@@ -564,10 +564,10 @@ function ThreadTaskPreviewBody({
   };
 }) {
   return (
-    <div className="flex flex-col gap-2">
+    <div className="stg:flex stg:flex-col stg:gap-2">
       {item.error && (
         <BoundedContent>
-          <pre className="whitespace-pre-wrap break-words text-xs text-destructive">
+          <pre className="stg:whitespace-pre-wrap stg:break-words stg:text-xs stg:text-destructive">
             {item.error}
           </pre>
         </BoundedContent>
@@ -611,19 +611,19 @@ function ThreadTaskDetail({
   }
 
   return (
-    <div className="flex flex-col gap-2">
-      <dl className="grid grid-cols-[auto_1fr] gap-x-4 gap-y-1 text-xs">
+    <div className="stg:flex stg:flex-col stg:gap-2">
+      <dl className="stg:grid stg:grid-cols-[auto_1fr] stg:gap-x-4 stg:gap-y-1 stg:text-xs">
         {rows.map(([label, value]) => (
-          <div key={label} className="contents">
-            <dt className="text-muted-foreground">{label}</dt>
-            <dd className="text-foreground">{value}</dd>
+          <div key={label} className="stg:contents">
+            <dt className="stg:text-muted-foreground">{label}</dt>
+            <dd className="stg:text-foreground">{value}</dd>
           </div>
         ))}
       </dl>
 
       {item.error && (
         <BoundedContent>
-          <pre className="whitespace-pre-wrap break-words text-xs text-destructive">
+          <pre className="stg:whitespace-pre-wrap stg:break-words stg:text-xs stg:text-destructive">
             {item.error}
           </pre>
         </BoundedContent>
@@ -670,19 +670,19 @@ const STATUS_GLYPH: Record<
   WorkflowThreadItem["status"],
   { readonly Icon: () => React.JSX.Element; readonly color: string }
 > = {
-  running: { Icon: SpinnerIcon, color: "text-foreground" },
-  retrying: { Icon: SpinnerIcon, color: "text-warning" },
-  waiting_approval: { Icon: ClockIcon, color: "text-warning" },
-  completed: { Icon: CheckCircleIcon, color: "text-success" },
-  failed: { Icon: XCircleIcon, color: "text-destructive" },
-  skipped: { Icon: SlashCircleIcon, color: "text-muted-foreground" },
-  pending: { Icon: DotIcon, color: "text-muted-foreground" },
+  running: { Icon: SpinnerIcon, color: "stg:text-foreground" },
+  retrying: { Icon: SpinnerIcon, color: "stg:text-warning" },
+  waiting_approval: { Icon: ClockIcon, color: "stg:text-warning" },
+  completed: { Icon: CheckCircleIcon, color: "stg:text-success" },
+  failed: { Icon: XCircleIcon, color: "stg:text-destructive" },
+  skipped: { Icon: SlashCircleIcon, color: "stg:text-muted-foreground" },
+  pending: { Icon: DotIcon, color: "stg:text-muted-foreground" },
 };
 
 function StatusGlyph({ status }: { readonly status: WorkflowThreadItem["status"] }) {
   const { Icon, color } = STATUS_GLYPH[status];
   return (
-    <span className={cn("shrink-0", color)} aria-hidden="true">
+    <span className={cn("stg:shrink-0", color)} aria-hidden="true">
       <Icon />
     </span>
   );

package/src/workspace/EditorTabs.tsx

@@ -78,7 +78,7 @@ export function EditorTabs({
       aria-label="Open editors"
       aria-orientation="horizontal"
       className={cn(
-        "flex shrink-0 items-stretch overflow-x-auto border-b border-border",
+        "stg:flex stg:shrink-0 stg:items-stretch stg:overflow-x-auto stg:border-b stg:border-border",
         className,
       )}
     >
@@ -127,14 +127,14 @@ export function EditorTabs({
             onAuxClick={handleAuxClick}
             onKeyDown={handleKeyDown}
             className={cn(
-              "group flex max-w-[12rem] shrink-0 cursor-pointer items-center gap-1.5 border-r border-border px-3 py-1.5 text-xs transition-colors",
-              "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring",
+              "stg:group stg:flex stg:max-w-[12rem] stg:shrink-0 stg:cursor-pointer stg:items-center stg:gap-1.5 stg:border-r stg:border-border stg:px-3 stg:py-1.5 stg:text-xs stg:transition-colors",
+              "stg:focus-visible:outline-none stg:focus-visible:ring-2 stg:focus-visible:ring-inset stg:focus-visible:ring-ring",
               isActive
-                ? "bg-background text-foreground"
-                : "bg-muted-faint text-muted-foreground hover:bg-muted hover:text-foreground",
+                ? "stg:bg-background stg:text-foreground"
+                : "stg:bg-muted-faint stg:text-muted-foreground stg:hover:bg-muted stg:hover:text-foreground",
             )}
           >
-            <span className={cn("truncate", editor.preview && "italic")}>
+            <span className={cn("stg:truncate", editor.preview && "stg:italic")}>
               {basename}
             </span>
             {/* The visual close "X" is a presentational mouse affordance, NOT a
@@ -151,8 +151,8 @@ export function EditorTabs({
                 onClose(editor.entryId, editor.path);
               }}
               className={cn(
-                "shrink-0 cursor-pointer rounded p-0.5 text-muted-foreground transition-opacity hover:bg-accent-hover hover:text-foreground",
-                isActive ? "opacity-100" : "opacity-0 group-hover:opacity-100",
+                "stg:shrink-0 stg:cursor-pointer stg:rounded stg:p-0.5 stg:text-muted-foreground stg:transition-opacity stg:hover:bg-accent-hover stg:hover:text-foreground",
+                isActive ? "stg:opacity-100" : "stg:opacity-0 stg:group-hover:opacity-100",
               )}
             >
               <CloseIcon />