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

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/src/messaging/ReadTicks.jsx

@@ -1,12 +1,33 @@
 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 }) {
   const { t } = useTranslation();
   const { cache, getMessageReadStatus } = useMessaging();
@@ -18,17 +39,43 @@ export function ReadTicks({ messageId, conversation }) {
     return () => { mounted = false; };
   }, [getMessageReadStatus, messageId]);
   if (!status) return null;
+
   const recipientDetail = status.recipient_detail?.map((recipient) => ({ ...recipient, last_read_at: cache.receipts[`${conversation?.id}:${recipient.user_id}`]?.last_read_at ?? recipient.last_read_at })) || status.recipient_detail;
   const directReceipt = conversation?.kind === 'direct' && conversation?.other_user_id != null
     ? cache.receipts[`${conversation.id}:${conversation.other_user_id}`]
     : null;
   const allRead = status.all_read || Boolean(directReceipt?.last_read_at) || Boolean(recipientDetail?.length && recipientDetail.every((recipient) => recipient.last_read_at));
-  const renderedStatus = { ...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?.kind !== 'direct') return null;
+
   // The server never returns DM detail; enforce the same carve-out defensively.
-  const detail = conversation?.kind === 'direct' ? null : renderedStatus.recipient_detail;
+  const detail = conversation?.kind === 'direct' ? null : recipientDetail;
   const recipients = detail?.map((recipient) => recipient.display_name || recipient.username || recipient.user_id).filter(Boolean) || [];
-  if (!recipients.length) return <StatusIcon role="img" aria-label={label} color={renderedStatus.all_read ? 'primary' : 'inherit'} />;
-  return <><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' }}><StatusIcon aria-hidden="true" /></ButtonBase><Popover open={Boolean(anchorEl)} anchorEl={anchorEl} onClose={() => setAnchorEl(null)}><List aria-label={t('MessagingReadTicks.RECIPIENTS')}>{recipients.map((recipient) => <ListItem key={recipient}>{recipient}</ListItem>)}</List></Popover></>;
+
+  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 = <Typography component="span" variant="caption" color="inherit">{status.read_count}/{status.recipient_count}</Typography>;
+    if (!recipients.length) return <span role="img" aria-label={label}>{ratio}</span>;
+    return <><ButtonBase aria-label={label} aria-haspopup="dialog" aria-expanded={Boolean(anchorEl)} onClick={(event) => setAnchorEl(event.currentTarget)} sx={{ display: 'inline-flex' }}>{ratio}</ButtonBase><Popover open={Boolean(anchorEl)} anchorEl={anchorEl} onClose={() => setAnchorEl(null)}><List aria-label={t('MessagingReadTicks.RECIPIENTS')}>{recipients.map((recipient) => <ListItem key={recipient}>{recipient}</ListItem>)}</List></Popover></>;
+  }
+
+  const label = allRead ? t('MessagingReadTicks.ALL_READ') : t('MessagingReadTicks.SENT');
+  const StatusIcon = allRead ? DoneAllOutlinedIcon : DoneOutlinedIcon;
+  return <StatusIcon role="img" aria-label={label} sx={{ color: allRead ? DM_READ_COLOR : DM_SENT_COLOR }} />;
 }

package/src/messaging/Thread.jsx

