@datatechsolutions/ui 3.3.0 → 3.5.0

package/dist/{chunk-2WXRRQM3.mjs → chunk-2MJAHST4.mjs}

@@ -1,14 +1,100 @@
 "use client";
-import { NodeRunningIndicator, WorkflowHandle, NodeInteractiveCard, NodeCardHeader, NodeIconBubble, NodeCardMeta, NodeCardBadge, NodeCardDeleteAction, Workspace, useModalStore, CATEGORY_COLORS, CATEGORY_PILL_COLORS, ICON_MAP, WorkflowCanvas, EXPERIMENTAL_NODE_TYPES, getEntityIcon, getEntityGradient, useWorkflowStore, LOGIC_ICON_MAP, LOGIC_NODE_GRADIENTS, getFrameworkMeta, getCompatibleModels, isModelCompatibleWithFramework, FRAMEWORK_META, isFrameworkCompatibleWithProviders } from './chunk-PCYL4MII.mjs';
-import { Button, FormInput, FormSelect, GlassModal, FormTextarea, Badge, FormGrid, ToggleSwitch, Input, DynamicIslandConfirm } from './chunk-JN6IL6OH.mjs';
+import { NodeRunningIndicator, WorkflowHandle, NodeCard, NodeCardHeader, NodeCardMeta, NodeCardBadge, NodeInteractiveCard, NodeIconBubble, NodeCardDeleteAction, Workspace, useModalStore, CATEGORY_COLORS, CATEGORY_PILL_COLORS, ICON_MAP, WorkflowCanvas, EXPERIMENTAL_NODE_TYPES, getEntityIcon, getEntityGradient, useWorkflowStore, LOGIC_ICON_MAP, LOGIC_NODE_GRADIENTS, getFrameworkMeta, getCompatibleModels, isModelCompatibleWithFramework, FRAMEWORK_META, isFrameworkCompatibleWithProviders } from './chunk-OASC7NYV.mjs';
+import { Button, FormInput, FormSelect, Avatar, ToggleSwitch, HeroBlock, GlassModal, SectionCard, FormTextarea, Badge, FormGrid, Input, DynamicIslandConfirm } from './chunk-NOHHZ6FM.mjs';
 import { useTranslations } from './chunk-7VJ7CMMT.mjs';
 import { getAgentTier, createDefaultLogicNodeConfig } from './chunk-G7JQ4OCE.mjs';
 import { memo, useCallback, useMemo, useState, useEffect, useRef, Children } from 'react';
 import { Position } from '@xyflow/react';
-import { CloudArrowUpIcon, UserCircleIcon, Cog6ToothIcon, SparklesIcon, CommandLineIcon, KeyIcon, PlayCircleIcon, CpuChipIcon, ArrowPathRoundedSquareIcon, ArrowsPointingOutIcon, ArrowsPointingInIcon, BoltIcon, ClockIcon, CheckIcon, ArrowPathIcon, MinusCircleIcon, XCircleIcon, CheckCircleIcon, ExclamationTriangleIcon, AdjustmentsHorizontalIcon, CircleStackIcon, TrashIcon, PlusIcon, XMarkIcon, EyeIcon, PlayIcon, StopIcon, VariableIcon, ChevronDownIcon, ChevronRightIcon, ExclamationCircleIcon, ClipboardDocumentIcon, ArrowDownTrayIcon, ArrowUpTrayIcon } from '@heroicons/react/24/outline';
+import { ExclamationTriangleIcon, KeyIcon, CloudArrowUpIcon, Cog6ToothIcon, SparklesIcon, WrenchScrewdriverIcon, CpuChipIcon, ArrowPathRoundedSquareIcon, ArrowsPointingOutIcon, ArrowsPointingInIcon, BoltIcon, ClockIcon, CheckIcon, ArrowPathIcon, MinusCircleIcon, XCircleIcon, CheckCircleIcon, AdjustmentsHorizontalIcon, CircleStackIcon, TrashIcon, PlusIcon, XMarkIcon, EyeIcon, PlayIcon, StopIcon, VariableIcon, ChevronDownIcon, ChevronRightIcon, ExclamationCircleIcon, ClipboardDocumentIcon, ArrowDownTrayIcon, ArrowUpTrayIcon, CommandLineIcon } from '@heroicons/react/24/outline';
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import { create } from 'zustand';
 
