Update AppImage

AppImage/app/globals.css

@@ -4,7 +4,6 @@
 @custom-variant dark (&:is(.dark *));
 
 :root {
-  /* Proxmox light theme colors */
   --background: oklch(1 0 0);
   --foreground: oklch(0.145 0 0);
   --card: oklch(1 0 0);
@@ -32,46 +31,51 @@
   --radius: 0.625rem;
   --sidebar: oklch(0.985 0 0);
   --sidebar-foreground: oklch(0.145 0 0);
+  --sidebar-primary: oklch(0.205 0 0);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.97 0 0);
+  --sidebar-accent-foreground: oklch(0.205 0 0);
+  --sidebar-border: oklch(0.922 0 0);
+  --sidebar-ring: oklch(0.708 0 0);
 }
 
 .dark {
-  /* Updated Proxmox dark theme with proper dark gray background matching Proxmox style */
-  --background: #1a1d21; /* Proxmox dark background */
-  --foreground: #ffffff;
-  --card: #2b2f36; /* Proxmox card background */
-  --card-foreground: #ffffff;
-  --popover: #2b2f36;
-  --popover-foreground: #ffffff;
-  --primary: #ffffff;
-  --primary-foreground: #1a1d21;
-  --secondary: #363c45; /* Better contrast for secondary elements */
-  --secondary-foreground: #ffffff;
-  --muted: #363c45;
-  --muted-foreground: #b4b4b4; /* Better contrast for muted text */
-  --accent: #363c45;
-  --accent-foreground: #ffffff;
-  --destructive: #ef4444;
-  --destructive-foreground: #ffffff;
-  --border: #404854; /* More visible borders */
-  --input: #363c45;
-  --ring: #6b7280;
-  /* Updated chart colors to be more vibrant and visible in dark mode */
-  --chart-1: #3b82f6; /* Bright Blue */
-  --chart-2: #10b981; /* Bright Green */
-  --chart-3: #f59e0b; /* Bright Yellow */
-  --chart-4: #8b5cf6; /* Bright Purple */
-  --chart-5: #f97316; /* Bright Orange */
-  --sidebar: #1a1d21;
-  --sidebar-foreground: #ffffff;
-  --sidebar-primary: #6366f1;
-  --sidebar-primary-foreground: #ffffff;
-  --sidebar-accent: #363c45;
-  --sidebar-accent-foreground: #ffffff;
-  --sidebar-border: #363c45;
-  --sidebar-ring: #6b7280;
+  --background: oklch(0.145 0 0);
+  --foreground: oklch(0.985 0 0);
+  --card: oklch(0.145 0 0);
+  --card-foreground: oklch(0.985 0 0);
+  --popover: oklch(0.145 0 0);
+  --popover-foreground: oklch(0.985 0 0);
+  --primary: oklch(0.985 0 0);
+  --primary-foreground: oklch(0.205 0 0);
+  --secondary: oklch(0.269 0 0);
+  --secondary-foreground: oklch(0.985 0 0);
+  --muted: oklch(0.269 0 0);
+  --muted-foreground: oklch(0.708 0 0);
+  --accent: oklch(0.269 0 0);
+  --accent-foreground: oklch(0.985 0 0);
+  --destructive: oklch(0.396 0.141 25.723);
+  --destructive-foreground: oklch(0.637 0.237 25.331);
+  --border: oklch(0.269 0 0);
+  --input: oklch(0.269 0 0);
+  --ring: oklch(0.439 0 0);
+  --chart-1: oklch(0.488 0.243 264.376);
+  --chart-2: oklch(0.696 0.17 162.48);
+  --chart-3: oklch(0.769 0.188 70.08);
+  --chart-4: oklch(0.627 0.265 303.9);
+  --chart-5: oklch(0.645 0.246 16.439);
+  --sidebar: oklch(0.205 0 0);
+  --sidebar-foreground: oklch(0.985 0 0);
+  --sidebar-primary: oklch(0.488 0.243 264.376);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.269 0 0);
+  --sidebar-accent-foreground: oklch(0.985 0 0);
+  --sidebar-border: oklch(0.269 0 0);
+  --sidebar-ring: oklch(0.439 0 0);
 }
 
 @theme inline {
+  /* optional: --font-sans, --font-serif, --font-mono if they are applied in the layout.tsx */
   --color-background: var(--background);
   --color-foreground: var(--foreground);
   --color-card: var(--card);
@@ -108,9 +112,6 @@
   --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
   --color-sidebar-border: var(--sidebar-border);
   --color-sidebar-ring: var(--sidebar-ring);
-  /* Custom header colors */
-  --color-header-bg: var(--header-bg);
-  --color-header-foreground: var(--header-foreground);
 }
 
 @layer base {
@@ -121,79 +122,3 @@
     @apply bg-background text-foreground;
   }
 }
