@datatechsolutions/ui 3.14.0 → 3.15.0

package/dist/platform/pages/index.mjs

@@ -1,24 +1,24 @@
 "use client";
 import { adaptWorkflowGraphToUi, formatDurationMs } from '../../chunk-UQXVCVAN.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 { WorkflowWorkspace } from '../../chunk-3FOLXKVP.mjs';
+export { RolesPageView, UsersPageView } from '../../chunk-3FOLXKVP.mjs';
+import { DIALECT_CATEGORIES, DatasourceModal, findDialect, findCategory } from '../../chunk-A5M7SPPG.mjs';
+export { DIALECT_CATEGORIES, DatasourceFormModal, DatasourceModal, findCategory, findDialect } from '../../chunk-A5M7SPPG.mjs';
+import { defaultRuleForm, RuleForm, ExecutionTimelinePanel, defaultRuleCondition, defaultRuleAction, RuleConditionBuilder, RuleActionBuilder } from '../../chunk-SMUBE3RO.mjs';
 import '../../chunk-JB6RNAD2.mjs';
 import '../../chunk-LEXBTVGM.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-MSXJFWKD.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, Card, CardContent, FilterTileButton, PickerTile, FormToggle, Spinner, StatusBadge, FormCheckbox, SegmentedControl, DatePicker, TimePicker } from '../../chunk-QCGSE24W.mjs';
+import '../../chunk-ZEFNBGYI.mjs';
 import '../../chunk-NBW6WJQT.mjs';
 import '../../chunk-3AY5HIQ6.mjs';
-import '../../chunk-ZEFNBGYI.mjs';
 import '../../chunk-KDDXDQR2.mjs';
-import { Button, Badge } from '../../chunk-2SBVFLPZ.mjs';
+import { Button, Badge, IconButton } 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, CodeBracketIcon, ServerStackIcon, SparklesIcon, BoltIcon, CloudIcon, BeakerIcon, GlobeAltIcon, BellAlertIcon, PencilIcon, ArrowUpCircleIcon } from '@heroicons/react/24/outline';
+import { CubeTransparentIcon, CpuChipIcon, ChatBubbleLeftEllipsisIcon, WrenchScrewdriverIcon, AdjustmentsHorizontalIcon, CircleStackIcon, RectangleStackIcon, ClockIcon, LinkIcon, KeyIcon, ArrowPathIcon, TrashIcon, PlusIcon, XMarkIcon, CodeBracketIcon, ServerStackIcon, SparklesIcon, BoltIcon, CloudIcon, BeakerIcon, GlobeAltIcon, BellAlertIcon, PencilIcon, ArrowUpCircleIcon, PencilSquareIcon } from '@heroicons/react/24/outline';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 
 function AgentsModelsPageView({ labels, models, loading }) {
@@ -1786,20 +1786,20 @@ function DatasourcesPageView({
           title: ds.name ?? ds.id,
           subtitle: dialectLabel,
           status: /* @__PURE__ */ jsx(Badge, { color: ds.enabled ? "emerald" : "zinc", children: ds.enabled ? labels.enabled : labels.disabled }),
-          footer: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 text-xs text-gray-400 dark:text-gray-500", children: [
+          footer: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 text-xs text-slate-400 dark:text-slate-500", children: [
             ds.readOnly && /* @__PURE__ */ jsx("span", { className: "rounded-full bg-blue-100 px-2 py-0.5 text-[10px] font-semibold text-blue-700 dark:bg-blue-900/30 dark:text-blue-300", children: "Read-only" }),
             ds.timeoutMs && /* @__PURE__ */ jsxs("span", { children: [
               ds.timeoutMs / 1e3,
               "s timeout"
             ] })
           ] }),
