feat: implement Phase 3 - Batch Operations

Features added:
- Multi-select functionality for processes with checkboxes
- Floating BatchActions toolbar appears when processes are selected
- Batch operations: Start Selected, Stop Selected, Restart Selected
- Select All / Deselect All button in processes page
- Visual feedback with ring indicator on selected cards
- Click card to toggle selection, buttons prevent card selection

Implementation details:
- Created batch API routes: /api/supervisor/processes/{start-all,stop-all,restart-all}
- Added React Query hooks: useStartAllProcesses, useStopAllProcesses, useRestartAllProcesses
- Created BatchActions component with floating toolbar
- Enhanced ProcessCard with optional selection mode (isSelected, onSelectionChange props)
- Updated processes page with selection state management
- Checkbox prevents event bubbling to avoid conflicts with action buttons

UX improvements:
- Selected cards show primary ring with offset
- BatchActions toolbar slides up from bottom
- Selection count displayed in toolbar
- Clear selection with X button or after batch action completes

Phase 3 complete (4-6 hours estimated)

app/processes/page.tsx

@@ -5,13 +5,41 @@ import { useProcesses } from '@/lib/hooks/useSupervisor';
 import { ProcessCard } from '@/components/process/ProcessCard';
 import { GroupView } from '@/components/groups/GroupView';
 import { GroupSelector } from '@/components/groups/GroupSelector';
-import { RefreshCw, AlertCircle } from 'lucide-react';
+import { BatchActions } from '@/components/process/BatchActions';
+import { RefreshCw, AlertCircle, CheckSquare } from 'lucide-react';
 import { Button } from '@/components/ui/button';
 
 export default function ProcessesPage() {
   const [viewMode, setViewMode] = useState<'flat' | 'grouped'>('flat');
+  const [selectedProcesses, setSelectedProcesses] = useState<Set<string>>(new Set());
   const { data: processes, isLoading, isError, refetch } = useProcesses();
 
+  const handleSelectionChange = (processId: string, selected: boolean) => {
+    setSelectedProcesses((prev) => {
+      const newSet = new Set(prev);
+      if (selected) {
+        newSet.add(processId);
+      } else {
+        newSet.delete(processId);
+      }
+      return newSet;
+    });
+  };
+
+  const handleSelectAll = () => {
+    if (processes) {
+      if (selectedProcesses.size === processes.length) {
+        setSelectedProcesses(new Set());
+      } else {
+        setSelectedProcesses(new Set(processes.map((p) => `${p.group}:${p.name}`)));
+      }
+    }
+  };
+
+  const handleClearSelection = () => {
+    setSelectedProcesses(new Set());
+  };
+
   if (isLoading) {
     return (
       <div className="space-y-6">
@@ -54,6 +82,17 @@ export default function ProcessesPage() {
           </p>
         </div>
         <div className="flex items-center gap-4">
+          {viewMode === 'flat' && processes && processes.length > 0 && (
+            <Button
+              variant="outline"
+              size="sm"
+              onClick={handleSelectAll}
+              className="gap-2"
+            >
+              <CheckSquare className="h-4 w-4" />
+              {selectedProcesses.size === processes.length ? 'Deselect All' : 'Select All'}
+            </Button>
+          )}
           <GroupSelector viewMode={viewMode} onViewModeChange={setViewMode} />
           <Button variant="outline" onClick={() => refetch()}>
             <RefreshCw className="h-4 w-4 mr-2" />
@@ -70,11 +109,25 @@ export default function ProcessesPage() {
         <GroupView processes={processes || []} />
       ) : (
         <div className="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
-          {processes?.map((process) => (
-            <ProcessCard key={`${process.group}:${process.name}`} process={process} />
-          ))}
+          {processes?.map((process) => {
+            const fullName = `${process.group}:${process.name}`;
+            return (
+              <ProcessCard
+                key={fullName}
+                process={process}
+                isSelected={selectedProcesses.has(fullName)}
+                onSelectionChange={handleSelectionChange}
+              />
+            );
+          })}
         </div>
       )}
+
+      <BatchActions
+        selectedProcesses={selectedProcesses}
+        processes={processes || []}
+        onClearSelection={handleClearSelection}
+      />
     </div>
   );
 }