@datatechsolutions/ui 3.6.0 → 3.6.2

package/dist/platform/pages/index.mjs

@@ -1,20 +1,21 @@
 "use client";
 import { adaptWorkflowGraphToUi, formatDurationMs } from '../../chunk-UQXVCVAN.mjs';
-import { WorkflowWorkspace } from '../../chunk-XTXLRQ3H.mjs';
-export { RolesPageView, UsersPageView } from '../../chunk-XTXLRQ3H.mjs';
-import { DatasourceModal, findCategory, DIALECT_CATEGORIES } from '../../chunk-HGWVJ3VB.mjs';
-export { DIALECT_CATEGORIES, DatasourceFormModal, DatasourceModal, findCategory, findDialect } from '../../chunk-HGWVJ3VB.mjs';
-import { defaultRuleForm, RuleForm, ExecutionTimelinePanel } from '../../chunk-DYWSG42B.mjs';
+import { WorkflowWorkspace } from '../../chunk-34XRH2FX.mjs';
+export { RolesPageView, UsersPageView } from '../../chunk-34XRH2FX.mjs';
+import { DatasourceModal, findCategory, DIALECT_CATEGORIES } from '../../chunk-SJVKID3E.mjs';
+export { DIALECT_CATEGORIES, DatasourceFormModal, DatasourceModal, findCategory, findDialect } from '../../chunk-SJVKID3E.mjs';
+import { defaultRuleForm, RuleForm, ExecutionTimelinePanel } from '../../chunk-C4AJWDFB.mjs';
 import '../../chunk-JB6RNAD2.mjs';
 import '../../chunk-LEXBTVGM.mjs';
-import '../../chunk-QTA5I6FC.mjs';
-import { HeroSection, SearchBar, PageLoadingState, PageEmptyState, EntityCard, Badge, ManagementPageLayout, CreateActionButton, Button, GlassModal, FormGrid, FormSelect, FormInput, FormTextarea, SectionHeader, Text, Form, FormActionsRow, Table, TableHead, TableRow, TableHeader, TableBody, TableCell, InlineForm, CopyableId } from '../../chunk-4OFG6POC.mjs';
-import '../../chunk-D2JF6C3E.mjs';
+import '../../chunk-VZIUQE7B.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 } from '../../chunk-5LCWQKGQ.mjs';
 import '../../chunk-7VJ7CMMT.mjs';
-import { useLink } from '../../chunk-QWG2FMUN.mjs';
 import '../../chunk-RHRJXK5R.mjs';
 import '../../chunk-3AY5HIQ6.mjs';
-import '../../chunk-OZNTQROP.mjs';
+import '../../chunk-PLTLRL2V.mjs';
+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 } from '@heroicons/react/24/outline';
@@ -32,29 +33,30 @@ function AgentsModelsPageView({ labels, models, loading }) {
       label: labels.title,
       title: labels.title,
       subtitle: labels.subtitle,
-      gradient: "from-emerald-500 to-teal-700",
-      toolbar: !isEmpty ? /* @__PURE__ */ jsx(
-        SearchBar,
-        {
-          searchTerm,
-          onSearchChange: setSearchTerm,
-          placeholder: labels.searchPlaceholder ?? labels.title,
-          noBorder: true
-        }
-      ) : void 0
+      gradient: "from-emerald-500 to-teal-700"
     }
   );
