feat(mentions): typing @ offers the Cat — and posts stop mislinking real handles

[catomean]

Two commits. The first makes @cat discoverable; the second fixes a rendering bug the first one makes more likely to be hit.

---

1. Typing @ offers the Cat

The Cat has answered to @cat on the wall and in DMs since yesterday, and nobody knows. No affordance anywhere says so — you either read a commit message or you never find out. That made the previous two PRs a rumour rather than a feature.

Typing @ now opens a menu, and the Cat is the first row, before any person, on the first keystroke.

The Cat appears while the query is still a prefix of its handle (bare @, c, ca, cat) and drops out the moment it stops matching — @catalogue is not the Cat. That's a tested rule, not sort order. Rows show the handle, not only the name, because the menu is a teaching surface: use it once, type @cat directly forever.

Where the code went

One definition of a mention. activeMention sits in domain/mentions/parse.ts beside parseMentionCandidates and reads the same character class and word-boundary rule, so what the menu offers and what the resolver links are the same set by construction. A menu with its own idea of a handle could offer a completion the resolver then refuses.

No new people query. /api/profiles?search= already searches username and name, escapes LIKE metacharacters, and hides CI fixture accounts. A second query would have re-inherited none of that. The only new thing is the order, so the only new domain file is a pure ranking function.

Three composers, two kinds of editor. Messages are a <textarea>; wall posts are contentEditable. That difference is confined to caret.ts, which reduces both to "what is before the caret" and "replace this range". Parsing, ranking, fetching and the menu are written once and don't know which editor they're attached to.

Both contentEditable composers share useContentEditableMentions. That extraction wasn't planned: check:sizes failed at 310/300 on PostComposerMobile and pointed straight at wiring I'd written twice. The gate was right, the exception list stayed at 36, and both files got shorter.

Two traps worth naming

• Surfaces take a ref, not an element, and read .current when called. Capturing the element captures the first render's null — refs are assigned at commit and nothing re-renders between mounting a composer and its first keystroke, so a captured null survives exactly long enough to swallow the first @ anyone ever types.
• Writes go through execCommand('insertText') — deprecated and deliberate. It's the only way to change either editor that fires a real input event (so React's onChange runs) and keeps the browser's undo stack, so ctrl-Z undoes the pick rather than the whole message. handlePaste already depends on it.

---

2. A post linked @dacota-plaettli to somebody called dacota

Found while wiring the above. markdown.tsx matched @[a-zA-Z0-9_]{1,30} in its inline regex — a third definition of a handle, after the parser and the resolver — and disagreed with both visibly:

• No ., - or +. @dacota-plaettli rendered as a link to /profiles/dacota with -plaettli trailing as loose text; @m.schaupensteiner linked to /profiles/m. Both are real production accounts. The resolver notifies the right person while the post links to someone else.
• No word boundary. bob@example.com rendered @example as a profile link — the exact bug the resolver was written to avoid, with a second implementation to re-fix it in.

Autocomplete is what makes this urgent rather than untidy: it turns inserting a dotted or hyphenated handle into one keystroke, so the handles that render wrong are precisely the ones about to be typed most.

The fix deletes the third definition rather than correcting it. The renderer can't ask the database who exists, so it links the longest candidate — the same preference the resolver applies before checking existence, which also gives ask @alice. the right answer.

That file had no tests at all, which is how three definitions coexisted. It has fourteen now.

---

Verification

Four mutations, each proven red then restored green:

Mutation	Result
Remove the Cat hoist	3 tests fail
Drop the word-boundary check (email opens a menu)	1 test fails
Make the textarea's replaceRange inert	2 tests fail
Renderer links shortest candidate instead of longest	3 tests fail

Wiring tests drive a real textarea through userEvent — type, arrow, Enter, Escape — because the pure tests prove the rules and cannot prove a keystroke ever reaches them.

npm run verify green: 247 suites, 2453 tests.

Known limit

Ranking is handle-prefix first, display-name-prefix second, over whatever /api/profiles returns. No fuzzy or middle-of-name matching. Stated here rather than discovered later.

🤖 Generated with Claude Code