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/api/supervisor/processes/restart-all/route.ts

@@ -0,0 +1,30 @@
+import { NextRequest, NextResponse } from 'next/server';
+import { createSupervisorClient } from '@/lib/supervisor/client';
+
+// POST - Restart all processes (stop then start)
+export async function POST(request: NextRequest) {
+  try {
+    const body = await request.json().catch(() => ({}));
+    const wait = body.wait ?? true;
+
+    const client = createSupervisorClient();
+
+    // Stop all processes first
+    await client.stopAllProcesses(wait);
+
+    // Then start them
+    const results = await client.startAllProcesses(wait);
+
+    return NextResponse.json({
+      success: true,
+      message: 'Restarted all processes',
+      results,
+    });
+  } catch (error: any) {
+    console.error('Supervisor restart all processes error:', error);
+    return NextResponse.json(
+      { error: error.message || 'Failed to restart all processes' },
+      { status: 500 }
+    );
+  }
+}

app/api/supervisor/processes/start-all/route.ts

@@ -0,0 +1,25 @@
+import { NextRequest, NextResponse } from 'next/server';
+import { createSupervisorClient } from '@/lib/supervisor/client';
+
+// POST - Start all processes
+export async function POST(request: NextRequest) {
+  try {
+    const body = await request.json().catch(() => ({}));
+    const wait = body.wait ?? true;
+
+    const client = createSupervisorClient();
+    const results = await client.startAllProcesses(wait);
+
+    return NextResponse.json({
+      success: true,
+      message: 'Started all processes',
+      results,
+    });
+  } catch (error: any) {
+    console.error('Supervisor start all processes error:', error);
+    return NextResponse.json(
+      { error: error.message || 'Failed to start all processes' },
+      { status: 500 }
+    );
+  }
+}

app/api/supervisor/processes/stop-all/route.ts

@@ -0,0 +1,25 @@
+import { NextRequest, NextResponse } from 'next/server';
+import { createSupervisorClient } from '@/lib/supervisor/client';
+
+// POST - Stop all processes
+export async function POST(request: NextRequest) {
+  try {
+    const body = await request.json().catch(() => ({}));
+    const wait = body.wait ?? true;
+
+    const client = createSupervisorClient();
+    const results = await client.stopAllProcesses(wait);
+
+    return NextResponse.json({
+      success: true,
+      message: 'Stopped all processes',
+      results,
+    });
+  } catch (error: any) {
+    console.error('Supervisor stop all processes error:', error);
+    return NextResponse.json(
+      { error: error.message || 'Failed to stop all processes' },
+      { status: 500 }
+    );
+  }
+}

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>
   );
 }

components/process/BatchActions.tsx

@@ -0,0 +1,110 @@
+'use client';
+
+import { ProcessInfo } from '@/lib/supervisor/types';
+import { useStartProcess, useStopProcess, useRestartProcess } from '@/lib/hooks/useSupervisor';
+import { Button } from '@/components/ui/button';
+import { Card } from '@/components/ui/card';
+import { Play, Square, RotateCw, X } from 'lucide-react';
+import { cn } from '@/lib/utils/cn';
+
+interface BatchActionsProps {
+  selectedProcesses: Set<string>;
+  processes: ProcessInfo[];
+  onClearSelection: () => void;
+}
+
+export function BatchActions({ selectedProcesses, processes, onClearSelection }: BatchActionsProps) {
+  const startMutation = useStartProcess();
+  const stopMutation = useStopProcess();
+  const restartMutation = useRestartProcess();
+
+  const isLoading = startMutation.isPending || stopMutation.isPending || restartMutation.isPending;
+
+  const selectedCount = selectedProcesses.size;
+
+  if (selectedCount === 0) return null;
+
+  const handleStartSelected = async () => {
+    for (const processId of selectedProcesses) {
+      startMutation.mutate({ name: processId });
+    }
+    onClearSelection();
+  };
+
+  const handleStopSelected = async () => {
+    for (const processId of selectedProcesses) {
+      stopMutation.mutate({ name: processId });
+    }
+    onClearSelection();
+  };
+
+  const handleRestartSelected = async () => {
+    for (const processId of selectedProcesses) {
+      restartMutation.mutate(processId);
+    }
+    onClearSelection();
+  };
+
+  return (
+    <div className="fixed bottom-6 left-1/2 -translate-x-1/2 z-50 animate-slide-up">
+      <Card className="shadow-2xl border-2">
+        <div className="flex items-center gap-4 px-6 py-4">
+          <div className="flex items-center gap-2">
+            <div className="h-8 w-8 rounded-full bg-primary/10 flex items-center justify-center">
+              <span className="text-sm font-bold text-primary">{selectedCount}</span>
+            </div>
+            <span className="text-sm font-medium">
+              {selectedCount} {selectedCount === 1 ? 'process' : 'processes'} selected
+            </span>
+          </div>
+
+          <div className="h-6 w-px bg-border" />
+
+          <div className="flex gap-2">
+            <Button
+              variant="success"
+              size="sm"
+              onClick={handleStartSelected}
+              disabled={isLoading}
+              className="gap-2"
+            >
+              <Play className="h-4 w-4" />
+              Start Selected
+            </Button>
+            <Button
+              variant="destructive"
+              size="sm"
+              onClick={handleStopSelected}
+              disabled={isLoading}
+              className="gap-2"
+            >
+              <Square className="h-4 w-4" />
+              Stop Selected
+            </Button>
+            <Button
+              variant="outline"
+              size="sm"
+              onClick={handleRestartSelected}
+              disabled={isLoading}
+              className="gap-2"
+            >
+              <RotateCw className={cn('h-4 w-4', isLoading && 'animate-spin')} />
+              Restart Selected
+            </Button>
+          </div>
+
+          <div className="h-6 w-px bg-border" />
+
+          <Button
+            variant="ghost"
+            size="icon"
+            onClick={onClearSelection}
+            className="h-8 w-8"
+          >
+            <X className="h-4 w-4" />
+          </Button>
+        </div>
+      </Card>
+    </div>
+  );
+}

