Split devtools into Inspect and Debug trays, rework the UI - #1010
Closed
pd-builds wants to merge 2 commits into
Closed
Split devtools into Inspect and Debug trays, rework the UI#1010pd-builds wants to merge 2 commits into
pd-builds wants to merge 2 commits into
Conversation
Rename the widget's two tools — OpenUI Devtools becomes Inspect, OpenUI Paste becomes Debug — and give them independent trays rather than one drawer that grows. Closing either leaves the other where it was. Layout: both trays fill an 85% block anchored bottom right (capped at 3456x2234). Inspect keeps a fixed width; Debug takes the remainder, and its editor/panels split is now draggable, opening at a quarter. Cards: overview stats read as a count chip plus a label, actions move above the diagnostics, and level chips are soft squares. Hover gives a card a stronger stroke and a shadow. Theme: dark mode is rebuilt around a single neutral ramp with five foreground steps and desaturated accent surfaces, all contrast checked. Adds card, control-*, level-* and tray-ring tokens so raised and inset surfaces are described rather than hand-picked per component. Tests cover the independent trays and returning an ejected window to the tray; the entry point into Debug is now a stream row's Debug button. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
Debug stopped being a view inside the Inspect drawer when the trays were split, so `onBack` was never passed and the button had not rendered since. Removes the prop, the branch that rendered it, and the icon import rather than leaving the dead path in place. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
What
Splits the devtools widget into two independent tools and reworks their UI. Targets
abhin/devtools-playgroundrather thanmain, so it lands inside #1000.Heads up on conflicts: this branched from
ddcb6475, before theEventRow.tsxextraction and the inline stack traces. It conflicts withOpenUIDevtools.tsxandStreamToolbar.tsx, and its drill-in stack-trace view is superseded by 85b33ee. Happy for those parts to be dropped in favour of the newer structure.Changes
card,control-*,level-*,promo-bgandtray-ringtokens so raised and inset surfaces are described rather than hand-picked.Frontend only — no parser, runtime or API changes, and no dependency or lockfile churn. The two
react-langedits are comment-only renames.Test Plan
examples/openui-chatthroughout: both trays, the split drag, eject/minimize, theme switching, and both colour schemes.typecheck,lint:check,format:checkclean; devtools tests 27 → 31, all passing (new coverage for independent trays and returning an ejected window).Checklist
packages/devtools/README.mdOpenUIDevtoolsand the package name are untouched🤖 Generated with Claude Code