-          children: /* @__PURE__ */ jsxs("div", { className: "mt-2 text-xs text-gray-500 dark:text-gray-400", children: [
+          children: /* @__PURE__ */ jsxs("div", { className: "mt-2 text-xs text-slate-500 dark:text-slate-400", children: [
             /* @__PURE__ */ jsxs("div", { children: [
               labels.dialect,
               ": ",
               dialectLabel
             ] }),
-            ds.slug && /* @__PURE__ */ jsxs("div", { className: "truncate text-gray-400", children: [
+            ds.slug && /* @__PURE__ */ jsxs("div", { className: "truncate text-slate-400", children: [
               "/",
               ds.slug
             ] })
@@ -3664,7 +3664,6 @@ function AgentNewWizardPageView({
       setSubmitting(false);
     }
   }
-  const counter = labels.wizardStepCounter.replace("{current}", String(step)).replace("{total}", String(TOTAL_STEPS));
   const hero = /* @__PURE__ */ jsx(
     HeroSection,
     {
@@ -3676,10 +3675,19 @@ function AgentNewWizardPageView({
           children: emoji
         }
       ),
-      label: counter,
-      title: labels.pageTitle,
+      label: labels.pageTitle,
+      title: stepTitles[step - 1],
       subtitle: stepSubtitles[step - 1],
       gradient: activePreset.accent,
+      actions: /* @__PURE__ */ jsx(
+        IconButton,
+        {
+          label: labels.wizardCancel,
+          icon: /* @__PURE__ */ jsx(XMarkIcon, { className: "h-5 w-5" }),
+          variant: "ghost",
+          onClick: cancelWithConfirm
+        }
+      ),
       children: /* @__PURE__ */ jsx(
         StepIndicator,
         {
@@ -3694,459 +3702,369 @@ function AgentNewWizardPageView({
   );
   function renderStep1() {
     return /* @__PURE__ */ jsx(
-      SectionCard,
-      {
-        variant: "glass",
-        header: {
-          title: labels.presetTitle,
-          subtitle: labels.presetSubtitle
-        },
-        children: /* @__PURE__ */ jsx(
-          "div",
-          {
-            role: "radiogroup",
-            "aria-label": labels.presetTitle,
-            className: "grid grid-cols-1 gap-3 sm:grid-cols-2 lg:grid-cols-3",
-            children: AGENT_PRESETS.map((preset) => {
-              const selected = preset.id === presetId;
-              return /* @__PURE__ */ jsx(
-                FilterTileButton,
-                {
-                  isActive: selected,
-                  color: preset.tileColor,
-                  icon: /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: "text-base leading-none", children: preset.emoji }),
-                  label: preset.id === "custom" ? labels.presetCustom : preset.name,
-                  count: preset.role || labels.presetCustomHint,
-                  onClick: () => applyPreset(preset)
-                },
-                preset.id
-              );
-            })
-          }
-        )
-      }
-    );
-  }
-  function renderStep2() {
-    return /* @__PURE__ */ jsx(
-      SectionCard,
-      {
-        variant: "glass",
-        header: {
-          title: labels.identitySection,
-          subtitle: labels.identitySubtitle
-        },
-        children: /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
-          /* @__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(
-              PickerTile,
-              {
-                onClick: () => {
-                  setEmoji(e);
-                  markTouched();
-                },
-                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"
-                ].join(" "),
-                children: e
-              },
-              e
-            )) })
-          ] }),
-          /* @__PURE__ */ jsxs(FormGrid, { children: [
-            /* @__PURE__ */ jsx(
-              FormInput,
-              {
-                label: labels.name,
-                value: name,
-                onValueChange: (v) => {
-                  setName(v);
-                  markTouched();
-                },
-                required: true,
-                placeholder: labels.namePlaceholder
-              }
-            ),
-            /* @__PURE__ */ jsx(
-              FormInput,
-              {
-                label: labels.role,
-                value: role,
-                onValueChange: (v) => {
-                  setRole(v);
-                  markTouched();
-                },
-                placeholder: labels.rolePlaceholder
-              }
-            )
-          ] }),
-          /* @__PURE__ */ jsx(
-            FormTextarea,
-            {
-              label: labels.descriptionLabel,
-              value: description,
-              onValueChange: (v) => {
-                setDescription(v);
-                markTouched();
-              },
-              rows: 3,
-              placeholder: labels.descriptionPlaceholder
-            }
-          )
-        ] })
-      }
-    );
-  }
-  function renderStep3() {
-    return /* @__PURE__ */ jsx(
-      SectionCard,
+      "div",
       {
-        variant: "glass",
-        header: {
-          title: labels.modelSection,
-          subtitle: labels.connectionPickPrompt
-        },
-        children: /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
-          /* @__PURE__ */ jsxs(FormGrid, { children: [
-            /* @__PURE__ */ jsx(
-              FormSelect,
-              {
-                label: labels.connectionLabel,
-                value: connectionId,
-                onValueChange: (v) => {
-                  setConnectionId(v);
-                  markTouched();
-                },
-                options: connectionOptions,
-                icon: /* @__PURE__ */ jsx(LinkIcon, { className: "h-4 w-4" })
-              }
-            ),
-            /* @__PURE__ */ jsx(
-              FormSelect,
-              {
-                label: labels.frameworkLabel,
-                value: framework,
-                onValueChange: (v) => {
-                  setFramework(v);
-                  markTouched();
-                },
-                options: frameworkOptions
-              }
-            ),
-            /* @__PURE__ */ jsx(
-              FormSelect,
-              {
-                label: labels.model,
-                value: modelId,
-                onValueChange: (v) => {
-                  setModelId(v);
-                  markTouched();
-                },
-                options: modelOptions.length > 0 ? modelOptions : [{ value: "", label: labels.modelEmpty }]
-              }
-            )
-          ] }),
-          /* @__PURE__ */ jsx(
-            FormTextarea,
+        role: "radiogroup",
+        "aria-label": labels.presetTitle,
+        className: "grid grid-cols-1 gap-3 sm:grid-cols-2 lg:grid-cols-3",
+        children: AGENT_PRESETS.map((preset) => {
+          const selected = preset.id === presetId;
+          return /* @__PURE__ */ jsx(
+            FilterTileButton,
             {
-              label: labels.outputSchemaLabel,
-              value: outputSchema,
-              onValueChange: (v) => {
-                setOutputSchema(v);
-                markTouched();
-              },
-              rows: 5,
-              placeholder: labels.outputSchemaPlaceholder
-            }
-          )
-        ] })
+              isActive: selected,
+              color: preset.tileColor,
+              icon: /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: "text-base leading-none", children: preset.emoji }),
+              label: preset.id === "custom" ? labels.presetCustom : preset.name,
+              count: preset.role || labels.presetCustomHint,
+              onClick: () => applyPreset(preset)
+            },
+            preset.id
+          );
+        })
       }
     );
   }
-  function renderStep4() {
+  function renderStep2() {
     return /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
+      /* @__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(
+          PickerTile,
+          {
+            onClick: () => {
+              setEmoji(e);
+              markTouched();
+            },
+            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"
+            ].join(" "),
+            children: e
+          },
+          e
+        )) })
+      ] }),
+      /* @__PURE__ */ jsxs(FormGrid, { children: [
+        /* @__PURE__ */ jsx(
+          FormInput,
+          {
+            label: labels.name,
+            value: name,
+            onValueChange: (v) => {
+              setName(v);
+              markTouched();
+            },
+            required: true,
+            placeholder: labels.namePlaceholder
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          FormInput,
+          {
+            label: labels.role,
+            value: role,
+            onValueChange: (v) => {
+              setRole(v);
+              markTouched();
+            },
+            placeholder: labels.rolePlaceholder
+          }
+        )
+      ] }),
       /* @__PURE__ */ jsx(
-        SectionCard,
+        FormTextarea,
         {
-          variant: "glass",
-          header: {
-            title: labels.behaviorSection,
-            subtitle: labels.behaviorSubtitle
+          label: labels.descriptionLabel,
+          value: description,
+          onValueChange: (v) => {
+            setDescription(v);
+            markTouched();
           },
-          children: /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
-            /* @__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,
-              {
-                sliderId: "wizard-temperature",
-                label: labels.temperature,
-                value: temperature,
-                onChange: (v) => {
-                  setTemperature(v);
-                  markTouched();
-                },
-                min: 0,
-                max: 1,
-                step: 0.05,
-                trackGradient: "linear-gradient(90deg, #3b82f6, #8b5cf6 50%, #ec4899)",
-                formatValue: (v) => v.toFixed(2),
-                zones: [
-                  { label: "Precise", max: 0.3, color: "text-blue-500", thumbColor: "#3b82f6" },
-                  { label: "Balanced", max: 0.7, color: "text-purple-500", thumbColor: "#8b5cf6" },
-                  { label: "Creative", max: 1, color: "text-pink-500", thumbColor: "#ec4899" }
-                ]
-              }
-            ),
-            /* @__PURE__ */ jsx(
-              RangeSliderField,
-              {
-                sliderId: "wizard-top-p",
-                label: labels.topPLabel,
-                value: topP,
-                onChange: (v) => {
-                  setTopP(v);
-                  markTouched();
-                },
-                min: 0,
-                max: 1,
-                step: 0.05,
-                trackGradient: "linear-gradient(90deg, #6366f1, #8b5cf6)",
-                formatValue: (v) => v.toFixed(2),
-                zones: [
-                  { label: "Top-P", max: 1, color: "text-violet-500", thumbColor: "#8b5cf6" }
-                ]
-              }
-            ),
-            /* @__PURE__ */ jsx(
-              RangeSliderField,
-              {
-                sliderId: "wizard-top-k",
-                label: labels.topKLabel,
-                value: topK,
-                onChange: (v) => {
-                  setTopK(Math.max(0, Math.floor(v)));
-                  markTouched();
-                },
-                min: 0,
-                max: 500,
-                step: 1,
-                trackGradient: "linear-gradient(90deg, #10b981, #14b8a6)",
-                formatValue: (v) => v.toString(),
-                zones: [
-                  { label: "Top-K", max: 500, color: "text-emerald-500", thumbColor: "#10b981" }
-                ]
-              }
-            ),
-            /* @__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-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-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 ",
-                  temperature <= 0.3 ? "Precise" : temperature <= 0.7 ? "Balanced" : "Creative"
-                ] })
-              ] })
-            ] }) })
-          ] })
+          rows: 3,
+          placeholder: labels.descriptionPlaceholder
         }
-      ),
+      )
+    ] });
+  }
+  function renderStep3() {
+    return /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
+      /* @__PURE__ */ jsxs(FormGrid, { children: [
+        /* @__PURE__ */ jsx(
+          FormSelect,
+          {
+            label: labels.connectionLabel,
+            value: connectionId,
+            onValueChange: (v) => {
+              setConnectionId(v);
+              markTouched();
+            },
+            options: connectionOptions,
+            icon: /* @__PURE__ */ jsx(LinkIcon, { className: "h-4 w-4" })
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          FormSelect,
+          {
+            label: labels.frameworkLabel,
+            value: framework,
+            onValueChange: (v) => {
+              setFramework(v);
+              markTouched();
+            },
+            options: frameworkOptions
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          FormSelect,
+          {
+            label: labels.model,
+            value: modelId,
+            onValueChange: (v) => {
+              setModelId(v);
+              markTouched();
+            },
+            options: modelOptions.length > 0 ? modelOptions : [{ value: "", label: labels.modelEmpty }]
+          }
+        )
+      ] }),
       /* @__PURE__ */ jsx(
-        SectionCard,
+        FormTextarea,
         {
-          variant: "glass",
-          header: {
-            title: labels.metadataSection,
-            subtitle: labels.metadataSubtitle
+          label: labels.outputSchemaLabel,
+          value: outputSchema,
+          onValueChange: (v) => {
+            setOutputSchema(v);
+            markTouched();
           },
-          children: /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
-            /* @__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.difficultyLabel }),
-              /* @__PURE__ */ jsx("div", { className: "grid grid-cols-2 gap-2 sm:grid-cols-4", children: DIFFICULTY_OPTIONS.map((opt) => {
-                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(
-                  PickerTile,
-                  {
-                    onClick: () => {
-                      setDifficulty(opt.id);
-                      markTouched();
-                    },
-                    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"
-                    ].join(" "),
-                    children: [
-                      /* @__PURE__ */ jsx(
-                        "span",
-                        {
-                          "aria-hidden": "true",
-                          className: `flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-gradient-to-br ${opt.accent} text-base shadow-sm`,
-                          children: opt.emoji
-                        }
-                      ),
-                      /* @__PURE__ */ jsx("span", { className: "text-sm font-semibold text-slate-900 dark:text-white", children: label })
-                    ]
-                  },
-                  opt.id
-                );
-              }) })
-            ] }),
-            /* @__PURE__ */ jsx(
-              FormInput,
-              {
-                label: labels.tagsLabel,
-                value: tagsInput,
-                onValueChange: (v) => {
-                  setTagsInput(v);
-                  markTouched();
-                },
-                placeholder: labels.tagsPlaceholder
-              }
-            )
-          ] })
+          rows: 5,
+          placeholder: labels.outputSchemaPlaceholder
         }
       )
     ] });
   }
-  function renderStep5() {
-    const modelLabel = models.find((m) => m.id === modelId)?.name ?? labels.modelEmpty;
-    const connectionLabel = connectionId ? connections.find((c) => c.id === connectionId)?.name ?? labels.connectionInline : labels.connectionInline;
+  function renderStep4() {
     return /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
       /* @__PURE__ */ jsx(
-        SectionCard,
+        FormTextarea,
         {
-          variant: "glass",
-          header: {
-            title: labels.wizardStep1Title,
-            subtitle: labels.wizardStep1Subtitle
+          label: labels.promptSystemPrompt,
+          value: systemPrompt,
+          onValueChange: (v) => {
+            setSystemPrompt(v);
+            markTouched();
           },
-          actions: /* @__PURE__ */ jsxs(Button, { type: "button", size: "sm", outline: true, onClick: () => goToStep(1), children: [
-            /* @__PURE__ */ jsx(PencilSquareIcon, { className: "h-4 w-4" }),
-            /* @__PURE__ */ jsx("span", { className: "ml-1.5", children: labels.wizardReviewEdit })
-          ] }),
-          children: /* @__PURE__ */ jsx("p", { className: "text-sm text-slate-700 dark:text-slate-200", children: presetId === "custom" ? labels.presetCustom : AGENT_PRESETS.find((p) => p.id === presetId)?.name ?? labels.presetCustom })
+          rows: 6,
+          placeholder: labels.promptPlaceholder,
+          hint: `${systemPrompt.length} chars`
         }
       ),
       /* @__PURE__ */ jsx(
-        SectionCard,
+        FormTextarea,
         {
-          variant: "glass",
-          header: {
-            title: labels.wizardStep2Title,
-            subtitle: labels.wizardStep2Subtitle
+          label: labels.userPromptLabel,
+          value: userPrompt,
+          onValueChange: (v) => {
+            setUserPrompt(v);
+            markTouched();
           },
-          actions: /* @__PURE__ */ jsxs(Button, { type: "button", size: "sm", outline: true, onClick: () => goToStep(2), children: [
-            /* @__PURE__ */ jsx(PencilSquareIcon, { className: "h-4 w-4" }),
-            /* @__PURE__ */ jsx("span", { className: "ml-1.5", children: labels.wizardReviewEdit })
-          ] }),
-          children: /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-3", children: [
-            /* @__PURE__ */ jsx(
-              "span",
-              {
-                "aria-hidden": "true",
-                className: `flex h-10 w-10 shrink-0 items-center justify-center rounded-lg bg-gradient-to-br ${activePreset.accent} text-lg shadow-sm`,
-                children: emoji
-              }
-            ),
-            /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
-              /* @__PURE__ */ jsx("p", { className: "truncate text-sm font-semibold text-slate-900 dark:text-white", children: name || labels.namePlaceholder }),
-              role && /* @__PURE__ */ jsx("p", { className: "truncate text-xs text-slate-500 dark:text-slate-400", children: role }),
-              description && /* @__PURE__ */ jsx("p", { className: "mt-1 text-xs text-slate-600 dark:text-slate-300", children: description })
-            ] })
-          ] })
+          rows: 4,
+          placeholder: labels.userPromptPlaceholder,
+          hint: `${userPrompt.length} chars`
         }
       ),
       /* @__PURE__ */ jsx(
-        SectionCard,
+        RangeSliderField,
         {
-          variant: "glass",
-          header: {
-            title: labels.wizardStep3Title,
-            subtitle: labels.wizardStep3Subtitle
+          sliderId: "wizard-temperature",
+          label: labels.temperature,
+          value: temperature,
+          onChange: (v) => {
+            setTemperature(v);
+            markTouched();
           },
-          actions: /* @__PURE__ */ jsxs(Button, { type: "button", size: "sm", outline: true, onClick: () => goToStep(3), children: [
-            /* @__PURE__ */ jsx(PencilSquareIcon, { className: "h-4 w-4" }),
-            /* @__PURE__ */ jsx("span", { className: "ml-1.5", children: labels.wizardReviewEdit })
-          ] }),
-          children: /* @__PURE__ */ jsxs("dl", { className: "grid grid-cols-1 gap-2 sm:grid-cols-2", children: [
-            /* @__PURE__ */ jsx(ReviewRow, { label: labels.connectionLabel, value: connectionLabel }),
-            /* @__PURE__ */ jsx(ReviewRow, { label: labels.frameworkLabel, value: framework || "\u2014" }),
-            /* @__PURE__ */ jsx(ReviewRow, { label: labels.model, value: modelLabel }),
-            outputSchema.trim() && /* @__PURE__ */ jsx(ReviewRow, { label: labels.outputSchemaLabel, value: outputSchema.trim().slice(0, 60) + (outputSchema.length > 60 ? "\u2026" : "") })
-          ] })
+          min: 0,
+          max: 1,
+          step: 0.05,
+          trackGradient: "linear-gradient(90deg, #3b82f6, #8b5cf6 50%, #ec4899)",
+          formatValue: (v) => v.toFixed(2),
+          zones: [
+            { label: "Precise", max: 0.3, color: "text-blue-500", thumbColor: "#3b82f6" },
+            { label: "Balanced", max: 0.7, color: "text-purple-500", thumbColor: "#8b5cf6" },
+            { label: "Creative", max: 1, color: "text-pink-500", thumbColor: "#ec4899" }
+          ]
         }
       ),
-      /* @__PURE__ */ jsxs(
-        SectionCard,
+      /* @__PURE__ */ jsx(
+        RangeSliderField,
         {
-          variant: "glass",
-          header: {
-            title: labels.wizardStep4Title,
-            subtitle: labels.wizardStep4Subtitle
+          sliderId: "wizard-top-p",
+          label: labels.topPLabel,
+          value: topP,
+          onChange: (v) => {
+            setTopP(v);
+            markTouched();
           },
-          actions: /* @__PURE__ */ jsxs(Button, { type: "button", size: "sm", outline: true, onClick: () => goToStep(4), children: [
-            /* @__PURE__ */ jsx(PencilSquareIcon, { className: "h-4 w-4" }),
-            /* @__PURE__ */ jsx("span", { className: "ml-1.5", children: labels.wizardReviewEdit })
-          ] }),
-          children: [
-            /* @__PURE__ */ jsxs("dl", { className: "grid grid-cols-2 gap-2 sm:grid-cols-4", children: [
-              /* @__PURE__ */ jsx(ReviewRow, { label: labels.temperature, value: temperature.toFixed(2) }),
-              /* @__PURE__ */ jsx(ReviewRow, { label: labels.topPLabel, value: topP.toFixed(2) }),
+          min: 0,
+          max: 1,
+          step: 0.05,
+          trackGradient: "linear-gradient(90deg, #6366f1, #8b5cf6)",
+          formatValue: (v) => v.toFixed(2),
+          zones: [
+            { label: "Top-P", max: 1, color: "text-violet-500", thumbColor: "#8b5cf6" }
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        RangeSliderField,
+        {
+          sliderId: "wizard-top-k",
+          label: labels.topKLabel,
+          value: topK,
+          onChange: (v) => {
+            setTopK(Math.max(0, Math.floor(v)));
+            markTouched();
+          },
+          min: 0,
+          max: 500,
+          step: 1,
+          trackGradient: "linear-gradient(90deg, #10b981, #14b8a6)",
+          formatValue: (v) => v.toString(),
+          zones: [
+            { label: "Top-K", max: 500, color: "text-emerald-500", thumbColor: "#10b981" }
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsxs(FormGrid, { children: [
+        /* @__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(
+          FormInput,
+          {
+            label: labels.tagsLabel,
+            value: tagsInput,
+            onValueChange: (v) => {
+              setTagsInput(v);
+              markTouched();
+            },
+            placeholder: labels.tagsPlaceholder
+          }
+        )
+      ] }),
+      /* @__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.difficultyLabel }),
+        /* @__PURE__ */ jsx("div", { className: "grid grid-cols-2 gap-2 sm:grid-cols-4", children: DIFFICULTY_OPTIONS.map((opt) => {
+          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(
+            PickerTile,
+            {
+              onClick: () => {
+                setDifficulty(opt.id);
+                markTouched();
+              },
+              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"
+              ].join(" "),
+              children: [
+                /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    "aria-hidden": "true",
+                    className: `flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-gradient-to-br ${opt.accent} text-base shadow-sm`,
+                    children: opt.emoji
+                  }
+                ),
+                /* @__PURE__ */ jsx("span", { className: "text-sm font-semibold text-slate-900 dark:text-white", children: label })
+              ]
+            },
+            opt.id
+          );
+        }) })
+      ] })
+    ] });
+  }
+  function renderStep5() {
+    const modelLabel = models.find((m) => m.id === modelId)?.name ?? labels.modelEmpty;
+    const connectionLabel = connectionId ? connections.find((c) => c.id === connectionId)?.name ?? labels.connectionInline : labels.connectionInline;
+    return /* @__PURE__ */ jsxs("div", { className: "space-y-5", children: [
+      /* @__PURE__ */ jsx(
+        ReviewBlock,
+        {
+          stepTitle: labels.wizardStep1Title,
+          stepSubtitle: labels.wizardStep1Subtitle,
+          editLabel: labels.wizardReviewEdit,
+          onEdit: () => goToStep(1),
+          children: /* @__PURE__ */ jsx("p", { className: "text-sm text-slate-700 dark:text-slate-200", children: presetId === "custom" ? labels.presetCustom : AGENT_PRESETS.find((p) => p.id === presetId)?.name ?? labels.presetCustom })
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        ReviewBlock,
+        {
+          stepTitle: labels.wizardStep2Title,
+          stepSubtitle: labels.wizardStep2Subtitle,
+          editLabel: labels.wizardReviewEdit,
+          onEdit: () => goToStep(2),
+          children: /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-3", children: [
+            /* @__PURE__ */ jsx(
+              "span",
+              {
+                "aria-hidden": "true",
+                className: `flex h-10 w-10 shrink-0 items-center justify-center rounded-lg bg-gradient-to-br ${activePreset.accent} text-lg shadow-sm`,
+                children: emoji
+              }
+            ),
+            /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
+              /* @__PURE__ */ jsx("p", { className: "truncate text-sm font-semibold text-slate-900 dark:text-white", children: name || labels.namePlaceholder }),
+              role && /* @__PURE__ */ jsx("p", { className: "truncate text-xs text-slate-500 dark:text-slate-400", children: role }),
+              description && /* @__PURE__ */ jsx("p", { className: "mt-1 text-xs text-slate-600 dark:text-slate-300", children: description })
+            ] })
+          ] })
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        ReviewBlock,
+        {
+          stepTitle: labels.wizardStep3Title,
+          stepSubtitle: labels.wizardStep3Subtitle,
+          editLabel: labels.wizardReviewEdit,
+          onEdit: () => goToStep(3),
+          children: /* @__PURE__ */ jsxs("dl", { className: "grid grid-cols-1 gap-2 sm:grid-cols-2", children: [
+            /* @__PURE__ */ jsx(ReviewRow, { label: labels.connectionLabel, value: connectionLabel }),
+            /* @__PURE__ */ jsx(ReviewRow, { label: labels.frameworkLabel, value: framework || "\u2014" }),
+            /* @__PURE__ */ jsx(ReviewRow, { label: labels.model, value: modelLabel }),
+            outputSchema.trim() && /* @__PURE__ */ jsx(ReviewRow, { label: labels.outputSchemaLabel, value: outputSchema.trim().slice(0, 60) + (outputSchema.length > 60 ? "\u2026" : "") })
+          ] })
+        }
+      ),
+      /* @__PURE__ */ jsxs(
+        ReviewBlock,
+        {
+          stepTitle: labels.wizardStep4Title,
+          stepSubtitle: labels.wizardStep4Subtitle,
+          editLabel: labels.wizardReviewEdit,
+          onEdit: () => goToStep(4),
+          children: [
+            /* @__PURE__ */ jsxs("dl", { className: "grid grid-cols-2 gap-2 sm:grid-cols-4", children: [
+              /* @__PURE__ */ jsx(ReviewRow, { label: labels.temperature, value: temperature.toFixed(2) }),
+              /* @__PURE__ */ jsx(ReviewRow, { label: labels.topPLabel, value: topP.toFixed(2) }),
               /* @__PURE__ */ jsx(ReviewRow, { label: labels.topKLabel, value: String(topK) }),
               /* @__PURE__ */ jsx(ReviewRow, { label: labels.maxTokens, value: maxTokens.toLocaleString() })
             ] }),
@@ -4161,14 +4079,14 @@ function AgentNewWizardPageView({
   }
   const stepBody = step === 1 ? renderStep1() : step === 2 ? renderStep2() : step === 3 ? renderStep3() : step === 4 ? renderStep4() : renderStep5();
   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_STEPS ? /* @__PURE__ */ jsx(Button, { type: "button", color: "indigo", onClick: goNext, disabled: advanceDisabled || submitting, children: labels.wizardNext }) : /* @__PURE__ */ jsx(Button, { type: "button", color: "indigo", onClick: () => void submit(), disabled: submitting, children: submitting ? labels.wizardCreate + "\u2026" : labels.wizardCreate })
-    ] })
+  const isLast = step === TOTAL_STEPS;
+  const scrollableStep = step === 4 || step === 5;
+  const bodyClass = scrollableStep ? "p-5 pt-5 sm:p-8 sm:pt-8 max-h-[60vh] overflow-y-auto" : "p-5 pt-5 sm:p-8 sm:pt-8";
+  const footer = /* @__PURE__ */ jsxs("div", { className: "liquid-divider flex items-center justify-between border-t pt-4", children: [
+    /* @__PURE__ */ jsx(Button, { type: "button", outline: true, onClick: step === 1 ? cancelWithConfirm : goBack, disabled: submitting, children: step === 1 ? labels.wizardCancel : labels.wizardBack }),
+    isLast ? /* @__PURE__ */ jsx(Button, { type: "button", color: "ios-glass-blue", onClick: () => void submit(), disabled: submitting || !name.trim(), children: submitting ? labels.wizardCreate + "\u2026" : labels.wizardCreate }) : /* @__PURE__ */ jsx(Button, { type: "button", color: "ios-glass-blue", onClick: goNext, disabled: advanceDisabled || submitting, children: labels.wizardNext })
   ] });
-  const content = /* @__PURE__ */ jsxs(
+  return /* @__PURE__ */ jsxs(
     "form",
     {
       onSubmit: (e) => {
@@ -4178,15 +4096,12 @@ function AgentNewWizardPageView({
       },
       className: "space-y-4",
       children: [
-        /* @__PURE__ */ jsx("div", { className: "liquid-surface rounded-2xl p-5 sm:p-8", children: stepBody }),
+        hero,
+        /* @__PURE__ */ jsx(Card, { variant: "default", children: /* @__PURE__ */ jsx(CardContent, { className: bodyClass, children: stepBody }) }),
         footer
       ]
     }
   );
-  return /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
-    hero,
-    content
-  ] });
 }
 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: [
@@ -4194,6 +4109,27 @@ function ReviewRow({ label, value }) {
     /* @__PURE__ */ jsx("dd", { className: "mt-0.5 truncate text-xs font-semibold text-slate-900 dark:text-white", children: value })
   ] });
 }
+function ReviewBlock({
+  stepTitle,
+  stepSubtitle,
+  editLabel,
+  onEdit,
+  children
+}) {
+  return /* @__PURE__ */ jsxs("section", { className: "border-b liquid-divider pb-4 last:border-b-0 last:pb-0", children: [
+    /* @__PURE__ */ jsxs("header", { className: "mb-2 flex items-start justify-between gap-3", children: [
+      /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
+        /* @__PURE__ */ jsx("h4", { className: "truncate text-sm font-semibold text-slate-900 dark:text-white", children: stepTitle }),
+        stepSubtitle && /* @__PURE__ */ jsx("p", { className: "truncate text-xs text-slate-500 dark:text-slate-400", children: stepSubtitle })
+      ] }),
+      /* @__PURE__ */ jsxs(Button, { type: "button", size: "sm", outline: true, onClick: onEdit, children: [
+        /* @__PURE__ */ jsx(PencilSquareIcon, { className: "h-4 w-4" }),
+        /* @__PURE__ */ jsx("span", { className: "ml-1.5", children: editLabel })
+      ] })
+    ] }),
+    children
+  ] });
+}
 var DIALECT_LOGO_SRC = {
   bigquery: "/logos/datasources/bigquery.svg",
   postgres: "/logos/datasources/postgres.svg",
@@ -4405,15 +4341,23 @@ function DatasourceNewWizardPageView({
     id: String(idx + 1),
     title
   }));
