feat: implement API-first settings management and description history tracking

- Migrated settings persistence from localStorage to an API-first approach, ensuring consistency between Electron and web modes.
- Introduced `useSettingsSync` hook for automatic synchronization of settings to the server with debouncing.
- Enhanced feature update logic to track description changes with a history, allowing for better management of feature descriptions.
- Updated various components and services to utilize the new settings structure and description history functionality.
- Removed persist middleware from Zustand store, streamlining state management and improving performance.

apps/ui/src/app.tsx

@@ -3,7 +3,9 @@ import { RouterProvider } from '@tanstack/react-router';
 import { createLogger } from '@automaker/utils/logger';
 import { router } from './utils/router';
 import { SplashScreen } from './components/splash-screen';
+import { LoadingState } from './components/ui/loading-state';
 import { useSettingsMigration } from './hooks/use-settings-migration';
+import { useSettingsSync } from './hooks/use-settings-sync';
 import { useCursorStatusInit } from './hooks/use-cursor-status-init';
 import './styles/global.css';
 import './styles/theme-imports';
@@ -33,11 +35,19 @@ export default function App() {
   }, []);
 
   // Run settings migration on startup (localStorage -> file storage)
+  // IMPORTANT: Wait for this to complete before rendering the router
+  // so that currentProject and other settings are available
   const migrationState = useSettingsMigration();
   if (migrationState.migrated) {
     logger.info('Settings migrated to file storage');
   }
 
+  // Sync settings changes back to server (API-first persistence)
+  const settingsSyncState = useSettingsSync();
+  if (settingsSyncState.error) {
+    logger.error('Settings sync error:', settingsSyncState.error);
+  }
+
   // Initialize Cursor CLI status at startup
   useCursorStatusInit();
 
@@ -46,6 +56,16 @@ export default function App() {
     setShowSplash(false);
   }, []);
 
+  // Wait for settings migration to complete before rendering the router
+  // This ensures currentProject and other settings are available
+  if (!migrationState.checked) {
+    return (
+      <div className="flex h-screen items-center justify-center bg-background">
+        <LoadingState message="Loading settings..." />
+      </div>
+    );
+  }
+
   return (
     <>
       <RouterProvider router={router} />