@datatechsolutions/ui 3.13.0 → 3.14.0

package/dist/platform/pages/index.mjs

@@ -1,24 +1,24 @@
 "use client";
 import { adaptWorkflowGraphToUi, formatDurationMs } from '../../chunk-UQXVCVAN.mjs';
-import { WorkflowWorkspace } from '../../chunk-VIB42VMZ.mjs';
-export { RolesPageView, UsersPageView } from '../../chunk-VIB42VMZ.mjs';
-import { DIALECT_CATEGORIES, DatasourceModal, findDialect, findCategory } from '../../chunk-KWH7JIRP.mjs';
-export { DIALECT_CATEGORIES, DatasourceFormModal, DatasourceModal, findCategory, findDialect } from '../../chunk-KWH7JIRP.mjs';
-import { defaultRuleForm, RuleForm, ExecutionTimelinePanel, defaultRuleCondition, defaultRuleAction, RuleConditionBuilder, RuleActionBuilder } from '../../chunk-UPYACFZJ.mjs';
+import { WorkflowWorkspace } from '../../chunk-U7VMFQFN.mjs';
+export { RolesPageView, UsersPageView } from '../../chunk-U7VMFQFN.mjs';
+import { DIALECT_CATEGORIES, DatasourceModal, findDialect, findCategory } from '../../chunk-Q5TZTA6H.mjs';
+export { DIALECT_CATEGORIES, DatasourceFormModal, DatasourceModal, findCategory, findDialect } from '../../chunk-Q5TZTA6H.mjs';
+import { defaultRuleForm, RuleForm, ExecutionTimelinePanel, defaultRuleCondition, defaultRuleAction, RuleConditionBuilder, RuleActionBuilder } from '../../chunk-WTSMTLSP.mjs';
 import '../../chunk-JB6RNAD2.mjs';
 import '../../chunk-LEXBTVGM.mjs';
-import '../../chunk-UXHJS2SH.mjs';
-import { HeroSection, SearchBar, FormSection, ChipPicker, PageLoadingState, PageEmptyState, EntityCard, CreateActionButton, GlassModal, FormGrid, FormSelect, FormInput, FormTextarea, SectionHeader, Text, Form, FormActionsRow, Table, TableHead, TableRow, TableHeader, TableBody, TableCell, InlineForm, CopyableId, ListCard, ListCardItem, Avatar, SectionCard, Tabs, TabsList, TabsTrigger, TabsContent, StepIndicator, FilterTileButton, FormToggle, Spinner, StatusBadge, FormCheckbox, SegmentedControl, DatePicker, TimePicker } from '../../chunk-MSKKNPRE.mjs';
-import '../../chunk-ZEFNBGYI.mjs';
+import '../../chunk-33ZWFDVG.mjs';
+import { HeroSection, SearchBar, FormSection, ChipPicker, PageLoadingState, PageEmptyState, EntityCard, CreateActionButton, GlassModal, FormGrid, FormSelect, FormInput, FormTextarea, SectionHeader, Text, Form, FormActionsRow, Table, TableHead, TableRow, TableHeader, TableBody, TableCell, InlineForm, CopyableId, ListCard, ListCardItem, Avatar, SectionCard, Tabs, TabsList, TabsTrigger, TabsContent, StepIndicator, FilterTileButton, PickerTile, FormToggle, Spinner, StatusBadge, FormCheckbox, SegmentedControl, DatePicker, TimePicker } from '../../chunk-F4KHAKTP.mjs';
 import '../../chunk-NBW6WJQT.mjs';
 import '../../chunk-3AY5HIQ6.mjs';
-import '../../chunk-PLTLRL2V.mjs';
-import { Button, Badge } from '../../chunk-WR55H7DH.mjs';
+import '../../chunk-ZEFNBGYI.mjs';
+import '../../chunk-KDDXDQR2.mjs';
+import { Button, Badge } from '../../chunk-2SBVFLPZ.mjs';
 import '../../chunk-D2JF6C3E.mjs';
 import { useLink } from '../../chunk-QWG2FMUN.mjs';
 import '../../chunk-G7JQ4OCE.mjs';
 import { useState, useMemo, useEffect, useCallback } from 'react';
-import { CubeTransparentIcon, CpuChipIcon, ChatBubbleLeftEllipsisIcon, WrenchScrewdriverIcon, AdjustmentsHorizontalIcon, CircleStackIcon, RectangleStackIcon, ClockIcon, LinkIcon, KeyIcon, ArrowPathIcon, TrashIcon, PlusIcon, PencilSquareIcon, BellAlertIcon, GlobeAltIcon, PencilIcon, ArrowUpCircleIcon, SparklesIcon } from '@heroicons/react/24/outline';
+import { CubeTransparentIcon, CpuChipIcon, ChatBubbleLeftEllipsisIcon, WrenchScrewdriverIcon, AdjustmentsHorizontalIcon, CircleStackIcon, RectangleStackIcon, ClockIcon, LinkIcon, KeyIcon, ArrowPathIcon, TrashIcon, PlusIcon, PencilSquareIcon, CodeBracketIcon, ServerStackIcon, SparklesIcon, BoltIcon, CloudIcon, BeakerIcon, GlobeAltIcon, BellAlertIcon, PencilIcon, ArrowUpCircleIcon } from '@heroicons/react/24/outline';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 
 function AgentsModelsPageView({ labels, models, loading }) {
@@ -1232,7 +1232,7 @@ function setFromJson(set, key, raw) {
     set(key, raw);
   }
 }
-function RulesPageView({ labels, rules, loading, onCreate, onUpdate, onDelete }) {
+function RulesPageView({ labels, rules, loading, onCreate, onUpdate, onDelete, onAddClick }) {
   const [createOpen, setCreateOpen] = useState(false);
   const [editing, setEditing] = useState(null);
   const [searchTerm, setSearchTerm] = useState("");
@@ -1318,7 +1318,7 @@ function RulesPageView({ labels, rules, loading, onCreate, onUpdate, onDelete })
         {
           mode: "desktop",
           label: labels.addRule,
-          onClick: () => setCreateOpen(true),
+          onClick: onAddClick ?? (() => setCreateOpen(true)),
           accent: "fuchsia"
         }
       )
@@ -1329,7 +1329,7 @@ function RulesPageView({ labels, rules, loading, onCreate, onUpdate, onDelete })
     {
       mode: "mobile",
       label: labels.addRule,
-      onClick: () => setCreateOpen(true),
+      onClick: onAddClick ?? (() => setCreateOpen(true)),
       accent: "fuchsia"
     }
   );