-  const counter = labels.wizardStepCounter.replace("{current}", String(step)).replace("{total}", String(TOTAL_STEPS2));
   const hero = /* @__PURE__ */ jsx(
     HeroSection,
     {
       icon: /* @__PURE__ */ jsx(CircleStackIcon, { className: "h-5 w-5" }),
-      label: counter,
-      title: labels.pageTitle,
+      label: labels.pageTitle,
+      title: stepTitles[step - 1] ?? labels.pageTitle,
       subtitle: stepSubtitles[step - 1] ?? labels.pageSubtitle,
       gradient: category?.gradient ?? "from-amber-500 to-orange-600",
+      actions: /* @__PURE__ */ jsx(
+        IconButton,
+        {
+          label: labels.wizardCancel,
+          icon: /* @__PURE__ */ jsx(XMarkIcon, { className: "h-5 w-5" }),
+          variant: "ghost",
+          onClick: cancelWithConfirm
+        }
+      ),
       children: /* @__PURE__ */ jsx(
         StepIndicator,
         {
@@ -4427,48 +4371,42 @@ function DatasourceNewWizardPageView({
     }
   );
   function renderStep1() {
-    return /* @__PURE__ */ jsx("div", { className: "space-y-6", children: DIALECT_CATEGORIES.map((cat) => {
+    return /* @__PURE__ */ jsx("div", { className: "space-y-5", children: DIALECT_CATEGORIES.map((cat) => {
       const color = CATEGORY_COLOR[cat.id] ?? "slate";
       const categoryLabel = labels[cat.labelKey] ?? cat.id;
-      return /* @__PURE__ */ jsx(
-        SectionCard,
-        {
-          variant: "glass",
-          header: {
-            title: categoryLabel,
-            icon: /* @__PURE__ */ jsx(cat.icon, { className: "h-4 w-4" }),
-            gradient: cat.gradient
-          },
-          children: /* @__PURE__ */ jsx(
-            "div",
-            {
-              role: "radiogroup",
-              "aria-label": categoryLabel,
-              className: "grid grid-cols-2 gap-2 sm:grid-cols-3 lg:grid-cols-4",
-              children: cat.dialects.map((opt) => {
-                const selected = opt.value === dialect;
-                const logoSrc = DIALECT_LOGO_SRC[opt.value.toLowerCase()];
-                return /* @__PURE__ */ jsx(
-                  FilterTileButton,
-                  {
-                    isActive: selected,
-                    color,
-                    icon: logoSrc ? /* @__PURE__ */ jsx("img", { src: logoSrc, alt: opt.label, className: "h-5 w-5 object-contain" }) : /* @__PURE__ */ jsx(CircleStackIcon, { className: "h-5 w-5" }),
-                    label: opt.label,
-                    count: opt.formType.replace("-", " "),
-                    onClick: () => {
-                      setDialect(opt.value);
-                      markTouched();
-                    }
-                  },
-                  opt.value
-                );
-              })
-            }
-          )
-        },
-        cat.id
-      );
+      return /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsxs("div", { className: "mb-2 flex items-center gap-2 text-xs font-semibold uppercase tracking-wider text-slate-600 dark:text-slate-400", children: [
+          /* @__PURE__ */ jsx(cat.icon, { className: "h-3.5 w-3.5" }),
+          categoryLabel
+        ] }),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            role: "radiogroup",
+            "aria-label": categoryLabel,
+            className: "grid grid-cols-2 gap-2 sm:grid-cols-3 lg:grid-cols-4",
+            children: cat.dialects.map((opt) => {
+              const selected = opt.value === dialect;
+              const logoSrc = DIALECT_LOGO_SRC[opt.value.toLowerCase()];
+              return /* @__PURE__ */ jsx(
+                FilterTileButton,
+                {
+                  isActive: selected,
+                  color,
+                  icon: logoSrc ? /* @__PURE__ */ jsx("img", { src: logoSrc, alt: opt.label, className: "h-5 w-5 object-contain" }) : /* @__PURE__ */ jsx(CircleStackIcon, { className: "h-5 w-5" }),
+                  label: opt.label,
+                  count: opt.formType.replace("-", " "),
+                  onClick: () => {
+                    setDialect(opt.value);
+                    markTouched();
+                  }
+                },
+                opt.value
+              );
+            })
+          }
+        )
+      ] }, cat.id);
     }) });
   }
   function renderConnectionFields() {
@@ -4775,257 +4713,220 @@ function DatasourceNewWizardPageView({
   }
   function renderStep2() {
     if (!dialectOption) {
-      return /* @__PURE__ */ jsxs(SectionCard, { variant: "glass", header: { title: labels.wizardStep1Title }, children: [
+      return /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
         /* @__PURE__ */ jsx("p", { className: "text-sm text-slate-700 dark:text-slate-200", children: labels.wizardStep1Subtitle }),
-        /* @__PURE__ */ jsx("div", { className: "mt-3", children: /* @__PURE__ */ jsx(Button, { type: "button", outline: true, onClick: () => goToStep(1), children: labels.wizardBack }) })
+        /* @__PURE__ */ jsx(Button, { type: "button", outline: true, onClick: () => goToStep(1), children: labels.wizardBack })
       ] });
     }
-    return /* @__PURE__ */ jsx(
-      SectionCard,
-      {
-        variant: "glass",
-        header: {
-          title: dialectOption.label,
-          subtitle: labels.wizardStep2Subtitle,
-          icon: category?.icon ? /* @__PURE__ */ jsx(category.icon, { className: "h-4 w-4" }) : /* @__PURE__ */ jsx(CircleStackIcon, { className: "h-4 w-4" }),
-          gradient: category?.gradient
-        },
-        children: /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
-          /* @__PURE__ */ jsx(
-            FormInput,
-            {
-              label: labels.fieldName,
-              value: name,
-              onValueChange: (v) => {
-                setName(v);
-                markTouched();
-              },
-              placeholder: labels.fieldNamePlaceholder,
-              required: true
-            }
-          ),
-          /* @__PURE__ */ jsx(FormGrid, { children: renderConnectionFields() }),
-          /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-6 pt-1", children: [
-            /* @__PURE__ */ jsx(
-              FormToggle,
-              {
-                checked: ssl,
-                onChange: (v) => {
-                  setSsl(v);
-                  markTouched();
-                },
-                label: labels.fieldSsl,
-                variant: "inline"
-              }
-            ),
-            /* @__PURE__ */ jsx(
-              FormToggle,
-              {
-                checked: readOnly,
-                onChange: (v) => {
-                  setReadOnly(v);
-                  markTouched();
-                },
-                label: labels.fieldReadOnly,
-                variant: "inline"
-              }
-            )
-          ] }),
-          /* @__PURE__ */ jsx("p", { className: "text-xs text-slate-500 dark:text-slate-400", children: labels.fieldReadOnlyHelp }),
-          /* @__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 renderStep3() {
-    return /* @__PURE__ */ jsx(
-      SectionCard,
-      {
-        variant: "glass",
-        header: {
-          title: labels.governanceSectionTitle,
-          subtitle: labels.governanceSectionSubtitle
-        },
-        children: /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
-          /* @__PURE__ */ jsxs(FormGrid, { children: [
-            /* @__PURE__ */ jsx(
-              FormInput,
-              {
-                label: labels.fieldMaxPoolSize,
-                type: "number",
-                min: 1,
-                max: 100,
-                value: maxPoolSize,
-                onValueChange: (v) => {
-                  setMaxPoolSize(v);
-                  markTouched();
-                },
-                hint: labels.fieldMaxPoolSizeHint
-              }
-            ),
-            /* @__PURE__ */ jsx(
-              FormInput,
-              {
-                label: labels.fieldTimeoutMs,
-                type: "number",
-                min: 100,
-                value: timeoutMs,
-                onValueChange: (v) => {
-                  setTimeoutMs(v);
-                  markTouched();
-                },
-                hint: labels.fieldTimeoutMsHint
-              }
-            )
-          ] }),
-          /* @__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.fieldAllowedTables }),
-            /* @__PURE__ */ jsx(
-              ChipPicker,
-              {
-                items: allowedTablesItems,
-                selectedIds: allowedTablesSelected,
-                onChange: (ids) => {
-                  setAllowedTablesSelected(ids);
-                  markTouched();
-                },
-                onItemsChange: (items) => {
-                  setAllowedTablesItems(items);
-                  markTouched();
-                },
-                allowCustom: true,
-                unselectedStyle: allowedTablesStyle,
-                showActions: false,
-                addPlaceholder: labels.fieldAllowedTablesPlaceholder,
-                addAriaLabel: labels.fieldAllowedTables
-              }
-            ),
-            /* @__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-slate-500 dark:text-slate-400", children: labels.fieldBlockedColumns }),
-            /* @__PURE__ */ jsx(
-              ChipPicker,
-              {
-                items: blockedColumnsItems,
-                selectedIds: blockedColumnsSelected,
-                onChange: (ids) => {
-                  setBlockedColumnsSelected(ids);
-                  markTouched();
-                },
-                onItemsChange: (items) => {
-                  setBlockedColumnsItems(items);
-                  markTouched();
-                },
-                allowCustom: true,
-                unselectedStyle: blockedColumnsStyle,
-                showActions: false,
-                addPlaceholder: labels.fieldBlockedColumnsPlaceholder,
-                addAriaLabel: labels.fieldBlockedColumns
-              }
-            ),
-            /* @__PURE__ */ jsx("p", { className: "text-[11px] text-slate-500 dark:text-slate-400", children: labels.fieldBlockedColumnsHint })
-          ] }),
-          /* @__PURE__ */ jsx(
-            FormCheckbox,
-            {
-              checked: maskPii,
-              onChange: (v) => {
-                setMaskPii(v);
-                markTouched();
-              },
-              label: labels.fieldMaskPii,
-              description: labels.fieldMaskPiiDescription
-            }
-          )
-        ] })
-      }
-    );
-  }
-  function renderStep4() {
-    const categoryLabel = category ? labels[category.labelKey] ?? category.id : labels.reviewNoneValue;
-    const dialectLabel = dialectOption?.label ?? labels.reviewNoneValue;
-    const allowed = allowedTablesSelected;
-    const blocked = blockedColumnsSelected;
     return /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
       /* @__PURE__ */ jsx(
-        SectionCard,
-        {
-          variant: "glass",
-          header: {
-            title: labels.wizardStep1Title,
-            subtitle: labels.wizardStep1Subtitle
-          },
-          actions: /* @__PURE__ */ jsxs(Button, { type: "button", size: "sm", outline: true, onClick: () => goToStep(1), children: [
-            /* @__PURE__ */ jsx(PencilSquareIcon, { className: "h-4 w-4" }),
-            /* @__PURE__ */ jsx("span", { className: "ml-1.5", children: labels.wizardReviewEdit })
-          ] }),
-          children: /* @__PURE__ */ jsxs("dl", { className: "grid grid-cols-1 gap-2 sm:grid-cols-2", children: [
-            /* @__PURE__ */ jsx(ReviewRow2, { label: labels.reviewCategoryLabel, value: categoryLabel }),
-            /* @__PURE__ */ jsx(ReviewRow2, { label: labels.reviewDialectLabel, value: dialectLabel })
-          ] })
-        }
-      ),
-      /* @__PURE__ */ jsx(
-        SectionCard,
+        FormInput,
         {
-          variant: "glass",
-          header: {
-            title: labels.wizardStep2Title,
-            subtitle: labels.wizardStep2Subtitle
+          label: labels.fieldName,
+          value: name,
+          onValueChange: (v) => {
+            setName(v);
+            markTouched();
           },
-          actions: /* @__PURE__ */ jsxs(Button, { type: "button", size: "sm", outline: true, onClick: () => goToStep(2), children: [
-            /* @__PURE__ */ jsx(PencilSquareIcon, { className: "h-4 w-4" }),
-            /* @__PURE__ */ jsx("span", { className: "ml-1.5", children: labels.wizardReviewEdit })
-          ] }),
-          children: /* @__PURE__ */ jsxs("dl", { className: "grid grid-cols-1 gap-2 sm:grid-cols-2", children: [
-            /* @__PURE__ */ jsx(ReviewRow2, { label: labels.reviewNameLabel, value: name || labels.reviewNoneValue }),
-            /* @__PURE__ */ jsx(ReviewRow2, { label: labels.reviewCredentialsLabel, value: labels.reviewCredentialsRedacted }),
-            /* @__PURE__ */ jsx(ReviewRow2, { label: labels.reviewSslLabel, value: ssl ? labels.reviewYes : labels.reviewNo }),
-            /* @__PURE__ */ jsx(ReviewRow2, { label: labels.reviewReadOnlyLabel, value: readOnly ? labels.reviewYes : labels.reviewNo })
-          ] })
+          placeholder: labels.fieldNamePlaceholder,
+          required: true
         }
       ),
-      /* @__PURE__ */ jsx(
-        SectionCard,
-        {
-          variant: "glass",
-          header: {
-            title: labels.wizardStep3Title,
-            subtitle: labels.wizardStep3Subtitle
-          },
-          actions: /* @__PURE__ */ jsxs(Button, { type: "button", size: "sm", outline: true, onClick: () => goToStep(3), children: [
-            /* @__PURE__ */ jsx(PencilSquareIcon, { className: "h-4 w-4" }),
-            /* @__PURE__ */ jsx("span", { className: "ml-1.5", children: labels.wizardReviewEdit })
-          ] }),
-          children: /* @__PURE__ */ jsxs("dl", { className: "grid grid-cols-1 gap-2 sm:grid-cols-2", children: [
-            /* @__PURE__ */ jsx(ReviewRow2, { label: labels.reviewPoolLabel, value: maxPoolSize || labels.reviewNoneValue }),
-            /* @__PURE__ */ jsx(ReviewRow2, { label: labels.reviewTimeoutLabel, value: timeoutMs ? `${timeoutMs}ms` : labels.reviewNoneValue }),
-            /* @__PURE__ */ jsx(
-              ReviewRow2,
-              {
-                label: labels.reviewAllowedTablesLabel,
-                value: allowed.length > 0 ? allowed.join(", ") : labels.reviewNoneValue
-              }
-            ),
-            /* @__PURE__ */ jsx(
-              ReviewRow2,
+      /* @__PURE__ */ jsx(FormGrid, { children: renderConnectionFields() }),
+      /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-6 pt-1", children: [
+        /* @__PURE__ */ jsx(
+          FormToggle,
+          {
+            checked: ssl,
+            onChange: (v) => {
+              setSsl(v);
+              markTouched();
+            },
+            label: labels.fieldSsl,
+            variant: "inline"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          FormToggle,
+          {
+            checked: readOnly,
+            onChange: (v) => {
+              setReadOnly(v);
+              markTouched();
+            },
+            label: labels.fieldReadOnly,
+            variant: "inline"
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsx("p", { className: "text-xs text-slate-500 dark:text-slate-400", children: labels.fieldReadOnlyHelp }),
+      /* @__PURE__ */ jsxs("div", { className: "liquid-divider flex flex-wrap items-center gap-3 border-t pt-4", 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 renderStep3() {
+    return /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
+      /* @__PURE__ */ jsxs(FormGrid, { children: [
+        /* @__PURE__ */ jsx(
+          FormInput,
+          {
+            label: labels.fieldMaxPoolSize,
+            type: "number",
+            min: 1,
+            max: 100,
+            value: maxPoolSize,
+            onValueChange: (v) => {
+              setMaxPoolSize(v);
+              markTouched();
+            },
+            hint: labels.fieldMaxPoolSizeHint
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          FormInput,
+          {
+            label: labels.fieldTimeoutMs,
+            type: "number",
+            min: 100,
+            value: timeoutMs,
+            onValueChange: (v) => {
+              setTimeoutMs(v);
+              markTouched();
+            },
+            hint: labels.fieldTimeoutMsHint
+          }
+        )
+      ] }),
+      /* @__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.fieldAllowedTables }),
+        /* @__PURE__ */ jsx(
+          ChipPicker,
+          {
+            items: allowedTablesItems,
+            selectedIds: allowedTablesSelected,
+            onChange: (ids) => {
+              setAllowedTablesSelected(ids);
+              markTouched();
+            },
+            onItemsChange: (items) => {
+              setAllowedTablesItems(items);
+              markTouched();
+            },
+            allowCustom: true,
+            unselectedStyle: allowedTablesStyle,
+            showActions: false,
+            addPlaceholder: labels.fieldAllowedTablesPlaceholder,
+            addAriaLabel: labels.fieldAllowedTables
+          }
+        ),
+        /* @__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-slate-500 dark:text-slate-400", children: labels.fieldBlockedColumns }),
+        /* @__PURE__ */ jsx(
+          ChipPicker,
+          {
+            items: blockedColumnsItems,
+            selectedIds: blockedColumnsSelected,
+            onChange: (ids) => {
+              setBlockedColumnsSelected(ids);
+              markTouched();
+            },
+            onItemsChange: (items) => {
+              setBlockedColumnsItems(items);
+              markTouched();
+            },
+            allowCustom: true,
+            unselectedStyle: blockedColumnsStyle,
+            showActions: false,
+            addPlaceholder: labels.fieldBlockedColumnsPlaceholder,
+            addAriaLabel: labels.fieldBlockedColumns
+          }
+        ),
+        /* @__PURE__ */ jsx("p", { className: "text-[11px] text-slate-500 dark:text-slate-400", children: labels.fieldBlockedColumnsHint })
+      ] }),
+      /* @__PURE__ */ jsx(
+        FormCheckbox,
+        {
+          checked: maskPii,
+          onChange: (v) => {
+            setMaskPii(v);
+            markTouched();
+          },
+          label: labels.fieldMaskPii,
+          description: labels.fieldMaskPiiDescription
+        }
+      )
+    ] });
+  }
+  function renderStep4() {
+    const categoryLabel = category ? labels[category.labelKey] ?? category.id : labels.reviewNoneValue;
+    const dialectLabel = dialectOption?.label ?? labels.reviewNoneValue;
+    const allowed = allowedTablesSelected;
+    const blocked = blockedColumnsSelected;
+    return /* @__PURE__ */ jsxs("div", { className: "space-y-5", children: [
+      /* @__PURE__ */ jsx(
+        ReviewBlock2,
+        {
+          stepTitle: labels.wizardStep1Title,
+          stepSubtitle: labels.wizardStep1Subtitle,
+          editLabel: labels.wizardReviewEdit,
+          onEdit: () => goToStep(1),
+          children: /* @__PURE__ */ jsxs("dl", { className: "grid grid-cols-1 gap-2 sm:grid-cols-2", children: [
+            /* @__PURE__ */ jsx(ReviewRow2, { label: labels.reviewCategoryLabel, value: categoryLabel }),
+            /* @__PURE__ */ jsx(ReviewRow2, { label: labels.reviewDialectLabel, value: dialectLabel })
+          ] })
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        ReviewBlock2,
+        {
+          stepTitle: labels.wizardStep2Title,
+          stepSubtitle: labels.wizardStep2Subtitle,
+          editLabel: labels.wizardReviewEdit,
+          onEdit: () => goToStep(2),
+          children: /* @__PURE__ */ jsxs("dl", { className: "grid grid-cols-1 gap-2 sm:grid-cols-2", children: [
+            /* @__PURE__ */ jsx(ReviewRow2, { label: labels.reviewNameLabel, value: name || labels.reviewNoneValue }),
+            /* @__PURE__ */ jsx(ReviewRow2, { label: labels.reviewCredentialsLabel, value: labels.reviewCredentialsRedacted }),
+            /* @__PURE__ */ jsx(ReviewRow2, { label: labels.reviewSslLabel, value: ssl ? labels.reviewYes : labels.reviewNo }),
+            /* @__PURE__ */ jsx(ReviewRow2, { label: labels.reviewReadOnlyLabel, value: readOnly ? labels.reviewYes : labels.reviewNo })
+          ] })
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        ReviewBlock2,
+        {
+          stepTitle: labels.wizardStep3Title,
+          stepSubtitle: labels.wizardStep3Subtitle,
+          editLabel: labels.wizardReviewEdit,
+          onEdit: () => goToStep(3),
+          children: /* @__PURE__ */ jsxs("dl", { className: "grid grid-cols-1 gap-2 sm:grid-cols-2", children: [
+            /* @__PURE__ */ jsx(ReviewRow2, { label: labels.reviewPoolLabel, value: maxPoolSize || labels.reviewNoneValue }),
+            /* @__PURE__ */ jsx(ReviewRow2, { label: labels.reviewTimeoutLabel, value: timeoutMs ? `${timeoutMs}ms` : labels.reviewNoneValue }),
+            /* @__PURE__ */ jsx(
+              ReviewRow2,
+              {
+                label: labels.reviewAllowedTablesLabel,
+                value: allowed.length > 0 ? allowed.join(", ") : labels.reviewNoneValue
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              ReviewRow2,
               {
                 label: labels.reviewBlockedColumnsLabel,
                 value: blocked.length > 0 ? blocked.join(", ") : labels.reviewNoneValue
@@ -5039,14 +4940,14 @@ function DatasourceNewWizardPageView({
   }
   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_STEPS2 ? /* @__PURE__ */ jsx(Button, { type: "button", color: "amber", onClick: goNext, disabled: advanceDisabled || submitting, children: labels.wizardNext }) : /* @__PURE__ */ jsx(Button, { type: "button", color: "amber", onClick: () => void submit(), disabled: submitting || !dialect || !name.trim(), children: submitting ? labels.wizardCreate + "\u2026" : labels.wizardCreate })
-    ] })
+  const isLast = step === TOTAL_STEPS2;
+  const scrollableStep = step === 1 || step === 4;
+  const bodyClass = scrollableStep ? "p-5 pt-5 sm:p-8 sm:pt-8 max-h-[60vh] overflow-y-auto" : "p-5 pt-5 sm:p-8 sm:pt-8";
+  const footer = /* @__PURE__ */ jsxs("div", { className: "liquid-divider flex items-center justify-between border-t pt-4", children: [
+    /* @__PURE__ */ jsx(Button, { type: "button", outline: true, onClick: step === 1 ? cancelWithConfirm : goBack, disabled: submitting, children: step === 1 ? labels.wizardCancel : labels.wizardBack }),
+    isLast ? /* @__PURE__ */ jsx(Button, { type: "button", color: "ios-glass-blue", onClick: () => void submit(), disabled: submitting || !dialect || !name.trim(), children: submitting ? labels.wizardCreate + "\u2026" : labels.wizardCreate }) : /* @__PURE__ */ jsx(Button, { type: "button", color: "ios-glass-blue", onClick: goNext, disabled: advanceDisabled || submitting, children: labels.wizardNext })
   ] });
-  const content = /* @__PURE__ */ jsxs(
+  return /* @__PURE__ */ jsxs(
     "form",
     {
       onSubmit: (e) => {
@@ -5056,15 +4957,12 @@ function DatasourceNewWizardPageView({
       },
       className: "space-y-4",
       children: [
-        /* @__PURE__ */ jsx("div", { className: "liquid-surface rounded-2xl p-5 sm:p-8", children: stepBody }),
+        hero,
+        /* @__PURE__ */ jsx(Card, { variant: "default", children: /* @__PURE__ */ jsx(CardContent, { className: bodyClass, children: stepBody }) }),
         footer
       ]
     }
   );
-  return /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
-    hero,
-    content
-  ] });
 }
 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: [
@@ -5072,6 +4970,27 @@ function ReviewRow2({ label, value }) {
     /* @__PURE__ */ jsx("dd", { className: "mt-0.5 truncate text-xs font-semibold text-slate-900 dark:text-white", children: value })
   ] });
 }
+function ReviewBlock2({
+  stepTitle,
+  stepSubtitle,
+  editLabel,
+  onEdit,
+  children
+}) {
+  return /* @__PURE__ */ jsxs("section", { className: "border-b liquid-divider pb-4 last:border-b-0 last:pb-0", children: [
+    /* @__PURE__ */ jsxs("header", { className: "mb-2 flex items-start justify-between gap-3", children: [
+      /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
+        /* @__PURE__ */ jsx("h4", { className: "truncate text-sm font-semibold text-slate-900 dark:text-white", children: stepTitle }),
+        stepSubtitle && /* @__PURE__ */ jsx("p", { className: "truncate text-xs text-slate-500 dark:text-slate-400", children: stepSubtitle })
+      ] }),
+      /* @__PURE__ */ jsxs(Button, { type: "button", size: "sm", outline: true, onClick: onEdit, children: [
+        /* @__PURE__ */ jsx(PencilSquareIcon, { className: "h-4 w-4" }),
+        /* @__PURE__ */ jsx("span", { className: "ml-1.5", children: editLabel })
+      ] })
+    ] }),
+    children
+  ] });
+}
 async function simulateTest() {
   await new Promise((r) => setTimeout(r, 1500));
   return true;
@@ -5321,15 +5240,23 @@ function RuleNewWizardPageView({
     id: String(idx + 1),
     title
   }));
-  const counter = labels.wizardStepCounter.replace("{current}", String(step)).replace("{total}", String(TOTAL_STEPS3));
   const hero = /* @__PURE__ */ jsx(
     HeroSection,
     {
       icon: /* @__PURE__ */ jsx(AdjustmentsHorizontalIcon, { className: "h-5 w-5" }),
-      label: counter,
-      title: labels.pageTitle,
+      label: labels.pageTitle,
+      title: stepTitles[step - 1] ?? labels.pageTitle,
       subtitle: stepSubtitles[step - 1] ?? labels.pageSubtitle,
       gradient: "from-fuchsia-500 to-purple-700",
+      actions: /* @__PURE__ */ jsx(
+        IconButton,
+        {
+          label: labels.wizardCancel,
+          icon: /* @__PURE__ */ jsx(XMarkIcon, { className: "h-5 w-5" }),
+          variant: "ghost",
+          onClick: cancelWithConfirm
+        }
+      ),
       children: /* @__PURE__ */ jsx(
         StepIndicator,
         {
@@ -5343,399 +5270,346 @@ function RuleNewWizardPageView({
     }
   );
   function renderStep1() {
-    return /* @__PURE__ */ jsx(
-      SectionCard,
-      {
-        variant: "glass",
-        header: {
-          title: labels.wizardStep1Title,
-          subtitle: labels.wizardStep1Subtitle
-        },
-        children: /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
-          /* @__PURE__ */ jsx(
-            FormInput,
-            {
-              label: labels.nameLabel,
-              value: name,
-              onValueChange: (v) => {
-                setName(v);
-                markTouched();
-              },
-              placeholder: labels.namePlaceholder,
-              required: true
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            FormTextarea,
-            {
-              label: labels.descriptionLabel,
-              value: description,
-              onValueChange: (v) => {
-                setDescription(v);
-                markTouched();
-              },
-              placeholder: labels.descriptionPlaceholder,
-              rows: 3
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            RangeSliderField2,
-            {
-              sliderId: "wizard-rule-priority",
-              label: labels.priorityLabel,
-              value: priority,
-              onChange: (v) => {
-                setPriority(Math.round(v));
-                markTouched();
-              },
-              min: 0,
-              max: 100,
-              step: 1,
-              trackGradient: "linear-gradient(90deg, #10b981, #38bdf8 33%, #f59e0b 66%, #f43f5e)",
-              formatValue: (v) => String(Math.round(v)),
-              zones: [
-                { label: labels.priorityLow, max: 25, color: "text-emerald-500", thumbColor: "#10b981" },
-                { label: labels.priorityNormal, max: 50, color: "text-sky-500", thumbColor: "#38bdf8" },
-                { label: labels.priorityHigh, max: 75, color: "text-amber-500", thumbColor: "#f59e0b" },
-                { label: labels.priorityCritical, max: 100, color: "text-rose-500", thumbColor: "#f43f5e" }
-              ]
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            FormToggle,
-            {
-              checked: enabled,
-              onChange: (v) => {
-                setEnabled(v);
-                markTouched();
-              },
-              label: labels.enabledLabel,
-              variant: "card"
-            }
-          )
-        ] })
-      }
-    );
+    return /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
+      /* @__PURE__ */ jsx(
+        FormInput,
+        {
+          label: labels.nameLabel,
+          value: name,
+          onValueChange: (v) => {
+            setName(v);
+            markTouched();
+          },
+          placeholder: labels.namePlaceholder,
+          required: true
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        FormTextarea,
+        {
+          label: labels.descriptionLabel,
+          value: description,
+          onValueChange: (v) => {
+            setDescription(v);
+            markTouched();
+          },
+          placeholder: labels.descriptionPlaceholder,
+          rows: 3
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        RangeSliderField2,
+        {
+          sliderId: "wizard-rule-priority",
+          label: labels.priorityLabel,
+          value: priority,
+          onChange: (v) => {
+            setPriority(Math.round(v));
+            markTouched();
+          },
+          min: 0,
+          max: 100,
+          step: 1,
+          trackGradient: "linear-gradient(90deg, #10b981, #38bdf8 33%, #f59e0b 66%, #f43f5e)",
+          formatValue: (v) => String(Math.round(v)),
+          zones: [
+            { label: labels.priorityLow, max: 25, color: "text-emerald-500", thumbColor: "#10b981" },
+            { label: labels.priorityNormal, max: 50, color: "text-sky-500", thumbColor: "#38bdf8" },
+            { label: labels.priorityHigh, max: 75, color: "text-amber-500", thumbColor: "#f59e0b" },
+            { label: labels.priorityCritical, max: 100, color: "text-rose-500", thumbColor: "#f43f5e" }
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        FormToggle,
+        {
+          checked: enabled,
+          onChange: (v) => {
+            setEnabled(v);
+            markTouched();
+          },
+          label: labels.enabledLabel,
+          variant: "card"
+        }
+      )
+    ] });
   }
   function renderStep2() {
-    return /* @__PURE__ */ jsx(
-      SectionCard,
-      {
-        variant: "glass",
-        header: {
-          title: labels.conditionSectionTitle,
-          subtitle: labels.conditionSectionSubtitle
-        },
-        children: /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
-          /* @__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.combinatorLabel }),
-            /* @__PURE__ */ jsx(
-              SegmentedControl,
-              {
-                segments: [
-                  { value: "and", label: labels.combinatorAnd },
-                  { value: "or", label: labels.combinatorOr },
-                  { value: "not", label: labels.combinatorNot }
-                ],
-                value: combinator,
-                onChange: (v) => {
-                  setCombinator(v);
-                  markTouched();
-                },
-                size: "sm"
-              }
-            )
-          ] }),
-          /* @__PURE__ */ jsx(
-            RuleConditionBuilder,
-            {
-              value: condition,
-              onChange: (next) => {
-                setCondition(next);
-                markTouched();
-              }
-            }
-          )
-        ] })
-      }
-    );
+    return /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
+      /* @__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.combinatorLabel }),
+        /* @__PURE__ */ jsx(
+          SegmentedControl,
+          {
+            segments: [
+              { value: "and", label: labels.combinatorAnd },
+              { value: "or", label: labels.combinatorOr },
+              { value: "not", label: labels.combinatorNot }
+            ],
+            value: combinator,
+            onChange: (v) => {
+              setCombinator(v);
+              markTouched();
+            },
+            size: "sm"
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsx(
+        RuleConditionBuilder,
+        {
+          value: condition,
+          onChange: (next) => {
+            setCondition(next);
+            markTouched();
+          }
+        }
+      )
+    ] });
   }
   function renderStep3() {
-    const selectedTile = ACTION_TILES.find((t) => t.id === actionTileId) ?? null;
-    return /* @__PURE__ */ jsx(
-      SectionCard,
-      {
-        variant: "glass",
-        header: {
-          title: labels.actionSectionTitle,
-          subtitle: labels.actionSectionSubtitle
-        },
-        children: /* @__PURE__ */ jsxs("div", { className: "space-y-5", children: [
-          /* @__PURE__ */ jsx(
-            "div",
-            {
-              role: "radiogroup",
-              "aria-label": labels.actionSectionTitle,
-              className: "grid grid-cols-1 gap-3 sm:grid-cols-2 lg:grid-cols-3",
-              children: ACTION_TILES.map((tile) => {
-                const Icon = tile.icon;
-                const selected = tile.id === actionTileId;
-                const label = labels[tile.labelKey] ?? tile.id;
-                const description2 = labels[tile.descriptionKey] ?? "";
-                return /* @__PURE__ */ jsx(
-                  FilterTileButton,
-                  {
-                    isActive: selected,
-                    color: tile.color,
-                    icon: /* @__PURE__ */ jsx(Icon, { className: "h-5 w-5" }),
-                    label,
-                    count: description2,
-                    onClick: () => {
-                      setActionTileId(tile.id);
-                      markTouched();
-                    }
-                  },
-                  tile.id
-                );
-              })
-            }
-          ),
-          selectedTile && /* @__PURE__ */ jsx(
-            SectionCard,
-            {
-              variant: "glass",
-              header: {
-                title: labels[selectedTile.labelKey] ?? selectedTile.id,
-                subtitle: labels.actionConfigSubtitle
-              },
-              children: /* @__PURE__ */ jsx(
-                RuleActionBuilder,
-                {
-                  value: action,
-                  onChange: (next) => {
-                    setAction(next);
-                    markTouched();
-                  }
+    return /* @__PURE__ */ jsxs("div", { className: "space-y-5", children: [
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          role: "radiogroup",
+          "aria-label": labels.actionSectionTitle,
+          className: "grid grid-cols-1 gap-3 sm:grid-cols-2 lg:grid-cols-3",
+          children: ACTION_TILES.map((tile) => {
+            const Icon = tile.icon;
+            const selected = tile.id === actionTileId;
+            const label = labels[tile.labelKey] ?? tile.id;
+            const description2 = labels[tile.descriptionKey] ?? "";
+            return /* @__PURE__ */ jsx(
+              FilterTileButton,
+              {
+                isActive: selected,
+                color: tile.color,
+                icon: /* @__PURE__ */ jsx(Icon, { className: "h-5 w-5" }),
+                label,
+                count: description2,
+                onClick: () => {
+                  setActionTileId(tile.id);
+                  markTouched();
                 }
-              )
+              },
+              tile.id
+            );
+          })
+        }
+      ),
+      actionTileId && /* @__PURE__ */ jsxs("div", { className: "border-t liquid-divider pt-4", children: [
+        /* @__PURE__ */ jsx("p", { className: "mb-2 text-xs text-slate-500 dark:text-slate-400", children: labels.actionConfigSubtitle }),
+        /* @__PURE__ */ jsx(
+          RuleActionBuilder,
+          {
+            value: action,
+            onChange: (next) => {
+              setAction(next);
+              markTouched();
             }
-          )
-        ] })
-      }
-    );
+          }
+        )
+      ] })
+    ] });
   }
   function renderStep4() {
-    return /* @__PURE__ */ jsx("div", { className: "space-y-4", children: /* @__PURE__ */ jsx(
-      SectionCard,
-      {
-        variant: "glass",
-        header: {
-          title: labels.scheduleSectionTitle,
-          subtitle: labels.scheduleSectionSubtitle
-        },
-        children: /* @__PURE__ */ jsxs("div", { className: "space-y-5", children: [
-          /* @__PURE__ */ jsxs(FormGrid, { children: [
-            /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
-              /* @__PURE__ */ jsx("span", { className: "block text-xs font-semibold uppercase tracking-wider text-slate-600 dark:text-slate-400", children: labels.validFromLabel }),
-              /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [
-                /* @__PURE__ */ jsx(
-                  DatePicker,
-                  {
-                    value: validFromDate,
-                    onChange: (d) => {
-                      setValidFromDate(d);
-                      markTouched();
-                    },
-                    placeholder: labels.validFromDateLabel
-                  }
-                ),
-                /* @__PURE__ */ jsx(
-                  TimePicker,
-                  {
-                    value: validFromTime,
-                    onChange: (t) => {
-                      setValidFromTime(t);
-                      markTouched();
-                    },
-                    placeholder: labels.validFromTimeLabel
-                  }
-                )
-              ] })
-            ] }),
-            /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
-              /* @__PURE__ */ jsx("span", { className: "block text-xs font-semibold uppercase tracking-wider text-slate-600 dark:text-slate-400", children: labels.validUntilLabel }),
-              /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [
-                /* @__PURE__ */ jsx(
-                  DatePicker,
-                  {
-                    value: validUntilDate,
-                    onChange: (d) => {
-                      setValidUntilDate(d);
-                      markTouched();
-                    },
-                    placeholder: labels.validUntilDateLabel
-                  }
-                ),
-                /* @__PURE__ */ jsx(
-                  TimePicker,
-                  {
-                    value: validUntilTime,
-                    onChange: (t) => {
-                      setValidUntilTime(t);
-                      markTouched();
-                    },
-                    placeholder: labels.validUntilTimeLabel
-                  }
-                )
-              ] })
-            ] })
-          ] }),
-          /* @__PURE__ */ jsx(
-            FormCheckbox,
-            {
-              checked: noExpiry,
-              onChange: (v) => {
-                setNoExpiry(v);
-                markTouched();
-              },
-              label: labels.noExpiryLabel,
-              description: labels.noExpiryDescription
-            }
-          ),
-          /* @__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.statusLabel }),
+    return /* @__PURE__ */ jsxs("div", { className: "space-y-5", children: [
+      /* @__PURE__ */ jsxs(FormGrid, { children: [
+        /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+          /* @__PURE__ */ jsx("span", { className: "block text-xs font-semibold uppercase tracking-wider text-slate-600 dark:text-slate-400", children: labels.validFromLabel }),
+          /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [
             /* @__PURE__ */ jsx(
-              SegmentedControl,
+              DatePicker,
               {
-                segments: [
-                  { value: "active", label: labels.statusActive },
-                  { value: "paused", label: labels.statusPaused },
-                  { value: "archived", label: labels.statusArchived }
-                ],
-                value: status,
-                onChange: (v) => {
-                  setStatus(v);
+                value: validFromDate,
+                onChange: (d) => {
+                  setValidFromDate(d);
                   markTouched();
                 },
-                size: "sm"
+                placeholder: labels.validFromDateLabel
               }
-            )
-          ] }),
-          /* @__PURE__ */ jsxs("div", { className: "space-y-1", children: [
-            /* @__PURE__ */ jsx("label", { className: "block text-xs font-semibold uppercase tracking-wider text-slate-600 dark:text-slate-400", children: labels.tagsLabel }),
+            ),
             /* @__PURE__ */ jsx(
-              ChipPicker,
+              TimePicker,
               {
-                items: tagsItems,
-                selectedIds: tagsSelected,
-                onChange: (ids) => {
-                  setTagsSelected(ids);
+                value: validFromTime,
+                onChange: (t) => {
+                  setValidFromTime(t);
                   markTouched();
                 },
-                onItemsChange: (items) => {
-                  setTagsItems(items);
+                placeholder: labels.validFromTimeLabel
+              }
+            )
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+          /* @__PURE__ */ jsx("span", { className: "block text-xs font-semibold uppercase tracking-wider text-slate-600 dark:text-slate-400", children: labels.validUntilLabel }),
+          /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [
+            /* @__PURE__ */ jsx(
+              DatePicker,
+              {
+                value: validUntilDate,
+                onChange: (d) => {
+                  setValidUntilDate(d);
                   markTouched();
                 },
-                allowCustom: true,
-                unselectedStyle: tagsStyle,
-                showActions: false,
-                addPlaceholder: labels.tagsPlaceholder,
-                addAriaLabel: labels.tagsLabel
+                placeholder: labels.validUntilDateLabel
               }
             ),
-            /* @__PURE__ */ jsx("p", { className: "text-[11px] text-slate-500 dark:text-slate-400", children: labels.tagsHint })
-          ] }),
-          /* @__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.recurrenceLabel }),
             /* @__PURE__ */ jsx(
-              SegmentedControl,
+              TimePicker,
               {
-                segments: [
-                  { value: "one-off", label: labels.recurrenceOneOff },
-                  { value: "cron", label: labels.recurrenceCron },
-                  { value: "recurring", label: labels.recurrenceRecurring }
-                ],
-                value: recurrence,
-                onChange: (v) => {
-                  setRecurrence(v);
+                value: validUntilTime,
+                onChange: (t) => {
+                  setValidUntilTime(t);
                   markTouched();
                 },
-                size: "sm"
+                placeholder: labels.validUntilTimeLabel
               }
             )
-          ] }),
-          recurrence === "cron" && /* @__PURE__ */ jsx(
-            FormInput,
+          ] })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsx(
+        FormCheckbox,
+        {
+          checked: noExpiry,
+          onChange: (v) => {
+            setNoExpiry(v);
+            markTouched();
+          },
+          label: labels.noExpiryLabel,
+          description: labels.noExpiryDescription
+        }
+      ),
+      /* @__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.statusLabel }),
+        /* @__PURE__ */ jsx(
+          SegmentedControl,
+          {
+            segments: [
+              { value: "active", label: labels.statusActive },
+              { value: "paused", label: labels.statusPaused },
+              { value: "archived", label: labels.statusArchived }
+            ],
+            value: status,
+            onChange: (v) => {
+              setStatus(v);
+              markTouched();
+            },
+            size: "sm"
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "space-y-1", children: [
+        /* @__PURE__ */ jsx("label", { className: "block text-xs font-semibold uppercase tracking-wider text-slate-600 dark:text-slate-400", children: labels.tagsLabel }),
+        /* @__PURE__ */ jsx(
+          ChipPicker,
+          {
+            items: tagsItems,
+            selectedIds: tagsSelected,
+            onChange: (ids) => {
+              setTagsSelected(ids);
+              markTouched();
+            },
+            onItemsChange: (items) => {
+              setTagsItems(items);
+              markTouched();
+            },
+            allowCustom: true,
+            unselectedStyle: tagsStyle,
+            showActions: false,
+            addPlaceholder: labels.tagsPlaceholder,
+            addAriaLabel: labels.tagsLabel
+          }
+        ),
+        /* @__PURE__ */ jsx("p", { className: "text-[11px] text-slate-500 dark:text-slate-400", children: labels.tagsHint })
+      ] }),
+      /* @__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.recurrenceLabel }),
+        /* @__PURE__ */ jsx(
+          SegmentedControl,
+          {
+            segments: [
+              { value: "one-off", label: labels.recurrenceOneOff },
+              { value: "cron", label: labels.recurrenceCron },
+              { value: "recurring", label: labels.recurrenceRecurring }
+            ],
+            value: recurrence,
+            onChange: (v) => {
+              setRecurrence(v);
+              markTouched();
+            },
+            size: "sm"
+          }
+        )
+      ] }),
+      recurrence === "cron" && /* @__PURE__ */ jsx(
+        FormInput,
+        {
+          label: labels.cronExpressionLabel,
+          value: cronExpression,
+          onValueChange: (v) => {
+            setCronExpression(v);
+            markTouched();
+          },
+          placeholder: labels.cronExpressionPlaceholder,
+          hint: labels.cronExpressionHint
+        }
+      ),
+      recurrence === "recurring" && /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
+        /* @__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.weekdaysLabel }),
+          /* @__PURE__ */ jsx(
+            ChipPicker,
             {
-              label: labels.cronExpressionLabel,
-              value: cronExpression,
-              onValueChange: (v) => {
-                setCronExpression(v);
+              items: WEEKDAYS.map((d) => ({
+                id: d.id,
+                name: labels[d.labelKey] ?? d.id,
+                style: {
+                  bg: "bg-fuchsia-500/15",
+                  text: "text-fuchsia-700 dark:text-fuchsia-300"
+                }
+              })),
+              selectedIds: weekdays,
+              onChange: (ids) => {
+                setWeekdays(ids);
                 markTouched();
               },
-              placeholder: labels.cronExpressionPlaceholder,
-              hint: labels.cronExpressionHint
+              showActions: false
             }
-          ),
-          recurrence === "recurring" && /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
-            /* @__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.weekdaysLabel }),
-              /* @__PURE__ */ jsx(
-                ChipPicker,
-                {
-                  items: WEEKDAYS.map((d) => ({
-                    id: d.id,
-                    name: labels[d.labelKey] ?? d.id,
-                    style: {
-                      bg: "bg-fuchsia-500/15",
-                      text: "text-fuchsia-700 dark:text-fuchsia-300"
-                    }
-                  })),
-                  selectedIds: weekdays,
-                  onChange: (ids) => {
-                    setWeekdays(ids);
-                    markTouched();
-                  },
-                  showActions: false
-                }
-              )
-            ] }),
-            /* @__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.timeOfDayLabel }),
-              /* @__PURE__ */ jsx(
-                TimePicker,
-                {
-                  value: recurringTime,
-                  onChange: (t) => {
-                    setRecurringTime(t);
-                    markTouched();
-                  },
-                  placeholder: labels.timeOfDayLabel
-                }
-              )
-            ] })
-          ] })
+          )
+        ] }),
+        /* @__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.timeOfDayLabel }),
+          /* @__PURE__ */ jsx(
+            TimePicker,
+            {
+              value: recurringTime,
+              onChange: (t) => {
+                setRecurringTime(t);
+                markTouched();
+              },
+              placeholder: labels.timeOfDayLabel
+            }
+          )
         ] })
