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/layout/Navbar.tsx

@@ -0,0 +1,70 @@
+'use client';
+
+import Link from 'next/link';
+import { usePathname } from 'next/navigation';
+import { Moon, Sun, Activity } from 'lucide-react';
+import { useTheme } from '@/components/providers/ThemeProvider';
+import { Button } from '@/components/ui/button';
+import { cn } from '@/lib/utils/cn';
+
+const navItems = [
+  { href: '/', label: 'Dashboard' },
+  { href: '/processes', label: 'Processes' },
+  { href: '/logs', label: 'Logs' },
+  { href: '/config', label: 'Configuration' },
+];
+
+export function Navbar() {
+  const pathname = usePathname();
+  const { theme, setTheme, resolvedTheme } = useTheme();
+
+  const toggleTheme = () => {
+    setTheme(resolvedTheme === 'dark' ? 'light' : 'dark');
+  };
+
+  return (
+    <nav className="sticky top-0 z-50 w-full border-b bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
+      <div className="container flex h-16 items-center px-4">
+        {/* Logo */}
+        <Link href="/" className="flex items-center gap-2 mr-8">
+          <Activity className="h-6 w-6 text-primary" />
+          <span className="font-bold text-xl bg-gradient-to-r from-primary to-accent bg-clip-text text-transparent">
+            Supervisor
+          </span>
+        </Link>
+
+        {/* Navigation Links */}
+        <div className="flex gap-1 flex-1">
+          {navItems.map((item) => (
+            <Link key={item.href} href={item.href}>
+              <Button
+                variant="ghost"
+                size="sm"
+                className={cn(
+                  'transition-colors',
+                  pathname === item.href && 'bg-accent text-accent-foreground'
+                )}
+              >
+                {item.label}
+              </Button>
+            </Link>
+          ))}
+        </div>
+
+        {/* Theme Toggle */}
+        <Button
+          variant="ghost"
+          size="icon"
+          onClick={toggleTheme}
+          aria-label="Toggle theme"
+        >
+          {resolvedTheme === 'dark' ? (
+            <Sun className="h-5 w-5" />
+          ) : (
+            <Moon className="h-5 w-5" />
+          )}
+        </Button>
+      </div>
+    </nav>
+  );
+}

components/process/ProcessCard.tsx

@@ -0,0 +1,115 @@
+'use client';
+
+import { Play, Square, RotateCw, Activity } from 'lucide-react';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { Button } from '@/components/ui/button';
+import { Badge } from '@/components/ui/badge';
+import { ProcessInfo, getProcessStateClass, formatUptime, canStartProcess, canStopProcess } from '@/lib/supervisor/types';
+import { useStartProcess, useStopProcess, useRestartProcess } from '@/lib/hooks/useSupervisor';
+import { cn } from '@/lib/utils/cn';
+
+interface ProcessCardProps {
+  process: ProcessInfo;
+}
+
+export function ProcessCard({ process }: ProcessCardProps) {
+  const startMutation = useStartProcess();
+  const stopMutation = useStopProcess();
+  const restartMutation = useRestartProcess();
+
+  const fullName = `${process.group}:${process.name}`;
+  const isLoading = startMutation.isPending || stopMutation.isPending || restartMutation.isPending;
+  const uptime = process.state === 20 ? formatUptime(process.start, process.now) : 'Not running';
+
+  const handleStart = () => startMutation.mutate({ name: fullName });
+  const handleStop = () => stopMutation.mutate({ name: fullName });
+  const handleRestart = () => restartMutation.mutate(fullName);
+
+  return (
+    <Card className="transition-all hover:shadow-lg animate-fade-in">
+      <CardHeader className="pb-3">
+        <div className="flex items-start justify-between">
+          <div className="flex-1">
+            <CardTitle className="text-lg">{process.name}</CardTitle>
+            <p className="text-sm text-muted-foreground mt-1">{process.group}</p>
+          </div>
+          <Badge
+            className={cn(
+              'ml-2',
+              getProcessStateClass(process.state),
+              'border px-3 py-1 font-mono text-xs'
+            )}
+          >
+            {process.statename}
+          </Badge>
+        </div>
+      </CardHeader>
+
+      <CardContent className="space-y-4">
+        {/* Metrics */}
+        <div className="grid grid-cols-2 gap-3 text-sm">
+          <div>
+            <span className="text-muted-foreground">PID:</span>
+            <span className="ml-2 font-mono">{process.pid || 'N/A'}</span>
+          </div>
+          <div>
+            <span className="text-muted-foreground">Uptime:</span>
+            <span className="ml-2 font-mono">{uptime}</span>
+          </div>
+          {process.exitstatus !== 0 && (
+            <div className="col-span-2">
+              <span className="text-muted-foreground">Exit Status:</span>
+              <span className="ml-2 font-mono text-destructive">{process.exitstatus}</span>
+            </div>
+          )}
+        </div>
+
+        {/* Error Description */}
+        {process.spawnerr && (
+          <div className="rounded-md bg-destructive/10 p-2 text-xs text-destructive border border-destructive/20">
+            {process.spawnerr}
+          </div>
+        )}
+
+        {/* Actions */}
+        <div className="flex gap-2">
+          <Button
+            size="sm"
+            variant="success"
+            onClick={handleStart}
+            disabled={!canStartProcess(process.state) || isLoading}
+            className="flex-1"
+          >
+            <Play className="h-4 w-4" />
+            Start
+          </Button>
+          <Button
+            size="sm"
+            variant="warning"
+            onClick={handleStop}
+            disabled={!canStopProcess(process.state) || isLoading}
+            className="flex-1"
+          >
+            <Square className="h-4 w-4" />
+            Stop
+          </Button>
+          <Button
+            size="sm"
+            variant="outline"
+            onClick={handleRestart}
+            disabled={process.state === 0 || isLoading}
+          >
+            <RotateCw className={cn('h-4 w-4', isLoading && 'animate-spin-slow')} />
+          </Button>
+        </div>
+
+        {/* Description */}
+        {process.description && process.description !== 'pid ' + process.pid && (
+          <p className="text-xs text-muted-foreground italic">
+            {process.description}
+          </p>
+        )}
+      </CardContent>
+    </Card>
+  );
+}

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