+var SI = (slug, color) => `https://cdn.simpleicons.org/${slug}/${color}`;
+var PROVIDER_LOGOS = {
+  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"),
+  groq: SI("groq", "000000"),
+  mistral: SI("mistralai", "FF7000"),
+  huggingface: SI("huggingface", "FFD21E"),
+  ollama: SI("ollama", "FFFFFF")
+};
+var PROVIDER_TYPE_LABELS = {
+  aws_bedrock: "AWS Bedrock",
+  openai_api: "OpenAI API",
+  google_vertex: "Google Vertex AI",
+  azure_openai: "Azure OpenAI",
+  anthropic_api: "Anthropic API",
+  groq: "Groq Cloud",
+  mistral: "Mistral AI",
+  huggingface: "Hugging Face",
+  ollama: "Ollama (Local)",
+  custom: "Custom"
+};
+var ModelProviderFlowNode = memo(function ModelProviderFlowNode2({ id, data, selected }) {
+  const config = data.config;
+  const isCompact = data.displayMode === "compact";
+  if (!config) {
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(NodeRunningIndicator, { nodeId: id }),
+      /* @__PURE__ */ jsx(WorkflowHandle, { type: "target", position: Position.Left, id: "left-in", colorClass: "!bg-gray-400 dark:!bg-gray-500" }),
+      /* @__PURE__ */ jsx(WorkflowHandle, { type: "target", position: Position.Top, id: "top-in", colorClass: "!bg-gray-400 dark:!bg-gray-500" }),
+      /* @__PURE__ */ jsx(NodeCard, { variant: "error", nodeType: "model_provider", width: "w-[280px]", children: /* @__PURE__ */ jsx(
+        NodeCardHeader,
+        {
+          icon: /* @__PURE__ */ jsx(ExclamationTriangleIcon, { className: "h-6 w-6 text-white" }),
+          title: data.label || "Model Provider",
+          description: "Not configured",
+          iconClassName: "flex h-11 w-11 items-center justify-center rounded-xl bg-gradient-to-br from-amber-400 to-orange-500 shadow-lg"
+        }
+      ) }),
+      /* @__PURE__ */ jsx(WorkflowHandle, { type: "source", position: Position.Right, id: "right-out", colorClass: "!bg-slate-500" }),
+      /* @__PURE__ */ jsx(WorkflowHandle, { type: "source", position: Position.Bottom, id: "bottom-out", colorClass: "!bg-slate-500" })
+    ] });
+  }
+  const providerLabel = PROVIDER_TYPE_LABELS[config.providerType] ?? config.providerType;
+  const displayName = config.name || providerLabel;
+  const regionLabel = config.region ? config.region : void 0;
+  const isConfigured = !!(config.credentialRef || config.apiKeyRef);
+  const logo = PROVIDER_LOGOS[config.providerType];
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(NodeRunningIndicator, { nodeId: id }),
+    /* @__PURE__ */ jsx(WorkflowHandle, { type: "target", position: Position.Left, id: "left-in", colorClass: "!bg-gray-400 dark:!bg-gray-500" }),
+    /* @__PURE__ */ jsx(WorkflowHandle, { type: "target", position: Position.Top, id: "top-in", colorClass: "!bg-gray-400 dark:!bg-gray-500" }),
+    /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        onClick: () => data.onEdit?.(id),
+        className: "w-full text-left",
+        children: /* @__PURE__ */ jsxs(NodeCard, { compact: isCompact, selected, nodeType: "model_provider", width: "w-[280px]", children: [
+          /* @__PURE__ */ jsx(
+            NodeCardHeader,
+            {
+              icon: logo ? /* @__PURE__ */ jsx("img", { src: logo, alt: providerLabel, className: "h-6 w-6 object-contain", loading: "lazy" }) : /* @__PURE__ */ jsx(KeyIcon, { className: "h-6 w-6 text-white" }),
+              title: displayName,
+              description: providerLabel,
+              iconClassName: `flex h-11 w-11 items-center justify-center rounded-xl shadow-lg ${logo ? "bg-white/10 dark:bg-white/5 p-2" : "bg-gradient-to-br from-slate-600 to-slate-700 p-1.5"}`
+            }
+          ),
+          /* @__PURE__ */ jsx(NodeCardMeta, { compact: isCompact, children: /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-1.5", children: [
+            /* @__PURE__ */ jsx(NodeCardBadge, { className: "rounded-full bg-slate-100 px-2 py-0.5 text-[10px] font-semibold text-slate-700 dark:bg-slate-500/20 dark:text-slate-300", children: providerLabel }),
+            regionLabel && /* @__PURE__ */ jsx(NodeCardBadge, { className: "rounded-full bg-gray-100 px-2 py-0.5 text-[10px] font-medium text-gray-600 dark:bg-white/10 dark:text-gray-300", children: regionLabel }),
+            /* @__PURE__ */ jsx(NodeCardBadge, { className: `rounded-full px-2 py-0.5 text-[10px] font-medium ${isConfigured ? "bg-green-100 text-green-700 dark:bg-green-500/20 dark:text-green-300" : "bg-amber-100 text-amber-700 dark:bg-amber-500/20 dark:text-amber-300"}`, children: isConfigured ? "Configured" : "Setup needed" }),
+            config.modelFilter && config.modelFilter.length > 0 && /* @__PURE__ */ jsxs(NodeCardBadge, { className: "rounded-full bg-gray-100 px-2 py-0.5 text-[10px] font-medium text-gray-600 dark:bg-white/10 dark:text-gray-300", children: [
+              config.modelFilter.length,
+              " models"
+            ] })
+          ] }) })
+        ] })
+      }
+    ),
+    /* @__PURE__ */ jsx(WorkflowHandle, { type: "source", position: Position.Right, id: "right-out", colorClass: "!bg-slate-500" }),
+    /* @__PURE__ */ jsx(WorkflowHandle, { type: "source", position: Position.Bottom, id: "bottom-out", colorClass: "!bg-slate-500" })
+  ] });
+});
 var S3WriteFlowNode = memo(function S3WriteFlowNode2({ id, data, selected }) {
   const t = useTranslations("agents.workflow");
   const { config, label, onDelete, onEdit } = data;
@@ -296,94 +382,6 @@ function rowsToSchema(rows) {
 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" },
@@ -410,8 +408,20 @@ function getProviderFromModelId(modelId) {
   if (modelId.startsWith("anthropic.")) return "anthropic";
   if (modelId.startsWith("amazon.")) return "amazon";
   if (modelId.startsWith("meta.")) return "meta";
+  if (modelId.startsWith("openai.")) return "openai";
+  if (modelId.startsWith("google.")) return "google";
   return "anthropic";
 }
+function getModelFamily(modelId) {
+  return getProviderFromModelId(modelId);
+}
+function findCompatibleProviders(modelId, providers) {
+  const family = getModelFamily(modelId);
+  return providers.filter((p) => {
+    const families = p.servedFamilies ?? [p.provider];
+    return families.includes(family);
+  });
+}
 function getEloTier(elo) {
   if (elo < 1200) return {
     tierKey: "beginner",
@@ -774,138 +784,6 @@ function PromptTab({
     ] })
   ] });
 }
-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: [
@@ -977,143 +855,176 @@ function ToolsTab({ agentTools, enabledToolIds, onToggle, agentFramework, t }) {
     })
   ] });
 }
