@datatechsolutions/ui 3.5.1 → 3.6.0

package/dist/platform/pages/index.mjs

@@ -1,14 +1,14 @@
 "use client";
 import { adaptWorkflowGraphToUi, formatDurationMs } from '../../chunk-UQXVCVAN.mjs';
-import { WorkflowWorkspace } from '../../chunk-CDYNTHUE.mjs';
-export { RolesPageView, UsersPageView } from '../../chunk-CDYNTHUE.mjs';
-import { DatasourceModal, findCategory, DIALECT_CATEGORIES } from '../../chunk-2TBNOQ7M.mjs';
-export { DIALECT_CATEGORIES, DatasourceFormModal, DatasourceModal, findCategory, findDialect } from '../../chunk-2TBNOQ7M.mjs';
-import { defaultRuleForm, RuleForm, ExecutionTimelinePanel } from '../../chunk-EGXB3WXT.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 '../../chunk-JB6RNAD2.mjs';
 import '../../chunk-LEXBTVGM.mjs';
-import '../../chunk-WKCR4KVQ.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-EUXHJMGC.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-7VJ7CMMT.mjs';
 import { useLink } from '../../chunk-QWG2FMUN.mjs';
@@ -32,17 +32,18 @@ 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 summary = !isEmpty ? /* @__PURE__ */ jsx(
-    SearchBar,
-    {
-      searchTerm,
-      onSearchChange: setSearchTerm,
-      placeholder: labels.searchPlaceholder ?? labels.title
-    }
-  ) : void 0;
   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,
     {
@@ -54,12 +55,16 @@ function AgentsModelsPageView({ labels, models, loading }) {
     },
     model.id
   )) });
