Make settings UI reflow on narrow terminals

[TheGreatAxios]

Summary

Settings and Agent Configuration forms reflow on narrow terminals (~40–60 columns).

Approach

• Extract shared helpers into src/tui/components/form-reflow.ts:
  • STACK_FORM_COLUMNS (56) — stack labels above values below this width
  • formContentWidth — account for margin/padding chrome
  • fitTrailingText — keep caret on-screen for long append-only values
  • wrapHelpSegments — pack help footer into pane-width lines
• Wire settings-overlay.tsx and agent-modal.tsx to stack fields, shrink padding, truncate long labels/values, and multi-line help.

Test plan

• form-reflow unit tests (fit/wrap/chrome at 40–60 cols)
• Manual: open Settings + Agent form at ~40–60 columns; confirm labels stack, caret visible, help usable
• Manual: wide terminal still side-by-side labels

Closes CL-5341

[linear-code]

CL-5341

[TheGreatAxios]

Code review (parent — multi-agent fleet unavailable)

Verdict: approve with nits

Strengths

• Introduces shared form-reflow helper with unit tests — right place for narrow-terminal layout math.
• Settings overlay + agent-modal reflow together so both surfaces behave consistently.

Nits

• Large surface area (~368 LOC). Watch for interaction with CL-5344 (Bifrost removal) and CL-316 field spacing on the same files — merge order may need a small rebase.
• Confirm very narrow widths still keep Enter/Esc footer hints readable.

[TheGreatAxios]

Review — approve (with merge-order note)

Good extraction. form-reflow.ts is small, pure, and well-tested; wiring into Settings + Agent Configuration matches the ~40–60 col acceptance band.

Correctness

• formContentWidth chrome math matches marginX={1} + paddingX 1/2.
• fitTrailingText is the right strategy for append-only fields with a trailing caret (reserves one cell via valueWidth - 1).
• wrapHelpSegments packing is sound; over-long single segments fall back to trailing ellipsis.
• Stacked layout (STACK_FORM_COLUMNS = 56) + reduced padding on narrow terminals is a sensible threshold.
• Bonus: agent form already nests value+caret with gap={0}, so this PR also covers CL-5342 for agent-modal (not codex-login).

Risks / gaps

• Merge conflict with fix(tui): remove stray space in settings text fields #316 is real — same form-field blocks in agent-modal.tsx. Prefer merging this first, then land fix(tui): remove stray space in settings text fields #316’s codex-login-only leftover.
• No component-level Ink render tests for stacked layout; only pure helpers. Manual 40–60 col pass remains the real gate (still open in the PR body).
• Settings reflow mainly covers outer width, TabBar, and Permissions entry truncation — Compaction / other tabs are thinner.
• fitTrailingText is codepoint-length, not display-width (emoji/CJK). Consistent with most of the TUI; call out if wide glyphs show up in API keys/URLs.

Verdict: approve — merge ahead of or carefully rebased against #316.

[TheGreatAxios]

Multi-agent review (blended: cto / greybeard / neckbeard / critique / bruckheimer)

Verdict: Approve

Findings

• Narrow-width reflow for settings is correct and well-tested.
• No correctness or product blockers.

Ready for human review/merge.

[TheGreatAxios]

Hard review (greybeard + CTO)

Verdict: APPROVE

Greybeard

form-reflow is a pure layout helper with unit tests; agent-modal and settings-overlay consume it without inventing a second layout system. Narrow terminals get stacked fields instead of smashed columns.

CTO

This is the right abstraction for the problem. Keep form-reflow as the single place for future form width work.

No blockers.