The chat input now rests at two lines, grows with the message, and scrolls after reaching a 12rem cap. The integration preserves the current rich-text composer, references, routing, and send behavior.

### Current preview Desktop, empty: 

Phone, eight lines: 

### Integration and validation The original textarea implementation overlapped with the newer contenteditable composer. The sizing now applies to its canonical input; the obsolete outer minimum was removed. Browser tests verify the two-line minimum, growth, cap, and scrolling on desktop and touch.

Local validation: `bun run ci`, `bun run types`, 139 chat unit tests, and both sizing browser tests pass. GitHub CI will be checked again on the final rebased head before merge.

<details> <summary>Original proposal and historical screenshots (textarea implementation)</summary>

## Why The empty chat composer was 124px tall (about four lines of textarea) at 1440 and 122px at 390, and the textarea never grew: long messages scrolled inside an 84px box. It dominated the chat pane, most on phones.

## What changed - Textarea rests at two lines (`min-h-14`, `rows={2}`) and auto-grows with content via `field-sizing: content`, capped at `max-h-48` (then scrolls). - Removed the fixed 98px `min-height` on `.chat-composer .field` in `theme.css`; the field now follows its content. - Border, radius, focus ring and the bottom-right send button are unchanged. The routing hint row still sits beside the send button in the footer row; no logic or text touched (#268/#269 areas untouched). - The research composer (`packages/editor/src/widgets/research.tsx`) is separate and unaffected.

Resting composer height: about 124px to about 110px on desktop and about 122px to about 120px on touch (per review; the 44px touch minimum on the send button limits the saving). Eight lines grows to about 215px; the composer stays above the mobile tab bar and the transcript gains the space. `field-sizing` is Chromium/Safari-new only; elsewhere it stays at the two-line minimum and scrolls.

## Screenshots Before / after, empty, 1440:  

Before / after, empty, 390:  

After, eight lines, 1440 and 390:  

## Testing - `bun run ci`: pass (dprint, oxlint, tokens, design contract, design record, impeccable) - `bun run types`: pass - `bun test apps/web/src/chat packages/editor/src/widgets`: 265 pass, 0 fail - GitHub CI: container, e2e and "format, lint, types, tests" all pass

🤖 Generated with [Claude Code](https://claude.com/claude-code)

</details>

**Review:** Changes needed (one small fix; otherwise good)

Checked on a worktree build (Chromium, 1440x900, 800x900, 390x844 touch, 320x640), plus `bun run ci` and `bun run types`: both pass (ci: 7 pre-existing oxlint warnings, 0 errors, tokens/design contract/design record/impeccable ok; types ok).

**Works** - Empty textarea is 56px (2 lines) at every width. 12 lines and 3000 chars of unbroken text cap at 192px (`max-h-48`) and scroll inside; composer grows to about 246px (desktop) / 256px (phone). - Phone: composer bottom stays at 783px, directly above the tab bar, with no overlap, also at 320 wide. Send button never overlaps the textarea (it is on its own footer row, so the text cannot run under it). - Utility `field-sizing-content` compiles to `field-sizing:content` in the built CSS. No raw values, tokens only.

**Finding (fix)** - `apps/web/src/chat/chat.tsx:586` still has `rows={3}`. With `field-sizing` unsupported (Safari/Firefox; I simulated with `field-sizing: fixed`) the textarea falls back to `rows`, so it rests at 3 lines (76-79px) and scrolls, not the intended 2 (the `min-h-14` floor does not shrink it). Usable, but contradicts the PR text. Change to `rows={2}`; with field-sizing supported it has no effect (min-h-14 already wins).

**Notes (non-blocking)** - Empty composer total is 110px at 1440, 120px at 390 (touch targets force the 44px footer), 104px at 800, so the "94px" in the PR body is the non-touch figure; textarea 56 + 44 button row is the bulk. If more compaction is wanted, the footer row is the next target (send button on the textarea's bottom-right would save about 40px), but that is a bigger change. - I could not exercise the routing-hint row: my server runs with `NO_PLANNER=1`, so `cue` never renders. By code (`chat.tsx:595-603`) it is `mr-auto min-w-0` with `overflow-wrap:anywhere` in the same flex row as the buttons, so it wraps instead of overlapping; worth one look on a Planner-enabled server at 320px. - The pb-1 change (`pt-3 pb-1`) is fine visually; text baseline is not cramped against the footer. - No test covers this (CSS/layout only; acceptable per AGENTS.md, CI e2e "Send message" specs still apply).

Addressed: - `rows={3}` changed to `rows={2}` in `chat.tsx` so browsers without `field-sizing` rest at two lines. - PR body resting heights corrected (about 110px desktop, about 120px touch). - Routing hint at 320px: I could not render it. The hint only shows when the Planner is enabled (`destinationCue` returns undefined when `plannerEnabled` is false), and both of my available servers run with AGENT=off (the fake Planner's MCP port 8797 is taken). From the code, the hint is `mr-auto min-w-0 [overflow-wrap:anywhere]` in the same flex footer row as the 28px send button, so it wraps within the remaining width and grows the row rather than overlapping. That row is unchanged by this PR. At 320px the page has no horizontal overflow (scrollWidth 320).