fix(undo-redo): bound persisted history by size, not just operation count

The undo-redo store persists operation snapshots to localStorage bounded
only by MAX_STACKS (5) x DEFAULT_CAPACITY (100) operations. A single
operation can carry several KB of block state, so active editing lets the
persisted history grow to multiple megabytes and exhaust the origin's
shared ~5 MB localStorage budget.

Once that budget is gone, the next setItem from any other persisted store
throws QuotaExceededError, so the store that surfaces the error is the
victim rather than the culprit. The existing safeStorageAdapter only stops
this store's own writes from throwing; it does nothing to stop the store
from starving its siblings.

Cap the serialized footprint at MAX_PERSISTED_BYTES and trim inside
partialize, evicting the oldest operations across stacks and dropping any
stack left empty. Only the persisted copy is trimmed, so the in-memory
history is untouched and the current session stays fully undoable.

Tests cover the reproduction (heavy editing stays within budget, newest
operations survive) and the trim function directly (no-op when under
budget, oldest-first eviction, input not mutated, empty stacks dropped).

Fixes #4737

Author: rohitsudhakar1

apps/sim/stores/undo-redo/store.test.ts

@@ -21,7 +21,11 @@ import {
   createUpdateParentEntry,
 } from '@sim/testing'
 import { beforeEach, describe, expect, it } from 'vitest'
-import { runWithUndoRedoRecordingSuspended, useUndoRedoStore } from '@/stores/undo-redo/store'
+import {
+  runWithUndoRedoRecordingSuspended,
+  trimPersistedStateToBudget,
+  useUndoRedoStore,
+} from '@/stores/undo-redo/store'
 import type { UpdateParentOperation } from '@/stores/undo-redo/types'
 
 describe('useUndoRedoStore', () => {
@@ -762,4 +766,131 @@ describe('useUndoRedoStore', () => {
       expect(parentEntry?.operation.type).toBe('update-parent')
     })
   })
