@datatechsolutions/ui 3.11.2 → 3.13.0

package/dist/platform/pages/index.mjs

@@ -1,19 +1,19 @@
 "use client";
 import { adaptWorkflowGraphToUi, formatDurationMs } from '../../chunk-UQXVCVAN.mjs';
-import { WorkflowWorkspace } from '../../chunk-TZA5T4MJ.mjs';
-export { RolesPageView, UsersPageView } from '../../chunk-TZA5T4MJ.mjs';
-import { DatasourceModal, findDialect, findCategory, DIALECT_CATEGORIES } from '../../chunk-KGC5CRS7.mjs';
-export { DIALECT_CATEGORIES, DatasourceFormModal, DatasourceModal, findCategory, findDialect } from '../../chunk-KGC5CRS7.mjs';
-import { defaultRuleForm, RuleForm, ExecutionTimelinePanel, defaultRuleCondition, defaultRuleAction, RuleConditionBuilder, RuleActionBuilder } from '../../chunk-5TJR3VJ6.mjs';
+import { WorkflowWorkspace } from '../../chunk-VIB42VMZ.mjs';
+export { RolesPageView, UsersPageView } from '../../chunk-VIB42VMZ.mjs';
+import { DIALECT_CATEGORIES, DatasourceModal, findDialect, findCategory } from '../../chunk-KWH7JIRP.mjs';
+export { DIALECT_CATEGORIES, DatasourceFormModal, DatasourceModal, findCategory, findDialect } from '../../chunk-KWH7JIRP.mjs';
+import { defaultRuleForm, RuleForm, ExecutionTimelinePanel, defaultRuleCondition, defaultRuleAction, RuleConditionBuilder, RuleActionBuilder } from '../../chunk-UPYACFZJ.mjs';
 import '../../chunk-JB6RNAD2.mjs';
 import '../../chunk-LEXBTVGM.mjs';
-import '../../chunk-JBXNEOFB.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-D5FL3ZHC.mjs';
-import '../../chunk-7VJ7CMMT.mjs';
+import '../../chunk-UXHJS2SH.mjs';
+import { HeroSection, SearchBar, FormSection, ChipPicker, 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, FormCheckbox, SegmentedControl, DatePicker, TimePicker } from '../../chunk-MSKKNPRE.mjs';
+import '../../chunk-ZEFNBGYI.mjs';
 import '../../chunk-NBW6WJQT.mjs';
 import '../../chunk-3AY5HIQ6.mjs';
 import '../../chunk-PLTLRL2V.mjs';
-import { Badge, Button } from '../../chunk-WR55H7DH.mjs';
+import { Button, Badge } from '../../chunk-WR55H7DH.mjs';
 import '../../chunk-D2JF6C3E.mjs';
 import { useLink } from '../../chunk-QWG2FMUN.mjs';
 import '../../chunk-G7JQ4OCE.mjs';
@@ -23,9 +23,52 @@ import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 
 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 [filtersOpen, setFiltersOpen] = useState(false);
