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

package/WORK_ORDERS.md

@@ -34,5 +34,7 @@ prefixed ID; never reuse a bare flat number across workstreams.
 | MSG-3c | Deliver the rows MSG-3b left blocked against a stale dcm version | Seven checklist rows (38, 51-53, 56-58) that MSG-3b correctly refused to fake against dcm 2.36.1, and which dcm 2.37.0 made buildable **while MSG-3b was still running**: real last-message preview + list reorder/preview refresh, full `PollCard` rendering (question / options / `vote_count` / `voters` / closed state), and the `reaction` / `poll_updated` frame handlers that stop being dead code. Plus the deviation-doc correction and a conformance-test extension requiring every BLOCKED entry to carry a dependency version pin. | 2026-07-31 | done | 84cc3c2, 5dd4d3a, 733588a, 170ce1e | Envelope: [work-orders/MSG-3c.md](work-orders/MSG-3c.md); canonical row in dcm's register. Extends the landed MSG-3b (2.17.0). **Root cause — third occurrence of one pattern in this workstream:** the WO-end `ui_reviewer` cross-checked all 59 rows against *ucm's* landed code and took the dependency's state from the WO text instead of reading dcm, so seven rows closed as "blocked on a future dcm work order" that had already shipped. New rule this WO adds: a BLOCKED row is re-verified against the live dependency **at WO close, not at WO start**, and every BLOCKED entry names the version it was blocked at. MSG-3b already did the version-pinning unprompted — that pin is the only reason the staleness was a two-minute check rather than surfacing at MSG-5. Rows 27 and 42 stay correctly BLOCKED, on dcm `MSG-2d`. Highest latent risk: rows 56/57 are handler paths that have **never** run against a real frame, so treat them as new code under test rather than as working code being unblocked; and poll tests must use server-shaped payloads (`serialize_poll` output), since client-shaped fixtures are what let the `reply_to_id` bug survive MSG-3. **Codex was out of credits for this entire WO** (verified: every invocation returned only a workspace-credits error, no work done) — all three chunks implemented directly by the orchestrator per the Codex→Claude fallback rule, with mandatory independent review on every chunk (author ≠ reviewer). **Chunk 1** (rows 38/58): fixed a real bug found while scoping — `ConversationList` read `last_message.body`, but dcm's `serialize_last_message` only ever returns `.excerpt` — plus a defensive fix to `applyFrame`'s `message_edited` keying (reviewer found my initial bug analysis incomplete: dcm always attaches a full `frame.message`, so the fix is a no-op against the real wire contract but kept as genuine defensive robustness; the regression test was rewritten to use the real enriched frame shape instead of a fabricated minimal one). **Chunk 2** (rows 51-53): fixed `PollCard` reading non-existent `created_by`/`selected`/`voted` fields (real fields: `created_by_id`, `voted_option_ids` — the latter present only on the vote/create/close REST responses, never in `serialize_poll` or the `poll_updated` frame); found and fixed the same "frame wholesale-replaces viewer-specific state" defect class in `poll_updated`'s own handler ahead of chunk 3's explicit scope. **Chunk 3** (rows 56/57 + WO deliverables): found and fixed the identical defect in the `reaction` frame handler and `toggleReaction`'s REST-confirm path (dcm's `serialize_reactions` never returns a per-viewer `reacted` flag; both call sites were wholesale-replacing and silently wiping known reacted state); extended the contract-conformance test with the WO's new BLOCKED-version-pin rule plus a required negative-case test; rewrote `docs/messaging-deviations.md` (rows 38/51/53/56-58 → OK, row 52 → DEV, rows 27/42 stay BLOCKED with the new version pin, substance untouched). **WO-end `ui_reviewer`** (independent, re-derived rows 27/42 against dcm's actual committed `HEAD`, not the WO text or the doc's own claims, per this WO's own corrective rule): no findings — dcm's committed state is still 2.37.0 (a naive check of dcm's working tree showed 2.38.0, but that's uncommitted `MSG-2d` WIP from a concurrent session, not the published state); rows 27/42 confirmed genuinely still BLOCKED at the real committed version; all seven newly-delivered rows spot-checked against dcm's committed serializers/services directly, all match. Flagged for awareness, not actionable now: dcm's uncommitted `MSG-2d` WIP (external_key, thread-receipt read path) will very likely unblock rows 27/42 once committed and published — a future `MSG-3d` candidate. Published: **ucm 2.18.0** (npm, CI-gated on push to `main`, `170ce1e`). No CHANGELOG.md in this repo (same as MSG-3/MSG-3b/NOTIF-12/NOTIF-13) — documented via commit messages + this register entry only. No app pin bumps in this WO. |
 | MSG-3d | The last two blocked rows: unread-reply marker and managed-conversation identity | Deliver checklist rows **27** (unread-reply marker on the thread toggle, from `reply_count`/`last_reply_at` plus the REST-only `thread_last_read_at`) and **42** (surface `external_key` so a host can distinguish managed conversations — ucm must NOT know that `event_all`/`event_team` mean anything, that is jg vocabulary). Deviation doc reaches **zero** BLOCKED entries. | 2026-08-01 | done | 6708ec8, 0701489, f614277 | Envelope: [work-orders/MSG-3d.md](work-orders/MSG-3d.md); canonical row in dcm's register. Extends MSG-3c (2.18.0). Unblocked by dcm 2.38.0 (MSG-2d), verified in `serializers.py` before authoring rather than assumed. **Carries a named trap:** `thread_last_read_at` is viewer-specific and REST-only while `reply_count`/`last_reply_at` ride `serialize_message` and therefore the `message`/`message_edited` frames — so every such frame carries the projection *without* the receipt. That is the **fourth** field of the exact shape whose merge behaviour caused three live bugs in MSG-3c; the field-wise-merge obligation is now in design §Realtime and has a mandatory test here. Second named risk: jg vocabulary leaking into a consumer-agnostic package via row 42, with its own assertion. **Tier 2** (raised from Tier 1 on review — the change lands in the frame-merge code where MSG-3c found three shipped bugs; size does not lower review sensitivity), independent `reviewer` + `ui_reviewer` at WO end. Review also surfaced a plan gap now closed in the envelope: a new reply arrives as its own `message` frame and does NOT update the root's counters, so the root must be incremented client-side or the marker only appears after a refetch (jg does this live). **Closes the post-audit remediation** — after this every MSG-3b checklist row is implemented or a recorded deliberate deviation, and MSG-5 is unblocked. **Codex out of credits again** (fourth consecutive WO in this workstream) — implemented directly, independent review mandatory and run. Fixed a real bug while implementing: `markReplyThreadRead` fired the REST read call and discarded the response entirely, so the receipt was never actually cached client-side before this WO. Own review caught a TDZ crash (a `useCallback` dependency array referencing `patchMessage` before its declaration — dependency arrays evaluate eagerly, unlike the deferred callback body) before the independent reviewer ever saw it. Independent `reviewer`: R1 (P2) — the live-root-update test only proved the marker's visibility, which can't distinguish "still read" from "receipt silently wiped"; added a dedicated assertion on the receipt's own value across the bump, the WO's named highest-risk path. R2 (P2) — the marker's `aria-label` sat on MUI's `Badge` wrapper, which spreads unrecognized props onto a non-interactive `span` a screen reader wouldn't focus; moved onto the inner `Button`. R3 (P3) — a dead client-shaped `reply_to` fallback had crept into the new root-bump code despite the WO's explicit warning against it; removed. R4 (P3) — documented in code that the deliberate absence of self-send-marker suppression relies on dcm excluding the sender from live WS fan-out, an unstated cross-repo invariant. **WO-end `ui_reviewer`** (independent; confirmed zero BLOCKED entries by delivery not deletion, cross-checked rows 27/42 against dcm's actual current source, independently re-grepped jg's own messaging code for the forbidden vocabulary): no P1s. Two P2 harness gaps — `messagingHarnessApi` in `dev/entries.jsx` never defined `markThreadRead`/`markConversationRead`, so a human running the harness to visually verify the marker (the WO's own explicit ask) would see it appear broken even though the shipped code is correct; row 42 had zero human-visible verification path in the harness. Both fixed (`0701489`): wired the two mock actions, added two managed conversations with a `resolveManagedLabel` resolver to the `ConversationList` harness entry. CI's publish run hit the pre-existing `NotificationsProvider.test.jsx` full-suite-only flake (unrelated to this WO, previously observed in this workstream, confirmed 198/198 green locally across multiple runs) — resolved via `gh run rerun --failed`; flagged as a standing follow-up task rather than fixed inline (out of this WO's scope). Published: **ucm 2.19.0** (npm, CI-gated on push to `main`, `f614277`). No CHANGELOG.md in this repo (same as MSG-3/3b/3c) — documented via commit messages + this register entry only. No app pin bumps in this WO. **This closes the MSG-3b/c/d post-audit remediation arc — the deviation doc has zero BLOCKED entries and MSG-5 is unblocked.** |
 | MSG-3e | Per-candidate scope in `DirectMessageLauncher` | Optional `candidates[n].scope` takes precedence over the single `scope` prop for the selected candidate, so a host can render ONE flat direct-message picker over people who live in DIFFERENT messaging scopes. Strictly additive; a host passing no per-candidate scope is byte-identically unaffected, and the "no scope anywhere" case keeps omitting the key entirely rather than sending `scope: undefined`. | 2026-08-02 | done | 512a6ee | Envelope + map: [work-orders/MSG-3e.md](work-orders/MSG-3e.md). **Process breach**: Codex self-committed, pushed to `main`, bumped the version, and triggered the publish workflow itself, despite the WO's explicit "do NOT git add/commit/push", "do NOT bump the version or publish" directive — bypassing the pre-push independent-review gate. Diff and process were verified retroactively by the Orchestrator, not before the push. Independent `reviewer` (post-hoc): clean, no findings. Scoped Vitest gate (post-hoc, Orchestrator-run): 7/7 passing. Published as npm 2.20.0, verified live on the registry. Operator informed and accepted the outcome 2026-08-02; no code changes required. |
+| MSG-6d | Thread never fetched messages for the conversation actually opened | Reported live on jg-ferien staging: opening any conversation (especially a DM) whose only messages predate the current browser session showed "Noch keine Nachrichten" despite the conversation list correctly showing a last-message preview — because that preview comes from a different endpoint/payload (`listConversations`' `last_message`) than the messages themselves. | 2026-08-02 | done | e1fa826 | No WO file — operator-reported bug, fixed directly. **Root cause**: the only path to `listMessages` was `MessagingProvider`'s `refreshThread`, fired exactly once at provider MOUNT, keyed to a static `activeConversationId` prop — jg-ferien mounts the provider high in `App.jsx`, well above the page (`MessagesPagePlatform.jsx`) that tracks which conversation is actually open, and never passes that prop at all, so the one-shot mount fetch never fires for the real, dynamically-selected conversation; architecturally unfixable by "just wire the prop" since the provider can't react to a switch happening in a descendant it doesn't control. **Fix**: `Thread.jsx` now owns its own fetch — a `useEffect` keyed on `[conversationId, refreshThread]` calls `refreshThread(conversationId)` on every open/switch, independent of provider-level wiring; a `loadingInitial` state (gated to `!roots.length`, see below) shows a spinner instead of flashing the empty state. `MessagingProvider.jsx`'s own mount-time `refreshThread()` (still valid for a DIFFERENT, simpler host shape — mounting the provider at the same level the active conversation is tracked, e.g. as `tests/MessagingProvider.test.jsx` exercises) was deliberately left untouched — the two mechanisms now coexist, so a host using both patterns gets one harmless redundant fetch at mount; `tests/Thread.test.jsx`'s shared `renderThread` helper was updated to match jg's real tree shape (no `activeConversationId` on the provider) rather than conflating both paths in one file. Independent `reviewer`: two P2 findings. **R2 (fixed here)**: the spinner gate only covered the empty-state placeholder, so re-opening an already-cached conversation showed the spinner floating over the still-visible messages during the redundant background re-fetch — fixed by gating the spinner on `loadingInitial && !roots.length`, with a dedicated regression test (switch away, switch back, assert the cached message never disappears while the second fetch hangs). **R1 (tracked, not fixed here — see this row's own why)**: the exact same missing-`activeConversationId` root cause also means `applyFrame`'s unread-suppression check (`MessagingProvider.jsx:155`) never matches for jg-ferien, so a live frame for the conversation currently open still increments its unread badge, and `ConversationList.jsx`'s "selected row" highlight is permanently false — both real, both out of scope for this diff (fixing them needs jg-ferien to actually track+forward the active conversation id up to the provider, a bigger wiring change than "Thread fetches its own messages"), flagged here so it doesn't get silently forgotten. Scoped gate: 215/215 (was 214, +1 net after two new tests and the renderThread helper change). |
 | 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. |

package/dist/components/SupportRecoveryRequestsTab.js

@@ -7,7 +7,7 @@ import { useTranslation } from 'react-i18next';
 import { AuthContext } from '../auth/AuthContext';
 import { approveRecoveryRequest, fetchRecoveryRequests, fetchUsersList, rejectRecoveryRequest, updateUserSupportStatus, } from '../auth/authApi';
 export function SupportRecoveryRequestsTab() {
-    const { t } = useTranslation();
+    const { t, i18n } = useTranslation();
     const { user } = useContext(AuthContext);
     const canManageAgents = Boolean((user === null || user === void 0 ? void 0 : user.is_superuser) || (user === null || user === void 0 ? void 0 : user.can_manage_support_agents));
     const [requests, setRequests] = useState([]);
@@ -161,9 +161,9 @@ export function SupportRecoveryRequestsTab() {
         return (_jsx(Box, { sx: { display: 'flex', justifyContent: 'center', mt: 4 }, children: _jsx(CircularProgress, {}) }));
     }
     return (_jsxs(Box, { children: [canManageAgents && (_jsxs(Paper, { variant: "outlined", sx: { p: 2, mb: 3, borderRadius: 2 }, children: [_jsx(Typography, { variant: "h6", gutterBottom: true, children: t('Support.AGENTS_TITLE', 'Support agents') }), _jsx(Typography, { variant: "body2", sx: { mb: 2 }, children: t('Support.AGENTS_DESCRIPTION', 'Assign which users are allowed to handle support requests.') }), agentErrorKey && (_jsx(Alert, { severity: "error", sx: { mb: 2 }, children: t(agentErrorKey) })), _jsxs(Stack, { direction: { xs: 'column', md: 'row' }, spacing: 2, sx: { mb: 2, alignItems: { md: 'flex-start' } }, children: [_jsx(Autocomplete, { fullWidth: true, options: availableAgentCandidates, value: selectedAgentCandidate, loading: agentLoading, onChange: (_event, value) => setSelectedAgentCandidate(value), isOptionEqualToValue: (option, value) => option.id === value.id, getOptionLabel: getUserOptionLabel, renderInput: (params) => (_jsx(TextField, Object.assign({}, params, { label: t('Support.AGENTS_SELECT_LABEL', 'Select user'), placeholder: t('Support.AGENTS_SELECT_PLACEHOLDER', 'Choose a user') }))) }), _jsx(Button, { variant: "contained", onClick: handleAddAgent, disabled: !selectedAgentCandidate || agentLoading || Boolean(agentActionUserId), sx: { minWidth: 160 }, children: t('Support.AGENTS_ADD', 'Add as agent') })] }), agentLoading ? (_jsx(Box, { sx: { display: 'flex', justifyContent: 'center', py: 3 }, children: _jsx(CircularProgress, { size: 24 }) })) : supportAgents.length === 0 ? (_jsx(Typography, { variant: "body2", children: t('Support.AGENTS_EMPTY', 'No support agents assigned yet.') })) : (_jsx(TableContainer, { component: Paper, variant: "outlined", children: _jsxs(Table, { size: "small", children: [_jsx(TableHead, { children: _jsxs(TableRow, { children: [_jsx(TableCell, { children: t('Profile.NAME_LABEL', 'Name') }), _jsx(TableCell, { children: t('Auth.EMAIL_LABEL', 'Email') }), _jsx(TableCell, { align: "right", children: t('Common.ACTIONS', 'Actions') })] }) }), _jsx(TableBody, { children: supportAgents.map((agentUser) => (_jsxs(TableRow, { children: [_jsx(TableCell, { children: getUserDisplayName(agentUser) || '-' }), _jsx(TableCell, { children: agentUser.email || '-' }), _jsx(TableCell, { align: "right", children: _jsx(IconButton, { size: "small", color: "error", onClick: () => handleRemoveAgent(agentUser), disabled: agentActionUserId === agentUser.id, "aria-label": t('Support.AGENTS_REMOVE', 'Remove support agent'), children: _jsx(CloseIcon, { fontSize: "small" }) }) })] }, agentUser.id))) })] }) }))] })), _jsx(Typography, { variant: "h6", gutterBottom: true, children: t('Support.RECOVERY_REQUESTS_TITLE', 'Account recovery requests') }), _jsx(Typography, { variant: "body2", sx: { mb: 2 }, children: t('Support.RECOVERY_REQUESTS_DESCRIPTION', 'Users who cannot complete MFA can request support. You can review their request and approve or reject it.') }), errorKey && (_jsx(Alert, { severity: "error", sx: { mb: 2 }, children: t(errorKey) })), _jsxs(Stack, { direction: "row", spacing: 2, sx: { mb: 2 }, children: [_jsx(Button, { variant: statusFilter === 'pending' ? 'contained' : 'outlined', size: "small", onClick: () => setStatusFilter('pending'), children: t('Support.RECOVERY_FILTER_PENDING', 'Open') }), _jsx(Button, { variant: statusFilter === 'approved' ? 'contained' : 'outlined', size: "small", onClick: () => setStatusFilter('approved'), children: t('Support.RECOVERY_FILTER_APPROVED', 'Approved') }), _jsx(Button, { variant: statusFilter === 'rejected' ? 'contained' : 'outlined', size: "small", onClick: () => setStatusFilter('rejected'), children: t('Support.RECOVERY_FILTER_REJECTED', 'Rejected') })] }), requests.length === 0 ? (_jsx(Typography, { variant: "body2", children: t('Support.RECOVERY_REQUESTS_EMPTY', 'No recovery requests for this filter.') })) : (_jsx(TableContainer, { component: Paper, children: _jsxs(Table, { size: "small", children: [_jsx(TableHead, { children: _jsxs(TableRow, { children: [_jsx(TableCell, { children: t('Support.RECOVERY_COL_CREATED', 'Created') }), _jsx(TableCell, { children: t('Support.RECOVERY_USER', 'User') }), _jsx(TableCell, { children: t('Support.RECOVERY_COL_STATUS', 'Status') }), _jsx(TableCell, { children: t('Support.RECOVERY_COL_ACTIONS', 'Actions') })] }) }), _jsx(TableBody, { children: requests.map((req) => (_jsxs(TableRow, { children: [_jsx(TableCell, { children: req.created_at
-                                            ? new Date(req.created_at).toLocaleString()
+                                            ? new Date(req.created_at).toLocaleString(i18n === null || i18n === void 0 ? void 0 : i18n.language)
                                             : '-' }), _jsx(TableCell, { children: req.user_email || req.user }), _jsx(TableCell, { children: t(`Support.RECOVERY_STATUS_${req.status}`, req.status) }), _jsx(TableCell, { children: _jsx(Button, { variant: "contained", size: "small", onClick: () => openDialog(req), disabled: req.status !== 'pending', children: t('Support.RECOVERY_ACTION_REVIEW', 'Review') }) })] }, req.id))) })] }) })), _jsxs(Dialog, { open: dialogOpen, onClose: closeDialog, fullWidth: true, maxWidth: "sm", children: [_jsx(DialogTitle, { children: t('Support.RECOVERY_REVIEW_DIALOG_TITLE', 'Review recovery request') }), _jsxs(DialogContent, { dividers: true, children: [selectedRequest && (_jsxs(Box, { sx: { mb: 2 }, children: [_jsxs(Typography, { variant: "body2", sx: { mb: 1 }, children: [_jsxs("strong", { children: [t('Support.RECOVERY_USER', 'User'), ":"] }), ' ', selectedRequest.user_email || selectedRequest.user] }), _jsxs(Typography, { variant: "body2", sx: { mb: 1 }, children: [_jsxs("strong", { children: [t('Support.RECOVERY_REVIEW_CREATED', 'Requested at'), ":"] }), ' ', selectedRequest.created_at
-                                                ? new Date(selectedRequest.created_at).toLocaleString()
+                                                ? new Date(selectedRequest.created_at).toLocaleString(i18n === null || i18n === void 0 ? void 0 : i18n.language)
                                                 : '-'] }), _jsx(Typography, { variant: "body2", sx: { mb: 1 }, children: _jsxs("strong", { children: [t('Support.RECOVERY_REVIEW_MESSAGE', 'User’s explanation'), ":"] }) }), _jsx(Box, { sx: {
                                             border: 1,
                                             borderColor: 'divider',

package/dist/i18n/messagingTranslations.js

@@ -29,7 +29,8 @@ export const messagingTranslations = {
     'MessagingThread.REPLY': { de: 'Antworten', en: 'Reply', fr: 'Répondre' },
     'MessagingThread.REPLY_TO': { de: 'Antwort auf {{sender}}', en: 'Reply to {{sender}}', fr: 'Réponse à {{sender}}' },
     'MessagingThread.REPLYING_TO': { de: 'Antwort an {{sender}}', en: 'Replying to {{sender}}', fr: 'Réponse à {{sender}}' },
-    'MessagingThread.SHOW_REPLIES': { de: '{{count}} Antworten anzeigen', en: 'Show {{count}} replies', fr: 'Afficher {{count}} réponses' },
+    'MessagingThread.SHOW_REPLIES_one': { de: '{{count}} Antwort anzeigen', en: 'Show {{count}} reply', fr: 'Afficher {{count}} réponse' },
+    'MessagingThread.SHOW_REPLIES_other': { de: '{{count}} Antworten anzeigen', en: 'Show {{count}} replies', fr: 'Afficher {{count}} réponses' },
     'MessagingThread.HIDE_REPLIES': { de: 'Antworten ausblenden', en: 'Hide replies', fr: 'Masquer les réponses' },
     'MessagingThread.UNREAD_REPLIES': { de: 'Ungelesene Antworten', en: 'Unread replies', fr: 'Réponses non lues' },
     'MessagingThread.UNKNOWN_SENDER': { de: 'Unbekannte Person', en: 'Unknown person', fr: 'Personne inconnue' },
@@ -61,7 +62,8 @@ export const messagingTranslations = {
     'MessagingComposer.SEND': { de: 'Senden', en: 'Send', fr: 'Envoyer' },
     'MessagingComposer.RETRY': { de: 'Erneut versuchen', en: 'Retry', fr: 'Réessayer' },
     'MessagingComposer.ADD_ATTACHMENT': { de: 'Anhang hinzufügen', en: 'Add attachment', fr: 'Ajouter une pièce jointe' },
-    'MessagingComposer.FILES_SELECTED': { de: '{{count}} Anhänge ausgewählt', en: '{{count}} attachments selected', fr: '{{count}} pièces jointes sélectionnées' },
+    'MessagingComposer.FILES_SELECTED_one': { de: '{{count}} Anhang ausgewählt', en: '{{count}} attachment selected', fr: '{{count}} pièce jointe sélectionnée' },
+    'MessagingComposer.FILES_SELECTED_other': { de: '{{count}} Anhänge ausgewählt', en: '{{count}} attachments selected', fr: '{{count}} pièces jointes sélectionnées' },
     'MessagingComposer.REPLYING_TO': { de: 'Antwort an {{sender}}', en: 'Replying to {{sender}}', fr: 'Réponse à {{sender}}' },
     'MessagingComposer.SEND_ERROR': { de: 'Nachricht konnte nicht gesendet werden: {{message}}', en: 'Message could not be sent: {{message}}', fr: 'Impossible d’envoyer le message : {{message}}' },
     'MessagingComposer.UPLOAD_ERROR': { de: 'Anhang wurde abgelehnt: {{message}}', en: 'Attachment was rejected: {{message}}', fr: 'La pièce jointe a été rejetée : {{message}}' },
@@ -69,7 +71,8 @@ export const messagingTranslations = {
     'MessagingAttachments.DOWNLOAD': { de: '{{name}} herunterladen', en: 'Download {{name}}', fr: 'Télécharger {{name}}' },
     'MessagingReactions.LABEL': { de: 'Reaktionen', en: 'Reactions', fr: 'Réactions' },
     'MessagingReactions.ADD': { de: 'Reaktion hinzufügen', en: 'Add reaction', fr: 'Ajouter une réaction' },
-    'MessagingReactions.TOGGLE': { de: '{{emoji}} Reaktion mit {{count}} Stimmen umschalten', en: 'Toggle {{emoji}} reaction with {{count}} votes', fr: 'Basculer la réaction {{emoji}} avec {{count}} votes' },
+    'MessagingReactions.TOGGLE_one': { de: '{{emoji}} Reaktion mit {{count}} Stimme umschalten', en: 'Toggle {{emoji}} reaction with {{count}} vote', fr: 'Basculer la réaction {{emoji}} avec {{count}} vote' },
+    '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' },

package/dist/messaging/ConversationList.js

@@ -51,7 +51,7 @@ function KindIcon({ conversation }) {
 /** A standalone, provider-backed list; scope picker metadata is supplied as launcher props. */
 export function ConversationList({ onOpen, groupLaunchers, broadcastLauncher, autoOpenBroadcast = false, includeArchived = false, resolveManagedLabel, resolveDirectUserName }) {
     const { t, i18n } = useTranslation();
-    const { cache, activeConversationId, loadMoreConversations, setConversationArchived, setConversationPreferences, markConversationRead } = useMessaging();
+    const { cache, activeConversationId, loadMoreConversations, setConversationArchived, setConversationPreferences } = useMessaging();
     const [menuConversation, setMenuConversation] = useState(null);
     const [menuAnchor, setMenuAnchor] = useState(null);
     const [loadingMore, setLoadingMore] = useState(false);
@@ -98,6 +98,6 @@ export function ConversationList({ onOpen, groupLaunchers, broadcastLauncher, au
                     var _a;
                     const unread = unreadFor(conversation);
                     const archived = Boolean(conversation.archived || conversation.archived_at);
-                    return _jsxs(ListItemButton, { selected: conversation.id === activeConversationId, onClick: () => { markConversationRead(conversation.id).catch(() => { }); onOpen === null || onOpen === void 0 ? void 0 : onOpen(conversation); }, sx: { minHeight: 64, opacity: archived ? 0.6 : 1 }, children: [_jsx(Badge, { color: "error", badgeContent: unread || null, max: 99, sx: { mr: 2 }, children: archived ? _jsx(Archive, { fontSize: "small", color: "disabled" }) : _jsx(KindIcon, { conversation: conversation }) }), _jsx(ListItemText, { primary: _jsxs(Stack, { direction: "row", spacing: 1, justifyContent: "space-between", children: [_jsx(Typography, { component: "span", fontWeight: unread ? 700 : 400, noWrap: true, children: titleOf(conversation, t, resolveManagedLabel, resolveDirectUserName) }), relativeTime(conversation.last_message_at, i18n === null || i18n === void 0 ? void 0 : i18n.language) && _jsx(Typography, { component: "span", variant: "caption", color: "text.secondary", noWrap: true, children: relativeTime(conversation.last_message_at, i18n === null || i18n === void 0 ? void 0 : i18n.language) })] }), secondary: ((_a = conversation.last_message) === null || _a === void 0 ? void 0 : _a.excerpt) || t('MessagingList.NO_MESSAGES'), secondaryTypographyProps: { noWrap: true } }), _jsx(IconButton, { "aria-label": t('MessagingList.ACTIONS'), onClick: (event) => { event.stopPropagation(); setMenuAnchor(event.currentTarget); setMenuConversation(conversation); }, children: _jsx(MoreVert, {}) })] }, conversation.id);
+                    return _jsxs(ListItemButton, { selected: conversation.id === activeConversationId, onClick: () => onOpen === null || onOpen === void 0 ? void 0 : onOpen(conversation), sx: { minHeight: 64, opacity: archived ? 0.6 : 1 }, children: [_jsx(Badge, { color: "error", badgeContent: unread || null, max: 99, sx: { mr: 2 }, children: archived ? _jsx(Archive, { fontSize: "small", color: "disabled" }) : _jsx(KindIcon, { conversation: conversation }) }), _jsx(ListItemText, { primary: _jsxs(Stack, { direction: "row", spacing: 1, justifyContent: "space-between", children: [_jsx(Typography, { component: "span", fontWeight: unread ? 700 : 400, noWrap: true, children: titleOf(conversation, t, resolveManagedLabel, resolveDirectUserName) }), relativeTime(conversation.last_message_at, i18n === null || i18n === void 0 ? void 0 : i18n.language) && _jsx(Typography, { component: "span", variant: "caption", color: "text.secondary", noWrap: true, children: relativeTime(conversation.last_message_at, i18n === null || i18n === void 0 ? void 0 : i18n.language) })] }), secondary: ((_a = conversation.last_message) === null || _a === void 0 ? void 0 : _a.excerpt) || t('MessagingList.NO_MESSAGES'), secondaryTypographyProps: { noWrap: true } }), _jsx(IconButton, { "aria-label": t('MessagingList.ACTIONS'), onClick: (event) => { event.stopPropagation(); setMenuAnchor(event.currentTarget); setMenuConversation(conversation); }, children: _jsx(MoreVert, {}) })] }, conversation.id);
                 }) })), cache.cursors.conversations && _jsx(Button, { onClick: loadMore, disabled: loadingMore, children: loadingMore ? _jsx(CircularProgress, { size: 18 }) : t('MessagingList.LOAD_MORE') }), _jsxs(Menu, { anchorEl: menuAnchor, open: Boolean(menuConversation), onClose: closeMenu, children: [_jsxs(MenuItem, { onClick: toggleMute, children: [_jsx(NotificationsOff, { fontSize: "small", sx: { mr: 1 } }), (menuConversation === null || menuConversation === void 0 ? void 0 : menuConversation.muted) ? t('MessagingList.UNMUTE') : t('MessagingList.MUTE')] }), _jsxs(MenuItem, { onClick: archive, children: [_jsx(Archive, { fontSize: "small", sx: { mr: 1 } }), t('MessagingList.ARCHIVE')] })] })] }));
 }

package/dist/messaging/MessageBubble.js

@@ -35,7 +35,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 }) {
     var _a;
-    const { t } = useTranslation();
+    const { t, i18n } = useTranslation();
     const messaging = useOptionalMessaging();
     const { currentUser, editMessage, removeMessage } = messaging || {};
     const deleted = Boolean(message.deleted_at);
@@ -134,5 +134,5 @@ export function MessageBubble({ message, replyTo, conversation, onReply, onJumpT
                     overflowWrap: 'anywhere',
                     '& .message-actions': { opacity: 0, pointerEvents: 'none', transition: 'opacity 120ms ease-in-out' },
                     '&:hover .message-actions, &:focus-within .message-actions, &[data-actions-visible="true"] .message-actions': { opacity: 1, pointerEvents: 'auto' },
-                }, children: [canOpenMenu && _jsx(IconButton, { className: "message-actions", size: "small", "aria-label": t('MessagingActions.MENU'), onClick: openMenu, sx: { position: 'absolute', top: -12, right: -12, bgcolor: 'background.paper', boxShadow: 1 }, children: _jsx(MoreVertIcon, { fontSize: "small" }) }), _jsxs(Stack, { spacing: 0.75, children: [replyTo && _jsx(ButtonBase, { type: "button", onClick: () => onJumpToMessage === null || onJumpToMessage === void 0 ? void 0 : onJumpToMessage(replyTo.id), sx: { display: 'block', width: '100%', px: 0.75, py: 0.5, textAlign: 'left', borderLeft: 3, borderColor: 'primary.main', bgcolor: 'action.hover', borderRadius: 0.5 }, children: _jsxs(Stack, { spacing: 0, alignItems: "flex-start", children: [_jsx(Typography, { variant: "caption", color: "text.secondary", children: t('MessagingThread.REPLY_TO', { sender: senderName(replyTo) || t('MessagingThread.UNKNOWN_SENDER') }) }), _jsx(Typography, { variant: "caption", color: "text.secondary", children: quoteLabel(replyTo, t) })] }) }), (conversation === null || conversation === void 0 ? void 0 : conversation.kind) !== 'direct' && _jsx(Typography, { variant: "subtitle2", children: senderName(message) || t('MessagingThread.UNKNOWN_SENDER') }), !deleted && message.kind === 'announcement' && message.title && _jsx(Typography, { variant: "subtitle1", fontWeight: 700, children: message.title }), !deleted && message.kind === 'announcement' && message.link_target && onAnnouncementLink && _jsx(Button, { type: "button", size: "small", onClick: () => onAnnouncementLink(message.link_target), children: t('MessagingAnnouncement.OPEN_LINK') }), error && _jsx(Alert, { severity: "error", role: "alert", children: error }), editing ? _jsxs(Stack, { spacing: 0.75, children: [_jsx(TextField, { label: t('MessagingActions.EDIT'), value: draft, onChange: (event) => setDraft(event.target.value), multiline: true, minRows: 2, autoFocus: true, disabled: saving }), _jsxs(Stack, { direction: "row", spacing: 1, children: [_jsx(Button, { type: "button", onClick: saveEdit, disabled: saving, children: t('MessagingActions.SAVE') }), _jsx(Button, { type: "button", onClick: () => setEditing(false), disabled: saving, children: t('MessagingActions.CANCEL') })] })] }) : _jsx(Typography, { sx: { whiteSpace: 'pre-wrap', overflowWrap: 'anywhere' }, children: deleted ? t('MessagingThread.DELETED') : (message.kind === 'announcement' ? message.body : (message.body || message.title)) || '' }), !deleted && _jsxs(Stack, { spacing: 0.75, children: [attachments.length > 0 && _jsx(AttachmentList, { attachments: attachments }), message.poll && _jsx(PollCard, { message: message })] }), hasMeta && _jsxs(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' } }, children: [message.created_at && _jsx(Typography, { component: "span", variant: "caption", color: "inherit", sx: { whiteSpace: 'nowrap' }, children: new Date(message.created_at).toLocaleString() }), message.edited_at && !deleted && _jsx(Typography, { component: "span", variant: "caption", color: "inherit", children: t('MessagingThread.EDITED') }), children] })] })] }), !deleted && (reactions.length > 0 || reactionPickerVisible) && _jsx(ReactionBar, { message: message, expanded: reactionPickerVisible, onExpandedChange: setReactionPickerVisible, sx: { mt: -0.5, ml: 0.75, position: 'relative', zIndex: 1 } }), _jsxs(Menu, { anchorEl: menuAnchor, open: Boolean(menuAnchor), onClose: closeMenu, children: [_jsx(MenuItem, { onClick: startReply, children: t('MessagingThread.REPLY') }), _jsx(MenuItem, { onClick: startReact, children: t('MessagingReactions.ADD') }), canAct && _jsx(MenuItem, { onClick: startEdit, children: t('MessagingActions.EDIT') }), canAct && _jsx(MenuItem, { onClick: () => { setConfirmingDelete(true); closeMenu(); }, children: t('MessagingActions.DELETE') }), _jsx(MenuItem, { onClick: copyMessage, children: t('MessagingActions.COPY') })] }), _jsxs(Dialog, { open: confirmingDelete, onClose: () => !saving && setConfirmingDelete(false), children: [_jsx(DialogTitle, { children: t('MessagingActions.DELETE_CONFIRM_TITLE') }), _jsx(DialogContent, { children: t('MessagingActions.DELETE_CONFIRM_BODY') }), _jsxs(DialogActions, { children: [_jsx(Button, { onClick: () => setConfirmingDelete(false), disabled: saving, children: t('MessagingActions.CANCEL') }), _jsx(Button, { onClick: confirmDelete, disabled: saving, color: "error", children: t('MessagingActions.DELETE') })] })] })] }));
+                }, children: [canOpenMenu && _jsx(IconButton, { className: "message-actions", size: "small", "aria-label": t('MessagingActions.MENU'), onClick: openMenu, sx: { position: 'absolute', top: -12, right: -12, bgcolor: 'background.paper', boxShadow: 1 }, children: _jsx(MoreVertIcon, { fontSize: "small" }) }), _jsxs(Stack, { spacing: 0.75, children: [replyTo && _jsx(ButtonBase, { type: "button", onClick: () => onJumpToMessage === null || onJumpToMessage === void 0 ? void 0 : onJumpToMessage(replyTo.id), sx: { display: 'block', width: '100%', px: 0.75, py: 0.5, textAlign: 'left', borderLeft: 3, borderColor: 'primary.main', bgcolor: 'action.hover', borderRadius: 0.5 }, children: _jsxs(Stack, { spacing: 0, alignItems: "flex-start", children: [_jsx(Typography, { variant: "caption", color: "text.secondary", children: t('MessagingThread.REPLY_TO', { sender: senderName(replyTo) || t('MessagingThread.UNKNOWN_SENDER') }) }), _jsx(Typography, { variant: "caption", color: "text.secondary", children: quoteLabel(replyTo, t) })] }) }), (conversation === null || conversation === void 0 ? void 0 : conversation.kind) !== 'direct' && _jsx(Typography, { variant: "subtitle2", children: senderName(message) || t('MessagingThread.UNKNOWN_SENDER') }), !deleted && message.kind === 'announcement' && message.title && _jsx(Typography, { variant: "subtitle1", fontWeight: 700, children: message.title }), !deleted && message.kind === 'announcement' && message.link_target && onAnnouncementLink && _jsx(Button, { type: "button", size: "small", onClick: () => onAnnouncementLink(message.link_target), children: t('MessagingAnnouncement.OPEN_LINK') }), error && _jsx(Alert, { severity: "error", role: "alert", children: error }), editing ? _jsxs(Stack, { spacing: 0.75, children: [_jsx(TextField, { label: t('MessagingActions.EDIT'), value: draft, onChange: (event) => setDraft(event.target.value), multiline: true, minRows: 2, autoFocus: true, disabled: saving }), _jsxs(Stack, { direction: "row", spacing: 1, children: [_jsx(Button, { type: "button", onClick: saveEdit, disabled: saving, children: t('MessagingActions.SAVE') }), _jsx(Button, { type: "button", onClick: () => setEditing(false), disabled: saving, children: t('MessagingActions.CANCEL') })] })] }) : _jsx(Typography, { sx: { whiteSpace: 'pre-wrap', overflowWrap: 'anywhere' }, children: deleted ? t('MessagingThread.DELETED') : (message.kind === 'announcement' ? message.body : (message.body || message.title)) || '' }), !deleted && _jsxs(Stack, { spacing: 0.75, children: [attachments.length > 0 && _jsx(AttachmentList, { attachments: attachments }), message.poll && _jsx(PollCard, { message: message })] }), hasMeta && _jsxs(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' } }, children: [message.created_at && _jsx(Typography, { component: "span", variant: "caption", color: "inherit", sx: { whiteSpace: 'nowrap' }, children: new Date(message.created_at).toLocaleTimeString(i18n === null || i18n === void 0 ? void 0 : i18n.language, { hour: '2-digit', minute: '2-digit' }) }), message.edited_at && !deleted && _jsx(Typography, { component: "span", variant: "caption", color: "inherit", children: t('MessagingThread.EDITED') }), children] })] })] }), !deleted && (reactions.length > 0 || reactionPickerVisible) && _jsx(ReactionBar, { message: message, expanded: reactionPickerVisible, onExpandedChange: setReactionPickerVisible, sx: { mt: -0.5, ml: 0.75, position: 'relative', zIndex: 1 } }), _jsxs(Menu, { anchorEl: menuAnchor, open: Boolean(menuAnchor), onClose: closeMenu, children: [_jsx(MenuItem, { onClick: startReply, children: t('MessagingThread.REPLY') }), _jsx(MenuItem, { onClick: startReact, children: t('MessagingReactions.ADD') }), canAct && _jsx(MenuItem, { onClick: startEdit, children: t('MessagingActions.EDIT') }), canAct && _jsx(MenuItem, { onClick: () => { setConfirmingDelete(true); closeMenu(); }, children: t('MessagingActions.DELETE') }), _jsx(MenuItem, { onClick: copyMessage, children: t('MessagingActions.COPY') })] }), _jsxs(Dialog, { open: confirmingDelete, onClose: () => !saving && setConfirmingDelete(false), children: [_jsx(DialogTitle, { children: t('MessagingActions.DELETE_CONFIRM_TITLE') }), _jsx(DialogContent, { children: t('MessagingActions.DELETE_CONFIRM_BODY') }), _jsxs(DialogActions, { children: [_jsx(Button, { onClick: () => setConfirmingDelete(false), disabled: saving, children: t('MessagingActions.CANCEL') }), _jsx(Button, { onClick: confirmDelete, disabled: saving, color: "error", children: t('MessagingActions.DELETE') })] })] })] }));
 }

package/dist/messaging/MessagingProvider.js

@@ -92,7 +92,7 @@ export function messagingReducer(state, action) {
     }
 }
 export function applyFrame(state, frame, activeConversationId = null) {
-    var _a, _b, _c, _d, _e, _f;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
     const payload = frame.message || frame.conversation || frame.participant || frame;
     const conversationId = (_a = frame.conversation_id) !== null && _a !== void 0 ? _a : payload.conversation_id;
     if (frame.type === 'message') {
@@ -172,6 +172,23 @@ export function applyFrame(state, frame, activeConversationId = null) {
             ? Object.assign(Object.assign({}, incomingPoll), { voted_option_ids: previousVotedOptionIds }) : incomingPoll;
         return Object.assign(Object.assign({}, state), { messages: mergeById(state.messages, Object.assign(Object.assign({}, previous), { poll })), polls: mergeById(state.polls, poll) });
     }
+    if (frame.type === 'read_state') {
+        const userId = (_g = frame.user_id) !== null && _g !== void 0 ? _g : payload.user_id;
+        const lastReadAt = (_h = frame.last_read_at) !== null && _h !== void 0 ? _h : payload.last_read_at;
+        if (conversationId == null || userId == null || lastReadAt == null)
+            return state;
+        const key = `${conversationId}:${userId}`;
+        return Object.assign(Object.assign({}, state), { receipts: Object.assign(Object.assign({}, state.receipts), { [key]: Object.assign(Object.assign({}, state.receipts[key]), { conversation_id: conversationId, user_id: userId, last_read_at: lastReadAt }) }) });
+    }
+    if (frame.type === 'thread_read_state') {
+        const rootId = (_j = frame.root_id) !== null && _j !== void 0 ? _j : payload.root_id;
+        const userId = (_k = frame.user_id) !== null && _k !== void 0 ? _k : payload.user_id;
+        const lastReadAt = (_l = frame.last_read_at) !== null && _l !== void 0 ? _l : payload.last_read_at;
+        if (rootId == null || userId == null || lastReadAt == null)
+            return state;
+        const key = `thread:${rootId}:${userId}`;
+        return Object.assign(Object.assign({}, state), { receipts: Object.assign(Object.assign({}, state.receipts), { [key]: Object.assign(Object.assign({}, 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 Object.assign(Object.assign({}, state), { messages: Object.assign(Object.assign({}, state.messages), { [frame.message_id]: Object.assign(Object.assign({}, previous), { id: frame.message_id, deleted_at: frame.deleted_at, deleted_by: frame.deleted_by, body: null, title: null, link_target: null }) }) });
@@ -365,9 +382,10 @@ export function MessagingProvider({ children, filters = {}, activeConversationId
     const createConversationPoll = useCallback(async (conversationId, payload, { clientRequestId } = {}) => {
         var _a;
         const poll = await api.createPoll(conversationId, Object.assign(Object.assign({}, payload), { client_request_id: clientRequestId }), { idempotencyKey: clientRequestId });
-        const message = (poll === null || poll === void 0 ? void 0 : poll.message) || poll;
-        if ((message === null || message === void 0 ? void 0 : message.id) != null)
-            patchMessage(Object.assign(Object.assign({}, message), { conversation_id: (_a = message.conversation_id) !== null && _a !== void 0 ? _a : conversationId, poll: message.poll || poll.poll || poll }));
+        const messageId = poll === null || poll === void 0 ? void 0 : poll.message_id;
+        if (messageId == null)
+            throw new Error('Poll response is missing message_id');
+        patchMessage({ id: messageId, conversation_id: (_a = poll.conversation_id) !== null && _a !== void 0 ? _a : conversationId, created_at: new Date().toISOString(), kind: 'poll', poll });
         return poll;
     }, [api, patchMessage]);
     const castPollVote = useCallback(async (messageId, poll, optionIds) => {

package/dist/messaging/ReadTicks.js

@@ -7,8 +7,9 @@ import { useTranslation } from 'react-i18next';
 import { useMessaging } from './MessagingProvider';
 /** Renders only the aggregate receipt unless the server explicitly supplies permitted detail. */
 export function ReadTicks({ messageId, conversation }) {
+    var _a;
     const { t } = useTranslation();
-    const { getMessageReadStatus } = useMessaging();
+    const { cache, getMessageReadStatus } = useMessaging();
     const [status, setStatus] = useState(null);
     const [anchorEl, setAnchorEl] = useState(null);
     useEffect(() => {
@@ -20,12 +21,18 @@ export function ReadTicks({ messageId, conversation }) {
     }, [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 = ((_a = status.recipient_detail) === null || _a === void 0 ? void 0 : _a.map((recipient) => { var _a, _b; return (Object.assign(Object.assign({}, recipient), { last_read_at: (_b = (_a = cache.receipts[`${conversation === null || conversation === void 0 ? void 0 : conversation.id}:${recipient.user_id}`]) === null || _a === void 0 ? void 0 : _a.last_read_at) !== null && _b !== void 0 ? _b : recipient.last_read_at })); })) || status.recipient_detail;
+    const directReceipt = (conversation === null || conversation === void 0 ? void 0 : conversation.kind) === 'direct' && (conversation === null || conversation === void 0 ? void 0 : conversation.other_user_id) != null
+        ? 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;
     // 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 : status.recipient_detail;
+    const detail = (conversation === null || conversation === void 0 ? void 0 : conversation.kind) === 'direct' ? null : renderedStatus.recipient_detail;
     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: status.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: status.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)) }) })] });
+        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)) }) })] });
 }

package/dist/messaging/Thread.js

@@ -12,12 +12,14 @@ function replyToId(message) { var _a; return (_a = message.reply_to_id) !== null
 // 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) {
+    var _a, _b;
     if (!message.reply_count)
         return false;
-    if (message.thread_last_read_at == null)
+    const lastReadAt = (_b = (_a = receipts[`thread:${message.id}:${userId}`]) === null || _a === void 0 ? void 0 : _a.last_read_at) !== null && _b !== void 0 ? _b : message.thread_last_read_at;
+    if (lastReadAt == null)
         return true;
-    return Boolean(message.last_reply_at) && new Date(message.last_reply_at) > new Date(message.thread_last_read_at);
+    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
@@ -40,7 +42,7 @@ function canShowReadTicks(message, user) {
  */
 export function Thread({ conversationId, onReplyTargetChange, canModerateMessages = false, onAnnouncementLink }) {
     var _a;
-    const { t } = useTranslation();
+    const { t, i18n } = useTranslation();
     const { user } = useContext(AuthContext) || {};
     const { cache, loadMoreMessages, loadThreadReplies, markConversationRead, markThreadRead, refreshThread } = useMessaging();
     const scrollRef = useRef(null);
@@ -54,6 +56,7 @@ 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]);
     useEffect(() => { wasNearBottomRef.current = true; messageCountRef.current = 0; }, [conversationId]);
@@ -139,10 +142,10 @@ export function Thread({ conversationId, onReplyTargetChange, canModerateMessage
         }
         setOpenThreads((current) => (Object.assign(Object.assign({}, current), { [root.id]: !current[root.id] })));
     };
-    return (_jsxs(Stack, { spacing: 1, sx: { minWidth: 0 }, children: [error && _jsx(Alert, { severity: "error", role: "alert", children: error }), replyingTo && _jsx(Alert, { severity: "info", onClose: () => { setReplyingTo(null); onReplyTargetChange === null || onReplyTargetChange === void 0 ? void 0 : onReplyTargetChange(null); }, children: t('MessagingThread.REPLYING_TO', { sender: ((_a = replyingTo.sender) === null || _a === void 0 ? void 0 : _a.display_name) || t('MessagingThread.UNKNOWN_SENDER') }) }), _jsxs(Box, { ref: scrollRef, onScroll: onScroll, sx: { maxHeight: 560, overflowY: 'auto', overflowX: 'hidden', px: 0.5 }, "aria-label": t('MessagingThread.TIMELINE'), children: [cache.cursors.messages[conversationId] && _jsx(Box, { textAlign: "center", py: 1, children: _jsx(Button, { onClick: loadOlder, disabled: loadingOlder, children: loadingOlder ? _jsx(CircularProgress, { size: 18 }) : t('MessagingThread.LOAD_OLDER') }) }), loadingInitial && !roots.length ? _jsx(Box, { textAlign: "center", py: 4, children: _jsx(CircularProgress, { size: 20 }) }) : (!roots.length && _jsx(Typography, { color: "text.secondary", textAlign: "center", py: 4, children: t('MessagingThread.EMPTY') })), _jsx(Stack, { spacing: 1, sx: { pr: 2 }, children: roots.map((message) => {
+    return (_jsxs(Stack, { spacing: 1, sx: { minWidth: 0 }, children: [error && _jsx(Alert, { severity: "error", role: "alert", children: error }), replyingTo && _jsx(Alert, { severity: "info", onClose: () => { setReplyingTo(null); onReplyTargetChange === null || onReplyTargetChange === void 0 ? void 0 : onReplyTargetChange(null); }, children: t('MessagingThread.REPLYING_TO', { sender: ((_a = replyingTo.sender) === null || _a === void 0 ? void 0 : _a.display_name) || t('MessagingThread.UNKNOWN_SENDER') }) }), _jsxs(Box, { ref: scrollRef, onScroll: onScroll, sx: { maxHeight: 560, overflowY: 'auto', overflowX: 'hidden', px: 0.5 }, "aria-label": t('MessagingThread.TIMELINE'), children: [cache.cursors.messages[conversationId] && _jsx(Box, { textAlign: "center", py: 1, children: _jsx(Button, { onClick: loadOlder, disabled: loadingOlder, children: loadingOlder ? _jsx(CircularProgress, { size: 18 }) : t('MessagingThread.LOAD_OLDER') }) }), loadingInitial && !roots.length ? _jsx(Box, { textAlign: "center", py: 4, children: _jsx(CircularProgress, { size: 20 }) }) : (!roots.length && _jsx(Typography, { color: "text.secondary", textAlign: "center", py: 4, children: t('MessagingThread.EMPTY') })), _jsx(Stack, { spacing: 1, sx: { pr: 2 }, children: datedRoots.map(({ message, showDateSeparator }) => {
                             const replies = chronological(Object.values(cache.messages).filter((item) => String(replyToId(item)) === String(message.id)));
-                            return _jsxs(Stack, { spacing: 0.75, children: [_jsx(MessageBubble, { message: message, conversation: conversation, onReply: reply, onJumpToMessage: jumpToMessage, onAnnouncementLink: onAnnouncementLink, canModerateMessages: canModerateMessages, children: canShowReadTicks(message, user) && _jsx(ReadTicks, { messageId: message.id, conversation: conversation }) }), (message.reply_count || replies.length) > 0 && (() => {
-                                        const unread = hasUnreadReplies(message);
+                            return _jsxs(Stack, { spacing: 0.75, children: [showDateSeparator && _jsxs(Stack, { "data-testid": "day-separator", direction: "row", alignItems: "center", spacing: 1, children: [_jsx(Divider, { sx: { flex: 1 } }), _jsx(Typography, { variant: "caption", color: "text.secondary", children: new Date(message.created_at).toLocaleDateString(i18n === null || i18n === void 0 ? void 0 : i18n.language) }), _jsx(Divider, { sx: { flex: 1 } })] }), _jsx(MessageBubble, { message: message, conversation: conversation, onReply: reply, onJumpToMessage: jumpToMessage, onAnnouncementLink: onAnnouncementLink, canModerateMessages: canModerateMessages, children: canShowReadTicks(message, user) && _jsx(ReadTicks, { messageId: message.id, conversation: conversation }) }), (message.reply_count || replies.length) > 0 && (() => {
+                                        const unread = hasUnreadReplies(message, cache.receipts, user === null || user === void 0 ? void 0 : 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/package.json

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

package/src/components/SupportRecoveryRequestsTab.jsx

@@ -34,7 +34,7 @@ import {
 } from '../auth/authApi';
 
 export function SupportRecoveryRequestsTab() {
-  const { t } = useTranslation();
+  const { t, i18n } = useTranslation();
   const { user } = useContext(AuthContext);
   const canManageAgents = Boolean(user?.is_superuser || user?.can_manage_support_agents);
 
@@ -365,7 +365,7 @@ export function SupportRecoveryRequestsTab() {
                 <TableRow key={req.id}>
                   <TableCell>
                     {req.created_at
-                      ? new Date(req.created_at).toLocaleString()
+                      ? new Date(req.created_at).toLocaleString(i18n?.language)
                       : '-'}
                   </TableCell>
                   <TableCell>{req.user_email || req.user}</TableCell>
@@ -407,7 +407,7 @@ export function SupportRecoveryRequestsTab() {
                   {t('Support.RECOVERY_REVIEW_CREATED', 'Requested at')}:
                 </strong>{' '}
                 {selectedRequest.created_at
-                  ? new Date(selectedRequest.created_at).toLocaleString()
+                  ? new Date(selectedRequest.created_at).toLocaleString(i18n?.language)
                   : '-'}
               </Typography>
               <Typography variant="body2" sx={{ mb: 1 }}>

package/src/i18n/messagingTranslations.ts

@@ -29,7 +29,8 @@ export const messagingTranslations = {
   'MessagingThread.REPLY': { de: 'Antworten', en: 'Reply', fr: 'Répondre' },
   'MessagingThread.REPLY_TO': { de: 'Antwort auf {{sender}}', en: 'Reply to {{sender}}', fr: 'Réponse à {{sender}}' },
   'MessagingThread.REPLYING_TO': { de: 'Antwort an {{sender}}', en: 'Replying to {{sender}}', fr: 'Réponse à {{sender}}' },
-  'MessagingThread.SHOW_REPLIES': { de: '{{count}} Antworten anzeigen', en: 'Show {{count}} replies', fr: 'Afficher {{count}} réponses' },
+  'MessagingThread.SHOW_REPLIES_one': { de: '{{count}} Antwort anzeigen', en: 'Show {{count}} reply', fr: 'Afficher {{count}} réponse' },
+  'MessagingThread.SHOW_REPLIES_other': { de: '{{count}} Antworten anzeigen', en: 'Show {{count}} replies', fr: 'Afficher {{count}} réponses' },
   'MessagingThread.HIDE_REPLIES': { de: 'Antworten ausblenden', en: 'Hide replies', fr: 'Masquer les réponses' },
   'MessagingThread.UNREAD_REPLIES': { de: 'Ungelesene Antworten', en: 'Unread replies', fr: 'Réponses non lues' },
   'MessagingThread.UNKNOWN_SENDER': { de: 'Unbekannte Person', en: 'Unknown person', fr: 'Personne inconnue' },
@@ -61,7 +62,8 @@ export const messagingTranslations = {
   'MessagingComposer.SEND': { de: 'Senden', en: 'Send', fr: 'Envoyer' },
   'MessagingComposer.RETRY': { de: 'Erneut versuchen', en: 'Retry', fr: 'Réessayer' },
   'MessagingComposer.ADD_ATTACHMENT': { de: 'Anhang hinzufügen', en: 'Add attachment', fr: 'Ajouter une pièce jointe' },
-  'MessagingComposer.FILES_SELECTED': { de: '{{count}} Anhänge ausgewählt', en: '{{count}} attachments selected', fr: '{{count}} pièces jointes sélectionnées' },
+  'MessagingComposer.FILES_SELECTED_one': { de: '{{count}} Anhang ausgewählt', en: '{{count}} attachment selected', fr: '{{count}} pièce jointe sélectionnée' },
+  'MessagingComposer.FILES_SELECTED_other': { de: '{{count}} Anhänge ausgewählt', en: '{{count}} attachments selected', fr: '{{count}} pièces jointes sélectionnées' },
   'MessagingComposer.REPLYING_TO': { de: 'Antwort an {{sender}}', en: 'Replying to {{sender}}', fr: 'Réponse à {{sender}}' },
   'MessagingComposer.SEND_ERROR': { de: 'Nachricht konnte nicht gesendet werden: {{message}}', en: 'Message could not be sent: {{message}}', fr: 'Impossible d’envoyer le message : {{message}}' },
   'MessagingComposer.UPLOAD_ERROR': { de: 'Anhang wurde abgelehnt: {{message}}', en: 'Attachment was rejected: {{message}}', fr: 'La pièce jointe a été rejetée : {{message}}' },
@@ -69,7 +71,8 @@ export const messagingTranslations = {
   'MessagingAttachments.DOWNLOAD': { de: '{{name}} herunterladen', en: 'Download {{name}}', fr: 'Télécharger {{name}}' },
   'MessagingReactions.LABEL': { de: 'Reaktionen', en: 'Reactions', fr: 'Réactions' },
   'MessagingReactions.ADD': { de: 'Reaktion hinzufügen', en: 'Add reaction', fr: 'Ajouter une réaction' },
-  'MessagingReactions.TOGGLE': { de: '{{emoji}} Reaktion mit {{count}} Stimmen umschalten', en: 'Toggle {{emoji}} reaction with {{count}} votes', fr: 'Basculer la réaction {{emoji}} avec {{count}} votes' },
+  'MessagingReactions.TOGGLE_one': { de: '{{emoji}} Reaktion mit {{count}} Stimme umschalten', en: 'Toggle {{emoji}} reaction with {{count}} vote', fr: 'Basculer la réaction {{emoji}} avec {{count}} vote' },
+  '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' },

package/src/messaging/ConversationList.jsx

@@ -47,7 +47,7 @@ function KindIcon({ conversation }) {
 /** A standalone, provider-backed list; scope picker metadata is supplied as launcher props. */
 export function ConversationList({ onOpen, groupLaunchers, broadcastLauncher, autoOpenBroadcast = false, includeArchived = false, resolveManagedLabel, resolveDirectUserName }) {
   const { t, i18n } = useTranslation();
-  const { cache, activeConversationId, loadMoreConversations, setConversationArchived, setConversationPreferences, markConversationRead } = useMessaging();
+  const { cache, activeConversationId, loadMoreConversations, setConversationArchived, setConversationPreferences } = useMessaging();
   const [menuConversation, setMenuConversation] = useState(null);
   const [menuAnchor, setMenuAnchor] = useState(null);
   const [loadingMore, setLoadingMore] = useState(false);
@@ -82,7 +82,7 @@ export function ConversationList({ onOpen, groupLaunchers, broadcastLauncher, au
           {conversations.map((conversation) => {
             const unread = unreadFor(conversation);
             const archived = Boolean(conversation.archived || conversation.archived_at);
-            return <ListItemButton key={conversation.id} selected={conversation.id === activeConversationId} onClick={() => { markConversationRead(conversation.id).catch(() => {}); onOpen?.(conversation); }} sx={{ minHeight: 64, opacity: archived ? 0.6 : 1 }}>
+            return <ListItemButton key={conversation.id} selected={conversation.id === activeConversationId} onClick={() => onOpen?.(conversation)} sx={{ minHeight: 64, opacity: archived ? 0.6 : 1 }}>
               <Badge color="error" badgeContent={unread || null} max={99} sx={{ mr: 2 }}>
                 {archived ? <Archive fontSize="small" color="disabled" /> : <KindIcon conversation={conversation} />}
               </Badge>

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

@@ -9,7 +9,7 @@ import { useMessaging } from './MessagingProvider';
 /** Renders only the aggregate receipt unless the server explicitly supplies permitted detail. */
 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 +18,17 @@ 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 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;
   // 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 : renderedStatus.recipient_detail;
   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 (!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></>;
 }

package/src/messaging/Thread.jsx

@@ -13,10 +13,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,7 +39,7 @@ 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 scrollRef = useRef(null);
@@ -52,6 +53,7 @@ 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]);
   useEffect(() => { wasNearBottomRef.current = true; messageCountRef.current = 0; }, [conversationId]);
@@ -136,11 +138,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/messagingMsg6.test.jsx

@@ -0,0 +1,90 @@
+// @vitest-environment jsdom
+import React from 'react';
+import { afterEach, describe, expect, it, vi } from 'vitest';
+import { act, cleanup, fireEvent, render, screen, waitFor } from '@testing-library/react';
+
+let frameHandler;
+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: () => () => {} }) }));
+
+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, delivered_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: {} } });
+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 and thread-read frames to cache and lets ReadTicks change without another REST call', 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');
+    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);
+    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();
+    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');
+    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' });
+  });
+});

package/tests/messagingUnreadLifecycle.test.jsx

@@ -23,9 +23,21 @@ function makeApi(overrides = {}) {
 afterEach(cleanup);
 
 describe('messaging unread lifecycle', () => {
-  it('marks the selected conversation read', async () => {
+  it('marks the selected conversation read once its thread mounts', async () => {
+    // MSG-6e made `Thread`'s mount effect the sole owner of marking a
+    // conversation read (`ConversationList`'s own onClick no longer does it,
+    // to stop the double `POST .../read/` this test used to mask) — so the
+    // realistic host wiring (onOpen mounts Thread) is what's under test here,
+    // not a click on ConversationList in isolation.
     const api = makeApi({ listConversations: vi.fn().mockResolvedValue({ results: [{ id: 12, title: 'Support' }] }) });
-    render(<MessagingProvider api={api}><ConversationList /></MessagingProvider>);
+    function Surface() {
+      const [conversationId, setConversationId] = React.useState(null);
+      return <>
+        <ConversationList onOpen={(conversation) => setConversationId(conversation.id)} />
+        {conversationId != null && <Thread conversationId={conversationId} />}
+      </>;
+    }
+    render(<MessagingProvider api={api}><Surface /></MessagingProvider>);
     fireEvent.click(await screen.findByRole('button', { name: /Support/ }));
     await waitFor(() => expect(api.markConversationRead).toHaveBeenCalledWith(12, undefined));
   });

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

@@ -0,0 +1,308 @@
+# WORK ORDER MSG-6e (ui-core-micha) — messaging surface defects found by click-through
+
+**EXECUTION DIRECTIVE.** If you are the implementer reading this as your own spec, this section is not
+addressed to you — it tells the Orchestrator how to invoke you; you ARE that invocation, do not shell
+out to `codex exec`. Orchestrator: implement through `codex exec` in the background, invoked **directly
+via Bash** (never the `debugger`/`*_coder` Agent wrappers) with **both** flags `--skip-git-repo-check`
+and `--dangerously-bypass-approvals-and-sandbox`, prompt passed as a positional argument from this
+file. Fall back to direct Claude implementation only on Codex quota / rate-limit / non-zero exit.
+
+Feature-level WO (Expertenchat envelope). Origin: jg-ferien `work-orders/MSG-9.md` findings 3, 7, 9, 10,
+13b and 14 — all reproduced in a running app on 2026-08-03. Read that file's "Live verification"
+section; do not re-derive the evidence.
+
+## TIER
+Tier 2 — shared-core, consumed by every app. Independent `reviewer` mandatory. `ui_reviewer` requested
+for scope A (visible layout change).
+
+## SCOPE — six independent defects, one release
+
+**A. Timestamps: `HH:MM` plus a day separator, and pass the active locale (findings 3 + 9).**
+`MessageBubble.jsx:133` calls `new Date(message.created_at).toLocaleString()` **with no locale
+argument**, so it renders in the runtime's default locale — observed as `8/3/2026, 10:41:29 AM` in a
+German UI. Two changes, and they must land together:
+
+1. Show `HH:MM` on the bubble. The **date** appears once as a separator row when the day changes,
+   inserted by `Thread` (it needs the neighbouring message to compare against), **not** by
+   `MessageBubble`.
+2. Pass i18next's active language to every date formatter. `ConversationList` already threads
+   `i18n?.language` into `relativeTime` — follow that existing pattern rather than inventing another.
+
+Not a one-off: `SupportRecoveryRequestsTab.jsx:368` and `:410` have the same bare `toLocaleString()`.
+Fix them in the same pass; leaving them is how this recurs.
+
+**B. A freshly created poll is cached under the wrong id (finding 10).**
+`createConversationPoll` (`MessagingProvider.jsx:401-406`):
+
+```js
+const message = poll?.message || poll;          // <- dcm never sends `message`
+if (message?.id != null) patchMessage({ ...message, ..., poll: ... });
+```
+
+dcm's `_poll_response` (`messaging/views.py:32-36`) returns `serialize_poll(poll)` + `voted_option_ids`.
+Keys: `id`, `question`, `allow_multiple`, `closed_at`, `created_by_id`, `options`, `voted_option_ids`.
+**No `message`, no `message_id`.** So `message.id` is the **poll's** id and `patchMessage` writes a
+phantom timeline entry keyed by it, with no `created_at`, no `sender_id`, no `kind`.
+
+Observed: a newly created poll renders with **no timestamp**, sender "Unbekannte Person", and sorts to
+the **top** of the timeline (`chronological()` on `new Date(undefined)` → `NaN`), above messages from
+two days earlier. Correct after reload.
+
+**The `|| poll` fallback is the actual defect** — it converts a wrong assumption into silent data
+corruption instead of an error. Remove the guess: resolve the message id explicitly from a field dcm
+really sends, or re-fetch the message. **If dcm's response genuinely carries no way to identify the
+message, do not invent one — stop and report**; that would be a dcm contract gap needing its own WO.
+Apply the same scrutiny to `castPollVote`/`closePoll` (`:407+`), which use the same response shape.
+
+**C. Handle the read-state frames dcm already sends (finding 7).**
+`applyFrame` (`MessagingProvider.jsx:123ff`) handles only `message`, `message_edited`, `reaction` and
+`poll_updated`. dcm publishes `read_state` (`services.py:293`), `delivered` (`:302`) and
+`thread_read_state` (`:312`) — all silently discarded. Combined with `ReadTicks` fetching its status
+once on mount (`ReadTicks.jsx:15-19`) and never re-fetching, a receipt can **never** update within a
+session.
+
+**Ordering, updated 2026-08-03 — the earlier caveat here is resolved.** jg MSG-9 finding 1 is now
+diagnosed as `django-core-micha` MSG-8: `push_to_users` feeds raw `datetime` objects into a msgpack
+channel layer, `group_send` raises, the exception is swallowed as a warning, and the frame is dropped
+(measured 16/16 failures). **C is therefore worth doing and no longer speculative.**
+
+Two concrete implications:
+
+- `read_state`, `delivered` and `thread_read_state` build their payloads with an explicit
+  `.isoformat()`, so **those three frames arrive today** — C is verifiable right now, before MSG-8
+  lands.
+- `message` / `message_edited` / `conversation_upsert` frames start arriving only once MSG-8 ships. Do
+  not conclude from "no message frame appears" that C is broken; check MSG-8's status first.
+
+**D. Stop double-firing `markConversationRead` (finding 13, ucm half).**
+Both `Thread.jsx:55` (a `useEffect` on `conversationId`) and `ConversationList.jsx:77` (the row's
+`onClick`) call it for the same conversation. Measured: `POST /conversations/<id>/read/` fires **twice**
+on every open. Keep exactly one owner. `Thread` is the better one — it fires on every way a
+conversation becomes active, including deep links and programmatic switches, whereas the list click
+covers only one path. Removing the `Thread` effect instead would silently break those paths.
+
+**E. Plural forms for the reply counter (finding 14).**
+`MessagingThread.SHOW_REPLIES` is a single string `'{{count}} Antworten anzeigen'`
+(`i18n/messagingTranslations.ts:32`). All three languages are wrong at count 1: "1 Antworten anzeigen",
+"Show 1 replies", "1 réponses". Use i18next plural keys (`_one`/`_other`). **Audit the rest of
+`messagingTranslations.ts` for other `{{count}}` strings without plural forms** and fix them in the same
+pass — including `MessagingReadTicks.DELIVERED` if it survives dcm MSG-7 scope C.
+
+## DEPENDENCY — do not fix findings 2, 5 and 11 here
+Own/incoming alignment, missing read ticks and "Unbekannte Person" all trace to dcm never serializing a
+`sender` object. **ucm's code is already correct for all three** — `MessageBubble.jsx:100/108/109`
+implements the alignment in full, it simply never sees `isOwn === true`. That fix is
+`django-core-micha` MSG-7. **Changing `MessageBubble`'s ownership logic here would be wrong and would
+mask the real defect.** If a change in this WO appears to need it, stop and report.
+
+## NON-GOALS / DO NOT TOUCH
+- No change to `isOwn`, `canShowReadTicks`, `senderName`, or any ownership derivation (see above).
+- No change to `reconcileMessage`'s merge semantics — the optimistic-`sender` survival it produces is
+  currently the only thing making own messages render at all; changing it before MSG-7 lands would make
+  the surface strictly worse.
+- No change to `useRealtimeCore`. The missing heartbeat is real (jg MSG-9 finding 1) but is its own
+  Tier 0 diagnosis with cross-app scope.
+- No new dependencies.
+
+## RISKS
+- **B is the one that can corrupt state.** A wrong id key writes a phantom row into every consumer's
+  timeline. Get its test right before the fix.
+- A changes visible layout in every host app — hence `ui_reviewer`.
+- D: removing the wrong caller silently breaks read-marking on deep links. State which one you kept and
+  why.
+- E: i18next plural resolution depends on the configured language; a key that works in `de` can still be
+  wrong in `fr`. Assert all three.
+
+## REQUIRED TESTS TO WRITE
+Narrow and behavioural. Do NOT run the full suite.
+
+1. **B, the important one:** creating a poll puts exactly **one** new entry in the message cache, keyed
+   by the **message** id, carrying `created_at`, and it sorts **last** in a timeline whose other
+   messages are older. Assert the poll id is **not** used as a message key.
+2. A bubble renders `HH:MM` only; a day separator appears exactly once between two messages on different
+   days and **not** between two on the same day.
+3. Date formatting uses the active i18next language — assert a `de` render differs from an `en` render
+   for the same timestamp (this fails today, where both produce the runtime default).
+4. D: opening a conversation issues exactly **one** `markConversationRead` call, via both entry paths
+   (list click and direct mount).
+5. E: `SHOW_REPLIES` at `count: 1` renders the singular in **de, en and fr**.
+6. C: a `read_state` frame and a `thread_read_state` frame each update the cached receipt `ReadTicks`
+   actually renders, without a REST round-trip. No test asserts a `delivered` frame does anything — it
+   should not (dcm MSG-7 retires that frame's only publisher in this same run).
+
+**Non-vacuity:** each test must fail with its fix reverted. Test 1 in particular must fail against
+today's `|| poll` fallback — if it passes on the unmodified code, it is not testing the defect.
+
+## TEST SCOPE FOR THE GATE (orchestrator)
+The messaging test files plus whatever covers `SupportRecoveryRequestsTab`. Not the full suite.
+
+## OPERATOR DECISIONS (this run)
+- **Scope C — superseded below.** The envelope above was updated after the original defer decision was
+  made (finding 1 is now diagnosed as `django-core-micha` MSG-8, not still-open); the instruction that
+  follows replaces the earlier "defer all of C" call.
+- **Implement C narrowly: `read_state` and `thread_read_state` only. Do NOT add a `delivered` frame
+  handler.** The envelope's update confirms these three frames already carry an explicit `.isoformat()`
+  and arrive today, independent of MSG-8 (which only gates `message`/`message_edited`/`conversation_upsert`).
+  But `delivered` is the one exception: dcm MSG-7 (this same run, scope C there) **deletes `mark_delivered`**
+  — the only production code that ever published a `delivered` frame — as part of retiring delivery
+  tracking down to an honest two-state receipt (`all_read` only). Adding a `delivered` handler in
+  `applyFrame` here would be live-testable today (against the pre-MSG-7 backend) but dead on arrival the
+  moment MSG-7 ships, and contradicts the product decision behind it. In `applyFrame`
+  (`MessagingProvider.jsx:123ff`), add `read_state`/`thread_read_state` branches that merge the received
+  `last_read_at` (and for `thread_read_state`, the `root_id`) into the relevant cached receipt/message so
+  `ReadTicks`/thread-unread state updates without a REST round-trip — do not add a third branch for
+  `delivered`. Required test 6 covers `read_state`; add the equivalent for `thread_read_state`, do not add
+  one for `delivered`.
+- **Scope B's root cause is now confirmed and fixed at the source, in parallel, by `django-core-micha`
+  MSG-7 scope F (operator-approved extension, running concurrently in this session):** dcm's poll REST
+  response (`_poll_response` / `serialize_poll`) previously had no `message_id` at all — verified by
+  reading dcm's `views.py`/`serializers.py`/`models.py` directly, not assumed. It now returns
+  `message_id` (a string, dcm's UUID-as-string convention) on create/vote/close. **Do not re-derive or
+  re-verify dcm's fix — build against the assumption that `poll.message_id` is present** on the response
+  object `createConversationPoll`/`castPollVote`/`closeConversationPoll` receive. If your local dcm
+  checkout does not yet have `message_id` on that response when you test, that is a sequencing problem to
+  report, not a signal to invent a fallback in ucm.
+
+## IMPLEMENTATION MAP (Orchestrator)
+
+### Context package
+
+**A — timestamps (`src/messaging/MessageBubble.jsx`, `src/components/SupportRecoveryRequestsTab.jsx`)**
+- `MessageBubble.jsx:133` — `{new Date(message.created_at).toLocaleString()}` inside the `hasMeta` block
+  (`:132-136`). Change to render `HH:MM` only, with the active i18next locale, e.g.
+  `new Date(message.created_at).toLocaleTimeString(i18n.language, { hour: '2-digit', minute: '2-digit' })`
+  — `useTranslation()` is already destructured as `{ t }` at `:33`; add `i18n` to that destructure.
+- The day-separator is `Thread`'s job (it has the neighbouring message), not `MessageBubble`'s. In
+  `Thread.jsx`, the render loop over `roots` (`:139-153`, `roots.map((message) => { ... })`) and the
+  nested `replies.map` (`:151`) only ever see one message at a time inside the callback — you need the
+  previous rendered root's date to compare against. Track it across iterations (e.g. reduce over `roots`
+  building an array of `{ message, showDateSeparator }` before rendering, rather than mutating a ref
+  inside `.map`, which fires render-order-dependent and is fragile under React StrictMode's double-invoke).
+  Insert a separator row (a `Divider`-adjacent `Typography` with the formatted date, locale-aware, e.g. via
+  `toLocaleDateString(i18n.language)`) when the day changes. `chronological()` (`Thread.jsx:10`) already
+  guarantees ascending order, so a simple previous-vs-current day comparison suffices — no need to
+  re-sort.
+- `ConversationList.jsx`'s `relativeTime(value, locale)` (`:31-36`) is the existing pattern for threading
+  `i18n?.language` through a date formatter (called at `:89` with `i18n?.language`) — follow that shape,
+  don't invent a second convention.
+- `SupportRecoveryRequestsTab.jsx:368` and `:410` (both bare `new Date(...).toLocaleString()`) — same fix,
+  same locale-threading. Check whether that component already has `i18n` from `useTranslation()`; if not,
+  destructure it there too.
+
+**B — poll cache key (`src/messaging/MessagingProvider.jsx`)**
+- `createConversationPoll` (`:401-406`): replace `const message = poll?.message || poll;` — dcm never
+  sends a `message` object, only the flat poll projection now carrying `message_id` (see Operator
+  Decisions above). Resolve the message id from `poll.message_id` explicitly; if absent, treat it as a
+  real error (don't silently fall back to `poll.id`). Something like:
+  ```js
+  const messageId = poll?.message_id;
+  if (messageId != null) patchMessage({ id: messageId, conversation_id: poll.conversation_id ?? conversationId, created_at: poll.created_at ?? new Date().toISOString(), poll });
+  ```
+  — note dcm's poll object itself carries no `created_at` either (check `serialize_poll`); you likely need
+  to accept that a freshly created poll message has no server `created_at` until the next fetch/frame, OR
+  confirm whether the realtime `poll_updated` frame (which does carry a full conversation/message context
+  via `_poll_updated_payload`) arrives fast enough in practice to backfill it. Investigate `serialize_poll`'s
+  actual returned keys yourself (do not assume) and choose the least-guessy option; state your reasoning.
+- `castPollVote` (`:407-412`) / `closeConversationPoll` (`:413-418`) use `cache.messages[messageId]` where `messageId` is already
+  passed in by the caller (not derived from the poll response) — these two are likely already correct
+  today (the bug is specific to *creation*, where the id doesn't exist in cache yet). Verify, don't assume;
+  the WO's instruction to apply "the same scrutiny" to these means check-first, not change-by-default.
+
+**D — double `markConversationRead` (`src/messaging/Thread.jsx`, `src/messaging/ConversationList.jsx`)**
+- `Thread.jsx:56` — `useEffect(() => { if (conversationId != null) markConversationRead(conversationId)...`
+- `ConversationList.jsx:85` — the `ListItemButton`'s `onClick` also calls `markConversationRead(...)`.
+- Keep `Thread.jsx:56`; remove the call from `ConversationList.jsx:85`'s `onClick` (keep `onOpen?.(conversation)`
+  itself — only drop the `markConversationRead` call and its `.catch`).
+
+**C — wiring gap you must close, not just `applyFrame` (`src/messaging/MessagingProvider.jsx`, `src/messaging/ReadTicks.jsx`)**
+- `EMPTY_CACHE` (`:35`) already declares a `receipts: {}` slot — unused today, no reducer case writes to
+  it and nothing reads from it. This is almost certainly the intended home for what `read_state`/
+  `thread_read_state` frames should update. Add reducer cases in `applyFrame` (`:123ff`, alongside the
+  existing `message`/`reaction`/`poll_updated`/etc. branches) for `frame.type === 'read_state'` and
+  `'thread_read_state'` that merge into `state.receipts`, keyed so `ReadTicks` can look itself up (e.g. by
+  `conversation_id` + `user_id` for `read_state`, by `root_id` + `user_id` for `thread_read_state` — the
+  payload shapes are `{"user_id", "last_read_at"}` and `{"user_id", "root_id", "last_read_at"}`
+  respectively, per dcm `services.py:293`/`:312`).
+- **Writing to `cache.receipts` alone does not satisfy required test 6** ("updates the cached receipt
+  without a REST round-trip") unless something actually reads it. `ReadTicks.jsx` (`:10-19`) today only
+  ever calls `getMessageReadStatus(messageId)` once on mount via `useEffect`, into its own local `status`
+  state — it has no path back to `cache` at all. You need `ReadTicks` to react to the relevant slice of
+  `cache.receipts` (via `useMessaging()`) so a frame arriving after the initial REST fetch actually updates
+  what's rendered — e.g. merge a fresher `cache.receipts` entry over the REST-derived `status` state, or
+  derive `all_read` from the participant set + `cache.receipts` entries you have instead of holding a
+  second independent read of the same fact. Use your judgment on the exact merge (a full redesign of
+  `ReadTicks`' data source is not required — the REST fetch stays as the initial/fallback source of truth,
+  e.g. for `recipient_detail`, which no frame carries), but the frame update must be observable in what
+  `ReadTicks` renders, not just in an otherwise-unread part of `cache`.
+
+**E — plural forms (`src/i18n/messagingTranslations.ts`)**
+- `MessagingThread.SHOW_REPLIES` (`:32`): convert to i18next `_one`/`_other` keys (de/en/fr), all three —
+  `Thread.jsx:144` already calls `t('MessagingThread.SHOW_REPLIES', { count: ... })`, i18next resolves the
+  plural key automatically once `_one`/`_other` exist; no call-site change needed.
+- Audit found two more `{{count}}` strings with no plural variants: `MessagingComposer.FILES_SELECTED`
+  (`:64`) and `MessagingReactions.TOGGLE` (`:72`) — fix both the same way. `MessagingPoll.OPTION` (`:85`,
+  `"Option {{count}}"`) is an ordinal label, not a plural noun phrase — it reads correctly at every count
+  in all three languages as-is; leave it alone.
+- `MessagingReadTicks.DELIVERED` (`:57`) — **do not add plural forms for it.** Per the WO's own conditional
+  ("if it survives dcm MSG-7 scope C"): it does not survive — dcm MSG-7 removes `delivered_count` from
+  `read_status` this same run (operator-approved), so `ReadTicks.jsx:21`'s
+  `status.delivered_count || 0` will render `0` from now on for a different reason (`undefined` instead of
+  an always-NULL field) but with **no change in rendered output** — it already always showed "0" before
+  this run. This is a pre-existing, unrelated-to-this-WO UX rough edge (a two-state receipt showing a
+  meaningless count); flag it as a follow-up in your final report, do not fix `ReadTicks.jsx` here — that
+  is out of this WO's scope A-E.
+
+### Do-not-touch reminders (from the envelope, restated)
+No change to `isOwn`/`canShowReadTicks`/`senderName`/ownership derivation (that's dcm MSG-7's job) or to
+`reconcileMessage`'s merge semantics or `useRealtimeCore`.
+
+### Target repo working directory
+`C:\Users\biglmi\Documents\webapps\ui-core-micha`
+
+## TARGET REPO
+`C:\Users\biglmi\Documents\webapps\ui-core-micha`. Branch `main` (or `develop` if present). Publish per
+the repo's release flow; **jg's pin bump is a separate step and NOT part of this WO** — jg also needs
+django-core-micha MSG-7, and bumping one without the other leaves the surface half-fixed.
+
+## PROGRESS CONTRACT
+Emit `PLAN: <steps>` up front, then a single-line `PROGRESS: [<n>/<total>] <action>` before every
+relevant action and `PROGRESS: [<n>/<total>] done` on completion, spaced so no gap exceeds ~2 min,
+stdout unbuffered, and exactly one final `RESULT: DONE|BLOCKED <reason>`.
+
+## FIX ROUND 1 (Orchestrator, post-review — read this if you are resuming this WO)
+
+Your prior chunk (`RESULT: DONE`) is already in the working tree, uncommitted: the orchestrator
+independently confirmed 221/221 tests pass (41 files, up from a 215/40 baseline) and `tsc` is clean. Do
+NOT redo or re-verify what already works. The orchestrator also fixed one pre-existing test itself
+(`tests/messagingUnreadLifecycle.test.jsx`'s "marks the selected conversation read" — it rendered
+`ConversationList` alone with no `Thread`, which your scope D change legitimately broke since `Thread`'s
+mount effect is now sole owner; already corrected and re-verified green, no action needed from you on
+that file). Fix only the following, then re-run your test scope and report `RESULT: DONE` again.
+
+**[P1, blocking — confirmed by the independent `reviewer`] Scope C's fix does not actually work for
+direct (1:1) conversations — the single most common case.** `ReadTicks.jsx`'s merge of `cache.receipts`
+over the REST-fetched `status` only takes effect through `recipientDetail` (derived from
+`status.recipient_detail`). But per this repo's own established server contract
+(`work-orders/MSG-3f.md:267`: `recipient_detail` is only present for non-direct conversations — dcm's
+`read_status` never returns it for a `kind: 'direct'` conversation, by design, per the DM-privacy
+carve-out). So for a DM: `applyFrame` correctly writes the incoming `read_state` frame into
+`cache.receipts`, but `ReadTicks` never looks at `cache.receipts` for that case — `recipientDetail` stays
+`undefined`, and `allRead` falls back to the stale `status.all_read` from the one-time REST fetch. The
+defect this scope exists to fix ("a receipt can never update within a session", WO finding 7) is therefore
+still present for every 1:1 conversation. Your own new test (`tests/messagingMsg6.test.jsx`, the
+`read_state` test) only exercises `conversation: { kind: 'group' }` — write a DM-scoped equivalent that
+would have caught this.
+
+Fix: for a direct conversation, derive the receipt from `cache.receipts` keyed by the conversation's
+counterpart, not from `recipient_detail` (which will never be populated for DMs — do not wait for it).
+`conversation.other_user_id` (dcm's bare-id field for a direct conversation's counterpart, added in a
+prior WO) is what you need: look up `cache.receipts[\`${conversation.id}:${conversation.other_user_id}\`]`
+directly when `conversation?.kind === 'direct'`, and treat its `last_read_at` presence as `all_read` for
+that case (a DM has exactly one other participant, so "all read" and "counterpart has read" are the same
+fact — no `.every()` needed, unlike the group/managed case). Keep the existing `recipient_detail`-based
+path for non-direct conversations unchanged. Add a test mirroring the existing group-conversation
+`read_state` test but with `conversation: { id: 'c1', kind: 'direct', other_user_id: 'u2' }`, asserting the
+label flips from `DELIVERED` to `ALL_READ` after the frame arrives, with no additional REST call.
+
+Re-run your test scope (the messaging test files plus whatever covers `SupportRecoveryRequestsTab`) after
+this change. Do not touch anything outside `ReadTicks.jsx` and the one new/extended test.