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

package/docs/messaging-deviations.md

@@ -1,36 +1,118 @@
-# Messaging deviations from jg
+# Messaging parity outcomes (MSG-3b, extended by MSG-3c)
 
-## Chunk 5 — reactions, polls and scope configuration
+This is the authoritative parity record for the ucm messaging surfaces. It
+replaces the former file-level “final parity confirmation,” which was not
+sufficient evidence of feature parity. Each entry maps directly to the
+numbered checklist in Part A of `work-orders/MSG-3b.md`. `OK` means the
+capability is present; `DEV` means an intentional, documented redesign or
+non-parity; `BLOCKED` means the dependency (dcm) does not expose the data or
+realtime contract needed to implement it truthfully.
 
-- Reactions use a compact set of common emoji choices plus the aggregate chips, rather than jg's full third-party emoji palette. Adding and toggling every reaction remains available through the same REST mutations; the shared package avoids a new picker dependency.
-- Poll creation is a Composer dialog instead of jg's Thread-coupled dialog. It retains question, two-or-more options and multiple-choice selection, while keeping composition independently mountable.
-- Poll results are rendered inline as an accessible option list with live aggregate counts. Closing is only offered when the serialized creator/capability allows it; a server-side 403 remains visible as a validation error.
-- Scope messaging configuration is an independently mountable component addressed by conversation id, rather than jg's event-id-specific settings panel. The host supplies placement and capability gating; it retains dm policy, group-chat enablement and everyone-can-post controls.
-- **Announcement composing (jg's `AnnouncementDialog.jsx`) was missing from the first chunk-5 pass — flagged by independent review and corrected before commit, not silently accepted as a gap.** `Composer` now offers an announcement mode (title + body + a host-supplied `link_target`) behind an `allowAnnouncement` prop, since whether to offer it at all is a host/capability decision the client cannot make on its own; only the target-link *value* is host-specific navigation context ucm cannot compute (jg pre-fills it from the currently open event-info section — same reasoning as `linkTarget`'s framing here). Uses the same `sendMessage`/`kind` plumbing chunk 1 already built, with `kind: 'announcement'`.
+**Binding rule, added by MSG-3c:** every `BLOCKED` entry below must name the
+dcm version it was verified blocked against. MSG-3b was itself blocked
+against dcm 2.36.1 and recorded seven rows as `BLOCKED` on "a future dcm work
+order" — dcm 2.37.0 shipped that work mid-flight, and MSG-3b's own WO-end
+review closed without noticing, because it cross-checked the checklist
+against ucm's landed code and took the dependency's state from the WO text
+instead of the live dependency. A version pin turns that re-check into a
+two-minute job instead of an archaeology exercise; `tests/messagingContractConformance.test.js`
+now fails the build if a `BLOCKED` line omits one.
 
-## Final parity confirmation
+## Unread lifecycle
 
-- The provider/cache, conversation list and launchers, timeline/replies/read ticks, composer/attachments/announcements, reactions, polls and scope configuration are all represented by exported ucm surfaces. Host routing and scope selection remain host responsibilities by design.
-- The known broadcast-list pre-open unread/preview gap is retained as the accepted Chunk 2 deviation.
-- Every jg messaging file named in the work order's parity inventory (`Thread.jsx`, `ConversationList.jsx`, `MessagingContext.jsx`, `AnnouncementDialog.jsx`, `MessagingConfig.jsx`, `NewDirectMessageDialog.jsx` — unblocked by MSG-2b, `messagingApi.js`, `EmojiPickerButton.jsx`, `conversationHelpers.js`, `MessagesPage.jsx`'s launcher behavior) is represented by an exported ucm surface or an explicitly named deviation above — this line was corrected during chunk 5's independent review, which is exactly the check it exists to catch.
+1. **OK** — Selecting a conversation calls the existing mark-read endpoint and clears its local unread count.
+2. **OK** — Opening a `Thread` also marks its conversation read; the duplicate call is idempotent.
+3. **OK** — Marking a conversation read decrements the global count by that conversation’s prior unread value, clamped at zero.
+4. **OK** — Expanding a reply thread calls the existing thread-read endpoint for its root message.
+5. **OK** — Realtime incoming messages increment unread only outside the active conversation and never double-count optimistic-send reconciliation.
 
-## Chunk 4 — composer and attachments
+## Message actions
 
-- The composer is an independently mountable provider collaborator and accepts the timeline's reply target as a small placement prop, instead of being coupled into jg's monolithic `Thread`. It preserves reply selection and clears that selection after a successful send.
-- Attachment previews are compact authenticated thumbnail fetches with explicit download actions rather than jg's gallery/lightbox. Preview and download retain viewer-gated byte access; the licensed interaction redesign avoids a second media-viewer state machine in this shared surface.
+6. **DEV** — Desktop hover and right-click open the MUI action menu. jg’s dedicated mobile long-press gesture is not reproduced; the same actions remain available through the regular MUI affordance.
+7. **OK** — Authors can edit their own messages inline. Moderator edit affordance is host-supplied because dcm exposes no per-viewer capability field; server authorization remains authoritative.
+8. **OK** — An active editor closes when the message is deleted by another update.
+9. **OK** — Authors and host-designated moderators can delete; the host boolean is UX gating only and dcm enforces the actual permission.
+10. **OK** — Deletion is confirmed in a MUI dialog before the request is sent.
+11. **OK** — A deleted reply/edit target clears dependent composer or editor state.
+12. **OK** — Message text can be copied through the action menu.
+13. **OK** — Reply targeting is present.
+14. **DEV** — Reactions use five compact presets rather than jg’s six-preset presentation.
+15. **DEV** — No full third-party emoji picker is added; the compact preset menu keeps the package dependency-free.
+16. **OK** — Deleted and poll messages do not render the generic action menu.
 
