@datatechsolutions/ui 2.11.11 → 2.11.13

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, getEntityIcon, useWorkflowStore, LOGIC_ICON_MAP, LOGIC_NODE_GRADIENTS, getFrameworkMeta, getCompatibleModels, isModelCompatibleWithFramework, FRAMEWORK_META, getEntityGradient } from '../chunk-VWKBMTTC.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, 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-VWKBMTTC.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-B64PWT4B.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, 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-B64PWT4B.mjs';
 import { GlassModalShell, Button, FormInput, FormTextarea, GlassFormModal, Input, DynamicIslandConfirm } from '../chunk-46ZM5VJJ.mjs';
 import '../chunk-QWG2FMUN.mjs';
 import '../chunk-D2JF6C3E.mjs';
@@ -547,6 +547,37 @@ function ResultsTab({ agentId, t }) {
     ] })
   ] });
 }
+function ToolsTab({ agentTools, enabledToolIds, onToggle, 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") })
+    ] });
+  }
+  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) => {
+      const isEnabled = enabledToolIds.has(tool.agentToolId);
+      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"}`,
+          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__ */ 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" }) })
+          ]
+        },
+        tool.agentToolId
+      );
+    })
+  ] });
+}
 function AgentModal({ onSaved }) {
   const t = useTranslations("agents.workflow");
   const activeModal = useModalStore((s) => s.activeModal);
@@ -555,6 +586,7 @@ function AgentModal({ onSaved }) {
   const open = activeModal === "agent";
   const agent = agentData?.agent ?? null;
   const models = agentData?.models ?? [];
+  const availableAgentTools = agentData?.agentTools ?? [];
   const isCreateMode = agentData?.isCreateMode ?? false;
   const [activeTab, setActiveTab] = useState("config");
   const [selectedModelId, setSelectedModelId] = useState("");
@@ -562,6 +594,7 @@ function AgentModal({ onSaved }) {
   const [temperature, setTemperature] = useState(0.7);
   const [elo, setElo] = useState(1e3);
   const [saved, setSaved] = useState(true);
+  const [enabledToolIds, setEnabledToolIds] = useState(/* @__PURE__ */ new Set());
   const agentId = agent?.agentId ?? agent?.id ?? "";
   useEffect(() => {
     if (!agent) return;
@@ -571,6 +604,8 @@ function AgentModal({ onSaved }) {
     setElo(Number(agent.elo ?? 1e3));
     setSaved(!isCreateMode);
     setActiveTab("config");
+    const agentToolIds = agent.agentToolIds;
+    setEnabledToolIds(new Set(agentToolIds ?? availableAgentTools.filter((t2) => t2.enabled).map((t2) => t2.agentToolId)));
   }, [agentId]);
   const dirty = !saved;
   const markDirty = useCallback(() => setSaved(false), []);
@@ -578,18 +613,31 @@ function AgentModal({ onSaved }) {
   const handleClose = useCallback(() => {
     closeModal();
   }, [closeModal]);
+  const handleToggleTool = useCallback((toolId) => {
+    setEnabledToolIds((previous) => {
+      const next = new Set(previous);
+      if (next.has(toolId)) next.delete(toolId);
+      else next.add(toolId);
+      return next;
+    });
+    markDirty();
+  }, [markDirty]);
   const handleMarkSaved = useCallback(() => {
     markSaved();
     onSaved?.();
   }, [markSaved, onSaved]);
   if (!agent) return null;
-  const tabs = /* @__PURE__ */ jsx("div", { className: "flex border-b border-white/20 dark:border-white/10", children: ["config", "results"].map((tab) => /* @__PURE__ */ jsx(
+  const tabList = ["config", "tools", "results"];
+  const tabs = /* @__PURE__ */ jsx("div", { className: "flex border-b border-white/20 dark:border-white/10", children: tabList.map((tab) => /* @__PURE__ */ jsxs(
     "button",
     {
       type: "button",
       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" : "agentDrawer.resultsTab")
+      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 })
+      ]
     },
     tab
   )) });
@@ -633,7 +681,9 @@ function AgentModal({ onSaved }) {
       closeLabel: t("agentDrawer.close"),
       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 }) : /* @__PURE__ */ jsx(ResultsTab, { agentId: agent.agentId, t })
+        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 === "results" && /* @__PURE__ */ jsx(ResultsTab, { agentId: agent.agentId, t })
       ]
     }
   );
@@ -1073,30 +1123,31 @@ function PipelineSettingsModal({ onSave }) {
     }
   );
 }
