@devchitchat/chat 4.5.0 → 5.0.0

package/pages/public/client/controllers/WebSocketController.js

@@ -0,0 +1,191 @@
+/**
+ * WebSocketController.js — maps incoming WebSocket messages to AppModel mutations.
+ *
+ * This is the only place ws.on(...) calls appear for server→client events.
+ * It owns the WsClient instance and hands it to ChatController for sends.
+ *
+ * Rules:
+ *   - Never touches the DOM.
+ *   - Never dispatches CustomEvents directly — calls model mutators instead.
+ *   - Filters messages by channelId when the event is channel-scoped.
+ */
+
+import { WsClient } from '../ws.js'
+
+export class WebSocketController {
+  #ws
+  #model
+
+  /**
+   * @param {AppModel} model
+   * @param {string} wsPath  e.g. '/ws' or '/base/ws'
+   */
+  constructor(model, wsPath = '/ws') {
+    this.#model = model
+    this.#ws    = new WsClient(wsPath)
+    this.#wire()
+  }
+
+  /** Expose WsClient so ChatController can call ws.send() */
+  get ws() { return this.#ws }
+
+  // ─────────────────────────────────────────────────────────────────────────
+  // Private: wire all incoming WS events
+  // ─────────────────────────────────────────────────────────────────────────
+
+  #wire() {
+    const ws    = this.#ws
+    const model = this.#model
+
+    // ── Session handshake ──────────────────────────────────────────────────
+    ws.on('open', () => {
+      ws.send({ t: 'hello', body: { client: 'devchitchat', resume: { session_token: null } } })
+    })
+
+    ws.on('hello_ack', () => {
+      // Join the current channel if one is already selected (e.g. on reconnect)
+      const channelId = model.currentChannelId
+      if (channelId) ws.send({ t: 'channel.join', body: { channel_id: channelId } })
+    })
+
+    ws.on('channel.joined', ({ channel_id }) => {
+      // Request users/bots for mention picker if not yet loaded
+      if (model.members.length === 0) {
+        ws.send({ t: 'user.list', body: {} })
+        ws.send({ t: 'bot.list',  body: {} })
+      }
+
+      // Catch up on messages missed during disconnect.
+      // newestSeqFor returns the highest seq the client already has; request
+      // everything after that so the model stays current without a full reload.
+      const cid = channel_id ?? model.currentChannelId
+      if (cid) {
+        const afterSeq = model.newestSeqFor(cid)
+        if (afterSeq > 0) {
+          ws.send({ t: 'msg.list', body: { channel_id: cid, after_seq: afterSeq } })
+        }
+      }
+    })
+
+    // ── Member lists ───────────────────────────────────────────────────────
+    ws.on('user.list_result', ({ users }) => {
+      model.setMembers((users ?? []).filter(u => u.handle))
+    })
+
+    ws.on('bot.list_result', ({ bots }) => {
+      model.setBots((bots ?? []).filter(b => b.handle))
+    })
+
+    // ── Messages ───────────────────────────────────────────────────────────
+    ws.on('msg.list_result', ({ messages, next_after_seq, has_more, direction, channel_id }) => {
+      const channelId = channel_id ?? model.currentChannelId
+      if (!channelId) return
+
+      if (direction === 'before') {
+        model.prependMessages(channelId, messages ?? [], has_more ?? false)
+        return
+      }
+
+      // after_seq catch-up: append each message
+      for (const msg of (messages ?? [])) {
+        model.addMessage(channelId, msg)
+      }
+    })
+
+    ws.on('msg.event', (body) => {
+      const channelId = body.channel_id
+      if (!channelId) return
+      // Thread replies come via thread.reply_event; skip them here
+      if (body.parent_msg_id) return
+      model.addMessage(channelId, body)
+    })
+
+    ws.on('msg.edited', ({ msg_id, channel_id, text, edited_at, rendered_text }) => {
+      const channelId = channel_id ?? model.currentChannelId
+      if (!channelId) return
+      model.updateMessage(channelId, { msg_id, text, edited_at, rendered_text })
+
+      // If this msg is a thread reply that's currently open
+      if (model.threadParentId) {
+        model.updateThreadReply(model.threadParentId, { msg_id, text, edited_at, rendered_text })
+      }
+    })
+
+    ws.on('msg.deleted', ({ msg_id, channel_id }) => {
+      const channelId = channel_id ?? model.currentChannelId
+      if (channelId) model.deleteMessage(channelId, msg_id)
+      // Also try thread replies
+      if (model.threadParentId) {
+        model.deleteThreadReply(model.threadParentId, msg_id)
+      }
+    })
+
+    ws.on('reaction.event', ({ msg_id, channel_id, reactions }) => {
+      const channelId = channel_id ?? model.currentChannelId
+      if (!channelId) return
+      model.setReactions(msg_id, channelId, reactions ?? [])
+    })
+
+    // ── Channel metadata ───────────────────────────────────────────────────
+    ws.on('channel.updated', ({ channel }) => {
+      if (!channel?.channel_id) return
+      model.updateChannelMeta(channel.channel_id, {
+        name:  channel.name,
+        topic: channel.topic ?? '',
+      })
+      // Keep sidebar channel list in sync
+      if (channel.hub_id) model.upsertChannel(channel)
+    })
+
+    ws.on('channel.created', ({ channel }) => {
+      if (channel?.hub_id) model.upsertChannel(channel)
+    })
+
+    ws.on('channel.deleted', ({ channel_id }) => {
+      model.removeChannel(channel_id)
+    })
+
+    // ── Hub events ─────────────────────────────────────────────────────────
+    ws.on('hub.created', ({ hub }) => {
+      model.upsertHub(hub)
+    })
+
+    ws.on('hub.updated', ({ hub }) => {
+      model.upsertHub(hub)
+    })
+
+    ws.on('hub.deleted', ({ hub_id }) => {
+      model.removeHub(hub_id)
+    })
+
+    // ── Thread ─────────────────────────────────────────────────────────────
+    ws.on('thread.list_result', ({ parent_msg_id, replies }) => {
+      model.loadThreadReplies(parent_msg_id, replies ?? [])
+    })
+
+    ws.on('thread.reply_event', ({ parent_msg_id, channel_id, reply }) => {
+      model.addThreadReply(parent_msg_id, reply)
+    })
+
+    // ── Presence ───────────────────────────────────────────────────────────
+    ws.on('presence.event', ({ user_id, status }) => {
+      model.setPresence(user_id, status)
+    })
+
+    ws.on('presence.list_result', ({ entries }) => {
+      model.setBulkPresence(entries ?? [])
+    })
+
+    // ── DMs ────────────────────────────────────────────────────────────────
+    ws.on('dm.opened', ({ channel }) => {
+      if (!channel) return
+      const dms = model.dms
+      const already = dms.some(d => d.channel_id === channel.channel_id)
+      if (!already) model.setDms([...dms, channel])
+    })
+
+    // ── Call events are forwarded as-is to the current call state object ───
+    // CallView registers its own ws.on() handlers; we don't touch call state
+    // here to keep call logic isolated in CallView / ChatController.
+  }
+}

