fix(ui): reinit Alpine.js on OOB-swapped pagination controls after fi…

[crivetimihai]

Note: This PR was re-created from #3047 due to repository maintenance. Your code and branch are intact. @omorros please verify everything looks good.

🔗 Related Issue
Closes #3039

---

📝 Summary

When filtering/searching table items in the admin panel, pagination controls (page info text, navigation buttons) were not
rendering. This was caused by two issues:

1. Alpine.js not reinitializing after HTMX OOB swaps, When loadSearchablePanel() fires htmx.ajax(), the response OOB-swaps
   the pagination controls div, but Alpine.js's MutationObserver doesn't reliably detect and initialize the new x-data
   component. Added an htmx:afterSettle listener that explicitly calls Alpine.initTree() on uninitialized pagination controls.
2. Wrong swap style, pagination_controls.html defaults hx_swap to innerHTML, but partial templates return full
   elements, causing nested tables with duplicate IDs. Set hx_swap = 'outerHTML' across all partial templates and initial
   renders in admin.html.

   ---

   🏷️ Type of Change

   • Bug fix
   • Feature / Enhancement
   • Documentation
   • Refactor
   • Chore (deps, CI, tooling)
   • Other (describe below)

   ---

   🧪 Verification

   ┌────────────────┬───────────────┬────────┐
   │ Check │ Command │ Status │
   ├────────────────┼───────────────┼────────┤
   │ Lint suite │ make lint │ │
   ├────────────────┼───────────────┼────────┤
   │ Unit tests │ make test │ │
   ├────────────────┼───────────────┼────────┤
   │ Coverage ≥ 80% │ make coverage │ │
   └────────────────┴───────────────┴────────┘

   ---

   ✅ Checklist

   • Code formatted (make black isort pre-commit)
   • Tests added/updated for changes
   • Documentation updated (if applicable)
   • No secrets or credentials committed

   ---

   📓 Notes (optional)

   Files changed:

   • mcpgateway/static/admin.js — Added Alpine.js reinitialization listener for pagination controls after HTMX settles
   • mcpgateway/templates/admin.html — Set hx_swap = 'outerHTML' for 5 initial pagination renders
   • 7 partial templates (tools, servers, resources, prompts, gateways, agents, tokens) — Added {% set hx_swap = 'outerHTML' %}
     (matching existing pattern in users_partial.html)

   Screenshots:
   
   

[omorros]

Hi @crivetimihai thanks for reopening this! I've verified the code, everything looks good, intact and matching my original changes. Ready for review whenever you get the chance. Thanks!

[marekdano]

Confirm that all changes are the same compared to #3047

LGTM 🚀

[crivetimihai]

Rebased onto main (clean, no conflicts) and reviewed.

Changes I made during review:

1. teams_partial.html — Added missing {% set hx_swap = 'outerHTML' %} to OOB pagination controls. This was the only partial with OOB pagination that lacked the fix — all 10 partials are now consistent.

2. admin.js — Broadened the Alpine reinit selector from [id$="-pagination-controls"] (ends-with) to [id*="-pagination-controls"] (contains). The original selector missed the metrics top-performers pagination controls whose IDs follow the pattern top-{entity}-pagination-controls-visible.

3. admin-pagination.test.js — Added 8 unit tests for the Alpine.js reinit logic:

   • Calls initTree on uninitialized pagination controls
   • Skips already-initialized controls
   • Handles multiple controls (only inits uninitialized ones)
   • No error when Alpine is not loaded
   • No error when Alpine.initTree is not a function
   • No action when pagination div has no x-data child
   • Matches metrics top-*-pagination-controls-visible IDs
   • Toggle re-enabling still works alongside Alpine reinit

All 70 JS tests pass.

[crivetimihai]

Reviewed and ready to merge. The fix correctly addresses both root causes (Alpine.js reinit race and wrong swap style). Added missing teams_partial fix, broadened selector to cover metrics pagination, and added comprehensive test coverage (70 tests passing).