Update index.html

index.html

@@ -84,12 +84,7 @@
     letter-spacing: 0.5px;
   }
 
-  .toolbar-divider {
-    width: 1px;
-    height: 20px;
-    background: var(--border);
-    flex-shrink: 0;
-  }
+  .toolbar-divider { width: 1px; height: 20px; background: var(--border); flex-shrink: 0; }
 
   #doc-title {
     flex: 1;
@@ -105,428 +100,194 @@
     border-radius: var(--radius-sm);
     transition: background 0.15s, border-color 0.15s;
   }
-
   #doc-title:hover { background: var(--surface2); border-color: var(--border); }
   #doc-title:focus { background: var(--surface2); border-color: var(--border-strong); }
 
-  .toolbar-right {
-    display: flex;
-    align-items: center;
-    gap: 10px;
-    flex-shrink: 0;
-  }
+  .toolbar-right { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
 
-  /* Version chip */
   #version-chip {
-    font-size: 11px;
-    font-weight: 500;
-    color: var(--text-light);
-    background: var(--surface2);
-    border: 1px solid var(--border);
-    border-radius: 20px;
-    padding: 3px 9px;
-    white-space: nowrap;
+    font-size: 11px; font-weight: 500; color: var(--text-light);
+    background: var(--surface2); border: 1px solid var(--border);
+    border-radius: 20px; padding: 3px 9px; white-space: nowrap;
     font-variant-numeric: tabular-nums;
   }
 
-  /* Status badge */
   #status-badge {
-    display: flex;
-    align-items: center;
-    gap: 5px;
-    font-size: 12px;
-    font-weight: 500;
-    padding: 4px 10px;
-    border-radius: 20px;
-    border: 1px solid var(--border);
-    background: var(--surface2);
-    color: var(--text-muted);
-    transition: all 0.25s;
-    white-space: nowrap;
-  }
-
-  #status-badge.connected {
-    color: var(--accent);
-    background: var(--accent-dim);
-    border-color: #A8DDB8;
-  }
-
-  #status-badge.error {
-    color: var(--danger);
-    background: #FDEAEA;
-    border-color: #EAB0B0;
-  }
-
-  .status-dot {
-    width: 6px; height: 6px;
-    border-radius: 50%;
-    background: currentColor;
+    display: flex; align-items: center; gap: 5px;
+    font-size: 12px; font-weight: 500;
+    padding: 4px 10px; border-radius: 20px;
+    border: 1px solid var(--border); background: var(--surface2);
+    color: var(--text-muted); transition: all 0.25s; white-space: nowrap;
   }
+  #status-badge.connected { color: var(--accent); background: var(--accent-dim); border-color: #A8DDB8; }
+  #status-badge.error     { color: var(--danger); background: #FDEAEA; border-color: #EAB0B0; }
 
+  .status-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
   .status-dot.pulse { animation: dot-pulse 2s ease-in-out infinite; }
 
   @keyframes dot-pulse {
     0%, 100% { opacity: 1; transform: scale(1); }
-    50% { opacity: 0.5; transform: scale(0.85); }
+    50%       { opacity: 0.5; transform: scale(0.85); }
   }
 
-  /* User avatars */
-  #user-avatars {
-    display: flex;
-    align-items: center;
-  }
+  #user-avatars { display: flex; align-items: center; }
 
   .avatar {
-    width: 28px; height: 28px;
-    border-radius: 50%;
+    width: 28px; height: 28px; border-radius: 50%;
     display: flex; align-items: center; justify-content: center;
-    font-size: 11px;
-    font-weight: 700;
-    color: white;
-    border: 2px solid var(--surface);
-    margin-left: -7px;
-    cursor: default;
-    position: relative;
+    font-size: 11px; font-weight: 700; color: white;
+    border: 2px solid var(--surface); margin-left: -7px;
+    cursor: default; position: relative;
     transition: transform 0.15s, z-index 0s;
-    box-shadow: 0 1px 4px rgba(0,0,0,0.15);
-    text-transform: uppercase;
+    box-shadow: 0 1px 4px rgba(0,0,0,0.15); text-transform: uppercase;
   }
-
   .avatar:first-child { margin-left: 0; }
-
-  .avatar:hover {
-    transform: translateY(-2px);
-    z-index: 20;
-  }
+  .avatar:hover { transform: translateY(-2px); z-index: 20; }
 
   .avatar-tip {
-    position: absolute;
-    bottom: calc(100% + 7px);
-    left: 50%;
-    transform: translateX(-50%);
-    background: var(--text);
-    color: #fff;
-    font-size: 11px;
-    font-weight: 500;
-    padding: 3px 8px;
-    border-radius: 4px;
-    white-space: nowrap;
-    opacity: 0;
-    pointer-events: none;
-    transition: opacity 0.15s;
+    position: absolute; bottom: calc(100% + 7px); left: 50%;
+    transform: translateX(-50%); background: var(--text); color: #fff;
+    font-size: 11px; font-weight: 500; padding: 3px 8px; border-radius: 4px;
+    white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity 0.15s;
   }
-
   .avatar-tip::after {
-    content: '';
-    position: absolute;
-    top: 100%;
-    left: 50%;
-    transform: translateX(-50%);
-    border: 4px solid transparent;
+    content: ''; position: absolute; top: 100%; left: 50%;
+    transform: translateX(-50%); border: 4px solid transparent;
     border-top-color: var(--text);
   }
-
   .avatar:hover .avatar-tip { opacity: 1; }
 
-  /* Buttons */
   .btn {
-    display: inline-flex;
-    align-items: center;
-    gap: 5px;
-    padding: 6px 12px;
-    border-radius: var(--radius-sm);
-    font-family: var(--font-sans);
-    font-size: 13px;
-    font-weight: 500;
-    cursor: pointer;
-    border: 1px solid transparent;
-    transition: all 0.15s;
-    white-space: nowrap;
-    line-height: 1;
+    display: inline-flex; align-items: center; gap: 5px;
+    padding: 6px 12px; border-radius: var(--radius-sm);
+    font-family: var(--font-sans); font-size: 13px; font-weight: 500;
+    cursor: pointer; border: 1px solid transparent;
+    transition: all 0.15s; white-space: nowrap; line-height: 1;
   }