components/providers/Providers.tsx

@@ -0,0 +1,30 @@
+'use client';
+
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { useState, ReactNode } from 'react';
+import { Toaster } from 'sonner';
+import { ThemeProvider } from './ThemeProvider';
+
+export function Providers({ children }: { children: ReactNode }) {
+  const [queryClient] = useState(
+    () =>
+      new QueryClient({
+        defaultOptions: {
+          queries: {
+            staleTime: 3 * 1000, // 3 seconds for real-time feel
+            refetchOnWindowFocus: false,
+            retry: 2,
+          },
+        },
+      })
+  );
+
+  return (
+    <ThemeProvider>
+      <QueryClientProvider client={queryClient}>
+        {children}
+        <Toaster position="top-right" richColors closeButton />
+      </QueryClientProvider>
+    </ThemeProvider>
+  );
+}

components/providers/ThemeProvider.tsx

@@ -0,0 +1,77 @@
+'use client';
+
+import { createContext, useContext, useEffect, useState, ReactNode } from 'react';
+
+type Theme = 'light' | 'dark' | 'system';
+
+interface ThemeContextType {
+  theme: Theme;
+  setTheme: (theme: Theme) => void;
+  resolvedTheme: 'light' | 'dark';
+}
+
+const ThemeContext = createContext<ThemeContextType | undefined>(undefined);
+
+export function ThemeProvider({ children }: { children: ReactNode }) {
+  const [theme, setThemeState] = useState<Theme>('system');
+  const [resolvedTheme, setResolvedTheme] = useState<'light' | 'dark'>('light');
+  const [mounted, setMounted] = useState(false);
+
+  useEffect(() => {
+    setMounted(true);
+    const stored = localStorage.getItem('theme') as Theme | null;
+    if (stored) {
+      setThemeState(stored);
+    }
+  }, []);
+
+  useEffect(() => {
+    if (!mounted) return;
+
+    const root = document.documentElement;
+    const systemTheme = window.matchMedia('(prefers-color-scheme: dark)').matches
+      ? 'dark'
+      : 'light';
+    const effectiveTheme = theme === 'system' ? systemTheme : theme;
+
+    // Add transition disable class
+    root.classList.add('disable-transitions');
+
+    // Update theme
+    if (effectiveTheme === 'dark') {
+      root.classList.add('dark');
+    } else {
+      root.classList.remove('dark');
+    }
+
+    setResolvedTheme(effectiveTheme);
+
+    // Re-enable transitions after a frame
+    requestAnimationFrame(() => {
+      root.classList.remove('disable-transitions');
+    });
+  }, [theme, mounted]);
+
+  const setTheme = (newTheme: Theme) => {
+    setThemeState(newTheme);
+    localStorage.setItem('theme', newTheme);
+  };
+
+  if (!mounted) {
+    return <>{children}</>;
+  }
+
+  return (
+    <ThemeContext.Provider value={{ theme, setTheme, resolvedTheme }}>
+      {children}
+    </ThemeContext.Provider>
+  );
+}
+
+export function useTheme() {
+  const context = useContext(ThemeContext);
+  if (!context) {
+    throw new Error('useTheme must be used within ThemeProvider');
+  }
+  return context;
+}

