@devchitchat/chat 4.5.0 → 5.0.1

package/pages/design/tokens/index.phtml

@@ -0,0 +1,236 @@
+<h1 class="ds-page-title">Tokens</h1>
+<p class="ds-page-subtitle">
+  CSS custom properties that define the visual language. All tokens are defined on
+  <code>:root</code> and override per theme. Switch the theme picker to see them update live.
+</p>
+
+<!-- ── Colors ────────────────────────────────────────────────────────────── -->
+<div class="ds-section">
+  <h2 class="ds-section-title">Backgrounds</h2>
+  <p class="ds-section-desc">Layered surfaces create the sense of depth (HIG: Depth).</p>
+  <div class="token-grid">
+    <div class="token-swatch">
+      <div class="token-swatch-preview" style="background: var(--bg-base)"></div>
+      <div class="token-swatch-label">
+        <span class="token-swatch-name">--bg-base</span>
+        <span class="token-swatch-value" data-css-var="--bg-base">—</span>
+      </div>
+    </div>
+    <div class="token-swatch">
+      <div class="token-swatch-preview" style="background: var(--bg-sidebar)"></div>
+      <div class="token-swatch-label">
+        <span class="token-swatch-name">--bg-sidebar</span>
+        <span class="token-swatch-value" data-css-var="--bg-sidebar">—</span>
+      </div>
+    </div>
+    <div class="token-swatch">
+      <div class="token-swatch-preview" style="background: var(--bg-elevated)"></div>
+      <div class="token-swatch-label">
+        <span class="token-swatch-name">--bg-elevated</span>
+        <span class="token-swatch-value" data-css-var="--bg-elevated">—</span>
+      </div>
+    </div>
+    <div class="token-swatch">
+      <div class="token-swatch-preview" style="background: var(--bg-input)"></div>
+      <div class="token-swatch-label">
+        <span class="token-swatch-name">--bg-input</span>
+        <span class="token-swatch-value" data-css-var="--bg-input">—</span>
+      </div>
+    </div>
+    <div class="token-swatch">
+      <div class="token-swatch-preview" style="background: var(--bg-hover)"></div>
+      <div class="token-swatch-label">
+        <span class="token-swatch-name">--bg-hover</span>
+        <span class="token-swatch-value" data-css-var="--bg-hover">—</span>
+      </div>
+    </div>
+    <div class="token-swatch">
+      <div class="token-swatch-preview" style="background: var(--bg-active)"></div>
+      <div class="token-swatch-label">
+        <span class="token-swatch-name">--bg-active</span>
+        <span class="token-swatch-value" data-css-var="--bg-active">—</span>
+      </div>
+    </div>
+  </div>
+</div>
+
+<div class="ds-section">
+  <h2 class="ds-section-title">Text</h2>
+  <p class="ds-section-desc">Three levels of hierarchy. Use muted only for metadata, never for actionable content.</p>
+  <div class="ds-canvas">
+    <p style="font-size: 15px; font-weight: 600; color: var(--text-primary); margin: 0 0 8px;">
+      --text-primary — Channel name, message handle, body text
+    </p>
+    <p style="font-size: 14px; color: var(--text-secondary); margin: 0 0 8px;">
+      --text-secondary — Descriptions, labels, nav items at rest
+    </p>
+    <p style="font-size: 13px; color: var(--text-muted); margin: 0;">
+      --text-muted — Timestamps, section headers, placeholder text
+    </p>
+  </div>
+</div>
+
+<div class="ds-section">
+  <h2 class="ds-section-title">Accent &amp; Status</h2>
+  <div class="token-grid">
+    <div class="token-swatch">
+      <div class="token-swatch-preview" style="background: var(--accent)"></div>
+      <div class="token-swatch-label">
+        <span class="token-swatch-name">--accent</span>
+        <span class="token-swatch-value" data-css-var="--accent">—</span>
+      </div>
+    </div>
+    <div class="token-swatch">
+      <div class="token-swatch-preview" style="background: var(--color-success)"></div>
+      <div class="token-swatch-label">
+        <span class="token-swatch-name">--color-success</span>
+        <span class="token-swatch-value" data-css-var="--color-success">—</span>
+      </div>
+    </div>
+    <div class="token-swatch">
+      <div class="token-swatch-preview" style="background: var(--color-danger)"></div>
+      <div class="token-swatch-label">
+        <span class="token-swatch-name">--color-danger</span>
+        <span class="token-swatch-value" data-css-var="--color-danger">—</span>
+      </div>
+    </div>
+    <div class="token-swatch">
+      <div class="token-swatch-preview" style="background: var(--color-warning)"></div>
+      <div class="token-swatch-label">
+        <span class="token-swatch-name">--color-warning</span>
+        <span class="token-swatch-value" data-css-var="--color-warning">—</span>
+      </div>
+    </div>
+    <div class="token-swatch">
+      <div class="token-swatch-preview" style="background: var(--border)"></div>
+      <div class="token-swatch-label">
+        <span class="token-swatch-name">--border</span>
+        <span class="token-swatch-value" data-css-var="--border">—</span>
+      </div>
+    </div>
+  </div>
+</div>
+
+<hr class="ds-divider">
+
+<!-- ── Typography ─────────────────────────────────────────────────────────── -->
+<div class="ds-section">
+  <h2 class="ds-section-title">Typography</h2>
+  <p class="ds-section-desc">System fonts. SF Pro on Apple, Segoe UI on Windows — no web font download required.</p>
+
+  <div class="ds-canvas">
+    <div class="token-row">
+      <div class="token-row-preview" style="background: var(--bg-hover); display: flex; align-items: center; justify-content: center;">
+        <span style="font-family: var(--font-sans); font-size: 13px; font-weight: 600;">Aa</span>
+      </div>
+      <span class="token-row-name">--font-sans</span>
+      <span class="token-row-value">-apple-system, SF Pro Text, system-ui, Segoe UI, sans-serif</span>
+    </div>
+    <div class="token-row">
+      <div class="token-row-preview" style="background: var(--bg-hover); display: flex; align-items: center; justify-content: center;">
+        <span style="font-family: var(--font-mono); font-size: 13px; font-weight: 600;">01</span>
+      </div>
+      <span class="token-row-name">--font-mono</span>
+      <span class="token-row-value">SF Mono, ui-monospace, Cascadia Code, Fira Code, JetBrains Mono</span>
+    </div>
+  </div>
+
+  <div class="ds-canvas" style="margin-top: 12px;">
+    <p style="font-size: 20px; font-weight: 700; margin: 0 0 6px; line-height: 1.2;">Page title — 20px/700</p>
+    <p style="font-size: 17px; font-weight: 600; margin: 0 0 6px; line-height: 1.3;">Section title — 17px/600</p>
+    <p style="font-size: 15px; font-weight: 500; margin: 0 0 6px;">Message handle — 15px/500</p>
+    <p style="font-size: 14px; color: var(--text-secondary); margin: 0 0 6px; line-height: 1.5;">Body text — 14px/400, --text-secondary for descriptions</p>
+    <p style="font-size: 13px; color: var(--text-secondary); margin: 0 0 6px;">UI label — 13px/400, most controls</p>
+    <p style="font-size: 12px; color: var(--text-muted); margin: 0 0 6px;">Timestamp / metadata — 12px/400, --text-muted</p>
+    <p style="font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-muted); margin: 0;">Section label — 11px/600 uppercase</p>
+  </div>
+</div>
+
+<hr class="ds-divider">
+
+<!-- ── Radii ──────────────────────────────────────────────────────────────── -->
+<div class="ds-section">
+  <h2 class="ds-section-title">Border Radius</h2>
+  <p class="ds-section-desc">Consistent rounding communicates surface type and elevation.</p>
+  <div class="ds-canvas ds-canvas--grid">
+    <div style="text-align: center;">
+      <div style="width: 60px; height: 60px; background: var(--accent); border-radius: var(--radius-sm); margin: 0 auto 8px;"></div>
+      <code style="font-size: 11px;">--radius-sm<br>6px</code>
+    </div>
+    <div style="text-align: center;">
+      <div style="width: 60px; height: 60px; background: var(--accent); border-radius: var(--radius-md); margin: 0 auto 8px;"></div>
+      <code style="font-size: 11px;">--radius-md<br>10px</code>
+    </div>
+    <div style="text-align: center;">
+      <div style="width: 60px; height: 60px; background: var(--accent); border-radius: var(--radius-lg); margin: 0 auto 8px;"></div>
+      <code style="font-size: 11px;">--radius-lg<br>14px</code>
+    </div>
+    <div style="text-align: center;">
+      <div style="width: 60px; height: 60px; background: var(--accent); border-radius: var(--radius-xl); margin: 0 auto 8px;"></div>
+      <code style="font-size: 11px;">--radius-xl<br>20px</code>
+    </div>
+    <div style="text-align: center;">
+      <div style="width: 60px; height: 60px; background: var(--accent); border-radius: var(--radius-pill); margin: 0 auto 8px;"></div>
+      <code style="font-size: 11px;">--radius-pill<br>999px</code>
+    </div>
+  </div>
+  <div class="ds-annotation">
+    <strong>Usage guide:</strong> sm → nav items, code blocks, small chips. md → inputs, popovers.
+    lg → panels, modals, cards. xl → large overlays, sheets. pill → tags, reaction pills, primary buttons.
+  </div>
+</div>
+
+<hr class="ds-divider">
+
+<!-- ── Shadows ─────────────────────────────────────────────────────────────── -->
+<div class="ds-section">
+  <h2 class="ds-section-title">Shadows</h2>
+  <p class="ds-section-desc">Used for elevation — overlays, floating elements, modals.</p>
+  <div class="ds-canvas ds-canvas--grid" style="gap: 32px;">
+    <div style="text-align: center;">
+      <div style="width: 80px; height: 80px; background: var(--bg-elevated); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); margin: 0 auto 12px;"></div>
+      <code style="font-size: 11px; color: var(--text-muted);">--shadow-sm<br>nav items, small chips</code>
+    </div>
+    <div style="text-align: center;">
+      <div style="width: 80px; height: 80px; background: var(--bg-elevated); border-radius: var(--radius-md); box-shadow: var(--shadow-md); margin: 0 auto 12px;"></div>
+      <code style="font-size: 11px; color: var(--text-muted);">--shadow-md<br>popovers, context menus</code>
+    </div>
+    <div style="text-align: center;">
+      <div style="width: 80px; height: 80px; background: var(--bg-elevated); border-radius: var(--radius-md); box-shadow: var(--shadow-lg); margin: 0 auto 12px;"></div>
+      <code style="font-size: 11px; color: var(--text-muted);">--shadow-lg<br>modals, sheets</code>
+    </div>
+  </div>
+</div>
+
+<hr class="ds-divider">
+
+<!-- ── Motion ─────────────────────────────────────────────────────────────── -->
+<div class="ds-section">
+  <h2 class="ds-section-title">Motion</h2>
+  <p class="ds-section-desc">One transition token. Use it for all interactive state changes.</p>
+  <div class="ds-canvas">
+    <div class="token-row" style="border: none; padding: 0;">
+      <span class="token-row-name">--transition</span>
+      <span class="token-row-value">200ms cubic-bezier(0.25, 0.1, 0.25, 1)</span>
+    </div>
+  </div>
+  <div class="ds-annotation">
+    <strong>Refactoring opportunity:</strong> Several components hardcode their own transition values
+    instead of using <code>var(--transition)</code>. When adding new interactive elements, always
+    use the token. Consider a pass through <code>base.css</code> to replace hardcoded transitions.
+  </div>
+</div>
+
+<script>
+  // Read computed CSS variable values and show them under swatches
+  document.querySelectorAll('[data-css-var]').forEach(el => {
+    const update = () => {
+      const val = getComputedStyle(document.documentElement)
+        .getPropertyValue(el.dataset.cssVar).trim()
+      el.textContent = val || '—'
+    }
+    update()
+    // Re-read on theme change (theme.js swaps the stylesheet link)
+    document.getElementById('theme-stylesheet')?.addEventListener('load', update)
+  })
+</script>