-function AdvancedTab({
-  displayName,
-  setDisplayName,
-  description,
-  setDescription,
+function EngineTab({
+  agent,
+  models,
+  t,
+  selectedModelId,
+  setSelectedModelId,
+  selectedFramework,
+  setSelectedFramework,
+  temperature,
+  setTemperature,
+  elo,
+  setElo,
   maxOutputTokens,
   setMaxOutputTokens,
   topP,
   setTopP,
   topK,
   setTopK,
-  tags,
-  setTags,
-  status,
-  setStatus,
-  avatarUrl,
-  setAvatarUrl,
-  markDirty,
-  t
+  modelProviders,
+  selectedProviderId,
+  onSelectProvider,
+  markDirty
 }) {
-  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();
-        } })
+  const modelObj = models.find((m) => m.id === selectedModelId);
+  const modelName = modelObj?.name ?? selectedModelId ?? "\u2014";
+  const family = getModelFamily(selectedModelId);
+  const compatibleProviders = findCompatibleProviders(selectedModelId, modelProviders);
+  const configuredCompatible = compatibleProviders.filter((p) => p.configured);
+  const effectiveProvider = compatibleProviders.find((p) => p.id === selectedProviderId) ?? configuredCompatible[0] ?? compatibleProviders[0];
+  const frameworkMeta = getFrameworkMeta(selectedFramework);
+  const inputCard = "liquid-surface w-full rounded-lg px-3 py-1.5 text-sm text-gray-800 outline-none transition-colors focus:ring-1 focus:ring-indigo-300/40 dark:text-gray-200 dark:focus:ring-indigo-500/20";
+  return /* @__PURE__ */ jsx("div", { className: "p-5", children: /* @__PURE__ */ jsxs("div", { className: "overflow-hidden rounded-2xl border border-indigo-500/20 bg-gradient-to-b from-indigo-500/[0.04] via-violet-500/[0.03] to-purple-500/[0.04] dark:border-indigo-400/20 dark:from-indigo-500/[0.10] dark:via-violet-500/[0.06] dark:to-purple-500/[0.08]", children: [
+    /* @__PURE__ */ jsx("div", { className: "px-4 pb-3 pt-4", children: /* @__PURE__ */ jsx(
+      AgentCapabilityCard,
+      {
+        elo,
+        setElo,
+        models,
+        selectedModelId,
+        setSelectedModelId,
+        temperature,
+        setTemperature,
+        onChanged: markDirty,
+        t
+      }
+    ) }),
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 px-4 text-[9px] font-semibold uppercase tracking-wider text-indigo-500/70 dark:text-indigo-400/70", children: [
+      /* @__PURE__ */ jsx("div", { className: "h-px flex-1 bg-gradient-to-r from-transparent via-indigo-500/30 to-transparent" }),
+      /* @__PURE__ */ jsxs("span", { children: [
+        "\u2193 ",
+        t("agentDrawer.derives", { _: "deriva" })
       ] }),
-      /* @__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__ */ jsx("div", { className: "h-px flex-1 bg-gradient-to-r from-transparent via-indigo-500/30 to-transparent" })
     ] }),
-    /* @__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__ */ jsx("div", { className: "px-4 py-3", children: /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between gap-3", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-2", children: [
+        /* @__PURE__ */ jsx(CpuChipIcon, { className: "mt-0.5 h-5 w-5 text-indigo-500 dark:text-indigo-400" }),
+        /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
+          /* @__PURE__ */ jsx("p", { className: "text-sm font-semibold text-gray-900 dark:text-white", children: modelName }),
+          compatibleProviders.length === 0 ? /* @__PURE__ */ jsx("p", { className: "text-[10px] text-amber-600 dark:text-amber-400", children: t("agentDrawer.noProviderForFamily", { _: "Nenhum provedor configurado serve a fam\xEDlia " + family }) }) : configuredCompatible.length > 1 ? /* @__PURE__ */ jsxs("div", { className: "mt-1 flex items-center gap-1.5", children: [
+            /* @__PURE__ */ jsx("span", { className: "text-[10px] text-gray-500 dark:text-gray-400", children: t("agentDrawer.servedVia", { _: "via" }) }),
+            /* @__PURE__ */ jsx(
+              "select",
+              {
+                value: effectiveProvider?.id ?? "",
+                onChange: (event) => {
+                  onSelectProvider(event.target.value);
+                  markDirty();
+                },
+                className: "liquid-surface rounded-md px-2 py-0.5 text-[10px] font-semibold text-gray-900 outline-none focus:ring-1 focus:ring-indigo-300/40 dark:text-white",
+                children: configuredCompatible.map((p) => /* @__PURE__ */ jsx("option", { value: p.id, children: p.name }, p.id))
+              }
+            ),
+            effectiveProvider && /* @__PURE__ */ jsxs("span", { className: `inline-flex items-center gap-1 rounded-full px-1.5 py-0.5 text-[9px] font-semibold ${effectiveProvider.configured ? "bg-emerald-500/10 text-emerald-600 dark:text-emerald-400" : "bg-amber-500/10 text-amber-600 dark:text-amber-400"}`, children: [
+              /* @__PURE__ */ jsx("span", { className: `h-1 w-1 rounded-full ${effectiveProvider.configured ? "bg-emerald-500" : "bg-amber-500"}` }),
+              effectiveProvider.configured ? t("agentDrawer.configured", { _: "connected" }) : t("agentDrawer.setup", { _: "setup" })
+            ] })
+          ] }) : /* @__PURE__ */ jsxs("p", { className: "text-[10px] text-gray-500 dark:text-gray-400", children: [
+            t("agentDrawer.servedVia", { _: "via" }),
+            " ",
+            effectiveProvider?.name ?? family,
+            effectiveProvider && /* @__PURE__ */ jsxs("span", { className: `ml-2 inline-flex items-center gap-1 rounded-full px-1.5 py-0.5 text-[9px] font-semibold ${effectiveProvider.configured ? "bg-emerald-500/10 text-emerald-600 dark:text-emerald-400" : "bg-amber-500/10 text-amber-600 dark:text-amber-400"}`, children: [
+              /* @__PURE__ */ jsx("span", { className: `h-1 w-1 rounded-full ${effectiveProvider.configured ? "bg-emerald-500" : "bg-amber-500"}` }),
+              effectiveProvider.configured ? t("agentDrawer.configured", { _: "connected" }) : t("agentDrawer.setup", { _: "setup" })
+            ] })
+          ] })
+        ] })
       ] }),