@@ -1605,7 +1605,8 @@ function DatasourcesPageView({
   labels,
   datasources: externalDatasources,
   useSampleData = false,
-  onCreate
+  onCreate,
+  onAddClick
 }) {
   const [modalOpen, setModalOpen] = useState(false);
   const [localDatasources, setLocalDatasources] = useState(
@@ -1748,7 +1749,7 @@ function DatasourcesPageView({
           {
             mode: "desktop",
             label: labels.addDatasource,
-            onClick: () => setModalOpen(true),
+            onClick: onAddClick ?? (() => setModalOpen(true)),
             accent: "amber"
           }
         )
@@ -1759,7 +1760,7 @@ function DatasourcesPageView({
       {
         mode: "mobile",
         label: labels.addDatasource,
-        onClick: () => setModalOpen(true),
+        onClick: onAddClick ?? (() => setModalOpen(true)),
         accent: "amber"
       }
     ),
@@ -2296,7 +2297,7 @@ function ConnectionsPageView({
     {
       mode: "mobile",
       label: labels.add,
-      onClick: () => setCreateOpen(true),
+      onClick: openCreate,
       accent: "sky"
     }
   );
@@ -3438,11 +3439,11 @@ function RangeSliderField({
   const ariaText = activeZone ? `${displayValue} \u2014 ${activeZone.label}` : displayValue;
   return /* @__PURE__ */ jsxs("div", { children: [
     /* @__PURE__ */ jsxs("div", { className: "mb-2 flex items-center justify-between", children: [
-      /* @__PURE__ */ jsx("label", { htmlFor: sliderId, className: "text-xs font-medium text-gray-500 dark:text-gray-400", children: label }),
-      /* @__PURE__ */ jsx("span", { className: "text-sm font-bold tabular-nums text-gray-900 dark:text-white", children: displayValue })
+      /* @__PURE__ */ jsx("label", { htmlFor: sliderId, className: "text-xs font-medium text-slate-500 dark:text-slate-400", children: label }),
+      /* @__PURE__ */ jsx("span", { className: "text-sm font-bold tabular-nums text-slate-900 dark:text-white", children: displayValue })
     ] }),
     /* @__PURE__ */ jsxs("div", { className: "relative", children: [
-      /* @__PURE__ */ jsx("div", { className: "absolute inset-x-0 top-1/2 h-2 -translate-y-1/2 overflow-hidden rounded-full bg-gray-200 dark:bg-gray-700", children: /* @__PURE__ */ jsx(
+      /* @__PURE__ */ jsx("div", { className: "absolute inset-x-0 top-1/2 h-2 -translate-y-1/2 overflow-hidden rounded-full bg-slate-200 dark:bg-slate-700", children: /* @__PURE__ */ jsx(
         "div",
         {
           className: "h-full rounded-full transition-all duration-300 ease-out motion-reduce:transition-none",
@@ -3468,7 +3469,7 @@ function RangeSliderField({
           "aria-valuemax": max,
           "aria-valuenow": value,
           "aria-valuetext": ariaText,
-          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"
+          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-slate-900"
         }
       ),
       /* @__PURE__ */ jsx("style", { children: `[data-slider-id="${sliderId}"]::-webkit-slider-thumb { background: ${thumbColor}; box-shadow: 0 0 8px ${glow}; } [data-slider-id="${sliderId}"]::-moz-range-thumb { background: ${thumbColor}; border: 2px solid white; box-shadow: 0 0 8px ${glow}; }` })
@@ -3478,7 +3479,7 @@ function RangeSliderField({
       return /* @__PURE__ */ jsx(
         "span",
         {
-          className: `text-[10px] font-medium transition-colors motion-reduce:transition-none ${isActive ? z.color : "text-gray-400 dark:text-gray-500"}`,
+          className: `text-[10px] font-medium transition-colors motion-reduce:transition-none ${isActive ? z.color : "text-slate-400 dark:text-slate-500"}`,
           children: z.label
         },
         z.label
@@ -3739,14 +3740,13 @@ function AgentNewWizardPageView({
           /* @__PURE__ */ jsxs("div", { children: [
             /* @__PURE__ */ jsx("span", { className: "mb-2 block text-xs font-semibold uppercase tracking-wider text-slate-600 dark:text-slate-400", children: labels.avatarLabel }),
             /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-1.5", children: EMOJI_PALETTE.map((e) => /* @__PURE__ */ jsx(
-              "button",
+              PickerTile,
               {
-                type: "button",
                 onClick: () => {
                   setEmoji(e);
                   markTouched();
                 },
-                "aria-pressed": emoji === e,
+                selected: emoji === e,
                 className: [
                   "flex h-9 w-9 items-center justify-center rounded-lg text-base transition-all",
                   emoji === e ? `bg-gradient-to-br ${activePreset.accent} shadow-sm ring-2 ring-indigo-500/70 ring-offset-1 ring-offset-transparent` : "liquid-surface hover:border-indigo-400/40 focus-visible:ring-2 focus-visible:ring-indigo-500/70 focus-visible:ring-offset-1"
@@ -3877,52 +3877,34 @@ function AgentNewWizardPageView({
             subtitle: labels.behaviorSubtitle
           },
           children: /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
-            /* @__PURE__ */ jsxs("div", { children: [
-              /* @__PURE__ */ jsxs("div", { className: "mb-1 flex items-center justify-between", children: [
-                /* @__PURE__ */ jsx("label", { htmlFor: "wizard-system-prompt", className: "text-xs font-medium text-gray-500 dark:text-gray-400", children: labels.promptSystemPrompt }),
-                /* @__PURE__ */ jsxs("span", { className: "text-[10px] text-gray-400 dark:text-gray-500", children: [
-                  systemPrompt.length,
-                  " chars"
-                ] })
-              ] }),
-              /* @__PURE__ */ jsx(
-                "textarea",
-                {
-                  id: "wizard-system-prompt",
-                  value: systemPrompt,
-                  onChange: (e) => {
-                    setSystemPrompt(e.target.value);
-                    markTouched();
-                  },
-                  rows: 8,
-                  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 motion-reduce:transition-none 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: labels.promptPlaceholder
-                }
-              )
-            ] }),
-            /* @__PURE__ */ jsxs("div", { children: [
-              /* @__PURE__ */ jsxs("div", { className: "mb-1 flex items-center justify-between", children: [
-                /* @__PURE__ */ jsx("label", { htmlFor: "wizard-user-prompt", className: "text-xs font-medium text-gray-500 dark:text-gray-400", children: labels.userPromptLabel }),
-                /* @__PURE__ */ jsxs("span", { className: "text-[10px] text-gray-400 dark:text-gray-500", children: [
-                  userPrompt.length,
-                  " chars"
-                ] })
-              ] }),
-              /* @__PURE__ */ jsx(
-                "textarea",
-                {
-                  id: "wizard-user-prompt",
-                  value: userPrompt,
-                  onChange: (e) => {
-                    setUserPrompt(e.target.value);
-                    markTouched();
-                  },
-                  rows: 5,
-                  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 motion-reduce:transition-none 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: labels.userPromptPlaceholder
-                }
-              )
-            ] }),
+            /* @__PURE__ */ jsx(
+              FormTextarea,
+              {
+                label: labels.promptSystemPrompt,
+                value: systemPrompt,
+                onValueChange: (v) => {
+                  setSystemPrompt(v);
+                  markTouched();
+                },
+                rows: 8,
+                placeholder: labels.promptPlaceholder,
+                hint: `${systemPrompt.length} chars`
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              FormTextarea,
+              {
+                label: labels.userPromptLabel,
+                value: userPrompt,
+                onValueChange: (v) => {
+                  setUserPrompt(v);
+                  markTouched();
+                },
+                rows: 5,
+                placeholder: labels.userPromptPlaceholder,
+                hint: `${userPrompt.length} chars`
+              }
+            ),
             /* @__PURE__ */ jsx(
               RangeSliderField,
               {
@@ -3985,39 +3967,33 @@ function AgentNewWizardPageView({
                 ]
               }
             ),
-            /* @__PURE__ */ jsxs("div", { children: [
-              /* @__PURE__ */ jsxs("div", { className: "mb-2 flex items-center justify-between", children: [
-                /* @__PURE__ */ jsx("label", { htmlFor: "wizard-max-tokens", className: "text-xs font-medium text-gray-500 dark:text-gray-400", children: labels.maxTokens }),
-                /* @__PURE__ */ jsx("span", { className: "text-sm font-bold tabular-nums text-gray-900 dark:text-white", children: maxTokens.toLocaleString() })
-              ] }),
-              /* @__PURE__ */ jsx(
-                "input",
-                {
-                  id: "wizard-max-tokens",
-                  type: "number",
-                  value: maxTokens,
-                  onChange: (e) => {
-                    setMaxTokens(Math.max(1, Math.floor(Number(e.target.value) || 0)));
-                    markTouched();
-                  },
-                  min: 1,
-                  max: 32e3,
-                  step: 1,
-                  className: "w-full rounded-lg border border-gray-200/50 bg-gray-50/50 px-3 py-2.5 text-sm tabular-nums text-gray-700 outline-none transition-colors focus:border-indigo-300/50 focus:ring-1 focus:ring-indigo-300/30 motion-reduce:transition-none dark:border-white/10 dark:bg-white/5 dark:text-gray-300 dark:focus:border-indigo-500/30 dark:focus:ring-indigo-500/20"
-                }
-              )
-            ] }),
-            /* @__PURE__ */ jsx("div", { className: "overflow-hidden rounded-lg border border-gray-200/30 dark:border-white/10", children: /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-3 gap-px bg-gray-200/30 dark:bg-white/10", children: [
-              /* @__PURE__ */ jsxs("div", { className: "bg-white/60 px-3 py-2 dark:bg-gray-900/60", children: [
-                /* @__PURE__ */ jsx("p", { className: "text-[9px] uppercase tracking-wider text-gray-400 dark:text-gray-500", children: labels.model }),
-                /* @__PURE__ */ jsx("p", { className: "truncate text-xs font-semibold text-gray-900 dark:text-white", children: matchingModels.find((m) => m.id === modelId)?.name ?? labels.modelEmpty })
+            /* @__PURE__ */ jsx(
+              FormInput,
+              {
+                label: labels.maxTokens,
+                type: "number",
+                value: String(maxTokens),
+                onValueChange: (v) => {
+                  setMaxTokens(Math.max(1, Math.floor(Number(v) || 0)));
+                  markTouched();
+                },
+                min: 1,
+                max: 32e3,
+                step: 1,
+                hint: maxTokens.toLocaleString()
+              }
+            ),
+            /* @__PURE__ */ jsx("div", { className: "overflow-hidden rounded-lg border border-slate-200/30 dark:border-white/10", children: /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-3 gap-px bg-slate-200/30 dark:bg-white/10", children: [
+              /* @__PURE__ */ jsxs("div", { className: "bg-white/60 px-3 py-2 dark:bg-slate-900/60", children: [
+                /* @__PURE__ */ jsx("p", { className: "text-[9px] uppercase tracking-wider text-slate-400 dark:text-slate-500", children: labels.model }),
+                /* @__PURE__ */ jsx("p", { className: "truncate text-xs font-semibold text-slate-900 dark:text-white", children: matchingModels.find((m) => m.id === modelId)?.name ?? labels.modelEmpty })
               ] }),
-              /* @__PURE__ */ jsxs("div", { className: "bg-white/60 px-3 py-2 dark:bg-gray-900/60", children: [
-                /* @__PURE__ */ jsx("p", { className: "text-[9px] uppercase tracking-wider text-gray-400 dark:text-gray-500", children: labels.maxTokens }),
-                /* @__PURE__ */ jsx("p", { className: "text-xs font-semibold text-gray-900 dark:text-white", children: maxTokens.toLocaleString() })
+              /* @__PURE__ */ jsxs("div", { className: "bg-white/60 px-3 py-2 dark:bg-slate-900/60", children: [
+                /* @__PURE__ */ jsx("p", { className: "text-[9px] uppercase tracking-wider text-slate-400 dark:text-slate-500", children: labels.maxTokens }),
+                /* @__PURE__ */ jsx("p", { className: "text-xs font-semibold text-slate-900 dark:text-white", children: maxTokens.toLocaleString() })
               ] }),
-              /* @__PURE__ */ jsxs("div", { className: "bg-white/60 px-3 py-2 dark:bg-gray-900/60", children: [
-                /* @__PURE__ */ jsx("p", { className: "text-[9px] uppercase tracking-wider text-gray-400 dark:text-gray-500", children: labels.temperature }),
+              /* @__PURE__ */ jsxs("div", { className: "bg-white/60 px-3 py-2 dark:bg-slate-900/60", children: [
+                /* @__PURE__ */ jsx("p", { className: "text-[9px] uppercase tracking-wider text-slate-400 dark:text-slate-500", children: labels.temperature }),
                 /* @__PURE__ */ jsxs("p", { className: `text-xs font-semibold ${temperature <= 0.3 ? "text-blue-500" : temperature <= 0.7 ? "text-purple-500" : "text-pink-500"}`, children: [
                   temperature.toFixed(2),
                   " \xB7 ",
@@ -4043,14 +4019,13 @@ function AgentNewWizardPageView({
                 const selected = difficulty === opt.id;
                 const label = opt.id === "beginner" ? labels.difficultyBeginner : opt.id === "intermediate" ? labels.difficultyIntermediate : opt.id === "advanced" ? labels.difficultyAdvanced : labels.difficultyExpert;
                 return /* @__PURE__ */ jsxs(
-                  "button",
+                  PickerTile,
                   {
-                    type: "button",
                     onClick: () => {
                       setDifficulty(opt.id);
                       markTouched();
                     },
-                    "aria-pressed": selected,
+                    selected,
                     className: [
                       "liquid-surface flex items-center gap-2 rounded-xl px-3 py-2 text-left transition-all",
                       selected ? "ring-2 ring-indigo-500/70 ring-offset-1 ring-offset-transparent" : "hover:border-indigo-400/40 focus-visible:ring-2 focus-visible:ring-indigo-500/70 focus-visible:ring-offset-1"
@@ -4176,7 +4151,7 @@ function AgentNewWizardPageView({
               /* @__PURE__ */ jsx(ReviewRow, { label: labels.maxTokens, value: maxTokens.toLocaleString() })
             ] }),
             systemPrompt && /* @__PURE__ */ jsxs("div", { className: "mt-3", children: [
-              /* @__PURE__ */ jsx("p", { className: "text-[10px] uppercase tracking-wider text-gray-400 dark:text-gray-500", children: labels.promptSystemPrompt }),
+              /* @__PURE__ */ jsx("p", { className: "text-[10px] uppercase tracking-wider text-slate-400 dark:text-slate-500", children: labels.promptSystemPrompt }),
               /* @__PURE__ */ jsx("pre", { className: "mt-1 line-clamp-4 whitespace-pre-wrap rounded-lg border border-slate-200/70 bg-slate-50/60 p-2 text-xs text-slate-700 dark:border-slate-700 dark:bg-slate-900/40 dark:text-slate-200", children: systemPrompt })
             ] })
           ]
@@ -4215,8 +4190,8 @@ function AgentNewWizardPageView({
 }
 function ReviewRow({ label, value }) {
   return /* @__PURE__ */ jsxs("div", { className: "rounded-lg border border-slate-200/60 bg-white/40 px-3 py-2 dark:border-white/10 dark:bg-white/[0.04]", children: [
-    /* @__PURE__ */ jsx("dt", { className: "text-[10px] uppercase tracking-wider text-gray-400 dark:text-gray-500", children: label }),
-    /* @__PURE__ */ jsx("dd", { className: "mt-0.5 truncate text-xs font-semibold text-gray-900 dark:text-white", children: value })
+    /* @__PURE__ */ jsx("dt", { className: "text-[10px] uppercase tracking-wider text-slate-400 dark:text-slate-500", children: label }),
+    /* @__PURE__ */ jsx("dd", { className: "mt-0.5 truncate text-xs font-semibold text-slate-900 dark:text-white", children: value })
   ] });
 }
 var DIALECT_LOGO_SRC = {
@@ -4920,7 +4895,7 @@ function DatasourceNewWizardPageView({
             )
           ] }),
           /* @__PURE__ */ jsxs("div", { className: "space-y-1", children: [
-            /* @__PURE__ */ jsx("label", { className: "block text-xs font-medium text-gray-500 dark:text-gray-400", children: labels.fieldAllowedTables }),
+            /* @__PURE__ */ jsx("label", { className: "block text-xs font-medium text-slate-500 dark:text-slate-400", children: labels.fieldAllowedTables }),
             /* @__PURE__ */ jsx(
               ChipPicker,
               {
@@ -4944,7 +4919,7 @@ function DatasourceNewWizardPageView({
             /* @__PURE__ */ jsx("p", { className: "text-[11px] text-slate-500 dark:text-slate-400", children: labels.fieldAllowedTablesHint })
           ] }),
           /* @__PURE__ */ jsxs("div", { className: "space-y-1", children: [
-            /* @__PURE__ */ jsx("label", { className: "block text-xs font-medium text-gray-500 dark:text-gray-400", children: labels.fieldBlockedColumns }),
+            /* @__PURE__ */ jsx("label", { className: "block text-xs font-medium text-slate-500 dark:text-slate-400", children: labels.fieldBlockedColumns }),
             /* @__PURE__ */ jsx(
               ChipPicker,
               {
@@ -5093,8 +5068,8 @@ function DatasourceNewWizardPageView({
 }
 function ReviewRow2({ label, value }) {
   return /* @__PURE__ */ jsxs("div", { className: "rounded-lg border border-slate-200/60 bg-white/40 px-3 py-2 dark:border-white/10 dark:bg-white/[0.04]", children: [
-    /* @__PURE__ */ jsx("dt", { className: "text-[10px] uppercase tracking-wider text-gray-400 dark:text-gray-500", children: label }),
-    /* @__PURE__ */ jsx("dd", { className: "mt-0.5 truncate text-xs font-semibold text-gray-900 dark:text-white", children: value })
+    /* @__PURE__ */ jsx("dt", { className: "text-[10px] uppercase tracking-wider text-slate-400 dark:text-slate-500", children: label }),
+    /* @__PURE__ */ jsx("dd", { className: "mt-0.5 truncate text-xs font-semibold text-slate-900 dark:text-white", children: value })
   ] });
 }
 async function simulateTest() {
@@ -5122,11 +5097,11 @@ function RangeSliderField2({
   const ariaText = activeZone ? `${displayValue} \u2014 ${activeZone.label}` : displayValue;
   return /* @__PURE__ */ jsxs("div", { children: [
     /* @__PURE__ */ jsxs("div", { className: "mb-2 flex items-center justify-between", children: [
-      /* @__PURE__ */ jsx("label", { htmlFor: sliderId, className: "text-xs font-medium text-gray-500 dark:text-gray-400", children: label }),
-      /* @__PURE__ */ jsx("span", { className: "text-sm font-bold tabular-nums text-gray-900 dark:text-white", children: displayValue })
+      /* @__PURE__ */ jsx("label", { htmlFor: sliderId, className: "text-xs font-medium text-slate-500 dark:text-slate-400", children: label }),
+      /* @__PURE__ */ jsx("span", { className: "text-sm font-bold tabular-nums text-slate-900 dark:text-white", children: displayValue })
     ] }),
     /* @__PURE__ */ jsxs("div", { className: "relative", children: [
-      /* @__PURE__ */ jsx("div", { className: "absolute inset-x-0 top-1/2 h-2 -translate-y-1/2 overflow-hidden rounded-full bg-gray-200 dark:bg-gray-700", children: /* @__PURE__ */ jsx(
+      /* @__PURE__ */ jsx("div", { className: "absolute inset-x-0 top-1/2 h-2 -translate-y-1/2 overflow-hidden rounded-full bg-slate-200 dark:bg-slate-700", children: /* @__PURE__ */ jsx(
         "div",
         {
           className: "h-full rounded-full transition-all duration-300 ease-out motion-reduce:transition-none",
@@ -5152,7 +5127,7 @@ function RangeSliderField2({
           "aria-valuemax": max,
           "aria-valuenow": value,
           "aria-valuetext": ariaText,
-          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-indigo-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"
+          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-indigo-500/70 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-slate-900"
         }
       ),
       /* @__PURE__ */ jsx("style", { children: `[data-slider-id="${sliderId}"]::-webkit-slider-thumb { background: ${thumbColor}; box-shadow: 0 0 8px ${glow}; } [data-slider-id="${sliderId}"]::-moz-range-thumb { background: ${thumbColor}; border: 2px solid white; box-shadow: 0 0 8px ${glow}; }` })
@@ -5162,7 +5137,7 @@ function RangeSliderField2({
       return /* @__PURE__ */ jsx(
         "span",
         {
-          className: `text-[10px] font-medium transition-colors motion-reduce:transition-none ${isActive ? z.color : "text-gray-400 dark:text-gray-500"}`,
+          className: `text-[10px] font-medium transition-colors motion-reduce:transition-none ${isActive ? z.color : "text-slate-400 dark:text-slate-500"}`,
           children: z.label
         },
         z.label
@@ -5893,8 +5868,8 @@ function RuleNewWizardPageView({
 }
 function ReviewRow3({ label, value }) {
   return /* @__PURE__ */ jsxs("div", { className: "rounded-lg border border-slate-200/60 bg-white/40 px-3 py-2 dark:border-white/10 dark:bg-white/[0.04]", children: [
-    /* @__PURE__ */ jsx("dt", { className: "text-[10px] uppercase tracking-wider text-gray-400 dark:text-gray-500", children: label }),
-    /* @__PURE__ */ jsx("dd", { className: "mt-0.5 whitespace-pre-wrap break-words text-xs font-semibold text-gray-900 dark:text-white", children: value })
+    /* @__PURE__ */ jsx("dt", { className: "text-[10px] uppercase tracking-wider text-slate-400 dark:text-slate-500", children: label }),
+    /* @__PURE__ */ jsx("dd", { className: "mt-0.5 whitespace-pre-wrap break-words text-xs font-semibold text-slate-900 dark:text-white", children: value })
   ] });
 }
 function pad(n) {
@@ -5944,7 +5919,473 @@ function humanReadableAction(action, labels, tiles, actionTileId) {
   const paramSummary = action.params ? Object.entries(action.params).slice(0, 3).map(([k, v]) => `${k}=${String(v)}`).join(", ") : "";
   return paramSummary ? `${tileLabel} \u2014 ${paramSummary}` : tileLabel;
 }
+function AgentNewModal({ open, onClose, ...wizardProps }) {
+  return /* @__PURE__ */ jsx(
+    GlassModal,
+    {
+      open,
+      onClose,
+      maxWidth: "2xl",
+      closeOnBackdrop: false,
+      closeLabel: wizardProps.labels.wizardCancel,
+      children: /* @__PURE__ */ jsx(AgentNewWizardPageView, { ...wizardProps })
+    }
+  );
+}
+function DatasourceNewModal({ open, onClose, ...wizardProps }) {
+  return /* @__PURE__ */ jsx(
+    GlassModal,
+    {
+      open,
+      onClose,
+      maxWidth: "2xl",
+      closeOnBackdrop: false,
+      closeLabel: wizardProps.labels.wizardCancel,
+      children: /* @__PURE__ */ jsx(DatasourceNewWizardPageView, { ...wizardProps })
+    }
+  );
+}
+function RuleNewModal({ open, onClose, ...wizardProps }) {
+  return /* @__PURE__ */ jsx(
+    GlassModal,
+    {
+      open,
+      onClose,
+      maxWidth: "2xl",
+      closeOnBackdrop: false,
+      closeLabel: wizardProps.labels.wizardCancel,
+      children: /* @__PURE__ */ jsx(RuleNewWizardPageView, { ...wizardProps })
+    }
+  );
+}
+var AWS_REGIONS = [
+  { value: "us-east-1", label: "us-east-1 (N. Virginia)" },
+  { value: "us-east-2", label: "us-east-2 (Ohio)" },
+  { value: "us-west-2", label: "us-west-2 (Oregon)" },
+  { value: "eu-west-1", label: "eu-west-1 (Ireland)" },
+  { value: "eu-central-1", label: "eu-central-1 (Frankfurt)" },
+  { value: "ap-southeast-1", label: "ap-southeast-1 (Singapore)" },
+  { value: "sa-east-1", label: "sa-east-1 (S\xE3o Paulo)" }
+];
+var GCP_REGIONS = [
+  { value: "us-central1", label: "us-central1 (Iowa)" },
+  { value: "us-east1", label: "us-east1 (S. Carolina)" },
+  { value: "us-west1", label: "us-west1 (Oregon)" },
+  { value: "europe-west1", label: "europe-west1 (Belgium)" },
+  { value: "europe-west4", label: "europe-west4 (Netherlands)" },
+  { value: "asia-southeast1", label: "asia-southeast1 (Singapore)" },
+  { value: "southamerica-east1", label: "southamerica-east1 (S\xE3o Paulo)" }
+];
+var AZURE_REGIONS = [
+  { value: "eastus", label: "eastus" },
+  { value: "westus2", label: "westus2" },
+  { value: "northeurope", label: "northeurope" },
+  { value: "westeurope", label: "westeurope" },
+  { value: "brazilsouth", label: "brazilsouth" }
+];
+var MODEL_PROVIDERS = [
+  { value: "anthropic_api", label: "Anthropic API", category: "managed" },
+  { value: "openai_api", label: "OpenAI API", category: "managed" },
+  { value: "aws_bedrock", label: "AWS Bedrock", category: "cloud", needsRegion: true, defaultRegion: "us-east-1", regions: AWS_REGIONS },
+  { value: "google_vertex", label: "Google Vertex AI", category: "cloud", needsRegion: true, defaultRegion: "us-central1", regions: GCP_REGIONS },
+  { value: "azure_openai", label: "Azure OpenAI", category: "cloud", needsRegion: true, needsEndpoint: true, defaultRegion: "eastus", regions: AZURE_REGIONS },
+  { value: "groq", label: "Groq", category: "managed" },
+  { value: "mistral", label: "Mistral API", category: "managed" },
+  { value: "huggingface", label: "Hugging Face", category: "hosted", needsEndpoint: true },
+  { value: "ollama", label: "Ollama", category: "local", needsEndpoint: true },
+  { value: "custom", label: "Custom / OpenAI-compatible", category: "custom", needsEndpoint: true }
+];
+var PROVIDER_ICON = {
+  anthropic_api: SparklesIcon,
+  openai_api: BeakerIcon,
+  aws_bedrock: CloudIcon,
+  google_vertex: CloudIcon,
+  azure_openai: CloudIcon,
+  groq: BoltIcon,
+  mistral: SparklesIcon,
+  huggingface: ServerStackIcon,
+  ollama: CpuChipIcon,
+  custom: CodeBracketIcon
+};
+var PROVIDER_COLOR = {
+  anthropic_api: "amber",
+  openai_api: "emerald",
+  aws_bedrock: "amber",
+  google_vertex: "blue",
+  azure_openai: "sky",
+  groq: "purple",
+  mistral: "pink",
+  huggingface: "amber",
+  ollama: "slate",
+  custom: "slate"
+};
+var TOTAL_STEPS4 = 4;
+function ModelNewWizardPageView({
+  labels,
+  initialStep,
+  onStepChange,
+  onSubmit,
+  onCancel,
+  onTestConnection
+}) {
+  const clampedInitial = Math.min(TOTAL_STEPS4, Math.max(1, initialStep ?? 1));
+  const [step, setStep] = useState(clampedInitial);
+  const [providerSlug, setProviderSlug] = useState("anthropic_api");
+  const [name, setName] = useState("");
+  const [region, setRegion] = useState("");
+  const [endpoint, setEndpoint] = useState("");
+  const [apiKey, setApiKey] = useState("");
+  const [modelFilterItems, setModelFilterItems] = useState([]);
+  const [modelFilterSelected, setModelFilterSelected] = useState([]);
+  const [submitting, setSubmitting] = useState(false);
+  const [touched, setTouched] = useState(false);
+  const [testStatus, setTestStatus] = useState("idle");
+  const preset = useMemo(
+    () => MODEL_PROVIDERS.find((p) => p.value === providerSlug) ?? MODEL_PROVIDERS[0],
+    [providerSlug]
+  );
+  useEffect(() => {
+    if (preset.defaultRegion && !region) setRegion(preset.defaultRegion);
+  }, [providerSlug]);
+  useEffect(() => {
+    const next = Math.min(TOTAL_STEPS4, Math.max(1, initialStep ?? 1));
+    if (next !== step) setStep(next);
+  }, [initialStep]);
+  function markTouched() {
+    if (!touched) setTouched(true);
+  }
+  const goToStep = useCallback((next) => {
+    const clamped = Math.min(TOTAL_STEPS4, Math.max(1, next));
+    setStep(clamped);
+    onStepChange?.(clamped);
+  }, [onStepChange]);
+  function canAdvance(from) {
+    if (from === 1) return Boolean(providerSlug);
+    if (from === 2) return name.trim().length > 0;
+    return true;
+  }
+  const goNext = useCallback(() => {
+    if (!canAdvance(step)) return;
+    if (step < TOTAL_STEPS4) goToStep(step + 1);
+  }, [step, providerSlug, name]);
+  const goBack = useCallback(() => {
+    if (step > 1) goToStep(step - 1);
+  }, [step, goToStep]);
+  const cancelWithConfirm = useCallback(() => {
+    if (touched && !window.confirm(labels.wizardCancelConfirm)) return;
+    onCancel();
+  }, [touched, labels.wizardCancelConfirm, onCancel]);
+  function buildPayload() {
+    return {
+      providerSlug,
+      name: name.trim(),
+      region: region.trim() || void 0,
+      endpoint: endpoint.trim() || void 0,
+      apiKey: apiKey || void 0,
+      modelFilters: modelFilterSelected.length > 0 ? [...modelFilterSelected] : void 0
+    };
+  }
+  async function handleTestConnection() {
+    if (!onTestConnection) return;
+    setTestStatus("testing");
+    try {
+      const ok = await onTestConnection(buildPayload());
+      setTestStatus(ok ? "success" : "failed");
+      setTimeout(() => setTestStatus("idle"), 3500);
+    } catch {
+      setTestStatus("failed");
+      setTimeout(() => setTestStatus("idle"), 3500);
+    }
+  }
+  async function submit() {
+    setSubmitting(true);
+    try {
+      await onSubmit(buildPayload());
+    } finally {
+      setSubmitting(false);
+    }
+  }
+  const stepTitles = [labels.step1Title, labels.step2Title, labels.step3Title, labels.step4Title];
+  const stepSubtitles = [labels.step1Subtitle, labels.step2Subtitle, labels.step3Subtitle, labels.step4Subtitle];
+  const indicatorSteps = stepTitles.map((title, idx) => ({ id: String(idx + 1), title }));
+  const counter = labels.wizardStepCounter.replace("{current}", String(step)).replace("{total}", String(TOTAL_STEPS4));
+  const hero = /* @__PURE__ */ jsx(
+    HeroSection,
+    {
+      icon: /* @__PURE__ */ jsx(CubeTransparentIcon, { className: "h-5 w-5" }),
+      label: counter,
+      title: labels.pageTitle,
+      subtitle: stepSubtitles[step - 1] ?? labels.pageSubtitle,
+      gradient: "from-emerald-500 to-teal-700",
+      children: /* @__PURE__ */ jsx(
+        StepIndicator,
+        {
+          accent: "indigo",
+          currentStep: step - 1,
+          onStepChange: (idx) => goToStep(idx + 1),
+          progressLabel: labels.pageTitle,
+          steps: indicatorSteps
+        }
+      )
+    }
+  );
+  function renderStep1() {
+    return /* @__PURE__ */ jsx(
+      SectionCard,
+      {
+        variant: "glass",
+        header: { title: labels.providerLabel, subtitle: labels.step1Subtitle },
+        children: /* @__PURE__ */ jsx(
+          "div",
+          {
+            role: "radiogroup",
+            "aria-label": labels.providerLabel,
+            className: "grid grid-cols-1 gap-3 sm:grid-cols-2 lg:grid-cols-3",
+            children: MODEL_PROVIDERS.map((p) => {
+              const Icon = PROVIDER_ICON[p.value] ?? GlobeAltIcon;
+              const color = PROVIDER_COLOR[p.value] ?? "slate";
+              const selected = providerSlug === p.value;
+              return /* @__PURE__ */ jsx(
+                FilterTileButton,
+                {
+                  isActive: selected,
+                  color,
+                  icon: /* @__PURE__ */ jsx(Icon, { className: "h-5 w-5" }),
+                  label: p.label,
+                  count: p.category,
+                  onClick: () => {
+                    setProviderSlug(p.value);
+                    markTouched();
+                  }
+                },
+                p.value
+              );
+            })
+          }
+        )
+      }
+    );
+  }
+  function renderStep2() {
+    return /* @__PURE__ */ jsx(
+      SectionCard,
+      {
+        variant: "glass",
+        header: { title: preset.label, subtitle: labels.step2Subtitle },
+        children: /* @__PURE__ */ jsx("div", { className: "space-y-4", children: /* @__PURE__ */ jsxs(FormGrid, { children: [
+          /* @__PURE__ */ jsx(
+            FormInput,
+            {
+              label: labels.nameLabel,
+              value: name,
+              onValueChange: (v) => {
+                setName(v);
+                markTouched();
+              },
+              placeholder: labels.namePlaceholder || `${preset.label} \u2014 produ\xE7\xE3o`,
+              required: true
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            FormInput,
+            {
+              label: labels.apiKeyLabel,
+              type: "password",
+              value: apiKey,
+              onValueChange: (v) => {
+                setApiKey(v);
+                markTouched();
+              },
+              placeholder: labels.apiKeyPlaceholder
+            }
+          )
+        ] }) })
+      }
+    );
+  }
+  function renderStep3() {
+    const showRegion = preset.needsRegion === true;
+    const showEndpoint = preset.needsEndpoint === true;
+    return /* @__PURE__ */ jsx(
+      SectionCard,
+      {
+        variant: "glass",
+        header: { title: labels.step3Title, subtitle: labels.step3Subtitle },
+        children: /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
+          /* @__PURE__ */ jsxs(FormGrid, { children: [
+            showRegion && (preset.regions ? /* @__PURE__ */ jsx(
+              FormSelect,
+              {
+                label: labels.regionLabel,
+                value: region,
+                onValueChange: (v) => {
+                  setRegion(v);
+                  markTouched();
+                },
+                options: [...preset.regions]
+              }
+            ) : /* @__PURE__ */ jsx(
+              FormInput,
+              {
+                label: labels.regionLabel,
+                value: region,
+                onValueChange: (v) => {
+                  setRegion(v);
+                  markTouched();
+                },
+                placeholder: labels.regionPlaceholder ?? preset.defaultRegion
+              }
+            )),
+            showEndpoint && /* @__PURE__ */ jsx(
+              FormInput,
+              {
+                label: labels.endpointLabel,
+                type: "url",
+                value: endpoint,
+                onValueChange: (v) => {
+                  setEndpoint(v);
+                  markTouched();
+                },
+                placeholder: labels.endpointPlaceholder ?? "https://\u2026"
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "space-y-1", children: [
+            /* @__PURE__ */ jsx("label", { className: "block text-xs font-medium text-slate-500 dark:text-slate-400", children: labels.modelFilterLabel }),
+            /* @__PURE__ */ jsx(
+              ChipPicker,
+              {
+                items: modelFilterItems,
+                selectedIds: modelFilterSelected,
+                onChange: (ids) => {
+                  setModelFilterSelected(ids);
+                  markTouched();
+                },
+                onItemsChange: (items) => {
+                  setModelFilterItems(items);
+                  markTouched();
+                },
+                allowCustom: true,
+                showActions: false,
+                addPlaceholder: labels.modelFilterPlaceholder,
+                addAriaLabel: labels.modelFilterLabel
+              }
+            )
+          ] }),
+          onTestConnection && /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-3 border-t border-slate-200/60 pt-4 dark:border-white/10", children: [
+            /* @__PURE__ */ jsx(
+              Button,
+              {
+                type: "button",
+                outline: true,
+                onClick: () => void handleTestConnection(),
+                disabled: testStatus === "testing",
+                children: testStatus === "testing" ? /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-2", children: [
+                  /* @__PURE__ */ jsx(Spinner, { size: "xs" }),
+                  labels.testing
+                ] }) : labels.testConnection
+              }
+            ),
+            testStatus === "success" && /* @__PURE__ */ jsx(StatusBadge, { status: "success", label: labels.connectionSuccess }),
+            testStatus === "failed" && /* @__PURE__ */ jsx(StatusBadge, { status: "error", label: labels.connectionFailed })
+          ] })
+        ] })
+      }
+    );
+  }
+  function renderStep4() {
+    return /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
+      /* @__PURE__ */ jsx(
+        SectionCard,
+        {
+          variant: "glass",
+          header: { title: labels.step1Title, subtitle: labels.step1Subtitle },
+          actions: /* @__PURE__ */ jsx(Button, { type: "button", size: "sm", outline: true, onClick: () => goToStep(1), children: labels.wizardReviewEdit }),
+          children: /* @__PURE__ */ jsx("dl", { className: "grid grid-cols-1 gap-2 sm:grid-cols-2", children: /* @__PURE__ */ jsx(ReviewRow4, { label: labels.reviewProviderLabel, value: preset.label }) })
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        SectionCard,
+        {
+          variant: "glass",
+          header: { title: labels.step2Title, subtitle: labels.step2Subtitle },
+          actions: /* @__PURE__ */ jsx(Button, { type: "button", size: "sm", outline: true, onClick: () => goToStep(2), children: labels.wizardReviewEdit }),
+          children: /* @__PURE__ */ jsxs("dl", { className: "grid grid-cols-1 gap-2 sm:grid-cols-2", children: [
+            /* @__PURE__ */ jsx(ReviewRow4, { label: labels.reviewNameLabel, value: name || labels.reviewNoneValue }),
+            /* @__PURE__ */ jsx(ReviewRow4, { label: labels.reviewApiKeyLabel, value: apiKey ? labels.reviewApiKeyRedacted : labels.reviewNoneValue })
+          ] })
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        SectionCard,
+        {
+          variant: "glass",
+          header: { title: labels.step3Title, subtitle: labels.step3Subtitle },
+          actions: /* @__PURE__ */ jsx(Button, { type: "button", size: "sm", outline: true, onClick: () => goToStep(3), children: labels.wizardReviewEdit }),
+          children: /* @__PURE__ */ jsxs("dl", { className: "grid grid-cols-1 gap-2 sm:grid-cols-2", children: [
+            /* @__PURE__ */ jsx(ReviewRow4, { label: labels.reviewRegionLabel, value: region || labels.reviewNoneValue }),
+            /* @__PURE__ */ jsx(ReviewRow4, { label: labels.reviewEndpointLabel, value: endpoint || labels.reviewNoneValue }),
+            /* @__PURE__ */ jsx(
+              ReviewRow4,
+              {
+                label: labels.reviewModelsLabel,
+                value: modelFilterSelected.length > 0 ? modelFilterSelected.join(", ") : labels.reviewNoneValue
+              }
+            )
+          ] })
+        }
+      )
+    ] });
+  }
+  const stepBody = step === 1 ? renderStep1() : step === 2 ? renderStep2() : step === 3 ? renderStep3() : renderStep4();
+  const advanceDisabled = !canAdvance(step);
+  const footer = /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center justify-between gap-2 border-t border-slate-200/60 pt-4 dark:border-white/10", children: [
+    /* @__PURE__ */ jsx("div", { className: "flex items-center gap-2", children: /* @__PURE__ */ jsx(Button, { type: "button", outline: true, onClick: goBack, disabled: step === 1 || submitting, children: labels.wizardBack }) }),
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ jsx(Button, { type: "button", outline: true, onClick: cancelWithConfirm, disabled: submitting, children: labels.wizardCancel }),
+      step < TOTAL_STEPS4 ? /* @__PURE__ */ jsx(Button, { type: "button", color: "emerald", onClick: goNext, disabled: advanceDisabled || submitting, children: labels.wizardNext }) : /* @__PURE__ */ jsx(Button, { type: "button", color: "emerald", onClick: () => void submit(), disabled: submitting || !name.trim(), children: submitting ? labels.wizardCreate + "\u2026" : labels.wizardCreate })
+    ] })
+  ] });
+  const content = /* @__PURE__ */ jsxs(
+    "form",
+    {
+      onSubmit: (e) => {
+        e.preventDefault();
+        if (step < TOTAL_STEPS4) goNext();
+        else void submit();
+      },
+      className: "space-y-4",
+      children: [
+        /* @__PURE__ */ jsx("div", { className: "liquid-surface rounded-2xl p-5 sm:p-8", children: stepBody }),
+        footer
+      ]
+    }
+  );
+  return /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
+    hero,
+    content
+  ] });
+}
+function ReviewRow4({ label, value }) {
+  return /* @__PURE__ */ jsxs("div", { className: "rounded-lg border border-slate-200/60 bg-white/40 px-3 py-2 dark:border-white/10 dark:bg-white/[0.04]", children: [
+    /* @__PURE__ */ jsx("dt", { className: "text-[10px] uppercase tracking-wider text-slate-400 dark:text-slate-500", children: label }),
+    /* @__PURE__ */ jsx("dd", { className: "mt-0.5 truncate text-xs font-semibold text-slate-900 dark:text-white", children: value })
+  ] });
+}
+function ModelNewModal({ open, onClose, ...wizardProps }) {
+  return /* @__PURE__ */ jsx(
+    GlassModal,
+    {
+      open,
+      onClose,
+      maxWidth: "2xl",
+      closeOnBackdrop: false,
+      closeLabel: wizardProps.labels.wizardCancel,
+      children: /* @__PURE__ */ jsx(ModelNewWizardPageView, { ...wizardProps })
+    }
+  );
+}
 
-export { AgentNewWizardPageView, AgentsConfigPageView, AgentsIndexPageView, AgentsModelsPageView, AgentsPromptsPageView, AgentsToolDefinitionsPageView, AgentsWorkspacePageView, ConnectionsPageView, CredentialsPageView, DashboardPageView, DatasourceNewWizardPageView, DatasourcesPageView, RuleNewWizardPageView, RulesPageView, RunTimelinePageView, TOOL_TYPES, WorkflowRunsPageView, WorkflowsPageView, jsonSchemaToParameters, parametersToJsonSchema };
+export { AgentNewModal, AgentNewWizardPageView, AgentsConfigPageView, AgentsIndexPageView, AgentsModelsPageView, AgentsPromptsPageView, AgentsToolDefinitionsPageView, AgentsWorkspacePageView, ConnectionsPageView, CredentialsPageView, DashboardPageView, DatasourceNewModal, DatasourceNewWizardPageView, DatasourcesPageView, MODEL_PROVIDERS, ModelNewModal, ModelNewWizardPageView, RuleNewModal, RuleNewWizardPageView, RulesPageView, RunTimelinePageView, TOOL_TYPES, WorkflowRunsPageView, WorkflowsPageView, jsonSchemaToParameters, parametersToJsonSchema };
 //# sourceMappingURL=index.mjs.map
 //# sourceMappingURL=index.mjs.map