Add IDE theme detection and live synchronization

Detects theme from VS Code, Cursor, JetBrains IDEs, and Zed by reading their config files. Adds file watchers to sync theme changes in real-time. Falls back to system theme if IDE theme unavailable.

🤖 Generated with Codebuff
Co-Authored-By: Codebuff <noreply@codebuff.com>

Author: brandonkachen

cli/src/hooks/use-system-theme-detector.ts

@@ -1,5 +1,6 @@
 import { useEffect, useRef, useState } from 'react'
 import { type ThemeName, detectSystemTheme } from '../utils/theme-system'
+import { logger } from '../utils/logger'
 import {
   spawnMacOSThemeListener,
   type ThemeListenerProcess,
@@ -24,9 +25,17 @@ export const useSystemThemeDetector = (): ThemeName => {
   const listenerRef = useRef<ThemeListenerProcess | null>(null)
 
   useEffect(() => {
+    logger.info(`[theme] initial theme ${themeName}`)
+
     const handleThemeChange = () => {
       const currentTheme = detectSystemTheme()
 
+      if (currentTheme !== lastThemeRef.current) {
+        logger.info(`[theme] theme changed ${lastThemeRef.current} -> ${currentTheme}`)
+      } else {
+        logger.info('[theme] theme change event with no delta')
+      }
+
       // Only update state if theme actually changed
       if (currentTheme !== lastThemeRef.current) {
         lastThemeRef.current = currentTheme

cli/src/utils/theme-listener-macos.ts

@@ -1,3 +1,7 @@
+import { existsSync, watch, type FSWatcher } from 'fs'
+
+import { getIDEThemeConfigPaths } from './theme-system'
+
 /**
  * macOS theme change listener using polling
  * Checks the system theme preference every 0.5 seconds
@@ -24,6 +28,65 @@ while true; do
 done
 `
 
+const IDE_THEME_DEBOUNCE_MS = 200
+
+interface IDEWatcherHandle {
+  watchers: FSWatcher[]
+  dispose: () => void
+}
+
+const createIDEThemeWatchers = (
+  onThemeChange: () => void,
+): IDEWatcherHandle => {
+  const watchers: FSWatcher[] = []
+  const targets = new Set(getIDEThemeConfigPaths())
+
+  if (targets.size === 0) {
+    return {
+      watchers,
+      dispose: () => {},
+    }
+  }
+
+  let debounceTimer: ReturnType<typeof setTimeout> | null = null
+  const scheduleNotify = () => {
+    if (debounceTimer) {
+      clearTimeout(debounceTimer)
+    }
+
+    debounceTimer = setTimeout(() => {
+      debounceTimer = null
+      onThemeChange()
+    }, IDE_THEME_DEBOUNCE_MS)
+  }
+
+  for (const path of targets) {
+    try {
+      if (!existsSync(path)) {
+        continue
+      }
+
+      const watcher = watch(path, { persistent: false }, () => {
+        scheduleNotify()
+      })
+
+      watchers.push(watcher)
+    } catch {
+      // Ignore watcher failures (e.g., permissions)
+    }
+  }
+
+  return {
+    watchers,
+    dispose: () => {
+      if (debounceTimer) {
+        clearTimeout(debounceTimer)
+        debounceTimer = null
+      }
+    },
+  }
+}
+
 export interface ThemeListenerProcess {
   kill: () => void
 }
@@ -56,6 +119,8 @@ export const spawnMacOSThemeListener = (
       stderr: 'pipe',
     })
 
+    const watcherHandle = createIDEThemeWatchers(onThemeChange)
+
     // Read stderr to prevent blocking
     const readStderr = async () => {
       const reader = proc.stderr.getReader()
@@ -106,6 +171,16 @@ export const spawnMacOSThemeListener = (
         } catch {
           // Ignore errors when killing
         }
+
+        for (const watcher of watcherHandle.watchers) {
+          try {
+            watcher.close()
+          } catch {
+            // Ignore watcher closure errors
+          }
+        }
+
+        watcherHandle.dispose()
       },
     }
   } catch {