[feat] Give the operator pages a favicon

src/operator/html.js

@@ -11,3 +11,16 @@ export function escapeHtml (value) {
 export function plain (value, fallback = '—') {
   return value === null || value === undefined || value === '' ? fallback : escapeHtml(value)
 }
+
+// The Mirall "M" and its orange square, from docs/media/logo-*.svg, on a dark tile
+// so it reads on light and dark tab strips alike. Inlined as a data: URI rather
+// than served: both pages live under different prefixes behind platform proxies,
+// MIRALL_RELAY_ADMIN_UI=false removes the status page's routes, and the CSP
+// already allows data: images.
+const FAVICON_SVG = "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'>" +
+  "<rect width='64' height='64' rx='14' fill='#15181b'/>" +
+  "<path fill='#fff' transform='translate(37.04 48.4) scale(.175)' d='M0,-196.22L-62.292,-111.171L-126.424,-196.22L-165.931,-196.22L-165.931,0L-125.107,0L-125.107,-129.2L-65.846,-50.043L-60.578,-50.043L-1.317,-126.442L-1.317,0L39.507,0L39.507,-196.22L0,-196.22Z'/>" +
+  "<rect x='48' y='41.4' width='7' height='7' fill='#fb9c43'/>" +
+  '</svg>'
+
+export const FAVICON_LINK = `<link rel="icon" type="image/svg+xml" href="data:image/svg+xml,${encodeURIComponent(FAVICON_SVG)}">`

src/operator/members/page.js

@@ -15,7 +15,7 @@
 // without one — a <link> and a <script src> cannot send an Authorization header,
 // so requiring it here would mean no page could ever load to collect it.
 import { assetPath, etagFor, readAssets } from '../assets.js'
-import { plain } from '../html.js'
+import { FAVICON_LINK, plain } from '../html.js'
 
 // Independent of ui.css on purpose: MIRALL_RELAY_ADMIN_UI=false turns the
 // anonymous page off, and it must not take the only way to mint an invite with it.
@@ -63,7 +63,7 @@ export function renderManagePage ({ region = null, operator = null, version = nu
 <meta name="color-scheme" content="light dark">
 <meta name="robots" content="noindex, nofollow">
 <title>mirall-relay members</title>
-<link rel="icon" href="data:,">
+${FAVICON_LINK}
 <link rel="stylesheet" href="style.css">
 </head>
 <body>

src/operator/status/page.js

@@ -15,7 +15,7 @@ import { encodeQr, qrSvg } from '../../qr.js'
 import { formatBytes, formatCount, formatField, formatMs, formatRate } from '../format.js'
 import { accessSignature, reachabilitySignature } from './refresh.client.js'
 import { modePill, modeWord, reachabilityPill } from '../access-copy.js'
-import { escapeHtml, plain } from '../html.js'
+import { escapeHtml, FAVICON_LINK, plain } from '../html.js'
 
 export { etagFor } from '../assets.js'
 
@@ -310,7 +310,7 @@ export function renderPage (status) {
 <meta name="color-scheme" content="light dark">
 <meta name="robots" content="noindex, nofollow">
 <title>mirall-relay</title>
-<link rel="icon" href="data:,">
+${FAVICON_LINK}
 <link rel="stylesheet" href="ui.css">
 </head>
 <body data-reachability="${escapeHtml(reachabilitySignature(reachability))}" data-access="${escapeHtml(accessSignature(access))}">

test/smoke/docker-smoke.test.js

@@ -58,13 +58,23 @@ async function removeContainer (name) {
 
 async function waitForHealthz (timeoutMs = 90_000) {
   const deadline = Date.now() + timeoutMs
-  for (;;) {
-    try {
-      const res = await fetch(`http://127.0.0.1:${ADMIN_PORT}/healthz`)
-      if (res.ok) return await res.json()
-    } catch { /* not up yet */ }
-    if (Date.now() > deadline) throw new Error('container never became healthy')
-    await new Promise((resolve) => setTimeout(resolve, 500))
+  // docker-proxy accepts the published port before the app inside is listening,
+  // and a fetch parked on that socket does not hold the event loop open: the
+  // process drained mid-await and the runner cancelled every test in the file
+  // ("Promise resolution is still pending"). The interval keeps the loop alive,
+  // and the per-request timeout turns a parked fetch into an ordinary retry.
+  const keepAlive = setInterval(() => {}, 1000)
+  try {
+    for (;;) {
+      try {
+        const res = await fetch(`http://127.0.0.1:${ADMIN_PORT}/healthz`, { signal: AbortSignal.timeout(3000) })
+        if (res.ok) return await res.json()
+      } catch { /* not up yet */ }
+      if (Date.now() > deadline) throw new Error('container never became healthy')
+      await new Promise((resolve) => setTimeout(resolve, 500))
+    }
+  } finally {
+    clearInterval(keepAlive)
   }
 }
 

test/unit/admin-ui.test.js

@@ -403,3 +403,17 @@ test('the hero headline carries the mode at the same weight as the verdict', ()
   const hero = open.slice(open.indexOf('class="card hero'), open.indexOf('class="card identity"'))
   assert.ok(!hero.includes('class="pill'), 'and the hero no longer needs a pill of its own')
 })
+
+test('both pages carry the same real icon, inline', async () => {
+  // An empty data: icon silenced the favicon request but left the tab blank.
+  const { renderManagePage } = await import('../../src/operator/members/page.js')
+  const icon = /<link rel="icon" type="image\/svg\+xml" href="(data:image\/svg\+xml,[^"]+)">/
+  const onStatus = renderPage(status()).match(icon)
+  const onMembers = renderManagePage().match(icon)
+  assert.ok(onStatus && onMembers, 'each page declares an svg icon')
+  assert.equal(onStatus[1], onMembers[1])
+  const svg = decodeURIComponent(onStatus[1].slice('data:image/svg+xml,'.length))
+  assert.match(svg, /^<svg xmlns=/)
+  assert.match(svg, /#fb9c43/, 'the brand orange')
+  assert.ok(!onStatus[1].includes('"') && !onStatus[1].includes('<'), 'safe inside a double-quoted attribute')
+})