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)

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"