-
-/* Header styling now uses consistent background color */
-.header-bg {
-  background-color: var(--header-bg);
-  color: var(--header-foreground);
-}
-
-/* Custom scrollbar with better contrast */
-::-webkit-scrollbar {
-  width: 6px;
-}
-
-::-webkit-scrollbar-track {
-  background: var(--background);
-}
-
-::-webkit-scrollbar-thumb {
-  background: var(--muted);
-  border-radius: 3px;
-}
-
-::-webkit-scrollbar-thumb:hover {
-  background: var(--muted-foreground);
-}
-
-/* Better contrast for dark mode content */
-.dark .metric-card {
-  background: var(--card);
-  border: 1px solid var(--border);
-}
-
-.dark .metric-value {
-  color: var(--foreground);
-  font-weight: 600;
-}
-
-.dark .metric-label {
-  color: var(--muted-foreground);
-}
-
-/* Fix chart axis visibility in dark mode */
-.dark .recharts-cartesian-axis-tick-value {
-  fill: var(--muted-foreground) !important;
-}
-
-.dark .recharts-text {
-  fill: var(--muted-foreground) !important;
-}
-
-/* Improve server info layout in header - clean design without transparency */
-.server-info {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-  padding: 0.25rem 0.75rem;
-  border-radius: 0.375rem;
-  border: 1px solid rgba(255, 255, 255, 0.2);
-}
-
-.dark .server-info {
-  border: 1px solid rgba(255, 255, 255, 0.1);
-}
-
-/* Better spacing for VM/LXC badges */
-.vm-badges {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 0.25rem;
-  align-items: center;
-}
-
-.vm-badge {
-  font-size: 0.75rem;
-  padding: 0.125rem 0.5rem;
-  white-space: nowrap;
-}

AppImage/components/system-overview.tsx

@@ -4,9 +4,8 @@ import { useState, useEffect } from "react"
 import { Card, CardContent, CardHeader, CardTitle } from "./ui/card"
 import { Progress } from "./ui/progress"
 import { Badge } from "./ui/badge"
-import { Button } from "./ui/button"
 import { XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer, AreaChart, Area } from "recharts"
