[lxsmnsyc]

The toolbar now opens as a full-width dock at the bottom of the page. Closed, it is a small grip at the bottom center that does not cover the page's controls.

Screenshots

The closed dock grows into a pull tab on hover or focus.

The open dock with the Server functions tab.

The open dock with the Ownership tab.

Changes

• The dock spans the page width. Drag its top edge to change its height. The page gets bottom padding so it can scroll past the dock.
• Closed, the dock is a 40 by 5 pixel grip at the bottom center. It grows into a pull tab on hover or focus. It turns red when there are errors.
• Click the grip, or drag it up, to open the dock. Dragging sets the height to where the pointer stops.
• Alt+Shift+D opens and closes the dock.
• A side nav holds the Errors, Server functions, Reactivity and Ownership tabs, with counts of errors and calls. Arrow keys move between tabs.
• The header shows the version and the current route.
• The dock keeps its open state, tab and height in localStorage across reloads.
• An error opens the dock on the Errors tab. The tab shows a message when there are no errors.
• Selected tabs, calls and stack frames use a rounded fill instead of a colored left border. Graph nodes show their kind with a colored dot and tint.
• The panels drop their own title rows, since the side nav names them.
• The error code view scrolls to the frame inside the dock.
• The dragging toolbar pill is removed.

Testing

• pnpm test, pnpm typecheck, pnpm check and pnpm format:check pass.
• pnpm test:e2e passes. The tests open tabs through the dock now.
• A new e2e test checks the dock's position and resizing. It also checks that the height, tab and closed state are kept across a reload.
• A new e2e test checks that the grip sits on the bottom edge and adds no padding. It also checks that dragging it up opens the dock and that Alt+Shift+D toggles it.
• Checked each tab by hand in examples/demo.

The screenshots are stored on the pr-assets/devtools-dock branch, which can be deleted after merge.

🤖 Generated with Claude Code

[Xoppyc]

That's actually really clean! I couldn't find anything so LGTM

P.S. - I like how colorful and easier to read reactivity graph became with border and bg being color-mixed from node-kind =)

[lxsmnsyc]

@Xoppyc my mistake with the floating bar design lol. Actually one of the Start team wanted it non-visually intrusive so I gotta agree with that take.