@datatechsolutions/ui 3.10.0 → 3.11.0

package/dist/platform/pages/index.mjs

@@ -1,17 +1,17 @@
 "use client";
 import { adaptWorkflowGraphToUi, formatDurationMs } from '../../chunk-UQXVCVAN.mjs';
-import { WorkflowWorkspace } from '../../chunk-5U43K6G3.mjs';
-export { RolesPageView, UsersPageView } from '../../chunk-5U43K6G3.mjs';
-import { DatasourceModal, findDialect, findCategory, DIALECT_CATEGORIES } from '../../chunk-FD376DZ6.mjs';
-export { DIALECT_CATEGORIES, DatasourceFormModal, DatasourceModal, findCategory, findDialect } from '../../chunk-FD376DZ6.mjs';
-import { defaultRuleForm, RuleForm, ExecutionTimelinePanel, defaultRuleCondition, defaultRuleAction, RuleConditionBuilder, RuleActionBuilder } from '../../chunk-A256OE5E.mjs';
+import { WorkflowWorkspace } from '../../chunk-TCIK6WHT.mjs';
+export { RolesPageView, UsersPageView } from '../../chunk-TCIK6WHT.mjs';
+import { DatasourceModal, findDialect, findCategory, DIALECT_CATEGORIES } from '../../chunk-37FWIPYO.mjs';
+export { DIALECT_CATEGORIES, DatasourceFormModal, DatasourceModal, findCategory, findDialect } from '../../chunk-37FWIPYO.mjs';
+import { defaultRuleForm, RuleForm, ExecutionTimelinePanel, defaultRuleCondition, defaultRuleAction, RuleConditionBuilder, RuleActionBuilder } from '../../chunk-ZJMYLUZ2.mjs';
 import '../../chunk-JB6RNAD2.mjs';
 import '../../chunk-LEXBTVGM.mjs';
-import '../../chunk-DA3H7ERQ.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, FilterTileButton, FormToggle, Spinner, StatusBadge, FormCheckbox, SegmentedControl, DatePicker, TimePicker } from '../../chunk-5KI7FB3E.mjs';
-import '../../chunk-7VJ7CMMT.mjs';
-import '../../chunk-RHRJXK5R.mjs';
+import '../../chunk-3US2QXEF.mjs';
+import { HeroSection, SearchBar, PageLoadingState, PageEmptyState, EntityCard, CreateActionButton, GlassModal, FormGrid, FormSelect, FormInput, FormTextarea, SectionHeader, Text, Form, FormActionsRow, Table, TableHead, TableRow, TableHeader, TableBody, TableCell, InlineForm, CopyableId, ListCard, ListCardItem, Avatar, SectionCard, Tabs, TabsList, TabsTrigger, TabsContent, StepIndicator, FilterTileButton, FormToggle, Spinner, StatusBadge, ChipPicker, FormCheckbox, SegmentedControl, DatePicker, TimePicker } from '../../chunk-35P352JX.mjs';
+import '../../chunk-IGOMJHC6.mjs';
 import '../../chunk-3AY5HIQ6.mjs';
+import '../../chunk-7VJ7CMMT.mjs';
 import '../../chunk-PLTLRL2V.mjs';
 import { Badge, Button } from '../../chunk-WR55H7DH.mjs';
 import '../../chunk-D2JF6C3E.mjs';
@@ -33,30 +33,29 @@ function AgentsModelsPageView({ labels, models, loading }) {
       label: labels.title,
       title: labels.title,
       subtitle: labels.subtitle,
-      gradient: "from-emerald-500 to-teal-700"
+      gradient: "from-emerald-500 to-teal-700",
+      toolbar: !isEmpty ? /* @__PURE__ */ jsx(
+        SearchBar,
+        {
+          searchTerm,
+          onSearchChange: setSearchTerm,
+          placeholder: labels.searchPlaceholder ?? labels.title,
+          noBorder: true
+        }
+      ) : void 0
     }
   );
