fix(dashboard): page traces with API next_cursor

[duyetbot]

Summary

• Persist next_cursor from GET /v1/projects/:id/traces and send it on Load more
• Stop reconstructing the cursor from created_at, which can skip or repeat traces when the list is ordered by updatedAt

Fixes #412

Test plan

• Open dashboard traces with more than 50 traces
• Click Load more and confirm the next page continues from the last updatedAt.id cursor (no skips/repeats)
• Switch projects while a page is loading and confirm the stale page is dropped

Summary by Sourcery

Use the traces list API’s next_cursor for pagination in the dashboard and reset cursor state when switching projects.

Bug Fixes:

• Prevent trace pages from skipping or repeating items by relying on the API-provided next_cursor instead of reconstructing cursors from created_at.
• Avoid loading additional trace pages for a stale project by dropping pagination requests when the active project changes.

[sourcery-ai]

Reviewer's guide (collapsed on small PRs)

Reviewer's Guide

This PR updates the dashboard traces hook to use the API-provided next_cursor for pagination instead of reconstructing a cursor from created_at, ensuring stable paging when traces are ordered by updatedAt and correctly handling project switches mid-load.

Sequence diagram for traces pagination using API next_cursor

sequenceDiagram
  actor User
  participant DashboardTraces
  participant useTracesData
  participant API

  User->>DashboardTraces: selectProject(selectedProjectId)
  DashboardTraces->>useTracesData: useTracesData(selectedProjectId)
  useTracesData->>useTracesData: setTraces([]), setHasMore(false), setNextCursor(null), setLoading(true)
  useTracesData->>API: GET /v1/projects/:id/traces?limit=50
  API-->>useTracesData: TracesListResponse(data, has_more, next_cursor)
  useTracesData->>useTracesData: setTraces(data), setHasMore(has_more), setNextCursor(next_cursor), setLoading(false)

  User->>DashboardTraces: clickLoadMore()
  DashboardTraces->>useTracesData: loadMore()
  useTracesData->>useTracesData: [loadingMore || !hasMore || !nextCursor] guard
  useTracesData->>API: GET /v1/projects/:id/traces?limit=50&cursor=encodeURIComponent(nextCursor)
  API-->>useTracesData: TracesListResponse(data, has_more, next_cursor)
  useTracesData->>useTracesData: [projectIdRef.current === selectedProjectId]
  useTracesData->>useTracesData: setTraces([...prev, ...data]), setHasMore(has_more), setNextCursor(next_cursor), setLoadingMore(false)

Loading

File-Level Changes

Change	Details	Files
Introduce a typed response model for the traces list API and track the server-provided pagination cursor in state.	Define a TracesListResponse type that includes data, has_more, and next_cursor fields. Add a nextCursor React state variable initialized to null and reset it when the selected project changes. Update the initial traces fetch to use the new TracesListResponse type and persist next_cursor from the API response.	packages/dashboard/src/components/dashboard/traces/_use-traces-data.ts
Change the pagination logic to use the persisted next_cursor for subsequent page loads instead of deriving a cursor from the last item’s created_at.	Update the loadMore guard condition to require a non-null nextCursor instead of checking traces.length. Build the pagination request URL with cursor=encodeURIComponent(nextCursor) rather than a created_at-based cursor. On successful page fetch, append new traces to the existing list, update hasMore, and refresh nextCursor from the response. Adjust loadMore hook dependencies to track nextCursor instead of traces.	packages/dashboard/src/components/dashboard/traces/_use-traces-data.ts

Assessment against linked issues

Issue	Objective	Addressed	Explanation
#412	Persist the next_cursor value returned by /v1/projects/:id/traces in the dashboard traces data hook.	✅
#412	Use the persisted next_cursor (instead of created_at) as the cursor when requesting subsequent pages of traces, so pagination aligns with the API’s updatedAt.id-based cursoring.	✅

---

Tips and commands

Interacting with Sourcery

• Trigger a new review: Comment @sourcery-ai review on the pull request.
• Continue discussions: Reply directly to Sourcery's review comments.
• Generate a GitHub issue from a review comment: Ask Sourcery to create an
  issue from a review comment by replying to it. You can also reply to a
  review comment with @sourcery-ai issue to create an issue from it.
• Generate a pull request title: Write @sourcery-ai anywhere in the pull
  request title to generate a title at any time. You can also comment
  @sourcery-ai title on the pull request to (re-)generate the title at any time.
