@datatechsolutions/ui 2.11.17 → 2.11.19

package/dist/astrlabe/index.js

@@ -3,7 +3,7 @@
 
 require('../chunk-55H6WZQP.js');
 var chunk3GE3MBUZ_js = require('../chunk-3GE3MBUZ.js');
-var chunkPNN6KWXQ_js = require('../chunk-PNN6KWXQ.js');
+var chunk4X7ITYP2_js = require('../chunk-4X7ITYP2.js');
 var chunk4XID6LOC_js = require('../chunk-4XID6LOC.js');
 require('../chunk-S7KHTUHA.js');
 require('../chunk-UZ3CMNUJ.js');
@@ -83,7 +83,7 @@ function OutputCard({ label, value }) {
 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 = chunkPNN6KWXQ_js.getFrameworkMeta(selectedFramework);
+  const frameworkMeta = chunk4X7ITYP2_js.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" },
@@ -358,29 +358,13 @@ 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;
-  const frameworkKeys = Object.keys(chunkPNN6KWXQ_js.FRAMEWORK_META);
-  const compatibleModels = chunkPNN6KWXQ_js.getCompatibleModels(models, selectedFramework);
+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) => {
     setSelectedFramework(newFramework);
-    if (!chunkPNN6KWXQ_js.isModelCompatibleWithFramework(selectedModelId, newFramework)) {
-      const compatible = chunkPNN6KWXQ_js.getCompatibleModels(models, newFramework);
+    if (!chunk4X7ITYP2_js.isModelCompatibleWithFramework(selectedModelId, newFramework)) {
+      const compatible = chunk4X7ITYP2_js.getCompatibleModels(models, newFramework);
       if (compatible.length > 0) {
         setSelectedModelId(compatible[0].id);
       }
@@ -391,9 +375,9 @@ function ConfigTab({ agent, models, t, selectedModelId, setSelectedModelId, sele
     /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
       /* @__PURE__ */ jsxRuntime.jsx("label", { className: "mb-2 block text-xs font-medium text-gray-500 dark:text-gray-400", children: t("agentDrawer.framework") }),
       /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-wrap gap-1.5", children: frameworkKeys.map((key) => {
-        const meta = chunkPNN6KWXQ_js.FRAMEWORK_META[key];
+        const meta = chunk4X7ITYP2_js.FRAMEWORK_META[key];
         const isSelected = key === selectedFramework;
-        const compatCount = chunkPNN6KWXQ_js.getCompatibleModels(models, key).length;
+        const compatCount = chunk4X7ITYP2_js.getCompatibleModels(models, key).length;
         return /* @__PURE__ */ jsxRuntime.jsxs(
           "button",
           {
@@ -423,7 +407,7 @@ function ConfigTab({ agent, models, t, selectedModelId, setSelectedModelId, sele
       ] }),
       /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-2 gap-2", children: models.map((model) => {
         const isSelected = model.id === selectedModelId;
-        const isCompatible = chunkPNN6KWXQ_js.isModelCompatibleWithFramework(model.id, selectedFramework);
+        const isCompatible = chunk4X7ITYP2_js.isModelCompatibleWithFramework(model.id, selectedFramework);
         const { IconComponent, color, providerLabel } = getModelIcon(model.id);
         return /* @__PURE__ */ jsxRuntime.jsxs(
           "button",
@@ -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")
         }
@@ -520,7 +506,7 @@ function ConfigTab({ agent, models, t, selectedModelId, setSelectedModelId, sele
   ] });
 }
 function ResultsTab({ agentId, t }) {
-  const nodeResults = chunkPNN6KWXQ_js.useWorkflowStore((state) => state.nodeResults);
+  const nodeResults = chunk4X7ITYP2_js.useWorkflowStore((state) => state.nodeResults);
   const agentResult = react.useMemo(() => {
     return nodeResults[agentId] ?? null;
   }, [nodeResults, agentId]);
@@ -560,7 +546,7 @@ var PROVIDER_LOGOS = {
   azure_openai: SI("microsoftazure", "0078D4"),
   anthropic_api: SI("anthropic", "D4A27F")
 };
-function ModelsTab({ modelProviders, selectedProviderId, onSelectProvider, t }) {
+function ModelsTab({ modelProviders, selectedProviderId, onSelectProvider, models, selectedModelId, onSelectModel, agentFramework, t }) {
   if (modelProviders.length === 0) {
     return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center justify-center px-4 py-12 text-center", children: [
       /* @__PURE__ */ jsxRuntime.jsx(outline.KeyIcon, { className: "mb-2 h-8 w-8 text-gray-400 dark:text-gray-500" }),
@@ -568,35 +554,87 @@ function ModelsTab({ modelProviders, selectedProviderId, onSelectProvider, t })
       /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-1 text-xs text-gray-400 dark:text-gray-500", children: t("agentDrawer.dragProviderHint") })
     ] });
   }
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2 p-4", children: [
-    /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx("div", { className: "flex h-10 w-10 shrink-0 items-center justify-center rounded-xl bg-white/10 p-1.5", children: /* @__PURE__ */ jsxRuntime.jsx("img", { src: logo, alt: "", className: "h-6 w-6 object-contain", loading: "lazy" }) }) : /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(outline.KeyIcon, { className: "h-5 w-5 text-white" }) }),
-            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "min-w-0 flex-1", children: [
-              /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { className: "mt-0.5 flex items-center gap-2 text-[10px] text-gray-400 dark:text-gray-500", children: [
-                /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
-                  provider.modelCount,
-                  " models"
-                ] }),
-                /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx(outline.CheckIcon, { className: "h-3 w-3" }) })
-          ]
-        },
-        provider.id
-      );
+  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__ */ jsxRuntime.jsxs("div", { className: "space-y-4 p-4", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+      /* @__PURE__ */ jsxRuntime.jsx("label", { className: "mb-2 block text-xs font-medium text-gray-500 dark:text-gray-400", children: t("agentDrawer.selectProvider") }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-1.5", children: modelProviders.map((provider) => {
+        const isSelected = selectedProviderId === provider.id;
+        const logo = PROVIDER_LOGOS[provider.provider];
+        return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("div", { className: "flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-white/10 p-1", children: /* @__PURE__ */ jsxRuntime.jsx("img", { src: logo, alt: "", className: "h-5 w-5 object-contain", loading: "lazy" }) }) : /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(outline.KeyIcon, { className: "h-4 w-4 text-white" }) }),
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "min-w-0 flex-1", children: [
+                /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1.5 text-[10px] text-gray-400 dark:text-gray-500", children: [
+                  /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
+                    provider.modelCount,
+                    " models"
+                  ] }),
+                  provider.configured && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "h-1.5 w-1.5 rounded-full bg-green-500" })
+                ] })
+              ] }),
+              /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(outline.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__ */ jsxRuntime.jsx("p", { className: "text-xs text-gray-400 dark:text-gray-500", children: t("agentDrawer.noModelsForProvider") });
+      const compatibleModels = providerModels.models.filter(
+        (m) => chunk4X7ITYP2_js.isModelCompatibleWithFramework(m.id, agentFramework)
+      );
+      const incompatibleModels = providerModels.models.filter(
+        (m) => !chunk4X7ITYP2_js.isModelCompatibleWithFramework(m.id, agentFramework)
+      );
+      return /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+        /* @__PURE__ */ jsxRuntime.jsx("label", { className: "mb-2 block text-xs font-medium text-gray-500 dark:text-gray-400", children: t("agentDrawer.selectModel") }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-1", children: [
+          compatibleModels.map((model) => {
+            const isSelected = selectedModelId === model.id;
+            const { IconComponent, color, providerLabel } = getModelIcon(model.id);
+            return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(IconComponent, { className: `h-4 w-4 flex-shrink-0 ${isSelected ? color : "text-gray-400 dark:text-gray-500"}` }),
+                  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "min-w-0 flex-1", children: [
+                    /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("p", { className: "text-[10px] text-gray-400 dark:text-gray-500", children: providerLabel })
+                  ] }),
+                  isSelected && /* @__PURE__ */ jsxRuntime.jsx(outline.CheckIcon, { className: "h-3.5 w-3.5 shrink-0 text-indigo-500" })
+                ]
+              },
+              model.id
+            );
+          }),
+          incompatibleModels.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+            /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx(outline.CpuChipIcon, { className: "h-4 w-4 text-gray-400" }),
+              /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-gray-500", children: model.name })
+            ] }, model.id))
+          ] })
+        ] })
+      ] });
+    })()
   ] });
 }
 function ToolsTab({ agentTools, enabledToolIds, onToggle, agentFramework, t }) {
@@ -634,7 +672,7 @@ function ToolsTab({ agentTools, enabledToolIds, onToggle, agentFramework, t }) {
               ] }),
               tool.description && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "truncate text-[10px] text-gray-400 dark:text-gray-500", children: tool.description }),
               tool.compatibleFrameworks && tool.compatibleFrameworks.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-1 flex flex-wrap gap-0.5", children: tool.compatibleFrameworks.map((framework) => {
