@micha.bigler/ui-core-micha 2.22.0 → 2.23.0

package/WORK_ORDERS.md

@@ -38,4 +38,6 @@ prefixed ID; never reuse a bare flat number across workstreams.
 | MSG-6c | Three MSG-3f/MSG-6 follow-on bugs: scrollbar, DM announcement icon, direct-conversation names | Reported live on jg-ferien staging right after MSG-3f/MSG-6 shipped: (1) a horizontal scrollbar appeared under short bubbles; (2) the Composer showed a broadcast/announcement icon even in a 1:1 direct conversation; (3) direct conversations showed the generic "Unbenannte Unterhaltung" fallback instead of the counterpart's name. | 2026-08-02 | done | 50e966e | No WO file — three operator-reported bugs, fixed directly. **(1) Scrollbar**: `Thread.jsx`'s scroll `Box` had `overflowY: auto` only, leaving `overflowX` at its browser-promoted `auto` default — any few-px overflow anywhere produced a persistent horizontal scrollbar. Fixed with explicit `overflowX: hidden`, plus `MessageBubble.jsx`'s meta row got `flexWrap`/`minWidth: 0` so it can't force the shrink-to-content bubble wider than its `maxWidth` cap. `ui_reviewer` pass 1 found a real P1 regression risk in this fix: MSG-3f's overflow icon (`top: -12, right: -12`) could get clipped by the new `overflowX: hidden` for own/right-aligned bubbles in a short conversation with no vertical scrollbar (the exact scenario in the original bug screenshot) — fixed with extra right padding (moved onto the inner message `Stack`, not the outer scroll container, after `ui_reviewer` pass 2 flagged a P3 cosmetic side effect where the shared container's asymmetric padding skewed the centered "Load older" button; both re-verified live in the harness: no clipping with 8.8px margin, "Load older" back to 0px off-center). **(2) Announcement icon**: `Composer` now accepts a `conversation` prop; `canAnnounce = allowAnnouncement && conversation?.kind !== 'direct'` gates both the icon and the dialog — backward compatible (a host not passing `conversation` behaves exactly as before). **(3) Unnamed conversations**: `ConversationList.jsx`'s `titleOf` now tries a new optional `resolveDirectUserName(other_user_id)` host resolver before falling back to the generic label, consuming dcm's new `other_user_id` field (see django-core-micha `MSG-6b`) — bare id only, ucm still resolves no names itself. Independent `reviewer`: no findings (both passes). Scoped gate: 90/90 across 14 test files. Published as npm 2.21.1, verified live. jg-ferien pin bumped 2.21.0→2.21.1 and wired: `conversation` prop passed to `Composer`, `resolveDirectUserName` supplied from jg's existing DM-candidate data (best-effort — a counterpart no longer among current candidates, e.g. a lapsed shared event, falls back to the generic label; accepted gap, not chased). |
 | MSG-3f | Compact chat-bubble message layout | A one-word message currently renders as **six stacked rows** (~260px): `MessageBubble`'s vertical `Stack spacing={0.75}` gives every element its own full-width row — meta line, body, `ReactionBar`, the reply control (a full MUI `Button`, hence "Antworten" centred on its own line), the overflow `IconButton`, and `children` where the host's `ReadTicks` lands as a "Zugestellt an 0" text line. Rebuild as WhatsApp-style bubbles: own right-aligned and tinted, incoming left-aligned and neutral, shrink-to-content; **timestamp and status icons inline at the end of the final text line** (this is the line-count fix, everything else is cosmetic); status as tick icons instead of text, own messages only; reply/react/edit/delete/copy collapsed into one hover-or-long-press menu; reaction chips overlapping the bubble edge; reply quote as a tinted block inside the bubble. **Acceptance: a short message with no reactions/attachments/quote occupies at most TWO visual lines** (text plus, at most, a narrow right-aligned meta line inside the bubble) — down from six. | 2026-08-02 | done | 1cd777b | Envelope + map: [work-orders/MSG-3f.md](work-orders/MSG-3f.md). Independent `reviewer`: no findings. `ui_reviewer` pass 1 (static-only, no browser tooling that session): one P2 (U1) — the touch-tap reveal (`actionsVisible`) had no dismiss path, permanently pinning the overflow icon visible after any click that bubbled to the bubble (poll option, announcement link, reply quote), violating the "no visible affordance at rest" requirement; one P3 (U2, a consequence of U1). Fixed by the Orchestrator: a `bubbleRef` spanning the Paper + reaction-picker sibling, plus a document-level capture-phase `pointerdown` listener that dismisses `actionsVisible` on any outside interaction — live-verified in the running dev harness (reveal, dismiss-on-outside-click, and reaction-chip-click-does-not-dismiss all confirmed via DOM/computed-style inspection; screenshot tooling was unavailable this session, verification was structural/computed-style based). `ui_reviewer` pass 2 (re-review of the fix): confirmed the fix sound (event-phase ordering, per-instance isolation, cleanup all correct), but found one more gap (U3, P2) — no regression test pinned the dismiss behavior. Closed by adding two tests to `tests/messagingMessageActions.test.jsx`: outside-click dismiss + reaction-chip-does-not-dismiss, and cross-instance isolation (two bubbles, revealing one doesn't affect the other). Scoped gate: 42/42 passing across all 7 named test files. Acceptance criterion verified live: a short incoming direct-conversation message (no sender name, no reactions) renders at exactly 2 visual lines, 78px total height (down from ~260px). Published as npm 2.21.0, verified live on the registry. New `ui-core-micha-dev-harness` launch.json entry added (port 5140) for this and future ucm visual-verification WOs. | Approval Gate #1 granted by the operator 2026-08-02, who also supplied WhatsApp reference screenshots; the envelope records what those pin down beyond the prose (meta rides the LAST line of a multi-line body, not a line of its own; incoming messages carry no status icon at all; **no** action affordance visible at rest; meta visually recessed with read state carried by tick colour). **Tier 2** — shared-core, and an opinionated visual decision imposed on every future ucm messaging consumer. Acceptable now because jg-ferien is the only messaging consumer today (spesix deferred per the messaging-centralization course correction), so it lands with one adopter instead of being retrofitted — but jg vocabulary/layout assumptions must not leak in, same line MSG-3d drew for `external_key`. **Two non-negotiables:** every icon keeps the text it replaced as its accessible name (no i18n key deleted just because its text stopped rendering), and the action affordance must be keyboard-operable without hover or long-press — today's `opacity: 0` hover-only menu is unreachable on touch AND invisible to keyboard users, and reproducing that pre-existing defect is not acceptable. **Two deliberate cost-cuts by the operator (2026-08-02), both after being shown what they cost:** (1) the meta does **not** have to ride the last text line — inside the bubble and right-aligned is enough, a trailing meta line is fine; the inline pattern is listed as a risk to be *avoided*, not managed. (2) **No long-press and no swipe** — desktop uses hover plus keyboard focus (`opacity: 0` does not remove an element from the tab order, so a `:focus-within` rule closes the keyboard half cheaply), touch uses a plain tap on the bubble; React expands the existing `ReactionBar` emoji row rather than being nested inside the MUI `Menu`, which does not nest gracefully. **Trap found while scoping:** today the whole menu is gated on `canAct` (own message or moderator) because it only held Edit/Delete/Copy — once Reply lives there an **incoming** message needs a menu too, so there are two variants (any message: Reply/React/Copy; actionable message: plus Edit/Delete). Getting this wrong makes replying to anyone else impossible and will not surface in a fixture containing only own messages. Remaining risk: announcements/polls/attachments also render through this bubble and will look broken if only plain text is considered. **Read-status observation, deliberately NOT a precondition:** `ReadTicks` fetches per message and dcm's `serialize_message` carries no read state, so a thread fires one REST call per own message; tick icons make it more visible but not worse (`canShowReadTicks` already bounds it to own messages, deliberately). Putting the delivered/read aggregate on `serialize_message` — viewer-independent, exactly as `reply_count`/`last_reply_at` ride it since MSG-3d — would remove the fan-out and is a worthwhile dcm follow-up, but gating a UI fix behind a dcm release is the wrong trade. Deferred: swipe-to-reply, and the (also tall) Composer. Independent of MSG-3e — different files, but coordinate version bumps if both are in flight. |
 | MSG-6e | Messaging surface defects found by click-through: timestamps, poll cache key, read-state frames, double read-marking, plurals | Six independent defects reproduced in a running app: (A) `MessageBubble.jsx:133` formats with a bare `toLocaleString()` — runtime locale, not i18next's, and the full date instead of `HH:MM` + a day separator; (B) `createConversationPoll` (`MessagingProvider.jsx:403`) does `poll?.message \|\| poll`, but dcm's `_poll_response` has no `message` key, so a phantom entry is cached under the POLL id with no `created_at`; (C) `applyFrame` discards dcm's `read_state`/`delivered`/`thread_read_state` frames; (D) `markConversationRead` fires twice per open (Thread's useEffect + ConversationList's onClick); (E) `SHOW_REPLIES` has no plural forms. | 2026-08-03 | done | 3c7cfbd | Envelope: [work-orders/MSG-6e.md](work-orders/MSG-6e.md). **Reviewed independently: `reviewer` + `ui_reviewer` (requested per envelope for scope A), both clean after one fix round.** Fix round 1 closed a **P1** (`reviewer`): the read-state receipt fix only worked through `recipient_detail`, which dcm never returns for direct (1:1) conversations — the most common case — so `ReadTicks` silently never updated for DMs; fixed by deriving the receipt from `cache.receipts` keyed by `conversation.other_user_id` for the direct case. **Scope C landed narrower than the original envelope** (see the WO's "OPERATOR DECISIONS" section): only `read_state`/`thread_read_state` are handled — `delivered` was deliberately left out, since `django-core-micha` MSG-7 (same release) retires its only publisher (`mark_delivered`). **Not fixed, tracked as follow-ups (P2/P3, `ui_reviewer`, non-blocking):** the day-separator is a bespoke `Divider`+`Typography` pair rather than reusing `LoginForm.jsx`'s existing divider-with-label convention; the separator text has no `nowrap` guard (unlike `MessageBubble`'s timestamp); the first day in a thread never gets a separator (matches the WO's literal spec, not a deviation). Full suite 215→222 passed, 0 failed; `tsc` clean. jg's pin bump is a separate step, still NOT part of this WO — jg also needs `django-core-micha` MSG-7. **B is the one that corrupts state and the most instructive:** the `\|\| poll` fallback turns a wrong assumption about the response shape into silent data corruption instead of an error — observed as a fresh poll rendering with no timestamp and sorting to the TOP of the timeline, above messages from two days earlier, because `chronological()` sorts on `new Date(undefined)` → NaN. Correct after reload. **Explicit non-goal: do NOT touch `isOwn`/`canShowReadTicks`/`senderName`** — the own/incoming alignment, missing ticks and "Unbekannte Person" all trace to dcm never sending a `sender` object; ucm's code is already correct (`MessageBubble.jsx:100/108/109` implements the alignment in full, it just never sees `isOwn === true`). That fix is `django-core-micha` MSG-7. **Ordering caveat on C:** jg MSG-9 finding 1 (live WS push ~10 min late) is undiagnosed — handling frames that do not arrive fixes nothing, so do C last and report if finding 1 is still open. jg's pin bump is NOT part of this WO: jg also needs dcm MSG-7, and bumping one alone leaves the surface half-fixed. |
-| MSG-6f | `titleOf` never calls the host resolver for a broadcast; the read ticks claim a delivery that does not exist | (A) `ConversationList.jsx` `titleOf()` gates the host callback on `conversation.kind === 'managed'`, so jg-ferien MSG-10's correct broadcast branch in `resolveManagedConversationLabel` is **unreachable from the list** — the row still falls through to `MessagingList.UNTITLED`. (B) dcm MSG-7 removed `delivered_count` from `read-status`, but `ReadTicks.jsx` still renders `t('MessagingReadTicks.DELIVERED', { count: renderedStatus.delivered_count \|\| 0 })`, so `undefined \|\| 0` produces the identical "Zugestellt an 0" label as before — a claimed delivery with no data source behind it. (C) a viewer already sitting in an open thread when a new message lands is recorded as "not read" until they navigate away and back — the mount-effect only re-marks once per open. | 2026-08-03 | done | (pending push) | Envelope: [work-orders/MSG-6f.md](work-orders/MSG-6f.md); all three scopes released together per operator's critical-path directive (one release instead of two, since A and C never depended on dcm) — this also stands as the operator confirmation the envelope asked for before implementing B's vocabulary change. **A:** kind gate removed entirely from `titleOf()`; a host resolver returning `null` already means "no label", so gating duplicated a decision that belongs to the host. **B:** `DELIVERED` retired; dcm MSG-9 (published 2.40.0) added `read_count`/`recipient_count` to `read-status`, gated the same way as `recipient_detail` (non-direct, `read_receipt_detail`-eligible). `ReadTicks.jsx` now renders: counts present → a read ratio (`READ_RATIO`, e.g. "18/40"), no counts + `direct` → two-state tick (`SENT`/`ALL_READ`), no counts + non-direct → nothing (was a permanently-grey "always delivered" tick before). **C:** `Thread.jsx` now also subscribes to `MESSAGING_ENVELOPE` directly (independent of `MessagingProvider`'s own subscription — the registry supports multiple handlers per envelope) and re-marks read on a live `message` frame for the open conversation, skipped when the tab is hidden. **Reviewed independently: `reviewer` + `ui_reviewer`, both clean after one fix round.** Fix round 1 closed a **P1** (`reviewer`, self-caught during the fix, not shipped): the ratio was briefly recomputed client-side from `recipientDetail.filter(r => r.last_read_at).length` to make it "live-update" from `read_state` frames — this silently contradicts the WO's explicit instruction and is wrong, because `recipientDetail`'s `last_read_at` is never thresholded against the specific message's `created_at` the way dcm's own aggregate is (`last_read_at__gte=message.created_at`, dcm `services.py`); in a real group with history it would read as close to N/N regardless of who actually saw *this* message. Reverted to trusting dcm's `read_count`/`recipient_count` verbatim, with the trade-off documented in `ReadTicks.jsx`: the ratio no longer live-updates from a `read_state` frame, only on the next read-status fetch (unlike the DM tick and the per-person popover, both viewer/timestamp-relative facts that safely reuse `cache.receipts`). Also fixed a P3 (`ui_reviewer`): the ratio's `color="text.secondary"` diverged from the sibling meta row's `inherit` convention, changed to `inherit`. **Known, disclosed, non-blocking follow-up (`ui_reviewer` P2, not fixed here):** the DM tick's fixed `grey.500`/`primary.main` colour pair is not fully dark-mode contrast-neutral — verified by hand (WCAG-style luminance/contrast math against both themes' actual palette values, not just accepting the reviewer's claim): light-mode state separation ≈1.71:1, dark-mode ≈1.53:1 (worse, since `primary.main` lightens substantially in dark mode while `grey.500` is a fixed, non-mode-aware value). No single grey threads both themes well — the two themes need opposite-direction adjustments relative to their own inverted primary-blue lightness — and the icon shape (`Done` vs `DoneAll`) remains the primary, non-colour signal per the component's own design principle, so this is tracked rather than guessed at further without live visual verification. Test-infrastructure fix alongside C, not a behavioural change: `Thread.jsx`'s new `subscribe()` call broke 3 existing test files' single-captured-handler mock pattern (`frameHandler = handler`, overwritten per call) — converted to Set/Map-based multi-handler dispatch in `messagingChunk6.test.jsx`, `messagingMsg6.test.jsx`, `messagingThreadReceipts.test.jsx`. Full suite 234/234 (was 222), `tsc` clean. Published as npm 2.22.0 (pending). jg-ferien pin bump to `dcm 2.40.0` / `ucm 2.22.0` is a separate, subsequent step. |
+| MSG-6f | `titleOf` never calls the host resolver for a broadcast; the read ticks claim a delivery that does not exist | (A) `ConversationList.jsx` `titleOf()` gates the host callback on `conversation.kind === 'managed'`, so jg-ferien MSG-10's correct broadcast branch in `resolveManagedConversationLabel` is **unreachable from the list** — the row still falls through to `MessagingList.UNTITLED`. (B) dcm MSG-7 removed `delivered_count` from `read-status`, but `ReadTicks.jsx` still renders `t('MessagingReadTicks.DELIVERED', { count: renderedStatus.delivered_count \|\| 0 })`, so `undefined \|\| 0` produces the identical "Zugestellt an 0" label as before — a claimed delivery with no data source behind it. (C) a viewer already sitting in an open thread when a new message lands is recorded as "not read" until they navigate away and back — the mount-effect only re-marks once per open. | 2026-08-03 | done | 61e13b0 | Envelope: [work-orders/MSG-6f.md](work-orders/MSG-6f.md); all three scopes released together per operator's critical-path directive (one release instead of two, since A and C never depended on dcm) — this also stands as the operator confirmation the envelope asked for before implementing B's vocabulary change. **A:** kind gate removed entirely from `titleOf()`; a host resolver returning `null` already means "no label", so gating duplicated a decision that belongs to the host. **B:** `DELIVERED` retired; dcm MSG-9 (published 2.40.0) added `read_count`/`recipient_count` to `read-status`, gated the same way as `recipient_detail` (non-direct, `read_receipt_detail`-eligible). `ReadTicks.jsx` now renders: counts present → a read ratio (`READ_RATIO`, e.g. "18/40"), no counts + `direct` → two-state tick (`SENT`/`ALL_READ`), no counts + non-direct → nothing (was a permanently-grey "always delivered" tick before). **C:** `Thread.jsx` now also subscribes to `MESSAGING_ENVELOPE` directly (independent of `MessagingProvider`'s own subscription — the registry supports multiple handlers per envelope) and re-marks read on a live `message` frame for the open conversation, skipped when the tab is hidden. **Reviewed independently: `reviewer` + `ui_reviewer`, both clean after one fix round.** Fix round 1 closed a **P1** (`reviewer`, self-caught during the fix, not shipped): the ratio was briefly recomputed client-side from `recipientDetail.filter(r => r.last_read_at).length` to make it "live-update" from `read_state` frames — this silently contradicts the WO's explicit instruction and is wrong, because `recipientDetail`'s `last_read_at` is never thresholded against the specific message's `created_at` the way dcm's own aggregate is (`last_read_at__gte=message.created_at`, dcm `services.py`); in a real group with history it would read as close to N/N regardless of who actually saw *this* message. Reverted to trusting dcm's `read_count`/`recipient_count` verbatim, with the trade-off documented in `ReadTicks.jsx`: the ratio no longer live-updates from a `read_state` frame, only on the next read-status fetch (unlike the DM tick and the per-person popover, both viewer/timestamp-relative facts that safely reuse `cache.receipts`). Also fixed a P3 (`ui_reviewer`): the ratio's `color="text.secondary"` diverged from the sibling meta row's `inherit` convention, changed to `inherit`. **Known, disclosed, non-blocking follow-up (`ui_reviewer` P2, not fixed here):** the DM tick's fixed `grey.500`/`primary.main` colour pair is not fully dark-mode contrast-neutral — verified by hand (WCAG-style luminance/contrast math against both themes' actual palette values, not just accepting the reviewer's claim): light-mode state separation ≈1.71:1, dark-mode ≈1.53:1 (worse, since `primary.main` lightens substantially in dark mode while `grey.500` is a fixed, non-mode-aware value). No single grey threads both themes well — the two themes need opposite-direction adjustments relative to their own inverted primary-blue lightness — and the icon shape (`Done` vs `DoneAll`) remains the primary, non-colour signal per the component's own design principle, so this is tracked rather than guessed at further without live visual verification. Test-infrastructure fix alongside C, not a behavioural change: `Thread.jsx`'s new `subscribe()` call broke 3 existing test files' single-captured-handler mock pattern (`frameHandler = handler`, overwritten per call) — converted to Set/Map-based multi-handler dispatch in `messagingChunk6.test.jsx`, `messagingMsg6.test.jsx`, `messagingThreadReceipts.test.jsx`. Full suite 234/234 (was 222), `tsc` clean. Published as npm 2.22.0 (confirmed live on the registry). jg-ferien pin bump to `dcm 2.40.0` / `ucm 2.22.0` done separately (MSG-14).
+| MSG-6g | Poll UI: tap-to-vote with proportional result bars, no separate vote button | `PollCard.jsx` required select-then-click-"Abstimmen" two-step voting, with results as a bare `(n)` count suffix. Operator request: WhatsApp-style tap-to-vote with proportional bars. | 2026-08-03 | done | (pending push) | Envelope: [work-orders/MSG-6g.md](work-orders/MSG-6g.md). UX improvement, blocked nothing, blocked by nothing — except a real blocker found mid-implementation: the WO's own assumption that dcm's vote endpoint treats `option_ids` as a complete authoritative set per call did not hold for multi-select (`vote_poll` only ever added votes, never retracted one for an option missing from a later call — untoggling was silently a no-op). Reported per the WO's own "stop and report" contingency; operator confirmed fixing it directly in dcm rather than working around it client-side — see dcm `work-orders/MSG-11.md`, published as dcm 2.40.1. **Implemented directly by the Orchestrator** (Codex unavailable, out of credits). Single-choice now renders a real `RadioGroup` (native "different option moves the vote, same option is a no-op" semantics, matching `AuthFactorRequirementCard.jsx`'s existing radio convention); multi-select renders `Checkbox`. Each option shows a `LinearProgress` bar + count/percentage (in the accessible name, not width alone); count/percent never `NaN` at zero votes. Every tap is optimistic (`MessagingProvider.castPollVote`, patterned on `toggleReaction`'s immediate-patch/reconcile-or-revert shape) with a per-poll "latest tap wins" token so rapid re-taps race deterministically instead of a stale response clobbering a newer one; a rejected vote visibly reverts. **Independent `reviewer` + `ui_reviewer` (both mandatory per the WO), 5 findings total, all fixed** — see `work-orders/MSG-6g.md`'s as-built record for full detail: `reviewer` R1 (**P1**, real bug) — the optimistic count projection was built from the stale caller-supplied `poll` prop instead of the freshly cache-read `previousPoll`, computing a wrong transient vote count in the shared cache on a second rapid tap; fixed, and verified non-vacuous by reverting the fix and confirming the new regression test fails with the exact predicted wrong number before restoring it. R2 (P2) — no test covered non-zero-count rapid-tap math (zero-vote fixtures elsewhere masked R1 via a `Math.max(0, ...)` clamp); closed with a dedicated regression test. R3 (P3) — a possible `undefined` pushed into an option's `voters` array when `user?.id` is momentarily unset; guarded. `ui_reviewer` U1 (P2) — no visual distinction between an in-flight optimistic vote and a confirmed one; fixed by reusing `ReactionBar.jsx`'s `pending`-Set dimming convention, deliberately *not* disabling the control (the WO requires rapid re-taps to stay possible, not be blocked). U2 (P2) — bare ungrouped `Radio` controls diverged from this repo's own convention and lost native arrow-key/group semantics; fixed with `RadioGroup`, which also let a manual `Box onClick`+`stopPropagation` whole-row-tap hack be removed in favour of `FormControlLabel`'s native label-click — that same change surfaced and fixed an unreported bug (`RadioGroup`'s own `onChange` only ever returns a DOM string via `event.target.value`, silently coercing a non-string option id) caught by an existing numeric-id test fixture. Removed now-orphaned `MessagingPoll.VOTE`/`SELECT_OPTION` i18n keys; added `MessagingPoll.OPTION_RESULT`. Scoped gate: full suite 234 → 241 (7 new tests), `tsc` clean. Published as npm 2.23.0. jg-ferien pin bump is a separate, subsequent step. |
+| MSG-6g | Poll UI: tap-to-vote with result bars, no separate vote button | `PollCard.jsx` renders options as `FormControlLabel` + `Checkbox`/radio labelled `"<text> (<vote_count>)"`, with a separate "Abstimmen" submit button — voting is a two-step select-then-submit, and the result is a bare parenthesised number. Operator request: one tap on the option itself casts the vote, and the distribution reads at a glance from proportional bars (WhatsApp-style). | 2026-08-03 | planned | | Envelope: [work-orders/MSG-6g.md](work-orders/MSG-6g.md). Operator request 2026-08-03. **UX improvement, not a defect — the current poll works.** Scoped separately so it never blocks the messaging defect WOs (dcm MSG-10, ucm MSG-6f); it blocks nothing and is blocked by nothing. Frontend only: if tap-to-vote appears to need a backend change, stop and report. Two things easy to break and pinned by tests: a failed vote must **visibly revert** (a silently swallowed failure leaving a bar showing an unrecorded vote is worse than the current two-step flow), and the viewer's `voted_option_ids` must survive a `poll_updated` frame that does not carry it — that is viewer-specific and REST-only by design, and the merge-trap guard was a deliberate earlier fix. Also specified: zero-vote rendering must be defined rather than letting a division produce `NaN`; the denominator is total votes cast, not participant count; the closed state must stay unmistakable now that a missing submit button no longer signals it; and the accessible name must carry count/percentage, since bar width alone does not. Explicit non-goal: no "who voted for what" disclosure — `serialize_poll`'s `voters` data is not licence to surface it, that is an untaken privacy decision. |

package/dist/i18n/messagingTranslations.js

@@ -76,10 +76,9 @@ export const messagingTranslations = {
     'MessagingReactions.TOGGLE_other': { de: '{{emoji}} Reaktion mit {{count}} Stimmen umschalten', en: 'Toggle {{emoji}} reaction with {{count}} votes', fr: 'Basculer la réaction {{emoji}} avec {{count}} votes' },
     'MessagingReactions.ERROR': { de: 'Reaktion konnte nicht gespeichert werden: {{message}}', en: 'Reaction could not be saved: {{message}}', fr: 'Impossible d’enregistrer la réaction : {{message}}' },
     'MessagingPoll.LABEL': { de: 'Umfrage', en: 'Poll', fr: 'Sondage' },
-    'MessagingPoll.VOTE': { de: 'Abstimmen', en: 'Vote', fr: 'Voter' },
     'MessagingPoll.CLOSE': { de: 'Umfrage schliessen', en: 'Close poll', fr: 'Clore le sondage' },
     'MessagingPoll.CLOSED': { de: 'Geschlossen', en: 'Closed', fr: 'Clos' },
-    'MessagingPoll.SELECT_OPTION': { de: 'Wähle mindestens eine Option.', en: 'Select at least one option.', fr: 'Sélectionnez au moins une option.' },
+    'MessagingPoll.OPTION_RESULT': { de: '{{count}} ({{percent}} %)', en: '{{count}} ({{percent}}%)', fr: '{{count}} ({{percent}} %)' },
     'MessagingPoll.VOTE_ERROR': { de: 'Stimme konnte nicht gespeichert werden: {{message}}', en: 'Vote could not be saved: {{message}}', fr: 'Impossible d’enregistrer le vote : {{message}}' },
     'MessagingPoll.CLOSE_ERROR': { de: 'Umfrage konnte nicht geschlossen werden: {{message}}', en: 'Poll could not be closed: {{message}}', fr: 'Impossible de clore le sondage : {{message}}' },
     'MessagingPoll.CREATE': { de: 'Umfrage erstellen', en: 'Create poll', fr: 'Créer un sondage' },

package/dist/messaging/MessagingProvider.js

@@ -18,6 +18,31 @@ function idOf(item) { var _a, _b, _c; return (_c = (_b = (_a = item === null ||
 function mergeById(slice, item) { const id = idOf(item); return id == null ? slice : Object.assign(Object.assign({}, slice), { [id]: Object.assign(Object.assign({}, slice[id]), item) }); }
 function resultsOf(response) { return (response === null || response === void 0 ? void 0 : response.results) || []; }
 function clientRequestIdOf(message) { return message === null || message === void 0 ? void 0 : message.client_request_id; }
+// Optimistic vote-count/voters projection for MSG-6g tap-to-vote -- only options whose
+// membership in the vote actually changed get their count/voters adjusted, so an
+// unrelated option's tally is never nudged by someone else's concurrent vote landing in
+// cache between taps.
+function applyOptimisticVote(poll, previousSelectedIds, nextSelectedIds, userId) {
+    const previousSet = new Set(previousSelectedIds || []);
+    const nextSet = new Set(nextSelectedIds || []);
+    const options = (poll.options || []).map((option) => {
+        var _a, _b, _c;
+        const wasSelected = previousSet.has(option.id);
+        const isSelected = nextSet.has(option.id);
+        if (wasSelected === isSelected)
+            return option;
+        const delta = isSelected ? 1 : -1;
+        // userId can be undefined for a brief window if AuthContext hasn't
+        // populated `user` yet -- never push a literal `undefined` into the
+        // voters array (the reconcile/revert below overwrites it regardless,
+        // but the optimistic window must not carry a bogus entry).
+        const voters = Array.isArray(option.voters) && userId != null
+            ? (isSelected ? [...option.voters, userId] : option.voters.filter((voter) => voter !== userId))
+            : option.voters;
+        return Object.assign(Object.assign({}, option), { vote_count: Math.max(0, ((_c = (_a = option.vote_count) !== null && _a !== void 0 ? _a : (_b = option.voters) === null || _b === void 0 ? void 0 : _b.length) !== null && _c !== void 0 ? _c : 0) + delta), voters });
+    });
+    return Object.assign(Object.assign({}, poll), { options, voted_option_ids: nextSelectedIds });
+}
 /**
  * dcm's DRF validation errors aren't always {detail}: ConversationAttachmentView
  * translates a rejected upload into a field-keyed {"files": [...]} body (the
@@ -214,6 +239,10 @@ export function MessagingProvider({ children, filters = {}, activeConversationId
     const activeIdRef = useRef(activeConversationId);
     const seenEventsRef = useRef(new Set());
     const filtersRef = useRef(filters);
+    // Per-poll "latest tap wins" token: rapid successive taps race, and a stale
+    // response (revert on failure, or reconcile on success) must not clobber a
+    // newer optimistic state that has already superseded it.
+    const pollVoteTokensRef = useRef({});
     activeIdRef.current = activeConversationId;
     filtersRef.current = filters;
     const refreshConversations = useCallback(async () => {
@@ -389,11 +418,40 @@ export function MessagingProvider({ children, filters = {}, activeConversationId
         return poll;
     }, [api, patchMessage]);
     const castPollVote = useCallback(async (messageId, poll, optionIds) => {
-        const result = await api.votePoll(poll.id, optionIds);
-        const nextPoll = Object.assign(Object.assign({}, poll), ((result === null || result === void 0 ? void 0 : result.poll) || result));
-        patchMessage(Object.assign(Object.assign({}, (cache.messages[messageId] || { id: messageId })), { poll: nextPoll }));
-        return result;
-    }, [api, cache.messages, patchMessage]);
+        // Optimistic tap-to-vote (MSG-6g), following the same immediate-patch /
+        // reconcile-or-revert shape `toggleReaction` already uses. The previous poll
+        // (pre-tap) is captured up front so a failure can revert to it exactly, not to
+        // whatever `cache.messages` happens to hold when the error arrives.
+        const message = cache.messages[messageId] || { id: messageId };
+        const previousPoll = message.poll || poll;
+        // Project from `previousPoll` (the freshest known state in the shared cache),
+        // never from the caller-supplied `poll` param -- `PollCard` is a "dumb",
+        // prop-driven component that may still be holding the pre-first-tap `poll`
+        // it was originally passed when a second rapid tap fires, and projecting
+        // counts from that stale baseline would compute a wrong transient
+        // vote_count/voters in the SHARED cache (visible to every consumer, not
+        // just this component's own render).
+        const optimisticPoll = applyOptimisticVote(previousPoll, previousPoll.voted_option_ids, optionIds, user === null || user === void 0 ? void 0 : user.id);
+        const token = {};
+        pollVoteTokensRef.current[poll.id] = token;
+        patchMessage(Object.assign(Object.assign({}, message), { poll: optimisticPoll }));
+        try {
+            const result = await api.votePoll(poll.id, optionIds);
+            // A newer tap already started (and will reconcile/revert for itself) --
+            // applying this now-stale response would stomp on it.
+            if (pollVoteTokensRef.current[poll.id] !== token)
+                return result;
+            const nextPoll = Object.assign(Object.assign({}, poll), ((result === null || result === void 0 ? void 0 : result.poll) || result));
+            patchMessage(Object.assign(Object.assign({}, (cache.messages[messageId] || { id: messageId })), { poll: nextPoll }));
+            return result;
+        }
+        catch (error) {
+            if (pollVoteTokensRef.current[poll.id] === token) {
+                patchMessage(Object.assign(Object.assign({}, (cache.messages[messageId] || { id: messageId })), { poll: previousPoll }));
+            }
+            throw error;
+        }
+    }, [api, cache.messages, patchMessage, user]);
     const closeConversationPoll = useCallback(async (messageId, poll) => {
         var _a;
         const result = await api.closePoll(poll.id);

package/dist/messaging/PollCard.js

@@ -1,17 +1,37 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Alert, Button, Checkbox, FormControlLabel, Paper, Stack, Typography } from '@mui/material';
-import { useEffect, useState } from 'react';
+import LockOutlinedIcon from '@mui/icons-material/LockOutlined';
+import { Alert, Button, Checkbox, Chip, FormControlLabel, LinearProgress, Paper, Radio, RadioGroup, Stack, Typography } from '@mui/material';
+import { useEffect, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { extractApiErrorMessage, useMessaging } from './MessagingProvider';
-/** Independently mountable live poll view. Server authorization remains authoritative. */
+/**
+ * Independently mountable live poll view. Server authorization remains authoritative.
+ *
+ * Tap-to-vote (MSG-6g): each option is its own control, cast immediately on tap — no
+ * separate submit step. Single-choice uses a real `RadioGroup` (native "tap a different
+ * option moves the vote, tap the same one is a no-op" semantics, plus the group's own
+ * arrow-key navigation and screen-reader group announcement — a bare ungrouped `Radio`
+ * per option, tried first, loses both); multi-select uses `Checkbox` (each tap
+ * independently toggles that option). `FormControlLabel` wraps each control, matching
+ * this repo's existing radio convention (`AuthFactorRequirementCard.jsx`) — clicking
+ * anywhere in the label natively activates the control, no manual click-handling needed.
+ * Every tap is optimistic (see `castPollVote` in `MessagingProvider`), dims while
+ * in flight (matching `ReactionBar`'s `pending` convention) so an optimistic vote is
+ * never visually indistinguishable from a confirmed one, and visibly reverts on a
+ * rejected vote.
+ */
 export function PollCard({ message, canClose: canCloseProp }) {
-    var _a, _b, _c, _d, _e, _f, _g;
+    var _a, _b, _c, _d, _e, _f, _g, _h;
     const { t } = useTranslation();
     const { castPollVote, closeConversationPoll, currentUser } = useMessaging();
     const poll = message === null || message === void 0 ? void 0 : message.poll;
     const [selected, setSelected] = useState([]);
     const [error, setError] = useState(null);
     const [busy, setBusy] = useState(false);
+    const [pending, setPending] = useState(() => new Set());
+    // Guards a rejected vote's revert against a newer tap that has since
+    // superseded it -- see the matching token in MessagingProvider.castPollVote.
+    const voteTokenRef = useRef(null);
     // voted_option_ids is a view-level enrichment dcm adds ONLY to the
     // create/vote/close poll REST responses (serialize_poll itself, every
     // message-list/thread load, and every poll_updated realtime frame never
@@ -26,22 +46,39 @@ export function PollCard({ message, canClose: canCloseProp }) {
     const closed = Boolean(poll.closed_at);
     const creatorId = (_c = (_a = poll.created_by_id) !== null && _a !== void 0 ? _a : (_b = poll.created_by) === null || _b === void 0 ? void 0 : _b.id) !== null && _c !== void 0 ? _c : poll.created_by;
     const canClose = (_g = (_e = (_d = canCloseProp !== null && canCloseProp !== void 0 ? canCloseProp : poll.can_close) !== null && _d !== void 0 ? _d : message === null || message === void 0 ? void 0 : message.can_close) !== null && _e !== void 0 ? _e : (_f = message === null || message === void 0 ? void 0 : message.permissions) === null || _f === void 0 ? void 0 : _f.can_close) !== null && _g !== void 0 ? _g : (creatorId != null && creatorId === (currentUser === null || currentUser === void 0 ? void 0 : currentUser.id));
-    const changeSelection = (id) => setSelected((current) => poll.allow_multiple ? (current.includes(id) ? current.filter((value) => value !== id) : [...current, id]) : (current.includes(id) ? [] : [id]));
-    const vote = async () => {
-        if (!selected.length) {
-            setError(t('MessagingPoll.SELECT_OPTION'));
+    const totalVotes = (poll.options || []).reduce((sum, option) => { var _a, _b, _c; return sum + ((_c = (_a = option.vote_count) !== null && _a !== void 0 ? _a : (_b = option.voters) === null || _b === void 0 ? void 0 : _b.length) !== null && _c !== void 0 ? _c : 0); }, 0);
+    const tap = async (id) => {
+        if (closed)
             return;
-        }
-        setBusy(true);
+        const previousSelected = selected;
+        const nextSelected = poll.allow_multiple
+            ? (selected.includes(id) ? selected.filter((value) => value !== id) : [...selected, id])
+            : [id];
+        // Belt-and-suspenders: native radios already don't fire a change event
+        // when re-clicking the checked one, but this guards any caller shape.
+        if (nextSelected.length === previousSelected.length && nextSelected.every((value) => previousSelected.includes(value)))
+            return;
+        const token = {};
+        voteTokenRef.current = token;
+        setSelected(nextSelected);
         setError(null);
+        // Rapid re-taps are allowed and race deliberately (last write wins via
+        // the token above) -- `pending` is a visual signal only, never gates
+        // further taps, so it must not disable the control.
+        setPending((current) => new Set(current).add(id));
         try {
-            await castPollVote(message.id, poll, selected);
+            await castPollVote(message.id, poll, nextSelected);
         }
         catch (voteError) {
-            setError(t('MessagingPoll.VOTE_ERROR', { message: extractApiErrorMessage(voteError) }));
+            // A later tap already moved the selection on; a stale failure must not
+            // revert past it.
+            if (voteTokenRef.current === token) {
+                setSelected(previousSelected);
+                setError(t('MessagingPoll.VOTE_ERROR', { message: extractApiErrorMessage(voteError) }));
+            }
         }
         finally {
-            setBusy(false);
+            setPending((current) => { const next = new Set(current); next.delete(id); return next; });
         }
     };
     const close = async () => {
@@ -57,14 +94,37 @@ export function PollCard({ message, canClose: canCloseProp }) {
             setBusy(false);
         }
     };
-    return _jsx(Paper, { variant: "outlined", sx: { p: 1 }, "aria-label": t('MessagingPoll.LABEL'), children: _jsxs(Stack, { spacing: 0.5, children: [_jsx(Typography, { variant: "subtitle2", children: poll.question }), (poll.options || []).map((option) => {
-                    var _a, _b, _c, _d, _e, _f, _g;
-                    // dcm's poll projection gives voter user ids only, never names — there
-                    // is no user-directory endpoint (same structural limit already
-                    // established for the DM candidate list). A count is always correct;
-                    // marking the viewer's own vote is derivable from voted_option_ids.
-                    const votedByMe = Boolean((_a = poll.voted_option_ids) === null || _a === void 0 ? void 0 : _a.includes(option.id));
-                    const voterCount = (_e = (_d = (_c = (_b = option.voters) === null || _b === void 0 ? void 0 : _b.length) !== null && _c !== void 0 ? _c : option.vote_count) !== null && _d !== void 0 ? _d : option.votes_count) !== null && _e !== void 0 ? _e : 0;
-                    return _jsx(FormControlLabel, { disabled: closed || busy, control: _jsx(Checkbox, { checked: selected.includes(option.id), onChange: () => changeSelection(option.id) }), label: `${option.text || option.label} (${(_g = (_f = option.vote_count) !== null && _f !== void 0 ? _f : voterCount) !== null && _g !== void 0 ? _g : 0})${votedByMe ? ` — ${t('MessagingPoll.YOU_VOTED')}` : ''}` }, option.id);
-                }), error && _jsx(Alert, { severity: "error", role: "alert", children: error }), _jsxs(Stack, { direction: "row", spacing: 1, children: [_jsx(Button, { size: "small", onClick: vote, disabled: closed || busy, children: t('MessagingPoll.VOTE') }), canClose && !closed && _jsx(Button, { size: "small", color: "warning", onClick: close, disabled: busy, children: t('MessagingPoll.CLOSE') }), closed && _jsx(Typography, { variant: "caption", children: t('MessagingPoll.CLOSED') })] })] }) });
+    const optionLabel = (option) => {
+        var _a, _b, _c;
+        // dcm's poll projection gives voter user ids only, never names — there
+        // is no user-directory endpoint (same structural limit already
+        // established for the DM candidate list).
+        const voteCount = (_c = (_a = option.vote_count) !== null && _a !== void 0 ? _a : (_b = option.voters) === null || _b === void 0 ? void 0 : _b.length) !== null && _c !== void 0 ? _c : 0;
+        const percent = totalVotes > 0 ? Math.round((voteCount / totalVotes) * 100) : 0;
+        const votedByMe = selected.includes(option.id);
+        const resultText = t('MessagingPoll.OPTION_RESULT', { count: voteCount, percent });
+        // The bar is decorative; count/percent live in the accessible name (via
+        // aria-label on the control itself) as well as in adjacent visible text —
+        // width alone must never be the only signal (WO risk note).
+        const accessibleLabel = `${option.text || option.label}, ${resultText}${votedByMe ? `, ${t('MessagingPoll.YOU_VOTED')}` : ''}`;
+        const richLabel = _jsxs(Stack, { sx: { flex: 1, minWidth: 0, opacity: pending.has(option.id) ? 0.6 : 1 }, spacing: 0.25, children: [_jsxs(Stack, { direction: "row", justifyContent: "space-between", children: [_jsx(Typography, { variant: "body2", noWrap: true, children: option.text || option.label }), _jsx(Typography, { variant: "caption", color: "text.secondary", children: resultText })] }), _jsx(LinearProgress, { variant: "determinate", value: percent, sx: { borderRadius: 1, height: 6 }, color: votedByMe ? 'primary' : 'inherit' })] });
+        return { accessibleLabel, richLabel };
+    };
+    const formControlSx = { width: '100%', m: 0, alignItems: 'flex-start' };
+    return _jsx(Paper, { variant: "outlined", sx: { p: 1 }, "aria-label": t('MessagingPoll.LABEL'), children: _jsxs(Stack, { spacing: 0.75, children: [_jsx(Typography, { variant: "subtitle2", children: poll.question }), poll.allow_multiple
+                    ? (poll.options || []).map((option) => {
+                        const { accessibleLabel, richLabel } = optionLabel(option);
+                        return _jsx(FormControlLabel, { disabled: closed, sx: formControlSx, label: richLabel, control: _jsx(Checkbox, { checked: selected.includes(option.id), inputProps: { 'aria-label': accessibleLabel }, onChange: () => tap(option.id), sx: { pt: 0.25 } }) }, option.id);
+                    })
+                    // No RadioGroup-level onChange: it would only ever hand back
+                    // `event.target.value`, a DOM string -- coercing a non-string option id
+                    // (dcm's are UUID strings today, but the id type isn't a guaranteed
+                    // contract). `value` alone still drives each Radio's `checked` via the
+                    // group's own comparison; each Radio's own `onChange` below fires
+                    // `tap` with the option's real, correctly-typed id, matching the
+                    // Checkbox branch above exactly.
+                    : _jsx(RadioGroup, { value: (_h = selected[0]) !== null && _h !== void 0 ? _h : '', name: `poll-${poll.id}-options`, children: (poll.options || []).map((option) => {
+                            const { accessibleLabel, richLabel } = optionLabel(option);
+                            return _jsx(FormControlLabel, { value: option.id, disabled: closed, sx: formControlSx, label: richLabel, control: _jsx(Radio, { inputProps: { 'aria-label': accessibleLabel }, onChange: () => tap(option.id), sx: { pt: 0.25 } }) }, option.id);
+                        }) }), error && _jsx(Alert, { severity: "error", role: "alert", children: error }), _jsxs(Stack, { direction: "row", spacing: 1, alignItems: "center", children: [canClose && !closed && _jsx(Button, { size: "small", color: "warning", onClick: close, disabled: busy, children: t('MessagingPoll.CLOSE') }), closed && _jsx(Chip, { size: "small", icon: _jsx(LockOutlinedIcon, { fontSize: "small" }), label: t('MessagingPoll.CLOSED') })] })] }) });
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@micha.bigler/ui-core-micha",
-  "version": "2.22.0",
+  "version": "2.23.0",
   "main": "dist/index.js",
   "module": "dist/index.js",
   "repository": {

package/src/i18n/messagingTranslations.ts

@@ -76,10 +76,9 @@ export const messagingTranslations = {
   'MessagingReactions.TOGGLE_other': { de: '{{emoji}} Reaktion mit {{count}} Stimmen umschalten', en: 'Toggle {{emoji}} reaction with {{count}} votes', fr: 'Basculer la réaction {{emoji}} avec {{count}} votes' },
   'MessagingReactions.ERROR': { de: 'Reaktion konnte nicht gespeichert werden: {{message}}', en: 'Reaction could not be saved: {{message}}', fr: 'Impossible d’enregistrer la réaction : {{message}}' },
   'MessagingPoll.LABEL': { de: 'Umfrage', en: 'Poll', fr: 'Sondage' },
-  'MessagingPoll.VOTE': { de: 'Abstimmen', en: 'Vote', fr: 'Voter' },
   'MessagingPoll.CLOSE': { de: 'Umfrage schliessen', en: 'Close poll', fr: 'Clore le sondage' },
   'MessagingPoll.CLOSED': { de: 'Geschlossen', en: 'Closed', fr: 'Clos' },
-  'MessagingPoll.SELECT_OPTION': { de: 'Wähle mindestens eine Option.', en: 'Select at least one option.', fr: 'Sélectionnez au moins une option.' },
+  'MessagingPoll.OPTION_RESULT': { de: '{{count}} ({{percent}} %)', en: '{{count}} ({{percent}}%)', fr: '{{count}} ({{percent}} %)' },
   'MessagingPoll.VOTE_ERROR': { de: 'Stimme konnte nicht gespeichert werden: {{message}}', en: 'Vote could not be saved: {{message}}', fr: 'Impossible d’enregistrer le vote : {{message}}' },
   'MessagingPoll.CLOSE_ERROR': { de: 'Umfrage konnte nicht geschlossen werden: {{message}}', en: 'Poll could not be closed: {{message}}', fr: 'Impossible de clore le sondage : {{message}}' },
   'MessagingPoll.CREATE': { de: 'Umfrage erstellen', en: 'Create poll', fr: 'Créer un sondage' },

package/src/messaging/MessagingProvider.jsx

@@ -47,6 +47,30 @@ function mergeById(slice, item) { const id = idOf(item); return id == null ? sli
 function resultsOf(response) { return response?.results || []; }
 function clientRequestIdOf(message) { return message?.client_request_id; }
 
+// Optimistic vote-count/voters projection for MSG-6g tap-to-vote -- only options whose
+// membership in the vote actually changed get their count/voters adjusted, so an
+// unrelated option's tally is never nudged by someone else's concurrent vote landing in
+// cache between taps.
+function applyOptimisticVote(poll, previousSelectedIds, nextSelectedIds, userId) {
+  const previousSet = new Set(previousSelectedIds || []);
+  const nextSet = new Set(nextSelectedIds || []);
+  const options = (poll.options || []).map((option) => {
+    const wasSelected = previousSet.has(option.id);
+    const isSelected = nextSet.has(option.id);
+    if (wasSelected === isSelected) return option;
+    const delta = isSelected ? 1 : -1;
+    // userId can be undefined for a brief window if AuthContext hasn't
+    // populated `user` yet -- never push a literal `undefined` into the
+    // voters array (the reconcile/revert below overwrites it regardless,
+    // but the optimistic window must not carry a bogus entry).
+    const voters = Array.isArray(option.voters) && userId != null
+      ? (isSelected ? [...option.voters, userId] : option.voters.filter((voter) => voter !== userId))
+      : option.voters;
+    return { ...option, vote_count: Math.max(0, (option.vote_count ?? option.voters?.length ?? 0) + delta), voters };
+  });
+  return { ...poll, options, voted_option_ids: nextSelectedIds };
+}
+
 /**
  * dcm's DRF validation errors aren't always {detail}: ConversationAttachmentView
  * translates a rejected upload into a field-keyed {"files": [...]} body (the
@@ -245,6 +269,10 @@ export function MessagingProvider({ children, filters = {}, activeConversationId
   const activeIdRef = useRef(activeConversationId);
   const seenEventsRef = useRef(new Set());
   const filtersRef = useRef(filters);
+  // Per-poll "latest tap wins" token: rapid successive taps race, and a stale
+  // response (revert on failure, or reconcile on success) must not clobber a
+  // newer optimistic state that has already superseded it.
+  const pollVoteTokensRef = useRef({});
   activeIdRef.current = activeConversationId;
   filtersRef.current = filters;
 
@@ -421,11 +449,38 @@ export function MessagingProvider({ children, filters = {}, activeConversationId
     return poll;
   }, [api, patchMessage]);
   const castPollVote = useCallback(async (messageId, poll, optionIds) => {
-    const result = await api.votePoll(poll.id, optionIds);
-    const nextPoll = { ...poll, ...(result?.poll || result) };
-    patchMessage({ ...(cache.messages[messageId] || { id: messageId }), poll: nextPoll });
-    return result;
-  }, [api, cache.messages, patchMessage]);
+    // Optimistic tap-to-vote (MSG-6g), following the same immediate-patch /
+    // reconcile-or-revert shape `toggleReaction` already uses. The previous poll
+    // (pre-tap) is captured up front so a failure can revert to it exactly, not to
+    // whatever `cache.messages` happens to hold when the error arrives.
+    const message = cache.messages[messageId] || { id: messageId };
+    const previousPoll = message.poll || poll;
+    // Project from `previousPoll` (the freshest known state in the shared cache),
+    // never from the caller-supplied `poll` param -- `PollCard` is a "dumb",
+    // prop-driven component that may still be holding the pre-first-tap `poll`
+    // it was originally passed when a second rapid tap fires, and projecting
+    // counts from that stale baseline would compute a wrong transient
+    // vote_count/voters in the SHARED cache (visible to every consumer, not
+    // just this component's own render).
+    const optimisticPoll = applyOptimisticVote(previousPoll, previousPoll.voted_option_ids, optionIds, user?.id);
+    const token = {};
+    pollVoteTokensRef.current[poll.id] = token;
+    patchMessage({ ...message, poll: optimisticPoll });
+    try {
+      const result = await api.votePoll(poll.id, optionIds);
+      // A newer tap already started (and will reconcile/revert for itself) --
+      // applying this now-stale response would stomp on it.
+      if (pollVoteTokensRef.current[poll.id] !== token) return result;
+      const nextPoll = { ...poll, ...(result?.poll || result) };
+      patchMessage({ ...(cache.messages[messageId] || { id: messageId }), poll: nextPoll });
+      return result;
+    } catch (error) {
+      if (pollVoteTokensRef.current[poll.id] === token) {
+        patchMessage({ ...(cache.messages[messageId] || { id: messageId }), poll: previousPoll });
+      }
+      throw error;
+    }
+  }, [api, cache.messages, patchMessage, user]);
   const closeConversationPoll = useCallback(async (messageId, poll) => {
     const result = await api.closePoll(poll.id);
     const nextPoll = { ...poll, ...(result?.poll || result), closed_at: result?.poll?.closed_at || result?.closed_at || new Date().toISOString() };

package/src/messaging/PollCard.jsx

@@ -1,10 +1,26 @@
-import { Alert, Button, Checkbox, FormControlLabel, Paper, Stack, Typography } from '@mui/material';
-import { useEffect, useState } from 'react';
+import LockOutlinedIcon from '@mui/icons-material/LockOutlined';
+import { Alert, Button, Checkbox, Chip, FormControlLabel, LinearProgress, Paper, Radio, RadioGroup, Stack, Typography } from '@mui/material';
+import { useEffect, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import { extractApiErrorMessage, useMessaging } from './MessagingProvider';
 
-/** Independently mountable live poll view. Server authorization remains authoritative. */
+/**
+ * Independently mountable live poll view. Server authorization remains authoritative.
+ *
+ * Tap-to-vote (MSG-6g): each option is its own control, cast immediately on tap — no
+ * separate submit step. Single-choice uses a real `RadioGroup` (native "tap a different
+ * option moves the vote, tap the same one is a no-op" semantics, plus the group's own
+ * arrow-key navigation and screen-reader group announcement — a bare ungrouped `Radio`
+ * per option, tried first, loses both); multi-select uses `Checkbox` (each tap
+ * independently toggles that option). `FormControlLabel` wraps each control, matching
+ * this repo's existing radio convention (`AuthFactorRequirementCard.jsx`) — clicking
+ * anywhere in the label natively activates the control, no manual click-handling needed.
+ * Every tap is optimistic (see `castPollVote` in `MessagingProvider`), dims while
+ * in flight (matching `ReactionBar`'s `pending` convention) so an optimistic vote is
+ * never visually indistinguishable from a confirmed one, and visibly reverts on a
+ * rejected vote.
+ */
 export function PollCard({ message, canClose: canCloseProp }) {
   const { t } = useTranslation();
   const { castPollVote, closeConversationPoll, currentUser } = useMessaging();
@@ -12,6 +28,10 @@ export function PollCard({ message, canClose: canCloseProp }) {
   const [selected, setSelected] = useState([]);
   const [error, setError] = useState(null);
   const [busy, setBusy] = useState(false);
+  const [pending, setPending] = useState(() => new Set());
+  // Guards a rejected vote's revert against a newer tap that has since
+  // superseded it -- see the matching token in MessagingProvider.castPollVote.
+  const voteTokenRef = useRef(null);
   // voted_option_ids is a view-level enrichment dcm adds ONLY to the
   // create/vote/close poll REST responses (serialize_poll itself, every
   // message-list/thread load, and every poll_updated realtime frame never
@@ -25,28 +45,92 @@ export function PollCard({ message, canClose: canCloseProp }) {
   const closed = Boolean(poll.closed_at);
   const creatorId = poll.created_by_id ?? poll.created_by?.id ?? poll.created_by;
   const canClose = canCloseProp ?? poll.can_close ?? message?.can_close ?? message?.permissions?.can_close ?? (creatorId != null && creatorId === currentUser?.id);
-  const changeSelection = (id) => setSelected((current) => poll.allow_multiple ? (current.includes(id) ? current.filter((value) => value !== id) : [...current, id]) : (current.includes(id) ? [] : [id]));
-  const vote = async () => {
-    if (!selected.length) { setError(t('MessagingPoll.SELECT_OPTION')); return; }
-    setBusy(true); setError(null);
-    try { await castPollVote(message.id, poll, selected); } catch (voteError) { setError(t('MessagingPoll.VOTE_ERROR', { message: extractApiErrorMessage(voteError) })); } finally { setBusy(false); }
+  const totalVotes = (poll.options || []).reduce((sum, option) => sum + (option.vote_count ?? option.voters?.length ?? 0), 0);
+
+  const tap = async (id) => {
+    if (closed) return;
+    const previousSelected = selected;
+    const nextSelected = poll.allow_multiple
+      ? (selected.includes(id) ? selected.filter((value) => value !== id) : [...selected, id])
+      : [id];
+    // Belt-and-suspenders: native radios already don't fire a change event
+    // when re-clicking the checked one, but this guards any caller shape.
+    if (nextSelected.length === previousSelected.length && nextSelected.every((value) => previousSelected.includes(value))) return;
+    const token = {};
+    voteTokenRef.current = token;
+    setSelected(nextSelected);
+    setError(null);
+    // Rapid re-taps are allowed and race deliberately (last write wins via
+    // the token above) -- `pending` is a visual signal only, never gates
+    // further taps, so it must not disable the control.
+    setPending((current) => new Set(current).add(id));
+    try {
+      await castPollVote(message.id, poll, nextSelected);
+    } catch (voteError) {
+      // A later tap already moved the selection on; a stale failure must not
+      // revert past it.
+      if (voteTokenRef.current === token) {
+        setSelected(previousSelected);
+        setError(t('MessagingPoll.VOTE_ERROR', { message: extractApiErrorMessage(voteError) }));
+      }
+    } finally {
+      setPending((current) => { const next = new Set(current); next.delete(id); return next; });
+    }
   };
   const close = async () => {
     setBusy(true); setError(null);
     try { await closeConversationPoll(message.id, poll); } catch (closeError) { setError(t('MessagingPoll.CLOSE_ERROR', { message: extractApiErrorMessage(closeError) })); } finally { setBusy(false); }
   };
-  return <Paper variant="outlined" sx={{ p: 1 }} aria-label={t('MessagingPoll.LABEL')}><Stack spacing={0.5}>
+
+  const optionLabel = (option) => {
+    // dcm's poll projection gives voter user ids only, never names — there
+    // is no user-directory endpoint (same structural limit already
+    // established for the DM candidate list).
+    const voteCount = option.vote_count ?? option.voters?.length ?? 0;
+    const percent = totalVotes > 0 ? Math.round((voteCount / totalVotes) * 100) : 0;
+    const votedByMe = selected.includes(option.id);
+    const resultText = t('MessagingPoll.OPTION_RESULT', { count: voteCount, percent });
+    // The bar is decorative; count/percent live in the accessible name (via
+    // aria-label on the control itself) as well as in adjacent visible text —
+    // width alone must never be the only signal (WO risk note).
+    const accessibleLabel = `${option.text || option.label}, ${resultText}${votedByMe ? `, ${t('MessagingPoll.YOU_VOTED')}` : ''}`;
+    const richLabel = <Stack sx={{ flex: 1, minWidth: 0, opacity: pending.has(option.id) ? 0.6 : 1 }} spacing={0.25}>
+      <Stack direction="row" justifyContent="space-between">
+        <Typography variant="body2" noWrap>{option.text || option.label}</Typography>
+        <Typography variant="caption" color="text.secondary">{resultText}</Typography>
+      </Stack>
+      <LinearProgress variant="determinate" value={percent} sx={{ borderRadius: 1, height: 6 }} color={votedByMe ? 'primary' : 'inherit'} />
+    </Stack>;
+    return { accessibleLabel, richLabel };
+  };
+  const formControlSx = { width: '100%', m: 0, alignItems: 'flex-start' };
+
+  return <Paper variant="outlined" sx={{ p: 1 }} aria-label={t('MessagingPoll.LABEL')}><Stack spacing={0.75}>
     <Typography variant="subtitle2">{poll.question}</Typography>
-    {(poll.options || []).map((option) => {
-      // dcm's poll projection gives voter user ids only, never names — there
-      // is no user-directory endpoint (same structural limit already
-      // established for the DM candidate list). A count is always correct;
-      // marking the viewer's own vote is derivable from voted_option_ids.
-      const votedByMe = Boolean(poll.voted_option_ids?.includes(option.id));
-      const voterCount = option.voters?.length ?? option.vote_count ?? option.votes_count ?? 0;
-      return <FormControlLabel key={option.id} disabled={closed || busy} control={<Checkbox checked={selected.includes(option.id)} onChange={() => changeSelection(option.id)} />} label={`${option.text || option.label} (${option.vote_count ?? voterCount ?? 0})${votedByMe ? ` — ${t('MessagingPoll.YOU_VOTED')}` : ''}`} />;
-    })}
+    {poll.allow_multiple
+      ? (poll.options || []).map((option) => {
+          const { accessibleLabel, richLabel } = optionLabel(option);
+          return <FormControlLabel key={option.id} disabled={closed} sx={formControlSx} label={richLabel}
+            control={<Checkbox checked={selected.includes(option.id)} inputProps={{ 'aria-label': accessibleLabel }} onChange={() => tap(option.id)} sx={{ pt: 0.25 }} />} />;
+        })
+      // No RadioGroup-level onChange: it would only ever hand back
+      // `event.target.value`, a DOM string -- coercing a non-string option id
+      // (dcm's are UUID strings today, but the id type isn't a guaranteed
+      // contract). `value` alone still drives each Radio's `checked` via the
+      // group's own comparison; each Radio's own `onChange` below fires
+      // `tap` with the option's real, correctly-typed id, matching the
+      // Checkbox branch above exactly.
+      : <RadioGroup value={selected[0] ?? ''} name={`poll-${poll.id}-options`}>
+          {(poll.options || []).map((option) => {
+            const { accessibleLabel, richLabel } = optionLabel(option);
+            return <FormControlLabel key={option.id} value={option.id} disabled={closed} sx={formControlSx} label={richLabel}
+              control={<Radio inputProps={{ 'aria-label': accessibleLabel }} onChange={() => tap(option.id)} sx={{ pt: 0.25 }} />} />;
+          })}
+        </RadioGroup>}
     {error && <Alert severity="error" role="alert">{error}</Alert>}
-    <Stack direction="row" spacing={1}><Button size="small" onClick={vote} disabled={closed || busy}>{t('MessagingPoll.VOTE')}</Button>{canClose && !closed && <Button size="small" color="warning" onClick={close} disabled={busy}>{t('MessagingPoll.CLOSE')}</Button>}{closed && <Typography variant="caption">{t('MessagingPoll.CLOSED')}</Typography>}</Stack>
+    <Stack direction="row" spacing={1} alignItems="center">
+      {canClose && !closed && <Button size="small" color="warning" onClick={close} disabled={busy}>{t('MessagingPoll.CLOSE')}</Button>}
+      {closed && <Chip size="small" icon={<LockOutlinedIcon fontSize="small" />} label={t('MessagingPoll.CLOSED')} />}
+    </Stack>
   </Stack></Paper>;
 }

package/tests/messagingInteractions.test.jsx

@@ -28,12 +28,19 @@ describe('messaging reactions and polls', () => {
     fireEvent.click(screen.getByRole('button', { name: 'MessagingReactions.TOGGLE' })); await waitFor(() => expect(api.removeReaction).toHaveBeenCalledWith(7, '👍'));
   });
 
-  it('uses single selection for a single poll and preserves selections for a multi poll', async () => {
+  it('taps vote immediately (no submit step): single-choice uses radios and only ever sends the last-tapped option, multi-select uses checkboxes and accumulates', async () => {
+    // MSG-6g: tap-to-vote, no separate "Abstimmen" button.
     const single = baseApi(); single.votePoll.mockResolvedValue({ poll: { id: 1, options: [] } });
     const { unmount } = render(<MessagingProvider api={single} active={false}><PollCard message={{ id: 7, poll: { id: 1, question: 'One', options: [{ id: 1, text: 'A' }, { id: 2, text: 'B' }], allow_multiple: false }}} /></MessagingProvider>);
-    const choices = screen.getAllByRole('checkbox'); fireEvent.click(choices[0]); fireEvent.click(choices[1]); fireEvent.click(screen.getByRole('button', { name: 'MessagingPoll.VOTE' })); await waitFor(() => expect(single.votePoll).toHaveBeenCalledWith(1, [2])); unmount();
+    const radios = screen.getAllByRole('radio');
+    fireEvent.click(radios[0]); await waitFor(() => expect(single.votePoll).toHaveBeenCalledWith(1, [1]));
+    fireEvent.click(radios[1]); await waitFor(() => expect(single.votePoll).toHaveBeenCalledWith(1, [2]));
+    expect(single.votePoll).toHaveBeenCalledTimes(2);
+    unmount();
     const multiple = baseApi(); multiple.votePoll.mockResolvedValue({ poll: { id: 2, options: [] } }); render(<MessagingProvider api={multiple} active={false}><PollCard message={{ id: 8, poll: { id: 2, question: 'Many', options: [{ id: 1, text: 'A' }, { id: 2, text: 'B' }], allow_multiple: true }}} /></MessagingProvider>);
-    const multiChoices = screen.getAllByRole('checkbox'); fireEvent.click(multiChoices[0]); fireEvent.click(multiChoices[1]); fireEvent.click(screen.getByRole('button', { name: 'MessagingPoll.VOTE' })); await waitFor(() => expect(multiple.votePoll).toHaveBeenCalledWith(2, [1, 2]));
+    const multiChoices = screen.getAllByRole('checkbox');
+    fireEvent.click(multiChoices[0]); await waitFor(() => expect(multiple.votePoll).toHaveBeenCalledWith(2, [1]));
+    fireEvent.click(multiChoices[1]); await waitFor(() => expect(multiple.votePoll).toHaveBeenCalledWith(2, [1, 2]));
   });
 
   it('only exposes close to the creator/capability and surfaces a forbidden close', async () => {

package/tests/messagingMsg6g.test.jsx

@@ -0,0 +1,166 @@
+// @vitest-environment jsdom
+import React from 'react';
+import { afterEach, describe, expect, it, vi } from 'vitest';
+import { cleanup, fireEvent, render, screen, waitFor } from '@testing-library/react';
+
+vi.mock('react-i18next', () => ({ useTranslation: () => ({ t: (key, options) => options && Object.keys(options).length ? `${key}:${JSON.stringify(options)}` : key }) }));
+
+const realtimeSubscribers = new Map();
+vi.mock('../src/notifications/realtime', () => ({
+  useRealtime: () => ({
+    subscribe: (envelope, handler) => { realtimeSubscribers.set(envelope, handler); return () => realtimeSubscribers.delete(envelope); },
+    onReconnect: () => () => {},
+  }),
+}));
+function dispatchMessagingFrame(frame) { realtimeSubscribers.get('messaging')?.(frame); }
+
+import { PollCard } from '../src/messaging/PollCard';
+import { MessagingProvider, useMessaging } from '../src/messaging/MessagingProvider';
+
+function baseApi(overrides = {}) {
+  return {
+    listConversations: vi.fn().mockResolvedValue({ results: [] }), listMessages: vi.fn().mockResolvedValue({ results: [] }),
+    getUnreadCount: vi.fn().mockResolvedValue({ unread_count: 0, by_conversation: {} }),
+    votePoll: vi.fn(), closePoll: vi.fn(),
+    ...overrides,
+  };
+}
+function serverPoll(overrides = {}) {
+  return {
+    id: 'poll-1', question: 'Q', allow_multiple: false, closed_at: null, created_by_id: 'user-9',
+    options: [
+      { id: 'opt-a', text: 'A', order: 0, vote_count: 0, voters: [] },
+      { id: 'opt-b', text: 'B', order: 1, vote_count: 0, voters: [] },
+    ],
+    ...overrides,
+  };
+}
+function ConnectedPollCard({ messageId }) {
+  const { cache } = useMessaging();
+  return <PollCard message={cache.messages[messageId]} />;
+}
+function CachePollState({ messageId }) {
+  const { cache } = useMessaging();
+  return <output data-testid="cache-poll">{JSON.stringify(cache.messages[messageId]?.poll)}</output>;
+}
+
+afterEach(() => { cleanup(); realtimeSubscribers.clear(); });
+
+describe('MSG-6g: tap-to-vote poll UI with result bars', () => {
+  it('1. single-choice: tapping an option votes without further interaction; tapping a second option moves the vote', async () => {
+    const api = baseApi();
+    api.votePoll.mockResolvedValueOnce({ poll: { ...serverPoll(), voted_option_ids: ['opt-a'], options: [{ id: 'opt-a', text: 'A', order: 0, vote_count: 1, voters: ['me'] }, { id: 'opt-b', text: 'B', order: 1, vote_count: 0, voters: [] }] } });
+    api.votePoll.mockResolvedValueOnce({ poll: { ...serverPoll(), voted_option_ids: ['opt-b'], options: [{ id: 'opt-a', text: 'A', order: 0, vote_count: 0, voters: [] }, { id: 'opt-b', text: 'B', order: 1, vote_count: 1, voters: ['me'] }] } });
+    render(<MessagingProvider api={api} active={false}><PollCard message={{ id: 'msg-1', poll: serverPoll() }} /></MessagingProvider>);
+    const radios = screen.getAllByRole('radio');
+
+    fireEvent.click(radios[0]);
+    await waitFor(() => expect(api.votePoll).toHaveBeenCalledWith('poll-1', ['opt-a']));
+    expect(radios[0].checked).toBe(true);
+
+    fireEvent.click(radios[1]);
+    await waitFor(() => expect(api.votePoll).toHaveBeenCalledWith('poll-1', ['opt-b']));
+    await waitFor(() => expect(radios[1].checked).toBe(true));
+    expect(radios[0].checked).toBe(false);
+  });
+
+  it('2. multi-select: tapping toggles one option on and off, and each tap sends the complete option-id set', async () => {
+    const api = baseApi();
+    api.votePoll.mockResolvedValue({ poll: serverPoll({ allow_multiple: true }) });
+    render(<MessagingProvider api={api} active={false}><PollCard message={{ id: 'msg-1', poll: serverPoll({ allow_multiple: true }) }} /></MessagingProvider>);
+    const checkboxes = screen.getAllByRole('checkbox');
+
+    fireEvent.click(checkboxes[0]);
+    await waitFor(() => expect(api.votePoll).toHaveBeenCalledWith('poll-1', ['opt-a']));
+    fireEvent.click(checkboxes[1]);
+    await waitFor(() => expect(api.votePoll).toHaveBeenCalledWith('poll-1', ['opt-a', 'opt-b']));
+    fireEvent.click(checkboxes[0]);
+    await waitFor(() => expect(api.votePoll).toHaveBeenCalledWith('poll-1', ['opt-b']));
+    expect(api.votePoll).toHaveBeenCalledTimes(3);
+  });
+
+  it('3. a rejected vote reverts the optimistic state and surfaces an error -- the reverted value, not merely an error message', async () => {
+    const api = baseApi();
+    api.votePoll.mockRejectedValue({ response: { data: { detail: 'Voting disabled' } } });
+    render(<MessagingProvider api={api} active={false}><PollCard message={{ id: 'msg-1', poll: serverPoll() }} /></MessagingProvider>);
+    const radios = screen.getAllByRole('radio');
+
+    fireEvent.click(radios[0]);
+    // Optimistic: briefly checked before the rejection resolves.
+    await waitFor(() => expect(radios[0].checked).toBe(true));
+    await screen.findByRole('alert');
+    await waitFor(() => expect(radios[0].checked).toBe(false));
+    expect(radios[1].checked).toBe(false);
+  });
+
+  it('4. bars render proportionally, including the zero-vote case, with no NaN and no division error', () => {
+    render(<MessagingProvider api={baseApi()} active={false}><PollCard message={{ id: 'msg-1', poll: serverPoll() }} /></MessagingProvider>);
+    // vote_count 0/0 for both options -> 0%, never NaN%.
+    const results = screen.getAllByText(/MessagingPoll\.OPTION_RESULT/);
+    expect(results).toHaveLength(2);
+    results.forEach((node) => {
+      expect(node.textContent).toMatch(/"count":0/);
+      expect(node.textContent).toMatch(/"percent":0/);
+      expect(node.textContent).not.toMatch(/NaN/);
+    });
+  });
+
+  it('5. the viewer\'s own selection survives a poll_updated frame that does not carry voted_option_ids (merge-trap guard)', async () => {
+    const api = baseApi();
+    render(<MessagingProvider api={api} active={false}><ConnectedPollCard messageId="msg-1" /></MessagingProvider>);
+    dispatchMessagingFrame({ envelope: 'messaging', type: 'message', event_id: 'seed', conversation_id: 'conv-1', message: { id: 'msg-1', conversation_id: 'conv-1', kind: 'poll', poll: serverPoll({ voted_option_ids: ['opt-a'], options: [{ id: 'opt-a', text: 'A', order: 0, vote_count: 1, voters: ['me'] }, { id: 'opt-b', text: 'B', order: 1, vote_count: 0, voters: [] }] }) } });
+    await waitFor(() => expect(screen.getAllByRole('radio')[0].checked).toBe(true));
+
+    // A poll_updated frame never carries voted_option_ids (dcm's serialize_poll
+    // is viewer-independent) -- must not wipe the REST-known selection.
+    dispatchMessagingFrame({
+      envelope: 'messaging', type: 'poll_updated', event_id: 'evt-1', conversation_id: 'conv-1', message_id: 'msg-1', poll_id: 'poll-1',
+      poll: serverPoll({ options: [{ id: 'opt-a', text: 'A', order: 0, vote_count: 2, voters: ['me', 'other'] }, { id: 'opt-b', text: 'B', order: 1, vote_count: 0, voters: [] }] }),
+    });
+    await waitFor(() => expect(screen.getByText(/MessagingPoll\.OPTION_RESULT.*"count":2/)).toBeTruthy());
+    expect(screen.getAllByRole('radio')[0].checked).toBe(true);
+  });
+
+  it('6. a closed poll is non-interactive: tapping an option does nothing and issues no request', () => {
+    const api = baseApi();
+    render(<MessagingProvider api={api} active={false}><PollCard message={{ id: 'msg-1', poll: serverPoll({ closed_at: '2026-08-01T00:00:00Z' }) }} /></MessagingProvider>);
+    const radios = screen.getAllByRole('radio');
+    fireEvent.click(radios[0]);
+    expect(api.votePoll).not.toHaveBeenCalled();
+    expect(radios[0].checked).toBe(false);
+  });
+
+  it('a rapid switch (A then B, before the first vote confirms) projects counts from the freshest cache state, not a stale prop (regression)', async () => {
+    // MessagingProvider.castPollVote must build its optimistic count delta from
+    // `previousPoll` (freshly read from the shared cache at call time), never
+    // from the caller-supplied `poll` argument. PollCard is deliberately given
+    // a STATIC message prop here (never re-rendered with a fresh one between
+    // taps, exactly like PollCard's own documented "dumb, prop-driven"
+    // contract, and exactly how a host that doesn't re-connect it to live
+    // cache updates would behave) -- a separate, genuinely cache-connected
+    // reader (CachePollState) is what must show the correct number. Starting
+    // counts are non-zero so a wrong baseline isn't masked by the
+    // Math.max(0, ...) clamp.
+    const api = baseApi();
+    api.votePoll.mockReturnValue(new Promise(() => {})); // never resolves -- isolate the optimistic phase
+    const seedPoll = serverPoll({
+      voted_option_ids: [],
+      options: [
+        { id: 'opt-a', text: 'A', order: 0, vote_count: 5, voters: ['u1', 'u2', 'u3', 'u4', 'u5'] },
+        { id: 'opt-b', text: 'B', order: 1, vote_count: 2, voters: ['u6', 'u7'] },
+      ],
+    });
+    render(<MessagingProvider api={api} active={false}><PollCard message={{ id: 'msg-1', poll: seedPoll }} /><CachePollState messageId="msg-1" /></MessagingProvider>);
+    const radios = screen.getAllByRole('radio');
+
+    fireEvent.click(radios[0]); // vote A: 5 -> 6
+    await waitFor(() => expect(JSON.parse(screen.getByTestId('cache-poll').textContent).options.find((option) => option.id === 'opt-a').vote_count).toBe(6));
+
+    fireEvent.click(radios[1]); // switch to B: A must go 6 -> 5 in the shared cache (a stale-prop baseline of 5 would wrongly compute 4)
+    await waitFor(() => {
+      const poll = JSON.parse(screen.getByTestId('cache-poll').textContent);
+      expect(poll.options.find((option) => option.id === 'opt-a').vote_count).toBe(5);
+      expect(poll.options.find((option) => option.id === 'opt-b').vote_count).toBe(3);
+    });
+  });
+});

package/tests/messagingPollRendering.test.jsx

@@ -3,7 +3,7 @@ import React from 'react';
 import { afterEach, describe, expect, it, vi } from 'vitest';
 import { cleanup, fireEvent, render, screen, waitFor } from '@testing-library/react';
 
-vi.mock('react-i18next', () => ({ useTranslation: () => ({ t: (key, options) => options?.message ? `${key}:${options.message}` : key }) }));
+vi.mock('react-i18next', () => ({ useTranslation: () => ({ t: (key, options) => options && Object.keys(options).length ? `${key}:${JSON.stringify(options)}` : key }) }));
 
 const realtimeSubscribers = new Map();
 vi.mock('../src/notifications/realtime', () => ({
@@ -55,20 +55,29 @@ function ConnectedPollCard({ messageId }) {
 afterEach(() => { cleanup(); realtimeSubscribers.clear(); });
 
 describe('poll rendering against the real server contract', () => {
-  it('renders question, options, vote counts and per-option voters from a server-shaped payload', () => {
+  it('renders question, options and proportional vote counts from a server-shaped payload', () => {
+    // totalVotes = 2 + 1 = 3 -> Library 67%, Cafe 33%.
     render(<MessagingProvider api={baseApi()} active={false}><PollCard message={{ id: 'msg-1', poll: serverPoll() }} /></MessagingProvider>);
     expect(screen.getByText('Where should we meet?')).toBeTruthy();
-    expect(screen.getByText(/Library \(2\)/)).toBeTruthy();
-    expect(screen.getByText(/Cafe \(1\)/)).toBeTruthy();
+    expect(screen.getByText('Library')).toBeTruthy();
+    expect(screen.getByText(/MessagingPoll\.OPTION_RESULT.*"count":2.*"percent":67/)).toBeTruthy();
+    expect(screen.getByText('Cafe')).toBeTruthy();
+    expect(screen.getByText(/MessagingPoll\.OPTION_RESULT.*"count":1.*"percent":33/)).toBeTruthy();
   });
 
   it('derives selection from voted_option_ids (REST-only) and marks the viewer\'s own vote', () => {
+    // Single-choice (allow_multiple: false) renders radios, not checkboxes --
+    // native radio semantics match the WO's "tapping a different option moves
+    // the vote, tapping the same one is a no-op" design directly.
     const poll = serverPoll({ voted_option_ids: ['opt-a'] });
     render(<MessagingProvider api={baseApi()} active={false}><PollCard message={{ id: 'msg-1', poll }} /></MessagingProvider>);
-    const checkboxes = screen.getAllByRole('checkbox');
-    expect(checkboxes[0].checked).toBe(true);
-    expect(checkboxes[1].checked).toBe(false);
-    expect(screen.getByText(/Library.*MessagingPoll\.YOU_VOTED/)).toBeTruthy();
+    const radios = screen.getAllByRole('radio');
+    expect(radios[0].checked).toBe(true);
+    expect(radios[1].checked).toBe(false);
+    // Count/percent and the viewer's own vote both live in the accessible
+    // name, not conveyed by the bar's width alone (WO accessibility risk).
+    expect(radios[0].getAttribute('aria-label')).toMatch(/Library.*MessagingPoll\.OPTION_RESULT.*MessagingPoll\.YOU_VOTED/);
+    expect(radios[1].getAttribute('aria-label')).not.toMatch(/YOU_VOTED/);
   });
 
   it('does not clear or invert the viewer\'s own vote when a poll_updated frame carries no voted_option_ids', async () => {
@@ -80,7 +89,7 @@ describe('poll rendering against the real server contract', () => {
     // own castPollVote reconciliation would leave it — not a static prop the
     // component can never observe a later frame update against.
     dispatchMessagingFrame({ envelope: 'messaging', type: 'message', event_id: 'seed', conversation_id: 'conv-1', message: { id: 'msg-1', conversation_id: 'conv-1', kind: 'poll', poll: votedPoll } });
-    await waitFor(() => expect(screen.getAllByRole('checkbox')[0].checked).toBe(true));
+    await waitFor(() => expect(screen.getAllByRole('radio')[0].checked).toBe(true));
     // The real poll_updated frame shape: payload.poll is a bare serialize_poll
     // result (verified against services.py's _poll_updated_payload) — never
     // carries voted_option_ids. A vote_count bump from another viewer must
@@ -89,10 +98,10 @@ describe('poll rendering against the real server contract', () => {
       envelope: 'messaging', type: 'poll_updated', event_id: 'evt-1', conversation_id: 'conv-1', message_id: 'msg-1', poll_id: 'poll-1',
       poll: { ...serverPoll(), options: [{ id: 'opt-a', text: 'Library', order: 0, vote_count: 3, voters: ['user-1', 'user-2', 'user-4'] }, { id: 'opt-b', text: 'Cafe', order: 1, vote_count: 1, voters: ['user-3'] }] },
     });
-    await waitFor(() => expect(screen.getByText(/Library \(3\)/)).toBeTruthy());
+    await waitFor(() => expect(screen.getByText(/MessagingPoll\.OPTION_RESULT.*"count":3/)).toBeTruthy());
     // The frame carries no voted_option_ids at all — the viewer's REST-known
     // vote must be carried forward, not wiped, by this update.
-    expect(screen.getAllByRole('checkbox')[0].checked).toBe(true);
+    expect(screen.getAllByRole('radio')[0].checked).toBe(true);
   });
 
   it('grants close only to the poll creator (created_by_id) or a host override, never a guess from an object shape', () => {
@@ -105,11 +114,12 @@ describe('poll rendering against the real server contract', () => {
     expect(screen.getByRole('button', { name: 'MessagingPoll.CLOSE' })).toBeTruthy();
   });
 
-  it('disables voting once the poll is closed', () => {
+  it('disables voting once the poll is closed and shows a closed indicator, not merely a missing button', () => {
+    // With no separate submit button (MSG-6g), "closed" can no longer be
+    // inferred from its absence -- must be an explicit, visible indicator.
     const poll = serverPoll({ closed_at: '2026-07-31T10:00:00Z' });
     render(<MessagingProvider api={baseApi()} active={false}><PollCard message={{ id: 'msg-1', poll }} /></MessagingProvider>);
-    screen.getAllByRole('checkbox').forEach((checkbox) => expect(checkbox.disabled).toBe(true));
-    expect(screen.getByRole('button', { name: 'MessagingPoll.VOTE' }).disabled).toBe(true);
+    screen.getAllByRole('radio').forEach((radio) => expect(radio.disabled).toBe(true));
     expect(screen.getByText('MessagingPoll.CLOSED')).toBeTruthy();
   });
 });

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

@@ -0,0 +1,244 @@
+# WORK ORDER MSG-6g (ui-core-micha) — poll UI: tap-to-vote with result bars, no separate vote button
+
+**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 request 2026-08-03: *"bei der Abstimmung wäre es
+schön, wenn es ähnlicher wie WhatsApp mit dem Balken sowie ohne Abstimmungsbutton möglich wäre."*
+
+This is a **UX improvement, not a defect** — the current poll works. It is scoped separately so it never
+blocks the messaging defect WOs.
+
+## TIER
+Tier 2 — shared-core UI consumed by every app. Independent `reviewer` + `ui_reviewer` mandatory.
+
+## CURRENT STATE
+
+`PollCard.jsx` renders each option as a MUI `FormControlLabel` with a `Checkbox` (multi-select) or radio,
+labelled `"<text> (<vote_count>)"`, plus a separate **"Abstimmen"** submit button and a
+**"Umfrage schliessen"** action for the owner. Voting is therefore a two-step interaction — select, then
+submit — and the result is a bare number in parentheses.
+
+## GOAL
+
+Voting is one tap on the option itself, and the distribution is readable at a glance from proportional
+bars rather than parenthesised counts.
+
+## SCOPE
+
+**A. Tap-to-vote — remove the separate submit button.**
+
+- **Single-choice poll** (`allow_multiple: false`): tapping an option casts the vote immediately.
+  Tapping a different option moves the vote. The "Abstimmen" button goes away entirely.
+- **Multi-select poll** (`allow_multiple: true`): tapping an option toggles that option immediately —
+  each tap is its own vote update, not a batched submit. **Confirm dcm's vote endpoint accepts the full
+  option-id set per call** (it takes `option_ids`, so a toggle sends the new complete set, not a delta);
+  if it does not, stop and report rather than inventing a delta protocol.
+- Every tap is an optimistic UI update reconciled against the server response, following the pattern
+  `MessagingProvider` already uses for sends. **A failed vote must visibly revert** — a silently
+  swallowed failure that leaves the bar showing a vote nobody recorded is worse than the current
+  two-step flow.
+- Keep "Umfrage schliessen" — that is an owner action, not part of voting.
+
+**B. Result bars.**
+
+- Each option shows a horizontal proportional bar plus its count and percentage, in place of the
+  `(<n>)` suffix.
+- The viewer's own choice(s) are visually marked. `voted_option_ids` already exists for this and is
+  carried in the REST vote/create/close response — note the standing constraint documented in
+  `MessagingProvider.jsx`: it is **viewer-specific and never present on a `poll_updated` frame**, so
+  frame handling must not wipe a locally-known selection. Do not regress that; it was a deliberate fix.
+- Denominator: total votes cast, not participant count. A poll's turnout relative to group size is a
+  different question and is **not** in scope.
+- Percentages must not mislead at zero votes — define and implement the zero-vote rendering explicitly
+  rather than letting a division produce `NaN`.
+
+**C. Closed polls.** A closed poll shows final bars and is not interactive. Verify the closed state is
+visually unmistakable — with the submit button gone, "closed" can no longer be inferred from a missing
+button.
+
+## NON-GOALS / DO NOT TOUCH
+- No backend change. If a scope-A requirement appears to need one, stop and report — that is a dcm WO.
+- Do not change `voted_option_ids` handling in `applyFrame` beyond what B needs to read it (see the
+  merge-trap note above).
+- Do not add a "who voted for what" disclosure. Per-voter visibility is a privacy decision nobody has
+  taken, and the existing `voters` data in `serialize_poll` is not licence to surface it.
+- Do not change poll creation (`Composer`'s dialog) — this WO is the display and voting surface only.
+- Do not touch `ReadTicks`, conversation titles, or anything in the MSG-6f scope.
+
+## RISKS
+- **Tap-to-vote removes the "are you sure" step.** On a phone a mis-tap now votes. Mitigate by making
+  the vote reversible (tap again / tap another) and by ensuring the optimistic state is obviously
+  distinct from the confirmed state; do not add a confirmation dialog, which would reinstate the
+  two-step flow this WO removes.
+- Rapid successive taps race. The last write must win deterministically — state how (request ordering,
+  or discard stale responses by comparing against the latest local intent).
+- Accessibility: an option becomes an interactive control with a name, a pressed/checked state and
+  keyboard operability. Bars are decorative; the count and percentage must be in the accessible name or
+  adjacent text, not conveyed by width alone. `ui_reviewer` should check this specifically.
+- Every host app inherits the new interaction — a visible behaviour change beyond jg-ferien.
+
+## REQUIRED TESTS TO WRITE
+Narrow and behavioural. Do NOT run the full suite.
+
+1. Single-choice: tapping an option votes without any further interaction; tapping a second option
+   moves the vote (the first is no longer selected, the counts reflect it).
+2. Multi-select: tapping toggles one option on and off, and each tap sends the complete option-id set.
+3. A rejected vote reverts the optimistic state and surfaces an error — assert the bar returns to its
+   prior value, not merely that an error appeared.
+4. Bars render proportionally, including the **zero-vote** case, with no `NaN` and no division error.
+5. The viewer's own selection survives a `poll_updated` frame that does not carry `voted_option_ids`
+   (the documented merge trap — this must not regress).
+6. A closed poll is non-interactive: tapping an option does nothing and issues no request.
+
+**Non-vacuity:** test 5 must fail if the merge-trap guard is removed. Test 3 must assert the reverted
+value, not the presence of an error message.
+
+## TEST SCOPE FOR THE GATE (orchestrator)
+`PollCard` and its neighbours in the messaging test files. Not the full suite.
+
+## TARGET REPO
+`C:\Users\biglmi\Documents\webapps\ui-core-micha`. Branch `main` (or `develop` if present). Publish per
+the repo's release flow; the consuming pin bump is a separate step.
+
+## MINI-HANDOVER (pastable)
+
+> Repo: `C:\Users\biglmi\Documents\webapps\ui-core-micha` (branch `main`, or `develop` if present).
+> Work order: `work-orders/MSG-6g.md` — read it fully, then follow the `orchestrate-codex` skill.
+>
+> **UX improvement, not a defect — this blocks nothing and is blocked by nothing.** Do not let it hold
+> up the messaging defect WOs (dcm MSG-10, ucm MSG-6f).
+>
+> Frontend only: no backend change is in scope. If tap-to-vote appears to need one, stop and report.
+> Two things that are easy to break and are called out in the WO: a failed vote must visibly revert
+> (not fail silently), and the viewer's `voted_option_ids` must survive a `poll_updated` frame that
+> does not carry it — that merge-trap guard was a deliberate earlier fix and test 5 pins it.
+
+## 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.**
+
+### Blocker found and resolved before implementation
+
+Line 38-40's own contingency ("confirm dcm's vote endpoint accepts the full option-id set
+per call... if it does not, stop and report") fired for real: `vote_poll` (dcm
+`services.py:247-259`) only cleared prior votes for single-choice polls; multi-select only
+ever `bulk_create`d, so a smaller `option_ids` set never retracted an omitted vote —
+untoggling was silently a no-op. Reported to the operator, who confirmed fixing it
+directly in dcm rather than working around it client-side. Fixed and published as dcm
+`2.40.1` — see dcm `work-orders/MSG-11.md`. `option_ids` is now authoritative (delete
+anything no longer in the set, then re-create the requested set) for both poll kinds.
+
+### Files changed
+
+- `src/messaging/MessagingProvider.jsx`:
+  - New module-level `applyOptimisticVote(poll, previousSelectedIds, nextSelectedIds, userId)`
+    — adjusts only the options whose membership in the vote actually changed (count +/-1,
+    `voters` array +/- the acting user), leaves everything else untouched.
+  - New `pollVoteTokensRef` (per-poll "latest tap wins" token) alongside the existing
+    `activeIdRef`/`seenEventsRef`/`filtersRef`.
+  - `castPollVote(messageId, poll, optionIds)` rewritten: captures `previousPoll` from
+    `cache.messages[messageId].poll` (falling back to the `poll` param), patches the
+    optimistic projection into the cache immediately (same `patchMessage` shape
+    `toggleReaction` already uses), then on success reconciles with the server's poll, on
+    failure reverts to `previousPoll` — both guarded by the token so a stale response from
+    a since-superseded tap can't stomp a newer one.
+- `src/messaging/PollCard.jsx`: full rewrite.
+  - Single-choice (`allow_multiple: false`) → `Radio` per option (native "tap a different
+    option moves the vote, tap the same one is a no-op" semantics — matches the WO's
+    stated design directly, no extra toggle-off logic needed).
+  - Multi-select → `Checkbox` per option (existing toggle semantics preserved).
+  - Whole-option-row tap target (`Box onClick`, `stopPropagation` on the control's own
+    `onClick` to avoid a double-fire) — WhatsApp-style, matches the operator's own framing.
+  - `LinearProgress` bar + `{{count}} ({{percent}}%)` (`MessagingPoll.OPTION_RESULT`, new
+    key) next to each option; `percent = totalVotes > 0 ? round(count/totalVotes*100) : 0`
+    — never `NaN`.
+  - Accessible name (`aria-label` on the control) carries option text + result text +
+    "you voted" — never width-only.
+  - Closed state: `Chip` with a lock icon + `MessagingPoll.CLOSED`, replacing the old
+    caption-only text (now the *only* closed signal, since the submit button is gone).
+  - Local `selected` state + a `voteTokenRef` mirror the provider's own token guard, since
+    `PollCard` is a "dumb" prop-driven component (documented in
+    `tests/messagingPollRendering.test.jsx`) — a rejected vote must revert visibly even
+    when the host never re-passes a fresh `message` prop from its own cache.
+  - Removed: the "Abstimmen" submit button and its `SELECT_OPTION` validation entirely.
+- `src/i18n/messagingTranslations.ts`: removed now-orphaned `MessagingPoll.VOTE` and
+  `MessagingPoll.SELECT_OPTION`; added `MessagingPoll.OPTION_RESULT`.
+
+### Tests
+
+- `tests/messagingMsg6g.test.jsx` (new) — the 6 WO-required cases verbatim.
+- `tests/messagingPollRendering.test.jsx` — updated for radio (not checkbox) on
+  single-choice, the new label/aria-label shape, and the closed-chip instead of a
+  disabled button; its `t` mock upgraded to interpolate `{{count}}`/`{{percent}}` (was
+  bare-key-only, insufficient to assert rendered numbers).
+  `tests/messagingInteractions.test.jsx`'s poll test rewritten for tap-to-vote (no submit
+  click). `tests/messagingCompactBubble.test.jsx`'s poll smoke test needed no change
+  (empty `options: []`, no control interaction).
+
+### Verification
+Full suite 234 → 240, `tsc` clean (pre-review).
+
+### Independent review: `reviewer` + `ui_reviewer`, both mandatory (author = Orchestrator, not Codex)
+
+**`reviewer` — 3 findings, all fixed:**
+- **R1 (P1, real bug):** `castPollVote`'s optimistic count projection was built from the
+  caller-supplied `poll` argument, not from `previousPoll` (the value already freshly read
+  from `cache.messages[messageId].poll` two lines above, and correctly used as the revert
+  target on failure). For a second rapid tap (e.g. switching a single-choice vote A→B)
+  where the caller's `poll` reference hadn't yet been refreshed — exactly how `PollCard`
+  is documented to behave, a "dumb" prop-driven component — the count math computed
+  against the stale pre-first-tap baseline, landing a silently wrong transient
+  `vote_count` in the **shared cache** (not just local render state) until the server's
+  response eventually reconciled it away. Fixed: project from `previousPoll`. Verified
+  non-vacuous: reverted the fix, confirmed the new regression test below fails with the
+  exact predicted wrong number (4 instead of 5), then restored it.
+- **R2 (P2, coverage gap):** no test asserted vote-count values across a multi-tap
+  sequence with non-zero starting counts — the zero-vote fixtures used elsewhere
+  happened to mask R1 via the `Math.max(0, ...)` clamp. Closed by a new
+  `messagingMsg6g.test.jsx` case using non-zero seed counts (5/2) and a genuinely
+  cache-connected reader alongside a *statically-propped* `PollCard` (the scenario that
+  actually reproduces the staleness, per R1's own trace — a cache-connected `PollCard`
+  re-renders with a fresh `poll` prop between taps and would not have caught this).
+- **R3 (P3):** `applyOptimisticVote` could push a literal `undefined` into an option's
+  `voters` array when `user?.id` is momentarily unset (`AuthContext` not yet populated).
+  Fixed with a `userId != null` guard.
+
+**`ui_reviewer` — 2 findings, both fixed:**
+- **U1 (P2):** no visual distinction between an in-flight optimistic vote and a
+  server-confirmed one, contradicting the WO's own risk-mitigation requirement. Fixed by
+  reusing `ReactionBar.jsx`'s established `pending` Set convention — dims the tapped
+  option's bar/text while its request is in flight, but (unlike `ReactionBar`) does
+  **not** disable the control, since the WO explicitly requires rapid re-taps to remain
+  possible and race deterministically (last-write-wins via the token guard), not be
+  blocked.
+- **U2 (P2):** single-choice rendered bare, ungrouped `Radio` controls — no `RadioGroup`,
+  no shared `name`. Diverged from this repo's own established radio idiom
+  (`AuthFactorRequirementCard.jsx`'s `RadioGroup` + `FormControlLabel`) and lost native
+  arrow-key navigation between options plus the screen-reader group announcement. Fixed
+  by wrapping single-choice options in a real `RadioGroup`; multi-select's `Checkbox`
+  options are unaffected (no equivalent ARIA grouping concept applies). Switching to
+  `FormControlLabel` for both control types also let the manual `Box onClick` +
+  `stopPropagation()` whole-row-tap hack be removed entirely — `FormControlLabel`'s own
+  `<label>` wrapping already makes the whole row natively clickable.
+- Found and fixed while addressing U2, not itself a reviewer finding: `RadioGroup`'s own
+  `onChange` only ever hands back `event.target.value`, a DOM string, which would coerce
+  a non-string option id (dcm's are UUID strings today, but the type isn't a guaranteed
+  contract) — caught by `tests/messagingInteractions.test.jsx`'s existing numeric-id
+  fixture failing after the `RadioGroup` change. Fixed by keeping each `Radio`'s own
+  `onChange` (closure-typed, matching the `Checkbox` branch) instead of relying on the
+  group-level handler.
+
+Re-verified after all fixes: full suite 234 → **241** (7 new: 6 WO-required cases +
+1 R1/R2 regression), `tsc` clean.