@datatechsolutions/ui 2.11.18 → 2.11.19

package/dist/astrlabe/index.js

@@ -358,23 +358,7 @@ function AgentCapabilityCard({ elo, setElo, models, selectedModelId, setSelected
     ] })
   ] });
 }
-function ConfigTab({ agent, models, t, selectedModelId, setSelectedModelId, selectedFramework, setSelectedFramework, temperature, setTemperature, dirty, markDirty, markSaved }) {
-  const [promptText, setPromptText] = react.useState(agent.systemPrompt ?? "");
-  const handleTemperatureChange = react.useCallback((event) => {
-    setTemperature(parseFloat(event.target.value));
-    markDirty();
-  }, []);
-  const handlePromptChange = react.useCallback((event) => {
-    setPromptText(event.target.value);
-    markDirty();
-  }, []);
-  react.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 }) {
   const frameworkKeys = Object.keys(chunk4X7ITYP2_js.FRAMEWORK_META);
   const compatibleModels = chunk4X7ITYP2_js.getCompatibleModels(models, selectedFramework);
   const handleFrameworkChange = react.useCallback((newFramework) => {
@@ -446,7 +430,24 @@ function ConfigTab({ agent, models, t, selectedModelId, setSelectedModelId, sele
           model.id
         );
       }) })
-    ] }),
+    ] })
+  ] });
+}
+function PromptTab({ agent, temperature, setTemperature, markDirty, t }) {
+  const [promptText, setPromptText] = react.useState(agent.systemPrompt ?? "");
+  const handleTemperatureChange = react.useCallback((event) => {
+    setTemperature(parseFloat(event.target.value));
+    markDirty();
+  }, []);
+  const handlePromptChange = react.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__ */ jsxRuntime.jsxs("div", { className: "space-y-5 p-4", children: [
     /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-2 flex items-center justify-between", children: [
         /* @__PURE__ */ jsxRuntime.jsx("label", { className: "text-xs font-medium text-gray-500 dark:text-gray-400", children: t("agentDrawer.temperature") }),
@@ -457,10 +458,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__ */ jsxRuntime.jsx(
@@ -473,24 +471,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__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { className: "mt-1 flex items-center justify-between", children: [
         /* @__PURE__ */ jsxRuntime.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 +497,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 +747,7 @@ function AgentModal({ onSaved }) {
   const sections = [
     { id: "profile", label: t("agentDrawer.profileSection"), icon: outline.UserCircleIcon, group: t("agentDrawer.agentGroup") },
     { id: "framework", label: t("agentDrawer.frameworkSection"), icon: outline.Cog6ToothIcon, group: t("agentDrawer.agentGroup") },
+    { id: "prompt", label: t("agentDrawer.promptSection"), icon: outline.SparklesIcon, group: t("agentDrawer.agentGroup") },
     { id: "tools", label: `${t("agentDrawer.toolsTab")}${enabledToolIds.size > 0 ? ` (${enabledToolIds.size})` : ""}`, icon: outline.CommandLineIcon, group: t("agentDrawer.configGroup") },
     { id: "models", label: `${t("agentDrawer.modelsTab")}${selectedProviderId ? " \u2713" : ""}`, icon: outline.KeyIcon, group: t("agentDrawer.configGroup") },
     { id: "results", label: t("agentDrawer.resultsTab"), icon: outline.PlayCircleIcon, group: t("agentDrawer.executionGroup") }
@@ -798,7 +785,8 @@ function AgentModal({ onSaved }) {
       sidebarFooter,
       children: [
         activeTab === "profile" && /* @__PURE__ */ jsxRuntime.jsx(AgentProfileHeader, { agent, models, t, selectedModelId, setSelectedModelId, selectedFramework, temperature, setTemperature, elo, setElo, onChanged: markDirty }),
-        activeTab === "framework" && /* @__PURE__ */ jsxRuntime.jsx(ConfigTab, { agent, models, t, selectedModelId, setSelectedModelId, selectedFramework, setSelectedFramework: (fw) => setSelectedFramework(fw), temperature, setTemperature, dirty, markDirty, markSaved: handleMarkSaved }),
+        activeTab === "framework" && /* @__PURE__ */ jsxRuntime.jsx(ConfigTab, { models, t, selectedModelId, setSelectedModelId, selectedFramework, setSelectedFramework: (fw) => setSelectedFramework(fw), markDirty }),
+        activeTab === "prompt" && /* @__PURE__ */ jsxRuntime.jsx(PromptTab, { agent, temperature, setTemperature, markDirty, t }),
         activeTab === "tools" && /* @__PURE__ */ jsxRuntime.jsx(ToolsTab, { agentTools: availableAgentTools, enabledToolIds, onToggle: handleToggleTool, agentFramework: selectedFramework, t }),
         activeTab === "models" && /* @__PURE__ */ jsxRuntime.jsx(
           ModelsTab,