From 70771cc9a4fdb7183c4b49f7e303da13343627a2 Mon Sep 17 00:00:00 2001
From: Vladimir Perovic <vladimir.perovic@gmail.com>
Date: Sat, 22 Aug 2026 18:02:28 +0200
Subject: [PATCH 1/7] fix(packaging): preserve executable bits for dist
 integration files

A fresh checkout carries init.d/pppoe-wan and init.d/cloudflared as
100644, so make dist-amd64 produced an archive whose appliance payload
failed ValidateApplianceFileModes at router-update stage time
(appliance executable bit is missing: init.d/pppoe-wan). Copy the
modes that routerd.initd and router-applyd.initd already have and
enforce them explicitly after the copy, matching the executable
contract required by slot staging.
---
 Makefile                           | 4 ++--
 packaging/alpine/cloudflared.initd | 0
 packaging/alpine/pppoe-wan.initd   | 0
 3 files changed, 2 insertions(+), 2 deletions(-)
 mode change 100644 => 100755 packaging/alpine/cloudflared.initd
 mode change 100644 => 100755 packaging/alpine/pppoe-wan.initd

diff --git a/Makefile b/Makefile
index 7c5ab528..6a0e7afb 100644
--- a/Makefile
+++ b/Makefile
@@ -127,7 +127,7 @@ dist-arm64: build-linux-arm64 web-build
 	@cp packaging/alpine/ip-up.d-minimalrouter-qos build/dist/minimalrouter-linux-arm64/ip-up.d-minimalrouter-qos
 	@cp packaging/alpine/install-console.sh build/dist/minimalrouter-linux-arm64/install.sh
 	@cp packaging/alpine/install-dist.sh build/dist/minimalrouter-linux-arm64/install-core.sh
-	@chmod +x build/dist/minimalrouter-linux-arm64/install.sh build/dist/minimalrouter-linux-arm64/install-core.sh build/dist/minimalrouter-linux-arm64/slot-exec
+	@chmod +x build/dist/minimalrouter-linux-arm64/install.sh build/dist/minimalrouter-linux-arm64/install-core.sh build/dist/minimalrouter-linux-arm64/slot-exec build/dist/minimalrouter-linux-arm64/init.d/routerd build/dist/minimalrouter-linux-arm64/init.d/router-applyd build/dist/minimalrouter-linux-arm64/init.d/pppoe-wan build/dist/minimalrouter-linux-arm64/init.d/cloudflared build/dist/minimalrouter-linux-arm64/ip-up.d-minimalrouter-qos
 	@tar czf build/minimalrouter-linux-arm64.tar.gz -C build/dist minimalrouter-linux-arm64
 	@sh scripts/checksum-file.sh build/minimalrouter-linux-arm64.tar.gz build/minimalrouter-linux-arm64.tar.gz.sha256
 	@echo "=== Distribution: build/minimalrouter-linux-arm64.tar.gz ==="
@@ -163,7 +163,7 @@ dist-amd64: build-linux-amd64 web-build
 	@cp packaging/alpine/ip-up.d-minimalrouter-qos build/dist/minimalrouter-linux-amd64/ip-up.d-minimalrouter-qos
 	@cp packaging/alpine/install-console.sh build/dist/minimalrouter-linux-amd64/install.sh
 	@cp packaging/alpine/install-dist.sh build/dist/minimalrouter-linux-amd64/install-core.sh
-	@chmod +x build/dist/minimalrouter-linux-amd64/install.sh build/dist/minimalrouter-linux-amd64/install-core.sh build/dist/minimalrouter-linux-amd64/slot-exec
+	@chmod +x build/dist/minimalrouter-linux-amd64/install.sh build/dist/minimalrouter-linux-amd64/install-core.sh build/dist/minimalrouter-linux-amd64/slot-exec build/dist/minimalrouter-linux-amd64/init.d/routerd build/dist/minimalrouter-linux-amd64/init.d/router-applyd build/dist/minimalrouter-linux-amd64/init.d/pppoe-wan build/dist/minimalrouter-linux-amd64/init.d/cloudflared build/dist/minimalrouter-linux-amd64/ip-up.d-minimalrouter-qos
 	@tar czf build/minimalrouter-linux-amd64.tar.gz -C build/dist minimalrouter-linux-amd64
 	@sh scripts/checksum-file.sh build/minimalrouter-linux-amd64.tar.gz build/minimalrouter-linux-amd64.tar.gz.sha256
 	@echo "=== Distribution: build/minimalrouter-linux-amd64.tar.gz ==="
diff --git a/packaging/alpine/cloudflared.initd b/packaging/alpine/cloudflared.initd
old mode 100644
new mode 100755
diff --git a/packaging/alpine/pppoe-wan.initd b/packaging/alpine/pppoe-wan.initd
old mode 100644
new mode 100755

From 709d55048dd8801328c04aaf308d663c0d1eea96 Mon Sep 17 00:00:00 2001
From: Vladimir Perovic <vladimir.perovic@gmail.com>
Date: Sat, 22 Aug 2026 18:11:03 +0200
Subject: [PATCH 2/7] fix(dashboard): keep device tables inside their
 containers

The connected-devices table forced a 1160px min-width with fixed
230px/270px columns, so on narrower effective viewports the Actions
column ran past the container edge and clipped the Reserve IP and
Pause Internet buttons. Let the table compress instead: lower the
floor, slim the fixed columns, wrap long hostnames, and allow DHCP
reservation rows to wrap while keeping MAC/IP codes intact. Drop the
redundant Online label - a row in Connected devices is online by
definition - so the activity cell only shows the lease countdown.
---
 web/src/ClassicDashboard.css             |  4 ++--
 web/src/components/DeviceLeasesTable.css | 10 +++++++---
 web/src/components/DeviceLeasesTable.tsx |  2 +-
 3 files changed, 10 insertions(+), 6 deletions(-)

diff --git a/web/src/ClassicDashboard.css b/web/src/ClassicDashboard.css
index 39373645..9ea99e8a 100644
--- a/web/src/ClassicDashboard.css
+++ b/web/src/ClassicDashboard.css
@@ -3237,8 +3237,8 @@
 .static-lease-search{margin:.9rem 0 .3rem;max-width:360px}
 .static-leases table{font-size:.92rem}
 .static-leases thead th{padding:.55rem .9rem;font-size:.68rem}
-.static-leases tbody td{padding:.38rem .9rem}
-.static-leases tbody td code{font-size:.85rem}
+.static-leases tbody td{padding:.38rem .9rem;overflow-wrap:anywhere}
+.static-leases tbody td code{font-size:.85rem;white-space:nowrap}
 .static-leases .empty-state{padding:1rem}
 @media(max-width:640px){.static-lease-search{max-width:none}}
 
diff --git a/web/src/components/DeviceLeasesTable.css b/web/src/components/DeviceLeasesTable.css
index efe5d94d..5b4300f8 100644
--- a/web/src/components/DeviceLeasesTable.css
+++ b/web/src/components/DeviceLeasesTable.css
@@ -3,15 +3,15 @@
 }
 
 .dashboard-app .modern-device-section .elegant-device-table {
-  min-width: 1160px;
+  min-width: 560px;
 }
 
 .dashboard-app .modern-device-section .elegant-col-expires {
-  width: 230px;
+  width: 170px;
 }
 
 .dashboard-app .modern-device-section .elegant-col-actions {
-  width: 270px;
+  width: 220px;
 }
 
 .dashboard-app .modern-device-section .elegant-device-table th,
@@ -32,6 +32,10 @@
   flex: 0 0 auto;
 }
 
+.dashboard-app .modern-device-section .elegant-cell-name {
+  overflow-wrap: anywhere;
+}
+
 .device-reserve-button {
   display: inline-flex;
   min-height: 40px;
diff --git a/web/src/components/DeviceLeasesTable.tsx b/web/src/components/DeviceLeasesTable.tsx
index 78ba7dba..dee82cd8 100644
--- a/web/src/components/DeviceLeasesTable.tsx
+++ b/web/src/components/DeviceLeasesTable.tsx
@@ -358,7 +358,7 @@ export default function DeviceLeasesTable({ leases, config, onReservationSaved }
                   <td className="elegant-cell-ip">{row.ip_address}</td>
                   <td className="elegant-cell-mac">{row.mac || "Unknown"}</td>
                   <td className="elegant-cell-expires">
-                    {pause ? <span className="device-activity-state is-paused">{pauseLabel(pause)}</span> : row.online ? <span className="device-activity-state is-online"><i aria-hidden="true" />Online{row.expires_at ? <small> · lease {formatRelativeFuture(row.expires_at)}</small> : null}</span> : <span className="device-activity-state is-offline" title={row.last_seen_epoch ? new Date(row.last_seen_epoch * 1000).toLocaleString() : undefined}>Last seen {formatLastSeen(row.last_seen_epoch)}</span>}
+                    {pause ? <span className="device-activity-state is-paused">{pauseLabel(pause)}</span> : row.online ? <span className="device-activity-state is-online"><i aria-hidden="true" />{row.expires_at ? <>lease {formatRelativeFuture(row.expires_at)}</> : "connected"}</span> : <span className="device-activity-state is-offline" title={row.last_seen_epoch ? new Date(row.last_seen_epoch * 1000).toLocaleString() : undefined}>Last seen {formatLastSeen(row.last_seen_epoch)}</span>}
                   </td>
                   <td className="elegant-cell-actions">
                     <div className="device-row-actions">

From 7d93a06bf25fbc26d33b8f41e932642e02f4e849 Mon Sep 17 00:00:00 2001
From: Vladimir Perovic <vladimir.perovic@gmail.com>
Date: Sat, 22 Aug 2026 18:24:50 +0200
Subject: [PATCH 3/7] feat(dashboard): per-device traffic column and
 reservation editing

Connected devices gains a Data column fed by the accounting snapshot
already loaded for the page: current-month rx+tx per device, shown as
105 MB / 123 GB style magnitudes, hidden entirely when accounting is
disabled. DHCP reservations gains Edit so changing a hostname or
address no longer requires remove-and-recreate; duplicate checks now
ignore the lease being edited and the form switches into save/cancel
mode while editing.
---
 web/src/components/DeviceLeasesTable.css  | 12 ++++++-
 web/src/components/DeviceLeasesTable.tsx  | 29 ++++++++++++----
 web/src/components/StaticLeasesEditor.tsx | 41 ++++++++++++++++++++---
 3 files changed, 71 insertions(+), 11 deletions(-)

diff --git a/web/src/components/DeviceLeasesTable.css b/web/src/components/DeviceLeasesTable.css
index 5b4300f8..eaa9d727 100644
--- a/web/src/components/DeviceLeasesTable.css
+++ b/web/src/components/DeviceLeasesTable.css
@@ -3,13 +3,17 @@
 }
 
 .dashboard-app .modern-device-section .elegant-device-table {
-  min-width: 560px;
+  min-width: 640px;
 }
 
 .dashboard-app .modern-device-section .elegant-col-expires {
   width: 170px;
 }
 
+.dashboard-app .modern-device-section .elegant-col-data {
+  width: 110px;
+}
+
 .dashboard-app .modern-device-section .elegant-col-actions {
   width: 220px;
 }
@@ -36,6 +40,12 @@
   overflow-wrap: anywhere;
 }
 