@@ -4,8 +4,9 @@ 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) { return message.reply_to_id ?? message.reply_to; }
@@ -42,6 +43,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);
@@ -56,6 +58,27 @@ 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) => {
+      if (frame.type !== 'message') return;
+      const frameConversationId = frame.conversation_id ?? frame.message?.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/tests/ConversationList.test.jsx

@@ -79,6 +79,58 @@ describe('ConversationList', () => {
     expect(resolveDirectUserName).not.toHaveBeenCalled();
   });
 
+  it('calls resolveManagedLabel for a broadcast conversation, not just managed -- must fail against the kind-gated code (MSG-6f scope A)', async () => {
+    api.listConversations.mockResolvedValueOnce({
+      results: [{ id: 9, kind: 'broadcast', external_key: 'broadcast', title: null, last_message: { excerpt: 'Hi all' } }],
+      next_cursor: null,
+    });
+    const resolveManagedLabel = vi.fn((conversation) => (conversation.kind === 'broadcast' ? 'Event-Ankündigungen' : null));
+    renderList(api, { resolveManagedLabel });
+    await screen.findByText('Event-Ankündigungen');
+    expect(resolveManagedLabel).toHaveBeenCalledWith(expect.objectContaining({ id: 9, kind: 'broadcast' }));
+  });
+
+  it('falls through to the existing title chain unchanged when resolveManagedLabel returns null, for any kind', async () => {
+    api.listConversations.mockResolvedValueOnce({
+      results: [{ id: 10, kind: 'broadcast', title: null, last_message: { excerpt: 'Hi' } }],
+      next_cursor: null,
+    });
+    const resolveManagedLabel = vi.fn(() => null);
+    renderList(api, { resolveManagedLabel });
+    await screen.findByText('MessagingList.UNTITLED');
+    expect(resolveManagedLabel).toHaveBeenCalled();
+  });
+
+  it('a truthy resolveManagedLabel wins over resolveDirectUserName for a direct conversation -- documents the new precedence, not previously reachable when the gate excluded every kind but managed', async () => {
+    api.listConversations.mockResolvedValueOnce({
+      results: [{ id: 12, kind: 'direct', other_user_id: 42, title: null, last_message: { excerpt: 'Hi' } }],
+      next_cursor: null,
+    });
+    const resolveManagedLabel = vi.fn(() => 'Host label wins');
+    const resolveDirectUserName = vi.fn(() => 'Alex');
+    renderList(api, { resolveManagedLabel, resolveDirectUserName });
+    await screen.findByText('Host label wins');
+    // resolveManagedLabel is checked first, unconditionally -- a host whose
+    // resolver ever returns non-null for kind: 'direct' pre-empts the
+    // id-based resolveDirectUserName lookup entirely. Deliberate per the
+    // WO's delegation contract (a host is trusted to return null for kinds
+    // it doesn't handle), but was structurally impossible before this WO
+    // (the old kind === 'managed' gate excluded every other kind), so it is
+    // now a real, if host-controlled, precedence a resolver author must know.
+    expect(resolveDirectUserName).not.toHaveBeenCalled();
+  });
+
+  it('keeps managed event_all/event_team labelling unchanged (regression guard)', async () => {
+    api.listConversations.mockResolvedValueOnce({
+      results: [{ id: 11, kind: 'managed', external_key: 'event_all', title: null, last_message: { excerpt: 'Hi' } }],
+      next_cursor: null,
+    });
+    const resolveManagedLabel = vi.fn((conversation) => (conversation.external_key === 'event_all' ? 'Alle - Sommerlager' : null));
+    renderList(api, { resolveManagedLabel });
+    await screen.findByText('Alle - Sommerlager');
+    expect(resolveManagedLabel).toHaveBeenCalledWith(expect.objectContaining({ id: 11, kind: 'managed', external_key: 'event_all' }));
+  });
+
   it('wires mute and archive through participant APIs', async () => {
     renderList(api);
     await screen.findByText('First');

package/tests/Thread.test.jsx

@@ -18,7 +18,7 @@ function makeApi() {
     getUnreadCount: vi.fn().mockResolvedValue({ unread_count: 0, by_conversation: {} }),
     listMessages: vi.fn().mockResolvedValue({ results: [{ id: 2, conversation_id: 1, body: 'Visible message', created_at: '2026-07-31T10:00:00Z' }], next_cursor: 'signed-opaque-cursor' }),
     listThread: vi.fn().mockResolvedValue({ results: [] }),
-    getReadStatus: vi.fn().mockResolvedValue({ all_read: false, delivered_count: 2 }),
+    getReadStatus: vi.fn().mockResolvedValue({ all_read: false }),
   };
 }
 // No `activeConversationId` on the provider: this matches how jg-ferien
@@ -56,17 +56,17 @@ describe('messaging Thread surfaces', () => {
     expect(screen.queryByText('Stale secret')).toBeNull();
   });
 
-  it('renders aggregate read state and never exposes supplied recipient details for a direct conversation', async () => {
-    api.getReadStatus.mockResolvedValue({ all_read: false, delivered_count: 2, recipient_detail: [{ display_name: 'Private recipient' }] });
+  it('renders the two-state direct tick and never exposes supplied recipient details for a direct conversation', async () => {
+    api.getReadStatus.mockResolvedValue({ all_read: false, recipient_detail: [{ display_name: 'Private recipient' }] });
     render(<MessagingProvider api={api} active={false}><ReadTicks messageId={2} conversation={{ id: 1, kind: 'direct' }} /></MessagingProvider>);
-    await screen.findByLabelText('MessagingReadTicks.DELIVERED:2');
+    await screen.findByLabelText('MessagingReadTicks.SENT');
     expect(screen.queryByText('Private recipient')).toBeNull();
   });
 
-  it('renders supplied recipient detail for a non-direct conversation (the permitted case)', async () => {
-    api.getReadStatus.mockResolvedValue({ all_read: false, delivered_count: 2, recipient_detail: [{ display_name: 'Visible recipient' }] });
+  it('renders supplied recipient detail for a non-direct conversation with counts (the permitted case)', async () => {
+    api.getReadStatus.mockResolvedValue({ all_read: false, read_count: 1, recipient_count: 2, recipient_detail: [{ display_name: 'Visible recipient' }] });
     render(<MessagingProvider api={api} active={false}><ReadTicks messageId={2} conversation={{ id: 1, kind: 'group' }} /></MessagingProvider>);
-    const tick = await screen.findByLabelText('MessagingReadTicks.DELIVERED:2');
+    const tick = await screen.findByLabelText('MessagingReadTicks.READ_RATIO');
     fireEvent.click(tick);
     await screen.findByText('Visible recipient');
   });
@@ -100,8 +100,9 @@ describe('messaging Thread surfaces', () => {
     renderThread(api);
     await screen.findByLabelText('MessagingThread.TIMELINE');
     cleanup();
+    api.getReadStatus.mockResolvedValue({ all_read: false, read_count: 0, recipient_count: 3 });
     render(<MessagingProvider api={api} active={false}><ReadTicks messageId={2} conversation={{ id: 1, kind: 'group' }} /></MessagingProvider>);
-    await waitFor(() => expect(screen.getByLabelText('MessagingReadTicks.DELIVERED:2')).toBeTruthy());
+    await waitFor(() => expect(screen.getByLabelText('MessagingReadTicks.READ_RATIO')).toBeTruthy());
   });
 
   it('fetches and shows a conversation\'s historical messages on open, with no realtime frame or optimistic send involved', async () => {

package/tests/messagingChunk6.test.jsx

@@ -3,9 +3,14 @@ import React from 'react';
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
 import { cleanup, fireEvent, render, screen, waitFor } from '@testing-library/react';
 
-let frameHandler;
+// Thread.jsx (MSG-6f scope C) now subscribes to the messaging envelope
+// independently of MessagingProvider's own subscription -- a Set of handlers,
+// not a single captured variable, so frameHandler(...) still reaches every
+// current subscriber, matching the real registry's multi-handler support.
+let frameHandlers;
+function frameHandler(frame) { frameHandlers.forEach((handler) => handler(frame)); }
 vi.mock('react-i18next', () => ({ useTranslation: () => ({ t: (key, options) => options?.count != null ? `${key}:${options.count}` : key, i18n: { language: 'en' } }) }));
-vi.mock('../src/notifications/realtime', () => ({ useRealtime: () => ({ subscribe: (_envelope, handler) => { frameHandler = handler; return () => {}; }, onReconnect: () => () => {} }) }));
+vi.mock('../src/notifications/realtime', () => ({ useRealtime: () => ({ subscribe: (_envelope, handler) => { frameHandlers.add(handler); return () => frameHandlers.delete(handler); }, onReconnect: () => () => {} }) }));
 
 import { Composer } from '../src/messaging/Composer';
 import { ConversationList } from '../src/messaging/ConversationList';
@@ -20,14 +25,15 @@ function makeApi(overrides = {}) {
     listMessages: vi.fn().mockResolvedValue({ results: [] }),
     listThread: vi.fn().mockResolvedValue({ results: [] }),
     getUnreadCount: vi.fn().mockResolvedValue({ unread_count: 0, by_conversation: {} }),
-    getReadStatus: vi.fn().mockResolvedValue({ all_read: false, delivered_count: 2 }),
+    getReadStatus: vi.fn().mockResolvedValue({ all_read: false }),
     markConversationRead: vi.fn().mockResolvedValue({}), markThreadRead: vi.fn().mockResolvedValue({}),
     createPoll: vi.fn().mockResolvedValue({}),
     ...overrides,
   };
 }
 
-afterEach(() => { cleanup(); vi.useRealTimers(); vi.restoreAllMocks(); frameHandler = undefined; });
+beforeEach(() => { frameHandlers = new Set(); });
+afterEach(() => { cleanup(); vi.useRealTimers(); vi.restoreAllMocks(); frameHandlers = new Set(); });
 
 describe('MSG-3b chunk 6', () => {
   it('renders localized relative list timestamps for now, minutes, hours, and days', async () => {
@@ -84,16 +90,17 @@ describe('MSG-3b chunk 6', () => {
     expect(screen.queryByText('Ava')).toBeNull();
   });
 
-  it('opens receipt recipients by click for non-direct conversations and never exposes direct details', async () => {
-    const api = makeApi({ getReadStatus: vi.fn().mockResolvedValue({ all_read: false, delivered_count: 2, recipient_detail: [{ display_name: 'Ava' }] }) });
+  it('opens receipt recipients by click for non-direct conversations with counts, and never exposes direct details', async () => {
+    const api = makeApi({ getReadStatus: vi.fn().mockResolvedValue({ all_read: false, read_count: 1, recipient_count: 2, recipient_detail: [{ display_name: 'Ava' }] }) });
     const view = render(<MessagingProvider api={api} active={false}><ReadTicks messageId={7} conversation={{ kind: 'group' }} /></MessagingProvider>);
-    const detail = await screen.findByRole('button', { name: 'MessagingReadTicks.DELIVERED:2' });
+    const detail = await screen.findByRole('button', { name: 'MessagingReadTicks.READ_RATIO' });
     fireEvent.click(detail);
     expect(await screen.findByText('Ava')).toBeTruthy();
     view.unmount();
+    api.getReadStatus.mockResolvedValue({ all_read: false, recipient_detail: [{ display_name: 'Ava' }] });
     render(<MessagingProvider api={api} active={false}><ReadTicks messageId={7} conversation={{ kind: 'direct' }} /></MessagingProvider>);
-    await screen.findByLabelText('MessagingReadTicks.DELIVERED:2');
-    expect(screen.queryByRole('button', { name: 'MessagingReadTicks.DELIVERED:2' })).toBeNull();
+    await screen.findByLabelText('MessagingReadTicks.SENT');
+    expect(screen.queryByRole('button', { name: 'MessagingReadTicks.READ_RATIO' })).toBeNull();
     expect(screen.queryByText('Ava')).toBeNull();
   });
 

package/tests/messagingCompactBubble.test.jsx

@@ -12,7 +12,7 @@ import { MessagingProvider } from '../src/messaging/MessagingProvider';
 import { ReadTicks } from '../src/messaging/ReadTicks';
 
 const api = () => ({
-  getReadStatus: vi.fn().mockResolvedValue({ all_read: false, delivered_count: 2 }),
+  getReadStatus: vi.fn().mockResolvedValue({ all_read: false }),
   getAttachment: vi.fn(), getAttachmentThumbnail: vi.fn(), addReaction: vi.fn(), removeReaction: vi.fn(),
   votePoll: vi.fn(), closePoll: vi.fn(),
 });
@@ -24,8 +24,8 @@ afterEach(cleanup);
 
 describe('compact message bubbles', () => {
   it('keeps the timestamp and own-message status icon inside the bubble and has no standalone plain-message controls', async () => {
-    const { container } = renderBubble({ id: 1, body: 'Hallo', sender: { id: 1, display_name: 'Me' }, created_at: '2026-08-02T10:00:00Z' }, { child: <ReadTicks messageId={1} conversation={{ kind: 'group' }} /> });
-    const tick = await screen.findByLabelText('MessagingReadTicks.DELIVERED:2');
+    const { container } = renderBubble({ id: 1, body: 'Hallo', sender: { id: 1, display_name: 'Me' }, created_at: '2026-08-02T10:00:00Z' }, { child: <ReadTicks messageId={1} conversation={{ kind: 'direct' }} /> });
+    const tick = await screen.findByLabelText('MessagingReadTicks.SENT');
     const paper = container.querySelector('[data-message-id="1"] .MuiPaper-root');
     expect(paper.contains(tick)).toBe(true);
     expect(paper.querySelector('[data-testid="message-meta"]')).toBeTruthy();

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/messagingMsg6.test.jsx

@@ -1,11 +1,16 @@
 // @vitest-environment jsdom
 import React from 'react';
-import { afterEach, describe, expect, it, vi } from 'vitest';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
 import { act, cleanup, fireEvent, render, screen, waitFor } from '@testing-library/react';
 
-let frameHandler;
+// Thread.jsx (MSG-6f scope C) now subscribes to the messaging envelope
+// independently of MessagingProvider's own subscription -- a Set of handlers,
+// not a single captured variable, so frameHandler(...) still reaches every
+// current subscriber, matching the real registry's multi-handler support.
+let frameHandlers;
+function frameHandler(frame) { frameHandlers.forEach((handler) => handler(frame)); }
 vi.mock('react-i18next', () => ({ useTranslation: () => ({ t: (key, options) => options?.count != null ? `${key}:${options.count}` : key, i18n: { language: 'de-DE' } }) }));
-vi.mock('../src/notifications/realtime', () => ({ useRealtime: () => ({ subscribe: (_envelope, handler) => { frameHandler = handler; return () => {}; }, onReconnect: () => () => {} }) }));
+vi.mock('../src/notifications/realtime', () => ({ useRealtime: () => ({ subscribe: (_envelope, handler) => { frameHandlers.add(handler); return () => frameHandlers.delete(handler); }, onReconnect: () => () => {} }) }));
 
 import { MessageBubble } from '../src/messaging/MessageBubble';
 import { ConversationList } from '../src/messaging/ConversationList';
@@ -15,8 +20,9 @@ import { Thread } from '../src/messaging/Thread';
 import { messagingTranslations } from '../src/i18n/messagingTranslations';
 import { AuthContext } from '../src/auth/AuthContext';
 
-const api = (overrides = {}) => ({ listConversations: vi.fn().mockResolvedValue({ results: [{ id: 'c1', kind: 'group' }] }), listMessages: vi.fn().mockResolvedValue({ results: [] }), listThread: vi.fn().mockResolvedValue({ results: [] }), getUnreadCount: vi.fn().mockResolvedValue({ unread_count: 0, by_conversation: {} }), getReadStatus: vi.fn().mockResolvedValue({ all_read: false, delivered_count: 1, recipient_detail: [{ user_id: 'u2', display_name: 'Ava' }] }), markConversationRead: vi.fn().mockResolvedValue({}), ...overrides });
+const api = (overrides = {}) => ({ listConversations: vi.fn().mockResolvedValue({ results: [{ id: 'c1', kind: 'group' }] }), listMessages: vi.fn().mockResolvedValue({ results: [] }), listThread: vi.fn().mockResolvedValue({ results: [] }), getUnreadCount: vi.fn().mockResolvedValue({ unread_count: 0, by_conversation: {} }), getReadStatus: vi.fn().mockResolvedValue({ all_read: false, read_count: 0, recipient_count: 1, recipient_detail: [{ user_id: 'u2', display_name: 'Ava' }] }), markConversationRead: vi.fn().mockResolvedValue({}), ...overrides });
 const state = () => ({ conversations: {}, messages: {}, threads: {}, polls: {}, reactions: {}, receipts: {}, unread: { unread_count: 0, by_conversation: {} }, cursors: { conversations: null, messages: {}, threads: {} } });
+beforeEach(() => { frameHandlers = new Set(); });
 afterEach(cleanup);
 
 function PollHarness() { const { createConversationPoll, cache } = useMessaging(); return <><button onClick={() => createConversationPoll('c1', { question: 'Q' })}>create</button><output>{JSON.stringify(cache.messages)}</output></>; }
@@ -44,21 +50,30 @@ describe('MSG-6 messaging regressions', () => {
     expect(screen.getAllByTestId('day-separator')).toHaveLength(1);
   });
 
-  it('applies read and thread-read frames to cache and lets ReadTicks change without another REST call', async () => {
+  it('applies read frames to cache (for the per-person popover) but the group read ratio stays dcm\'s own numbers, not recomputed', async () => {
     const client = api();
     render(<MessagingProvider api={client} active={false}><ReadTicks messageId="m1" conversation={{ id: 'c1', kind: 'group' }} /></MessagingProvider>);
-    await screen.findByLabelText('MessagingReadTicks.DELIVERED:1');
+    const tick = await screen.findByLabelText('MessagingReadTicks.READ_RATIO');
+    expect(tick.textContent).toBe('0/1');
     act(() => frameHandler({ type: 'read_state', conversation_id: 'c1', user_id: 'u2', last_read_at: '2026-08-03T10:00:00Z' }));
-    await screen.findByLabelText('MessagingReadTicks.ALL_READ');
+    // Deliberate, documented trade-off (see ReadTicks.jsx): the numeric ratio
+    // is dcm's own read_count/recipient_count verbatim, never recomputed from
+    // recipientDetail -- recipientDetail has no way to threshold against
+    // this specific message's created_at, only dcm's own aggregate does.
+    // So a read_state frame updates the *popover's* per-person list (proven
+    // by the receipts assertion below) but the ratio digits only change on
+    // the next read-status fetch, same as before this frame arrived.
+    await new Promise((resolve) => setTimeout(resolve, 20));
+    expect(screen.getByLabelText('MessagingReadTicks.READ_RATIO').textContent).toBe('0/1');
     expect(client.getReadStatus).toHaveBeenCalledTimes(1);
     const next = applyFrame(state(), { type: 'thread_read_state', root_id: 'root-1', user_id: 'u2', last_read_at: '2026-08-03T10:00:00Z' });
     expect(next.receipts['thread:root-1:u2'].last_read_at).toBe('2026-08-03T10:00:00Z');
   });
 
   it('updates direct-conversation ReadTicks from a read frame without another REST call', async () => {
-    const client = api();
+    const client = api({ getReadStatus: vi.fn().mockResolvedValue({ all_read: false }) });
     render(<MessagingProvider api={client} active={false}><ReadTicks messageId="m1" conversation={{ id: 'c1', kind: 'direct', other_user_id: 'u2' }} /></MessagingProvider>);
-    await screen.findByLabelText('MessagingReadTicks.DELIVERED:1');
+    await screen.findByLabelText('MessagingReadTicks.SENT');
     act(() => frameHandler({ type: 'read_state', conversation_id: 'c1', user_id: 'u2', last_read_at: '2026-08-03T10:00:00Z' }));
     await screen.findByLabelText('MessagingReadTicks.ALL_READ');
     expect(client.getReadStatus).toHaveBeenCalledTimes(1);