-      /* @__PURE__ */ 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("span", { className: `inline-flex shrink-0 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__ */ jsxs("details", { className: "group border-t border-indigo-500/15 bg-white/30 px-4 py-2.5 dark:border-indigo-400/15 dark:bg-white/[0.02]", children: [
+      /* @__PURE__ */ jsxs("summary", { className: "flex cursor-pointer items-center gap-2 text-[10px] font-semibold uppercase tracking-wider text-gray-500 dark:text-gray-400", children: [
+        /* @__PURE__ */ jsx(Cog6ToothIcon, { className: "h-3 w-3" }),
+        /* @__PURE__ */ jsx("span", { children: t("agentDrawer.overrideDerivation", { _: "Override \xB7 ajustes avan\xE7ados" }) }),
+        /* @__PURE__ */ jsx("span", { className: "ml-auto font-normal text-gray-400 group-open:hidden", children: "\u25BE" }),
+        /* @__PURE__ */ jsx("span", { className: "ml-auto hidden font-normal text-gray-400 group-open:inline", children: "\u25B4" })
       ] }),
-      /* @__PURE__ */ jsxs("label", { children: [
-        /* @__PURE__ */ jsx("span", { className: labelCls, children: t("agentDrawer.topK", { _: "Top-k" }) }),
+      /* @__PURE__ */ jsx("p", { className: "mt-1 text-[10px] italic text-gray-400 dark:text-gray-500", children: t("agentDrawer.overrideHint", { _: "Mude framework, modelo manual ou tokens s\xF3 se a deriva\xE7\xE3o por ELO n\xE3o atender." }) }),
+      /* @__PURE__ */ jsxs("div", { className: "mt-3 space-y-4", children: [
         /* @__PURE__ */ jsx(
-          "input",
+          ConfigTab,
           {
-            type: "number",
-            min: 0,
-            max: 500,
-            className: wrap,
-            value: topK,
-            onChange: (e) => {
-              setTopK(Number(e.target.value) || 0);
-              touch();
-            }
+            models,
+            t,
+            selectedModelId,
+            setSelectedModelId,
+            selectedFramework,
+            setSelectedFramework,
+            markDirty,
+            connectedProviderTypes: modelProviders.map((p) => p.provider)
           }
-        )
+        ),
+        /* @__PURE__ */ jsxs("div", { children: [
+          /* @__PURE__ */ jsx("p", { className: "mb-2 text-[10px] font-semibold uppercase tracking-wider text-gray-500 dark:text-gray-400", children: t("agentDrawer.generationParams", { _: "Par\xE2metros de gera\xE7\xE3o" }) }),
+          /* @__PURE__ */ jsx("div", { className: "grid grid-cols-3 gap-2", children: [
+            { key: "max", labelKey: "agentDrawer.maxOutputTokens", label: "Max output", value: maxOutputTokens, setter: setMaxOutputTokens, step: 1, min: 1, max: 32768 },
+            { key: "topP", labelKey: "agentDrawer.topP", label: "Top-p", value: topP, setter: setTopP, step: 0.05, min: 0, max: 1 },
+            { key: "topK", labelKey: "agentDrawer.topK", label: "Top-k", value: topK, setter: setTopK, step: 1, min: 0, max: 500 }
+          ].map((field) => /* @__PURE__ */ jsxs("div", { className: `${inputCard} flex flex-col items-center !py-2`, children: [
+            /* @__PURE__ */ jsx("span", { className: "text-[8px] font-semibold uppercase tracking-wider text-gray-500 dark:text-gray-400", children: t(field.labelKey, { _: field.label }) }),
+            /* @__PURE__ */ jsx(
+              "input",
+              {
+                type: "number",
+                step: field.step,
+                min: field.min,
+                max: field.max,
+                value: field.value,
+                onChange: (event) => {
+                  field.setter(Number(event.target.value) || 0);
+                  markDirty();
+                },
+                className: "w-full bg-transparent text-center text-sm font-semibold tabular-nums text-gray-900 outline-none dark:text-white"
+              }
+            )
+          ] }, field.key)) })
+        ] }),
+        modelProviders.length > 0 && /* @__PURE__ */ jsxs("div", { children: [
+          /* @__PURE__ */ jsxs("div", { className: "mb-2 flex items-center justify-between", children: [
+            /* @__PURE__ */ jsx("p", { className: "text-[10px] font-semibold uppercase tracking-wider text-gray-500 dark:text-gray-400", children: t("agentDrawer.providerCredentials", { _: "Credenciais do provedor" }) }),
+            /* @__PURE__ */ jsx(
+              "a",
+              {
+                href: "/settings/integrations",
+                className: "text-[10px] font-medium text-indigo-600 hover:text-indigo-700 dark:text-indigo-400 dark:hover:text-indigo-300",
+                children: t("agentDrawer.manageCredentials", { _: "Gerenciar \u2192" })
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsx("div", { className: "space-y-1", children: modelProviders.map((provider) => /* @__PURE__ */ jsxs(
+            "div",
+            {
+              className: "flex items-center gap-2 rounded-lg border border-gray-200/50 bg-white/40 px-3 py-1.5 dark:border-white/10 dark:bg-white/[0.03]",
+              children: [
+                /* @__PURE__ */ jsx(KeyIcon, { className: "h-3 w-3 shrink-0 text-gray-500 dark:text-gray-400" }),
+                /* @__PURE__ */ jsx("span", { className: "text-[11px] font-semibold text-gray-900 dark:text-white", children: provider.name }),
+                /* @__PURE__ */ jsx("span", { className: `shrink-0 rounded-full px-1.5 py-0.5 text-[8px] font-semibold uppercase ${provider.configured ? "bg-emerald-500/10 text-emerald-600 dark:text-emerald-400" : "bg-amber-500/10 text-amber-600 dark:text-amber-400"}`, children: provider.configured ? t("agentDrawer.configured", { _: "connected" }) : t("agentDrawer.setup", { _: "setup" }) }),
+                provider.apiKeyMasked && /* @__PURE__ */ jsx("span", { className: "ml-auto truncate font-mono text-[9px] text-gray-400 dark:text-gray-500", title: provider.credentialRef, children: provider.apiKeyMasked })
+              ]
+            },
+            provider.id
+          )) }),
+          /* @__PURE__ */ jsx("p", { className: "mt-2 text-[10px] text-gray-400 dark:text-gray-500", children: selectedProviderId ? "" : t("agentDrawer.providerHint", { _: "Credenciais s\xE3o configuradas no n\xEDvel da conta. Aqui voc\xEA s\xF3 confere o que est\xE1 conectado." }) })
+        ] })
       ] })
-    ] }),
-    /* @__PURE__ */ 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");
@@ -1125,7 +1036,7 @@ function AgentModal({ onSaved, onPersist }) {
   const models = agentData?.models ?? [];
   const availableAgentTools = agentData?.agentTools ?? [];
   const isCreateMode = agentData?.isCreateMode ?? false;
-  const [activeTab, setActiveTab] = useState("profile");
+  const [activeTab, setActiveTab] = useState("config");
   const [selectedModelId, setSelectedModelId] = useState("");
   const [selectedFramework, setSelectedFramework] = useState("custom");
   const [temperature, setTemperature] = useState(0.7);
@@ -1153,7 +1064,7 @@ function AgentModal({ onSaved, onPersist }) {
     setTemperature(agent.temperature ?? 0.7);
     setElo(Number(agent.elo ?? 1e3));
     setSaved(!isCreateMode);
-    setActiveTab("profile");
+    setActiveTab("config");
     const agentToolIds = agent.agentToolIds;
     setEnabledToolIds(new Set(agentToolIds ?? availableAgentTools.filter((t2) => t2.enabled).map((t2) => t2.agentToolId)));
     setSelectedProviderId(agent.modelProviderId ?? "");
@@ -1226,7 +1137,6 @@ function AgentModal({ onSaved, onPersist }) {
       setPersisting(true);
       if (onPersist) await onPersist(payload);
       markSaved();
-      onSaved?.();
     } catch (error) {
       console.error("[AgentModal] onPersist failed", error);
     } finally {
@@ -1254,113 +1164,209 @@ function AgentModal({ onSaved, onPersist }) {
     onSaved,
     onPersist
   ]);
+  useEffect(() => {
+    if (!dirty || persisting) return;
+    const handle = setTimeout(() => {
+      void handleMarkSaved();
+    }, 700);
+    return () => clearTimeout(handle);
+  }, [dirty, persisting, handleMarkSaved]);
   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 sections = [];
   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") }) }),
+  const fieldCard = "liquid-surface w-full rounded-lg px-2.5 py-1.5 text-xs text-gray-800 outline-none transition-colors focus:ring-1 focus:ring-indigo-300/40 dark:text-gray-200 dark:focus:ring-indigo-500/20";
+  const fieldLabel = "text-[9px] font-semibold uppercase tracking-wider text-slate-500 dark:text-slate-400";
+  const avatarInitial = (displayName || agent.name).charAt(0).toUpperCase();
+  const avatarNode = /* @__PURE__ */ jsx(
+    Avatar,
+    {
+      src: effectiveAvatarUrl || void 0,
+      alt: displayName || agent.name,
+      initials: effectiveAvatarUrl ? void 0 : avatarInitial,
+      tone: effectiveAvatarUrl ? void 0 : "indigo",
+      className: "size-12"
+    }
+  );
+  const statusPill = /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5", children: [
+    /* @__PURE__ */ jsx("span", { className: `text-[9px] font-semibold ${status === "active" ? "text-emerald-600 dark:text-emerald-400" : "text-slate-500"}`, children: status === "active" ? t("agentDrawer.statusActive", { _: "Active" }) : t("agentDrawer.statusInactive", { _: "Inactive" }) }),
     /* @__PURE__ */ jsx(
-      "button",
+      ToggleSwitch,
       {
-        type: "button",
-        onClick: () => {
-          void handleMarkSaved();
+        size: "sm",
+        color: "green",
+        checked: status === "active",
+        onChange: (checked) => {
+          setStatus(checked ? "active" : "draft");
+          markDirty();
         },
-        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")
+        label: t("agentDrawer.status", { _: "Status" })
       }
     )
   ] });
-  return /* @__PURE__ */ jsxs(
+  const identityCard = /* @__PURE__ */ jsx("div", { className: "liquid-surface rounded-2xl p-3 ring-1 ring-slate-200/50 dark:ring-white/10", children: /* @__PURE__ */ jsx(
+    HeroBlock,
+    {
+      icon: avatarNode,
+      iconBackground: "none",
+      iconSize: "lg",
+      headingLevel: "h2",
+      title: displayName,
+      onTitleChange: (next) => {
+        setDisplayName(next);
+        markDirty();
+      },
+      titlePlaceholder: agent.name,
+      subtitle: agent.role,
+      rightContent: statusPill,
+      children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", children: [
+        /* @__PURE__ */ jsxs("label", { className: "flex flex-col gap-1", children: [
+          /* @__PURE__ */ jsx("span", { className: fieldLabel, children: t("agentDrawer.description", { _: "Description" }) }),
+          /* @__PURE__ */ jsx(
+            "textarea",
+            {
+              rows: 2,
+              value: description,
+              onChange: (event) => {
+                setDescription(event.target.value);
+                markDirty();
+              },
+              placeholder: t("agentDrawer.descriptionPlaceholder", { _: "What this agent does, which tasks it's good at" }),
+              className: `${fieldCard} resize-none`
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs("label", { className: "flex flex-col gap-1", children: [
+          /* @__PURE__ */ jsx("span", { className: fieldLabel, children: t("agentDrawer.tags", { _: "Tags" }) }),
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              type: "text",
+              value: tagsText,
+              onChange: (event) => {
+                setTagsText(event.target.value);
+                markDirty();
+              },
+              placeholder: t("agentDrawer.tagsPlaceholder", { _: "pricing, research, internal" }),
+              className: fieldCard
+            }
+          )
+        ] })
+      ] })
+    }
+  ) });
+  const autosaveLabel = persisting ? t("agentDrawer.saving", { _: "Saving\u2026" }) : dirty ? t("agentDrawer.pendingAutosave", { _: "Saving in a moment\u2026" }) : t("agentDrawer.autoSaved", { _: "Auto-saved" });
+  const autosaveColor = persisting ? "text-indigo-500 dark:text-indigo-400" : dirty ? "text-amber-500 dark:text-amber-400" : "text-emerald-500 dark:text-emerald-400";
+  const sidebarFooter = /* @__PURE__ */ jsxs("div", { role: "status", "aria-live": "polite", className: "flex items-center gap-1.5 px-1 py-2 text-xs", children: [
+    /* @__PURE__ */ jsx("span", { className: `relative inline-flex h-1.5 w-1.5 shrink-0 rounded-full ${persisting ? "bg-indigo-500" : dirty ? "bg-amber-500" : "bg-emerald-500"}`, children: persisting && /* @__PURE__ */ jsx(
+      "span",
+      {
+        "aria-hidden": "true",
+        className: "absolute inset-0 motion-safe:animate-ping rounded-full bg-indigo-500/60"
+      }
+    ) }),
+    /* @__PURE__ */ jsx("span", { className: `font-medium ${autosaveColor}`, children: autosaveLabel })
+  ] });
+  return /* @__PURE__ */ jsx(
     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" }),
+      icon: /* @__PURE__ */ jsx(CpuChipIcon, { className: "h-5 w-5 text-slate-700 dark: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
-        },
+        identityCard,
         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,
+      children: /* @__PURE__ */ jsxs("div", { className: "space-y-5", children: [
+        /* @__PURE__ */ jsx(
+          SectionCard,
           {
-            agent,
-            temperature,
-            setTemperature,
-            markDirty,
-            t,
-            promptText: systemPrompt,
-            setPromptText: setSystemPrompt,
-            outputSchema,
-            setOutputSchema
+            variant: "glass",
+            padded: false,
+            collapsible: true,
+            defaultOpen: true,
+            header: {
+              icon: /* @__PURE__ */ jsx(Cog6ToothIcon, { className: "h-5 w-5 text-slate-700 dark:text-white" }),
+              title: t("agentDrawer.engineTab"),
+              subtitle: t("agentDrawer.engineSubtitle", { _: "Como o agente roda \u2014 capacidade, modelo, credenciais" })
+            },
+            children: /* @__PURE__ */ jsx(
+              EngineTab,
+              {
+                agent,
+                models,
+                t,
+                selectedModelId,
+                setSelectedModelId,
+                selectedFramework,
+                setSelectedFramework: (fw) => setSelectedFramework(fw),
+                temperature,
+                setTemperature,
+                elo,
+                setElo,
+                maxOutputTokens,
+                setMaxOutputTokens,
+                topP,
+                setTopP,
+                topK,
+                setTopK,
+                modelProviders: availableModelProviders,
+                selectedProviderId,
+                onSelectProvider: handleSelectProvider,
+                markDirty
+              }
+            )
           }
         ),
-        activeTab === "advanced" && /* @__PURE__ */ jsx(
-          AdvancedTab,
+        /* @__PURE__ */ jsx(
+          SectionCard,
           {
-            displayName,
-            setDisplayName,
-            description,
-            setDescription,
-            maxOutputTokens,
-            setMaxOutputTokens,
-            topP,
-            setTopP,
-            topK,
-            setTopK,
-            tags: tagsText,
-            setTags: setTagsText,
-            status,
-            setStatus,
-            avatarUrl,
-            setAvatarUrl: setAvatarUrlState,
-            markDirty,
-            t
+            variant: "glass",
+            padded: false,
+            collapsible: true,
+            defaultOpen: true,
+            header: {
+              icon: /* @__PURE__ */ jsx(SparklesIcon, { className: "h-5 w-5 text-slate-700 dark:text-white" }),
+              title: t("agentDrawer.brainTab"),
+              subtitle: t("agentDrawer.brainSubtitle", { _: "Como o agente pensa \u2014 prompt + criatividade" })
+            },
+            children: /* @__PURE__ */ jsx(
+              PromptTab,
+              {
+                agent,
+                temperature,
+                setTemperature,
+                markDirty,
+                t,
+                promptText: systemPrompt,
+                setPromptText: setSystemPrompt,
+                outputSchema,
+                setOutputSchema
+              }
+            )
           }
         ),
-        activeTab === "tools" && /* @__PURE__ */ jsx(ToolsTab, { agentTools: availableAgentTools, enabledToolIds, onToggle: handleToggleTool, agentFramework: selectedFramework, t }),
-        activeTab === "models" && /* @__PURE__ */ jsx(
-          ModelsTab,
+        /* @__PURE__ */ jsx(
+          SectionCard,
           {
-            modelProviders: availableModelProviders,
-            selectedProviderId,
-            onSelectProvider: handleSelectProvider,
-            models,
-            selectedModelId,
-            onSelectModel: (modelId) => {
-              setSelectedModelId(modelId);
-              markDirty();
+            variant: "glass",
+            padded: false,
+            collapsible: true,
+            defaultOpen: true,
+            header: {
+              icon: /* @__PURE__ */ jsx(WrenchScrewdriverIcon, { className: "h-5 w-5 text-slate-700 dark:text-white" }),
+              title: `${t("agentDrawer.toolsTab")}${enabledToolIds.size > 0 ? ` (${enabledToolIds.size})` : ""}`,
+              subtitle: t("agentDrawer.toolsSubtitle", { _: "O que o agente pode invocar durante a execu\xE7\xE3o" })
             },
-            agentFramework: selectedFramework,
-            t
+            children: /* @__PURE__ */ jsx(ToolsTab, { agentTools: availableAgentTools, enabledToolIds, onToggle: handleToggleTool, agentFramework: selectedFramework, t })
           }
-        ),
-        activeTab === "results" && /* @__PURE__ */ jsx(ResultsTab, { agentId: agent.agentId, t })
-      ]
+        )
+      ] })
     }
   );
 }
@@ -2116,7 +2122,7 @@ function ExecutionTimelinePanel({
                 ] })
               ] }),
               /* @__PURE__ */ jsxs("div", { className: "mt-2 flex items-center gap-3 text-xs text-slate-500 dark:text-slate-400", children: [
-                /* @__PURE__ */ jsx("span", { children: formatDuration2(entry.durationMs) }),
+                /* @__PURE__ */ jsx("span", { children: formatDuration(entry.durationMs) }),
                 /* @__PURE__ */ jsx("span", { children: "\xB7" }),
                 /* @__PURE__ */ jsx("span", { children: formatTimestamp(entry.startedAt) })
               ] })
@@ -2153,7 +2159,7 @@ function NodeInspector({
       ] }),
       /* @__PURE__ */ jsxs("div", { children: [
         /* @__PURE__ */ jsx("dt", { className: "font-semibold", children: labels.duration }),
-        /* @__PURE__ */ jsx("dd", { className: "mt-0.5 text-slate-700 dark:text-slate-200", children: formatDuration2(entry.durationMs) })
+        /* @__PURE__ */ jsx("dd", { className: "mt-0.5 text-slate-700 dark:text-slate-200", children: formatDuration(entry.durationMs) })
       ] }),
       /* @__PURE__ */ jsxs("div", { children: [
         /* @__PURE__ */ jsx("dt", { className: "font-semibold", children: labels.status }),
@@ -2207,7 +2213,7 @@ function hasMetrics(metrics) {
     metrics.model || metrics.tokensIn !== void 0 || metrics.tokensOut !== void 0 || metrics.costUsd !== void 0
   );
 }
-function formatDuration2(ms) {
+function formatDuration(ms) {
   if (ms === null) return "\u2014";
   if (ms < 1e3) return `${ms}ms`;
   if (ms < 6e4) return `${(ms / 1e3).toFixed(1)}s`;
@@ -2907,7 +2913,7 @@ function getDatasourceLogo(entityId) {
   }
   return null;
 }
-var PROVIDER_LOGOS2 = {
+var PROVIDER_LOGOS3 = {
   anthropic: "/logos/providers/anthropic.svg",
   amazon: "/logos/providers/aws.svg",
   google: "/logos/providers/google-gemini.svg",
@@ -3140,31 +3146,70 @@ function NodePalette({ agents, tools, agentTools = [], rules, entities = [], mod
         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)}`) });
