feat(frontend): source mode uses CollabClient step protocol instead of full-replace

templates/document_edit.html

···
         listener, listenerCtx,
         history, undoCommand, redoCommand, callCommand,
     } from '/static/vendor/milkdown.js';
+    import { CollabClient } from '/static/collab-client.js';
 
     const textarea = document.getElementById('editor-textarea');
     const previewEl = document.getElementById('preview');
···
     const accessToken = '{{.Content.AccessToken}}';
     const isCollaborator = {{if .Content.IsCollaborator}}true{{else}}false{{end}};
     const ownerDID = '{{.Content.OwnerDID}}'; // empty string when current user is owner
+
+    // Fetch the authoritative step version for this document.
+    let serverVersion = 0;
+    try {
+        const vResp = await fetch(`/api/docs/${rkey}/steps?since=0`);
+        if (vResp.ok) {
+            const vData = await vResp.json();
+            serverVersion = vData.version || 0;
+        }
+    } catch(e) { /* start at 0 */ }
+
+    const myClientID = accessToken || Math.random().toString(36).slice(2);
 
     const STORAGE_KEY = 'editor-mode';
     let currentMode = localStorage.getItem(STORAGE_KEY) || 'rich'; // 'rich' | 'source'
···
                             deltas.push({ from: fromA, to: toA, insert: inserted.toString() });
                         });
                         if (deltas.length > 0) {
-                            queueDeltas(deltas);
+                            const pmSteps = deltas.map(d => ({type: 'text-patch', from: d.from, to: d.to, insert: d.insert}));
+                            collabClient.sendSteps(pmSteps);
                         }
                     }
                 }
···
         ],
         parent: document.getElementById('editor'),
     });
+
+    // ── CollabClient (step-authority protocol) ────────────────────────────────
+
+    // Guard against applying a remote edit while we're already applying one
+    // (prevents echo loops). Moved here from the WebSocket section so collabClient
+    // can reference it during initialization.
+    let applyingRemote = false;
+
+    const collabClient = new CollabClient(rkey, serverVersion, (remoteSteps) => {
+        // Apply text-patch steps to CM without triggering our own send.
+        if (currentMode !== 'source' || !cmView) return;
+        const changes = [];
+        let offset = 0;
+        for (const step of remoteSteps) {
+            if (step.type !== 'text-patch') continue;
+            const from = step.from + offset;
+            const to   = step.to   + offset;
+            const insert = step.insert || '';
+            changes.push({ from, to, insert });
+            offset += insert.length - (step.to - step.from);
+        }
+        if (changes.length === 0) return;
+        applyingRemote = true;
+        try {
+            cmView.dispatch({
+                changes,
+                annotations: [remoteEditAnnotation.of(true)],
+            });
+        } finally {
+            applyingRemote = false;
+        }
+    });
+    collabClient.setClientID(myClientID);
 
     async function updatePreview(content) {
         try {
···
 
         ws.onclose = () => {
             clearTimeout(wsEditTimer);
-            pendingDeltas = [];
             stopHeartbeat();
             ws = null;
             updatePresence([]);
···
         clearInterval(wsPingTimer);
     }
 
-    // Guard against applying a remote edit while we're already applying one
-    // (prevents echo loops).
-    let applyingRemote = false;
-
     function handleWSMessage(msg) {
         switch (msg.type) {
             case 'presence':
···
             case 'pong':
                 wsMissedPings = 0;
                 break;
+            case 'steps':
+                collabClient.handleWSMessage(msg, myClientID);
+                break;
             case 'edit':
-                applyRemoteEdit(msg);   // pass full message object
+                applyRemoteEdit(msg);   // legacy full-replace path
                 break;
             case 'sync':
                 applyRemoteEdit(msg.content);  // sync is always full-content string
···
     }
 
     function applyRemoteEdit(msg) {
-        // msg may be a full-content string (legacy sync path) or an object with content.
+        // Legacy sync fallback — only used for 'sync' and legacy 'edit' message types.
+        // Remote edits via the new step protocol go through CollabClient instead.
         if (applyingRemote) return;
-        applyingRemote = true;
-        try {
-            // Always use the server's authoritative content echo for applying remote edits.
-            // Attempting to apply deltas directly is unreliable because the positions in
-            // the delta batch are relative to the sender's pre-change document, not the
-            // receiver's current state (which may have diverged).
-            const content = typeof msg === 'string' ? msg : msg.content;
-            if (!content) return;
+        const content = typeof msg === 'string' ? msg : msg.content;
+        if (!content) return;
 
-            if (currentMode === 'source' && cmView) {
-                if (cmView.state.doc.toString() !== content) {
+        if (currentMode === 'source' && cmView) {
+            if (cmView.state.doc.toString() !== content) {
+                applyingRemote = true;
+                try {
                     cmView.dispatch({
                         changes: { from: 0, to: cmView.state.doc.length, insert: content },
                         annotations: [remoteEditAnnotation.of(true)],
                     });
+                } finally {
+                    applyingRemote = false;
                 }
                 updatePreview(content);
-            } else if (currentMode === 'rich' && milkdownEditor) {
-                createMilkdownEditor(content);
             }
-        } finally {
-            applyingRemote = false;
         }
+        // Rich mode no longer falls back to full recreate here;
+        // remote steps are applied via CollabClient in Task 8.
     }
 
     // Debounce timer for WebSocket sends (50ms batches rapid keystrokes).