+.dashboard-app .modern-device-section .elegant-cell-data {
+  color: var(--classic-muted);
+  font-variant-numeric: tabular-nums;
+  white-space: nowrap;
+}
+
 .device-reserve-button {
   display: inline-flex;
   min-height: 40px;
diff --git a/web/src/components/DeviceLeasesTable.tsx b/web/src/components/DeviceLeasesTable.tsx
index dee82cd8..0092933d 100644
--- a/web/src/components/DeviceLeasesTable.tsx
+++ b/web/src/components/DeviceLeasesTable.tsx
@@ -16,6 +16,7 @@ type DeviceRow = {
   last_seen_epoch?: number;
   is_new: boolean;
   liveLease?: Lease;
+  monthBytes?: number;
 };
 
 type Props = {
@@ -59,6 +60,18 @@ function pauseLabel(pause?: DevicePause) {
   return `Paused · ${minutes} min left`;
 }
 
+function formatBytes(bytes: number) {
+  if (!bytes) return "0 B";
+  const units = ["B", "KB", "MB", "GB", "TB"];
+  let value = bytes;
+  let unit = 0;
+  while (value >= 1024 && unit < units.length - 1) {
+    value /= 1024;
+    unit++;
+  }
+  return `${unit > 0 && value < 100 ? value.toFixed(1) : Math.round(value)} ${units[unit]}`;
+}
+
 function deviceIdentity(device: { mac?: string; address?: string }) {
   const mac = device.mac?.trim().toLowerCase();
   return mac || device.address || "";
@@ -198,6 +211,7 @@ export default function DeviceLeasesTable({ leases, config, onReservationSaved }
         last_seen_epoch: lastSeen,
         is_new: Boolean(config.accounting?.enabled && usage && newEnough && !previousIdentities.has(deviceIdentity(usage))),
         liveLease: lease,
+        monthBytes: usage?.total_bytes,
       };
     });
 
@@ -213,6 +227,7 @@ export default function DeviceLeasesTable({ leases, config, onReservationSaved }
         online: false,
         last_seen_epoch: device.last_seen_epoch,
         is_new: false,
+        monthBytes: device.total_bytes,
       });
     });
 
@@ -233,6 +248,7 @@ export default function DeviceLeasesTable({ leases, config, onReservationSaved }
   }, [rows, searchQuery]);
 
   const onlineCount = rows.filter((row) => row.online).length;
