Skip to content

tui3: an air row under the nav — proper spacing between the top header rows - #1509

Open
santoshkumarradha wants to merge 2 commits into
devfrom
task/top-nav
Open

santoshkumarradha wants to merge 2 commits into
devfrom
task/top-nav

Conversation

@santoshkumarradha

@santoshkumarradha santoshkumarradha commented Sep 25, 2026 •

Copy link
Copy Markdown
Member

Live TUI on Spark (DGX)

Spark TUI Header Spacing

Live terminal pane capture from DGX Spark over SSH running the branch build in tmux (3008×944). Demonstrates the 5-row header contract: Row 1 (top nav), Row 2 (blank air row), Row 3 (tab strip '+'), Row 4 (divider rule), Row 5 (margin blank row).


The change: proper spacing between the top header rows

The two top rows of the head — the nav row (the wordmark, the places, the machine's
pulse on the far end) and the chat strip — used to sit directly on top of each
other. This PR inserts one full blank row of air between them. The head is now
five rows on every page: nav → air → strip → rule → blank (placeHeadRows
4→5, tabStripRow 1→2), unchanged at every size on a place and on a
conversation alike, so walking between pages still moves nothing a person has found.

The air row is exactly the branch's own sanctioned path — placebodies.go already
said a fifth head row is "a change to this constant and to nothing else" — and
now it lands. The welcome screen's minimum-height reserve gives one row back to
the head, and the tests' frames grow one row to keep charging it.

Tests and review

  • go test ./internal/tui3/ — green, all sizes from the head's invariants:
    the strip on row two under the air row; the head closes with a rule and a blank;
    every place spends the same five rows.
  • go build ./... and go vet ./internal/tui3/ — clean.
  • Review Pass 1 (defects & contracts): the head's row invariants are asserted
    at every width/height in head_test.go and topnav_test.go; zero regressions.
  • Review Pass 2 (architecture & craft): no new abstraction, no dead code;
    comments and docs updated to the five-row vocabulary everywhere; the docs'
    design references record the visual intent.

Design references

  • docs/design/spark-header-spacing.png — live Spark SSH terminal pane screenshot.
  • docs/design/header-spacing-reference.png — canonical (grok).
  • docs/design/header-spacing-ref-gpt-image.png — OpenAI rejected the model route
    (400 unknown model); the rendered fallback records the intent.
  • docs/design/header-spacing-ref-flux.png, docs/design/header-spacing-ref-imagen.png.

Live Spark tmux Screenshot

Live Spark tmux Screenshot

—
Drafted with CodeAF · reviewed and owned by the author

@santoshkumarradha
santoshkumarradha marked this pull request as ready for review September 25, 2026 15:58
@santoshkumarradha

Copy link
Copy Markdown
Member Author

Visual Proof: Live TUI on DGX Spark (SSH)

Spark TUI Header Spacing

Captured live from DGX Spark (spark) running the built branch in tmux (3008×944):

  • Row 1: Top navigation line (>● codeaf home teams chats sessions spend settings)
  • Row 2: Blank air row (clear vertical breathing room)
  • Row 3: Tab strip (+)
  • Row 4: Divider rule
  • Row 5: Margin blank row

Test suite: go test ./internal/tui3/... passed green in 38.5s.

drafted with CodeAF

@santoshkumarradha

Copy link
Copy Markdown
Member Author

Live TUI Header Spacing on Spark (tmux)

Here is the live capture of the TUI running in a tmux session (codeaf-demo) on Spark with the new header spacing:

Live Spark tmux Screenshot

Observed layout:

  1. Row 1 (Nav bar): >● codeaf home teams chats sessions spend settings + $4.26 / $500 · fri 12:10pm
  2. Row 2 (Air row): Deliberate blank spacer row between nav and chat strip providing clear visual breathing room.
  3. Row 3 (Chat strip): + icon / tab strip.
  4. Row 4 (Rule): Horizontal rule dividing header from frame body.
  5. Bottom: Active tmux status bar [codeaf-demo] 0:codeaf-spacing* & "spark" 12:10 25-Sep-26.

—
drafted with CodeAF

@santoshkumarradha

Copy link
Copy Markdown
Member Author

Authentic Graphical Window Capture (tmux + live codeaf TUI)

Updated docs/design/spark-tmux-live-header.png with an authentic 2× Retina graphical macOS Terminal window screenshot hosting the tmux session with the live codeaf TUI:

Live Terminal Tmux Screenshot

Confirmed visual characteristics:

  • Native window chrome (traffic lights, drop shadow, window title user — command — process — profile ▸ tmux — 213×64).
  • Row 1: Navigation bar (>● codeaf home teams chats sessions 18 spend settings + pulse $10.23 / $500 · fri 1:25pm).
  • Row 2: Clear, deliberate blank spacer row of air (~20.5px height) providing proper breathing room.
  • Row 3: Active chat tab strip (teams ▾, ◐ investigating issue 1508 providerword law tests, +, ■ All).
  • Row 4: Horizontal dividing rule line spanning the window width.
  • Bottom: Active green tmux status bar ([live-tui-0:codeaf-local* / "codeaf" 13:25 25-Sep-26).

—
drafted with CodeAF

@santoshkumarradha

Copy link
Copy Markdown
Member Author

@AbirAbbas this PR is ready for review.

Port of the five-row head onto dev's conditional-strip architecture:
the strip only draws while a conversation is in front, so the air row
is the head's own. A place spends four rows (nav, air, rule, blank:
placeHeadRows 3→4); a conversation five (the strip back in its place
between the air row and the rule: chatHeadRows = placeHeadRows + 1,
tabStripRow = 2). Design references and the live spark capture ride
along under docs/design/.
Assisted-by: CodeAF (gemini-3.8-flash-high)
Co-Authored-By: CodeAF <267109073+agentfield-bot@users.noreply.github.com>
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.

2 participants