fix(undo-redo): persist unified stack to IndexedDB with throttled writes

Code-field undo frames are large and accumulate quickly; keeping them in the
synchronous localStorage-backed stack risked main-thread jank on every keystroke
and the ~5MB quota. Move the unified undo store to async IndexedDB (idb-keyval),
matching how the old separate code stack was persisted.

- Replace the localStorage persist adapter with a throttled IndexedDB adapter
  (coalesces a burst of writes into one transaction; flushes on tab hide)
- Delete the now-orphaned code-storage adapter

Author: waleedlatif1

apps/sim/stores/undo-redo/code-storage.ts

@@ -0,0 +1,68 @@
+import { createLogger } from '@sim/logger'
+import { del, get, set } from 'idb-keyval'
+import type { StateStorage } from 'zustand/middleware'
+
+const logger = createLogger('UndoRedoStorage')
+
+/** A burst of edits within this window is persisted as a single IndexedDB write. */
+const PERSIST_THROTTLE_MS = 1000
+
+/**
+ * IndexedDB-backed persistence for the undo/redo store. Unlike localStorage it is
+ * asynchronous (never blocks the main thread on write) and has a large quota, so it
+ * tolerates the volume of large code-field undo frames. Writes are throttled so a
+ * burst of keystrokes produces a single transaction rather than one write per change.
+ */
+function createThrottledIndexedDbStorage(): StateStorage {
+  const pending = new Map<string, string>()
+  let timer: ReturnType<typeof setTimeout> | null = null
+
+  const flush = (): void => {
+    timer = null
+    const writes = [...pending]
+    pending.clear()
+    for (const [name, value] of writes) {
+      void set(name, value).catch((error) => logger.warn('IndexedDB write failed', { name, error }))
+    }
+  }
+
+  if (typeof window !== 'undefined') {
+    // Persist any pending write before the tab is hidden or closed so it isn't lost.
+    const flushOnHide = () => {
+      if (document.visibilityState === 'hidden') flush()
+    }
+    window.addEventListener('pagehide', flush)
+    document.addEventListener('visibilitychange', flushOnHide)
+  }
+
+  return {
+    getItem: async (name: string): Promise<string | null> => {
+      if (typeof window === 'undefined') return null
+      if (pending.has(name)) return pending.get(name) ?? null
+      try {
+        return (await get<string>(name)) ?? null
+      } catch (error) {
+        logger.warn('IndexedDB read failed', { name, error })
+        return null
+      }
+    },
+
+    setItem: (name: string, value: string): void => {
+      if (typeof window === 'undefined') return
+      pending.set(name, value)
+      if (!timer) timer = setTimeout(flush, PERSIST_THROTTLE_MS)
+    },
+
+    removeItem: async (name: string): Promise<void> => {
+      if (typeof window === 'undefined') return
+      pending.delete(name)
+      try {
+        await del(name)
+      } catch (error) {
+        logger.warn('IndexedDB delete failed', { name, error })
+      }
+    },
+  }
+}
+
+export const undoRedoStorage: StateStorage = createThrottledIndexedDbStorage()

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

@@ -4,6 +4,7 @@ import { isEqual } from 'es-toolkit'
 import type { Edge } from 'reactflow'
 import { create } from 'zustand'
 import { createJSONStorage, persist } from 'zustand/middleware'
+import { undoRedoStorage } from '@/stores/undo-redo/storage'
 import type {
   BatchAddBlocksOperation,
   BatchAddEdgesOperation,
@@ -136,41 +137,6 @@ function getStackKey(workflowId: string, userId: string): string {
   return `${workflowId}:${userId}`
 }
 
-/**
- * Custom storage adapter for Zustand's persist middleware.
- * We need this wrapper to gracefully handle 'QuotaExceededError' when localStorage is full,
- * Without this, the default storage engine would throw and crash the application.
- * and to properly handle SSR/Node.js environments.
- */
-const safeStorageAdapter = {
-  getItem: (name: string): string | null => {
-    if (typeof localStorage === 'undefined') return null
-    try {
-      return localStorage.getItem(name)
-    } catch (e) {
-      logger.warn('Failed to read from localStorage', e)
-      return null
-    }
-  },
-  setItem: (name: string, value: string): void => {
-    if (typeof localStorage === 'undefined') return
-    try {
-      localStorage.setItem(name, value)
-    } catch (e) {
-      // Log warning but don't crash - this handles QuotaExceededError
-      logger.warn('Failed to save to localStorage', e)
-    }
-  },
-  removeItem: (name: string): void => {
-    if (typeof localStorage === 'undefined') return
-    try {
-      localStorage.removeItem(name)
-    } catch (e) {
-      logger.warn('Failed to remove from localStorage', e)
-    }
-  },
-}
-
 function isOperationApplicable(
   operation: Operation,
   graph: { blocksById: Record<string, BlockState>; edgesById: Record<string, Edge> }
@@ -648,7 +614,7 @@ export const useUndoRedoStore = create<UndoRedoState>()(
     }),
     {
       name: 'workflow-undo-redo',
-      storage: createJSONStorage(() => safeStorageAdapter),
+      storage: createJSONStorage(() => undoRedoStorage),
       partialize: (state) => ({
         stacks: state.stacks,
         capacity: state.capacity,