fix(tui): restore the header box's right border

[ericleepi314]

Follow-up to #764. The header box shipped with no right border — a left edge and a top rule running off the screen.

Cause

It was exactly two columns too wide.

appLayout sized the intro banner and session panel with composer.cols - 2. That's the composer's reserve — and composer.cols is the terminal width, which the composer separately subtracts its prompt prefix from (stableComposerColumns). The transcript's reserve is different and larger:

Reserve	Columns
Scrollbar gutter — marginLeft={1} on the wrapper + the scrollbar's width={1}	2
paddingX={1} on the transcript's inner column	2
Total	4

So the panel drew itself at term - 2 inside a container of term - 4, and ScrollBox clipped the overflow — taking the right border with it.

Fix

Two changes. Either one fixes the symptom; both are worth having.

1. Name the transcript's reserve. New transcriptPanelWidth() sits next to stableComposerColumns() in inputMetrics.ts so the two budgets can't be confused again, and both Banner and SessionPanel use it.

2. Stop predicting the container. Dropped the explicit width={cols} from the panel's outer Box. That prop made the border a prediction of the container width; without it the box stretches to whatever the container actually is, so a caller that over-reports can no longer push the border off screen. The feed column gains flexGrow to absorb the real remainder, and its footer rule becomes a top-border-only Box instead of '─'.repeat(w) — a repeat count can't track a column that flexes.

Why the test missed it

width={cols} was tuned against a harness whose container was the whole terminal, and the render test inherited that assumption — it rendered SessionPanel at the root and asserted rows were exactly cols wide. Both agreed with each other and disagreed with the app.

The test now renders inside a stand-in for appLayout's real wrapper and asserts rows match the container width.

One detail worth recording, because it cost a mutation cycle: a plain <Box> wrapper is not sufficient. It has flexShrink, so an over-wide child is quietly shrunk to fit and the bug disappears. ScrollBox constrains its children rather than being expanded by them, so the child is clipped — the actual on-screen behavior. Verified:

Wrapper	Restoring width={cols}
plain <Box>	0 tests fail — bug invisible
<ScrollBox>	4 tests fail

Testing

• New: panel ignores an over-reported maxWidth (4 widths); unit coverage for transcriptPanelWidth.
• Existing render tests retargeted from terminal width to container width.
• npm run typecheck clean; eslint clean on all changed files. (appLayout.tsx has one pre-existing import-order error on cronIndicator.js, confirmed present at HEAD without these changes — left alone.)
• Suite 8 failed / 1576 passed — same 8 pre-existing failures as baseline (createGatewayEventHandler, cursorDriftRegression, statusRule, useConfigSync, virtualHeights).

🤖 Generated with Claude Code