-                  })()
+        children: filteredAgents.length === 0 && filteredAgentTools.length === 0 && filteredProviders.length === 0 ? /* @__PURE__ */ jsx("p", { className: "text-[10px] text-gray-400 dark:text-gray-500", children: t("noAgents") }) : /* @__PURE__ */ jsxs(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__ */ jsx("p", { className: "truncate text-[10px] text-gray-400 dark:text-gray-500", children: agent.role ?? agent.agentId })
-              ] })
-            ]
-          },
-          agent.agentId
-        )) })
+                /* @__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
+          )),
+          filteredProviders.length > 0 && /* @__PURE__ */ jsxs("div", { className: "mt-2 border-t border-gray-200/40 pt-2 dark:border-white/5", children: [
+            /* @__PURE__ */ jsx("p", { className: "mb-1.5 px-1 text-[9px] font-semibold uppercase tracking-wider text-slate-500 dark:text-slate-400", children: t("connectionsSection") }),
+            filteredProviders.map((provider) => {
+              const providerLogo = PROVIDER_LOGOS3[provider.provider];
+              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 mb-1 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__ */ jsx(
@@ -3305,49 +3350,6 @@ function NodePalette({ agents, tools, agentTools = [], rules, entities = [], mod
         })
       }
     ),
-    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,
       {
@@ -3542,7 +3544,7 @@ function VersionHistoryPanel({
           )
         ] }),
         /* @__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" }) }),
+          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 motion-reduce:animate-none 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(
@@ -3655,7 +3657,7 @@ var STATUS_CONFIG = {
     label: "error"
   }
 };
-function formatDuration3(durationMs) {
+function formatDuration2(durationMs) {
   if (durationMs < 1e3) {
     return `${durationMs}ms`;
   }
@@ -3685,10 +3687,24 @@ function RunPanel({ open, onClose, onRun, onStop }) {
           /* @__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")
-            ] })
+            isRunning && /* @__PURE__ */ jsxs(
+              "span",
+              {
+                role: "status",
+                "aria-live": "polite",
+                className: "flex items-center gap-1 rounded-full bg-blue-100 px-2 py-0.5 text-[11px] font-medium text-blue-800 dark:bg-blue-500/20 dark:text-blue-200",
+                children: [
+                  /* @__PURE__ */ jsx(
+                    "span",
+                    {
+                      "aria-hidden": "true",
+                      className: "h-1.5 w-1.5 motion-safe:animate-pulse rounded-full bg-blue-500"
+                    }
+                  ),
+                  translations("executing")
+                ]
+              }
+            )
           ] }),
           /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
             isRunning ? /* @__PURE__ */ jsxs(
@@ -3749,7 +3765,7 @@ function RunPanel({ open, onClose, onRun, onStop }) {
                   ] }),
                   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: formatDuration3(result.durationMs) })
