feat(scene): wire borders + background colors and apply a design-mock palette#1005
Merged
Conversation
… palette Closes the visual gap between the structural three-pane layout from #1003 and the user's design mock. Previously every cell defaulted to the terminal's stock bg/fg; now the trace frame honors a small palette derived from the mock's oklch tokens, panes carry rounded borders, and title / status rows sit on a panel-tinted bar. ## Schema + Rust render - `BoxLayout.background?: Color` — new field, same shape as `borderColor`. Schema added in both TS (types.ts) and Rust (scene.rs). - `render_box` now runs `apply_decoration(layout, buf, area)` before laying out children: - if `background` is set, fills every cell of the box area with that bg (via ratatui Block's style). - if `borderStyle` is set, draws ratatui's box-drawing perimeter (Plain/Double/Rounded/Thick) in `borderColor`, shrinking inner area by 1 cell on each side for children. - both are independent — bg without border (title/status bars) works, border without bg (debug outlines) works too. ratatui's `Block` widget already does the right thing for the combined case (fill then draw border on top), so we lean on that rather than rolling perimeter-drawing by hand. ## Design palette (`src/cli/ui/scene/theme.ts`) oklch tokens from the mock converted to hex once, frozen as `PALETTE.{bg, bg2, panel, card, border, borderStrong, fg, fg2, muted, accent, accentStrong, success, warning, danger, violet}`. Single source of truth — components don't pick raw colors anymore. ## Producer side - Outer frame: `background: PALETTE.bg` (dark blue-grey base, sits behind every pane). - Title row: `background: PALETTE.panel`, brand prefix glyph in `accent`, model name in `violet` (matches the gradient brand mark in the mock). - Sidebar + ctx pane: `borderStyle: round` + `borderColor: border` + `background: bg2`. Reads as two soft cards flanking the main pane, same shape as the mock's panel/card style (modulo CSS gradients which ratatui can't do). - Status bar: `background: PALETTE.panel`, busy/idle in warning/success hexes from the palette, wallet segment in success when present. - Section headers (`SESSIONS`, `CONTEXT`) drop the dash decoration and use bold accent — cleaner now that bordered panes provide the framing. ## Tests - Rust (6 new): box-drawing chars at perimeter for Single / Round / Double border styles, border color applied to perimeter cells, background fills every cell, border shrinks inner area by 1 on each side. - JS: existing 61 tests adjusted to the new shapes (status row is now always a box for its bg tint, busy/idle assert hex colors via PALETTE rather than named "green"/"yellow"). 2 new shape assertions: title/status carry a background; side/ctx panes carry borderStyle=round + background. `cargo test -p reasonix-render --test render` → 23/23. `npm run verify` → green via prepush gate. ## What's still aspirational Real CSS gradients, drop shadows, border-radius smoothness, custom fonts, hover states — ratatui can't do any of these and won't. That's the floor for "TUI-native faithful to the mock"; everything above is what we ship. Refs #868
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
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.
Closes the visual gap between the structural three-pane layout from
#1003 and the user's design mock. Previously every cell defaulted to
the terminal's stock bg/fg; now the trace frame honors a small
palette derived from the mock's oklch tokens, panes carry rounded
borders, and title / status rows sit on a panel-tinted bar.
Schema + Rust render
`borderColor`. Schema added in both TS and Rust.
laying out children:
that bg (via ratatui Block's style).
(Plain / Double / Rounded / Thick) in `borderColor`, shrinking
inner area by 1 cell on each side for children.
works, border without bg works too.
ratatui's `Block` widget already does the right thing for the
combined case (fill then draw border on top), so we lean on that
rather than rolling perimeter-drawing by hand.
Design palette (`src/cli/ui/scene/theme.ts`)
oklch tokens from the mock converted to hex once, frozen as
`PALETTE.{bg, bg2, panel, card, border, borderStrong, fg, fg2,
muted, accent, accentStrong, success, warning, danger, violet}`.
Single source of truth — components don't pick raw colors anymore.
Producer side
behind every pane).
`accent`, model name in `violet` (matches the mock's gradient
brand mark — actual gradient isn't doable in a terminal).
pane, same shape as the mock's panel/card style.
warning/success hexes from the palette, wallet segment in
success when present.
and use bold accent — cleaner now that bordered panes provide the
framing.
Tests
Double border styles, border color applied to perimeter cells,
background fills every cell, border shrinks inner area by 1 on
each side.
now always a box for its bg tint, busy/idle assert hex colors
via PALETTE rather than named "green"/"yellow"). 2 new shape
assertions: title/status carry a background; side/ctx panes
carry borderStyle=round + background.
`cargo test -p reasonix-render --test render` → 23/23.
`npm run verify` → green via prepush gate.
What's still aspirational
Real CSS gradients, drop shadows, border-radius smoothness, custom
fonts, hover states — ratatui can't do any of these. That's the
floor for "TUI-native faithful to the mock"; everything above is
what we ship.
Refs #868