-  const content = loading ? /* @__PURE__ */ jsx(PageLoadingState, {}) : isEmpty ? /* @__PURE__ */ jsx(PageEmptyState, { title: labels.empty, message: labels.subtitle, iconName: "folder-open" }) : /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(
-      SearchBar,
-      {
-        searchTerm,
-        onSearchChange: setSearchTerm,
-        placeholder: labels.searchPlaceholder ?? labels.title
-      }
-    ),
-    /* @__PURE__ */ jsx("div", { className: "grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3", children: filteredModels.map((model) => /* @__PURE__ */ jsx(
-      EntityCard,
-      {
-        accentGradient: "from-emerald-500 to-teal-700",
-        icon: /* @__PURE__ */ jsx("div", { className: "flex h-11 w-11 items-center justify-center rounded-lg bg-emerald-500/10 text-emerald-600 dark:bg-emerald-500/20 dark:text-emerald-400", children: /* @__PURE__ */ jsx(CubeTransparentIcon, { className: "h-6 w-6" }) }),
-        title: model.name,
-        subtitle: `${labels.provider}: ${model.provider}`,
-        status: /* @__PURE__ */ jsx(Badge, { color: model.enabled ? "emerald" : "zinc", children: model.enabled ? labels.enabled : labels.disabled })
-      },
-      model.id
-    )) })
-  ] });
+  const content = loading ? /* @__PURE__ */ jsx(PageLoadingState, {}) : isEmpty ? /* @__PURE__ */ jsx(PageEmptyState, { title: labels.empty, message: labels.subtitle, iconName: "folder-open" }) : /* @__PURE__ */ jsx("div", { className: "grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3", children: filteredModels.map((model) => /* @__PURE__ */ jsx(
+    EntityCard,
+    {
+      accentGradient: "from-emerald-500 to-teal-700",
+      icon: /* @__PURE__ */ jsx("div", { className: "flex h-11 w-11 items-center justify-center rounded-lg bg-emerald-500/10 text-emerald-600 dark:bg-emerald-500/20 dark:text-emerald-400", children: /* @__PURE__ */ jsx(CubeTransparentIcon, { className: "h-6 w-6" }) }),
+      title: model.name,
+      subtitle: `${labels.provider}: ${model.provider}`,
+      status: /* @__PURE__ */ jsx(Badge, { color: model.enabled ? "emerald" : "zinc", children: model.enabled ? labels.enabled : labels.disabled })
+    },
+    model.id
+  )) });
   return /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
     hero,
     content
