Merge pull request 'Feat/messaging ui foundation' (#13) from feat/messaging-ui-foundation into dev

Reviewed-on: #13

.env.example

@@ -7,6 +7,11 @@ JWT_SECRET="dev-only-change-me"
 # Per-app HS256 secrets, JSON map keyed by appId (the `session` platform port)
 APP_SECRETS={"portal-demo":"dev-secret"}
 
+# Redis. Unset → single-instance mode: socket.io uses its in-memory adapter (realtime does NOT
+# fan out across replicas) and presence is a per-process Map (so the "don't push a thread you're
+# viewing" gate only sees sockets on the same replica). REQUIRED for any multi-replica deploy.
+REDIS_URL="redis://localhost:6379"
+
 # Full-text message search (Meilisearch). Unset MEILI_URL → search is disabled (no-op).
 # MEILI_KEY must equal the meilisearch server's MEILI_MASTER_KEY (docker-compose default below).
 MEILI_URL="http://localhost:7700"

packages/iios-kernel-client/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@insignia/iios-kernel-client",
-  "version": "0.1.4",
+  "version": "0.1.6",
   "type": "module",
   "main": "dist/index.js",
   "module": "dist/index.js",

packages/iios-kernel-client/src/types.ts

@@ -37,7 +37,11 @@ export interface OpenThreadResult {
 
 export interface ReceiptEvent {
   interactionId: string;
+  /** The reader's IIOS actor UUID — an internal id, NOT comparable to a caller's userId. */
   actorId: string;
+  /** The reader's userId — the same id space clients hold, so they can ignore their own receipt.
+   *  Optional: absent from servers older than the change that added it. */
+  userId?: string;
   kind: 'READ' | 'DELIVERED';
 }
 

packages/iios-messaging-ui/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@insignia/iios-messaging-ui",
-  "version": "0.1.7",
+  "version": "0.1.14",
   "type": "module",
   "main": "dist/index.js",
   "module": "dist/index.js",

packages/iios-messaging-ui/src/adapter.ts

@@ -1,5 +1,6 @@
 import type {
   Attachment,
+  BulkAddResult,
   ChannelSummary,
   Conversation,
   CreateChannelInput,
@@ -97,6 +98,11 @@ export interface MessagingAdapter {
   /** Add a person to a group or private channel. */
   addMember?(threadId: string, userId: string): Promise<void>;
 
+  /** Add many people in one call — powers "add everyone from another channel". The host is expected
+   *  to enforce who may add (and who may read the source roster) server-side.
+   *  Absent => the import-from-a-channel affordance is hidden; single add still works. */
+  addMembers?(threadId: string, userIds: string[]): Promise<BulkAddResult>;
+
   /** Remove a person from a group or channel. */
   removeMember?(threadId: string, userId: string): Promise<void>;
 

packages/iios-messaging-ui/src/adapters/mock.ts

@@ -1,6 +1,7 @@
 import type { MessagingAdapter } from '../adapter';
 import type {
   Attachment,
+  BulkAddResult,
   ChannelSummary,
   ChannelVisibility,
   Conversation,
@@ -168,6 +169,22 @@ export class MockAdapter implements MessagingAdapter {
     if (t && !t.participants.includes(userId)) t.participants = [...t.participants, userId];
   }
 
+  /** Bulk add, mirroring the live door: already-members come back as `skipped`, never re-added. */
+  async addMembers(threadId: string, userIds: string[]): Promise<BulkAddResult> {
+    const t = this.threads.get(threadId);
+    if (!t) return { added: [], skipped: [], failed: [...userIds] };
+    const added: string[] = [];
+    const skipped: string[] = [];
+    for (const id of [...new Set(userIds)]) {
+      if (t.participants.includes(id)) skipped.push(id);
+      else {
+        t.participants = [...t.participants, id];
+        added.push(id);
+      }
+    }
+    return { added, skipped, failed: [] };
+  }
+
   async removeMember(threadId: string, userId: string): Promise<void> {
     const t = this.threads.get(threadId);
     if (t) t.participants = t.participants.filter((p) => p !== userId);
@@ -253,8 +270,9 @@ export class MockAdapter implements MessagingAdapter {
     // No-op: nobody is typing back in a mock.
   }
 
-  async markRead(): Promise<void> {
-    // No-op: the mock has no second party to report a read.
+  /** Echo a receipt the way a real server does, so the "ignore my own read" path is exercised. */
+  async markRead(threadId: string, messageId: string): Promise<void> {
+    this.emit(threadId, { kind: 'receipt', messageId, actorId: ME });
   }
 
   isConnected(): boolean {

packages/iios-messaging-ui/src/components/composer.test.tsx

@@ -0,0 +1,79 @@
+import { describe, it, expect, vi } from 'vitest';
+import { render, screen, fireEvent, waitFor } from '@testing-library/react';
+import { Composer } from './composer';
+
+function mount(onSend = vi.fn().mockResolvedValue(undefined)) {
+  render(<Composer members={[]} canUpload={false} upload={vi.fn()} onSend={onSend} />);
+  return { onSend, box: screen.getByLabelText('Message') as HTMLTextAreaElement };
+}
+
+describe('<Composer /> formatting + native text services', () => {
+  it('is a textarea with the platform spellchecker enabled', () => {
+    const { box } = mount();
+    expect(box.tagName).toBe('TEXTAREA');
+    // The red squiggle + right-click suggestions come from the OS via these attributes.
+    expect(box.getAttribute('spellcheck')).toBe('true');
+    expect(box.getAttribute('autocorrect')).toBe('on');
+  });
+
+  it('does NOT reuse .miu-textarea — that class belongs to the inbox mail composer', () => {
+    // Regression: sharing it let the mail rule (resize: vertical; min-height: 90px), which is
+    // declared later in the stylesheet, win at equal specificity and inflate the chat composer.
+    const { box } = mount();
+    expect(box.classList.contains('miu-composer-box')).toBe(true);
+    expect(box.classList.contains('miu-textarea')).toBe(false);
+  });
+
+  it('Enter sends, Shift+Enter does not (it makes a newline)', async () => {
+    const { onSend, box } = mount();
+    fireEvent.change(box, { target: { value: 'hello' } });
+
+    fireEvent.keyDown(box, { key: 'Enter', shiftKey: true });
+    expect(onSend).not.toHaveBeenCalled();
+
+    fireEvent.keyDown(box, { key: 'Enter' });
+    await waitFor(() => expect(onSend).toHaveBeenCalledWith('hello', expect.anything()));
+  });
+
+  it('does not send mid-IME composition', () => {
+    const { onSend, box } = mount();
+    fireEvent.change(box, { target: { value: 'にほん' } });
+    fireEvent.keyDown(box, { key: 'Enter', isComposing: true });
+    expect(onSend).not.toHaveBeenCalled();
+  });
+
+  it('a toolbar button wraps the current selection in its marker', () => {
+    const { box } = mount();
+    fireEvent.change(box, { target: { value: 'make me bold' } });
+    box.setSelectionRange(8, 12); // "bold"
+    fireEvent.click(screen.getByLabelText('Bold (⌘B)'));
+    expect(box.value).toBe('make me *bold*');
+  });
+
+  it('⌘B / ⌘I wrap the selection too', () => {
+    const { box } = mount();
+    fireEvent.change(box, { target: { value: 'hello world' } });
+    box.setSelectionRange(0, 5);
+    fireEvent.keyDown(box, { key: 'b', metaKey: true });
+    expect(box.value).toBe('*hello* world');
+
+    box.setSelectionRange(8, 13); // "world" shifted by the two markers
+    fireEvent.keyDown(box, { key: 'i', ctrlKey: true });
+    expect(box.value).toBe('*hello* _world_');
+  });
+
+  it('with nothing selected, a marker pair is inserted at the caret', () => {
+    const { box } = mount();
+    fireEvent.change(box, { target: { value: 'ab' } });
+    box.setSelectionRange(2, 2);
+    fireEvent.click(screen.getByLabelText('Italic (⌘I)'));
+    expect(box.value).toBe('ab__');
+  });
+
+  it('sends the raw markers as plain text — formatting is a render concern', async () => {
+    const { onSend, box } = mount();
+    fireEvent.change(box, { target: { value: 'ship *today*' } });
+    fireEvent.keyDown(box, { key: 'Enter' });
+    await waitFor(() => expect(onSend).toHaveBeenCalledWith('ship *today*', expect.anything()));
+  });
+});

packages/iios-messaging-ui/src/components/composer.tsx

@@ -1,4 +1,4 @@
-import { useMemo, useRef, useState, type ChangeEvent, type FormEvent, type KeyboardEvent } from 'react';
+import { useEffect, useMemo, useRef, useState, type ChangeEvent, type FormEvent, type KeyboardEvent } from 'react';
 import {
   SPECIAL_MENTIONS,
   insertMention,
@@ -13,6 +13,17 @@ interface Suggestion {
   insert: string;
 }
 
+/** Keyboard shortcut → the marker it wraps the selection in. */
+const SHORTCUTS: Record<string, string> = { b: '*', i: '_', e: '`' };
+
+/** Toolbar affordances for the same markers (strikethrough is button-only — no common shortcut). */
+const FORMAT_BUTTONS: Array<{ marker: string; label: string; title: string }> = [
+  { marker: '*', label: 'B', title: 'Bold (⌘B)' },
+  { marker: '_', label: 'I', title: 'Italic (⌘I)' },
+  { marker: '~', label: 'S', title: 'Strikethrough' },
+  { marker: '`', label: '‹›', title: 'Code (⌘E)' },
+];
+
 /**
  * The message input: draft, @mention autocomplete, and attachment staging. Shared by the main
  * Thread and the ThreadPane (which passes a parentInteractionId so a reply lands in the thread).
@@ -24,7 +35,7 @@ export function Composer({
   onSend,
   onTyping,
   parentInteractionId,
-  placeholder = 'Type a message… @ to mention',
+  placeholder = 'Type a message… @ to mention, *bold*',
 }: {
   members: Person[];
   canUpload: boolean;
@@ -40,6 +51,39 @@ export function Composer({
   const [uploading, setUploading] = useState(false);
   const [uploadingName, setUploadingName] = useState<string | null>(null);
   const fileRef = useRef<HTMLInputElement>(null);
+  const inputRef = useRef<HTMLTextAreaElement>(null);
+
+  // Grow with the content up to the CSS max-height, then scroll — a chat box, not a fixed field.
+  // The box is border-box, but scrollHeight excludes the border, so add it back or every measure
+  // lands a couple of pixels short and the textarea shows a scrollbar it doesn't need.
+  useEffect(() => {
+    const el = inputRef.current;
+    if (!el) return;
+    el.style.height = 'auto';
+    const border = el.offsetHeight - el.clientHeight;
+    el.style.height = `${el.scrollHeight + border}px`;
+  }, [draft]);
+
+  /**
+   * Wrap the current selection in a marker (or, with nothing selected, drop in an empty pair and
+   * park the caret inside). Text stays plain — the marker characters ARE the format, so this never
+   * needs a rich-text model and the native spellchecker keeps working on the raw string.
+   */
+  function wrapSelection(marker: string): void {
+    const el = inputRef.current;
+    if (!el) return;
+    const start = el.selectionStart ?? draft.length;
+    const end = el.selectionEnd ?? start;
+    const selected = draft.slice(start, end);
+    const next = `${draft.slice(0, start)}${marker}${selected}${marker}${draft.slice(end)}`;
+    setDraft(next);
+    // Restore a sensible selection after React re-renders the value.
+    const caret = selected ? start + marker.length + selected.length + marker.length : start + marker.length;
+    requestAnimationFrame(() => {
+      el.focus();
+      el.setSelectionRange(selected ? start + marker.length : caret, selected ? caret - marker.length : caret);
+    });
+  }
 
   const query = trailingMentionQuery(draft);
   const suggestions = useMemo<Suggestion[]>(() => {
@@ -93,10 +137,26 @@ export function Composer({
     }
   }
 
-  function onKeyDown(e: KeyboardEvent<HTMLInputElement>): void {
-    if (showSuggest && e.key === 'Enter') {
+  function onKeyDown(e: KeyboardEvent<HTMLTextAreaElement>): void {
+    // Formatting shortcuts, matching the toolbar. Cmd on macOS, Ctrl elsewhere.
+    if (e.metaKey || e.ctrlKey) {
+      const marker = SHORTCUTS[e.key.toLowerCase()];
+      if (marker) {
+        e.preventDefault();
+        wrapSelection(marker);
+        return;
+      }
+    }
+    if (e.key !== 'Enter') return;
+    if (showSuggest) {
       e.preventDefault();
       pick(suggestions[0]!.insert);
+      return;
+    }
+    // Enter sends; Shift+Enter (and IME composition) inserts a newline.
+    if (!e.shiftKey && !e.nativeEvent.isComposing) {
+      e.preventDefault();
+      void submit();
     }
   }
 
@@ -125,6 +185,13 @@ export function Composer({
           </button>
         </div>
       ) : null}
+      <div className="miu-format-bar" role="group" aria-label="Formatting">
+        {FORMAT_BUTTONS.map((b) => (
+          <button key={b.marker} type="button" className="miu-format-btn" title={b.title} aria-label={b.title} onClick={() => wrapSelection(b.marker)}>
+            {b.label}
+          </button>
+        ))}
+      </div>
       <div className="miu-composer-row">
         {canUpload ? (
           <>
@@ -134,11 +201,18 @@ export function Composer({
             </button>
           </>
         ) : null}
-        <input
-          className="miu-input"
+        <textarea
+          ref={inputRef}
+          className="miu-input miu-composer-box"
           value={draft}
           placeholder={placeholder}
           aria-label="Message"
+          rows={1}
+          // Native platform text services: the browser/OS supplies the red squiggle, the right-click
+          // suggestions and "Add to dictionary", and mobile keyboards add autocorrect. Nothing to ship.
+          spellCheck
+          autoCorrect="on"
+          autoCapitalize="sentences"
           onChange={(e) => {
             setDraft(e.target.value);
             onTyping?.();

packages/iios-messaging-ui/src/components/conversation-list.tsx

@@ -1,4 +1,5 @@
 import type { Conversation } from '../types';
+import { stripMarkup } from '../rich-text';
 
 /** Initials for the avatar chip — first letters of the first two words. */
 function initials(title: string): string {
@@ -37,7 +38,7 @@ export function ConversationList({
             </span>
             <span className="miu-convrow-main">
               <span className="miu-convrow-title">{c.title}</span>
-              {c.lastMessage ? <span className="miu-convrow-preview">{c.lastMessage}</span> : null}
+              {c.lastMessage ? <span className="miu-convrow-preview">{stripMarkup(c.lastMessage)}</span> : null}
             </span>
             {c.unread > 0 ? (
               <span className="miu-badge" aria-label={`${c.unread} unread`}>

packages/iios-messaging-ui/src/components/conversation-settings.test.tsx

@@ -37,4 +37,61 @@ describe('<ConversationSettings />', () => {
       expect((await a.listMembers('th_mock_2')).some((m) => m.id === 'pp_sofia')).toBe(true);
     });
   });
+
+  it('“#” switches the picker to channels you belong to, excluding this one', async () => {
+    mount();
+    await screen.findByText('Dan Whitaker');
+    fireEvent.change(screen.getByLabelText('Search people'), { target: { value: '#' } });
+    // Channels the mock user is in show up as import sources…
+    await screen.findByText('#general');
+    // …and the conversation being edited is never offered as its own source.
+    expect(screen.queryByText('#Storm crew')).toBeNull();
+  });
+
+  it('imports a channel roster only after confirmation, and reports what landed', async () => {
+    const a = mount();
+    await screen.findByText('Dan Whitaker');
+    const before = (await a.listMembers('th_mock_2')).length;
+
+    fireEvent.change(screen.getByLabelText('Search people'), { target: { value: '#' } });
+    fireEvent.click(await screen.findByText('#general'));
+
+    // Staged, NOT applied — picking a channel must not mutate membership on its own.
+    const confirm = await screen.findByRole('button', { name: /^Add \d+$/ });
+    expect((await a.listMembers('th_mock_2')).length).toBe(before);
+
+    fireEvent.click(confirm);
+    await waitFor(async () => {
+      expect((await a.listMembers('th_mock_2')).length).toBeGreaterThan(before);
+    });
+    await screen.findByText(/Added \d+/);
+  });
+
+  it('cancelling a staged import leaves membership untouched', async () => {
+    const a = mount();
+    await screen.findByText('Dan Whitaker');
+    const before = (await a.listMembers('th_mock_2')).length;
+
+    fireEvent.change(screen.getByLabelText('Search people'), { target: { value: '#' } });
+    fireEvent.click(await screen.findByText('#general'));
+    fireEvent.click(await screen.findByRole('button', { name: 'Cancel' }));
+
+    await screen.findByLabelText('Search people'); // back to the picker
+    expect((await a.listMembers('th_mock_2')).length).toBe(before);
+  });
+
+  it('hides the channel-import affordance when the adapter cannot bulk-add', async () => {
+    const a = new MockAdapter();
+    // A host that implements single add but not addMembers => no import path offered.
+    (a as { addMembers?: unknown }).addMembers = undefined;
+    render(
+      <MessagingProvider adapter={a}>
+        <ConversationSettings threadId="th_mock_2" title="Storm crew" membership="group" onClose={() => {}} />
+      </MessagingProvider>,
+    );
+    await screen.findByText('Dan Whitaker');
+    expect(screen.getByLabelText('Search people').getAttribute('placeholder')).toBe('Search people…');
+    fireEvent.change(screen.getByLabelText('Search people'), { target: { value: '#' } });
+    expect(screen.queryByText('#general')).toBeNull(); // '#' is just a search string here
+  });
 });

packages/iios-messaging-ui/src/components/conversation-settings.tsx

@@ -1,7 +1,17 @@
 import { useEffect, useMemo, useState } from 'react';
 import { useAdapter } from '../provider';
+import { useConversations } from '../hooks/use-conversations';
 import { ModalPortal } from './modal-portal';
-import type { Person } from '../types';
+import type { BulkAddResult, Conversation, Person } from '../types';
+
+/** A source channel the caller belongs to, staged for a roster import once its members are read. */
+interface PendingImport {
+  source: Conversation;
+  /** Members of the source who are NOT already here — the ones an import would actually add. */
+  newcomers: Person[];
+  /** Members of the source already in this conversation; reported so the count is never surprising. */
+  alreadyHere: number;
+}
 
 /**
  * Settings for a group or channel (public + private): rename, member list, add/remove people, and
@@ -30,9 +40,23 @@ export function ConversationSettings({
   const [error, setError] = useState<string | null>(null);
   const [nonce, setNonce] = useState(0);
 
+  const [pending, setPending] = useState<PendingImport | null>(null);
+  const [imported, setImported] = useState<BulkAddResult | null>(null);
+  const { conversations } = useConversations();
+
   const canManage = typeof adapter.addMember === 'function' && typeof adapter.removeMember === 'function';
   const canRename = typeof adapter.renameConversation === 'function';
   const canLeave = membership === 'channel' && typeof adapter.leaveChannel === 'function';
+  // Importing a roster needs both halves: read the source's members, and bulk-add them here.
+  const canImport = typeof adapter.addMembers === 'function' && typeof adapter.listMembers === 'function';
+
+  // The channels you belong to are the only valid import sources — this list is already
+  // membership-scoped (it is your own conversation list), so private channels appear iff you're in
+  // them, and the server re-checks the source-membership rule on the roster read regardless.
+  const sourceChannels = useMemo(
+    () => conversations.filter((c) => c.membership === 'channel' && c.threadId !== threadId),
+    [conversations, threadId],
+  );
 
   useEffect(() => {
     let alive = true;
@@ -51,7 +75,41 @@ export function ConversationSettings({
   }, [adapter, threadId, nonce]);
 
   const memberIds = useMemo(() => new Set(members.map((m) => m.id)), [members]);
+  // A leading '#' switches the picker from people to channels — the roster-import affordance.
+  const channelMode = canImport && q.trim().startsWith('#');
+  const channelQuery = q.trim().slice(1).toLowerCase();
   const addable = directory.filter((p) => !memberIds.has(p.id) && p.name.toLowerCase().includes(q.trim().toLowerCase()));
+  const matchingChannels = sourceChannels.filter((c) => c.title.toLowerCase().includes(channelQuery));
+
+  /** Stage an import: read the source roster, then diff it against who is already here. */
+  async function stageImport(source: Conversation): Promise<void> {
+    setBusy(true);
+    setError(null);
+    try {
+      const roster = await adapter.listMembers!(source.threadId);
+      setPending({
+        source,
+        newcomers: roster.filter((p) => !memberIds.has(p.id)),
+        alreadyHere: roster.filter((p) => memberIds.has(p.id)).length,
+      });
+    } catch (e) {
+      setError(e instanceof Error ? e.message : String(e));
+    } finally {
+      setBusy(false);
+    }
+  }
+
+  /** Commit the staged import. One bulk call; the result reports what actually landed. */
+  async function confirmImport(): Promise<void> {
+    if (!pending) return;
+    const ids = pending.newcomers.map((p) => p.id);
+    await run(async () => {
+      const res = await adapter.addMembers!(threadId, ids);
+      setImported(res);
+      setPending(null);
+      setQ('');
+    });
+  }
 
   async function run(fn: () => Promise<void>): Promise<void> {
     setBusy(true);
@@ -109,23 +167,73 @@ export function ConversationSettings({
               </div>
             </div>
 
-            {canManage ? (
+            {canManage && pending ? (
+              // Confirm step — an import is an administrative action, so it never fires on a stray click.
+              <div className="miu-field">
+                <span className="miu-field-lbl">Add from #{pending.source.title}</span>
+                {pending.newcomers.length === 0 ? (
+                  <div className="miu-empty">Everyone from #{pending.source.title} is already here.</div>
+                ) : (
+                  <div className="miu-empty">
+                    Add {pending.newcomers.length} {pending.newcomers.length === 1 ? 'person' : 'people'} from #{pending.source.title}?
+                    {pending.alreadyHere > 0 ? ` (${pending.alreadyHere} already here)` : ''}
+                  </div>
+                )}
+                <div className="miu-composer-row">
+                  <button type="button" className="miu-tab" disabled={busy} onClick={() => setPending(null)}>Cancel</button>
+                  <button type="button" className="miu-send" disabled={busy || pending.newcomers.length === 0} onClick={() => void confirmImport()}>
+                    Add {pending.newcomers.length > 0 ? pending.newcomers.length : ''}
+                  </button>
+                </div>
+              </div>
+            ) : null}
+
+            {canManage && !pending ? (
               <div className="miu-field">
                 <span className="miu-field-lbl">Add people</span>
-                <input className="miu-input" value={q} onChange={(e) => setQ(e.target.value)} placeholder="Search people…" aria-label="Search people" />
+                <input
+                  className="miu-input"
+                  value={q}
+                  onChange={(e) => { setQ(e.target.value); setImported(null); }}
+                  placeholder={canImport ? 'Search people… or # for a channel' : 'Search people…'}
+                  aria-label="Search people"
+                />
                 <div className="miu-settings-list">
-                  {addable.length === 0 ? <div className="miu-empty">No one to add.</div> : null}
-                  {addable.slice(0, 25).map((p) => (
-                    <button key={p.id} type="button" className="miu-settings-member is-add" disabled={busy} onClick={() => void run(() => adapter.addMember!(threadId, p.id))}>
-                      <span className="miu-settings-name">{p.name}</span>
-                      <span className="miu-pill">{p.kind}</span>
-                      <span className="miu-settings-plus" aria-hidden="true">＋</span>
-                    </button>
-                  ))}
+                  {channelMode ? (
+                    <>
+                      {matchingChannels.length === 0 ? <div className="miu-empty">No channels to add from.</div> : null}
+                      {matchingChannels.slice(0, 25).map((c) => (
+                        <button key={c.threadId} type="button" className="miu-settings-member is-add" disabled={busy} onClick={() => void stageImport(c)}>
+                          <span className="miu-settings-name">#{c.title}</span>
+                          <span className="miu-pill">channel</span>
+                          <span className="miu-settings-plus" aria-hidden="true">＋</span>
+                        </button>
+                      ))}
+                    </>
+                  ) : (
+                    <>
+                      {addable.length === 0 ? <div className="miu-empty">No one to add.</div> : null}
+                      {addable.slice(0, 25).map((p) => (
+                        <button key={p.id} type="button" className="miu-settings-member is-add" disabled={busy} onClick={() => void run(() => adapter.addMember!(threadId, p.id))}>
+                          <span className="miu-settings-name">{p.name}</span>
+                          <span className="miu-pill">{p.kind}</span>
+                          <span className="miu-settings-plus" aria-hidden="true">＋</span>
+                        </button>
+                      ))}
+                    </>
+                  )}
                 </div>
               </div>
             ) : null}
 
+            {imported ? (
+              <div className="miu-empty">
+                Added {imported.added.length}
+                {imported.skipped.length > 0 ? ` · ${imported.skipped.length} already a member` : ''}
+                {imported.failed.length > 0 ? ` · ${imported.failed.length} failed` : ''}
+              </div>
+            ) : null}
+
             {error ? <div className="miu-empty miu-error">{error}</div> : null}
           </div>
           <div className="miu-modal-foot">

packages/iios-messaging-ui/src/components/message-item.tsx

@@ -1,5 +1,5 @@
 import { useRef, useState } from 'react';
-import { highlightMentions } from '../mentions';
+import { renderRichText } from '../rich-text';
 import { PopoverPortal } from './popover-portal';
 import type { Attachment } from '../types';
 import type { UiMessage } from '../hooks/use-messages';
@@ -65,7 +65,7 @@ export function MessageItem({
     <div className={`miu-msg${message.mine ? ' is-mine' : ''}${message.pending ? ' is-pending' : ''}`}>
       <div className="miu-bubble-row">
         <div className="miu-bubble">
-          {m.text ? highlightMentions(m.text, memberNames) : null}
+          {m.text ? renderRichText(m.text, memberNames) : null}
           {m.attachment ? <AttachmentView att={m.attachment} /> : null}
         </div>
         <time className="miu-msg-time" dateTime={m.at} title={Number.isNaN(+new Date(m.at)) ? '' : new Date(m.at).toLocaleString()}>

packages/iios-messaging-ui/src/hooks/use-messages.test.tsx

@@ -158,3 +158,39 @@ describe('useMessages', () => {
     }
   });
 });
+
+describe('read receipts', () => {
+  // REGRESSION: the hook reported a read of the newest message regardless of author, so sending a
+  // message made the server echo a receipt for it and the sender's own bubble showed "Seen"
+  // immediately — in DMs, groups and channels alike, before anyone had opened it.
+  it('never reports a read of my own message', async () => {
+    const adapter = new MockAdapter();
+    const markRead = vi.spyOn(adapter, 'markRead');
+
+    const { result } = renderHook(() => useMessages('th_mock_1'), { wrapper: wrap(adapter) });
+    await waitFor(() => expect(result.current.loading).toBe(false));
+    markRead.mockClear();
+
+    await act(async () => {
+      await result.current.send('a message from me');
+    });
+
+    // The newest message is now mine — reading it would be reading myself.
+    const mine = result.current.messages.filter((m) => m.mine).map((m) => m.id);
+    for (const call of markRead.mock.calls) expect(mine).not.toContain(call[1]);
+  });
+
+  it('does not mark my message seen just because the receipt came back', async () => {
+    const adapter = new MockAdapter();
+    const { result } = renderHook(() => useMessages('th_mock_1'), { wrapper: wrap(adapter) });
+    await waitFor(() => expect(result.current.loading).toBe(false));
+
+    await act(async () => {
+      await result.current.send('hello there');
+    });
+
+    const mine = result.current.messages.find((m) => m.mine && m.text === 'hello there');
+    expect(mine).toBeDefined();
+    expect(result.current.seenIds.has(mine!.id)).toBe(false);
+  });
+});

packages/iios-messaging-ui/src/hooks/use-messages.ts

@@ -160,13 +160,19 @@ export function useMessages(threadId: string | null): MessagesState {
     if (threadId) adapter.sendTyping(threadId);
   }, [adapter, threadId]);
 
-  // The newest acknowledged (non-pending) message id — what we report as read.
+  // The newest acknowledged (non-pending) message id from SOMEONE ELSE — what we report as read.
+  //
+  // Skipping my own messages is load-bearing, not tidiness: reporting a read of the message I just
+  // sent makes the server broadcast a receipt for it, and the sender's own client then paints it
+  // "Seen" the instant it is delivered, before anyone has looked at it.
   const lastReadableId = useMemo(() => {
     for (let i = raw.length - 1; i >= 0; i--) {
-      if (!raw[i]!.pending) return raw[i]!.id;
+      const m = raw[i]!;
+      if (m.pending || isOwnMessage(m, currentActorId)) continue;
+      return m.id;
     }
     return null;
-  }, [raw]);
+  }, [raw, currentActorId]);
 
   // Report my read of the newest message (drives the other side's "seen" tick).
   // Keyed on the id, not the whole array, so reaction/optimistic churn doesn't re-fire it.

packages/iios-messaging-ui/src/index.ts

@@ -9,6 +9,8 @@ export { useMessages } from './hooks/use-messages';
 export { useChannels } from './hooks/use-channels';
 export { useMembers } from './hooks/use-members';
 export { isOwnMessage } from './types';
+// Message-body markup (bold/italic/strike/code/links + mentions) as a safe ReactNode tree.
+export { renderRichText, safeHref, stripMarkup } from './rich-text';
 
 // Rendered UI. Pair with the './styles.css' export (or override the --miu-* tokens).
 export { Messenger } from './components/messenger';
@@ -30,6 +32,7 @@ export type { MessagesState, UiMessage } from './hooks/use-messages';
 export type { ChannelsState } from './hooks/use-channels';
 export type {
   Attachment,
+  BulkAddResult,
   ChannelSummary,
   ChannelVisibility,
   Conversation,

packages/iios-messaging-ui/src/rich-text.test.tsx

@@ -0,0 +1,95 @@
+import { describe, it, expect } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import { renderRichText, safeHref, stripMarkup } from './rich-text';
+
+function show(text: string, names: string[] = []) {
+  render(<div data-testid="out">{renderRichText(text, names)}</div>);
+  return screen.getByTestId('out');
+}
+
+describe('renderRichText', () => {
+  it('renders bold, italic and strikethrough', () => {
+    const el = show('*bold* _italic_ ~gone~');
+    expect(el.querySelector('strong')?.textContent).toBe('bold');
+    expect(el.querySelector('em')?.textContent).toBe('italic');
+    expect(el.querySelector('del')?.textContent).toBe('gone');
+  });
+
+  it('nests styles', () => {
+    const el = show('*bold with _italic_ inside*');
+    const strong = el.querySelector('strong');
+    expect(strong?.textContent).toBe('bold with italic inside');
+    expect(strong?.querySelector('em')?.textContent).toBe('italic');
+  });
+
+  it('leaves markup inside code completely literal', () => {
+    const el = show('use `*not bold*` here');
+    expect(el.querySelector('code')?.textContent).toBe('*not bold*');
+    expect(el.querySelector('strong')).toBeNull();
+  });
+
+  it('renders a fenced code block', () => {
+    const el = show('```\nconst a = 1;\n```');
+    expect(el.querySelector('pre.miu-code-block')?.textContent).toBe('const a = 1;\n');
+    expect(el.querySelector('code')).not.toBeNull();
+  });
+
+  it('does not treat arithmetic or a lone marker as formatting', () => {
+    const el = show('5 * 3 = 15 and a lone * plus snake_case_name');
+    expect(el.querySelector('strong')).toBeNull();
+    expect(el.querySelector('em')).toBeNull();
+    expect(el.textContent).toBe('5 * 3 = 15 and a lone * plus snake_case_name');
+  });
+
+  it('linkifies http(s) and www URLs without swallowing trailing punctuation', () => {
+    const el = show('see https://example.com/a?b=1, ok');
+    const a = el.querySelector('a');
+    expect(a?.getAttribute('href')).toBe('https://example.com/a?b=1');
+    expect(a?.textContent).toBe('https://example.com/a?b=1');
+    expect(a?.getAttribute('rel')).toContain('noopener');
+    expect(el.textContent).toContain(', ok');
+  });
+
+  it('never renders a javascript: URL as a link (XSS guard)', () => {
+    expect(safeHref('javascript:alert(1)')).toBeNull();
+    expect(safeHref('data:text/html,<script>')).toBeNull();
+    expect(safeHref('https://ok.example')).toBe('https://ok.example/');
+    // and it is not linkified in message text either
+    const el = show('javascript:alert(1)');
+    expect(el.querySelector('a')).toBeNull();
+  });
+
+  it('escapes nothing as HTML — angle brackets stay text', () => {
+    const el = show('<img src=x onerror=alert(1)>');
+    expect(el.querySelector('img')).toBeNull();
+    expect(el.textContent).toBe('<img src=x onerror=alert(1)>');
+  });
+
+  it('still highlights @mentions alongside formatting', () => {
+    const el = show('*hi* @Sofia Ramirez', ['Sofia Ramirez']);
+    expect(el.querySelector('strong')?.textContent).toBe('hi');
+    expect(el.querySelector('.miu-mention')?.textContent).toBe('@Sofia Ramirez');
+  });
+
+  it('returns plain text unchanged when there is no markup', () => {
+    expect(show('just a normal message').textContent).toBe('just a normal message');
+  });
+});
+
+describe('stripMarkup (one-line previews)', () => {
+  it('drops the markers so a preview never shows ~crazy~', () => {
+    expect(stripMarkup('~crazy~')).toBe('crazy');
+    expect(stripMarkup('*bold* and _italic_')).toBe('bold and italic');
+  });
+
+  it('unwraps code and flattens a fenced block', () => {
+    expect(stripMarkup('run `npm ci` now')).toBe('run npm ci now');
+    expect(stripMarkup('```\nconst a = 1;\n```')).toBe('const a = 1;');
+  });
+
+  it('handles nesting and leaves ordinary text (and identifiers) alone', () => {
+    expect(stripMarkup('*bold with _italic_*')).toBe('bold with italic');
+    expect(stripMarkup('snake_case_name and 5 * 3')).toBe('snake_case_name and 5 * 3');
+    expect(stripMarkup('plain preview')).toBe('plain preview');
+  });
+});

packages/iios-messaging-ui/src/rich-text.tsx

@@ -0,0 +1,162 @@
+import type { ReactNode } from 'react';
+import { highlightMentions } from './mentions';
+
+/**
+ * WhatsApp-style lightweight markup for message bodies.
+ *
+ *   *bold*   _italic_   ~strike~   `code`   ```code block```   plus bare URLs
+ *
+ * Messages stay PLAIN TEXT on the wire — this only affects rendering, so nothing already stored
+ * breaks and a client without this build just shows the marker characters.
+ *
+ * Security: this returns a ReactNode tree and never touches dangerouslySetInnerHTML, so message
+ * text can never inject markup. The one genuinely dangerous surface is links, where an attacker
+ * could otherwise smuggle `javascript:` — {@link safeHref} allows only http/https/mailto.
+ *
+ * Precedence (deliberate): code is tokenized first and its contents are left completely alone, so
+ * `*not bold*` inside backticks stays literal. Everything else may nest (*bold with _italic_*).
+ */
+
+/** Only protocols that cannot execute script. Anything else renders as plain text, not a link. */
+export function safeHref(raw: string): string | null {
+  try {
+    const url = new URL(raw);
+    return ['http:', 'https:', 'mailto:'].includes(url.protocol) ? url.href : null;
+  } catch {
+    return null;
+  }
+}
+
+// A bare URL: stops before trailing punctuation so "see https://x.com." doesn't swallow the period.
+const URL_RE = /\bhttps?:\/\/[^\s<>()]+[^\s<>().,;:!?'"]|\bwww\.[^\s<>()]+[^\s<>().,;:!?'"]/g;
+
+interface Rule {
+  /** The wrapping marker, e.g. '*' for bold. */
+  marker: string;
+  tag: 'strong' | 'em' | 'del';
+}
+
+const RULES: Rule[] = [
+  { marker: '*', tag: 'strong' },
+  { marker: '_', tag: 'em' },
+  { marker: '~', tag: 'del' },
+];
+
+/** Escape a marker so it is literal inside a RegExp. */
+function esc(s: string): string {
+  return s.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+}
+
+/**
+ * Find the first inline span (`*bold*`, `_italic_`, `~strike~`) in `text`.
+ *
+ * Two guards keep everyday prose from being mangled:
+ *   - the content must not start or end with whitespace, so "5 * 3 = 15" and a lone `*` are inert;
+ *   - the markers must sit on word boundaries, so `snake_case_name` is NOT italicised (the bug
+ *     every naive markdown renderer ships with).
+ */
+function firstSpan(text: string): { start: number; end: number; rule: Rule; inner: string } | null {
+  let best: { start: number; end: number; rule: Rule; inner: string } | null = null;
+  for (const rule of RULES) {
+    const m = esc(rule.marker);
+    // (lead)(marker)(inner)(marker) — `lead` keeps the boundary char out of the match itself.
+    const re = new RegExp(`(^|[^\\w${m}])${m}(?=\\S)([^${m}]*[^\\s${m}])${m}(?![\\w${m}])`);
+    const found = re.exec(text);
+    if (!found) continue;
+    const start = found.index + (found[1]?.length ?? 0);
+    if (best === null || start < best.start) {
+      best = { start, end: found.index + found[0].length, rule, inner: found[2] ?? '' };
+    }
+  }
+  return best;
+}
+
+/**
+ * The same text with its formatting markers removed, for places that show a one-line plain-text
+ * preview (conversation list, notifications) where `~crazy~` must read as "crazy" — you cannot
+ * render nodes into those, so the markers have to come off rather than be styled.
+ */
+export function stripMarkup(text: string): string {
+  const noCode = text
+    .replace(/```([\s\S]*?)```/g, (_m, code: string) => code.trim())
+    .replace(/`([^`\n]+)`/g, '$1');
+  return stripSpans(noCode);
+}
+
+/** Recursively drop *bold* / _italic_ / ~strike~ markers, honouring the same word-boundary rule. */
+function stripSpans(text: string): string {
+  const span = firstSpan(text);
+  if (!span) return text;
+  return text.slice(0, span.start) + stripSpans(span.inner) + stripSpans(text.slice(span.end));
+}
+
+/** Linkify + mention-highlight a run of text that carries no other markup. */
+function plain(text: string, memberNames: string[], keyed: () => string): ReactNode[] {
+  const out: ReactNode[] = [];
+  let last = 0;
+  let m: RegExpExecArray | null;
+  URL_RE.lastIndex = 0;
+  while ((m = URL_RE.exec(text)) !== null) {
+    if (m.index > last) out.push(...highlightMentions(text.slice(last, m.index), memberNames));
+    const raw = m[0];
+    const href = safeHref(raw.startsWith('www.') ? `https://${raw}` : raw);
+    out.push(
+      href ? (
+        <a key={keyed()} className="miu-link" href={href} target="_blank" rel="noopener noreferrer nofollow">
+          {raw}
+        </a>
+      ) : (
+        raw
+      ),
+    );
+    last = m.index + raw.length;
+  }
+  if (last < text.length) out.push(...highlightMentions(text.slice(last), memberNames));
+  return out;
+}
+
+/** Tokenize one segment that is known to contain no code, recursing so styles can nest. */
+function inline(text: string, memberNames: string[], keyed: () => string): ReactNode[] {
+  const span = firstSpan(text);
+  if (!span) return plain(text, memberNames, keyed);
+  const { start, end, rule, inner } = span;
+  const Tag = rule.tag;
+  return [
+    ...(start > 0 ? inline(text.slice(0, start), memberNames, keyed) : []),
+    <Tag key={keyed()}>{inline(inner, memberNames, keyed)}</Tag>,
+    ...(end < text.length ? inline(text.slice(end), memberNames, keyed) : []),
+  ];
+}
+
+/**
+ * Render message text as a safe ReactNode tree: code first (its contents stay literal), then
+ * nested bold/italic/strike, then links and @mentions.
+ */
+export function renderRichText(text: string, memberNames: string[] = []): ReactNode[] {
+  let n = 0;
+  const keyed = (): string => `rt${n++}`;
+  const out: ReactNode[] = [];
+  // ```block``` or `inline` — matched together so the longer fence wins.
+  const CODE_RE = /```([\s\S]+?)```|`([^`\n]+)`/g;
+  let last = 0;
+  let m: RegExpExecArray | null;
+  while ((m = CODE_RE.exec(text)) !== null) {
+    if (m.index > last) out.push(...inline(text.slice(last, m.index), memberNames, keyed));
+    if (m[1] !== undefined) {
+      out.push(
+        <pre key={keyed()} className="miu-code-block">
+          <code>{m[1].replace(/^\n/, '')}</code>
+        </pre>,
+      );
+    } else {
+      out.push(
+        <code key={keyed()} className="miu-code">
+          {m[2]}
+        </code>,
+      );
+    }
+    last = m.index + m[0].length;
+  }
+  if (last < text.length) out.push(...inline(text.slice(last), memberNames, keyed));
+  return out.length > 0 ? out : [text];
+}

packages/iios-messaging-ui/src/styles.css

@@ -10,6 +10,8 @@
   --miu-accent: #fda913;
   --miu-accent-text: #1a1206;
   --miu-radius: 12px;
+  /* Collapsed composer height — textarea, attach and send all use this so they never diverge. */
+  --miu-composer-h: 38px;
 
   display: flex;
   height: 100%;
@@ -371,13 +373,17 @@
 .miu-composer-row {
   display: flex;
   gap: 8px;
+  /* Pin the controls to the bottom so a growing textarea never stretches them (WhatsApp). */
+  align-items: flex-end;
 }
 .miu-file-input {
   display: none;
 }
 .miu-attach-btn {
   flex-shrink: 0;
-  width: 38px;
+  box-sizing: border-box;
+  width: var(--miu-composer-h);
+  height: var(--miu-composer-h);
   border-radius: 10px;
   border: 1px solid var(--miu-border);
   background: var(--miu-panel);
@@ -515,6 +521,78 @@ button.miu-attach-dl:hover {
 .miu-input:focus {
   border-color: var(--miu-accent);
 }
+/* Chat box: one row by default, grows with content (JS sets height), then scrolls.
+   border-box so min/max-height are the REAL height — under the default content-box the padding
+   and border are added on top, which made a "38px" box render ~58px and dragged the row with it. */
+/* Composer box only. NOTE: .miu-textarea is already taken by the inbox mail composer further
+   down (resize: vertical; min-height: 90px) — sharing it made that rule win and blow this up. */
+.miu-composer-box {
+  box-sizing: border-box;
+  resize: none;
+  /* Collapsed height must equal the single-line <input> this replaced: 20px of line + 16px
+     padding + 2px border = 38px. Padding is tightened from .miu-input's 9px so a 14px/1.4 line
+     fits the content box exactly — at 9px it overflowed and forced a scrollbar. */
+  padding: 8px 12px;
+  line-height: 1.4;
+  min-height: var(--miu-composer-h);
+  max-height: 160px;
+  overflow-y: auto;
+  font-family: inherit;
+}
+.miu-format-bar {
+  display: flex;
+  gap: 2px;
+  padding: 0 2px 4px;
+}
+.miu-format-btn {
+  min-width: 26px;
+  height: 24px;
+  padding: 0 6px;
+  border: none;
+  border-radius: 6px;
+  background: transparent;
+  color: var(--miu-muted);
+  font-size: 12px;
+  font-weight: 700;
+  cursor: pointer;
+}
+.miu-format-btn:hover {
+  background: var(--miu-panel-2);
+  color: var(--miu-text);
+}
+
+/* ── Rendered message formatting ── */
+.miu-code {
+  padding: 1px 5px;
+  border-radius: 5px;
+  background: var(--miu-panel-2);
+  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+  font-size: 0.92em;
+}
+.miu-code-block {
+  margin: 6px 0 2px;
+  padding: 8px 10px;
+  border-radius: 8px;
+  background: var(--miu-panel-2);
+  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+  font-size: 0.92em;
+  white-space: pre-wrap;
+  overflow-x: auto;
+}
+.miu-link {
+  color: var(--miu-accent);
+  text-decoration: underline;
+}
+.miu-msg.is-mine .miu-bubble .miu-link {
+  color: var(--miu-accent-text);
+}
+/* On your own (accent-filled) bubble the panel background would sit dark-on-dark against the dark
+   accent text — tint the bubble instead so the chip reads on any accent colour. */
+.miu-msg.is-mine .miu-bubble .miu-code,
+.miu-msg.is-mine .miu-bubble .miu-code-block {
+  background: rgba(0, 0, 0, 0.16);
+  color: var(--miu-accent-text);
+}
 .miu-send {
   padding: 0 16px;
   border-radius: 10px;
@@ -524,6 +602,11 @@ button.miu-attach-dl:hover {
   color: var(--miu-accent-text);
   background: var(--miu-accent);
 }
+.miu-composer .miu-send {
+  box-sizing: border-box;
+  flex-shrink: 0;
+  height: var(--miu-composer-h);
+}
 .miu-send:disabled {
   opacity: 0.5;
   cursor: not-allowed;

packages/iios-messaging-ui/src/types.ts

@@ -24,6 +24,16 @@ export interface Conversation {
   topic?: string | null;
 }
 
+/**
+ * Outcome of a bulk member import, reported per user so a partial result is never silent.
+ * `skipped` were already members (which makes a repeat import a no-op); `failed` could not be added.
+ */
+export interface BulkAddResult {
+  added: string[];
+  skipped: string[];
+  failed: string[];
+}
+
 /** A discoverable channel (from browseChannels) — includes ones the caller has NOT joined. */
 export interface ChannelSummary {
   threadId: string;

packages/iios-service/src/messaging/message.gateway.ts

@@ -159,7 +159,9 @@ export class MessageGateway implements OnGatewayInit, OnGatewayConnection, OnGat
   async read(@ConnectedSocket() client: Socket, @MessageBody() body: { threadId: string; interactionId: string }) {
     const { principal } = client.data as SocketState;
     const r = await this.messages.markRead(body.threadId, principal, body.interactionId);
-    this.server.to(body.threadId).emit('receipt', { interactionId: r.interactionId, actorId: r.actorId, kind: 'READ' });
+    // userId as well as actorId: actorId is an IIOS actor UUID, but clients hold the caller's
+    // USERID, so without this they cannot tell their own receipt from someone else's.
+    this.server.to(body.threadId).emit('receipt', { interactionId: r.interactionId, actorId: r.actorId, userId: principal.userId, kind: 'READ' });
     return { ok: true };
   }
 
@@ -167,7 +169,9 @@ export class MessageGateway implements OnGatewayInit, OnGatewayConnection, OnGat
   async delivered(@ConnectedSocket() client: Socket, @MessageBody() body: { threadId: string; interactionId: string }) {
     const { principal } = client.data as SocketState;
     const r = await this.messages.markDelivered(body.threadId, principal, body.interactionId);
-    this.server.to(body.threadId).emit('receipt', { interactionId: r.interactionId, actorId: r.actorId, kind: 'DELIVERED' });
+    // userId as well as actorId: actorId is an IIOS actor UUID, but clients hold the caller's
+    // USERID, so without this they cannot tell their own receipt from someone else's.
+    this.server.to(body.threadId).emit('receipt', { interactionId: r.interactionId, actorId: r.actorId, userId: principal.userId, kind: 'DELIVERED' });
     return { ok: true };
   }
 

packages/iios-service/src/messaging/message.service.ts

@@ -1,5 +1,5 @@
 import { randomUUID } from 'node:crypto';
-import { Inject, Injectable, NotFoundException } from '@nestjs/common';
+import { BadRequestException, Inject, Injectable, NotFoundException } from '@nestjs/common';
 import { Prisma } from '@prisma/client';
 import { CloudEvent, IIOS_EVENTS, IiosPlatformPorts } from '@insignia/iios-contracts';
 import { PrismaService } from '../prisma/prisma.service';
@@ -74,6 +74,10 @@ export interface OpenThreadResult {
  */
 @Injectable()
 export class MessageService {
+  /** Ceiling on one bulk participant import — bounds the work per request and the blast radius of a
+   *  mistaken import. Raise here if a larger roster copy is ever needed. */
+  static readonly MAX_BULK_PARTICIPANTS = 200;
+
   constructor(
     private readonly prisma: PrismaService,
     @Inject(PLATFORM_PORTS) private readonly ports: IiosPlatformPorts,
@@ -167,6 +171,76 @@ export class MessageService {
     return { threadId, participantCount: participantCount + 1 };
   }
 
+  /**
+   * Bulk sibling of {@link addParticipant}: add many users in ONE governed operation. The app uses
+   * this to import a roster (e.g. "add everyone from that channel"); the kernel stays generic — it
+   * receives an explicit list of userIds and never learns where the list came from.
+   *
+   * Deliberately NOT atomic: a single unresolvable user must not sink the whole import, so each is
+   * attempted independently and the outcome is reported per user. Already-members are `skipped`,
+   * which makes a re-run a no-op.
+   */
+  async addParticipants(
+    threadId: string,
+    principal: MessagePrincipal,
+    targetUserIds: string[],
+    role = 'MEMBER',
+  ): Promise<{ threadId: string; added: string[]; skipped: string[]; failed: string[]; participantCount: number }> {
+    const unique = [...new Set(targetUserIds.map((u) => u.trim()).filter(Boolean))];
+    if (unique.length === 0) throw new BadRequestException('at least one userId is required');
+    if (unique.length > MessageService.MAX_BULK_PARTICIPANTS) {
+      throw new BadRequestException(`at most ${MessageService.MAX_BULK_PARTICIPANTS} participants can be added at once`);
+    }
+
+    const thread = await this.prisma.iiosThread.findUnique({ where: { id: threadId } });
+    if (!thread) throw new NotFoundException('thread not found');
+    const caller = await this.actors.resolveActor(thread.scopeId, principal);
+    const callerP = await this.prisma.iiosThreadParticipant.findUnique({ where: { threadId_actorId: { threadId, actorId: caller.id } } });
+    const participantCount = await this.prisma.iiosThreadParticipant.count({ where: { threadId } });
+    const membership = (thread.metadata as { membership?: string } | null)?.membership;
+
+    // ONE decision for the whole batch — `targetCount` lets policy reason about the resulting size
+    // (e.g. the dm two-person cap) instead of being asked the same question N times.
+    await decideOrThrow(this.ports, {
+      action: 'iios.thread.participant.add',
+      threadId,
+      scopeId: thread.scopeId,
+      membership,
+      participantCount,
+      callerRole: callerP?.participantRole,
+      targetCount: unique.length,
+      role,
+    });
+
+    const scope = await this.actors.resolveScope(principal);
+    const added: string[] = [];
+    const skipped: string[] = [];
+    const failed: string[] = [];
+    for (const targetUserId of unique) {
+      try {
+        const target = await this.actors.resolveActor(scope.id, {
+          userId: targetUserId,
+          appId: principal.appId,
+          orgId: principal.orgId,
+          tenantId: principal.tenantId,
+          displayName: targetUserId,
+        });
+        const existing = await this.prisma.iiosThreadParticipant.findUnique({
+          where: { threadId_actorId: { threadId, actorId: target.id } },
+        });
+        if (existing) {
+          skipped.push(targetUserId);
+          continue;
+        }
+        await this.actors.ensureParticipant(threadId, target.id, role);
+        added.push(targetUserId);
+      } catch {
+        failed.push(targetUserId);
+      }
+    }
+    return { threadId, added, skipped, failed, participantCount: participantCount + added.length };
+  }
+
   /**
    * Governed thread rename (a generic subject update). Policy decides who may rename — for a
    * membership thread the dev OPA requires the caller be a group ADMIN. The kernel only writes
@@ -224,7 +298,19 @@ export class MessageService {
   async listParticipants(threadId: string, principal: MessagePrincipal): Promise<Array<{ userId: string; displayName: string; role: string }>> {
     const thread = await this.prisma.iiosThread.findUnique({ where: { id: threadId } });
     if (!thread) throw new NotFoundException('thread not found');
-    await decideOrThrow(this.ports, { action: 'iios.thread.read', threadId, scopeId: thread.scopeId });
+    // Roster reads are membership-governed (a private channel's members must not be enumerable by
+    // a non-member), so the decision carries the caller's role + the thread's opaque attributes.
+    const caller = await this.actors.resolveActor(thread.scopeId, principal);
+    const callerP = await this.prisma.iiosThreadParticipant.findUnique({ where: { threadId_actorId: { threadId, actorId: caller.id } } });
+    const meta = thread.metadata as { membership?: string; visibility?: string } | null;
+    await decideOrThrow(this.ports, {
+      action: 'iios.thread.participant.list',
+      threadId,
+      scopeId: thread.scopeId,
+      membership: meta?.membership,
+      visibility: meta?.visibility,
+      callerRole: callerP?.participantRole,
+    });
     const parts = await this.prisma.iiosThreadParticipant.findMany({
       where: { threadId },
       include: { actor: { include: { sourceHandle: true } } },

packages/iios-service/src/messaging/message.spec.ts

@@ -146,6 +146,61 @@ describe('Governed membership + replies (v1.1, policy-enforced)', () => {
     expect(await prisma.iiosThreadParticipant.count({ where: { threadId } })).toBe(1);
   });
 
+  it('roster reads are membership-governed: a non-member cannot list a private channel’s members', async () => {
+    const s = gov();
+    const { threadId: priv } = await s.openThread(null, alice, { membership: 'channel', metadata: { visibility: 'private' }, subject: 'deals', creatorRole: 'ADMIN' });
+    // bob is not a member — he must not be able to enumerate who is.
+    await expect(s.listParticipants(priv, bob)).rejects.toBeInstanceOf(PolicyDeniedError);
+    await s.addParticipant(priv, alice, 'bob');
+    expect((await s.listParticipants(priv, bob)).map((m) => m.userId).sort()).toEqual(['alice', 'bob']);
+
+    // a PUBLIC channel's roster stays open (it is discoverable anyway)
+    const { threadId: pub } = await s.openThread(null, alice, { membership: 'channel', metadata: { visibility: 'public' }, subject: 'general', creatorRole: 'ADMIN' });
+    expect((await s.listParticipants(pub, bob)).map((m) => m.userId)).toEqual(['alice']);
+  });
+
+  it('addParticipants: bulk-adds in one governed call, skipping existing members (re-run is a no-op)', async () => {
+    const s = gov();
+    const { threadId } = await s.openThread(null, alice, { membership: 'channel', metadata: { visibility: 'private' }, subject: 'ops', creatorRole: 'ADMIN' });
+    await s.addParticipant(threadId, alice, 'bob'); // bob is already in
+
+    const res = await s.addParticipants(threadId, alice, ['bob', 'carol', 'dave']);
+    expect(res.added.sort()).toEqual(['carol', 'dave']);
+    expect(res.skipped).toEqual(['bob']);
+    expect(res.failed).toEqual([]);
+    expect(res.participantCount).toBe(4); // alice, bob, carol, dave
+    expect(await prisma.iiosThreadParticipant.count({ where: { threadId } })).toBe(4);
+
+    // idempotent: a second identical import adds nobody
+    const again = await s.addParticipants(threadId, alice, ['bob', 'carol', 'dave']);
+    expect(again.added).toEqual([]);
+    expect(again.skipped.sort()).toEqual(['bob', 'carol', 'dave']);
+    expect(await prisma.iiosThreadParticipant.count({ where: { threadId } })).toBe(4);
+  });
+
+  it('addParticipants is governed by the same policy as a single add (a plain member is denied)', async () => {
+    const s = gov();
+    const { threadId } = await s.openThread(null, alice, { membership: 'group', creatorRole: 'ADMIN' });
+    await s.addParticipant(threadId, alice, 'bob'); // bob joins as a plain MEMBER
+    await expect(s.addParticipants(threadId, bob, ['carol', 'dave'])).rejects.toBeInstanceOf(PolicyDeniedError);
+  });
+
+  it('addParticipants rejects an empty list and anything over the batch cap', async () => {
+    const s = gov();
+    const { threadId } = await s.openThread(null, alice, { membership: 'channel', metadata: { visibility: 'private' }, creatorRole: 'ADMIN' });
+    await expect(s.addParticipants(threadId, alice, [])).rejects.toThrow(/at least one/i);
+    const tooMany = Array.from({ length: MessageService.MAX_BULK_PARTICIPANTS + 1 }, (_, n) => `user_${n}`);
+    await expect(s.addParticipants(threadId, alice, tooMany)).rejects.toThrow(/at most/i);
+  });
+
+  it('addParticipants respects the dm two-person cap for the whole batch', async () => {
+    const s = gov();
+    const { threadId } = await s.openThread(null, alice, { membership: 'dm' });
+    // alice is alone; adding two at once would make three — policy must deny the batch.
+    await expect(s.addParticipants(threadId, alice, ['bob', 'carol'])).rejects.toBeInstanceOf(PolicyDeniedError);
+    expect((await s.addParticipants(threadId, alice, ['bob'])).added).toEqual(['bob']);
+  });
+
   it('self-join is governed: a non-member cannot open a thread by id; after being added, they can', async () => {
     const s = gov();
     const { threadId } = await s.openThread(null, alice, { membership: 'group', creatorRole: 'ADMIN' });

packages/iios-service/src/platform/dev-opa.port.spec.ts

@@ -49,6 +49,29 @@ describe('DevOpaPort (dev policy plane — membership rules)', () => {
     expect((await opa.decide({ action: 'iios.thread.participant.remove', callerRole: 'MEMBER' })).allow).toBe(true);
   });
 
+  it('the dm cap counts the whole batch, not one add at a time', async () => {
+    const add = (participantCount: number, targetCount: number) =>
+      opa.decide({ action: 'iios.thread.participant.add', membership: 'dm', callerRole: 'MEMBER', participantCount, targetCount });
+    expect((await add(1, 1)).allow).toBe(true); // 1 + 1 = 2, fine
+    const batch = await add(1, 2); // 1 + 2 = 3 — must be denied even though count is only 1
+    expect(batch.allow).toBe(false);
+    expect(batch.obligations[0]?.reason).toMatch(/two people/);
+  });
+
+  it('listing a roster requires membership, except on a public channel', async () => {
+    const list = (extra: Record<string, unknown>) => opa.decide({ action: 'iios.thread.participant.list', ...extra });
+    // a private channel / group / dm: members only
+    const stranger = await list({ membership: 'channel', visibility: 'private', callerRole: undefined });
+    expect(stranger.allow).toBe(false);
+    expect(stranger.obligations[0]?.reason).toMatch(/not a member/);
+    expect((await list({ membership: 'channel', visibility: 'private', callerRole: 'MEMBER' })).allow).toBe(true);
+    expect((await list({ membership: 'group', callerRole: 'ADMIN' })).allow).toBe(true);
+    expect((await list({ membership: 'group', callerRole: undefined })).allow).toBe(false);
+    // a public channel's roster is open, and ungoverned threads are unchanged
+    expect((await list({ membership: 'channel', visibility: 'public', callerRole: undefined })).allow).toBe(true);
+    expect((await list({})).allow).toBe(true);
+  });
+
   it('media upload allows images + docs (incl. html/markdown/csv), denies unknown types and oversize', async () => {
     const up = (mime: string, sizeBytes = 1024) => opa.decide({ action: 'iios.media.upload', mime, sizeBytes });
     for (const mime of ['image/png', 'video/mp4', 'audio/mpeg', 'application/pdf', 'text/plain', 'text/markdown', 'text/html', 'text/csv']) {

packages/iios-service/src/platform/dev-opa.port.ts

@@ -12,6 +12,7 @@ export interface OpaInput {
   membership?: string; // app-set generic thread attribute: 'dm' | 'group' | 'channel'
   visibility?: string; // 'public' | 'private' (channels)
   participantCount?: number;
+  targetCount?: number; // how many participants a single add call is inviting (1 for a single add)
   callerRole?: string; // 'MEMBER' | 'ADMIN'
   alreadyMember?: boolean;
   isMember?: boolean;
@@ -38,11 +39,23 @@ export class DevOpaPort {
     switch (i.action) {
       case 'iios.thread.participant.add': {
         const count = i.participantCount ?? 0;
-        if (i.membership === 'dm' && count >= 2) return deny('a direct message is limited to two people');
+        // `targetCount` is how many are being added in this call (1 for a single add), so the dm cap
+        // holds for a bulk import too instead of being evaluated one-at-a-time.
+        if (i.membership === 'dm' && count + (i.targetCount ?? 1) > 2) return deny('a direct message is limited to two people');
         if (i.callerRole !== 'MEMBER' && i.callerRole !== 'ADMIN') return deny('only a member can add participants');
         if (i.membership === 'group' && i.callerRole !== 'ADMIN') return deny('only a group admin can add or remove members');
         return allow();
       }
+      case 'iios.thread.participant.list': {
+        // Reading a thread's ROSTER. A public channel is open (it is discoverable anyway), but every
+        // other membership thread — dm, group, private channel — requires you to be a member, or any
+        // caller in the scope could enumerate a private channel's members by id. Ungoverned threads
+        // (no membership attribute, e.g. support) keep the previous open behaviour.
+        if (!i.membership) return allow();
+        if (i.membership === 'channel' && i.visibility === 'public') return allow();
+        if (i.callerRole === 'MEMBER' || i.callerRole === 'ADMIN') return allow();
+        return deny('you are not a member of this thread');
+      }
       case 'iios.thread.participant.remove': {
         // Same governance as add: for a group, only an ADMIN removes members. Ungoverned
         // (no membership attr) threads allow removal by any member.

packages/iios-service/src/threads/threads.controller.ts

@@ -70,6 +70,17 @@ export class ThreadsController {
     return this.messages.addParticipant(id, this.principal(auth), body.userId, body.role);
   }
 
+  /**
+   * Governed bulk membership: add many users in one call (e.g. importing another channel's roster).
+   * Reports per-user outcome — `skipped` are already members — so a partial result is never silent.
+   */
+  @Post(':id/participants/bulk')
+  @HttpCode(200)
+  async addParticipants(@Param('id') id: string, @Body() body: { userIds?: string[]; role?: string }, @Headers('authorization') auth?: string) {
+    if (!Array.isArray(body?.userIds)) throw new BadRequestException('userIds must be an array');
+    return this.messages.addParticipants(id, this.principal(auth), body.userIds, body.role);
+  }
+
   /** Members of a thread with their role — drives the group settings member list. */
   @Get(':id/participants')
   async listParticipants(@Param('id') id: string, @Headers('authorization') auth?: string) {