Make the retro board feel quick

[ellgreen]

Two reported bugs turned into a look at why the board feels heavy in general. Nine commits, each independently reviewable, ordered so the riskiest change sits in the middle with verification either side.

The two reported bugs

Duplicate status pill when the header is collapsed. Deleting the badge outright would have left a gap — between sm and md the stage rail's <ol> is hidden, so the badge was the only stage label in that range. Instead the rail renders at every width and hides its non-active steps below md. One component owns the status indicator and can't duplicate itself.

New-note dialog kept the last note's text, in a tiny box. It never called form.reset(), and its only reset was guarded on content, which is undefined when creating. Now resets on open, the way column-dialog.tsx already did. The 36px single-line Input for a 255-character field becomes the AutoTextarea that already existed in the repo, and the dialog widens to hold it. Enter saves (Shift+Enter for a newline) — the chat-input convention, and simpler than the Cmd/Ctrl+Enter this went through first. task-dialog.tsx had the identical reset bug and gets the same fix.

Why it felt slow

RetroContext carried the whole useWebSocket return in an inline object literal, so its identity changed on every inbound frame and re-rendered every consumer — including each note, where a layoutId turns a re-render into a layout projection pass. react-use-websocket also writes lastMessage inside flushSync, so that render was synchronous and unbatched, blocking the socket handler.

Frames now fan out to a ref'd listener set. onMessage runs before filter, and filter gates only the lastMessage write, so filter: () => false plus onMessage delivers every frame with no render from the hook at all (verified against attach-shared-listeners.js). readyState gets its own context so a reconnect touches only ConnectionIndicator.

Other things that were costing time:

• Stage changes threw away the notes. Each stage called useNotes, which owned a reducer and a mount fetch, so mode="wait" unmounting the outgoing stage reset to empty, flashed skeletons, refetched, and dropped the rollback map for any optimistic edit in flight. One NotesProvider above the board instead.
• Votes waited a full round trip before the button, the ring or the counter moved, and the response replaced the list wholesale so quick clicks could race.
• Notes loaded after the retro plus a mount. Both only need the id from the path, so they go in the loader together.
• Paint cost: an always-mounted backdrop-blur-sm toolbar per note, a second sticky backdrop-blur-xl stacked under the nav's, transition-all across a font-size change, three infinite blur-3xl loops on the home page, and a TooltipProvider per tooltip instance.

Measured

Verified in the running app with a render counter and the resource timing API:

	Before	After
Note re-renders from one connection_info frame	1 per note	0
Note state resets across 6 stage transitions	6	0
Skeleton flash on stage change	yes	no
Retro + notes requests	sequential	both at 94ms
Vote feedback	after the round trip	~1.3s before the request is sent

A stage change does still re-run the route loader, deliberately: see the
cache-invalidation commit below. That result is discarded, so the notes state
and the absence of a skeleton are unaffected — what changed is that the board
no longer throws its notes away and refetches them behind a skeleton.

Rollback verified by stopping the backend mid-session: the vote reverts and toasts. Reconnect resync verified the same way — fires exactly once, notes intact.

Bug found while testing

NoteFromModel resolves created_by_name from the user it's handed, and both socket broadcasts passed nil, falling through to an "unknown" default. The REST index passes a real user, which is why notes looked right on load and then flipped the moment anyone moved, grouped or edited one — visible on every note in the group and vote stages. Predates this work; found while checking drag-and-drop still worked.

Creates pass the acting user, who is the author. Updates can't — moving and grouping other people's notes is allowed — so the author is looked up by note.UserID.

Second bug found, also pre-existing

Leaving a retro and coming back showed the stage you left rather than the one it
is on, until a hard refresh. The route loader's result is cached by the router
and survives navigating away, but while the board is open it is the socket, not
the loader, that moves the retro forward — so the cached copy silently goes
stale. Returning mounts the board and seeds it from that copy, and the seed
happens once, so a later revalidation never reaches the screen.

Fixed by invalidating on retro_updated and status_updated. Confirmed
pre-existing by running main against the same backend and reproducing it
identically.

Tried and reverted

React.memo on Note and DraggableNote, with the action props taking a note id so callbacks could be stable. It made no measurable difference: AnimatePresence deliberately rebuilds its context value when presenceAffectsLayout is on ("we want to make a new context value to ensure they get re-rendered" — PresenceChild.mjs), and a context read isn't something memo can block. Adding one note re-rendered each sibling the same number of times either way, so the API churn across four files bought nothing. Memoising above an AnimatePresence works — that's why BoardForStatus pays off — below it does not.

Product decisions taken

Letter avatars come off notes and stay in the presence stack. With no profile images the circle on a note is a missing-image fallback sitting next to the full name it stands for; a dot in the same per-person colour carries the grouping without pretending to be an avatar. The overlapping stack in the header keeps its initials, where compressing several people into a corner is real work.

ConnectionIndicator also moves into the always-visible header row — it lived inside CollapsibleContent, which Radix unmounts, so collapsing the header made presence vanish.

Reviewer notes

• .claude/launch.json is included — a dev-server config added for tooling during this work, swept in by git add -A. Happy to drop it if unwanted.
• Votes are still REST-only and never published to event.Broker, so other people's votes still don't appear live during the vote stage. That needs a server event and isn't this change.
• useVotes is deliberately vote-stage only — in discuss the same endpoint returns everyone's votes with counts, a different shape.
• Test coverage is unchanged in kind: the project has no jsdom or testing-library, so only reducers are unit-testable. use-notes.test.ts keeps passing untouched apart from one added case; use-votes.test.ts is new (7 cases). Everything else — the provider split, the memoisation, the stage transitions — was verified by driving the real app, not by tests.
• Not benchmarked: the blur removals are reasoned from how backdrop-filter behaves on sticky elements. I couldn't capture frame timings with the tooling available.

Full gate green: go build, go vet, go test, pnpm lint, tsc -b, pnpm test (27 passing), pnpm build.

🤖 Generated with Claude Code