@datatechsolutions/ui 3.8.0 → 3.9.0

package/dist/platform/pages/index.mjs

@@ -1,14 +1,14 @@
 "use client";
 import { adaptWorkflowGraphToUi, formatDurationMs } from '../../chunk-UQXVCVAN.mjs';
-import { WorkflowWorkspace } from '../../chunk-5W6LMDXV.mjs';
-export { RolesPageView, UsersPageView } from '../../chunk-5W6LMDXV.mjs';
-import { DatasourceModal, findCategory, DIALECT_CATEGORIES } from '../../chunk-A4A3SQTV.mjs';
-export { DIALECT_CATEGORIES, DatasourceFormModal, DatasourceModal, findCategory, findDialect } from '../../chunk-A4A3SQTV.mjs';
-import { defaultRuleForm, RuleForm, ExecutionTimelinePanel } from '../../chunk-5YVOLHSW.mjs';
+import { WorkflowWorkspace } from '../../chunk-GQWC4EKE.mjs';
+export { RolesPageView, UsersPageView } from '../../chunk-GQWC4EKE.mjs';
+import { DatasourceModal, findCategory, DIALECT_CATEGORIES } from '../../chunk-6QJI5YOJ.mjs';
+export { DIALECT_CATEGORIES, DatasourceFormModal, DatasourceModal, findCategory, findDialect } from '../../chunk-6QJI5YOJ.mjs';
+import { defaultRuleForm, RuleForm, ExecutionTimelinePanel } from '../../chunk-AXBD6OAF.mjs';
 import '../../chunk-JB6RNAD2.mjs';
 import '../../chunk-LEXBTVGM.mjs';
-import '../../chunk-57E4TCB2.mjs';
-import { HeroSection, PageLoadingState, PageEmptyState, SearchBar, EntityCard, ManagementPageLayout, 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 } from '../../chunk-E6C7MFHJ.mjs';
+import '../../chunk-EAIE4QGD.mjs';
+import { HeroSection, PageLoadingState, PageEmptyState, SearchBar, 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, StepTimeline } from '../../chunk-ZQRUAXGP.mjs';
 import '../../chunk-7VJ7CMMT.mjs';
 import '../../chunk-RHRJXK5R.mjs';
 import '../../chunk-3AY5HIQ6.mjs';
@@ -17,8 +17,8 @@ import { Badge, Button } from '../../chunk-WR55H7DH.mjs';
 import '../../chunk-D2JF6C3E.mjs';
 import { useLink } from '../../chunk-QWG2FMUN.mjs';
 import '../../chunk-G7JQ4OCE.mjs';
-import { useState, useMemo, useEffect } from 'react';
-import { CubeTransparentIcon, CpuChipIcon, ChatBubbleLeftEllipsisIcon, WrenchScrewdriverIcon, AdjustmentsHorizontalIcon, CircleStackIcon, RectangleStackIcon, ClockIcon, LinkIcon, KeyIcon, ArrowPathIcon, TrashIcon, PlusIcon } from '@heroicons/react/24/outline';
+import { useState, useMemo, useEffect, useCallback } from 'react';
+import { CubeTransparentIcon, CpuChipIcon, ChatBubbleLeftEllipsisIcon, WrenchScrewdriverIcon, AdjustmentsHorizontalIcon, CircleStackIcon, RectangleStackIcon, ClockIcon, LinkIcon, KeyIcon, ArrowPathIcon, TrashIcon, PlusIcon, PencilSquareIcon } from '@heroicons/react/24/outline';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 
 function AgentsModelsPageView({ labels, models, loading }) {
@@ -57,7 +57,10 @@ function AgentsModelsPageView({ labels, models, loading }) {
       model.id
     )) })
   ] });
-  return /* @__PURE__ */ jsx(ManagementPageLayout, { hero, content });
+  return /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
+    hero,
+    content
+  ] });
 }
 function AgentsConfigPageView({ labels, agents, models, loading, onCreate, onUpdate, onDelete }) {
   const [editing, setEditing] = useState(null);
@@ -178,7 +181,11 @@ function AgentsConfigPageView({ labels, agents, models, loading, onCreate, onUpd
     }
   );
   return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(ManagementPageLayout, { hero, content, mobileAction }),
+    /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
+      hero,
+      content,
+      mobileAction
+    ] }),
     createOpen && renderForm({ title: labels.createTitle }, (input) => {
       onCreate(input);
       setCreateOpen(false);
@@ -305,7 +312,11 @@ function AgentsPromptsPageView({ labels, agents, prompts, loading, onCreate, onA
     }) })
   ] });
   return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(ManagementPageLayout, { hero, content, mobileAction }),
+    /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
+      hero,
+      content,
+      mobileAction
+    ] }),
     /* @__PURE__ */ jsx(
       GlassModal,
       {
@@ -446,7 +457,11 @@ function AgentsToolDefinitionsPageView({ labels, tools, loading, onCreate, onUpd
     )) })
   ] });
   return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(ManagementPageLayout, { hero, content, mobileAction }),
+    /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
+      hero,
+      content,
+      mobileAction
+    ] }),
     createOpen && /* @__PURE__ */ jsx(
       ToolEditor,
       {
@@ -1002,7 +1017,11 @@ function RulesPageView({ labels, rules, loading, onCreate, onUpdate, onDelete })
     )) })
   ] });
   return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(ManagementPageLayout, { hero, content, mobileAction }),
+    /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
+      hero,
+      content,
+      mobileAction
+    ] }),
     createOpen && /* @__PURE__ */ jsx(
       RuleEditor,
       {
@@ -1370,7 +1389,7 @@ function DashboardPageView({ labels, appLogo }) {
     /* @__PURE__ */ jsx("div", { className: "flex justify-center mb-6", children: appLogo }),
     /* @__PURE__ */ jsx("p", { className: "mt-3 text-base text-slate-600 dark:text-slate-300", children: labels.subtitle })
   ] });
