@datatechsolutions/ui 2.11.81 → 2.11.82

package/dist/chunk-HAZP5J67.mjs

@@ -0,0 +1,4781 @@
+"use client";
+import { Workspace, useModalStore, CATEGORY_COLORS, CATEGORY_PILL_COLORS, ICON_MAP, WorkflowCanvas, getEntityIcon, getEntityGradient, useWorkflowStore, LOGIC_ICON_MAP, LOGIC_NODE_GRADIENTS, getFrameworkMeta, getCompatibleModels, isModelCompatibleWithFramework, FRAMEWORK_META, isFrameworkCompatibleWithProviders } from './chunk-J3OYJ44D.mjs';
+import { Button, FormInput, FormSelect, GlassModal, FormTextarea, FormGrid, Badge, ToggleSwitch, Input, DynamicIslandConfirm } from './chunk-LLFU42KC.mjs';
+import { useTranslations } from './chunk-7VJ7CMMT.mjs';
+import { getAgentTier, createDefaultLogicNodeConfig } from './chunk-WNCPAWLC.mjs';
+import { memo, useCallback, useMemo, useState, useEffect, useRef, Children } from 'react';
+import { UserCircleIcon, Cog6ToothIcon, SparklesIcon, CommandLineIcon, KeyIcon, PlayCircleIcon, CpuChipIcon, ArrowPathRoundedSquareIcon, ArrowsPointingOutIcon, ArrowsPointingInIcon, BoltIcon, ClockIcon, CheckIcon, ArrowPathIcon, AdjustmentsHorizontalIcon, CircleStackIcon, TrashIcon, PlusIcon, XMarkIcon, EyeIcon, PlayIcon, StopIcon, XCircleIcon, CheckCircleIcon, VariableIcon, ChevronDownIcon, ChevronRightIcon, ExclamationCircleIcon, ClipboardDocumentIcon, ArrowDownTrayIcon, ArrowUpTrayIcon, ExclamationTriangleIcon } from '@heroicons/react/24/outline';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { create } from 'zustand';
+
+function AnthropicModelIcon({ className }) {
+  return /* @__PURE__ */ jsx("svg", { role: "img", viewBox: "0 0 24 24", fill: "currentColor", className, "aria-label": "Anthropic", children: /* @__PURE__ */ jsx("path", { d: "M17.3041 3.541h-3.6718l6.696 16.918H24Zm-10.6082 0L0 20.459h3.7442l1.3693-3.5527h7.0052l1.3693 3.5528h3.7442L10.5363 3.5409Zm-.3712 10.2232 2.2914-5.9456 2.2914 5.9456Z" }) });
+}
+function AmazonNovaIcon({ className }) {
+  return /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 24 24", fill: "none", className, "aria-label": "Amazon Nova", children: [
+    /* @__PURE__ */ jsx("path", { d: "M12 2L3 20h3.5l1.8-4.5h7.4L17.5 20H21L12 2Zm-2.2 11L12 7.5l2.2 5.5H9.8Z", fill: "currentColor" }),
+    /* @__PURE__ */ jsx("path", { d: "M2 21c3.5 1.5 7.5 2 10 2s6.5-.5 10-2", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", fill: "none", opacity: "0.6" })
+  ] });
+}
+function MetaLlamaIcon({ className }) {
+  return /* @__PURE__ */ jsx("svg", { role: "img", viewBox: "0 0 24 24", fill: "currentColor", className, "aria-label": "Meta", children: /* @__PURE__ */ jsx("path", { d: "M6.915 4.03c-1.968 0-3.683 1.28-4.871 3.113C.704 9.208 0 11.883 0 14.449c0 .706.07 1.369.21 1.973a6.624 6.624 0 0 0 .265.86 5.297 5.297 0 0 0 .371.761c.696 1.159 1.818 1.927 3.593 1.927 1.497 0 2.633-.671 3.965-2.444.76-1.012 1.144-1.626 2.663-4.32l.756-1.339.186-.325c.061.1.121.196.183.3l2.152 3.595c.724 1.21 1.665 2.556 2.47 3.314 1.046.987 1.992 1.22 3.06 1.22 1.075 0 1.876-.355 2.455-.843a3.743 3.743 0 0 0 .81-.973c.542-.939.861-2.127.861-3.745 0-2.72-.681-5.357-2.084-7.45-1.282-1.912-2.957-2.93-4.716-2.93-1.047 0-2.088.467-3.053 1.308-.652.57-1.257 1.29-1.82 2.05-.69-.875-1.335-1.547-1.958-2.056-1.182-.966-2.315-1.303-3.454-1.303zm10.16 2.053c1.147 0 2.188.758 2.992 1.999 1.132 1.748 1.647 4.195 1.647 6.4 0 1.548-.368 2.9-1.839 2.9-.58 0-1.027-.23-1.664-1.004-.496-.601-1.343-1.878-2.832-4.358l-.617-1.028a44.908 44.908 0 0 0-1.255-1.98c.07-.109.141-.224.211-.327 1.12-1.667 2.118-2.602 3.358-2.602zm-10.201.553c1.265 0 2.058.791 2.675 1.446.307.327.737.871 1.234 1.579l-1.02 1.566c-.757 1.163-1.882 3.017-2.837 4.338-1.191 1.649-1.81 1.817-2.486 1.817-.524 0-1.038-.237-1.383-.794-.263-.426-.464-1.13-.464-2.046 0-2.221.63-4.535 1.66-6.088.454-.687.964-1.226 1.533-1.533a2.264 2.264 0 0 1 1.088-.285z" }) });
+}
+function OpenAIModelIcon({ className }) {
+  return /* @__PURE__ */ jsx("svg", { viewBox: "0 0 16 16", fill: "currentColor", className, "aria-label": "OpenAI", children: /* @__PURE__ */ jsx("path", { d: "M14.949 6.547a3.94 3.94 0 0 0-.348-3.273 4.11 4.11 0 0 0-4.4-1.934A4.1 4.1 0 0 0 8.423.2 4.15 4.15 0 0 0 6.305.086a4.1 4.1 0 0 0-1.891.948 4.04 4.04 0 0 0-1.158 1.753 4.1 4.1 0 0 0-1.563.679A4 4 0 0 0 .554 4.72a3.99 3.99 0 0 0 .502 4.731 3.94 3.94 0 0 0 .346 3.274 4.11 4.11 0 0 0 4.402 1.933c.382.425.852.764 1.377.995.526.231 1.095.35 1.67.346 1.78.002 3.358-1.132 3.901-2.804a4.1 4.1 0 0 0 1.563-.68 4 4 0 0 0 1.14-1.253 3.99 3.99 0 0 0-.506-4.716m-6.097 8.406a3.05 3.05 0 0 1-1.945-.694l.096-.054 3.23-1.838a.53.53 0 0 0 .265-.455v-4.49l1.366.778q.02.011.025.035v3.722c-.003 1.653-1.361 2.992-3.037 2.996m-6.53-2.75a2.95 2.95 0 0 1-.36-2.01l.095.057L5.29 12.09a.53.53 0 0 0 .527 0l3.949-2.246v1.555a.05.05 0 0 1-.022.041L6.473 13.3c-1.454.826-3.311.335-4.15-1.098m-.85-6.94A3.02 3.02 0 0 1 3.07 3.949v3.785a.51.51 0 0 0 .262.451l3.93 2.237-1.366.779a.05.05 0 0 1-.048 0L2.585 9.342a2.98 2.98 0 0 1-1.113-4.094zm11.216 2.571L8.747 5.576l1.362-.776a.05.05 0 0 1 .048 0l3.265 1.86a3 3 0 0 1 1.173 1.207 2.96 2.96 0 0 1-.27 3.2 3.05 3.05 0 0 1-1.36.997V8.279a.52.52 0 0 0-.276-.445m1.36-2.015-.097-.057-3.226-1.855a.53.53 0 0 0-.53 0L6.249 6.153V4.598a.04.04 0 0 1 .019-.04L9.533 2.7a3.07 3.07 0 0 1 3.257.139c.474.325.843.778 1.066 1.303.223.526.289 1.103.191 1.664zM5.503 8.575 4.139 7.8a.05.05 0 0 1-.026-.037V4.049c0-.57.166-1.127.476-1.607s.752-.864 1.275-1.105a3.08 3.08 0 0 1 3.234.41l-.096.054-3.23 1.838a.53.53 0 0 0-.265.455zm.742-1.577 1.758-1 1.762 1v2l-1.755 1-1.762-1z" }) });
+}
+function GoogleGeminiIcon({ className }) {
+  return /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 24 24", fill: "none", className, "aria-label": "Google Gemini", children: [
+    /* @__PURE__ */ jsx("path", { d: "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2Z", fill: "#4285F4", opacity: "0.15" }),
+    /* @__PURE__ */ jsx("path", { d: "M12 2.5c5.25 0 9.5 4.25 9.5 9.5s-4.25 9.5-9.5 9.5S2.5 17.25 2.5 12 6.75 2.5 12 2.5Z", stroke: "#4285F4", strokeWidth: "1", fill: "none" }),
+    /* @__PURE__ */ jsx("path", { d: "M12 7L8 12l4 5 4-5-4-5Z", fill: "#4285F4" }),
+    /* @__PURE__ */ jsx("path", { d: "M12 7L8 12l4 5", fill: "#34A853" })
+  ] });
+}
+function getModelIcon(modelId) {
+  if (modelId.startsWith("anthropic.")) {
+    return { IconComponent: AnthropicModelIcon, color: "text-amber-600 dark:text-amber-400", providerLabel: "Anthropic" };
+  }
+  if (modelId.startsWith("amazon.")) {
+    return { IconComponent: AmazonNovaIcon, color: "text-orange-500 dark:text-orange-400", providerLabel: "Amazon" };
+  }
+  if (modelId.startsWith("meta.")) {
+    return { IconComponent: MetaLlamaIcon, color: "text-blue-500 dark:text-blue-400", providerLabel: "Meta" };
+  }
+  if (modelId.startsWith("google.")) {
+    return { IconComponent: GoogleGeminiIcon, color: "text-blue-500 dark:text-blue-400", providerLabel: "Google" };
+  }
+  if (modelId.startsWith("openai.")) {
+    return { IconComponent: OpenAIModelIcon, color: "text-emerald-500 dark:text-emerald-400", providerLabel: "OpenAI" };
+  }
+  return { IconComponent: AnthropicModelIcon, color: "text-gray-500 dark:text-gray-400", providerLabel: "Custom" };
+}
+var PRIMITIVE_TYPES = [
+  { value: "string", label: "string" },
+  { value: "number", label: "number" },
+  { value: "integer", label: "integer" },
+  { value: "boolean", label: "boolean" }
+];
+var COMPLEX_TYPES = [
+  { value: "object", label: "object (nested)" },
+  { value: "array", label: "array of objects" }
+];
+var ALL_TYPES = [...PRIMITIVE_TYPES, ...COMPLEX_TYPES];
+function OutputSchemaBuilder({ value, onChange, depth = 0 }) {
+  const fields = useMemo(() => {
+    if (!value || value.type !== "object") return [];
+    return buildFieldRows(value);
+  }, [value]);
+  if (!value) {
+    return /* @__PURE__ */ 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__ */ 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__ */ jsx(
+        Button,
+        {
+          type: "button",
+          outline: true,
+          onClick: () => onChange({ type: "object", properties: {}, required: [] }),
+          children: "+ Add output schema"
+        }
+      )
+    ] });
+  }
+  if (value.type !== "object") {
+    return /* @__PURE__ */ jsxs("div", { className: "rounded-xl border border-amber-300 bg-amber-50/40 p-3 text-xs text-amber-700 dark:border-amber-700 dark:bg-amber-900/20 dark:text-amber-300", children: [
+      "The visual builder only supports `type: object` at the top level. Convert manually or",
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          className: "ml-1 underline",
+          onClick: () => onChange({ type: "object", properties: {}, required: [] }),
+          children: "reset to object"
+        }
+      ),
+      "."
+    ] });
+  }
+  const updateFields = (next) => {
+    onChange(rowsToSchema(next));
+  };
+  const addField = () => {
+    updateFields([
+      ...fields,
+      { name: "", type: "string", description: "", required: false, child: void 0 }
+    ]);
+  };
+  const removeField = (index) => {
+    updateFields(fields.filter((_, i) => i !== index));
+  };
+  const patchField = (index, patch) => {
+    updateFields(fields.map((f, i) => i === index ? { ...f, ...patch } : f));
+  };
+  return /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
+      /* @__PURE__ */ jsx("span", { className: "text-xs font-medium text-slate-700 dark:text-slate-200", children: "Top-level fields" }),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          className: "text-xs text-rose-600 hover:text-rose-500",
+          onClick: () => onChange(void 0),
+          children: "Remove schema"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+      fields.map((field, index) => /* @__PURE__ */ jsx(
+        FieldEditor,
+        {
+          field,
+          onChange: (patch) => patchField(index, patch),
+          onRemove: () => removeField(index),
+          depth
+        },
+        index
+      )),
+      /* @__PURE__ */ jsx(Button, { type: "button", outline: true, onClick: addField, children: "+ Add field" })
+    ] })
+  ] });
+}
+function FieldEditor({
+  field,
+  onChange,
+  onRemove,
+  depth
+}) {
+  const handleTypeChange = (next) => {
+    if (next === "object") {
+      onChange({ type: next, child: { type: "object", properties: {}, required: [] } });
+    } else if (next === "array") {
+      onChange({ type: next, child: { type: "object", properties: {}, required: [] } });
+    } else {
+      onChange({ type: next, child: void 0 });
+    }
+  };
+  const isComplex = field.type === "object" || field.type === "array";
+  return /* @__PURE__ */ 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__ */ jsxs("div", { className: "grid grid-cols-[1fr_140px_auto_auto] items-end gap-2", children: [
+      /* @__PURE__ */ jsx(
+        FormInput,
+        {
+          label: "Name",
+          value: field.name,
+          onValueChange: (name) => onChange({ name }),
+          placeholder: "recommendedPrice"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        FormSelect,
+        {
+          label: "Type",
+          value: field.type,
+          options: ALL_TYPES.map((t) => ({ value: t.value, label: t.label })),
+          onValueChange: (t) => handleTypeChange(t)
+        }
+      ),
+      /* @__PURE__ */ jsxs("label", { className: "flex items-center gap-2 pb-2 text-xs text-slate-700 dark:text-slate-200", children: [
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            type: "checkbox",
+            checked: field.required,
+            onChange: (event) => onChange({ required: event.target.checked }),
+            className: "h-4 w-4 rounded border-slate-300"
+          }
+        ),
+        "Required"
+      ] }),
+      /* @__PURE__ */ jsx(Button, { type: "button", plain: true, onClick: onRemove, children: "Remove" })
+    ] }),
+    /* @__PURE__ */ jsx(
+      FormInput,
+      {
+        label: "Description (optional)",
+        value: field.description,
+        onValueChange: (description) => onChange({ description }),
+        placeholder: "What the model should put here"
+      }
+    ),
+    isComplex && depth < 1 && /* @__PURE__ */ jsxs("div", { className: "mt-3 rounded-lg border border-dashed border-slate-300 p-2 dark:border-slate-700", children: [
+      /* @__PURE__ */ jsx("p", { className: "mb-2 text-[11px] uppercase tracking-wider text-slate-400", children: field.type === "array" ? "Item shape" : "Nested fields" }),
+      /* @__PURE__ */ jsx(
+        OutputSchemaBuilder,
+        {
+          value: field.child,
+          onChange: (child) => onChange({ child }),
+          depth: depth + 1
+        }
+      )
+    ] }),
+    isComplex && depth >= 1 && /* @__PURE__ */ jsx("p", { className: "mt-2 text-[11px] italic text-slate-500", children: "Deeper nesting is supported by the engine but not by this builder \u2014 edit the JSON directly if you need a third level." })
+  ] });
+}
+function buildFieldRows(schema) {
+  const properties = schema.properties ?? {};
+  const required = new Set(schema.required ?? []);
+  return Object.entries(properties).map(([name, subschema]) => {
+    const t = subschema.type ?? "string";
+    const isObject = t === "object";
+    const isArray = t === "array";
+    return {
+      name,
+      type: isObject ? "object" : isArray ? "array" : t,
+      description: subschema.description ?? "",
+      required: required.has(name),
+      child: isObject ? subschema : isArray ? subschema.items : void 0
+    };
+  });
+}
+function rowsToSchema(rows) {
+  const properties = {};
+  const required = [];
+  for (const row of rows) {
+    const name = row.name.trim();
+    if (!name) continue;
+    let entry;
+    if (row.type === "object") {
+      entry = row.child && row.child.type === "object" ? row.child : { type: "object", properties: {}, required: [] };
+    } else if (row.type === "array") {
+      entry = {
+        type: "array",
+        items: row.child ?? { type: "object", properties: {}, required: [] }
+      };
+    } else {
+      entry = { type: row.type };
+    }
+    if (row.description) entry.description = row.description;
+    properties[name] = entry;
+    if (row.required) required.push(name);
+  }
+  const out = { type: "object", properties };
+  if (required.length > 0) out.required = required;
+  return out;
+}
+function defaultAgentOutputSchema() {
+  return { type: "object", properties: {}, required: [] };
+}
+function StatusBadge({ status }) {
+  const colorMap = {
+    pending: "bg-gray-100 text-gray-700 dark:bg-gray-800 dark:text-gray-300",
+    running: "bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-300",
+    success: "bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-300",
+    error: "bg-red-100 text-red-700 dark:bg-red-900/30 dark:text-red-300"
+  };
+  return /* @__PURE__ */ jsx("span", { className: `inline-flex items-center rounded-full px-2 py-0.5 text-[10px] font-semibold ${colorMap[status] ?? colorMap.pending}`, children: status });
+}
+function formatDuration(ms) {
+  if (ms < 1e3) return `${ms}ms`;
+  return `${(ms / 1e3).toFixed(2)}s`;
+}
+function isRecord(value) {
+  return typeof value === "object" && value !== null && !Array.isArray(value);
+}
+function OutputCard({ label, value }) {
+  const displayValue = typeof value === "string" ? value : JSON.stringify(value, null, 2);
+  const isLong = typeof displayValue === "string" && displayValue.length > 120;
+  return /* @__PURE__ */ jsxs("div", { className: "rounded-xl border border-white/20 bg-white/40 p-3 dark:border-white/10 dark:bg-white/5", children: [
+    /* @__PURE__ */ jsx("p", { className: "mb-1 text-[10px] font-semibold uppercase tracking-wider text-gray-500 dark:text-gray-400", children: label }),
+    isLong ? /* @__PURE__ */ jsx("pre", { className: "max-h-40 overflow-auto whitespace-pre-wrap text-xs text-gray-800 dark:text-gray-200", children: displayValue }) : /* @__PURE__ */ jsx("p", { className: "text-sm font-medium text-gray-900 dark:text-white", children: displayValue })
+  ] });
+}
+function AgentProfileHeader({ agent, models, t, selectedModelId, setSelectedModelId, selectedFramework, temperature, setTemperature, elo, setElo, onChanged }) {
+  const modelName = models.find((model) => model.id === selectedModelId)?.name ?? selectedModelId ?? "\u2014";
+  const avatarUrl = agent.avatar;
+  const frameworkMeta = getFrameworkMeta(selectedFramework);
+  const tierInfo = getEloTier(elo);
+  const difficultyConfig = {
+    beginner: { color: "bg-cyan-100 text-cyan-700 dark:bg-cyan-900/30 dark:text-cyan-400", labelKey: "agentDrawer.tierBeginner" },
+    intermediate: { color: "bg-pink-100 text-pink-700 dark:bg-pink-900/30 dark:text-pink-400", labelKey: "agentDrawer.tierIntermediate" },
+    advanced: { color: "bg-amber-100 text-amber-700 dark:bg-amber-900/30 dark:text-amber-400", labelKey: "agentDrawer.tierAdvanced" },
+    expert: { color: "bg-emerald-100 text-emerald-700 dark:bg-emerald-900/30 dark:text-emerald-400", labelKey: "agentDrawer.tierExpert" }
+  };
+  const levelConfig = difficultyConfig[tierInfo.tierKey];
+  return /* @__PURE__ */ jsxs("div", { className: "relative overflow-hidden bg-gradient-to-br from-indigo-500/20 via-purple-500/10 to-transparent px-6 pb-6 pt-4 dark:from-indigo-500/10 dark:via-purple-500/5", children: [
+    levelConfig && /* @__PURE__ */ jsx("div", { className: "mb-4 flex justify-center", children: /* @__PURE__ */ jsx("span", { className: `${levelConfig.color} rounded-full px-4 py-1.5 text-xs font-bold shadow-sm transition-colors`, children: t(levelConfig.labelKey) }) }),
+    /* @__PURE__ */ jsx("div", { className: "mb-4 flex justify-center", children: /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+      /* @__PURE__ */ jsx("div", { className: "absolute inset-0 rounded-full bg-gradient-to-br from-purple-500 to-blue-500 opacity-40 blur-lg" }),
+      avatarUrl ? /* @__PURE__ */ jsx(
+        "img",
+        {
+          src: avatarUrl,
+          alt: agent.name,
+          loading: "lazy",
+          className: "relative h-20 w-20 rounded-full bg-white object-cover shadow-xl ring-4 ring-white dark:bg-gray-800 dark:ring-gray-800"
+        }
+      ) : /* @__PURE__ */ jsx("div", { className: "relative flex h-20 w-20 items-center justify-center rounded-full bg-gradient-to-br from-indigo-400 to-purple-500 shadow-xl ring-4 ring-white dark:ring-gray-800", children: /* @__PURE__ */ jsx(CpuChipIcon, { className: "h-10 w-10 text-white" }) }),
+      /* @__PURE__ */ jsx("div", { className: "absolute -bottom-1 -right-1 flex h-6 w-6 items-center justify-center rounded-full bg-indigo-500 ring-2 ring-white dark:ring-gray-900", children: /* @__PURE__ */ jsx(CpuChipIcon, { className: "h-3.5 w-3.5 text-white" }) })
+    ] }) }),
+    /* @__PURE__ */ jsx("h3", { className: "mb-2 text-center text-lg font-bold text-gray-900 dark:text-white", children: agent.name }),
+    agent.role && /* @__PURE__ */ jsx("div", { className: "mb-3 flex justify-center", children: /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center gap-1.5 rounded-full bg-white/60 px-3 py-1.5 text-xs font-medium text-gray-600 ring-1 ring-gray-200/50 dark:bg-gray-800/60 dark:text-gray-400 dark:ring-gray-700/50", children: [
+      /* @__PURE__ */ jsxs("svg", { className: "h-3 w-3", fill: "currentColor", viewBox: "0 0 20 20", children: [
+        /* @__PURE__ */ jsx("path", { fillRule: "evenodd", d: "M6 6V5a3 3 0 013-3h2a3 3 0 013 3v1h2a2 2 0 012 2v3.57A22.952 22.952 0 0110 13a22.95 22.95 0 01-8-1.43V8a2 2 0 012-2h2zm2-1a1 1 0 011-1h2a1 1 0 011 1v1H8V5zm1 5a1 1 0 011-1h.01a1 1 0 110 2H10a1 1 0 01-1-1z", clipRule: "evenodd" }),
+        /* @__PURE__ */ jsx("path", { d: "M2 13.692V16a2 2 0 002 2h12a2 2 0 002-2v-2.308A24.974 24.974 0 0110 15c-2.796 0-5.487-.46-8-1.308z" })
+      ] }),
+      agent.role
+    ] }) }),
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-center gap-2", children: [
+      /* @__PURE__ */ jsxs("div", { className: "inline-flex items-center gap-1.5 rounded bg-white/50 px-2.5 py-1 text-[10px] text-gray-600 dark:bg-gray-800/50 dark:text-gray-400", children: [
+        /* @__PURE__ */ jsx(CpuChipIcon, { className: "h-3 w-3" }),
+        /* @__PURE__ */ jsx("span", { className: "font-semibold", children: modelName })
+      ] }),
+      elo != null && /* @__PURE__ */ jsxs("div", { className: "inline-flex items-center gap-1 rounded bg-white/50 px-2 py-1 text-[10px] text-gray-600 dark:bg-gray-800/50 dark:text-gray-400", children: [
+        /* @__PURE__ */ jsx("span", { className: "opacity-60", children: "ELO:" }),
+        /* @__PURE__ */ jsx("span", { className: "font-bold tabular-nums", children: elo })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "mt-3 flex justify-center", children: /* @__PURE__ */ jsxs("span", { className: `inline-flex items-center gap-1.5 rounded-full px-3 py-1 text-[10px] font-semibold ${frameworkMeta.badgeColor}`, children: [
+      /* @__PURE__ */ jsx(frameworkMeta.IconComponent, { className: "h-3.5 w-3.5" }),
+      frameworkMeta.label
+    ] }) }),
+    /* @__PURE__ */ jsx(AgentCapabilityCard, { elo, setElo, models, selectedModelId, setSelectedModelId, temperature, setTemperature, onChanged, t }),
+    /* @__PURE__ */ jsxs("div", { className: "mt-2 flex items-center justify-center gap-2 text-[10px] text-gray-400 dark:text-gray-500", children: [
+      /* @__PURE__ */ jsxs("span", { children: [
+        "v",
+        agent.activePromptVersion
+      ] }),
+      /* @__PURE__ */ jsx("span", { children: "\xB7" }),
+      /* @__PURE__ */ jsxs("span", { children: [
+        agent.promptCount,
+        " prompt",
+        agent.promptCount === 1 ? "" : "s"
+      ] })
+    ] })
+  ] });
+}
+var MODEL_FAMILIES = {
+  anthropic: [
+    { prefix: "anthropic.claude-haiku", maxTokens: 8192, contextWindow: "200K" },
+    { prefix: "anthropic.claude-sonnet", maxTokens: 8192, contextWindow: "1M" },
+    { prefix: "anthropic.claude-opus", maxTokens: 32768, contextWindow: "1M" }
+  ],
+  amazon: [
+    { prefix: "amazon.nova-lite", maxTokens: 5120, contextWindow: "300K" },
+    { prefix: "amazon.nova-pro", maxTokens: 5120, contextWindow: "300K" }
+  ],
+  google: [
+    { prefix: "google.gemini-3-flash", maxTokens: 8192, contextWindow: "1M" },
+    { prefix: "google.gemini-3-1-pro", maxTokens: 32768, contextWindow: "1M" }
+  ],
+  meta: [
+    { prefix: "meta.llama", maxTokens: 8192, contextWindow: "128K" }
+  ],
+  openai: [
+    { prefix: "openai.gpt-5-mini", maxTokens: 16384, contextWindow: "1M" },
+    { prefix: "openai.gpt-5-v", maxTokens: 32768, contextWindow: "1M" }
+  ]
+};
+function getProviderFromModelId(modelId) {
+  if (modelId.startsWith("anthropic.")) return "anthropic";
+  if (modelId.startsWith("amazon.")) return "amazon";
+  if (modelId.startsWith("meta.")) return "meta";
+  return "anthropic";
+}
+function getEloTier(elo) {
+  if (elo < 1200) return {
+    tierKey: "beginner",
+    autonomyKey: "autonomyLow",
+    color: "text-cyan-500",
+    barColor: "from-cyan-400 to-cyan-500",
+    autonomyPercent: 25,
+    costPerTask: "$0.005",
+    familyIndex: 0,
+    temperature: 0.7
+  };
+  if (elo < 1600) return {
+    tierKey: "intermediate",
+    autonomyKey: "autonomyMedium",
+    color: "text-pink-500",
+    barColor: "from-pink-400 to-pink-500",
+    autonomyPercent: 50,
+    costPerTask: "$0.15",
+    familyIndex: 1,
+    temperature: 0.5
+  };
+  if (elo < 2e3) return {
+    tierKey: "advanced",
+    autonomyKey: "autonomyHigh",
+    color: "text-amber-500",
+    barColor: "from-amber-400 to-amber-500",
+    autonomyPercent: 75,
+    costPerTask: "$0.50",
+    familyIndex: 1,
+    temperature: 0.4
+  };
+  return {
+    tierKey: "expert",
+    autonomyKey: "autonomyFull",
+    color: "text-emerald-500",
+    barColor: "from-emerald-400 to-emerald-500",
+    autonomyPercent: 100,
+    costPerTask: "$1.50",
+    familyIndex: 2,
+    temperature: 0.3
+  };
+}
+function AgentCapabilityCard({ elo, setElo, models, selectedModelId, setSelectedModelId, temperature, setTemperature, onChanged, t }) {
+  const tierInfo = getEloTier(elo);
+  const eloPercent = Math.min((elo - 800) / (2400 - 800) * 100, 100);
+  const provider = getProviderFromModelId(selectedModelId);
+  const family = MODEL_FAMILIES[provider] ?? MODEL_FAMILIES.anthropic;
+  const handleEloChange = useCallback((event) => {
+    const newElo = parseInt(event.target.value, 10);
+    setElo(newElo);
+    const newTier = getEloTier(newElo);
+    const modelIndex = Math.min(newTier.familyIndex, family.length - 1);
+    const targetPrefix = family[modelIndex].prefix;
+    const matchingModel = models.find((model) => model.id.startsWith(targetPrefix));
+    if (matchingModel) {
+      setSelectedModelId(matchingModel.id);
+    }
+    setTemperature(newTier.temperature);
+    onChanged();
+  }, [family, models, setSelectedModelId, setTemperature, onChanged]);
+  const handleAutonomyClick = useCallback((level) => {
+    const eloMap = { 25: 1e3, 50: 1400, 75: 1800, 100: 2200 };
+    const newElo = eloMap[level] ?? 1e3;
+    setElo(newElo);
+    const newTier = getEloTier(newElo);
+    const modelIndex = Math.min(newTier.familyIndex, family.length - 1);
+    const targetPrefix = family[modelIndex].prefix;
+    const matchingModel = models.find((model) => model.id.startsWith(targetPrefix));
+    if (matchingModel) {
+      setSelectedModelId(matchingModel.id);
+    }
+    setTemperature(newTier.temperature);
+    onChanged();
+  }, [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__ */ 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: [
+    /* @__PURE__ */ jsxs("div", { className: "px-4 pt-3 pb-2", children: [
+      /* @__PURE__ */ jsxs("div", { className: "mb-1 flex items-center justify-between", children: [
+        /* @__PURE__ */ jsx("span", { className: "text-[10px] font-semibold uppercase tracking-wider text-gray-500 dark:text-gray-400", children: t("agentDrawer.capabilityRating") }),
+        /* @__PURE__ */ jsxs("div", { className: "flex items-baseline gap-1", children: [
+          /* @__PURE__ */ jsx("span", { className: `text-lg font-bold tabular-nums ${tierInfo.color}`, children: elo }),
+          /* @__PURE__ */ jsx("span", { className: "text-[10px] text-gray-400 dark:text-gray-500", children: "ELO" })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+        /* @__PURE__ */ 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__ */ jsx(
+            "div",
+            {
+              className: `h-full rounded-full bg-gradient-to-r ${tierInfo.barColor} transition-all duration-300`,
+              style: { width: `${eloPercent}%` }
+            }
+          ),
+          [1200, 1600, 2e3].map((boundary) => /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: "absolute top-0 h-full w-px bg-gray-400/40 dark:bg-gray-500/40",
+              style: { left: `${(boundary - 800) / (2400 - 800) * 100}%` }
+            },
+            boundary
+          ))
+        ] }),
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            type: "range",
+            min: "800",
+            max: "2400",
+            step: "50",
+            value: elo,
+            onChange: handleEloChange,
+            "aria-label": t("agentDrawer.capabilityRating"),
+            "aria-valuemin": 800,
+            "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"
+          }
+        ),
+        /* @__PURE__ */ 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__ */ jsxs("div", { className: "mt-0.5 flex justify-between text-[8px] text-gray-400 dark:text-gray-500", children: [
+        /* @__PURE__ */ jsx("span", { children: "800" }),
+        /* @__PURE__ */ jsx("span", { children: "1200" }),
+        /* @__PURE__ */ jsx("span", { children: "1600" }),
+        /* @__PURE__ */ jsx("span", { children: "2000" }),
+        /* @__PURE__ */ jsx("span", { children: "2400" })
+      ] })
+    ] }),
+    /* @__PURE__ */ 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__ */ jsxs("div", { className: "bg-white/60 px-3 py-2 dark:bg-gray-900/60", children: [
+        /* @__PURE__ */ jsx("p", { className: "text-[9px] text-gray-400 dark:text-gray-500", children: t("agentDrawer.model") }),
+        /* @__PURE__ */ jsx("p", { className: "truncate text-xs font-semibold text-gray-900 dark:text-white", children: currentModelName })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "bg-white/60 px-3 py-2 dark:bg-gray-900/60", children: [
+        /* @__PURE__ */ jsx("p", { className: "text-[9px] text-gray-400 dark:text-gray-500", children: t("agentDrawer.maxTokens") }),
+        /* @__PURE__ */ jsx("p", { className: "text-xs font-semibold text-gray-900 dark:text-white", children: currentFamilyEntry.maxTokens.toLocaleString() })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "bg-white/60 px-3 py-2 dark:bg-gray-900/60", children: [
+        /* @__PURE__ */ jsx("p", { className: "text-[9px] text-gray-400 dark:text-gray-500", children: t("agentDrawer.context") }),
+        /* @__PURE__ */ jsx("p", { className: "text-xs font-semibold text-gray-900 dark:text-white", children: currentFamilyEntry.contextWindow })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "bg-white/60 px-3 py-2 dark:bg-gray-900/60", children: [
+        /* @__PURE__ */ jsx("p", { className: "text-[9px] text-gray-400 dark:text-gray-500", children: t("agentDrawer.temperature") }),
+        /* @__PURE__ */ jsx("p", { className: "text-xs font-semibold text-gray-900 dark:text-white", children: temperature.toFixed(2) })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "bg-white/60 px-3 py-2 dark:bg-gray-900/60", children: [
+        /* @__PURE__ */ jsx("p", { className: "text-[9px] text-gray-400 dark:text-gray-500", children: t("agentDrawer.autonomy") }),
+        /* @__PURE__ */ jsx("p", { className: `text-xs font-semibold ${tierInfo.color}`, children: t(`agentDrawer.${tierInfo.autonomyKey}`) })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "bg-white/60 px-3 py-2 dark:bg-gray-900/60", children: [
+        /* @__PURE__ */ jsx("p", { className: "text-[9px] text-gray-400 dark:text-gray-500", children: t("agentDrawer.costPerTask") }),
+        /* @__PURE__ */ jsx("p", { className: "text-xs font-semibold text-gray-900 dark:text-white", children: tierInfo.costPerTask })
+      ] })
+    ] }),
+    /* @__PURE__ */ 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__ */ jsxs("div", { className: "mb-1 flex items-center justify-between", children: [
+        /* @__PURE__ */ jsx("span", { className: "text-[9px] text-gray-400 dark:text-gray-500", children: t("agentDrawer.autonomyLevel") }),
+        /* @__PURE__ */ jsx("span", { className: `text-[10px] font-semibold ${tierInfo.color}`, children: t(`agentDrawer.${tierInfo.autonomyKey}`) })
+      ] }),
+      /* @__PURE__ */ jsx("div", { className: "flex gap-1", children: [
+        { level: 25, labelKey: "autonomyLow" },
+        { level: 50, labelKey: "autonomyMedium" },
+        { level: 75, labelKey: "autonomyHigh" },
+        { level: 100, labelKey: "autonomyFull" }
+      ].map(({ level, labelKey }) => /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          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"}`
+        },
+        level
+      )) }),
+      /* @__PURE__ */ jsxs("div", { className: "mt-1 flex justify-between text-[7px] text-gray-400 dark:text-gray-500", children: [
+        /* @__PURE__ */ jsx("span", { children: t("agentDrawer.autonomyLow") }),
+        /* @__PURE__ */ jsx("span", { children: t("agentDrawer.autonomyMedium") }),
+        /* @__PURE__ */ jsx("span", { children: t("agentDrawer.autonomyHigh") }),
+        /* @__PURE__ */ jsx("span", { children: t("agentDrawer.autonomyFull") })
+      ] })
+    ] })
+  ] });
+}
+function ConfigTab({ models, t, selectedModelId, setSelectedModelId, selectedFramework, setSelectedFramework, markDirty, connectedProviderTypes }) {
+  const frameworkKeys = Object.keys(FRAMEWORK_META);
+  const hasProviderConstraints = connectedProviderTypes.length > 0;
+  const compatibleModels = getCompatibleModels(models, selectedFramework);
+  const handleFrameworkChange = useCallback((newFramework) => {
+    setSelectedFramework(newFramework);
+    if (!isModelCompatibleWithFramework(selectedModelId, newFramework)) {
+      const compatible = getCompatibleModels(models, newFramework);
+      if (compatible.length > 0) {
+        setSelectedModelId(compatible[0].id);
+      }
+    }
+    markDirty();
+  }, [selectedModelId, models, setSelectedFramework, setSelectedModelId, markDirty]);
+  return /* @__PURE__ */ jsxs("div", { className: "space-y-5 p-4", children: [
+    /* @__PURE__ */ jsxs("div", { children: [
+      /* @__PURE__ */ jsx("label", { className: "mb-2 block text-xs font-medium text-gray-500 dark:text-gray-400", children: t("agentDrawer.framework") }),
+      /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-1.5", children: frameworkKeys.map((key) => {
+        const meta = FRAMEWORK_META[key];
+        const isSelected = key === selectedFramework;
+        const compatCount = getCompatibleModels(models, key).length;
+        const isCompatibleWithProviders = !hasProviderConstraints || isFrameworkCompatibleWithProviders(key, connectedProviderTypes);
+        return /* @__PURE__ */ 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"}`,
+            title: !isCompatibleWithProviders ? t("agentDrawer.frameworkIncompatible") : void 0,
+            children: [
+              /* @__PURE__ */ jsx(meta.IconComponent, { className: "h-3.5 w-3.5" }),
+              meta.label,
+              /* @__PURE__ */ jsx("span", { className: "ml-0.5 text-[8px] opacity-60", children: compatCount })
+            ]
+          },
+          key
+        );
+      }) })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { children: [
+      /* @__PURE__ */ jsxs("label", { className: "mb-2 block text-xs font-medium text-gray-500 dark:text-gray-400", children: [
+        t("agentDrawer.model"),
+        compatibleModels.length < models.length && /* @__PURE__ */ jsxs("span", { className: "ml-1.5 text-[10px] font-normal text-gray-400 dark:text-gray-500", children: [
+          "(",
+          compatibleModels.length,
+          "/",
+          models.length,
+          ")"
+        ] })
+      ] }),
+      /* @__PURE__ */ jsx("div", { className: "grid grid-cols-2 gap-2", children: models.map((model) => {
+        const isSelected = model.id === selectedModelId;
+        const isCompatible = isModelCompatibleWithFramework(model.id, selectedFramework);
+        const { IconComponent, color, providerLabel } = getModelIcon(model.id);
+        return /* @__PURE__ */ jsxs(
+          "button",
+          {
+            type: "button",
+            disabled: !isCompatible,
+            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__ */ jsx(IconComponent, { className: `h-5 w-5 flex-shrink-0 ${isSelected && isCompatible ? color : "text-gray-400 dark:text-gray-500"}` }),
+              /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
+                /* @__PURE__ */ 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__ */ jsx("p", { className: "truncate text-[10px] text-gray-400 dark:text-gray-500", children: providerLabel })
+              ] })
+            ]
+          },
+          model.id
+        );
+      }) })
+    ] })
+  ] });
+}
+function PromptTab({
+  agent,
+  temperature,
+  setTemperature,
+  markDirty,
+  t,
+  promptText,
+  setPromptText,
+  outputSchema,
+  setOutputSchema
+}) {
+  const handleTemperatureChange = useCallback((event) => {
+    setTemperature(parseFloat(event.target.value));
+    markDirty();
+  }, []);
+  const handlePromptChange = useCallback((event) => {
+    setPromptText(event.target.value);
+    markDirty();
+  }, []);
+  const temperaturePercent = temperature * 100;
+  const isPrecise = temperature <= 0.3;
+  const isBalanced = temperature > 0.3 && temperature <= 0.7;
+  const isCreative = temperature > 0.7;
+  return /* @__PURE__ */ jsxs("div", { className: "space-y-5 p-4", children: [
+    /* @__PURE__ */ jsxs("div", { children: [
+      /* @__PURE__ */ jsxs("div", { className: "mb-2 flex items-center justify-between", children: [
+        /* @__PURE__ */ jsx("label", { className: "text-xs font-medium text-gray-500 dark:text-gray-400", children: t("agentDrawer.temperature") }),
+        /* @__PURE__ */ jsx("span", { className: "text-sm font-bold tabular-nums text-gray-900 dark:text-white", children: temperature.toFixed(2) })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+        /* @__PURE__ */ 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__ */ jsx(
+          "div",
+          {
+            className: "h-full rounded-full transition-all duration-300 ease-out",
+            style: { width: `${temperaturePercent}%`, background: "linear-gradient(90deg, #3b82f6, #8b5cf6 50%, #ec4899)" }
+          }
+        ) }),
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            type: "range",
+            min: "0",
+            max: "1",
+            step: "0.05",
+            value: temperature,
+            onChange: handleTemperatureChange,
+            "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"
+          }
+        ),
+        /* @__PURE__ */ 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__ */ jsxs("div", { className: "mt-1 flex items-center justify-between", children: [
+        /* @__PURE__ */ 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__ */ 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__ */ 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__ */ jsxs("div", { children: [
+      /* @__PURE__ */ jsxs("div", { className: "mb-1 flex items-center justify-between", children: [
+        /* @__PURE__ */ jsx("label", { className: "text-xs font-medium text-gray-500 dark:text-gray-400", children: t("agentDrawer.systemPrompt") }),
+        /* @__PURE__ */ jsxs("span", { className: "text-[10px] text-gray-400 dark:text-gray-500", children: [
+          promptText.length,
+          " chars"
+        ] })
+      ] }),
+      /* @__PURE__ */ jsx(
+        "textarea",
+        {
+          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",
+          placeholder: t("agentDrawer.systemPromptPlaceholder")
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs("div", { children: [
+      /* @__PURE__ */ 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__ */ jsx("p", { className: "mb-2 text-[11px] text-gray-400 dark:text-gray-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__ */ jsx(
+        OutputSchemaBuilder,
+        {
+          value: outputSchema,
+          onChange: (next) => {
+            setOutputSchema(next);
+            markDirty();
+          }
+        }
+      )
+    ] })
+  ] });
+}
+function ResultsTab({ agentId, t }) {
+  const nodeResults = useWorkflowStore((state) => state.nodeResults);
+  const agentResult = useMemo(() => {
+    return nodeResults[agentId] ?? null;
+  }, [nodeResults, agentId]);
+  if (!agentResult) {
+    return /* @__PURE__ */ jsx("div", { className: "flex flex-col items-center justify-center px-4 py-12 text-center", children: /* @__PURE__ */ jsx("p", { className: "text-sm text-gray-500 dark:text-gray-400", children: t("agentDrawer.noResults") }) });
+  }
+  const outputs = isRecord(agentResult.data) ? agentResult.data : null;
+  return /* @__PURE__ */ jsxs("div", { className: "space-y-4 p-4", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ jsx("span", { className: "text-xs font-medium text-gray-500 dark:text-gray-400", children: t("agentDrawer.status") }),
+        /* @__PURE__ */ jsx(StatusBadge, { status: agentResult.status })
+      ] }),
+      agentResult.durationMs != null && /* @__PURE__ */ jsxs("span", { className: "text-xs text-gray-500 dark:text-gray-400", children: [
+        t("agentDrawer.duration"),
+        ": ",
+        formatDuration(agentResult.durationMs)
+      ] })
+    ] }),
+    agentResult.error && /* @__PURE__ */ jsx("div", { className: "rounded-xl border border-red-200 bg-red-50 p-3 dark:border-red-900/30 dark:bg-red-900/10", children: /* @__PURE__ */ jsx("p", { className: "text-xs font-medium text-red-800 dark:text-red-300", children: agentResult.error }) }),
+    outputs && Object.keys(outputs).length > 0 && /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
+      /* @__PURE__ */ jsx("h4", { className: "text-xs font-semibold uppercase tracking-wider text-gray-500 dark:text-gray-400", children: t("agentDrawer.outputVariables") }),
+      Object.entries(outputs).map(([key, value]) => /* @__PURE__ */ jsx(OutputCard, { label: key, value }, key))
+    ] })
+  ] });
+}
+var SI = (slug, color) => `https://cdn.simpleicons.org/${slug}/${color}`;
+var PROVIDER_LOGOS = {
+  anthropic: SI("anthropic", "D4A27F"),
+  amazon: "https://www.svgrepo.com/show/448266/aws.svg",
+  google: SI("googlegemini", "8E75B2"),
+  openai: "https://www.svgrepo.com/show/306500/openai.svg",
+  meta: SI("meta", "0668E1"),
+  aws_bedrock: "https://www.svgrepo.com/show/448266/aws.svg",
+  openai_api: "https://www.svgrepo.com/show/306500/openai.svg",
+  google_vertex: SI("googlegemini", "8E75B2"),
+  azure_openai: SI("microsoftazure", "0078D4"),
+  anthropic_api: SI("anthropic", "D4A27F")
+};
+function ModelsTab({ modelProviders, selectedProviderId, onSelectProvider, models, selectedModelId, onSelectModel, agentFramework, t }) {
+  if (modelProviders.length === 0) {
+    return /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center justify-center px-4 py-12 text-center", children: [
+      /* @__PURE__ */ jsx(KeyIcon, { className: "mb-2 h-8 w-8 text-gray-400 dark:text-gray-500" }),
+      /* @__PURE__ */ jsx("p", { className: "text-sm text-gray-500 dark:text-gray-400", children: t("agentDrawer.noProvidersAvailable") }),
+      /* @__PURE__ */ jsx("p", { className: "mt-1 text-xs text-gray-400 dark:text-gray-500", children: t("agentDrawer.dragProviderHint") })
+    ] });
+  }
+  const modelsByProvider = modelProviders.map((provider) => ({
+    provider,
+    models: models.filter((m) => {
+      const modelProvider = m.id.split(".")[0];
+      return provider.provider === modelProvider || provider.provider === "amazon" && modelProvider === "anthropic" || provider.provider === "amazon" && modelProvider === "amazon" || provider.provider === "amazon" && modelProvider === "meta";
+    })
+  }));
+  return /* @__PURE__ */ jsxs("div", { className: "space-y-4 p-4", children: [
+    /* @__PURE__ */ jsxs("div", { children: [
+      /* @__PURE__ */ jsx("label", { className: "mb-2 block text-xs font-medium text-gray-500 dark:text-gray-400", children: t("agentDrawer.selectProvider") }),
+      /* @__PURE__ */ jsx("div", { className: "space-y-1.5", children: modelProviders.map((provider) => {
+        const isSelected = selectedProviderId === provider.id;
+        const logo = PROVIDER_LOGOS[provider.provider];
+        return /* @__PURE__ */ jsxs(
+          "button",
+          {
+            type: "button",
+            onClick: () => onSelectProvider(provider.id),
+            className: `flex w-full items-center gap-3 rounded-xl border px-3 py-2.5 text-left transition-all ${isSelected ? "border-indigo-500/30 bg-indigo-50/50 ring-1 ring-indigo-500/20 dark:border-indigo-400/20 dark:bg-indigo-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"}`,
+            children: [
+              logo ? /* @__PURE__ */ jsx("div", { className: "flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-white/10 p-1", children: /* @__PURE__ */ jsx("img", { src: logo, alt: "", className: "h-5 w-5 object-contain", loading: "lazy" }) }) : /* @__PURE__ */ jsx("div", { className: "flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-gradient-to-br from-slate-500 to-gray-600", children: /* @__PURE__ */ jsx(KeyIcon, { className: "h-4 w-4 text-white" }) }),
+              /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
+                /* @__PURE__ */ jsx("p", { className: `text-xs font-medium ${isSelected ? "text-gray-900 dark:text-white" : "text-gray-600 dark:text-gray-400"}`, children: provider.name }),
+                /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5 text-[10px] text-gray-400 dark:text-gray-500", children: [
+                  /* @__PURE__ */ jsxs("span", { children: [
+                    provider.modelCount,
+                    " models"
+                  ] }),
+                  provider.configured && /* @__PURE__ */ jsx("span", { className: "h-1.5 w-1.5 rounded-full bg-green-500" })
+                ] })
+              ] }),
+              /* @__PURE__ */ jsx("div", { className: `flex h-4 w-4 shrink-0 items-center justify-center rounded-full transition-all ${isSelected ? "bg-indigo-500 text-white" : "border border-gray-300 dark:border-gray-600"}`, children: isSelected && /* @__PURE__ */ jsx(CheckIcon, { className: "h-2.5 w-2.5" }) })
+            ]
+          },
+          provider.id
+        );
+      }) })
+    ] }),
+    selectedProviderId && (() => {
+      const providerModels = modelsByProvider.find((p) => p.provider.id === selectedProviderId);
+      if (!providerModels || providerModels.models.length === 0) return /* @__PURE__ */ jsx("p", { className: "text-xs text-gray-400 dark:text-gray-500", children: t("agentDrawer.noModelsForProvider") });
+      const compatibleModels = providerModels.models.filter(
+        (m) => isModelCompatibleWithFramework(m.id, agentFramework)
+      );
+      const incompatibleModels = providerModels.models.filter(
+        (m) => !isModelCompatibleWithFramework(m.id, agentFramework)
+      );
+      return /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsx("label", { className: "mb-2 block text-xs font-medium text-gray-500 dark:text-gray-400", children: t("agentDrawer.selectModel") }),
+        /* @__PURE__ */ jsxs("div", { className: "space-y-1", children: [
+          compatibleModels.map((model) => {
+            const isSelected = selectedModelId === model.id;
+            const { IconComponent, color, providerLabel } = getModelIcon(model.id);
+            return /* @__PURE__ */ jsxs(
+              "button",
+              {
+                type: "button",
+                onClick: () => onSelectModel(model.id),
+                className: `flex w-full items-center gap-2.5 rounded-lg border px-3 py-2 text-left transition-all ${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__ */ jsx(IconComponent, { className: `h-4 w-4 flex-shrink-0 ${isSelected ? color : "text-gray-400 dark:text-gray-500"}` }),
+                  /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
+                    /* @__PURE__ */ jsx("p", { className: `text-xs font-semibold ${isSelected ? "text-gray-900 dark:text-white" : "text-gray-600 dark:text-gray-300"}`, children: model.name }),
+                    /* @__PURE__ */ jsx("p", { className: "text-[10px] text-gray-400 dark:text-gray-500", children: providerLabel })
+                  ] }),
+                  isSelected && /* @__PURE__ */ jsx(CheckIcon, { className: "h-3.5 w-3.5 shrink-0 text-indigo-500" })
+                ]
+              },
+              model.id
+            );
+          }),
+          incompatibleModels.length > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx("div", { className: "mt-2 mb-1 text-[9px] font-medium text-gray-400 dark:text-gray-500", children: t("agentDrawer.incompatibleWithFramework") }),
+            incompatibleModels.map((model) => /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2.5 rounded-lg border border-gray-200/30 px-3 py-2 opacity-40 dark:border-white/5", children: [
+              /* @__PURE__ */ jsx(CpuChipIcon, { className: "h-4 w-4 text-gray-400" }),
+              /* @__PURE__ */ jsx("p", { className: "text-xs text-gray-500", children: model.name })
+            ] }, model.id))
+          ] })
+        ] })
+      ] });
+    })()
+  ] });
+}
+function ToolsTab({ agentTools, enabledToolIds, onToggle, agentFramework, t }) {
+  if (agentTools.length === 0) {
+    return /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center justify-center px-4 py-12 text-center", children: [
+      /* @__PURE__ */ jsx(CommandLineIcon, { className: "mb-2 h-8 w-8 text-gray-400 dark:text-gray-500" }),
+      /* @__PURE__ */ jsx("p", { className: "text-sm text-gray-500 dark:text-gray-400", children: t("agentDrawer.noToolsAvailable") })
+    ] });
+  }
+  const sortedTools = [...agentTools].sort((a, b) => {
+    const aCompat = !a.compatibleFrameworks || a.compatibleFrameworks.length === 0 || a.compatibleFrameworks.includes(agentFramework);
+    const bCompat = !b.compatibleFrameworks || b.compatibleFrameworks.length === 0 || b.compatibleFrameworks.includes(agentFramework);
+    if (aCompat && !bCompat) return -1;
+    if (!aCompat && bCompat) return 1;
+    return 0;
+  });
+  return /* @__PURE__ */ jsxs("div", { className: "space-y-2 p-4", children: [
+    /* @__PURE__ */ jsx("p", { className: "mb-3 text-xs text-gray-500 dark:text-gray-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);
+      return /* @__PURE__ */ jsxs(
+        "button",
+        {
+          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"}`,
+          disabled: !isCompatible,
+          children: [
+            /* @__PURE__ */ 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__ */ jsx(CommandLineIcon, { className: `h-4 w-4 ${isEnabled ? "text-white" : "text-gray-500 dark:text-gray-400"}` }) }),
+            /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
+              /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5", children: [
+                /* @__PURE__ */ 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__ */ 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" })
+              ] }),
+              tool.description && /* @__PURE__ */ jsx("p", { className: "truncate text-[10px] text-gray-400 dark:text-gray-500", children: tool.description }),
+              tool.compatibleFrameworks && tool.compatibleFrameworks.length > 0 && /* @__PURE__ */ jsx("div", { className: "mt-1 flex flex-wrap gap-0.5", children: tool.compatibleFrameworks.map((framework) => {
+                const meta = getFrameworkMeta(framework);
+                const isCurrentFw = framework === agentFramework;
+                return /* @__PURE__ */ 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: [
+                  /* @__PURE__ */ jsx(meta.IconComponent, { className: "h-2.5 w-2.5" }),
+                  meta.label
+                ] }, framework);
+              }) })
+            ] }),
+            /* @__PURE__ */ 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__ */ jsx(CheckIcon, { className: "h-3 w-3" }) }),
+            /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: "shrink-0",
+                onClick: (event) => {
+                  event.stopPropagation();
+                },
+                children: /* @__PURE__ */ jsx(
+                  ToggleSwitch,
+                  {
+                    checked: isEnabled,
+                    onChange: () => onToggle(tool.agentToolId),
+                    disabled: !isCompatible,
+                    size: "sm",
+                    color: "indigo",
+                    label: `${tool.name} enabled`
+                  }
+                )
+              }
+            )
+          ]
+        },
+        tool.agentToolId
+      );
+    })
+  ] });
+}
+function AdvancedTab({
+  displayName,
+  setDisplayName,
+  description,
+  setDescription,
+  maxOutputTokens,
+  setMaxOutputTokens,
+  topP,
+  setTopP,
+  topK,
+  setTopK,
+  tags,
+  setTags,
+  status,
+  setStatus,
+  avatarUrl,
+  setAvatarUrl,
+  markDirty,
+  t
+}) {
+  const wrap = "w-full rounded-lg border border-gray-200/50 bg-gray-50/50 px-3 py-2 text-sm text-gray-800 outline-none transition-colors focus:border-indigo-300/50 focus:ring-1 focus:ring-indigo-300/30 dark:border-white/10 dark:bg-white/5 dark:text-gray-200";
+  const labelCls = "mb-1 block text-xs font-medium text-gray-500 dark:text-gray-400";
+  const touch = () => markDirty();
+  return /* @__PURE__ */ jsxs("div", { className: "space-y-4 p-4", children: [
+    /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-1 gap-3 sm:grid-cols-2", children: [
+      /* @__PURE__ */ jsxs("label", { children: [
+        /* @__PURE__ */ jsx("span", { className: labelCls, children: t("agentDrawer.displayName", { _: "Display name" }) }),
+        /* @__PURE__ */ jsx("input", { className: wrap, value: displayName, onChange: (e) => {
+          setDisplayName(e.target.value);
+          touch();
+        } })
+      ] }),
+      /* @__PURE__ */ jsxs("label", { children: [
+        /* @__PURE__ */ jsx("span", { className: labelCls, children: t("agentDrawer.status", { _: "Status" }) }),
+        /* @__PURE__ */ jsxs("select", { className: wrap, value: status, onChange: (e) => {
+          setStatus(e.target.value);
+          touch();
+        }, children: [
+          /* @__PURE__ */ jsx("option", { value: "draft", children: "draft" }),
+          /* @__PURE__ */ jsx("option", { value: "active", children: "active" }),
+          /* @__PURE__ */ jsx("option", { value: "archived", children: "archived" })
+        ] })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs("label", { className: "block", children: [
+      /* @__PURE__ */ jsx("span", { className: labelCls, children: t("agentDrawer.description", { _: "Description" }) }),
+      /* @__PURE__ */ jsx(
+        "textarea",
+        {
+          className: wrap,
+          rows: 3,
+          value: description,
+          onChange: (e) => {
+            setDescription(e.target.value);
+            touch();
+          },
+          placeholder: t("agentDrawer.descriptionPlaceholder", { _: "What this agent does, which tasks it's good at" })
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs("label", { className: "block", children: [
+      /* @__PURE__ */ jsx("span", { className: labelCls, children: t("agentDrawer.avatarUrl", { _: "Avatar URL" }) }),
+      /* @__PURE__ */ jsx("input", { className: wrap, value: avatarUrl, onChange: (e) => {
+        setAvatarUrl(e.target.value);
+        touch();
+      }, placeholder: "https://\u2026" })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-1 gap-3 sm:grid-cols-3", children: [
+      /* @__PURE__ */ jsxs("label", { children: [
+        /* @__PURE__ */ jsx("span", { className: labelCls, children: t("agentDrawer.maxOutputTokens", { _: "Max output tokens" }) }),
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            type: "number",
+            min: 1,
+            max: 32768,
+            className: wrap,
+            value: maxOutputTokens,
+            onChange: (e) => {
+              setMaxOutputTokens(Number(e.target.value) || 0);
+              touch();
+            }
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxs("label", { children: [
+        /* @__PURE__ */ jsx("span", { className: labelCls, children: t("agentDrawer.topP", { _: "Top-p" }) }),
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            type: "number",
+            step: 0.05,
+            min: 0,
+            max: 1,
+            className: wrap,
+            value: topP,
+            onChange: (e) => {
+              setTopP(Number(e.target.value) || 0);
+              touch();
+            }
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxs("label", { children: [
+        /* @__PURE__ */ jsx("span", { className: labelCls, children: t("agentDrawer.topK", { _: "Top-k" }) }),
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            type: "number",
+            min: 0,
+            max: 500,
+            className: wrap,
+            value: topK,
+            onChange: (e) => {
+              setTopK(Number(e.target.value) || 0);
+              touch();
+            }
+          }
+        )
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs("label", { className: "block", children: [
+      /* @__PURE__ */ jsx("span", { className: labelCls, children: t("agentDrawer.tags", { _: "Tags (comma-separated)" }) }),
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          className: wrap,
+          value: tags,
+          onChange: (e) => {
+            setTags(e.target.value);
+            touch();
+          },
+          placeholder: "pricing, research, internal"
+        }
+      )
+    ] })
+  ] });
+}
+function AgentModal({ onSaved, onPersist }) {
+  const t = useTranslations("agents.workflow");
+  const activeModal = useModalStore((s) => s.activeModal);
+  const agentData = useModalStore((s) => s.agentData);
+  const closeModal = useModalStore((s) => s.closeModal);
+  const open = activeModal === "agent";
+  const agent = agentData?.agent ?? null;
+  const models = agentData?.models ?? [];
+  const availableAgentTools = agentData?.agentTools ?? [];
+  const isCreateMode = agentData?.isCreateMode ?? false;
+  const [activeTab, setActiveTab] = useState("profile");
+  const [selectedModelId, setSelectedModelId] = useState("");
+  const [selectedFramework, setSelectedFramework] = useState("custom");
+  const [temperature, setTemperature] = useState(0.7);
+  const [elo, setElo] = useState(1e3);
+  const [saved, setSaved] = useState(true);
+  const [enabledToolIds, setEnabledToolIds] = useState(/* @__PURE__ */ new Set());
+  const [selectedProviderId, setSelectedProviderId] = useState("");
+  const [systemPrompt, setSystemPrompt] = useState("");
+  const [outputSchema, setOutputSchema] = useState(void 0);
+  const [displayName, setDisplayName] = useState("");
+  const [description, setDescription] = useState("");
+  const [avatarUrl, setAvatarUrlState] = useState("");
+  const [maxOutputTokens, setMaxOutputTokens] = useState(1024);
+  const [topP, setTopP] = useState(0.95);
+  const [topK, setTopK] = useState(40);
+  const [tagsText, setTagsText] = useState("");
+  const [status, setStatus] = useState("active");
+  const [persisting, setPersisting] = useState(false);
+  const availableModelProviders = agentData?.modelProviders ?? [];
+  const agentId = agent?.agentId ?? agent?.id ?? "";
+  useEffect(() => {
+    if (!agent) return;
+    setSelectedModelId(agent.modelId ?? models[0]?.id ?? "");
+    setSelectedFramework(String(agent.framework ?? "custom"));
+    setTemperature(agent.temperature ?? 0.7);
+    setElo(Number(agent.elo ?? 1e3));
+    setSaved(!isCreateMode);
+    setActiveTab("profile");
+    const agentToolIds = agent.agentToolIds;
+    setEnabledToolIds(new Set(agentToolIds ?? availableAgentTools.filter((t2) => t2.enabled).map((t2) => t2.agentToolId)));
+    setSelectedProviderId(agent.modelProviderId ?? "");
+    const agentRecord = agent;
+    setSystemPrompt(
+      agentRecord.systemPrompt ?? agentRecord.instruction ?? ""
+    );
+    setOutputSchema(
+      agentRecord.outputSchema ?? void 0
+    );
+    setDisplayName(agentRecord.displayName ?? agent.name ?? "");
+    setDescription(agentRecord.description ?? "");
+    setAvatarUrlState(agentRecord.avatar ?? "");
+    const agentMaxOut = agentRecord.maxOutputTokens ?? agent.maxTokens ?? 1024;
+    setMaxOutputTokens(Number(agentMaxOut) || 1024);
+    setTopP(Number(agentRecord.topP ?? 0.95));
+    setTopK(Number(agentRecord.topK ?? 40));
+    const existingTags = agentRecord.tags;
+    setTagsText(
+      Array.isArray(existingTags) ? existingTags.filter((v) => typeof v === "string").join(", ") : ""
+    );
+    setStatus(agentRecord.status ?? "active");
+  }, [agentId]);
+  const dirty = !saved;
+  const markDirty = useCallback(() => setSaved(false), []);
+  const markSaved = useCallback(() => setSaved(true), []);
+  const handleClose = useCallback(() => {
+    closeModal();
+  }, [closeModal]);
+  const handleSelectProvider = useCallback((providerId) => {
+    setSelectedProviderId(providerId);
+    markDirty();
+  }, [markDirty]);
+  const handleToggleTool = useCallback((toolId) => {
+    setEnabledToolIds((previous) => {
+      const next = new Set(previous);
+      if (next.has(toolId)) next.delete(toolId);
+      else next.add(toolId);
+      return next;
+    });
+    markDirty();
+  }, [markDirty]);
+  const handleMarkSaved = useCallback(async () => {
+    if (!agent) return;
+    const payload = {
+      agentId: agent.agentId,
+      name: agent.name,
+      displayName: displayName.trim() || void 0,
+      description: description.trim() || void 0,
+      avatar: avatarUrl.trim() || void 0,
+      modelId: selectedModelId || void 0,
+      connectionId: selectedProviderId || void 0,
+      framework: selectedFramework,
+      systemPrompt,
+      temperature,
+      maxOutputTokens,
+      topP,
+      topK,
+      elo,
+      status: status || void 0,
+      enabledToolIds: Array.from(enabledToolIds),
+      tags: tagsText.split(",").map((tag) => tag.trim()).filter((tag) => tag.length > 0),
+      // Send `outputSchema` only when the user actually configured one
+      // — sending `undefined` would shadow any existing stored schema
+      // through the spread later, so the parent layer should treat
+      // missing key as "leave alone".
+      ...outputSchema ? { outputSchema } : {}
+    };
+    try {
+      setPersisting(true);
+      if (onPersist) await onPersist(payload);
+      markSaved();
+      onSaved?.();
+    } catch (error) {
+      console.error("[AgentModal] onPersist failed", error);
+    } finally {
+      setPersisting(false);
+    }
+  }, [
+    agent,
+    displayName,
+    description,
+    avatarUrl,
+    selectedModelId,
+    selectedProviderId,
+    selectedFramework,
+    systemPrompt,
+    temperature,
+    maxOutputTokens,
+    topP,
+    topK,
+    elo,
+    status,
+    enabledToolIds,
+    tagsText,
+    outputSchema,
+    markSaved,
+    onSaved,
+    onPersist
+  ]);
+  if (!agent) return null;
+  const sections = [
+    { id: "profile", label: t("agentDrawer.profileSection"), icon: UserCircleIcon, group: t("agentDrawer.agentGroup") },
+    { id: "framework", label: t("agentDrawer.frameworkSection"), icon: Cog6ToothIcon, group: t("agentDrawer.agentGroup") },
+    { id: "prompt", label: t("agentDrawer.promptSection"), icon: SparklesIcon, group: t("agentDrawer.agentGroup") },
+    { id: "tools", label: `${t("agentDrawer.toolsTab")}${enabledToolIds.size > 0 ? ` (${enabledToolIds.size})` : ""}`, icon: CommandLineIcon, group: t("agentDrawer.configGroup") },
+    { id: "models", label: `${t("agentDrawer.modelsTab")}${selectedProviderId ? " \u2713" : ""}`, icon: KeyIcon, group: t("agentDrawer.configGroup") },
+    { id: "advanced", label: t("agentDrawer.advancedTab", { _: "Advanced" }), icon: Cog6ToothIcon, group: t("agentDrawer.configGroup") },
+    { id: "results", label: t("agentDrawer.resultsTab"), icon: PlayCircleIcon, group: t("agentDrawer.executionGroup") }
+  ];
+  const effectiveAvatarUrl = avatarUrl || agent.avatar;
+  const sidebarFooter = /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 px-4 py-3", children: [
+    /* @__PURE__ */ jsx("div", { role: "status", "aria-live": "polite", className: "flex-1 text-xs", children: dirty ? /* @__PURE__ */ jsx("span", { className: "text-amber-500 dark:text-amber-400", children: t("agentDrawer.unsavedChanges") }) : /* @__PURE__ */ jsx("span", { className: "text-emerald-500 dark:text-emerald-400", children: t("agentDrawer.saved") }) }),
+    /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        onClick: () => {
+          void handleMarkSaved();
+        },
+        disabled: !dirty || persisting,
+        className: `rounded-lg px-3 py-1.5 text-xs font-semibold text-white shadow-sm transition-all ${dirty && !persisting ? "bg-gradient-to-r from-indigo-500 to-purple-500 hover:from-indigo-600 hover:to-purple-600" : "cursor-not-allowed bg-gray-300 dark:bg-gray-700"}`,
+        children: persisting ? "\u2026" : t("agentDrawer.save")
+      }
+    )
+  ] });
+  return /* @__PURE__ */ jsxs(
+    GlassModal,
+    {
+      open,
+      onClose: handleClose,
+      title: agent.name,
+      subtitle: isCreateMode ? t("agentDrawer.createAgent") : t("agentDrawer.editAgent"),
+      gradient: "from-indigo-500 to-purple-600",
+      icon: /* @__PURE__ */ jsx(CpuChipIcon, { className: "h-5 w-5 text-white" }),
+      label: isCreateMode ? t("agentDrawer.createAgent") : t("agentDrawer.editAgent"),
+      sidebar: {
+        sections,
+        activeSectionId: activeTab,
+        onSectionChange: (sectionId) => setActiveTab(sectionId),
+        identity: {
+          displayName: displayName || agent.name,
+          profileInitial: (displayName || agent.name).charAt(0).toUpperCase(),
+          avatarUrl: effectiveAvatarUrl,
+          role: agent.role
+        },
+        footer: sidebarFooter
+      },
+      children: [
+        activeTab === "profile" && /* @__PURE__ */ jsx(AgentProfileHeader, { agent, models, t, selectedModelId, setSelectedModelId, selectedFramework, temperature, setTemperature, elo, setElo, onChanged: markDirty }),
+        activeTab === "framework" && /* @__PURE__ */ jsx(ConfigTab, { models, t, selectedModelId, setSelectedModelId, selectedFramework, setSelectedFramework: (fw) => setSelectedFramework(fw), markDirty, connectedProviderTypes: availableModelProviders.map((p) => p.provider) }),
+        activeTab === "prompt" && /* @__PURE__ */ jsx(
+          PromptTab,
+          {
+            agent,
+            temperature,
+            setTemperature,
+            markDirty,
+            t,
+            promptText: systemPrompt,
+            setPromptText: setSystemPrompt,
+            outputSchema,
+            setOutputSchema
+          }
+        ),
+        activeTab === "advanced" && /* @__PURE__ */ jsx(
+          AdvancedTab,
+          {
+            displayName,
+            setDisplayName,
+            description,
+            setDescription,
+            maxOutputTokens,
+            setMaxOutputTokens,
+            topP,
+            setTopP,
+            topK,
+            setTopK,
+            tags: tagsText,
+            setTags: setTagsText,
+            status,
+            setStatus,
+            avatarUrl,
+            setAvatarUrl: setAvatarUrlState,
+            markDirty,
+            t
+          }
+        ),
+        activeTab === "tools" && /* @__PURE__ */ jsx(ToolsTab, { agentTools: availableAgentTools, enabledToolIds, onToggle: handleToggleTool, agentFramework: selectedFramework, t }),
+        activeTab === "models" && /* @__PURE__ */ jsx(
+          ModelsTab,
+          {
+            modelProviders: availableModelProviders,
+            selectedProviderId,
+            onSelectProvider: handleSelectProvider,
+            models,
+            selectedModelId,
+            onSelectModel: (modelId) => {
+              setSelectedModelId(modelId);
+              markDirty();
+            },
+            agentFramework: selectedFramework,
+            t
+          }
+        ),
+        activeTab === "results" && /* @__PURE__ */ jsx(ResultsTab, { agentId: agent.agentId, t })
+      ]
+    }
+  );
+}
+var useSubworkflowStore = create((set) => ({
+  // State
+  tool: null,
+  open: false,
+  name: "",
+  category: "external",
+  description: "",
+  timeoutMs: 1e4,
+  retryCount: 0,
+  dirty: false,
+  // Actions
+  openModal: (tool) => set({
+    tool,
+    open: true,
+    name: tool.name ?? "",
+    category: tool.category ?? "external",
+    description: String(tool.description ?? ""),
+    timeoutMs: Number(tool.timeoutMs ?? 1e4),
+    retryCount: tool.retryCount ?? 0,
+    dirty: !tool.toolId
+  }),
+  closeModal: () => set({
+    tool: null,
+    open: false,
+    name: "",
+    category: "external",
+    description: "",
+    timeoutMs: 1e4,
+    retryCount: 0,
+    dirty: false
+  }),
+  setName: (name) => set({ name, dirty: true }),
+  setCategory: (category) => set({ category, dirty: true }),
+  setDescription: (description) => set({ description, dirty: true }),
+  setTimeoutMs: (timeoutMs) => set({ timeoutMs, dirty: true }),
+  setRetryCount: (retryCount) => set({ retryCount, dirty: true }),
+  markDirty: () => set({ dirty: true }),
+  markSaved: () => set({ dirty: false })
+}));
+var DEFAULT_SUBWORKFLOW_GRAPH = {
+  nodes: [
+    { id: "start", type: "start", position: { x: 80, y: 200 }, data: { entityId: "start", label: "Start", config: { type: "start", inputVariables: [] } } },
+    { id: "end", type: "end", position: { x: 600, y: 200 }, data: { entityId: "end", label: "End", config: { type: "end", outputVariables: [] } } }
+  ],
+  edges: [
+    { id: "e-start-end", source: "start", target: "end", sourceHandle: null, targetHandle: null }
+  ],
+  viewport: { x: 0, y: 0, zoom: 0.85 }
+};
+function VariableChip({ name, type }) {
+  return /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center gap-1 rounded-lg border border-teal-200/50 bg-teal-50/50 px-2 py-0.5 text-[10px] dark:border-teal-400/20 dark:bg-teal-400/10", children: [
+    /* @__PURE__ */ jsx("span", { className: "font-semibold text-teal-700 dark:text-teal-300", children: name }),
+    /* @__PURE__ */ jsxs("span", { className: "text-teal-500/60 dark:text-teal-400/50", children: [
+      ": ",
+      type
+    ] })
+  ] });
+}
+function OutputChip({ name, type }) {
+  return /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center gap-1 rounded-lg border border-violet-200/50 bg-violet-50/50 px-2 py-0.5 text-[10px] dark:border-violet-400/20 dark:bg-violet-400/10", children: [
+    /* @__PURE__ */ jsx("span", { className: "font-semibold text-violet-700 dark:text-violet-300", children: name }),
+    /* @__PURE__ */ jsxs("span", { className: "text-violet-500/60 dark:text-violet-400/50", children: [
+      ": ",
+      type
+    ] })
+  ] });
+}
+function ConfigSection({ title, icon: Icon, defaultOpen = true, children }) {
+  const [open, setOpen] = useState(defaultOpen);
+  return /* @__PURE__ */ jsxs("div", { className: "border-b border-white/10", children: [
+    /* @__PURE__ */ jsxs(
+      "button",
+      {
+        type: "button",
+        onClick: () => setOpen(!open),
+        "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__ */ jsx(ChevronDownIcon, { className: "h-3 w-3 text-gray-400" }) : /* @__PURE__ */ jsx(ChevronRightIcon, { className: "h-3 w-3 text-gray-400" }),
+          /* @__PURE__ */ jsx(Icon, { className: "h-3 w-3 text-gray-400" }),
+          /* @__PURE__ */ jsx("span", { className: "text-[10px] font-semibold uppercase tracking-wider text-gray-500 dark:text-gray-400", children: title })
+        ]
+      }
+    ),
+    open && /* @__PURE__ */ jsx("div", { className: "px-4 pb-3", children })
+  ] });
+}
+function SubworkflowModal({ onSaved, onMaximize }) {
+  const t = useTranslations("agents.workflow");
+  const tool = useSubworkflowStore((s) => s.tool);
+  const open = useSubworkflowStore((s) => s.open);
+  const name = useSubworkflowStore((s) => s.name);
+  const category = useSubworkflowStore((s) => s.category);
+  const description = useSubworkflowStore((s) => s.description);
+  const timeoutMs = useSubworkflowStore((s) => s.timeoutMs);
+  const retryCount = useSubworkflowStore((s) => s.retryCount);
+  const dirty = useSubworkflowStore((s) => s.dirty);
+  const setName = useSubworkflowStore((s) => s.setName);
+  const setCategory = useSubworkflowStore((s) => s.setCategory);
+  const setDescription = useSubworkflowStore((s) => s.setDescription);
+  const setTimeoutMs = useSubworkflowStore((s) => s.setTimeoutMs);
+  const setRetryCount = useSubworkflowStore((s) => s.setRetryCount);
+  const markDirty = useSubworkflowStore((s) => s.markDirty);
+  const markSaved = useSubworkflowStore((s) => s.markSaved);
+  const closeModal = useSubworkflowStore((s) => s.closeModal);
+  const agentBehind = useModalStore((s) => s.activeModal === "agent" ? s.agentData?.agent?.name : null);
+  const isCreateMode = !tool?.toolId;
+  const initialGraph = useMemo(() => {
+    const config = tool?.config;
+    if (config?.type === "workflow" && config.graph) {
+      return config.graph;
+    }
+    return DEFAULT_SUBWORKFLOW_GRAPH;
+  }, [tool]);
+  const latestGraphRef = useMemo(() => ({ current: initialGraph }), [initialGraph]);
+  const handleGraphChange = useCallback((graph2) => {
+    latestGraphRef.current = graph2;
+    markDirty();
+  }, [latestGraphRef, markDirty]);
+  const handleSave = useCallback(() => {
+    markSaved();
+    if (tool) {
+      onSaved?.({
+        ...tool,
+        name,
+        category,
+        description,
+        timeoutMs,
+        config: { type: "workflow", graph: latestGraphRef.current }
+      });
+    }
+  }, [tool, onSaved, name, category, description, timeoutMs, latestGraphRef, markSaved]);
+  if (!tool) return null;
+  const categoryKey = category ?? "external";
+  const gradient = tool.color ?? CATEGORY_COLORS[categoryKey] ?? CATEGORY_COLORS.external;
+  const categoryPill = CATEGORY_PILL_COLORS[categoryKey] ?? CATEGORY_PILL_COLORS.external;
+  const IconComponent = ICON_MAP[tool.icon ?? ""] ?? ArrowPathRoundedSquareIcon;
+  const graph = latestGraphRef.current;
+  const startNode = graph.nodes.find((n) => n.type === "start");
+  const endNode = graph.nodes.find((n) => n.type === "end");
+  const startConfig = startNode?.data?.config;
+  const endConfig = endNode?.data?.config;
+  const inputVariables = (startConfig?.inputVariables ?? []).map((v) => ({ name: v, type: "string" }));
+  const outputVariables = (endConfig?.outputVariables ?? []).map((v) => ({ name: v, type: "string" }));
+  const footer = /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
+    /* @__PURE__ */ jsx("div", { role: "status", "aria-live": "polite", className: "text-xs", children: dirty ? /* @__PURE__ */ jsx("span", { className: "text-amber-500 dark:text-amber-400", children: t("subworkflowDrawer.unsavedChanges") }) : /* @__PURE__ */ jsx("span", { className: "text-emerald-500 dark:text-emerald-400", children: t("subworkflowDrawer.saved") }) }),
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ 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__ */ jsx(
+        "button",
+        {
+          type: "button",
+          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"}`,
+          children: isCreateMode ? t("subworkflowDrawer.create") : t("subworkflowDrawer.save")
+        }
+      )
+    ] })
+  ] });
+  return /* @__PURE__ */ jsx(
+    GlassModal,
+    {
+      open,
+      onClose: closeModal,
+      title: isCreateMode ? t("subworkflowDrawer.createTitle") : name,
+      subtitle: agentBehind ? `${agentBehind} \u2192 ${t("subworkflowDrawer.subworkflow")}` : t("subworkflowDrawer.subworkflow"),
+      label: isCreateMode ? t("subworkflowDrawer.new") : t("subworkflowDrawer.edit"),
+      gradient: "from-teal-500 to-cyan-600",
+      icon: /* @__PURE__ */ jsx(ArrowPathRoundedSquareIcon, { className: "h-6 w-6 text-white" }),
+      maxWidth: "6xl",
+      footer,
+      zIndex: agentBehind ? "z-[60]" : "z-50",
+      children: /* @__PURE__ */ jsxs("div", { className: "flex h-[80vh] min-h-[600px]", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex w-72 flex-shrink-0 flex-col overflow-y-auto border-r border-white/10", children: [
+          isCreateMode ? /* @__PURE__ */ 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__ */ 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__ */ jsx(
+              "input",
+              {
+                type: "text",
+                value: name,
+                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"
+              }
+            ),
+            /* @__PURE__ */ jsx("div", { className: "mt-3 flex flex-wrap gap-1", children: ["external", "market", "data", "communication", "analytics"].map((cat) => /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                onClick: () => setCategory(cat),
+                className: `rounded-full px-2 py-1 text-[9px] font-semibold transition-all ${cat === category ? `${CATEGORY_PILL_COLORS[cat] ?? 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"}`,
+                children: cat
+              },
+              cat
+            )) })
+          ] }) : /* @__PURE__ */ 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__ */ jsxs("div", { className: "flex items-center gap-3", children: [
+            /* @__PURE__ */ 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__ */ jsx(IconComponent, { className: "h-5 w-5 text-white" }) }),
+            /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
+              /* @__PURE__ */ jsx("h3", { className: "truncate text-sm font-bold text-gray-900 dark:text-white", children: name }),
+              /* @__PURE__ */ jsxs("div", { className: "mt-1 flex flex-wrap gap-1", children: [
+                /* @__PURE__ */ 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__ */ 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__ */ jsx(
+              "button",
+              {
+                type: "button",
+                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__ */ jsx(ArrowsPointingOutIcon, { className: "h-4 w-4" })
+              }
+            )
+          ] }) }),
+          /* @__PURE__ */ jsx("div", { className: "border-b border-white/10 px-4 py-3", children: /* @__PURE__ */ jsx(
+            "textarea",
+            {
+              value: description,
+              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"
+            }
+          ) }),
+          /* @__PURE__ */ jsx(ConfigSection, { title: t("subworkflowDrawer.inputVariables"), icon: ArrowsPointingInIcon, children: /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-1", children: inputVariables.length > 0 ? inputVariables.map((variable) => /* @__PURE__ */ jsx(VariableChip, { name: variable.name, type: variable.type }, variable.name)) : /* @__PURE__ */ jsx("span", { className: "text-[10px] text-gray-400 dark:text-gray-500", children: t("subworkflowDrawer.noVariables") }) }) }),
+          /* @__PURE__ */ jsx(ConfigSection, { title: t("subworkflowDrawer.outputVariables"), icon: ArrowsPointingOutIcon, children: /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-1", children: outputVariables.length > 0 ? outputVariables.map((variable) => /* @__PURE__ */ jsx(OutputChip, { name: variable.name, type: variable.type }, variable.name)) : /* @__PURE__ */ jsx("span", { className: "text-[10px] text-gray-400 dark:text-gray-500", children: t("subworkflowDrawer.noVariables") }) }) }),
+          /* @__PURE__ */ jsxs(ConfigSection, { title: t("subworkflowDrawer.executionSettings"), icon: BoltIcon, defaultOpen: false, children: [
+            /* @__PURE__ */ jsxs("div", { className: "mb-3", children: [
+              /* @__PURE__ */ jsxs("div", { className: "mb-1 flex items-center justify-between", children: [
+                /* @__PURE__ */ jsxs("label", { className: "flex items-center gap-1 text-[10px] text-gray-600 dark:text-gray-400", children: [
+                  /* @__PURE__ */ jsx(ClockIcon, { className: "h-3 w-3" }),
+                  t("subworkflowDrawer.timeout")
+                ] }),
+                /* @__PURE__ */ jsxs("span", { className: "text-[10px] font-bold tabular-nums text-gray-900 dark:text-white", children: [
+                  (timeoutMs / 1e3).toFixed(0),
+                  "s"
+                ] })
+              ] }),
+              /* @__PURE__ */ jsx(
+                "input",
+                {
+                  type: "range",
+                  min: "1000",
+                  max: "30000",
+                  step: "1000",
+                  value: timeoutMs,
+                  onChange: (event) => setTimeoutMs(parseInt(event.target.value, 10)),
+                  "aria-label": t("subworkflowDrawer.timeout"),
+                  "aria-valuemin": 1,
+                  "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"
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsxs("div", { children: [
+              /* @__PURE__ */ jsxs("div", { className: "mb-1 flex items-center justify-between", children: [
+                /* @__PURE__ */ jsx("label", { className: "text-[10px] text-gray-600 dark:text-gray-400", children: t("subworkflowDrawer.retries") }),
+                /* @__PURE__ */ jsx("span", { className: "text-[10px] font-bold tabular-nums text-gray-900 dark:text-white", children: retryCount })
+              ] }),
+              /* @__PURE__ */ jsx("div", { className: "flex gap-1", children: [0, 1, 2, 3].map((count) => /* @__PURE__ */ 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"}`,
+                  children: count
+                },
+                count
+              )) })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsx("div", { className: "mt-auto" })
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: "flex-1", children: /* @__PURE__ */ jsx(
+          WorkflowCanvas,
+          {
+            initialGraph,
+            agents: [],
+            models: [],
+            tools: [],
+            rules: [],
+            onGraphChange: handleGraphChange
+          }
+        ) })
+      ] })
+    }
+  );
+}
+function PipelineSettingsModal({ onSave }) {
+  const t = useTranslations("agents.workflow");
+  const activeModal = useModalStore((s) => s.activeModal);
+  const data = useModalStore((s) => s.pipelineSettingsData);
+  const closeModal = useModalStore((s) => s.closeModal);
+  const open = activeModal === "pipeline-settings";
+  const [nameValue, setNameValue] = useState("");
+  const [descriptionValue, setDescriptionValue] = useState("");
+  const [slugValue, setSlugValue] = useState("");
+  const [isDraft, setIsDraft] = useState(true);
+  const [isActive, setIsActive] = useState(true);
+  const [isSaving, setIsSaving] = useState(false);
+  const lifecycleAvailable = useMemo(() => {
+    if (!data) return false;
+    return data.isDraft !== void 0 || data.isActive !== void 0 || data.slug !== void 0;
+  }, [data]);
+  useEffect(() => {
+    if (data) {
+      setNameValue(data.name);
+      setDescriptionValue(data.description);
+      setSlugValue(data.slug ?? "");
+      setIsDraft(data.isDraft ?? true);
+      setIsActive(data.isActive ?? true);
+    }
+  }, [data]);
+  const handleSubmit = async (event) => {
+    event.preventDefault();
+    const trimmedName = nameValue.trim();
+    if (!trimmedName) return;
+    const trimmedDescription = descriptionValue.trim();
+    const trimmedSlug = slugValue.trim();
+    const changes = {
+      name: trimmedName,
+      description: trimmedDescription
+    };
+    if (data) {
+      if (trimmedSlug !== (data.slug ?? "")) {
+        changes.slug = trimmedSlug.length > 0 ? trimmedSlug : null;
+      }
+      if (data.isDraft !== void 0 && isDraft !== data.isDraft) {
+        changes.isDraft = isDraft;
+      }
+      if (data.isActive !== void 0 && isActive !== data.isActive) {
+        changes.isActive = isActive;
+      }
+    }
+    setIsSaving(true);
+    try {
+      await onSave(changes);
+      closeModal();
+    } catch {
+    } finally {
+      setIsSaving(false);
+    }
+  };
+  const footer = /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-end gap-2", children: [
+    /* @__PURE__ */ 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__ */ jsxs(
+      Button,
+      {
+        type: "submit",
+        form: "pipeline-settings-form",
+        color: "ios-glass-blue",
+        loading: isSaving,
+        loadingText: t("saving"),
+        children: [
+          /* @__PURE__ */ jsx(CheckIcon, { className: "h-4 w-4" }),
+          t("saveSettings")
+        ]
+      }
+    )
+  ] });
+  return /* @__PURE__ */ jsx(
+    GlassModal,
+    {
+      open,
+      onClose: closeModal,
+      title: t("pipelineSettings"),
+      subtitle: t("pipelineSettingsSubtitle"),
+      label: t("settings"),
+      icon: /* @__PURE__ */ jsx(Cog6ToothIcon, { className: "h-5 w-5 text-white" }),
+      gradient: "from-indigo-500 to-purple-600",
+      maxWidth: "md",
+      footer,
+      onSubmit: handleSubmit,
+      children: /* @__PURE__ */ jsxs("form", { id: "pipeline-settings-form", onSubmit: handleSubmit, className: "space-y-5", children: [
+        /* @__PURE__ */ jsx(
+          FormInput,
+          {
+            label: t("pipelineName"),
+            value: nameValue,
+            onValueChange: setNameValue,
+            placeholder: t("pipelineNamePlaceholder"),
+            required: true
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          FormTextarea,
+          {
+            label: t("pipelineDescription"),
+            value: descriptionValue,
+            onValueChange: setDescriptionValue,
+            placeholder: t("pipelineDescriptionPlaceholder"),
+            rows: 4
+          }
+        ),
+        lifecycleAvailable && /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(
+            FormInput,
+            {
+              label: t("pipelineSlug", { _: "Slug" }),
+              value: slugValue,
+              onValueChange: setSlugValue,
+              placeholder: "fuel-pricing",
+              hint: t("pipelineSlugHint", {
+                _: "URL-friendly identifier. Leave blank to use the auto-generated one."
+              })
+            }
+          ),
+          /* @__PURE__ */ 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__ */ jsx("legend", { className: "px-1 text-xs font-medium text-gray-600 dark:text-gray-300", children: t("pipelineLifecycle", { _: "Lifecycle" }) }),
+            /* @__PURE__ */ jsxs("label", { className: "flex items-center justify-between gap-3 text-sm text-gray-700 dark:text-gray-200", children: [
+              /* @__PURE__ */ jsxs("span", { children: [
+                t("pipelineIsDraft", { _: "Draft mode" }),
+                /* @__PURE__ */ 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__ */ jsx(
+                "input",
+                {
+                  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"
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsxs("label", { className: "flex items-center justify-between gap-3 text-sm text-gray-700 dark:text-gray-200", children: [
+              /* @__PURE__ */ jsxs("span", { children: [
+                t("pipelineIsActive", { _: "Active" }),
+                /* @__PURE__ */ 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__ */ jsx(
+                "input",
+                {
+                  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"
+                }
+              )
+            ] })
+          ] })
+        ] })
+      ] })
+    }
+  );
+}
+function RunReplayModal({
+  open,
+  onClose,
+  runId,
+  workflowId,
+  originalInputs,
+  onReplay
+}) {
+  const t = useTranslations("agents.workflow");
+  const [rows, setRows] = useState([]);
+  const [submitting, setSubmitting] = useState(false);
+  const [error, setError] = useState(null);
+  useEffect(() => {
+    if (!open) return;
+    setRows(Object.entries(originalInputs).map(([key, value]) => toRow(key, value)));
+    setError(null);
+  }, [open, originalInputs]);
+  const overrides = useMemo(() => {
+    const out = {};
+    for (const row of rows) {
+      if (!row.touched) continue;
+      try {
+        out[row.key] = parseRow(row);
+      } catch (e) {
+        out[`__error__${row.key}`] = e.message;
+      }
+    }
+    return out;
+  }, [rows]);
+  const hasParseError = Object.keys(overrides).some((k) => k.startsWith("__error__"));
+  const updateRow = (index, patch) => {
+    setRows((current) => current.map((r, i) => i === index ? { ...r, ...patch, touched: true } : r));
+  };
+  const resetRow = (index) => {
+    setRows((current) => current.map((r, i) => {
+      if (i !== index) return r;
+      return toRow(r.key, r.original);
+    }));
+  };
+  const handleSubmit = async () => {
+    setError(null);
+    if (hasParseError) {
+      setError(t("replayParseError", { _: "One or more values do not match their declared type." }));
+      return;
+    }
+    setSubmitting(true);
+    try {
+      const cleaned = {};
+      for (const row of rows) {
+        if (!row.touched) continue;
+        cleaned[row.key] = parseRow(row);
+      }
+      await onReplay(cleaned);
+      onClose();
+    } catch (e) {
+      setError(e.message);
+    } finally {
+      setSubmitting(false);
+    }
+  };
+  const footer = /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-2", children: [
+    /* @__PURE__ */ jsxs("span", { className: "text-[11px] text-gray-400", children: [
+      "run ",
+      /* @__PURE__ */ jsx("code", { children: runId.slice(0, 8) }),
+      " \xB7 wf ",
+      /* @__PURE__ */ jsx("code", { children: workflowId.slice(0, 8) })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ 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__ */ jsxs(
+        Button,
+        {
+          type: "submit",
+          form: "run-replay-form",
+          color: "ios-glass-blue",
+          loading: submitting,
+          children: [
+            /* @__PURE__ */ jsx(ArrowPathIcon, { className: "h-4 w-4" }),
+            t("replay", { _: "Replay" })
+          ]
+        }
+      )
+    ] })
+  ] });
+  return /* @__PURE__ */ jsx(
+    GlassModal,
+    {
+      open,
+      onClose,
+      title: t("replayTitle", { _: "Replay run" }),
+      subtitle: t("replaySubtitle", { _: "Tweak any input below and re-execute. Untouched keys keep their original value." }),
+      icon: /* @__PURE__ */ jsx(ArrowPathIcon, { className: "h-5 w-5 text-white" }),
+      gradient: "from-sky-500 to-indigo-600",
+      maxWidth: "lg",
+      footer,
+      onSubmit: (event) => {
+        event.preventDefault();
+        void handleSubmit();
+      },
+      children: /* @__PURE__ */ jsxs(
+        "form",
+        {
+          id: "run-replay-form",
+          onSubmit: (event) => {
+            event.preventDefault();
+            void handleSubmit();
+          },
+          className: "space-y-3",
+          children: [
+            rows.length === 0 ? /* @__PURE__ */ 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__ */ jsx(
+              RowEditor,
+              {
+                row,
+                onChange: (patch) => updateRow(index, patch),
+                onReset: () => resetRow(index)
+              },
+              row.key
+            )),
+            error && /* @__PURE__ */ jsx("p", { className: "rounded-lg border border-red-400/40 bg-red-500/10 p-2 text-xs text-red-600 dark:text-red-300", children: error })
+          ]
+        }
+      )
+    }
+  );
+}
+function RowEditor({
+  row,
+  onChange,
+  onReset
+}) {
+  const isJson = row.kind === "json";
+  return /* @__PURE__ */ 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: [
+    /* @__PURE__ */ jsxs("div", { className: "mb-2 flex items-center justify-between gap-2", children: [
+      /* @__PURE__ */ jsx("span", { className: "font-mono text-xs text-gray-700 dark:text-gray-200", children: row.key }),
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ jsx("span", { className: "rounded-full bg-gray-200/60 px-2 py-0.5 text-[10px] uppercase tracking-wider text-gray-600 dark:bg-white/10 dark:text-gray-300", children: row.kind }),
+        row.touched && /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            onClick: onReset,
+            className: "text-[11px] text-indigo-600 hover:text-indigo-500 dark:text-indigo-400",
+            children: "reset"
+          }
+        )
+      ] })
+    ] }),
+    row.kind === "boolean" ? /* @__PURE__ */ jsxs(
+      "select",
+      {
+        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",
+        children: [
+          /* @__PURE__ */ jsx("option", { value: "true", children: "true" }),
+          /* @__PURE__ */ jsx("option", { value: "false", children: "false" })
+        ]
+      }
+    ) : isJson ? /* @__PURE__ */ jsx(
+      FormTextarea,
+      {
+        value: row.value,
+        onValueChange: (v) => onChange({ value: v }),
+        rows: 4,
+        className: "font-mono"
+      }
+    ) : /* @__PURE__ */ jsx(
+      FormInput,
+      {
+        type: row.kind === "number" ? "number" : "text",
+        value: row.value,
+        onValueChange: (v) => onChange({ value: v })
+      }
+    )
+  ] });
+}
+function toRow(key, value) {
+  if (value === null || value === void 0) {
+    return { key, value: "", kind: "string", touched: false, original: value };
+  }
+  if (typeof value === "boolean") {
+    return { key, value: value ? "true" : "false", kind: "boolean", touched: false, original: value };
+  }
+  if (typeof value === "number") {
+    return { key, value: String(value), kind: "number", touched: false, original: value };
+  }
+  if (typeof value === "string") {
+    return { key, value, kind: "string", touched: false, original: value };
+  }
+  return {
+    key,
+    value: JSON.stringify(value, null, 2),
+    kind: "json",
+    touched: false,
+    original: value
+  };
+}
+function parseRow(row) {
+  switch (row.kind) {
+    case "string":
+      return row.value;
+    case "number": {
+      const n = Number(row.value);
+      if (!Number.isFinite(n)) {
+        throw new Error(`'${row.key}' must be a number, got '${row.value}'`);
+      }
+      return n;
+    }
+    case "boolean":
+      return row.value === "true";
+    case "json": {
+      if (row.value.trim().length === 0) return null;
+      try {
+        return JSON.parse(row.value);
+      } catch (e) {
+        throw new Error(`'${row.key}' is not valid JSON: ${e.message}`);
+      }
+    }
+  }
+}
+
+// src/astrlabe/components/rules/types.ts
+var RULE_STATUS_OPTIONS = ["draft", "active", "archived"];
+var TIMEZONE_OPTIONS = [
+  "UTC",
+  "America/Sao_Paulo",
+  "America/New_York",
+  "America/Los_Angeles",
+  "Europe/London",
+  "Europe/Lisbon"
+];
+var OPERATOR_OPTIONS = [
+  { value: "truthy", label: "Field is set (truthy)" },
+  { value: "eq", label: "Equals" },
+  { value: "neq", label: "Not equal to" },
+  { value: "gt", label: "Greater than" },
+  { value: "gte", label: "Greater than or equal" },
+  { value: "lt", label: "Less than" },
+  { value: "lte", label: "Less than or equal" },
+  { value: "contains", label: "Contains (string)" },
+  { value: "threshold", label: "Threshold" },
+  { value: "regex_match", label: "Regex match" },
+  { value: "time_window", label: "Time window" },
+  { value: "boolean_expression", label: "And/Or group" }
+];
+var SIMPLE_COMPARISON_OPERATORS = [
+  "truthy",
+  "eq",
+  "neq",
+  "gt",
+  "gte",
+  "lt",
+  "lte",
+  "contains"
+];
+function RuleConditionBuilder({ value, onChange, depth = 0 }) {
+  const handleOperatorChange = (op) => {
+    const base = { operator: op };
+    switch (op) {
+      case "truthy":
+        onChange({ ...base, field: value.field ?? "" });
+        break;
+      case "eq":
+      case "neq":
+      case "gt":
+      case "gte":
+      case "lt":
+      case "lte":
+      case "contains":
+        onChange({ ...base, field: value.field ?? "", value: value.value ?? "" });
+        break;
+      case "threshold":
+        onChange({
+          ...base,
+          field: value.field ?? "",
+          comparison: value.comparison ?? "gte",
+          value: typeof value.value === "number" ? value.value : 0
+        });
+        break;
+      case "regex_match":
+        onChange({ ...base, field: value.field ?? "", pattern: value.pattern ?? "" });
+        break;
+      case "time_window":
+        onChange({
+          ...base,
+          field: value.field ?? "",
+          timezone: value.timezone ?? "UTC",
+          windows: value.windows && value.windows.length > 0 ? value.windows : [{ startHour: 6, endHour: 9 }]
+        });
+        break;
+      case "boolean_expression":
+        onChange({
+          ...base,
+          combinator: value.combinator ?? "and",
+          operands: value.operands && value.operands.length > 0 ? value.operands : [{ operator: "gt", field: "", value: 0 }, { operator: "gt", field: "", value: 0 }]
+        });
+        break;
+    }
+  };
+  return /* @__PURE__ */ 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__ */ jsx(
+      FormSelect,
+      {
+        label: "Operator",
+        value: value.operator,
+        options: OPERATOR_OPTIONS,
+        onValueChange: (v) => handleOperatorChange(v)
+      }
+    ),
+    SIMPLE_COMPARISON_OPERATORS.includes(value.operator) && /* @__PURE__ */ jsx(SimpleEditor, { value, onChange }),
+    value.operator === "threshold" && /* @__PURE__ */ jsx(ThresholdEditor, { value, onChange }),
+    value.operator === "regex_match" && /* @__PURE__ */ jsx(RegexEditor, { value, onChange }),
+    value.operator === "time_window" && /* @__PURE__ */ jsx(TimeWindowEditor, { value, onChange }),
+    value.operator === "boolean_expression" && depth < 1 && /* @__PURE__ */ jsx(BooleanGroupEditor, { value, onChange, depth: depth + 1 }),
+    value.operator === "boolean_expression" && depth >= 1 && /* @__PURE__ */ jsx("p", { className: "text-xs italic text-slate-500", children: "Nested boolean groups are supported by the engine but not in this builder \u2014 edit the JSON directly for deeper trees." })
+  ] });
+}
+function SimpleEditor({
+  value,
+  onChange
+}) {
+  const isTruthy = value.operator === "truthy";
+  return /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-1 gap-3 sm:grid-cols-2", children: [
+    /* @__PURE__ */ jsx(
+      FormInput,
+      {
+        label: "Field",
+        hint: "Dotted reference into the variable pool \u2014 e.g. `parse-pricing.margin`, `inputs.fuelType`",
+        value: value.field ?? "",
+        onValueChange: (field) => onChange({ ...value, field }),
+        placeholder: "node.path"
+      }
+    ),
+    !isTruthy && /* @__PURE__ */ jsx(
+      FormInput,
+      {
+        label: "Value",
+        hint: "Literal. Numeric operators coerce via `as f64`.",
+        value: value.value === null || value.value === void 0 ? "" : String(value.value),
+        onValueChange: (raw) => onChange({ ...value, value: coerceScalar(raw) })
+      }
+    )
+  ] });
+}
+function ThresholdEditor({
+  value,
+  onChange
+}) {
+  return /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-1 gap-3 sm:grid-cols-3", children: [
+    /* @__PURE__ */ jsx(
+      FormInput,
+      {
+        label: "Field",
+        value: value.field ?? "",
+        onValueChange: (field) => onChange({ ...value, field }),
+        placeholder: "parse-pricing.margin"
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      FormSelect,
+      {
+        label: "Direction",
+        value: value.comparison ?? "gte",
+        options: [
+          { value: "gt", label: "Greater than (>)" },
+          { value: "gte", label: "At least (\u2265)" },
+          { value: "lt", label: "Less than (<)" },
+          { value: "lte", label: "At most (\u2264)" }
+        ],
+        onValueChange: (comparison) => onChange({ ...value, comparison })
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      FormInput,
+      {
+        label: "Threshold",
+        type: "number",
+        value: value.value === null || value.value === void 0 ? "" : String(value.value),
+        onValueChange: (raw) => onChange({ ...value, value: Number(raw) }),
+        placeholder: "0.08"
+      }
+    )
+  ] });
+}
+function RegexEditor({
+  value,
+  onChange
+}) {
+  return /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-1 gap-3 sm:grid-cols-2", children: [
+    /* @__PURE__ */ jsx(
+      FormInput,
+      {
+        label: "Field",
+        value: value.field ?? "",
+        onValueChange: (field) => onChange({ ...value, field }),
+        placeholder: "agent.text"
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      FormInput,
+      {
+        label: "Pattern",
+        hint: "Rust regex syntax \u2014 `(?i)` etc. supported.",
+        value: value.pattern ?? "",
+        onValueChange: (pattern) => onChange({ ...value, pattern }),
+        placeholder: "diesel-s10"
+      }
+    )
+  ] });
+}
+function TimeWindowEditor({
+  value,
+  onChange
+}) {
+  const windows = value.windows ?? [];
+  const update = (index, patch) => {
+    const next = windows.map((win, i) => i === index ? { ...win, ...patch } : win);
+    onChange({ ...value, windows: next });
+  };
+  const remove = (index) => {
+    const next = windows.filter((_, i) => i !== index);
+    onChange({ ...value, windows: next });
+  };
+  const add = () => onChange({ ...value, windows: [...windows, { startHour: 8, endHour: 17 }] });
+  return /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
+    /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-1 gap-3 sm:grid-cols-2", children: [
+      /* @__PURE__ */ jsx(
+        FormSelect,
+        {
+          label: "Timezone",
+          value: value.timezone ?? "UTC",
+          options: TIMEZONE_OPTIONS.map((tz) => ({ value: tz, label: tz })),
+          onValueChange: (timezone) => onChange({ ...value, timezone })
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        FormInput,
+        {
+          label: "Timestamp field (optional)",
+          hint: "Pulls a timestamp from the pool. Leave blank to use the run's wall-clock.",
+          value: value.field ?? "",
+          onValueChange: (field) => onChange({ ...value, field }),
+          placeholder: "clock.ts"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+      windows.map((win, index) => /* @__PURE__ */ 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__ */ jsx(
+          FormInput,
+          {
+            label: `Start (hour)`,
+            type: "number",
+            min: 0,
+            max: 23,
+            value: String(win.startHour),
+            onValueChange: (raw) => update(index, { startHour: clampHour(raw) })
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          FormInput,
+          {
+            label: `End (hour)`,
+            type: "number",
+            min: 0,
+            max: 24,
+            value: String(win.endHour),
+            onValueChange: (raw) => update(index, { endHour: clampHour(raw, 24) })
+          }
+        ),
+        /* @__PURE__ */ jsx(Button, { type: "button", plain: true, onClick: () => remove(index), children: "Remove" })
+      ] }, index)),
+      /* @__PURE__ */ jsx(Button, { type: "button", outline: true, onClick: add, children: "+ Add window" })
+    ] })
+  ] });
+}
+function BooleanGroupEditor({
+  value,
+  onChange,
+  depth
+}) {
+  const operands = value.operands ?? [];
+  const update = (index, next) => {
+    const arr = operands.map((op, i) => i === index ? next : op);
+    onChange({ ...value, operands: arr });
+  };
+  const remove = (index) => {
+    onChange({ ...value, operands: operands.filter((_, i) => i !== index) });
+  };
+  const add = () => onChange({
+    ...value,
+    operands: [...operands, { operator: "gt", field: "", value: 0 }]
+  });
+  return /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
+    /* @__PURE__ */ jsx(
+      FormSelect,
+      {
+        label: "Combinator",
+        value: value.combinator ?? "and",
+        options: [{ value: "and", label: "All of (AND)" }, { value: "or", label: "Any of (OR)" }],
+        onValueChange: (combinator) => onChange({ ...value, combinator })
+      }
+    ),
+    /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+      operands.map((child, index) => /* @__PURE__ */ jsxs("div", { className: "relative rounded-lg border border-dashed border-slate-300 p-2 dark:border-slate-700", children: [
+        /* @__PURE__ */ jsx(
+          RuleConditionBuilder,
+          {
+            value: child,
+            onChange: (next) => update(index, next),
+            depth
+          }
+        ),
+        /* @__PURE__ */ jsx("div", { className: "mt-2 text-right", children: /* @__PURE__ */ jsx(Button, { type: "button", plain: true, onClick: () => remove(index), children: "Remove operand" }) })
+      ] }, index)),
+      /* @__PURE__ */ jsx(Button, { type: "button", outline: true, onClick: add, children: "+ Add operand" })
+    ] })
+  ] });
+}
+function coerceScalar(raw) {
+  const trimmed = raw.trim();
+  if (trimmed === "true") return true;
+  if (trimmed === "false") return false;
+  if (trimmed !== "" && !Number.isNaN(Number(trimmed))) return Number(trimmed);
+  return raw;
+}
+function clampHour(raw, max = 23) {
+  const n = Number(raw);
+  if (!Number.isFinite(n)) return 0;
+  return Math.max(0, Math.min(max, Math.trunc(n)));
+}
+function defaultRuleCondition() {
+  return { operator: "truthy", field: "" };
+}
+var ACTION_TYPE_OPTIONS = [
+  { value: "adjust_price", label: "Adjust price (multiplier)" },
+  { value: "enforce_min_margin", label: "Enforce minimum margin" },
+  { value: "realign_to_competitor", label: "Realign to competitor" },
+  { value: "request_manager_approval", label: "Request manager approval" },
+  { value: "round_to", label: "Round to step" },
+  { value: "alert", label: "Emit alert" },
+  { value: "custom", label: "Custom action" }
+];
+function RuleActionBuilder({ value, onChange }) {
+  const type = value.type || "adjust_price";
+  const params = value.params ?? {};
+  const setParam = (key, newValue) => {
+    onChange({ ...value, type, params: { ...params, [key]: newValue } });
+  };
+  return /* @__PURE__ */ 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__ */ jsx(
+      FormSelect,
+      {
+        label: "Action type",
+        value: type,
+        options: ACTION_TYPE_OPTIONS,
+        onValueChange: (t) => onChange({ type: t, params: {} })
+      }
+    ),
+    type === "adjust_price" && /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-1 gap-3 sm:grid-cols-2", children: [
+      /* @__PURE__ */ jsx(
+        FormInput,
+        {
+          label: "Multiplier",
+          type: "number",
+          step: 0.01,
+          value: numberParam(params.multiplier, 1),
+          onValueChange: (raw) => setParam("multiplier", Number(raw))
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        FormInput,
+        {
+          label: "Reason code",
+          value: stringParam(params.reason),
+          onValueChange: (raw) => setParam("reason", raw),
+          placeholder: "peak_demand_window"
+        }
+      )
+    ] }),
+    type === "enforce_min_margin" && /* @__PURE__ */ jsx(
+      FormInput,
+      {
+        label: "Floor (fraction, e.g. 0.08)",
+        type: "number",
+        step: 0.01,
+        value: numberParam(params.floor, 0.08),
+        onValueChange: (raw) => setParam("floor", Number(raw))
+      }
+    ),
+    type === "realign_to_competitor" && /* @__PURE__ */ jsx(
+      FormInput,
+      {
+        label: "Tolerance (fraction)",
+        type: "number",
+        step: 0.01,
+        value: numberParam(params.tolerance, 0.03),
+        onValueChange: (raw) => setParam("tolerance", Number(raw))
+      }
+    ),
+    type === "request_manager_approval" && /* @__PURE__ */ jsx(
+      FormInput,
+      {
+        label: "Approval limit (fraction)",
+        type: "number",
+        step: 0.01,
+        value: numberParam(params.limit, 0.05),
+        onValueChange: (raw) => setParam("limit", Number(raw))
+      }
+    ),
+    type === "round_to" && /* @__PURE__ */ jsx(
+      FormInput,
+      {
+        label: "Step (e.g. 0.009)",
+        type: "number",
+        step: 1e-3,
+        value: numberParam(params.step, 9e-3),
+        onValueChange: (raw) => setParam("step", Number(raw))
+      }
+    ),
+    type === "alert" && /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-1 gap-3 sm:grid-cols-2", children: [
+      /* @__PURE__ */ jsx(
+        FormInput,
+        {
+          label: "Channel",
+          value: stringParam(params.channel),
+          onValueChange: (raw) => setParam("channel", raw),
+          placeholder: "slack"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        FormInput,
+        {
+          label: "Severity",
+          value: stringParam(params.severity),
+          onValueChange: (raw) => setParam("severity", raw),
+          placeholder: "warning"
+        }
+      )
+    ] }),
+    type === "custom" && /* @__PURE__ */ jsx(CustomParamsEditor, { params, onChange: (p) => onChange({ ...value, type, params: p }) })
+  ] });
+}
+function CustomParamsEditor({
+  params,
+  onChange
+}) {
+  const entries = Object.entries(params);
+  const update = (index, key, raw) => {
+    const next = {};
+    entries.forEach(([k, v], i) => {
+      if (i === index) next[key] = coerce(raw);
+      else next[k] = v;
+    });
+    onChange(next);
+  };
+  const remove = (index) => {
+    const next = {};
+    entries.forEach(([k, v], i) => {
+      if (i !== index) next[k] = v;
+    });
+    onChange(next);
+  };
+  const add = () => {
+    onChange({ ...params, [""]: "" });
+  };
+  return /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+    entries.map(([key, value], index) => /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-[1fr_1fr_auto] items-end gap-2", children: [
+      /* @__PURE__ */ jsx(
+        FormInput,
+        {
+          label: "Key",
+          value: key,
+          onValueChange: (raw) => update(index, raw, String(value ?? ""))
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        FormInput,
+        {
+          label: "Value",
+          value: String(value ?? ""),
+          onValueChange: (raw) => update(index, key, raw)
+        }
+      ),
+      /* @__PURE__ */ jsx(Button, { type: "button", plain: true, onClick: () => remove(index), children: "Remove" })
+    ] }, index)),
+    /* @__PURE__ */ jsx(Button, { type: "button", outline: true, onClick: add, children: "+ Add param" })
+  ] });
+}
+function numberParam(value, fallback) {
+  if (typeof value === "number" && Number.isFinite(value)) return String(value);
+  return String(fallback);
+}
+function stringParam(value) {
+  if (typeof value === "string") return value;
+  if (value === null || value === void 0) return "";
+  return String(value);
+}
+function coerce(raw) {
+  const trimmed = raw.trim();
+  if (trimmed === "true") return true;
+  if (trimmed === "false") return false;
+  if (trimmed !== "" && !Number.isNaN(Number(trimmed))) return Number(trimmed);
+  return raw;
+}
+function defaultRuleAction() {
+  return { type: "adjust_price", params: { multiplier: 1, reason: "" } };
+}
+function RuleForm({ value, onChange }) {
+  const [showAdvanced, setShowAdvanced] = useState(
+    Boolean(
+      value.validFrom || value.validUntil || value.tags && value.tags.length > 0 || value.status
+    )
+  );
+  const update = (key, v) => onChange({ ...value, [key]: v });
+  return /* @__PURE__ */ jsxs("div", { className: "space-y-5", children: [
+    /* @__PURE__ */ jsxs(FormGrid, { children: [
+      /* @__PURE__ */ jsx(
+        FormInput,
+        {
+          label: "Name",
+          required: true,
+          value: value.name,
+          onValueChange: (v) => update("name", v)
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        FormInput,
+        {
+          label: "Priority",
+          type: "number",
+          min: 0,
+          value: String(value.priority),
+          onValueChange: (v) => update("priority", Number(v) || 0)
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        FormSelect,
+        {
+          label: "Enabled",
+          value: value.enabled ? "true" : "false",
+          options: [
+            { value: "true", label: "Enabled" },
+            { value: "false", label: "Disabled" }
+          ],
+          onValueChange: (v) => update("enabled", v === "true")
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        FormTextarea,
+        {
+          label: "Description",
+          rows: 2,
+          value: value.description ?? "",
+          onValueChange: (v) => update("description", v)
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs("section", { children: [
+      /* @__PURE__ */ jsxs("div", { className: "mb-2 flex items-center justify-between", children: [
+        /* @__PURE__ */ jsx("h3", { className: "text-sm font-semibold text-slate-700 dark:text-slate-200", children: "Condition" }),
+        /* @__PURE__ */ jsx(Badge, { color: "indigo", children: value.condition.operator })
+      ] }),
+      /* @__PURE__ */ jsx(
+        RuleConditionBuilder,
+        {
+          value: value.condition,
+          onChange: (condition) => update("condition", condition)
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs("section", { children: [
+      /* @__PURE__ */ jsxs("div", { className: "mb-2 flex items-center justify-between", children: [
+        /* @__PURE__ */ jsx("h3", { className: "text-sm font-semibold text-slate-700 dark:text-slate-200", children: "Action on match" }),
+        /* @__PURE__ */ jsx(Badge, { color: "fuchsia", children: value.action.type })
+      ] }),
+      /* @__PURE__ */ jsx(
+        RuleActionBuilder,
+        {
+          value: value.action,
+          onChange: (action) => update("action", action)
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs("section", { children: [
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          onClick: () => setShowAdvanced((s) => !s),
+          className: "text-xs font-medium text-indigo-600 hover:text-indigo-500 dark:text-indigo-400",
+          children: showAdvanced ? "\u2212 Hide schedule & tagging" : "+ Schedule, tagging, lifecycle"
+        }
+      ),
+      showAdvanced && /* @__PURE__ */ jsxs("div", { className: "mt-3 grid grid-cols-1 gap-3 sm:grid-cols-2", children: [
+        /* @__PURE__ */ jsx(
+          FormInput,
+          {
+            label: "Valid from (ISO 8601)",
+            type: "datetime-local",
+            value: toDatetimeLocal(value.validFrom),
+            onValueChange: (v) => update("validFrom", fromDatetimeLocal(v))
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          FormInput,
+          {
+            label: "Valid until (ISO 8601)",
+            type: "datetime-local",
+            value: toDatetimeLocal(value.validUntil),
+            onValueChange: (v) => update("validUntil", fromDatetimeLocal(v))
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          FormSelect,
+          {
+            label: "Status",
+            value: value.status ?? "active",
+            options: RULE_STATUS_OPTIONS.map((s) => ({ value: s, label: s })),
+            onValueChange: (v) => update("status", v)
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          FormInput,
+          {
+            label: "Tags (comma-separated)",
+            value: (value.tags ?? []).join(", "),
+            onValueChange: (v) => update("tags", parseTags(v)),
+            placeholder: "pricing, peak-hours"
+          }
+        )
+      ] })
+    ] })
+  ] });
+}
+function defaultRuleForm() {
+  return {
+    name: "",
+    description: "",
+    enabled: true,
+    priority: 0,
+    status: "active",
+    validFrom: null,
+    validUntil: null,
+    tags: [],
+    condition: defaultRuleCondition(),
+    action: defaultRuleAction()
+  };
+}
+function parseTags(raw) {
+  return raw.split(",").map((tag) => tag.trim()).filter((tag) => tag.length > 0);
+}
+function toDatetimeLocal(iso) {
+  if (!iso) return "";
+  try {
+    const d = new Date(iso);
+    if (Number.isNaN(d.getTime())) return "";
+    const pad = (n) => String(n).padStart(2, "0");
+    return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())}T${pad(d.getHours())}:${pad(d.getMinutes())}`;
+  } catch {
+    return "";
+  }
+}
+function fromDatetimeLocal(raw) {
+  if (!raw) return null;
+  const d = new Date(raw);
+  if (Number.isNaN(d.getTime())) return null;
+  return d.toISOString();
+}
+var DATASOURCE_LOGOS = {
+  bigquery: "/logos/datasources/bigquery.svg",
+  postgres: "/logos/datasources/postgres.svg",
+  snowflake: "/logos/datasources/snowflake.svg",
+  mongodb: "/logos/datasources/mongodb.svg",
+  redis: "/logos/datasources/redis.svg",
+  mysql: "/logos/datasources/mysql.svg",
+  clickhouse: "/logos/datasources/clickhouse.svg",
+  elasticsearch: "/logos/datasources/elasticsearch.svg",
+  duckdb: "/logos/datasources/duckdb.svg",
+  sqlite: "/logos/datasources/sqlite.svg",
+  mariadb: "/logos/datasources/mariadb.svg",
+  oracle: "/logos/datasources/oracle.svg",
+  mssql: "/logos/datasources/mssql.svg",
+  sqlserver: "/logos/datasources/mssql.svg",
+  cassandra: "/logos/datasources/cassandra.svg",
+  dynamodb: "/logos/datasources/dynamodb.svg",
+  cockroach: "/logos/datasources/cockroachdb.svg",
+  supabase: "/logos/datasources/supabase.svg",
+  firebase: "/logos/datasources/firebase.svg",
+  neo4j: "/logos/datasources/neo4j.svg"
+};
+function getDatasourceLogo(entityId) {
+  const lower = entityId.toLowerCase();
+  for (const [key, url] of Object.entries(DATASOURCE_LOGOS)) {
+    if (lower.includes(key)) return url;
+  }
+  return null;
+}
+var PROVIDER_LOGOS2 = {
+  anthropic: "/logos/providers/anthropic.svg",
+  amazon: "/logos/providers/aws.svg",
+  google: "/logos/providers/google-gemini.svg",
+  openai: "/logos/providers/openai.svg",
+  meta: "/logos/providers/meta.svg"
+};
+function onDragStart(event, nodeType, entityId, label, config) {
+  event.dataTransfer.setData("nodeType", nodeType);
+  event.dataTransfer.setData("entityId", entityId);
+  event.dataTransfer.setData("label", label);
+  if (config) {
+    event.dataTransfer.setData("config", config);
+  }
+  event.dataTransfer.effectAllowed = "move";
+}
+var LOGIC_NODE_ITEMS = [
+  // Control Flow
+  { nodeType: "start", nameKey: "startNode", descriptionKey: "startNodeDescription", subcategory: "control_flow" },
+  { nodeType: "end", nameKey: "endNode", descriptionKey: "endNodeDescription", subcategory: "control_flow" },
+  { nodeType: "if_else", nameKey: "ifElseNode", descriptionKey: "ifElseNodeDescription", subcategory: "control_flow" },
+  { nodeType: "iteration", nameKey: "iterationNode", descriptionKey: "iterationNodeDescription", subcategory: "control_flow" },
+  { nodeType: "iteration_start", nameKey: "iterationStartNode", descriptionKey: "iterationStartNodeDescription", subcategory: "control_flow" },
+  { nodeType: "group", nameKey: "groupNode", descriptionKey: "groupNodeDescription", subcategory: "control_flow" },
+  // Data Processing
+  { nodeType: "code", nameKey: "codeNode", descriptionKey: "codeNodeDescription", subcategory: "data_processing" },
+  { nodeType: "http_request", nameKey: "httpRequestNode", descriptionKey: "httpRequestNodeDescription", subcategory: "data_processing" },
+  { nodeType: "template_transform", nameKey: "templateTransformNode", descriptionKey: "templateTransformNodeDescription", subcategory: "data_processing" },
+  { nodeType: "variable_assigner", nameKey: "variableAssignerNode", descriptionKey: "variableAssignerNodeDescription", subcategory: "data_processing" },
+  { nodeType: "variable_aggregator", nameKey: "variableAggregatorNode", descriptionKey: "variableAggregatorNodeDescription", subcategory: "data_processing" },
+  { nodeType: "list_operator", nameKey: "listOperatorNode", descriptionKey: "listOperatorNodeDescription", subcategory: "data_processing" },
+  // DocumentExtractor echoes its config today — pending a real
+  // extractor implementation, tag as experimental.
+  { nodeType: "document_extractor", nameKey: "documentExtractorNode", descriptionKey: "documentExtractorNodeDescription", subcategory: "data_processing", experimental: true },
+  { nodeType: "datasource", nameKey: "datasourceNode", descriptionKey: "datasourceNodeDescription", subcategory: "data_processing" },
+  // AI/ML
+  // KnowledgeBase is a stub (no vector store wired yet) — hide by default.
+  { nodeType: "knowledge_base", nameKey: "knowledgeBaseNode", descriptionKey: "knowledgeBaseNodeDescription", subcategory: "ai_ml", experimental: true },
+  { nodeType: "answer", nameKey: "answerNode", descriptionKey: "answerNodeDescription", subcategory: "ai_ml" },
+  { nodeType: "question_classifier", nameKey: "questionClassifierNode", descriptionKey: "questionClassifierNodeDescription", subcategory: "ai_ml" },
+  { nodeType: "parameter_extractor", nameKey: "parameterExtractorNode", descriptionKey: "parameterExtractorNodeDescription", subcategory: "ai_ml" },
+  // Annotation
+  { nodeType: "note", nameKey: "noteNode", descriptionKey: "noteNodeDescription", subcategory: "annotation" },
+  // Output
+  { nodeType: "dashboard_output", nameKey: "dashboardOutputNode", descriptionKey: "dashboardOutputNodeDescription", subcategory: "output" }
+];
+var SUBCATEGORY_LABELS = {
+  control_flow: "controlFlowSection",
+  data_processing: "dataProcessingSection",
+  ai_ml: "aiMlSection",
+  annotation: "annotationSection",
+  output: "outputSection"
+};
+function SectionHeader({ icon, title, colorClass, count, onAdd, addLabel, isOpen, onToggle }) {
+  return /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between px-4 py-2.5", children: [
+    /* @__PURE__ */ jsxs(
+      "button",
+      {
+        type: "button",
+        onClick: onToggle,
+        className: "flex flex-1 items-center gap-1.5 transition-colors",
+        children: [
+          /* @__PURE__ */ jsxs("span", { className: `flex items-center gap-1.5 text-[10px] font-semibold uppercase tracking-wider ${colorClass}`, children: [
+            icon,
+            title,
+            count !== void 0 && /* @__PURE__ */ jsx("span", { className: "ml-1 rounded-full bg-gray-100 px-1.5 py-px text-[9px] font-medium text-gray-500 dark:bg-white/10 dark:text-gray-400", children: count })
+          ] }),
+          /* @__PURE__ */ jsx(
+            ChevronDownIcon,
+            {
+              className: `h-3 w-3 text-gray-400 transition-transform duration-200 ${isOpen ? "" : "-rotate-90"}`
+            }
+          )
+        ]
+      }
+    ),
+    onAdd ? /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        onClick: onAdd,
+        title: addLabel,
+        className: `rounded-md p-1 transition-colors hover:bg-gray-100 dark:hover:bg-white/10 ${colorClass}`,
+        children: /* @__PURE__ */ jsx(PlusIcon, { className: "h-3.5 w-3.5" })
+      }
+    ) : null
+  ] });
+}
+function CollapsibleSection({ title, icon, colorClass, defaultOpen = true, count, onAdd, addLabel, children }) {
+  const [isOpen, setIsOpen] = useState(defaultOpen);
+  const safeChildren = Children.toArray(children);
+  return /* @__PURE__ */ jsxs("div", { className: "border-t border-gray-200/40 dark:border-white/5", children: [
+    /* @__PURE__ */ jsx(
+      SectionHeader,
+      {
+        icon,
+        title,
+        colorClass,
+        count,
+        onAdd,
+        addLabel,
+        isOpen,
+        onToggle: () => setIsOpen((previous) => !previous)
+      }
+    ),
+    isOpen ? /* @__PURE__ */ jsx("div", { className: "space-y-1.5 px-4 pb-3", children: safeChildren }) : null
+  ] });
+}
+function LogicNodeItemCard({ item, translationFunction }) {
+  const IconComponent = LOGIC_ICON_MAP[item.nodeType];
+  const gradient = LOGIC_NODE_GRADIENTS[item.nodeType] ?? "from-gray-400 to-gray-500";
+  const defaultConfig = createDefaultLogicNodeConfig(item.nodeType);
+  const configJson = defaultConfig ? JSON.stringify(defaultConfig) : void 0;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      draggable: true,
+      onDragStart: (event) => onDragStart(event, item.nodeType, item.nodeType, translationFunction(item.nameKey), configJson),
+      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__ */ jsx("div", { className: `flex h-6 w-6 items-center justify-center rounded-md bg-gradient-to-br ${gradient} shadow-sm`, children: IconComponent && /* @__PURE__ */ jsx(IconComponent, { className: "h-3.5 w-3.5 text-white" }) }),
+        /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
+          /* @__PURE__ */ jsx("p", { className: "truncate text-xs font-medium text-gray-900 dark:text-white", children: translationFunction(item.nameKey) }),
+          /* @__PURE__ */ jsx("p", { className: "truncate text-[10px] text-gray-400 dark:text-gray-500", children: translationFunction(item.descriptionKey) })
+        ] })
+      ]
+    }
+  );
+}
+function NodePalette({ agents, tools, agentTools = [], rules, entities = [], modelProviders = [], onCreateAgent, onCreateTool, onCreateAgentTool, onCreateRule, onCreateDatasource, onConfigureProvider }) {
+  const t = useTranslations("agents.workflow");
+  const [searchQuery, setSearchQuery] = useState("");
+  const [showExperimental, setShowExperimental] = useState(false);
+  const normalizedQuery = searchQuery.toLowerCase().trim();
+  const filteredAgents = useMemo(
+    () => normalizedQuery ? agents.filter(
+      (agent) => agent.name.toLowerCase().includes(normalizedQuery) || (agent.role ?? "").toLowerCase().includes(normalizedQuery)
+    ) : agents,
+    [agents, normalizedQuery]
+  );
+  const filteredTools = useMemo(
+    () => normalizedQuery ? tools.filter(
+      (tool) => tool.name.toLowerCase().includes(normalizedQuery) || (tool.category ?? "").toLowerCase().includes(normalizedQuery)
+    ) : tools,
+    [tools, normalizedQuery]
+  );
+  const filteredAgentTools = useMemo(
+    () => normalizedQuery ? agentTools.filter(
+      (agentTool) => agentTool.name.toLowerCase().includes(normalizedQuery) || (agentTool.category ?? "").toLowerCase().includes(normalizedQuery)
+    ) : agentTools,
+    [agentTools, normalizedQuery]
+  );
+  const filteredRules = useMemo(
+    () => normalizedQuery ? rules.filter(
+      (rule) => rule.name.toLowerCase().includes(normalizedQuery)
+    ) : rules,
+    [rules, normalizedQuery]
+  );
+  const filteredProviders = useMemo(
+    () => normalizedQuery ? modelProviders.filter(
+      (provider) => provider.name.toLowerCase().includes(normalizedQuery) || provider.provider.toLowerCase().includes(normalizedQuery)
+    ) : modelProviders,
+    [modelProviders, normalizedQuery]
+  );
+  const entityTypes = useMemo(
+    () => entities.map((entity) => ({
+      id: entity.id,
+      label: entity.label,
+      description: entity.description,
+      fieldCount: entity.fields.length,
+      defaultLimit: entity.defaultLimit,
+      fields: entity.fields
+    })),
+    [entities]
+  );
+  const filteredEntityTypes = useMemo(
+    () => normalizedQuery ? entityTypes.filter(
+      (entity) => entity.label.toLowerCase().includes(normalizedQuery) || entity.description.toLowerCase().includes(normalizedQuery) || entity.id.toLowerCase().includes(normalizedQuery)
+    ) : entityTypes,
+    [entityTypes, normalizedQuery]
+  );
+  const filteredLogicItems = useMemo(() => {
+    const visibleByDefault = showExperimental ? LOGIC_NODE_ITEMS : LOGIC_NODE_ITEMS.filter((item) => !item.experimental);
+    if (!normalizedQuery) return visibleByDefault;
+    return visibleByDefault.filter(
+      (item) => t(item.nameKey).toLowerCase().includes(normalizedQuery) || t(item.descriptionKey).toLowerCase().includes(normalizedQuery)
+    );
+  }, [normalizedQuery, showExperimental, t]);
+  const groupedLogicItems = useMemo(() => {
+    const groups = {
+      control_flow: [],
+      data_processing: [],
+      ai_ml: [],
+      annotation: [],
+      output: []
+    };
+    for (const item of filteredLogicItems) {
+      groups[item.subcategory].push(item);
+    }
+    return groups;
+  }, [filteredLogicItems]);
+  function renderLogicSubcategory(subcategory, items, isFirst) {
+    if (items.length === 0) return null;
+    return /* @__PURE__ */ jsxs("div", { className: "space-y-1.5", children: [
+      /* @__PURE__ */ 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]) }),
+      items.map((item) => /* @__PURE__ */ jsx(LogicNodeItemCard, { item, translationFunction: t }, item.nodeType))
+    ] }, subcategory);
+  }
+  return /* @__PURE__ */ 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: [
+    /* @__PURE__ */ jsxs("div", { className: "p-4 pb-2", children: [
+      /* @__PURE__ */ jsx("h3", { className: "text-xs font-semibold uppercase tracking-wider text-gray-500 dark:text-gray-400", children: t("palette") }),
+      /* @__PURE__ */ jsx("div", { className: "mt-2", children: /* @__PURE__ */ jsx(
+        "input",
+        {
+          type: "text",
+          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"
+        }
+      ) }),
+      /* @__PURE__ */ jsxs("label", { className: "mt-2 flex items-center gap-2 text-[10px] text-gray-500 dark:text-gray-400 select-none cursor-pointer", children: [
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            type: "checkbox",
+            checked: showExperimental,
+            onChange: (event) => setShowExperimental(event.target.checked),
+            className: "h-3 w-3 rounded border-gray-300 text-indigo-600 focus:ring-1 focus:ring-indigo-400/40 dark:border-gray-600"
+          }
+        ),
+        t("showExperimentalNodes", { _: "Show experimental" })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx(
+      CollapsibleSection,
+      {
+        title: t("agentsSection"),
+        icon: /* @__PURE__ */ jsx(CpuChipIcon, { className: "h-3 w-3" }),
+        colorClass: "text-indigo-600 dark:text-indigo-400",
+        onAdd: onCreateAgent,
+        addLabel: t("newAgent"),
+        count: filteredAgents.length,
+        children: filteredAgents.length === 0 && filteredAgentTools.length === 0 ? /* @__PURE__ */ jsx("p", { className: "text-[10px] text-gray-400 dark:text-gray-500", children: t("noAgents") }) : /* @__PURE__ */ jsx(Fragment, { children: filteredAgents.map((agent) => /* @__PURE__ */ jsxs(
+          "div",
+          {
+            draggable: true,
+            onDragStart: (event) => onDragStart(event, "agent", agent.agentId, agent.name),
+            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__ */ jsxs("div", { className: "relative flex-shrink-0", children: [
+                agent.avatar ? /* @__PURE__ */ 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__ */ 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__ */ jsx(CpuChipIcon, { className: "h-3.5 w-3.5 text-white" }) }),
+                /* @__PURE__ */ 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__ */ jsx(CpuChipIcon, { className: "h-2 w-2 text-white" }) })
+              ] }),
+              /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
+                /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5", children: [
+                  /* @__PURE__ */ jsx("p", { className: "truncate text-xs font-medium text-gray-900 dark:text-white", children: agent.name }),
+                  (() => {
+                    const tier = getAgentTier(Number(agent.elo ?? 0));
+                    return /* @__PURE__ */ 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__ */ jsx("p", { className: "truncate text-[10px] text-gray-400 dark:text-gray-500", children: agent.role ?? agent.agentId })
+              ] })
+            ]
+          },
+          agent.agentId
+        )) })
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      CollapsibleSection,
+      {
+        title: t("subworkflowsSection"),
+        icon: /* @__PURE__ */ jsx(ArrowPathRoundedSquareIcon, { className: "h-3 w-3" }),
+        colorClass: "text-teal-600 dark:text-teal-400",
+        onAdd: onCreateTool,
+        addLabel: t("newSubworkflow"),
+        children: filteredTools.length === 0 ? /* @__PURE__ */ jsx("p", { className: "text-[10px] text-gray-400 dark:text-gray-500", children: t("noSubworkflows") }) : filteredTools.map((tool) => /* @__PURE__ */ jsxs(
+          "div",
+          {
+            draggable: true,
+            onDragStart: (event) => onDragStart(event, "tool", tool.toolId, tool.name),
+            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__ */ 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__ */ jsx(ArrowPathRoundedSquareIcon, { className: "h-3.5 w-3.5 text-white" }) }),
+              /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
+                /* @__PURE__ */ jsx("p", { className: "truncate text-xs font-medium text-gray-900 dark:text-white", children: tool.name }),
+                /* @__PURE__ */ jsx("p", { className: "truncate text-[10px] text-gray-400 dark:text-gray-500", children: tool.category })
+              ] }),
+              /* @__PURE__ */ jsx(
+                ToggleSwitch,
+                {
+                  checked: Boolean(tool.enabled),
+                  onChange: () => {
+                  },
+                  disabled: true,
+                  size: "sm",
+                  color: "blue",
+                  label: `${tool.name} enabled`
+                }
+              )
+            ]
+          },
+          tool.toolId
+        ))
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      CollapsibleSection,
+      {
+        title: t("rulesSection"),
+        icon: /* @__PURE__ */ jsx(AdjustmentsHorizontalIcon, { className: "h-3 w-3" }),
+        colorClass: "text-violet-600 dark:text-violet-400",
+        onAdd: onCreateRule,
+        addLabel: t("newRule"),
+        children: filteredRules.length === 0 ? /* @__PURE__ */ jsx("p", { className: "text-[10px] text-gray-400 dark:text-gray-500", children: t("noRules") }) : filteredRules.map((rule) => /* @__PURE__ */ jsxs(
+          "div",
+          {
+            draggable: true,
+            onDragStart: (event) => onDragStart(event, "rule", rule.ruleId, rule.name),
+            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__ */ 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__ */ jsx(AdjustmentsHorizontalIcon, { className: "h-3.5 w-3.5 text-white" }) }),
+              /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
+                /* @__PURE__ */ jsx("p", { className: "truncate text-xs font-medium text-gray-900 dark:text-white", children: rule.name }),
+                /* @__PURE__ */ jsxs("p", { className: "truncate text-[10px] text-gray-400 dark:text-gray-500", children: [
+                  "P",
+                  String(rule.priority ?? "")
+                ] })
+              ] }),
+              /* @__PURE__ */ jsx(
+                ToggleSwitch,
+                {
+                  checked: Boolean(rule.enabled),
+                  onChange: () => {
+                  },
+                  disabled: true,
+                  size: "sm",
+                  color: "violet",
+                  label: `${rule.name} enabled`
+                }
+              )
+            ]
+          },
+          rule.ruleId
+        ))
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      CollapsibleSection,
+      {
+        title: t("dataSourcesSection"),
+        icon: /* @__PURE__ */ jsx(CircleStackIcon, { className: "h-3 w-3" }),
+        colorClass: "text-blue-600 dark:text-blue-400",
+        count: filteredEntityTypes.length,
+        onAdd: onCreateDatasource,
+        addLabel: t("newDataSource"),
+        children: filteredEntityTypes.length === 0 ? /* @__PURE__ */ jsx("p", { className: "text-[10px] text-gray-400 dark:text-gray-500", children: t("noDataSources") }) : filteredEntityTypes.map((entity) => {
+          const defaultConfig = JSON.stringify({
+            type: "entity",
+            entityMasterId: entity.id,
+            selectedFields: entity.fields.map((field) => field.name),
+            filterVariables: {},
+            outputVariable: `${entity.label.replace(/\s+/g, "")}Data`,
+            limit: entity.defaultLimit
+          });
+          const dsLogo = getDatasourceLogo(entity.id);
+          const EntityIcon = getEntityIcon(entity.id);
+          const entityGradient = getEntityGradient(entity.id);
+          return /* @__PURE__ */ jsxs(
+            "div",
+            {
+              draggable: true,
+              onDragStart: (event) => onDragStart(event, "entity", entity.id, entity.label, defaultConfig),
+              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: [
+                dsLogo ? /* @__PURE__ */ jsx("div", { className: "flex h-6 w-6 shrink-0 items-center justify-center rounded-md bg-white/10 p-1", children: /* @__PURE__ */ jsx("img", { src: dsLogo, alt: "", className: "h-4 w-4 object-contain", loading: "lazy" }) }) : /* @__PURE__ */ jsx("div", { className: `flex h-6 w-6 items-center justify-center rounded-md bg-gradient-to-br ${entityGradient} shadow-sm`, children: /* @__PURE__ */ jsx(EntityIcon, { className: "h-3.5 w-3.5 text-white" }) }),
+                /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
+                  /* @__PURE__ */ jsx("p", { className: "truncate text-xs font-medium text-gray-900 dark:text-white", children: entity.label }),
+                  /* @__PURE__ */ jsxs("p", { className: "truncate text-[10px] text-gray-400 dark:text-gray-500", children: [
+                    entity.fieldCount,
+                    " ",
+                    t("entityFieldsLabel")
+                  ] })
+                ] }),
+                /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+                  /* @__PURE__ */ jsx("span", { className: "rounded-full bg-slate-100 px-1.5 py-0.5 text-[9px] font-medium text-slate-600 dark:bg-white/10 dark:text-slate-300", children: "Read only" }),
+                  /* @__PURE__ */ jsx(
+                    ToggleSwitch,
+                    {
+                      checked: true,
+                      onChange: () => {
+                      },
+                      disabled: true,
+                      size: "sm",
+                      color: "teal",
+                      label: `${entity.label} read only`
+                    }
+                  )
+                ] })
+              ]
+            },
+            entity.id
+          );
+        })
+      }
+    ),
+    filteredProviders.length > 0 && /* @__PURE__ */ jsx(
+      CollapsibleSection,
+      {
+        title: t("connectionsSection"),
+        icon: /* @__PURE__ */ jsx(KeyIcon, { className: "h-3 w-3" }),
+        colorClass: "text-slate-600 dark:text-slate-400",
+        count: filteredProviders.length,
+        children: filteredProviders.map((provider) => {
+          const providerLogo = PROVIDER_LOGOS2[provider.provider];
+          return /* @__PURE__ */ jsxs(
+            "div",
+            {
+              draggable: true,
+              onDragStart: (event) => {
+                const defaultConfig = JSON.stringify({
+                  type: "model_provider",
+                  providerType: provider.provider === "amazon" ? "aws_bedrock" : provider.provider === "google" ? "google_vertex" : provider.provider === "meta" ? "custom" : `${provider.provider}_api`,
+                  name: provider.name,
+                  modelFilter: []
+                });
+                onDragStart(event, "model_provider", provider.id, provider.name, defaultConfig);
+              },
+              onClick: () => onConfigureProvider?.(provider.id),
+              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",
+              role: "button",
+              tabIndex: 0,
+              children: [
+                providerLogo ? /* @__PURE__ */ jsx("div", { className: "flex h-6 w-6 shrink-0 items-center justify-center rounded-md bg-white/10 p-1", children: /* @__PURE__ */ jsx("img", { src: providerLogo, alt: "", className: "h-4 w-4 object-contain", loading: "lazy" }) }) : /* @__PURE__ */ 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__ */ jsx(KeyIcon, { className: "h-3.5 w-3.5 text-white" }) }),
+                /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
+                  /* @__PURE__ */ jsx("p", { className: "truncate text-xs font-medium text-gray-900 dark:text-white", children: provider.name }),
+                  /* @__PURE__ */ jsxs("p", { className: "truncate text-[10px] text-gray-400 dark:text-gray-500", children: [
+                    provider.modelCount,
+                    " models"
+                  ] })
+                ] }),
+                provider.configured ? /* @__PURE__ */ jsx("span", { className: "rounded-full bg-green-100 px-1.5 py-0.5 text-[9px] font-medium text-green-600 dark:bg-green-500/10 dark:text-green-400", children: t("configured") }) : /* @__PURE__ */ jsx("span", { className: "rounded-full bg-amber-100 px-1.5 py-0.5 text-[9px] font-medium text-amber-600 dark:bg-amber-500/10 dark:text-amber-400", children: t("setup") })
+              ]
+            },
+            provider.id
+          );
+        })
+      }
+    ),
+    /* @__PURE__ */ jsxs(
+      CollapsibleSection,
+      {
+        title: t("logicSection"),
+        icon: /* @__PURE__ */ jsx(BoltIcon, { className: "h-3 w-3" }),
+        colorClass: "text-gray-600 dark:text-gray-400",
+        count: filteredLogicItems.length,
+        children: [
+          renderLogicSubcategory("control_flow", groupedLogicItems.control_flow, true),
+          renderLogicSubcategory("data_processing", groupedLogicItems.data_processing, false),
+          renderLogicSubcategory("ai_ml", groupedLogicItems.ai_ml, false),
+          renderLogicSubcategory("output", groupedLogicItems.output, false),
+          renderLogicSubcategory("annotation", groupedLogicItems.annotation, false)
+        ]
+      }
+    )
+  ] });
+}
+function formatRelativeTime(dateString) {
+  if (!dateString) return "";
+  const date = new Date(dateString);
+  const now = /* @__PURE__ */ new Date();
+  const diffMs = now.getTime() - date.getTime();
+  const diffMinutes = Math.floor(diffMs / 6e4);
+  const diffHours = Math.floor(diffMs / 36e5);
+  const diffDays = Math.floor(diffMs / 864e5);
+  if (diffMinutes < 1) return "just now";
+  if (diffMinutes < 60) return `${diffMinutes}m ago`;
+  if (diffHours < 24) return `${diffHours}h ago`;
+  return `${diffDays}d ago`;
+}
+function WorkflowListBar({
+  workflows,
+  activeWorkflowId,
+  isLoading,
+  onSelect,
+  onCreate,
+  onDelete,
+  onConvertToSubworkflow
+}) {
+  const tWorkflow = useTranslations("agents.workflow");
+  if (isLoading) {
+    return /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 px-1 pb-3", children: [
+      /* @__PURE__ */ jsx("div", { className: "shimmer h-10 w-40 rounded-xl" }),
+      /* @__PURE__ */ jsx("div", { className: "shimmer h-10 w-40 rounded-xl" })
+    ] });
+  }
+  return /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 overflow-x-auto px-1 pb-3 scrollbar-hide", children: [
+    workflows.map((workflow) => {
+      const isActive = workflow.id === activeWorkflowId;
+      return /* @__PURE__ */ jsxs(
+        "div",
+        {
+          role: "button",
+          tabIndex: 0,
+          onClick: () => onSelect(workflow),
+          onKeyDown: (event) => {
+            if (event.key === "Enter" || event.key === " ") {
+              event.preventDefault();
+              onSelect(workflow);
+            }
+          },
+          className: `liquid-surface group relative flex shrink-0 cursor-pointer items-center gap-2.5 rounded-xl px-3.5 py-2 text-left transition-all duration-200 ${isActive ? "liquid-surface-active" : "hover:shadow-md"}`,
+          style: isActive ? { "--glass-accent": "99, 102, 241" } : void 0,
+          children: [
+            /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
+              /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+                /* @__PURE__ */ jsx("span", { className: `truncate text-sm font-medium ${isActive ? "text-indigo-700 dark:text-indigo-300" : "text-gray-700 dark:text-gray-300"}`, children: workflow.name }),
+                /* @__PURE__ */ jsxs("span", { className: "shrink-0 rounded-full bg-gray-100 px-1.5 py-0.5 text-[10px] font-medium text-gray-500 dark:bg-gray-800 dark:text-gray-400", children: [
+                  "v",
+                  workflow.version
+                ] }),
+                workflow.isDraft ? /* @__PURE__ */ jsx("span", { className: "shrink-0 rounded-full bg-amber-100 px-1.5 py-0.5 text-[10px] font-semibold text-amber-700 dark:bg-amber-900/30 dark:text-amber-300", children: tWorkflow("draftBadge") }) : /* @__PURE__ */ jsx("span", { className: "shrink-0 rounded-full bg-green-100 px-1.5 py-0.5 text-[10px] font-semibold text-green-700 dark:bg-green-900/30 dark:text-green-300", children: tWorkflow("published") })
+              ] }),
+              /* @__PURE__ */ 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__ */ jsxs("div", { className: "flex shrink-0 items-center gap-0.5 opacity-0 transition-opacity group-hover:opacity-100", children: [
+              onConvertToSubworkflow && /* @__PURE__ */ jsx(
+                "button",
+                {
+                  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__ */ jsx(ArrowPathRoundedSquareIcon, { className: "h-3.5 w-3.5" })
+                }
+              ),
+              workflows.length > 1 && /* @__PURE__ */ jsx(
+                "button",
+                {
+                  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__ */ jsx(TrashIcon, { className: "h-3.5 w-3.5" })
+                }
+              )
+            ] })
+          ]
+        },
+        workflow.id
+      );
+    }),
+    /* @__PURE__ */ jsxs(
+      "button",
+      {
+        type: "button",
+        onClick: onCreate,
+        className: "liquid-surface flex shrink-0 items-center gap-1.5 rounded-xl !border-dashed px-3 py-2 text-xs font-medium text-gray-500 transition-all hover:shadow-md hover:text-indigo-600 dark:text-gray-400 dark:hover:text-indigo-400",
+        children: [
+          /* @__PURE__ */ jsx(PlusIcon, { className: "h-3.5 w-3.5" }),
+          tWorkflow("newWorkflow")
+        ]
+      }
+    )
+  ] });
+}
+function VersionHistoryPanel({
+  open,
+  onClose,
+  workflowId,
+  currentVersion,
+  onPreview,
+  onRestore,
+  fetchVersions
+}) {
+  const translations = useTranslations("agents.workflow.versionHistory");
+  const [versions, setVersions] = useState([]);
+  const [isLoading, setIsLoading] = useState(false);
+  const [loadError, setLoadError] = useState(null);
+  const loadVersions = useCallback(async () => {
+    if (!fetchVersions) return;
+    setIsLoading(true);
+    setLoadError(null);
+    try {
+      const fetchedVersions = await fetchVersions(workflowId);
+      setVersions(fetchedVersions);
+    } catch (error) {
+      const errorMessage = error instanceof Error ? error.message : "Failed to load versions";
+      setLoadError(errorMessage);
+    } finally {
+      setIsLoading(false);
+    }
+  }, [fetchVersions, workflowId]);
+  useEffect(() => {
+    if (open) {
+      loadVersions();
+    }
+  }, [open, loadVersions]);
+  const formatTimestamp2 = useCallback((timestamp) => {
+    try {
+      const date = new Date(timestamp);
+      return new Intl.DateTimeFormat(void 0, {
+        year: "numeric",
+        month: "short",
+        day: "numeric",
+        hour: "2-digit",
+        minute: "2-digit"
+      }).format(date);
+    } catch {
+      return timestamp;
+    }
+  }, []);
+  if (!open) return null;
+  return /* @__PURE__ */ 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",
+      "data-testid": "version-history-panel",
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between border-b border-gray-200 px-4 py-3 dark:border-gray-700", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+            /* @__PURE__ */ jsx(ClockIcon, { className: "h-5 w-5 text-gray-500 dark:text-gray-400" }),
+            /* @__PURE__ */ jsx("h3", { className: "text-sm font-semibold text-gray-900 dark:text-white", children: translations("title") })
+          ] }),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              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__ */ jsx(XMarkIcon, { className: "h-4 w-4" })
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "flex-1 overflow-y-auto", children: [
+          isLoading && /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center py-12", "data-testid": "version-history-loading", children: /* @__PURE__ */ jsx("div", { className: "h-6 w-6 animate-spin rounded-full border-2 border-blue-500 border-t-transparent" }) }),
+          loadError && /* @__PURE__ */ jsxs("div", { className: "px-4 py-8 text-center", "data-testid": "version-history-error", children: [
+            /* @__PURE__ */ jsx("p", { className: "text-sm text-red-500 dark:text-red-400", children: loadError }),
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                onClick: loadVersions,
+                className: "mt-2 text-xs text-blue-600 hover:underline dark:text-blue-400",
+                children: translations("retry")
+              }
+            )
+          ] }),
+          !isLoading && !loadError && versions.length === 0 && /* @__PURE__ */ jsxs("div", { className: "px-4 py-12 text-center", "data-testid": "version-history-empty", children: [
+            /* @__PURE__ */ jsx(ClockIcon, { className: "mx-auto h-8 w-8 text-gray-300 dark:text-gray-600" }),
+            /* @__PURE__ */ jsx("p", { className: "mt-2 text-sm text-gray-500 dark:text-gray-400", children: translations("noVersions") })
+          ] }),
+          !isLoading && !loadError && versions.length > 0 && /* @__PURE__ */ jsx("div", { className: "divide-y divide-gray-100 dark:divide-gray-800", children: versions.map((version) => {
+            const isCurrentVersion = version.version === currentVersion;
+            return /* @__PURE__ */ 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"}`,
+                "data-testid": `version-entry-${version.version}`,
+                children: [
+                  /* @__PURE__ */ jsx("div", { className: "flex items-center justify-between", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+                    /* @__PURE__ */ jsxs("span", { className: "text-sm font-semibold text-gray-900 dark:text-white", children: [
+                      "v",
+                      version.version
+                    ] }),
+                    isCurrentVersion && /* @__PURE__ */ jsx("span", { className: "rounded-full bg-blue-100 px-2 py-0.5 text-[10px] font-medium text-blue-700 dark:bg-blue-500/20 dark:text-blue-300", children: translations("current") })
+                  ] }) }),
+                  /* @__PURE__ */ jsxs("div", { className: "mt-1 text-xs text-gray-500 dark:text-gray-400", children: [
+                    /* @__PURE__ */ jsx("div", { children: formatTimestamp2(version.publishedAt) }),
+                    /* @__PURE__ */ jsxs("div", { className: "mt-0.5", children: [
+                      translations("publishedBy"),
+                      ": ",
+                      version.publishedBy
+                    ] }),
+                    /* @__PURE__ */ jsxs("div", { className: "mt-0.5", children: [
+                      version.nodeCount,
+                      " ",
+                      translations("nodes"),
+                      " / ",
+                      version.edgeCount,
+                      " ",
+                      translations("edges")
+                    ] })
+                  ] }),
+                  /* @__PURE__ */ jsxs("div", { className: "mt-2 flex gap-2", children: [
+                    /* @__PURE__ */ jsxs(
+                      "button",
+                      {
+                        type: "button",
+                        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__ */ jsx(EyeIcon, { className: "h-3 w-3" }),
+                          translations("preview")
+                        ]
+                      }
+                    ),
+                    !isCurrentVersion && /* @__PURE__ */ jsxs(
+                      "button",
+                      {
+                        type: "button",
+                        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__ */ jsx(ArrowPathIcon, { className: "h-3 w-3" }),
+                          translations("restore")
+                        ]
+                      }
+                    )
+                  ] })
+                ]
+              },
+              version.version
+            );
+          }) })
+        ] })
+      ]
+    }
+  );
+}
+var STATUS_CONFIG = {
+  pending: {
+    icon: ClockIcon,
+    color: "text-gray-400 dark:text-gray-500",
+    background: "bg-gray-100 dark:bg-gray-800",
+    label: "pending"
+  },
+  running: {
+    icon: SpinnerIcon,
+    color: "text-blue-500 dark:text-blue-400",
+    background: "bg-blue-50 dark:bg-blue-500/10",
+    label: "running"
+  },
+  success: {
+    icon: CheckCircleIcon,
+    color: "text-green-500 dark:text-green-400",
+    background: "bg-green-50 dark:bg-green-500/10",
+    label: "success"
+  },
+  error: {
+    icon: XCircleIcon,
+    color: "text-red-500 dark:text-red-400",
+    background: "bg-red-50 dark:bg-red-500/10",
+    label: "error"
+  }
+};
+function formatDuration2(durationMs) {
+  if (durationMs < 1e3) {
+    return `${durationMs}ms`;
+  }
+  const seconds = (durationMs / 1e3).toFixed(1);
+  return `${seconds}s`;
+}
+function RunPanel({ open, onClose, onRun, onStop }) {
+  const translations = useTranslations("agents.workflow.runPanel");
+  const nodes = useWorkflowStore((state) => state.nodes);
+  const isRunning = useWorkflowStore((state) => state.isRunning);
+  const nodeResults = useWorkflowStore((state) => state.nodeResults);
+  const startNode = nodes.find((node) => node.type === "start");
+  const hasEndNode = nodes.some((node) => node.type === "end");
+  const hasValidStartConfig = Boolean(
+    startNode && typeof startNode.data === "object" && startNode.data !== null && "config" in startNode.data && startNode.data.config && typeof startNode.data.config.type === "string"
+  );
+  const canRun = hasValidStartConfig && hasEndNode;
+  if (!open) return null;
+  const executionNodes = nodes.filter((node) => node.type !== "note");
+  return /* @__PURE__ */ 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",
+      "data-testid": "run-panel",
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between border-b border-gray-100 px-4 py-2 dark:border-gray-800", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+            /* @__PURE__ */ jsx(PlayIcon, { className: "h-4 w-4 text-gray-500 dark:text-gray-400" }),
+            /* @__PURE__ */ jsx("h3", { className: "text-sm font-semibold text-gray-900 dark:text-white", children: translations("title") }),
+            isRunning && /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-1 rounded-full bg-blue-100 px-2 py-0.5 text-[10px] font-medium text-blue-700 dark:bg-blue-500/20 dark:text-blue-300", children: [
+              /* @__PURE__ */ jsx("span", { className: "h-1.5 w-1.5 animate-pulse rounded-full bg-blue-500" }),
+              translations("executing")
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+            isRunning ? /* @__PURE__ */ jsxs(
+              "button",
+              {
+                type: "button",
+                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__ */ jsx(StopIcon, { className: "h-3.5 w-3.5" }),
+                  translations("stop")
+                ]
+              }
+            ) : /* @__PURE__ */ jsxs(
+              "button",
+              {
+                type: "button",
+                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__ */ jsx(PlayIcon, { className: "h-3.5 w-3.5" }),
+                  translations("run")
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                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__ */ jsx(XMarkIcon, { className: "h-4 w-4" })
+              }
+            )
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: "max-h-48 overflow-y-auto px-4 py-2", children: executionNodes.length === 0 ? /* @__PURE__ */ jsx("div", { className: "py-4 text-center text-sm text-gray-500 dark:text-gray-400", children: translations("noNodes") }) : /* @__PURE__ */ 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];
+          const StatusIconComponent = statusConfig.icon;
+          const nodeLabel = typeof node.data === "object" && node.data !== null && "label" in node.data ? String(node.data.label) : node.id;
+          return /* @__PURE__ */ jsxs(
+            "div",
+            {
+              className: `flex items-center gap-3 rounded-lg px-3 py-2 ${statusConfig.background}`,
+              "data-testid": `run-node-${node.id}`,
+              children: [
+                /* @__PURE__ */ jsx(StatusIconComponent, { className: `h-4 w-4 flex-shrink-0 ${statusConfig.color}` }),
+                /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
+                  /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+                    /* @__PURE__ */ jsx("span", { className: "truncate text-sm font-medium text-gray-900 dark:text-white", children: nodeLabel }),
+                    /* @__PURE__ */ 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 })
+                  ] }),
+                  result?.error && /* @__PURE__ */ jsx("p", { className: "mt-0.5 truncate text-xs text-red-500 dark:text-red-400", children: result.error })
+                ] }),
+                result?.durationMs !== void 0 && /* @__PURE__ */ jsx("span", { className: "flex-shrink-0 text-xs text-gray-500 dark:text-gray-400", children: formatDuration2(result.durationMs) })
+              ]
+            },
+            node.id
+          );
+        }) }) })
+      ]
+    }
+  );
+}
+function SpinnerIcon({ className }) {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      className: `animate-spin ${className ?? ""}`,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: 2,
+      children: [
+        /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "10", strokeOpacity: 0.25 }),
+        /* @__PURE__ */ jsx("path", { d: "M12 2a10 10 0 0 1 10 10", strokeLinecap: "round" })
+      ]
+    }
+  );
+}
+function topologicalSort(nodes, edges) {
+  const adjacencyList = /* @__PURE__ */ new Map();
+  const inDegree = /* @__PURE__ */ new Map();
+  for (const node of nodes) {
+    adjacencyList.set(node.id, []);
+    inDegree.set(node.id, 0);
+  }
+  for (const edge of edges) {
+    const neighbors = adjacencyList.get(edge.source);
+    if (neighbors) {
+      neighbors.push(edge.target);
+    }
+    inDegree.set(edge.target, (inDegree.get(edge.target) ?? 0) + 1);
+  }
+  const queue = [];
+  for (const [nodeId, degree] of inDegree.entries()) {
+    if (degree === 0) {
+      queue.push(nodeId);
+    }
+  }
+  const sorted = [];
+  while (queue.length > 0) {
+    const currentNodeId = queue.shift();
+    sorted.push(currentNodeId);
+    const neighbors = adjacencyList.get(currentNodeId) ?? [];
+    for (const neighborId of neighbors) {
+      const updatedDegree = (inDegree.get(neighborId) ?? 1) - 1;
+      inDegree.set(neighborId, updatedDegree);
+      if (updatedDegree === 0) {
+        queue.push(neighborId);
+      }
+    }
+  }
+  for (const node of nodes) {
+    if (!sorted.includes(node.id)) {
+      sorted.push(node.id);
+    }
+  }
+  return sorted;
+}
+function inferVariables(config, nodeType) {
+  if (!config) {
+    return [];
+  }
+  const variables = [];
+  switch (config.type) {
+    case "start":
+      for (const variableName of config.inputVariables) {
+        if (variableName) {
+          variables.push({ name: variableName, direction: "output", variableType: "any" });
+        }
+      }
+      break;
+    case "end":
+      for (const variableName of config.outputVariables) {
+        if (variableName) {
+          variables.push({ name: variableName, direction: "input", variableType: "any" });
+        }
+      }
+      break;
+    case "code":
+      {
+        const kind = "language" in config ? config.language : config.operation;
+        variables.push({ name: "code_input", direction: "input", variableType: kind });
+        variables.push({ name: "code_output", direction: "output", variableType: "any" });
+      }
+      break;
+    case "http_request":
+      variables.push({ name: "url", direction: "input", variableType: "string" });
+      variables.push({ name: "response", direction: "output", variableType: "object" });
+      if (config.body) {
+        variables.push({ name: "body", direction: "input", variableType: "string" });
+      }
+      break;
+    case "template_transform":
+      variables.push({ name: "template", direction: "input", variableType: "string" });
+      if (config.outputVariable) {
+        variables.push({ name: config.outputVariable, direction: "output", variableType: "string" });
+      }
+      break;
+    case "if_else":
+      for (const condition of config.conditions) {
+        if (condition.variable) {
+          variables.push({ name: condition.variable, direction: "input", variableType: "any" });
+        }
+      }
+      variables.push({ name: "true_branch", direction: "output", variableType: "boolean" });
+      variables.push({ name: "false_branch", direction: "output", variableType: "boolean" });
+      break;
+    case "iteration":
+      if (config.iteratorVariable) {
+        variables.push({ name: config.iteratorVariable, direction: "input", variableType: "array" });
+      }
+      variables.push({ name: "iteration_item", direction: "output", variableType: "any" });
+      variables.push({ name: "iteration_index", direction: "output", variableType: "number" });
+      break;
+    case "iteration_start":
+      if (config.iteratorVariable) {
+        variables.push({ name: config.iteratorVariable, direction: "input", variableType: "array" });
+      }
+      if (config.itemVariable) {
+        variables.push({ name: config.itemVariable, direction: "output", variableType: "any" });
+      }
+      if (config.indexVariable) {
+        variables.push({ name: config.indexVariable, direction: "output", variableType: "number" });
+      }
+      break;
+    case "knowledge_base":
+      variables.push({ name: "query", direction: "input", variableType: "string" });
+      variables.push({ name: "results", direction: "output", variableType: "array" });
+      break;
+    case "answer":
+      for (const variableName of config.outputVariables) {
+        if (variableName) {
+          variables.push({ name: variableName, direction: "output", variableType: "any" });
+        }
+      }
+      if (config.outputTemplate) {
+        variables.push({ name: "answer_template", direction: "input", variableType: "string" });
+      }
+      break;
+    case "question_classifier":
+      variables.push({ name: "question", direction: "input", variableType: "string" });
+      for (const category of config.categories) {
+        if (category.name) {
+          variables.push({ name: `category_${category.name}`, direction: "output", variableType: "string" });
+        }
+      }
+      break;
+    case "parameter_extractor":
+      variables.push({ name: "input_text", direction: "input", variableType: "string" });
+      for (const parameter of config.parameters) {
+        if (parameter.name) {
+          variables.push({ name: parameter.name, direction: "output", variableType: parameter.type });
+        }
+      }
+      break;
+    case "variable_assigner":
+      for (const assignment of config.assignments) {
+        if (assignment.source) {
+          variables.push({ name: assignment.source, direction: "input", variableType: "any" });
+        }
+        if (assignment.target) {
+          variables.push({ name: assignment.target, direction: "output", variableType: "any" });
+        }
+      }
+      break;
+    case "variable_aggregator":
+      for (const variableName of config.inputVariables) {
+        if (variableName) {
+          variables.push({ name: variableName, direction: "input", variableType: "any" });
+        }
+      }
+      if (config.outputVariable) {
+        variables.push({ name: config.outputVariable, direction: "output", variableType: config.aggregationMode });
+      }
+      break;
+    case "document_extractor":
+      variables.push({ name: "document", direction: "input", variableType: "file" });
+      if (config.outputVariable) {
+        variables.push({ name: config.outputVariable, direction: "output", variableType: config.extractionMode });
+      }
+      break;
+    case "list_operator":
+      if (config.inputVariable) {
+        variables.push({ name: config.inputVariable, direction: "input", variableType: "array" });
+      }
+      if (config.outputVariable) {
+        variables.push({ name: config.outputVariable, direction: "output", variableType: "array" });
+      }
+      if (config.condition) {
+        variables.push({ name: "condition", direction: "input", variableType: "string" });
+      }
+      break;
+  }
+  return variables;
+}
+function VariableInspector({ open, onClose }) {
+  const translations = useTranslations("agents.workflow.variableInspector");
+  const nodes = useWorkflowStore((state) => state.nodes);
+  const edges = useWorkflowStore((state) => state.edges);
+  const [expandedNodes, setExpandedNodes] = useState(/* @__PURE__ */ new Set());
+  const toggleNodeExpansion = useCallback((nodeId) => {
+    setExpandedNodes((current) => {
+      const updated = new Set(current);
+      if (updated.has(nodeId)) {
+        updated.delete(nodeId);
+      } else {
+        updated.add(nodeId);
+      }
+      return updated;
+    });
+  }, []);
+  const nodeVariableEntries = useMemo(() => {
+    const relevantNodes = nodes.filter((node) => node.type !== "note");
+    const sortedNodeIds = topologicalSort(relevantNodes, edges);
+    const entries = [];
+    for (const nodeId of sortedNodeIds) {
+      const node = relevantNodes.find((candidateNode) => candidateNode.id === nodeId);
+      if (!node) continue;
+      const nodeData = node.data;
+      const config = nodeData?.config;
+      const label = nodeData?.label ?? node.id;
+      const nodeType = node.type ?? "unknown";
+      const variables = inferVariables(config);
+      entries.push({
+        nodeId: node.id,
+        nodeLabel: label,
+        nodeType,
+        variables
+      });
+    }
+    return entries;
+  }, [nodes, edges]);
+  if (!open) return null;
+  return /* @__PURE__ */ 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",
+      "data-testid": "variable-inspector",
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between border-b border-gray-200 px-4 py-3 dark:border-gray-700", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+            /* @__PURE__ */ jsx(VariableIcon, { className: "h-5 w-5 text-gray-500 dark:text-gray-400" }),
+            /* @__PURE__ */ jsx("h3", { className: "text-sm font-semibold text-gray-900 dark:text-white", children: translations("title") })
+          ] }),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              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__ */ jsx(XMarkIcon, { className: "h-4 w-4" })
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: "flex-1 overflow-y-auto", children: nodeVariableEntries.length === 0 ? /* @__PURE__ */ jsxs("div", { className: "px-4 py-12 text-center", "data-testid": "variable-inspector-empty", children: [
+          /* @__PURE__ */ jsx(VariableIcon, { className: "mx-auto h-8 w-8 text-gray-300 dark:text-gray-600" }),
+          /* @__PURE__ */ jsx("p", { className: "mt-2 text-sm text-gray-500 dark:text-gray-400", children: translations("noNodes") })
+        ] }) : /* @__PURE__ */ jsx("div", { className: "divide-y divide-gray-100 dark:divide-gray-800", children: nodeVariableEntries.map((entry) => {
+          const isExpanded = expandedNodes.has(entry.nodeId);
+          const IconComponent = LOGIC_ICON_MAP[entry.nodeType];
+          const gradient = LOGIC_NODE_GRADIENTS[entry.nodeType] ?? "from-gray-400 to-gray-500";
+          const inputVariables = entry.variables.filter((variable) => variable.direction === "input");
+          const outputVariables = entry.variables.filter((variable) => variable.direction === "output");
+          return /* @__PURE__ */ jsxs("div", { "data-testid": `variable-node-${entry.nodeId}`, children: [
+            /* @__PURE__ */ jsxs(
+              "button",
+              {
+                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",
+                children: [
+                  isExpanded ? /* @__PURE__ */ jsx(ChevronDownIcon, { className: "h-3.5 w-3.5 flex-shrink-0 text-gray-400" }) : /* @__PURE__ */ jsx(ChevronRightIcon, { className: "h-3.5 w-3.5 flex-shrink-0 text-gray-400" }),
+                  /* @__PURE__ */ jsx("div", { className: `flex h-5 w-5 flex-shrink-0 items-center justify-center rounded bg-gradient-to-br ${gradient}`, children: IconComponent && /* @__PURE__ */ jsx(IconComponent, { className: "h-3 w-3 text-white" }) }),
+                  /* @__PURE__ */ jsx("span", { className: "truncate text-sm font-medium text-gray-900 dark:text-white", children: entry.nodeLabel }),
+                  /* @__PURE__ */ jsxs("span", { className: "ml-auto flex-shrink-0 text-[10px] text-gray-400 dark:text-gray-500", children: [
+                    entry.variables.length,
+                    " ",
+                    translations("variables")
+                  ] })
+                ]
+              }
+            ),
+            isExpanded && /* @__PURE__ */ jsx("div", { className: "bg-gray-50/50 px-4 pb-2 dark:bg-gray-800/30", children: entry.variables.length === 0 ? /* @__PURE__ */ jsx("p", { className: "py-2 pl-9 text-xs italic text-gray-400 dark:text-gray-500", children: translations("noVariables") }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+              inputVariables.length > 0 && /* @__PURE__ */ jsxs("div", { className: "pl-9 pt-1", children: [
+                /* @__PURE__ */ jsx("div", { className: "mb-1 text-[10px] font-medium uppercase tracking-wider text-gray-400 dark:text-gray-500", children: translations("inputs") }),
+                inputVariables.map((variable, index) => /* @__PURE__ */ jsxs(
+                  "div",
+                  {
+                    className: "flex items-center gap-2 py-0.5",
+                    children: [
+                      /* @__PURE__ */ jsx("span", { className: "h-1.5 w-1.5 rounded-full bg-blue-400" }),
+                      /* @__PURE__ */ jsx("span", { className: "text-xs text-gray-700 dark:text-gray-300", children: variable.name }),
+                      /* @__PURE__ */ 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 })
+                    ]
+                  },
+                  `${variable.name}-${index}`
+                ))
+              ] }),
+              outputVariables.length > 0 && /* @__PURE__ */ jsxs("div", { className: "pl-9 pt-1", children: [
+                /* @__PURE__ */ jsx("div", { className: "mb-1 text-[10px] font-medium uppercase tracking-wider text-gray-400 dark:text-gray-500", children: translations("outputs") }),
+                outputVariables.map((variable, index) => /* @__PURE__ */ jsxs(
+                  "div",
+                  {
+                    className: "flex items-center gap-2 py-0.5",
+                    children: [
+                      /* @__PURE__ */ jsx("span", { className: "h-1.5 w-1.5 rounded-full bg-green-400" }),
+                      /* @__PURE__ */ jsx("span", { className: "text-xs text-gray-700 dark:text-gray-300", children: variable.name }),
+                      /* @__PURE__ */ 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 })
+                    ]
+                  },
+                  `${variable.name}-${index}`
+                ))
+              ] })
+            ] }) })
+          ] }, entry.nodeId);
+        }) }) })
+      ]
+    }
+  );
+}
+function RunInputDialog({
+  open,
+  onClose,
+  onRun
+}) {
+  const t = useTranslations("agents.workflow.runInputDialog");
+  const nodes = useWorkflowStore((state) => state.nodes);
+  const [values, setValues] = useState({});
+  const inputVariableNames = useMemo(() => {
+    const storeStartNode = nodes.find((node) => node.type === "start");
+    if (!storeStartNode || typeof storeStartNode.data !== "object" || storeStartNode.data === null) return [];
+    if (!("config" in storeStartNode.data) || !storeStartNode.data.config) return [];
+    const startConfig = storeStartNode.data.config;
+    return startConfig.inputVariables ?? [];
+  }, [nodes]);
+  const handleValueChange = useCallback((variableName, variableValue) => {
+    setValues((previous) => ({ ...previous, [variableName]: variableValue }));
+  }, []);
+  const handleSubmit = useCallback(() => {
+    const inputVariables = {};
+    for (const variableName of inputVariableNames) {
+      inputVariables[variableName] = values[variableName] ?? "";
+    }
+    onRun(inputVariables);
+    onClose();
+    setValues({});
+  }, [inputVariableNames, values, onRun, onClose]);
+  const handleClose = useCallback(() => {
+    onClose();
+    setValues({});
+  }, [onClose]);
+  if (!open) return null;
+  return /* @__PURE__ */ jsxs(
+    GlassModal,
+    {
+      open,
+      onClose: handleClose,
+      title: t("title"),
+      subtitle: t("subtitle"),
+      maxWidth: "md",
+      children: [
+        /* @__PURE__ */ jsx("div", { className: "space-y-3", children: inputVariableNames.length === 0 ? /* @__PURE__ */ jsx("p", { className: "text-center text-sm text-gray-500 dark:text-gray-400", children: t("noInputs") }) : inputVariableNames.map((variableName) => /* @__PURE__ */ jsxs("div", { children: [
+          /* @__PURE__ */ jsx("label", { className: "mb-1 block text-xs font-medium text-gray-700 dark:text-gray-300", children: variableName }),
+          /* @__PURE__ */ jsx(
+            Input,
+            {
+              value: values[variableName] ?? "",
+              onChange: (event) => handleValueChange(variableName, event.target.value),
+              placeholder: `${t("variableValue")}...`
+            }
+          )
+        ] }, variableName)) }),
+        /* @__PURE__ */ jsxs("div", { className: "mt-4 flex items-center justify-end gap-2", children: [
+          /* @__PURE__ */ jsx(Button, { size: "sm", plain: true, onClick: handleClose, children: t("cancel") }),
+          /* @__PURE__ */ jsxs(Button, { size: "sm", gradient: true, onClick: handleSubmit, children: [
+            /* @__PURE__ */ jsx(PlayIcon, { className: "h-3.5 w-3.5", "data-slot": "icon" }),
+            t("run")
+          ] })
+        ] })
+      ]
+    }
+  );
+}
+var STATUS_STYLES = {
+  completed: { icon: CheckCircleIcon, colorClass: "text-green-500" },
+  failed: { icon: ExclamationCircleIcon, colorClass: "text-red-500" },
+  running: { icon: ArrowPathIcon, colorClass: "text-blue-500 animate-spin" },
+  pending: { icon: ClockIcon, colorClass: "text-gray-400" },
+  success: { icon: CheckCircleIcon, colorClass: "text-green-500" },
+  error: { icon: ExclamationCircleIcon, colorClass: "text-red-500" },
+  skipped: { icon: ClockIcon, colorClass: "text-gray-400" }
+};
+function formatDuration3(durationMs) {
+  if (durationMs === null) return "\u2014";
+  if (durationMs < 1e3) return `${durationMs}ms`;
+  return `${(durationMs / 1e3).toFixed(1)}s`;
+}
+function formatTimestamp(timestamp) {
+  const date = new Date(timestamp);
+  return date.toLocaleTimeString(void 0, { hour: "2-digit", minute: "2-digit", second: "2-digit" });
+}
+function PreviewPanel({ open, onClose, workflowId, loadRuns }) {
+  const t = useTranslations("agents.workflow.previewPanel");
+  const [runs, setRuns] = useState([]);
+  const [isLoadingRuns, setIsLoadingRuns] = useState(false);
+  const [selectedRun, setSelectedRun] = useState(null);
+  const [selectedNode, setSelectedNode] = useState(null);
+  const isRunning = useWorkflowStore((state) => state.isRunning);
+  const nodeResults = useWorkflowStore((state) => state.nodeResults);
+  const refreshRuns = useCallback(async () => {
+    setIsLoadingRuns(true);
+    try {
+      const workflowRuns = await loadRuns(workflowId);
+      setRuns(workflowRuns);
+    } finally {
+      setIsLoadingRuns(false);
+    }
+  }, [loadRuns, workflowId]);
+  useEffect(() => {
+    if (open) void refreshRuns();
+  }, [open, refreshRuns]);
+  useEffect(() => {
+    if (!isRunning && open) void refreshRuns();
+  }, [isRunning, open, refreshRuns]);
+  if (!open) return null;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("div", { className: "fixed inset-x-0 top-[120px] bottom-0 z-40 bg-black/10 backdrop-blur-[1px]", onClick: onClose }),
+    /* @__PURE__ */ 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__ */ 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__ */ jsx("h3", { className: "text-sm font-semibold text-gray-900 dark:text-white", children: t("title") }),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            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__ */ jsx(XMarkIcon, { className: "h-4 w-4" })
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "flex h-full flex-col overflow-hidden", children: [
+        isRunning && /* @__PURE__ */ jsxs("div", { className: "border-b border-gray-200/50 px-4 py-3 dark:border-gray-700/50", children: [
+          /* @__PURE__ */ jsxs("div", { className: "mb-2 flex items-center gap-2", children: [
+            /* @__PURE__ */ jsx(ArrowPathIcon, { className: "h-4 w-4 animate-spin text-blue-500" }),
+            /* @__PURE__ */ jsx("span", { className: "text-xs font-semibold text-blue-600 dark:text-blue-400", children: t("activeRun") })
+          ] }),
+          /* @__PURE__ */ 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__ */ 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: [
+              /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+                /* @__PURE__ */ jsx(StatusIcon, { className: `h-3.5 w-3.5 ${statusStyle.colorClass}` }),
+                /* @__PURE__ */ jsx("span", { className: "truncate text-gray-700 dark:text-gray-300", children: nodeId.slice(0, 8) })
+              ] }),
+              result.durationMs !== void 0 && /* @__PURE__ */ jsx("span", { className: "text-gray-400", children: formatDuration3(result.durationMs) })
+            ] }, nodeId);
+          }) })
+        ] }),
+        selectedNode && /* @__PURE__ */ jsxs("div", { className: "border-b border-gray-200/50 px-4 py-3 dark:border-gray-700/50", children: [
+          /* @__PURE__ */ jsxs("div", { className: "mb-2 flex items-center justify-between", children: [
+            /* @__PURE__ */ jsx("span", { className: "text-xs font-semibold text-gray-900 dark:text-white", children: t("nodeDetail") }),
+            /* @__PURE__ */ 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__ */ jsxs("div", { className: "space-y-2 text-xs", children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex justify-between", children: [
+              /* @__PURE__ */ jsx("span", { className: "text-gray-500", children: t("status") }),
+              /* @__PURE__ */ jsx("span", { className: STATUS_STYLES[selectedNode.status]?.colorClass ?? "text-gray-400", children: t(selectedNode.status) })
+            ] }),
+            /* @__PURE__ */ jsxs("div", { className: "flex justify-between", children: [
+              /* @__PURE__ */ jsx("span", { className: "text-gray-500", children: t("duration") }),
+              /* @__PURE__ */ jsx("span", { className: "text-gray-700 dark:text-gray-300", children: formatDuration3(selectedNode.durationMs) })
+            ] }),
+            selectedNode.error && /* @__PURE__ */ jsxs("div", { children: [
+              /* @__PURE__ */ jsx("span", { className: "text-red-500", children: t("error") }),
+              /* @__PURE__ */ 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__ */ jsxs("div", { children: [
+              /* @__PURE__ */ jsx("span", { className: "text-gray-500", children: t("outputs") }),
+              /* @__PURE__ */ 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__ */ jsxs("div", { className: "flex-1 overflow-y-auto px-4 py-3", children: [
+          /* @__PURE__ */ jsx("h4", { className: "mb-2 text-xs font-semibold text-gray-500 dark:text-gray-400", children: t("runHistory") }),
+          isLoadingRuns && /* @__PURE__ */ jsx("div", { className: "space-y-2", children: [1, 2, 3].map((index) => /* @__PURE__ */ jsx("div", { className: "shimmer h-14 rounded-lg" }, index)) }),
+          !isLoadingRuns && runs.length === 0 && /* @__PURE__ */ jsxs("div", { className: "py-8 text-center", children: [
+            /* @__PURE__ */ jsx(ClockIcon, { className: "mx-auto mb-2 h-8 w-8 text-gray-300 dark:text-gray-600" }),
+            /* @__PURE__ */ jsx("p", { className: "text-xs text-gray-500 dark:text-gray-400", children: t("noRuns") }),
+            /* @__PURE__ */ jsx("p", { className: "mt-1 text-[10px] text-gray-400 dark:text-gray-500", children: t("noRunsDescription") })
+          ] }),
+          !isLoadingRuns && runs.length > 0 && /* @__PURE__ */ jsx("div", { className: "space-y-1.5", children: runs.map((run) => {
+            const statusStyle = STATUS_STYLES[run.status] ?? STATUS_STYLES.pending;
+            const StatusIcon = statusStyle.icon;
+            const isSelected = selectedRun?.id === run.id;
+            return /* @__PURE__ */ jsxs(
+              "button",
+              {
+                type: "button",
+                onClick: () => {
+                  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"}`,
+                children: [
+                  /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
+                    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+                      /* @__PURE__ */ jsx(StatusIcon, { className: `h-3.5 w-3.5 ${statusStyle.colorClass}` }),
+                      /* @__PURE__ */ jsx("span", { className: "text-xs font-medium text-gray-900 dark:text-white", children: formatTimestamp(run.createdAt) })
+                    ] }),
+                    /* @__PURE__ */ jsx("span", { className: "text-[10px] text-gray-400", children: formatDuration3(run.totalDurationMs) })
+                  ] }),
+                  run.error && /* @__PURE__ */ jsx("p", { className: "mt-1 truncate text-[10px] text-red-500", children: run.error })
+                ]
+              },
+              run.id
+            );
+          }) }),
+          selectedRun && selectedRun.nodeResults.length > 0 && /* @__PURE__ */ jsxs("div", { className: "mt-3 space-y-1", children: [
+            /* @__PURE__ */ jsx("h5", { className: "mb-1.5 text-[10px] font-semibold uppercase tracking-wider text-gray-400", children: "Nodes" }),
+            selectedRun.nodeResults.map((nodeResult) => {
+              const nodeStatusStyle = STATUS_STYLES[nodeResult.status] ?? STATUS_STYLES.pending;
+              const NodeStatusIcon = nodeStatusStyle.icon;
+              return /* @__PURE__ */ jsxs(
+                "button",
+                {
+                  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",
+                  children: [
+                    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+                      /* @__PURE__ */ jsx(NodeStatusIcon, { className: `h-3 w-3 ${nodeStatusStyle.colorClass}` }),
+                      /* @__PURE__ */ jsx("span", { className: "text-gray-700 dark:text-gray-300", children: nodeResult.nodeType })
+                    ] }),
+                    /* @__PURE__ */ jsx("span", { className: "text-[10px] text-gray-400", children: formatDuration3(nodeResult.durationMs) })
+                  ]
+                },
+                nodeResult.nodeId
+              );
+            })
+          ] })
+        ] })
+      ] })
+    ] })
+  ] });
+}
+function SaveStatusBadge({ status }) {
+  if (status === "saving") {
+    return /* @__PURE__ */ jsx("span", { className: "animate-pulse text-[10px] text-gray-400 dark:text-gray-500", children: "\u2022" });
+  }
+  if (status === "saved") {
+    return /* @__PURE__ */ jsx("span", { className: "text-[10px] text-green-500/60 dark:text-green-400/50", children: "\u2713" });
+  }
+  return null;
+}
+var AutoSaveWorkspace = memo(function AutoSaveWorkspace2({
+  onAutoSaveGraph,
+  onGraphSnapshot,
+  ...workspaceProps
+}) {
+  const handleGraphChange = useCallback((graph) => {
+    onGraphSnapshot?.(graph);
+    onAutoSaveGraph(graph);
+  }, [onAutoSaveGraph, onGraphSnapshot]);
+  return /* @__PURE__ */ jsx(
+    Workspace,
+    {
+      ...workspaceProps,
+      onGraphChange: handleGraphChange
+    }
+  );
+});
+function DynamicIslandConfirm2(props) {
+  return /* @__PURE__ */ jsx(DynamicIslandConfirm, { ...props });
+}
+var JSON_PREVIEW_LINE_LIMIT = 50;
+function DslExportModal({ open, onClose, workflow, graph }) {
+  const translations = useTranslations("agents.workflow.dsl.export");
+  const [isCopied, setIsCopied] = useState(false);
+  const exportPayload = useMemo(() => ({
+    name: workflow.name,
+    description: workflow.description,
+    version: workflow.version,
+    exportedAt: (/* @__PURE__ */ new Date()).toISOString(),
+    graph: {
+      nodes: graph.nodes,
+      edges: graph.edges,
+      viewport: graph.viewport
+    }
+  }), [workflow, graph]);
+  const jsonString = useMemo(() => JSON.stringify(exportPayload, null, 2), [exportPayload]);
+  const previewLines = useMemo(() => {
+    const lines = jsonString.split("\n");
+    if (lines.length <= JSON_PREVIEW_LINE_LIMIT) {
+      return jsonString;
+    }
+    return lines.slice(0, JSON_PREVIEW_LINE_LIMIT).join("\n") + "\n...";
+  }, [jsonString]);
+  const handleCopyToClipboard = useCallback(async () => {
+    try {
+      await navigator.clipboard.writeText(jsonString);
+      setIsCopied(true);
+      setTimeout(() => setIsCopied(false), 2e3);
+    } catch {
+      const textArea = document.createElement("textarea");
+      textArea.value = jsonString;
+      document.body.appendChild(textArea);
+      textArea.select();
+      document.execCommand("copy");
+      document.body.removeChild(textArea);
+      setIsCopied(true);
+      setTimeout(() => setIsCopied(false), 2e3);
+    }
+  }, [jsonString]);
+  const handleDownloadJson = useCallback(() => {
+    const blob = new Blob([jsonString], { type: "application/json" });
+    const url = URL.createObjectURL(blob);
+    const downloadLink = document.createElement("a");
+    downloadLink.href = url;
+    downloadLink.download = `${workflow.name}-v${workflow.version}.json`;
+    document.body.appendChild(downloadLink);
+    downloadLink.click();
+    document.body.removeChild(downloadLink);
+    URL.revokeObjectURL(url);
+  }, [jsonString, workflow.name, workflow.version]);
+  if (!open) return null;
+  return /* @__PURE__ */ jsx(
+    GlassModal,
+    {
+      open,
+      onClose,
+      title: translations("title"),
+      subtitle: translations("description"),
+      maxWidth: "2xl",
+      children: /* @__PURE__ */ jsxs("div", { "data-testid": "dsl-export-modal", children: [
+        /* @__PURE__ */ jsx("div", { className: "border-b border-gray-200 px-1 py-4 dark:border-gray-700", children: /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 gap-4 text-sm", children: [
+          /* @__PURE__ */ jsxs("div", { children: [
+            /* @__PURE__ */ jsx("span", { className: "text-gray-500 dark:text-gray-400", children: translations("workflowName") }),
+            /* @__PURE__ */ jsx("p", { className: "font-medium text-gray-900 dark:text-white", children: workflow.name })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { children: [
+            /* @__PURE__ */ jsx("span", { className: "text-gray-500 dark:text-gray-400", children: translations("version") }),
+            /* @__PURE__ */ jsxs("p", { className: "font-medium text-gray-900 dark:text-white", children: [
+              "v",
+              workflow.version
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { children: [
+            /* @__PURE__ */ jsx("span", { className: "text-gray-500 dark:text-gray-400", children: translations("nodes") }),
+            /* @__PURE__ */ jsx("p", { className: "font-medium text-gray-900 dark:text-white", children: graph.nodes.length })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { children: [
+            /* @__PURE__ */ jsx("span", { className: "text-gray-500 dark:text-gray-400", children: translations("edges") }),
+            /* @__PURE__ */ jsx("p", { className: "font-medium text-gray-900 dark:text-white", children: graph.edges.length })
+          ] })
+        ] }) }),
+        /* @__PURE__ */ jsxs("div", { className: "px-1 py-4", children: [
+          /* @__PURE__ */ jsx("div", { className: "mb-2 text-xs font-medium uppercase tracking-wider text-gray-400 dark:text-gray-500", children: translations("preview") }),
+          /* @__PURE__ */ 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",
+              "data-testid": "export-json-preview",
+              children: previewLines
+            }
+          )
+        ] }),
+        /* @__PURE__ */ 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__ */ jsx(
+            Button,
+            {
+              type: "button",
+              onClick: handleCopyToClipboard,
+              outline: true,
+              size: "sm",
+              "data-testid": "export-copy-button",
+              children: isCopied ? /* @__PURE__ */ jsxs(Fragment, { children: [
+                /* @__PURE__ */ jsx(CheckIcon, { className: "h-4 w-4 text-green-500" }),
+                /* @__PURE__ */ jsx("span", { role: "status", "aria-live": "polite", children: translations("copied") })
+              ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+                /* @__PURE__ */ jsx(ClipboardDocumentIcon, { className: "h-4 w-4" }),
+                translations("copyToClipboard")
+              ] })
+            }
+          ),
+          /* @__PURE__ */ jsxs(
+            Button,
+            {
+              type: "button",
+              onClick: handleDownloadJson,
+              color: "ios-glass-blue",
+              size: "sm",
+              "data-testid": "export-download-button",
+              children: [
+                /* @__PURE__ */ jsx(ArrowDownTrayIcon, { className: "h-4 w-4" }),
+                translations("downloadJson")
+              ]
+            }
+          )
+        ] })
+      ] })
+    }
+  );
+}
+function validateWorkflowJson(jsonString) {
+  const errors = [];
+  let parsed;
+  try {
+    parsed = JSON.parse(jsonString);
+  } catch {
+    return { isValid: false, errors: ["Invalid JSON format"], graph: null, nodeCount: 0, edgeCount: 0 };
+  }
+  if (typeof parsed !== "object" || parsed === null) {
+    return { isValid: false, errors: ["Root must be a JSON object"], graph: null, nodeCount: 0, edgeCount: 0 };
+  }
+  const data = parsed;
+  const graphData = data.graph ? data.graph : data;
+  if (!Array.isArray(graphData.nodes)) {
+    errors.push('Missing or invalid "nodes" array');
+  }
+  if (!Array.isArray(graphData.edges)) {
+    errors.push('Missing or invalid "edges" array');
+  }
+  if (!graphData.viewport || typeof graphData.viewport !== "object") {
+    errors.push('Missing or invalid "viewport" object');
+  }
+  if (errors.length > 0) {
+    return { isValid: false, errors, graph: null, nodeCount: 0, edgeCount: 0 };
+  }
+  const nodes = graphData.nodes;
+  const edges = graphData.edges;
+  for (let index = 0; index < nodes.length; index++) {
+    const node = nodes[index];
+    if (!node.id || typeof node.id !== "string") {
+      errors.push(`Node at index ${index}: missing or invalid "id"`);
+    }
+    if (!node.type || typeof node.type !== "string") {
+      errors.push(`Node at index ${index}: missing or invalid "type"`);
+    }
+    if (!node.position || typeof node.position !== "object") {
+      errors.push(`Node at index ${index}: missing or invalid "position"`);
+    }
+  }
+  for (let index = 0; index < edges.length; index++) {
+    const edge = edges[index];
+    if (!edge.id || typeof edge.id !== "string") {
+      errors.push(`Edge at index ${index}: missing or invalid "id"`);
+    }
+    if (!edge.source || typeof edge.source !== "string") {
+      errors.push(`Edge at index ${index}: missing or invalid "source"`);
+    }
+    if (!edge.target || typeof edge.target !== "string") {
+      errors.push(`Edge at index ${index}: missing or invalid "target"`);
+    }
+  }
+  if (errors.length > 0) {
+    return { isValid: false, errors, graph: null, nodeCount: nodes.length, edgeCount: edges.length };
+  }
+  const viewport = graphData.viewport;
+  const graph = {
+    nodes: nodes.map((node) => ({
+      id: node.id,
+      type: node.type,
+      position: node.position,
+      data: node.data ?? { entityId: "", label: "" }
+    })),
+    edges: edges.map((edge) => ({
+      id: edge.id,
+      source: edge.source,
+      target: edge.target,
+      sourceHandle: edge.sourceHandle ?? "default",
+      targetHandle: edge.targetHandle ?? "default"
+    })),
+    viewport: {
+      x: typeof viewport.x === "number" ? viewport.x : 0,
+      y: typeof viewport.y === "number" ? viewport.y : 0,
+      zoom: typeof viewport.zoom === "number" ? viewport.zoom : 1
+    }
+  };
+  return { isValid: true, errors: [], graph, nodeCount: nodes.length, edgeCount: edges.length };
+}
+function DslImportModal({ open, onClose, onImport }) {
+  const translations = useTranslations("agents.workflow.dsl.import");
+  const fileInputRef = useRef(null);
+  const [isDragActive, setIsDragActive] = useState(false);
+  const [validationResult, setValidationResult] = useState(null);
+  const [fileName, setFileName] = useState(null);
+  const processFile = useCallback((file) => {
+    setFileName(file.name);
+    const reader = new FileReader();
+    reader.onload = (event) => {
+      const content = event.target?.result;
+      if (typeof content === "string") {
+        const result = validateWorkflowJson(content);
+        setValidationResult(result);
+      }
+    };
+    reader.readAsText(file);
+  }, []);
+  const handleDragOver = useCallback((event) => {
+    event.preventDefault();
+    setIsDragActive(true);
+  }, []);
+  const handleDragLeave = useCallback((event) => {
+    event.preventDefault();
+    setIsDragActive(false);
+  }, []);
+  const handleDrop = useCallback(
+    (event) => {
+      event.preventDefault();
+      setIsDragActive(false);
+      const files = event.dataTransfer.files;
+      if (files.length > 0) {
+        processFile(files[0]);
+      }
+    },
+    [processFile]
+  );
+  const handleFileChange = useCallback(
+    (event) => {
+      const files = event.target.files;
+      if (files && files.length > 0) {
+        processFile(files[0]);
+      }
+    },
+    [processFile]
+  );
+  const handleClickUpload = useCallback(() => {
+    fileInputRef.current?.click();
+  }, []);
+  const handleImport = useCallback(() => {
+    if (validationResult?.isValid && validationResult.graph) {
+      onImport(validationResult.graph);
+      onClose();
+    }
+  }, [validationResult, onImport, onClose]);
+  const handleReset = useCallback(() => {
+    setValidationResult(null);
+    setFileName(null);
+    if (fileInputRef.current) {
+      fileInputRef.current.value = "";
+    }
+  }, []);
+  if (!open) return null;
+  return /* @__PURE__ */ jsx(
+    GlassModal,
+    {
+      open,
+      onClose,
+      title: translations("title"),
+      subtitle: translations("description"),
+      maxWidth: "lg",
+      children: /* @__PURE__ */ jsxs("div", { "data-testid": "dsl-import-modal", children: [
+        /* @__PURE__ */ jsx("div", { className: "px-1 py-2", children: !validationResult ? /* @__PURE__ */ jsxs(
+          "div",
+          {
+            onDragOver: handleDragOver,
+            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"}`,
+            "data-testid": "import-dropzone",
+            role: "button",
+            tabIndex: 0,
+            "aria-label": translations("dropzone"),
+            children: [
+              /* @__PURE__ */ jsx(ArrowUpTrayIcon, { className: "mx-auto h-10 w-10 text-gray-400 dark:text-gray-500" }),
+              /* @__PURE__ */ jsx("p", { className: "mt-3 text-sm font-medium text-gray-700 dark:text-gray-300", children: translations("dropzone") }),
+              /* @__PURE__ */ jsx("p", { className: "mt-1 text-xs text-gray-500 dark:text-gray-400", children: translations("dropzoneHint") }),
+              /* @__PURE__ */ jsx(
+                "input",
+                {
+                  ref: fileInputRef,
+                  type: "file",
+                  accept: ".json",
+                  onChange: handleFileChange,
+                  className: "hidden",
+                  "data-testid": "import-file-input"
+                }
+              )
+            ]
+          }
+        ) : /* @__PURE__ */ jsxs("div", { "data-testid": "import-validation-result", children: [
+          /* @__PURE__ */ jsxs("div", { className: "mb-4 flex items-center justify-between", children: [
+            /* @__PURE__ */ jsx("span", { className: "text-sm font-medium text-gray-700 dark:text-gray-300", children: fileName }),
+            /* @__PURE__ */ jsx(Button, { type: "button", plain: true, size: "sm", onClick: handleReset, children: translations("chooseAnother") })
+          ] }),
+          validationResult.isValid ? /* @__PURE__ */ 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__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+              /* @__PURE__ */ jsx(CheckCircleIcon, { className: "h-5 w-5 text-green-500" }),
+              /* @__PURE__ */ jsx("span", { className: "text-sm font-medium text-green-700 dark:text-green-400", children: translations("validationSuccess") })
+            ] }),
+            /* @__PURE__ */ jsxs("div", { className: "mt-2 grid grid-cols-2 gap-2 text-sm", children: [
+              /* @__PURE__ */ jsxs("div", { className: "text-green-600 dark:text-green-400", children: [
+                translations("nodes"),
+                ": ",
+                validationResult.nodeCount
+              ] }),
+              /* @__PURE__ */ jsxs("div", { className: "text-green-600 dark:text-green-400", children: [
+                translations("edges"),
+                ": ",
+                validationResult.edgeCount
+              ] })
+            ] })
+          ] }) : /* @__PURE__ */ jsxs("div", { role: "alert", className: "rounded-lg border border-red-200 bg-red-50 p-4 dark:border-red-800 dark:bg-red-900/20", children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+              /* @__PURE__ */ jsx(ExclamationTriangleIcon, { className: "h-5 w-5 text-red-500" }),
+              /* @__PURE__ */ jsx("span", { className: "text-sm font-medium text-red-700 dark:text-red-400", children: translations("validationFailed") })
+            ] }),
+            /* @__PURE__ */ jsx("ul", { className: "mt-2 space-y-1", children: validationResult.errors.map((validationError, index) => /* @__PURE__ */ jsx("li", { className: "text-xs text-red-600 dark:text-red-400", children: validationError }, index)) })
+          ] })
+        ] }) }),
+        /* @__PURE__ */ 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__ */ jsx(Button, { type: "button", onClick: onClose, outline: true, size: "sm", "data-testid": "import-cancel-button", children: translations("cancel") }),
+          /* @__PURE__ */ jsxs(
+            Button,
+            {
+              type: "button",
+              onClick: handleImport,
+              disabled: !validationResult?.isValid,
+              color: "ios-glass-blue",
+              size: "sm",
+              "data-testid": "import-confirm-button",
+              children: [
+                /* @__PURE__ */ jsx(ArrowUpTrayIcon, { className: "h-4 w-4" }),
+                translations("import")
+              ]
+            }
+          )
+        ] })
+      ] })
+    }
+  );
+}
+
+// src/astrlabe/store/selectors.ts
+var useCanUndo = () => useWorkflowStore((state) => state.past.length > 0);
+var useCanRedo = () => useWorkflowStore((state) => state.future.length > 0);
+var useHasCopied = () => useWorkflowStore((state) => state.clipboard !== null);
+var useContextMenu = () => useWorkflowStore((state) => state.contextMenu);
+var useEditingNodeId = () => useWorkflowStore((state) => state.editingNodeId);
+var useSelectedNodeCount = () => useWorkflowStore((state) => state.nodes.filter((node) => node.selected).length);
+var useIsRunning = () => useWorkflowStore((state) => state.isRunning);
+var useNodeResults = () => useWorkflowStore((state) => state.nodeResults);
+var DEFAULT_MAX_HISTORY = 50;
+function useUndoRedo(nodes, edges, setNodes, setEdges, maxHistory = DEFAULT_MAX_HISTORY) {
+  const pastRef = useRef([]);
+  const futureRef = useRef([]);
+  const pastLengthRef = useRef(0);
+  const futureLengthRef = useRef(0);
+  const takeSnapshot = useCallback(() => {
+    const snapshot = {
+      nodes: nodes.map((node) => ({ ...node, data: { ...node.data } })),
+      edges: edges.map((edge) => ({ ...edge }))
+    };
+    pastRef.current = [...pastRef.current.slice(-(maxHistory - 1)), snapshot];
+    pastLengthRef.current = pastRef.current.length;
+    futureRef.current = [];
+    futureLengthRef.current = 0;
+  }, [nodes, edges, maxHistory]);
+  const undo = useCallback(() => {
+    const past = pastRef.current;
+    if (past.length === 0) return;
+    const previous = past[past.length - 1];
+    const remaining = past.slice(0, -1);
+    const currentSnapshot = {
+      nodes: nodes.map((node) => ({ ...node, data: { ...node.data } })),
+      edges: edges.map((edge) => ({ ...edge }))
+    };
+    pastRef.current = remaining;
+    pastLengthRef.current = remaining.length;
+    futureRef.current = [...futureRef.current, currentSnapshot];
+    futureLengthRef.current = futureRef.current.length;
+    setNodes(previous.nodes);
+    setEdges(previous.edges);
+  }, [nodes, edges, setNodes, setEdges]);
+  const redo = useCallback(() => {
+    const future = futureRef.current;
+    if (future.length === 0) return;
+    const next = future[future.length - 1];
+    const remaining = future.slice(0, -1);
+    const currentSnapshot = {
+      nodes: nodes.map((node) => ({ ...node, data: { ...node.data } })),
+      edges: edges.map((edge) => ({ ...edge }))
+    };
+    futureRef.current = remaining;
+    futureLengthRef.current = remaining.length;
+    pastRef.current = [...pastRef.current, currentSnapshot];
+    pastLengthRef.current = pastRef.current.length;
+    setNodes(next.nodes);
+    setEdges(next.edges);
+  }, [nodes, edges, setNodes, setEdges]);
+  return {
+    undo,
+    redo,
+    canUndo: pastRef.current.length > 0,
+    canRedo: futureRef.current.length > 0,
+    takeSnapshot
+  };
+}
+var PASTE_OFFSET = 40;
+function useClipboard(nodes, edges, setNodes, setEdges, takeSnapshot) {
+  const clipboardRef = useRef(null);
+  const copy = useCallback(() => {
+    const selectedNodes = nodes.filter((node) => node.selected);
+    if (selectedNodes.length === 0) return;
+    const selectedNodeIds = new Set(selectedNodes.map((node) => node.id));
+    const internalEdges = edges.filter(
+      (edge) => selectedNodeIds.has(edge.source) && selectedNodeIds.has(edge.target)
+    );
+    clipboardRef.current = {
+      nodes: selectedNodes.map((node) => ({ ...node, data: { ...node.data } })),
+      edges: internalEdges.map((edge) => ({ ...edge }))
+    };
+  }, [nodes, edges]);
+  const paste = useCallback(() => {
+    const clipboard = clipboardRef.current;
+    if (!clipboard || clipboard.nodes.length === 0) return;
+    takeSnapshot();
+    const idMapping = /* @__PURE__ */ new Map();
+    clipboard.nodes.forEach((node) => {
+      idMapping.set(node.id, crypto.randomUUID());
+    });
+    const pastedNodes = clipboard.nodes.map((node) => ({
+      ...node,
+      id: idMapping.get(node.id) ?? crypto.randomUUID(),
+      position: {
+        x: node.position.x + PASTE_OFFSET,
+        y: node.position.y + PASTE_OFFSET
+      },
+      selected: true,
+      data: { ...node.data }
+    }));
+    const pastedEdges = clipboard.edges.map((edge) => ({
+      ...edge,
+      id: crypto.randomUUID(),
+      source: idMapping.get(edge.source) ?? edge.source,
+      target: idMapping.get(edge.target) ?? edge.target
+    }));
+    setNodes((currentNodes) => [
+      ...currentNodes.map((node) => ({ ...node, selected: false })),
+      ...pastedNodes
+    ]);
+    setEdges((currentEdges) => [...currentEdges, ...pastedEdges]);
+    clipboardRef.current = {
+      nodes: pastedNodes.map((node) => ({ ...node, data: { ...node.data } })),
+      edges: pastedEdges.map((edge) => ({ ...edge }))
+    };
+  }, [setNodes, setEdges, takeSnapshot]);
+  return {
+    copy,
+    paste,
+    hasCopied: clipboardRef.current !== null && clipboardRef.current.nodes.length > 0
+  };
+}
+var INPUT_TAGS = /* @__PURE__ */ new Set(["INPUT", "TEXTAREA", "SELECT"]);
+function isInputFocused() {
+  const activeElement = document.activeElement;
+  if (!activeElement) return false;
+  return INPUT_TAGS.has(activeElement.tagName) || activeElement.isContentEditable;
+}
+function useCanvasShortcuts({
+  undo,
+  redo,
+  copy,
+  paste,
+  canUndo,
+  canRedo,
+  selectAll,
+  fitView
+}) {
+  useEffect(() => {
+    function handleKeyDown(event) {
+      if (isInputFocused()) return;
+      const isModifierPressed = event.metaKey || event.ctrlKey;
+      if (!isModifierPressed) {
+        if (event.key === "Escape") {
+          selectAll();
+          return;
+        }
+        return;
+      }
+      switch (event.key.toLowerCase()) {
+        case "z": {
+          if (event.shiftKey) {
+            if (canRedo) {
+              event.preventDefault();
+              redo();
+            }
+          } else {
+            if (canUndo) {
+              event.preventDefault();
+              undo();
+            }
+          }
+          break;
+        }
+        case "y": {
+          if (canRedo) {
+            event.preventDefault();
+            redo();
+          }
+          break;
+        }
+        case "c": {
+          event.preventDefault();
+          copy();
+          break;
+        }
+        case "v": {
+          event.preventDefault();
+          paste();
+          break;
+        }
+        case "a": {
+          event.preventDefault();
+          selectAll();
+          break;
+        }
+        case "f": {
+          if (event.shiftKey) {
+            event.preventDefault();
+            fitView();
+          }
+          break;
+        }
+      }
+    }
+    document.addEventListener("keydown", handleKeyDown);
+    return () => {
+      document.removeEventListener("keydown", handleKeyDown);
+    };
+  }, [undo, redo, copy, paste, canUndo, canRedo, selectAll, fitView]);
+}
+var ALIGNMENT_THRESHOLD = 5;
+var DEFAULT_NODE_WIDTH = 200;
+var DEFAULT_NODE_HEIGHT = 60;
+function getNodeBounds(node) {
+  const width = node.measured?.width ?? node.width ?? DEFAULT_NODE_WIDTH;
+  const height = node.measured?.height ?? node.height ?? DEFAULT_NODE_HEIGHT;
+  return {
+    left: node.position.x,
+    centerX: node.position.x + width / 2,
+    right: node.position.x + width,
+    top: node.position.y,
+    centerY: node.position.y + height / 2,
+    bottom: node.position.y + height
+  };
+}
+function findAlignments(dragBounds, otherNodes) {
+  let closestHorizontal = null;
+  let closestVertical = null;
+  let minHorizontalDistance = ALIGNMENT_THRESHOLD + 1;
+  let minVerticalDistance = ALIGNMENT_THRESHOLD + 1;
+  for (const otherNode of otherNodes) {
+    const otherBounds = getNodeBounds(otherNode);
+    const verticalChecks = [
+      { dragValue: dragBounds.left, otherValue: otherBounds.left },
+      { dragValue: dragBounds.left, otherValue: otherBounds.centerX },
+      { dragValue: dragBounds.left, otherValue: otherBounds.right },
+      { dragValue: dragBounds.centerX, otherValue: otherBounds.left },
+      { dragValue: dragBounds.centerX, otherValue: otherBounds.centerX },
+      { dragValue: dragBounds.centerX, otherValue: otherBounds.right },
+      { dragValue: dragBounds.right, otherValue: otherBounds.left },
+      { dragValue: dragBounds.right, otherValue: otherBounds.centerX },
+      { dragValue: dragBounds.right, otherValue: otherBounds.right }
+    ];
+    for (const check of verticalChecks) {
+      const distance = Math.abs(check.dragValue - check.otherValue);
+      if (distance <= ALIGNMENT_THRESHOLD && distance < minVerticalDistance) {
+        minVerticalDistance = distance;
+        closestVertical = check.otherValue;
+      }
+    }
+    const horizontalChecks = [
+      { dragValue: dragBounds.top, otherValue: otherBounds.top },
+      { dragValue: dragBounds.top, otherValue: otherBounds.centerY },
+      { dragValue: dragBounds.top, otherValue: otherBounds.bottom },
+      { dragValue: dragBounds.centerY, otherValue: otherBounds.top },
+      { dragValue: dragBounds.centerY, otherValue: otherBounds.centerY },
+      { dragValue: dragBounds.centerY, otherValue: otherBounds.bottom },
+      { dragValue: dragBounds.bottom, otherValue: otherBounds.top },
+      { dragValue: dragBounds.bottom, otherValue: otherBounds.centerY },
+      { dragValue: dragBounds.bottom, otherValue: otherBounds.bottom }
+    ];
+    for (const check of horizontalChecks) {
+      const distance = Math.abs(check.dragValue - check.otherValue);
+      if (distance <= ALIGNMENT_THRESHOLD && distance < minHorizontalDistance) {
+        minHorizontalDistance = distance;
+        closestHorizontal = check.otherValue;
+      }
+    }
+  }
+  return { horizontal: closestHorizontal, vertical: closestVertical };
+}
+function useHelpLines() {
+  const [helpLines, setHelpLines] = useState({
+    horizontal: null,
+    vertical: null
+  });
+  const createDragHandler = useCallback(
+    (allNodes) => (_event, draggedNode, draggedNodes) => {
+      const draggingNodeIds = new Set(
+        draggedNodes.length > 0 ? draggedNodes.map((node) => node.id) : [draggedNode.id]
+      );
+      const dragBounds = getNodeBounds(draggedNode);
+      const otherNodes = allNodes.filter((node) => !draggingNodeIds.has(node.id));
+      setHelpLines(findAlignments(dragBounds, otherNodes));
+    },
+    []
+  );
+  const onNodeDragStop = useCallback(() => {
+    setHelpLines({ horizontal: null, vertical: null });
+  }, []);
+  return {
+    helpLines,
+    createDragHandler,
+    onNodeDragStop
+  };
+}
+
+export { AgentModal, AmazonNovaIcon, AnthropicModelIcon, AutoSaveWorkspace, DslExportModal, DslImportModal, DynamicIslandConfirm2 as DynamicIslandConfirm, MetaLlamaIcon, NodePalette, OutputSchemaBuilder, PipelineSettingsModal, PreviewPanel, RULE_STATUS_OPTIONS, RuleActionBuilder, RuleConditionBuilder, RuleForm, RunInputDialog, RunPanel, RunReplayModal, SaveStatusBadge, SubworkflowModal, TIMEZONE_OPTIONS, VariableInspector, VersionHistoryPanel, WorkflowListBar, defaultAgentOutputSchema, defaultRuleAction, defaultRuleCondition, defaultRuleForm, getModelIcon, useCanRedo, useCanUndo, useCanvasShortcuts, useClipboard, useContextMenu, useEditingNodeId, useHasCopied, useHelpLines, useIsRunning, useNodeResults, useSelectedNodeCount, useSubworkflowStore, useUndoRedo };
+//# sourceMappingURL=chunk-HAZP5J67.mjs.map
+//# sourceMappingURL=chunk-HAZP5J67.mjs.map