feat: Pagination with Reka

[BGZStephen]

Summary

Related Linear tickets, Github issues, and Community forum posts

DES-321

Review / Merge checklist

• PR title and summary are descriptive. (conventions)
• Docs updated or follow-up ticket created.
• Tests included.
• PR Labeled with release/backport (if the PR is an urgent fix that needs to be backported)

[bundlemon]

BundleMon

Unchanged files (2)

Status	Path	Size	Limits
✅	WASM Dependencies tree-sitter-bash.wasm	181.26KB	-
✅	WASM Dependencies tree-sitter.wasm	74.47KB	-

No change in files bundle size

Groups updated (2)

Status	Path	Size	Limits
✅	**/*.js	11.38MB (+88.4KB +0.76%)	-
✅	**/*.css	231.49KB (+10.71KB +4.85%)	-

Final result: ✅

View report in BundleMon website ➡️

---

Current branch size history | Target branch size history

[codecov]

Codecov Report

❌ Patch coverage is 48.69565% with 59 lines in your changes missing coverage. Please review.

Files with missing lines	Patch %	Lines
.../v2/components/N8nPagination/Pagination.stories.ts	1.72%	57 Missing ⚠️
...gn-system/src/v2/components/N8nPagination/index.ts	0.00%	2 Missing ⚠️

📢 Thoughts on this report? Let us know!

[cubic-dev-ai]

5 issues found across 6 files

Prompt for AI agents (all 5 issues)

Understand the root cause of the following 5 issues and fix them.


<file name="packages/frontend/@n8n/design-system/src/v2/components/N8nPagination/component-pagination.md">

<violation number="1" location="packages/frontend/@n8n/design-system/src/v2/components/N8nPagination/component-pagination.md:33">
Both Pagination examples use `ref` in `&lt;script setup&gt;` without importing it, so the snippets throw `ref is not defined` when copied into a Vue component. Add `import { ref } from &#39;vue&#39;` at the top of each example block.</violation>
</file>

<file name="packages/frontend/@n8n/design-system/src/v2/components/N8nPagination/Pagination.test.ts">

<violation number="1" location="packages/frontend/@n8n/design-system/src/v2/components/N8nPagination/Pagination.test.ts:61">
`should not render ellipsis for small page counts` never inspects the ellipsis character, so it cannot catch the regression it claims to cover.</violation>

<violation number="2" location="packages/frontend/@n8n/design-system/src/v2/components/N8nPagination/Pagination.test.ts:134">
`should update current page when clicking next button` never fails when the next button is missing because the entire assertion block is wrapped in `if (nextButton)`, so the test silently does nothing if the component regresses.</violation>

<violation number="3" location="packages/frontend/@n8n/design-system/src/v2/components/N8nPagination/Pagination.test.ts:157">
`should update current page when clicking prev button` also guards the entire test with `if (prevButton)`, so the test passes even when the prev button is not rendered and therefore never validates the behavior.</violation>
</file>

<file name="packages/frontend/@n8n/design-system/src/v2/components/N8nPagination/Pagination.vue">

<violation number="1" location="packages/frontend/@n8n/design-system/src/v2/components/N8nPagination/Pagination.vue:26">
`page` is never synced when `currentPage` prop changes, so the active pagination state drifts whenever the parent updates the prop programmatically. Mirror prop updates into the local ref (e.g., via a watch/computed) so highlighting and internal state stay in sync.</violation>
</file>

_{Reply to cubic to teach it or ask questions. Re-run a review with @cubic-dev-ai review this PR}

[currents-bot]

✅

E2E Tests: n8n tests passed after 8m 46.5s

🟢 588 · 🔴 0 · ⚪️ 12 · 🟣 2

View Run Details

Run Details

• Project: n8n

• Groups: 2

• Framework: Playwright

• Run Status: Passed

• Commit: d3807f7

• Spec files: 96

• Overall tests: 600

• Duration: 8m 46.5s

• Parallelization: 9

Groups

GroupId	Results	Spec Files Progress
ui	🟢 539 · 🔴 0 · ⚪️ 12 · 🟣 2	90 / 90
ui:isolated	🟢 49 · 🔴 0 · ⚪️ 0	6 / 6

---

This message was posted automatically by currents.dev | Integration Settings