From 431e89493af271cb96a18e2a844841d7887a476f Mon Sep 17 00:00:00 2001
From: dborup <kontakt@meshview.dk>
Date: Fri, 16 Oct 2026 11:03:21 +0200
Subject: [PATCH 1/3] fix(perf): theme the WebSocket-history Period select like
 Analytics

The Period control on #/perf had only inline min-height/padding, so the
browser drew its native grey box (hardcoded system colours, square
corners, 13.3px/400) next to themed cards, and the "Period" text was
body-sized.

- Rename .analytics-time-window-select to .time-window-select and use it
  for Analytics (time window + scatter axes) and the Perf Period select:
  one definition of the control.
- "Period" uses the existing .region-filter-label, as "Region:" does on
  Analytics; the heading gets the chart-line icon like other sections.
- Touch screens (pointer: coarse) get a 44px select, Analytics included.

Tests: unit checks for class/no-inline-style/icon and the shared CSS
rule; Playwright compares the computed Period style with the real
Analytics select in light and dark, and asserts a 44px touch target.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 public/analytics.js         |  6 +++---
 public/perf.js              |  3 ++-
 public/style.css            |  8 ++++++--
 test-perf-ws-clients.js     | 26 ++++++++++++++++++++++++++
 test-perf-ws-history-e2e.js | 27 +++++++++++++++++++++++++++
 5 files changed, 64 insertions(+), 6 deletions(-)

diff --git a/public/analytics.js b/public/analytics.js
index 355724dd1..7ef877b3a 100644
--- a/public/analytics.js
+++ b/public/analytics.js
@@ -216,7 +216,7 @@
           <div class="analytics-filters">
             <div id="analyticsRegionFilter" class="region-filter-container"></div>
             <div id="analyticsAreaFilter" style="display:none"></div>
-            <select id="analyticsTimeWindow" class="analytics-time-window-select" data-testid="analytics-time-window" aria-label="Time window">
+            <select id="analyticsTimeWindow" class="time-window-select" data-testid="analytics-time-window" aria-label="Time window">
               <option value="">All data</option>
               <option value="1h">Last 1 hour</option>
               <option value="24h">Last 24 hours</option>
@@ -3194,10 +3194,10 @@
           <p class="text-muted" style="font-size:12px;margin-top:4px">Units — <strong>Usefulness</strong>: the #672 composite (0.30 bridge + 0.25 coverage + 0.25 redundancy + 0.20 traffic). <strong>Traffic share</strong>: % of non-advert traffic relayed. <strong>Bridge/Coverage/Redundancy</strong>: 0–100% (network-normalized). <strong>Relays (1h/24h)</strong> and <strong>Adverts</strong>: packet counts. Axes auto-scale to the data.</p>
           <div style="display:flex;gap:20px;flex-wrap:wrap;align-items:center;margin-bottom:14px">
             <label style="display:flex;gap:6px;align-items:center">X axis
-              <select id="metricScatterX" class="analytics-time-window-select" aria-label="X axis metric">${opts(xKey)}</select>
+              <select id="metricScatterX" class="time-window-select" aria-label="X axis metric">${opts(xKey)}</select>
             </label>
             <label style="display:flex;gap:6px;align-items:center">Y axis
-              <select id="metricScatterY" class="analytics-time-window-select" aria-label="Y axis metric">${opts(yKey)}</select>
+              <select id="metricScatterY" class="time-window-select" aria-label="Y axis metric">${opts(yKey)}</select>
             </label>
             <span class="text-muted">${points.length} repeater${points.length === 1 ? '' : 's'}</span>
           </div>
