Add autosync manager serialization tests

json-components-registry.json

@@ -80,11 +80,7 @@
       "status": "json-compatible",
       "source": "wrappers",
       "jsonCompatible": true,
-      "wrapperFor": "ComponentBindingDialog",
-      "loadFrom": {
-        "module": "wrappers",
-        "export": "ComponentBindingDialogWrapper"
-      }
+      "wrapperFor": "ComponentBindingDialog"
     },
     {
       "type": "Container",
@@ -126,11 +122,7 @@
       "status": "json-compatible",
       "source": "wrappers",
       "jsonCompatible": true,
-      "wrapperFor": "DataSourceEditorDialog",
-      "loadFrom": {
-        "module": "wrappers",
-        "export": "DataSourceEditorDialogWrapper"
-      }
+      "wrapperFor": "DataSourceEditorDialog"
     },
     {
       "type": "Dialog",
@@ -732,11 +724,7 @@
       "canHaveChildren": false,
       "description": "ArrowLeft icon",
       "status": "supported",
-      "source": "icons",
-      "loadFrom": {
-        "module": "icons",
-        "export": "ArrowLeft"
-      }
+      "source": "icons"
     },
     {
       "type": "ArrowRight",
@@ -745,11 +733,7 @@
       "canHaveChildren": false,
       "description": "ArrowRight icon",
       "status": "supported",
-      "source": "icons",
-      "loadFrom": {
-        "module": "icons",
-        "export": "ArrowRight"
-      }
+      "source": "icons"
     },
     {
       "type": "Check",
@@ -758,11 +742,7 @@
       "canHaveChildren": false,
       "description": "Check icon",
       "status": "supported",
-      "source": "icons",
-      "loadFrom": {
-        "module": "icons",
-        "export": "Check"
-      }
+      "source": "icons"
     },
     {
       "type": "X",
@@ -771,11 +751,7 @@
       "canHaveChildren": false,
       "description": "X icon",
       "status": "supported",
-      "source": "icons",
-      "loadFrom": {
-        "module": "icons",
-        "export": "X"
-      }
+      "source": "icons"
     },
     {
       "type": "Plus",
@@ -784,11 +760,7 @@
       "canHaveChildren": false,
       "description": "Plus icon",
       "status": "supported",
-      "source": "icons",
-      "loadFrom": {
-        "module": "icons",
-        "export": "Plus"
-      }
+      "source": "icons"
     },
     {
       "type": "Minus",
@@ -797,11 +769,7 @@
       "canHaveChildren": false,
       "description": "Minus icon",
       "status": "supported",
-      "source": "icons",
-      "loadFrom": {
-        "module": "icons",
-        "export": "Minus"
-      }
+      "source": "icons"
     },
     {
       "type": "Search",
@@ -810,11 +778,7 @@
       "canHaveChildren": false,
       "description": "Search icon",
       "status": "supported",
-      "source": "icons",
-      "loadFrom": {
-        "module": "icons",
-        "export": "MagnifyingGlass"
-      }
+      "source": "icons"
     },
     {
       "type": "Filter",
@@ -823,11 +787,7 @@
       "canHaveChildren": false,
       "description": "Filter icon",
       "status": "supported",
-      "source": "icons",
-      "loadFrom": {
-        "module": "icons",
-        "export": "Funnel"
-      }
+      "source": "icons"
     },
     {
       "type": "Download",
@@ -836,11 +796,7 @@
       "canHaveChildren": false,
       "description": "Download icon",
       "status": "supported",
-      "source": "icons",
-      "loadFrom": {
-        "module": "icons",
-        "export": "Download"
-      }
+      "source": "icons"
     },
     {
       "type": "Upload",
@@ -849,11 +805,7 @@
       "canHaveChildren": false,
       "description": "Upload icon",
       "status": "supported",
-      "source": "icons",
-      "loadFrom": {
-        "module": "icons",
-        "export": "Upload"
-      }
+      "source": "icons"
     },
     {
       "type": "Edit",
@@ -862,11 +814,7 @@
       "canHaveChildren": false,
       "description": "Edit icon",
       "status": "supported",
-      "source": "icons",
-      "loadFrom": {
-        "module": "icons",
-        "export": "PencilSimple"
-      }
+      "source": "icons"
     },
     {
       "type": "Trash",
@@ -875,11 +823,7 @@
       "canHaveChildren": false,
       "description": "Trash icon",
       "status": "supported",
-      "source": "icons",
-      "loadFrom": {
-        "module": "icons",
-        "export": "Trash"
-      }
+      "source": "icons"
     },
     {
       "type": "Eye",
@@ -888,11 +832,7 @@
       "canHaveChildren": false,
       "description": "Eye icon",
       "status": "supported",
-      "source": "icons",
-      "loadFrom": {
-        "module": "icons",
-        "export": "Eye"
-      }
+      "source": "icons"
     },
     {
       "type": "EyeOff",
@@ -901,11 +841,7 @@
       "canHaveChildren": false,
       "description": "EyeOff icon",
       "status": "supported",
-      "source": "icons",
-      "loadFrom": {
-        "module": "icons",
-        "export": "EyeClosed"
-      }
+      "source": "icons"
     },
     {
       "type": "ChevronUp",
@@ -914,11 +850,7 @@
       "canHaveChildren": false,
       "description": "ChevronUp icon",
       "status": "supported",
-      "source": "icons",
-      "loadFrom": {
-        "module": "icons",
-        "export": "CaretUp"
-      }
+      "source": "icons"
     },
     {
       "type": "ChevronDown",
@@ -927,11 +859,7 @@
       "canHaveChildren": false,
       "description": "ChevronDown icon",
       "status": "supported",
-      "source": "icons",
-      "loadFrom": {
-        "module": "icons",
-        "export": "CaretDown"
-      }
+      "source": "icons"
     },
     {
       "type": "ChevronLeft",
@@ -940,11 +868,7 @@
       "canHaveChildren": false,
       "description": "ChevronLeft icon",
       "status": "supported",
-      "source": "icons",
-      "loadFrom": {
-        "module": "icons",
-        "export": "CaretLeft"
-      }
+      "source": "icons"
     },
     {
       "type": "ChevronRight",
@@ -953,11 +877,7 @@
       "canHaveChildren": false,
       "description": "ChevronRight icon",
       "status": "supported",
-      "source": "icons",
-      "loadFrom": {
-        "module": "icons",
-        "export": "CaretRight"
-      }
+      "source": "icons"
     },
     {
       "type": "Settings",
@@ -966,11 +886,7 @@
       "canHaveChildren": false,
       "description": "Settings icon",
       "status": "supported",
-      "source": "icons",
-      "loadFrom": {
-        "module": "icons",
-        "export": "Gear"
-      }
+      "source": "icons"
     },
     {
       "type": "User",
@@ -979,11 +895,7 @@
       "canHaveChildren": false,
       "description": "User icon",
       "status": "supported",
-      "source": "icons",
-      "loadFrom": {
-        "module": "icons",
-        "export": "User"
-      }
+      "source": "icons"
     },
     {
       "type": "Bell",
@@ -992,11 +904,7 @@
       "canHaveChildren": false,
       "description": "Bell icon",
       "status": "supported",
-      "source": "icons",
-      "loadFrom": {
-        "module": "icons",
-        "export": "Bell"
-      }
+      "source": "icons"
     },
     {
       "type": "Mail",
@@ -1005,11 +913,7 @@
       "canHaveChildren": false,
       "description": "Mail icon",
       "status": "supported",
-      "source": "icons",
-      "loadFrom": {
-        "module": "icons",
-        "export": "Envelope"
-      }
+      "source": "icons"
     },
     {
       "type": "Calendar",
@@ -1018,11 +922,7 @@
       "canHaveChildren": false,
       "description": "Calendar icon",
       "status": "supported",
-      "source": "icons",
-      "loadFrom": {
-        "module": "icons",
-        "export": "Calendar"
-      }
+      "source": "icons"
     },
     {
       "type": "Clock",
@@ -1031,11 +931,7 @@
       "canHaveChildren": false,
       "description": "Clock icon",
       "status": "supported",
-      "source": "icons",
-      "loadFrom": {
-        "module": "icons",
-        "export": "Clock"
-      }
+      "source": "icons"
     },
     {
       "type": "Star",
@@ -1044,11 +940,7 @@
       "canHaveChildren": false,
       "description": "Star icon",
       "status": "supported",
-      "source": "icons",
-      "loadFrom": {
-        "module": "icons",
-        "export": "Star"
-      }
+      "source": "icons"
     },
     {
       "type": "Heart",
@@ -1057,11 +949,7 @@
       "canHaveChildren": false,
       "description": "Heart icon",
       "status": "supported",
-      "source": "icons",
-      "loadFrom": {
-        "module": "icons",
-        "export": "Heart"
-      }
+      "source": "icons"
     },
     {
       "type": "Share",
@@ -1070,11 +958,7 @@
       "canHaveChildren": false,
       "description": "Share icon",
       "status": "supported",
-      "source": "icons",
-      "loadFrom": {
-        "module": "icons",
-        "export": "ShareNetwork"
-      }
+      "source": "icons"
     },
     {
       "type": "Link",
@@ -1083,11 +967,7 @@
       "canHaveChildren": false,
       "description": "Link icon",
       "status": "supported",
-      "source": "icons",
-      "loadFrom": {
-        "module": "icons",
-        "export": "LinkSimple"
-      }
+      "source": "icons"
     },
     {
       "type": "Copy",
@@ -1096,11 +976,7 @@
       "canHaveChildren": false,
       "description": "Copy icon",
       "status": "supported",
-      "source": "icons",
-      "loadFrom": {
-        "module": "icons",
-        "export": "Copy"
-      }
+      "source": "icons"
     },
     {
       "type": "Save",
@@ -1109,11 +985,7 @@
       "canHaveChildren": false,
       "description": "Save icon",
       "status": "supported",
-      "source": "icons",
-      "loadFrom": {
-        "module": "icons",
-        "export": "FloppyDisk"
-      }
+      "source": "icons"
     },
     {
       "type": "RefreshCw",
@@ -1122,11 +994,7 @@
       "canHaveChildren": false,
       "description": "RefreshCw icon",
       "status": "supported",
-      "source": "icons",
-      "loadFrom": {
-        "module": "icons",
-        "export": "ArrowClockwise"
-      }
+      "source": "icons"
     },
     {
       "type": "AlertCircle",
@@ -1135,11 +1003,7 @@
       "canHaveChildren": false,
       "description": "AlertCircle icon",
       "status": "supported",
-      "source": "icons",
-      "loadFrom": {
-        "module": "icons",
-        "export": "WarningCircle"
-      }
+      "source": "icons"
     },
     {
       "type": "Info",
@@ -1148,11 +1012,7 @@
       "canHaveChildren": false,
       "description": "Info icon",
       "status": "supported",
-      "source": "icons",
-      "loadFrom": {
-        "module": "icons",
-        "export": "Info"
-      }
+      "source": "icons"
     },
     {
       "type": "HelpCircle",
@@ -1161,11 +1021,7 @@
       "canHaveChildren": false,
       "description": "HelpCircle icon",
       "status": "supported",
-      "source": "icons",
-      "loadFrom": {
-        "module": "icons",
-        "export": "Question"
-      }
+      "source": "icons"
     },
     {
       "type": "Home",
@@ -1174,11 +1030,7 @@
       "canHaveChildren": false,
       "description": "Home icon",
       "status": "supported",
-      "source": "icons",
-      "loadFrom": {
-        "module": "icons",
-        "export": "House"
-      }
+      "source": "icons"
     },
     {
       "type": "Menu",
@@ -1187,11 +1039,7 @@
       "canHaveChildren": false,
       "description": "Menu icon",
       "status": "supported",
-      "source": "icons",
-      "loadFrom": {
-        "module": "icons",
-        "export": "List"
-      }
+      "source": "icons"
     },
     {
       "type": "MoreVertical",
@@ -1200,11 +1048,7 @@
       "canHaveChildren": false,
       "description": "MoreVertical icon",
       "status": "supported",
-      "source": "icons",
-      "loadFrom": {
-        "module": "icons",
-        "export": "DotsThreeVertical"
-      }
+      "source": "icons"
     },
     {
       "type": "MoreHorizontal",
@@ -1213,11 +1057,7 @@
       "canHaveChildren": false,
       "description": "MoreHorizontal icon",
       "status": "supported",
-      "source": "icons",
-      "loadFrom": {
-        "module": "icons",
-        "export": "DotsThree"
-      }
+      "source": "icons"
     },
     {
       "type": "Breadcrumb",
@@ -1435,11 +1275,7 @@
       "status": "json-compatible",
       "source": "wrappers",
       "jsonCompatible": true,
-      "wrapperFor": "GitHubBuildStatus",
-      "loadFrom": {
-        "module": "wrappers",
-        "export": "GitHubBuildStatusWrapper"
-      }
+      "wrapperFor": "GitHubBuildStatus"
     },
     {
       "type": "InfoBox",
@@ -1601,11 +1437,7 @@
       "status": "json-compatible",
       "source": "wrappers",
       "jsonCompatible": true,
-      "wrapperFor": "LazyBarChart",
-      "loadFrom": {
-        "module": "wrappers",
-        "export": "LazyBarChartWrapper"
-      }
+      "wrapperFor": "LazyBarChart"
     },
     {
       "type": "LazyD3BarChart",
@@ -1628,11 +1460,7 @@
       "status": "json-compatible",
       "source": "wrappers",
       "jsonCompatible": true,
-      "wrapperFor": "LazyD3BarChart",
-      "loadFrom": {
-        "module": "wrappers",
-        "export": "LazyD3BarChartWrapper"
-      }
+      "wrapperFor": "LazyD3BarChart"
     },
     {
       "type": "LazyLineChart",
@@ -1655,11 +1483,7 @@
       "status": "json-compatible",
       "source": "wrappers",
       "jsonCompatible": true,
-      "wrapperFor": "LazyLineChart",
-      "loadFrom": {
-        "module": "wrappers",
-        "export": "LazyLineChartWrapper"
-      }
+      "wrapperFor": "LazyLineChart"
     },
     {
       "type": "List",
@@ -1718,11 +1542,7 @@
       "status": "json-compatible",
       "source": "wrappers",
       "jsonCompatible": true,
-      "wrapperFor": "SeedDataManager",
-      "loadFrom": {
-        "module": "wrappers",
-        "export": "SeedDataManagerWrapper"
-      }
+      "wrapperFor": "SeedDataManager"
     },
     {
       "type": "StatCard",
@@ -2009,11 +1829,7 @@
       "status": "json-compatible",
       "source": "wrappers",
       "jsonCompatible": true,
-      "wrapperFor": "ComponentTree",
-      "loadFrom": {
-        "module": "wrappers",
-        "export": "ComponentTreeWrapper"
-      }
+      "wrapperFor": "ComponentTree"
     },
     {
       "type": "ComponentTreeNode",
@@ -2256,11 +2072,7 @@
       "status": "json-compatible",
       "source": "wrappers",
       "jsonCompatible": true,
-      "wrapperFor": "SaveIndicator",
-      "loadFrom": {
-        "module": "wrappers",
-        "export": "SaveIndicatorWrapper"
-      }
+      "wrapperFor": "SaveIndicator"
     },
     {
       "type": "SchemaEditorCanvas",
@@ -2424,11 +2236,7 @@
       "status": "json-compatible",
       "source": "wrappers",
       "jsonCompatible": true,
-      "wrapperFor": "StorageSettings",
-      "loadFrom": {
-        "module": "wrappers",
-        "export": "StorageSettingsWrapper"
-      }
+      "wrapperFor": "StorageSettings"
     },
     {
       "type": "Timestamp",

schemas/json-components-registry-schema.json

@@ -73,18 +73,6 @@
           "wrapperFor": {
             "type": "string"
           },
-          "loadFrom": {
-            "type": "object",
-            "properties": {
-              "module": {
-                "type": "string"
-              },
-              "export": {
-                "type": "string"
-              }
-            },
-            "additionalProperties": false
-          },
           "deprecated": {
             "type": "object",
             "properties": {

src/lib/json-ui/component-registry.ts

@@ -37,9 +37,27 @@ import { CircularProgress, Divider, ProgressBar } from '@/components/atoms'
 import * as AtomComponents from '@/components/atoms'
 import * as MoleculeComponents from '@/components/molecules'
 import * as OrganismComponents from '@/components/organisms'
-import * as WrapperComponents from '@/lib/json-ui/wrappers'
+import {
+  ComponentBindingDialogWrapper,
+  ComponentTreeWrapper,
+  DataSourceEditorDialogWrapper,
+  GitHubBuildStatusWrapper,
+  LazyBarChartWrapper,
+  LazyD3BarChartWrapper,
+  LazyLineChartWrapper,
+  SaveIndicatorWrapper,
+  SeedDataManagerWrapper,
+  StorageSettingsWrapper,
+} from '@/lib/json-ui/wrappers'
 import jsonComponentsRegistry from '../../../json-components-registry.json'
-import * as IconComponents from '@phosphor-icons/react'
+import { 
+  ArrowLeft, ArrowRight, Check, X, Plus, Minus, MagnifyingGlass, 
+  Funnel, Download, Upload, PencilSimple, Trash, Eye, EyeClosed, 
+  CaretUp, CaretDown, CaretLeft, CaretRight,
+  Gear, User, Bell, Envelope, Calendar, Clock, Star,
+  Heart, ShareNetwork, LinkSimple, Copy, FloppyDisk, ArrowClockwise, WarningCircle,
+  Info, Question, House, List as ListIcon, DotsThreeVertical, DotsThree
+} from '@phosphor-icons/react'
 
 export interface UIComponentRegistry {
   [key: string]: ComponentType<any>
@@ -54,10 +72,6 @@ interface JsonRegistryEntry {
   wrapperRequired?: boolean
   wrapperComponent?: string
   wrapperFor?: string
-  loadFrom?: {
-    module?: string
-    export?: string
-  }
   deprecated?: DeprecatedComponentInfo
 }
 
@@ -71,13 +85,9 @@ export interface DeprecatedComponentInfo {
 }
 
 const jsonRegistry = jsonComponentsRegistry as JsonComponentRegistry
-const componentLoaders: Record<string, Record<string, ComponentType<any>>> = {
-  wrappers: WrapperComponents as Record<string, ComponentType<any>>,
-  icons: IconComponents as Record<string, ComponentType<any>>,
-}
 
 const getRegistryEntryName = (entry: JsonRegistryEntry): string | undefined =>
-  entry.name ?? entry.type ?? entry.export
+  entry.export ?? entry.name ?? entry.type
 
 const buildRegistryFromNames = (
   names: string[],
@@ -92,27 +102,6 @@ const buildRegistryFromNames = (
   }, {})
 }
 
-const resolveLoadedComponent = (entry: JsonRegistryEntry): ComponentType<any> | null => {
-  const moduleKey = entry.loadFrom?.module ?? entry.source
-  const exportName = entry.loadFrom?.export ?? getRegistryEntryName(entry)
-  if (!moduleKey || !exportName) {
-    return null
-  }
-  const moduleComponents = componentLoaders[moduleKey]
-  return moduleComponents?.[exportName] ?? null
-}
-
-const buildRegistryFromEntries = (entries: JsonRegistryEntry[]): UIComponentRegistry => {
-  return entries.reduce<UIComponentRegistry>((registry, entry) => {
-    const registryName = getRegistryEntryName(entry)
-    const component = resolveLoadedComponent(entry)
-    if (registryName && component) {
-      registry[registryName] = component
-    }
-    return registry
-  }, {})
-}
-
 const jsonRegistryEntries = jsonRegistry.components ?? []
 const registryEntryByType = new Map(
   jsonRegistryEntries
@@ -152,8 +141,14 @@ const shadcnRegistryNames = jsonRegistryEntries
   .filter((entry) => entry.source === 'ui')
   .map((entry) => getRegistryEntryName(entry))
   .filter((name): name is string => Boolean(name))
-const wrapperRegistryEntries = jsonRegistryEntries.filter((entry) => entry.source === 'wrappers')
-const iconRegistryEntries = jsonRegistryEntries.filter((entry) => entry.source === 'icons')
+const wrapperRegistryNames = jsonRegistryEntries
+  .filter((entry) => entry.source === 'wrappers')
+  .map((entry) => getRegistryEntryName(entry))
+  .filter((name): name is string => Boolean(name))
+const iconRegistryNames = jsonRegistryEntries
+  .filter((entry) => entry.source === 'icons')
+  .map((entry) => getRegistryEntryName(entry))
+  .filter((name): name is string => Boolean(name))
 
 export const primitiveComponents: UIComponentRegistry = {
   div: 'div' as any,
@@ -280,11 +275,69 @@ export const organismComponents: UIComponentRegistry = buildRegistryFromNames(
   OrganismComponents as Record<string, ComponentType<any>>
 )
 
-export const jsonWrapperComponents: UIComponentRegistry = buildRegistryFromEntries(
-  wrapperRegistryEntries
+const wrapperComponentMap: Record<string, ComponentType<any>> = {
+  ComponentBindingDialogWrapper,
+  ComponentTreeWrapper,
+  DataSourceEditorDialogWrapper,
+  GitHubBuildStatusWrapper,
+  SaveIndicatorWrapper,
+  LazyBarChartWrapper,
+  LazyLineChartWrapper,
+  LazyD3BarChartWrapper,
+  SeedDataManagerWrapper,
+  StorageSettingsWrapper,
+}
+
+export const jsonWrapperComponents: UIComponentRegistry = buildRegistryFromNames(
+  wrapperRegistryNames,
+  wrapperComponentMap
 )
 
-export const iconComponents: UIComponentRegistry = buildRegistryFromEntries(iconRegistryEntries)
+const iconComponentMap: Record<string, ComponentType<any>> = {
+  ArrowLeft,
+  ArrowRight,
+  Check,
+  X,
+  Plus,
+  Minus,
+  Search: MagnifyingGlass,
+  Filter: Funnel,
+  Download,
+  Upload,
+  Edit: PencilSimple,
+  Trash,
+  Eye,
+  EyeOff: EyeClosed,
+  ChevronUp: CaretUp,
+  ChevronDown: CaretDown,
+  ChevronLeft: CaretLeft,
+  ChevronRight: CaretRight,
+  Settings: Gear,
+  User,
+  Bell,
+  Mail: Envelope,
+  Calendar,
+  Clock,
+  Star,
+  Heart,
+  Share: ShareNetwork,
+  Link: LinkSimple,
+  Copy,
+  Save: FloppyDisk,
+  RefreshCw: ArrowClockwise,
+  AlertCircle: WarningCircle,
+  Info,
+  HelpCircle: Question,
+  Home: House,
+  Menu: ListIcon,
+  MoreVertical: DotsThreeVertical,
+  MoreHorizontal: DotsThree,
+}
+
+export const iconComponents: UIComponentRegistry = buildRegistryFromNames(
+  iconRegistryNames,
+  iconComponentMap
+)
 
 export const uiComponentRegistry: UIComponentRegistry = {
   ...primitiveComponents,

src/store/middleware/__tests__/autoSyncManager.test.ts

@@ -0,0 +1,112 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+import { AutoSyncManager } from '../autoSyncMiddleware'
+import { syncToFlaskBulk } from '../../slices/syncSlice'
+
+vi.mock('../../slices/syncSlice', () => ({
+  syncToFlaskBulk: vi.fn(() => ({ type: 'sync/syncToFlaskBulk' })),
+  checkFlaskConnection: vi.fn(() => ({ type: 'sync/checkConnection' })),
+}))
+
+type Deferred<T> = {
+  promise: Promise<T>
+  resolve: (value: T) => void
+  reject: (error?: unknown) => void
+}
+
+const createDeferred = <T,>(): Deferred<T> => {
+  let resolve!: (value: T) => void
+  let reject!: (error?: unknown) => void
+  const promise = new Promise<T>((res, rej) => {
+    resolve = res
+    reject = rej
+  })
+
+  return { promise, resolve, reject }
+}
+
+describe('AutoSyncManager', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+  })
+
+  it('serializes syncs and runs one pending sync after completion', async () => {
+    const manager = new AutoSyncManager()
+    const deferreds = [createDeferred<void>(), createDeferred<void>()]
+    const dispatch = vi
+      .fn()
+      .mockImplementation(() => deferreds.shift()?.promise ?? Promise.resolve())
+
+    manager.setDispatch(dispatch)
+
+    const firstSync = manager.syncNow()
+    const secondSync = manager.syncNow()
+
+    expect(dispatch).toHaveBeenCalledTimes(1)
+
+    deferreds[0].resolve()
+    await Promise.resolve()
+
+    expect(dispatch).toHaveBeenCalledTimes(2)
+
+    deferreds[1].resolve()
+
+    await firstSync
+    await secondSync
+  })
+
+  it('resets changeCounter after a successful sync', async () => {
+    const manager = new AutoSyncManager()
+    const dispatch = vi.fn().mockResolvedValue(undefined)
+
+    manager.setDispatch(dispatch)
+    manager.trackChange()
+    manager.trackChange()
+
+    expect(manager.getStatus().changeCounter).toBe(2)
+
+    await manager.syncNow()
+
+    expect(manager.getStatus().changeCounter).toBe(0)
+    expect(dispatch).toHaveBeenCalledTimes(1)
+  })
+
+  it('coalesces multiple pending sync requests into one run', async () => {
+    const manager = new AutoSyncManager()
+    const deferreds = [createDeferred<void>(), createDeferred<void>()]
+    const dispatch = vi
+      .fn()
+      .mockImplementation(() => deferreds.shift()?.promise ?? Promise.resolve())
+
+    manager.setDispatch(dispatch)
+
+    const firstSync = manager.syncNow()
+    const secondSync = manager.syncNow()
+    const thirdSync = manager.syncNow()
+
+    expect(dispatch).toHaveBeenCalledTimes(1)
+
+    deferreds[0].resolve()
+    await Promise.resolve()
+
+    expect(dispatch).toHaveBeenCalledTimes(2)
+
+    deferreds[1].resolve()
+
+    await firstSync
+    await secondSync
+    await thirdSync
+
+    expect(dispatch).toHaveBeenCalledTimes(2)
+  })
+
+  it('dispatches the sync thunk when performing a sync', async () => {
+    const manager = new AutoSyncManager()
+    const dispatch = vi.fn().mockResolvedValue(undefined)
+
+    manager.setDispatch(dispatch)
+
+    await manager.syncNow()
+
+    expect(dispatch).toHaveBeenCalledWith(syncToFlaskBulk())
+  })
+})

src/store/middleware/autoSyncMiddleware.ts

@@ -9,7 +9,7 @@ interface AutoSyncConfig {
   maxQueueSize: number
 }
 
-class AutoSyncManager {
+export class AutoSyncManager {
   private config: AutoSyncConfig = {
     enabled: false,
     intervalMs: 30000,
@@ -21,6 +21,8 @@ class AutoSyncManager {
   private lastSyncTime = 0
   private changeCounter = 0
   private dispatch: any = null
+  private syncInFlight: Promise<void> | null = null
+  private pendingSync = false
 
   configure(config: Partial<AutoSyncConfig>) {
     this.config = { ...this.config, ...config }
@@ -69,12 +71,32 @@ class AutoSyncManager {
   private async performSync() {
     if (!this.dispatch) return
 
+    if (this.syncInFlight) {
+      this.pendingSync = true
+      return
+    }
+
+    const syncPromise = (async () => {
+      try {
+        await this.dispatch(syncToFlaskBulk())
+        this.lastSyncTime = Date.now()
+        this.changeCounter = 0
+      } catch (error) {
+        console.error('[AutoSync] Sync failed:', error)
+      }
+    })()
+
+    this.syncInFlight = syncPromise
+
     try {
-      await this.dispatch(syncToFlaskBulk())
-      this.lastSyncTime = Date.now()
-      this.changeCounter = 0
-    } catch (error) {
-      console.error('[AutoSync] Sync failed:', error)
+      await syncPromise
+    } finally {
+      this.syncInFlight = null
+    }
+
+    if (this.pendingSync) {
+      this.pendingSync = false
+      await this.performSync()
     }
   }