@datatechsolutions/ui 3.3.0 → 3.5.0

package/dist/platform/pages/index.mjs

@@ -1,26 +1,30 @@
 "use client";
 import { adaptWorkflowGraphToUi, formatDurationMs } from '../../chunk-UQXVCVAN.mjs';
-import { WorkflowWorkspace } from '../../chunk-O6M3KDGT.mjs';
-export { RolesPageView, UsersPageView } from '../../chunk-O6M3KDGT.mjs';
-import { DatasourceModal, findCategory, DIALECT_CATEGORIES } from '../../chunk-5RM6NGZ6.mjs';
-export { DIALECT_CATEGORIES, DatasourceFormModal, DatasourceModal, findCategory, findDialect } from '../../chunk-5RM6NGZ6.mjs';
-import { defaultRuleForm, RuleForm, ExecutionTimelinePanel } from '../../chunk-2WXRRQM3.mjs';
+import { WorkflowWorkspace } from '../../chunk-3OLYSMI5.mjs';
+export { RolesPageView, UsersPageView } from '../../chunk-3OLYSMI5.mjs';
+import { DatasourceModal, findCategory, DIALECT_CATEGORIES } from '../../chunk-UHMAKUON.mjs';
+export { DIALECT_CATEGORIES, DatasourceFormModal, DatasourceModal, findCategory, findDialect } from '../../chunk-UHMAKUON.mjs';
+import { defaultRuleForm, RuleForm, ExecutionTimelinePanel } from '../../chunk-2MJAHST4.mjs';
 import '../../chunk-JB6RNAD2.mjs';
 import '../../chunk-LEXBTVGM.mjs';