diff --git a/public/perf.js b/public/perf.js
index 26f1f2fd5..ad1ded1fa 100644
--- a/public/perf.js
+++ b/public/perf.js
@@ -297,7 +297,8 @@ function renderVersionCard(health) {
     // rebuild, preserving keyboard focus and an open native select menu.
     app.innerHTML = '<div id="perfWrapper" style="padding:16px 24px;"><h2><svg class="ph-icon" aria-hidden="true"><use href="/icons/phosphor-sprite.svg#ph-lightning"/></svg> Performance Dashboard</h2>' +
       '<section id="wsHistorySection" aria-labelledby="wsHistoryHeading"><div style="display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;">' +
-      '<h3 id="wsHistoryHeading">WebSocket clients</h3><label for="wsHistoryRange">Period <select id="wsHistoryRange" style="min-height:44px;padding:6px;">' +
+      '<h3 id="wsHistoryHeading"><svg class="ph-icon" aria-hidden="true"><use href="/icons/phosphor-sprite.svg#ph-chart-line"/></svg> WebSocket clients</h3>' +
+      '<label for="wsHistoryRange" class="perf-range-control"><span class="region-filter-label">Period</span><select id="wsHistoryRange" class="time-window-select">' +
       '<option value="24h">24 hours</option><option value="7d">7 days</option><option value="30d">30 days</option></select></label></div>' +
       '<div id="wsHistoryContent">Loading history…</div></section><div id="perfContent">Loading...</div></div>';
     const selector = document.getElementById('wsHistoryRange');
diff --git a/public/style.css b/public/style.css
index e55500588..ddffe07bf 100644
--- a/public/style.css
+++ b/public/style.css
@@ -3714,12 +3714,16 @@ button.region-pill-active:hover { opacity: 0.85; color: var(--text-on-accent); }
   margin-right: 2px; user-select: none; white-space: nowrap; flex-shrink: 0;
 }
 .analytics-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 8px 0; }
-.analytics-time-window-select {
+/* The one time-window / metric <select> style: Analytics filters and the
+   Perf page's WebSocket-history Period control. */
+.time-window-select {
   height: 34px; min-height: 34px; padding: 0 10px; border-radius: 6px; box-sizing: border-box;
   font-size: 13px; font-weight: 500; cursor: pointer; border: 1px solid var(--border);
   background: var(--input-bg); color: var(--text); transition: border-color 0.15s;
 }
-.analytics-time-window-select:hover { border-color: var(--accent); }
+.time-window-select:hover { border-color: var(--accent); }
+@media (pointer: coarse) { .time-window-select { height: 44px; min-height: 44px; } }
+.perf-range-control { display: inline-flex; align-items: center; gap: 8px; }
 .region-dropdown-wrap { position: relative; display: inline-flex; align-items: center; }
 .region-dropdown-trigger {
   display: inline-flex; align-items: center; padding: 6px 10px; border-radius: 6px;
diff --git a/test-perf-ws-clients.js b/test-perf-ws-clients.js
index 3216d3144..29cac48ea 100644
--- a/test-perf-ws-clients.js
+++ b/test-perf-ws-clients.js
@@ -526,6 +526,32 @@ const PERF_FIXTURE = () => ({
     assert.strictEqual(wsCalls, 2, 'leaving and re-entering the page should not reuse a cache from the previous visit');
   });
 
+  await test('Period control uses the shared themed select + label classes, no inline styling', async () => {
+    const { ctx } = makeSandbox();
+    let appHtml = '';
+    ctx.pages.perf.init({ set innerHTML(v) { appHtml = v; } });
+    await flush();
+    const select = (appHtml.match(/<select id="wsHistoryRange"[^>]*>/) || [''])[0];
+    assert.ok(/class="time-window-select"/.test(select), 'select must use .time-window-select: ' + select);
+    assert.ok(!/style=/.test(select), 'select must not carry inline styles: ' + select);
+    assert.ok(/<span class="region-filter-label">Period<\/span>/.test(appHtml), 'label text must use .region-filter-label');
+    const heading = (appHtml.match(/<h3 id="wsHistoryHeading">[\s\S]*?<\/h3>/) || [''])[0];
+    assert.ok(/<svg class="ph-icon" aria-hidden="true">/.test(heading), 'heading needs the same decorative icon as the other sections');
+    assert.ok(/WebSocket clients<\/h3>$/.test(heading), 'accessible name stays "WebSocket clients"');
+  });
+
+  await test('time-window select styling is one shared rule used by Analytics and Perf', () => {
+    const css = fs.readFileSync('public/style.css', 'utf8');
+    const analytics = fs.readFileSync('public/analytics.js', 'utf8');
+    assert.ok(!/analytics-time-window-select/.test(css + analytics), 'old analytics-only class name must be gone');
+    assert.strictEqual((analytics.match(/class="time-window-select"/g) || []).length, 3);
+    const rule = (css.match(/\.time-window-select\s*\{[^}]*\}/) || [''])[0];
+    for (const decl of ['background: var(--input-bg)', 'color: var(--text)', 'border: 1px solid var(--border)', 'border-radius: 6px']) {
+      assert.ok(rule.includes(decl), 'shared rule missing ' + decl);
+    }
+    assert.ok(/@media \(pointer: coarse\)\s*\{\s*\.time-window-select\s*\{[^}]*min-height: 44px/.test(css), 'touch screens need a 44px target');
+  });
+
   console.log(`\n${passed} passed, ${failed} failed`);
   process.exit(failed ? 1 : 0);
 })();
