refactor(extension): TS-composed inspector view + brand/layout token split - #65
Merged
Conversation
…split
Replace the static media/inspector.{html,css} markup with a TS-composed
view: atoms (text/pill/icon) -> components (metric/preview) -> view
(views/inspector.ts), each owning its styles via constructable
stylesheets (style.ts registry). Design values live in brand.css
(tokens); composition in layout.css (formal selectors); the shell
(run_inspector.ts) owns only CSP/nonce/stylesheet wiring, and the
webview entry (inspector_webview.ts) is pure mount + message plumbing.
Also de-yellows the inspector: --color-run now follows the theme's
progress color, and the <0||0> mark / hero metric label drop the accent
literal (--color-accent stays defined in brand.css, just unapplied).
Contract test now pins the shell<->view seam (stylesheets + bundle
linked, CSP grants, brand token present) instead of DOM ids — ids are
internal to the view. packaging.test's required-assets list swaps
inspector.{html,css} for brand.css/layout.css to match.
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
kateebonner
requested review from
Rchari1 and
jack-champagne
and removed request for
Rchari1 and
jack-champagne
July 2, 2026 20:56
This was referenced Jul 2, 2026
…view-reorg stack
kateebonner
added a commit
that referenced
this pull request
Jul 2, 2026
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
No UX changes — this is a refactor to make the later design work easier. (Only visible diff: the yellow accent is dropped, since it was hard to read.)
Starts the UX pass with a more scalable, modular organization centered on the inspector — the only custom component we've built so far.
media/ui/atoms (text/pill/icon) → components (metric/preview) → view (views/inspector.ts), each owning its styles via constructable stylesheets (style.tsregistry). The staticmedia/inspector.{html,css}files are deleted.brand.css(colors/type/space, preferring--vscode-*theme vars), composition inlayout.css(.stack/.row/.grid-fit…). The shell (run_inspector.ts) owns only CSP/nonce/stylesheet wiring; the webview entry (inspector_webview.ts) is pure mount + message plumbing.--color-runnow follows the theme progress color; the<0||0>mark and hero metric label drop the accent literal (--color-accentstays defined, just unapplied).Note for @raghav — touches two files in your lane
inspector_view_contract.test.ts— the view is TS-composed now, so the old DOM-id pinning is gone. It now pins the actual shell⇄view seam: stylesheets + bundle linked, CSP grants everything the view needs, brand token present. IDs/classes are internal to the view and free to change.packaging.test.ts— required-assets list swapsinspector.html/.cssforbrand.css/layout.cssto match.No fixture-loader changes. Message protocol (
runlabel/iteration/warming/completed/refresh/ping) is unchanged.Verified
🤖 Generated with Claude Code