feat: API key management endpoints and dashboard panel

Self-serve keys: GET/POST /api/keys, DELETE /api/keys/:id (admins may
revoke any key), GET /api/admin/keys for a platform-wide view. Tokens are
qrk_-prefixed, stored only as a SHA-256 hash, and returned exactly once at
creation. Read-scope keys are rejected with 403 on non-GET requests; key
creation and revocation are recorded in the audit log.

Dashboard gets a self-serve key panel with copy-once token display, scope
badges, and last-used timestamps.

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

index.html

@@ -670,6 +670,25 @@ input[type="range"]::-webkit-slider-thumb { -webkit-appearance:none; width:16px;
   <div class="links-list" id="links-list">
     <div class="empty-state"><div class="empty-icon">🔗</div><p>Loading...</p></div>
   </div>
+
+  <!-- API keys — programmatic access tokens -->
+  <div class="panel" id="apikeys-panel" style="margin-top:28px">
+    <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:8px">
+      <h3 style="margin:0">API KEYS</h3>
+      <button class="btn-sm" onclick="createApiKey()">+ New Key</button>
+    </div>
+    <div style="font-size:12px;color:var(--muted);margin-bottom:12px">
+      Authenticate API requests with <code style="font-family:var(--font-mono)">Authorization: Bearer qrk_…</code> — see the <a href="/api-docs" target="_blank" style="color:var(--accent)">API docs</a>.
+    </div>
+    <div id="apikey-new" style="display:none;border:1px solid var(--accent);border-radius:8px;padding:12px 14px;margin-bottom:12px;font-family:var(--font-mono);font-size:12px">
+      <div style="color:var(--accent);letter-spacing:.06em;margin-bottom:6px">NEW KEY — COPY IT NOW, IT WON'T BE SHOWN AGAIN</div>
+      <div style="display:flex;gap:8px;align-items:center;flex-wrap:wrap">
+        <code id="apikey-token" style="word-break:break-all"></code>
+        <button class="btn-sm" onclick="copyToClipboard(document.getElementById('apikey-token').textContent)">Copy</button>
+      </div>
+    </div>
+    <div id="apikeys-list"><div style="color:var(--muted);font-size:12px;font-family:var(--font-mono)">Loading…</div></div>
+  </div>
 </div>
 
 <!-- ── QR ── -->
@@ -1214,6 +1233,63 @@ function renderUptimeChart(days) {
 async function loadDashboard() {
   await Promise.all([loadStats(), loadTags(), loadPlanUsage()]);
   await loadLinks();
+// ── API keys ────────────────────────────────────────
+async function loadApiKeys() {
+  const container = document.getElementById('apikeys-list');
+  try {
+    const d = await (await authFetch(`${BASE}/api/keys`)).json();
+    const keys = d.keys || [];
+    if (!keys.length) {
+      container.innerHTML = '<div style="color:var(--muted);font-size:12px;font-family:var(--font-mono)">No API keys yet.</div>';
+      return;
+    }
+    container.innerHTML = `
+      <table style="width:100%;border-collapse:collapse;font-size:12px;font-family:var(--font-mono)">
+        <thead><tr style="color:var(--muted);font-size:10px;letter-spacing:.06em;border-bottom:1px solid var(--border)">
+          <th style="text-align:left;padding:6px 10px">NAME</th>
+          <th style="text-align:left;padding:6px 10px">KEY</th>
+          <th style="text-align:left;padding:6px 10px">SCOPE</th>
+          <th style="text-align:left;padding:6px 10px">CREATED</th>
+          <th style="text-align:left;padding:6px 10px">LAST USED</th>
+          <th style="text-align:right;padding:6px 10px"></th>
+        </tr></thead>
+        <tbody>${keys.map(k=>`
+          <tr style="border-bottom:1px solid var(--border);${k.revoked?'opacity:.45':''}">
+            <td style="padding:8px 10px">${escHtml(k.name)}</td>
+            <td style="padding:8px 10px;color:var(--muted)">${escHtml(k.prefix)}…</td>
+            <td style="padding:8px 10px"><span style="color:${k.scope==='write'?'var(--accent)':'var(--muted)'}">${k.scope.toUpperCase()}</span></td>
+            <td style="padding:8px 10px;color:var(--muted)">${(k.created_at||'').slice(0,10)}</td>
+            <td style="padding:8px 10px;color:var(--muted)">${k.last_used_at?k.last_used_at.slice(0,16).replace('T',' '):'never'}</td>
+            <td style="padding:8px 10px;text-align:right">${k.revoked?'<span style="color:var(--muted);font-size:10px">REVOKED</span>':`<button class="btn-sm danger" onclick="revokeApiKey(${k.id},'${escHtml(k.name)}')">Revoke</button>`}</td>
+          </tr>`).join('')}
+        </tbody>
+      </table>`;
+  } catch(e) {
+    container.innerHTML = '<div style="color:var(--muted);font-size:12px;font-family:var(--font-mono)">Could not load keys</div>';
+  }
+}
+
+async function createApiKey() {
+  const name = prompt('Name for this key (e.g. "CI pipeline"):');
+  if (name === null) return;
+  const write = confirm('Allow WRITE access (create/edit/delete links)?\n\nOK = read + write · Cancel = read-only');
+  try {
+    const resp = await authFetch(`${BASE}/api/keys`, {method:'POST', body:JSON.stringify({name: name||'API key', scope: write?'write':'read'})});
+    const d = await resp.json();
+    if (!resp.ok) { toast(d.error||'Failed to create key','error'); return; }
+    document.getElementById('apikey-new').style.display = 'block';
+    document.getElementById('apikey-token').textContent = d.token;
+    toast('API key created — copy it now');
+    loadApiKeys();
+  } catch(e) { toast('Network error','error'); }
+}
+
+async function revokeApiKey(id, name) {
+  if (!confirm(`Revoke API key "${name}"? Requests using it will stop working immediately.`)) return;
+  const resp = await authFetch(`${BASE}/api/keys/${id}`, {method:'DELETE'});
+  if (!resp.ok) { toast('Failed to revoke','error'); return; }
+  toast(`Key "${name}" revoked`);
+  loadApiKeys();
 }
 
 async function loadStats() {