-
-  .btn-ghost {
-    background: var(--surface2);
-    border-color: var(--border);
-    color: var(--text-muted);
-  }
-
+  .btn-ghost { background: var(--surface2); border-color: var(--border); color: var(--text-muted); }
   .btn-ghost:hover { background: var(--surface3); color: var(--text); }
-
-  .btn-primary {
-    background: var(--accent);
-    color: white;
-  }
-
-  .btn-primary:hover {
-    background: var(--accent-hover);
-    transform: translateY(-1px);
-    box-shadow: var(--shadow);
-  }
-
+  .btn-primary { background: var(--accent); color: white; }
+  .btn-primary:hover { background: var(--accent-hover); transform: translateY(-1px); box-shadow: var(--shadow); }
   .btn-primary:active { transform: translateY(0); box-shadow: none; }
 
   /* ── Main layout ── */
-  #main {
-    flex: 1;
-    display: flex;
-    justify-content: center;
-    padding: 40px 20px 80px;
-  }
+  #main { flex: 1; display: flex; justify-content: center; padding: 40px 20px 80px; }
+  #page-wrap { width: 100%; max-width: 800px; }
 
-  #page-wrap {
-    width: 100%;
-    max-width: 800px;
-  }
-
-  /* Document page */
   #page {
-    background: var(--surface);
-    border-radius: 2px;
-    box-shadow: var(--shadow-page);
-    position: relative;
-    min-height: 80vh;
+    background: var(--surface); border-radius: 2px;
+    box-shadow: var(--shadow-page); position: relative; min-height: 80vh;
   }
 
-  /* Remote cursor overlay */
   #cursor-layer {
-    position: absolute;
-    inset: 0;
-    pointer-events: none;
-    overflow: hidden;
-    z-index: 5;
-    border-radius: 2px;
+    position: absolute; inset: 0; pointer-events: none;
+    overflow: hidden; z-index: 5; border-radius: 2px;
   }
 
-  .r-cursor {
-    position: absolute;
-    pointer-events: none;
-    will-change: left, top;
-  }
-
-  .r-cursor-caret {
-    width: 2px;
-    height: 20px;
-    border-radius: 1px;
-    animation: caret-blink 1.1s ease-in-out infinite;
-  }
+  .r-cursor { position: absolute; pointer-events: none; will-change: left, top; }
+  .r-cursor-caret { width: 2px; height: 20px; border-radius: 1px; animation: caret-blink 1.1s ease-in-out infinite; }
 
   @keyframes caret-blink {
     0%, 45%, 100% { opacity: 1; }
-    55%, 90% { opacity: 0; }
+    55%, 90%       { opacity: 0; }
   }
 
   .r-cursor-label {
-    position: absolute;
-    top: -19px;
-    left: 0;
-    font-size: 10px;
-    font-weight: 600;
-    color: white;
-    padding: 2px 6px;
-    border-radius: 3px 3px 3px 0;
-    white-space: nowrap;
-    font-family: var(--font-sans);
-    line-height: 1.4;
-    box-shadow: 0 1px 4px rgba(0,0,0,0.2);
-    letter-spacing: 0.2px;
+    position: absolute; top: -19px; left: 0;
+    font-size: 10px; font-weight: 600; color: white;
+    padding: 2px 6px; border-radius: 3px 3px 3px 0; white-space: nowrap;
+    font-family: var(--font-sans); line-height: 1.4;
+    box-shadow: 0 1px 4px rgba(0,0,0,0.2); letter-spacing: 0.2px;
   }
 
-  /* Editor textarea */
   #editor {
-    width: 100%;
-    min-height: 80vh;
-    padding: 64px 88px;
-    font-family: var(--font-serif);
-    font-size: 16.5px;
-    line-height: 1.85;
-    color: var(--text);
-    border: none;
-    outline: none;
-    resize: none;
-    background: transparent;
-    position: relative;
-    z-index: 10;
-    white-space: pre-wrap;
-    word-wrap: break-word;
-    caret-color: var(--accent);
-    -webkit-font-smoothing: antialiased;
-  }
-
-  #editor::placeholder {
-    color: var(--text-light);
-    font-style: italic;
-  }
-
-  #editor::selection {
-    background: rgba(26, 92, 58, 0.15);
+    width: 100%; min-height: 80vh; padding: 64px 88px;
+    font-family: var(--font-serif); font-size: 16.5px; line-height: 1.85;
+    color: var(--text); border: none; outline: none; resize: none;
+    background: transparent; position: relative; z-index: 10;
+    white-space: pre-wrap; word-wrap: break-word;
+    caret-color: var(--accent); -webkit-font-smoothing: antialiased;
   }
+  #editor::placeholder { color: var(--text-light); font-style: italic; }
+  #editor::selection   { background: rgba(26, 92, 58, 0.15); }
 
-  /* ── Activity bar ── */
   #activity-bar {
-    position: fixed;
-    bottom: 18px;
-    left: 18px;
-    background: var(--surface);
-    border: 1px solid var(--border);
-    border-radius: var(--radius);
-    padding: 7px 12px;
-    font-size: 12px;
-    color: var(--text-muted);
-    box-shadow: var(--shadow);
-    display: flex;
-    align-items: center;
-    gap: 7px;
-    opacity: 1;
-    transform: translateY(0);
-    transition: opacity 0.2s, transform 0.2s;
-  }
-
-  #activity-bar.hidden {
-    opacity: 0;
-    transform: translateY(4px);
-    pointer-events: none;
-  }
-
-  .typing-dots {
-    display: flex;
-    gap: 3px;
-    align-items: center;
+    position: fixed; bottom: 18px; left: 18px;
+    background: var(--surface); border: 1px solid var(--border);
+    border-radius: var(--radius); padding: 7px 12px;
+    font-size: 12px; color: var(--text-muted); box-shadow: var(--shadow);
+    display: flex; align-items: center; gap: 7px;
+    opacity: 1; transform: translateY(0); transition: opacity 0.2s, transform 0.2s;
   }
