@micha.bigler/ui-core-micha 2.20.0 → 2.21.0

package/WORK_ORDERS.md

@@ -33,4 +33,5 @@ prefixed ID; never reuse a bare flat number across workstreams.
 | MSG-3b | Close the MSG-3 parity and contract gaps | Capability-checklist WO closing what MSG-3 missed: the entire unread lifecycle (mark-read never called — badges once raised never clear), message edit/delete + action menu, the DM launcher (`createDirectConversation` had no caller — the case MSG-2b unblocked in the backend), broken reply grouping (`serialize_message` emits `reply_to_id`, `Thread.jsx:40,62` reads `reply_to`, so every server-loaded reply renders as a root), quoted reply previews + jump-to-original, copy, client-side image compression, staged-image previews, upload progress, composer emoji insertion, relative timestamps, active-row highlight, announcement deep-link rendering. Plus a contract-conformance test and a corrected deviation list. | 2026-07-31 | done | c164db3, db8cd92, 61ed3b8, 7253172, fadb60a, 646fd01, 9748aca | Extends the landed MSG-3 (2.16.0), convention as MSG-2b/NOTIF-8b. Envelope: [work-orders/MSG-3b.md](work-orders/MSG-3b.md). Tier 2. **Origin: a three-way audit** (jg capability baseline / ucm wired-vs-adapter-only inventory / dcm contract-coverage sweep) run after MSG-3 was marked done. MSG-3 had 139/139 green, five per-chunk reviews and a clean `ui_reviewer`, and still missed all of it — **because both sides were tested against themselves**: dcm against its services, ucm against a mock whose surface mirrors the provider rather than the contract, so an endpoint with no caller is structurally invisible. Second cause: "no jg feature is lost" was made binding without anyone writing the feature list first, and the deviation list meant to prove parity was authored by the party doing the work; its "Final parity confirmation" section claims completeness and is demonstrably false. This WO's checklist IS the spec (59 rows, each OK/DEV/MISSING/BROKEN/PARTIAL/BLOCKED; the review corrected one false OK — row 5, unread never live-updates at all); the contract-conformance test is the systemic fix. **Rows 38, 51-53, 56-58 are BLOCKED on dcm** (`MSG-2c`, not yet cut): no `serialize_poll` exists at all so `PollCard` reads fields no endpoint returns — and the design specifies no poll read path either, so `messaging-platform.md` must be amended first; `services.py` has 3 `_publish` call sites for 12 designed frames, so reaction/poll live sync cannot work; `serialize_conversation` omits `last_message`, so the list preview is permanently empty. Carries `ui_reviewer` at WO end, which must check the corrected deviation list against the checklist row by row. **All 6 chunks implemented, independently reviewed and committed** (chunk 1: unread lifecycle end-to-end + contract-conformance test, own-fix for a markThreadRead failure silently blocking thread-open; chunk 2: `reply_to`/`reply_to_id` fix + quoting/jump-to-original, row 27 found and recorded BLOCKED (no dcm thread-receipt read path) after an independent-review P1 caught it being silently dropped first time; chunk 3: message action menu/edit/delete/copy with a host-supplied moderator capability prop (dcm exposes no server-side capability field), fixed an undefined-vs-undefined author-match bug; chunk 4: `DirectMessageLauncher` wiring `createDirectConversation`, fixed jest-dom-matcher and MUI-dialog-transition-timing test issues after Codex's own verification pass died without a `RESULT:` line; chunk 5: composer shortcuts/previews/compression/emoji, fixed Codex settling for indeterminate-only upload progress by threading real `onUploadProgress` through the adapter as the WO asked, fixed missing diacritics in new translations (same bug class caught once before in MSG-3), corrected an unverified poll/attachment-mutual-exclusivity claim before it could land in the deviation doc; chunk 6: list/timeline polish (relative timestamps, auto-scroll, announcement links, DM sender-suppression, read-receipt popover) plus the full deviation-doc rewrite against all 59 checklist rows — fixed a repeat of an already-once-fixed raw-interactive-element pattern, corrected an overclaiming doc line, fixed a stale-ref edge case in auto-scroll). Row 42 (managed all-vs-team) also verified genuinely BLOCKED — dcm has `external_key` but never serializes it. **WO-end `ui_reviewer`** (independent, row-by-row cross-check of `docs/messaging-deviations.md` against landed code for all 59 checklist rows, per the WO's binding "the review that signed off the false completeness claim is the one this WO exists to correct" instruction): no findings — every OK/DEV/BLOCKED row verified against actual code, not against the doc's own claims; translation coverage, DX-1 harness coverage, design-system/dark-mode/reuse all checked clean. Published: **ucm 2.17.0** (npm, CI-gated on push to `main`, `9748aca`). No CHANGELOG.md in this repo (same as NOTIF-12/NOTIF-13/MSG-3) — documented via commit messages + this register entry only. No app pin bumps in this WO. |
 | 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 | planned | | Envelope + map: [work-orders/MSG-3e.md](work-orders/MSG-3e.md). Driver is jg-ferien MSG-6 (global inbox across all of a user's events; a jg DM is event-scoped, so a flat "everyone I may DM" list carries a different scope per person). Alternative was a ~90-line jg-local copy of the component — rejected under AGENTS.md reuse-before-reimplement; the need is generic to any multi-scope host. **Tier 2** because shared-core is excluded from the Tier-1 fast path regardless of diff size, not because the change is large. Named trap: a naive `scope: candidate.scope ?? scope` inside the object literal would start sending `scope: undefined` and break an existing contract. Release 2.20.0 at WO end is the precondition for jg MSG-6's pin bump. |
+| 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-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 | planned | | Envelope: [work-orders/MSG-3f.md](work-orders/MSG-3f.md) — **Part A only; the implementation map is the Orchestrator's to write.** 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. |

package/dev/entries.jsx

@@ -62,7 +62,7 @@ const messagingHarnessApi = {
   listConversations: async ({ cursor } = {}) => cursor
     ? ({ results: [{ id: 13, title: 'Archived planning', last_message_at: '2026-07-30T09:00:00Z' }], next_cursor: null })
     : ({ results: [
-        { id: 12, title: 'Support group', unread_count: 1, last_message_at: '2026-07-31T09:00:00Z', last_message: { excerpt: 'Can someone help?' } },
+        { id: 12, kind: 'group', title: 'Support group', unread_count: 1, last_message_at: '2026-07-31T09:00:00Z', last_message: { excerpt: 'Can someone help?' } },
         // Row 42 (MSG-3d): two managed conversations, distinguishable only via
         // external_key — ucm renders whatever ConversationListEntry's
         // resolveManagedLabel resolver below returns, never the raw value.
@@ -74,8 +74,15 @@ const messagingHarnessApi = {
   // reply_count with no thread_last_read_at (MSG-3d row 27): the unread-reply
   // marker on the thread toggle should render visibly by default here.
   listMessages: async (conversationId, { cursor } = {}) => cursor
-    ? ({ results: [{ id: 42, conversation_id: conversationId, body: 'An older message', created_at: '2026-07-30T09:00:00Z' }], next_cursor: null })
-    : ({ results: [{ id: 44, conversation_id: conversationId, body: 'Initial message', created_at: '2026-07-31T09:00:00Z', sender: { display_name: 'Alex' }, reply_count: 1, last_reply_at: '2026-07-31T09:05:00Z', thread_last_read_at: null }], next_cursor: 'signed-older-page' }),
+    ? ({ results: [{ id: 42, conversation_id: conversationId, body: 'An older message', created_at: '2026-07-30T09:00:00Z', sender: { id: 2, display_name: 'Alex' } }], next_cursor: null })
+    : ({ results: [
+        { id: 44, conversation_id: conversationId, body: 'Hallo', created_at: '2026-07-31T09:00:00Z', sender: { id: 1, display_name: 'Harness user' }, reply_count: 1, last_reply_at: '2026-07-31T09:05:00Z', thread_last_read_at: null },
+        { id: 46, conversation_id: conversationId, body: 'A short incoming message', created_at: '2026-07-31T09:01:00Z', sender: { id: 2, display_name: 'Alex' } },
+        { id: 47, conversation_id: conversationId, body: 'averylongunbrokensinglemessagetokenthatshouldwrapcleanlyonasmallviewportandatbrowserzoomwithoutforcingthebubblepastitscap', created_at: '2026-07-31T09:02:00Z', sender: { id: 2, display_name: 'Alex' } },
+        { id: 48, conversation_id: conversationId, kind: 'announcement', title: 'Schedule update', body: 'The meeting starts at 18:30.', link_target: '/events/12', created_at: '2026-07-31T09:03:00Z', sender: { id: 2, display_name: 'Alex' } },
+        { id: 49, conversation_id: conversationId, kind: 'poll', body: 'Poll', poll: { id: 8, question: 'Where should we meet?', options: [{ id: 1, text: 'Library', vote_count: 2 }, { id: 2, text: 'Café', vote_count: 3 }], allow_multiple: false }, created_at: '2026-07-31T09:04:00Z', sender: { id: 2, display_name: 'Alex' } },
+        { id: 50, conversation_id: conversationId, body: 'Attached notes', attachments: [{ id: 5, filename: 'notes.pdf', content_type: 'application/pdf' }], created_at: '2026-07-31T09:05:00Z', sender: { id: 1, display_name: 'Harness user' } },
+      ], next_cursor: 'signed-older-page' }),
   listThread: async (rootId) => ({ results: [{ id: 45, reply_to: rootId, body: 'A reply', created_at: '2026-07-31T09:05:00Z', sender: { display_name: 'Sam' } }], next_cursor: null }),
   getReadStatus: async () => ({ all_read: false, delivered_count: 2 }),
   getUnreadCount: async () => ({ unread_count: 1, by_conversation: { 12: 1 } }),
@@ -136,8 +143,8 @@ function ConversationListEntry() {
   );
 }
 
-function ThreadEntry() { return <MessagingProvider api={messagingHarnessApi} activeConversationId={12}><Thread conversationId={12} /></MessagingProvider>; }
-function MessageBubbleEntry() { return <MessagingProvider api={messagingHarnessApi} active={false}><MessageBubble message={{ id: 44, body: 'Standalone bubble mount', sender: { display_name: 'Alex' }, created_at: '2026-07-31T09:00:00Z', reactions: [{ emoji: '👍', count: 1, reacted: false }] }} onReply={() => window.alert('Reply requested')} /></MessagingProvider>; }
+function ThreadEntry() { return <AuthContext.Provider value={{ user: { id: 1, display_name: 'Harness user' } }}><MessagingProvider api={messagingHarnessApi} activeConversationId={12}><Thread conversationId={12} onAnnouncementLink={(target) => window.alert(`Open ${target}`)} /></MessagingProvider></AuthContext.Provider>; }
+function MessageBubbleEntry() { return <AuthContext.Provider value={{ user: { id: 1, display_name: 'Harness user' } }}><MessagingProvider api={messagingHarnessApi} active={false}><Stack spacing={1} alignItems="stretch"><MessageBubble message={{ id: 44, body: 'Hallo', sender: { id: 1, display_name: 'Harness user' }, created_at: '2026-07-31T09:00:00Z', reactions: [{ emoji: '👍', count: 1, reacted: false }] }} conversation={{ kind: 'group' }} onReply={() => window.alert('Reply requested')}><ReadTicks messageId={44} conversation={{ kind: 'group' }} /></MessageBubble><MessageBubble message={{ id: 45, body: 'Incoming direct message', sender: { id: 2, display_name: 'Alex' }, created_at: '2026-07-31T09:01:00Z' }} conversation={{ kind: 'direct' }} onReply={() => window.alert('Reply requested')} /></Stack></MessagingProvider></AuthContext.Provider>; }
 function ConversationLaunchersEntry() { return <MessagingProvider api={messagingHarnessApi} active={false}><ConversationLaunchers groupLaunchers={[{ id: 'volunteers', label: 'Open volunteers group', payload: { title: 'Volunteers', participant_ids: [1, 2] } }]} broadcastLauncher={{ label: 'Open announcements', payload: { scope: { kind: 'global' } } }} onOpen={(conversation) => window.alert(`Opened: ${conversation.title}`)} /></MessagingProvider>; }
 function DirectMessageLauncherEntry() { return <MessagingProvider api={messagingHarnessApi} active={false}><DirectMessageLauncher candidates={[{ id: 2, display_name: 'Alex' }, { id: 3, display_name: 'Sam' }]} onOpen={(conversation) => window.alert(`Opened: ${conversation.title}`)} /></MessagingProvider>; }
 function ReadTicksEntry() { return <MessagingProvider api={messagingHarnessApi} active={false}><ReadTicks messageId={44} conversation={{ id: 12, kind: 'group' }} /></MessagingProvider>; }

package/dist/messaging/MessageBubble.js

@@ -1,7 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Alert, Button, Dialog, DialogActions, DialogContent, DialogTitle, IconButton, Menu, MenuItem, Paper, Stack, TextField, Typography } from '@mui/material';
+import { Alert, Box, Button, ButtonBase, Dialog, DialogActions, DialogContent, DialogTitle, IconButton, Menu, MenuItem, Paper, Stack, TextField, Typography } from '@mui/material';
 import MoreVertIcon from '@mui/icons-material/MoreVert';
-import { useEffect, useState } from 'react';
+import { alpha } from '@mui/material/styles';
+import { useEffect, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { AttachmentList } from './AttachmentList';
 import { extractApiErrorMessage, useOptionalMessaging } from './MessagingProvider';
@@ -39,23 +40,56 @@ export function MessageBubble({ message, replyTo, conversation, onReply, onJumpT
     const { currentUser, editMessage, removeMessage } = messaging || {};
     const deleted = Boolean(message.deleted_at);
     const attachments = message.attachments || [];
-    const canAct = !deleted && message.kind !== 'poll' && ((Boolean(currentUser === null || currentUser === void 0 ? void 0 : currentUser.id) && ((_a = message.sender) === null || _a === void 0 ? void 0 : _a.id) === (currentUser === null || currentUser === void 0 ? void 0 : currentUser.id)) || canModerateMessages);
+    const isOwn = Boolean(currentUser === null || currentUser === void 0 ? void 0 : currentUser.id) && ((_a = message.sender) === null || _a === void 0 ? void 0 : _a.id) === currentUser.id;
+    const canAct = !deleted && message.kind !== 'poll' && (isOwn || canModerateMessages);
+    const canOpenMenu = !deleted;
+    const reactions = message.reactions || [];
+    const hasMeta = Boolean(message.created_at || (message.edited_at && !deleted) || children);
     const [menuAnchor, setMenuAnchor] = useState(null);
+    const [actionsVisible, setActionsVisible] = useState(false);
+    const [reactionPickerVisible, setReactionPickerVisible] = useState(false);
     const [editing, setEditing] = useState(false);
     const [draft, setDraft] = useState(message.body || '');
     const [confirmingDelete, setConfirmingDelete] = useState(false);
     const [saving, setSaving] = useState(false);
     const [error, setError] = useState(null);
+    const bubbleRef = useRef(null);
     useEffect(() => {
         if (deleted) {
             setEditing(false);
             setConfirmingDelete(false);
             setMenuAnchor(null);
+            setReactionPickerVisible(false);
         }
     }, [deleted]);
+    // The touch/tap reveal is a one-way state flip with no dismiss path of its
+    // own (unlike hover/focus, which un-reveal on mouseleave/blur automatically)
+    // — without this, any ordinary tap on the bubble (selecting text, opening a
+    // poll option, following the reply quote) would leave the overflow icon
+    // permanently visible, contradicting the at-rest "no visible affordance"
+    // requirement. Dismiss on any pointerdown outside this message's own DOM
+    // subtree (bubbleRef spans the Paper plus the reaction-picker sibling, so
+    // interacting with either never counts as "outside"); a pointerdown that
+    // lands on the Menu/Dialog portals does count as outside, but that's
+    // harmless — they already close themselves via their own handlers on the
+    // same interaction.
+    useEffect(() => {
+        if (!actionsVisible)
+            return undefined;
+        const dismissIfOutside = (event) => {
+            if (bubbleRef.current && !bubbleRef.current.contains(event.target)) {
+                setActionsVisible(false);
+            }
+        };
+        document.addEventListener('pointerdown', dismissIfOutside, true);
+        return () => document.removeEventListener('pointerdown', dismissIfOutside, true);
+    }, [actionsVisible]);
     const closeMenu = () => setMenuAnchor(null);
-    const openMenu = (event) => { event.preventDefault(); setMenuAnchor(event.currentTarget); };
+    const revealActions = () => setActionsVisible(true);
+    const openMenu = (event) => { event.preventDefault(); revealActions(); setMenuAnchor(event.currentTarget); };
     const startEdit = () => { setDraft(message.body || ''); setEditing(true); closeMenu(); };
+    const startReply = () => { onReply === null || onReply === void 0 ? void 0 : onReply(message); closeMenu(); };
+    const startReact = () => { setReactionPickerVisible(true); closeMenu(); };
     const saveEdit = async () => {
         setSaving(true);
         setError(null);
@@ -93,5 +127,12 @@ export function MessageBubble({ message, replyTo, conversation, onReply, onJumpT
             setError(t('MessagingActions.COPY_ERROR', { message: extractApiErrorMessage(copyError) }));
         }
     };
-    return (_jsxs(Paper, { component: "article", variant: "outlined", sx: { p: 1.25, maxWidth: 'min(100%, 680px)', '& .message-actions': { opacity: 0 }, '&:hover .message-actions': { opacity: 1 } }, "aria-label": t('MessagingThread.MESSAGE'), "data-message-id": message.id, onContextMenu: canAct ? openMenu : undefined, children: [_jsxs(Stack, { spacing: 0.75, children: [replyTo && _jsx(Button, { type: "button", variant: "text", size: "small", onClick: () => onJumpToMessage === null || onJumpToMessage === void 0 ? void 0 : onJumpToMessage(replyTo.id), sx: { justifyContent: 'flex-start', px: 0, textAlign: 'left', textTransform: 'none' }, 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) })] }) }), _jsxs(Stack, { direction: "row", spacing: 1, alignItems: "baseline", children: [(conversation === null || conversation === void 0 ? void 0 : conversation.kind) !== 'direct' && _jsx(Typography, { variant: "subtitle2", children: senderName(message) || t('MessagingThread.UNKNOWN_SENDER') }), message.created_at && _jsx(Typography, { variant: "caption", color: "text.secondary", children: new Date(message.created_at).toLocaleString() }), message.edited_at && !deleted && _jsx(Typography, { variant: "caption", color: "text.secondary", children: t('MessagingThread.EDITED') })] }), !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' }, 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 }), _jsx(ReactionBar, { message: message }), message.poll && _jsx(PollCard, { message: message })] }), !deleted && onReply && _jsx(Button, { type: "button", size: "small", onClick: () => onReply(message), children: t('MessagingThread.REPLY') }), canAct && _jsx(IconButton, { className: "message-actions", size: "small", "aria-label": t('MessagingActions.MENU'), onClick: openMenu, children: _jsx(MoreVertIcon, {}) }), children] }), _jsxs(Menu, { anchorEl: menuAnchor, open: Boolean(menuAnchor), onClose: closeMenu, children: [_jsx(MenuItem, { onClick: startEdit, children: t('MessagingActions.EDIT') }), _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') })] })] })] }));
+    return (_jsxs(Box, { ref: bubbleRef, component: "article", "data-message-id": message.id, "data-message-side": isOwn ? 'own' : 'incoming', "aria-label": t('MessagingThread.MESSAGE'), sx: { alignSelf: isOwn ? 'flex-end' : 'flex-start', width: 'fit-content', maxWidth: 'min(75%, 680px)', minWidth: 0 }, children: [_jsxs(Paper, { variant: "outlined", "data-actions-visible": actionsVisible || undefined, onClick: revealActions, onContextMenu: canOpenMenu ? openMenu : undefined, sx: {
+                    position: 'relative', p: 1.25, minWidth: 0,
+                    bgcolor: isOwn ? (theme) => alpha(theme.palette.primary.light, 0.24) : 'background.paper',
+                    borderColor: isOwn ? (theme) => alpha(theme.palette.primary.main, 0.35) : 'divider',
+                    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", sx: { color: 'text.disabled', '& .MuiSvgIcon-root': { fontSize: '1rem' } }, children: [message.created_at && _jsx(Typography, { component: "span", variant: "caption", color: "inherit", 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') })] })] })] }));
 }

package/dist/messaging/ReactionBar.js

@@ -1,22 +1,20 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import AddReactionOutlinedIcon from '@mui/icons-material/AddReactionOutlined';
-import { Alert, Chip, IconButton, Stack } from '@mui/material';
+import { Alert, Chip, Stack } from '@mui/material';
 import { useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { extractApiErrorMessage, useMessaging } from './MessagingProvider';
 export const QUICK_EMOJIS = ['👍', '❤️', '😂', '🎉', '👀'];
-/** Independently mountable aggregate reaction controls for one message. */
-export function ReactionBar({ message }) {
+/** Compact aggregate reactions; MessageBubble opens the quick picker from its action menu. */
+export function ReactionBar({ message, expanded = false, onExpandedChange, sx }) {
     const { t } = useTranslation();
     const { toggleReaction } = useMessaging();
-    const [expanded, setExpanded] = useState(false);
     const [error, setError] = useState(null);
     // Tracks in-flight emoji toggles for this message so a rapid double-click
     // can't fire two concurrent requests for the same emoji — toggleReaction's
     // rollback-on-failure reverts to a pre-optimistic snapshot, which would
     // silently discard a second, already-succeeded change if both were in
-    // flight at once. Disabling the chip while its own request is pending
-    // removes the race instead of trying to make concurrent toggles safe.
+    // flight. Disabling the chip while its own request is pending removes the
+    // race instead of trying to make concurrent toggles safe.
     const [pending, setPending] = useState(() => new Set());
     const reactions = (message === null || message === void 0 ? void 0 : message.reactions) || [];
     const react = async (emoji, active = false) => {
@@ -34,11 +32,11 @@ export function ReactionBar({ message }) {
             setPending((current) => { const next = new Set(current); next.delete(emoji); return next; });
         }
     };
-    return _jsxs(Stack, { spacing: 0.5, "aria-label": t('MessagingReactions.LABEL'), children: [_jsxs(Stack, { direction: "row", spacing: 0.5, flexWrap: "wrap", children: [reactions.map((reaction) => _jsx(Chip, { size: "small", disabled: pending.has(reaction.emoji), color: reaction.reacted ? 'primary' : 'default', label: `${reaction.emoji} ${reaction.count || 0}`, onClick: () => react(reaction.emoji, Boolean(reaction.reacted)), "aria-label": t('MessagingReactions.TOGGLE', { emoji: reaction.emoji, count: reaction.count || 0 }) }, reaction.emoji)), _jsx(IconButton, { size: "small", "aria-label": t('MessagingReactions.ADD'), onClick: () => setExpanded((value) => !value), children: _jsx(AddReactionOutlinedIcon, { fontSize: "small" }) })] }), expanded && _jsx(Stack, { direction: "row", spacing: 0.25, flexWrap: "wrap", children: QUICK_EMOJIS.map((emoji) => {
+    return _jsxs(Stack, { spacing: 0.5, "aria-label": t('MessagingReactions.LABEL'), sx: sx, children: [reactions.length > 0 && _jsx(Stack, { direction: "row", spacing: 0.5, flexWrap: "wrap", children: reactions.map((reaction) => _jsx(Chip, { size: "small", disabled: pending.has(reaction.emoji), color: reaction.reacted ? 'primary' : 'default', label: `${reaction.emoji} ${reaction.count || 0}`, onClick: () => react(reaction.emoji, Boolean(reaction.reacted)), "aria-label": t('MessagingReactions.TOGGLE', { emoji: reaction.emoji, count: reaction.count || 0 }) }, reaction.emoji)) }), expanded && _jsx(Stack, { direction: "row", spacing: 0.25, flexWrap: "wrap", children: QUICK_EMOJIS.map((emoji) => {
                     // A quick-emoji already reflected in the aggregate row must toggle it
                     // off, not re-add it — otherwise clicking an already-reacted emoji here
                     // optimistically double-increments the count before the API call.
                     const existing = reactions.find((reaction) => reaction.emoji === emoji);
-                    return _jsx(Chip, { size: "small", disabled: pending.has(emoji), color: (existing === null || existing === void 0 ? void 0 : existing.reacted) ? 'primary' : 'default', label: emoji, onClick: () => { react(emoji, Boolean(existing === null || existing === void 0 ? void 0 : existing.reacted)); setExpanded(false); } }, emoji);
+                    return _jsx(Chip, { size: "small", disabled: pending.has(emoji), color: (existing === null || existing === void 0 ? void 0 : existing.reacted) ? 'primary' : 'default', label: emoji, onClick: () => { react(emoji, Boolean(existing === null || existing === void 0 ? void 0 : existing.reacted)); onExpandedChange === null || onExpandedChange === void 0 ? void 0 : onExpandedChange(false); } }, emoji);
                 }) }), error && _jsx(Alert, { severity: "error", role: "alert", children: error })] });
 }

package/dist/messaging/ReadTicks.js

@@ -1,5 +1,7 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { ButtonBase, List, ListItem, Popover, Typography } from '@mui/material';
+import DoneAllOutlinedIcon from '@mui/icons-material/DoneAllOutlined';
+import DoneOutlinedIcon from '@mui/icons-material/DoneOutlined';
+import { ButtonBase, List, ListItem, Popover } from '@mui/material';
 import { useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useMessaging } from './MessagingProvider';
@@ -19,10 +21,11 @@ export function ReadTicks({ messageId, conversation }) {
     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;
     // 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 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(Typography, { component: "span", variant: "caption", color: "text.secondary", "aria-label": label, children: label });
-    return _jsxs(_Fragment, { children: [_jsx(ButtonBase, { "aria-label": label, "aria-haspopup": "dialog", "aria-expanded": Boolean(anchorEl), onClick: (event) => setAnchorEl(event.currentTarget), sx: { typography: 'caption', color: 'text.secondary', textDecoration: 'underline' }, children: label }), _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: 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)) }) })] });
 }

package/package.json

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

package/src/messaging/MessageBubble.jsx

@@ -1,6 +1,7 @@
-import { Alert, Button, Dialog, DialogActions, DialogContent, DialogTitle, IconButton, Menu, MenuItem, Paper, Stack, TextField, Typography } from '@mui/material';
+import { Alert, Box, Button, ButtonBase, Dialog, DialogActions, DialogContent, DialogTitle, IconButton, Menu, MenuItem, Paper, Stack, TextField, Typography } from '@mui/material';
 import MoreVertIcon from '@mui/icons-material/MoreVert';
-import { useEffect, useState } from 'react';
+import { alpha } from '@mui/material/styles';
+import { useEffect, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { AttachmentList } from './AttachmentList';
 import { extractApiErrorMessage, useOptionalMessaging } from './MessagingProvider';
@@ -34,19 +35,52 @@ export function MessageBubble({ message, replyTo, conversation, onReply, onJumpT
   const { currentUser, editMessage, removeMessage } = messaging || {};
   const deleted = Boolean(message.deleted_at);
   const attachments = message.attachments || [];
-  const canAct = !deleted && message.kind !== 'poll' && ((Boolean(currentUser?.id) && message.sender?.id === currentUser?.id) || canModerateMessages);
+  const isOwn = Boolean(currentUser?.id) && message.sender?.id === currentUser.id;
+  const canAct = !deleted && message.kind !== 'poll' && (isOwn || canModerateMessages);
+  const canOpenMenu = !deleted;
+  const reactions = message.reactions || [];
+  const hasMeta = Boolean(message.created_at || (message.edited_at && !deleted) || children);
   const [menuAnchor, setMenuAnchor] = useState(null);
+  const [actionsVisible, setActionsVisible] = useState(false);
+  const [reactionPickerVisible, setReactionPickerVisible] = useState(false);
   const [editing, setEditing] = useState(false);
   const [draft, setDraft] = useState(message.body || '');
   const [confirmingDelete, setConfirmingDelete] = useState(false);
   const [saving, setSaving] = useState(false);
   const [error, setError] = useState(null);
+  const bubbleRef = useRef(null);
   useEffect(() => {
-    if (deleted) { setEditing(false); setConfirmingDelete(false); setMenuAnchor(null); }
+    if (deleted) {
+      setEditing(false); setConfirmingDelete(false); setMenuAnchor(null); setReactionPickerVisible(false);
+    }
   }, [deleted]);
+  // The touch/tap reveal is a one-way state flip with no dismiss path of its
+  // own (unlike hover/focus, which un-reveal on mouseleave/blur automatically)
+  // — without this, any ordinary tap on the bubble (selecting text, opening a
+  // poll option, following the reply quote) would leave the overflow icon
+  // permanently visible, contradicting the at-rest "no visible affordance"
+  // requirement. Dismiss on any pointerdown outside this message's own DOM
+  // subtree (bubbleRef spans the Paper plus the reaction-picker sibling, so
+  // interacting with either never counts as "outside"); a pointerdown that
+  // lands on the Menu/Dialog portals does count as outside, but that's
+  // harmless — they already close themselves via their own handlers on the
+  // same interaction.
+  useEffect(() => {
+    if (!actionsVisible) return undefined;
+    const dismissIfOutside = (event) => {
+      if (bubbleRef.current && !bubbleRef.current.contains(event.target)) {
+        setActionsVisible(false);
+      }
+    };
+    document.addEventListener('pointerdown', dismissIfOutside, true);
+    return () => document.removeEventListener('pointerdown', dismissIfOutside, true);
+  }, [actionsVisible]);
   const closeMenu = () => setMenuAnchor(null);
-  const openMenu = (event) => { event.preventDefault(); setMenuAnchor(event.currentTarget); };
+  const revealActions = () => setActionsVisible(true);
+  const openMenu = (event) => { event.preventDefault(); revealActions(); setMenuAnchor(event.currentTarget); };
   const startEdit = () => { setDraft(message.body || ''); setEditing(true); closeMenu(); };
+  const startReply = () => { onReply?.(message); closeMenu(); };
+  const startReact = () => { setReactionPickerVisible(true); closeMenu(); };
   const saveEdit = async () => {
     setSaving(true); setError(null);
     try { await editMessage?.(message.id, { body: draft.trim() }); setEditing(false); }
@@ -63,35 +97,51 @@ export function MessageBubble({ message, replyTo, conversation, onReply, onJumpT
     catch (copyError) { setError(t('MessagingActions.COPY_ERROR', { message: extractApiErrorMessage(copyError) })); }
   };
   return (
-    <Paper component="article" variant="outlined" sx={{ p: 1.25, maxWidth: 'min(100%, 680px)', '& .message-actions': { opacity: 0 }, '&:hover .message-actions': { opacity: 1 } }} aria-label={t('MessagingThread.MESSAGE')} data-message-id={message.id} onContextMenu={canAct ? openMenu : undefined}>
-      <Stack spacing={0.75}>
-        {replyTo && <Button type="button" variant="text" size="small" onClick={() => onJumpToMessage?.(replyTo.id)} sx={{ justifyContent: 'flex-start', px: 0, textAlign: 'left', textTransform: 'none' }}>
-          <Stack spacing={0} alignItems="flex-start">
-            <Typography variant="caption" color="text.secondary">{t('MessagingThread.REPLY_TO', { sender: senderName(replyTo) || t('MessagingThread.UNKNOWN_SENDER') })}</Typography>
-            <Typography variant="caption" color="text.secondary">{quoteLabel(replyTo, t)}</Typography>
-          </Stack>
-        </Button>}
-        <Stack direction="row" spacing={1} alignItems="baseline">
+    <Box ref={bubbleRef} component="article" data-message-id={message.id} data-message-side={isOwn ? 'own' : 'incoming'} aria-label={t('MessagingThread.MESSAGE')} sx={{ alignSelf: isOwn ? 'flex-end' : 'flex-start', width: 'fit-content', maxWidth: 'min(75%, 680px)', minWidth: 0 }}>
+      <Paper
+        variant="outlined"
+        data-actions-visible={actionsVisible || undefined}
+        onClick={revealActions}
+        onContextMenu={canOpenMenu ? openMenu : undefined}
+        sx={{
+          position: 'relative', p: 1.25, minWidth: 0,
+          bgcolor: isOwn ? (theme) => alpha(theme.palette.primary.light, 0.24) : 'background.paper',
+          borderColor: isOwn ? (theme) => alpha(theme.palette.primary.main, 0.35) : 'divider',
+          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' },
+        }}
+      >
+        {canOpenMenu && <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 }}><MoreVertIcon fontSize="small" /></IconButton>}
+        <Stack spacing={0.75}>
+          {replyTo && <ButtonBase type="button" onClick={() => 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 }}>
+            <Stack spacing={0} alignItems="flex-start">
+              <Typography variant="caption" color="text.secondary">{t('MessagingThread.REPLY_TO', { sender: senderName(replyTo) || t('MessagingThread.UNKNOWN_SENDER') })}</Typography>
+              <Typography variant="caption" color="text.secondary">{quoteLabel(replyTo, t)}</Typography>
+            </Stack>
+          </ButtonBase>}
           {conversation?.kind !== 'direct' && <Typography variant="subtitle2">{senderName(message) || t('MessagingThread.UNKNOWN_SENDER')}</Typography>}
-          {message.created_at && <Typography variant="caption" color="text.secondary">{new Date(message.created_at).toLocaleString()}</Typography>}
-          {message.edited_at && !deleted && <Typography variant="caption" color="text.secondary">{t('MessagingThread.EDITED')}</Typography>}
+          {!deleted && message.kind === 'announcement' && message.title && <Typography variant="subtitle1" fontWeight={700}>{message.title}</Typography>}
+          {!deleted && message.kind === 'announcement' && message.link_target && onAnnouncementLink && <Button type="button" size="small" onClick={() => onAnnouncementLink(message.link_target)}>{t('MessagingAnnouncement.OPEN_LINK')}</Button>}
+          {error && <Alert severity="error" role="alert">{error}</Alert>}
+          {editing ? <Stack spacing={0.75}><TextField label={t('MessagingActions.EDIT')} value={draft} onChange={(event) => setDraft(event.target.value)} multiline minRows={2} autoFocus disabled={saving} /><Stack direction="row" spacing={1}><Button type="button" onClick={saveEdit} disabled={saving}>{t('MessagingActions.SAVE')}</Button><Button type="button" onClick={() => setEditing(false)} disabled={saving}>{t('MessagingActions.CANCEL')}</Button></Stack></Stack> : <Typography sx={{ whiteSpace: 'pre-wrap', overflowWrap: 'anywhere' }}>{deleted ? t('MessagingThread.DELETED') : (message.kind === 'announcement' ? message.body : (message.body || message.title)) || ''}</Typography>}
+          {!deleted && <Stack spacing={0.75}>
+            {attachments.length > 0 && <AttachmentList attachments={attachments} />}
+            {message.poll && <PollCard message={message} />}
+          </Stack>}
+          {hasMeta && <Stack data-testid="message-meta" direction="row" spacing={0.5} justifyContent="flex-end" alignItems="center" sx={{ color: 'text.disabled', '& .MuiSvgIcon-root': { fontSize: '1rem' } }}>
+            {message.created_at && <Typography component="span" variant="caption" color="inherit">{new Date(message.created_at).toLocaleString()}</Typography>}
+            {message.edited_at && !deleted && <Typography component="span" variant="caption" color="inherit">{t('MessagingThread.EDITED')}</Typography>}
+            {children}
+          </Stack>}
         </Stack>
-        {!deleted && message.kind === 'announcement' && message.title && <Typography variant="subtitle1" fontWeight={700}>{message.title}</Typography>}
-        {!deleted && message.kind === 'announcement' && message.link_target && onAnnouncementLink && <Button type="button" size="small" onClick={() => onAnnouncementLink(message.link_target)}>{t('MessagingAnnouncement.OPEN_LINK')}</Button>}
-        {error && <Alert severity="error" role="alert">{error}</Alert>}
-        {editing ? <Stack spacing={0.75}><TextField label={t('MessagingActions.EDIT')} value={draft} onChange={(event) => setDraft(event.target.value)} multiline minRows={2} autoFocus disabled={saving} /><Stack direction="row" spacing={1}><Button type="button" onClick={saveEdit} disabled={saving}>{t('MessagingActions.SAVE')}</Button><Button type="button" onClick={() => setEditing(false)} disabled={saving}>{t('MessagingActions.CANCEL')}</Button></Stack></Stack> : <Typography sx={{ whiteSpace: 'pre-wrap' }}>{deleted ? t('MessagingThread.DELETED') : (message.kind === 'announcement' ? message.body : (message.body || message.title)) || ''}</Typography>}
-        {!deleted && <Stack spacing={0.75}>
-          {attachments.length > 0 && <AttachmentList attachments={attachments} />}
-          <ReactionBar message={message} />
-          {message.poll && <PollCard message={message} />}
-        </Stack>}
-        {!deleted && onReply && <Button type="button" size="small" onClick={() => onReply(message)}>{t('MessagingThread.REPLY')}</Button>}
-        {canAct && <IconButton className="message-actions" size="small" aria-label={t('MessagingActions.MENU')} onClick={openMenu}><MoreVertIcon /></IconButton>}
-        {children}
-      </Stack>
+      </Paper>
+      {!deleted && (reactions.length > 0 || reactionPickerVisible) && <ReactionBar message={message} expanded={reactionPickerVisible} onExpandedChange={setReactionPickerVisible} sx={{ mt: -0.5, ml: 0.75, position: 'relative', zIndex: 1 }} />}
       <Menu anchorEl={menuAnchor} open={Boolean(menuAnchor)} onClose={closeMenu}>
-        <MenuItem onClick={startEdit}>{t('MessagingActions.EDIT')}</MenuItem>
-        <MenuItem onClick={() => { setConfirmingDelete(true); closeMenu(); }}>{t('MessagingActions.DELETE')}</MenuItem>
+        <MenuItem onClick={startReply}>{t('MessagingThread.REPLY')}</MenuItem>
+        <MenuItem onClick={startReact}>{t('MessagingReactions.ADD')}</MenuItem>
+        {canAct && <MenuItem onClick={startEdit}>{t('MessagingActions.EDIT')}</MenuItem>}
+        {canAct && <MenuItem onClick={() => { setConfirmingDelete(true); closeMenu(); }}>{t('MessagingActions.DELETE')}</MenuItem>}
         <MenuItem onClick={copyMessage}>{t('MessagingActions.COPY')}</MenuItem>
       </Menu>
       <Dialog open={confirmingDelete} onClose={() => !saving && setConfirmingDelete(false)}>
@@ -99,6 +149,6 @@ export function MessageBubble({ message, replyTo, conversation, onReply, onJumpT
         <DialogContent>{t('MessagingActions.DELETE_CONFIRM_BODY')}</DialogContent>
         <DialogActions><Button onClick={() => setConfirmingDelete(false)} disabled={saving}>{t('MessagingActions.CANCEL')}</Button><Button onClick={confirmDelete} disabled={saving} color="error">{t('MessagingActions.DELETE')}</Button></DialogActions>
       </Dialog>
-    </Paper>
+    </Box>
   );
 }

package/src/messaging/ReactionBar.jsx

@@ -1,5 +1,4 @@
-import AddReactionOutlinedIcon from '@mui/icons-material/AddReactionOutlined';
-import { Alert, Chip, IconButton, Stack } from '@mui/material';
+import { Alert, Chip, Stack } from '@mui/material';
 import { useState } from 'react';
 import { useTranslation } from 'react-i18next';
 
@@ -7,18 +6,17 @@ import { extractApiErrorMessage, useMessaging } from './MessagingProvider';
 
 export const QUICK_EMOJIS = ['👍', '❤️', '😂', '🎉', '👀'];
 
-/** Independently mountable aggregate reaction controls for one message. */
-export function ReactionBar({ message }) {
+/** Compact aggregate reactions; MessageBubble opens the quick picker from its action menu. */
+export function ReactionBar({ message, expanded = false, onExpandedChange, sx }) {
   const { t } = useTranslation();
   const { toggleReaction } = useMessaging();
-  const [expanded, setExpanded] = useState(false);
   const [error, setError] = useState(null);
   // Tracks in-flight emoji toggles for this message so a rapid double-click
   // can't fire two concurrent requests for the same emoji — toggleReaction's
   // rollback-on-failure reverts to a pre-optimistic snapshot, which would
   // silently discard a second, already-succeeded change if both were in
-  // flight at once. Disabling the chip while its own request is pending
-  // removes the race instead of trying to make concurrent toggles safe.
+  // flight. Disabling the chip while its own request is pending removes the
+  // race instead of trying to make concurrent toggles safe.
   const [pending, setPending] = useState(() => new Set());
   const reactions = message?.reactions || [];
   const react = async (emoji, active = false) => {
@@ -29,17 +27,16 @@ export function ReactionBar({ message }) {
     catch (reactionError) { setError(t('MessagingReactions.ERROR', { message: extractApiErrorMessage(reactionError) })); }
     finally { setPending((current) => { const next = new Set(current); next.delete(emoji); return next; }); }
   };
-  return <Stack spacing={0.5} aria-label={t('MessagingReactions.LABEL')}>
-    <Stack direction="row" spacing={0.5} flexWrap="wrap">
+  return <Stack spacing={0.5} aria-label={t('MessagingReactions.LABEL')} sx={sx}>
+    {reactions.length > 0 && <Stack direction="row" spacing={0.5} flexWrap="wrap">
       {reactions.map((reaction) => <Chip key={reaction.emoji} size="small" disabled={pending.has(reaction.emoji)} color={reaction.reacted ? 'primary' : 'default'} label={`${reaction.emoji} ${reaction.count || 0}`} onClick={() => react(reaction.emoji, Boolean(reaction.reacted))} aria-label={t('MessagingReactions.TOGGLE', { emoji: reaction.emoji, count: reaction.count || 0 })} />)}
-      <IconButton size="small" aria-label={t('MessagingReactions.ADD')} onClick={() => setExpanded((value) => !value)}><AddReactionOutlinedIcon fontSize="small" /></IconButton>
-    </Stack>
+    </Stack>}
     {expanded && <Stack direction="row" spacing={0.25} flexWrap="wrap">{QUICK_EMOJIS.map((emoji) => {
       // A quick-emoji already reflected in the aggregate row must toggle it
       // off, not re-add it — otherwise clicking an already-reacted emoji here
       // optimistically double-increments the count before the API call.
       const existing = reactions.find((reaction) => reaction.emoji === emoji);
-      return <Chip key={emoji} size="small" disabled={pending.has(emoji)} color={existing?.reacted ? 'primary' : 'default'} label={emoji} onClick={() => { react(emoji, Boolean(existing?.reacted)); setExpanded(false); }} />;
+      return <Chip key={emoji} size="small" disabled={pending.has(emoji)} color={existing?.reacted ? 'primary' : 'default'} label={emoji} onClick={() => { react(emoji, Boolean(existing?.reacted)); onExpandedChange?.(false); }} />;
     })}</Stack>}
     {error && <Alert severity="error" role="alert">{error}</Alert>}
   </Stack>;

package/src/messaging/ReadTicks.jsx

@@ -1,4 +1,6 @@
-import { ButtonBase, List, ListItem, Popover, Typography } from '@mui/material';
+import DoneAllOutlinedIcon from '@mui/icons-material/DoneAllOutlined';
+import DoneOutlinedIcon from '@mui/icons-material/DoneOutlined';
+import { ButtonBase, List, ListItem, Popover } from '@mui/material';
 import { useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 
@@ -17,9 +19,10 @@ 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;
   // The server never returns DM detail; enforce the same carve-out defensively.
   const detail = conversation?.kind === 'direct' ? null : status.recipient_detail;
   const recipients = detail?.map((recipient) => recipient.display_name || recipient.username || recipient.user_id).filter(Boolean) || [];
-  if (!recipients.length) return <Typography component="span" variant="caption" color="text.secondary" aria-label={label}>{label}</Typography>;
-  return <><ButtonBase aria-label={label} aria-haspopup="dialog" aria-expanded={Boolean(anchorEl)} onClick={(event) => setAnchorEl(event.currentTarget)} sx={{ typography: 'caption', color: 'text.secondary', textDecoration: 'underline' }}>{label}</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={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></>;
 }

package/tests/messagingCompactBubble.test.jsx

@@ -0,0 +1,62 @@
+// @vitest-environment jsdom
+import React from 'react';
+import { afterEach, describe, expect, it, vi } from 'vitest';
+import { cleanup, fireEvent, render, screen, waitFor } from '@testing-library/react';
+
+vi.mock('react-i18next', () => ({ useTranslation: () => ({ t: (key, options) => options?.count != null ? `${key}:${options.count}` : options?.sender ? `${key}:${options.sender}` : key }) }));
+vi.mock('../src/notifications/realtime', () => ({ useRealtime: () => ({ subscribe: () => () => {}, onReconnect: () => () => {} }) }));
+
+import { AuthContext } from '../src/auth/AuthContext';
+import { MessageBubble } from '../src/messaging/MessageBubble';
+import { MessagingProvider } from '../src/messaging/MessagingProvider';
+import { ReadTicks } from '../src/messaging/ReadTicks';
+
+const api = () => ({
+  getReadStatus: vi.fn().mockResolvedValue({ all_read: false, delivered_count: 2 }),
+  getAttachment: vi.fn(), getAttachmentThumbnail: vi.fn(), addReaction: vi.fn(), removeReaction: vi.fn(),
+  votePoll: vi.fn(), closePoll: vi.fn(),
+});
+function renderBubble(message, { conversation = { kind: 'group' }, replyTo, onJumpToMessage, child, ownId = 1 } = {}) {
+  return render(<AuthContext.Provider value={{ user: { id: ownId } }}><MessagingProvider api={api()} active={false}><MessageBubble message={message} conversation={conversation} replyTo={replyTo} onJumpToMessage={onJumpToMessage}>{child}</MessageBubble></MessagingProvider></AuthContext.Provider>);
+}
+
+afterEach(cleanup);
+
+describe('compact message bubbles', () => {
+  it('keeps the timestamp and own-message status icon inside the bubble and has no standalone plain-message controls', async () => {
+    const { container } = renderBubble({ id: 1, body: 'Hallo', sender: { id: 1, display_name: 'Me' }, created_at: '2026-08-02T10:00:00Z' }, { child: <ReadTicks messageId={1} conversation={{ kind: 'group' }} /> });
+    const tick = await screen.findByLabelText('MessagingReadTicks.DELIVERED:2');
+    const paper = container.querySelector('[data-message-id="1"] .MuiPaper-root');
+    expect(paper.contains(tick)).toBe(true);
+    expect(paper.querySelector('[data-testid="message-meta"]')).toBeTruthy();
+    expect(screen.queryByText('MessagingThread.REPLY')).toBeNull();
+    expect(screen.queryByLabelText('MessagingReactions.LABEL')).toBeNull();
+  });
+
+  it('marks own and incoming bubbles differently and only shows a sender in non-direct conversations', () => {
+    const { container, rerender } = renderBubble({ id: 2, body: 'Mine', sender: { id: 1, display_name: 'Me' } });
+    expect(container.querySelector('[data-message-id="2"]').getAttribute('data-message-side')).toBe('own');
+    expect(screen.getByText('Me')).toBeTruthy();
+    rerender(<AuthContext.Provider value={{ user: { id: 1 } }}><MessagingProvider api={api()} active={false}><MessageBubble message={{ id: 3, body: 'Theirs', sender: { id: 9, display_name: 'Ava' } }} conversation={{ kind: 'direct' }} /></MessagingProvider></AuthContext.Provider>);
+    expect(container.querySelector('[data-message-id="3"]').getAttribute('data-message-side')).toBe('incoming');
+    expect(screen.queryByText('Ava')).toBeNull();
+  });
+
+  it('keeps a reply quote clickable inside the bubble', () => {
+    const onJumpToMessage = vi.fn();
+    const { container } = renderBubble({ id: 5, body: 'Reply', sender: { id: 1 } }, { replyTo: { id: 4, body: 'Quoted words', sender: { display_name: 'Ava' } }, onJumpToMessage });
+    fireEvent.click(screen.getByText('Quoted words'));
+    expect(onJumpToMessage).toHaveBeenCalledWith(4);
+    expect(container.querySelector('[data-message-id="5"] .MuiPaper-root').contains(screen.getByText('Quoted words'))).toBe(true);
+  });
+
+  it('continues to render announcement, poll and attachment content inside the bubble', async () => {
+    const { container, rerender } = renderBubble({ id: 6, kind: 'announcement', title: 'Notice', body: 'Update', sender: { id: 1 } });
+    expect(container.querySelector('.MuiPaper-root').contains(screen.getByText('Notice'))).toBe(true);
+    rerender(<AuthContext.Provider value={{ user: { id: 1 } }}><MessagingProvider api={api()} active={false}><MessageBubble message={{ id: 7, kind: 'poll', body: 'Poll', sender: { id: 1 }, poll: { id: 1, question: 'Where?', options: [], allow_multiple: false } }} conversation={{ kind: 'group' }} /></MessagingProvider></AuthContext.Provider>);
+    expect(container.querySelector('.MuiPaper-root').contains(screen.getByText('Where?'))).toBe(true);
+    rerender(<AuthContext.Provider value={{ user: { id: 1 } }}><MessagingProvider api={api()} active={false}><MessageBubble message={{ id: 8, body: 'File', sender: { id: 1 }, attachments: [{ id: 1, filename: 'notes.pdf', content_type: 'application/pdf' }] }} conversation={{ kind: 'group' }} /></MessagingProvider></AuthContext.Provider>);
+    await waitFor(() => expect(screen.getByText(/MessagingAttachments\.DOWNLOAD/)).toBeTruthy());
+    expect(container.querySelector('.MuiPaper-root').contains(screen.getByText(/MessagingAttachments\.DOWNLOAD/))).toBe(true);
+  });
+});

package/tests/messagingMessageActions.test.jsx

@@ -17,8 +17,8 @@ function makeApi() {
     deleteMessage: vi.fn().mockImplementation(async (id) => ({ id, deleted_at: '2026-07-31T10:01:00Z' })),
   };
 }
-function renderBubble(message, { userId = 1, canModerateMessages = false, api = makeApi() } = {}) {
-  const result = render(<AuthContext.Provider value={{ user: { id: userId } }}><MessagingProvider api={api} active={false}><MessageBubble message={message} canModerateMessages={canModerateMessages} /></MessagingProvider></AuthContext.Provider>);
+function renderBubble(message, { userId = 1, canModerateMessages = false, api = makeApi(), onReply } = {}) {
+  const result = render(<AuthContext.Provider value={{ user: { id: userId } }}><MessagingProvider api={api} active={false}><MessageBubble message={message} canModerateMessages={canModerateMessages} onReply={onReply} /></MessagingProvider></AuthContext.Provider>);
   return { ...result, api };
 }
 function openActions() { fireEvent.click(screen.getByRole('button', { name: 'MessagingActions.MENU' })); }
@@ -26,19 +26,89 @@ function openActions() { fireEvent.click(screen.getByRole('button', { name: 'Mes
 afterEach(cleanup);
 
 describe('message actions', () => {
-  it('gates the menu to the author or host-supplied moderator capability, never deleted or poll messages', () => {
+  it('offers Reply, React and Copy for incoming messages, adding Edit and Delete only for authors or moderators', () => {
     const mine = { id: 1, body: 'Mine', sender: { id: 1 } };
     const theirs = { id: 2, body: 'Theirs', sender: { id: 2 } };
-    const { rerender } = renderBubble(mine);
+    const { unmount } = renderBubble(mine);
     expect(screen.getByRole('button', { name: 'MessagingActions.MENU' })).toBeTruthy();
-    rerender(<AuthContext.Provider value={{ user: { id: 1 } }}><MessagingProvider api={makeApi()} active={false}><MessageBubble message={theirs} /></MessagingProvider></AuthContext.Provider>);
-    expect(screen.queryByRole('button', { name: 'MessagingActions.MENU' })).toBeNull();
-    rerender(<AuthContext.Provider value={{ user: { id: 1 } }}><MessagingProvider api={makeApi()} active={false}><MessageBubble message={theirs} canModerateMessages /></MessagingProvider></AuthContext.Provider>);
+    openActions();
+    ['MessagingThread.REPLY', 'MessagingReactions.ADD', 'MessagingActions.EDIT', 'MessagingActions.DELETE', 'MessagingActions.COPY'].forEach((name) => expect(screen.getByRole('menuitem', { name })).toBeTruthy());
+    fireEvent.click(screen.getByRole('menuitem', { name: 'MessagingReactions.ADD' }));
+    expect(screen.getByLabelText('MessagingReactions.LABEL')).toBeTruthy();
+    expect(screen.getByText('👍')).toBeTruthy();
+    unmount();
+    renderBubble(theirs);
     expect(screen.getByRole('button', { name: 'MessagingActions.MENU' })).toBeTruthy();
-    rerender(<AuthContext.Provider value={{ user: { id: 1 } }}><MessagingProvider api={makeApi()} active={false}><MessageBubble message={{ ...mine, deleted_at: '2026-07-31T10:00:00Z' }} /></MessagingProvider></AuthContext.Provider>);
-    expect(screen.queryByRole('button', { name: 'MessagingActions.MENU' })).toBeNull();
-    rerender(<AuthContext.Provider value={{ user: { id: 1 } }}><MessagingProvider api={makeApi()} active={false}><MessageBubble message={{ ...mine, kind: 'poll' }} /></MessagingProvider></AuthContext.Provider>);
+    openActions();
+    ['MessagingThread.REPLY', 'MessagingReactions.ADD', 'MessagingActions.COPY'].forEach((name) => expect(screen.getByRole('menuitem', { name })).toBeTruthy());
+    expect(screen.queryByRole('menuitem', { name: 'MessagingActions.EDIT' })).toBeNull();
+    expect(screen.queryByRole('menuitem', { name: 'MessagingActions.DELETE' })).toBeNull();
+    cleanup();
+    renderBubble(theirs, { canModerateMessages: true });
+    expect(screen.getByRole('button', { name: 'MessagingActions.MENU' })).toBeTruthy();
+    cleanup();
+    renderBubble({ ...mine, deleted_at: '2026-07-31T10:00:00Z' });
     expect(screen.queryByRole('button', { name: 'MessagingActions.MENU' })).toBeNull();
+    cleanup();
+    renderBubble({ ...mine, kind: 'poll' });
+    expect(screen.getByRole('button', { name: 'MessagingActions.MENU' })).toBeTruthy();
+  });
+
+  it('opens the affordance from a tap and lets a keyboard user reveal and operate it', () => {
+    const onReply = vi.fn();
+    const { container } = renderBubble({ id: 3, body: 'Touch me', sender: { id: 2 } }, { onReply });
+    const bubble = container.querySelector('[data-message-id="3"] .MuiPaper-root');
+    fireEvent.click(bubble);
+    expect(bubble.getAttribute('data-actions-visible')).toBe('true');
+    const actions = screen.getByRole('button', { name: 'MessagingActions.MENU' });
+    fireEvent.focus(actions);
+    fireEvent.click(actions);
+    fireEvent.click(screen.getByRole('menuitem', { name: 'MessagingThread.REPLY' }));
+    expect(onReply).toHaveBeenCalledWith(expect.objectContaining({ id: 3 }));
+  });
+
+  it('dismisses the tap-revealed affordance again on an outside interaction, but not on a reaction-picker click inside the same bubble', () => {
+    const { container } = renderBubble({ id: 3, body: 'Touch me', sender: { id: 2 }, reactions: [{ emoji: '👍', count: 1, reacted: false }] });
+    const bubble = container.querySelector('[data-message-id="3"] .MuiPaper-root');
+    fireEvent.click(bubble);
+    expect(bubble.getAttribute('data-actions-visible')).toBe('true');
+    // A pointerdown inside the same message's own reaction row (a sibling of
+    // the Paper, still within the article) must not count as "outside" —
+    // otherwise every reaction click would prematurely hide the affordance.
+    fireEvent.pointerDown(screen.getByText('👍 1'));
+    expect(bubble.getAttribute('data-actions-visible')).toBe('true');
+    // A pointerdown genuinely outside the message dismisses it — this is the
+    // U1 fix: without it, the affordance stayed pinned visible forever after
+    // any click that bubbled up to the bubble (Part A's "no visible
+    // affordance at rest" requirement).
+    fireEvent.pointerDown(document.body);
+    expect(bubble.getAttribute('data-actions-visible')).toBeNull();
+  });
+
+  it('keeps each message bubble\'s tap-reveal state independent — revealing one does not dismiss another', () => {
+    const api = makeApi();
+    const { container } = render(
+      <AuthContext.Provider value={{ user: { id: 1 } }}>
+        <MessagingProvider api={api} active={false}>
+          <MessageBubble message={{ id: 10, body: 'First', sender: { id: 2 } }} />
+          <MessageBubble message={{ id: 11, body: 'Second', sender: { id: 2 } }} />
+        </MessagingProvider>
+      </AuthContext.Provider>
+    );
+    const bubbleA = container.querySelector('[data-message-id="10"] .MuiPaper-root');
+    const bubbleB = container.querySelector('[data-message-id="11"] .MuiPaper-root');
+    fireEvent.pointerDown(bubbleA);
+    fireEvent.click(bubbleA);
+    expect(bubbleA.getAttribute('data-actions-visible')).toBe('true');
+    expect(bubbleB.getAttribute('data-actions-visible')).toBeNull();
+    // Tapping bubble B is, from bubble A's perspective, an outside
+    // interaction — A dismisses, B reveals; the two must never share state.
+    // (A real tap fires pointerdown before click; fireEvent.click alone
+    // wouldn't exercise the pointerdown-driven dismiss listener.)
+    fireEvent.pointerDown(bubbleB);
+    fireEvent.click(bubbleB);
+    expect(bubbleA.getAttribute('data-actions-visible')).toBeNull();
+    expect(bubbleB.getAttribute('data-actions-visible')).toBe('true');
   });
 
   it('edits an author message through the API and auto-cancels when deleted elsewhere', async () => {

package/tests/messagingReactionMerge.test.jsx

@@ -1,7 +1,7 @@
 // @vitest-environment jsdom
 import React from 'react';
 import { afterEach, describe, expect, it, vi } from 'vitest';
-import { cleanup, fireEvent, render, screen, waitFor } from '@testing-library/react';
+import { act, cleanup, fireEvent, render, screen, waitFor } from '@testing-library/react';
 
 vi.mock('react-i18next', () => ({ useTranslation: () => ({ t: (key, options) => options?.emoji ? `${key}:${options.emoji}:${options.count}` : key }) }));
 
@@ -29,7 +29,7 @@ function baseApi(overrides = {}) {
 // a live-frame test must read the message back out of the cache.
 function ConnectedReactionBar({ messageId }) {
   const { cache } = useMessaging();
-  return <ReactionBar message={cache.messages[messageId]} />;
+  return <ReactionBar message={cache.messages[messageId]} expanded />;
 }
 
 afterEach(() => { cleanup(); realtimeSubscribers.clear(); });
@@ -54,9 +54,7 @@ describe('reaction frame/REST merge against the real aggregate-only contract', (
   it('the viewer\'s own optimistic reacted flag survives its own REST confirmation, which returns an aggregate-only shape', async () => {
     const api = baseApi({ addReaction: vi.fn().mockResolvedValue({ reactions: [{ emoji: '👍', count: 1 }] }) });
     render(<MessagingProvider api={api} active={false}><ConnectedReactionBar messageId="msg-1" /></MessagingProvider>);
-    dispatchMessagingFrame({ envelope: 'messaging', type: 'message', event_id: 'seed', conversation_id: 'conv-1', message: { id: 'msg-1', conversation_id: 'conv-1', body: 'Hi', reactions: [] } });
-    await waitFor(() => screen.getByLabelText('MessagingReactions.ADD'));
-    fireEvent.click(screen.getByLabelText('MessagingReactions.ADD'));
+    act(() => { dispatchMessagingFrame({ envelope: 'messaging', type: 'message', event_id: 'seed', conversation_id: 'conv-1', message: { id: 'msg-1', conversation_id: 'conv-1', body: 'Hi', reactions: [] } }); });
     fireEvent.click(screen.getByText('👍'));
     await waitFor(() => expect(api.addReaction).toHaveBeenCalledWith('msg-1', '👍'));
     await waitFor(() => {

package/tests/messagingThreadingQuoting.test.jsx

@@ -68,7 +68,8 @@ describe('messaging threading and quoting', () => {
     api.deleteMessage = vi.fn().mockResolvedValue({});
     render(<AuthContext.Provider value={{ user: { id: 1 } }}><MessagingProvider api={api} activeConversationId={1}><Thread conversationId={1} /></MessagingProvider></AuthContext.Provider>);
     await screen.findByText('Reply target');
-    fireEvent.click(screen.getByRole('button', { name: /MessagingThread\.REPLY\b/ }));
+    fireEvent.click(screen.getByRole('button', { name: /MessagingActions\.MENU/ }));
+    fireEvent.click(screen.getByRole('menuitem', { name: /MessagingThread\.REPLY\b/ }));
     expect(screen.getByText(/MessagingThread\.REPLYING_TO/)).toBeTruthy();
     fireEvent.click(screen.getByRole('button', { name: /MessagingActions\.MENU/ }));
     fireEvent.click(screen.getByRole('menuitem', { name: /MessagingActions\.DELETE/ }));

package/work-orders/MSG-3f.md

@@ -0,0 +1,391 @@
+# MSG-3f — compact chat-bubble message layout
+
+Status: planned · Tier 2 · Target repo: `ui-core-micha` (main)
+
+---
+
+## Part A — Envelope (Expertenchat, 2026-08-02)
+
+### Goal
+
+Make a message occupy the space a message deserves. Today a one-word message renders as **six stacked
+rows**; it must become **one**.
+
+### The problem
+
+`MessageBubble` (`src/messaging/MessageBubble.jsx`) wraps everything in a vertical
+`Stack spacing={0.75}`, so every element gets its own full-width row: the meta line, the body, the
+`ReactionBar`, the reply control (a full MUI `Button`, which is why "Antworten" sits centred on a line of
+its own), the overflow-menu `IconButton`, and finally `children` — where the host's `ReadTicks` lands as
+a "Zugestellt an 0" text line. For the word "Hallo" that is roughly 260px of vertical space.
+
+Operator direction: much more compact, icon-based rather than text-labelled, and modelled on WhatsApp.
+
+### "Like WhatsApp" — the actual specification
+
+"Like WhatsApp" is not a spec, so here is what it means for this WO. Each point is a requirement.
+
+**1. Bubbles.** Own messages right-aligned on a tinted surface; incoming messages left-aligned on a
+neutral surface. The bubble shrinks to its content and is capped at roughly three quarters of the thread
+width — not the current full-width outlined `Paper`. Exact radius, tint, and elevation are design-system
+choices, not fixed here; what is fixed is the alignment split and the shrink-to-content behaviour.
+
+**2. Meta moves inside the bubble — this is the line-count fix.** Timestamp and status icons sit
+**inside** the bubble, bottom right, instead of being their own full-width sibling rows. Whether they
+share the last text line or occupy their own narrow trailing line is left to the implementation:
+riding the last line is nicer and welcome if it falls out naturally, but it is **explicitly not
+required** (operator decision, 2026-08-02 — "muss nicht perfekt sein"). Do not spend the WO fighting
+that CSS. What matters is that the meta is inside the bubble and right-aligned, not that it is inline.
+
+**3. Sender name.** Only for non-direct conversations, small, above the text, inside the bubble. Direct
+conversations show no sender at all (already the case today, keep it).
+
+**4. Status as icons.** Replace the "Zugestellt an N" text with tick icons — sent / delivered /
+all-read, distinguished by tick count and emphasis. Own messages only; the existing
+`canShowReadTicks` gate is correct and stays.
+
+**5. Actions collapse into one affordance.** No standalone reply button, no permanently rendered
+reaction row. One overflow affordance at the bubble's top edge opens a single menu carrying Reply,
+React, and the existing Edit / Delete / Copy entries.
+
+How it is reached (operator decision, 2026-08-02 — **no long-press**):
+- **Desktop:** the affordance appears on hover, and on keyboard focus. The existing right-click
+  `onContextMenu` path stays.
+- **Touch:** a plain tap on the bubble reveals the affordance. No long-press, no swipe, no custom
+  pointer-event handling — the gesture edge cases (scroll conflict, text selection, iOS's own
+  context menu) are not worth their cost here.
+- **React** is a menu entry that expands the existing `ReactionBar` emoji row. Do **not** try to nest an
+  emoji picker inside the MUI `Menu` — MUI does not nest menus gracefully, and the existing expandable
+  row already works.
+
+**5b. The menu must open for messages the user cannot edit.** Today the whole menu is gated on `canAct`
+(own message, or moderator), because it only contained Edit / Delete / Copy. Once Reply lives there, an
+**incoming** message needs a menu too — you reply to other people's messages. So there are two variants:
+any message offers Reply / React / Copy; a message the user may act on additionally offers Edit /
+Delete. Getting this wrong makes replying to anyone else impossible, and it will not show up in a test
+fixture that only contains own messages.
+
+**6. Reactions.** Existing reaction chips render as a compact row overlapping the bubble's bottom edge,
+not as their own stacked row. Adding a reaction moves into the action menu.
+
+**7. Reply quote.** Stays inside the bubble as a tinted block with a coloured leading border, replacing
+today's full-width text `Button`. Clicking it must still jump to the quoted message.
+
+### Confirmed against operator-supplied reference screenshots (2026-08-02)
+
+The operator supplied two WhatsApp screenshots as the reference. What they pin down beyond the points
+above:
+
+- In the reference, a two-line message has its timestamp at the right end of the *second* line — so
+  WhatsApp's own rule is "meta rides the final line". Per point 2 this is **not** binding here; it is
+  recorded so the implementation knows what the ideal looks like if it comes cheaply.
+- **Incoming messages carry no status icon at all** — not even a "sent" tick. Only own messages show
+  status.
+- **At rest there is no visible action affordance whatsoever.** No reply control, no reaction button, no
+  overflow glyph. The bubble is text plus meta and nothing else until the user hovers or long-presses.
+- **The meta is visually recessed**: noticeably smaller than the body and in a lower-contrast grey; the
+  read state is carried by colour on the ticks, not by the timestamp.
+- Bubbles shrink to content — the short incoming message's bubble is markedly narrower than the long
+  one's, confirming that the width cap is a maximum and not a fixed width.
+
+A bubble tail/notch is visible in the reference. Treat it as optional design-system garnish, not a
+requirement of this WO.
+
+### Acceptance criterion
+
+A message with short text, no reactions, no attachments and no reply quote occupies **at most two visual
+lines** — the text and, at most, a narrow right-aligned meta line inside the bubble. One line if the meta
+lands inline without a fight. Today's six rows for that case is what this WO exists to kill; anything
+still costing a third line has not met it.
+
+### Non-negotiable: the icons must keep their accessible names
+
+Replacing text with icons is exactly how a UI becomes unusable with a screen reader. Every icon
+introduced by this WO carries the text it replaced as its accessible name — the status icons keep the
+existing `MessagingReadTicks.DELIVERED` / `ALL_READ` strings as `aria-label`, the action affordance keeps
+a label, and no i18n key is deleted because its text stopped being displayed. A visually compact UI that
+announces "button" to a screen reader is a regression, not a redesign.
+
+Second, related trap: today's overflow menu is hover-only (`'& .message-actions': { opacity: 0 }`), which
+makes it unreachable on touch **and** invisible to keyboard users. This WO must not carry that forward.
+The affordance must be focusable and operable by keyboard. Note that `opacity: 0` does **not** remove an
+element from the tab order — it is only invisible — so a `:focus-within` (or `:focus-visible`) rule that
+reveals it on keyboard focus closes the keyboard half cheaply. The touch half is point 5's tap-to-reveal.
+That this is a pre-existing defect does not make it acceptable to reproduce.
+
+### Scope
+
+`src/messaging/MessageBubble.jsx` primarily; `src/messaging/ReadTicks.jsx` (text → icon),
+`src/messaging/ReactionBar.jsx` (compact placement, add-reaction moves into the menu), and the small part
+of `src/messaging/Thread.jsx` that positions bubbles and passes `children`. Their tests, the messaging
+i18n table if new labels are genuinely needed, and the `dev/` harness entry so the result can actually be
+looked at.
+
+### Non-goals / do-not-touch
+
+- **No custom touch gestures at all** — no swipe-to-reply and, per point 5, **no long-press**. Both need
+  hand-rolled pointer handling whose real cost is the edge cases (scroll conflict, text selection, iOS's
+  own context menu), and neither is needed for "compact". Operator decision 2026-08-02. If either is
+  wanted later it is its own WO.
+- **No Composer change.** The screenshot that triggered this also shows a tall composer, but that is not
+  what was asked. Raise it separately rather than folding it in.
+- **No change to `Thread`'s data flow**, pagination, reply-thread expansion, unread-reply marker
+  (MSG-3d), or the read-status contract.
+- **No dcm change.** See the read-status note below.
+- **No change to what `MessageBubble` accepts or renders as `children`** — hosts pass `ReadTicks` through
+  it today and must keep working.
+- No new dependency. MUI plus the existing icon set is enough.
+
+### Read status — an observation, deliberately NOT a precondition
+
+`ReadTicks` fetches per message (`getMessageReadStatus` in a `useEffect`), and dcm's `serialize_message`
+carries no read state, so a thread fires one REST call per own message. Tick icons make that fan-out more
+visible but do **not** worsen it: `canShowReadTicks` already bounds it to own messages, and the code
+comments that bound as deliberate. Putting the delivered/read aggregate onto `serialize_message` — the
+way `reply_count`/`last_reply_at` already ride it since MSG-3d, and viewer-independent in the same way —
+would remove the fan-out entirely. That is a worthwhile dcm follow-up and should be raised as one, but
+gating a UI fix behind a dcm release is the wrong trade. **Do not implement it here; do report it.**
+
+### Tier
+
+**Tier 2.** Shared-core, and this is an opinionated visual decision imposed on every future consumer of
+ucm's messaging surface — see the cross-consumer note. Codex-first, mandatory independent review, plus a
+`ui_reviewer` pass: this WO is entirely about how something looks and the harness exists to look at it.
+
+### Cross-consumer note
+
+ucm is consumer-agnostic by design, and this WO commits it to a specific chat aesthetic. That is
+acceptable **now** because jg-ferien is currently the only messaging consumer (spesix is deferred per the
+messaging-centralization course correction), so the design lands with one adopter rather than being
+retrofitted onto several. Say so in the register row rather than letting a future consumer discover it.
+What must **not** happen is jg-specific vocabulary or layout assumptions leaking into the package — the
+same line MSG-3d drew for `external_key` applies here.
+
+### Risks
+
+- **Do not get drawn into the inline-meta CSS.** Placing timestamp and ticks on the last text line, and
+  wrapping cleanly when the text ends near the edge, is a known-awkward problem needing a reserved inline
+  spacer or a floated meta element. Point 2 deliberately does not require it. If a first attempt does not
+  fall out cleanly, take the trailing meta line and move on — this risk is listed to be avoided, not
+  managed.
+- **Long text, long words, RTL and zoom.** A shrink-to-content bubble with a right-aligned meta
+  breaks in interesting ways with a single unbroken 60-character token, at 200% zoom, and in narrow
+  mobile widths. Check those three explicitly.
+- **Losing an action.** Reply, React, Edit, Delete and Copy all currently exist. Collapsing them into one
+  menu must not quietly drop one — particularly React, which is moving from a permanent control into the
+  menu and is the easiest to forget.
+- **Announcements and polls.** `MessageBubble` also renders announcement titles, announcement link
+  buttons, poll cards and attachment lists. A bubble redesign that only considers plain text will make
+  those look broken. Each needs a look in the harness.
+
+### Tests to WRITE (scoped — run only these)
+
+- a short own message renders its timestamp and status **inside** the bubble, not as a sibling row (the
+  acceptance criterion, asserted structurally rather than by pixel — do not assert that the meta shares
+  the text's line, which point 2 leaves open);
+- the action menu opens for an **incoming** message and offers Reply, and offers Edit/Delete only where
+  `canAct` holds (point 5b — a fixture containing only own messages will not catch this);
+- the affordance is reachable on touch without a long press;
+- no standalone reply button and no permanently rendered reaction row exist in the DOM for a plain
+  message;
+- own and incoming messages are distinguishable (alignment/styling hook), and the sender name renders for
+  a group conversation but not a direct one;
+- the status icon exposes the same accessible name the text label used, and appears only on own messages;
+- the action affordance is reachable and operable by keyboard alone — no hover, no long press;
+- the action menu contains Reply, React, Edit, Delete and Copy for a message the user may act on, and the
+  reply quote still triggers `onJumpToMessage`;
+- an announcement, a poll and an attachment message each still render their existing content inside the
+  new bubble.
+
+Command: `pnpm vitest run tests/Thread.test.jsx tests/messagingMessageActions.test.jsx tests/messagingInteractions.test.jsx tests/messagingPollRendering.test.jsx` plus any new file. The existing messaging tests are the regression net — if several of them need rewriting, that is a signal the change went wider than the envelope, and it should be reported before proceeding.
+
+### Release
+
+One version bump + npm publish at WO end. jg-ferien bumps its pin afterwards to pick the design up; that
+pin bump is not part of this WO.
+
+### Preconditions
+
+None. Independent of `MSG-3e` (per-candidate scope in `DirectMessageLauncher`) — different files, either
+order, but if both are in flight coordinate the version bumps so two releases don't collide.
+
+### Approval Gate #1
+
+Granted by the operator 2026-08-02: compact, icon-based, chat bubbles, WhatsApp as the model, across all
+three design questions asked.
+
+### Mini-handover (pastable)
+
+Orchestrator: implement `work-orders/MSG-3f.md` in `ui-core-micha` (main). `git pull` first, read the WO,
+then follow `orchestrate-codex` (write Part B yourself, Codex-first, own independent review plus a
+`ui_reviewer` pass on the harness, publish at WO end). **The acceptance criterion is one visual line for a
+short message — check it before declaring done.**
+
+---
+
+## Part B — Implementation map (Orchestrator)
+
+**Target repo working directory:** `C:\Users\Micha Bigler\Documents\webapps\ui-core-micha` (repo root; main
+branch). Work from this package; open only the named files to verify.
+
+### Current shape (verified while scoping — do not re-derive)
+
+**`src/messaging/MessageBubble.jsx`** (105 lines) — one `Paper` (`component="article"`, `:66`) wrapping a
+single `Stack spacing={0.75}` (`:67`) with, in row order: reply-quote `Button` (`:68-73`, only if `replyTo`),
+meta row — sender name (`conversation?.kind !== 'direct'`, `:75`) + `created_at` + "edited" caption
+(`:74-78`), announcement title/link (`:79-80`), error `Alert` (`:81`), body/edit-`TextField` (`:82`),
+`!deleted` wrapper with `AttachmentList` + `<ReactionBar message={message} />` + `PollCard` (`:83-87`),
+standalone "Antworten" reply `Button` (`:88`, **not** inside the existing `Menu` — reply is currently
+ungated by `canAct`, unlike edit/delete/copy), overflow `IconButton` (`:89`, `className="message-actions"`,
+`canAct`-gated), `{children}` (`:90` — this is where `Thread.jsx` injects `<ReadTicks>`, currently its own
+trailing row, not "inside the bubble"), then the edit/delete/copy `Menu` (`:92-96`) and delete-confirm
+`Dialog` (`:97-101`).
+
+- `canAct` (`:35-37`): `!deleted && message.kind !== 'poll' && ((Boolean(currentUser?.id) &&
+  message.sender?.id === currentUser?.id) || canModerateMessages)` — gates both `onContextMenu` (`:66`) and
+  the overflow `IconButton`. **No existing `isOwn`/alignment boolean** — the own-message check is inlined
+  into `canAct` only; introduce a named `isOwn` for the alignment split (same condition, without the
+  `!deleted`/`kind !== 'poll'` parts that are specific to action-gating, not alignment).
+- Hover-only CSS trap (`:66`, inline `sx` on the `Paper`): `'& .message-actions': { opacity: 0 },
+  '&:hover .message-actions': { opacity: 1 }` — pure `:hover`, no `:focus-within`/`:focus-visible` variant,
+  no touch/tap path. This is the exact defect the WO's "Non-negotiable" section calls out — fix it here
+  (add a focus-visible rule; touch is a tap-to-reveal state, not CSS-only).
+- `Thread.jsx:103` and `:113` are the two `<MessageBubble>` mount sites (root messages and nested replies
+  respectively), both passing `children={canShowReadTicks(message, user) && <ReadTicks .../>}`.
+  `canShowReadTicks` (`Thread.jsx:25-27`) duplicates (more strictly — adds a pending-optimistic-row guard)
+  the same own-message check as `canAct` — a third near-duplicate inline check. Consider factoring these
+  three (MessageBubble's `canAct`, Thread's `canShowReadTicks`, the new alignment `isOwn`) toward one
+  shared own-message predicate if it falls out cleanly; not required if it adds risk late in the WO.
+- Direct-vs-group signal: `conversation?.kind !== 'direct'`, exactly this string comparison, reused
+  identically at `MessageBubble.jsx:75` and `ReadTicks.jsx:21` — no enum, just keep using it.
+
+**`src/messaging/ReadTicks.jsx`** (25 lines) — fetch-per-message `useEffect` (`:13-17`,
+`getMessageReadStatus(messageId)` from `useMessaging()`). Only **two** states exist in the data today:
+`status.all_read` (bool) vs `status.delivered_count` (number) — **there is no third "sent, not yet
+delivered" state** in the current contract; do not invent one that the backend can't back. Map the two
+existing states to icon variants (e.g. a single check for "delivered", a double/colored check for
+"all read") — do not add a third tick state without a data source. `status.recipient_detail` (only present
+for non-direct conversations, `:21` comment already documents the DM carve-out) drives the existing
+clickable popover of names (`:24`) — keep that behavior, just change what triggers it from a text caption to
+an icon (`aria-haspopup="dialog"` must move with it). i18n keys already exist and are reusable as
+`aria-label`s: `MessagingReadTicks.ALL_READ`, `.DELIVERED` (`{{count}}`), `.RECIPIENTS`.
+
+**`src/messaging/ReactionBar.jsx`** (47 lines) — currently its own sibling row (`Stack`, `:32`), mounted
+inside MessageBubble's `!deleted` wrapper (`MessageBubble.jsx:85`). **Add-reaction already exists and is
+reusable as-is**: `:35`, an `IconButton` (`AddReactionOutlinedIcon`, `aria-label={t('MessagingReactions.ADD')}`)
+toggling local `expanded` state; when expanded, `:37-43` renders `QUICK_EMOJIS`
+(`['👍','❤️','😂','🎉','👀']`, `:8`) as `Chip`s — this is "the existing expandable row" the WO says already
+works; reuse it verbatim inside the action menu's React entry, don't rebuild it. `ReactionBar` takes only
+`message` as a prop today — no position/z-index hook back to the parent; if overlapping the bubble's bottom
+edge needs coordination (e.g. negative margin colliding with bubble padding), that's a MessageBubble-side
+CSS concern, only touch `ReactionBar`'s own layout if the compact-row placement itself needs to change (it
+likely does — from a full sibling row to a smaller overlapping one).
+
+### The new bubble shape — map the seams, not the CSS
+
+This WO is explicitly NOT asking for the inline-meta-shares-last-line CSS to be solved (Risks section, Part
+A) — implement the straightforward version (meta as its own narrow trailing line inside the bubble,
+right-aligned) and stop; do not spend cycles chasing the inline variant.
+
+1. **Alignment split**: introduce `isOwn` (own-message boolean, computed once, see above). Own → bubble
+   right-aligned on a tinted `Paper`; incoming → left-aligned, neutral surface. Shrink-to-content, capped at
+   ~75% of thread width (today's `maxWidth: 'min(100%, 680px)'`, `:66`, is a fixed cap regardless of
+   alignment — replace with a percentage-based cap and keep `min(...)` against a sane absolute ceiling for
+   very wide threads).
+2. **Meta moves inside**: move the timestamp + status-tick block from its own row into a small trailing
+   `Stack` inside the bubble's content area, right-aligned, "recessed" styling (smaller, lower-contrast —
+   Part A's confirmed-against-screenshots section). Sender name stays where it is conceptually (above text,
+   inside the bubble) but only for `conversation?.kind !== 'direct'` (unchanged condition).
+3. **Status as icons**: `ReadTicks.jsx` swaps its two `Typography` text branches for icon components
+   (`Done`/`DoneAll` from `@mui/icons-material`, following the repo's `Outlined`-variant convention where one
+   exists — check availability before picking exact icon names) with the existing i18n strings as
+   `aria-label`, own-messages-only (unchanged `canShowReadTicks` gate in `Thread.jsx`, do not touch it).
+4. **Actions collapse into one menu**: move the standalone reply `Button` (`:88`) INTO the existing `Menu`
+   (`:92-96`) as a new first entry, alongside React (opens `ReactionBar`'s existing `expanded` row — do not
+   nest an emoji picker inside the MUI `Menu`, per Part A) and the existing Edit/Delete/Copy entries. The
+   overflow `IconButton` (`:89`) becomes the single affordance — reuse the existing `MoreVertIcon` (already
+   the established overflow icon in this repo, `ConversationList.jsx` too), don't introduce a different one.
+5. **Two menu variants (5b — the easy-to-miss one)**: any message (own or incoming) gets Reply + React +
+   Copy; only a message where `canAct`-minus-the-reply-specific-parts holds (i.e. own message or moderator,
+   the existing author/moderator check) additionally gets Edit + Delete. This means the menu's visibility
+   condition changes from "`canAct` gates the whole menu" to "the menu is always offered when there's
+   anything to put in it (any message), but its CONTENTS vary" — restructure the render condition
+   accordingly; a fixture with only own messages will not catch a regression here (Part A's own warning).
+6. **Desktop hover+focus, touch tap**: fix the CSS trap directly — add a `&:focus-within .message-actions`
+   (or `:focus-visible`) rule alongside the existing `:hover` rule so keyboard Tab-focus reveals the
+   affordance (the element is already in the tab order, per Part A's analysis — `opacity:0` doesn't remove
+   it). For touch, add a tap-to-reveal state (e.g. local `actionsVisible` state toggled by a tap handler on
+   the bubble, independent of hover/focus) — no long-press, no swipe, no custom pointer-event tracking.
+7. **Reactions compact row**: `ReactionBar`'s existing-reactions row (not the add-reaction affordance, which
+   moves into the menu per point 4) becomes a compact row overlapping the bubble's bottom edge rather than a
+   full sibling Stack row — likely a negative top margin pulling it up into the bubble's bottom padding, or
+   an absolutely-positioned row anchored to the bubble. `ReactionBar`'s own `expanded`/`QUICK_EMOJIS` block
+   stays as-is; only its trigger changes (moves from `ReactionBar`'s own `AddReactionOutlinedIcon` button —
+   now redundant, since React lives in the menu — but the `expanded` row itself is unchanged).
+8. **Reply quote**: keep inside the bubble but restyle from a full-width `Button` (`:68-73`) to a tinted
+   block with a coloured leading border (e.g. `borderLeft`) — must still call `onJumpToMessage` on click
+   (existing prop, keep the click handler, only restyle the container).
+9. **Announcements/polls/attachments** (`:79-80`, `:83-87`): keep rendering inside the new bubble container;
+   check each in the harness (Part A's Risks section) since none of the four scoped test files assert on
+   their visual placement, only their data/behavior.
+
+### Verification harness — extend, don't just eyeball the diff
+
+`dev/entries.jsx:140-157` already has a `messaging-message-bubble` entry, but it mounts a single bubble with
+no `conversation` prop, no `currentUser` (so `canAct` is always false — no own-message demo), and no
+`replyTo`/`children`/ReadTicks wired in — **insufficient to visually verify this WO's acceptance criterion**.
+Either extend this entry with a currentUser matching one message's `sender.id` (for an own-message demo)
+plus a second incoming-message instance, a `replyTo` prop, and mock `ReadTicks` children — or, likely
+cleaner, extend the existing `messaging-thread` entry (`dev/entries.jsx:156`, `ThreadEntry` against
+`messagingHarnessApi`) which already exercises the real Thread→MessageBubble wiring with realistic
+`sender`/`reply_count`/replies data. Add fixture messages covering: a short own message (acceptance
+criterion — one/two lines), a short incoming message, a long-single-unbroken-token message, a message at
+200% zoom (use the harness's viewport toggle), a group-conversation message (sender name visible) vs a
+direct one (no sender name), an announcement, a poll, and an attachment. This is the actual verification
+step — visually confirm the acceptance criterion before reporting `RESULT: DONE`.
+
+### Invariants / do-not-touch
+
+- No Composer change (a different component, out of scope even though the triggering screenshot showed one).
+- No change to `Thread.jsx`'s data flow, pagination, reply-thread expansion, unread-reply marker (MSG-3d),
+  or the read-status REST contract (`getMessageReadStatus` shape stays exactly as-is — two states, no new
+  backend call).
+- No dcm change — the fan-out observation (one `getMessageReadStatus` call per own message) is a known,
+  pre-existing, and deliberately bounded cost; report the read-aggregate-on-`serialize_message` idea as a
+  dcm follow-up suggestion in the WO's own docs, do not implement it.
+- `MessageBubble`'s `children` contract stays: hosts (jg-ferien today) pass `ReadTicks` through it and must
+  keep working unchanged from the outside.
+- No new dependency — MUI plus `@mui/icons-material` is enough (both already used throughout `src/messaging/`).
+- Every icon this WO introduces keeps its text as an `aria-label` — no i18n key gets deleted because its
+  text stopped being visually displayed (Part A's "Non-negotiable" section).
+
+### Tests — see Part A's "Tests to WRITE" list verbatim
+
+Run: `pnpm vitest run tests/Thread.test.jsx tests/messagingMessageActions.test.jsx
+tests/messagingInteractions.test.jsx tests/messagingPollRendering.test.jsx` plus any new file for the new
+assertions (own/incoming alignment, menu-for-incoming-message, keyboard/touch affordance reachability,
+icon aria-labels). These four existing files assert on data/behavior (menu gating, reaction round-trips,
+poll rendering, ReadTicks own-message-only mounting), not DOM layout — good news for a redesign, but per
+Part A: **if several existing tests need rewriting (not just relocating an assertion), that's a signal the
+change went wider than the envelope — stop and report before proceeding**, don't just patch tests to match
+whatever the implementation produced.
+
+### Progress contract
+
+Emit a `PLAN: …` line first, then a single-line `PROGRESS: [n/total] <action>` before every relevant action
+and `… done` on completion, no gap > ~2 min, unbuffered stdout, and exactly one final
+`RESULT: DONE|BLOCKED <reason>`.
+
+### Constraints for the implementer
+
+The WO text (Part A + this Part B) is the COMPLETE spec. Read `AGENTS.md` and
+`.codex/skills/frontend-engineering` only for conventions. Stay in scope: `MessageBubble.jsx`,
+`ReadTicks.jsx`, `ReactionBar.jsx`, the small `Thread.jsx` slice that mounts them, their tests, the messaging
+i18n file if new labels are genuinely needed, and the `dev/` harness entry. Do not touch `Composer.jsx`,
+`ConversationList.jsx`, poll/attachment components' internals, or anything outside this list. Do not update
+`MEMORY.md`. **Do NOT `git add`/`commit`/`push`** — leave the diff for the Orchestrator's review; a prior WO
+in this campaign (`ui-core-micha` MSG-3e) had its implementer self-commit and self-publish against this same
+instruction — that was a governance breach, not a template to follow. **Do NOT bump the version or
+publish** — the Orchestrator owns the release. WRITE the tests specified in Part A and RUN ONLY the listed
+files plus any new ones — no full suite, no self-review; the Orchestrator owns the authoritative run, the
+independent review, AND the `ui_reviewer` harness pass, and those are the gate.