From 24a60d2fbccdcbc5ff6af66c8adae8bd42e966bd Mon Sep 17 00:00:00 2001
From: Mitchell Currie <mitch@mitchellcurrie.com>
Date: Wed, 22 Jul 2026 08:44:25 +1000
Subject: [PATCH 1/5] Fix API key copy interaction

---
 smolrouter/static/vendor/api-key-copy.js | 137 +++++++++++++++
 smolrouter/templates/project_detail.html |  49 ++++--
 tests/js/test_api_key_copy.js            | 213 +++++++++++++++++++++++
 tests/unit/test_api_key_copy_js.py       |  19 ++
 tests/unit/test_project_key_manager.py   |  10 +-
 5 files changed, 407 insertions(+), 21 deletions(-)
 create mode 100644 smolrouter/static/vendor/api-key-copy.js
 create mode 100644 tests/js/test_api_key_copy.js
 create mode 100644 tests/unit/test_api_key_copy_js.py

diff --git a/smolrouter/static/vendor/api-key-copy.js b/smolrouter/static/vendor/api-key-copy.js
new file mode 100644
index 0000000..4143053
--- /dev/null
+++ b/smolrouter/static/vendor/api-key-copy.js
@@ -0,0 +1,137 @@
+(function (root, factory) {
+  const api = factory();
+  if (typeof module === 'object' && module.exports) module.exports = api;
+  if (root) root.smolrouterApiKeyCopy = api;
+})(typeof window !== 'undefined' ? window : globalThis, function () {
+  'use strict';
+
+  const COPY_LABEL = 'Copy API key';
+  const COPIED_LABEL = 'API key copied';
+
+  function legacyCopy(text, doc) {
+    const previousFocus = doc.activeElement;
+    const temporary = doc.createElement('textarea');
+    temporary.setAttribute('readonly', '');
+    temporary.setAttribute('aria-label', 'Temporary API key copy field');
+    temporary.setAttribute('tabindex', '-1');
+    temporary.style.position = 'fixed';
+    temporary.style.left = '-9999px';
+    temporary.style.opacity = '0';
+    temporary.value = text;
+    doc.body.appendChild(temporary);
+    try {
+      temporary.focus();
+      temporary.select();
+      temporary.setSelectionRange(0, temporary.value.length);
+      if (!doc.execCommand('copy')) throw new Error('Copy command was rejected');
+    } finally {
+      temporary.value = '';
+      temporary.remove();
+      if (previousFocus && previousFocus.isConnected !== false && typeof previousFocus.focus === 'function') {
+        previousFocus.focus();
+      }
+    }
+  }
+
+  async function copyText(text, options) {
+    const win = options && options.window ? options.window : window;
+    const doc = options && options.document ? options.document : document;
+    const clipboard = win.navigator && win.navigator.clipboard;
+    if (win.isSecureContext && clipboard && typeof clipboard.writeText === 'function') {
+      try {
+        await clipboard.writeText(text);
+        return;
+      } catch (_) {
+        // Firefox and hardened browsers can reject Clipboard API calls even when exposed.
+      }
+    }
+    legacyCopy(text, doc);
+  }
+
+  function createController(options) {
+    const win = options.window;
+    const input = options.input;
+    const panel = options.panel;
+    const copyButton = options.copyButton;
+    const copyIcon = options.copyIcon;
+    const dismissButton = options.dismissButton;
+    const status = options.status;
+    const performCopy = options.copyText || ((text) => copyText(text, {window: win, document: options.document}));
+    let secretCopied = false;
+    let copyResetTimer = null;
+
+    function clearResetTimer() {
+      if (copyResetTimer !== null) {
+        win.clearTimeout(copyResetTimer);
+        copyResetTimer = null;
+      }
+    }
+
+    function resetCopyFeedback() {
+      clearResetTimer();
+      copyIcon.textContent = 'content_copy';
+      copyButton.setAttribute('aria-label', COPY_LABEL);
+      copyButton.setAttribute('title', COPY_LABEL);
+      status.textContent = '';
+      status.classList.remove('success', 'warning');
+    }
+
+    function markCopied() {
+      secretCopied = true;
+      clearResetTimer();
+      copyIcon.textContent = 'check';
+      copyButton.setAttribute('aria-label', COPIED_LABEL);
+      copyButton.setAttribute('title', COPIED_LABEL);
+      status.textContent = 'API key copied.';
+      status.classList.remove('warning');
+      status.classList.add('success');
+      copyResetTimer = win.setTimeout(resetCopyFeedback, 2000);
+    }
+
+    function clearSecret() {
+      clearResetTimer();
+      input.value = '';
+      secretCopied = false;
+      resetCopyFeedback();
+    }
+
+    function showSecret(secret) {
+      clearSecret();
+      input.value = secret;
+      panel.hidden = false;
+      input.focus();
+      input.select();
+    }
+
+    async function handleCopy() {
+      try {
+        await performCopy(input.value);
+        markCopied();
+      } catch (_) {
+        resetCopyFeedback();
+        status.textContent = 'Automatic copy is unavailable. The key is selected; press Ctrl+C or Command+C to copy it.';
+        status.classList.add('warning');
+        input.focus();
+        input.select();
+      }
+    }
+
+    function handleDismiss() {
+      if (input.value && !secretCopied && !win.confirm('This key will not be shown again. Dismiss without copying?')) return;
+      clearSecret();
+      panel.hidden = true;
+      win.location.reload();
+    }
+
+    copyButton.addEventListener('click', handleCopy);
+    input.addEventListener('copy', () => {
+      if (input.value && input.selectionStart === 0 && input.selectionEnd === input.value.length) markCopied();
+    });
+    dismissButton.addEventListener('click', handleDismiss);
+    win.addEventListener('pagehide', clearSecret);
+
+    return {showSecret: showSecret, clearSecret: clearSecret};
+  }
+
+  return {copyText: copyText, createController: createController};
+});
diff --git a/smolrouter/templates/project_detail.html b/smolrouter/templates/project_detail.html
index 42f6cf3..355f0de 100644
--- a/smolrouter/templates/project_detail.html
+++ b/smolrouter/templates/project_detail.html
@@ -105,8 +105,19 @@
         .management-panel { background:#fff; border:1px solid #e5e7eb; border-radius:10px; padding:1rem 1.5rem; margin-bottom:1rem; }
         .management-row { display:flex; gap:.6rem; align-items:center; flex-wrap:wrap; }
         .management-message { color:#b91c1c; min-height:1.2rem; margin-top:.5rem; }
-        .secret-panel { display:none; background:#fffbeb; border:1px solid #f59e0b; border-radius:8px; padding:1rem; margin-top:.75rem; }
+        .secret-panel { position:relative; background:#fffbeb; border:1px solid #f59e0b; border-radius:8px; padding:1rem; margin-top:.75rem; }
+        .secret-panel[hidden] { display:none; }
+        .secret-title { display:block; padding-right:2.5rem; margin-bottom:.5rem; }
+        .secret-row { display:flex; gap:.4rem; align-items:stretch; }
+        .secret-value { flex:1; min-width:0; border:1px solid #d1d5db; border-radius:6px; background:#fff; padding:.55rem .65rem; }
         .secret-value, .fingerprint { font-family:"Monaco","Menlo",monospace; overflow-wrap:anywhere; }
+        .icon-button { display:inline-flex; align-items:center; justify-content:center; min-width:2.6rem; padding:.45rem; }
+        .dismiss-secret { position:absolute; right:.55rem; top:.55rem; border:0; background:transparent; color:#475569; border-radius:5px; cursor:pointer; }
+        .dismiss-secret:hover { background:#fef3c7; color:#0f172a; }
+        .icon-button:focus-visible, .dismiss-secret:focus-visible, .secret-value:focus-visible { outline:3px solid #2563eb; outline-offset:2px; }
+        .copy-status { min-height:1.2rem; margin-top:.4rem; color:#475569; font-size:.9rem; }
+        .copy-status.success { color:#166534; }
+        .copy-status.warning { color:#b45309; }
         .danger { background:#b91c1c !important; color:#fff !important; }
     </style>
     {% include 'responsive_shell.html' %}
@@ -141,11 +152,14 @@ <h1>{{ project.display_name or project.id }}</h1>
         <section class="management-panel" aria-labelledby="key-management-heading">
             <h2 id="key-management-heading">API keys</h2>
             <div class="management-row"><button id="create-key" class="action-btn" type="button">Create API key</button></div>
-            <div id="secret-panel" class="secret-panel" aria-live="polite">
-                <strong>Copy this key now. It will not be shown again.</strong>
-                <div id="secret-value" class="secret-value"></div>
-                <button id="copy-secret" class="action-btn" type="button">Copy key</button>
-                <button id="dismiss-secret" class="action-btn secondary" type="button">I have copied it</button>
+            <div id="secret-panel" class="secret-panel" hidden>
+                <label class="secret-title" for="secret-value"><strong>Copy this key now. It will not be shown again.</strong></label>
+                <button id="dismiss-secret" class="dismiss-secret icon-button" type="button" aria-label="Dismiss generated key" title="Dismiss generated key"><span class="material-icons" aria-hidden="true">close</span></button>
+                <div class="secret-row">
+                    <input id="secret-value" class="secret-value" type="text" readonly aria-label="Generated API key">
+                    <button id="copy-secret" class="action-btn icon-button" type="button" aria-label="Copy API key" title="Copy API key"><span id="copy-secret-icon" class="material-icons" aria-hidden="true">content_copy</span></button>
+                </div>
+                <div id="copy-status" class="copy-status" role="status" aria-live="polite"></div>
             </div>
             <div id="key-message" class="management-message" role="alert"></div>
             <table>
@@ -243,27 +257,28 @@ <h2>Recent Facade-Key Requests</h2>
     </div>
     {% include 'project_mutation.html' %}
     {% if project.configured %}
+    <script src="/static/vendor/api-key-copy.js"></script>
     <script>
     (() => {
       const projectId = {{ project.id | tojson }};
       const keyMessage = document.getElementById('key-message');
       const secretPanel = document.getElementById('secret-panel');
       const secretValue = document.getElementById('secret-value');
+      const secretController = window.smolrouterApiKeyCopy.createController({
+        window,
+        document,
+        input: secretValue,
+        panel: secretPanel,
+        copyButton: document.getElementById('copy-secret'),
+        copyIcon: document.getElementById('copy-secret-icon'),
+        dismissButton: document.getElementById('dismiss-secret'),
+        status: document.getElementById('copy-status')
+      });
       document.getElementById('create-key').addEventListener('click', async (event) => {
         const button = event.currentTarget; if (button.disabled) return; button.disabled = true; keyMessage.textContent = '';
-        try { const result = await window.smolrouterProjectMutation('/api/project-management/keys', 'POST', {project_id:projectId}); secretValue.textContent = result.secret; secretPanel.style.display = 'block'; }
+        try { const result = await window.smolrouterProjectMutation('/api/project-management/keys', 'POST', {project_id:projectId}); secretController.showSecret(result.secret); }
         catch (error) { keyMessage.textContent = error.message || 'Key creation failed'; button.disabled = false; }
       });
-      document.getElementById('copy-secret').addEventListener('click', async () => {
-        try {
-          await navigator.clipboard.writeText(secretValue.textContent);
-          keyMessage.textContent = 'API key copied.';
-        } catch (_) {
-          keyMessage.textContent = 'Copy failed. Select and copy the key manually before dismissing it.';
-        }
-      });
-      document.getElementById('dismiss-secret').addEventListener('click', () => { secretValue.textContent = ''; secretPanel.remove(); window.location.reload(); });
-      window.addEventListener('pagehide', () => { secretValue.textContent = ''; });
       document.querySelectorAll('.revoke-key').forEach(button => button.addEventListener('click', async () => {
         if (button.disabled || !window.confirm('Revoke this API key? Existing clients will immediately stop authenticating.')) return;
         button.disabled = true; keyMessage.textContent = '';
diff --git a/tests/js/test_api_key_copy.js b/tests/js/test_api_key_copy.js
new file mode 100644
index 0000000..c9e242a
--- /dev/null
+++ b/tests/js/test_api_key_copy.js
@@ -0,0 +1,213 @@
+'use strict';
+
+const assert = require('node:assert/strict');
+const {copyText, createController} = require('../../smolrouter/static/vendor/api-key-copy.js');
+
+function element(initial) {
+  const listeners = {};
+  const classes = new Set();
+  return Object.assign({
+    value: '',
+    textContent: '',
+    hidden: true,
+    selectionStart: 0,
+    selectionEnd: 0,
+    attributes: {},
+    classList: {
+      add(...names) { names.forEach((name) => classes.add(name)); },
+      remove(...names) { names.forEach((name) => classes.delete(name)); },
+      contains(name) { return classes.has(name); },
+    },
+    focusCalls: 0,
+    selectCalls: 0,
+    addEventListener(name, callback) { listeners[name] = callback; },
+    setAttribute(name, value) { this.attributes[name] = value; },
+    focus() { this.focusCalls += 1; },
+    select() { this.selectCalls += 1; this.selectionStart = 0; this.selectionEnd = this.value.length; },
+    emit(name) { return listeners[name](); },
+  }, initial || {});
+}
+
+function copyEnvironment(options) {
+  const previousFocus = element();
+  if (options && options.disconnectedFocus) previousFocus.isConnected = false;
+  const temporaries = [];
+  const body = {
+    appendChild(node) { node.appended = true; temporaries.push(node); },
+  };
+  const doc = {
+    activeElement: previousFocus,
+    body,
+    execCalls: 0,
+    createElement(tag) {
+      assert.equal(tag, 'textarea');
+      return {
+        value: '',
+        style: {},
+        attributes: {},
+        removed: false,
+        setAttribute(name, value) { this.attributes[name] = value; },
+        focus() {},
+        select() {},
+        setSelectionRange(start, end) { this.range = [start, end]; },
+        remove() { this.removed = true; },
+      };
+    },
+    execCommand(command) {
+      assert.equal(command, 'copy');
+      this.execCalls += 1;
+      if (options && options.execError) throw options.execError;
+      return !(options && options.execFalse);
+    },
+  };
+  const clipboard = options && options.clipboard;
+  const win = {isSecureContext: !(options && options.insecure), navigator: clipboard ? {clipboard} : {}};
+  return {doc, win, previousFocus, temporaries};
+}
+
+function controllerEnvironment(copyImplementation) {
+  const windowListeners = {};
+  const timers = new Map();
+  let timerId = 0;
+  const input = element();
+  const panel = element({hidden: true});
+  const copyButton = element();
+  const copyIcon = element({textContent: 'content_copy'});
+  const dismissButton = element();
+  const status = element();
+  const win = {
+    confirms: [],
+    confirmResult: true,
+    reloadCalls: 0,
+    clearCalls: [],
+    addEventListener(name, callback) { windowListeners[name] = callback; },
+    confirm(message) { this.confirms.push(message); return this.confirmResult; },
+    location: {reload: () => { win.reloadCalls += 1; }},
+    setTimeout(callback, delay) { const id = ++timerId; timers.set(id, {callback, delay}); return id; },
+    clearTimeout(id) { this.clearCalls.push(id); timers.delete(id); },
+  };
+  const controller = createController({
+    window: win,
+    document: {},
+    input,
+    panel,
+    copyButton,
+    copyIcon,
+    dismissButton,
+    status,
+    copyText: copyImplementation || (async () => {}),
+  });
+  return {win, input, panel, copyButton, copyIcon, dismissButton, status, controller, timers, windowListeners};
+}
+
+async function run() {
+  {
+    let modernCalls = 0;
+    const env = copyEnvironment({clipboard: {writeText: async (text) => { modernCalls += 1; assert.equal(text, 'secret'); }}});
+    await copyText('secret', {window: env.win, document: env.doc});
+    assert.equal(modernCalls, 1, 'secure Clipboard API should be preferred');
+    assert.equal(env.doc.execCalls, 0, 'secure success must not invoke the fallback');
+  }
+
+  for (const setup of [
+    {insecure: true, clipboard: {writeText: async () => { throw new Error('must not be called'); }}},
+    {},
+    {clipboard: {writeText: async () => { throw new Error('denied'); }}},
+  ]) {
+    const env = copyEnvironment(setup);
+    await copyText('fallback-secret', {window: env.win, document: env.doc});
+    assert.equal(env.doc.execCalls, 1, 'fallback should execute for insecure, unavailable, or rejected Clipboard API');
+    const temporary = env.temporaries[0];
+    assert.equal(temporary.value, '', 'temporary secret must be wiped');
+    assert.equal(temporary.removed, true, 'temporary textarea must be removed');
+    assert.equal(temporary.attributes['aria-hidden'], undefined, 'a focused fallback field must remain exposed');
+    assert.equal(temporary.attributes['aria-label'], 'Temporary API key copy field');
+    assert.equal(temporary.attributes.tabindex, '-1');
+    assert.equal(env.previousFocus.focusCalls, 1, 'focus must be restored');
+  }
+
+  for (const setup of [{execFalse: true}, {execError: new Error('blocked')}]) {
+    const env = copyEnvironment(setup);
+    await assert.rejects(copyText('failed-secret', {window: env.win, document: env.doc}));
+    assert.equal(env.temporaries[0].value, '');
+    assert.equal(env.temporaries[0].removed, true);
+    assert.equal(env.previousFocus.focusCalls, 1);
+  }
+
+  {
+    const env = copyEnvironment({insecure: true, disconnectedFocus: true});
+    await copyText('secret', {window: env.win, document: env.doc});
+    assert.equal(env.previousFocus.focusCalls, 0, 'a detached prior element must not receive focus');
+  }
+
+  {
+    const env = controllerEnvironment();
+    env.controller.showSecret('first-secret');
+    assert.equal(env.panel.hidden, false);
+    assert.equal(env.input.value, 'first-secret');
+    await env.copyButton.emit('click');
+    assert.equal(env.copyIcon.textContent, 'check');
+    assert.equal(env.copyButton.attributes['aria-label'], 'API key copied');
+    assert.equal(env.status.textContent, 'API key copied.');
+    assert.equal(env.status.classList.contains('success'), true);
+    const feedbackTimer = [...env.timers.values()][0];
+    assert.equal(feedbackTimer.delay, 2000);
+
+    env.controller.showSecret('second-secret');
+    assert.equal(env.input.value, 'second-secret', 'new secret replaces and wipes the old value');
+    assert.equal(env.copyIcon.textContent, 'content_copy', 'new secret resets copied feedback');
+    assert.equal(env.status.textContent, '');
+    assert.equal(env.status.classList.contains('success'), false);
+    assert.equal(env.timers.size, 0, 'new secret cancels the prior feedback timer');
+  }
+
+  {
+    const env = controllerEnvironment();
+    env.controller.showSecret('uncopied-secret');
+    env.win.confirmResult = false;
+    env.dismissButton.emit('click');
+    assert.equal(env.win.reloadCalls, 0, 'cancelled uncopied dismissal must retain the secret');
+    assert.equal(env.input.value, 'uncopied-secret');
+    assert.match(env.win.confirms[0], /will not be shown again/i);
+
+    env.input.selectionStart = 0;
+    env.input.selectionEnd = 4;
+    env.input.emit('copy');
+    env.win.confirmResult = false;
+    env.dismissButton.emit('click');
+    assert.equal(env.win.reloadCalls, 0, 'a partial selection must not count as copying the generated key');
+    assert.equal(env.win.confirms.length, 2);
+
+    env.input.select();
+    env.input.emit('copy');
+    env.dismissButton.emit('click');
+    assert.equal(env.win.confirms.length, 2, 'a full manual copy must bypass the irreversible-loss warning');
+    assert.equal(env.win.reloadCalls, 1);
+    assert.equal(env.input.value, '');
+    assert.equal(env.panel.hidden, true);
+  }
+
+  {
+    const env = controllerEnvironment(async () => { throw new Error('copy unavailable'); });
+    env.controller.showSecret('manual-secret');
+    await env.copyButton.emit('click');
+    assert.equal(env.status.textContent, 'Automatic copy is unavailable. The key is selected; press Ctrl+C or Command+C to copy it.');
+    assert.equal(env.status.classList.contains('warning'), true);
+    assert.ok(env.input.focusCalls >= 2 && env.input.selectCalls >= 2, 'failure should select the key for manual copying');
+  }
+
+  {
+    const env = controllerEnvironment();
+    env.controller.showSecret('pagehide-secret');
+    await env.copyButton.emit('click');
+    assert.equal(env.timers.size, 1);
+    env.windowListeners.pagehide();
+    assert.equal(env.input.value, '', 'pagehide must wipe the generated secret');
+    assert.equal(env.timers.size, 0, 'pagehide must cancel copied feedback cleanup');
+  }
+}
+
+run().catch((error) => {
+  console.error(error);
+  process.exitCode = 1;
+});
diff --git a/tests/unit/test_api_key_copy_js.py b/tests/unit/test_api_key_copy_js.py
new file mode 100644
index 0000000..0ee38cd
--- /dev/null
+++ b/tests/unit/test_api_key_copy_js.py
@@ -0,0 +1,19 @@
+import shutil
+import subprocess
+from pathlib import Path
+
+import pytest
+
+
+def test_api_key_copy_browser_behaviour():
+    node = shutil.which("node")
+    if node is None:
+        pytest.skip("Node.js is required to execute browser helper tests")
+    repository = Path(__file__).resolve().parents[2]
+    subprocess.run(
+        [node, "tests/js/test_api_key_copy.js"],
+        cwd=repository,
+        check=True,
+        text=True,
+        capture_output=True,
+    )
diff --git a/tests/unit/test_project_key_manager.py b/tests/unit/test_project_key_manager.py
index 04de714..5a4df72 100644
--- a/tests/unit/test_project_key_manager.py
+++ b/tests/unit/test_project_key_manager.py
@@ -718,9 +718,11 @@ async def active(_legacy):
     assert "async function mutate" not in detail.text
     assert "typeof result.detail === 'string' ? result.detail : fallbackMessage" in detail.text
     assert 'for="delete-confirmation"' in detail.text
-    assert "Copy key" in detail.text
-    assert "navigator.clipboard.writeText" in detail.text
-    assert "Copy failed. Select and copy the key manually" in detail.text
-    assert "pagehide" in detail.text
+    assert 'aria-label="Generated API key"' in detail.text
+    assert 'aria-label="Copy API key"' in detail.text
+    assert 'aria-label="Dismiss generated key"' in detail.text
+    assert 'aria-live="polite"' in detail.text
+    assert "content_copy" in detail.text
+    assert "/static/vendor/api-key-copy.js" in detail.text
     assert "sha256:" in detail.text
     assert "srk-never-render-this" not in listing.text + detail.text

From 269e3e763f54c47de9e518506ab62a5a4eccb92d Mon Sep 17 00:00:00 2001
From: Mitchell Currie <mitch@mitchellcurrie.com>
Date: Wed, 22 Jul 2026 09:32:26 +1000
Subject: [PATCH 2/5] Present request identities as projects

---
 smolrouter/templates/client_dashboard.html |  21 +++--
 smolrouter/templates/index.html            |  59 +++++++++---
 smolrouter/templates/project_detail.html   |   8 +-
 smolrouter/templates/projects.html         |  13 +--
 smolrouter/templates/request_detail.html   |  22 +++--
 tests/js/test_project_ui_rendering.js      | 103 +++++++++++++++++++++
 tests/unit/test_api_key_copy_js.py         |   8 +-
 tests/unit/test_app.py                     |  86 ++++++++++++++++-
 8 files changed, 277 insertions(+), 43 deletions(-)
 create mode 100644 tests/js/test_project_ui_rendering.js

diff --git a/smolrouter/templates/client_dashboard.html b/smolrouter/templates/client_dashboard.html
index 3b14bfb..bb8126b 100644
--- a/smolrouter/templates/client_dashboard.html
+++ b/smolrouter/templates/client_dashboard.html
@@ -58,6 +58,9 @@
             text-decoration: underline;
         }
 
+        .project-cell { display:flex; flex-direction:column; gap:.2rem; }
+        .project-cell-secondary, .identity-cue { color:#666; font-size:.8rem; }
+
         @media (max-width: 768px) {
             .stats {
                 grid-template-columns: repeat(2, 1fr);
@@ -148,7 +151,7 @@ <h2>Recent Requests for {{ client_ip }}</h2>
                         <th></th>
                         <th>Time</th>
                         <th>Service</th>
-                        <th>Project Identity</th>
+                        <th>Project</th>
                         <th>Path</th>
                         <th>Model</th>
                         <th>Size</th>
@@ -230,13 +233,15 @@ <h2>Recent Requests for {{ client_ip }}</h2>
 
             const canonical = `${identityKind}:${identitySubject}`;
             const displayName = log.identity_display_name;
-            const label = displayName ? `${canonical} (${displayName})` : canonical;
-
             if (identityKind === 'facade_key') {
-                return `<a href="/projects/${encodeURIComponent(identitySubject)}" class="token-button secondary">${escapeHtml(label)}</a>`;
+                const label = displayName || identitySubject;
+                const secondaryId = displayName && displayName !== identitySubject
+                    ? `<span class="project-cell-secondary">${escapeHtml(identitySubject)}</span>`
+                    : '';
+                return `<div class="project-cell"><a href="/projects/${encodeURIComponent(identitySubject)}" class="project-detail-link" onclick="event.stopPropagation()">${escapeHtml(label)}</a>${secondaryId}</div>`;
             }
 
-            return escapeHtml(label);
+            return `<div class="project-cell"><span>${escapeHtml(canonical)}</span><span class="identity-cue">Identity</span></div>`;
         }
 
         // JSON formatting functions (same as main dashboard)
@@ -401,7 +406,7 @@ <h2>Recent Requests for {{ client_ip }}</h2>
                             ${log.service_type || 'unknown'}
                         </span>
                     </td>
-                    <td data-label="Project Identity">${renderProjectCell(log)}</td>
+                    <td data-label="Project">${renderProjectCell(log)}</td>
                     <td data-label="Path">${log.path || '-'}</td>
                     <td data-label="Model">${formatModel(log.original_model, log.mapped_model, log.model_observation_status)}</td>
                     <td data-label="Size">${formatSize(log.request_size)}</td>
@@ -549,7 +554,7 @@ <h2>Recent Requests for {{ client_ip }}</h2>
                         ${request.service_type || 'unknown'}
                     </span>
                 </td>
-                <td data-label="Project Identity">${renderProjectCell(request)}</td>
+                <td data-label="Project">${renderProjectCell(request)}</td>
                 <td data-label="Path">${request.path || '-'}</td>
                 <td data-label="Model">${formatModel(request.original_model, request.mapped_model, request.model_observation_status)}</td>
                 <td data-label="Size">${formatSize(request.request_size)}</td>
@@ -583,7 +588,7 @@ <h2>Recent Requests for {{ client_ip }}</h2>
                                 ${request.service_type || 'unknown'}
                             </span>
                         </td>
-                        <td data-label="Project Identity">${renderProjectCell(request)}</td>
+                        <td data-label="Project">${renderProjectCell(request)}</td>
                         <td data-label="Path">${request.path || '-'}</td>
                         <td data-label="Model">${formatModel(request.original_model, request.mapped_model, request.model_observation_status)}</td>
                         <td data-label="Size">${formatSize(request.request_size)}</td>
diff --git a/smolrouter/templates/index.html b/smolrouter/templates/index.html
index f107518..6283233 100644
--- a/smolrouter/templates/index.html
+++ b/smolrouter/templates/index.html
@@ -94,6 +94,12 @@
             color: #666;
         }
 
+        .project-primary {
+            display: inline-flex;
+            align-items: center;
+            gap: 0.4rem;
+        }
+
         .token-button {
             padding: 0;
             border: none;
@@ -125,6 +131,17 @@
             color: #007bff;
         }
 
+        .icon-link:focus-visible {
+            outline: 2px solid #2563eb;
+            outline-offset: 2px;
+            border-radius: 3px;
+        }
+
+        .identity-cue {
+            color: #6c757d;
+            font-size: 0.72rem;
+        }
+
         .provider-primary {
             font-weight: 500;
         }
@@ -242,7 +259,7 @@ <h2>Recent Requests</h2>
                         class="filter-input"
                         id="dashboard-query"
                         type="search"
-                        placeholder="host:192.168.1.14 provider:google-gen-ai model:gemma3-12b project:project-a identity:facade_key:project-a"
+                        placeholder="host:192.168.1.14 provider:google-gen-ai model:gemma3-12b project:project-a"
                         autocomplete="off"
                     >
                 </div>
@@ -251,7 +268,7 @@ <h2>Recent Requests</h2>
             </form>
 
             <div class="filter-help dashboard-filter-help">
-                Space-separated clauses are ANDed. Supported fields: <strong>host</strong>, <strong>provider</strong>, <strong>model</strong>, <strong>project</strong>, and <strong>identity</strong>. Bare words also search across the visible request fields.
+                Space-separated clauses are ANDed. Supported fields: <strong>host</strong>, <strong>provider</strong>, <strong>model</strong>, and <strong>project</strong>. Bare words also search across the visible request fields.
             </div>
 
             <div id="error-container"></div>
@@ -263,7 +280,7 @@ <h2>Recent Requests</h2>
                         <th></th>
                         <th>Time</th>
                         <th>Source</th>
-                        <th>Project Identity</th>
+                        <th>Project</th>
                         <th>Provider</th>
                         <th>Path</th>
                         <th>Model</th>
@@ -367,6 +384,10 @@ <h2>Recent Requests</h2>
             return div.innerHTML;
         }
 
+        function escapeAttribute(text) {
+            return escapeHtml(text).replaceAll('"', '&quot;').replaceAll("'", '&#39;');
+        }
+
         function escapeClassName(text) {
             return String(text || 'unknown').toLowerCase().replaceAll(/[^a-z0-9_-]+/g, '-');
         }
@@ -430,19 +451,35 @@ <h2>Recent Requests</h2>
         function renderProjectCell(log) {
             const identityKind = log.identity_kind;
             const identitySubject = log.identity_subject_id;
-            const identityDisplayName = log.identity_display_name;
-
             if (!identityKind || !identitySubject) {
                 return '<span style="color:#999;">-</span>';
             }
 
             const canonical = `${identityKind}:${identitySubject}`;
-            const label = log.identity_display_name ? `${canonical} (${identityDisplayName})` : canonical;
+            if (identityKind !== 'facade_key') {
+                return `
+                    <div class="cell-stack">
+                        <span>${escapeHtml(canonical)}</span>
+                        <span class="identity-cue">Identity</span>
+                    </div>
+                `;
+            }
+
+            const displayName = log.identity_display_name;
+            const label = displayName || identitySubject;
+            const secondaryId = displayName && displayName !== identitySubject
+                ? `<div class="cell-secondary">${renderFilterButton('project', identitySubject, identitySubject, 'secondary')}</div>`
+                : '';
 
             return `
                 <div class="cell-stack">
-                    <div>${renderFilterButton('project', identitySubject, canonical)}</div>
-                    <div class="cell-secondary">${renderFilterButton('identity', canonical, label, 'secondary')}</div>
+                    <div class="project-primary">
+                        ${renderFilterButton('project', identitySubject, label)}
+                        <a class="icon-link project-detail-link" href="/projects/${encodeURIComponent(identitySubject)}" aria-label="Open project ${escapeAttribute(label)}" title="Open project ${escapeAttribute(label)}">
+                            <span class="material-icons" aria-hidden="true" style="font-size: 0.95rem;">folder_open</span>
+                        </a>
+                    </div>
+                    ${secondaryId}
                 </div>
             `;
         }
@@ -527,7 +564,7 @@ <h2>Recent Requests</h2>
                     </td>
                     <td data-label="Time" class="timestamp">${formatTimestamp(log.timestamp)}</td>
                     <td data-label="Source">${renderSourceCell(log)}</td>
-                    <td data-label="Project Identity">${renderProjectCell(log)}</td>
+                    <td data-label="Project">${renderProjectCell(log)}</td>
                     <td data-label="Provider">${renderProviderCell(log)}</td>
                     <td data-label="Path">${escapeHtml(log.path || '-')}</td>
                     <td data-label="Model">${formatModel(log.original_model, log.mapped_model, log.model_observation_status)}</td>
@@ -730,8 +767,8 @@ <h2>Recent Requests</h2>
                 return;
             }
 
-            const clientLink = event.target.closest('.client-dashboard-link');
-            if (clientLink) {
+            const navigationLink = event.target.closest('.client-dashboard-link, .project-detail-link');
+            if (navigationLink) {
                 event.stopPropagation();
             }
         }
diff --git a/smolrouter/templates/project_detail.html b/smolrouter/templates/project_detail.html
index 355f0de..520cef4 100644
--- a/smolrouter/templates/project_detail.html
+++ b/smolrouter/templates/project_detail.html
@@ -131,7 +131,9 @@
 
     <div class="project-header">
         <h1>{{ project.display_name or project.id }}</h1>
-        <div class="project-identity">facade_key:{{ project.id }}</div>
+        {% if project.display_name and project.display_name != project.id %}
+        <div class="project-identity">Project ID: {{ project.id }}</div>
+        {% endif %}
         <div class="project-meta">
             {% if project.configured and project.enabled %}
             <span class="project-meta-item ok">Enabled</span>
@@ -209,14 +211,14 @@ <h2 id="delete-project-heading">Delete project</h2>
 
         <div class="table-container">
             <div class="table-header">
-                <h2>Recent Facade-Key Requests</h2>
+                <h2>Recent Project Requests</h2>
                 <div class="action-buttons">
                     <a class="action-btn secondary" href="/projects">Back to Projects</a>
                 </div>
             </div>
 
             <div class="filter-help dashboard-filter-help" style="padding: 0 1.5rem 1rem;">
-                This page shows recent requests attributed to <strong>facade_key:{{ project.id }}</strong> within the retained request-log window. The displayed {{ project.request_rate_limit.source | default("historical", true) | replace('_', ' ') }} request policy is effective configuration, not a live Redis counter.
+                This page shows recent requests for this project within the retained request-log window. The displayed {{ project.request_rate_limit.source | default("historical", true) | replace('_', ' ') }} request policy is effective configuration, not a live Redis counter.
             </div>
 
             <div class="table-scroll">
diff --git a/smolrouter/templates/projects.html b/smolrouter/templates/projects.html
index d96a52d..8f99cab 100644
--- a/smolrouter/templates/projects.html
+++ b/smolrouter/templates/projects.html
@@ -111,14 +111,14 @@ <h2 id="create-project-heading">Create project</h2>
 
         <div class="table-container">
             <div class="table-header">
-                <h2>Facade-Key Projects</h2>
+                <h2>Projects</h2>
                 <div class="action-buttons">
                     <a class="action-btn secondary" href="/">Back to Dashboard</a>
                 </div>
             </div>
 
             <div class="filter-help dashboard-filter-help" style="padding: 0 1.5rem 1rem;">
-                This inventory lists configured facade-key identities and their effective two-window request limits. The values are policy, not live counters; request history is limited to the retained request-log window.
+                This inventory lists configured projects and their effective two-window request limits. The values are policy, not live counters; request history is limited to the retained request-log window.
             </div>
 
             <div class="table-scroll">
@@ -126,7 +126,6 @@ <h2>Facade-Key Projects</h2>
                     <thead>
                         <tr>
                             <th>Project</th>
-                            <th>Identity</th>
                             <th>Tags</th>
                             <th>Quota</th>
                             <th>Request limit</th>
@@ -141,12 +140,8 @@ <h2>Facade-Key Projects</h2>
                                 <div>
                                     <a href="/projects/{{ project.id | pathencode }}"><strong>{{ project.display_name or project.id }}</strong></a>
                                 </div>
+                                {% if project.display_name and project.display_name != project.id %}
                                 <div class="project-identity">{{ project.id }}</div>
-                            </td>
-                            <td data-label="Identity">
-                                <span class="identity-badge">facade_key:{{ project.id }}</span>
-                                {% if project.display_name %}
-                                <div class="project-identity">{{ project.display_name }}</div>
                                 {% endif %}
                             </td>
                             <td data-label="Tags">
@@ -193,7 +188,7 @@ <h2>Facade-Key Projects</h2>
                         </tr>
                         {% else %}
                         <tr>
-                            <td colspan="7" class="no-data">No projects are configured</td>
+                            <td colspan="6" class="no-data">No projects are configured</td>
                         </tr>
                         {% endfor %}
                     </tbody>
diff --git a/smolrouter/templates/request_detail.html b/smolrouter/templates/request_detail.html
index eb65962..dd383e2 100644
--- a/smolrouter/templates/request_detail.html
+++ b/smolrouter/templates/request_detail.html
@@ -89,6 +89,11 @@
             color: #333;
             word-break: break-all;
         }
+
+        .project-id-secondary {
+            color: #666;
+            font-size: 0.8rem;
+        }
         
         .status-badge {
             padding: 0.25rem 0.75rem;
@@ -306,17 +311,18 @@ <h2>Request Information</h2>
 
                     {% if request_identity %}
                     <div class="detail-row">
-                        <span class="detail-label">Project Identity:</span>
+                        {% if request_identity.kind == 'facade_key' %}
+                        <span class="detail-label">Project:</span>
                         <span class="detail-value">
-                            {% if request_identity.kind == 'facade_key' %}
-                            <a href="/projects/{{ request_identity.subject_id | pathencode }}">{{ request_identity.canonical }}</a>
-                            {% else %}
-                            {{ request_identity.canonical }}
-                            {% endif %}
-                            {% if request_identity.display_name %}
-                            &nbsp;&nbsp;<em>({{ request_identity.display_name }})</em>
+                            <a href="/projects/{{ request_identity.subject_id | pathencode }}">{{ request_identity.display_name or request_identity.subject_id }}</a>
+                            {% if request_identity.display_name and request_identity.display_name != request_identity.subject_id %}
+                            <br><span class="project-id-secondary">{{ request_identity.subject_id }}</span>
                             {% endif %}
                         </span>
+                        {% else %}
+                        <span class="detail-label">Identity:</span>
+                        <span class="detail-value" title="Identity">{{ request_identity.canonical }}</span>
+                        {% endif %}
                     </div>
                     {% endif %}
                 </div>
diff --git a/tests/js/test_project_ui_rendering.js b/tests/js/test_project_ui_rendering.js
new file mode 100644
index 0000000..f0025c4
--- /dev/null
+++ b/tests/js/test_project_ui_rendering.js
@@ -0,0 +1,103 @@
+'use strict';
+
+const assert = require('node:assert/strict');
+const fs = require('node:fs');
+const vm = require('node:vm');
+
+function extractFunction(source, name) {
+  const start = source.indexOf(`function ${name}(`);
+  assert.notEqual(start, -1, `missing function ${name}`);
+  const bodyStart = source.indexOf('{', start);
+  let depth = 0;
+  for (let index = bodyStart; index < source.length; index += 1) {
+    if (source[index] === '{') depth += 1;
+    if (source[index] === '}') depth -= 1;
+    if (depth === 0) return source.slice(start, index + 1);
+  }
+  throw new Error(`unterminated function ${name}`);
+}
+
+function escapeMarkup(value) {
+  return String(value).replaceAll('&', '&amp;').replaceAll('<', '&lt;').replaceAll('>', '&gt;');
+}
+
+function renderer(templatePath, dependencies) {
+  const source = fs.readFileSync(templatePath, 'utf8');
+  const context = {
+    encodeURIComponent,
+    document: {
+      createElement() {
+        let content = '';
+        return {
+          set textContent(value) { content = value == null ? '' : String(value); },
+          get innerHTML() { return escapeMarkup(content); },
+        };
+      },
+    },
+  };
+  vm.createContext(context);
+  const names = [...dependencies, 'renderProjectCell'];
+  vm.runInContext(`${names.map((name) => extractFunction(source, name)).join('\n')}\nthis.render = renderProjectCell;`, context);
+  return context.render;
+}
+
+const indexRender = renderer('smolrouter/templates/index.html', ['escapeHtml', 'escapeAttribute', 'renderFilterButton']);
+const clientRender = renderer('smolrouter/templates/client_dashboard.html', ['escapeHtml']);
+
+{
+  const html = indexRender({identity_kind: 'facade_key', identity_subject_id: 'team alpha/proj', identity_display_name: 'Team Alpha'});
+  assert.match(html, />\s*Team Alpha\s*</);
+  assert.equal((html.match(/data-filter-field="project"/g) || []).length, 2, 'friendly name and distinct ID remain project filters');
+  assert.equal((html.match(/data-filter-value="team%20alpha%2Fproj"/g) || []).length, 2);
+  assert.match(html, /href="\/projects\/team%20alpha%2Fproj"/);
+  assert.match(html, /folder_open/);
+  assert.match(html, /aria-hidden="true"/);
+  assert.match(html, /aria-label="Open project Team Alpha"/);
+  assert.match(html, /class="project-primary">[\s\S]*data-filter-field="project"[\s\S]*class="icon-link project-detail-link"[\s\S]*<\/div>\s*<div class="cell-secondary">/);
+}
+
+{
+  const html = indexRender({identity_kind: 'facade_key', identity_subject_id: 'project-a', identity_display_name: null});
+  assert.equal((html.match(/data-filter-field="project"/g) || []).length, 1, 'an ID-only project has one filter control');
+  assert.doesNotMatch(html, /data-filter-field="identity"/);
+}
+
+{
+  const html = indexRender({identity_kind: 'facade_key', identity_subject_id: 'bad/\"id', identity_display_name: '<img src=x onerror=alert(1)>'});
+  assert.doesNotMatch(html, /<img/);
+  assert.match(html, /&lt;img src=x onerror=alert\(1\)&gt;/);
+  assert.match(html, /href="\/projects\/bad%2F%22id"/);
+}
+
+{
+  const hostileName = 'Project " onmouseover="alert(1)\' data-attack=\'yes';
+  const html = indexRender({identity_kind: 'facade_key', identity_subject_id: 'bad/" onfocus="attack', identity_display_name: hostileName});
+  const navigationAnchor = html.match(/<a class="icon-link project-detail-link"[\s\S]*?<\/a>/)[0];
+  assert.doesNotMatch(navigationAnchor, /" onmouseover="/);
+  assert.doesNotMatch(navigationAnchor, /' data-attack='/);
+  assert.match(html, /aria-label="Open project Project &quot; onmouseover=&quot;alert\(1\)&#39; data-attack=&#39;yes"/);
+  assert.match(html, /href="\/projects\/bad%2F%22%20onfocus%3D%22attack"/);
+}
+
+for (const render of [indexRender, clientRender]) {
+  const html = render({identity_kind: 'service_account', identity_subject_id: '<admin>', identity_display_name: 'Ignored'});
+  assert.match(html, /service_account:&lt;admin&gt;/);
+  assert.match(html, />Identity</);
+  assert.doesNotMatch(html, /data-filter-field/);
+  assert.doesNotMatch(html, /\/projects\//);
+  assert.doesNotMatch(html, />Ignored</);
+}
+
+{
+  const html = clientRender({identity_kind: 'facade_key', identity_subject_id: 'team/proj', identity_display_name: 'Team Project'});
+  assert.match(html, /href="\/projects\/team%2Fproj"/);
+  assert.match(html, />Team Project</);
+  assert.match(html, />team\/proj</);
+  assert.doesNotMatch(html, /token-button/);
+  assert.doesNotMatch(html, /folder_open/);
+}
+
+{
+  const html = clientRender({identity_kind: 'facade_key', identity_subject_id: 'same-id', identity_display_name: 'same-id'});
+  assert.equal((html.match(/same-id/g) || []).length, 2, 'matching display name and ID render one visible label plus the URL');
+}
diff --git a/tests/unit/test_api_key_copy_js.py b/tests/unit/test_api_key_copy_js.py
index 0ee38cd..9d341c5 100644
--- a/tests/unit/test_api_key_copy_js.py
+++ b/tests/unit/test_api_key_copy_js.py
@@ -5,13 +5,17 @@
 import pytest
 
 
-def test_api_key_copy_browser_behaviour():
+@pytest.mark.parametrize(
+    "script",
+    ["tests/js/test_api_key_copy.js", "tests/js/test_project_ui_rendering.js"],
+)
+def test_browser_behaviour(script):
     node = shutil.which("node")
     if node is None:
         pytest.skip("Node.js is required to execute browser helper tests")
     repository = Path(__file__).resolve().parents[2]
     subprocess.run(
-        [node, "tests/js/test_api_key_copy.js"],
+        [node, script],
         cwd=repository,
         check=True,
         text=True,
diff --git a/tests/unit/test_app.py b/tests/unit/test_app.py
index a316575..f4c29b8 100644
--- a/tests/unit/test_app.py
+++ b/tests/unit/test_app.py
@@ -3,6 +3,7 @@
 import asyncio
 import logging
 import uuid
+from html.parser import HTMLParser
 from urllib.parse import quote
 from types import SimpleNamespace
 import smolrouter.database as database
@@ -51,6 +52,31 @@
 from smolrouter import auth as auth_module
 
 
+class _VisibleTextParser(HTMLParser):
+    def __init__(self):
+        super().__init__()
+        self.hidden_depth = 0
+        self.parts = []
+
+    def handle_starttag(self, tag, attrs):
+        if tag in {"script", "style"}:
+            self.hidden_depth += 1
+
+    def handle_endtag(self, tag):
+        if tag in {"script", "style"} and self.hidden_depth:
+            self.hidden_depth -= 1
+
+    def handle_data(self, data):
+        if not self.hidden_depth:
+            self.parts.append(data)
+
+
+def _visible_text(html):
+    parser = _VisibleTextParser()
+    parser.feed(html)
+    return " ".join(parser.parts)
+
+
 def load_mock_json(filename):
     with open(f"tests/mocks/{filename}", "r") as f:
         return json.load(f)
@@ -1882,11 +1908,21 @@ async def _get_active_container(_legacy_proxy: bool):
     projects_body = projects_response.text
     assert "Project A" in projects_body
     assert "project-a" in projects_body
-    assert "configured facade-key identities" in projects_body
+    assert "configured projects" in projects_body
     assert "effective two-window request limits" in projects_body
+    assert "<th>Identity</th>" not in projects_body
+    assert 'data-label="Identity"' not in projects_body
     assert "srk-project-a-1" not in projects_body
     assert "srk-project-a-2" not in projects_body
 
+    fake_container.get_facade_key_registry.return_value = FacadeKeyRegistry.from_sources()
+    with (
+        patch("smolrouter.app._get_active_container", _get_active_container),
+        patch("smolrouter.app.get_webui_security", return_value=fake_security),
+    ):
+        empty_projects_response = await async_client.get("/projects")
+    assert 'colspan="6"' in empty_projects_response.text
+
     assert api_response.status_code == 200
     api_payload = api_response.json()
     assert api_payload["count"] == 1
@@ -2020,6 +2056,8 @@ async def test_project_pages_and_api_support_slash_delimited_logical_ids(async_c
     registry = FacadeKeyRegistry.from_sources(
         facade_key_configs={
             project_id: {"display_name": "Team Project"},
+            "plain-project": {},
+            "evil/<id>": {"display_name": "<img src=x onerror=alert(1)>"},
         },
         facade_key_secrets={
             project_id: ["srk-team-proj-1"],
@@ -2051,23 +2089,67 @@ async def _get_active_container(_legacy_proxy: bool):
     ):
         projects_response = await async_client.get("/projects")
         detail_response = await async_client.get(f"/projects/{encoded_project_id}")
+        request_response = await async_client.get("/request/slash-project-1")
+        dashboard_response = await async_client.get("/")
+        client_response = await async_client.get("/clients/127.0.0.1")
         api_response = await async_client.get(f"/api/projects/{encoded_project_id}")
 
     assert projects_response.status_code == 200
     assert f"/projects/{encoded_project_id}" in projects_response.text
+    assert projects_response.text.count("plain-project") == 2
+    assert "/projects/evil%2F%3Cid%3E" in projects_response.text
+    assert "&lt;img src=x onerror=alert(1)&gt;" in projects_response.text
+    assert "<img src=x onerror=alert(1)>" not in projects_response.text
 
     assert detail_response.status_code == 200
     assert "Team Project" in detail_response.text
-    assert "facade_key:team/proj" in detail_response.text
+    assert "Project ID: team/proj" in detail_response.text
+    assert "requests for this project" in detail_response.text
     assert "/v1/chat/completions" in detail_response.text
     assert "/request/slash-project-1" in detail_response.text
 
+    assert request_response.status_code == 200
+    assert f'/projects/{encoded_project_id}' in request_response.text
+    assert "Team Project" in request_response.text
+    assert "team/proj" in request_response.text
+    assert 'class="project-id-secondary"' in request_response.text
+
+    for response in (projects_response, detail_response, request_response, dashboard_response, client_response):
+        visible_text = _visible_text(response.text).lower()
+        assert "facade_key" not in visible_text
+        assert "facade-key" not in visible_text
+        assert "facade key" not in visible_text
+
     assert api_response.status_code == 200
     api_payload = api_response.json()
     assert api_payload["project"]["id"] == project_id
     assert api_payload["logs"][0]["id"] == "slash-project-1"
 
 
+@pytest.mark.asyncio
+async def test_request_detail_renders_unknown_identity_as_unlinked_canonical_identity(async_client, disable_logging):
+    await app_module.RequestLog.create(
+        source_ip="127.0.0.1",
+        method="POST",
+        path="/v1/chat/completions",
+        identity_kind="service_account",
+        identity_subject_id="ops/<admin>",
+        identity_display_name="Should not replace canonical",
+        request_id="unknown-identity-detail",
+    )
+    fake_security = Mock()
+    fake_security.check_webui_access.return_value = None
+
+    with patch("smolrouter.app.get_webui_security", return_value=fake_security):
+        response = await async_client.get("/request/unknown-identity-detail")
+
+    assert response.status_code == 200
+    assert "Identity:" in response.text
+    assert "service_account:ops/&lt;admin&gt;" in response.text
+    assert "Should not replace canonical" not in response.text
+    assert "/projects/" not in response.text
+
+
 @pytest.mark.asyncio
 async def test_google_genai_stats_returns_frontend_compatible_shape(async_client, disable_logging, monkeypatch):
     fake_provider = Mock()

From 9457b9113b2a48d26cb8caae4ca95085721cbbc8 Mon Sep 17 00:00:00 2001
From: Mitchell Currie <mitch@mitchellcurrie.com>
Date: Wed, 22 Jul 2026 12:05:30 +1000
Subject: [PATCH 3/5] Use output element for copy status

---
 smolrouter/templates/project_detail.html | 4 ++--
 tests/unit/test_project_key_manager.py   | 3 +++
 2 files changed, 5 insertions(+), 2 deletions(-)

diff --git a/smolrouter/templates/project_detail.html b/smolrouter/templates/project_detail.html
index 520cef4..12e32d7 100644
--- a/smolrouter/templates/project_detail.html
+++ b/smolrouter/templates/project_detail.html
@@ -115,7 +115,7 @@
         .dismiss-secret { position:absolute; right:.55rem; top:.55rem; border:0; background:transparent; color:#475569; border-radius:5px; cursor:pointer; }
         .dismiss-secret:hover { background:#fef3c7; color:#0f172a; }
         .icon-button:focus-visible, .dismiss-secret:focus-visible, .secret-value:focus-visible { outline:3px solid #2563eb; outline-offset:2px; }
-        .copy-status { min-height:1.2rem; margin-top:.4rem; color:#475569; font-size:.9rem; }
+        .copy-status { display:block; min-height:1.2rem; margin-top:.4rem; color:#475569; font-size:.9rem; }
         .copy-status.success { color:#166534; }
         .copy-status.warning { color:#b45309; }
         .danger { background:#b91c1c !important; color:#fff !important; }
@@ -161,7 +161,7 @@ <h2 id="key-management-heading">API keys</h2>
                     <input id="secret-value" class="secret-value" type="text" readonly aria-label="Generated API key">
                     <button id="copy-secret" class="action-btn icon-button" type="button" aria-label="Copy API key" title="Copy API key"><span id="copy-secret-icon" class="material-icons" aria-hidden="true">content_copy</span></button>
                 </div>
-                <div id="copy-status" class="copy-status" role="status" aria-live="polite"></div>
+                <output id="copy-status" class="copy-status" aria-live="polite"></output>
             </div>
             <div id="key-message" class="management-message" role="alert"></div>
             <table>
diff --git a/tests/unit/test_project_key_manager.py b/tests/unit/test_project_key_manager.py
index 5a4df72..2c71f02 100644
--- a/tests/unit/test_project_key_manager.py
+++ b/tests/unit/test_project_key_manager.py
@@ -722,6 +722,9 @@ async def active(_legacy):
     assert 'aria-label="Copy API key"' in detail.text
     assert 'aria-label="Dismiss generated key"' in detail.text
     assert 'aria-live="polite"' in detail.text
+    assert '<output id="copy-status" class="copy-status" aria-live="polite"></output>' in detail.text
+    assert 'id="copy-status" class="copy-status" role="status"' not in detail.text
+    assert '.copy-status { display:block;' in detail.text
     assert "content_copy" in detail.text
     assert "/static/vendor/api-key-copy.js" in detail.text
     assert "sha256:" in detail.text

From a88813179ff544568c6cbfdd3890c056e942d945 Mon Sep 17 00:00:00 2001
From: Mitchell Currie <mitch@mitchellcurrie.com>
Date: Wed, 22 Jul 2026 13:08:47 +1000
Subject: [PATCH 4/5] Stabilize Redis TTL timing assertion

---
 tests/unit/test_request_rate_limits.py | 25 +++++++++++++++++++++----
 1 file changed, 21 insertions(+), 4 deletions(-)

diff --git a/tests/unit/test_request_rate_limits.py b/tests/unit/test_request_rate_limits.py
index 7d12aa9..510be97 100644
--- a/tests/unit/test_request_rate_limits.py
+++ b/tests/unit/test_request_rate_limits.py
@@ -1,5 +1,7 @@
 import asyncio
+import math
 import os
+import time
 from types import SimpleNamespace
 import uuid
 
@@ -39,6 +41,13 @@ def policy(short_requests=1, short_seconds=1, long_requests=3, long_seconds=10):
     )
 
 
+def _assert_wall_clock_ttl(observed_ms, expected_ms, started_at):
+    elapsed_ms = math.ceil((time.monotonic() - started_at) * 1000)
+    allowance_ms = 50
+    lower_bound = max(1, expected_ms - elapsed_ms - allowance_ms)
+    assert lower_bound <= observed_ms <= expected_ms
+
+
 def test_default_configuration_is_enabled_with_safe_two_window_limits():
     expected = RequestRateLimitConfig(
         enabled=True,
@@ -252,11 +261,15 @@ async def test_admission_prunes_cardinality_and_sets_max_window_ttl(fake_redis):
     limiter = RedisRequestRateLimiter(fake_redis)
     limits = policy(2, 1, 3, 10)
     bucket = request_rate_limit_bucket_key("anonymous")
-    for timestamp in (1_000, 2_000, 3_000):
+    for timestamp in (1_000, 2_000):
         assert (await limiter._check_at_ms("anonymous", limits, timestamp)).allowed
+    # Event timestamps are deterministic, while Redis expiry advances on the wall clock.
+    started_at = time.monotonic()
+    assert (await limiter._check_at_ms("anonymous", limits, 3_000)).allowed
 
     assert await fake_redis.zcard(bucket) == 3
-    assert 10_900 <= await fake_redis.pttl(bucket) <= 11_000
+    observed_ttl = await fake_redis.pttl(bucket)
+    _assert_wall_clock_ttl(observed_ttl, 11_000, started_at)
 
     assert (await limiter._check_at_ms("anonymous", limits, 11_000)).allowed
     assert await fake_redis.zcard(bucket) == 3
@@ -441,10 +454,14 @@ async def test_semantic_suite_against_real_redis_when_explicitly_configured():
         kind, subject = identities["cardinality"]
         cardinality_policy = policy(2, 1, 3, 10)
         cardinality_key = request_rate_limit_bucket_key("project", identity_kind=kind, identity_subject_id=subject)
-        for timestamp in (1_000, 2_000, 3_000):
+        for timestamp in (1_000, 2_000):
             assert (await limiter._check_at_ms("project", cardinality_policy, timestamp, kind, subject)).allowed
+        # Event timestamps are deterministic, while Redis expiry advances on the wall clock.
+        started_at = time.monotonic()
+        assert (await limiter._check_at_ms("project", cardinality_policy, 3_000, kind, subject)).allowed
         assert await raw_client.zcard(cardinality_key) == 3
-        assert 10_900 <= await raw_client.pttl(cardinality_key) <= 11_000
+        observed_ttl = await raw_client.pttl(cardinality_key)
+        _assert_wall_clock_ttl(observed_ttl, 11_000, started_at)
         assert (await limiter._check_at_ms("project", cardinality_policy, 11_000, kind, subject)).allowed
         assert await raw_client.zcard(cardinality_key) == 3
     finally:

From a8c0c3e7469adaaff0d93bec4aaae1356d915401 Mon Sep 17 00:00:00 2001
From: Mitchell Currie <mitch@mitchellcurrie.com>
Date: Wed, 22 Jul 2026 13:49:19 +1000
Subject: [PATCH 5/5] Address CodeRabbit review feedback

---
 smolrouter/templates/request_detail.html | 2 +-
 tests/unit/test_api_key_copy_js.py       | 8 ++++++--
 tests/unit/test_app.py                   | 1 +
 3 files changed, 8 insertions(+), 3 deletions(-)

diff --git a/smolrouter/templates/request_detail.html b/smolrouter/templates/request_detail.html
index dd383e2..e4d2498 100644
--- a/smolrouter/templates/request_detail.html
+++ b/smolrouter/templates/request_detail.html
@@ -321,7 +321,7 @@ <h2>Request Information</h2>
                         </span>
                         {% else %}
                         <span class="detail-label">Identity:</span>
-                        <span class="detail-value" title="Identity">{{ request_identity.canonical }}</span>
+                        <span class="detail-value">{{ request_identity.canonical }}</span>
                         {% endif %}
                     </div>
                     {% endif %}
diff --git a/tests/unit/test_api_key_copy_js.py b/tests/unit/test_api_key_copy_js.py
index 9d341c5..407a41d 100644
--- a/tests/unit/test_api_key_copy_js.py
+++ b/tests/unit/test_api_key_copy_js.py
@@ -14,10 +14,14 @@ def test_browser_behaviour(script):
     if node is None:
         pytest.skip("Node.js is required to execute browser helper tests")
     repository = Path(__file__).resolve().parents[2]
-    subprocess.run(
+    result = subprocess.run(
         [node, script],
         cwd=repository,
-        check=True,
         text=True,
         capture_output=True,
     )
+    assert result.returncode == 0, (
+        f"JavaScript test failed: {script}\n"
+        f"STDOUT:\n{result.stdout}\n"
+        f"STDERR:\n{result.stderr}"
+    )
diff --git a/tests/unit/test_app.py b/tests/unit/test_app.py
index f4c29b8..6d6bd41 100644
--- a/tests/unit/test_app.py
+++ b/tests/unit/test_app.py
@@ -2146,6 +2146,7 @@ async def test_request_detail_renders_unknown_identity_as_unlinked_canonical_ide
     assert response.status_code == 200
     assert "Identity:" in response.text
     assert "service_account:ops/&lt;admin&gt;" in response.text
+    assert 'title="Identity"' not in response.text
     assert "Should not replace canonical" not in response.text
     assert "/projects/" not in response.text