@datatechsolutions/ui 3.13.0 → 3.14.0

package/dist/{chunk-MQDCUBVW.js → chunk-ZIRD3X6G.js}

@@ -1,10 +1,10 @@
 "use client";
 'use strict';
 
-var chunkD5OTZGA2_js = require('./chunk-D5OTZGA2.js');
-var chunk5ETT54QS_js = require('./chunk-5ETT54QS.js');
+var chunk5SCZB5UI_js = require('./chunk-5SCZB5UI.js');
+var chunkFZUV7GNB_js = require('./chunk-FZUV7GNB.js');
 var chunkY5VN4SPH_js = require('./chunk-Y5VN4SPH.js');
-var chunkBHOT22QL_js = require('./chunk-BHOT22QL.js');
+var chunkMXQ2EYG2_js = require('./chunk-MXQ2EYG2.js');
 var chunk72SWXOD5_js = require('./chunk-72SWXOD5.js');
 var react = require('react');
 var react$1 = require('@xyflow/react');
@@ -41,11 +41,11 @@ var ModelProviderFlowNode = react.memo(function ModelProviderFlowNode2({ id, dat
   const isCompact = data.displayMode === "compact";
   if (!config) {
     return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-      /* @__PURE__ */ jsxRuntime.jsx(chunkD5OTZGA2_js.NodeRunningIndicator, { nodeId: id }),
-      /* @__PURE__ */ jsxRuntime.jsx(chunkD5OTZGA2_js.WorkflowHandle, { type: "target", position: react$1.Position.Left, id: "left-in", colorClass: "!bg-gray-400 dark:!bg-gray-500" }),
-      /* @__PURE__ */ jsxRuntime.jsx(chunkD5OTZGA2_js.WorkflowHandle, { type: "target", position: react$1.Position.Top, id: "top-in", colorClass: "!bg-gray-400 dark:!bg-gray-500" }),
-      /* @__PURE__ */ jsxRuntime.jsx(chunkD5OTZGA2_js.NodeCard, { variant: "error", nodeType: "model_provider", width: "w-[280px]", children: /* @__PURE__ */ jsxRuntime.jsx(
-        chunkD5OTZGA2_js.NodeCardHeader,
+      /* @__PURE__ */ jsxRuntime.jsx(chunk5SCZB5UI_js.NodeRunningIndicator, { nodeId: id }),
+      /* @__PURE__ */ jsxRuntime.jsx(chunk5SCZB5UI_js.WorkflowHandle, { type: "target", position: react$1.Position.Left, id: "left-in", colorClass: "!bg-gray-400 dark:!bg-gray-500" }),
+      /* @__PURE__ */ jsxRuntime.jsx(chunk5SCZB5UI_js.WorkflowHandle, { type: "target", position: react$1.Position.Top, id: "top-in", colorClass: "!bg-gray-400 dark:!bg-gray-500" }),
+      /* @__PURE__ */ jsxRuntime.jsx(chunk5SCZB5UI_js.NodeCard, { variant: "error", nodeType: "model_provider", width: "w-[280px]", children: /* @__PURE__ */ jsxRuntime.jsx(
+        chunk5SCZB5UI_js.NodeCardHeader,
         {
           icon: /* @__PURE__ */ jsxRuntime.jsx(outline.ExclamationTriangleIcon, { className: "h-6 w-6 text-white" }),
           title: data.label || "Model Provider",
@@ -53,8 +53,8 @@ var ModelProviderFlowNode = react.memo(function ModelProviderFlowNode2({ id, dat
           iconClassName: "flex h-11 w-11 items-center justify-center rounded-xl bg-gradient-to-br from-amber-400 to-orange-500 shadow-lg"
         }
       ) }),
-      /* @__PURE__ */ jsxRuntime.jsx(chunkD5OTZGA2_js.WorkflowHandle, { type: "source", position: react$1.Position.Right, id: "right-out", colorClass: "!bg-slate-500" }),
-      /* @__PURE__ */ jsxRuntime.jsx(chunkD5OTZGA2_js.WorkflowHandle, { type: "source", position: react$1.Position.Bottom, id: "bottom-out", colorClass: "!bg-slate-500" })
+      /* @__PURE__ */ jsxRuntime.jsx(chunk5SCZB5UI_js.WorkflowHandle, { type: "source", position: react$1.Position.Right, id: "right-out", colorClass: "!bg-slate-500" }),
+      /* @__PURE__ */ jsxRuntime.jsx(chunk5SCZB5UI_js.WorkflowHandle, { type: "source", position: react$1.Position.Bottom, id: "bottom-out", colorClass: "!bg-slate-500" })
     ] });
   }
   const providerLabel = PROVIDER_TYPE_LABELS[config.providerType] ?? config.providerType;
@@ -63,18 +63,18 @@ var ModelProviderFlowNode = react.memo(function ModelProviderFlowNode2({ id, dat
   const isConfigured = !!(config.credentialRef || config.apiKeyRef);
   const logo = PROVIDER_LOGOS[config.providerType];
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-    /* @__PURE__ */ jsxRuntime.jsx(chunkD5OTZGA2_js.NodeRunningIndicator, { nodeId: id }),
-    /* @__PURE__ */ jsxRuntime.jsx(chunkD5OTZGA2_js.WorkflowHandle, { type: "target", position: react$1.Position.Left, id: "left-in", colorClass: "!bg-gray-400 dark:!bg-gray-500" }),
-    /* @__PURE__ */ jsxRuntime.jsx(chunkD5OTZGA2_js.WorkflowHandle, { type: "target", position: react$1.Position.Top, id: "top-in", colorClass: "!bg-gray-400 dark:!bg-gray-500" }),
+    /* @__PURE__ */ jsxRuntime.jsx(chunk5SCZB5UI_js.NodeRunningIndicator, { nodeId: id }),
+    /* @__PURE__ */ jsxRuntime.jsx(chunk5SCZB5UI_js.WorkflowHandle, { type: "target", position: react$1.Position.Left, id: "left-in", colorClass: "!bg-gray-400 dark:!bg-gray-500" }),
+    /* @__PURE__ */ jsxRuntime.jsx(chunk5SCZB5UI_js.WorkflowHandle, { type: "target", position: react$1.Position.Top, id: "top-in", colorClass: "!bg-gray-400 dark:!bg-gray-500" }),
     /* @__PURE__ */ jsxRuntime.jsx(
       "button",
       {
         type: "button",
         onClick: () => data.onEdit?.(id),
         className: "w-full text-left",
-        children: /* @__PURE__ */ jsxRuntime.jsxs(chunkD5OTZGA2_js.NodeCard, { compact: isCompact, selected, nodeType: "model_provider", width: "w-[280px]", children: [
+        children: /* @__PURE__ */ jsxRuntime.jsxs(chunk5SCZB5UI_js.NodeCard, { compact: isCompact, selected, nodeType: "model_provider", width: "w-[280px]", children: [
           /* @__PURE__ */ jsxRuntime.jsx(
-            chunkD5OTZGA2_js.NodeCardHeader,
+            chunk5SCZB5UI_js.NodeCardHeader,
             {
               icon: logo ? /* @__PURE__ */ jsxRuntime.jsx("img", { src: logo, alt: providerLabel, className: "h-6 w-6 object-contain", loading: "lazy" }) : /* @__PURE__ */ jsxRuntime.jsx(outline.KeyIcon, { className: "h-6 w-6 text-white" }),
               title: displayName,
@@ -82,11 +82,11 @@ var ModelProviderFlowNode = react.memo(function ModelProviderFlowNode2({ id, dat
               iconClassName: `flex h-11 w-11 items-center justify-center rounded-xl shadow-lg ${logo ? "bg-white/10 dark:bg-white/5 p-2" : "bg-gradient-to-br from-slate-600 to-slate-700 p-1.5"}`
             }
           ),
-          /* @__PURE__ */ jsxRuntime.jsx(chunkD5OTZGA2_js.NodeCardMeta, { compact: isCompact, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-wrap items-center gap-1.5", children: [
-            /* @__PURE__ */ jsxRuntime.jsx(chunkBHOT22QL_js.Badge, { color: "zinc", size: "xs", children: providerLabel }),
-            regionLabel && /* @__PURE__ */ jsxRuntime.jsx(chunkBHOT22QL_js.Badge, { color: "zinc", size: "xs", children: regionLabel }),
-            /* @__PURE__ */ jsxRuntime.jsx(chunkBHOT22QL_js.Badge, { color: isConfigured ? "green" : "amber", size: "xs", children: isConfigured ? "Configured" : "Setup needed" }),
-            config.modelFilter && config.modelFilter.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs(chunkBHOT22QL_js.Badge, { color: "zinc", size: "xs", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(chunk5SCZB5UI_js.NodeCardMeta, { compact: isCompact, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-wrap items-center gap-1.5", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(chunkMXQ2EYG2_js.Badge, { color: "zinc", size: "xs", children: providerLabel }),
+            regionLabel && /* @__PURE__ */ jsxRuntime.jsx(chunkMXQ2EYG2_js.Badge, { color: "zinc", size: "xs", children: regionLabel }),
+            /* @__PURE__ */ jsxRuntime.jsx(chunkMXQ2EYG2_js.Badge, { color: isConfigured ? "green" : "amber", size: "xs", children: isConfigured ? "Configured" : "Setup needed" }),
+            config.modelFilter && config.modelFilter.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs(chunkMXQ2EYG2_js.Badge, { color: "zinc", size: "xs", children: [
               config.modelFilter.length,
               " models"
             ] })
@@ -94,8 +94,8 @@ var ModelProviderFlowNode = react.memo(function ModelProviderFlowNode2({ id, dat
         ] })
       }
     ),
-    /* @__PURE__ */ jsxRuntime.jsx(chunkD5OTZGA2_js.WorkflowHandle, { type: "source", position: react$1.Position.Right, id: "right-out", colorClass: "!bg-slate-500" }),
-    /* @__PURE__ */ jsxRuntime.jsx(chunkD5OTZGA2_js.WorkflowHandle, { type: "source", position: react$1.Position.Bottom, id: "bottom-out", colorClass: "!bg-slate-500" })
+    /* @__PURE__ */ jsxRuntime.jsx(chunk5SCZB5UI_js.WorkflowHandle, { type: "source", position: react$1.Position.Right, id: "right-out", colorClass: "!bg-slate-500" }),
+    /* @__PURE__ */ jsxRuntime.jsx(chunk5SCZB5UI_js.WorkflowHandle, { type: "source", position: react$1.Position.Bottom, id: "bottom-out", colorClass: "!bg-slate-500" })
   ] });
 });
 var S3WriteFlowNode = react.memo(function S3WriteFlowNode2({ id, data, selected }) {
@@ -104,10 +104,10 @@ var S3WriteFlowNode = react.memo(function S3WriteFlowNode2({ id, data, selected
   const isCompact = data.displayMode === "compact";
   const keyPreview = config.key ? config.key.slice(0, 30) : "";
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-    /* @__PURE__ */ jsxRuntime.jsx(chunkD5OTZGA2_js.NodeRunningIndicator, { nodeId: id }),
-    /* @__PURE__ */ jsxRuntime.jsx(chunkD5OTZGA2_js.WorkflowHandle, { type: "target", position: react$1.Position.Left, id: "left-in", colorClass: "!bg-cyan-500" }),
+    /* @__PURE__ */ jsxRuntime.jsx(chunk5SCZB5UI_js.NodeRunningIndicator, { nodeId: id }),
+    /* @__PURE__ */ jsxRuntime.jsx(chunk5SCZB5UI_js.WorkflowHandle, { type: "target", position: react$1.Position.Left, id: "left-in", colorClass: "!bg-cyan-500" }),
     /* @__PURE__ */ jsxRuntime.jsxs(
-      chunkD5OTZGA2_js.NodeInteractiveCard,
+      chunk5SCZB5UI_js.NodeInteractiveCard,
       {
         nodeId: id,
         onEdit,
@@ -116,27 +116,27 @@ var S3WriteFlowNode = react.memo(function S3WriteFlowNode2({ id, data, selected
         nodeType: "s3_write",
         children: [
           /* @__PURE__ */ jsxRuntime.jsx(
-            chunkD5OTZGA2_js.NodeCardHeader,
+            chunk5SCZB5UI_js.NodeCardHeader,
             {
-              icon: /* @__PURE__ */ jsxRuntime.jsx(chunkD5OTZGA2_js.NodeIconBubble, { tone: "s3_write", children: /* @__PURE__ */ jsxRuntime.jsx(outline.CloudArrowUpIcon, { className: "h-5 w-5 text-white" }) }),
+              icon: /* @__PURE__ */ jsxRuntime.jsx(chunk5SCZB5UI_js.NodeIconBubble, { tone: "s3_write", children: /* @__PURE__ */ jsxRuntime.jsx(outline.CloudArrowUpIcon, { className: "h-5 w-5 text-white" }) }),
               title: label,
               description: t("s3WriteNodeDescription"),
               compact: isCompact,
               iconClassName: ""
             }
           ),
-          /* @__PURE__ */ jsxRuntime.jsxs(chunkD5OTZGA2_js.NodeCardMeta, { compact: isCompact, children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(chunk5SCZB5UI_js.NodeCardMeta, { compact: isCompact, children: [
             /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
-              /* @__PURE__ */ jsxRuntime.jsx(chunkD5OTZGA2_js.NodeCardBadge, { tone: "s3_write", children: t("s3WriteNode") }),
-              config.bucket && /* @__PURE__ */ jsxRuntime.jsx(chunkD5OTZGA2_js.NodeCardBadge, { tone: "s3_write", soft: true, children: config.bucket }),
+              /* @__PURE__ */ jsxRuntime.jsx(chunk5SCZB5UI_js.NodeCardBadge, { tone: "s3_write", children: t("s3WriteNode") }),
+              config.bucket && /* @__PURE__ */ jsxRuntime.jsx(chunk5SCZB5UI_js.NodeCardBadge, { tone: "s3_write", soft: true, children: config.bucket }),
               keyPreview && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate text-[10px] text-gray-400 dark:text-gray-500", children: keyPreview })
             ] }),
-            /* @__PURE__ */ jsxRuntime.jsx(chunkD5OTZGA2_js.NodeCardDeleteAction, { nodeId: id, onDelete })
+            /* @__PURE__ */ jsxRuntime.jsx(chunk5SCZB5UI_js.NodeCardDeleteAction, { nodeId: id, onDelete })
           ] })
         ]
       }
     ),
-    /* @__PURE__ */ jsxRuntime.jsx(chunkD5OTZGA2_js.WorkflowHandle, { type: "source", position: react$1.Position.Right, id: "right-out", colorClass: "!bg-cyan-500" })
+    /* @__PURE__ */ jsxRuntime.jsx(chunk5SCZB5UI_js.WorkflowHandle, { type: "source", position: react$1.Position.Right, id: "right-out", colorClass: "!bg-cyan-500" })
   ] });
 });
 function AnthropicModelIcon({ className }) {
@@ -200,7 +200,7 @@ function OutputSchemaBuilder({ value, onChange, depth = 0 }) {
     return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "rounded-xl border border-dashed border-slate-300 bg-slate-50/40 p-4 text-center dark:border-slate-700 dark:bg-slate-900/30", children: [
       /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mb-3 text-xs text-slate-500 dark:text-slate-400", children: "No schema yet \u2014 agent text is exposed as a raw string. Add a schema to enforce structured output." }),
       /* @__PURE__ */ jsxRuntime.jsx(
-        chunkBHOT22QL_js.Button,
+        chunkMXQ2EYG2_js.Button,
         {
           type: "button",
           outline: true,
@@ -264,7 +264,7 @@ function OutputSchemaBuilder({ value, onChange, depth = 0 }) {
         },
         index
       )),
-      /* @__PURE__ */ jsxRuntime.jsx(chunkBHOT22QL_js.Button, { type: "button", outline: true, onClick: addField, children: "+ Add field" })
+      /* @__PURE__ */ jsxRuntime.jsx(chunkMXQ2EYG2_js.Button, { type: "button", outline: true, onClick: addField, children: "+ Add field" })
     ] })
   ] });
 }
@@ -287,7 +287,7 @@ function FieldEditor({
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "rounded-xl border border-slate-200 bg-slate-50/60 p-3 dark:border-slate-700 dark:bg-slate-900/40", children: [
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-[1fr_140px_auto_auto] items-end gap-2", children: [
       /* @__PURE__ */ jsxRuntime.jsx(
-        chunk5ETT54QS_js.FormInput,
+        chunkFZUV7GNB_js.FormInput,
         {
           label: "Name",
           value: field.name,
@@ -296,7 +296,7 @@ function FieldEditor({
         }
       ),
       /* @__PURE__ */ jsxRuntime.jsx(
-        chunk5ETT54QS_js.FormSelect,
+        chunkFZUV7GNB_js.FormSelect,
         {
           label: "Type",
           value: field.type,
@@ -316,10 +316,10 @@ function FieldEditor({
         ),
         "Required"
       ] }),
-      /* @__PURE__ */ jsxRuntime.jsx(chunkBHOT22QL_js.Button, { type: "button", plain: true, onClick: onRemove, children: "Remove" })
+      /* @__PURE__ */ jsxRuntime.jsx(chunkMXQ2EYG2_js.Button, { type: "button", plain: true, onClick: onRemove, children: "Remove" })
     ] }),
     /* @__PURE__ */ jsxRuntime.jsx(
-      chunk5ETT54QS_js.FormInput,
+      chunkFZUV7GNB_js.FormInput,
       {
         label: "Description (optional)",
         value: field.description,
@@ -501,17 +501,17 @@ function AgentCapabilityCard({ elo, setElo, models, selectedModelId, setSelected
   }, [family, models, setSelectedModelId, setTemperature, onChanged]);
   const currentFamilyEntry = family.find((entry) => selectedModelId.startsWith(entry.prefix)) ?? family[0];
   const currentModelName = models.find((model) => model.id === selectedModelId)?.name ?? selectedModelId;
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mx-4 mt-4 overflow-hidden rounded-xl border border-gray-200/30 bg-white/40 dark:border-white/10 dark:bg-white/5", children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mx-4 mt-4 overflow-hidden rounded-xl border border-slate-200/30 bg-white/40 dark:border-white/10 dark:bg-white/5", children: [
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "px-4 pt-3 pb-2", children: [
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-1 flex items-center justify-between", children: [
-        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[10px] font-semibold uppercase tracking-wider text-gray-500 dark:text-gray-400", children: t("agentDrawer.capabilityRating") }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[10px] font-semibold uppercase tracking-wider text-slate-500 dark:text-slate-400", children: t("agentDrawer.capabilityRating") }),
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-baseline gap-1", children: [
           /* @__PURE__ */ jsxRuntime.jsx("span", { className: `text-lg font-bold tabular-nums ${tierInfo.color}`, children: elo }),
-          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[10px] text-gray-400 dark:text-gray-500", children: "ELO" })
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[10px] text-slate-400 dark:text-slate-500", children: "ELO" })
         ] })
       ] }),
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "absolute inset-x-0 top-1/2 h-2 -translate-y-1/2 overflow-hidden rounded-full bg-gray-200 dark:bg-gray-700", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "absolute inset-x-0 top-1/2 h-2 -translate-y-1/2 overflow-hidden rounded-full bg-slate-200 dark:bg-slate-700", children: [
           /* @__PURE__ */ jsxRuntime.jsx(
             "div",
             {
@@ -522,7 +522,7 @@ function AgentCapabilityCard({ elo, setElo, models, selectedModelId, setSelected
           [1200, 1600, 2e3].map((boundary) => /* @__PURE__ */ jsxRuntime.jsx(
             "div",
             {
-              className: "absolute top-0 h-full w-px bg-gray-400/40 dark:bg-gray-500/40",
+              className: "absolute top-0 h-full w-px bg-slate-400/40 dark:bg-slate-500/40",
               style: { left: `${(boundary - 800) / (2400 - 800) * 100}%` }
             },
             boundary
@@ -542,12 +542,12 @@ function AgentCapabilityCard({ elo, setElo, models, selectedModelId, setSelected
             "aria-valuemax": 2400,
             "aria-valuenow": elo,
             "aria-valuetext": `${elo} ELO \u2014 ${t(`agentDrawer.tier${tierInfo.tierKey.charAt(0).toUpperCase()}${tierInfo.tierKey.slice(1)}`)}`,
-            className: "relative z-10 h-5 w-full cursor-pointer appearance-none bg-transparent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2 [&::-webkit-slider-thumb]:h-4 [&::-webkit-slider-thumb]:w-4 [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:border-2 [&::-webkit-slider-thumb]:border-white [&::-webkit-slider-thumb]:shadow-lg dark:[&::-webkit-slider-thumb]:border-gray-900"
+            className: "relative z-10 h-5 w-full cursor-pointer appearance-none bg-transparent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500/70 focus-visible:ring-offset-1 [&::-webkit-slider-thumb]:h-4 [&::-webkit-slider-thumb]:w-4 [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:border-2 [&::-webkit-slider-thumb]:border-white [&::-webkit-slider-thumb]:shadow-lg dark:[&::-webkit-slider-thumb]:border-slate-900"
           }
         ),
         /* @__PURE__ */ jsxRuntime.jsx("style", { children: `input[type="range"]::-webkit-slider-thumb { background: ${elo < 1200 ? "#06b6d4" : elo < 1600 ? "#ec4899" : elo < 2e3 ? "#f59e0b" : "#10b981"}; box-shadow: 0 0 6px ${elo < 1200 ? "rgba(6,182,212,0.5)" : elo < 1600 ? "rgba(236,72,153,0.5)" : elo < 2e3 ? "rgba(245,158,11,0.5)" : "rgba(16,185,129,0.5)"}; }` })
       ] }),
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-0.5 flex justify-between text-[8px] text-gray-400 dark:text-gray-500", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-0.5 flex justify-between text-[8px] text-slate-400 dark:text-slate-500", children: [
         /* @__PURE__ */ jsxRuntime.jsx("span", { children: "800" }),
         /* @__PURE__ */ jsxRuntime.jsx("span", { children: "1200" }),
         /* @__PURE__ */ jsxRuntime.jsx("span", { children: "1600" }),
@@ -555,35 +555,35 @@ function AgentCapabilityCard({ elo, setElo, models, selectedModelId, setSelected
         /* @__PURE__ */ jsxRuntime.jsx("span", { children: "2400" })
       ] })
     ] }),
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-3 gap-px border-t border-gray-200/30 bg-gray-200/30 dark:border-white/10 dark:bg-white/10", children: [
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bg-white/60 px-3 py-2 dark:bg-gray-900/60", children: [
-        /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-[9px] text-gray-400 dark:text-gray-500", children: t("agentDrawer.model") }),
-        /* @__PURE__ */ jsxRuntime.jsx("p", { className: "truncate text-xs font-semibold text-gray-900 dark:text-white", children: currentModelName })
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-3 gap-px border-t border-slate-200/30 bg-slate-200/30 dark:border-white/10 dark:bg-white/10", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bg-white/60 px-3 py-2 dark:bg-slate-900/60", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-[9px] text-slate-400 dark:text-slate-500", children: t("agentDrawer.model") }),
+        /* @__PURE__ */ jsxRuntime.jsx("p", { className: "truncate text-xs font-semibold text-slate-900 dark:text-white", children: currentModelName })
       ] }),
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bg-white/60 px-3 py-2 dark:bg-gray-900/60", children: [
-        /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-[9px] text-gray-400 dark:text-gray-500", children: t("agentDrawer.maxTokens") }),
-        /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs font-semibold text-gray-900 dark:text-white", children: currentFamilyEntry.maxTokens.toLocaleString() })
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bg-white/60 px-3 py-2 dark:bg-slate-900/60", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-[9px] text-slate-400 dark:text-slate-500", children: t("agentDrawer.maxTokens") }),
+        /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs font-semibold text-slate-900 dark:text-white", children: currentFamilyEntry.maxTokens.toLocaleString() })
       ] }),
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bg-white/60 px-3 py-2 dark:bg-gray-900/60", children: [
-        /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-[9px] text-gray-400 dark:text-gray-500", children: t("agentDrawer.context") }),
-        /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs font-semibold text-gray-900 dark:text-white", children: currentFamilyEntry.contextWindow })
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bg-white/60 px-3 py-2 dark:bg-slate-900/60", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-[9px] text-slate-400 dark:text-slate-500", children: t("agentDrawer.context") }),
+        /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs font-semibold text-slate-900 dark:text-white", children: currentFamilyEntry.contextWindow })
       ] }),
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bg-white/60 px-3 py-2 dark:bg-gray-900/60", children: [
-        /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-[9px] text-gray-400 dark:text-gray-500", children: t("agentDrawer.temperature") }),
-        /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs font-semibold text-gray-900 dark:text-white", children: temperature.toFixed(2) })
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bg-white/60 px-3 py-2 dark:bg-slate-900/60", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-[9px] text-slate-400 dark:text-slate-500", children: t("agentDrawer.temperature") }),
+        /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs font-semibold text-slate-900 dark:text-white", children: temperature.toFixed(2) })
       ] }),
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bg-white/60 px-3 py-2 dark:bg-gray-900/60", children: [
-        /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-[9px] text-gray-400 dark:text-gray-500", children: t("agentDrawer.autonomy") }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bg-white/60 px-3 py-2 dark:bg-slate-900/60", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-[9px] text-slate-400 dark:text-slate-500", children: t("agentDrawer.autonomy") }),
         /* @__PURE__ */ jsxRuntime.jsx("p", { className: `text-xs font-semibold ${tierInfo.color}`, children: t(`agentDrawer.${tierInfo.autonomyKey}`) })
       ] }),
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bg-white/60 px-3 py-2 dark:bg-gray-900/60", children: [
-        /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-[9px] text-gray-400 dark:text-gray-500", children: t("agentDrawer.costPerTask") }),
-        /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs font-semibold text-gray-900 dark:text-white", children: tierInfo.costPerTask })
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bg-white/60 px-3 py-2 dark:bg-slate-900/60", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-[9px] text-slate-400 dark:text-slate-500", children: t("agentDrawer.costPerTask") }),
+        /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs font-semibold text-slate-900 dark:text-white", children: tierInfo.costPerTask })
       ] })
     ] }),
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "border-t border-gray-200/30 bg-white/60 px-4 py-2.5 dark:border-white/10 dark:bg-gray-900/60", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "border-t border-slate-200/30 bg-white/60 px-4 py-2.5 dark:border-white/10 dark:bg-slate-900/60", children: [
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-1 flex items-center justify-between", children: [
-        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[9px] text-gray-400 dark:text-gray-500", children: t("agentDrawer.autonomyLevel") }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[9px] text-slate-400 dark:text-slate-500", children: t("agentDrawer.autonomyLevel") }),
         /* @__PURE__ */ jsxRuntime.jsx("span", { className: `text-[10px] font-semibold ${tierInfo.color}`, children: t(`agentDrawer.${tierInfo.autonomyKey}`) })
       ] }),
       /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex gap-1", children: [
