Skip to content

TUI: input/message-flow alignment inverted; asymmetric spacing around tool output #3361

Description

@Astro-Han

What happened

Two layout defects in the TUI (packages/cli, pi-tui-based terminal UI).

1. Input bar vs. main message-flow horizontal alignment is inverted.

The input editor's text is inset one cell from the left edge, while the main info flow (assistant text and tool cards) is flush against the left edge. This looks backwards:

  • the input row carries a one-cell left padding, so typed text does not sit at the screen edge;
  • the message stream (and tool rows) run flush to column 0.

Expected: the input text sits flush to the left edge, and the message stream is inset on both the left and the right by about half to one character.

2. Asymmetric vertical spacing around tool output (e.g. Bash).

Between the info flow and a tool stack there are two blank rows above and one blank row below, so the tool block reads visibly unbalanced.

Observed example (collapsed tool cards in the transcript):

... I'll run the wrap-up skill ...

Let me establish the final state: ... whether anything needs cleanup.


● Task List (no output)
● Bash (no output)

All tasks complete. ...

Root cause (diagnosed)

Issue 1 — the editor is created with paddingX: 1 in packages/cli/src/pi-tui-runner.ts (line 424). pi-tui's Editor.render renders each content row as " ".repeat(paddingX) + text + " ".repeat(paddingX), so the input row is inset one cell on each side. Meanwhile the message stream renders flush at column 0: renderAssistantBlock renders Markdown with a (0, 0) origin, the user block only uses its >-quota gutter, and the tool cards start at column 0. The two are therefore misaligned in the opposite direction of what is wanted.

Issue 2renderMakaPiTranscript in packages/cli/src/pi-transcript.ts (line 1130-1131) inserts exactly one blank separator row before every entry that does not continue a tool stack. That single separator is the "1 below" gap. When the entry above a tool stack ends with trailing whitespace (typically the model's text ending in a trailing blank paragraph, i.e. \n\n), the pi-tui Markdown renderer emits an extra trailing blank row at the end of that block. That trailing row plus the single separator row yields the "2 above" gap, while below it stays at "1" — the asymmetry.

This was reproduced locally by rendering the transcript/layout from main (49c34f1aa): the same events render 1/1 symmetric spacing when the preceding assistant text has no trailing blank, and 2/1 when it ends with a trailing blank paragraph.

Proposed fix direction (not yet implemented)

  • Issue 1: drop the editor paddingX (or set it to 0 so the input text sits flush to the left edge), and add a consistent ~1-cell horizontal gutter on both sides of the message stream (assistant/user/tool blocks) so it aligns inside the screen with a margin.
  • Issue 2: stop entry blocks from emitting trailing blank rows (trim trailing blank lines after rendering each block), so the transcript's single separator blank is the only gap and the spacing is always symmetric (1 above = 1 below).

Environment

  • Maka commit: 49c34f1aa
  • OS: macOS
  • Surface: TUI/CLI
  • Node.js: >= 22.19 (repo root engine)

Metadata

Metadata

Assignees

Labels

bugSomething isn't workinghelp wantedExtra attention is needed

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions