feat(ui): distinct color tones for Session Musician confidence bands

[slittycode]

Successor to #26 (auto-closed when its base branch claude/thirsty-easley-faeaea was deleted after PR #22 merged). Branch rebased onto main; content identical.

Why

PR #22 shipped a four-band confidence ladder (Solid scaffold / Workable draft / Rough sketch / Unreliable), but the PILL_CLASSES map in ConfidenceBandBadge.tsx collapsed them into only two tones — accent for solid + workable, warning for rough + unreliable. A producer couldn't visually distinguish Solid from Workable, or Rough from Unreliable, at a glance.

What changed

Map the four bands to a green → orange → amber → red traffic-light ladder so the visual hierarchy matches the producer's mental model (best to worst at a glance):

Band	Range	Tone	CSS variable
Solid scaffold	≥80%	green	--color-success: #00ff9d
Workable draft	50–79%	orange	--color-accent: #ff8800
Rough sketch	25–49%	amber	--color-warning: #ffb800
Unreliable	<25%	red	--color-error: #ff3333

All four CSS variables already exist in apps/ui/src/index.css. They're the canonical severity vocabulary across MeasurementPrimitives, DiagnosticLog, and FileUpload: success = ready, accent = active, warning = caution, error = critical. No theme additions; no new shades.

Opacity tuning unified at /30 border, /10 bg, text-{color} to match the established BADGE_TONE_CLASSES convention.

Override path (full-mix-fallback and legacy)

NoteDraftBlock.tsx passes overrideTone="rough" to <ConfidenceBandBadge> in both the full-mix-fallback and legacy render states. With the new mapping, both override states render as amber — the right tone for "treat with caution, not unreliable junk." No wiring change needed.

Tests

• New tests/services/confidenceBandBadge.test.ts — 10 tests:
  • Four per-band tests assert each emits the expected color tokens.
  • A pairwise-distinct assertion (unique.size === 4) survives future opacity tweaks.
  • Two overrideTone="rough" tests lock in the fallback/legacy visual.
• No existing tests touched. npm run verify is green.

🤖 Generated with Claude Code

[slittycode]

Verdict: APPROVE

Summary

Pure visualisation change: maps the four confidence bands to four visually distinct CSS color tokens (success/accent/warning/error) instead of collapsing them into two. New test file adds 10 meaningful tests that pin the tone mapping and override path. All 341 unit tests pass.

Findings

Worth considering:
ConfidenceBandBadge.tsx — The PR description says opacity is "unified at /30 border", but workable uses border-accent/40 while the other three use /30. It's a four-point opacity difference and probably intentional sub-distinction, but the description is wrong and the tests don't pin opacity (they match border-accent/ without a suffix check). If it's intentional, the description should say so; if it's a typo in the mapping, the fix is trivial. Not blocking.

Test results

341 passed / 0 failed across 36 files. The new confidenceBandBadge.test.ts contributes the 10 advertised tests; the pairwise-distinct check (unique.size === 4) is the right high-value assertion for this kind of visual mapping.

Phase boundary check

Clean. ConfidenceBandBadge reads confidence as a prop and maps it to a CSS class. No Phase 1 values are mutated, re-derived, or bypassed.

---

Generated by Claude Code