frontend: add threading and resolution to comments

static/css/editor.css

···
 .invite-modal-body {
     padding: 1rem;
 }
+
+/* Comment threading */
+.comment-thread-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding-bottom: 8px;
+    border-bottom: 1px solid var(--border-color);
+    margin-bottom: 8px;
+}
+
+.comment-item-reply {
+    margin-left: 24px;
+    padding-left: 12px;
+    border-left: 2px solid var(--border-color);
+}
+
+.btn-active {
+    background-color: var(--success-color);
+    color: white;
+}

templates/document_edit.html

···
         editorEl.addEventListener('keyup', onSelectionChange);
     }
 
+    let pendingReplyTo = null;  // set when replying to a comment
+
     window.openCommentForm = function openCommentForm() {
         if (!commentBtn || !commentForm || !milkdownEditor) return;
         try {
···
             if (selection.empty) return;
             pendingCommentRange = { from: selection.from, to: selection.to,
                 quotedText: doc.textBetween(selection.from, selection.to, ' ') };
+            pendingReplyTo = null;
+            commentTextEl.placeholder = 'Add a comment...';
             const rect = commentBtn.getBoundingClientRect();
             commentForm.style.top = (rect.bottom + window.scrollY + 4) + 'px';
             commentForm.style.left = Math.max(8, rect.left + window.scrollX) + 'px';
···
         if (commentForm) commentForm.style.display = 'none';
         if (commentBtn) commentBtn.style.display = 'none';
         pendingCommentRange = null;
+        pendingReplyTo = null;
+        if (commentTextEl) commentTextEl.placeholder = 'Add a comment...';
     }
 
     window.submitComment = async function submitComment() {
···
         const { from, to, quotedText } = pendingCommentRange;
         try {
             const body = { quotedText, text };
+            if (pendingReplyTo) body.replyTo = pendingReplyTo;
             if (ownerDID) body.ownerDID = ownerDID;
             const resp = await fetch(`/api/docs/${rkey}/comments`, {
                 method: 'POST',
···
                 }
             }
             closeCommentForm();
+            pendingReplyTo = null;
             loadComments();
         } catch (e) { console.error('Comment post failed:', e); }
     }
···
     function formatTime(ts) {
         if (!ts) return '';
         try { return new Date(ts).toLocaleString(); } catch { return ts; }
+    }
+
+    async function replyToComment(comment) {
+        pendingReplyTo = `at://${comment.docOwnerDid}/app.diffdown.comment/${comment.id}`;
+        if (commentTextEl) commentTextEl.placeholder = `Replying to ${comment.authorHandle || comment.author}...`;
+        openCommentForm();
+    }
+
+    async function toggleResolve(threadId, resolved) {
+        try {
+            const body = { resolved };
+            if (ownerDID) body.ownerDID = ownerDID;
+            await fetch(`/api/docs/${rkey}/comments/${threadId}`, {
+                method: 'PATCH',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify(body),
+            });
+            loadComments();
+        } catch (e) {
+            console.error('Toggle resolve failed:', e);
+        }
+    }
+
+    function renderCommentThreads(comments) {
+        const container = document.getElementById('comment-threads');
+        if (!container) return;
+
+        if (!comments || comments.length === 0) {
+            container.textContent = '';
+            const empty = document.createElement('p');
+            empty.className = 'comment-empty';
+            empty.textContent = 'No comments yet.';
+            container.appendChild(empty);
+            return;
+        }
+
+        const roots = [];
+        const replies = new Map();
+        for (const c of comments) {
+            if (c.replyTo) {
+                if (!replies.has(c.replyTo)) replies.set(c.replyTo, []);
+                replies.get(c.replyTo).push(c);
+            } else {
+                roots.push(c);
+            }
+        }
+
+        container.textContent = '';
+        for (const root of roots) {
+            const threadId = root.threadId || root.id;
+            const threadReplies = replies.get(root.id) || [];
+            const threadEl = createCommentThreadElement(threadId, root, threadReplies);
+            container.appendChild(threadEl);
+        }
+    }
+
+    function createCommentThreadElement(threadId, rootComment, replies) {
+        const isDetached = !findCommentMark(threadId);
+        const threadDiv = document.createElement('div');
+        threadDiv.className = 'comment-thread' + (isDetached ? ' comment-thread-detached' : '');
+        threadDiv.dataset.thread = threadId;
+
+        const headerDiv = document.createElement('div');
+        headerDiv.className = 'comment-thread-header';
+
+        const labelDiv = document.createElement('div');
+        labelDiv.className = 'comment-thread-label';
+        const labelText = rootComment.quotedText
+            ? '\u201c' + (rootComment.quotedText.length > 40 ? rootComment.quotedText.slice(0, 40) + '\u2026' : rootComment.quotedText) + '\u201d'
+            : '(no anchor)';
+        labelDiv.textContent = labelText;
+        if (isDetached) {
+            const warn = document.createElement('span');
+            warn.title = 'Text was deleted';
+            warn.textContent = ' \u26a0';
+            labelDiv.appendChild(warn);
+        }
+        headerDiv.appendChild(labelDiv);
+
+        const resolveBtn = document.createElement('button');
+        resolveBtn.className = 'btn btn-sm ' + (rootComment.resolved ? 'btn-active' : 'btn-outline');
+        resolveBtn.textContent = rootComment.resolved ? 'Resolved' : 'Resolve';
+        resolveBtn.onclick = () => toggleResolve(threadId, !rootComment.resolved);
+        headerDiv.appendChild(resolveBtn);
+
+        threadDiv.appendChild(headerDiv);
+
+        threadDiv.appendChild(createCommentItem(rootComment, true));
+
+        for (const reply of replies) {
+            threadDiv.appendChild(createCommentItem(reply, false));
+        }
+
+        return threadDiv;
+    }
+
+    function createCommentItem(comment, isRoot) {
+        const item = document.createElement('div');
+        item.className = 'comment-item' + (isRoot ? '' : ' comment-item-reply');
+
+        const author = document.createElement('div');
+        author.className = 'comment-author';
+        author.textContent = comment.authorHandle || comment.author;
+
+        const body = document.createElement('div');
+        body.className = 'comment-text';
+        body.textContent = comment.text;
+
+        const time = document.createElement('div');
+        time.className = 'comment-time';
+        time.textContent = formatTime(comment.createdAt);
+
+        if (isRoot) {
+            const replyBtn = document.createElement('button');
+            replyBtn.className = 'btn btn-sm btn-link';
+            replyBtn.textContent = 'Reply';
+            replyBtn.onclick = () => replyToComment(comment);
+            item.appendChild(replyBtn);
+        }
+
+        item.appendChild(author);
+        item.appendChild(body);
+        item.appendChild(time);
+        return item;
     }
 
     async function loadComments() {