feat(studio): the Reflective redesign — help tooltips, builder layout, house palette - #97
Merged
Merged
Conversation
…t, house palette
Requested in review: cleaner and more intuitive controls, explanations behind a hover
question mark rather than paragraphs in every box, in the style of reflective.org,
simulator.reflective.org and tomas-fe.vercel.app.
Design sources read rather than imagined: the SAI simulator frontend uses Radix Themes,
Inter, lucide icons, a zero-delay CircleHelp tooltip beside every control, and a
builder-left/plots-right layout; reflective.org contributes navy #091834, gold #f1b80d
and steel #466f8d; tomas-fe the warm paper ground (#f5f0eb on #242220). lucide-react is
taken as a real dependency because it is literally their icon set.
- Field descriptions and provenance move behind a CircleHelp hover (a real button, so
keyboard focus opens it too). Section notes and panel prose likewise: visible text is
now DATA -- totals, extremes, mode lines -- and explanation is on demand.
- Stages render controls-left / graphs-right (sticky), the simulator's builder layout;
the stepper is icon pills.
- Navy primary buttons, gold overrides/markers, paper cards; dark mode is a navy-tinted
equivalent with its own palette, not an inversion.
Two defects found by looking, one by re-running:
- Dark mode's `button { color }` override outranks `.stage-tab` by specificity, so
inactive tabs and help triggers rendered dark-on-dark. Re-stated per shape, with the
trap documented in the CSS.
- The smoke script had silently rotted twice: it typed into plume_length_m (derived since
0.3.0; the entered field is given_track_length_m) and predated commit-on-Enter, so its
edits filled drafts the server never saw -- steps printed, nothing failed. Repaired and
the full flow re-verified in the new UI: override -> stale tab -> accept -> review
counts one change -> schema refusals surface with their own messages.
360 Python Tier-A, 58 vitest -- unchanged, as the redesign is presentation over the same
seams and every tested hook (ids, badges, draft-hint, button texts) was kept.
Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01EaDHnPdiacsybr8Tp5WnqR
aliakherati
force-pushed
the
feat/reflective-redesign
branch
from
August 21, 2026 04:23
13d184b to
91688cf
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.
The Reflective redesign
Built from the sources, not from memory of them: the SAI simulator frontend
(
reflective-simulator/sai-simulator-fe) uses Radix Themes + Inter + lucide, a zero-delayCircleHelptooltip beside every control, and a builder-left / plots-right layout;reflective.org contributes navy
#091834/ gold#f1b80d/ steel#466f8d; tomas-fe the warmpaper ground (
#f5f0ebon#242220). Plume Studio now composes exactly those pieces —lucide-reactis taken as a real (pinned) dependency because it is literally their icon set.What changed
?. Field descriptions + provenance, section notes, and panelprose all moved into
CircleHelphover tooltips (real<button>s — keyboard focus opens themtoo). What stays visible is data: totals, extremes, mode lines, derived values.
SlidersHorizontal, ClipboardCheck), navy primary buttons, gold overrides/markers, paper cards
with soft shadows. Dark mode is a navy-tinted palette of its own, not an inversion.
Found by rendering and re-driving, per the house rule
button { color }override outranks.stage-tabbyspecificity, so inactive tabs and help triggers were illegible on first render. Re-stated per
shape, trap documented in the CSS.
plume_length_m(derived since0.3.0; the entered field is
given_track_length_m) and predated commit-on-Enter, so its editsfilled drafts the server never saw. Steps printed; nothing failed. Repaired, and the full flow
re-verified in the new UI: override → stale tab turns red → accept → review counts exactly one
change → schema refusals surface with their own messages.
360 Python Tier-A, 58 vitest — unchanged, because the redesign is presentation over the same
seams; every tested hook (input ids, badge classes, draft hint, button texts) was kept.