feat: integrate Caddy manager into proxy host handler and enhance authorization middleware; update frontend components for improved UI and functionality

frontend/src/components/LogTable.tsx

@@ -40,7 +40,24 @@ export const LogTable: React.FC<LogTableProps> = ({ logs, isLoading }) => {
           </tr>
         </thead>
         <tbody className="bg-white dark:bg-gray-900 divide-y divide-gray-200 dark:divide-gray-700">
-          {logs.map((log, idx) => (
+          {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')}
@@ -75,7 +92,7 @@ export const LogTable: React.FC<LogTableProps> = ({ logs, isLoading }) => {
                 {log.msg}
               </td>
             </tr>
-          ))}
+          )})}
         </tbody>
       </table>
     </div>

frontend/src/components/ProxyHostForm.tsx

@@ -407,15 +407,6 @@ export default function ProxyHostForm({ host, onSubmit, onCancel }: ProxyHostFor
                 <CircleHelp size={14} />
               </div>
             </label>
-            <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>
 
           {/* Advanced Config */}
@@ -433,6 +424,19 @@ export default function ProxyHostForm({ host, onSubmit, onCancel }: ProxyHostFor
             />
           </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

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 }