chore: remove cashed

frontend/src/components/CertificateList.tsx

@@ -0,0 +1,105 @@
+import { useMutation, useQueryClient } from '@tanstack/react-query'
+import { Trash2 } from 'lucide-react'
+import { useCertificates } from '../hooks/useCertificates'
+import { deleteCertificate } from '../api/certificates'
+import { LoadingSpinner } from './LoadingStates'
+import { toast } from '../utils/toast'
+
+export default function CertificateList() {
+  const { certificates, isLoading, error } = useCertificates()
+  const queryClient = useQueryClient()
+
+  const deleteMutation = useMutation({
+    mutationFn: deleteCertificate,
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['certificates'] })
+      toast.success('Certificate deleted')
+    },
+    onError: (error: any) => {
+      toast.error(`Failed to delete certificate: ${error.message}`)
+    },
+  })
+
+  if (isLoading) return <LoadingSpinner />
+  if (error) return <div className="text-red-500">Failed to load certificates</div>
+
+  return (
+    <div className="bg-dark-card rounded-lg border border-gray-800 overflow-hidden">
+      <div className="overflow-x-auto">
+        <table className="w-full text-left text-sm text-gray-400">
+          <thead className="bg-gray-900 text-gray-200 uppercase font-medium">
+            <tr>
+              <th className="px-6 py-3">Name</th>
+              <th className="px-6 py-3">Domain</th>
+              <th className="px-6 py-3">Issuer</th>
+              <th className="px-6 py-3">Expires</th>
+              <th className="px-6 py-3">Status</th>
+              <th className="px-6 py-3">Actions</th>
+            </tr>
+          </thead>
+          <tbody className="divide-y divide-gray-800">
+            {certificates.length === 0 ? (
+              <tr>
+                <td colSpan={6} className="px-6 py-8 text-center text-gray-500">
+                  No certificates found.
+                </td>
+              </tr>
+            ) : (
+              certificates.map((cert) => (
+                <tr key={cert.id || cert.domain} className="hover:bg-gray-800/50 transition-colors">
+                  <td className="px-6 py-4 font-medium text-white">{cert.name || '-'}</td>
+                  <td className="px-6 py-4 font-medium text-white">{cert.domain}</td>
+                  <td className="px-6 py-4">{cert.issuer}</td>
+                  <td className="px-6 py-4">
+                    {new Date(cert.expires_at).toLocaleDateString()}
+                  </td>
+                  <td className="px-6 py-4">
+                    <StatusBadge status={cert.status} />
+                  </td>
+                  <td className="px-6 py-4">
+                    {cert.provider === 'custom' && cert.id && (
+                      <button
+                        onClick={() => {
+                          if (confirm('Are you sure you want to delete this certificate?')) {
+                            deleteMutation.mutate(cert.id!)
+                          }
+                        }}
+                        className="text-red-400 hover:text-red-300 transition-colors"
+                        title="Delete Certificate"
+                      >
+                        <Trash2 className="w-4 h-4" />
+                      </button>
+                    )}
+                  </td>
+                </tr>
+              ))
+            )}
+          </tbody>
+        </table>
+      </div>
+    </div>
+  )
+}
+
+function StatusBadge({ status }: { status: string }) {
+  const styles = {
+    valid: 'bg-green-900/30 text-green-400 border-green-800',
+    expiring: 'bg-yellow-900/30 text-yellow-400 border-yellow-800',
+    expired: 'bg-red-900/30 text-red-400 border-red-800',
+  }
+
+  const labels = {
+    valid: 'Valid',
+    expiring: 'Expiring Soon',
+    expired: 'Expired',
+  }
+
+  const style = styles[status as keyof typeof styles] || styles.valid
+  const label = labels[status as keyof typeof labels] || status
+
+  return (
+    <span className={`px-2.5 py-0.5 rounded-full text-xs font-medium border ${style}`}>
+      {label}
+    </span>
+  )
+}

frontend/src/components/ImportBanner.tsx

@@ -0,0 +1,30 @@
+interface Props {
+  session: { id: string }
+  onReview: () => void
+  onCancel: () => void
+}
+
+export default function ImportBanner({ session, onReview, onCancel }: Props) {
+  return (
+    <div className="bg-yellow-900/20 border border-yellow-600 text-yellow-300 px-4 py-3 rounded mb-6 flex items-center justify-between">
+      <div>
+        <div className="font-medium">Pending Import Session</div>
+        <div className="text-sm text-yellow-400/80">Session ID: {session.id}</div>
+      </div>
+      <div className="flex gap-3">
+        <button
+          onClick={onReview}
+          className="px-3 py-1 bg-yellow-600 hover:bg-yellow-500 text-black rounded text-sm font-medium"
+        >
+          Review Changes
+        </button>
+        <button
+          onClick={onCancel}
+          className="px-3 py-1 bg-gray-800 hover:bg-gray-700 text-yellow-300 border border-yellow-700 rounded text-sm font-medium"
+        >
+          Cancel
+        </button>
+      </div>
+    </div>
+  )
+}

frontend/src/components/ImportReviewTable.tsx

@@ -0,0 +1,139 @@
+import { useState } from 'react'
+
+interface HostPreview {
+  domain_names: string
+  [key: string]: unknown
+}
+
+interface Props {
+  hosts: HostPreview[]
+  conflicts: string[]
+  errors: string[]
+  caddyfileContent?: string
+  onCommit: (resolutions: Record<string, string>) => Promise<void>
+  onCancel: () => void
+}
+
+export default function ImportReviewTable({ hosts, conflicts, errors, caddyfileContent, onCommit, onCancel }: Props) {
+  const [resolutions, setResolutions] = useState<Record<string, string>>(() => {
+    const init: Record<string, string> = {}
+    conflicts.forEach((d: string) => { init[d] = 'keep' })
+    return init
+  })
+  const [submitting, setSubmitting] = useState(false)
+  const [error, setError] = useState<string | null>(null)
+  const [showSource, setShowSource] = useState(false)
+
+  const handleCommit = async () => {
+    setSubmitting(true)
+    setError(null)
+    try {
+      await onCommit(resolutions)
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Failed to commit import')
+    } finally {
+      setSubmitting(false)
+    }
+  }
+
+  return (
+    <div className="space-y-6">
+      {caddyfileContent && (
+        <div className="bg-dark-card rounded-lg border border-gray-800 overflow-hidden">
+          <div className="p-4 border-b border-gray-800 flex items-center justify-between cursor-pointer" onClick={() => setShowSource(!showSource)}>
+            <h2 className="text-lg font-semibold text-white">Source Caddyfile Content</h2>
+            <span className="text-gray-400 text-sm">{showSource ? 'Hide' : 'Show'}</span>
+          </div>
+          {showSource && (
+            <div className="p-4 bg-gray-900 overflow-x-auto">
+              <pre className="text-xs text-gray-300 font-mono whitespace-pre-wrap">{caddyfileContent}</pre>
+            </div>
+          )}
+        </div>
+      )}
+
+      <div className="bg-dark-card rounded-lg border border-gray-800 overflow-hidden">
+        <div className="p-4 border-b border-gray-800 flex items-center justify-between">
+          <h2 className="text-xl font-semibold text-white">Review Imported Hosts</h2>
+          <div className="flex gap-3">
+          <button
+            onClick={onCancel}
+            className="px-4 py-2 bg-gray-700 hover:bg-gray-600 text-white rounded-lg font-medium transition-colors"
+          >
+            Back
+          </button>
+          <button
+            onClick={handleCommit}
+            disabled={submitting}
+            className="px-4 py-2 bg-blue-active hover:bg-blue-hover text-white rounded-lg font-medium transition-colors disabled:opacity-50"
+          >
+            {submitting ? 'Committing...' : 'Commit Import'}
+          </button>
+        </div>
+      </div>
+
+      {error && (
+        <div className="m-4 bg-red-900/20 border border-red-500 text-red-400 px-4 py-3 rounded">
+          {error}
+        </div>
+      )}
+
+      {errors?.length > 0 && (
+        <div className="m-4 bg-yellow-900/20 border border-yellow-600 text-yellow-300 px-4 py-3 rounded">
+          <div className="font-medium mb-2">Issues found during parsing</div>
+          <ul className="list-disc list-inside text-sm">
+            {errors.map((e, i) => (
+              <li key={i}>{e}</li>
+            ))}
+          </ul>
+        </div>
+      )}
+
+      <div className="overflow-x-auto">
+        <table className="w-full">
+          <thead className="bg-gray-900 border-b border-gray-800">
+            <tr>
+              <th className="px-6 py-3 text-left text-xs font-medium text-gray-400 uppercase tracking-wider">
+                Domain Names
+              </th>
+              <th className="px-6 py-3 text-left text-xs font-medium text-gray-400 uppercase tracking-wider">
+                Conflict Resolution
+              </th>
+            </tr>
+          </thead>
+          <tbody className="divide-y divide-gray-800">
+            {hosts.map((h, idx) => {
+              const domain = h.domain_names
+              const hasConflict = conflicts.includes(domain)
+              return (
+                <tr key={`${domain}-${idx}`} className="hover:bg-gray-900/50">
+                  <td className="px-6 py-4 whitespace-nowrap">
+                    <div className="text-sm font-medium text-white">{domain}</div>
+                  </td>
+                  <td className="px-6 py-4 whitespace-nowrap">
+                    {hasConflict ? (
+                      <select
+                        value={resolutions[domain]}
+                        onChange={e => setResolutions({ ...resolutions, [domain]: e.target.value })}
+                        className="bg-gray-900 border border-gray-700 text-white rounded px-2 py-1"
+                      >
+                        <option value="keep">Keep Existing</option>
+                        <option value="overwrite">Overwrite</option>
+                        <option value="skip">Skip</option>
+                      </select>
+                    ) : (
+                      <span className="px-2 py-1 text-xs bg-green-900/30 text-green-400 rounded">
+                        No conflict
+                      </span>
+                    )}
+                  </td>
+                </tr>
+              )
+            })}
+          </tbody>
+        </table>
+      </div>
+    </div>
+    </div>
+  )
+}

frontend/src/components/Layout.tsx

