feat(spotlight): small-multiples histograms + tab order fix

[coccyx]

Summary

Two coupled UX fixes for the Spotlight rail, surfaced during manual validation of the v0.9.0 thread.

Problem 1 — Tab order was incoherent

Spotlight was the default tab but rendered on the right of Facets. Default-active + right-position didn't match.

Fix: Spotlight now renders first/left. Facets is one click away.

Problem 2 — Row-per-value layout ate too much vertical space

The prior card-per-attribute design used ~200px per attribute: header + per-value rows + paired sel/base bars + counts line. The Traces rail (~800px tall) showed 1–2 attributes at a time — scanning required scrolling.

Fix: Honeycomb-style small-multiples. One compact cell per attribute: attr-name + score header on top of a mini-histogram drawn in pure SVG. Each value contributes a pair of vertical bars (SEL accent + BASE muted gray). The human eye picks up asymmetric shapes in a chart grid much faster than rows of numbers.

Click an attribute's header → opens the per-value detail list inline with the same click-to-filter buttons.

Density: ~5–6 attributes visible at once vs 1–2 before. Same vertical space.

Architecture

• New src/components/SpotlightHistogram.tsx — pure SVG, no chart library. 100-unit viewBox, non-scaling-stroke axis line. Normalized to each attribute's max share so the chart fills its vertical space.
• SpotlightPanel rewritten to render the small-multiples grid + collapsible detail rows.
• SpotlightSection (Errors, Service Detail) inherits the new look automatically.
• Same engine (computeSpotlight), same data — purely a presentation change.

Screenshots

Traces page — Spotlight tab on the left, five attributes visible at once:

Click a header to expand per-value detail rows:

Service Detail — http.status_code shows stark asymmetry (score 10.93):

The big accent bar on one value + big gray bar on a completely different value is the visual signal — "errors and healthy traffic have totally different status codes." That's the conclusion Spotlight is meant to surface.

Test plan

• npx tsc --noEmit — clean
• npm run lint — 0 errors
• npm test — 101/101 passing
• npm run deploy — packed + uploaded + provisioned on staging
• Playwright capture spec succeeds (3 shots: Traces collapsed, Traces expanded, Service Detail)

Validate on staging

Scenario: paymentFailure 50% currently on.

1. Open Traces page — empty state. Click "HTTP 5xx errors" sample chip.
2. Confirm Spotlight tab is left, active by default
3. Confirm 5+ attribute mini-charts visible
4. Click any chart header — per-value detail rows expand
5. Click a value in the expanded detail — adds a filter row
6. Open Services → any service. Spotlight section uses the same small-multiples layout.

Follow-ups (not in this PR)

• Histograms normalize per-chart to max share, so when one value dominates (e.g., 97% of baseline = 200) it eats vertical space and other bars look pixel-sized. Could optionally clip the dominant baseline-only value.
• Hover tooltip is browser-default SVG <title>. A custom tooltip with better typography is nice-to-have.
• Detail expansion shows all rows up to maxRowsPerAttr (10). High-cardinality attrs could use a "show more" bound.

Session log

docs/sessions/2026-05-29-spotlight-mini-histograms.md

🤖 Generated with Claude Code