Merge branch 'fix-flashing-1gw9'

Author: knowsuchagency

server/lib/settings.ts

@@ -627,12 +627,21 @@ export function getClaudeConfig(): Record<string, unknown> {
   }
 }
 
+// Promise-based lock to serialize writes to ~/.claude.json
+// Prevents race conditions when multiple tabs trigger concurrent updates
+let claudeConfigLock: Promise<void> = Promise.resolve()
+
 // Update Claude Code config (merges with existing)
+// Uses promise chaining to ensure sequential writes and prevent corruption
 export function updateClaudeConfig(updates: Record<string, unknown>): void {
-  const configPath = getClaudeConfigPath()
-  const current = getClaudeConfig()
-  const merged = { ...current, ...updates }
-  fs.writeFileSync(configPath, JSON.stringify(merged, null, 2), 'utf-8')
+  claudeConfigLock = claudeConfigLock.then(() => {
+    const configPath = getClaudeConfigPath()
+    const current = getClaudeConfig()
+    const merged = { ...current, ...updates }
+    fs.writeFileSync(configPath, JSON.stringify(merged, null, 2), 'utf-8')
+  }).catch((err) => {
+    log.settings.error('Failed to update Claude config', { error: String(err) })
+  })
 }
 
 // Update Claude Code theme if sync is enabled

server/routes/config.ts

@@ -237,6 +237,10 @@ app.post('/restart', (c) => {
 })
 
 // POST /api/config/sync-theme - Sync theme to Claude Code config
+// Debounce to prevent rapid repeated syncs from multiple tabs
+let lastSyncedTheme: { theme: 'light' | 'dark'; timestamp: number } | null = null
+const SYNC_DEBOUNCE_MS = 1000
+
 app.post('/sync-claude-theme', async (c) => {
   try {
     const body = await c.req.json<{ resolvedTheme: 'light' | 'dark' }>()
@@ -246,7 +250,17 @@ app.post('/sync-claude-theme', async (c) => {
       return c.json({ error: 'resolvedTheme must be "light" or "dark"' }, 400)
     }
 
+    // Skip if same theme was synced recently (defense against multiple tabs)
+    const now = Date.now()
+    if (lastSyncedTheme &&
+        lastSyncedTheme.theme === resolvedTheme &&
+        now - lastSyncedTheme.timestamp < SYNC_DEBOUNCE_MS) {
+      return c.json({ success: true, resolvedTheme, skipped: true })
+    }
+
     syncClaudeCodeTheme(resolvedTheme)
+    lastSyncedTheme = { theme: resolvedTheme, timestamp: now }
+
     return c.json({ success: true, resolvedTheme })
   } catch (err) {
     return c.json({ error: err instanceof Error ? err.message : 'Failed to sync theme' }, 400)

src/hooks/use-theme-sync.ts

@@ -7,14 +7,13 @@ import { fetchJSON } from '@/lib/api'
  * Hook to sync theme between next-themes and backend settings.
  * - On mount: applies saved theme preference from backend
  * - Provides changeTheme function to update both next-themes and backend
- * - Optionally syncs theme to Claude Code config when enabled
+ * - Optionally syncs theme to Claude Code config when enabled (only on explicit user action)
  */
 export function useThemeSync() {
   const { setTheme, resolvedTheme, theme: currentTheme } = useNextTheme()
   const { data: savedTheme, isSuccess } = useTheme()
   const { data: syncClaudeCode } = useSyncClaudeCodeTheme()
   const updateConfig = useUpdateConfig()
-  const prevResolvedTheme = useRef<string | undefined>(undefined)
   const prevSyncClaudeCode = useRef<boolean | undefined>(undefined)
   const hasInitialized = useRef(false)
 
@@ -42,31 +41,23 @@ export function useThemeSync() {
     link.href = favicon
   }, [resolvedTheme])
 
-  // Sync to Claude Code when:
-  // 1. Resolved theme changes (if sync is enabled)
-  // 2. Sync setting is toggled on after initial load (immediate sync with current theme)
+  // Sync to Claude Code when sync setting is toggled on (immediate sync with current theme)
+  // NOTE: We intentionally do NOT sync on resolvedTheme changes here to avoid a feedback loop
+  // when multiple tabs are open. Cross-tab theme sync is handled by next-themes via localStorage.
+  // Claude sync only happens on explicit user action (changeTheme) or when enabling the toggle.
   useEffect(() => {
-    const themeChanged = resolvedTheme && resolvedTheme !== prevResolvedTheme.current
-
-    // Only detect "just enabled" after initial render to avoid syncing on page load
     const syncJustEnabled = hasInitialized.current && syncClaudeCode && prevSyncClaudeCode.current === false
 
-    // Update refs
-    prevResolvedTheme.current = resolvedTheme
     prevSyncClaudeCode.current = syncClaudeCode
     hasInitialized.current = true
 
-    // Sync if theme changed while sync is enabled, or if sync was just enabled
-    if (resolvedTheme && syncClaudeCode && (themeChanged || syncJustEnabled)) {
-      // Fire and forget - no need to await
+    if (resolvedTheme && syncJustEnabled) {
       fetchJSON('/api/config/sync-claude-theme', {
         method: 'POST',
         body: JSON.stringify({ resolvedTheme }),
-      }).catch(() => {
-        // Silently ignore sync errors
-      })
+      }).catch(() => {})
     }
-  }, [resolvedTheme, syncClaudeCode])
+  }, [syncClaudeCode, resolvedTheme])
 
   // Function to change theme and persist to backend
   const changeTheme = useCallback(
@@ -77,8 +68,19 @@ export function useThemeSync() {
         key: CONFIG_KEYS.THEME,
         value: theme === 'system' ? '' : theme,
       })
+
+      // Sync to Claude Code if enabled (only on explicit user action, not cross-tab sync)
+      if (syncClaudeCode) {
+        const effectiveTheme = theme === 'system'
+          ? (window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light')
+          : theme
+        fetchJSON('/api/config/sync-claude-theme', {
+          method: 'POST',
+          body: JSON.stringify({ resolvedTheme: effectiveTheme }),
+        }).catch(() => {})
+      }
     },
-    [setTheme, updateConfig]
+    [setTheme, updateConfig, syncClaudeCode]
   )
 
   return {