From cdcc3c7937f5e8335ba37564135428d026795164 Mon Sep 17 00:00:00 2001
From: Fredrik Johansson <fredrik.johansson@intraphone.com>
Date: Tue, 21 Jul 2026 05:13:39 +0200
Subject: [PATCH] Fix collapsed nav on /events

Its inline <style> block never defined nav{display:flex;gap:...} like
the shared stylesheet does, so the three links ran together with no
spacing as soon as the previous commit added them. Screenshotted to
confirm before committing.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
---
 src/receipts.mjs | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/receipts.mjs b/src/receipts.mjs
index 9987588..6db0831 100644
--- a/src/receipts.mjs
+++ b/src/receipts.mjs
@@ -16,4 +16,4 @@ export function createReceiptStore(db,config=''){
 }
 
 const escapeHtml=value=>String(value??'').replaceAll('&','&amp;').replaceAll('<','&lt;').replaceAll('>','&gt;').replaceAll('"','&quot;');
-export function renderEventsPage(db){const rows=db.prepare('SELECT * FROM deployment_events ORDER BY occurred_at DESC LIMIT 100').all();const counts=db.prepare('SELECT event_type,result,count(*) count FROM deployment_events GROUP BY event_type,result ORDER BY event_type,result').all();return`<!doctype html><html><head><meta charset=utf-8><meta name=viewport content="width=device-width"><title>operational events · trace</title><style>:root{--b:#0d1117;--p:#161b22;--l:#30363d;--t:#c9d1d9;--m:#8b949e;--a:#58a6ff;--ok:#3fb950;--bad:#f85149}*{box-sizing:border-box}body{margin:0;background:var(--b);color:var(--t);font:14px/1.55 ui-monospace,monospace}header,main{max-width:1050px;margin:auto;padding:20px}header{display:flex;justify-content:space-between;border-bottom:1px solid var(--l)}a{color:var(--a);text-decoration:none}.summary{display:flex;gap:8px;flex-wrap:wrap}.badge{border:1px solid var(--l);padding:3px 8px;border-radius:99px;color:var(--m)}.event{background:var(--p);border:1px solid var(--l);border-left:3px solid var(--a);padding:16px;border-radius:8px;margin:10px 0}.event.failed{border-left-color:var(--bad)}.event.success{border-left-color:var(--ok)}.top{display:flex;justify-content:space-between;gap:12px;align-items:start}.meta{color:var(--m);font-size:12px}.result.success{color:var(--ok)}.result.failed{color:var(--bad)}code,pre{background:var(--b);border:1px solid var(--l);border-radius:5px}code{padding:2px 5px}pre{padding:12px;overflow:auto;max-height:360px;white-space:pre-wrap}details{margin-top:10px}h1{margin-bottom:5px}@media(max-width:600px){.top{display:block}}</style></head><body><header><a href=/><b>trace</b></a><nav><a href=/incidents/new>new incident</a><a href=/candidates>git inbox</a><a href=/events>operational events</a></nav></header><main><h1>Operational events</h1><p class=meta>Builds say what CI produced. Deployments say what a host actually ran.</p><div class=summary>${counts.map(x=>`<span class=badge>${escapeHtml(x.event_type)} · ${escapeHtml(x.result)}: ${x.count}</span>`).join('')}</div>${rows.map(row=>{const payload=JSON.parse(row.payload),artifacts=payload.artifacts||[];return`<article class="event ${escapeHtml(row.result)}"><div class=top><div><b>${escapeHtml(row.project)} · ${escapeHtml(row.event_type)}</b><p class=meta><code>${escapeHtml(row.source_commit.slice(0,12))}</code> ${escapeHtml(row.source_branch)} ${row.environment?`· ${escapeHtml(row.environment)}`:''}</p></div><span class="result ${escapeHtml(row.result)}">${escapeHtml(row.result)}</span></div><p class=meta>${escapeHtml(row.occurred_at)} · received ${escapeHtml(row.received_at)}</p>${artifacts.map(x=>`<p><b>${escapeHtml(x.component)}</b> <code>${escapeHtml(x.digest||'digest unavailable')}</code></p>`).join('')}<details><summary>raw private receipt</summary><pre>${escapeHtml(JSON.stringify(payload,null,2))}</pre></details></article>`}).join('')||'<p>No operational events received yet.</p>'}</main></body></html>`}
+export function renderEventsPage(db){const rows=db.prepare('SELECT * FROM deployment_events ORDER BY occurred_at DESC LIMIT 100').all();const counts=db.prepare('SELECT event_type,result,count(*) count FROM deployment_events GROUP BY event_type,result ORDER BY event_type,result').all();return`<!doctype html><html><head><meta charset=utf-8><meta name=viewport content="width=device-width"><title>operational events · trace</title><style>:root{--b:#0d1117;--p:#161b22;--l:#30363d;--t:#c9d1d9;--m:#8b949e;--a:#58a6ff;--ok:#3fb950;--bad:#f85149}*{box-sizing:border-box}body{margin:0;background:var(--b);color:var(--t);font:14px/1.55 ui-monospace,monospace}header,main{max-width:1050px;margin:auto;padding:20px}header{display:flex;justify-content:space-between;border-bottom:1px solid var(--l)}a{color:var(--a);text-decoration:none}nav{display:flex;gap:18px}.summary{display:flex;gap:8px;flex-wrap:wrap}.badge{border:1px solid var(--l);padding:3px 8px;border-radius:99px;color:var(--m)}.event{background:var(--p);border:1px solid var(--l);border-left:3px solid var(--a);padding:16px;border-radius:8px;margin:10px 0}.event.failed{border-left-color:var(--bad)}.event.success{border-left-color:var(--ok)}.top{display:flex;justify-content:space-between;gap:12px;align-items:start}.meta{color:var(--m);font-size:12px}.result.success{color:var(--ok)}.result.failed{color:var(--bad)}code,pre{background:var(--b);border:1px solid var(--l);border-radius:5px}code{padding:2px 5px}pre{padding:12px;overflow:auto;max-height:360px;white-space:pre-wrap}details{margin-top:10px}h1{margin-bottom:5px}@media(max-width:600px){.top{display:block}}</style></head><body><header><a href=/><b>trace</b></a><nav><a href=/incidents/new>new incident</a><a href=/candidates>git inbox</a><a href=/events>operational events</a></nav></header><main><h1>Operational events</h1><p class=meta>Builds say what CI produced. Deployments say what a host actually ran.</p><div class=summary>${counts.map(x=>`<span class=badge>${escapeHtml(x.event_type)} · ${escapeHtml(x.result)}: ${x.count}</span>`).join('')}</div>${rows.map(row=>{const payload=JSON.parse(row.payload),artifacts=payload.artifacts||[];return`<article class="event ${escapeHtml(row.result)}"><div class=top><div><b>${escapeHtml(row.project)} · ${escapeHtml(row.event_type)}</b><p class=meta><code>${escapeHtml(row.source_commit.slice(0,12))}</code> ${escapeHtml(row.source_branch)} ${row.environment?`· ${escapeHtml(row.environment)}`:''}</p></div><span class="result ${escapeHtml(row.result)}">${escapeHtml(row.result)}</span></div><p class=meta>${escapeHtml(row.occurred_at)} · received ${escapeHtml(row.received_at)}</p>${artifacts.map(x=>`<p><b>${escapeHtml(x.component)}</b> <code>${escapeHtml(x.digest||'digest unavailable')}</code></p>`).join('')}<details><summary>raw private receipt</summary><pre>${escapeHtml(JSON.stringify(payload,null,2))}</pre></details></article>`}).join('')||'<p>No operational events received yet.</p>'}</main></body></html>`}