@mastra/playground-ui 56.0.0-alpha.8 → 56.0.0

package/dist/components/Workflow.es.js

@@ -1,28 +1,29 @@
 import { createContext, useState, useEffect, useId, forwardRef, useRef, useContext } from 'react';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { Repeat2, Workflow, GitFork, ArrowRightLeft, CalendarClock, Timer, Bot, Wrench, Braces, CornerDownRight, GitBranch, RefreshCw, Repeat, Repeat1, Network, Layers, Clock, PlayCircle, List, ChevronRight, Database, Minus, Plus, Maximize, Pause, Loader2, StepForwardIcon, PlayIcon, AlertCircleIcon, MoreVerticalIcon, ShieldAlertIcon, RotateCcwIcon, Clock3Icon, BracesIcon, PanelRightIcon } from 'lucide-react';
-import { B as Badge } from '../Badge-BCwBpIc7.js';
-import { T as Txt } from '../Txt-hyo2FKuO.js';
-import { toSigFigs } from '../utils/number.es.js';
+import { B as Badge } from '../Badge-TD55_qZJ.js';
+import { T as Txt } from '../Txt-DTh3Pa_a.js';
+import { formatDuration } from '../utils/duration.es.js';
 import { C as Code } from '../code-D4Vw_fYq.js';
 import { formatTypeScript } from '../utils/formatting.es.js';
-import { C as CopyButton } from '../copy-button-DIeDskPU.js';
-import { c as cn } from '../cn-C6s2yXwM.js';
-import { a as ActivityWick } from '../activity-BiQKEDt0.js';
-import { C as Collapsible, b as CollapsibleTrigger, a as CollapsibleContent } from '../collapsible-C2RuZzc7.js';
-import { S as Shimmer } from '../shimmer-rej-NkeN.js';
+import { C as CopyButton } from '../copy-button-2cwdZ3dW.js';
+import { raisedSurfaceStyle, surfaceStateLayerStyle } from '../primitives/raised-surface.es.js';
+import { c as cn } from '../cn-65Adrsfj.js';
+import { a as ActivityWick } from '../activity-B8TfxRNU.js';
+import { C as Collapsible, b as CollapsibleTrigger, a as CollapsibleContent } from '../collapsible-B2uUy8w5.js';
+import { S as Shimmer } from '../shimmer-BN7Dzm37.js';
 import { javascript } from '@codemirror/lang-javascript';
 import { jsonLanguage } from '@codemirror/lang-json';
 import { EditorView } from '@codemirror/view';
 import ReactCodeMirror from '@uiw/react-codemirror';
-import { u as useCodemirrorTheme } from '../code-editor-CQqV40K3.js';
-import { B as Button } from '../Button-DS6O6fvU.js';
-import { D as Dialog, a as DialogContent, b as DialogHeader, c as DialogTitle, e as DialogBody } from '../dialog-C60a4DWO.js';
+import { u as useCodemirrorTheme } from '../code-editor-vCt7l9Bl.js';
+import { B as Button } from '../Button-cWcBEd-G.js';
+import { D as Dialog, a as DialogContent, b as DialogHeader, c as DialogTitle, e as DialogBody } from '../dialog-DRpMek34.js';
 import { Handle, Position, useInternalNode, getBezierPath, BaseEdge, EdgeLabelRenderer, useViewport, useReactFlow, useStore, Panel, useNodesInitialized, ReactFlow, Background, BackgroundVariant } from '@xyflow/react';
-import { S as Slider } from '../slider-DXQNsGXe.js';
+import { S as Slider } from '../slider-MM3K0Pyv.js';
 import '@xyflow/react/dist/style.css';
