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/tokens.html

@@ -0,0 +1,63 @@
+{{define "content"}}
+{{with .Data}}
+<section>
+<p>An assistant or a script can read this router's state and logs and edit its settings through an
+   <a href="https://modelcontextprotocol.io">MCP</a> endpoint at <code>{{.URL}}</code> and, with the same features, a
+   REST API described by <a href="/api/openapi.json">OpenAPI</a> (<code>/api/v1/…</code>). It needs a token, sent as
+   <code>Authorization: Bearer …</code>. A <strong>read</strong> token reads state and settings; a <strong>change</strong>
+   token can also edit the settings. Edits are saved but never applied: you review them under
+   <a href="/changes">Changes</a> and apply them yourself. Secrets are never sent, and every call is logged below.</p>
+</section>
+
+{{if .Secret}}
+<section class="pending">
+  <p>Token for <strong>{{.Name}}</strong>:</p>
+  <p><code>{{.Secret}}</code></p>
+  <p class="hint">For Claude Code: <code>claude mcp add --transport http router {{.URL}} --header "Authorization: Bearer {{.Secret}}"</code>.
+     The web UI's certificate is self-signed unless you set up a <a href="/certificate">certificate</a>: the client must trust it.</p>
+</section>
+{{end}}
+
+<fieldset>
+  <legend>Tokens</legend>
+  {{if .Tokens}}
+  <div class="scroll">
+  <table>
+    <tr><th>Name</th><th>Access</th><th>Created</th><th>Last used</th><th></th></tr>
+    {{range .Tokens}}<tr><td>{{.Name}}</td><td>{{.Scope}}</td><td>{{.Created.Format "2006-01-02"}}</td>
+      <td>{{if .LastUsed.IsZero}}<span class="hint">never</span>{{else}}{{.LastUsed.Format "2006-01-02 15:04"}}{{end}}</td>
+      <td><form method="post" action="/tokens/revoke" data-confirm="Revoke this token?"><input type="hidden" name="csrf" value="{{$.CSRF}}"><input type="hidden" name="id" value="{{.ID}}"><button class="link">revoke</button></form></td></tr>{{end}}
+  </table>
+  </div>
+  {{else}}<p class="hint">No tokens yet.</p>{{end}}
+</fieldset>
+
+<form method="post" action="/tokens">
+  <input type="hidden" name="csrf" value="{{$.CSRF}}">
+  <fieldset>
+    <legend>New token</legend>
+    <label>Name <input name="name" size="20" placeholder="claude on my laptop" required></label>
+    <label>Access
+      <select name="scope">
+        <option value="read">read: state and settings</option>
+        <option value="change">change: also edit the settings</option>
+      </select>
+    </label>
+    <button>Create token</button>
+  </fieldset>
+</form>
+
+<fieldset>
+  <legend>Recent calls</legend>
+  {{if .Audit}}
+  <div class="scroll">
+  <table>
+    <tr><th>Time</th><th>Token</th><th>Tool</th><th>Arguments</th><th>Result</th></tr>
+    {{range .Audit}}<tr><td>{{.Time.Format "2006-01-02 15:04:05"}}</td><td>{{.Token}}</td><td><code>{{.Tool}}</code></td>
+      <td><code>{{.Args}}</code></td><td>{{if .Error}}<span class="bad">{{.Error}}</span>{{else}}ok{{end}}</td></tr>{{end}}
+  </table>
+  </div>
+  {{else}}<p class="hint">Nothing yet.</p>{{end}}
+</fieldset>
+{{end}}
+{{end}}