-                const meta = chunkPNN6KWXQ_js.getFrameworkMeta(framework);
+                const meta = chunk4X7ITYP2_js.getFrameworkMeta(framework);
                 const isCurrentFw = framework === agentFramework;
                 return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(meta.IconComponent, { className: "h-2.5 w-2.5" }),
@@ -652,15 +690,15 @@ function ToolsTab({ agentTools, enabledToolIds, onToggle, agentFramework, t }) {
 }
 function AgentModal({ onSaved }) {
   const t = chunkYXN2K77G_js.useTranslations("agents.workflow");
-  const activeModal = chunkPNN6KWXQ_js.useModalStore((s) => s.activeModal);
-  const agentData = chunkPNN6KWXQ_js.useModalStore((s) => s.agentData);
-  const closeModal = chunkPNN6KWXQ_js.useModalStore((s) => s.closeModal);
+  const activeModal = chunk4X7ITYP2_js.useModalStore((s) => s.activeModal);
+  const agentData = chunk4X7ITYP2_js.useModalStore((s) => s.agentData);
+  const closeModal = chunk4X7ITYP2_js.useModalStore((s) => s.closeModal);
   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] = react.useState("config");
+  const [activeTab, setActiveTab] = react.useState("profile");
   const [selectedModelId, setSelectedModelId] = react.useState("");
   const [selectedFramework, setSelectedFramework] = react.useState("custom");
   const [temperature, setTemperature] = react.useState(0.7);
@@ -677,7 +715,7 @@ function AgentModal({ onSaved }) {
     setTemperature(agent.temperature ?? 0.7);
     setElo(Number(agent.elo ?? 1e3));
     setSaved(!isCreateMode);
-    setActiveTab("config");
+    setActiveTab("profile");
     const agentToolIds = agent.agentToolIds;
     setEnabledToolIds(new Set(agentToolIds ?? availableAgentTools.filter((t2) => t2.enabled).map((t2) => t2.agentToolId)));
     setSelectedProviderId(agent.modelProviderId ?? "");
@@ -706,64 +744,66 @@ function AgentModal({ onSaved }) {
     onSaved?.();
   }, [markSaved, onSaved]);
   if (!agent) return null;