+  const showData = Boolean(accounting?.available);
 
   const reservationConflict = useMemo(() => {
     if (!reservationTarget) return "";
@@ -342,11 +358,11 @@ export default function DeviceLeasesTable({ leases, config, onReservationSaved }
 
       <div className="elegant-table-container">
         <table className="elegant-device-table">
-          <colgroup><col className="elegant-col-num" /><col /><col className="elegant-col-ip" /><col className="elegant-col-mac" /><col className="elegant-col-expires" /><col className="elegant-col-actions" /></colgroup>
-          <thead><tr><th className="elegant-th-num">#</th><th>Host name</th><th>IP address</th><th>MAC address</th><th>Activity</th><th className="elegant-th-actions">Actions</th></tr></thead>
+          <colgroup><col className="elegant-col-num" /><col /><col className="elegant-col-ip" /><col className="elegant-col-mac" /><col className="elegant-col-expires" />{showData && <col className="elegant-col-data" />}<col className="elegant-col-actions" /></colgroup>
+          <thead><tr><th className="elegant-th-num">#</th><th>Host name</th><th>IP address</th><th>MAC address</th><th>Activity</th>{showData && <th>Data</th>}<th className="elegant-th-actions">Actions</th></tr></thead>
           <tbody>
             {filteredRows.length === 0 ? (
-              <tr><td colSpan={6} className="elegant-empty"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round"><rect x="3" y="4" width="18" height="14" rx="2" /><path d="M3 9h18M8 4v14" /></svg><span>{searchQuery ? "No devices match your search." : "No devices connected yet."}</span></td></tr>
+              <tr><td colSpan={showData ? 7 : 6} className="elegant-empty"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round"><rect x="3" y="4" width="18" height="14" rx="2" /><path d="M3 9h18M8 4v14" /></svg><span>{searchQuery ? "No devices match your search." : "No devices connected yet."}</span></td></tr>
             ) : filteredRows.map((row, index) => {
               const isStatic = Boolean(row.mac && staticMacs.has(row.mac.toLowerCase()));
               const pause = pauseByIP.get(row.ip_address);
@@ -357,9 +373,10 @@ export default function DeviceLeasesTable({ leases, config, onReservationSaved }
                   <td className="elegant-cell-name"><span className="elegant-device-identity">{row.hostname || "Unknown device"}{isStatic && <span className="elegant-badge-static">Static</span>}{row.is_new && <span className="device-activity-badge is-new">New</span>}{pause && <span className="device-activity-badge is-paused">Paused</span>}</span></td>
                   <td className="elegant-cell-ip">{row.ip_address}</td>
                   <td className="elegant-cell-mac">{row.mac || "Unknown"}</td>
-                  <td className="elegant-cell-expires">
-                    {pause ? <span className="device-activity-state is-paused">{pauseLabel(pause)}</span> : row.online ? <span className="device-activity-state is-online"><i aria-hidden="true" />{row.expires_at ? <>lease {formatRelativeFuture(row.expires_at)}</> : "connected"}</span> : <span className="device-activity-state is-offline" title={row.last_seen_epoch ? new Date(row.last_seen_epoch * 1000).toLocaleString() : undefined}>Last seen {formatLastSeen(row.last_seen_epoch)}</span>}
-                  </td>
+                    <td className="elegant-cell-expires">
+                      {pause ? <span className="device-activity-state is-paused">{pauseLabel(pause)}</span> : row.online ? <span className="device-activity-state is-online"><i aria-hidden="true" />{row.expires_at ? <>lease {formatRelativeFuture(row.expires_at)}</> : "connected"}</span> : <span className="device-activity-state is-offline" title={row.last_seen_epoch ? new Date(row.last_seen_epoch * 1000).toLocaleString() : undefined}>Last seen {formatLastSeen(row.last_seen_epoch)}</span>}
+                    </td>
+                    {showData && <td className="elegant-cell-data" title="Traffic this month">{typeof row.monthBytes === "number" ? formatBytes(row.monthBytes) : "—"}</td>}
                   <td className="elegant-cell-actions">
                     <div className="device-row-actions">
                       {row.liveLease && !isStatic && <button type="button" onClick={() => openReservationDialog(row.liveLease!)} className="device-reserve-button" title="Add static DHCP reservation" aria-label={`Reserve an IP address for ${row.hostname || row.mac}`}><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M12 5v14M5 12h14" /></svg><span>Reserve IP</span></button>}
diff --git a/web/src/components/StaticLeasesEditor.tsx b/web/src/components/StaticLeasesEditor.tsx
index c15f2d81..4f8b04af 100644
--- a/web/src/components/StaticLeasesEditor.tsx
+++ b/web/src/components/StaticLeasesEditor.tsx
@@ -39,6 +39,7 @@ export default function StaticLeasesEditor({ config, busy, applyConfig, prefill,
   const [hostname, setHostname] = useState(prefill?.hostname ?? "");
   const [mac, setMac] = useState(prefill?.mac ?? "");
   const [ip, setIp] = useState(prefill?.ip ?? "");
+  const [editingId, setEditingId] = useState<string | null>(null);
   const [error, setError] = useState("");
   const [searchQuery, setSearchQuery] = useState("");
 
@@ -56,6 +57,22 @@ export default function StaticLeasesEditor({ config, busy, applyConfig, prefill,
 
   const poolWarning = ip && insidePool(ip, config.dhcp.range_start, config.dhcp.range_end);
 
+  const startEdit = (lease: StaticLease) => {
+    setEditingId(lease.id);
+    setHostname(lease.hostname || "");
+    setMac(lease.mac);
+    setIp(lease.ip_address);
+    setError("");
+  };
+
+  const cancelEdit = () => {
+    setEditingId(null);
+    setHostname("");
+    setMac("");
+    setIp("");
+    setError("");
+  };
+
   const submit = (event: FormEvent<HTMLFormElement>) => {
     event.preventDefault();
     setError("");
@@ -68,14 +85,28 @@ export default function StaticLeasesEditor({ config, busy, applyConfig, prefill,
       setError("Reserved address must be a valid IPv4 address.");
       return;
     }
-    if (leases.some((lease) => lease.mac.toLowerCase() === normalisedMac)) {
+    if (leases.some((lease) => lease.id !== editingId && lease.mac.toLowerCase() === normalisedMac)) {
       setError("That MAC address already has a reservation.");
       return;
     }
-    if (leases.some((lease) => lease.ip_address === ip.trim())) {
+    if (leases.some((lease) => lease.id !== editingId && lease.ip_address === ip.trim())) {
       setError("That address is already reserved for another device.");
       return;
     }
+    if (editingId) {
+      applyConfig((next) => {
+        next.dhcp = {
+          ...next.dhcp,
+          static_leases: (next.dhcp.static_leases || []).map((lease) =>
+            lease.id === editingId
+              ? { ...lease, hostname: hostname.trim(), mac: normalisedMac, ip_address: ip.trim() }
+              : lease,
+          ),
+        };
+      }, "DHCP reservation updated.");
+      cancelEdit();
+      return;
+    }
     applyConfig((next) => {
       next.dhcp = {
         ...next.dhcp,
@@ -148,8 +179,9 @@ export default function StaticLeasesEditor({ config, busy, applyConfig, prefill,
                   <td><code>{lease.mac}</code></td>
                   <td><code>{lease.ip_address}</code></td>
                   <td className="static-actions">
+                    <button className="button secondary small" disabled={busy} onClick={() => startEdit(lease)} type="button">Edit</button>
                     <button className="button secondary small" disabled={busy} onClick={() => void wakeOnLan(lease.mac)} title="Send a Wake-on-LAN magic packet" type="button">Wake</button>
-                    <button className="button secondary small" disabled={busy} onClick={() => remove(lease.id)} type="button">Remove</button>
+                    <button className="button secondary small danger" disabled={busy} onClick={() => remove(lease.id)} type="button">Remove</button>
                   </td>
                 </tr>
               ))
@@ -181,7 +213,8 @@ export default function StaticLeasesEditor({ config, busy, applyConfig, prefill,
         )}
         {error && <p className="form-note is-error" role="alert">{error}</p>}
         <div className="form-actions">
-          <button className="button primary" disabled={busy} type="submit">Reserve address</button>
+          {editingId && <button className="button secondary" disabled={busy} onClick={cancelEdit} type="button">Cancel edit</button>}
+          <button className="button primary" disabled={busy} type="submit">{editingId ? "Save changes" : "Reserve address"}</button>
         </div>
       </form>
     </article>

From 4784cfe9816fb1d3900216476993843e7a278787 Mon Sep 17 00:00:00 2001
From: Vladimir Perovic <vladimir.perovic@gmail.com>
Date: Sat, 22 Aug 2026 18:58:06 +0200
Subject: [PATCH 4/7] feat(dashboard): wake offline devices, edit rules and
 peers, traffic delta

- Connected devices: Wake button for offline devices reuses the
  existing /api/v1/network/wol endpoint instead of being limited to
  the reservations table
- Tunnel port forwards: Edit fills the composer and updates a rule in
  place; no more remove-and-recreate for port changes
- Custom firewall rules: Edit name/direction/action/match inline
- DNS filter profiles: Edit opens the existing scheduler modal pre-
  filled from the stored day windows and preserves enabled state;
  normalizeDayWindows is exported so the grid can be rebuilt
- WireGuard peers: Rename with an inline form through applyConfig
- Traffic: month-over-month percentage next to the active total

Gateway window tabs (1h/24h/7d/30d) were reviewed and already exist.
---
 web/src/components/DNSFilterPanel.tsx      | 50 ++++++++++++++++++++--
 web/src/components/DashboardSections.tsx   | 21 ++++++++-
 web/src/components/DeviceLeasesTable.tsx   | 19 ++++++++
 web/src/components/FirewallRulesEditor.tsx | 43 ++++++++++++++++++-
 web/src/components/PortForwardsPanel.tsx   | 32 +++++++++++++-
 web/src/components/TrafficPanel.tsx        |  7 ++-
 web/src/lib/deviceProfiles.ts              |  2 +-
 7 files changed, 164 insertions(+), 10 deletions(-)

diff --git a/web/src/components/DNSFilterPanel.tsx b/web/src/components/DNSFilterPanel.tsx
index 924252fd..986ae212 100644
--- a/web/src/components/DNSFilterPanel.tsx
+++ b/web/src/components/DNSFilterPanel.tsx
@@ -9,6 +9,7 @@ import {
   gridToDayWindows,
   HourGrid,
   managedServices,
+  normalizeDayWindows,
   scheduleDays,
   ScheduleDay,
 } from "../lib/deviceProfiles";
@@ -27,8 +28,22 @@ export default function DNSFilterPanel({ apiConnected, onError }: Props) {
   const [addresses, setAddresses] = useState("");
   const [services, setServices] = useState<string[]>(["youtube", "steam", "wiki"]);
   const [grid, setGrid] = useState<HourGrid>(() => createDefaultKidsGrid());
+  const [editingId, setEditingId] = useState<string | null>(null);
   const dragValue = useRef<boolean | null>(null);
 
+  const gridFromProfile = (profile: DeviceProfile): HourGrid => {
+    const windows = normalizeDayWindows(profile.schedule);
+    return Object.fromEntries(scheduleDays.map(([day]) => {
+      const slots = Array<boolean>(24).fill(false);
+      for (const item of windows[day] ?? []) {
+        const from = Number(item.start.slice(0, 2));
+        const to = item.end === "23:59" ? 24 : Number(item.end.slice(0, 2));
+        for (let hour = from; hour < Math.min(to, 24); hour += 1) slots[hour] = true;
+      }
+      return [day, slots];
+    })) as unknown as HourGrid;
+  };
+
   useEffect(() => {
     if (!apiConnected) return;
     void apiFetch("/api/v1/config")
@@ -73,10 +88,29 @@ export default function DNSFilterPanel({ apiConnected, onError }: Props) {
 
   const closeModal = () => {
     setModalOpen(false);
+    setEditingId(null);
+    setName("Kids");
+    setAddresses("");
+    setServices(["youtube", "steam", "wiki"]);
+    setGrid(createDefaultKidsGrid());
+  };
+
+  const openAdd = () => {
+    setEditingId(null);
     setName("Kids");
     setAddresses("");
     setServices(["youtube", "steam", "wiki"]);
     setGrid(createDefaultKidsGrid());
+    setModalOpen(true);
+  };
+
+  const startEditProfile = (profile: DeviceProfile) => {
+    setEditingId(profile.id);
+    setName(profile.name);
+    setAddresses(profile.ip_addresses.join(", "));
+    setServices([...profile.services]);
+    setGrid(gridFromProfile(profile));
+    setModalOpen(true);
   };
 
   const toggleGlobal = async () => {
@@ -96,12 +130,20 @@ export default function DNSFilterPanel({ apiConnected, onError }: Props) {
     setSaving(true);
     try {
       const profile = createKidsProfile({
+        id: editingId ?? undefined,
         name,
         addresses: addresses.split(","),
         services,
         dayWindows: gridToDayWindows(grid),
       });
-      await persist(true, [...profiles, profile]);
+      if (editingId) {
+        const existing = profiles.find((item) => item.id === editingId);
+        await persist(true, profiles.map((item) => (
+          item.id === editingId ? { ...profile, enabled: existing?.enabled ?? true } : item
+        )));
+      } else {
+        await persist(true, [...profiles, profile]);
+      }
       closeModal();
       onError("");
     } catch (error) {
@@ -166,7 +208,7 @@ export default function DNSFilterPanel({ apiConnected, onError }: Props) {
   return (
     <section className="section-block dns-filter" id="adguard">
       <div className="section-heading dns-filter-heading has-facts">
-        <div className="subpage-hero-head"><div><p className="eyebrow">DNS Filter & Device Profiles</p><h2>Scheduled service access</h2><p className="dns-filter-intro">Devices use static LAN addresses. DNS answers populate nftables sets, and the firewall applies service schedules per device.</p></div><div className="dns-filter-actions"><button className="button secondary" disabled={!apiConnected || saving} onClick={toggleGlobal} type="button">{enabled ? "Disable DNS Filter" : "Enable DNS Filter"}</button><button className="button primary" disabled={!apiConnected || saving} onClick={() => setModalOpen(true)} type="button">Add device profile</button></div></div>
+        <div className="subpage-hero-head"><div><p className="eyebrow">DNS Filter & Device Profiles</p><h2>Scheduled service access</h2><p className="dns-filter-intro">Devices use static LAN addresses. DNS answers populate nftables sets, and the firewall applies service schedules per device.</p></div><div className="dns-filter-actions"><button className="button secondary" disabled={!apiConnected || saving} onClick={toggleGlobal} type="button">{enabled ? "Disable DNS Filter" : "Enable DNS Filter"}</button><button className="button primary" disabled={!apiConnected || saving} onClick={openAdd} type="button">Add device profile</button></div></div>
         <dl className="subpage-hero-facts"><div><dt>Filtering</dt><dd>{enabled ? "Active" : "Disabled"}</dd><small>DNS and firewall policy</small></div><div><dt>Profiles</dt><dd>{profiles.length}</dd><small>configured devices</small></div><div><dt>Active profiles</dt><dd>{profiles.filter((profile) => profile.enabled).length}</dd><small>scheduled policies</small></div><div><dt>Services</dt><dd>{new Set(profiles.flatMap((profile) => profile.services)).size}</dd><small>unique service groups</small></div></dl>
       </div>
 
@@ -197,7 +239,7 @@ export default function DNSFilterPanel({ apiConnected, onError }: Props) {
                       {profile.enabled ? "Active" : "Paused"}
                     </button>
                   </td>
-                  <td><button className="icon-danger" disabled={saving} onClick={() => removeProfile(profile.id)} title="Remove profile" type="button">✕</button></td>
+                  <td><button className="button secondary small" disabled={saving} onClick={() => startEditProfile(profile)} type="button">Edit</button> <button className="icon-danger" disabled={saving} onClick={() => removeProfile(profile.id)} title="Remove profile" type="button">✕</button></td>
                 </tr>
               ))}
             </tbody>
@@ -209,7 +251,7 @@ export default function DNSFilterPanel({ apiConnected, onError }: Props) {
         <div className="modal-backdrop" role="presentation">
           <section aria-labelledby="profile-title" aria-modal="true" className="modal-panel dns-profile-modal" role="dialog">
             <div className="modal-heading">
-              <div className="dns-profile-modal-title"><span aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round"><path d="M12 3 4 7v5c0 4.4 3 7.3 8 9 5-1.7 8-4.6 8-9V7z" /><path d="M9 12h6M12 9v6" /></svg></span><div><p className="eyebrow">Parental control</p><h2 id="profile-title">Add device profile</h2><p>Choose the devices, managed services and the hours when access is allowed.</p></div></div>
+              <div className="dns-profile-modal-title"><span aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round"><path d="M12 3 4 7v5c0 4.4 3 7.3 8 9 5-1.7 8-4.6 8-9V7z" /><path d="M9 12h6M12 9v6" /></svg></span><div><p className="eyebrow">Parental control</p><h2 id="profile-title">{editingId ? "Edit device profile" : "Add device profile"}</h2><p>Choose the devices, managed services and the hours when access is allowed.</p></div></div>
               <button aria-label="Close profile dialog" className="modal-close" onClick={closeModal} type="button">✕</button>
             </div>
             <form className="form-grid dns-profile-form" onSubmit={submitProfile}>
diff --git a/web/src/components/DashboardSections.tsx b/web/src/components/DashboardSections.tsx
index 0f0ffe2b..2870a8c6 100644
--- a/web/src/components/DashboardSections.tsx
+++ b/web/src/components/DashboardSections.tsx
@@ -337,8 +337,19 @@ export default function DashboardSections({
   const [confirmDeletePeer, setConfirmDeletePeer] = useState<{ id: string, name: string } | null>(null);
   const [peerActionID, setPeerActionID] = useState<string | null>(null);
   const [peerActionError, setPeerActionError] = useState("");
+  const [renamingPeer, setRenamingPeer] = useState<{ id: string; name: string } | null>(null);
   const [wgPreview, setWgPreview] = useState<{ client_ip: string, server_endpoint: string } | null>(null);
 
+  const submitPeerRename = () => {
+    if (!renamingPeer) return;
+    const name = renamingPeer.name.trim();
+    applyConfig((next) => {
+      const selected = next.wireguard.peers?.find((item: WireGuardPeer) => item.id === renamingPeer.id);
+      if (selected && name) selected.name = name;
+    }, `Peer renamed to ${name}.`);
+    setRenamingPeer(null);
+  };
+
   // Authoritative allocation preview from the backend (MR-AUD-005): the UI
   // never re-implements next-free-IP or endpoint resolution.
   React.useEffect(() => {
@@ -576,7 +587,7 @@ export default function DashboardSections({
           <article className={`wg-peer-row ${peerState}`} key={peer.id}>
             <div className="wg-peer-identity">
               <span className="wg-peer-device" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round"><rect x="4" y="3" width="16" height="18" rx="3" /><path d="M9 17h6M9 7h6" /></svg></span>
-              <div><strong>{peer.name}</strong><code>{peer.public_key.slice(0, 18)}…</code></div>
+              <div>{renamingPeer?.id === peer.id ? <form onSubmit={(event) => { event.preventDefault(); submitPeerRename(); }} style={{ display: "flex", gap: 6, alignItems: "center" }}><input aria-label="Peer name" autoFocus onChange={(event) => setRenamingPeer({ id: peer.id, name: event.target.value })} value={renamingPeer.name} /></form> : <strong>{peer.name}</strong>}<code>{peer.public_key.slice(0, 18)}…</code></div>
             </div>
             <div className="wg-peer-state"><span><i aria-hidden="true" />{!peer.enabled ? "Disabled" : online ? "Connected" : "Awaiting handshake"}</span><small>{handshake ? formatHandshake(handshake) : "Not connected yet"}</small></div>
             <dl className="wg-peer-details">
@@ -585,6 +596,14 @@ export default function DashboardSections({
               <div><dt>Transfer</dt><dd><span className="is-rx">↓ {formatBytes(live?.rx_bytes || 0)}</span><span>↑ {formatBytes(live?.tx_bytes || 0)}</span></dd></div>
             </dl>
             <div className="wg-peer-actions">
+              {renamingPeer?.id === peer.id ? (
+                <>
+                  <button className="wg-peer-config" disabled={busy || peerActionID !== null || !renamingPeer.name.trim()} onClick={() => void submitPeerRename()} type="button">Save</button>
+                  <button className="wg-peer-config" disabled={busy || peerActionID !== null} onClick={() => setRenamingPeer(null)} type="button">Cancel</button>
+                </>
+              ) : (
+                <button className="wg-peer-config" disabled={busy || peerActionID !== null} onClick={() => setRenamingPeer({ id: peer.id, name: peer.name })} type="button">Rename</button>
+              )}
               <button className="wg-peer-config" disabled={busy || peerActionID !== null} onClick={() => void handlePeerConfiguration(peer, false)} type="button">QR code</button>
               <button className="wg-peer-config" disabled={busy || peerActionID !== null} onClick={() => void handlePeerConfiguration(peer, true)} type="button">Download settings</button>
               <button className="wg-peer-toggle" disabled={busy || peerActionID !== null} onClick={() => void applyConfig((next) => {
diff --git a/web/src/components/DeviceLeasesTable.tsx b/web/src/components/DeviceLeasesTable.tsx
index 0092933d..6b759b1d 100644
--- a/web/src/components/DeviceLeasesTable.tsx
+++ b/web/src/components/DeviceLeasesTable.tsx
@@ -88,6 +88,7 @@ export default function DeviceLeasesTable({ leases, config, onReservationSaved }
   const [reservationIP, setReservationIP] = useState("");
   const [reservationBusy, setReservationBusy] = useState(false);
   const [reservationError, setReservationError] = useState("");
+  const [wakeBusyMac, setWakeBusyMac] = useState<string | null>(null);
 
   const loadActivity = useCallback(async (signal?: AbortSignal) => {
     if (!config.accounting?.enabled) {
@@ -179,6 +180,23 @@ export default function DeviceLeasesTable({ leases, config, onReservationSaved }
     }
   };
 
+  const wakeDevice = async (mac: string) => {
+    setWakeBusyMac(mac);
+    try {
+      const response = await apiFetch("/api/v1/network/wol", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ mac }),
+      });
+      if (!response.ok) {
+        const body = await response.json().catch(() => ({}));
+        throw new Error(body.error || `Wake-on-LAN failed (${response.status})`);
+      }
+    } finally {
+      setWakeBusyMac(null);
+    }
+  };
+
   const pauseByIP = useMemo(() => new Map(pauses.map((pause) => [pause.ip, pause])), [pauses]);
   const staticMacs = useMemo(() => new Set((config.dhcp.static_leases || []).map((sl) => sl.mac.toLowerCase())), [config.dhcp.static_leases]);
 
@@ -379,6 +397,7 @@ export default function DeviceLeasesTable({ leases, config, onReservationSaved }
                     {showData && <td className="elegant-cell-data" title="Traffic this month">{typeof row.monthBytes === "number" ? formatBytes(row.monthBytes) : "—"}</td>}
                   <td className="elegant-cell-actions">
                     <div className="device-row-actions">
+                      {!row.online && row.mac && <button type="button" disabled={wakeBusyMac === row.mac} onClick={() => void wakeDevice(row.mac!)} className="device-reserve-button" title="Send a Wake-on-LAN magic packet" aria-label={`Wake ${row.hostname || row.mac}`}>{wakeBusyMac === row.mac ? "Waking…" : "Wake"}</button>}
                       {row.liveLease && !isStatic && <button type="button" onClick={() => openReservationDialog(row.liveLease!)} className="device-reserve-button" title="Add static DHCP reservation" aria-label={`Reserve an IP address for ${row.hostname || row.mac}`}><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M12 5v14M5 12h14" /></svg><span>Reserve IP</span></button>}
                       {pause ? (
                         <button className="device-pause-button is-resume" disabled={busy} onClick={() => void resumeDevice(row.ip_address)} type="button">{busy ? "Working…" : "Resume"}</button>
diff --git a/web/src/components/FirewallRulesEditor.tsx b/web/src/components/FirewallRulesEditor.tsx
index 954f27d0..a675fb4b 100644
--- a/web/src/components/FirewallRulesEditor.tsx
+++ b/web/src/components/FirewallRulesEditor.tsx
@@ -43,10 +43,33 @@ export default function FirewallRulesEditor({ config, busy, applyConfig }: Props
   const [protocol, setProtocol] = useState("tcp");
   const [srcIP, setSrcIP] = useState("");
   const [dstPort, setDstPort] = useState("");
+  const [editingId, setEditingId] = useState<string | null>(null);
   const [error, setError] = useState("");
 
   const needsPort = protocol === "tcp" || protocol === "udp";
 
+  const startEdit = (rule: FirewallCustomRule) => {
+    setEditingId(rule.id);
+    setName(rule.name);
+    setDirection(rule.direction);
+    setAction(rule.action);
+    setProtocol(rule.protocol);
+    setSrcIP(rule.src_ip || "");
+    setDstPort(rule.dst_port ? String(rule.dst_port) : "");
+    setError("");
+  };
+
+  const cancelEdit = () => {
+    setEditingId(null);
+    setName("");
+    setDirection("input");
+    setAction("allow");
+    setProtocol("tcp");
+    setSrcIP("");
+    setDstPort("");
+    setError("");
+  };
+
   const submit = (event: FormEvent<HTMLFormElement>) => {
     event.preventDefault();
     setError("");
@@ -63,6 +86,20 @@ export default function FirewallRulesEditor({ config, busy, applyConfig }: Props
       setError("Destination port must be between 1 and 65535 for TCP and UDP rules.");
       return;
     }
+    if (editingId) {
+      applyConfig((next) => {
+        next.firewall = {
+          ...next.firewall,
+          custom_rules: (next.firewall.custom_rules || []).map((rule) => (
+            rule.id === editingId
+              ? { ...rule, name: name.trim(), action, direction, protocol, src_ip: srcIP.trim(), dst_port: needsPort ? port : 0 }
+              : rule
+          )),
+        };
+      }, "Firewall rule updated.");
+      cancelEdit();
+      return;
+    }
     applyConfig((next) => {
       next.firewall = {
         ...next.firewall,
@@ -139,6 +176,9 @@ export default function FirewallRulesEditor({ config, busy, applyConfig }: Props
                   </td>
                   <td>{rule.enabled ? "Enabled" : "Paused"}</td>
                   <td className="firewall-rule-actions">
+                    <button className="button secondary small" disabled={busy} onClick={() => (editingId === rule.id ? cancelEdit() : startEdit(rule))} type="button">
+                      {editingId === rule.id ? "Cancel" : "Edit"}
+                    </button>
                     <button className="button secondary small" disabled={busy} onClick={() => toggle(rule.id)} type="button">
                       {rule.enabled ? "Pause" : "Enable"}
                     </button>
@@ -198,7 +238,8 @@ export default function FirewallRulesEditor({ config, busy, applyConfig }: Props
         </p>
         {error && <p className="form-note is-error" role="alert">{error}</p>}
         <div className="form-actions">
-          <button className="button primary" disabled={busy} type="submit">Add rule</button>
+          {editingId && <button className="button secondary" disabled={busy} onClick={cancelEdit} type="button">Cancel edit</button>}
+          <button className="button primary" disabled={busy} type="submit">{editingId ? "Save changes" : "Add rule"}</button>
         </div>
       </form>
     </article>
diff --git a/web/src/components/PortForwardsPanel.tsx b/web/src/components/PortForwardsPanel.tsx
index d48e245c..d1e04497 100644
--- a/web/src/components/PortForwardsPanel.tsx
+++ b/web/src/components/PortForwardsPanel.tsx
@@ -34,6 +34,7 @@ export default function PortForwardsPanel({ onError }: Props) {
   const [externalPort, setExternalPort] = useState("");
   const [internalIP, setInternalIP] = useState("");
   const [internalPort, setInternalPort] = useState("");
+  const [editingId, setEditingId] = useState<string | null>(null);
 
   useEffect(() => {
     void load();
@@ -77,6 +78,24 @@ export default function PortForwardsPanel({ onError }: Props) {
     }
   };
 
+  const startEdit = (rule: PortForwardRule) => {
+    setEditingId(rule.id);
+    setName(rule.name);
+    setProtocol(rule.protocol);
+    setExternalPort(String(rule.external_port));
+    setInternalIP(rule.internal_ip);
+    setInternalPort(String(rule.internal_port));
+  };
+
+  const cancelEdit = () => {
+    setEditingId(null);
+    setName("");
+    setProtocol("tcp");
+    setExternalPort("");
+    setInternalIP("");
+    setInternalPort("");
+  };
+
   const add = async (event: FormEvent) => {
     event.preventDefault();
     if (!tunnelEnabled) {
@@ -99,6 +118,15 @@ export default function PortForwardsPanel({ onError }: Props) {
       onError("Internal IP must be a valid IPv4 address (e.g. 192.168.1.50).");
       return;
     }
+    if (editingId) {
+      await persist(rules.map((rule) => (
+        rule.id === editingId
+          ? { ...rule, name: name.trim(), protocol, external_port: Number(externalPort), internal_ip: internalIP, internal_port: Number(internalPort) }
+          : rule
+      )));
+      cancelEdit();
+      return;
+    }
     const rule: PortForwardRule = {
       id: `pf-${Date.now().toString(36)}`,
       name: name.trim(),
@@ -156,7 +184,7 @@ export default function PortForwardsPanel({ onError }: Props) {
               <label className="field port-forward-address"><span>LAN destination</span><input onChange={(event) => setInternalIP(event.target.value)} placeholder="192.168.1.50" value={internalIP} /></label>
               <label className="field"><span>Service port</span><input inputMode="numeric" onChange={(event) => setInternalPort(event.target.value)} placeholder="4080" value={internalPort} /></label>
             </div>
-            <div className="port-forward-submit"><p><strong>Route preview</strong><span>{tunnelAddress || "tunnel address"}:{externalPort || "port"} → {internalIP || "LAN device"}:{internalPort || "port"}</span></p><button className="modal-action-button" disabled={saving} type="submit"><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round"><path d="M12 5v14M5 12h14" /></svg>{saving ? "Applying…" : "Add tunnel rule"}</button></div>
+            <div className="port-forward-submit"><p><strong>Route preview</strong><span>{tunnelAddress || "tunnel address"}:{externalPort || "port"} → {internalIP || "LAN device"}:{internalPort || "port"}</span></p>{editingId && <button className="modal-action-button" disabled={saving} onClick={cancelEdit} type="button">Cancel edit</button>}<button className="modal-action-button" disabled={saving} type="submit"><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round"><path d="M12 5v14M5 12h14" /></svg>{saving ? "Applying…" : editingId ? "Save changes" : "Add tunnel rule"}</button></div>
           </form>
 
           {rules.length === 0 ? (
@@ -168,7 +196,7 @@ export default function PortForwardsPanel({ onError }: Props) {
                   <div className="port-forward-rule-name"><i aria-hidden="true" /><span><strong>{rule.name}</strong><small>{rule.enabled ? "Forwarding active" : "Rule paused"}</small></span></div>
                   <code>{rule.protocol.toUpperCase()}</code>
                   <div className="port-forward-route"><span>10.8.0.1:{rule.external_port}</span><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round"><path d="M5 12h14M14 7l5 5-5 5" /></svg><strong>{rule.internal_ip}:{rule.internal_port}</strong></div>
-                  <div className="port-forward-actions"><button disabled={saving} onClick={() => toggle(rule.id)} type="button">{rule.enabled ? "Pause" : "Enable"}</button><button className="is-remove" disabled={saving} onClick={() => remove(rule.id)} type="button" aria-label={`Remove ${rule.name}`} title={`Remove ${rule.name}`}><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round"><path d="M4 7h16M9 7V4h6v3M6.5 7l.7 13h9.6l.7-13M10 11v5M14 11v5" /></svg></button></div>
+                  <div className="port-forward-actions"><button disabled={saving} onClick={() => (editingId === rule.id ? cancelEdit() : startEdit(rule))} type="button">{editingId === rule.id ? "Cancel" : "Edit"}</button><button disabled={saving} onClick={() => toggle(rule.id)} type="button">{rule.enabled ? "Pause" : "Enable"}</button><button className="is-remove" disabled={saving} onClick={() => remove(rule.id)} type="button" aria-label={`Remove ${rule.name}`} title={`Remove ${rule.name}`}><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round"><path d="M4 7h16M9 7V4h6v3M6.5 7l.7 13h9.6l.7-13M10 11v5M14 11v5" /></svg></button></div>
                 </article>
               ))}
             </div>
diff --git a/web/src/components/TrafficPanel.tsx b/web/src/components/TrafficPanel.tsx
index 14cd362b..51a488a5 100644
--- a/web/src/components/TrafficPanel.tsx
+++ b/web/src/components/TrafficPanel.tsx
@@ -67,6 +67,11 @@ export default function TrafficPanel({ config, busy, applyConfig }: Props) {
 
   const months = snapshot?.months ?? [];
   const active = months.find((month) => month.month === selectedMonth) ?? months[0];
+  const activeIndex = months.findIndex((month) => month.month === active?.month);
+  const previous = activeIndex >= 0 ? months[activeIndex + 1] : undefined;
+  const delta = active && previous && previous.total_bytes > 0
+    ? ((active.total_bytes - previous.total_bytes) / previous.total_bytes) * 100
+    : null;
 
   return (
     <section className="dashboard-section" id="traffic">
@@ -114,7 +119,7 @@ export default function TrafficPanel({ config, busy, applyConfig }: Props) {
             <div className="card-title-row">
               <div>
                 <h3>{monthLabel(active.month)}</h3>
-                <p>{active.devices.length} devices · {formatBytes(active.total_bytes)} total</p>
+                <p>{active.devices.length} devices · {formatBytes(active.total_bytes)} total{previous && delta !== null ? <span title={`Previous month: ${formatBytes(previous.total_bytes)}`}> · {delta >= 0 ? "+" : ""}{delta.toFixed(0)}% vs {monthLabel(previous.month)}</span> : ""}</p>
               </div>
               <button className="button secondary small" disabled={busy} onClick={() => void load()} type="button">Refresh</button>
             </div>
diff --git a/web/src/lib/deviceProfiles.ts b/web/src/lib/deviceProfiles.ts
index 9857054e..10f57600 100644
--- a/web/src/lib/deviceProfiles.ts
+++ b/web/src/lib/deviceProfiles.ts
@@ -77,7 +77,7 @@ export function gridToDayWindows(grid: HourGrid): DayWindows {
   return Object.fromEntries(scheduleDays.map(([day]) => [day, slotsToWindows(grid[day])])) as unknown as DayWindows;
 }
 
-function normalizeDayWindows(schedule: DeviceProfile["schedule"]): DayWindows {
+export function normalizeDayWindows(schedule: DeviceProfile["schedule"]): DayWindows {
   if (schedule.day_windows && Object.keys(schedule.day_windows).length > 0) {
     return Object.fromEntries(scheduleDays.map(([day]) => [day, schedule.day_windows?.[day] ?? []])) as unknown as DayWindows;
   }

From d0800839f15482703a794358881f71048a09335a Mon Sep 17 00:00:00 2001
From: Vladimir Perovic <vladimir.perovic@gmail.com>
Date: Sat, 22 Aug 2026 19:13:09 +0200
Subject: [PATCH 5/7] feat(dashboard): show application memory separately from
 file cache

The overview memory figure is MemTotal minus MemAvailable, which on a
quiet appliance mostly measures reclaimable kernel page cache - a 90 MB
workload reads as 300 MB after the cache fills. Telemetry now also sums
resident memory across userspace processes from /proc/<pid>/stat (thread
group leaders only, so threads are not double counted) and the overview
memory card shows that application footprint next to the cached-inclusive
figure. QEMU host-side overhead lives outside the guest and stays out of
scope for the appliance dashboard.
---
 internal/telemetry/runtime.go              |  1 +
 internal/telemetry/runtime_linux.go        | 44 ++++++++++++++++++++++
 web/src/api-types.ts                       |  1 +
 web/src/components/ClassicOverviewBase.tsx |  2 +-
 web/src/lib/demoApi.ts                     |  2 +-
 5 files changed, 48 insertions(+), 2 deletions(-)

diff --git a/internal/telemetry/runtime.go b/internal/telemetry/runtime.go
index 5570eb72..64e08485 100644
--- a/internal/telemetry/runtime.go
+++ b/internal/telemetry/runtime.go
@@ -29,6 +29,7 @@ type RuntimeStatus struct {
 	LoadAverage           []float64              `json:"load_average,omitempty"`
 	MemoryUsedBytes       uint64                 `json:"memory_used_bytes,omitempty"`
 	MemoryTotalBytes      uint64                 `json:"memory_total_bytes,omitempty"`
+	AppMemoryBytes        uint64                 `json:"app_memory_bytes,omitempty"`
 	DiskUsedBytes         uint64                 `json:"disk_used_bytes,omitempty"`
 	DiskTotalBytes        uint64                 `json:"disk_total_bytes,omitempty"`
 	Storage               storage.Status         `json:"storage"`
diff --git a/internal/telemetry/runtime_linux.go b/internal/telemetry/runtime_linux.go
index 09661ce5..2bef0c28 100644
--- a/internal/telemetry/runtime_linux.go
+++ b/internal/telemetry/runtime_linux.go
@@ -138,6 +138,7 @@ func RuntimeSnapshot(wanInterface, lanInterface, dataDir string) RuntimeStatus {
 			status.MemoryUsedBytes = (totalKB - availableKB) * 1024
 		}
 	}
+	status.AppMemoryBytes = readProcessMemoryBytes()
 	status.Storage = storage.Inspect(dataDir)
 	status.DiskTotalBytes = status.Storage.TotalBytes
 	status.DiskUsedBytes = status.Storage.UsedBytes
@@ -381,3 +382,46 @@ func readWireGuardClientStatus() *WireGuardClientStatus {
 		Online:        peer.Online,
 	}
 }
+
+// readProcessMemoryBytes sums the resident memory of every userspace process
+// from /proc/<pid>/stat (field 24, resident pages). Top-level /proc entries are
+// thread-group leaders only, so threads are never counted twice. This separates
+// real application footprint from the kernel file cache that inflates the
+// MemTotal-minus-MemAvailable figure on a quiet appliance.
+func readProcessMemoryBytes() uint64 {
+	pageSize := uint64(os.Getpagesize())
+	entries, err := os.ReadDir("/proc")
+	if err != nil {
+		return 0
+	}
+	var total uint64
+	for _, entry := range entries {
+		if !entry.IsDir() {
+			continue
+		}
+		pid := entry.Name()
+		if pid[0] < '0' || pid[0] > '9' {
+			continue
+		}
+		data, err := os.ReadFile(filepath.Join("/proc", pid, "stat"))
+		if err != nil {
+			continue
+		}
+		// The comm field may contain spaces; everything after the final ')'
+		// starts at field 3 (state), so RSS is field 24 = offset 21 from there.
+		closing := strings.LastIndex(string(data), ")")
+		if closing < 0 {
+			continue
+		}
+		fields := strings.Fields(string(data[closing+1:]))
+		if len(fields) <= 21 {
+			continue
+		}
+		pages, parseErr := strconv.ParseUint(fields[21], 10, 64)
+		if parseErr != nil {
+			continue
+		}
+		total += pages * pageSize
+	}
+	return total
+}
diff --git a/web/src/api-types.ts b/web/src/api-types.ts
index f29de411..dfb11fdd 100644
--- a/web/src/api-types.ts
+++ b/web/src/api-types.ts
@@ -169,6 +169,7 @@ export type SystemStatus = {
     load_average?: number[];
     memory_used_bytes?: number;
     memory_total_bytes?: number;
+    app_memory_bytes?: number;
     rx_bytes?: number;
     tx_bytes?: number;
     disk_used_bytes?: number;
diff --git a/web/src/components/ClassicOverviewBase.tsx b/web/src/components/ClassicOverviewBase.tsx
index 07835d67..8492e1fd 100644
--- a/web/src/components/ClassicOverviewBase.tsx
+++ b/web/src/components/ClassicOverviewBase.tsx
@@ -454,7 +454,7 @@ export default function ClassicOverview({
         <header className="overview-panel-header"><div><h2 id="resources-title">Appliance resources</h2><p>Live system utilization</p></div></header>
         <div className="overview-resource-list">
           <article><div><span>CPU</span><small>{runtime.cpu_count || 0} logical cores</small></div><strong>{(runtime.cpu_load_percent || 0).toFixed(2)}%</strong><progress max="100" value={Math.min(100, runtime.cpu_load_percent || 0)} /></article>
-          <article><div><span>Memory</span><small>{formatBytes(runtime.memory_used_bytes)} of {formatBytes(runtime.memory_total_bytes)}</small></div><strong>{formatBytes(runtime.memory_used_bytes)}</strong><progress max="100" value={Math.min(100, memoryPercent)} /></article>
+          <article><div><span>Memory</span><small title="Used includes reclaimable kernel file cache">{formatBytes(runtime.memory_used_bytes)} of {formatBytes(runtime.memory_total_bytes)}{runtime.app_memory_bytes ? ` · apps ${formatBytes(runtime.app_memory_bytes)}` : ""}</small></div><strong>{formatBytes(runtime.memory_used_bytes)}</strong><progress max="100" value={Math.min(100, memoryPercent)} /></article>
           <article><div><span>Disk</span><small>{formatBytes(runtime.disk_used_bytes)} of {formatBytes(runtime.disk_total_bytes)}</small></div><strong>{formatBytes(runtime.disk_used_bytes)}</strong><progress max="100" value={Math.min(100, diskPercent)} /></article>
         </div>
         <div className={`overview-resource-note ${resourceNote.className}`}><OverviewIcon name="check" /><span>{resourceNote.label}</span></div>
diff --git a/web/src/lib/demoApi.ts b/web/src/lib/demoApi.ts
index 882a6fd5..3360a243 100644
--- a/web/src/lib/demoApi.ts
+++ b/web/src/lib/demoApi.ts
@@ -123,7 +123,7 @@ function liveSystem() {
     runtime: {
       available: true, wan_connected: true, public_ip: "203.0.113.9", wan_mac: "02:D4:7A:31:8C:10", lan_mac: "02:6B:92:4F:E1:20",
       uptime_seconds: 691200 + Math.floor((Date.now() - startedAt) / 1000), cpu_count: 2, cpu_load_percent: 6 + trafficTick % 4,
-      load_average: [0.14, 0.11, 0.09], memory_used_bytes: 151000000, memory_total_bytes: 536870912,
+      load_average: [0.14, 0.11, 0.09], memory_used_bytes: 151000000, memory_total_bytes: 536870912, app_memory_bytes: 96000000,
       disk_used_bytes: 2400000000, disk_total_bytes: 8000000000,
       storage: { available: true, total_bytes: 8000000000, used_bytes: 2400000000, free_bytes: 5600000000, usage_percent: 30, level: "normal", nonessential_writes_allowed: true, durable_writes_allowed: true },
       time_synchronized: true, conntrack_count: 1284, conntrack_max: 131072, conntrack_usage_percent: 1,

From a3c9df579bdd922485928a00ff82fbef86c5b428 Mon Sep 17 00:00:00 2001
From: Vladimir Perovic <vladimir.perovic@gmail.com>
Date: Sat, 22 Aug 2026 19:49:06 +0200
Subject: [PATCH 6/7] feat(dashboard): unified table design, snapshot deletion,
 1s boot sampling

- DHCP reservations and custom firewall rules adopt the connected
  devices table design (shared elegant-* classes, right-aligned action
  column) so buttons stop wrapping and row borders stay intact
- Public IP history: compact redesigned rows with old address struck
  through, scrollable after 12 entries
- WireGuard peer rows: readable type sizes for name, state, labels and
  transfer counters
- Snapshots gain DELETE /api/v1/snapshots/{id} with a confirmed Delete
  button next to Restore
- Boot activity samples every second inside the startup window instead
  of every 30 seconds
---
 internal/api/server.go                     | 22 +++++++++++++
 internal/config/store.go                   | 16 +++++++++
 internal/startup/timeline.go               |  2 +-
 web/src/ClassicDashboard.css               | 18 ++++------
 web/src/DashboardApp.tsx                   | 17 ++++++++++
 web/src/V015FinalTweaks.css                | 38 +++++++++++++++++-----
 web/src/components/DashboardSections.tsx   |  5 +--
 web/src/components/DeviceLeasesTable.css   | 22 ++++++-------
 web/src/components/FirewallRulesEditor.tsx | 31 ++++++++++--------
 web/src/components/GatewayQualityPanel.tsx |  6 ++--
 web/src/components/StaticLeasesEditor.tsx  | 23 +++++++------
 11 files changed, 140 insertions(+), 60 deletions(-)

diff --git a/internal/api/server.go b/internal/api/server.go
index 85ad92d5..bb621a71 100644
--- a/internal/api/server.go
+++ b/internal/api/server.go
@@ -401,6 +401,7 @@ func (s *Server) RegisterRoutes(mux *http.ServeMux) {
 	mux.HandleFunc("POST /api/v1/recovery/reconcile", gate(s.authMiddleware(s.handleRecoveryReconcile)))
 	mux.HandleFunc("GET /api/v1/snapshots", gate(s.authMiddleware(s.handleGetSnapshots)))
 	mux.HandleFunc("POST /api/v1/snapshots", gate(s.authMiddleware(s.handleCreateSnapshot)))
+	mux.HandleFunc("DELETE /api/v1/snapshots/{id}", gate(s.authMiddleware(s.handleDeleteSnapshot)))
 	mux.HandleFunc("POST /api/v1/snapshots/{id}/restore", gate(s.authMiddleware(s.handleRestoreSnapshot)))
 	mux.HandleFunc("POST /api/v1/import/pfsense/preview", gate(s.authMiddleware(s.handlePfSenseImportPreview)))
 	mux.HandleFunc("POST /api/v1/import/pfsense/{id}/apply", gate(s.authMiddleware(s.handlePfSenseImportApply)))
@@ -858,6 +859,27 @@ func (s *Server) handleCreateSnapshot(w http.ResponseWriter, r *http.Request) {
 	})
 }
 
+func (s *Server) handleDeleteSnapshot(w http.ResponseWriter, r *http.Request) {
+	snapID := r.PathValue("id")
+	log.Printf("[API] DELETE /api/v1/snapshots/%s from %s\n", snapID, r.RemoteAddr)
+
+	store := s.engine.GetStore()
+	if store == nil {
+		http.Error(w, "Snapshot store unavailable", http.StatusInternalServerError)
+		return
+	}
+
+	if err := store.DeleteSnapshot(snapID); err != nil {
+		w.Header().Set("Content-Type", "application/json")
+		w.WriteHeader(http.StatusNotFound)
+		json.NewEncoder(w).Encode(map[string]string{"error": err.Error()})
+		return
+	}
+
+	w.Header().Set("Content-Type", "application/json")
+	json.NewEncoder(w).Encode(map[string]interface{}{"success": true})
+}
+
 // managementContinuityErr is the single anti-lockout policy for every
 // configuration mutation: a candidate whose trusted_networks would exclude
 // the caller's source address is rejected before it can be applied. All
diff --git a/internal/config/store.go b/internal/config/store.go
index 4554b6c8..524a63f5 100644
--- a/internal/config/store.go
+++ b/internal/config/store.go
@@ -379,6 +379,22 @@ func (s *SQLiteStore) ListSnapshots() ([]Snapshot, error) {
 	return snapshots, nil
 }
 
+// DeleteSnapshot removes a single restore point. Restore points are signed and
+// immutable, so deletion is the only mutation besides pruning.
+func (s *SQLiteStore) DeleteSnapshot(id string) error {
+	s.mu.Lock()
+	defer s.mu.Unlock()
+
+	result, err := s.db.Exec("DELETE FROM snapshots WHERE id = ?", id)
+	if err != nil {
+		return fmt.Errorf("failed to delete snapshot: %w", err)
+	}
+	if deleted, _ := result.RowsAffected(); deleted == 0 {
+		return fmt.Errorf("snapshot not found: %s", id)
+	}
+	return nil
+}
+
 // GetSnapshot retrieves a specific snapshot by ID including its full config JSON.
 func (s *SQLiteStore) GetSnapshot(id string) (Snapshot, error) {
 	s.mu.RLock()
diff --git a/internal/startup/timeline.go b/internal/startup/timeline.go
index 2ff4a643..53f41e62 100644
--- a/internal/startup/timeline.go
+++ b/internal/startup/timeline.go
@@ -18,7 +18,7 @@ import (
 const (
 	Window         = 10 * time.Minute
 	CheckInterval  = 1 * time.Second
-	SampleInterval = 30 * time.Second
+	SampleInterval = 1 * time.Second
 	MaxBoots       = 5
 )
 
diff --git a/web/src/ClassicDashboard.css b/web/src/ClassicDashboard.css
index 9ea99e8a..ceec1c2e 100644
--- a/web/src/ClassicDashboard.css
+++ b/web/src/ClassicDashboard.css
@@ -1520,13 +1520,13 @@
   white-space: nowrap;
 }
 
-.wg-peer-identity strong { font-size: 13px; font-weight: 720; }
-.wg-peer-identity code { margin-top: 4px; color: var(--classic-muted); font-size: 8px; }
+.wg-peer-identity strong { font-size: 16px; font-weight: 720; }
+.wg-peer-identity code { margin-top: 4px; color: var(--classic-muted); font-size: 11px; }
 
 .wg-peer-state { display: grid; min-width: 0; gap: 5px; }
-.wg-peer-state > span { display: flex; align-items: center; gap: 7px; color: var(--classic-orange); font-size: 9px; font-weight: 730; white-space: nowrap; }
-.wg-peer-state > span i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 4px color-mix(in srgb, currentColor 10%, transparent); }
-.wg-peer-state small { overflow: hidden; color: var(--classic-muted); font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
+.wg-peer-state > span { display: flex; align-items: center; gap: 7px; color: var(--classic-orange); font-size: 13px; font-weight: 700; white-space: nowrap; }
+.wg-peer-state > span i { width: 8px; height: 8px; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 4px color-mix(in srgb, currentColor 10%, transparent); }
+.wg-peer-state small { overflow: hidden; color: var(--classic-muted); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
 .wg-peer-row.is-connected .wg-peer-state > span { color: var(--classic-green); }
 .wg-peer-row.is-disabled .wg-peer-state > span { color: var(--classic-muted); }
 
@@ -1539,8 +1539,8 @@
 }
 
 .wg-peer-details > div { min-width: 0; }
-.wg-peer-details dt { color: var(--classic-muted); font-size: 7px; font-weight: 750; letter-spacing: .045em; text-transform: uppercase; }
-.wg-peer-details dd { display: flex; min-width: 0; gap: 8px; margin: 5px 0 0; overflow: hidden; color: color-mix(in srgb, var(--classic-text) 85%, var(--classic-muted)); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 9px; font-variant-numeric: tabular-nums; text-overflow: ellipsis; white-space: nowrap; }
+.wg-peer-details dt { color: var(--classic-muted); font-size: 10px; font-weight: 750; letter-spacing: .045em; text-transform: uppercase; }
+.wg-peer-details dd { display: flex; min-width: 0; gap: 8px; margin: 5px 0 0; overflow: hidden; color: color-mix(in srgb, var(--classic-text) 85%, var(--classic-muted)); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; font-variant-numeric: tabular-nums; text-overflow: ellipsis; white-space: nowrap; }
 .wg-peer-details dd span { white-space: nowrap; }
 .wg-peer-details dd .is-rx { color: var(--classic-green); }
 
@@ -3235,10 +3235,6 @@
 
 /* DHCP reservations — search, veca slova, kompaktnija tabela */
 .static-lease-search{margin:.9rem 0 .3rem;max-width:360px}
-.static-leases table{font-size:.92rem}
-.static-leases thead th{padding:.55rem .9rem;font-size:.68rem}
-.static-leases tbody td{padding:.38rem .9rem;overflow-wrap:anywhere}
-.static-leases tbody td code{font-size:.85rem;white-space:nowrap}
 .static-leases .empty-state{padding:1rem}
 @media(max-width:640px){.static-lease-search{max-width:none}}
 
diff --git a/web/src/DashboardApp.tsx b/web/src/DashboardApp.tsx
index c765ebcc..c7489ae3 100644
--- a/web/src/DashboardApp.tsx
+++ b/web/src/DashboardApp.tsx
@@ -533,6 +533,22 @@ function Dashboard() {
     }
   };
 
+  const deleteSnapshot = async (id: string) => {
+    if (!window.confirm(`Delete snapshot ${id}? This restore point cannot be recovered.`)) return;
+    setBusy(true);
+    try {
+      const response = await apiFetch(`/api/v1/snapshots/${encodeURIComponent(id)}`, { method: "DELETE" });
+      const body = await response.json().catch(() => ({}));
+      if (!response.ok) throw new Error(body.error || `Delete failed (${response.status})`);
+      setNotice("Snapshot deleted.");
+      await load();
+    } catch (deleteError) {
+      setError(deleteError instanceof Error ? deleteError.message : "Delete failed");
+    } finally {
+      setBusy(false);
+    }
+  };
+
   const restoreSnapshot = async (id: string) => {
     if (!window.confirm("Restore this snapshot? A current undo snapshot will be retained.")) return;
     setBusy(true);
@@ -657,6 +673,7 @@ function Dashboard() {
             leases={leases}
             load={load}
             restoreSnapshot={restoreSnapshot}
+            deleteSnapshot={deleteSnapshot}
             setError={setError}
             snapshots={snapshots}
             submitCloudflare={submitCloudflare}
diff --git a/web/src/V015FinalTweaks.css b/web/src/V015FinalTweaks.css
index 8b1ca026..791457a9 100644
--- a/web/src/V015FinalTweaks.css
+++ b/web/src/V015FinalTweaks.css
@@ -54,30 +54,52 @@
   font-size: 12px;
 }
 
-.gateway-ip-events {
-  display: grid;
-  gap: 0;
+.gateway-ip-scroll {
+  max-height: calc(12 * 46px);
+  overflow-y: auto;
   margin-top: 8px;
   border-top: 1px solid var(--classic-border);
 }
 
 .gateway-ip-event {
   display: grid;
-  grid-template-columns: minmax(120px, auto) 20px minmax(120px, auto) 1fr;
+  grid-template-columns: minmax(130px, auto) 24px minmax(130px, auto) 1fr;
   align-items: center;
-  gap: 10px;
+  gap: 12px;
   min-height: 46px;
-  border-bottom: 1px solid var(--classic-border);
-  font-size: 12px;
+  padding: 0 14px;
+  border-bottom: 1px solid color-mix(in srgb, var(--classic-border) 70%, transparent);
+  font-size: 13px;
 }
 
+.gateway-ip-event:last-child { border-bottom: 0; }
+
 .gateway-ip-event code {
-  font-size: 11.5px;
+  font-size: 13px;
+  font-variant-numeric: tabular-nums;
+}
+
+.gateway-ip-event code.is-old {
+  color: var(--classic-muted);
+  text-decoration: line-through;
+  text-decoration-color: color-mix(in srgb, var(--classic-muted) 55%, transparent);
+}
+
+.gateway-ip-event code.is-new {
+  font-weight: 700;
+  color: var(--classic-text);
+}
+
+.gateway-ip-event span[aria-hidden] {
+  justify-self: center;
+  color: var(--classic-blue);
 }
 
 .gateway-ip-event time {
   justify-self: end;
   color: var(--classic-muted);
+  font-size: 12px;
+  white-space: nowrap;
 }
 
 .elegant-device-table tr.is-offline td {
diff --git a/web/src/components/DashboardSections.tsx b/web/src/components/DashboardSections.tsx
index 2870a8c6..46497b95 100644
--- a/web/src/components/DashboardSections.tsx
+++ b/web/src/components/DashboardSections.tsx
@@ -53,6 +53,7 @@ type Props = {
   speedTesting: boolean;
   createSnapshot: () => Promise<void>;
   restoreSnapshot: (id: string) => Promise<void>;
+  deleteSnapshot: (id: string) => Promise<void>;
   setError: (message: string) => void;
   onNavigate: (id: SectionID) => void;
 };
@@ -324,7 +325,7 @@ function StaticDNSRecordsEditor({ records, disabled }: { records: DNSRecordRow[]
 export default function DashboardSections({
   active, config, gatewaySummary, gatewaySettings, runtime, leases, snapshots, busy,
   load, applyConfig, applyGatewayMonitoring, submitNetwork, submitCloudflare, submitSquid,
-  submitWiFi, submitQoS, submitWireGuardClient, runSpeedTest, toggleQoS, toggleWAN, toggleDHCP, toggleCloudflare, toggleSquid, toggleWiFi, toggleWGClient, speedTest, speedTesting, createSnapshot, restoreSnapshot, setError, onNavigate }: Props) {
+  submitWiFi, submitQoS, submitWireGuardClient, runSpeedTest, toggleQoS, toggleWAN, toggleDHCP, toggleCloudflare, toggleSquid, toggleWiFi, toggleWGClient, speedTest, speedTesting, createSnapshot, restoreSnapshot, deleteSnapshot, setError, onNavigate }: Props) {
   const [staticPrefill, setStaticPrefill] = useState<{ mac?: string; ip?: string; hostname?: string } | null>(null);
   const [ddnsTab, setDdnsTab] = useState(config.cloudflare.ddns_provider || "noip");
   // The status card reports the provider the router is actually running, which
@@ -764,7 +765,7 @@ export default function DashboardSections({
 {active === "recovery" && <section className="dashboard-section" id="recovery">
   <div className="dashboard-section-heading has-facts"><div className="subpage-hero-head"><div><p className="eyebrow">Recoverability</p><h2>Snapshots and local console</h2><p className="section-copy">Create verified configuration restore points and keep destructive recovery operations on the physical console.</p></div><button className="button primary" disabled={busy} onClick={() => void createSnapshot()} type="button">Create snapshot</button></div><dl className="subpage-hero-facts"><div><dt>Snapshots</dt><dd>{snapshots.length}</dd><small>verified restore points</small></div><div><dt>Current revision</dt><dd>{config.revision}</dd><small>active configuration</small></div><div><dt>Network recovery</dt><dd>Console only</dd><small>no remote endpoint</small></div><div><dt>Rollback</dt><dd>Automatic</dd><small>critical changes protected</small></div></dl></div>
   <div className="dashboard-callout"><strong>Network recovery is intentionally unavailable.</strong><p>Password/TOTP reset, LAN repair, snapshot recovery, and factory reset use <code>router-recovery</code> on the local console.</p></div>
-  <article className="card table-card"><div className="card-title-row"><div><h3>Configuration snapshots</h3><p>Signed local restore points retained by the appliance.</p></div><span className="quiet-meta">{snapshots.length} available</span></div><div className="table-scroll"><table><thead><tr><th>Created</th><th>Revision</th><th>Checksum</th><th>Action</th></tr></thead><tbody>{snapshots.length === 0 ? <tr><td className="empty-state" colSpan={4}>No snapshots yet.</td></tr> : snapshots.map((snapshot) => <tr key={snapshot.id}><td>{new Date(snapshot.created_at).toLocaleString()}</td><td>{snapshot.revision}</td><td><code>{snapshot.checksum.slice(0, 16)}…</code></td><td><button className="button secondary small" disabled={busy} onClick={() => void restoreSnapshot(snapshot.id)} type="button">Restore</button></td></tr>)}</tbody></table></div></article>
+  <article className="card table-card"><div className="card-title-row"><div><h3>Configuration snapshots</h3><p>Signed local restore points retained by the appliance.</p></div><span className="quiet-meta">{snapshots.length} available</span></div><div className="table-scroll"><table><thead><tr><th>Created</th><th>Revision</th><th>Checksum</th><th>Action</th></tr></thead><tbody>{snapshots.length === 0 ? <tr><td className="empty-state" colSpan={4}>No snapshots yet.</td></tr> : snapshots.map((snapshot) => <tr key={snapshot.id}><td>{new Date(snapshot.created_at).toLocaleString()}</td><td>{snapshot.revision}</td><td><code>{snapshot.checksum.slice(0, 16)}…</code></td><td className="device-row-actions"><button className="button secondary small" disabled={busy} onClick={() => void restoreSnapshot(snapshot.id)} type="button">Restore</button><button className="button secondary small danger" disabled={busy} onClick={() => void deleteSnapshot(snapshot.id)} type="button">Delete</button></td></tr>)}</tbody></table></div></article>
 </section>}
 
 {active === "logs" && <AuditLogPanel />}
diff --git a/web/src/components/DeviceLeasesTable.css b/web/src/components/DeviceLeasesTable.css
index eaa9d727..c3149fbd 100644
--- a/web/src/components/DeviceLeasesTable.css
+++ b/web/src/components/DeviceLeasesTable.css
@@ -1,30 +1,30 @@
-.dashboard-app .modern-device-section .elegant-table-container {
+.dashboard-app .elegant-table-container {
   overflow-x: auto;
 }
 
-.dashboard-app .modern-device-section .elegant-device-table {
+.dashboard-app .elegant-device-table {
   min-width: 640px;
 }
 
-.dashboard-app .modern-device-section .elegant-col-expires {
+.dashboard-app .elegant-col-expires {
   width: 170px;
 }
 
-.dashboard-app .modern-device-section .elegant-col-data {
+.dashboard-app .elegant-col-data {
   width: 110px;
 }
 
-.dashboard-app .modern-device-section .elegant-col-actions {
+.dashboard-app .elegant-col-actions {
   width: 220px;
 }
 
-.dashboard-app .modern-device-section .elegant-device-table th,
-.dashboard-app .modern-device-section .elegant-device-table td {
+.dashboard-app .elegant-device-table th,
+.dashboard-app .elegant-device-table td {
   padding-left: 18px;
   padding-right: 18px;
 }
 
-.dashboard-app .modern-device-section .device-row-actions {
+.dashboard-app .device-row-actions {
   display: flex;
   align-items: center;
   justify-content: flex-end;
@@ -32,15 +32,15 @@
   flex-wrap: nowrap;
 }
 
-.dashboard-app .modern-device-section .device-row-actions > * {
+.dashboard-app .device-row-actions > * {
   flex: 0 0 auto;
 }
 
-.dashboard-app .modern-device-section .elegant-cell-name {
+.dashboard-app .elegant-cell-name {
   overflow-wrap: anywhere;
 }
 
-.dashboard-app .modern-device-section .elegant-cell-data {
+.dashboard-app .elegant-cell-data {
   color: var(--classic-muted);
   font-variant-numeric: tabular-nums;
   white-space: nowrap;
diff --git a/web/src/components/FirewallRulesEditor.tsx b/web/src/components/FirewallRulesEditor.tsx
index a675fb4b..9f710eaf 100644
--- a/web/src/components/FirewallRulesEditor.tsx
+++ b/web/src/components/FirewallRulesEditor.tsx
@@ -153,10 +153,11 @@ export default function FirewallRulesEditor({ config, busy, applyConfig }: Props
         <span className="quiet-meta">{rules.filter((rule) => rule.enabled).length} active</span>
       </div>
 
-      <div className="table-scroll">
-        <table>
+      <div className="elegant-table-container">
+        <table className="elegant-device-table">
+          <colgroup><col /><col className="elegant-col-expires" /><col className="elegant-col-data" /><col /><col className="elegant-col-data" /><col className="elegant-col-actions" /></colgroup>
           <thead>
-            <tr><th>Name</th><th>Direction</th><th>Action</th><th>Match</th><th>State</th><th>Actions</th></tr>
+            <tr><th>Name</th><th>Direction</th><th>Action</th><th>Match</th><th>State</th><th className="elegant-th-actions">Actions</th></tr>
           </thead>
           <tbody>
             {rules.length === 0 ? (
@@ -164,7 +165,7 @@ export default function FirewallRulesEditor({ config, busy, applyConfig }: Props
             ) : (
               rules.map((rule) => (
                 <tr className={rule.enabled ? "" : "is-paused"} key={rule.id}>
-                  <td>{rule.name}</td>
+                  <td className="elegant-cell-name">{rule.name}</td>
                   <td>{rule.direction === "forward" ? "Through router" : "To router"}</td>
                   <td className={rule.action === "deny" ? "is-bad" : "is-good"}>{rule.action}</td>
                   <td>
@@ -175,16 +176,18 @@ export default function FirewallRulesEditor({ config, busy, applyConfig }: Props
                     </code>
                   </td>
                   <td>{rule.enabled ? "Enabled" : "Paused"}</td>
-                  <td className="firewall-rule-actions">
-                    <button className="button secondary small" disabled={busy} onClick={() => (editingId === rule.id ? cancelEdit() : startEdit(rule))} type="button">
-                      {editingId === rule.id ? "Cancel" : "Edit"}
-                    </button>
-                    <button className="button secondary small" disabled={busy} onClick={() => toggle(rule.id)} type="button">
-                      {rule.enabled ? "Pause" : "Enable"}
-                    </button>
-                    <button className="button secondary small" disabled={busy} onClick={() => remove(rule.id)} type="button">
-                      Remove
-                    </button>
+                  <td className="elegant-cell-actions">
+                    <div className="device-row-actions">
+                      <button className="button secondary small" disabled={busy} onClick={() => (editingId === rule.id ? cancelEdit() : startEdit(rule))} type="button">
+                        {editingId === rule.id ? "Cancel" : "Edit"}
+                      </button>
+                      <button className="button secondary small" disabled={busy} onClick={() => toggle(rule.id)} type="button">
+                        {rule.enabled ? "Pause" : "Enable"}
+                      </button>
+                      <button className="button secondary small danger" disabled={busy} onClick={() => remove(rule.id)} type="button">
+                        Remove
+                      </button>
+                    </div>
                   </td>
                 </tr>
               ))
diff --git a/web/src/components/GatewayQualityPanel.tsx b/web/src/components/GatewayQualityPanel.tsx
index c70017c7..17678a57 100644
--- a/web/src/components/GatewayQualityPanel.tsx
+++ b/web/src/components/GatewayQualityPanel.tsx
@@ -237,10 +237,10 @@ export default function GatewayQualityPanel({ summary, settings, busy, onApply,
     </article>
 
     <article className="card gateway-ip-history">
-      <div className="card-title-row"><div><h3>Public IP history</h3><p>Only address changes are retained locally; no browsing destinations or traffic metadata are recorded.</p></div></div>
+      <div className="card-title-row"><div><h3>Public IP history</h3><p>Only address changes are retained locally; no browsing destinations or traffic metadata are recorded.</p></div>{insights?.public_ip_changes?.length ? <span className="quiet-meta">{insights.public_ip_changes.length} change{insights.public_ip_changes.length === 1 ? "" : "s"}</span> : null}</div>
       {insights?.public_ip_changes?.length ? (
-        <div className="gateway-ip-events">
-          {insights.public_ip_changes.map((change) => <div className="gateway-ip-event" key={`${change.timestamp}-${change.new_ip}`}><code>{change.old_ip}</code><span aria-hidden="true">→</span><code>{change.new_ip}</code><time dateTime={change.timestamp}>{new Date(change.timestamp).toLocaleString([], { month: "short", day: "numeric", hour: "2-digit", minute: "2-digit" })}</time></div>)}
+        <div className="gateway-ip-scroll">
+          {insights.public_ip_changes.map((change) => <div className="gateway-ip-event" key={`${change.timestamp}-${change.new_ip}`}><code className="is-old">{change.old_ip}</code><span aria-hidden="true">→</span><code className="is-new">{change.new_ip}</code><time dateTime={change.timestamp}>{new Date(change.timestamp).toLocaleString([], { month: "short", day: "numeric", hour: "2-digit", minute: "2-digit" })}</time></div>)}
         </div>
       ) : <p className="gateway-empty-copy">No public-IP change recorded yet.</p>}
     </article>
diff --git a/web/src/components/StaticLeasesEditor.tsx b/web/src/components/StaticLeasesEditor.tsx
index 4f8b04af..2bb5531e 100644
--- a/web/src/components/StaticLeasesEditor.tsx
+++ b/web/src/components/StaticLeasesEditor.tsx
@@ -164,10 +164,11 @@ export default function StaticLeasesEditor({ config, busy, applyConfig, prefill,
         />
       </div>
 
-      <div className="table-scroll">
-        <table>
+      <div className="elegant-table-container">
+        <table className="elegant-device-table">
+          <colgroup><col className="elegant-col-num" /><col className="elegant-col-mac" /><col className="elegant-col-ip" /><col className="elegant-col-actions" /></colgroup>
           <thead>
-            <tr><th>Device</th><th>MAC</th><th>Reserved address</th><th>Action</th></tr>
+            <tr><th>Device</th><th>MAC</th><th>Reserved address</th><th className="elegant-th-actions">Action</th></tr>
           </thead>
           <tbody>
             {filteredLeases.length === 0 ? (
@@ -175,13 +176,15 @@ export default function StaticLeasesEditor({ config, busy, applyConfig, prefill,
             ) : (
               filteredLeases.map((lease) => (
                 <tr key={lease.id}>
-                  <td>{lease.hostname || "Unnamed device"}</td>
-                  <td><code>{lease.mac}</code></td>
-                  <td><code>{lease.ip_address}</code></td>
-                  <td className="static-actions">
-                    <button className="button secondary small" disabled={busy} onClick={() => startEdit(lease)} type="button">Edit</button>
-                    <button className="button secondary small" disabled={busy} onClick={() => void wakeOnLan(lease.mac)} title="Send a Wake-on-LAN magic packet" type="button">Wake</button>
-                    <button className="button secondary small danger" disabled={busy} onClick={() => remove(lease.id)} type="button">Remove</button>
+                  <td className="elegant-cell-name">{lease.hostname || "Unnamed device"}</td>
+                  <td className="elegant-cell-mac"><code>{lease.mac}</code></td>
+                  <td className="elegant-cell-ip"><code>{lease.ip_address}</code></td>
+                  <td className="elegant-cell-actions">
+                    <div className="device-row-actions">
+                      <button className="button secondary small" disabled={busy} onClick={() => startEdit(lease)} type="button">Edit</button>
+                      <button className="button secondary small" disabled={busy} onClick={() => void wakeOnLan(lease.mac)} title="Send a Wake-on-LAN magic packet" type="button">Wake</button>
+                      <button className="button secondary small danger" disabled={busy} onClick={() => remove(lease.id)} type="button">Remove</button>
+                    </div>
                   </td>
                 </tr>
               ))

From 43f6d0827e8f9aebc3ec48caa62e43675cd27bae Mon Sep 17 00:00:00 2001
From: Vladimir Perovic <vladimir.perovic@gmail.com>
Date: Sat, 22 Aug 2026 20:05:54 +0200
Subject: [PATCH 7/7] feat(dashboard): service recovery action tiles and IP
 history polish

Service recovery buttons become icon+hint tiles in a responsive grid
with hover lift and per-action busy state instead of bare unpadded
buttons. Public IP history drops the doubled divider, gains side
padding and a subtle hover row highlight.
---
 web/src/V015FinalTweaks.css                | 66 +++++++++++++++++++---
 web/src/components/GatewayQualityPanel.tsx | 17 ++++--
 2 files changed, 71 insertions(+), 12 deletions(-)

diff --git a/web/src/V015FinalTweaks.css b/web/src/V015FinalTweaks.css
index 791457a9..bbbf5c75 100644
--- a/web/src/V015FinalTweaks.css
+++ b/web/src/V015FinalTweaks.css
@@ -40,13 +40,62 @@
   letter-spacing: .01em;
 }
 
-.gateway-service-actions {
+.gateway-service-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
+  gap: 12px;
+  padding: 16px 20px 20px;
+}
+
+.gateway-action-tile {
   display: flex;
-  flex-wrap: wrap;
-  gap: 10px;
-  margin-top: 14px;
+  align-items: center;
+  gap: 13px;
+  padding: 14px 16px;
+  border: 1px solid var(--classic-border);
+  border-radius: 14px;
+  background: color-mix(in srgb, var(--classic-soft) 42%, var(--classic-panel));
+  color: var(--classic-text);
+  font: inherit;
+  text-align: left;
+  cursor: pointer;
+  transition: border-color 150ms ease, background 150ms ease, transform 150ms ease, box-shadow 150ms ease;
+}
+
+.gateway-action-tile:hover:not(:disabled) {
+  border-color: color-mix(in srgb, var(--classic-blue) 45%, var(--classic-border));
+  background: color-mix(in srgb, var(--classic-blue) 6%, var(--classic-panel));
+  box-shadow: 0 6px 18px color-mix(in srgb, var(--classic-blue) 12%, transparent);
+  transform: translateY(-1px);
 }
 
+.gateway-action-tile:disabled {
+  opacity: .55;
+  cursor: default;
+}
+
+.gateway-action-tile:focus-visible {
+  outline: 2px solid var(--classic-blue);
+  outline-offset: 2px;
+}
+
+.gateway-action-icon {
+  display: grid;
+  width: 42px;
+  height: 42px;
+  flex: 0 0 auto;
+  place-items: center;
+  border-radius: 12px;
+  background: color-mix(in srgb, var(--classic-blue) 10%, var(--classic-panel));
+  color: var(--classic-blue);
+}
+
+.gateway-action-icon svg { width: 20px; height: 20px; }
+
+.gateway-action-text { display: grid; min-width: 0; gap: 3px; }
+.gateway-action-text strong { font-size: 13.5px; font-weight: 720; letter-spacing: -.01em; }
+.gateway-action-text small { color: var(--classic-muted); font-size: 11.5px; line-height: 1.35; }
+
 .gateway-service-notice,
 .gateway-empty-copy {
   margin: 12px 0 0;
@@ -57,8 +106,9 @@
 .gateway-ip-scroll {
   max-height: calc(12 * 46px);
   overflow-y: auto;
-  margin-top: 8px;
-  border-top: 1px solid var(--classic-border);
+  margin-top: 0;
+  border-top: 0;
+  padding: 6px 10px 12px;
 }
 
 .gateway-ip-event {
@@ -68,11 +118,11 @@
   gap: 12px;
   min-height: 46px;
   padding: 0 14px;
-  border-bottom: 1px solid color-mix(in srgb, var(--classic-border) 70%, transparent);
+  border-radius: 10px;
   font-size: 13px;
 }
 
-.gateway-ip-event:last-child { border-bottom: 0; }
+.gateway-ip-event:hover { background: color-mix(in srgb, var(--classic-blue) 4%, transparent); }
 
 .gateway-ip-event code {
   font-size: 13px;
diff --git a/web/src/components/GatewayQualityPanel.tsx b/web/src/components/GatewayQualityPanel.tsx
index 17678a57..28ce7599 100644
--- a/web/src/components/GatewayQualityPanel.tsx
+++ b/web/src/components/GatewayQualityPanel.tsx
@@ -228,10 +228,19 @@ export default function GatewayQualityPanel({ summary, settings, busy, onApply,
 
     <article className="card gateway-service-controls">
       <div className="card-title-row"><div><h3>Service recovery</h3><p>Fixed, allowlisted recovery actions through router-applyd. They do not expose arbitrary service or shell execution.</p></div></div>
-      <div className="gateway-service-actions">
-        <button className="button secondary" disabled={busy || serviceAction !== null} onClick={() => void runServiceAction("wan-reconnect")} type="button">{serviceAction === "wan-reconnect" ? "Reconnecting…" : "Reconnect WAN"}</button>
-        <button className="button secondary" disabled={busy || serviceAction !== null} onClick={() => void runServiceAction("dns-dhcp-restart")} type="button">{serviceAction === "dns-dhcp-restart" ? "Restarting…" : "Restart DNS & DHCP"}</button>
-        <button className="button secondary" disabled={busy || serviceAction !== null} onClick={() => void runServiceAction("wireguard-restart")} type="button">{serviceAction === "wireguard-restart" ? "Restarting…" : "Restart WireGuard"}</button>
+      <div className="gateway-service-grid">
+        <button className="gateway-action-tile" disabled={busy || serviceAction !== null} onClick={() => void runServiceAction("wan-reconnect")} type="button">
+          <span className="gateway-action-icon" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><path d="M23 4v6h-6M1 20v-6h6" /><path d="M3.51 9a9 9 0 0 1 14.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0 0 20.49 15" /></svg></span>
+          <span className="gateway-action-text"><strong>{serviceAction === "wan-reconnect" ? "Reconnecting…" : "Reconnect WAN"}</strong><small>Renegotiate the PPPoE session on ppp0</small></span>
+        </button>
+        <button className="gateway-action-tile" disabled={busy || serviceAction !== null} onClick={() => void runServiceAction("dns-dhcp-restart")} type="button">
+          <span className="gateway-action-icon" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><rect x="2" y="4" width="20" height="7" rx="2" /><rect x="2" y="13" width="20" height="7" rx="2" /><path d="M6 7.5h.01M6 16.5h.01" /></svg></span>
+          <span className="gateway-action-text"><strong>{serviceAction === "dns-dhcp-restart" ? "Restarting…" : "Restart DNS & DHCP"}</strong><small>Reload dnsmasq; leases are kept</small></span>
+        </button>
+        <button className="gateway-action-tile" disabled={busy || serviceAction !== null} onClick={() => void runServiceAction("wireguard-restart")} type="button">
+          <span className="gateway-action-icon" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z" /></svg></span>
+          <span className="gateway-action-text"><strong>{serviceAction === "wireguard-restart" ? "Restarting…" : "Restart WireGuard"}</strong><small>Bring wg0 down and re-key the tunnel</small></span>
+        </button>
       </div>
       {serviceNotice && <p className="gateway-service-notice" role="status">{serviceNotice}</p>}
     </article>