feat: polish Layers DevTools UI and add playground#23
Conversation
Ship docs-aligned panel branding with host-owned theme, TanStack UI primitives, a private Vite demo harness, and a patch changeset.
🦋 Changeset detectedLatest commit: 2a90512 The changes in this PR will be included in the next version bump. This PR includes changesets to release 2 packages
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
|
Warning Review limit reached
Next review available in: 53 minutes Enable usage-based reviews in Billing to review now. Otherwise, wait until the next included review is available. How can I continue?After more reviews become available, a review can be triggered using the To avoid repeated limits, reduce automatic review volume by pausing incremental auto-reviews earlier, using label-based review opt-in, excluding WIP or generated PR titles, or requesting reviews manually when the PR is ready. If your team needs uninterrupted high-volume reviews, an organization admin can enable usage-based reviews. How do review limits work?CodeRabbit enforces per-developer PR review limits for each organization. Most developers receive the normal plan review availability. For paid Pro and Pro+ PR reviews, CodeRabbit uses adaptive limits for sustained high-volume activity. When a developer's recent PR review activity reaches the 95th percentile or higher among CodeRabbit users, additional reviews become available more gradually as earlier reviews age out of the rolling window. Please refer docs for additional details. Review details⚙️ Run configurationConfiguration used: defaults Review profile: CHILL Plan: Pro Run ID: ⛔ Files ignored due to path filters (1)
📒 Files selected for processing (2)
📝 WalkthroughWalkthroughAdds a runnable DevTools playground showcasing layered UI behaviors and updates the Layers DevTools panel with branded, themed TanStack UI components. React DevTools now follows host color-scheme defaults and uses “Layers” as its plugin label. ChangesDevTools playground
DevTools panel polish
Repository maintenance
Estimated code review effort: 4 (Complex) | ~60 minutes Sequence Diagram(s)sequenceDiagram
participant Developer
participant Playground
participant LayerClient
participant StackOutlet
participant LayersDevtools
Developer->>Playground: open a capability
Playground->>LayerClient: create or update layer state
LayerClient->>StackOutlet: render layer content
LayerClient->>LayersDevtools: expose stack and snapshot state
LayersDevtools->>Developer: display themed stack details
🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✨ Finishing Touches🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
@tailwindcss/vite@4.1.11 nested vite@7.3.1 (high advisories); align with 4.3.3 + plugin-react 6.0.3.
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 5
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@apps/devtools-playground/src/layers.tsx`:
- Around line 499-503: Update the glyph-only close buttons in the dialog
sections around DialogTitle and the additional matching location to include
aria-label="Close", ensuring assistive technology can identify both controls.
- Around line 102-113: Update delay to check signal.aborted immediately before
or when setting up the timer, rejecting with the existing AbortError behavior
without waiting for a future event. Preserve the current timer cleanup and
abort-listener handling for signals that are not already aborted.
In `@apps/devtools-playground/src/ui.tsx`:
- Around line 89-119: Update ModalShell to provide accessible dialog naming and
keyboard behavior: require or support aria-label/aria-labelledby, move focus
into the shell when opened, contain focus while active, restore the previously
focused element on close, and route Escape through the existing layer dismissal
API. Apply the same behavior to the related drawer shell at the referenced
implementation, preserving status-role behavior where modal semantics do not
apply.
In `@packages/devtools/src/components/Shell.tsx`:
- Around line 121-123: Update the selection flow around selectedStackValue so
the effective fallback stack ID is also used by selectedSnapshot and
StackActions, or synchronize store.selectedStackId to stackIds[0] when selection
is empty. Ensure the displayed selector, snapshot state, and actions all operate
on the same effective stack ID.
In `@packages/react-devtools/src/resolveDefaultTheme.test.ts`:
- Around line 48-50: Update the “returns dark when window is unavailable” test
for resolveDefaultTheme to explicitly remove or stub the window global before
invoking the function, and restore the original global afterward so the test
reliably exercises the unavailable-window branch regardless of the test runtime
environment.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro
Run ID: ad7b271f-5981-486b-81ee-90ef29f14914
⛔ Files ignored due to path filters (1)
bun.lockis excluded by!**/*.lock
📒 Files selected for processing (31)
.agents/lessons.md.changeset/devtools-brand-polish.mdapps/devtools-playground/README.mdapps/devtools-playground/index.htmlapps/devtools-playground/package.jsonapps/devtools-playground/src/App.tsxapps/devtools-playground/src/DemoPage.tsxapps/devtools-playground/src/client.tsapps/devtools-playground/src/index.cssapps/devtools-playground/src/layers.tsxapps/devtools-playground/src/main.tsxapps/devtools-playground/src/portal.tsxapps/devtools-playground/src/ui.tsxapps/devtools-playground/src/vite-env.d.tsapps/devtools-playground/tsconfig.app.jsonapps/devtools-playground/tsconfig.jsonapps/devtools-playground/tsconfig.node.jsonapps/devtools-playground/vite.config.tsknip.jsonpackage.jsonpackages/devtools/src/brand.tspackages/devtools/src/components/LayersLogo.tsxpackages/devtools/src/components/Shell.tsxpackages/devtools/src/components/StackActions.tsxpackages/devtools/src/components/StackTable.tsxpackages/devtools/src/components/index.tsxpackages/react-devtools/src/ReactLayersDevtools.tsxpackages/react-devtools/src/plugin.test.tspackages/react-devtools/src/plugin.tsxpackages/react-devtools/src/resolveDefaultTheme.test.tspackages/react-devtools/src/resolveDefaultTheme.ts
💤 Files with no reviewable changes (1)
- .agents/lessons.md
1 participant
Summary
apps/devtools-playgroundVite harness (bun run playground:dev) for demos + visual QA@stainless-code/layers-devtools/@stainless-code/react-layers-devtools; OSprefers-color-schemefallback when host omitsthemeTest plan
bun run playground:dev→ open TanStack DevTools → Layers; toggle theme via host Settingsbun test packages/devtools/src packages/react-devtools/srcandbun run --filter '@stainless-code/react-layers-devtools' test:dombun run --filter '@stainless-code/layers-devtools-playground' typecheck(after workspace builds)Summary by CodeRabbit
New Features
Documentation
Chores