@stigmer/react 3.9.0 → 3.11.0

package/src/workflow/WorkflowGraphFullscreenDialog.tsx

@@ -67,14 +67,14 @@ export function WorkflowGraphFullscreenDialog({
       onCancel={handleCancel}
       aria-label={`${workflowName} — full view`}
       className={cn(
-        "fixed inset-0 z-50 m-auto h-[90vh] w-[95vw] rounded-lg border border-border bg-background p-0 text-foreground shadow-2xl outline-none",
-        "[&::backdrop]:bg-black/60",
+        "stg:fixed stg:inset-0 stg:z-50 stg:m-auto stg:h-[90vh] stg:w-[95vw] stg:rounded-lg stg:border stg:border-border stg:bg-background stg:p-0 stg:text-foreground stg:shadow-2xl stg:outline-none",
+        "stg:[&::backdrop]:bg-black/60",
       )}
     >
       {open && (
-        <div className="flex h-full flex-col">
-          <div className="flex shrink-0 items-center justify-between border-b border-border px-4 py-3">
-            <h2 className="truncate text-sm font-semibold text-foreground">
+        <div className="stg:flex stg:h-full stg:flex-col">
+          <div className="stg:flex stg:shrink-0 stg:items-center stg:justify-between stg:border-b stg:border-border stg:px-4 stg:py-3">
+            <h2 className="stg:truncate stg:text-sm stg:font-semibold stg:text-foreground">
               {workflowName}
             </h2>
             <button
@@ -82,21 +82,21 @@ export function WorkflowGraphFullscreenDialog({
               onClick={onClose}
               aria-label="Close full view"
               className={cn(
-                "inline-flex size-7 items-center justify-center rounded-md text-muted-foreground",
-                "hover:bg-accent-hover hover:text-foreground",
-                "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
-                "transition-colors",
+                "stg:inline-flex stg:size-7 stg:items-center stg:justify-center stg:rounded-md stg:text-muted-foreground",
+                "stg:hover:bg-accent-hover stg:hover:text-foreground",
+                "stg:focus-visible:outline-none stg:focus-visible:ring-2 stg:focus-visible:ring-ring",
+                "stg:transition-colors",
               )}
             >
               <CloseIcon />
             </button>
           </div>
-          <div className="min-h-0 flex-1">
+          <div className="stg:min-h-0 stg:flex-1">
             <WorkflowOverviewGraph
               workflow={workflow}
               onOpenInEditor={onOpenInEditor}
               nodesDraggable
-              className="h-full w-full bg-[var(--stgm-muted-subtle,#fafafa)]"
+              className="stg:h-full stg:w-full stg:bg-[var(--stgm-muted-subtle,#fafafa)]"
             />
           </div>
         </div>

package/src/workflow/WorkflowNode.tsx

@@ -42,7 +42,7 @@ export const WorkflowNode = memo(function WorkflowNode({
       data-diff-status={diffState?.status}
       aria-label={buildAriaLabel(data, errorCount, executionState?.status)}
       role="button"
-      className="focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--stgm-ring,#3b82f6)] focus-visible:ring-offset-1 rounded-sm"
+      className="stg:focus-visible:outline-none stg:focus-visible:ring-2 stg:focus-visible:ring-[var(--stgm-ring,#3b82f6)] stg:focus-visible:ring-offset-1 stg:rounded-sm"
     >
       <NodeShell
         visualClass={visualSpec.visualClass}
@@ -68,7 +68,7 @@ export const WorkflowNode = memo(function WorkflowNode({
       {/* Validation badge — design mode only */}
       {mode === "design" && errorCount > 0 && (
         <span
-          className="absolute -right-1.5 -top-1.5 z-20 flex h-4 min-w-4 items-center justify-center rounded-full bg-[var(--stgm-destructive,#ef4444)] px-1 text-[9px] font-bold leading-none text-[var(--stgm-destructive-foreground,#fff)]"
+          className="stg:absolute stg:-right-1.5 stg:-top-1.5 stg:z-20 stg:flex stg:h-4 stg:min-w-4 stg:items-center stg:justify-center stg:rounded-full stg:bg-[var(--stgm-destructive,#ef4444)] stg:px-1 stg:text-[9px] stg:font-bold stg:leading-none stg:text-[var(--stgm-destructive-foreground,#fff)]"
           title={`${errorCount} validation ${errorCount === 1 ? "error" : "errors"}`}
         >
           {errorCount}

package/src/workflow/WorkflowNodePopover.tsx

@@ -74,9 +74,9 @@ export const WorkflowNodePopover = memo(function WorkflowNodePopover({
       role="dialog"
       aria-label={`${data.taskName} task details`}
       className={cn(
-        "absolute z-50 w-64 overflow-visible rounded-lg border border-[var(--stgm-border,#d4d4d8)]",
-        "bg-[var(--stgm-popover,#fff)] p-3 shadow-lg",
-        "text-[var(--stgm-popover-foreground,#1a1a2e)]",
+        "stg:absolute stg:z-50 stg:w-64 stg:overflow-visible stg:rounded-lg stg:border stg:border-[var(--stgm-border,#d4d4d8)]",
+        "stg:bg-[var(--stgm-popover,#fff)] stg:p-3 stg:shadow-lg",
+        "stg:text-[var(--stgm-popover-foreground,#1a1a2e)]",
       )}
       style={{
         left: Math.min(x, (ref.current?.parentElement?.clientWidth ?? 800) - 272),
@@ -84,24 +84,24 @@ export const WorkflowNodePopover = memo(function WorkflowNodePopover({
         minWidth: "16rem",
       }}
     >
-      <div className="mb-2 flex items-center gap-2">
+      <div className="stg:mb-2 stg:flex stg:items-center stg:gap-2">
         <span
-          className="inline-block h-2.5 w-2.5 shrink-0 rounded-full"
+          className="stg:inline-block stg:h-2.5 stg:w-2.5 stg:shrink-0 stg:rounded-full"
           style={{ backgroundColor: categoryColor }}
           aria-hidden="true"
         />
-        <span className="truncate text-sm font-medium">{data.taskName}</span>
+        <span className="stg:truncate stg:text-sm stg:font-medium">{data.taskName}</span>
       </div>
 
-      <div className="mb-2 flex items-center gap-2 text-xs text-[var(--stgm-muted-foreground,#737373)]">
-        <span className="rounded bg-[var(--stgm-muted,#f5f5f5)] px-1.5 py-0.5 font-medium">
+      <div className="stg:mb-2 stg:flex stg:items-center stg:gap-2 stg:text-xs stg:text-[var(--stgm-muted-foreground,#737373)]">
+        <span className="stg:rounded stg:bg-[var(--stgm-muted,#f5f5f5)] stg:px-1.5 stg:py-0.5 stg:font-medium">
           {displayName}
         </span>
-        <span className="capitalize">{category.replace(/_/g, " ")}</span>
+        <span className="stg:capitalize">{category.replace(/_/g, " ")}</span>
       </div>
 
       {configSummary && (
-        <p className="mb-2 truncate text-xs text-[var(--stgm-muted-foreground,#737373)]">
+        <p className="stg:mb-2 stg:truncate stg:text-xs stg:text-[var(--stgm-muted-foreground,#737373)]">
           {configSummary}
         </p>
       )}
@@ -111,11 +111,11 @@ export const WorkflowNodePopover = memo(function WorkflowNodePopover({
           type="button"
           onClick={handleOpenInEditor}
           className={cn(
-            "mt-1 block w-full whitespace-nowrap rounded-md px-2.5 py-1.5 text-center text-xs font-medium",
-            "bg-[var(--stgm-primary,#6366f1)] text-[var(--stgm-primary-foreground,#fff)]",
-            "hover:bg-[var(--stgm-primary-hover,#4f46e5)]",
-            "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--stgm-ring,#6366f1)]",
-            "transition-colors",
+            "stg:mt-1 stg:block stg:w-full stg:whitespace-nowrap stg:rounded-md stg:px-2.5 stg:py-1.5 stg:text-center stg:text-xs stg:font-medium",
+            "stg:bg-[var(--stgm-primary,#6366f1)] stg:text-[var(--stgm-primary-foreground,#fff)]",
+            "stg:hover:bg-[var(--stgm-primary-hover,#4f46e5)]",
+            "stg:focus-visible:outline-none stg:focus-visible:ring-2 stg:focus-visible:ring-[var(--stgm-ring,#6366f1)]",
+            "stg:transition-colors",
           )}
         >
           Open in editor

package/src/workflow/WorkflowOverviewGraph.tsx

@@ -198,7 +198,7 @@ function WorkflowOverviewGraphInner({
 
   if (!workflow?.spec?.tasks?.length) {
     return (
-      <div className={cn("flex h-full items-center justify-center text-sm text-[var(--stgm-muted-foreground,#737373)]", className)}>
+      <div className={cn("stg:flex stg:h-full stg:items-center stg:justify-center stg:text-sm stg:text-[var(--stgm-muted-foreground,#737373)]", className)}>
         No tasks to visualize
       </div>
     );
@@ -206,7 +206,7 @@ function WorkflowOverviewGraphInner({
 
   if (nodesWithSelection.length === 0) {
     return (
-      <div className={cn("flex h-full items-center justify-center", className)}>
+      <div className={cn("stg:flex stg:h-full stg:items-center stg:justify-center", className)}>
         <GraphLoadingSkeleton />
       </div>
     );
@@ -214,7 +214,7 @@ function WorkflowOverviewGraphInner({
 
   return (
     <WorkflowGraphModeProvider mode="overview">
-      <div ref={containerRef} className={cn("relative h-full w-full", className)}>
+      <div ref={containerRef} className={cn("stg:relative stg:h-full stg:w-full", className)}>
         <ReactFlow
           nodes={displayNodes}
           edges={edges}
@@ -255,12 +255,12 @@ function WorkflowOverviewGraphInner({
 
 function GraphLoadingSkeleton() {
   return (
-    <div className="flex flex-col items-center gap-3">
-      <div className="h-8 w-8 animate-pulse rounded-full bg-[var(--stgm-muted,#e5e5e5)]" />
-      <div className="h-3 w-24 animate-pulse rounded bg-[var(--stgm-muted,#e5e5e5)]" />
-      <div className="mt-2 flex gap-4">
-        <div className="h-10 w-32 animate-pulse rounded-md bg-[var(--stgm-muted,#e5e5e5)]" />
-        <div className="h-10 w-32 animate-pulse rounded-md bg-[var(--stgm-muted,#e5e5e5)]" />
+    <div className="stg:flex stg:flex-col stg:items-center stg:gap-3">
+      <div className="stg:h-8 stg:w-8 stg:animate-pulse stg:rounded-full stg:bg-[var(--stgm-muted,#e5e5e5)]" />
+      <div className="stg:h-3 stg:w-24 stg:animate-pulse stg:rounded stg:bg-[var(--stgm-muted,#e5e5e5)]" />
+      <div className="stg:mt-2 stg:flex stg:gap-4">
+        <div className="stg:h-10 stg:w-32 stg:animate-pulse stg:rounded-md stg:bg-[var(--stgm-muted,#e5e5e5)]" />
+        <div className="stg:h-10 stg:w-32 stg:animate-pulse stg:rounded-md stg:bg-[var(--stgm-muted,#e5e5e5)]" />
       </div>
     </div>
   );

package/src/workflow/WorkflowOverviewSummary.tsx

@@ -29,7 +29,7 @@ export const WorkflowOverviewSummary = memo(function WorkflowOverviewSummary({
 }: WorkflowOverviewSummaryProps) {
   if (isLoading) {
     return (
-      <div className={cn("grid grid-cols-2 gap-3 sm:grid-cols-4", className)}>
+      <div className={cn("stg:grid stg:grid-cols-2 stg:gap-3 stg:sm:grid-cols-4", className)}>
         {Array.from({ length: 4 }, (_, i) => (
           <SkeletonCard key={i} />
         ))}
@@ -42,7 +42,7 @@ export const WorkflowOverviewSummary = memo(function WorkflowOverviewSummary({
   if (!summary || totalCount === 0) {
     return (
       <div className={cn(
-        "rounded-lg border border-[var(--stgm-border,#d4d4d8)] px-4 py-6 text-center text-sm text-[var(--stgm-muted-foreground,#737373)]",
+        "stg:rounded-lg stg:border stg:border-[var(--stgm-border,#d4d4d8)] stg:px-4 stg:py-6 stg:text-center stg:text-sm stg:text-[var(--stgm-muted-foreground,#737373)]",
         className,
       )}>
         No executions yet
@@ -53,10 +53,10 @@ export const WorkflowOverviewSummary = memo(function WorkflowOverviewSummary({
   const successRate = typeof summary.successRate === "number" ? summary.successRate : -1;
   const successPct = successRate >= 0 ? `${Math.round(successRate * 100)}%` : "—";
   const successColor = successRate >= 0.9
-    ? "text-[var(--stgm-success,#22c55e)]"
+    ? "stg:text-[var(--stgm-success,#22c55e)]"
     : successRate >= 0.7
-      ? "text-[var(--stgm-warning,#f59e0b)]"
-      : "text-[var(--stgm-destructive,#ef4444)]";
+      ? "stg:text-[var(--stgm-warning,#f59e0b)]"
+      : "stg:text-[var(--stgm-destructive,#ef4444)]";
 
   const avgDuration = summary.avgDuration
     ? formatProtoSeconds(Number(summary.avgDuration.seconds))
@@ -67,7 +67,7 @@ export const WorkflowOverviewSummary = memo(function WorkflowOverviewSummary({
     : "$0.00";
 
   return (
-    <div className={cn("grid grid-cols-2 gap-3 sm:grid-cols-4", className)}>
+    <div className={cn("stg:grid stg:grid-cols-2 stg:gap-3 stg:sm:grid-cols-4", className)}>
       <StatCard label="Total Executions" value={String(totalCount)} />
       <StatCard label="Success Rate" value={successPct} valueClassName={successRate >= 0 ? successColor : undefined} />
       <StatCard label="Avg Duration" value={avgDuration} />
@@ -86,11 +86,11 @@ function StatCard({
   readonly valueClassName?: string;
 }) {
   return (
-    <div className="rounded-lg border border-[var(--stgm-border,#d4d4d8)] bg-[var(--stgm-background,#fff)] px-4 py-3">
-      <dt className="text-[11px] font-medium uppercase tracking-wider text-[var(--stgm-muted-foreground,#737373)]">
+    <div className="stg:rounded-lg stg:border stg:border-[var(--stgm-border,#d4d4d8)] stg:bg-[var(--stgm-background,#fff)] stg:px-4 stg:py-3">
+      <dt className="stg:text-[11px] stg:font-medium stg:uppercase stg:tracking-wider stg:text-[var(--stgm-muted-foreground,#737373)]">
         {label}
       </dt>
-      <dd className={cn("mt-1 text-xl font-semibold text-[var(--stgm-foreground,#1a1a2e)]", valueClassName)}>
+      <dd className={cn("stg:mt-1 stg:text-xl stg:font-semibold stg:text-[var(--stgm-foreground,#1a1a2e)]", valueClassName)}>
         {value}
       </dd>
     </div>
@@ -99,9 +99,9 @@ function StatCard({
 
 function SkeletonCard() {
   return (
-    <div className="rounded-lg border border-[var(--stgm-border,#d4d4d8)] bg-[var(--stgm-background,#fff)] px-4 py-3">
-      <div className="h-3 w-20 animate-pulse rounded bg-[var(--stgm-muted,#e5e5e5)]" />
-      <div className="mt-2 h-6 w-16 animate-pulse rounded bg-[var(--stgm-muted,#e5e5e5)]" />
+    <div className="stg:rounded-lg stg:border stg:border-[var(--stgm-border,#d4d4d8)] stg:bg-[var(--stgm-background,#fff)] stg:px-4 stg:py-3">
+      <div className="stg:h-3 stg:w-20 stg:animate-pulse stg:rounded stg:bg-[var(--stgm-muted,#e5e5e5)]" />
+      <div className="stg:mt-2 stg:h-6 stg:w-16 stg:animate-pulse stg:rounded stg:bg-[var(--stgm-muted,#e5e5e5)]" />
     </div>
   );
 }

package/src/workflow/WorkflowRefinePanel.tsx

@@ -127,21 +127,21 @@ export function WorkflowRefinePanel({
   return (
     <div
       className={cn(
-        "flex h-full flex-col border-l border-border bg-background",
+        "stg:flex stg:h-full stg:flex-col stg:border-l stg:border-border stg:bg-background",
         className,
       )}
       role="complementary"
       aria-label="Workflow refinement 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">
             Refine with AI
           </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} />
               Working…
             </span>
@@ -150,7 +150,7 @@ export function WorkflowRefinePanel({
         <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 refinement panel"
         >
           <CloseIcon />
@@ -158,12 +158,12 @@ export function WorkflowRefinePanel({
       </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">
         {/* Empty state */}
         {!hasConversation && flow.phase === "idle" && (
-          <div className="flex flex-1 flex-col items-center justify-center gap-2 px-4 py-8 text-center">
+          <div className="stg:flex stg:flex-1 stg:flex-col stg:items-center stg:justify-center stg:gap-2 stg:px-4 stg:py-8 stg:text-center">
             <SparklesIcon />
-            <p className="text-xs text-muted-foreground">
+            <p className="stg:text-xs stg:text-muted-foreground">
               Describe the changes you want and the Workflow Architect agent
               will refine your workflow definition.
             </p>
@@ -172,9 +172,9 @@ export function WorkflowRefinePanel({
 
         {/* Starting indicator (before stream connects) */}
         {flow.phase === "starting" && (
-          <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>
@@ -188,14 +188,14 @@ export function WorkflowRefinePanel({
             pendingUserMessage={
               flow.phase === "starting" ? instruction || undefined : undefined
             }
-            className="flex-1"
+            className="stg:flex-1"
           />
         )}
 
         {/* Error */}
         {flow.error && flow.phase === "error" && (
           <div
-            className="mx-3 mt-3 rounded-md border border-destructive/30 bg-destructive/5 px-3 py-2 text-xs text-destructive"
+            className="stg:mx-3 stg:mt-3 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}
@@ -215,7 +215,7 @@ export function WorkflowRefinePanel({
       )}
 
       {/* 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={instruction}
           onChange={(e) => setInstruction(e.target.value)}
@@ -224,14 +224,14 @@ export function WorkflowRefinePanel({
           disabled={!composerEnabled}
           rows={3}
           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 submit
           </p>
           <button
@@ -239,10 +239,10 @@ export function WorkflowRefinePanel({
             onClick={handleSend}
             disabled={!composerEnabled || instruction.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
@@ -276,16 +276,16 @@ function ResultStrip({
 
   return (
     <div
-      className="border-t border-border px-3 py-3"
+      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">
             Changes
           </h4>
-          <p className="text-xs leading-relaxed text-foreground">
+          <p className="stg:text-xs stg:leading-relaxed stg:text-foreground">
             {explanation}
           </p>
         </div>
@@ -293,8 +293,8 @@ function ResultStrip({
 
       {/* Visual graph diff */}
       {hasChanges && (
-        <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}
@@ -305,16 +305,16 @@ function ResultStrip({
 
       {/* Collapsible YAML diff toggle */}
       {hasChanges && (
-        <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>
           )}
@@ -322,14 +322,14 @@ function ResultStrip({
       )}
 
       {/* Actions */}
-      <div className="flex gap-2">
+      <div className="stg:flex stg:gap-2">
         <button
           type="button"
           onClick={onAccept}
           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",
           )}
         >
           Accept
@@ -338,10 +338,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
@@ -362,25 +362,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. Accept 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}
@@ -439,7 +439,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" />