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

package/dist/messaging/PollCard.js

@@ -0,0 +1,53 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Alert, Button, Checkbox, FormControlLabel, Paper, Stack, Typography } from '@mui/material';
+import { useEffect, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { extractApiErrorMessage, useMessaging } from './MessagingProvider';
+/** Independently mountable live poll view. Server authorization remains authoritative. */
+export function PollCard({ message, canClose: canCloseProp }) {
+    var _a, _b, _c, _d, _e, _f;
+    const { t } = useTranslation();
+    const { castPollVote, closeConversationPoll, currentUser } = useMessaging();
+    const poll = message === null || message === void 0 ? void 0 : message.poll;
+    const [selected, setSelected] = useState([]);
+    const [error, setError] = useState(null);
+    const [busy, setBusy] = useState(false);
+    useEffect(() => setSelected(((poll === null || poll === void 0 ? void 0 : poll.options) || []).filter((option) => option.selected || option.voted).map((option) => option.id)), [poll]);
+    if (!poll)
+        return null;
+    const closed = Boolean(poll.closed_at);
+    const creatorId = (_b = (_a = poll.created_by) === null || _a === void 0 ? void 0 : _a.id) !== null && _b !== void 0 ? _b : poll.created_by;
+    const canClose = (_f = (_d = (_c = canCloseProp !== null && canCloseProp !== void 0 ? canCloseProp : poll.can_close) !== null && _c !== void 0 ? _c : message === null || message === void 0 ? void 0 : message.can_close) !== null && _d !== void 0 ? _d : (_e = message === null || message === void 0 ? void 0 : message.permissions) === null || _e === void 0 ? void 0 : _e.can_close) !== null && _f !== void 0 ? _f : (creatorId != null && creatorId === (currentUser === null || currentUser === void 0 ? void 0 : currentUser.id));
+    const changeSelection = (id) => setSelected((current) => poll.allow_multiple ? (current.includes(id) ? current.filter((value) => value !== id) : [...current, id]) : (current.includes(id) ? [] : [id]));
+    const vote = async () => {
+        if (!selected.length) {
+            setError(t('MessagingPoll.SELECT_OPTION'));
+            return;
+        }
+        setBusy(true);
+        setError(null);
+        try {
+            await castPollVote(message.id, poll, selected);
+        }
+        catch (voteError) {
+            setError(t('MessagingPoll.VOTE_ERROR', { message: extractApiErrorMessage(voteError) }));
+        }
+        finally {
+            setBusy(false);
+        }
+    };
+    const close = async () => {
+        setBusy(true);
+        setError(null);
+        try {
+            await closeConversationPoll(message.id, poll);
+        }
+        catch (closeError) {
+            setError(t('MessagingPoll.CLOSE_ERROR', { message: extractApiErrorMessage(closeError) }));
+        }
+        finally {
+            setBusy(false);
+        }
+    };
+    return _jsx(Paper, { variant: "outlined", sx: { p: 1 }, "aria-label": t('MessagingPoll.LABEL'), children: _jsxs(Stack, { spacing: 0.5, children: [_jsx(Typography, { variant: "subtitle2", children: poll.question }), (poll.options || []).map((option) => { var _a, _b; return _jsx(FormControlLabel, { disabled: closed || busy, control: _jsx(Checkbox, { checked: selected.includes(option.id), onChange: () => changeSelection(option.id) }), label: `${option.text || option.label} (${(_b = (_a = option.vote_count) !== null && _a !== void 0 ? _a : option.votes_count) !== null && _b !== void 0 ? _b : 0})` }, option.id); }), error && _jsx(Alert, { severity: "error", role: "alert", children: error }), _jsxs(Stack, { direction: "row", spacing: 1, children: [_jsx(Button, { size: "small", onClick: vote, disabled: closed || busy, children: t('MessagingPoll.VOTE') }), canClose && !closed && _jsx(Button, { size: "small", color: "warning", onClick: close, disabled: busy, children: t('MessagingPoll.CLOSE') }), closed && _jsx(Typography, { variant: "caption", children: t('MessagingPoll.CLOSED') })] })] }) });
+}

package/dist/messaging/ReactionBar.js

@@ -0,0 +1,44 @@
+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 { useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { extractApiErrorMessage, useMessaging } from './MessagingProvider';
+const QUICK_EMOJIS = ['👍', '❤️', '😂', '🎉', '👀'];
+/** Independently mountable aggregate reaction controls for one message. */
+export function ReactionBar({ message }) {
+    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.
+    const [pending, setPending] = useState(() => new Set());
+    const reactions = (message === null || message === void 0 ? void 0 : message.reactions) || [];
+    const react = async (emoji, active = false) => {
+        if (pending.has(emoji))
+            return;
+        setError(null);
+        setPending((current) => new Set(current).add(emoji));
+        try {
+            await toggleReaction(message.id, emoji, active);
+        }
+        catch (reactionError) {
+            setError(t('MessagingReactions.ERROR', { message: extractApiErrorMessage(reactionError) }));
+        }
+        finally {
+            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) => {
+                    // 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);
+                }) }), error && _jsx(Alert, { severity: "error", role: "alert", children: error })] });
+}

