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 { useConfig } from '@/lib/hooks/useSupervisor';
-import { Card, CardContent } from '@/components/ui/card';
+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">
-      <div>
         <h1 className="text-3xl font-bold">Configuration</h1>
-        <p className="text-muted-foreground mt-1">Manage Supervisor settings</p>
+        <Card className="border-destructive/50">
-      </div>
-
-      <Card>
           <CardContent className="p-12 text-center">
-          <Settings className="h-12 w-12 text-muted-foreground mx-auto mb-4" />
+            <AlertCircle className="h-12 w-12 text-destructive mx-auto mb-4" />
-          <h2 className="text-xl font-semibold mb-2">Configuration Coming Soon</h2>
+            <h2 className="text-xl font-semibold mb-2">Failed to load configuration</h2>
             <p className="text-muted-foreground">
-            This feature will allow you to reload configuration, add/remove process groups, and manage settings.
+              Could not connect to Supervisor. Please check your configuration.
             </p>
           </CardContent>
         </Card>
       </div>
     );
+  }
+
+  return (
+    <div className="space-y-6">
+      <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>
+
+      {/* 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>
+        </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>
+  );
 }

components/config/ConfigTable.tsx

@@ -0,0 +1,128 @@
+'use client';
+
+import { useState } from 'react';
+import { ConfigInfo } from '@/lib/supervisor/types';
+import { Card, CardContent } from '@/components/ui/card';
+import { ChevronUp, ChevronDown } from 'lucide-react';
+import { cn } from '@/lib/utils/cn';
+
+interface ConfigTableProps {
+  configs: ConfigInfo[];
+}
+
+type SortField = 'group' | 'name' | 'command' | 'autostart' | 'directory';
+type SortDirection = 'asc' | 'desc';
+
+export function ConfigTable({ configs }: ConfigTableProps) {
+  const [sortField, setSortField] = useState<SortField>('group');
+  const [sortDirection, setSortDirection] = useState<SortDirection>('asc');
+
+  const handleSort = (field: SortField) => {
+    if (sortField === field) {
+      setSortDirection(sortDirection === 'asc' ? 'desc' : 'asc');
+    } else {
+      setSortField(field);
+      setSortDirection('asc');
+    }
+  };
+
+  const sortedConfigs = [...configs].sort((a, b) => {
+    let aVal: any = a[sortField];
+    let bVal: any = b[sortField];
+
+    // Handle boolean values
+    if (typeof aVal === 'boolean') {
+      aVal = aVal ? 1 : 0;
+      bVal = bVal ? 1 : 0;
+    }
+
+    // Handle string values
+    if (typeof aVal === 'string') {
+      aVal = aVal.toLowerCase();
+      bVal = bVal.toLowerCase();
+    }
+
+    if (aVal < bVal) return sortDirection === 'asc' ? -1 : 1;
+    if (aVal > bVal) return sortDirection === 'asc' ? 1 : -1;
+    return 0;
+  });
+
+  const SortIcon = ({ field }: { field: SortField }) => {
+    if (sortField !== field) return null;
+    return sortDirection === 'asc' ? (
+      <ChevronUp className="h-4 w-4 inline-block ml-1" />
+    ) : (
+      <ChevronDown className="h-4 w-4 inline-block ml-1" />
+    );
+  };
+
+  return (
+    <Card>
+      <CardContent className="p-0">
+        <div className="overflow-x-auto">
+          <table className="w-full">
+            <thead className="bg-muted/50 border-b">
+              <tr>
+                <th
+                  className="text-left p-3 cursor-pointer hover:bg-muted transition-colors"
+                  onClick={() => handleSort('group')}
+                >
+                  Group <SortIcon field="group" />
+                </th>
+                <th
+                  className="text-left p-3 cursor-pointer hover:bg-muted transition-colors"
+                  onClick={() => handleSort('name')}
+                >
+                  Name <SortIcon field="name" />
+                </th>
+                <th
+                  className="text-left p-3 cursor-pointer hover:bg-muted transition-colors"
+                  onClick={() => handleSort('command')}
+                >
+                  Command <SortIcon field="command" />
+                </th>
+                <th className="text-left p-3">Directory</th>
+                <th
+                  className="text-center p-3 cursor-pointer hover:bg-muted transition-colors"
+                  onClick={() => handleSort('autostart')}
+                >
+                  Autostart <SortIcon field="autostart" />
+                </th>
+                <th className="text-center p-3">Priority</th>
+                <th className="text-center p-3">Processes</th>
+              </tr>
+            </thead>
+            <tbody>
+              {sortedConfigs.map((config, index) => (
+                <tr
+                  key={`${config.group}:${config.name}`}
+                  className={cn(
+                    'border-b hover:bg-muted/20 transition-colors',
+                    index % 2 === 0 && 'bg-muted/5'
+                  )}
+                >
+                  <td className="p-3 font-medium">{config.group}</td>
+                  <td className="p-3">{config.name}</td>
+                  <td className="p-3">
+                    <code className="text-xs bg-muted px-2 py-1 rounded">{config.command}</code>
+                  </td>
+                  <td className="p-3 text-sm text-muted-foreground">{config.directory}</td>
+                  <td className="p-3 text-center">
+                    <span
+                      className={cn(
+                        'inline-block w-3 h-3 rounded-full',
+                        config.autostart ? 'bg-success' : 'bg-muted'
+                      )}
+                    />
+                  </td>
+                  <td className="p-3 text-center text-sm">{config.priority}</td>
+                  <td className="p-3 text-center text-sm">{config.numprocs}</td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+      </CardContent>
+    </Card>
+  );
+}

components/config/ProcessGroupForm.tsx

@@ -0,0 +1,91 @@
+'use client';
+
+import { useState } from 'react';
+import { useAddProcessGroup, useRemoveProcessGroup } from '@/lib/hooks/useSupervisor';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { Plus, Trash2 } from 'lucide-react';
+
+export function ProcessGroupForm() {
+  const [groupName, setGroupName] = useState('');
+  const [removeGroupName, setRemoveGroupName] = useState('');
+
+  const addMutation = useAddProcessGroup();
+  const removeMutation = useRemoveProcessGroup();
+
+  const handleAdd = (e: React.FormEvent) => {
+    e.preventDefault();
+    if (groupName.trim()) {
+      addMutation.mutate(groupName.trim());
+      setGroupName('');
+    }
+  };
+
+  const handleRemove = (e: React.FormEvent) => {
+    e.preventDefault();
+    if (removeGroupName.trim()) {
+      if (confirm(`Are you sure you want to remove the process group "${removeGroupName}"?`)) {
+        removeMutation.mutate(removeGroupName.trim());
+        setRemoveGroupName('');
+      }
+    }
+  };
+
+  return (
+    <div className="grid gap-6 md:grid-cols-2">
+      <Card>
+        <CardHeader>
+          <CardTitle className="text-lg">Add Process Group</CardTitle>
+        </CardHeader>
+        <CardContent>
+          <form onSubmit={handleAdd} className="flex gap-2">
+            <Input
+              type="text"
+              placeholder="Group name"
+              value={groupName}
+              onChange={(e) => setGroupName(e.target.value)}
+              disabled={addMutation.isPending}
+              className="flex-1"
+            />
+            <Button
+              type="submit"
+              disabled={!groupName.trim() || addMutation.isPending}
+              className="gap-2"
+            >
+              <Plus className="h-4 w-4" />
+              Add
+            </Button>
+          </form>
+        </CardContent>
+      </Card>
+
+      <Card>
+        <CardHeader>
+          <CardTitle className="text-lg">Remove Process Group</CardTitle>
+        </CardHeader>
+        <CardContent>
+          <form onSubmit={handleRemove} className="flex gap-2">
+            <Input
+              type="text"
+              placeholder="Group name"
+              value={removeGroupName}
+              onChange={(e) => setRemoveGroupName(e.target.value)}
+              disabled={removeMutation.isPending}
+              className="flex-1"
+            />
+            <Button
+              type="submit"
+              variant="destructive"
+              disabled={!removeGroupName.trim() || removeMutation.isPending}
+              className="gap-2"
+            >
+              <Trash2 className="h-4 w-4" />
+              Remove
+            </Button>
+          </form>
+        </CardContent>
+      </Card>
+    </div>
+  );
+}

components/config/ReloadConfigButton.tsx

@@ -0,0 +1,28 @@
+'use client';
+
+import { useReloadConfig } from '@/lib/hooks/useSupervisor';
+import { Button } from '@/components/ui/button';
+import { RefreshCw } from 'lucide-react';
+import { cn } from '@/lib/utils/cn';
+
+export function ReloadConfigButton() {
+  const reloadMutation = useReloadConfig();
+
+  const handleReload = () => {
+    if (confirm('Are you sure you want to reload the configuration? This will apply any changes made to supervisord.conf.')) {
+      reloadMutation.mutate();
+    }
+  };
+
+  return (
+    <Button
+      onClick={handleReload}
+      disabled={reloadMutation.isPending}
+      variant="outline"
+      className="gap-2"
+    >
+      <RefreshCw className={cn('h-4 w-4', reloadMutation.isPending && 'animate-spin')} />
+      Reload Configuration
+    </Button>
+  );
+}

lib/hooks/useSupervisor.ts

@@ -2,7 +2,7 @@
 
 import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
 import { toast } from 'sonner';
-import type { ProcessInfo, SystemInfo, LogTailResult } from '@/lib/supervisor/types';
+import type { ProcessInfo, SystemInfo, LogTailResult, ConfigInfo } from '@/lib/supervisor/types';
 
 // Query Keys
 export const supervisorKeys = {
@@ -12,6 +12,7 @@ export const supervisorKeys = {
   process: (name: string) => [...supervisorKeys.processes(), name] as const,
   logs: (name: string, type: 'stdout' | 'stderr') =>
     [...supervisorKeys.process(name), 'logs', type] as const,
+  config: () => [...supervisorKeys.all, 'config'] as const,
 };
 
 // API Client Functions
@@ -456,3 +457,104 @@ export function useRestartAllProcesses() {
     },
   });
 }
+
+// Configuration Management
+
+async function fetchConfig(): Promise<ConfigInfo[]> {
+  const response = await fetch('/api/supervisor/config');
+  if (!response.ok) {
+    const error = await response.json();
+    throw new Error(error.error || 'Failed to fetch configuration');
+  }
+  return response.json();
+}
+
+async function reloadConfig(): Promise<{ success: boolean; message: string; result: any }> {
+  const response = await fetch('/api/supervisor/config/reload', {
+    method: 'POST',
+  });
+  if (!response.ok) {
+    const error = await response.json();
+    throw new Error(error.error || 'Failed to reload configuration');
+  }
+  return response.json();
+}
+
+async function addProcessGroup(name: string): Promise<{ success: boolean; message: string }> {
+  const response = await fetch('/api/supervisor/config/group', {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({ name }),
+  });
+  if (!response.ok) {
+    const error = await response.json();
+    throw new Error(error.error || 'Failed to add process group');
+  }
+  return response.json();
+}
+
+async function removeProcessGroup(name: string): Promise<{ success: boolean; message: string }> {
+  const response = await fetch('/api/supervisor/config/group', {
+    method: 'DELETE',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({ name }),
+  });
+  if (!response.ok) {
+    const error = await response.json();
+    throw new Error(error.error || 'Failed to remove process group');
+  }
+  return response.json();
+}
+
+export function useConfig() {
+  return useQuery({
+    queryKey: supervisorKeys.config(),
+    queryFn: fetchConfig,
+    refetchInterval: 10000, // Refetch every 10 seconds
+  });
+}
+
+export function useReloadConfig() {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: reloadConfig,
+    onSuccess: (data) => {
+      toast.success(data.message);
+      queryClient.invalidateQueries({ queryKey: supervisorKeys.all });
+    },
+    onError: (error: Error) => {
+      toast.error(`Failed to reload configuration: ${error.message}`);
+    },
+  });
+}
+
+export function useAddProcessGroup() {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: (name: string) => addProcessGroup(name),
+    onSuccess: (data) => {
+      toast.success(data.message);
+      queryClient.invalidateQueries({ queryKey: supervisorKeys.all });
+    },
+    onError: (error: Error) => {
+      toast.error(`Failed to add process group: ${error.message}`);
+    },
+  });
+}
+
+export function useRemoveProcessGroup() {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: (name: string) => removeProcessGroup(name),
+    onSuccess: (data) => {
+      toast.success(data.message);
+      queryClient.invalidateQueries({ queryKey: supervisorKeys.all });
+    },
+    onError: (error: Error) => {
+      toast.error(`Failed to remove process group: ${error.message}`);
+    },
+  });
+}