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)

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