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

package/src/messaging/ReactionBar.jsx

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

package/src/messaging/ReadTicks.jsx

@@ -1,4 +1,6 @@
-import { ButtonBase, List, ListItem, Popover, Typography } from '@mui/material';
+import DoneAllOutlinedIcon from '@mui/icons-material/DoneAllOutlined';
+import DoneOutlinedIcon from '@mui/icons-material/DoneOutlined';
+import { ButtonBase, List, ListItem, Popover } from '@mui/material';
 import { useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 
@@ -17,9 +19,10 @@ export function ReadTicks({ messageId, conversation }) {
   }, [getMessageReadStatus, messageId]);
   if (!status) return null;
   const label = status.all_read ? t('MessagingReadTicks.ALL_READ') : t('MessagingReadTicks.DELIVERED', { count: status.delivered_count || 0 });
+  const StatusIcon = status.all_read ? DoneAllOutlinedIcon : DoneOutlinedIcon;
   // The server never returns DM detail; enforce the same carve-out defensively.
   const detail = conversation?.kind === 'direct' ? null : status.recipient_detail;
   const recipients = detail?.map((recipient) => recipient.display_name || recipient.username || recipient.user_id).filter(Boolean) || [];
-  if (!recipients.length) return <Typography component="span" variant="caption" color="text.secondary" aria-label={label}>{label}</Typography>;
-  return <><ButtonBase aria-label={label} aria-haspopup="dialog" aria-expanded={Boolean(anchorEl)} onClick={(event) => setAnchorEl(event.currentTarget)} sx={{ typography: 'caption', color: 'text.secondary', textDecoration: 'underline' }}>{label}</ButtonBase><Popover open={Boolean(anchorEl)} anchorEl={anchorEl} onClose={() => setAnchorEl(null)}><List aria-label={t('MessagingReadTicks.RECIPIENTS')}>{recipients.map((recipient) => <ListItem key={recipient}>{recipient}</ListItem>)}</List></Popover></>;
+  if (!recipients.length) return <StatusIcon role="img" aria-label={label} color={status.all_read ? 'primary' : 'inherit'} />;
+  return <><ButtonBase aria-label={label} aria-haspopup="dialog" aria-expanded={Boolean(anchorEl)} onClick={(event) => setAnchorEl(event.currentTarget)} sx={{ display: 'inline-flex', color: status.all_read ? 'primary.main' : 'inherit' }}><StatusIcon aria-hidden="true" /></ButtonBase><Popover open={Boolean(anchorEl)} anchorEl={anchorEl} onClose={() => setAnchorEl(null)}><List aria-label={t('MessagingReadTicks.RECIPIENTS')}>{recipients.map((recipient) => <ListItem key={recipient}>{recipient}</ListItem>)}</List></Popover></>;
 }

package/tests/messagingCompactBubble.test.jsx

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

package/tests/messagingDirectMessageLauncher.test.jsx

@@ -55,6 +55,47 @@ describe('DirectMessageLauncher', () => {
     await waitFor(() => expect(screen.queryByRole('dialog')).toBeNull());
   });
 
+  it('uses the selected candidate scope over the launcher scope', () => {
+    const api = { createDirectConversation: vi.fn().mockResolvedValue({ id: 41, kind: 'direct' }) };
+    renderLauncher({
+      api,
+      candidates: [
+        { id: 2, display_name: 'Alex', scope: 'scope-a' },
+        { id: 3, display_name: 'Sam', scope: 'scope-b' },
+      ],
+      scope: 'scope-prop',
+    });
+    openPicker();
+    fireEvent.click(screen.getByText('Sam'));
+    fireEvent.click(screen.getByRole('button', { name: 'MessagingDirect.START' }));
+    expect(api.createDirectConversation).toHaveBeenCalledWith({ target_user_id: 3, scope: 'scope-b' });
+  });
+
+  it('falls back to the launcher scope when the selected candidate has none', () => {
+    const api = { createDirectConversation: vi.fn().mockResolvedValue({ id: 41, kind: 'direct' }) };
+    renderLauncher({
+      api,
+      candidates: [
+        { id: 2, display_name: 'Alex' },
+        { id: 3, display_name: 'Sam', scope: 'scope-b' },
+      ],
+      scope: 'scope-prop',
+    });
+    openPicker();
+    fireEvent.click(screen.getByText('Alex'));
+    fireEvent.click(screen.getByRole('button', { name: 'MessagingDirect.START' }));
+    expect(api.createDirectConversation).toHaveBeenCalledWith({ target_user_id: 2, scope: 'scope-prop' });
+  });
+
+  it('omits scope when neither the candidate nor launcher provides one', () => {
+    const api = { createDirectConversation: vi.fn().mockResolvedValue({ id: 41, kind: 'direct' }) };
+    renderLauncher({ api });
+    openPicker();
+    fireEvent.click(screen.getByText('Alex'));
+    fireEvent.click(screen.getByRole('button', { name: 'MessagingDirect.START' }));
+    expect(Object.keys(api.createDirectConversation.mock.calls[0][0])).toEqual(['target_user_id']);
+  });
+
   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 });

