feat: implement Zustand state management

package.json

@@ -50,7 +50,8 @@
     "react-router-dom": "^7.11.0",
     "simple-git": "^3.30.0",
     "tailwind-merge": "^3.4.0",
-    "zod": "^4.3.5"
+    "zod": "^4.3.5",
+    "zustand": "^5.0.9"
   },
   "devDependencies": {
     "@electron-toolkit/utils": "^4.0.0",
@@ -67,6 +68,7 @@
     "cross-env": "^10.1.0",
     "electron": "^33.2.1",
     "electron-builder": "^25.1.8",
+    "electron-devtools-installer": "^4.0.0",
     "electron-vite": "^5.0.0",
     "eslint": "^9.39.2",
     "eslint-plugin-react-hooks": "^7.0.1",

src/main/index.ts

@@ -1,4 +1,5 @@
 import { app, BrowserWindow, ipcMain, Menu, nativeImage } from 'electron';
+import installExtension, { REDUX_DEVTOOLS } from 'electron-devtools-installer';
 import { existsSync } from 'fs';
 import { dirname, join } from 'path';
 import { fileURLToPath } from 'url';
@@ -137,7 +138,10 @@ const createWindow = (): BrowserWindow => {
   if (isDev && devServerUrl) {
     // In dev mode, wait for Vite dev server to be ready before loading
     // This prevents the common race condition where Electron starts before Vite
-    void waitForDevServer(devServerUrl, win);
+    void waitForDevServer(devServerUrl, win).then(() => {
+      // Open DevTools after page loads in dev mode
+      win.webContents.openDevTools({ mode: 'right' });
+    });
   } else {
     // In production, load the built HTML file
     void win.loadFile(join(__dirname, '../renderer/index.html'));
@@ -161,6 +165,16 @@ const createWindow = (): BrowserWindow => {
 const initialize = async (): Promise<void> => {
   await app.whenReady();
 
+  // Install Redux DevTools in dev mode (for Zustand devtools)
+  if (isDev) {
+    try {
+      await installExtension(REDUX_DEVTOOLS);
+      console.log('✓ Redux DevTools installed');
+    } catch (err) {
+      console.warn('Failed to install Redux DevTools:', err);
+    }
+  }
+
   // Initialize logger and conversation store
   await initLogger();
   await initConversationStore();

src/main/services/conversation.store.service.ts

@@ -14,10 +14,10 @@ import type {
   ConversationIndex,
   ConversationMessage,
   ConversationRef,
+  ConversationSessionConfig,
   ConversationSnapshot,
   CreateConversationOptions,
   ListConversationsOptions,
-  SessionConfig,
   ToolMessage,
   UserMessage,
 } from '../../shared/types/conversation.types.js';
@@ -508,7 +508,7 @@ export const restoreConversation = async (
 ): Promise<{
   id: string;
   messages: ChatMessage[];
-  config: SessionConfig;
+  config: ConversationSessionConfig;
   createdAt: string;
   updatedAt: string;
 } | null> => {

src/renderer/app/App.tsx

@@ -1,8 +1,24 @@
+import { useEffect } from 'react';
 import { Outlet } from 'react-router-dom';
+import { initStores, loadStores } from '../stores/index.js';
 
 /**
  * Root application component
- * Minimal - just renders the router outlet
+ * Initializes Zustand stores and renders the router outlet
  * All routing logic is handled by router.tsx
  */
-export const App = (): React.JSX.Element => <Outlet />;
+export const App = (): React.JSX.Element => {
+  useEffect(() => {
+    // Subscribe to IPC events
+    const cleanup = initStores();
+
+    // Load initial data
+    loadStores().catch((err: unknown) => {
+      console.error('Failed to load stores:', err);
+    });
+
+    return cleanup;
+  }, []);
+
+  return <Outlet />;
+};