SyncDevPanel

SyncDevPanel is a ready-to-use debug component that displays the sync queue snapshot, stats, and recent sync events.

Signature

SyncDevPanel({ maxEvents?: number }): React.ReactElement | null

Usage

import { SyncDevPanel } from "ctrodb/react"

function DevTools() {
  return (
    <div style={{ position: "fixed", bottom: 0, right: 0, zIndex: 9999 }}>
      <SyncDevPanel maxEvents={50} />
    </div>
  )
}

Display

• Sync queue stats: total, pending, syncing, committed, failed
• "Retry Failed" button when failed changes exist
• Recent sync event log with color-coded phases (error, conflict, complete)

Error handling

Returns null if the sync plugin is not registered (avoids crashes).