Merge feature/comment-system-separate-collection into main

Adds a full comment system using ATProto as storage backend:
- Comments stored as separate app.diffdown.comment records on user's PDS
- Threading via replyTo (full AT URI) with root/reply grouping
- Comment marks in ProseMirror editor (yellow highlight on anchored text)
- Resolve/reopen toggle; resolved comments lose their highlight
- Comments sorted by document position
- Real-time sync via WebSocket broadcast (comments_updated message)
- Comments sidebar with toggle button in toolbar
- Collaborators can comment on shared documents

cmd/server/main.go

···
 	mux.HandleFunc("GET /docs/{rkey}/accept", h.AcceptInvite)
 	mux.HandleFunc("POST /api/docs/{rkey}/comments", h.CommentCreate)
 	mux.HandleFunc("GET /api/docs/{rkey}/comments", h.CommentList)
+	mux.HandleFunc("PATCH /api/docs/{rkey}/comments/{commentId}", h.CommentUpdate)
 	mux.HandleFunc("POST /api/docs/{rkey}/steps", h.SubmitSteps)
 	mux.HandleFunc("GET /api/docs/{rkey}/steps", h.GetSteps)
 

internal/atproto/xrpc/client.go

···
 	return nil
 }
 
-const collectionDocument = "com.diffdown.document"
-
 // GetDocument fetches a document by its rkey.
 func (c *Client) GetDocument(rkey string) (*model.Document, error) {
-	value, _, err := c.GetRecord(c.session.DID, collectionDocument, rkey)
+	value, _, err := c.GetRecord(c.session.DID, model.CollectionDocument, rkey)
 	if err != nil {
 		return nil, err
 	}
···
 
 // PutDocument creates or updates a document.
 func (c *Client) PutDocument(rkey string, doc *model.Document) (string, string, error) {
-	return c.PutRecord(collectionDocument, rkey, doc)
+	return c.PutRecord(model.CollectionDocument, rkey, doc)
+}
+
+// ListComments lists all comment records for a given document.
+func (c *Client) ListComments(did, docRKey string, limit int, cursor string) ([]Record, string, error) {
+	records, nextCursor, err := c.ListRecords(did, model.CollectionComment, limit, cursor)
+	if err != nil {
+		return nil, "", err
+	}
+	var filtered []Record
+	for _, r := range records {
+		var comment model.CommentRecord
+		if err := json.Unmarshal(r.Value, &comment); err != nil {
+			continue
+		}
+		if comment.DocRKey == docRKey {
+			filtered = append(filtered, r)
+		}
+	}
+	return filtered, nextCursor, nil
+}
+
+// UpdateComment updates an existing comment record (e.g., for resolution toggle).
+func (c *Client) UpdateComment(rkey string, record interface{}) (uri, cid string, err error) {
+	return c.PutRecord(model.CollectionComment, rkey, record)
 }

internal/handler/handler.go

···
 		ThreadID   string `json:"threadId"`
 		QuotedText string `json:"quotedText"`
 		Text       string `json:"text"`
+		ReplyTo    string `json:"replyTo,omitempty"` // parent comment URI for threading
 	}
 	if err := json.NewDecoder(r.Body).Decode(&req); err != nil {
 		http.Error(w, "Invalid request", http.StatusBadRequest)
···
 		ownerDID = req.OwnerDID
 	}
 
+	// Verify document exists (but don't fetch full content)
 	ownerClient, err := h.xrpcClient(ownerUserID)
 	if err != nil {
 		http.Error(w, "Failed to connect to owner PDS", http.StatusInternalServerError)
 		return
 	}
-
-	value, _, err := ownerClient.GetRecord(ownerDID, collectionDocument, rKey)
+	_, _, err = ownerClient.GetRecord(ownerDID, model.CollectionDocument, rKey)
 	if err != nil {
 		log.Printf("CommentCreate: GetRecord: %v", err)
 		http.Error(w, "Document not found", http.StatusNotFound)
 		return
 	}
-	var doc model.Document
-	if err := json.Unmarshal(value, &doc); err != nil {
-		http.Error(w, "Failed to parse document", http.StatusInternalServerError)
-		return
-	}
 
 	authorHandle, _ := atproto.ResolveHandleFromDID(session.DID)
 
···
 		threadID = randomID()
 	}
 
