refactor(extension): TS-composed inspector view + brand/layout token split by kateebonner · Pull Request #65 · harmoniqs/amicode

kateebonner · 2026-07-02T20:52:52Z

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.

View is now TS-composed: media/ui/ atoms (text/pill/icon) → components (metric/preview) → view (views/inspector.ts), each owning its styles via constructable stylesheets (style.ts registry). The static media/inspector.{html,css} files are deleted.
Token split: design values live in brand.css (colors/type/space, preferring --vscode-* theme vars), composition in layout.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.
De-yellowed: --color-run now follows the theme progress color; the <0||0> mark and hero metric label drop the accent literal (--color-accent stays 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 swaps inspector.html/.css for brand.css/layout.css to match.

No fixture-loader changes. Message protocol (runlabel/iteration/warming/completed/refresh/ping) is unchanged.

Verified

Build + typecheck + full unit suite green on this tree in a clean worktree (79 passed / 2 skipped).
A follow-up PR stacks on this one with the inspector frame-race fix (watcher delivery gate + template atomic writes).

🤖 Generated with Claude Code

…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>

…view-reorg stack

kateebonner · 2026-07-02T20:52:52Z

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.

View is now TS-composed: media/ui/ atoms (text/pill/icon) → components (metric/preview) → view (views/inspector.ts), each owning its styles via constructable stylesheets (style.ts registry). The static media/inspector.{html,css} files are deleted.
Token split: design values live in brand.css (colors/type/space, preferring --vscode-* theme vars), composition in layout.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.
De-yellowed: --color-run now follows the theme progress color; the <0||0> mark and hero metric label drop the accent literal (--color-accent stays 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 swaps inspector.html/.css for brand.css/layout.css to match.

No fixture-loader changes. Message protocol (runlabel/iteration/warming/completed/refresh/ping) is unchanged.

Verified

Build + typecheck + full unit suite green on this tree in a clean worktree (79 passed / 2 skipped).
A follow-up PR stacks on this one with the inspector frame-race fix (watcher delivery gate + template atomic writes).

🤖 Generated with Claude Code

…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>

…view-reorg stack

kateebonner · 2026-07-02T20:52:52Z

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.

View is now TS-composed: media/ui/ atoms (text/pill/icon) → components (metric/preview) → view (views/inspector.ts), each owning its styles via constructable stylesheets (style.ts registry). The static media/inspector.{html,css} files are deleted.
Token split: design values live in brand.css (colors/type/space, preferring --vscode-* theme vars), composition in layout.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.
De-yellowed: --color-run now follows the theme progress color; the <0||0> mark and hero metric label drop the accent literal (--color-accent stays 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 swaps inspector.html/.css for brand.css/layout.css to match.

No fixture-loader changes. Message protocol (runlabel/iteration/warming/completed/refresh/ping) is unchanged.

Verified

Build + typecheck + full unit suite green on this tree in a clean worktree (79 passed / 2 skipped).
A follow-up PR stacks on this one with the inspector frame-race fix (watcher delivery gate + template atomic writes).

🤖 Generated with Claude Code

…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>

…view-reorg stack

kateebonner · 2026-07-02T20:52:52Z

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.

View is now TS-composed: media/ui/ atoms (text/pill/icon) → components (metric/preview) → view (views/inspector.ts), each owning its styles via constructable stylesheets (style.ts registry). The static media/inspector.{html,css} files are deleted.
Token split: design values live in brand.css (colors/type/space, preferring --vscode-* theme vars), composition in layout.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.
De-yellowed: --color-run now follows the theme progress color; the <0||0> mark and hero metric label drop the accent literal (--color-accent stays 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 swaps inspector.html/.css for brand.css/layout.css to match.

No fixture-loader changes. Message protocol (runlabel/iteration/warming/completed/refresh/ping) is unchanged.

Verified

Build + typecheck + full unit suite green on this tree in a clean worktree (79 passed / 2 skipped).
A follow-up PR stacks on this one with the inspector frame-race fix (watcher delivery gate + template atomic writes).

🤖 Generated with Claude Code

…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>

…view-reorg stack

kateebonner · 2026-07-02T20:52:52Z

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.

View is now TS-composed: media/ui/ atoms (text/pill/icon) → components (metric/preview) → view (views/inspector.ts), each owning its styles via constructable stylesheets (style.ts registry). The static media/inspector.{html,css} files are deleted.
Token split: design values live in brand.css (colors/type/space, preferring --vscode-* theme vars), composition in layout.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.
De-yellowed: --color-run now follows the theme progress color; the <0||0> mark and hero metric label drop the accent literal (--color-accent stays 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 swaps inspector.html/.css for brand.css/layout.css to match.

No fixture-loader changes. Message protocol (runlabel/iteration/warming/completed/refresh/ping) is unchanged.

Verified

Build + typecheck + full unit suite green on this tree in a clean worktree (79 passed / 2 skipped).
A follow-up PR stacks on this one with the inspector frame-race fix (watcher delivery gate + template atomic writes).

🤖 Generated with Claude Code

…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>

…view-reorg stack

kateebonner · 2026-07-02T20:52:52Z

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.

View is now TS-composed: media/ui/ atoms (text/pill/icon) → components (metric/preview) → view (views/inspector.ts), each owning its styles via constructable stylesheets (style.ts registry). The static media/inspector.{html,css} files are deleted.
Token split: design values live in brand.css (colors/type/space, preferring --vscode-* theme vars), composition in layout.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.
De-yellowed: --color-run now follows the theme progress color; the <0||0> mark and hero metric label drop the accent literal (--color-accent stays 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 swaps inspector.html/.css for brand.css/layout.css to match.

No fixture-loader changes. Message protocol (runlabel/iteration/warming/completed/refresh/ping) is unchanged.

Verified

Build + typecheck + full unit suite green on this tree in a clean worktree (79 passed / 2 skipped).
A follow-up PR stacks on this one with the inspector frame-race fix (watcher delivery gate + template atomic writes).

🤖 Generated with Claude Code

…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>

…view-reorg stack

kateebonner · 2026-07-02T20:52:52Z

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.

View is now TS-composed: media/ui/ atoms (text/pill/icon) → components (metric/preview) → view (views/inspector.ts), each owning its styles via constructable stylesheets (style.ts registry). The static media/inspector.{html,css} files are deleted.
Token split: design values live in brand.css (colors/type/space, preferring --vscode-* theme vars), composition in layout.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.
De-yellowed: --color-run now follows the theme progress color; the <0||0> mark and hero metric label drop the accent literal (--color-accent stays 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 swaps inspector.html/.css for brand.css/layout.css to match.

No fixture-loader changes. Message protocol (runlabel/iteration/warming/completed/refresh/ping) is unchanged.

Verified

Build + typecheck + full unit suite green on this tree in a clean worktree (79 passed / 2 skipped).
A follow-up PR stacks on this one with the inspector frame-race fix (watcher delivery gate + template atomic writes).

🤖 Generated with Claude Code

…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>

…view-reorg stack

kateebonner · 2026-07-02T20:52:52Z

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.

View is now TS-composed: media/ui/ atoms (text/pill/icon) → components (metric/preview) → view (views/inspector.ts), each owning its styles via constructable stylesheets (style.ts registry). The static media/inspector.{html,css} files are deleted.
Token split: design values live in brand.css (colors/type/space, preferring --vscode-* theme vars), composition in layout.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.
De-yellowed: --color-run now follows the theme progress color; the <0||0> mark and hero metric label drop the accent literal (--color-accent stays 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 swaps inspector.html/.css for brand.css/layout.css to match.

No fixture-loader changes. Message protocol (runlabel/iteration/warming/completed/refresh/ping) is unchanged.

Verified

Build + typecheck + full unit suite green on this tree in a clean worktree (79 passed / 2 skipped).
A follow-up PR stacks on this one with the inspector frame-race fix (watcher delivery gate + template atomic writes).

🤖 Generated with Claude Code

…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>

…view-reorg stack

kateebonner requested review from Rchari1 and jack-champagne and removed request for Rchari1 and jack-champagne July 2, 2026 20:56

kateebonner self-assigned this Jul 2, 2026

This was referenced Jul 2, 2026
Render the live pulse client-side in the Run Inspector (pulseplot v1) #66
Closed
feat: pulseplot v1 — native live pulse component replaces PNG display #67
Merged

Merge origin/main (post-#43LivePulsePlotCallback template) into the …
c516154
…view-reorg stack

kateebonner added a commit that referenced this pull request Jul 2, 2026
Merge updated base (origin/main via#65branch) into#66
bbc2b6e

kateebonner closed this Jul 2, 2026

kateebonner reopened this Jul 2, 2026

kateebonner merged commit 68c8fb7 into mainJul 3, 2026
8 checks passed

kateebonner deleted the kate/inspector-view-reorg branch July 3, 2026 01:08

kateebonner mentioned this pull request Jul 3, 2026
feat: pulseplot v1 — native live pulse rendering replaces PNG display (Closes #66) #69
Closed

kateebonner restored the kate/inspector-view-reorg branch July 3, 2026 01:12

kateebonner deleted the kate/inspector-view-reorg branch July 3, 2026 01:12

kateebonner restored the kate/inspector-view-reorg branch July 3, 2026 01:12

kateebonner deleted the kate/inspector-view-reorg branch July 3, 2026 01:12

aarontrowbridge mentioned this pull request Sep 1, 2026
feat: SEAM 2 — regime rules as recommendations, the five-knob priors table (#699) #701
Merged