@@ -598,11 +598,11 @@ function AgentCapabilityCard({ elo, setElo, models, selectedModelId, setSelected
           onClick: () => handleAutonomyClick(level),
           "aria-label": t(`agentDrawer.${labelKey}`),
           "aria-pressed": level <= tierInfo.autonomyPercent,
-          className: `h-2 flex-1 rounded-full transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 ${level <= tierInfo.autonomyPercent ? `bg-gradient-to-r ${tierInfo.barColor} hover:opacity-80` : "bg-gray-200 hover:bg-gray-300 dark:bg-gray-700 dark:hover:bg-gray-600"}`
+          className: `h-2 flex-1 rounded-full transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500/70 focus-visible:ring-offset-1 ${level <= tierInfo.autonomyPercent ? `bg-gradient-to-r ${tierInfo.barColor} hover:opacity-80` : "bg-slate-200 hover:bg-slate-300 dark:bg-slate-700 dark:hover:bg-slate-600"}`
         },
         level
       )) }),
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-1 flex justify-between text-[7px] text-gray-400 dark:text-gray-500", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-1 flex justify-between text-[7px] text-slate-400 dark:text-slate-500", children: [
         /* @__PURE__ */ jsxRuntime.jsx("span", { children: t("agentDrawer.autonomyLow") }),
         /* @__PURE__ */ jsxRuntime.jsx("span", { children: t("agentDrawer.autonomyMedium") }),
         /* @__PURE__ */ jsxRuntime.jsx("span", { children: t("agentDrawer.autonomyHigh") }),
@@ -612,13 +612,13 @@ function AgentCapabilityCard({ elo, setElo, models, selectedModelId, setSelected
   ] });
 }
 function ConfigTab({ models, t, selectedModelId, setSelectedModelId, selectedFramework, setSelectedFramework, markDirty, connectedProviderTypes }) {
-  const frameworkKeys = Object.keys(chunkD5OTZGA2_js.FRAMEWORK_META);
+  const frameworkKeys = Object.keys(chunk5SCZB5UI_js.FRAMEWORK_META);
   const hasProviderConstraints = connectedProviderTypes.length > 0;
-  const compatibleModels = chunkD5OTZGA2_js.getCompatibleModels(models, selectedFramework);
+  const compatibleModels = chunk5SCZB5UI_js.getCompatibleModels(models, selectedFramework);
   const handleFrameworkChange = react.useCallback((newFramework) => {
     setSelectedFramework(newFramework);
-    if (!chunkD5OTZGA2_js.isModelCompatibleWithFramework(selectedModelId, newFramework)) {
-      const compatible = chunkD5OTZGA2_js.getCompatibleModels(models, newFramework);
+    if (!chunk5SCZB5UI_js.isModelCompatibleWithFramework(selectedModelId, newFramework)) {
+      const compatible = chunk5SCZB5UI_js.getCompatibleModels(models, newFramework);
       if (compatible.length > 0) {
         setSelectedModelId(compatible[0].id);
       }
@@ -627,19 +627,19 @@ function ConfigTab({ models, t, selectedModelId, setSelectedModelId, selectedFra
   }, [selectedModelId, models, setSelectedFramework, setSelectedModelId, markDirty]);
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-5 p-4", children: [
     /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-      /* @__PURE__ */ jsxRuntime.jsx("label", { className: "mb-2 block text-xs font-medium text-gray-500 dark:text-gray-400", children: t("agentDrawer.framework") }),
+      /* @__PURE__ */ jsxRuntime.jsx("label", { className: "mb-2 block text-xs font-medium text-slate-500 dark:text-slate-400", children: t("agentDrawer.framework") }),
       /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-wrap gap-1.5", children: frameworkKeys.map((key) => {
-        const meta = chunkD5OTZGA2_js.FRAMEWORK_META[key];
+        const meta = chunk5SCZB5UI_js.FRAMEWORK_META[key];
         const isSelected = key === selectedFramework;
-        const compatCount = chunkD5OTZGA2_js.getCompatibleModels(models, key).length;
-        const isCompatibleWithProviders = !hasProviderConstraints || chunkD5OTZGA2_js.isFrameworkCompatibleWithProviders(key, connectedProviderTypes);
+        const compatCount = chunk5SCZB5UI_js.getCompatibleModels(models, key).length;
+        const isCompatibleWithProviders = !hasProviderConstraints || chunk5SCZB5UI_js.isFrameworkCompatibleWithProviders(key, connectedProviderTypes);
         return /* @__PURE__ */ jsxRuntime.jsxs(
           "button",
           {
             type: "button",
             onClick: () => handleFrameworkChange(key),
             disabled: !isCompatibleWithProviders,
-            className: `inline-flex items-center gap-1.5 rounded-full px-3 py-1.5 text-[10px] font-semibold transition-all ${!isCompatibleWithProviders ? "cursor-not-allowed bg-gray-100 text-gray-400 opacity-40 dark:bg-white/5 dark:text-gray-500" : isSelected ? `${meta.badgeColor} ring-1 ring-current/20` : "bg-gray-100 text-gray-500 hover:bg-gray-200 dark:bg-white/5 dark:text-gray-400 dark:hover:bg-white/10"}`,
+            className: `inline-flex items-center gap-1.5 rounded-full px-3 py-1.5 text-[10px] font-semibold transition-all focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500/70 focus-visible:ring-offset-1 ${!isCompatibleWithProviders ? "cursor-not-allowed bg-slate-100 text-slate-400 opacity-40 dark:bg-white/5 dark:text-slate-500" : isSelected ? `${meta.badgeColor} ring-1 ring-current/20` : "bg-slate-100 text-slate-500 hover:bg-slate-200 dark:bg-white/5 dark:text-slate-400 dark:hover:bg-white/10"}`,
             title: !isCompatibleWithProviders ? t("agentDrawer.frameworkIncompatible") : void 0,
             children: [
               /* @__PURE__ */ jsxRuntime.jsx(meta.IconComponent, { className: "h-3.5 w-3.5" }),
@@ -652,9 +652,9 @@ function ConfigTab({ models, t, selectedModelId, setSelectedModelId, selectedFra
       }) })
     ] }),
     /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-      /* @__PURE__ */ jsxRuntime.jsxs("label", { className: "mb-2 block text-xs font-medium text-gray-500 dark:text-gray-400", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("label", { className: "mb-2 block text-xs font-medium text-slate-500 dark:text-slate-400", children: [
         t("agentDrawer.model"),
-        compatibleModels.length < models.length && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "ml-1.5 text-[10px] font-normal text-gray-400 dark:text-gray-500", children: [
+        compatibleModels.length < models.length && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "ml-1.5 text-[10px] font-normal text-slate-400 dark:text-slate-500", children: [
           "(",
           compatibleModels.length,
           "/",
@@ -664,25 +664,21 @@ function ConfigTab({ models, t, selectedModelId, setSelectedModelId, selectedFra
       ] }),
       /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-2 gap-2", children: models.map((model) => {
         const isSelected = model.id === selectedModelId;
-        const isCompatible = chunkD5OTZGA2_js.isModelCompatibleWithFramework(model.id, selectedFramework);
+        const isCompatible = chunk5SCZB5UI_js.isModelCompatibleWithFramework(model.id, selectedFramework);
         const { IconComponent, color, providerLabel } = getModelIcon(model.id);
-        return /* @__PURE__ */ jsxRuntime.jsxs(
-          "button",
+        return /* @__PURE__ */ jsxRuntime.jsx(
+          chunkFZUV7GNB_js.SelectionCard,
           {
-            type: "button",
-            disabled: !isCompatible,
+            selected: isSelected,
             onClick: () => {
               setSelectedModelId(model.id);
               markDirty();
             },
-            className: `flex items-center gap-2.5 rounded-xl border px-3 py-2.5 text-left transition-all ${!isCompatible ? "cursor-not-allowed border-gray-200/30 opacity-35 dark:border-white/5" : isSelected ? "border-indigo-500/50 bg-indigo-50/50 ring-1 ring-indigo-500/30 dark:border-indigo-400/40 dark:bg-indigo-500/10" : "border-gray-200/50 bg-gray-50/50 hover:border-gray-300 dark:border-white/10 dark:bg-white/5 dark:hover:border-white/20"}`,
-            children: [
-              /* @__PURE__ */ jsxRuntime.jsx(IconComponent, { className: `h-5 w-5 flex-shrink-0 ${isSelected && isCompatible ? color : "text-gray-400 dark:text-gray-500"}` }),
-              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "min-w-0", children: [
-                /* @__PURE__ */ jsxRuntime.jsx("p", { className: `truncate text-xs font-semibold ${isSelected && isCompatible ? "text-gray-900 dark:text-white" : "text-gray-600 dark:text-gray-300"}`, children: model.name }),
-                /* @__PURE__ */ jsxRuntime.jsx("p", { className: "truncate text-[10px] text-gray-400 dark:text-gray-500", children: providerLabel })
-              ] })
-            ]
+            layout: "card",
+            compatibility: isCompatible ? "compatible" : "incompatible",
+            icon: /* @__PURE__ */ jsxRuntime.jsx(IconComponent, { className: `h-5 w-5 ${isSelected && isCompatible ? color : ""}` }),
+            label: model.name,
+            description: providerLabel
           },
           model.id
         );
@@ -716,11 +712,11 @@ function PromptTab({
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-5 p-4", children: [
     /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-2 flex items-center justify-between", children: [
-        /* @__PURE__ */ jsxRuntime.jsx("label", { className: "text-xs font-medium text-gray-500 dark:text-gray-400", children: t("agentDrawer.temperature") }),
-        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm font-bold tabular-nums text-gray-900 dark:text-white", children: temperature.toFixed(2) })
+        /* @__PURE__ */ jsxRuntime.jsx("label", { className: "text-xs font-medium text-slate-500 dark:text-slate-400", children: t("agentDrawer.temperature") }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm font-bold tabular-nums text-slate-900 dark:text-white", children: temperature.toFixed(2) })
       ] }),
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", children: [
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-x-0 top-1/2 h-2 -translate-y-1/2 overflow-hidden rounded-full bg-gray-200 dark:bg-gray-700", children: /* @__PURE__ */ jsxRuntime.jsx(
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-x-0 top-1/2 h-2 -translate-y-1/2 overflow-hidden rounded-full bg-slate-200 dark:bg-slate-700", children: /* @__PURE__ */ jsxRuntime.jsx(
           "div",
           {
             className: "h-full rounded-full transition-all duration-300 ease-out",
@@ -739,21 +735,21 @@ function PromptTab({
             "aria-label": t("agentDrawer.temperature"),
             "aria-valuenow": temperature,
             "aria-valuetext": `${temperature.toFixed(2)} \u2014 ${isPrecise ? t("agentDrawer.precise") : isBalanced ? t("agentDrawer.balanced") : t("agentDrawer.creative")}`,
-            className: "relative z-10 h-5 w-full cursor-pointer appearance-none bg-transparent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2 [&::-webkit-slider-thumb]:h-5 [&::-webkit-slider-thumb]:w-5 [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:border-2 [&::-webkit-slider-thumb]:border-white [&::-webkit-slider-thumb]:shadow-lg dark:[&::-webkit-slider-thumb]:border-gray-900"
+            className: "relative z-10 h-5 w-full cursor-pointer appearance-none bg-transparent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500/70 focus-visible:ring-offset-1 [&::-webkit-slider-thumb]:h-5 [&::-webkit-slider-thumb]:w-5 [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:border-2 [&::-webkit-slider-thumb]:border-white [&::-webkit-slider-thumb]:shadow-lg dark:[&::-webkit-slider-thumb]:border-slate-900"
           }
         ),
         /* @__PURE__ */ jsxRuntime.jsx("style", { children: `input[type="range"]::-webkit-slider-thumb { background: ${isPrecise ? "#3b82f6" : isBalanced ? "#8b5cf6" : "#ec4899"}; box-shadow: 0 0 8px ${isPrecise ? "rgba(59,130,246,0.5)" : isBalanced ? "rgba(139,92,246,0.5)" : "rgba(236,72,153,0.5)"}; }` })
       ] }),
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-1 flex items-center justify-between", children: [
-        /* @__PURE__ */ jsxRuntime.jsx("span", { className: `text-[10px] font-medium transition-colors ${isPrecise ? "text-blue-500" : "text-gray-400 dark:text-gray-500"}`, children: t("agentDrawer.precise") }),
-        /* @__PURE__ */ jsxRuntime.jsx("span", { className: `text-[10px] font-medium transition-colors ${isBalanced ? "text-purple-500" : "text-gray-400 dark:text-gray-500"}`, children: t("agentDrawer.balanced") }),
-        /* @__PURE__ */ jsxRuntime.jsx("span", { className: `text-[10px] font-medium transition-colors ${isCreative ? "text-pink-500" : "text-gray-400 dark:text-gray-500"}`, children: t("agentDrawer.creative") })
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: `text-[10px] font-medium transition-colors ${isPrecise ? "text-blue-500" : "text-slate-400 dark:text-slate-500"}`, children: t("agentDrawer.precise") }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: `text-[10px] font-medium transition-colors ${isBalanced ? "text-purple-500" : "text-slate-400 dark:text-slate-500"}`, children: t("agentDrawer.balanced") }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: `text-[10px] font-medium transition-colors ${isCreative ? "text-pink-500" : "text-slate-400 dark:text-slate-500"}`, children: t("agentDrawer.creative") })
       ] })
     ] }),
     /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-1 flex items-center justify-between", children: [
-        /* @__PURE__ */ jsxRuntime.jsx("label", { className: "text-xs font-medium text-gray-500 dark:text-gray-400", children: t("agentDrawer.systemPrompt") }),
-        /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-[10px] text-gray-400 dark:text-gray-500", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("label", { className: "text-xs font-medium text-slate-500 dark:text-slate-400", children: t("agentDrawer.systemPrompt") }),
+        /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-[10px] text-slate-400 dark:text-slate-500", children: [
           promptText.length,
           " chars"
         ] })
@@ -764,14 +760,14 @@ function PromptTab({
           value: promptText,
           onChange: handlePromptChange,
           rows: 12,
-          className: "w-full resize-y rounded-lg border border-gray-200/50 bg-gray-50/50 px-3 py-2.5 font-mono text-xs leading-relaxed text-gray-700 outline-none transition-colors placeholder:text-gray-400 focus:border-indigo-300/50 focus:ring-1 focus:ring-indigo-300/30 dark:border-white/10 dark:bg-white/5 dark:text-gray-300 dark:placeholder:text-gray-500 dark:focus:border-indigo-500/30 dark:focus:ring-indigo-500/20",
+          className: "liquid-surface w-full resize-y rounded-lg px-3 py-2.5 font-mono text-xs leading-relaxed text-slate-700 outline-none transition-colors placeholder:text-slate-400 focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500/70 focus-visible:ring-offset-1 dark:text-slate-300 dark:placeholder:text-slate-500",
           placeholder: t("agentDrawer.systemPromptPlaceholder")
         }
       )
     ] }),
     /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-      /* @__PURE__ */ jsxRuntime.jsx("label", { className: "mb-1 block text-xs font-medium text-gray-500 dark:text-gray-400", children: t("agentDrawer.outputSchema", { _: "Output schema (optional)" }) }),
-      /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mb-2 text-[11px] text-gray-400 dark:text-gray-500", children: t("agentDrawer.outputSchemaHint", {
+      /* @__PURE__ */ jsxRuntime.jsx("label", { className: "mb-1 block text-xs font-medium text-slate-500 dark:text-slate-400", children: t("agentDrawer.outputSchema", { _: "Output schema (optional)" }) }),
+      /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mb-2 text-[11px] text-slate-400 dark:text-slate-500", children: t("agentDrawer.outputSchemaHint", {
         _: "Define the structured JSON the model must return. The engine parses + validates and exposes it under `output.parsed`. Invalid output fails the node."
       }) }),
       /* @__PURE__ */ jsxRuntime.jsx(
@@ -790,8 +786,8 @@ function PromptTab({
 function ToolsTab({ agentTools, enabledToolIds, onToggle, agentFramework, t }) {
   if (agentTools.length === 0) {
     return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center justify-center px-4 py-12 text-center", children: [
-      /* @__PURE__ */ jsxRuntime.jsx(outline.CommandLineIcon, { className: "mb-2 h-8 w-8 text-gray-400 dark:text-gray-500" }),
-      /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-gray-500 dark:text-gray-400", children: t("agentDrawer.noToolsAvailable") })
+      /* @__PURE__ */ jsxRuntime.jsx(outline.CommandLineIcon, { className: "mb-2 h-8 w-8 text-slate-400 dark:text-slate-500" }),
+      /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-slate-500 dark:text-slate-400", children: t("agentDrawer.noToolsAvailable") })
     ] });
   }
   const sortedTools = [...agentTools].sort((a, b) => {
@@ -802,7 +798,7 @@ function ToolsTab({ agentTools, enabledToolIds, onToggle, agentFramework, t }) {
     return 0;
   });
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2 p-4", children: [
-    /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mb-3 text-xs text-gray-500 dark:text-gray-400", children: t("agentDrawer.toolsDescription") }),
+    /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mb-3 text-xs text-slate-500 dark:text-slate-400", children: t("agentDrawer.toolsDescription") }),
     sortedTools.map((tool) => {
       const isEnabled = enabledToolIds.has(tool.agentToolId);
       const isCompatible = !tool.compatibleFrameworks || tool.compatibleFrameworks.length === 0 || tool.compatibleFrameworks.includes(agentFramework);
@@ -811,26 +807,26 @@ function ToolsTab({ agentTools, enabledToolIds, onToggle, agentFramework, t }) {
         {
           type: "button",
           onClick: () => onToggle(tool.agentToolId),
-          className: `flex w-full items-center gap-3 rounded-xl border px-4 py-3 text-left transition-all ${!isCompatible ? "border-gray-200/30 opacity-40 dark:border-white/5" : isEnabled ? "border-amber-500/30 bg-amber-50/50 dark:border-amber-400/20 dark:bg-amber-500/5" : "border-gray-200/50 bg-gray-50/30 hover:border-gray-300 dark:border-white/10 dark:bg-white/[0.02] dark:hover:border-white/20"}`,
+          className: `flex w-full items-center gap-3 rounded-xl border px-4 py-3 text-left transition-all focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500/70 focus-visible:ring-offset-1 ${!isCompatible ? "border-slate-200/30 opacity-40 dark:border-white/5" : isEnabled ? "border-amber-500/30 bg-amber-50/50 dark:border-amber-400/20 dark:bg-amber-500/5" : "border-slate-200/50 bg-white/40 backdrop-blur-sm hover:border-slate-300 dark:border-white/10 dark:bg-white/[0.04] dark:hover:border-white/20"}`,
           disabled: !isCompatible,
           children: [
-            /* @__PURE__ */ jsxRuntime.jsx("div", { className: `flex h-8 w-8 shrink-0 items-center justify-center rounded-lg ${isEnabled ? "bg-gradient-to-br from-amber-400 to-orange-500" : "bg-gray-200 dark:bg-gray-700"}`, children: /* @__PURE__ */ jsxRuntime.jsx(outline.CommandLineIcon, { className: `h-4 w-4 ${isEnabled ? "text-white" : "text-gray-500 dark:text-gray-400"}` }) }),
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: `flex h-8 w-8 shrink-0 items-center justify-center rounded-lg ${isEnabled ? "bg-gradient-to-br from-amber-400 to-orange-500" : "bg-slate-200 dark:bg-slate-700"}`, children: /* @__PURE__ */ jsxRuntime.jsx(outline.CommandLineIcon, { className: `h-4 w-4 ${isEnabled ? "text-white" : "text-slate-500 dark:text-slate-400"}` }) }),
             /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "min-w-0 flex-1", children: [
               /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1.5", children: [
-                /* @__PURE__ */ jsxRuntime.jsx("p", { className: `text-sm font-medium ${isEnabled ? "text-gray-900 dark:text-white" : "text-gray-600 dark:text-gray-400"}`, children: tool.name }),
-                !isCompatible && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "rounded-full bg-gray-100 px-1.5 py-0.5 text-[8px] font-medium text-gray-500 dark:bg-white/10 dark:text-gray-400", children: "incompatible" })
+                /* @__PURE__ */ jsxRuntime.jsx("p", { className: `text-sm font-medium ${isEnabled ? "text-slate-900 dark:text-white" : "text-slate-600 dark:text-slate-400"}`, children: tool.name }),
+                !isCompatible && /* @__PURE__ */ jsxRuntime.jsx(chunkMXQ2EYG2_js.Badge, { color: "zinc", size: "xs", children: "incompatible" })
               ] }),
-              tool.description && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "truncate text-[10px] text-gray-400 dark:text-gray-500", children: tool.description }),
+              tool.description && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "truncate text-[10px] text-slate-400 dark:text-slate-500", children: tool.description }),
               tool.compatibleFrameworks && tool.compatibleFrameworks.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-1 flex flex-wrap gap-0.5", children: tool.compatibleFrameworks.map((framework) => {
-                const meta = chunkD5OTZGA2_js.getFrameworkMeta(framework);
+                const meta = chunk5SCZB5UI_js.getFrameworkMeta(framework);
                 const isCurrentFw = framework === agentFramework;
