feat: Phase 2 — data sync (presets + game progress)

Server:
- GET/PUT /api/v1/sync/presets — upsert with last-write-wins
- DELETE /api/v1/sync/presets/:id
- GET/PUT /api/v1/sync/progress — game progress upsert

Client:
- syncService.js: offline-first sync layer
  - localStorage remains primary store
  - Pushes to server when logged in
  - Merges server data into local on sync
  - Auto-sync every 30s + on tab focus
- AuthContext starts/stops sync on login/logout
- Sync runs on session restore (refresh token)

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

packages/client/src/services/AuthContext.jsx

@@ -1,5 +1,6 @@
 import React, { createContext, useContext, useState, useEffect, useCallback } from 'react';
 import { auth as authApi, users as usersApi, setAccessToken, setOnUnauthorized } from './api.js';
+import { startAutoSync, stopAutoSync } from './syncService.js';
 
 const AuthContext = createContext(null);
 
@@ -13,6 +14,7 @@ export function AuthProvider({ children }) {
   const [showAuth, setShowAuth] = useState(false);
 
   const logout = useCallback(async () => {
+    stopAutoSync();
     try { await authApi.logout(); } catch {}
     setAccessToken(null);
     setUser(null);
@@ -30,6 +32,7 @@ export function AuthProvider({ children }) {
         try {
           const me = await usersApi.me();
           setUser(me);
+          startAutoSync();
         } catch {}
       }
       setLoading(false);
@@ -41,6 +44,7 @@ export function AuthProvider({ children }) {
     setAccessToken(data.accessToken);
     setUser(data.user);
     setShowAuth(false);
+    startAutoSync();
     return data.user;
   }, []);
 
@@ -49,6 +53,7 @@ export function AuthProvider({ children }) {
     setAccessToken(data.accessToken);
     setUser(data.user);
     setShowAuth(false);
+    startAutoSync();
     return data.user;
   }, []);
 

packages/client/src/services/syncService.js

@@ -0,0 +1,134 @@
+import { getAccessToken } from './api.js';
+
+const API_BASE = '/api/v1/sync';
+const SYNC_INTERVAL = 30000; // 30 seconds
+
+let _syncTimer = null;
+
+async function apiFetch(method, path, body = null) {
+  const token = getAccessToken();
+  if (!token) return null;
+
+  const res = await fetch(`${API_BASE}${path}`, {
+    method,
+    headers: {
+      'Content-Type': 'application/json',
+      'Authorization': `Bearer ${token}`,
+    },
+    credentials: 'include',
+    body: body ? JSON.stringify(body) : null,
+  });
+
+  if (!res.ok) return null;
+  return res.json();
+}
+
+// ==================== Preset Sync ====================
+
+export async function syncPresets() {
+  if (!getAccessToken()) return;
+
+  try {
+    // Get local presets
+    const localRaw = localStorage.getItem('reaktor_presets');
+    const localPresets = localRaw ? JSON.parse(localRaw) : [];
+
+    // Get server presets
+    const serverData = await apiFetch('GET', '/presets');
+    if (!serverData) return;
+
+    // Push local presets to server
+    if (localPresets.length > 0) {
+      await apiFetch('PUT', '/presets', {
+        presets: localPresets.map(p => ({
+          name: p.name,
+          data: p.data,
+          updatedAt: p.savedAt || new Date().toISOString(),
+        })),
+      });
+    }
+
+    // Merge server presets into local (add any missing)
+    const serverPresets = serverData.presets || [];
+    const localNames = new Set(localPresets.map(p => p.name));
+    let merged = [...localPresets];
+
+    for (const sp of serverPresets) {
+      if (!localNames.has(sp.name)) {
+        merged.push({
+          name: sp.name,
+          data: sp.data,
+          savedAt: sp.updatedAt,
+        });
+      }
+    }
+
+    localStorage.setItem('reaktor_presets', JSON.stringify(merged));
+  } catch (err) {
+    console.warn('[sync] preset sync failed:', err.message);
+  }
+}
+
+// ==================== Game Progress Sync ====================
+
+export async function syncProgress() {
+  if (!getAccessToken()) return;
+
+  try {
+    const localRaw = localStorage.getItem('synthquest-progress');
+    const localProgress = localRaw ? JSON.parse(localRaw) : null;
+
+    // Get server progress
+    const serverData = await apiFetch('GET', '/progress');
+
+    if (localProgress) {
+      // Push local to server
+      await apiFetch('PUT', '/progress', {
+        data: localProgress,
+        updatedAt: new Date().toISOString(),
+      });
+    }
+
+    // If server has progress and local doesn't, pull it
+    if (serverData?.progress && !localProgress) {
+      localStorage.setItem('synthquest-progress', JSON.stringify(serverData.progress));
+    }
+
+    // Also sync hint data
+    const hintsRaw = localStorage.getItem('synthquest-hints');
+    // Hints are local-only for now (anti-cheat integrity)
+  } catch (err) {
+    console.warn('[sync] progress sync failed:', err.message);
+  }
+}
+
+// ==================== Auto Sync ====================
+
+export function startAutoSync() {
+  if (_syncTimer) return;
+
+  // Initial sync
+  syncPresets();
+  syncProgress();
+
+  // Periodic sync
+  _syncTimer = setInterval(() => {
+    syncPresets();
+    syncProgress();
+  }, SYNC_INTERVAL);
+
+  // Sync on tab focus
+  document.addEventListener('visibilitychange', () => {
+    if (document.visibilityState === 'visible') {
+      syncPresets();
+      syncProgress();
+    }
+  });
+}
+
+export function stopAutoSync() {
+  if (_syncTimer) {
+    clearInterval(_syncTimer);
+    _syncTimer = null;
+  }
+}