feat: add WebSocket client, presence sidebar, and comment UI

internal/handler/handler.go

···
 	OGImage     string
 }
 
+// DocumentEditData is passed to document_edit.html.
+type DocumentEditData struct {
+	*model.Document
+	// AccessToken is the ATProto access token for WebSocket auth.
+	// Empty string if user has no ATProto session.
+	AccessToken string
+	// IsCollaborator is true when the current user is in the collaborators list.
+	IsCollaborator bool
+}
+
 func (h *Handler) currentUser(r *http.Request) *model.User {
 	uid := auth.UserIDFromContext(r.Context())
 	if uid == "" {
···
 	}
 	doc.RKey = rkey
 
+	// Fetch ATProto session to pass access token to the WebSocket client.
+	editData := &DocumentEditData{Document: doc}
+	if session, err := h.DB.GetATProtoSession(user.ID); err == nil && session != nil {
+		editData.AccessToken = session.AccessToken
+		// Check if this user is listed as a collaborator on the doc.
+		userDID := session.DID
+		for _, did := range doc.Collaborators {
+			if did == userDID {
+				editData.IsCollaborator = true
+				break
+			}
+		}
+	}
+
 	h.render(w, "document_edit.html", PageData{
 		Title:   "Edit " + doc.Title,
 		User:    user,
-		Content: doc,
+		Content: editData,
 	})
 }
 

static/css/editor.css

···
 }
 
 .link-tooltip button:hover { opacity: 0.8; }
+
+/* ── Collaboration: Presence ─────────────────────────────────────────────── */
+
+.presence-list {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+}
+
+.presence-avatar {
+    display: inline-block;
+    width: 22px;
+    height: 22px;
+    border-radius: 50%;
+    border: 2px solid var(--bg-card);
+    box-shadow: 0 0 0 1px var(--border);
+    flex-shrink: 0;
+    transition: transform 0.15s;
+}
+
+.presence-avatar:hover {
+    transform: scale(1.15);
+}
+
+/* ── Collaboration: Comment sidebar ──────────────────────────────────────── */
+
+.comment-sidebar {
+    position: fixed;
+    right: 0;
+    top: 49px; /* below navbar */
+    bottom: 0;
+    width: 260px;
+    background: var(--bg-card);
+    border-left: 1px solid var(--border);
+    display: flex;
+    flex-direction: column;
+    z-index: 50;
+    overflow: hidden;
+}
+
+.comment-sidebar-header {
+    padding: 0.75rem 1rem;
+    font-size: 0.85rem;
+    font-weight: 600;
+    border-bottom: 1px solid var(--border);
+    flex-shrink: 0;
+    color: var(--text-muted);
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+}
+
+.comment-threads {
+    flex: 1;
+    overflow-y: auto;
+    padding: 0.75rem;
+    display: flex;
+    flex-direction: column;
+    gap: 0.75rem;
+}
+
+.comment-empty {
+    color: var(--text-muted);
+    font-size: 0.85rem;
+    text-align: center;
+    margin-top: 2rem;
+}
+
+.comment-thread {
+    background: var(--bg);
+    border: 1px solid var(--border);
+    border-radius: var(--radius);
+    overflow: hidden;
+}
+
+.comment-thread-label {
+    font-size: 0.75rem;
+    color: var(--text-muted);
+    padding: 0.3rem 0.6rem;
+    background: var(--border);
+    border-bottom: 1px solid var(--border);
+}
+
+.comment-item {
+    padding: 0.5rem 0.6rem;
+    border-top: 1px solid var(--border);
+}
+
+.comment-item:first-of-type {
+    border-top: none;
+}
+
+.comment-author {
+    font-size: 0.75rem;
+    font-weight: 600;
+    color: var(--primary);
+    margin-bottom: 0.2rem;
+}
+
+.comment-text {
+    font-size: 0.85rem;
+    line-height: 1.45;
+    word-break: break-word;
+}
+
+.comment-time {
+    font-size: 0.7rem;
+    color: var(--text-muted);
+    margin-top: 0.25rem;
+}
+
+/* ── Collaboration: Comment button & form ────────────────────────────────── */
+
+.comment-btn {
+    position: fixed;
+    z-index: 100;
+    padding: 0.25rem 0.6rem;
+    font-size: 0.78rem;
+    background: var(--primary);
+    color: #fff;
+    border: none;
+    border-radius: var(--radius);
+    cursor: pointer;
+    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
+}
+
+.comment-btn:hover {
+    opacity: 0.88;
+}
+
+.comment-form {
+    position: fixed;
+    z-index: 110;
+    background: var(--bg-card);
+    border: 1px solid var(--border);
+    border-radius: var(--radius);
+    box-shadow: 0 4px 20px rgba(0,0,0,0.15);
+    padding: 0.75rem;
+    width: 280px;
+}
+
+.comment-form textarea {
+    width: 100%;
+    box-sizing: border-box;
+    background: var(--bg);
+    border: 1px solid var(--border);
+    border-radius: var(--radius);
+    color: var(--text);
+    padding: 0.4rem 0.5rem;
+    font-size: 0.85rem;
+    resize: vertical;
+    outline: none;
+    font-family: inherit;
+}
+
+.comment-form textarea:focus {
+    border-color: var(--primary);
+}
+
+.comment-form-actions {
+    display: flex;
+    gap: 0.5rem;
+    margin-top: 0.5rem;
+    justify-content: flex-end;
+}
+
+/* When comment sidebar is visible, shrink editor to avoid overlap */
+.editor-page:has(~ .comment-sidebar) {
+    right: 260px;
+}