-## Chunk 3 — timeline, replies and receipts
+## Direct conversations
 
-- The timeline is split into `Thread`, `MessageBubble` and `ReadTicks`, with a simple expandable reply view rather than jg's coupled full-screen/thread-pane state. This preserves one-level reply viewing while allowing each surface to mount independently.
-- Reply selection is exposed through `onReplyTargetChange` rather than embedding a temporary composer. The next Composer surface consumes that context, avoiding a second compose state machine.
-- Older history automatically loads when the timeline reaches the top and also provides an explicit accessible button. Both use the server-issued opaque cursor; jg's timeline interaction is redesigned, not removed.
-- This chunk intentionally leaves reactions, polls and attachments as non-interactive count/type chips. Their existing jg capabilities are scheduled for chunks 4/5, rather than reproduced as disposable interaction implementations here.
-- Read ticks reproduce jg's `shouldShowReadTick(msg, isOwn)` semantics exactly: a `ReadTicks` collaborator is only mounted for the current user's own messages, matching jg's meaning of a read receipt (whether the sender's own message was seen) and bounding the number of `getMessageReadStatus` REST calls a rendered timeline fires to one per own message shown, not one per message in the conversation.
+17. **OK** — `DirectMessageLauncher` starts a direct conversation.
+18. **OK** — The launcher displays the host-supplied candidate list and selection state.
+19. **OK** — It has distinct empty and in-flight creation states; candidate discovery remains host-owned because dcm has no directory endpoint.
+20. **OK** — Start is disabled until a candidate is selected and during creation.
+21. **OK** — Policy rejections render an API-derived readable error in the dialog.
+22. **OK** — The picker uses a fullscreen MUI dialog at the small breakpoint.
 
-## Chunk 2 — conversation list and launchers
+## Threading and quoting
 
