@micha.bigler/ui-core-micha 2.15.0 → 2.17.0

package/dist/messaging/Thread.js

@@ -0,0 +1,110 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Alert, Box, Button, CircularProgress, Divider, Stack, Typography } from '@mui/material';
+import { useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { AuthContext } from '../auth/AuthContext';
+import { MessageBubble } from './MessageBubble';
+import { useMessaging } from './MessagingProvider';
+import { ReadTicks } from './ReadTicks';
+function chronological(messages) { return [...messages].sort((left, right) => new Date(left.created_at || 0) - new Date(right.created_at || 0)); }
+function replyToId(message) { var _a; return (_a = message.reply_to_id) !== null && _a !== void 0 ? _a : message.reply_to; }
+// A still-pending optimistic row (chunk 4) has a fake `local-<requestId>` id
+// and no durable server row yet — mounting ReadTicks against it would fire a
+// getMessageReadStatus REST call for an id the server has never heard of.
+// Wait for reconciliation (status !== 'pending') before showing read state.
+function canShowReadTicks(message, user) {
+    var _a;
+    return Boolean(user === null || user === void 0 ? void 0 : user.id) && ((_a = message.sender) === null || _a === void 0 ? void 0 : _a.id) === user.id && message.status !== 'pending';
+}
+/**
+ * A standalone timeline. Compose/reaction/poll/attachment mutations remain
+ * separate chunk collaborators.
+ *
+ * ReadTicks is only mounted for the current user's own messages (matches
+ * jg's `shouldShowReadTick(msg, isOwn)`): a read receipt tells the sender
+ * whether their own message was seen, not the recipient anything about a
+ * message they're currently reading. Gating here also bounds the number of
+ * `getMessageReadStatus` REST calls a rendered timeline fires — one per own
+ * message shown, not one per message in the conversation.
+ */
+export function Thread({ conversationId, onReplyTargetChange, canModerateMessages = false, onAnnouncementLink }) {
+    var _a;
+    const { t } = useTranslation();
+    const { user } = useContext(AuthContext) || {};
+    const { cache, loadMoreMessages, loadThreadReplies, markConversationRead, markThreadRead } = useMessaging();
+    const scrollRef = useRef(null);
+    const wasNearBottomRef = useRef(true);
+    const messageCountRef = useRef(0);
+    const [loadingOlder, setLoadingOlder] = useState(false);
+    const [error, setError] = useState(null);
+    const [replyingTo, setReplyingTo] = useState(null);
+    const [openThreads, setOpenThreads] = useState({});
+    const conversation = cache.conversations[conversationId];
+    const conversationMessages = useMemo(() => chronological(Object.values(cache.messages).filter((message) => message.conversation_id === conversationId)), [cache.messages, conversationId]);
+    const roots = useMemo(() => chronological(Object.values(cache.messages).filter((message) => message.conversation_id === conversationId && !replyToId(message))), [cache.messages, conversationId]);
+    useEffect(() => { if (conversationId != null)
+        markConversationRead(conversationId).catch(() => { }); }, [conversationId, markConversationRead]);
+    useEffect(() => { wasNearBottomRef.current = true; messageCountRef.current = 0; }, [conversationId]);
+    useEffect(() => {
+        var _a;
+        if (replyingTo && ((_a = cache.messages[replyingTo.id]) === null || _a === void 0 ? void 0 : _a.deleted_at)) {
+            setReplyingTo(null);
+            onReplyTargetChange === null || onReplyTargetChange === void 0 ? void 0 : onReplyTargetChange(null);
+        }
+    }, [cache.messages, onReplyTargetChange, replyingTo]);
+    useEffect(() => {
+        const isNewMessage = conversationMessages.length > messageCountRef.current;
+        messageCountRef.current = conversationMessages.length;
+        if (!isNewMessage || !wasNearBottomRef.current || !scrollRef.current)
+            return;
+        const timeline = scrollRef.current;
+        if (typeof timeline.scrollTo === 'function')
+            timeline.scrollTo({ top: timeline.scrollHeight, behavior: 'smooth' });
+        else
+            timeline.scrollTop = timeline.scrollHeight;
+    }, [conversationMessages]);
+    const loadOlder = useCallback(async () => {
+        setLoadingOlder(true);
+        setError(null);
+        try {
+            await loadMoreMessages(conversationId);
+        }
+        catch (_a) {
+            setError(t('MessagingThread.LOAD_ERROR'));
+        }
+        finally {
+            setLoadingOlder(false);
+        }
+    }, [conversationId, loadMoreMessages, t]);
+    const onScroll = () => {
+        const timeline = scrollRef.current;
+        if (timeline)
+            wasNearBottomRef.current = timeline.scrollHeight - timeline.scrollTop - timeline.clientHeight < 80;
+        if ((timeline === null || timeline === void 0 ? void 0 : timeline.scrollTop) === 0 && cache.cursors.messages[conversationId] && !loadingOlder)
+            loadOlder();
+    };
+    const reply = (message) => { setReplyingTo(message); onReplyTargetChange === null || onReplyTargetChange === void 0 ? void 0 : onReplyTargetChange(message); };
+    const jumpToMessage = (messageId) => {
+        var _a, _b;
+        const target = [...(((_a = scrollRef.current) === null || _a === void 0 ? void 0 : _a.querySelectorAll('[data-message-id]')) || [])]
+            .find((element) => String(element.dataset.messageId) === String(messageId));
+        (_b = target === null || target === void 0 ? void 0 : target.scrollIntoView) === null || _b === void 0 ? void 0 : _b.call(target, { block: 'center', behavior: 'smooth' });
+    };
+    const toggleReplies = async (root) => {
+        if (!openThreads[root.id]) {
+            try {
+                await loadThreadReplies(root.id);
+            }
+            catch (_a) {
+                setError(t('MessagingThread.REPLIES_ERROR'));
+                return;
+            }
+            markThreadRead(root.id).catch(() => { });
+        }
+        setOpenThreads((current) => (Object.assign(Object.assign({}, current), { [root.id]: !current[root.id] })));
+    };
+    return (_jsxs(Stack, { spacing: 1, sx: { minWidth: 0 }, children: [error && _jsx(Alert, { severity: "error", role: "alert", children: error }), replyingTo && _jsx(Alert, { severity: "info", onClose: () => { setReplyingTo(null); onReplyTargetChange === null || onReplyTargetChange === void 0 ? void 0 : onReplyTargetChange(null); }, children: t('MessagingThread.REPLYING_TO', { sender: ((_a = replyingTo.sender) === null || _a === void 0 ? void 0 : _a.display_name) || t('MessagingThread.UNKNOWN_SENDER') }) }), _jsxs(Box, { ref: scrollRef, onScroll: onScroll, sx: { maxHeight: 560, overflowY: 'auto', px: 0.5 }, "aria-label": t('MessagingThread.TIMELINE'), children: [cache.cursors.messages[conversationId] && _jsx(Box, { textAlign: "center", py: 1, children: _jsx(Button, { onClick: loadOlder, disabled: loadingOlder, children: loadingOlder ? _jsx(CircularProgress, { size: 18 }) : t('MessagingThread.LOAD_OLDER') }) }), !roots.length && _jsx(Typography, { color: "text.secondary", textAlign: "center", py: 4, children: t('MessagingThread.EMPTY') }), _jsx(Stack, { spacing: 1, children: roots.map((message) => {
+                            const replies = chronological(Object.values(cache.messages).filter((item) => String(replyToId(item)) === String(message.id)));
+                            return _jsxs(Stack, { spacing: 0.75, children: [_jsx(MessageBubble, { message: message, conversation: conversation, onReply: reply, onJumpToMessage: jumpToMessage, onAnnouncementLink: onAnnouncementLink, canModerateMessages: canModerateMessages, children: canShowReadTicks(message, user) && _jsx(ReadTicks, { messageId: message.id, conversation: conversation }) }), (message.reply_count || replies.length) > 0 && _jsx(Button, { size: "small", onClick: () => toggleReplies(message), children: openThreads[message.id] ? t('MessagingThread.HIDE_REPLIES') : t('MessagingThread.SHOW_REPLIES', { count: message.reply_count || replies.length }) }), openThreads[message.id] && _jsx(Stack, { spacing: 0.75, sx: { pl: 3, borderLeft: 2, borderColor: 'divider' }, children: replies.map((item) => _jsx(MessageBubble, { message: item, replyTo: message, conversation: conversation, onReply: reply, onJumpToMessage: jumpToMessage, onAnnouncementLink: onAnnouncementLink, canModerateMessages: canModerateMessages, children: canShowReadTicks(item, user) && _jsx(ReadTicks, { messageId: item.id, conversation: conversation }) }, item.id)) }), _jsx(Divider, {})] }, message.id);
+                        }) })] })] }));
+}

package/dist/messaging/api.js

@@ -0,0 +1,51 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import apiClient from '../auth/apiClient';
+const BASE_URL = '/api/messaging/';
+const conversationsUrl = `${BASE_URL}conversations/`;
+function data(response) {
+    return response.data;
+}
+function requestConfig({ cursor, params, headers, onUploadProgress } = {}) {
+    return Object.assign(Object.assign(Object.assign(Object.assign({}, (params ? { params } : {})), (cursor ? { params: Object.assign(Object.assign({}, (params || {})), { cursor }) } : {})), (headers ? { headers } : {})), (onUploadProgress ? { onUploadProgress } : {}));
+}
+export function listConversations(_a = {}) {
+    var { cursor } = _a, filters = __rest(_a, ["cursor"]);
+    return apiClient.get(conversationsUrl, requestConfig({ cursor, params: filters })).then(data);
+}
+export function createDirectConversation(payload) { return apiClient.post(`${conversationsUrl}direct/`, payload).then(data); }
+export function createGroupConversation(payload) { return apiClient.post(`${conversationsUrl}group/`, payload).then(data); }
+export function createBroadcastConversation(payload) { return apiClient.post(`${conversationsUrl}broadcast/`, payload).then(data); }
+export function createManagedConversation(payload) { return apiClient.post(`${conversationsUrl}managed/`, payload).then(data); }
+export function createObjectThreadConversation(payload) { return apiClient.post(`${conversationsUrl}object-thread/`, payload).then(data); }
+export function getConversationConfig(conversationId) { return apiClient.get(`${conversationsUrl}${conversationId}/config/`).then(data); }
+export function patchConversationConfig(conversationId, patch) { return apiClient.patch(`${conversationsUrl}${conversationId}/config/`, patch).then(data); }
+export function archiveConversation(conversationId, archived) { return apiClient.post(`${conversationsUrl}${conversationId}/archive/`, { archived }).then(data); }
+export function patchConversationPreferences(conversationId, patch) { return apiClient.post(`${conversationsUrl}${conversationId}/preferences/`, patch).then(data); }
+export function listMessages(conversationId, { cursor } = {}) { return apiClient.get(`${conversationsUrl}${conversationId}/messages/`, requestConfig({ cursor })).then(data); }
+export function createMessage(conversationId, payload, { idempotencyKey } = {}) { return apiClient.post(`${conversationsUrl}${conversationId}/messages/`, payload, requestConfig({ headers: idempotencyKey ? { 'Idempotency-Key': idempotencyKey } : undefined })).then(data); }
+export function uploadAttachments(conversationId, formData, { idempotencyKey, onUploadProgress } = {}) { return apiClient.post(`${conversationsUrl}${conversationId}/attachments/`, formData, requestConfig({ headers: idempotencyKey ? { 'Idempotency-Key': idempotencyKey } : undefined, onUploadProgress })).then(data); }
+export function createPoll(conversationId, payload, { idempotencyKey } = {}) { return apiClient.post(`${conversationsUrl}${conversationId}/polls/`, payload, requestConfig({ headers: idempotencyKey ? { 'Idempotency-Key': idempotencyKey } : undefined })).then(data); }
+export function getMessage(messageId) { return apiClient.get(`${BASE_URL}messages/${messageId}/`).then(data); }
+export function patchMessage(messageId, patch) { return apiClient.patch(`${BASE_URL}messages/${messageId}/`, patch).then(data); }
+export function deleteMessage(messageId) { return apiClient.delete(`${BASE_URL}messages/${messageId}/`).then(data); }
+export function addReaction(messageId, emoji) { return apiClient.post(`${BASE_URL}messages/${messageId}/reactions/`, { emoji }).then(data); }
+export function removeReaction(messageId, emoji) { return apiClient.delete(`${BASE_URL}messages/${messageId}/reactions/${encodeURIComponent(emoji)}/`).then(data); }
+export function listThread(rootId, { cursor } = {}) { return apiClient.get(`${BASE_URL}messages/${rootId}/thread/`, requestConfig({ cursor })).then(data); }
+export function markThreadRead(rootId, readAt) { return apiClient.post(`${BASE_URL}messages/${rootId}/thread/read/`, readAt ? { read_at: readAt } : {}).then(data); }
+export function markConversationRead(conversationId, readAt) { return apiClient.post(`${conversationsUrl}${conversationId}/read/`, readAt ? { read_at: readAt } : {}).then(data); }
+export function getReadStatus(messageId) { return apiClient.get(`${BASE_URL}messages/${messageId}/read-status/`).then(data); }
+export function votePoll(pollId, optionIds) { return apiClient.post(`${BASE_URL}polls/${pollId}/vote/`, { option_ids: optionIds }).then(data); }
+export function closePoll(pollId) { return apiClient.post(`${BASE_URL}polls/${pollId}/close/`).then(data); }
+export function getAttachment(attachmentId) { return apiClient.get(`${BASE_URL}attachments/${attachmentId}/`, { responseType: 'blob' }).then(data); }
+export function getAttachmentThumbnail(attachmentId) { return apiClient.get(`${BASE_URL}attachments/${attachmentId}/thumbnail/`, { responseType: 'blob' }).then(data); }
+export function getUnreadCount() { return apiClient.get(`${BASE_URL}unread-count/`).then(data); }

package/dist/messaging/composerImageCompression.js

@@ -0,0 +1,36 @@
+const MAX_IMAGE_BYTES = 2 * 1024 * 1024;
+const MAX_IMAGE_EDGE = 2560;
+function imageDimensions(file) {
+    return new Promise((resolve, reject) => {
+        const url = URL.createObjectURL(file);
+        const image = new Image();
+        image.onload = () => { URL.revokeObjectURL(url); resolve(image); };
+        image.onerror = () => { URL.revokeObjectURL(url); reject(new Error('Unable to decode image')); };
+        image.src = url;
+    });
+}
+function canvasBlob(canvas) {
+    return new Promise((resolve) => canvas.toBlob(resolve, 'image/jpeg', 0.85));
+}
+/** Compresses large images opportunistically; callers always receive a sendable file. */
+export async function compressImageForUpload(file) {
+    var _a, _b;
+    if (!((_a = file === null || file === void 0 ? void 0 : file.type) === null || _a === void 0 ? void 0 : _a.startsWith('image/')) || file.size <= MAX_IMAGE_BYTES)
+        return file;
+    try {
+        const image = await imageDimensions(file);
+        const largestEdge = Math.max(image.naturalWidth || image.width, image.naturalHeight || image.height);
+        if (!largestEdge || largestEdge <= MAX_IMAGE_EDGE)
+            return file;
+        const scale = MAX_IMAGE_EDGE / largestEdge;
+        const canvas = document.createElement('canvas');
+        canvas.width = Math.round((image.naturalWidth || image.width) * scale);
+        canvas.height = Math.round((image.naturalHeight || image.height) * scale);
+        (_b = canvas.getContext('2d')) === null || _b === void 0 ? void 0 : _b.drawImage(image, 0, 0, canvas.width, canvas.height);
+        const blob = await canvasBlob(canvas);
+        return blob ? new File([blob], file.name.replace(/\.[^.]+$/, '') + '.jpg', { type: 'image/jpeg', lastModified: file.lastModified }) : file;
+    }
+    catch (_c) {
+        return file;
+    }
+}

package/dist/notifications/NotificationsProvider.js

@@ -66,7 +66,7 @@ export function NotificationsProvider({ children, wsUrlBase }) {
     // `replaceNotifications(...)` is unconditional and would silently drop a message that
     // arrived and patched state before the initial REST response landed.
     const [seeded, setSeeded] = useState(false);
-    const { subscribe } = useRealtimeCore({
+    const { subscribe, onReconnect } = useRealtimeCore({
         active: authenticated && seeded,
         wsUrl: getWebSocketUrl(wsUrlBase),
     });
@@ -159,7 +159,7 @@ export function NotificationsProvider({ children, wsUrlBase }) {
     const markSeen = useCallback((ids) => mark('seen', ids), [mark]);
     const markDismissed = useCallback((ids) => mark('dismissed', ids), [mark]);
     const markDone = useCallback((ids) => mark('done', ids), [mark]);
-    return (_jsx(RealtimeContext.Provider, { value: { subscribe }, children: _jsx(NotificationsContext.Provider, { value: {
+    return (_jsx(RealtimeContext.Provider, { value: { subscribe, onReconnect }, children: _jsx(NotificationsContext.Provider, { value: {
                 notifications,
                 unreadCount,
                 markSeen,

package/dist/notifications/realtime.js

@@ -27,6 +27,7 @@ export { RealtimeContext };
 export function useRealtimeCore({ active, wsUrl }) {
     const socketRef = useRef(null);
     const subscribersRef = useRef(new Map());
+    const reconnectSubscribersRef = useRef(new Set());
     const subscribe = useCallback((envelope, handler) => {
         const subscribers = subscribersRef.current;
         if (!subscribers.has(envelope)) {
@@ -43,12 +44,20 @@ export function useRealtimeCore({ active, wsUrl }) {
             }
         };
     }, []);
+    // Additive lifecycle signal for domains whose REST projections must be
+    // refreshed after the one shared transport reconnects. It deliberately does
+    // not alter the socket/backoff ownership or the envelope subscriber API.
+    const onReconnect = useCallback((handler) => {
+        reconnectSubscribersRef.current.add(handler);
+        return () => reconnectSubscribersRef.current.delete(handler);
+    }, []);
     useEffect(() => {
         if (!active)
             return undefined;
         let isActive = true;
         let reconnectTimer = null;
         let backoffMs = INITIAL_BACKOFF_MS;
+        let hasConnected = false;
         const handleMessage = (event) => {
             var _a;
             let data;
@@ -78,6 +87,17 @@ export function useRealtimeCore({ active, wsUrl }) {
             socketRef.current = socket;
             socket.onopen = () => {
                 backoffMs = INITIAL_BACKOFF_MS;
+                if (hasConnected) {
+                    reconnectSubscribersRef.current.forEach((handler) => {
+                        try {
+                            handler();
+                        }
+                        catch (error) {
+                            console.error('Realtime reconnect subscriber error', error);
+                        }
+                    });
+                }
+                hasConnected = true;
             };
             socket.onmessage = handleMessage;
             socket.onerror = () => {
@@ -106,5 +126,5 @@ export function useRealtimeCore({ active, wsUrl }) {
                 socket.close();
         };
     }, [active, wsUrl]);
-    return { subscribe };
+    return { subscribe, onReconnect };
 }

package/docs/messaging-deviations.md

@@ -0,0 +1,101 @@
+# Messaging parity outcomes (MSG-3b)
+
+This is the authoritative MSG-3b parity record. It replaces the former
+file-level “final parity confirmation,” which was not sufficient evidence of
+feature parity. Each entry maps directly to the numbered checklist in Part A
+of `work-orders/MSG-3b.md`. `OK` means the capability is present; `DEV` means
+an intentional, documented redesign or non-parity; `BLOCKED` means dcm 2.36.1
+does not expose the data or realtime contract needed to implement it truthfully.
+
+## Unread lifecycle
+
+1. **OK** — Selecting a conversation calls the existing mark-read endpoint and clears its local unread count.
+2. **OK** — Opening a `Thread` also marks its conversation read; the duplicate call is idempotent.
+3. **OK** — Marking a conversation read decrements the global count by that conversation’s prior unread value, clamped at zero.
+4. **OK** — Expanding a reply thread calls the existing thread-read endpoint for its root message.
+5. **OK** — Realtime incoming messages increment unread only outside the active conversation and never double-count optimistic-send reconciliation.
+
+## Message actions
+
+6. **DEV** — Desktop hover and right-click open the MUI action menu. jg’s dedicated mobile long-press gesture is not reproduced; the same actions remain available through the regular MUI affordance.
+7. **OK** — Authors can edit their own messages inline. Moderator edit affordance is host-supplied because dcm exposes no per-viewer capability field; server authorization remains authoritative.
+8. **OK** — An active editor closes when the message is deleted by another update.
+9. **OK** — Authors and host-designated moderators can delete; the host boolean is UX gating only and dcm enforces the actual permission.
+10. **OK** — Deletion is confirmed in a MUI dialog before the request is sent.
+11. **OK** — A deleted reply/edit target clears dependent composer or editor state.
+12. **OK** — Message text can be copied through the action menu.
+13. **OK** — Reply targeting is present.
+14. **DEV** — Reactions use five compact presets rather than jg’s six-preset presentation.
+15. **DEV** — No full third-party emoji picker is added; the compact preset menu keeps the package dependency-free.
+16. **OK** — Deleted and poll messages do not render the generic action menu.
+
+## Direct conversations
+
+17. **OK** — `DirectMessageLauncher` starts a direct conversation.
+18. **OK** — The launcher displays the host-supplied candidate list and selection state.
+19. **OK** — It has distinct empty and in-flight creation states; candidate discovery remains host-owned because dcm has no directory endpoint.
+20. **OK** — Start is disabled until a candidate is selected and during creation.
+21. **OK** — Policy rejections render an API-derived readable error in the dialog.
+22. **OK** — The picker uses a fullscreen MUI dialog at the small breakpoint.
+
+## Threading and quoting
+
+23. **OK** — Both dcm’s `reply_to_id` and optimistic rows’ `reply_to` are read, so REST and realtime replies group under their root.
+24. **OK** — Replies show a sender and short quoted snippet.
+25. **OK** — Clicking a quote scrolls its source message into view.
+26. **OK** — Quotes of deleted messages render the deleted placeholder rather than stale content.
+27. **BLOCKED** — dcm writes a thread receipt but exposes no prior thread receipt state, unread flag, or unread count to read. A truthful cross-device unread-reply dot cannot be rendered without a dcm contract addition.
+28. **OK** — Reply threads load lazily on expand and collapse locally.
+29. **DEV** — Reply composition is supplied through the independently mountable `Composer` target prop rather than jg’s per-thread embedded composer.
+
+## Composer
+
+30. **OK** — Enter sends and Shift+Enter preserves a newline.
+31. **OK** — Staged files show image thumbnails or file labels, with independent removal.
+32. **OK** — Attachment uploads show real byte-percentage progress when the browser reports an upload total; otherwise an indeterminate indicator is shown while the upload is in flight.
+33. **OK** — Images over 2 MB are compressed client-side to a maximum 2560 px JPEG at quality 0.85, with silent original-file fallback.
+34. **DEV** — Composer emoji insertion uses the existing compact preset set instead of jg’s full picker, while preserving insertion at the cursor.
+35. **OK** — Sending is optimistic and exposes retry plus inline error state.
+36. **OK** — The poll button is disabled while an image is staged as a UI convenience matching jg’s composer behavior; no dcm-side constraint requires it. Poll creation and attachment sending are separate API calls and separate message rows.
+37. **DEV** — Drafts are deliberately reset on conversation changes. jg’s cross-conversation draft leak is not reproduced.
+
+## Conversation list
+
+38. **BLOCKED** — dcm does not serialize `last_message`, so a last-message preview cannot be made correct against the real backend.
+39. **OK** — `last_message_at` renders through browser-native, locale-aware `Intl.RelativeTimeFormat` labels.
+40. **OK** — The existing MUI `selected={conversation.id === activeConversationId}` wiring produces the `Mui-selected` active-row highlight; it was verified and needs no redundant styling.
+41. **OK** — Unread badges and bold unread titles are present.
+42. **BLOCKED** — dcm stores the managed all/team distinction in `external_key` but omits it from conversation serialization. The UI must not guess from titles or other unrelated fields.
+43. **DEV** — Generic MUI kind icons replace jg’s richer per-kind/person avatar treatment while retaining type identification.
+44. **OK** — Mute and archive actions are present.
+
+## Timeline
+
+45. **OK** — New active-conversation messages auto-scroll when the reader was already near the bottom. Scrolled-up readers are not pulled away from history; this near-bottom gate is an intentional usability refinement.
+46. **OK** — Announcement messages render their deep-link action only when a host supplies `onAnnouncementLink`; routing remains a host-app responsibility.
+47. **OK** — Sender names remain visible for group and managed conversations and are suppressed in direct conversations. No sender-side bubble alignment scheme was added because it is not required for this capability.
+48. **OK** — Deleted tombstones, edited marker, and timestamps are rendered.
+
+## Read receipts
+
+49. **OK** — Read ticks mount only for the current user’s own persisted messages.
+50. **OK** — Non-direct recipient detail supplied by dcm is shown through a click/keyboard-openable popover list rather than hover-only tooltip. Direct conversations always suppress the detail control; dcm’s recipient-detail payload remains the moderator authorization boundary because no generic client moderator field exists.
+
+## Polls
+
+51. **BLOCKED** — dcm has no poll read serialization for question, option, or count data; client-side fabrication would hide the backend contract gap.
+52. **BLOCKED** — Per-option voter names are likewise absent from dcm’s readable poll contract.
+53. **BLOCKED** — Closed state and disabled-voting rendering depend on that absent poll read contract.
+54. **OK** — Composer starts at two options and disables adding options once it reaches ten; the server’s two-option minimum remains enforced.
+55. **OK** — Vote and close write paths are wired; their full read rendering remains subject to rows 51–53.
+
+## Live synchronization
+
+56. **BLOCKED** — Reaction frame handling remains intentionally ready, but dcm 2.36.1 does not emit `reaction` frames.
+57. **BLOCKED** — Poll-update frame handling remains intentionally ready, but dcm 2.36.1 does not emit `poll_updated` frames.
+58. **BLOCKED** — Conversation reorder and preview refresh require dcm’s missing `last_message` projection.
+59. **OK** — dcm’s emitted message, message-edited, and message-deleted frames are handled live.
+
+## Required backend follow-up
+
+Rows 27, 38, 42, 51–53, and 56–58 require a future dcm work order: expose readable thread receipt state, serialize `external_key` where managed all/team labeling is required, define and serialize the poll read contract, add `last_message`, and emit the designed realtime frames. Until then, these are explicit BLOCKED outcomes rather than simulated client behavior.

package/index.html

@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>ui-core-micha development harness</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/dev/main.jsx"></script>
+  </body>
+</html>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@micha.bigler/ui-core-micha",
-  "version": "2.15.0",
+  "version": "2.17.0",
   "main": "dist/index.js",
   "module": "dist/index.js",
   "repository": {
@@ -24,16 +24,19 @@
   },
   "scripts": {
     "build": "tsc -p tsconfig.build.json",
+    "dev": "vite",
     "test": "vitest run"
   },
   "devDependencies": {
     "@mui/icons-material": "^7.3.11",
     "@mui/x-charts": "^8.0.0",
     "@testing-library/react": "^16.3.2",
+    "@vitejs/plugin-react": "^6.0.5",
     "i18next": "^26.2.0",
     "jsdom": "^29.1.1",
     "react-i18next": "^17.0.8",
     "typescript": "^6.0.3",
+    "vite": "^8.2.0",
     "vitest": "^4.1.10"
   }
 }

package/src/i18n/messagingTranslations.ts

@@ -0,0 +1,107 @@
+export const messagingTranslations = {
+  'MessagingComposer.ADD_EMOJI': { de: 'Emoji hinzufügen', en: 'Add emoji', fr: 'Ajouter un emoji' },
+  'MessagingComposer.STAGED_FILES': { de: 'Vorgemerkte Anhänge', en: 'Staged attachments', fr: 'Pièces jointes préparées' },
+  'MessagingComposer.REMOVE_ATTACHMENT': { de: '{{name}} entfernen', en: 'Remove {{name}}', fr: 'Supprimer {{name}}' },
+  'MessagingComposer.UPLOADING': { de: 'Anhänge werden hochgeladen…', en: 'Uploading attachments…', fr: 'Téléversement des pièces jointes…' },
+  'MessagingList.LABEL': { de: 'Unterhaltungen', en: 'Conversations', fr: 'Conversations' },
+  'MessagingList.EMPTY': { de: 'Noch keine Unterhaltungen.', en: 'No conversations yet.', fr: 'Aucune conversation pour le moment.' },
+  'MessagingList.NO_MESSAGES': { de: 'Noch keine Nachrichten', en: 'No messages yet', fr: 'Aucun message pour le moment' },
+  'MessagingList.UNTITLED': { de: 'Unbenannte Unterhaltung', en: 'Untitled conversation', fr: 'Conversation sans titre' },
+  'MessagingList.ACTIONS': { de: 'Aktionen für Unterhaltung', en: 'Conversation actions', fr: 'Actions de la conversation' },
+  'MessagingList.LOAD_MORE': { de: 'Mehr laden', en: 'Load more', fr: 'Charger plus' },
+  'MessagingList.LOAD_ERROR': { de: 'Unterhaltungen konnten nicht geladen werden.', en: 'Conversations could not be loaded.', fr: 'Impossible de charger les conversations.' },
+  'MessagingList.ARCHIVE': { de: 'Archivieren', en: 'Archive', fr: 'Archiver' },
+  'MessagingList.ARCHIVE_ERROR': { de: 'Unterhaltung konnte nicht archiviert werden.', en: 'Conversation could not be archived.', fr: 'Impossible d’archiver la conversation.' },
+  'MessagingList.MUTE': { de: 'Stummschalten', en: 'Mute', fr: 'Mettre en sourdine' },
+  'MessagingList.UNMUTE': { de: 'Stummschaltung aufheben', en: 'Unmute', fr: 'Réactiver le son' },
+  'MessagingList.PREFERENCES_ERROR': { de: 'Einstellungen konnten nicht gespeichert werden.', en: 'Preferences could not be saved.', fr: 'Impossible d’enregistrer les préférences.' },
+  'MessagingLaunchers.OPEN_GROUP': { de: 'Gruppenunterhaltung öffnen', en: 'Open group conversation', fr: 'Ouvrir la conversation de groupe' },
+  'MessagingLaunchers.OPEN_BROADCAST': { de: 'Ankündigungen öffnen', en: 'Open announcements', fr: 'Ouvrir les annonces' },
+  'MessagingLaunchers.OPEN_ERROR': { de: 'Unterhaltung konnte nicht geöffnet werden.', en: 'Conversation could not be opened.', fr: 'Impossible d’ouvrir la conversation.' },
+  'MessagingThread.TIMELINE': { de: 'Nachrichtenverlauf', en: 'Message timeline', fr: 'Chronologie des messages' },
+  'MessagingThread.MESSAGE': { de: 'Nachricht', en: 'Message', fr: 'Message' },
+  'MessagingThread.EMPTY': { de: 'Noch keine Nachrichten.', en: 'No messages yet.', fr: 'Aucun message pour le moment.' },
+  'MessagingThread.LOAD_OLDER': { de: 'Ältere Nachrichten laden', en: 'Load older messages', fr: 'Charger les messages plus anciens' },
+  'MessagingThread.LOAD_ERROR': { de: 'Nachrichten konnten nicht geladen werden.', en: 'Messages could not be loaded.', fr: 'Impossible de charger les messages.' },
+  'MessagingThread.REPLIES_ERROR': { de: 'Antworten konnten nicht geladen werden.', en: 'Replies could not be loaded.', fr: 'Impossible de charger les réponses.' },
+  'MessagingThread.DELETED': { de: 'Diese Nachricht wurde gelöscht.', en: 'This message was deleted.', fr: 'Ce message a été supprimé.' },
+  'MessagingThread.EDITED': { de: 'bearbeitet', en: 'edited', fr: 'modifié' },
+  'MessagingThread.REPLY': { de: 'Antworten', en: 'Reply', fr: 'Répondre' },
+  'MessagingThread.REPLY_TO': { de: 'Antwort auf {{sender}}', en: 'Reply to {{sender}}', fr: 'Réponse à {{sender}}' },
+  'MessagingThread.REPLYING_TO': { de: 'Antwort an {{sender}}', en: 'Replying to {{sender}}', fr: 'Réponse à {{sender}}' },
+  'MessagingThread.SHOW_REPLIES': { de: '{{count}} Antworten anzeigen', en: 'Show {{count}} replies', fr: 'Afficher {{count}} réponses' },
+  'MessagingThread.HIDE_REPLIES': { de: 'Antworten ausblenden', en: 'Hide replies', fr: 'Masquer les réponses' },
+  'MessagingThread.UNKNOWN_SENDER': { de: 'Unbekannte Person', en: 'Unknown person', fr: 'Personne inconnue' },
+  'MessagingThread.QUOTE_ATTACHMENT': { de: 'Anhang', en: 'Attachment', fr: 'Pièce jointe' },
+  'MessagingActions.MENU': { de: 'Nachrichtenaktionen', en: 'Message actions', fr: 'Actions du message' },
+  'MessagingActions.EDIT': { de: 'Bearbeiten', en: 'Edit', fr: 'Modifier' },
+  'MessagingActions.SAVE': { de: 'Speichern', en: 'Save', fr: 'Enregistrer' },
+  'MessagingActions.CANCEL': { de: 'Abbrechen', en: 'Cancel', fr: 'Annuler' },
+  'MessagingActions.DELETE': { de: 'Löschen', en: 'Delete', fr: 'Supprimer' },
+  'MessagingActions.COPY': { de: 'Kopieren', en: 'Copy', fr: 'Copier' },
+  'MessagingActions.DELETE_CONFIRM_TITLE': { de: 'Nachricht löschen?', en: 'Delete message?', fr: 'Supprimer le message ?' },
+  'MessagingActions.DELETE_CONFIRM_BODY': { de: 'Diese Nachricht wird für alle entfernt.', en: 'This message will be removed for everyone.', fr: 'Ce message sera supprimé pour tout le monde.' },
+  'MessagingActions.EDIT_ERROR': { de: 'Nachricht konnte nicht bearbeitet werden: {{message}}', en: 'Message could not be edited: {{message}}', fr: 'Impossible de modifier le message : {{message}}' },
+  'MessagingActions.DELETE_ERROR': { de: 'Nachricht konnte nicht gelöscht werden: {{message}}', en: 'Message could not be deleted: {{message}}', fr: 'Impossible de supprimer le message : {{message}}' },
+  'MessagingActions.COPY_ERROR': { de: 'Nachricht konnte nicht kopiert werden: {{message}}', en: 'Message could not be copied: {{message}}', fr: 'Impossible de copier le message : {{message}}' },
+  'MessagingDirect.LAUNCH': { de: 'Direktnachricht starten', en: 'Start direct message', fr: 'Démarrer un message direct' },
+  'MessagingDirect.TITLE': { de: 'Direktnachricht starten', en: 'Start direct message', fr: 'Démarrer un message direct' },
+  'MessagingDirect.CANDIDATES': { de: 'Empfängerinnen und Empfänger', en: 'Recipients', fr: 'Destinataires' },
+  'MessagingDirect.EMPTY': { de: 'Keine Personen verfügbar.', en: 'No people are available.', fr: 'Aucune personne n’est disponible.' },
+  'MessagingDirect.START': { de: 'Starten', en: 'Start', fr: 'Démarrer' },
+  'MessagingDirect.STARTING': { de: 'Direktnachricht wird gestartet…', en: 'Starting direct message…', fr: 'Démarrage du message direct…' },
+  'MessagingDirect.CANCEL': { de: 'Abbrechen', en: 'Cancel', fr: 'Annuler' },
+  'MessagingDirect.START_ERROR': { de: 'Direktnachricht konnte nicht gestartet werden.', en: 'Direct message could not be started.', fr: 'Impossible de démarrer le message direct.' },
+  'MessagingReadTicks.ALL_READ': { de: 'Von allen gelesen', en: 'Read by everyone', fr: 'Lu par tout le monde' },
+  'MessagingReadTicks.DELIVERED': { de: 'Zugestellt an {{count}}', en: 'Delivered to {{count}}', fr: 'Distribué à {{count}}' },
+  'MessagingReadTicks.RECIPIENTS': { de: 'Lesebestätigungen', en: 'Read recipients', fr: 'Destinataires lus' },
+  'MessagingComposer.LABEL': { de: 'Nachricht verfassen', en: 'Compose message', fr: 'Rédiger un message' },
+  'MessagingComposer.MESSAGE': { de: 'Nachricht', en: 'Message', fr: 'Message' },
+  'MessagingComposer.SEND': { de: 'Senden', en: 'Send', fr: 'Envoyer' },
+  'MessagingComposer.RETRY': { de: 'Erneut versuchen', en: 'Retry', fr: 'Réessayer' },
+  'MessagingComposer.ADD_ATTACHMENT': { de: 'Anhang hinzufügen', en: 'Add attachment', fr: 'Ajouter une pièce jointe' },
+  'MessagingComposer.FILES_SELECTED': { de: '{{count}} Anhänge ausgewählt', en: '{{count}} attachments selected', fr: '{{count}} pièces jointes sélectionnées' },
+  'MessagingComposer.REPLYING_TO': { de: 'Antwort an {{sender}}', en: 'Replying to {{sender}}', fr: 'Réponse à {{sender}}' },
+  'MessagingComposer.SEND_ERROR': { de: 'Nachricht konnte nicht gesendet werden: {{message}}', en: 'Message could not be sent: {{message}}', fr: 'Impossible d’envoyer le message : {{message}}' },
+  'MessagingComposer.UPLOAD_ERROR': { de: 'Anhang wurde abgelehnt: {{message}}', en: 'Attachment was rejected: {{message}}', fr: 'La pièce jointe a été rejetée : {{message}}' },
+  'MessagingAttachments.LABEL': { de: 'Anhänge', en: 'Attachments', fr: 'Pièces jointes' },
+  'MessagingAttachments.DOWNLOAD': { de: '{{name}} herunterladen', en: 'Download {{name}}', fr: 'Télécharger {{name}}' },
+  'MessagingReactions.LABEL': { de: 'Reaktionen', en: 'Reactions', fr: 'Réactions' },
+  'MessagingReactions.ADD': { de: 'Reaktion hinzufügen', en: 'Add reaction', fr: 'Ajouter une réaction' },
+  'MessagingReactions.TOGGLE': { de: '{{emoji}} Reaktion mit {{count}} Stimmen umschalten', en: 'Toggle {{emoji}} reaction with {{count}} votes', fr: 'Basculer la réaction {{emoji}} avec {{count}} votes' },
+  'MessagingReactions.ERROR': { de: 'Reaktion konnte nicht gespeichert werden: {{message}}', en: 'Reaction could not be saved: {{message}}', fr: 'Impossible d’enregistrer la réaction : {{message}}' },
+  'MessagingPoll.LABEL': { de: 'Umfrage', en: 'Poll', fr: 'Sondage' },
+  'MessagingPoll.VOTE': { de: 'Abstimmen', en: 'Vote', fr: 'Voter' },
+  'MessagingPoll.CLOSE': { de: 'Umfrage schliessen', en: 'Close poll', fr: 'Clore le sondage' },
+  'MessagingPoll.CLOSED': { de: 'Geschlossen', en: 'Closed', fr: 'Clos' },
+  'MessagingPoll.SELECT_OPTION': { de: 'Wähle mindestens eine Option.', en: 'Select at least one option.', fr: 'Sélectionnez au moins une option.' },
+  'MessagingPoll.VOTE_ERROR': { de: 'Stimme konnte nicht gespeichert werden: {{message}}', en: 'Vote could not be saved: {{message}}', fr: 'Impossible d’enregistrer le vote : {{message}}' },
+  'MessagingPoll.CLOSE_ERROR': { de: 'Umfrage konnte nicht geschlossen werden: {{message}}', en: 'Poll could not be closed: {{message}}', fr: 'Impossible de clore le sondage : {{message}}' },
+  'MessagingPoll.CREATE': { de: 'Umfrage erstellen', en: 'Create poll', fr: 'Créer un sondage' },
+  'MessagingPoll.CREATE_ERROR': { de: 'Umfrage konnte nicht erstellt werden: {{message}}', en: 'Poll could not be created: {{message}}', fr: 'Impossible de créer le sondage : {{message}}' },
+  'MessagingPoll.CREATE_VALIDATION': { de: 'Frage und mindestens zwei Optionen sind erforderlich.', en: 'A question and at least two options are required.', fr: 'Une question et au moins deux options sont requises.' },
+  'MessagingPoll.QUESTION': { de: 'Frage', en: 'Question', fr: 'Question' },
+  'MessagingPoll.OPTION': { de: 'Option {{count}}', en: 'Option {{count}}', fr: 'Option {{count}}' },
+  'MessagingPoll.ADD_OPTION': { de: 'Option hinzufügen', en: 'Add option', fr: 'Ajouter une option' },
+  'MessagingPoll.ALLOW_MULTIPLE': { de: 'Mehrfachauswahl erlauben', en: 'Allow multiple choices', fr: 'Autoriser plusieurs choix' },
+  'MessagingPoll.CANCEL': { de: 'Abbrechen', en: 'Cancel', fr: 'Annuler' },
+  'MessagingConfig.LABEL': { de: 'Nachrichten-Einstellungen', en: 'Messaging settings', fr: 'Paramètres de messagerie' },
+  'MessagingConfig.TITLE': { de: 'Nachrichten-Einstellungen', en: 'Messaging settings', fr: 'Paramètres de messagerie' },
+  'MessagingConfig.LOADING': { de: 'Einstellungen werden geladen…', en: 'Loading settings…', fr: 'Chargement des paramètres…' },
+  'MessagingConfig.LOAD_ERROR': { de: 'Einstellungen konnten nicht geladen werden: {{message}}', en: 'Settings could not be loaded: {{message}}', fr: 'Impossible de charger les paramètres : {{message}}' },
+  'MessagingConfig.SAVE_ERROR': { de: 'Einstellungen konnten nicht gespeichert werden: {{message}}', en: 'Settings could not be saved: {{message}}', fr: 'Impossible d’enregistrer les paramètres : {{message}}' },
+  'MessagingConfig.DM_POLICY': { de: 'Direktnachrichten-Regel', en: 'Direct-message policy', fr: 'Règle des messages directs' },
+  'MessagingConfig.DM_ALL': { de: 'Alle', en: 'Everyone', fr: 'Tout le monde' },
+  'MessagingConfig.DM_SHARED': { de: 'Nur gemeinsame Gruppen', en: 'Shared groups only', fr: 'Groupes communs uniquement' },
+  'MessagingConfig.DM_TEAM': { de: 'Nur Team', en: 'Team only', fr: 'Équipe uniquement' },
+  'MessagingConfig.GROUP_ENABLED': { de: 'Gruppenchat aktivieren', en: 'Enable group chat', fr: 'Activer le chat de groupe' },
+  'MessagingConfig.EVERYONE_POSTS': { de: 'Alle dürfen schreiben', en: 'Everyone can post', fr: 'Tout le monde peut publier' },
+  'MessagingAnnouncement.CREATE': { de: 'Ankündigung erstellen', en: 'Create announcement', fr: 'Créer une annonce' },
+  'MessagingAnnouncement.TITLE': { de: 'Titel', en: 'Title', fr: 'Titre' },
+  'MessagingAnnouncement.BODY': { de: 'Text', en: 'Body', fr: 'Texte' },
+  'MessagingAnnouncement.SEND': { de: 'Ankündigung senden', en: 'Send announcement', fr: 'Envoyer l’annonce' },
+  'MessagingAnnouncement.CANCEL': { de: 'Abbrechen', en: 'Cancel', fr: 'Annuler' },
+  'MessagingAnnouncement.VALIDATION': { de: 'Ein Titel ist erforderlich.', en: 'A title is required.', fr: 'Un titre est requis.' },
+  'MessagingAnnouncement.ERROR': { de: 'Ankündigung konnte nicht gesendet werden: {{message}}', en: 'Announcement could not be sent: {{message}}', fr: 'Impossible d’envoyer l’annonce : {{message}}' },
+  'MessagingAnnouncement.OPEN_LINK': { de: 'Link öffnen', en: 'Open link', fr: 'Ouvrir le lien' },
+};

package/src/index.js

@@ -64,6 +64,21 @@ export { NotificationBell } from './notifications/NotificationBell';
 export { PopupSurface } from './notifications/PopupSurface';
 export { getNotificationFeed, getUnreadCount, markNotifications } from './notifications/feedApi';
 
+// --- 9. Messaging ---
+export * from './messaging/api';
+export { MessagingProvider, useMessaging } from './messaging/MessagingProvider';
+export { ConversationList } from './messaging/ConversationList';
+export { ConversationLaunchers } from './messaging/ConversationLaunchers';
+export { DirectMessageLauncher } from './messaging/DirectMessageLauncher';
+export { Thread } from './messaging/Thread';
+export { MessageBubble } from './messaging/MessageBubble';
+export { ReadTicks } from './messaging/ReadTicks';
+export { Composer } from './messaging/Composer';
+export { AttachmentList } from './messaging/AttachmentList';
+export { ReactionBar } from './messaging/ReactionBar';
+export { PollCard } from './messaging/PollCard';
+export { MessagingScopeConfig } from './messaging/MessagingScopeConfig';
+
 // --- 9. Onboarding ---
 export * from './onboarding/api';
 export { selectActiveSteps } from './onboarding/stepSelection';
@@ -83,3 +98,4 @@ export { PwaInstallStep } from './onboarding/steps/PwaInstallStep';
 export { notificationsTranslations } from './i18n/notificationsTranslations';
 export { onboardingTranslations } from './i18n/onboardingTranslations';
 export { chartsTranslations } from './i18n/chartsTranslations';
+export { messagingTranslations } from './i18n/messagingTranslations';

package/src/messaging/AttachmentList.jsx

@@ -0,0 +1,38 @@
+import { Box, Button, Stack } from '@mui/material';
+import { useEffect, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { useMessaging } from './MessagingProvider';
+
+function isImage(attachment) { return attachment.content_type?.startsWith('image/'); }
+function nameOf(attachment) { return attachment.filename || attachment.name || attachment.id; }
+
+/** Download-only attachment renderer; all bytes remain behind the authenticated REST endpoints. */
+export function AttachmentList({ attachments = [] }) {
+  const { t } = useTranslation();
+  const { getAttachment, getAttachmentThumbnail } = useMessaging();
+  const [previews, setPreviews] = useState({});
+  useEffect(() => {
+    let live = true; const urls = [];
+    attachments.filter(isImage).forEach(async (attachment) => {
+      try {
+        const blob = await getAttachmentThumbnail(attachment.id);
+        const url = blob instanceof Blob ? URL.createObjectURL(blob) : blob?.url;
+        if (url && live) { urls.push(url); setPreviews((current) => ({ ...current, [attachment.id]: url })); }
+      } catch { /* The image remains available through the download action. */ }
+    });
+    return () => { live = false; urls.forEach((url) => URL.revokeObjectURL(url)); };
+  }, [attachments, getAttachmentThumbnail]);
+  if (!attachments.length) return null;
+  const download = async (attachment) => {
+    const blob = await getAttachment(attachment.id);
+    if (!(blob instanceof Blob)) return;
+    const url = URL.createObjectURL(blob); const link = document.createElement('a');
+    link.href = url; link.download = nameOf(attachment); link.click(); URL.revokeObjectURL(url);
+  };
+  return <Stack direction="row" spacing={1} flexWrap="wrap" aria-label={t('MessagingAttachments.LABEL')}>
+    {attachments.map((attachment) => <Button key={attachment.id} type="button" size="small" onClick={() => download(attachment)}>
+      {previews[attachment.id] && <Box component="img" src={previews[attachment.id]} alt="" width={36} height={36} sx={{ objectFit: 'cover', mr: 0.75 }} />}{t('MessagingAttachments.DOWNLOAD', { name: nameOf(attachment) })}
+    </Button>)}
+  </Stack>;
+}