Add the appliance web UI look, interface names, MCP and REST API, local zone

Web UI: dark/light themes (appliance layout, sidebar, switch checkboxes),
theme preference on the Advanced page, Changes page with the pending diff.

Interface names: router.interfaces.<name>.mac, lans.<l>.deviceName and
pppoe.vlanName; a rename is staged for the next reboot by router-apply.

Remote access: an MCP server (POST /mcp) and an OpenAPI REST API
(/api/v1, /api/openapi.json) with the same tokens, scopes, limits and audit
log; tools to read status, settings, leases, logs (get_logs), and to edit
and check the saved settings (never applied). Tokens on the API access page.

Firewall: a reserved `local` zone (the router itself) as the destination of
rules, so the web UI or SSH can be allowed from the WAN.

PLAN.md lists what is still left.

Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01AeFqV9dZrK6nipHkPfyM4F

pkgs/router-webui/templates/layout.html

@@ -1,5 +1,5 @@
 <!doctype html>
-<html lang="en">
+<html lang="en"{{with .Theme}} data-theme="{{.}}"{{end}}>
 <head>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
@@ -7,28 +7,29 @@
 <title>{{.Title}} · router</title>
 <link rel="stylesheet" href="/static/style.css">
 </head>
-<body>
+<body{{if not .LoggedIn}} class="bare"{{end}}>
 <header>
   <strong>router</strong>
   {{if .LoggedIn}}
   <nav>
-    <a href="/">Overview</a>
-    <details name="menu"><summary>Network</summary><div>
-      <a href="/network">Interfaces</a>
-      <a href="/dhcp">DHCP</a>
-      <a href="/dns">DNS</a>
-      <a href="/wireguard">WireGuard</a>
-      <a href="/firewall">Firewall</a>
-    </div></details>
-    <details name="menu"><summary>Services</summary><div>
-      <a href="/ddns">Dynamic DNS</a>
-      <a href="/dnsproviders">DNS providers</a>
-      <a href="/certificate">Certificate</a>
-    </div></details>
-    <details name="menu"><summary>System</summary><div>
-      <a href="/update">Update</a>
-      <a href="/advanced">Advanced</a>
-    </div></details>
+    <a href="/"{{if eq .Title "Overview"}} aria-current="page"{{end}}>Overview</a>
+    <div class="group"><span>Network</span>
+      <a href="/network"{{if eq .Title "Network"}} aria-current="page"{{end}}>Interfaces</a>
+      <a href="/dhcp"{{if eq .Title "DHCP"}} aria-current="page"{{end}}>DHCP</a>
+      <a href="/dns"{{if eq .Title "DNS"}} aria-current="page"{{end}}>DNS</a>
+      <a href="/wireguard"{{if eq .Title "WireGuard"}} aria-current="page"{{end}}>WireGuard</a>
+      <a href="/firewall"{{if eq .Title "Firewall"}} aria-current="page"{{end}}>Firewall</a>
+    </div>
+    <div class="group"><span>Services</span>
+      <a href="/ddns"{{if eq .Title "Dynamic DNS"}} aria-current="page"{{end}}>Dynamic DNS</a>
+      <a href="/dnsproviders"{{if eq .Title "DNS providers"}} aria-current="page"{{end}}>DNS providers</a>
+      <a href="/certificate"{{if eq .Title "Certificate"}} aria-current="page"{{end}}>Certificate</a>
+    </div>
+    <div class="group"><span>System</span>
+      <a href="/update"{{if eq .Title "Update"}} aria-current="page"{{end}}>Update</a>
+      <a href="/tokens"{{if eq .Title "API access"}} aria-current="page"{{end}}>API access</a>
+      <a href="/advanced"{{if eq .Title "Advanced"}} aria-current="page"{{end}}>Advanced</a>
+    </div>
     <form method="post" action="/logout"><input type="hidden" name="csrf" value="{{.CSRF}}"><button class="link">Log out</button></form>
   </nav>
   {{end}}