• Generate a pull request summary: Write @sourcery-ai summary anywhere in
  the pull request body to generate a PR summary at any time exactly where you
  want it. You can also comment @sourcery-ai summary on the pull request to
  (re-)generate the summary at any time.
• Generate reviewer's guide: Comment @sourcery-ai guide on the pull
  request to (re-)generate the reviewer's guide at any time.
• Resolve all Sourcery comments: Comment @sourcery-ai resolve on the
  pull request to resolve all Sourcery comments. Useful if you've already
  addressed all the comments and don't want to see them anymore.
• Dismiss all Sourcery reviews: Comment @sourcery-ai dismiss on the pull
  request to dismiss all existing Sourcery reviews. Especially useful if you
  want to start fresh with a new review - don't forget to comment
  @sourcery-ai review to trigger a new review!

Customizing Your Experience

Access your dashboard to:

• Enable or disable review features such as the Sourcery-generated pull request
  summary, the reviewer's guide, and others.
• Change the review language.
• Add, remove or edit custom review instructions.
• Adjust other review settings.

Getting Help

• Contact our support team for questions or feedback.
• Visit our documentation for detailed guides and information.
• Keep in touch with the Sourcery team by following us on X/Twitter, LinkedIn or GitHub.

[coderabbitai]

Warning

Review limit reached

@duyetbot, you've reached your PR review limit, so we couldn't start this review.

Next review available in: 112 minutes

You've used all free OSS reviews for now. Wait for the free limit to reset to keep reviewing this public repository.

How can I continue?

After more reviews become available, a review can be triggered using the @coderabbitai review command as a PR comment. Alternatively, push new commits to this PR.

To avoid repeated limits, reduce automatic review volume by pausing incremental auto-reviews earlier, using label-based review opt-in, excluding WIP or generated PR titles, or requesting reviews manually when the PR is ready. If your team needs uninterrupted high-volume reviews, an organization admin can enable usage-based reviews.

How do review limits work?

CodeRabbit enforces per-developer PR review limits for each organization. Most developers receive the normal plan review availability.

For paid Pro and Pro+ PR reviews, CodeRabbit uses adaptive limits for sustained high-volume activity. When a developer's recent PR review activity reaches the 95th percentile or higher among CodeRabbit users, additional reviews become available more gradually as earlier reviews age out of the rolling window.

Please refer docs for additional details.

Review details

⚙️ Run configuration

Configuration used: Organization UI

Review profile: ASSERTIVE

Plan: Pro Plus

Run ID: 6c6ae99d-1a9b-4d3b-b7e5-075606ce6a58

📥 Commits

Reviewing files that changed from the base of the PR and between 39c28e4 and e25476c.

📒 Files selected for processing (2)

• packages/api/test/scopes.test.ts
• packages/dashboard/src/components/dashboard/traces/_use-traces-data.ts

✨ Finishing Touches

📝 Generate docstrings

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch fix/traces-next-cursor-412

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands.}

[sourcery-ai]

Hey - I've left some high level feedback:

• Consider extracting the TracesListResponse type to a shared location if other hooks or components consume the same traces API response, to avoid duplication and keep the API contract centralized.
• The cursor is passed through encodeURIComponent in the URL; if your api utility already handles query parameter encoding, you might simplify this by delegating encoding there to avoid potential double-encoding or inconsistencies with other calls.

Prompt for AI Agents

Please address the comments from this code review:

## Overall Comments
- Consider extracting the `TracesListResponse` type to a shared location if other hooks or components consume the same traces API response, to avoid duplication and keep the API contract centralized.
- The cursor is passed through `encodeURIComponent` in the URL; if your `api` utility already handles query parameter encoding, you might simplify this by delegating encoding there to avoid potential double-encoding or inconsistencies with other calls.

---

Sourcery is free for open source - if you like our reviews please consider sharing them ✨

• X
• Mastodon
• LinkedIn
• Facebook

_{Help me be more useful! Please click 👍 or 👎 on each comment and I'll use the feedback to improve your reviews.}

[duyet]

Sourcery nits noted but left as-is:

• TracesListResponse is only used in this hook; extracting it would be speculative until a second consumer exists.
• encodeURIComponent on next_cursor is intentional because the API cursor is ${updatedAt}.${id} and the dashboard api helper interpolates the query string rather than encoding params.

CI flake on scopedAuth timing (success 346ms vs denied 303ms) is unrelated to traces paging — pushed a more stable assertion against the 200ms pad floor.