templates/document_edit.html

···
             <input type="text" id="doc-title" value="{{.Title}}" placeholder="Document title" class="title-input">
         </div>
         <div class="toolbar-actions">
+            {{if .IsCollaborator}}
+            <div id="presence-list" class="presence-list" title="Active collaborators"></div>
+            {{end}}
             <button class="btn btn-sm btn-outline source-only active" id="btn-preview" onclick="togglePreview()">Preview</button>
             <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>
···
     <!-- Rich text editor (default) -->
     <div id="editor-rich" class="editor-rich"></div>
 
+    <!-- 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">
         <input type="url" id="link-tooltip-input" placeholder="https://" spellcheck="false">
···
         </div>
     </div>
 </div>
+
+<!-- Comment sidebar -->
+{{if .IsCollaborator}}
+<div id="comment-sidebar" class="comment-sidebar">
+    <div class="comment-sidebar-header">Comments</div>
+    <div id="comment-threads" class="comment-threads"></div>
+</div>
+{{end}}
 {{end}}
 {{end}}
 
···
     const saveStatus = document.getElementById('save-status');
     const titleInput = document.getElementById('doc-title');
     const rkey = '{{.Content.RKey}}';
+    const accessToken = '{{.Content.AccessToken}}';
+    const isCollaborator = {{if .Content.IsCollaborator}}true{{else}}false{{end}};
 
     const STORAGE_KEY = 'editor-mode';
     let currentMode = localStorage.getItem(STORAGE_KEY) || 'rich'; // 'rich' | 'source'
···
         }
     });
 
+    // ── WebSocket / Collaboration ─────────────────────────────────────────────
+
+    let ws = null;
+    let wsReconnectDelay = 1000;
+    let wsReconnectTimer = null;
+    let wsPingTimer = null;
+    let wsMissedPings = 0;
+
+    function connectWebSocket() {
+        if (!isCollaborator || !accessToken) return;
+
+        const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
+        const wsUrl = `${protocol}//${window.location.host}/ws/doc/${rkey}?access_token=${encodeURIComponent(accessToken)}&dpop_proof=placeholder`;
+
+        ws = new WebSocket(wsUrl);
+
+        ws.onopen = () => {
+            wsReconnectDelay = 1000;
+            wsMissedPings = 0;
+            startHeartbeat();
+        };
+
+        ws.onmessage = (event) => {
+            try {
+                const msg = JSON.parse(event.data);
+                handleWSMessage(msg);
+            } catch (e) {
+                console.error('WS parse error:', e);
+            }
+        };
+
+        ws.onclose = () => {
+            stopHeartbeat();
+            updatePresence([]);
+            scheduleReconnect();
+        };
+
+        ws.onerror = () => {
+            ws.close();
+        };
+    }
+
+    function scheduleReconnect() {
+        clearTimeout(wsReconnectTimer);
+        wsReconnectTimer = setTimeout(() => {
+            connectWebSocket();
+            wsReconnectDelay = Math.min(wsReconnectDelay * 2, 30000);
+        }, wsReconnectDelay);
+    }
+
+    function startHeartbeat() {
+        stopHeartbeat();
+        wsPingTimer = setInterval(() => {
+            if (ws && ws.readyState === WebSocket.OPEN) {
+                ws.send(JSON.stringify({ type: 'ping' }));
+                wsMissedPings++;
+                if (wsMissedPings >= 3) {
+                    ws.close();
+                }
+            }
+        }, 30000);
+    }
+
+    function stopHeartbeat() {
+        clearInterval(wsPingTimer);
+    }
+
+    function handleWSMessage(msg) {
+        switch (msg.type) {
+            case 'presence':
+                updatePresence(msg.users || []);
+                break;
+            case 'pong':
+                wsMissedPings = 0;
+                break;
+            case 'sync':
+                // On reconnect, server sends current state — only apply if editor is idle
+                break;
+        }
+    }
+
+    // ── Presence ──────────────────────────────────────────────────────────────
+
+    function updatePresence(users) {
+        const list = document.getElementById('presence-list');
+        if (!list) return;
+        list.innerHTML = users.map(u => `
+            <span class="presence-avatar" style="background:${u.color}" title="${escHtml(u.name || u.did)}"></span>
+        `).join('');
+    }
+
+    function escHtml(str) {
+        return String(str).replace(/[&<>"']/g, c => ({'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;',"'":'&#39;'}[c]));
+    }
+
+    // ── Comments ──────────────────────────────────────────────────────────────
+
+    let activeCommentParagraphId = null;
+
+    const commentBtn = document.getElementById('comment-btn');
+    const commentForm = document.getElementById('comment-form');
+    const commentTextEl = document.getElementById('comment-text');
+
+    function openCommentForm() {
+        if (!commentBtn || !commentForm) return;
+        const rect = commentBtn.getBoundingClientRect();
+        commentForm.style.top = rect.bottom + window.scrollY + 4 + 'px';
+        commentForm.style.left = Math.max(8, rect.left) + 'px';
+        commentForm.style.display = 'block';
+        commentTextEl.value = '';
+        commentTextEl.focus();
+    }
+
+    function closeCommentForm() {
+        if (commentForm) commentForm.style.display = 'none';
+        if (commentBtn) commentBtn.style.display = 'none';
+        activeCommentParagraphId = null;
+    }
+
+    async function submitComment() {
+        if (!activeCommentParagraphId) return;
+        const text = commentTextEl.value.trim();
+        if (!text) return;
+
+        try {
+            const resp = await fetch(`/api/docs/${rkey}/comments`, {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({ paragraphId: activeCommentParagraphId, text }),
+            });
+            if (!resp.ok) throw new Error(await resp.text());
+            closeCommentForm();
+            loadComments();
+        } catch (e) {
+            console.error('Comment post failed:', e);
+        }
+    }
+
+    commentTextEl && commentTextEl.addEventListener('keydown', e => {
+        if (e.key === 'Enter' && (e.metaKey || e.ctrlKey)) submitComment();
+        if (e.key === 'Escape') closeCommentForm();
+    });
+
+    // Close comment form on outside click
+    document.addEventListener('click', e => {
+        if (commentForm && commentForm.style.display !== 'none') {
+            if (!commentForm.contains(e.target) && e.target !== commentBtn) {
+                closeCommentForm();
+            }
+        }
+    });
+
+    function renderCommentThreads(comments) {
+        const container = document.getElementById('comment-threads');
+        if (!container) return;
+
+        if (!comments || comments.length === 0) {
+            container.innerHTML = '<p class="comment-empty">No comments yet.</p>';
+            return;
+        }
+
+        // Group by paragraphId
+        const byParagraph = {};
+        for (const c of comments) {
+            const pid = c.paragraphId || 'general';
+            if (!byParagraph[pid]) byParagraph[pid] = [];
+            byParagraph[pid].push(c);
+        }
+
+        container.innerHTML = Object.entries(byParagraph).map(([pid, thread]) => `
+            <div class="comment-thread" data-paragraph="${escHtml(pid)}">
+                <div class="comment-thread-label">¶ ${escHtml(pid)}</div>
+                ${thread.map(c => `
+                    <div class="comment-item">
+                        <div class="comment-author">${escHtml(c.authorName || c.author)}</div>
+                        <div class="comment-text">${escHtml(c.text)}</div>
+                        <div class="comment-time">${formatTime(c.createdAt)}</div>
+                    </div>
+                `).join('')}
+            </div>
+        `).join('');
+    }
+
+    function formatTime(ts) {
+        if (!ts) return '';
+        try { return new Date(ts).toLocaleString(); } catch { return ts; }
+    }
+
+    async function loadComments() {
+        if (!isCollaborator) return;
+        try {
+            const resp = await fetch(`/api/docs/${rkey}/comments`);
+            if (!resp.ok) return;
+            const comments = await resp.json();
+            renderCommentThreads(comments);
+        } catch (e) {
+            console.error('Load comments failed:', e);
+        }
+    }
+
     // ── Init ──────────────────────────────────────────────────────────────────
 
     const initialMarkdown = textarea.value;
···
     }
 
     applyMode(currentMode);
+
+    // Start collaboration features
+    if (isCollaborator) {
+        connectWebSocket();
+        loadComments();
+    }
 </script>
 {{end}}