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

package/WORK_ORDERS.md

@@ -38,3 +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 | 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

@@ -55,7 +55,8 @@ export const messagingTranslations = {
     'MessagingDirect.CANCEL': { de: 'Abbrechen', en: 'Cancel', fr: 'Annuler' },
     'MessagingDirect.START_ERROR': { de: 'Direktnachricht konnte nicht gestartet werden.', en: 'Direct message could not be started.', fr: 'Impossible de démarrer le message direct.' },
     'MessagingReadTicks.ALL_READ': { de: 'Von allen gelesen', en: 'Read by everyone', fr: 'Lu par tout le monde' },
-    'MessagingReadTicks.DELIVERED': { de: 'Zugestellt an {{count}}', en: 'Delivered to {{count}}', fr: 'Distribué à {{count}}' },
+    'MessagingReadTicks.SENT': { de: 'Gesendet', en: 'Sent', fr: 'Envoyé' },
+    'MessagingReadTicks.READ_RATIO': { de: '{{read}} von {{total}} gelesen', en: '{{read}} of {{total}} read', fr: '{{read}} sur {{total}} lu(s)' },
     'MessagingReadTicks.RECIPIENTS': { de: 'Lesebestätigungen', en: 'Read recipients', fr: 'Destinataires lus' },
     'MessagingComposer.LABEL': { de: 'Nachricht verfassen', en: 'Compose message', fr: 'Rédiger un message' },
     'MessagingComposer.MESSAGE': { de: 'Nachricht', en: 'Message', fr: 'Message' },
@@ -75,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/ConversationList.js

@@ -15,7 +15,14 @@ import { ConversationLaunchers } from './ConversationLaunchers';
 // like a managed conversation's label above.
 function titleOf(conversation, t, resolveManagedLabel, resolveDirectUserName) {
     var _a, _b;
-    if (conversation.kind === 'managed' && resolveManagedLabel) {
+    // Not gated on kind === 'managed': a host resolver already returns null to
+    // mean "I have no label for this conversation" (the delegation contract
+    // this comment block describes above), so gating here duplicated a
+    // decision that belongs to the host and silently made the resolver
+    // unreachable for any kind the host later decided to label (found live:
+    // jg-ferien's resolver was taught to handle 'broadcast' too, but never got
+    // a chance to run because this gate excluded it).
+    if (resolveManagedLabel) {
         const label = resolveManagedLabel(conversation);
         if (label)
             return label;

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/dist/messaging/ReadTicks.js

@@ -1,11 +1,31 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsxs as _jsxs, jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
 import DoneAllOutlinedIcon from '@mui/icons-material/DoneAllOutlined';
 import DoneOutlinedIcon from '@mui/icons-material/DoneOutlined';
-import { ButtonBase, List, ListItem, Popover } from '@mui/material';
+import { ButtonBase, List, ListItem, Popover, Typography } from '@mui/material';
 import { useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useMessaging } from './MessagingProvider';
-/** Renders only the aggregate receipt unless the server explicitly supplies permitted detail. */
+// Explicit tokens, not `inherit`/`primary` -- `inherit` inside the message
+// meta Stack resolved to `text.disabled`, which read too close to the "read"
+// state at the rendered 1rem icon size. The icon shape (Done vs DoneAll)
+// already differs, so the colour distinction is a second, independent signal
+// rather than the only one.
+const DM_SENT_COLOR = 'grey.500';
+const DM_READ_COLOR = 'primary.main';
+/**
+ * Shape-driven, no client-side role/permission branching: dcm only ever
+ * includes `read_count`/`recipient_count` inside the same `read_receipt_detail`-
+ * gated block as `recipient_detail`, and never for a `direct` conversation
+ * (the DM privacy carve-out). So "counts present" already means "team member,
+ * non-direct" -- checking anything else here would re-implement a decision
+ * dcm's response shape already makes.
+ *
+ * - counts present -> a read ratio ("18/40"), numeric, no icon ladder.
+ * - no counts, `direct` -> a two-state tick (sent / read).
+ * - no counts, non-direct -> no indicator at all (an ordinary participant in
+ *   a group; a permanently-grey tick here would be the "looks always
+ *   delivered" defect this component exists to remove).
+ */
 export function ReadTicks({ messageId, conversation }) {
     var _a;
     const { t } = useTranslation();
@@ -26,13 +46,35 @@ export function ReadTicks({ messageId, conversation }) {
         ? cache.receipts[`${conversation.id}:${conversation.other_user_id}`]
         : null;
     const allRead = status.all_read || Boolean(directReceipt === null || directReceipt === void 0 ? void 0 : directReceipt.last_read_at) || Boolean((recipientDetail === null || recipientDetail === void 0 ? void 0 : recipientDetail.length) && recipientDetail.every((recipient) => recipient.last_read_at));
-    const renderedStatus = Object.assign(Object.assign({}, status), { recipient_detail: recipientDetail, all_read: allRead });
-    const label = renderedStatus.all_read ? t('MessagingReadTicks.ALL_READ') : t('MessagingReadTicks.DELIVERED', { count: renderedStatus.delivered_count || 0 });
-    const StatusIcon = renderedStatus.all_read ? DoneAllOutlinedIcon : DoneOutlinedIcon;
+    const hasCounts = typeof status.read_count === 'number' && typeof status.recipient_count === 'number';
+    if (!hasCounts && (conversation === null || conversation === void 0 ? void 0 : conversation.kind) !== 'direct')
+        return null;
     // The server never returns DM detail; enforce the same carve-out defensively.
-    const detail = (conversation === null || conversation === void 0 ? void 0 : conversation.kind) === 'direct' ? null : renderedStatus.recipient_detail;
+    const detail = (conversation === null || conversation === void 0 ? void 0 : conversation.kind) === 'direct' ? null : recipientDetail;
     const recipients = (detail === null || detail === void 0 ? void 0 : detail.map((recipient) => recipient.display_name || recipient.username || recipient.user_id).filter(Boolean)) || [];
-    if (!recipients.length)
-        return _jsx(StatusIcon, { role: "img", "aria-label": label, color: renderedStatus.all_read ? 'primary' : 'inherit' });
-    return _jsxs(_Fragment, { children: [_jsx(ButtonBase, { "aria-label": label, "aria-haspopup": "dialog", "aria-expanded": Boolean(anchorEl), onClick: (event) => setAnchorEl(event.currentTarget), sx: { display: 'inline-flex', color: renderedStatus.all_read ? 'primary.main' : 'inherit' }, children: _jsx(StatusIcon, { "aria-hidden": "true" }) }), _jsx(Popover, { open: Boolean(anchorEl), anchorEl: anchorEl, onClose: () => setAnchorEl(null), children: _jsx(List, { "aria-label": t('MessagingReadTicks.RECIPIENTS'), children: recipients.map((recipient) => _jsx(ListItem, { children: recipient }, recipient)) }) })] });
+    if (hasCounts) {
+        // Read count/recipient_count exactly as dcm computed them -- do NOT
+        // recompute from recipientDetail here. dcm thresholds each participant's
+        // last_read_at against THIS message's created_at
+        // (`last_read_at__gte=message.created_at`, services.py); recipientDetail
+        // only carries each participant's raw, unthresholded last_read_at, and
+        // ReadTicks has no access to the message's own created_at to reproduce
+        // that comparison. Recomputing from recipientDetail (tried during
+        // implementation, caught in review) silently counted anyone who had ever
+        // read the conversation at any point as "read this message" -- in a real
+        // group with history, that reads as close to N/N regardless of who
+        // actually saw this specific message, the opposite of the WO's intent.
+        // The trade-off: unlike the DM tick and the per-person popover below
+        // (both viewer/timestamp-relative facts, not message-relative, so they
+        // safely reuse cache.receipts), this numeric ratio only updates on the
+        // next read-status fetch, not live from a read_state frame.
+        const label = t('MessagingReadTicks.READ_RATIO', { read: status.read_count, total: status.recipient_count });
+        const ratio = _jsxs(Typography, { component: "span", variant: "caption", color: "inherit", children: [status.read_count, "/", status.recipient_count] });
+        if (!recipients.length)
+            return _jsx("span", { role: "img", "aria-label": label, children: ratio });
+        return _jsxs(_Fragment, { children: [_jsx(ButtonBase, { "aria-label": label, "aria-haspopup": "dialog", "aria-expanded": Boolean(anchorEl), onClick: (event) => setAnchorEl(event.currentTarget), sx: { display: 'inline-flex' }, children: ratio }), _jsx(Popover, { open: Boolean(anchorEl), anchorEl: anchorEl, onClose: () => setAnchorEl(null), children: _jsx(List, { "aria-label": t('MessagingReadTicks.RECIPIENTS'), children: recipients.map((recipient) => _jsx(ListItem, { children: recipient }, recipient)) }) })] });
+    }
+    const label = allRead ? t('MessagingReadTicks.ALL_READ') : t('MessagingReadTicks.SENT');
+    const StatusIcon = allRead ? DoneAllOutlinedIcon : DoneOutlinedIcon;
+    return _jsx(StatusIcon, { role: "img", "aria-label": label, sx: { color: allRead ? DM_READ_COLOR : DM_SENT_COLOR } });
 }

package/dist/messaging/Thread.js

@@ -4,8 +4,9 @@ import { useCallback, useContext, useEffect, useMemo, useRef, useState } from 'r
 import { useTranslation } from 'react-i18next';
 import { AuthContext } from '../auth/AuthContext';
 import { MessageBubble } from './MessageBubble';
-import { useMessaging } from './MessagingProvider';
+import { MESSAGING_ENVELOPE, useMessaging } from './MessagingProvider';
 import { ReadTicks } from './ReadTicks';
+import { useRealtime } from '../notifications/realtime';
 function chronological(messages) { return [...messages].sort((left, right) => new Date(left.created_at || 0) - new Date(right.created_at || 0)); }
 function replyToId(message) { var _a; return (_a = message.reply_to_id) !== null && _a !== void 0 ? _a : message.reply_to; }
 // last_reply_at/reply_count are viewer-independent (always on serialize_message);
@@ -45,6 +46,7 @@ export function Thread({ conversationId, onReplyTargetChange, canModerateMessage
     const { t, i18n } = useTranslation();
     const { user } = useContext(AuthContext) || {};
     const { cache, loadMoreMessages, loadThreadReplies, markConversationRead, markThreadRead, refreshThread } = useMessaging();
+    const { subscribe } = useRealtime();
     const scrollRef = useRef(null);
     const wasNearBottomRef = useRef(true);
     const messageCountRef = useRef(0);
@@ -59,6 +61,32 @@ export function Thread({ conversationId, onReplyTargetChange, canModerateMessage
     const datedRoots = useMemo(() => roots.map((message, index) => ({ message, showDateSeparator: index > 0 && new Date(roots[index - 1].created_at).toDateString() !== new Date(message.created_at).toDateString() })), [roots]);
     useEffect(() => { if (conversationId != null)
         markConversationRead(conversationId).catch(() => { }); }, [conversationId, markConversationRead]);
+    // Re-mark read when a live message frame arrives for the conversation
+    // currently open -- without this, `read_count` biases downward for the
+    // person paying the most attention: the mount-effect above only fires once
+    // per open, so a viewer already sitting in the thread when a new message
+    // lands is recorded as "not read" until they navigate away and back.
+    // Subscribes independently of MessagingProvider's own subscription to the
+    // same envelope (the registry supports multiple handlers per envelope) so
+    // this stays a Thread-local concern, not a MessagingProvider reducer change.
+    // No sender check needed: dcm's `resolve_live_recipients(sender=actor)`
+    // already excludes the sender from the live fan-out, so a `message` frame
+    // for this conversation structurally cannot be the viewer's own send.
+    useEffect(() => {
+        if (conversationId == null)
+            return undefined;
+        return subscribe(MESSAGING_ENVELOPE, (frame) => {
+            var _a, _b;
+            if (frame.type !== 'message')
+                return;
+            const frameConversationId = (_a = frame.conversation_id) !== null && _a !== void 0 ? _a : (_b = frame.message) === null || _b === void 0 ? void 0 : _b.conversation_id;
+            if (String(frameConversationId) !== String(conversationId))
+                return;
+            if (document.visibilityState === 'hidden')
+                return;
+            markConversationRead(conversationId).catch(() => { });
+        });
+    }, [conversationId, markConversationRead, subscribe]);
     useEffect(() => { wasNearBottomRef.current = true; messageCountRef.current = 0; }, [conversationId]);
     // Nothing else in this component ever fetches messages for the conversation
     // actually being opened — `cache.messages` is otherwise only populated by a

package/package.json

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

package/src/i18n/messagingTranslations.ts

@@ -55,7 +55,8 @@ export const messagingTranslations = {
   'MessagingDirect.CANCEL': { de: 'Abbrechen', en: 'Cancel', fr: 'Annuler' },
   'MessagingDirect.START_ERROR': { de: 'Direktnachricht konnte nicht gestartet werden.', en: 'Direct message could not be started.', fr: 'Impossible de démarrer le message direct.' },
   'MessagingReadTicks.ALL_READ': { de: 'Von allen gelesen', en: 'Read by everyone', fr: 'Lu par tout le monde' },
-  'MessagingReadTicks.DELIVERED': { de: 'Zugestellt an {{count}}', en: 'Delivered to {{count}}', fr: 'Distribué à {{count}}' },
+  'MessagingReadTicks.SENT': { de: 'Gesendet', en: 'Sent', fr: 'Envoyé' },
+  'MessagingReadTicks.READ_RATIO': { de: '{{read}} von {{total}} gelesen', en: '{{read}} of {{total}} read', fr: '{{read}} sur {{total}} lu(s)' },
   'MessagingReadTicks.RECIPIENTS': { de: 'Lesebestätigungen', en: 'Read recipients', fr: 'Destinataires lus' },
   'MessagingComposer.LABEL': { de: 'Nachricht verfassen', en: 'Compose message', fr: 'Rédiger un message' },
   'MessagingComposer.MESSAGE': { de: 'Nachricht', en: 'Message', fr: 'Message' },
@@ -75,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/ConversationList.jsx

@@ -15,7 +15,14 @@ import { ConversationLaunchers } from './ConversationLaunchers';
 // name — so a direct conversation's counterpart name is host-supplied, exactly
 // like a managed conversation's label above.
 function titleOf(conversation, t, resolveManagedLabel, resolveDirectUserName) {
-  if (conversation.kind === 'managed' && resolveManagedLabel) {
+  // Not gated on kind === 'managed': a host resolver already returns null to
+  // mean "I have no label for this conversation" (the delegation contract
+  // this comment block describes above), so gating here duplicated a
+  // decision that belongs to the host and silently made the resolver
+  // unreachable for any kind the host later decided to label (found live:
+  // jg-ferien's resolver was taught to handle 'broadcast' too, but never got
+  // a chance to run because this gate excluded it).
+  if (resolveManagedLabel) {
     const label = resolveManagedLabel(conversation);
     if (label) return label;
   }

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() };