components/process/ProcessCard.tsx

@@ -10,9 +10,11 @@ import { cn } from '@/lib/utils/cn';
 
 interface ProcessCardProps {
   process: ProcessInfo;
+  isSelected?: boolean;
+  onSelectionChange?: (processId: string, selected: boolean) => void;
 }
 
-export function ProcessCard({ process }: ProcessCardProps) {
+export function ProcessCard({ process, isSelected = false, onSelectionChange }: ProcessCardProps) {
   const startMutation = useStartProcess();
   const stopMutation = useStopProcess();
   const restartMutation = useRestartProcess();
@@ -25,13 +27,41 @@ export function ProcessCard({ process }: ProcessCardProps) {
   const handleStop = () => stopMutation.mutate({ name: fullName });
   const handleRestart = () => restartMutation.mutate(fullName);
 
+  const handleCardClick = () => {
+    if (onSelectionChange) {
+      onSelectionChange(fullName, !isSelected);
+    }
+  };
+
   return (
-    <Card className="transition-all hover:shadow-lg animate-fade-in">
+    <Card
+      className={cn(
+        'transition-all hover:shadow-lg animate-fade-in',
+        onSelectionChange && 'cursor-pointer',
+        isSelected && 'ring-2 ring-primary ring-offset-2'
+      )}
+      onClick={onSelectionChange ? handleCardClick : undefined}
+    >
       <CardHeader className="pb-3">
         <div className="flex items-start justify-between">
-          <div className="flex-1">
-            <CardTitle className="text-lg">{process.name}</CardTitle>
-            <p className="text-sm text-muted-foreground mt-1">{process.group}</p>
+          <div className="flex items-center gap-3 flex-1">
+            {onSelectionChange && (
+              <div className="flex-shrink-0">
+                <input
+                  type="checkbox"
+                  checked={isSelected}
+                  onChange={(e) => {
+                    e.stopPropagation();
+                    onSelectionChange(fullName, e.target.checked);
+                  }}
+                  className="h-4 w-4 rounded border-input text-primary focus:ring-2 focus:ring-primary focus:ring-offset-2"
+                />
+              </div>
+            )}
+            <div className="flex-1">
+              <CardTitle className="text-lg">{process.name}</CardTitle>
+              <p className="text-sm text-muted-foreground mt-1">{process.group}</p>
+            </div>
           </div>
           <Badge
             className={cn(
@@ -72,7 +102,7 @@ export function ProcessCard({ process }: ProcessCardProps) {
         )}
 
         {/* Actions */}
-        <div className="flex gap-2">
+        <div className="flex gap-2" onClick={(e) => e.stopPropagation()}>
           <Button
             size="sm"
             variant="success"

lib/hooks/useSupervisor.ts

@@ -370,3 +370,89 @@ export function useRestartProcessGroup() {
     },
   });
 }
+
+// Batch Operations (All Processes)
+
+async function startAllProcesses(wait: boolean = true): Promise<{ success: boolean; message: string; results: any[] }> {
+  const response = await fetch('/api/supervisor/processes/start-all', {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({ wait }),
+  });
+  if (!response.ok) {
+    const error = await response.json();
+    throw new Error(error.error || 'Failed to start all processes');
+  }
+  return response.json();
+}
+
+async function stopAllProcesses(wait: boolean = true): Promise<{ success: boolean; message: string; results: any[] }> {
+  const response = await fetch('/api/supervisor/processes/stop-all', {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({ wait }),
+  });
+  if (!response.ok) {
+    const error = await response.json();
+    throw new Error(error.error || 'Failed to stop all processes');
+  }
+  return response.json();
+}
+
+async function restartAllProcesses(wait: boolean = true): Promise<{ success: boolean; message: string; results: any[] }> {
+  const response = await fetch('/api/supervisor/processes/restart-all', {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({ wait }),
+  });
+  if (!response.ok) {
+    const error = await response.json();
+    throw new Error(error.error || 'Failed to restart all processes');
+  }
+  return response.json();
+}
+
+export function useStartAllProcesses() {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: (wait: boolean = true) => startAllProcesses(wait),
+    onSuccess: (data) => {
+      toast.success(data.message);
+      queryClient.invalidateQueries({ queryKey: supervisorKeys.processes() });
+    },
+    onError: (error: Error) => {
+      toast.error(`Failed to start all processes: ${error.message}`);
+    },
+  });
+}
+
+export function useStopAllProcesses() {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: (wait: boolean = true) => stopAllProcesses(wait),
+    onSuccess: (data) => {
+      toast.success(data.message);
+      queryClient.invalidateQueries({ queryKey: supervisorKeys.processes() });
+    },
+    onError: (error: Error) => {
+      toast.error(`Failed to stop all processes: ${error.message}`);
+    },
+  });
+}
+
+export function useRestartAllProcesses() {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: (wait: boolean = true) => restartAllProcesses(wait),
+    onSuccess: (data) => {
+      toast.success(data.message);
+      queryClient.invalidateQueries({ queryKey: supervisorKeys.processes() });
+    },
+    onError: (error: Error) => {
+      toast.error(`Failed to restart all processes: ${error.message}`);
+    },
+  });
+}