-  return /* @__PURE__ */ jsx(ManagementPageLayout, { hero, content: null });
+  return /* @__PURE__ */ jsx("div", { className: "space-y-4", children: hero });
 }
 function AgentsIndexPageView({ labels }) {
   const Link = useLink();
@@ -1415,7 +1434,10 @@ function AgentsIndexPageView({ labels }) {
       ) }, tile.id);
     }) })
   ] });
-  return /* @__PURE__ */ jsx(ManagementPageLayout, { hero, content });
+  return /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
+    hero,
+    content
+  ] });
 }
 function WorkflowsPageView({ labels, workflows, onCreate, onUpdateMeta, onPublish }) {
   const selectedWorkflow = workflows[0] ?? null;
@@ -1592,7 +1614,10 @@ function WorkflowRunsPageView({ labels, runs, loading, onCancel, onReplay, onVie
       run.id
     )) })
   ] });
-  return /* @__PURE__ */ jsx(ManagementPageLayout, { hero, content });
+  return /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
+    hero,
+    content
+  ] });
 }
 function RunTimelinePageView({ labels, entries, loading, runId }) {
   const hero = /* @__PURE__ */ jsx(
@@ -1606,30 +1631,27 @@ function RunTimelinePageView({ labels, entries, loading, runId }) {
     }
   );
   if (loading) {
-    return /* @__PURE__ */ jsx(ManagementPageLayout, { hero, content: /* @__PURE__ */ jsx(PageLoadingState, {}) });
+    return /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
+      hero,
+      /* @__PURE__ */ jsx(PageLoadingState, {})
+    ] });
   }
   if (entries.length === 0) {
-    return /* @__PURE__ */ jsx(
-      ManagementPageLayout,
+    return /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
+      hero,
+      /* @__PURE__ */ jsx(PageEmptyState, { title: labels.empty ?? "", message: "", iconName: "folder-open" })
+    ] });
+  }
+  return /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
+    hero,
+    /* @__PURE__ */ jsx(
+      ExecutionTimelinePanel,
       {
-        hero,
-        content: /* @__PURE__ */ jsx(PageEmptyState, { title: labels.empty ?? "", message: "", iconName: "folder-open" })
+        entries,
+        labels
       }
-    );
-  }
-  return /* @__PURE__ */ jsx(
-    ManagementPageLayout,
-    {
-      hero,
-      content: /* @__PURE__ */ jsx(
-        ExecutionTimelinePanel,
-        {
-          entries,
-          labels
-        }
-      )
-    }
-  );
+    )
+  ] });
 }
 var PROVIDER_PRESETS = {
   anthropic_api: {
@@ -1780,7 +1802,11 @@ function ConnectionsPageView({
     )) })
   ] });
   return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(ManagementPageLayout, { hero, content, mobileAction }),
+    /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
+      hero,
+      content,
+      mobileAction
+    ] }),
     createOpen && /* @__PURE__ */ jsx(
       ConnectionEditor,
       {
@@ -2124,7 +2150,11 @@ function CredentialsPageView({ labels, credentials, loading, onCreate, onRotate,
     )) })
   ] });
   return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(ManagementPageLayout, { hero, content, mobileAction }),
