docs(site): use real DevTools screenshots on the /devtool page - #273
Merged
Conversation
Replace the stylized CSS mock panels on the /devtool landing page with
real dark-mode screenshots of the actual in-app DevTools — Data grid +
query-plan inspector, Changes timeline, Performance boot timeline, Logs,
and Seed — captured against a seeded demo workspace.
Also fix the panel tab switcher: `.dt-panel` combines `display: grid`
with the `hidden` attribute, and the grid utility overrode `[hidden]`'s
`display: none`, so every panel stacked and switching tabs did nothing.
A scoped `.dt-panel[hidden] { display: none !important }` restores it.
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Contributor
|
✓ Changelog fragment found — thanks! |
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Contributor
|
Preview removed for PR #273. |
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
1 participant
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
The
/devtoollanding page used stylized CSS "mock panel" approximations of the xNet DevTools. This replaces them with real dark-mode screenshots of the actual in-app DevTools, captured against a seeded demo workspace (Seed panel → Converge · Medium → 615 nodes, 26 docs).Taskgrid (32 rows, colored status/priority badges, due dates, assignees) + the live query-plan inspector (Strategy: storage-query · 127ms · Returned 32)The "Panels shown as stylized representations." caption is removed.
Bonus fix — tab switcher
While wiring this up I found the panel tab switcher was visually broken:
.dt-panelcombinesdisplay: gridwith thehiddenattribute, and thegridutility overrode[hidden]'sdisplay: none, so every panel stacked and clicking a tab did nothing. Added a scoped.dt-panel[hidden] { display: none !important }so only the selected panel shows.Notes
.dt-panelmaps to a real image (no broken<img>).update/deletewrites driven from the console spuriously trip the CRDT conflict detector (a main-thread/worker round-trip artifact, not real app behavior), which littered the timeline withconflictrows. A clean Lamport-ordered create feed is the honest, representative shot.packages/*touched) → no changeset.Verification
pnpm --filter site build→ ✅ 92 pages built clean.200 image/png, all 5<img>load (1360×680), caption gone, tab switcher shows exactly one panel and swaps images on click.🤖 Generated with Claude Code