-  const tabList = ["config", "tools", "models", "results"];
-  const tabs = /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex border-b border-white/20 dark:border-white/10", children: tabList.map((tab) => /* @__PURE__ */ jsxRuntime.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" : tab === "tools" ? "agentDrawer.toolsTab" : tab === "models" ? "agentDrawer.modelsTab" : "agentDrawer.resultsTab"),
-        tab === "tools" && enabledToolIds.size > 0 && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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
-  )) });
-  const footer = /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between", children: [
-    /* @__PURE__ */ jsxRuntime.jsx("div", { role: "status", "aria-live": "polite", className: "text-xs", children: dirty ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-amber-500 dark:text-amber-400", children: t("agentDrawer.unsavedChanges") }) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-emerald-500 dark:text-emerald-400", children: t("agentDrawer.saved") }) }),
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
-      /* @__PURE__ */ jsxRuntime.jsx(
-        "button",
-        {
-          type: "button",
-          onClick: handleClose,
-          className: "rounded-lg border border-gray-200/50 px-4 py-2 text-xs font-medium text-gray-600 transition-colors hover:bg-gray-100/50 dark:border-white/10 dark:text-gray-300 dark:hover:bg-white/5",
-          children: t("agentDrawer.cancel")
-        }
-      ),
-      /* @__PURE__ */ jsxRuntime.jsx(
-        "button",
-        {
-          type: "button",
-          onClick: handleMarkSaved,
-          disabled: !dirty,
-          className: `rounded-lg px-4 py-2 text-xs font-semibold text-white shadow-sm transition-all ${dirty ? "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: t("agentDrawer.save")
-        }
-      )
-    ] })
+  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") }
+  ];
+  const avatarUrl = agent.avatar;
+  const sidebarFooter = /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 px-4 py-3", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("div", { role: "status", "aria-live": "polite", className: "flex-1 text-xs", children: dirty ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-amber-500 dark:text-amber-400", children: t("agentDrawer.unsavedChanges") }) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-emerald-500 dark:text-emerald-400", children: t("agentDrawer.saved") }) }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "button",
+      {
+        type: "button",
+        onClick: handleMarkSaved,
+        disabled: !dirty,
+        className: `rounded-lg px-3 py-1.5 text-xs font-semibold text-white shadow-sm transition-all ${dirty ? "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: t("agentDrawer.save")
+      }
+    )
   ] });
   return /* @__PURE__ */ jsxRuntime.jsxs(
-    chunk4XID6LOC_js.GlassModalShell,
+    chunk4XID6LOC_js.SettingsDialog,
     {
       open,
       onClose: handleClose,
       title: agent.name,
-      subtitle: agent.role ?? "",
-      gradient: "from-indigo-500 to-purple-600",
-      icon: /* @__PURE__ */ jsxRuntime.jsx(outline.CpuChipIcon, { className: "h-6 w-6 text-white" }),
-      label: isCreateMode ? t("agentDrawer.createAgent") : t("agentDrawer.editAgent"),
-      headerActions: tabs,
-      footer,
-      maxWidth: "2xl",
-      closeLabel: t("agentDrawer.close"),
+      subtitle: isCreateMode ? t("agentDrawer.createAgent") : t("agentDrawer.editAgent"),
+      sections,
+      activeSectionId: activeTab,
+      onSectionChange: (sectionId) => setActiveTab(sectionId),
+      identity: {
+        displayName: agent.name,
+        profileInitial: agent.name.charAt(0).toUpperCase(),
+        avatarUrl,
+        role: agent.role
+      },
+      sidebarFooter,
       children: [
-        /* @__PURE__ */ jsxRuntime.jsx(AgentProfileHeader, { agent, models, t, selectedModelId, setSelectedModelId, selectedFramework, temperature, setTemperature, elo, setElo, onChanged: markDirty }),
-        activeTab === "config" && /* @__PURE__ */ jsxRuntime.jsx(ConfigTab, { agent, models, t, selectedModelId, setSelectedModelId, selectedFramework, setSelectedFramework: (fw) => setSelectedFramework(fw), temperature, setTemperature, dirty, markDirty, markSaved: handleMarkSaved }),
+        activeTab === "profile" && /* @__PURE__ */ jsxRuntime.jsx(AgentProfileHeader, { agent, models, t, selectedModelId, setSelectedModelId, selectedFramework, temperature, setTemperature, elo, setElo, onChanged: markDirty }),
+        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, { modelProviders: availableModelProviders, selectedProviderId, onSelectProvider: handleSelectProvider, t }),
+        activeTab === "models" && /* @__PURE__ */ jsxRuntime.jsx(
+          ModelsTab,
+          {
+            modelProviders: availableModelProviders,
+            selectedProviderId,
+            onSelectProvider: handleSelectProvider,
+            models,
+            selectedModelId,
+            onSelectModel: (modelId) => {
+              setSelectedModelId(modelId);
+              markDirty();
+            },
+            agentFramework: selectedFramework,
+            t
+          }
+        ),
         activeTab === "results" && /* @__PURE__ */ jsxRuntime.jsx(ResultsTab, { agentId: agent.agentId, t })
       ]
     }