package/pages/public/client/model/AppModel.js

@@ -0,0 +1,351 @@
+/**
+ * AppModel.js — single source of truth for all client-side state.
+ *
+ * Extends EventTarget so any object can call:
+ *   model.addEventListener('message-added', handler)
+ *
+ * Rules:
+ *   - No DOM imports. No ws.send(). Pure state + events.
+ *   - Every mutator method ends by dispatching a CustomEvent.
+ *   - Views read from the model only via events (or getters on initial render).
+ *   - Controllers call mutators; they never dispatch events directly.
+ */
+
+import * as Ev from './events.js'
+
+export class AppModel extends EventTarget {
+  // ── Identity ────────────────────────────────────────────────────────────────
+  #userId      = null
+  #userHandle  = null
+
+  // ── Sidebar state ───────────────────────────────────────────────────────────
+  #hubs     = []   // [{ hub_id, name, visibility, channels:[] }]
+  #dms      = []   // [{ channel_id, name, user_id, handle, online }]
+  #presence = new Map()  // userId → 'online'|'away'|'offline'
+
+  // ── Members (for @mention picker) ──────────────────────────────────────────
+  #members = []  // [{ user_id, handle, display_name }] — all users + bots
+  #bots    = []
+
+  // ── Navigation ─────────────────────────────────────────────────────────────
+  #currentChannelId = null
+  #currentChannelMeta = {}  // { name, topic, kind, visibility }
+
+  // ── Messages (cached per channel) ──────────────────────────────────────────
+  //   channelId → Message[]  (chronological, oldest first)
+  #messages   = new Map()
+  #oldestSeq  = new Map()   // channelId → number (lowest seq seen)
+  #hasMore    = new Map()   // channelId → bool
+  #loadingMore = false
+
+  // ── Thread panel ───────────────────────────────────────────────────────────
+  #threadParentId  = null
+  #threadParentMsg = null
+  #threads         = new Map()  // parentMsgId → Reply[]
+
+  // ── Call ────────────────────────────────────────────────────────────────────
+  #call = null  // null = no active call; otherwise opaque object from WebSocketController
+
+  // ─────────────────────────────────────────────────────────────────────────
+  // Identity
+  // ─────────────────────────────────────────────────────────────────────────
+
+  get userId()     { return this.#userId }
+  get userHandle() { return this.#userHandle }
+
+  setIdentity({ userId, userHandle }) {
+    this.#userId     = userId
+    this.#userHandle = userHandle
+  }
+
+  // ─────────────────────────────────────────────────────────────────────────
+  // Hubs & DMs
+  // ─────────────────────────────────────────────────────────────────────────
+
+  get hubs() { return this.#hubs }
+  get dms()  { return this.#dms }
+
+  setHubs(hubs) {
+    this.#hubs = hubs
+    this.#dispatch(Ev.HUBS_CHANGED, { hubs })
+  }
+
+  setDms(dms) {
+    this.#dms = dms
+    this.#dispatch(Ev.DMS_CHANGED, { dms })
+  }
+
+  /** Add or update a single hub */
+  upsertHub(hub) {
+    const idx = this.#hubs.findIndex(h => h.hub_id === hub.hub_id)
+    if (idx === -1) {
+      this.#hubs = [...this.#hubs, { ...hub, channels: hub.channels ?? [] }]
+    } else {
+      const existing = this.#hubs[idx]
+      this.#hubs = [
+        ...this.#hubs.slice(0, idx),
+        { ...existing, ...hub, channels: hub.channels ?? existing.channels },
+        ...this.#hubs.slice(idx + 1),
+      ]
+    }
+    this.#dispatch(Ev.HUBS_CHANGED, { hubs: this.#hubs })
+  }
+
+  removeHub(hubId) {
+    this.#hubs = this.#hubs.filter(h => h.hub_id !== hubId)
+    this.#dispatch(Ev.HUBS_CHANGED, { hubs: this.#hubs })
+  }
+
+  /** Add or update a channel inside its hub */
+  upsertChannel(channel) {
+    const hubIdx = this.#hubs.findIndex(h => h.hub_id === channel.hub_id)
+    if (hubIdx === -1) return
+    const hub = this.#hubs[hubIdx]
+    const chIdx = hub.channels.findIndex(c => c.channel_id === channel.channel_id)
+    const channels = chIdx === -1
+      ? [...hub.channels, channel]
+      : hub.channels.map((c, i) => i === chIdx ? { ...c, ...channel } : c)
+    this.#hubs = this.#hubs.map((h, i) => i === hubIdx ? { ...h, channels } : h)
+    this.#dispatch(Ev.HUBS_CHANGED, { hubs: this.#hubs })
+  }
+
+  removeChannel(channelId) {
+    this.#hubs = this.#hubs.map(h => ({
+      ...h,
+      channels: h.channels.filter(c => c.channel_id !== channelId),
+    }))
+    this.#dispatch(Ev.HUBS_CHANGED, { hubs: this.#hubs })
+  }
+
+  // ─────────────────────────────────────────────────────────────────────────
+  // Presence
+  // ─────────────────────────────────────────────────────────────────────────
+
+  get presence() { return this.#presence }
+
+  setPresence(userId, status) {
+    this.#presence.set(userId, status)
+    this.#dispatch(Ev.PRESENCE_UPDATED, { userId, status })
+  }
+
+  setBulkPresence(entries) {
+    for (const { user_id, status } of entries) {
+      this.#presence.set(user_id, status)
+    }
+    this.#dispatch(Ev.PRESENCE_UPDATED, { bulk: entries })
+  }
+
+  // ─────────────────────────────────────────────────────────────────────────
+  // Members (mention picker)
+  // ─────────────────────────────────────────────────────────────────────────
+
+  get members() { return this.#members }
+  get bots()    { return this.#bots }
+
+  /** Set of all known @handles (users + bots), lowercased, for mention validation. */
+  get knownHandles() {
+    return new Set([
+      ...this.#members.map(m => m.handle.toLowerCase()),
+      ...this.#bots.map(b => b.handle.toLowerCase()),
+    ])
+  }
+
+  setMembers(members) {
+    this.#members = members
+    this.#dispatch(Ev.MEMBERS_UPDATED, { members, bots: this.#bots })
+  }
+
+  setBots(bots) {
+    this.#bots = bots
+    this.#dispatch(Ev.MEMBERS_UPDATED, { members: this.#members, bots })
+  }
+
+  // ─────────────────────────────────────────────────────────────────────────
+  // Navigation
+  // ─────────────────────────────────────────────────────────────────────────
+
+  get currentChannelId()   { return this.#currentChannelId }
+  get currentChannelMeta() { return this.#currentChannelMeta }
+
+  selectChannel(channelId, meta = {}) {
+    const prev = this.#currentChannelId
+    this.#currentChannelId   = channelId
+    this.#currentChannelMeta = meta
+    this.#dispatch(Ev.CHANNEL_SELECTED, { channelId, prev, meta })
+  }
+
+  updateChannelMeta(channelId, patch) {
+    if (channelId === this.#currentChannelId) {
+      this.#currentChannelMeta = { ...this.#currentChannelMeta, ...patch }
+    }
+    this.#dispatch(Ev.CHANNEL_META_UPDATED, { channelId, ...patch })
+  }
+
+  // ─────────────────────────────────────────────────────────────────────────
+  // Messages
+  // ─────────────────────────────────────────────────────────────────────────
+
+  messagesFor(channelId) {
+    return this.#messages.get(channelId) ?? []
+  }
+
+  oldestSeqFor(channelId) {
+    return this.#oldestSeq.get(channelId) ?? 0
+  }
+
+  newestSeqFor(channelId) {
+    const msgs = this.#messages.get(channelId) ?? []
+    if (msgs.length === 0) return 0
+    return Math.max(...msgs.map(m => m.seq ?? 0))
+  }
+
+  hasMoreFor(channelId) {
+    return this.#hasMore.get(channelId) ?? false
+  }
+
+  get loadingMore() { return this.#loadingMore }
+
+  /**
+   * Called on first load: seed messages from SSR are already in the DOM.
+   * We just record the sequence bookmarks; the view does not re-render them.
+   */
+  seedMessages(channelId, { oldestSeq, hasMore }) {
+    if (!this.#messages.has(channelId)) this.#messages.set(channelId, [])
+    this.#oldestSeq.set(channelId, oldestSeq)
+    this.#hasMore.set(channelId, hasMore)
+  }
+
+  addMessage(channelId, message) {
+    const msgs = this.#messages.get(channelId) ?? []
+    // Deduplicate by msg_id
+    if (msgs.some(m => m.msg_id === message.msg_id)) return
+    this.#messages.set(channelId, [...msgs, message])
+    this.#dispatch(Ev.MESSAGE_ADDED, { channelId, message })
+  }
+
+  updateMessage(channelId, message) {
+    const msgs = this.#messages.get(channelId) ?? []
+    this.#messages.set(channelId, msgs.map(m => m.msg_id === message.msg_id ? { ...m, ...message } : m))
+    this.#dispatch(Ev.MESSAGE_UPDATED, { channelId, message })
+  }
+
+  deleteMessage(channelId, msgId) {
+    const msgs = this.#messages.get(channelId) ?? []
+    this.#messages.set(channelId, msgs.filter(m => m.msg_id !== msgId))
+    this.#dispatch(Ev.MESSAGE_DELETED, { channelId, msgId })
+  }
+
+  setReactions(msgId, channelId, reactions) {
+    const msgs = this.#messages.get(channelId) ?? []
+    this.#messages.set(channelId, msgs.map(m =>
+      m.msg_id === msgId ? { ...m, reactions } : m
+    ))
+    this.#dispatch(Ev.REACTIONS_UPDATED, { msgId, channelId, reactions })
+  }
+
+  /**
+   * Older messages loaded by pagination (prepend direction).
+   * msgs: oldest-first array.
+   */
+  prependMessages(channelId, msgs, hasMore) {
+    const existing = this.#messages.get(channelId) ?? []
+    // Avoid duplicates that may have arrived via msg.event while loading
+    const existingIds = new Set(existing.map(m => m.msg_id))
+    const unique = msgs.filter(m => !existingIds.has(m.msg_id))
+    this.#messages.set(channelId, [...unique, ...existing])
+    if (msgs.length > 0) {
+      const minSeq = Math.min(...msgs.map(m => m.seq ?? Infinity))
+      const prev = this.#oldestSeq.get(channelId) ?? Infinity
+      if (minSeq < prev) this.#oldestSeq.set(channelId, minSeq)
+    }
+    this.#hasMore.set(channelId, hasMore)
+    this.setLoadingMore(false)
+    this.#dispatch(Ev.MESSAGES_PREPENDED, { channelId, messages: unique, hasMore })
+  }
+
+  setLoadingMore(loading) {
+    this.#loadingMore = loading
+    this.#dispatch(Ev.LOADING_MORE_CHANGED, { loading })
+  }
+
+  // ─────────────────────────────────────────────────────────────────────────
+  // Thread panel
+  // ─────────────────────────────────────────────────────────────────────────
+
+  get threadParentId()  { return this.#threadParentId }
+  get threadParentMsg() { return this.#threadParentMsg }
+
+  threadRepliesFor(parentMsgId) {
+    return this.#threads.get(parentMsgId) ?? []
+  }
+
+  openThread(parentMsgId, parentMsg) {
+    this.#threadParentId  = parentMsgId
+    this.#threadParentMsg = parentMsg
+    this.#dispatch(Ev.THREAD_OPENED, { parentMsgId, parentMsg })
+  }
+
+  closeThread() {
+    this.#threadParentId  = null
+    this.#threadParentMsg = null
+    this.#dispatch(Ev.THREAD_CLOSED, {})
+  }
+
+  loadThreadReplies(parentMsgId, replies) {
+    this.#threads.set(parentMsgId, replies)
+    this.#dispatch(Ev.THREAD_LOADED, { parentMsgId, replies })
+  }
+
+  addThreadReply(parentMsgId, reply) {
+    const existing = this.#threads.get(parentMsgId) ?? []
+    if (existing.some(r => r.msg_id === reply.msg_id)) return
+    this.#threads.set(parentMsgId, [...existing, reply])
+
+    // Also update reply count on the parent message in every channel cache
+    for (const [channelId, msgs] of this.#messages) {
+      const parent = msgs.find(m => m.msg_id === parentMsgId)
+      if (parent) {
+        this.updateMessage(channelId, {
+          ...parent,
+          reply_count: (parent.reply_count ?? 0) + 1,
+        })
+        break
+      }
+    }
+
+    this.#dispatch(Ev.THREAD_REPLY_ADDED, { parentMsgId, reply })
+  }
+
+  updateThreadReply(parentMsgId, reply) {
+    const existing = this.#threads.get(parentMsgId) ?? []
+    this.#threads.set(parentMsgId, existing.map(r =>
+      r.msg_id === reply.msg_id ? { ...r, ...reply } : r
+    ))
+    this.#dispatch(Ev.THREAD_REPLY_UPDATED, { parentMsgId, reply })
+  }
+
+  deleteThreadReply(parentMsgId, msgId) {
+    const existing = this.#threads.get(parentMsgId) ?? []
+    this.#threads.set(parentMsgId, existing.filter(r => r.msg_id !== msgId))
+    this.#dispatch(Ev.THREAD_REPLY_DELETED, { parentMsgId, msgId })
+  }
+
+  // ─────────────────────────────────────────────────────────────────────────
+  // Call
+  // ─────────────────────────────────────────────────────────────────────────
+
+  get call() { return this.#call }
+
+  setCall(call) {
+    this.#call = call
+    this.#dispatch(Ev.CALL_CHANGED, { call })
+  }
+
+  // ─────────────────────────────────────────────────────────────────────────
+  // Private helpers
+  // ─────────────────────────────────────────────────────────────────────────
+
+  #dispatch(name, detail) {
+    this.dispatchEvent(new CustomEvent(name, { detail, bubbles: false }))
+  }
+}

package/pages/public/client/model/events.js

@@ -0,0 +1,41 @@
+/**
+ * events.js — AppModel event name constants.
+ *
+ * All CustomEvents dispatched by AppModel use these names.
+ * Import this wherever you listen to or dispatch model events.
+ *
+ * Convention: "<noun>-<verb>" in lowercase with hyphens (browser DOM style).
+ */
+
+// ── Navigation ────────────────────────────────────────────────────────────────
+export const CHANNEL_SELECTED      = 'channel-selected'       // { channelId, prev }
+
+// ── Hub / channel list (sidebar) ──────────────────────────────────────────────
+export const HUBS_CHANGED          = 'hubs-changed'           // { hubs }
+export const DMS_CHANGED           = 'dms-changed'            // { dms }
+export const PRESENCE_UPDATED      = 'presence-updated'       // { userId, status }
+export const MEMBERS_UPDATED       = 'members-updated'        // { channelId, members, bots }
+
+// ── Messages ──────────────────────────────────────────────────────────────────
+export const MESSAGE_ADDED         = 'message-added'          // { channelId, message }
+export const MESSAGE_UPDATED       = 'message-updated'        // { channelId, message }
+export const MESSAGE_DELETED       = 'message-deleted'        // { channelId, msgId }
+export const MESSAGES_PREPENDED    = 'messages-prepended'     // { channelId, messages, hasMore }
+export const REACTIONS_UPDATED     = 'reactions-updated'      // { msgId, channelId, reactions }
+
+// ── Thread panel ──────────────────────────────────────────────────────────────
+export const THREAD_OPENED         = 'thread-opened'          // { parentMsgId, parentMsg }
+export const THREAD_CLOSED         = 'thread-closed'          // {}
+export const THREAD_LOADED         = 'thread-loaded'          // { parentMsgId, replies }
+export const THREAD_REPLY_ADDED    = 'thread-reply-added'     // { parentMsgId, reply }
+export const THREAD_REPLY_UPDATED  = 'thread-reply-updated'   // { parentMsgId, reply }
+export const THREAD_REPLY_DELETED  = 'thread-reply-deleted'   // { parentMsgId, msgId }
+
+// ── Pagination ────────────────────────────────────────────────────────────────
+export const LOADING_MORE_CHANGED  = 'loading-more-changed'   // { loading }
+
+// ── Channel metadata ──────────────────────────────────────────────────────────
+export const CHANNEL_META_UPDATED  = 'channel-meta-updated'   // { channelId, name, topic }
+
+// ── Call ──────────────────────────────────────────────────────────────────────
+export const CALL_CHANGED          = 'call-changed'           // { call }

package/pages/public/client/shared/messages.js

@@ -33,8 +33,9 @@ export function makeDateSeparator(dateKey) {
 
 /**
  * Escape HTML then wrap @handles in <span class="mention"> (or mention-self for current user).
+ * Only handles that appear in `knownHandles` are styled; unrecognised @words are left as plain text.
  * @param {string} text
- * @param {{ userHandle?: string }} [opts]
+ * @param {{ userHandle?: string, knownHandles?: Set<string> }} [opts]
  */
 // Combined regex (operates on raw text before HTML-escaping):
 //   group 1 (+ inner 2, 3) — markdown link: [text](url)
@@ -42,7 +43,7 @@ export function makeDateSeparator(dateKey) {
 //   group 5                — @mention
 const INLINE_RE = /(\[([^\]]*)\]\((https?:\/\/[^)]+)\))|(https?:\/\/[^\s<>"'[\]()*]+)|(@[a-zA-Z0-9_.-]+)/g
 
-export function renderText(text, { userHandle } = {}) {
+export function renderText(text, { userHandle, knownHandles } = {}) {
   let result = ''
   let lastIndex = 0
   INLINE_RE.lastIndex = 0
@@ -58,9 +59,14 @@ export function renderText(text, { userHandle } = {}) {
       const trailing = bareUrl.slice(trimmed.length)
       result += `<a href="${escHtml(trimmed)}" target="_blank" rel="noopener noreferrer">${escHtml(trimmed)}</a>${escHtml(trailing)}`
     } else if (mention) {
-      const handle = mention.slice(1)
-      const isSelf = userHandle && handle.toLowerCase() === userHandle.toLowerCase()
-      result += `<span class="mention${isSelf ? ' mention-self' : ''}">${escHtml(mention)}</span>`
+      const handle = mention.slice(1).toLowerCase()
+      const known  = !knownHandles || knownHandles.has(handle)
+      if (known) {
+        const isSelf = userHandle && handle === userHandle.toLowerCase()
+        result += `<span class="mention${isSelf ? ' mention-self' : ''}">${escHtml(mention)}</span>`
+      } else {
+        result += escHtml(mention)
+      }
     }
     lastIndex = m.index + full.length
   }
@@ -75,7 +81,7 @@ export function renderText(text, { userHandle } = {}) {
  * @param {Element} el
  * @param {{ userHandle?: string }} [opts]
  */
-export function applyInlineRenderingToTextNodes(el, { userHandle } = {}) {
+export function applyInlineRenderingToTextNodes(el, { userHandle, knownHandles } = {}) {
   const walker = document.createTreeWalker(el, NodeFilter.SHOW_TEXT)
   const nodes = []
   let n
@@ -86,7 +92,7 @@ export function applyInlineRenderingToTextNodes(el, { userHandle } = {}) {
   for (const textNode of nodes) {
     const raw = textNode.textContent
     if (!raw.trim()) continue
-    const rendered = renderText(raw, { userHandle })
+    const rendered = renderText(raw, { userHandle, knownHandles })
     if (rendered === escHtml(raw)) continue  // nothing changed
     const span = document.createElement('span')
     span.innerHTML = rendered
@@ -123,7 +129,7 @@ export function renderAttachment(a) {
  * @param {{ userId?: string, userHandle?: string, isThreadReply?: boolean }} [ctx]
  *   isThreadReply — omits the "Reply in thread" button (threads can't be nested)
  */
-export function makeMessageEl({ msg_id, seq, user_id, user_display_name, ts, text, rendered_text, edited_at, attachments }, { userId, userHandle, isThreadReply = false } = {}) {
+export function makeMessageEl({ msg_id, seq, user_id, user_display_name, ts, text, rendered_text, edited_at, attachments }, { userId, userHandle, knownHandles, isThreadReply = false } = {}) {
   const article = document.createElement('article')
   article.className = 'message'
   article.dataset.seq = seq
@@ -137,7 +143,7 @@ export function makeMessageEl({ msg_id, seq, user_id, user_display_name, ts, tex
   const editedHtml = edited_at ? '<span class="message-edited">(edited)</span>' : ''
   const replyBtn = isThreadReply ? '' : '<button class="btn-reply btn-icon" type="button" title="Reply in thread" aria-label="Reply in thread">&#x21A9;</button>'
   const actionsHtml = `<div class="message-hover-actions"><span class="quick-picks"></span>${replyBtn}<button class="btn-react btn-icon" type="button" title="Add reaction" aria-label="Add reaction">🙂</button>${isSelf ? '<button class="btn-msg-actions btn-icon" type="button" title="Message actions">…</button>' : ''}</div>`
-  const textHtml = rendered_text ?? (text ? renderText(text, { userHandle }) : '')
+  const textHtml = rendered_text ?? (text ? renderText(text, { userHandle, knownHandles }) : '')
   article.innerHTML = `
       <span class="message-handle${isSelf ? '' : ' dm-trigger'}" data-user-id="${escHtml(user_id)}" title="${isSelf ? '' : 'Send a direct message'}">${escHtml(user_display_name ?? user_id)}</span>
       <time class="message-time" datetime="${ts}">${time}${editedHtml}</time>
@@ -146,5 +152,11 @@ export function makeMessageEl({ msg_id, seq, user_id, user_display_name, ts, tex
       <div class="reaction-bar"></div>
       ${actionsHtml}
     `
+  // When the server provides rendered_text, @mention styling is not included.
+  // Apply it now so every code path gets consistent output.
+  if (rendered_text) {
+    const textEl = article.querySelector('.message-text')
+    if (textEl) applyInlineRenderingToTextNodes(textEl, { userHandle, knownHandles })
+  }
   return article
 }