-	comment := model.EmbeddedComment{
-		ID:           randomID(),
+	// Create standalone comment record
+	comment := model.CommentRecord{
 		ThreadID:     threadID,
+		DocRKey:      rKey,
+		DocOwnerDID:  ownerDID,
 		QuotedText:   req.QuotedText,
 		Text:         req.Text,
 		Author:       session.DID,
 		AuthorHandle: authorHandle,
 		CreatedAt:    time.Now().UTC().Format(time.RFC3339),
+		ReplyTo:      req.ReplyTo,
+		Resolved:     false,
 	}
-	doc.Comments = append(doc.Comments, comment)
 
-	if _, _, err := ownerClient.PutDocument(rKey, &doc); err != nil {
-		log.Printf("CommentCreate: PutDocument: %v", err)
-		http.Error(w, "Failed to save comment", http.StatusInternalServerError)
+	// Create as separate record in app.diffdown.comment collection
+	uri, _, err := ownerClient.CreateRecord(model.CollectionComment, comment)
+	if err != nil {
+		log.Printf("CommentCreate: CreateRecord: %v", err)
+		http.Error(w, "Failed to create comment", http.StatusInternalServerError)
 		return
 	}
 
-	h.jsonResponse(w, comment, http.StatusCreated)
+	// Return response with URI for potential reply linking
+	response := struct {
+		model.CommentRecord
+		URI string `json:"uri"`
+	}{CommentRecord: comment, URI: uri}
+
+	h.jsonResponse(w, response, http.StatusCreated)
+
+	if room := h.CollaborationHub.GetRoom(rKey); room != nil {
+		if data, err := json.Marshal(map[string]string{"type": "comments_updated"}); err == nil {
+			room.Broadcast(data)
+		}
+	}
 }
 
 func (h *Handler) CommentList(w http.ResponseWriter, r *http.Request) {
···
 		return
 	}
 
-	value, _, err := ownerClient.GetRecord(ownerDID, collectionDocument, rKey)
+	records, _, err := ownerClient.ListComments(ownerDID, rKey, 100, "")
+	if err != nil {
+		log.Printf("CommentList: ListComments: %v", err)
+		h.jsonResponse(w, []model.CommentRecord{}, http.StatusOK)
+		return
+	}
+
+	comments := make([]model.CommentRecord, 0, len(records))
+	for _, rec := range records {
+		var comment model.CommentRecord
+		if err := json.Unmarshal(rec.Value, &comment); err != nil {
+			log.Printf("CommentList: unmarshal comment: %v", err)
+			continue
+		}
+		comment.ID = model.RKeyFromURI(rec.URI)
+		comments = append(comments, comment)
+	}
+
+	h.jsonResponse(w, comments, http.StatusOK)
+}
+
+func (h *Handler) CommentUpdate(w http.ResponseWriter, r *http.Request) {
+	user, _ := h.currentUser(r)
+	if user == nil {
+		http.Error(w, "Unauthorized", http.StatusUnauthorized)
+		return
+	}
+
+	rKey := r.PathValue("rkey")
+	commentID := r.PathValue("commentId")
+	if rKey == "" || commentID == "" {
+		http.Error(w, "Invalid request", http.StatusBadRequest)
+		return
+	}
+
+	var req struct {
+		OwnerDID string `json:"ownerDID"`
+		Resolved bool   `json:"resolved"`
+	}
+	if err := json.NewDecoder(r.Body).Decode(&req); err != nil {
+		http.Error(w, "Invalid request", http.StatusBadRequest)
+		return
+	}
+
+	session, err := h.DB.GetATProtoSession(user.ID)
+	if err != nil || session == nil {
+		http.Error(w, "Not authenticated with ATProto", http.StatusUnauthorized)
+		return
+	}
+
+	ownerUserID := user.ID
+	ownerDID := session.DID
+	if req.OwnerDID != "" && req.OwnerDID != session.DID {
+		ownerUser, err := h.DB.GetUserByDID(req.OwnerDID)
+		if err != nil {
+			http.Error(w, "Owner not found", http.StatusBadRequest)
+			return
+		}
+		ownerUserID = ownerUser.ID
+		ownerDID = req.OwnerDID
+	}
+
+	ownerClient, err := h.xrpcClient(ownerUserID)
 	if err != nil {
-		log.Printf("CommentList: GetRecord: %v", err)
-		http.Error(w, "Document not found", http.StatusNotFound)
+		http.Error(w, "Failed to connect to owner PDS", http.StatusInternalServerError)
+		return
+	}
+
+	value, _, err := ownerClient.GetRecord(ownerDID, model.CollectionComment, commentID)
+	if err != nil {
+		log.Printf("CommentUpdate: GetRecord: %v", err)
+		http.Error(w, "Comment not found", http.StatusNotFound)
 		return
 	}
-	var doc model.Document
-	if err := json.Unmarshal(value, &doc); err != nil {
-		http.Error(w, "Failed to parse document", http.StatusInternalServerError)
+
+	var comment model.CommentRecord
+	if err := json.Unmarshal(value, &comment); err != nil {
+		http.Error(w, "Failed to parse comment", http.StatusInternalServerError)
+		return
+	}
+
+	comment.Resolved = req.Resolved
+
+	_, _, err = ownerClient.UpdateComment(commentID, comment)
+	if err != nil {
+		log.Printf("CommentUpdate: UpdateComment: %v", err)
+		http.Error(w, "Failed to update comment", http.StatusInternalServerError)
 		return
 	}
 
-	comments := doc.Comments
-	if comments == nil {
-		comments = []model.EmbeddedComment{}
+	h.jsonResponse(w, comment, http.StatusOK)
+
+	if room := h.CollaborationHub.GetRoom(rKey); room != nil {
+		if data, err := json.Marshal(map[string]string{"type": "comments_updated"}); err == nil {
+			room.Broadcast(data)
+		}
 	}
-	h.jsonResponse(w, comments, http.StatusOK)
 }
 
 // --- API: Render markdown ---

internal/model/models.go

···
 	CreatedAt    string `json:"createdAt"`    // RFC3339
 }
 
+type CommentRecord struct {
+	ID           string `json:"id"`                // record key (rkey)
+	ThreadID     string `json:"threadId"`          // groups replies into threads
+	DocRKey      string `json:"docRKey"`           // document rkey this comment belongs to
+	DocOwnerDID  string `json:"docOwnerDid"`       // owner DID for quick filtering
+	QuotedText   string `json:"quotedText"`        // text the comment was anchored to
+	Text         string `json:"text"`              // comment content
+	Author       string `json:"author"`            // DID
+	AuthorHandle string `json:"authorHandle"`      // resolved handle
+	CreatedAt    string `json:"createdAt"`         // RFC3339
+	ReplyTo      string `json:"replyTo,omitempty"` // parent comment URI (null for root)
+	Resolved     bool   `json:"resolved"`          // thread resolution state
+}
+
 type Invite struct {
 	ID           string    `json:"id"`
 	DocumentRKey string    `json:"document_rkey"`
···
 	}
 	return ""
 }
