feat(skills): paginate registry tab and preserve state across detail navigation#2097
Merged
feat(skills): paginate registry tab and preserve state across detail navigation#2097
Conversation
Contributor
There was a problem hiding this comment.
Pull request overview
This PR upgrades the Skills Registry experience to use server-side pagination, persists pagination state in the /skills route search params for better back/refresh behavior, and introduces a reusable pagination control component used by the Registry tab.
Changes:
- Added
/skillsroute search validation forpage/limitand wired these into the registry query loader. - Implemented server-driven pagination + URL state synchronization in
SkillsPage(including StrictMode-safe “reset to page 1 on search change”). - Added a reusable
PaginationUI component and accompanying unit/integration tests; updated skill detail back-navigation to use history when available.
Reviewed changes
Copilot reviewed 10 out of 10 changed files in this pull request and generated 3 comments.
Show a summary per file
| File | Description |
|---|---|
| renderer/src/routes/skills.tsx | Validates tab/page/limit search params and prefetches registry data using page/limit. |
| renderer/src/features/skills/lib/registry-pagination.ts | Centralizes registry page-size defaults/options. |
| renderer/src/features/skills/components/skills-page.tsx | Uses URL-backed pagination state, server-side pagination query params, and renders the new Pagination control. |
| renderer/src/features/skills/components/skill-detail-layout.tsx | Updates back navigation behavior to preserve prior location state via history. |
| renderer/src/features/skills/components/tests/skills-page.test.tsx | Adds pagination integration tests (URL round-trip + StrictMode regression coverage). |
| renderer/src/features/skills/components/tests/skill-detail-layout.test.tsx | Adds tests ensuring the Back button restores previous search params when possible. |
| renderer/src/features/registry-servers/components/registry-detail-header.tsx | Adds optional historyBack behavior for restoring prior URL/search state. |
| renderer/src/common/mocks/fixtures/registry_registryName_v0_1_x_dev_toolhive_skills/get.ts | Adds MSW AutoAPIMock fixture for the registry skills endpoint including pagination metadata. |
| renderer/src/common/components/ui/pagination.tsx | Introduces reusable pagination UI (range label, nav buttons, page-size selector). |
| renderer/src/common/components/ui/tests/pagination.test.tsx | Adds unit coverage for the new Pagination component. |
- Clamp pageSize to >= 1 in the shared Pagination component so invalid inputs can't produce Infinity totals or negative ranges. - Derive REGISTRY_PAGE_SIZE_OPTIONS / DEFAULT_REGISTRY_PAGE_SIZE from the Pagination component's DEFAULT_PAGE_SIZE_OPTIONS to keep a single source of truth. - Document why the registry skills fixture keeps V01X (uppercase) — MSW's auto-mocker derives the lookup name via its own toPascalCase and would break if aligned with the SDK's V01x casing. Made-with: Cursor
JAORMX
approved these changes
Apr 24, 2026
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
The skills registry API exposes
page/limitand a total count, but the Registry tab always asked for page 1 and client-rendered everything. This PR wires up real server-side pagination, persistspage/limitin the URL so they survive navigating into a skill detail and back, and extracts the controls into a reusable component.Kapture.2026-04-23.at.18.33.43.mp4
Summary
Paginationcomponent (results counter, first / prev / next, current page, items-per-page selector). Hides itself when the total fits in the smallest page size.[12, 24, 50, 100].pageandlimitlive in the/skillsroute search params, so refresh and back-navigation from the skill detail restore the exact page.router.history.back()) instead of issuing a fresh navigation that strippedpage/limit.useEffectand into the debounced event handler — per React – You Might Not Need an Effect — which also fixes a StrictMode dev bug where the double-invoked effect clobbered the URL'spageon every mount.How to validate
replace), search resets to page 1./skills_/ns/name→ Back falls through to/skills?tab=registry.Tests
pnpm test:nonInteractive— 1913 passing. New coverage:Paginationunit tests,SkillsPagepagination integration tests (incl. StrictMode regression + URL round-trip),SkillDetailLayoutback-button tests.pnpm type-checkclean.