-                return /* @__PURE__ */ jsxRuntime.jsxs("span", { className: `inline-flex items-center gap-0.5 rounded px-1.5 py-0.5 text-[8px] font-medium ${isCurrentFw ? meta.badgeColor : "bg-gray-100 text-gray-500 dark:bg-white/5 dark:text-gray-400"}`, children: [
+                return /* @__PURE__ */ jsxRuntime.jsxs("span", { className: `inline-flex items-center gap-0.5 rounded px-1.5 py-0.5 text-[8px] font-medium ${isCurrentFw ? meta.badgeColor : "bg-slate-100 text-slate-500 dark:bg-white/5 dark:text-slate-400"}`, children: [
                   /* @__PURE__ */ jsxRuntime.jsx(meta.IconComponent, { className: "h-2.5 w-2.5" }),
                   meta.label
                 ] }, framework);
               }) })
             ] }),
-            /* @__PURE__ */ jsxRuntime.jsx("div", { className: `flex h-5 w-5 shrink-0 items-center justify-center rounded-full transition-all ${isEnabled ? "bg-amber-500 text-white" : "border border-gray-300 dark:border-gray-600"}`, children: isEnabled && /* @__PURE__ */ jsxRuntime.jsx(outline.CheckIcon, { className: "h-3 w-3" }) }),
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: `flex h-5 w-5 shrink-0 items-center justify-center rounded-full transition-all ${isEnabled ? "bg-amber-500 text-white" : "border border-slate-300 dark:border-slate-600"}`, children: isEnabled && /* @__PURE__ */ jsxRuntime.jsx(outline.CheckIcon, { className: "h-3 w-3" }) }),
             /* @__PURE__ */ jsxRuntime.jsx(
               "div",
               {
@@ -839,7 +835,7 @@ function ToolsTab({ agentTools, enabledToolIds, onToggle, agentFramework, t }) {
                   event.stopPropagation();
                 },
                 children: /* @__PURE__ */ jsxRuntime.jsx(
-                  chunk5ETT54QS_js.ToggleSwitch,
+                  chunkFZUV7GNB_js.ToggleSwitch,
                   {
                     checked: isEnabled,
                     onChange: () => onToggle(tool.agentToolId),
@@ -887,8 +883,8 @@ function EngineTab({
   const compatibleProviders = findCompatibleProviders(selectedModelId, modelProviders);
   const configuredCompatible = compatibleProviders.filter((p) => p.configured);
   const effectiveProvider = compatibleProviders.find((p) => p.id === selectedProviderId) ?? configuredCompatible[0] ?? compatibleProviders[0];
-  const frameworkMeta = chunkD5OTZGA2_js.getFrameworkMeta(selectedFramework);
-  const inputCard = "liquid-surface w-full rounded-lg px-3 py-1.5 text-sm text-gray-800 outline-none transition-colors focus:ring-1 focus:ring-indigo-300/40 dark:text-gray-200 dark:focus:ring-indigo-500/20";
+  const frameworkMeta = chunk5SCZB5UI_js.getFrameworkMeta(selectedFramework);
+  const inputCard = "liquid-surface w-full rounded-lg px-3 py-1.5 text-sm text-slate-800 outline-none transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500/70 focus-visible:ring-offset-1 dark:text-slate-200";
   return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-5", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "overflow-hidden rounded-2xl border border-indigo-500/20 bg-gradient-to-b from-indigo-500/[0.04] via-violet-500/[0.03] to-purple-500/[0.04] dark:border-indigo-400/20 dark:from-indigo-500/[0.10] dark:via-violet-500/[0.06] dark:to-purple-500/[0.08]", children: [
     /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-4 pb-3 pt-4", children: /* @__PURE__ */ jsxRuntime.jsx(
       AgentCapabilityCard,
@@ -916,9 +912,9 @@ function EngineTab({
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start gap-2", children: [
         /* @__PURE__ */ jsxRuntime.jsx(outline.CpuChipIcon, { className: "mt-0.5 h-5 w-5 text-indigo-500 dark:text-indigo-400" }),
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "min-w-0", children: [
-          /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm font-semibold text-gray-900 dark:text-white", children: modelName }),
+          /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm font-semibold text-slate-900 dark:text-white", children: modelName }),
           compatibleProviders.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-[10px] text-amber-600 dark:text-amber-400", children: t("agentDrawer.noProviderForFamily", { _: "Nenhum provedor configurado serve a fam\xEDlia " + family }) }) : configuredCompatible.length > 1 ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-1 flex items-center gap-1.5", children: [
-            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[10px] text-gray-500 dark:text-gray-400", children: t("agentDrawer.servedVia", { _: "via" }) }),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[10px] text-slate-500 dark:text-slate-400", children: t("agentDrawer.servedVia", { _: "via" }) }),
             /* @__PURE__ */ jsxRuntime.jsx(
               "select",
               {
@@ -927,22 +923,17 @@ function EngineTab({
                   onSelectProvider(event.target.value);
                   markDirty();
                 },
-                className: "liquid-surface rounded-md px-2 py-0.5 text-[10px] font-semibold text-gray-900 outline-none focus:ring-1 focus:ring-indigo-300/40 dark:text-white",
+                "aria-label": t("agentDrawer.servedVia", { _: "via" }),
+                className: "liquid-surface rounded-md px-2 py-0.5 text-[10px] font-semibold text-slate-900 outline-none focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500/70 focus-visible:ring-offset-1 dark:text-white",
                 children: configuredCompatible.map((p) => /* @__PURE__ */ jsxRuntime.jsx("option", { value: p.id, children: p.name }, p.id))
               }
             ),
-            effectiveProvider && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: `inline-flex items-center gap-1 rounded-full px-1.5 py-0.5 text-[9px] font-semibold ${effectiveProvider.configured ? "bg-emerald-500/10 text-emerald-600 dark:text-emerald-400" : "bg-amber-500/10 text-amber-600 dark:text-amber-400"}`, children: [
-              /* @__PURE__ */ jsxRuntime.jsx("span", { className: `h-1 w-1 rounded-full ${effectiveProvider.configured ? "bg-emerald-500" : "bg-amber-500"}` }),
-              effectiveProvider.configured ? t("agentDrawer.configured", { _: "connected" }) : t("agentDrawer.setup", { _: "setup" })
-            ] })
-          ] }) : /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "text-[10px] text-gray-500 dark:text-gray-400", children: [
+            effectiveProvider && /* @__PURE__ */ jsxRuntime.jsx(chunkMXQ2EYG2_js.Badge, { color: effectiveProvider.configured ? "emerald" : "amber", size: "xs", children: effectiveProvider.configured ? t("agentDrawer.configured", { _: "connected" }) : t("agentDrawer.setup", { _: "setup" }) })
+          ] }) : /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "text-[10px] text-slate-500 dark:text-slate-400", children: [
             t("agentDrawer.servedVia", { _: "via" }),
             " ",
             effectiveProvider?.name ?? family,
-            effectiveProvider && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: `ml-2 inline-flex items-center gap-1 rounded-full px-1.5 py-0.5 text-[9px] font-semibold ${effectiveProvider.configured ? "bg-emerald-500/10 text-emerald-600 dark:text-emerald-400" : "bg-amber-500/10 text-amber-600 dark:text-amber-400"}`, children: [
-              /* @__PURE__ */ jsxRuntime.jsx("span", { className: `h-1 w-1 rounded-full ${effectiveProvider.configured ? "bg-emerald-500" : "bg-amber-500"}` }),
-              effectiveProvider.configured ? t("agentDrawer.configured", { _: "connected" }) : t("agentDrawer.setup", { _: "setup" })
-            ] })
+            effectiveProvider && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ml-2 inline-flex", children: /* @__PURE__ */ jsxRuntime.jsx(chunkMXQ2EYG2_js.Badge, { color: effectiveProvider.configured ? "emerald" : "amber", size: "xs", children: effectiveProvider.configured ? t("agentDrawer.configured", { _: "connected" }) : t("agentDrawer.setup", { _: "setup" }) }) })
           ] })
         ] })
       ] }),
@@ -952,13 +943,13 @@ function EngineTab({
       ] })
     ] }) }),
     /* @__PURE__ */ jsxRuntime.jsxs("details", { className: "group border-t border-indigo-500/15 bg-white/30 px-4 py-2.5 dark:border-indigo-400/15 dark:bg-white/[0.02]", children: [
-      /* @__PURE__ */ jsxRuntime.jsxs("summary", { className: "flex cursor-pointer items-center gap-2 text-[10px] font-semibold uppercase tracking-wider text-gray-500 dark:text-gray-400", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("summary", { className: "flex cursor-pointer items-center gap-2 text-[10px] font-semibold uppercase tracking-wider text-slate-500 dark:text-slate-400", children: [
         /* @__PURE__ */ jsxRuntime.jsx(outline.Cog6ToothIcon, { className: "h-3 w-3" }),
         /* @__PURE__ */ jsxRuntime.jsx("span", { children: t("agentDrawer.overrideDerivation", { _: "Override \xB7 ajustes avan\xE7ados" }) }),
-        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ml-auto font-normal text-gray-400 group-open:hidden", children: "\u25BE" }),
-        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ml-auto hidden font-normal text-gray-400 group-open:inline", children: "\u25B4" })
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ml-auto font-normal text-slate-400 group-open:hidden", children: "\u25BE" }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ml-auto hidden font-normal text-slate-400 group-open:inline", children: "\u25B4" })
       ] }),
-      /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-1 text-[10px] italic text-gray-400 dark:text-gray-500", children: t("agentDrawer.overrideHint", { _: "Mude framework, modelo manual ou tokens s\xF3 se a deriva\xE7\xE3o por ELO n\xE3o atender." }) }),
+      /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-1 text-[10px] italic text-slate-400 dark:text-slate-500", children: t("agentDrawer.overrideHint", { _: "Mude framework, modelo manual ou tokens s\xF3 se a deriva\xE7\xE3o por ELO n\xE3o atender." }) }),
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-3 space-y-4", children: [
         /* @__PURE__ */ jsxRuntime.jsx(
           ConfigTab,
@@ -974,13 +965,13 @@ function EngineTab({
           }
         ),
         /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-          /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mb-2 text-[10px] font-semibold uppercase tracking-wider text-gray-500 dark:text-gray-400", children: t("agentDrawer.generationParams", { _: "Par\xE2metros de gera\xE7\xE3o" }) }),
+          /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mb-2 text-[10px] font-semibold uppercase tracking-wider text-slate-500 dark:text-slate-400", children: t("agentDrawer.generationParams", { _: "Par\xE2metros de gera\xE7\xE3o" }) }),
           /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-3 gap-2", children: [
             { key: "max", labelKey: "agentDrawer.maxOutputTokens", label: "Max output", value: maxOutputTokens, setter: setMaxOutputTokens, step: 1, min: 1, max: 32768 },
             { key: "topP", labelKey: "agentDrawer.topP", label: "Top-p", value: topP, setter: setTopP, step: 0.05, min: 0, max: 1 },
             { key: "topK", labelKey: "agentDrawer.topK", label: "Top-k", value: topK, setter: setTopK, step: 1, min: 0, max: 500 }
           ].map((field) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `${inputCard} flex flex-col items-center !py-2`, children: [
-            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[8px] font-semibold uppercase tracking-wider text-gray-500 dark:text-gray-400", children: t(field.labelKey, { _: field.label }) }),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[8px] font-semibold uppercase tracking-wider text-slate-500 dark:text-slate-400", children: t(field.labelKey, { _: field.label }) }),
             /* @__PURE__ */ jsxRuntime.jsx(
               "input",
               {
@@ -993,14 +984,14 @@ function EngineTab({
                   field.setter(Number(event.target.value) || 0);
                   markDirty();
                 },
-                className: "w-full bg-transparent text-center text-sm font-semibold tabular-nums text-gray-900 outline-none dark:text-white"
+                className: "w-full bg-transparent text-center text-sm font-semibold tabular-nums text-slate-900 outline-none dark:text-white"
               }
             )
           ] }, field.key)) })
         ] }),
         modelProviders.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-2 flex items-center justify-between", children: [
-            /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-[10px] font-semibold uppercase tracking-wider text-gray-500 dark:text-gray-400", children: t("agentDrawer.providerCredentials", { _: "Credenciais do provedor" }) }),
+            /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-[10px] font-semibold uppercase tracking-wider text-slate-500 dark:text-slate-400", children: t("agentDrawer.providerCredentials", { _: "Credenciais do provedor" }) }),
             /* @__PURE__ */ jsxRuntime.jsx(
               "a",
               {
@@ -1013,17 +1004,17 @@ function EngineTab({
           /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-1", children: modelProviders.map((provider) => /* @__PURE__ */ jsxRuntime.jsxs(
             "div",
             {
-              className: "flex items-center gap-2 rounded-lg border border-gray-200/50 bg-white/40 px-3 py-1.5 dark:border-white/10 dark:bg-white/[0.03]",
+              className: "flex items-center gap-2 rounded-lg border border-slate-200/50 bg-white/40 px-3 py-1.5 dark:border-white/10 dark:bg-white/[0.04]",
               children: [
-                /* @__PURE__ */ jsxRuntime.jsx(outline.KeyIcon, { className: "h-3 w-3 shrink-0 text-gray-500 dark:text-gray-400" }),
-                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[11px] font-semibold text-gray-900 dark:text-white", children: provider.name }),
-                /* @__PURE__ */ jsxRuntime.jsx("span", { className: `shrink-0 rounded-full px-1.5 py-0.5 text-[8px] font-semibold uppercase ${provider.configured ? "bg-emerald-500/10 text-emerald-600 dark:text-emerald-400" : "bg-amber-500/10 text-amber-600 dark:text-amber-400"}`, children: provider.configured ? t("agentDrawer.configured", { _: "connected" }) : t("agentDrawer.setup", { _: "setup" }) }),
-                provider.apiKeyMasked && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ml-auto truncate font-mono text-[9px] text-gray-400 dark:text-gray-500", title: provider.credentialRef, children: provider.apiKeyMasked })
+                /* @__PURE__ */ jsxRuntime.jsx(outline.KeyIcon, { className: "h-3 w-3 shrink-0 text-slate-500 dark:text-slate-400" }),
+                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[11px] font-semibold text-slate-900 dark:text-white", children: provider.name }),
+                /* @__PURE__ */ jsxRuntime.jsx(chunkMXQ2EYG2_js.Badge, { color: provider.configured ? "emerald" : "amber", size: "xs", children: provider.configured ? t("agentDrawer.configured", { _: "connected" }) : t("agentDrawer.setup", { _: "setup" }) }),
+                provider.apiKeyMasked && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ml-auto truncate font-mono text-[9px] text-slate-400 dark:text-slate-500", title: provider.credentialRef, children: provider.apiKeyMasked })
               ]
             },
             provider.id
           )) }),
-          /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-2 text-[10px] text-gray-400 dark:text-gray-500", children: selectedProviderId ? "" : t("agentDrawer.providerHint", { _: "Credenciais s\xE3o configuradas no n\xEDvel da conta. Aqui voc\xEA s\xF3 confere o que est\xE1 conectado." }) })
+          /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-2 text-[10px] text-slate-400 dark:text-slate-500", children: selectedProviderId ? "" : t("agentDrawer.providerHint", { _: "Credenciais s\xE3o configuradas no n\xEDvel da conta. Aqui voc\xEA s\xF3 confere o que est\xE1 conectado." }) })
         ] })
       ] })
     ] })
@@ -1031,9 +1022,9 @@ function EngineTab({
 }
 function AgentModal({ onSaved, onPersist }) {
   const t = chunkY5VN4SPH_js.useTranslations("agents.workflow");
-  const activeModal = chunkD5OTZGA2_js.useModalStore((s) => s.activeModal);
-  const agentData = chunkD5OTZGA2_js.useModalStore((s) => s.agentData);
-  const closeModal = chunkD5OTZGA2_js.useModalStore((s) => s.closeModal);
+  const activeModal = chunk5SCZB5UI_js.useModalStore((s) => s.activeModal);
+  const agentData = chunk5SCZB5UI_js.useModalStore((s) => s.agentData);
+  const closeModal = chunk5SCZB5UI_js.useModalStore((s) => s.closeModal);
   const open = activeModal === "agent";
   const agent = agentData?.agent ?? null;
   const models = agentData?.models ?? [];
@@ -1177,11 +1168,11 @@ function AgentModal({ onSaved, onPersist }) {
   if (!agent) return null;
   const sections = [];
   const effectiveAvatarUrl = avatarUrl || agent.avatar;
-  const fieldCard = "liquid-surface w-full rounded-lg px-2.5 py-1.5 text-xs text-gray-800 outline-none transition-colors focus:ring-1 focus:ring-indigo-300/40 dark:text-gray-200 dark:focus:ring-indigo-500/20";
+  const fieldCard = "liquid-surface w-full rounded-lg px-2.5 py-1.5 text-xs text-slate-800 outline-none transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500/70 focus-visible:ring-offset-1 dark:text-slate-200";
   const fieldLabel = "text-[9px] font-semibold uppercase tracking-wider text-slate-500 dark:text-slate-400";
   const avatarInitial = (displayName || agent.name).charAt(0).toUpperCase();
   const avatarNode = /* @__PURE__ */ jsxRuntime.jsx(
-    chunk5ETT54QS_js.Avatar,
+    chunkFZUV7GNB_js.Avatar,
     {
       src: effectiveAvatarUrl || void 0,
       alt: displayName || agent.name,
@@ -1193,7 +1184,7 @@ function AgentModal({ onSaved, onPersist }) {
   const statusPill = /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1.5", children: [
     /* @__PURE__ */ jsxRuntime.jsx("span", { className: `text-[9px] font-semibold ${status === "active" ? "text-emerald-600 dark:text-emerald-400" : "text-slate-500"}`, children: status === "active" ? t("agentDrawer.statusActive", { _: "Active" }) : t("agentDrawer.statusInactive", { _: "Inactive" }) }),
     /* @__PURE__ */ jsxRuntime.jsx(
-      chunk5ETT54QS_js.ToggleSwitch,
+      chunkFZUV7GNB_js.ToggleSwitch,
       {
         size: "sm",
         color: "green",
@@ -1207,7 +1198,7 @@ function AgentModal({ onSaved, onPersist }) {
     )
   ] });
   const identityCard = /* @__PURE__ */ jsxRuntime.jsx("div", { className: "liquid-surface rounded-2xl p-3 ring-1 ring-slate-200/50 dark:ring-white/10", children: /* @__PURE__ */ jsxRuntime.jsx(
-    chunk5ETT54QS_js.HeroBlock,
+    chunkFZUV7GNB_js.HeroBlock,
     {
       icon: avatarNode,
       iconBackground: "none",
@@ -1270,7 +1261,7 @@ function AgentModal({ onSaved, onPersist }) {
     /* @__PURE__ */ jsxRuntime.jsx("span", { className: `font-medium ${autosaveColor}`, children: autosaveLabel })
   ] });
   return /* @__PURE__ */ jsxRuntime.jsx(
-    chunk5ETT54QS_js.GlassModal,
+    chunkFZUV7GNB_js.GlassModal,
     {
       open,
       onClose: handleClose,
@@ -1287,7 +1278,7 @@ function AgentModal({ onSaved, onPersist }) {
       },
       children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-5", children: [
         /* @__PURE__ */ jsxRuntime.jsx(
-          chunk5ETT54QS_js.SectionCard,
+          chunkFZUV7GNB_js.SectionCard,
           {
             variant: "glass",
             padded: false,
@@ -1327,7 +1318,7 @@ function AgentModal({ onSaved, onPersist }) {
           }
         ),
         /* @__PURE__ */ jsxRuntime.jsx(
-          chunk5ETT54QS_js.SectionCard,
+          chunkFZUV7GNB_js.SectionCard,
           {
             variant: "glass",
             padded: false,
@@ -1355,7 +1346,7 @@ function AgentModal({ onSaved, onPersist }) {
           }
         ),
         /* @__PURE__ */ jsxRuntime.jsx(
-          chunk5ETT54QS_js.SectionCard,
+          chunkFZUV7GNB_js.SectionCard,
           {
             variant: "glass",
             padded: false,
@@ -1451,9 +1442,9 @@ function ConfigSection({ title, icon: Icon, defaultOpen = true, children }) {
         "aria-expanded": open,
         className: "flex w-full items-center gap-2 px-4 py-2.5 text-left hover:bg-white/5",
         children: [
-          open ? /* @__PURE__ */ jsxRuntime.jsx(outline.ChevronDownIcon, { className: "h-3 w-3 text-gray-400" }) : /* @__PURE__ */ jsxRuntime.jsx(outline.ChevronRightIcon, { className: "h-3 w-3 text-gray-400" }),
-          /* @__PURE__ */ jsxRuntime.jsx(Icon, { className: "h-3 w-3 text-gray-400" }),
-          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[10px] font-semibold uppercase tracking-wider text-gray-500 dark:text-gray-400", children: title })
+          open ? /* @__PURE__ */ jsxRuntime.jsx(outline.ChevronDownIcon, { className: "h-3 w-3 text-slate-400" }) : /* @__PURE__ */ jsxRuntime.jsx(outline.ChevronRightIcon, { className: "h-3 w-3 text-slate-400" }),
+          /* @__PURE__ */ jsxRuntime.jsx(Icon, { className: "h-3 w-3 text-slate-400" }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[10px] font-semibold uppercase tracking-wider text-slate-500 dark:text-slate-400", children: title })
         ]
       }
     ),
@@ -1478,7 +1469,7 @@ function SubworkflowModal({ onSaved, onMaximize }) {
   const markDirty = useSubworkflowStore((s) => s.markDirty);
   const markSaved = useSubworkflowStore((s) => s.markSaved);
   const closeModal = useSubworkflowStore((s) => s.closeModal);
-  const agentBehind = chunkD5OTZGA2_js.useModalStore((s) => s.activeModal === "agent" ? s.agentData?.agent?.name : null);
+  const agentBehind = chunk5SCZB5UI_js.useModalStore((s) => s.activeModal === "agent" ? s.agentData?.agent?.name : null);
   const isCreateMode = !tool?.toolId;
   const initialGraph = react.useMemo(() => {
     const config = tool?.config;
@@ -1507,9 +1498,9 @@ function SubworkflowModal({ onSaved, onMaximize }) {
   }, [tool, onSaved, name, category, description, timeoutMs, latestGraphRef, markSaved]);
   if (!tool) return null;
   const categoryKey = category ?? "external";
-  const gradient = tool.color ?? chunkD5OTZGA2_js.CATEGORY_COLORS[categoryKey] ?? chunkD5OTZGA2_js.CATEGORY_COLORS.external;
-  const categoryPill = chunkD5OTZGA2_js.CATEGORY_PILL_COLORS[categoryKey] ?? chunkD5OTZGA2_js.CATEGORY_PILL_COLORS.external;
-  const IconComponent = chunkD5OTZGA2_js.ICON_MAP[tool.icon ?? ""] ?? outline.ArrowPathRoundedSquareIcon;
+  const gradient = tool.color ?? chunk5SCZB5UI_js.CATEGORY_COLORS[categoryKey] ?? chunk5SCZB5UI_js.CATEGORY_COLORS.external;
+  const categoryPill = chunk5SCZB5UI_js.CATEGORY_PILL_COLORS[categoryKey] ?? chunk5SCZB5UI_js.CATEGORY_PILL_COLORS.external;
+  const IconComponent = chunk5SCZB5UI_js.ICON_MAP[tool.icon ?? ""] ?? outline.ArrowPathRoundedSquareIcon;
   const graph = latestGraphRef.current;
   const startNode = graph.nodes.find((n) => n.type === "start");
   const endNode = graph.nodes.find((n) => n.type === "end");
@@ -1520,29 +1511,22 @@ function SubworkflowModal({ onSaved, onMaximize }) {
   const footer = /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between", children: [
     /* @__PURE__ */ jsxRuntime.jsx("div", { role: "status", "aria-live": "polite", className: "text-xs", children: dirty ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-amber-500 dark:text-amber-400", children: t("subworkflowDrawer.unsavedChanges") }) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-emerald-500 dark:text-emerald-400", children: t("subworkflowDrawer.saved") }) }),
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(chunkMXQ2EYG2_js.Button, { type: "button", outline: true, size: "sm", onClick: closeModal, children: t("subworkflowDrawer.cancel") }),
       /* @__PURE__ */ jsxRuntime.jsx(
-        "button",
-        {
-          type: "button",
-          onClick: closeModal,
-          className: "rounded-lg border border-gray-200/50 px-4 py-2 text-xs font-medium text-gray-600 transition-colors hover:bg-gray-100/50 dark:border-white/10 dark:text-gray-300 dark:hover:bg-white/5",
-          children: t("subworkflowDrawer.cancel")
-        }
-      ),
-      /* @__PURE__ */ jsxRuntime.jsx(
-        "button",
+        chunkMXQ2EYG2_js.Button,
         {
           type: "button",
+          color: "ios-teal",
+          size: "sm",
           onClick: handleSave,
-          disabled: isCreateMode && !name.trim(),
-          className: `rounded-lg px-4 py-2 text-xs font-semibold text-white shadow-sm transition-all ${dirty ? "bg-gradient-to-r from-teal-500 to-cyan-500 hover:from-teal-600 hover:to-cyan-600" : "cursor-not-allowed bg-gray-300 dark:bg-gray-700"}`,
+          disabled: isCreateMode && !name.trim() || !dirty,
           children: isCreateMode ? t("subworkflowDrawer.create") : t("subworkflowDrawer.save")
         }
       )
     ] })
   ] });
   return /* @__PURE__ */ jsxRuntime.jsx(
-    chunk5ETT54QS_js.GlassModal,
+    chunkFZUV7GNB_js.GlassModal,
     {
       open,
       onClose: closeModal,
@@ -1557,7 +1541,7 @@ function SubworkflowModal({ onSaved, onMaximize }) {
       children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex h-[80vh] min-h-[600px]", children: [
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex w-72 flex-shrink-0 flex-col overflow-y-auto border-r border-white/10", children: [
           isCreateMode ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "border-b border-white/10 bg-gradient-to-br from-teal-500/15 via-cyan-500/8 to-transparent px-4 py-4 dark:from-teal-500/8 dark:via-cyan-500/4", children: [
-            /* @__PURE__ */ jsxRuntime.jsx("label", { className: "mb-1 block text-[10px] font-semibold uppercase tracking-wider text-gray-500 dark:text-gray-400", children: t("subworkflowDrawer.name") }),
+            /* @__PURE__ */ jsxRuntime.jsx("label", { className: "mb-1 block text-[10px] font-semibold uppercase tracking-wider text-slate-500 dark:text-slate-400", children: t("subworkflowDrawer.name") }),
             /* @__PURE__ */ jsxRuntime.jsx(
               "input",
               {
@@ -1566,7 +1550,7 @@ function SubworkflowModal({ onSaved, onMaximize }) {
                 onChange: (event) => setName(event.target.value),
                 placeholder: t("subworkflowDrawer.namePlaceholder"),
                 autoFocus: true,
-                className: "w-full rounded-lg border border-gray-200/50 bg-white/60 px-3 py-2 text-sm font-medium text-gray-900 outline-none placeholder:text-gray-400 focus:border-teal-300/50 focus:ring-1 focus:ring-teal-300/30 dark:border-white/10 dark:bg-white/5 dark:text-white dark:placeholder:text-gray-500"
+                className: "w-full rounded-lg bg-white/40 dark:bg-white/[0.04] backdrop-blur-sm border border-slate-200/50 dark:border-white/10 px-3 py-2 text-sm font-medium text-slate-900 outline-none placeholder:text-slate-400 focus:border-teal-300/50 focus:ring-1 focus:ring-teal-300/30 dark:text-white dark:placeholder:text-slate-500"
               }
             ),
             /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-3 flex flex-wrap gap-1", children: ["external", "market", "data", "communication", "analytics"].map((cat) => /* @__PURE__ */ jsxRuntime.jsx(
@@ -1574,7 +1558,7 @@ function SubworkflowModal({ onSaved, onMaximize }) {
               {
                 type: "button",
                 onClick: () => setCategory(cat),
-                className: `rounded-full px-2 py-1 text-[9px] font-semibold transition-all ${cat === category ? `${chunkD5OTZGA2_js.CATEGORY_PILL_COLORS[cat] ?? chunkD5OTZGA2_js.CATEGORY_PILL_COLORS.external} ring-1 ring-current/20` : "bg-white/30 text-gray-500 hover:bg-white/50 dark:bg-white/5 dark:text-gray-400"}`,
+                className: `rounded-full px-2 py-1 text-[9px] font-semibold transition-all ${cat === category ? `${chunk5SCZB5UI_js.CATEGORY_PILL_COLORS[cat] ?? chunk5SCZB5UI_js.CATEGORY_PILL_COLORS.external} ring-1 ring-current/20` : "bg-white/30 text-slate-500 hover:bg-white/50 dark:bg-white/5 dark:text-slate-400"}`,
                 children: cat
               },
               cat
@@ -1582,20 +1566,21 @@ function SubworkflowModal({ onSaved, onMaximize }) {
           ] }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "border-b border-white/10 bg-gradient-to-br from-teal-500/15 via-cyan-500/8 to-transparent px-4 py-4 dark:from-teal-500/8 dark:via-cyan-500/4", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3", children: [
             /* @__PURE__ */ jsxRuntime.jsx("div", { className: `flex h-10 w-10 shrink-0 items-center justify-center rounded-xl bg-gradient-to-br ${gradient} shadow-lg`, children: /* @__PURE__ */ jsxRuntime.jsx(IconComponent, { className: "h-5 w-5 text-white" }) }),
             /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "min-w-0 flex-1", children: [
-              /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "truncate text-sm font-bold text-gray-900 dark:text-white", children: name }),
+              /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "truncate text-sm font-bold text-slate-900 dark:text-white", children: name }),
               /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-1 flex flex-wrap gap-1", children: [
                 /* @__PURE__ */ jsxRuntime.jsx("span", { className: "inline-flex items-center rounded-full bg-teal-100 px-1.5 py-0.5 text-[8px] font-semibold text-teal-700 dark:bg-teal-400/15 dark:text-teal-400", children: t("subworkflowDrawer.subworkflow") }),
                 /* @__PURE__ */ jsxRuntime.jsx("span", { className: `inline-flex items-center rounded-full px-1.5 py-0.5 text-[8px] font-medium ${categoryPill}`, children: category })
               ] })
             ] }),
             onMaximize && tool.toolId && /* @__PURE__ */ jsxRuntime.jsx(
-              "button",
+              chunkMXQ2EYG2_js.IconButton,
               {
-                type: "button",
+                label: t("subworkflowDrawer.openFullEditor"),
+                variant: "ghost",
+                size: "sm",
+                color: "ios-teal",
                 onClick: () => onMaximize(tool.toolId),
-                title: t("subworkflowDrawer.openFullEditor"),
-                className: "flex h-8 w-8 shrink-0 items-center justify-center rounded-lg text-gray-400 transition-colors hover:bg-white/10 hover:text-teal-500 dark:hover:text-teal-400",
-                children: /* @__PURE__ */ jsxRuntime.jsx(outline.ArrowsPointingOutIcon, { className: "h-4 w-4" })
+                icon: /* @__PURE__ */ jsxRuntime.jsx(outline.ArrowsPointingOutIcon, { className: "h-4 w-4" })
               }
             )
           ] }) }),