+
+const (
+	CollectionDocument = "com.diffdown.document"
+	CollectionComment  = "app.diffdown.comment"
+)

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/about.html

···
             <h2>Status</h2>
             <p>This app is alpha quality. Use at your own risk. Expect bugs, breaking changes, and limited features. However, any documents you create will be stored in your AT Proto account, so even if Diffdown goes away, you will still have your documents.</p>
             <p><strong class="warning">Important:</strong> Because AT Proto does not support private records (<a href="https://atproto.wiki/en/working-groups/private-data">yet</a>), any documents you create will be visible to anyone with the URL to the record (<a href="at://did:plc:za4vlvbizdstoym7lpymc5q5/com.diffdown.document/3mgncllbr7424">see this example</a>).</p>
+            <p>The app wasn't designed for mobile, so it is likely to be a very bad UX on small screens.</p>
             <h3>Roadmap</h3>
             <ul>
                 <li>Document versioning</li>

templates/document_edit.html

···
             <button class="btn btn-sm btn-outline source-only" id="btn-wrap" onclick="toggleWrap()">Wrap</button>
             <button class="btn btn-sm btn-outline rich-only" id="btn-undo" onclick="richUndo()" title="Undo (⌘Z)">↩</button>
             <button class="btn btn-sm btn-outline rich-only" id="btn-redo" onclick="richRedo()" title="Redo (⌘⇧Z)">↪</button>
+            {{if or .IsCollaborator .IsOwner}}<button class="btn btn-sm btn-outline active" id="btn-comments" onclick="toggleCommentSidebar()">Comments</button>{{end}}
             <button class="btn btn-sm btn-outline" id="btn-source" onclick="toggleSourceMode()">Source</button>
             <span id="save-status"></span>
             <button class="btn btn-sm" id="btn-save" onclick="saveDocument()">Save</button>
···
 
     <!-- Comment button (shown on paragraph hover/selection) -->
     <button id="comment-btn" class="comment-btn" style="display:none" onclick="openCommentForm()">Comment</button>
