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