homeio

1"use client";
2
3import { Network, Router, Shield, Wifi } from "@/components/icons/platform-icons";
4import { formatBytesCompact } from "@/lib/client/format";
5import type { NetworkInterfaceKind, NetworkInterfaceOverview } from "@/lib/shared/contracts/network";
6import { PANEL_INSET } from "@/lib/ui/surface-tokens";
7import { cn } from "@/lib/utils";
8
9const KIND_LABEL: Record<NetworkInterfaceKind, string> = {
10  wired: "Wired",
11  wireless: "Wi-Fi",
12  vpn: "VPN",
13  other: "Other",
14};
15
16const KIND_ICON: Record<NetworkInterfaceKind, React.ComponentType<{ className?: string }>> = {
17  wired: Router,
18  wireless: Wifi,
19  vpn: Shield,
20  other: Network,
21};
22
23export function formatMbps(value: number) {
24  return `${value < 10 ? value.toFixed(2) : value.toFixed(1)} Mbps`;
25}
26
27function Row({ label, value, warn }: { label: string; value: string; warn?: boolean }) {
28  return (
29    <div className="flex items-center justify-between gap-3 py-1.5">
30      <span className="shrink-0 text-xs text-muted-foreground">{label}</span>
31      <span
32        className={cn("truncate font-mono text-xs text-foreground", warn && "text-status-amber")}
33        title={value}
34      >
35        {value}
36      </span>
37    </div>
38  );
39}
40
41type NetworkInterfaceCardProps = {
42  iface: NetworkInterfaceOverview;
43  /** Wi-Fi details, when this interface is the connected wireless one. */
44  wifi?: { ssid: string | null; signalPercent: number | null } | null;
45};
46
47export function NetworkInterfaceCard({ iface, wifi }: NetworkInterfaceCardProps) {
48  const Icon = KIND_ICON[iface.kind];
49  const errors = (iface.rxErrors ?? 0) + (iface.txErrors ?? 0);
50  const dropped = (iface.rxDropped ?? 0) + (iface.txDropped ?? 0);
51
52  const rows: { label: string; value: string; warn?: boolean }[] = [];
53  if (wifi?.ssid) rows.push({ label: "Network", value: wifi.ssid });
54  if (wifi?.signalPercent !== undefined && wifi?.signalPercent !== null) {
55    rows.push({ label: "Signal", value: `${wifi.signalPercent}%` });
56  }
57  if (iface.ip4) {
58    rows.push({ label: "IPv4", value: iface.ip4Subnet ? `${iface.ip4} / ${iface.ip4Subnet}` : iface.ip4 });
59  }
60  if (iface.ip6) rows.push({ label: "IPv6", value: iface.ip6 });
61  if (iface.mac) rows.push({ label: "MAC", value: iface.mac });
62  if (iface.speedMbps !== null) {
63    rows.push({ label: "Link", value: `${iface.speedMbps} Mbps${iface.duplex ? ` · ${iface.duplex}` : ""}` });
64  }
65  if (iface.ip4) rows.push({ label: "Address", value: iface.dhcp ? "DHCP" : "Static" });
66  if (iface.rxBytes !== null) rows.push({ label: "Received", value: formatBytesCompact(iface.rxBytes) });
67  if (iface.txBytes !== null) rows.push({ label: "Sent", value: formatBytesCompact(iface.txBytes) });
68  if (iface.rxErrors !== null || iface.txErrors !== null) {
69    rows.push({ label: "Errors / dropped", value: `${errors} / ${dropped}`, warn: errors > 0 });
70  }
71
72  return (
73    <div className={cn(PANEL_INSET, "flex flex-col gap-2 p-3")}>
74      <div className="flex items-center gap-2">
75        <div className="flex size-7 shrink-0 items-center justify-center rounded-lg border border-glass-border bg-background/55">
76          <Icon className="size-3.5 text-primary" />
77        </div>
78        <div className="min-w-0 flex-1">
79          <div className="flex items-center gap-1.5">
80            <span className="truncate font-mono text-sm font-medium text-foreground">{iface.iface}</span>
81            {iface.isDefault ? (
82              <span className="rounded bg-primary/15 px-1.5 py-px text-[10px] font-medium text-primary">Default</span>
83            ) : null}
84          </div>
85          <span className="text-[11px] text-muted-foreground/70">{KIND_LABEL[iface.kind]}</span>
86        </div>
87        <span
88          className={cn(
89            "flex items-center gap-1.5 rounded-md px-2 py-0.5 text-[11px] font-medium",
90            iface.up === true
91              ? "bg-status-green/12 text-status-green"
92              : iface.up === false
93                ? "bg-muted/40 text-muted-foreground"
94                : "bg-muted/30 text-muted-foreground/70",
95          )}
96        >
97          <span className="size-1.5 rounded-full bg-current" />
98          {iface.up === true ? "Up" : iface.up === false ? "Down" : "Unknown"}
99        </span>
100      </div>
101
102      {iface.up !== false ? (
103        <div className="grid grid-cols-2 gap-2">
104          {[
105            { label: "Download", value: iface.downloadMbps, color: "text-status-green" },
106            { label: "Upload", value: iface.uploadMbps, color: "text-sky-400" },
107          ].map(({ label, value, color }) => (
108            <div key={label} className={cn(PANEL_INSET, "flex flex-col gap-0.5 px-3 py-2")}>
109              <span className="text-[10px] uppercase tracking-[0.12em] text-muted-foreground/60">{label}</span>
110              <span className={cn("font-mono text-sm font-semibold tabular-nums", color)}>
111                {value === null ? "--" : formatMbps(value)}
112              </span>
113            </div>
114          ))}
115        </div>
116      ) : null}
117
118      <div className="divide-y divide-glass-border/40">
119        {rows.map((row) => (
120          <Row key={row.label} {...row} />
121        ))}
122      </div>
123    </div>
124  );
125}
126