fix: startup order, health endpoint, real metrics, settings warning, chart history

frontend/src/pages/Metrics.tsx

@@ -1,4 +1,5 @@
 import { useQuery } from '@tanstack/react-query'
+import { useState, useEffect } from 'react'
 import { api } from '@/lib/api'
 import { AreaChart, Area, XAxis, YAxis, Tooltip, ResponsiveContainer } from 'recharts'
 import { Cpu, HardDrive, MemoryStick, Network } from 'lucide-react'
@@ -28,21 +29,31 @@ function MetricCard({ label, value, max, unit, icon: Icon, color }: {
 }
 
 export default function Metrics() {
+  const [history, setHistory] = useState<Array<{ t: number; cpu: number; mem: number }>>([]);
+
   const { data } = useQuery({
     queryKey: ['metrics'],
     queryFn: () => api.get('/metrics').then(r => r.data),
     refetchInterval: 10000,
   })
 
+  useEffect(() => {
+    if (!data) return
+    setHistory(prev => {
+      const next = [...prev, {
+        t: Date.now(),
+        cpu: data.cpu?.usage ?? 0,
+        mem: data.memory?.percentage ?? 0,
+      }]
+      return next.slice(-20)
+    })
+  }, [data])
+
   const cpu = data?.cpu ?? { usage: 0, cores: 2 }
   const mem = data?.memory ?? { used: 0, total: 3800 }
   const disk = data?.disk ?? { used: 0, total: 116000 }
 
-  const chartData = Array.from({ length: 20 }, (_, i) => ({
-    t: i,
-    cpu: Math.random() * 30 + 5,
-    mem: Math.random() * 20 + 40,
-  }))
+  const chartData = history.length > 1 ? history : [{ t: 0, cpu: 0, mem: 0 }, { t: 1, cpu: 0, mem: 0 }]
 
   return (
     <div className="space-y-6">

frontend/src/pages/Settings.tsx

@@ -13,9 +13,9 @@ export default function Settings() {
           </div>
           <div>
             <label className="block text-xs text-[hsl(215_20.2%_65.1%)] mb-1">Refresh Interval</label>
-            <select className="w-full px-3 py-2 rounded-lg bg-[hsl(217.2_32.6%_10%)] border border-[hsl(217.2_32.6%_17.5%)] text-white text-sm focus:outline-none focus:border-blue-500">
+            <select defaultValue="30" className="w-full px-3 py-2 rounded-lg bg-[hsl(217.2_32.6%_10%)] border border-[hsl(217.2_32.6%_17.5%)] text-white text-sm focus:outline-none focus:border-blue-500">
               <option value="10">10 seconds</option>
-              <option value="30" selected>30 seconds</option>
+              <option value="30">30 seconds</option>
               <option value="60">1 minute</option>
               <option value="300">5 minutes</option>
             </select>