@@ -874,7 +914,7 @@ function SubworkflowModal({ onSaved, onMaximize }) {
   const markDirty = useSubworkflowStore((s) => s.markDirty);
   const markSaved = useSubworkflowStore((s) => s.markSaved);
   const closeModal = useSubworkflowStore((s) => s.closeModal);
-  const agentBehind = chunkPNN6KWXQ_js.useModalStore((s) => s.activeModal === "agent" ? s.agentData?.agent?.name : null);
+  const agentBehind = chunk4X7ITYP2_js.useModalStore((s) => s.activeModal === "agent" ? s.agentData?.agent?.name : null);
   const isCreateMode = !tool?.toolId;
   const initialGraph = react.useMemo(() => {
     const config = tool?.config;
@@ -903,9 +943,9 @@ function SubworkflowModal({ onSaved, onMaximize }) {
   }, [tool, onSaved, name, category, description, timeoutMs, latestGraphRef, markSaved]);
   if (!tool) return null;
   const categoryKey = category ?? "external";
-  const gradient = tool.color ?? chunkPNN6KWXQ_js.CATEGORY_COLORS[categoryKey] ?? chunkPNN6KWXQ_js.CATEGORY_COLORS.external;
-  const categoryPill = chunkPNN6KWXQ_js.CATEGORY_PILL_COLORS[categoryKey] ?? chunkPNN6KWXQ_js.CATEGORY_PILL_COLORS.external;
-  const IconComponent = chunkPNN6KWXQ_js.ICON_MAP[tool.icon ?? ""] ?? outline.ArrowPathRoundedSquareIcon;
+  const gradient = tool.color ?? chunk4X7ITYP2_js.CATEGORY_COLORS[categoryKey] ?? chunk4X7ITYP2_js.CATEGORY_COLORS.external;
+  const categoryPill = chunk4X7ITYP2_js.CATEGORY_PILL_COLORS[categoryKey] ?? chunk4X7ITYP2_js.CATEGORY_PILL_COLORS.external;
+  const IconComponent = chunk4X7ITYP2_js.ICON_MAP[tool.icon ?? ""] ?? outline.ArrowPathRoundedSquareIcon;
   const graph = latestGraphRef.current;
   const startNode = graph.nodes.find((n) => n.type === "start");
   const endNode = graph.nodes.find((n) => n.type === "end");
@@ -970,7 +1010,7 @@ function SubworkflowModal({ onSaved, onMaximize }) {
               {
                 type: "button",
                 onClick: () => setCategory(cat),
-                className: `rounded-full px-2 py-1 text-[9px] font-semibold transition-all ${cat === category ? `${chunkPNN6KWXQ_js.CATEGORY_PILL_COLORS[cat] ?? chunkPNN6KWXQ_js.CATEGORY_PILL_COLORS.external} ring-1 ring-current/20` : "bg-white/30 text-gray-500 hover:bg-white/50 dark:bg-white/5 dark:text-gray-400"}`,
+                className: `rounded-full px-2 py-1 text-[9px] font-semibold transition-all ${cat === category ? `${chunk4X7ITYP2_js.CATEGORY_PILL_COLORS[cat] ?? chunk4X7ITYP2_js.CATEGORY_PILL_COLORS.external} ring-1 ring-current/20` : "bg-white/30 text-gray-500 hover:bg-white/50 dark:bg-white/5 dark:text-gray-400"}`,
                 children: cat
               },
               cat
@@ -1057,7 +1097,7 @@ function SubworkflowModal({ onSaved, onMaximize }) {
           /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-auto" })
         ] }),
         /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1", children: /* @__PURE__ */ jsxRuntime.jsx(
-          chunkPNN6KWXQ_js.WorkflowCanvas,
+          chunk4X7ITYP2_js.WorkflowCanvas,
           {
             initialGraph,
             agents: [],
@@ -1115,9 +1155,9 @@ function WorkspaceModal({
 }
 function PipelineSettingsModal({ onSave }) {
   const t = chunkYXN2K77G_js.useTranslations("agents.workflow");
-  const activeModal = chunkPNN6KWXQ_js.useModalStore((s) => s.activeModal);
-  const data = chunkPNN6KWXQ_js.useModalStore((s) => s.pipelineSettingsData);
-  const closeModal = chunkPNN6KWXQ_js.useModalStore((s) => s.closeModal);
+  const activeModal = chunk4X7ITYP2_js.useModalStore((s) => s.activeModal);
+  const data = chunk4X7ITYP2_js.useModalStore((s) => s.pipelineSettingsData);
+  const closeModal = chunk4X7ITYP2_js.useModalStore((s) => s.closeModal);
   const open = activeModal === "pipeline-settings";
   const [nameValue, setNameValue] = react.useState("");
   const [descriptionValue, setDescriptionValue] = react.useState("");
@@ -1326,8 +1366,8 @@ function CollapsibleSection({ title, icon, colorClass, defaultOpen = true, count
   ] });
 }
 function LogicNodeItemCard({ item, translationFunction }) {
-  const IconComponent = chunkPNN6KWXQ_js.LOGIC_ICON_MAP[item.nodeType];
-  const gradient = chunkPNN6KWXQ_js.LOGIC_NODE_GRADIENTS[item.nodeType] ?? "from-gray-400 to-gray-500";
+  const IconComponent = chunk4X7ITYP2_js.LOGIC_ICON_MAP[item.nodeType];
+  const gradient = chunk4X7ITYP2_js.LOGIC_NODE_GRADIENTS[item.nodeType] ?? "from-gray-400 to-gray-500";
   const defaultConfig = chunkPWBWP5FJ_js.createDefaultLogicNodeConfig(item.nodeType);
   const configJson = defaultConfig ? JSON.stringify(defaultConfig) : void 0;
   return /* @__PURE__ */ jsxRuntime.jsxs(
@@ -1548,8 +1588,8 @@ function NodePalette({ agents, tools, agentTools = [], rules, entities = [], mod
             limit: entity.defaultLimit
           });
           const dsLogo = getDatasourceLogo(entity.id);
-          const EntityIcon = chunkPNN6KWXQ_js.getEntityIcon(entity.id);
-          const entityGradient = chunkPNN6KWXQ_js.getEntityGradient(entity.id);
+          const EntityIcon = chunk4X7ITYP2_js.getEntityIcon(entity.id);
+          const entityGradient = chunk4X7ITYP2_js.getEntityGradient(entity.id);
           return /* @__PURE__ */ jsxRuntime.jsxs(
             "div",
             {
@@ -1931,9 +1971,9 @@ function formatDuration2(durationMs) {
 }
 function RunPanel({ open, onClose, onRun, onStop }) {
   const translations = chunkYXN2K77G_js.useTranslations("agents.workflow.runPanel");
-  const nodes = chunkPNN6KWXQ_js.useWorkflowStore((state) => state.nodes);
-  const isRunning = chunkPNN6KWXQ_js.useWorkflowStore((state) => state.isRunning);
-  const nodeResults = chunkPNN6KWXQ_js.useWorkflowStore((state) => state.nodeResults);
+  const nodes = chunk4X7ITYP2_js.useWorkflowStore((state) => state.nodes);
+  const isRunning = chunk4X7ITYP2_js.useWorkflowStore((state) => state.isRunning);
+  const nodeResults = chunk4X7ITYP2_js.useWorkflowStore((state) => state.nodeResults);
   const startNode = nodes.find((node) => node.type === "start");
   const hasEndNode = nodes.some((node) => node.type === "end");
   const hasValidStartConfig = Boolean(
@@ -2218,8 +2258,8 @@ function inferVariables(config, nodeType) {
 }
 function VariableInspector({ open, onClose }) {
   const translations = chunkYXN2K77G_js.useTranslations("agents.workflow.variableInspector");
-  const nodes = chunkPNN6KWXQ_js.useWorkflowStore((state) => state.nodes);
-  const edges = chunkPNN6KWXQ_js.useWorkflowStore((state) => state.edges);
+  const nodes = chunk4X7ITYP2_js.useWorkflowStore((state) => state.nodes);
+  const edges = chunk4X7ITYP2_js.useWorkflowStore((state) => state.edges);
   const [expandedNodes, setExpandedNodes] = react.useState(/* @__PURE__ */ new Set());
   const toggleNodeExpansion = react.useCallback((nodeId) => {
     setExpandedNodes((current) => {
@@ -2281,8 +2321,8 @@ function VariableInspector({ open, onClose }) {
           /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-2 text-sm text-gray-500 dark:text-gray-400", children: translations("noNodes") })
         ] }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "divide-y divide-gray-100 dark:divide-gray-800", children: nodeVariableEntries.map((entry) => {
           const isExpanded = expandedNodes.has(entry.nodeId);
-          const IconComponent = chunkPNN6KWXQ_js.LOGIC_ICON_MAP[entry.nodeType];
-          const gradient = chunkPNN6KWXQ_js.LOGIC_NODE_GRADIENTS[entry.nodeType] ?? "from-gray-400 to-gray-500";
+          const IconComponent = chunk4X7ITYP2_js.LOGIC_ICON_MAP[entry.nodeType];
+          const gradient = chunk4X7ITYP2_js.LOGIC_NODE_GRADIENTS[entry.nodeType] ?? "from-gray-400 to-gray-500";
           const inputVariables = entry.variables.filter((variable) => variable.direction === "input");
           const outputVariables = entry.variables.filter((variable) => variable.direction === "output");
           return /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-testid": `variable-node-${entry.nodeId}`, children: [
@@ -2348,7 +2388,7 @@ function RunInputDialog({
   onRun
 }) {
   const t = chunkYXN2K77G_js.useTranslations("agents.workflow.runInputDialog");
-  const nodes = chunkPNN6KWXQ_js.useWorkflowStore((state) => state.nodes);
+  const nodes = chunk4X7ITYP2_js.useWorkflowStore((state) => state.nodes);
   const [values, setValues] = react.useState({});
   const inputVariableNames = react.useMemo(() => {
     const storeStartNode = nodes.find((node) => node.type === "start");
@@ -2430,8 +2470,8 @@ function PreviewPanel({ open, onClose, workflowId, loadRuns }) {
   const [isLoadingRuns, setIsLoadingRuns] = react.useState(false);
   const [selectedRun, setSelectedRun] = react.useState(null);
   const [selectedNode, setSelectedNode] = react.useState(null);
-  const isRunning = chunkPNN6KWXQ_js.useWorkflowStore((state) => state.isRunning);
-  const nodeResults = chunkPNN6KWXQ_js.useWorkflowStore((state) => state.nodeResults);
+  const isRunning = chunk4X7ITYP2_js.useWorkflowStore((state) => state.isRunning);
+  const nodeResults = chunk4X7ITYP2_js.useWorkflowStore((state) => state.nodeResults);
   const refreshRuns = react.useCallback(async () => {
     setIsLoadingRuns(true);
     try {
@@ -2587,7 +2627,7 @@ var AutoSaveWorkspace = react.memo(function AutoSaveWorkspace2({
     onAutoSaveGraph(graph);
   }, [onAutoSaveGraph, onGraphSnapshot]);
   return /* @__PURE__ */ jsxRuntime.jsx(
-    chunkPNN6KWXQ_js.Workspace,
+    chunk4X7ITYP2_js.Workspace,
     {
       ...workspaceProps,
       onGraphChange: handleGraphChange
@@ -2960,14 +3000,14 @@ function DslImportModal({ open, onClose, onImport }) {
 }
 
 // src/astrlabe/store/selectors.ts
-var useCanUndo = () => chunkPNN6KWXQ_js.useWorkflowStore((state) => state.past.length > 0);
-var useCanRedo = () => chunkPNN6KWXQ_js.useWorkflowStore((state) => state.future.length > 0);
-var useHasCopied = () => chunkPNN6KWXQ_js.useWorkflowStore((state) => state.clipboard !== null);
-var useContextMenu = () => chunkPNN6KWXQ_js.useWorkflowStore((state) => state.contextMenu);
-var useEditingNodeId = () => chunkPNN6KWXQ_js.useWorkflowStore((state) => state.editingNodeId);
-var useSelectedNodeCount = () => chunkPNN6KWXQ_js.useWorkflowStore((state) => state.nodes.filter((node) => node.selected).length);
-var useIsRunning = () => chunkPNN6KWXQ_js.useWorkflowStore((state) => state.isRunning);
-var useNodeResults = () => chunkPNN6KWXQ_js.useWorkflowStore((state) => state.nodeResults);
+var useCanUndo = () => chunk4X7ITYP2_js.useWorkflowStore((state) => state.past.length > 0);
+var useCanRedo = () => chunk4X7ITYP2_js.useWorkflowStore((state) => state.future.length > 0);
+var useHasCopied = () => chunk4X7ITYP2_js.useWorkflowStore((state) => state.clipboard !== null);
+var useContextMenu = () => chunk4X7ITYP2_js.useWorkflowStore((state) => state.contextMenu);
+var useEditingNodeId = () => chunk4X7ITYP2_js.useWorkflowStore((state) => state.editingNodeId);
+var useSelectedNodeCount = () => chunk4X7ITYP2_js.useWorkflowStore((state) => state.nodes.filter((node) => node.selected).length);
+var useIsRunning = () => chunk4X7ITYP2_js.useWorkflowStore((state) => state.isRunning);
+var useNodeResults = () => chunk4X7ITYP2_js.useWorkflowStore((state) => state.nodeResults);
 var DEFAULT_MAX_HISTORY = 50;
 function useUndoRedo(nodes, edges, setNodes, setEdges, maxHistory = DEFAULT_MAX_HISTORY) {
   const pastRef = react.useRef([]);
@@ -3255,227 +3295,227 @@ Object.defineProperty(exports, "validateWorkflowGraph", {
 });
 Object.defineProperty(exports, "AgentFlowNode", {
   enumerable: true,
-  get: function () { return chunkPNN6KWXQ_js.AgentFlowNode; }
+  get: function () { return chunk4X7ITYP2_js.AgentFlowNode; }
 });
 Object.defineProperty(exports, "AgentToolFlowNode", {
   enumerable: true,
-  get: function () { return chunkPNN6KWXQ_js.AgentToolFlowNode; }
+  get: function () { return chunk4X7ITYP2_js.AgentToolFlowNode; }
 });
 Object.defineProperty(exports, "AnswerFlowNode", {
   enumerable: true,
-  get: function () { return chunkPNN6KWXQ_js.AnswerFlowNode; }
+  get: function () { return chunk4X7ITYP2_js.AnswerFlowNode; }
 });
 Object.defineProperty(exports, "AnthropicIcon", {
   enumerable: true,
-  get: function () { return chunkPNN6KWXQ_js.AnthropicIcon; }
+  get: function () { return chunk4X7ITYP2_js.AnthropicIcon; }
 });
 Object.defineProperty(exports, "CodeFlowNode", {
   enumerable: true,
-  get: function () { return chunkPNN6KWXQ_js.CodeFlowNode; }
+  get: function () { return chunk4X7ITYP2_js.CodeFlowNode; }
 });
 Object.defineProperty(exports, "CrewAIIcon", {
   enumerable: true,
-  get: function () { return chunkPNN6KWXQ_js.CrewAIIcon; }
+  get: function () { return chunk4X7ITYP2_js.CrewAIIcon; }
 });
 Object.defineProperty(exports, "DocumentExtractorFlowNode", {
   enumerable: true,
-  get: function () { return chunkPNN6KWXQ_js.DocumentExtractorFlowNode; }
+  get: function () { return chunk4X7ITYP2_js.DocumentExtractorFlowNode; }
 });
 Object.defineProperty(exports, "EndFlowNode", {
   enumerable: true,
-  get: function () { return chunkPNN6KWXQ_js.EndFlowNode; }
+  get: function () { return chunk4X7ITYP2_js.EndFlowNode; }
 });
 Object.defineProperty(exports, "EntityFlowNode", {
   enumerable: true,
-  get: function () { return chunkPNN6KWXQ_js.EntityFlowNode; }
+  get: function () { return chunk4X7ITYP2_js.EntityFlowNode; }
 });
 Object.defineProperty(exports, "FRAMEWORK_META", {
   enumerable: true,
-  get: function () { return chunkPNN6KWXQ_js.FRAMEWORK_META; }
+  get: function () { return chunk4X7ITYP2_js.FRAMEWORK_META; }
 });
 Object.defineProperty(exports, "GoogleADKIcon", {
   enumerable: true,
-  get: function () { return chunkPNN6KWXQ_js.GoogleADKIcon; }
+  get: function () { return chunk4X7ITYP2_js.GoogleADKIcon; }
 });
 Object.defineProperty(exports, "GroupFlowNode", {
   enumerable: true,
-  get: function () { return chunkPNN6KWXQ_js.GroupFlowNode; }
+  get: function () { return chunk4X7ITYP2_js.GroupFlowNode; }
 });
 Object.defineProperty(exports, "HttpRequestFlowNode", {
   enumerable: true,
-  get: function () { return chunkPNN6KWXQ_js.HttpRequestFlowNode; }
+  get: function () { return chunk4X7ITYP2_js.HttpRequestFlowNode; }
 });
 Object.defineProperty(exports, "IfElseFlowNode", {
   enumerable: true,
-  get: function () { return chunkPNN6KWXQ_js.IfElseFlowNode; }
+  get: function () { return chunk4X7ITYP2_js.IfElseFlowNode; }
 });
 Object.defineProperty(exports, "IterationFlowNode", {
   enumerable: true,
-  get: function () { return chunkPNN6KWXQ_js.IterationFlowNode; }
+  get: function () { return chunk4X7ITYP2_js.IterationFlowNode; }
 });
 Object.defineProperty(exports, "IterationStartFlowNode", {
   enumerable: true,
-  get: function () { return chunkPNN6KWXQ_js.IterationStartFlowNode; }
+  get: function () { return chunk4X7ITYP2_js.IterationStartFlowNode; }
 });
 Object.defineProperty(exports, "KnowledgeBaseFlowNode", {
   enumerable: true,
-  get: function () { return chunkPNN6KWXQ_js.KnowledgeBaseFlowNode; }
+  get: function () { return chunk4X7ITYP2_js.KnowledgeBaseFlowNode; }
 });
 Object.defineProperty(exports, "LOGIC_ICON_MAP", {
   enumerable: true,
-  get: function () { return chunkPNN6KWXQ_js.LOGIC_ICON_MAP; }
+  get: function () { return chunk4X7ITYP2_js.LOGIC_ICON_MAP; }
 });
 Object.defineProperty(exports, "LOGIC_NODE_BADGE_COLORS", {
   enumerable: true,
-  get: function () { return chunkPNN6KWXQ_js.LOGIC_NODE_BADGE_COLORS; }
+  get: function () { return chunk4X7ITYP2_js.LOGIC_NODE_BADGE_COLORS; }
 });
 Object.defineProperty(exports, "LOGIC_NODE_GRADIENTS", {
   enumerable: true,
-  get: function () { return chunkPNN6KWXQ_js.LOGIC_NODE_GRADIENTS; }
+  get: function () { return chunk4X7ITYP2_js.LOGIC_NODE_GRADIENTS; }
 });
 Object.defineProperty(exports, "LOGIC_NODE_HANDLE_COLORS", {
   enumerable: true,
-  get: function () { return chunkPNN6KWXQ_js.LOGIC_NODE_HANDLE_COLORS; }
+  get: function () { return chunk4X7ITYP2_js.LOGIC_NODE_HANDLE_COLORS; }
 });
 Object.defineProperty(exports, "LangChainIcon", {
   enumerable: true,
-  get: function () { return chunkPNN6KWXQ_js.LangChainIcon; }
+  get: function () { return chunk4X7ITYP2_js.LangChainIcon; }
 });
 Object.defineProperty(exports, "ListOperatorFlowNode", {
   enumerable: true,
-  get: function () { return chunkPNN6KWXQ_js.ListOperatorFlowNode; }
+  get: function () { return chunk4X7ITYP2_js.ListOperatorFlowNode; }
 });
 Object.defineProperty(exports, "LogicNodeModal", {
   enumerable: true,
-  get: function () { return chunkPNN6KWXQ_js.LogicNodeModal; }
+  get: function () { return chunk4X7ITYP2_js.LogicNodeModal; }
 });
 Object.defineProperty(exports, "MINIMAP_NODE_COLORS", {
   enumerable: true,
-  get: function () { return chunkPNN6KWXQ_js.MINIMAP_NODE_COLORS; }
+  get: function () { return chunk4X7ITYP2_js.MINIMAP_NODE_COLORS; }
 });
 Object.defineProperty(exports, "ModelProviderFlowNode", {
   enumerable: true,
-  get: function () { return chunkPNN6KWXQ_js.ModelProviderFlowNode; }
+  get: function () { return chunk4X7ITYP2_js.ModelProviderFlowNode; }
 });
 Object.defineProperty(exports, "NodeCard", {
   enumerable: true,
-  get: function () { return chunkPNN6KWXQ_js.NodeCard; }
+  get: function () { return chunk4X7ITYP2_js.NodeCard; }
 });
 Object.defineProperty(exports, "NodeContextMenu", {
   enumerable: true,
-  get: function () { return chunkPNN6KWXQ_js.NodeContextMenu; }
+  get: function () { return chunk4X7ITYP2_js.NodeContextMenu; }
 });
 Object.defineProperty(exports, "NoteFlowNode", {
   enumerable: true,
-  get: function () { return chunkPNN6KWXQ_js.NoteFlowNode; }
+  get: function () { return chunk4X7ITYP2_js.NoteFlowNode; }
 });
 Object.defineProperty(exports, "OpenAIIcon", {
   enumerable: true,
-  get: function () { return chunkPNN6KWXQ_js.OpenAIIcon; }
+  get: function () { return chunk4X7ITYP2_js.OpenAIIcon; }
 });
 Object.defineProperty(exports, "PanelContextMenu", {
   enumerable: true,
-  get: function () { return chunkPNN6KWXQ_js.PanelContextMenu; }
+  get: function () { return chunk4X7ITYP2_js.PanelContextMenu; }
 });
 Object.defineProperty(exports, "ParameterExtractorFlowNode", {
   enumerable: true,
-  get: function () { return chunkPNN6KWXQ_js.ParameterExtractorFlowNode; }
+  get: function () { return chunk4X7ITYP2_js.ParameterExtractorFlowNode; }
 });
 Object.defineProperty(exports, "QuestionClassifierFlowNode", {
   enumerable: true,
-  get: function () { return chunkPNN6KWXQ_js.QuestionClassifierFlowNode; }
+  get: function () { return chunk4X7ITYP2_js.QuestionClassifierFlowNode; }
 });
 Object.defineProperty(exports, "RuleFlowNode", {
   enumerable: true,
-  get: function () { return chunkPNN6KWXQ_js.RuleFlowNode; }
+  get: function () { return chunk4X7ITYP2_js.RuleFlowNode; }
 });
 Object.defineProperty(exports, "SelectionContextMenu", {
   enumerable: true,
-  get: function () { return chunkPNN6KWXQ_js.SelectionContextMenu; }
+  get: function () { return chunk4X7ITYP2_js.SelectionContextMenu; }
 });
 Object.defineProperty(exports, "StartFlowNode", {
   enumerable: true,
-  get: function () { return chunkPNN6KWXQ_js.StartFlowNode; }
+  get: function () { return chunk4X7ITYP2_js.StartFlowNode; }
 });
 Object.defineProperty(exports, "StrandsIcon", {
   enumerable: true,
-  get: function () { return chunkPNN6KWXQ_js.StrandsIcon; }
+  get: function () { return chunk4X7ITYP2_js.StrandsIcon; }
 });
 Object.defineProperty(exports, "TemplateTransformFlowNode", {
   enumerable: true,
-  get: function () { return chunkPNN6KWXQ_js.TemplateTransformFlowNode; }
+  get: function () { return chunk4X7ITYP2_js.TemplateTransformFlowNode; }
 });
 Object.defineProperty(exports, "ToolFlowNode", {
   enumerable: true,
-  get: function () { return chunkPNN6KWXQ_js.ToolFlowNode; }
+  get: function () { return chunk4X7ITYP2_js.ToolFlowNode; }
 });
 Object.defineProperty(exports, "VariableAggregatorFlowNode", {
   enumerable: true,
-  get: function () { return chunkPNN6KWXQ_js.VariableAggregatorFlowNode; }
+  get: function () { return chunk4X7ITYP2_js.VariableAggregatorFlowNode; }
 });
 Object.defineProperty(exports, "VariableAssignerFlowNode", {
   enumerable: true,
-  get: function () { return chunkPNN6KWXQ_js.VariableAssignerFlowNode; }
+  get: function () { return chunk4X7ITYP2_js.VariableAssignerFlowNode; }
 });
 Object.defineProperty(exports, "WorkflowBuilderProvider", {
   enumerable: true,
-  get: function () { return chunkPNN6KWXQ_js.WorkflowBuilderProvider; }
+  get: function () { return chunk4X7ITYP2_js.WorkflowBuilderProvider; }
 });
 Object.defineProperty(exports, "Workspace", {
   enumerable: true,
-  get: function () { return chunkPNN6KWXQ_js.Workspace; }
+  get: function () { return chunk4X7ITYP2_js.Workspace; }
 });
 Object.defineProperty(exports, "getCompatibleModels", {
   enumerable: true,
-  get: function () { return chunkPNN6KWXQ_js.getCompatibleModels; }
+  get: function () { return chunk4X7ITYP2_js.getCompatibleModels; }
 });
 Object.defineProperty(exports, "getDefaultFrameworkForModel", {
   enumerable: true,
-  get: function () { return chunkPNN6KWXQ_js.getDefaultFrameworkForModel; }
+  get: function () { return chunk4X7ITYP2_js.getDefaultFrameworkForModel; }
 });
 Object.defineProperty(exports, "getEntityBadgeColor", {
   enumerable: true,
-  get: function () { return chunkPNN6KWXQ_js.getEntityBadgeColor; }
+  get: function () { return chunk4X7ITYP2_js.getEntityBadgeColor; }
 });
 Object.defineProperty(exports, "getEntityGradient", {
   enumerable: true,
-  get: function () { return chunkPNN6KWXQ_js.getEntityGradient; }
+  get: function () { return chunk4X7ITYP2_js.getEntityGradient; }
 });
 Object.defineProperty(exports, "getEntityHandleColor", {
   enumerable: true,
-  get: function () { return chunkPNN6KWXQ_js.getEntityHandleColor; }
+  get: function () { return chunk4X7ITYP2_js.getEntityHandleColor; }
 });
 Object.defineProperty(exports, "getEntityIcon", {
   enumerable: true,
-  get: function () { return chunkPNN6KWXQ_js.getEntityIcon; }
+  get: function () { return chunk4X7ITYP2_js.getEntityIcon; }
 });
 Object.defineProperty(exports, "getEntityMinimapColor", {
   enumerable: true,
-  get: function () { return chunkPNN6KWXQ_js.getEntityMinimapColor; }
+  get: function () { return chunk4X7ITYP2_js.getEntityMinimapColor; }
 });
 Object.defineProperty(exports, "getFrameworkMeta", {
   enumerable: true,
-  get: function () { return chunkPNN6KWXQ_js.getFrameworkMeta; }
+  get: function () { return chunk4X7ITYP2_js.getFrameworkMeta; }
 });
 Object.defineProperty(exports, "isModelCompatibleWithFramework", {
   enumerable: true,
-  get: function () { return chunkPNN6KWXQ_js.isModelCompatibleWithFramework; }
+  get: function () { return chunk4X7ITYP2_js.isModelCompatibleWithFramework; }
 });
 Object.defineProperty(exports, "useModalStore", {
   enumerable: true,
-  get: function () { return chunkPNN6KWXQ_js.useModalStore; }
+  get: function () { return chunk4X7ITYP2_js.useModalStore; }
 });
 Object.defineProperty(exports, "useWorkflowBuilderClient", {
   enumerable: true,
-  get: function () { return chunkPNN6KWXQ_js.useWorkflowBuilderClient; }
+  get: function () { return chunk4X7ITYP2_js.useWorkflowBuilderClient; }
 });
 Object.defineProperty(exports, "useWorkflowBuilderClientOptional", {
   enumerable: true,
-  get: function () { return chunkPNN6KWXQ_js.useWorkflowBuilderClientOptional; }
+  get: function () { return chunk4X7ITYP2_js.useWorkflowBuilderClientOptional; }
 });
 Object.defineProperty(exports, "useWorkflowStore", {
   enumerable: true,
-  get: function () { return chunkPNN6KWXQ_js.useWorkflowStore; }
+  get: function () { return chunk4X7ITYP2_js.useWorkflowStore; }
 });
 Object.defineProperty(exports, "GraphNodeBadge", {
   enumerable: true,