-var DATASOURCE_GRADIENTS = {
-  bigquery: "from-blue-500 to-indigo-600",
-  postgres: "from-sky-500 to-blue-600",
-  snowflake: "from-cyan-400 to-blue-500",
-  mongodb: "from-green-500 to-emerald-600",
-  redis: "from-red-500 to-rose-600",
-  mysql: "from-blue-600 to-indigo-700",
-  clickhouse: "from-amber-500 to-yellow-600",
-  elasticsearch: "from-teal-500 to-cyan-600",
-  duckdb: "from-yellow-500 to-amber-600"
+var SI = (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",
+  snowflake: "https://www.svgrepo.com/show/354381/snowflake-icon.svg",
+  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"),
+  elasticsearch: "https://www.svgrepo.com/show/353735/elasticsearch.svg",
+  duckdb: SI("duckdb", "FFF000")
 };
-function getDatasourceGradient(entityId) {
+function getDatasourceLogo(entityId) {
   const lower = entityId.toLowerCase();
-  for (const [key, gradient] of Object.entries(DATASOURCE_GRADIENTS)) {
-    if (lower.includes(key)) return gradient;
+  for (const [key, url] of Object.entries(DATASOURCE_LOGOS)) {
+    if (lower.includes(key)) return url;
   }
-  return getEntityGradient(entityId);
+  return null;
 }
-var PROVIDER_GRADIENTS = {
-  anthropic: "from-amber-500 to-orange-600",
-  amazon: "from-orange-500 to-amber-600",
-  google: "from-blue-500 to-cyan-600",
-  openai: "from-emerald-500 to-teal-600",
-  meta: "from-blue-600 to-indigo-700"
+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")
 };
 function onDragStart(event, nodeType, entityId, label, config) {
   event.dataTransfer.setData("nodeType", nodeType);
@@ -1438,8 +1489,9 @@ function NodePalette({ agents, tools, agentTools = [], rules, entities = [], mod
             outputVariable: `${entity.label.replace(/\s+/g, "")}Data`,
             limit: entity.defaultLimit
           });
+          const dsLogo = getDatasourceLogo(entity.id);
           const EntityIcon = getEntityIcon(entity.id);
-          const entityGradient = getDatasourceGradient(entity.id);
+          const entityGradient = getEntityGradient(entity.id);
           return /* @__PURE__ */ jsxs(
             "div",
             {
@@ -1447,7 +1499,7 @@ function NodePalette({ agents, tools, agentTools = [], rules, entities = [], mod
               onDragStart: (event) => onDragStart(event, "entity", entity.id, entity.label, defaultConfig),
               className: "liquid-surface group flex items-center gap-2 rounded-lg px-3 py-2 transition-all cursor-grab hover:shadow-md active:cursor-grabbing",
               children: [
-                /* @__PURE__ */ jsx("div", { className: `flex h-6 w-6 items-center justify-center rounded-md bg-gradient-to-br ${entityGradient} shadow-sm`, children: /* @__PURE__ */ jsx(EntityIcon, { className: "h-3.5 w-3.5 text-white" }) }),
+                dsLogo ? /* @__PURE__ */ jsx("div", { className: "flex h-6 w-6 shrink-0 items-center justify-center rounded-md bg-white/10 p-1", children: /* @__PURE__ */ jsx("img", { src: dsLogo, alt: "", className: "h-4 w-4 object-contain", loading: "lazy" }) }) : /* @__PURE__ */ jsx("div", { className: `flex h-6 w-6 items-center justify-center rounded-md bg-gradient-to-br ${entityGradient} shadow-sm`, children: /* @__PURE__ */ jsx(EntityIcon, { className: "h-3.5 w-3.5 text-white" }) }),
                 /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
                   /* @__PURE__ */ jsx("p", { className: "truncate text-xs font-medium text-gray-900 dark:text-white", children: entity.label }),
                   /* @__PURE__ */ jsxs("p", { className: "truncate text-[10px] text-gray-400 dark:text-gray-500", children: [
@@ -1471,9 +1523,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 providerIcon = getModelIcon(`${provider.provider}.placeholder`);
-          const ProviderIcon = providerIcon.IconComponent;
-          const providerGradient = PROVIDER_GRADIENTS[provider.provider] ?? "from-rose-400 to-pink-500";
+          const providerLogo = PROVIDER_LOGOS[provider.provider];
           return /* @__PURE__ */ jsxs(
             "div",
             {
@@ -1482,7 +1532,7 @@ function NodePalette({ agents, tools, agentTools = [], rules, entities = [], mod
               role: "button",
               tabIndex: 0,
               children: [
-                /* @__PURE__ */ jsx("div", { className: `flex h-6 w-6 items-center justify-center rounded-md bg-gradient-to-br ${providerGradient} shadow-sm`, children: /* @__PURE__ */ jsx(ProviderIcon, { className: "h-3.5 w-3.5 text-white" }) }),
+                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: [