components/ui/badge.tsx

@@ -0,0 +1,27 @@
+import { HTMLAttributes } from 'react';
+import { cn } from '@/lib/utils/cn';
+
+export interface BadgeProps extends HTMLAttributes<HTMLDivElement> {
+  variant?: 'default' | 'secondary' | 'success' | 'warning' | 'destructive' | 'outline';
+}
+
+export function Badge({ className, variant = 'default', ...props }: BadgeProps) {
+  return (
+    <div
+      className={cn(
+        'inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors',
+        'focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2',
+        {
+          'border-transparent bg-primary text-primary-foreground': variant === 'default',
+          'border-transparent bg-secondary text-secondary-foreground': variant === 'secondary',
+          'border-transparent bg-success text-success-foreground': variant === 'success',
+          'border-transparent bg-warning text-warning-foreground': variant === 'warning',
+          'border-transparent bg-destructive text-destructive-foreground': variant === 'destructive',
+          'text-foreground': variant === 'outline',
+        },
+        className
+      )}
+      {...props}
+    />
+  );
+}

components/ui/button.tsx

@@ -0,0 +1,44 @@
+import { ButtonHTMLAttributes, forwardRef } from 'react';
+import { cn } from '@/lib/utils/cn';
+
+export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+  variant?: 'default' | 'secondary' | 'success' | 'warning' | 'destructive' | 'ghost' | 'outline';
+  size?: 'sm' | 'md' | 'lg' | 'icon';
+}
+
+const Button = forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ className, variant = 'default', size = 'md', ...props }, ref) => {
+    return (
+      <button
+        className={cn(
+          'inline-flex items-center justify-center gap-2 rounded-md font-medium transition-colors',
+          'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',
+          'disabled:pointer-events-none disabled:opacity-50',
+          {
+            'bg-primary text-primary-foreground hover:bg-primary/90': variant === 'default',
+            'bg-secondary text-secondary-foreground hover:bg-secondary/80': variant === 'secondary',
+            'bg-success text-success-foreground hover:bg-success/90': variant === 'success',
+            'bg-warning text-warning-foreground hover:bg-warning/90': variant === 'warning',
+            'bg-destructive text-destructive-foreground hover:bg-destructive/90':
+              variant === 'destructive',
+            'hover:bg-accent hover:text-accent-foreground': variant === 'ghost',
+            'border border-input bg-background hover:bg-accent hover:text-accent-foreground':
+              variant === 'outline',
+          },
+          {
+            'h-8 px-3 text-sm': size === 'sm',
+            'h-10 px-4': size === 'md',
+            'h-12 px-6 text-lg': size === 'lg',
+            'h-10 w-10': size === 'icon',
+          },
+          className
+        )}
+        ref={ref}
+        {...props}
+      />
+    );
+  }
+);
+Button.displayName = 'Button';
+
+export { Button };

components/ui/card.tsx

@@ -0,0 +1,69 @@
+import { HTMLAttributes, forwardRef } from 'react';
+import { cn } from '@/lib/utils/cn';
+
+const Card = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div
+      ref={ref}
+      className={cn(
+        'rounded-lg border bg-card text-card-foreground shadow-sm',
+        className
+      )}
+      {...props}
+    />
+  )
+);
+Card.displayName = 'Card';
+
+const CardHeader = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div
+      ref={ref}
+      className={cn('flex flex-col space-y-1.5 p-6', className)}
+      {...props}
+    />
+  )
+);
+CardHeader.displayName = 'CardHeader';
+
+const CardTitle = forwardRef<HTMLParagraphElement, HTMLAttributes<HTMLHeadingElement>>(
+  ({ className, ...props }, ref) => (
+    <h3
+      ref={ref}
+      className={cn('text-2xl font-semibold leading-none tracking-tight', className)}
+      {...props}
+    />
+  )
+);
+CardTitle.displayName = 'CardTitle';
+
+const CardDescription = forwardRef<HTMLParagraphElement, HTMLAttributes<HTMLParagraphElement>>(
+  ({ className, ...props }, ref) => (
+    <p
+      ref={ref}
+      className={cn('text-sm text-muted-foreground', className)}
+      {...props}
+    />
+  )
+);
+CardDescription.displayName = 'CardDescription';
+
+const CardContent = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div ref={ref} className={cn('p-6 pt-0', className)} {...props} />
+  )
+);
+CardContent.displayName = 'CardContent';
+
+const CardFooter = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div
+      ref={ref}
+      className={cn('flex items-center p-6 pt-0', className)}
+      {...props}
+    />
+  )
+);
+CardFooter.displayName = 'CardFooter';
+
+export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent };