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

components/groups/GroupSelector.tsx

@@ -0,0 +1,37 @@
+'use client';
+
+import { Button } from '@/components/ui/button';
+import { LayoutGrid, List } from 'lucide-react';
+
+interface GroupSelectorProps {
+  viewMode: 'flat' | 'grouped';
+  onViewModeChange: (mode: 'flat' | 'grouped') => void;
+}
+
+export function GroupSelector({ viewMode, onViewModeChange }: GroupSelectorProps) {
+  return (
+    <div className="flex gap-2 items-center">
+      <span className="text-sm font-medium text-muted-foreground">View:</span>
+      <div className="flex gap-1 border rounded-md p-1">
+        <Button
+          variant={viewMode === 'flat' ? 'default' : 'ghost'}
+          size="sm"
+          onClick={() => onViewModeChange('flat')}
+          className="gap-2"
+        >
+          <LayoutGrid className="h-4 w-4" />
+          Flat
+        </Button>
+        <Button
+          variant={viewMode === 'grouped' ? 'default' : 'ghost'}
+          size="sm"
+          onClick={() => onViewModeChange('grouped')}
+          className="gap-2"
+        >
+          <List className="h-4 w-4" />
+          Grouped
+        </Button>
+      </div>
+    </div>
+  );
+}

components/groups/GroupView.tsx

@@ -0,0 +1,35 @@
+'use client';
+
+import { ProcessInfo } from '@/lib/supervisor/types';
+import { GroupCard } from './GroupCard';
+
+interface GroupViewProps {
+  processes: ProcessInfo[];
+}
+
+export function GroupView({ processes }: GroupViewProps) {
+  // Group processes by their group name
+  const groupedProcesses = processes.reduce((acc, process) => {
+    const groupName = process.group;
+    if (!acc[groupName]) {
+      acc[groupName] = [];
+    }
+    acc[groupName].push(process);
+    return acc;
+  }, {} as Record<string, ProcessInfo[]>);
+
+  // Sort groups alphabetically
+  const sortedGroups = Object.keys(groupedProcesses).sort();
+
+  return (
+    <div className="space-y-6">
+      {sortedGroups.map((groupName) => (
+        <GroupCard
+          key={groupName}
+          groupName={groupName}
+          processes={groupedProcesses[groupName]}
+        />
+      ))}
+    </div>
+  );
+}