+                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
@@ -3763,7 +3779,7 @@ function SpinnerIcon({ className }) {
   return /* @__PURE__ */ jsxs(
     "svg",
     {
-      className: `animate-spin ${className ?? ""}`,
+      className: `animate-spin motion-reduce:animate-none ${className ?? ""}`,
       viewBox: "0 0 24 24",
       fill: "none",
       stroke: "currentColor",
@@ -4173,13 +4189,13 @@ function RunInputDialog({
 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" },
+  running: { icon: ArrowPathIcon, colorClass: "text-blue-500 animate-spin motion-reduce:animate-none" },
   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 formatDuration4(durationMs) {
+function formatDuration3(durationMs) {
   if (durationMs === null) return "\u2014";
   if (durationMs < 1e3) return `${durationMs}ms`;
   return `${(durationMs / 1e3).toFixed(1)}s`;
@@ -4230,7 +4246,7 @@ function PreviewPanel({ open, onClose, workflowId, loadRuns }) {
       /* @__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(ArrowPathIcon, { className: "h-4 w-4 animate-spin motion-reduce:animate-none 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]) => {
@@ -4241,7 +4257,7 @@ function PreviewPanel({ open, onClose, workflowId, loadRuns }) {
                 /* @__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: formatDuration4(result.durationMs) })
+              result.durationMs !== void 0 && /* @__PURE__ */ jsx("span", { className: "text-gray-400", children: formatDuration3(result.durationMs) })
             ] }, nodeId);
           }) })
         ] }),