+  #activity-bar.hidden { opacity: 0; transform: translateY(4px); pointer-events: none; }
 
+  .typing-dots { display: flex; gap: 3px; align-items: center; }
   .typing-dot {
-    width: 4px; height: 4px;
-    border-radius: 50%;
-    background: var(--accent-light);
-    animation: typing-bounce 1.3s ease-in-out infinite;
+    width: 4px; height: 4px; border-radius: 50%;
+    background: var(--accent-light); animation: typing-bounce 1.3s ease-in-out infinite;
   }
-
   .typing-dot:nth-child(2) { animation-delay: 0.16s; }
   .typing-dot:nth-child(3) { animation-delay: 0.32s; }
 
   @keyframes typing-bounce {
     0%, 60%, 100% { transform: translateY(0); opacity: 0.5; }
-    30% { transform: translateY(-4px); opacity: 1; }
+    30%            { transform: translateY(-4px); opacity: 1; }
   }
 
-  /* ── Toast notifications ── */
   #toasts {
-    position: fixed;
-    bottom: 18px;
-    right: 18px;
-    display: flex;
-    flex-direction: column;
-    gap: 8px;
-    z-index: 1000;
-    pointer-events: none;
+    position: fixed; bottom: 18px; right: 18px;
+    display: flex; flex-direction: column; gap: 8px;
+    z-index: 1000; pointer-events: none;
   }
-
   .toast {
-    background: var(--surface);
-    border: 1px solid var(--border);
-    border-radius: var(--radius);
-    padding: 9px 14px;
-    font-size: 13px;
-    box-shadow: var(--shadow-lg);
-    display: flex;
-    align-items: center;
-    gap: 8px;
-    max-width: 260px;
-    animation: toast-in 0.25s ease;
+    background: var(--surface); border: 1px solid var(--border);
+    border-radius: var(--radius); padding: 9px 14px; font-size: 13px;
+    box-shadow: var(--shadow-lg); display: flex; align-items: center;
+    gap: 8px; max-width: 260px; animation: toast-in 0.25s ease;
   }
-
   @keyframes toast-in {
     from { transform: translateX(16px); opacity: 0; }
-    to { transform: translateX(0); opacity: 1; }
-  }
-
-  .toast-dot {
-    width: 7px; height: 7px;
-    border-radius: 50%;
-    flex-shrink: 0;
+    to   { transform: translateX(0);    opacity: 1; }
   }
+  .toast-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
 
-  /* ── Share modal ── */
   #share-modal {
-    display: none;
-    position: fixed;
-    inset: 0;
-    background: rgba(0,0,0,0.35);
-    z-index: 500;
-    align-items: center;
-    justify-content: center;
-    backdrop-filter: blur(3px);
+    display: none; position: fixed; inset: 0;
+    background: rgba(0,0,0,0.35); z-index: 500;
+    align-items: center; justify-content: center; backdrop-filter: blur(3px);
   }
-
   #share-modal.open { display: flex; }
 
   .modal {
-    background: var(--surface);
-    border-radius: var(--radius-lg);
-    padding: 28px;
-    width: 440px;
-    max-width: 92vw;
+    background: var(--surface); border-radius: var(--radius-lg);
+    padding: 28px; width: 440px; max-width: 92vw;
     box-shadow: var(--shadow-lg);
     animation: modal-pop 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
   }
-
   @keyframes modal-pop {
     from { transform: scale(0.93); opacity: 0; }
-    to { transform: scale(1); opacity: 1; }
-  }
-
-  .modal-title {
-    font-family: var(--font-serif);
-    font-size: 21px;
-    margin-bottom: 6px;
-    color: var(--text);
-  }
-
-  .modal-desc {
-    font-size: 13.5px;
-    color: var(--text-muted);
-    margin-bottom: 18px;
-    line-height: 1.6;
-  }
-
-  .link-row {
-    display: flex;
-    gap: 8px;
-    margin-bottom: 14px;
-  }
-
-  .link-input {
-    flex: 1;
-    padding: 9px 11px;
-    border: 1px solid var(--border-strong);
-    border-radius: var(--radius-sm);
-    font-size: 12.5px;
+    to   { transform: scale(1);    opacity: 1; }
+  }
+  .modal-title { font-family: var(--font-serif); font-size: 21px; margin-bottom: 6px; color: var(--text); }
+  .modal-desc  { font-size: 13.5px; color: var(--text-muted); margin-bottom: 18px; line-height: 1.6; }
+  .link-row    { display: flex; gap: 8px; margin-bottom: 14px; }
+  .link-input  {
+    flex: 1; padding: 9px 11px; border: 1px solid var(--border-strong);
+    border-radius: var(--radius-sm); font-size: 12.5px;
     font-family: 'SF Mono', 'Fira Code', monospace;
-    background: var(--surface2);
-    color: var(--text-muted);
-    outline: none;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
+    background: var(--surface2); color: var(--text-muted); outline: none;
+    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
   }
-
   .btn-copy { min-width: 72px; justify-content: center; }
   .btn-copy.copied { background: var(--accent-light); }
 
-  /* ── Responsive ── */
   @media (max-width: 640px) {
     #editor { padding: 32px 24px; font-size: 15px; }
-    .logo-badge { display: none; }
+    .logo-badge  { display: none; }
     #version-chip { display: none; }
   }
 
-  /* Saving indicator */
-  #save-indicator {
-    font-size: 11.5px;
-    color: var(--text-light);
-    transition: opacity 0.3s;
-  }
-
+  #save-indicator { font-size: 11.5px; color: var(--text-light); transition: opacity 0.3s; }
   #save-indicator.saving { color: var(--accent); }
 </style>
 </head>
