","\t\t>","\t\t\tstyle={{ maxHeight: `min(${LIST_HEIGHT}, 45dvh, 45vh)` }}","\t\t\tdata-focus-boundary=\"\"","\t\t\tdata-chat-mention-picker=\"\"","\t\t\tclassName=\"absolute bottom-full left-2.5 z-30 mb-1 w-max min-w-48 max-w-[calc(100%-1.25rem)] overflow-y-auto rounded-lg bg-page p-1 ring-hairline shadow-overlay\"","\t\t cancelAnimationFrame(frame);","\t\t\tdocument.getElementById(referenceOptionId(id, active))?.scrollIntoView({ block: \"nearest\" });","\t\tlet frame = requestAnimationFrame(() => {","\tuseEffect(() => {",") {","\t\toptions: readonly MentionCandidate[];","\t\tonSelect: (candidate: MentionCandidate) => void;","\t\tonActive: (index: number) => void;","\t\tid: string;","\t\tactive: number;","\t}: {","\t\toptions,","\t\tonSelect,","\t\tonActive,","\t\tid,","\t\tactive,","\t{","export function MentionPicker(","\t\t/>","\t\t\tsrc={`https://github.com/${encodeURIComponent(login)}.png?size=40`}","\t\t\treferrerPolicy=\"no-referrer\"","\t\t\tonError={() => setFailed(true)}","\t\t\tclassName=\"block size-5 shrink-0 rounded-md bg-selected\"","\t\t\talt=\"\"","\t\t","\t\t\t\t{login[0]}","\t\t\t>","\t\t\t\tclassName=\"grid size-5 shrink-0 place-items-center rounded-md bg-selected text-xs font-medium text-text-secondary uppercase\"","\t\t\t\taria-hidden=\"true\"","\t\t\t (index - 1 + mentionOptions.length) % mentionOptions.length);","\t\t\t\t\t\t\tif (mentionAction === \"previous\") {","\t\t\t\t\t\t\t\tmoveMention(index => (index + 1) % mentionOptions.length);","\t\t\t\t\t\t\tif (mentionAction === \"next\") {","\t\t\t\t\t\t\t\t: undefined;","\t\t\t\t\t\t\t\t}, true)","\t\t\t\t\t\t\t\t\tmetaKey: event.metaKey,","\t\t\t\t\t\t\t\t\tctrlKey: event.ctrlKey,","\t\t\t\t\t\t\t\t\taltKey: event.altKey,","\t\t\t\t\t\t\t\t\tshiftKey: event.shiftKey,","\t\t\t\t\t\t\t\t\tisComposing: event.nativeEvent.isComposing,","\t\t\t\t\t\t\t\t\tkeyCode: event.keyCode,","\t\t\t\t\t\t\t\t? mentionKeyAction({","\t\t\t\t\t\t\tlet mentionAction = mentionOpen","\t\t\t\t\t\t\tlet composing = event.nativeEvent.isComposing || event.keyCode === 229;","\t\t\t\t\t\tonKeyDown={event => {","\t\t\t\t\t\t}}",303,18,374,20,[1402,1403,1404,1405,1406,1407,1408,1409,1410,1411,1412,1413,1414,1415,1416,1417,1418,1419,1420,1421,1422,1423,1424,1425,1426,1427],{"_83":84,"_85":1453},{"_83":84,"_85":1452},{"_83":84,"_85":1451},{"_83":57,"_85":1450},{"_83":55,"_85":1449},{"_83":55,"_85":1448},{"_83":55,"_85":1447},{"_83":84,"_85":1446},{"_83":84,"_85":1445},{"_83":57,"_85":1444},{"_83":57,"_85":1443},{"_83":55,"_85":1442},{"_83":55,"_85":1441},{"_83":84,"_85":1440},{"_83":84,"_85":1439},{"_83":57,"_85":1438},{"_83":57,"_85":1437},{"_83":55,"_85":1436},{"_83":55,"_85":1435},{"_83":84,"_85":1434},{"_83":84,"_85":1433},{"_83":57,"_85":1432},{"_83":55,"_85":1431},{"_83":84,"_85":1430},{"_83":84,"_85":1429},{"_83":84,"_85":1428},"\t\t\t\t\t\t\tpendingEdit.current = beforeInputSelection(","\t\t\t\t\t\t\tlet input = event.nativeEvent as InputEvent;","\t\t\t\t\t\tonBeforeInput={event => {","\t\t\t\t\t\trole=\"combobox\"","\t\t\t\t\t\trole={referencesEnabled ? \"combobox\" : undefined}","\t\t\t\t\t\treadOnly={!composerReady || submitting}","\t\t\t\t\t\tclassName=\"h-14 min-h-14 flex-1 w-full resize-none bg-transparent px-4 py-3 text-sm\"","\t\t\t\t\t\taria-haspopup=\"listbox\"","\t\t\t\t\t\taria-expanded={pickerOpen || mentionOpen}","\t\t\t\t\t\taria-haspopup={referencesEnabled ? \"listbox\" : undefined}","\t\t\t\t\t\taria-expanded={referencesEnabled ? pickerOpen : undefined}","\t\t\t\t\t\taria-disabled={!composerReady || submitting}","\t\t\t\t\t\taria-describedby={referencesEnabled ? instructionsId : undefined}","\t\t\t\t\t\taria-controls={mentionOpen ? mentionPickerId : pickerOpen ? pickerId : undefined}","\t\t\t\t\t\taria-autocomplete=\"list\"","\t\t\t\t\t\taria-controls={pickerOpen ? pickerId : undefined}","\t\t\t\t\t\taria-autocomplete={referencesEnabled ? \"list\" : undefined}","\t\t\t\t\t\t\t: undefined}","\t\t\t\t\t\t\t? referenceOptionId(pickerId, picker.options.indexOf(activeOption))","\t\t\t\t\t\t\t: pickerOpen && activeOption","\t\t\t\t\t\t\t? referenceOptionId(mentionPickerId, mentionActive)","\t\t\t\t\t\taria-activedescendant={mentionOpen","\t\t\t\t\t\taria-activedescendant={pickerOpen && activeOption","\t\t\t\t\t","\t\t\t\t)}",296,358,15,[1458,1459,1460,1461,1462,1463,1464,1465,1466,1467,1468,1469,1470,1471,1472],{"_83":84,"_85":1484},{"_83":84,"_85":1476},{"_83":84,"_85":1453},{"_83":55,"_85":1483},{"_83":55,"_85":1482},{"_83":55,"_85":1481},{"_83":55,"_85":1480},{"_83":55,"_85":1479},{"_83":55,"_85":1478},{"_83":55,"_85":1477},{"_83":55,"_85":1476},{"_83":55,"_85":1453},{"_83":84,"_85":1475},{"_83":84,"_85":1474},{"_83":84,"_85":1473},"\t\t\t\t\t\tType # to reference a document.","\t\t\t\t\t