@@ -4257,7 +4273,7 @@ function PreviewPanel({ open, onClose, workflowId, loadRuns }) {
             ] }),
             /* @__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: formatDuration4(selectedNode.durationMs) })
+              /* @__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") }),
@@ -4296,7 +4312,7 @@ function PreviewPanel({ open, onClose, workflowId, loadRuns }) {
                       /* @__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: formatTimestamp2(run.createdAt) })
                     ] }),
-                    /* @__PURE__ */ jsx("span", { className: "text-[10px] text-gray-400", children: formatDuration4(run.totalDurationMs) })
+                    /* @__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 })
                 ]
@@ -4320,7 +4336,7 @@ function PreviewPanel({ open, onClose, workflowId, loadRuns }) {
                       /* @__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: formatDuration4(nodeResult.durationMs) })
+                    /* @__PURE__ */ jsx("span", { className: "text-[10px] text-gray-400", children: formatDuration3(nodeResult.durationMs) })
                   ]
                 },
                 nodeResult.nodeId
@@ -4332,12 +4348,34 @@ function PreviewPanel({ open, onClose, workflowId, loadRuns }) {
     ] })
   ] });
 }
-function SaveStatusBadge({ status }) {
+function SaveStatusBadge({ status, labels }) {
+  const savingLabel = labels?.saving ?? "Salvando\u2026";
+  const savedLabel = labels?.saved ?? "Salvo";
   if (status === "saving") {
-    return /* @__PURE__ */ jsx("span", { className: "animate-pulse text-[10px] text-gray-400 dark:text-gray-500", children: "\u2022" });
+    return /* @__PURE__ */ jsxs("span", { role: "status", "aria-live": "polite", className: "inline-flex items-center", children: [
+      /* @__PURE__ */ jsx(
+        "span",
+        {
+          "aria-hidden": "true",
+          className: "motion-safe:animate-pulse text-[11px] text-gray-500 dark:text-gray-400",
+          children: "\u2022"
+        }
+      ),
+      /* @__PURE__ */ jsx("span", { className: "sr-only", children: savingLabel })
+    ] });
   }
   if (status === "saved") {
-    return /* @__PURE__ */ jsx("span", { className: "text-[10px] text-green-500/60 dark:text-green-400/50", children: "\u2713" });
+    return /* @__PURE__ */ jsxs("span", { role: "status", "aria-live": "polite", className: "inline-flex items-center", children: [
+      /* @__PURE__ */ jsx(
+        "span",
+        {
+          "aria-hidden": "true",
+          className: "text-[11px] text-emerald-600 dark:text-emerald-400",
+          children: "\u2713"
+        }
+      ),
+      /* @__PURE__ */ jsx("span", { className: "sr-only", children: savedLabel })
+    ] });
   }
   return null;
 }
@@ -5007,6 +5045,6 @@ function useHelpLines() {
   };
 }
 