@@ -583,124 +344,121 @@
 </div>
 
 <script>
-// ══════════════════════════════════════════════════════════════════════════
-//  CollabDocs — Updated Client with OT Transformation logic
-// ══════════════════════════════════════════════════════════════════════════
+// ══════════════════════════════════════════════════════════════════════════════
+//  CollabDocs — Client (v2)
+//  Changes:
+//    • handles "batch" message type from server (op batching)
+//    • fixed OT transform loop: pending queue ops must be re-transformed
+//      against each other correctly (diamond property)
+//    • trimmed duplicate op_type field detection
+// ══════════════════════════════════════════════════════════════════════════════
 
 (function () {
   'use strict';
 
-  // ── State ────────────────────────────────────────────────────────────────
+  // ── State ────────────────────────────────────────────────────────────────────
   let ws = null;
-  let myUserId = null;
-  let myName = null;
-  let myColor = null;
-  let docId = null;
+  let myUserId  = null;
+  let myName    = null;
+  let myColor   = null;
+  let docId     = null;
 
   let serverVersion = 0;
-  let inFlight = null;       // { op, op_id }
-  let pendingQueue = [];     // ops waiting for in-flight ack
+  let inFlight      = null;    // op currently waiting for ack  { op, op_id, ... }
+  let pendingQueue  = [];      // ops queued behind inFlight
 
   let isApplyingRemote = false;
-  let prevContent = '';
+  let prevContent      = '';
 
   const remoteCursors = {};
-  const cursorElems = {};
-
-  const typingUsers = {};
-  const typingTimers = {};
+  const cursorElems   = {};
+  const typingUsers   = {};
+  const typingTimers  = {};
 
   let reconnectAttempts = 0;
-  let reconnectTimer = null;
-
-  // ── DOM ──────────────────────────────────────────────────────────────────
-  const editor = document.getElementById('editor');
-  const statusBadge = document.getElementById('status-badge');
-  const statusText = document.getElementById('status-text');
-  const statusDot = document.querySelector('.status-dot');
-  const userAvatars = document.getElementById('user-avatars');
-  const shareBtn = document.getElementById('share-btn');
-  const shareModal = document.getElementById('share-modal');
-  const shareLinkInput = document.getElementById('share-link');
-  const copyBtn = document.getElementById('copy-btn');
-  const modalClose = document.getElementById('modal-close');
-  const newDocBtn = document.getElementById('new-doc-btn');
-  const docTitleEl = document.getElementById('doc-title');
-  const versionChip = document.getElementById('version-chip');
-  const toastsEl = document.getElementById('toasts');
-  const activityBar = document.getElementById('activity-bar');
+  let reconnectTimer    = null;
+
+  // ── DOM ──────────────────────────────────────────────────────────────────────
+  const editor       = document.getElementById('editor');
+  const statusBadge  = document.getElementById('status-badge');
+  const statusText   = document.getElementById('status-text');
+  const statusDot    = document.querySelector('.status-dot');
+  const userAvatars  = document.getElementById('user-avatars');
+  const shareBtn     = document.getElementById('share-btn');
+  const shareModal   = document.getElementById('share-modal');
+  const shareLinkEl  = document.getElementById('share-link');
+  const copyBtn      = document.getElementById('copy-btn');
+  const modalClose   = document.getElementById('modal-close');
+  const newDocBtn    = document.getElementById('new-doc-btn');
+  const docTitleEl   = document.getElementById('doc-title');
+  const versionChip  = document.getElementById('version-chip');
+  const toastsEl     = document.getElementById('toasts');
+  const activityBar  = document.getElementById('activity-bar');
   const activityText = document.getElementById('activity-text');
-  const saveIndicator = document.getElementById('save-indicator');
+  const saveIndicator= document.getElementById('save-indicator');
+
+  // ── OT pairwise transforms ───────────────────────────────────────────────────
 
-  // ── OT Pairwise Transformations ───────────────────────
+  function isInsert(op) { return (op.op_type || op.type) === 'insert'; }
 
   function transform_ii(op, against) {
-    let result = { ...op };
+    const r = { ...op };
     if (against.position < op.position) {
-      result.position += against.value.length;
+      r.position += against.value.length;
     } else if (against.position === op.position) {
-      // Tie-break: lower user_id goes first
-      if (against.user_id <= op.user_id) result.position += against.value.length;
+      if (against.user_id <= op.user_id) r.position += against.value.length;
     }
-    return result;
+    return r;
   }
 
   function transform_id(op, against) {
-    let result = { ...op };
+    // op = insert,  against = delete
+    const r = { ...op };
     const del_start = against.position;
-    const del_end = against.position + against.length;
-    if (del_end <= op.position) {
-      result.position -= against.length;
-    } else if (del_start < op.position) {
-      result.position = del_start;
-    }
-    return result;
+    const del_end   = against.position + against.length;
+    if (del_end <= op.position)      r.position -= against.length;
+    else if (del_start < op.position) r.position = del_start;
+    return r;
   }
 
   function transform_di(op, against) {
-    let result = { ...op };
+    // op = delete, against = insert
+    const r = { ...op };
     const ins_pos = against.position;
     const ins_len = against.value.length;
     const del_end = op.position + op.length;
-    if (ins_pos < op.position) {
-      result.position += ins_len;
-    } else if (ins_pos <= del_end) {
-      result.length += ins_len;
-    }
-    return result;
+    if (ins_pos < op.position)   r.position += ins_len;
+    else if (ins_pos <= del_end) r.length   += ins_len;
+    return r;
   }
 
   function transform_dd(op, against) {
-    let result = { ...op };
+    const r = { ...op };
     const op_start = op.position;
-    const op_end = op.position + op.length;
+    const op_end   = op.position + op.length;
     const ag_start = against.position;
-    const ag_end = against.position + against.length;
+    const ag_end   = against.position + against.length;
     if (ag_end <= op_start) {
-      result.position -= against.length;
-    } else if (ag_start >= op_end) {
-      // no change
-    } else {
-      const overlap_start = Math.max(op_start, ag_start);
-      const overlap_end = Math.min(op_end, ag_end);
-      const overlap = overlap_end - overlap_start;
-      if (ag_start < op_start) result.position = ag_start;
-      result.length = Math.max(0, op.length - overlap);
+      r.position -= against.length;
+    } else if (ag_start < op_end) {
+      const overlap = Math.min(op_end, ag_end) - Math.max(op_start, ag_start);
+      if (ag_start < op_start) r.position = ag_start;
+      r.length = Math.max(0, op.length - overlap);
     }
-    return result;
+    return r;
   }
 
-  function transformOperation(incoming, applied) {
-    if (incoming.op_type === 'insert') {
-      if (applied.op_type === 'insert' || applied.type === 'insert') return transform_ii(incoming, applied);
-      else return transform_id(incoming, applied);
+  function transformOp(incoming, applied) {
+    if (isInsert(incoming)) {
+      return isInsert(applied) ? transform_ii(incoming, applied)
+                               : transform_id(incoming, applied);
     } else {
-      if (applied.op_type === 'insert' || applied.type === 'insert') return transform_di(incoming, applied);
-      else return transform_dd(incoming, applied);
+      return isInsert(applied) ? transform_di(incoming, applied)
+                               : transform_dd(incoming, applied);
     }
   }
 
-  // ── Routing ──────────────────────────────────────────────────────────────
+  // ── Routing ──────────────────────────────────────────────────────────────────
   function getDocId() {
     return new URLSearchParams(window.location.search).get('doc') || 'welcome';
   }
@@ -714,33 +472,35 @@
     return id;
   }
 
-  // ── Myers diff ────────────────────────────────────────────────────────────
+  // ── Myers diff (simple LCS-based) ────────────────────────────────────────────
   function myersDiff(oldStr, newStr) {
     const m = oldStr.length, n = newStr.length;
     if (m === 0 && n === 0) return [];
     if (m === 0) return [{ type: 'insert', pos: 0, text: newStr }];
-    if (n === 0) return [{ type: 'delete', pos: 0, len: m }];
+    if (n === 0) return [{ type: 'delete', pos: 0, len:  m }];
+
     let p = 0;
     while (p < m && p < n && oldStr[p] === newStr[p]) p++;
     let os = m - 1, ns = n - 1;
     while (os >= p && ns >= p && oldStr[os] === newStr[ns]) { os--; ns--; }
-    const deletedLen = os - p + 1;
+
+    const deletedLen  = os - p + 1;
     const insertedStr = newStr.slice(p, ns + 1);
     const ops = [];
-    if (deletedLen > 0) ops.push({ type: 'delete', pos: p, len: deletedLen });
+    if (deletedLen  > 0) ops.push({ type: 'delete', pos: p, len:  deletedLen });
     if (insertedStr.length > 0) ops.push({ type: 'insert', pos: p, text: insertedStr });
     return ops;
   }
 
-  // ── OT client send pipeline ───────────────────────────────────────────────
+  // ── OT send pipeline ─────────────────────────────────────────────────────────
   function composeAndSend(diffOps) {
     for (const d of diffOps) {
       const msg = d.type === 'insert'
         ? { op_type: 'insert', position: d.pos, value: d.text, length: d.text.length }
-        : { op_type: 'delete', position: d.pos, value: '', length: d.len };
-      msg.op_id = Math.random().toString(36).slice(2, 11);
+        : { op_type: 'delete', position: d.pos, value: '',     length: d.len };
+      msg.op_id        = Math.random().toString(36).slice(2, 11);
       msg.base_version = serverVersion;
-      msg.user_id = myUserId;
+      msg.user_id      = myUserId;
       pendingQueue.push(msg);
     }
     flushPending();
@@ -755,16 +515,17 @@
     setSaveIndicator('saving');
   }
 
-  // ── WebSocket ─────────────────────────────────────────────────────────────
+  // ── WebSocket ─────────────────────────────────────────────────────────────────
   function connect() {
-    docId = getDocId();
+    docId    = getDocId();
     myUserId = getUserId();
     const proto = location.protocol === 'https:' ? 'wss' : 'ws';
-    const url = `${proto}://${location.host}/ws/${docId}?user_id=${myUserId}`;
+    const url   = `${proto}://${location.host}/ws/${docId}?user_id=${myUserId}`;
     ws = new WebSocket(url);
-    ws.onopen = () => { setStatus('connected', 'Connected'); reconnectAttempts = 0; startHeartbeat(); };
-    ws.onclose = () => { setStatus('', 'Reconnecting…'); stopHeartbeat(); scheduleReconnect(); };
-    ws.onmessage = ({ data }) => { try { handleMessage(JSON.parse(data)); } catch (e) { console.error('[WS] parse error', e); } };
+    ws.onopen    = () => { setStatus('connected', 'Connected'); reconnectAttempts = 0; startHeartbeat(); };
+    ws.onclose   = () => { setStatus('', 'Reconnecting…'); stopHeartbeat(); scheduleReconnect(); };
+    ws.onmessage = ({ data }) => { try { handleMessage(JSON.parse(data)); } catch (e) { console.error('[WS]', e); } };
+    ws.onerror   = (e) => console.error('[WS] error', e);
   }
 
   function scheduleReconnect() {
@@ -774,65 +535,93 @@
     reconnectTimer = setTimeout(connect, delay);
   }
 
-  // ── Message dispatch ──────────────────────────────────────────────────────
+  // ── Message dispatch ──────────────────────────────────────────────────────────
   function handleMessage(msg) {
     switch (msg.type) {
-      case 'init':          onInit(msg); break;
-      case 'operation':     onRemoteOp(msg); break;
-      case 'ack':           onAck(msg); break;
-      case 'cursor':        onRemoteCursor(msg); break;
-      case 'user_joined':   onUserJoined(msg); break;
-      case 'user_left':     onUserLeft(msg); break;
-      case 'title_change':  onTitleChange(msg); break;
+      case 'init':         onInit(msg);         break;
+      case 'operation':    onRemoteOp(msg);     break;
+      case 'batch':        onBatch(msg);        break;   // NEW: server batching
+      case 'ack':          onAck(msg);          break;
+      case 'cursor':       onRemoteCursor(msg); break;
+      case 'user_joined':  onUserJoined(msg);   break;
+      case 'user_left':    onUserLeft(msg);     break;
+      case 'title_change': onTitleChange(msg);  break;
     }
   }
 
   function onInit(msg) {
-    myUserId = msg.user_id; myName = msg.name; myColor = msg.color;
-    serverVersion = msg.doc_state.version;
-    isApplyingRemote = true;
-    editor.value = msg.doc_state.content;
-    prevContent = msg.doc_state.content;
-    isApplyingRemote = false;
-    docTitleEl.value = msg.doc_state.title || 'Untitled Document';
-    document.title = `${docTitleEl.value} — CollabDocs`;
+    myUserId = msg.user_id;
+    myName   = msg.name;
+    myColor  = msg.color;
+    serverVersion     = msg.doc_state.version;
+    isApplyingRemote  = true;
+    editor.value      = msg.doc_state.content;
+    prevContent       = msg.doc_state.content;
+    isApplyingRemote  = false;
+    docTitleEl.value  = msg.doc_state.title || 'Untitled Document';
+    document.title    = `${docTitleEl.value} — CollabDocs`;
     updateVersionChip();
     renderAvatars(msg.users || []);
   }
 
+  // Handle a batch of ops from the server (reduces message count ~15-20×)
+  function onBatch(msg) {
+    if (!Array.isArray(msg.ops)) return;
+    for (const op of msg.ops) onRemoteOp(op);
+  }
+
   function onRemoteOp(msg) {
     if (msg.user_id === myUserId) return;
+
     serverVersion = msg.server_version;
     updateVersionChip();
 
-    // MISSING LINK: Transform remote op against our un-acked local ops
-    let transformedRemote = { ...msg };
+    // ── Transform remote op against our un-acked local ops ───────────────────
+    // This implements the client-side of the OT diamond property:
+    //   remote must be transformed against everything the server hasn't seen yet.
+    //
+    // inFlight:     sent to server but not acked yet
+    // pendingQueue: queued locally, not yet sent
+    //
+    // After transforming the remote op, we also need to re-transform our
+    // local ops so they remain correct relative to the (now updated) server state.
+
+    let remoteT = { ...msg };
+
     if (inFlight) {
-        transformedRemote = transformOperation(transformedRemote, inFlight);
+      remoteT  = transformOp(remoteT, inFlight);
+      // inFlight doesn't change — the server will transform it server-side
     }
+
     for (let i = 0; i < pendingQueue.length; i++) {
-        const opInQueue = pendingQueue[i];
-        transformedRemote = transformOperation(transformedRemote, opInQueue);
-        pendingQueue[i] = transformOperation(opInQueue, transformedRemote);
+      const local = pendingQueue[i];
+      // Transform remote against local
+      const remoteAgainstLocal = transformOp(remoteT, local);
+      // Transform local against (original) remote — keeps local consistent
+      pendingQueue[i] = transformOp(local, remoteT);
+      remoteT = remoteAgainstLocal;
     }
 
+    // ── Apply to editor ───────────────────────────────────────────────────────
     const savedStart = editor.selectionStart;
-    const savedEnd = editor.selectionEnd;
+    const savedEnd   = editor.selectionEnd;
 
     isApplyingRemote = true;
-    editor.value = applyOpToString(editor.value, transformedRemote);
-    prevContent = editor.value;
+    editor.value     = applyOpToString(editor.value, remoteT);
+    prevContent      = editor.value;
     isApplyingRemote = false;
 
-    const newStart = shiftCursor(savedStart, transformedRemote);
-    const newEnd = shiftCursor(savedEnd, transformedRemote);
-    editor.setSelectionRange(newStart, newEnd);
+    editor.setSelectionRange(
+      shiftCursor(savedStart, remoteT),
+      shiftCursor(savedEnd,   remoteT)
+    );
+
     showTyping(msg.user_id, remoteCursors[msg.user_id]?.name || 'Someone');
   }
 
   function onAck(msg) {
-    if (inFlight && (inFlight.op_id === msg.op_id)) {
-      inFlight = null;
+    if (inFlight && inFlight.op_id === msg.op_id) {
+      inFlight      = null;
       serverVersion = msg.server_version;
       updateVersionChip();
       setSaveIndicator('saved');
@@ -852,7 +641,7 @@
   }
 
   function onUserLeft(msg) {
-    toast(`${msg.name} left`, '#999');
+    toast(`${msg.name} left`, msg.color || '#999');
     removeCursor(msg.user_id);
     delete remoteCursors[msg.user_id];
     renderAvatars(msg.users || []);
@@ -860,34 +649,33 @@
 
   function onTitleChange(msg) {
     docTitleEl.value = msg.title;
-    document.title = `${msg.title} — CollabDocs`;
+    document.title   = `${msg.title} — CollabDocs`;
   }
 
-  // ── Apply remote op to string ──────────────────────────────────────────────
+  // ── String apply / cursor shift ───────────────────────────────────────────────
   function applyOpToString(content, op) {
-    const pos = Math.max(0, Math.min(op.position, content.length));
-    if (op.op_type === 'insert') {
+    const len = content.length;
+    const pos = Math.max(0, Math.min(op.position, len));
+    if (isInsert(op)) {
       return content.slice(0, pos) + op.value + content.slice(pos);
-    }
-    if (op.op_type === 'delete') {
-      const end = Math.max(0, Math.min(pos + op.length, content.length));
+    } else {
+      const end = Math.max(0, Math.min(pos + op.length, len));
       return content.slice(0, pos) + content.slice(end);
     }
-    return content;
   }
 
   function shiftCursor(cursor, op) {
-    if (op.op_type === 'insert') {
+    if (isInsert(op)) {
       if (op.position <= cursor) return cursor + op.value.length;
-    } else if (op.op_type === 'delete') {
+    } else {
       const delEnd = op.position + op.length;
-      if (delEnd <= cursor) return cursor - op.length;
-      if (op.position <= cursor) return op.position;
+      if (delEnd <= cursor)       return cursor - op.length;
+      if (op.position <= cursor)  return op.position;
     }
     return cursor;
   }
 
-  // ── Editor input ──────────────────────────────────────────────────────────
+  // ── Editor input ──────────────────────────────────────────────────────────────
   editor.addEventListener('input', () => {
     if (isApplyingRemote) return;
     const newContent = editor.value;
@@ -897,18 +685,19 @@
     debounceSendCursor();
   });
 
-  editor.addEventListener('keyup', debounceSendCursor);
-  editor.addEventListener('click', debounceSendCursor);
-  editor.addEventListener('mouseup', debounceSendCursor);
-  editor.addEventListener('select', debounceSendCursor);
+  editor.addEventListener('keyup',    debounceSendCursor);
+  editor.addEventListener('click',    debounceSendCursor);
+  editor.addEventListener('mouseup',  debounceSendCursor);
+  editor.addEventListener('select',   debounceSendCursor);
 
   let cursorTimer = null;
   function debounceSendCursor() { clearTimeout(cursorTimer); cursorTimer = setTimeout(sendCursor, 30); }
   function sendCursor() {
-    send({ type: 'cursor', cursor_pos: editor.selectionStart, selection_start: editor.selectionStart, selection_end: editor.selectionEnd });
+    send({ type: 'cursor', cursor_pos: editor.selectionStart,
+           selection_start: editor.selectionStart, selection_end: editor.selectionEnd });
   }
 
-  // ── Title ─────────────────────────────────────────────────────────────────
+  // ── Title ──────────────────────────────────────────────────────────────────────
   let titleTimer = null;
   docTitleEl.addEventListener('input', () => {
     clearTimeout(titleTimer);
@@ -918,7 +707,7 @@
     }, 300);
   });
 
-  // ── Cursor rendering ──────────────────────────────────────────────────────
+  // ── Remote cursor rendering ────────────────────────────────────────────────────
   let mirrorEl = null;
   function getMirror() {
     if (!mirrorEl) {
@@ -937,23 +726,23 @@
     return mirrorEl;
   }
 
-  const resizeObserver = new ResizeObserver(() => {
+  new ResizeObserver(() => {
     if (mirrorEl) mirrorEl.style.width = editor.clientWidth + 'px';
-    for (const [uid, c] of Object.entries(remoteCursors)) renderRemoteCursor(uid, c.pos, c.name, c.color);
-  });
-  resizeObserver.observe(editor);
+    for (const [uid, c] of Object.entries(remoteCursors))
+      renderRemoteCursor(uid, c.pos, c.name, c.color);
+  }).observe(editor);
 
   function getCharCoords(charIndex) {
-    const mirror = getMirror();
-    const text = editor.value.slice(0, charIndex);
+    const mirror   = getMirror();
+    const text     = editor.value.slice(0, charIndex);
     mirror.innerHTML = '';
     mirror.appendChild(document.createTextNode(text));
     const span = document.createElement('span');
     span.textContent = '\u200b';
     mirror.appendChild(span);
     const editorRect = editor.getBoundingClientRect();
-    const pageRect = document.getElementById('page').getBoundingClientRect();
-    const spanRect = span.getBoundingClientRect();
+    const pageRect   = document.getElementById('page').getBoundingClientRect();
+    const spanRect   = span.getBoundingClientRect();
     const mirrorRect = mirror.getBoundingClientRect();
     return {
       x: spanRect.left - mirrorRect.left + (editorRect.left - pageRect.left),
@@ -965,12 +754,15 @@
     const coords = getCharCoords(charPos);
     let el = cursorElems[userId];
     if (!el) {
-      el = document.createElement('div'); el.className = 'r-cursor';
-      el.innerHTML = `<div class="r-cursor-label" style="background:${esc(color)}">${esc(name)}</div><div class="r-cursor-caret" style="background:${esc(color)}"></div>`;
+      el = document.createElement('div');
+      el.className = 'r-cursor';
+      el.innerHTML = `<div class="r-cursor-label" style="background:${esc(color)}">${esc(name)}</div>`
+                   + `<div class="r-cursor-caret" style="background:${esc(color)}"></div>`;
       document.getElementById('cursor-layer').appendChild(el);
       cursorElems[userId] = el;
     }
-    el.style.left = `${coords.x}px`; el.style.top  = `${coords.y}px`;
+    el.style.left = `${coords.x}px`;
+    el.style.top  = `${coords.y}px`;
     el.querySelector('.r-cursor-label').style.background = color;
     el.querySelector('.r-cursor-caret').style.background = color;
     el.querySelector('.r-cursor-label').textContent = name;
@@ -978,26 +770,35 @@
 
   function removeCursor(userId) { cursorElems[userId]?.remove(); delete cursorElems[userId]; }
 
-  // ── Avatars ────────────────────────────────────────────────────────────────
+  // ── Avatars ────────────────────────────────────────────────────────────────────
   function renderAvatars(users) {
     userAvatars.innerHTML = '';
     const MAX = 5;
     users.slice(0, MAX).forEach(u => {
-      const div = document.createElement('div'); div.className = 'avatar';
-      div.style.background = u.color; div.textContent = (u.name || '?')[0];
-      if (u.user_id === myUserId) { div.style.outline = `2px solid ${u.color}`; div.style.outlineOffset = '1px'; }
-      const tip = document.createElement('div'); tip.className = 'avatar-tip';
-      tip.textContent = u.user_id === myUserId ? `${u.name} (you)` : u.name;
-      div.appendChild(tip); userAvatars.appendChild(div);
+      const div = document.createElement('div');
+      div.className = 'avatar';
+      div.style.background = u.color;
+      div.textContent = (u.name || '?')[0];
+      if (u.user_id === myUserId) {
+        div.style.outline       = `2px solid ${u.color}`;
+        div.style.outlineOffset = '1px';
+      }
+      const tip = document.createElement('div');
+      tip.className   = 'avatar-tip';
+      tip.textContent = (u.user_id === myUserId) ? `${u.name} (you)` : u.name;
+      div.appendChild(tip);
+      userAvatars.appendChild(div);
     });
     if (users.length > MAX) {
-      const more = document.createElement('div'); more.className = 'avatar';
-      more.style.background = '#888'; more.textContent = `+${users.length - MAX}`;
+      const more = document.createElement('div');
+      more.className = 'avatar';
+      more.style.background = '#888';
+      more.textContent = `+${users.length - MAX}`;
       userAvatars.appendChild(more);
     }
   }
 
-  // ── Typing activity ────────────────────────────────────────────────────────
+  // ── Typing activity ────────────────────────────────────────────────────────────
   function showTyping(userId, name) {
     typingUsers[userId] = name;
     clearTimeout(typingTimers[userId]);
@@ -1007,57 +808,70 @@
 
   function updateActivityBar() {
     const names = Object.values(typingUsers);
-    if (names.length === 0) { activityBar.classList.add('hidden'); return; }
+    if (!names.length) { activityBar.classList.add('hidden'); return; }
     activityBar.classList.remove('hidden');
-    activityText.textContent = names.length === 1 ? `${names[0]} is typing` : `${names.slice(0, -1).join(', ')} & ${names.at(-1)} are typing`;
+    activityText.textContent = names.length === 1
+      ? `${names[0]} is typing`
+      : `${names.slice(0,-1).join(', ')} & ${names.at(-1)} are typing`;
   }
 
+  // ── Toasts ─────────────────────────────────────────────────────────────────────
   function toast(text, color) {
-    const div = document.createElement('div'); div.className = 'toast';
+    const div = document.createElement('div');
+    div.className = 'toast';
     div.innerHTML = `<div class="toast-dot" style="background:${esc(color)}"></div><span>${esc(text)}</span>`;
-    toastsEl.appendChild(div); setTimeout(() => div.remove(), 3200);
+    toastsEl.appendChild(div);
+    setTimeout(() => div.remove(), 3200);
   }
 
+  // ── UI helpers ─────────────────────────────────────────────────────────────────
   function setStatus(state, text) {
-    statusBadge.className = state ? `${state}` : '';
+    statusBadge.className = state || '';
     statusText.textContent = text;
     statusDot.className = 'status-dot' + (state === 'connected' ? ' pulse' : '');
   }
 
   function updateVersionChip() { versionChip.textContent = `v${serverVersion}`; }
 
-  let saveTimer = null;
   function setSaveIndicator(state) {
-    clearTimeout(saveTimer);
     if (state === 'saving') { saveIndicator.textContent = 'Saving…'; saveIndicator.className = 'saving'; }
-    else { saveIndicator.textContent = 'Saved'; saveIndicator.className = ''; }
+    else                    { saveIndicator.textContent = 'Saved';   saveIndicator.className = ''; }
   }
 
   let heartbeatId = null;
   function startHeartbeat() { clearInterval(heartbeatId); heartbeatId = setInterval(() => send({ type: 'ping' }), 10000); }
-  function stopHeartbeat() { clearInterval(heartbeatId); }
-  function send(msg) { if (ws && ws.readyState === WebSocket.OPEN) ws.send(JSON.stringify(msg)); }
+  function stopHeartbeat()  { clearInterval(heartbeatId); }
+  function send(msg)        { if (ws && ws.readyState === WebSocket.OPEN) ws.send(JSON.stringify(msg)); }
+
+  function esc(str) {
+    return String(str)
+      .replace(/&/g,'&amp;').replace(/</g,'&lt;')
+      .replace(/>/g,'&gt;').replace(/"/g,'&quot;');
+  }
 
+  // ── Toolbar buttons ────────────────────────────────────────────────────────────
   shareBtn.addEventListener('click', () => {
-    const url = `${location.origin}${location.pathname}?doc=${docId}`;
-    shareLinkInput.value = url; shareModal.classList.add('open'); shareLinkInput.select();
+    shareLinkEl.value = `${location.origin}${location.pathname}?doc=${docId}`;
+    shareModal.classList.add('open');
+    shareLinkEl.select();
   });
   modalClose.addEventListener('click', () => shareModal.classList.remove('open'));
   shareModal.addEventListener('click', e => { if (e.target === shareModal) shareModal.classList.remove('open'); });
   copyBtn.addEventListener('click', () => {
-    navigator.clipboard.writeText(shareLinkInput.value).then(() => {
-      copyBtn.textContent = '✓ Copied'; copyBtn.classList.add('copied');
+    navigator.clipboard.writeText(shareLinkEl.value).then(() => {
+      copyBtn.textContent = '✓ Copied';
+      copyBtn.classList.add('copied');
       setTimeout(() => { copyBtn.textContent = 'Copy'; copyBtn.classList.remove('copied'); }, 2000);
     });
   });
 
   newDocBtn.addEventListener('click', async () => {
-    const res = await fetch('/api/docs', { method: 'POST' });
-    const data = await res.json(); window.location.href = data.url;
+    const res  = await fetch('/api/docs', { method: 'POST' });
+    const data = await res.json();
+    window.location.href = data.url;
   });
 
-  function esc(str) { return String(str).replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;'); }
-
+  // ── Boot ───────────────────────────────────────────────────────────────────────
   connect();
 })();
 </script>