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

package/tests/messagingComposerChunk5.test.jsx

@@ -0,0 +1,110 @@
+// @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?.name ? `${key}:${options.name}` : key }) }));
+vi.mock('../src/notifications/realtime', () => ({ useRealtime: () => ({ subscribe: () => () => {}, onReconnect: () => () => {} }) }));
+
+import { Composer } from '../src/messaging/Composer';
+import { MessagingProvider } from '../src/messaging/MessagingProvider';
+
+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().mockResolvedValue({ id: 1, conversation_id: 7 }), uploadAttachments: vi.fn().mockResolvedValue({ id: 2, conversation_id: 7 }), getAttachment: vi.fn(), getAttachmentThumbnail: vi.fn(),
+  };
+}
+function renderComposer(api = makeApi(), conversationId = 7) {
+  return render(<MessagingProvider api={api} active={false}><Composer conversationId={conversationId} /></MessagingProvider>);
+}
+function attachmentInput() { return document.querySelector('input[type=file]'); }
+function messageInput() { return screen.getByLabelText('MessagingComposer.MESSAGE'); }
+function imageFile(name = 'photo.png') { return new File(['image'], name, { type: 'image/png' }); }
+
+beforeEach(() => {
+  URL.createObjectURL = vi.fn((file) => `blob:${file.name}`);
+  URL.revokeObjectURL = vi.fn();
+});
+afterEach(() => { cleanup(); vi.restoreAllMocks(); });
+
+describe('Composer chunk 5 behavior', () => {
+  it('sends on Enter and leaves Shift+Enter available for a newline', async () => {
+    const api = makeApi(); renderComposer(api);
+    fireEvent.change(messageInput(), { target: { value: 'first' } });
+    fireEvent.keyDown(messageInput(), { key: 'Enter', code: 'Enter' });
+    await waitFor(() => expect(api.createMessage).toHaveBeenCalledTimes(1));
+
+    fireEvent.change(messageInput(), { target: { value: 'first' } });
+    fireEvent.keyDown(messageInput(), { key: 'Enter', code: 'Enter', shiftKey: true });
+    fireEvent.change(messageInput(), { target: { value: 'first\nsecond' } });
+    expect(api.createMessage).toHaveBeenCalledTimes(1);
+    expect(messageInput().value).toBe('first\nsecond');
+  });
+
+  it('shows staged image previews and removes only the chosen file before upload', async () => {
+    const api = makeApi(); renderComposer(api);
+    const first = imageFile('first.png'); const second = imageFile('second.png');
+    fireEvent.change(attachmentInput(), { target: { files: [first, second] } });
+    expect(screen.getByRole('img', { name: 'first.png' })).toBeTruthy();
+    expect(screen.getByRole('img', { name: 'second.png' })).toBeTruthy();
+    fireEvent.click(screen.getByRole('button', { name: 'MessagingComposer.REMOVE_ATTACHMENT:first.png' }));
+    expect(screen.queryByRole('img', { name: 'first.png' })).toBeNull();
+    fireEvent.click(screen.getByRole('button', { name: 'MessagingComposer.SEND' }));
+    await waitFor(() => expect(api.uploadAttachments).toHaveBeenCalledTimes(1));
+    const sentFiles = Array.from(api.uploadAttachments.mock.calls[0][1].getAll('files[]'));
+    expect(sentFiles).toHaveLength(1);
+    expect(sentFiles[0].name).toBe('second.png');
+  });
+
+  it('shows real byte-percentage upload progress while an attachment upload is in flight', async () => {
+    let resolveUpload; const api = makeApi(); api.uploadAttachments.mockReturnValue(new Promise((resolve) => { resolveUpload = resolve; }));
+    renderComposer(api); fireEvent.change(attachmentInput(), { target: { files: [imageFile()] } });
+    fireEvent.click(screen.getByRole('button', { name: 'MessagingComposer.SEND' }));
+    expect(await screen.findByRole('status')).toBeTruthy();
+    const { onUploadProgress } = api.uploadAttachments.mock.calls[0][2];
+    onUploadProgress({ loaded: 25, total: 100 });
+    await waitFor(() => expect(screen.getAllByRole('progressbar')[0].getAttribute('aria-valuenow')).toBe('25'));
+    resolveUpload({ id: 2, conversation_id: 7 });
+    await waitFor(() => expect(screen.queryByRole('status')).toBeNull());
+  });
+
+  it('compresses oversized images before adding them to FormData and falls back silently if compression fails', async () => {
+    const largeImage = new File([new Uint8Array(2 * 1024 * 1024 + 1)], 'large.png', { type: 'image/png' });
+    const api = makeApi();
+    class SuccessfulImage { naturalWidth = 5120; naturalHeight = 2560; set src(_) { this.onload(); } }
+    vi.stubGlobal('Image', SuccessfulImage);
+    vi.spyOn(HTMLCanvasElement.prototype, 'getContext').mockReturnValue({ drawImage: vi.fn() });
+    vi.spyOn(HTMLCanvasElement.prototype, 'toBlob').mockImplementation((callback) => callback(new Blob(['compressed'], { type: 'image/jpeg' })));
+    renderComposer(api); fireEvent.change(attachmentInput(), { target: { files: [largeImage] } }); fireEvent.click(screen.getByRole('button', { name: 'MessagingComposer.SEND' }));
+    await waitFor(() => expect(api.uploadAttachments).toHaveBeenCalledTimes(1));
+    const compressed = api.uploadAttachments.mock.calls[0][1].get('files[]');
+    expect(compressed.name).toBe('large.jpg'); expect(compressed.type).toBe('image/jpeg');
+
+    cleanup(); const fallbackApi = makeApi(); class FailingImage { set src(_) { this.onerror(); } }
+    vi.stubGlobal('Image', FailingImage);
+    renderComposer(fallbackApi); fireEvent.change(attachmentInput(), { target: { files: [largeImage] } }); fireEvent.click(screen.getByRole('button', { name: 'MessagingComposer.SEND' }));
+    await waitFor(() => expect(fallbackApi.uploadAttachments).toHaveBeenCalledTimes(1));
+    const fallback = fallbackApi.uploadAttachments.mock.calls[0][1].get('files[]');
+    expect(fallback.name).toBe('large.png'); expect(fallback.type).toBe('image/png');
+  });
+
+  it('inserts the selected emoji at the current cursor position', async () => {
+    renderComposer(); fireEvent.change(messageInput(), { target: { value: 'abCD' } });
+    messageInput().setSelectionRange(2, 2);
+    fireEvent.click(screen.getByRole('button', { name: 'MessagingComposer.ADD_EMOJI' }));
+    fireEvent.click(await screen.findByRole('menuitem', { name: '👍' }));
+    await waitFor(() => expect(messageInput().value).toBe('ab👍CD'));
+  });
+
+  it('disables poll composing while an image is staged and resets drafts for a new conversation', async () => {
+    const api = makeApi(); const view = renderComposer(api, 7);
+    fireEvent.change(attachmentInput(), { target: { files: [imageFile()] } });
+    expect(screen.getByRole('button', { name: 'MessagingPoll.CREATE' }).disabled).toBe(true);
+    fireEvent.click(screen.getByRole('button', { name: 'MessagingComposer.REMOVE_ATTACHMENT:photo.png' }));
+    expect(screen.getByRole('button', { name: 'MessagingPoll.CREATE' }).disabled).toBe(false);
+    fireEvent.change(messageInput(), { target: { value: 'unsent draft' } });
+    view.rerender(<MessagingProvider api={api} active={false}><Composer conversationId={8} /></MessagingProvider>);
+    await waitFor(() => expect(messageInput().value).toBe(''));
+  });
+});

