Update AppImage

AppImage/components/network-metrics.tsx

@@ -8,7 +8,8 @@ import { Wifi, Globe, Shield, Activity, Network, Router, AlertCircle, Zap } from
 import useSWR from "swr"
 
 interface NetworkData {
-  interfaces: NetworkInterface[]
+  physical_interfaces?: NetworkInterface[]
+  bridge_interfaces?: NetworkInterface[]
   vm_lxc_interfaces?: NetworkInterface[]
   traffic: {
     bytes_sent: number
@@ -20,8 +21,10 @@ interface NetworkData {
     dropin?: number
     dropout?: number
   }
-  active_count?: number
+  physical_active_count?: number
-  total_count?: number
+  physical_total_count?: number
+  bridge_active_count?: number
+  bridge_total_count?: number
   vm_lxc_active_count?: number
   vm_lxc_total_count?: number
 }
@@ -189,13 +192,20 @@ export function NetworkMetrics() {
             <Network className="h-4 w-4 text-muted-foreground" />
           </CardHeader>
           <CardContent>
-            <div className="text-2xl font-bold text-foreground">{networkData.active_count ?? 0}</div>
+            <div className="text-2xl font-bold text-foreground">
-            <div className="flex items-center mt-2">
+              {(networkData.physical_active_count ?? 0) + (networkData.bridge_active_count ?? 0)}
-              <Badge variant="outline" className="bg-green-500/10 text-green-500 border-green-500/20">
+            </div>
-                Online
+            <div className="flex flex-wrap items-center gap-2 mt-2">
+              <Badge variant="outline" className="bg-blue-500/10 text-blue-500 border-blue-500/20 text-xs">
+                Physical: {networkData.physical_active_count ?? 0}/{networkData.physical_total_count ?? 0}
+              </Badge>
+              <Badge variant="outline" className="bg-green-500/10 text-green-500 border-green-500/20 text-xs">
+                Bridges: {networkData.bridge_active_count ?? 0}/{networkData.bridge_total_count ?? 0}
               </Badge>
             </div>
-            <p className="text-xs text-muted-foreground mt-2">{networkData.total_count ?? 0} total interfaces</p>
+            <p className="text-xs text-muted-foreground mt-2">
+              {(networkData.physical_total_count ?? 0) + (networkData.bridge_total_count ?? 0)} total interfaces
+            </p>
           </CardContent>
         </Card>
 
@@ -237,17 +247,20 @@ export function NetworkMetrics() {
         </Card>
       </div>
 
-      {/* Network Interfaces */}
+      {networkData.physical_interfaces && networkData.physical_interfaces.length > 0 && (
         <Card className="bg-card border-border">
           <CardHeader>
             <CardTitle className="text-foreground flex items-center">
               <Router className="h-5 w-5 mr-2" />
-            Network Interfaces
+              Physical Interfaces
+              <Badge variant="outline" className="ml-3 bg-blue-500/10 text-blue-500 border-blue-500/20">
+                {networkData.physical_active_count ?? 0} / {networkData.physical_total_count ?? 0} Active
+              </Badge>
             </CardTitle>
           </CardHeader>
           <CardContent>
             <div className="space-y-4">
-            {networkData.interfaces.map((interface_, index) => {
+              {networkData.physical_interfaces.map((interface_, index) => {
                 const typeBadge = getInterfaceTypeBadge(interface_.type)
 
                 return (
@@ -318,6 +331,93 @@ export function NetworkMetrics() {
             </div>
           </CardContent>
         </Card>
+      )}
+
+      {networkData.bridge_interfaces && networkData.bridge_interfaces.length > 0 && (
+        <Card className="bg-card border-border">
+          <CardHeader>
+            <CardTitle className="text-foreground flex items-center">
+              <Network className="h-5 w-5 mr-2" />
+              Bridge Interfaces
+              <Badge variant="outline" className="ml-3 bg-green-500/10 text-green-500 border-green-500/20">
+                {networkData.bridge_active_count ?? 0} / {networkData.bridge_total_count ?? 0} Active
+              </Badge>
+            </CardTitle>
+          </CardHeader>
+          <CardContent>
+            <div className="space-y-4">
+              {networkData.bridge_interfaces.map((interface_, index) => {
+                const typeBadge = getInterfaceTypeBadge(interface_.type)
+
+                return (
+                  <div
+                    key={index}
+                    className="flex flex-col gap-3 p-4 rounded-lg border border-border bg-card/50 hover:bg-card/80 transition-colors cursor-pointer"
+                    onClick={() => setSelectedInterface(interface_)}
+                  >
+                    {/* First row: Icon, Name, Type Badge, Status */}
+                    <div className="flex items-center gap-3 flex-wrap">
+                      <Wifi className="h-5 w-5 text-muted-foreground flex-shrink-0" />
+                      <div className="flex items-center gap-2 min-w-0">
+                        <div className="font-medium text-foreground">{interface_.name}</div>
+                        <Badge variant="outline" className={typeBadge.color}>
+                          {typeBadge.label}
+                        </Badge>
+                      </div>
+                      <Badge
+                        variant="outline"
+                        className={
+                          interface_.status === "up"
+                            ? "bg-green-500/10 text-green-500 border-green-500/20 ml-auto"
+                            : "bg-red-500/10 text-red-500 border-red-500/20 ml-auto"
+                        }
+                      >
+                        {interface_.status.toUpperCase()}
+                      </Badge>
+                    </div>
+
+                    {/* Second row: Details - Responsive layout */}
+                    <div className="grid grid-cols-2 md:grid-cols-4 gap-4 text-sm">
+                      <div>
+                        <div className="text-muted-foreground text-xs">IP Address</div>
+                        <div className="font-medium text-foreground font-mono text-sm truncate">
+                          {interface_.addresses.length > 0 ? interface_.addresses[0].ip : "N/A"}
+                        </div>
+                      </div>
+
+                      <div>
+                        <div className="text-muted-foreground text-xs">Speed</div>
+                        <div className="font-medium text-foreground flex items-center gap-1">
+                          <Zap className="h-3 w-3" />
+                          {formatSpeed(interface_.speed)}
+                        </div>
+                      </div>
+
+                      <div className="col-span-2 md:col-span-1">
+                        <div className="text-muted-foreground text-xs">Traffic</div>
+                        <div className="font-medium text-foreground text-xs">
+                          <span className="text-green-500">↓ {formatBytes(interface_.bytes_recv)}</span>
+                          {" / "}
+                          <span className="text-blue-500">↑ {formatBytes(interface_.bytes_sent)}</span>
+                        </div>
+                      </div>
+
+                      {interface_.mac_address && (
+                        <div className="col-span-2 md:col-span-1">
+                          <div className="text-muted-foreground text-xs">MAC</div>
+                          <div className="font-medium text-foreground font-mono text-xs truncate">
+                            {interface_.mac_address}
+                          </div>
+                        </div>
+                      )}
+                    </div>
+                  </div>
+                )
+              })}
+            </div>
+          </CardContent>
+        </Card>
+      )}
 
       {networkData.vm_lxc_interfaces && networkData.vm_lxc_interfaces.length > 0 && (
         <Card className="bg-card border-border">

AppImage/scripts/flask_server.py

@@ -1001,11 +1001,12 @@ def get_bridge_info(bridge_name):
     return bridge_info
 
 def get_network_info():
-    """Get network interface information - Enhanced with VM/LXC interface separation"""
+    """Get network interface information - Enhanced with physical/bridge separation"""
     try:
         network_data = {
-            'interfaces': [],
+            'physical_interfaces': [],  # Added separate list for physical interfaces
-            'vm_lxc_interfaces': [],  # Added separate list for VM/LXC interfaces
+            'bridge_interfaces': [],    # Added separate list for bridge interfaces
+            'vm_lxc_interfaces': [],
             'traffic': {'bytes_sent': 0, 'bytes_recv': 0, 'packets_sent': 0, 'packets_recv': 0}
         }
         
@@ -1021,8 +1022,10 @@ def get_network_info():
             print(f"[v0] Error getting per-NIC stats: {e}")
             net_io_per_nic = {}
         
-        active_count = 0
+        physical_active_count = 0
-        total_count = 0
+        physical_total_count = 0
+        bridge_active_count = 0
+        bridge_total_count = 0
         vm_lxc_active_count = 0
         vm_lxc_total_count = 0
         
@@ -1041,10 +1044,14 @@ def get_network_info():
                 vm_lxc_total_count += 1
                 if stats.isup:
                     vm_lxc_active_count += 1
-            else:
+            elif interface_type == 'physical':
-                total_count += 1
+                physical_total_count += 1
                 if stats.isup:
-                    active_count += 1
+                    physical_active_count += 1
+            elif interface_type == 'bridge':
+                bridge_total_count += 1
+                if stats.isup:
+                    bridge_active_count += 1
                 
             interface_info = {
                 'name': interface_name,
@@ -1115,15 +1122,20 @@ def get_network_info():
             
             if interface_type == 'vm_lxc':
                 network_data['vm_lxc_interfaces'].append(interface_info)
-            else:
+            elif interface_type == 'physical':
-                network_data['interfaces'].append(interface_info)
+                network_data['physical_interfaces'].append(interface_info)
+            elif interface_type == 'bridge':
+                network_data['bridge_interfaces'].append(interface_info)
         
-        network_data['active_count'] = active_count
+        network_data['physical_active_count'] = physical_active_count
-        network_data['total_count'] = total_count
+        network_data['physical_total_count'] = physical_total_count
+        network_data['bridge_active_count'] = bridge_active_count
+        network_data['bridge_total_count'] = bridge_total_count
         network_data['vm_lxc_active_count'] = vm_lxc_active_count
         network_data['vm_lxc_total_count'] = vm_lxc_total_count
         
-        print(f"[v0] Physical interfaces: {active_count} active out of {total_count} total")
+        print(f"[v0] Physical interfaces: {physical_active_count} active out of {physical_total_count} total")
+        print(f"[v0] Bridge interfaces: {bridge_active_count} active out of {bridge_total_count} total")
         print(f"[v0] VM/LXC interfaces: {vm_lxc_active_count} active out of {vm_lxc_total_count} total")
         
         # Get network I/O statistics (global)
@@ -1159,11 +1171,14 @@ def get_network_info():
         traceback.print_exc()
         return {
             'error': f'Unable to access network information: {str(e)}',
-            'interfaces': [],
+            'physical_interfaces': [],
+            'bridge_interfaces': [],
             'vm_lxc_interfaces': [],
             'traffic': {'bytes_sent': 0, 'bytes_recv': 0, 'packets_sent': 0, 'packets_recv': 0},
-            'active_count': 0,
+            'physical_active_count': 0,
-            'total_count': 0,
+            'physical_total_count': 0,
+            'bridge_active_count': 0,
+            'bridge_total_count': 0,
             'vm_lxc_active_count': 0,
             'vm_lxc_total_count': 0
         }