+
+  describe('persisted size budget (issue #4737)', () => {
+    // Build an entry whose operation + inverse each carry a large block snapshot,
+    // approximating the multi-KB snapshots real editing produces.
+    const bigEntry = (index: number, approxBytes = 15_000) => {
+      const snapshot = {
+        id: `block-${index}`,
+        type: 'action',
+        name: `Block ${index}`,
+        position: { x: index, y: index },
+        subBlocks: { note: { id: 'note', type: 'long-input', value: 'x'.repeat(approxBytes) } },
+      }
+      return createRemoveBlockEntry(`block-${index}`, snapshot, {
+        workflowId,
+        userId,
+        createdAt: index,
+      })
+    }
+
+    it('keeps the persisted payload within a sane byte budget under heavy editing', () => {
+      const { push } = useUndoRedoStore.getState()
+
+      // A single stack at default capacity (100) of ~30 KB entries serializes to
+      // ~3 MB — enough on its own to exhaust the origin's shared ~5 MB budget and
+      // make an unrelated persisted store throw QuotaExceededError on its next
+      // write. The persisted footprint must stay bounded regardless of op count.
+      for (let i = 0; i < 100; i++) {
+        push(workflowId, userId, bigEntry(i))
+      }
+
+      const persisted = global.localStorage.getItem('workflow-undo-redo')
+      expect(persisted).not.toBeNull()
+
+      // A sane share of the ~5 MB origin budget, leaving room for sibling stores.
+      const SANE_BUDGET_BYTES = 2 * 1024 * 1024
+      expect(persisted!.length).toBeLessThanOrEqual(SANE_BUDGET_BYTES)
+    })
+
+    it('keeps recent history usable after trimming (newest ops survive)', () => {
+      const { push, getStackSizes } = useUndoRedoStore.getState()
+
+      for (let i = 0; i < 100; i++) {
+        push(workflowId, userId, bigEntry(i))
+      }
+
+      // Trimming targets storage only; the in-memory stack stays fully intact, so
+      // the current session remains undoable to its capacity.
+      expect(getStackSizes(workflowId, userId).undoSize).toBe(100)
+
+      const persisted = JSON.parse(global.localStorage.getItem('workflow-undo-redo')!)
+      const undo = persisted.state.stacks[`${workflowId}:${userId}`].undo
+      // Some history is persisted, and it's the newest slice (oldest evicted first).
+      expect(undo.length).toBeGreaterThan(0)
+      expect(undo.length).toBeLessThan(100)
+      const createdAts = undo.map((e: { createdAt: number }) => e.createdAt)
+      expect(createdAts[createdAts.length - 1]).toBe(99)
+      expect(Math.min(...createdAts)).toBeGreaterThan(0)
+    })
+  })
+
+  describe('trimPersistedStateToBudget', () => {
+    const entryOfSize = (createdAt: number, chars: number) => ({
+      id: `e-${createdAt}`,
+      createdAt,
+      operation: { id: `op-${createdAt}`, data: { blob: 'x'.repeat(chars) } },
+      inverse: { id: `inv-${createdAt}`, data: {} },
+    })
+
+    it('returns the state unchanged when already within budget', () => {
+      const state = {
+        capacity: 100,
+        stacks: { 'wf:user': { undo: [entryOfSize(1, 10)], redo: [], lastUpdated: 1 } },
+      } as any
+      expect(trimPersistedStateToBudget(state, 1024 * 1024)).toBe(state)
+    })
+
+    it('evicts oldest-first across stacks until under budget', () => {
+      const state = {
+        capacity: 100,
+        stacks: {
+          a: {
+            undo: [entryOfSize(1, 5000), entryOfSize(4, 5000)],
+            redo: [entryOfSize(2, 5000)],
+            lastUpdated: 4,
+          },
+          b: { undo: [entryOfSize(3, 5000)], redo: [], lastUpdated: 3 },
+        },
+      } as any
+
+      const budget = 12_000
+      const trimmed = trimPersistedStateToBudget(state, budget)
+
+      expect(JSON.stringify(trimmed).length).toBeLessThanOrEqual(budget)
+      // The oldest entries (createdAt 1, 2) are gone; the newest (3, 4) survive.
+      const survivors = Object.values(trimmed.stacks)
+        .flatMap((s: any) => [...s.undo, ...s.redo])
+        .map((e: any) => e.createdAt)
+        .sort((x, y) => x - y)
+      expect(survivors).toEqual([3, 4])
+    })
+
+    it('does not mutate the input state', () => {
+      const state = {
+        capacity: 100,
+        stacks: {
+          a: { undo: [entryOfSize(1, 5000), entryOfSize(2, 5000)], redo: [], lastUpdated: 2 },
+        },
+      } as any
+
+      trimPersistedStateToBudget(state, 6000)
+      expect(state.stacks.a.undo).toHaveLength(2)
+    })
+
+    it('drops stacks emptied by eviction', () => {
+      const state = {
+        capacity: 100,
+        stacks: {
+          old: { undo: [entryOfSize(1, 8000)], redo: [], lastUpdated: 1 },
+          fresh: { undo: [entryOfSize(2, 100)], redo: [], lastUpdated: 2 },
+        },
+      } as any
+
+      const trimmed = trimPersistedStateToBudget(state, 4000)
+      expect(trimmed.stacks.old).toBeUndefined()
+      expect(trimmed.stacks.fresh).toBeDefined()
+    })
+  })
 })

apps/sim/stores/undo-redo/store.ts

@@ -20,6 +20,24 @@ const logger = createLogger('UndoRedoStore')
 const DEFAULT_CAPACITY = 100
 const MAX_STACKS = 5
 
