@datatechsolutions/ui 2.11.15 → 2.11.16

package/dist/astrlabe/index.mjs

@@ -1,8 +1,8 @@
 "use client";
 import '../chunk-JB6RNAD2.mjs';
 export { topologicalSortAgents, validateWorkflowGraph } from '../chunk-BLNXRUC4.mjs';
-import { Workspace, useModalStore, CATEGORY_COLORS, CATEGORY_PILL_COLORS, ICON_MAP, WorkflowCanvas, getFrameworkMeta, getEntityIcon, getEntityGradient, useWorkflowStore, LOGIC_ICON_MAP, LOGIC_NODE_GRADIENTS, getCompatibleModels, isModelCompatibleWithFramework, FRAMEWORK_META } from '../chunk-NTXIFTIQ.mjs';
-export { AgentFlowNode, AgentToolFlowNode, AnswerFlowNode, AnthropicIcon, CodeFlowNode, CrewAIIcon, DocumentExtractorFlowNode, EndFlowNode, EntityFlowNode, FRAMEWORK_META, GoogleADKIcon, GroupFlowNode, HttpRequestFlowNode, IfElseFlowNode, IterationFlowNode, IterationStartFlowNode, KnowledgeBaseFlowNode, LOGIC_ICON_MAP, LOGIC_NODE_BADGE_COLORS, LOGIC_NODE_GRADIENTS, LOGIC_NODE_HANDLE_COLORS, LangChainIcon, ListOperatorFlowNode, LogicNodeModal, MINIMAP_NODE_COLORS, ModelProviderFlowNode, NodeCard, NodeContextMenu, NoteFlowNode, OpenAIIcon, PanelContextMenu, ParameterExtractorFlowNode, QuestionClassifierFlowNode, RuleFlowNode, SelectionContextMenu, StartFlowNode, StrandsIcon, TemplateTransformFlowNode, ToolFlowNode, VariableAggregatorFlowNode, VariableAssignerFlowNode, WorkflowBuilderProvider, Workspace, getCompatibleModels, getDefaultFrameworkForModel, getEntityBadgeColor, getEntityGradient, getEntityHandleColor, getEntityIcon, getEntityMinimapColor, getFrameworkMeta, isModelCompatibleWithFramework, useModalStore, useWorkflowBuilderClient, useWorkflowBuilderClientOptional, useWorkflowStore } from '../chunk-NTXIFTIQ.mjs';
+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 } from '../chunk-4B47R7VI.mjs';
+export { AgentFlowNode, AgentToolFlowNode, AnswerFlowNode, AnthropicIcon, CodeFlowNode, CrewAIIcon, DocumentExtractorFlowNode, EndFlowNode, EntityFlowNode, FRAMEWORK_META, GoogleADKIcon, GroupFlowNode, HttpRequestFlowNode, IfElseFlowNode, IterationFlowNode, IterationStartFlowNode, KnowledgeBaseFlowNode, LOGIC_ICON_MAP, LOGIC_NODE_BADGE_COLORS, LOGIC_NODE_GRADIENTS, LOGIC_NODE_HANDLE_COLORS, LangChainIcon, ListOperatorFlowNode, LogicNodeModal, MINIMAP_NODE_COLORS, ModelProviderFlowNode, NodeCard, NodeContextMenu, NoteFlowNode, OpenAIIcon, PanelContextMenu, ParameterExtractorFlowNode, QuestionClassifierFlowNode, RuleFlowNode, SelectionContextMenu, StartFlowNode, StrandsIcon, TemplateTransformFlowNode, ToolFlowNode, VariableAggregatorFlowNode, VariableAssignerFlowNode, WorkflowBuilderProvider, Workspace, getCompatibleModels, getDefaultFrameworkForModel, getEntityBadgeColor, getEntityGradient, getEntityHandleColor, getEntityIcon, getEntityMinimapColor, getFrameworkMeta, isModelCompatibleWithFramework, useModalStore, useWorkflowBuilderClient, useWorkflowBuilderClientOptional, useWorkflowStore } from '../chunk-4B47R7VI.mjs';
 import { GlassModalShell, Button, FormInput, FormTextarea, GlassFormModal, Input, DynamicIslandConfirm } from '../chunk-46ZM5VJJ.mjs';
 import '../chunk-QWG2FMUN.mjs';
 import '../chunk-D2JF6C3E.mjs';
