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

package/src/messaging/api.js

@@ -0,0 +1,48 @@
+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 {
+    ...(params ? { params } : {}),
+    ...(cursor ? { params: { ...(params || {}), cursor } } : {}),
+    ...(headers ? { headers } : {}),
+    ...(onUploadProgress ? { onUploadProgress } : {}),
+  };
+}
+
+export function listConversations({ cursor, ...filters } = {}) {
+  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/src/messaging/composerImageCompression.js

@@ -0,0 +1,35 @@
+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) {
+  if (!file?.type?.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);
+    canvas.getContext('2d')?.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 {
+    return file;
+  }
+}

package/src/notifications/NotificationsProvider.jsx

@@ -89,7 +89,7 @@ export function NotificationsProvider({ children, wsUrlBase }) {
   // 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),
   });
@@ -200,7 +200,7 @@ export function NotificationsProvider({ children, wsUrlBase }) {
   const markDone = useCallback((ids) => mark('done', ids), [mark]);
 
   return (
-    <RealtimeContext.Provider value={{ subscribe }}>
+    <RealtimeContext.Provider value={{ subscribe, onReconnect }}>
       <NotificationsContext.Provider value={{
         notifications,
         unreadCount,

package/src/notifications/realtime.jsx

@@ -33,6 +33,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;
@@ -50,12 +51,21 @@ 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) => {
       let data;
@@ -85,6 +95,16 @@ export function useRealtimeCore({ active, wsUrl }) {
 
       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 = () => {
@@ -114,5 +134,5 @@ export function useRealtimeCore({ active, wsUrl }) {
     };
   }, [active, wsUrl]);
 
-  return { subscribe };
+  return { subscribe, onReconnect };
 }

package/tests/ConversationList.test.jsx

@@ -0,0 +1,66 @@
+// @vitest-environment jsdom
+import React from 'react';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import { cleanup, fireEvent, render, screen, waitFor } from '@testing-library/react';
+
+vi.mock('react-i18next', () => ({ useTranslation: () => ({ t: (key) => key }) }));
+vi.mock('../src/notifications/realtime', () => ({ useRealtime: () => ({ subscribe: () => () => {}, onReconnect: () => () => {} }) }));
+
+import { ConversationList } from '../src/messaging/ConversationList';
+import { MessagingProvider } from '../src/messaging/MessagingProvider';
+
+function renderList(api, props = {}) {
+  return render(<MessagingProvider api={api}><ConversationList onOpen={props.onOpen} {...props} /></MessagingProvider>);
+}
+
+describe('ConversationList', () => {
+  let api;
+  beforeEach(() => {
+    api = {
+      listConversations: vi.fn().mockResolvedValue({ results: [{ id: 1, title: 'First', unread_count: 2, last_message: { body: 'Hello' } }], next_cursor: 'opaque-cursor' }),
+      getUnreadCount: vi.fn().mockResolvedValue({ unread_count: 2, by_conversation: { 1: 2 } }),
+      listMessages: vi.fn().mockResolvedValue({ results: [] }),
+      archiveConversation: vi.fn().mockResolvedValue({ id: 1, archived: true }),
+      patchConversationPreferences: vi.fn().mockResolvedValue({ id: 1, muted: true }),
+      createGroupConversation: vi.fn().mockResolvedValue({ id: 4, title: 'Volunteers', kind: 'group' }),
+      createBroadcastConversation: vi.fn().mockResolvedValue({ id: 5, title: 'Announcements', kind: 'broadcast' }),
+    };
+  });
+  afterEach(cleanup);
+
+  it('loads the next opaque cursor page without offset assumptions', async () => {
+    api.listConversations.mockResolvedValueOnce({ results: [{ id: 1, title: 'First' }], next_cursor: 'opaque-cursor' }).mockResolvedValueOnce({ results: [{ id: 2, title: 'Second' }], next_cursor: null });
+    renderList(api);
+    await screen.findByText('First');
+    fireEvent.click(screen.getByRole('button', { name: 'MessagingList.LOAD_MORE' }));
+    await screen.findByText('Second');
+    // Append, not replace: the first page's item must still be present.
+    expect(screen.getByText('First')).toBeTruthy();
+    expect(api.listConversations).toHaveBeenLastCalledWith({ cursor: 'opaque-cursor' });
+  });
+
+  it('opens host-provided group and broadcast launchers into normalized list state', async () => {
+    const onOpen = vi.fn();
+    renderList(api, { onOpen, groupLaunchers: [{ id: 'volunteers', label: 'Volunteers', payload: { title: 'Volunteers' } }], broadcastLauncher: { label: 'Announcements', payload: {} } });
+    await screen.findByText('First');
+    fireEvent.click(screen.getByRole('button', { name: 'Volunteers' }));
+    await waitFor(() => expect(api.createGroupConversation).toHaveBeenCalledWith({ title: 'Volunteers' }));
+    expect(onOpen).toHaveBeenCalledWith(expect.objectContaining({ id: 4 }));
+    fireEvent.click(screen.getByRole('button', { name: 'Announcements' }));
+    await waitFor(() => expect(api.createBroadcastConversation).toHaveBeenCalled());
+    // Once opened it becomes a normal (unread/preview-bearing) list row; the
+    // static launcher button must not keep showing it a second time.
+    await waitFor(() => expect(screen.queryByRole('button', { name: 'Announcements' })).toBeNull());
+  });
+
+  it('wires mute and archive through participant APIs', async () => {
+    renderList(api);
+    await screen.findByText('First');
+    fireEvent.click(screen.getByRole('button', { name: 'MessagingList.ACTIONS' }));
+    fireEvent.click(screen.getByText('MessagingList.MUTE'));
+    await waitFor(() => expect(api.patchConversationPreferences).toHaveBeenCalledWith(1, { muted: true }));
+    fireEvent.click(screen.getByRole('button', { name: 'MessagingList.ACTIONS' }));
+    fireEvent.click(screen.getByText('MessagingList.ARCHIVE'));
+    await waitFor(() => expect(api.archiveConversation).toHaveBeenCalledWith(1, true));
+  });
+});

package/tests/MessagingProvider.test.jsx

@@ -0,0 +1,50 @@
+// @vitest-environment jsdom
+import React from 'react';
+import { describe, expect, it, vi } from 'vitest';
+import { act, render, screen, waitFor } from '@testing-library/react';
+
+import { RealtimeContext } from '../src/notifications/realtime';
+import { MessagingProvider, useMessaging } from '../src/messaging/MessagingProvider';
+
+function Harness() { const { cache } = useMessaging(); return <output data-testid="cache">{JSON.stringify(cache)}</output>; }
+function makeTransport() {
+  const handlers = new Set(); const reconnectHandlers = new Set();
+  return { subscribe: vi.fn((_envelope, handler) => { handlers.add(handler); return () => handlers.delete(handler); }), onReconnect: vi.fn((handler) => { reconnectHandlers.add(handler); return () => reconnectHandlers.delete(handler); }), frame: (frame) => handlers.forEach((handler) => handler(frame)), reconnect: () => reconnectHandlers.forEach((handler) => handler()) };
+}
+function renderProvider({ transport = makeTransport(), api, activeConversationId = 1, active } = {}) {
+  const props = { api, activeConversationId, ...(active === undefined ? {} : { active }) };
+  render(<RealtimeContext.Provider value={transport}><MessagingProvider {...props}><Harness /></MessagingProvider></RealtimeContext.Provider>);
+  return transport;
+}
+const cache = () => JSON.parse(screen.getByTestId('cache').textContent);
+
+describe('MessagingProvider', () => {
+  it('deduplicates repeated event IDs and only changes the affected message slice', async () => {
+    const api = { listConversations: vi.fn().mockResolvedValue({ results: [{ id: 1 }, { id: 2 }] }), listMessages: vi.fn().mockResolvedValue({ results: [{ id: 10, conversation_id: 2, body: 'unchanged' }] }), getUnreadCount: vi.fn().mockResolvedValue({ unread_count: 0, by_conversation: {} }) };
+    const transport = renderProvider({ api }); await waitFor(() => expect(api.listConversations).toHaveBeenCalled());
+    const frame = { envelope: 'messaging', type: 'message', event_id: 'once', conversation_id: 1, message: { id: 11, body: 'new' } };
+    act(() => { transport.frame(frame); transport.frame(frame); });
+    expect(Object.keys(cache().messages)).toEqual(['10', '11']);
+    expect(cache().messages['10'].body).toBe('unchanged');
+  });
+
+  it('refetches list, active thread and unread state when Layer 1 reconnects', async () => {
+    const api = { listConversations: vi.fn().mockResolvedValue({ results: [] }), listMessages: vi.fn().mockResolvedValue({ results: [] }), getUnreadCount: vi.fn().mockResolvedValue({ unread_count: 0, by_conversation: {} }) };
+    const transport = renderProvider({ api }); await waitFor(() => expect(api.listMessages).toHaveBeenCalledTimes(1));
+    await act(async () => transport.reconnect());
+    await waitFor(() => { expect(api.listConversations).toHaveBeenCalledTimes(2); expect(api.listMessages).toHaveBeenLastCalledWith(1); expect(api.getUnreadCount).toHaveBeenCalledTimes(2); });
+  });
+
+  it('does not call the authenticated-only REST surface while active=false, and starts fetching once it flips true', async () => {
+    const api = { listConversations: vi.fn().mockResolvedValue({ results: [] }), listMessages: vi.fn().mockResolvedValue({ results: [] }), getUnreadCount: vi.fn().mockResolvedValue({ unread_count: 0, by_conversation: {} }) };
+    const transport = makeTransport();
+    const { rerender } = render(<RealtimeContext.Provider value={transport}><MessagingProvider api={api} activeConversationId={1} active={false}><Harness /></MessagingProvider></RealtimeContext.Provider>);
+    await new Promise((resolve) => setTimeout(resolve, 0));
+    expect(api.listConversations).not.toHaveBeenCalled();
+    expect(api.listMessages).not.toHaveBeenCalled();
+    expect(api.getUnreadCount).not.toHaveBeenCalled();
+
+    rerender(<RealtimeContext.Provider value={transport}><MessagingProvider api={api} activeConversationId={1} active><Harness /></MessagingProvider></RealtimeContext.Provider>);
+    await waitFor(() => expect(api.listConversations).toHaveBeenCalledTimes(1));
+  });
+});

package/tests/Thread.test.jsx

@@ -0,0 +1,100 @@
+// @vitest-environment jsdom
+import React from 'react';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import { cleanup, fireEvent, render, screen, waitFor } from '@testing-library/react';
+
+vi.mock('react-i18next', () => ({ useTranslation: () => ({ t: (key, options) => options?.count != null ? `${key}:${options.count}` : key }) }));
+vi.mock('../src/notifications/realtime', () => ({ useRealtime: () => ({ subscribe: () => () => {}, onReconnect: () => () => {} }) }));
+
+import { AuthContext } from '../src/auth/AuthContext';
+import { MessageBubble } from '../src/messaging/MessageBubble';
+import { MessagingProvider } from '../src/messaging/MessagingProvider';
+import { ReadTicks } from '../src/messaging/ReadTicks';
+import { Thread } from '../src/messaging/Thread';
+
+function makeApi() {
+  return {
+    listConversations: vi.fn().mockResolvedValue({ results: [{ id: 1, kind: 'group' }] }),
+    getUnreadCount: vi.fn().mockResolvedValue({ unread_count: 0, by_conversation: {} }),
+    listMessages: vi.fn().mockResolvedValue({ results: [{ id: 2, conversation_id: 1, body: 'Visible message', created_at: '2026-07-31T10:00:00Z' }], next_cursor: 'signed-opaque-cursor' }),
+    listThread: vi.fn().mockResolvedValue({ results: [] }),
+    getReadStatus: vi.fn().mockResolvedValue({ all_read: false, delivered_count: 2 }),
+  };
+}
+function renderThread(api, { userId = 9 } = {}) {
+  return render(
+    <AuthContext.Provider value={{ user: { id: userId } }}>
+      <MessagingProvider api={api} activeConversationId={1}><Thread conversationId={1} /></MessagingProvider>
+    </AuthContext.Provider>,
+  );
+}
+
+describe('messaging Thread surfaces', () => {
+  let api;
+  beforeEach(() => { api = makeApi(); });
+  afterEach(cleanup);
+
+  it('uses the opaque message cursor and shows a rejected older page as an error', async () => {
+    api.listMessages.mockResolvedValueOnce({ results: [{ id: 2, conversation_id: 1, body: 'Visible message' }], next_cursor: 'signed-opaque-cursor' }).mockRejectedValueOnce(new Error('bad cursor'));
+    renderThread(api);
+    await screen.findByText('Visible message');
+    fireEvent.click(screen.getByRole('button', { name: 'MessagingThread.LOAD_OLDER' }));
+    await screen.findByRole('alert');
+    expect(api.listMessages).toHaveBeenLastCalledWith(1, { cursor: 'signed-opaque-cursor' });
+    expect(screen.getByText('Visible message')).toBeTruthy();
+  });
+
+  it('renders deleted content as a redacted placeholder', () => {
+    render(<MessageBubble message={{ id: 4, body: 'Stale secret', deleted_at: '2026-07-31T10:00:00Z' }} />);
+    expect(screen.getByText('MessagingThread.DELETED')).toBeTruthy();
+    expect(screen.queryByText('Stale secret')).toBeNull();
+  });
+
+  it('renders aggregate read state and never exposes supplied recipient details for a direct conversation', async () => {
+    api.getReadStatus.mockResolvedValue({ all_read: false, delivered_count: 2, recipient_detail: [{ display_name: 'Private recipient' }] });
+    render(<MessagingProvider api={api} active={false}><ReadTicks messageId={2} conversation={{ id: 1, kind: 'direct' }} /></MessagingProvider>);
+    await screen.findByLabelText('MessagingReadTicks.DELIVERED:2');
+    expect(screen.queryByText('Private recipient')).toBeNull();
+  });
+
+  it('renders supplied recipient detail for a non-direct conversation (the permitted case)', async () => {
+    api.getReadStatus.mockResolvedValue({ all_read: false, delivered_count: 2, recipient_detail: [{ display_name: 'Visible recipient' }] });
+    render(<MessagingProvider api={api} active={false}><ReadTicks messageId={2} conversation={{ id: 1, kind: 'group' }} /></MessagingProvider>);
+    const tick = await screen.findByLabelText('MessagingReadTicks.DELIVERED:2');
+    fireEvent.click(tick);
+    await screen.findByText('Visible recipient');
+  });
+
+  it('only mounts ReadTicks (and its REST call) for the current user\'s own messages, not every message in the timeline', async () => {
+    api.listMessages.mockResolvedValue({
+      results: [
+        { id: 2, conversation_id: 1, body: 'Mine', created_at: '2026-07-31T10:00:00Z', sender: { id: 9 } },
+        { id: 3, conversation_id: 1, body: 'Theirs', created_at: '2026-07-31T10:01:00Z', sender: { id: 42 } },
+      ],
+      next_cursor: null,
+    });
+    renderThread(api, { userId: 9 });
+    await screen.findByText('Mine');
+    await screen.findByText('Theirs');
+    await waitFor(() => expect(api.getReadStatus).toHaveBeenCalledTimes(1));
+    expect(api.getReadStatus).toHaveBeenCalledWith(2);
+  });
+
+  it('does not mount ReadTicks (or fire a REST call) for a still-pending optimistic own message', async () => {
+    api.listMessages.mockResolvedValue({
+      results: [{ id: 'local-r9', conversation_id: 1, body: 'Sending...', created_at: '2026-07-31T10:00:00Z', sender: { id: 9 }, status: 'pending', client_request_id: 'r9' }],
+      next_cursor: null,
+    });
+    renderThread(api, { userId: 9 });
+    await screen.findByText('Sending...');
+    expect(api.getReadStatus).not.toHaveBeenCalled();
+  });
+
+  it('mounts Thread and ReadTicks independently', async () => {
+    renderThread(api);
+    await screen.findByLabelText('MessagingThread.TIMELINE');
+    cleanup();
+    render(<MessagingProvider api={api} active={false}><ReadTicks messageId={2} conversation={{ id: 1, kind: 'group' }} /></MessagingProvider>);
+    await waitFor(() => expect(screen.getByLabelText('MessagingReadTicks.DELIVERED:2')).toBeTruthy());
+  });
+});

package/tests/messagingApi.test.js

@@ -0,0 +1,32 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+
+const client = vi.hoisted(() => ({ get: vi.fn(), post: vi.fn(), patch: vi.fn(), delete: vi.fn() }));
+vi.mock('../src/auth/apiClient', () => ({ default: client }));
+
+import * as api from '../src/messaging/api';
+
+const response = { data: { ok: true } };
+beforeEach(() => { vi.clearAllMocks(); Object.values(client).forEach((method) => method.mockResolvedValue(response)); });
+
+describe('messaging API contract', () => {
+  it('uses the published conversations and message routes', async () => {
+    await api.listConversations({ scope_kind: 'container', cursor: 'opaque' });
+    await api.createDirectConversation({ target_user_id: 8 });
+    await api.createGroupConversation({ title: 'Group' }); await api.createBroadcastConversation({}); await api.createManagedConversation({}); await api.createObjectThreadConversation({});
+    await api.getConversationConfig(1); await api.patchConversationConfig(1, {}); await api.archiveConversation(1, true); await api.patchConversationPreferences(1, {});
+    await api.listMessages(1, { cursor: 'opaque' }); await api.createMessage(1, { body: 'x' }, { idempotencyKey: 'key' }); await api.uploadAttachments(1, new FormData()); await api.createPoll(1, {});
+    expect(client.get).toHaveBeenCalledWith('/api/messaging/conversations/', { params: { scope_kind: 'container', cursor: 'opaque' } });
+    expect(client.post).toHaveBeenCalledWith('/api/messaging/conversations/direct/', { target_user_id: 8 });
+    expect(client.post).toHaveBeenCalledWith('/api/messaging/conversations/1/messages/', { body: 'x' }, { headers: { 'Idempotency-Key': 'key' } });
+    expect(client.get).toHaveBeenCalledWith('/api/messaging/conversations/1/messages/', { params: { cursor: 'opaque' } });
+  });
+
+  it('uses the published detail, receipt, poll and attachment routes', async () => {
+    await api.getMessage(2); await api.patchMessage(2, {}); await api.deleteMessage(2); await api.addReaction(2, '👍'); await api.removeReaction(2, '👍');
+    await api.listThread(2, { cursor: 'opaque' }); await api.markThreadRead(2); await api.markConversationRead(3); await api.getReadStatus(2); await api.votePoll(4, [5]); await api.closePoll(4); await api.getAttachment(6); await api.getAttachmentThumbnail(6); await api.getUnreadCount();
+    expect(client.delete).toHaveBeenCalledWith('/api/messaging/messages/2/reactions/%F0%9F%91%8D/');
+    expect(client.get).toHaveBeenCalledWith('/api/messaging/messages/2/thread/', { params: { cursor: 'opaque' } });
+    expect(client.post).toHaveBeenCalledWith('/api/messaging/conversations/3/read/', {});
+    expect(client.get).toHaveBeenCalledWith('/api/messaging/unread-count/');
+  });
+});

package/tests/messagingChunk6.test.jsx

@@ -0,0 +1,109 @@
+// @vitest-environment jsdom
+import React from 'react';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import { cleanup, fireEvent, render, screen, waitFor } from '@testing-library/react';
+
+let frameHandler;
+vi.mock('react-i18next', () => ({ useTranslation: () => ({ t: (key, options) => options?.count != null ? `${key}:${options.count}` : key, i18n: { language: 'en' } }) }));
+vi.mock('../src/notifications/realtime', () => ({ useRealtime: () => ({ subscribe: (_envelope, handler) => { frameHandler = handler; return () => {}; }, onReconnect: () => () => {} }) }));
+
+import { Composer } from '../src/messaging/Composer';
+import { ConversationList } from '../src/messaging/ConversationList';
+import { MessageBubble } from '../src/messaging/MessageBubble';
+import { MessagingProvider } from '../src/messaging/MessagingProvider';
+import { ReadTicks } from '../src/messaging/ReadTicks';
+import { Thread } from '../src/messaging/Thread';
+
+function makeApi(overrides = {}) {
+  return {
+    listConversations: vi.fn().mockResolvedValue({ results: [] }),
+    listMessages: vi.fn().mockResolvedValue({ results: [] }),
+    listThread: vi.fn().mockResolvedValue({ results: [] }),
+    getUnreadCount: vi.fn().mockResolvedValue({ unread_count: 0, by_conversation: {} }),
+    getReadStatus: vi.fn().mockResolvedValue({ all_read: false, delivered_count: 2 }),
+    markConversationRead: vi.fn().mockResolvedValue({}), markThreadRead: vi.fn().mockResolvedValue({}),
+    createPoll: vi.fn().mockResolvedValue({}),
+    ...overrides,
+  };
+}
+
+afterEach(() => { cleanup(); vi.useRealTimers(); vi.restoreAllMocks(); frameHandler = undefined; });
+
+describe('MSG-3b chunk 6', () => {
+  it('renders localized relative list timestamps for now, minutes, hours, and days', async () => {
+    vi.spyOn(Date, 'now').mockReturnValue(new Date('2026-07-31T12:00:00Z').getTime());
+    const api = makeApi({ listConversations: vi.fn().mockResolvedValue({ results: [
+      { id: 1, title: 'Now', last_message_at: '2026-07-31T11:59:50Z' },
+      { id: 2, title: 'Minutes', last_message_at: '2026-07-31T11:55:00Z' },
+      { id: 3, title: 'Hours', last_message_at: '2026-07-31T09:00:00Z' },
+      { id: 4, title: 'Days', last_message_at: '2026-07-29T12:00:00Z' },
+    ] }) });
+    render(<MessagingProvider api={api}><ConversationList /></MessagingProvider>);
+    await screen.findByText('Now');
+    expect(screen.getByText('now')).toBeTruthy();
+    expect(screen.getByText(/5m/)).toBeTruthy();
+    expect(screen.getByText(/3h/)).toBeTruthy();
+    expect(screen.getByText(/2d/)).toBeTruthy();
+  });
+
+  it('auto-scrolls only for active-conversation messages when the reader was near the bottom', async () => {
+    const api = makeApi({ listConversations: vi.fn().mockResolvedValue({ results: [{ id: 1, kind: 'group' }] }), listMessages: vi.fn().mockResolvedValue({ results: [{ id: 1, conversation_id: 1, body: 'First' }] }) });
+    render(<MessagingProvider api={api} activeConversationId={1}><Thread conversationId={1} /></MessagingProvider>);
+    const timeline = await screen.findByLabelText('MessagingThread.TIMELINE');
+    Object.defineProperties(timeline, { scrollHeight: { configurable: true, value: 1000 }, clientHeight: { configurable: true, value: 300 }, scrollTop: { configurable: true, writable: true, value: 690 } });
+    timeline.scrollTo = vi.fn();
+    fireEvent.scroll(timeline);
+    frameHandler({ type: 'message', conversation_id: 1, message: { id: 2, body: 'Near bottom' } });
+    await waitFor(() => expect(timeline.scrollTo).toHaveBeenCalledTimes(1));
+    timeline.scrollTo.mockClear(); timeline.scrollTop = 100;
+    fireEvent.scroll(timeline);
+    frameHandler({ type: 'message', conversation_id: 1, message: { id: 3, body: 'Reading history' } });
+    await screen.findByText('Reading history');
+    expect(timeline.scrollTo).not.toHaveBeenCalled();
+  });
+
+  it('renders announcement deep links only with a host handler and supplies its exact target', () => {
+    const onAnnouncementLink = vi.fn();
+    const message = { id: 3, kind: 'announcement', title: 'Notice', body: 'Read this', link_target: '/events/7' };
+    const bubble = (props) => <MessagingProvider api={makeApi()} active={false}><MessageBubble {...props} /></MessagingProvider>;
+    const view = render(bubble({ message, onAnnouncementLink }));
+    fireEvent.click(screen.getByRole('button', { name: 'MessagingAnnouncement.OPEN_LINK' }));
+    expect(onAnnouncementLink).toHaveBeenCalledWith('/events/7');
+    view.rerender(bubble({ message }));
+    expect(screen.queryByRole('button', { name: 'MessagingAnnouncement.OPEN_LINK' })).toBeNull();
+    view.rerender(bubble({ message: { ...message, link_target: null }, onAnnouncementLink }));
+    expect(screen.queryByRole('button', { name: 'MessagingAnnouncement.OPEN_LINK' })).toBeNull();
+  });
+
+  it('shows senders for group messages and suppresses them for direct messages', () => {
+    const message = { id: 4, body: 'Hi', sender: { display_name: 'Ava' } };
+    const bubble = (conversation) => <MessagingProvider api={makeApi()} active={false}><MessageBubble message={message} conversation={conversation} /></MessagingProvider>;
+    const view = render(bubble({ kind: 'group' }));
+    expect(screen.getByText('Ava')).toBeTruthy();
+    view.rerender(bubble({ kind: 'direct' }));
+    expect(screen.queryByText('Ava')).toBeNull();
+  });
+
+  it('opens receipt recipients by click for non-direct conversations and never exposes direct details', async () => {
+    const api = makeApi({ getReadStatus: vi.fn().mockResolvedValue({ all_read: false, delivered_count: 2, recipient_detail: [{ display_name: 'Ava' }] }) });
+    const view = render(<MessagingProvider api={api} active={false}><ReadTicks messageId={7} conversation={{ kind: 'group' }} /></MessagingProvider>);
+    const detail = await screen.findByRole('button', { name: 'MessagingReadTicks.DELIVERED:2' });
+    fireEvent.click(detail);
+    expect(await screen.findByText('Ava')).toBeTruthy();
+    view.unmount();
+    render(<MessagingProvider api={api} active={false}><ReadTicks messageId={7} conversation={{ kind: 'direct' }} /></MessagingProvider>);
+    await screen.findByLabelText('MessagingReadTicks.DELIVERED:2');
+    expect(screen.queryByRole('button', { name: 'MessagingReadTicks.DELIVERED:2' })).toBeNull();
+    expect(screen.queryByText('Ava')).toBeNull();
+  });
+
+  it('caps poll composer options at ten without changing the existing two-option start', () => {
+    render(<MessagingProvider api={makeApi()} active={false}><Composer conversationId={1} /></MessagingProvider>);
+    fireEvent.click(screen.getByRole('button', { name: 'MessagingPoll.CREATE' }));
+    const addOption = screen.getByRole('button', { name: 'MessagingPoll.ADD_OPTION' });
+    expect(screen.getAllByLabelText(/MessagingPoll.OPTION/)).toHaveLength(2);
+    for (let count = 0; count < 8; count += 1) fireEvent.click(addOption);
+    expect(screen.getAllByLabelText(/MessagingPoll.OPTION/)).toHaveLength(10);
+    expect(addOption.disabled).toBe(true);
+  });
+});

package/tests/messagingComposer.test.jsx

@@ -0,0 +1,111 @@
+// @vitest-environment jsdom
+import React from 'react';
+import { afterEach, describe, expect, it, vi } from 'vitest';
+import { act, cleanup, fireEvent, render, screen, waitFor } from '@testing-library/react';
+
+vi.mock('react-i18next', () => ({ useTranslation: () => ({ t: (key, options) => options?.message ? `${key}:${options.message}` : (options?.sender ? `${key}:${options.sender}` : key) }) }));
+
+const realtimeSubscribers = new Map();
+vi.mock('../src/notifications/realtime', () => ({
+  useRealtime: () => ({
+    subscribe: (envelope, handler) => { realtimeSubscribers.set(envelope, handler); return () => realtimeSubscribers.delete(envelope); },
+    onReconnect: () => () => {},
+  }),
+}));
+function dispatchMessagingFrame(frame) { realtimeSubscribers.get('messaging')?.(frame); }
+
+import { AuthContext } from '../src/auth/AuthContext';
+import { AttachmentList } from '../src/messaging/AttachmentList';
+import { Composer } from '../src/messaging/Composer';
+import { messagingReducer, MessagingProvider, useMessaging } from '../src/messaging/MessagingProvider';
+
+function State() { const { cache } = useMessaging(); return <output data-testid="cache">{JSON.stringify(cache)}</output>; }
+function makeApi() {
+  return {
+    listConversations: vi.fn().mockResolvedValue({ results: [] }), listMessages: vi.fn().mockResolvedValue({ results: [] }), getUnreadCount: vi.fn().mockResolvedValue({ unread_count: 0, by_conversation: {} }),
+    createMessage: vi.fn(), uploadAttachments: vi.fn(), getAttachment: vi.fn().mockResolvedValue(new Blob(['file'])), getAttachmentThumbnail: vi.fn().mockResolvedValue(new Blob(['image'], { type: 'image/png' })),
+  };
+}
+function renderComposer(api, { userId } = {}) {
+  const tree = <MessagingProvider api={api} active={false}><Composer conversationId={7} /><State /></MessagingProvider>;
+  return render(userId ? <AuthContext.Provider value={{ user: { id: userId, username: 'me' } }}>{tree}</AuthContext.Provider> : tree);
+}
+function typeAndSend(text = 'hello') { fireEvent.change(screen.getByLabelText('MessagingComposer.MESSAGE'), { target: { value: text } }); fireEvent.click(screen.getByRole('button', { name: 'MessagingComposer.SEND' })); }
+const state = () => JSON.parse(screen.getByTestId('cache').textContent);
+
+afterEach(() => { cleanup(); realtimeSubscribers.clear(); });
+
+describe('Composer optimistic send and attachments', () => {
+  it('reconciles REST then websocket confirmation into exactly one row', () => {
+    const pending = { id: 'local-r1', conversation_id: 7, client_request_id: 'r1', status: 'pending' };
+    const rest = { id: 88, conversation_id: 7, body: 'hello', client_request_id: 'r1' };
+    let next = messagingReducer({ conversations: {}, messages: {}, cursors: { conversations: null, messages: {}, threads: {} } }, { type: 'messageOptimistic', message: pending });
+    next = messagingReducer(next, { type: 'messageReconciled', message: rest });
+    next = messagingReducer(next, { type: 'frame', frame: { type: 'message', conversation_id: 7, message: rest } });
+    expect(Object.values(next.messages)).toHaveLength(1);
+    expect(next.messages[88].client_request_id).toBe('r1');
+  });
+
+  it('reconciles websocket then REST confirmation into exactly one row', () => {
+    const pending = { id: 'local-r2', conversation_id: 7, client_request_id: 'r2', status: 'pending' };
+    const websocket = { id: 89, conversation_id: 7, body: 'hello', client_request_id: 'r2' };
+    let next = messagingReducer({ conversations: {}, messages: {}, cursors: { conversations: null, messages: {}, threads: {} } }, { type: 'messageOptimistic', message: pending });
+    next = messagingReducer(next, { type: 'frame', frame: { type: 'message', conversation_id: 7, message: websocket } });
+    next = messagingReducer(next, { type: 'messageReconciled', message: websocket });
+    expect(Object.values(next.messages)).toHaveLength(1);
+    expect(next.messages[89].client_request_id).toBe('r2');
+  });
+
+  it('retries a failed send with the same idempotency key and optimistic row', async () => {
+    const api = makeApi(); api.createMessage.mockRejectedValueOnce(new Error('offline')).mockResolvedValueOnce({ id: 90, conversation_id: 7, body: 'hello' });
+    renderComposer(api); typeAndSend(); await screen.findByRole('alert'); const first = api.createMessage.mock.calls[0][1].client_request_id;
+    fireEvent.click(screen.getByRole('button', { name: 'MessagingComposer.RETRY' }));
+    await waitFor(() => expect(api.createMessage).toHaveBeenCalledTimes(2));
+    expect(api.createMessage.mock.calls[1][1].client_request_id).toBe(first);
+    await waitFor(() => expect(Object.keys(state().messages)).toEqual(['90']));
+  });
+
+  it('shows the server validation message for a rejected attachment upload', async () => {
+    // dcm's ConversationAttachmentView translates a rejected upload into a
+    // field-keyed {"files": [...]} body (the MSG-2 chunk-4 fix), not {detail}.
+    const api = makeApi(); api.uploadAttachments.mockRejectedValue({ response: { data: { files: ['File type application/octet-stream is not allowed.'] } } });
+    renderComposer(api); const input = document.querySelector('input[type=file]'); const file = new File(['x'], 'bad.exe', { type: 'application/octet-stream' });
+    fireEvent.change(input, { target: { files: [file] } }); fireEvent.click(screen.getByRole('button', { name: 'MessagingComposer.SEND' }));
+    await screen.findByText('MessagingComposer.UPLOAD_ERROR:File type application/octet-stream is not allowed.');
+  });
+
+  it('shows the server validation message when it arrives as {detail} (the text-message error shape)', async () => {
+    const api = makeApi(); api.createMessage.mockRejectedValue({ response: { data: { detail: 'Posting is not permitted.' } } });
+    renderComposer(api); typeAndSend('hello');
+    await screen.findByText('MessagingComposer.SEND_ERROR:Posting is not permitted.');
+  });
+
+  it('populates the optimistic row with the current user as sender, not "unknown sender"', async () => {
+    let resolveCreate; const api = makeApi(); api.createMessage.mockReturnValue(new Promise((resolve) => { resolveCreate = resolve; }));
+    renderComposer(api, { userId: 9 }); typeAndSend('hello');
+    await waitFor(() => expect(Object.keys(state().messages)).toHaveLength(1));
+    const [optimistic] = Object.values(state().messages);
+    expect(optimistic.status).toBe('pending');
+    expect(optimistic.sender).toEqual({ id: 9, display_name: 'me' });
+    resolveCreate({ id: 91, conversation_id: 7, body: 'hello' });
+  });
+
+  it('end-to-end: a real in-flight send reconciled by a WS frame arriving before the REST response settles produces exactly one row', async () => {
+    let resolveCreate; const api = makeApi(); api.createMessage.mockReturnValue(new Promise((resolve) => { resolveCreate = resolve; }));
+    renderComposer(api); typeAndSend('hello');
+    await waitFor(() => expect(Object.keys(state().messages)).toHaveLength(1));
+    const requestId = api.createMessage.mock.calls[0][1].client_request_id;
+    // The WS frame for this message's creation arrives while the REST POST is still in flight.
+    act(() => dispatchMessagingFrame({ envelope: 'messaging', type: 'message', conversation_id: 7, message: { id: 91, conversation_id: 7, body: 'hello', client_request_id: requestId } }));
+    expect(Object.keys(state().messages)).toEqual(['91']);
+    // The REST response for the same send resolves afterward and must not create a second row.
+    await act(async () => resolveCreate({ id: 91, conversation_id: 7, body: 'hello', client_request_id: requestId }));
+    expect(Object.keys(state().messages)).toEqual(['91']);
+  });
+
+  it('mounts Composer and AttachmentList independently', async () => {
+    const api = makeApi(); const { unmount } = renderComposer(api); expect(screen.getByLabelText('MessagingComposer.LABEL')).toBeTruthy(); unmount();
+    render(<MessagingProvider api={api} active={false}><AttachmentList attachments={[{ id: 1, filename: 'note.pdf', content_type: 'application/pdf' }]} /></MessagingProvider>);
+    expect(screen.getByLabelText('MessagingAttachments.LABEL')).toBeTruthy();
+  });
+});