package/tests/messagingContractConformance.test.js

@@ -0,0 +1,42 @@
+import fs from 'node:fs';
+import path from 'node:path';
+import { describe, expect, it } from 'vitest';
+
+const root = path.resolve(import.meta.dirname, '..');
+const messagingRoot = path.join(root, 'src', 'messaging');
+
+// These are deliberately named and time-bounded. Chunks 3 and 4 must remove
+// their entries when they wire their existing adapters; the final three are
+// retained only if their stated product rationale still holds at WO close.
+const API_EXEMPTIONS = {
+  createManagedConversation: 'No managed-conversation launcher is in the current public surface.',
+  createObjectThreadConversation: 'Object-thread creation is host-owned routing/scope work.',
+  getMessage: 'Timeline data is loaded through listMessages and listThread.',
+};
+const FRAME_TYPES = ['conversation_upsert', 'conversation_archived', 'message', 'message_edited', 'message_deleted', 'attachment_ready', 'reaction', 'poll_updated', 'delivered', 'read_state', 'thread_read_state', 'participant_changed'];
+const FRAME_EXEMPTIONS = {
+  attachment_ready: 'Reserved by the design and deliberately unemitted.',
+  delivered: 'Receipt synchronisation is outside MSG-3b.',
+  read_state: 'Receipt synchronisation is outside MSG-3b.',
+  thread_read_state: 'Receipt synchronisation is outside MSG-3b.',
+};
+
+describe('messaging adapter and realtime contract conformance', () => {
+  it('has a caller for every API export unless it has an explicit rationale', () => {
+    const apiSource = fs.readFileSync(path.join(messagingRoot, 'api.js'), 'utf8');
+    const source = fs.readdirSync(messagingRoot).filter((file) => file.endsWith('.jsx')).map((file) => fs.readFileSync(path.join(messagingRoot, file), 'utf8')).join('\n');
+    const exports = [...apiSource.matchAll(/export function (\w+)\(/g)].map((match) => match[1]);
+    // Attachment readers are intentionally passed through the provider to the
+    // standalone AttachmentList, where they are called. All other adapters
+    // are invoked by the provider/component that owns the action.
+    const unwired = exports.filter((name) => !new RegExp(`api\\.${name}\\(|${name}: api\\.${name}`).test(source) && !API_EXEMPTIONS[name]);
+    expect(unwired).toEqual([]);
+  });
+
+  it('handles only design-listed frames and accounts for intentionally unhandled frames', () => {
+    const provider = fs.readFileSync(path.join(messagingRoot, 'MessagingProvider.jsx'), 'utf8');
+    const handled = [...provider.matchAll(/frame\.type === '([^']+)'/g)].map((match) => match[1]);
+    expect(handled.every((type) => FRAME_TYPES.includes(type))).toBe(true);
+    expect(FRAME_TYPES.filter((type) => !handled.includes(type) && !FRAME_EXEMPTIONS[type])).toEqual([]);
+  });
+});

package/tests/messagingDirectMessageLauncher.test.jsx

@@ -0,0 +1,78 @@
+// @vitest-environment jsdom
+import React from 'react';
+import { afterEach, describe, expect, it, vi } from 'vitest';
+import { cleanup, fireEvent, render, screen, waitFor } from '@testing-library/react';
+
+vi.mock('react-i18next', () => ({ useTranslation: () => ({ t: (key) => key }) }));
+vi.mock('../src/notifications/realtime', () => ({ useRealtime: () => ({ subscribe: () => () => {}, onReconnect: () => () => {} }) }));
+
+import { DirectMessageLauncher } from '../src/index';
+import { MessagingProvider } from '../src/messaging/MessagingProvider';
+
+const candidates = [{ id: 2, display_name: 'Alex' }, { id: 3, display_name: 'Sam' }];
+
+function renderLauncher({ api = { createDirectConversation: vi.fn().mockResolvedValue({ id: 41, kind: 'direct' }) }, ...props } = {}) {
+  const onOpen = props.onOpen || vi.fn();
+  render(<MessagingProvider api={api} active={false}><DirectMessageLauncher candidates={candidates} onOpen={onOpen} {...props} /></MessagingProvider>);
+  return { api, onOpen };
+}
+function openPicker() { fireEvent.click(screen.getByRole('button', { name: 'MessagingDirect.LAUNCH' })); }
+
+afterEach(() => {
+  cleanup();
+  window.matchMedia = undefined;
+});
+
+describe('DirectMessageLauncher', () => {
+  it('opens a picker over host-supplied candidates and renders a distinct empty state', () => {
+    renderLauncher();
+    openPicker();
+    expect(screen.getByRole('dialog')).toBeTruthy();
+    expect(screen.getByText('Alex')).toBeTruthy();
+    expect(screen.getByText('Sam')).toBeTruthy();
+
+    cleanup();
+    renderLauncher({ candidates: [] });
+    openPicker();
+    expect(screen.getByText('MessagingDirect.EMPTY')).toBeTruthy();
+  });
+
+  it('requires a recipient, disables while starting, then opens the created conversation with scope', async () => {
+    let resolveRequest;
+    const api = { createDirectConversation: vi.fn(() => new Promise((resolve) => { resolveRequest = resolve; })) };
+    const { onOpen } = renderLauncher({ api, scope: { kind: 'event', id: 8 } });
+    openPicker();
+    const start = screen.getByRole('button', { name: 'MessagingDirect.START' });
+    expect(start.disabled).toBe(true);
+    fireEvent.click(screen.getByText('Alex'));
+    expect(start.disabled).toBe(false);
+    fireEvent.click(start);
+    expect(api.createDirectConversation).toHaveBeenCalledWith({ target_user_id: 2, scope: { kind: 'event', id: 8 } });
+    expect(start.disabled).toBe(true);
+    expect(screen.getByRole('status')).toBeTruthy();
+    resolveRequest({ id: 41, kind: 'direct' });
+    await waitFor(() => expect(onOpen).toHaveBeenCalledWith({ id: 41, kind: 'direct' }));
+    await waitFor(() => expect(screen.queryByRole('dialog')).toBeNull());
+  });
+
+  it('surfaces a policy rejection without closing the picker', async () => {
+    const api = { createDirectConversation: vi.fn().mockRejectedValue({ response: { data: { detail: 'Direct messages are restricted.' } } }) };
+    renderLauncher({ api });
+    openPicker();
+    fireEvent.click(screen.getByText('Alex'));
+    fireEvent.click(screen.getByRole('button', { name: 'MessagingDirect.START' }));
+    expect((await screen.findByRole('alert')).textContent).toContain('Direct messages are restricted.');
+    expect(screen.getByRole('dialog')).toBeTruthy();
+  });
+
+  it('uses a fullscreen dialog at the small-viewport media query', () => {
+    window.matchMedia = vi.fn().mockImplementation(() => ({
+      matches: true,
+      addEventListener: vi.fn(),
+      removeEventListener: vi.fn(),
+    }));
+    renderLauncher();
+    openPicker();
+    expect(document.querySelector('.MuiDialog-paperFullScreen')).not.toBeNull();
+  });
+});

package/tests/messagingExports.test.js

@@ -0,0 +1,21 @@
+import { describe, expect, it } from 'vitest';
+import { AttachmentList, Composer, ConversationLaunchers, ConversationList, DirectMessageLauncher, MessageBubble, MessagingProvider, MessagingScopeConfig, messagingTranslations, PollCard, ReactionBar, ReadTicks, Thread, useMessaging } from '../src/index';
+
+describe('messaging barrel exports', () => {
+  it('exports the provider, hook, standalone list and launchers', () => {
+    expect(MessagingProvider).toBeDefined();
+    expect(useMessaging).toBeDefined();
+    expect(ConversationList).toBeDefined();
+    expect(ConversationLaunchers).toBeDefined();
+    expect(DirectMessageLauncher).toBeDefined();
+    expect(Thread).toBeDefined();
+    expect(MessageBubble).toBeDefined();
+    expect(ReadTicks).toBeDefined();
+    expect(Composer).toBeDefined();
+    expect(AttachmentList).toBeDefined();
+    expect(ReactionBar).toBeDefined();
+    expect(PollCard).toBeDefined();
+    expect(MessagingScopeConfig).toBeDefined();
+    expect(messagingTranslations).toBeDefined();
+  });
+});

package/tests/messagingInteractions.test.jsx

@@ -0,0 +1,112 @@
+// @vitest-environment jsdom
+import React from 'react';
+import { afterEach, describe, expect, it, vi } from 'vitest';
+import { cleanup, fireEvent, render, screen, waitFor } from '@testing-library/react';
+
+vi.mock('react-i18next', () => ({ useTranslation: () => ({ t: (key, options) => options?.message ? `${key}:${options.message}` : key }) }));
+vi.mock('../src/notifications/realtime', () => ({ useRealtime: () => ({ subscribe: () => () => {}, onReconnect: () => () => {} }) }));
+
+import { Composer } from '../src/messaging/Composer';
+import { MessagingProvider, useMessaging } from '../src/messaging/MessagingProvider';
+import { PollCard } from '../src/messaging/PollCard';
+import { ReactionBar } from '../src/messaging/ReactionBar';
+import { MessagingScopeConfig } from '../src/messaging/MessagingScopeConfig';
+
+function CacheState() { const { cache } = useMessaging(); return <output data-testid="cache">{JSON.stringify(cache)}</output>; }
+
+const baseApi = () => ({ listConversations: vi.fn().mockResolvedValue({ results: [] }), listMessages: vi.fn().mockResolvedValue({ results: [] }), getUnreadCount: vi.fn().mockResolvedValue({ unread_count: 0, by_conversation: {} }), addReaction: vi.fn(), removeReaction: vi.fn(), votePoll: vi.fn(), closePoll: vi.fn(), createPoll: vi.fn() });
+afterEach(cleanup);
+
+describe('messaging reactions and polls', () => {
+  it('round-trips add and remove reactions through the cache-backed API', async () => {
+    const api = baseApi(); api.addReaction.mockResolvedValue({ reactions: [{ emoji: '👍', count: 1, reacted: true }] }); api.removeReaction.mockResolvedValue({ reactions: [] });
+    const { rerender } = render(<MessagingProvider api={api} active={false}><ReactionBar message={{ id: 7, reactions: [{ emoji: '👍', count: 1, reacted: false }] }} /></MessagingProvider>);
+    fireEvent.click(screen.getByRole('button', { name: 'MessagingReactions.TOGGLE' })); await waitFor(() => expect(api.addReaction).toHaveBeenCalledWith(7, '👍'));
+    rerender(<MessagingProvider api={api} active={false}><ReactionBar message={{ id: 7, reactions: [{ emoji: '👍', count: 1, reacted: true }] }} /></MessagingProvider>);
+    fireEvent.click(screen.getByRole('button', { name: 'MessagingReactions.TOGGLE' })); await waitFor(() => expect(api.removeReaction).toHaveBeenCalledWith(7, '👍'));
+  });
+
+  it('uses single selection for a single poll and preserves selections for a multi poll', async () => {
+    const single = baseApi(); single.votePoll.mockResolvedValue({ poll: { id: 1, options: [] } });
+    const { unmount } = render(<MessagingProvider api={single} active={false}><PollCard message={{ id: 7, poll: { id: 1, question: 'One', options: [{ id: 1, text: 'A' }, { id: 2, text: 'B' }], allow_multiple: false }}} /></MessagingProvider>);
+    const choices = screen.getAllByRole('checkbox'); fireEvent.click(choices[0]); fireEvent.click(choices[1]); fireEvent.click(screen.getByRole('button', { name: 'MessagingPoll.VOTE' })); await waitFor(() => expect(single.votePoll).toHaveBeenCalledWith(1, [2])); unmount();
+    const multiple = baseApi(); multiple.votePoll.mockResolvedValue({ poll: { id: 2, options: [] } }); render(<MessagingProvider api={multiple} active={false}><PollCard message={{ id: 8, poll: { id: 2, question: 'Many', options: [{ id: 1, text: 'A' }, { id: 2, text: 'B' }], allow_multiple: true }}} /></MessagingProvider>);
+    const multiChoices = screen.getAllByRole('checkbox'); fireEvent.click(multiChoices[0]); fireEvent.click(multiChoices[1]); fireEvent.click(screen.getByRole('button', { name: 'MessagingPoll.VOTE' })); await waitFor(() => expect(multiple.votePoll).toHaveBeenCalledWith(2, [1, 2]));
+  });
+
+  it('only exposes close to the creator/capability and surfaces a forbidden close', async () => {
+    const api = baseApi(); api.closePoll.mockRejectedValue({ response: { data: { detail: 'Not permitted' } } });
+    const { rerender } = render(<MessagingProvider api={api} active={false}><PollCard message={{ id: 7, poll: { id: 1, question: 'Q', options: [], created_by: 2 }}} /></MessagingProvider>);
+    expect(screen.queryByRole('button', { name: 'MessagingPoll.CLOSE' })).toBeNull();
+    rerender(<MessagingProvider api={api} active={false}><PollCard canClose message={{ id: 7, poll: { id: 1, question: 'Q', options: [] }}} /></MessagingProvider>);
+    fireEvent.click(screen.getByRole('button', { name: 'MessagingPoll.CLOSE' })); await screen.findByRole('alert');
+  });
+
+  it('creates polls with an idempotency key', async () => {
+    const api = baseApi(); api.createPoll.mockResolvedValue({ id: 70, conversation_id: 4, poll: { id: 1 } });
+    render(<MessagingProvider api={api} active={false}><Composer conversationId={4} /></MessagingProvider>);
+    fireEvent.click(screen.getByRole('button', { name: 'MessagingPoll.CREATE' })); fireEvent.change(screen.getByLabelText('MessagingPoll.QUESTION'), { target: { value: 'Where?' } });
+    const options = screen.getAllByLabelText(/MessagingPoll.OPTION/); fireEvent.change(options[0], { target: { value: 'Here' } }); fireEvent.change(options[1], { target: { value: 'There' } });
+    fireEvent.click(screen.getAllByRole('button', { name: 'MessagingPoll.CREATE' })[0]); await waitFor(() => expect(api.createPoll).toHaveBeenCalled());
+    expect(api.createPoll.mock.calls[0][2].idempotencyKey).toBeTruthy();
+  });
+
+  it('mounts the scope config as an independent provider collaborator', async () => {
+    const api = baseApi(); api.getConversationConfig = vi.fn().mockResolvedValue({ dm_policy: 'all', group_chat_enabled: true, everyone_can_post: false });
+    render(<MessagingProvider api={api} active={false}><MessagingScopeConfig conversationId={4} /></MessagingProvider>);
+    await screen.findByLabelText('MessagingConfig.LABEL');
+    expect(api.getConversationConfig).toHaveBeenCalledWith(4);
+  });
+
+  it('creates an announcement with a title, body and host-supplied link target', async () => {
+    const api = baseApi(); api.createMessage = vi.fn().mockResolvedValue({ id: 90, conversation_id: 4, kind: 'announcement', title: 'Heads up' });
+    render(<MessagingProvider api={api} active={false}><Composer conversationId={4} allowAnnouncement linkTarget="/events/4/info" /></MessagingProvider>);
+    fireEvent.click(screen.getByRole('button', { name: 'MessagingAnnouncement.CREATE' }));
+    fireEvent.change(screen.getByLabelText('MessagingAnnouncement.TITLE'), { target: { value: 'Heads up' } });
+    fireEvent.change(screen.getByLabelText('MessagingAnnouncement.BODY'), { target: { value: 'Schedule changed.' } });
+    fireEvent.click(screen.getAllByRole('button', { name: 'MessagingAnnouncement.SEND' })[0]);
+    await waitFor(() => expect(api.createMessage).toHaveBeenCalled());
+    const [, payload] = api.createMessage.mock.calls[0];
+    expect(payload).toMatchObject({ kind: 'announcement', title: 'Heads up', body: 'Schedule changed.', link_target: '/events/4/info' });
+  });
+
+  it('carries title and link_target into the optimistic row, not just the final REST payload', async () => {
+    const api = baseApi(); api.createMessage = vi.fn().mockReturnValue(new Promise(() => {}));
+    render(<MessagingProvider api={api} active={false}><Composer conversationId={4} allowAnnouncement linkTarget="/events/4/info" /><CacheState /></MessagingProvider>);
+    fireEvent.click(screen.getByRole('button', { name: 'MessagingAnnouncement.CREATE' }));
+    fireEvent.change(screen.getByLabelText('MessagingAnnouncement.TITLE'), { target: { value: 'Heads up' } });
+    fireEvent.click(screen.getAllByRole('button', { name: 'MessagingAnnouncement.SEND' })[0]);
+    await waitFor(() => {
+      const [optimistic] = Object.values(JSON.parse(screen.getByTestId('cache').textContent).messages);
+      expect(optimistic.status).toBe('pending');
+      expect(optimistic.title).toBe('Heads up');
+      expect(optimistic.link_target).toBe('/events/4/info');
+    });
+  });
+
+  it('does not offer announcement composing unless the host opts in', () => {
+    const api = baseApi();
+    render(<MessagingProvider api={api} active={false}><Composer conversationId={4} /></MessagingProvider>);
+    expect(screen.queryByRole('button', { name: 'MessagingAnnouncement.CREATE' })).toBeNull();
+  });
+
+  it('disables the chip while pending, then rolls back and re-enables it on API failure', async () => {
+    let rejectAdd; const api = baseApi(); api.addReaction.mockReturnValue(new Promise((_, reject) => { rejectAdd = reject; }));
+    render(<MessagingProvider api={api} active={false}><ReactionBar message={{ id: 7, reactions: [{ emoji: '👍', count: 1, reacted: false }] }} /></MessagingProvider>);
+    const chip = screen.getByRole('button', { name: 'MessagingReactions.TOGGLE' });
+    fireEvent.click(chip);
+    await waitFor(() => expect(chip.className.includes('Mui-disabled')).toBe(true));
+    rejectAdd({ response: { data: { detail: 'Reactions disabled' } } });
+    await screen.findByRole('alert');
+    expect(chip.className.includes('Mui-disabled')).toBe(false);
+  });
+
+  it('ignores a second click on the same reaction while the first toggle is still in flight', async () => {
+    let resolveAdd; const api = baseApi(); api.addReaction.mockReturnValue(new Promise((resolve) => { resolveAdd = resolve; }));
+    render(<MessagingProvider api={api} active={false}><ReactionBar message={{ id: 7, reactions: [{ emoji: '👍', count: 1, reacted: false }] }} /></MessagingProvider>);
+    const chip = screen.getByRole('button', { name: 'MessagingReactions.TOGGLE' });
+    fireEvent.click(chip); fireEvent.click(chip);
+    resolveAdd({ reactions: [{ emoji: '👍', count: 2, reacted: true }] });
+    await waitFor(() => expect(api.addReaction).toHaveBeenCalledTimes(1));
+  });
+});

package/tests/messagingMessageActions.test.jsx

@@ -0,0 +1,93 @@
+// @vitest-environment jsdom
+import React from 'react';
+import { afterEach, describe, expect, it, vi } from 'vitest';
+import { cleanup, fireEvent, render, screen, waitFor } from '@testing-library/react';
+
+vi.mock('react-i18next', () => ({ useTranslation: () => ({ t: (key, options) => options?.message ? `${key}:${options.message}` : key }) }));
+vi.mock('../src/notifications/realtime', () => ({ useRealtime: () => ({ subscribe: () => () => {}, onReconnect: () => () => {} }) }));
+
+import { AuthContext } from '../src/auth/AuthContext';
+import { Composer } from '../src/messaging/Composer';
+import { MessageBubble } from '../src/messaging/MessageBubble';
+import { MessagingProvider } from '../src/messaging/MessagingProvider';
+
+function makeApi() {
+  return {
+    patchMessage: vi.fn().mockImplementation(async (id, patch) => ({ id, ...patch, edited_at: '2026-07-31T10:01:00Z' })),
+    deleteMessage: vi.fn().mockImplementation(async (id) => ({ id, deleted_at: '2026-07-31T10:01:00Z' })),
+  };
+}
+function renderBubble(message, { userId = 1, canModerateMessages = false, api = makeApi() } = {}) {
+  const result = render(<AuthContext.Provider value={{ user: { id: userId } }}><MessagingProvider api={api} active={false}><MessageBubble message={message} canModerateMessages={canModerateMessages} /></MessagingProvider></AuthContext.Provider>);
+  return { ...result, api };
+}
+function openActions() { fireEvent.click(screen.getByRole('button', { name: 'MessagingActions.MENU' })); }
+
+afterEach(cleanup);
+
+describe('message actions', () => {
+  it('gates the menu to the author or host-supplied moderator capability, never deleted or poll messages', () => {
+    const mine = { id: 1, body: 'Mine', sender: { id: 1 } };
+    const theirs = { id: 2, body: 'Theirs', sender: { id: 2 } };
+    const { rerender } = renderBubble(mine);
+    expect(screen.getByRole('button', { name: 'MessagingActions.MENU' })).toBeTruthy();
+    rerender(<AuthContext.Provider value={{ user: { id: 1 } }}><MessagingProvider api={makeApi()} active={false}><MessageBubble message={theirs} /></MessagingProvider></AuthContext.Provider>);
+    expect(screen.queryByRole('button', { name: 'MessagingActions.MENU' })).toBeNull();
+    rerender(<AuthContext.Provider value={{ user: { id: 1 } }}><MessagingProvider api={makeApi()} active={false}><MessageBubble message={theirs} canModerateMessages /></MessagingProvider></AuthContext.Provider>);
+    expect(screen.getByRole('button', { name: 'MessagingActions.MENU' })).toBeTruthy();
+    rerender(<AuthContext.Provider value={{ user: { id: 1 } }}><MessagingProvider api={makeApi()} active={false}><MessageBubble message={{ ...mine, deleted_at: '2026-07-31T10:00:00Z' }} /></MessagingProvider></AuthContext.Provider>);
+    expect(screen.queryByRole('button', { name: 'MessagingActions.MENU' })).toBeNull();
+    rerender(<AuthContext.Provider value={{ user: { id: 1 } }}><MessagingProvider api={makeApi()} active={false}><MessageBubble message={{ ...mine, kind: 'poll' }} /></MessagingProvider></AuthContext.Provider>);
+    expect(screen.queryByRole('button', { name: 'MessagingActions.MENU' })).toBeNull();
+  });
+
+  it('edits an author message through the API and auto-cancels when deleted elsewhere', async () => {
+    const api = makeApi();
+    const message = { id: 4, body: 'Before', sender: { id: 1 } };
+    const { rerender } = renderBubble(message, { api });
+    openActions();
+    fireEvent.click(screen.getByRole('menuitem', { name: 'MessagingActions.EDIT' }));
+    const field = screen.getByRole('textbox', { name: 'MessagingActions.EDIT' });
+    fireEvent.change(field, { target: { value: 'After' } });
+    fireEvent.click(screen.getByRole('button', { name: 'MessagingActions.SAVE' }));
+    await waitFor(() => expect(api.patchMessage).toHaveBeenCalledWith(4, { body: 'After' }));
+    openActions();
+    fireEvent.click(screen.getByRole('menuitem', { name: 'MessagingActions.EDIT' }));
+    expect(screen.getByRole('textbox', { name: 'MessagingActions.EDIT' })).toBeTruthy();
+    rerender(<AuthContext.Provider value={{ user: { id: 1 } }}><MessagingProvider api={api} active={false}><MessageBubble message={{ ...message, deleted_at: '2026-07-31T10:02:00Z' }} /></MessagingProvider></AuthContext.Provider>);
+    await waitFor(() => expect(screen.queryByRole('textbox', { name: 'MessagingActions.EDIT' })).toBeNull());
+  });
+
+  it('requires confirmation before author or moderator deletion reaches the API', async () => {
+    const api = makeApi();
+    const { rerender } = renderBubble({ id: 5, body: 'Delete me', sender: { id: 1 } }, { api });
+    openActions();
+    fireEvent.click(screen.getByRole('menuitem', { name: 'MessagingActions.DELETE' }));
+    expect(api.deleteMessage).not.toHaveBeenCalled();
+    fireEvent.click(screen.getByRole('button', { name: 'MessagingActions.DELETE' }));
+    await waitFor(() => expect(api.deleteMessage).toHaveBeenCalledWith(5));
+    await waitFor(() => expect(screen.queryByRole('dialog')).toBeNull());
+    const moderatorApi = makeApi();
+    rerender(<AuthContext.Provider value={{ user: { id: 1 } }}><MessagingProvider api={moderatorApi} active={false}><MessageBubble message={{ id: 6, body: 'Moderator delete', sender: { id: 2 } }} canModerateMessages /></MessagingProvider></AuthContext.Provider>);
+    openActions();
+    fireEvent.click(screen.getByRole('menuitem', { name: 'MessagingActions.DELETE' }));
+    fireEvent.click(screen.getByRole('button', { name: 'MessagingActions.DELETE' }));
+    await waitFor(() => expect(moderatorApi.deleteMessage).toHaveBeenCalledWith(6));
+  });
+
+  it('clears a deleted reply target and copies the exact message body', async () => {
+    const onReplyTargetChange = vi.fn();
+    const replyTarget = { id: 7, body: 'Reply source', sender: { display_name: 'Ava' } };
+    const { rerender } = render(<MessagingProvider api={makeApi()} active={false}><Composer conversationId={1} replyTarget={replyTarget} onReplyTargetChange={onReplyTargetChange} /></MessagingProvider>);
+    onReplyTargetChange.mockClear();
+    rerender(<MessagingProvider api={makeApi()} active={false}><Composer conversationId={1} replyTarget={{ ...replyTarget, deleted_at: '2026-07-31T10:00:00Z' }} onReplyTargetChange={onReplyTargetChange} /></MessagingProvider>);
+    await waitFor(() => expect(onReplyTargetChange).toHaveBeenCalledWith(null));
+
+    const writeText = vi.fn().mockResolvedValue(undefined);
+    Object.defineProperty(navigator, 'clipboard', { configurable: true, value: { writeText } });
+    renderBubble({ id: 8, body: 'Copy exactly this', sender: { id: 1 } });
+    openActions();
+    fireEvent.click(screen.getByRole('menuitem', { name: 'MessagingActions.COPY' }));
+    await waitFor(() => expect(writeText).toHaveBeenCalledWith('Copy exactly this'));
+  });
+});

package/tests/messagingThreadingQuoting.test.jsx

@@ -0,0 +1,86 @@
+// @vitest-environment jsdom
+import React from 'react';
+import { afterEach, describe, expect, it, vi } from 'vitest';
+import { cleanup, fireEvent, render, screen, waitFor } from '@testing-library/react';
+
+vi.mock('react-i18next', () => ({ useTranslation: () => ({ t: (key, options) => options?.sender ? `${key}:${options.sender}` : key }) }));
+vi.mock('../src/notifications/realtime', () => ({ useRealtime: () => ({ subscribe: () => () => {}, onReconnect: () => () => {} }) }));
+
+import { AuthContext } from '../src/auth/AuthContext';
+import { MessageBubble } from '../src/messaging/MessageBubble';
+import { applyFrame, MessagingProvider } from '../src/messaging/MessagingProvider';
+import { Thread } from '../src/messaging/Thread';
+
+function makeApi(messages = []) {
+  return {
+    listConversations: vi.fn().mockResolvedValue({ results: [{ id: 1, kind: 'group' }] }),
+    listMessages: vi.fn().mockResolvedValue({ results: messages }),
+    listThread: vi.fn().mockResolvedValue({ results: [] }),
+    getUnreadCount: vi.fn().mockResolvedValue({ unread_count: 0, by_conversation: {} }),
+    markConversationRead: vi.fn().mockResolvedValue({}),
+    markThreadRead: vi.fn().mockResolvedValue({}),
+    getReadStatus: vi.fn().mockResolvedValue({ all_read: false, delivered_count: 0 }),
+  };
+}
+function renderBubble(ui) {
+  return render(<MessagingProvider api={makeApi()} active={false}>{ui}</MessagingProvider>);
+}
+
+afterEach(cleanup);
+
+describe('messaging threading and quoting', () => {
+  it('groups REST-loaded server-shaped reply_to_id messages under their root', async () => {
+    const api = makeApi([
+      { id: 10, conversation_id: 1, body: 'Root', sender: { display_name: 'Ava' }, created_at: '2026-07-31T10:00:00Z' },
+      { id: 11, conversation_id: 1, body: 'Server reply', reply_to_id: 10, sender: { display_name: 'Ben' }, created_at: '2026-07-31T10:01:00Z' },
+    ]);
+    render(<MessagingProvider api={api} activeConversationId={1}><Thread conversationId={1} /></MessagingProvider>);
+    await screen.findByText('Root');
+    expect(screen.queryByText('Server reply')).toBeNull();
+    fireEvent.click(screen.getByRole('button', { name: /MessagingThread\.SHOW_REPLIES/ }));
+    expect(await screen.findByText('Server reply')).toBeTruthy();
+  });
+
+  it('groups realtime server-shaped reply_to_id messages under their root', () => {
+    const state = { conversations: {}, messages: { 10: { id: 10, conversation_id: 1, body: 'Root' } }, threads: {}, polls: {}, reactions: {}, receipts: {}, unread: { unread_count: 0, by_conversation: {} }, cursors: { conversations: null, messages: {}, threads: {} } };
+    const next = applyFrame(state, { type: 'message', conversation_id: 1, message: { id: 11, body: 'Realtime reply', reply_to_id: 10 } }, 1);
+    expect(next.messages[11].reply_to_id).toBe(10);
+    expect(Object.values(next.messages).filter((message) => !((message.reply_to_id ?? message.reply_to))).map((message) => message.id)).toEqual([10]);
+  });
+
+  it('renders a quoted sender and snippet, blanking deleted quoted content', () => {
+    const { rerender } = renderBubble(<MessageBubble message={{ id: 2, body: 'Reply' }} replyTo={{ id: 1, body: 'Quoted words', sender: { display_name: 'Ava' } }} />);
+    expect(screen.getByText('MessagingThread.REPLY_TO:Ava')).toBeTruthy();
+    expect(screen.getByText('Quoted words')).toBeTruthy();
+    rerender(<MessagingProvider api={makeApi()} active={false}><MessageBubble message={{ id: 2, body: 'Reply' }} replyTo={{ id: 1, body: 'Secret', deleted_at: '2026-07-31T10:00:00Z', sender: { display_name: 'Ava' } }} /></MessagingProvider>);
+    expect(screen.getByText('MessagingThread.DELETED')).toBeTruthy();
+    expect(screen.queryByText('Secret')).toBeNull();
+  });
+
+  it('labels an attachment-only quoted source distinctly from a deleted one', () => {
+    renderBubble(<MessageBubble message={{ id: 2, body: 'Reply' }} replyTo={{ id: 1, attachments: [{ id: 9, filename: 'photo.png' }], sender: { display_name: 'Ava' } }} />);
+    expect(screen.getByText('MessagingThread.QUOTE_ATTACHMENT')).toBeTruthy();
+    expect(screen.queryByText('MessagingThread.DELETED')).toBeNull();
+  });
+
+  it("clears the Thread's own reply-target state when the message being replied to is deleted", async () => {
+    const api = makeApi([{ id: 20, conversation_id: 1, body: 'Reply target', sender: { id: 1, display_name: 'Ava' }, created_at: '2026-07-31T10:00:00Z' }]);
+    api.deleteMessage = vi.fn().mockResolvedValue({});
+    render(<AuthContext.Provider value={{ user: { id: 1 } }}><MessagingProvider api={api} activeConversationId={1}><Thread conversationId={1} /></MessagingProvider></AuthContext.Provider>);
+    await screen.findByText('Reply target');
+    fireEvent.click(screen.getByRole('button', { name: /MessagingThread\.REPLY\b/ }));
+    expect(screen.getByText(/MessagingThread\.REPLYING_TO/)).toBeTruthy();
+    fireEvent.click(screen.getByRole('button', { name: /MessagingActions\.MENU/ }));
+    fireEvent.click(screen.getByRole('menuitem', { name: /MessagingActions\.DELETE/ }));
+    fireEvent.click(screen.getByRole('button', { name: /MessagingActions\.DELETE/ }));
+    await waitFor(() => expect(api.deleteMessage).toHaveBeenCalledWith(20));
+    await waitFor(() => expect(screen.queryByText(/MessagingThread\.REPLYING_TO/)).toBeNull());
+  });
+
+  it('jumps from a quote to the original message', () => {
+    const onJumpToMessage = vi.fn();
+    renderBubble(<MessageBubble message={{ id: 2, body: 'Reply' }} replyTo={{ id: 1, body: 'Quoted words', sender: { display_name: 'Ava' } }} onJumpToMessage={onJumpToMessage} />);
+    fireEvent.click(screen.getByText('Quoted words'));
+    expect(onJumpToMessage).toHaveBeenCalledWith(1);
+  });
+});

package/tests/messagingUnreadLifecycle.test.jsx

@@ -0,0 +1,63 @@
+// @vitest-environment jsdom
+import React from 'react';
+import { afterEach, describe, expect, it, vi } from 'vitest';
+import { cleanup, fireEvent, render, screen, waitFor } from '@testing-library/react';
+
+vi.mock('react-i18next', () => ({ useTranslation: () => ({ t: (key) => key }) }));
+vi.mock('../src/notifications/realtime', () => ({ useRealtime: () => ({ subscribe: () => () => {}, onReconnect: () => () => {} }) }));
+
+import { ConversationList } from '../src/messaging/ConversationList';
+import { messagingReducer, MessagingProvider, useMessaging } from '../src/messaging/MessagingProvider';
+import { Thread } from '../src/messaging/Thread';
+
+function cache() { return { conversations: {}, messages: {}, threads: {}, polls: {}, reactions: {}, receipts: {}, unread: { unread_count: 0, by_conversation: {} }, cursors: { conversations: null, messages: {}, threads: {} } }; }
+function State() { const { cache: current } = useMessaging(); return <output data-testid="cache">{JSON.stringify(current)}</output>; }
+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: {} }),
+    markConversationRead: vi.fn().mockResolvedValue({}), markThreadRead: vi.fn().mockResolvedValue({}),
+    ...overrides,
+  };
+}
+
+afterEach(cleanup);
+
+describe('messaging unread lifecycle', () => {
+  it('marks the selected conversation read', async () => {
+    const api = makeApi({ listConversations: vi.fn().mockResolvedValue({ results: [{ id: 12, title: 'Support' }] }) });
+    render(<MessagingProvider api={api}><ConversationList /></MessagingProvider>);
+    fireEvent.click(await screen.findByRole('button', { name: /Support/ }));
+    await waitFor(() => expect(api.markConversationRead).toHaveBeenCalledWith(12, undefined));
+  });
+
+  it('marks a conversation read when its thread opens', async () => {
+    const api = makeApi();
+    render(<MessagingProvider api={api} active={false}><Thread conversationId={12} /></MessagingProvider>);
+    await waitFor(() => expect(api.markConversationRead).toHaveBeenCalledWith(12, undefined));
+  });
+
+  it('decrements the global unread count by the selected conversation prior count', () => {
+    const initial = { ...cache(), unread: { unread_count: 5, by_conversation: { 12: 2, 7: 3 } } };
+    const next = messagingReducer(initial, { type: 'conversationRead', conversationId: 12 });
+    expect(next.unread).toEqual({ unread_count: 3, by_conversation: { 12: 0, 7: 3 } });
+  });
+
+  it('marks a reply thread read when it expands', async () => {
+    const api = makeApi({ listMessages: vi.fn().mockResolvedValue({ results: [{ id: 40, conversation_id: 12, body: 'Root', reply_count: 1 }] }) });
+    render(<MessagingProvider api={api} activeConversationId={12}><Thread conversationId={12} /></MessagingProvider>);
+    fireEvent.click(await screen.findByRole('button', { name: 'MessagingThread.SHOW_REPLIES' }));
+    await waitFor(() => expect(api.markThreadRead).toHaveBeenCalledWith(40, undefined));
+  });
+
+  it('increments unread only for a new message in a non-active conversation', () => {
+    const initial = { ...cache(), unread: { unread_count: 2, by_conversation: { 7: 2 } } };
+    const incoming = { type: 'frame', activeConversationId: 7, frame: { type: 'message', conversation_id: 12, message: { id: 50, body: 'hello' } } };
+    const nonActive = messagingReducer(initial, incoming);
+    expect(nonActive.unread).toEqual({ unread_count: 3, by_conversation: { 7: 2, 12: 1 } });
+    const active = messagingReducer(nonActive, { ...incoming, frame: { type: 'message', conversation_id: 7, message: { id: 51, body: 'active' } } });
+    expect(active.unread).toEqual(nonActive.unread);
+    const optimistic = messagingReducer(initial, { type: 'messageOptimistic', message: { id: 'local-r1', conversation_id: 12, client_request_id: 'r1', status: 'pending' } });
+    const reconciled = messagingReducer(optimistic, { ...incoming, frame: { type: 'message', conversation_id: 12, message: { id: 52, client_request_id: 'r1', body: 'mine' } } });
+    expect(reconciled.unread).toEqual(initial.unread);
+  });
+});