-- The list is a standalone, provider-backed component rather than receiving a conversation array and selection state from a page. This removes the page-owned messaging state machine while preserving selection through the host's `onOpen` placement callback.
-- Launchable group metadata is an explicit host-supplied `groupLaunchers` input, rather than jg's event-specific `listGroupsAvailable` request. The published dcm REST contract has no generic group-discovery endpoint; apps own scope pickers while ucm owns opening and surfacing the conversation.
-- Broadcast opening is exposed as `broadcastLauncher` plus `autoOpenBroadcast`, rather than inspecting jg's `?tab=broadcast` query itself. Routing/query parsing stays host-app scope; auto-*open* is reproduced once the host maps its route to that boolean.
-  - **Accepted deviation, not full parity:** jg's `MessagesPage.jsx` unconditionally fetches the broadcast conversation on every event load and pins it, with live unread count and message preview, at the top of the same recency-sorted unified list. ucm instead renders a static launcher button (no unread badge, no preview) until it is opened for the first time, at which point it becomes a normal list row with real unread/preview state and the launcher hides itself. Before that first open, a host relying on the broadcast conversation's unread state being visible without a click does not get it from ucm.
-- The layout and actions are redesigned as a compact MUI list with per-conversation overflow actions and explicit cursor “Load more,” replacing jg's page sidebar composition. Features retained here are unread indication, opening conversations, unopened-group launches, broadcast launch (see above for the surfacing gap), mute and archive. Per-kind row icon (group/broadcast/DM) is reproduced (jg's `getConversationAvatar`), using generic MUI icons rather than jg's per-kind avatar treatment (incl. the DM partner's actual `UserAvatar`) — the identification capability is kept, the specific visual is redesigned.
+23. **OK** — Both dcm’s `reply_to_id` and optimistic rows’ `reply_to` are read, so REST and realtime replies group under their root.
+24. **OK** — Replies show a sender and short quoted snippet.
+25. **OK** — Clicking a quote scrolls its source message into view.
+26. **OK** — Quotes of deleted messages render the deleted placeholder rather than stale content.
+27. **BLOCKED** (blocked as of dcm 2.37.0) — dcm writes a thread receipt but exposes no prior thread receipt state, unread flag, or unread count to read. A truthful cross-device unread-reply dot cannot be rendered without a dcm contract addition. Re-verified against 2.37.0 (MSG-3c): still absent. Waits on dcm `MSG-2d`.
+28. **OK** — Reply threads load lazily on expand and collapse locally.
+29. **DEV** — Reply composition is supplied through the independently mountable `Composer` target prop rather than jg’s per-thread embedded composer.
+
+## Composer
+
+30. **OK** — Enter sends and Shift+Enter preserves a newline.
+31. **OK** — Staged files show image thumbnails or file labels, with independent removal.
+32. **OK** — Attachment uploads show real byte-percentage progress when the browser reports an upload total; otherwise an indeterminate indicator is shown while the upload is in flight.
+33. **OK** — Images over 2 MB are compressed client-side to a maximum 2560 px JPEG at quality 0.85, with silent original-file fallback.
+34. **DEV** — Composer emoji insertion uses the existing compact preset set instead of jg’s full picker, while preserving insertion at the cursor.
+35. **OK** — Sending is optimistic and exposes retry plus inline error state.
+36. **OK** — The poll button is disabled while an image is staged as a UI convenience matching jg’s composer behavior; no dcm-side constraint requires it. Poll creation and attachment sending are separate API calls and separate message rows.
+37. **DEV** — Drafts are deliberately reset on conversation changes. jg’s cross-conversation draft leak is not reproduced.
+
+## Conversation list
+
+38. **OK** (delivered in MSG-3c, was BLOCKED as of dcm 2.36.1) — dcm 2.37.0 serializes `last_message` (`excerpt`/`created_at`) on the conversation payload and emits it live via `conversation_upsert` on new-message send. `ConversationList` was found reading the wrong field name (`last_message.body` instead of the real `excerpt`) — fixed, so the preview now actually renders against the real contract instead of always falling back to the empty state. Reorder and live preview refresh work for new messages; dcm does not publish `conversation_upsert` on message edit/delete, so those cases update on the next REST refresh rather than live (see row 58).
+39. **OK** — `last_message_at` renders through browser-native, locale-aware `Intl.RelativeTimeFormat` labels.
+40. **OK** — The existing MUI `selected={conversation.id === activeConversationId}` wiring produces the `Mui-selected` active-row highlight; it was verified and needs no redundant styling.
+41. **OK** — Unread badges and bold unread titles are present.
+42. **BLOCKED** (blocked as of dcm 2.37.0) — dcm stores the managed all/team distinction in `external_key`, but `serialize_conversation_core` still omits it from every conversation payload. The UI must not guess from titles or other unrelated fields. Re-verified against 2.37.0 (MSG-3c): still absent. Waits on dcm `MSG-2d`.
+43. **DEV** — Generic MUI kind icons replace jg’s richer per-kind/person avatar treatment while retaining type identification.
+44. **OK** — Mute and archive actions are present.
+
+## Timeline
+
+45. **OK** — New active-conversation messages auto-scroll when the reader was already near the bottom. Scrolled-up readers are not pulled away from history; this near-bottom gate is an intentional usability refinement.
+46. **OK** — Announcement messages render their deep-link action only when a host supplies `onAnnouncementLink`; routing remains a host-app responsibility.
+47. **OK** — Sender names remain visible for group and managed conversations and are suppressed in direct conversations. No sender-side bubble alignment scheme was added because it is not required for this capability.
+48. **OK** — Deleted tombstones, edited marker, and timestamps are rendered.
+
+## Read receipts
+
+49. **OK** — Read ticks mount only for the current user’s own persisted messages.
+50. **OK** — Non-direct recipient detail supplied by dcm is shown through a click/keyboard-openable popover list rather than hover-only tooltip. Direct conversations always suppress the detail control; dcm’s recipient-detail payload remains the moderator authorization boundary because no generic client moderator field exists.
+
+## Polls
+
+51. **OK** (delivered in MSG-3c, was BLOCKED as of dcm 2.36.1) — dcm 2.37.0's `serialize_poll` renders question, options and per-option `vote_count` through `PollCard`. Fixed against the real shape: the initial-selection effect previously read non-existent per-option `selected`/`voted` flags — it now derives from `voted_option_ids`, which dcm adds only to the create/vote/close REST responses (never to `serialize_poll` itself or the `poll_updated` frame), and correctly shows no known selection when that field is absent rather than guessing.
+52. **DEV** (delivered in MSG-3c, was BLOCKED as of dcm 2.36.1) — dcm 2.37.0's poll options carry `voters` as user ids only, never names, and there is no user-directory endpoint (the same structural limit already established for the DM candidate list, row 19). `PollCard` renders the vote count and marks the viewer's own vote (derived from `voted_option_ids`) rather than a per-voter name list, which the dependency cannot supply.
+53. **OK** (delivered in MSG-3c, was BLOCKED as of dcm 2.36.1) — `closed_at` is in the real poll projection; voting is disabled once set. The poll creator's close permission was found broken against the real contract (`created_by_id` is the real field; the prior code read a non-existent `created_by.id`) — fixed.
+54. **OK** — Composer starts at two options and disables adding options once it reaches ten; the server’s two-option minimum remains enforced.
+55. **OK** — Vote and close write paths are wired; full read rendering is now delivered per rows 51-53.
+
+## Live synchronization
+
+56. **OK** (delivered in MSG-3c, was BLOCKED as of dcm 2.36.1) — dcm 2.37.0 emits `reaction` frames. The handler had never run against a real frame; verification found it wholesale-replacing the message's reaction list with the server's aggregate-only projection (`{emoji, count}`, never a per-viewer `reacted` flag, by design) on every arrival — silently wiping every previously-known `reacted` flag on that message, not just whichever emoji changed. The same defect existed in the REST-confirm path for the viewer's own toggle. Both fixed to merge by emoji, preserving previously-known `reacted` state instead of discarding it.
+57. **OK** (delivered in MSG-3c, was BLOCKED as of dcm 2.36.1) — dcm 2.37.0 emits `poll_updated` frames. Same defect class as row 56, found while implementing row 51-53: the frame handler wholesale-replaced a message's `poll` object, silently dropping a REST-known `voted_option_ids` the moment any `poll_updated` frame arrived (e.g. a vote-count bump from another viewer). Fixed to carry the previous value forward when the incoming frame is silent about it, per the WO's explicit "must not clear or invert the viewer's own vote state" requirement.
+58. **OK** (delivered in MSG-3c, was BLOCKED as of dcm 2.36.1) — new messages live-reorder the conversation list and refresh its preview via `conversation_upsert` (row 38). dcm does not publish `conversation_upsert` on message edit or delete (only on new-message send — verified against every `_publish(..., "conversation_upsert", ...)` call site in `services.py`), so an edit/delete of a conversation's last message updates the preview on the next REST refresh rather than live; this is a dcm-side gap outside this WO's scope, not a ucm limitation.
+59. **OK** — dcm’s emitted message, message-edited, and message-deleted frames are handled live.
+
+## Required backend follow-up
+
+Rows 27 and 42 require a future dcm work order (`MSG-2d`): expose readable thread receipt state, and
+serialize `external_key` where managed all/team labeling is required. Until then, these are explicit
+BLOCKED outcomes, each pinned to the dcm version they were verified blocked against, rather than
+simulated client behavior. MSG-2c (dcm 2.37.0) already delivered what MSG-3b's own audit had recorded
+as blocking rows 38, 51–53 and 56–58 — MSG-3c re-verified each against the live dependency and
+delivered them; see those rows above for what was actually built (in three cases, fixing a real
+client-side bug found only once real server data was checked against, not just unblocked).

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@micha.bigler/ui-core-micha",
-  "version": "2.16.0",
+  "version": "2.18.0",
   "main": "dist/index.js",
   "module": "dist/index.js",
   "repository": {

package/src/i18n/messagingTranslations.ts

@@ -1,4 +1,8 @@
 export const messagingTranslations = {
+  'MessagingComposer.ADD_EMOJI': { de: 'Emoji hinzufügen', en: 'Add emoji', fr: 'Ajouter un emoji' },
+  'MessagingComposer.STAGED_FILES': { de: 'Vorgemerkte Anhänge', en: 'Staged attachments', fr: 'Pièces jointes préparées' },
+  'MessagingComposer.REMOVE_ATTACHMENT': { de: '{{name}} entfernen', en: 'Remove {{name}}', fr: 'Supprimer {{name}}' },
+  'MessagingComposer.UPLOADING': { de: 'Anhänge werden hochgeladen…', en: 'Uploading attachments…', fr: 'Téléversement des pièces jointes…' },
   'MessagingList.LABEL': { de: 'Unterhaltungen', en: 'Conversations', fr: 'Conversations' },
   'MessagingList.EMPTY': { de: 'Noch keine Unterhaltungen.', en: 'No conversations yet.', fr: 'Aucune conversation pour le moment.' },
   'MessagingList.NO_MESSAGES': { de: 'Noch keine Nachrichten', en: 'No messages yet', fr: 'Aucun message pour le moment' },
@@ -28,8 +32,29 @@ export const messagingTranslations = {
   'MessagingThread.SHOW_REPLIES': { de: '{{count}} Antworten anzeigen', en: 'Show {{count}} replies', fr: 'Afficher {{count}} réponses' },
   'MessagingThread.HIDE_REPLIES': { de: 'Antworten ausblenden', en: 'Hide replies', fr: 'Masquer les réponses' },
   'MessagingThread.UNKNOWN_SENDER': { de: 'Unbekannte Person', en: 'Unknown person', fr: 'Personne inconnue' },
+  'MessagingThread.QUOTE_ATTACHMENT': { de: 'Anhang', en: 'Attachment', fr: 'Pièce jointe' },
+  'MessagingActions.MENU': { de: 'Nachrichtenaktionen', en: 'Message actions', fr: 'Actions du message' },
+  'MessagingActions.EDIT': { de: 'Bearbeiten', en: 'Edit', fr: 'Modifier' },
+  'MessagingActions.SAVE': { de: 'Speichern', en: 'Save', fr: 'Enregistrer' },
+  'MessagingActions.CANCEL': { de: 'Abbrechen', en: 'Cancel', fr: 'Annuler' },
+  'MessagingActions.DELETE': { de: 'Löschen', en: 'Delete', fr: 'Supprimer' },
+  'MessagingActions.COPY': { de: 'Kopieren', en: 'Copy', fr: 'Copier' },
+  'MessagingActions.DELETE_CONFIRM_TITLE': { de: 'Nachricht löschen?', en: 'Delete message?', fr: 'Supprimer le message ?' },
+  'MessagingActions.DELETE_CONFIRM_BODY': { de: 'Diese Nachricht wird für alle entfernt.', en: 'This message will be removed for everyone.', fr: 'Ce message sera supprimé pour tout le monde.' },
+  'MessagingActions.EDIT_ERROR': { de: 'Nachricht konnte nicht bearbeitet werden: {{message}}', en: 'Message could not be edited: {{message}}', fr: 'Impossible de modifier le message : {{message}}' },
+  'MessagingActions.DELETE_ERROR': { de: 'Nachricht konnte nicht gelöscht werden: {{message}}', en: 'Message could not be deleted: {{message}}', fr: 'Impossible de supprimer le message : {{message}}' },
+  'MessagingActions.COPY_ERROR': { de: 'Nachricht konnte nicht kopiert werden: {{message}}', en: 'Message could not be copied: {{message}}', fr: 'Impossible de copier le message : {{message}}' },
+  'MessagingDirect.LAUNCH': { de: 'Direktnachricht starten', en: 'Start direct message', fr: 'Démarrer un message direct' },
+  'MessagingDirect.TITLE': { de: 'Direktnachricht starten', en: 'Start direct message', fr: 'Démarrer un message direct' },
+  'MessagingDirect.CANDIDATES': { de: 'Empfängerinnen und Empfänger', en: 'Recipients', fr: 'Destinataires' },
+  'MessagingDirect.EMPTY': { de: 'Keine Personen verfügbar.', en: 'No people are available.', fr: 'Aucune personne n’est disponible.' },
+  'MessagingDirect.START': { de: 'Starten', en: 'Start', fr: 'Démarrer' },
+  'MessagingDirect.STARTING': { de: 'Direktnachricht wird gestartet…', en: 'Starting direct message…', fr: 'Démarrage du message direct…' },
+  'MessagingDirect.CANCEL': { de: 'Abbrechen', en: 'Cancel', fr: 'Annuler' },
+  'MessagingDirect.START_ERROR': { de: 'Direktnachricht konnte nicht gestartet werden.', en: 'Direct message could not be started.', fr: 'Impossible de démarrer le message direct.' },
   'MessagingReadTicks.ALL_READ': { de: 'Von allen gelesen', en: 'Read by everyone', fr: 'Lu par tout le monde' },
   'MessagingReadTicks.DELIVERED': { de: 'Zugestellt an {{count}}', en: 'Delivered to {{count}}', fr: 'Distribué à {{count}}' },
+  'MessagingReadTicks.RECIPIENTS': { de: 'Lesebestätigungen', en: 'Read recipients', fr: 'Destinataires lus' },
   'MessagingComposer.LABEL': { de: 'Nachricht verfassen', en: 'Compose message', fr: 'Rédiger un message' },
   'MessagingComposer.MESSAGE': { de: 'Nachricht', en: 'Message', fr: 'Message' },
   'MessagingComposer.SEND': { de: 'Senden', en: 'Send', fr: 'Envoyer' },
@@ -60,6 +85,7 @@ export const messagingTranslations = {
   'MessagingPoll.ADD_OPTION': { de: 'Option hinzufügen', en: 'Add option', fr: 'Ajouter une option' },
   'MessagingPoll.ALLOW_MULTIPLE': { de: 'Mehrfachauswahl erlauben', en: 'Allow multiple choices', fr: 'Autoriser plusieurs choix' },
   'MessagingPoll.CANCEL': { de: 'Abbrechen', en: 'Cancel', fr: 'Annuler' },
+  'MessagingPoll.YOU_VOTED': { de: 'von dir gewählt', en: 'voted by you', fr: 'voté par vous' },
   'MessagingConfig.LABEL': { de: 'Nachrichten-Einstellungen', en: 'Messaging settings', fr: 'Paramètres de messagerie' },
   'MessagingConfig.TITLE': { de: 'Nachrichten-Einstellungen', en: 'Messaging settings', fr: 'Paramètres de messagerie' },
   'MessagingConfig.LOADING': { de: 'Einstellungen werden geladen…', en: 'Loading settings…', fr: 'Chargement des paramètres…' },
@@ -78,4 +104,5 @@ export const messagingTranslations = {
   'MessagingAnnouncement.CANCEL': { de: 'Abbrechen', en: 'Cancel', fr: 'Annuler' },
   'MessagingAnnouncement.VALIDATION': { de: 'Ein Titel ist erforderlich.', en: 'A title is required.', fr: 'Un titre est requis.' },
   'MessagingAnnouncement.ERROR': { de: 'Ankündigung konnte nicht gesendet werden: {{message}}', en: 'Announcement could not be sent: {{message}}', fr: 'Impossible d’envoyer l’annonce : {{message}}' },
+  'MessagingAnnouncement.OPEN_LINK': { de: 'Link öffnen', en: 'Open link', fr: 'Ouvrir le lien' },
 };

package/src/index.js

@@ -69,6 +69,7 @@ export * from './messaging/api';
 export { MessagingProvider, useMessaging } from './messaging/MessagingProvider';
 export { ConversationList } from './messaging/ConversationList';
 export { ConversationLaunchers } from './messaging/ConversationLaunchers';
+export { DirectMessageLauncher } from './messaging/DirectMessageLauncher';
 export { Thread } from './messaging/Thread';
 export { MessageBubble } from './messaging/MessageBubble';
 export { ReadTicks } from './messaging/ReadTicks';

package/src/messaging/Composer.jsx

@@ -1,13 +1,18 @@
-import { Alert, Button, Checkbox, Dialog, DialogActions, DialogContent, DialogTitle, FormControlLabel, IconButton, Stack, TextField, Typography } from '@mui/material';
+import { Alert, Box, Button, Checkbox, CircularProgress, Dialog, DialogActions, DialogContent, DialogTitle, FormControlLabel, IconButton, LinearProgress, Menu, MenuItem, Stack, TextField, Typography } from '@mui/material';
 import AttachFileIcon from '@mui/icons-material/AttachFile';
 import CampaignOutlinedIcon from '@mui/icons-material/CampaignOutlined';
+import CloseIcon from '@mui/icons-material/Close';
+import EmojiEmotionsOutlinedIcon from '@mui/icons-material/EmojiEmotionsOutlined';
 import PollOutlinedIcon from '@mui/icons-material/PollOutlined';
-import { useRef, useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 
+import { compressImageForUpload } from './composerImageCompression';
 import { extractApiErrorMessage, useMessaging } from './MessagingProvider';
+import { QUICK_EMOJIS } from './ReactionBar';
 
 function newRequestId() { return globalThis.crypto?.randomUUID?.() || `message-${Date.now()}-${Math.random().toString(36).slice(2)}`; }
+function isImage(file) { return file.type?.startsWith('image/'); }
 
 /**
  * A provider-backed, independently mountable REST composer.
@@ -34,7 +39,20 @@ export function Composer({ conversationId, replyTarget = null, onReplyTargetChan
   const [announcementOpen, setAnnouncementOpen] = useState(false);
   const [announcementTitle, setAnnouncementTitle] = useState('');
   const [announcementBody, setAnnouncementBody] = useState('');
+  const [emojiAnchor, setEmojiAnchor] = useState(null);
+  const [previews, setPreviews] = useState([]);
+  const [uploadProgress, setUploadProgress] = useState(null);
   const inputRef = useRef(null);
+  const messageInputRef = useRef(null);
+  useEffect(() => {
+    if (replyTarget?.deleted_at) onReplyTargetChange?.(null);
+  }, [replyTarget, onReplyTargetChange]);
+  useEffect(() => { setBody(''); setFiles([]); }, [conversationId]);
+  useEffect(() => {
+    const urls = files.map((file) => isImage(file) ? URL.createObjectURL(file) : null);
+    setPreviews(urls);
+    return () => urls.filter(Boolean).forEach((url) => URL.revokeObjectURL(url));
+  }, [files]);
   const submit = async (requestId = newRequestId(), retry = false) => {
     if (!body.trim() && !files.length) return;
     setSending(true); setError(null);
@@ -42,18 +60,29 @@ export function Composer({ conversationId, replyTarget = null, onReplyTargetChan
     try {
       if (files.length) {
         const formData = new FormData();
-        files.forEach((file) => formData.append('files[]', file));
+        const uploadFiles = await Promise.all(files.map(compressImageForUpload));
+        uploadFiles.forEach((file) => formData.append('files[]', file));
         if (payload.body) formData.append('body', payload.body);
         if (payload.reply_to) formData.append('reply_to', String(payload.reply_to));
         formData.append('client_request_id', requestId);
-        await sendAttachments(conversationId, formData, { clientRequestId: requestId, retry, optimisticMessage: { body: payload.body, reply_to: payload.reply_to, attachments: files.map((file, index) => ({ id: `local-${requestId}-${index}`, filename: file.name, content_type: file.type })) } });
+        setUploadProgress(0);
+        const onUploadProgress = (event) => setUploadProgress(event.total ? Math.round((event.loaded / event.total) * 100) : null);
+        await sendAttachments(conversationId, formData, { clientRequestId: requestId, retry, onUploadProgress, optimisticMessage: { body: payload.body, reply_to: payload.reply_to, attachments: files.map((file, index) => ({ id: `local-${requestId}-${index}`, filename: file.name, content_type: file.type })) } });
       } else await sendMessage(conversationId, payload, { clientRequestId: requestId, retry });
       setBody(''); setFiles([]); setFailed(null); onReplyTargetChange?.(null);
     } catch (sendError) {
       const message = extractApiErrorMessage(sendError);
       setError(files.length ? t('MessagingComposer.UPLOAD_ERROR', { message }) : t('MessagingComposer.SEND_ERROR', { message }));
       setFailed({ requestId, retry: true });
-    } finally { setSending(false); }
+    } finally { setSending(false); setUploadProgress(null); }
+  };
+  const removeFile = (index) => setFiles((current) => current.filter((_, fileIndex) => fileIndex !== index));
+  const insertEmoji = (emoji) => {
+    const input = messageInputRef.current?.querySelector?.('textarea') || messageInputRef.current;
+    const start = input?.selectionStart ?? body.length;
+    const end = input?.selectionEnd ?? start;
+    setBody(`${body.slice(0, start)}${emoji}${body.slice(end)}`); setEmojiAnchor(null);
+    requestAnimationFrame(() => { input?.focus(); input?.setSelectionRange(start + emoji.length, start + emoji.length); });
   };
   const submitPoll = async () => {
     const options = pollOptions.map((option) => option.trim()).filter(Boolean);
@@ -82,21 +111,38 @@ export function Composer({ conversationId, replyTarget = null, onReplyTargetChan
   return <Stack component="form" spacing={1} onSubmit={(event) => { event.preventDefault(); submit(); }} aria-label={t('MessagingComposer.LABEL')}>
     {replyTarget && <Alert severity="info" onClose={() => onReplyTargetChange?.(null)}>{t('MessagingComposer.REPLYING_TO', { sender: replyTarget.sender?.display_name || t('MessagingThread.UNKNOWN_SENDER') })}</Alert>}
     {error && <Alert severity="error" role="alert">{error}</Alert>}
+    {files.length > 0 && <Stack direction="row" spacing={0.5} flexWrap="wrap" aria-label={t('MessagingComposer.STAGED_FILES')}>
+      {files.map((file, index) => <Stack key={`${file.name}-${index}`} direction="row" alignItems="center" spacing={0.25} sx={{ border: 1, borderColor: 'divider', borderRadius: 1, p: 0.25 }}>
+        {previews[index] && <Box component="img" src={previews[index]} alt={file.name} width={36} height={36} sx={{ objectFit: 'cover' }} />}
+        <Typography variant="caption">{file.name}</Typography><IconButton type="button" size="small" aria-label={t('MessagingComposer.REMOVE_ATTACHMENT', { name: file.name })} onClick={() => removeFile(index)}><CloseIcon fontSize="inherit" /></IconButton>
+      </Stack>)}
+    </Stack>}
     {files.length > 0 && <Typography variant="caption">{t('MessagingComposer.FILES_SELECTED', { count: files.length })}</Typography>}
     <Stack direction="row" spacing={1} alignItems="flex-end">
       <input ref={inputRef} hidden type="file" multiple onChange={(event) => setFiles(Array.from(event.target.files || []))} />
       <IconButton type="button" aria-label={t('MessagingComposer.ADD_ATTACHMENT')} onClick={() => inputRef.current?.click()}><AttachFileIcon /></IconButton>
-      <IconButton type="button" aria-label={t('MessagingPoll.CREATE')} onClick={() => setPollOpen(true)}><PollOutlinedIcon /></IconButton>
+      <IconButton type="button" aria-label={t('MessagingComposer.ADD_EMOJI')} onClick={(event) => setEmojiAnchor(event.currentTarget)}><EmojiEmotionsOutlinedIcon /></IconButton>
+      <IconButton type="button" aria-label={t('MessagingPoll.CREATE')} disabled={pollOpen || files.some(isImage)} onClick={() => setPollOpen(true)}><PollOutlinedIcon /></IconButton>
       {allowAnnouncement && <IconButton type="button" aria-label={t('MessagingAnnouncement.CREATE')} onClick={() => setAnnouncementOpen(true)}><CampaignOutlinedIcon /></IconButton>}
-      <TextField fullWidth multiline minRows={2} value={body} onChange={(event) => setBody(event.target.value)} label={t('MessagingComposer.MESSAGE')} disabled={sending} />
+      <TextField inputRef={messageInputRef} fullWidth multiline minRows={2} value={body} onChange={(event) => setBody(event.target.value)} onKeyDown={(event) => { if (event.key === 'Enter' && !event.shiftKey && !event.nativeEvent.isComposing) { event.preventDefault(); submit(); } }} label={t('MessagingComposer.MESSAGE')} disabled={sending} />
       <Button type="submit" variant="contained" disabled={sending || (!body.trim() && !files.length)}>{t('MessagingComposer.SEND')}</Button>
     </Stack>
+    {sending && files.length > 0 && <Stack spacing={0.5} role="status">
+      <Stack direction="row" spacing={1} alignItems="center">
+        {uploadProgress == null ? <CircularProgress size={16} /> : <CircularProgress size={16} variant="determinate" value={uploadProgress} />}
+        <Typography variant="caption">{t('MessagingComposer.UPLOADING')}</Typography>
+      </Stack>
+      {uploadProgress != null && <LinearProgress variant="determinate" value={uploadProgress} />}
+    </Stack>}
     {failed && <Button type="button" onClick={() => submit(failed.requestId, true)} disabled={sending}>{t('MessagingComposer.RETRY')}</Button>}
+    <Menu anchorEl={emojiAnchor} open={Boolean(emojiAnchor)} onClose={() => setEmojiAnchor(null)}>
+      {QUICK_EMOJIS.map((emoji) => <MenuItem key={emoji} onClick={() => insertEmoji(emoji)}>{emoji}</MenuItem>)}
+    </Menu>
     <Dialog open={pollOpen} onClose={() => !sending && setPollOpen(false)} fullWidth maxWidth="sm">
       <DialogTitle>{t('MessagingPoll.CREATE')}</DialogTitle><DialogContent><Stack spacing={1} sx={{ pt: 1 }}>
         <TextField label={t('MessagingPoll.QUESTION')} value={pollQuestion} onChange={(event) => setPollQuestion(event.target.value)} autoFocus />
         {pollOptions.map((option, index) => <TextField key={index} label={t('MessagingPoll.OPTION', { count: index + 1 })} value={option} onChange={(event) => setPollOptions((current) => current.map((value, optionIndex) => optionIndex === index ? event.target.value : value))} />)}
-        <Button type="button" onClick={() => setPollOptions((current) => [...current, ''])}>{t('MessagingPoll.ADD_OPTION')}</Button>
+        <Button type="button" disabled={pollOptions.length >= 10} onClick={() => setPollOptions((current) => [...current, ''])}>{t('MessagingPoll.ADD_OPTION')}</Button>
         <FormControlLabel control={<Checkbox checked={allowMultiple} onChange={(event) => setAllowMultiple(event.target.checked)} />} label={t('MessagingPoll.ALLOW_MULTIPLE')} />
       </Stack></DialogContent><DialogActions><Button onClick={() => setPollOpen(false)}>{t('MessagingPoll.CANCEL')}</Button><Button variant="contained" onClick={submitPoll} disabled={sending}>{t('MessagingPoll.CREATE')}</Button></DialogActions>
     </Dialog>

package/src/messaging/ConversationList.jsx

@@ -10,6 +10,12 @@ function titleOf(conversation, t) { return conversation.title || conversation.ot
 function ordered(conversations) {
   return [...conversations].sort((left, right) => new Date(right.last_message_at || 0) - new Date(left.last_message_at || 0));
 }
+function relativeTime(value, locale) {
+  if (!value) return null;
+  const seconds = Math.max(0, Math.floor((Date.now() - new Date(value).getTime()) / 1000));
+  const [amount, unit] = seconds < 60 ? [0, 'second'] : seconds < 3600 ? [Math.floor(seconds / 60), 'minute'] : seconds < 86400 ? [Math.floor(seconds / 3600), 'hour'] : [Math.floor(seconds / 86400), 'day'];
+  return new Intl.RelativeTimeFormat(locale, { numeric: 'auto', style: 'narrow' }).format(-amount, unit);
+}
 // jg's ConversationList renders a distinct icon per conversation kind so a
 // user can identify type/person at a glance (getConversationAvatar); that
 // glanceable identification is a feature, not layout, so it's reproduced
@@ -22,8 +28,8 @@ function KindIcon({ conversation }) {
 
 /** A standalone, provider-backed list; scope picker metadata is supplied as launcher props. */
 export function ConversationList({ onOpen, groupLaunchers, broadcastLauncher, autoOpenBroadcast = false, includeArchived = false }) {
-  const { t } = useTranslation();
-  const { cache, activeConversationId, loadMoreConversations, setConversationArchived, setConversationPreferences } = useMessaging();
+  const { t, i18n } = useTranslation();
+  const { cache, activeConversationId, loadMoreConversations, setConversationArchived, setConversationPreferences, markConversationRead } = useMessaging();
   const [menuConversation, setMenuConversation] = useState(null);
   const [menuAnchor, setMenuAnchor] = useState(null);
   const [loadingMore, setLoadingMore] = useState(false);
@@ -58,11 +64,11 @@ export function ConversationList({ onOpen, groupLaunchers, broadcastLauncher, au
           {conversations.map((conversation) => {
             const unread = unreadFor(conversation);
             const archived = Boolean(conversation.archived || conversation.archived_at);
-            return <ListItemButton key={conversation.id} selected={conversation.id === activeConversationId} onClick={() => onOpen?.(conversation)} sx={{ minHeight: 64, opacity: archived ? 0.6 : 1 }}>
+            return <ListItemButton key={conversation.id} selected={conversation.id === activeConversationId} onClick={() => { markConversationRead(conversation.id).catch(() => {}); onOpen?.(conversation); }} sx={{ minHeight: 64, opacity: archived ? 0.6 : 1 }}>
               <Badge color="error" badgeContent={unread || null} max={99} sx={{ mr: 2 }}>
                 {archived ? <Archive fontSize="small" color="disabled" /> : <KindIcon conversation={conversation} />}
               </Badge>
-              <ListItemText primary={titleOf(conversation, t)} secondary={conversation.last_message?.body || t('MessagingList.NO_MESSAGES')} primaryTypographyProps={{ fontWeight: unread ? 700 : 400, noWrap: true }} secondaryTypographyProps={{ noWrap: true }} />
+              <ListItemText primary={<Stack direction="row" spacing={1} justifyContent="space-between"><Typography component="span" fontWeight={unread ? 700 : 400} noWrap>{titleOf(conversation, t)}</Typography>{relativeTime(conversation.last_message_at, i18n?.language) && <Typography component="span" variant="caption" color="text.secondary" noWrap>{relativeTime(conversation.last_message_at, i18n?.language)}</Typography>}</Stack>} secondary={conversation.last_message?.excerpt || t('MessagingList.NO_MESSAGES')} secondaryTypographyProps={{ noWrap: true }} />
               <IconButton aria-label={t('MessagingList.ACTIONS')} onClick={(event) => { event.stopPropagation(); setMenuAnchor(event.currentTarget); setMenuConversation(conversation); }}><MoreVert /></IconButton>
             </ListItemButton>;
           })}

package/src/messaging/DirectMessageLauncher.jsx

@@ -0,0 +1,96 @@
+import { useId, useState } from 'react';
+import {
+  Alert,
+  Button,
+  CircularProgress,
+  Dialog,
+  DialogActions,
+  DialogContent,
+  DialogTitle,
+  List,
+  ListItemButton,
+  ListItemText,
+  Typography,
+  useMediaQuery,
+} from '@mui/material';
+import { useTheme } from '@mui/material/styles';
+import { useTranslation } from 'react-i18next';
+
+import { extractApiErrorMessage, useMessaging } from './MessagingProvider';
+
+/**
+ * Starts direct conversations from host-provided people. Candidate discovery is
+ * intentionally outside messaging because memberships are host-domain data.
+ */
+export function DirectMessageLauncher({ candidates = [], scope, onOpen }) {
+  const { t } = useTranslation();
+  const { openDirectConversation } = useMessaging();
+  const theme = useTheme();
+  const fullScreen = useMediaQuery(theme.breakpoints.down('sm'));
+  const [open, setOpen] = useState(false);
+  const [selectedId, setSelectedId] = useState(null);
+  const [starting, setStarting] = useState(false);
+  const [error, setError] = useState(null);
+  const titleId = useId();
+
+  const showPicker = () => {
+    setSelectedId(null);
+    setError(null);
+    setOpen(true);
+  };
+  const closePicker = () => {
+    if (!starting) setOpen(false);
+  };
+  const start = async () => {
+    if (selectedId == null || starting) return;
+    setStarting(true);
+    setError(null);
+    try {
+      const conversation = await openDirectConversation({
+        target_user_id: selectedId,
+        ...(scope == null ? {} : { scope }),
+      });
+      setOpen(false);
+      onOpen?.(conversation);
+    } catch (requestError) {
+      setError(extractApiErrorMessage(requestError) || t('MessagingDirect.START_ERROR'));
+    } finally {
+      setStarting(false);
+    }
+  };
+
+  return (
+    <>
+      <Button variant="outlined" onClick={showPicker}>{t('MessagingDirect.LAUNCH')}</Button>
+      <Dialog open={open} onClose={closePicker} fullScreen={fullScreen} aria-labelledby={titleId}>
+        <DialogTitle id={titleId}>{t('MessagingDirect.TITLE')}</DialogTitle>
+        <DialogContent>
+          {error && <Alert severity="error" sx={{ mb: 1 }}>{error}</Alert>}
+          {starting && <Typography role="status" sx={{ mb: 1 }}><CircularProgress size={16} sx={{ mr: 1 }} />{t('MessagingDirect.STARTING')}</Typography>}
+          {candidates.length === 0 ? (
+            <Typography>{t('MessagingDirect.EMPTY')}</Typography>
+          ) : (
+            <List aria-label={t('MessagingDirect.CANDIDATES')}>
+              {candidates.map((candidate) => (
+                <ListItemButton
+                  key={candidate.id}
+                  selected={candidate.id === selectedId}
+                  disabled={starting}
+                  onClick={() => setSelectedId(candidate.id)}
+                >
+                  <ListItemText primary={candidate.display_name || candidate.name || candidate.label || candidate.id} />
+                </ListItemButton>
+              ))}
+            </List>
+          )}
+        </DialogContent>
+        <DialogActions>
+          <Button onClick={closePicker} disabled={starting}>{t('MessagingDirect.CANCEL')}</Button>
+          <Button variant="contained" onClick={start} disabled={selectedId == null || starting}>
+            {t('MessagingDirect.START')}
+          </Button>
+        </DialogActions>
+      </Dialog>
+    </>
+  );
+}