fix: escape dashboard DB-sourced values + validate key names (#114) (#121)

The dashboard built table rows via template-literal innerHTML, interpolating
DB-sourced strings (key names, usage rows) with no HTML escaping, and an
onclick="revokeKeyUI('${k.name}')" sink a single quote could break out of. Key
names were unvalidated at creation. Admin-gated (self-XSS today), but a real
unescaped-sink gap that becomes cross-user if key creation is ever delegated.

- dashboard.html: added escapeHtml() and applied it to every DB/string-sourced
  interpolation in refreshUsage and refreshKeys (key_name, name, keyPreview,
  created_at, last_request, model). Replaced the inline-onclick revoke button with
  a data-revoke attribute + addEventListener, so a name can never break out into an
  event-handler string. (model is attacker-pickable via the request body, so its
  escaping is the load-bearing one.)
- server.mjs: POST /api/keys now rejects names not matching /^[A-Za-z0-9 ._-]{1,64}$/
  before createKey() — defense-in-depth so a <script>/quote name can never reach the
  DB. Creation-only; existing keys unaffected; the default key-${Date.now()} passes.

Noted (out of scope, optional follow-up): the status/plan summary cards render
trusted server/Anthropic-upstream values unescaped — non-user-controlled, so not part
of this stored-XSS fix.

ALIGNMENT.md: the server.mjs change is proxy-policy input validation with no Anthropic
operation forwarded, so a cli.js citation is N/A under Rule 2. No blacklisted tokens or
port literals introduced; alignment.yml passes.

Independent fresh-context reviewer (opus): APPROVE WITH MINOR (Iron Rule 10) — verified
escapeHtml correctness, full sink coverage (incl. the attacker-pickable model field and
the data-revoke attribute), revoke round-trip via getAttribute, the anchored/bounded
key-name regex running before createKey, and that createKey has no other unvalidated
caller. Both minors non-blocking (trusted status-card escaping; this commit-body note).

Closes #114.

Co-authored-by: dtzp555 <dtzp555@gmail.com>
Co-authored-by: Claude Opus 4.8 <noreply@anthropic.com>

dashboard.html

@@ -132,6 +132,10 @@ function fmtChars(n) {
   return n > 1000 ? (n/1000).toFixed(0) + "K" : String(n);
 }
 
+function escapeHtml(s) {
+  return String(s ?? "").replace(/[&<>"']/g, c => ({ "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;", "'": "&#39;" }[c]));
+}
+
 function barColor(pct) {
   if (pct >= 80) return "bar-red";
   if (pct >= 50) return "bar-amber";
@@ -181,21 +185,21 @@ async function refreshUsage() {
     const tbody = document.querySelector("#key-usage-table tbody");
     tbody.innerHTML = (data.byKey || []).map(k => `
       <tr>
-        <td>${k.key_name}</td>
+        <td>${escapeHtml(k.key_name)}</td>
         <td>${k.requests}</td>
         <td>${k.successes}</td>
         <td>${k.errors}</td>
         <td>${fmtTime(k.avg_elapsed_ms)}</td>
-        <td class="mono">${k.last_request || '-'}</td>
+        <td class="mono">${escapeHtml(k.last_request || '-')}</td>
       </tr>
     `).join("") || '<tr><td colspan="6" style="color:#475569">No usage data yet</td></tr>';
 
     const rtbody = document.querySelector("#recent-table tbody");
     rtbody.innerHTML = (data.recent || []).slice(0, 20).map(r => `
       <tr>
-        <td class="mono">${r.created_at?.slice(11, 19) || '?'}</td>
-        <td>${r.key_name}</td>
-        <td>${r.model}</td>
+        <td class="mono">${escapeHtml(r.created_at?.slice(11, 19) || '?')}</td>
+        <td>${escapeHtml(r.key_name)}</td>
+        <td>${escapeHtml(r.model)}</td>
         <td>${fmtChars(r.prompt_chars)}</td>
         <td>${fmtChars(r.response_chars)}</td>
         <td>${fmtTime(r.elapsed_ms)}</td>
@@ -216,13 +220,16 @@ async function refreshKeys() {
     const tbody = document.querySelector("#keys-table tbody");
     tbody.innerHTML = (data.keys || []).map(k => `
       <tr>
-        <td>${k.name}</td>
-        <td class="mono">${k.keyPreview}</td>
-        <td class="mono">${k.created_at}</td>
+        <td>${escapeHtml(k.name)}</td>
+        <td class="mono">${escapeHtml(k.keyPreview)}</td>
+        <td class="mono">${escapeHtml(k.created_at)}</td>
         <td><span class="tag ${k.revoked ? 'tag-err' : 'tag-ok'}">${k.revoked ? 'revoked' : 'active'}</span></td>
-        <td>${k.revoked ? '' : `<button class="btn btn-sm btn-danger" onclick="revokeKeyUI('${k.name}')">Revoke</button>`}</td>
+        <td>${k.revoked ? '' : `<button class="btn btn-sm btn-danger" data-revoke="${escapeHtml(k.name)}">Revoke</button>`}</td>
       </tr>
     `).join("");
+    tbody.querySelectorAll("button[data-revoke]").forEach(btn =>
+      btn.addEventListener("click", () => revokeKeyUI(btn.getAttribute("data-revoke")))
+    );
   } catch(e) { /* not admin */ }
 }