+  const [selectedProviders, setSelectedProviders] = useState([]);
+  const [enabledFilter, setEnabledFilter] = useState("all");
+  const isEmpty = models.length === 0;
+  const filteredModels = useMemo(() => {
+    const term = searchTerm.trim().toLowerCase();
+    return models.filter((model) => {
+      if (term && !model.name.toLowerCase().includes(term)) return false;
+      if (selectedProviders.length > 0 && !selectedProviders.includes(model.provider)) return false;
+      if (enabledFilter === "enabled" && !model.enabled) return false;
+      if (enabledFilter === "disabled" && model.enabled) return false;
+      return true;
+    });
+  }, [models, searchTerm, selectedProviders, enabledFilter]);
+  const providerChipItems = useMemo(
+    () => [...new Set(models.map((m) => m.provider))].sort().map((p) => ({
+      id: p,
+      name: p,
+      style: { bg: "bg-emerald-500/15 text-emerald-700 dark:text-emerald-300", text: "" }
+    })),
+    [models]
+  );
+  const statusLabelFor = (value) => {
+    if (value === "enabled") return labels.statusEnabled ?? labels.enabled;
+    if (value === "disabled") return labels.statusDisabled ?? labels.disabled;
+    return labels.statusAll ?? "Todos";
+  };
+  const activeFilters = useMemo(() => {
+    const chips = [];
+    for (const value of selectedProviders) {
+      chips.push({ type: "provider", value, label: providerChipItems.find((i) => i.id === value)?.name ?? value });
+    }
+    if (enabledFilter !== "all") {
+      chips.push({ type: "enabled", value: enabledFilter, label: statusLabelFor(enabledFilter) });
+    }
+    return chips;
+  }, [selectedProviders, enabledFilter, providerChipItems]);
+  const filterCount = activeFilters.length;
+  const removeFilter = (filter) => {
+    if (filter.type === "provider") setSelectedProviders((prev) => prev.filter((v) => v !== filter.value));
+    if (filter.type === "enabled") setEnabledFilter("all");
+  };
+  const clearAllFilters = () => {
+    setSelectedProviders([]);
+    setEnabledFilter("all");
+  };
   const hero = /* @__PURE__ */ jsx(
     HeroSection,
     {
@@ -40,7 +83,32 @@ function AgentsModelsPageView({ labels, models, loading }) {
           searchTerm,
           onSearchChange: setSearchTerm,
           placeholder: labels.searchPlaceholder ?? labels.title,
-          noBorder: true
+          noBorder: true,
+          activeFilters,
+          onRemoveFilter: removeFilter,
+          onClearAll: filterCount > 0 ? clearAllFilters : void 0,
+          filtersModal: {
+            open: filtersOpen,
+            onOpen: () => setFiltersOpen(true),
+            onClose: () => setFiltersOpen(false),
+            title: labels.filtersTitle ?? "Filtros",
+            count: filterCount,
+            onClear: filterCount > 0 ? clearAllFilters : void 0,
+            children: /* @__PURE__ */ jsxs("div", { className: "space-y-5", children: [
+              providerChipItems.length > 0 && /* @__PURE__ */ jsx(FormSection, { title: labels.filterByProvider ?? "Provedor", children: /* @__PURE__ */ jsx(
+                ChipPicker,
+                {
+                  items: providerChipItems,
+                  selectedIds: selectedProviders,
+                  onChange: setSelectedProviders,
+                  selectedLabel: labels.selected ?? "selecionados",
+                  selectAllLabel: labels.selectAll ?? "Selecionar todos",
+                  clearLabel: labels.clear ?? "Limpar"
+                }
+              ) }),
+              /* @__PURE__ */ jsx(FormSection, { title: labels.filterByStatus ?? "Status", children: /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-2", children: ["all", "enabled", "disabled"].map((value) => enabledFilter === value ? /* @__PURE__ */ jsx(Button, { type: "button", size: "sm", color: "ios-glass-blue", onClick: () => setEnabledFilter(value), children: statusLabelFor(value) }, value) : /* @__PURE__ */ jsx(Button, { type: "button", size: "sm", outline: true, onClick: () => setEnabledFilter(value), children: statusLabelFor(value) }, value)) }) })
+            ] })
+          }
         }
       ) : void 0
     }
@@ -65,10 +133,55 @@ function AgentsConfigPageView({ labels, agents, models, loading, onCreate, onUpd
   const [editing, setEditing] = useState(null);
   const [createOpen, setCreateOpen] = useState(false);
   const [searchTerm, setSearchTerm] = useState("");
+  const [filtersOpen, setFiltersOpen] = useState(false);
+  const [selectedModelIds, setSelectedModelIds] = useState([]);
+  const [hasActiveVersion, setHasActiveVersion] = useState("all");
+  const isEmpty = agents.length === 0;
   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 filteredAgents = useMemo(() => {
+    const term = searchTerm.trim().toLowerCase();
+    return agents.filter((agent) => {
+      const name = String(agent.name ?? "").toLowerCase();
+      if (term && !name.includes(term)) return false;
+      const modelId = String(agent.modelId ?? "");
+      if (selectedModelIds.length > 0 && !selectedModelIds.includes(modelId)) return false;
+      if (hasActiveVersion === "with" && !(agent.activePromptVersion > 0)) return false;
+      if (hasActiveVersion === "without" && agent.activePromptVersion > 0) return false;
+      return true;
+    });
+  }, [agents, searchTerm, selectedModelIds, hasActiveVersion]);
+  const modelChipItems = useMemo(
+    () => models.map((m) => ({
+      id: m.id,
+      name: m.name,
+      style: { bg: "bg-violet-500/15 text-violet-700 dark:text-violet-300", text: "" }
+    })),
+    [models]
+  );
+  const versionLabelFor = (value) => {
+    if (value === "with") return labels.versionWith ?? "Com vers\xE3o ativa";
+    if (value === "without") return labels.versionWithout ?? "Sem vers\xE3o ativa";
+    return labels.versionAll ?? "Todos";
+  };
+  const activeFilters = useMemo(() => {
+    const chips = [];
+    for (const value of selectedModelIds) {
+      chips.push({ type: "model", value, label: modelChipItems.find((i) => i.id === value)?.name ?? value });
+    }
+    if (hasActiveVersion !== "all") {
+      chips.push({ type: "activeVersion", value: hasActiveVersion, label: versionLabelFor(hasActiveVersion) });
+    }
+    return chips;
+  }, [selectedModelIds, hasActiveVersion, modelChipItems]);
+  const filterCount = activeFilters.length;
+  const removeFilter = (filter) => {
+    if (filter.type === "model") setSelectedModelIds((prev) => prev.filter((v) => v !== filter.value));
+    if (filter.type === "activeVersion") setHasActiveVersion("all");
+  };
+  const clearAllFilters = () => {
+    setSelectedModelIds([]);
+    setHasActiveVersion("all");
+  };
   const hero = /* @__PURE__ */ jsx(
     HeroSection,
     {
@@ -83,7 +196,32 @@ function AgentsConfigPageView({ labels, agents, models, loading, onCreate, onUpd
           searchTerm,
           onSearchChange: setSearchTerm,
           placeholder: labels.searchPlaceholder ?? labels.title,
-          noBorder: true
+          noBorder: true,
+          activeFilters,
+          onRemoveFilter: removeFilter,
+          onClearAll: filterCount > 0 ? clearAllFilters : void 0,
+          filtersModal: {
+            open: filtersOpen,
+            onOpen: () => setFiltersOpen(true),
+            onClose: () => setFiltersOpen(false),
+            title: labels.filtersTitle ?? "Filtros",
+            count: filterCount,
+            onClear: filterCount > 0 ? clearAllFilters : void 0,
+            children: /* @__PURE__ */ jsxs("div", { className: "space-y-5", children: [
+              modelChipItems.length > 0 && /* @__PURE__ */ jsx(FormSection, { title: labels.filterByModel ?? "Modelo", children: /* @__PURE__ */ jsx(
+                ChipPicker,
+                {
+                  items: modelChipItems,
+                  selectedIds: selectedModelIds,
+                  onChange: setSelectedModelIds,
+                  selectedLabel: labels.selected ?? "selecionados",
+                  selectAllLabel: labels.selectAll ?? "Selecionar todos",
+                  clearLabel: labels.clear ?? "Limpar"
+                }
+              ) }),
+              /* @__PURE__ */ jsx(FormSection, { title: labels.filterByActiveVersion ?? "Vers\xE3o ativa", children: /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-2", children: ["all", "with", "without"].map((value) => hasActiveVersion === value ? /* @__PURE__ */ jsx(Button, { type: "button", size: "sm", color: "ios-glass-blue", onClick: () => setHasActiveVersion(value), children: versionLabelFor(value) }, value) : /* @__PURE__ */ jsx(Button, { type: "button", size: "sm", outline: true, onClick: () => setHasActiveVersion(value), children: versionLabelFor(value) }, value)) }) })
+            ] })
+          }
         }
       ) : void 0,
       actions: /* @__PURE__ */ jsx(
@@ -218,6 +356,11 @@ var LOCALE_OPTIONS = [
 function AgentsPromptsPageView({ labels, agents, prompts, loading, onCreate, onActivate, onDelete }) {
   const [createOpen, setCreateOpen] = useState(false);
   const [searchTerm, setSearchTerm] = useState("");
+  const [filtersOpen, setFiltersOpen] = useState(false);
+  const [selectedAgentIds, setSelectedAgentIds] = useState([]);
+  const [selectedLocales, setSelectedLocales] = useState([]);
+  const [activeFilter, setActiveFilter] = useState("all");
+  const isEmpty = prompts.length === 0;
   const agentOptions = useMemo(
     () => agents.map((agent) => ({
       value: String(agent.agentId ?? agent.id ?? ""),
@@ -233,14 +376,66 @@ function AgentsPromptsPageView({ labels, agents, prompts, loading, onCreate, onA
     }
     return map;
   }, [agents]);
-  const allPrompts = prompts;
-  const filteredPrompts = searchTerm.trim() ? allPrompts.filter((prompt) => {
+  const filteredPrompts = useMemo(() => {
     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;
+    return prompts.filter((prompt) => {
+      if (term) {
+        const agentName = (agentNameById.get(prompt.agentId) ?? prompt.agentId).toLowerCase();
+        const promptText = (prompt.prompt ?? "").toLowerCase();
+        if (!agentName.includes(term) && !promptText.includes(term)) return false;
+      }
+      if (selectedAgentIds.length > 0 && !selectedAgentIds.includes(prompt.agentId)) return false;
+      if (selectedLocales.length > 0 && !selectedLocales.includes(prompt.locale)) return false;
+      if (activeFilter === "active" && !prompt.isActive) return false;
+      if (activeFilter === "inactive" && prompt.isActive) return false;
+      return true;
+    });
+  }, [prompts, searchTerm, selectedAgentIds, selectedLocales, activeFilter, agentNameById]);
+  const agentChipItems = useMemo(
+    () => agents.map((agent) => ({
+      id: String(agent.agentId ?? agent.id ?? ""),
+      name: String(agent.name ?? agent.agentId ?? agent.id ?? ""),
+      style: { bg: "bg-sky-500/15 text-sky-700 dark:text-sky-300", text: "" }
+    })).filter((item) => item.id.length > 0),
+    [agents]
+  );
+  const localeChipItems = useMemo(
+    () => LOCALE_OPTIONS.map((opt) => ({
+      id: opt.value,
+      name: opt.label,
+      style: { bg: "bg-indigo-500/15 text-indigo-700 dark:text-indigo-300", text: "" }
+    })),
+    []
+  );
+  const activeLabelFor = (value) => {
+    if (value === "active") return labels.activeYes ?? labels.isActive;
+    if (value === "inactive") return labels.activeNo ?? "Inativo";
+    return labels.activeAll ?? "Todos";
+  };
+  const activeFilters = useMemo(() => {
+    const chips = [];
+    for (const value of selectedAgentIds) {
+      chips.push({ type: "agent", value, label: agentChipItems.find((i) => i.id === value)?.name ?? value });
+    }
+    for (const value of selectedLocales) {
+      chips.push({ type: "locale", value, label: localeChipItems.find((i) => i.id === value)?.name ?? value });
+    }
+    if (activeFilter !== "all") {
+      chips.push({ type: "active", value: activeFilter, label: activeLabelFor(activeFilter) });
+    }
+    return chips;
+  }, [selectedAgentIds, selectedLocales, activeFilter, agentChipItems, localeChipItems]);
+  const filterCount = activeFilters.length;
+  const removeFilter = (filter) => {
+    if (filter.type === "agent") setSelectedAgentIds((prev) => prev.filter((v) => v !== filter.value));
+    if (filter.type === "locale") setSelectedLocales((prev) => prev.filter((v) => v !== filter.value));
+    if (filter.type === "active") setActiveFilter("all");
+  };
+  const clearAllFilters = () => {
+    setSelectedAgentIds([]);
+    setSelectedLocales([]);
+    setActiveFilter("all");
+  };
   const hero = /* @__PURE__ */ jsx(
     HeroSection,
     {
@@ -249,7 +444,52 @@ 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,
+          activeFilters,
+          onRemoveFilter: removeFilter,
+          onClearAll: filterCount > 0 ? clearAllFilters : void 0,
+          filtersModal: {
+            open: filtersOpen,
+            onOpen: () => setFiltersOpen(true),
+            onClose: () => setFiltersOpen(false),
+            title: labels.filtersTitle ?? "Filtros",
+            count: filterCount,
+            onClear: filterCount > 0 ? clearAllFilters : void 0,
+            children: /* @__PURE__ */ jsxs("div", { className: "space-y-5", children: [
+              agentChipItems.length > 0 && /* @__PURE__ */ jsx(FormSection, { title: labels.filterByAgent ?? "Agente", children: /* @__PURE__ */ jsx(
+                ChipPicker,
+                {
+                  items: agentChipItems,
+                  selectedIds: selectedAgentIds,
+                  onChange: setSelectedAgentIds,
+                  selectedLabel: labels.selected ?? "selecionados",
+                  selectAllLabel: labels.selectAll ?? "Selecionar todos",
+                  clearLabel: labels.clear ?? "Limpar"
+                }
+              ) }),
+              /* @__PURE__ */ jsx(FormSection, { title: labels.filterByLocale ?? "Idioma", children: /* @__PURE__ */ jsx(
+                ChipPicker,
+                {
+                  items: localeChipItems,
+                  selectedIds: selectedLocales,
+                  onChange: setSelectedLocales,
+                  selectedLabel: labels.selected ?? "selecionados",
+                  selectAllLabel: labels.selectAll ?? "Selecionar todos",
+                  clearLabel: labels.clear ?? "Limpar"
+                }
+              ) }),
+              /* @__PURE__ */ jsx(FormSection, { title: labels.filterByActive ?? "Status", children: /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-2", children: ["all", "active", "inactive"].map((value) => activeFilter === value ? /* @__PURE__ */ jsx(Button, { type: "button", size: "sm", color: "ios-glass-blue", onClick: () => setActiveFilter(value), children: activeLabelFor(value) }, value) : /* @__PURE__ */ jsx(Button, { type: "button", size: "sm", outline: true, onClick: () => setActiveFilter(value), children: activeLabelFor(value) }, value)) }) })
+            ] })
+          }
+        }
+      ) : void 0,
+      actions: /* @__PURE__ */ jsx(
         CreateActionButton,
         {
           mode: "desktop",
@@ -269,47 +509,37 @@ 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__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(
-      SearchBar,
+  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,
       {
-        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
-      );
-    }) })
-  ] });
+        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__ */ jsxs("div", { className: "space-y-4", children: [
       hero,
@@ -387,9 +617,47 @@ function AgentsToolDefinitionsPageView({ labels, tools, loading, onCreate, onUpd
   const [editing, setEditing] = useState(null);
   const [createOpen, setCreateOpen] = useState(false);
   const [searchTerm, setSearchTerm] = useState("");
+  const [filtersOpen, setFiltersOpen] = useState(false);
+  const [selectedToolTypes, setSelectedToolTypes] = 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 toolTypeOf = (tool) => {
+    const raw = tool;
+    const t = raw.toolType ?? raw.tool_type ?? tool.category;
+    return typeof t === "string" ? t : "";
+  };
+  const filteredTools = useMemo(() => {
+    const term = searchTerm.trim().toLowerCase();
+    return allTools.filter((tool) => {
+      if (term && !tool.name.toLowerCase().includes(term)) return false;
+      if (selectedToolTypes.length > 0) {
+        const t = toolTypeOf(tool);
+        if (!selectedToolTypes.includes(t)) return false;
+      }
+      return true;
+    });
+  }, [allTools, searchTerm, selectedToolTypes]);
+  const toolTypeChipItems = useMemo(
+    () => TOOL_TYPE_OPTIONS.map((opt) => ({
+      id: opt.value,
+      name: opt.label,
+      style: { bg: "bg-amber-500/15 text-amber-700 dark:text-amber-300", text: "" }
+    })),
+    []
+  );
+  const activeFilters = useMemo(() => {
+    return selectedToolTypes.map((value) => {
+      const label = toolTypeChipItems.find((i) => i.id === value)?.name ?? value;
+      return { type: "toolType", value, label };
+    });
+  }, [selectedToolTypes, toolTypeChipItems]);
+  const filterCount = activeFilters.length;
+  const removeFilter = (filter) => {
+    if (filter.type === "toolType") setSelectedToolTypes((prev) => prev.filter((t) => t !== filter.value));
+  };
+  const clearAllFilters = () => {
+    setSelectedToolTypes([]);
+  };
   const hero = /* @__PURE__ */ jsx(
     HeroSection,
     {
@@ -398,7 +666,38 @@ 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,
+          activeFilters,
+          onRemoveFilter: removeFilter,
+          onClearAll: filterCount > 0 ? clearAllFilters : void 0,
+          filtersModal: {
+            open: filtersOpen,
+            onOpen: () => setFiltersOpen(true),
+            onClose: () => setFiltersOpen(false),
+            title: labels.filtersTitle ?? "Filtros",
+            count: filterCount,
+            onClear: filterCount > 0 ? clearAllFilters : void 0,
+            children: /* @__PURE__ */ jsx("div", { className: "space-y-5", children: /* @__PURE__ */ jsx(FormSection, { title: labels.filterByToolType ?? "Tipo de ferramenta", children: /* @__PURE__ */ jsx(
+              ChipPicker,
+              {
+                items: toolTypeChipItems,
+                selectedIds: selectedToolTypes,
+                onChange: setSelectedToolTypes,
+                selectedLabel: labels.selected ?? "selecionados",
+                selectAllLabel: labels.selectAll ?? "Selecionar todos",
+                clearLabel: labels.clear ?? "Limpar"
+              }
+            ) }) })
+          }
+        }
+      ) : void 0,
+      actions: /* @__PURE__ */ jsx(
         CreateActionButton,
         {
           mode: "desktop",
@@ -418,43 +717,33 @@ 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__ */ 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
-    )) })
-  ] });
+  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
+  )) });
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
       hero,
@@ -943,17 +1232,55 @@ function setFromJson(set, key, raw) {
     set(key, raw);
   }
 }
-function RulesPageView({ labels, rules, loading, onCreate, onUpdate, onDelete, onAddClick }) {
+function RulesPageView({ labels, rules, loading, onCreate, onUpdate, onDelete }) {
   const [createOpen, setCreateOpen] = useState(false);
-  const openCreate = () => {
-    if (onAddClick) onAddClick();
-    else setCreateOpen(true);
-  };
   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 [filtersOpen, setFiltersOpen] = useState(false);
+  const [enabledFilter, setEnabledFilter] = useState("all");
+  const [expiryFilter, setExpiryFilter] = useState("all");
+  const isEmpty = rules.length === 0;
+  const filteredRules = useMemo(() => {
+    const term = searchTerm.trim().toLowerCase();
+    return rules.filter((rule) => {
+      if (term && !rule.name.toLowerCase().includes(term)) return false;
+      if (enabledFilter === "enabled" && !rule.enabled) return false;
+      if (enabledFilter === "disabled" && rule.enabled) return false;
+      const hasExpiry = typeof rule.validUntil === "string" && rule.validUntil.length > 0;
+      if (expiryFilter === "expiring" && !hasExpiry) return false;
+      if (expiryFilter === "noExpiry" && hasExpiry) return false;
+      return true;
+    });
+  }, [rules, searchTerm, enabledFilter, expiryFilter]);
+  const statusLabelFor = (value) => {
+    if (value === "enabled") return labels.statusEnabled ?? labels.enabled;
+    if (value === "disabled") return labels.statusDisabled ?? labels.disabled;
+    return labels.statusAll ?? "Todos";
+  };
+  const expiryLabelFor = (value) => {
+    if (value === "expiring") return labels.expiryExpiring ?? "Com validade";
+    if (value === "noExpiry") return labels.expiryNoExpiry ?? "Sem validade";
+    return labels.expiryAll ?? "Todos";
+  };
+  const activeFilters = useMemo(() => {
+    const chips = [];
+    if (enabledFilter !== "all") {
+      chips.push({ type: "enabled", value: enabledFilter, label: statusLabelFor(enabledFilter) });
+    }
+    if (expiryFilter !== "all") {
+      chips.push({ type: "expiry", value: expiryFilter, label: expiryLabelFor(expiryFilter) });
+    }
+    return chips;
+  }, [enabledFilter, expiryFilter]);
+  const filterCount = activeFilters.length;
+  const removeFilter = (filter) => {
+    if (filter.type === "enabled") setEnabledFilter("all");
+    if (filter.type === "expiry") setExpiryFilter("all");
+  };
+  const clearAllFilters = () => {
+    setEnabledFilter("all");
+    setExpiryFilter("all");
+  };
   const hero = /* @__PURE__ */ jsx(
     HeroSection,
     {
@@ -968,7 +1295,22 @@ function RulesPageView({ labels, rules, loading, onCreate, onUpdate, onDelete, o
           searchTerm,
           onSearchChange: setSearchTerm,
           placeholder: labels.searchPlaceholder ?? labels.title,
-          noBorder: true
+          noBorder: true,
+          activeFilters,
+          onRemoveFilter: removeFilter,
+          onClearAll: filterCount > 0 ? clearAllFilters : void 0,
+          filtersModal: {
+            open: filtersOpen,
+            onOpen: () => setFiltersOpen(true),
+            onClose: () => setFiltersOpen(false),
+            title: labels.filtersTitle ?? "Filtros",
+            count: filterCount,
+            onClear: filterCount > 0 ? clearAllFilters : void 0,
+            children: /* @__PURE__ */ jsxs("div", { className: "space-y-5", children: [
+              /* @__PURE__ */ jsx(FormSection, { title: labels.filterByStatus ?? "Status", children: /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-2", children: ["all", "enabled", "disabled"].map((value) => enabledFilter === value ? /* @__PURE__ */ jsx(Button, { type: "button", size: "sm", color: "ios-glass-blue", onClick: () => setEnabledFilter(value), children: statusLabelFor(value) }, value) : /* @__PURE__ */ jsx(Button, { type: "button", size: "sm", outline: true, onClick: () => setEnabledFilter(value), children: statusLabelFor(value) }, value)) }) }),
+              /* @__PURE__ */ jsx(FormSection, { title: labels.filterByExpiry ?? "Validade", children: /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-2", children: ["all", "expiring", "noExpiry"].map((value) => expiryFilter === value ? /* @__PURE__ */ jsx(Button, { type: "button", size: "sm", color: "ios-glass-blue", onClick: () => setExpiryFilter(value), children: expiryLabelFor(value) }, value) : /* @__PURE__ */ jsx(Button, { type: "button", size: "sm", outline: true, onClick: () => setExpiryFilter(value), children: expiryLabelFor(value) }, value)) }) })
+            ] })
+          }
         }
       ) : void 0,
       actions: /* @__PURE__ */ jsx(
@@ -976,7 +1318,7 @@ function RulesPageView({ labels, rules, loading, onCreate, onUpdate, onDelete, o
         {
           mode: "desktop",
           label: labels.addRule,
-          onClick: openCreate,
+          onClick: () => setCreateOpen(true),
           accent: "fuchsia"
         }
       )
@@ -987,7 +1329,7 @@ function RulesPageView({ labels, rules, loading, onCreate, onUpdate, onDelete, o
     {
       mode: "mobile",
       label: labels.addRule,
-      onClick: openCreate,
+      onClick: () => setCreateOpen(true),
       accent: "fuchsia"
     }
   );
@@ -1093,10 +1435,7 @@ 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,
-    // Round-trip recurrence (Fallback 4) — backend persists it as the
-    // structured `{ kind, ... }` blob the wizard sends.
-    recurrence: rule.recurrence ?? null
+    tags: Array.isArray(rule.tags) ? rule.tags.filter((tag) => typeof tag === "string") : base.tags
   };
 }
 function pickAction(rule) {
@@ -1256,11 +1595,7 @@ var DIALECT_LOGO = {
   cockroachdb: "/logos/datasources/cockroachdb.svg",
   supabase: "/logos/datasources/supabase.svg",
   firebase: "/logos/datasources/firebase.svg",
-  neo4j: "/logos/datasources/neo4j.svg",
-  // AWS managed services (icepanel.io / official AWS Architecture Icons)
-  neptune: "/logos/datasources/neptune.svg",
-  timestream: "/logos/datasources/timestream.svg",
-  opensearch: "/logos/datasources/opensearch.svg"
+  neo4j: "/logos/datasources/neo4j.svg"
 };
 function getDialectLogoSrc(dialect) {
   if (!dialect) return null;
@@ -1270,21 +1605,76 @@ function DatasourcesPageView({
   labels,
   datasources: externalDatasources,
   useSampleData = false,
-  onCreate,
-  onAddClick
+  onCreate
 }) {
   const [modalOpen, setModalOpen] = useState(false);
-  const openCreate = () => {
-    if (onAddClick) onAddClick();
-    else setModalOpen(true);
-  };
-  const [searchTerm, setSearchTerm] = useState("");
   const [localDatasources, setLocalDatasources] = useState(
     useSampleData ? SAMPLE_DATASOURCES : []
   );
-  const allDatasources = externalDatasources ?? localDatasources;
-  const datasources = searchTerm.trim() ? allDatasources.filter((ds) => (ds.name ?? "").toLowerCase().includes(searchTerm.trim().toLowerCase())) : allDatasources;
-  const isEmpty = allDatasources.length === 0;
+  const [searchTerm, setSearchTerm] = useState("");
+  const [filtersOpen, setFiltersOpen] = useState(false);
+  const [selectedDialects, setSelectedDialects] = useState([]);
+  const [enabledFilter, setEnabledFilter] = useState("all");
+  const [readOnlyFilter, setReadOnlyFilter] = useState("all");
+  const datasources = externalDatasources ?? localDatasources;
+  const isEmpty = datasources.length === 0;
+  const filteredDatasources = useMemo(() => {
+    const term = searchTerm.trim().toLowerCase();
+    return datasources.filter((ds) => {
+      const name = (ds.name ?? "").toLowerCase();
+      if (term && !name.includes(term)) return false;
+      if (selectedDialects.length > 0 && (!ds.dialect || !selectedDialects.includes(ds.dialect))) return false;
+      if (enabledFilter === "enabled" && !ds.enabled) return false;
+      if (enabledFilter === "disabled" && ds.enabled) return false;
+      if (readOnlyFilter === "readOnly" && !ds.readOnly) return false;
+      if (readOnlyFilter === "writable" && ds.readOnly) return false;
+      return true;
+    });
+  }, [datasources, searchTerm, selectedDialects, enabledFilter, readOnlyFilter]);
+  const dialectChipItems = useMemo(
+    () => DIALECT_CATEGORIES.flatMap(
+      (cat) => cat.dialects.map((d) => ({
+        id: d.value,
+        name: d.label,
+        style: { bg: `bg-gradient-to-br ${cat.gradient} text-white`, text: "" }
+      }))
+    ),
+    []
+  );
+  const enabledLabelFor = (value) => {
+    if (value === "enabled") return labels.statusEnabled ?? labels.enabled ?? "Ativos";
+    if (value === "disabled") return labels.statusDisabled ?? labels.disabled ?? "Inativos";
+    return labels.statusAll ?? "Todos";
+  };
+  const readOnlyLabelFor = (value) => {
+    if (value === "readOnly") return labels.readOnlyOnly ?? "Somente leitura";
+    if (value === "writable") return labels.writable ?? "Grava\xE7\xE3o";
+    return labels.readOnlyAll ?? "Todos";
+  };
+  const activeFilters = useMemo(() => {
+    const chips = [];
+    for (const value of selectedDialects) {
+      chips.push({ type: "dialect", value, label: dialectChipItems.find((i) => i.id === value)?.name ?? value });
+    }
+    if (enabledFilter !== "all") {
+      chips.push({ type: "enabled", value: enabledFilter, label: enabledLabelFor(enabledFilter) });
+    }
+    if (readOnlyFilter !== "all") {
+      chips.push({ type: "readOnly", value: readOnlyFilter, label: readOnlyLabelFor(readOnlyFilter) });
+    }
+    return chips;
+  }, [selectedDialects, enabledFilter, readOnlyFilter, dialectChipItems]);
+  const filterCount = activeFilters.length;
+  const removeFilter = (filter) => {
+    if (filter.type === "dialect") setSelectedDialects((prev) => prev.filter((v) => v !== filter.value));
+    if (filter.type === "enabled") setEnabledFilter("all");
+    if (filter.type === "readOnly") setReadOnlyFilter("all");
+  };
+  const clearAllFilters = () => {
+    setSelectedDialects([]);
+    setEnabledFilter("all");
+    setReadOnlyFilter("all");
+  };
   function handleCreate(data) {
     if (onCreate) {
       onCreate(data);
@@ -1324,7 +1714,33 @@ function DatasourcesPageView({
             searchTerm,
             onSearchChange: setSearchTerm,
             placeholder: labels.searchPlaceholder ?? labels.title,
-            noBorder: true
+            noBorder: true,
+            activeFilters,
+            onRemoveFilter: removeFilter,
+            onClearAll: filterCount > 0 ? clearAllFilters : void 0,
+            filtersModal: {
+              open: filtersOpen,
+              onOpen: () => setFiltersOpen(true),
+              onClose: () => setFiltersOpen(false),
+              title: labels.filtersTitle ?? "Filtros",
+              count: filterCount,
+              onClear: filterCount > 0 ? clearAllFilters : void 0,
+              children: /* @__PURE__ */ jsxs("div", { className: "space-y-5", children: [
+                /* @__PURE__ */ jsx(FormSection, { title: labels.filterByDialect ?? labels.dialect ?? "Dialeto", children: /* @__PURE__ */ jsx(
+                  ChipPicker,
+                  {
+                    items: dialectChipItems,
+                    selectedIds: selectedDialects,
+                    onChange: setSelectedDialects,
+                    selectedLabel: labels.selected ?? "selecionados",
+                    selectAllLabel: labels.selectAll ?? "Selecionar todos",
+                    clearLabel: labels.clear ?? "Limpar"
+                  }
+                ) }),
+                /* @__PURE__ */ jsx(FormSection, { title: labels.filterByStatus ?? "Status", children: /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-2", children: ["all", "enabled", "disabled"].map((value) => enabledFilter === value ? /* @__PURE__ */ jsx(Button, { type: "button", size: "sm", color: "ios-glass-blue", onClick: () => setEnabledFilter(value), children: enabledLabelFor(value) }, value) : /* @__PURE__ */ jsx(Button, { type: "button", size: "sm", outline: true, onClick: () => setEnabledFilter(value), children: enabledLabelFor(value) }, value)) }) }),
+                /* @__PURE__ */ jsx(FormSection, { title: labels.filterByReadOnly ?? "Modo de acesso", children: /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-2", children: ["all", "readOnly", "writable"].map((value) => readOnlyFilter === value ? /* @__PURE__ */ jsx(Button, { type: "button", size: "sm", color: "ios-glass-blue", onClick: () => setReadOnlyFilter(value), children: readOnlyLabelFor(value) }, value) : /* @__PURE__ */ jsx(Button, { type: "button", size: "sm", outline: true, onClick: () => setReadOnlyFilter(value), children: readOnlyLabelFor(value) }, value)) }) })
+              ] })
+            }
           }
         ) : void 0,
         actions: /* @__PURE__ */ jsx(
@@ -1332,7 +1748,7 @@ function DatasourcesPageView({
           {
             mode: "desktop",
             label: labels.addDatasource,
-            onClick: openCreate,
+            onClick: () => setModalOpen(true),
             accent: "amber"
           }
         )
@@ -1343,7 +1759,7 @@ function DatasourcesPageView({
       {
         mode: "mobile",
         label: labels.addDatasource,
-        onClick: openCreate,
+        onClick: () => setModalOpen(true),
         accent: "amber"
       }
     ),
@@ -1355,12 +1771,12 @@ function DatasourcesPageView({
         iconName: "link",
         customIcon: /* @__PURE__ */ jsx(CircleStackIcon, { className: "h-10 w-10 text-amber-500 dark:text-amber-400" })
       }
-    ) : /* @__PURE__ */ jsx("div", { className: "grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3", children: datasources.map((ds) => {
+    ) : /* @__PURE__ */ jsx("div", { className: "grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3", children: filteredDatasources.map((ds) => {
       const Icon = getDialectIcon(ds.dialect);
       const gradient = getDialectGradient(ds.dialect);
       const dialectLabel = getDialectLabel(ds.dialect);
       const logoSrc = getDialectLogoSrc(ds.dialect);
-      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" }) });
+      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" }) });
       return /* @__PURE__ */ jsx(
         EntityCard,
         {
@@ -1369,20 +1785,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-slate-500 dark:text-slate-400", children: [
-            ds.readOnly && /* @__PURE__ */ jsx(Badge, { color: "blue", size: "xs", children: "Read-only" }),
+          footer: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 text-xs text-gray-400 dark:text-gray-500", 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-slate-500 dark:text-slate-400", children: [
+          children: /* @__PURE__ */ jsxs("div", { className: "mt-2 text-xs text-gray-500 dark:text-gray-400", children: [
             /* @__PURE__ */ jsxs("div", { children: [
               labels.dialect,
               ": ",
               dialectLabel
             ] }),
-            ds.slug && /* @__PURE__ */ jsxs("div", { className: "truncate text-slate-400 dark:text-slate-500", children: [
+            ds.slug && /* @__PURE__ */ jsxs("div", { className: "truncate text-gray-400", children: [
               "/",
               ds.slug
             ] })
@@ -1746,14 +2162,72 @@ function ConnectionsPageView({
   onUpdate,
   onDelete,
   onCreateSecret,
-  secretNamePrefix = "platform"
+  secretNamePrefix = "platform",
+  onAddClick
 }) {
+  const openCreate = () => {
+    if (onAddClick) onAddClick();
+    else setCreateOpen(true);
+  };
   const [createOpen, setCreateOpen] = useState(false);
   const [editing, setEditing] = useState(null);
   const [searchTerm, setSearchTerm] = useState("");
+  const [filtersOpen, setFiltersOpen] = useState(false);
+  const [selectedProviders, setSelectedProviders] = useState([]);
+  const [selectedRegions, setSelectedRegions] = 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 filteredConnections = useMemo(() => {
+    const term = searchTerm.trim().toLowerCase();
+    return allConnections.filter((conn) => {
+      if (term && !conn.name.toLowerCase().includes(term)) return false;
+      if (selectedProviders.length > 0) {
+        const provider = conn.providerSlug ?? "";
+        if (!selectedProviders.includes(provider)) return false;
+      }
+      if (selectedRegions.length > 0) {
+        const region = conn.region ?? "";
+        if (!selectedRegions.includes(region)) return false;
+      }
+      return true;
+    });
+  }, [allConnections, searchTerm, selectedProviders, selectedRegions]);
+  const providerChipItems = useMemo(
+    () => [...new Set(allConnections.map((c) => c.providerSlug ?? "").filter((p) => p.length > 0))].sort().map((slug) => ({
+      id: slug,
+      name: providerLabel(slug),
+      style: { bg: "bg-sky-500/15 text-sky-700 dark:text-sky-300", text: "" }
+    })),
+    [allConnections]
+  );
+  const regionChipItems = useMemo(
+    () => [...new Set(allConnections.map((c) => c.region ?? "").filter((r) => r.length > 0))].sort().map((region) => ({
+      id: region,
+      name: region,
+      style: { bg: "bg-indigo-500/15 text-indigo-700 dark:text-indigo-300", text: "" }
+    })),
+    [allConnections]
+  );
+  const activeFilters = useMemo(() => {
+    const chips = [];
+    for (const value of selectedProviders) {
+      const label = providerChipItems.find((i) => i.id === value)?.name ?? providerLabel(value);
+      chips.push({ type: "provider", value, label });
+    }
+    for (const value of selectedRegions) {
+      chips.push({ type: "region", value, label: value });
+    }
+    return chips;
+  }, [selectedProviders, selectedRegions, providerChipItems]);
+  const filterCount = activeFilters.length;
+  const removeFilter = (filter) => {
+    if (filter.type === "provider") setSelectedProviders((prev) => prev.filter((p) => p !== filter.value));
+    if (filter.type === "region") setSelectedRegions((prev) => prev.filter((r) => r !== filter.value));
+  };
+  const clearAllFilters = () => {
+    setSelectedProviders([]);
+    setSelectedRegions([]);
+  };
   const hero = /* @__PURE__ */ jsx(
     HeroSection,
     {
@@ -1768,7 +2242,42 @@ function ConnectionsPageView({
           searchTerm,
           onSearchChange: setSearchTerm,
           placeholder: labels.searchPlaceholder ?? labels.title,
-          noBorder: true
+          noBorder: true,
+          activeFilters,
+          onRemoveFilter: removeFilter,
+          onClearAll: filterCount > 0 ? clearAllFilters : void 0,
+          filtersModal: {
+            open: filtersOpen,
+            onOpen: () => setFiltersOpen(true),
+            onClose: () => setFiltersOpen(false),
+            title: labels.filtersTitle ?? "Filtros",
+            count: filterCount,
+            onClear: filterCount > 0 ? clearAllFilters : void 0,
+            children: /* @__PURE__ */ jsxs("div", { className: "space-y-5", children: [
+              providerChipItems.length > 0 && /* @__PURE__ */ jsx(FormSection, { title: labels.filterByProvider ?? "Provedor", children: /* @__PURE__ */ jsx(
+                ChipPicker,
+                {
+                  items: providerChipItems,
+                  selectedIds: selectedProviders,
+                  onChange: setSelectedProviders,
+                  selectedLabel: labels.selected ?? "selecionados",
+                  selectAllLabel: labels.selectAll ?? "Selecionar todos",
+                  clearLabel: labels.clear ?? "Limpar"
+                }
+              ) }),
+              regionChipItems.length > 0 && /* @__PURE__ */ jsx(FormSection, { title: labels.filterByRegion ?? "Regi\xE3o", children: /* @__PURE__ */ jsx(
+                ChipPicker,
+                {
+                  items: regionChipItems,
+                  selectedIds: selectedRegions,
+                  onChange: setSelectedRegions,
+                  selectedLabel: labels.selected ?? "selecionados",
+                  selectAllLabel: labels.selectAll ?? "Selecionar todos",
+                  clearLabel: labels.clear ?? "Limpar"
+                }
+              ) })
+            ] })
+          }
         }
       ) : void 0,
       actions: /* @__PURE__ */ jsx(
@@ -1776,7 +2285,7 @@ function ConnectionsPageView({
         {
           mode: "desktop",
           label: labels.add,
-          onClick: () => setCreateOpen(true),
+          onClick: openCreate,
           accent: "sky"
         }
       )
@@ -2082,15 +2591,66 @@ function CredentialsPageView({ labels, credentials, loading, onCreate, onRotate,
   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 [filtersOpen, setFiltersOpen] = useState(false);
+  const [selectedTypes, setSelectedTypes] = useState([]);
+  const [disabledFilter, setDisabledFilter] = useState("all");
+  const isEmpty = credentials.length === 0;
   const typeOptions = [
     { value: "generic", label: labels.typeGeneric },
     { value: "api_key", label: labels.typeApiKey },
     { value: "oauth", label: labels.typeOAuth },
     { value: "password", label: labels.typePassword }
   ];
+  const typeLabelMap = {
+    generic: labels.typeGeneric,
+    api_key: labels.typeApiKey,
+    oauth: labels.typeOAuth,
+    password: labels.typePassword
+  };
+  const filteredCredentials = useMemo(() => {
+    const term = searchTerm.trim().toLowerCase();
+    return credentials.filter((secret) => {
+      if (term && !secret.name.toLowerCase().includes(term)) return false;
+      if (selectedTypes.length > 0 && !selectedTypes.includes(secret.secretType)) return false;
+      if (disabledFilter === "active" && secret.disabled) return false;
+      if (disabledFilter === "disabled" && !secret.disabled) return false;
+      return true;
+    });
+  }, [credentials, searchTerm, selectedTypes, disabledFilter]);
+  const typeChipItems = useMemo(
+    () => [...new Set(credentials.map((c) => c.secretType).filter((t) => t.length > 0))].sort().map((type) => ({
+      id: type,
+      name: typeLabelMap[type] ?? type,
+      style: { bg: "bg-rose-500/15 text-rose-700 dark:text-rose-300", text: "" }
+    })),
+    // typeLabelMap is derived from `labels` props — re-derive when those change
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [credentials, labels.typeGeneric, labels.typeApiKey, labels.typeOAuth, labels.typePassword]
+  );
+  const statusLabelFor = (value) => {
+    if (value === "active") return labels.statusActive ?? "Ativo";
+    if (value === "disabled") return labels.statusDisabled ?? labels.disable;
+    return labels.statusAll ?? "Todos";
+  };
+  const activeFilters = useMemo(() => {
+    const chips = [];
+    for (const value of selectedTypes) {
+      chips.push({ type: "secretType", value, label: typeChipItems.find((i) => i.id === value)?.name ?? value });
+    }
+    if (disabledFilter !== "all") {
+      chips.push({ type: "disabled", value: disabledFilter, label: statusLabelFor(disabledFilter) });
+    }
+    return chips;
+  }, [selectedTypes, disabledFilter, typeChipItems]);
+  const filterCount = activeFilters.length;
+  const removeFilter = (filter) => {
+    if (filter.type === "secretType") setSelectedTypes((prev) => prev.filter((v) => v !== filter.value));
+    if (filter.type === "disabled") setDisabledFilter("all");
+  };
+  const clearAllFilters = () => {
+    setSelectedTypes([]);
+    setDisabledFilter("all");
+  };
   const hero = /* @__PURE__ */ jsx(
     HeroSection,
     {
@@ -2099,7 +2659,41 @@ 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,
+          activeFilters,
+          onRemoveFilter: removeFilter,
+          onClearAll: filterCount > 0 ? clearAllFilters : void 0,
+          filtersModal: {
+            open: filtersOpen,
+            onOpen: () => setFiltersOpen(true),
+            onClose: () => setFiltersOpen(false),
+            title: labels.filtersTitle ?? "Filtros",
+            count: filterCount,
+            onClear: filterCount > 0 ? clearAllFilters : void 0,
+            children: /* @__PURE__ */ jsxs("div", { className: "space-y-5", children: [
+              typeChipItems.length > 0 && /* @__PURE__ */ jsx(FormSection, { title: labels.filterByType ?? "Tipo", children: /* @__PURE__ */ jsx(
+                ChipPicker,
+                {
+                  items: typeChipItems,
+                  selectedIds: selectedTypes,
+                  onChange: setSelectedTypes,
+                  selectedLabel: labels.selected ?? "selecionados",
+                  selectAllLabel: labels.selectAll ?? "Selecionar todos",
+                  clearLabel: labels.clear ?? "Limpar"
+                }
+              ) }),
+              /* @__PURE__ */ jsx(FormSection, { title: labels.filterByStatus ?? "Status", children: /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-2", children: ["all", "active", "disabled"].map((value) => disabledFilter === value ? /* @__PURE__ */ jsx(Button, { type: "button", size: "sm", color: "ios-glass-blue", onClick: () => setDisabledFilter(value), children: statusLabelFor(value) }, value) : /* @__PURE__ */ jsx(Button, { type: "button", size: "sm", outline: true, onClick: () => setDisabledFilter(value), children: statusLabelFor(value) }, value)) }) })
+            ] })
+          }
+        }
+      ) : void 0,
+      actions: /* @__PURE__ */ jsx(
         CreateActionButton,
         {
           mode: "desktop",
@@ -2119,60 +2713,50 @@ 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__ */ 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
-    )) })
-  ] });
+  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
+  )) });
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
       hero,