PR #28225: fix(ui/log-drawer): paginate session trace list to surface logs beyond the first 50

• Repository: BerriAI/litellm
• Author: shenshouer
• State: open | merged: False
• Link: https://github.com/BerriAI/litellm/pull/28225

Description (problem / solution / changelog)

Relevant issues

Fixes #28224

Pre-Submission checklist

• I have Added testing in the tests/test_litellm/ directory — see note below; tests live next to the changed files in ui/litellm-dashboard/... per existing convention.
• My PR's scope is as isolated as possible, it only solves 1 specific problem
• My PR passes all unit tests on make test-unit — UI-only PR; ran npx vitest run src/components/view_logs/LogDetailsDrawer/ → 109 specs pass (Python make test-unit is not applicable to a frontend-only change).
• I have requested a Greptile review by commenting @greptileai and received a Confidence Score of at least 4/5 — Greptile gave 5/5 (see review comment dated 2026-05-19T07:10Z); both initially flagged P1/P2 issues addressed in follow-up commits.

Note on test placement: tests/test_litellm/ is for the Python SDK / proxy. The LiteLLM dashboard already follows the convention of co-locating *.test.tsx next to source files (e.g. view_logs/time_cell.test.tsx, view_logs/columns neighbors, the existing tests inside LogDetailsDrawer/). I added a vitest spec under the same path to match.

Type

🐛 Bug Fix

Changes

When the Log Details drawer opens in session mode, the left "Session" sidebar fetches /spend/logs/session/ui to enumerate every spend log for that session. The frontend ignored the endpoint's pagination params, so on sessions with more than 50 entries the sidebar silently truncated to the earliest 50 (ordered by startTime ASC) — see #28224 for the reproduction.

This PR threads the existing backend pagination (page, page_size, total_pages) through the UI:

• ui/litellm-dashboard/src/components/networking.tsx — sessionSpendLogsCall now takes page / page_size and forwards them in the query string. Defaults preserve the previous behavior.
• view_logs/LogDetailsDrawer/LogDetailsDrawer.tsx — adds sessionPage state, includes it in the React Query key so the page is keyed independently, and reads total_pages from the response. goToPreviousPage / goToNextPage clear the selected request id so the existing effect picks the first row of the new page. Page state resets to 1 on drawer close.
• view_logs/LogDetailsDrawer/DrawerHeader.tsx — NavigationSection grows two new buttons (DoubleLeftOutlined / DoubleRightOutlined) that mirror the K/J style, only render in session mode, and disable at page boundaries.
• view_logs/LogDetailsDrawer/useKeyboardNavigation.ts — routes Shift+J / Shift+K to onNextPage / onPreviousPage. Plain J/K still walks rows within the current page; the hook now checks e.shiftKey so the two paths stay mutually exclusive (with shift held, e.key is already "J"/"K", which would otherwise conflate them).

Tests

view_logs/LogDetailsDrawer/useKeyboardNavigation.test.ts (new) covers:

• J / K walk the current page within bounds and no-op at head/tail
• Shift+J / Shift+K invoke the page handlers and never fall through to row-walk
• Shift+J without an onNextPage handler is a safe no-op (doesn't silently walk forward)
• Escape and isOpen=false honor existing semantics

$ npx vitest run src/components/view_logs/LogDetailsDrawer/
PASS (109) FAIL (0)

Manual verification

• Session with 137 spend logs (3 pages):
  • Drawer opens on page 1 with the earliest 50 events; both ⇧K button and Shift+K disabled.
  • ⇧J / Shift+J → page 2, sidebar refreshes, currentLog jumps to the new page's first row, both prev and next page controls are enabled.
  • ⇧J again → page 3, ⇧J button disabled.
  • J / K continue to walk only within the visible page (50 rows).
• Non-session mode (clicking a row without session_id): the page-control buttons are not rendered, and Shift+J / Shift+K are no-ops; existing behavior unchanged.

What this does NOT do

• Does not change the backend default page_size=50 or upper bound 100. If a maintainer would prefer auto-fetching all pages over surfacing pagination controls, happy to re-spin.
• Does not add cumulative / infinite-scroll behavior — each page independently replaces the sidebar. Mirrors how the outer logs table already paginates.

Screenshots / Proof of Fix

(UI-only change; will attach screenshots in a follow-up comment after the PR opens.)

Changed files

• ui/litellm-dashboard/src/components/networking.tsx (modified, +9/-3)
• ui/litellm-dashboard/src/components/view_logs/LogDetailsDrawer/DrawerHeader.tsx (modified, +63/-2)
• ui/litellm-dashboard/src/components/view_logs/LogDetailsDrawer/LogDetailsDrawer.tsx (modified, +67/-8)
• ui/litellm-dashboard/src/components/view_logs/LogDetailsDrawer/useKeyboardNavigation.test.ts (added, +217/-0)
• ui/litellm-dashboard/src/components/view_logs/LogDetailsDrawer/useKeyboardNavigation.ts (modified, +24/-16)