package/pages/public/client/app.js

@@ -1,38 +1,196 @@
 /**
- * app.js — boots rdbljs islands and page-level setup.
+ * app.js — MVC bootstrap.
  *
- * Loaded as <script type="module" src="{{base}}/client/app.js"> from _layout.html.
- * init(window) from rdbljs discovers all [island] elements, imports each
- * module, calls the default export factory with (root, window), and wires
- * up bind(root, scope) so all directives (model=, onclick=, each=, etc.) work.
+ * Wiring order (inside-out):
+ *   1. AppModel            — single source of truth (EventTarget hub)
+ *   2. WebSocketController — maps WS events to model mutations
+ *   3. ChatController      — maps document CustomEvents to ws.send / model
+ *   4. Views               — listen to model, render DOM, dispatch controller events
+ *   5. Router + swipe nav  — SPA navigation; notifies model on channel change
+ *
+ * No rdbljs. No islands. Plain browser APIs throughout.
  */
-import { init } from '@devchitchat/rdbljs'
+
+import { AppModel }              from './model/AppModel.js'
+import { WebSocketController }   from './controllers/WebSocketController.js'
+import { ChatController }        from './controllers/ChatController.js'
+import { MessageListView }       from './views/MessageListView.js'
+import { ThreadPanelView }       from './views/ThreadPanelView.js'
+import { ComposerView }          from './views/ComposerView.js'
+import { SidebarView }           from './views/SidebarView.js'
+import { CallView }              from './views/CallView.js'
+import { ChatHeaderView }        from './views/ChatHeaderView.js'
+import { cancelActiveEdit }      from './views/shared/MessageInteractions.js'
+import { closeEmojiPicker }      from './views/shared/EmojiPickerSingleton.js'
 import { getSettings, syncFromServer, patchSettings } from './settings-sync.js'
