Phone mirror pans horizontally for most lines: wrap is off by default, and `source: "recent"` bakes in the desktop pane's column width

[waynehoover]

What happens

Reading Claude output on my phone, most lines run off the right edge and I have to pan
sideways to read them. Turning on View → WrapText helps, but the wrapping it produces
is ragged, because by then the lines have already been broken at the desktop's width.

Why

Two separate things stack up.

1. Wrap defaults to off.
DEFAULTS in web/src/hooks/use-display-prefs.ts is { wrap: false, ... }, and
AnsiOutput's wrap prop defaults to false. With wrap off, preClass() renders
whitespace-pre overflow-x-auto, so the <pre> becomes a horizontal panner. The comment
says this is deliberate ("preserves column alignment like desktop Herdr"), which is the
right call for TUI tables. It is the wrong default for reading agent prose on a phone,
which is most of what the mirror shows.

2. The bridge asks for the pre-wrapped snapshot.
bridge/server.ts:458 reads:

const read = await herdr.readPane(paneId, "recent", lines, "ansi");

source: "recent" returns the terminal grid, so every line is already hard-broken at the
desktop pane's column count. herdr spawns those panes at the desktop terminal's size; in
my session that is 190 columns (spawning pane terminal ... rows=63 cols=190 in
herdr-server.log). A phone in portrait shows roughly 45 to 50 columns at the default
12px font.

Measured on one of my live panes, 200 lines, ANSI stripped:

source	lines	longest line	lines over 60 cols
recent (used today)	199	187 chars	84 of 199
recent-unwrapped	176	721 chars	79 of 176

So ~42% of lines need panning, and the 187-char maximum is exactly the desktop pty width.

The consequence is that turning wrap on does not really fix it: the browser re-wraps lines
that were already wrapped at 190 columns, so breaks land mid-sentence at arbitrary
points and Claude's own indentation and continuation structure is lost. You get correct
text in a shape that reads worse than either endpoint.

Suggested direction

Both of these are small, and the second is the one that actually matters:

1. Default wrap to true. The pref is already persisted and already has a UI
   toggle, so anyone who wants column-faithful panning keeps it one tap away. v3 is
   already in the STORAGE_KEY, so a bump to v4 would reset existing devices onto the
   new default if that is wanted.

2. When wrap is on, read source: "recent-unwrapped" so the browser wraps logical
   lines to the phone's actual width instead of re-wrapping desktop-width fragments.
   ReadSource in bridge/herdr-client.ts:114 already includes it; nothing calls it. This
   would need to be plumbed from the client pref through to the read, since the bridge
   currently picks the source with no knowledge of the viewer.

Tradeoff worth flagging, since I have not tested it: recent-unwrapped gives up the
terminal grid, so it will probably break box-drawing tables, and it may well break the
Claude block grammars in web/src/lib/harness/claude/ that key off the visible layout
(prompt-select detection, chrome stripping, the status strip). Tying the source to the
existing wrap toggle keeps recent as the default path for exactly that reason, and
bridge/server.ts:780 deliberately couples the binding read to readPane()'s source, so
that coupling needs to hold too. If any of that makes it a non-starter, then just the
wrap: true default plus smarter break points would still be a real improvement.

Environment

• collie 0.17.0, installed as a herdr plugin
• herdr 0.7.x, panes spawned at 190x63
• iOS, installed PWA, over Tailscale
• Claude Code in the mirrored pane

Related

• Mobile terminal mirror: broken TUI tables, faint borders, viewport blowout #5 (closed) covered the TUI-table and viewport-blowout side of the same rendering path
• PWA: Layout gets stuck after using split panes on mobile #23 (open) is a different mobile layout problem, after split panes

[AltanS]

Part 1 is in main as f053f0d (PR #59), shipping in 0.21.0: wrap now defaults to on, with a STORAGE_KEY bump v3→v4 so devices that already persisted wrap: false adopt the new default rather than staying stuck on the old one. Both branches are pinned by tests now — the no-wrap rendering is reachable only through the View toggle after this, so it needed guarding.

Your reasoning carried it: the old default was tuned for TUI tables, which are the minority of what the mirror shows, and column-faithful panning stays one tap away in View.

Part 2 (source: "recent-unwrapped") stays open, which is why this issue stays open. Your own caveat is the blocker: the bridge picks the source with no knowledge of the viewer, bridge/server.ts:780 deliberately couples the binding read to the same source, and the Claude grammars (chrome.ts, prompt-select, the status strip) key off visible layout — an unwrapped read hands them different geometry. So as you predicted, wrap-on alone still re-wraps lines already hard-broken at the desktop's 190 columns; better than panning, not the real fix.

One thing that turned up while working nearby and is worth recording here: a related bug (#54) was caused by the statusline run being taller than the parser allowed, which broke locateInputBox outright. Fixed in 96df14f. Different symptom, same "the phone sees a desktop-shaped pane" root — worth keeping in view when part 2 gets designed, since it will be touching the same grammars.

[AltanS]

Part 1 shipped in 0.21.0 (f053f0d) — wrap defaults on. Note display prefs reset to defaults with the storage-key bump, so a pinned font size needs setting again.

Staying open for part 2 (source: "recent-unwrapped"), which is the half that actually fixes the ragged breaks.