Redesign the devtools panel and trace UI

[roprgm]

Summary

This PR redesigns the devtools panel and the trace inspection experience, including the host-page integration, responsive behavior, dense trace UI, and human-in-the-loop questions.

Panel and host-page integration

• Replace the floating window with a full-height panel docked to the right of the page.
• Reserve space for the panel so it does not cover the application being debugged.
• Preserve the host DOM and positioning contexts, and restore existing attributes and inline styles when the panel collapses or unmounts.
• Expose --eve-devtools-panel-width so fixed host controls can opt into the panel offset.
• Add a full-height resize edge with pointer and keyboard support while preserving minimum widths for both the panel and host page.
• Use a full-screen panel on narrow mobile viewports and respect safe-area insets.

Trace UI redesign

• Simplify the header and standardize icon sizing, alignment, contrast, and metric colors.
• Present input tokens, output tokens, tool calls, and duration in a compact, stable layout.
• Make turns, reasoning, and tool calls collapsible with one consistent disclosure pattern.
• Clamp long reasoning by default and allow the full reasoning row to toggle it.
• Keep the panel itself scrollable for arbitrarily long traces.
• Bound large tool input and output payloads to a readable height with local scrolling.
• Remove noisy borders and focus treatments while retaining clear keyboard focus states.
• Improve duration formatting to retain useful precision without leading zeroes or large layout shifts.

Interactive questions

• Project ask_question prompts and options into the trace with semantic lists.
• Show the selected answer beside its question in the devtools.
• Make options clickable in the demo and resume the agent session with the structured response.
• Ignore whitespace-only interim messages so questions do not create empty response rows.

Tests and documentation

• Add focused tests for page layout restoration, responsive panel sizing, duration formatting, and question projection.
• Document the docking behavior, fixed-element escape hatch, and test command.

Why

The previous floating window obscured the application and imposed a maximum usable content area. At the same time, dense traces, long reasoning, large tool payloads, and interactive questions did not have a consistent or complete presentation. This redesign keeps the app and inspector usable together while making complex agent runs easier to scan and debug.

Validation

• bun run check
• bun run test — 9 passing
• bun run build
• cd demo && bun run build
• Manual desktop and mobile verification of docking, resizing, scrolling, collapse states, and question selection

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
eve-devtools	Ready	Preview, Comment	Jul 15, 2026 5:10am