@vuer-ai/vuer-rtc 0.4.2 → 0.5.0

package/src/crdt/Rope.ts

@@ -17,22 +17,24 @@ import {
 // Types
 // ============================================
 
-export interface ItemId {
-  agent: string;
-  seq: number;
-}
+/**
+ * ItemId - String format for efficient comparison
+ * Format: "agent:seq" (e.g., "agent-1:42")
+ */
+export type ItemId = string;
 
 export interface Item {
   id: ItemId;
   content: string;
   isDeleted: boolean;
   parentId: ItemId | null;
-  seq: number;
+  seq: number;  // Lamport timestamp for total ordering
+  ts: number;  // Wall-clock time (seconds) for tie-breaking
 }
 
 interface SpanEntry {
-  startSeq: number;
-  endSeq: number;
+  startSeq: number;  // Sequence number from ItemId
+  endSeq: number;    // startSeq + content.length
   item: Item;
 }
 
@@ -88,6 +90,7 @@ export interface InsertOp {
   content: string;
   parentId: ItemId | null;
   seq: number;
+  ts: number;  // Wall-clock time (seconds) for tie-breaking
 }
 
 export interface DeleteOp {
@@ -108,16 +111,39 @@ export interface ReplaceOp {
 // Utilities
 // ============================================
 
+/**
+ * Compare two ItemIds for equality
+ */
 export function itemIdEquals(a: ItemId | null, b: ItemId | null): boolean {
-  if (a === null && b === null) return true;
-  if (a === null || b === null) return false;
-  return a.agent === b.agent && a.seq === b.seq;
+  return a === b;
 }
 
+/**
+ * Compare two ItemIds for ordering (primarily for agent ordering)
+ * For tie-breaking by ts, use seq + ts + id comparison
+ */
 export function itemIdCompare(a: ItemId, b: ItemId): number {
-  if (a.agent < b.agent) return -1;
-  if (a.agent > b.agent) return 1;
-  return a.seq - b.seq;
+  if (a < b) return -1;
+  if (a > b) return 1;
+  return 0;
+}
+
+/**
+ * Parse an ItemId string into its components
+ */
+export function parseItemId(id: ItemId): { agent: string; seq: number } {
+  const colonIdx = id.lastIndexOf(':');
+  return {
+    agent: id.slice(0, colonIdx),
+    seq: parseInt(id.slice(colonIdx + 1), 10),
+  };
+}
+
+/**
+ * Create an ItemId from agent and seq
+ */
+export function createItemId(agent: string, seq: number): ItemId {
+  return `${agent}:${seq}`;
 }
 
 // ============================================
@@ -137,13 +163,14 @@ function aiFind(entries: SpanEntry[], seq: number): number {
 }
 
 function aiAdd(index: Map<string, SpanEntry[]>, item: Item): void {
+  const parsed = parseItemId(item.id);
   const entry: SpanEntry = {
-    startSeq: item.id.seq,
-    endSeq: item.id.seq + item.content.length,
+    startSeq: parsed.seq,
+    endSeq: parsed.seq + item.content.length,
     item,
   };
-  let arr = index.get(item.id.agent);
-  if (!arr) { arr = []; index.set(item.id.agent, arr); }
+  let arr = index.get(parsed.agent);
+  if (!arr) { arr = []; index.set(parsed.agent, arr); }
   let lo = 0, hi = arr.length;
   while (lo < hi) {
     const mid = (lo + hi) >>> 1;
@@ -154,9 +181,10 @@ function aiAdd(index: Map<string, SpanEntry[]>, item: Item): void {
 }
 
 function aiRemove(index: Map<string, SpanEntry[]>, item: Item): void {
-  const arr = index.get(item.id.agent);
+  const parsed = parseItemId(item.id);
+  const arr = index.get(parsed.agent);
   if (!arr) return;
-  const ei = aiFind(arr, item.id.seq);
+  const ei = aiFind(arr, parsed.seq);
   if (ei !== -1 && arr[ei].item === item) {
     arr.splice(ei, 1);
   }
@@ -165,9 +193,10 @@ function aiRemove(index: Map<string, SpanEntry[]>, item: Item): void {
 function aiBuild(items: Item[]): Map<string, SpanEntry[]> {
   const index = new Map<string, SpanEntry[]>();
   for (const item of items) {
-    let arr = index.get(item.id.agent);
-    if (!arr) { arr = []; index.set(item.id.agent, arr); }
-    arr.push({ startSeq: item.id.seq, endSeq: item.id.seq + item.content.length, item });
+    const parsed = parseItemId(item.id);
+    let arr = index.get(parsed.agent);
+    if (!arr) { arr = []; index.set(parsed.agent, arr); }
+    arr.push({ startSeq: parsed.seq, endSeq: parsed.seq + item.content.length, item });
   }
   for (const arr of index.values()) {
     if (arr.length > 1) arr.sort((a, b) => a.startSeq - b.startSeq);
@@ -201,12 +230,14 @@ export function getItems(rope: TextRope): Item[] {
 
 export function findItemById(rope: TextRope, id: ItemId | null): number {
   if (id === null) return -1;
-  const entries = rope._agentIndex.get(id.agent);
+  const parsed = parseItemId(id);
+  const entries = rope._agentIndex.get(parsed.agent);
   if (!entries) return -1;
-  const ei = aiFind(entries, id.seq);
+  const ei = aiFind(entries, parsed.seq);
   if (ei === -1) return -1;
   const item = entries[ei].item;
-  if (item.id.seq !== id.seq) return -1;
+  const itemParsed = parseItemId(item.id);
+  if (itemParsed.seq !== parsed.seq) return -1;
   return computeOrdinal(rope._tree, item);
 }
 
@@ -235,21 +266,24 @@ export function getStats(rope: TextRope): {
 
 function splitItem(rope: TextRope, ordinal: number, offset: number): Item {
   const item = getAt(rope._tree, ordinal) as Item;
+  const itemParsed = parseItemId(item.id);
 
   const before: Item = {
-    id: { agent: item.id.agent, seq: item.id.seq },
+    id: createItemId(itemParsed.agent, itemParsed.seq),
     content: item.content.slice(0, offset),
     isDeleted: item.isDeleted,
-    parentId: item.parentId ? { agent: item.parentId.agent, seq: item.parentId.seq } : null,
+    parentId: item.parentId,
     seq: item.seq,
+    ts: item.ts,
   };
 
   const after: Item = {
-    id: { agent: item.id.agent, seq: item.id.seq + offset },
+    id: createItemId(itemParsed.agent, itemParsed.seq + offset),
     content: item.content.slice(offset),
     isDeleted: item.isDeleted,
-    parentId: { agent: item.id.agent, seq: item.id.seq + offset - 1 },
+    parentId: createItemId(itemParsed.agent, itemParsed.seq + offset - 1),
     seq: item.seq,
+    ts: item.ts,
   };
 
   splitAtOrdinal(rope._tree, ordinal, before, after);
@@ -257,8 +291,8 @@ function splitItem(rope: TextRope, ordinal: number, offset: number): Item {
   aiAdd(rope._agentIndex, before);
   aiAdd(rope._agentIndex, after);
 
-  if (item.id.agent === rope.agentId) {
-    const maxSeqInItem = item.id.seq + item.content.length - 1;
+  if (itemParsed.agent === rope.agentId) {
+    const maxSeqInItem = itemParsed.seq + item.content.length - 1;
     if (maxSeqInItem >= rope.clock) rope.clock = maxSeqInItem + 1;
   }
 
@@ -266,29 +300,33 @@ function splitItem(rope: TextRope, ordinal: number, offset: number): Item {
 }
 
 function containsItemId(rope: TextRope, id: ItemId): boolean {
-  const entries = rope._agentIndex.get(id.agent);
+  const parsed = parseItemId(id);
+  const entries = rope._agentIndex.get(parsed.agent);
   if (!entries) return false;
-  return aiFind(entries, id.seq) !== -1;
+  return aiFind(entries, parsed.seq) !== -1;
 }
 
 function findParentOrdinal(rope: TextRope, parentId: ItemId | null): number {
   if (parentId === null) return -1;
-  const entries = rope._agentIndex.get(parentId.agent);
+  const parsed = parseItemId(parentId);
+  const entries = rope._agentIndex.get(parsed.agent);
   if (!entries) return -1;
-  const ei = aiFind(entries, parentId.seq);
+  const ei = aiFind(entries, parsed.seq);
   if (ei === -1) return -1;
   return computeOrdinal(rope._tree, entries[ei].item);
 }
 
 function splitForParent(rope: TextRope, parentId: ItemId | null): number {
   if (parentId === null) return -1;
-  const entries = rope._agentIndex.get(parentId.agent);
+  const parsedParent = parseItemId(parentId);
+  const entries = rope._agentIndex.get(parsedParent.agent);
   if (!entries) return -1;
-  const ei = aiFind(entries, parentId.seq);
+  const ei = aiFind(entries, parsedParent.seq);
   if (ei === -1) return -1;
   const item = entries[ei].item;
   const ordinal = computeOrdinal(rope._tree, item);
-  const splitOffset = parentId.seq - item.id.seq + 1;
+  const itemParsed = parseItemId(item.id);
+  const splitOffset = parsedParent.seq - itemParsed.seq + 1;
   if (splitOffset < item.content.length) {
     splitItem(rope, ordinal, splitOffset);
   }
@@ -309,7 +347,8 @@ function findInsertPosition(rope: TextRope, position: number): ItemId | null {
 
   const item = result.item as Item;
   const charOffset = Math.min(result.charOffset, item.content.length - 1);
-  return { agent: item.id.agent, seq: item.id.seq + charOffset };
+  const itemParsed = parseItemId(item.id);
+  return createItemId(itemParsed.agent, itemParsed.seq + charOffset);
 }
 
 function findInsertPositionWithSplit(rope: TextRope, position: number): {
@@ -331,7 +370,8 @@ function findInsertPositionWithSplit(rope: TextRope, position: number): {
 
   const item = result.item as Item;
   const charOffset = Math.min(result.charOffset, item.content.length - 1);
-  const parentId: ItemId = { agent: item.id.agent, seq: item.id.seq + charOffset };
+  const itemParsed = parseItemId(item.id);
+  const parentId: ItemId = createItemId(itemParsed.agent, itemParsed.seq + charOffset);
   const needsSplit = charOffset + 1 < item.content.length;
 
   return { parentId, parentOrdinal: result.ordinal, needsSplit, splitOffset: charOffset + 1 };
@@ -348,17 +388,32 @@ function integrate(rope: TextRope, newItem: Item, parentOrdinal: number): void {
   if (insertOrdinal < total) {
     for (const existing of iterateFrom(rope._tree, insertOrdinal)) {
       const existingItem = existing as Item;
+      // First, compare by Lamport timestamp (seq) - higher seq means happened later
       if (newItem.seq > existingItem.seq) break;
 
       const existingParentOrdinal = findParentOrdinal(rope, existingItem.parentId);
-      if (
-        existingParentOrdinal < parentOrdinal ||
-        (existingParentOrdinal === parentOrdinal &&
-          newItem.seq === existingItem.seq &&
-          itemIdCompare(newItem.id, existingItem.id) < 0)
-      ) {
+
+      // If existing item's parent is before our parent in the document, insert here
+      if (existingParentOrdinal < parentOrdinal) {
         break;
       }
+
+      // If same parent and same Lamport seq, use wall-clock time (ts) for tie-breaking
+      if (existingParentOrdinal === parentOrdinal && newItem.seq === existingItem.seq) {
+        // Use ts for tie-breaking (earlier ts wins - inserts first)
+        if (newItem.ts < existingItem.ts) {
+          break;
+        }
+        // If ts also equal (rare), fall back to ID comparison for determinism
+        if (newItem.ts === existingItem.ts && itemIdCompare(newItem.id, existingItem.id) < 0) {
+          break;
+        }
+      }
+
+      // If same parent but different seq, the YATA algorithm says:
+      // Insert before items with lower seq (that happened earlier)
+      // This is already handled by the first check above
+
       insertOrdinal++;
     }
   }
@@ -371,17 +426,19 @@ function _applyLocal(rope: TextRope, op: InsertOp, parentOrdinal: number): void
   if (op.seq > rope.maxSeq) rope.maxSeq = op.seq;
 
   const newItem: Item = {
-    id: { agent: op.id.agent, seq: op.id.seq },
+    id: op.id,
     content: op.content,
     isDeleted: false,
-    parentId: op.parentId ? { agent: op.parentId.agent, seq: op.parentId.seq } : null,
+    parentId: op.parentId,
     seq: op.seq,
+    ts: op.ts,
   };
 
   integrate(rope, newItem, parentOrdinal);
 
-  if (op.id.agent === rope.agentId) {
-    const maxSeqInItem = op.id.seq + op.content.length - 1;
+  const idParsed = parseItemId(op.id);
+  if (idParsed.agent === rope.agentId) {
+    const maxSeqInItem = idParsed.seq + op.content.length - 1;
     if (maxSeqInItem >= rope.clock) rope.clock = maxSeqInItem + 1;
   }
 }
@@ -415,10 +472,11 @@ export function insert(rope: TextRope, position: number, content: string, agentI
   const parentId = findInsertPosition(rope, position);
 
   const op: InsertOp = {
-    id: { agent: rope.agentId, seq: rope.clock },
+    id: createItemId(rope.agentId, rope.clock),
     content,
     parentId,
     seq: rope.maxSeq + 1,
+    ts: Date.now() / 1000,
   };
 
   const parentOrdinal = splitForParent(rope, op.parentId);
@@ -436,10 +494,11 @@ export function insertWithSplit(rope: TextRope, position: number, content: strin
   }
 
   const op: InsertOp = {
-    id: { agent: rope.agentId, seq: rope.clock },
+    id: createItemId(rope.agentId, rope.clock),
     content,
     parentId,
     seq: rope.maxSeq + 1,
+    ts: Date.now() / 1000,
   };
 
   _applyLocal(rope, op, parentOrdinal);
@@ -453,17 +512,19 @@ export function apply(rope: TextRope, op: InsertOp): void {
   const parentOrdinal = splitForParent(rope, op.parentId);
 
   const newItem: Item = {
-    id: { agent: op.id.agent, seq: op.id.seq },
+    id: op.id,
     content: op.content,
     isDeleted: false,
-    parentId: op.parentId ? { agent: op.parentId.agent, seq: op.parentId.seq } : null,
+    parentId: op.parentId,
     seq: op.seq,
+    ts: op.ts,
   };
 
   integrate(rope, newItem, parentOrdinal);
 
-  if (op.id.agent === rope.agentId) {
-    const maxSeqInItem = op.id.seq + op.content.length - 1;
+  const idParsed = parseItemId(op.id);
+  if (idParsed.agent === rope.agentId) {
+    const maxSeqInItem = idParsed.seq + op.content.length - 1;
     if (maxSeqInItem >= rope.clock) rope.clock = maxSeqInItem + 1;
   }
 }
@@ -504,7 +565,7 @@ export function remove(rope: TextRope, position: number, length: number): Delete
     // Delete the item
     item.isDeleted = true;
     recalcCountsFor(rope._tree, item);
-    deletions.push({ id: { ...item.id }, length: item.content.length });
+    deletions.push({ id: item.id, length: item.content.length });
     remaining -= toDelete;
   }
 
@@ -517,9 +578,10 @@ export function applyDelete(rope: TextRope, op: DeleteOp): void {
   // Group and merge deletion ranges by agent
   const byAgent = new Map<string, { start: number; end: number }[]>();
   for (const del of op.deletions) {
-    let ranges = byAgent.get(del.id.agent);
-    if (!ranges) { ranges = []; byAgent.set(del.id.agent, ranges); }
-    ranges.push({ start: del.id.seq, end: del.id.seq + del.length });
+    const parsed = parseItemId(del.id);
+    let ranges = byAgent.get(parsed.agent);
+    if (!ranges) { ranges = []; byAgent.set(parsed.agent, ranges); }
+    ranges.push({ start: parsed.seq, end: parsed.seq + del.length });
   }
 
   for (const [, ranges] of byAgent) {
@@ -564,7 +626,8 @@ function applyDeleteRange(rope: TextRope, agent: string, start: number, end: num
     }
 
     const item = entries[ei].item;
-    const itemStart = item.id.seq;
+    const itemParsed = parseItemId(item.id);
+    const itemStart = itemParsed.seq;
     const itemEnd = itemStart + item.content.length;
     const overlapStart = Math.max(itemStart, start);
     const overlapEnd = Math.min(itemEnd, end);
@@ -608,9 +671,9 @@ export function replace(
 ): ReplaceOp {
   if (agentId !== undefined) switchAgent(rope, agentId);
   const deleteOp = deleteLength > 0 ? remove(rope, position, deleteLength) : { deletions: [] };
-  const insertOp = insertText.length > 0
+  const insertOp: InsertOp = insertText.length > 0
     ? insertWithSplit(rope, position, insertText)
-    : { id: { agent: rope.agentId, seq: rope.clock }, content: '', parentId: null, seq: rope.maxSeq };
+    : { id: createItemId(rope.agentId, rope.clock), content: '', parentId: null, seq: rope.maxSeq, ts: Date.now() / 1000 };
   return { delete: deleteOp, insert: insertOp };
 }
 
@@ -621,7 +684,9 @@ export function applyReplace(rope: TextRope, op: ReplaceOp): void {
   }
 }
 
-export function move(rope: TextRope, fromPosition: number, length: number, toPosition: number): MoveOp {
+export function move(rope: TextRope, fromPosition: number, length: number, toPosition: number, agentId?: string): MoveOp {
+  if (agentId !== undefined) switchAgent(rope, agentId);
+
   // Extract content before deleting
   let content = '';
   let remaining = length;
@@ -668,6 +733,7 @@ export function merge(rope: TextRope, other: TextRope): void {
       content: item.content,
       parentId: item.parentId,
       seq: item.seq,
+      ts: item.ts,
     });
     if (item.isDeleted) {
       applyDelete(rope, { deletions: [{ id: item.id, length: item.content.length }] });
@@ -688,9 +754,16 @@ export function compact(rope: TextRope): TextRope {
     const item = treeItem as Item;
     if (item.isDeleted) continue;
     const newItem: Item = { ...item };
-    if (prevItem && prevItem.id.agent === newItem.id.agent &&
-        prevItem.id.seq + prevItem.content.length === newItem.id.seq) {
-      prevItem.content += newItem.content;
+    if (prevItem) {
+      const prevParsed = parseItemId(prevItem.id);
+      const newParsed = parseItemId(newItem.id);
+      if (prevParsed.agent === newParsed.agent &&
+          prevParsed.seq + prevItem.content.length === newParsed.seq) {
+        prevItem.content += newItem.content;
+      } else {
+        visibleItems.push(newItem);
+        prevItem = newItem;
+      }
     } else {
       visibleItems.push(newItem);
       prevItem = newItem;
@@ -704,29 +777,30 @@ export function compact(rope: TextRope): TextRope {
 // Serialization
 // ============================================
 
-export type RawTextRope = [string, number, number, Array<[string, number, string, string | null, number | null]>];
+export type RawTextRope = [string, number, number, Array<[string, string, string | null, number, number]>];
 
 export function toRaw(rope: TextRope): RawTextRope {
   const compacted = compact(rope);
   const items = flattenItems(compacted._tree) as Item[];
-  const rawItems: Array<[string, number, string, string | null, number | null]> = items.map(item => [
-    item.id.agent,
-    item.id.seq,
+  const rawItems: Array<[string, string, string | null, number, number]> = items.map(item => [
+    item.id,
     item.content,
-    item.parentId?.agent ?? null,
-    item.parentId?.seq ?? null,
+    item.parentId,
+    item.seq,
+    item.ts,
   ]);
   return [rope.agentId, rope.clock, rope.maxSeq, rawItems];
 }
 
 export function fromRaw(raw: RawTextRope, newAgentId?: string): TextRope {
   const [agentId, clock, maxSeq, rawItems] = raw;
-  const items: Item[] = rawItems.map(([agent, seq, content, parentAgent, parentSeq]) => ({
-    id: { agent, seq },
+  const items: Item[] = rawItems.map(([id, content, parentId, seq, ts]) => ({
+    id,
     content,
     isDeleted: false,
-    parentId: parentAgent !== null ? { agent: parentAgent, seq: parentSeq! } : null,
-    seq: maxSeq,
+    parentId,
+    seq,
+    ts,
   }));
   return new TextRope(bulkLoad(items), aiBuild(items), newAgentId ?? agentId, newAgentId ? 0 : clock, maxSeq);
 }
@@ -780,11 +854,13 @@ function extractItemsFromSerializedTree(node: unknown): Item[] {
     const items = n.items as unknown[];
     if (!Array.isArray(items)) return [];
     return items.map((item: any) => ({
-      id: { agent: item.id.agent, seq: item.id.seq },
+      id: typeof item.id === 'string' ? item.id : createItemId(item.id.agent, item.id.seq),
       content: item.content,
       isDeleted: item.isDeleted ?? false,
-      parentId: item.parentId ? { agent: item.parentId.agent, seq: item.parentId.seq } : null,
+      parentId: item.parentId === null ? null :
+        (typeof item.parentId === 'string' ? item.parentId : createItemId(item.parentId.agent, item.parentId.seq)),
       seq: item.seq,
+      ts: item.ts ?? Date.now() / 1000,
     }));
   } else if (n.type === 'internal') {
     // Internal node: recursively collect from children

package/src/operations/OperationTypes.ts

@@ -109,7 +109,7 @@ export interface TextInitOp extends BaseOp {
 /**
  * Insert text - supports two formats:
  * 1. Position-based (for local operations): { position, value }
- * 2. CRDT metadata (for network sync): { id, content, parentId, seq }
+ * 2. CRDT metadata (for network sync): { id, content, parentId, seq, ts }
  */
 export interface TextInsertOp extends BaseOp {
   key: string;
@@ -119,10 +119,11 @@ export interface TextInsertOp extends BaseOp {
   position?: number;
   value?: string;
   // CRDT metadata format (network sync)
-  id?: { agent: string; seq: number };
+  id?: string;  // ItemId string format: "agent:seq"
   content?: string;
-  parentId?: { agent: string; seq: number } | null;
+  parentId?: string | null;  // ItemId string format
   seq?: number;  // Lamport timestamp
+  ts?: number;  // Wall-clock time (seconds) for tie-breaking
 }
 
 /**
@@ -138,13 +139,13 @@ export interface TextDeleteOp extends BaseOp {
   position?: number;
   length?: number;
   // CRDT metadata format (network sync)
-  deletions?: Array<{ id: { agent: string; seq: number }; length: number }>;
+  deletions?: Array<{ id: string; length: number }>;  // ItemId string format
 }
 
 /**
  * Replace text - atomic delete + insert (for select-and-type)
  * Position-based: { position, length, value }
- * CRDT metadata: { deletions, id, content, parentId, seq }
+ * CRDT metadata: { deletions, id, content, parentId, seq, ts }
  */
 export interface TextReplaceOp extends BaseOp {
   key: string;
@@ -155,11 +156,12 @@ export interface TextReplaceOp extends BaseOp {
   length?: number;    // chars to delete
   value?: string;     // chars to insert
   // CRDT metadata format (network sync)
-  deletions?: Array<{ id: { agent: string; seq: number }; length: number }>;
-  id?: { agent: string; seq: number };
+  deletions?: Array<{ id: string; length: number }>;  // ItemId string format
+  id?: string;  // ItemId string format
   content?: string;
-  parentId?: { agent: string; seq: number } | null;
+  parentId?: string | null;  // ItemId string format
   seq?: number;
+  ts?: number;  // Wall-clock time (seconds) for tie-breaking
 }
 
 // ============================================

package/src/operations/apply/text.ts

@@ -98,13 +98,9 @@ export function TextInit(
   op: TextInitOp,
   meta: OpMeta
 ): void {
-  let node = draft.nodes[op.key];
+  const node = draft.nodes[op.key];
   if (!node) return;
 
-  // Clone node to trigger React re-render
-  node = { ...node, children: node.children ? [...node.children] : [] };
-  draft.nodes[op.key] = node;
-
   const rope = getOrCreateRope(node, op.path, meta.sessionId);
 
   if (op.value && op.value.length > 0) {
@@ -122,13 +118,9 @@ export function TextInsert(
   op: TextInsertOp,
   meta: OpMeta
 ): void {
-  let node = draft.nodes[op.key];
+  const node = draft.nodes[op.key];
   if (!node) return;
 
-  // Clone node to trigger React re-render
-  node = { ...node, children: node.children ? [...node.children] : [] };
-  draft.nodes[op.key] = node;
-
   const rope = getOrCreateRope(node, op.path, meta.sessionId);
 
   if (op.id !== undefined && op.content !== undefined && op.seq !== undefined) {
@@ -138,6 +130,7 @@ export function TextInsert(
       content: op.content,
       parentId: op.parentId ?? null,
       seq: op.seq,
+      ts: op.ts ?? Date.now() / 1000,
     });
   } else if (op.position !== undefined && op.value !== undefined) {
     // Position-based format (local edit) → convert to CRDT metadata in-place
@@ -147,6 +140,7 @@ export function TextInsert(
     op.content = crdtOp.content;
     op.parentId = crdtOp.parentId;
     op.seq = crdtOp.seq;
+    op.ts = crdtOp.ts;
   }
 
   // node[path] is the mutated TextRope (React will call .toString())
@@ -160,16 +154,12 @@ export function TextDelete(
   op: TextDeleteOp,
   meta: OpMeta
 ): void {
-  let node = draft.nodes[op.key];
+  const node = draft.nodes[op.key];
   if (!node) return;
 
   const rope = getRope(node, op.path);
   if (!rope) return;
 
-  // Clone node to trigger React re-render
-  node = { ...node, children: node.children ? [...node.children] : [] };
-  draft.nodes[op.key] = node;
-
   if (op.deletions !== undefined) {
     // CRDT metadata format (replay from journal)
     applyDelete(rope, { deletions: op.deletions });
@@ -190,13 +180,9 @@ export function TextReplace(
   op: TextReplaceOp,
   meta: OpMeta
 ): void {
-  let node = draft.nodes[op.key];
+  const node = draft.nodes[op.key];
   if (!node) return;
 
-  // Clone node to trigger React re-render
-  node = { ...node, children: node.children ? [...node.children] : [] };
-  draft.nodes[op.key] = node;
-
   const rope = getOrCreateRope(node, op.path, meta.sessionId);
 
   if (op.deletions !== undefined && op.id !== undefined && op.seq !== undefined) {
@@ -208,6 +194,7 @@ export function TextReplace(
         content: op.content ?? '',
         parentId: op.parentId ?? null,
         seq: op.seq,
+        ts: op.ts ?? Date.now() / 1000,
       },
     });
   } else if (op.position !== undefined && op.length !== undefined && op.value !== undefined) {
@@ -218,6 +205,7 @@ export function TextReplace(
     op.content = crdtOp.insert.content;
     op.parentId = crdtOp.insert.parentId;
     op.seq = crdtOp.insert.seq;
+    op.ts = crdtOp.insert.ts;
   }
 
   // node[path] is the mutated TextRope