[BUG][UI]: Alpine.js pagination controls throw console errors on every page load

[crivetimihai]

🐞 Bug Summary

The Admin UI browser console shows repeated Alpine.js expression errors on every page load. Each affected pagination control produces 4 errors (Unexpected token '}', perPage is not defined, totalItems is not defined, totalPages is not defined), totaling ~16-20 errors per load depending on visible sections. The pagination controls still render and function correctly — this is a cosmetic console pollution issue.

---

🧩 Affected Component

• mcpgateway - API
• mcpgateway - UI (admin panel)
• mcpgateway.wrapper - stdio wrapper
• Federation or Transports
• CLI, Makefiles, or shell scripts
• Container setup (Docker/Podman/Compose)
• Other (explain below)

---

🔁 Steps to Reproduce

1. Start the gateway: make dev or make serve
2. Navigate to /admin/
3. Open browser DevTools console
4. Observe repeated Alpine Expression Errors immediately after page load

---

🤔 Expected Behavior

No console errors from pagination controls.

---

📓 Logs / Error Output

Alpine Expression Error: Unexpected token '}'
  perPage: 10,
  totalItems: 0,
  totalPages: 0, ...
Alpine Expression Error: perPage is not defined
  Expression: "perPage"
Alpine Expression Error: totalItems is not defined
  Expression: "totalItems === 0 ? 'No items found' : ..."
Alpine Expression Error: totalPages is not defined
  Expression: "totalPages > 0"

Errors repeat 4x per affected section (servers, tools, gateways, tokens, agents).

---

🧠 Environment Info

Key	Value
Version or commit	adf8131b4 (main)
Runtime	Python 3.13
Platform / OS	Linux (WSL2) / Chromium
Container	N/A

---

🧩 Additional Context

Root cause: pagination_controls.html embeds a large JavaScript object with // single-line comments inside the x-data HTML attribute. Alpine.js evaluates x-data using new Function('return ' + expression). When HTMX performs an OOB swap to inject pagination controls, whitespace normalization can collapse newlines, turning:

// Navigate to specific page
goToPage(page) {

into:

// Navigate to specific page goToPage(page) {

This comments out the method definition, producing Unexpected token '}'. Once x-data parsing fails, all child expressions (x-model="perPage", etc.) fail because Alpine never created the reactive scope.

Suggested fix: Replace // comments with /* */ block comments in pagination_controls.html, or extract the pagination logic into an Alpine.data('pagination', ...) component registration in admin.js.

[gcgoncalves]

Fixed by #3137