[bug] Terminal output is invisible on mobile — TmuxTab stacks eight blocks in one column and the output pane is the only one that yields

[serge-ivo]

Reported

"In the tmux coding agent, on mobile I can't see terminal output. It shows the terminal selector
and everything on one screen."

What the layout does on a phone

TmuxTab.tsx:246 is a two-column grid that degrades to a single column:

<div className="flex-1 min-h-0 grid grid-cols-1 lg:grid-cols-[17rem_minmax(0,1fr)]">
 <aside …> {/* target list */}
 <section …> {/* header · status · OUTPUT · command · send-keys · create-target */}

Below lg, those stack, so the screen becomes eight blocks in a column:

	block	mobile height
1	aside header — "Terminal" + refresh	fixed
2	target list	auto — grows with target count
3	section header — name, attached pill, 3 icon buttons	fixed
4	status / permission line	fixed
5	<pre> output	flex-1 — the only block that yields
6	command row — input + Run	fixed
7	send-keys row	grid-cols-1 → 2 stacked full-width inputs
8	create-target row	grid-cols-1 → 3 stacked full-width inputs + button

Rows 7 and 8 are the aggravating factor and they are aggravating because of the responsive rule.
grid-cols-1 sm:grid-cols-[…] means the compact toolbars that fit on one line at sm become
five stacked full-width inputs below it. Every one of them is fixed-height. The output pane is
the single flex-1 element in the column, so it absorbs the entire deficit and collapses to a
sliver — on the tab whose whole purpose is reading terminal output.

This repo already solved this, one directory away

agents/coder/web/src/CodingTab.tsx renders a terminal on the same phone and does not have this
problem, because it switches views instead of stacking them (:831-832):

<button onClick={() => setView("summary")} aria-pressed={view === "summary"}
 className="… w-8 sm:w-auto sm:px-2 …"><Eye size={14}/>
 <span className="hidden sm:inline">Co-pilot</span></button>
<button onClick={() => setView("terminal")} aria-pressed={view === "terminal"} …>

Backed by one piece of state — const [view, setView] = useState<"summary" | "terminal"> (:83).
The same file also collapses its chrome on mobile rather than stacking it: the repo title truncates
to max-w-[5.75rem] sm:max-w-[11rem], the repo switcher becomes a dropdown, and Settings folds into
a session menu (sm:hidden).

So the pattern, the ARIA treatment and the icon-only-on-mobile convention all already exist in the
codebase. TmuxTab predates them or missed them.

Proposal — reuse the idiom, do not invent a new one

Add a mobile-only segmented view to TmuxTab with the same shape as CodingTab's:

• Targets — the aside list (currently block 1–2)
• Output — the <pre>, given the full remaining height (block 3–5), the default
• Controls — command, send-keys, create-target (blocks 6–8)

Above lg, keep today's two-column layout unchanged — it is fine there, and the controls belong
under the output on a wide screen.

Two details worth copying rather than re-deciding:

• Icon-only below sm, label from sm up (w-8 sm:w-auto sm:px-2 + hidden sm:inline), so the
  switch itself does not become the thing eating the viewport.
• aria-pressed on each button, not a role="tablist". CodingTab already made this choice and
  the console's other switch of this kind (the interaction-mode control in InstanceDetail) uses a
  role="radiogroup" with sr-only radios. Matching one of the two existing treatments matters more
  than which; picking a third would be the actual regression.

Note for #366

This would be the fourth segmented control in the console — interaction mode (InstanceDetail,
role="radiogroup"), Co-pilot/Terminal (CodingTab, aria-pressed), the delivery-status chips
(TeamworkSection), and now this. Three of them already disagree about markup and ARIA. That is the
case for the shared primitive in #366, and this ticket should not wait for it — copy CodingTab's
version now, and let #366 collapse all four later.

[serge-ivo]

Fixed in 3f4172f.

What "invisible" actually was: a vertical collapse, measured at zero.

Verified before changing anything. The <pre> resolves to 24px tall — its own p-3 padding, and zero lines of output — at both 320px and 390px. At 1.3x text scale it is worse than zero (padding exceeds the box). At 768px it is 321px, at 1280px 568px. The ticket's reading of the mechanism was exactly right: eight blocks in one column, seven fixed-height, the <pre> the only flex-1 element, so it absorbs the whole deficit.

Worth recording that this is not the #368 shape despite the family resemblance — the pane's text colour is fine (renderTerminal emits inline #d6d6e0 spans; the container was #080808; ~14:1). Nothing was mis-coloured. It was literally not on screen.

Why no guard caught it, on two counts.

1. measureOverflow measures the horizontal axis. A vertical collapse pushes nothing past the right edge, so every horizontal assertion was correctly green on a tab showing nothing.
2. No fixture anywhere declares surfaces: ["tmux"], so TmuxTab had never rendered in an e2e run at all. A vertical check bolted onto the existing sweep would still not have visited this tab.

The new mobile — the terminal pane is readable (#370) block supplies the missing fixture and asserts both axes at 320 / 390 / 1.3x, plus a wide-layout test that the two-column arrangement is untouched. Confirmed to fail on the pre-fix component with Received: 0 lines (and -1 at 1.3x), and the wide-layout test passes on the old code — i.e. it is measuring the phone, not the app.

The fix is the idiom this ticket asked for: a Targets / Output / Controls switch below lg, defaulting to Output (landing on the selector would reproduce the reported symptom on purpose), copying CodingTab's markup, aria-pressed and icon-only-below-sm sizing rather than inventing a fourth control. One deviation from the proposal, deliberate: the command row stays with Output, not with Controls. It is one row that never stacks below sm, and Run's only observable effect is what the pane shows next — putting it in a view that hides the pane would have been the same class of bug. For the same reason the status/error line is owned by both views, and sending keys or picking a target lands you back on the pane.

Tokens: the segmented control uses bg-accent-soft / text-accent active, text-muted inactive, border-line frame — no new colours picked by eye, no bg-*-100 text-*-700 added (designTokens.test.ts still at zero, ratchet unmoved at 33). The pane's bg-[#080808] literal is now bg-paper: a 2/255 difference, and the design system's rule is not to hardcode a colour a token already names.

The visibility decision is extracted to store/console/src/lib/tmuxView.ts with unit tests (#282 — no component testing here, so a pure function is the only shape a test can hold). Its hidden variants are spelled out as whole strings rather than built with a template literal: Tailwind v4 scans for complete class names, so `hidden lg:${display}` emits nothing and the fix would work only if some unrelated file happened to contain the string. Verified against the built CSS, not the source.

Note for #366: this is the fourth segmented control, as predicted. It matches CodingTab's aria-pressed treatment, so there are now two on that pattern and two off it — one fewer disagreement for #366 to collapse.