","\t\t\t\t{referencesEnabled && (","\t\t\t\t\t/>","\t\t\t\t\t\toptions={mentionOptions}","\t\t\t\t\t\tonSelect={chooseMention}","\t\t\t\t\t\tonActive={index => setMentionCursor({ key: mentionKey, index })}","\t\t\t\t\t\tid={mentionPickerId}","\t\t\t\t\t\tactive={mentionActive}","\t\t\t\t\t","\t\tsetMentionCursor({ key: mentionKey, index: to(mentionActive) });","\tlet moveMention = (to: (index: number) => number) =>","\t};","\t\tpendingCaret.current = next.caret;","\t\tpendingEdit.current = undefined;","\t\tsetDismissedPicker(undefined);","\t\tsetSendError(undefined);","\t\tsetSelection({ start: next.caret, end: next.caret });","\t\t\t)","\t\t\t\t),","\t\t\t\t\t{ start: mention.start, end: mention.end },","\t\t\t\t\tcurrent.references,","\t\t\t\t\tnext.text,","\t\t\t\t\tcurrent.text,","\t\t\t\treconcileReferenceDrafts(","\t\t\t\tnext.text,","\t\t\t\tcurrent,","\t\t\treviseComposerDraft(","\t\tsetDraft(current =>","\t\tlet next = insertMention(draft.text, mention, candidate);","\t\tif (!mention) return;","\tlet chooseMention = (candidate: MentionCandidate) => {",116,132,27,[1548,1549,1550,1551,1552,1553,1554,1555,1556,1557,1558,1559,1560,1561,1562,1563,1564,1565,1566,1567,1568,1569,1570,1571,1572,1573,1574],{"_83":84,"_85":1598},{"_83":84,"_85":1597},{"_83":84,"_85":312},{"_83":55,"_85":1596},{"_83":55,"_85":1595},{"_83":55,"_85":1594},{"_83":55,"_85":1578},{"_83":55,"_85":1593},{"_83":55,"_85":1592},{"_83":55,"_85":1591},{"_83":55,"_85":1590},{"_83":55,"_85":1530},{"_83":55,"_85":1589},{"_83":55,"_85":1588},{"_83":55,"_85":1587},{"_83":55,"_85":1586},{"_83":55,"_85":1585},{"_83":55,"_85":1584},{"_83":55,"_85":1583},{"_83":55,"_85":1582},{"_83":55,"_85":1581},{"_83":55,"_85":1580},{"_83":55,"_85":1579},{"_83":55,"_85":1578},{"_83":84,"_85":1577},{"_83":84,"_85":1576},{"_83":84,"_85":1575},"\t\t: picker.options[Math.min(picker.active, picker.options.length - 1)];","\t\t? undefined","\tlet activeOption = picker.options.length === 0","\t\t: undefined;","\t\t? mentionOptions[mentionActive]","\tlet activeMention: MentionCandidate | undefined = mentionOpen","\t\t: 0;","\t\t? Math.min(mentionCursor.index, mentionOptions.length - 1)","\tlet mentionActive = mentionCursor.key === mentionKey","\tlet mentionOpen = mentionOptions.length > 0 && mentionKey !== dismissedPicker;","\t\t: [];","\t\t)","\t\t\tmention.query,","\t\t\tmentionCandidates({ authors, people, planner: agent, self: handle }),","\t\t? filterMentions(","\t\t\t\treference.start < mention.end && reference.end > mention.start","\t\t\t&& !draft.references.some(reference =>","\tlet mentionOptions = mention","\tlet mentionKey = mention ? mentionTriggerKey(mention) : undefined;","\t\t? mentionTrigger(draft.text, selection.start, selection.end)","\tlet mention = composerReady && !submitting && !detected","\tlet authors = chatAuthors(entries);","\t\troom,","\t\trepository,",90,105,[1602,1603,1604,1605,1606,1607,1608],{"_83":84,"_85":1615},{"_83":84,"_85":1614},{"_83":84,"_85":1613},{"_83":55,"_85":1612},{"_83":84,"_85":1611},{"_83":84,"_85":1610},{"_83":84,"_85":1609},"\tlet activity = useRef(onActivity);","\tlet synchronized = useRef(undefined);","\tlet instructionsId = useId();","\tlet mentionPickerId = useId();","\tlet pickerId = useId();","\tdraftRef.current = draft;","\tlet draftRef = useRef(draft);",83,97,[1619,1620,1621,1622,1623,1624,1625],{"_83":84,"_85":1632},{"_83":84,"_85":1631},{"_83":84,"_85":1630},{"_83":55,"_85":1629},{"_83":84,"_85":1628},{"_83":84,"_85":1627},{"_83":84,"_85":1626},"\tlet pendingEdit = useRef<{ start: number; end: number } | undefined>(undefined);","\tlet pendingCaret = useRef(undefined);","\tlet textarea = useRef(null);","\tlet [mentionCursor, setMentionCursor] = useState<{ key?: string; index: number }>({ index: 0 });","\tlet [dismissedPicker, setDismissedPicker] = useState();","\tlet [selection, setSelection] = useState({ start: 0, end: 0 });","\tlet [sendError, setSendError] = useState();",64,77,[1636,1637,1638,1639,1640,1641,1642],{"_83":84,"_85":1647},{"_83":84,"_85":1646},{"_83":84,"_85":1645},{"_83":55,"_85":1644},{"_83":84,"_85":1643},{"_83":84,"_85":1598},{"_83":84,"_85":1597},"\t\treferencesEnabled,","\t\tpeople = [],","\t\tonActivity,","\t\thandle,","\t\tconnected,",51,62,8,[1652,1653,1654,1655,1656,1657,1658,1659],{"_83":84,"_85":1667},{"_83":84,"_85":1666},{"_83":84,"_85":1665},{"_83":55,"_85":1664},{"_83":55,"_85":1663},{"_83":84,"_85":1662},{"_83":84,"_85":1661},{"_83":84,"_85":1660},"\tactive?: boolean;","\tagent?: boolean;","\t/** Hosted mode keeps the shared chat while repository-scoped agent work is disabled. */","\tpeople?: readonly string[];","\t/** People connected to this document, for `@` suggestions. */","\tsendAcknowledgements: boolean;","\troom: string;","\trepository: Pick;",40,50,[1671,1672,1673,1674,1675,1676,1677],{"_83":84,"_85":99},{"_83":84,"_85":1681},{"_83":84,"_85":1680},{"_83":55,"_85":1117},{"_83":84,"_85":1679},{"_83":84,"_85":1678},{"_83":84,"_85":99},"import type { Wire as Socket } from \"../wire\";","import type { ComposerDraft, ReferenceTarget } from \"./references\";","import type { Repository } from \"../api\";","import type { Chat as Wire } from \"@chopin/protocol\";",16,[1684,1685,1686,1687,1688,1689,1690,1691,1692,1693,1694,1695,1696,1697,1698,1699],{"_83":84,"_85":1702},{"_83":84,"_85":680},{"_83":84,"_85":99},{"_83":55,"_85":1127},{"_83":55,"_85":1126},{"_83":55,"_85":1125},{"_83":55,"_85":1124},{"_83":55,"_85":1123},{"_83":55,"_85":1122},{"_83":55,"_85":1121},{"_83":55,"_85":1120},{"_83":55,"_85":1119},{"_83":55,"_85":1118},{"_83":84,"_85":1126},{"_83":84,"_85":1701},{"_83":84,"_85":1700},"\tReferencePicker,","\treferenceOptionId,","import { SendAction } from \"@chopin/editor\";","17128dd0","dd851054","id","01M3WXSKX87SY7WS1911XNM4EC","project","number",240,"title","Show an @ mention picker in the Chat composer","description",{"_1745":1746,"_54":1747},"state","merged","base",{"_1707":18,"_1741":1744,"_1743":36},"head",{"_1707":18,"_1741":1742,"_1743":38},"mergeRevision","3e57e40ea6da4920d8a6f8a8ee645ff6abadc898","implements",[],"addresses",[1740],"createdBy",{"_1736":1737},"createdAt","2026-10-01T23:46:33.000Z","updatedAt","2026-10-02T18:30:18.000Z","locked","fork","headAvailable",true,"actor",{"_53":1738,"_1705":1739},"user","import:github:57336517","01M3WWTMPG50FFM5SRGR435WND","branch","refs/pull/240/head","revision","refs/heads/main","format","markdown","Closes #239\n\n## What changes\n\nTyping `@` at a word boundary in the Chat composer opens a compact list above it: the Planner (`chopin`) first, then people present in the document, then people who have posted in this Chat, deduplicated case-insensitively, current user excluded. Rows are a 20px avatar (the Planner mark for `chopin`) and the login, in the `chrome` type role; the list shows at most 8 rows and scrolls, and never exceeds the composer width.\n\n- **Keyboard:** ↑/↓ move, Enter or Tab insert `@login ` and close, Esc dismisses and keeps the typed text, IME composition never selects.\n- **Trigger:** same boundary rule as `addressed()`, so `a@b.com` never opens the list; no matches closes the list (no empty row); the caret must be at the end of the login.\n- **Avatars:** `https://github.com/.png?size=40`, `alt=\"\"`, falling back to the login's initial on a `selected` tile.\n- **Semantics:** the textarea is a `combobox` with `aria-activedescendant` onto a `listbox` named \"Mentions\". Only one picker is open at a time; the `#` reference picker is untouched and wins if both could apply.\n- **Unchanged:** routing. Only `@chopin` starts a Planner turn (`packages/protocol/address.ts`); mentioning a person is text only, with no server, notification or protocol change. The transcript already renders mentions without the `@`, so it needed no change. With `agent` off the Planner row is omitted.\n\nThe composer is now always a `combobox` (the `@` list needs no server support), so the \"server without chat references\" e2e now expects `combobox` and scopes its \"no listbox\" check to the document-reference list.\n\n## Verification\n\n- `bun test`: 1817 pass, 0 fail. New `apps/web/src/chat/mentions.test.ts` covers trigger detection (including `a@b.com` and agreement with `addressed()`), ordering, dedupe, filtering, insertion and keyboard.\n- `bun run types`: all 9 checks exit 0. `bun run ci`: passes.\n- `bun run e2e`: full suite 291 passed / 4 failed on first run. Three were from this change (a test of mine, the capability-fallback test above, and an sr-only hint I then removed) and pass after fixing. `sidecar.e2e.ts:551` (\"decision cards save independently with progressive custom answers\") fails identically on `origin/main` with this change stashed; unrelated.\n- New `e2e/chat-mentions.e2e.ts` covers open → navigate → filter → select → send at desktop (payload `to: \"planner\"` only for `@chopin`, `\"room\"` for a person) and a 390px Chat panel (inside the viewport and the panel, no horizontal overflow).\n- Visual check used the repo's Playwright harness (fake GitHub, three real sessions) rather than agent-browser, because that harness already provides authenticated multi-user rooms.\n\n## Screenshots\n\nBefore (typing `@`, nothing happens) and after, desktop and 390px wide:\n\n![before-desktop](https://github.com/user-attachments/assets/b415afc1-c0a3-496a-9b43-7fb721b9f48d)\n\n![after-desktop](https://github.com/user-attachments/assets/fcfc3fa1-5b0b-4169-b59e-dbc7ef597557)\n\n![before-narrow](https://github.com/user-attachments/assets/16f175e1-3bc6-4f86-a951-974e7759e90a)\n\n![after-narrow](https://github.com/user-attachments/assets/704210be-c920-48fb-9c26-4c5cc5f9bc84)\n\n![after-desktop-filtered](https://github.com/user-attachments/assets/eb50d6ca-de55-437c-99d8-3d7b70be504f)","lavaman131","documentNavigation","repo","githubnext/chopin","repoId","ownerId","org:89615882","site","nexthub","private","admin","settings","triage","starred","stars","watchers","watching","pinned","notify","views",[1885,1886,1887,1888,1889,1890,1891,1892,1893,1894,1895,1896,1897],"navigation",{"_1767":1768,"_1847":1848,"_1849":1850,"_1851":1852,"_1853":1854,"_1855":1856,"_83":1857},"sources",[],"meta",{"_1712":1842,"_1843":1844,"_1845":99,"_1757":22,"_1718":1837,"_1846":22,"_1762":108,"_1763":108},"branches",[1785,1786,1787,1788,1789,1790,1791,1792,1793,1794,1795,1796,1797,1798,1799,1800,1801,1802,1803,1804,1805,1806,1807,1808,30,1809,1810,1811,1812,1813,1814,1815,1816,1817,1818,1819,1820,1821,1822,1823,1824,1825,1826,1827,1828,1829,1830,1831,1832,1833,1834,1835,1836,1837,1838,1839,1840,1841],"tags",[1781,1782,1783,1784],"cloneUrl","https://git.nexthub.sh/githubnext/chopin.git","color-controls-slice-1","color-controls-slice-2","color-controls-slice-3","color-controls-slice-4","Krzysztof-Cieslak-patch-1","Krzysztof-Cieslak-patch-2","Maggie/app-preview-toolkit","Maggie/ci-playwright-install-timeout","Maggie/collaborative-visual-decision","Maggie/design-audit","Maggie/generic-visual-decision-runtime","Maggie/impeccable-chopin-metadata","Maggie/jev-chat-product","Maggie/jev-composed-assessment","Maggie/native-document-layouts","Maggie/openui-composition-product","Maggie/openui-composition-trial","Maggie/planner-visual-authoring","Maggie/planner-visual-requests","Maggie/visual-selection-eval","artifacts/pr-419-live-preview-20261009","automation/pr-maintenance-state","automation/use-effect/callout-disabled-picker-8cf9e49ba5c09471","automation/use-effect/collaboration-options-ref-4e3a5a08a879a5ae","automation/use-effect/room-workspace-effective-access-a57d40866c71bed0","chore/bun-1.4.2","color-controls","color-controls-plan","design-pr-assets","design/archived-decisions-badge","design/channel-route-remount","design/chat-decision-entry","design/conversation-analysis-markers","design/decision-evidence","design/settled-line-icon","dev/integration","diagram-step-controls","feat/liveapp-frontend-pilot","feat/local-experiments","feat/local-launcher-tracer","fix/autolink-mdx-crash","github-pills/2-pills","github-pills/3-hover-card","maggie/app-preview-toolkit","maggie/ci-playwright-install-timeout","maggie/collaborative-visual-decision","maggie/design-audit","maggie/generic-visual-decision-runtime","maggie/impeccable-chopin-metadata","maggie/jev-composed-assessment","maggie/native-document-layouts","maggie/openui-composition-product","maggie/openui-composition-trial","maggie/planner-visual-authoring","maggie/planner-visual-requests","maggie/visual-selection-eval","main","plain-text-fence-chrome","tokens/09-copy","wireframes/2-renderer","wireframes/3-planner","Let's compose rich plans together","owner","githubnext","section","empty","pins",[1869,1870,1871],"documents",{"_1865":1866,"_1867":64},"code",{"_23":1862,"_1863":1864},"automations",{"_1860":56,"_1861":-5},"delivery",{"_1858":108,"_1859":-5},"04zvKQ8QOrDUF8TO1Ovz0Zy8_TT","releases","applications","workflows","deployments",1000,"changes",13,"counts",{"_1868":64},"total","issue",{"_1705":1863,"_1873":1883,"_49":1863,"_1875":1884,"_1765":1735,"_1877":22,"_1878":1735,"_1879":1864},{"_1705":1880,"_1873":1881,"_49":1880,"_1875":1882,"_1765":1735,"_1877":22,"_1878":1735,"_1879":108},{"_1705":1872,"_1873":1874,"_49":1872,"_1875":1876,"_1765":1735,"_1877":22,"_1878":1735,"_1879":64},"issues","name","Issues","filters",{},"saved","pinnable","count","tasks","Tasks",{},"Changes",{},{"_1705":1863,"_1873":1883,"_49":1863,"_1875":1928,"_1765":1735,"_1877":22,"_1878":1735},{"_1705":1880,"_1873":1881,"_49":1880,"_1875":1927,"_1765":1735,"_1877":22,"_1878":1735},{"_1705":1872,"_1873":1874,"_49":1872,"_1875":1926,"_1765":1735,"_1877":22,"_1878":1735},{"_1705":1923,"_1873":1924,"_49":1923,"_1875":1925,"_1765":22,"_1877":22,"_1878":1735},{"_1705":1920,"_1873":1921,"_49":1920,"_1875":1922,"_1765":22,"_1877":22,"_1878":1735},{"_1705":1860,"_1873":1918,"_49":1853,"_1875":1919,"_1765":22,"_1877":22,"_1878":1735},{"_1705":1861,"_1873":1915,"_49":1916,"_1875":1917,"_1765":22,"_1877":22,"_1878":1735},{"_1705":1858,"_1873":1913,"_49":1858,"_1875":1914,"_1765":22,"_1877":22,"_1878":1735},{"_1705":1909,"_1873":1910,"_49":1911,"_1875":1912,"_1765":22,"_1877":22,"_1878":1735},{"_1705":1849,"_1873":1907,"_49":1849,"_1875":1908,"_1765":22,"_1877":22,"_1878":22},{"_1705":1904,"_1873":1905,"_49":1904,"_1875":1906,"_1765":22,"_1877":22,"_1878":22},{"_1705":1901,"_1873":1902,"_49":1901,"_1875":1903,"_1765":22,"_1877":22,"_1878":22},{"_1705":1898,"_1873":1899,"_49":1898,"_1875":1900,"_1765":22,"_1877":22,"_1878":22},"decisions","Decisions",{},"changelog","Changelog",{},"roadmap","Roadmap",{},"Documents",{},"activity","Activity","insights",{},"Releases",{},"Deployments","automations/deployments",{},"Workflows",{},"discussions","Discussions",{},"goals","Goals",{},{},{},{},"groups",[],"now",1794436385422,"sidebar","expanded"]