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)

app/processes/page.tsx

@@ -1,11 +1,15 @@
 'use client';
 
+import { useState } from 'react';
 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 { Button } from '@/components/ui/button';
 
 export default function ProcessesPage() {
+  const [viewMode, setViewMode] = useState<'flat' | 'grouped'>('flat');
   const { data: processes, isLoading, isError, refetch } = useProcesses();
 
   if (isLoading) {
@@ -49,16 +53,21 @@ export default function ProcessesPage() {
             {processes?.length ?? 0} processes configured
           </p>
         </div>
-        <Button variant="outline" onClick={() => refetch()}>
-          <RefreshCw className="h-4 w-4 mr-2" />
-          Refresh
-        </Button>
+        <div className="flex items-center gap-4">
+          <GroupSelector viewMode={viewMode} onViewModeChange={setViewMode} />
+          <Button variant="outline" onClick={() => refetch()}>
+            <RefreshCw className="h-4 w-4 mr-2" />
+            Refresh
+          </Button>
+        </div>
       </div>
 
       {processes && processes.length === 0 ? (
         <div className="flex flex-col items-center justify-center p-12 text-center border-2 border-dashed rounded-lg">
           <p className="text-muted-foreground">No processes configured</p>
         </div>
+      ) : viewMode === 'grouped' ? (
+        <GroupView processes={processes || []} />
       ) : (
         <div className="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
           {processes?.map((process) => (