Restyle the existing composer without replacing its editor

[morgmart]

What changes

Restyles the composer already shipping in Buzz instead of replacing its editor. The surface uses shared spacing, body typography, a quieter border and the existing round send control. Keyboard focus stays on the editor; controls wrap in narrow layouts.

The mention picker, typed mentions, branded links, source copying/sending, selected notification recipients, scoped drafts, Undo and composition remain owned by today's editor. No formatting commands, rich-text dependencies, disconnected attachment/voice buttons or new sending contract are introduced.

The useful composer catalogue examples are retained in a small isolated preview using the production composer, with mention/emoji controls and disabled/read-only/recovery states. The independent design-system viewer is unchanged. Preview through the normal Vite server at /tests/fixtures/product-ui.html.

Stack and preservation

Now based on main e9717dd (merged styling #116), not retired editor PR #118. Prompts #121 builds on this; attachments #122 follows prompts. Prior controls work is preserved locally as morganm/composer-controls-reference-20260922, and the original port and editor reference branches remain intact.

Validation

Published head: 20cc5fe3d719d972fbd3ce74f70f25b3bd28455e.

• Complete Vitest suite: 193 files / 2,017 tests passed on the initial appearance working tree based on e9717dd, before commit formatting.
• Complete composer-links, mention-edit, typeahead and new catalogue files: 50/50 Chromium/WebKit checks passed on that tree (38s). Covers source-copy fidelity, branded links, notification intent, native browser editing/Undo, draft isolation, composition guards and responsive widths 360/768/1440.
• Complete emoji/GIF files: 8/8 passed on 3e52625 plus the exact follow-up committed as 20cc5fe (15.6s). Only the intentionally changed composer border/body-size expectations now resolve shared tokens; search focus, no-shadow and emoji transitions remain checked.
• Normal pre-commit/pre-push hooks passed at the published head: types, related tests and design-system guards. No bypass, retries or relaxed tolerances.
• Brain independently reviewed the initial slice and found no blocking editing defect; his typography and stale-assertion findings are addressed by the follow-up.

Browser coverage added: two catalogue cases, each in both engines, because actual layout, keyboard focus and clipboard selection require a browser. No existing browser cases or failure paths removed. These are new acceptance checks, not a claimed red/green regression reproduction.

Remaining gates

Fresh hosted CI and Morgan's visual/human review remain required. Native IME and packaged-app acceptance are not established. No live uploads were tested in this slice. No merge authorization or whole-stack readiness claimed.

Visual review — 20cc5fe

Production composer with synthetic local preview data; no live conversation messages or uploads. These show the appearance-only branch, not the contextual prompts/typing placement in #121.

Wide · light

Editor with a selected mention/notification recipient, plus disabled, read-only and rejected-send states.

Narrow · light

Same examples in a narrow viewport.

Narrow · dark

Same states with the app’s dark-mode setting applied and color transitions finished. Replaces an earlier capture taken during the theme transition; no source change.

[wesbillman]

Carl, an automated reviewer, commenting via Wes’s GitHub account.

No blocking code findings; validation is not fully green

Reviewed head 20cc5fe3d719d972fbd3ce74f70f25b3bd28455e against base/merge-base e9717dda50eb25e81e0edad30b5d0500a052b591. This verdict covers the appearance-only PR, not the later prompts/attachments stack.

The production diff preserves the existing editor, source text, notification recipients, draft isolation, composition/Undo and send contract. The changed control uses the existing shared Button/IconButton behavior. The new preview uses local fixture services rather than booting a second application/relay session. Independent responsive/accessibility source review found no separate actionable regression.

Verification at the reviewed head

• 58/58 browser checks passed in Chromium and WebKit across the complete composer-links, mention-edit, typeahead, emoji, GIF and product-ui files, with no retries. Coverage includes selected-recipient fidelity, source copying, composition/Undo, channel/thread isolation, recovery, responsive controls and keyboard focus.
• Additional catalogue geometry probes checked filled drafts at widths 320/360/768/1440, 100%/200% text scale and both themes in both engines. Controls stayed within the form, and pointer/keyboard focus styling matched the intended modality. These are targeted fixture checks, not whole-app/native acceptance.
• Full Vitest run: 2,016 passed, 1 failed across 193 files. src/app/pages.integration.test.mjs:8 (the app runtime exposes ready bundled pages and removes them on disable) hit its existing 5,000ms timeout. The test file is unchanged; the cause and relationship to this PR are unestablished. No retry or timeout relaxation was used. This is an unresolved validation gap, not a demonstrated composer defect.
• git diff --check passed. Hosted status currently supplies Semgrep, zizmor and DCO success, but no application-test workflow result for this head. Author-reported pre-format unit results are not substituted for an exact-head green run.

Nonblocking existing limitation: an empty placeholder can wrap into the tool row at 360px/200% text size. With the production Inter font loaded, the same overlap is present after restoring the base composer/editor CSS; it is not a newly established blocker for this slice. The new catalogue geometry assertions use a filled draft and do not catch that case.

Before calling the change fully validated, resolve the unit timeout and obtain the required application CI result and human visual review. Native IME/packaged-app acceptance remains unverified. This review is a comment, not approval or merge authorization.