Update AppImage

AppImage/components/network-metrics.tsx

@@ -8,6 +8,7 @@ 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[]
@@ -21,6 +22,8 @@ interface NetworkData {
     dropin?: number
     dropout?: number
   }
+  active_count?: number
+  total_count?: number
   physical_active_count?: number
   physical_total_count?: number
   bridge_active_count?: number
@@ -419,6 +422,88 @@ export function NetworkMetrics() {
         </Card>
       )}
 
+      {/* Network Interfaces */}
+      <Card className="bg-card border-border">
+        <CardHeader>
+          <CardTitle className="text-foreground flex items-center">
+            <Router className="h-5 w-5 mr-2" />
+            Network Interfaces
+          </CardTitle>
+        </CardHeader>
+        <CardContent>
+          <div className="space-y-4">
+            {networkData.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">
           <CardHeader>

AppImage/scripts/flask_server.py

@@ -923,25 +923,21 @@ def get_interface_type(interface_name):
         if interface_name == 'lo':
             return 'skip'
         
-        # Check if it's a bridge (but not virbr which we skip above)
-        if interface_name.startswith(('vmbr', 'br')):
-            # Skip virbr (libvirt bridges)
-            if interface_name.startswith('virbr'):
-                return 'skip'
-            return 'bridge'
-        
-        # Check VM/LXC interfaces
         if interface_name.startswith(('veth', 'tap')):
             return 'vm_lxc'
         
         # Skip other virtual interfaces
-        if interface_name.startswith(('tun', 'vnet', 'docker')):
+        if interface_name.startswith(('tun', 'vnet', 'docker', 'virbr')):
             return 'skip'
         
         # Check if it's a bond
         if interface_name.startswith('bond'):
             return 'bond'
         
+        # Check if it's a bridge (but not virbr which we skip above)
+        if interface_name.startswith(('vmbr', 'br')):
+            return 'bridge'
+        
         # Check if it's a VLAN (contains a dot)
         if '.' in interface_name:
             return 'vlan'
@@ -1005,9 +1001,10 @@ def get_bridge_info(bridge_name):
     return bridge_info
 
 def get_network_info():
-    """Get network interface information - Enhanced with physical/bridge separation"""
+    """Get network interface information - Enhanced with VM/LXC interface separation"""
     try:
         network_data = {
+            'interfaces': [],
             'physical_interfaces': [],  # Added separate list for physical interfaces
             'bridge_interfaces': [],    # Added separate list for bridge interfaces
             'vm_lxc_interfaces': [],
@@ -1130,6 +1127,9 @@ def get_network_info():
                 network_data['physical_interfaces'].append(interface_info)
             elif interface_type == 'bridge':
                 network_data['bridge_interfaces'].append(interface_info)
+            else:
+                # Keep other types in the general interfaces list for backward compatibility
+                network_data['interfaces'].append(interface_info)
         
         network_data['physical_active_count'] = physical_active_count
         network_data['physical_total_count'] = physical_total_count
@@ -1138,6 +1138,10 @@ def get_network_info():
         network_data['vm_lxc_active_count'] = vm_lxc_active_count
         network_data['vm_lxc_total_count'] = vm_lxc_total_count
         
+        # Keep old counters for backward compatibility
+        network_data['active_count'] = physical_active_count + bridge_active_count
+        network_data['total_count'] = physical_total_count + bridge_total_count
+        
         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")
@@ -1175,10 +1179,13 @@ 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,
+            'total_count': 0,
             'physical_active_count': 0,
             'physical_total_count': 0,
             'bridge_active_count': 0,