@@ -1606,19 +1591,19 @@ function SubworkflowModal({ onSaved, onMaximize }) {
               onChange: (event) => setDescription(event.target.value),
               rows: 2,
               placeholder: t("subworkflowDrawer.descriptionPlaceholder"),
-              className: "w-full resize-none rounded-lg border border-gray-200/50 bg-gray-50/50 px-2.5 py-2 text-[11px] leading-relaxed text-gray-700 outline-none placeholder:text-gray-400 focus:border-teal-300/50 dark:border-white/10 dark:bg-white/5 dark:text-gray-300 dark:placeholder:text-gray-500"
+              className: "w-full resize-none rounded-lg bg-white/40 dark:bg-white/[0.04] backdrop-blur-sm border border-slate-200/50 dark:border-white/10 px-2.5 py-2 text-[11px] leading-relaxed text-slate-700 outline-none placeholder:text-slate-400 focus:border-teal-300/50 dark:text-slate-300 dark:placeholder:text-slate-500"
             }
           ) }),
-          /* @__PURE__ */ jsxRuntime.jsx(ConfigSection, { title: t("subworkflowDrawer.inputVariables"), icon: outline.ArrowsPointingInIcon, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-wrap gap-1", children: inputVariables.length > 0 ? inputVariables.map((variable) => /* @__PURE__ */ jsxRuntime.jsx(VariableChip, { name: variable.name, type: variable.type }, variable.name)) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[10px] text-gray-400 dark:text-gray-500", children: t("subworkflowDrawer.noVariables") }) }) }),
-          /* @__PURE__ */ jsxRuntime.jsx(ConfigSection, { title: t("subworkflowDrawer.outputVariables"), icon: outline.ArrowsPointingOutIcon, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-wrap gap-1", children: outputVariables.length > 0 ? outputVariables.map((variable) => /* @__PURE__ */ jsxRuntime.jsx(OutputChip, { name: variable.name, type: variable.type }, variable.name)) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[10px] text-gray-400 dark:text-gray-500", children: t("subworkflowDrawer.noVariables") }) }) }),
+          /* @__PURE__ */ jsxRuntime.jsx(ConfigSection, { title: t("subworkflowDrawer.inputVariables"), icon: outline.ArrowsPointingInIcon, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-wrap gap-1", children: inputVariables.length > 0 ? inputVariables.map((variable) => /* @__PURE__ */ jsxRuntime.jsx(VariableChip, { name: variable.name, type: variable.type }, variable.name)) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[10px] text-slate-400 dark:text-slate-500", children: t("subworkflowDrawer.noVariables") }) }) }),
+          /* @__PURE__ */ jsxRuntime.jsx(ConfigSection, { title: t("subworkflowDrawer.outputVariables"), icon: outline.ArrowsPointingOutIcon, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-wrap gap-1", children: outputVariables.length > 0 ? outputVariables.map((variable) => /* @__PURE__ */ jsxRuntime.jsx(OutputChip, { name: variable.name, type: variable.type }, variable.name)) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[10px] text-slate-400 dark:text-slate-500", children: t("subworkflowDrawer.noVariables") }) }) }),
           /* @__PURE__ */ jsxRuntime.jsxs(ConfigSection, { title: t("subworkflowDrawer.executionSettings"), icon: outline.BoltIcon, defaultOpen: false, children: [
             /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-3", children: [
               /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-1 flex items-center justify-between", children: [
-                /* @__PURE__ */ jsxRuntime.jsxs("label", { className: "flex items-center gap-1 text-[10px] text-gray-600 dark:text-gray-400", children: [
+                /* @__PURE__ */ jsxRuntime.jsxs("label", { className: "flex items-center gap-1 text-[10px] text-slate-600 dark:text-slate-400", children: [
                   /* @__PURE__ */ jsxRuntime.jsx(outline.ClockIcon, { className: "h-3 w-3" }),
                   t("subworkflowDrawer.timeout")
                 ] }),
-                /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-[10px] font-bold tabular-nums text-gray-900 dark:text-white", children: [
+                /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-[10px] font-bold tabular-nums text-slate-900 dark:text-white", children: [
                   (timeoutMs / 1e3).toFixed(0),
                   "s"
                 ] })
@@ -1637,21 +1622,21 @@ function SubworkflowModal({ onSaved, onMaximize }) {
                   "aria-valuemax": 30,
                   "aria-valuenow": timeoutMs / 1e3,
                   "aria-valuetext": `${(timeoutMs / 1e3).toFixed(0)} seconds`,
-                  className: "h-3 w-full cursor-pointer appearance-none rounded-full bg-gray-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-teal-500 dark:bg-gray-700 [&::-webkit-slider-thumb]:h-3 [&::-webkit-slider-thumb]:w-3 [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:bg-teal-500"
+                  className: "h-3 w-full cursor-pointer appearance-none rounded-full bg-slate-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-teal-500 dark:bg-slate-700 [&::-webkit-slider-thumb]:h-3 [&::-webkit-slider-thumb]:w-3 [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:bg-teal-500"
                 }
               )
             ] }),
             /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
               /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-1 flex items-center justify-between", children: [
-                /* @__PURE__ */ jsxRuntime.jsx("label", { className: "text-[10px] text-gray-600 dark:text-gray-400", children: t("subworkflowDrawer.retries") }),
-                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[10px] font-bold tabular-nums text-gray-900 dark:text-white", children: retryCount })
+                /* @__PURE__ */ jsxRuntime.jsx("label", { className: "text-[10px] text-slate-600 dark:text-slate-400", children: t("subworkflowDrawer.retries") }),
+                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[10px] font-bold tabular-nums text-slate-900 dark:text-white", children: retryCount })
               ] }),
               /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex gap-1", children: [0, 1, 2, 3].map((count) => /* @__PURE__ */ jsxRuntime.jsx(
                 "button",
                 {
                   type: "button",
                   onClick: () => setRetryCount(count),
-                  className: `flex-1 rounded py-1 text-[10px] font-medium transition-all ${count === retryCount ? "bg-teal-500 text-white" : "bg-gray-100 text-gray-500 dark:bg-white/5 dark:text-gray-400"}`,
+                  className: `flex-1 rounded py-1 text-[10px] font-medium transition-all ${count === retryCount ? "bg-teal-500 text-white" : "bg-white/40 text-slate-500 dark:bg-white/5 dark:text-slate-400"}`,
                   children: count
                 },
                 count
@@ -1661,7 +1646,7 @@ function SubworkflowModal({ onSaved, onMaximize }) {
           /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-auto" })
         ] }),
         /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1", children: /* @__PURE__ */ jsxRuntime.jsx(