@@ -11,7 +11,7 @@ import { getAgentTier, createDefaultLogicNodeConfig } from '../chunk-TLPPVL3W.mj
 export { applyDagreLayout, createDefaultLogicNodeConfig, getAgentTier } from '../chunk-TLPPVL3W.mjs';
 import { useTranslations } from '../chunk-7VJ7CMMT.mjs';
 import { memo, useCallback, useState, useEffect, useMemo, useRef, Children } from 'react';
-import { CpuChipIcon, ArrowPathRoundedSquareIcon, ArrowsPointingOutIcon, ArrowsPointingInIcon, BoltIcon, ClockIcon, CheckIcon, Cog6ToothIcon, CommandLineIcon, PlusIcon, AdjustmentsHorizontalIcon, CircleStackIcon, KeyIcon, TrashIcon, XMarkIcon, EyeIcon, ArrowPathIcon, PlayIcon, StopIcon, XCircleIcon, CheckCircleIcon, VariableIcon, ChevronDownIcon, ChevronRightIcon, ExclamationCircleIcon, ClipboardDocumentIcon, ArrowDownTrayIcon, ArrowUpTrayIcon, ExclamationTriangleIcon } from '@heroicons/react/24/outline';
+import { CpuChipIcon, ArrowPathRoundedSquareIcon, ArrowsPointingOutIcon, ArrowsPointingInIcon, BoltIcon, ClockIcon, CheckIcon, Cog6ToothIcon, AdjustmentsHorizontalIcon, CircleStackIcon, KeyIcon, TrashIcon, PlusIcon, XMarkIcon, EyeIcon, ArrowPathIcon, PlayIcon, StopIcon, XCircleIcon, CheckCircleIcon, VariableIcon, ChevronDownIcon, ChevronRightIcon, ExclamationCircleIcon, ClipboardDocumentIcon, ArrowDownTrayIcon, ArrowUpTrayIcon, ExclamationTriangleIcon, CommandLineIcon } from '@heroicons/react/24/outline';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { create } from 'zustand';
 
@@ -547,28 +547,100 @@ function ResultsTab({ agentId, t }) {
     ] })
   ] });
 }