package/tests/messagingMessageActions.test.jsx

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

package/tests/messagingReactionMerge.test.jsx

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

package/tests/messagingThreadingQuoting.test.jsx

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

package/work-orders/DX-1.md

@@ -1,6 +1,9 @@
 # DX-1 — minimal Vite dev harness for ucm components
 
-Status: planned · Tier 1 (dev-only tooling; **adds devDependencies → approval-gated**) · Target repo: `ui-core-micha` (main)
+Status: done · **Tier 2** (dev-only tooling; **adds devDependencies → approval-gated**) · Target repo: `ui-core-micha` (main)
+*Reclassified 2026-08-01: labelled Tier 1 at authoring, but it adds dependencies in a shared-core
+repo — two binding Tier-2 surfaces per AGENTS.md's Tiering gate. A named independent `reviewer` did
+run (one P2 on the provider's own WebSocket), so only the label was wrong.*
 
 ---
 

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

@@ -0,0 +1,164 @@
+# MSG-3e — per-candidate scope in `DirectMessageLauncher`
+
+Status: planned · Tier 2 · Target repo: `ui-core-micha` (main)
+
+---
+
+## Part A — Envelope (2026-08-02)
+
+### Goal
+
+Let a host present **one flat direct-message picker whose candidates live in different messaging
+scopes**. Today `DirectMessageLauncher` takes a single `scope` prop and applies it to every candidate,
+so a host with people spread across several scopes must either render one launcher per scope or
+re-implement the component.
+
+### Why now
+
+jg-ferien MSG-6 turns `/messages` into a global inbox across **all** of a user's events. In jg's model a
+direct conversation is scoped to an event, so a flat "everyone I may DM" list carries a **different
+scope per person** — the operator's explicit requirement ("DM über alle, Gruppen pro Event"). Without
+this seam jg would have to copy ~90 lines of this component locally, which AGENTS.md's
+reuse-before-reimplement rule exists to prevent. The need is generic: any host whose people span
+multiple scopes hits it.
+
+### Expected outcome
+
+`candidates[n].scope` (optional) takes precedence over the `scope` prop **for the selected candidate
+only**. Precisely:
+
+| selected candidate's `scope` | `scope` prop | scope sent to `createDirectConversation` |
+|---|---|---|
+| present | present | the candidate's |
+| present | absent | the candidate's |
+| absent | present | the prop's (today's behaviour) |
+| absent | absent | no `scope` key in the payload at all (today's behaviour) |
+
+Strictly additive and backward compatible: a host that passes no per-candidate scope sees byte-identical
+behaviour. Note the last row — the current code omits the key entirely rather than sending
+`scope: null`, and that must not change; dcm distinguishes the two.
+
+### Scope / non-goals
+
+In scope: `src/messaging/DirectMessageLauncher.jsx` and its test file.
+
+Explicit non-goals — do **not**:
+- change the dialog's layout, copy, i18n keys, or a11y semantics;
+- add grouping, sectioning, or per-candidate secondary text (a scope is not a label — jg groups its
+  *group* picker by event locally, and that stays a host concern);
+- touch `MessagingProvider`'s `openDirectConversation` signature or any other component;
+- validate or interpret the scope value — it is an opaque host-supplied identifier, passed through.
+
+### Tier
+
+Tier 2. Shared-core (`ui-core-micha`) is excluded from the Tier-1 fast path by AGENTS.md regardless of
+diff size, so this one-line-of-logic change gets a WO, Codex-first, and a mandatory independent review.
+
+### Tests to WRITE (scoped — run only these)
+
+Extend `tests/messagingDirectMessageLauncher.test.jsx`:
+
+1. **per-candidate scope wins** — candidates `[{id: 2, display_name: 'Alex', scope: 'scope-a'}, {id: 3,
+   display_name: 'Sam', scope: 'scope-b'}]`, launcher `scope="scope-prop"`; select Sam, start; assert
+   `createDirectConversation` called with `{target_user_id: 3, scope: 'scope-b'}`.
+2. **fallback to the prop** (regression) — a candidate without its own `scope` in the same mixed list
+   still sends the prop's scope.
+3. **neither present** — no `scope` key in the payload (`expect(Object.keys(payload)).toEqual(
+   ['target_user_id'])` or equivalent — asserting absence, not `undefined`).
+
+The three existing tests in that file must keep passing unchanged; they are the backward-compatibility
+proof and must not be edited to accommodate the change.
+
+Command: `pnpm vitest run tests/messagingDirectMessageLauncher.test.jsx`
+
+### Release
+
+One version bump `2.19.0` → **`2.20.0`** (minor: additive, backward-compatible) + npm publish at WO end.
+jg-ferien MSG-6 pins this version, so the publish is the precondition for that WO's final test run.
+Per `reference_dcm_ucm_publish_topology`: publish-from-main, and the target version must be verified
+live on the registry before jg bumps its pin.
+
+### Risks
+
+Low. The one real trap is the "absent/absent" row above — a naive `scope: candidate.scope ?? scope`
+inside the object literal would start sending `scope: undefined`, which serialises differently and
+changes an existing contract. Build the payload conditionally, as the current code already does.
+
+### Execution directive
+
+**If you are the implementer reading this as your own spec, this section is not addressed to you — it
+tells the Orchestrator how to invoke you. You ARE that invocation: do not shell out to `codex exec`.**
+
+Orchestrator: implement through `codex exec` in the background, invoked **directly via Bash** (never the
+`debugger`/`*_coder` Agent wrappers), with **both** flags `--skip-git-repo-check` and
+`--dangerously-bypass-approvals-and-sandbox`, the WO passed as a positional argument from this committed
+file. Fall back to direct Claude implementation only on Codex quota / rate-limit / non-zero exit; if the
+fallback is used the Orchestrator becomes author and an independent `reviewer` is mandatory.
+
+### Mini-handover (pastable)
+
+Orchestrator: implement `work-orders/MSG-3e.md` in `ui-core-micha` (main). `git pull` first, read the WO,
+then follow `orchestrate-codex` (Codex-first, own independent review, publish 2.20.0 at WO end).
+
+---
+
+## Part B — Implementation map (Orchestrator)
+
+**Single chunk.** **Target repo working directory:** `C:\Users\Micha Bigler\Documents\webapps\ui-core-micha`
+(repo root). Work from this package; open only the named files to verify.
+
+### The one file that changes
+
+`src/messaging/DirectMessageLauncher.jsx` — 96 lines, whole file is in scope but only `start()` and one
+derivation change.
+
+Current state (verified while scoping, do not re-derive):
+
+- `:25` — `export function DirectMessageLauncher({ candidates = [], scope, onOpen })`.
+- `:31` — the component tracks **only** `selectedId`, never the selected candidate object. A lookup is
+  therefore needed; mirror the pattern jg already uses in its own `AllGroupsLauncher`
+  (`jg-ferien/frontend/src/pages/messaging/AllGroupsLauncher.jsx:40-44`):
+  `const selectedCandidate = useMemo(() => candidates.find((c) => c.id === selectedId) || null,
+  [candidates, selectedId]);` — `useMemo` is not yet imported in this file (`:1` imports `useId, useState`).
+- `:44-60` — `start()`; the payload is built at `:49-52`:
+  ```js
+  const conversation = await openDirectConversation({
+    target_user_id: selectedId,
+    ...(scope == null ? {} : { scope }),
+  });
+  ```
+  This spread-or-nothing shape is the invariant the third test pins: when there is no scope the key is
+  **absent**, not `undefined`. Keep the shape; only the value fed into it changes:
+  `const effectiveScope = selectedCandidate?.scope ?? scope;` then `...(effectiveScope == null ? {} :
+  { scope: effectiveScope })`. `??` (not `||`) so a falsy-but-valid scope id survives.
+- `:75-82` — the `ListItemButton` render loop; **do not** change it. Candidate rendering already falls
+  back through `display_name || name || label || id` and the scope must not appear in the UI.
+
+### Invariants / do-not-touch
+
+- `extractApiErrorMessage` error path (`:55-59`) and the `starting` guard stay exactly as they are.
+- `openDirectConversation` comes from `useMessaging()` (`:19, :27`) — its signature is dcm's contract,
+  unchanged.
+- `src/index.js:72` already exports the component; no export change.
+- No new i18n keys (`MessagingDirect.*` set is complete for this change).
+
+### Docs
+
+`docs/messaging-deviations.md` currently has zero BLOCKED entries (MSG-3d closed them) — this WO adds no
+deviation and must not add a row. If the repo carries a prop-level API note for this component, update it;
+if not, do not invent a docs file.
+
+### Progress contract
+
+Emit a `PLAN: …` line first, then a single-line `PROGRESS: [n/total] <action>` before every relevant
+action and `… done` on completion, no gap > ~2 min, unbuffered stdout, and exactly one final
+`RESULT: DONE|BLOCKED <reason>`.
+
+### Constraints for the implementer
+
+The WO text is the COMPLETE spec. Read `AGENTS.md` and `.codex/skills/frontend-engineering` only for
+conventions. Stay in scope. Do not touch the Core-Behaviour approval surfaces. Do not update `MEMORY.md`.
+Do **not** `git add/commit/push` — leave the diff for the Orchestrator's review. Do **not** bump the
+version or publish — the Orchestrator owns the release. WRITE the three tests above and RUN ONLY that one
+test file; no full suite, no self-review — the Orchestrator owns the authoritative run and the
+independent review, and those are the gate.