feat(ui): share trace drawer as a closable SidePanel and polish Lens

[devin-ai-integration]

TLDR

Problem this solves:

• The trace run drawer implemented resize, dismissal, and width persistence inline, so no shared side panel existed for other views
• The Lens Traces/Investigations mode switch floated beside the card instead of being joined to it
• Clicking outside the trace drawer did nothing, and an empty runs table showed no setup guidance
• The runs toolbar grew into separate search, agent, and status controls that each keystroke re-rendered and three URL params
• In dev, a non-JSON proxy response surfaced as a cryptic JSON parse error

How it solves it:

• Extracts the drawer into components/shared/SidePanel: outside press closes it, panel triggers keep it open, drag/arrow-key resize with clamped min width, width persisted to localStorage, exit animation preserved
• RunDrawer now renders through SidePanel instead of owning the chrome
• Centers the Lens mode switch in a notch joined to the content card and shows a running/queued activity dot on the Investigations tab
• Moves "Set up tracing" into the empty runs state, offered both when the range is empty and when filters hide every run
• Centers Lens loading and error states; dev rewrites forward JSON content-type requests to the proxy; the API client throws a clear ApiError naming the path and returned content type when JSON was expected
• Swaps arbitrary Tailwind values for theme-scale type and shape tokens across trace views and aligns pane bars, enforced by a new local/no-arbitrary-design-value eslint rule plus a tailwind-utility helper rule
• Marks Lens demo mode with a blue toggle and a blue frame border around the card and notch instead of the "You're viewing demo data" banner
• Drops the timeline's header strip (live pulse, run/agent counts, agent legend, range span) that repeated the Live toggle, runs table, and range picker
• Keeps the drawer's J/K/Escape shortcuts from firing while a menu or listbox is open inside the panel
• Opens an investigation's details when its row is clicked instead of the edit dialog, which moves to an explicit pencil button
• Keeps the previous trace visible (dimmed and inert) while the next one loads instead of flashing a loading skeleton
• Virtualizes the runs table with @tanstack/react-virtual so only rows near the viewport render as more pages load
• Drops the runs footer, whose count only tracked loaded pages and whose "Updated just now" never changed; the zoom clear button moves onto the timeline
• Replaces the agent and status dropdowns and search field with one ProseMirror query box: free text plus key:value clauses (-key:value negation, key:*glob* wildcards) over name, agent, status, model, input, and trace_id, with field and value autocomplete and a 150ms debounced emit; the URL keeps only q

Intentional product change: the trace drawer now closes when you press outside it, "Set up tracing" appears inside the empty runs table instead of above it, the Lens mode switch is centered in a notch connected to the card below, demo mode is marked by a blue toggle and frame instead of a banner line, the timeline's header strip is removed, the agent/status dropdowns are replaced by a single query box, and the runs footer is removed

User Flow

Before: an admin reviewing runs in Lens could only dismiss the drawer through its own controls and got no setup guidance on an empty table

1. They open https://litellm-domain/ui/lens/?tab=traces and click a run; the drawer opens on the right
2. They click the runs list behind the drawer expecting it to dismiss; nothing happens until they press Escape or click the close control
3. To find failed runs of one agent they open the agent dropdown, pick the agent, then open the status dropdown and pick error; the URL gains agent and status params
4. They pick a time range with no runs; the table renders empty and the "Set up tracing" card sits elsewhere on the page
5. Running the dev dashboard against a proxy that returns an HTML error page, the page fails on JSON.parse with a cryptic syntax error

After: the same review flow dismisses naturally, filters become one query, and an empty range shows the setup path in place

1. They open https://litellm-domain/ui/lens/?tab=traces and click a run; the drawer opens on the right
2. They click the runs list behind the drawer; it closes, and clicking another run swaps the panel to that run
3. To find failed runs of one agent they type agent:research status:error in the query box (autocomplete offers fields and values); the URL keeps only q
4. They pick a time range with no runs; the table itself shows "Set up tracing" with the setup card inline
5. Running the dev dashboard, a non-JSON proxy response now throws an error naming the path and the content type returned

Pre-Submission checklist

• Added and updated tests for the shared panel, drawer behavior, non-JSON API errors, eslint rules, run query parsing, suggestions, and Lens integrations
• Kept changes scoped to the dashboard UI
• Current-tip required CI and coverage pass
• Greptile confidence is at least 4/5 before maintainer review

Link to Devin session: https://app.devin.ai/sessions/d46fbba3b52b4edb9a80edf15a0d27bc
Open in Devin Desktop: https://app.devin.ai/desktop/session/d46fbba3b52b4edb9a80edf15a0d27bc?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

[greptile-apps]

Confidence Score: 5/5

[Medium risk] Refactors trace UI components and adds new search and editor dependencies.

The PR appears safe to merge based on the reviewed changes and resolved prior findings.

Summary

The PR extracts a shared closable trace side panel, adds virtualized runs and a unified query box, and updates Lens navigation, empty states, and styling.

• Changes since the previous review add keyboard activation for investigation rows and replace regex-based wildcard matching with a non-backtracking matcher.
• No new actionable issue was established.

_{Reviews (3) · Last reviewed commit: "fix(ui): harden Lens investigation and r..."}

[yujonglee-berri]

@greptile-apps wdyt

[devin-ai-integration]

@greptileai review