feat: implement Phase 2 - Process Groups Management

Features added:
- Group-based process organization with collapsible cards
- Batch operations for groups (Start All, Stop All, Restart All)
- Group statistics display (running, stopped, fatal counts)
- Dedicated /groups page for group-centric management
- View toggle in /processes page (Flat view | Grouped view)

Implementation details:
- Created group API routes: /api/supervisor/groups/[name]/{start,stop,restart}
- Added React Query hooks: useStartProcessGroup, useStopProcessGroup, useRestartProcessGroup
- Created components: GroupCard, GroupView, GroupSelector
- Updated Navbar with Groups navigation link
- Integrated grouped view in processes page with toggle

Phase 2 complete (6-8 hours estimated)

components/groups/GroupCard.tsx

@@ -0,0 +1,132 @@
+'use client';
+
+import { useState } from 'react';
+import { ProcessInfo, ProcessState, ProcessStateCode } from '@/lib/supervisor/types';
+import { useStartProcessGroup, useStopProcessGroup, useRestartProcessGroup } from '@/lib/hooks/useSupervisor';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { Button } from '@/components/ui/button';
+import { ProcessCard } from '@/components/process/ProcessCard';
+import { ChevronDown, ChevronUp, Play, Square, RotateCw } from 'lucide-react';
+import { cn } from '@/lib/utils/cn';
+
+interface GroupCardProps {
+  groupName: string;
+  processes: ProcessInfo[];
+}
+
+export function GroupCard({ groupName, processes }: GroupCardProps) {
+  const [isExpanded, setIsExpanded] = useState(true);
+
+  const startGroupMutation = useStartProcessGroup();
+  const stopGroupMutation = useStopProcessGroup();
+  const restartGroupMutation = useRestartProcessGroup();
+
+  const isLoading = startGroupMutation.isPending || stopGroupMutation.isPending || restartGroupMutation.isPending;
+
+  // Calculate statistics
+  const stats = processes.reduce(
+    (acc, proc) => {
+      if (proc.state === ProcessState.RUNNING) acc.running++;
+      else if (proc.state === ProcessState.STOPPED || proc.state === ProcessState.EXITED) acc.stopped++;
+      else if (proc.state === ProcessState.FATAL) acc.fatal++;
+      return acc;
+    },
+    { running: 0, stopped: 0, fatal: 0, total: processes.length }
+  );
+
+  const handleStart = () => {
+    startGroupMutation.mutate({ name: groupName });
+  };
+
+  const handleStop = () => {
+    stopGroupMutation.mutate({ name: groupName });
+  };
+
+  const handleRestart = () => {
+    restartGroupMutation.mutate({ name: groupName });
+  };
+
+  return (
+    <Card className="overflow-hidden">
+      <CardHeader className="pb-3">
+        <div className="flex items-center justify-between">
+          <div className="flex items-center gap-3 flex-1">
+            <Button
+              variant="ghost"
+              size="sm"
+              onClick={() => setIsExpanded(!isExpanded)}
+              className="h-8 w-8 p-0"
+            >
+              {isExpanded ? <ChevronUp className="h-4 w-4" /> : <ChevronDown className="h-4 w-4" />}
+            </Button>
+            <div>
+              <CardTitle className="text-xl">{groupName}</CardTitle>
+              <div className="flex gap-3 mt-1 text-sm">
+                <span className="text-muted-foreground">
+                  Total: <span className="font-medium text-foreground">{stats.total}</span>
+                </span>
+                <span className="text-success">
+                  Running: <span className="font-medium">{stats.running}</span>
+                </span>
+                <span className="text-muted-foreground">
+                  Stopped: <span className="font-medium">{stats.stopped}</span>
+                </span>
+                {stats.fatal > 0 && (
+                  <span className="text-destructive">
+                    Fatal: <span className="font-medium">{stats.fatal}</span>
+                  </span>
+                )}
+              </div>
+            </div>
+          </div>
+
+          <div className="flex gap-2">
+            <Button
+              variant="success"
+              size="sm"
+              onClick={handleStart}
+              disabled={isLoading || stats.stopped === 0}
+              className="gap-2"
+            >
+              <Play className="h-4 w-4" />
+              Start All
+            </Button>
+            <Button
+              variant="destructive"
+              size="sm"
+              onClick={handleStop}
+              disabled={isLoading || stats.running === 0}
+              className="gap-2"
+            >
+              <Square className="h-4 w-4" />
+              Stop All
+            </Button>
+            <Button
+              variant="outline"
+              size="sm"
+              onClick={handleRestart}
+              disabled={isLoading}
+              className="gap-2"
+            >
+              <RotateCw className={cn('h-4 w-4', isLoading && 'animate-spin')} />
+              Restart All
+            </Button>
+          </div>
+        </div>
+      </CardHeader>
+
+      {isExpanded && (
+        <CardContent className="pt-0">
+          <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
+            {processes.map((process) => (
+              <ProcessCard
+                key={`${process.group}:${process.name}`}
+                process={process}
+              />
+            ))}
+          </div>
+        </CardContent>
+      )}
+    </Card>
+  );
+}