-import { initSwipeNav } from './swipe-nav.js'
-import { initRouter } from './router.js'
+import { initSwipeNav }          from './swipe-nav.js'
+import { initRouter }            from './router.js'
+import { attachResizeHandle }    from './resizable.js'
 
 const BASE_PATH = window.__BASE_PATH__ ?? ''
 
-// On a channel page the intent is always to view the channel — persist the
-// current channel and ensure mobile shows the chat panel, not the hub panel.
+// ── 1. Pre-mount: apply settings to prevent layout flash ─────────────────────
+
 if (location.pathname.startsWith(`${BASE_PATH}/channels/`)) {
   const channelId = location.pathname.split('/').pop()
   if (channelId) patchSettings({ last_channel_id: channelId, mobile_chat_open: true })
 }
 
-// Apply settings before islands mount (prevent layout flash)
 const settings = getSettings()
 if (window.matchMedia('(max-width: 1024px)').matches && settings.mobile_chat_open === false) {
   document.body.classList.add('sidebar-open')
 }
 
-await init(window)
+// ── 2. Model ──────────────────────────────────────────────────────────────────
+
+const model = new AppModel()
+
+// Seed identity from the chat panel's data attributes (written by SSR)
+const chatPanelEl = document.querySelector('.chat-panel')
+if (chatPanelEl) {
+  model.setIdentity({
+    userId:     chatPanelEl.dataset.userId ?? null,
+    userHandle: chatPanelEl.dataset.userHandle ?? null,
+  })
+  // Seed the current channel
+  const channelId   = chatPanelEl.dataset.id ?? null
+  const seedFirstSeq = parseInt(chatPanelEl.dataset.seedFirstSeq ?? '0', 10)
+  const seedHasMore  = chatPanelEl.dataset.seedHasMore === 'true'
+  if (channelId) {
+    model.selectChannel(channelId, {
+      name:       chatPanelEl.dataset.name  ?? '',
+      topic:      chatPanelEl.dataset.topic ?? '',
+      kind:       chatPanelEl.dataset.kind  ?? 'text',
+    })
+    model.seedMessages(channelId, { oldestSeq: seedFirstSeq, hasMore: seedHasMore })
+  }
+}
+
+// ── 3. Controllers ────────────────────────────────────────────────────────────
+
+const wsController   = new WebSocketController(model, `${BASE_PATH}/ws`)
+const ws             = wsController.ws
+new ChatController(model, ws)
+
+// ── 4. Views ──────────────────────────────────────────────────────────────────
+
+// Sidebar
+const sidebarEl = document.querySelector('aside[data-sidebar], aside.sidebar, aside')
+if (sidebarEl) {
+  new SidebarView(model, ws, sidebarEl)
+}
+
+// Chat panel views (only mount if the chat panel exists on this page)
+if (chatPanelEl) {
+  const messagesEl   = document.getElementById('messages')
+  const sentinelEl   = document.getElementById('load-more-sentinel')
+  const composerEl   = chatPanelEl.querySelector('.composer')
+  const threadPanelEl = document.getElementById('thread-panel')
+
+  const headerEl = chatPanelEl.querySelector('.chat-header')
+  if (headerEl) {
+    new ChatHeaderView(model, headerEl)
+  }
+
+  if (messagesEl) {
+    new MessageListView(model, messagesEl, sentinelEl)
+  }
+
+  if (threadPanelEl) {
+    new ThreadPanelView(model, threadPanelEl)
+    attachResizeHandle(threadPanelEl, {
+      edge:       'left',
+      cssVar:     '--thread-panel-width',
+      min:        260,
+      max:        640,
+      prefKey: 'thread_panel_width',
+    })
+  }
+
+  if (composerEl) {
+    new ComposerView(model, composerEl)
+  }
+
+  // CallView (WebRTC) — only if call UI elements are present
+  const tilePanelEl = document.getElementById('tile-panel')
+  if (tilePanelEl || document.getElementById('btn-start-call')) {
+    new CallView(model, ws)
+  }
+  if (tilePanelEl) {
+    attachResizeHandle(tilePanelEl, {
+      edge:       'left',
+      cssVar:     '--tile-panel-width',
+      min:        200,
+      max:        640,
+      prefKey: 'tile_panel_width',
+    })
+  }
+}
+
+// Sidebar resize — desktop only (mobile sidebar is full-screen overlay)
+if (sidebarEl && window.matchMedia('(min-width: 769px)').matches) {
+  attachResizeHandle(sidebarEl, {
+    edge:       'right',
+    cssVar:     '--sidebar-width',
+    min:        180,
+    max:        480,
+    prefKey: 'sidebar_width',
+  })
+}
+
+// ── 5. SPA navigation ─────────────────────────────────────────────────────────
+
+// router.js morphs the DOM and dispatches 'chatpanel:navigated'.
+// We update the model here so views react automatically.
+document.addEventListener('chatpanel:navigated', e => {
+  const { channelId, name, topic, kind, seedFirstSeq, seedHasMore } = e.detail
+
+  // Close transient UI on navigation
+  cancelActiveEdit()
+  closeEmojiPicker()
+  if (model.threadParentId) model.closeThread()
+
+  // Update identity if it changed (shouldn't, but guard anyway)
+  const panel = document.querySelector('.chat-panel')
+  if (panel?.dataset.userId) {
+    model.setIdentity({ userId: panel.dataset.userId, userHandle: panel.dataset.userHandle ?? null })
+  }
+
+  // Seed pagination bookmarks for the new channel
+  if (channelId) {
+    model.seedMessages(channelId, {
+      oldestSeq: parseInt(seedFirstSeq ?? '0', 10),
+      hasMore:   seedHasMore ?? false,
+    })
+  }
+
+  // Navigate — fires 'channel-selected' → all views update
+  model.selectChannel(channelId, { name, topic, kind })
+
+  // Join the new channel on the server (WebSocketController handles the response)
+  ws.send({ t: 'channel.join', body: { channel_id: channelId } })
+
+  // Persist for PWA restore
+  if (channelId) patchSettings({ last_channel_id: channelId, mobile_chat_open: true })
+})
+
+// ── 6. Router + swipe nav ────────────────────────────────────────────────────
 
 initRouter()
 initSwipeNav()
 
