diff --git a/mcpgateway/static/admin.js b/mcpgateway/static/admin.js
index f53c7bef9f..0e2a8bbacc 100644
--- a/mcpgateway/static/admin.js
+++ b/mcpgateway/static/admin.js
@@ -8718,6 +8718,7 @@ function showTab(tabName) {
                             {
                                 method: "GET",
                                 credentials: "same-origin",
+                                cache: "no-store",
                                 headers: {
                                     Accept: "text/html",
                                 },
@@ -25236,9 +25237,9 @@ function initializePluginFunctions() {
     function updateBadgeHighlighting(type, value) {
         // Define selectors for each type
         const selectors = {
-            hook: "[onclick^='filterByHook']",
-            tag: "[onclick^='filterByTag']",
-            author: "[onclick^='filterByAuthor']",
+            hook: "[data-filter-hook]",
+            tag: "[data-filter-tag]",
+            author: "[data-filter-author]",
         };
 
         const selector = selectors[type];
@@ -25251,12 +25252,16 @@ function initializePluginFunctions() {
 
         badges.forEach((badge) => {
             // Check if this is the "All" badge (empty value)
-            const isAllBadge = badge.getAttribute("onclick").includes("('')");
+            const isAllBadge =
+                badge.dataset.filterHook === "" ||
+                badge.dataset.filterTag === "" ||
+                badge.dataset.filterAuthor === "";
 
             // Check if this badge matches the selected value
-            const badgeValue = badge
-                .getAttribute("onclick")
-                .match(/'([^']*)'/)?.[1];
+            const badgeValue =
+                badge.dataset.filterHook ??
+                badge.dataset.filterTag ??
+                badge.dataset.filterAuthor;
             const isSelected =
                 value === ""
                     ? isAllBadge
@@ -25444,6 +25449,44 @@ function initializePluginFunctions() {
             modal.classList.add("hidden");
         }
     };
+
+    // Single listener on the filter section — catches input/change from all child controls
+    const filtersSection = document.getElementById("plugin-filters");
+    if (filtersSection) {
+        filtersSection.addEventListener("input", () => window.filterPlugins());
+        filtersSection.addEventListener("change", () => window.filterPlugins());
+    }
+
+    // Single delegated click/keydown listener for badges, View Details, and modal close.
+    // Returns true if an action was dispatched, false otherwise.
+    function dispatchPluginAction(target) {
+        const hookEl = target.closest("[data-filter-hook]");
+        const tagEl = target.closest("[data-filter-tag]");
+        const authorEl = target.closest("[data-filter-author]");
+        const detailEl = target.closest("[data-show-plugin]");
+        const closeEl = target.closest("[data-close-plugin-modal]");
+
+        if (hookEl) window.filterByHook(hookEl.dataset.filterHook);
+        else if (tagEl) window.filterByTag(tagEl.dataset.filterTag);
+        else if (authorEl) window.filterByAuthor(authorEl.dataset.filterAuthor);
+        else if (detailEl) {
+            window.showPluginDetails(detailEl.dataset.showPlugin);
+        } else if (closeEl) window.closePluginDetails();
+        else return false;
+        return true;
+    }
+
+    const pluginsPanel = document.getElementById("plugins-panel");
+    if (pluginsPanel) {
+        pluginsPanel.addEventListener("click", (e) =>
+            dispatchPluginAction(e.target),
+        );
+        pluginsPanel.addEventListener("keydown", (e) => {
+            if (e.key !== "Enter" && e.key !== " ") return;
+            if (!dispatchPluginAction(e.target)) return;
+            e.preventDefault();
+        });
+    }
 }
 
 // Initialize plugin functions if plugins panel exists
diff --git a/mcpgateway/templates/plugins_partial.html b/mcpgateway/templates/plugins_partial.html
index 831f8d793a..ce174be38a 100644
--- a/mcpgateway/templates/plugins_partial.html
+++ b/mcpgateway/templates/plugins_partial.html
@@ -80,7 +80,7 @@ <h3 class="text-lg font-medium mb-4 dark:text-gray-200 flex items-center">
       <div class="space-y-2">
         <div
           class="flex justify-between items-center p-2 bg-indigo-50 rounded dark:bg-indigo-900/20 cursor-pointer hover:bg-indigo-100 dark:hover:bg-indigo-900/30 transition-colors border border-indigo-200 dark:border-indigo-800"
-          onclick="filterByHook('')" onkeydown="handleKeydown(event, () => filterByHook(''))" role="button" tabindex="0"
+          data-filter-hook="" role="button" tabindex="0"
         >
           <span
             class="text-sm font-medium text-indigo-700 dark:text-indigo-300"
@@ -95,7 +95,7 @@ <h3 class="text-lg font-medium mb-4 dark:text-gray-200 flex items-center">
         {% for hook, count in stats.plugins_by_hook.items() %}
         <div
           class="flex justify-between items-center p-2 bg-gray-50 rounded dark:bg-gray-700 cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-600 transition-colors"
-          onclick="filterByHook({{ hook|tojson_attr }})" onkeydown="handleKeydown(event, () => filterByHook({{ hook|tojson_attr }}))" role="button" tabindex="0"
+          data-filter-hook="{{ hook }}" role="button" tabindex="0"
         >
           <span class="text-sm font-medium text-gray-700 dark:text-gray-300"
             >{{ hook.replace('_', ' ').title() }}</span
@@ -131,7 +131,7 @@ <h3 class="text-lg font-medium mb-4 dark:text-gray-200 flex items-center">
       <div class="flex flex-wrap gap-2">
         <span
           class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-indigo-100 text-indigo-800 dark:bg-indigo-900 dark:text-indigo-200 cursor-pointer hover:bg-indigo-200 dark:hover:bg-indigo-800 transition-colors border border-indigo-300 dark:border-indigo-700"
-          onclick="filterByTag('')" onkeydown="handleKeydown(event, () => filterByTag(''))" role="button" tabindex="0"
+          data-filter-tag="" role="button" tabindex="0"
         >
           All Tags
           <span class="ml-1 text-xs text-indigo-600 dark:text-indigo-300"
@@ -141,7 +141,7 @@ <h3 class="text-lg font-medium mb-4 dark:text-gray-200 flex items-center">
         {% for tag, count in stats.plugins_by_tag.items() %}
         <span
           class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-gray-200 cursor-pointer hover:bg-gray-200 dark:hover:bg-gray-600 transition-colors"
-          onclick="filterByTag({{ tag|tojson_attr }})" onkeydown="handleKeydown(event, () => filterByTag({{ tag|tojson_attr }}))" role="button" tabindex="0"
+          data-filter-tag="{{ tag }}" role="button" tabindex="0"
         >
           {{ tag }}
           <span class="ml-1 text-xs text-gray-500 dark:text-gray-400"
@@ -173,7 +173,7 @@ <h3 class="text-lg font-medium mb-4 dark:text-gray-200 flex items-center">
       <div class="flex flex-wrap gap-2">
         <span
           class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-indigo-100 text-indigo-800 dark:bg-indigo-900 dark:text-indigo-200 cursor-pointer hover:bg-indigo-200 dark:hover:bg-indigo-800 transition-colors border border-indigo-300 dark:border-indigo-700"
-          onclick="filterByAuthor('')" onkeydown="handleKeydown(event, () => filterByAuthor(''))" role="button" tabindex="0"
+          data-filter-author="" role="button" tabindex="0"
         >
           All Authors
           <span class="ml-1 text-xs text-indigo-600 dark:text-indigo-300"
@@ -183,7 +183,7 @@ <h3 class="text-lg font-medium mb-4 dark:text-gray-200 flex items-center">
         {% for author, count in stats.plugins_by_author.items() %}
         <span
           class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-gray-200 cursor-pointer hover:bg-gray-200 dark:hover:bg-gray-600 transition-colors"
-          onclick="filterByAuthor({{ author|tojson_attr }})" onkeydown="handleKeydown(event, () => filterByAuthor({{ author|tojson_attr }}))" role="button" tabindex="0"
+          data-filter-author="{{ author }}" role="button" tabindex="0"
         >
           {{ author }}
           <span class="ml-1 text-xs text-gray-500 dark:text-gray-400"
@@ -196,7 +196,7 @@ <h3 class="text-lg font-medium mb-4 dark:text-gray-200 flex items-center">
   </div>
 
   <!-- Search and Filter Controls -->
-  <div class="bg-white rounded-lg shadow p-4 dark:bg-gray-800">
+  <div id="plugin-filters" class="bg-white rounded-lg shadow p-4 dark:bg-gray-800">
     <div class="flex flex-col md:flex-row gap-4">
       <div class="flex-1">
         <input
@@ -204,13 +204,11 @@ <h3 class="text-lg font-medium mb-4 dark:text-gray-200 flex items-center">
           id="plugin-search"
           placeholder="Search plugins by name, description, or author..."
           class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 dark:bg-gray-700 dark:border-gray-600 dark:text-white"
-          oninput="filterPlugins()"
         />
       </div>
       <div class="flex gap-2">
         <select
           id="plugin-mode-filter"
-          onchange="filterPlugins()"
           class="px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 dark:bg-gray-700 dark:border-gray-600 dark:text-white"
         >
           <option value="">All Modes</option>
@@ -220,7 +218,6 @@ <h3 class="text-lg font-medium mb-4 dark:text-gray-200 flex items-center">
         </select>
         <select
           id="plugin-status-filter"
-          onchange="filterPlugins()"
           class="px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 dark:bg-gray-700 dark:border-gray-600 dark:text-white"
         >
           <option value="">All Status</option>
@@ -229,21 +226,18 @@ <h3 class="text-lg font-medium mb-4 dark:text-gray-200 flex items-center">
         </select>
         <select
           id="plugin-hook-filter"
-          onchange="filterPlugins()"
           class="px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 dark:bg-gray-700 dark:border-gray-600 dark:text-white"
         >
           <option value="">All Hooks</option>
         </select>
         <select
           id="plugin-tag-filter"
-          onchange="filterPlugins()"
           class="px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 dark:bg-gray-700 dark:border-gray-600 dark:text-white"
         >
           <option value="">All Tags</option>
         </select>
         <select
           id="plugin-author-filter"
-          onchange="filterPlugins()"
           class="px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 dark:bg-gray-700 dark:border-gray-600 dark:text-white"
         >
           <option value="">All Authors</option>
@@ -263,7 +257,7 @@ <h3 class="text-lg font-medium mb-4 dark:text-gray-200 flex items-center">
       data-name="{{ plugin.name | lower }}"
       data-description="{{ plugin.description | decode_html | lower }}"
       data-author="{{ plugin.author | lower }}"
-      data-mode="{{ plugin.mode }}"
+      data-mode="{{ plugin.mode | lower }}"
       data-status="{{ plugin.status }}"
       data-hooks="{{ plugin.hooks | join(',') if plugin.hooks else '' }}"
       data-tags="{{ plugin.tags | join(',') if plugin.tags else '' }}"
@@ -378,7 +372,7 @@ <h3 class="text-lg font-semibold text-gray-900 dark:text-gray-100">
 
       <!-- Action Button -->
       <button
-        onclick="showPluginDetails({{ plugin.name|tojson_attr }})"
+        data-show-plugin="{{ plugin.name }}"
         class="w-full mt-4 px-4 py-2 bg-indigo-600 text-white text-sm font-medium rounded-lg hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 transition-colors"
       >
         View Details →
@@ -429,7 +423,7 @@ <h3 class="mt-2 text-sm font-medium text-gray-900 dark:text-gray-100">
           Plugin Details
         </h3>
         <button
-          onclick="closePluginDetails()"
+          data-close-plugin-modal
           class="text-gray-400 hover:text-gray-500"
         >
           <svg
diff --git a/tests/js/admin-plugin-filters.test.js b/tests/js/admin-plugin-filters.test.js
new file mode 100644
index 0000000000..adc30d0419
--- /dev/null
+++ b/tests/js/admin-plugin-filters.test.js
@@ -0,0 +1,542 @@
+/**
+ * Unit tests for plugin filter delegation (issue #3271).
+ *
+ * Covers:
+ *   A. initializePluginFunctions() sets up input/change listeners on #plugin-filters
+ *   B. initializePluginFunctions() sets up click/keydown listeners on #plugins-panel
+ *   C. Typing in search box calls filterPlugins and hides/shows cards
+ *   D. Changing a dropdown calls filterPlugins
+ *   E. Clicking a hook/tag/author badge calls filterByHook/Tag/Author
+ *   F. Clicking "View Details" button calls showPluginDetails
+ *   G. Enter/Space on a focused badge calls the filter (keyboard navigation)
+ */
+
+import { describe, test, expect, beforeAll, afterAll, vi } from "vitest";
+import { loadAdminJs, cleanupAdminJs } from "./helpers/admin-env.js";
+
+let win;
+let doc;
+
+beforeAll(() => {
+    win = loadAdminJs({
+        beforeEval: (window) => {
+            window.getPaginationParams = () => ({
+                page: 1,
+                perPage: 10,
+                includeInactive: null,
+            });
+            window.buildTableUrl = (tableName, baseUrl) => baseUrl;
+            window.safeReplaceState = () => {};
+            window.IS_ADMIN = true;
+            // JSDOM does not implement scrollIntoView
+            window.HTMLElement.prototype.scrollIntoView = () => {};
+        },
+    });
+    doc = win.document;
+});
+
+afterAll(() => {
+    cleanupAdminJs();
+});
+
+// ---------------------------------------------------------------------------
+// Helper: build a minimal plugins panel + partial DOM
+// ---------------------------------------------------------------------------
+function buildPluginsDOM() {
+    doc.body.innerHTML = "";
+
+    // Outer panel (what admin.html provides)
+    const panel = doc.createElement("div");
+    panel.id = "plugins-panel";
+    doc.body.appendChild(panel);
+
+    // Modal (outside plugins_enabled block in the real template)
+    const modal = doc.createElement("div");
+    modal.id = "plugin-details-modal";
+    modal.className = "hidden";
+    const modalName = doc.createElement("div");
+    modalName.id = "modal-plugin-name";
+    const modalContent = doc.createElement("div");
+    modalContent.id = "modal-plugin-content";
+    const closeBtn = doc.createElement("button");
+    closeBtn.dataset.closePluginModal = "";
+    modal.append(modalName, modalContent, closeBtn);
+    panel.appendChild(modal);
+
+    // Inject partial content (what the fetch would return after sanitisation)
+    const partial = doc.createElement("div");
+    partial.className = "space-y-6";
+
+    // --- Hook badges (stats section) ---
+    const hookBadgeAll = doc.createElement("div");
+    hookBadgeAll.dataset.filterHook = "";
+    hookBadgeAll.setAttribute("role", "button");
+    hookBadgeAll.setAttribute("tabindex", "0");
+    hookBadgeAll.textContent = "All Hooks";
+
+    const hookBadgeRequest = doc.createElement("div");
+    hookBadgeRequest.dataset.filterHook = "request_hook";
+    hookBadgeRequest.setAttribute("role", "button");
+    hookBadgeRequest.setAttribute("tabindex", "0");
+    const hookSpan = doc.createElement("span");
+    hookSpan.textContent = "Request Hook";
+    hookBadgeRequest.appendChild(hookSpan);
+
+    // --- Tag badges ---
+    const tagBadgeAll = doc.createElement("span");
+    tagBadgeAll.dataset.filterTag = "";
+    tagBadgeAll.setAttribute("role", "button");
+    tagBadgeAll.setAttribute("tabindex", "0");
+    tagBadgeAll.textContent = "All Tags";
+
+    const tagBadgeSecurity = doc.createElement("span");
+    tagBadgeSecurity.dataset.filterTag = "security";
+    tagBadgeSecurity.setAttribute("role", "button");
+    tagBadgeSecurity.setAttribute("tabindex", "0");
+    tagBadgeSecurity.textContent = "security";
+
+    // --- Author badges ---
+    const authorBadgeAll = doc.createElement("span");
+    authorBadgeAll.dataset.filterAuthor = "";
+    authorBadgeAll.setAttribute("role", "button");
+    authorBadgeAll.setAttribute("tabindex", "0");
+    authorBadgeAll.textContent = "All Authors";
+
+    const authorBadgeIbm = doc.createElement("span");
+    authorBadgeIbm.dataset.filterAuthor = "ibm";
+    authorBadgeIbm.setAttribute("role", "button");
+    authorBadgeIbm.setAttribute("tabindex", "0");
+    authorBadgeIbm.textContent = "ibm";
+
+    // --- Search & filter controls (#plugin-filters) ---
+    const filtersSection = doc.createElement("div");
+    filtersSection.id = "plugin-filters";
+
+    const searchInput = doc.createElement("input");
+    searchInput.type = "text";
+    searchInput.id = "plugin-search";
+    filtersSection.appendChild(searchInput);
+
+    const modeFilter = doc.createElement("select");
+    modeFilter.id = "plugin-mode-filter";
+    const modeOpt = doc.createElement("option");
+    modeOpt.value = "";
+    modeOpt.textContent = "All Modes";
+    modeFilter.appendChild(modeOpt);
+    filtersSection.appendChild(modeFilter);
+
+    const statusFilter = doc.createElement("select");
+    statusFilter.id = "plugin-status-filter";
+    const statusOpt = doc.createElement("option");
+    statusOpt.value = "";
+    statusOpt.textContent = "All Status";
+    statusFilter.appendChild(statusOpt);
+    filtersSection.appendChild(statusFilter);
+
+    const hookFilter = doc.createElement("select");
+    hookFilter.id = "plugin-hook-filter";
+    const hookOpt = doc.createElement("option");
+    hookOpt.value = "";
+    hookOpt.textContent = "All Hooks";
+    hookFilter.appendChild(hookOpt);
+    filtersSection.appendChild(hookFilter);
+
+    const tagFilter = doc.createElement("select");
+    tagFilter.id = "plugin-tag-filter";
+    const tagOpt = doc.createElement("option");
+    tagOpt.value = "";
+    tagOpt.textContent = "All Tags";
+    tagFilter.appendChild(tagOpt);
+    filtersSection.appendChild(tagFilter);
+
+    const authorFilter = doc.createElement("select");
+    authorFilter.id = "plugin-author-filter";
+    const authorOpt = doc.createElement("option");
+    authorOpt.value = "";
+    authorOpt.textContent = "All Authors";
+    authorFilter.appendChild(authorOpt);
+    filtersSection.appendChild(authorFilter);
+
+    // --- Plugin grid with cards ---
+    const grid = doc.createElement("div");
+    grid.id = "plugin-grid";
+
+    const card1 = doc.createElement("div");
+    card1.className = "plugin-card";
+    card1.dataset.name = "http-header-filter";
+    card1.dataset.description = "filter sensitive http headers";
+    card1.dataset.author = "ibm";
+    card1.dataset.mode = "enforce";
+    card1.dataset.status = "enabled";
+    card1.dataset.hooks = "request_hook,response_hook";
+    card1.dataset.tags = "security,headers";
+    const viewBtn1 = doc.createElement("button");
+    viewBtn1.dataset.showPlugin = "http-header-filter";
+    viewBtn1.textContent = "View Details";
+    card1.appendChild(viewBtn1);
+    grid.appendChild(card1);
+
+    const card2 = doc.createElement("div");
+    card2.className = "plugin-card";
+    card2.dataset.name = "rate-limiter";
+    card2.dataset.description = "limits request rate";
+    card2.dataset.author = "community";
+    card2.dataset.mode = "permissive";
+    card2.dataset.status = "enabled";
+    card2.dataset.hooks = "request_hook";
+    card2.dataset.tags = "rate-limiting";
+    const viewBtn2 = doc.createElement("button");
+    viewBtn2.dataset.showPlugin = "rate-limiter";
+    viewBtn2.textContent = "View Details";
+    card2.appendChild(viewBtn2);
+    grid.appendChild(card2);
+
+    partial.append(
+        hookBadgeAll,
+        hookBadgeRequest,
+        tagBadgeAll,
+        tagBadgeSecurity,
+        authorBadgeAll,
+        authorBadgeIbm,
+        filtersSection,
+        grid,
+    );
+    panel.appendChild(partial);
+
+    return {
+        panel,
+        filtersSection,
+        searchInput,
+        modeFilter,
+        statusFilter,
+        hookFilter,
+        tagFilter,
+        authorFilter,
+        hookBadgeAll,
+        hookBadgeRequest,
+        tagBadgeAll,
+        tagBadgeSecurity,
+        authorBadgeAll,
+        authorBadgeIbm,
+        card1,
+        card2,
+        viewBtn1,
+        viewBtn2,
+        modal,
+        closeBtn,
+    };
+}
+
+// ---------------------------------------------------------------------------
+// A. Listener setup
+// ---------------------------------------------------------------------------
+
+describe("A. initializePluginFunctions() sets up listeners", () => {
+    test("input event on search box triggers filterPlugins", () => {
+        const { searchInput } = buildPluginsDOM();
+        win.initializePluginFunctions();
+
+        // Spy AFTER init; arrow-function wrapper in listener looks up win.filterPlugins
+        // at event time so the spy is picked up correctly
+        const spy = vi.spyOn(win, "filterPlugins");
+
+        searchInput.value = "header";
+        searchInput.dispatchEvent(new win.Event("input", { bubbles: true }));
+
+        expect(spy).toHaveBeenCalled();
+    });
+
+    test("change event on dropdown triggers filterPlugins", () => {
+        const { modeFilter } = buildPluginsDOM();
+        win.initializePluginFunctions();
+
+        const spy = vi.spyOn(win, "filterPlugins");
+
+        const enforceOpt = doc.createElement("option");
+        enforceOpt.value = "enforce";
+        modeFilter.appendChild(enforceOpt);
+
+        modeFilter.value = "enforce";
+        modeFilter.dispatchEvent(new win.Event("change", { bubbles: true }));
+
+        expect(spy).toHaveBeenCalled();
+    });
+});
+
+// ---------------------------------------------------------------------------
+// B. filterPlugins — search filtering
+// ---------------------------------------------------------------------------
+
+describe("B. filterPlugins search filtering", () => {
+    test("searching for 'header' hides card that does not match", () => {
+        const { searchInput, card1, card2 } = buildPluginsDOM();
+        win.initializePluginFunctions();
+
+        searchInput.value = "header";
+        searchInput.dispatchEvent(new win.Event("input", { bubbles: true }));
+
+        // card1 name/desc contains "header", card2 does not
+        expect(card1.style.display).not.toBe("none");
+        expect(card2.style.display).toBe("none");
+    });
+
+    test("clearing search shows all cards", () => {
+        const { searchInput, card1, card2 } = buildPluginsDOM();
+        win.initializePluginFunctions();
+
+        // First filter
+        searchInput.value = "header";
+        searchInput.dispatchEvent(new win.Event("input", { bubbles: true }));
+        expect(card2.style.display).toBe("none");
+
+        // Then clear
+        searchInput.value = "";
+        searchInput.dispatchEvent(new win.Event("input", { bubbles: true }));
+        expect(card1.style.display).toBe("block");
+        expect(card2.style.display).toBe("block");
+    });
+
+    test("mode filter hides cards with different mode", () => {
+        const { modeFilter, card1, card2 } = buildPluginsDOM();
+        win.initializePluginFunctions();
+
+        // Add the option so the select value can actually be set
+        const enforceOpt = doc.createElement("option");
+        enforceOpt.value = "enforce";
+        modeFilter.appendChild(enforceOpt);
+
+        modeFilter.value = "enforce";
+        modeFilter.dispatchEvent(new win.Event("change", { bubbles: true }));
+
+        // card1 mode=enforce, card2 mode=permissive
+        expect(card1.style.display).not.toBe("none");
+        expect(card2.style.display).toBe("none");
+    });
+});
+
+// ---------------------------------------------------------------------------
+// C. Badge click delegation
+// ---------------------------------------------------------------------------
+
+describe("C. badge click sets hook filter and calls filterPlugins", () => {
+    test("clicking a specific hook badge filters by that hook", () => {
+        const { hookBadgeRequest, hookFilter, card1, card2 } =
+            buildPluginsDOM();
+        win.initializePluginFunctions();
+
+        // Add option for request_hook to the filter dropdown
+        const opt = doc.createElement("option");
+        opt.value = "request_hook";
+        hookFilter.appendChild(opt);
+
+        hookBadgeRequest.dispatchEvent(
+            new win.MouseEvent("click", { bubbles: true }),
+        );
+
+        // Both cards have request_hook so both should be visible
+        expect(hookFilter.value).toBe("request_hook");
+        expect(card1.style.display).not.toBe("none");
+        expect(card2.style.display).not.toBe("none");
+    });
+
+    test("clicking a span inside a hook badge is handled via closest()", () => {
+        const { hookBadgeRequest, hookFilter } = buildPluginsDOM();
+        win.initializePluginFunctions();
+
+        const opt = doc.createElement("option");
+        opt.value = "request_hook";
+        hookFilter.appendChild(opt);
+
+        // Click the inner span, not the badge div directly
+        const innerSpan = hookBadgeRequest.querySelector("span");
+        innerSpan.dispatchEvent(new win.MouseEvent("click", { bubbles: true }));
+
+        expect(hookFilter.value).toBe("request_hook");
+    });
+
+    test("clicking the All Hooks badge resets the hook filter", () => {
+        const { hookBadgeAll, hookBadgeRequest, hookFilter } =
+            buildPluginsDOM();
+        win.initializePluginFunctions();
+
+        const opt = doc.createElement("option");
+        opt.value = "request_hook";
+        hookFilter.appendChild(opt);
+
+        // First select a specific hook
+        hookBadgeRequest.dispatchEvent(
+            new win.MouseEvent("click", { bubbles: true }),
+        );
+        expect(hookFilter.value).toBe("request_hook");
+
+        // Then click All Hooks
+        hookBadgeAll.dispatchEvent(
+            new win.MouseEvent("click", { bubbles: true }),
+        );
+        expect(hookFilter.value).toBe("");
+    });
+
+    test("clicking a tag badge sets the tag filter", () => {
+        const { tagBadgeSecurity, tagFilter, card1, card2 } = buildPluginsDOM();
+        win.initializePluginFunctions();
+
+        const opt = doc.createElement("option");
+        opt.value = "security";
+        tagFilter.appendChild(opt);
+
+        tagBadgeSecurity.dispatchEvent(
+            new win.MouseEvent("click", { bubbles: true }),
+        );
+
+        expect(tagFilter.value).toBe("security");
+        // card1 has security tag, card2 does not
+        expect(card1.style.display).not.toBe("none");
+        expect(card2.style.display).toBe("none");
+    });
+
+    test("clicking an author badge sets the author filter", () => {
+        const { authorBadgeIbm, authorFilter, card1, card2 } =
+            buildPluginsDOM();
+        win.initializePluginFunctions();
+
+        const opt = doc.createElement("option");
+        opt.value = "ibm";
+        authorFilter.appendChild(opt);
+
+        authorBadgeIbm.dispatchEvent(
+            new win.MouseEvent("click", { bubbles: true }),
+        );
+
+        expect(authorFilter.value).toBe("ibm");
+        // card1 author=ibm, card2 author=community
+        expect(card1.style.display).not.toBe("none");
+        expect(card2.style.display).toBe("none");
+    });
+});
+
+// ---------------------------------------------------------------------------
+// D. "View Details" button
+// ---------------------------------------------------------------------------
+
+describe("D. View Details button opens modal", () => {
+    test("clicking View Details calls showPluginDetails", () => {
+        const { viewBtn1 } = buildPluginsDOM();
+        win.initializePluginFunctions();
+
+        // Replace showPluginDetails to avoid actual fetch
+        const spy = vi.fn();
+        win.showPluginDetails = spy;
+
+        viewBtn1.dispatchEvent(new win.MouseEvent("click", { bubbles: true }));
+
+        expect(spy).toHaveBeenCalledWith("http-header-filter");
+    });
+});
+
+// ---------------------------------------------------------------------------
+// E. Modal close button
+// ---------------------------------------------------------------------------
+
+describe("E. Modal close button calls closePluginDetails", () => {
+    test("clicking close button hides the modal", () => {
+        const { modal, closeBtn } = buildPluginsDOM();
+        win.initializePluginFunctions();
+
+        modal.classList.remove("hidden");
+
+        closeBtn.dispatchEvent(new win.MouseEvent("click", { bubbles: true }));
+
+        expect(modal.classList.contains("hidden")).toBe(true);
+    });
+});
+
+// ---------------------------------------------------------------------------
+// F. Keyboard navigation (Enter/Space on badges)
+// ---------------------------------------------------------------------------
+
+describe("F. Keyboard navigation — Enter/Space on badges", () => {
+    test("pressing Enter on a hook badge triggers the filter", () => {
+        const { hookBadgeRequest, hookFilter } = buildPluginsDOM();
+        win.initializePluginFunctions();
+
+        const opt = doc.createElement("option");
+        opt.value = "request_hook";
+        hookFilter.appendChild(opt);
+
+        hookBadgeRequest.dispatchEvent(
+            new win.KeyboardEvent("keydown", { key: "Enter", bubbles: true }),
+        );
+
+        expect(hookFilter.value).toBe("request_hook");
+    });
+
+    test("pressing Space on a hook badge triggers the filter", () => {
+        const { hookBadgeRequest, hookFilter } = buildPluginsDOM();
+        win.initializePluginFunctions();
+
+        const opt = doc.createElement("option");
+        opt.value = "request_hook";
+        hookFilter.appendChild(opt);
+
+        hookBadgeRequest.dispatchEvent(
+            new win.KeyboardEvent("keydown", { key: " ", bubbles: true }),
+        );
+
+        expect(hookFilter.value).toBe("request_hook");
+    });
+
+    test("pressing other keys on a badge does not trigger the filter", () => {
+        const { hookBadgeRequest } = buildPluginsDOM();
+        win.initializePluginFunctions();
+
+        const spy = vi.spyOn(win, "filterByHook");
+
+        hookBadgeRequest.dispatchEvent(
+            new win.KeyboardEvent("keydown", { key: "Tab", bubbles: true }),
+        );
+
+        expect(spy).not.toHaveBeenCalled();
+    });
+
+    test("pressing Enter on View Details button opens modal", () => {
+        const { viewBtn1 } = buildPluginsDOM();
+        win.initializePluginFunctions();
+
+        const spy = vi.fn();
+        win.showPluginDetails = spy;
+
+        viewBtn1.dispatchEvent(
+            new win.KeyboardEvent("keydown", { key: "Enter", bubbles: true }),
+        );
+
+        expect(spy).toHaveBeenCalledWith("http-header-filter");
+    });
+
+    test("Space in search box is not swallowed by delegated handler", () => {
+        const { searchInput } = buildPluginsDOM();
+        win.initializePluginFunctions();
+
+        const evt = new win.KeyboardEvent("keydown", {
+            key: " ",
+            bubbles: true,
+            cancelable: true,
+        });
+        searchInput.dispatchEvent(evt);
+
+        expect(evt.defaultPrevented).toBe(false);
+    });
+
+    test("Enter on select dropdown is not swallowed by delegated handler", () => {
+        const { modeFilter } = buildPluginsDOM();
+        win.initializePluginFunctions();
+
+        const evt = new win.KeyboardEvent("keydown", {
+            key: "Enter",
+            bubbles: true,
+            cancelable: true,
+        });
+        modeFilter.dispatchEvent(evt);
+
+        expect(evt.defaultPrevented).toBe(false);
+    });
+});