-import { Cpu, MemoryStick, Thermometer, Users, Activity, Server, Zap, AlertCircle, RefreshCw } from "lucide-react"
+import { Cpu, MemoryStick, Thermometer, Users, Activity, Server, Zap, AlertCircle } from "lucide-react"
 
 interface SystemData {
   cpu_usage: number
@@ -161,20 +160,18 @@ export function SystemOverview() {
   const [vmData, setVmData] = useState<VMData[]>([])
   const [chartData, setChartData] = useState(generateChartData())
   const [loading, setLoading] = useState(true)
-  const [isDemo, setIsDemo] = useState(false)
-  const [isRefreshing, setIsRefreshing] = useState(false)
-  const [lastUpdate, setLastUpdate] = useState<Date>(new Date())
+  const [isDemo, setIsDemo] = useState(false) // Added demo mode state
 
+  useEffect(() => {
     const fetchData = async () => {
       try {
-      setIsRefreshing(true)
+        setLoading(true)
 
         const [systemResult, vmResult] = await Promise.all([fetchSystemData(), fetchVMData()])
 
         setSystemData(systemResult.data)
         setVmData(vmResult.data)
-      setIsDemo(systemResult.isDemo || vmResult.isDemo)
-      setLastUpdate(new Date())
+        setIsDemo(systemResult.isDemo || vmResult.isDemo) // Set demo mode if either fetch is demo
 
         if (systemResult.data) {
           setChartData(generateChartData(systemResult.data))
@@ -186,30 +183,23 @@ export function SystemOverview() {
         setVmData(demVMData)
         setChartData(generateChartData(fallbackData))
         setIsDemo(true)
-      setLastUpdate(new Date())
       } finally {
         setLoading(false)
-      setIsRefreshing(false)
       }
     }
 
-  const handleManualRefresh = () => {
-    fetchData()
-  }
-
-  useEffect(() => {
     fetchData()
 
     const interval = setInterval(() => {
       if (!isDemo) {
         fetchData()
       } else {
+        // In demo mode, just update with new random data
         const newDemoData = generateDemoSystemData()
         setSystemData(newDemoData)
         setChartData(generateChartData(newDemoData))
-        setLastUpdate(new Date())
       }
-    }, 30000)
+    }, 5000) // Update every 5 seconds instead of 30
 
     return () => {
       clearInterval(interval)
@@ -218,29 +208,24 @@ export function SystemOverview() {
 
   if (loading) {
     return (
-      <div className="min-h-screen bg-gradient-to-br from-slate-900 via-slate-800 to-slate-900 p-6">
-        <div className="max-w-7xl mx-auto space-y-6">
-          <div className="text-center py-12">
-            <div className="inline-flex items-center justify-center w-16 h-16 bg-blue-500/10 rounded-full mb-4">
-              <Server className="w-8 h-8 text-blue-500 animate-pulse" />
-            </div>
-            <div className="text-2xl font-bold text-white mb-2">Connecting to ProxMenux Monitor...</div>
-            <div className="text-slate-400">Fetching real-time system data</div>
+      <div className="space-y-6">
+        <div className="text-center py-8">
+          <div className="text-lg font-medium text-foreground mb-2">Connecting to ProxMenux Monitor...</div>
+          <div className="text-sm text-muted-foreground">Fetching real-time system data</div>
         </div>
         <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
           {[...Array(4)].map((_, i) => (
-              <Card key={i} className="bg-slate-800/50 border-slate-700 backdrop-blur-sm animate-pulse">
+            <Card key={i} className="bg-card border-border animate-pulse">
               <CardContent className="p-6">
-                  <div className="h-4 bg-slate-700 rounded w-1/2 mb-4"></div>
-                  <div className="h-8 bg-slate-700 rounded w-3/4 mb-2"></div>
-                  <div className="h-2 bg-slate-700 rounded w-full mb-2"></div>
-                  <div className="h-3 bg-slate-700 rounded w-2/3"></div>
+                <div className="h-4 bg-muted rounded w-1/2 mb-4"></div>
+                <div className="h-8 bg-muted rounded w-3/4 mb-2"></div>
+                <div className="h-2 bg-muted rounded w-full mb-2"></div>
+                <div className="h-3 bg-muted rounded w-2/3"></div>
               </CardContent>
             </Card>
           ))}
         </div>
       </div>
-      </div>
     )
   }
 
@@ -254,35 +239,19 @@ export function SystemOverview() {
   }
 
   const getTemperatureStatus = (temp: number) => {
-    if (temp < 60) return { status: "Normal", color: "bg-emerald-500/10 text-emerald-400 border-emerald-500/20" }
-    if (temp < 75) return { status: "Warm", color: "bg-amber-500/10 text-amber-400 border-amber-500/20" }
-    return { status: "Hot", color: "bg-red-500/10 text-red-400 border-red-500/20" }
+    if (temp < 60) return { status: "Normal", color: "bg-green-500/10 text-green-500 border-green-500/20" }
+    if (temp < 75) return { status: "Warm", color: "bg-yellow-500/10 text-yellow-500 border-yellow-500/20" }
+    return { status: "Hot", color: "bg-red-500/10 text-red-500 border-red-500/20" }
   }
 
   const tempStatus = getTemperatureStatus(systemData.temperature)
 
   return (
-    <div className="min-h-screen bg-gradient-to-br from-slate-900 via-slate-800 to-slate-900 p-6">
-      <div className="max-w-7xl mx-auto space-y-6">
-        <div className="flex items-center justify-between mb-8">
-          <div>
-            <h1 className="text-3xl font-bold text-white mb-2">ProxMenux System Dashboard</h1>
-            <p className="text-slate-400">Last updated: {lastUpdate.toLocaleTimeString()} • Auto-refresh every 30s</p>
-          </div>
-          <Button
-            onClick={handleManualRefresh}
-            disabled={isRefreshing}
-            className="bg-blue-600 hover:bg-blue-700 text-white border-0"
-          >
-            <RefreshCw className={`w-4 h-4 mr-2 ${isRefreshing ? "animate-spin" : ""}`} />
-            {isRefreshing ? "Refreshing..." : "Refresh"}
-          </Button>
-        </div>
-
+    <div className="space-y-6">
       {isDemo && (
-          <Card className="bg-blue-500/10 border-blue-500/20 backdrop-blur-sm">
+        <Card className="bg-blue-500/10 border-blue-500/20">
           <CardContent className="p-4">
-              <div className="flex items-center gap-2 text-sm text-blue-400">
+            <div className="flex items-center gap-2 text-sm text-blue-600">
               <AlertCircle className="h-4 w-4" />
               <span>
                 <strong>Demo Mode:</strong> Flask server not available. Showing simulated data for development. In the
@@ -293,143 +262,135 @@ export function SystemOverview() {
         </Card>
       )}
 
+      {/* Key Metrics Cards */}
       <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
-          <Card className="bg-slate-800/50 border-slate-700 backdrop-blur-sm hover:bg-slate-800/70 transition-all duration-200">
+        <Card className="bg-card border-border metric-card">
           <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
-              <CardTitle className="text-sm font-medium text-slate-400">CPU Usage</CardTitle>
-              <div className="p-2 bg-blue-500/10 rounded-lg">
-                <Cpu className="h-4 w-4 text-blue-400" />
-              </div>
+            <CardTitle className="text-sm font-medium text-muted-foreground">CPU Usage</CardTitle>
+            <Cpu className="h-4 w-4 text-muted-foreground" />
           </CardHeader>
           <CardContent>
-              <div className="text-3xl font-bold text-white mb-2">{systemData.cpu_usage}%</div>
-              <Progress value={systemData.cpu_usage} className="mt-2 h-2" />
-              <p className="text-xs text-slate-400 mt-2">
+            <div className="text-2xl font-bold text-foreground metric-value">{systemData.cpu_usage}%</div>
+            <Progress value={systemData.cpu_usage} className="mt-2" />
+            <p className="text-xs text-muted-foreground mt-2 metric-label">
               {isDemo ? "Simulated data" : "Real-time data from Flask server"}
             </p>
           </CardContent>
         </Card>
 
-          <Card className="bg-slate-800/50 border-slate-700 backdrop-blur-sm hover:bg-slate-800/70 transition-all duration-200">
+        <Card className="bg-card border-border metric-card">
           <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
-              <CardTitle className="text-sm font-medium text-slate-400">Memory Usage</CardTitle>
-              <div className="p-2 bg-emerald-500/10 rounded-lg">
-                <MemoryStick className="h-4 w-4 text-emerald-400" />
-              </div>
+            <CardTitle className="text-sm font-medium text-muted-foreground">Memory Usage</CardTitle>
+            <MemoryStick className="h-4 w-4 text-muted-foreground" />
           </CardHeader>
           <CardContent>
-              <div className="text-3xl font-bold text-white mb-2">{systemData.memory_used.toFixed(1)} GB</div>
-              <Progress value={systemData.memory_usage} className="mt-2 h-2" />
-              <p className="text-xs text-slate-400 mt-2">
+            <div className="text-2xl font-bold text-foreground metric-value">
+              {systemData.memory_used.toFixed(1)} GB
+            </div>
+            <Progress value={systemData.memory_usage} className="mt-2" />
+            <p className="text-xs text-muted-foreground mt-2 metric-label">
               {systemData.memory_usage.toFixed(1)}% of {systemData.memory_total} GB
             </p>
           </CardContent>
         </Card>
 
-          <Card className="bg-slate-800/50 border-slate-700 backdrop-blur-sm hover:bg-slate-800/70 transition-all duration-200">
+        <Card className="bg-card border-border metric-card">
           <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
-              <CardTitle className="text-sm font-medium text-slate-400">Temperature</CardTitle>
-              <div className="p-2 bg-orange-500/10 rounded-lg">
-                <Thermometer className="h-4 w-4 text-orange-400" />
-              </div>
+            <CardTitle className="text-sm font-medium text-muted-foreground">Temperature</CardTitle>
+            <Thermometer className="h-4 w-4 text-muted-foreground" />
           </CardHeader>
           <CardContent>
-              <div className="text-3xl font-bold text-white mb-2">{systemData.temperature}°C</div>
+            <div className="text-2xl font-bold text-foreground metric-value">{systemData.temperature}°C</div>
             <div className="flex items-center mt-2">
               <Badge variant="outline" className={tempStatus.color}>
                 {tempStatus.status}
               </Badge>
             </div>
-              <p className="text-xs text-slate-400 mt-2">
+            <p className="text-xs text-muted-foreground mt-2 metric-label">
               {isDemo ? "Simulated temperature" : "Live temperature reading"}
             </p>
           </CardContent>
         </Card>
 
-          <Card className="bg-slate-800/50 border-slate-700 backdrop-blur-sm hover:bg-slate-800/70 transition-all duration-200">
+        <Card className="bg-card border-border metric-card">
           <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
-              <CardTitle className="text-sm font-medium text-slate-400">Active VMs</CardTitle>
-              <div className="p-2 bg-purple-500/10 rounded-lg">
-                <Server className="h-4 w-4 text-purple-400" />
-              </div>
+            <CardTitle className="text-sm font-medium text-muted-foreground">Active VMs</CardTitle>
+            <Server className="h-4 w-4 text-muted-foreground" />
           </CardHeader>
           <CardContent>
-              <div className="text-3xl font-bold text-white mb-2">{vmStats.running}</div>
-              <div className="flex flex-wrap gap-1 mt-2">
-                <Badge variant="outline" className="bg-emerald-500/10 text-emerald-400 border-emerald-500/20">
+            <div className="text-2xl font-bold text-foreground metric-value">{vmStats.running}</div>
+            <div className="vm-badges mt-2 flex flex-wrap gap-1">
+              <Badge variant="outline" className="vm-badge bg-green-500/10 text-green-500 border-green-500/20">
                 {vmStats.running} Running
               </Badge>
               {vmStats.stopped > 0 && (
-                  <Badge variant="outline" className="bg-amber-500/10 text-amber-400 border-amber-500/20">
+                <Badge variant="outline" className="vm-badge bg-yellow-500/10 text-yellow-500 border-yellow-500/20">
                   {vmStats.stopped} Stopped
                 </Badge>
               )}
             </div>
-              <p className="text-xs text-slate-400 mt-2">Total: {vmStats.total} VMs configured</p>
+            <p className="text-xs text-muted-foreground mt-2 metric-label">Total: {vmStats.total} VMs configured</p>
           </CardContent>
         </Card>
       </div>
 
+      {/* Charts Section */}
       <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
-          <Card className="bg-slate-800/50 border-slate-700 backdrop-blur-sm">
+        <Card className="bg-card border-border metric-card">
           <CardHeader>
-              <CardTitle className="text-white flex items-center">
-                <div className="p-2 bg-blue-500/10 rounded-lg mr-3">
-                  <Activity className="h-5 w-5 text-blue-400" />
-                </div>
+            <CardTitle className="text-foreground flex items-center">
+              <Activity className="h-5 w-5 mr-2" />
               CPU Usage (24h)
             </CardTitle>
           </CardHeader>
           <CardContent>
             <ResponsiveContainer width="100%" height={300}>
               <AreaChart data={chartData.cpuData}>
-                  <CartesianGrid strokeDasharray="3 3" stroke="#374151" />
-                  <XAxis dataKey="time" stroke="#9CA3AF" fontSize={12} />
-                  <YAxis stroke="#9CA3AF" fontSize={12} />
+                <CartesianGrid strokeDasharray="3 3" stroke="hsl(var(--border))" />
+                <XAxis dataKey="time" stroke="hsl(var(--muted-foreground))" fontSize={12} />
+                <YAxis stroke="hsl(var(--muted-foreground))" fontSize={12} />
                 <Tooltip
                   contentStyle={{
-                      backgroundColor: "#1F2937",
-                      border: "1px solid #374151",
+                    backgroundColor: "hsl(var(--card))",
+                    border: "1px solid hsl(var(--border))",
                     borderRadius: "8px",
-                      color: "#F9FAFB",
+                    color: "hsl(var(--foreground))",
                   }}
                 />
-                  <Area type="monotone" dataKey="value" stroke="#3B82F6" fill="#3B82F6" fillOpacity={0.3} />
+                <Area type="monotone" dataKey="value" stroke="#3b82f6" fill="#3b82f6" fillOpacity={0.2} />
               </AreaChart>
             </ResponsiveContainer>
           </CardContent>
         </Card>
 
-          <Card className="bg-slate-800/50 border-slate-700 backdrop-blur-sm">
+        <Card className="bg-card border-border metric-card">
           <CardHeader>
-              <CardTitle className="text-white flex items-center">
-                <div className="p-2 bg-emerald-500/10 rounded-lg mr-3">
-                  <MemoryStick className="h-5 w-5 text-emerald-400" />
-                </div>
+            <CardTitle className="text-foreground flex items-center">
+              <MemoryStick className="h-5 w-5 mr-2" />
               Memory Usage (24h)
             </CardTitle>
           </CardHeader>
           <CardContent>
             <ResponsiveContainer width="100%" height={300}>
               <AreaChart data={chartData.memoryData}>
-                  <CartesianGrid strokeDasharray="3 3" stroke="#374151" />
-                  <XAxis dataKey="time" stroke="#9CA3AF" fontSize={12} />
-                  <YAxis stroke="#9CA3AF" fontSize={12} />
+                <CartesianGrid strokeDasharray="3 3" stroke="hsl(var(--border))" />
+                <XAxis dataKey="time" stroke="hsl(var(--muted-foreground))" fontSize={12} />
+                <YAxis stroke="hsl(var(--muted-foreground))" fontSize={12} />
                 <Tooltip
                   contentStyle={{
-                      backgroundColor: "#1F2937",
-                      border: "1px solid #374151",
+                    backgroundColor: "hsl(var(--card))",
+                    border: "1px solid hsl(var(--border))",
                     borderRadius: "8px",
-                      color: "#F9FAFB",
+                    color: "hsl(var(--foreground))",
                   }}
                 />
-                  <Area type="monotone" dataKey="used" stackId="1" stroke="#3B82F6" fill="#3B82F6" fillOpacity={0.6} />
+                <Area type="monotone" dataKey="used" stackId="1" stroke="#3b82f6" fill="#3b82f6" fillOpacity={0.6} />
                 <Area
                   type="monotone"
                   dataKey="available"
                   stackId="1"
-                    stroke="#10B981"
-                    fill="#10B981"
+                  stroke="#10b981"
+                  fill="#10b981"
                   fillOpacity={0.6}
                 />
               </AreaChart>
@@ -438,93 +399,91 @@ export function SystemOverview() {
         </Card>
       </div>
 
+      {/* System Information */}
       <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
-          <Card className="bg-slate-800/50 border-slate-700 backdrop-blur-sm">
+        <Card className="bg-card border-border metric-card">
           <CardHeader>
-              <CardTitle className="text-white flex items-center">
-                <div className="p-2 bg-blue-500/10 rounded-lg mr-3">
-                  <Server className="h-5 w-5 text-blue-400" />
-                </div>
+            <CardTitle className="text-foreground flex items-center">
+              <Server className="h-5 w-5 mr-2" />
               System Information
             </CardTitle>
           </CardHeader>
-            <CardContent className="space-y-4">
-              <div className="flex justify-between items-center">
-                <span className="text-slate-400">Hostname:</span>
-                <span className="text-white font-mono bg-slate-700/50 px-2 py-1 rounded text-sm">
-                  {systemData.hostname}
+          <CardContent className="space-y-3">
+            <div className="flex justify-between">
+              <span className="text-muted-foreground metric-label">Hostname:</span>
+              <span className="text-foreground font-mono metric-value">{systemData.hostname}</span>
+            </div>
+            <div className="flex justify-between">
+              <span className="text-muted-foreground metric-label">Uptime:</span>
+              <span className="text-foreground metric-value">{systemData.uptime}</span>
+            </div>
+            <div className="flex justify-between">
+              <span className="text-muted-foreground metric-label">Node ID:</span>
+              <span className="text-foreground font-mono metric-value">{systemData.node_id}</span>
+            </div>
+            <div className="flex justify-between">
+              <span className="text-muted-foreground metric-label">Last Update:</span>
+              <span className="text-foreground metric-value">
+                {new Date(systemData.timestamp).toLocaleTimeString()}
               </span>
             </div>
-              <div className="flex justify-between items-center">
-                <span className="text-slate-400">Uptime:</span>
-                <span className="text-white font-semibold">{systemData.uptime}</span>
-              </div>
-              <div className="flex justify-between items-center">
-                <span className="text-slate-400">Node ID:</span>
-                <span className="text-white font-mono bg-slate-700/50 px-2 py-1 rounded text-sm">
-                  {systemData.node_id}
-                </span>
-              </div>
-              <div className="flex justify-between items-center">
-                <span className="text-slate-400">Status:</span>
-                <Badge className="bg-emerald-500/10 text-emerald-400 border-emerald-500/20">healthy</Badge>
-              </div>
           </CardContent>
         </Card>
 
-          <Card className="bg-slate-800/50 border-slate-700 backdrop-blur-sm">
+        <Card className="bg-card border-border metric-card">
           <CardHeader>
-              <CardTitle className="text-white flex items-center">
-                <div className="p-2 bg-emerald-500/10 rounded-lg mr-3">
-                  <Users className="h-5 w-5 text-emerald-400" />
-                </div>
+            <CardTitle className="text-foreground flex items-center">
+              <Users className="h-5 w-5 mr-2" />
               Active Sessions
             </CardTitle>
           </CardHeader>
-            <CardContent className="space-y-4">
+          <CardContent className="space-y-3">
             <div className="flex justify-between items-center">
-                <span className="text-slate-400">Web Console:</span>
-                <Badge className="bg-emerald-500/10 text-emerald-400 border-emerald-500/20">3 active</Badge>
+              <span className="text-muted-foreground metric-label">Web Console:</span>
+              <Badge variant="outline" className="bg-green-500/10 text-green-500 border-green-500/20">
+                3 active
+              </Badge>
             </div>
             <div className="flex justify-between items-center">
-                <span className="text-slate-400">SSH Sessions:</span>
-                <Badge className="bg-blue-500/10 text-blue-400 border-blue-500/20">1 active</Badge>
+              <span className="text-muted-foreground metric-label">SSH Sessions:</span>
+              <Badge variant="outline" className="bg-blue-500/10 text-blue-500 border-blue-500/20">
+                1 active
+              </Badge>
             </div>
-              <div className="flex justify-between items-center">
-                <span className="text-slate-400">API Calls:</span>
-                <span className="text-white font-semibold">247/hour</span>
+            <div className="flex justify-between">
+              <span className="text-muted-foreground metric-label">API Calls:</span>
+              <span className="text-foreground metric-value">247/hour</span>
             </div>
           </CardContent>
         </Card>
 
-          <Card className="bg-slate-800/50 border-slate-700 backdrop-blur-sm">
+        <Card className="bg-card border-border metric-card">
           <CardHeader>
-              <CardTitle className="text-white flex items-center">
-                <div className="p-2 bg-amber-500/10 rounded-lg mr-3">
-                  <Zap className="h-5 w-5 text-amber-400" />
-                </div>
+            <CardTitle className="text-foreground flex items-center">
+              <Zap className="h-5 w-5 mr-2" />
               Power & Performance
             </CardTitle>
           </CardHeader>
-            <CardContent className="space-y-4">
-              <div className="flex justify-between items-center">
-                <span className="text-slate-400">Power State:</span>
-                <Badge className="bg-emerald-500/10 text-emerald-400 border-emerald-500/20">Running</Badge>
+          <CardContent className="space-y-3">
+            <div className="flex justify-between">
+              <span className="text-muted-foreground metric-label">Power State:</span>
+              <Badge variant="outline" className="bg-green-500/10 text-green-500 border-green-500/20">
+                Running
+              </Badge>
             </div>
-              <div className="flex justify-between items-center">
-                <span className="text-slate-400">Load Average:</span>
-                <span className="text-white font-mono bg-slate-700/50 px-2 py-1 rounded text-sm">
+            <div className="flex justify-between">
+              <span className="text-muted-foreground metric-label">Load Average:</span>
+              <span className="text-foreground font-mono metric-value">
                 {systemData.load_average.map((avg) => avg.toFixed(2)).join(", ")}
               </span>
             </div>
-              <div className="flex justify-between items-center">
-                <span className="text-slate-400">Boot Time:</span>
-                <span className="text-white font-semibold">2.3s</span>
+            <div className="flex justify-between">
+              <span className="text-muted-foreground metric-label">Boot Time:</span>
+              <span className="text-foreground metric-value">2.3s</span>
             </div>
           </CardContent>
         </Card>
       </div>
     </div>
-    </div>
   )
 }

AppImage/package.json

@@ -40,7 +40,6 @@
     "@radix-ui/react-toggle-group": "1.1.1",
     "@radix-ui/react-tooltip": "1.1.6",
     "@vercel/analytics": "1.3.1",
-    "autoprefixer": "^10.4.20",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "cmdk": "1.0.4",
@@ -64,13 +63,12 @@
     "zod": "3.25.67"
   },
   "devDependencies": {
-    "@tailwindcss/postcss": "^4.1.9",
     "@types/node": "^22",
     "@types/react": "^18",
     "@types/react-dom": "^18",
+    "autoprefixer": "^10.4.20",
     "postcss": "^8.5",
-    "tailwindcss": "^4.1.9",
-    "tw-animate-css": "1.3.3",
+    "tailwindcss": "^3.4.1",
     "typescript": "^5"
   }
 }

AppImage/postcss.config.mjs

@@ -0,0 +1,9 @@
+/** @type {import('postcss-load-config').Config} */
+const config = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};
+
+export default config;

AppImage/tailwind.config.js

@@ -0,0 +1,89 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  darkMode: ["class"],
+  content: ["./pages/**/*.{ts,tsx}", "./components/**/*.{ts,tsx}", "./app/**/*.{ts,tsx}", "./src/**/*.{ts,tsx}"],
+  prefix: "",
+  theme: {
+    container: {
+      center: true,
+      padding: "2rem",
+      screens: {
+        "2xl": "1400px",
+      },
+    },
+    extend: {
+      colors: {
+        border: "hsl(var(--border))",
+        input: "hsl(var(--input))",
+        ring: "hsl(var(--ring))",
+        background: "hsl(var(--background))",
+        foreground: "hsl(var(--foreground))",
+        primary: {
+          DEFAULT: "hsl(var(--primary))",
+          foreground: "hsl(var(--primary-foreground))",
+        },
+        secondary: {
+          DEFAULT: "hsl(var(--secondary))",
+          foreground: "hsl(var(--secondary-foreground))",
+        },
+        destructive: {
+          DEFAULT: "hsl(var(--destructive))",
+          foreground: "hsl(var(--destructive-foreground))",
+        },
+        muted: {
+          DEFAULT: "hsl(var(--muted))",
+          foreground: "hsl(var(--muted-foreground))",
+        },
+        accent: {
+          DEFAULT: "hsl(var(--accent))",
+          foreground: "hsl(var(--accent-foreground))",
+        },
+        popover: {
+          DEFAULT: "hsl(var(--popover))",
+          foreground: "hsl(var(--popover-foreground))",
+        },
+        card: {
+          DEFAULT: "hsl(var(--card))",
+          foreground: "hsl(var(--card-foreground))",
+        },
+        chart: {
+          1: "hsl(var(--chart-1))",
+          2: "hsl(var(--chart-2))",
+          3: "hsl(var(--chart-3))",
+          4: "hsl(var(--chart-4))",
+          5: "hsl(var(--chart-5))",
+        },
+        sidebar: {
+          DEFAULT: "hsl(var(--sidebar-background))",
+          foreground: "hsl(var(--sidebar-foreground))",
+          primary: "hsl(var(--sidebar-primary))",
+          "primary-foreground": "hsl(var(--sidebar-primary-foreground))",
+          accent: "hsl(var(--sidebar-accent))",
+          "accent-foreground": "hsl(var(--sidebar-accent-foreground))",
+          border: "hsl(var(--sidebar-border))",
+          ring: "hsl(var(--sidebar-ring))",
+        },
+      },
+      borderRadius: {
+        lg: "var(--radius)",
+        md: "calc(var(--radius) - 2px)",
+        sm: "calc(var(--radius) - 4px)",
+      },
+      keyframes: {
+        "accordion-down": {
+          from: { height: "0" },
+          to: { height: "var(--radix-accordion-content-height)" },
+        },
+        "accordion-up": {
+          from: { height: "var(--radix-accordion-content-height)" },
+          to: { height: "0" },
+        },
+      },
+      animation: {
+        "accordion-down": "accordion-down 0.2s ease-out",
+        "accordion-up": "accordion-up 0.2s ease-out",
+      },
+    },
+  },
+  plugins: [require("tailwindcss-animate")],
+}