From 901e4012cc2ea4644102ae900c16e1feb883f6fa Mon Sep 17 00:00:00 2001
From: MacRimi <ricoextincion@gmail.com>
Date: Tue, 28 Oct 2025 22:45:15 +0100
Subject: [PATCH] Update AppImage

---
 AppImage/components/virtual-machines.tsx | 86 +++++++++++++-----------
 AppImage/scripts/flask_server.py         |  9 ++-
 2 files changed, 56 insertions(+), 39 deletions(-)

diff --git a/AppImage/components/virtual-machines.tsx b/AppImage/components/virtual-machines.tsx
index 1efa13d..d79859d 100644
--- a/AppImage/components/virtual-machines.tsx
+++ b/AppImage/components/virtual-machines.tsx
@@ -945,63 +945,73 @@ export function VirtualMachines() {
                       className="sm:hidden p-4 rounded-lg border border-black/10 dark:border-white/10 bg-black/5 dark:bg-white/5 transition-colors cursor-pointer"
                       onClick={() => handleVMClick(vm)}
                     >
-                      <div className="flex items-center gap-3">
+                      <div className="flex items-center gap-2 mb-3">
+                        {/* Status icon */}
                         {vm.status === "running" ? (
                           <Play className="h-5 w-5 text-green-500 fill-current flex-shrink-0" />
                         ) : (
                           <Square className="h-5 w-5 text-red-500 fill-current flex-shrink-0" />
                         )}
 
+                        {/* Type badge */}
                         <Badge variant="outline" className={`${getTypeBadge(vm.type).color} flex-shrink-0`}>
                           {getTypeBadge(vm.type).label}
                         </Badge>
 
-                        {/* Name and ID */}
+                        {/* Name and ID - takes remaining space */}
                         <div className="flex-1 min-w-0">
                           <div className="font-semibold text-foreground truncate">{vm.name}</div>
                           <div className="text-[10px] text-muted-foreground">ID: {vm.vmid}</div>
                         </div>
+                      </div>
 
-                        <div className="flex items-center gap-3 flex-shrink-0">
-                          {/* CPU icon with percentage */}
-                          <div className="flex flex-col items-center gap-0.5">
-                            {vm.status === "running" && (
-                              <span className="text-[10px] font-medium text-muted-foreground">{cpuPercent}%</span>
-                            )}
-                            <Cpu
-                              className={`h-4 w-4 ${
-                                vm.status === "stopped" ? "text-gray-500" : getUsageColor(Number.parseFloat(cpuPercent))
-                              }`}
-                            />
-                          </div>
+                      {/* Second row: Resource usage icons with percentages */}
+                      <div className="flex items-center justify-between gap-4 px-1">
+                        {/* CPU icon with percentage */}
+                        <div className="flex flex-col items-center gap-0.5">
+                          {vm.status === "running" && (
+                            <span className="text-[10px] font-medium text-muted-foreground">{cpuPercent}%</span>
+                          )}
+                          <Cpu
+                            className={`h-4 w-4 ${
+                              vm.status === "stopped" ? "text-gray-500" : getIconColor(Number.parseFloat(cpuPercent))
+                            }`}
+                          />
+                        </div>
 
-                          {/* Memory icon with percentage */}
-                          <div className="flex flex-col items-center gap-0.5">
-                            {vm.status === "running" && (
-                              <span className="text-[10px] font-medium text-muted-foreground">{memPercent}%</span>
-                            )}
-                            <MemoryStick
-                              className={`h-4 w-4 ${
-                                vm.status === "stopped" ? "text-gray-500" : getUsageColor(Number.parseFloat(memPercent))
-                              }`}
-                            />
-                          </div>
+                        {/* Memory icon with percentage */}
+                        <div className="flex flex-col items-center gap-0.5">
+                          {vm.status === "running" && (
+                            <span className="text-[10px] font-medium text-muted-foreground">{memPercent}%</span>
+                          )}
+                          <MemoryStick
+                            className={`h-4 w-4 ${
+                              vm.status === "stopped" ? "text-gray-500" : getIconColor(Number.parseFloat(memPercent))
+                            }`}
+                          />
+                        </div>
 
-                          {/* Disk icon with percentage */}
-                          <div className="flex flex-col items-center gap-0.5">
-                            {vm.status === "running" && (
-                              <span className="text-[10px] font-medium text-muted-foreground">{diskPercent}%</span>
-                            )}
-                            <HardDrive
-                              className={`h-4 w-4 ${
-                                vm.status === "stopped"
-                                  ? "text-gray-500"
-                                  : getUsageColor(Number.parseFloat(diskPercent))
-                              }`}
-                            />
-                          </div>
+                        {/* Disk icon with percentage */}
+                        <div className="flex flex-col items-center gap-0.5">
+                          {vm.status === "running" && (
+                            <span className="text-[10px] font-medium text-muted-foreground">{diskPercent}%</span>
+                          )}
+                          <HardDrive
+                            className={`h-4 w-4 ${
+                              vm.status === "stopped" ? "text-gray-500" : getIconColor(Number.parseFloat(diskPercent))
+                            }`}
+                          />
+                        </div>
+
+                        {/* Network icon */}
+                        <div className="flex flex-col items-center gap-0.5">
+                          <span className="text-[10px] font-medium text-transparent">--</span>
+                          <Network
+                            className={`h-4 w-4 ${vm.status === "stopped" ? "text-gray-500" : "text-muted-foreground"}`}
+                          />
                         </div>
                       </div>
+                      {/* </CHANGE> */}
                     </div>
                   </div>
                 )
diff --git a/AppImage/scripts/flask_server.py b/AppImage/scripts/flask_server.py
index 5493ee7..28cc879 100644
--- a/AppImage/scripts/flask_server.py
+++ b/AppImage/scripts/flask_server.py
@@ -5534,6 +5534,10 @@ def api_vm_details(vmid):
                         except Exception as e:
                             pass  # Silently handle errors
                     
+                    ip_address = None
+                    if vm_type == 'lxc' and resource.get('status') == 'running':
+                        ip_address = get_lxc_ip_from_lxc_info(vmid)
+                    
                     response_data = {
                         **resource,
                         'config': config,
@@ -5541,6 +5545,9 @@ def api_vm_details(vmid):
                         'vm_type': vm_type
                     }
                     
+                    if ip_address:
+                        response_data['ip_address'] = ip_address
+                    
                     if vm_type == 'lxc':
                         hardware_info = parse_lxc_hardware_config(vmid, node)
                         response_data['hardware_info'] = hardware_info
@@ -5723,6 +5730,6 @@ if __name__ == '__main__':
     cli.show_server_banner = lambda *x: None
     
     # Print only essential information
-    print("API endpoints available at: /api/system, /api/system-info, /api/storage, /api/proxmox-storage, /api/network, /api/vms, /api/logs, /api/health, /api/hardware, /api/prometheus, /api/node/metrics")
+    #print("API endpoints available at: /api/system, /api/system-info, /api/storage, /api/proxmox-storage, /api/network, /api/vms, /api/logs, /api/health, /api/hardware, /api/prometheus, /api/node/metrics")
     
     app.run(host='0.0.0.0', port=8008, debug=False)