feat: implement Phase 4 - Configuration Management

Features added:
- View all process configurations in sortable table
- Reload supervisord configuration with confirmation
- Add new process groups dynamically
- Remove process groups with confirmation
- Configuration auto-refresh every 10 seconds

Implementation details:
- Created config API routes: /api/supervisor/config (GET), /api/supervisor/config/reload (POST), /api/supervisor/config/group (POST/DELETE)
- Added React Query hooks: useConfig, useReloadConfig, useAddProcessGroup, useRemoveProcessGroup
- Created components:
  - ConfigTable: Sortable table with columns for group, name, command, directory, autostart, priority, numprocs
  - ReloadConfigButton: Reload config with confirmation dialog
  - ProcessGroupForm: Add/remove groups with separate forms

Configuration page features:
- Displays all process configurations in sortable table
- Click column headers to sort (ascending/descending)
- Visual indicators for autostart (green dot = enabled)
- Shows command in monospace code blocks
- Process group management forms
- Reload configuration button in header

Data displayed per process:
- Group name
- Process name
- Command (with syntax highlighting)
- Working directory
- Autostart enabled/disabled
- Priority value
- Number of processes (numprocs)

Phase 4 complete (8-10 hours estimated)

app/api/supervisor/config/group/route.ts

@@ -0,0 +1,60 @@
+import { NextRequest, NextResponse } from 'next/server';
+import { createSupervisorClient } from '@/lib/supervisor/client';
+
+// POST - Add a process group
+export async function POST(request: NextRequest) {
+  try {
+    const body = await request.json();
+    const { name } = body;
+
+    if (!name) {
+      return NextResponse.json(
+        { error: 'Group name is required' },
+        { status: 400 }
+      );
+    }
+
+    const client = createSupervisorClient();
+    const result = await client.addProcessGroup(name);
+
+    return NextResponse.json({
+      success: result,
+      message: `Process group '${name}' added successfully`,
+    });
+  } catch (error: any) {
+    console.error('Supervisor add process group error:', error);
+    return NextResponse.json(
+      { error: error.message || 'Failed to add process group' },
+      { status: 500 }
+    );
+  }
+}
+
+// DELETE - Remove a process group
+export async function DELETE(request: NextRequest) {
+  try {
+    const body = await request.json();
+    const { name } = body;
+
+    if (!name) {
+      return NextResponse.json(
+        { error: 'Group name is required' },
+        { status: 400 }
+      );
+    }
+
+    const client = createSupervisorClient();
+    const result = await client.removeProcessGroup(name);
+
+    return NextResponse.json({
+      success: result,
+      message: `Process group '${name}' removed successfully`,
+    });
+  } catch (error: any) {
+    console.error('Supervisor remove process group error:', error);
+    return NextResponse.json(
+      { error: error.message || 'Failed to remove process group' },
+      { status: 500 }
+    );
+  }
+}

app/api/supervisor/config/reload/route.ts

@@ -0,0 +1,21 @@
+import { NextResponse } from 'next/server';
+import { createSupervisorClient } from '@/lib/supervisor/client';
+
+// POST - Reload configuration
+export async function POST() {
+  try {
+    const client = createSupervisorClient();
+    const result = await client.reloadConfig();
+    return NextResponse.json({
+      success: true,
+      message: 'Configuration reloaded',
+      result,
+    });
+  } catch (error: any) {
+    console.error('Supervisor reload config error:', error);
+    return NextResponse.json(
+      { error: error.message || 'Failed to reload configuration' },
+      { status: 500 }
+    );
+  }
+}

app/api/supervisor/config/route.ts

@@ -0,0 +1,17 @@
+import { NextResponse } from 'next/server';
+import { createSupervisorClient } from '@/lib/supervisor/client';
+
+// GET - Get all process configurations
+export async function GET() {
+  try {
+    const client = createSupervisorClient();
+    const configs = await client.getAllConfigInfo();
+    return NextResponse.json(configs);
+  } catch (error: any) {
+    console.error('Supervisor get config error:', error);
+    return NextResponse.json(
+      { error: error.message || 'Failed to fetch configuration' },
+      { status: 500 }
+    );
+  }
+}

app/config/page.tsx

@@ -1,25 +1,76 @@
 'use client';
 
-import { Settings } from 'lucide-react';
-import { Card, CardContent } from '@/components/ui/card';
+import { useConfig } from '@/lib/hooks/useSupervisor';
+import { ConfigTable } from '@/components/config/ConfigTable';
+import { ReloadConfigButton } from '@/components/config/ReloadConfigButton';
+import { ProcessGroupForm } from '@/components/config/ProcessGroupForm';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { AlertCircle } from 'lucide-react';
 
 export default function ConfigPage() {
+  const { data: configs, isLoading, isError } = useConfig();
+
+  if (isError) {
+    return (
+      <div className="space-y-6">
+        <h1 className="text-3xl font-bold">Configuration</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 configuration</h2>
+            <p className="text-muted-foreground">
+              Could not connect to Supervisor. Please check your configuration.
+            </p>
+          </CardContent>
+        </Card>
+      </div>
+    );
+  }
+
   return (
     <div className="space-y-6">
-      <div>
-        <h1 className="text-3xl font-bold">Configuration</h1>
-        <p className="text-muted-foreground mt-1">Manage Supervisor settings</p>
+      <div className="flex items-center justify-between">
+        <div>
+          <h1 className="text-3xl font-bold">Configuration</h1>
+          <p className="text-muted-foreground mt-1">
+            Manage process configurations and supervisor settings
+          </p>
+        </div>
+        <ReloadConfigButton />
       </div>
 
-      <Card>
-        <CardContent className="p-12 text-center">
-          <Settings className="h-12 w-12 text-muted-foreground mx-auto mb-4" />
-          <h2 className="text-xl font-semibold mb-2">Configuration Coming Soon</h2>
-          <p className="text-muted-foreground">
-            This feature will allow you to reload configuration, add/remove process groups, and manage settings.
+      {/* Process Group Management */}
+      <ProcessGroupForm />
+
+      {/* Configuration Table */}
+      <div className="space-y-4">
+        <CardHeader className="px-0">
+          <CardTitle>Process Configurations</CardTitle>
+          <p className="text-sm text-muted-foreground mt-1">
+            {configs?.length ?? 0} process{configs?.length !== 1 ? 'es' : ''} configured
           </p>
-        </CardContent>
-      </Card>
+        </CardHeader>
+
+        {isLoading ? (
+          <Card>
+            <CardContent className="p-8 text-center">
+              <div className="animate-pulse">
+                <div className="h-8 bg-muted rounded w-full mb-4"></div>
+                <div className="h-8 bg-muted rounded w-full mb-4"></div>
+                <div className="h-8 bg-muted rounded w-full"></div>
+              </div>
+            </CardContent>
+          </Card>
+        ) : configs && configs.length > 0 ? (
+          <ConfigTable configs={configs} />
+        ) : (
+          <Card>
+            <CardContent className="p-12 text-center">
+              <p className="text-muted-foreground">No process configurations found</p>
+            </CardContent>
+          </Card>
+        )}
+      </div>
     </div>
   );
 }