-import { S as Skeleton } from '../skeleton-BpMg6F4M.js';
-import { D as DropdownMenu } from '../dropdown-menu-B3nTlFnz.js';
+import { S as Skeleton } from '../skeleton-BsRAXyh5.js';
+import { D as DropdownMenu } from '../dropdown-menu-DL0MzjEb.js';
 
 const WorkflowCanvasInsetContext = createContext(0);
 function workflowFitOptions(leftInset, isInline = false) {
@@ -211,24 +212,32 @@ const getNodeIndicators = (props) => {
   return indicators;
 };
 
-const WorkflowClock = ({ startedAt, endedAt, isRunning = false }) => {
+const WorkflowClock = ({ startedAt, endedAt, isRunning = false, spansSuspension }) => {
   if (isRunning && endedAt === void 0 && Number.isFinite(startedAt)) {
-    return /* @__PURE__ */ jsx(RunningWorkflowClock, { startedAt }, startedAt);
+    return /* @__PURE__ */ jsx(RunningWorkflowClock, { startedAt, spansSuspension }, startedAt);
   }
-  return /* @__PURE__ */ jsx(ElapsedTime, { startedAt, endedAt });
+  return /* @__PURE__ */ jsx(ElapsedTime, { startedAt, endedAt, spansSuspension });
 };
-function RunningWorkflowClock({ startedAt }) {
+function RunningWorkflowClock({ startedAt, spansSuspension }) {
   const [time, setTime] = useState(() => Date.now());
   useEffect(() => {
     const interval = setInterval(() => setTime(Date.now()), 100);
     return () => clearInterval(interval);
   }, []);
-  return /* @__PURE__ */ jsx(ElapsedTime, { startedAt, endedAt: time });
+  return /* @__PURE__ */ jsx(ElapsedTime, { startedAt, endedAt: time, spansSuspension });
 }
-function ElapsedTime({ startedAt, endedAt }) {
-  const duration = endedAt === void 0 ? NaN : endedAt - startedAt;
-  const timeDiff = Number.isFinite(duration) && duration >= 0 ? duration : void 0;
-  return /* @__PURE__ */ jsx(Txt, { variant: "ui-xs", className: "text-neutral3 font-mono whitespace-nowrap", children: timeDiff === void 0 ? /* @__PURE__ */ jsx("span", { "aria-label": "Timing unavailable", children: "—" }) : `${toSigFigs(timeDiff, 3)}ms` });
+function ElapsedTime({ startedAt, endedAt, spansSuspension }) {
+  const elapsed = endedAt === void 0 ? void 0 : formatDuration(endedAt - startedAt);
+  return /* @__PURE__ */ jsx(
+    Txt,
+    {
+      variant: "meta",
+      tone: "muted",
+      className: "font-mono whitespace-nowrap",
+      title: elapsed && spansSuspension ? "Includes time spent suspended waiting for input" : void 0,
+      children: elapsed === void 0 ? /* @__PURE__ */ jsx("span", { "aria-label": "Timing unavailable", children: "—" }) : elapsed
+    }
+  );
 }
 
 function conditionExpression(condition) {
@@ -255,7 +264,7 @@ function FormattedConditionSource({ source }) {
   return /* @__PURE__ */ jsx(Code, { code: formatted ?? source, lang: formatted === void 0 ? void 0 : "typescript" });
 }
 
-const surfaceClasses = "rounded-[calc(var(--radius-xl)-2px)] bg-surface3 text-ui-xs";
+const surfaceClasses = "rounded-[calc(var(--radius-xl)-2px)] bg-card text-meta";
 function WorkflowConditionCardView({
   type,
   conditions,
@@ -278,12 +287,12 @@ function WorkflowConditionCardView({
   return /* @__PURE__ */ jsxs(
     "div",
     {
-      className: "border-border1 bg-surface2 shadow-panel has-focus-visible:outline-accent3 w-[274px] overflow-hidden rounded-xl border p-0.5 has-focus-visible:outline-2 has-focus-visible:outline-offset-4",
+      className: `${raisedSurfaceStyle} has-focus-visible:outline-accent3 w-[274px] overflow-hidden rounded-xl p-0.5 has-focus-visible:outline-2 has-focus-visible:outline-offset-4`,
       "data-workflow-node": true,
       "data-testid": "workflow-condition-node",
       "data-workflow-step-status": previousDisplayStatus ?? "idle",
       children: [
-        /* @__PURE__ */ jsxs("div", { className: "text-ui-xs text-neutral3 flex h-[46px] items-center gap-2 px-2.5", children: [
+        /* @__PURE__ */ jsxs("div", { className: "text-meta text-muted-foreground flex h-[46px] items-center gap-2 px-2.5", children: [
           /* @__PURE__ */ jsx(Badge, { size: "xs", variant: type === "else" ? "neutral" : "yellow", emphasis: "muted", icon: /* @__PURE__ */ jsx(Icon, { "aria-hidden": true }), children: label }),
           hasExpression && /* @__PURE__ */ jsxs(Fragment, { children: [
             /* @__PURE__ */ jsx("span", { className: "ml-auto", children: "Expression" }),
@@ -296,13 +305,13 @@ function WorkflowConditionCardView({
             role: "region",
             "aria-label": "Condition details",
             tabIndex: 0,
-            className: `${surfaceClasses} text-neutral5 nodrag nopan nowheel max-h-[220px] overflow-auto p-3.5 [&_pre]:leading-relaxed [&_pre]:whitespace-pre-wrap`,
+            className: `${surfaceClasses} text-foreground nodrag nopan nowheel max-h-[220px] overflow-auto p-3.5 [&_pre]:leading-relaxed [&_pre]:whitespace-pre-wrap`,
             children: sources.map(({ condition, expression, key }) => /* @__PURE__ */ jsxs("div", { children: [
               condition.conj && /* @__PURE__ */ jsx(Badge, { size: "xs", variant: "neutral", children: condition.conj.toUpperCase() }),
               condition.fnString !== void 0 ? /* @__PURE__ */ jsx(WorkflowConditionSource, { source: condition.fnString }) : /* @__PURE__ */ jsx(Code, { code: expression })
             ] }, key))
           }
-        ) : /* @__PURE__ */ jsx("p", { className: `${surfaceClasses} text-neutral3 p-3`, children: type === "else" ? "When no other branch matches" : "Condition expression unavailable" }),
+        ) : /* @__PURE__ */ jsx("p", { className: `${surfaceClasses} text-muted-foreground p-3`, children: type === "else" ? "When no other branch matches" : "Condition expression unavailable" }),
         actionBar && /* @__PURE__ */ jsx("div", { className: "nodrag nopan flex justify-end px-2.5 py-1.5 empty:hidden", children: actionBar })
       ]
     }
@@ -329,7 +338,7 @@ function DialTick({ angle, major, className, ...props }) {
       y1: inner.y,
       x2: outer.x,
       y2: outer.y,
-      className: cn(major ? "stroke-neutral2" : "stroke-border2", className),
+      className: cn(major ? "stroke-placeholder" : "stroke-border-strong", className),
       ...props
     }
   );
@@ -343,13 +352,13 @@ function DialHand({ angle, length }) {
       y1: DIAL_CENTER,
       x2: tip.x,
       y2: tip.y,
-      className: "stroke-neutral4 stroke-[1.5]",
+      className: "stroke-muted-foreground stroke-[1.5]",
       strokeLinecap: "round"
     }
   );
 }
 function DialFace({ tickAngles, children }) {
-  return /* @__PURE__ */ jsx("span", { className: "text-neutral4 block size-28 shrink-0", "aria-hidden": true, children: /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 116 116", fill: "none", className: "block size-full overflow-visible", children: [
+  return /* @__PURE__ */ jsx("span", { className: "text-muted-foreground block size-28 shrink-0", "aria-hidden": true, children: /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 116 116", fill: "none", className: "block size-full overflow-visible", children: [
     tickAngles.map((angle, index) => /* @__PURE__ */ jsx(DialTick, { angle, major: index % 5 === 0 }, angle)),
     children
   ] }) });
@@ -370,20 +379,20 @@ function DurationDial({ amount, unit }) {
       {
         angle: -120 + amount / scale * 240,
         major: true,
-        className: "stroke-neutral6 stroke-2",
+        className: "stroke-foreground stroke-2",
         strokeLinecap: "round"
       }
     ),
-    /* @__PURE__ */ jsxs("text", { x: DIAL_CENTER, y: 94, textAnchor: "middle", className: "fill-neutral3 text-ui-xs font-sans", children: [
+    /* @__PURE__ */ jsxs("text", { x: DIAL_CENTER, y: 94, textAnchor: "middle", className: "fill-muted-foreground text-meta font-body", children: [
       scale,
       " ",
       unit
     ] }),
-    /* @__PURE__ */ jsx("text", { x: DIAL_CENTER, y: 106, textAnchor: "middle", className: "fill-neutral2 text-ui-xs font-sans", children: "scale" })
+    /* @__PURE__ */ jsx("text", { x: DIAL_CENTER, y: 106, textAnchor: "middle", className: "fill-placeholder text-meta font-body", children: "scale" })
   ] });
 }
 
-const captionClasses = "text-ui-xs tracking-wider whitespace-nowrap text-neutral3 uppercase";
+const captionClasses = "text-meta tracking-wider whitespace-nowrap text-muted-foreground uppercase";
 function durationReading(duration) {
   if (duration < 1e3) return { amount: duration, unit: "ms" };
   if (duration < 6e4) return { amount: duration / 1e3, unit: "s" };
@@ -396,11 +405,11 @@ function TimingReading({
   caption,
   dial
 }) {
-  return /* @__PURE__ */ jsxs("span", { className: "text-neutral6 mt-1 flex min-h-[108px] items-center justify-between gap-1", children: [
+  return /* @__PURE__ */ jsxs("span", { className: "text-foreground mt-1 flex min-h-[108px] items-center justify-between gap-1", children: [
     /* @__PURE__ */ jsxs("span", { className: "z-10 flex min-w-0 flex-col gap-2", children: [
-      /* @__PURE__ */ jsxs("span", { className: "text-header-xl flex items-baseline gap-1 leading-none font-normal tracking-tighter whitespace-nowrap tabular-nums", children: [
+      /* @__PURE__ */ jsxs("span", { className: "text-display flex items-baseline gap-1 leading-none tracking-tighter whitespace-nowrap tabular-nums", children: [
         value,
-        /* @__PURE__ */ jsx("small", { className: "text-ui-xs text-neutral3 font-normal tracking-normal", children: unit })
+        /* @__PURE__ */ jsx("small", { className: "text-meta text-muted-foreground tracking-normal", children: unit })
       ] }),
       /* @__PURE__ */ jsx("span", { className: captionClasses, children: caption })
     ] }),
@@ -460,8 +469,8 @@ const statusLineClasses = {
   failed: "after:bg-negative1",
   tripwire: "after:bg-warning1",
   waiting: "after:bg-accent5",
-  paused: "after:bg-neutral3",
-  skipped: "after:bg-neutral3"
+  paused: "after:bg-muted-foreground",
+  skipped: "after:bg-muted-foreground"
 };
 const footerStatusClasses = {
   success: "text-positive1",
@@ -505,7 +514,7 @@ function WorkflowStepCardView(props) {
       className: cn(
         "relative isolate w-[274px]",
         isBodyExpanded && "w-[688px]",
-        isStacked && "pb-3 before:absolute before:inset-x-1.5 before:top-2 before:bottom-1.5 before:-z-10 before:rounded-xl before:border before:border-border1 before:bg-surface3 after:absolute after:inset-x-3 after:top-3.5 after:bottom-0 after:-z-20 after:rounded-xl after:border after:border-border1 after:bg-surface3"
+        isStacked && "pb-3 before:absolute before:inset-x-1.5 before:top-2 before:bottom-1.5 before:-z-10 before:rounded-xl before:border before:border-border before:bg-card after:absolute after:inset-x-3 after:top-3.5 after:bottom-0 after:-z-20 after:rounded-xl after:border after:border-border after:bg-card"
       ),
       children: /* @__PURE__ */ jsxs(
         Collapsible,
@@ -513,15 +522,15 @@ function WorkflowStepCardView(props) {
           open: expanded,
           onOpenChange: setExpanded,
           className: cn(
-            "relative rounded-xl border border-border1 bg-surface2 text-neutral5 shadow-panel transition-[border-color,box-shadow] [--card-radius:calc(var(--radius-xl)-2px)] motion-reduce:transition-none",
+            raisedSurfaceStyle,
+            "relative rounded-xl border border-transparent text-foreground transition-[border-color,background-color,box-shadow] [--card-radius:calc(var(--radius-xl)-2px)] motion-reduce:transition-none",
             "after:pointer-events-none after:absolute after:inset-x-4 after:-top-px after:h-px after:mask-x-from-76%",
             displayStatus && statusLineClasses[displayStatus],
             "has-focus-visible:outline-2 has-focus-visible:outline-offset-4 has-focus-visible:outline-accent3",
-            isSelected && "outline-1 outline-offset-4 outline-neutral3",
-            isBodyExpanded && "border-dashed border-neutral3/40 shadow-none",
+            isSelected && "outline-1 outline-offset-4 outline-border-focus",
+            isBodyExpanded && "border-dashed border-muted-foreground/40 shadow-none",
             isWaiting && "border-accent3",
-            isHovered && !isSelected && "border-border2 shadow-dialog",
-            hasActivity && "border-transparent"
+            isHovered && !isSelected && "bg-muted"
           ),
           "data-workflow-node": true,
           "data-workflow-step-key": stepKey,
@@ -546,15 +555,15 @@ function WorkflowStepCardView(props) {
                   "aria-pressed": onSelect ? Boolean(isSelected) : void 0,
                   onClick: onSelect,
                   children: [
-                    /* @__PURE__ */ jsxs("span", { className: "group-hover:bg-surface4 flex items-start justify-between gap-2.5 rounded-(--card-radius) px-3.5 py-3", children: [
-                      /* @__PURE__ */ jsx("span", { className: "text-ui-sm text-neutral6 min-w-0 font-semibold wrap-anywhere", title: label, children: /* @__PURE__ */ jsx(Shimmer, { active: isRunning, children: label }) }),
+                    /* @__PURE__ */ jsxs("span", { className: "group-hover:bg-fill-subtle flex items-start justify-between gap-2.5 rounded-(--card-radius) px-3.5 py-3", children: [
+                      /* @__PURE__ */ jsx("span", { className: "text-column text-foreground min-w-0 wrap-anywhere", title: label, children: /* @__PURE__ */ jsx(Shimmer, { active: isRunning, children: label }) }),
                       /* @__PURE__ */ jsx(WorkflowTypeBadge, { ...props })
                     ] }),
-                    /* @__PURE__ */ jsxs("span", { className: "bg-surface3 flex flex-col gap-2 rounded-t-(--card-radius) px-3.5 py-3 empty:py-1.5", children: [
-                      description && /* @__PURE__ */ jsx("span", { className: "text-ui-sm text-neutral3 wrap-anywhere", children: description }),
+                    /* @__PURE__ */ jsxs("span", { className: "bg-card flex flex-col gap-2 rounded-t-(--card-radius) px-3.5 py-3 empty:py-1.5", children: [
+                      description && /* @__PURE__ */ jsx("span", { className: "text-caption text-muted-foreground wrap-anywhere", children: description }),
                       /* @__PURE__ */ jsx(WorkflowTiming, { duration: props.duration, date: props.date }),
-                      isWaiting && /* @__PURE__ */ jsx("span", { className: "text-ui-xs text-accent3", children: "Next step in debug" }),
-                      isForEach && foreachProgress && /* @__PURE__ */ jsxs("span", { className: "text-ui-xs flex flex-col gap-2 py-1", children: [
+                      isWaiting && /* @__PURE__ */ jsx("span", { className: "text-meta text-accent3", children: "Next step in debug" }),
+                      isForEach && foreachProgress && /* @__PURE__ */ jsxs("span", { className: "text-meta flex flex-col gap-2 py-1", children: [
                         /* @__PURE__ */ jsxs("span", { children: [
                           /* @__PURE__ */ jsx("strong", { children: foreachProgress.completedCount }),
                           " of ",
@@ -564,14 +573,14 @@ function WorkflowStepCardView(props) {
                         foreachProgress.totalCount > 0 ? /* @__PURE__ */ jsx(
                           "progress",
                           {
-                            className: "bg-surface4 accent-positive1 [&::-moz-progress-bar]:bg-positive1 [&::-webkit-progress-bar]:bg-surface4 [&::-webkit-progress-value]:bg-positive1 h-1 w-full appearance-none border-0",
+                            className: "bg-muted accent-positive1 [&::-moz-progress-bar]:bg-positive1 [&::-webkit-progress-bar]:bg-muted [&::-webkit-progress-value]:bg-positive1 h-1 w-full appearance-none border-0",
                             "aria-label": `${label} completed items`,
                             value: foreachProgress.completedCount,
                             max: foreachProgress.totalCount
                           }
                         ) : /* @__PURE__ */ jsx("span", { children: "No items to process" })
                       ] }),
-                      capabilities.length > 0 && /* @__PURE__ */ jsx("span", { className: "text-ui-xs text-neutral3", children: capabilities.join(" · ") })
+                      capabilities.length > 0 && /* @__PURE__ */ jsx("span", { className: "text-meta text-muted-foreground", children: capabilities.join(" · ") })
                     ] })
                   ]
                 }
@@ -580,26 +589,43 @@ function WorkflowStepCardView(props) {
                 "div",
                 {
                   className: cn(
-                    "nodrag nopan flex min-h-7 items-center justify-between gap-2 bg-surface3 px-3.5 pb-2.5 text-ui-xs text-neutral3",
+                    "nodrag nopan flex min-h-7 items-center justify-between gap-2 bg-card px-3.5 pb-2.5 text-meta text-muted-foreground",
                     displayStatus && footerStatusClasses[displayStatus]
                   ),
                   children: [
                     /* @__PURE__ */ jsx("span", { role: "status", className: isRunning ? "sr-only motion-reduce:not-sr-only" : void 0, children: statusLabel }),
-                    startedAt !== void 0 && /* @__PURE__ */ jsx("span", { className: "ml-auto", children: /* @__PURE__ */ jsx(WorkflowClock, { startedAt, endedAt, isRunning }) }),
+                    startedAt !== void 0 && /* @__PURE__ */ jsx("span", { className: "ml-auto", children: /* @__PURE__ */ jsx(
+                      WorkflowClock,
+                      {
+                        startedAt,
+                        endedAt,
+                        isRunning,
+                        spansSuspension: props.spansSuspension
+                      }
+                    ) }),
                     actionBar
                   ]
                 }
               ),
               body && /* @__PURE__ */ jsxs(Fragment, { children: [
-                /* @__PURE__ */ jsxs(CollapsibleTrigger, { className: "nodrag nopan border-border1 bg-surface3 text-ui-sm hover:bg-surface4 flex min-h-11 w-full items-center justify-between border-t px-3.5 py-2.5 focus-visible:shadow-none focus-visible:ring-0", children: [
-                  /* @__PURE__ */ jsxs("span", { children: [
-                    expanded ? "Collapse" : "Expand",
-                    " ",
-                    isForEach ? "loop" : "workflow"
-                  ] }),
-                  /* @__PURE__ */ jsx(ChevronRight, { "aria-hidden": true, size: 14 })
-                ] }),
-                /* @__PURE__ */ jsx(CollapsibleContent, { className: "border-border1 h-[620px] overflow-hidden border-t border-dashed", children: body })
+                /* @__PURE__ */ jsxs(
+                  CollapsibleTrigger,
+                  {
+                    className: cn(
+                      surfaceStateLayerStyle,
+                      "nodrag nopan border-border bg-card text-caption flex min-h-11 w-full items-center justify-between border-t px-3.5 py-2.5 focus-visible:shadow-none focus-visible:ring-0"
+                    ),
+                    children: [
+                      /* @__PURE__ */ jsxs("span", { children: [
+                        expanded ? "Collapse" : "Expand",
+                        " ",
+                        isForEach ? "loop" : "workflow"
+                      ] }),
+                      /* @__PURE__ */ jsx(ChevronRight, { "aria-hidden": true, size: 14 })
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ jsx(CollapsibleContent, { className: "border-border h-[620px] overflow-hidden border-t border-dashed", children: body })
               ] })
             ] }),
             hasActivity && /* @__PURE__ */ jsx(
@@ -643,8 +669,8 @@ const WorkflowCodeContent = ({
   if (typeof data !== "string") {
     const content = JSON.stringify(data, null, 2);
     return /* @__PURE__ */ jsxs("div", { className: "relative overflow-auto", style: { maxHeight: 500 }, children: [
-      /* @__PURE__ */ jsx("div", { className: "bg-surface4 absolute top-2 right-2 z-10 rounded-full", children: /* @__PURE__ */ jsx(CopyButton, { content }) }),
-      /* @__PURE__ */ jsx("div", { className: "bg-surface4 rounded-lg p-4", children: /* @__PURE__ */ jsx(ReactCodeMirror, { value: content, theme, extensions: [jsonLanguage, EditorView.lineWrapping] }) })
+      /* @__PURE__ */ jsx("div", { className: "bg-muted absolute top-2 right-2 z-10 rounded-full", children: /* @__PURE__ */ jsx(CopyButton, { content }) }),
+      /* @__PURE__ */ jsx("div", { className: "bg-muted rounded-lg p-4", children: /* @__PURE__ */ jsx(ReactCodeMirror, { value: content, theme, extensions: [jsonLanguage, EditorView.lineWrapping] }) })
     ] });
   }
   const extensions = getExtensions(data);
@@ -655,8 +681,8 @@ const WorkflowCodeContent = ({
   } catch {
   }
   return /* @__PURE__ */ jsxs("div", { className: "relative overflow-auto", style: { maxHeight: 500 }, children: [
-    /* @__PURE__ */ jsx("div", { className: "bg-surface4 absolute top-2 right-2 z-10 rounded-full", children: /* @__PURE__ */ jsx(CopyButton, { content: data }) }),
-    /* @__PURE__ */ jsx("div", { className: "bg-surface4 rounded-lg p-4", children: /* @__PURE__ */ jsx(ReactCodeMirror, { value: displayContent, theme, extensions }) })
+    /* @__PURE__ */ jsx("div", { className: "bg-muted absolute top-2 right-2 z-10 rounded-full", children: /* @__PURE__ */ jsx(CopyButton, { content: data }) }),
+    /* @__PURE__ */ jsx("div", { className: "bg-muted rounded-lg p-4", children: /* @__PURE__ */ jsx(ReactCodeMirror, { value: displayContent, theme, extensions }) })
   ] });
 };
 
@@ -677,18 +703,23 @@ const WorkflowEdgeDataButton = ({
       Button,
       {
         size: "sm",
+        variant: "ghost",
         onClick: onInspect ?? (() => setIsOpen(true)),
         "aria-label": `View ${dataLabel}`,
         "aria-pressed": selected,
-        className: "border-border1 bg-surface3 text-neutral5 shadow-panel hover:bg-surface4 aria-pressed:border-neutral3 aria-pressed:bg-surface4 h-7 rounded-lg border px-2",
+        className: cn(
+          raisedSurfaceStyle,
+          surfaceStateLayerStyle,
+          "text-foreground aria-pressed:before:bg-fill h-7 rounded-lg px-2"
+        ),
         icon: /* @__PURE__ */ jsx(Database, { className: "text-accent1" }),
         children: "Data"
       }
     ),
     /* @__PURE__ */ jsx(Dialog, { open: isOpen, onOpenChange: setIsOpen, children: /* @__PURE__ */ jsxs(DialogContent, { className: "w-full max-w-3xl", children: [
       /* @__PURE__ */ jsx(DialogHeader, { children: /* @__PURE__ */ jsx(DialogTitle, { children: "Step output" }) }),
-      /* @__PURE__ */ jsx(DialogBody, { className: "overflow-auto", style: { maxHeight: 700 }, children: /* @__PURE__ */ jsxs("div", { className: "border-border1 bg-surface2 min-w-0 rounded-lg border p-3", children: [
-        /* @__PURE__ */ jsx(Txt, { variant: "ui-sm", className: "text-neutral5 mb-2 block", children: dataLabel }),
+      /* @__PURE__ */ jsx(DialogBody, { className: "overflow-auto", style: { maxHeight: 700 }, children: /* @__PURE__ */ jsxs("div", { className: "border-border bg-background min-w-0 rounded-lg border p-3", children: [
+        /* @__PURE__ */ jsx(Txt, { variant: "caption", tone: "ink", className: "mb-2 block", children: dataLabel }),
         /* @__PURE__ */ jsx(WorkflowCodeContent, { data: output })
       ] }) })
     ] }) })
@@ -708,10 +739,10 @@ const WorkflowBoundaryNode = ({ data }) => {
         "data-workflow-boundary-node": true,
         "data-testid": `workflow-boundary-${data.boundaryRole}`,
         className: cn(
-          "relative flex h-[38px] w-28 items-center justify-center text-neutral4 after:absolute after:inset-x-0 after:mask-x-from-60%",
-          isStart ? "after:bottom-0 after:h-px after:bg-neutral3" : "after:top-0 after:h-1 after:border-y after:border-neutral3"
+          "relative flex h-[38px] w-28 items-center justify-center text-muted-foreground after:absolute after:inset-x-0 after:mask-x-from-60%",
+          isStart ? "after:bottom-0 after:h-px after:bg-muted-foreground" : "after:top-0 after:h-1 after:border-y after:border-muted-foreground"
         ),
-        children: /* @__PURE__ */ jsx(Txt, { variant: "ui-xs", className: "font-medium", children: data.label })
+        children: /* @__PURE__ */ jsx(Txt, { variant: "meta", children: data.label })
       }
     ),
     isStart && /* @__PURE__ */ jsx(Handle, { type: "source", position: Position.Bottom, style: { visibility: "hidden" } })
@@ -742,7 +773,7 @@ function WorkflowDataEdgeView({ output, label, dataControl, ...props }) {
   const labelY = labelPlacement === "source" ? sourceY + Math.min(24, Math.max(0, (targetY - sourceY) / 4)) : midpointY;
   const arrowId = useId();
   const isExecuted = props.data?.edgeStatus === "success";
-  const pathColor = isExecuted ? "color-mix(in oklab, var(--positive1) 82%, var(--neutral6))" : "var(--neutral3)";
+  const pathColor = isExecuted ? "color-mix(in oklab, var(--positive1) 82%, var(--foreground))" : "var(--muted-foreground)";
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsx("marker", { id: arrowId, viewBox: "0 0 10 10", refX: "9", refY: "5", markerWidth: "5", markerHeight: "5", orient: "auto", children: /* @__PURE__ */ jsx("path", { d: "M1 1 L9 5 L1 9 Z", fill: pathColor }) }) }),
     /* @__PURE__ */ jsx(
@@ -810,9 +841,9 @@ function WorkflowGraphGroups({ nodes, groups }) {
         return /* @__PURE__ */ jsx(
           "div",
           {
-            className: "border-neutral3/25 bg-neutral3/3 absolute rounded-xl border border-dashed",
+            className: "border-muted-foreground/25 bg-muted-foreground/3 absolute rounded-xl border border-dashed",
             style: { transform: `translate(${left}px, ${top}px)`, width: right - left, height: bottom - top },
-            children: /* @__PURE__ */ jsxs("div", { className: "text-ui-xs text-neutral3 flex items-center gap-2 px-5 py-4", children: [
+            children: /* @__PURE__ */ jsxs("div", { className: "text-meta text-muted-foreground flex items-center gap-2 px-5 py-4", children: [
               /* @__PURE__ */ jsx(Badge, { size: "xs", variant: "blue", emphasis: "muted", icon: /* @__PURE__ */ jsx(GitFork, { "aria-hidden": true }), children: group.label }),
               /* @__PURE__ */ jsx("span", { children: group.description })
             ] })
@@ -834,7 +865,7 @@ const ZoomSlider = forwardRef(({ className, compact = false, onFitView, ...props
     {
       ref,
       className: cn(
-        "flex items-center gap-1 rounded-full border border-border1 bg-surface2 p-1 text-neutral6",
+        "flex items-center gap-1 rounded-full border border-border bg-background p-1 text-foreground",
         className
       ),
       ...props,
@@ -966,7 +997,7 @@ function WorkflowGraphCanvas({
       ref: graphRef,
       tabIndex: -1,
       "data-testid": "workflow-graph-viewport",
-      className: cn("size-full outline-none", variant === "nested" ? "bg-surface1" : "bg-surface2"),
+      className: cn("size-full outline-none", variant === "nested" ? "bg-sidebar" : "bg-background"),
       children: /* @__PURE__ */ jsxs(
         ReactFlow,
         {
@@ -1030,12 +1061,12 @@ function WorkflowDebugControls({
   const nextStepFallback = canRunNextStep ? "Ready to advance" : "Next step unavailable";
   const actionsDisabled = !canRunNextStep || isStreaming || disabled;
   return /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-col gap-3", "data-testid": "workflow-debug-step-controls", children: [
-    /* @__PURE__ */ jsxs("div", { className: "border-border1/50 bg-surface2 rounded-xl border p-3", children: [
+    /* @__PURE__ */ jsxs("div", { className: "border-border/50 bg-background rounded-xl border p-3", children: [
       /* @__PURE__ */ jsxs("div", { className: "mb-2 flex flex-wrap items-center justify-between gap-2", children: [
-        /* @__PURE__ */ jsx("span", { className: "text-ui-xs text-neutral3", children: "Next step" }),
+        /* @__PURE__ */ jsx("span", { className: "text-meta text-muted-foreground", children: "Next step" }),
         /* @__PURE__ */ jsx(Badge, { size: "sm", icon: /* @__PURE__ */ jsx(Pause, {}), emphasis: "muted", children: "Step by step" })
       ] }),
-      /* @__PURE__ */ jsx("div", { className: "text-ui-md text-neutral5 font-medium break-words", "aria-live": "polite", children: nextStepLabel || nextStepFallback })
+      /* @__PURE__ */ jsx("div", { className: "text-subheading text-foreground break-words", "aria-live": "polite", children: nextStepLabel || nextStepFallback })
     ] }),
     /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
       /* @__PURE__ */ jsx(