Add LAN device discovery (ping sweep + ARP, known/unknown labeling)

Runs as a host-level systemd timer on CT122 (scripts/discover-devices.sh)
rather than inside the api container, since real ARP entries live in the
host's network namespace, not Docker's bridge network. See
docs/device-discovery.md for the full writeup, including why literal
passive-only ARP reading was dropped (near-empty result in practice).

API reads the resulting JSON file each poll cycle, cross-references
config/hosts.yaml's knownDevices list by IP, and serves /api/devices.
Dashboard gets a new "Network Devices" table.

Closes #9.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>

apps/web/src/api.ts

@@ -39,3 +39,16 @@ export function me(): Promise<{ username: string }> {
 export function getHosts(): Promise<{ hosts: HostSummary[] }> {
   return request("/api/hosts");
 }
+
+export interface Device {
+  ip: string;
+  mac: string;
+  name: string | null;
+  known: boolean;
+  firstSeen: string;
+  lastSeen: string;
+}
+
+export function getDevices(): Promise<{ devices: Device[] }> {
+  return request("/api/devices");
+}

apps/web/src/components/DeviceTable.tsx

@@ -0,0 +1,50 @@
+import type { Device } from "../api";
+
+function ipSortKey(ip: string): number[] {
+  return ip.split(".").map(Number);
+}
+
+export function DeviceTable({ devices }: { devices: Device[] }) {
+  const sorted = [...devices].sort((a, b) => {
+    if (a.known !== b.known) return a.known ? -1 : 1;
+    const [ak, bk] = [ipSortKey(a.ip), ipSortKey(b.ip)];
+    for (let i = 0; i < 4; i++) if (ak[i] !== bk[i]) return ak[i] - bk[i];
+    return 0;
+  });
+
+  return (
+    <table className="device-table">
+      <thead>
+        <tr>
+          <th>Status</th>
+          <th>IP</th>
+          <th>MAC</th>
+          <th>Name</th>
+          <th>Last seen</th>
+        </tr>
+      </thead>
+      <tbody>
+        {sorted.map((d) => (
+          <tr key={d.ip}>
+            <td>
+              <span className={`device-badge ${d.known ? "known" : "unknown"}`}>
+                {d.known ? "known" : "unknown"}
+              </span>
+            </td>
+            <td>{d.ip}</td>
+            <td className="mono">{d.mac}</td>
+            <td>{d.name ?? "—"}</td>
+            <td>{d.lastSeen}</td>
+          </tr>
+        ))}
+        {sorted.length === 0 && (
+          <tr>
+            <td colSpan={5} className="empty">
+              No devices seen yet — discovery runs every 5 minutes.
+            </td>
+          </tr>
+        )}
+      </tbody>
+    </table>
+  );
+}

apps/web/src/index.css

@@ -159,3 +159,55 @@ body {
   color: #8b949e;
   margin-top: 0.35rem;
 }
+
+.device-count {
+  color: #8b949e;
+  font-weight: 400;
+}
+
+.device-table {
+  width: 100%;
+  border-collapse: collapse;
+  margin-bottom: 1.5rem;
+  font-size: 0.85rem;
+}
+
+.device-table th {
+  text-align: left;
+  color: #8b949e;
+  font-weight: 500;
+  padding: 0.4rem 0.6rem;
+  border-bottom: 1px solid #30363d;
+}
+
+.device-table td {
+  padding: 0.4rem 0.6rem;
+  border-bottom: 1px solid #21262d;
+}
+
+.device-table .mono {
+  font-family: ui-monospace, monospace;
+  color: #8b949e;
+}
+
+.device-table .empty {
+  text-align: center;
+  color: #8b949e;
+  padding: 1rem;
+}
+
+.device-badge {
+  font-size: 0.7rem;
+  padding: 0.1rem 0.5rem;
+  border-radius: 10px;
+}
+
+.device-badge.known {
+  background: #1a4d2e;
+  color: #3fb950;
+}
+
+.device-badge.unknown {
+  background: #4d2a1a;
+  color: #f5a623;
+}

apps/web/src/pages/Dashboard.tsx

@@ -1,24 +1,27 @@
 import { useEffect, useState } from "react";
-import { getHosts, logout, type HostSummary } from "../api";
+import { getHosts, getDevices, logout, type HostSummary, type Device } from "../api";
 import { HostCard } from "../components/HostCard";
+import { DeviceTable } from "../components/DeviceTable";
 
 const POLL_MS = 15000;
 
 export function Dashboard({ username, onLoggedOut }: { username: string; onLoggedOut: () => void }) {
   const [hosts, setHosts] = useState<HostSummary[]>([]);
+  const [devices, setDevices] = useState<Device[]>([]);
   const [error, setError] = useState<string | null>(null);
 
   useEffect(() => {
     let cancelled = false;
     async function poll() {
       try {
-        const { hosts } = await getHosts();
+        const [hostsRes, devicesRes] = await Promise.all([getHosts(), getDevices()]);
         if (!cancelled) {
-          setHosts(hosts);
+          setHosts(hostsRes.hosts);
+          setDevices(devicesRes.devices);
           setError(null);
         }
       } catch (err) {
-        if (!cancelled) setError(err instanceof Error ? err.message : "Failed to load hosts");
+        if (!cancelled) setError(err instanceof Error ? err.message : "Failed to load dashboard data");
       }
     }
     void poll();
@@ -58,6 +61,12 @@ export function Dashboard({ username, onLoggedOut }: { username: string; onLogge
           </div>
         </section>
       ))}
+      <section>
+        <h2>
+          Network Devices <span className="device-count">({devices.length})</span>
+        </h2>
+        <DeviceTable devices={devices} />
+      </section>
     </div>
   );
 }