-export { AgentModal, AmazonNovaIcon, AnthropicModelIcon, AutoSaveWorkspace, DslExportModal, DslImportModal, DynamicIslandConfirm2 as DynamicIslandConfirm, ExecutionTimelinePanel, MetaLlamaIcon, NodePalette, OutputSchemaBuilder, PipelineSettingsModal, PreviewPanel, RULE_STATUS_OPTIONS, RuleActionBuilder, RuleConditionBuilder, RuleForm, RunInputDialog, RunPanel, RunReplayModal, S3WriteFlowNode, 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-2WXRRQM3.mjs.map
-//# sourceMappingURL=chunk-2WXRRQM3.mjs.map
+export { AgentModal, AmazonNovaIcon, AnthropicModelIcon, AutoSaveWorkspace, DslExportModal, DslImportModal, DynamicIslandConfirm2 as DynamicIslandConfirm, ExecutionTimelinePanel, MetaLlamaIcon, ModelProviderFlowNode, NodePalette, OutputSchemaBuilder, PipelineSettingsModal, PreviewPanel, RULE_STATUS_OPTIONS, RuleActionBuilder, RuleConditionBuilder, RuleForm, RunInputDialog, RunPanel, RunReplayModal, S3WriteFlowNode, 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-2MJAHST4.mjs.map
+//# sourceMappingURL=chunk-2MJAHST4.mjs.map