+/**
+ * Upper bound on the *serialized* size of the persisted history.
+ *
+ * DEFAULT_CAPACITY and MAX_STACKS bound how many operations are retained, not how
+ * many bytes they occupy — and a single operation can carry several KB of block
+ * snapshots. Left unbounded by size, the history can still grow to multiple
+ * megabytes and exhaust the origin's shared ~5 MB localStorage budget; the
+ * resulting QuotaExceededError then surfaces in whichever *other* persisted store
+ * writes next (notification-storage, panel state, …), so the store that throws is
+ * the victim, not the culprit. Capping the footprint here keeps undo/redo from
+ * starving its siblings. Only the persisted copy is trimmed (oldest operations
+ * first); the in-memory history is left intact, so the current session stays
+ * fully undoable.
+ */
+// ~2 MB: a conservative minority of the typical ~5 MB origin budget, so the
+// majority stays available to sibling persisted stores.
+export const MAX_PERSISTED_BYTES = 2 * 1024 * 1024
+
 let recordingSuspendDepth = 0
 
 function isRecordingSuspended(): boolean {
@@ -120,6 +138,72 @@ function isOperationApplicable(
   }
 }
 
+type PersistedUndoRedoState = Pick<UndoRedoState, 'stacks' | 'capacity'>
+
+function serializedLength(value: unknown): number {
+  return JSON.stringify(value)?.length ?? 0
+}
+
+/**
+ * Returns a copy of the persisted state trimmed so its serialized size fits
+ * `maxBytes`, evicting the oldest operations (by `createdAt`) across every stack
+ * first and dropping any stack left empty. The input is never mutated, so the
+ * live in-memory history is unaffected — only what gets written to storage shrinks.
+ */
+export function trimPersistedStateToBudget(
+  state: PersistedUndoRedoState,
+  maxBytes: number
+): PersistedUndoRedoState {
+  if (serializedLength(state) <= maxBytes) return state
+
+  // Clone stacks (and their arrays) so eviction never touches the live state.
+  const stacks: PersistedUndoRedoState['stacks'] = {}
+  for (const [key, stack] of Object.entries(state.stacks)) {
+    stacks[key] = { ...stack, undo: [...stack.undo], redo: [...stack.redo] }
+  }
+
+  // Every removable entry, oldest first.
+  const removable = Object.entries(stacks)
+    .flatMap(([key, stack]) => [
+      ...stack.undo.map((entry) => ({ key, list: 'undo' as const, entry })),
+      ...stack.redo.map((entry) => ({ key, list: 'redo' as const, entry })),
+    ])
+    .sort((a, b) => a.entry.createdAt - b.entry.createdAt)
+
+  const drop = ({ key, list, entry }: (typeof removable)[number]): void => {
+    const stack = stacks[key]
+    if (!stack) return
+    const arr = stack[list]
+    const idx = arr.indexOf(entry)
+    if (idx !== -1) arr.splice(idx, 1)
+    // Reclaim the key/overhead of a stack emptied by eviction.
+    if (stack.undo.length === 0 && stack.redo.length === 0) delete stacks[key]
+  }
+
+  // Pass 1: estimate-based bulk eviction. Subtracting each entry's own serialized
+  // length (plus a separating comma) avoids re-serializing the whole payload on
+  // every eviction, which would be O(n²) over the megabytes involved.
+  let approxBytes = serializedLength(state)
+  let i = 0
+  for (; i < removable.length && approxBytes > maxBytes; i++) {
+    approxBytes -= serializedLength(removable[i].entry) + 1
+    drop(removable[i])
+  }
+
+  // Pass 2: the estimate can undershoot the true reduction (structural overhead it
+  // doesn't attribute to entries), so verify exactly and keep dropping the oldest
+  // survivors until the invariant holds. In practice this runs zero or one times.
+  while (
+    i < removable.length &&
+    serializedLength({ stacks, capacity: state.capacity }) > maxBytes
+  ) {
+    drop(removable[i])
+    i++
+  }
+
+  return { stacks, capacity: state.capacity }
+}
+
 export const useUndoRedoStore = create<UndoRedoState>()(
   persist(
     (set, get) => ({
@@ -502,10 +586,11 @@ export const useUndoRedoStore = create<UndoRedoState>()(
     {
       name: 'workflow-undo-redo',
       storage: createJSONStorage(() => safeStorageAdapter),
-      partialize: (state) => ({
-        stacks: state.stacks,
-        capacity: state.capacity,
-      }),
+      partialize: (state) =>
+        trimPersistedStateToBudget(
+          { stacks: state.stacks, capacity: state.capacity },
+          MAX_PERSISTED_BYTES
+        ),
     }
   )
 )