-  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
-  )) });
+  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
+    )) })
+  ] });
   return /* @__PURE__ */ jsx(ManagementPageLayout, { hero, content });
 }
 function AgentsConfigPageView({ labels, agents, models, loading, onCreate, onUpdate, onDelete }) {
@@ -241,16 +243,7 @@ function AgentsPromptsPageView({ labels, agents, prompts, loading, onCreate, onA
       title: labels.title,
       subtitle: labels.subtitle,
       gradient: "from-sky-500 to-blue-700",
-      toolbar: !isEmpty ? /* @__PURE__ */ jsx(
-        SearchBar,
-        {
-          searchTerm,
-          onSearchChange: setSearchTerm,
-          placeholder: labels.searchPlaceholder ?? labels.title,
-          noBorder: true
-        }
-      ) : void 0,
-      actions: /* @__PURE__ */ jsx(
+      toolbar: /* @__PURE__ */ jsx(
         CreateActionButton,
         {
           mode: "desktop",
@@ -270,37 +263,47 @@ function AgentsPromptsPageView({ labels, agents, prompts, loading, onCreate, onA
       accent: "sky"
     }
   );
-  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: filteredPrompts.map((prompt) => {
-    const agentName = agentNameById.get(prompt.agentId) ?? prompt.agentId;
-    const key = `${prompt.agentId}:${prompt.locale}:${prompt.version}`;
-    return /* @__PURE__ */ jsx(
-      EntityCard,
+  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,
       {
-        accentGradient: "from-sky-500 to-blue-700",
-        icon: /* @__PURE__ */ jsx("div", { className: "flex h-11 w-11 items-center justify-center rounded-lg bg-sky-500/10 text-sky-600 dark:bg-sky-500/20 dark:text-sky-400", children: /* @__PURE__ */ jsx(ChatBubbleLeftEllipsisIcon, { className: "h-6 w-6" }) }),
-        title: agentName,
-        subtitle: `${prompt.locale} \xB7 v${prompt.version}`,
-        status: prompt.isActive ? /* @__PURE__ */ jsx(Badge, { color: "emerald", children: labels.isActive }) : null,
-        footer: /* @__PURE__ */ jsxs("div", { className: "flex gap-2", children: [
-          !prompt.isActive && /* @__PURE__ */ jsx(Button, { type: "button", size: "sm", outline: true, onClick: () => onActivate(prompt), children: labels.activate }),
-          /* @__PURE__ */ jsx(
-            Button,
-            {
-              type: "button",
-              size: "sm",
-              color: "rose",
-              onClick: () => {
-                if (window.confirm(labels.deleteConfirm)) onDelete(prompt);
-              },
-              children: labels.delete
-            }
-          )
-        ] }),
-        children: prompt.prompt && /* @__PURE__ */ jsx("p", { className: "mt-1 line-clamp-3 text-xs text-slate-500 dark:text-slate-400", children: prompt.prompt })
-      },
-      key
-    );
-  }) });
+        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: filteredPrompts.map((prompt) => {
+      const agentName = agentNameById.get(prompt.agentId) ?? prompt.agentId;
+      const key = `${prompt.agentId}:${prompt.locale}:${prompt.version}`;
+      return /* @__PURE__ */ jsx(
+        EntityCard,
+        {
+          accentGradient: "from-sky-500 to-blue-700",
+          icon: /* @__PURE__ */ jsx("div", { className: "flex h-11 w-11 items-center justify-center rounded-lg bg-sky-500/10 text-sky-600 dark:bg-sky-500/20 dark:text-sky-400", children: /* @__PURE__ */ jsx(ChatBubbleLeftEllipsisIcon, { className: "h-6 w-6" }) }),
+          title: agentName,
+          subtitle: `${prompt.locale} \xB7 v${prompt.version}`,
+          status: prompt.isActive ? /* @__PURE__ */ jsx(Badge, { color: "emerald", children: labels.isActive }) : null,
+          footer: /* @__PURE__ */ jsxs("div", { className: "flex gap-2", children: [
+            !prompt.isActive && /* @__PURE__ */ jsx(Button, { type: "button", size: "sm", outline: true, onClick: () => onActivate(prompt), children: labels.activate }),
+            /* @__PURE__ */ jsx(
+              Button,
+              {
+                type: "button",
+                size: "sm",
+                color: "rose",
+                onClick: () => {
+                  if (window.confirm(labels.deleteConfirm)) onDelete(prompt);
+                },
+                children: labels.delete
+              }
+            )
+          ] }),
+          children: prompt.prompt && /* @__PURE__ */ jsx("p", { className: "mt-1 line-clamp-3 text-xs text-slate-500 dark:text-slate-400", children: prompt.prompt })
+        },
+        key
+      );
+    }) })
+  ] });
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx(ManagementPageLayout, { hero, content, mobileAction }),
     /* @__PURE__ */ jsx(
@@ -385,16 +388,7 @@ function AgentsToolDefinitionsPageView({ labels, tools, loading, onCreate, onUpd
       title: labels.title,
       subtitle: labels.subtitle,
       gradient: "from-amber-500 to-orange-700",
-      toolbar: !isEmpty ? /* @__PURE__ */ jsx(
-        SearchBar,
-        {
-          searchTerm,
-          onSearchChange: setSearchTerm,
-          placeholder: labels.searchPlaceholder ?? labels.title,
-          noBorder: true
-        }
-      ) : void 0,
-      actions: /* @__PURE__ */ jsx(
+      toolbar: /* @__PURE__ */ jsx(
         CreateActionButton,
         {
           mode: "desktop",
@@ -414,33 +408,43 @@ function AgentsToolDefinitionsPageView({ labels, tools, loading, onCreate, onUpd
       accent: "amber"
     }
   );
-  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: filteredTools.map((tool) => /* @__PURE__ */ jsx(
-    EntityCard,
-    {
-      accentGradient: "from-amber-500 to-orange-700",
-      icon: /* @__PURE__ */ jsx("div", { className: "flex h-11 w-11 items-center justify-center rounded-lg bg-amber-500/10 text-amber-600 dark:bg-amber-500/20 dark:text-amber-400", children: /* @__PURE__ */ jsx(WrenchScrewdriverIcon, { className: "h-6 w-6" }) }),
-      title: tool.name,
-      subtitle: toolTypeLabel(tool),
-      status: /* @__PURE__ */ jsx(Badge, { color: tool.enabled ? "emerald" : "zinc", children: tool.enabled ? labels.enabled : labels.disabled }),
-      footer: /* @__PURE__ */ jsxs("div", { className: "flex gap-2", children: [
-        /* @__PURE__ */ jsx(Button, { type: "button", size: "sm", outline: true, onClick: () => setEditing(tool), children: labels.edit }),
-        /* @__PURE__ */ jsx(
-          Button,
-          {
-            type: "button",
-            size: "sm",
-            color: "rose",
-            onClick: () => {
-              if (window.confirm(labels.deleteConfirm)) onDelete(tool);
-            },
-            children: labels.delete
-          }
-        )
-      ] }),
-      children: tool.description && /* @__PURE__ */ jsx("p", { className: "mt-1 text-xs text-slate-500 dark:text-slate-400", children: tool.description })
-    },
-    tool.agentToolId
-  )) });
+  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: filteredTools.map((tool) => /* @__PURE__ */ jsx(
+      EntityCard,
+      {
+        accentGradient: "from-amber-500 to-orange-700",
+        icon: /* @__PURE__ */ jsx("div", { className: "flex h-11 w-11 items-center justify-center rounded-lg bg-amber-500/10 text-amber-600 dark:bg-amber-500/20 dark:text-amber-400", children: /* @__PURE__ */ jsx(WrenchScrewdriverIcon, { className: "h-6 w-6" }) }),
+        title: tool.name,
+        subtitle: toolTypeLabel(tool),
+        status: /* @__PURE__ */ jsx(Badge, { color: tool.enabled ? "emerald" : "zinc", children: tool.enabled ? labels.enabled : labels.disabled }),
+        footer: /* @__PURE__ */ jsxs("div", { className: "flex gap-2", children: [
+          /* @__PURE__ */ jsx(Button, { type: "button", size: "sm", outline: true, onClick: () => setEditing(tool), children: labels.edit }),
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              type: "button",
+              size: "sm",
+              color: "rose",
+              onClick: () => {
+                if (window.confirm(labels.deleteConfirm)) onDelete(tool);
+              },
+              children: labels.delete
+            }
+          )
+        ] }),
+        children: tool.description && /* @__PURE__ */ jsx("p", { className: "mt-1 text-xs text-slate-500 dark:text-slate-400", children: tool.description })
+      },
+      tool.agentToolId
+    )) })
+  ] });
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx(ManagementPageLayout, { hero, content, mobileAction }),
     createOpen && /* @__PURE__ */ jsx(
@@ -940,16 +944,7 @@ function RulesPageView({ labels, rules, loading, onCreate, onUpdate, onDelete })
       title: labels.title,
       subtitle: labels.subtitle,
       gradient: "from-fuchsia-500 to-purple-700",
-      toolbar: !isEmpty ? /* @__PURE__ */ jsx(
-        SearchBar,
-        {
-          searchTerm,
-          onSearchChange: setSearchTerm,
-          placeholder: labels.searchPlaceholder ?? labels.title,
-          noBorder: true
-        }
-      ) : void 0,
-      actions: /* @__PURE__ */ jsx(
+      toolbar: /* @__PURE__ */ jsx(
         CreateActionButton,
         {
           mode: "desktop",
@@ -969,33 +964,43 @@ function RulesPageView({ labels, rules, loading, onCreate, onUpdate, onDelete })
       accent: "fuchsia"
     }
   );
-  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: filteredRules.map((rule) => /* @__PURE__ */ jsx(
-    EntityCard,
-    {
-      accentGradient: "from-fuchsia-500 to-purple-700",
-      icon: /* @__PURE__ */ jsx("div", { className: "flex h-11 w-11 items-center justify-center rounded-lg bg-fuchsia-500/10 text-fuchsia-600 dark:bg-fuchsia-500/20 dark:text-fuchsia-400", children: /* @__PURE__ */ jsx(AdjustmentsHorizontalIcon, { className: "h-6 w-6" }) }),
-      title: rule.name,
-      subtitle: `${labels.order}: ${rule.order ?? 0}`,
-      status: /* @__PURE__ */ jsx(Badge, { color: rule.enabled ? "emerald" : "zinc", children: rule.enabled ? labels.enabled : labels.disabled }),
-      footer: /* @__PURE__ */ jsxs("div", { className: "flex gap-2", children: [
-        /* @__PURE__ */ jsx(Button, { type: "button", size: "sm", outline: true, onClick: () => setEditing(rule), children: labels.edit }),
-        /* @__PURE__ */ jsx(
-          Button,
-          {
-            type: "button",
-            size: "sm",
-            color: "rose",
-            onClick: () => {
-              if (window.confirm(labels.deleteConfirm)) onDelete(rule);
-            },
-            children: labels.delete
-          }
-        )
-      ] }),
-      children: rule.description && /* @__PURE__ */ jsx("p", { className: "mt-1 text-xs text-slate-500 dark:text-slate-400", children: rule.description })
-    },
-    rule.ruleId
-  )) });
+  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: filteredRules.map((rule) => /* @__PURE__ */ jsx(
+      EntityCard,
+      {
+        accentGradient: "from-fuchsia-500 to-purple-700",
+        icon: /* @__PURE__ */ jsx("div", { className: "flex h-11 w-11 items-center justify-center rounded-lg bg-fuchsia-500/10 text-fuchsia-600 dark:bg-fuchsia-500/20 dark:text-fuchsia-400", children: /* @__PURE__ */ jsx(AdjustmentsHorizontalIcon, { className: "h-6 w-6" }) }),
+        title: rule.name,
+        subtitle: `${labels.order}: ${rule.order ?? 0}`,
+        status: /* @__PURE__ */ jsx(Badge, { color: rule.enabled ? "emerald" : "zinc", children: rule.enabled ? labels.enabled : labels.disabled }),
+        footer: /* @__PURE__ */ jsxs("div", { className: "flex gap-2", children: [
+          /* @__PURE__ */ jsx(Button, { type: "button", size: "sm", outline: true, onClick: () => setEditing(rule), children: labels.edit }),
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              type: "button",
+              size: "sm",
+              color: "rose",
+              onClick: () => {
+                if (window.confirm(labels.deleteConfirm)) onDelete(rule);
+              },
+              children: labels.delete
+            }
+          )
+        ] }),
+        children: rule.description && /* @__PURE__ */ jsx("p", { className: "mt-1 text-xs text-slate-500 dark:text-slate-400", children: rule.description })
+      },
+      rule.ruleId
+    )) })
+  ] });
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx(ManagementPageLayout, { hero, content, mobileAction }),
     createOpen && /* @__PURE__ */ jsx(
@@ -1273,16 +1278,7 @@ function DatasourcesPageView({
         title: labels.title,
         subtitle: labels.subtitle,
         gradient: "from-amber-500 to-orange-600",
-        toolbar: !isEmpty ? /* @__PURE__ */ jsx(
-          SearchBar,
-          {
-            searchTerm,
-            onSearchChange: setSearchTerm,
-            placeholder: labels.searchPlaceholder ?? labels.title,
-            noBorder: true
-          }
-        ) : void 0,
-        actions: /* @__PURE__ */ jsx(
+        toolbar: /* @__PURE__ */ jsx(
           CreateActionButton,
           {
             mode: "desktop",
@@ -1302,6 +1298,14 @@ function DatasourcesPageView({
         accent: "amber"
       }
     ),
+    !isEmpty && /* @__PURE__ */ jsx(
+      SearchBar,
+      {
+        searchTerm,
+        onSearchChange: setSearchTerm,
+        placeholder: labels.searchPlaceholder ?? labels.title
+      }
+    ),
     isEmpty ? /* @__PURE__ */ jsx(
       PageEmptyState,
       {
@@ -1325,7 +1329,7 @@ function DatasourcesPageView({
           subtitle: dialectLabel,
           status: /* @__PURE__ */ jsx(Badge, { color: ds.enabled ? "emerald" : "zinc", children: ds.enabled ? labels.enabled : labels.disabled }),
           footer: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 text-xs text-slate-500 dark:text-slate-400", children: [
-            ds.readOnly && /* @__PURE__ */ jsx("span", { className: "rounded-full bg-blue-100 px-2 py-0.5 text-[10px] font-semibold text-blue-700 dark:bg-blue-900/30 dark:text-blue-300", children: "Read-only" }),
+            ds.readOnly && /* @__PURE__ */ jsx(Badge, { color: "blue", size: "xs", children: "Read-only" }),
             ds.timeoutMs && /* @__PURE__ */ jsxs("span", { children: [
               ds.timeoutMs / 1e3,
               "s timeout"
@@ -1382,30 +1386,31 @@ function AgentsIndexPageView({ labels }) {
       label: labels.title,
       title: labels.title,
       subtitle: labels.subtitle,
-      gradient: "from-violet-500 to-indigo-700",
-      toolbar: !isEmpty ? /* @__PURE__ */ jsx(
-        SearchBar,
-        {
-          searchTerm,
-          onSearchChange: setSearchTerm,
-          placeholder: labels.searchPlaceholder ?? labels.title,
-          noBorder: true
-        }
-      ) : void 0
+      gradient: "from-violet-500 to-indigo-700"
     }
   );
-  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,
+  const content = /* @__PURE__ */ jsxs(Fragment, { children: [
+    !isEmpty && /* @__PURE__ */ jsx(
+      SearchBar,
       {
-        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 })
+        searchTerm,
+        onSearchChange: setSearchTerm,
+        placeholder: labels.searchPlaceholder ?? labels.title
       }
-    ) }, tile.id);
-  }) });
+    ),
+    /* @__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);
+    }) })
+  ] });
   return /* @__PURE__ */ jsx(ManagementPageLayout, { hero, content });
 }
 function WorkflowsPageView({ labels, workflows, onCreate, onUpdateMeta, onPublish }) {
@@ -1535,55 +1540,54 @@ function WorkflowRunsPageView({ labels, runs, loading, onCancel, onReplay, onVie
       title: labels.title,
       subtitle: labels.subtitle,
       gradient: "from-indigo-500 to-sky-700",
-      toolbar: /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2 sm:flex-row sm:items-end", children: [
-        !isEmpty && /* @__PURE__ */ jsx("div", { className: "flex-1", children: /* @__PURE__ */ jsx(
-          SearchBar,
-          {
-            searchTerm,
-            onSearchChange: setSearchTerm,
-            placeholder: labels.searchPlaceholder ?? labels.title,
-            noBorder: true
-          }
-        ) }),
-        /* @__PURE__ */ jsx("div", { className: "w-full sm:w-48", children: /* @__PURE__ */ jsx(
-          FormSelect,
-          {
-            name: "statusFilter",
-            label: labels.filterStatus,
-            options: statusOptions,
-            value: statusFilter,
-            onValueChange: setStatusFilter
-          }
-        ) })
-      ] })
+      toolbar: /* @__PURE__ */ jsx("div", { className: "w-full sm:w-48", children: /* @__PURE__ */ jsx(
+        FormSelect,
+        {
+          name: "statusFilter",
+          label: labels.filterStatus,
+          options: statusOptions,
+          value: statusFilter,
+          onValueChange: setStatusFilter
+        }
+      ) })
     }
   );
-  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" })
+  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 })
         ] }),