diff --git a/test-perf-ws-history-e2e.js b/test-perf-ws-history-e2e.js
index 505b3b1f8..9238e298b 100644
--- a/test-perf-ws-history-e2e.js
+++ b/test-perf-ws-history-e2e.js
@@ -137,6 +137,32 @@ async function check(name, fn) {
         assert.match(await page.locator('#wsHistoryContent').innerText(), /307/);
         assert.match(await page.locator('#wsHistoryContent').innerText(), /saved|persist|restart/i);
       });
+      await check('Period control is themed like the Analytics time-window select, light and dark', async () => {
+        // Compare against the real Analytics control, not a copy of its CSS,
+        // so a later restyle of either page shows up here.
+        const styleOf = (selector, theme) => page.evaluate(async ({ selector, theme }) => {
+          document.documentElement.setAttribute('data-theme', theme);
+          // The customizer re-applies its inline :root theme vars from an
+          // observer on data-theme; read only after it has run and after the
+          // select's 0.15s border-color transition has settled.
+          await new Promise(resolve => setTimeout(resolve, 300));
+          const c = getComputedStyle(document.querySelector(selector));
+          return {
+            background: c.backgroundColor, color: c.color, border: c.border, radius: c.borderRadius,
+            font: c.fontSize + ' ' + c.fontWeight, height: c.height,
+          };
+        }, { selector, theme });
+        const perf = {}, analytics = {};
+        for (const theme of ['light', 'dark']) perf[theme] = await styleOf('#wsHistoryRange', theme);
+        await page.goto(BASE + '/#/analytics', { waitUntil: 'domcontentloaded' });
+        await page.waitForSelector('#analyticsTimeWindow');
+        for (const theme of ['light', 'dark']) analytics[theme] = await styleOf('#analyticsTimeWindow', theme);
+        for (const theme of ['light', 'dark']) {
+          assert.deepEqual(perf[theme], analytics[theme], theme + ' theme: Period select differs from Analytics');
+        }
+        assert.notDeepEqual(perf.light.background, perf.dark.background, 'select background does not follow the theme');
+        assert.equal(perf.dark.radius, '6px');
+      });
       assert.deepEqual(desktop.errors, [], 'unexpected desktop JavaScript errors');
     } finally { await desktop.context.close(); }
 
