Staff Chat — Messenger UX board

One staff conversation in the Coaches channel (the name, never the slug). Viewer is Morgan; the others are Josh W and Sasha.

375 · iPhone standard

320 · worst case

overflow check…

Day separator — YESTERDAY 3:02pm. Centred, in flow, replaces every per-bubble clock.
Run of three from one sender: the name label appears once, above the run.
Avatar 28px, bottom-aligned beside the run's last bubble. Others' runs only.
Corners 18px outer; the run-facing side flattens to 4px. 2px between bubbles inside a run, 8px between runs.
Own run — moss, right, no name, no avatar; the right side is what flattens.
20-minute gap → time-only separator 9:14am.
Single-message run (Sasha) stays fully rounded at 18px. A one-word label yields one initial — that is memberInitials working, not a bug.
Tombstone breaks the run on both sides: dashed, italic, muted, 14px radius — unchanged from today.
Josh's next line therefore starts a new run: label and avatar come back.
Delivery glyphs under the member's own newest bubble — moss check-in-circle = sent, open circle = sending.
Seen-by: three 16px initials discs, bottom-right, 4px overlap, 1.5px paper keyline. sr-only: "Seen by Josh W, Sasha, Kaden B". It sits under the newest confirmed message, so pending bubbles trail below it.
Failed send — amber border + amber-soft fill + retry line. Styling untouched; retry keeps the same client UUID.
New-message chip — 40px moss circle, ↓, count badge. Shown here for reference; live it appears only when scrolled away from the end, and it stays pure flow (the translated column is a containing block — nothing fixed inside it).

02Channel list — living rows

Preview text derives from the message window the snapshot already fetches (body added to BADGE_COLS) — no new query.

375 · iPhone standard

320 · worst case

overflow check…

Unread row — name and preview both bold, moss count badge, relative time stacked above it.
Leading avatar 44px = the last sender's initials disc, so the list reads as alive.
Read row — regular weight, Tue, no badge.
Empty channel — moss disc with the channel's initial, muted "No messages yet", nothing trailing.
No chevron. The trailing column is time-over-badge; the old › has nothing left to say.
Worst-case row (fourth) — longest channel name + longest label in the preview + 19/08 + 99+. Both lines truncate; the trailing column never gets eaten.

03Composer — pill + circular send

Three states in the order a member meets them. The composer is the transcript's sibling, never its child.

Type — what is real and what is approximated

Real, embedded: the app's own woff2 files from public/fonts/, base64-inlined so this stays one self-contained file — Founders Grotesk Condensed 400 / 600 / 700 and Tiempos Text 400 + italic. Type on this board is therefore pixel-true, not approximated.
Not embedded: Founders Grotesk Condensed 500 (medium) and Tiempos Text 500/600 — no chat surface uses them, and nothing on this board requests them. If a build later asks for 500, this board will silently render 400.
Fallback stacks are the app's own (Arial Narrow / Helvetica Neue for disp, Georgia / Times New Roman for body), so a machine without the embedded faces degrades exactly as the app does.

Where latitude was taken (the spec left these open)

Avatar initials size. The shadcn AvatarFallback default is text-sm (14px), which is oversized in a 28px disc and unreadable-tight in a 16px one. Board uses 11px at 28px, 8px at 16px, 15px at 44px — the build should pass these via fallbackClassName rather than accept the default.
Sent glyph = filled moss disc with a cream tick (Messenger's "delivered"), 14px. Sending glyph = 1.5px open ring in ink-muted at 55% — deliberately not moss, so "not yet" reads as absence of colour.
Separator styling — plain centred text, no hairlines either side, 11px disp semibold, tracking .08em. The day token carries the extra weight/tracking; the clock stays lowercase so am/pm is not uppercased into AM.
Seen-by cluster overlap = −4px with a 1.5px keyline in --background. Right-aligned, 5px under the bubble.
Chip = 40px circle, count badge in cream-on-moss pinned top-right with a 2px background ring. Not a pill — the spec asked for circular, and the badge is what carries the number.
Row height — the list row grows from min-h-[60px] to 68px to hold two lines beside a 44px avatar. Radius, border and card fill are unchanged.
Gap between runs is the transcript's existing gap-2 (8px); the 2px intra-run gap is set on the bubble stack, so the two never fight.

Flagged while reading the code — for Morgan, not fixed here

The live retry line stutters. PendingBubble renders {item.error} Tap to retry, and the default error copy is already "Could not send. Tap to try again." — so a network failure reads "Could not send. Tap to try again. Tap to retry" today. The board shows the deduped line. Worth folding into the build as a one-word copy fix.
The 4KB no-space bubble is not on this board — it is a measurement, not a picture, and belongs in the build's 320px render checks rather than in a conversation mockup.

Staff chat — Messenger UX

01Transcript — runs, separators, glyphs, seen-by

02Channel list — living rows

03Composer — pill + circular send

Type — what is real and what is approximated

Where latitude was taken (the spec left these open)

Flagged while reading the code — for Morgan, not fixed here

Coaches

Chat