-          chunkD5OTZGA2_js.WorkflowCanvas,
+          chunk5SCZB5UI_js.WorkflowCanvas,
           {
             initialGraph,
             agents: [],
@@ -1677,9 +1662,9 @@ function SubworkflowModal({ onSaved, onMaximize }) {
 }
 function PipelineSettingsModal({ onSave }) {
   const t = chunkY5VN4SPH_js.useTranslations("agents.workflow");
-  const activeModal = chunkD5OTZGA2_js.useModalStore((s) => s.activeModal);
-  const data = chunkD5OTZGA2_js.useModalStore((s) => s.pipelineSettingsData);
-  const closeModal = chunkD5OTZGA2_js.useModalStore((s) => s.closeModal);
+  const activeModal = chunk5SCZB5UI_js.useModalStore((s) => s.activeModal);
+  const data = chunk5SCZB5UI_js.useModalStore((s) => s.pipelineSettingsData);
+  const closeModal = chunk5SCZB5UI_js.useModalStore((s) => s.closeModal);
   const open = activeModal === "pipeline-settings";
   const [nameValue, setNameValue] = react.useState("");
   const [descriptionValue, setDescriptionValue] = react.useState("");
@@ -1730,17 +1715,9 @@ function PipelineSettingsModal({ onSave }) {
     }
   };
   const footer = /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-end gap-2", children: [
-    /* @__PURE__ */ jsxRuntime.jsx(
-      "button",
-      {
-        type: "button",
-        onClick: closeModal,
-        className: "rounded-lg border border-gray-200/50 px-4 py-2 text-xs font-medium text-gray-600 transition-colors hover:bg-gray-100/50 dark:border-white/10 dark:text-gray-300 dark:hover:bg-white/5",
-        children: t("cancel")
-      }
-    ),
+    /* @__PURE__ */ jsxRuntime.jsx(chunkMXQ2EYG2_js.Button, { type: "button", outline: true, size: "sm", onClick: closeModal, children: t("cancel") }),
     /* @__PURE__ */ jsxRuntime.jsxs(
-      chunkBHOT22QL_js.Button,
+      chunkMXQ2EYG2_js.Button,
       {
         type: "button",
         onClick: () => {
@@ -1757,7 +1734,7 @@ function PipelineSettingsModal({ onSave }) {
     )
   ] });
   return /* @__PURE__ */ jsxRuntime.jsx(
-    chunk5ETT54QS_js.GlassModal,
+    chunkFZUV7GNB_js.GlassModal,
     {
       open,
       onClose: closeModal,
@@ -1780,7 +1757,7 @@ function PipelineSettingsModal({ onSave }) {
           },
           children: [
             /* @__PURE__ */ jsxRuntime.jsx(
-              chunk5ETT54QS_js.FormInput,
+              chunkFZUV7GNB_js.FormInput,
               {
                 label: t("pipelineName"),
                 value: nameValue,
@@ -1790,7 +1767,7 @@ function PipelineSettingsModal({ onSave }) {
               }
             ),
             /* @__PURE__ */ jsxRuntime.jsx(
-              chunk5ETT54QS_js.FormTextarea,
+              chunkFZUV7GNB_js.FormTextarea,
               {
                 label: t("pipelineDescription"),
                 value: descriptionValue,
@@ -1801,7 +1778,7 @@ function PipelineSettingsModal({ onSave }) {
             ),
             lifecycleAvailable && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
               /* @__PURE__ */ jsxRuntime.jsx(
-                chunk5ETT54QS_js.FormInput,
+                chunkFZUV7GNB_js.FormInput,
                 {
                   label: t("pipelineSlug", { _: "Slug" }),
                   value: slugValue,
@@ -1812,12 +1789,12 @@ function PipelineSettingsModal({ onSave }) {
                   })
                 }
               ),
-              /* @__PURE__ */ jsxRuntime.jsxs("fieldset", { className: "space-y-2 rounded-xl border border-gray-200/60 bg-gray-50/60 p-3 dark:border-white/10 dark:bg-white/5", children: [
-                /* @__PURE__ */ jsxRuntime.jsx("legend", { className: "px-1 text-xs font-medium text-gray-600 dark:text-gray-300", children: t("pipelineLifecycle", { _: "Lifecycle" }) }),
-                /* @__PURE__ */ jsxRuntime.jsxs("label", { className: "flex items-center justify-between gap-3 text-sm text-gray-700 dark:text-gray-200", children: [
+              /* @__PURE__ */ jsxRuntime.jsxs("fieldset", { className: "space-y-2 rounded-xl liquid-surface p-3", children: [
+                /* @__PURE__ */ jsxRuntime.jsx("legend", { className: "px-1 text-xs font-medium text-slate-600 dark:text-slate-300", children: t("pipelineLifecycle", { _: "Lifecycle" }) }),
+                /* @__PURE__ */ jsxRuntime.jsxs("label", { className: "flex items-center justify-between gap-3 text-sm text-slate-700 dark:text-slate-200", children: [
                   /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
                     t("pipelineIsDraft", { _: "Draft mode" }),
-                    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ml-2 text-[11px] text-gray-400", children: isDraft ? t("pipelineIsDraftOn", { _: "Editable \u2014 changes do not affect runs." }) : t("pipelineIsDraftOff", { _: "Published \u2014 edits require a new version." }) })
+                    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ml-2 text-[11px] text-slate-400", children: isDraft ? t("pipelineIsDraftOn", { _: "Editable \u2014 changes do not affect runs." }) : t("pipelineIsDraftOff", { _: "Published \u2014 edits require a new version." }) })
                   ] }),
                   /* @__PURE__ */ jsxRuntime.jsx(
                     "input",
@@ -1825,14 +1802,14 @@ function PipelineSettingsModal({ onSave }) {
                       type: "checkbox",
                       checked: isDraft,
                       onChange: (event) => setIsDraft(event.target.checked),
-                      className: "h-4 w-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-500"
+                      className: "h-4 w-4 rounded border-slate-300 text-indigo-600 focus:ring-indigo-500/70 focus:ring-offset-1"
                     }
                   )
                 ] }),
-                /* @__PURE__ */ jsxRuntime.jsxs("label", { className: "flex items-center justify-between gap-3 text-sm text-gray-700 dark:text-gray-200", children: [
+                /* @__PURE__ */ jsxRuntime.jsxs("label", { className: "flex items-center justify-between gap-3 text-sm text-slate-700 dark:text-slate-200", children: [
                   /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
                     t("pipelineIsActive", { _: "Active" }),
-                    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ml-2 text-[11px] text-gray-400", children: isActive ? t("pipelineIsActiveOn", { _: "Visible in listings and runnable." }) : t("pipelineIsActiveOff", { _: "Archived \u2014 hidden from the default listing." }) })
+                    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ml-2 text-[11px] text-slate-400", children: isActive ? t("pipelineIsActiveOn", { _: "Visible in listings and runnable." }) : t("pipelineIsActiveOff", { _: "Archived \u2014 hidden from the default listing." }) })
                   ] }),
                   /* @__PURE__ */ jsxRuntime.jsx(
                     "input",
@@ -1840,7 +1817,7 @@ function PipelineSettingsModal({ onSave }) {
                       type: "checkbox",
                       checked: isActive,
                       onChange: (event) => setIsActive(event.target.checked),
-                      className: "h-4 w-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-500"
+                      className: "h-4 w-4 rounded border-slate-300 text-indigo-600 focus:ring-indigo-500/70 focus:ring-offset-1"
                     }
                   )
                 ] })
@@ -1913,24 +1890,16 @@ function RunReplayModal({
     }
   };
   const footer = /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between gap-2", children: [
-    /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-[11px] text-gray-400", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-[11px] text-slate-400", children: [
       "run ",
       /* @__PURE__ */ jsxRuntime.jsx("code", { children: runId.slice(0, 8) }),
       " \xB7 wf ",
       /* @__PURE__ */ jsxRuntime.jsx("code", { children: workflowId.slice(0, 8) })
     ] }),
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
-      /* @__PURE__ */ jsxRuntime.jsx(
-        "button",
-        {
-          type: "button",
-          onClick: onClose,
-          className: "rounded-lg border border-gray-200/50 px-4 py-2 text-xs font-medium text-gray-600 transition-colors hover:bg-gray-100/50 dark:border-white/10 dark:text-gray-300 dark:hover:bg-white/5",
-          children: t("cancel")
-        }
-      ),
+      /* @__PURE__ */ jsxRuntime.jsx(chunkMXQ2EYG2_js.Button, { type: "button", outline: true, size: "sm", onClick: onClose, children: t("cancel") }),
       /* @__PURE__ */ jsxRuntime.jsxs(
-        chunkBHOT22QL_js.Button,
+        chunkMXQ2EYG2_js.Button,
         {
           type: "submit",
           form: "run-replay-form",
@@ -1945,7 +1914,7 @@ function RunReplayModal({
     ] })
   ] });
   return /* @__PURE__ */ jsxRuntime.jsx(
-    chunk5ETT54QS_js.GlassModal,
+    chunkFZUV7GNB_js.GlassModal,
     {
       open,
       onClose,
@@ -1969,7 +1938,7 @@ function RunReplayModal({
           },
           className: "space-y-3",
           children: [
-            rows.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-gray-500 dark:text-gray-400", children: t("replayNoInputs", { _: "This run had no input variables \u2014 replaying will execute the workflow as-is." }) }) : rows.map((row, index) => /* @__PURE__ */ jsxRuntime.jsx(
+            rows.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-slate-500 dark:text-slate-400", children: t("replayNoInputs", { _: "This run had no input variables \u2014 replaying will execute the workflow as-is." }) }) : rows.map((row, index) => /* @__PURE__ */ jsxRuntime.jsx(
               RowEditor,
               {
                 row,
@@ -1991,20 +1960,12 @@ function RowEditor({
   onReset
 }) {
   const isJson = row.kind === "json";
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "rounded-xl border border-gray-200/60 bg-gray-50/60 p-3 dark:border-white/10 dark:bg-white/5", children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "rounded-xl border border-slate-200/60 bg-slate-50/60 p-3 dark:border-white/10 dark:bg-white/5", children: [
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-2 flex items-center justify-between gap-2", children: [
-      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-mono text-xs text-gray-700 dark:text-gray-200", children: row.key }),
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-mono text-xs text-slate-700 dark:text-slate-200", children: row.key }),
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
-        /* @__PURE__ */ jsxRuntime.jsx(chunkBHOT22QL_js.Badge, { color: "zinc", size: "xs", className: "uppercase tracking-wider", children: row.kind }),
-        row.touched && /* @__PURE__ */ jsxRuntime.jsx(
-          "button",
-          {
-            type: "button",
-            onClick: onReset,
-            className: "text-[11px] text-indigo-600 hover:text-indigo-500 dark:text-indigo-400",
-            children: "reset"
-          }
-        )
+        /* @__PURE__ */ jsxRuntime.jsx(chunkMXQ2EYG2_js.Badge, { color: "zinc", size: "xs", className: "uppercase tracking-wider", children: row.kind }),
+        row.touched && /* @__PURE__ */ jsxRuntime.jsx(chunkMXQ2EYG2_js.Button, { type: "button", plain: true, size: "xs", onClick: onReset, children: "reset" })
       ] })
     ] }),
     row.kind === "boolean" ? /* @__PURE__ */ jsxRuntime.jsxs(
@@ -2012,14 +1973,14 @@ function RowEditor({
       {
         value: row.value,
         onChange: (event) => onChange({ value: event.target.value }),
-        className: "w-full rounded-lg border border-gray-200/50 bg-white/70 px-3 py-2 text-sm text-gray-900 dark:border-white/10 dark:bg-gray-800/70 dark:text-gray-100",
+        className: "w-full rounded-lg border border-slate-200/50 bg-white/70 px-3 py-2 text-sm text-slate-900 dark:border-white/10 dark:bg-slate-800/70 dark:text-slate-100",
         children: [
           /* @__PURE__ */ jsxRuntime.jsx("option", { value: "true", children: "true" }),
           /* @__PURE__ */ jsxRuntime.jsx("option", { value: "false", children: "false" })
         ]
       }
     ) : isJson ? /* @__PURE__ */ jsxRuntime.jsx(
-      chunk5ETT54QS_js.FormTextarea,
+      chunkFZUV7GNB_js.FormTextarea,
       {
         value: row.value,
         onValueChange: (v) => onChange({ value: v }),
@@ -2027,7 +1988,7 @@ function RowEditor({
         className: "font-mono"
       }
     ) : /* @__PURE__ */ jsxRuntime.jsx(
-      chunk5ETT54QS_js.FormInput,
+      chunkFZUV7GNB_js.FormInput,
       {
         type: row.kind === "number" ? "number" : "text",
         value: row.value,
@@ -2131,7 +2092,7 @@ function ExecutionTimelinePanel({
                   /* @__PURE__ */ jsxRuntime.jsx("div", { className: "truncate font-medium text-slate-900 dark:text-white", children: entry.nodeId }),
                   /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-xs text-slate-500 dark:text-slate-400", children: entry.nodeType })
                 ] }),
-                /* @__PURE__ */ jsxRuntime.jsxs(chunkBHOT22QL_js.Badge, { color: meta.color, children: [
+                /* @__PURE__ */ jsxRuntime.jsxs(chunkMXQ2EYG2_js.Badge, { color: meta.color, children: [
                   /* @__PURE__ */ jsxRuntime.jsx(Icon, { className: "mr-1 h-3 w-3" }),
                   labels[entry.status]
                 ] })
@@ -2161,7 +2122,7 @@ function NodeInspector({
         /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "truncate text-base font-semibold text-slate-900 dark:text-white", children: entry.nodeId }),
         /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-slate-500 dark:text-slate-400", children: entry.nodeType })
       ] }),
-      /* @__PURE__ */ jsxRuntime.jsx(chunkBHOT22QL_js.Badge, { color: meta.color, children: labels[entry.status] })
+      /* @__PURE__ */ jsxRuntime.jsx(chunkMXQ2EYG2_js.Badge, { color: meta.color, children: labels[entry.status] })
     ] }),
     /* @__PURE__ */ jsxRuntime.jsxs("dl", { className: "grid grid-cols-2 gap-3 text-xs text-slate-500 dark:text-slate-400", children: [
       /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
@@ -2331,7 +2292,7 @@ function RuleConditionBuilder({ value, onChange, depth = 0 }) {
   };
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-3 rounded-xl border border-slate-200 bg-slate-50/60 p-3 dark:border-slate-700 dark:bg-slate-900/40", children: [
     /* @__PURE__ */ jsxRuntime.jsx(
-      chunk5ETT54QS_js.FormSelect,
+      chunkFZUV7GNB_js.FormSelect,
       {
         label: "Operator",
         value: value.operator,
@@ -2354,7 +2315,7 @@ function SimpleEditor({
   const isTruthy = value.operator === "truthy";
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-1 gap-3 sm:grid-cols-2", children: [
     /* @__PURE__ */ jsxRuntime.jsx(
-      chunk5ETT54QS_js.FormInput,
+      chunkFZUV7GNB_js.FormInput,
       {
         label: "Field",
         hint: "Dotted reference into the variable pool \u2014 e.g. `parse-pricing.margin`, `inputs.category`",
@@ -2364,7 +2325,7 @@ function SimpleEditor({
       }
     ),
     !isTruthy && /* @__PURE__ */ jsxRuntime.jsx(
-      chunk5ETT54QS_js.FormInput,
+      chunkFZUV7GNB_js.FormInput,
       {
         label: "Value",
         hint: "Literal. Numeric operators coerce via `as f64`.",
@@ -2380,7 +2341,7 @@ function ThresholdEditor({
 }) {
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-1 gap-3 sm:grid-cols-3", children: [
     /* @__PURE__ */ jsxRuntime.jsx(
-      chunk5ETT54QS_js.FormInput,
+      chunkFZUV7GNB_js.FormInput,
       {
         label: "Field",
         value: value.field ?? "",
@@ -2389,7 +2350,7 @@ function ThresholdEditor({
       }
     ),
     /* @__PURE__ */ jsxRuntime.jsx(
-      chunk5ETT54QS_js.FormSelect,
+      chunkFZUV7GNB_js.FormSelect,
       {
         label: "Direction",
         value: value.comparison ?? "gte",
@@ -2403,7 +2364,7 @@ function ThresholdEditor({
       }
     ),
     /* @__PURE__ */ jsxRuntime.jsx(
-      chunk5ETT54QS_js.FormInput,
+      chunkFZUV7GNB_js.FormInput,
       {
         label: "Threshold",
         type: "number",
@@ -2420,7 +2381,7 @@ function RegexEditor({
 }) {
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-1 gap-3 sm:grid-cols-2", children: [
     /* @__PURE__ */ jsxRuntime.jsx(
-      chunk5ETT54QS_js.FormInput,
+      chunkFZUV7GNB_js.FormInput,
       {
         label: "Field",
         value: value.field ?? "",
@@ -2429,7 +2390,7 @@ function RegexEditor({
       }
     ),
     /* @__PURE__ */ jsxRuntime.jsx(
-      chunk5ETT54QS_js.FormInput,
+      chunkFZUV7GNB_js.FormInput,
       {
         label: "Pattern",
         hint: "Rust regex syntax \u2014 `(?i)` etc. supported.",
@@ -2457,7 +2418,7 @@ function TimeWindowEditor({
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-3", children: [
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-1 gap-3 sm:grid-cols-2", children: [
       /* @__PURE__ */ jsxRuntime.jsx(
-        chunk5ETT54QS_js.FormSelect,
+        chunkFZUV7GNB_js.FormSelect,
         {
           label: "Timezone",
           value: value.timezone ?? "UTC",
@@ -2466,7 +2427,7 @@ function TimeWindowEditor({
         }
       ),
       /* @__PURE__ */ jsxRuntime.jsx(
-        chunk5ETT54QS_js.FormInput,
+        chunkFZUV7GNB_js.FormInput,
         {
           label: "Timestamp field (optional)",
           hint: "Pulls a timestamp from the pool. Leave blank to use the run's wall-clock.",
@@ -2479,7 +2440,7 @@ function TimeWindowEditor({
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
       windows.map((win, index) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-[1fr_1fr_auto] items-end gap-2 rounded-lg border border-slate-200 p-2 dark:border-slate-700", children: [
         /* @__PURE__ */ jsxRuntime.jsx(
-          chunk5ETT54QS_js.FormInput,
+          chunkFZUV7GNB_js.FormInput,
           {
             label: `Start (hour)`,
             type: "number",
@@ -2490,7 +2451,7 @@ function TimeWindowEditor({
           }
         ),
         /* @__PURE__ */ jsxRuntime.jsx(
-          chunk5ETT54QS_js.FormInput,
+          chunkFZUV7GNB_js.FormInput,
           {
             label: `End (hour)`,
             type: "number",
@@ -2500,9 +2461,9 @@ function TimeWindowEditor({
             onValueChange: (raw) => update(index, { endHour: clampHour(raw, 24) })
           }
         ),
-        /* @__PURE__ */ jsxRuntime.jsx(chunkBHOT22QL_js.Button, { type: "button", plain: true, onClick: () => remove(index), children: "Remove" })
+        /* @__PURE__ */ jsxRuntime.jsx(chunkMXQ2EYG2_js.Button, { type: "button", plain: true, onClick: () => remove(index), children: "Remove" })
       ] }, index)),
-      /* @__PURE__ */ jsxRuntime.jsx(chunkBHOT22QL_js.Button, { type: "button", outline: true, onClick: add, children: "+ Add window" })
+      /* @__PURE__ */ jsxRuntime.jsx(chunkMXQ2EYG2_js.Button, { type: "button", outline: true, onClick: add, children: "+ Add window" })
     ] })
   ] });
 }
@@ -2525,7 +2486,7 @@ function BooleanGroupEditor({
   });
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-3", children: [
     /* @__PURE__ */ jsxRuntime.jsx(
-      chunk5ETT54QS_js.FormSelect,
+      chunkFZUV7GNB_js.FormSelect,
       {
         label: "Combinator",
         value: value.combinator ?? "and",
@@ -2543,9 +2504,9 @@ function BooleanGroupEditor({
             depth
           }
         ),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-2 text-right", children: /* @__PURE__ */ jsxRuntime.jsx(chunkBHOT22QL_js.Button, { type: "button", plain: true, onClick: () => remove(index), children: "Remove operand" }) })
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-2 text-right", children: /* @__PURE__ */ jsxRuntime.jsx(chunkMXQ2EYG2_js.Button, { type: "button", plain: true, onClick: () => remove(index), children: "Remove operand" }) })
       ] }, index)),
-      /* @__PURE__ */ jsxRuntime.jsx(chunkBHOT22QL_js.Button, { type: "button", outline: true, onClick: add, children: "+ Add operand" })
+      /* @__PURE__ */ jsxRuntime.jsx(chunkMXQ2EYG2_js.Button, { type: "button", outline: true, onClick: add, children: "+ Add operand" })
     ] })
   ] });
 }
@@ -2581,7 +2542,7 @@ function RuleActionBuilder({ value, onChange }) {
   };
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-3 rounded-xl border border-slate-200 bg-slate-50/60 p-3 dark:border-slate-700 dark:bg-slate-900/40", children: [
     /* @__PURE__ */ jsxRuntime.jsx(
-      chunk5ETT54QS_js.FormSelect,
+      chunkFZUV7GNB_js.FormSelect,
       {
         label: "Action type",
         value: type,
@@ -2591,7 +2552,7 @@ function RuleActionBuilder({ value, onChange }) {
     ),
     type === "adjust_price" && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-1 gap-3 sm:grid-cols-2", children: [
       /* @__PURE__ */ jsxRuntime.jsx(
-        chunk5ETT54QS_js.FormInput,
+        chunkFZUV7GNB_js.FormInput,
         {
           label: "Multiplier",
           type: "number",
@@ -2601,7 +2562,7 @@ function RuleActionBuilder({ value, onChange }) {
         }
       ),
       /* @__PURE__ */ jsxRuntime.jsx(
-        chunk5ETT54QS_js.FormInput,
+        chunkFZUV7GNB_js.FormInput,
         {
           label: "Reason code",
           value: stringParam(params.reason),
@@ -2611,7 +2572,7 @@ function RuleActionBuilder({ value, onChange }) {
       )
     ] }),
     type === "enforce_min_margin" && /* @__PURE__ */ jsxRuntime.jsx(
-      chunk5ETT54QS_js.FormInput,
+      chunkFZUV7GNB_js.FormInput,
       {
         label: "Floor (fraction, e.g. 0.08)",
         type: "number",
@@ -2621,7 +2582,7 @@ function RuleActionBuilder({ value, onChange }) {
       }
     ),
     type === "realign_to_competitor" && /* @__PURE__ */ jsxRuntime.jsx(
-      chunk5ETT54QS_js.FormInput,
+      chunkFZUV7GNB_js.FormInput,
       {
         label: "Tolerance (fraction)",
         type: "number",
@@ -2631,7 +2592,7 @@ function RuleActionBuilder({ value, onChange }) {
       }
     ),
     type === "request_manager_approval" && /* @__PURE__ */ jsxRuntime.jsx(
-      chunk5ETT54QS_js.FormInput,
+      chunkFZUV7GNB_js.FormInput,
       {
         label: "Approval limit (fraction)",
         type: "number",
@@ -2641,7 +2602,7 @@ function RuleActionBuilder({ value, onChange }) {
       }
     ),
     type === "round_to" && /* @__PURE__ */ jsxRuntime.jsx(
-      chunk5ETT54QS_js.FormInput,
+      chunkFZUV7GNB_js.FormInput,
       {
         label: "Step (e.g. 0.009)",
         type: "number",
@@ -2652,7 +2613,7 @@ function RuleActionBuilder({ value, onChange }) {
     ),
     type === "alert" && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-1 gap-3 sm:grid-cols-2", children: [
       /* @__PURE__ */ jsxRuntime.jsx(
-        chunk5ETT54QS_js.FormInput,
+        chunkFZUV7GNB_js.FormInput,
         {
           label: "Channel",
           value: stringParam(params.channel),
@@ -2661,7 +2622,7 @@ function RuleActionBuilder({ value, onChange }) {
         }
       ),
       /* @__PURE__ */ jsxRuntime.jsx(
-        chunk5ETT54QS_js.FormInput,
+        chunkFZUV7GNB_js.FormInput,
         {
           label: "Severity",
           value: stringParam(params.severity),
@@ -2699,7 +2660,7 @@ function CustomParamsEditor({
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
     entries.map(([key, value], index) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-[1fr_1fr_auto] items-end gap-2", children: [
       /* @__PURE__ */ jsxRuntime.jsx(
-        chunk5ETT54QS_js.FormInput,
+        chunkFZUV7GNB_js.FormInput,
         {
           label: "Key",
           value: key,
@@ -2707,16 +2668,16 @@ function CustomParamsEditor({
         }
       ),
       /* @__PURE__ */ jsxRuntime.jsx(
-        chunk5ETT54QS_js.FormInput,
+        chunkFZUV7GNB_js.FormInput,
         {
           label: "Value",
           value: String(value ?? ""),
           onValueChange: (raw) => update(index, key, raw)
         }
       ),
-      /* @__PURE__ */ jsxRuntime.jsx(chunkBHOT22QL_js.Button, { type: "button", plain: true, onClick: () => remove(index), children: "Remove" })
+      /* @__PURE__ */ jsxRuntime.jsx(chunkMXQ2EYG2_js.Button, { type: "button", plain: true, onClick: () => remove(index), children: "Remove" })
     ] }, index)),
-    /* @__PURE__ */ jsxRuntime.jsx(chunkBHOT22QL_js.Button, { type: "button", outline: true, onClick: add, children: "+ Add param" })
+    /* @__PURE__ */ jsxRuntime.jsx(chunkMXQ2EYG2_js.Button, { type: "button", outline: true, onClick: add, children: "+ Add param" })
   ] });
 }
 function numberParam(value, fallback) {
@@ -2746,9 +2707,9 @@ function RuleForm({ value, onChange }) {
   );
   const update = (key, v) => onChange({ ...value, [key]: v });
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-5", children: [
-    /* @__PURE__ */ jsxRuntime.jsxs(chunk5ETT54QS_js.FormGrid, { children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(chunkFZUV7GNB_js.FormGrid, { children: [
       /* @__PURE__ */ jsxRuntime.jsx(
-        chunk5ETT54QS_js.FormInput,
+        chunkFZUV7GNB_js.FormInput,
         {
           label: "Name",
           required: true,
@@ -2757,7 +2718,7 @@ function RuleForm({ value, onChange }) {
         }
       ),
       /* @__PURE__ */ jsxRuntime.jsx(
-        chunk5ETT54QS_js.FormInput,
+        chunkFZUV7GNB_js.FormInput,
         {
           label: "Priority",
           type: "number",
@@ -2767,7 +2728,7 @@ function RuleForm({ value, onChange }) {
         }
       ),
       /* @__PURE__ */ jsxRuntime.jsx(
-        chunk5ETT54QS_js.FormSelect,
+        chunkFZUV7GNB_js.FormSelect,
         {
           label: "Enabled",
           value: value.enabled ? "true" : "false",
@@ -2779,7 +2740,7 @@ function RuleForm({ value, onChange }) {
         }
       ),
       /* @__PURE__ */ jsxRuntime.jsx(
-        chunk5ETT54QS_js.FormTextarea,
+        chunkFZUV7GNB_js.FormTextarea,
         {
           label: "Description",
           rows: 2,
@@ -2791,7 +2752,7 @@ function RuleForm({ value, onChange }) {
     /* @__PURE__ */ jsxRuntime.jsxs("section", { children: [
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-2 flex items-center justify-between", children: [
         /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-sm font-semibold text-slate-700 dark:text-slate-200", children: "Condition" }),
-        /* @__PURE__ */ jsxRuntime.jsx(chunkBHOT22QL_js.Badge, { color: "indigo", children: value.condition.operator })
+        /* @__PURE__ */ jsxRuntime.jsx(chunkMXQ2EYG2_js.Badge, { color: "indigo", children: value.condition.operator })
       ] }),
       /* @__PURE__ */ jsxRuntime.jsx(
         RuleConditionBuilder,
@@ -2804,7 +2765,7 @@ function RuleForm({ value, onChange }) {
     /* @__PURE__ */ jsxRuntime.jsxs("section", { children: [
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-2 flex items-center justify-between", children: [
         /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-sm font-semibold text-slate-700 dark:text-slate-200", children: "Action on match" }),
-        /* @__PURE__ */ jsxRuntime.jsx(chunkBHOT22QL_js.Badge, { color: "fuchsia", children: value.action.type })
+        /* @__PURE__ */ jsxRuntime.jsx(chunkMXQ2EYG2_js.Badge, { color: "fuchsia", children: value.action.type })
       ] }),
       /* @__PURE__ */ jsxRuntime.jsx(
         RuleActionBuilder,
@@ -2826,7 +2787,7 @@ function RuleForm({ value, onChange }) {
       ),
       showAdvanced && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-3 grid grid-cols-1 gap-3 sm:grid-cols-2", children: [
         /* @__PURE__ */ jsxRuntime.jsx(
-          chunk5ETT54QS_js.FormInput,
+          chunkFZUV7GNB_js.FormInput,
           {
             label: "Valid from (ISO 8601)",
             type: "datetime-local",
@@ -2835,7 +2796,7 @@ function RuleForm({ value, onChange }) {
           }
         ),
         /* @__PURE__ */ jsxRuntime.jsx(
-          chunk5ETT54QS_js.FormInput,
+          chunkFZUV7GNB_js.FormInput,
           {
             label: "Valid until (ISO 8601)",
             type: "datetime-local",
@@ -2844,7 +2805,7 @@ function RuleForm({ value, onChange }) {
           }
         ),
         /* @__PURE__ */ jsxRuntime.jsx(
-          chunk5ETT54QS_js.FormSelect,
+          chunkFZUV7GNB_js.FormSelect,
           {
             label: "Status",
             value: value.status ?? "active",
@@ -2853,7 +2814,7 @@ function RuleForm({ value, onChange }) {
           }
         ),
         /* @__PURE__ */ jsxRuntime.jsx(
-          chunk5ETT54QS_js.FormInput,
+          chunkFZUV7GNB_js.FormInput,
           {
             label: "Tags (comma-separated)",
             value: (value.tags ?? []).join(", "),
@@ -3001,7 +2962,7 @@ function SectionHeader({ icon, title, colorClass, count, onAdd, addLabel, isOpen
           /* @__PURE__ */ jsxRuntime.jsx(
             outline.ChevronDownIcon,
             {
-              className: `h-3 w-3 text-gray-400 transition-transform duration-200 ${isOpen ? "" : "-rotate-90"}`
+              className: `h-3 w-3 text-slate-400 transition-transform duration-200 ${isOpen ? "" : "-rotate-90"}`
             }
           )
         ]
@@ -3022,7 +2983,7 @@ function SectionHeader({ icon, title, colorClass, count, onAdd, addLabel, isOpen
 function CollapsibleSection({ title, icon, colorClass, defaultOpen = true, count, onAdd, addLabel, children }) {
   const [isOpen, setIsOpen] = react.useState(defaultOpen);
   const safeChildren = react.Children.toArray(children);
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "border-t border-gray-200/40 dark:border-white/5", children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "border-t border-slate-200/40 dark:border-white/5", children: [
     /* @__PURE__ */ jsxRuntime.jsx(
       SectionHeader,
       {
@@ -3040,8 +3001,8 @@ function CollapsibleSection({ title, icon, colorClass, defaultOpen = true, count
   ] });
 }
 function LogicNodeItemCard({ item, translationFunction }) {
-  const IconComponent = chunkD5OTZGA2_js.LOGIC_ICON_MAP[item.nodeType];
-  const gradient = chunkD5OTZGA2_js.LOGIC_NODE_GRADIENTS[item.nodeType] ?? "from-gray-400 to-gray-500";
+  const IconComponent = chunk5SCZB5UI_js.LOGIC_ICON_MAP[item.nodeType];
+  const gradient = chunk5SCZB5UI_js.LOGIC_NODE_GRADIENTS[item.nodeType] ?? "from-slate-400 to-slate-500";
   const defaultConfig = chunk72SWXOD5_js.createDefaultLogicNodeConfig(item.nodeType);
   const configJson = defaultConfig ? JSON.stringify(defaultConfig) : void 0;
   return /* @__PURE__ */ jsxRuntime.jsxs(
@@ -3053,8 +3014,8 @@ function LogicNodeItemCard({ item, translationFunction }) {
       children: [
         /* @__PURE__ */ jsxRuntime.jsx("div", { className: `flex h-6 w-6 items-center justify-center rounded-md bg-gradient-to-br ${gradient} shadow-sm`, children: IconComponent && /* @__PURE__ */ jsxRuntime.jsx(IconComponent, { className: "h-3.5 w-3.5 text-white" }) }),
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "min-w-0 flex-1", children: [
-          /* @__PURE__ */ jsxRuntime.jsx("p", { className: "truncate text-xs font-medium text-gray-900 dark:text-white", children: translationFunction(item.nameKey) }),
-          /* @__PURE__ */ jsxRuntime.jsx("p", { className: "truncate text-[10px] text-gray-400 dark:text-gray-500", children: translationFunction(item.descriptionKey) })
+          /* @__PURE__ */ jsxRuntime.jsx("p", { className: "truncate text-xs font-medium text-slate-900 dark:text-white", children: translationFunction(item.nameKey) }),
+          /* @__PURE__ */ jsxRuntime.jsx("p", { className: "truncate text-[10px] text-slate-400 dark:text-slate-500", children: translationFunction(item.descriptionKey) })
         ] })
       ]
     }
@@ -3112,7 +3073,7 @@ function NodePalette({ agents, tools, agentTools = [], rules, entities = [], mod
     [entityTypes, normalizedQuery]
   );
   const filteredLogicItems = react.useMemo(() => {
-    const visibleByDefault = LOGIC_NODE_ITEMS.filter((item) => !chunkD5OTZGA2_js.EXPERIMENTAL_NODE_TYPES.has(item.nodeType));
+    const visibleByDefault = LOGIC_NODE_ITEMS.filter((item) => !chunk5SCZB5UI_js.EXPERIMENTAL_NODE_TYPES.has(item.nodeType));
     if (!normalizedQuery) return visibleByDefault;
     return visibleByDefault.filter(
       (item) => t(item.nameKey).toLowerCase().includes(normalizedQuery) || t(item.descriptionKey).toLowerCase().includes(normalizedQuery)
@@ -3134,13 +3095,13 @@ function NodePalette({ agents, tools, agentTools = [], rules, entities = [], mod
   function renderLogicSubcategory(subcategory, items, isFirst) {
     if (items.length === 0) return null;
     return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-1.5", children: [
-      /* @__PURE__ */ jsxRuntime.jsx("p", { className: `${isFirst ? "mt-1" : "mt-2"} text-[9px] font-semibold uppercase tracking-wider text-gray-400 dark:text-gray-500`, children: t(SUBCATEGORY_LABELS[subcategory]) }),
+      /* @__PURE__ */ jsxRuntime.jsx("p", { className: `${isFirst ? "mt-1" : "mt-2"} text-[9px] font-semibold uppercase tracking-wider text-slate-400 dark:text-slate-500`, children: t(SUBCATEGORY_LABELS[subcategory]) }),
       items.map((item) => /* @__PURE__ */ jsxRuntime.jsx(LogicNodeItemCard, { item, translationFunction: t }, item.nodeType))
     ] }, subcategory);
   }
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "liquid-surface w-[260px] flex-shrink-0 overflow-y-auto rounded-none border-0 border-r border-gray-200/30 dark:border-white/5", children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "liquid-surface w-[260px] flex-shrink-0 overflow-y-auto rounded-none border-0 border-r border-slate-200/30 dark:border-white/5", children: [
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "p-4 pb-2", children: [
-      /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-xs font-semibold uppercase tracking-wider text-gray-500 dark:text-gray-400", children: t("palette") }),
+      /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-xs font-semibold uppercase tracking-wider text-slate-500 dark:text-slate-400", children: t("palette") }),
       /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-2", children: /* @__PURE__ */ jsxRuntime.jsx(
         "input",
         {
@@ -3148,7 +3109,7 @@ function NodePalette({ agents, tools, agentTools = [], rules, entities = [], mod
           value: searchQuery,
           onChange: (event) => setSearchQuery(event.target.value),
           placeholder: t("searchPalette"),
-          className: "liquid-surface w-full rounded-lg px-2.5 py-1.5 text-[11px] text-gray-900 placeholder-gray-400 outline-none transition-colors focus:ring-1 focus:ring-indigo-300/40 dark:text-white dark:placeholder-gray-500 dark:focus:ring-indigo-500/20"
+          className: "liquid-surface w-full rounded-lg px-2.5 py-1.5 text-[11px] text-slate-900 placeholder-slate-400 outline-none transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500/70 focus-visible:ring-offset-1 dark:text-white dark:placeholder-slate-500"
         }
       ) })
     ] }),
@@ -3161,7 +3122,7 @@ function NodePalette({ agents, tools, agentTools = [], rules, entities = [], mod
         onAdd: onCreateAgent,
         addLabel: t("newAgent"),
         count: filteredAgents.length,
-        children: filteredAgents.length === 0 && filteredAgentTools.length === 0 && filteredProviders.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-[10px] text-gray-400 dark:text-gray-500", children: t("noAgents") }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        children: filteredAgents.length === 0 && filteredAgentTools.length === 0 && filteredProviders.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-[10px] text-slate-400 dark:text-slate-500", children: t("noAgents") }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
           filteredAgents.map((agent) => /* @__PURE__ */ jsxRuntime.jsxs(
             "div",
             {
@@ -3170,24 +3131,24 @@ function NodePalette({ agents, tools, agentTools = [], rules, entities = [], mod
               className: "liquid-surface group flex items-center gap-2 rounded-lg px-3 py-2 transition-all cursor-grab hover:shadow-md active:cursor-grabbing",
               children: [
                 /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative flex-shrink-0", children: [
-                  agent.avatar ? /* @__PURE__ */ jsxRuntime.jsx("img", { src: agent.avatar, alt: agent.name, className: "h-7 w-7 rounded-full bg-white shadow-sm ring-1 ring-gray-200/50 dark:bg-gray-800 dark:ring-white/10" }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex h-7 w-7 items-center justify-center rounded-full bg-gradient-to-br from-indigo-400 to-purple-500 shadow-sm", children: /* @__PURE__ */ jsxRuntime.jsx(outline.CpuChipIcon, { className: "h-3.5 w-3.5 text-white" }) }),
-                  /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute -bottom-0.5 -right-0.5 flex h-3.5 w-3.5 items-center justify-center rounded-full bg-indigo-500 ring-1.5 ring-white dark:ring-gray-900", children: /* @__PURE__ */ jsxRuntime.jsx(outline.CpuChipIcon, { className: "h-2 w-2 text-white" }) })
+                  agent.avatar ? /* @__PURE__ */ jsxRuntime.jsx("img", { src: agent.avatar, alt: agent.name, className: "h-7 w-7 rounded-full bg-white shadow-sm ring-1 ring-slate-200/50 dark:bg-slate-800 dark:ring-white/10" }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex h-7 w-7 items-center justify-center rounded-full bg-gradient-to-br from-indigo-400 to-purple-500 shadow-sm", children: /* @__PURE__ */ jsxRuntime.jsx(outline.CpuChipIcon, { className: "h-3.5 w-3.5 text-white" }) }),
+                  /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute -bottom-0.5 -right-0.5 flex h-3.5 w-3.5 items-center justify-center rounded-full bg-indigo-500 ring-1.5 ring-white dark:ring-slate-900", children: /* @__PURE__ */ jsxRuntime.jsx(outline.CpuChipIcon, { className: "h-2 w-2 text-white" }) })
                 ] }),
                 /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "min-w-0 flex-1", children: [
                   /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1.5", children: [
-                    /* @__PURE__ */ jsxRuntime.jsx("p", { className: "truncate text-xs font-medium text-gray-900 dark:text-white", children: agent.name }),
+                    /* @__PURE__ */ jsxRuntime.jsx("p", { className: "truncate text-xs font-medium text-slate-900 dark:text-white", children: agent.name }),
                     (() => {
                       const tier = chunk72SWXOD5_js.getAgentTier(Number(agent.elo ?? 0));
                       return /* @__PURE__ */ jsxRuntime.jsx("span", { className: `shrink-0 rounded-full px-1.5 py-px text-[8px] font-bold ${tier.pillColor}`, children: t(`agentDrawer.tier${tier.key.charAt(0).toUpperCase()}${tier.key.slice(1)}`) });
                     })()
                   ] }),
-                  /* @__PURE__ */ jsxRuntime.jsx("p", { className: "truncate text-[10px] text-gray-400 dark:text-gray-500", children: agent.role ?? agent.agentId })
+                  /* @__PURE__ */ jsxRuntime.jsx("p", { className: "truncate text-[10px] text-slate-400 dark:text-slate-500", children: agent.role ?? agent.agentId })
                 ] })
               ]
             },
             agent.agentId
           )),
-          filteredProviders.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-2 border-t border-gray-200/40 pt-2 dark:border-white/5", children: [
+          filteredProviders.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-2 border-t border-slate-200/40 pt-2 dark:border-white/5", children: [
             /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mb-1.5 px-1 text-[9px] font-semibold uppercase tracking-wider text-slate-500 dark:text-slate-400", children: t("connectionsSection") }),
             filteredProviders.map((provider) => {
               const providerLogo = PROVIDER_LOGOS3[provider.provider];
@@ -3211,13 +3172,13 @@ function NodePalette({ agents, tools, agentTools = [], rules, entities = [], mod
                   children: [
                     providerLogo ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex h-6 w-6 shrink-0 items-center justify-center rounded-md bg-white/10 p-1", children: /* @__PURE__ */ jsxRuntime.jsx("img", { src: providerLogo, alt: "", className: "h-4 w-4 object-contain", loading: "lazy" }) }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex h-6 w-6 items-center justify-center rounded-md bg-gradient-to-br from-rose-400 to-pink-500 shadow-sm", children: /* @__PURE__ */ jsxRuntime.jsx(outline.KeyIcon, { className: "h-3.5 w-3.5 text-white" }) }),
                     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "min-w-0 flex-1", children: [
-                      /* @__PURE__ */ jsxRuntime.jsx("p", { className: "truncate text-xs font-medium text-gray-900 dark:text-white", children: provider.name }),
-                      /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "truncate text-[10px] text-gray-400 dark:text-gray-500", children: [
+                      /* @__PURE__ */ jsxRuntime.jsx("p", { className: "truncate text-xs font-medium text-slate-900 dark:text-white", children: provider.name }),
+                      /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "truncate text-[10px] text-slate-400 dark:text-slate-500", children: [
                         provider.modelCount,
                         " models"
                       ] })
                     ] }),
-                    provider.configured ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "rounded-full bg-emerald-500/15 px-1.5 py-0.5 text-[9px] font-medium text-emerald-700 dark:bg-emerald-500/20 dark:text-emerald-300", children: t("configured") }) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: "rounded-full bg-amber-500/15 px-1.5 py-0.5 text-[9px] font-medium text-amber-700 dark:bg-amber-500/20 dark:text-amber-300", children: t("setup") })
+                    provider.configured ? /* @__PURE__ */ jsxRuntime.jsx(chunkMXQ2EYG2_js.Badge, { color: "emerald", size: "xs", children: t("configured") }) : /* @__PURE__ */ jsxRuntime.jsx(chunkMXQ2EYG2_js.Badge, { color: "amber", size: "xs", children: t("setup") })
                   ]
                 },
                 provider.id
@@ -3235,7 +3196,7 @@ function NodePalette({ agents, tools, agentTools = [], rules, entities = [], mod
         colorClass: "text-teal-600 dark:text-teal-400",
         onAdd: onCreateTool,
         addLabel: t("newSubworkflow"),
-        children: filteredTools.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-[10px] text-gray-400 dark:text-gray-500", children: t("noSubworkflows") }) : filteredTools.map((tool) => /* @__PURE__ */ jsxRuntime.jsxs(
+        children: filteredTools.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-[10px] text-slate-400 dark:text-slate-500", children: t("noSubworkflows") }) : filteredTools.map((tool) => /* @__PURE__ */ jsxRuntime.jsxs(
           "div",
           {
             draggable: true,
@@ -3244,11 +3205,11 @@ function NodePalette({ agents, tools, agentTools = [], rules, entities = [], mod
             children: [
               /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex h-6 w-6 items-center justify-center rounded-md bg-gradient-to-br from-teal-400 to-emerald-500 shadow-sm", children: /* @__PURE__ */ jsxRuntime.jsx(outline.ArrowPathRoundedSquareIcon, { className: "h-3.5 w-3.5 text-white" }) }),
               /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "min-w-0 flex-1", children: [
-                /* @__PURE__ */ jsxRuntime.jsx("p", { className: "truncate text-xs font-medium text-gray-900 dark:text-white", children: tool.name }),
-                /* @__PURE__ */ jsxRuntime.jsx("p", { className: "truncate text-[10px] text-gray-400 dark:text-gray-500", children: tool.category })
+                /* @__PURE__ */ jsxRuntime.jsx("p", { className: "truncate text-xs font-medium text-slate-900 dark:text-white", children: tool.name }),
+                /* @__PURE__ */ jsxRuntime.jsx("p", { className: "truncate text-[10px] text-slate-400 dark:text-slate-500", children: tool.category })
               ] }),
               /* @__PURE__ */ jsxRuntime.jsx(
-                chunk5ETT54QS_js.ToggleSwitch,
+                chunkFZUV7GNB_js.ToggleSwitch,
                 {
                   checked: Boolean(tool.enabled),
                   onChange: () => {
@@ -3273,7 +3234,7 @@ function NodePalette({ agents, tools, agentTools = [], rules, entities = [], mod
         colorClass: "text-violet-600 dark:text-violet-400",
         onAdd: onCreateRule,
         addLabel: t("newRule"),
-        children: filteredRules.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-[10px] text-gray-400 dark:text-gray-500", children: t("noRules") }) : filteredRules.map((rule) => /* @__PURE__ */ jsxRuntime.jsxs(
+        children: filteredRules.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-[10px] text-slate-400 dark:text-slate-500", children: t("noRules") }) : filteredRules.map((rule) => /* @__PURE__ */ jsxRuntime.jsxs(
           "div",
           {
             draggable: true,
@@ -3282,14 +3243,14 @@ function NodePalette({ agents, tools, agentTools = [], rules, entities = [], mod
             children: [
               /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex h-6 w-6 items-center justify-center rounded-md bg-gradient-to-br from-violet-400 to-purple-500 shadow-sm", children: /* @__PURE__ */ jsxRuntime.jsx(outline.AdjustmentsHorizontalIcon, { className: "h-3.5 w-3.5 text-white" }) }),
               /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "min-w-0 flex-1", children: [
-                /* @__PURE__ */ jsxRuntime.jsx("p", { className: "truncate text-xs font-medium text-gray-900 dark:text-white", children: rule.name }),
-                /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "truncate text-[10px] text-gray-400 dark:text-gray-500", children: [
+                /* @__PURE__ */ jsxRuntime.jsx("p", { className: "truncate text-xs font-medium text-slate-900 dark:text-white", children: rule.name }),
+                /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "truncate text-[10px] text-slate-400 dark:text-slate-500", children: [
                   "P",
                   String(rule.priority ?? "")
                 ] })
               ] }),
               /* @__PURE__ */ jsxRuntime.jsx(
-                chunk5ETT54QS_js.ToggleSwitch,
+                chunkFZUV7GNB_js.ToggleSwitch,
                 {
                   checked: Boolean(rule.enabled),
                   onChange: () => {
@@ -3315,7 +3276,7 @@ function NodePalette({ agents, tools, agentTools = [], rules, entities = [], mod
         count: filteredEntityTypes.length,
         onAdd: onCreateDatasource,
         addLabel: t("newDataSource"),
-        children: filteredEntityTypes.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-[10px] text-gray-400 dark:text-gray-500", children: t("noDataSources") }) : filteredEntityTypes.map((entity) => {
+        children: filteredEntityTypes.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-[10px] text-slate-400 dark:text-slate-500", children: t("noDataSources") }) : filteredEntityTypes.map((entity) => {
           const defaultConfig = JSON.stringify({
             type: "entity",
             entityMasterId: entity.id,
@@ -3325,8 +3286,8 @@ function NodePalette({ agents, tools, agentTools = [], rules, entities = [], mod
             limit: entity.defaultLimit
           });
           const dsLogo = getDatasourceLogo(entity.id);
-          const EntityIcon = chunkD5OTZGA2_js.getEntityIcon(entity.id);
-          const entityGradient = chunkD5OTZGA2_js.getEntityGradient(entity.id);
+          const EntityIcon = chunk5SCZB5UI_js.getEntityIcon(entity.id);
+          const entityGradient = chunk5SCZB5UI_js.getEntityGradient(entity.id);
           return /* @__PURE__ */ jsxRuntime.jsxs(
             "div",
             {
@@ -3336,17 +3297,17 @@ function NodePalette({ agents, tools, agentTools = [], rules, entities = [], mod
               children: [
                 dsLogo ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex h-6 w-6 shrink-0 items-center justify-center rounded-md bg-white/10 p-1", children: /* @__PURE__ */ jsxRuntime.jsx("img", { src: dsLogo, alt: "", className: "h-4 w-4 object-contain", loading: "lazy" }) }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: `flex h-6 w-6 items-center justify-center rounded-md bg-gradient-to-br ${entityGradient} shadow-sm`, children: /* @__PURE__ */ jsxRuntime.jsx(EntityIcon, { className: "h-3.5 w-3.5 text-white" }) }),
                 /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "min-w-0 flex-1", children: [
-                  /* @__PURE__ */ jsxRuntime.jsx("p", { className: "truncate text-xs font-medium text-gray-900 dark:text-white", children: entity.label }),
-                  /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "truncate text-[10px] text-gray-400 dark:text-gray-500", children: [
+                  /* @__PURE__ */ jsxRuntime.jsx("p", { className: "truncate text-xs font-medium text-slate-900 dark:text-white", children: entity.label }),
+                  /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "truncate text-[10px] text-slate-400 dark:text-slate-500", children: [
                     entity.fieldCount,
                     " ",
                     t("entityFieldsLabel")
                   ] })
                 ] }),
                 /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
-                  /* @__PURE__ */ jsxRuntime.jsx("span", { className: "rounded-full bg-slate-500/15 px-1.5 py-0.5 text-[9px] font-medium text-slate-700 dark:bg-slate-500/20 dark:text-slate-300", children: "Read only" }),
+                  /* @__PURE__ */ jsxRuntime.jsx(chunkMXQ2EYG2_js.Badge, { color: "zinc", size: "xs", children: "Read only" }),
                   /* @__PURE__ */ jsxRuntime.jsx(
-                    chunk5ETT54QS_js.ToggleSwitch,
+                    chunkFZUV7GNB_js.ToggleSwitch,
                     {
                       checked: true,
                       onChange: () => {
@@ -3370,7 +3331,7 @@ function NodePalette({ agents, tools, agentTools = [], rules, entities = [], mod
       {
         title: t("logicSection"),
         icon: /* @__PURE__ */ jsxRuntime.jsx(outline.BoltIcon, { className: "h-3 w-3" }),
-        colorClass: "text-gray-600 dark:text-gray-400",
+        colorClass: "text-slate-600 dark:text-slate-400",
         count: filteredLogicItems.length,
         children: [
           renderLogicSubcategory("control_flow", groupedLogicItems.control_flow, true),
@@ -3442,33 +3403,28 @@ function WorkflowListBar({
               /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-0.5 text-[10px] text-gray-400 dark:text-gray-500", children: workflow.updatedAt ? formatRelativeTime(typeof workflow.updatedAt === "string" ? workflow.updatedAt : workflow.updatedAt.toISOString()) : "" })
             ] }),
             /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex shrink-0 items-center gap-0.5 opacity-0 transition-opacity group-hover:opacity-100", children: [
-              onConvertToSubworkflow && /* @__PURE__ */ jsxRuntime.jsx(
-                "button",
+              onConvertToSubworkflow && /* @__PURE__ */ jsxRuntime.jsx("div", { onClick: (event) => event.stopPropagation(), children: /* @__PURE__ */ jsxRuntime.jsx(
+                chunkMXQ2EYG2_js.IconButton,
                 {
-                  type: "button",
-                  onClick: (event) => {
-                    event.stopPropagation();
-                    onConvertToSubworkflow(workflow);
-                  },
-                  className: "rounded-md p-1 text-gray-400 transition-colors hover:bg-teal-50 hover:text-teal-600 dark:hover:bg-teal-950/30 dark:hover:text-teal-400",
-                  "aria-label": `${tWorkflow("convertToSubworkflow")} ${workflow.name}`,
-                  title: tWorkflow("convertToSubworkflow"),
-                  children: /* @__PURE__ */ jsxRuntime.jsx(outline.ArrowPathRoundedSquareIcon, { className: "h-3.5 w-3.5" })
+                  label: `${tWorkflow("convertToSubworkflow")} ${workflow.name}`,
+                  variant: "ghost",
+                  size: "sm",
+                  color: "ios-teal",
+                  onClick: () => onConvertToSubworkflow(workflow),
+                  icon: /* @__PURE__ */ jsxRuntime.jsx(outline.ArrowPathRoundedSquareIcon, { className: "h-3.5 w-3.5" })
                 }
-              ),
-              workflows.length > 1 && /* @__PURE__ */ jsxRuntime.jsx(
-                "button",
+              ) }),
+              workflows.length > 1 && /* @__PURE__ */ jsxRuntime.jsx("div", { onClick: (event) => event.stopPropagation(), children: /* @__PURE__ */ jsxRuntime.jsx(
+                chunkMXQ2EYG2_js.IconButton,
                 {
-                  type: "button",
-                  onClick: (event) => {
-                    event.stopPropagation();
-                    onDelete(workflow.id, workflow.name);
-                  },
-                  className: "rounded-md p-1 text-gray-400 transition-colors hover:bg-red-50 hover:text-red-500 dark:hover:bg-red-950/30 dark:hover:text-red-400",
-                  "aria-label": `${tWorkflow("deleteWorkflow")} ${workflow.name}`,
-                  children: /* @__PURE__ */ jsxRuntime.jsx(outline.TrashIcon, { className: "h-3.5 w-3.5" })
+                  label: `${tWorkflow("deleteWorkflow")} ${workflow.name}`,
+                  variant: "ghost",
+                  size: "sm",
+                  destructive: true,
+                  onClick: () => onDelete(workflow.id, workflow.name),
+                  icon: /* @__PURE__ */ jsxRuntime.jsx(outline.TrashIcon, { className: "h-3.5 w-3.5" })
                 }
-              )
+              ) })
             ] })
           ]
         },
@@ -3539,22 +3495,23 @@ function VersionHistoryPanel({
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
-      className: "absolute right-0 top-0 z-40 flex h-full w-80 flex-col border-l border-gray-200 bg-white shadow-xl dark:border-gray-700 dark:bg-gray-900",
+      className: "liquid-surface absolute right-0 top-0 z-40 flex h-full w-80 flex-col border-l border-slate-200/60 shadow-xl dark:border-white/10",
       "data-testid": "version-history-panel",
       children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between border-b border-gray-200 px-4 py-3 dark:border-gray-700", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "liquid-divider flex items-center justify-between px-4 py-3", children: [
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
-            /* @__PURE__ */ jsxRuntime.jsx(outline.ClockIcon, { className: "h-5 w-5 text-gray-500 dark:text-gray-400" }),
-            /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-sm font-semibold text-gray-900 dark:text-white", children: translations("title") })
+            /* @__PURE__ */ jsxRuntime.jsx(outline.ClockIcon, { className: "h-5 w-5 text-slate-500 dark:text-slate-400" }),
+            /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-sm font-semibold text-slate-900 dark:text-white", children: translations("title") })
           ] }),
           /* @__PURE__ */ jsxRuntime.jsx(
-            "button",
+            chunkMXQ2EYG2_js.IconButton,
             {
-              type: "button",
+              label: translations("close"),
+              variant: "ghost",
+              size: "sm",
               onClick: onClose,
-              className: "rounded-lg p-1 text-gray-400 transition-colors hover:bg-gray-100 hover:text-gray-600 dark:hover:bg-gray-800 dark:hover:text-gray-300",
-              "data-testid": "version-history-close",
-              children: /* @__PURE__ */ jsxRuntime.jsx(outline.XMarkIcon, { className: "h-4 w-4" })
+              icon: /* @__PURE__ */ jsxRuntime.jsx(outline.XMarkIcon, { className: "h-4 w-4" }),
+              "data-testid": "version-history-close"
             }
           )
         ] }),
@@ -3562,36 +3519,28 @@ function VersionHistoryPanel({
           isLoading && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-center py-12", "data-testid": "version-history-loading", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-6 w-6 animate-spin motion-reduce:animate-none rounded-full border-2 border-blue-500 border-t-transparent" }) }),
           loadError && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "px-4 py-8 text-center", "data-testid": "version-history-error", children: [
             /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-red-500 dark:text-red-400", children: loadError }),
-            /* @__PURE__ */ jsxRuntime.jsx(
-              "button",
-              {
-                type: "button",
-                onClick: loadVersions,
-                className: "mt-2 text-xs text-blue-600 hover:underline dark:text-blue-400",
-                children: translations("retry")
-              }
-            )
+            /* @__PURE__ */ jsxRuntime.jsx(chunkMXQ2EYG2_js.Button, { type: "button", plain: true, size: "xs", onClick: loadVersions, children: translations("retry") })
           ] }),
           !isLoading && !loadError && versions.length === 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "px-4 py-12 text-center", "data-testid": "version-history-empty", children: [
-            /* @__PURE__ */ jsxRuntime.jsx(outline.ClockIcon, { className: "mx-auto h-8 w-8 text-gray-300 dark:text-gray-600" }),
-            /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-2 text-sm text-gray-500 dark:text-gray-400", children: translations("noVersions") })
+            /* @__PURE__ */ jsxRuntime.jsx(outline.ClockIcon, { className: "mx-auto h-8 w-8 text-slate-300 dark:text-slate-600" }),
+            /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-2 text-sm text-slate-500 dark:text-slate-400", children: translations("noVersions") })
           ] }),
-          !isLoading && !loadError && versions.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "divide-y divide-gray-100 dark:divide-gray-800", children: versions.map((version) => {
+          !isLoading && !loadError && versions.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "divide-y divide-slate-200/60 dark:divide-white/10", children: versions.map((version) => {
             const isCurrentVersion = version.version === currentVersion;
             return /* @__PURE__ */ jsxRuntime.jsxs(
               "div",
               {
-                className: `px-4 py-3 transition-colors ${isCurrentVersion ? "bg-blue-50 dark:bg-blue-500/10" : "hover:bg-gray-50 dark:hover:bg-gray-800/50"}`,
+                className: `px-4 py-3 transition-colors ${isCurrentVersion ? "bg-blue-50 dark:bg-blue-500/10" : "hover:bg-white/40 dark:hover:bg-white/[0.04]"}`,
                 "data-testid": `version-entry-${version.version}`,
                 children: [
                   /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-between", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
-                    /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-sm font-semibold text-gray-900 dark:text-white", children: [
+                    /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-sm font-semibold text-slate-900 dark:text-white", children: [
                       "v",
                       version.version
                     ] }),
-                    isCurrentVersion && /* @__PURE__ */ jsxRuntime.jsx(chunkBHOT22QL_js.Badge, { color: "blue", size: "xs", children: translations("current") })
+                    isCurrentVersion && /* @__PURE__ */ jsxRuntime.jsx(chunkMXQ2EYG2_js.Badge, { color: "blue", size: "xs", children: translations("current") })
                   ] }) }),
-                  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-1 text-xs text-gray-500 dark:text-gray-400", children: [
+                  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-1 text-xs text-slate-500 dark:text-slate-400", children: [
                     /* @__PURE__ */ jsxRuntime.jsx("div", { children: formatTimestamp3(version.publishedAt) }),
                     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-0.5", children: [
                       translations("publishedBy"),
@@ -3610,11 +3559,12 @@ function VersionHistoryPanel({
                   ] }),
                   /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-2 flex gap-2", children: [
                     /* @__PURE__ */ jsxRuntime.jsxs(
-                      "button",
+                      chunkMXQ2EYG2_js.Button,
                       {
                         type: "button",
+                        outline: true,
+                        size: "xs",
                         onClick: () => onPreview(version),
-                        className: "inline-flex items-center gap-1 rounded-md border border-gray-300 px-2 py-1 text-xs font-medium text-gray-600 transition-colors hover:bg-gray-100 dark:border-gray-600 dark:text-gray-400 dark:hover:bg-gray-700",
                         "data-testid": `version-preview-${version.version}`,
                         children: [
                           /* @__PURE__ */ jsxRuntime.jsx(outline.EyeIcon, { className: "h-3 w-3" }),
@@ -3623,11 +3573,12 @@ function VersionHistoryPanel({
                       }
                     ),
                     !isCurrentVersion && /* @__PURE__ */ jsxRuntime.jsxs(
-                      "button",
+                      chunkMXQ2EYG2_js.Button,
                       {
                         type: "button",
+                        outline: true,
+                        size: "xs",
                         onClick: () => onRestore(version),
-                        className: "inline-flex items-center gap-1 rounded-md border border-blue-300 px-2 py-1 text-xs font-medium text-blue-600 transition-colors hover:bg-blue-50 dark:border-blue-600 dark:text-blue-400 dark:hover:bg-blue-500/10",
                         "data-testid": `version-restore-${version.version}`,
                         children: [
                           /* @__PURE__ */ jsxRuntime.jsx(outline.ArrowPathIcon, { className: "h-3 w-3" }),
@@ -3649,8 +3600,8 @@ function VersionHistoryPanel({
 var STATUS_CONFIG = {
   pending: {
     icon: outline.ClockIcon,
-    color: "text-gray-400 dark:text-gray-500",
-    background: "bg-gray-100 dark:bg-gray-800",
+    color: "text-slate-400 dark:text-slate-500",
+    background: "bg-slate-100 dark:bg-slate-800",
     label: "pending"
   },
   running: {
@@ -3681,9 +3632,9 @@ function formatDuration2(durationMs) {
 }
 function RunPanel({ open, onClose, onRun, onStop }) {
   const translations = chunkY5VN4SPH_js.useTranslations("agents.workflow.runPanel");
-  const nodes = chunkD5OTZGA2_js.useWorkflowStore((state) => state.nodes);
-  const isRunning = chunkD5OTZGA2_js.useWorkflowStore((state) => state.isRunning);
-  const nodeResults = chunkD5OTZGA2_js.useWorkflowStore((state) => state.nodeResults);
+  const nodes = chunk5SCZB5UI_js.useWorkflowStore((state) => state.nodes);
+  const isRunning = chunk5SCZB5UI_js.useWorkflowStore((state) => state.isRunning);
+  const nodeResults = chunk5SCZB5UI_js.useWorkflowStore((state) => state.nodeResults);
   const startNode = nodes.find((node) => node.type === "start");
   const hasEndNode = nodes.some((node) => node.type === "end");
   const hasValidStartConfig = Boolean(
@@ -3695,13 +3646,13 @@ function RunPanel({ open, onClose, onRun, onStop }) {
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
-      className: "absolute bottom-0 left-0 right-0 z-40 border-t border-gray-200 bg-white shadow-xl dark:border-gray-700 dark:bg-gray-900",
+      className: "liquid-surface absolute bottom-0 left-0 right-0 z-40 border-t border-slate-200/60 shadow-xl dark:border-white/10",
       "data-testid": "run-panel",
       children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between border-b border-gray-100 px-4 py-2 dark:border-gray-800", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "liquid-divider flex items-center justify-between px-4 py-2", children: [
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
-            /* @__PURE__ */ jsxRuntime.jsx(outline.PlayIcon, { className: "h-4 w-4 text-gray-500 dark:text-gray-400" }),
-            /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-sm font-semibold text-gray-900 dark:text-white", children: translations("title") }),
+            /* @__PURE__ */ jsxRuntime.jsx(outline.PlayIcon, { className: "h-4 w-4 text-slate-500 dark:text-slate-400" }),
+            /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-sm font-semibold text-slate-900 dark:text-white", children: translations("title") }),
             isRunning && /* @__PURE__ */ jsxRuntime.jsxs(
               "span",
               {
@@ -3723,11 +3674,12 @@ function RunPanel({ open, onClose, onRun, onStop }) {
           ] }),
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
             isRunning ? /* @__PURE__ */ jsxRuntime.jsxs(
-              "button",
+              chunkMXQ2EYG2_js.Button,
               {
                 type: "button",
+                destructive: true,
+                size: "sm",
                 onClick: onStop,
-                className: "inline-flex items-center gap-1.5 rounded-lg bg-red-500 px-3 py-1.5 text-xs font-medium text-white transition-colors hover:bg-red-600",
                 "data-testid": "run-panel-stop",
                 children: [
                   /* @__PURE__ */ jsxRuntime.jsx(outline.StopIcon, { className: "h-3.5 w-3.5" }),
@@ -3735,12 +3687,13 @@ function RunPanel({ open, onClose, onRun, onStop }) {
                 ]
               }
             ) : /* @__PURE__ */ jsxRuntime.jsxs(
-              "button",
+              chunkMXQ2EYG2_js.Button,
               {
                 type: "button",
+                color: "ios-green",
+                size: "sm",
                 onClick: onRun,
                 disabled: !canRun,
-                className: "inline-flex items-center gap-1.5 rounded-lg bg-green-500 px-3 py-1.5 text-xs font-medium text-white transition-colors hover:bg-green-600 disabled:cursor-not-allowed disabled:opacity-50 disabled:hover:bg-green-500",
                 "data-testid": "run-panel-run",
                 children: [
                   /* @__PURE__ */ jsxRuntime.jsx(outline.PlayIcon, { className: "h-3.5 w-3.5" }),
@@ -3749,18 +3702,19 @@ function RunPanel({ open, onClose, onRun, onStop }) {
               }
             ),
             /* @__PURE__ */ jsxRuntime.jsx(
-              "button",
+              chunkMXQ2EYG2_js.IconButton,
               {
-                type: "button",
+                label: translations("close"),
+                variant: "ghost",
+                size: "sm",
                 onClick: onClose,
-                className: "rounded-lg p-1 text-gray-400 transition-colors hover:bg-gray-100 hover:text-gray-600 dark:hover:bg-gray-800 dark:hover:text-gray-300",
-                "data-testid": "run-panel-close",
-                children: /* @__PURE__ */ jsxRuntime.jsx(outline.XMarkIcon, { className: "h-4 w-4" })
+                icon: /* @__PURE__ */ jsxRuntime.jsx(outline.XMarkIcon, { className: "h-4 w-4" }),
+                "data-testid": "run-panel-close"
               }
             )
           ] })
         ] }),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "max-h-48 overflow-y-auto px-4 py-2", children: executionNodes.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "py-4 text-center text-sm text-gray-500 dark:text-gray-400", children: translations("noNodes") }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-1", children: executionNodes.map((node) => {
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "max-h-48 overflow-y-auto px-4 py-2", children: executionNodes.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "py-4 text-center text-sm text-slate-500 dark:text-slate-400", children: translations("noNodes") }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-1", children: executionNodes.map((node) => {
           const result = nodeResults[node.id];
           const status = result?.status ?? "pending";
           const statusConfig = STATUS_CONFIG[status];
@@ -3775,12 +3729,12 @@ function RunPanel({ open, onClose, onRun, onStop }) {
                 /* @__PURE__ */ jsxRuntime.jsx(StatusIconComponent, { className: `h-4 w-4 flex-shrink-0 ${statusConfig.color}` }),
                 /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "min-w-0 flex-1", children: [
                   /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
-                    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate text-sm font-medium text-gray-900 dark:text-white", children: nodeLabel }),
-                    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "rounded bg-gray-200 px-1.5 py-0.5 text-[10px] text-gray-500 dark:bg-gray-700 dark:text-gray-400", children: node.type })
+                    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate text-sm font-medium text-slate-900 dark:text-white", children: nodeLabel }),
+                    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "rounded bg-slate-200 px-1.5 py-0.5 text-[10px] text-slate-500 dark:bg-slate-700 dark:text-slate-400", children: node.type })
                   ] }),
                   result?.error && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-0.5 truncate text-xs text-red-500 dark:text-red-400", children: result.error })
                 ] }),
-                result?.durationMs !== void 0 && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex-shrink-0 text-xs text-gray-500 dark:text-gray-400", children: formatDuration2(result.durationMs) })
+                result?.durationMs !== void 0 && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex-shrink-0 text-xs text-slate-500 dark:text-slate-400", children: formatDuration2(result.durationMs) })
               ]
             },
             node.id
@@ -4014,8 +3968,8 @@ function inferVariables(config, nodeType) {
 }
 function VariableInspector({ open, onClose }) {
   const translations = chunkY5VN4SPH_js.useTranslations("agents.workflow.variableInspector");
-  const nodes = chunkD5OTZGA2_js.useWorkflowStore((state) => state.nodes);
-  const edges = chunkD5OTZGA2_js.useWorkflowStore((state) => state.edges);
+  const nodes = chunk5SCZB5UI_js.useWorkflowStore((state) => state.nodes);
+  const edges = chunk5SCZB5UI_js.useWorkflowStore((state) => state.edges);
   const [expandedNodes, setExpandedNodes] = react.useState(/* @__PURE__ */ new Set());
   const toggleNodeExpansion = react.useCallback((nodeId) => {
     setExpandedNodes((current) => {
@@ -4053,32 +4007,33 @@ function VariableInspector({ open, onClose }) {
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
-      className: "absolute right-0 top-0 z-40 flex h-full w-80 flex-col border-l border-gray-200 bg-white shadow-xl dark:border-gray-700 dark:bg-gray-900",
+      className: "liquid-surface absolute right-0 top-0 z-40 flex h-full w-80 flex-col shadow-xl",
       "data-testid": "variable-inspector",
       children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between border-b border-gray-200 px-4 py-3 dark:border-gray-700", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "liquid-divider flex items-center justify-between border-b px-4 py-3", children: [
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
-            /* @__PURE__ */ jsxRuntime.jsx(outline.VariableIcon, { className: "h-5 w-5 text-gray-500 dark:text-gray-400" }),
-            /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-sm font-semibold text-gray-900 dark:text-white", children: translations("title") })
+            /* @__PURE__ */ jsxRuntime.jsx(outline.VariableIcon, { className: "h-5 w-5 text-slate-500 dark:text-slate-400" }),
+            /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-sm font-semibold text-slate-900 dark:text-white", children: translations("title") })
           ] }),
           /* @__PURE__ */ jsxRuntime.jsx(
-            "button",
+            chunkMXQ2EYG2_js.IconButton,
             {
-              type: "button",
+              label: translations("close"),
+              variant: "ghost",
+              size: "sm",
               onClick: onClose,
-              className: "rounded-lg p-1 text-gray-400 transition-colors hover:bg-gray-100 hover:text-gray-600 dark:hover:bg-gray-800 dark:hover:text-gray-300",
-              "data-testid": "variable-inspector-close",
-              children: /* @__PURE__ */ jsxRuntime.jsx(outline.XMarkIcon, { className: "h-4 w-4" })
+              icon: /* @__PURE__ */ jsxRuntime.jsx(outline.XMarkIcon, { className: "h-4 w-4" }),
+              "data-testid": "variable-inspector-close"
             }
           )
         ] }),
         /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 overflow-y-auto", children: nodeVariableEntries.length === 0 ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "px-4 py-12 text-center", "data-testid": "variable-inspector-empty", children: [
-          /* @__PURE__ */ jsxRuntime.jsx(outline.VariableIcon, { className: "mx-auto h-8 w-8 text-gray-300 dark:text-gray-600" }),
-          /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-2 text-sm text-gray-500 dark:text-gray-400", children: translations("noNodes") })
-        ] }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "divide-y divide-gray-100 dark:divide-gray-800", children: nodeVariableEntries.map((entry) => {
+          /* @__PURE__ */ jsxRuntime.jsx(outline.VariableIcon, { className: "mx-auto h-8 w-8 text-slate-300 dark:text-slate-600" }),
+          /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-2 text-sm text-slate-500 dark:text-slate-400", children: translations("noNodes") })
+        ] }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "divide-y divide-slate-100 dark:divide-slate-800", children: nodeVariableEntries.map((entry) => {
           const isExpanded = expandedNodes.has(entry.nodeId);
-          const IconComponent = chunkD5OTZGA2_js.LOGIC_ICON_MAP[entry.nodeType];
-          const gradient = chunkD5OTZGA2_js.LOGIC_NODE_GRADIENTS[entry.nodeType] ?? "from-gray-400 to-gray-500";
+          const IconComponent = chunk5SCZB5UI_js.LOGIC_ICON_MAP[entry.nodeType];
+          const gradient = chunk5SCZB5UI_js.LOGIC_NODE_GRADIENTS[entry.nodeType] ?? "from-slate-400 to-slate-500";
           const inputVariables = entry.variables.filter((variable) => variable.direction === "input");
           const outputVariables = entry.variables.filter((variable) => variable.direction === "output");
           return /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-testid": `variable-node-${entry.nodeId}`, children: [
@@ -4087,12 +4042,12 @@ function VariableInspector({ open, onClose }) {
               {
                 type: "button",
                 onClick: () => toggleNodeExpansion(entry.nodeId),
-                className: "flex w-full items-center gap-2 px-4 py-2.5 text-left transition-colors hover:bg-gray-50 dark:hover:bg-gray-800/50",
+                className: "flex w-full items-center gap-2 px-4 py-2.5 text-left transition-colors hover:bg-white/40 dark:hover:bg-white/[0.04]",
                 children: [
-                  isExpanded ? /* @__PURE__ */ jsxRuntime.jsx(outline.ChevronDownIcon, { className: "h-3.5 w-3.5 flex-shrink-0 text-gray-400" }) : /* @__PURE__ */ jsxRuntime.jsx(outline.ChevronRightIcon, { className: "h-3.5 w-3.5 flex-shrink-0 text-gray-400" }),
+                  isExpanded ? /* @__PURE__ */ jsxRuntime.jsx(outline.ChevronDownIcon, { className: "h-3.5 w-3.5 flex-shrink-0 text-slate-400" }) : /* @__PURE__ */ jsxRuntime.jsx(outline.ChevronRightIcon, { className: "h-3.5 w-3.5 flex-shrink-0 text-slate-400" }),
                   /* @__PURE__ */ jsxRuntime.jsx("div", { className: `flex h-5 w-5 flex-shrink-0 items-center justify-center rounded bg-gradient-to-br ${gradient}`, children: IconComponent && /* @__PURE__ */ jsxRuntime.jsx(IconComponent, { className: "h-3 w-3 text-white" }) }),
-                  /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate text-sm font-medium text-gray-900 dark:text-white", children: entry.nodeLabel }),
-                  /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "ml-auto flex-shrink-0 text-[10px] text-gray-400 dark:text-gray-500", children: [
+                  /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate text-sm font-medium text-slate-900 dark:text-white", children: entry.nodeLabel }),
+                  /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "ml-auto flex-shrink-0 text-[10px] text-slate-400 dark:text-slate-500", children: [
                     entry.variables.length,
                     " ",
                     translations("variables")
@@ -4100,32 +4055,32 @@ function VariableInspector({ open, onClose }) {
                 ]
               }
             ),
-            isExpanded && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "bg-gray-50/50 px-4 pb-2 dark:bg-gray-800/30", children: entry.variables.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "py-2 pl-9 text-xs italic text-gray-400 dark:text-gray-500", children: translations("noVariables") }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+            isExpanded && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "bg-white/40 dark:bg-white/[0.04] backdrop-blur-sm px-4 pb-2", children: entry.variables.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "py-2 pl-9 text-xs italic text-slate-400 dark:text-slate-500", children: translations("noVariables") }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
               inputVariables.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "pl-9 pt-1", children: [
-                /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-1 text-[10px] font-medium uppercase tracking-wider text-gray-400 dark:text-gray-500", children: translations("inputs") }),
+                /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-1 text-[10px] font-medium uppercase tracking-wider text-slate-400 dark:text-slate-500", children: translations("inputs") }),
                 inputVariables.map((variable, index) => /* @__PURE__ */ jsxRuntime.jsxs(
                   "div",
                   {
                     className: "flex items-center gap-2 py-0.5",
                     children: [
                       /* @__PURE__ */ jsxRuntime.jsx("span", { className: "h-1.5 w-1.5 rounded-full bg-blue-400" }),
-                      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs text-gray-700 dark:text-gray-300", children: variable.name }),
-                      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "rounded bg-gray-200 px-1 py-0.5 text-[9px] text-gray-500 dark:bg-gray-700 dark:text-gray-400", children: variable.variableType })
+                      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs text-slate-700 dark:text-slate-300", children: variable.name }),
+                      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "rounded bg-slate-200 px-1 py-0.5 text-[9px] text-slate-500 dark:bg-slate-700 dark:text-slate-400", children: variable.variableType })
                     ]
                   },
                   `${variable.name}-${index}`
                 ))
               ] }),
               outputVariables.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "pl-9 pt-1", children: [
-                /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-1 text-[10px] font-medium uppercase tracking-wider text-gray-400 dark:text-gray-500", children: translations("outputs") }),
+                /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-1 text-[10px] font-medium uppercase tracking-wider text-slate-400 dark:text-slate-500", children: translations("outputs") }),
                 outputVariables.map((variable, index) => /* @__PURE__ */ jsxRuntime.jsxs(
                   "div",
                   {
                     className: "flex items-center gap-2 py-0.5",
                     children: [
                       /* @__PURE__ */ jsxRuntime.jsx("span", { className: "h-1.5 w-1.5 rounded-full bg-green-400" }),
-                      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs text-gray-700 dark:text-gray-300", children: variable.name }),
-                      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "rounded bg-gray-200 px-1 py-0.5 text-[9px] text-gray-500 dark:bg-gray-700 dark:text-gray-400", children: variable.variableType })
+                      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs text-slate-700 dark:text-slate-300", children: variable.name }),
+                      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "rounded bg-slate-200 px-1 py-0.5 text-[9px] text-slate-500 dark:bg-slate-700 dark:text-slate-400", children: variable.variableType })
                     ]
                   },
                   `${variable.name}-${index}`
@@ -4144,7 +4099,7 @@ function RunInputDialog({
   onRun
 }) {
   const t = chunkY5VN4SPH_js.useTranslations("agents.workflow.runInputDialog");
-  const nodes = chunkD5OTZGA2_js.useWorkflowStore((state) => state.nodes);
+  const nodes = chunk5SCZB5UI_js.useWorkflowStore((state) => state.nodes);
   const [values, setValues] = react.useState({});
   const inputVariableNames = react.useMemo(() => {
     const storeStartNode = nodes.find((node) => node.type === "start");
@@ -4171,7 +4126,7 @@ function RunInputDialog({
   }, [onClose]);
   if (!open) return null;
   return /* @__PURE__ */ jsxRuntime.jsxs(
-    chunk5ETT54QS_js.GlassModal,
+    chunkFZUV7GNB_js.GlassModal,
     {
       open,
       onClose: handleClose,
@@ -4182,7 +4137,7 @@ function RunInputDialog({
         /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-3", children: inputVariableNames.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-center text-sm text-gray-500 dark:text-gray-400", children: t("noInputs") }) : inputVariableNames.map((variableName) => /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
           /* @__PURE__ */ jsxRuntime.jsx("label", { className: "mb-1 block text-xs font-medium text-gray-700 dark:text-gray-300", children: variableName }),
           /* @__PURE__ */ jsxRuntime.jsx(
-            chunk5ETT54QS_js.Input,
+            chunkFZUV7GNB_js.Input,
             {
               value: values[variableName] ?? "",
               onChange: (event) => handleValueChange(variableName, event.target.value),
@@ -4191,8 +4146,8 @@ function RunInputDialog({
           )
         ] }, variableName)) }),
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-4 flex items-center justify-end gap-2", children: [
-          /* @__PURE__ */ jsxRuntime.jsx(chunkBHOT22QL_js.Button, { size: "sm", plain: true, onClick: handleClose, children: t("cancel") }),
-          /* @__PURE__ */ jsxRuntime.jsxs(chunkBHOT22QL_js.Button, { size: "sm", gradient: true, onClick: handleSubmit, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(chunkMXQ2EYG2_js.Button, { size: "sm", plain: true, onClick: handleClose, children: t("cancel") }),
+          /* @__PURE__ */ jsxRuntime.jsxs(chunkMXQ2EYG2_js.Button, { size: "sm", gradient: true, onClick: handleSubmit, children: [
             /* @__PURE__ */ jsxRuntime.jsx(outline.PlayIcon, { className: "h-3.5 w-3.5", "data-slot": "icon" }),
             t("run")
           ] })
@@ -4205,10 +4160,10 @@ var STATUS_STYLES = {
   completed: { icon: outline.CheckCircleIcon, colorClass: "text-green-500" },
   failed: { icon: outline.ExclamationCircleIcon, colorClass: "text-red-500" },
   running: { icon: outline.ArrowPathIcon, colorClass: "text-blue-500 animate-spin motion-reduce:animate-none" },
-  pending: { icon: outline.ClockIcon, colorClass: "text-gray-400" },
+  pending: { icon: outline.ClockIcon, colorClass: "text-slate-400" },
   success: { icon: outline.CheckCircleIcon, colorClass: "text-green-500" },
   error: { icon: outline.ExclamationCircleIcon, colorClass: "text-red-500" },
-  skipped: { icon: outline.ClockIcon, colorClass: "text-gray-400" }
+  skipped: { icon: outline.ClockIcon, colorClass: "text-slate-400" }
 };
 function formatDuration3(durationMs) {
   if (durationMs === null) return "\u2014";
@@ -4225,8 +4180,8 @@ function PreviewPanel({ open, onClose, workflowId, loadRuns }) {
   const [isLoadingRuns, setIsLoadingRuns] = react.useState(false);
   const [selectedRun, setSelectedRun] = react.useState(null);
   const [selectedNode, setSelectedNode] = react.useState(null);
-  const isRunning = chunkD5OTZGA2_js.useWorkflowStore((state) => state.isRunning);
-  const nodeResults = chunkD5OTZGA2_js.useWorkflowStore((state) => state.nodeResults);
+  const isRunning = chunk5SCZB5UI_js.useWorkflowStore((state) => state.isRunning);
+  const nodeResults = chunk5SCZB5UI_js.useWorkflowStore((state) => state.nodeResults);
   const refreshRuns = react.useCallback(async () => {
     setIsLoadingRuns(true);
     try {
@@ -4245,21 +4200,22 @@ function PreviewPanel({ open, onClose, workflowId, loadRuns }) {
   if (!open) return null;
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
     /* @__PURE__ */ jsxRuntime.jsx("div", { className: "fixed inset-x-0 top-[120px] bottom-0 z-40 bg-black/10 backdrop-blur-[1px]", onClick: onClose }),
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "fixed right-0 top-[120px] bottom-0 z-50 w-96 overflow-hidden border-l border-white/20 bg-white/95 shadow-2xl backdrop-blur-xl dark:border-gray-700/50 dark:bg-gray-800/95", children: [
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between border-b border-gray-200/50 px-4 py-3 dark:border-gray-700/50", children: [
-        /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-sm font-semibold text-gray-900 dark:text-white", children: t("title") }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "fixed right-0 top-[120px] bottom-0 z-50 w-96 overflow-hidden border-l border-white/20 bg-white/95 shadow-2xl backdrop-blur-xl dark:border-slate-700/50 dark:bg-slate-800/95", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "liquid-divider flex items-center justify-between border-b px-4 py-3", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-sm font-semibold text-slate-900 dark:text-white", children: t("title") }),
         /* @__PURE__ */ jsxRuntime.jsx(
-          "button",
+          chunkMXQ2EYG2_js.IconButton,
           {
-            type: "button",
+            label: t("close"),
+            variant: "ghost",
+            size: "sm",
             onClick: onClose,
-            className: "rounded-lg p-1 text-gray-400 hover:bg-gray-100 hover:text-gray-600 dark:hover:bg-gray-700 dark:hover:text-gray-300",
-            children: /* @__PURE__ */ jsxRuntime.jsx(outline.XMarkIcon, { className: "h-4 w-4" })
+            icon: /* @__PURE__ */ jsxRuntime.jsx(outline.XMarkIcon, { className: "h-4 w-4" })
           }
         )
       ] }),
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex h-full flex-col overflow-hidden", children: [
-        isRunning && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "border-b border-gray-200/50 px-4 py-3 dark:border-gray-700/50", children: [
+        isRunning && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "liquid-divider border-b px-4 py-3", children: [
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-2 flex items-center gap-2", children: [
             /* @__PURE__ */ jsxRuntime.jsx(outline.ArrowPathIcon, { className: "h-4 w-4 animate-spin motion-reduce:animate-none text-blue-500" }),
             /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs font-semibold text-blue-600 dark:text-blue-400", children: t("activeRun") })
@@ -4267,46 +4223,46 @@ function PreviewPanel({ open, onClose, workflowId, loadRuns }) {
           /* @__PURE__ */ jsxRuntime.jsx("div", { className: "max-h-60 space-y-1 overflow-y-auto", children: Object.entries(nodeResults).map(([nodeId, result]) => {
             const statusStyle = STATUS_STYLES[result.status] ?? STATUS_STYLES.pending;
             const StatusIcon = statusStyle.icon;
-            return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between rounded-lg px-2 py-1.5 text-xs hover:bg-gray-50 dark:hover:bg-gray-700/50", children: [
+            return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between rounded-lg px-2 py-1.5 text-xs hover:bg-white/40 dark:hover:bg-white/[0.04]", children: [
               /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
                 /* @__PURE__ */ jsxRuntime.jsx(StatusIcon, { className: `h-3.5 w-3.5 ${statusStyle.colorClass}` }),
-                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate text-gray-700 dark:text-gray-300", children: nodeId.slice(0, 8) })
+                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate text-slate-700 dark:text-slate-300", children: nodeId.slice(0, 8) })
               ] }),
-              result.durationMs !== void 0 && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-gray-400", children: formatDuration3(result.durationMs) })
+              result.durationMs !== void 0 && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-slate-400", children: formatDuration3(result.durationMs) })
             ] }, nodeId);
           }) })
         ] }),
-        selectedNode && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "border-b border-gray-200/50 px-4 py-3 dark:border-gray-700/50", children: [
+        selectedNode && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "liquid-divider border-b px-4 py-3", children: [
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-2 flex items-center justify-between", children: [
-            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs font-semibold text-gray-900 dark:text-white", children: t("nodeDetail") }),
-            /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", onClick: () => setSelectedNode(null), className: "text-[10px] text-gray-400 hover:text-gray-600 dark:hover:text-gray-300", children: t("close") })
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs font-semibold text-slate-900 dark:text-white", children: t("nodeDetail") }),
+            /* @__PURE__ */ jsxRuntime.jsx(chunkMXQ2EYG2_js.Button, { type: "button", plain: true, size: "xs", onClick: () => setSelectedNode(null), children: t("close") })
           ] }),
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2 text-xs", children: [
             /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-between", children: [
-              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-gray-500", children: t("status") }),
-              /* @__PURE__ */ jsxRuntime.jsx("span", { className: STATUS_STYLES[selectedNode.status]?.colorClass ?? "text-gray-400", children: t(selectedNode.status) })
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-slate-500", children: t("status") }),
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: STATUS_STYLES[selectedNode.status]?.colorClass ?? "text-slate-400", children: t(selectedNode.status) })
             ] }),
             /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-between", children: [
-              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-gray-500", children: t("duration") }),
-              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-gray-700 dark:text-gray-300", children: formatDuration3(selectedNode.durationMs) })
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-slate-500", children: t("duration") }),
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-slate-700 dark:text-slate-300", children: formatDuration3(selectedNode.durationMs) })
             ] }),
             selectedNode.error && /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
               /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-red-500", children: t("error") }),
               /* @__PURE__ */ jsxRuntime.jsx("pre", { className: "mt-1 max-h-20 overflow-auto whitespace-pre-wrap rounded bg-red-50 p-2 text-[10px] text-red-700 dark:bg-red-900/20 dark:text-red-300", children: selectedNode.error })
             ] }),
             Object.keys(selectedNode.outputs).length > 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-gray-500", children: t("outputs") }),
-              /* @__PURE__ */ jsxRuntime.jsx("pre", { className: "mt-1 max-h-32 overflow-auto whitespace-pre-wrap rounded bg-gray-50 p-2 text-[10px] text-gray-700 dark:bg-gray-700/50 dark:text-gray-300", children: JSON.stringify(selectedNode.outputs, null, 2) })
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-slate-500", children: t("outputs") }),
+              /* @__PURE__ */ jsxRuntime.jsx("pre", { className: "mt-1 max-h-32 overflow-auto whitespace-pre-wrap rounded bg-white/40 dark:bg-white/[0.04] backdrop-blur-sm p-2 text-[10px] text-slate-700 dark:text-slate-300", children: JSON.stringify(selectedNode.outputs, null, 2) })
             ] })
           ] })
         ] }),
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 overflow-y-auto px-4 py-3", children: [
-          /* @__PURE__ */ jsxRuntime.jsx("h4", { className: "mb-2 text-xs font-semibold text-gray-500 dark:text-gray-400", children: t("runHistory") }),
+          /* @__PURE__ */ jsxRuntime.jsx("h4", { className: "mb-2 text-xs font-semibold text-slate-500 dark:text-slate-400", children: t("runHistory") }),
           isLoadingRuns && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-2", children: [1, 2, 3].map((index) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: "shimmer h-14 rounded-lg" }, index)) }),
           !isLoadingRuns && runs.length === 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "py-8 text-center", children: [
-            /* @__PURE__ */ jsxRuntime.jsx(outline.ClockIcon, { className: "mx-auto mb-2 h-8 w-8 text-gray-300 dark:text-gray-600" }),
-            /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-gray-500 dark:text-gray-400", children: t("noRuns") }),
-            /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-1 text-[10px] text-gray-400 dark:text-gray-500", children: t("noRunsDescription") })
+            /* @__PURE__ */ jsxRuntime.jsx(outline.ClockIcon, { className: "mx-auto mb-2 h-8 w-8 text-slate-300 dark:text-slate-600" }),
+            /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-slate-500 dark:text-slate-400", children: t("noRuns") }),
+            /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-1 text-[10px] text-slate-400 dark:text-slate-500", children: t("noRunsDescription") })
           ] }),
           !isLoadingRuns && runs.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-1.5", children: runs.map((run) => {
             const statusStyle = STATUS_STYLES[run.status] ?? STATUS_STYLES.pending;
@@ -4320,14 +4276,14 @@ function PreviewPanel({ open, onClose, workflowId, loadRuns }) {
                   setSelectedRun(isSelected ? null : run);
                   setSelectedNode(null);
                 },
-                className: `w-full rounded-lg border px-3 py-2.5 text-left transition-colors ${isSelected ? "border-blue-200 bg-blue-50/50 dark:border-blue-800 dark:bg-blue-900/20" : "border-gray-100 hover:border-gray-200 hover:bg-gray-50 dark:border-gray-700/50 dark:hover:border-gray-600 dark:hover:bg-gray-700/30"}`,
+                className: `w-full rounded-lg border px-3 py-2.5 text-left transition-colors ${isSelected ? "border-blue-200 bg-blue-50/50 dark:border-blue-800 dark:bg-blue-900/20" : "border-slate-100 hover:border-slate-200 hover:bg-white/40 dark:border-slate-700/50 dark:hover:border-slate-600 dark:hover:bg-white/[0.04]"}`,
                 children: [
                   /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between", children: [
                     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
                       /* @__PURE__ */ jsxRuntime.jsx(StatusIcon, { className: `h-3.5 w-3.5 ${statusStyle.colorClass}` }),
-                      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs font-medium text-gray-900 dark:text-white", children: formatTimestamp2(run.createdAt) })
+                      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs font-medium text-slate-900 dark:text-white", children: formatTimestamp2(run.createdAt) })
                     ] }),
-                    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[10px] text-gray-400", children: formatDuration3(run.totalDurationMs) })
+                    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[10px] text-slate-400", children: formatDuration3(run.totalDurationMs) })
                   ] }),
                   run.error && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-1 truncate text-[10px] text-red-500", children: run.error })
                 ]
@@ -4336,7 +4292,7 @@ function PreviewPanel({ open, onClose, workflowId, loadRuns }) {
             );
           }) }),
           selectedRun && selectedRun.nodeResults.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-3 space-y-1", children: [
-            /* @__PURE__ */ jsxRuntime.jsx("h5", { className: "mb-1.5 text-[10px] font-semibold uppercase tracking-wider text-gray-400", children: "Nodes" }),
+            /* @__PURE__ */ jsxRuntime.jsx("h5", { className: "mb-1.5 text-[10px] font-semibold uppercase tracking-wider text-slate-400", children: "Nodes" }),
             selectedRun.nodeResults.map((nodeResult) => {
               const nodeStatusStyle = STATUS_STYLES[nodeResult.status] ?? STATUS_STYLES.pending;
               const NodeStatusIcon = nodeStatusStyle.icon;
@@ -4345,13 +4301,13 @@ function PreviewPanel({ open, onClose, workflowId, loadRuns }) {
                 {
                   type: "button",
                   onClick: () => setSelectedNode(nodeResult),
-                  className: "flex w-full items-center justify-between rounded px-2 py-1.5 text-xs hover:bg-gray-50 dark:hover:bg-gray-700/50",
+                  className: "flex w-full items-center justify-between rounded px-2 py-1.5 text-xs hover:bg-white/40 dark:hover:bg-white/[0.04]",
                   children: [
                     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
                       /* @__PURE__ */ jsxRuntime.jsx(NodeStatusIcon, { className: `h-3 w-3 ${nodeStatusStyle.colorClass}` }),
-                      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-gray-700 dark:text-gray-300", children: nodeResult.nodeType })
+                      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-slate-700 dark:text-slate-300", children: nodeResult.nodeType })
                     ] }),
-                    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[10px] text-gray-400", children: formatDuration3(nodeResult.durationMs) })
+                    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[10px] text-slate-400", children: formatDuration3(nodeResult.durationMs) })
                   ]
                 },
                 nodeResult.nodeId
@@ -4404,7 +4360,7 @@ var AutoSaveWorkspace = react.memo(function AutoSaveWorkspace2({
     onAutoSaveGraph(graph);
   }, [onAutoSaveGraph, onGraphSnapshot]);
   return /* @__PURE__ */ jsxRuntime.jsx(
-    chunkD5OTZGA2_js.Workspace,
+    chunk5SCZB5UI_js.Workspace,
     {
       ...workspaceProps,
       onGraphChange: handleGraphChange
@@ -4412,7 +4368,7 @@ var AutoSaveWorkspace = react.memo(function AutoSaveWorkspace2({
   );
 });
 function DynamicIslandConfirm2(props) {
-  return /* @__PURE__ */ jsxRuntime.jsx(chunk5ETT54QS_js.DynamicIslandConfirm, { ...props });
+  return /* @__PURE__ */ jsxRuntime.jsx(chunkFZUV7GNB_js.DynamicIslandConfirm, { ...props });
 }
 var JSON_PREVIEW_LINE_LIMIT = 50;
 function DslExportModal({ open, onClose, workflow, graph }) {
@@ -4466,7 +4422,7 @@ function DslExportModal({ open, onClose, workflow, graph }) {
   }, [jsonString, workflow.name, workflow.version]);
   if (!open) return null;
   return /* @__PURE__ */ jsxRuntime.jsx(
-    chunk5ETT54QS_js.GlassModal,
+    chunkFZUV7GNB_js.GlassModal,
     {
       open,
       onClose,
@@ -4474,41 +4430,41 @@ function DslExportModal({ open, onClose, workflow, graph }) {
       subtitle: translations("description"),
       maxWidth: "2xl",
       children: /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-testid": "dsl-export-modal", children: [
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "border-b border-gray-200 px-1 py-4 dark:border-gray-700", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-2 gap-4 text-sm", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "liquid-divider px-1 py-4", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-2 gap-4 text-sm", children: [
           /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-gray-500 dark:text-gray-400", children: translations("workflowName") }),
-            /* @__PURE__ */ jsxRuntime.jsx("p", { className: "font-medium text-gray-900 dark:text-white", children: workflow.name })
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-slate-500 dark:text-slate-400", children: translations("workflowName") }),
+            /* @__PURE__ */ jsxRuntime.jsx("p", { className: "font-medium text-slate-900 dark:text-white", children: workflow.name })
           ] }),
           /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-gray-500 dark:text-gray-400", children: translations("version") }),
-            /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "font-medium text-gray-900 dark:text-white", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-slate-500 dark:text-slate-400", children: translations("version") }),
+            /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "font-medium text-slate-900 dark:text-white", children: [
               "v",
               workflow.version
             ] })
           ] }),
           /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-gray-500 dark:text-gray-400", children: translations("nodes") }),
-            /* @__PURE__ */ jsxRuntime.jsx("p", { className: "font-medium text-gray-900 dark:text-white", children: graph.nodes.length })
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-slate-500 dark:text-slate-400", children: translations("nodes") }),
+            /* @__PURE__ */ jsxRuntime.jsx("p", { className: "font-medium text-slate-900 dark:text-white", children: graph.nodes.length })
           ] }),
           /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-gray-500 dark:text-gray-400", children: translations("edges") }),
-            /* @__PURE__ */ jsxRuntime.jsx("p", { className: "font-medium text-gray-900 dark:text-white", children: graph.edges.length })
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-slate-500 dark:text-slate-400", children: translations("edges") }),
+            /* @__PURE__ */ jsxRuntime.jsx("p", { className: "font-medium text-slate-900 dark:text-white", children: graph.edges.length })
           ] })
         ] }) }),
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "px-1 py-4", children: [
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-2 text-xs font-medium uppercase tracking-wider text-gray-400 dark:text-gray-500", children: translations("preview") }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-2 text-xs font-medium uppercase tracking-wider text-slate-400 dark:text-slate-500", children: translations("preview") }),
           /* @__PURE__ */ jsxRuntime.jsx(
             "pre",
             {
-              className: "max-h-64 overflow-auto rounded-lg border border-gray-200 bg-gray-50 p-3 text-xs text-gray-700 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-300",
+              className: "liquid-surface max-h-64 overflow-auto rounded-lg p-3 text-xs text-slate-700 dark:text-slate-300",
               "data-testid": "export-json-preview",
               children: previewLines
             }
           )
         ] }),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-end gap-3 border-t border-gray-200 px-1 py-4 dark:border-gray-700", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-end gap-3 border-t border-slate-200 px-1 py-4 dark:border-slate-700", children: [
           /* @__PURE__ */ jsxRuntime.jsx(
-            chunkBHOT22QL_js.Button,
+            chunkMXQ2EYG2_js.Button,
             {
               type: "button",
               onClick: handleCopyToClipboard,
@@ -4525,7 +4481,7 @@ function DslExportModal({ open, onClose, workflow, graph }) {
             }
           ),
           /* @__PURE__ */ jsxRuntime.jsxs(
-            chunkBHOT22QL_js.Button,
+            chunkMXQ2EYG2_js.Button,
             {
               type: "button",
               onClick: handleDownloadJson,
@@ -4684,7 +4640,7 @@ function DslImportModal({ open, onClose, onImport }) {
   }, []);
   if (!open) return null;
   return /* @__PURE__ */ jsxRuntime.jsx(
-    chunk5ETT54QS_js.GlassModal,
+    chunkFZUV7GNB_js.GlassModal,
     {
       open,
       onClose,
@@ -4699,15 +4655,15 @@ function DslImportModal({ open, onClose, onImport }) {
             onDragLeave: handleDragLeave,
             onDrop: handleDrop,
             onClick: handleClickUpload,
-            className: `cursor-pointer rounded-xl border-2 border-dashed p-8 text-center transition-colors duration-200 ${isDragActive ? "border-blue-400 bg-blue-50 dark:border-blue-500 dark:bg-blue-500/10" : "border-gray-300 hover:border-gray-400 dark:border-gray-600 dark:hover:border-gray-500"}`,
+            className: `cursor-pointer rounded-xl border-2 border-dashed p-8 text-center transition-colors duration-200 ${isDragActive ? "border-blue-400 bg-blue-50 dark:border-blue-500 dark:bg-blue-500/10" : "border-slate-300 hover:border-slate-400 dark:border-slate-600 dark:hover:border-slate-500"}`,
             "data-testid": "import-dropzone",
             role: "button",
             tabIndex: 0,
             "aria-label": translations("dropzone"),
             children: [
-              /* @__PURE__ */ jsxRuntime.jsx(outline.ArrowUpTrayIcon, { className: "mx-auto h-10 w-10 text-gray-400 dark:text-gray-500" }),
-              /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-3 text-sm font-medium text-gray-700 dark:text-gray-300", children: translations("dropzone") }),
-              /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-1 text-xs text-gray-500 dark:text-gray-400", children: translations("dropzoneHint") }),
+              /* @__PURE__ */ jsxRuntime.jsx(outline.ArrowUpTrayIcon, { className: "mx-auto h-10 w-10 text-slate-400 dark:text-slate-500" }),
+              /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-3 text-sm font-medium text-slate-700 dark:text-slate-300", children: translations("dropzone") }),
+              /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-1 text-xs text-slate-500 dark:text-slate-400", children: translations("dropzoneHint") }),
               /* @__PURE__ */ jsxRuntime.jsx(
                 "input",
                 {
@@ -4723,8 +4679,8 @@ function DslImportModal({ open, onClose, onImport }) {
           }
         ) : /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-testid": "import-validation-result", children: [
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-4 flex items-center justify-between", children: [
-            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm font-medium text-gray-700 dark:text-gray-300", children: fileName }),
-            /* @__PURE__ */ jsxRuntime.jsx(chunkBHOT22QL_js.Button, { type: "button", plain: true, size: "sm", onClick: handleReset, children: translations("chooseAnother") })
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm font-medium text-slate-700 dark:text-slate-300", children: fileName }),
+            /* @__PURE__ */ jsxRuntime.jsx(chunkMXQ2EYG2_js.Button, { type: "button", plain: true, size: "sm", onClick: handleReset, children: translations("chooseAnother") })
           ] }),
           validationResult.isValid ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "rounded-lg border border-green-200 bg-green-50 p-4 dark:border-green-800 dark:bg-green-900/20", children: [
             /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
@@ -4751,10 +4707,10 @@ function DslImportModal({ open, onClose, onImport }) {
             /* @__PURE__ */ jsxRuntime.jsx("ul", { className: "mt-2 space-y-1", children: validationResult.errors.map((validationError, index) => /* @__PURE__ */ jsxRuntime.jsx("li", { className: "text-xs text-red-600 dark:text-red-400", children: validationError }, index)) })
           ] })
         ] }) }),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-end gap-3 border-t border-gray-200 px-1 py-4 dark:border-gray-700", children: [
-          /* @__PURE__ */ jsxRuntime.jsx(chunkBHOT22QL_js.Button, { type: "button", onClick: onClose, outline: true, size: "sm", "data-testid": "import-cancel-button", children: translations("cancel") }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-end gap-3 border-t border-slate-200 px-1 py-4 dark:border-slate-700", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(chunkMXQ2EYG2_js.Button, { type: "button", onClick: onClose, outline: true, size: "sm", "data-testid": "import-cancel-button", children: translations("cancel") }),
           /* @__PURE__ */ jsxRuntime.jsxs(
-            chunkBHOT22QL_js.Button,
+            chunkMXQ2EYG2_js.Button,
             {
               type: "button",
               onClick: handleImport,
@@ -4775,14 +4731,14 @@ function DslImportModal({ open, onClose, onImport }) {
 }
 
 // src/astrlabe/store/selectors.ts
-var useCanUndo = () => chunkD5OTZGA2_js.useWorkflowStore((state) => state.past.length > 0);
-var useCanRedo = () => chunkD5OTZGA2_js.useWorkflowStore((state) => state.future.length > 0);
-var useHasCopied = () => chunkD5OTZGA2_js.useWorkflowStore((state) => state.clipboard !== null);
-var useContextMenu = () => chunkD5OTZGA2_js.useWorkflowStore((state) => state.contextMenu);
-var useEditingNodeId = () => chunkD5OTZGA2_js.useWorkflowStore((state) => state.editingNodeId);
-var useSelectedNodeCount = () => chunkD5OTZGA2_js.useWorkflowStore((state) => state.nodes.filter((node) => node.selected).length);
-var useIsRunning = () => chunkD5OTZGA2_js.useWorkflowStore((state) => state.isRunning);
-var useNodeResults = () => chunkD5OTZGA2_js.useWorkflowStore((state) => state.nodeResults);
+var useCanUndo = () => chunk5SCZB5UI_js.useWorkflowStore((state) => state.past.length > 0);
+var useCanRedo = () => chunk5SCZB5UI_js.useWorkflowStore((state) => state.future.length > 0);
+var useHasCopied = () => chunk5SCZB5UI_js.useWorkflowStore((state) => state.clipboard !== null);
+var useContextMenu = () => chunk5SCZB5UI_js.useWorkflowStore((state) => state.contextMenu);
+var useEditingNodeId = () => chunk5SCZB5UI_js.useWorkflowStore((state) => state.editingNodeId);
+var useSelectedNodeCount = () => chunk5SCZB5UI_js.useWorkflowStore((state) => state.nodes.filter((node) => node.selected).length);
+var useIsRunning = () => chunk5SCZB5UI_js.useWorkflowStore((state) => state.isRunning);
+var useNodeResults = () => chunk5SCZB5UI_js.useWorkflowStore((state) => state.nodeResults);
 var DEFAULT_MAX_HISTORY = 50;
 function useUndoRedo(nodes, edges, setNodes, setEdges, maxHistory = DEFAULT_MAX_HISTORY) {
   const pastRef = react.useRef([]);
@@ -5106,5 +5062,5 @@ exports.useNodeResults = useNodeResults;
 exports.useSelectedNodeCount = useSelectedNodeCount;
 exports.useSubworkflowStore = useSubworkflowStore;
 exports.useUndoRedo = useUndoRedo;
-//# sourceMappingURL=chunk-MQDCUBVW.js.map
-//# sourceMappingURL=chunk-MQDCUBVW.js.map
+//# sourceMappingURL=chunk-ZIRD3X6G.js.map
+//# sourceMappingURL=chunk-ZIRD3X6G.js.map