@micha.bigler/ui-core-micha 2.23.0 → 2.25.0

package/src/messaging/MessageBubble.jsx

@@ -136,7 +136,13 @@ export function MessageBubble({ message, replyTo, conversation, onReply, onJumpT
           </Stack>}
         </Stack>
       </Paper>
-      {!deleted && (reactions.length > 0 || reactionPickerVisible) && <ReactionBar message={message} expanded={reactionPickerVisible} onExpandedChange={setReactionPickerVisible} sx={{ mt: -0.5, ml: 0.75, position: 'relative', zIndex: 1 }} />}
+      {/* A small positive gap, not the negative-margin "peek from the bottom
+          edge" trick this used to have -- that pull was tuned against a
+          plain text line and read as an unnatural collision once the
+          bubble's actual bottom content became variable (an attachment
+          row's bordered Button, or MSG-6g's poll bars), both visually
+          boxier than text and closer to the bubble's edge. */}
+      {!deleted && (reactions.length > 0 || reactionPickerVisible) && <ReactionBar message={message} expanded={reactionPickerVisible} onExpandedChange={setReactionPickerVisible} sx={{ mt: 0.5, ml: 0.75 }} />}
       <Menu anchorEl={menuAnchor} open={Boolean(menuAnchor)} onClose={closeMenu}>
         <MenuItem onClick={startReply}>{t('MessagingThread.REPLY')}</MenuItem>
         <MenuItem onClick={startReact}>{t('MessagingReactions.ADD')}</MenuItem>

package/src/messaging/PollCard.jsx

@@ -45,7 +45,18 @@ export function PollCard({ message, canClose: canCloseProp }) {
   const closed = Boolean(poll.closed_at);
   const creatorId = poll.created_by_id ?? poll.created_by?.id ?? poll.created_by;
   const canClose = canCloseProp ?? poll.can_close ?? message?.can_close ?? message?.permissions?.can_close ?? (creatorId != null && creatorId === currentUser?.id);
-  const totalVotes = (poll.options || []).reduce((sum, option) => sum + (option.vote_count ?? option.voters?.length ?? 0), 0);
+  // Percentage denominator (MSG-6i): the number of distinct people who
+  // answered this poll, not sum(vote_count) across options. For a
+  // multi-select poll one person can vote for several options, so summing
+  // vote_count can exceed the actual respondent count -- dividing by that
+  // inflated sum understated everyone's percentage and the bars didn't sum
+  // to a sensible 100%. dcm's serialize_poll always includes each option's
+  // `voters` (a list of user ids, ungated -- unlike messaging read
+  // receipts); the union across all options is exactly "everyone who
+  // answered", computed client-side, no backend change. This deliberately
+  // reverses MSG-6g's own explicit non-goal ("denominator = votes cast, not
+  // participant count") -- an operator-confirmed correction, not a revert.
+  const respondentCount = new Set((poll.options || []).flatMap((option) => option.voters || [])).size;
 
   const tap = async (id) => {
     if (closed) return;
@@ -87,25 +98,29 @@ export function PollCard({ message, canClose: canCloseProp }) {
     // is no user-directory endpoint (same structural limit already
     // established for the DM candidate list).
     const voteCount = option.vote_count ?? option.voters?.length ?? 0;
-    const percent = totalVotes > 0 ? Math.round((voteCount / totalVotes) * 100) : 0;
+    const percent = respondentCount > 0 ? Math.round((voteCount / respondentCount) * 100) : 0;
     const votedByMe = selected.includes(option.id);
     const resultText = t('MessagingPoll.OPTION_RESULT', { count: voteCount, percent });
     // The bar is decorative; count/percent live in the accessible name (via
     // aria-label on the control itself) as well as in adjacent visible text —
     // width alone must never be the only signal (WO risk note).
     const accessibleLabel = `${option.text || option.label}, ${resultText}${votedByMe ? `, ${t('MessagingPoll.YOU_VOTED')}` : ''}`;
-    const richLabel = <Stack sx={{ flex: 1, minWidth: 0, opacity: pending.has(option.id) ? 0.6 : 1 }} spacing={0.25}>
+    // MSG-6i scope B: "airier, not wider" (operator, after seeing a
+    // screenshot of the checkbox/text/percent squeezed onto one tight line
+    // with a thin bar close to the text) -- more internal spacing/a taller
+    // bar, not a wider bubble (MessageBubble.jsx's maxWidth is untouched).
+    const richLabel = <Stack sx={{ flex: 1, minWidth: 0, opacity: pending.has(option.id) ? 0.6 : 1 }} spacing={0.75}>
       <Stack direction="row" justifyContent="space-between">
         <Typography variant="body2" noWrap>{option.text || option.label}</Typography>
         <Typography variant="caption" color="text.secondary">{resultText}</Typography>
       </Stack>
-      <LinearProgress variant="determinate" value={percent} sx={{ borderRadius: 1, height: 6 }} color={votedByMe ? 'primary' : 'inherit'} />
+      <LinearProgress variant="determinate" value={percent} sx={{ borderRadius: 1, height: 8 }} color={votedByMe ? 'primary' : 'inherit'} />
     </Stack>;
     return { accessibleLabel, richLabel };
   };
   const formControlSx = { width: '100%', m: 0, alignItems: 'flex-start' };
 
-  return <Paper variant="outlined" sx={{ p: 1 }} aria-label={t('MessagingPoll.LABEL')}><Stack spacing={0.75}>
+  return <Paper variant="outlined" sx={{ p: 1.5 }} aria-label={t('MessagingPoll.LABEL')}><Stack spacing={1.5}>
     <Typography variant="subtitle2">{poll.question}</Typography>
     {poll.allow_multiple
       ? (poll.options || []).map((option) => {

package/src/messaging/Thread.jsx

@@ -139,10 +139,21 @@ export function Thread({ conversationId, onReplyTargetChange, canModerateMessage
     setOpenThreads((current) => ({ ...current, [root.id]: !current[root.id] }));
   };
   return (
-    <Stack spacing={1} sx={{ minWidth: 0 }}>
+    // flex: 1, minHeight: 0 (here and on the scroll Box below): lets Thread
+    // shrink to fit when a host embeds it inside a fixed-height flex-column
+    // layout (e.g. header + Thread + Composer all fitting one screen, no
+    // page-level scroll) -- a flex item's default min-height is 'auto',
+    // which refuses to shrink below content size without this. Both
+    // properties are no-ops outside a flex context, so a host that doesn't
+    // flex-wrap Thread sees no behaviour change at all; maxHeight below
+    // still caps growth the same as before for that case (MSG-18, found
+    // while investigating why jg-ferien's Composer rendered behind its
+    // mobile bottom nav -- Thread's own fixed 560px cap never shrank for a
+    // short mobile viewport, no matter how the host's own layout was fixed).
+    <Stack spacing={1} sx={{ minWidth: 0, flex: 1, minHeight: 0 }}>
       {error && <Alert severity="error" role="alert">{error}</Alert>}
       {replyingTo && <Alert severity="info" onClose={() => { setReplyingTo(null); onReplyTargetChange?.(null); }}>{t('MessagingThread.REPLYING_TO', { sender: replyingTo.sender?.display_name || t('MessagingThread.UNKNOWN_SENDER') })}</Alert>}
-      <Box ref={scrollRef} onScroll={onScroll} sx={{ maxHeight: 560, overflowY: 'auto', overflowX: 'hidden', px: 0.5 }} aria-label={t('MessagingThread.TIMELINE')}>
+      <Box ref={scrollRef} onScroll={onScroll} sx={{ flex: 1, minHeight: 0, maxHeight: 560, overflowY: 'auto', overflowX: 'hidden', px: 0.5 }} aria-label={t('MessagingThread.TIMELINE')}>
         {cache.cursors.messages[conversationId] && <Box textAlign="center" py={1}><Button onClick={loadOlder} disabled={loadingOlder}>{loadingOlder ? <CircularProgress size={18} /> : t('MessagingThread.LOAD_OLDER')}</Button></Box>}
         {/* Only show the initial-load spinner when there's nothing to show yet
             — re-opening a conversation whose messages are already cached (an

package/tests/messagingCompactBubble.test.jsx

@@ -56,7 +56,9 @@ describe('compact message bubbles', () => {
     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);
+    // MSG-6h: a non-image attachment's visible content is now its filename +
+    // a file icon (the download semantics live in the accessible name).
+    await waitFor(() => expect(screen.getByText('notes.pdf')).toBeTruthy());
+    expect(container.querySelector('.MuiPaper-root').contains(screen.getByText('notes.pdf'))).toBe(true);
   });
 });

package/tests/messagingComposerChunk5.test.jsx

@@ -90,10 +90,13 @@ describe('Composer chunk 5 behavior', () => {
   });
 
   it('inserts the selected emoji at the current cursor position', async () => {
+    // MSG-6i: the Composer's own picker is now a wider curated grid
+    // (IconButton per emoji), decoupled from ReactionBar's 5-entry
+    // QUICK_EMOJIS -- role is "button", not "menuitem".
     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: '👍' }));
+    fireEvent.click(await screen.findByRole('button', { name: '👍' }));
     await waitFor(() => expect(messageInput().value).toBe('ab👍CD'));
   });
 

package/tests/messagingMsg6h.test.jsx

@@ -0,0 +1,136 @@
+// @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 && Object.keys(options).length ? `${key}:${JSON.stringify(options)}` : key }) }));
+vi.mock('../src/notifications/realtime', () => ({ useRealtime: () => ({ subscribe: () => () => {}, onReconnect: () => () => {} }) }));
+
+import { AttachmentList } from '../src/messaging/AttachmentList';
+import { AuthContext } from '../src/auth/AuthContext';
+import { MessageBubble } from '../src/messaging/MessageBubble';
+import { MessagingProvider } from '../src/messaging/MessagingProvider';
+
+const imageAttachment = { id: 'att-1', filename: 'vacation-photo.jpg', content_type: 'image/jpeg' };
+const fileAttachment = { id: 'att-2', filename: 'Report.pdf', content_type: 'application/pdf' };
+const fallbackAttachment = { id: 'att-3', content_type: 'application/pdf' }; // no filename -- pre-MSG-12 dcm pin
+
+function makeApi(overrides = {}) {
+  return {
+    listConversations: vi.fn().mockResolvedValue({ results: [] }), listMessages: vi.fn().mockResolvedValue({ results: [] }),
+    getUnreadCount: vi.fn().mockResolvedValue({ unread_count: 0, by_conversation: {} }),
+    getAttachment: vi.fn().mockResolvedValue(new Blob(['full-bytes'], { type: 'image/jpeg' })),
+    getAttachmentThumbnail: vi.fn().mockResolvedValue(new Blob(['thumb-bytes'], { type: 'image/jpeg' })),
+    ...overrides,
+  };
+}
+
+afterEach(cleanup);
+
+describe('MSG-6h: attachment gallery (thumbnail/lightbox/right-click download)', () => {
+  it('1. an image attachment renders a thumbnail; clicking it opens a lightbox showing the full image', async () => {
+    const api = makeApi();
+    render(<MessagingProvider api={api} active={false}><AttachmentList attachments={[imageAttachment]} /></MessagingProvider>);
+    const thumbnail = await screen.findByLabelText(/MessagingAttachments\.PREVIEW/);
+    await waitFor(() => expect(api.getAttachmentThumbnail).toHaveBeenCalledWith('att-1'));
+
+    fireEvent.click(thumbnail);
+    await waitFor(() => expect(api.getAttachment).toHaveBeenCalledWith('att-1'));
+    const lightboxImage = await screen.findByAltText('vacation-photo.jpg');
+    expect(lightboxImage.tagName).toBe('IMG');
+  });
+
+  it('2. right-clicking an image attachment opens a context menu with Download; selecting it downloads', async () => {
+    const api = makeApi();
+    const clickSpy = vi.spyOn(HTMLAnchorElement.prototype, 'click').mockImplementation(() => {});
+    render(<MessagingProvider api={api} active={false}><AttachmentList attachments={[imageAttachment]} /></MessagingProvider>);
+    const thumbnail = await screen.findByLabelText(/MessagingAttachments\.PREVIEW/);
+
+    fireEvent.contextMenu(thumbnail);
+    const downloadItem = await screen.findByText('MessagingAttachments.DOWNLOAD_ACTION');
+    fireEvent.click(downloadItem);
+    await waitFor(() => expect(api.getAttachment).toHaveBeenCalledWith('att-1'));
+    expect(clickSpy).toHaveBeenCalled();
+    clickSpy.mockRestore();
+  });
+
+  it('3. a non-image attachment renders a file indicator, not a broken image; clicking it downloads directly', async () => {
+    const api = makeApi();
+    const clickSpy = vi.spyOn(HTMLAnchorElement.prototype, 'click').mockImplementation(() => {});
+    render(<MessagingProvider api={api} active={false}><AttachmentList attachments={[fileAttachment]} /></MessagingProvider>);
+    const target = screen.getByLabelText('MessagingAttachments.DOWNLOAD:{"name":"Report.pdf"}');
+    expect(target.querySelector('img')).toBeNull();
+    expect(screen.getByText('Report.pdf')).toBeTruthy();
+
+    fireEvent.click(target);
+    await waitFor(() => expect(api.getAttachment).toHaveBeenCalledWith('att-2'));
+    expect(clickSpy).toHaveBeenCalled();
+    clickSpy.mockRestore();
+    // No lightbox for a non-image -- nothing to preview.
+    expect(screen.queryByRole('dialog')).toBeNull();
+  });
+
+  it('4. nameOf prefers attachment.filename when present, falls back to attachment.id when absent (pre-MSG-12 dcm interop)', () => {
+    render(<MessagingProvider api={makeApi()} active={false}><AttachmentList attachments={[fileAttachment, fallbackAttachment]} /></MessagingProvider>);
+    expect(screen.getByText('Report.pdf')).toBeTruthy();
+    expect(screen.getByText('att-3')).toBeTruthy();
+  });
+
+  it('6. the lightbox itself has a Download action -- reachable without a right-click, closing an accessibility regression (touch/keyboard users could not download an image otherwise)', async () => {
+    const api = makeApi();
+    const clickSpy = vi.spyOn(HTMLAnchorElement.prototype, 'click').mockImplementation(() => {});
+    render(<MessagingProvider api={api} active={false}><AttachmentList attachments={[imageAttachment]} /></MessagingProvider>);
+    const thumbnail = await screen.findByLabelText(/MessagingAttachments\.PREVIEW/);
+    fireEvent.click(thumbnail);
+    await screen.findByAltText('vacation-photo.jpg');
+    api.getAttachment.mockClear();
+
+    const downloadButton = screen.getByLabelText('MessagingAttachments.DOWNLOAD_ACTION');
+    fireEvent.click(downloadButton);
+    await waitFor(() => expect(api.getAttachment).toHaveBeenCalledWith('att-1'));
+    expect(clickSpy).toHaveBeenCalled();
+    clickSpy.mockRestore();
+  });
+
+  it('7. the lightbox shows a loading state while the full image fetches, and an error state if the fetch fails', async () => {
+    let resolveFetch;
+    const api = makeApi({ getAttachment: vi.fn(() => new Promise((resolve) => { resolveFetch = resolve; })) });
+    render(<MessagingProvider api={api} active={false}><AttachmentList attachments={[imageAttachment]} /></MessagingProvider>);
+    const thumbnail = await screen.findByLabelText(/MessagingAttachments\.PREVIEW/);
+
+    fireEvent.click(thumbnail);
+    await screen.findByLabelText('MessagingAttachments.LOADING_PREVIEW');
+    expect(screen.queryByAltText('vacation-photo.jpg')).toBeNull();
+
+    resolveFetch(new Blob(['bytes'], { type: 'image/jpeg' }));
+    await screen.findByAltText('vacation-photo.jpg');
+    expect(screen.queryByLabelText('MessagingAttachments.LOADING_PREVIEW')).toBeNull();
+  });
+
+  it('8. a failed full-image fetch shows a visible error, not a silent no-op', async () => {
+    const api = makeApi({ getAttachment: vi.fn().mockRejectedValue(new Error('network error')) });
+    render(<MessagingProvider api={api} active={false}><AttachmentList attachments={[imageAttachment]} /></MessagingProvider>);
+    const thumbnail = await screen.findByLabelText(/MessagingAttachments\.PREVIEW/);
+
+    fireEvent.click(thumbnail);
+    await screen.findByRole('alert');
+    expect(screen.getByRole('alert').textContent).toBe('MessagingAttachments.PREVIEW_ERROR');
+  });
+
+  it('5. the attachment context menu does not also trigger the message-level action menu', async () => {
+    const api = makeApi();
+    render(
+      <AuthContext.Provider value={{ user: { id: 1 } }}>
+        <MessagingProvider api={api} active={false}>
+          <MessageBubble message={{ id: 'm1', body: 'see attached', sender: { id: 1 }, attachments: [imageAttachment] }} conversation={{ kind: 'group' }} canModerateMessages />
+        </MessagingProvider>
+      </AuthContext.Provider>,
+    );
+    const thumbnail = await screen.findByLabelText(/MessagingAttachments\.PREVIEW/);
+
+    fireEvent.contextMenu(thumbnail);
+    await screen.findByText('MessagingAttachments.DOWNLOAD_ACTION');
+    // The message-level menu's own items (e.g. Reply) must not also be open.
+    expect(screen.queryByText('MessagingThread.REPLY')).toBeNull();
+  });
+});

package/tests/messagingMsg6i.test.jsx

@@ -0,0 +1,129 @@
+// @vitest-environment jsdom
+import React from 'react';
+import { afterEach, describe, expect, it, vi } from 'vitest';
+import { cleanup, fireEvent, render, screen, waitFor, within } from '@testing-library/react';
+
+vi.mock('react-i18next', () => ({ useTranslation: () => ({ t: (key, options) => options && Object.keys(options).length ? `${key}:${JSON.stringify(options)}` : key }) }));
+vi.mock('../src/notifications/realtime', () => ({ useRealtime: () => ({ subscribe: () => () => {}, onReconnect: () => () => {} }) }));
+
+import { AttachmentList } from '../src/messaging/AttachmentList';
+import { AuthContext } from '../src/auth/AuthContext';
+import { Composer } from '../src/messaging/Composer';
+import { MessagingProvider } from '../src/messaging/MessagingProvider';
+import { PollCard } from '../src/messaging/PollCard';
+import { QUICK_EMOJIS } from '../src/messaging/ReactionBar';
+import { Thread } from '../src/messaging/Thread';
+
+function makeApi(overrides = {}) {
+  return {
+    listConversations: vi.fn().mockResolvedValue({ results: [] }), listMessages: vi.fn().mockResolvedValue({ results: [] }),
+    getUnreadCount: vi.fn().mockResolvedValue({ unread_count: 0, by_conversation: {} }),
+    getAttachment: vi.fn().mockResolvedValue(new Blob(['bytes'], { type: 'image/jpeg' })),
+    getAttachmentThumbnail: vi.fn().mockResolvedValue(new Blob(['thumb'], { type: 'image/jpeg' })),
+    createMessage: vi.fn(), uploadAttachments: vi.fn(),
+    ...overrides,
+  };
+}
+
+afterEach(cleanup);
+
+describe('MSG-6i: attachment tile size, poll spacing/denominator, Composer emoji picker', () => {
+  it('1. an attachment tile renders at 120x120 (image and non-image)', async () => {
+    const image = { id: 'a1', filename: 'photo.jpg', content_type: 'image/jpeg' };
+    const file = { id: 'a2', filename: 'doc.pdf', content_type: 'application/pdf' };
+    render(<MessagingProvider api={makeApi()} active={false}><AttachmentList attachments={[image, file]} /></MessagingProvider>);
+    const tiles = await screen.findAllByRole('button');
+    const gallery = tiles.filter((tile) => tile.getAttribute('title') === 'photo.jpg' || tile.getAttribute('title') === 'doc.pdf');
+    expect(gallery).toHaveLength(2);
+    gallery.forEach((tile) => {
+      // MUI applies `sx={{ width, height }}` via a generated CSS class, not
+      // an inline style attribute -- read the resolved value instead.
+      expect(getComputedStyle(tile).width).toBe('120px');
+      expect(getComputedStyle(tile).height).toBe('120px');
+    });
+  });
+
+  it('2. poll percentage denominator is the count of distinct respondents, not sum(vote_count) -- must fail against the old sum(vote_count) code for a multi-select poll where one voter picked two options', () => {
+    // One respondent (voter-1) voted for both options. sum(vote_count) = 2,
+    // respondent count = 1. Old code: 1/2 = 50% each. New code: 1/1 = 100% each.
+    const poll = {
+      id: 'poll-1', question: 'Q', allow_multiple: true, closed_at: null,
+      options: [
+        { id: 'opt-a', text: 'A', order: 0, vote_count: 1, voters: ['voter-1'] },
+        { id: 'opt-b', text: 'B', order: 1, vote_count: 1, voters: ['voter-1'] },
+      ],
+    };
+    render(<MessagingProvider api={makeApi()} active={false}><PollCard message={{ id: 'msg-1', poll }} /></MessagingProvider>);
+    const results = screen.getAllByText(/MessagingPoll\.OPTION_RESULT/);
+    expect(results).toHaveLength(2);
+    results.forEach((node) => {
+      expect(node.textContent).toMatch(/"count":1/);
+      expect(node.textContent).toMatch(/"percent":100/);
+    });
+  });
+
+  it('3. poll percentage denominator: zero respondents still renders 0%, never NaN (no regression)', () => {
+    const poll = {
+      id: 'poll-2', question: 'Q', allow_multiple: false, closed_at: null,
+      options: [
+        { id: 'opt-a', text: 'A', order: 0, vote_count: 0, voters: [] },
+        { id: 'opt-b', text: 'B', order: 1, vote_count: 0, voters: [] },
+      ],
+    };
+    render(<MessagingProvider api={makeApi()} active={false}><PollCard message={{ id: 'msg-2', poll }} /></MessagingProvider>);
+    const results = screen.getAllByText(/MessagingPoll\.OPTION_RESULT/);
+    results.forEach((node) => {
+      expect(node.textContent).toMatch(/"count":0/);
+      expect(node.textContent).toMatch(/"percent":0/);
+      expect(node.textContent).not.toMatch(/NaN/);
+    });
+  });
+
+  it('4. the Composer emoji picker shows more than 5 options (the wider curated grid, not ReactionBar\'s QUICK_EMOJIS)', async () => {
+    const api = makeApi();
+    render(<MessagingProvider api={api} active={false}><Composer conversationId={4} /></MessagingProvider>);
+    fireEvent.click(screen.getByRole('button', { name: 'MessagingComposer.ADD_EMOJI' }));
+    const grid = await screen.findByRole('group', { name: 'MessagingComposer.EMOJI_PICKER' });
+    const emojiButtons = grid.querySelectorAll('button');
+    expect(emojiButtons.length).toBeGreaterThan(5);
+  });
+
+  it('4b. selecting an emoji from the Composer grid inserts it at the cursor position, not appended', async () => {
+    const api = makeApi();
+    render(<MessagingProvider api={api} active={false}><Composer conversationId={4} /></MessagingProvider>);
+    const input = screen.getByLabelText('MessagingComposer.MESSAGE');
+    fireEvent.change(input, { target: { value: 'abCD' } });
+    input.setSelectionRange(2, 2);
+    fireEvent.click(screen.getByRole('button', { name: 'MessagingComposer.ADD_EMOJI' }));
+    const grid = await screen.findByRole('group', { name: 'MessagingComposer.EMOJI_PICKER' });
+    fireEvent.click(within(grid).getByRole('button', { name: '😀' }));
+    await waitFor(() => expect(input.value).toBe('ab😀CD'));
+  });
+
+  it('5. ReactionBar\'s own QUICK_EMOJIS stays exactly 5, unaffected by the wider Composer picker', () => {
+    expect(QUICK_EMOJIS).toHaveLength(5);
+  });
+
+  it('6. Thread\'s root Stack and scroll Box carry flex:1/minHeight:0 (MSG-18 companion fix), so it can shrink inside a host\'s flex-column layout', async () => {
+    const api = makeApi({
+      listConversations: vi.fn().mockResolvedValue({ results: [{ id: 1, kind: 'group' }] }),
+      listMessages: vi.fn().mockResolvedValue({ results: [{ id: 2, conversation_id: 1, body: 'hi' }], next_cursor: null }),
+      listThread: vi.fn().mockResolvedValue({ results: [] }),
+      getReadStatus: vi.fn().mockResolvedValue({ all_read: true }),
+    });
+    render(
+      <AuthContext.Provider value={{ user: { id: 9 } }}>
+        <MessagingProvider api={api}><Thread conversationId={1} /></MessagingProvider>
+      </AuthContext.Provider>,
+    );
+    const timeline = await screen.findByLabelText('MessagingThread.TIMELINE');
+    // The scroll Box is a direct child of Thread's root Stack.
+    const rootStack = timeline.parentElement;
+    [timeline, rootStack].forEach((el) => {
+      expect(getComputedStyle(el).flexGrow).toBe('1');
+      expect(getComputedStyle(el).minHeight).toBe('0px');
+    });
+    // maxHeight stays as the fallback cap for a host that doesn't flex-wrap Thread.
+    expect(getComputedStyle(timeline).maxHeight).toBe('560px');
+  });
+});

package/work-orders/MSG-6h.md

@@ -0,0 +1,238 @@
+# WORK ORDER MSG-6h (ui-core-micha) — attachment gallery (thumbnail/lightbox/right-click download), reaction overlap
+
+**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`, prompt passed as a positional argument from this
+file. Fall back to direct Claude implementation only on Codex quota / rate-limit / non-zero exit.
+
+Feature-level WO (Expertenchat envelope). Operator report 2026-08-03 from a staging screenshot, seen
+now for the first time end-to-end because `django-core-micha` `MSG-10` just fixed attachment uploads
+(they were unconditionally rejected before — this display code has effectively never been exercised
+against a real upload on the platform path).
+
+## TIER
+Tier 2 — shared-core UI consumed by every app. Independent `reviewer` + `ui_reviewer` mandatory.
+
+## SCOPE
+
+**A. Attachment gallery.**
+
+Current state (`AttachmentList.jsx`): each attachment renders as a `Button` containing a 36×36px
+thumbnail (if the file is an image and its thumbnail loaded) plus a text label
+`t('MessagingAttachments.DOWNLOAD', { name: nameOf(attachment) })`. `nameOf` is
+`attachment.filename || attachment.name || attachment.id` — since dcm's `serialize_attachment` has
+never returned `filename` (see `django-core-micha` `work-orders/MSG-12.md`, its companion, fixing
+that), this **always** fell through to the raw UUID `id`. Clicking anywhere on the button downloads
+the file — there is no preview step.
+
+Operator's target shape, verbatim: *"bitte kleines Vorschaubild, bei Klick darauf grosse Vorschau,
+rechtsklick zum Kontextmenu mit Download (analog Whatsapp)"* — a small thumbnail; clicking it opens a
+large preview (lightbox); right-click opens a context menu with a download action.
+
+Build this:
+- **Image attachments**: small thumbnail (reuse the existing `getAttachmentThumbnail` fetch — already
+  wired). Click → a lightbox (MUI `Dialog` or `Modal`) showing the full-size image, fetched via the
+  existing `getAttachment` blob endpoint. Right-click (`onContextMenu`) → a small context menu (MUI
+  `Menu`, matching the pattern already used for message actions in `MessageBubble.jsx`) with a
+  Download action, calling the same download logic `AttachmentList` already has.
+- **Non-image attachments** (no thumbnail available): keep a compact file-type indicator (icon +
+  filename, once `MSG-12` supplies a real one) as the tap target; single click downloads directly
+  (there is nothing to preview) — right-click still offers the same context menu for consistency, even
+  though its one item duplicates the click action.
+- Filename: once `MSG-12` ships, `nameOf` should read the real `filename` first; keep the existing
+  `|| attachment.id` fallback for interop with a not-yet-bumped dcm pin (an older host may still be on
+  a dcm version that omits it) — never let a missing filename break rendering, just fall back visibly.
+- Keep the download-only design principle: bytes never touch anything but the existing authenticated
+  `getAttachment`/`getAttachmentThumbnail` blob fetches already in `MessagingProvider`. No new
+  endpoints, no new byte-handling path.
+
+**B. Reaction bar overlap.**
+
+`MessageBubble.jsx:139` renders `ReactionBar` as a sibling *after* the bubble's `Paper`, with
+`sx={{ mt: -0.5, ml: 0.75, position: 'relative', zIndex: 1 }}` — a small negative top margin
+deliberately pulls it up to overlap the bubble's bottom edge (a common "chip peeking out" treatment).
+Operator report: this overlap now reads as broken/unnatural, screenshotted on a message that has
+attachments — worth checking specifically whether the fixed `-0.5` offset was tuned against a
+plain-text bubble and no longer sits right against the bottom of an attachment row or (from `MSG-6g`)
+a poll's result bars, both of which changed the bubble's actual bottom content since this offset was
+last touched.
+
+**Live-verify against the operator's original screenshot before considering this closed** — the
+Orchestrator does not have staging credentials this round; if a local repro isn't conclusive, say so
+and ask the operator to confirm the fix visually rather than guessing further.
+
+## NON-GOALS / DO NOT TOUCH
+- Do not touch `PollCard.jsx`, `ReadTicks.jsx`, or conversation titles — unrelated recent WOs.
+- Do not add any new backend endpoint — scope A only consumes what already exists (plus `MSG-12`'s
+  additive `filename` field).
+- Do not change the reaction *toggle* logic (`ReactionBar.jsx`'s `react`/`pending` mechanics) — only
+  its positioning relative to the bubble, scope B.
+- Do not implement a generic lightbox/gallery component library dependency — build directly with MUI
+  primitives already used elsewhere in this codebase (`Dialog`, `Menu`), matching existing patterns.
+
+## RISKS
+- A right-click context menu on a message bubble already exists for message-level actions
+  (`MessageBubble.jsx`'s `openMenu`/`canOpenMenu`, triggered by `onContextMenu`). An attachment's own
+  right-click context menu must not fight with or accidentally trigger the message-level one when the
+  attachment sits inside the bubble — `event.stopPropagation()` where appropriate.
+- Lightbox must be keyboard-dismissable (Escape) and trap focus reasonably — it is a modal.
+- The thumbnail fetch already exists and works (`AttachmentList.jsx`'s current `useEffect`); reuse it,
+  don't re-invent — but the full-size lightbox fetch (`getAttachment`) is a new call path, verify it
+  doesn't double-fetch what the thumbnail effect already has cached.
+
+## REQUIRED TESTS TO WRITE
+Narrow and behavioural. Do NOT run the full suite.
+
+1. An image attachment renders a thumbnail; clicking it opens a lightbox showing the full image
+   (fetched via `getAttachment`).
+2. Right-clicking an image attachment opens a context menu with a Download action; selecting it
+   downloads (same assertion shape as the existing pre-redesign download test, if one exists — check).
+3. A non-image attachment (no `thumbnail_url`) renders a file indicator, not a broken image; clicking
+   it downloads directly.
+4. `nameOf` prefers `attachment.filename` when present, falls back to `attachment.id` when absent
+   (interop with a dcm pin that predates `MSG-12`) — assert both cases render without crashing.
+5. The attachment's own context menu does not also trigger the message-level action menu (no
+   double-open, no propagation leak) — regression guard given `MessageBubble.jsx` already has its own
+   `onContextMenu`.
+
+## TEST SCOPE FOR THE GATE (orchestrator)
+Attachment- and reaction-bar-adjacent messaging test files. Not the full suite.
+
+## TARGET REPO
+`C:\Users\biglmi\Documents\webapps\ui-core-micha`. Branch `main`. Publish per the repo's release flow;
+consuming pin bumps (jg-ferien, and `django-core-micha` `MSG-12` for the filename) are separate,
+subsequent steps — **but per standing feedback this session, do not report this WO as "done" until
+those consuming steps have actually landed**, not merely published.
+
+## MINI-HANDOVER (pastable)
+
+> Repo: `C:\Users\biglmi\Documents\webapps\ui-core-micha` (branch `main`). Work order:
+> `work-orders/MSG-6h.md` — read it fully, then follow the `orchestrate-codex` skill.
+>
+> Two independent scopes, both operator-reported live on staging: (A) `AttachmentList.jsx` needs a
+> real thumbnail-click-lightbox / right-click-download-menu gallery, WhatsApp-style, instead of a bare
+> download button showing a raw UUID (the UUID-fallback root cause is fixed separately in
+> `django-core-micha` `MSG-12`, a companion WO — consume its new `filename` field with a graceful
+> fallback for an older pin). (B) `MessageBubble.jsx:139`'s `ReactionBar` has a fixed `mt: -0.5`
+> negative-margin overlap trick that now reads as visually broken against certain bubble content
+> (attachments, and possibly `MSG-6g`'s poll bars) — investigate and fix, but flag if it needs a live
+> staging screenshot to confirm rather than guessing blind.
+
+## PROGRESS CONTRACT
+Emit `PLAN: <steps>` up front, then a single-line `PROGRESS: [<n>/<total>] <action>` before every
+relevant action and `PROGRESS: [<n>/<total>] done` on completion, spaced so no gap exceeds ~2 min,
+stdout unbuffered, and exactly one final `RESULT: DONE|BLOCKED <reason>`.
+
+---
+
+## Part B — Implementation map (Orchestrator) / as-built record
+
+**Codex was unavailable (out of credits) — implemented directly by the Orchestrator.**
+
+### Scope A — `src/messaging/AttachmentList.jsx` (full rewrite)
+
+- Each attachment is now a 64×64 `ButtonBase` tile (not a full-width text button): an image
+  attachment shows its existing thumbnail fetch (unchanged `getAttachmentThumbnail` `useEffect`,
+  reused verbatim); a non-image attachment shows a generic file icon +
+  filename (`InsertDriveFileOutlinedIcon`).
+- Click: image → `openLightbox` (fetches the full-resolution blob via the existing `getAttachment`,
+  cached per-attachment in a `fullUrlCacheRef` so a re-open within the same mount doesn't re-fetch);
+  non-image → `download` (unchanged logic, just relocated).
+- Right-click (`onContextMenu`): opens a MUI `Menu` (anchored to click position) with one Download
+  item, for both image and non-image attachments. `event.stopPropagation()` inside the handler stops
+  it from also reaching `MessageBubble.jsx`'s own bubble-level `onContextMenu` (verified with a
+  dedicated regression test, item 5 below).
+- Lightbox: a MUI `Dialog` with the full image + a close `IconButton` (also closes via the Dialog's
+  own backdrop-click/Escape handling, native to MUI).
+- `nameOf(attachment)` unchanged in shape (`filename || name || id`), now actually resolves to a real
+  name once the host's dcm pin includes `MSG-12`; falls back to `id` for an older pin (test 4).
+- 3 new i18n keys: `MessagingAttachments.PREVIEW`, `.CLOSE_PREVIEW`, `.DOWNLOAD_ACTION`. Existing
+  `.LABEL`/`.DOWNLOAD` kept — `.DOWNLOAD` is now also the accessible name for a non-image tile (no
+  visible "Download X" text on it any more, per the new compact-tile design — updated one pre-existing
+  test in `messagingCompactBubble.test.jsx` that asserted on the old visible text).
+
+### Scope B — `src/messaging/MessageBubble.jsx:139`
+
+- `ReactionBar`'s `sx` changed from `{ mt: -0.5, ml: 0.75, position: 'relative', zIndex: 1 }` to
+  `{ mt: 0.5, ml: 0.75 }` — a small **positive** gap instead of the negative-margin "peek from the
+  bubble's bottom edge" trick. That trick pulled the chip up into whatever sits immediately above it
+  in normal document flow, which used to always be plain text or the compact meta row; since MSG-6g
+  added poll bars and this WO's own gallery redesign changed the attachment row's height/borders, the
+  fixed offset started visually cutting into bordered, boxier content instead of text. Also dropped
+  `position: relative` / `zIndex: 1`, no longer needed without the overlap.
+- **Not independently visually re-verified against the operator's original staging screenshot** — no
+  staging credentials this round (same limitation noted when the ucm pin bump was last reported). The
+  fix is a conservative, low-risk "stop overlapping anything" change; flagging per the WO's own
+  instruction to say so rather than claim a live-confirmed fix.
+
+### Tests
+`tests/messagingMsg6h.test.jsx` (new) — the 5 WO-required cases. `tests/messagingCompactBubble.test.jsx`
+updated (pre-existing test asserted on now-removed visible DOWNLOAD text). No other existing test
+needed a change (`messagingComposer.test.jsx`'s AttachmentList smoke test only checked the outer
+`aria-label`, unaffected).
+
+### Verification (pre-review)
+Full suite 241 → 246 (5 new), `tsc` clean.
+
+### Independent review: `reviewer` + `ui_reviewer`, both mandatory (author = Orchestrator, not Codex)
+
+Both reviews converged on the same core gap from different angles — fixed together in one pass.
+
+**`reviewer` — 3 findings:**
+- **R1 (P2, real regression):** the pre-diff design let every attachment (image or not) download via a
+  direct click/Enter/Space on a plain `Button`. The redesign made an image's click open the lightbox
+  instead, which had only a Close button — the *only* way left to download an image was a real mouse
+  right-click, unreachable by keyboard or (with no long-press) touch. **Fixed**: the lightbox now has
+  its own Download `IconButton`, so download is reachable via click, Tab+Enter, or touch, without ever
+  needing the context menu.
+- **R2 (P2):** the new lightbox fetch had no loading or error state — a click gave no feedback until
+  the network round trip resolved, and a failure silently no-opped. **Fixed**: `lightbox.status`
+  (`'loading' | 'ready' | 'error'`) drives a `CircularProgress` while fetching and an `Alert` on
+  failure; a stale in-flight fetch (opened, then a *different* attachment opened before the first
+  resolves) is guarded by comparing the resolved attachment's id against the current lightbox state
+  before applying the result.
+- **R3 (P3):** the lightbox `Dialog` had no accessible name. **Fixed**: `aria-label` on the `Dialog`
+  itself, set to the previewed attachment's name.
+
+Verified correct, no bug: object-URL lifecycle (no leak/double-revoke/revoke-while-displayed), the
+context-menu `stopPropagation` (traced against React's synthetic event dispatch + the dedicated test),
+no stale-closure risk in the menu's download handler, `fullUrlCacheRef` can't go stale across messages
+(`Thread.jsx` keys `MessageBubble` by `message.id`, always unmounts on swap), i18n coverage.
+
+**`ui_reviewer` — 6 findings:**
+- **U1 (P1, same root cause as R1):** touch users had no way to download an image at all (no
+  long-press implemented, lightbox had no download control). **Fixed by the same lightbox Download
+  button as R1** — one fix closes both findings.
+- **U2 (P2):** no visual affordance signals a tile is right-clickable, and right-click-for-download is
+  a non-obvious pattern without a fallback for a mouse user who doesn't know it. **Resolved by the R1/U1
+  fix, not a separate change**: right-click is no longer the *only* path to anything — an image is
+  fully reachable via primary click → lightbox → visible Download button, and a non-image already
+  downloads on primary click. Right-click remains a discoverable-if-you-know-it shortcut, not a
+  required, hidden one; adding a second, redundant hover-reveal affordance on top of an already-fully-
+  reachable primary interaction would be scope creep past what the finding's own root concern requires.
+- **U3 (P2):** a non-image tile's filename truncates in a 64px box with no way to recover the full name
+  before downloading. **Fixed**: `title={nameOf(attachment)}` on the tile (native browser tooltip on
+  hover).
+- **U4 (P3):** the French `PREVIEW` translation (`'Aperçu de {{name}}'`, noun-first) broke grammatical
+  parallelism with the sibling `DOWNLOAD`/`DOWNLOAD_ACTION` (verb-first). **Fixed**: `'Prévisualiser
+  {{name}}'`.
+- **U5 (P3):** the lightbox close button omitted the `boxShadow` the codebase's analogous floating-icon
+  pattern (`MessageBubble.jsx`'s hover-revealed `MoreVertIcon`) uses for contrast. **Fixed**: both the
+  new Download button and the Close button now carry `boxShadow: 1`.
+- **U6 (P3, not fixed, disclosed):** `openLightbox`'s failure path is a silent no-op if `getAttachment`
+  is bypassed some other way — the reviewer themselves noted this mirrors `download()`'s own
+  pre-existing silent-failure shape, not a new defect class. Left as-is, consistent with that existing
+  convention elsewhere in this component; R2's loading/error state above already covers the actual
+  reachable failure path (a real fetch rejection).
+
+### Not independently visually re-verified
+Scope B's `ReactionBar` spacing fix (`MessageBubble.jsx:145`) was not confirmed against the operator's
+original staging screenshot — no staging credentials this round. Both reviewers examined it by static
+code reading only and found the fix low-risk (a strict `mt` sign flip, no z-stacking or other side
+effect traced), but this is a judgment call, not a live-rendered confirmation. Flagging per the WO's
+own instruction rather than claiming a visual fix I have not actually seen.
+
+### Re-verification after all fixes
+Full suite 241 → 249 (8 new: 5 original + 3 closing R1/R2), `tsc` clean.