@datatechsolutions/ui 2.11.4 → 2.11.6

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, WorkspaceModal, CATEGORY_COLORS, CATEGORY_PILL_COLORS, ICON_MAP, WorkflowCanvas, getEntityIcon, getEntityGradient, useWorkflowStore, LOGIC_ICON_MAP, LOGIC_NODE_GRADIENTS, getFrameworkMeta, getCompatibleModels, isModelCompatibleWithFramework, FRAMEWORK_META } from '../chunk-BHKBEP2Y.mjs';
-export { AgentFlowNode, AgentToolFlowNode, AnswerFlowNode, AnthropicIcon, CodeFlowNode, CrewAIIcon, DocumentExtractorFlowNode, EndFlowNode, EntityFlowNode, FRAMEWORK_META, GoogleADKIcon, GroupFlowNode, HttpRequestFlowNode, IfElseFlowNode, IterationFlowNode, IterationStartFlowNode, KnowledgeBaseFlowNode, LOGIC_ICON_MAP, LOGIC_NODE_BADGE_COLORS, LOGIC_NODE_GRADIENTS, LOGIC_NODE_HANDLE_COLORS, LangChainIcon, ListOperatorFlowNode, LogicNodeModal, MINIMAP_NODE_COLORS, NodeCard, NodeContextMenu, NoteFlowNode, OpenAIIcon, PanelContextMenu, ParameterExtractorFlowNode, QuestionClassifierFlowNode, RuleFlowNode, SelectionContextMenu, StartFlowNode, StrandsIcon, TemplateTransformFlowNode, ToolFlowNode, VariableAggregatorFlowNode, VariableAssignerFlowNode, WorkflowBuilderProvider, Workspace, WorkspaceModal, getCompatibleModels, getDefaultFrameworkForModel, getEntityBadgeColor, getEntityGradient, getEntityHandleColor, getEntityIcon, getEntityMinimapColor, getFrameworkMeta, isModelCompatibleWithFramework, useModalStore, useWorkflowBuilderClient, useWorkflowBuilderClientOptional, useWorkflowStore } from '../chunk-BHKBEP2Y.mjs';
-import { FormInput, FormTextarea, Button, GlassFormModal, Input, DynamicIslandConfirm } from '../chunk-F6EBSQF6.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-TM2UUOQO.mjs';
+export { AgentFlowNode, AgentToolFlowNode, AnswerFlowNode, AnthropicIcon, CodeFlowNode, CrewAIIcon, DocumentExtractorFlowNode, EndFlowNode, EntityFlowNode, FRAMEWORK_META, GoogleADKIcon, GroupFlowNode, HttpRequestFlowNode, IfElseFlowNode, IterationFlowNode, IterationStartFlowNode, KnowledgeBaseFlowNode, LOGIC_ICON_MAP, LOGIC_NODE_BADGE_COLORS, LOGIC_NODE_GRADIENTS, LOGIC_NODE_HANDLE_COLORS, LangChainIcon, ListOperatorFlowNode, LogicNodeModal, MINIMAP_NODE_COLORS, NodeCard, NodeContextMenu, NoteFlowNode, OpenAIIcon, PanelContextMenu, ParameterExtractorFlowNode, QuestionClassifierFlowNode, RuleFlowNode, SelectionContextMenu, StartFlowNode, StrandsIcon, TemplateTransformFlowNode, ToolFlowNode, VariableAggregatorFlowNode, VariableAssignerFlowNode, WorkflowBuilderProvider, Workspace, getCompatibleModels, getDefaultFrameworkForModel, getEntityBadgeColor, getEntityGradient, getEntityHandleColor, getEntityIcon, getEntityMinimapColor, getFrameworkMeta, isModelCompatibleWithFramework, useModalStore, useWorkflowBuilderClient, useWorkflowBuilderClientOptional, useWorkflowStore } from '../chunk-TM2UUOQO.mjs';
+import { 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';
@@ -284,7 +284,12 @@ function AgentCapabilityCard({ elo, setElo, models, selectedModelId, setSelected
             step: "50",
             value: elo,
             onChange: handleEloChange,
-            className: "relative z-10 h-5 w-full cursor-pointer appearance-none bg-transparent [&::-webkit-slider-thumb]:h-4 [&::-webkit-slider-thumb]:w-4 [&::-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"
+            "aria-label": t("agentDrawer.capabilityRating"),
+            "aria-valuemin": 800,
+            "aria-valuemax": 2400,
+            "aria-valuenow": elo,
+            "aria-valuetext": `${elo} ELO \u2014 ${t(`agentDrawer.tier${tierInfo.tierKey.charAt(0).toUpperCase()}${tierInfo.tierKey.slice(1)}`)}`,
+            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-4 [&::-webkit-slider-thumb]:w-4 [&::-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: ${elo < 1200 ? "#06b6d4" : elo < 1600 ? "#ec4899" : elo < 2e3 ? "#f59e0b" : "#10b981"}; box-shadow: 0 0 6px ${elo < 1200 ? "rgba(6,182,212,0.5)" : elo < 1600 ? "rgba(236,72,153,0.5)" : elo < 2e3 ? "rgba(245,158,11,0.5)" : "rgba(16,185,129,0.5)"}; }` })
@@ -329,16 +334,18 @@ function AgentCapabilityCard({ elo, setElo, models, selectedModelId, setSelected
         /* @__PURE__ */ jsx("span", { className: `text-[10px] font-semibold ${tierInfo.color}`, children: t(`agentDrawer.${tierInfo.autonomyKey}`) })
       ] }),
       /* @__PURE__ */ jsx("div", { className: "flex gap-1", children: [
-        { level: 25, label: "Low" },
-        { level: 50, label: "Med" },
-        { level: 75, label: "High" },
-        { level: 100, label: "Full" }
-      ].map(({ level }) => /* @__PURE__ */ jsx(
+        { level: 25, labelKey: "autonomyLow" },
+        { level: 50, labelKey: "autonomyMedium" },
+        { level: 75, labelKey: "autonomyHigh" },
+        { level: 100, labelKey: "autonomyFull" }
+      ].map(({ level, labelKey }) => /* @__PURE__ */ jsx(
         "button",
         {
           type: "button",
           onClick: () => handleAutonomyClick(level),
-          className: `h-2 flex-1 rounded-full transition-all ${level <= tierInfo.autonomyPercent ? `bg-gradient-to-r ${tierInfo.barColor} hover:opacity-80` : "bg-gray-200 hover:bg-gray-300 dark:bg-gray-700 dark:hover:bg-gray-600"}`
+          "aria-label": t(`agentDrawer.${labelKey}`),
+          "aria-pressed": level <= tierInfo.autonomyPercent,
+          className: `h-2 flex-1 rounded-full transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 ${level <= tierInfo.autonomyPercent ? `bg-gradient-to-r ${tierInfo.barColor} hover:opacity-80` : "bg-gray-200 hover:bg-gray-300 dark:bg-gray-700 dark:hover:bg-gray-600"}`
         },
         level
       )) }),
@@ -361,7 +368,7 @@ function ConfigTab({ agent, models, t, selectedModelId, setSelectedModelId, sele
     setPromptText(event.target.value);
     markDirty();
   }, []);
-  const handleSave = useCallback(() => {
+  useCallback(() => {
     markSaved();
   }, [markSaved]);
   const temperaturePercent = temperature * 100;
@@ -465,7 +472,12 @@ function ConfigTab({ agent, models, t, selectedModelId, setSelectedModelId, sele
             step: "0.05",
             value: temperature,
             onChange: handleTemperatureChange,
-            className: "relative z-10 h-5 w-full cursor-pointer appearance-none bg-transparent [&::-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",
+            "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
@@ -489,21 +501,9 @@ function ConfigTab({ agent, models, t, selectedModelId, setSelectedModelId, sele
     /* @__PURE__ */ jsxs("div", { children: [
       /* @__PURE__ */ jsxs("div", { className: "mb-1 flex items-center justify-between", children: [
         /* @__PURE__ */ jsx("label", { className: "text-xs font-medium text-gray-500 dark:text-gray-400", children: t("agentDrawer.systemPrompt") }),
-        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
-          /* @__PURE__ */ jsxs("span", { className: "text-[10px] text-gray-400 dark:text-gray-500", children: [
-            promptText.length,
-            " chars"
-          ] }),
-          dirty && /* @__PURE__ */ jsx(
-            "button",
-            {
-              type: "button",
-              onClick: handleSave,
-              className: "rounded-md bg-gradient-to-r from-indigo-500 to-purple-500 px-2.5 py-1 text-[10px] font-semibold text-white shadow-sm transition-all hover:from-indigo-600 hover:to-purple-600",
-              children: t("agentDrawer.save")
-            }
-          ),
-          !dirty && promptText.length > 0 && /* @__PURE__ */ jsx("span", { className: "text-[10px] font-medium text-emerald-500", children: t("agentDrawer.saved") })
+        /* @__PURE__ */ jsxs("span", { className: "text-[10px] text-gray-400 dark:text-gray-500", children: [
+          promptText.length,
+          " chars"
         ] })
       ] }),
       /* @__PURE__ */ jsx(
@@ -547,7 +547,7 @@ function ResultsTab({ agentId, t }) {
     ] })
   ] });
 }
-function AgentDrawer({ onSaved }) {
+function AgentModal({ onSaved }) {
   const t = useTranslations("agents.workflow");
   const activeModal = useModalStore((s) => s.activeModal);
   const agentData = useModalStore((s) => s.agentData);
@@ -593,8 +593,32 @@ function AgentDrawer({ onSaved }) {
     },
     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")
+        }
+      )
+    ] })
+  ] });
   return /* @__PURE__ */ jsxs(
-    WorkspaceModal,
+    GlassModalShell,
     {
       open,
       onClose: handleClose,
@@ -602,7 +626,11 @@ function AgentDrawer({ onSaved }) {
       subtitle: agent.role ?? "",
       gradient: "from-indigo-500 to-purple-600",
       icon: /* @__PURE__ */ jsx(CpuChipIcon, { className: "h-6 w-6 text-white" }),
-      tabs,
+      label: isCreateMode ? t("agentDrawer.createAgent") : t("agentDrawer.editAgent"),
+      headerActions: tabs,
+      footer,
+      maxWidth: "2xl",
+      closeLabel: t("agentDrawer.close"),
       children: [
         /* @__PURE__ */ jsx(AgentProfileHeader, { agent, models, t, selectedModelId, setSelectedModelId, selectedFramework, temperature, setTemperature, elo, setElo, onChanged: markDirty }),
         activeTab === "config" ? /* @__PURE__ */ jsx(ConfigTab, { agent, models, t, selectedModelId, setSelectedModelId, selectedFramework, setSelectedFramework: (fw) => setSelectedFramework(fw), temperature, setTemperature, dirty, markDirty, markSaved: handleMarkSaved }) : /* @__PURE__ */ jsx(ResultsTab, { agentId: agent.agentId, t })
@@ -621,7 +649,7 @@ var useSubworkflowStore = create((set) => ({
   retryCount: 0,
   dirty: false,
   // Actions
-  openDrawer: (tool) => set({
+  openModal: (tool) => set({
     tool,
     open: true,
     name: tool.name ?? "",
@@ -685,6 +713,7 @@ function ConfigSection({ title, icon: Icon, defaultOpen = true, children }) {
       {
         type: "button",
         onClick: () => setOpen(!open),
+        "aria-expanded": open,
         className: "flex w-full items-center gap-2 px-4 py-2.5 text-left hover:bg-white/5",
         children: [
           open ? /* @__PURE__ */ jsx(ChevronDownIcon, { className: "h-3 w-3 text-gray-400" }) : /* @__PURE__ */ jsx(ChevronRightIcon, { className: "h-3 w-3 text-gray-400" }),
@@ -696,7 +725,7 @@ function ConfigSection({ title, icon: Icon, defaultOpen = true, children }) {
     open && /* @__PURE__ */ jsx("div", { className: "px-4 pb-3", children })
   ] });
 }
-function SubworkflowDrawer({ onSaved, onMaximize }) {
+function SubworkflowModal({ onSaved, onMaximize }) {
   const t = useTranslations("agents.workflow");
   const tool = useSubworkflowStore((s) => s.tool);
   const open = useSubworkflowStore((s) => s.open);
@@ -752,16 +781,42 @@ function SubworkflowDrawer({ onSaved, onMaximize }) {
   const endConfig = endNode?.data?.config;
   const inputVariables = (startConfig?.inputVariables ?? []).map((v) => ({ name: v, type: "string" }));
   const outputVariables = (endConfig?.outputVariables ?? []).map((v) => ({ name: v, type: "string" }));
+  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("subworkflowDrawer.unsavedChanges") }) : /* @__PURE__ */ jsx("span", { className: "text-emerald-500 dark:text-emerald-400", children: t("subworkflowDrawer.saved") }) }),
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          onClick: closeModal,
+          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("subworkflowDrawer.cancel")
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          onClick: handleSave,
+          disabled: isCreateMode && !name.trim(),
+          className: `rounded-lg px-4 py-2 text-xs font-semibold text-white shadow-sm transition-all ${dirty ? "bg-gradient-to-r from-teal-500 to-cyan-500 hover:from-teal-600 hover:to-cyan-600" : "cursor-not-allowed bg-gray-300 dark:bg-gray-700"}`,
+          children: isCreateMode ? t("subworkflowDrawer.create") : t("subworkflowDrawer.save")
+        }
+      )
+    ] })
+  ] });
   return /* @__PURE__ */ jsx(
-    WorkspaceModal,
+    GlassModalShell,
     {
       open,
       onClose: closeModal,
       title: isCreateMode ? t("subworkflowDrawer.createTitle") : name,
       subtitle: t("subworkflowDrawer.subworkflow"),
+      label: isCreateMode ? t("subworkflowDrawer.new") : t("subworkflowDrawer.edit"),
       gradient: "from-teal-500 to-cyan-600",
       icon: /* @__PURE__ */ jsx(ArrowPathRoundedSquareIcon, { className: "h-6 w-6 text-white" }),
-      maxWidth: "max-w-6xl",
+      maxWidth: "6xl",
+      footer,
       children: /* @__PURE__ */ jsxs("div", { className: "flex h-[80vh] min-h-[600px]", children: [
         /* @__PURE__ */ jsxs("div", { className: "flex w-72 flex-shrink-0 flex-col overflow-y-auto border-r border-white/10", children: [
           isCreateMode ? /* @__PURE__ */ jsxs("div", { className: "border-b border-white/10 bg-gradient-to-br from-teal-500/15 via-cyan-500/8 to-transparent px-4 py-4 dark:from-teal-500/8 dark:via-cyan-500/4", children: [
@@ -840,7 +895,12 @@ function SubworkflowDrawer({ onSaved, onMaximize }) {
                   step: "1000",
                   value: timeoutMs,
                   onChange: (event) => setTimeoutMs(parseInt(event.target.value, 10)),
-                  className: "h-3 w-full cursor-pointer appearance-none rounded-full bg-gray-200 dark:bg-gray-700 [&::-webkit-slider-thumb]:h-3 [&::-webkit-slider-thumb]:w-3 [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:bg-teal-500"
+                  "aria-label": t("subworkflowDrawer.timeout"),
+                  "aria-valuemin": 1,
+                  "aria-valuemax": 30,
+                  "aria-valuenow": timeoutMs / 1e3,
+                  "aria-valuetext": `${(timeoutMs / 1e3).toFixed(0)} seconds`,
+                  className: "h-3 w-full cursor-pointer appearance-none rounded-full bg-gray-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-teal-500 dark:bg-gray-700 [&::-webkit-slider-thumb]:h-3 [&::-webkit-slider-thumb]:w-3 [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:bg-teal-500"
                 }
               )
             ] }),
@@ -861,16 +921,7 @@ function SubworkflowDrawer({ onSaved, onMaximize }) {
               )) })
             ] })
           ] }),
-          /* @__PURE__ */ jsx("div", { className: "mt-auto border-t border-white/10 px-4 py-3", children: dirty ? /* @__PURE__ */ jsx(
-            "button",
-            {
-              type: "button",
-              onClick: handleSave,
-              disabled: isCreateMode && !name.trim(),
-              className: "w-full rounded-lg bg-gradient-to-r from-teal-500 to-cyan-500 py-2 text-xs font-semibold text-white shadow-sm transition-all hover:from-teal-600 hover:to-cyan-600 disabled:cursor-not-allowed disabled:opacity-40",
-              children: isCreateMode ? t("subworkflowDrawer.create") : t("subworkflowDrawer.save")
-            }
-          ) : /* @__PURE__ */ jsx("div", { className: "text-center text-[10px] font-medium text-emerald-500", children: t("subworkflowDrawer.saved") }) })
+          /* @__PURE__ */ jsx("div", { className: "mt-auto" })
         ] }),
         /* @__PURE__ */ jsx("div", { className: "flex-1", children: /* @__PURE__ */ jsx(
           WorkflowCanvas,
@@ -887,6 +938,42 @@ function SubworkflowDrawer({ onSaved, onMaximize }) {
     }
   );
 }
+var LEGACY_WIDTH_MAP = {
+  "max-w-xl": "xl",
+  "max-w-2xl": "2xl",
+  "max-w-4xl": "4xl",
+  "max-w-6xl": "6xl",
+  "max-w-full": "full"
+};
+function WorkspaceModal({
+  open,
+  onClose,
+  title,
+  subtitle,
+  icon,
+  gradient = "from-gray-400 to-gray-500",
+  maxWidth = "2xl",
+  tabs,
+  children
+}) {
+  const resolvedSize = LEGACY_WIDTH_MAP[maxWidth] ?? maxWidth;
+  return /* @__PURE__ */ jsxs(
+    GlassModalShell,
+    {
+      open,
+      onClose,
+      title,
+      subtitle,
+      icon,
+      gradient,
+      maxWidth: resolvedSize,
+      children: [
+        tabs,
+        children
+      ]
+    }
+  );
+}
 function PipelineSettingsModal({ onSave }) {
   const t = useTranslations("agents.workflow");
   const activeModal = useModalStore((s) => s.activeModal);
@@ -915,16 +1002,45 @@ function PipelineSettingsModal({ onSave }) {
       setIsSaving(false);
     }
   };
+  const footer = /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-end gap-2", children: [
+    /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        onClick: closeModal,
+        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("cancel")
+      }
+    ),
+    /* @__PURE__ */ jsxs(
+      Button,
+      {
+        type: "submit",
+        form: "pipeline-settings-form",
+        color: "ios-glass-blue",
+        loading: isSaving,
+        loadingText: t("saving"),
+        children: [
+          /* @__PURE__ */ jsx(CheckIcon, { className: "h-4 w-4" }),
+          t("saveSettings")
+        ]
+      }
+    )
+  ] });
   return /* @__PURE__ */ jsx(
-    WorkspaceModal,
+    GlassModalShell,
     {
       open,
       onClose: closeModal,
       title: t("pipelineSettings"),
       subtitle: t("pipelineSettingsSubtitle"),
+      label: t("settings"),
       icon: /* @__PURE__ */ jsx(Cog6ToothIcon, { className: "h-5 w-5 text-white" }),
       gradient: "from-indigo-500 to-purple-600",
-      children: /* @__PURE__ */ jsxs("form", { onSubmit: handleSubmit, className: "space-y-6", children: [
+      maxWidth: "md",
+      footer,
+      onSubmit: handleSubmit,
+      children: /* @__PURE__ */ jsxs("form", { id: "pipeline-settings-form", onSubmit: handleSubmit, className: "space-y-6", children: [
         /* @__PURE__ */ jsx(
           FormInput,
           {
@@ -944,21 +1060,7 @@ function PipelineSettingsModal({ onSave }) {
             placeholder: t("pipelineDescriptionPlaceholder"),
             rows: 4
           }
-        ),
-        /* @__PURE__ */ jsx("div", { className: "pt-2", children: /* @__PURE__ */ jsxs(
-          Button,
-          {
-            type: "submit",
-            color: "ios-glass-blue",
-            fullWidth: true,
-            loading: isSaving,
-            loadingText: t("saving"),
-            children: [
-              /* @__PURE__ */ jsx(CheckIcon, { className: "h-4 w-4" }),
-              t("saveSettings")
-            ]
-          }
-        ) })
+        )
       ] })
     }
   );
@@ -2951,6 +3053,6 @@ function useHelpLines() {
   };
 }
 
-export { AgentDrawer, AmazonNovaIcon, AnthropicModelIcon, AutoSaveWorkspace, DslExportModal, DslImportModal, DynamicIslandConfirm2 as DynamicIslandConfirm, MetaLlamaIcon, NodePalette, PipelineSettingsModal, PreviewPanel, RunInputDialog, RunPanel, SaveStatusBadge, SubworkflowDrawer, VariableInspector, VersionHistoryPanel, WorkflowListBar, getModelIcon, useCanRedo, useCanUndo, useCanvasShortcuts, useClipboard, useContextMenu, useEditingNodeId, useHasCopied, useHelpLines, useIsRunning, useNodeResults, useSelectedNodeCount, useSubworkflowStore, useUndoRedo };
+export { AgentModal, AmazonNovaIcon, AnthropicModelIcon, AutoSaveWorkspace, DslExportModal, DslImportModal, DynamicIslandConfirm2 as DynamicIslandConfirm, MetaLlamaIcon, NodePalette, PipelineSettingsModal, PreviewPanel, RunInputDialog, RunPanel, SaveStatusBadge, SubworkflowModal, VariableInspector, VersionHistoryPanel, WorkflowListBar, WorkspaceModal, getModelIcon, useCanRedo, useCanUndo, useCanvasShortcuts, useClipboard, useContextMenu, useEditingNodeId, useHasCopied, useHelpLines, useIsRunning, useNodeResults, useSelectedNodeCount, useSubworkflowStore, useUndoRedo };
 //# sourceMappingURL=index.mjs.map
 //# sourceMappingURL=index.mjs.map