@devchitchat/chat 4.5.0 → 5.0.1

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/resizable.js

@@ -0,0 +1,74 @@
+/**
+ * resizable.js — attach a drag-to-resize handle to a panel edge.
+ *
+ * Usage:
+ *   attachResizeHandle(el, {
+ *     edge:    'right' | 'left',   // which edge gets the handle
+ *     cssVar:  '--sidebar-width',  // CSS custom property to update on :root
+ *     min:     180,                // minimum width in px
+ *     max:     600,                // maximum width in px
+ *     prefKey: 'sidebar_width',    // settings-sync pref key (omit to skip persistence)
+ *   })
+ */
+
+import { getPref, setPref } from './settings-sync.js'
+
+export function attachResizeHandle(el, { edge, cssVar, min = 160, max = 700, prefKey } = {}) {
+  // Restore persisted width
+  if (prefKey) {
+    const saved = getPref(prefKey)
+    if (saved != null) {
+      const px = parseInt(saved, 10)
+      if (px >= min && px <= max) {
+        document.documentElement.style.setProperty(cssVar, `${px}px`)
+      }
+    }
+  }
+
+  const handle = document.createElement('div')
+  handle.className = `resize-handle resize-handle--${edge}`
+  handle.setAttribute('aria-hidden', 'true')
+  el.appendChild(handle)
+
+  let startX = 0
+  let startWidth = 0
+
+  const onMove = e => {
+    const clientX = e.touches ? e.touches[0].clientX : e.clientX
+    const dx = clientX - startX
+    const newWidth = edge === 'right'
+      ? Math.max(min, Math.min(max, startWidth + dx))
+      : Math.max(min, Math.min(max, startWidth - dx))
+    document.documentElement.style.setProperty(cssVar, `${newWidth}px`)
+  }
+
+  const onEnd = () => {
+    document.removeEventListener('mousemove', onMove)
+    document.removeEventListener('mouseup',   onEnd)
+    document.removeEventListener('touchmove', onMove)
+    document.removeEventListener('touchend',  onEnd)
+    document.body.style.userSelect = ''
+    document.body.style.cursor = ''
+
+    if (prefKey) {
+      const current = getComputedStyle(document.documentElement).getPropertyValue(cssVar).trim()
+      setPref(prefKey, parseInt(current, 10))
+    }
+  }
+
+  const onStart = e => {
+    if (e.button != null && e.button !== 0) return
+    e.preventDefault()
+    startX = e.touches ? e.touches[0].clientX : e.clientX
+    startWidth = el.getBoundingClientRect().width
+    document.body.style.userSelect = 'none'
+    document.body.style.cursor = 'col-resize'
+    document.addEventListener('mousemove', onMove)
+    document.addEventListener('mouseup',   onEnd)
+    document.addEventListener('touchmove', onMove, { passive: false })
+    document.addEventListener('touchend',  onEnd)
+  }
+
+  handle.addEventListener('mousedown',  onStart)
+  handle.addEventListener('touchstart', onStart, { passive: false })
+}

package/pages/public/client/rtc-peer-manager.js

@@ -86,8 +86,11 @@ export class RtcPeerManager {
       }
 
       // Video stream → render tile + ensure audio (video stream may carry audio track)
-      const tileId = `${peerId}-${event.transceiver?.mid ?? 'cam'}`
-      const label  = this.#displayNames.get(peerId) ?? peerId
+      // Use semantic slot name (cam/screen) so WS signaling can address tiles by kind.
+      const slots    = this.#getTransceiverSlots(pc)
+      const slotName = event.transceiver === slots.screen ? 'screen' : 'cam'
+      const tileId   = `${peerId}-${slotName}`
+      const label    = this.#displayNames.get(peerId) ?? peerId
       this.#handlers.onTrack(peerId, tileId, stream, label)
       this.#handlers.onAudio(peerId, stream)
     }