package/dist/messaging/ReadTicks.js

@@ -0,0 +1,25 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Tooltip, Typography } from '@mui/material';
+import { useEffect, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useMessaging } from './MessagingProvider';
+/** Renders only the aggregate receipt unless the server explicitly supplies permitted detail. */
+export function ReadTicks({ messageId, conversation }) {
+    const { t } = useTranslation();
+    const { getMessageReadStatus } = useMessaging();
+    const [status, setStatus] = useState(null);
+    useEffect(() => {
+        let mounted = true;
+        getMessageReadStatus(messageId).then((next) => { if (mounted)
+            setStatus(next); }).catch(() => { if (mounted)
+            setStatus(null); });
+        return () => { mounted = false; };
+    }, [getMessageReadStatus, messageId]);
+    if (!status)
+        return null;
+    const label = status.all_read ? t('MessagingReadTicks.ALL_READ') : t('MessagingReadTicks.DELIVERED', { count: status.delivered_count || 0 });
+    // 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 detailText = detail === null || detail === void 0 ? void 0 : detail.map((recipient) => recipient.display_name || recipient.username || recipient.user_id).filter(Boolean).join(', ');
+    return _jsx(Tooltip, { title: detailText || label, children: _jsx(Typography, { component: "span", variant: "caption", color: "text.secondary", "aria-label": label, children: label }) });
+}

package/dist/messaging/Thread.js

