feat(scene): restructure to the v1 single-column TUI layout#1010
Merged
Conversation
The user supplied a new design mock (reasonix-v1 / "Reasonix TUI v1.html") that's a complete shape change from the desktop-style mock we had before: - Single-column terminal stream (cards + boot block), no permanent sidebar / context pane. - Fixed bottom dock: composer input row → meta row (kbd shortcuts) → status bar (multi-segment). - Each card identified by a colored prefix glyph + label, no enclosing boxes (mock's explicit "design rule: NO enclosing boxes, every block uses a left-rail" — borders out, glyphs in). This PR replaces \`buildTraceFrame\` end-to-end to match. ## Palette swap (theme.ts) Old palette tokens (bg / bg2 / panel / card / border / borderStrong / fg / fg2 / muted / accent / accentStrong / success / warning / danger / violet) → v1 oklch-derived hex set: bg #0f1018 bg2 #161824 fg #e8e9f3 fg1 #a8aabd fg2 #6b6e85 fg3 #3d4055 ds #6b85ff dsBright #8b9fff dsPurple #a78bfa ok #5eead4 warn #fbbf24 err #fb7185 info #60a5fa Single source of truth — every styled run reads from PALETTE. ## Layout Outer column (background bg): - scroll area (height fill): boot block when no cards, otherwise one row per card with kind-colored glyph + label + summary. - dock (intrinsic height): composer row → meta row → status bar. Approval, slash overlay, and sessions picker fold in above the composer row when active. Three-pane sidebar/ctxpane code is gone — was the wrong shape for the v1 mock. The "MISSION CONTROL" right rail in the mock is a toggleable secondary view; we'll wire it as an opt-in render mode later, not as the default layout. ## Specific row shapes - Boot block (empty state): \`● REASONIX DeepSeek code agent\` banner, then \`model\` / \`cwd\` / \`mcp\` rows, then a hint line with kbd-colored glyphs for \`/\` \`@\` \`!\`. - Card row: \`<glyph> <LABEL> <summary>\` per kind — YOU (blue), THINKING (purple), reasonix streaming (teal), tool (muted), diff (purple), error (err), warn (warn), plan/task (purple). - Composer row: \`❯ <text> ▮ <text>\` on a bg2 line, fixed height 1. - Meta row: left segments (\`↵ send · ⇧↵ newline · / cmd · @ file · ! shell\`), spacer, right (\`esc cancel · ↑ history\`). Each kbd glyph in ds blue, label in fg2 muted — matches the mock's hint row exactly. - Status bar: \`● reasonix · model X · mode review · busy/idle\` on the left; spacer; \`wallet ¥X · cwd ~/path\` on the right. Bg-tinted, fixed height 1. ## What still falls short of v1 - No ASCII REASONIX banner art (the 6-row block-letter logo). Too big for 80-col terminals; the compact \`● REASONIX …\` banner ships instead, and a follow-up can add the art for wide terminals. - Card head/body separation — each card is still one summary line. The mock has multi-line bodies (THINKING italic body, diff hunks, bash output). Wiring full bodies through to scene needs richer card payloads in \`SceneTraceCard\`, separate PR. - Status bar ctx / tokens / cost / turn / git segments — need telemetry + git status wiring not yet exposed to scene. - MISSION CONTROL right rail (PLAN / JOBS / CHANGES) — separate toggleable view. ## Tests \`tests/scene-trace-frame.test.ts\` rewritten end-to-end against the new structure (38 cases, all green) — shape tests use \`scrollOf\` / \`dockOf\` / \`composerRowOf\` / \`statusRowOf\` / \`metaRowOf\` helpers instead of fixed indices, so future row reorderings don't churn the whole file. \`RESERVED_ROWS\` (used by \`cardsForHeight\`) bumped 3 → 4 to reflect the new dock: composer + meta + status = 3 rows; boot block adds 1 more on the cold-start path. Closes-out #1007 (which was building on the wrong shape). 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.
The user supplied a new design mock (`reasonix-v1`) that's a complete
shape change from the desktop-style mock we'd been targeting:
sidebar / context pane.
→ status bar (multi-segment).
enclosing boxes. The mock's CSS explicitly states the design
rule: "NO enclosing boxes, every block uses a left-rail."
This PR replaces `buildTraceFrame` end-to-end to match, supersedes
#1007 which was building on the old desktop shape.
Layout
Outer column (background bg):
one row per card with kind-colored glyph + label + summary.
Approval, slash overlay, and sessions picker fold in above the
composer row when active.
Three-pane sidebar/ctxpane code is gone — was the wrong shape for
the v1 mock. The "MISSION CONTROL" right rail in the mock is a
toggleable secondary view; we'll wire it as an opt-in render mode
later, not as the default layout.
Palette swap
`src/cli/ui/scene/theme.ts` switched from the desktop oklch tokens
to the v1 set:
```
bg #0f1018 bg2 #161824
fg #e8e9f3 fg1 #a8aabd fg2 #6b6e85 fg3 #3d4055
ds #6b85ff dsBright #8b9fff dsPurple #a78bfa
ok #5eead4 warn #fbbf24 err #fb7185 info #60a5fa
```
Single source of truth — every styled run reads from PALETTE.
Specific row shapes
then `model` / `cwd` / `mcp` rows, then a hint line with
kbd-colored glyphs for `/` `@` `!`.
THINKING (purple), reasonix streaming (teal), tool (muted), diff
(purple), error (err), warn (warn).
height 1.
spacer, right (`esc cancel · ↑ history`). Each kbd glyph in ds
blue, label in fg2 muted — matches the mock's hint row.
the left; spacer; `wallet ¥X · cwd ~/path` on the right.
What still falls short of v1
big for 80-col terminals; the compact `● REASONIX …` banner
ships instead. Wide-terminal variant is a follow-up.
Multi-line bodies (THINKING italic body, diff hunks, bash output)
need richer payloads in `SceneTraceCard`. Separate PR.
telemetry + git status wiring not yet exposed to scene.
Tests
`tests/scene-trace-frame.test.ts` rewritten end-to-end against the
new structure (38 cases, all green). Shape queries use
`scrollOf` / `dockOf` / `composerRowOf` / `statusRowOf` /
`metaRowOf` helpers instead of fixed indices, so future row
reorderings don't churn the file.
`RESERVED_ROWS` (used by `cardsForHeight`) bumped 3 → 4 — composer
`npm run verify` green via prepush gate.
Refs #868