-
-    <!-- Comment form (floating) -->
-    <div id="comment-form" class="comment-form" style="display:none">
-        <textarea id="comment-text" placeholder="Add a comment..." rows="3"></textarea>
-        <div class="comment-form-actions">
-            <button class="btn btn-sm" onclick="submitComment()">Post</button>
-            <button class="btn btn-sm btn-outline" onclick="closeCommentForm()">Cancel</button>
-        </div>
-    </div>
 
     <!-- Link editing tooltip -->
     <div id="link-tooltip" class="link-tooltip">
···
     </div>
 </div>
 {{end}}
+
+<!-- Comment form (floating, outside editor-page so z-index beats sidebar) -->
+<div id="comment-form" class="comment-form" style="display:none">
+    <textarea id="comment-text" placeholder="Add a comment..." rows="3"></textarea>
+    <div class="comment-form-actions">
+        <button class="btn btn-sm" onclick="submitComment()">Post</button>
+        <button class="btn btn-sm btn-outline" onclick="closeCommentForm()">Cancel</button>
+    </div>
+</div>
 
 <!-- Comment sidebar -->
 {{if or .IsCollaborator .IsOwner}}
···
         }
     }
 
+    window.toggleCommentSidebar = function() {
+        const sidebar = document.getElementById('comment-sidebar');
+        const btn = document.getElementById('btn-comments');
+        if (!sidebar) return;
+        const isHidden = sidebar.style.display === 'none';
+        sidebar.style.display = isHidden ? '' : 'none';
+        // CSS :has(~ .comment-sidebar) still matches when sidebar is display:none,
+        // so override editor-page right manually.
+        const editorPage = document.querySelector('.editor-page');
+        if (editorPage) editorPage.style.right = isHidden ? '' : '0';
+        if (btn) btn.classList.toggle('active', isHidden);
+    };
+
     window.toggleSourceMode = async function() {
         const nextMode = currentMode === 'rich' ? 'source' : 'rich';
 
···
             case 'edit':
                 applyRemoteEdit(msg);   // legacy full-replace path
                 break;
+            case 'comments_updated':
+                loadComments();
+                break;
             case 'sync':
                 applyRemoteEdit(msg.content);  // sync is always full-content string
                 break;
···
         editorEl.addEventListener('keyup', onSelectionChange);
     }
 
+    let pendingReplyTo = null;   // set when replying to a comment
+    let pendingThreadId = null;  // threadId to inherit when replying
+
     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;
+        pendingThreadId = 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 (pendingThreadId) body.threadId = pendingThreadId;
             if (ownerDID) body.ownerDID = ownerDID;
             const resp = await fetch(`/api/docs/${rkey}/comments`, {
                 method: 'POST',
···
                 }
             }
             closeCommentForm();
+            pendingReplyTo = null;
+            pendingThreadId = null;
             loadComments();
         } catch (e) { console.error('Comment post failed:', e); }
     }
···
         } catch(e) { return false; }
     }
 
+    function findCommentMarkPos(threadId) {
+        if (!milkdownEditor) return Infinity;
+        try {
+            const pmView = milkdownEditor.action(ctx => ctx.get(editorViewCtx));
+            const { doc, schema } = pmView.state;
+            const markType = schema.marks.comment;
+            if (!markType) return Infinity;
+            let pos = Infinity;
+            doc.descendants((node, nodePos) => {
+                if (pos !== Infinity) return false;
+                if (node.marks.some(m => m.type === markType && m.attrs.threadId === threadId)) pos = nodePos;
+            });
+            return pos;
+        } catch(e) { return Infinity; }
+    }
+
+    function formatTime(ts) {
+        if (!ts) return '';
+        try { return new Date(ts).toLocaleString(); } catch { return ts; }
+    }
+
+    async function replyToComment(comment) {
+        if (!commentForm || !commentTextEl) return;
+        pendingCommentRange = { from: 0, to: 0, quotedText: '' };
+        pendingReplyTo = `at://${comment.docOwnerDid}/app.diffdown.comment/${comment.id}`;
+        pendingThreadId = comment.threadId;
+        commentTextEl.placeholder = `Replying to ${comment.authorHandle || comment.author}...`;
+        commentTextEl.value = '';
+        // comment-form is position:fixed; anchor to right edge of viewport near sidebar
+        commentForm.style.right = '8px';
+        commentForm.style.left = 'auto';
+        commentForm.style.top = '80px';
+        commentForm.style.display = 'block';
+        commentTextEl.focus();
+    }
+
+    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;
···
             return;
         }
 
