@micha.bigler/ui-core-micha 2.24.0 → 2.25.1

package/tests/NotificationSettings.test.jsx

@@ -1,7 +1,7 @@
 // @vitest-environment jsdom
 import React from 'react';
-import { beforeEach, describe, expect, it, vi } from 'vitest';
-import { fireEvent, render, screen, waitFor } from '@testing-library/react';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import { cleanup, fireEvent, render, screen, waitFor } from '@testing-library/react';
 
 const notificationsApi = vi.hoisted(() => ({
   getNotificationPreferences: vi.fn(),
@@ -13,7 +13,12 @@ const notificationsApi = vi.hoisted(() => ({
 }));
 
 vi.mock('../src/notifications/api', () => notificationsApi);
-vi.mock('react-i18next', () => ({ useTranslation: () => ({ t: (key) => key }) }));
+// A stable `t` reference, matching real react-i18next (which memoizes it) -- an unstable
+// mock `t` would re-trigger the component's `useEffect(..., [t])` on every render and
+// re-fetch preferences, clobbering any state update made in between (e.g. a toggle's
+// optimistic-from-response update racing against a stale refetch).
+const stableT = (key) => key;
+vi.mock('react-i18next', () => ({ useTranslation: () => ({ t: stableT }) }));
 
 import { NotificationSettings } from '../src/notifications/NotificationSettings';
 
@@ -32,6 +37,11 @@ function installPushEnvironment(subscription) {
   return registration;
 }
 
+afterEach(() => {
+  cleanup();
+  vi.unstubAllGlobals();
+});
+
 describe('NotificationSettings push toggle', () => {
   beforeEach(() => {
     vi.clearAllMocks();
@@ -80,3 +90,82 @@ describe('NotificationSettings push toggle', () => {
     expect(notificationsApi.patchNotificationPreferences).not.toHaveBeenCalled();
   });
 });
+
+describe('NotificationSettings push preview toggle', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+    notificationsApi.getVapidPublicKey.mockResolvedValue('AQID');
+  });
+
+  it('renders checked when the preference is explicitly on', async () => {
+    notificationsApi.getNotificationPreferences.mockResolvedValue({
+      email_opt_in: false, push_opt_in: true, push_preview_opt_in: true,
+    });
+
+    render(<NotificationSettings />);
+
+    const toggle = await screen.findByRole('switch', { name: /PUSH_PREVIEW_LABEL/ });
+    expect(toggle.checked).toBe(true);
+  });
+
+  it('renders checked when the preference is absent entirely (default-on, not Boolean(undefined))', async () => {
+    // Regression test for NOTIF-14: a naive `Boolean(preferences?.push_preview_opt_in)`
+    // reads a missing field as false, misrepresenting the backend's true default. Must
+    // fail against that implementation.
+    notificationsApi.getNotificationPreferences.mockResolvedValue({ email_opt_in: false, push_opt_in: true });
+
+    render(<NotificationSettings />);
+
+    const toggle = await screen.findByRole('switch', { name: /PUSH_PREVIEW_LABEL/ });
+    expect(toggle.checked).toBe(true);
+  });
+
+  it('renders unchecked when the preference is explicitly off', async () => {
+    notificationsApi.getNotificationPreferences.mockResolvedValue({
+      email_opt_in: false, push_opt_in: true, push_preview_opt_in: false,
+    });
+
+    render(<NotificationSettings />);
+
+    const toggle = await screen.findByRole('switch', { name: /PUSH_PREVIEW_LABEL/ });
+    expect(toggle.checked).toBe(false);
+  });
+
+  it('toggling calls patchNotificationPreferences with push_preview_opt_in and re-renders from the response', async () => {
+    notificationsApi.getNotificationPreferences.mockResolvedValue({
+      email_opt_in: false, push_opt_in: true, push_preview_opt_in: true,
+    });
+    notificationsApi.patchNotificationPreferences.mockResolvedValue({
+      email_opt_in: false, push_opt_in: true, push_preview_opt_in: false,
+    });
+
+    render(<NotificationSettings />);
+    const toggle = await screen.findByRole('switch', { name: /PUSH_PREVIEW_LABEL/ });
+    fireEvent.click(toggle);
+
+    await waitFor(() => expect(notificationsApi.patchNotificationPreferences).toHaveBeenCalledWith({ push_preview_opt_in: false }));
+    await waitFor(() => expect(toggle.checked).toBe(false));
+  });
+
+  it('is disabled when push notifications are not opted in for this account', async () => {
+    notificationsApi.getNotificationPreferences.mockResolvedValue({
+      email_opt_in: false, push_opt_in: false, push_preview_opt_in: true,
+    });
+
+    render(<NotificationSettings />);
+
+    const toggle = await screen.findByRole('switch', { name: /PUSH_PREVIEW_LABEL/ });
+    expect(toggle.disabled).toBe(true);
+  });
+
+  it('is enabled when push notifications are opted in for this account', async () => {
+    notificationsApi.getNotificationPreferences.mockResolvedValue({
+      email_opt_in: false, push_opt_in: true, push_preview_opt_in: true,
+    });
+
+    render(<NotificationSettings />);
+
+    const toggle = await screen.findByRole('switch', { name: /PUSH_PREVIEW_LABEL/ });
+    expect(toggle.disabled).toBe(false);
+  });
+});

package/tests/messagingComposerChunk5.test.jsx

@@ -90,10 +90,13 @@ describe('Composer chunk 5 behavior', () => {
   });
 
   it('inserts the selected emoji at the current cursor position', async () => {
+    // MSG-6i: the Composer's own picker is now a wider curated grid
+    // (IconButton per emoji), decoupled from ReactionBar's 5-entry
+    // QUICK_EMOJIS -- role is "button", not "menuitem".
     renderComposer(); fireEvent.change(messageInput(), { target: { value: 'abCD' } });
     messageInput().setSelectionRange(2, 2);
     fireEvent.click(screen.getByRole('button', { name: 'MessagingComposer.ADD_EMOJI' }));
-    fireEvent.click(await screen.findByRole('menuitem', { name: '👍' }));
+    fireEvent.click(await screen.findByRole('button', { name: '👍' }));
     await waitFor(() => expect(messageInput().value).toBe('ab👍CD'));
   });
 

package/tests/messagingMsg6i.test.jsx

@@ -0,0 +1,129 @@
+// @vitest-environment jsdom
+import React from 'react';
+import { afterEach, describe, expect, it, vi } from 'vitest';
+import { cleanup, fireEvent, render, screen, waitFor, within } from '@testing-library/react';
+
+vi.mock('react-i18next', () => ({ useTranslation: () => ({ t: (key, options) => options && Object.keys(options).length ? `${key}:${JSON.stringify(options)}` : key }) }));
+vi.mock('../src/notifications/realtime', () => ({ useRealtime: () => ({ subscribe: () => () => {}, onReconnect: () => () => {} }) }));
+
+import { AttachmentList } from '../src/messaging/AttachmentList';
+import { AuthContext } from '../src/auth/AuthContext';
+import { Composer } from '../src/messaging/Composer';
+import { MessagingProvider } from '../src/messaging/MessagingProvider';
+import { PollCard } from '../src/messaging/PollCard';
+import { QUICK_EMOJIS } from '../src/messaging/ReactionBar';
+import { Thread } from '../src/messaging/Thread';
+
+function makeApi(overrides = {}) {
+  return {
+    listConversations: vi.fn().mockResolvedValue({ results: [] }), listMessages: vi.fn().mockResolvedValue({ results: [] }),
+    getUnreadCount: vi.fn().mockResolvedValue({ unread_count: 0, by_conversation: {} }),
+    getAttachment: vi.fn().mockResolvedValue(new Blob(['bytes'], { type: 'image/jpeg' })),
+    getAttachmentThumbnail: vi.fn().mockResolvedValue(new Blob(['thumb'], { type: 'image/jpeg' })),
+    createMessage: vi.fn(), uploadAttachments: vi.fn(),
+    ...overrides,
+  };
+}
+
+afterEach(cleanup);
+
+describe('MSG-6i: attachment tile size, poll spacing/denominator, Composer emoji picker', () => {
+  it('1. an attachment tile renders at 120x120 (image and non-image)', async () => {
+    const image = { id: 'a1', filename: 'photo.jpg', content_type: 'image/jpeg' };
+    const file = { id: 'a2', filename: 'doc.pdf', content_type: 'application/pdf' };
+    render(<MessagingProvider api={makeApi()} active={false}><AttachmentList attachments={[image, file]} /></MessagingProvider>);
+    const tiles = await screen.findAllByRole('button');
+    const gallery = tiles.filter((tile) => tile.getAttribute('title') === 'photo.jpg' || tile.getAttribute('title') === 'doc.pdf');
+    expect(gallery).toHaveLength(2);
+    gallery.forEach((tile) => {
+      // MUI applies `sx={{ width, height }}` via a generated CSS class, not
+      // an inline style attribute -- read the resolved value instead.
+      expect(getComputedStyle(tile).width).toBe('120px');
+      expect(getComputedStyle(tile).height).toBe('120px');
+    });
+  });
+
+  it('2. poll percentage denominator is the count of distinct respondents, not sum(vote_count) -- must fail against the old sum(vote_count) code for a multi-select poll where one voter picked two options', () => {
+    // One respondent (voter-1) voted for both options. sum(vote_count) = 2,
+    // respondent count = 1. Old code: 1/2 = 50% each. New code: 1/1 = 100% each.
+    const poll = {
+      id: 'poll-1', question: 'Q', allow_multiple: true, closed_at: null,
+      options: [
+        { id: 'opt-a', text: 'A', order: 0, vote_count: 1, voters: ['voter-1'] },
+        { id: 'opt-b', text: 'B', order: 1, vote_count: 1, voters: ['voter-1'] },
+      ],
+    };
+    render(<MessagingProvider api={makeApi()} active={false}><PollCard message={{ id: 'msg-1', poll }} /></MessagingProvider>);
+    const results = screen.getAllByText(/MessagingPoll\.OPTION_RESULT/);
+    expect(results).toHaveLength(2);
+    results.forEach((node) => {
+      expect(node.textContent).toMatch(/"count":1/);
+      expect(node.textContent).toMatch(/"percent":100/);
+    });
+  });
+
+  it('3. poll percentage denominator: zero respondents still renders 0%, never NaN (no regression)', () => {
+    const poll = {
+      id: 'poll-2', question: 'Q', allow_multiple: false, closed_at: null,
+      options: [
+        { id: 'opt-a', text: 'A', order: 0, vote_count: 0, voters: [] },
+        { id: 'opt-b', text: 'B', order: 1, vote_count: 0, voters: [] },
+      ],
+    };
+    render(<MessagingProvider api={makeApi()} active={false}><PollCard message={{ id: 'msg-2', poll }} /></MessagingProvider>);
+    const results = screen.getAllByText(/MessagingPoll\.OPTION_RESULT/);
+    results.forEach((node) => {
+      expect(node.textContent).toMatch(/"count":0/);
+      expect(node.textContent).toMatch(/"percent":0/);
+      expect(node.textContent).not.toMatch(/NaN/);
+    });
+  });
+
+  it('4. the Composer emoji picker shows more than 5 options (the wider curated grid, not ReactionBar\'s QUICK_EMOJIS)', async () => {
+    const api = makeApi();
+    render(<MessagingProvider api={api} active={false}><Composer conversationId={4} /></MessagingProvider>);
+    fireEvent.click(screen.getByRole('button', { name: 'MessagingComposer.ADD_EMOJI' }));
+    const grid = await screen.findByRole('group', { name: 'MessagingComposer.EMOJI_PICKER' });
+    const emojiButtons = grid.querySelectorAll('button');
+    expect(emojiButtons.length).toBeGreaterThan(5);
+  });
+
+  it('4b. selecting an emoji from the Composer grid inserts it at the cursor position, not appended', async () => {
+    const api = makeApi();
+    render(<MessagingProvider api={api} active={false}><Composer conversationId={4} /></MessagingProvider>);
+    const input = screen.getByLabelText('MessagingComposer.MESSAGE');
+    fireEvent.change(input, { target: { value: 'abCD' } });
+    input.setSelectionRange(2, 2);
+    fireEvent.click(screen.getByRole('button', { name: 'MessagingComposer.ADD_EMOJI' }));
+    const grid = await screen.findByRole('group', { name: 'MessagingComposer.EMOJI_PICKER' });
+    fireEvent.click(within(grid).getByRole('button', { name: '😀' }));
+    await waitFor(() => expect(input.value).toBe('ab😀CD'));
+  });
+
+  it('5. ReactionBar\'s own QUICK_EMOJIS stays exactly 5, unaffected by the wider Composer picker', () => {
+    expect(QUICK_EMOJIS).toHaveLength(5);
+  });
+
+  it('6. Thread\'s root Stack and scroll Box carry flex:1/minHeight:0 (MSG-18 companion fix), so it can shrink inside a host\'s flex-column layout', async () => {
+    const api = makeApi({
+      listConversations: vi.fn().mockResolvedValue({ results: [{ id: 1, kind: 'group' }] }),
+      listMessages: vi.fn().mockResolvedValue({ results: [{ id: 2, conversation_id: 1, body: 'hi' }], next_cursor: null }),
+      listThread: vi.fn().mockResolvedValue({ results: [] }),
+      getReadStatus: vi.fn().mockResolvedValue({ all_read: true }),
+    });
+    render(
+      <AuthContext.Provider value={{ user: { id: 9 } }}>
+        <MessagingProvider api={api}><Thread conversationId={1} /></MessagingProvider>
+      </AuthContext.Provider>,
+    );
+    const timeline = await screen.findByLabelText('MessagingThread.TIMELINE');
+    // The scroll Box is a direct child of Thread's root Stack.
+    const rootStack = timeline.parentElement;
+    [timeline, rootStack].forEach((el) => {
+      expect(getComputedStyle(el).flexGrow).toBe('1');
+      expect(getComputedStyle(el).minHeight).toBe('0px');
+    });
+    // maxHeight stays as the fallback cap for a host that doesn't flex-wrap Thread.
+    expect(getComputedStyle(timeline).maxHeight).toBe('560px');
+  });
+});

package/work-orders/MSG-6i.md

@@ -0,0 +1,271 @@
+# WORK ORDER MSG-6i (ui-core-micha) — attachment tile size, poll spacing/denominator, wider emoji picker
+
+**EXECUTION DIRECTIVE.** If you are the implementer reading this as your own spec, this section is not
+addressed to you — it tells the Orchestrator how to invoke you; you ARE that invocation, do not shell
+out to `codex exec`. Orchestrator: implement through `codex exec` in the background, invoked **directly
+via Bash** (never the `debugger`/`*_coder` Agent wrappers) with **both** flags `--skip-git-repo-check`
+and `--dangerously-bypass-approvals-and-sandbox`, prompt passed as a positional argument from this
+file. Fall back to direct Claude implementation only on Codex quota / rate-limit / non-zero exit.
+
+Feature-level WO (Expertenchat envelope). Operator polish requests 2026-08-03, gathered in a
+requirements round after MSG-6h shipped; four independent, small scopes bundled the same way
+MSG-6f bundled A/B/C.
+
+## TIER
+Tier 2 — shared-core UI consumed by every host app. Independent `reviewer` + `ui_reviewer` mandatory
+(scope C changes poll math, not just styling).
+
+## SCOPE
+
+**A. Attachment tile: 64px → 120px.**
+
+`AttachmentList.jsx`'s tile `sx={{ width: 64, height: 64, ... }}` (both the `ButtonBase` and its
+internal thumbnail `Box component="img"`, which is `width: '100%', height: '100%'` and inherits).
+Change both dimensions to `120`. Check the non-image tile's icon/caption layout still reads well at
+the larger size (currently sized for 64px — `InsertDriveFileOutlinedIcon fontSize="small"` and a
+`caption` typography may look sparse/small inside a 120px box; consider `fontSize="medium"` or larger
+if it looks disproportionate — operator did not specify, use judgement, flag if genuinely unsure).
+`Stack direction="row" flexWrap="wrap"` spacing stays as-is unless the larger tiles visibly break
+wrapping at typical bubble widths.
+
+**B. Poll card: more breathing room, not a wider bubble.**
+
+Operator, verbatim (after seeing a screenshot of the current cramped layout — checkbox, option text,
+and percentage squeezed onto one tight line, thin bars close to the text, minimal gap between options):
+*"Nicht generell breiter, aber luftiger."* (Not generally wider, but airier.) This is **not** scope A
+of a width change — the poll's outer bubble width stays exactly as-is (still shares
+`MessageBubble.jsx`'s `maxWidth: min(75%, 680px)` with every other message type). Increase internal
+spacing in `PollCard.jsx`: the `Stack spacing={0.75}` wrapping the whole card, the per-option
+`Stack direction="row" spacing={0.5}` (control + label), and the `LinearProgress`'s `height: 6` are
+the likely levers — raise spacing values and/or bar height/thickness so the card reads as roomier.
+No prescribed exact values; operator did not send further numeric guidance beyond the "airier, not
+wider" direction — use reasonable judgement (e.g. spacing bumped by ~50%, bar height 8-10px) and
+**flag this specific change for a live screenshot check before considering it closed** — same
+disclosed-limitation pattern as MSG-6h's reaction-spacing fix (no staging credentials this round).
+
+**C. Poll percentage denominator: respondents of this poll, not sum of votes cast.**
+
+**This reverses an explicit non-goal from `MSG-6g`'s own envelope**, confirmed deliberately by the
+operator in this round (not an oversight): MSG-6g stated *"Denominator: total votes cast, not
+participant count. A poll's turnout relative to group size is a different question and is not in
+scope."* — operator's correction: for a **multi-select** poll, summing `vote_count` across options can
+exceed the number of people who actually answered (one person can vote for several options), so a
+per-option percentage computed against that inflated sum reads as misleadingly low and the bars
+don't sum to a sensible 100%. The new denominator: **the number of distinct people who cast at least
+one vote in this poll** — not total conversation participants (an un-started, never-voting group
+member should not silently deflate everyone else's percentages further).
+
+Compute this **client-side, no backend change**: `serialize_poll`'s existing `option.voters` arrays
+(already present, already used for the viewer's-own-vote marking) already carry every voter's id per
+option — the union of all options' `voters` arrays, deduplicated, is exactly "everyone who answered
+this poll." Replace `PollCard.jsx`'s current
+`totalVotes = options.reduce((sum, option) => sum + (option.vote_count ?? option.voters?.length ?? 0), 0)`
+with a respondent count derived from the union of `option.voters` across all options (a `Set` of voter
+ids). **Zero-vote rendering must stay `NaN`-free** (existing guard, do not regress it) — zero
+respondents still means 0% for every option, not a division error.
+
+**D. Composer emoji picker: its own, wider curated list, decoupled from reaction quick-picks.**
+
+`Composer.jsx:144` currently reuses `QUICK_EMOJIS` from `ReactionBar.jsx` (`['👍', '❤️', '😂', '🎉',
+'👀']`, 5 entries) — the same tiny set meant for quick message reactions, not for composing free-form
+text. Operator confirmed direction after discussion: mobile users already have a full native emoji
+keyboard (no in-app work needed there); desktop users lack an obvious equivalent, so a **wider curated
+grid (~20-30 common emojis)** in the Composer's own picker adds real value. **Not** a full
+search-based picker (out of scope — meaningfully more engineering for a need mobile already covers).
+
+Define a new, separate constant (e.g. `COMPOSER_EMOJIS` in `Composer.jsx` itself, or a shared
+`emojiSets.js` if that reads cleaner) with ~20-30 common emojis, grouped loosely by theme (smileys,
+gestures, hearts, objects/travel — operator did not specify an exact list; use a reasonable, common
+default and flag it as easily adjustable). Render as a grid inside the existing `Menu` (currently a
+plain vertical `MenuItem` list — at 25-30 entries that would be a very long scroll; switch to a
+wrapping grid layout, e.g. a `Box` with `display: grid` or `flexWrap`, inside the `Menu`). Keep
+`ReactionBar.jsx`'s own `QUICK_EMOJIS` untouched (5, curated, unchanged) — reactions stay small and
+fast, this is a Composer-only change.
+
+## NON-GOALS / DO NOT TOUCH
+- Do not touch `ReactionBar.jsx`'s own reaction UI or its 5-emoji `QUICK_EMOJIS` — scope D adds a
+  second, separate, larger set for the Composer only.
+- Do not widen the message bubble's `maxWidth` (`MessageBubble.jsx`) — scope B is internal spacing
+  only, confirmed explicitly by the operator.
+- Do not touch `MessageBubble.jsx`'s reaction-overlap fix from MSG-6h, or the lightbox/context-menu
+  logic from MSG-6h — this WO only resizes the tile (scope A), doesn't change its interaction model.
+- No backend change for scope C — the data needed already exists in the current API response.
+- Do not build a full emoji search/picker component (scope D) — a curated grid only.
+
+## RISKS
+- Scope C is a **behaviour change visible to every host app** the moment this version is consumed —
+  a poll's displayed percentages will differ from before for any multi-select poll where the same
+  person voted for multiple options. State this plainly; it is the operator's own explicit correction,
+  not a silent reinterpretation.
+- Scope A's larger tile changes vertical rhythm inside a message bubble containing attachments —
+  check it doesn't visually crowd the meta row (timestamp/read-ticks) directly below it.
+- Scope B and D have no prescribed exact values — implement a reasonable default, disclose the
+  specific choices made (spacing multipliers, the exact emoji list) in the completion note so the
+  operator can request a numeric tweak without re-deriving what was chosen.
+
+## REQUIRED TESTS TO WRITE
+Narrow and behavioural. Do NOT run the full suite.
+
+1. Attachment tile renders at 120×120 (image and non-image cases).
+2. Poll respondent-count denominator: a multi-select poll where one voter voted for two options must
+   show percentages based on the **respondent count** (e.g. 1 respondent → both their chosen options
+   show 100%, not summed-and-diluted), not `sum(vote_count)`. This must **fail against the current
+   `sum(vote_count)` code** — prove it with a case where the two differ (multi-select, one voter,
+   two options voted).
+3. Poll respondent-count denominator: the existing single-choice zero-vote case still shows 0%, no
+   `NaN`, no regression (reuse/extend the existing MSG-6g zero-vote test's assertion shape).
+4. Composer emoji picker: opening it shows more than 5 emoji options (the expanded set, not
+   `ReactionBar`'s `QUICK_EMOJIS`); selecting one still inserts it at the cursor position (existing
+   `insertEmoji` behaviour, unchanged — just fed from the new list).
+5. `ReactionBar`'s own picker is unaffected — still exactly its original 5 `QUICK_EMOJIS` (regression
+   guard that scope D didn't leak into scope-unrelated reaction UI).
+
+## TEST SCOPE FOR THE GATE (orchestrator)
+Attachment-, poll-, and Composer-adjacent messaging test files. Not the full suite.
+
+## TARGET REPO
+`C:\Users\biglmi\Documents\webapps\ui-core-micha`. Branch `main`. Publish per the repo's release flow;
+the jg-ferien pin bump is part of THIS WO's completion, not a deferred step (standing correction this
+session: publish alone is not delivery).
+
+## MINI-HANDOVER (pastable)
+
+> Repo: `C:\Users\biglmi\Documents\webapps\ui-core-micha` (branch `main`). Work order:
+> `work-orders/MSG-6i.md` — read it fully, then follow the `orchestrate-codex` skill.
+>
+> Four independent scopes: (A) attachment tile 64px→120px in `AttachmentList.jsx`. (B) `PollCard.jsx`
+> internal spacing increased ("airier, not wider" — bubble maxWidth unchanged) — no exact numbers
+> given, use judgement, flag for a live screenshot check. (C) poll percentage denominator changes from
+> `sum(vote_count)` to the count of distinct respondents (union of all options' `voters` arrays,
+> client-side, no backend change) — **this deliberately reverses an explicit MSG-6g non-goal**, operator
+> re-confirmed. (D) Composer's emoji picker gets its own ~20-30-entry curated grid, decoupled from
+> `ReactionBar`'s 5-entry `QUICK_EMOJIS` (untouched) — no full search picker, mobile already has a
+> native one.
+
+## PROGRESS CONTRACT
+Emit `PLAN: <steps>` up front, then a single-line `PROGRESS: [<n>/<total>] <action>` before every
+relevant action and `PROGRESS: [<n>/<total>] done` on completion, spaced so no gap exceeds ~2 min,
+stdout unbuffered, and exactly one final `RESULT: DONE|BLOCKED <reason>`.
+
+---
+
+## Part B — Implementation map (Orchestrator) / as-built record
+
+**Codex was unavailable (out of credits) — implemented directly by the Orchestrator.**
+
+### Scope A — `AttachmentList.jsx`
+Tile `sx={{ width: 64, height: 64, ... }}` → `120, 120`. Non-image tile's icon bumped
+`fontSize="small"` → `"large"` and its `Stack` spacing `0.25` → `0.75` — the original
+small icon+caption pairing read sparse against the much larger tile.
+
+### Scope B — `PollCard.jsx` spacing
+Outer `Paper` padding `p: 1` → `1.5`; outer `Stack` (question/options/close-row) spacing
+`0.75` → `1.5`; per-option `richLabel` `Stack` spacing `0.25` → `0.75`; `LinearProgress`
+`height: 6` → `8`. No exact values were specified by the operator beyond "airier, not
+wider" (confirmed via a screenshot of the cramped original) — **not independently
+visually re-verified against a fresh screenshot before closing** (no staging/live
+credentials for this specific check this round); flagging per the same disclosed-
+limitation pattern as MSG-6h's reaction-spacing fix.
+
+### Scope C — `PollCard.jsx` percentage denominator
+`totalVotes = sum(option.vote_count)` replaced with
+`respondentCount = new Set(options.flatMap(option => option.voters || [])).size` — the
+count of distinct people who voted for *any* option, computed client-side from data
+already present in the response (`voters` arrays, already used for the viewer's-own-vote
+marking). `percent` now divides by `respondentCount`.
+
+### Scope D — `Composer.jsx` emoji picker
+New `COMPOSER_EMOJIS` (28 entries) defined locally in `Composer.jsx`, rendered as a
+7-column CSS grid of `IconButton`s inside the existing `Menu` (replacing the old
+`QUICK_EMOJIS.map(... <MenuItem>...)` vertical list — `MenuItem` import removed, now
+unused). `ReactionBar.jsx`'s own `QUICK_EMOJIS` (5, curated) untouched.
+
+### Companion fix found and fixed — `Thread.jsx` (not in this WO's original scope)
+Discovered while live-verifying jg-ferien's `MSG-18` (mobile Composer hidden behind the
+fixed bottom nav) in the *same* browser session as this WO's own work: after fixing every
+jg-side layout offset, the Composer was **still** rendering behind the nav. Root cause
+traced into this package: `Thread.jsx`'s root `<Stack>` had no `flex`/`minHeight`, and its
+scroll `Box` used a **hardcoded `maxHeight: 560`** — neither participates in a host's
+flex-column layout at all, so on a short mobile viewport the thread never shrinks to fit,
+regardless of how correctly the *host* sizes its own containers. Fixed: both the root
+`Stack` and the scroll `Box` gained `flex: 1, minHeight: 0` (the classic flex-item
+`min-height: auto` trap — a flex item won't shrink below its content's natural size
+without this). `maxHeight: 560` kept as an upper-bound fallback, so a host that does
+**not** embed `Thread` in a flex-column context sees **zero behaviour change** (both new
+properties are no-ops outside a flex context). Live-verified end-to-end (see MSG-18's own
+as-built record in jg-ferien for the full trace): the composer moved from `top: 742`
+(inside the fixed nav's own `740–812` range) to `top: 629.5` (a clean 64px gap above the
+nav at `740`), by locally building this package's `dist/` and patching it into jg's
+`node_modules` for verification — no publish needed to prove the fix, but IS needed to
+actually ship it (bundled into this same release, not deferred).
+
+### Tests
+`tests/messagingMsg6i.test.jsx` (new) — 7 tests: all 5 WO-required cases, one extra
+(emoji-insertion behaviour still works from the new grid), plus a 6th added post-review
+(see R3 below) asserting `Thread.jsx`'s `flex`/`minHeight` are actually applied.
+
+### Verification (pre-review)
+Full suite 249 → 255 (6 new), `tsc` clean.
+
+### Independent review — `reviewer` + `ui_reviewer`, both run in parallel, findings + fixes
+
+Both reviewers independently converged on the same P2 keyboard-navigation regression
+(scope D) — treated as one finding below (R1/U1).
+
+- **R1/U1 (P2, confirmed by both reviewers) — Composer's emoji grid broke MUI `Menu`'s
+  arrow-key roving-focus.** Nesting the 28 `IconButton`s inside an intervening
+  `<Box role="group">` meant `MenuList`'s `moveFocus` (which only traverses **direct**
+  children) saw a single non-tabbable child, so ArrowDown/Up/Home/End all became dead —
+  none of the 28 buttons reachable via the menu's own keyboard model, and nesting
+  `role="button"` descendants under `role="menu"` isn't a conformant ARIA pattern either.
+  **Fixed**: swapped `<Menu>` for `<Popover>` (`Composer.jsx`) — a grid of plain buttons
+  was never actually a linear menu, so this stops advertising semantics it can't deliver
+  and leaves keyboard traversal to the browser's native Tab order, which does reach every
+  button. Replicated Menu's default `anchorOrigin`/`transformOrigin`
+  (`{vertical:'bottom',horizontal:'left'}` / `{vertical:'top',horizontal:'left'}`) so the
+  picker's on-screen position is unchanged.
+- **R2 (P2, `reviewer`) — optimistic vote could desync `vote_count` from `voters`.**
+  `MessagingProvider.applyOptimisticVote` bumped `vote_count` unconditionally but only
+  updated `voters` when `userId` was known (a documented "brief window" before
+  `AuthContext` populates `user` — in practice also the default state for any host/test
+  that doesn't wrap `MessagingProvider` in `AuthContext` at all, confirmed while fixing
+  this). Scope C's new `respondentCount` denominator reads only from `voters`, so that
+  window could show a transiently inconsistent/>-100% percentage. **Fixed**: added a
+  sentinel (`OPTIMISTIC_ANONYMOUS_VOTER`, a space-prefixed string no real UUID can match)
+  used in place of `userId` in `voters` when it's unknown, so `vote_count` and `voters`
+  move together in every case — the real vote still overwrites this on
+  reconcile/revert. Re-ran every existing poll-vote test
+  (`messagingMsg6g/Interactions/PollRendering/CompactBubble/Api`) to confirm the
+  already-tested optimistic-count behaviour (which relies on the no-`AuthContext` test
+  shape) still holds — it does.
+- **R3 (P2, `reviewer`) — `Thread.jsx`'s flex/minHeight companion fix had zero regression
+  coverage**, and the "not meaningfully assertable via jsdom" justification didn't hold up
+  (this WO's own tile-size test already proves resolved `sx` values ARE readable via
+  `getComputedStyle` without real layout). **Fixed**: added test 6 to
+  `tests/messagingMsg6i.test.jsx`, asserting `flexGrow`/`minHeight` on both `Thread`'s
+  root `Stack` and scroll `Box`, plus that `maxHeight: 560` is still present as the
+  fallback cap.
+- **U2 (P3, `ui_reviewer`) — hardcoded `fontSize: '1.15rem'`** on the per-emoji
+  `IconButton`. No existing theme/typography token covers emoji-glyph sizing (checked
+  `ReactionBar.jsx`'s own emoji rendering for precedent — none exists there either).
+  **Not fixed** — P3, no clear correct token to switch to; noted here rather than
+  silently dropped.
+- **U3 (P3, `ui_reviewer`) — the emoji grid reused `MessagingComposer.ADD_EMOJI`** as its
+  `role="group"` `aria-label`, identical to the trigger button's own label, so a screen
+  reader announces "Add emoji" twice back-to-back. **Fixed**: added a dedicated
+  `MessagingComposer.EMOJI_PICKER` key ("Choose an emoji" / "Emoji auswählen" / "Choisir
+  un emoji") for the grid.
+- **R4 (P3, `reviewer`) — test 4b's assertion (`input.value.length > 2`) didn't prove
+  cursor-position insertion**, only that something got appended. **Fixed**: rewrote it to
+  match the exact expected string at a mid-string cursor position (same shape as the
+  pre-existing `messagingComposerChunk5.test.jsx` assertion).
+- **R5 (P3, `reviewer`) — residual, not fixed**: the 120px tile stretches whatever
+  `getAttachmentThumbnail` returns via `objectFit: cover`; if that thumbnail is
+  server-sized for the old 64px target, the larger tile could show blur. Not verifiable
+  from this repo (backend-controlled, untouched by this WO) — flagged as disclosed
+  residual risk, consistent with scope B's own "no live screenshot check this round" note.
+
+### Verification (post-review)
+Full suite (single-forked to avoid an unrelated vitest worker-pool timeout seen under the
+default parallel pool): **45 test files, 256/256 passed** (255 + 1 new). `tsc -p
+tsconfig.build.json --noEmit` clean.