-  return /* @__PURE__ */ jsx(ManagementPageLayout, { hero, summary, content });
+  return /* @__PURE__ */ jsx(ManagementPageLayout, { hero, content });
 }
 function AgentsConfigPageView({ labels, agents, models, loading, onCreate, onUpdate, onDelete }) {
   const [editing, setEditing] = useState(null);
   const [createOpen, setCreateOpen] = useState(false);
+  const [searchTerm, setSearchTerm] = useState("");
   const modelOptions = models.map((model) => ({ value: model.id, label: `${model.name} (${model.provider})` }));
+  const allAgents = agents;
+  const filteredAgents = searchTerm.trim() ? allAgents.filter((agent) => String(agent.name ?? "").toLowerCase().includes(searchTerm.trim().toLowerCase())) : allAgents;
+  const isEmpty = allAgents.length === 0;
   const hero = /* @__PURE__ */ jsx(
     HeroSection,
     {
@@ -68,7 +73,16 @@ function AgentsConfigPageView({ labels, agents, models, loading, onCreate, onUpd
       title: labels.title,
       subtitle: labels.subtitle,
       gradient: "from-violet-500 to-indigo-700",
-      toolbar: /* @__PURE__ */ jsx(
+      toolbar: !isEmpty ? /* @__PURE__ */ jsx(
+        SearchBar,
+        {
+          searchTerm,
+          onSearchChange: setSearchTerm,
+          placeholder: labels.searchPlaceholder ?? labels.title,
+          noBorder: true
+        }
+      ) : void 0,
+      actions: /* @__PURE__ */ jsx(
         CreateActionButton,
         {
           mode: "desktop",
@@ -88,7 +102,7 @@ function AgentsConfigPageView({ labels, agents, models, loading, onCreate, onUpd
       accent: "violet"
     }
   );
-  const content = loading ? /* @__PURE__ */ jsx(PageLoadingState, {}) : agents.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: agents.map((agent) => {
+  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: filteredAgents.map((agent) => {
     const modelRecord = models.find((model) => model.id === String(agent.modelId ?? ""));
     return /* @__PURE__ */ jsx(
       EntityCard,
@@ -211,6 +225,14 @@ function AgentsPromptsPageView({ labels, agents, prompts, loading, onCreate, onA
     }
     return map;
   }, [agents]);
+  const allPrompts = prompts;
+  const filteredPrompts = searchTerm.trim() ? allPrompts.filter((prompt) => {
+    const term = searchTerm.trim().toLowerCase();
+    const agentName = agentNameById.get(prompt.agentId) ?? prompt.agentId;
+    const promptText = prompt.prompt ?? "";
+    return agentName.toLowerCase().includes(term) || promptText.toLowerCase().includes(term);
+  }) : allPrompts;
+  const isEmpty = allPrompts.length === 0;
   const hero = /* @__PURE__ */ jsx(
     HeroSection,
     {
@@ -219,7 +241,16 @@ function AgentsPromptsPageView({ labels, agents, prompts, loading, onCreate, onA
       title: labels.title,
       subtitle: labels.subtitle,
       gradient: "from-sky-500 to-blue-700",
-      toolbar: /* @__PURE__ */ jsx(
+      toolbar: !isEmpty ? /* @__PURE__ */ jsx(
+        SearchBar,
+        {
+          searchTerm,
+          onSearchChange: setSearchTerm,
+          placeholder: labels.searchPlaceholder ?? labels.title,
+          noBorder: true
+        }
+      ) : void 0,
+      actions: /* @__PURE__ */ jsx(
         CreateActionButton,
         {
           mode: "desktop",
@@ -239,22 +270,6 @@ function AgentsPromptsPageView({ labels, agents, prompts, loading, onCreate, onA
       accent: "sky"
     }
   );
-  const allPrompts = prompts;
-  const filteredPrompts = searchTerm.trim() ? allPrompts.filter((prompt) => {
-    const term = searchTerm.trim().toLowerCase();
-    const agentName = agentNameById.get(prompt.agentId) ?? prompt.agentId;
-    const promptText = prompt.prompt ?? "";
-    return agentName.toLowerCase().includes(term) || promptText.toLowerCase().includes(term);
-  }) : allPrompts;
-  const isEmpty = allPrompts.length === 0;
-  const summary = !isEmpty ? /* @__PURE__ */ jsx(
-    SearchBar,
-    {
-      searchTerm,
-      onSearchChange: setSearchTerm,
-      placeholder: labels.searchPlaceholder ?? labels.title
-    }
-  ) : void 0;
   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}`;
@@ -287,7 +302,7 @@ function AgentsPromptsPageView({ labels, agents, prompts, loading, onCreate, onA
     );
   }) });
   return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(ManagementPageLayout, { hero, summary, content, mobileAction }),
+    /* @__PURE__ */ jsx(ManagementPageLayout, { hero, content, mobileAction }),
     /* @__PURE__ */ jsx(
       GlassModal,
       {
@@ -362,14 +377,6 @@ function AgentsToolDefinitionsPageView({ labels, tools, loading, onCreate, onUpd
   const allTools = tools;
   const filteredTools = searchTerm.trim() ? allTools.filter((tool) => tool.name.toLowerCase().includes(searchTerm.trim().toLowerCase())) : allTools;
   const isEmpty = allTools.length === 0;
-  const summary = !isEmpty ? /* @__PURE__ */ jsx(
-    SearchBar,
-    {
-      searchTerm,
-      onSearchChange: setSearchTerm,
-      placeholder: labels.searchPlaceholder ?? labels.title
-    }
-  ) : void 0;
   const hero = /* @__PURE__ */ jsx(
     HeroSection,
     {
@@ -378,7 +385,16 @@ function AgentsToolDefinitionsPageView({ labels, tools, loading, onCreate, onUpd
       title: labels.title,
       subtitle: labels.subtitle,
       gradient: "from-amber-500 to-orange-700",
-      toolbar: /* @__PURE__ */ jsx(
+      toolbar: !isEmpty ? /* @__PURE__ */ jsx(
+        SearchBar,
+        {
+          searchTerm,
+          onSearchChange: setSearchTerm,
+          placeholder: labels.searchPlaceholder ?? labels.title,
+          noBorder: true
+        }
+      ) : void 0,
+      actions: /* @__PURE__ */ jsx(
         CreateActionButton,
         {
           mode: "desktop",
@@ -426,7 +442,7 @@ function AgentsToolDefinitionsPageView({ labels, tools, loading, onCreate, onUpd
     tool.agentToolId
   )) });
   return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(ManagementPageLayout, { hero, summary, content, mobileAction }),
+    /* @__PURE__ */ jsx(ManagementPageLayout, { hero, content, mobileAction }),
     createOpen && /* @__PURE__ */ jsx(
       ToolEditor,
       {
@@ -611,14 +627,14 @@ function ParametersEditor({
             onValueChange: (description) => update(index, { description })
           }
         ),
-        /* @__PURE__ */ jsxs("label", { className: "flex items-center gap-2 pb-2 text-xs text-gray-700 dark:text-gray-300", children: [
+        /* @__PURE__ */ jsxs("label", { className: "flex items-center gap-2 pb-2 text-xs text-slate-700 dark:text-slate-300", children: [
           /* @__PURE__ */ jsx(
             "input",
             {
               type: "checkbox",
               checked: param.required,
               onChange: (event) => update(index, { required: event.target.checked }),
-              className: "h-4 w-4 rounded border-gray-300"
+              className: "h-4 w-4 rounded border-slate-300 text-indigo-600 focus:ring-2 focus:ring-indigo-500/70 focus:ring-offset-1 dark:border-white/15 dark:bg-white/[0.08]"
             }
           ),
           "Required"
@@ -916,14 +932,6 @@ function RulesPageView({ labels, rules, loading, onCreate, onUpdate, onDelete })
   const allRules = rules;
   const filteredRules = searchTerm.trim() ? allRules.filter((rule) => (rule.name ?? "").toLowerCase().includes(searchTerm.trim().toLowerCase())) : allRules;
   const isEmpty = allRules.length === 0;
-  const summary = !isEmpty ? /* @__PURE__ */ jsx(
-    SearchBar,
-    {
-      searchTerm,
-      onSearchChange: setSearchTerm,
-      placeholder: labels.searchPlaceholder ?? labels.title
-    }
-  ) : void 0;
   const hero = /* @__PURE__ */ jsx(
     HeroSection,
     {
@@ -932,7 +940,16 @@ function RulesPageView({ labels, rules, loading, onCreate, onUpdate, onDelete })
       title: labels.title,
       subtitle: labels.subtitle,
       gradient: "from-fuchsia-500 to-purple-700",
-      toolbar: /* @__PURE__ */ jsx(
+      toolbar: !isEmpty ? /* @__PURE__ */ jsx(
+        SearchBar,
+        {
+          searchTerm,
+          onSearchChange: setSearchTerm,
+          placeholder: labels.searchPlaceholder ?? labels.title,
+          noBorder: true
+        }
+      ) : void 0,
+      actions: /* @__PURE__ */ jsx(
         CreateActionButton,
         {
           mode: "desktop",
@@ -980,7 +997,7 @@ function RulesPageView({ labels, rules, loading, onCreate, onUpdate, onDelete })
     rule.ruleId
   )) });
   return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(ManagementPageLayout, { hero, summary, content, mobileAction }),
+    /* @__PURE__ */ jsx(ManagementPageLayout, { hero, content, mobileAction }),
     createOpen && /* @__PURE__ */ jsx(
       RuleEditor,
       {
@@ -1256,7 +1273,16 @@ function DatasourcesPageView({
         title: labels.title,
         subtitle: labels.subtitle,
         gradient: "from-amber-500 to-orange-600",
-        toolbar: /* @__PURE__ */ jsx(
+        toolbar: !isEmpty ? /* @__PURE__ */ jsx(
+          SearchBar,
+          {
+            searchTerm,
+            onSearchChange: setSearchTerm,
+            placeholder: labels.searchPlaceholder ?? labels.title,
+            noBorder: true
+          }
+        ) : void 0,
+        actions: /* @__PURE__ */ jsx(
           CreateActionButton,
           {
             mode: "desktop",
@@ -1276,14 +1302,6 @@ function DatasourcesPageView({
         accent: "amber"
       }
     ),
-    !isEmpty && /* @__PURE__ */ jsx(
-      SearchBar,
-      {
-        searchTerm,
-        onSearchChange: setSearchTerm,
-        placeholder: labels.searchPlaceholder ?? labels.title
-      }
-    ),
     isEmpty ? /* @__PURE__ */ jsx(
       PageEmptyState,
       {
@@ -1297,7 +1315,7 @@ function DatasourcesPageView({
       const gradient = getDialectGradient(ds.dialect);
       const dialectLabel = getDialectLabel(ds.dialect);
       const logoSrc = getDialectLogoSrc(ds.dialect);
-      const iconElement = logoSrc ? /* @__PURE__ */ jsx("div", { className: "flex h-11 w-11 items-center justify-center rounded-lg bg-white shadow-sm ring-1 ring-black/5 dark:bg-white/10 dark:ring-white/10", children: /* @__PURE__ */ jsx("img", { src: logoSrc, alt: dialectLabel, className: "h-7 w-7 object-contain" }) }) : /* @__PURE__ */ jsx("div", { className: `flex h-11 w-11 items-center justify-center rounded-lg bg-gradient-to-br ${gradient} shadow-lg`, children: /* @__PURE__ */ jsx(Icon, { className: "h-6 w-6 text-white" }) });
+      const iconElement = logoSrc ? /* @__PURE__ */ jsx("div", { className: "liquid-surface flex h-11 w-11 items-center justify-center rounded-lg", children: /* @__PURE__ */ jsx("img", { src: logoSrc, alt: dialectLabel, className: "h-7 w-7 object-contain" }) }) : /* @__PURE__ */ jsx("div", { className: `flex h-11 w-11 items-center justify-center rounded-lg bg-gradient-to-br ${gradient} shadow-lg`, children: /* @__PURE__ */ jsx(Icon, { className: "h-6 w-6 text-white" }) });
       return /* @__PURE__ */ jsx(
         EntityCard,
         {
@@ -1306,20 +1324,20 @@ function DatasourcesPageView({
           title: ds.name ?? ds.id,
           subtitle: dialectLabel,
           status: /* @__PURE__ */ jsx(Badge, { color: ds.enabled ? "emerald" : "zinc", children: ds.enabled ? labels.enabled : labels.disabled }),
-          footer: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 text-xs text-gray-400 dark:text-gray-500", children: [
+          footer: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 text-xs text-slate-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.timeoutMs && /* @__PURE__ */ jsxs("span", { children: [
               ds.timeoutMs / 1e3,
               "s timeout"
             ] })
           ] }),
-          children: /* @__PURE__ */ jsxs("div", { className: "mt-2 text-xs text-gray-500 dark:text-gray-400", children: [
+          children: /* @__PURE__ */ jsxs("div", { className: "mt-2 text-xs text-slate-500 dark:text-slate-400", children: [
             /* @__PURE__ */ jsxs("div", { children: [
               labels.dialect,
               ": ",
               dialectLabel
             ] }),
-            ds.slug && /* @__PURE__ */ jsxs("div", { className: "truncate text-gray-400", children: [
+            ds.slug && /* @__PURE__ */ jsxs("div", { className: "truncate text-slate-400 dark:text-slate-500", children: [
               "/",
               ds.slug
             ] })
@@ -1342,7 +1360,7 @@ function DatasourcesPageView({
 function DashboardPageView({ labels, appLogo }) {
   const hero = /* @__PURE__ */ jsxs("div", { className: "w-full text-center", children: [
     /* @__PURE__ */ jsx("div", { className: "flex justify-center mb-6", children: appLogo }),
-    /* @__PURE__ */ jsx("p", { className: "mt-3 text-base text-gray-500 dark:text-gray-400", children: labels.subtitle })
+    /* @__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 });
 }
@@ -1364,17 +1382,18 @@ 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 summary = !isEmpty ? /* @__PURE__ */ jsx(
-    SearchBar,
-    {
-      searchTerm,
-      onSearchChange: setSearchTerm,
-      placeholder: labels.searchPlaceholder ?? labels.title
-    }
-  ) : void 0;
   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(
@@ -1387,7 +1406,7 @@ function AgentsIndexPageView({ labels }) {
       }
     ) }, tile.id);
   }) });
-  return /* @__PURE__ */ jsx(ManagementPageLayout, { hero, summary, content });
+  return /* @__PURE__ */ jsx(ManagementPageLayout, { hero, content });
 }
 function WorkflowsPageView({ labels, workflows, onCreate, onUpdateMeta, onPublish }) {
   const selectedWorkflow = workflows[0] ?? null;
@@ -1516,26 +1535,29 @@ 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-48", children: /* @__PURE__ */ jsx(
-        FormSelect,
-        {
-          name: "statusFilter",
-          label: labels.filterStatus,
-          options: statusOptions,
-          value: statusFilter,
-          onValueChange: setStatusFilter
-        }
-      ) })
+      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
+          }
+        ) })
+      ] })
     }
   );
-  const summary = !isEmpty ? /* @__PURE__ */ jsx(
-    SearchBar,
-    {
-      searchTerm,
-      onSearchChange: setSearchTerm,
-      placeholder: labels.searchPlaceholder ?? labels.title
-    }
-  ) : void 0;
   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,
     {
@@ -1562,7 +1584,7 @@ function WorkflowRunsPageView({ labels, runs, loading, onCancel, onReplay, onVie
     },
     run.id
   )) });
-  return /* @__PURE__ */ jsx(ManagementPageLayout, { hero, summary, content });
+  return /* @__PURE__ */ jsx(ManagementPageLayout, { hero, content });
 }
 function RunTimelinePageView({ labels, entries, loading, runId }) {
   const hero = /* @__PURE__ */ jsx(
@@ -1677,14 +1699,6 @@ function ConnectionsPageView({
   const allConnections = connections;
   const filteredConnections = searchTerm.trim() ? allConnections.filter((conn) => conn.name.toLowerCase().includes(searchTerm.trim().toLowerCase())) : allConnections;
   const isEmpty = allConnections.length === 0;
-  const summary = !isEmpty ? /* @__PURE__ */ jsx(
-    SearchBar,
-    {
-      searchTerm,
-      onSearchChange: setSearchTerm,
-      placeholder: labels.searchPlaceholder ?? labels.title
-    }
-  ) : void 0;
   const hero = /* @__PURE__ */ jsx(
     HeroSection,
     {
@@ -1693,7 +1707,16 @@ function ConnectionsPageView({
       title: labels.title,
       subtitle: labels.subtitle,
       gradient: "from-sky-500 to-indigo-600",
-      toolbar: /* @__PURE__ */ jsx(
+      toolbar: !isEmpty ? /* @__PURE__ */ jsx(
+        SearchBar,
+        {
+          searchTerm,
+          onSearchChange: setSearchTerm,
+          placeholder: labels.searchPlaceholder ?? labels.title,
+          noBorder: true
+        }
+      ) : void 0,
+      actions: /* @__PURE__ */ jsx(
         CreateActionButton,
         {
           mode: "desktop",
@@ -1748,7 +1771,7 @@ function ConnectionsPageView({
     conn.id
   )) });
   return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(ManagementPageLayout, { hero, summary, content, mobileAction }),
+    /* @__PURE__ */ jsx(ManagementPageLayout, { hero, content, mobileAction }),
     createOpen && /* @__PURE__ */ jsx(
       ConnectionEditor,
       {
@@ -2003,14 +2026,6 @@ function CredentialsPageView({ labels, credentials, loading, onCreate, onRotate,
   const allCredentials = credentials;
   const filteredCredentials = searchTerm.trim() ? allCredentials.filter((secret) => secret.name.toLowerCase().includes(searchTerm.trim().toLowerCase())) : allCredentials;
   const isEmpty = allCredentials.length === 0;
-  const summary = !isEmpty ? /* @__PURE__ */ jsx(
-    SearchBar,
-    {
-      searchTerm,
-      onSearchChange: setSearchTerm,
-      placeholder: labels.searchPlaceholder ?? labels.title
-    }
-  ) : void 0;
   const typeOptions = [
     { value: "generic", label: labels.typeGeneric },
     { value: "api_key", label: labels.typeApiKey },
@@ -2025,7 +2040,16 @@ function CredentialsPageView({ labels, credentials, loading, onCreate, onRotate,
       title: labels.title,
       subtitle: labels.subtitle,
       gradient: "from-rose-500 to-orange-600",
-      toolbar: /* @__PURE__ */ jsx(
+      toolbar: !isEmpty ? /* @__PURE__ */ jsx(
+        SearchBar,
+        {
+          searchTerm,
+          onSearchChange: setSearchTerm,
+          placeholder: labels.searchPlaceholder ?? labels.title,
+          noBorder: true
+        }
+      ) : void 0,
+      actions: /* @__PURE__ */ jsx(
         CreateActionButton,
         {
           mode: "desktop",
@@ -2090,7 +2114,7 @@ function CredentialsPageView({ labels, credentials, loading, onCreate, onRotate,
     secret.secretId
   )) });
   return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(ManagementPageLayout, { hero, summary, content, mobileAction }),
+    /* @__PURE__ */ jsx(ManagementPageLayout, { hero, content, mobileAction }),
     /* @__PURE__ */ jsx(
       GlassModal,
       {