-        // Group by threadId
-        const byThread = new Map();
+        const roots = [];
+        const replies = new Map();
         for (const c of comments) {
-            const tid = c.threadId || c.id;
-            if (!byThread.has(tid)) byThread.set(tid, { comments: [], quotedText: c.quotedText });
-            byThread.get(tid).comments.push(c);
+            if (c.replyTo) {
+                // replyTo is a full AT URI (at://did/collection/rkey); key by rkey only
+                const parentId = c.replyTo.split('/').pop();
+                if (!replies.has(parentId)) replies.set(parentId, []);
+                replies.get(parentId).push(c);
+            } else {
+                roots.push(c);
+            }
         }
 
-        container.textContent = '';
-        for (const [tid, { comments: thread, quotedText }] of byThread) {
-            const isDetached = !findCommentMark(tid);
+        roots.sort((a, b) => findCommentMarkPos(a.threadId || a.id) - findCommentMarkPos(b.threadId || b.id));
 
-            const threadDiv = document.createElement('div');
-            threadDiv.className = 'comment-thread' + (isDetached ? ' comment-thread-detached' : '');
-            threadDiv.dataset.thread = tid;
+        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);
+        }
+    }
 
-            const labelDiv = document.createElement('div');
-            labelDiv.className = 'comment-thread-label';
-            const labelText = quotedText
-                ? '\u201c' + (quotedText.length > 40 ? quotedText.slice(0, 40) + '\u2026' : 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);
-            }
-            threadDiv.appendChild(labelDiv);
+    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;
 
-            for (const c of thread) {
-                const item = document.createElement('div');
-                item.className = 'comment-item';
+        const headerDiv = document.createElement('div');
+        headerDiv.className = 'comment-thread-header';
 
-                const author = document.createElement('div');
-                author.className = 'comment-author';
-                author.textContent = c.authorHandle || c.author;
+        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 body = document.createElement('div');
-                body.className = 'comment-text';
-                body.textContent = c.text;
+        const resolveBtn = document.createElement('button');
+        resolveBtn.className = 'btn btn-sm ' + (rootComment.resolved ? 'btn-active' : 'btn-outline');
+        resolveBtn.textContent = rootComment.resolved ? 'Reopen' : 'Resolve';
+        resolveBtn.onclick = () => toggleResolve(rootComment.id, !rootComment.resolved);
+        headerDiv.appendChild(resolveBtn);
 
-                const time = document.createElement('div');
-                time.className = 'comment-time';
-                time.textContent = formatTime(c.createdAt);
+        threadDiv.appendChild(headerDiv);
 
-                item.appendChild(author);
-                item.appendChild(body);
-                item.appendChild(time);
-                threadDiv.appendChild(item);
-            }
+        threadDiv.appendChild(createCommentItem(rootComment, true));
 
-            container.appendChild(threadDiv);
+        for (const reply of replies) {
+            threadDiv.appendChild(createCommentItem(reply, false));
         }
+
+        return threadDiv;
     }
 
-    function formatTime(ts) {
-        if (!ts) return '';
-        try { return new Date(ts).toLocaleString(); } catch { return ts; }
+    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.addEventListener('click', e => { e.stopPropagation(); replyToComment(comment); });
+            item.appendChild(replyBtn);
+        }
+
+        item.appendChild(author);
+        item.appendChild(body);
+        item.appendChild(time);
+        return item;
     }
 
     async function loadComments() {
···
 
     // Re-anchor comment marks after load by searching for quotedText in the doc
     function reanchorCommentMarks(comments) {
-        if (!milkdownEditor || !comments || comments.length === 0) return;
+        if (!milkdownEditor) return;
         try {
             const pmView = milkdownEditor.action(ctx => ctx.get(editorViewCtx));
             const { doc, schema } = pmView.state;
             const markType = schema.marks.comment;
             if (!markType) return;
-            let tr = pmView.state.tr;
-            let changed = false;
-            for (const c of comments) {
+            // Clear all comment marks first, then re-add only for unresolved comments.
+            // This ensures resolving a comment removes its highlight on the next load.
+            let tr = pmView.state.tr.removeMark(0, doc.content.size, markType);
+            for (const c of comments || []) {
+                if (c.resolved) continue;
                 const threadId = c.threadId || c.id;
                 if (!c.quotedText) continue;
                 const pos = findTextInDoc(doc, c.quotedText);
                 if (pos === -1) continue;
                 tr = tr.addMark(pos, pos + c.quotedText.length, markType.create({ threadId }));
-                changed = true;
             }
-            if (changed) pmView.dispatch(tr);
+            pmView.dispatch(tr);
         } catch(e) { console.error('reanchorCommentMarks:', e); }
     }