refactor(ui): compose dashboard pages with shared layouts

[devin-ai-integration]

TLDR

Problem this solves:

• Dashboard pages duplicate padding and tab layout rules
• Logs mixes page composition into a misleading table component
• Empty log tables leave pagination halfway down the screen

How it solves it:

• Compose Logs tabs directly in the route
• Share page, content, and tab primitives across ten pages
• Share full-height tables and centered empty states across Logs

Intentional product change: standardize page spacing, remove duplicate Logs headings, and move refresh status into the toolbar. Full-height tables keep pagination at the bottom instead of immediately below the last row

User Flow

Before: Logs panels use inconsistent spacing and leave unused space below short tables

1. Open http://127.0.0.1:3001/logs/
2. View Request Logs with no requests and see a large refresh banner
3. Switch to Deleted Keys or Deleted Teams and see a short table

After: Logs panels share spacing and fill the available screen height

1. Open http://127.0.0.1:3001/logs/
2. View Request Logs with no requests and see refresh status in the toolbar
3. Switch to Deleted Keys and Deleted Teams and see centered empty states with pagination at the bottom

Validation

Focused Logs and table tests: 219 passed across 11 files. Shared tab tests: 98 passed across 3 files; these runs overlap

Changed-file Prettier and ESLint pass with no errors, the ESLint budget gate passes (complexity back at 140 after moving DataTable layout classes to cva variants), and knip passes. Shared, Logs and view_logs tests: 1029 passed across 90 files. Full TypeScript check: no diagnostics in changed files

Manually checked Request Logs and Deleted Teams against the local proxy on port 4000 using the dashboard dev server on port 3001

Pre-Submission checklist

• I have added meaningful tests
• Focused test files pass locally
• Required CI checks pass
• Scope is limited to dashboard page composition and layout
• Greptile confidence is at least 4/5

Type

Refactoring

Caveats

Low

• Before/after screenshot attachments are pending
• CI, coverage, Greptile, Veria, and Bugbot results are pending
• Remaining dashboard pages still need shared layout adoption

QA runbook

Prerequisites: an authenticated proxy admin session, a live proxy on port 4000, and the dashboard dev server on port 3001

• tests/e2e/ui/tests/logs/logs.spec.ts / log tables fill the available height and empty requests stay centered after resizing
  • Open http://127.0.0.1:3001/logs/
  • Search for a unique nonexistent request ID
  • Set the viewport to 1440x900, then 1024x720
  • Expect pagination 24px above the viewport bottom
  • Expect the empty state centered in the visible table body
  • Switch to Deleted Keys and Deleted Teams; expect the same pagination placement
  • Return to Request Logs; expect the search to remain
  • Sanity check: restoring short tables must fail the height assertion

Link to Devin session: https://app.devin.ai/sessions/d4d393c22eda4c3cabea94ab85532ed3
Open in Devin Desktop: https://app.devin.ai/desktop/session/d4d393c22eda4c3cabea94ab85532ed3?variant=devin
Requested by: @yujonglee-berri

[devin-ai-integration]

I'll fix CI failures and address comments from users with write access. I'll skip comments containing "(aside)".

• Disable automatic comment, CI, and merge conflict monitoring

[codspeed]

Merging this PR will not alter performance

✅ 31 untouched benchmarks

---

_{Comparing litellm_logs_page_composition (2e502bd) with main (b877a38)}

[greptile-apps]

Confidence Score: 4/5

[Medium risk] Dashboard pages refactored to use shared layout components.

The PR appears safe to merge, with a non-blocking improvement needed in the empty-state centering test

Findings

1.  Centering check misses visible bounds ▶

Summary

This PR moves Logs composition into the route and adds shared page, header, and tab components across dashboard pages

• Logs tables fill the available height, with refresh status in the toolbar
• Role checks, active-panel props, and date-filter resets remain unchanged
• The new browser test should measure centering within the visible table body
• devin-ai-integration[bot] explicitly identifies standardized spacing, removed duplicate Logs headings, toolbar refresh status, and bottom-aligned pagination as intentional product changes. Those changes were not treated as regressions

_{Reviews (1) · Last reviewed commit: "refactor(ui): express DataTable layout c..."}

[greptile-apps]

Centering check misses visible bounds

The vertical check compares the message with the whole tbody, not the area users can see. An overflowing body can pass even when the message is off-center on screen. Compare against the intersection of the body and scroller bounds instead