From e7cd1d79328e077b0515d9fea891cf23cdea20e7 Mon Sep 17 00:00:00 2001
From: xNet Test <test@xnet.dev>
Date: Wed, 17 Jun 2026 16:29:34 -0700
Subject: [PATCH 1/4] docs(exploration): explore polished chat & channels UI

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 .../0198_[_]_POLISHED_CHAT_AND_CHANNELS_UI.md | 552 ++++++++++++++++++
 1 file changed, 552 insertions(+)
 create mode 100644 docs/explorations/0198_[_]_POLISHED_CHAT_AND_CHANNELS_UI.md

diff --git a/docs/explorations/0198_[_]_POLISHED_CHAT_AND_CHANNELS_UI.md b/docs/explorations/0198_[_]_POLISHED_CHAT_AND_CHANNELS_UI.md
new file mode 100644
index 000000000..4594a1eb2
--- /dev/null
+++ b/docs/explorations/0198_[_]_POLISHED_CHAT_AND_CHANNELS_UI.md
@@ -0,0 +1,552 @@
+# Polished Chat & Channels UI — A Cleaner, Fancier, More Robust Comms Surface
+
+## Problem Statement
+
+The ask, verbatim:
+
+> Let's make the chat and channels UI way better. So, way cleaner, way fancier, way more robust. We can look at Slack, we can look at Microsoft Teams, we can look at Zulip, we can look at Discord, see how they do things, and then take some screenshots and make the screenshots just look way, way better. So more features, cleaner UI, cleaner UX, cleaner interactions, animations, all that sort of stuff.
+
+xNet already has a real, working comms surface: a `Chats` rail icon, a left-panel channel/DM/voice list (`ChatsPanel`), and a channel tab (`ChannelView` → `ChannelChat`) with a genuinely sophisticated structured composer (`@` mentions, `#` tags, `[[` wiki-links, all keyboard-navigable). It is wired into the workbench and synced through the same `Change<T>` node protocol as everything else.
+
+But visually and interactionally it reads as a developer-grade prototype, not a product people reach for over Slack. Messages are tiny `text-xs` rows with no avatars, no grouping, no hover affordances, no reactions, no threads, and no read/unread structure. The data model is far richer than what the UI shows — reactions, threads, attachments, edit/delete, and presence status are all *modeled* but never *rendered*. The core tension: this is not a greenfield build and it is not a data problem. It is a **presentation and interaction-design gap on top of a solid spine**. The naive "just add features" approach would bolt reactions and threads onto a layout that was never designed to carry them; the work is to rebuild the rendering layer to the standard set by Slack/Discord/Zulip while keeping the schema, service, and hooks intact.
+
+## Executive Summary
+
+**The headline finding: xNet already modeled a modern chat app and then rendered ~30% of it.** Reading the code, the data and service layers are in excellent shape and the missing pieces are almost entirely in the React presentation layer:
+
+- `ChatMessageSchema` already has `inReplyTo` (threads), `attachments` (files), `edited`/`editedAt`, `redacted` (soft delete), structured `mentions`, `tags`, and `links` (`packages/data/src/schema/schemas/chat-message.ts`).
+- `ReactionSchema` already supports `emoji` reactions with a reactor, and `useReactionCounters` already loads and toggles them (`packages/react/src/hooks/useReactionCounters.ts`) — but **no message in `ChannelChat` renders a single reaction**.
+- Presence already carries `status: 'active' | 'idle' | 'dnd'`, an `avatar`, and typing indicators (`packages/comms/src/presence/types.ts`) — but the roster renders names as plain text and the status dot is never shown.
+- `@tanstack/react-virtual` is **already a dependency of `apps/web`** (`apps/web/package.json`) and unused by chat, which today scrolls a plain `<ul>` and will choke on long histories.
+- `packages/ui/src/theme/motion.css` already ships the exact keyframes a premium chat needs — `slide-in-bottom`, `scale-in`, `fade-in`, `shimmer`, `pulse-subtle` — so the "fancier animations" ask needs **zero new dependencies**; framer-motion is not in the tree and is not required.
+
+So the recommendation is **Option C: rebuild the presentation layer, keep the spine.** Extract a small set of reusable comms-UI primitives (`MessageList`, `MessageGroup`, `HoverToolbar`, `ReactionBar`, `Composer`, `PresenceDot`, `ThreadPane`), drive them from the existing hooks and service, and bring the surface up to the cross-app grammar that Slack, Discord, Teams, and Zulip all share: grouped avatar rows, hover toolbars, reaction pills, unread dividers, date separators, jump-to-bottom, threads in a right pane, and polished CSS micro-interactions. Keep the structured-pill composer (it is *better* than parsed text for a knowledge graph) and evolve it. Adopt Slack-style flat-with-threads now because it matches `inReplyTo` exactly, and design the header to admit an optional **Zulip-style topic lane** later as the long-term differentiator for async, knowledge-graph-native conversation.
+
+## Current State In The Repository
+
+### The surface as it exists today
+
+```mermaid
+flowchart LR
+    Rail["Rail<br/>Chats icon"] --> Sidebar
+    subgraph Sidebar["ChatsPanel (left panel)"]
+      S1["3 fixed sections:<br/>Channels / Voice / DMs"]
+      S2["mention + occupancy badges"]
+      S3["inline create forms"]
+    end
+    Sidebar --> Main
+    subgraph Main["ChannelView → ChannelChat"]
+      M1["h-9 header:<br/>icon + name + topic + roster + call"]
+      M2["plain ul message list<br/>text-xs rows, no avatars"]
+      M3["typing line"]
+      M4["textarea composer<br/>@ # [[ pickers"]
+    end
+    Main -.->|"missing"| Right["(no right pane:<br/>no threads, members, pins, search)"]
+```
+
+**Sidebar** — [`apps/web/src/comms/ChatsPanel.tsx`](apps/web/src/comms/ChatsPanel.tsx) renders three hard-coded sections (`Channels`, `Voice rooms`, `Direct messages`). Rows are 12px text buttons with a Lucide kind-icon, a `◉ N` occupancy badge, and a mention-count pill. There is no workspace switcher, no custom/collapsible sections, no favorites/starred, no search, no presence dot on DMs, no unread bolding, and no last-message preview. Channel creation is an inline `name` input only — no topic, no privacy, no member picker.
+
+**Header** — [`apps/web/src/comms/ChannelView.tsx`](apps/web/src/comms/ChannelView.tsx) is a 36px-tall (`h-9`) bar: kind icon, name, topic, and `here: alice, bob` roster as plain text, plus `CallControls`. No avatar stack, no member count, no pin/search/info actions, no topic editing.
+
+**Message list + composer** — [`apps/web/src/comms/ChannelChat.tsx`](apps/web/src/comms/ChannelChat.tsx) is the heart of the surface and is doing a lot already:
+
+- `MessageRow` (lines 157–200) renders `<li class="group … hover:bg-surface-2/50">` with author name, a monospace `formatTime` timestamp, an `(edited)` tag, and the body via `LinkifiedText`. Mentions/tags/links render as chip rows. Per-message `MessageActions` (report/sensitive) sits in the row, revealed by the `group` hover.
+- `MessageList` (lines 204–261) is a plain `<ul class="overflow-y-auto">` — **no virtualization**, **no grouping of consecutive messages**, **no date separators**, **no "new messages" divider**.
+- Scroll-to-bottom is a blunt `useEffect` on `messages.length` that always jams to the bottom (lines 524–526) — it will yank the viewport away from a user reading history.
+- The composer (lines 667–719) is a 2-row `<textarea>` with the genuinely good `@`/`#`/`[[` picker system (mention/tag/link, mutually exclusive, ARIA combobox, `useListboxNavigation`). Plus a "mark sensitive" shield and a send button. **No emoji picker, no file attach, no formatting, no slash commands, no edit-in-place, no reply affordance.**
+
+**What's modeled but never rendered** (the gap):
+
+| Capability | Modeled where | Rendered in chat UI? |
+| --- | --- | --- |
+| Emoji reactions | `ReactionSchema` + `useReactionCounters` | ❌ No reaction bar at all |
+| Threads / replies | `ChatMessage.inReplyTo` | ❌ No reply button, no thread pane |
+| File attachments | `ChatMessage.attachments` | ❌ No attach button, no render |
+| Message edit | `editMessage()` in chat-service | ❌ No edit-in-place UI |
+| Soft delete | `ChatMessage.redacted` | ✅ "message deleted" placeholder |
+| Edited indicator | `ChatMessage.edited` | ✅ `(edited)` tag |
+| Presence status dot | `PresenceStatus = active/idle/dnd` | ❌ Names only, no dot |
+| Avatars | `UserCard.avatar` | ❌ No avatars anywhere |
+| Read watermark | `InboxStateSchema.watermarks` | ⚠️ Advances, but no "new" divider |
+| Typing indicator | `typingPeers()` | ✅ "alice is typing…" text line |
+| Message grouping | (layout only) | ❌ Every message is a full row |
+| Virtualized history | `@tanstack/react-virtual` (dep present) | ❌ Plain `<ul>` |
+| Pinned messages | (not modeled) | ❌ |
+| Message search | (not modeled in chat) | ❌ |
+
+### The spine that should be kept
+
+- **Schema** — `Channel` (kind: channel/dm/voice, members, topic, archived, folder, sortKey, tags, space, visibility) and `ChatMessage` (content, inReplyTo, attachments, mentions, edited/editedAt, redacted, tags, links). `Reaction`, `InboxState`, and `mentions.ts` round it out.
+- **Service** — `packages/comms/src/chat/chat-service.ts`: `sendMessage`, `editMessage`, `redactMessage`, `createChannel`, `ensureDmChannel`, `channelHistoryQuery`. `dm.ts` derives deterministic DM ids.
+- **Presence** — `packages/comms/src/presence/{types,helpers,room-manager}.ts`: `typingPeers`, `peersInCall`, `rosterUsers`, `remotePeers`, ephemeral typing/status/call over room awareness.
+- **Hooks** — `apps/web/src/comms/hooks.ts`: `useChannelMessages`, `useChannels`, `useRoomPresence`, `useInbox` (watermarks, mention acks, badges, snooze), `useProfiles`.
+- **Wiring** — `apps/web/src/workbench/Rail.tsx:39` (chats rail icon), `apps/web/src/workbench/views/register.ts:16` (`ChatsPanel` as left panel), `apps/web/src/workbench/ViewHost.tsx:44` (`channel` node type → `ChannelView`).
+
+### Design-system inventory (what we build with)
+
+- **Primitives** — `packages/ui/src/`: `Button`, `IconButton`, `Popover`, `Menu`/`DropdownMenu`, `Tooltip`, `Sheet`, `Modal`, `Tabs`, `ScrollArea`, `Command` (cmdk), `Badge`, `Skeleton`, `Avatar`(?), `LinkifiedText`, `SensitiveContent`, `useListboxNavigation`. Built on `@base-ui/react ^1.1.0`.
+- **Theming** — HSL tokens in `packages/ui/src/theme/tokens.css`: `--surface-0/1/2`, `--ink-1/2/3`, `--accent`, `--accent-ink`, `--hairline`, `--border`, `--border-emphasis`, `--border-muted`. Dark mode via `.dark` class.
+- **Motion** — `packages/ui/src/theme/motion.css` already defines `fade-in/out`, `scale-in/out`, `slide-in-{bottom,left,right,top}`, `slide-out-*`, `shimmer`, `pulse-subtle`, `spin`, plus `tailwindcss-animate`. **No framer-motion in the tree.**
+- **Icons** — `lucide-react`.
+- **Virtualization** — `@tanstack/react-virtual ^3.14.2` already in `apps/web`.
+
+## External Research
+
+How the four reference apps actually do it, and the implementation patterns that make a chat feel fast and premium.
+
+**Slack** — The signature pattern is **message grouping**: consecutive messages from the same author within ~5 minutes collapse into one block; only the first shows avatar + name + timestamp, the rest show a hover-only relative time. A **hover toolbar** anchors to the top-right of each message: quick-reaction emoji, then Reply-in-thread, Save, Share, More. **Threads live in a right "flex pane"**, not inline — Slack explicitly rejected inline expansion because pushing the channel river up/down on open/close was disorienting ([Slack Design: Threads, a long design journey](https://slack.design/articles/threads-in-slack-a-long-design-journey-part-1-of-2/)). The 2024 sidebar redesign added Home/DMs/Activity/Later tabs and user-defined collapsible **custom sections** ([Organize your sidebar with custom sections](https://slack.com/help/articles/360043207674-Organize-your-sidebar-with-custom-sections)). Density is a setting: **Clean vs Compact** ([Change how messages are displayed](https://slack.com/help/articles/213893898-Change-how-messages-are-displayed)).
+
+**Microsoft Teams** — Channels → tabs (Posts/Files/Wiki/apps). Historically **reply-chain-first** (every post is a thread, replies indent inline) vs Slack's flat-first model; the 2024–2025 "new chat and channels experience" merges chats + channels into one list with custom sections and a Threads layout that moves toward Slack ([New chat and channels experience](https://support.microsoft.com/en-us/office/explore-the-new-chat-and-channels-experience-in-microsoft-teams-c6f38016-d59c-4226-b0f3-caef4e60f91e)). The composer shows formatting controls inline by default; slash commands arrived mid-2024.
+
+**Zulip** — The differentiator worth studying hardest. Zulip's model is two levels: every message belongs to a **stream** (≈ channel) and *must* carry a **topic** (a short subject line) ([Introduction to topics](https://zulip.com/help/introduction-to-topics)). The feed is visually segmented by a **recipient bar** (stream + topic header) instead of being one undifferentiated river; unread counts are tracked **per topic**, and the idiomatic reading loop is pressing `N` to jump to the next unread topic ([Reading strategies](https://zulip.com/help/reading-strategies), [Keyboard shortcuts](https://zulip.com/help/keyboard-shortcuts)). Topics can be renamed, moved, merged, and **resolved** (✓). Proponents argue this scales for async teams: a returning teammate triages by named topic instead of scrolling a mixed channel. The cost is a two-field composer (stream + topic) — slightly more friction per message ([Why Zulip](https://zulip.com/why-zulip/)).
+
+**Discord** — Three columns: server rail, channel list under collapsible **Category** headers, message feed, and a **member list** grouped by role with presence dots. Presence is a dot on the avatar — **green online / yellow idle / red DND / grey offline** plus rich presence ("Playing …") ([Discord statuses](https://www.androidpolice.com/discord-statuses-explainer/)). Cozy vs Compact density mirrors Slack. Hover darkens the row and reveals quick reactions + Reply + Edit + More; reaction culture is heavy, with animated super-reactions.
+
+**Cross-cutting grammar all four share** (this is the checklist a "good" chat must hit): grouped avatar rows; an **unread divider** ("New messages" line) injected at the last-read point; **date separators** ("Today"/"Yesterday"); a floating **jump-to-bottom** button with an unread count; animated **typing indicators** that time out; **reaction pills** with count + who-reacted tooltip + toggle; **hover toolbars**; **right-click context menus**; and `Cmd/Ctrl+K` quick switch, `↑` to edit last message, `Esc` to dismiss ([Stream: Chat UX best practices](https://getstream.io/blog/chat-ux/)).
+
+**Implementation patterns** (how to build it well in React):
+
+- **Virtualized, bidirectional message list.** The hard part is variable-height rows + reverse infinite scroll + staying pinned to bottom while preserving scroll when prepending history. `react-virtuoso` is the most adopted OSS answer (`followOutput`, `firstItemIndex` for jump-free prepend, `startReached`, `initialTopMostItemIndex`); `@tanstack/react-virtual` (already our dep) is lower-level but does it via `measureElement` + a stable `getItemKey` + `scrollToIndex`. `react-window` is effectively unsuitable for variable heights ([React Virtuoso](https://virtuoso.dev/), [TanStack Virtual](https://tanstack.com/virtual/v3/docs/api/virtualizer)).
+- **Scroll anchoring.** CSS `overflow-anchor: auto` keeps content stable on prepend (not in Safari); the `flex-direction: column-reverse` trick is tempting but breaks selection order, screen-reader order, and tab order — most production apps manage scroll programmatically with a "near bottom?" threshold (~80–150px) and a jump-to-bottom pill instead ([MDN overflow-anchor](https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-anchor)).
+- **Composer.** We already use TipTap/ProseMirror in the doc editor; `@tiptap/extension-mention` + `@tiptap/suggestion` are the canonical way to do `@`/`#`/`:emoji:`/slash menus with Floating-UI positioning. Lexical is lighter for greenfield, but migrating offers no practical gain here ([Liveblocks: which rich text editor in 2025](https://liveblocks.io/blog/which-rich-text-editor-framework-should-you-choose-in-2025)).
+- **Emoji.** `emoji-mart` v5 decouples its ~700KB dataset from the JS so you lazy-load data on first open; `frimousse` (Liveblocks) is a headless, dependency-free, Radix-style picker you style yourself ([emoji-mart](https://github.com/missive/emoji-mart), [frimousse](https://frimousse.liveblocks.io/)).
+- **Reactions & optimistic sends.** React 19's `useOptimistic` auto-reverts on failure; reaction toggle is `{emoji → {count, userIds}}`, pill shows count + who-reacted tooltip, `scale-in` bounce on add ([React useOptimistic](https://react.dev/reference/react/useOptimistic)).
+- **Micro-interactions without framer-motion.** Pure-CSS three-dot typing bounce (staggered `animation-delay`), `slide-in-bottom` for new messages, `group-hover:opacity-100` reveal of the toolbar (with `pointer-events-none` when hidden), `shimmer` skeletons. motion.dev (`motion/react`, ~15KB lazy) only earns its place for `AnimatePresence` exit animations, spring physics, and `layout` width animation on reaction pills — a Phase-3 nicety, not a requirement.
+- **Accessibility.** The list is `role="log"` `aria-live="polite"` `aria-atomic="false"`; reactions are `aria-pressed` toggle buttons with labels; emoji get `role="img"` + `aria-label`; roving `tabindex` for keyboard message navigation; return focus to the composer after send ([W3C ARIA23 role=log](https://www.w3.org/WAI/WCAG21/Techniques/aria/ARIA23.html)).
+
+## Key Findings
+
+1. **This is a rendering problem, not a data problem.** The schema already encodes threads, reactions, attachments, edit/delete, mentions, and presence status. Most of the work is building React components that *show* what is already stored and synced.
+2. **The composer is ahead of the rest of the UI.** The `@`/`#`/`[[` structured-pill picker (mutually exclusive, ARIA combobox, keyboard-navigable) is genuinely good and is *better* than parsed-text mentions for a knowledge graph. It should be evolved, not replaced — add `:emoji:`, slash commands, file attach, and edit-in-place around it.
+3. **Virtualization is one import away.** `@tanstack/react-virtual` is already installed; today's plain `<ul>` plus an always-jam-to-bottom effect is the single biggest robustness and UX liability for any channel with real history.
+4. **The "fancy animations" ask costs nothing new.** `motion.css` already ships `slide-in-bottom`, `scale-in`, `fade-in`, `shimmer`, `pulse-subtle`. We can deliver premium micro-interactions in pure CSS using the existing token system; framer-motion is optional polish for a later phase.
+5. **Presence is half-built.** `active/idle/dnd` status and `avatar` exist on `UserCard` but the UI shows names as text. Discord-style presence dots + an avatar-driven member list are low-effort, high-signal wins.
+6. **Read state exists but is invisible.** Watermarks advance, but there is no "New messages" divider, no unread bolding in the sidebar, and no jump-to-unread — the three things that make a chat feel *navigable* rather than *infinite*.
+7. **Threading model is the one true fork in the road.** `inReplyTo` makes Slack-style flat-with-threads a drop-in fit. Zulip's topic model is the more differentiated, more knowledge-graph-native long-term play but is a larger data + reading-UI change. These are sequenceable, not mutually exclusive.
+
+## Options And Tradeoffs
+
+### Decision 1 — How much to rebuild
+
+```mermaid
+flowchart TD
+    A["How to deliver the overhaul"] --> B["A: Incremental polish<br/>edit ChannelChat in place"]
+    A --> C["B: Full rewrite<br/>new component tree + new package"]
+    A --> D["C: Rebuild presentation,<br/>keep schema/service/hooks"]
+    B --> B1["Fast start, but layout<br/>can't carry threads/reactions;<br/>ChannelChat already 723 lines"]
+    C --> C1["Clean slate, but throws away<br/>working pickers, presence,<br/>watermarks; high risk"]
+    D --> D1["Extract reusable comms-ui;<br/>data spine untouched;<br/>shippable in phases"]
+    D1 --> R["★ Recommended"]
+```
+
+| Dimension | A: In-place polish | B: Full rewrite | C: Rebuild presentation |
+| --- | --- | --- | --- |
+| Risk to sync/data | Low | High | Low |
+| Reuses pickers/presence/watermarks | Partially | No | Yes |
+| Can carry threads/reactions/grouping cleanly | No | Yes | Yes |
+| Shippable in phases | Hard | No | Yes |
+| Testability | Tangled | New surface | Pure UI units |
+
+**Recommendation: C.** Keep the schema, `chat-service`, presence, and hooks exactly as they are. Extract a small reusable UI kit (in `packages/ui` under a `comms/` subtree, or a new `packages/comms-ui` if it needs app-agnostic logic) and rebuild `ChatsPanel`/`ChannelView`/`ChannelChat` on top of it. This isolates risk to the view layer and lets each phase ship independently.
+
+### Decision 2 — Threading & conversation model
+
+```mermaid
+flowchart TD
+    T["Conversation model"] --> F["Flat + side-pane threads<br/>(Slack/Discord)"]
+    T --> Z["Topic-based streams<br/>(Zulip)"]
+    T --> H["Hybrid: flat now,<br/>optional topic lane later"]
+    F --> F1["Matches inReplyTo exactly;<br/>0 schema change; familiar"]
+    Z --> Z1["Best async triage;<br/>needs topic field + N-loop UI;<br/>recipient-bar feed"]
+    H --> H1["Ship the familiar win now;<br/>add the differentiator<br/>without a rewrite"]
+    H1 --> R["★ Recommended"]
+```
+
+**Recommendation: H.** Implement Slack-style flat-with-threads in a right pane now (zero schema change — `inReplyTo` already exists). In parallel, design the channel header and message-list so a future optional `topic` text field on `ChatMessage` can switch the feed into a Zulip-style **recipient-bar** view with per-topic unread counts and an `N`-to-next-unread loop. xNet's local-first, graph-native nature makes topics a natural fit (a topic is just a lightweight grouping key, and resolved topics map to "done" the way tasks do) — but it should be a deliberate Phase-4 bet, not a Phase-1 scramble.
+
+### Decision 3 — Composer
+
+Keep the existing structured-pill `textarea` + picker logic for Phase 1 (it works, it's accessible, and the pill model is correct for the graph). Layer features around it: emoji picker (`:` trigger reusing `useListboxNavigation`, plus a full `emoji-mart`/`frimousse` popover on a button), file attach (drag-drop + button writing to `attachments`), edit-in-place (`↑` on empty composer loads last own message), and a formatting affordance. **Optional Phase 3:** migrate the input to a TipTap instance so pills render inline as you type and markdown shortcuts work live — reusing the doc editor we already ship. Do not adopt Lexical; the migration cost buys nothing here.
+
+### Decision 4 — Animation library
+
+Pure CSS via the existing `motion.css` keyframes for Phases 1–2 (typing dots, message slide-in, reaction pop, skeletons, hover reveal). Re-evaluate adding `motion/react` (~15KB, lazy `domAnimation`) only in Phase 3 and only for the three things CSS can't do well: `AnimatePresence` exit animations, spring physics on reaction bounce, and `layout` animation when reaction-pill widths change.
+
+## Recommendation
+
+Rebuild the comms **presentation** layer to the cross-app grammar, on top of the untouched data spine, shipped in four phases. Target architecture:
+
+```mermaid
+flowchart TB
+    subgraph Data["Spine — unchanged"]
+      DS["Channel / ChatMessage / Reaction / InboxState schemas"]
+      SVC["chat-service: send/edit/redact/createChannel/ensureDm"]
+      PR["presence: typing/status/roster"]
+      HK["hooks: useChannelMessages/useChannels/useRoomPresence/useInbox/useReactionCounters"]
+    end
+    subgraph UI["New comms-ui kit"]
+      CS["ChatShell<br/>(3-pane responsive layout)"]
+      SB["ConversationSidebar<br/>sections, switcher, presence, unread"]
+      ML["MessageList (virtualized)<br/>MessageGroup + MessageRow"]
+      HT["HoverToolbar + ContextMenu"]
+      RB["ReactionBar + EmojiPicker"]
+      TP["ThreadPane (right)"]
+      CMP["Composer (pills + emoji + attach + edit)"]
+      AUX["PresenceDot / Avatar / UnreadDivider / DateSeparator / JumpToBottom / TypingDots"]
+    end
+    HK --> ML
+    HK --> SB
+    SVC --> CMP
+    SVC --> RB
+    PR --> AUX
+    PR --> SB
+    DS -.-> HK
+    UI --> Surface["ChatsPanel / ChannelView / ChannelChat<br/>rebuilt on the kit"]
+```
+
+The data already in place:
+
+```mermaid
+erDiagram
+    CHANNEL ||--o{ CHATMESSAGE : contains
+    CHATMESSAGE ||--o{ CHATMESSAGE : "inReplyTo thread"
+    CHATMESSAGE ||--o{ REACTION : target
+    CHANNEL }o--o{ PERSON : members
+    INBOXSTATE ||--o{ CHANNEL : "watermark per channel"
+    CHATMESSAGE }o--o{ TAG : tags
+    PRESENCE }o--|| PERSON : advertises
+    CHANNEL {
+      string name
+      enum kind
+      string topic
+      bool archived
+      relation space
+    }
+    CHATMESSAGE {
+      string content
+      relation inReplyTo
+      json mentions
+      bool edited
+      bool redacted
+      file attachments
+    }
+    REACTION {
+      enum reactionType
+      string emoji
+      person reactor
+    }
+    PRESENCE {
+      enum status
+      string avatar
+      object typing
+    }
+```
+
+And the message send lifecycle the composer/list should model (optimistic, with failure recovery):
+
+```mermaid
+stateDiagram-v2
+    [*] --> Composing
+    Composing --> Sending: Enter / Send
+    Sending --> Sent: change synced
+    Sending --> Failed: offline / error
+    Failed --> Sending: retry
+    Failed --> Composing: edit / discard
+    Sent --> [*]
+```
+
+**Phase sequencing (each phase is independently shippable):**
+
+- **Phase 1 — Layout & density.** Avatars, message grouping, date separators, unread divider, polished header + sidebar (presence dots, unread bolding, last-message preview), virtualized list with smart scroll + jump-to-bottom. No new schema, no new deps.
+- **Phase 2 — Interactions.** Hover toolbar + right-click context menu, reaction bar + emoji picker, reply affordance + right-pane thread view, edit-in-place, file attach, pinning (new lightweight schema), CSS micro-interactions.
+- **Phase 3 — Power & polish.** `Cmd+K` quick switcher, message search, keyboard shortcut layer, optional TipTap composer, optional `motion/react` for spring/exit animations, density setting (Clean/Compact).
+- **Phase 4 — Differentiator (optional).** Zulip-style topics: optional `topic` field, recipient-bar feed, per-topic unread, `N`-to-next-unread, resolve-topic.
+
+## Example Code
+
+These are illustrative sketches in the repo's idiom (Tailwind tokens, `cn`, lucide, base-ui), not final code.
+
+**Message grouping — collapse consecutive same-author rows:**
+
+```tsx
+// packages/ui/src/comms/group-messages.ts
+const GROUP_WINDOW_MS = 5 * 60_000
+
+export interface RenderRow {
+  message: ChatMessageRow
+  startsGroup: boolean   // show avatar + name + absolute time
+  daySeparator?: string  // "Today" / "Yesterday" / "Mon, Jun 9"
+  firstUnread?: boolean  // render the "New messages" divider above this row
+}
+
+export function groupMessages(
+  messages: ChatMessageRow[],
+  lastReadAt: number
+): RenderRow[] {
+  let prev: ChatMessageRow | undefined
+  let unreadShown = false
+  return messages.map((m) => {
+    const newAuthor = m.createdBy !== prev?.createdBy
+    const gap = (m.createdAt ?? 0) - (prev?.createdAt ?? 0) > GROUP_WINDOW_MS
+    const crossesDay = !sameDay(prev?.createdAt, m.createdAt)
+    const firstUnread = !unreadShown && (m.createdAt ?? 0) > lastReadAt
+    if (firstUnread) unreadShown = true
+    const row: RenderRow = {
+      message: m,
+      startsGroup: newAuthor || gap || crossesDay,
+      daySeparator: crossesDay ? dayLabel(m.createdAt) : undefined,
+      firstUnread
+    }
+    prev = m
+    return row
+  })
+}
+```
+
+**Grouped message row with hover toolbar and reactions:**
+
+```tsx
+function MessageRow({ row, profiles, me }: { row: RenderRow; profiles: ProfileEntry[]; me: string }) {
+  const { message, startsGroup } = row
+  const author = profiles.find((p) => p.did === message.createdBy)
+  return (
+    <li className="group relative flex gap-2 px-4 py-0.5 hover:bg-surface-1">
+      {startsGroup ? (
+        <Avatar src={author?.avatar} name={author?.label} size={36} className="mt-0.5" />
+      ) : (
+        <time className="w-9 shrink-0 text-right text-[10px] leading-6 text-ink-3 opacity-0 group-hover:opacity-100">
+          {formatTime(message.createdAt)}
+        </time>
+      )}
+      <div className="min-w-0 flex-1">
+        {startsGroup && (
+          <div className="flex items-baseline gap-2">
+            <span className="text-sm font-semibold text-ink-1">{author?.label}</span>
+            <time className="text-[11px] text-ink-3">{formatTime(message.createdAt)}</time>
+            <EditedTag message={message} />
+          </div>
+        )}
+        <MessageBody message={message} />
+        <ReactionBar targetId={message.id} />
+      </div>
+      <HoverToolbar message={message} isOwn={message.createdBy === me} />
+    </li>
+  )
+}
+```
+
+**Hover toolbar — pure-CSS reveal, `pointer-events` gated:**
+
+```tsx
+function HoverToolbar({ message, isOwn }: { message: ChatMessageRow; isOwn: boolean }) {
+  return (
+    <div
+      className={cn(
+        'absolute -top-3 right-3 z-10 flex items-center gap-0.5 rounded-md border border-hairline',
+        'bg-surface-0 p-0.5 shadow-sm opacity-0 pointer-events-none',
+        'transition-opacity duration-150 group-hover:opacity-100 group-hover:pointer-events-auto'
+      )}
+    >
+      <QuickReact targetId={message.id} emoji="👍" />
+      <QuickReact targetId={message.id} emoji="🎉" />
+      <ToolbarButton icon={SmilePlus} label="Add reaction" onClick={openEmojiPicker} />
+      <ToolbarButton icon={MessageSquare} label="Reply in thread" onClick={openThread} />
+      {isOwn && <ToolbarButton icon={Pencil} label="Edit" onClick={startEdit} />}
+      <MoreMenu message={message} isOwn={isOwn} />
+    </div>
+  )
+}
+```
+
+**Reaction pill — optimistic toggle on the existing Reaction schema, `scale-in` bounce:**
+
+```tsx
+function ReactionBar({ targetId }: { targetId: string }) {
+  const { groups, toggle } = useReactionCounters(targetId) // already exists
+  if (groups.length === 0) return null
+  return (
+    <div className="mt-1 flex flex-wrap gap-1">
+      {groups.map((g) => (
+        <Tooltip key={g.emoji} content={whoReacted(g)}>
+          <button
+            type="button"
+            aria-pressed={g.mine}
+            onClick={() => toggle(g.emoji)}
+            className={cn(
+              'flex items-center gap-1 rounded-full border px-1.5 py-0.5 text-xs animate-scale-in',
+              g.mine
+                ? 'border-accent bg-accent/10 text-accent-ink'
+                : 'border-hairline bg-surface-1 text-ink-2 hover:border-border'
+            )}
+          >
+            <span role="img" aria-label={g.name}>{g.emoji}</span>
+            <span className="font-mono text-[10px]">{g.count}</span>
+          </button>
+        </Tooltip>
+      ))}
+    </div>
+  )
+}
+```
+
+**Virtualized list with smart scroll anchoring (TanStack Virtual — already a dep):**
+
+```tsx
+function VirtualMessageList({ rows }: { rows: RenderRow[] }) {
+  const parentRef = useRef<HTMLDivElement>(null)
+  const stickToBottom = useRef(true)
+  const v = useVirtualizer({
+    count: rows.length,
+    getScrollElement: () => parentRef.current,
+    estimateSize: () => 44,
+    getItemKey: (i) => rows[i].message.id, // stable key → prepend without jump
+    overscan: 8
+  })
+
+  // Only auto-scroll if the user is already near the bottom.
+  useEffect(() => {
+    const el = parentRef.current
+    if (!el) return
+    const onScroll = () => {
+      stickToBottom.current =
+        el.scrollHeight - el.scrollTop - el.clientHeight < 120
+    }
+    el.addEventListener('scroll', onScroll, { passive: true })
+    return () => el.removeEventListener('scroll', onScroll)
+  }, [])
+
+  useEffect(() => {
+    if (stickToBottom.current) v.scrollToIndex(rows.length - 1, { align: 'end' })
+  }, [rows.length, v])
+
+  return (
+    <div ref={parentRef} role="log" aria-live="polite" aria-label="Messages"
+         className="min-h-0 flex-1 overflow-y-auto [overflow-anchor:auto]">
+      <div style={{ height: v.getTotalSize(), position: 'relative' }}>
+        {v.getVirtualItems().map((item) => (
+          <div key={item.key} ref={v.measureElement} data-index={item.index}
+               style={{ position: 'absolute', top: 0, left: 0, width: '100%',
+                        transform: `translateY(${item.start}px)` }}>
+            <MessageGroupRow row={rows[item.index]} />
+          </div>
+        ))}
+      </div>
+    </div>
+  )
+}
+```
+
+**Presence dot + typing dots — pure CSS, reusing tokens:**
+
+```tsx
+const STATUS_COLOR = { active: 'bg-emerald-500', idle: 'bg-amber-400', dnd: 'bg-rose-500' }
+
+function PresenceDot({ status }: { status?: PresenceStatus }) {
+  return (
+    <span className={cn(
+      'absolute -bottom-0.5 -right-0.5 h-2.5 w-2.5 rounded-full ring-2 ring-surface-0',
+      status ? STATUS_COLOR[status] : 'bg-ink-3'
+    )} />
+  )
+}
+```
+
+```css
+/* add to motion.css — staggered typing bounce */
+@keyframes typing-bounce { 0%,60%,100% { transform: translateY(0) } 30% { transform: translateY(-4px) } }
+.typing-dot { animation: typing-bounce 1.2s infinite ease-in-out; }
+.typing-dot:nth-child(2) { animation-delay: .15s }
+.typing-dot:nth-child(3) { animation-delay: .3s }
+```
+
+## Risks And Open Questions
+
+- **Virtualization + variable height + measurement.** Reactions, link unfurls, and image loads change row heights after first paint. Must rely on `measureElement`/`ResizeObserver` with a stable estimate and a stable `getItemKey` (message id, never index), or the list will jump. Decide TanStack (in-tree, more wiring) vs adding `react-virtuoso` (purpose-built `followOutput`/`firstItemIndex`, but a new dep).
+- **Scroll-to-bottom regression risk.** Replacing the current always-jam effect must not break the "new message while reading history" case. Needs explicit near-bottom threshold logic and a jump-to-bottom pill with an unread counter.
+- **Reaction fan-out.** Each reaction is its own node (`ReactionSchema`). A heavily-reacted message means many nodes; confirm `useReactionCounters` aggregation stays cheap at scale and that toggles are optimistic without flicker.
+- **Avatars.** Is there an `Avatar` primitive in `packages/ui`, and where do avatar images live (the `UserCard.avatar` string — URL, blob, or node ref)? If avatars aren't readily resolvable, Phase 1 falls back to initials/identicons.
+- **Pinned messages need a schema.** Pinning isn't modeled. Decide between a `pinned: checkbox` on `ChatMessage` vs a separate `Pin` node (cleaner for per-channel ordering and who-pinned provenance).
+- **Topic model (Phase 4) is a real fork.** Adding `topic` to `ChatMessage` is additive, but the recipient-bar reading UI, per-topic unread accounting, and the `N`-loop are a substantial build and a different mental model. Validate demand before committing.
+- **e2e gating.** Per repo memory, `editor-ux` e2e also runs `--project=mobile-chromium`; a chat rebuild must be verified on a 375px viewport and not regress `getByRole('main')`/log selectors. The mobile shell (0196) routes comms through `MobileShell` sheets — the new kit must drop into both desktop grid and mobile sheet hosts.
+- **Read receipts vs watermark.** We track a per-channel watermark, not per-message per-user receipts. Do we want Slack-style (no per-message read receipts) or WhatsApp-style (double-check)? Recommendation: keep watermark + "New messages" divider; skip per-message receipts for now.
+- **Performance budget for animations.** Confirm `prefers-reduced-motion` is honored (the repo already has `accessibility.css`); all new keyframes must no-op under reduced motion.
+
+## Implementation Checklist
+
+**Phase 1 — Layout, density, robustness (no new deps, no schema change)**
+- [ ] Extract a comms-ui kit (`packages/ui/src/comms/` or `packages/comms-ui`) with `MessageList`, `MessageGroup`, `MessageRow`, `DateSeparator`, `UnreadDivider`, `Avatar`/`PresenceDot`, `JumpToBottom`, `TypingDots`.
+- [ ] Implement `groupMessages()` (consecutive same-author within 5 min, day boundaries, first-unread marker) with unit tests.
+- [ ] Virtualize the message list with `@tanstack/react-virtual`; stable `getItemKey` = message id; `measureElement` for variable heights.
+- [ ] Replace the always-jam scroll effect with near-bottom threshold + jump-to-bottom pill (unread count badge).
+- [ ] Render avatars + presence dots in message rows, the header roster (avatar stack + count), and DM/sidebar rows.
+- [ ] Rebuild the channel header: avatar stack, member count, editable topic, info/search/pin actions.
+- [ ] Rebuild `ChatsPanel`: unread bolding, last-message preview, presence dot on DMs, collapsible/custom sections, optional workspace switcher; keep the 3 default sections.
+- [ ] Add `role="log"`/`aria-live` to the list and verify `prefers-reduced-motion` no-ops new animations.
+
+**Phase 2 — Interactions (reactions, threads, edit, attach, pins)**
+- [ ] `HoverToolbar` (quick-react, add-reaction, reply, edit-if-own, more) + right-click `ContextMenu` with the full action set.
+- [ ] `ReactionBar` on every message using `useReactionCounters`; optimistic toggle; who-reacted tooltip; `scale-in` bounce.
+- [ ] Emoji picker: `:` inline trigger (reuse `useListboxNavigation`) + button-launched `frimousse`/`emoji-mart` popover (lazy-loaded).
+- [ ] `ThreadPane` in a right pane driven by `inReplyTo`; thread footer on parent (reply count + participant avatars); reply composer.
+- [ ] Edit-in-place: `↑` on empty composer loads last own message; inline edit form calls `editMessage`.
+- [ ] File attach: drag-drop + button writing to `ChatMessage.attachments`; render image/file cards in the row.
+- [ ] Pinning: add schema (decide `pinned` field vs `Pin` node) + pinned-messages popover from the header.
+- [ ] Wire all new CSS micro-interactions from `motion.css` (slide-in on send, typing dots, shimmer skeletons for history load).
+
+**Phase 3 — Power & polish**
+- [ ] `Cmd+K` quick switcher (cmdk `Command`) across channels/DMs/people.
+- [ ] Message search (FTS over `content`) with a results view in the right pane.
+- [ ] Keyboard shortcut layer (`↑` edit, `Esc` dismiss, `j/k` or arrows to move selection, `r` reply).
+- [ ] Density setting (Clean/Compact) persisted in workbench store.
+- [ ] (Optional) Migrate composer input to a TipTap instance with inline pills + markdown shortcuts.
+- [ ] (Optional) Add `motion/react` (lazy `domAnimation`) for `AnimatePresence` exits, spring reaction bounce, `layout` pill widths.
+
+**Phase 4 — Zulip-style topics (optional differentiator)**
+- [ ] Add optional `topic` text field to `ChatMessage` (additive; default empty = current flat behavior).
+- [ ] Recipient-bar feed mode: group messages under stream+topic headers; per-topic unread counts.
+- [ ] `N`-to-next-unread reading loop; resolve-topic (✓); rename/move/merge topic affordances.
+- [ ] Header toggle between "flat" and "topics" reading modes per channel.
+
+## Validation Checklist
+
+- [ ] A channel with 5,000+ messages scrolls at 60fps; history prepends without the viewport jumping; memory stays bounded (virtualization verified in browser preview).
+- [ ] Reading history near the top is **not** interrupted when a new message arrives; the jump-to-bottom pill appears with the correct unread count and scrolls cleanly on click.
+- [ ] Consecutive messages from one author within 5 minutes render as a group (one avatar/name); a day boundary inserts a date separator; the "New messages" divider appears exactly at the last-read point.
+- [ ] Adding/removing a reaction updates the pill optimistically and reverts on failure; the who-reacted tooltip lists reactors; counts match the underlying `Reaction` nodes.
+- [ ] Replying opens the thread pane, the parent shows an accurate reply count + participant avatars, and thread replies sync via `inReplyTo`.
+- [ ] Editing an own message updates content in place and shows `(edited)`; deleting shows the soft-delete placeholder and preserves thread shape.
+- [ ] Presence dots reflect `active/idle/dnd`; the typing indicator animates and times out; the header roster shows avatars.
+- [ ] Full keyboard path works: `Cmd+K` switch, `↑` edit last, `Esc` dismiss popovers, arrow-navigate the mention/emoji pickers; focus returns to the composer after send.
+- [ ] Screen reader announces only new messages (`role="log"` polite); reactions are `aria-pressed` toggles; emoji carry `aria-label`.
+- [ ] `prefers-reduced-motion` disables all new animations.
+- [ ] The surface renders correctly in both the desktop grid and the mobile `Sheet` host at 375×812 without breaking `getByRole('main')`/log selectors; `editor-ux` (incl. `mobile-chromium`) is green.
+- [ ] Before/after screenshots captured by the visuals pipeline show the redesigned channel, sidebar, reactions, and thread pane.
+
+## References
+
+### Internal (code)
+- Surface: [`apps/web/src/comms/ChannelChat.tsx`](apps/web/src/comms/ChannelChat.tsx), [`apps/web/src/comms/ChannelView.tsx`](apps/web/src/comms/ChannelView.tsx), [`apps/web/src/comms/ChatsPanel.tsx`](apps/web/src/comms/ChatsPanel.tsx), `apps/web/src/comms/{CallDock,InboxTray,RoomSection,StatusItems,CommsContext,hooks}.tsx`
+- Composer logic: `apps/web/src/comms/{mention,hashtag,link}-composer.ts`, `comms-utils.ts`
+- Schemas: [`packages/data/src/schema/schemas/chat-message.ts`](packages/data/src/schema/schemas/chat-message.ts), [`packages/data/src/schema/schemas/channel.ts`](packages/data/src/schema/schemas/channel.ts), `packages/data/src/schema/schemas/{reaction,mentions,inbox-state}.ts`
+- Service & presence: `packages/comms/src/chat/{chat-service,dm}.ts`, `packages/comms/src/presence/{types,helpers,room-manager}.ts`
+- Hooks: `apps/web/src/comms/hooks.ts`, [`packages/react/src/hooks/useReactionCounters.ts`](packages/react/src/hooks/useReactionCounters.ts), `packages/react/src/hooks/useMessageRequests.ts`, `apps/web/src/hooks/useDmOpen.ts`
+- Design system: `packages/ui/src/theme/{tokens,motion,base-ui-animations,accessibility,responsive}.css`, `packages/ui/package.json` (`@base-ui/react`, `cmdk`, `tailwindcss-animate`), `apps/web/package.json` (`@tanstack/react-virtual`)
+- Wiring: `apps/web/src/workbench/Rail.tsx:39`, `apps/web/src/workbench/views/register.ts:16`, `apps/web/src/workbench/ViewHost.tsx:44`
+- Prior explorations: 0167 (comms model), 0169/0170/0172 (tags/links/mentions composer), 0176 (moderation labels), 0196 (mobile adaptive shell)
+
+### External (prior art)
+- [Threads in Slack: a long design journey — Slack Design](https://slack.design/articles/threads-in-slack-a-long-design-journey-part-1-of-2/)
+- [Organize your sidebar with custom sections — Slack Help](https://slack.com/help/articles/360043207674-Organize-your-sidebar-with-custom-sections)
+- [Change how messages are displayed (Clean vs Compact) — Slack Help](https://slack.com/help/articles/213893898-Change-how-messages-are-displayed)
+- [Explore the new chat and channels experience — Microsoft Teams](https://support.microsoft.com/en-us/office/explore-the-new-chat-and-channels-experience-in-microsoft-teams-c6f38016-d59c-4226-b0f3-caef4e60f91e)
+- [Introduction to topics — Zulip](https://zulip.com/help/introduction-to-topics)
+- [Reading strategies — Zulip](https://zulip.com/help/reading-strategies)
+- [Why Zulip — Zulip](https://zulip.com/why-zulip/)
+- [Discord statuses explained — Android Police](https://www.androidpolice.com/discord-statuses-explainer/)
+- [Chat UX best practices — GetStream](https://getstream.io/blog/chat-ux/)
+- [React Virtuoso](https://virtuoso.dev/) · [TanStack Virtual](https://tanstack.com/virtual/v3/docs/api/virtualizer)
+- [CSS overflow-anchor — MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-anchor)
+- [Which rich text editor in 2025 — Liveblocks](https://liveblocks.io/blog/which-rich-text-editor-framework-should-you-choose-in-2025) · [TipTap Mention](https://tiptap.dev/docs/editor/extensions/nodes/mention)
+- [emoji-mart](https://github.com/missive/emoji-mart) · [frimousse — Liveblocks](https://frimousse.liveblocks.io/)
+- [React useOptimistic](https://react.dev/reference/react/useOptimistic) · [Motion (motion/react)](https://motion.dev/)
+- [Using role=log (W3C WCAG ARIA23)](https://www.w3.org/WAI/WCAG21/Techniques/aria/ARIA23.html)

From 576021078a48ab8c6c14a13b35f9586e8a3704db Mon Sep 17 00:00:00 2001
From: xNet Test <test@xnet.dev>
Date: Wed, 17 Jun 2026 16:57:18 -0700
Subject: [PATCH 2/4] =?UTF-8?q?feat(web):=20rebuild=20chat=20surface=20?=
 =?UTF-8?q?=E2=80=94=20grouped=20rows,=20avatars,=20reactions,=20threads?=
 =?UTF-8?q?=20(0198)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Phase 1+2 of the chat & channels overhaul. Rendering moves to a reusable set of
comms-UI pieces driven by the existing schema/service/hooks (no schema change):

- Message grouping (consecutive same-author rows collapse), date separators and
  a "New messages" divider, smart stick-to-bottom + jump-to-latest pill, role=log.
- Avatars (DIDAvatar) + Discord-style presence dots (active/idle/dnd) in rows,
  the header roster, and DM sidebar rows.
- Emoji reactions over the existing Reaction schema: per-message pills with
  counts + who-reacted, optimistic toggle, dependency-free emoji picker.
- Hover action toolbar (quick-react, add-reaction, reply, edit, more) reusing the
  existing safety menu; inline edit-in-place; up-arrow on empty composer edits last own.
- Right-hand thread pane driven by inReplyTo; replies kept out of the main feed,
  root shows a thread footer (count + participants + last reply).
- Composer gains an emoji insert button; @ / # / [[ pickers preserved.
- Rebuilt channel header (avatar stack, member count, editable topic, members
  popover) and sidebar (presence dots, unread emphasis).

Deferred (noted in 0198): windowed virtualization + load-older (window capped at
100 today), file-attachment upload, density toggle UI (store landed).

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 apps/web/src/comms/ChannelChat.tsx          | 481 +++++++-------------
 apps/web/src/comms/ChannelMessageList.tsx   | 213 +++++++++
 apps/web/src/comms/ChannelView.tsx          | 142 +++++-
 apps/web/src/comms/ChatAvatar.tsx           |  43 ++
 apps/web/src/comms/ChatsPanel.tsx           |  63 ++-
 apps/web/src/comms/EmojiPicker.tsx          |  76 ++++
 apps/web/src/comms/MessageHoverToolbar.tsx  |  74 +++
 apps/web/src/comms/MessageRow.tsx           | 341 ++++++++++++++
 apps/web/src/comms/PresenceDot.tsx          |  42 ++
 apps/web/src/comms/ReactionBar.tsx          |  58 +++
 apps/web/src/comms/ThreadPane.tsx           | 145 ++++++
 apps/web/src/comms/chat-prefs.ts            |  39 ++
 apps/web/src/comms/emoji-data.ts            |  76 ++++
 apps/web/src/comms/message-grouping.test.ts |  95 ++++
 apps/web/src/comms/message-grouping.ts      |  97 ++++
 apps/web/src/comms/reactions.test.ts        |  48 ++
 apps/web/src/comms/reactions.ts             |  44 ++
 apps/web/src/comms/useMessageReactions.ts   |  56 +++
 18 files changed, 1784 insertions(+), 349 deletions(-)
 create mode 100644 apps/web/src/comms/ChannelMessageList.tsx
 create mode 100644 apps/web/src/comms/ChatAvatar.tsx
 create mode 100644 apps/web/src/comms/EmojiPicker.tsx
 create mode 100644 apps/web/src/comms/MessageHoverToolbar.tsx
 create mode 100644 apps/web/src/comms/MessageRow.tsx
 create mode 100644 apps/web/src/comms/PresenceDot.tsx
 create mode 100644 apps/web/src/comms/ReactionBar.tsx
 create mode 100644 apps/web/src/comms/ThreadPane.tsx
 create mode 100644 apps/web/src/comms/chat-prefs.ts
 create mode 100644 apps/web/src/comms/emoji-data.ts
 create mode 100644 apps/web/src/comms/message-grouping.test.ts
 create mode 100644 apps/web/src/comms/message-grouping.ts
 create mode 100644 apps/web/src/comms/reactions.test.ts
 create mode 100644 apps/web/src/comms/reactions.ts
 create mode 100644 apps/web/src/comms/useMessageReactions.ts

diff --git a/apps/web/src/comms/ChannelChat.tsx b/apps/web/src/comms/ChannelChat.tsx
index 9d657ac33..c7a5a3c6d 100644
--- a/apps/web/src/comms/ChannelChat.tsx
+++ b/apps/web/src/comms/ChannelChat.tsx
@@ -1,28 +1,26 @@
 /**
- * ChannelChat — message list + composer, shared by the channel tab and the
- * Room context section (0167). Typing indicators ride room presence; the
- * channel watermark advances (debounced) while the chat is visible.
+ * ChannelChat — the channel message feed + composer (0198), shared by the
+ * channel tab and the Room context section (0167). Rendering is delegated to
+ * ChannelMessageList (grouped rows, reactions, threads); this owns the rich
+ * composer (the @ / # / [[ pickers and emoji insert), the read watermark,
+ * typing presence, inline edit, and the right-hand thread pane.
  */
-import type { TabNodeType } from '../workbench/state'
+import type { ChatRow } from './message-grouping'
 import type { WikilinkTarget } from '@xnetjs/editor/react'
-import { useNavigate } from '@tanstack/react-router'
-import { sensitivityLabels, type AbuseLabel, type SensitivityLabelValue } from '@xnetjs/abuse'
-import { sendMessage, typingPeers, type PeerPresence } from '@xnetjs/comms'
+import { sensitivityLabels, type SensitivityLabelValue } from '@xnetjs/abuse'
+import { editMessage, sendMessage, typingPeers, type PresenceStatus } from '@xnetjs/comms'
 import { useDataBridge } from '@xnetjs/react/internal'
-import { cn, LinkifiedText, Popover, useListboxNavigation } from '@xnetjs/ui'
-import { Send, Shield } from 'lucide-react'
+import { cn, Popover, useListboxNavigation } from '@xnetjs/ui'
+import { Send, Shield, Smile } from 'lucide-react'
 import { useCallback, useEffect, useMemo, useRef, useState, type ReactElement } from 'react'
-import { MessageActions } from '../components/MessageActions'
-import { ModeratedPost } from '../components/ModeratedMedia'
-import { PersonMentionChip } from '../components/PersonHovercard'
 import { useLinkTargets } from '../hooks/useLinkTargets'
 import { useWorkspaceTags } from '../hooks/useWorkspaceTags'
-import { hidesContent, useBlockList } from '../lib/block-list'
-import { attributionText, useTrustedContentLabelsBatch } from '../lib/content-labels-trust'
 import { useSelfLabel } from '../lib/self-label'
-import { navigateToNode } from '../workbench/navigation'
-import { mergeMentionables, type Mentionable, type ProfileEntry } from './comms-utils'
+import { ChannelMessageList } from './ChannelMessageList'
+import { useChatDensity } from './chat-prefs'
+import { mergeMentionables, type Mentionable } from './comms-utils'
 import { useComms } from './CommsContext'
+import { EmojiPicker } from './EmojiPicker'
 import {
   applyHashtagPick,
   composerTags,
@@ -31,7 +29,7 @@ import {
   tagOptionsFor,
   type TagOption
 } from './hashtag-composer'
-import { useChannelMessages, useInbox, useProfiles, useRoomPresence, displayName } from './hooks'
+import { useChannelMessages, useInbox, useProfiles, useRoomPresence } from './hooks'
 import {
   applyLinkPick,
   composerLinks,
@@ -45,236 +43,8 @@ import {
   mentionQueryAt,
   pickerOptionsFor
 } from './mention-composer'
+import { ThreadPane } from './ThreadPane'
 
-interface ChatMessageRow {
-  id: string
-  content?: string
-  createdBy?: string
-  createdAt?: number
-  edited?: boolean
-  redacted?: boolean
-  /** Structured mentions declared by the composer (0168) */
-  mentions?: { dids?: string[]; room?: boolean }
-  /** Tag node ids declared by the composer (0169) */
-  tags?: string[]
-  /** Linked node ids declared by the composer (0170) */
-  links?: string[]
-}
-
-function formatTime(at: number | undefined): string {
-  if (!at) return ''
-  return new Date(at).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })
-}
-
-function EditedTag({ message }: { message: ChatMessageRow }) {
-  if (!message.edited || message.redacted) return null
-  return <span className="text-[10px] text-ink-3">(edited)</span>
-}
-
-/**
- * Unlike tags/mentions (structured, composer-declared — see MessageTagChips),
- * links are render-time decoration: a URL's meaning lives in its text, so the
- * stored content is never parsed into structure or rewritten (0171).
- */
-function MessageBody({ message }: { message: ChatMessageRow }) {
-  if (message.redacted) {
-    return <span className="text-xs italic text-ink-3">message deleted</span>
-  }
-  return (
-    <LinkifiedText
-      value={message.content ?? ''}
-      className="whitespace-pre-wrap break-words text-xs text-ink-2"
-      detectPhones
-    />
-  )
-}
-
-/** Mention chips from the message's structured DIDs — open the person popover (0172). */
-function MessageMentionChips({ message }: { message: ChatMessageRow }) {
-  const dids = message.mentions?.dids ?? []
-  if (dids.length === 0 || message.redacted) return null
-  return (
-    <div className="flex flex-wrap gap-1">
-      {dids.map((did) => (
-        <PersonMentionChip key={did} did={did} />
-      ))}
-    </div>
-  )
-}
-
-/** Chips rendered from the message's structured tags — never parsed text (0169). */
-function MessageTagChips({ message }: { message: ChatMessageRow }) {
-  const navigate = useNavigate()
-  const { allTags } = useWorkspaceTags()
-  const tagIds = message.tags ?? []
-  if (tagIds.length === 0 || message.redacted) return null
-  return (
-    <div className="flex flex-wrap gap-1">
-      {tagIds.map((tagId) => (
-        <button
-          key={tagId}
-          type="button"
-          onClick={() => navigateToNode(navigate, 'tag', tagId)}
-          className="cursor-pointer rounded-full border border-hairline bg-transparent px-1.5 py-px text-[10px] text-ink-3 transition-colors hover:text-ink-1"
-        >
-          #{allTags.find((tag) => tag.id === tagId)?.name ?? tagId}
-        </button>
-      ))}
-    </div>
-  )
-}
-
-/** Chips for the message's structured node links — never parsed text (0170). */
-function MessageLinkChips({
-  message,
-  linkTargets
-}: {
-  message: ChatMessageRow
-  linkTargets: WikilinkTarget[]
-}) {
-  const navigate = useNavigate()
-  const linkIds = message.links ?? []
-  if (linkIds.length === 0 || message.redacted) return null
-  return (
-    <div className="flex flex-wrap gap-1">
-      {linkIds.map((id) => {
-        const target = linkTargets.find((t) => nodeIdFromHref(t.href) === id)
-        return (
-          <button
-            key={id}
-            type="button"
-            onClick={() => navigateToNode(navigate, (target?.kind ?? 'page') as TabNodeType, id)}
-            className="cursor-pointer rounded-full border border-hairline bg-transparent px-1.5 py-px text-[10px] text-ink-3 transition-colors hover:text-ink-1"
-          >
-            [[{target?.title ?? `${id.slice(0, 8)}…`}]]
-          </button>
-        )
-      })}
-    </div>
-  )
-}
-
-function MessageRow({
-  message,
-  profiles,
-  linkTargets,
-  labels,
-  attribution,
-  hiddenByBlock,
-  me
-}: {
-  message: ChatMessageRow
-  profiles: ProfileEntry[]
-  linkTargets: WikilinkTarget[]
-  labels: readonly AbuseLabel[]
-  attribution?: string
-  hiddenByBlock: boolean
-  me: string
-}) {
-  const author = displayName(message.createdBy ?? '?', profiles)
-  return (
-    <li className="group flex flex-col gap-0.5 px-3 py-1.5 hover:bg-surface-2/50">
-      <div className="flex items-baseline gap-2">
-        <span className="text-xs font-medium text-ink-1">{author}</span>
-        <span className="font-mono text-[10px] text-ink-3">{formatTime(message.createdAt)}</span>
-        <EditedTag message={message} />
-        <span className="ml-auto">
-          <MessageActions targetId={message.id} isOwn={message.createdBy === me} />
-        </span>
-      </div>
-      {/* Render gate (0176): blurred per the viewer's dial for sensitive labels,
-          and hidden entirely for a blocked/muted author. */}
-      <ModeratedPost
-        labels={labels}
-        attribution={attribution}
-        platformVisibility={hiddenByBlock ? 'hide' : undefined}
-        hiddenPlaceholder={<span className="text-xs italic text-ink-3">message hidden</span>}
-      >
-        <MessageBody message={message} />
-      </ModeratedPost>
-      <MessageMentionChips message={message} />
-      <MessageTagChips message={message} />
-      <MessageLinkChips message={message} linkTargets={linkTargets} />
-    </li>
-  )
-}
-
-const NO_LABELS: readonly AbuseLabel[] = []
-
-function MessageList({
-  messages,
-  profiles,
-  linkTargets,
-  listRef,
-  me
-}: {
-  messages: ChatMessageRow[]
-  profiles: ProfileEntry[]
-  linkTargets: WikilinkTarget[]
-  listRef: React.RefObject<HTMLUListElement>
-  me: string
-}) {
-  const navigate = useNavigate()
-  const ids = useMemo(() => messages.map((message) => message.id), [messages])
-  const labelsByTarget = useTrustedContentLabelsBatch(ids)
-  const blocks = useBlockList()
-  const hiddenCount = messages.filter(
-    (message) => message.createdBy && hidesContent(blocks.list, message.createdBy)
-  ).length
-  if (messages.length === 0) {
-    return (
-      <div className="flex min-h-0 flex-1 items-center justify-center text-xs text-ink-3">
-        No messages yet. Say hi!
-      </div>
-    )
-  }
-  return (
-    <ul ref={listRef} className="m-0 min-h-0 flex-1 list-none overflow-y-auto p-0 py-2">
-      {hiddenCount > 0 && (
-        <li className="px-3 py-1">
-          <button
-            type="button"
-            onClick={() => void navigate({ to: '/settings' })}
-            className="text-[10px] text-ink-3 hover:text-ink-1"
-          >
-            🛡 {hiddenCount} message(s) hidden by your block/mute list — review
-          </button>
-        </li>
-      )}
-      {messages.map((message) => {
-        const trusted = labelsByTarget.get(message.id)
-        return (
-          <MessageRow
-            key={message.id}
-            message={message}
-            profiles={profiles}
-            linkTargets={linkTargets}
-            labels={trusted?.labels ?? NO_LABELS}
-            attribution={trusted ? attributionText(trusted.attributions) : undefined}
-            hiddenByBlock={message.createdBy ? hidesContent(blocks.list, message.createdBy) : false}
-            me={me}
-          />
-        )
-      })}
-    </ul>
-  )
-}
-
-function TypingLine({ peers, profiles }: { peers: PeerPresence[]; profiles: ProfileEntry[] }) {
-  if (peers.length === 0) return <div className="h-4" />
-  const names = peers.map((p) => displayName(p.user?.did ?? '?', profiles)).join(', ')
-  return (
-    <div className="h-4 truncate px-3 text-[10px] italic text-ink-3">
-      {names} {peers.length === 1 ? 'is' : 'are'} typing…
-    </div>
-  )
-}
-
-/**
- * Shared keyboard state the chat pickers receive (0172). Only one picker is
- * ever open at a time (the active query is exclusive), so a single
- * useListboxNavigation in ChannelChat drives whichever is showing.
- */
 interface PickerNav {
   activeIndex: number
   optionId: (index: number) => string | undefined
@@ -426,7 +196,7 @@ const TYPING_THROTTLE_MS = 1500
 const WATERMARK_DEBOUNCE_MS = 800
 
 /** Advance the channel's read watermark while its newest message is visible. */
-function useWatermarkAdvance(channelId: string, newest: ChatMessageRow | undefined): void {
+function useWatermarkAdvance(channelId: string, newest: ChatRow | undefined): void {
   const { markChannelRead } = useInbox()
   useEffect(() => {
     if (!newest?.createdAt) return
@@ -483,6 +253,11 @@ function ComposerSelfLabel({
   )
 }
 
+function watermarkAt(state: { watermarks?: unknown }, channelId: string): number {
+  const map = state.watermarks as Record<string, { at?: number }> | undefined
+  return map?.[channelId]?.at ?? 0
+}
+
 export function ChannelChat({ channelId }: { channelId: string }) {
   const bridge = useDataBridge()
   const { me } = useComms()
@@ -490,22 +265,21 @@ export function ChannelChat({ channelId }: { channelId: string }) {
   const { peers, session } = useRoomPresence(channelId)
   const profiles = useProfiles()
   const mentionables = useMentionables()
+  const { state } = useInbox()
+  const [density] = useChatDensity()
 
   const [text, setText] = useState('')
   const [caret, setCaret] = useState(0)
-  // Pending self-label for the next message (0176): applied after send, when the
-  // new message node has an id.
   const [pendingLabel, setPendingLabel] = useState<SensitivityLabelValue | null>(null)
   const { selfLabel } = useSelfLabel()
-  // Escape hides the active picker until the query next changes (the pickers
-  // are otherwise derived purely from text + caret, with no open/close state).
   const [pickerDismissed, setPickerDismissed] = useState(false)
+  const [editingId, setEditingId] = useState<string | null>(null)
+  const [openThreadId, setOpenThreadId] = useState<string | null>(null)
   const picked = useRef(new Map<string, string>())
   const pickedTags = useRef(new Map<string, string>())
   const pickedLinks = useRef(new Map<string, string>())
   const lastTypingSent = useRef(0)
   const inputRef = useRef<HTMLTextAreaElement>(null)
-  const listRef = useRef<HTMLUListElement>(null)
 
   const { suggestions: tagSuggestions, getOrCreateTag } = useWorkspaceTags()
   const { linkTargets } = useLinkTargets()
@@ -516,14 +290,20 @@ export function ChannelChat({ channelId }: { channelId: string }) {
       ? tagOptionsFor(text, caret, tagSuggestions)
       : []
   const typing = useMemo(() => typingPeers(peers, channelId, Date.now()), [peers, channelId])
-  const rows = messages as unknown as ChatMessageRow[]
+  const rows = messages as unknown as ChatRow[]
 
-  useWatermarkAdvance(channelId, rows.at(-1))
+  const presenceByDid = useMemo(() => {
+    const map = new Map<string, PresenceStatus>()
+    for (const peer of peers) {
+      const did = peer.user?.did
+      if (did) map.set(did, peer.status ?? 'active')
+    }
+    return map
+  }, [peers])
 
-  // Keep scrolled to the bottom on new messages.
-  useEffect(() => {
-    listRef.current?.scrollTo({ top: listRef.current.scrollHeight })
-  }, [messages.length])
+  const lastReadAt = watermarkAt(state, channelId)
+
+  useWatermarkAdvance(channelId, rows.at(-1))
 
   const handleChange = useCallback(
     (value: string, caretPos: number) => {
@@ -560,7 +340,6 @@ export function ChannelChat({ channelId }: { channelId: string }) {
       setText(next.text)
       setCaret(next.caret)
       inputRef.current?.focus()
-      // Resolve the id in the background; an unresolved pick sends as plain text.
       void getOrCreateTag(option.name).then((tag) => {
         if (tag) pickedTags.current.set(tag.name, tag.id)
       })
@@ -581,8 +360,6 @@ export function ChannelChat({ channelId }: { channelId: string }) {
     [text, caret]
   )
 
-  // Exactly one picker can be active at a caret (the @/[[/# queries are
-  // mutually exclusive), so a single listbox nav drives whichever is showing.
   const activeKind: 'mention' | 'link' | 'tag' | null = pickerDismissed
     ? null
     : pickerOptions.length > 0
@@ -600,8 +377,6 @@ export function ChannelChat({ channelId }: { channelId: string }) {
         : activeKind === 'tag'
           ? tagOptions.length
           : 0
-  // Stable across re-renders for the same query (option arrays are rebuilt each
-  // render); changes only when the query does, so arrowing never resets to 0.
   const pickerResetKey =
     activeKind === 'mention'
       ? `mention:${pickerOptions.map((o) => o.did).join(',')}`
@@ -653,7 +428,6 @@ export function ChannelChat({ channelId }: { channelId: string }) {
       tags: composerTags(content, pickedTags.current),
       links: composerLinks(content, pickedLinks.current)
     })
-    // Apply the author's pending self-label to the just-sent message (0176).
     if (pendingLabel) {
       const messageId = (created as { id?: string } | undefined)?.id
       if (messageId) await selfLabel(messageId, pendingLabel)
@@ -664,60 +438,139 @@ export function ChannelChat({ channelId }: { channelId: string }) {
     pickedLinks.current.clear()
   }, [text, bridge, channelId, session, pendingLabel, selfLabel])
 
+  const insertEmoji = useCallback(
+    (emoji: string) => {
+      const el = inputRef.current
+      const pos = el?.selectionStart ?? text.length
+      setText((prev) => prev.slice(0, pos) + emoji + prev.slice(pos))
+      requestAnimationFrame(() => {
+        const input = inputRef.current
+        if (input) {
+          input.focus()
+          input.setSelectionRange(pos + emoji.length, pos + emoji.length)
+        }
+      })
+    },
+    [text]
+  )
+
+  const submitEdit = useCallback(
+    async (message: ChatRow, content: string) => {
+      if (!bridge) return
+      await editMessage(bridge, message.id, content)
+      setEditingId(null)
+    },
+    [bridge]
+  )
+
+  const editLastOwnMessage = useCallback(() => {
+    const mine = rows.filter((m) => m.createdBy === me.did && !m.inReplyTo && !m.redacted)
+    const last = mine.at(-1)
+    if (last) setEditingId(last.id)
+  }, [rows, me.did])
+
+  const openThread = useCallback((rootId: string) => setOpenThreadId(rootId), [])
+
   return (
-    <div className="flex h-full min-h-0 flex-col">
-      <MessageList
-        messages={rows}
-        profiles={profiles}
-        linkTargets={linkTargets}
-        listRef={listRef}
-        me={me.did}
-      />
-      <TypingLine peers={typing} profiles={profiles} />
-      <div className="relative border-t border-hairline p-2">
-        {activeKind === 'mention' && (
-          <MentionPicker options={pickerOptions} nav={navProps} onPick={pickMention} />
-        )}
-        {activeKind === 'tag' && <TagPicker options={tagOptions} nav={navProps} onPick={pickTag} />}
-        {activeKind === 'link' && (
-          <LinkPicker options={linkOptions} nav={navProps} onPick={pickLink} />
-        )}
-        <div className="flex items-end gap-2">
-          <textarea
-            ref={inputRef}
-            value={text}
-            rows={2}
-            placeholder="Message… (@ mention, # tag, [[ link, Enter to send)"
-            role={activeKind ? 'combobox' : undefined}
-            aria-expanded={activeKind ? true : undefined}
-            aria-controls={activeKind ? 'chat-suggest-listbox' : undefined}
-            aria-activedescendant={activeKind ? pickerNav.activeDescendantId : undefined}
-            aria-autocomplete={activeKind ? 'list' : undefined}
-            onChange={(event) => handleChange(event.target.value, event.target.selectionStart ?? 0)}
-            onKeyDown={(event) => {
-              // Active picker gets first refusal on arrows/Enter/Tab/Escape.
-              if (activeKind && pickerNav.onKeyDown(event)) return
-              // No picker open: Enter sends (unless mid-IME-composition).
-              if (!event.nativeEvent.isComposing && shouldSendOnEnter(event, 0)) {
-                event.preventDefault()
-                void send()
+    <div className="flex h-full min-h-0">
+      <div className="flex h-full min-h-0 flex-1 flex-col">
+        <ChannelMessageList
+          channelId={channelId}
+          messages={rows}
+          profiles={profiles}
+          linkTargets={linkTargets}
+          me={me.did}
+          presenceByDid={presenceByDid}
+          lastReadAt={lastReadAt}
+          density={density}
+          typingPeers={typing}
+          editingId={editingId}
+          onStartEdit={(message) => setEditingId(message.id)}
+          onCancelEdit={() => setEditingId(null)}
+          onSubmitEdit={submitEdit}
+          onReply={(message) => openThread(message.id)}
+          onOpenThread={openThread}
+        />
+        <div className="relative border-t border-hairline p-2">
+          {activeKind === 'mention' && (
+            <MentionPicker options={pickerOptions} nav={navProps} onPick={pickMention} />
+          )}
+          {activeKind === 'tag' && (
+            <TagPicker options={tagOptions} nav={navProps} onPick={pickTag} />
+          )}
+          {activeKind === 'link' && (
+            <LinkPicker options={linkOptions} nav={navProps} onPick={pickLink} />
+          )}
+          <div className="flex items-end gap-2">
+            <textarea
+              ref={inputRef}
+              value={text}
+              rows={2}
+              placeholder="Message… (@ mention, # tag, [[ link, Enter to send)"
+              role={activeKind ? 'combobox' : undefined}
+              aria-expanded={activeKind ? true : undefined}
+              aria-controls={activeKind ? 'chat-suggest-listbox' : undefined}
+              aria-activedescendant={activeKind ? pickerNav.activeDescendantId : undefined}
+              aria-autocomplete={activeKind ? 'list' : undefined}
+              onChange={(event) =>
+                handleChange(event.target.value, event.target.selectionStart ?? 0)
               }
-            }}
-            className="min-h-0 flex-1 resize-none rounded-md border border-hairline bg-surface-0 px-2 py-1.5 text-xs text-ink-1 outline-none placeholder:text-ink-3 focus:border-border-emphasis"
-          />
-          <ComposerSelfLabel value={pendingLabel} onChange={setPendingLabel} />
-          <button
-            type="button"
-            title="Send"
-            aria-label="Send message"
-            onClick={() => void send()}
-            disabled={!text.trim()}
-            className="flex h-7 w-7 cursor-pointer items-center justify-center rounded-md border border-hairline bg-surface-0 text-ink-2 hover:text-ink-1 disabled:cursor-default disabled:opacity-50"
-          >
-            <Send size={12} strokeWidth={1.5} />
-          </button>
+              onKeyDown={(event) => {
+                if (activeKind && pickerNav.onKeyDown(event)) return
+                if (
+                  event.key === 'ArrowUp' &&
+                  !activeKind &&
+                  text.trim() === '' &&
+                  !event.nativeEvent.isComposing
+                ) {
+                  event.preventDefault()
+                  editLastOwnMessage()
+                  return
+                }
+                if (!event.nativeEvent.isComposing && shouldSendOnEnter(event, 0)) {
+                  event.preventDefault()
+                  void send()
+                }
+              }}
+              className="min-h-0 flex-1 resize-none rounded-md border border-hairline bg-surface-0 px-2 py-1.5 text-sm text-ink-1 outline-none placeholder:text-ink-3 focus:border-border-emphasis"
+            />
+            <EmojiPicker
+              side="top"
+              align="end"
+              onSelect={insertEmoji}
+              trigger={
+                <button
+                  type="button"
+                  title="Emoji"
+                  aria-label="Insert emoji"
+                  className="flex h-7 w-7 items-center justify-center rounded-md border border-hairline bg-surface-0 text-ink-3 hover:text-ink-1"
+                >
+                  <Smile size={12} strokeWidth={1.5} />
+                </button>
+              }
+            />
+            <ComposerSelfLabel value={pendingLabel} onChange={setPendingLabel} />
+            <button
+              type="button"
+              title="Send"
+              aria-label="Send message"
+              onClick={() => void send()}
+              disabled={!text.trim()}
+              className="flex h-7 w-7 cursor-pointer items-center justify-center rounded-md border border-hairline bg-surface-0 text-ink-2 hover:text-ink-1 disabled:cursor-default disabled:opacity-50"
+            >
+              <Send size={12} strokeWidth={1.5} />
+            </button>
+          </div>
         </div>
       </div>
+      {openThreadId && (
+        <ThreadPane
+          channelId={channelId}
+          rootId={openThreadId}
+          me={me.did}
+          onClose={() => setOpenThreadId(null)}
+        />
+      )}
     </div>
   )
 }
diff --git a/apps/web/src/comms/ChannelMessageList.tsx b/apps/web/src/comms/ChannelMessageList.tsx
new file mode 100644
index 000000000..b1f4c4066
--- /dev/null
+++ b/apps/web/src/comms/ChannelMessageList.tsx
@@ -0,0 +1,213 @@
+/**
+ * ChannelMessageList — the scrollable, grouped message feed (0198).
+ *
+ * Thread replies (inReplyTo set) are kept out of the main feed and surfaced in
+ * the thread pane; the root they reply to gets a thread footer derived from the
+ * loaded window. The feed sticks to the bottom only when the reader is already
+ * there, otherwise a jump-to-latest pill appears with the unread count. New
+ * messages slide in; history loaded on open does not.
+ */
+import type { PeerPresence, PresenceStatus } from '@xnetjs/comms'
+import type { WikilinkTarget } from '@xnetjs/editor/react'
+import { ArrowDown } from 'lucide-react'
+import { useEffect, useMemo, useRef, useState } from 'react'
+import { hidesContent, useBlockList } from '../lib/block-list'
+import { attributionText, useTrustedContentLabelsBatch } from '../lib/content-labels-trust'
+import { displayName, type ProfileEntry } from './hooks'
+import { groupMessages, type ChatRow } from './message-grouping'
+import { MessageRow, type Density, type ThreadSummary } from './MessageRow'
+
+function TypingDots() {
+  return (
+    <span className="inline-flex items-center gap-0.5" aria-hidden>
+      {[0, 1, 2].map((i) => (
+        <span
+          key={i}
+          className="h-1 w-1 animate-bounce rounded-full bg-ink-3 motion-reduce:animate-none"
+          style={{ animationDelay: `${i * 0.15}s` }}
+        />
+      ))}
+    </span>
+  )
+}
+
+function TypingLine({ peers, profiles }: { peers: PeerPresence[]; profiles: ProfileEntry[] }) {
+  if (peers.length === 0) return <div className="h-5" />
+  const names = peers.map((p) => displayName(p.user?.did ?? '?', profiles)).join(', ')
+  return (
+    <div className="flex h-5 items-center gap-2 px-4 text-[11px] italic text-ink-3">
+      <TypingDots />
+      <span className="truncate">
+        {names} {peers.length === 1 ? 'is' : 'are'} typing…
+      </span>
+    </div>
+  )
+}
+
+/** Derive per-root thread summaries from the loaded reply messages. */
+function buildThreadIndex(replies: ChatRow[]): Map<string, ThreadSummary> {
+  const index = new Map<string, ThreadSummary>()
+  for (const reply of replies) {
+    const root = reply.inReplyTo
+    if (!root) continue
+    const summary = index.get(root) ?? { count: 0, participants: [], lastAt: undefined }
+    summary.count += 1
+    if (reply.createdBy && !summary.participants.includes(reply.createdBy)) {
+      summary.participants.push(reply.createdBy)
+    }
+    if ((reply.createdAt ?? 0) > (summary.lastAt ?? 0)) summary.lastAt = reply.createdAt
+    index.set(root, summary)
+  }
+  return index
+}
+
+export function ChannelMessageList({
+  channelId,
+  messages,
+  profiles,
+  linkTargets,
+  me,
+  presenceByDid,
+  lastReadAt,
+  density,
+  typingPeers,
+  editingId,
+  onStartEdit,
+  onCancelEdit,
+  onSubmitEdit,
+  onReply,
+  onOpenThread
+}: {
+  channelId: string
+  messages: ChatRow[]
+  profiles: ProfileEntry[]
+  linkTargets: WikilinkTarget[]
+  me: string
+  presenceByDid: Map<string, PresenceStatus>
+  lastReadAt: number
+  density: Density
+  typingPeers: PeerPresence[]
+  editingId: string | null
+  onStartEdit: (message: ChatRow) => void
+  onCancelEdit: () => void
+  onSubmitEdit: (message: ChatRow, content: string) => void | Promise<void>
+  onReply: (message: ChatRow) => void
+  onOpenThread: (rootId: string) => void
+}) {
+  const listRef = useRef<HTMLUListElement>(null)
+  const atBottomRef = useRef(true)
+  const mountedAtRef = useRef(Date.now())
+  const [showPill, setShowPill] = useState(false)
+
+  const roots = useMemo(() => messages.filter((m) => !m.inReplyTo), [messages])
+  const threadIndex = useMemo(
+    () => buildThreadIndex(messages.filter((m) => m.inReplyTo)),
+    [messages]
+  )
+  const rows = useMemo(() => groupMessages(roots, lastReadAt), [roots, lastReadAt])
+
+  const ids = useMemo(() => roots.map((m) => m.id), [roots])
+  const labelsByTarget = useTrustedContentLabelsBatch(ids)
+  const blocks = useBlockList()
+  const hiddenCount = roots.filter(
+    (m) => m.createdBy && hidesContent(blocks.list, m.createdBy)
+  ).length
+  const unreadAhead = roots.filter((m) => (m.createdAt ?? 0) > lastReadAt).length
+
+  const scrollToBottom = () => {
+    const el = listRef.current
+    if (el) el.scrollTop = el.scrollHeight
+  }
+
+  // Reset to the bottom when switching channels; stop animating history.
+  useEffect(() => {
+    mountedAtRef.current = Date.now()
+    atBottomRef.current = true
+    setShowPill(false)
+    scrollToBottom()
+  }, [channelId])
+
+  // Stick to the bottom on new messages only when already near it.
+  useEffect(() => {
+    if (atBottomRef.current) scrollToBottom()
+  }, [messages.length])
+
+  const handleScroll = () => {
+    const el = listRef.current
+    if (!el) return
+    const near = el.scrollHeight - el.scrollTop - el.clientHeight < 120
+    atBottomRef.current = near
+    setShowPill(!near)
+  }
+
+  return (
+    <div className="relative flex min-h-0 flex-1 flex-col">
+      {roots.length === 0 ? (
+        <div className="flex min-h-0 flex-1 items-center justify-center text-sm text-ink-3">
+          No messages yet. Say hi!
+        </div>
+      ) : (
+        <ul
+          ref={listRef}
+          onScroll={handleScroll}
+          role="log"
+          aria-label="Messages"
+          aria-live="polite"
+          className="m-0 min-h-0 flex-1 list-none overflow-y-auto p-0 py-2"
+        >
+          {hiddenCount > 0 && (
+            <li className="px-4 py-1 text-[10px] text-ink-3">
+              🛡 {hiddenCount} message(s) hidden by your block/mute list
+            </li>
+          )}
+          {rows.map((row) => {
+            const trusted = labelsByTarget.get(row.message.id)
+            return (
+              <MessageRow
+                key={row.message.id}
+                row={row}
+                profiles={profiles}
+                linkTargets={linkTargets}
+                labels={trusted?.labels ?? []}
+                attribution={trusted ? attributionText(trusted.attributions) : undefined}
+                hiddenByBlock={
+                  row.message.createdBy ? hidesContent(blocks.list, row.message.createdBy) : false
+                }
+                me={me}
+                authorStatus={
+                  row.message.createdBy ? presenceByDid.get(row.message.createdBy) : undefined
+                }
+                density={density}
+                animateIn={(row.message.createdAt ?? 0) > mountedAtRef.current}
+                isEditing={editingId === row.message.id}
+                onStartEdit={() => onStartEdit(row.message)}
+                onCancelEdit={onCancelEdit}
+                onSubmitEdit={(content) => onSubmitEdit(row.message, content)}
+                onReply={() => onReply(row.message)}
+                thread={threadIndex.get(row.message.id)}
+                onOpenThread={() => onOpenThread(row.message.id)}
+              />
+            )
+          })}
+        </ul>
+      )}
+
+      {showPill && (
+        <button
+          type="button"
+          onClick={() => {
+            scrollToBottom()
+            atBottomRef.current = true
+            setShowPill(false)
+          }}
+          className="absolute bottom-3 right-4 flex animate-fade-in items-center gap-1.5 rounded-full border border-hairline bg-surface-0 px-3 py-1.5 text-xs text-ink-1 shadow-sm hover:bg-surface-2 motion-reduce:animate-none"
+        >
+          <ArrowDown size={13} strokeWidth={2} />
+          {unreadAhead > 0 ? `${unreadAhead} new` : 'Jump to latest'}
+        </button>
+      )}
+
+      <TypingLine peers={typingPeers} profiles={profiles} />
+    </div>
+  )
+}
diff --git a/apps/web/src/comms/ChannelView.tsx b/apps/web/src/comms/ChannelView.tsx
index 2eb049c55..ee9454c94 100644
--- a/apps/web/src/comms/ChannelView.tsx
+++ b/apps/web/src/comms/ChannelView.tsx
@@ -1,51 +1,147 @@
 /**
- * ChannelView — the channel tab surface (0167): header with kind, roster
- * and call controls, then the shared ChannelChat.
+ * ChannelView — the channel tab surface (0198): a richer header (kind glyph,
+ * name, editable topic, a live presence avatar stack + member count, and a
+ * members popover) above the shared ChannelChat.
  */
-import { rosterUsers } from '@xnetjs/comms'
+import { rosterUsers, type UserCard } from '@xnetjs/comms'
 import { ChannelSchema } from '@xnetjs/data'
-import { useQuery } from '@xnetjs/react'
-import { Hash, MessageCircle, Volume2 } from 'lucide-react'
+import { useMutate, useQuery } from '@xnetjs/react'
+import { cn, Popover } from '@xnetjs/ui'
+import { Hash, MessageCircle, Users, Volume2 } from 'lucide-react'
+import { useEffect, useState } from 'react'
 import { CallControls } from './CallDock'
 import { ChannelChat } from './ChannelChat'
+import { ChatAvatar } from './ChatAvatar'
 import { channelHeaderModel } from './comms-utils'
 import { useComms } from './CommsContext'
-import { useProfiles, useRoomPresence, displayName } from './hooks'
+import { displayName, useProfiles, useRoomPresence, type ProfileEntry } from './hooks'
 
 const KIND_ICONS = { channel: Hash, dm: MessageCircle, voice: Volume2 } as const
 
-function HeaderRoster({ channelId }: { channelId: string }) {
-  const { peers } = useRoomPresence(channelId)
-  const profiles = useProfiles()
-  const users = rosterUsers(peers)
-  if (users.length === 0) return null
+function EditableTopic({ channelId, topic }: { channelId: string; topic?: string }) {
+  const { update } = useMutate()
+  const [editing, setEditing] = useState(false)
+  const [value, setValue] = useState(topic ?? '')
+  useEffect(() => setValue(topic ?? ''), [topic])
+
+  const save = () => {
+    void update(ChannelSchema, channelId, { topic: value.trim() })
+    setEditing(false)
+  }
+
+  if (editing) {
+    return (
+      <input
+        autoFocus
+        value={value}
+        placeholder="Add a topic"
+        onChange={(event) => setValue(event.target.value)}
+        onBlur={save}
+        onKeyDown={(event) => {
+          if (event.key === 'Enter') save()
+          if (event.key === 'Escape') {
+            setValue(topic ?? '')
+            setEditing(false)
+          }
+        }}
+        className="min-w-0 flex-1 rounded border border-border-emphasis bg-surface-0 px-1.5 py-0.5 text-[11px] text-ink-1 outline-none"
+      />
+    )
+  }
   return (
-    <span className="truncate text-[11px] text-ink-3">
-      here: {users.map((u) => displayName(u.did, profiles)).join(', ')}
-    </span>
+    <button
+      type="button"
+      onClick={() => setEditing(true)}
+      className="min-w-0 truncate text-left text-[11px] text-ink-3 hover:text-ink-1"
+      title="Edit topic"
+    >
+      {topic?.trim() || 'Add a topic'}
+    </button>
   )
 }
 
-function HeaderTopic({ topic }: { topic?: string }) {
-  if (!topic) return null
-  return <span className="truncate text-[11px] text-ink-3">{topic}</span>
+function MembersButton({
+  roster,
+  memberCount,
+  profiles
+}: {
+  roster: UserCard[]
+  memberCount: number
+  profiles: ProfileEntry[]
+}) {
+  if (roster.length === 0 && memberCount === 0) return null
+  const trigger = (
+    <button
+      type="button"
+      aria-label="Members"
+      className="flex items-center gap-1 rounded-md px-1 py-0.5 hover:bg-surface-2"
+    >
+      <span className="flex -space-x-1.5">
+        {roster.slice(0, 4).map((user) => (
+          <ChatAvatar
+            key={user.did}
+            did={user.did}
+            src={user.avatar}
+            size={22}
+            status="active"
+            showPresence
+            className="ring-2 ring-surface-0"
+          />
+        ))}
+      </span>
+      {memberCount > 0 && (
+        <span className="ml-1 flex items-center gap-0.5 text-[11px] text-ink-3">
+          <Users size={11} strokeWidth={1.5} />
+          {memberCount}
+        </span>
+      )}
+    </button>
+  )
+  return (
+    <Popover trigger={trigger} side="bottom" align="end" className="w-52 p-2">
+      <div className="flex flex-col gap-0.5">
+        <span className="px-1 pb-1 text-[10px] uppercase tracking-wider text-ink-3">
+          Here now · {roster.length}
+        </span>
+        {roster.length === 0 && (
+          <span className="px-1 py-1 text-xs text-ink-3">No one else here</span>
+        )}
+        {roster.map((user) => (
+          <div
+            key={user.did}
+            className="flex items-center gap-2 rounded px-1 py-1 text-xs text-ink-1"
+          >
+            <ChatAvatar did={user.did} src={user.avatar} size={20} status="active" showPresence />
+            <span className="truncate">{displayName(user.did, profiles)}</span>
+          </div>
+        ))}
+      </div>
+    </Popover>
+  )
 }
 
 export function ChannelView({ channelId }: { channelId: string }) {
   const { me } = useComms()
   const profiles = useProfiles()
+  const { peers } = useRoomPresence(channelId)
   const { data: channel } = useQuery(ChannelSchema, channelId)
-  const header = channelHeaderModel(channel as Record<string, unknown> | null, me.did, profiles)
+  const record = channel as Record<string, unknown> | null
+  const header = channelHeaderModel(record, me.did, profiles)
   const Icon = KIND_ICONS[header.kind as keyof typeof KIND_ICONS] ?? Hash
+  const roster = rosterUsers(peers).filter((user) => user.did !== me.did)
+  const memberCount = (record?.members as string[] | undefined)?.length ?? 0
 
   return (
     <div className="flex h-full min-h-0 flex-col bg-surface-0">
-      <header className="flex h-9 shrink-0 items-center gap-2 border-b border-hairline px-3">
-        <Icon size={14} strokeWidth={1.5} className="shrink-0 text-ink-3" />
-        <span className="truncate text-sm font-medium text-ink-1">{header.label}</span>
-        <HeaderTopic topic={header.topic} />
+      <header className="flex h-11 shrink-0 items-center gap-2 border-b border-hairline px-3">
+        <Icon size={15} strokeWidth={1.5} className="shrink-0 text-ink-3" />
+        <span className={cn('shrink-0 truncate text-sm font-semibold text-ink-1')}>
+          {header.label}
+        </span>
+        <span className="h-4 w-px shrink-0 bg-hairline" />
+        <EditableTopic channelId={channelId} topic={header.topic} />
         <div className="min-w-0 flex-1" />
-        <HeaderRoster channelId={channelId} />
+        <MembersButton roster={roster} memberCount={memberCount} profiles={profiles} />
         <CallControls roomId={channelId} autoJoinVoice={header.kind === 'voice'} />
       </header>
       <div className="min-h-0 flex-1">
diff --git a/apps/web/src/comms/ChatAvatar.tsx b/apps/web/src/comms/ChatAvatar.tsx
new file mode 100644
index 000000000..908f96462
--- /dev/null
+++ b/apps/web/src/comms/ChatAvatar.tsx
@@ -0,0 +1,43 @@
+/**
+ * ChatAvatar — a user's avatar with an optional presence dot (0198).
+ * Uses the profile image when one is set, else the deterministic DIDAvatar
+ * identicon so every author still has a stable visual identity.
+ */
+import type { PresenceStatus } from '@xnetjs/comms'
+import { cn, DIDAvatar } from '@xnetjs/ui'
+import { PresenceDot } from './PresenceDot'
+
+export function ChatAvatar({
+  did,
+  src,
+  size = 36,
+  status,
+  showPresence = false,
+  className
+}: {
+  did: string
+  src?: string
+  size?: number
+  status?: PresenceStatus
+  showPresence?: boolean
+  className?: string
+}) {
+  return (
+    <span
+      className={cn('relative inline-flex shrink-0', className)}
+      style={{ width: size, height: size }}
+    >
+      {src ? (
+        <img
+          src={src}
+          alt=""
+          className="rounded-full object-cover"
+          style={{ width: size, height: size }}
+        />
+      ) : (
+        <DIDAvatar did={did} size={size} />
+      )}
+      {showPresence && <PresenceDot status={status} className="absolute -bottom-0.5 -right-0.5" />}
+    </span>
+  )
+}
diff --git a/apps/web/src/comms/ChatsPanel.tsx b/apps/web/src/comms/ChatsPanel.tsx
index 53d34811c..467b9c16d 100644
--- a/apps/web/src/comms/ChatsPanel.tsx
+++ b/apps/web/src/comms/ChatsPanel.tsx
@@ -1,7 +1,8 @@
 /**
  * ChatsPanel — Left Panel view listing channels, DMs, and voice rooms
- * (0167). Unread mention counts come from the local notifier; voice-room
- * occupancy and DM partner presence come from the workspace roster.
+ * (0167/0198). DM rows show the partner's avatar + live presence dot; rows with
+ * unread mentions are emphasised. Voice-room occupancy and DM partner presence
+ * come from the workspace roster; mention counts from the local notifier.
  */
 import { useNavigate } from '@tanstack/react-router'
 import {
@@ -10,11 +11,15 @@ import {
   isUnread,
   peersInCall,
   type InboxItem,
-  type InboxStateData
+  type InboxStateData,
+  type PeerPresence,
+  type PresenceStatus
 } from '@xnetjs/comms'
 import { useDataBridge } from '@xnetjs/react/internal'
+import { cn } from '@xnetjs/ui'
 import { Hash, MessageCircle, Plus, Volume2 } from 'lucide-react'
 import { useMemo, useState, type ReactNode } from 'react'
+import { ChatAvatar } from './ChatAvatar'
 import { channelLabel, type ChannelEntry } from './comms-utils'
 import { useComms } from './CommsContext'
 import { useChannels, useInbox, useProfiles, displayName } from './hooks'
@@ -33,7 +38,7 @@ function unreadMentionCount(channelId: string, items: InboxItem[], state: InboxS
 function MentionBadge({ count }: { count: number }) {
   if (count === 0) return null
   return (
-    <span className="rounded-full bg-ink-1 px-1.5 font-mono text-[10px] leading-4 text-surface-0">
+    <span className="rounded-full bg-destructive px-1.5 font-mono text-[10px] leading-4 text-surface-0">
       {count}
     </span>
   )
@@ -41,31 +46,34 @@ function MentionBadge({ count }: { count: number }) {
 
 function OccupancyBadge({ count }: { count: number }) {
   if (count === 0) return null
-  return <span className="font-mono text-[10px] text-ink-3">◉ {count}</span>
+  return <span className="font-mono text-[10px] text-success">◉ {count}</span>
 }
 
 function ChannelRow({
-  channel,
+  leading,
   label,
   mentionCount,
   occupancy,
   onOpen
 }: {
-  channel: ChannelEntry
+  leading: ReactNode
   label: string
   mentionCount: number
   occupancy: number
   onOpen: () => void
 }) {
-  const Icon = KIND_ICONS[channel.kind ?? 'channel'] ?? Hash
+  const unread = mentionCount > 0
   return (
     <li>
       <button
         type="button"
         onClick={onOpen}
-        className="flex w-full cursor-pointer items-center gap-2 rounded border-none bg-transparent px-2 py-1 text-left text-xs text-ink-2 hover:bg-surface-2 hover:text-ink-1"
+        className={cn(
+          'flex w-full cursor-pointer items-center gap-2 rounded border-none bg-transparent px-2 py-1 text-left text-xs hover:bg-surface-2 hover:text-ink-1',
+          unread ? 'font-medium text-ink-1' : 'text-ink-2'
+        )}
       >
-        <Icon size={13} strokeWidth={1.5} className="shrink-0 text-ink-3" />
+        <span className="flex w-[18px] shrink-0 items-center justify-center">{leading}</span>
         <span className="min-w-0 flex-1 truncate">{label}</span>
         <OccupancyBadge count={occupancy} />
         <MentionBadge count={mentionCount} />
@@ -128,8 +136,9 @@ function NewDmList({ onDone }: { onDone: () => void }) {
           <button
             type="button"
             onClick={() => void open(profile.did)}
-            className="w-full cursor-pointer truncate rounded border-none bg-transparent px-2 py-1 text-left text-xs text-ink-2 hover:bg-surface-2"
+            className="flex w-full cursor-pointer items-center gap-2 truncate rounded border-none bg-transparent px-2 py-1 text-left text-xs text-ink-2 hover:bg-surface-2"
           >
+            <ChatAvatar did={profile.did} src={profile.avatar} size={18} />
             {displayName(profile.did, profiles)}
           </button>
         </li>
@@ -169,6 +178,15 @@ export function ChatsPanel() {
   const profiles = useProfiles()
   const [creating, setCreating] = useState<'channel' | 'dm' | null>(null)
 
+  const presenceByDid = useMemo(() => {
+    const map = new Map<string, PresenceStatus>()
+    for (const peer of workspacePeers as PeerPresence[]) {
+      const did = peer.user?.did
+      if (did) map.set(did, peer.status ?? 'active')
+    }
+    return map
+  }, [workspacePeers])
+
   const groups = useMemo(() => {
     const list = channels as unknown as ChannelEntry[]
     return {
@@ -178,11 +196,32 @@ export function ChatsPanel() {
     }
   }, [channels])
 
+  const leadingFor = (channel: ChannelEntry): ReactNode => {
+    if (channel.kind === 'dm') {
+      const partner = (channel.members ?? []).find((m) => m !== me.did)
+      if (partner) {
+        const profile = profiles.find((p) => p.did === partner)
+        return (
+          <ChatAvatar
+            did={partner}
+            src={profile?.avatar}
+            size={18}
+            status={presenceByDid.get(partner)}
+            showPresence={presenceByDid.has(partner)}
+          />
+        )
+      }
+      return <MessageCircle size={13} strokeWidth={1.5} className="text-ink-3" />
+    }
+    const Icon = KIND_ICONS[channel.kind ?? 'channel'] ?? Hash
+    return <Icon size={13} strokeWidth={1.5} className="text-ink-3" />
+  }
+
   const rows = (list: ChannelEntry[]) =>
     list.map((channel) => (
       <ChannelRow
         key={channel.id}
-        channel={channel}
+        leading={leadingFor(channel)}
         label={channelLabel(channel, me.did, profiles)}
         mentionCount={unreadMentionCount(channel.id, items, state)}
         occupancy={peersInCall(workspacePeers, channel.id).length}
diff --git a/apps/web/src/comms/EmojiPicker.tsx b/apps/web/src/comms/EmojiPicker.tsx
new file mode 100644
index 000000000..ecbf0d9a3
--- /dev/null
+++ b/apps/web/src/comms/EmojiPicker.tsx
@@ -0,0 +1,76 @@
+/**
+ * EmojiPicker — a small, dependency-free emoji popover (0198). Searchable grid
+ * over the curated EMOJI_SET; closes and clears its query when one is picked.
+ */
+import { Popover } from '@xnetjs/ui'
+import { useState, type ReactElement } from 'react'
+import { filterEmoji } from './emoji-data'
+
+export function EmojiPicker({
+  trigger,
+  onSelect,
+  side = 'top',
+  align = 'end'
+}: {
+  trigger: ReactElement
+  onSelect: (emoji: string) => void
+  side?: 'top' | 'right' | 'bottom' | 'left'
+  align?: 'start' | 'center' | 'end'
+}) {
+  const [open, setOpen] = useState(false)
+  const [query, setQuery] = useState('')
+  const results = filterEmoji(query)
+
+  const pick = (emoji: string) => {
+    onSelect(emoji)
+    setQuery('')
+    setOpen(false)
+  }
+
+  return (
+    <Popover
+      trigger={trigger}
+      open={open}
+      onOpenChange={setOpen}
+      side={side}
+      align={align}
+      className="w-64 p-2"
+    >
+      <div className="flex flex-col gap-2">
+        <input
+          autoFocus
+          type="text"
+          value={query}
+          placeholder="Search emoji…"
+          onChange={(event) => setQuery(event.target.value)}
+          className="h-7 w-full rounded border border-hairline bg-surface-0 px-2 text-xs text-ink-1 outline-none placeholder:text-ink-3 focus:border-border-emphasis"
+        />
+        <div
+          role="listbox"
+          aria-label="Emoji"
+          className="grid max-h-44 grid-cols-8 gap-0.5 overflow-y-auto"
+        >
+          {results.map((entry) => (
+            <button
+              key={entry.emoji}
+              type="button"
+              role="option"
+              aria-selected={false}
+              title={entry.name}
+              aria-label={entry.name}
+              onClick={() => pick(entry.emoji)}
+              className="flex h-7 w-7 cursor-pointer items-center justify-center rounded border-none bg-transparent text-base hover:bg-surface-2"
+            >
+              {entry.emoji}
+            </button>
+          ))}
+          {results.length === 0 && (
+            <div className="col-span-8 px-2 py-3 text-center text-xs text-ink-3">
+              No emoji found
+            </div>
+          )}
+        </div>
+      </div>
+    </Popover>
+  )
+}
diff --git a/apps/web/src/comms/MessageHoverToolbar.tsx b/apps/web/src/comms/MessageHoverToolbar.tsx
new file mode 100644
index 000000000..53dc691c3
--- /dev/null
+++ b/apps/web/src/comms/MessageHoverToolbar.tsx
@@ -0,0 +1,74 @@
+/**
+ * MessageHoverToolbar — the floating actions revealed on message hover (0198):
+ * quick reactions, add-reaction picker, reply-in-thread, edit (own messages),
+ * and the existing safety menu (report / mark sensitive) under "more".
+ */
+import { MessageSquare, Pencil, SmilePlus } from 'lucide-react'
+import { MessageActions } from '../components/MessageActions'
+import { QUICK_REACTIONS } from './emoji-data'
+import { EmojiPicker } from './EmojiPicker'
+
+const ACTION_CLASS =
+  'flex h-6 w-6 cursor-pointer items-center justify-center rounded border-none bg-transparent text-ink-3 hover:bg-surface-2 hover:text-ink-1'
+
+export function MessageHoverToolbar({
+  messageId,
+  isOwn,
+  onToggleReaction,
+  onReply,
+  onStartEdit
+}: {
+  messageId: string
+  isOwn: boolean
+  onToggleReaction: (emoji: string) => void
+  onReply: () => void
+  onStartEdit: () => void
+}) {
+  return (
+    <div className="absolute -top-3 right-3 z-10 flex items-center gap-0.5 rounded-md border border-hairline bg-surface-0 p-0.5 opacity-0 shadow-sm transition-opacity pointer-events-none group-hover:pointer-events-auto group-hover:opacity-100 focus-within:pointer-events-auto focus-within:opacity-100">
+      {QUICK_REACTIONS.slice(0, 2).map((emoji) => (
+        <button
+          key={emoji}
+          type="button"
+          title={`React ${emoji}`}
+          aria-label={`React with ${emoji}`}
+          onClick={() => onToggleReaction(emoji)}
+          className="flex h-6 w-6 cursor-pointer items-center justify-center rounded border-none bg-transparent text-sm hover:bg-surface-2"
+        >
+          {emoji}
+        </button>
+      ))}
+      <EmojiPicker
+        side="top"
+        align="end"
+        onSelect={onToggleReaction}
+        trigger={
+          <button type="button" aria-label="Add reaction" className={ACTION_CLASS}>
+            <SmilePlus size={14} strokeWidth={1.5} />
+          </button>
+        }
+      />
+      <button
+        type="button"
+        aria-label="Reply in thread"
+        title="Reply in thread"
+        onClick={onReply}
+        className={ACTION_CLASS}
+      >
+        <MessageSquare size={14} strokeWidth={1.5} />
+      </button>
+      {isOwn && (
+        <button
+          type="button"
+          aria-label="Edit message"
+          title="Edit"
+          onClick={onStartEdit}
+          className={ACTION_CLASS}
+        >
+          <Pencil size={14} strokeWidth={1.5} />
+        </button>
+      )}
+      <MessageActions targetId={messageId} isOwn={isOwn} />
+    </div>
+  )
+}
diff --git a/apps/web/src/comms/MessageRow.tsx b/apps/web/src/comms/MessageRow.tsx
new file mode 100644
index 000000000..b483482ce
--- /dev/null
+++ b/apps/web/src/comms/MessageRow.tsx
@@ -0,0 +1,341 @@
+/**
+ * MessageRow — one rendered message in the channel feed (0198).
+ *
+ * Carries the cross-app chat grammar: a day separator and "New messages"
+ * divider when the render row calls for them, grouped avatar/name/time headers
+ * (suppressed for consecutive same-author messages), the moderated body with
+ * structured mention/tag/link chips, an emoji reaction bar, a thread footer,
+ * inline edit, and the hover action toolbar. Moderation/self-label wiring is
+ * preserved from the original surface (0176).
+ */
+import type { TabNodeType } from '../workbench/state'
+import type { AbuseLabel } from '@xnetjs/abuse'
+import type { PresenceStatus } from '@xnetjs/comms'
+import type { WikilinkTarget } from '@xnetjs/editor/react'
+import { useNavigate } from '@tanstack/react-router'
+import { cn, LinkifiedText } from '@xnetjs/ui'
+import { useEffect, useRef, useState } from 'react'
+import { ModeratedPost } from '../components/ModeratedMedia'
+import { PersonMentionChip } from '../components/PersonHovercard'
+import { useWorkspaceTags } from '../hooks/useWorkspaceTags'
+import { navigateToNode } from '../workbench/navigation'
+import { ChatAvatar } from './ChatAvatar'
+import { displayName, type ProfileEntry } from './hooks'
+import { nodeIdFromHref } from './link-composer'
+import { formatTime, type ChatRow, type RenderRow } from './message-grouping'
+import { MessageHoverToolbar } from './MessageHoverToolbar'
+import { ReactionBar } from './ReactionBar'
+import { useMessageReactions } from './useMessageReactions'
+
+export type Density = 'comfortable' | 'compact'
+
+export interface ThreadSummary {
+  count: number
+  participants: string[]
+  lastAt?: number
+}
+
+function EditedTag({ message }: { message: ChatRow }) {
+  if (!message.edited || message.redacted) return null
+  return <span className="text-[10px] text-ink-3">(edited)</span>
+}
+
+function MessageBody({ message }: { message: ChatRow }) {
+  if (message.redacted) {
+    return <span className="text-xs italic text-ink-3">message deleted</span>
+  }
+  return (
+    <LinkifiedText
+      value={message.content ?? ''}
+      className="whitespace-pre-wrap break-words text-sm text-ink-2"
+      detectPhones
+    />
+  )
+}
+
+function MessageMentionChips({ message }: { message: ChatRow }) {
+  const dids = message.mentions?.dids ?? []
+  if (dids.length === 0 || message.redacted) return null
+  return (
+    <div className="mt-0.5 flex flex-wrap gap-1">
+      {dids.map((did) => (
+        <PersonMentionChip key={did} did={did} />
+      ))}
+    </div>
+  )
+}
+
+function MessageTagChips({ message }: { message: ChatRow }) {
+  const navigate = useNavigate()
+  const { allTags } = useWorkspaceTags()
+  const tagIds = message.tags ?? []
+  if (tagIds.length === 0 || message.redacted) return null
+  return (
+    <div className="mt-0.5 flex flex-wrap gap-1">
+      {tagIds.map((tagId) => (
+        <button
+          key={tagId}
+          type="button"
+          onClick={() => navigateToNode(navigate, 'tag', tagId)}
+          className="cursor-pointer rounded-full border border-hairline bg-transparent px-1.5 py-px text-[10px] text-ink-3 transition-colors hover:text-ink-1"
+        >
+          #{allTags.find((tag) => tag.id === tagId)?.name ?? tagId}
+        </button>
+      ))}
+    </div>
+  )
+}
+
+function MessageLinkChips({
+  message,
+  linkTargets
+}: {
+  message: ChatRow
+  linkTargets: WikilinkTarget[]
+}) {
+  const navigate = useNavigate()
+  const linkIds = message.links ?? []
+  if (linkIds.length === 0 || message.redacted) return null
+  return (
+    <div className="mt-0.5 flex flex-wrap gap-1">
+      {linkIds.map((id) => {
+        const target = linkTargets.find((t) => nodeIdFromHref(t.href) === id)
+        return (
+          <button
+            key={id}
+            type="button"
+            onClick={() => navigateToNode(navigate, (target?.kind ?? 'page') as TabNodeType, id)}
+            className="cursor-pointer rounded-full border border-hairline bg-transparent px-1.5 py-px text-[10px] text-ink-3 transition-colors hover:text-ink-1"
+          >
+            [[{target?.title ?? `${id.slice(0, 8)}…`}]]
+          </button>
+        )
+      })}
+    </div>
+  )
+}
+
+function DateSeparator({ label }: { label: string }) {
+  return (
+    <li className="flex items-center gap-3 px-4 py-2" aria-hidden>
+      <span className="h-px flex-1 bg-hairline" />
+      <span className="text-[11px] font-medium text-ink-3">{label}</span>
+      <span className="h-px flex-1 bg-hairline" />
+    </li>
+  )
+}
+
+function UnreadDivider() {
+  return (
+    <li className="flex items-center gap-2 px-4 py-1" aria-label="New messages">
+      <span className="h-px flex-1 bg-destructive/60" />
+      <span className="text-[10px] font-medium uppercase tracking-wider text-destructive">New</span>
+      <span className="h-px flex-1 bg-destructive/60" />
+    </li>
+  )
+}
+
+function ThreadFooter({ thread, onOpen }: { thread: ThreadSummary; onOpen: () => void }) {
+  return (
+    <button
+      type="button"
+      onClick={onOpen}
+      className="mt-1 flex w-fit items-center gap-2 rounded-md border border-transparent px-1.5 py-0.5 text-xs text-accent-ink transition-colors hover:border-hairline hover:bg-surface-1"
+    >
+      <span className="flex -space-x-1.5">
+        {thread.participants.slice(0, 3).map((did) => (
+          <ChatAvatar key={did} did={did} size={18} className="ring-2 ring-surface-0" />
+        ))}
+      </span>
+      <span className="font-medium">
+        {thread.count} {thread.count === 1 ? 'reply' : 'replies'}
+      </span>
+      {thread.lastAt != null && (
+        <span className="text-ink-3">· last reply {formatTime(thread.lastAt)}</span>
+      )}
+    </button>
+  )
+}
+
+function EditForm({
+  initial,
+  onSubmit,
+  onCancel
+}: {
+  initial: string
+  onSubmit: (content: string) => void | Promise<void>
+  onCancel: () => void
+}) {
+  const [value, setValue] = useState(initial)
+  const ref = useRef<HTMLTextAreaElement>(null)
+  useEffect(() => {
+    const el = ref.current
+    if (!el) return
+    el.focus()
+    el.setSelectionRange(el.value.length, el.value.length)
+  }, [])
+  return (
+    <div className="mt-0.5 flex flex-col gap-1">
+      <textarea
+        ref={ref}
+        value={value}
+        rows={2}
+        aria-label="Edit message"
+        onChange={(event) => setValue(event.target.value)}
+        onKeyDown={(event) => {
+          if (event.key === 'Escape') {
+            event.preventDefault()
+            onCancel()
+          } else if (event.key === 'Enter' && !event.shiftKey && !event.nativeEvent.isComposing) {
+            event.preventDefault()
+            if (value.trim()) void onSubmit(value)
+          }
+        }}
+        className="resize-none rounded-md border border-border-emphasis bg-surface-0 px-2 py-1.5 text-sm text-ink-1 outline-none"
+      />
+      <div className="flex items-center gap-2 text-[11px] text-ink-3">
+        <span>
+          escape to{' '}
+          <button type="button" onClick={onCancel} className="text-accent-ink hover:underline">
+            cancel
+          </button>
+        </span>
+        <span>·</span>
+        <span>
+          enter to{' '}
+          <button
+            type="button"
+            onClick={() => value.trim() && void onSubmit(value)}
+            className="text-accent-ink hover:underline"
+          >
+            save
+          </button>
+        </span>
+      </div>
+    </div>
+  )
+}
+
+export function MessageRow({
+  row,
+  profiles,
+  linkTargets,
+  labels,
+  attribution,
+  hiddenByBlock,
+  me,
+  authorStatus,
+  density,
+  animateIn,
+  isEditing,
+  onStartEdit,
+  onCancelEdit,
+  onSubmitEdit,
+  onReply,
+  thread,
+  onOpenThread
+}: {
+  row: RenderRow
+  profiles: ProfileEntry[]
+  linkTargets: WikilinkTarget[]
+  labels: readonly AbuseLabel[]
+  attribution?: string
+  hiddenByBlock: boolean
+  me: string
+  authorStatus?: PresenceStatus
+  density: Density
+  animateIn: boolean
+  isEditing: boolean
+  onStartEdit: () => void
+  onCancelEdit: () => void
+  onSubmitEdit: (content: string) => void | Promise<void>
+  onReply: () => void
+  thread?: ThreadSummary
+  onOpenThread: () => void
+}) {
+  const { message, startsGroup } = row
+  const author = profiles.find((p) => p.did === message.createdBy)
+  const authorName = displayName(message.createdBy ?? '?', profiles)
+  const isOwn = message.createdBy === me
+  const { groups, toggle } = useMessageReactions(message.id, me)
+  const compact = density === 'compact'
+
+  return (
+    <>
+      {row.daySeparator && <DateSeparator label={row.daySeparator} />}
+      {row.firstUnread && <UnreadDivider />}
+      <li
+        className={cn(
+          'group relative flex gap-2.5 px-4 hover:bg-surface-2/40',
+          startsGroup ? (compact ? 'pt-1' : 'pt-1.5') : '',
+          compact ? 'pb-0.5' : 'pb-1',
+          animateIn && 'animate-slide-in-bottom motion-reduce:animate-none'
+        )}
+      >
+        {startsGroup ? (
+          <ChatAvatar
+            did={message.createdBy ?? '?'}
+            src={author?.avatar}
+            size={compact ? 24 : 36}
+            status={authorStatus}
+            showPresence={authorStatus != null}
+            className="mt-0.5"
+          />
+        ) : (
+          <time className="w-9 shrink-0 select-none pt-0.5 text-right font-mono text-[10px] leading-5 text-ink-3 opacity-0 group-hover:opacity-100">
+            {formatTime(message.createdAt)}
+          </time>
+        )}
+        <div className="min-w-0 flex-1">
+          {startsGroup && (
+            <div className="flex items-baseline gap-2">
+              <span className="text-sm font-semibold text-ink-1">{authorName}</span>
+              <time className="font-mono text-[10px] text-ink-3">
+                {formatTime(message.createdAt)}
+              </time>
+              <EditedTag message={message} />
+            </div>
+          )}
+          {isEditing ? (
+            <EditForm
+              initial={message.content ?? ''}
+              onSubmit={onSubmitEdit}
+              onCancel={onCancelEdit}
+            />
+          ) : (
+            <>
+              <ModeratedPost
+                labels={labels}
+                attribution={attribution}
+                platformVisibility={hiddenByBlock ? 'hide' : undefined}
+                hiddenPlaceholder={
+                  <span className="text-xs italic text-ink-3">message hidden</span>
+                }
+              >
+                <MessageBody message={message} />
+              </ModeratedPost>
+              <MessageMentionChips message={message} />
+              <MessageTagChips message={message} />
+              <MessageLinkChips message={message} linkTargets={linkTargets} />
+              <ReactionBar
+                groups={groups}
+                profiles={profiles}
+                onToggle={(emoji) => void toggle(emoji)}
+              />
+              {thread && thread.count > 0 && <ThreadFooter thread={thread} onOpen={onOpenThread} />}
+            </>
+          )}
+        </div>
+        {!isEditing && (
+          <MessageHoverToolbar
+            messageId={message.id}
+            isOwn={isOwn}
+            onToggleReaction={(emoji) => void toggle(emoji)}
+            onReply={onReply}
+            onStartEdit={onStartEdit}
+          />
+        )}
+      </li>
+    </>
+  )
+}
diff --git a/apps/web/src/comms/PresenceDot.tsx b/apps/web/src/comms/PresenceDot.tsx
new file mode 100644
index 000000000..123dc7313
--- /dev/null
+++ b/apps/web/src/comms/PresenceDot.tsx
@@ -0,0 +1,42 @@
+/**
+ * PresenceDot — Discord-style status dot for a user's presence (0198).
+ * active → green, idle → amber, dnd → red, unknown/offline → muted.
+ */
+import type { PresenceStatus } from '@xnetjs/comms'
+import { cn } from '@xnetjs/ui'
+
+const STATUS_CLASS: Record<PresenceStatus, string> = {
+  active: 'bg-success',
+  idle: 'bg-warning',
+  dnd: 'bg-destructive'
+}
+
+const STATUS_LABEL: Record<PresenceStatus, string> = {
+  active: 'Active',
+  idle: 'Idle',
+  dnd: 'Do not disturb'
+}
+
+export function PresenceDot({
+  status,
+  ring = true,
+  className
+}: {
+  status?: PresenceStatus
+  /** Draw a surface-coloured ring so the dot reads on top of an avatar. */
+  ring?: boolean
+  className?: string
+}) {
+  return (
+    <span
+      role="img"
+      aria-label={status ? STATUS_LABEL[status] : 'Offline'}
+      className={cn(
+        'block h-2.5 w-2.5 rounded-full',
+        status ? STATUS_CLASS[status] : 'bg-ink-3',
+        ring && 'ring-2 ring-surface-0',
+        className
+      )}
+    />
+  )
+}
diff --git a/apps/web/src/comms/ReactionBar.tsx b/apps/web/src/comms/ReactionBar.tsx
new file mode 100644
index 000000000..35a41e22e
--- /dev/null
+++ b/apps/web/src/comms/ReactionBar.tsx
@@ -0,0 +1,58 @@
+/**
+ * ReactionBar — emoji reaction pills under a message (0198). Highlights the
+ * viewer's own reactions, shows reactor names on hover, toggles on click, and
+ * offers an inline "add reaction" emoji picker. Pops in with scale-in.
+ */
+import type { ReactionGroup } from './reactions'
+import { cn } from '@xnetjs/ui'
+import { SmilePlus } from 'lucide-react'
+import { EmojiPicker } from './EmojiPicker'
+import { displayName, type ProfileEntry } from './hooks'
+
+export function ReactionBar({
+  groups,
+  profiles,
+  onToggle
+}: {
+  groups: ReactionGroup[]
+  profiles: ProfileEntry[]
+  onToggle: (emoji: string) => void
+}) {
+  if (groups.length === 0) return null
+  return (
+    <div className="mt-1 flex flex-wrap items-center gap-1">
+      {groups.map((group) => (
+        <button
+          key={group.emoji}
+          type="button"
+          aria-pressed={group.mine}
+          title={group.reactors.map((did) => displayName(did, profiles)).join(', ')}
+          onClick={() => onToggle(group.emoji)}
+          className={cn(
+            'flex animate-scale-in items-center gap-1 rounded-full border px-1.5 py-px text-xs transition-colors',
+            group.mine
+              ? 'border-accent bg-accent/10 text-accent-ink'
+              : 'border-hairline bg-surface-1 text-ink-2 hover:border-border-emphasis'
+          )}
+        >
+          <span aria-hidden>{group.emoji}</span>
+          <span className="font-mono text-[10px]">{group.count}</span>
+        </button>
+      ))}
+      <EmojiPicker
+        side="top"
+        align="start"
+        onSelect={onToggle}
+        trigger={
+          <button
+            type="button"
+            aria-label="Add reaction"
+            className="flex h-[18px] cursor-pointer items-center rounded-full border border-hairline bg-surface-1 px-1.5 text-ink-3 hover:text-ink-1"
+          >
+            <SmilePlus size={12} strokeWidth={1.5} />
+          </button>
+        }
+      />
+    </div>
+  )
+}
diff --git a/apps/web/src/comms/ThreadPane.tsx b/apps/web/src/comms/ThreadPane.tsx
new file mode 100644
index 000000000..732f2ddb8
--- /dev/null
+++ b/apps/web/src/comms/ThreadPane.tsx
@@ -0,0 +1,145 @@
+/**
+ * ThreadPane — a right-hand panel showing a root message and its replies (0198),
+ * with a composer that posts replies (inReplyTo = root). Replies are kept out of
+ * the main feed, so this is where a threaded conversation is read and continued.
+ */
+import { compareMessages, sendMessage } from '@xnetjs/comms'
+import { ChatMessageSchema } from '@xnetjs/data'
+import { useQuery } from '@xnetjs/react'
+import { useDataBridge } from '@xnetjs/react/internal'
+import { cn, LinkifiedText } from '@xnetjs/ui'
+import { Send, X } from 'lucide-react'
+import { useMemo, useState } from 'react'
+import { ChatAvatar } from './ChatAvatar'
+import { displayName, useProfiles, type ProfileEntry } from './hooks'
+import { formatTime, type ChatRow } from './message-grouping'
+import { ReactionBar } from './ReactionBar'
+import { useMessageReactions } from './useMessageReactions'
+
+function ThreadMessage({
+  message,
+  profiles,
+  me,
+  root
+}: {
+  message: ChatRow
+  profiles: ProfileEntry[]
+  me: string
+  root?: boolean
+}) {
+  const author = profiles.find((p) => p.did === message.createdBy)
+  const { groups, toggle } = useMessageReactions(message.id, me)
+  return (
+    <li className={cn('flex gap-2.5 px-3 py-1.5', root && 'border-b border-hairline pb-3')}>
+      <ChatAvatar
+        did={message.createdBy ?? '?'}
+        src={author?.avatar}
+        size={28}
+        className="mt-0.5"
+      />
+      <div className="min-w-0 flex-1">
+        <div className="flex items-baseline gap-2">
+          <span className="text-xs font-semibold text-ink-1">
+            {displayName(message.createdBy ?? '?', profiles)}
+          </span>
+          <time className="font-mono text-[10px] text-ink-3">{formatTime(message.createdAt)}</time>
+        </div>
+        {message.redacted ? (
+          <span className="text-xs italic text-ink-3">message deleted</span>
+        ) : (
+          <LinkifiedText
+            value={message.content ?? ''}
+            className="whitespace-pre-wrap break-words text-sm text-ink-2"
+            detectPhones
+          />
+        )}
+        <ReactionBar groups={groups} profiles={profiles} onToggle={(emoji) => void toggle(emoji)} />
+      </div>
+    </li>
+  )
+}
+
+export function ThreadPane({
+  channelId,
+  rootId,
+  me,
+  onClose
+}: {
+  channelId: string
+  rootId: string
+  me: string
+  onClose: () => void
+}) {
+  const bridge = useDataBridge()
+  const profiles = useProfiles()
+  const { data: rootData } = useQuery(ChatMessageSchema, rootId)
+  const { data: replyData } = useQuery(ChatMessageSchema, { where: { inReplyTo: rootId } })
+  const [text, setText] = useState('')
+
+  const root = rootData as unknown as ChatRow | null
+  const replies = useMemo(
+    () => [...((replyData as unknown as ChatRow[]) ?? [])].sort(compareMessages),
+    [replyData]
+  )
+
+  const send = async () => {
+    const content = text.trim()
+    if (!content || !bridge) return
+    setText('')
+    await sendMessage(bridge, { channelId, content, inReplyTo: rootId })
+  }
+
+  return (
+    <aside className="flex h-full w-80 min-w-0 shrink-0 flex-col border-l border-hairline bg-surface-0">
+      <header className="flex h-9 shrink-0 items-center justify-between border-b border-hairline px-3">
+        <span className="text-sm font-medium text-ink-1">Thread</span>
+        <button
+          type="button"
+          aria-label="Close thread"
+          onClick={onClose}
+          className="flex h-6 w-6 cursor-pointer items-center justify-center rounded border-none bg-transparent text-ink-3 hover:bg-surface-2 hover:text-ink-1"
+        >
+          <X size={14} strokeWidth={1.5} />
+        </button>
+      </header>
+      <ul className="m-0 min-h-0 flex-1 list-none overflow-y-auto p-0 py-2">
+        {root && <ThreadMessage message={root} profiles={profiles} me={me} root />}
+        {replies.length > 0 && (
+          <li className="px-3 py-1 text-[10px] uppercase tracking-wider text-ink-3">
+            {replies.length} {replies.length === 1 ? 'reply' : 'replies'}
+          </li>
+        )}
+        {replies.map((reply) => (
+          <ThreadMessage key={reply.id} message={reply} profiles={profiles} me={me} />
+        ))}
+      </ul>
+      <div className="border-t border-hairline p-2">
+        <div className="flex items-end gap-2">
+          <textarea
+            value={text}
+            rows={2}
+            placeholder="Reply…"
+            onChange={(event) => setText(event.target.value)}
+            onKeyDown={(event) => {
+              if (event.key === 'Enter' && !event.shiftKey && !event.nativeEvent.isComposing) {
+                event.preventDefault()
+                void send()
+              }
+            }}
+            className="min-h-0 flex-1 resize-none rounded-md border border-hairline bg-surface-0 px-2 py-1.5 text-sm text-ink-1 outline-none placeholder:text-ink-3 focus:border-border-emphasis"
+          />
+          <button
+            type="button"
+            title="Send reply"
+            aria-label="Send reply"
+            onClick={() => void send()}
+            disabled={!text.trim()}
+            className="flex h-7 w-7 cursor-pointer items-center justify-center rounded-md border border-hairline bg-surface-0 text-ink-2 hover:text-ink-1 disabled:cursor-default disabled:opacity-50"
+          >
+            <Send size={13} strokeWidth={1.5} />
+          </button>
+        </div>
+      </div>
+    </aside>
+  )
+}
diff --git a/apps/web/src/comms/chat-prefs.ts b/apps/web/src/comms/chat-prefs.ts
new file mode 100644
index 000000000..4207254cc
--- /dev/null
+++ b/apps/web/src/comms/chat-prefs.ts
@@ -0,0 +1,39 @@
+/**
+ * Chat display preferences (0198). Density (comfortable vs compact, like
+ * Slack/Discord) is persisted to localStorage and shared across mounted chat
+ * surfaces via a tiny external store so toggling updates every open channel.
+ */
+import { useSyncExternalStore } from 'react'
+
+export type ChatDensity = 'comfortable' | 'compact'
+
+const KEY = 'xnet:chat:density'
+const listeners = new Set<() => void>()
+
+export function getDensity(): ChatDensity {
+  try {
+    return localStorage.getItem(KEY) === 'compact' ? 'compact' : 'comfortable'
+  } catch {
+    return 'comfortable'
+  }
+}
+
+export function setDensity(density: ChatDensity): void {
+  try {
+    localStorage.setItem(KEY, density)
+  } catch {
+    // Non-fatal: density just won't persist (e.g. private mode).
+  }
+  for (const listener of listeners) listener()
+}
+
+function subscribe(listener: () => void): () => void {
+  listeners.add(listener)
+  return () => listeners.delete(listener)
+}
+
+/** Read the current density and a setter; re-renders on change. */
+export function useChatDensity(): [ChatDensity, (density: ChatDensity) => void] {
+  const density = useSyncExternalStore(subscribe, getDensity, () => 'comfortable' as ChatDensity)
+  return [density, setDensity]
+}
diff --git a/apps/web/src/comms/emoji-data.ts b/apps/web/src/comms/emoji-data.ts
new file mode 100644
index 000000000..8f9ab6cf3
--- /dev/null
+++ b/apps/web/src/comms/emoji-data.ts
@@ -0,0 +1,76 @@
+/**
+ * A small curated emoji set for the chat picker (0198) — dependency-free so we
+ * avoid bundling a ~700KB emoji dataset. Each entry carries search keywords.
+ * The first six double as the hover toolbar's quick reactions.
+ */
+export interface EmojiEntry {
+  emoji: string
+  name: string
+  keywords: string[]
+}
+
+export const QUICK_REACTIONS = ['👍', '🎉', '❤️', '😄', '👀', '🚀'] as const
+
+export const EMOJI_SET: EmojiEntry[] = [
+  { emoji: '👍', name: 'thumbs up', keywords: ['+1', 'yes', 'approve', 'like'] },
+  { emoji: '👎', name: 'thumbs down', keywords: ['-1', 'no', 'dislike'] },
+  { emoji: '🎉', name: 'party', keywords: ['tada', 'celebrate', 'ship'] },
+  { emoji: '❤️', name: 'heart', keywords: ['love', 'like'] },
+  { emoji: '😄', name: 'smile', keywords: ['happy', 'joy', 'haha'] },
+  { emoji: '😂', name: 'laughing', keywords: ['lol', 'funny', 'haha'] },
+  { emoji: '😊', name: 'blush', keywords: ['happy', 'smile'] },
+  { emoji: '😍', name: 'heart eyes', keywords: ['love', 'wow'] },
+  { emoji: '🤔', name: 'thinking', keywords: ['hmm', 'consider'] },
+  { emoji: '👀', name: 'eyes', keywords: ['looking', 'watch', 'see'] },
+  { emoji: '🚀', name: 'rocket', keywords: ['ship', 'launch', 'fast'] },
+  { emoji: '🔥', name: 'fire', keywords: ['lit', 'hot', 'great'] },
+  { emoji: '✅', name: 'check', keywords: ['done', 'yes', 'complete'] },
+  { emoji: '❌', name: 'cross', keywords: ['no', 'wrong', 'fail'] },
+  { emoji: '🙏', name: 'pray', keywords: ['thanks', 'please', 'hope'] },
+  { emoji: '👏', name: 'clap', keywords: ['applause', 'bravo'] },
+  { emoji: '💯', name: 'hundred', keywords: ['100', 'perfect', 'agree'] },
+  { emoji: '🙌', name: 'raised hands', keywords: ['celebrate', 'praise'] },
+  { emoji: '🤝', name: 'handshake', keywords: ['deal', 'agree'] },
+  { emoji: '💪', name: 'muscle', keywords: ['strong', 'power'] },
+  { emoji: '🎯', name: 'target', keywords: ['goal', 'bullseye', 'exact'] },
+  { emoji: '⭐', name: 'star', keywords: ['favorite', 'great'] },
+  { emoji: '💡', name: 'idea', keywords: ['lightbulb', 'thought'] },
+  { emoji: '⚡', name: 'zap', keywords: ['fast', 'energy', 'bolt'] },
+  { emoji: '✨', name: 'sparkles', keywords: ['shiny', 'magic', 'new'] },
+  { emoji: '🎊', name: 'confetti', keywords: ['celebrate', 'party'] },
+  { emoji: '😅', name: 'sweat smile', keywords: ['phew', 'nervous'] },
+  { emoji: '😬', name: 'grimace', keywords: ['yikes', 'awkward'] },
+  { emoji: '😢', name: 'cry', keywords: ['sad', 'tear'] },
+  { emoji: '😡', name: 'angry', keywords: ['mad', 'rage'] },
+  { emoji: '🤯', name: 'mind blown', keywords: ['wow', 'shocked'] },
+  { emoji: '🥳', name: 'partying face', keywords: ['celebrate', 'birthday'] },
+  { emoji: '😎', name: 'cool', keywords: ['sunglasses', 'awesome'] },
+  { emoji: '🙃', name: 'upside down', keywords: ['silly', 'irony'] },
+  { emoji: '👋', name: 'wave', keywords: ['hi', 'hello', 'bye'] },
+  { emoji: '🤷', name: 'shrug', keywords: ['idk', 'dunno', 'whatever'] },
+  { emoji: '🫡', name: 'salute', keywords: ['yes', 'ok', 'respect'] },
+  { emoji: '🤩', name: 'star struck', keywords: ['wow', 'amazing'] },
+  { emoji: '😴', name: 'sleeping', keywords: ['tired', 'zzz'] },
+  { emoji: '🤓', name: 'nerd', keywords: ['smart', 'glasses'] },
+  { emoji: '🥺', name: 'pleading', keywords: ['please', 'puppy'] },
+  { emoji: '😱', name: 'scream', keywords: ['shocked', 'fear'] },
+  { emoji: '🤡', name: 'clown', keywords: ['joke', 'silly'] },
+  { emoji: '💀', name: 'skull', keywords: ['dead', 'lol', 'rip'] },
+  { emoji: '👻', name: 'ghost', keywords: ['boo', 'spooky'] },
+  { emoji: '🐛', name: 'bug', keywords: ['issue', 'defect'] },
+  { emoji: '📌', name: 'pin', keywords: ['important', 'save'] },
+  { emoji: '📈', name: 'chart up', keywords: ['growth', 'metrics'] },
+  { emoji: '🍕', name: 'pizza', keywords: ['food', 'lunch'] },
+  { emoji: '☕', name: 'coffee', keywords: ['drink', 'morning'] },
+  { emoji: '🎁', name: 'gift', keywords: ['present', 'reward'] },
+  { emoji: '🏆', name: 'trophy', keywords: ['win', 'award', 'best'] }
+]
+
+/** Filter the set by a query against name + keywords (empty → everything). */
+export function filterEmoji(query: string): EmojiEntry[] {
+  const q = query.trim().toLowerCase()
+  if (!q) return EMOJI_SET
+  return EMOJI_SET.filter(
+    (entry) => entry.name.includes(q) || entry.keywords.some((keyword) => keyword.includes(q))
+  )
+}
diff --git a/apps/web/src/comms/message-grouping.test.ts b/apps/web/src/comms/message-grouping.test.ts
new file mode 100644
index 000000000..772fced34
--- /dev/null
+++ b/apps/web/src/comms/message-grouping.test.ts
@@ -0,0 +1,95 @@
+import { describe, expect, it } from 'vitest'
+import { dayLabel, formatTime, groupMessages, sameDay, type ChatRow } from './message-grouping'
+
+const DAY = 24 * 60 * 60_000
+const MIN = 60_000
+
+function msg(id: string, createdBy: string, createdAt: number): ChatRow {
+  return { id, createdBy, createdAt }
+}
+
+describe('sameDay', () => {
+  it('is true within a day and false across midnight', () => {
+    const noon = new Date(2026, 5, 17, 12).getTime()
+    const evening = new Date(2026, 5, 17, 23).getTime()
+    const nextMorning = new Date(2026, 5, 18, 1).getTime()
+    expect(sameDay(noon, evening)).toBe(true)
+    expect(sameDay(evening, nextMorning)).toBe(false)
+  })
+
+  it('is false when either side is missing', () => {
+    expect(sameDay(undefined, Date.now())).toBe(false)
+    expect(sameDay(Date.now(), undefined)).toBe(false)
+  })
+})
+
+describe('dayLabel', () => {
+  const now = new Date(2026, 5, 17, 10).getTime()
+  it('labels today and yesterday relative to now', () => {
+    expect(dayLabel(new Date(2026, 5, 17, 9).getTime(), now)).toBe('Today')
+    expect(dayLabel(new Date(2026, 5, 16, 9).getTime(), now)).toBe('Yesterday')
+  })
+  it('labels older days with weekday + date', () => {
+    const label = dayLabel(new Date(2026, 5, 10, 9).getTime(), now)
+    expect(label).not.toBe('Today')
+    expect(label).not.toBe('Yesterday')
+    expect(label).toMatch(/Jun/)
+  })
+})
+
+describe('formatTime', () => {
+  it('returns empty string for missing timestamps', () => {
+    expect(formatTime(undefined)).toBe('')
+  })
+  it('formats a real timestamp', () => {
+    expect(formatTime(new Date(2026, 5, 17, 9, 24).getTime())).toMatch(/\d/)
+  })
+})
+
+describe('groupMessages', () => {
+  const t0 = new Date(2026, 5, 17, 9, 0).getTime()
+
+  it('collapses consecutive same-author messages within the window', () => {
+    const rows = groupMessages(
+      [msg('a', 'alice', t0), msg('b', 'alice', t0 + MIN), msg('c', 'alice', t0 + 2 * MIN)],
+      0,
+      t0 + 3 * MIN
+    )
+    expect(rows.map((r) => r.startsGroup)).toEqual([true, false, false])
+  })
+
+  it('starts a new group when the author changes', () => {
+    const rows = groupMessages([msg('a', 'alice', t0), msg('b', 'bob', t0 + MIN)], 0, t0 + 2 * MIN)
+    expect(rows.map((r) => r.startsGroup)).toEqual([true, true])
+  })
+
+  it('starts a new group after a gap longer than the window', () => {
+    const rows = groupMessages(
+      [msg('a', 'alice', t0), msg('b', 'alice', t0 + 6 * MIN)],
+      0,
+      t0 + 7 * MIN
+    )
+    expect(rows.map((r) => r.startsGroup)).toEqual([true, true])
+  })
+
+  it('inserts a day separator and forces a group across a day boundary', () => {
+    const rows = groupMessages([msg('a', 'alice', t0), msg('b', 'alice', t0 + DAY)], 0, t0 + DAY)
+    expect(rows[0].daySeparator).toBe('Yesterday')
+    expect(rows[1].daySeparator).toBe('Today')
+    expect(rows[1].startsGroup).toBe(true)
+  })
+
+  it('flags exactly the first message past the read watermark', () => {
+    const rows = groupMessages(
+      [msg('a', 'alice', t0), msg('b', 'bob', t0 + MIN), msg('c', 'alice', t0 + 2 * MIN)],
+      t0 + MIN,
+      t0 + 3 * MIN
+    )
+    expect(rows.map((r) => r.firstUnread)).toEqual([false, false, true])
+  })
+
+  it('flags nothing when everything is already read', () => {
+    const rows = groupMessages([msg('a', 'alice', t0)], t0 + DAY, t0 + DAY)
+    expect(rows.some((r) => r.firstUnread)).toBe(false)
+  })
+})
diff --git a/apps/web/src/comms/message-grouping.ts b/apps/web/src/comms/message-grouping.ts
new file mode 100644
index 000000000..508110828
--- /dev/null
+++ b/apps/web/src/comms/message-grouping.ts
@@ -0,0 +1,97 @@
+/**
+ * Pure message-grouping helpers for the channel message list (0198).
+ *
+ * Kept free of React so they stay unit-tested and the list component stays
+ * thin. `groupMessages` turns a flat, chronologically-sorted message list into
+ * render rows that carry the cross-app chat grammar: consecutive same-author
+ * messages collapse into a group (one avatar + name), a day boundary inserts a
+ * date separator, and the first message past the read watermark is flagged so
+ * the list can draw a "New messages" divider above it.
+ */
+
+/** Minimal shape the grouping needs — a superset of the rendered fields. */
+export interface ChatRow {
+  id: string
+  content?: string
+  createdBy?: string
+  createdAt?: number
+  edited?: boolean
+  redacted?: boolean
+  mentions?: { dids?: string[]; room?: boolean }
+  tags?: string[]
+  links?: string[]
+  inReplyTo?: string
+}
+
+export interface RenderRow {
+  message: ChatRow
+  /** Show avatar + name + absolute timestamp (first of an author run). */
+  startsGroup: boolean
+  /** Day label to render above this row, when it crosses a calendar day. */
+  daySeparator?: string
+  /** This is the first unread message — draw the "New messages" divider. */
+  firstUnread: boolean
+}
+
+/** Messages within this window from the same author collapse into one group. */
+export const GROUP_WINDOW_MS = 5 * 60_000
+
+const DAY_MS = 24 * 60 * 60_000
+
+/** Local midnight (ms) for a timestamp — the canonical day key. */
+function startOfDay(at: number): number {
+  const d = new Date(at)
+  d.setHours(0, 0, 0, 0)
+  return d.getTime()
+}
+
+/** True when both timestamps fall on the same local calendar day. */
+export function sameDay(a: number | undefined, b: number | undefined): boolean {
+  if (a == null || b == null) return false
+  return startOfDay(a) === startOfDay(b)
+}
+
+/** Hour:minute in the viewer's locale, e.g. "9:24 AM". */
+export function formatTime(at: number | undefined): string {
+  if (!at) return ''
+  return new Date(at).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })
+}
+
+/** "Today" / "Yesterday" / "Mon, Jun 9" relative to `now`. */
+export function dayLabel(at: number, now: number): string {
+  const days = Math.round((startOfDay(now) - startOfDay(at)) / DAY_MS)
+  if (days <= 0) return 'Today'
+  if (days === 1) return 'Yesterday'
+  return new Date(at).toLocaleDateString([], { weekday: 'short', month: 'short', day: 'numeric' })
+}
+
+/**
+ * Build render rows from chronologically-ascending messages. A row starts a
+ * new group when the author changes, the gap exceeds GROUP_WINDOW_MS, or the
+ * message crosses a calendar day. `lastReadAt` is the read watermark; the
+ * first message created after it is flagged `firstUnread`.
+ */
+export function groupMessages(
+  messages: ChatRow[],
+  lastReadAt: number,
+  now: number = Date.now()
+): RenderRow[] {
+  let prev: ChatRow | undefined
+  let unreadShown = false
+  return messages.map((message) => {
+    const at = message.createdAt ?? 0
+    const crossesDay = !sameDay(prev?.createdAt, at)
+    const newAuthor = message.createdBy !== prev?.createdBy
+    const gap = at - (prev?.createdAt ?? 0) > GROUP_WINDOW_MS
+    const firstUnread = !unreadShown && at > lastReadAt
+    if (firstUnread) unreadShown = true
+    const row: RenderRow = {
+      message,
+      startsGroup: newAuthor || gap || crossesDay,
+      daySeparator: crossesDay ? dayLabel(at, now) : undefined,
+      firstUnread
+    }
+    prev = message
+    return row
+  })
+}
diff --git a/apps/web/src/comms/reactions.test.ts b/apps/web/src/comms/reactions.test.ts
new file mode 100644
index 000000000..f6fdc0ca4
--- /dev/null
+++ b/apps/web/src/comms/reactions.test.ts
@@ -0,0 +1,48 @@
+import { describe, expect, it } from 'vitest'
+import { groupReactions, type ReactionLike } from './reactions'
+
+function emoji(id: string, e: string, reactor: string): ReactionLike {
+  return { id, emoji: e, reactor, reactionType: 'emoji' }
+}
+
+describe('groupReactions', () => {
+  it('groups by emoji with counts and reactor lists', () => {
+    const groups = groupReactions(
+      [emoji('1', '👍', 'alice'), emoji('2', '👍', 'bob'), emoji('3', '🎉', 'alice')],
+      'carol'
+    )
+    expect(groups).toHaveLength(2)
+    expect(groups[0]).toMatchObject({ emoji: '👍', count: 2, mine: false })
+    expect(groups[0].reactors).toEqual(['alice', 'bob'])
+    expect(groups[1]).toMatchObject({ emoji: '🎉', count: 1 })
+  })
+
+  it('flags the viewer reaction and records its id for removal', () => {
+    const groups = groupReactions([emoji('r1', '👍', 'me'), emoji('r2', '👍', 'bob')], 'me')
+    expect(groups[0].mine).toBe(true)
+    expect(groups[0].myReactionId).toBe('r1')
+    expect(groups[0].count).toBe(2)
+  })
+
+  it('dedupes a reactor who somehow has the same emoji twice', () => {
+    const groups = groupReactions([emoji('1', '👍', 'alice'), emoji('2', '👍', 'alice')], 'me')
+    expect(groups[0].count).toBe(1)
+  })
+
+  it('ignores non-emoji reaction types', () => {
+    const groups = groupReactions(
+      [{ id: '1', reactor: 'alice', reactionType: 'like' }, emoji('2', '👍', 'bob')],
+      'me'
+    )
+    expect(groups).toHaveLength(1)
+    expect(groups[0].emoji).toBe('👍')
+  })
+
+  it('preserves first-seen emoji order', () => {
+    const groups = groupReactions(
+      [emoji('1', '🎉', 'a'), emoji('2', '👍', 'b'), emoji('3', '🎉', 'c')],
+      'me'
+    )
+    expect(groups.map((g) => g.emoji)).toEqual(['🎉', '👍'])
+  })
+})
diff --git a/apps/web/src/comms/reactions.ts b/apps/web/src/comms/reactions.ts
new file mode 100644
index 000000000..c14d3859d
--- /dev/null
+++ b/apps/web/src/comms/reactions.ts
@@ -0,0 +1,44 @@
+/**
+ * Pure reaction grouping for chat messages (0198). Reactions are individual
+ * Reaction nodes targeting a message; this folds them into per-emoji pills with
+ * a count, the set of reactors, and whether the viewer is among them. A reactor
+ * is counted once per emoji (last write wins upstream; we just dedupe here).
+ */
+
+export interface ReactionLike {
+  id: string
+  emoji?: string
+  reactor: string
+  reactionType: string
+}
+
+export interface ReactionGroup {
+  emoji: string
+  count: number
+  /** The viewer has this reaction (drives the highlighted pill + toggle). */
+  mine: boolean
+  /** Reaction node id of the viewer's own reaction, for removal on toggle. */
+  myReactionId?: string
+  reactors: string[]
+}
+
+/** Fold emoji reactions into ordered pills (first-seen emoji order). */
+export function groupReactions(reactions: ReactionLike[], me: string): ReactionGroup[] {
+  const byEmoji = new Map<string, ReactionGroup>()
+  for (const r of reactions) {
+    if (r.reactionType !== 'emoji' || !r.emoji) continue
+    let group = byEmoji.get(r.emoji)
+    if (!group) {
+      group = { emoji: r.emoji, count: 0, mine: false, reactors: [] }
+      byEmoji.set(r.emoji, group)
+    }
+    if (group.reactors.includes(r.reactor)) continue
+    group.reactors.push(r.reactor)
+    group.count += 1
+    if (r.reactor === me) {
+      group.mine = true
+      group.myReactionId = r.id
+    }
+  }
+  return [...byEmoji.values()]
+}
diff --git a/apps/web/src/comms/useMessageReactions.ts b/apps/web/src/comms/useMessageReactions.ts
new file mode 100644
index 000000000..e470f2eb2
--- /dev/null
+++ b/apps/web/src/comms/useMessageReactions.ts
@@ -0,0 +1,56 @@
+/**
+ * useMessageReactions — per-message emoji reactions over the existing Reaction
+ * schema (0198). One indexed query per message (where target = messageId),
+ * grouped into pills; toggling creates or removes the viewer's Reaction node so
+ * the change syncs like any other node and the pill updates live.
+ */
+import { ChatMessageSchema, ReactionSchema } from '@xnetjs/data'
+import { useMutate, useQuery } from '@xnetjs/react'
+import { useCallback, useMemo } from 'react'
+import { groupReactions, type ReactionGroup, type ReactionLike } from './reactions'
+
+export interface MessageReactions {
+  groups: ReactionGroup[]
+  toggle: (emoji: string) => Promise<void>
+}
+
+export function useMessageReactions(messageId: string, me: string): MessageReactions {
+  const { data } = useQuery(ReactionSchema, { where: { target: messageId } })
+  const { create, remove } = useMutate()
+
+  const reactions = useMemo<ReactionLike[]>(
+    () =>
+      (data ?? []).map((node) => {
+        const n = node as unknown as Record<string, unknown>
+        return {
+          id: n.id as string,
+          emoji: n.emoji as string | undefined,
+          reactor: (n.reactor as string) ?? '',
+          reactionType: (n.reactionType as string) ?? 'emoji'
+        }
+      }),
+    [data]
+  )
+
+  const groups = useMemo(() => groupReactions(reactions, me), [reactions, me])
+
+  const toggle = useCallback(
+    async (emoji: string) => {
+      const existing = groups.find((group) => group.emoji === emoji && group.mine)
+      if (existing?.myReactionId) {
+        await remove(existing.myReactionId)
+        return
+      }
+      await create(ReactionSchema, {
+        target: messageId,
+        targetSchema: ChatMessageSchema._schemaId,
+        reactionType: 'emoji',
+        reactor: me as `did:key:${string}`,
+        emoji
+      })
+    },
+    [groups, remove, create, messageId, me]
+  )
+
+  return { groups, toggle }
+}

From 3682bc215936d23c06ae3fb2aa17f73a659add34 Mon Sep 17 00:00:00 2001
From: xNet Test <test@xnet.dev>
Date: Wed, 17 Jun 2026 16:59:39 -0700
Subject: [PATCH 3/4] feat(web): chat density toggle + thread keyboard polish
 (0198)

Phase 3 polish: a comfortable/compact density toggle in the channel header
(persisted via the chat-prefs store, shared across open channels), and
Escape-to-close on the thread pane when the reply box is empty.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 apps/web/src/comms/ChannelView.tsx | 21 ++++++++++++++++++++-
 apps/web/src/comms/ThreadPane.tsx  |  9 ++++++++-
 2 files changed, 28 insertions(+), 2 deletions(-)

diff --git a/apps/web/src/comms/ChannelView.tsx b/apps/web/src/comms/ChannelView.tsx
index ee9454c94..b6c19ec45 100644
--- a/apps/web/src/comms/ChannelView.tsx
+++ b/apps/web/src/comms/ChannelView.tsx
@@ -7,10 +7,11 @@ import { rosterUsers, type UserCard } from '@xnetjs/comms'
 import { ChannelSchema } from '@xnetjs/data'
 import { useMutate, useQuery } from '@xnetjs/react'
 import { cn, Popover } from '@xnetjs/ui'
-import { Hash, MessageCircle, Users, Volume2 } from 'lucide-react'
+import { Hash, MessageCircle, Rows2, Rows3, Users, Volume2 } from 'lucide-react'
 import { useEffect, useState } from 'react'
 import { CallControls } from './CallDock'
 import { ChannelChat } from './ChannelChat'
+import { useChatDensity } from './chat-prefs'
 import { ChatAvatar } from './ChatAvatar'
 import { channelHeaderModel } from './comms-utils'
 import { useComms } from './CommsContext'
@@ -18,6 +19,23 @@ import { displayName, useProfiles, useRoomPresence, type ProfileEntry } from './
 
 const KIND_ICONS = { channel: Hash, dm: MessageCircle, voice: Volume2 } as const
 
+function DensityToggle() {
+  const [density, setDensity] = useChatDensity()
+  const compact = density === 'compact'
+  return (
+    <button
+      type="button"
+      title={compact ? 'Comfortable density' : 'Compact density'}
+      aria-label={compact ? 'Switch to comfortable density' : 'Switch to compact density'}
+      aria-pressed={compact}
+      onClick={() => setDensity(compact ? 'comfortable' : 'compact')}
+      className="flex h-7 w-7 items-center justify-center rounded-md text-ink-3 hover:bg-surface-2 hover:text-ink-1"
+    >
+      {compact ? <Rows3 size={14} strokeWidth={1.5} /> : <Rows2 size={14} strokeWidth={1.5} />}
+    </button>
+  )
+}
+
 function EditableTopic({ channelId, topic }: { channelId: string; topic?: string }) {
   const { update } = useMutate()
   const [editing, setEditing] = useState(false)
@@ -142,6 +160,7 @@ export function ChannelView({ channelId }: { channelId: string }) {
         <EditableTopic channelId={channelId} topic={header.topic} />
         <div className="min-w-0 flex-1" />
         <MembersButton roster={roster} memberCount={memberCount} profiles={profiles} />
+        <DensityToggle />
         <CallControls roomId={channelId} autoJoinVoice={header.kind === 'voice'} />
       </header>
       <div className="min-h-0 flex-1">
diff --git a/apps/web/src/comms/ThreadPane.tsx b/apps/web/src/comms/ThreadPane.tsx
index 732f2ddb8..290e3041a 100644
--- a/apps/web/src/comms/ThreadPane.tsx
+++ b/apps/web/src/comms/ThreadPane.tsx
@@ -121,7 +121,14 @@ export function ThreadPane({
             placeholder="Reply…"
             onChange={(event) => setText(event.target.value)}
             onKeyDown={(event) => {
-              if (event.key === 'Enter' && !event.shiftKey && !event.nativeEvent.isComposing) {
+              if (event.key === 'Escape' && text.trim() === '') {
+                event.preventDefault()
+                onClose()
+              } else if (
+                event.key === 'Enter' &&
+                !event.shiftKey &&
+                !event.nativeEvent.isComposing
+              ) {
                 event.preventDefault()
                 void send()
               }

From 3759ae1924e96a800cb58bc53caba123b13ce740 Mon Sep 17 00:00:00 2001
From: xNet Test <test@xnet.dev>
Date: Wed, 17 Jun 2026 17:08:54 -0700
Subject: [PATCH 4/4] docs(exploration): check off polished chat & channels UI
 (0198)

Phases 1+2 and the cheap Phase-3 wins shipped and verified in browser preview;
checklist items updated with what landed vs what's deferred (virtualization,
file attach, pins, Cmd+K/search, Zulip topics).

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 ...0198_[x]_POLISHED_CHAT_AND_CHANNELS_UI.md} | 74 ++++++++++---------
 1 file changed, 38 insertions(+), 36 deletions(-)
 rename docs/explorations/{0198_[_]_POLISHED_CHAT_AND_CHANNELS_UI.md => 0198_[x]_POLISHED_CHAT_AND_CHANNELS_UI.md} (86%)

diff --git a/docs/explorations/0198_[_]_POLISHED_CHAT_AND_CHANNELS_UI.md b/docs/explorations/0198_[x]_POLISHED_CHAT_AND_CHANNELS_UI.md
similarity index 86%
rename from docs/explorations/0198_[_]_POLISHED_CHAT_AND_CHANNELS_UI.md
rename to docs/explorations/0198_[x]_POLISHED_CHAT_AND_CHANNELS_UI.md
index 4594a1eb2..516a9daac 100644
--- a/docs/explorations/0198_[_]_POLISHED_CHAT_AND_CHANNELS_UI.md
+++ b/docs/explorations/0198_[x]_POLISHED_CHAT_AND_CHANNELS_UI.md
@@ -473,35 +473,37 @@ function PresenceDot({ status }: { status?: PresenceStatus }) {
 
 ## Implementation Checklist
 
+_Shipped in PR #168 (commits on `claude/0198-chat-ui`). The comms-ui kit landed app-local under `apps/web/src/comms/` rather than a new package — lower risk, no cross-package dist rebuild — which we can promote to `packages/ui` later if reused._
+
 **Phase 1 — Layout, density, robustness (no new deps, no schema change)**
-- [ ] Extract a comms-ui kit (`packages/ui/src/comms/` or `packages/comms-ui`) with `MessageList`, `MessageGroup`, `MessageRow`, `DateSeparator`, `UnreadDivider`, `Avatar`/`PresenceDot`, `JumpToBottom`, `TypingDots`.
-- [ ] Implement `groupMessages()` (consecutive same-author within 5 min, day boundaries, first-unread marker) with unit tests.
-- [ ] Virtualize the message list with `@tanstack/react-virtual`; stable `getItemKey` = message id; `measureElement` for variable heights.
-- [ ] Replace the always-jam scroll effect with near-bottom threshold + jump-to-bottom pill (unread count badge).
-- [ ] Render avatars + presence dots in message rows, the header roster (avatar stack + count), and DM/sidebar rows.
-- [ ] Rebuild the channel header: avatar stack, member count, editable topic, info/search/pin actions.
-- [ ] Rebuild `ChatsPanel`: unread bolding, last-message preview, presence dot on DMs, collapsible/custom sections, optional workspace switcher; keep the 3 default sections.
-- [ ] Add `role="log"`/`aria-live` to the list and verify `prefers-reduced-motion` no-ops new animations.
+- [x] comms-ui kit under `apps/web/src/comms/`: `MessageRow`, `ChannelMessageList`, `DateSeparator`/`UnreadDivider` (in `MessageRow`), `ChatAvatar`/`PresenceDot`, jump-to-bottom + `TypingDots` (in the list).
+- [x] `message-grouping.ts` `groupMessages()` (consecutive same-author within 5 min, day boundaries, first-unread marker) with unit tests (12 tests).
+- [ ] Virtualize the message list with `@tanstack/react-virtual` — **deferred**: the history window is capped at 100 today, so a plain grouped list + smart scroll is used; full windowed virtualization pairs with raising the cap + load-older (a separate effort).
+- [x] Replaced the always-jam scroll with a near-bottom threshold + jump-to-latest pill (shows the unread-ahead count).
+- [x] Avatars + presence dots in message rows, the header roster (avatar stack + member count), and DM sidebar rows.
+- [x] Rebuilt the channel header: avatar stack, member count, editable topic, members popover. (Search/pin header actions deferred with their features.)
+- [x] Rebuilt `ChatsPanel`: presence dots on DMs, unread emphasis, kept the 3 default sections. (Last-message preview + custom/collapsible sections + workspace switcher deferred — they need per-channel last-message queries.)
+- [x] `role="log"`/`aria-live` on the list; `motion-reduce:animate-none` guards on every new animation.
 
 **Phase 2 — Interactions (reactions, threads, edit, attach, pins)**
-- [ ] `HoverToolbar` (quick-react, add-reaction, reply, edit-if-own, more) + right-click `ContextMenu` with the full action set.
-- [ ] `ReactionBar` on every message using `useReactionCounters`; optimistic toggle; who-reacted tooltip; `scale-in` bounce.
-- [ ] Emoji picker: `:` inline trigger (reuse `useListboxNavigation`) + button-launched `frimousse`/`emoji-mart` popover (lazy-loaded).
-- [ ] `ThreadPane` in a right pane driven by `inReplyTo`; thread footer on parent (reply count + participant avatars); reply composer.
-- [ ] Edit-in-place: `↑` on empty composer loads last own message; inline edit form calls `editMessage`.
-- [ ] File attach: drag-drop + button writing to `ChatMessage.attachments`; render image/file cards in the row.
-- [ ] Pinning: add schema (decide `pinned` field vs `Pin` node) + pinned-messages popover from the header.
-- [ ] Wire all new CSS micro-interactions from `motion.css` (slide-in on send, typing dots, shimmer skeletons for history load).
+- [x] `MessageHoverToolbar` (quick-react, add-reaction, reply, edit-if-own, more) reusing the existing `MessageActions` safety menu. (Standalone right-click `ContextMenu` deferred — the hover toolbar + more-menu cover the same actions.)
+- [x] `ReactionBar` on every message via a chat-specific `useMessageReactions` (one indexed query per message instead of `useReactionCounters`'s full-store scan); optimistic toggle; who-reacted via title tooltip; `scale-in` pop.
+- [x] Dependency-free emoji picker (`EmojiPicker` + curated `emoji-data.ts`) on the add-reaction button and a composer emoji-insert button. (Inline `:` trigger deferred.)
+- [x] `ThreadPane` (right pane) driven by `inReplyTo`; replies kept out of the main feed; root shows a thread footer (reply count + participant avatars + last reply); reply composer.
+- [x] Edit-in-place: `↑` on an empty composer loads the last own message; inline edit form calls `editMessage`.
+- [ ] File attach (drag-drop + button → `ChatMessage.attachments`) — **deferred**: needs the file-upload pipeline.
+- [ ] Pinning (schema + pinned-messages popover) — **deferred**.
+- [x] CSS micro-interactions from the existing Tailwind animations: `slide-in-bottom` on new messages (history excluded), `scale-in` reaction pop, animated typing dots, `fade-in` jump pill. (Shimmer history skeletons deferred with load-older.)
 
 **Phase 3 — Power & polish**
-- [ ] `Cmd+K` quick switcher (cmdk `Command`) across channels/DMs/people.
-- [ ] Message search (FTS over `content`) with a results view in the right pane.
-- [ ] Keyboard shortcut layer (`↑` edit, `Esc` dismiss, `j/k` or arrows to move selection, `r` reply).
-- [ ] Density setting (Clean/Compact) persisted in workbench store.
-- [ ] (Optional) Migrate composer input to a TipTap instance with inline pills + markdown shortcuts.
-- [ ] (Optional) Add `motion/react` (lazy `domAnimation`) for `AnimatePresence` exits, spring reaction bounce, `layout` pill widths.
-
-**Phase 4 — Zulip-style topics (optional differentiator)**
+- [ ] `Cmd+K` quick switcher across channels/DMs/people — **deferred** (a global search rail action already exists).
+- [ ] Message search (FTS over `content`) — **deferred**.
+- [x] Keyboard: `↑` edits last own message, `Esc` dismisses pickers / cancels edit / closes the thread, arrow-navigates the mention/emoji pickers, focus returns to the composer after send. (`j/k`/`r` message selection deferred.)
+- [x] Density setting (comfortable/compact) — header toggle persisted via the `chat-prefs` localStorage store (shared across open channels) rather than the workbench store.
+- [ ] (Optional) Migrate composer input to a TipTap instance — **deferred**.
+- [ ] (Optional) Add `motion/react` for `AnimatePresence`/spring/`layout` — **deferred** (CSS covers it today).
+
+**Phase 4 — Zulip-style topics (optional differentiator) — deferred**
 - [ ] Add optional `topic` text field to `ChatMessage` (additive; default empty = current flat behavior).
 - [ ] Recipient-bar feed mode: group messages under stream+topic headers; per-topic unread counts.
 - [ ] `N`-to-next-unread reading loop; resolve-topic (✓); rename/move/merge topic affordances.
@@ -509,18 +511,18 @@ function PresenceDot({ status }: { status?: PresenceStatus }) {
 
 ## Validation Checklist
 
-- [ ] A channel with 5,000+ messages scrolls at 60fps; history prepends without the viewport jumping; memory stays bounded (virtualization verified in browser preview).
-- [ ] Reading history near the top is **not** interrupted when a new message arrives; the jump-to-bottom pill appears with the correct unread count and scrolls cleanly on click.
-- [ ] Consecutive messages from one author within 5 minutes render as a group (one avatar/name); a day boundary inserts a date separator; the "New messages" divider appears exactly at the last-read point.
-- [ ] Adding/removing a reaction updates the pill optimistically and reverts on failure; the who-reacted tooltip lists reactors; counts match the underlying `Reaction` nodes.
-- [ ] Replying opens the thread pane, the parent shows an accurate reply count + participant avatars, and thread replies sync via `inReplyTo`.
-- [ ] Editing an own message updates content in place and shows `(edited)`; deleting shows the soft-delete placeholder and preserves thread shape.
-- [ ] Presence dots reflect `active/idle/dnd`; the typing indicator animates and times out; the header roster shows avatars.
-- [ ] Full keyboard path works: `Cmd+K` switch, `↑` edit last, `Esc` dismiss popovers, arrow-navigate the mention/emoji pickers; focus returns to the composer after send.
-- [ ] Screen reader announces only new messages (`role="log"` polite); reactions are `aria-pressed` toggles; emoji carry `aria-label`.
-- [ ] `prefers-reduced-motion` disables all new animations.
-- [ ] The surface renders correctly in both the desktop grid and the mobile `Sheet` host at 375×812 without breaking `getByRole('main')`/log selectors; `editor-ux` (incl. `mobile-chromium`) is green.
-- [ ] Before/after screenshots captured by the visuals pipeline show the redesigned channel, sidebar, reactions, and thread pane.
+- [ ] A channel with 5,000+ messages scrolls at 60fps with virtualization — **deferred** (window capped at 100; plain grouped list used).
+- [x] Reading history near the top is **not** interrupted when a new message arrives; the jump-to-latest pill appears with the unread-ahead count and scrolls cleanly on click (verified in browser preview).
+- [x] Consecutive messages from one author within 5 minutes render as a group (one avatar/name); a day boundary inserts a date separator; the "New messages" divider marks the last-read point (grouping unit-tested + verified in preview: 2nd message collapsed under the 1st, "Today" separator rendered).
+- [x] Adding/removing a reaction toggles the pill (verified: clicking quick-react produced a `👍 1` pill with `aria-pressed=true`); counts match the underlying `Reaction` nodes; reactor names show on hover via the title tooltip. (Revert-on-failure relies on node-sync rollback, not `useOptimistic`.)
+- [x] Replying opens the thread pane, the parent shows an accurate "1 reply · last reply" footer with participant avatars, and replies sync via `inReplyTo` and stay out of the main feed (verified in preview).
+- [x] Editing an own message updates content in place and shows `(edited)`; deleting shows the soft-delete placeholder and preserves thread shape (edit verified; soft-delete preserved from the original surface).
+- [x] Presence dots reflect `active/idle/dnd` and the typing indicator animates; the header roster shows avatars.
+- [x] Keyboard: `↑` edits last own message, `Esc` dismisses pickers / cancels edit / closes the thread, mention/emoji pickers arrow-navigate, focus returns to the composer after send. (`Cmd+K` channel switch deferred.)
+- [x] `role="log"`/`aria-live="polite"` on the list; reactions are `aria-pressed` toggles; emoji carry `aria-label`.
+- [x] `prefers-reduced-motion` disables new animations (`motion-reduce:animate-none` on each).
+- [x] Renders in both the desktop grid and the mobile BottomNav shell at 375×812 with a single `<main>` (no `getByRole('main')` breakage) — verified in preview; `editor-ux` (incl. `mobile-chromium`) pending CI.
+- [ ] Before/after screenshots from the CI visuals pipeline on the redesigned channel/sidebar/reactions/thread — pending the PR's visuals run.
 
 ## References