@@ -0,0 +1,275 @@
+import { ReactNode, useState, useEffect } from 'react'
+import { Link, useLocation } from 'react-router-dom'
+import { useQuery } from '@tanstack/react-query'
+import { ThemeToggle } from './ThemeToggle'
+import { Button } from './ui/Button'
+import { useAuth } from '../hooks/useAuth'
+import { checkHealth } from '../api/health'
+import NotificationCenter from './NotificationCenter'
+import SystemStatus from './SystemStatus'
+import { Menu, ChevronDown, ChevronRight } from 'lucide-react'
+
+interface LayoutProps {
+  children: ReactNode
+}
+
+export default function Layout({ children }: LayoutProps) {
+  const location = useLocation()
+  const [mobileSidebarOpen, setMobileSidebarOpen] = useState(false)
+  const [isCollapsed, setIsCollapsed] = useState(() => {
+    const saved = localStorage.getItem('sidebarCollapsed')
+    return saved ? JSON.parse(saved) : false
+  })
+  const [expandedMenus, setExpandedMenus] = useState<string[]>([])
+  const { logout, user } = useAuth()
+
+  useEffect(() => {
+    localStorage.setItem('sidebarCollapsed', JSON.stringify(isCollapsed))
+  }, [isCollapsed])
+
+  const toggleMenu = (name: string) => {
+    setExpandedMenus(prev =>
+      prev.includes(name)
+        ? prev.filter(item => item !== name)
+        : [...prev, name]
+    )
+  }
+
+  const { data: health } = useQuery({
+    queryKey: ['health'],
+    queryFn: checkHealth,
+    staleTime: 1000 * 60 * 60, // 1 hour
+  })
+
+  const navigation = [
+    { name: 'Dashboard', path: '/', icon: '📊' },
+    { name: 'Proxy Hosts', path: '/proxy-hosts', icon: '🌐' },
+    { name: 'Remote Servers', path: '/remote-servers', icon: '🖥️' },
+    { name: 'Domains', path: '/domains', icon: '🌍' },
+    { name: 'Certificates', path: '/certificates', icon: '🔒' },
+    { name: 'Uptime', path: '/uptime', icon: '📈' },
+    { name: 'Notifications', path: '/notifications', icon: '🔔' },
+    { name: 'Import Caddyfile', path: '/import', icon: '📥' },
+    {
+      name: 'Settings',
+      path: '/settings',
+      icon: '⚙️',
+      children: [
+        { name: 'System', path: '/settings/system', icon: '⚙️' },
+        { name: 'Account', path: '/settings/account', icon: '🛡️' },
+      ]
+    },
+    {
+      name: 'Tasks',
+      path: '/tasks',
+      icon: '📋',
+      children: [
+        { name: 'Backups', path: '/tasks/backups', icon: '💾' },
+        { name: 'Logs', path: '/tasks/logs', icon: '📝' },
+      ]
+    },
+  ]
+
+  return (
+    <div className="min-h-screen bg-light-bg dark:bg-dark-bg flex transition-colors duration-200">
+      {/* Mobile Header */}
+      <div className="lg:hidden fixed top-0 left-0 right-0 h-16 bg-white dark:bg-dark-sidebar border-b border-gray-200 dark:border-gray-800 flex items-center justify-between px-4 z-40">
+        <h1 className="text-lg font-bold text-gray-900 dark:text-white">CPM+</h1>
+        <div className="flex items-center gap-2">
+          <NotificationCenter />
+          <ThemeToggle />
+          <Button variant="ghost" size="sm" onClick={() => setMobileSidebarOpen(!mobileSidebarOpen)}>
+            {mobileSidebarOpen ? '✕' : '☰'}
+          </Button>
+        </div>
+      </div>
+
+      {/* Sidebar */}
+      <aside className={`
+        fixed lg:fixed inset-y-0 left-0 z-30 transform transition-all duration-200 ease-in-out
+        bg-white dark:bg-dark-sidebar border-r border-gray-200 dark:border-gray-800 flex flex-col
+        ${mobileSidebarOpen ? 'translate-x-0' : '-translate-x-full lg:translate-x-0'}
+        ${isCollapsed ? 'w-20' : 'w-64'}
+      `}>
+        <div className={`p-4 hidden lg:flex items-center justify-center`}>
+           {/* Logo moved to header */}
+        </div>
+
+        <div className="flex flex-col flex-1 px-4 mt-16 lg:mt-0">
+          <nav className="flex-1 space-y-1">
+            {navigation.map((item) => {
+              if (item.children) {
+                // Collapsible Group
+                const isExpanded = expandedMenus.includes(item.name)
+                const isActive = location.pathname.startsWith(item.path!)
+
+                // If sidebar is collapsed, render as a simple link (icon only)
+                if (isCollapsed) {
+                  return (
+                    <Link
+                      key={item.name}
+                      to={item.path!}
+                      onClick={() => setMobileSidebarOpen(false)}
+                      className={`flex items-center gap-3 px-4 py-3 rounded-lg text-sm font-medium transition-colors justify-center ${
+                        isActive
+                          ? 'bg-blue-100 text-blue-700 dark:bg-blue-active dark:text-white'
+                          : 'text-gray-600 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800 hover:text-gray-900 dark:hover:text-white'
+                      }`}
+                      title={item.name}
+                    >
+                      <span className="text-lg">{item.icon}</span>
+                    </Link>
+                  )
+                }
+
+                // If sidebar is expanded, render as collapsible accordion
+                return (
+                  <div key={item.name} className="space-y-1">
+                    <button
+                      onClick={() => toggleMenu(item.name)}
+                      className={`w-full flex items-center justify-between px-4 py-3 rounded-lg text-sm font-medium transition-colors ${
+                        isActive
+                          ? 'text-blue-700 dark:text-blue-400'
+                          : 'text-gray-600 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800 hover:text-gray-900 dark:hover:text-white'
+                      }`}
+                    >
+                      <div className="flex items-center gap-3">
+                        <span className="text-lg">{item.icon}</span>
+                        <span>{item.name}</span>
+                      </div>
+                      {isExpanded ? (
+                        <ChevronDown className="w-4 h-4" />
+                      ) : (
+                        <ChevronRight className="w-4 h-4" />
+                      )}
+                    </button>
+
+                    {isExpanded && (
+                      <div className="pl-11 space-y-1">
+                        {item.children.map((child) => {
+                          const isChildActive = location.pathname === child.path
+                          return (
+                            <Link
+                              key={child.path}
+                              to={child.path!}
+                              onClick={() => setMobileSidebarOpen(false)}
+                              className={`block py-2 px-3 rounded-md text-sm transition-colors ${
+                                isChildActive
+                                  ? 'bg-blue-50 text-blue-700 dark:bg-blue-900/20 dark:text-blue-300'
+                                  : 'text-gray-500 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white hover:bg-gray-50 dark:hover:bg-gray-800/50'
+                              }`}
+                            >
+                              {child.name}
+                            </Link>
+                          )
+                        })}
+                      </div>
+                    )}
+                  </div>
+                )
+              }
+
+              const isActive = location.pathname === item.path
+
+              return (
+                <Link
+                  key={item.path}
+                  to={item.path!}
+                  onClick={() => setMobileSidebarOpen(false)}
+                  className={`flex items-center gap-3 px-4 py-3 rounded-lg text-sm font-medium transition-colors ${
+                    isActive
+                      ? 'bg-blue-100 text-blue-700 dark:bg-blue-active dark:text-white'
+                      : 'text-gray-600 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800 hover:text-gray-900 dark:hover:text-white'
+                  } ${isCollapsed ? 'justify-center' : ''}`}
+                  title={isCollapsed ? item.name : ''}
+                >
+                  <span className="text-lg">{item.icon}</span>
+                  {!isCollapsed && item.name}
+                </Link>
+              )
+            })}
+          </nav>
+
+          <div className={`mt-2 border-t border-gray-200 dark:border-gray-800 pt-4 ${isCollapsed ? 'hidden' : ''}`}>
+            <div className="text-xs text-gray-500 dark:text-gray-500 text-center mb-2 flex flex-col gap-0.5">
+              <span>Version {health?.version || 'dev'}</span>
+              {health?.git_commit && health.git_commit !== 'unknown' && (
+                <span className="text-[10px] opacity-75 font-mono">
+                  ({health.git_commit.substring(0, 7)})
+                </span>
+              )}
+            </div>
+            <button
+              onClick={() => {
+                setMobileSidebarOpen(false)
+                logout()
+              }}
+              className="mt-3 w-full flex items-center justify-center gap-2 px-4 py-3 rounded-lg text-sm font-medium transition-colors text-red-600 dark:text-red-400 bg-red-50 hover:bg-red-100 dark:bg-red-900/20 dark:hover:bg-red-900"
+            >
+              <span className="text-lg">🚪</span>
+              Logout
+            </button>
+          </div>
+
+          {/* Collapsed Logout */}
+          {isCollapsed && (
+             <div className="mt-2 border-t border-gray-200 dark:border-gray-800 pt-4 pb-4">
+                <button
+                  onClick={() => {
+                    setMobileSidebarOpen(false)
+                    logout()
+                  }}
+                  className="w-full flex items-center justify-center p-3 rounded-lg transition-colors text-red-600 dark:text-red-400 hover:bg-red-50 dark:hover:bg-red-900/20"
+                  title="Logout"
+                >
+                  <span className="text-lg">🚪</span>
+                </button>
+             </div>
+          )}
+
+        </div>
+      </aside>
+
+      {/* Overlay for mobile */}
+            {/* Mobile Overlay */}
+      {mobileSidebarOpen && (
+        <div
+          className="fixed inset-0 bg-gray-900/50 z-20 lg:hidden"
+          onClick={() => setMobileSidebarOpen(false)}
+        />
+      )}
+
+      {/* Main Content */}
+      <main className={`flex-1 min-w-0 overflow-auto pt-16 lg:pt-0 flex flex-col transition-all duration-200 ${isCollapsed ? 'lg:ml-20' : 'lg:ml-64'}`}>
+        {/* Desktop Header */}
+        <header className="hidden lg:flex items-center justify-between px-8 py-4 bg-white dark:bg-dark-sidebar border-b border-gray-200 dark:border-gray-800 relative">
+           <div className="w-1/3 flex items-center gap-4">
+             <button
+                onClick={() => setIsCollapsed(!isCollapsed)}
+                className="p-2 rounded-lg text-gray-500 hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors"
+                title={isCollapsed ? "Expand sidebar" : "Collapse sidebar"}
+              >
+                <Menu className="w-5 h-5" />
+              </button>
+           </div>
+           <div className="absolute left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2">
+             <h1 className="text-xl font-bold text-gray-900 dark:text-white">CPM+</h1>
+           </div>
+           <div className="w-1/3 flex justify-end items-center gap-4">
+             {user && (
+               <Link to="/settings/account" className="text-sm font-medium text-gray-700 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 transition-colors">
+                 {user.name}
+               </Link>
+             )}
+             <SystemStatus />
+             <NotificationCenter />
+             <ThemeToggle />
+           </div>
+        </header>
+        <div className="p-4 lg:p-8 max-w-7xl mx-auto w-full">
+          {children}
+        </div>
+      </main>
+    </div>
+  )
+}

frontend/src/components/LoadingStates.tsx

@@ -0,0 +1,60 @@
+export function LoadingSpinner({ size = 'md' }: { size?: 'sm' | 'md' | 'lg' }) {
+  const sizeClasses = {
+    sm: 'w-4 h-4 border-2',
+    md: 'w-8 h-8 border-3',
+    lg: 'w-12 h-12 border-4',
+  }
+
+  return (
+    <div
+      className={`${sizeClasses[size]} border-blue-600 border-t-transparent rounded-full animate-spin`}
+      role="status"
+      aria-label="Loading"
+    />
+  )
+}
+
+export function LoadingOverlay({ message = 'Loading...' }: { message?: string }) {
+  return (
+    <div className="fixed inset-0 bg-slate-900/50 backdrop-blur-sm flex items-center justify-center z-50">
+      <div className="bg-slate-800 rounded-lg p-6 flex flex-col items-center gap-4 shadow-xl">
+        <LoadingSpinner size="lg" />
+        <p className="text-slate-300">{message}</p>
+      </div>
+    </div>
+  )
+}
+
+export function LoadingCard() {
+  return (
+    <div className="bg-slate-800 rounded-lg p-6 animate-pulse">
+      <div className="h-6 bg-slate-700 rounded w-1/3 mb-4"></div>
+      <div className="space-y-3">
+        <div className="h-4 bg-slate-700 rounded w-full"></div>
+        <div className="h-4 bg-slate-700 rounded w-5/6"></div>
+        <div className="h-4 bg-slate-700 rounded w-4/6"></div>
+      </div>
+    </div>
+  )
+}
+
+export function EmptyState({
+  icon = '📦',
+  title,
+  description,
+  action,
+}: {
+  icon?: string
+  title: string
+  description: string
+  action?: React.ReactNode
+}) {
+  return (
+    <div className="flex flex-col items-center justify-center py-12 px-4 text-center">
+      <div className="text-6xl mb-4">{icon}</div>
+      <h3 className="text-xl font-semibold text-slate-200 mb-2">{title}</h3>
+      <p className="text-slate-400 mb-6 max-w-md">{description}</p>
+      {action}
+    </div>
+  )
+}

frontend/src/components/LogFilters.tsx

@@ -0,0 +1,112 @@
+import React from 'react';
+import { Search, Download, RefreshCw } from 'lucide-react';
+import { Button } from './ui/Button';
+
+interface LogFiltersProps {
+  search: string;
+  onSearchChange: (value: string) => void;
+  status: string;
+  onStatusChange: (value: string) => void;
+  level: string;
+  onLevelChange: (value: string) => void;
+  host: string;
+  onHostChange: (value: string) => void;
+  sort: 'asc' | 'desc';
+  onSortChange: (value: 'asc' | 'desc') => void;
+  onRefresh: () => void;
+  onDownload: () => void;
+  isLoading: boolean;
+}
+
+export const LogFilters: React.FC<LogFiltersProps> = ({
+  search,
+  onSearchChange,
+  status,
+  onStatusChange,
+  level,
+  onLevelChange,
+  host,
+  onHostChange,
+  sort,
+  onSortChange,
+  onRefresh,
+  onDownload,
+  isLoading
+}) => {
+  return (
+    <div className="flex flex-col md:flex-row gap-4 p-4 bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700">
+      <div className="flex-1 relative">
+        <div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
+          <Search className="h-4 w-4 text-gray-400" />
+        </div>
+        <input
+          type="text"
+          placeholder="Search logs..."
+          value={search}
+          onChange={(e) => onSearchChange(e.target.value)}
+          className="block w-full pl-10 rounded-md border-gray-300 dark:border-gray-600 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm dark:bg-gray-700 dark:text-white"
+        />
+      </div>
+
+      <div className="w-full md:w-48">
+        <input
+          type="text"
+          placeholder="Filter by Host"
+          value={host}
+          onChange={(e) => onHostChange(e.target.value)}
+          className="block w-full rounded-md border-gray-300 dark:border-gray-600 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm dark:bg-gray-700 dark:text-white"
+        />
+      </div>
+
+      <div className="w-full md:w-32">
+        <select
+          value={level}
+          onChange={(e) => onLevelChange(e.target.value)}
+          className="block w-full rounded-md border-gray-300 dark:border-gray-600 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm dark:bg-gray-700 dark:text-white"
+        >
+          <option value="">All Levels</option>
+          <option value="DEBUG">Debug</option>
+          <option value="INFO">Info</option>
+          <option value="WARN">Warn</option>
+          <option value="ERROR">Error</option>
+        </select>
+      </div>
+
+      <div className="w-full md:w-32">
+        <select
+          value={status}
+          onChange={(e) => onStatusChange(e.target.value)}
+          className="block w-full rounded-md border-gray-300 dark:border-gray-600 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm dark:bg-gray-700 dark:text-white"
+        >
+          <option value="">All Status</option>
+          <option value="2xx">2xx Success</option>
+          <option value="3xx">3xx Redirect</option>
+          <option value="4xx">4xx Client Error</option>
+          <option value="5xx">5xx Server Error</option>
+        </select>
+      </div>
+
+      <div className="w-full md:w-32">
+        <select
+          value={sort}
+          onChange={(e) => onSortChange(e.target.value as 'asc' | 'desc')}
+          className="block w-full rounded-md border-gray-300 dark:border-gray-600 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm dark:bg-gray-700 dark:text-white"
+        >
+          <option value="desc">Newest First</option>
+          <option value="asc">Oldest First</option>
+        </select>
+      </div>
+
+      <div className="flex gap-2">
+        <Button onClick={onRefresh} variant="secondary" size="sm" isLoading={isLoading}>
+          <RefreshCw className="w-4 h-4 mr-2" />
+          Refresh
+        </Button>
+        <Button onClick={onDownload} variant="secondary" size="sm">
+          <Download className="w-4 h-4 mr-2" />
+          Download
+        </Button>
+      </div>
+    </div>
+  );
+};

frontend/src/components/LogTable.tsx

@@ -0,0 +1,100 @@
+import React from 'react';
+import { CaddyAccessLog } from '../api/logs';
+import { format } from 'date-fns';
+
+interface LogTableProps {
+  logs: CaddyAccessLog[];
+  isLoading: boolean;
+}
+
+export const LogTable: React.FC<LogTableProps> = ({ logs, isLoading }) => {
+  if (isLoading) {
+    return (
+      <div className="w-full h-64 flex items-center justify-center text-gray-500">
+        Loading logs...
+      </div>
+    );
+  }
+
+  if (!logs || logs.length === 0) {
+    return (
+      <div className="w-full h-64 flex items-center justify-center text-gray-500">
+        No logs found matching criteria.
+      </div>
+    );
+  }
+
+  return (
+    <div className="overflow-x-auto">
+      <table className="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
+        <thead className="bg-gray-50 dark:bg-gray-800">
+          <tr>
+            <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">Time</th>
+            <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">Status</th>
+            <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">Method</th>
+            <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">Host</th>
+            <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">Path</th>
+            <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">IP</th>
+            <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">Latency</th>
+            <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">Message</th>
+          </tr>
+        </thead>
+        <tbody className="bg-white dark:bg-gray-900 divide-y divide-gray-200 dark:divide-gray-700">
+          {logs.map((log, idx) => {
+            // Check if this is a structured access log or a plain text system log
+            const isAccessLog = log.status > 0 || (log.request && log.request.method);
+
+            if (!isAccessLog) {
+              return (
+                <tr key={idx} className="hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors">
+                  <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-400">
+                    {format(new Date(log.ts * 1000), 'MMM d HH:mm:ss')}
+                  </td>
+                  <td colSpan={7} className="px-6 py-4 text-sm text-gray-900 dark:text-white font-mono whitespace-pre-wrap break-all">
+                    {log.msg}
+                  </td>
+                </tr>
+              );
+            }
+
+            return (
+            <tr key={idx} className="hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors">
+              <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-400">
+                {format(new Date(log.ts * 1000), 'MMM d HH:mm:ss')}
+              </td>
+              <td className="px-6 py-4 whitespace-nowrap text-sm">
+                {log.status > 0 && (
+                  <span className={`px-2 inline-flex text-xs leading-5 font-semibold rounded-full
+                    ${log.status >= 500 ? 'bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-200' :
+                      log.status >= 400 ? 'bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-200' :
+                      log.status >= 300 ? 'bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200' :
+                      'bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200'}`}>
+                    {log.status}
+                  </span>
+                )}
+              </td>
+              <td className="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900 dark:text-white">
+                {log.request?.method}
+              </td>
+              <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-400">
+                {log.request?.host}
+              </td>
+              <td className="px-6 py-4 text-sm text-gray-500 dark:text-gray-400 max-w-xs truncate" title={log.request?.uri}>
+                {log.request?.uri}
+              </td>
+              <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-400">
+                {log.request?.remote_ip}
+              </td>
+              <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-400">
+                {log.duration > 0 ? (log.duration * 1000).toFixed(2) + 'ms' : ''}
+              </td>
+              <td className="px-6 py-4 text-sm text-gray-500 dark:text-gray-400 max-w-xs truncate" title={log.msg}>
+                {log.msg}
+              </td>
+            </tr>
+          )})}
+        </tbody>
+      </table>
+    </div>
+  );
+};

frontend/src/components/NotificationCenter.tsx

@@ -0,0 +1,156 @@
+import React, { useState } from 'react';
+import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
+import { Bell, X, Info, AlertTriangle, AlertCircle, CheckCircle, ExternalLink } from 'lucide-react';
+import { getNotifications, markNotificationRead, markAllNotificationsRead, checkUpdates } from '../api/system';
+
+const NotificationCenter: React.FC = () => {
+  const [isOpen, setIsOpen] = useState(false);
+  const queryClient = useQueryClient();
+
+  const { data: notifications = [] } = useQuery({
+    queryKey: ['notifications'],
+    queryFn: () => getNotifications(true),
+    refetchInterval: 30000, // Poll every 30s
+  });
+
+  const { data: updateInfo } = useQuery({
+    queryKey: ['system-updates'],
+    queryFn: checkUpdates,
+    staleTime: 1000 * 60 * 60, // 1 hour
+  });
+
+  const markReadMutation = useMutation({
+    mutationFn: markNotificationRead,
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['notifications'] });
+    },
+  });
+
+  const markAllReadMutation = useMutation({
+    mutationFn: markAllNotificationsRead,
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['notifications'] });
+    },
+  });
+
+  const unreadCount = notifications.length + (updateInfo?.available ? 1 : 0);
+  const hasCritical = notifications.some(n => n.type === 'error');
+  const hasWarning = notifications.some(n => n.type === 'warning') || updateInfo?.available;
+
+  const getBellColor = () => {
+    if (hasCritical) return 'text-red-500 hover:text-red-600';
+    if (hasWarning) return 'text-yellow-500 hover:text-yellow-600';
+    return 'text-green-500 hover:text-green-600';
+  };
+
+  const getIcon = (type: string) => {
+    switch (type) {
+      case 'success': return <CheckCircle className="w-5 h-5 text-green-500" />;
+      case 'warning': return <AlertTriangle className="w-5 h-5 text-yellow-500" />;
+      case 'error': return <AlertCircle className="w-5 h-5 text-red-500" />;
+      default: return <Info className="w-5 h-5 text-blue-500" />;
+    }
+  };
+
+  return (
+    <div className="relative">
+      <button
+        onClick={() => setIsOpen(!isOpen)}
+        className={`relative p-2 focus:outline-none transition-colors ${getBellColor()}`}
+        aria-label="Notifications"
+      >
+        <Bell className="w-6 h-6" />
+        {unreadCount > 0 && (
+          <span className="absolute top-0 right-0 inline-flex items-center justify-center px-2 py-1 text-xs font-bold leading-none text-white transform translate-x-1/4 -translate-y-1/4 bg-red-600 rounded-full">
+            {unreadCount}
+          </span>
+        )}
+      </button>
+
+      {isOpen && (
+        <>
+          <div
+            data-testid="notification-backdrop"
+            className="fixed inset-0 z-10"
+            onClick={() => setIsOpen(false)}
+          ></div>
+          <div className="absolute right-0 z-20 w-80 mt-2 overflow-hidden bg-white rounded-md shadow-lg dark:bg-gray-800 ring-1 ring-black ring-opacity-5">
+            <div className="flex items-center justify-between px-4 py-2 border-b dark:border-gray-700">
+              <h3 className="text-sm font-medium text-gray-900 dark:text-white">Notifications</h3>
+              {notifications.length > 0 && (
+                <button
+                  onClick={() => markAllReadMutation.mutate()}
+                  className="text-xs text-blue-600 hover:text-blue-500 dark:text-blue-400"
+                >
+                  Mark all read
+                </button>
+              )}
+            </div>
+            <div className="max-h-96 overflow-y-auto">
+              {/* Update Notification */}
+              {updateInfo?.available && (
+                <div className="flex items-start px-4 py-3 border-b dark:border-gray-700 bg-yellow-50 dark:bg-yellow-900/10 hover:bg-yellow-100 dark:hover:bg-yellow-900/20">
+                  <div className="flex-shrink-0 mt-0.5">
+                    <AlertCircle className="w-5 h-5 text-yellow-500" />
+                  </div>
+                  <div className="ml-3 w-0 flex-1">
+                    <p className="text-sm font-medium text-gray-900 dark:text-white">
+                      Update Available: {updateInfo.latest_version}
+                    </p>
+                    <a
+                      href={updateInfo.changelog_url}
+                      target="_blank"
+                      rel="noopener noreferrer"
+                      className="mt-1 text-sm text-blue-600 hover:text-blue-500 dark:text-blue-400 flex items-center"
+                    >
+                      View Changelog <ExternalLink className="w-3 h-3 ml-1" />
+                    </a>
+                  </div>
+                </div>
+              )}
+
+              {notifications.length === 0 && !updateInfo?.available ? (
+                <div className="px-4 py-6 text-center text-sm text-gray-500 dark:text-gray-400">
+                  No new notifications
+                </div>
+              ) : (
+                notifications.map((notification) => (
+                  <div
+                    key={notification.id}
+                    className="flex items-start px-4 py-3 border-b dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-700"
+                  >
+                    <div className="flex-shrink-0 mt-0.5">
+                      {getIcon(notification.type)}
+                    </div>
+                    <div className="ml-3 w-0 flex-1">
+                      <p className="text-sm font-medium text-gray-900 dark:text-white">
+                        {notification.title}
+                      </p>
+                      <p className="mt-1 text-sm text-gray-500 dark:text-gray-400">
+                        {notification.message}
+                      </p>
+                      <p className="mt-1 text-xs text-gray-400">
+                        {new Date(notification.created_at).toLocaleString()}
+                      </p>
+                    </div>
+                    <div className="ml-4 flex-shrink-0 flex">
+                      <button
+                        onClick={() => markReadMutation.mutate(notification.id)}
+                        className="bg-white dark:bg-gray-800 rounded-md inline-flex text-gray-400 hover:text-gray-500 focus:outline-none"
+                      >
+                        <span className="sr-only">Close</span>
+                        <X className="w-4 h-4" />
+                      </button>
+                    </div>
+                  </div>
+                ))
+              )}
+            </div>
+          </div>
+        </>
+      )}
+    </div>
+  );
+};
+
+export default NotificationCenter;

frontend/src/components/PasswordStrengthMeter.tsx

@@ -0,0 +1,57 @@
+import React from 'react';
+import { calculatePasswordStrength } from '../utils/passwordStrength';
+
+interface Props {
+  password: string;
+}
+
+export const PasswordStrengthMeter: React.FC<Props> = ({ password }) => {
+  const { score, label, color, feedback } = calculatePasswordStrength(password);
+
+  // Calculate width percentage based on score (0-4)
+  // 0: 5%, 1: 25%, 2: 50%, 3: 75%, 4: 100%
+  const width = Math.max(5, (score / 4) * 100);
+
+  // Map color name to Tailwind classes
+  const getColorClass = (c: string) => {
+    switch (c) {
+      case 'red': return 'bg-red-500';
+      case 'yellow': return 'bg-yellow-500';
+      case 'green': return 'bg-green-500';
+      default: return 'bg-gray-300';
+    }
+  };
+
+  const getTextColorClass = (c: string) => {
+    switch (c) {
+      case 'red': return 'text-red-500';
+      case 'yellow': return 'text-yellow-600';
+      case 'green': return 'text-green-600';
+      default: return 'text-gray-500';
+    }
+  };
+
+  if (!password) return null;
+
+  return (
+    <div className="mt-2 space-y-1">
+      <div className="flex justify-between items-center text-xs">
+        <span className={`font-medium ${getTextColorClass(color)}`}>
+          {label}
+        </span>
+        {feedback.length > 0 && (
+          <span className="text-gray-500 dark:text-gray-400">
+            {feedback[0]}
+          </span>
+        )}
+      </div>
+
+      <div className="h-1.5 w-full bg-gray-200 dark:bg-gray-700 rounded-full overflow-hidden">
+        <div
+          className={`h-full transition-all duration-300 ease-out ${getColorClass(color)}`}
+          style={{ width: `${width}%` }}
+        />
+      </div>
+    </div>
+  );
+};

frontend/src/components/ProxyHostForm.tsx

@@ -0,0 +1,576 @@
+import { useState, useEffect } from 'react'
+import { CircleHelp, AlertCircle, Check, X, Loader2 } from 'lucide-react'
+import type { ProxyHost } from '../api/proxyHosts'
+import { testProxyHostConnection } from '../api/proxyHosts'
+import { useRemoteServers } from '../hooks/useRemoteServers'
+import { useDomains } from '../hooks/useDomains'
+import { useCertificates } from '../hooks/useCertificates'
+import { useDocker } from '../hooks/useDocker'
+import { parse } from 'tldts'
+
+interface ProxyHostFormProps {
+  host?: ProxyHost
+  onSubmit: (data: Partial<ProxyHost>) => Promise<void>
+  onCancel: () => void
+}
+
+export default function ProxyHostForm({ host, onSubmit, onCancel }: ProxyHostFormProps) {
+  const [formData, setFormData] = useState({
+    domain_names: host?.domain_names || '',
+    forward_scheme: host?.forward_scheme || 'http',
+    forward_host: host?.forward_host || '',
+    forward_port: host?.forward_port || 80,
+    ssl_forced: host?.ssl_forced ?? true,
+    http2_support: host?.http2_support ?? true,
+    hsts_enabled: host?.hsts_enabled ?? true,
+    hsts_subdomains: host?.hsts_subdomains ?? true,
+    block_exploits: host?.block_exploits ?? true,
+    websocket_support: host?.websocket_support ?? true,
+    advanced_config: host?.advanced_config || '',
+    enabled: host?.enabled ?? true,
+    certificate_id: host?.certificate_id,
+  })
+
+  const { servers: remoteServers } = useRemoteServers()
+  const { domains, createDomain } = useDomains()
+  const { certificates } = useCertificates()
+  const [connectionSource, setConnectionSource] = useState<'local' | 'custom' | string>('custom')
+  const [selectedDomain, setSelectedDomain] = useState('')
+  const [selectedContainerId, setSelectedContainerId] = useState<string>('')
+
+  // New Domain Popup State
+  const [showDomainPrompt, setShowDomainPrompt] = useState(false)
+  const [pendingDomain, setPendingDomain] = useState('')
+  const [dontAskAgain, setDontAskAgain] = useState(false)
+
+  // Test Connection State
+
+  useEffect(() => {
+    const stored = localStorage.getItem('cpmp_dont_ask_domain')
+    if (stored === 'true') {
+      setDontAskAgain(true)
+    }
+  }, [])
+
+  const [testStatus, setTestStatus] = useState<'idle' | 'testing' | 'success' | 'error'>('idle')
+
+  const checkNewDomains = (input: string) => {
+    if (dontAskAgain) return
+
+    const domainList = input.split(',').map(d => d.trim()).filter(d => d)
+    for (const domain of domainList) {
+      const parsed = parse(domain)
+      if (parsed.domain && parsed.domain !== domain) {
+        // It's a subdomain, check if the base domain exists
+        const baseDomain = parsed.domain
+        const exists = domains.some(d => d.name === baseDomain)
+        if (!exists) {
+          setPendingDomain(baseDomain)
+          setShowDomainPrompt(true)
+          return // Only prompt for one at a time
+        }
+      } else if (parsed.domain && parsed.domain === domain) {
+         // It is a base domain, check if it exists
+         const exists = domains.some(d => d.name === domain)
+         if (!exists) {
+            setPendingDomain(domain)
+            setShowDomainPrompt(true)
+            return
+         }
+      }
+    }
+  }
+
+
+  const handleSaveDomain = async () => {
+    try {
+      await createDomain(pendingDomain)
+      setShowDomainPrompt(false)
+    } catch (err) {
+      console.error("Failed to save domain", err)
+      // Optionally show error
+    }
+  }
+
+  const handleDontAskToggle = (checked: boolean) => {
+    setDontAskAgain(checked)
+    localStorage.setItem('cpmp_dont_ask_domain', String(checked))
+  }
+
+  const handleTestConnection = async () => {
+    if (!formData.forward_host || !formData.forward_port) return
+
+    setTestStatus('testing')
+    try {
+      await testProxyHostConnection(formData.forward_host, formData.forward_port)
+      setTestStatus('success')
+      // Reset status after 3 seconds
+      setTimeout(() => setTestStatus('idle'), 3000)
+    } catch (err) {
+      console.error("Test connection failed", err)
+      setTestStatus('error')
+      // Reset status after 3 seconds
+      setTimeout(() => setTestStatus('idle'), 3000)
+    }
+  }
+
+  // Fetch containers based on selected source
+  // If 'local', host is undefined (which defaults to local socket in backend)
+  // If remote UUID, we need to find the server and get its host address?
+  // Actually, the backend ListContainers takes a 'host' query param.
+  // If it's a remote server, we should probably pass the UUID or the host address.
+  // Looking at backend/internal/services/docker_service.go, it takes a 'host' string.
+  // If it's a remote server, we need to pass the TCP address (e.g. tcp://1.2.3.4:2375).
+
+  const getDockerHostString = () => {
+    if (connectionSource === 'local') return undefined;
+    if (connectionSource === 'custom') return null;
+    const server = remoteServers.find(s => s.uuid === connectionSource);
+    if (!server) return null;
+    // Construct the Docker host string
+    return `tcp://${server.host}:${server.port}`;
+  }
+
+  const { containers: dockerContainers, isLoading: dockerLoading, error: dockerError } = useDocker(getDockerHostString())
+  const [loading, setLoading] = useState(false)
+  const [error, setError] = useState<string | null>(null)
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault()
+    setLoading(true)
+    setError(null)
+
+    try {
+      await onSubmit(formData)
+    } catch (err: any) {
+      console.error("Submit error:", err)
+      // Extract error message from axios response if available
+      const message = err.response?.data?.error || err.message || 'Failed to save proxy host'
+      setError(message)
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  const handleContainerSelect = (containerId: string) => {
+    setSelectedContainerId(containerId)
+    const container = dockerContainers.find(c => c.id === containerId)
+    if (container) {
+      // Default to internal IP and private port
+      let host = container.ip || container.names[0]
+      let port = container.ports && container.ports.length > 0 ? container.ports[0].private_port : 80
+
+      // If using a Remote Server, try to use the Host IP and Mapped Public Port
+      if (connectionSource !== 'local' && connectionSource !== 'custom') {
+        const server = remoteServers.find(s => s.uuid === connectionSource)
+        if (server) {
+          // Use the Remote Server's Host IP (e.g. public/tailscale IP)
+          host = server.host
+
+          // Find a mapped public port
+          // We prefer the first mapped port we find
+          const mappedPort = container.ports?.find(p => p.public_port)
+          if (mappedPort) {
+            port = mappedPort.public_port
+          } else {
+            // If no public port is mapped, we can't reach it from outside
+            // But we'll leave the internal port as a fallback, though it likely won't work
+            console.warn('No public port mapped for container on remote server')
+          }
+        }
+      }
+
+      let newDomainNames = formData.domain_names
+      if (selectedDomain) {
+        const subdomain = container.names[0].replace(/^\//, '')
+        newDomainNames = `${subdomain}.${selectedDomain}`
+      }
+
+      setFormData({
+        ...formData,
+        forward_host: host,
+        forward_port: port,
+        forward_scheme: 'http',
+        domain_names: newDomainNames,
+      })
+    }
+  }
+
+  const handleBaseDomainChange = (domain: string) => {
+    setSelectedDomain(domain)
+    if (selectedContainerId && domain) {
+      const container = dockerContainers.find(c => c.id === selectedContainerId)
+      if (container) {
+        const subdomain = container.names[0].replace(/^\//, '')
+        setFormData(prev => ({
+          ...prev,
+          domain_names: `${subdomain}.${domain}`
+        }))
+      }
+    }
+  }
+
+  return (
+    <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center p-4 z-50">
+      <div className="bg-dark-card rounded-lg border border-gray-800 max-w-2xl w-full max-h-[90vh] overflow-y-auto">
+        <div className="p-6 border-b border-gray-800">
+          <h2 className="text-2xl font-bold text-white">
+            {host ? 'Edit Proxy Host' : 'Add Proxy Host'}
+          </h2>
+        </div>
+
+        <form onSubmit={handleSubmit} className="p-6 space-y-6">
+          {error && (
+            <div className="bg-red-900/20 border border-red-500 text-red-400 px-4 py-3 rounded">
+              {error}
+            </div>
+          )}
+
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+            {/* Docker Container Quick Select */}
+            <div>
+              <label htmlFor="connection-source" className="block text-sm font-medium text-gray-300 mb-2">
+                Source
+              </label>
+              <select
+                id="connection-source"
+                value={connectionSource}
+                onChange={e => setConnectionSource(e.target.value)}
+                className="w-full bg-gray-900 border border-gray-700 rounded-lg px-4 py-2 text-white focus:outline-none focus:ring-2 focus:ring-blue-500"
+              >
+                <option value="custom">Custom / Manual</option>
+                <option value="local">Local (Docker Socket)</option>
+                {remoteServers
+                  .filter(s => s.provider === 'docker' && s.enabled)
+                  .map(server => (
+                    <option key={server.uuid} value={server.uuid}>
+                      {server.name} ({server.host})
+                    </option>
+                  ))
+                }
+              </select>
+            </div>
+
+            <div>
+              <label htmlFor="quick-select-docker" className="block text-sm font-medium text-gray-300 mb-2">
+                Containers
+              </label>
+
+              <select
+                id="quick-select-docker"
+                onChange={e => handleContainerSelect(e.target.value)}
+                disabled={dockerLoading || connectionSource === 'custom'}
+                className="w-full bg-gray-900 border border-gray-700 rounded-lg px-4 py-2 text-white focus:outline-none focus:ring-2 focus:ring-blue-500 disabled:opacity-50"
+              >
+                <option value="">
+                  {connectionSource === 'custom'
+                    ? 'Select a source to view containers'
+                    : (dockerLoading ? 'Loading containers...' : '-- Select a container --')}
+                </option>
+                {dockerContainers.map(container => (
+                  <option key={container.id} value={container.id}>
+                    {container.names[0]} ({container.image})
+                  </option>
+                ))}
+              </select>
+              {dockerError && connectionSource !== 'custom' && (
+                <p className="text-xs text-red-400 mt-1">
+                  Failed to connect: {(dockerError as Error).message}
+                </p>
+              )}
+            </div>
+          </div>
+
+          {/* Domain Names */}
+          <div className="space-y-4">
+            {domains.length > 0 && (
+              <div>
+                <label htmlFor="base-domain" className="block text-sm font-medium text-gray-300 mb-2">
+                  Base Domain (Auto-fill)
+                </label>
+                <select
+                  id="base-domain"
+                  value={selectedDomain}
+                  onChange={e => handleBaseDomainChange(e.target.value)}
+                  className="w-full bg-gray-900 border border-gray-700 rounded-lg px-4 py-2 text-white focus:outline-none focus:ring-2 focus:ring-blue-500"
+                >
+                  <option value="">-- Select a base domain --</option>
+                  {domains.map(domain => (
+                    <option key={domain.uuid} value={domain.name}>
+                      {domain.name}
+                    </option>
+                  ))}
+                </select>
+              </div>
+            )}
+            <div>
+              <label htmlFor="domain-names" className="block text-sm font-medium text-gray-300 mb-2">
+                Domain Names (comma-separated)
+              </label>
+              <input
+                id="domain-names"
+                type="text"
+                required
+                value={formData.domain_names}
+                onChange={e => setFormData({ ...formData, domain_names: e.target.value })}
+                onBlur={e => checkNewDomains(e.target.value)}
+                placeholder="example.com, www.example.com"
+                className="w-full bg-gray-900 border border-gray-700 rounded-lg px-4 py-2 text-white focus:outline-none focus:ring-2 focus:ring-blue-500"
+              />
+            </div>
+          </div>
+
+          {/* Forward Details */}
+          <div className="grid grid-cols-3 gap-4">
+            <div>
+              <label htmlFor="forward-scheme" className="block text-sm font-medium text-gray-300 mb-2">Scheme</label>
+              <select
+                id="forward-scheme"
+                value={formData.forward_scheme}
+                onChange={e => setFormData({ ...formData, forward_scheme: e.target.value })}
+                className="w-full bg-gray-900 border border-gray-700 rounded-lg px-4 py-2 text-white focus:outline-none focus:ring-2 focus:ring-blue-500"
+              >
+                <option value="http">HTTP</option>
+                <option value="https">HTTPS</option>
+              </select>
+            </div>
+            <div>
+              <label htmlFor="forward-host" className="block text-sm font-medium text-gray-300 mb-2">Host</label>
+              <input
+                id="forward-host"
+                type="text"
+                required
+                value={formData.forward_host}
+                onChange={e => setFormData({ ...formData, forward_host: e.target.value })}
+                placeholder="192.168.1.100"
+                className="w-full bg-gray-900 border border-gray-700 rounded-lg px-4 py-2 text-white focus:outline-none focus:ring-2 focus:ring-blue-500"
+              />
+            </div>
+            <div>
+              <label htmlFor="forward-port" className="block text-sm font-medium text-gray-300 mb-2">Port</label>
+              <input
+                id="forward-port"
+                type="number"
+                required
+                min="1"
+                max="65535"
+                value={formData.forward_port}
+                onChange={e => setFormData({ ...formData, forward_port: parseInt(e.target.value) })}
+                className="w-full bg-gray-900 border border-gray-700 rounded-lg px-4 py-2 text-white focus:outline-none focus:ring-2 focus:ring-blue-500"
+              />
+            </div>
+          </div>
+
+          {/* SSL Certificate Selection */}
+          <div>
+            <label className="block text-sm font-medium text-gray-300 mb-2">
+              SSL Certificate
+            </label>
+            <select
+              value={formData.certificate_id || 0}
+              onChange={e => setFormData({ ...formData, certificate_id: parseInt(e.target.value) || null })}
+              className="w-full bg-gray-900 border border-gray-700 rounded-lg px-4 py-2 text-white focus:outline-none focus:ring-2 focus:ring-blue-500"
+            >
+              <option value={0}>Request a new SSL Certificate</option>
+              {certificates.filter(c => c.provider === 'custom').map(cert => (
+                <option key={cert.id} value={cert.id}>
+                  {cert.name} ({cert.domain})
+                </option>
+              ))}
+            </select>
+          </div>
+
+          {/* SSL & Security Options */}
+          <div className="space-y-3">
+            <label className="flex items-center gap-3">
+              <input
+                type="checkbox"
+                checked={formData.ssl_forced}
+                onChange={e => setFormData({ ...formData, ssl_forced: e.target.checked })}
+                className="w-4 h-4 text-blue-600 bg-gray-900 border-gray-700 rounded focus:ring-blue-500"
+              />
+              <span className="text-sm text-gray-300">Force SSL</span>
+              <div title="Redirects visitors to the secure HTTPS version of your site. You should almost always turn this on to protect your data." className="text-gray-500 hover:text-gray-300 cursor-help">
+                <CircleHelp size={14} />
+              </div>
+            </label>
+            <label className="flex items-center gap-3">
+              <input
+                type="checkbox"
+                checked={formData.http2_support}
+                onChange={e => setFormData({ ...formData, http2_support: e.target.checked })}
+                className="w-4 h-4 text-blue-600 bg-gray-900 border-gray-700 rounded focus:ring-blue-500"
+              />
+              <span className="text-sm text-gray-300">HTTP/2 Support</span>
+              <div title="Makes your site load faster by using a modern connection standard. Safe to leave on for most sites." className="text-gray-500 hover:text-gray-300 cursor-help">
+                <CircleHelp size={14} />
+              </div>
+            </label>
+            <label className="flex items-center gap-3">
+              <input
+                type="checkbox"
+                checked={formData.hsts_enabled}
+                onChange={e => setFormData({ ...formData, hsts_enabled: e.target.checked })}
+                className="w-4 h-4 text-blue-600 bg-gray-900 border-gray-700 rounded focus:ring-blue-500"
+              />
+              <span className="text-sm text-gray-300">HSTS Enabled</span>
+              <div title="Tells browsers to REMEMBER to only use HTTPS for this site. Adds extra security but can be tricky if you ever want to go back to HTTP." className="text-gray-500 hover:text-gray-300 cursor-help">
+                <CircleHelp size={14} />
+              </div>
+            </label>
+            <label className="flex items-center gap-3">
+              <input
+                type="checkbox"
+                checked={formData.hsts_subdomains}
+                onChange={e => setFormData({ ...formData, hsts_subdomains: e.target.checked })}
+                className="w-4 h-4 text-blue-600 bg-gray-900 border-gray-700 rounded focus:ring-blue-500"
+              />
+              <span className="text-sm text-gray-300">HSTS Subdomains</span>
+              <div title="Applies the HSTS rule to all subdomains (like blog.mysite.com). Only use this if ALL your subdomains are secure." className="text-gray-500 hover:text-gray-300 cursor-help">
+                <CircleHelp size={14} />
+              </div>
+            </label>
+            <label className="flex items-center gap-3">
+              <input
+                type="checkbox"
+                checked={formData.block_exploits}
+                onChange={e => setFormData({ ...formData, block_exploits: e.target.checked })}
+                className="w-4 h-4 text-blue-600 bg-gray-900 border-gray-700 rounded focus:ring-blue-500"
+              />
+              <span className="text-sm text-gray-300">Block Exploits</span>
+              <div title="Automatically blocks common hacking attempts. Recommended to keep your site safe." className="text-gray-500 hover:text-gray-300 cursor-help">
+                <CircleHelp size={14} />
+              </div>
+            </label>
+            <label className="flex items-center gap-3">
+              <input
+                type="checkbox"
+                checked={formData.websocket_support}
+                onChange={e => setFormData({ ...formData, websocket_support: e.target.checked })}
+                className="w-4 h-4 text-blue-600 bg-gray-900 border-gray-700 rounded focus:ring-blue-500"
+              />
+              <span className="text-sm text-gray-300">Websockets Support</span>
+              <div title="Needed for apps that update in real-time (like chat, notifications, or live status). If your app feels 'broken' or doesn't update, try turning this on." className="text-gray-500 hover:text-gray-300 cursor-help">
+                <CircleHelp size={14} />
+              </div>
+            </label>
+          </div>
+
+          {/* Advanced Config */}
+          <div>
+            <label htmlFor="advanced-config" className="block text-sm font-medium text-gray-300 mb-2">
+              Advanced Caddy Config (Optional)
+            </label>
+            <textarea
+              id="advanced-config"
+              value={formData.advanced_config}
+              onChange={e => setFormData({ ...formData, advanced_config: e.target.value })}
+              placeholder="Additional Caddy directives..."
+              rows={4}
+              className="w-full bg-gray-900 border border-gray-700 rounded-lg px-4 py-2 text-white font-mono text-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
+            />
+          </div>
+
+          {/* Enabled Toggle */}
+          <div className="flex items-center justify-end pb-2">
+            <label className="flex items-center gap-3 cursor-pointer">
+              <input
+                type="checkbox"
+                checked={formData.enabled}
+                onChange={e => setFormData({ ...formData, enabled: e.target.checked })}
+                className="w-4 h-4 text-blue-600 bg-gray-900 border-gray-700 rounded focus:ring-blue-500"
+              />
+              <span className="text-sm font-medium text-white">Enable Proxy Host</span>
+            </label>
+          </div>
+
+          {/* Actions */}
+          <div className="flex gap-3 justify-end pt-4 border-t border-gray-800">
+            <button
+              type="button"
+              onClick={onCancel}
+              disabled={loading}
+              className="px-6 py-2 bg-gray-700 hover:bg-gray-600 text-white rounded-lg font-medium transition-colors disabled:opacity-50"
+            >
+              Cancel
+            </button>
+
+            <button
+              type="button"
+              onClick={handleTestConnection}
+              disabled={loading || testStatus === 'testing' || !formData.forward_host || !formData.forward_port}
+              className={`px-4 py-2 rounded-lg font-medium transition-colors flex items-center gap-2 disabled:opacity-50 ${
+                testStatus === 'success' ? 'bg-green-600 hover:bg-green-500 text-white' :
+                testStatus === 'error' ? 'bg-red-600 hover:bg-red-500 text-white' :
+                'bg-gray-700 hover:bg-gray-600 text-white'
+              }`}
+              title="Test connection to the forward host"
+            >
+              {testStatus === 'testing' ? <Loader2 size={18} className="animate-spin" /> :
+               testStatus === 'success' ? <Check size={18} /> :
+               testStatus === 'error' ? <X size={18} /> :
+               'Test Connection'}
+            </button>
+
+            <button
+              type="submit"
+              disabled={loading}
+              className="px-6 py-2 bg-blue-600 hover:bg-blue-500 text-white rounded-lg font-medium transition-colors disabled:opacity-50"
+            >
+              {loading ? 'Saving...' : 'Save'}
+            </button>
+          </div>
+        </form>
+      </div>
+
+      {/* New Domain Prompt Modal */}
+      {showDomainPrompt && (
+        <div className="fixed inset-0 bg-black bg-opacity-70 flex items-center justify-center p-4 z-[60]">
+          <div className="bg-gray-800 rounded-lg border border-gray-700 max-w-md w-full p-6 shadow-xl">
+            <div className="flex items-center gap-3 mb-4 text-blue-400">
+              <AlertCircle size={24} />
+              <h3 className="text-lg font-semibold text-white">New Base Domain Detected</h3>
+            </div>
+
+            <p className="text-gray-300 mb-4">
+              You are using a new base domain: <span className="font-mono font-bold text-white">{pendingDomain}</span>
+            </p>
+            <p className="text-gray-400 text-sm mb-6">
+              Would you like to save this to your domain list for easier selection in the future?
+            </p>
+
+            <div className="flex items-center gap-2 mb-6">
+              <input
+                type="checkbox"
+                id="dont-ask"
+                checked={dontAskAgain}
+                onChange={e => handleDontAskToggle(e.target.checked)}
+                className="w-4 h-4 text-blue-600 bg-gray-900 border-gray-600 rounded focus:ring-blue-500"
+              />
+              <label htmlFor="dont-ask" className="text-sm text-gray-400 select-none">
+                Don't ask me again
+              </label>
+            </div>
+
+            <div className="flex justify-end gap-3">
+              <button
+                type="button"
+                onClick={() => setShowDomainPrompt(false)}
+                className="px-4 py-2 bg-gray-700 hover:bg-gray-600 text-white rounded-lg text-sm transition-colors"
+              >
+                No, thanks
+              </button>
+              <button
+                type="button"
+                onClick={handleSaveDomain}
+                className="px-4 py-2 bg-blue-600 hover:bg-blue-500 text-white rounded-lg text-sm font-medium transition-colors"
+              >
+                Yes, save it
+              </button>
+            </div>
+          </div>
+        </div>
+      )}
+    </div>
+  )
+}

frontend/src/components/RemoteServerForm.tsx

@@ -0,0 +1,202 @@
+import { useEffect, useState } from 'react'
+import { Loader2, Check, X, CircleHelp } from 'lucide-react'
+import { type RemoteServer, testCustomRemoteServerConnection } from '../api/remoteServers'
+
+interface Props {
+  server?: RemoteServer
+  onSubmit: (data: Partial<RemoteServer>) => Promise<void>
+  onCancel: () => void
+}
+
+export default function RemoteServerForm({ server, onSubmit, onCancel }: Props) {
+  const [formData, setFormData] = useState({
+    name: server?.name || '',
+    provider: server?.provider || 'generic',
+    host: server?.host || '',
+    port: server?.port ?? 22,
+    username: server?.username || '',
+    enabled: server?.enabled ?? true,
+  })
+
+  const [loading, setLoading] = useState(false)
+  const [error, setError] = useState<string | null>(null)
+  const [testStatus, setTestStatus] = useState<'idle' | 'testing' | 'success' | 'error'>('idle')
+
+  useEffect(() => {
+    setFormData({
+      name: server?.name || '',
+      provider: server?.provider || 'generic',
+      host: server?.host || '',
+      port: server?.port ?? 22,
+      username: server?.username || '',
+      enabled: server?.enabled ?? true,
+    })
+  }, [server])
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault()
+    setLoading(true)
+    setError(null)
+    try {
+      await onSubmit(formData)
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Failed to save server')
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  const handleTestConnection = async () => {
+    if (!formData.host || !formData.port) return
+    setTestStatus('testing')
+    setError(null)
+    try {
+      const result = await testCustomRemoteServerConnection(formData.host, formData.port)
+      if (result.reachable) {
+        setTestStatus('success')
+        setTimeout(() => setTestStatus('idle'), 3000)
+      } else {
+        setTestStatus('error')
+        setError(`Connection failed: ${result.error || 'Unknown error'}`)
+      }
+    } catch {
+      setTestStatus('error')
+      setError('Connection failed')
+    }
+  }
+
+  return (
+    <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center p-4 z-50">
+      <div className="bg-dark-card rounded-lg border border-gray-800 max-w-lg w-full">
+        <div className="p-6 border-b border-gray-800">
+          <h2 className="text-2xl font-bold text-white">
+            {server ? 'Edit Remote Server' : 'Add Remote Server'}
+          </h2>
+        </div>
+
+        <form onSubmit={handleSubmit} className="p-6 space-y-6">
+          {error && (
+            <div className="bg-red-900/20 border border-red-500 text-red-400 px-4 py-3 rounded">
+              {error}
+            </div>
+          )}
+
+          <div>
+            <label className="block text-sm font-medium text-gray-300 mb-2">Name</label>
+            <input
+              type="text"
+              required
+              value={formData.name}
+              onChange={e => setFormData({ ...formData, name: e.target.value })}
+              placeholder="My Production Server"
+              className="w-full bg-gray-900 border border-gray-700 rounded-lg px-4 py-2 text-white focus:outline-none focus:ring-2 focus:ring-blue-500"
+            />
+          </div>
+
+          <div className="grid grid-cols-2 gap-4">
+            <div>
+              <label className="block text-sm font-medium text-gray-300 mb-2">Provider</label>
+              <select
+                value={formData.provider}
+                onChange={e => {
+                  const newProvider = e.target.value;
+                  setFormData({
+                    ...formData,
+                    provider: newProvider,
+                    // Set default port for Docker
+                    port: newProvider === 'docker' ? 2375 : (newProvider === 'generic' ? 22 : formData.port)
+                  })
+                }}
+                className="w-full bg-gray-900 border border-gray-700 rounded-lg px-4 py-2 text-white focus:outline-none focus:ring-2 focus:ring-blue-500"
+              >
+                <option value="generic">Generic</option>
+                <option value="docker">Docker</option>
+                <option value="kubernetes">Kubernetes</option>
+              </select>
+            </div>
+            <div>
+              <label className="block text-sm font-medium text-gray-300 mb-2">Host</label>
+              <input
+                type="text"
+                required
+                value={formData.host}
+                onChange={e => setFormData({ ...formData, host: e.target.value })}
+                placeholder="192.168.1.100"
+                className="w-full bg-gray-900 border border-gray-700 rounded-lg px-4 py-2 text-white focus:outline-none focus:ring-2 focus:ring-blue-500"
+              />
+            </div>
+          </div>
+
+          <div className="grid grid-cols-2 gap-4">
+            <div>
+              <label className="block text-sm font-medium text-gray-300 mb-2">Port</label>
+              <input
+                type="number"
+                min={1}
+                max={65535}
+                value={formData.port}
+                onChange={e => setFormData({ ...formData, port: parseInt(e.target.value) })}
+                className="w-full bg-gray-900 border border-gray-700 rounded-lg px-4 py-2 text-white focus:outline-none focus:ring-2 focus:ring-blue-500"
+              />
+            </div>
+            {formData.provider !== 'docker' && (
+              <div>
+                <label className="block text-sm font-medium text-gray-300 mb-2">Username</label>
+                <input
+                  type="text"
+                  value={formData.username}
+                  onChange={e => setFormData({ ...formData, username: e.target.value })}
+                  className="w-full bg-gray-900 border border-gray-700 rounded-lg px-4 py-2 text-white focus:outline-none focus:ring-2 focus:ring-blue-500"
+                />
+              </div>
+            )}
+          </div>
+
+          <label className="flex items-center gap-3">
+            <input
+              type="checkbox"
+              checked={formData.enabled}
+              onChange={e => setFormData({ ...formData, enabled: e.target.checked })}
+              className="w-4 h-4 text-blue-600 bg-gray-900 border-gray-700 rounded focus:ring-blue-500"
+            />
+            <span className="text-sm text-gray-300">Enabled</span>
+          </label>
+
+          <div className="flex gap-3 justify-end pt-4 border-t border-gray-800">
+            <button
+              type="button"
+              onClick={handleTestConnection}
+              disabled={testStatus === 'testing' || !formData.host || !formData.port}
+              className={`px-4 py-2 rounded-lg font-medium transition-colors flex items-center gap-2 mr-auto ${
+                testStatus === 'success' ? 'bg-green-600 text-white' :
+                testStatus === 'error' ? 'bg-red-600 text-white' :
+                'bg-gray-700 hover:bg-gray-600 text-white'
+              }`}
+            >
+              {testStatus === 'testing' ? <Loader2 className="w-4 h-4 animate-spin" /> :
+               testStatus === 'success' ? <Check className="w-4 h-4" /> :
+               testStatus === 'error' ? <X className="w-4 h-4" /> :
+               <CircleHelp className="w-4 h-4" />}
+              Test Connection
+            </button>
+            <button
+              type="button"
+              onClick={onCancel}
+              disabled={loading}
+              className="px-6 py-2 bg-gray-700 hover:bg-gray-600 text-white rounded-lg font-medium transition-colors disabled:opacity-50"
+            >
+              Cancel
+            </button>
+            <button
+              type="submit"
+              disabled={loading}
+              className="px-6 py-2 bg-blue-active hover:bg-blue-hover text-white rounded-lg font-medium transition-colors disabled:opacity-50"
+            >
+              {loading ? 'Saving...' : (server ? 'Update' : 'Create')}
+            </button>
+          </div>
+        </form>
+      </div>
+    </div>
+  )
+}

frontend/src/components/RequireAuth.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+import { Navigate, useLocation } from 'react-router-dom';
+import { useAuth } from '../hooks/useAuth';
+
+const RequireAuth: React.FC<{ children: React.ReactNode }> = ({ children }) => {
+  const { isAuthenticated, isLoading } = useAuth();
+  const location = useLocation();
+
+  if (isLoading) {
+    return <div>Loading...</div>; // Or a spinner
+  }
+
+  if (!isAuthenticated) {
+    return <Navigate to="/login" state={{ from: location }} replace />;
+  }
+
+  return children;
+};
+
+export default RequireAuth;

frontend/src/components/SetupGuard.tsx

@@ -0,0 +1,38 @@
+import { useEffect } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { useQuery } from '@tanstack/react-query';
+import { getSetupStatus } from '../api/setup';
+
+interface SetupGuardProps {
+  children: React.ReactNode;
+}
+
+export const SetupGuard: React.FC<SetupGuardProps> = ({ children }) => {
+  const navigate = useNavigate();
+
+  const { data: status, isLoading } = useQuery({
+    queryKey: ['setupStatus'],
+    queryFn: getSetupStatus,
+    retry: false,
+  });
+
+  useEffect(() => {
+    if (status?.setupRequired) {
+      navigate('/setup');
+    }
+  }, [status, navigate]);
+
+  if (isLoading) {
+    return (
+      <div className="min-h-screen flex items-center justify-center bg-gray-100 dark:bg-gray-900">
+        <div className="text-blue-500">Loading...</div>
+      </div>
+    );
+  }
+
+  if (status?.setupRequired) {
+    return null; // Will redirect
+  }
+
+  return <>{children}</>;
+};

frontend/src/components/SystemStatus.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import { useQuery } from '@tanstack/react-query';
+import { checkUpdates } from '../api/system';
+
+const SystemStatus: React.FC = () => {
+  // We still query for updates here to keep the cache fresh,
+  // but the UI is now handled by NotificationCenter
+  useQuery({
+    queryKey: ['system-updates'],
+    queryFn: checkUpdates,
+    staleTime: 1000 * 60 * 60, // 1 hour
+  });
+
+  return null;
+};
+
+export default SystemStatus;

frontend/src/components/ThemeToggle.tsx

@@ -0,0 +1,12 @@
+import { useTheme } from '../hooks/useTheme'
+import { Button } from './ui/Button'
+
+export function ThemeToggle() {
+  const { theme, toggleTheme } = useTheme()
+
+  return (
+    <Button variant="ghost" size="sm" onClick={toggleTheme} title={`Switch to ${theme === 'dark' ? 'light' : 'dark'} mode`}>
+      {theme === 'dark' ? '☀️' : '🌙'}
+    </Button>
+  )
+}

frontend/src/components/Toast.tsx

@@ -0,0 +1,57 @@
+import { useEffect, useState } from 'react'
+import { toastCallbacks, Toast } from '../utils/toast'
+
+export function ToastContainer() {
+  const [toasts, setToasts] = useState<Toast[]>([])
+
+  useEffect(() => {
+    const callback = (toast: Toast) => {
+      setToasts(prev => [...prev, toast])
+      setTimeout(() => {
+        setToasts(prev => prev.filter(t => t.id !== toast.id))
+      }, 5000)
+    }
+    toastCallbacks.add(callback)
+    return () => {
+      toastCallbacks.delete(callback)
+    }
+  }, [])
+
+  const removeToast = (id: number) => {
+    setToasts(prev => prev.filter(t => t.id !== id))
+  }
+
+  return (
+    <div className="fixed bottom-4 right-4 z-50 flex flex-col gap-2 pointer-events-none">
+      {toasts.map(toast => (
+        <div
+          key={toast.id}
+          className={`pointer-events-auto px-4 py-3 rounded-lg shadow-lg flex items-center gap-3 min-w-[300px] max-w-[500px] animate-slide-in ${
+            toast.type === 'success'
+              ? 'bg-green-600 text-white'
+              : toast.type === 'error'
+              ? 'bg-red-600 text-white'
+              : toast.type === 'warning'
+              ? 'bg-yellow-600 text-white'
+              : 'bg-blue-600 text-white'
+          }`}
+        >
+          <div className="flex-1">
+            {toast.type === 'success' && <span className="mr-2">✓</span>}
+            {toast.type === 'error' && <span className="mr-2">✗</span>}
+            {toast.type === 'warning' && <span className="mr-2">⚠</span>}
+            {toast.type === 'info' && <span className="mr-2">ℹ</span>}
+            {toast.message}
+          </div>
+          <button
+            onClick={() => removeToast(toast.id)}
+            className="text-white/80 hover:text-white transition-colors"
+            aria-label="Close"
+          >
+            ×
+          </button>
+        </div>
+      ))}
+    </div>
+  )
+}

frontend/src/components/__tests__/ImportReviewTable.test.tsx

@@ -0,0 +1,118 @@
+import { describe, it, expect, vi, afterEach } from 'vitest'
+import { render, screen, fireEvent, waitFor } from '@testing-library/react'
+import ImportReviewTable from '../ImportReviewTable'
+import { mockImportPreview } from '../../test/mockData'
+
+describe('ImportReviewTable', () => {
+  const mockOnCommit = vi.fn(() => Promise.resolve())
+  const mockOnCancel = vi.fn()
+
+  afterEach(() => {
+    vi.clearAllMocks()
+  })
+
+  it('displays hosts to import', () => {
+    render(
+      <ImportReviewTable
+        hosts={mockImportPreview.hosts}
+        conflicts={[]}
+        errors={[]}
+        onCommit={mockOnCommit}
+        onCancel={mockOnCancel}
+      />
+    )
+
+    expect(screen.getByText('Review Imported Hosts')).toBeInTheDocument()
+    expect(screen.getByText('test.example.com')).toBeInTheDocument()
+  })
+
+  it('displays conflicts with resolution dropdowns', () => {
+    const conflicts = ['test.example.com']
+    render(
+      <ImportReviewTable
+        hosts={mockImportPreview.hosts}
+        conflicts={conflicts}
+        errors={[]}
+        onCommit={mockOnCommit}
+        onCancel={mockOnCancel}
+      />
+    )
+
+    expect(screen.getByText('test.example.com')).toBeInTheDocument()
+    expect(screen.getByRole('combobox')).toBeInTheDocument()
+  })
+
+  it('displays errors', () => {
+    const errors = ['Invalid Caddyfile syntax', 'Missing required field']
+
+    render(
+      <ImportReviewTable
+        hosts={mockImportPreview.hosts}
+        conflicts={[]}
+        errors={errors}
+        onCommit={mockOnCommit}
+        onCancel={mockOnCancel}
+      />
+    )
+
+    expect(screen.getByText('Issues found during parsing')).toBeInTheDocument()
+    expect(screen.getByText('Invalid Caddyfile syntax')).toBeInTheDocument()
+    expect(screen.getByText('Missing required field')).toBeInTheDocument()
+  })
+
+  it('calls onCommit with resolutions', async () => {
+    const conflicts = ['test.example.com']
+    render(
+      <ImportReviewTable
+        hosts={mockImportPreview.hosts}
+        conflicts={conflicts}
+        errors={[]}
+        onCommit={mockOnCommit}
+        onCancel={mockOnCancel}
+      />
+    )
+
+    const dropdown = screen.getByRole('combobox')
+    fireEvent.change(dropdown, { target: { value: 'overwrite' } })
+
+    const commitButton = screen.getByText('Commit Import')
+    fireEvent.click(commitButton)
+
+    await waitFor(() => {
+      expect(mockOnCommit).toHaveBeenCalledWith({
+        'test.example.com': 'overwrite',
+      })
+    })
+  })
+
+  it('calls onCancel when cancel button is clicked', () => {
+    render(
+      <ImportReviewTable
+        hosts={mockImportPreview.hosts}
+        conflicts={[]}
+        errors={[]}
+        onCommit={mockOnCommit}
+        onCancel={mockOnCancel}
+      />
+    )
+
+    fireEvent.click(screen.getByText('Back'))
+    expect(mockOnCancel).toHaveBeenCalledOnce()
+  })
+
+  it('shows conflict indicator on conflicting hosts', () => {
+    const conflicts = ['test.example.com']
+    render(
+      <ImportReviewTable
+        hosts={mockImportPreview.hosts}
+        conflicts={conflicts}
+        errors={[]}
+        onCommit={mockOnCommit}
+        onCancel={mockOnCancel}
+      />
+    )
+
+    expect(screen.getByRole('combobox')).toBeInTheDocument()
+    expect(screen.queryByText('No conflict')).not.toBeInTheDocument()
+  })
+})

frontend/src/components/__tests__/Layout.test.tsx

@@ -0,0 +1,129 @@
+import { ReactNode } from 'react'
+import { describe, it, expect, vi } from 'vitest'
+import { render, screen, fireEvent } from '@testing-library/react'
+import { BrowserRouter } from 'react-router-dom'
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
+import Layout from '../Layout'
+import { ThemeProvider } from '../../context/ThemeContext'
+
+const mockLogout = vi.fn()
+
+// Mock AuthContext
+vi.mock('../../hooks/useAuth', () => ({
+  useAuth: () => ({
+    logout: mockLogout,
+  }),
+}))
+
+// Mock API
+vi.mock('../../api/health', () => ({
+  checkHealth: vi.fn().mockResolvedValue({
+    version: '0.1.0',
+    git_commit: 'abcdef1',
+  }),
+}))
+
+const renderWithProviders = (children: ReactNode) => {
+  const queryClient = new QueryClient({
+    defaultOptions: {
+      queries: {
+        retry: false,
+      },
+    },
+  })
+
+  return render(
+    <QueryClientProvider client={queryClient}>
+      <BrowserRouter>
+        <ThemeProvider>
+          {children}
+        </ThemeProvider>
+      </BrowserRouter>
+    </QueryClientProvider>
+  )
+}
+
+describe('Layout', () => {
+  it('renders the application title', () => {
+    renderWithProviders(
+      <Layout>
+        <div>Test Content</div>
+      </Layout>
+    )
+
+    expect(screen.getAllByText('CPM+')[0]).toBeInTheDocument()
+  })
+
+  it('renders all navigation items', () => {
+    renderWithProviders(
+      <Layout>
+        <div>Test Content</div>
+      </Layout>
+    )
+
+    expect(screen.getByText('Dashboard')).toBeInTheDocument()
+    expect(screen.getByText('Proxy Hosts')).toBeInTheDocument()
+    expect(screen.getByText('Remote Servers')).toBeInTheDocument()
+    expect(screen.getByText('Certificates')).toBeInTheDocument()
+    expect(screen.getByText('Import Caddyfile')).toBeInTheDocument()
+    expect(screen.getByText('Settings')).toBeInTheDocument()
+  })
+
+  it('renders children content', () => {
+    renderWithProviders(
+      <Layout>
+        <div data-testid="test-content">Test Content</div>
+      </Layout>
+    )
+
+    expect(screen.getByTestId('test-content')).toBeInTheDocument()
+  })
+
+  it('displays version information', async () => {
+    renderWithProviders(
+      <Layout>
+        <div>Test Content</div>
+      </Layout>
+    )
+
+    expect(await screen.findByText('Version 0.1.0')).toBeInTheDocument()
+  })
+
+  it('calls logout when logout button is clicked', () => {
+    renderWithProviders(
+      <Layout>
+        <div>Test Content</div>
+      </Layout>
+    )
+
+    const logoutButton = screen.getByText('Logout')
+    fireEvent.click(logoutButton)
+
+    expect(mockLogout).toHaveBeenCalled()
+  })
+
+  it('toggles sidebar on mobile', () => {
+    renderWithProviders(
+      <Layout>
+        <div>Test Content</div>
+      </Layout>
+    )
+
+    // Initially sidebar is hidden on mobile (by CSS class, but we can check if the toggle button exists)
+    // The toggle button has text '☰' when closed
+    const toggleButton = screen.getByText('☰')
+    fireEvent.click(toggleButton)
+
+    // Now it should show '✕'
+    expect(screen.getByText('✕')).toBeInTheDocument()
+
+    // And the overlay should be present
+    // The overlay has class 'fixed inset-0 bg-black/50 z-20 lg:hidden'
+    // We can find it by class or just assume if we click it it closes
+    // Let's try to click the overlay. It doesn't have text.
+    // We can query by selector if we add a test id or just rely on structure.
+    // But let's just click the toggle button again to close.
+    fireEvent.click(screen.getByText('✕'))
+    expect(screen.getByText('☰')).toBeInTheDocument()
+  })
+})

frontend/src/components/__tests__/NotificationCenter.test.tsx

@@ -0,0 +1,171 @@
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest'
+import { render, screen, fireEvent, waitFor } from '@testing-library/react'
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
+import NotificationCenter from '../NotificationCenter'
+import * as api from '../../api/system'
+
+// Mock the API
+vi.mock('../../api/system', () => ({
+  getNotifications: vi.fn(),
+  markNotificationRead: vi.fn(),
+  markAllNotificationsRead: vi.fn(),
+  checkUpdates: vi.fn(),
+}))
+
+const createWrapper = () => {
+  const queryClient = new QueryClient({
+    defaultOptions: {
+      queries: {
+        retry: false,
+      },
+    },
+  })
+  return ({ children }: { children: React.ReactNode }) => (
+    <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
+  )
+}
+
+const mockNotifications: api.Notification[] = [
+  {
+    id: '1',
+    type: 'info',
+    title: 'Info Notification',
+    message: 'This is an info message',
+    read: false,
+    created_at: '2025-01-01T10:00:00Z',
+  },
+  {
+    id: '2',
+    type: 'success',
+    title: 'Success Notification',
+    message: 'This is a success message',
+    read: false,
+    created_at: '2025-01-01T11:00:00Z',
+  },
+  {
+    id: '3',
+    type: 'warning',
+    title: 'Warning Notification',
+    message: 'This is a warning message',
+    read: false,
+    created_at: '2025-01-01T12:00:00Z',
+  },
+  {
+    id: '4',
+    type: 'error',
+    title: 'Error Notification',
+    message: 'This is an error message',
+    read: false,
+    created_at: '2025-01-01T13:00:00Z',
+  },
+]
+
+describe('NotificationCenter', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+    vi.mocked(api.checkUpdates).mockResolvedValue({
+      available: false,
+      latest_version: '0.0.0',
+      changelog_url: '',
+    })
+  })
+
+  afterEach(() => {
+    vi.clearAllMocks()
+  })
+
+  it('renders bell icon and unread count', async () => {
+    vi.mocked(api.getNotifications).mockResolvedValue(mockNotifications)
+    render(<NotificationCenter />, { wrapper: createWrapper() })
+
+    expect(screen.getByRole('button', { name: /notifications/i })).toBeInTheDocument()
+
+    await waitFor(() => {
+      expect(screen.getByText('4')).toBeInTheDocument()
+    })
+  })
+
+  it('opens notification panel on click', async () => {
+    vi.mocked(api.getNotifications).mockResolvedValue(mockNotifications)
+    render(<NotificationCenter />, { wrapper: createWrapper() })
+
+    const bellButton = screen.getByRole('button', { name: /notifications/i })
+    fireEvent.click(bellButton)
+
+    await waitFor(() => {
+      expect(screen.getByText('Notifications')).toBeInTheDocument()
+      expect(screen.getByText('Info Notification')).toBeInTheDocument()
+      expect(screen.getByText('Success Notification')).toBeInTheDocument()
+      expect(screen.getByText('Warning Notification')).toBeInTheDocument()
+      expect(screen.getByText('Error Notification')).toBeInTheDocument()
+    })
+  })
+
+  it('displays empty state when no notifications', async () => {
+    vi.mocked(api.getNotifications).mockResolvedValue([])
+    render(<NotificationCenter />, { wrapper: createWrapper() })
+
+    const bellButton = screen.getByRole('button', { name: /notifications/i })
+    fireEvent.click(bellButton)
+
+    await waitFor(() => {
+      expect(screen.getByText('No new notifications')).toBeInTheDocument()
+    })
+  })
+
+  it('marks single notification as read', async () => {
+    vi.mocked(api.getNotifications).mockResolvedValue(mockNotifications)
+    vi.mocked(api.markNotificationRead).mockResolvedValue()
+
+    render(<NotificationCenter />, { wrapper: createWrapper() })
+
+    fireEvent.click(screen.getByRole('button', { name: /notifications/i }))
+
+    await waitFor(() => {
+      expect(screen.getByText('Info Notification')).toBeInTheDocument()
+    })
+
+    const closeButtons = screen.getAllByRole('button', { name: /close/i })
+    fireEvent.click(closeButtons[0])
+
+    await waitFor(() => {
+      expect(api.markNotificationRead).toHaveBeenCalledWith('1', expect.anything())
+    })
+  })
+
+  it('marks all notifications as read', async () => {
+    vi.mocked(api.getNotifications).mockResolvedValue(mockNotifications)
+    vi.mocked(api.markAllNotificationsRead).mockResolvedValue()
+
+    render(<NotificationCenter />, { wrapper: createWrapper() })
+
+    fireEvent.click(screen.getByRole('button', { name: /notifications/i }))
+
+    await waitFor(() => {
+      expect(screen.getByText('Mark all read')).toBeInTheDocument()
+    })
+
+    fireEvent.click(screen.getByText('Mark all read'))
+
+    await waitFor(() => {
+      expect(api.markAllNotificationsRead).toHaveBeenCalled()
+    })
+  })
+
+  it('closes panel when clicking outside', async () => {
+    vi.mocked(api.getNotifications).mockResolvedValue(mockNotifications)
+    render(<NotificationCenter />, { wrapper: createWrapper() })
+
+    fireEvent.click(screen.getByRole('button', { name: /notifications/i }))
+
+    await waitFor(() => {
+      expect(screen.getByText('Notifications')).toBeInTheDocument()
+    })
+
+    fireEvent.click(screen.getByTestId('notification-backdrop'))
+
+    await waitFor(() => {
+      expect(screen.queryByText('Notifications')).not.toBeInTheDocument()
+    })
+  })
+})

frontend/src/components/__tests__/ProxyHostForm.test.tsx

@@ -0,0 +1,227 @@
+import { describe, it, expect, vi, afterEach } from 'vitest'
+import { render, screen, fireEvent, waitFor } from '@testing-library/react'
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
+import ProxyHostForm from '../ProxyHostForm'
+import { mockRemoteServers } from '../../test/mockData'
+
+// Mock the hooks
+vi.mock('../../hooks/useRemoteServers', () => ({
+  useRemoteServers: vi.fn(() => ({
+    servers: mockRemoteServers,
+    isLoading: false,
+    error: null,
+    createRemoteServer: vi.fn(),
+    updateRemoteServer: vi.fn(),
+    deleteRemoteServer: vi.fn(),
+  })),
+}))
+
+vi.mock('../../hooks/useDocker', () => ({
+  useDocker: vi.fn(() => ({
+    containers: [
+      {
+        id: 'container-123',
+        names: ['my-app'],
+        image: 'nginx:latest',
+        state: 'running',
+        status: 'Up 2 hours',
+        network: 'bridge',
+        ip: '172.17.0.2',
+        ports: [{ private_port: 80, public_port: 8080, type: 'tcp' }]
+      }
+    ],
+    isLoading: false,
+    error: null,
+    refetch: vi.fn(),
+  })),
+}))
+
+vi.mock('../../hooks/useDomains', () => ({
+  useDomains: vi.fn(() => ({
+    domains: [
+      { uuid: 'domain-1', name: 'existing.com' }
+    ],
+    createDomain: vi.fn().mockResolvedValue({}),
+    isLoading: false,
+    error: null,
+  })),
+}))
+
+vi.mock('../../hooks/useCertificates', () => ({
+  useCertificates: vi.fn(() => ({
+    certificates: [
+      { id: 1, name: 'Cert 1', domain: 'example.com', provider: 'custom' }
+    ],
+    isLoading: false,
+    error: null,
+  })),
+}))
+
+vi.mock('../../api/proxyHosts', () => ({
+  testProxyHostConnection: vi.fn(),
+}))
+
+const queryClient = new QueryClient({
+  defaultOptions: {
+    queries: {
+      retry: false,
+    },
+  },
+})
+
+const renderWithClient = (ui: React.ReactElement) => {
+  return render(
+    <QueryClientProvider client={queryClient}>
+      {ui}
+    </QueryClientProvider>
+  )
+}
+
+import { testProxyHostConnection } from '../../api/proxyHosts'
+
+describe('ProxyHostForm', () => {
+  const mockOnSubmit = vi.fn((_data: any) => Promise.resolve())
+  const mockOnCancel = vi.fn()
+
+  afterEach(() => {
+    vi.clearAllMocks()
+  })
+
+  it('handles scheme selection', async () => {
+    renderWithClient(
+      <ProxyHostForm onSubmit={mockOnSubmit} onCancel={mockOnCancel} />
+    )
+
+    await waitFor(() => {
+      expect(screen.getByText('Add Proxy Host')).toBeInTheDocument()
+    })
+
+    // Find scheme select - it defaults to HTTP
+    // We can find it by label "Scheme"
+    const schemeSelect = screen.getByLabelText('Scheme')
+    fireEvent.change(schemeSelect, { target: { value: 'https' } })
+
+    expect(schemeSelect).toHaveValue('https')
+  })
+
+  it('prompts to save new base domain', async () => {
+    renderWithClient(
+      <ProxyHostForm onSubmit={mockOnSubmit} onCancel={mockOnCancel} />
+    )
+
+    const domainInput = screen.getByPlaceholderText('example.com, www.example.com')
+
+    // Enter a subdomain of a new base domain
+    fireEvent.change(domainInput, { target: { value: 'sub.newdomain.com' } })
+    fireEvent.blur(domainInput)
+
+    await waitFor(() => {
+      expect(screen.getByText('New Base Domain Detected')).toBeInTheDocument()
+      expect(screen.getByText('newdomain.com')).toBeInTheDocument()
+    })
+
+    // Click "Yes, save it"
+    fireEvent.click(screen.getByText('Yes, save it'))
+
+    await waitFor(() => {
+      expect(screen.queryByText('New Base Domain Detected')).not.toBeInTheDocument()
+    })
+  })
+
+  it('respects "Dont ask me again" for new domains', async () => {
+    renderWithClient(
+      <ProxyHostForm onSubmit={mockOnSubmit} onCancel={mockOnCancel} />
+    )
+
+    const domainInput = screen.getByPlaceholderText('example.com, www.example.com')
+
+    // Trigger prompt
+    fireEvent.change(domainInput, { target: { value: 'sub.another.com' } })
+    fireEvent.blur(domainInput)
+
+    await waitFor(() => {
+      expect(screen.getByText('New Base Domain Detected')).toBeInTheDocument()
+    })
+
+    // Check "Don't ask me again"
+    fireEvent.click(screen.getByLabelText("Don't ask me again"))
+
+    // Click "No, thanks"
+    fireEvent.click(screen.getByText('No, thanks'))
+
+    await waitFor(() => {
+      expect(screen.queryByText('New Base Domain Detected')).not.toBeInTheDocument()
+    })
+
+    // Try another new domain - should not prompt
+    fireEvent.change(domainInput, { target: { value: 'sub.yetanother.com' } })
+    fireEvent.blur(domainInput)
+
+    // Should not see prompt
+    expect(screen.queryByText('New Base Domain Detected')).not.toBeInTheDocument()
+  })
+
+  it('tests connection successfully', async () => {
+    (testProxyHostConnection as any).mockResolvedValue({})
+
+    renderWithClient(
+      <ProxyHostForm onSubmit={mockOnSubmit} onCancel={mockOnCancel} />
+    )
+
+    // Fill required fields for test connection
+    fireEvent.change(screen.getByLabelText(/^Host$/), { target: { value: '10.0.0.5' } })
+    fireEvent.change(screen.getByLabelText(/^Port$/), { target: { value: '80' } })
+
+    const testBtn = screen.getByTitle('Test connection to the forward host')
+    fireEvent.click(testBtn)
+
+    await waitFor(() => {
+      expect(testProxyHostConnection).toHaveBeenCalledWith('10.0.0.5', 80)
+    })
+  })
+
+  it('handles connection test failure', async () => {
+    (testProxyHostConnection as any).mockRejectedValue(new Error('Connection failed'))
+
+    renderWithClient(
+      <ProxyHostForm onSubmit={mockOnSubmit} onCancel={mockOnCancel} />
+    )
+
+    fireEvent.change(screen.getByLabelText(/^Host$/), { target: { value: '10.0.0.5' } })
+    fireEvent.change(screen.getByLabelText(/^Port$/), { target: { value: '80' } })
+
+    const testBtn = screen.getByTitle('Test connection to the forward host')
+    fireEvent.click(testBtn)
+
+    await waitFor(() => {
+      expect(testProxyHostConnection).toHaveBeenCalled()
+    })
+
+    // Should show error state (red button) - we can check class or icon
+    // The button changes class to bg-red-600
+    await waitFor(() => {
+       expect(testBtn).toHaveClass('bg-red-600')
+    })
+  })
+
+  it('handles base domain selection', async () => {
+    renderWithClient(
+      <ProxyHostForm onSubmit={mockOnSubmit} onCancel={mockOnCancel} />
+    )
+
+    await waitFor(() => {
+      expect(screen.getByLabelText('Base Domain (Auto-fill)')).toBeInTheDocument()
+    })
+
+    fireEvent.change(screen.getByLabelText('Base Domain (Auto-fill)'), { target: { value: 'existing.com' } })
+
+    // Should not update domain names yet as no container selected
+    expect(screen.getByLabelText(/Domain Names/i)).toHaveValue('')
+
+    // Select container then base domain
+    fireEvent.change(screen.getByLabelText('Containers'), { target: { value: 'container-123' } })
+    fireEvent.change(screen.getByLabelText('Base Domain (Auto-fill)'), { target: { value: 'existing.com' } })
+
+    expect(screen.getByLabelText(/Domain Names/i)).toHaveValue('my-app.existing.com')
+  })
+})

frontend/src/components/__tests__/RemoteServerForm.test.tsx

@@ -0,0 +1,194 @@
+import { describe, it, expect, vi, afterEach } from 'vitest'
+import { render, screen, fireEvent, waitFor } from '@testing-library/react'
+import RemoteServerForm from '../RemoteServerForm'
+import * as remoteServersApi from '../../api/remoteServers'
+
+// Mock the API
+vi.mock('../../api/remoteServers', () => ({
+  testRemoteServerConnection: vi.fn(() => Promise.resolve({ address: 'localhost:8080' })),
+  testCustomRemoteServerConnection: vi.fn(() => Promise.resolve({ address: 'localhost:8080', reachable: true })),
+}))
+
+describe('RemoteServerForm', () => {
+  const mockOnSubmit = vi.fn(() => Promise.resolve())
+  const mockOnCancel = vi.fn()
+
+  afterEach(() => {
+    vi.clearAllMocks()
+  })
+
+  it('renders create form', () => {
+    render(
+      <RemoteServerForm onSubmit={mockOnSubmit} onCancel={mockOnCancel} />
+    )
+
+    expect(screen.getByText('Add Remote Server')).toBeInTheDocument()
+    expect(screen.getByPlaceholderText('My Production Server')).toHaveValue('')
+  })
+
+  it('renders edit form with pre-filled data', () => {
+    const mockServer = {
+      uuid: '123',
+      name: 'Test Server',
+      provider: 'docker',
+      host: 'localhost',
+      port: 5000,
+      username: 'admin',
+      enabled: true,
+      reachable: true,
+      created_at: '2025-11-18T10:00:00Z',
+      updated_at: '2025-11-18T10:00:00Z',
+    }
+
+    render(
+      <RemoteServerForm server={mockServer} onSubmit={mockOnSubmit} onCancel={mockOnCancel} />
+    )
+
+    expect(screen.getByText('Edit Remote Server')).toBeInTheDocument()
+    expect(screen.getByDisplayValue('Test Server')).toBeInTheDocument()
+    expect(screen.getByDisplayValue('localhost')).toBeInTheDocument()
+    expect(screen.getByDisplayValue('5000')).toBeInTheDocument()
+  })
+
+  it('shows test connection button in create and edit mode', () => {
+    const { rerender } = render(
+      <RemoteServerForm onSubmit={mockOnSubmit} onCancel={mockOnCancel} />
+    )
+
+    expect(screen.getByText('Test Connection')).toBeInTheDocument()
+
+    const mockServer = {
+      uuid: '123',
+      name: 'Test Server',
+      provider: 'docker',
+      host: 'localhost',
+      port: 5000,
+      enabled: true,
+      reachable: false,
+      created_at: '2025-11-18T10:00:00Z',
+      updated_at: '2025-11-18T10:00:00Z',
+    }
+
+    rerender(
+      <RemoteServerForm server={mockServer} onSubmit={mockOnSubmit} onCancel={mockOnCancel} />
+    )
+
+    expect(screen.getByText('Test Connection')).toBeInTheDocument()
+  })
+
+  it('calls onCancel when cancel button is clicked', () => {
+    render(
+      <RemoteServerForm onSubmit={mockOnSubmit} onCancel={mockOnCancel} />
+    )
+
+    fireEvent.click(screen.getByText('Cancel'))
+    expect(mockOnCancel).toHaveBeenCalledOnce()
+  })
+
+  it('submits form with correct data', async () => {
+    render(
+      <RemoteServerForm onSubmit={mockOnSubmit} onCancel={mockOnCancel} />
+    )
+
+    const nameInput = screen.getByPlaceholderText('My Production Server')
+    const hostInput = screen.getByPlaceholderText('192.168.1.100')
+    const portInput = screen.getByDisplayValue('22')
+
+    fireEvent.change(nameInput, { target: { value: 'New Server' } })
+    fireEvent.change(hostInput, { target: { value: '10.0.0.5' } })
+    fireEvent.change(portInput, { target: { value: '9090' } })
+
+    fireEvent.click(screen.getByText('Create'))
+
+    await waitFor(() => {
+      expect(mockOnSubmit).toHaveBeenCalledWith(
+        expect.objectContaining({
+          name: 'New Server',
+          host: '10.0.0.5',
+          port: 9090,
+        })
+      )
+    })
+  })
+
+  it('handles provider selection', () => {
+    render(
+      <RemoteServerForm onSubmit={mockOnSubmit} onCancel={mockOnCancel} />
+    )
+
+    const providerSelect = screen.getByDisplayValue('Generic')
+    fireEvent.change(providerSelect, { target: { value: 'docker' } })
+
+    expect(providerSelect).toHaveValue('docker')
+  })
+
+  it('handles submission error', async () => {
+    const mockErrorSubmit = vi.fn(() => Promise.reject(new Error('Submission failed')))
+    render(
+      <RemoteServerForm onSubmit={mockErrorSubmit} onCancel={mockOnCancel} />
+    )
+
+    // Fill required fields
+    fireEvent.change(screen.getByPlaceholderText('My Production Server'), { target: { value: 'Test Server' } })
+    fireEvent.change(screen.getByPlaceholderText('192.168.1.100'), { target: { value: '10.0.0.1' } })
+
+    fireEvent.click(screen.getByText('Create'))
+
+    await waitFor(() => {
+      expect(screen.getByText('Submission failed')).toBeInTheDocument()
+    })
+  })
+
+  it('handles test connection success', async () => {
+    const mockServer = {
+      uuid: '123',
+      name: 'Test Server',
+      provider: 'docker',
+      host: 'localhost',
+      port: 5000,
+      enabled: true,
+      reachable: true,
+      created_at: '2025-11-18T10:00:00Z',
+      updated_at: '2025-11-18T10:00:00Z',
+    }
+
+    render(
+      <RemoteServerForm server={mockServer} onSubmit={mockOnSubmit} onCancel={mockOnCancel} />
+    )
+
+    const testButton = screen.getByText('Test Connection')
+    fireEvent.click(testButton)
+
+    await waitFor(() => {
+      // Check for success state (green background)
+      expect(testButton).toHaveClass('bg-green-600')
+    })
+  })
+
+  it('handles test connection failure', async () => {
+    // Override mock for this test
+    vi.mocked(remoteServersApi.testCustomRemoteServerConnection).mockRejectedValueOnce(new Error('Connection failed'))
+
+    const mockServer = {
+      uuid: '123',
+      name: 'Test Server',
+      provider: 'docker',
+      host: 'localhost',
+      port: 5000,
+      enabled: true,
+      reachable: true,
+      created_at: '2025-11-18T10:00:00Z',
+      updated_at: '2025-11-18T10:00:00Z',
+    }
+
+    render(
+      <RemoteServerForm server={mockServer} onSubmit={mockOnSubmit} onCancel={mockOnCancel} />
+    )
+
+    fireEvent.click(screen.getByText('Test Connection'))
+
+    await waitFor(() => {
+      expect(screen.getByText('Connection failed')).toBeInTheDocument()
+    })
+  })
+})

frontend/src/components/__tests__/SystemStatus.test.tsx

@@ -0,0 +1,42 @@
+import { describe, it, expect, vi } from 'vitest'
+import { render, waitFor } from '@testing-library/react'
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
+import SystemStatus from '../SystemStatus'
+import * as systemApi from '../../api/system'
+
+// Mock the API module
+vi.mock('../../api/system', () => ({
+  checkUpdates: vi.fn(),
+}))
+
+const renderWithClient = (ui: React.ReactElement) => {
+  const queryClient = new QueryClient({
+    defaultOptions: {
+      queries: {
+        retry: false,
+      },
+    },
+  })
+
+  return render(
+    <QueryClientProvider client={queryClient}>
+      {ui}
+    </QueryClientProvider>
+  )
+}
+
+describe('SystemStatus', () => {
+  it('calls checkUpdates on mount', async () => {
+    vi.mocked(systemApi.checkUpdates).mockResolvedValue({
+      available: false,
+      latest_version: '1.0.0',
+      changelog_url: '',
+    })
+
+    renderWithClient(<SystemStatus />)
+
+    await waitFor(() => {
+      expect(systemApi.checkUpdates).toHaveBeenCalled()
+    })
+  })
+})

frontend/src/components/ui/Button.tsx

@@ -0,0 +1,55 @@
+import { ButtonHTMLAttributes, ReactNode } from 'react'
+import { clsx } from 'clsx'
+
+interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+  variant?: 'primary' | 'secondary' | 'danger' | 'ghost'
+  size?: 'sm' | 'md' | 'lg'
+  isLoading?: boolean
+  children: ReactNode
+}
+
+export function Button({
+  variant = 'primary',
+  size = 'md',
+  isLoading = false,
+  className,
+  children,
+  disabled,
+  ...props
+}: ButtonProps) {
+  const baseStyles = 'inline-flex items-center justify-center rounded-lg font-medium transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed'
+
+  const variants = {
+    primary: 'bg-blue-600 text-white hover:bg-blue-700 focus:ring-blue-500',
+    secondary: 'bg-gray-700 text-white hover:bg-gray-600 focus:ring-gray-500',
+    danger: 'bg-red-600 text-white hover:bg-red-700 focus:ring-red-500',
+    ghost: 'text-gray-400 hover:text-white hover:bg-gray-800 focus:ring-gray-500',
+  }
+
+  const sizes = {
+    sm: 'px-3 py-1.5 text-sm',
+    md: 'px-4 py-2 text-sm',
+    lg: 'px-6 py-3 text-base',
+  }
+
+  return (
+    <button
+      className={clsx(
+        baseStyles,
+        variants[variant],
+        sizes[size],
+        className
+      )}
+      disabled={disabled || isLoading}
+      {...props}
+    >
+      {isLoading && (
+        <svg className="animate-spin -ml-1 mr-2 h-4 w-4 text-current" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
+          <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
+          <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+        </svg>
+      )}
+      {children}
+    </button>
+  )
+}

frontend/src/components/ui/Card.tsx

@@ -0,0 +1,31 @@
+import { ReactNode, HTMLAttributes } from 'react'
+import { clsx } from 'clsx'
+
+interface CardProps extends HTMLAttributes<HTMLDivElement> {
+  children: ReactNode
+  className?: string
+  title?: string
+  description?: string
+  footer?: ReactNode
+}
+
+export function Card({ children, className, title, description, footer, ...props }: CardProps) {
+  return (
+    <div className={clsx('bg-dark-card rounded-lg border border-gray-800 overflow-hidden', className)} {...props}>
+      {(title || description) && (
+        <div className="px-6 py-4 border-b border-gray-800">
+          {title && <h3 className="text-lg font-medium text-white">{title}</h3>}
+          {description && <p className="mt-1 text-sm text-gray-400">{description}</p>}
+        </div>
+      )}
+      <div className="p-6">
+        {children}
+      </div>
+      {footer && (
+        <div className="px-6 py-4 bg-gray-900/50 border-t border-gray-800">
+          {footer}
+        </div>
+      )}
+    </div>
+  )
+}

frontend/src/components/ui/Input.tsx

@@ -0,0 +1,66 @@
+import { InputHTMLAttributes, forwardRef, useState } from 'react'
+import { clsx } from 'clsx'
+import { Eye, EyeOff } from 'lucide-react'
+
+interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
+  label?: string
+  error?: string
+  helperText?: string
+}
+
+export const Input = forwardRef<HTMLInputElement, InputProps>(
+  ({ label, error, helperText, className, type, ...props }, ref) => {
+    const [showPassword, setShowPassword] = useState(false)
+    const isPassword = type === 'password'
+
+    return (
+      <div className="w-full">
+        {label && (
+          <label
+            htmlFor={props.id}
+            className="block text-sm font-medium text-gray-300 mb-1.5"
+          >
+            {label}
+          </label>
+        )}
+        <div className="relative">
+          <input
+            ref={ref}
+            type={isPassword ? (showPassword ? 'text' : 'password') : type}
+            className={clsx(
+              'w-full bg-gray-900 border rounded-lg px-4 py-2 text-white placeholder-gray-500 focus:outline-none focus:ring-2 transition-colors',
+              error
+                ? 'border-red-500 focus:ring-red-500'
+                : 'border-gray-700 focus:ring-blue-500 focus:border-blue-500',
+              isPassword && 'pr-10',
+              className
+            )}
+            {...props}
+          />
+          {isPassword && (
+            <button
+              type="button"
+              onClick={() => setShowPassword(!showPassword)}
+              className="absolute right-3 top-1/2 -translate-y-1/2 text-gray-500 hover:text-gray-300 focus:outline-none"
+              tabIndex={-1}
+            >
+              {showPassword ? (
+                <EyeOff className="h-4 w-4" />
+              ) : (
+                <Eye className="h-4 w-4" />
+              )}
+            </button>
+          )}
+        </div>
+        {error && (
+          <p className="mt-1 text-sm text-red-400">{error}</p>
+        )}
+        {helperText && !error && (
+          <p className="mt-1 text-sm text-gray-500">{helperText}</p>
+        )}
+      </div>
+    )
+  }
+)
+
+Input.displayName = 'Input'

frontend/src/components/ui/Switch.tsx

@@ -0,0 +1,29 @@
+import * as React from 'react'
+import { cn } from '../../utils/cn'
+
+interface SwitchProps extends React.InputHTMLAttributes<HTMLInputElement> {
+  onCheckedChange?: (checked: boolean) => void
+}
+
+const Switch = React.forwardRef<HTMLInputElement, SwitchProps>(
+  ({ className, onCheckedChange, onChange, ...props }, ref) => {
+    return (
+      <label className={cn("relative inline-flex items-center cursor-pointer", className)}>
+        <input
+          type="checkbox"
+          className="sr-only peer"
+          ref={ref}
+          onChange={(e) => {
+            onChange?.(e)
+            onCheckedChange?.(e.target.checked)
+          }}
+          {...props}
+        />
+        <div className="w-11 h-6 bg-gray-700 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-800 rounded-full peer peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:start-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-blue-600"></div>
+      </label>
+    )
+  }
+)
+Switch.displayName = "Switch"
+
+export { Switch }