-function ToolsTab({ agentTools, enabledToolIds, onToggle, t }) {
+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, 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") })
+    ] });
+  }
+  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.modelsDescription") }),
+    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-4 py-3 text-left transition-all ${isSelected ? "border-rose-500/30 bg-rose-50/50 ring-1 ring-rose-500/20 dark:border-rose-400/20 dark:bg-rose-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-10 w-10 shrink-0 items-center justify-center rounded-xl bg-white/10 p-1.5", children: /* @__PURE__ */ jsx("img", { src: logo, alt: "", className: "h-6 w-6 object-contain", loading: "lazy" }) }) : /* @__PURE__ */ jsx("div", { className: "flex h-10 w-10 shrink-0 items-center justify-center rounded-xl bg-gradient-to-br from-rose-500 to-pink-600", children: /* @__PURE__ */ jsx(KeyIcon, { className: "h-5 w-5 text-white" }) }),
+            /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
+              /* @__PURE__ */ jsx("p", { className: `text-sm font-medium ${isSelected ? "text-gray-900 dark:text-white" : "text-gray-600 dark:text-gray-400"}`, children: provider.name }),
+              /* @__PURE__ */ jsxs("div", { className: "mt-0.5 flex items-center gap-2 text-[10px] text-gray-400 dark:text-gray-500", children: [
+                /* @__PURE__ */ jsxs("span", { children: [
+                  provider.modelCount,
+                  " models"
+                ] }),
+                /* @__PURE__ */ jsx("span", { className: `rounded-full px-1.5 py-0.5 text-[9px] font-medium ${provider.configured ? "bg-green-100 text-green-600 dark:bg-green-500/10 dark:text-green-400" : "bg-amber-100 text-amber-600 dark:bg-amber-500/10 dark:text-amber-400"}`, children: provider.configured ? t("agentDrawer.providerConfigured") : t("agentDrawer.providerSetup") })
+              ] })
+            ] }),
+            /* @__PURE__ */ jsx("div", { className: `flex h-5 w-5 shrink-0 items-center justify-center rounded-full transition-all ${isSelected ? "bg-rose-500 text-white" : "border border-gray-300 dark:border-gray-600"}`, children: isSelected && /* @__PURE__ */ jsx(CheckIcon, { className: "h-3 w-3" }) })
+          ]
+        },
+        provider.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") }),
-    agentTools.map((tool) => {
+    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 ${isEnabled ? "border-amber-500/30 bg-amber-50/50 dark:border-amber-400/20 dark:bg-amber-500/5" : "border-gray-200/50 bg-gray-50/30 hover:border-gray-300 dark:border-white/10 dark:bg-white/[0.02] dark:hover:border-white/20"}`,
+          className: `flex w-full items-center gap-3 rounded-xl border px-4 py-3 text-left transition-all ${!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__ */ jsx("p", { className: `text-sm font-medium ${isEnabled ? "text-gray-900 dark:text-white" : "text-gray-600 dark:text-gray-400"}`, children: tool.name }),
-              tool.description && /* @__PURE__ */ jsx("p", { className: "truncate text-[10px] text-gray-400 dark:text-gray-500", children: tool.description })
+              /* @__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" }) })
           ]
@@ -595,6 +667,8 @@ function AgentModal({ onSaved }) {
   const [elo, setElo] = useState(1e3);
   const [saved, setSaved] = useState(true);
   const [enabledToolIds, setEnabledToolIds] = useState(/* @__PURE__ */ new Set());
+  const [selectedProviderId, setSelectedProviderId] = useState("");
+  const availableModelProviders = agentData?.modelProviders ?? [];
   const agentId = agent?.agentId ?? agent?.id ?? "";
   useEffect(() => {
     if (!agent) return;
@@ -606,6 +680,7 @@ function AgentModal({ onSaved }) {
     setActiveTab("config");
     const agentToolIds = agent.agentToolIds;
     setEnabledToolIds(new Set(agentToolIds ?? availableAgentTools.filter((t2) => t2.enabled).map((t2) => t2.agentToolId)));
+    setSelectedProviderId(agent.modelProviderId ?? "");
   }, [agentId]);
   const dirty = !saved;
   const markDirty = useCallback(() => setSaved(false), []);
@@ -613,6 +688,10 @@ function AgentModal({ onSaved }) {
   const handleClose = useCallback(() => {
     closeModal();
   }, [closeModal]);
+  const handleSelectProvider = useCallback((providerId) => {
+    setSelectedProviderId(providerId);
+    markDirty();
+  }, [markDirty]);
   const handleToggleTool = useCallback((toolId) => {
     setEnabledToolIds((previous) => {
       const next = new Set(previous);
@@ -627,7 +706,7 @@ function AgentModal({ onSaved }) {
     onSaved?.();
   }, [markSaved, onSaved]);
   if (!agent) return null;
-  const tabList = ["config", "tools", "results"];
+  const tabList = ["config", "tools", "models", "results"];
   const tabs = /* @__PURE__ */ jsx("div", { className: "flex border-b border-white/20 dark:border-white/10", children: tabList.map((tab) => /* @__PURE__ */ jsxs(
     "button",
     {
@@ -635,8 +714,9 @@ function AgentModal({ onSaved }) {
       onClick: () => setActiveTab(tab),
       className: `flex-1 px-4 py-2 text-xs font-medium transition-colors ${activeTab === tab ? "border-b-2 border-blue-500 text-blue-600 dark:text-blue-400" : "text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200"}`,
       children: [
-        t(tab === "config" ? "agentDrawer.configTab" : tab === "tools" ? "agentDrawer.toolsTab" : "agentDrawer.resultsTab"),
-        tab === "tools" && enabledToolIds.size > 0 && /* @__PURE__ */ jsx("span", { className: "ml-1 inline-flex h-4 min-w-4 items-center justify-center rounded-full bg-amber-500/20 px-1 text-[9px] font-bold text-amber-600 dark:text-amber-400", children: enabledToolIds.size })
+        t(tab === "config" ? "agentDrawer.configTab" : tab === "tools" ? "agentDrawer.toolsTab" : tab === "models" ? "agentDrawer.modelsTab" : "agentDrawer.resultsTab"),
+        tab === "tools" && enabledToolIds.size > 0 && /* @__PURE__ */ jsx("span", { className: "ml-1 inline-flex h-4 min-w-4 items-center justify-center rounded-full bg-amber-500/20 px-1 text-[9px] font-bold text-amber-600 dark:text-amber-400", children: enabledToolIds.size }),
+        tab === "models" && selectedProviderId && /* @__PURE__ */ jsx("span", { className: "ml-1 inline-flex h-4 min-w-4 items-center justify-center rounded-full bg-rose-500/20 px-1 text-[9px] font-bold text-rose-600 dark:text-rose-400", children: "1" })
       ]
     },
     tab
@@ -682,7 +762,8 @@ function AgentModal({ onSaved }) {
       children: [
         /* @__PURE__ */ jsx(AgentProfileHeader, { agent, models, t, selectedModelId, setSelectedModelId, selectedFramework, temperature, setTemperature, elo, setElo, onChanged: markDirty }),
         activeTab === "config" && /* @__PURE__ */ jsx(ConfigTab, { agent, models, t, selectedModelId, setSelectedModelId, selectedFramework, setSelectedFramework: (fw) => setSelectedFramework(fw), temperature, setTemperature, dirty, markDirty, markSaved: handleMarkSaved }),
-        activeTab === "tools" && /* @__PURE__ */ jsx(ToolsTab, { agentTools: availableAgentTools, enabledToolIds, onToggle: handleToggleTool, t }),
+        activeTab === "tools" && /* @__PURE__ */ jsx(ToolsTab, { agentTools: availableAgentTools, enabledToolIds, onToggle: handleToggleTool, agentFramework: selectedFramework, t }),
+        activeTab === "models" && /* @__PURE__ */ jsx(ModelsTab, { modelProviders: availableModelProviders, selectedProviderId, onSelectProvider: handleSelectProvider, t }),
         activeTab === "results" && /* @__PURE__ */ jsx(ResultsTab, { agentId: agent.agentId, t })
       ]
     }
@@ -1123,7 +1204,7 @@ function PipelineSettingsModal({ onSave }) {
     }
   );
 }
-var SI = (slug, color) => `https://cdn.simpleicons.org/${slug}/${color}`;
+var SI2 = (slug, color) => `https://cdn.simpleicons.org/${slug}/${color}`;
 var DATASOURCE_LOGOS = {
   bigquery: "https://www.svgrepo.com/show/375546/bigquery.svg",
   postgres: "https://www.svgrepo.com/show/354200/postgresql.svg",
@@ -1131,9 +1212,9 @@ var DATASOURCE_LOGOS = {
   mongodb: "https://www.svgrepo.com/show/373845/mongo.svg",
   redis: "https://www.svgrepo.com/show/354272/redis.svg",
   mysql: "https://www.svgrepo.com/show/373848/mysql.svg",
-  clickhouse: SI("clickhouse", "FFCC01"),
+  clickhouse: SI2("clickhouse", "FFCC01"),
   elasticsearch: "https://www.svgrepo.com/show/353735/elasticsearch.svg",
-  duckdb: SI("duckdb", "FFF000")
+  duckdb: SI2("duckdb", "FFF000")
 };
 function getDatasourceLogo(entityId) {
   const lower = entityId.toLowerCase();
@@ -1142,12 +1223,12 @@ function getDatasourceLogo(entityId) {
   }
   return null;
 }
-var PROVIDER_LOGOS = {
-  anthropic: SI("anthropic", "D4A27F"),
+var PROVIDER_LOGOS2 = {
+  anthropic: SI2("anthropic", "D4A27F"),
   amazon: "https://www.svgrepo.com/show/448266/aws.svg",
-  google: SI("googlegemini", "8E75B2"),
+  google: SI2("googlegemini", "8E75B2"),
   openai: "https://www.svgrepo.com/show/306500/openai.svg",
-  meta: SI("meta", "0668E1")
+  meta: SI2("meta", "0668E1")
 };
 function onDragStart(event, nodeType, entityId, label, config) {
   event.dataTransfer.setData("nodeType", nodeType);
@@ -1363,64 +1444,32 @@ function NodePalette({ agents, tools, agentTools = [], rules, entities = [], mod
         colorClass: "text-indigo-600 dark:text-indigo-400",
         onAdd: onCreateAgent,
         addLabel: t("newAgent"),
-        count: filteredAgents.length + filteredAgentTools.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__ */ 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" }) })
+        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__ */ 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
-          )),
-          filteredAgentTools.length > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
-            /* @__PURE__ */ jsxs("div", { className: "mt-2 mb-1 flex items-center gap-1.5 px-1", children: [
-              /* @__PURE__ */ jsx(CommandLineIcon, { className: "h-2.5 w-2.5 text-amber-500 dark:text-amber-400" }),
-              /* @__PURE__ */ jsx("span", { className: "text-[9px] font-semibold uppercase tracking-wider text-amber-600 dark:text-amber-400", children: t("agentToolsSection") }),
-              onCreateAgentTool && /* @__PURE__ */ jsx("button", { type: "button", onClick: onCreateAgentTool, className: "ml-auto text-[9px] font-medium text-amber-500 hover:text-amber-600 dark:text-amber-400", children: /* @__PURE__ */ jsx(PlusIcon, { className: "h-3 w-3" }) })
-            ] }),
-            filteredAgentTools.map((agentTool) => /* @__PURE__ */ jsxs(
-              "div",
-              {
-                draggable: true,
-                onDragStart: (event) => onDragStart(event, "agent_tool", agentTool.agentToolId, agentTool.name),
-                className: "liquid-surface group flex items-center gap-2 rounded-lg px-3 py-1.5 transition-all cursor-grab hover:shadow-md active:cursor-grabbing",
-                children: [
-                  /* @__PURE__ */ jsx("div", { className: "flex h-5 w-5 items-center justify-center rounded-md bg-gradient-to-br from-amber-400 to-orange-500 shadow-sm", children: /* @__PURE__ */ jsx(CommandLineIcon, { className: "h-3 w-3 text-white" }) }),
-                  /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
-                    /* @__PURE__ */ jsx("p", { className: "truncate text-[11px] font-medium text-gray-900 dark:text-white", children: agentTool.name }),
-                    agentTool.compatibleFrameworks && agentTool.compatibleFrameworks.length > 0 && /* @__PURE__ */ jsx("div", { className: "mt-0.5 flex flex-wrap gap-0.5", children: agentTool.compatibleFrameworks.map((framework) => {
-                      const meta = getFrameworkMeta(framework);
-                      return /* @__PURE__ */ jsxs("span", { className: `inline-flex items-center gap-0.5 rounded px-1 py-px text-[8px] font-medium ${meta.badgeColor}`, children: [
-                        /* @__PURE__ */ jsx(meta.IconComponent, { className: "h-2 w-2" }),
-                        meta.label
-                      ] }, framework);
-                    }) })
-                  ] }),
-                  !agentTool.enabled && /* @__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: "off" })
-                ]
-              },
-              agentTool.agentToolId
-            ))
-          ] })
-        ] })
+                /* @__PURE__ */ jsx("p", { className: "truncate text-[10px] text-gray-400 dark:text-gray-500", children: agent.role ?? agent.agentId })
+              ] })
+            ]
+          },
+          agent.agentId
+        )) })
       }
     ),
     /* @__PURE__ */ jsx(
@@ -1532,7 +1581,7 @@ function NodePalette({ agents, tools, agentTools = [], rules, entities = [], mod
         colorClass: "text-rose-600 dark:text-rose-400",
         count: filteredProviders.length,
         children: filteredProviders.map((provider) => {
-          const providerLogo = PROVIDER_LOGOS[provider.provider];
+          const providerLogo = PROVIDER_LOGOS2[provider.provider];
           return /* @__PURE__ */ jsxs(
             "div",
             {