@datatechsolutions/ui 2.11.17 → 2.11.18

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-57OBMWRA.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-57OBMWRA.mjs';
-import { 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 } 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 '../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 { CpuChipIcon, ArrowPathRoundedSquareIcon, ArrowsPointingOutIcon, ArrowsPointingInIcon, BoltIcon, ClockIcon, CheckIcon, Cog6ToothIcon, AdjustmentsHorizontalIcon, CircleStackIcon, KeyIcon, TrashIcon, PlusIcon, XMarkIcon, EyeIcon, ArrowPathIcon, PlayIcon, StopIcon, XCircleIcon, CheckCircleIcon, VariableIcon, ChevronDownIcon, ChevronRightIcon, ExclamationCircleIcon, ClipboardDocumentIcon, ArrowDownTrayIcon, ArrowUpTrayIcon, ExclamationTriangleIcon, CommandLineIcon } from '@heroicons/react/24/outline';
+import { 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 { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { create } from 'zustand';
 
@@ -560,7 +560,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__ */ jsxs("div", { className: "flex flex-col items-center justify-center px-4 py-12 text-center", children: [
       /* @__PURE__ */ jsx(KeyIcon, { className: "mb-2 h-8 w-8 text-gray-400 dark:text-gray-500" }),
@@ -568,35 +568,87 @@ function ModelsTab({ modelProviders, selectedProviderId, onSelectProvider, t })
       /* @__PURE__ */ jsx("p", { className: "mt-1 text-xs text-gray-400 dark:text-gray-500", children: t("agentDrawer.dragProviderHint") })
     ] });
   }
-  return /* @__PURE__ */ jsxs("div", { className: "space-y-2 p-4", children: [
-    /* @__PURE__ */ jsx("p", { className: "mb-3 text-xs text-gray-500 dark:text-gray-400", children: t("agentDrawer.modelsDescription") }),
-    modelProviders.map((provider) => {
-      const isSelected = selectedProviderId === provider.id;
-      const logo = PROVIDER_LOGOS[provider.provider];
-      return /* @__PURE__ */ jsxs(
-        "button",
-        {
-          type: "button",
-          onClick: () => onSelectProvider(provider.id),
-          className: `flex w-full items-center gap-3 rounded-xl border px-4 py-3 text-left transition-all ${isSelected ? "border-rose-500/30 bg-rose-50/50 ring-1 ring-rose-500/20 dark:border-rose-400/20 dark:bg-rose-500/5" : "border-gray-200/50 bg-gray-50/30 hover:border-gray-300 dark:border-white/10 dark:bg-white/[0.02] dark:hover:border-white/20"}`,
-          children: [
-            logo ? /* @__PURE__ */ jsx("div", { className: "flex h-10 w-10 shrink-0 items-center justify-center rounded-xl bg-white/10 p-1.5", children: /* @__PURE__ */ jsx("img", { src: logo, alt: "", className: "h-6 w-6 object-contain", loading: "lazy" }) }) : /* @__PURE__ */ jsx("div", { className: "flex h-10 w-10 shrink-0 items-center justify-center rounded-xl bg-gradient-to-br from-rose-500 to-pink-600", children: /* @__PURE__ */ jsx(KeyIcon, { className: "h-5 w-5 text-white" }) }),
-            /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
-              /* @__PURE__ */ jsx("p", { className: `text-sm font-medium ${isSelected ? "text-gray-900 dark:text-white" : "text-gray-600 dark:text-gray-400"}`, children: provider.name }),
-              /* @__PURE__ */ jsxs("div", { className: "mt-0.5 flex items-center gap-2 text-[10px] text-gray-400 dark:text-gray-500", children: [
-                /* @__PURE__ */ jsxs("span", { children: [
-                  provider.modelCount,
-                  " models"
-                ] }),
-                /* @__PURE__ */ jsx("span", { className: `rounded-full px-1.5 py-0.5 text-[9px] font-medium ${provider.configured ? "bg-green-100 text-green-600 dark:bg-green-500/10 dark:text-green-400" : "bg-amber-100 text-amber-600 dark:bg-amber-500/10 dark:text-amber-400"}`, children: provider.configured ? t("agentDrawer.providerConfigured") : t("agentDrawer.providerSetup") })
-              ] })
-            ] }),
-            /* @__PURE__ */ jsx("div", { className: `flex h-5 w-5 shrink-0 items-center justify-center rounded-full transition-all ${isSelected ? "bg-rose-500 text-white" : "border border-gray-300 dark:border-gray-600"}`, children: isSelected && /* @__PURE__ */ jsx(CheckIcon, { className: "h-3 w-3" }) })
-          ]
-        },
-        provider.id
-      );
+  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__ */ jsxs("div", { className: "space-y-4 p-4", children: [
+    /* @__PURE__ */ jsxs("div", { children: [
+      /* @__PURE__ */ jsx("label", { className: "mb-2 block text-xs font-medium text-gray-500 dark:text-gray-400", children: t("agentDrawer.selectProvider") }),
+      /* @__PURE__ */ jsx("div", { className: "space-y-1.5", children: modelProviders.map((provider) => {
+        const isSelected = selectedProviderId === provider.id;
+        const logo = PROVIDER_LOGOS[provider.provider];
+        return /* @__PURE__ */ jsxs(
+          "button",
+          {
+            type: "button",
+            onClick: () => onSelectProvider(provider.id),
+            className: `flex w-full items-center gap-3 rounded-xl border px-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__ */ jsx("div", { className: "flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-white/10 p-1", children: /* @__PURE__ */ jsx("img", { src: logo, alt: "", className: "h-5 w-5 object-contain", loading: "lazy" }) }) : /* @__PURE__ */ 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__ */ jsx(KeyIcon, { className: "h-4 w-4 text-white" }) }),
+              /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
+                /* @__PURE__ */ 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__ */ jsxs("div", { className: "flex items-center gap-1.5 text-[10px] text-gray-400 dark:text-gray-500", children: [
+                  /* @__PURE__ */ jsxs("span", { children: [
+                    provider.modelCount,
+                    " models"
+                  ] }),
+                  provider.configured && /* @__PURE__ */ jsx("span", { className: "h-1.5 w-1.5 rounded-full bg-green-500" })
+                ] })
+              ] }),
+              /* @__PURE__ */ 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__ */ jsx(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__ */ jsx("p", { className: "text-xs text-gray-400 dark:text-gray-500", children: t("agentDrawer.noModelsForProvider") });
+      const compatibleModels = providerModels.models.filter(
+        (m) => isModelCompatibleWithFramework(m.id, agentFramework)
+      );
+      const incompatibleModels = providerModels.models.filter(
+        (m) => !isModelCompatibleWithFramework(m.id, agentFramework)
+      );
+      return /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsx("label", { className: "mb-2 block text-xs font-medium text-gray-500 dark:text-gray-400", children: t("agentDrawer.selectModel") }),
+        /* @__PURE__ */ jsxs("div", { className: "space-y-1", children: [
+          compatibleModels.map((model) => {
+            const isSelected = selectedModelId === model.id;
+            const { IconComponent, color, providerLabel } = getModelIcon(model.id);
+            return /* @__PURE__ */ 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__ */ jsx(IconComponent, { className: `h-4 w-4 flex-shrink-0 ${isSelected ? color : "text-gray-400 dark:text-gray-500"}` }),
+                  /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
+                    /* @__PURE__ */ 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__ */ jsx("p", { className: "text-[10px] text-gray-400 dark:text-gray-500", children: providerLabel })
+                  ] }),
+                  isSelected && /* @__PURE__ */ jsx(CheckIcon, { className: "h-3.5 w-3.5 shrink-0 text-indigo-500" })
+                ]
+              },
+              model.id
+            );
+          }),
+          incompatibleModels.length > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ 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__ */ 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__ */ jsx(CpuChipIcon, { className: "h-4 w-4 text-gray-400" }),
+              /* @__PURE__ */ jsx("p", { className: "text-xs text-gray-500", children: model.name })
+            ] }, model.id))
+          ] })
+        ] })
+      ] });
+    })()
   ] });
 }
 function ToolsTab({ agentTools, enabledToolIds, onToggle, agentFramework, t }) {
@@ -660,7 +712,7 @@ function AgentModal({ onSaved }) {
   const models = agentData?.models ?? [];
   const availableAgentTools = agentData?.agentTools ?? [];
   const isCreateMode = agentData?.isCreateMode ?? false;
-  const [activeTab, setActiveTab] = useState("config");
+  const [activeTab, setActiveTab] = useState("profile");
   const [selectedModelId, setSelectedModelId] = useState("");
   const [selectedFramework, setSelectedFramework] = useState("custom");
   const [temperature, setTemperature] = useState(0.7);
@@ -677,7 +729,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 +758,64 @@ function AgentModal({ onSaved }) {
     onSaved?.();
   }, [markSaved, onSaved]);
   if (!agent) return null;
-  const tabList = ["config", "tools", "models", "results"];
-  const tabs = /* @__PURE__ */ jsx("div", { className: "flex border-b border-white/20 dark:border-white/10", children: tabList.map((tab) => /* @__PURE__ */ jsxs(
-    "button",
-    {
-      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__ */ jsx("span", { className: "ml-1 inline-flex h-4 min-w-4 items-center justify-center rounded-full bg-amber-500/20 px-1 text-[9px] font-bold text-amber-600 dark:text-amber-400", children: enabledToolIds.size }),
-        tab === "models" && selectedProviderId && /* @__PURE__ */ jsx("span", { className: "ml-1 inline-flex h-4 min-w-4 items-center justify-center rounded-full bg-rose-500/20 px-1 text-[9px] font-bold text-rose-600 dark:text-rose-400", children: "1" })
-      ]
-    },
-    tab
-  )) });
-  const footer = /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
-    /* @__PURE__ */ jsx("div", { role: "status", "aria-live": "polite", className: "text-xs", children: dirty ? /* @__PURE__ */ jsx("span", { className: "text-amber-500 dark:text-amber-400", children: t("agentDrawer.unsavedChanges") }) : /* @__PURE__ */ jsx("span", { className: "text-emerald-500 dark:text-emerald-400", children: t("agentDrawer.saved") }) }),
-    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
-      /* @__PURE__ */ 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__ */ 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: UserCircleIcon, group: t("agentDrawer.agentGroup") },
+    { id: "framework", label: t("agentDrawer.frameworkSection"), icon: Cog6ToothIcon, 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") }
+  ];
+  const avatarUrl = agent.avatar;
+  const sidebarFooter = /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 px-4 py-3", children: [
+    /* @__PURE__ */ jsx("div", { role: "status", "aria-live": "polite", className: "flex-1 text-xs", children: dirty ? /* @__PURE__ */ jsx("span", { className: "text-amber-500 dark:text-amber-400", children: t("agentDrawer.unsavedChanges") }) : /* @__PURE__ */ jsx("span", { className: "text-emerald-500 dark:text-emerald-400", children: t("agentDrawer.saved") }) }),
+    /* @__PURE__ */ 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__ */ jsxs(
-    GlassModalShell,
+    SettingsDialog,
     {
       open,
       onClose: handleClose,
       title: agent.name,
-      subtitle: agent.role ?? "",
-      gradient: "from-indigo-500 to-purple-600",
-      icon: /* @__PURE__ */ jsx(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__ */ jsx(AgentProfileHeader, { agent, models, t, selectedModelId, setSelectedModelId, selectedFramework, temperature, setTemperature, elo, setElo, onChanged: markDirty }),
-        activeTab === "config" && /* @__PURE__ */ jsx(ConfigTab, { agent, models, t, selectedModelId, setSelectedModelId, selectedFramework, setSelectedFramework: (fw) => setSelectedFramework(fw), temperature, setTemperature, dirty, markDirty, markSaved: handleMarkSaved }),
+        activeTab === "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 === "tools" && /* @__PURE__ */ jsx(ToolsTab, { agentTools: availableAgentTools, enabledToolIds, onToggle: handleToggleTool, agentFramework: selectedFramework, t }),
-        activeTab === "models" && /* @__PURE__ */ jsx(ModelsTab, { modelProviders: availableModelProviders, selectedProviderId, onSelectProvider: handleSelectProvider, t }),
+        activeTab === "models" && /* @__PURE__ */ jsx(
+          ModelsTab,
+          {
+            modelProviders: availableModelProviders,
+            selectedProviderId,
+            onSelectProvider: handleSelectProvider,
+            models,
+            selectedModelId,
+            onSelectModel: (modelId) => {
+              setSelectedModelId(modelId);
+              markDirty();
+            },
+            agentFramework: selectedFramework,
+            t
+          }
+        ),
         activeTab === "results" && /* @__PURE__ */ jsx(ResultsTab, { agentId: agent.agentId, t })
       ]
     }