+    /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
+      hero,
+      content,
+      mobileAction
+    ] }),
     /* @__PURE__ */ jsx(
       GlassModal,
       {
@@ -2190,7 +2220,7 @@ function AgentsWorkspacePageView({
   loading,
   promptsByAgent = {},
   onSelectAgent,
-  onCreateAgent,
+  onNewAgent,
   onUpdateAgent,
   onDeleteAgent,
   onCreatePrompt,
@@ -2200,7 +2230,6 @@ function AgentsWorkspacePageView({
   onUpdateModel
 }) {
   const [searchTerm, setSearchTerm] = useState("");
-  const [createOpen, setCreateOpen] = useState(false);
   const [selectedId, setSelectedId] = useState(null);
   useEffect(() => {
     if (!selectedId && agents.length > 0) {
@@ -2234,7 +2263,7 @@ function AgentsWorkspacePageView({
         {
           mode: "desktop",
           label: labels.addAgent,
-          onClick: () => setCreateOpen(true),
+          onClick: onNewAgent,
           accent: "violet"
         }
       )
@@ -2245,7 +2274,7 @@ function AgentsWorkspacePageView({
     {
       mode: "mobile",
       label: labels.addAgent,
-      onClick: () => setCreateOpen(true),
+      onClick: onNewAgent,
       accent: "violet"
     }
   );
@@ -2335,21 +2364,10 @@ function AgentsWorkspacePageView({
       ) })
     ] })
   ] });
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(ManagementPageLayout, { hero, content, mobileAction }),
-    createOpen && /* @__PURE__ */ jsx(
-      CreateAgentDialog,
-      {
-        labels,
-        models,
-        connections,
-        onClose: () => setCreateOpen(false),
-        onSubmit: async (input) => {
-          await onCreateAgent(input);
-          setCreateOpen(false);
-        }
-      }
-    )
+  return /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
+    hero,
+    content,
+    mobileAction
   ] });
 }
 function AgentDetail({
@@ -2770,6 +2788,13 @@ function ModelTab({
     }
   );
 }
+function deriveInitials(name) {
+  const trimmed = name.trim();
+  if (!trimmed) return "?";
+  const parts = trimmed.split(/\s+/);
+  if (parts.length === 1) return parts[0].slice(0, 2).toUpperCase();
+  return (parts[0][0] + parts[parts.length - 1][0]).toUpperCase();
+}
 var AGENT_PRESETS = [
   { id: "sales", emoji: "\u{1F4BC}", name: "Sales Specialist", role: "Lead qualification & CRM", systemPrompt: "You are a sales assistant. Help qualify leads, manage CRM entries, and schedule follow-ups. Always be professional and proactive.", temperature: 0.7, maxTokens: 2048, accent: "from-emerald-500 to-teal-600", framework: "anthropic" },
   { id: "support", emoji: "\u{1F3A7}", name: "Customer Support", role: "Ticket resolution & escalation", systemPrompt: "You are a customer support agent. Resolve tickets, answer questions, and escalate complex issues. Prioritize customer satisfaction.", temperature: 0.3, maxTokens: 2048, accent: "from-sky-500 to-indigo-600", framework: "crewai" },
@@ -2785,13 +2810,96 @@ var DIFFICULTY_OPTIONS = [
   { id: "expert", emoji: "\u{1F9E0}", accent: "from-rose-500 to-purple-600" }
 ];
 var EMOJI_PALETTE = ["\u{1F4BC}", "\u{1F3A7}", "\u{1F4CA}", "\u{1F6E1}\uFE0F", "\u{1F52C}", "\u2728", "\u{1F916}", "\u26A1", "\u{1F3AF}", "\u{1F680}", "\u{1F9E0}", "\u{1F9BE}", "\u{1F4E1}", "\u{1F52E}", "\u{1F310}", "\u{1F5C2}\uFE0F"];
-function CreateAgentDialog({
+function RangeSliderField({
+  sliderId,
+  label,
+  value,
+  onChange,
+  min,
+  max,
+  step,
+  zones,
+  trackGradient,
+  formatValue,
+  ariaLabel
+}) {
+  const percent = (value - min) / (max - min) * 100;
+  const activeZone = zones?.find((z) => value <= z.max) ?? zones?.[zones.length - 1];
+  const thumbColor = activeZone?.thumbColor ?? "#6366f1";
+  const glow = hexToGlow(thumbColor);
+  const displayValue = formatValue ? formatValue(value) : value.toString();
+  const ariaText = activeZone ? `${displayValue} \u2014 ${activeZone.label}` : displayValue;
+  return /* @__PURE__ */ jsxs("div", { children: [
+    /* @__PURE__ */ jsxs("div", { className: "mb-2 flex items-center justify-between", children: [
+      /* @__PURE__ */ jsx("label", { htmlFor: sliderId, className: "text-xs font-medium text-gray-500 dark:text-gray-400", children: label }),
+      /* @__PURE__ */ jsx("span", { className: "text-sm font-bold tabular-nums text-gray-900 dark:text-white", children: displayValue })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+      /* @__PURE__ */ jsx("div", { className: "absolute inset-x-0 top-1/2 h-2 -translate-y-1/2 overflow-hidden rounded-full bg-gray-200 dark:bg-gray-700", children: /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: "h-full rounded-full transition-all duration-300 ease-out motion-reduce:transition-none",
+          style: {
+            width: `${Math.max(0, Math.min(100, percent))}%`,
+            background: trackGradient ?? `linear-gradient(90deg, ${thumbColor}, ${thumbColor})`
+          }
+        }
+      ) }),
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          id: sliderId,
+          "data-slider-id": sliderId,
+          type: "range",
+          min,
+          max,
+          step,
+          value,
+          onChange: (e) => onChange(parseFloat(e.target.value)),
+          "aria-label": ariaLabel ?? label,
+          "aria-valuemin": min,
+          "aria-valuemax": max,
+          "aria-valuenow": value,
+          "aria-valuetext": ariaText,
+          className: "relative z-10 h-5 w-full cursor-pointer appearance-none bg-transparent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2 [&::-webkit-slider-thumb]:h-5 [&::-webkit-slider-thumb]:w-5 [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:border-2 [&::-webkit-slider-thumb]:border-white [&::-webkit-slider-thumb]:shadow-lg dark:[&::-webkit-slider-thumb]:border-gray-900"
+        }
+      ),
+      /* @__PURE__ */ jsx("style", { children: `[data-slider-id="${sliderId}"]::-webkit-slider-thumb { background: ${thumbColor}; box-shadow: 0 0 8px ${glow}; } [data-slider-id="${sliderId}"]::-moz-range-thumb { background: ${thumbColor}; border: 2px solid white; box-shadow: 0 0 8px ${glow}; }` })
+    ] }),
+    zones && zones.length > 0 && /* @__PURE__ */ jsx("div", { className: "mt-1 flex items-center justify-between", children: zones.map((z) => {
+      const isActive = z.label === activeZone?.label;
+      return /* @__PURE__ */ jsx(
+        "span",
+        {
+          className: `text-[10px] font-medium transition-colors motion-reduce:transition-none ${isActive ? z.color : "text-gray-400 dark:text-gray-500"}`,
+          children: z.label
+        },
+        z.label
+      );
+    }) })
+  ] });
+}
+function hexToGlow(hex) {
+  const m = /^#?([0-9a-f]{6})$/i.exec(hex);
+  if (!m) return "rgba(99,102,241,0.5)";
+  const int = parseInt(m[1], 16);
+  const r = int >> 16 & 255;
+  const g = int >> 8 & 255;
+  const b = int & 255;
+  return `rgba(${r},${g},${b},0.5)`;
+}
+var TOTAL_STEPS = 5;
+function AgentNewWizardPageView({
   labels,
   models,
   connections,
-  onClose,
-  onSubmit
+  initialStep,
+  onStepChange,
+  onSubmit,
+  onCancel
 }) {
+  const clampedInitial = Math.min(TOTAL_STEPS, Math.max(1, initialStep ?? 1));
+  const [step, setStep] = useState(clampedInitial);
   const [presetId, setPresetId] = useState("custom");
   const [emoji, setEmoji] = useState("\u2728");
   const [name, setName] = useState("");
@@ -2809,7 +2917,16 @@ function CreateAgentDialog({
   const [tagsInput, setTagsInput] = useState("");
   const [outputSchema, setOutputSchema] = useState("");
   const [modelId, setModelId] = useState(models[0]?.id ?? "");
+  const [submitting, setSubmitting] = useState(false);
+  const [touched, setTouched] = useState(false);
   const activePreset = AGENT_PRESETS.find((p) => p.id === presetId) ?? AGENT_PRESETS[AGENT_PRESETS.length - 1];
+  useEffect(() => {
+    const next = Math.min(TOTAL_STEPS, Math.max(1, initialStep ?? 1));
+    if (next !== step) setStep(next);
+  }, [initialStep]);
+  useEffect(() => {
+    if (!modelId && models.length > 0) setModelId(models[0].id);
+  }, [models, modelId]);
   const matchingModels = useMemo(() => {
     if (!connectionId) return models;
     const conn = connections.find((c) => c.id === connectionId);
@@ -2822,7 +2939,7 @@ function CreateAgentDialog({
   }, [models, connections, connectionId]);
   const modelOptions = matchingModels.map((m) => ({ value: m.id, label: `${m.name} (${m.provider})` }));
   const connectionOptions = useMemo(() => {
-    const inline = { value: "", label: labels.connectionInline ?? "Inline model (no connection)" };
+    const inline = { value: "", label: labels.connectionInline };
     return [
       inline,
       ...connections.map((c) => ({
@@ -2832,13 +2949,36 @@ function CreateAgentDialog({
     ];
   }, [connections, labels.connectionInline]);
   const frameworkOptions = useMemo(() => [
-    { value: "", label: labels.connectionInline ?? "\u2014" },
-    { value: "anthropic", label: labels.frameworkAnthropic ?? "Anthropic" },
-    { value: "langchain", label: labels.frameworkLangChain ?? "LangChain" },
-    { value: "crewai", label: labels.frameworkCrewAI ?? "CrewAI" },
-    { value: "google-adk", label: labels.frameworkGoogleADK ?? "Google ADK" },
-    { value: "openai", label: labels.frameworkOpenAI ?? "OpenAI" }
+    { value: "", label: labels.connectionInline },
+    { value: "anthropic", label: labels.frameworkAnthropic },
+    { value: "langchain", label: labels.frameworkLangChain },
+    { value: "crewai", label: labels.frameworkCrewAI },
+    { value: "google-adk", label: labels.frameworkGoogleADK },
+    { value: "openai", label: labels.frameworkOpenAI }
   ], [labels]);
+  const stepTitles = [
+    labels.wizardStep1Title,
+    labels.wizardStep2Title,
+    labels.wizardStep3Title,
+    labels.wizardStep4Title,
+    labels.wizardStep5Title
+  ];
+  const stepSubtitles = [
+    labels.wizardStep1Subtitle,
+    labels.wizardStep2Subtitle,
+    labels.wizardStep3Subtitle,
+    labels.wizardStep4Subtitle,
+    labels.wizardStep5Subtitle
+  ];
+  const timelineSteps = stepTitles.map((title, idx) => ({
+    id: String(idx + 1),
+    name: title,
+    description: stepSubtitles[idx],
+    status: idx + 1 < step ? "complete" : idx + 1 === step ? "current" : "upcoming"
+  }));
+  function markTouched() {
+    if (!touched) setTouched(true);
+  }
   function applyPreset(preset) {
     setPresetId(preset.id);
     setEmoji(preset.emoji);
@@ -2850,14 +2990,78 @@ function CreateAgentDialog({
       setMaxTokens(preset.maxTokens);
       if (preset.framework) setFramework(preset.framework);
     }
+    markTouched();
   }
-  return /* @__PURE__ */ jsx(
-    GlassModal,
+  const goToStep = useCallback((next) => {
+    const clamped = Math.min(TOTAL_STEPS, Math.max(1, next));
+    setStep(clamped);
+    onStepChange?.(clamped);
+  }, [onStepChange]);
+  function canAdvance(from) {
+    if (from <= 1) return true;
+    if (from === 2) return name.trim().length > 0;
+    return true;
+  }
+  const goNext = useCallback(() => {
+    if (!canAdvance(step)) return;
+    if (step < TOTAL_STEPS) goToStep(step + 1);
+  }, [step, name]);
+  const goBack = useCallback(() => {
+    if (step > 1) goToStep(step - 1);
+  }, [step, goToStep]);
+  const cancelWithConfirm = useCallback(() => {
+    if (touched && !window.confirm(labels.wizardCancelConfirm)) return;
+    onCancel();
+  }, [touched, labels.wizardCancelConfirm, onCancel]);
+  useEffect(() => {
+    function onKey(e) {
+      if (e.key === "Escape") {
+        e.preventDefault();
+        cancelWithConfirm();
+        return;
+      }
+      if (e.key === "Enter") {
+        const target = e.target;
+        const tag = target?.tagName?.toLowerCase();
+        if (tag === "textarea" || tag === "select" || tag === "input" || tag === "button") return;
+        e.preventDefault();
+        if (step < TOTAL_STEPS) goNext();
+        else void submit();
+      }
+    }
+    window.addEventListener("keydown", onKey);
+    return () => window.removeEventListener("keydown", onKey);
+  }, [step, name, touched]);
+  async function submit() {
+    setSubmitting(true);
+    try {
+      const parsedTags = tagsInput.split(",").map((t) => t.trim()).filter((t) => t.length > 0);
+      await onSubmit({
+        name: name.trim() || activePreset.name || "Untitled Agent",
+        role: role.trim() || void 0,
+        description: description.trim() || void 0,
+        avatar: emoji,
+        modelId,
+        connectionId: connectionId || void 0,
+        framework: framework || void 0,
+        systemPrompt,
+        userPrompt: userPrompt.trim() || void 0,
+        maxTokens,
+        temperature,
+        topP,
+        topK,
+        difficulty: difficulty || void 0,
+        tags: parsedTags.length > 0 ? parsedTags : void 0,
+        outputSchema: outputSchema.trim() || void 0
+      });
+    } finally {
+      setSubmitting(false);
+    }
+  }
+  const counter = labels.wizardStepCounter.replace("{current}", String(step)).replace("{total}", String(TOTAL_STEPS));
+  const hero = /* @__PURE__ */ jsx(
+    HeroSection,
     {
-      open: true,
-      onClose,
-      title: labels.createAgentTitle,
-      label: labels.createAgentEyebrow ?? "NEW AGENT",
       icon: /* @__PURE__ */ jsx(
         "div",
         {
@@ -2866,330 +3070,559 @@ function CreateAgentDialog({
           children: emoji
         }
       ),
-      maxWidth: "2xl",
-      gradient: activePreset.accent,
-      showFormFooter: true,
-      submitLabel: labels.save,
-      onSubmit: async (event) => {
-        event.preventDefault();
-        const parsedTags = tagsInput.split(",").map((t) => t.trim()).filter((t) => t.length > 0);
-        await onSubmit({
-          name: name.trim() || activePreset.name || "Untitled Agent",
-          role: role.trim() || void 0,
-          description: description.trim() || void 0,
-          avatar: emoji,
-          modelId,
-          connectionId: connectionId || void 0,
-          framework: framework || void 0,
-          systemPrompt,
-          userPrompt: userPrompt.trim() || void 0,
-          maxTokens,
-          temperature,
-          topP,
-          topK,
-          difficulty: difficulty || void 0,
-          tags: parsedTags.length > 0 ? parsedTags : void 0,
-          outputSchema: outputSchema.trim() || void 0
-        });
-      },
-      children: /* @__PURE__ */ jsxs("div", { className: "space-y-5", children: [
-        /* @__PURE__ */ jsx(
-          SectionCard,
-          {
-            variant: "glass",
-            padded: false,
-            header: {
-              title: labels.presetTitle ?? "Start from a template",
-              subtitle: labels.presetSubtitle ?? "Pick a role or build a custom agent"
-            },
-            children: /* @__PURE__ */ jsx("div", { className: "grid grid-cols-2 gap-2 px-4 pb-4 sm:grid-cols-3", children: AGENT_PRESETS.map((preset) => {
-              const selected = preset.id === presetId;
-              return /* @__PURE__ */ jsxs(
-                "button",
-                {
-                  type: "button",
-                  onClick: () => applyPreset(preset),
-                  className: [
-                    "liquid-surface group flex items-center gap-3 rounded-xl px-3 py-2.5 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-9 w-9 shrink-0 items-center justify-center rounded-lg bg-gradient-to-br ${preset.accent} text-base shadow-sm`,
-                        children: preset.emoji
-                      }
-                    ),
-                    /* @__PURE__ */ jsxs("span", { className: "min-w-0 flex-1", children: [
-                      /* @__PURE__ */ jsx("span", { className: "block truncate text-sm font-semibold text-slate-900 dark:text-white", children: preset.id === "custom" ? labels.presetCustom ?? "Custom" : preset.name }),
-                      /* @__PURE__ */ jsx("span", { className: "block truncate text-xs text-slate-500 dark:text-slate-400", children: preset.role || (labels.presetCustomHint ?? "Start from scratch") })
-                    ] })
-                  ]
-                },
-                preset.id
-              );
-            }) })
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          SectionCard,
-          {
-            variant: "glass",
-            header: {
-              title: labels.identitySection ?? "Identity",
-              subtitle: labels.identitySubtitle ?? "How your agent shows up across workflows"
-            },
-            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 ?? "Avatar" }),
-                /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-1.5", children: EMOJI_PALETTE.map((e) => /* @__PURE__ */ jsx(
-                  "button",
-                  {
-                    type: "button",
-                    onClick: () => setEmoji(e),
-                    "aria-pressed": 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: [
+      label: counter,
+      title: labels.pageTitle,
+      subtitle: stepSubtitles[step - 1],
+      gradient: activePreset.accent
+    }
+  );
+  function renderStep1() {
+    return /* @__PURE__ */ jsx(
+      SectionCard,
+      {
+        variant: "glass",
+        header: {
+          title: labels.presetTitle,
+          subtitle: labels.presetSubtitle
+        },
+        children: /* @__PURE__ */ jsx("div", { className: "grid grid-cols-1 gap-2 sm:grid-cols-2 lg:grid-cols-3", children: AGENT_PRESETS.map((preset) => {
+          const selected = preset.id === presetId;
+          return /* @__PURE__ */ jsxs(
+            "button",
+            {
+              type: "button",
+              onClick: () => applyPreset(preset),
+              className: [
+                "liquid-surface group flex items-center gap-3 rounded-xl px-3 py-2.5 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(
-                  FormInput,
+                  "span",
                   {
-                    label: labels.name,
-                    value: name,
-                    onValueChange: setName,
-                    required: true,
-                    placeholder: labels.namePlaceholder ?? "Sales Specialist"
+                    "aria-hidden": "true",
+                    className: `flex h-9 w-9 shrink-0 items-center justify-center rounded-lg bg-gradient-to-br ${preset.accent} text-base shadow-sm`,
+                    children: preset.emoji
                   }
                 ),
-                /* @__PURE__ */ jsx(
-                  FormInput,
-                  {
-                    label: labels.role,
-                    value: role,
-                    onValueChange: setRole,
-                    placeholder: labels.rolePlaceholder
-                  }
-                )
-              ] }),
-              /* @__PURE__ */ jsx(
-                FormTextarea,
-                {
-                  label: labels.descriptionLabel ?? labels.description,
-                  value: description,
-                  onValueChange: setDescription,
-                  rows: 2,
-                  placeholder: labels.descriptionPlaceholder ?? "A short summary of what this agent does."
-                }
-              )
-            ] })
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          SectionCard,
-          {
-            variant: "glass",
-            header: {
-              title: labels.modelSection ?? "Model and connection",
-              subtitle: labels.connectionPickPrompt ?? "Pick the provider connection or use an inline model"
+                /* @__PURE__ */ jsxs("span", { className: "min-w-0 flex-1", children: [
+                  /* @__PURE__ */ jsx("span", { className: "block truncate text-sm font-semibold text-slate-900 dark:text-white", children: preset.id === "custom" ? labels.presetCustom : preset.name }),
+                  /* @__PURE__ */ jsx("span", { className: "block truncate text-xs text-slate-500 dark:text-slate-400", children: preset.role || labels.presetCustomHint })
+                ] })
+              ]
             },
-            children: /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
-              /* @__PURE__ */ jsxs(FormGrid, { children: [
-                /* @__PURE__ */ jsx(
-                  FormSelect,
-                  {
-                    label: labels.connectionLabel ?? labels.connection,
-                    value: connectionId,
-                    onValueChange: setConnectionId,
-                    options: connectionOptions,
-                    icon: /* @__PURE__ */ jsx(LinkIcon, { className: "h-4 w-4" })
-                  }
-                ),
-                /* @__PURE__ */ jsx(
-                  FormSelect,
-                  {
-                    label: labels.frameworkLabel ?? "Framework",
-                    value: framework,
-                    onValueChange: setFramework,
-                    options: frameworkOptions
-                  }
-                ),
-                /* @__PURE__ */ jsx(
-                  FormSelect,
-                  {
-                    label: labels.model,
-                    value: modelId,
-                    onValueChange: setModelId,
-                    options: modelOptions.length > 0 ? modelOptions : [{ value: "", label: labels.modelEmpty }]
-                  }
-                )
+            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(
+              "button",
+              {
+                type: "button",
+                onClick: () => {
+                  setEmoji(e);
+                  markTouched();
+                },
+                "aria-pressed": 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,
+      {
+        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,
+            {
+              label: labels.outputSchemaLabel,
+              value: outputSchema,
+              onValueChange: (v) => {
+                setOutputSchema(v);
+                markTouched();
+              },
+              rows: 5,
+              placeholder: labels.outputSchemaPlaceholder
+            }
+          )
+        ] })
+      }
+    );
+  }
+  function renderStep4() {
+    return /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
+      /* @__PURE__ */ jsx(
+        SectionCard,
+        {
+          variant: "glass",
+          header: {
+            title: labels.behaviorSection,
+            subtitle: labels.behaviorSubtitle
+          },
+          children: /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
+            /* @__PURE__ */ jsxs("div", { children: [
+              /* @__PURE__ */ jsxs("div", { className: "mb-1 flex items-center justify-between", children: [
+                /* @__PURE__ */ jsx("label", { htmlFor: "wizard-system-prompt", className: "text-xs font-medium text-gray-500 dark:text-gray-400", children: labels.promptSystemPrompt }),
+                /* @__PURE__ */ jsxs("span", { className: "text-[10px] text-gray-400 dark:text-gray-500", children: [
+                  systemPrompt.length,
+                  " chars"
+                ] })
               ] }),
               /* @__PURE__ */ jsx(
-                FormTextarea,
+                "textarea",
                 {
-                  label: labels.outputSchemaLabel ?? "Output schema (JSON)",
-                  value: outputSchema,
-                  onValueChange: setOutputSchema,
-                  rows: 4,
-                  placeholder: labels.outputSchemaPlaceholder ?? '{\n  "type": "object",\n  "properties": { "summary": { "type": "string" } }\n}'
+                  id: "wizard-system-prompt",
+                  value: systemPrompt,
+                  onChange: (e) => {
+                    setSystemPrompt(e.target.value);
+                    markTouched();
+                  },
+                  rows: 8,
+                  className: "w-full resize-y rounded-lg border border-gray-200/50 bg-gray-50/50 px-3 py-2.5 font-mono text-xs leading-relaxed text-gray-700 outline-none transition-colors placeholder:text-gray-400 focus:border-indigo-300/50 focus:ring-1 focus:ring-indigo-300/30 motion-reduce:transition-none dark:border-white/10 dark:bg-white/5 dark:text-gray-300 dark:placeholder:text-gray-500 dark:focus:border-indigo-500/30 dark:focus:ring-indigo-500/20",
+                  placeholder: labels.promptPlaceholder
                 }
               )
-            ] })
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          SectionCard,
-          {
-            variant: "glass",
-            header: {
-              title: labels.behaviorSection ?? "Behavior",
-              subtitle: labels.behaviorSubtitle ?? "System prompt shapes how the agent thinks"
-            },
-            children: /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
+            ] }),
+            /* @__PURE__ */ jsxs("div", { children: [
+              /* @__PURE__ */ jsxs("div", { className: "mb-1 flex items-center justify-between", children: [
+                /* @__PURE__ */ jsx("label", { htmlFor: "wizard-user-prompt", className: "text-xs font-medium text-gray-500 dark:text-gray-400", children: labels.userPromptLabel }),
+                /* @__PURE__ */ jsxs("span", { className: "text-[10px] text-gray-400 dark:text-gray-500", children: [
+                  userPrompt.length,
+                  " chars"
+                ] })
+              ] }),
               /* @__PURE__ */ jsx(
-                FormTextarea,
+                "textarea",
                 {
-                  label: labels.promptSystemPrompt ?? "System prompt",
-                  value: systemPrompt,
-                  onValueChange: setSystemPrompt,
+                  id: "wizard-user-prompt",
+                  value: userPrompt,
+                  onChange: (e) => {
+                    setUserPrompt(e.target.value);
+                    markTouched();
+                  },
                   rows: 5,
-                  placeholder: labels.promptPlaceholder ?? "You are a helpful assistant\u2026"
+                  className: "w-full resize-y rounded-lg border border-gray-200/50 bg-gray-50/50 px-3 py-2.5 font-mono text-xs leading-relaxed text-gray-700 outline-none transition-colors placeholder:text-gray-400 focus:border-indigo-300/50 focus:ring-1 focus:ring-indigo-300/30 motion-reduce:transition-none dark:border-white/10 dark:bg-white/5 dark:text-gray-300 dark:placeholder:text-gray-500 dark:focus:border-indigo-500/30 dark:focus:ring-indigo-500/20",
+                  placeholder: labels.userPromptPlaceholder
                 }
-              ),
+              )
+            ] }),
+            /* @__PURE__ */ jsx(
+              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__ */ jsxs("div", { children: [
+              /* @__PURE__ */ jsxs("div", { className: "mb-2 flex items-center justify-between", children: [
+                /* @__PURE__ */ jsx("label", { htmlFor: "wizard-max-tokens", className: "text-xs font-medium text-gray-500 dark:text-gray-400", children: labels.maxTokens }),
+                /* @__PURE__ */ jsx("span", { className: "text-sm font-bold tabular-nums text-gray-900 dark:text-white", children: maxTokens.toLocaleString() })
+              ] }),
               /* @__PURE__ */ jsx(
-                FormTextarea,
+                "input",
                 {
-                  label: labels.userPromptLabel ?? "User prompt template",
-                  value: userPrompt,
-                  onValueChange: setUserPrompt,
-                  rows: 4,
-                  placeholder: labels.userPromptPlaceholder ?? "Analyze {{ nodeId.path }} and produce a summary."
+                  id: "wizard-max-tokens",
+                  type: "number",
+                  value: maxTokens,
+                  onChange: (e) => {
+                    setMaxTokens(Math.max(1, Math.floor(Number(e.target.value) || 0)));
+                    markTouched();
+                  },
+                  min: 1,
+                  max: 32e3,
+                  step: 1,
+                  className: "w-full rounded-lg border border-gray-200/50 bg-gray-50/50 px-3 py-2.5 text-sm tabular-nums text-gray-700 outline-none transition-colors focus:border-indigo-300/50 focus:ring-1 focus:ring-indigo-300/30 motion-reduce:transition-none dark:border-white/10 dark:bg-white/5 dark:text-gray-300 dark:focus:border-indigo-500/30 dark:focus:ring-indigo-500/20"
                 }
-              ),
-              /* @__PURE__ */ jsxs(FormGrid, { children: [
-                /* @__PURE__ */ jsx(
-                  FormInput,
-                  {
-                    label: `${labels.temperature} (${temperature.toFixed(2)})`,
-                    type: "number",
-                    value: String(temperature),
-                    onValueChange: (v) => setTemperature(Number(v) || 0),
-                    step: 0.1,
-                    min: 0,
-                    max: 2
-                  }
-                ),
-                /* @__PURE__ */ jsx(
-                  FormInput,
-                  {
-                    label: labels.maxTokens,
-                    type: "number",
-                    value: String(maxTokens),
-                    onValueChange: (v) => setMaxTokens(Number(v) || 0),
-                    min: 1,
-                    max: 32e3
-                  }
-                ),
-                /* @__PURE__ */ jsx(
-                  FormInput,
-                  {
-                    label: `${labels.topPLabel ?? "Top-P"} (${topP.toFixed(2)})`,
-                    type: "number",
-                    value: String(topP),
-                    onValueChange: (v) => setTopP(Number(v) || 0),
-                    step: 0.05,
-                    min: 0,
-                    max: 1
-                  }
-                ),
-                /* @__PURE__ */ jsx(
-                  FormInput,
-                  {
-                    label: labels.topKLabel ?? "Top-K",
-                    type: "number",
-                    value: String(topK),
-                    onValueChange: (v) => setTopK(Math.max(0, Math.floor(Number(v) || 0))),
-                    step: 1,
-                    min: 0,
-                    max: 500
-                  }
-                )
+              )
+            ] }),
+            /* @__PURE__ */ jsx("div", { className: "overflow-hidden rounded-lg border border-gray-200/30 dark:border-white/10", children: /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-3 gap-px bg-gray-200/30 dark:bg-white/10", children: [
+              /* @__PURE__ */ jsxs("div", { className: "bg-white/60 px-3 py-2 dark:bg-gray-900/60", children: [
+                /* @__PURE__ */ jsx("p", { className: "text-[9px] uppercase tracking-wider text-gray-400 dark:text-gray-500", children: labels.model }),
+                /* @__PURE__ */ jsx("p", { className: "truncate text-xs font-semibold text-gray-900 dark:text-white", children: matchingModels.find((m) => m.id === modelId)?.name ?? labels.modelEmpty })
+              ] }),
+              /* @__PURE__ */ jsxs("div", { className: "bg-white/60 px-3 py-2 dark:bg-gray-900/60", children: [
+                /* @__PURE__ */ jsx("p", { className: "text-[9px] uppercase tracking-wider text-gray-400 dark:text-gray-500", children: labels.maxTokens }),
+                /* @__PURE__ */ jsx("p", { className: "text-xs font-semibold text-gray-900 dark:text-white", children: maxTokens.toLocaleString() })
+              ] }),
+              /* @__PURE__ */ jsxs("div", { className: "bg-white/60 px-3 py-2 dark:bg-gray-900/60", children: [
+                /* @__PURE__ */ jsx("p", { className: "text-[9px] uppercase tracking-wider text-gray-400 dark:text-gray-500", children: labels.temperature }),
+                /* @__PURE__ */ jsxs("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"
+                ] })
               ] })
+            ] }) })
+          ] })
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        SectionCard,
+        {
+          variant: "glass",
+          header: {
+            title: labels.metadataSection,
+            subtitle: labels.metadataSubtitle
+          },
+          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(
+                  "button",
+                  {
+                    type: "button",
+                    onClick: () => {
+                      setDifficulty(opt.id);
+                      markTouched();
+                    },
+                    "aria-pressed": 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
+              }
+            )
+          ] })
+        }
+      )
+    ] });
+  }
+  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-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__ */ 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(
+        SectionCard,
+        {
+          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 })
+          ] }),
+          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(
+        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(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(
+        SectionCard,
+        {
+          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 })
+          ] }),
+          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() })
+            ] }),
+            systemPrompt && /* @__PURE__ */ jsxs("div", { className: "mt-3", children: [
+              /* @__PURE__ */ jsx("p", { className: "text-[10px] uppercase tracking-wider text-gray-400 dark:text-gray-500", children: labels.promptSystemPrompt }),
+              /* @__PURE__ */ jsx("pre", { className: "mt-1 line-clamp-4 whitespace-pre-wrap rounded-lg border border-slate-200/70 bg-slate-50/60 p-2 text-xs text-slate-700 dark:border-slate-700 dark:bg-slate-900/40 dark:text-slate-200", children: systemPrompt })
+            ] })
+          ]
+        }
+      )
+    ] });
+  }
+  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 content = /* @__PURE__ */ jsxs(
+    "form",
+    {
+      onSubmit: (e) => {
+        e.preventDefault();
+        if (step < TOTAL_STEPS) goNext();
+        else void submit();
+      },
+      className: "space-y-5",
+      children: [
         /* @__PURE__ */ jsx(
-          SectionCard,
+          StepTimeline,
           {
-            variant: "glass",
-            header: {
-              title: labels.metadataSection ?? "Metadata",
-              subtitle: labels.metadataSubtitle ?? "Difficulty tier and free-form tags"
-            },
-            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 ?? "Difficulty" }),
-                /* @__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 ?? "Beginner" : opt.id === "intermediate" ? labels.difficultyIntermediate ?? "Intermediate" : opt.id === "advanced" ? labels.difficultyAdvanced ?? "Advanced" : labels.difficultyExpert ?? "Expert";
-                  return /* @__PURE__ */ jsxs(
-                    "button",
-                    {
-                      type: "button",
-                      onClick: () => setDifficulty(opt.id),
-                      "aria-pressed": 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 ?? "Tags",
-                  value: tagsInput,
-                  onValueChange: setTagsInput,
-                  placeholder: labels.tagsPlaceholder ?? "comma, separated, tags"
-                }
-              )
-            ] })
+            steps: timelineSteps,
+            progressLabel: labels.pageTitle,
+            onStepClick: (idx) => {
+              goToStep(idx + 1);
+            }
           }
