@datatechsolutions/ui 2.11.18 → 2.11.20

package/dist/astrlabe/index.mjs

@@ -1,9 +1,9 @@
 "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, getEntityGradient, useWorkflowStore, LOGIC_ICON_MAP, LOGIC_NODE_GRADIENTS, getFrameworkMeta, getCompatibleModels, isModelCompatibleWithFramework, FRAMEWORK_META } from '../chunk-LIYKHVLG.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-LIYKHVLG.mjs';
-import { SettingsDialog, GlassModalShell, Button, FormInput, FormTextarea, GlassFormModal, Input, DynamicIslandConfirm } from '../chunk-46ZM5VJJ.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, isFrameworkCompatibleWithProviders } from '../chunk-TZD35VFY.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-TZD35VFY.mjs';
+import { SettingsDialog, GlassModalShell, Button, FormInput, FormTextarea, GlassFormModal, Input, DynamicIslandConfirm } from '../chunk-N5VHGPE7.mjs';
 import '../chunk-QWG2FMUN.mjs';
 import '../chunk-D2JF6C3E.mjs';
 export { GraphNodeBadge, GraphNodeHeader, GraphNodeIconBubble, GraphNodeMeta } from '../chunk-OZNTQROP.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 { UserCircleIcon, Cog6ToothIcon, CommandLineIcon, KeyIcon, PlayCircleIcon, ArrowPathRoundedSquareIcon, ArrowsPointingOutIcon, ArrowsPointingInIcon, BoltIcon, ClockIcon, CheckIcon, CpuChipIcon, AdjustmentsHorizontalIcon, CircleStackIcon, TrashIcon, PlusIcon, XMarkIcon, EyeIcon, ArrowPathIcon, PlayIcon, StopIcon, XCircleIcon, CheckCircleIcon, VariableIcon, ChevronDownIcon, ChevronRightIcon, ExclamationCircleIcon, ClipboardDocumentIcon, ArrowDownTrayIcon, ArrowUpTrayIcon, ExclamationTriangleIcon } from '@heroicons/react/24/outline';
+import { UserCircleIcon, Cog6ToothIcon, SparklesIcon, CommandLineIcon, KeyIcon, PlayCircleIcon, ArrowPathRoundedSquareIcon, ArrowsPointingOutIcon, ArrowsPointingInIcon, BoltIcon, ClockIcon, CheckIcon, CpuChipIcon, AdjustmentsHorizontalIcon, CircleStackIcon, TrashIcon, PlusIcon, XMarkIcon, EyeIcon, ArrowPathIcon, PlayIcon, StopIcon, XCircleIcon, CheckCircleIcon, VariableIcon, ChevronDownIcon, ChevronRightIcon, ExclamationCircleIcon, ClipboardDocumentIcon, ArrowDownTrayIcon, ArrowUpTrayIcon, ExclamationTriangleIcon } from '@heroicons/react/24/outline';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { create } from 'zustand';
 
@@ -358,24 +358,9 @@ function AgentCapabilityCard({ elo, setElo, models, selectedModelId, setSelected
     ] })
   ] });
 }
