Update network-metrics.tsx

AppImage/components/network-metrics.tsx

@@ -214,6 +214,40 @@ export function NetworkMetrics() {
           </CardContent>
         </Card>
 
+        <Card className="bg-card border-border">
+          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+            <CardTitle className="text-sm font-medium text-muted-foreground">Firewall Status</CardTitle>
+            <Router className="h-4 w-4 text-muted-foreground" />
+          </CardHeader>
+          <CardContent>
+            <div className="text-2xl font-bold text-green-500">Active</div>
+            <div className="flex items-center gap-2 mt-2">
+              <Badge variant="outline" className="bg-green-500/10 text-green-500 border-green-500/20 text-xs">
+                Protected
+              </Badge>
+            </div>
+            <p className="text-xs text-muted-foreground mt-2">System protected</p>
+          </CardContent>
+        </Card>
+
+        <Card className="bg-card border-border">
+          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+            <CardTitle className="text-sm font-medium text-muted-foreground">Packets</CardTitle>
+            <Activity className="h-4 w-4 text-muted-foreground" />
+          </CardHeader>
+          <CardContent>
+            <div className="text-2xl font-bold text-foreground">{packetsRecvK}K</div>
+            <div className="flex items-center gap-2 mt-2">
+              <Badge variant="outline" className="bg-green-500/10 text-green-500 border-green-500/20 text-xs">
+                Received
+              </Badge>
+            </div>
+            <p className="text-xs text-muted-foreground mt-2">No packet loss</p>
+          </CardContent>
+        </Card>
+      </div>
+
+      {networkData.physical_interfaces && networkData.physical_interfaces.length > 0 && (
         <Card className="bg-card border-border">
           <CardHeader>
             <CardTitle className="text-foreground flex items-center">
@@ -297,6 +331,7 @@ export function NetworkMetrics() {
             </div>
           </CardContent>
         </Card>
+      )}
 
       {networkData.bridge_interfaces && networkData.bridge_interfaces.length > 0 && (
         <Card className="bg-card border-border">
@@ -320,10 +355,10 @@ export function NetworkMetrics() {
                     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, Physical Interface, Status */}
+                    {/* First row: Icon, Name, Type Badge, Physical Interface (responsive), 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 flex-1 flex-wrap break-all">
+                      <div className="flex items-center gap-2 min-w-0 flex-1 flex-wrap">
                         <div className="font-medium text-foreground">{interface_.name}</div>
                         <Badge variant="outline" className={typeBadge.color}>
                           {typeBadge.label}
@@ -412,6 +447,7 @@ export function NetworkMetrics() {
         </Card>
       )}
 
+      {/* VM & LXC Network Interfaces section */}
       {networkData.vm_lxc_interfaces && networkData.vm_lxc_interfaces.length > 0 && (
         <Card className="bg-card border-border">
           <CardHeader>
@@ -498,7 +534,6 @@ export function NetworkMetrics() {
           </CardContent>
         </Card>
       )}
-      </div>
 
       {/* Interface Details Modal */}
       <Dialog open={!!selectedInterface} onOpenChange={() => setSelectedInterface(null)}>