agentic-community/mcp-gateway-registry

tech debt: implement proper frontend pagination for servers, agents, and skills

Open

Aperta il 23 apr 2026

Vedi su GitHub
 (0 commenti) (0 reazioni) (1 assegnatario)Python (668 star) (178 fork)auto 404
enhancementgood first issuetechnical-debt

Descrizione

Context

Issue #879 raised the API limit from 100 to 500 as a quick fix, but this is a ceiling that will eventually be hit. The frontend currently fetches a single page of results and has no mechanism to load more.

Current State

  • Backend endpoints (/api/servers, /api/agents, /api/skills) support limit and offset query parameters and return total_count in the response
  • Frontend calls each endpoint once with ?limit=500 and renders whatever comes back
  • No "load more", infinite scroll, or page navigation exists in the UI

Proposed Solution

Implement client-side pagination in the Dashboard for all three asset types (servers, agents, skills):

  1. Use total_count from the API response to detect when more items exist
  2. Either fetch all pages in a loop on initial load, or add a "Load More" / infinite scroll pattern
  3. Update useServerStats.ts to handle multi-page fetching
  4. Consider adding a search/filter bar that uses the backend query parameter to reduce payload size

Acceptance Criteria

  • All servers are visible in the UI regardless of total count
  • All agents are visible in the UI regardless of total count
  • All skills are visible in the UI regardless of total count
  • No hardcoded limit caps the number of visible items

Guida contributor

Tech stack
typescriptreact
Dominio
frontend
Tipo issue
feature
DifficoltàQuanto dovrebbe essere impegnativa per un nuovo contributor.
2
Tempo stimatoTempo stimato per completare e verificare uno scope piccolo.
1-2 days
Stato attivitàQuanto è probabile che la issue sia ancora attiva e reviewable.
active
ChiarezzaQuanto chiaramente la issue descrive problema, scope e risultato atteso.
clear
Prerequisiti
ReactTypeScriptREST API pagination
Adatta ai principiantiQuanto la issue è adatta a contributor alla prima esperienza.
65
Direzione di ricerca
Esamina il codice frontend in useServerStats.ts e il componente Dashboard per comprendere la logica di recupero corrente. Quindi implementa la paginazione utilizzando i parametri total count e offset/limit dell'API. Considera l'aggiunta di un pulsante 'Carica altro' o dello scorrimento infinito automatico. Assicurati che tutti i server, agenti e skill siano recuperati completamente.