Run Inspector UI refresh: chart interaction, accessibility, and layout fixes - #139
Merged
Merged
Conversation
kateebonner
force-pushed
the
kate/inspector-ui-refresh
branch
from
July 15, 2026 00:15
2a7125b to
6931d61
Compare
…e Run Inspector Pulse plot (overlay mode) gains its missing interaction layer: - crosshair readout — hover snaps to the nearest rendered knot; a compact strip pinned to the plot's top edge lists every drive's value at that time (arrow keys / Home / End / Escape give the same readout from the keyboard; the strip flips sides so it never covers the crosshair) - interactive legend — keys are now buttons: hover/focus emphasizes that drive, click toggles it to a trace opacity (never removed: scale, legend, and color assignments hold still) - layout fix: the overlay holder was an anonymous div, not a flex item, so the plot region collapsed to the SVG's intrinsic ~62px regardless of panel height (pp-multi already flexed). The plot now spends a tall panel's height; .insp-body grows but never shrinks below content, so short panels scroll instead of painting the rail under the footer. Accessibility (ui-ux-pro audit): - :focus-visible rings (--vscode-focusBorder) on buttons, legend keys, and the plot; there were none anywhere - the status pill announces state changes (role=status); control buttons get glyph-free aria-labels; the plot carries a live aria-label; the readout is aria-live=polite - prefers-reduced-motion now gates the running-dot pulse and all new animation and transitions Styles: - status pills wear a 10% tint of their state color (state presence without color-only meaning — text + border still carry it) - the fidelity hero grows (--text-hero 1.3em → 1.55em, tabular figures) and its card lights up with a faint accent wash once the number lands; pending metrics (the “–” placeholder) recede to dim ink until then - buttons get hover (accent 8% wash) and press (16%) feedback with a 150ms transition; legend keys get a hover wash - theme-native scrollbars (VS Code slider tokens) replace the default web-page scrollbar Polish: - the objective card no longer carries the convergence sparkline (Kate: the metric doesn't need the objective plotted with it) — the component stays in the library, the inspector just stops mounting it - empty state is a centered composition (Amico mark + label + hint) instead of a bare sentence in the corner - warming state breathes its hint gently Webview-only (media/ui + brand.css tokens): no protocol changes; the .pane/.pill router contract holds and the full suite (570) is green. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
kateebonner
force-pushed
the
kate/inspector-ui-refresh
branch
from
July 15, 2026 00:38
6931d61 to
0aedf5b
Compare
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
A ui-ux-pro-audit-driven refresh of the Run Inspector webview, building on the #117 redesign. Webview-only (
media/ui+brand.csstokens): no protocol changes, the.pane/.pillrouter contract is untouched, and the device inspector (which shares these atoms) inherits the fixes.Pulse plot gets its missing interaction layer (overlay mode)
Layout fix (pre-existing #117 bug)
The overlay's holder was an anonymous div — not a flex item — so the plot region collapsed to the SVG's intrinsic ~62px no matter how tall the panel was (small-multiples mode already flexed correctly). The plot now spends the panel's height:
insp-bodygrows on tall panels but never shrinks below content, so short panels scroll the pane instead of painting the metrics rail underneath the footer.Accessibility (there were no focus rings anywhere)
:focus-visiblerings (--vscode-focusBorder) on control buttons, legend keys, and the plotrole="status"); control buttons get glyph-freearia-labels; plot carries a livearia-label; readout isaria-live="polite"prefers-reduced-motionnow gates the running-dot pulse and all new animation/transitionsStyles
--text-hero1.3em → 1.55em, tabular figures) and its card lights up with a faint accent wash the moment the number lands; pending metrics (the "–" placeholder) recede to dim ink until thenPolish
Verification
tsc --noEmitclean;pnpm -r buildclean; all 570 tests pass (inspector router + contract + device inspector untouched)1 / 0.25 / 0.12), converged/warming/empty states exercised in both themes🤖 Generated with Claude Code