feat: implement running agents view and enhance auto mode functionality

- Added a new `RunningAgentsView` component to display currently active agents working on features.
- Implemented auto-refresh functionality for the running agents list every 2 seconds.
- Enhanced the auto mode service to support project-specific operations, including starting and stopping auto mode for individual projects.
- Updated IPC handlers to manage auto mode status and running agents more effectively.
- Introduced audio settings to mute notifications when agents complete tasks.
- Refactored existing components to accommodate new features and improve overall user experience.

app/src/hooks/use-auto-mode.ts

@@ -1,7 +1,8 @@
 import { useEffect, useCallback, useMemo } from "react";
 import { useShallow } from "zustand/react/shallow";
 import { useAppStore } from "@/store/app-store";
-import { getElectronAPI, type AutoModeEvent } from "@/lib/electron";
+import { getElectronAPI } from "@/lib/electron";
+import type { AutoModeEvent } from "@/types/electron";
 
 /**
  * Hook for managing auto mode (scoped per project)
@@ -16,6 +17,7 @@ export function useAutoMode() {
     currentProject,
     addAutoModeActivity,
     maxConcurrency,
+    projects,
   } = useAppStore(
     useShallow((state) => ({
       autoModeByProject: state.autoModeByProject,
@@ -26,9 +28,16 @@ export function useAutoMode() {
       currentProject: state.currentProject,
       addAutoModeActivity: state.addAutoModeActivity,
       maxConcurrency: state.maxConcurrency,
+      projects: state.projects,
     }))
   );
 
+  // Helper to look up project ID from path
+  const getProjectIdFromPath = useCallback((path: string): string | undefined => {
+    const project = projects.find(p => p.path === path);
+    return project?.id;
+  }, [projects]);
+
   // Get project-specific auto mode state
   const projectId = currentProject?.id;
   const projectAutoModeState = useMemo(() => {
@@ -42,17 +51,32 @@ export function useAutoMode() {
   // Check if we can start a new task based on concurrency limit
   const canStartNewTask = runningAutoTasks.length < maxConcurrency;
 
-  // Handle auto mode events
+  // Handle auto mode events - listen globally for all projects
   useEffect(() => {
     const api = getElectronAPI();
-    if (!api?.autoMode || !projectId) return;
+    if (!api?.autoMode) return;
 
     const unsubscribe = api.autoMode.onEvent((event: AutoModeEvent) => {
       console.log("[AutoMode Event]", event);
 
-      // Events include projectId from backend, use it to scope updates
+      // Events include projectPath from backend - use it to look up project ID
       // Fall back to current projectId if not provided in event
-      const eventProjectId = event.projectId ?? projectId;
+      let eventProjectId: string | undefined;
+      if ('projectPath' in event && event.projectPath) {
+        eventProjectId = getProjectIdFromPath(event.projectPath);
+      }
+      if (!eventProjectId && 'projectId' in event && event.projectId) {
+        eventProjectId = event.projectId;
+      }
+      if (!eventProjectId) {
+        eventProjectId = projectId;
+      }
+
+      // Skip event if we couldn't determine the project
+      if (!eventProjectId) {
+        console.warn("[AutoMode] Could not determine project for event:", event);
+        return;
+      }
 
       switch (event.type) {
         case "auto_mode_feature_start":
@@ -153,8 +177,47 @@ export function useAutoMode() {
     clearRunningTasks,
     setAutoModeRunning,
     addAutoModeActivity,
+    getProjectIdFromPath,
   ]);
 
+  // Restore auto mode for all projects that were running when app was closed
+  // This runs once on mount to restart auto loops for persisted running states
+  useEffect(() => {
+    const api = getElectronAPI();
+    if (!api?.autoMode) return;
+
+    // Find all projects that have auto mode marked as running
+    const projectsToRestart: Array<{ projectId: string; projectPath: string }> = [];
+    for (const [projectId, state] of Object.entries(autoModeByProject)) {
+      if (state.isRunning) {
+        // Find the project path for this project ID
+        const project = projects.find(p => p.id === projectId);
+        if (project) {
+          projectsToRestart.push({ projectId, projectPath: project.path });
+        }
+      }
+    }
+
+    // Restart auto mode for each project
+    for (const { projectId, projectPath } of projectsToRestart) {
+      console.log(`[AutoMode] Restoring auto mode for project: ${projectPath}`);
+      api.autoMode.start(projectPath, maxConcurrency).then(result => {
+        if (!result.success) {
+          console.error(`[AutoMode] Failed to restore auto mode for ${projectPath}:`, result.error);
+          // Mark as not running if we couldn't restart
+          setAutoModeRunning(projectId, false);
+        } else {
+          console.log(`[AutoMode] Restored auto mode for ${projectPath}`);
+        }
+      }).catch(error => {
+        console.error(`[AutoMode] Error restoring auto mode for ${projectPath}:`, error);
+        setAutoModeRunning(projectId, false);
+      });
+    }
+    // Only run once on mount - intentionally empty dependency array
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
   // Start auto mode
   const start = useCallback(async () => {
     if (!currentProject) {
@@ -199,7 +262,7 @@ export function useAutoMode() {
         throw new Error("Auto mode API not available");
       }
 
-      const result = await api.autoMode.stop();
+      const result = await api.autoMode.stop(currentProject.path);
 
       if (result.success) {
         setAutoModeRunning(currentProject.id, false);