-import '../../chunk-PCYL4MII.mjs';
-import { HeroSection, 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-JN6IL6OH.mjs';
+import '../../chunk-OASC7NYV.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-NOHHZ6FM.mjs';
 import '../../chunk-D2JF6C3E.mjs';
-import '../../chunk-7VJ7CMMT.mjs';
 import { useLink } from '../../chunk-QWG2FMUN.mjs';
-import '../../chunk-ZV5EZXXO.mjs';
-import '../../chunk-SYNVNTLJ.mjs';
+import '../../chunk-RHRJXK5R.mjs';
+import '../../chunk-3AY5HIQ6.mjs';
+import '../../chunk-7VJ7CMMT.mjs';
 import '../../chunk-OZNTQROP.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';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { useState, useMemo, useEffect } from 'react';
 
 function AgentsModelsPageView({ labels, models, loading }) {
+  const [searchTerm, setSearchTerm] = useState("");
+  const allModels = models;
+  const filteredModels = searchTerm.trim() ? allModels.filter((model) => model.name.toLowerCase().includes(searchTerm.trim().toLowerCase())) : allModels;
+  const isEmpty = allModels.length === 0;
   const hero = /* @__PURE__ */ jsx(
     HeroSection,
     {
@@ -31,7 +35,15 @@ function AgentsModelsPageView({ labels, models, loading }) {
       gradient: "from-emerald-500 to-teal-700"
     }
   );
-  const content = loading ? /* @__PURE__ */ jsx(PageLoadingState, {}) : models.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: models.map((model) => /* @__PURE__ */ jsx(
+  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,
     {
       accentGradient: "from-emerald-500 to-teal-700",
@@ -42,7 +54,7 @@ function AgentsModelsPageView({ labels, models, loading }) {
     },
     model.id
   )) });
-  return /* @__PURE__ */ jsx(ManagementPageLayout, { hero, content });
+  return /* @__PURE__ */ jsx(ManagementPageLayout, { hero, summary, content });
 }
 function AgentsConfigPageView({ labels, agents, models, loading, onCreate, onUpdate, onDelete }) {
   const [editing, setEditing] = useState(null);
@@ -183,6 +195,7 @@ var LOCALE_OPTIONS = [
 ];
 function AgentsPromptsPageView({ labels, agents, prompts, loading, onCreate, onActivate, onDelete }) {
   const [createOpen, setCreateOpen] = useState(false);
+  const [searchTerm, setSearchTerm] = useState("");
   const agentOptions = useMemo(
     () => agents.map((agent) => ({
       value: String(agent.agentId ?? agent.id ?? ""),
@@ -226,7 +239,23 @@ function AgentsPromptsPageView({ labels, agents, prompts, loading, onCreate, onA
       accent: "sky"
     }
   );
-  const content = loading ? /* @__PURE__ */ jsx(PageLoadingState, {}) : prompts.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: prompts.map((prompt) => {
+  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}`;
     return /* @__PURE__ */ jsx(
@@ -258,7 +287,7 @@ function AgentsPromptsPageView({ labels, agents, prompts, loading, onCreate, onA
     );
   }) });
   return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(ManagementPageLayout, { hero, content, mobileAction }),
+    /* @__PURE__ */ jsx(ManagementPageLayout, { hero, summary, content, mobileAction }),
     /* @__PURE__ */ jsx(
       GlassModal,
       {
@@ -329,6 +358,18 @@ var PARAMETER_TYPE_OPTIONS = [
 function AgentsToolDefinitionsPageView({ labels, tools, loading, onCreate, onUpdate, onDelete }) {
   const [editing, setEditing] = useState(null);
   const [createOpen, setCreateOpen] = useState(false);
+  const [searchTerm, setSearchTerm] = useState("");
+  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,
     {
@@ -357,7 +398,7 @@ function AgentsToolDefinitionsPageView({ labels, tools, loading, onCreate, onUpd
       accent: "amber"
     }
   );
-  const content = loading ? /* @__PURE__ */ jsx(PageLoadingState, {}) : tools.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: tools.map((tool) => /* @__PURE__ */ jsx(
+  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",
@@ -385,7 +426,7 @@ function AgentsToolDefinitionsPageView({ labels, tools, loading, onCreate, onUpd
     tool.agentToolId
   )) });
   return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(ManagementPageLayout, { hero, content, mobileAction }),
+    /* @__PURE__ */ jsx(ManagementPageLayout, { hero, summary, content, mobileAction }),
     createOpen && /* @__PURE__ */ jsx(
       ToolEditor,
       {
@@ -871,6 +912,18 @@ function setFromJson(set, key, raw) {
 function RulesPageView({ labels, rules, loading, onCreate, onUpdate, onDelete }) {
   const [createOpen, setCreateOpen] = useState(false);
   const [editing, setEditing] = useState(null);
+  const [searchTerm, setSearchTerm] = useState("");
+  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,
     {
@@ -899,7 +952,7 @@ function RulesPageView({ labels, rules, loading, onCreate, onUpdate, onDelete })
       accent: "fuchsia"
     }
   );
-  const content = loading ? /* @__PURE__ */ jsx(PageLoadingState, {}) : rules.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: rules.map((rule) => /* @__PURE__ */ jsx(
+  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",
@@ -927,7 +980,7 @@ function RulesPageView({ labels, rules, loading, onCreate, onUpdate, onDelete })
     rule.ruleId
   )) });
   return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(ManagementPageLayout, { hero, content, mobileAction }),
+    /* @__PURE__ */ jsx(ManagementPageLayout, { hero, summary, content, mobileAction }),
     createOpen && /* @__PURE__ */ jsx(
       RuleEditor,
       {
@@ -1164,11 +1217,13 @@ function DatasourcesPageView({
   onCreate
 }) {
   const [modalOpen, setModalOpen] = useState(false);
+  const [searchTerm, setSearchTerm] = useState("");
   const [localDatasources, setLocalDatasources] = useState(
     useSampleData ? SAMPLE_DATASOURCES : []
   );
-  const datasources = externalDatasources ?? localDatasources;
-  const isEmpty = datasources.length === 0;
+  const allDatasources = externalDatasources ?? localDatasources;
+  const datasources = searchTerm.trim() ? allDatasources.filter((ds) => ds.name.toLowerCase().includes(searchTerm.trim().toLowerCase())) : allDatasources;
+  const isEmpty = allDatasources.length === 0;
   function handleCreate(data) {
     if (onCreate) {
       onCreate(data);
@@ -1221,6 +1276,14 @@ function DatasourcesPageView({
         accent: "amber"
       }
     ),
+    !isEmpty && /* @__PURE__ */ jsx(
+      SearchBar,
+      {
+        searchTerm,
+        onSearchChange: setSearchTerm,
+        placeholder: labels.searchPlaceholder ?? labels.title
+      }
+    ),
     isEmpty ? /* @__PURE__ */ jsx(
       PageEmptyState,
       {
@@ -1285,12 +1348,15 @@ function DashboardPageView({ labels, appLogo }) {
 }
 function AgentsIndexPageView({ labels }) {
   const Link = useLink();
-  const tiles = [
+  const [searchTerm, setSearchTerm] = useState("");
+  const allTiles = [
     { id: "config", title: labels.configTitle, subtitle: labels.configSubtitle, href: "/agents/config", gradient: "from-violet-500 to-indigo-700", icon: CpuChipIcon },
     { id: "tools", title: labels.toolDefinitionsTitle, subtitle: labels.toolDefinitionsSubtitle, href: "/agents/tool-definitions", gradient: "from-amber-500 to-orange-700", icon: WrenchScrewdriverIcon },
     { id: "models", title: labels.modelsTitle, subtitle: labels.modelsSubtitle, href: "/agents/models", gradient: "from-emerald-500 to-teal-700", icon: CubeTransparentIcon },
     { id: "prompts", title: labels.promptsTitle, subtitle: labels.promptsSubtitle, href: "/agents/prompts", gradient: "from-sky-500 to-blue-700", icon: ChatBubbleLeftEllipsisIcon }
   ];
+  const filteredTiles = searchTerm.trim() ? allTiles.filter((tile) => tile.title.toLowerCase().includes(searchTerm.trim().toLowerCase())) : allTiles;
+  const isEmpty = allTiles.length === 0;
   const hero = /* @__PURE__ */ jsx(
     HeroSection,
     {
@@ -1301,7 +1367,15 @@ function AgentsIndexPageView({ labels }) {
       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: tiles.map((tile) => {
+  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(
       EntityCard,
@@ -1313,7 +1387,7 @@ function AgentsIndexPageView({ labels }) {
       }
     ) }, tile.id);
   }) });
-  return /* @__PURE__ */ jsx(ManagementPageLayout, { hero, content });
+  return /* @__PURE__ */ jsx(ManagementPageLayout, { hero, summary, content });
 }
 function WorkflowsPageView({ labels, workflows, onCreate, onUpdateMeta, onPublish }) {
   const selectedWorkflow = workflows[0] ?? null;
@@ -1399,6 +1473,7 @@ var BADGE_COLOR = {
 };
 function WorkflowRunsPageView({ labels, runs, loading, onCancel, onReplay, onView, onViewTimeline }) {
   const [statusFilter, setStatusFilter] = useState("all");
+  const [searchTerm, setSearchTerm] = useState("");
   const statusOptions = useMemo(() => [
     { value: "all", label: labels.filterAll },
     { value: "pending", label: labels.statusPending },
@@ -1423,7 +1498,16 @@ function WorkflowRunsPageView({ labels, runs, loading, onCancel, onReplay, onVie
         return status;
     }
   };
-  const filteredRuns = statusFilter === "all" ? runs : runs.filter((run) => run.status === statusFilter);
+  const allRuns = runs;
+  const term = searchTerm.trim().toLowerCase();
+  const filteredRuns = allRuns.filter((run) => {
+    if (statusFilter !== "all" && run.status !== statusFilter) return false;
+    if (term && !run.id.toLowerCase().includes(term) && !run.workflowId.toLowerCase().includes(term)) {
+      return false;
+    }
+    return true;
+  });
+  const isEmpty = allRuns.length === 0;
   const hero = /* @__PURE__ */ jsx(
     HeroSection,
     {
@@ -1444,6 +1528,14 @@ function WorkflowRunsPageView({ labels, runs, loading, onCancel, onReplay, onVie
       ) })
     }
   );
+  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,
     {
@@ -1470,7 +1562,7 @@ function WorkflowRunsPageView({ labels, runs, loading, onCancel, onReplay, onVie
     },
     run.id
   )) });
-  return /* @__PURE__ */ jsx(ManagementPageLayout, { hero, content });
+  return /* @__PURE__ */ jsx(ManagementPageLayout, { hero, summary, content });
 }
 function RunTimelinePageView({ labels, entries, loading, runId }) {
   const hero = /* @__PURE__ */ jsx(
@@ -1581,6 +1673,18 @@ function ConnectionsPageView({
 }) {
   const [createOpen, setCreateOpen] = useState(false);
   const [editing, setEditing] = useState(null);
+  const [searchTerm, setSearchTerm] = useState("");
+  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,
     {
@@ -1609,7 +1713,7 @@ function ConnectionsPageView({
       accent: "sky"
     }
   );
-  const content = loading ? /* @__PURE__ */ jsx(PageLoadingState, {}) : connections.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: connections.map((conn) => /* @__PURE__ */ jsx(
+  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",
@@ -1644,7 +1748,7 @@ function ConnectionsPageView({
     conn.id
   )) });
   return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(ManagementPageLayout, { hero, content, mobileAction }),
+    /* @__PURE__ */ jsx(ManagementPageLayout, { hero, summary, content, mobileAction }),
     createOpen && /* @__PURE__ */ jsx(
       ConnectionEditor,
       {
@@ -1895,6 +1999,18 @@ function modelToFormValue(conn) {
 function CredentialsPageView({ labels, credentials, loading, onCreate, onRotate, onDisable }) {
   const [createOpen, setCreateOpen] = useState(false);
   const [rotateFor, setRotateFor] = useState(null);
+  const [searchTerm, setSearchTerm] = useState("");
+  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 },
@@ -1929,7 +2045,7 @@ function CredentialsPageView({ labels, credentials, loading, onCreate, onRotate,
       accent: "rose"
     }
   );
-  const content = loading ? /* @__PURE__ */ jsx(PageLoadingState, {}) : credentials.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: credentials.map((secret) => /* @__PURE__ */ jsxs(
+  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",
@@ -1974,7 +2090,7 @@ function CredentialsPageView({ labels, credentials, loading, onCreate, onRotate,
     secret.secretId
   )) });
   return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(ManagementPageLayout, { hero, content, mobileAction }),
+    /* @__PURE__ */ jsx(ManagementPageLayout, { hero, summary, content, mobileAction }),
     /* @__PURE__ */ jsx(
       GlassModal,
       {