-        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
-  )) });
+        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
+    )) })
+  ] });
   return /* @__PURE__ */ jsx(ManagementPageLayout, { hero, content });
 }
 function RunTimelinePageView({ labels, entries, loading, runId }) {
@@ -1707,16 +1711,7 @@ function ConnectionsPageView({
       title: labels.title,
       subtitle: labels.subtitle,
       gradient: "from-sky-500 to-indigo-600",
-      toolbar: !isEmpty ? /* @__PURE__ */ jsx(
-        SearchBar,
-        {
-          searchTerm,
-          onSearchChange: setSearchTerm,
-          placeholder: labels.searchPlaceholder ?? labels.title,
-          noBorder: true
-        }
-      ) : void 0,
-      actions: /* @__PURE__ */ jsx(
+      toolbar: /* @__PURE__ */ jsx(
         CreateActionButton,
         {
           mode: "desktop",
@@ -1736,40 +1731,50 @@ function ConnectionsPageView({
       accent: "sky"
     }
   );
-  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: filteredConnections.map((conn) => /* @__PURE__ */ jsx(
-    EntityCard,
-    {
-      accentGradient: "from-sky-500 to-indigo-600",
-      icon: /* @__PURE__ */ jsx("div", { className: "flex h-11 w-11 items-center justify-center rounded-lg bg-sky-500/10 text-sky-600 dark:bg-sky-500/20 dark:text-sky-400", children: /* @__PURE__ */ jsx(LinkIcon, { className: "h-6 w-6" }) }),
-      title: conn.name,
-      subtitle: providerLabel(conn.providerSlug),
-      status: /* @__PURE__ */ jsxs("div", { className: "flex gap-1", children: [
-        /* @__PURE__ */ jsx(Badge, { color: conn.enabled ? "emerald" : "zinc", children: conn.enabled ? labels.enable : labels.disable }),
-        conn.credentialRef ? /* @__PURE__ */ jsx(Badge, { color: "indigo", children: "Secret set" }) : /* @__PURE__ */ jsx(Badge, { color: "amber", children: "No secret" })
-      ] }),
-      footer: /* @__PURE__ */ jsxs("div", { className: "flex gap-2", children: [
-        /* @__PURE__ */ jsx(Button, { type: "button", size: "sm", outline: true, onClick: () => setEditing(conn), children: labels.edit }),
-        /* @__PURE__ */ jsx(
-          Button,
-          {
-            type: "button",
-            size: "sm",
-            color: "rose",
-            onClick: async () => {
-              if (window.confirm(labels.deleteConfirm)) await onDelete(conn);
-            },
-            children: labels.delete
-          }
-        )
-      ] }),
-      children: /* @__PURE__ */ jsxs("dl", { className: "mt-1 space-y-0.5 text-xs text-slate-500 dark:text-slate-400", children: [
-        conn.region && /* @__PURE__ */ jsx(Row, { label: "Region", value: conn.region }),
-        conn.endpoint && /* @__PURE__ */ jsx(Row, { label: "Endpoint", value: conn.endpoint }),
-        conn.modelFilter && conn.modelFilter.length > 0 && /* @__PURE__ */ jsx(Row, { label: "Models", value: conn.modelFilter.join(", ") })
-      ] })
-    },
-    conn.id
-  )) });
+  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: filteredConnections.map((conn) => /* @__PURE__ */ jsx(
+      EntityCard,
+      {
+        accentGradient: "from-sky-500 to-indigo-600",
+        icon: /* @__PURE__ */ jsx("div", { className: "flex h-11 w-11 items-center justify-center rounded-lg bg-sky-500/10 text-sky-600 dark:bg-sky-500/20 dark:text-sky-400", children: /* @__PURE__ */ jsx(LinkIcon, { className: "h-6 w-6" }) }),
+        title: conn.name,
+        subtitle: providerLabel(conn.providerSlug),
+        status: /* @__PURE__ */ jsxs("div", { className: "flex gap-1", children: [
+          /* @__PURE__ */ jsx(Badge, { color: conn.enabled ? "emerald" : "zinc", children: conn.enabled ? labels.enable : labels.disable }),
+          conn.credentialRef ? /* @__PURE__ */ jsx(Badge, { color: "indigo", children: "Secret set" }) : /* @__PURE__ */ jsx(Badge, { color: "amber", children: "No secret" })
+        ] }),
+        footer: /* @__PURE__ */ jsxs("div", { className: "flex gap-2", children: [
+          /* @__PURE__ */ jsx(Button, { type: "button", size: "sm", outline: true, onClick: () => setEditing(conn), children: labels.edit }),
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              type: "button",
+              size: "sm",
+              color: "rose",
+              onClick: async () => {
+                if (window.confirm(labels.deleteConfirm)) await onDelete(conn);
+              },
+              children: labels.delete
+            }
+          )
+        ] }),
+        children: /* @__PURE__ */ jsxs("dl", { className: "mt-1 space-y-0.5 text-xs text-slate-500 dark:text-slate-400", children: [
+          conn.region && /* @__PURE__ */ jsx(Row, { label: "Region", value: conn.region }),
+          conn.endpoint && /* @__PURE__ */ jsx(Row, { label: "Endpoint", value: conn.endpoint }),
+          conn.modelFilter && conn.modelFilter.length > 0 && /* @__PURE__ */ jsx(Row, { label: "Models", value: conn.modelFilter.join(", ") })
+        ] })
+      },
+      conn.id
+    )) })
+  ] });
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx(ManagementPageLayout, { hero, content, mobileAction }),
     createOpen && /* @__PURE__ */ jsx(
@@ -2040,16 +2045,7 @@ function CredentialsPageView({ labels, credentials, loading, onCreate, onRotate,
       title: labels.title,
       subtitle: labels.subtitle,
       gradient: "from-rose-500 to-orange-600",
-      toolbar: !isEmpty ? /* @__PURE__ */ jsx(
-        SearchBar,
-        {
-          searchTerm,
-          onSearchChange: setSearchTerm,
-          placeholder: labels.searchPlaceholder ?? labels.title,
-          noBorder: true
-        }
-      ) : void 0,
-      actions: /* @__PURE__ */ jsx(
+      toolbar: /* @__PURE__ */ jsx(
         CreateActionButton,
         {
           mode: "desktop",
@@ -2069,50 +2065,60 @@ function CredentialsPageView({ labels, credentials, loading, onCreate, onRotate,
       accent: "rose"
     }
   );
-  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: filteredCredentials.map((secret) => /* @__PURE__ */ jsxs(
-    EntityCard,
-    {
-      accentGradient: "from-rose-500 to-orange-700",
-      icon: /* @__PURE__ */ jsx("div", { className: "flex h-11 w-11 items-center justify-center rounded-lg bg-rose-500/10 text-rose-600 dark:bg-rose-500/20 dark:text-rose-400", children: /* @__PURE__ */ jsx(KeyIcon, { className: "h-6 w-6" }) }),
-      title: secret.name,
-      subtitle: secret.secretType,
-      status: /* @__PURE__ */ jsx(Badge, { color: secret.disabled ? "zinc" : "emerald", children: secret.disabled ? labels.disable : "Active" }),
-      footer: /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-2", children: [
-        /* @__PURE__ */ jsx(CopyableId, { id: secret.secretId }),
-        /* @__PURE__ */ jsxs("div", { className: "flex gap-2", children: [
-          /* @__PURE__ */ jsxs(Button, { type: "button", size: "sm", outline: true, onClick: () => setRotateFor(secret), children: [
-            /* @__PURE__ */ jsx(ArrowPathIcon, { className: "mr-1 h-3.5 w-3.5" }),
-            labels.rotate
-          ] }),
-          !secret.disabled && /* @__PURE__ */ jsxs(
-            Button,
-            {
-              type: "button",
-              size: "sm",
-              color: "rose",
-              onClick: () => {
-                if (window.confirm(labels.disableConfirm)) onDisable(secret);
-              },
-              children: [
-                /* @__PURE__ */ jsx(TrashIcon, { className: "mr-1 h-3.5 w-3.5" }),
-                labels.disable
-              ]
-            }
-          )
-        ] })
-      ] }),
-      children: [
-        secret.description && /* @__PURE__ */ jsx("p", { className: "mt-1 text-xs text-slate-500 dark:text-slate-400", children: secret.description }),
-        /* @__PURE__ */ jsxs("dl", { className: "mt-2 grid grid-cols-2 gap-1 text-xs text-slate-500 dark:text-slate-400", children: [
-          /* @__PURE__ */ jsx("dt", { children: labels.createdAt }),
-          /* @__PURE__ */ jsx("dd", { className: "text-right", children: new Date(secret.createdAt).toLocaleDateString() }),
-          /* @__PURE__ */ jsx("dt", { children: labels.expiresAt }),
-          /* @__PURE__ */ jsx("dd", { className: "text-right", children: secret.expiresAt ? new Date(secret.expiresAt).toLocaleDateString() : labels.neverExpires })
-        ] })
-      ]
-    },
-    secret.secretId
-  )) });
+  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: filteredCredentials.map((secret) => /* @__PURE__ */ jsxs(
+      EntityCard,
+      {
+        accentGradient: "from-rose-500 to-orange-700",
+        icon: /* @__PURE__ */ jsx("div", { className: "flex h-11 w-11 items-center justify-center rounded-lg bg-rose-500/10 text-rose-600 dark:bg-rose-500/20 dark:text-rose-400", children: /* @__PURE__ */ jsx(KeyIcon, { className: "h-6 w-6" }) }),
+        title: secret.name,
+        subtitle: secret.secretType,
+        status: /* @__PURE__ */ jsx(Badge, { color: secret.disabled ? "zinc" : "emerald", children: secret.disabled ? labels.disable : "Active" }),
+        footer: /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-2", children: [
+          /* @__PURE__ */ jsx(CopyableId, { id: secret.secretId }),
+          /* @__PURE__ */ jsxs("div", { className: "flex gap-2", children: [
+            /* @__PURE__ */ jsxs(Button, { type: "button", size: "sm", outline: true, onClick: () => setRotateFor(secret), children: [
+              /* @__PURE__ */ jsx(ArrowPathIcon, { className: "mr-1 h-3.5 w-3.5" }),
+              labels.rotate
+            ] }),
+            !secret.disabled && /* @__PURE__ */ jsxs(
+              Button,
+              {
+                type: "button",
+                size: "sm",
+                color: "rose",
+                onClick: () => {
+                  if (window.confirm(labels.disableConfirm)) onDisable(secret);
+                },
+                children: [
+                  /* @__PURE__ */ jsx(TrashIcon, { className: "mr-1 h-3.5 w-3.5" }),
+                  labels.disable
+                ]
+              }
+            )
+          ] })
+        ] }),
+        children: [
+          secret.description && /* @__PURE__ */ jsx("p", { className: "mt-1 text-xs text-slate-500 dark:text-slate-400", children: secret.description }),
+          /* @__PURE__ */ jsxs("dl", { className: "mt-2 grid grid-cols-2 gap-1 text-xs text-slate-500 dark:text-slate-400", children: [
+            /* @__PURE__ */ jsx("dt", { children: labels.createdAt }),
+            /* @__PURE__ */ jsx("dd", { className: "text-right", children: new Date(secret.createdAt).toLocaleDateString() }),
+            /* @__PURE__ */ jsx("dt", { children: labels.expiresAt }),
+            /* @__PURE__ */ jsx("dd", { className: "text-right", children: secret.expiresAt ? new Date(secret.expiresAt).toLocaleDateString() : labels.neverExpires })
+          ] })
+        ]
+      },
+      secret.secretId
+    )) })
+  ] });
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx(ManagementPageLayout, { hero, content, mobileAction }),
     /* @__PURE__ */ jsx(