Update AppImage

AppImage/components/metrics-dialog.tsx

@@ -43,27 +43,19 @@ export function MetricsView({ vmid, vmName, vmType, metricType, onBack }: Metric
     setLoading(true)
     setError(null)
 
-    console.log("[v0] Fetching metrics for VMID:", vmid, "Timeframe:", timeframe, "Type:", vmType)
-
     try {
       const baseUrl =
         typeof window !== "undefined" ? `${window.location.protocol}//${window.location.hostname}:8008` : ""
       const apiUrl = `${baseUrl}/api/vms/${vmid}/metrics?timeframe=${timeframe}`
 
-      console.log("[v0] Fetching from URL:", apiUrl)
-
       const response = await fetch(apiUrl)
 
-      console.log("[v0] Response status:", response.status)
-
       if (!response.ok) {
         const errorData = await response.json()
-        console.error("[v0] Error response:", errorData)
         throw new Error(errorData.error || "Failed to fetch metrics")
       }
 
       const result = await response.json()
-      console.log("[v0] Metrics data received:", result)
 
       const transformedData = result.data.map((item: any) => {
         const date = new Date(item.time * 1000)
@@ -121,10 +113,8 @@ export function MetricsView({ vmid, vmName, vmType, metricType, onBack }: Metric
         }
       })
 
-      console.log("[v0] Transformed data:", transformedData.length, "points")
       setData(transformedData)
     } catch (err: any) {
-      console.error("[v0] Error fetching metrics:", err)
       setError(err.message || "Error loading metrics")
     } finally {
       setLoading(false)
@@ -167,8 +157,6 @@ export function MetricsView({ vmid, vmName, vmType, metricType, onBack }: Metric
       case "cpu":
         const maxCpuValue = Math.max(...data.map((d) => d.cpu || 0))
         const cpuDomainMax = Math.ceil(maxCpuValue * 1.15) // 15% margin
-        console.log("[v0] CPU - Max value:", maxCpuValue, "Domain max:", cpuDomainMax, "Data points:", data.length)
-        console.log("[v0] CPU - Sample data:", data.slice(0, 3))
 
         return (
           <ResponsiveContainer width="100%" height={400}>
@@ -217,15 +205,6 @@ export function MetricsView({ vmid, vmName, vmType, metricType, onBack }: Metric
       case "memory":
         const maxMemoryValue = Math.max(...data.map((d) => d.memory || 0))
         const memoryDomainMax = Math.ceil(maxMemoryValue * 1.15) // 15% margin
-        console.log(
-          "[v0] Memory - Max value:",
-          maxMemoryValue,
-          "Domain max:",
-          memoryDomainMax,
-          "Data points:",
-          data.length,
-        )
-        console.log("[v0] Memory - Sample data:", data.slice(0, 3))
 
         return (
           <ResponsiveContainer width="100%" height={400}>
@@ -274,23 +253,6 @@ export function MetricsView({ vmid, vmName, vmType, metricType, onBack }: Metric
       case "network":
         const maxNetworkValue = Math.max(...data.map((d) => Math.max(d.netin || 0, d.netout || 0)))
         const networkDomainMax = Math.ceil(maxNetworkValue * 1.15) // 15% margin
-        console.log(
-          "[v0] Network - Max value:",
-          maxNetworkValue,
-          "Domain max:",
-          networkDomainMax,
-          "Data points:",
-          data.length,
-        )
-        console.log("[v0] Network - Sample data:", data.slice(0, 3))
-        console.log(
-          "[v0] Network - All netin values:",
-          data.map((d) => d.netin),
-        )
-        console.log(
-          "[v0] Network - All netout values:",
-          data.map((d) => d.netout),
-        )
 
         return (
           <ResponsiveContainer width="100%" height={400}>
@@ -348,8 +310,6 @@ export function MetricsView({ vmid, vmName, vmType, metricType, onBack }: Metric
       case "disk":
         const maxDiskValue = Math.max(...data.map((d) => Math.max(d.diskread || 0, d.diskwrite || 0)))
         const diskDomainMax = Math.ceil(maxDiskValue * 1.15) // 15% margin
-        console.log("[v0] Disk - Max value:", maxDiskValue, "Domain max:", diskDomainMax, "Data points:", data.length)
-        console.log("[v0] Disk - Sample data:", data.slice(0, 3))
 
         return (
           <ResponsiveContainer width="100%" height={400}>

AppImage/components/virtual-machines.tsx

@@ -724,10 +724,37 @@ export function VirtualMachines() {
           {currentView === "main" ? (
             <>
               <DialogHeader className="pb-4 border-b border-border px-6 pt-6">
-                <DialogTitle className="flex flex-col sm:flex-row sm:items-center gap-3">
+                <DialogTitle className="flex flex-col gap-3">
+                  <div className="hidden sm:flex items-center gap-3 flex-wrap">
                     <div className="flex items-center gap-2">
                       <Server className="h-5 w-5 flex-shrink-0" />
                       <span className="text-lg truncate">{selectedVM?.name}</span>
+                      {selectedVM && <span className="text-sm text-muted-foreground">ID: {selectedVM.vmid}</span>}
+                    </div>
+                    {selectedVM && (
+                      <>
+                        <div className="flex items-center gap-2 flex-wrap">
+                          <Badge variant="outline" className={`${getTypeBadge(selectedVM.type).color} flex-shrink-0`}>
+                            {getTypeBadge(selectedVM.type).icon}
+                            {getTypeBadge(selectedVM.type).label}
+                          </Badge>
+                          <Badge variant="outline" className={`${getStatusColor(selectedVM.status)} flex-shrink-0`}>
+                            {selectedVM.status.toUpperCase()}
+                          </Badge>
+                        </div>
+                        {selectedVM.status === "running" && (
+                          <span className="text-sm text-muted-foreground ml-auto">
+                            Uptime: {formatUptime(selectedVM.uptime)}
+                          </span>
+                        )}
+                      </>
+                    )}
+                  </div>
+                  <div className="sm:hidden flex flex-col gap-2">
+                    <div className="flex items-center gap-2">
+                      <Server className="h-5 w-5 flex-shrink-0" />
+                      <span className="text-lg truncate">{selectedVM?.name}</span>
+                      {selectedVM && <span className="text-sm text-muted-foreground">ID: {selectedVM.vmid}</span>}
                     </div>
                     {selectedVM && (
                       <div className="flex items-center gap-2 flex-wrap">
@@ -738,8 +765,14 @@ export function VirtualMachines() {
                         <Badge variant="outline" className={`${getStatusColor(selectedVM.status)} flex-shrink-0`}>
                           {selectedVM.status.toUpperCase()}
                         </Badge>
+                        {selectedVM.status === "running" && (
+                          <span className="text-sm text-muted-foreground">
+                            Uptime: {formatUptime(selectedVM.uptime)}
+                          </span>
+                        )}
                       </div>
                     )}
+                  </div>
                 </DialogTitle>
               </DialogHeader>
 
@@ -752,14 +785,6 @@ export function VirtualMachines() {
                           Basic Information
                         </h3>
                         <div className="grid grid-cols-2 lg:grid-cols-3 gap-4">
-                          <div>
-                            <div className="text-xs text-muted-foreground mb-1">Name</div>
-                            <div className="font-semibold text-foreground">{selectedVM.name}</div>
-                          </div>
-                          <div>
-                            <div className="text-xs text-muted-foreground mb-1">VMID</div>
-                            <div className="font-semibold text-foreground">{selectedVM.vmid}</div>
-                          </div>
                           <div>
                             <div className="text-xs text-muted-foreground mb-1">CPU Usage</div>
                             <div
@@ -811,10 +836,6 @@ export function VirtualMachines() {
                               />
                             </div>
                           </div>
-                          <div>
-                            <div className="text-xs text-muted-foreground mb-1">Uptime</div>
-                            <div className="font-semibold text-foreground">{formatUptime(selectedVM.uptime)}</div>
-                          </div>
                           <div>
                             <div className="text-xs text-muted-foreground mb-1">Disk I/O</div>
                             <div
@@ -1055,7 +1076,6 @@ export function VirtualMachines() {
               </div>
             </>
           ) : (
-            /* Render metrics view when currentView is "metrics" */
             selectedVM &&
             selectedMetric && (
               <MetricsView