@@ -1095,7 +1094,10 @@ function ruleToFormValue(rule) {
     status: typeof rule.status === "string" ? rule.status : base.status,
     validFrom: typeof rule.validFrom === "string" ? rule.validFrom : base.validFrom,
     validUntil: typeof rule.validUntil === "string" ? rule.validUntil : base.validUntil,
-    tags: Array.isArray(rule.tags) ? rule.tags.filter((tag) => typeof tag === "string") : base.tags
+    tags: Array.isArray(rule.tags) ? rule.tags.filter((tag) => typeof tag === "string") : base.tags,
+    // Round-trip recurrence (Fallback 4) — backend persists it as the
+    // structured `{ kind, ... }` blob the wizard sends.
+    recurrence: rule.recurrence ?? null
   };
 }
 function pickAction(rule) {
@@ -1123,6 +1125,7 @@ var SAMPLE_DATASOURCES = [
     timeoutMs: 3e4,
     allowedTables: null,
     blockedColumns: null,
+    maskPii: null,
     enabled: true,
     createdAt: "2026-03-20T10:00:00Z",
     updatedAt: "2026-03-20T10:00:00Z",
@@ -1139,6 +1142,7 @@ var SAMPLE_DATASOURCES = [
     timeoutMs: 15e3,
     allowedTables: null,
     blockedColumns: null,
+    maskPii: null,
     enabled: true,
     createdAt: "2026-03-18T08:30:00Z",
     updatedAt: "2026-03-22T14:00:00Z",
@@ -1155,6 +1159,7 @@ var SAMPLE_DATASOURCES = [
     timeoutMs: 3e4,
     allowedTables: null,
     blockedColumns: null,
+    maskPii: null,
     enabled: true,
     createdAt: "2026-03-15T09:00:00Z",
     updatedAt: "2026-03-21T11:00:00Z",
@@ -1171,6 +1176,7 @@ var SAMPLE_DATASOURCES = [
     timeoutMs: 1e4,
     allowedTables: null,
     blockedColumns: null,
+    maskPii: null,
     enabled: false,
     createdAt: "2026-03-10T12:00:00Z",
     updatedAt: "2026-03-19T16:00:00Z",
@@ -1187,6 +1193,7 @@ var SAMPLE_DATASOURCES = [
     timeoutMs: 5e3,
     allowedTables: null,
     blockedColumns: null,
+    maskPii: null,
     enabled: true,
     createdAt: "2026-03-12T07:00:00Z",
     updatedAt: "2026-03-23T09:00:00Z",
@@ -1203,6 +1210,7 @@ var SAMPLE_DATASOURCES = [
     timeoutMs: 2e4,
     allowedTables: null,
     blockedColumns: null,
+    maskPii: null,
     enabled: true,
     createdAt: "2026-03-22T15:00:00Z",
     updatedAt: "2026-03-25T10:00:00Z",
@@ -1294,6 +1302,7 @@ function DatasourcesPageView({
       timeoutMs: 3e4,
       allowedTables: null,
       blockedColumns: null,
+      maskPii: null,
       enabled: true,
       createdAt: (/* @__PURE__ */ new Date()).toISOString(),
       updatedAt: (/* @__PURE__ */ new Date()).toISOString(),
@@ -1418,31 +1427,30 @@ function AgentsIndexPageView({ labels }) {
       label: labels.title,
       title: labels.title,
       subtitle: labels.subtitle,
-      gradient: "from-violet-500 to-indigo-700"
+      gradient: "from-violet-500 to-indigo-700",
+      toolbar: !isEmpty ? /* @__PURE__ */ jsx(
+        SearchBar,
+        {
+          searchTerm,
+          onSearchChange: setSearchTerm,
+          placeholder: labels.searchPlaceholder ?? labels.title,
+          noBorder: true
+        }
+      ) : void 0
     }
   );
-  const content = /* @__PURE__ */ jsxs(Fragment, { children: [
-    !isEmpty && /* @__PURE__ */ jsx(
-      SearchBar,
+  const content = /* @__PURE__ */ jsx("div", { className: "grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4", children: filteredTiles.map((tile) => {
+    const Icon = tile.icon;
+    return /* @__PURE__ */ jsx(Link, { href: tile.href, className: "block focus:outline-none", children: /* @__PURE__ */ jsx(
+      EntityCard,
       {
-        searchTerm,
-        onSearchChange: setSearchTerm,
-        placeholder: labels.searchPlaceholder ?? labels.title
+        accentGradient: tile.gradient,
+        icon: /* @__PURE__ */ jsx("div", { className: `flex h-11 w-11 items-center justify-center rounded-lg bg-gradient-to-br ${tile.gradient} shadow-lg`, children: /* @__PURE__ */ jsx(Icon, { className: "h-6 w-6 text-white" }) }),
+        title: tile.title,
+        children: /* @__PURE__ */ jsx("p", { className: "text-xs text-slate-500 dark:text-slate-400", children: tile.subtitle })
       }
-    ),
-    /* @__PURE__ */ jsx("div", { className: "grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4", children: filteredTiles.map((tile) => {
-      const Icon = tile.icon;
-      return /* @__PURE__ */ jsx(Link, { href: tile.href, className: "block focus:outline-none", children: /* @__PURE__ */ jsx(
-        EntityCard,
-        {
-          accentGradient: tile.gradient,
-          icon: /* @__PURE__ */ jsx("div", { className: `flex h-11 w-11 items-center justify-center rounded-lg bg-gradient-to-br ${tile.gradient} shadow-lg`, children: /* @__PURE__ */ jsx(Icon, { className: "h-6 w-6 text-white" }) }),
-          title: tile.title,
-          children: /* @__PURE__ */ jsx("p", { className: "text-xs text-slate-500 dark:text-slate-400", children: tile.subtitle })
-        }
-      ) }, tile.id);
-    }) })
-  ] });
+    ) }, tile.id);
+  }) });
   return /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
     hero,
     content
@@ -1533,6 +1541,7 @@ var BADGE_COLOR = {
 function WorkflowRunsPageView({ labels, runs, loading, onCancel, onReplay, onView, onViewTimeline }) {
   const [statusFilter, setStatusFilter] = useState("all");
   const [searchTerm, setSearchTerm] = useState("");
+  const [filtersOpen, setFiltersOpen] = useState(false);
   const statusOptions = useMemo(() => [
     { value: "all", label: labels.filterAll },
     { value: "pending", label: labels.statusPending },
@@ -1575,54 +1584,61 @@ function WorkflowRunsPageView({ labels, runs, loading, onCancel, onReplay, onVie
       title: labels.title,
       subtitle: labels.subtitle,
       gradient: "from-indigo-500 to-sky-700",
-      toolbar: /* @__PURE__ */ jsx("div", { className: "w-full sm:w-48", children: /* @__PURE__ */ jsx(
-        FormSelect,
+      toolbar: !isEmpty ? /* @__PURE__ */ jsx(
+        SearchBar,
         {
-          name: "statusFilter",
-          label: labels.filterStatus,
-          options: statusOptions,
-          value: statusFilter,
-          onValueChange: setStatusFilter
+          searchTerm,
+          onSearchChange: setSearchTerm,
+          placeholder: labels.searchPlaceholder ?? labels.title,
+          noBorder: true,
+          filtersModal: {
+            open: filtersOpen,
+            onOpen: () => setFiltersOpen(true),
+            onClose: () => setFiltersOpen(false),
+            title: labels.filterStatus,
+            count: statusFilter !== "all" ? 1 : 0,
+            onClear: statusFilter !== "all" ? () => setStatusFilter("all") : void 0,
+            children: /* @__PURE__ */ jsx(
+              FormSelect,
+              {
+                name: "statusFilter",
+                label: labels.filterStatus,
+                options: statusOptions,
+                value: statusFilter,
+                onValueChange: setStatusFilter
+              }
+            )
+          }
         }
-      ) })
+      ) : void 0
     }
   );
-  const content = loading ? /* @__PURE__ */ jsx(PageLoadingState, {}) : filteredRuns.length === 0 ? /* @__PURE__ */ jsx(PageEmptyState, { title: labels.empty, message: labels.subtitle, iconName: "folder-open" }) : /* @__PURE__ */ jsxs(Fragment, { children: [
-    !isEmpty && /* @__PURE__ */ jsx(
-      SearchBar,
-      {
-        searchTerm,
-        onSearchChange: setSearchTerm,
-        placeholder: labels.searchPlaceholder ?? labels.title
-      }
-    ),
-    /* @__PURE__ */ jsx("div", { className: "grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3", children: filteredRuns.map((run) => /* @__PURE__ */ jsxs(
-      EntityCard,
-      {
-        accentGradient: "from-indigo-500 to-sky-700",
-        icon: /* @__PURE__ */ jsx("div", { className: "flex h-11 w-11 items-center justify-center rounded-lg bg-indigo-500/10 text-indigo-600 dark:bg-indigo-500/20 dark:text-indigo-400", children: /* @__PURE__ */ jsx(ClockIcon, { className: "h-6 w-6" }) }),
-        title: run.id.slice(0, 8),
-        subtitle: `${labels.startedAt}: ${new Date(run.createdAt).toLocaleString()}`,
-        status: /* @__PURE__ */ jsx(Badge, { color: BADGE_COLOR[run.status] ?? "zinc", children: statusLabelFor(run.status) }),
-        footer: /* @__PURE__ */ jsxs("div", { className: "flex gap-2", children: [
-          onView && /* @__PURE__ */ jsx(Button, { type: "button", size: "sm", outline: true, onClick: () => onView(run), children: labels.view }),
-          onViewTimeline && labels.timeline && /* @__PURE__ */ jsx(Button, { type: "button", size: "sm", outline: true, onClick: () => onViewTimeline(run), children: labels.timeline }),
-          /* @__PURE__ */ jsx(Button, { type: "button", size: "sm", outline: true, onClick: () => onReplay(run), children: labels.replay }),
-          run.status === "running" && /* @__PURE__ */ jsx(Button, { type: "button", size: "sm", color: "rose", onClick: () => onCancel(run), children: labels.cancel })
+  const content = loading ? /* @__PURE__ */ jsx(PageLoadingState, {}) : filteredRuns.length === 0 ? /* @__PURE__ */ jsx(PageEmptyState, { title: labels.empty, message: labels.subtitle, iconName: "folder-open" }) : /* @__PURE__ */ jsx("div", { className: "grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3", children: filteredRuns.map((run) => /* @__PURE__ */ jsxs(
+    EntityCard,
+    {
+      accentGradient: "from-indigo-500 to-sky-700",
+      icon: /* @__PURE__ */ jsx("div", { className: "flex h-11 w-11 items-center justify-center rounded-lg bg-indigo-500/10 text-indigo-600 dark:bg-indigo-500/20 dark:text-indigo-400", children: /* @__PURE__ */ jsx(ClockIcon, { className: "h-6 w-6" }) }),
+      title: run.id.slice(0, 8),
+      subtitle: `${labels.startedAt}: ${new Date(run.createdAt).toLocaleString()}`,
+      status: /* @__PURE__ */ jsx(Badge, { color: BADGE_COLOR[run.status] ?? "zinc", children: statusLabelFor(run.status) }),
+      footer: /* @__PURE__ */ jsxs("div", { className: "flex gap-2", children: [
+        onView && /* @__PURE__ */ jsx(Button, { type: "button", size: "sm", outline: true, onClick: () => onView(run), children: labels.view }),
+        onViewTimeline && labels.timeline && /* @__PURE__ */ jsx(Button, { type: "button", size: "sm", outline: true, onClick: () => onViewTimeline(run), children: labels.timeline }),
+        /* @__PURE__ */ jsx(Button, { type: "button", size: "sm", outline: true, onClick: () => onReplay(run), children: labels.replay }),
+        run.status === "running" && /* @__PURE__ */ jsx(Button, { type: "button", size: "sm", color: "rose", onClick: () => onCancel(run), children: labels.cancel })
+      ] }),
+      children: [
+        /* @__PURE__ */ jsxs("dl", { className: "mt-1 grid grid-cols-2 gap-1 text-xs text-slate-500 dark:text-slate-400", children: [
+          /* @__PURE__ */ jsx("dt", { children: labels.duration }),
+          /* @__PURE__ */ jsx("dd", { className: "text-right", children: formatDurationMs(run.totalDurationMs) }),
+          /* @__PURE__ */ jsx("dt", { children: labels.triggeredBy }),
+          /* @__PURE__ */ jsx("dd", { className: "text-right truncate", children: run.triggeredBy || "\u2014" })
         ] }),
-        children: [
-          /* @__PURE__ */ jsxs("dl", { className: "mt-1 grid grid-cols-2 gap-1 text-xs text-slate-500 dark:text-slate-400", children: [
-            /* @__PURE__ */ jsx("dt", { children: labels.duration }),
-            /* @__PURE__ */ jsx("dd", { className: "text-right", children: formatDurationMs(run.totalDurationMs) }),
-            /* @__PURE__ */ jsx("dt", { children: labels.triggeredBy }),
-            /* @__PURE__ */ jsx("dd", { className: "text-right truncate", children: run.triggeredBy || "\u2014" })
-          ] }),
-          run.error && /* @__PURE__ */ jsx("p", { className: "mt-1 line-clamp-2 text-xs text-rose-600 dark:text-rose-400", children: run.error })
-        ]
-      },
-      run.id
-    )) })
-  ] });
+        run.error && /* @__PURE__ */ jsx("p", { className: "mt-1 line-clamp-2 text-xs text-rose-600 dark:text-rose-400", children: run.error })
+      ]
+    },
+    run.id
+  )) });
   return /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
     hero,
     content
@@ -2979,11 +2995,9 @@ function AgentNewWizardPageView({
     labels.wizardStep4Subtitle,
     labels.wizardStep5Subtitle
   ];
-  const timelineSteps = stepTitles.map((title, idx) => ({
+  const indicatorSteps = stepTitles.map((title, idx) => ({
     id: String(idx + 1),
-    name: title,
-    description: stepSubtitles[idx],
-    status: idx + 1 < step ? "complete" : idx + 1 === step ? "current" : "upcoming"
+    title
   }));
   function markTouched() {
     if (!touched) setTouched(true);
@@ -3082,7 +3096,17 @@ function AgentNewWizardPageView({
       label: counter,
       title: labels.pageTitle,
       subtitle: stepSubtitles[step - 1],
-      gradient: activePreset.accent
+      gradient: activePreset.accent,
+      children: /* @__PURE__ */ jsx(
+        StepIndicator,
+        {
+          accent: "indigo",
+          currentStep: step - 1,
+          onStepChange: (idx) => goToStep(idx + 1),
+          progressLabel: labels.pageTitle,
+          steps: indicatorSteps
+        }
+      )
     }
   );
   function renderStep1() {
@@ -3595,22 +3619,10 @@ function AgentNewWizardPageView({
         if (step < TOTAL_STEPS) goNext();
         else void submit();
       },
-      className: "space-y-5",
+      className: "space-y-4",
       children: [
-        /* @__PURE__ */ jsx(
-          StepTimeline,
-          {
-            steps: timelineSteps,
-            progressLabel: labels.pageTitle,
-            onStepClick: (idx) => {
-              goToStep(idx + 1);
-            }
-          }
-        ),
-        /* @__PURE__ */ jsxs("div", { className: "w-full space-y-5", children: [
-          stepBody,
-          footer
-        ] })
+        /* @__PURE__ */ jsx("div", { className: "liquid-surface rounded-2xl p-5 sm:p-8", children: stepBody }),
+        footer
       ]
     }
   );
@@ -3696,9 +3708,19 @@ function DatasourceNewWizardPageView({
   const [readOnly, setReadOnly] = useState(true);
   const [maxPoolSize, setMaxPoolSize] = useState("5");
   const [timeoutMs, setTimeoutMs] = useState("5000");
-  const [allowedTables, setAllowedTables] = useState("");
-  const [blockedColumns, setBlockedColumns] = useState("");
+  const [allowedTablesItems, setAllowedTablesItems] = useState([]);
+  const [allowedTablesSelected, setAllowedTablesSelected] = useState([]);
+  const [blockedColumnsItems, setBlockedColumnsItems] = useState([]);
+  const [blockedColumnsSelected, setBlockedColumnsSelected] = useState([]);
   const [maskPii, setMaskPii] = useState(false);
+  const allowedTablesStyle = {
+    bg: "bg-amber-500/15",
+    text: "text-amber-700 dark:text-amber-300"
+  };
+  const blockedColumnsStyle = {
+    bg: "bg-rose-500/15",
+    text: "text-rose-700 dark:text-rose-300"
+  };
   const [submitting, setSubmitting] = useState(false);
   const [touched, setTouched] = useState(false);
   const [testStatus, setTestStatus] = useState("idle");
@@ -3767,10 +3789,9 @@ function DatasourceNewWizardPageView({
     if (Number.isFinite(pool) && pool > 0) payload.maxPoolSize = pool;
     const timeout = Number(timeoutMs);
     if (Number.isFinite(timeout) && timeout > 0) payload.timeoutMs = timeout;
-    const allowed = splitList(allowedTables);
-    if (allowed.length > 0) payload.allowedTables = allowed;
-    const blocked = splitList(blockedColumns);
-    if (blocked.length > 0) payload.blockedColumns = blocked;
+    if (allowedTablesSelected.length > 0) payload.allowedTables = [...allowedTablesSelected];
+    if (blockedColumnsSelected.length > 0) payload.blockedColumns = [...blockedColumnsSelected];
+    if (maskPii) payload.maskPii = true;
     return payload;
   }
   async function handleTestConnection() {
@@ -3787,11 +3808,7 @@ function DatasourceNewWizardPageView({
   async function submit() {
     setSubmitting(true);
     try {
-      const payload = {
-        ...buildPayload(),
-        ...maskPii ? { maskPii: true } : {}
-      };
-      await onSubmit(payload);
+      await onSubmit(buildPayload());
     } finally {
       setSubmitting(false);
     }
@@ -3827,11 +3844,9 @@ function DatasourceNewWizardPageView({
     labels.wizardStep3Subtitle,
     labels.wizardStep4Subtitle
   ];
-  const timelineSteps = stepTitles.map((title, idx) => ({
+  const indicatorSteps = stepTitles.map((title, idx) => ({
     id: String(idx + 1),
-    name: title,
-    description: stepSubtitles[idx],
-    status: idx + 1 < step ? "complete" : idx + 1 === step ? "current" : "upcoming"
+    title
   }));
   const counter = labels.wizardStepCounter.replace("{current}", String(step)).replace("{total}", String(TOTAL_STEPS2));
   const hero = /* @__PURE__ */ jsx(
@@ -3841,7 +3856,17 @@ function DatasourceNewWizardPageView({
       label: counter,
       title: labels.pageTitle,
       subtitle: stepSubtitles[step - 1] ?? labels.pageSubtitle,
-      gradient: category?.gradient ?? "from-amber-500 to-orange-600"
+      gradient: category?.gradient ?? "from-amber-500 to-orange-600",
+      children: /* @__PURE__ */ jsx(
+        StepIndicator,
+        {
+          accent: "indigo",
+          currentStep: step - 1,
+          onStepChange: (idx) => goToStep(idx + 1),
+          progressLabel: labels.pageTitle,
+          steps: indicatorSteps
+        }
+      )
     }
   );
   function renderStep1() {
@@ -4312,32 +4337,54 @@ function DatasourceNewWizardPageView({
               }
             )
           ] }),
-          /* @__PURE__ */ jsx(
-            FormInput,
-            {
-              label: labels.fieldAllowedTables,
-              value: allowedTables,
-              onValueChange: (v) => {
-                setAllowedTables(v);
-                markTouched();
-              },
-              placeholder: labels.fieldAllowedTablesPlaceholder,
-              hint: labels.fieldAllowedTablesHint
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            FormInput,
-            {
-              label: labels.fieldBlockedColumns,
-              value: blockedColumns,
-              onValueChange: (v) => {
-                setBlockedColumns(v);
-                markTouched();
-              },
-              placeholder: labels.fieldBlockedColumnsPlaceholder,
-              hint: labels.fieldBlockedColumnsHint
-            }
-          ),
+          /* @__PURE__ */ jsxs("div", { className: "space-y-1", children: [
+            /* @__PURE__ */ jsx("label", { className: "block text-xs font-medium text-gray-500 dark:text-gray-400", children: labels.fieldAllowedTables }),
+            /* @__PURE__ */ jsx(
+              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-gray-500 dark:text-gray-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,
             {
@@ -4357,8 +4404,8 @@ function DatasourceNewWizardPageView({
   function renderStep4() {
     const categoryLabel = category ? labels[category.labelKey] ?? category.id : labels.reviewNoneValue;
     const dialectLabel = dialectOption?.label ?? labels.reviewNoneValue;
-    const allowed = splitList(allowedTables);
-    const blocked = splitList(blockedColumns);
+    const allowed = allowedTablesSelected;
+    const blocked = blockedColumnsSelected;
     return /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
       /* @__PURE__ */ jsx(
         SectionCard,
@@ -4450,20 +4497,10 @@ function DatasourceNewWizardPageView({
         if (step < TOTAL_STEPS2) goNext();
         else void submit();
       },
-      className: "space-y-5",
+      className: "space-y-4",
       children: [
-        /* @__PURE__ */ jsx(
-          StepTimeline,
-          {
-            steps: timelineSteps,
-            progressLabel: labels.pageTitle,
-            onStepClick: (idx) => goToStep(idx + 1)
-          }
-        ),
-        /* @__PURE__ */ jsxs("div", { className: "w-full space-y-5", children: [
-          stepBody,
-          footer
-        ] })
+        /* @__PURE__ */ jsx("div", { className: "liquid-surface rounded-2xl p-5 sm:p-8", children: stepBody }),
+        footer
       ]
     }
   );
@@ -4478,9 +4515,6 @@ function ReviewRow2({ label, value }) {
     /* @__PURE__ */ jsx("dd", { className: "mt-0.5 truncate text-xs font-semibold text-gray-900 dark:text-white", children: value })
   ] });
 }
-function splitList(raw) {
-  return raw.split(",").map((s) => s.trim()).filter((s) => s.length > 0);
-}
 async function simulateTest() {
   await new Promise((r) => setTimeout(r, 1500));
   return true;
@@ -4594,7 +4628,12 @@ function RuleNewWizardPageView({
   const [priority, setPriority] = useState(50);
   const [enabled, setEnabled] = useState(true);
   const [status, setStatus] = useState("active");
-  const [tagsInput, setTagsInput] = useState("");
+  const [tagsItems, setTagsItems] = useState([]);
+  const [tagsSelected, setTagsSelected] = useState([]);
+  const tagsStyle = {
+    bg: "bg-fuchsia-500/15",
+    text: "text-fuchsia-700 dark:text-fuchsia-300"
+  };
   const [combinator, setCombinator] = useState("and");
   const [condition, setCondition] = useState(defaultRuleCondition());
   const [actionTileId, setActionTileId] = useState("");
@@ -4644,49 +4683,40 @@ function RuleNewWizardPageView({
     next.setHours(time?.hours ?? 0, time?.minutes ?? 0, 0, 0);
     return next.toISOString();
   }
-  const tags = useMemo(
-    () => tagsInput.split(",").map((t) => t.trim()).filter((t) => t.length > 0),
-    [tagsInput]
-  );
+  const tags = useMemo(() => [...tagsSelected], [tagsSelected]);
   function buildPayload() {
     const validFrom = combineDateTime(validFromDate, validFromTime);
     const validUntil = noExpiry ? null : combineDateTime(validUntilDate, validUntilTime);
-    const conditionWithCombinator = combinator === "not" ? {
+    const conditionWithCombinator = combinator === "and" ? condition : {
       operator: "boolean_expression",
-      combinator: "and",
-      operands: [condition],
-      // The engine ignores extra fields, so this is forward-compat.
-      ...{ notFlag: true }
-    } : combinator === "or" ? {
-      operator: "boolean_expression",
-      combinator: "or",
+      combinator,
       operands: [condition]
-    } : condition;
+    };
     const finalAction = {
       type: action.type,
       params: {
         ...action.params ?? {},
-        actionVariant: actionTileId,
-        recurrence,
-        ...recurrence === "cron" && cronExpression ? { cronExpression } : {},
-        ...recurrence === "recurring" ? {
-          weekdays,
-          ...recurringTime ? { timeOfDay: `${pad(recurringTime.hours)}:${pad(recurringTime.minutes)}` } : {}
-        } : {}
+        actionVariant: actionTileId
       }
     };
-    const wireStatus = status === "paused" ? "draft" : status;
+    const recurrencePayload = recurrence === "cron" ? { kind: "cron", expression: cronExpression.trim() } : recurrence === "recurring" ? {
+      kind: "recurring",
+      weekdays: [...weekdays],
+      timeOfDay: recurringTime ? `${pad(recurringTime.hours)}:${pad(recurringTime.minutes)}` : "00:00"
+    } : { kind: "one-off" };
     return {
       name: name.trim() || "Untitled Rule",
       description: description.trim() || void 0,
       enabled,
       priority,
-      status: wireStatus,
+      // `paused` ships as-is — backend understands it natively (Fallback 2).
+      status,
       validFrom,
       validUntil,
       tags,
       condition: conditionWithCombinator,
-      action: finalAction
+      action: finalAction,
+      recurrence: recurrencePayload
     };
   }
   async function submit() {
@@ -4730,11 +4760,9 @@ function RuleNewWizardPageView({
     labels.wizardStep4Subtitle,
     labels.wizardStep5Subtitle
   ];
-  const timelineSteps = stepTitles.map((title, idx) => ({
+  const indicatorSteps = stepTitles.map((title, idx) => ({
     id: String(idx + 1),
-    name: title,
-    description: stepSubtitles[idx],
-    status: idx + 1 < step ? "complete" : idx + 1 === step ? "current" : "upcoming"
+    title
   }));
   const counter = labels.wizardStepCounter.replace("{current}", String(step)).replace("{total}", String(TOTAL_STEPS3));
   const hero = /* @__PURE__ */ jsx(
@@ -4744,7 +4772,17 @@ function RuleNewWizardPageView({
       label: counter,
       title: labels.pageTitle,
       subtitle: stepSubtitles[step - 1] ?? labels.pageSubtitle,
-      gradient: "from-fuchsia-500 to-purple-700"
+      gradient: "from-fuchsia-500 to-purple-700",
+      children: /* @__PURE__ */ jsx(
+        StepIndicator,
+        {
+          accent: "violet",
+          currentStep: step - 1,
+          onStepChange: (idx) => goToStep(idx + 1),
+          progressLabel: labels.pageTitle,
+          steps: indicatorSteps
+        }
+      )
     }
   );
   function renderStep1() {
@@ -5026,19 +5064,30 @@ function RuleNewWizardPageView({
               }
             )
           ] }),
-          /* @__PURE__ */ jsx(
-            FormInput,
-            {
-              label: labels.tagsLabel,
-              value: tagsInput,
-              onValueChange: (v) => {
-                setTagsInput(v);
-                markTouched();
-              },
-              placeholder: labels.tagsPlaceholder,
-              hint: labels.tagsHint
-            }
-          ),
+          /* @__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(
@@ -5074,29 +5123,25 @@ function RuleNewWizardPageView({
           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("div", { className: "flex flex-wrap gap-2", children: WEEKDAYS.map((d) => {
-                const selected = weekdays.includes(d.id);
-                const label = labels[d.labelKey] ?? d.id;
-                return /* @__PURE__ */ jsx(
-                  "button",
-                  {
-                    type: "button",
-                    "aria-pressed": selected,
-                    onClick: () => {
-                      setWeekdays(
-                        (current) => current.includes(d.id) ? current.filter((id) => id !== d.id) : [...current, d.id]
-                      );
-                      markTouched();
-                    },
-                    className: [
-                      "inline-flex h-9 min-w-9 items-center justify-center rounded-full px-3 text-xs font-semibold transition",
-                      selected ? "bg-fuchsia-500 text-white shadow ring-2 ring-fuchsia-300/70" : "liquid-surface text-slate-700 dark:text-slate-300 hover:bg-fuchsia-500/10"
-                    ].join(" "),
-                    children: label
+              /* @__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();
                   },
-                  d.id
-                );
-              }) })
+                  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 }),
@@ -5252,20 +5297,10 @@ function RuleNewWizardPageView({
         if (step < TOTAL_STEPS3) goNext();
         else void submit();
       },
-      className: "space-y-5",
+      className: "space-y-4",
       children: [
-        /* @__PURE__ */ jsx(
-          StepTimeline,
-          {
-            steps: timelineSteps,
-            progressLabel: labels.pageTitle,
-            onStepClick: (idx) => goToStep(idx + 1)
-          }
-        ),
-        /* @__PURE__ */ jsxs("div", { className: "w-full space-y-5", children: [
-          stepBody,
-          footer
-        ] })
+        /* @__PURE__ */ jsx("div", { className: "liquid-surface rounded-2xl p-5 sm:p-8", children: stepBody }),
+        footer
       ]
     }
   );