@@ -148,6 +174,7 @@ async function check(name, fn) {
         await mobile.page.locator('#wsHistoryRange').scrollIntoViewIfNeeded();
         const rect = await mobile.page.locator('#wsHistoryRange').boundingBox();
         assert.ok(rect && rect.width > 0 && rect.x >= 0 && rect.x + rect.width <= 375, 'range control is clipped');
+        assert.ok(rect.height >= 44, 'touch target is ' + rect.height + 'px, needs 44px');
         const hit = await mobile.page.locator('#wsHistoryRange').evaluate(element => {
           const r = element.getBoundingClientRect();
           const top = document.elementFromPoint(r.x + r.width / 2, r.y + r.height / 2);

From 107f173f3a3416de7cad731401d79dc1736f985b Mon Sep 17 00:00:00 2001
From: dborup <kontakt@meshview.dk>
Date: Fri, 16 Oct 2026 11:14:02 +0200
Subject: [PATCH 2/3] fix(perf): use the 48px touch house minimum for the
 shared select

Review feedback on #493:
- Drop the one-off 44px coarse-pointer rule; add .time-window-select to
  the #630-1 48px touch block, matching the region dropdown trigger it
  sits next to on Analytics.
- Add font-family: var(--font), as .filter-bar select has.
- E2E: compare font-family too; replace the fixed 300 ms sleep with
  transitions off plus one frame; require 48px on Perf and on the
  Analytics time window on touch; match the "Period" name exactly.
- Unit: check the #630-1 block and the declarations by pattern instead
  of exact strings and a fixed call-site count.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 public/style.css            |  9 +++++----
 test-perf-ws-clients.js     | 14 +++++++++-----
 test-perf-ws-history-e2e.js | 24 ++++++++++++++++++------
 3 files changed, 32 insertions(+), 15 deletions(-)

diff --git a/public/style.css b/public/style.css
index ddffe07bf..ad52dd119 100644
--- a/public/style.css
+++ b/public/style.css
@@ -3719,10 +3719,9 @@ button.region-pill-active:hover { opacity: 0.85; color: var(--text-on-accent); }
 .time-window-select {
   height: 34px; min-height: 34px; padding: 0 10px; border-radius: 6px; box-sizing: border-box;
   font-size: 13px; font-weight: 500; cursor: pointer; border: 1px solid var(--border);
-  background: var(--input-bg); color: var(--text); transition: border-color 0.15s;
+  background: var(--input-bg); color: var(--text); font-family: var(--font); transition: border-color 0.15s;
 }
 .time-window-select:hover { border-color: var(--accent); }
-@media (pointer: coarse) { .time-window-select { height: 44px; min-height: 44px; } }
 .perf-range-control { display: inline-flex; align-items: center; gap: 8px; }
 .region-dropdown-wrap { position: relative; display: inline-flex; align-items: center; }
 .region-dropdown-trigger {
@@ -4630,12 +4629,14 @@ button.region-pill-active:hover { opacity: 0.85; color: var(--text-on-accent); }
   .node-count-pill,
   .analytics-time-range button,
   .detail-back-btn,
-  .filter-toggle-btn {
+  .filter-toggle-btn,
+  .time-window-select {
     min-height: 48px;
     min-width: 48px;
   }
   .filter-bar input,
-  .filter-bar select {
+  .filter-bar select,
+  .time-window-select {
     height: 48px;
   }
   .region-dropdown-trigger,
diff --git a/test-perf-ws-clients.js b/test-perf-ws-clients.js
index 29cac48ea..4ed520b0e 100644
--- a/test-perf-ws-clients.js
+++ b/test-perf-ws-clients.js
@@ -544,12 +544,16 @@ const PERF_FIXTURE = () => ({
     const css = fs.readFileSync('public/style.css', 'utf8');
     const analytics = fs.readFileSync('public/analytics.js', 'utf8');
     assert.ok(!/analytics-time-window-select/.test(css + analytics), 'old analytics-only class name must be gone');
-    assert.strictEqual((analytics.match(/class="time-window-select"/g) || []).length, 3);
-    const rule = (css.match(/\.time-window-select\s*\{[^}]*\}/) || [''])[0];
-    for (const decl of ['background: var(--input-bg)', 'color: var(--text)', 'border: 1px solid var(--border)', 'border-radius: 6px']) {
-      assert.ok(rule.includes(decl), 'shared rule missing ' + decl);
+    assert.ok(/<select id="analyticsTimeWindow" class="time-window-select"/.test(analytics), 'Analytics time window must use the shared class');
+    const rule = (css.match(/(^|\n)\.time-window-select\s*\{[^}]*\}/) || [''])[0];
+    for (const decl of [/background:\s*var\(--input-bg\)/, /(^|[\s;])color:\s*var\(--text\)/, /border:\s*1px solid var\(--border\)/, /font-family:\s*var\(--font\)/]) {
+      assert.ok(decl.test(rule), 'shared rule missing ' + decl);
     }
-    assert.ok(/@media \(pointer: coarse\)\s*\{\s*\.time-window-select\s*\{[^}]*min-height: 44px/.test(css), 'touch screens need a 44px target');
+    // Touch size comes from the #630-1 48px house-minimum block, not a one-off rule.
+    const houseBlock = (css.match(/#630-1: Touch targets[\s\S]*?\n\}/) || [''])[0];
+    assert.ok(/\.time-window-select\s*[,{][\s\S]*?min-height:\s*48px/.test(houseBlock), 'select must be in the #630-1 48px touch block');
+    assert.ok(/\.time-window-select\s*\{\s*height:\s*48px/.test(houseBlock), 'select height must be 48px on touch');
+    assert.ok(!/44px/.test(rule), 'no one-off 44px size on the shared rule');
   });
 
   console.log(`\n${passed} passed, ${failed} failed`);
diff --git a/test-perf-ws-history-e2e.js b/test-perf-ws-history-e2e.js
index 9238e298b..c9dc2a04b 100644
--- a/test-perf-ws-history-e2e.js
+++ b/test-perf-ws-history-e2e.js
@@ -91,7 +91,7 @@ async function check(name, fn) {
         await page.goto(BASE + '/#/perf', { waitUntil: 'domcontentloaded' });
         await waitForRange(page, '24h');
         assert.deepEqual(await page.locator('#wsHistoryRange option').evaluateAll(options => options.map(o => o.value)), ['24h', '7d', '30d']);
-        assert.equal(await page.getByRole('region', { name: 'WebSocket clients' }).getByRole('combobox', { name: 'Period' }).count(), 1);
+        assert.equal(await page.getByRole('region', { name: 'WebSocket clients' }).getByRole('combobox', { name: 'Period', exact: true }).count(), 1);
         assert.equal(requests[0], '24h');
       });
       await check('7-day and 30-day selections fetch the selected range, without stale cached counts', async () => {
@@ -141,15 +141,21 @@ async function check(name, fn) {
         // Compare against the real Analytics control, not a copy of its CSS,
         // so a later restyle of either page shows up here.
         const styleOf = (selector, theme) => page.evaluate(async ({ selector, theme }) => {
+          // Transitions off, so a computed colour is never read mid-animation.
+          if (!document.getElementById('e2e-no-transitions')) {
+            const style = document.createElement('style');
+            style.id = 'e2e-no-transitions';
+            style.textContent = '*, *::before, *::after { transition: none !important; }';
+            document.head.appendChild(style);
+          }
           document.documentElement.setAttribute('data-theme', theme);
           // The customizer re-applies its inline :root theme vars from an
-          // observer on data-theme; read only after it has run and after the
-          // select's 0.15s border-color transition has settled.
-          await new Promise(resolve => setTimeout(resolve, 300));
+          // observer on data-theme; wait one frame so it has run.
+          await new Promise(resolve => requestAnimationFrame(() => resolve()));
           const c = getComputedStyle(document.querySelector(selector));
           return {
             background: c.backgroundColor, color: c.color, border: c.border, radius: c.borderRadius,
-            font: c.fontSize + ' ' + c.fontWeight, height: c.height,
+            font: c.fontSize + ' ' + c.fontWeight + ' ' + c.fontFamily, height: c.height,
           };
         }, { selector, theme });
         const perf = {}, analytics = {};
@@ -174,7 +180,7 @@ async function check(name, fn) {
         await mobile.page.locator('#wsHistoryRange').scrollIntoViewIfNeeded();
         const rect = await mobile.page.locator('#wsHistoryRange').boundingBox();
         assert.ok(rect && rect.width > 0 && rect.x >= 0 && rect.x + rect.width <= 375, 'range control is clipped');
-        assert.ok(rect.height >= 44, 'touch target is ' + rect.height + 'px, needs 44px');
+        assert.ok(rect.height >= 48, 'touch target is ' + rect.height + 'px, needs the 48px house minimum');
         const hit = await mobile.page.locator('#wsHistoryRange').evaluate(element => {
           const r = element.getBoundingClientRect();
           const top = document.elementFromPoint(r.x + r.width / 2, r.y + r.height / 2);
@@ -196,6 +202,12 @@ async function check(name, fn) {
         assert.match(await warning.innerText(), /lost.*restart/i);
         assert.doesNotMatch(await warning.innerText(), /survives restarts/);
       });
+      await check('touch: the shared select keeps the 48px house minimum on Analytics too', async () => {
+        await mobile.page.goto(BASE + '/#/analytics', { waitUntil: 'domcontentloaded' });
+        await mobile.page.waitForSelector('#analyticsTimeWindow');
+        const height = await mobile.page.locator('#analyticsTimeWindow').evaluate(element => element.getBoundingClientRect().height);
+        assert.ok(height >= 48, 'Analytics time window is ' + height + 'px on touch, needs 48px');
+      });
       assert.deepEqual(mobile.errors, [], 'unexpected mobile JavaScript errors');
     } finally { await mobile.context.close(); }
   } finally { await browser.close(); }

From 0ff1ec34806e1fc6f315e731cd08836a5dbbd509 Mon Sep 17 00:00:00 2001
From: dborup <kontakt@meshview.dk>
Date: Fri, 16 Oct 2026 11:29:57 +0200
Subject: [PATCH 3/3] feat(perf): show the overview cards above the WebSocket
 history

Owner request: move "WebSocket clients" below the Total Requests / Avg
Response / Uptime / Slow / Version row.

The cards were built inside #perfContent, which is rebuilt every five
seconds, while the history section sits outside it on purpose (keyboard
focus and an open native select survive a refresh). So the cards get
their own #perfOverview container above the section instead of the
section moving into the rebuild. renderPerfOverview() is the same markup
as before, extracted.

Tests: layout order and "cards only in #perfOverview"; the render-race
tests now read the overview container.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 public/perf.js          | 26 ++++++++++++++++----------
 test-perf-ws-clients.js | 39 ++++++++++++++++++++++++++++++---------
 2 files changed, 46 insertions(+), 19 deletions(-)

diff --git a/public/perf.js b/public/perf.js
index ad1ded1fa..ee264265c 100644
--- a/public/perf.js
+++ b/public/perf.js
@@ -292,10 +292,23 @@ function renderVersionCard(health) {
         return String(s).replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;').replace(/'/g, '&#39;');
       };
 
+  // The server overview row (requests, latency, uptime, slow queries, version).
+  // It sits above the WebSocket history in its own container, so the history's
+  // Period select stays outside the five-second #perfContent rebuild.
+  function renderPerfOverview(server, health) {
+    return `<div style="display:flex;gap:16px;flex-wrap:wrap;margin:16px 0;">
+          <div class="perf-card"><div class="perf-num">${escapeHtml(server.totalRequests)}</div><div class="perf-label">Total Requests</div></div>
+          <div class="perf-card"><div class="perf-num">${escapeHtml(server.avgMs)}ms</div><div class="perf-label">Avg Response</div></div>
+          <div class="perf-card"><div class="perf-num">${escapeHtml(health ? health.uptimeHuman : Math.round(server.uptime / 60) + 'm')}</div><div class="perf-label">Uptime</div></div>
+          <div class="perf-card"><div class="perf-num">${server.slowQueries.length}</div><div class="perf-label">Slow (&gt;100ms)</div></div>
+          ${renderVersionCard(health)}
+        </div>`;
+  }
+
   async function render(app) {
     // The selector stays outside perfContent's existing five-second DOM
     // rebuild, preserving keyboard focus and an open native select menu.
-    app.innerHTML = '<div id="perfWrapper" style="padding:16px 24px;"><h2><svg class="ph-icon" aria-hidden="true"><use href="/icons/phosphor-sprite.svg#ph-lightning"/></svg> Performance Dashboard</h2>' +
+    app.innerHTML = '<div id="perfWrapper" style="padding:16px 24px;"><h2><svg class="ph-icon" aria-hidden="true"><use href="/icons/phosphor-sprite.svg#ph-lightning"/></svg> Performance Dashboard</h2><div id="perfOverview"></div>' +
       '<section id="wsHistorySection" aria-labelledby="wsHistoryHeading"><div style="display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;">' +
       '<h3 id="wsHistoryHeading"><svg class="ph-icon" aria-hidden="true"><use href="/icons/phosphor-sprite.svg#ph-chart-line"/></svg> WebSocket clients</h3>' +
       '<label for="wsHistoryRange" class="perf-range-control"><span class="region-filter-label">Period</span><select id="wsHistoryRange" class="time-window-select">' +
@@ -347,18 +360,11 @@ function renderVersionCard(health) {
       const historyEl = document.getElementById('wsHistoryContent');
       if (historyEl) historyEl.innerHTML = renderWSClientHistory(wsHistory, health && health.websocket ? health.websocket.clients : null, range, false) ||
         '<p class="text-muted">History is temporarily unavailable. Retrying on the next refresh.</p>';
+      const overviewEl = document.getElementById('perfOverview');
+      if (overviewEl) overviewEl.innerHTML = renderPerfOverview(server, health);
 
       let html = '';
 
-      // Server overview
-      html += `<div style="display:flex;gap:16px;flex-wrap:wrap;margin:16px 0;">
-        <div class="perf-card"><div class="perf-num">${escapeHtml(server.totalRequests)}</div><div class="perf-label">Total Requests</div></div>
-        <div class="perf-card"><div class="perf-num">${escapeHtml(server.avgMs)}ms</div><div class="perf-label">Avg Response</div></div>
-        <div class="perf-card"><div class="perf-num">${escapeHtml(health ? health.uptimeHuman : Math.round(server.uptime / 60) + 'm')}</div><div class="perf-label">Uptime</div></div>
-        <div class="perf-card"><div class="perf-num">${server.slowQueries.length}</div><div class="perf-label">Slow (&gt;100ms)</div></div>
-        ${renderVersionCard(health)}
-      </div>`;
-
       // System health (memory, event loop / go runtime, WS)
       if (health) {
         const isGo = health.engine === 'go';
diff --git a/test-perf-ws-clients.js b/test-perf-ws-clients.js
index 4ed520b0e..6c90c538f 100644
--- a/test-perf-ws-clients.js
+++ b/test-perf-ws-clients.js
@@ -13,6 +13,7 @@ async function test(name, fn) {
 function makeSandbox(hash = '#/perf') {
   let capturedHtml = '';
   let historyHtml = '';
+  let overviewHtml = '';
   let now = Date.now();
   class ClockDate extends Date { static now() { return now; } }
   const handlers = {};
@@ -25,6 +26,7 @@ function makeSandbox(hash = '#/perf') {
       getElementById: (id) => {
         if (id === 'perfContent') return { set innerHTML(v) { capturedHtml = v; } };
         if (id === 'wsHistoryContent') return { set innerHTML(v) { historyHtml = v; } };
+        if (id === 'perfOverview') return { set innerHTML(v) { overviewHtml = v; } };
         if (id === 'wsHistoryRange') return rangeSelect;
         if (id === 'perfRefresh' || id === 'perfReset') return { addEventListener: (ev, fn) => { handlers[id] = fn; } };
         return null;
@@ -45,7 +47,7 @@ function makeSandbox(hash = '#/perf') {
   ctx.window.document = ctx.document;
   ctx.globalThis = ctx;
   vm.runInNewContext(fs.readFileSync('public/perf.js', 'utf8'), ctx);
-  return { ctx, handlers, rangeSelect, advanceNow: ms => { now += ms; }, getHtml: () => capturedHtml, getHistoryHtml: () => historyHtml };
+  return { ctx, handlers, rangeSelect, advanceNow: ms => { now += ms; }, getHtml: () => capturedHtml, getHistoryHtml: () => historyHtml, getOverviewHtml: () => overviewHtml };
 }
 
 const flush = async () => { for (let i = 0; i < 10; i++) await new Promise(r => setImmediate(r)); };
@@ -392,10 +394,12 @@ const PERF_FIXTURE = () => ({
     ctx.fetch = (url) => (url === '/api/perf/ws-clients' || url === '/api/health')
       ? Promise.reject(new Error('boom'))
       : Promise.resolve({ ok: true, json: () => Promise.resolve(url === '/api/perf' ? perf : {}) });
-    ctx.document.getElementById = (id) => id === 'perfContent' ? { set innerHTML(v) { ctx.__html = v; } } : null;
+    ctx.document.getElementById = (id) => id === 'perfContent' ? { set innerHTML(v) { ctx.__html = v; } }
+      : id === 'perfOverview' ? { set innerHTML(v) { ctx.__overview = v; } } : null;
     ctx.pages.perf.init({ set innerHTML(v) {} });
     await flush();
-    assert.ok(String(ctx.__html).includes('Total Requests'), 'rest of the page still renders');
+    assert.ok(String(ctx.__overview).includes('Total Requests'), 'the overview still renders');
+    assert.ok(String(ctx.__html).includes('id="perfRefresh"'), 'rest of the page still renders');
   });
 
   await test('refresh: a 404/500 from ws-clients hides the card instead of hanging on "Collecting data…" (#433 F2)', async () => {
@@ -410,13 +414,15 @@ const PERF_FIXTURE = () => ({
       }
       return Promise.resolve({ ok: true, json: () => Promise.resolve(url === '/api/perf' ? perf : {}) });
     };
-    ctx.document.getElementById = (id) => id === 'perfContent' ? { set innerHTML(v) { ctx.__html = v; } } : null;
+    ctx.document.getElementById = (id) => id === 'perfContent' ? { set innerHTML(v) { ctx.__html = v; } }
+      : id === 'perfOverview' ? { set innerHTML(v) { ctx.__overview = v; } } : null;
     ctx.pages.perf.init({ set innerHTML(v) {} });
     await flush();
     const html = String(ctx.__html);
     assert.ok(!getHistoryHtml().includes('<svg class="ws-history'), 'no chart expected');
     assert.ok(!/collecting/i.test(getHistoryHtml()), '404 must not look like "still collecting"');
-    assert.ok(html.includes('Total Requests'), 'rest of the page still renders');
+    assert.ok(String(ctx.__overview).includes('Total Requests'), 'the overview still renders');
+    assert.ok(html.includes('id="perfRefresh"'), 'rest of the page still renders');
   });
 
   await test('refresh: the ws-clients ring is not re-fetched on every 5s tick (#433 F6)', async () => {
@@ -474,7 +480,7 @@ const PERF_FIXTURE = () => ({
     // instead of being silently dropped.
     releasers[0]();
     await flush();
-    assert.ok(sb.getHtml().includes('Total Requests'), 'an overtaken-but-first-to-finish refresh must still render, not stay on Loading…');
+    assert.ok(sb.getOverviewHtml().includes('Total Requests'), 'an overtaken-but-first-to-finish refresh must still render, not stay on Loading…');
   });
 
   await test('refresh: an older response that completes after a newer one has rendered must not overwrite it (#463)', async () => {
@@ -502,10 +508,10 @@ const PERF_FIXTURE = () => ({
     assert.strictEqual(releasers.length, 2, 'two overlapping refreshes');
     releasers[1]();
     await flush();
-    assert.ok(sb.getHtml().includes('2222'), 'the newer response renders first');
+    assert.ok(sb.getOverviewHtml().includes('2222'), 'the newer response renders first');
     releasers[0]();
     await flush();
-    assert.ok(sb.getHtml().includes('2222') && !sb.getHtml().includes('1111'), 'the older response must not overwrite the newer render');
+    assert.ok(sb.getOverviewHtml().includes('2222') && !sb.getOverviewHtml().includes('1111'), 'the older response must not overwrite the newer render');
   });
 
   await test('refresh: re-entering the page (init) forces a fresh ws-clients fetch, not a stale cache', async () => {
@@ -517,7 +523,8 @@ const PERF_FIXTURE = () => ({
       if (url === '/api/perf/ws-clients') { wsCalls++; return Promise.resolve({ ok: true, json: () => Promise.resolve({ intervalSec: 60, samples: mk(10, i => i) }) }); }
       return Promise.resolve({ ok: true, json: () => Promise.resolve(url === '/api/perf' ? perf : {}) });
     };
-    ctx.document.getElementById = (id) => id === 'perfContent' ? { set innerHTML(v) { ctx.__html = v; } } : null;
+    ctx.document.getElementById = (id) => id === 'perfContent' ? { set innerHTML(v) { ctx.__html = v; } }
+      : id === 'perfOverview' ? { set innerHTML(v) { ctx.__overview = v; } } : null;
     ctx.pages.perf.init({ set innerHTML(v) {} });
     await flush();
     ctx.pages.perf.destroy();
@@ -540,6 +547,20 @@ const PERF_FIXTURE = () => ({
     assert.ok(/WebSocket clients<\/h3>$/.test(heading), 'accessible name stays "WebSocket clients"');
   });
 
+  await test('layout: the overview cards sit above the WebSocket history, outside the 5s #perfContent rebuild', async () => {
+    const sb = makeSandbox();
+    sb.ctx.fetch = (url) => url === '/api/health'
+      ? Promise.reject(new Error('no health'))
+      : Promise.resolve({ ok: true, json: () => Promise.resolve(url === '/api/perf' ? PERF_FIXTURE() : {}) });
+    let appHtml = '';
+    sb.ctx.pages.perf.init({ set innerHTML(v) { appHtml = v; } });
+    await flush();
+    const order = ['id="perfOverview"', 'id="wsHistorySection"', 'id="perfContent"'].map(m => appHtml.indexOf(m));
+    assert.ok(order.every(i => i >= 0) && order[0] < order[1] && order[1] < order[2], 'expected overview, then WS history, then the rest: ' + order);
+    assert.ok(sb.getOverviewHtml().includes('Total Requests'), 'overview cards render into #perfOverview');
+    assert.ok(!sb.getHtml().includes('Total Requests'), 'overview cards must not also render in #perfContent');
+  });
+
   await test('time-window select styling is one shared rule used by Analytics and Perf', () => {
     const css = fs.readFileSync('public/style.css', 'utf8');
     const analytics = fs.readFileSync('public/analytics.js', 'utf8');