@stigmer/react 3.9.0 → 3.11.0

package/src/workflow/WorkflowTaskApprovalSummary.tsx

@@ -95,19 +95,19 @@ export const WorkflowTaskApprovalSummary = memo(function WorkflowTaskApprovalSum
     <div
       role="group"
       aria-label={`Approval decision for ${taskName}`}
-      className={cn("mt-2 rounded-lg border border-border bg-muted-subtle p-3", className)}
+      className={cn("stg:mt-2 stg:rounded-lg stg:border stg:border-border stg:bg-muted-subtle stg:p-3", className)}
     >
       {/* Decision header */}
       {isFinalizing ? (
-        <div className="flex items-center gap-2 text-xs text-muted-foreground">
+        <div className="stg:flex stg:items-center stg:gap-2 stg:text-xs stg:text-muted-foreground">
           <SpinnerIcon />
           <span>Decision recorded — finalizing…</span>
         </div>
       ) : (
-        <div className="flex flex-wrap items-center gap-x-2 gap-y-1">
+        <div className="stg:flex stg:flex-wrap stg:items-center stg:gap-x-2 stg:gap-y-1">
           <span
             className={cn(
-              "inline-flex items-center gap-1.5 rounded-md px-2 py-1 text-xs font-medium",
+              "stg:inline-flex stg:items-center stg:gap-1.5 stg:rounded-md stg:px-2 stg:py-1 stg:text-xs stg:font-medium",
               TONE_CLASSES[tone],
             )}
           >
@@ -115,7 +115,7 @@ export const WorkflowTaskApprovalSummary = memo(function WorkflowTaskApprovalSum
             {outcomeLabel}
           </span>
           {decision!.autoResolved && (
-            <span className="rounded bg-muted px-1.5 py-0.5 text-[10px] font-medium text-muted-foreground">
+            <span className="stg:rounded stg:bg-muted stg:px-1.5 stg:py-0.5 stg:text-[10px] stg:font-medium stg:text-muted-foreground">
               auto-resolved
             </span>
           )}
@@ -124,18 +124,18 @@ export const WorkflowTaskApprovalSummary = memo(function WorkflowTaskApprovalSum
 
       {/* Reviewer + timing */}
       {!isFinalizing && (
-        <div className="mt-1.5 flex flex-wrap items-center gap-x-1.5 text-[11px] text-muted-foreground">
+        <div className="stg:mt-1.5 stg:flex stg:flex-wrap stg:items-center stg:gap-x-1.5 stg:text-[11px] stg:text-muted-foreground">
           {reviewer && <ReviewerChip reviewer={reviewer} />}
           {decision!.respondedAt && (
             <>
               {reviewer && <Dot />}
-              <span className="tabular-nums">{formatTimestamp(decision!.respondedAt)}</span>
+              <span className="stg:tabular-nums">{formatTimestamp(decision!.respondedAt)}</span>
             </>
           )}
           {decision!.waitDurationMs > 0 && (
             <>
               {(reviewer || decision!.respondedAt) && <Dot />}
-              <span className="tabular-nums">waited {formatDuration(decision!.waitDurationMs)}</span>
+              <span className="stg:tabular-nums">waited {formatDuration(decision!.waitDurationMs)}</span>
             </>
           )}
         </div>
@@ -143,7 +143,7 @@ export const WorkflowTaskApprovalSummary = memo(function WorkflowTaskApprovalSum
 
       {/* What was decided on */}
       {prompt && (
-        <div className="mt-3 max-h-80 overflow-y-auto rounded border border-border bg-background p-3">
+        <div className="stg:mt-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}
@@ -154,11 +154,11 @@ export const WorkflowTaskApprovalSummary = memo(function WorkflowTaskApprovalSum
 
       {/* Reviewer comment */}
       {!isFinalizing && decision!.comment && (
-        <div className="mt-3">
-          <p className="mb-1 text-[11px] font-medium uppercase tracking-wide text-muted-foreground">
+        <div className="stg:mt-3">
+          <p className="stg:mb-1 stg:text-[11px] stg:font-medium stg:uppercase stg:tracking-wide stg:text-muted-foreground">
             Comment
           </p>
-          <p className="whitespace-pre-wrap rounded border border-border bg-background p-2 text-xs text-foreground">
+          <p className="stg:whitespace-pre-wrap stg:rounded stg:border stg:border-border stg:bg-background stg:p-2 stg:text-xs stg:text-foreground">
             {decision!.comment}
           </p>
         </div>
@@ -166,13 +166,13 @@ export const WorkflowTaskApprovalSummary = memo(function WorkflowTaskApprovalSum
 
       {/* Submitted form answers */}
       {!isFinalizing && formEntries.length > 0 && (
-        <dl className="mt-3 space-y-2">
+        <dl className="stg:mt-3 stg:space-y-2">
           {formEntries.map((entry) => (
             <div key={entry.key}>
-              <dt className="mb-1 text-[11px] font-medium uppercase tracking-wide text-muted-foreground">
+              <dt className="stg:mb-1 stg:text-[11px] stg:font-medium stg:uppercase stg:tracking-wide stg:text-muted-foreground">
                 {entry.label}
               </dt>
-              <dd className="whitespace-pre-wrap rounded border border-border bg-background p-2 text-xs text-foreground">
+              <dd className="stg:whitespace-pre-wrap stg:rounded stg:border stg:border-border stg:bg-background stg:p-2 stg:text-xs stg:text-foreground">
                 {entry.value}
               </dd>
             </div>
@@ -196,16 +196,16 @@ export const WorkflowTaskApprovalSummary = memo(function WorkflowTaskApprovalSum
  */
 function ReviewerChip({ reviewer }: { readonly reviewer: TaskReviewerView }) {
   return (
-    <span className="flex items-center gap-1">
+    <span className="stg:flex stg:items-center stg:gap-1">
       by{" "}
       {reviewer.avatar && (
-        <img src={reviewer.avatar} alt="" className="size-3.5 rounded-full" />
+        <img src={reviewer.avatar} alt="" className="stg:size-3.5 stg:rounded-full" />
       )}
       <span
         className={cn(
           reviewer.isRawId
-            ? "font-mono text-[10px] text-muted-foreground"
-            : "font-medium text-foreground",
+            ? "stg:font-mono stg:text-[10px] stg:text-muted-foreground"
+            : "stg:font-medium stg:text-foreground",
         )}
         title={reviewer.email || undefined}
       >
@@ -222,9 +222,9 @@ function ReviewerChip({ reviewer }: { readonly reviewer: TaskReviewerView }) {
 type DecisionTone = "approve" | "reject" | "neutral";
 
 const TONE_CLASSES: Record<DecisionTone, string> = {
-  approve: "bg-success-subtle text-success",
-  reject: "bg-destructive-subtle text-destructive",
-  neutral: "bg-muted text-foreground",
+  approve: "stg:bg-success-subtle stg:text-success",
+  reject: "stg:bg-destructive-subtle stg:text-destructive",
+  neutral: "stg:bg-muted stg:text-foreground",
 };
 
 /**
@@ -317,7 +317,7 @@ function SpinnerIcon() {
       fill="none"
       stroke="currentColor"
       strokeWidth="1.5"
-      className="animate-spin"
+      className="stg:animate-spin"
       aria-hidden="true"
     >
       <path d="M6 1.5A4.5 4.5 0 1 1 1.5 6" strokeLinecap="round" />

package/src/workflow/WorkflowTaskList.tsx

@@ -68,44 +68,44 @@ export const WorkflowTaskList = memo(function WorkflowTaskList({
 
   if (tasks.length === 0) {
     return (
-      <div className={cn("py-8 text-center text-sm text-muted-foreground", className)}>
+      <div className={cn("stg:py-8 stg:text-center stg:text-sm stg:text-muted-foreground", className)}>
         No tasks defined
       </div>
     );
   }
 
   return (
-    <div className={cn("flex flex-col", className)}>
+    <div className={cn("stg:flex stg:flex-col", className)}>
       {tasks.map((task, idx) => {
         const kindLabel = TASK_KIND_LABELS.get(task.kind) ?? formatKindName(task.kind);
         const iconName = kindIconMap.get(kindEnumToString(task.kind));
         const isLast = idx === tasks.length - 1;
 
         return (
-          <div key={task.name} className="flex items-stretch gap-3">
+          <div key={task.name} className="stg:flex stg:items-stretch stg:gap-3">
             {/* Vertical connector line */}
-            <div className="flex w-5 flex-col items-center">
+            <div className="stg:flex stg:w-5 stg:flex-col stg:items-center">
               <div
                 className={cn(
-                  "flex size-5 shrink-0 items-center justify-center rounded-full border border-border bg-background text-[10px] font-medium text-muted-foreground",
+                  "stg:flex stg:size-5 stg:shrink-0 stg:items-center stg:justify-center stg:rounded-full stg:border stg:border-border stg:bg-background stg:text-[10px] stg:font-medium stg:text-muted-foreground",
                 )}
               >
                 {idx + 1}
               </div>
               {!isLast && (
-                <div className="w-px flex-1 bg-border" />
+                <div className="stg:w-px stg:flex-1 stg:bg-border" />
               )}
             </div>
 
             {/* Task content */}
-            <div className="flex min-w-0 flex-1 items-center gap-2 pb-3 pt-0.5">
+            <div className="stg:flex stg:min-w-0 stg:flex-1 stg:items-center stg:gap-2 stg:pb-3 stg:pt-0.5">
               {iconName && (
-                <TaskKindIcon iconName={iconName} className="size-4 shrink-0 text-muted-foreground" />
+                <TaskKindIcon iconName={iconName} className="stg:size-4 stg:shrink-0 stg:text-muted-foreground" />
               )}
-              <span className="truncate text-sm font-medium text-foreground">
+              <span className="stg:truncate stg:text-sm stg:font-medium stg:text-foreground">
                 {task.name}
               </span>
-              <span className="shrink-0 rounded bg-muted px-1.5 py-0.5 text-[10px] font-medium text-muted-foreground">
+              <span className="stg:shrink-0 stg:rounded stg:bg-muted stg:px-1.5 stg:py-0.5 stg:text-[10px] stg:font-medium stg:text-muted-foreground">
                 {kindLabel}
               </span>
             </div>
@@ -149,7 +149,7 @@ function TaskKindIcon({
 }) {
   return (
     <span
-      className={cn("inline-flex items-center justify-center", className)}
+      className={cn("stg:inline-flex stg:items-center stg:justify-center", className)}
       title={iconName}
       aria-hidden="true"
     >

package/src/workflow/WorkflowTaskPalette.tsx

@@ -86,12 +86,12 @@ export const WorkflowTaskPalette = memo(function WorkflowTaskPalette({
 
   if (isLoading) {
     return (
-      <div className={cn("stgm flex w-60 flex-col gap-3 border-r border-[var(--stgm-border-prominent,#d4d4d8)] bg-[var(--stgm-card,var(--stgm-background,#fff))] p-3", className)}>
+      <div className={cn("stgm stg:flex stg:w-60 stg:flex-col stg:gap-3 stg:border-r stg:border-[var(--stgm-border-prominent,#d4d4d8)] stg:bg-[var(--stgm-card,var(--stgm-background,#fff))] stg:p-3", className)}>
         {Array.from({ length: 4 }).map((_, i) => (
-          <div key={i} className="space-y-2">
-            <div className="h-4 w-20 animate-pulse rounded bg-[var(--stgm-muted,#f5f5f5)]" />
-            <div className="h-10 w-full animate-pulse rounded bg-[var(--stgm-muted,#f5f5f5)]" />
-            <div className="h-10 w-full animate-pulse rounded bg-[var(--stgm-muted,#f5f5f5)]" />
+          <div key={i} className="stg:space-y-2">
+            <div className="stg:h-4 stg:w-20 stg:animate-pulse stg:rounded stg:bg-[var(--stgm-muted,#f5f5f5)]" />
+            <div className="stg:h-10 stg:w-full stg:animate-pulse stg:rounded stg:bg-[var(--stgm-muted,#f5f5f5)]" />
+            <div className="stg:h-10 stg:w-full stg:animate-pulse stg:rounded stg:bg-[var(--stgm-muted,#f5f5f5)]" />
           </div>
         ))}
       </div>
@@ -100,14 +100,14 @@ export const WorkflowTaskPalette = memo(function WorkflowTaskPalette({
 
   if (error) {
     return (
-      <div className={cn("stgm flex w-60 flex-col items-center justify-center gap-2 border-r border-[var(--stgm-border-prominent,#d4d4d8)] bg-[var(--stgm-card,var(--stgm-background,#fff))] p-4", className)}>
-        <span className="text-xs text-[var(--stgm-destructive,#ef4444)]">
+      <div className={cn("stgm stg:flex stg:w-60 stg:flex-col stg:items-center stg:justify-center stg:gap-2 stg:border-r stg:border-[var(--stgm-border-prominent,#d4d4d8)] stg:bg-[var(--stgm-card,var(--stgm-background,#fff))] stg:p-4", className)}>
+        <span className="stg:text-xs stg:text-[var(--stgm-destructive,#ef4444)]">
           Failed to load task types
         </span>
         <button
           type="button"
           onClick={refetch}
-          className="rounded border border-[var(--stgm-border-prominent,#d4d4d8)] bg-[var(--stgm-card,var(--stgm-background,#fff))] px-2 py-1 text-xs text-[var(--stgm-foreground,#1a1a2e)] hover:bg-[var(--stgm-muted,#f5f5f5)]"
+          className="stg:rounded stg:border stg:border-[var(--stgm-border-prominent,#d4d4d8)] stg:bg-[var(--stgm-card,var(--stgm-background,#fff))] stg:px-2 stg:py-1 stg:text-xs stg:text-[var(--stgm-foreground,#1a1a2e)] stg:hover:bg-[var(--stgm-muted,#f5f5f5)]"
         >
           Retry
         </button>
@@ -118,24 +118,24 @@ export const WorkflowTaskPalette = memo(function WorkflowTaskPalette({
   return (
     <div
       className={cn(
-        "stgm flex w-60 shrink-0 flex-col border-r border-[var(--stgm-border-prominent,#d4d4d8)] bg-[var(--stgm-card,var(--stgm-background,#fff))]",
+        "stgm stg:flex stg:w-60 stg:shrink-0 stg:flex-col stg:border-r stg:border-[var(--stgm-border-prominent,#d4d4d8)] stg:bg-[var(--stgm-card,var(--stgm-background,#fff))]",
         className,
       )}
     >
-      <div className="border-b border-[var(--stgm-border-prominent,#d4d4d8)] p-2">
+      <div className="stg:border-b stg:border-[var(--stgm-border-prominent,#d4d4d8)] stg:p-2">
         <input
           type="search"
           placeholder="Search tasks…"
           value={searchQuery}
           onChange={handleSearchChange}
-          className="w-full rounded border border-[var(--stgm-border-prominent,#d4d4d8)] 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-[var(--stgm-border-prominent,#d4d4d8)] 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="flex-1 overflow-y-auto p-2">
+      <div className="stg:flex-1 stg:overflow-y-auto stg:p-2">
         {filteredCategories.length === 0 ? (
-          <div className="py-6 text-center text-xs text-[var(--stgm-muted-foreground,#737373)]">
+          <div className="stg:py-6 stg:text-center stg:text-xs stg:text-[var(--stgm-muted-foreground,#737373)]">
             {searchQuery ? "No matching tasks" : "No task types available"}
           </div>
         ) : (
@@ -172,24 +172,24 @@ function PaletteCategory({
   const categoryColor = CATEGORY_COLORS[category] ?? CATEGORY_COLORS.unspecified;
 
   return (
-    <div className="mb-2">
+    <div className="stg:mb-2">
       <button
         type="button"
         onClick={() => onToggle(category)}
-        className="flex w-full items-center gap-1.5 rounded px-1 py-1 text-left text-[11px] font-semibold uppercase tracking-wider text-[var(--stgm-muted-foreground,#737373)] hover:bg-[var(--stgm-muted,#f5f5f5)]"
+        className="stg:flex stg:w-full stg:items-center stg:gap-1.5 stg:rounded stg:px-1 stg:py-1 stg:text-left stg:text-[11px] stg:font-semibold stg:uppercase stg:tracking-wider stg:text-[var(--stgm-muted-foreground,#737373)] stg:hover:bg-[var(--stgm-muted,#f5f5f5)]"
         aria-expanded={!isCollapsed}
       >
         <span
-          className="inline-block h-2 w-2 rounded-full"
+          className="stg:inline-block stg:h-2 stg:w-2 stg:rounded-full"
           style={{ backgroundColor: categoryColor }}
           aria-hidden="true"
         />
         {CATEGORY_DISPLAY_NAMES[category]}
-        <span className="ml-auto text-[10px]">{isCollapsed ? "+" : "\u2212"}</span>
+        <span className="stg:ml-auto stg:text-[10px]">{isCollapsed ? "+" : "\u2212"}</span>
       </button>
 
       {!isCollapsed && (
-        <div className="mt-0.5 space-y-0.5" role="listbox" aria-label={CATEGORY_DISPLAY_NAMES[category]}>
+        <div className="stg:mt-0.5 stg:space-y-0.5" role="listbox" aria-label={CATEGORY_DISPLAY_NAMES[category]}>
           {descriptors.map((descriptor) => (
             <PaletteItem
               key={descriptor.kind}
@@ -226,20 +226,20 @@ function PaletteItem({
     <div
       draggable
       onDragStart={handleDragStart}
-      className="flex cursor-grab items-start gap-2 rounded border border-[var(--stgm-border-prominent,#d4d4d8)] bg-[var(--stgm-background,#fff)] px-2 py-1.5 transition-colors hover:bg-[var(--stgm-muted,#f5f5f5)] active:cursor-grabbing"
+      className="stg:flex stg:cursor-grab stg:items-start stg:gap-2 stg:rounded stg:border stg:border-[var(--stgm-border-prominent,#d4d4d8)] stg:bg-[var(--stgm-background,#fff)] stg:px-2 stg:py-1.5 stg:transition-colors stg:hover:bg-[var(--stgm-muted,#f5f5f5)] stg:active:cursor-grabbing"
       role="option"
       aria-label={`Drag to add ${descriptor.displayName} task`}
     >
       <span
-        className="mt-0.5 inline-block h-2.5 w-0.5 shrink-0 rounded-full"
+        className="stg:mt-0.5 stg:inline-block stg:h-2.5 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)]">
           {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)]">
           {descriptor.description}
         </div>
       </div>

package/src/workflow/WorkflowTaskReviewGate.tsx

@@ -150,11 +150,11 @@ function PayloadLoadingState({
       role="status"
       aria-label={`Loading review material for ${taskName}`}
       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,
       )}
     >
-      <div className="flex items-center gap-2 text-xs text-muted-foreground">
+      <div className="stg:flex stg:items-center stg:gap-2 stg:text-xs stg:text-muted-foreground">
         <Spinner />
         Loading review material…
       </div>
@@ -177,24 +177,24 @@ function PayloadErrorState({
     <div
       role="alert"
       className={cn(
-        "mt-2 rounded-lg border border-border-prominent border-l-2 border-l-destructive p-3",
+        "stg:mt-2 stg:rounded-lg stg:border stg:border-border-prominent stg:border-l-2 stg:border-l-destructive stg:p-3",
         className,
       )}
     >
-      <p className="text-xs font-medium text-foreground">
+      <p className="stg:text-xs stg:font-medium stg:text-foreground">
         Could not load the review material for {taskName}
       </p>
-      <p className="mt-1 break-words text-xs text-muted-foreground">{error.message}</p>
-      <p className="mt-1 text-xs text-muted-foreground">
+      <p className="stg:mt-1 stg:break-words stg:text-xs stg:text-muted-foreground">{error.message}</p>
+      <p className="stg:mt-1 stg:text-xs stg:text-muted-foreground">
         The gate stays pending — retry to load the material before deciding.
       </p>
       <button
         type="button"
         onClick={onRetry}
         className={cn(
-          "mt-2 rounded border border-border px-2 py-1 text-xs font-medium text-foreground",
-          "transition-colors hover:bg-muted",
-          "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+          "stg:mt-2 stg:rounded stg:border stg:border-border stg:px-2 stg:py-1 stg:text-xs stg:font-medium stg:text-foreground",
+          "stg:transition-colors stg:hover:bg-muted",
+          "stg:focus-visible:outline-none stg:focus-visible:ring-2 stg:focus-visible:ring-ring",
         )}
       >
         Retry
@@ -210,7 +210,7 @@ function Spinner() {
       height="12"
       viewBox="0 0 12 12"
       fill="none"
-      className="animate-spin"
+      className="stg:animate-spin"
       aria-hidden="true"
     >
       <circle

package/src/workflow/WorkflowVersionBadge.tsx

@@ -54,10 +54,10 @@ export const WorkflowVersionBadge = memo(function WorkflowVersionBadge({
   }, [versionHash]);
 
   return (
-    <span className={cn("inline-flex items-center gap-1.5", className)}>
+    <span className={cn("stg:inline-flex stg:items-center stg:gap-1.5", className)}>
       {isCurrent && (
         <span
-          className="size-2 shrink-0 rounded-full bg-status-ready"
+          className="stg:size-2 stg:shrink-0 stg:rounded-full stg:bg-status-ready"
           aria-label="Current version"
           title="Current version"
         />
@@ -68,17 +68,17 @@ export const WorkflowVersionBadge = memo(function WorkflowVersionBadge({
         onClick={handleCopy}
         title={copied ? "Copied!" : `Copy full hash: ${versionHash}`}
         className={cn(
-          "shrink-0 rounded bg-muted px-1.5 py-0.5 font-mono text-[11px] font-medium text-foreground transition-colors",
-          "hover:bg-accent-hover",
-          "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
-          copied && "bg-status-ready-subtle text-status-ready",
+          "stg:shrink-0 stg:rounded stg:bg-muted stg:px-1.5 stg:py-0.5 stg:font-mono stg:text-[11px] stg:font-medium stg:text-foreground stg:transition-colors",
+          "stg:hover:bg-accent-hover",
+          "stg:focus-visible:outline-none stg:focus-visible:ring-2 stg:focus-visible:ring-ring",
+          copied && "stg:bg-status-ready-subtle stg:text-status-ready",
         )}
       >
         {copied ? "copied" : truncated}
       </button>
 
       {tag && (
-        <span className="shrink-0 rounded-full bg-primary-subtle px-1.5 py-0.5 text-[10px] font-medium text-primary">
+        <span className="stg:shrink-0 stg:rounded-full stg:bg-primary-subtle stg:px-1.5 stg:py-0.5 stg:text-[10px] stg:font-medium stg:text-primary">
           {tag}
         </span>
       )}

package/src/workflow/WorkflowVersionDiffViewer.tsx

@@ -52,7 +52,7 @@ export function WorkflowVersionDiffViewer({
       <div
         role="alert"
         className={cn(
-          "rounded-lg border border-destructive/30 bg-destructive/5 px-4 py-3 text-sm text-destructive",
+          "stg:rounded-lg stg:border stg:border-destructive/30 stg:bg-destructive/5 stg:px-4 stg:py-3 stg:text-sm stg:text-destructive",
           className,
         )}
       >
@@ -66,7 +66,7 @@ export function WorkflowVersionDiffViewer({
       <div
         role="status"
         className={cn(
-          "flex items-center justify-center rounded-lg border border-border py-8 text-sm text-muted-foreground",
+          "stg:flex stg:items-center stg:justify-center stg:rounded-lg stg:border stg:border-border stg:py-8 stg:text-sm stg:text-muted-foreground",
           className,
         )}
       >
@@ -78,20 +78,20 @@ export function WorkflowVersionDiffViewer({
   return (
     <div
       className={cn(
-        "overflow-auto rounded-lg border border-border font-mono text-[13px] leading-[1.6]",
+        "stg:overflow-auto stg:rounded-lg stg:border stg:border-border stg:font-mono stg:text-[13px] stg:leading-[1.6]",
         className,
       )}
     >
       {/* Header */}
-      <div className="sticky top-0 z-10 flex items-center gap-2 border-b border-border bg-muted px-3 py-1.5 text-xs font-medium text-muted-foreground">
-        <code className="rounded bg-diff-removed-bg px-1 py-0.5">{hashA.slice(0, 8)}</code>
-        <ArrowIcon className="size-3 shrink-0" />
-        <code className="rounded bg-diff-added-bg px-1 py-0.5">{hashB.slice(0, 8)}</code>
+      <div className="stg:sticky stg:top-0 stg:z-10 stg:flex stg:items-center stg:gap-2 stg:border-b stg:border-border stg:bg-muted stg:px-3 stg:py-1.5 stg:text-xs stg:font-medium stg:text-muted-foreground">
+        <code className="stg:rounded stg:bg-diff-removed-bg stg:px-1 stg:py-0.5">{hashA.slice(0, 8)}</code>
+        <ArrowIcon className="stg:size-3 stg:shrink-0" />
+        <code className="stg:rounded stg:bg-diff-added-bg stg:px-1 stg:py-0.5">{hashB.slice(0, 8)}</code>
       </div>
 
       {/* Diff content */}
-      <table className="w-full border-collapse" role="table">
-        <thead className="sr-only">
+      <table className="stg:w-full stg:border-collapse" role="table">
+        <thead className="stg:sr-only">
           <tr>
             <th scope="col">Line</th>
             <th scope="col">Change</th>
@@ -113,8 +113,8 @@ export function WorkflowVersionDiffViewer({
 // ---------------------------------------------------------------------------
 
 const LINE_NUM_CLASSES =
-  "w-[1px] min-w-8 select-none whitespace-nowrap px-2 text-right text-[11px] text-muted-foreground-faint";
-const MARKER_CLASSES = "w-[1px] select-none px-1 text-center";
+  "stg:w-[1px] stg:min-w-8 stg:select-none stg:whitespace-nowrap stg:px-2 stg:text-right stg:text-[11px] stg:text-muted-foreground-faint";
+const MARKER_CLASSES = "stg:w-[1px] stg:select-none stg:px-1 stg:text-center";
 
 function DiffLineRow({
   line,
@@ -127,17 +127,17 @@ function DiffLineRow({
 
   const rowClass =
     line.type === "added"
-      ? "bg-diff-added-bg"
+      ? "stg:bg-diff-added-bg"
       : line.type === "removed"
-        ? "bg-diff-removed-bg"
+        ? "stg:bg-diff-removed-bg"
         : "";
 
   const markerColor =
     line.type === "added"
-      ? "text-diff-added-fg"
+      ? "stg:text-diff-added-fg"
       : line.type === "removed"
-        ? "text-diff-removed-fg"
-        : "text-muted-foreground-faint";
+        ? "stg:text-diff-removed-fg"
+        : "stg:text-muted-foreground-faint";
 
   const ariaLabel =
     line.type === "added"
@@ -152,7 +152,7 @@ function DiffLineRow({
       <td className={cn(MARKER_CLASSES, markerColor)} aria-hidden="true">
         {marker}
       </td>
-      <td className="whitespace-pre-wrap break-all px-2">{line.content}</td>
+      <td className="stg:whitespace-pre-wrap stg:break-all stg:px-2">{line.content}</td>
     </tr>
   );
 }
@@ -165,21 +165,21 @@ function DiffSkeleton({ className }: { readonly className?: string }) {
   return (
     <div
       className={cn(
-        "overflow-hidden rounded-lg border border-border",
+        "stg:overflow-hidden stg:rounded-lg stg:border stg:border-border",
         className,
       )}
       aria-busy="true"
       aria-label="Loading diff"
     >
-      <div className="border-b border-border bg-muted px-3 py-2">
-        <div className="h-4 w-48 animate-pulse rounded bg-muted-foreground/20" />
+      <div className="stg:border-b stg:border-border stg:bg-muted stg:px-3 stg:py-2">
+        <div className="stg:h-4 stg:w-48 stg:animate-pulse stg:rounded stg:bg-muted-foreground/20" />
       </div>
-      <div className="space-y-1 p-3">
+      <div className="stg:space-y-1 stg:p-3">
         {[1, 2, 3, 4, 5, 6].map((i) => (
-          <div key={i} className="flex gap-2">
-            <div className="h-4 w-6 animate-pulse rounded bg-muted" />
+          <div key={i} className="stg:flex stg:gap-2">
+            <div className="stg:h-4 stg:w-6 stg:animate-pulse stg:rounded stg:bg-muted" />
             <div
-              className="h-4 animate-pulse rounded bg-muted"
+              className="stg:h-4 stg:animate-pulse stg:rounded stg:bg-muted"
               style={{ width: `${40 + (i % 3) * 20}%` }}
             />
           </div>