-      }
-    ) });
+      ] })
+    ] });
   }
   function renderStep5() {
     const payload = buildPayload();
     const conditionSentence = humanReadableCondition(payload.condition, labels);
     const actionSentence = humanReadableAction(payload.action, labels, ACTION_TILES, actionTileId);
-    return /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
+    return /* @__PURE__ */ jsxs("div", { className: "space-y-5", children: [
       /* @__PURE__ */ jsx(
-        SectionCard,
+        ReviewBlock3,
         {
-          variant: "glass",
-          header: {
-            title: labels.wizardStep1Title,
-            subtitle: labels.wizardStep1Subtitle
-          },
-          actions: /* @__PURE__ */ jsxs(Button, { type: "button", size: "sm", outline: true, onClick: () => goToStep(1), children: [
-            /* @__PURE__ */ jsx(PencilSquareIcon, { className: "h-4 w-4" }),
-            /* @__PURE__ */ jsx("span", { className: "ml-1.5", children: labels.wizardReviewEdit })
-          ] }),
+          stepTitle: labels.wizardStep1Title,
+          stepSubtitle: labels.wizardStep1Subtitle,
+          editLabel: labels.wizardReviewEdit,
+          onEdit: () => goToStep(1),
           children: /* @__PURE__ */ jsxs("dl", { className: "grid grid-cols-1 gap-2 sm:grid-cols-2", children: [
             /* @__PURE__ */ jsx(ReviewRow3, { label: labels.reviewNameLabel, value: payload.name }),
             /* @__PURE__ */ jsx(ReviewRow3, { label: labels.reviewPriorityLabel, value: String(payload.priority) }),
@@ -5751,54 +5625,35 @@ function RuleNewWizardPageView({
         }
       ),
       /* @__PURE__ */ jsxs(
-        SectionCard,
+        ReviewBlock3,
         {
-          variant: "glass",
-          header: {
-            title: labels.wizardStep2Title,
-            subtitle: labels.wizardStep2Subtitle
-          },
-          actions: /* @__PURE__ */ jsxs(Button, { type: "button", size: "sm", outline: true, onClick: () => goToStep(2), children: [
-            /* @__PURE__ */ jsx(PencilSquareIcon, { className: "h-4 w-4" }),
-            /* @__PURE__ */ jsx("span", { className: "ml-1.5", children: labels.wizardReviewEdit })
-          ] }),
+          stepTitle: labels.wizardStep2Title,
+          stepSubtitle: labels.wizardStep2Subtitle,
+          editLabel: labels.wizardReviewEdit,
+          onEdit: () => goToStep(2),
           children: [
             /* @__PURE__ */ jsx("p", { className: "mb-2 text-sm text-slate-700 dark:text-slate-200", children: conditionSentence }),
-            /* @__PURE__ */ jsx(ReviewRow3, { label: labels.reviewCombinatorLabel, value: combinator.toUpperCase() }),
-            /* @__PURE__ */ jsx("pre", { className: "mt-3 max-h-48 overflow-auto 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: JSON.stringify(payload.condition, null, 2) })
+            /* @__PURE__ */ jsx(ReviewRow3, { label: labels.reviewCombinatorLabel, value: combinator.toUpperCase() })
           ]
         }
       ),
-      /* @__PURE__ */ jsxs(
-        SectionCard,
+      /* @__PURE__ */ jsx(
+        ReviewBlock3,
         {
-          variant: "glass",
-          header: {
-            title: labels.wizardStep3Title,
-            subtitle: labels.wizardStep3Subtitle
-          },
-          actions: /* @__PURE__ */ jsxs(Button, { type: "button", size: "sm", outline: true, onClick: () => goToStep(3), children: [
-            /* @__PURE__ */ jsx(PencilSquareIcon, { className: "h-4 w-4" }),
-            /* @__PURE__ */ jsx("span", { className: "ml-1.5", children: labels.wizardReviewEdit })
-          ] }),
-          children: [
-            /* @__PURE__ */ jsx("p", { className: "mb-2 text-sm text-slate-700 dark:text-slate-200", children: actionSentence }),
-            /* @__PURE__ */ jsx("pre", { className: "mt-3 max-h-48 overflow-auto 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: JSON.stringify(payload.action, null, 2) })
-          ]
+          stepTitle: labels.wizardStep3Title,
+          stepSubtitle: labels.wizardStep3Subtitle,
+          editLabel: labels.wizardReviewEdit,
+          onEdit: () => goToStep(3),
+          children: /* @__PURE__ */ jsx("p", { className: "text-sm text-slate-700 dark:text-slate-200", children: actionSentence })
         }
       ),
       /* @__PURE__ */ jsx(
-        SectionCard,
+        ReviewBlock3,
         {
-          variant: "glass",
-          header: {
-            title: labels.wizardStep4Title,
-            subtitle: labels.wizardStep4Subtitle
-          },
-          actions: /* @__PURE__ */ jsxs(Button, { type: "button", size: "sm", outline: true, onClick: () => goToStep(4), children: [
-            /* @__PURE__ */ jsx(PencilSquareIcon, { className: "h-4 w-4" }),
-            /* @__PURE__ */ jsx("span", { className: "ml-1.5", children: labels.wizardReviewEdit })
-          ] }),
+          stepTitle: labels.wizardStep4Title,
+          stepSubtitle: labels.wizardStep4Subtitle,
+          editLabel: labels.wizardReviewEdit,
+          onEdit: () => goToStep(4),
           children: /* @__PURE__ */ jsxs("dl", { className: "grid grid-cols-1 gap-2 sm:grid-cols-2", children: [
             /* @__PURE__ */ jsx(
               ReviewRow3,
@@ -5830,23 +5685,23 @@ function RuleNewWizardPageView({
   }
   const stepBody = step === 1 ? renderStep1() : step === 2 ? renderStep2() : step === 3 ? renderStep3() : step === 4 ? renderStep4() : renderStep5();
   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_STEPS3 ? /* @__PURE__ */ jsx(Button, { type: "button", color: "fuchsia", onClick: goNext, disabled: advanceDisabled || submitting, children: labels.wizardNext }) : /* @__PURE__ */ jsx(
-        Button,
-        {
-          type: "button",
-          color: "fuchsia",
-          onClick: () => void submit(),
-          disabled: submitting || !name.trim() || !actionTileId,
-          children: submitting ? labels.wizardCreate + "\u2026" : labels.wizardCreate
-        }
-      )
-    ] })
+  const isLast = step === TOTAL_STEPS3;
+  const scrollableStep = step === 2 || step === 3 || step === 4 || step === 5;
+  const bodyClass = scrollableStep ? "p-5 pt-5 sm:p-8 sm:pt-8 max-h-[60vh] overflow-y-auto" : "p-5 pt-5 sm:p-8 sm:pt-8";
+  const footer = /* @__PURE__ */ jsxs("div", { className: "liquid-divider flex items-center justify-between border-t pt-4", children: [
+    /* @__PURE__ */ jsx(Button, { type: "button", outline: true, onClick: step === 1 ? cancelWithConfirm : goBack, disabled: submitting, children: step === 1 ? labels.wizardCancel : labels.wizardBack }),
+    isLast ? /* @__PURE__ */ jsx(
+      Button,
+      {
+        type: "button",
+        color: "ios-glass-blue",
+        onClick: () => void submit(),
+        disabled: submitting || !name.trim() || !actionTileId,
+        children: submitting ? labels.wizardCreate + "\u2026" : labels.wizardCreate
+      }
+    ) : /* @__PURE__ */ jsx(Button, { type: "button", color: "ios-glass-blue", onClick: goNext, disabled: advanceDisabled || submitting, children: labels.wizardNext })
   ] });
-  const content = /* @__PURE__ */ jsxs(
+  return /* @__PURE__ */ jsxs(
     "form",
     {
       onSubmit: (e) => {
@@ -5856,15 +5711,12 @@ function RuleNewWizardPageView({
       },
       className: "space-y-4",
       children: [
-        /* @__PURE__ */ jsx("div", { className: "liquid-surface rounded-2xl p-5 sm:p-8", children: stepBody }),
+        hero,
+        /* @__PURE__ */ jsx(Card, { variant: "default", children: /* @__PURE__ */ jsx(CardContent, { className: bodyClass, children: stepBody }) }),
         footer
       ]
     }
   );
-  return /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
-    hero,
-    content
-  ] });
 }
 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: [
@@ -5872,6 +5724,27 @@ function ReviewRow3({ label, value }) {
     /* @__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 ReviewBlock3({
+  stepTitle,
+  stepSubtitle,
+  editLabel,
+  onEdit,
+  children
+}) {
+  return /* @__PURE__ */ jsxs("section", { className: "border-b liquid-divider pb-4 last:border-b-0 last:pb-0", children: [
+    /* @__PURE__ */ jsxs("header", { className: "mb-2 flex items-start justify-between gap-3", children: [
+      /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
+        /* @__PURE__ */ jsx("h4", { className: "truncate text-sm font-semibold text-slate-900 dark:text-white", children: stepTitle }),
+        stepSubtitle && /* @__PURE__ */ jsx("p", { className: "truncate text-xs text-slate-500 dark:text-slate-400", children: stepSubtitle })
+      ] }),
+      /* @__PURE__ */ jsxs(Button, { type: "button", size: "sm", outline: true, onClick: onEdit, children: [
+        /* @__PURE__ */ jsx(PencilSquareIcon, { className: "h-4 w-4" }),
+        /* @__PURE__ */ jsx("span", { className: "ml-1.5", children: editLabel })
+      ] })
+    ] }),
+    children
+  ] });
+}
 function pad(n) {
   return String(n).padStart(2, "0");
 }
@@ -6108,15 +5981,23 @@ function ModelNewWizardPageView({
   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,
+      label: labels.pageTitle,
+      title: stepTitles[step - 1] ?? labels.pageTitle,
       subtitle: stepSubtitles[step - 1] ?? labels.pageSubtitle,
       gradient: "from-emerald-500 to-teal-700",
+      actions: /* @__PURE__ */ jsx(
+        IconButton,
+        {
+          label: labels.wizardCancel,
+          icon: /* @__PURE__ */ jsx(XMarkIcon, { className: "h-5 w-5" }),
+          variant: "ghost",
+          onClick: cancelWithConfirm
+        }
+      ),
       children: /* @__PURE__ */ jsx(
         StepIndicator,
         {
@@ -6131,185 +6012,166 @@ function ModelNewWizardPageView({
   );
   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,
+      "div",
       {
-        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,
+        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,
             {
-              label: labels.apiKeyLabel,
-              type: "password",
-              value: apiKey,
-              onValueChange: (v) => {
-                setApiKey(v);
+              isActive: selected,
+              color,
+              icon: /* @__PURE__ */ jsx(Icon, { className: "h-5 w-5" }),
+              label: p.label,
+              count: p.category,
+              onClick: () => {
+                setProviderSlug(p.value);
                 markTouched();
-              },
-              placeholder: labels.apiKeyPlaceholder
-            }
-          )
-        ] }) })
+              }
+            },
+            p.value
+          );
+        })
       }
     );
   }
+  function renderStep2() {
+    return /* @__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 })
-          ] })
-        ] })
-      }
-    );
+    return /* @__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: "liquid-divider flex flex-wrap items-center gap-3 border-t pt-4", 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: [
+    return /* @__PURE__ */ jsxs("div", { className: "space-y-5", children: [
       /* @__PURE__ */ jsx(
-        SectionCard,
+        ReviewBlock4,
         {
-          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 }),
+          stepTitle: labels.step1Title,
+          stepSubtitle: labels.step1Subtitle,
+          editLabel: labels.wizardReviewEdit,
+          onEdit: () => goToStep(1),
           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,
+        ReviewBlock4,
         {
-          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 }),
+          stepTitle: labels.step2Title,
+          stepSubtitle: labels.step2Subtitle,
+          editLabel: labels.wizardReviewEdit,
+          onEdit: () => goToStep(2),
           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 })
@@ -6317,11 +6179,12 @@ function ModelNewWizardPageView({
         }
       ),
       /* @__PURE__ */ jsx(
-        SectionCard,
+        ReviewBlock4,
         {
-          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 }),
+          stepTitle: labels.step3Title,
+          stepSubtitle: labels.step3Subtitle,
+          editLabel: labels.wizardReviewEdit,
+          onEdit: () => goToStep(3),
           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 }),
@@ -6339,14 +6202,14 @@ function ModelNewWizardPageView({
   }
   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 isLast = step === TOTAL_STEPS4;
+  const scrollableStep = step === 1 || step === 4;
+  const bodyClass = scrollableStep ? "p-5 pt-5 sm:p-8 sm:pt-8 max-h-[60vh] overflow-y-auto" : "p-5 pt-5 sm:p-8 sm:pt-8";
+  const footer = /* @__PURE__ */ jsxs("div", { className: "liquid-divider flex items-center justify-between border-t pt-4", children: [
+    /* @__PURE__ */ jsx(Button, { type: "button", outline: true, onClick: step === 1 ? cancelWithConfirm : goBack, disabled: submitting, children: step === 1 ? labels.wizardCancel : labels.wizardBack }),
+    isLast ? /* @__PURE__ */ jsx(Button, { type: "button", color: "ios-glass-blue", onClick: () => void submit(), disabled: submitting || !name.trim(), children: submitting ? labels.wizardCreate + "\u2026" : labels.wizardCreate }) : /* @__PURE__ */ jsx(Button, { type: "button", color: "ios-glass-blue", onClick: goNext, disabled: advanceDisabled || submitting, children: labels.wizardNext })
   ] });
-  const content = /* @__PURE__ */ jsxs(
+  return /* @__PURE__ */ jsxs(
     "form",
     {
       onSubmit: (e) => {
@@ -6356,15 +6219,12 @@ function ModelNewWizardPageView({
       },
       className: "space-y-4",
       children: [
-        /* @__PURE__ */ jsx("div", { className: "liquid-surface rounded-2xl p-5 sm:p-8", children: stepBody }),
+        hero,
+        /* @__PURE__ */ jsx(Card, { variant: "default", children: /* @__PURE__ */ jsx(CardContent, { className: bodyClass, 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: [
@@ -6372,6 +6232,27 @@ function ReviewRow4({ label, value }) {
     /* @__PURE__ */ jsx("dd", { className: "mt-0.5 truncate text-xs font-semibold text-slate-900 dark:text-white", children: value })
   ] });
 }
+function ReviewBlock4({
+  stepTitle,
+  stepSubtitle,
+  editLabel,
+  onEdit,
+  children
+}) {
+  return /* @__PURE__ */ jsxs("section", { className: "border-b liquid-divider pb-4 last:border-b-0 last:pb-0", children: [
+    /* @__PURE__ */ jsxs("header", { className: "mb-2 flex items-start justify-between gap-3", children: [
+      /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
+        /* @__PURE__ */ jsx("h4", { className: "truncate text-sm font-semibold text-slate-900 dark:text-white", children: stepTitle }),
+        stepSubtitle && /* @__PURE__ */ jsx("p", { className: "truncate text-xs text-slate-500 dark:text-slate-400", children: stepSubtitle })
+      ] }),
+      /* @__PURE__ */ jsxs(Button, { type: "button", size: "sm", outline: true, onClick: onEdit, children: [
+        /* @__PURE__ */ jsx(PencilSquareIcon, { className: "h-4 w-4" }),
+        /* @__PURE__ */ jsx("span", { className: "ml-1.5", children: editLabel })
+      ] })
+    ] }),
+    children
+  ] });
+}
 function ModelNewModal({ open, onClose, ...wizardProps }) {
   return /* @__PURE__ */ jsx(
     GlassModal,