Trace page: expanded row detail panel has poor layout — should use resizable panel like Chrome DevTools #223
Description
Current Behavior
When you expand a row in the Trace page, the detail view (INPUT/OUTPUT, metadata) renders inline at the bottom of the page below all the trace rows. This has several problems:
- Disconnected from context — The expanded detail appears far below the row you clicked, so you lose visual connection between the trace entry and its details.
- Small, fixed-size windows — The INPUT and OUTPUT sections are cramped with no way to resize them. Long JSON payloads and tool outputs (like the codebase exploration result shown) require excessive scrolling within tiny panels.
- No clear visual hierarchy — It's not obvious which row is expanded or how to collapse it. The detail just appears at the page bottom.
Expected Behavior
Take inspiration from Chrome DevTools layout:
- Side panel or bottom panel that is resizable via drag handle (like the DevTools dock).
- Panel should stay anchored and visible while scrolling through trace rows — not pushed to the bottom of a long page.
- The selected/expanded row should be visually highlighted so you know which row's detail you're viewing.
- Split-pane layout: trace list on top (or left), detail panel on bottom (or right), with a draggable divider.
- INPUT and OUTPUT sections should have expandable/collapsible code blocks with proper syntax highlighting and copy buttons.
Screenshot
User provided a screenshot showing the trace page at localhost:50142/view/ses_... where an expanded "task" row's detail (Kind, Status, Duration, Call ID, INPUT JSON, OUTPUT text) renders at the very bottom of the page in a small, non-resizable format.
Metadata
| Field | Value |
|---|---|
| CLI Version | v0.4.1 |
| Platform | darwin |
| Architecture | arm64 |
| OS Release | 25.3.0 |
| Category | ux |
| Working Directory | AI-Tools |
| Session ID | ses_3030e1e46ffey2pcMRovdii3tK |