@@ -0,0 +1,73 @@
+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, 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)); }
+// 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 }) {
+    var _a;
+    const { t } = useTranslation();
+    const { user } = useContext(AuthContext) || {};
+    const { cache, loadMoreMessages, loadThreadReplies } = useMessaging();
+    const scrollRef = useRef(null);
+    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 roots = useMemo(() => chronological(Object.values(cache.messages).filter((message) => message.conversation_id === conversationId && !message.reply_to)), [cache.messages, conversationId]);
+    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 = () => { var _a; if (((_a = scrollRef.current) === null || _a === void 0 ? void 0 : _a.scrollTop) === 0 && cache.cursors.messages[conversationId] && !loadingOlder)
+        loadOlder(); };
+    const reply = (message) => { setReplyingTo(message); onReplyTargetChange === null || onReplyTargetChange === void 0 ? void 0 : onReplyTargetChange(message); };
+    const toggleReplies = async (root) => {
+        if (!openThreads[root.id]) {
+            try {
+                await loadThreadReplies(root.id);
+            }
+            catch (_a) {
+                setError(t('MessagingThread.REPLIES_ERROR'));
+                return;
+            }
+        }
+        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) => item.reply_to === message.id));
+                            return _jsxs(Stack, { spacing: 0.75, children: [_jsx(MessageBubble, { message: message, onReply: reply, 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, onReply: reply, 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 } = {}) {
+    return Object.assign(Object.assign(Object.assign({}, (params ? { params } : {})), (cursor ? { params: Object.assign(Object.assign({}, (params || {})), { cursor }) } : {})), (headers ? { headers } : {}));
+}
+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 } = {}) { return apiClient.post(`${conversationsUrl}${conversationId}/attachments/`, formData, requestConfig({ headers: idempotencyKey ? { 'Idempotency-Key': idempotencyKey } : undefined })).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/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,36 @@
+# Messaging deviations from jg
+
+## Chunk 5 — reactions, polls and scope configuration
+
+- Reactions use a compact set of common emoji choices plus the aggregate chips, rather than jg's full third-party emoji palette. Adding and toggling every reaction remains available through the same REST mutations; the shared package avoids a new picker dependency.
+- Poll creation is a Composer dialog instead of jg's Thread-coupled dialog. It retains question, two-or-more options and multiple-choice selection, while keeping composition independently mountable.
+- Poll results are rendered inline as an accessible option list with live aggregate counts. Closing is only offered when the serialized creator/capability allows it; a server-side 403 remains visible as a validation error.
+- Scope messaging configuration is an independently mountable component addressed by conversation id, rather than jg's event-id-specific settings panel. The host supplies placement and capability gating; it retains dm policy, group-chat enablement and everyone-can-post controls.
+- **Announcement composing (jg's `AnnouncementDialog.jsx`) was missing from the first chunk-5 pass — flagged by independent review and corrected before commit, not silently accepted as a gap.** `Composer` now offers an announcement mode (title + body + a host-supplied `link_target`) behind an `allowAnnouncement` prop, since whether to offer it at all is a host/capability decision the client cannot make on its own; only the target-link *value* is host-specific navigation context ucm cannot compute (jg pre-fills it from the currently open event-info section — same reasoning as `linkTarget`'s framing here). Uses the same `sendMessage`/`kind` plumbing chunk 1 already built, with `kind: 'announcement'`.
+
+## Final parity confirmation
+
+- The provider/cache, conversation list and launchers, timeline/replies/read ticks, composer/attachments/announcements, reactions, polls and scope configuration are all represented by exported ucm surfaces. Host routing and scope selection remain host responsibilities by design.
+- The known broadcast-list pre-open unread/preview gap is retained as the accepted Chunk 2 deviation.
+- Every jg messaging file named in the work order's parity inventory (`Thread.jsx`, `ConversationList.jsx`, `MessagingContext.jsx`, `AnnouncementDialog.jsx`, `MessagingConfig.jsx`, `NewDirectMessageDialog.jsx` — unblocked by MSG-2b, `messagingApi.js`, `EmojiPickerButton.jsx`, `conversationHelpers.js`, `MessagesPage.jsx`'s launcher behavior) is represented by an exported ucm surface or an explicitly named deviation above — this line was corrected during chunk 5's independent review, which is exactly the check it exists to catch.
+
+## Chunk 4 — composer and attachments
+
+- The composer is an independently mountable provider collaborator and accepts the timeline's reply target as a small placement prop, instead of being coupled into jg's monolithic `Thread`. It preserves reply selection and clears that selection after a successful send.
+- Attachment previews are compact authenticated thumbnail fetches with explicit download actions rather than jg's gallery/lightbox. Preview and download retain viewer-gated byte access; the licensed interaction redesign avoids a second media-viewer state machine in this shared surface.
+
+## Chunk 3 — timeline, replies and receipts
+
+- The timeline is split into `Thread`, `MessageBubble` and `ReadTicks`, with a simple expandable reply view rather than jg's coupled full-screen/thread-pane state. This preserves one-level reply viewing while allowing each surface to mount independently.
+- Reply selection is exposed through `onReplyTargetChange` rather than embedding a temporary composer. The next Composer surface consumes that context, avoiding a second compose state machine.
+- Older history automatically loads when the timeline reaches the top and also provides an explicit accessible button. Both use the server-issued opaque cursor; jg's timeline interaction is redesigned, not removed.
+- This chunk intentionally leaves reactions, polls and attachments as non-interactive count/type chips. Their existing jg capabilities are scheduled for chunks 4/5, rather than reproduced as disposable interaction implementations here.
+- Read ticks reproduce jg's `shouldShowReadTick(msg, isOwn)` semantics exactly: a `ReadTicks` collaborator is only mounted for the current user's own messages, matching jg's meaning of a read receipt (whether the sender's own message was seen) and bounding the number of `getMessageReadStatus` REST calls a rendered timeline fires to one per own message shown, not one per message in the conversation.
+
+## Chunk 2 — conversation list and launchers
+
+- The list is a standalone, provider-backed component rather than receiving a conversation array and selection state from a page. This removes the page-owned messaging state machine while preserving selection through the host's `onOpen` placement callback.
+- Launchable group metadata is an explicit host-supplied `groupLaunchers` input, rather than jg's event-specific `listGroupsAvailable` request. The published dcm REST contract has no generic group-discovery endpoint; apps own scope pickers while ucm owns opening and surfacing the conversation.
+- Broadcast opening is exposed as `broadcastLauncher` plus `autoOpenBroadcast`, rather than inspecting jg's `?tab=broadcast` query itself. Routing/query parsing stays host-app scope; auto-*open* is reproduced once the host maps its route to that boolean.
+  - **Accepted deviation, not full parity:** jg's `MessagesPage.jsx` unconditionally fetches the broadcast conversation on every event load and pins it, with live unread count and message preview, at the top of the same recency-sorted unified list. ucm instead renders a static launcher button (no unread badge, no preview) until it is opened for the first time, at which point it becomes a normal list row with real unread/preview state and the launcher hides itself. Before that first open, a host relying on the broadcast conversation's unread state being visible without a click does not get it from ucm.
+- The layout and actions are redesigned as a compact MUI list with per-conversation overflow actions and explicit cursor “Load more,” replacing jg's page sidebar composition. Features retained here are unread indication, opening conversations, unopened-group launches, broadcast launch (see above for the surfacing gap), mute and archive. Per-kind row icon (group/broadcast/DM) is reproduced (jg's `getConversationAvatar`), using generic MUI icons rather than jg's per-kind avatar treatment (incl. the DM partner's actual `UserAvatar`) — the identification capability is kept, the specific visual is redesigned.

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.16.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,81 @@
+export const messagingTranslations = {
+  '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' },
+  '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}}' },
+  '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}}' },
+};

package/src/index.js

@@ -64,6 +64,20 @@ 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 { 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 +97,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>;
+}