-        )
-      ] })
+        ),
+        /* @__PURE__ */ jsxs("div", { className: "mx-auto max-w-3xl space-y-5", children: [
+          stepBody,
+          footer
+        ] })
+      ]
     }
   );
+  return /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
+    hero,
+    content
+  ] });
 }
-function deriveInitials(name) {
-  const trimmed = name.trim();
-  if (!trimmed) return "?";
-  const parts = trimmed.split(/\s+/);
-  if (parts.length === 1) return parts[0].slice(0, 2).toUpperCase();
-  return (parts[0][0] + parts[parts.length - 1][0]).toUpperCase();
+function ReviewRow({ label, value }) {
+  return /* @__PURE__ */ jsxs("div", { className: "rounded-lg border border-slate-200/60 bg-white/40 px-3 py-2 dark:border-white/10 dark:bg-white/[0.04]", children: [
+    /* @__PURE__ */ jsx("dt", { className: "text-[10px] uppercase tracking-wider text-gray-400 dark:text-gray-500", children: label }),
+    /* @__PURE__ */ jsx("dd", { className: "mt-0.5 truncate text-xs font-semibold text-gray-900 dark:text-white", children: value })
+  ] });
 }
 
-export { AgentsConfigPageView, AgentsIndexPageView, AgentsModelsPageView, AgentsPromptsPageView, AgentsToolDefinitionsPageView, AgentsWorkspacePageView, ConnectionsPageView, CredentialsPageView, DashboardPageView, DatasourcesPageView, RulesPageView, RunTimelinePageView, TOOL_TYPES, WorkflowRunsPageView, WorkflowsPageView, jsonSchemaToParameters, parametersToJsonSchema };
+export { AgentNewWizardPageView, AgentsConfigPageView, AgentsIndexPageView, AgentsModelsPageView, AgentsPromptsPageView, AgentsToolDefinitionsPageView, AgentsWorkspacePageView, ConnectionsPageView, CredentialsPageView, DashboardPageView, DatasourcesPageView, RulesPageView, RunTimelinePageView, TOOL_TYPES, WorkflowRunsPageView, WorkflowsPageView, jsonSchemaToParameters, parametersToJsonSchema };
 //# sourceMappingURL=index.mjs.map
 //# sourceMappingURL=index.mjs.map