-// Reconcile with server in background after islands mount
+// ── 7. Post-mount: reconcile settings with server ─────────────────────────────
+
 syncFromServer().then(remoteSettings => {
   if (!remoteSettings || !window.matchMedia('(max-width: 1024px)').matches) return
   document.body.classList.toggle('sidebar-open', remoteSettings.mobile_chat_open === false)
 })
+
+// ── 8. Global keyboard shortcuts ──────────────────────────────────────────────
+
+document.addEventListener('keydown', e => {
+  if (e.key === 'Escape') {
+    cancelActiveEdit()
+    closeEmojiPicker()
+  }
+})

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

@@ -0,0 +1,204 @@
+/**
+ * ChatController.js — translates user actions into WS sends and model mutations.
+ *
+ * Views dispatch CustomEvents on themselves; ChatController listens to those
+ * events and calls ws.send(). This keeps ws.send() out of views entirely.
+ *
+ * Wired events (views → controller):
+ *   'send-message'       { channelId, text, attachments, priority }
+ *   'send-thread-reply'  { channelId, parentMsgId, text, attachments }
+ *   'react'              { msgId, channelId, emoji }
+ *   'unreact'            { msgId, channelId, emoji }
+ *   'edit-message'       { msgId, channelId, text }
+ *   'delete-message'     { msgId, channelId }
+ *   'open-thread'        { msgId, channelId }
+ *   'close-thread'       {}
+ *   'load-more'          { channelId, beforeSeq }
+ *   'open-dm'            { targetUserId }
+ *   'task-toggle'        { msgId, channelId, checkboxIndex, checked }
+ *
+ * Each of these is dispatched on `document` so any view can trigger them
+ * without needing a direct reference to the controller.
+ */
+
+import * as Ev from '../model/events.js'
+
+export class ChatController {
+  #ws
+  #model
+
+  /**
+   * @param {AppModel}  model
+   * @param {WsClient}  ws    — from WebSocketController.ws
+   */
+  constructor(model, ws) {
+    this.#model = model
+    this.#ws    = ws
+    this.#wire()
+  }
+
+  // ─────────────────────────────────────────────────────────────────────────
+  // Wire view → controller events
+  // ─────────────────────────────────────────────────────────────────────────
+
+  #wire() {
+    const listen = (name, fn) =>
+      document.addEventListener(name, e => fn(e.detail))
+
+    listen('send-message',      d => this.#sendMessage(d))
+    listen('send-thread-reply', d => this.#sendThreadReply(d))
+    listen('react',             d => this.#react(d))
+    listen('unreact',           d => this.#unreact(d))
+    listen('edit-message',      d => this.#editMessage(d))
+    listen('delete-message',    d => this.#deleteMessage(d))
+    listen('open-thread',       d => this.#openThread(d))
+    listen('close-thread',      ()  => this.#closeThread())
+    listen('load-more',         d => this.#loadMore(d))
+    listen('open-dm',           d => this.#openDm(d))
+    listen('select-channel',    d => this.#selectChannel(d))
+    listen('task-toggle',       d => this.#taskToggle(d))
+    listen('preview-text',      d => this.#previewText(d))
+  }
+
+  // ─────────────────────────────────────────────────────────────────────────
+  // Handlers
+  // ─────────────────────────────────────────────────────────────────────────
+
+  #sendMessage({ channelId, text, attachments = [], priority = 'normal' }) {
+    if (!text?.trim() && attachments.length === 0) return
+    this.#ws.send({
+      t: 'msg.send',
+      body: {
+        channel_id: channelId,
+        text: text?.trim() ?? '',
+        client_msg_id: `local_${Date.now()}`,
+        priority,
+        attachments: attachments.map(a => ({
+          upload_id:  a.upload_id,
+          url:        a.url,
+          filename:   a.original_name,
+          mime_type:  a.mime_type,
+          size_bytes: a.size_bytes,
+        })),
+      },
+    })
+  }
+
+  #sendThreadReply({ channelId, parentMsgId, text, attachments = [] }) {
+    if (!text?.trim()) return
+    this.#ws.send({
+      t: 'msg.send',
+      body: {
+        channel_id:    channelId,
+        text:          text.trim(),
+        parent_msg_id: parentMsgId,
+        attachments:   attachments.map(a => ({
+          upload_id:  a.upload_id,
+          url:        a.url,
+          filename:   a.original_name,
+          mime_type:  a.mime_type,
+          size_bytes: a.size_bytes,
+        })),
+      },
+    })
+  }
+
+  #react({ msgId, channelId, emoji }) {
+    this.#ws.send({ t: 'reaction.add', body: { msg_id: msgId, emoji, channel_id: channelId } })
+  }
+
+  #unreact({ msgId, channelId, emoji }) {
+    this.#ws.send({ t: 'reaction.remove', body: { msg_id: msgId, emoji, channel_id: channelId } })
+  }
+
+  #editMessage({ msgId, channelId, text }) {
+    this.#ws.send({ t: 'msg.edit', body: { msg_id: msgId, channel_id: channelId, text } })
+  }
+
+  #deleteMessage({ msgId, channelId }) {
+    this.#ws.send({ t: 'msg.delete', body: { msg_id: msgId, channel_id: channelId } })
+  }
+
+  #openThread({ msgId }) {
+    const model = this.#model
+    // Find the parent message in the model cache
+    const channelId = model.currentChannelId
+    const msgs      = model.messagesFor(channelId)
+    const parentMsg = msgs.find(m => m.msg_id === msgId) ?? null
+    model.openThread(msgId, parentMsg)
+    // Fetch replies
+    this.#ws.send({ t: 'thread.list', body: { parent_msg_id: msgId, channel_id: channelId } })
+  }
+
+  #closeThread() {
+    this.#model.closeThread()
+  }
+
+  #loadMore({ channelId, beforeSeq }) {
+    if (this.#model.loadingMore) return
+    this.#model.setLoadingMore(true)
+    this.#ws.send({ t: 'msg.list', body: { channel_id: channelId, before_seq: beforeSeq } })
+  }
+
+  #openDm({ targetUserId }) {
+    this.#ws.send({ t: 'dm.open', body: { target_user_id: targetUserId } })
+  }
+
+  #selectChannel({ channelId, meta }) {
+    const model = this.#model
+    const prev  = model.currentChannelId
+
+    model.selectChannel(channelId, meta ?? {})
+
+    if (prev && prev !== channelId) {
+      this.#ws.send({ t: 'channel.leave', body: { channel_id: prev } })
+    }
+
+    this.#ws.send({ t: 'channel.join', body: { channel_id: channelId } })
+
+    // Request messages since seed (0 = fetch latest 50)
+    // We only fetch if we don't already have a cache for this channel
+    if (model.messagesFor(channelId).length === 0) {
+      this.#ws.send({ t: 'msg.list', body: { channel_id: channelId, after_seq: 0 } })
+    }
+
+    if (model.members.length === 0) {
+      this.#ws.send({ t: 'user.list', body: {} })
+      this.#ws.send({ t: 'bot.list',  body: {} })
+    }
+  }
+
+  #taskToggle({ msgId, channelId, text }) {
+    // Task checkboxes: send the full updated text with checkbox toggled
+    this.#ws.send({ t: 'msg.edit', body: { msg_id: msgId, channel_id: channelId, text } })
+  }
+
+  async #previewText({ text, resolve }) {
+    try {
+      const base = window.__BASE_PATH__ ?? ''
+      const res  = await fetch(`${base}/api/preview`, {
+        method:  'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body:    JSON.stringify({ text }),
+      })
+      if (res.ok) {
+        const { html } = await res.json()
+        resolve?.(html)
+      } else {
+        resolve?.(null)
+      }
+    } catch {
+      resolve?.(null)
+    }
+  }
+}
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Helper: dispatch a controller event from anywhere in the view layer.
+// Views call e.g. dispatch('open-thread', { msgId }) instead of importing
+// ChatController directly.
+// ─────────────────────────────────────────────────────────────────────────────
+
+export function dispatch(name, detail = {}) {
+  document.dispatchEvent(new CustomEvent(name, { detail, bubbles: false }))
+}