Skip to content

feat(scene): wire borders + background colors and apply a design-mock palette#1005

Merged
esengine merged 1 commit into
mainfrom
rust-scene-design-palette
May 16, 2026
Merged

feat(scene): wire borders + background colors and apply a design-mock palette#1005
esengine merged 1 commit into
mainfrom
rust-scene-design-palette

Conversation

@esengine
Copy link
Copy Markdown
Owner

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 and Rust.
  • `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 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 mock's gradient
    brand mark — actual gradient isn't doable in a terminal).
  • 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.
  • 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. That's the
floor for "TUI-native faithful to the mock"; everything above is
what we ship.

Refs #868

… 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
@esengine esengine merged commit ec887b4 into main May 16, 2026
5 checks passed
@esengine esengine deleted the rust-scene-design-palette branch May 16, 2026 03:22
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant