feat: add Settings and Setup pages for user management

- Implemented Settings page for changing user passwords with validation and feedback.
- Created Setup page for initial admin account setup with form handling and navigation.
- Added API service layer for handling requests related to proxy hosts, remote servers, and import functionality.
- Introduced mock data for testing purposes and set up testing framework with vitest.
- Configured Tailwind CSS for styling and Vite for development and build processes.
- Added scripts for Dockerfile validation, Python syntax checking, and Sourcery integration.
- Implemented release and coverage scripts for better CI/CD practices.

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 } from 'react'
+import { clsx } from 'clsx'
+
+interface CardProps {
+  children: ReactNode
+  className?: string
+  title?: string
+  description?: string
+  footer?: ReactNode
+}
+
+export function Card({ children, className, title, description, footer }: CardProps) {
+  return (
+    <div className={clsx('bg-dark-card rounded-lg border border-gray-800 overflow-hidden', className)}>
+      {(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'