-function ConfigTab({ agent, models, t, selectedModelId, setSelectedModelId, selectedFramework, setSelectedFramework, temperature, setTemperature, dirty, markDirty, markSaved }) {
-  const [promptText, setPromptText] = useState(agent.systemPrompt ?? "");
-  const handleTemperatureChange = useCallback((event) => {
-    setTemperature(parseFloat(event.target.value));
-    markDirty();
-  }, []);
-  const handlePromptChange = useCallback((event) => {
-    setPromptText(event.target.value);
-    markDirty();
-  }, []);
-  useCallback(() => {
-    markSaved();
-  }, [markSaved]);
-  const temperaturePercent = temperature * 100;
-  const isPrecise = temperature <= 0.3;
-  const isBalanced = temperature > 0.3 && temperature <= 0.7;
-  const isCreative = temperature > 0.7;
+function ConfigTab({ models, t, selectedModelId, setSelectedModelId, selectedFramework, setSelectedFramework, markDirty, connectedProviderTypes }) {
   const frameworkKeys = Object.keys(FRAMEWORK_META);
+  const hasProviderConstraints = connectedProviderTypes.length > 0;
   const compatibleModels = getCompatibleModels(models, selectedFramework);
   const handleFrameworkChange = useCallback((newFramework) => {
     setSelectedFramework(newFramework);
@@ -394,12 +379,15 @@ function ConfigTab({ agent, models, t, selectedModelId, setSelectedModelId, sele
         const meta = FRAMEWORK_META[key];
         const isSelected = key === selectedFramework;
         const compatCount = getCompatibleModels(models, key).length;
+        const isCompatibleWithProviders = !hasProviderConstraints || isFrameworkCompatibleWithProviders(key, connectedProviderTypes);
         return /* @__PURE__ */ jsxs(
           "button",
           {
             type: "button",
             onClick: () => handleFrameworkChange(key),
-            className: `inline-flex items-center gap-1.5 rounded-full px-3 py-1.5 text-[10px] font-semibold transition-all ${isSelected ? `${meta.badgeColor} ring-1 ring-current/20` : "bg-gray-100 text-gray-500 hover:bg-gray-200 dark:bg-white/5 dark:text-gray-400 dark:hover:bg-white/10"}`,
+            disabled: !isCompatibleWithProviders,
+            className: `inline-flex items-center gap-1.5 rounded-full px-3 py-1.5 text-[10px] font-semibold transition-all ${!isCompatibleWithProviders ? "cursor-not-allowed bg-gray-100 text-gray-400 opacity-40 dark:bg-white/5 dark:text-gray-500" : isSelected ? `${meta.badgeColor} ring-1 ring-current/20` : "bg-gray-100 text-gray-500 hover:bg-gray-200 dark:bg-white/5 dark:text-gray-400 dark:hover:bg-white/10"}`,
+            title: !isCompatibleWithProviders ? t("agentDrawer.frameworkIncompatible") : void 0,
             children: [
               /* @__PURE__ */ jsx(meta.IconComponent, { className: "h-3.5 w-3.5" }),
               meta.label,
@@ -446,7 +434,24 @@ function ConfigTab({ agent, models, t, selectedModelId, setSelectedModelId, sele
           model.id
         );
       }) })
-    ] }),
+    ] })
+  ] });
+}
+function PromptTab({ agent, temperature, setTemperature, markDirty, t }) {
+  const [promptText, setPromptText] = useState(agent.systemPrompt ?? "");
+  const handleTemperatureChange = useCallback((event) => {
+    setTemperature(parseFloat(event.target.value));
+    markDirty();
+  }, []);
+  const handlePromptChange = useCallback((event) => {
+    setPromptText(event.target.value);
+    markDirty();
+  }, []);
+  const temperaturePercent = temperature * 100;
+  const isPrecise = temperature <= 0.3;
+  const isBalanced = temperature > 0.3 && temperature <= 0.7;
+  const isCreative = temperature > 0.7;
+  return /* @__PURE__ */ jsxs("div", { className: "space-y-5 p-4", children: [
     /* @__PURE__ */ jsxs("div", { children: [
       /* @__PURE__ */ jsxs("div", { className: "mb-2 flex items-center justify-between", children: [
         /* @__PURE__ */ jsx("label", { className: "text-xs font-medium text-gray-500 dark:text-gray-400", children: t("agentDrawer.temperature") }),
@@ -457,10 +462,7 @@ function ConfigTab({ agent, models, t, selectedModelId, setSelectedModelId, sele
           "div",
           {
             className: "h-full rounded-full transition-all duration-300 ease-out",
-            style: {
-              width: `${temperaturePercent}%`,
-              background: `linear-gradient(90deg, #3b82f6, #8b5cf6 50%, #ec4899)`
-            }
+            style: { width: `${temperaturePercent}%`, background: "linear-gradient(90deg, #3b82f6, #8b5cf6 50%, #ec4899)" }
           }
         ) }),
         /* @__PURE__ */ jsx(
@@ -473,24 +475,12 @@ function ConfigTab({ agent, models, t, selectedModelId, setSelectedModelId, sele
             value: temperature,
             onChange: handleTemperatureChange,
             "aria-label": t("agentDrawer.temperature"),
-            "aria-valuemin": 0,
-            "aria-valuemax": 1,
             "aria-valuenow": temperature,
             "aria-valuetext": `${temperature.toFixed(2)} \u2014 ${isPrecise ? t("agentDrawer.precise") : isBalanced ? t("agentDrawer.balanced") : t("agentDrawer.creative")}`,
-            className: "relative z-10 h-5 w-full cursor-pointer appearance-none bg-transparent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2 [&::-webkit-slider-thumb]:h-5 [&::-webkit-slider-thumb]:w-5 [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:border-2 [&::-webkit-slider-thumb]:border-white [&::-webkit-slider-thumb]:shadow-lg dark:[&::-webkit-slider-thumb]:border-gray-900",
-            style: {
-              // Thumb color based on temperature zone
-              // eslint-disable-next-line @typescript-eslint/no-explicit-any
-              ["--thumb-color"]: isPrecise ? "#3b82f6" : isBalanced ? "#8b5cf6" : "#ec4899"
-            }
+            className: "relative z-10 h-5 w-full cursor-pointer appearance-none bg-transparent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2 [&::-webkit-slider-thumb]:h-5 [&::-webkit-slider-thumb]:w-5 [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:border-2 [&::-webkit-slider-thumb]:border-white [&::-webkit-slider-thumb]:shadow-lg dark:[&::-webkit-slider-thumb]:border-gray-900"
           }
         ),
-        /* @__PURE__ */ jsx("style", { children: `
-            input[type="range"]::-webkit-slider-thumb {
-              background: ${isPrecise ? "#3b82f6" : isBalanced ? "#8b5cf6" : "#ec4899"};
-              box-shadow: 0 0 8px ${isPrecise ? "rgba(59,130,246,0.5)" : isBalanced ? "rgba(139,92,246,0.5)" : "rgba(236,72,153,0.5)"};
-            }
-          ` })
+        /* @__PURE__ */ jsx("style", { children: `input[type="range"]::-webkit-slider-thumb { background: ${isPrecise ? "#3b82f6" : isBalanced ? "#8b5cf6" : "#ec4899"}; box-shadow: 0 0 8px ${isPrecise ? "rgba(59,130,246,0.5)" : isBalanced ? "rgba(139,92,246,0.5)" : "rgba(236,72,153,0.5)"}; }` })
       ] }),
       /* @__PURE__ */ jsxs("div", { className: "mt-1 flex items-center justify-between", children: [
         /* @__PURE__ */ jsx("span", { className: `text-[10px] font-medium transition-colors ${isPrecise ? "text-blue-500" : "text-gray-400 dark:text-gray-500"}`, children: t("agentDrawer.precise") }),
@@ -511,7 +501,7 @@ function ConfigTab({ agent, models, t, selectedModelId, setSelectedModelId, sele
         {
           value: promptText,
           onChange: handlePromptChange,
-          rows: 8,
+          rows: 12,
           className: "w-full resize-y rounded-lg border border-gray-200/50 bg-gray-50/50 px-3 py-2.5 font-mono text-xs leading-relaxed text-gray-700 outline-none transition-colors placeholder:text-gray-400 focus:border-indigo-300/50 focus:ring-1 focus:ring-indigo-300/30 dark:border-white/10 dark:bg-white/5 dark:text-gray-300 dark:placeholder:text-gray-500 dark:focus:border-indigo-500/30 dark:focus:ring-indigo-500/20",
           placeholder: t("agentDrawer.systemPromptPlaceholder")
         }
@@ -761,6 +751,7 @@ function AgentModal({ onSaved }) {
   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: "results", label: t("agentDrawer.resultsTab"), icon: PlayCircleIcon, group: t("agentDrawer.executionGroup") }
@@ -798,7 +789,8 @@ function AgentModal({ onSaved }) {
       sidebarFooter,
       children: [
         activeTab === "profile" && /* @__PURE__ */ jsx(AgentProfileHeader, { agent, models, t, selectedModelId, setSelectedModelId, selectedFramework, temperature, setTemperature, elo, setElo, onChanged: markDirty }),
-        activeTab === "framework" && /* @__PURE__ */ jsx(ConfigTab, { agent, models, t, selectedModelId, setSelectedModelId, selectedFramework, setSelectedFramework: (fw) => setSelectedFramework(fw), temperature, setTemperature, dirty, markDirty, markSaved: handleMarkSaved }),
+        activeTab === "framework" && /* @__PURE__ */ jsx(ConfigTab, { models, t, selectedModelId, setSelectedModelId, selectedFramework, setSelectedFramework: (fw) => setSelectedFramework(fw), markDirty, connectedProviderTypes: availableModelProviders.map((p) => p.provider) }),
+        activeTab === "prompt" && /* @__PURE__ */ jsx(PromptTab, { agent, temperature, setTemperature, markDirty, t }),
         activeTab === "tools" && /* @__PURE__ */ jsx(ToolsTab, { agentTools: availableAgentTools, enabledToolIds, onToggle: handleToggleTool, agentFramework: selectedFramework, t }),
         activeTab === "models" && /* @__PURE__ */ jsx(
           ModelsTab,
@@ -1628,9 +1620,9 @@ function NodePalette({ agents, tools, agentTools = [], rules, entities = [], mod
     filteredProviders.length > 0 && /* @__PURE__ */ jsx(
       CollapsibleSection,
       {
-        title: t("modelProvidersSection"),
+        title: t("connectionsSection"),
         icon: /* @__PURE__ */ jsx(KeyIcon, { className: "h-3 w-3" }),
-        colorClass: "text-rose-600 dark:text-rose-400",
+        colorClass: "text-slate-600 dark:text-slate-400",
         count: filteredProviders.length,
         children: filteredProviders.map((provider) => {
           const providerLogo = PROVIDER_LOGOS2[provider.provider];