feat: initial commit - Supervisor UI with Next.js 16 and Tailwind CSS 4

- Modern web interface for Supervisor process management
- Built with Next.js 16 (App Router) and Tailwind CSS 4
- Full XML-RPC client implementation for Supervisor API
- Real-time process monitoring with auto-refresh
- Process control: start, stop, restart operations
- Modern dashboard with system status and statistics
- Dark/light theme with OKLCH color system
- Docker multi-stage build with runtime env var configuration
- Gitea CI/CD workflow for automated builds
- Comprehensive documentation (README, IMPLEMENTATION, DEPLOYMENT)

Features:
- Backend proxy pattern for secure API communication
- React Query for state management and caching
- TypeScript strict mode with Zod validation
- Responsive design with mobile support
- Health check endpoint for monitoring
- Non-root user security in Docker

Environment Variables:
- SUPERVISOR_HOST, SUPERVISOR_PORT
- SUPERVISOR_USERNAME, SUPERVISOR_PASSWORD (optional)
- Configurable at build-time and runtime

🤖 Generated with Claude Code (https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

components/process/SystemStatus.tsx

@@ -0,0 +1,88 @@
+'use client';
+
+import { Activity, Server, Hash, CheckCircle2, XCircle } from 'lucide-react';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { Badge } from '@/components/ui/badge';
+import { useSystemInfo } from '@/lib/hooks/useSupervisor';
+import { SupervisorState } from '@/lib/supervisor/types';
+
+export function SystemStatus() {
+  const { data: systemInfo, isLoading, isError } = useSystemInfo();
+
+  if (isLoading) {
+    return (
+      <Card>
+        <CardContent className="p-6">
+          <div className="animate-pulse space-y-3">
+            <div className="h-4 bg-muted rounded w-3/4"></div>
+            <div className="h-4 bg-muted rounded w-1/2"></div>
+          </div>
+        </CardContent>
+      </Card>
+    );
+  }
+
+  if (isError || !systemInfo) {
+    return (
+      <Card className="border-destructive/50">
+        <CardContent className="p-6">
+          <div className="flex items-center gap-2 text-destructive">
+            <XCircle className="h-5 w-5" />
+            <span>Failed to connect to Supervisor</span>
+          </div>
+        </CardContent>
+      </Card>
+    );
+  }
+
+  const isRunning = systemInfo.state.statecode === SupervisorState.RUNNING;
+
+  return (
+    <Card>
+      <CardHeader className="pb-3">
+        <div className="flex items-center justify-between">
+          <CardTitle className="flex items-center gap-2">
+            <Server className="h-5 w-5 text-primary" />
+            System Status
+          </CardTitle>
+          <Badge variant={isRunning ? 'success' : 'destructive'} className="gap-1">
+            {isRunning ? (
+              <CheckCircle2 className="h-3 w-3" />
+            ) : (
+              <XCircle className="h-3 w-3" />
+            )}
+            {systemInfo.state.statename}
+          </Badge>
+        </div>
+      </CardHeader>
+      <CardContent className="space-y-3 text-sm">
+        <div className="flex items-center justify-between">
+          <span className="text-muted-foreground flex items-center gap-2">
+            <Activity className="h-4 w-4" />
+            Version
+          </span>
+          <span className="font-mono">{systemInfo.supervisorVersion}</span>
+        </div>
+        <div className="flex items-center justify-between">
+          <span className="text-muted-foreground flex items-center gap-2">
+            <Hash className="h-4 w-4" />
+            PID
+          </span>
+          <span className="font-mono">{systemInfo.pid}</span>
+        </div>
+        <div className="flex items-center justify-between">
+          <span className="text-muted-foreground">API Version</span>
+          <span className="font-mono">{systemInfo.apiVersion}</span>
+        </div>
+        {systemInfo.identification && (
+          <div className="pt-2 border-t">
+            <span className="text-muted-foreground text-xs">ID:</span>
+            <p className="font-mono text-xs mt-1 text-foreground/80">
+              {systemInfo.identification}
+            </p>
+          </div>
+        )}
+      </CardContent>
+    </Card>
+  );
+}