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

package/src/messaging/MessageBubble.jsx

@@ -30,7 +30,7 @@ function quoteLabel(message, t) {
 
 /** Provider-backed timeline collaborator, including per-message mutations. */
 export function MessageBubble({ message, replyTo, conversation, onReply, onJumpToMessage, onAnnouncementLink, canModerateMessages = false, children }) {
-  const { t } = useTranslation();
+  const { t, i18n } = useTranslation();
   const messaging = useOptionalMessaging();
   const { currentUser, editMessage, removeMessage } = messaging || {};
   const deleted = Boolean(message.deleted_at);
@@ -130,7 +130,7 @@ export function MessageBubble({ message, replyTo, conversation, onReply, onJumpT
             {message.poll && <PollCard message={message} />}
           </Stack>}
           {hasMeta && <Stack data-testid="message-meta" direction="row" spacing={0.5} justifyContent="flex-end" alignItems="center" flexWrap="wrap" sx={{ color: 'text.disabled', minWidth: 0, '& .MuiSvgIcon-root': { fontSize: '1rem' } }}>
-            {message.created_at && <Typography component="span" variant="caption" color="inherit" sx={{ whiteSpace: 'nowrap' }}>{new Date(message.created_at).toLocaleString()}</Typography>}
+            {message.created_at && <Typography component="span" variant="caption" color="inherit" sx={{ whiteSpace: 'nowrap' }}>{new Date(message.created_at).toLocaleTimeString(i18n?.language, { hour: '2-digit', minute: '2-digit' })}</Typography>}
             {message.edited_at && !deleted && <Typography component="span" variant="caption" color="inherit">{t('MessagingThread.EDITED')}</Typography>}
             {children}
           </Stack>}

package/src/messaging/MessagingProvider.jsx

@@ -207,6 +207,21 @@ export function applyFrame(state, frame, activeConversationId = null) {
       : incomingPoll;
     return { ...state, messages: mergeById(state.messages, { ...previous, poll }), polls: mergeById(state.polls, poll) };
   }
+  if (frame.type === 'read_state') {
+    const userId = frame.user_id ?? payload.user_id;
+    const lastReadAt = frame.last_read_at ?? payload.last_read_at;
+    if (conversationId == null || userId == null || lastReadAt == null) return state;
+    const key = `${conversationId}:${userId}`;
+    return { ...state, receipts: { ...state.receipts, [key]: { ...state.receipts[key], conversation_id: conversationId, user_id: userId, last_read_at: lastReadAt } } };
+  }
+  if (frame.type === 'thread_read_state') {
+    const rootId = frame.root_id ?? payload.root_id;
+    const userId = frame.user_id ?? payload.user_id;
+    const lastReadAt = frame.last_read_at ?? payload.last_read_at;
+    if (rootId == null || userId == null || lastReadAt == null) return state;
+    const key = `thread:${rootId}:${userId}`;
+    return { ...state, receipts: { ...state.receipts, [key]: { ...state.receipts[key], root_id: rootId, user_id: userId, last_read_at: lastReadAt } } };
+  }
   if (frame.type === 'message_deleted') {
     const previous = state.messages[frame.message_id] || {};
     return { ...state, messages: { ...state.messages, [frame.message_id]: { ...previous, id: frame.message_id, deleted_at: frame.deleted_at, deleted_by: frame.deleted_by, body: null, title: null, link_target: null } } };
@@ -400,8 +415,9 @@ export function MessagingProvider({ children, filters = {}, activeConversationId
   }, [api, cache.messages, patchMessage]);
   const createConversationPoll = useCallback(async (conversationId, payload, { clientRequestId } = {}) => {
     const poll = await api.createPoll(conversationId, { ...payload, client_request_id: clientRequestId }, { idempotencyKey: clientRequestId });
-    const message = poll?.message || poll;
-    if (message?.id != null) patchMessage({ ...message, conversation_id: message.conversation_id ?? conversationId, poll: message.poll || poll.poll || poll });
+    const messageId = poll?.message_id;
+    if (messageId == null) throw new Error('Poll response is missing message_id');
+    patchMessage({ id: messageId, conversation_id: poll.conversation_id ?? conversationId, created_at: new Date().toISOString(), kind: 'poll', poll });
     return poll;
   }, [api, patchMessage]);
   const castPollVote = useCallback(async (messageId, poll, optionIds) => {

package/src/messaging/ReadTicks.jsx

@@ -1,15 +1,36 @@
 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 { getMessageReadStatus } = useMessaging();
+  const { cache, getMessageReadStatus } = useMessaging();
   const [status, setStatus] = useState(null);
   const [anchorEl, setAnchorEl] = useState(null);
   useEffect(() => {
@@ -18,11 +39,43 @@ export function ReadTicks({ messageId, conversation }) {
     return () => { mounted = false; };
   }, [getMessageReadStatus, messageId]);
   if (!status) return null;
-  const label = status.all_read ? t('MessagingReadTicks.ALL_READ') : t('MessagingReadTicks.DELIVERED', { count: status.delivered_count || 0 });
-  const StatusIcon = status.all_read ? DoneAllOutlinedIcon : DoneOutlinedIcon;
+
+  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 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 : status.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={status.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: status.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; }
@@ -13,10 +14,11 @@ function replyToId(message) { return message.reply_to_id ?? message.reply_to; }
 // thread_last_read_at is viewer-specific and REST-only (never on a frame — see
 // MessagingProvider.jsx's applyFrame merge-trap handling). A null receipt with
 // at least one reply counts as unread; no replies means no marker at all.
-function hasUnreadReplies(message) {
+function hasUnreadReplies(message, receipts, userId) {
   if (!message.reply_count) return false;
-  if (message.thread_last_read_at == null) return true;
-  return Boolean(message.last_reply_at) && new Date(message.last_reply_at) > new Date(message.thread_last_read_at);
+  const lastReadAt = receipts[`thread:${message.id}:${userId}`]?.last_read_at ?? message.thread_last_read_at;
+  if (lastReadAt == null) return true;
+  return Boolean(message.last_reply_at) && new Date(message.last_reply_at) > new Date(lastReadAt);
 }
 // A still-pending optimistic row (chunk 4) has a fake `local-<requestId>` id
 // and no durable server row yet — mounting ReadTicks against it would fire a
@@ -38,9 +40,10 @@ function canShowReadTicks(message, user) {
  * message shown, not one per message in the conversation.
  */
 export function Thread({ conversationId, onReplyTargetChange, canModerateMessages = false, onAnnouncementLink }) {
-  const { t } = useTranslation();
+  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);
@@ -52,8 +55,30 @@ export function Thread({ conversationId, onReplyTargetChange, canModerateMessage
   const conversation = cache.conversations[conversationId];
   const conversationMessages = useMemo(() => chronological(Object.values(cache.messages).filter((message) => message.conversation_id === conversationId)), [cache.messages, conversationId]);
   const roots = useMemo(() => chronological(Object.values(cache.messages).filter((message) => message.conversation_id === conversationId && !replyToId(message))), [cache.messages, conversationId]);
+  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
@@ -136,11 +161,11 @@ export function Thread({ conversationId, onReplyTargetChange, canModerateMessage
             (the scrollbar fix above) would clip the icon whenever there's no
             vertical scrollbar reserving extra width (a short conversation,
             no vertical overflow). */}
-        <Stack spacing={1} sx={{ pr: 2 }}>{roots.map((message) => {
+        <Stack spacing={1} sx={{ pr: 2 }}>{datedRoots.map(({ message, showDateSeparator }) => {
           const replies = chronological(Object.values(cache.messages).filter((item) => String(replyToId(item)) === String(message.id)));
-          return <Stack key={message.id} spacing={0.75}><MessageBubble message={message} conversation={conversation} onReply={reply} onJumpToMessage={jumpToMessage} onAnnouncementLink={onAnnouncementLink} canModerateMessages={canModerateMessages}>{canShowReadTicks(message, user) && <ReadTicks messageId={message.id} conversation={conversation} />}</MessageBubble>
+          return <Stack key={message.id} spacing={0.75}>{showDateSeparator && <Stack data-testid="day-separator" direction="row" alignItems="center" spacing={1}><Divider sx={{ flex: 1 }} /><Typography variant="caption" color="text.secondary">{new Date(message.created_at).toLocaleDateString(i18n?.language)}</Typography><Divider sx={{ flex: 1 }} /></Stack>}<MessageBubble message={message} conversation={conversation} onReply={reply} onJumpToMessage={jumpToMessage} onAnnouncementLink={onAnnouncementLink} canModerateMessages={canModerateMessages}>{canShowReadTicks(message, user) && <ReadTicks messageId={message.id} conversation={conversation} />}</MessageBubble>
             {(message.reply_count || replies.length) > 0 && (() => {
-              const unread = hasUnreadReplies(message);
+              const unread = hasUnreadReplies(message, cache.receipts, user?.id);
               const label = openThreads[message.id] ? t('MessagingThread.HIDE_REPLIES') : t('MessagingThread.SHOW_REPLIES', { count: message.reply_count || replies.length });
               // MUI's Badge spreads unrecognized props (incl. aria-label) onto
               // its own non-interactive wrapping span, not the inner control —

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

@@ -0,0 +1,105 @@
+// @vitest-environment jsdom
+import React from 'react';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import { act, cleanup, fireEvent, render, screen, waitFor } from '@testing-library/react';
+
+// 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) => { frameHandlers.add(handler); return () => frameHandlers.delete(handler); }, onReconnect: () => () => {} }) }));
+
+import { MessageBubble } from '../src/messaging/MessageBubble';
+import { ConversationList } from '../src/messaging/ConversationList';
+import { applyFrame, MessagingProvider, useMessaging } from '../src/messaging/MessagingProvider';
+import { ReadTicks } from '../src/messaging/ReadTicks';
+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, 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></>; }
+
+describe('MSG-6 messaging regressions', () => {
+  it('uses the server message_id, never the poll id, for a newly-created poll cache row', async () => {
+    const client = api({ createPoll: vi.fn().mockResolvedValue({ id: 'poll-9', message_id: 'message-9', question: 'Q', options: [] }) });
+    render(<MessagingProvider api={client} active={false}><PollHarness /></MessagingProvider>);
+    await act(async () => screen.getByText('create').click());
+    const messages = JSON.parse(screen.getByText((_, node) => node.tagName === 'OUTPUT').textContent);
+    expect(Object.keys(messages)).toEqual(['message-9']);
+    expect(messages['message-9'].created_at).toBeTruthy();
+    expect(messages['poll-9']).toBeUndefined();
+  });
+
+  it('renders time-only metadata in the active locale and one separator per changed root day', async () => {
+    const time = vi.spyOn(Date.prototype, 'toLocaleTimeString'); time.mockReturnValue('10:41');
+    render(<MessageBubble message={{ id: 1, body: 'Hi', created_at: '2026-08-03T10:41:00Z' }} />);
+    expect(await screen.findByText('10:41')).toBeTruthy();
+    expect(time).toHaveBeenCalledWith('de-DE', { hour: '2-digit', minute: '2-digit' });
+    time.mockRestore();
+    const client = api({ listMessages: vi.fn().mockResolvedValue({ results: [{ id: 1, conversation_id: 'c1', body: 'one', created_at: '2026-08-01T10:00:00Z' }, { id: 2, conversation_id: 'c1', body: 'two', created_at: '2026-08-01T11:00:00Z' }, { id: 3, conversation_id: 'c1', body: 'three', created_at: '2026-08-02T10:00:00Z' }] }) });
+    render(<MessagingProvider api={client}><Thread conversationId="c1" /></MessagingProvider>);
+    await screen.findByText('three');
+    expect(screen.getAllByTestId('day-separator')).toHaveLength(1);
+  });
+
+  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>);
+    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' }));
+    // 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({ 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.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);
+  });
+
+  it('keeps Thread as the sole read-mark owner for direct mounts and list opens', async () => {
+    const client = api({ listMessages: vi.fn().mockResolvedValue({ results: [] }) });
+    function Surface() { const [conversationId, setConversationId] = React.useState(null); return <MessagingProvider api={client}><ConversationList onOpen={(conversation) => setConversationId(conversation.id)} />{conversationId && <Thread conversationId={conversationId} />}</MessagingProvider>; }
+    render(<Surface />);
+    await screen.findByText('MessagingList.UNTITLED');
+    fireEvent.click(screen.getByText('MessagingList.UNTITLED'));
+    await waitFor(() => expect(client.markConversationRead).toHaveBeenCalledTimes(1));
+    client.markConversationRead.mockClear();
+    render(<MessagingProvider api={client} active={false}><Thread conversationId="c1" /></MessagingProvider>);
+    await waitFor(() => expect(client.markConversationRead).toHaveBeenCalledTimes(1));
+  });
+
+  it('updates the rendered thread unread state from a thread_read_state frame', async () => {
+    const client = api({ listMessages: vi.fn().mockResolvedValue({ results: [{ id: 'root-1', conversation_id: 'c1', body: 'Root', sender: { id: 'u1' }, reply_count: 1, last_reply_at: '2026-08-03T10:00:00Z', thread_last_read_at: null }] }) });
+    render(<AuthContext.Provider value={{ user: { id: 'u2' } }}><MessagingProvider api={client}><Thread conversationId="c1" /></MessagingProvider></AuthContext.Provider>);
+    await screen.findByLabelText(/MessagingThread.UNREAD_REPLIES/);
+    act(() => frameHandler({ type: 'thread_read_state', root_id: 'root-1', user_id: 'u2', last_read_at: '2026-08-03T11:00:00Z' }));
+    await waitFor(() => expect(screen.queryByLabelText(/MessagingThread.UNREAD_REPLIES/)).toBeNull());
+  });
+
+  it('defines singular reply labels for de, en, and fr', () => {
+    expect(messagingTranslations['MessagingThread.SHOW_REPLIES_one']).toEqual({ de: '{{count}} Antwort anzeigen', en: 'Show {{count}} reply', fr: 'Afficher {{count}} réponse' });
+  });
+});