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/api/supervisor/groups/[name]/restart/route.ts

@@ -0,0 +1,35 @@
+import { NextRequest, NextResponse } from 'next/server';
+import { createSupervisorClient } from '@/lib/supervisor/client';
+
+interface RouteParams {
+  params: Promise<{ name: string }>;
+}
+
+// POST - Restart all processes in a group (stop then start)
+export async function POST(request: NextRequest, { params }: RouteParams) {
+  try {
+    const { name } = await params;
+    const body = await request.json().catch(() => ({}));
+    const wait = body.wait ?? true;
+
+    const client = createSupervisorClient();
+
+    // Stop all processes in the group first
+    await client.stopProcessGroup(name, wait);
+
+    // Then start them
+    const results = await client.startProcessGroup(name, wait);
+
+    return NextResponse.json({
+      success: true,
+      message: `Restarted process group: ${name}`,
+      results,
+    });
+  } catch (error: any) {
+    console.error('Supervisor restart process group error:', error);
+    return NextResponse.json(
+      { error: error.message || 'Failed to restart process group' },
+      { status: 500 }
+    );
+  }
+}

app/api/supervisor/groups/[name]/start/route.ts

@@ -0,0 +1,30 @@
+import { NextRequest, NextResponse } from 'next/server';
+import { createSupervisorClient } from '@/lib/supervisor/client';
+
+interface RouteParams {
+  params: Promise<{ name: string }>;
+}
+
+// POST - Start all processes in a group
+export async function POST(request: NextRequest, { params }: RouteParams) {
+  try {
+    const { name } = await params;
+    const body = await request.json().catch(() => ({}));
+    const wait = body.wait ?? true;
+
+    const client = createSupervisorClient();
+    const results = await client.startProcessGroup(name, wait);
+
+    return NextResponse.json({
+      success: true,
+      message: `Started process group: ${name}`,
+      results,
+    });
+  } catch (error: any) {
+    console.error('Supervisor start process group error:', error);
+    return NextResponse.json(
+      { error: error.message || 'Failed to start process group' },
+      { status: 500 }
+    );
+  }
+}

app/api/supervisor/groups/[name]/stop/route.ts

@@ -0,0 +1,30 @@
+import { NextRequest, NextResponse } from 'next/server';
+import { createSupervisorClient } from '@/lib/supervisor/client';
+
+interface RouteParams {
+  params: Promise<{ name: string }>;
+}
+
+// POST - Stop all processes in a group
+export async function POST(request: NextRequest, { params }: RouteParams) {
+  try {
+    const { name } = await params;
+    const body = await request.json().catch(() => ({}));
+    const wait = body.wait ?? true;
+
+    const client = createSupervisorClient();
+    const results = await client.stopProcessGroup(name, wait);
+
+    return NextResponse.json({
+      success: true,
+      message: `Stopped process group: ${name}`,
+      results,
+    });
+  } catch (error: any) {
+    console.error('Supervisor stop process group error:', error);
+    return NextResponse.json(
+      { error: error.message || 'Failed to stop process group' },
+      { status: 500 }
+    );
+  }
+}

app/groups/page.tsx

@@ -0,0 +1,80 @@
+'use client';
+
+import { useProcesses } from '@/lib/hooks/useSupervisor';
+import { GroupView } from '@/components/groups/GroupView';
+import { Button } from '@/components/ui/button';
+import { Card, CardContent } from '@/components/ui/card';
+import { RefreshCw, AlertCircle } from 'lucide-react';
+
+export default function GroupsPage() {
+  const { data: processes, isLoading, isError, refetch } = useProcesses();
+
+  if (isError) {
+    return (
+      <div className="space-y-6">
+        <h1 className="text-3xl font-bold">Process Groups</h1>
+        <Card className="border-destructive/50">
+          <CardContent className="p-12 text-center">
+            <AlertCircle className="h-12 w-12 text-destructive mx-auto mb-4" />
+            <h2 className="text-xl font-semibold mb-2">Failed to load processes</h2>
+            <p className="text-muted-foreground mb-4">
+              Could not connect to Supervisor. Please check your configuration.
+            </p>
+            <Button onClick={() => refetch()} variant="outline">
+              Try Again
+            </Button>
+          </CardContent>
+        </Card>
+      </div>
+    );
+  }
+
+  return (
+    <div className="space-y-6">
+      <div className="flex items-center justify-between">
+        <div>
+          <h1 className="text-3xl font-bold">Process Groups</h1>
+          <p className="text-muted-foreground mt-1">
+            Manage processes organized by groups with batch operations
+          </p>
+        </div>
+
+        <Button
+          onClick={() => refetch()}
+          variant="outline"
+          size="sm"
+          disabled={isLoading}
+          className="gap-2"
+        >
+          <RefreshCw className={isLoading ? 'animate-spin h-4 w-4' : 'h-4 w-4'} />
+          Refresh
+        </Button>
+      </div>
+
+      {isLoading ? (
+        <div className="space-y-6">
+          {[1, 2].map((i) => (
+            <Card key={i} className="animate-pulse">
+              <CardContent className="p-8">
+                <div className="h-8 bg-muted rounded w-1/3 mb-4"></div>
+                <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
+                  {[1, 2, 3].map((j) => (
+                    <div key={j} className="h-32 bg-muted rounded"></div>
+                  ))}
+                </div>
+              </CardContent>
+            </Card>
+          ))}
+        </div>
+      ) : processes && processes.length > 0 ? (
+        <GroupView processes={processes} />
+      ) : (
+        <Card>
+          <CardContent className="p-12 text-center">
+            <p className="text-muted-foreground">No processes found</p>
+          </CardContent>
+        </Card>
+      )}
+    </div>
+  );
+}

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) => (