@devchitchat/chat 4.3.0 → 4.4.0

package/migrate/011-message-threads.js

@@ -0,0 +1,6 @@
+export function run(db) {
+  db.exec(`
+    ALTER TABLE messages ADD COLUMN parent_msg_id TEXT REFERENCES messages(msg_id);
+    CREATE INDEX IF NOT EXISTS idx_messages_parent ON messages(parent_msg_id) WHERE parent_msg_id IS NOT NULL;
+  `)
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@devchitchat/chat",
-  "version": "4.3.0",
+  "version": "4.4.0",
   "description": "A small chat app. p2p video and screenshare.",
   "scripts": {
     "dev": "bun --watch index.js",
@@ -8,17 +8,13 @@
     "migrate": "bun scripts/migrate.js",
     "test": "bun test",
     "generate-vapid": "bun scripts/generate-vapid.js",
-    "create-secrets": "kubectl create secret generic chat-web-vapid --from-env-file=.env --namespace=${KUBE_NAMESPACE:-default} --dry-run=client -o yaml | kubectl apply -f -",
-    "docker-build": "./docker-build-k3s.sh",
-    "local-deploy": "kubectl config use-context ${KUBE_CONTEXT:-k3s-local} && kubectl apply -f charts/web/templates/deployment.yaml -n ${KUBE_NAMESPACE:-default}",
+    "create-secrets": "kubectl --context=k3s-local create secret generic chat-web-vapid --from-env-file=.env -n default --dry-run=client -o yaml | kubectl --context=k3s-local apply -f -",
     "backup": "bun scripts/backup.js",
     "backup-uploads": "bun scripts/backup-uploads.js",
-    "deploy-backup": "kubectl config use-context ${KUBE_CONTEXT:-k3s-local} && helm upgrade --install chat-web charts/web -f charts/web/values.local.yaml -n ${KUBE_NAMESPACE:-default}",
-    "backup-now": "kubectl config use-context ${KUBE_CONTEXT:-k3s-local} && kubectl create job --from=cronjob/chat-backup chat-backup-$(date +%s) -n ${KUBE_NAMESPACE:-default}",
-    "backup-pull": "kubectl config use-context ${KUBE_CONTEXT:-k3s-local} && kubectl cp $(kubectl get pod -l app=chat-web -o jsonpath='{.items[0].metadata.name}' -n ${KUBE_NAMESPACE:-default}):/var/lib/chat/backups ../backups -n ${KUBE_NAMESPACE:-default}",
+    "backup-now": "kubectl --context=k3s-local create job --from=cronjob/chat-backup chat-backup-$(date +%s) -n default",
     "restore": "bun scripts/restore.js",
     "restore-uploads": "bun scripts/restore-uploads.js",
-    "push": "bun docker-build && bun local-deploy",
+    "push": "infra push",
     "purge-cf-cache": "bun scripts/purge-cf-cache.js"
   },
   "type": "module",

package/pages/channels/[channelId].js

@@ -49,6 +49,9 @@ export async function GET(req) {
   const seedMessages = reactionService
     ? reactionService.enrichWithReactions({ messages: rawSeedMessages, requestingUserId: user.user_id })
     : rawSeedMessages
+
+  const seedMsgIds = rawSeedMessages.map(m => m.msg_id)
+  const replyCounts = messageService.getReplyCountsForMessages({ msgIds: seedMsgIds })
   const seedSeq = seedMessages.length ? seedMessages[seedMessages.length - 1].seq : 0
   const seedFirstSeq = seedMessages.length ? seedMessages[0].seq : 0
   const seedHasMore = seedFirstSeq > 1
@@ -84,15 +87,20 @@ export async function GET(req) {
     base: BASE_PATH,
     seedFirstSeq,
     seedHasMore,
-    seedMessages: seedMessages.map(m => ({
-      ...m,
-      raw_text: m.text,
-      text: sanitizeForFrontEnd(renderMarkdown(m.text).html),
-      ts_fmt: new Date(m.ts).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' }),
-      attachments_json: m.attachments?.length ? JSON.stringify(m.attachments) : '',
-      reactions_json: m.reactions?.length ? JSON.stringify(m.reactions) : '',
-      edited_at: m.edited_at ?? '',
-    })),
+    seedMessages: seedMessages.map(m => {
+      const replyCount = replyCounts[m.msg_id] ?? 0
+      return {
+        ...m,
+        raw_text: m.text,
+        text: sanitizeForFrontEnd(renderMarkdown(m.text).html),
+        ts_fmt: new Date(m.ts).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' }),
+        attachments_json: m.attachments?.length ? JSON.stringify(m.attachments) : '',
+        reactions_json: m.reactions?.length ? JSON.stringify(m.reactions) : '',
+        edited_at: m.edited_at ?? '',
+        reply_count: replyCount,
+        reply_count_label: replyCount > 0 ? `View ${replyCount} ${replyCount === 1 ? 'reply' : 'replies'}` : '',
+      }
+    }),
     seedSeq,
     hubs: hubsWithChannels,
   }

package/pages/channels/[channelId].phtml

@@ -135,10 +135,11 @@
   <div class="messages" id="messages" aria-live="polite" aria-label="Messages" role="log">
     <div class="load-more-sentinel" id="load-more-sentinel" aria-hidden="true" hidden></div>
     {{#each seedMessages}}
-    <article class="message" data-seq="{{seq}}" data-msg-id="{{msg_id}}" data-key="message_id" data-user-id="{{user_id}}" data-raw-text="{{raw_text}}" data-edited-at="{{edited_at}}" data-attachments="{{attachments_json}}" data-reactions="{{reactions_json}}">
+    <article class="message" data-seq="{{seq}}" data-msg-id="{{msg_id}}" data-key="message_id" data-user-id="{{user_id}}" data-raw-text="{{raw_text}}" data-edited-at="{{edited_at}}" data-attachments="{{attachments_json}}" data-reactions="{{reactions_json}}" data-reply-count="{{reply_count}}">
       <span class="message-handle" data-user-id="{{user_id}}">{{user_display_name}}</span>
       <time class="message-time" datetime="{{ts}}">{{ts_fmt}}{{#if edited_at}}<span class="message-edited">(edited)</span>{{/if}}</time>
       <div class="message-text">{{{text}}}</div>
+      {{#if reply_count_label}}<a class="thread-replies-link" href="#" data-msg-id="{{msg_id}}">{{reply_count_label}}</a>{{/if}}
       <div class="reaction-bar"></div>
     </article>
     {{/each}}
@@ -199,4 +200,21 @@
   <div class="tile-grid" id="tile-grid"></div>
 </div>
 
+<!-- Thread panel: absolute overlay on the right, shown when a thread is open -->
+<div class="thread-panel" id="thread-panel">
+  <div class="thread-panel-header">
+    <span class="thread-panel-title">Thread</span>
+    <button class="btn-icon thread-panel-close" id="thread-panel-close" aria-label="Close thread" type="button">&#x2715;</button>
+  </div>
+  <div class="thread-body">
+    <div class="thread-anchor" id="thread-anchor"></div>
+    <div class="thread-divider"><span>Replies</span></div>
+    <div class="thread-replies" id="thread-replies" role="log" aria-label="Thread replies"></div>
+  </div>
+  <footer class="thread-composer">
+    <textarea class="thread-textarea" id="thread-input" placeholder="Reply in thread…" rows="2" aria-label="Reply in thread"></textarea>
+    <button class="btn-send thread-send-btn" id="thread-send" type="button">Reply</button>
+  </footer>
+</div>
+
 </div><!-- /.main-content -->

package/pages/public/client/islands/call.js

@@ -72,9 +72,10 @@ export default function CallIsland(root) {
   // ── @mention picker state ──────────────────────────────────────────────────
   let channelMembers  = []   // [{ user_id, handle, display_name }] — non-bot users
   let channelBots     = []   // [{ user_id, handle, display_name }] — bot users
-  let mentionFiltered = []   // current filtered subset
-  let mentionStart    = -1   // index of '@' in textarea.value
-  let mentionSelIdx   = 0    // keyboard-selected row
+  let mentionFiltered        = []   // current filtered subset
+  let mentionStart           = -1   // index of '@' in textarea.value
+  let mentionSelIdx          = 0    // keyboard-selected row
+  let activeMentionTextarea  = null // which textarea triggered the picker
 
   // ── Call state ─────────────────────────────────────────────────────────────
   const inCall     = signal(false)
@@ -168,6 +169,13 @@ export default function CallIsland(root) {
         const quickPicks = document.createElement('span')
         quickPicks.className = 'quick-picks'
         toolbar.appendChild(quickPicks)
+        const replyBtn = document.createElement('button')
+        replyBtn.className = 'btn-reply btn-icon'
+        replyBtn.type = 'button'
+        replyBtn.title = 'Reply in thread'
+        replyBtn.setAttribute('aria-label', 'Reply in thread')
+        replyBtn.innerHTML = '↩'
+        toolbar.appendChild(replyBtn)
         const reactBtn = document.createElement('button')
         reactBtn.className = 'btn-react btn-icon'
         reactBtn.type = 'button'
@@ -187,6 +195,22 @@ export default function CallIsland(root) {
         renderQuickPicks(toolbar)
       }
 
+      // Hydrate "view N replies" link for seed messages that have replies
+      if (!article.querySelector('.thread-replies-link')) {
+        const replyCount = parseInt(article.dataset.replyCount ?? '0', 10)
+        if (replyCount > 0) {
+          const msgId = article.dataset.msgId
+          const link = document.createElement('a')
+          link.className = 'thread-replies-link'
+          link.href = '#'
+          link.dataset.msgId = msgId
+          link.textContent = `View ${replyCount} ${replyCount === 1 ? 'reply' : 'replies'}`
+          const reactionBar = article.querySelector('.reaction-bar')
+          if (reactionBar) article.insertBefore(link, reactionBar)
+          else article.appendChild(link)
+        }
+      }
+
       // Apply inline rendering (URLs, @mentions) to server-rendered message text.
       // Walk text nodes instead of replacing innerHTML so that <a> tags already
       // rendered server-side (e.g. from markdown link syntax) are preserved.
@@ -328,13 +352,13 @@ export default function CallIsland(root) {
 
   function selectMention(member) {
     if (!member) return
-    const textarea = root.querySelector('#message-input')
+    const textarea = activeMentionTextarea ?? root.querySelector('#message-input')
     if (!textarea) return
     const cursor = textarea.selectionStart
     const val    = textarea.value
     const insert = `@${member.handle} `
     textarea.value = val.substring(0, mentionStart) + insert + val.substring(cursor)
-    draft.set(textarea.value)
+    if (textarea.id === 'message-input') draft.set(textarea.value)
     const pos = mentionStart + insert.length
     textarea.setSelectionRange(pos, pos)
     closePicker()
@@ -368,7 +392,13 @@ export default function CallIsland(root) {
     openPicker(filtered, start)
   }
 
-  root.querySelector('#message-input')?.addEventListener('input', handleComposerInput)
+  const mainInputEl = root.querySelector('#message-input')
+
+  mainInputEl?.addEventListener('input', handleComposerInput)
+  mainInputEl?.addEventListener('focus', () => {
+    activeMentionTextarea = mainInputEl
+    root.querySelector('.composer')?.prepend(mentionPickerEl)
+  })
 
   // ── Chat: connect + join channel ───────────────────────────────────────────
 
@@ -423,6 +453,7 @@ export default function CallIsland(root) {
 
   ws.on('msg.event', (body) => {
     if (body.channel_id !== channelId) return
+    if (body.parent_msg_id) return  // thread reply — handled via thread.reply_event
     appendMessage(body)
     afterSeq = body.seq
   })
@@ -463,6 +494,149 @@ export default function CallIsland(root) {
     document.title = `#${body.channel.name} — devchitchat`
   })
 
+  // ── Thread panel ───────────────────────────────────────────────────────────
+
+  const threadPanelEl  = document.getElementById('thread-panel')
+  const threadBodyEl   = threadPanelEl?.querySelector('.thread-body')
+  const threadAnchorEl = document.getElementById('thread-anchor')
+  const threadRepliesEl = document.getElementById('thread-replies')
+  const threadInputEl  = document.getElementById('thread-input')
+  const threadSendBtn  = document.getElementById('thread-send')
+  const threadCloseBtn = document.getElementById('thread-panel-close')
+
+  let activeThreadParentId = null
+
+  function updateReplyCountLink(article, count) {
+    let link = article.querySelector('.thread-replies-link')
+    if (count > 0) {
+      const label = `View ${count} ${count === 1 ? 'reply' : 'replies'}`
+      if (!link) {
+        link = document.createElement('a')
+        link.className = 'thread-replies-link'
+        link.href = '#'
+        link.dataset.msgId = article.dataset.msgId
+        const reactionBar = article.querySelector('.reaction-bar')
+        if (reactionBar) article.insertBefore(link, reactionBar)
+        else article.appendChild(link)
+      }
+      link.textContent = label
+    }
+  }
+
+  function openThread(parentMsgId) {
+    activeThreadParentId = parentMsgId
+    const parentArticle = messages.querySelector(`[data-msg-id="${parentMsgId}"]`)
+
+    // Render anchor (clone parent message, strip hover actions)
+    if (threadAnchorEl) {
+      threadAnchorEl.innerHTML = ''
+      if (parentArticle) {
+        const clone = parentArticle.cloneNode(true)
+        clone.querySelector('.message-hover-actions')?.remove()
+        clone.querySelector('.thread-replies-link')?.remove()
+        threadAnchorEl.appendChild(clone)
+      }
+    }
+
+    if (threadRepliesEl) threadRepliesEl.innerHTML = '<p class="thread-loading">Loading…</p>'
+    threadPanelEl?.classList.add('active')
+
+    ws.send({ t: 'thread.list', body: { parent_msg_id: parentMsgId, channel_id: channelId } })
+
+    setTimeout(() => threadInputEl?.focus(), 50)
+  }
+
+  function closeThread() {
+    threadPanelEl?.classList.remove('active')
+    activeThreadParentId = null
+    if (threadAnchorEl) threadAnchorEl.innerHTML = ''
+    if (threadRepliesEl) threadRepliesEl.innerHTML = ''
+  }
+
+  threadCloseBtn?.addEventListener('click', closeThread)
+
+  function sendThreadReply() {
+    const text = threadInputEl?.value.trim()
+    if (!text || !activeThreadParentId) return
+    ws.send({ t: 'msg.send', body: { channel_id: channelId, text, parent_msg_id: activeThreadParentId } })
+    if (threadInputEl) threadInputEl.value = ''
+  }
+
+  threadSendBtn?.addEventListener('click', sendThreadReply)
+  threadInputEl?.addEventListener('input', handleComposerInput)
+  threadInputEl?.addEventListener('focus', () => {
+    activeMentionTextarea = threadInputEl
+    root.querySelector('.thread-composer')?.prepend(mentionPickerEl)
+  })
+  threadInputEl?.addEventListener('keydown', e => {
+    if (!mentionPickerEl.hidden) {
+      if (e.key === 'ArrowDown') { e.preventDefault(); mentionSelIdx = Math.min(mentionSelIdx + 1, mentionFiltered.length - 1); renderPicker(); return }
+      if (e.key === 'ArrowUp')   { e.preventDefault(); mentionSelIdx = Math.max(mentionSelIdx - 1, 0); renderPicker(); return }
+      if (e.key === 'Enter' || e.key === 'Tab') { e.preventDefault(); selectMention(mentionFiltered[mentionSelIdx]); return }
+      if (e.key === 'Escape') { closePicker(); return }
+    }
+    if (e.key === 'Enter' && !e.shiftKey) { e.preventDefault(); sendThreadReply() }
+  })
+
+  ws.on('thread.list_result', ({ parent_msg_id, replies }) => {
+    if (parent_msg_id !== activeThreadParentId) return
+    if (!threadRepliesEl) return
+    threadRepliesEl.innerHTML = ''
+    if (!replies.length) {
+      threadRepliesEl.innerHTML = '<p class="thread-empty">No replies yet. Be the first!</p>'
+      return
+    }
+    for (const reply of replies) {
+      const article = makeMessageEl(reply, { userId, userHandle })
+      threadRepliesEl.appendChild(article)
+    }
+    if (threadBodyEl) threadBodyEl.scrollTop = threadBodyEl.scrollHeight
+  })
+
+  ws.on('thread.reply_event', ({ parent_msg_id, channel_id: evtChannelId, reply }) => {
+    if (evtChannelId !== channelId) return
+
+    // Update reply count on parent message in the channel list
+    const parentArticle = messages.querySelector(`[data-msg-id="${parent_msg_id}"]`)
+    if (parentArticle) {
+      const current = parseInt(parentArticle.dataset.replyCount ?? '0', 10)
+      const next = current + 1
+      parentArticle.dataset.replyCount = String(next)
+      updateReplyCountLink(parentArticle, next)
+    }
+
+    // Append reply to thread panel if it's open for this parent
+    if (activeThreadParentId === parent_msg_id && threadRepliesEl) {
+      const emptyEl = threadRepliesEl.querySelector('.thread-empty')
+      if (emptyEl) emptyEl.remove()
+      const article = makeMessageEl(reply, { userId, userHandle })
+      threadRepliesEl.appendChild(article)
+      if (threadBodyEl) threadBodyEl.scrollTop = threadBodyEl.scrollHeight
+    }
+  })
+
+  // Delegated click: reply button → open thread panel
+  messages.addEventListener('click', e => {
+    const btn = e.target.closest('.btn-reply')
+    if (!btn) return
+    e.stopPropagation()
+    const article = btn.closest('article.message')
+    const msgId = article?.dataset.msgId
+    if (!msgId) return
+    openThread(msgId)
+  })
+
+  // Delegated click: "view N replies" link → open thread panel
+  messages.addEventListener('click', e => {
+    const link = e.target.closest('.thread-replies-link')
+    if (!link) return
+    e.preventDefault()
+    e.stopPropagation()
+    const msgId = link.dataset.msgId
+    if (!msgId) return
+    openThread(msgId)
+  })
+
   // ── Chat: composer ─────────────────────────────────────────────────────────
 
   // Pending attachments: [{ upload_id, url, original_name, mime_type, size_bytes }]

package/pages/public/client/islands/sidebar.js

@@ -959,6 +959,7 @@ export default function SidebarIsland(root) {
         }
       }))
     }
+    renderDms()
     if (dmUnread().has(newId)) {
       const next = new Set(dmUnread()); next.delete(newId); dmUnread.set(next)
     }

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

@@ -134,7 +134,7 @@ export function makeMessageEl({ msg_id, seq, user_id, user_display_name, ts, tex
   const isSelf = userId != null && user_id === userId
   const attachmentHtml = (attachments ?? []).map(a => renderAttachment(a)).join('')
   const editedHtml = edited_at ? '<span class="message-edited">(edited)</span>' : ''
-  const actionsHtml = `<div class="message-hover-actions"><span class="quick-picks"></span><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 actionsHtml = `<div class="message-hover-actions"><span class="quick-picks"></span><button class="btn-reply btn-icon" type="button" title="Reply in thread" aria-label="Reply in thread">&#x21A9;</button><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 }) : '')
   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>

package/pages/public/themes/base.css

@@ -539,7 +539,7 @@ details summary {
 .stream-tile video { width: 160px; height: 90px; object-fit: cover; display: block; }
 
 /* ── Chat panel ──────────────────────────────────────────────────────────── */
-.chat-panel { flex: 1; display: flex; flex-direction: column; min-height: 0; }
+.chat-panel { flex: 1; display: flex; flex-direction: column; min-height: 0; position: relative; }
 .chat-header { padding: 14px 20px; padding-top: calc(14px + env(safe-area-inset-top)); border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 12px; }
 .chat-title {
   font-size: 1rem;
@@ -820,14 +820,17 @@ details summary {
 .btn-compose-expand:hover { opacity: 1; }
 
 /* ── Compose overlay ─────────────────────────────────────────────────────── */
+/* Absolute so it reliably covers the full chat panel,
+   independent of the surrounding flex layout. */
 .compose-overlay {
-  display: flex;
+  display: none;
   flex-direction: column;
-  flex: 1;
-  min-height: 0;
+  position: absolute;
+  inset: 0;
+  z-index: 20;
   background: var(--bg-base);
 }
-.compose-overlay[hidden] { display: none; }
+.compose-overlay:not([hidden]) { display: flex; }
 
 .compose-overlay-header {
   display: flex;
@@ -1332,6 +1335,131 @@ mark { background: color-mix(in srgb, var(--accent) 30%, transparent); color: va
 /* Pinned tile: move to top, single column always */
 .tile-grid.pinned .stream-tile.pinned-tile { order: -1; }
 
+/* ── Thread panel ─────────────────────────────────────────────────────────── */
+
+/* .main-content needs position relative so the absolute thread panel anchors to it */
+.main-content { position: relative; }
+
+.thread-panel {
+  display: none;
+  flex-direction: column;
+  background: var(--bg-sidebar);
+  border-left: 1px solid var(--border);
+  position: absolute;
+  top: 0;
+  right: 0;
+  width: 380px;
+  height: 100%;
+  z-index: 30;
+  overflow: hidden;
+}
+.thread-panel.active { display: flex; }
+
+.thread-panel-header {
+  display: flex;
+  align-items: center;
+  padding: 14px 20px;
+  border-bottom: 1px solid var(--border);
+  background: var(--bg-topbar);
+  flex-shrink: 0;
+}
+.thread-panel-title {
+  flex: 1;
+  font-size: 14px;
+  font-weight: 600;
+}
+.thread-panel-close {
+  font-size: 14px;
+  opacity: 0.7;
+}
+.thread-panel-close:hover { opacity: 1; }
+
+.thread-body {
+  flex: 1;
+  overflow-y: auto;
+  display: flex;
+  flex-direction: column;
+}
+
+.thread-anchor {
+  padding: 10px 12px;
+  border-bottom: 1px solid var(--border);
+  background: var(--bg-hover, var(--bg-topbar));
+}
+/* Hide interactive elements in the anchor clone */
+.thread-anchor .message-hover-actions { display: none !important; }
+.thread-anchor .thread-replies-link   { display: none !important; }
+
+.thread-divider {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 6px 12px;
+  font-size: 11px;
+  font-weight: 600;
+  color: var(--color-muted);
+  border-bottom: 1px solid var(--border);
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  flex-shrink: 0;
+}
+
+.thread-replies {
+  flex: 1;
+  padding: 4px 0;
+}
+.thread-replies .message {
+  padding: 4px 12px;
+}
+
+.thread-empty,
+.thread-loading {
+  padding: 24px 16px;
+  color: var(--color-muted);
+  font-size: 13px;
+  text-align: center;
+}
+
+.thread-composer {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  padding: 10px 12px;
+  border-top: 1px solid var(--border);
+  flex-shrink: 0;
+}
+.thread-textarea {
+  width: 100%;
+  box-sizing: border-box;
+  padding: 8px;
+  background: var(--bg-input, var(--bg));
+  border: 1px solid var(--border);
+  border-radius: var(--radius-sm, 4px);
+  color: var(--color-text);
+  font-family: inherit;
+  font-size: 13px;
+  resize: none;
+  min-height: 56px;
+}
+.thread-textarea:focus { outline: none; border-color: var(--color-accent); }
+.thread-send-btn { align-self: flex-end; }
+
+/* "View N replies" link under messages */
+.thread-replies-link {
+  display: inline-block;
+  font-size: 12px;
+  color: var(--color-link, var(--color-accent));
+  margin: 2px 0 0;
+  cursor: pointer;
+  text-decoration: none;
+}
+.thread-replies-link:hover { text-decoration: underline; }
+
+/* Mobile: full-width overlay */
+@media (max-width: 700px) {
+  .thread-panel { width: 100%; }
+}
+
 /* ── Call: status row (shown when a call is active, user hasn't joined) ──── */
 .call-status {
   display: flex;

package/src/adapters/SqliteMessageRepository.js

@@ -1,6 +1,6 @@
 import { runTransaction } from '../db/transaction.js'
 
-const MSG_COLS = `m.msg_id, m.seq, m.user_id, u.display_name AS user_display_name, m.ts, m.text, m.edited_at, m.attachments_json`
+const MSG_COLS = `m.msg_id, m.seq, m.user_id, u.display_name AS user_display_name, m.ts, m.text, m.edited_at, m.attachments_json, m.parent_msg_id`
 
 export class SqliteMessageRepository {
   constructor({ db }) {
@@ -11,14 +11,14 @@ export class SqliteMessageRepository {
    * Atomically allocates the next seq, inserts the message and an audit event.
    * Returns { seq }.
    */
-  insertMessage({ msgId, channelId, userId, now, text, clientMsgId, priority = 'normal', attachmentsJson = null }) {
+  insertMessage({ msgId, channelId, userId, now, text, clientMsgId, priority = 'normal', attachmentsJson = null, parentMsgId = null }) {
     return runTransaction(this.db, () => {
       const row = this.db.prepare('SELECT MAX(seq) AS max_seq FROM messages WHERE channel_id = ?').get(channelId)
       const seq = (row?.max_seq || 0) + 1
 
       this.db.prepare(
-        `INSERT INTO messages (msg_id, channel_id, seq, user_id, ts, text, client_msg_id, priority, attachments_json) VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?)`
-      ).run(msgId, channelId, seq, userId, now, text, clientMsgId, priority, attachmentsJson)
+        `INSERT INTO messages (msg_id, channel_id, seq, user_id, ts, text, client_msg_id, priority, attachments_json, parent_msg_id) VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?)`
+      ).run(msgId, channelId, seq, userId, now, text, clientMsgId, priority, attachmentsJson, parentMsgId ?? null)
 
       this.db.prepare(
         `INSERT INTO events (ts, actor_user_id, scope_kind, scope_id, type, body_json)
@@ -33,7 +33,7 @@ export class SqliteMessageRepository {
     const rows = this.db.prepare(
       `SELECT ${MSG_COLS}
        FROM messages m LEFT JOIN users u ON m.user_id = u.user_id
-       WHERE m.channel_id = ? AND m.seq > ? AND m.deleted_at IS NULL ORDER BY m.seq ASC LIMIT ?`
+       WHERE m.channel_id = ? AND m.seq > ? AND m.deleted_at IS NULL AND m.parent_msg_id IS NULL ORDER BY m.seq ASC LIMIT ?`
     ).all(channelId, afterSeq, limit)
     return rows.map(r => ({
       ...r,
@@ -46,7 +46,7 @@ export class SqliteMessageRepository {
     const rows = this.db.prepare(
       `SELECT ${MSG_COLS}
        FROM messages m LEFT JOIN users u ON m.user_id = u.user_id
-       WHERE m.channel_id = ? AND m.deleted_at IS NULL
+       WHERE m.channel_id = ? AND m.deleted_at IS NULL AND m.parent_msg_id IS NULL
        ORDER BY m.seq DESC LIMIT ?`
     ).all(channelId, limit)
     return rows.reverse().map(r => ({
@@ -58,7 +58,7 @@ export class SqliteMessageRepository {
 
   getById(msgId) {
     return this.db.prepare(
-      `SELECT msg_id, channel_id, seq, user_id, ts, text, deleted_at FROM messages WHERE msg_id = ?`
+      `SELECT msg_id, channel_id, seq, user_id, ts, text, deleted_at, parent_msg_id FROM messages WHERE msg_id = ?`
     ).get(msgId) ?? null
   }
 
@@ -78,7 +78,7 @@ export class SqliteMessageRepository {
     const rows = this.db.prepare(
       `SELECT ${MSG_COLS}
        FROM messages m LEFT JOIN users u ON m.user_id = u.user_id
-       WHERE m.channel_id = ? AND m.seq < ? AND m.deleted_at IS NULL
+       WHERE m.channel_id = ? AND m.seq < ? AND m.deleted_at IS NULL AND m.parent_msg_id IS NULL
        ORDER BY m.seq DESC LIMIT ?`
     ).all(channelId, beforeSeq, limit)
     return rows.reverse().map(r => ({
@@ -87,4 +87,30 @@ export class SqliteMessageRepository {
       attachments_json: undefined,
     }))
   }
+
+  listReplies({ parentMsgId }) {
+    const rows = this.db.prepare(
+      `SELECT ${MSG_COLS}
+       FROM messages m LEFT JOIN users u ON m.user_id = u.user_id
+       WHERE m.parent_msg_id = ? AND m.deleted_at IS NULL ORDER BY m.seq ASC`
+    ).all(parentMsgId)
+    return rows.map(r => ({
+      ...r,
+      attachments: r.attachments_json ? JSON.parse(r.attachments_json) : [],
+      attachments_json: undefined,
+    }))
+  }
+
+  getReplyCountsForMessages({ msgIds }) {
+    if (!msgIds.length) return {}
+    const placeholders = msgIds.map(() => '?').join(',')
+    const rows = this.db.prepare(
+      `SELECT parent_msg_id, COUNT(*) AS reply_count FROM messages
+       WHERE parent_msg_id IN (${placeholders}) AND deleted_at IS NULL
+       GROUP BY parent_msg_id`
+    ).all(...msgIds)
+    const result = {}
+    for (const row of rows) result[row.parent_msg_id] = row.reply_count
+    return result
+  }
 }

package/src/db/initDb.js

@@ -105,9 +105,11 @@ export const createSchema = (db) => {
       priority TEXT NOT NULL DEFAULT 'normal',
       attachments_json TEXT,
       edited_at INTEGER,
+      parent_msg_id TEXT REFERENCES messages(msg_id),
       FOREIGN KEY(channel_id) REFERENCES channels(channel_id),
       FOREIGN KEY(user_id) REFERENCES users(user_id)
     );
+    CREATE INDEX IF NOT EXISTS idx_messages_parent ON messages(parent_msg_id) WHERE parent_msg_id IS NOT NULL;
 
     CREATE TABLE IF NOT EXISTS uploads (
       upload_id        TEXT    PRIMARY KEY,
@@ -173,6 +175,7 @@ export const createSchema = (db) => {
   try { db.exec(`ALTER TABLE messages ADD COLUMN priority TEXT NOT NULL DEFAULT 'normal'`) } catch { /* already exists */ }
   try { db.exec(`ALTER TABLE messages ADD COLUMN attachments_json TEXT`) } catch { /* already exists */ }
   try { db.exec(`ALTER TABLE messages ADD COLUMN edited_at INTEGER`) } catch { /* already exists */ }
+  try { db.exec(`ALTER TABLE messages ADD COLUMN parent_msg_id TEXT REFERENCES messages(msg_id)`) } catch { /* already exists */ }
 
   // Bot tokens — added after initial schema
   db.exec(`

package/src/services/MessageService.js

@@ -16,7 +16,7 @@ export class MessageService {
     this.uploadService = uploadService
   }
 
-  sendMessage({ channelId, userId, text, clientMsgId = null, priority = 'normal', attachments = [] }) {
+  sendMessage({ channelId, userId, text, clientMsgId = null, priority = 'normal', attachments = [], parentMsgId = null }) {
     if (!this.channelService.isMember(channelId, userId)) throw new ServiceError('FORBIDDEN', 'Not a member of channel')
     if (!text?.trim() && attachments.length === 0) throw new ServiceError('BAD_REQUEST', 'Message text or attachment required')
     if (!['normal', 'async', 'now'].includes(priority)) throw new ServiceError('BAD_REQUEST', 'Invalid priority')
@@ -28,7 +28,8 @@ export class MessageService {
     const attachmentsJson = attachments.length > 0 ? JSON.stringify(attachments) : null
 
     const { seq } = this.messageRepo.insertMessage({
-      msgId, channelId, userId, now, text: trimmed, clientMsgId, priority, attachmentsJson
+      msgId, channelId, userId, now, text: trimmed, clientMsgId, priority, attachmentsJson,
+      parentMsgId: parentMsgId ?? null
     })
 
     if (trimmed) {
@@ -56,7 +57,7 @@ export class MessageService {
       }
     }
 
-    return { msg_id: msgId, seq, ts: now, priority, attachments: enrichedAttachments }
+    return { msg_id: msgId, seq, ts: now, priority, attachments: enrichedAttachments, parent_msg_id: parentMsgId ?? null }
   }
 
   editMessage({ msgId, channelId, userId, newText }) {
@@ -119,4 +120,16 @@ export class MessageService {
       : rows
     return { messages, has_more: hasMore }
   }
+
+  listThreadReplies({ parentMsgId, channelId, userId }) {
+    if (!this.channelService.isMember(channelId, userId)) throw new ServiceError('FORBIDDEN', 'Not a member of channel')
+    const parent = this.messageRepo.getById(parentMsgId)
+    if (!parent) throw new ServiceError('NOT_FOUND', 'Message not found')
+    if (parent.channel_id !== channelId) throw new ServiceError('BAD_REQUEST', 'Message does not belong to this channel')
+    return this.messageRepo.listReplies({ parentMsgId })
+  }
+
+  getReplyCountsForMessages({ msgIds }) {
+    return this.messageRepo.getReplyCountsForMessages({ msgIds })
+  }
 }

package/src/ws/ChatServer.js

@@ -22,7 +22,7 @@ import { SqliteSignalingRepository } from '../adapters/SqliteSignalingRepository
 import { handleHello, handleInviteRedeem, handleSignIn, handleSignOut, handleAdminInviteCreate, handleAdminInviteList, handleAdminInviteRevoke, handleAdminUserList, handleAdminUserSetRoles, handleAdminUserSetPassword, handleAdminUserSetDisplayName, handleAdminBotCreate, handleAdminBotList, handleAdminBotTokenCreate, handleAdminBotTokenRevoke, handleAdminBotSetChannels } from './handlers/authHandlers.js'
 import { handleHubList, handleHubCreate, handleHubUpdate, handleHubDelete, handleHubAddMember, handleHubRemoveMember, handleHubListMembers, handleHubReorder } from './handlers/hubHandlers.js'
 import { handleChannelList, handleChannelCreate, handleChannelUpdate, handleChannelDelete, handleChannelJoin, handleChannelLeave, handleChannelReorder, handleChannelAddMember, handleChannelRemoveMember, handleChannelListMembers, handleUserList, handleBotList, handleDmOpen, handleDmList } from './handlers/channelHandlers.js'
-import { handleMsgSend, handleMsgList, handleMsgEdit, handleMsgDelete, handleSearchQuery, handlePresenceSubscribe } from './handlers/messageHandlers.js'
+import { handleMsgSend, handleMsgList, handleMsgEdit, handleMsgDelete, handleThreadList, handleSearchQuery, handlePresenceSubscribe } from './handlers/messageHandlers.js'
 import { handleRtcCallCreate, handleRtcJoin, handleRtcOffer, handleRtcAnswer, handleRtcIce, handleRtcStreamPublish, handleRtcLeave, handleRtcEndCall } from './handlers/rtcHandlers.js'
 import { handlePushSubscribe, handlePushUnsubscribe } from './handlers/pushHandlers.js'
 import { handleReactionAdd, handleReactionRemove } from './handlers/reactionHandlers.js'
@@ -224,6 +224,7 @@ export class ChatServer {
       case 'msg.edit':                   return handleMsgEdit(ws, msg, ctx)
       case 'msg.delete':                 return handleMsgDelete(ws, msg, ctx)
       case 'msg.list':                   return handleMsgList(ws, msg, ctx)
+      case 'thread.list':                return handleThreadList(ws, msg, ctx)
       case 'search.query':               return handleSearchQuery(ws, msg, ctx)
       case 'presence.subscribe':         return handlePresenceSubscribe(ws, msg, ctx)
       // RTC

package/src/ws/handlers/authHandlers.js

@@ -145,8 +145,15 @@ export function handleAdminBotTokenRevoke(ws, msg, ctx) {
 }
 
 export function handleAdminBotSetChannels(ws, msg, ctx) {
-  const { botService, sendWs } = ctx
+  const { botService, sendWs, connections } = ctx
   const { user_id, channel_ids } = msg.body || {}
   botService.setBotChannels({ userId: user_id, channelIds: channel_ids, requestingUserId: ws.data.userId })
   sendWs(ws, { t: 'admin.bot_updated', reply_to: msg.id, ok: true, body: { user_id } })
+
+  // Notify the bot's active WebSocket connection so it can re-join channels.
+  for (const [, conn] of connections) {
+    if (conn.data.userId === user_id) {
+      sendWs(conn, { t: 'bot.channels_updated', body: { user_id } })
+    }
+  }
 }

package/src/ws/handlers/messageHandlers.js

@@ -5,23 +5,32 @@ import { renderMarkdown } from '@devchitchat/index97/markdown'
 
 export function handleMsgSend(ws, msg, ctx) {
   const { messageService, deliveryService, sendWs, publishChannel, dispatchMentions } = ctx
-  const { channel_id, text, client_msg_id, priority, attachments } = msg.body || {}
+  const { channel_id, text, client_msg_id, priority, attachments, parent_msg_id } = msg.body || {}
   const result = messageService.sendMessage({
     channelId: channel_id, userId: ws.data.userId, text, clientMsgId: client_msg_id, priority,
-    attachments: Array.isArray(attachments) ? attachments : []
+    attachments: Array.isArray(attachments) ? attachments : [],
+    parentMsgId: parent_msg_id ?? null
   })
 
   sendWs(ws, { t: 'msg.ack', reply_to: msg.id, ok: true, body: { msg_id: result.msg_id, seq: result.seq, client_msg_id, priority: result.priority } })
 
-  publishChannel(channel_id, {
-    t: 'msg.event', ok: true,
-    body: {
-      msg_id: result.msg_id, channel_id, seq: result.seq,
-      user_id: ws.data.userId, user_display_name: ws.data.displayName,
-      ts: result.ts, text, rendered_text: renderMarkdown(text).html,
-      priority: result.priority, attachments: result.attachments ?? []
-    }
-  })
+  const eventBody = {
+    msg_id: result.msg_id, channel_id, seq: result.seq,
+    user_id: ws.data.userId, user_display_name: ws.data.displayName,
+    ts: result.ts, text, rendered_text: renderMarkdown(text).html,
+    priority: result.priority, attachments: result.attachments ?? [],
+    parent_msg_id: result.parent_msg_id ?? null
+  }
+
+  publishChannel(channel_id, { t: 'msg.event', ok: true, body: eventBody })
+
+  // If this is a thread reply, also publish thread.reply_event so open thread panels update
+  if (result.parent_msg_id) {
+    publishChannel(channel_id, {
+      t: 'thread.reply_event', ok: true,
+      body: { parent_msg_id: result.parent_msg_id, channel_id, reply: eventBody }
+    })
+  }
 
   deliveryService.advance({ channelId: channel_id, userId: ws.data.userId, afterSeq: result.seq })
   dispatchMentions({ channelId: channel_id, senderId: ws.data.userId, text, seq: result.seq, priority: result.priority })
@@ -69,6 +78,14 @@ export function handleMsgDelete(ws, msg, ctx) {
   })
 }
 
+export function handleThreadList(ws, msg, ctx) {
+  const { messageService, sendWs } = ctx
+  const { parent_msg_id, channel_id } = msg.body || {}
+  const replies = messageService.listThreadReplies({ parentMsgId: parent_msg_id, channelId: channel_id, userId: ws.data.userId })
+  const withRendered = replies.map(m => ({ ...m, rendered_text: renderMarkdown(m.text).html }))
+  sendWs(ws, { t: 'thread.list_result', reply_to: msg.id, ok: true, body: { parent_msg_id, channel_id, replies: withRendered } })
+}
+
 export function handleSearchQuery(ws, msg, ctx) {
   const { auth, channelService, searchService, sendWs } = ctx
   const { channel_id, q, limit } = msg.body || {}