Build Relay Lab reliability dashboard

2026-11-07 21:12:55 -07:00
commit c7298662a1
7 changed files with 597 additions and 0 deletions
@@ -0,0 +1,110 @@
+'use strict';
+
+const states = ['queued', 'running', 'delivered', 'dead'];
+const byId = (id) => document.getElementById(id);
+let lastRequest;
+let sending = false;
+
+function element(tag, value) {
+  const node = document.createElement(tag);
+  node.textContent = value;
+  return node;
+}
+
+function renderList(id, items, toRow, emptyMessage) {
+  byId(id).replaceChildren(...(items.length ? items.map(toRow) : [element('li', emptyMessage)]));
+}
+
+function render(state) {
+  const latest = state.events[0];
+  byId('backend-event').textContent = latest
+    ? `${latest.job_id.slice(0, 8)} · ${latest.message}`
+    : 'No queue events yet.';
+  const { queued = 0, running = 0, delivered = 0, dead = 0 } = state.counts;
+  byId('pipeline-queued').textContent = `${queued} waiting`;
+  byId('pipeline-running').textContent = `${running} active / 2 workers`;
+  byId('pipeline-outcome').textContent = `${delivered} delivered / ${dead} dead-lettered`;
+  byId('pipeline').dataset.active = String(running > 0);
+  byId('metrics').replaceChildren(...states.map((name) => {
+    const cell = element('div', '');
+    cell.dataset.state = name;
+    cell.append(element('dt', name), element('dd', state.counts[name] ?? 0));
+    return cell;
+  }));
+  renderList('jobs', state.jobs, (job) => {
+    const row = element('li', '');
+    row.dataset.state = job.state;
+    row.append(
+      element('strong', `${job.scenario} · ${job.state}`),
+      element('small', `${job.id.slice(0, 8)} / attempt ${job.attempts}`),
+    );
+    return row;
+  }, 'No jobs yet.');
+  renderList('events', state.events, (event) => {
+    const row = element('li', '');
+    row.append(
+      element('strong', event.message),
+      element('small', `${new Date(event.at * 1000).toLocaleTimeString()} / ${event.job_id.slice(0, 8)}`),
+    );
+    return row;
+  }, 'No events yet.');
+}
+
+async function poll() {
+  const connection = byId('connection');
+  let online = false;
+  try {
+    const response = await fetch('/api/state');
+    if (!response.ok) throw new Error('Queue unavailable');
+    render(await response.json());
+    online = true;
+  } catch {
+    byId('pipeline').dataset.active = 'false';
+    byId('backend-event').textContent = 'Queue data unavailable.';
+  } finally {
+    if (connection.dataset.online !== String(online)) {
+      connection.textContent = online ? 'Queue connected' : 'Queue disconnected';
+      connection.dataset.online = String(online);
+    }
+    setTimeout(poll, 750);
+  }
+}
+
+async function submit(request, button) {
+  if (sending) return;
+  sending = true;
+  byId('backend-request').textContent = 'Sending request…';
+  if (!window.matchMedia('(prefers-reduced-motion: reduce)').matches) {
+    button.animate(
+      [{ transform: 'scale(.96)', boxShadow: '0 0 0 0 #bd93f9aa' },
+       { transform: 'scale(1)', boxShadow: '0 0 0 8px #bd93f900' }],
+      { duration: 320, easing: 'ease-out' },
+    );
+  }
+  try {
+    const response = await fetch('/api/jobs', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify(request),
+    });
+    const result = await response.json();
+    byId('backend-request').textContent = `HTTP ${response.status} · ${JSON.stringify(result)}`;
+    if (!response.ok) throw new Error(result.error || 'Request failed.');
+    lastRequest = request;
+    byId('repeat').disabled = false;
+    byId('status').textContent = `${result.created ? 'Queued job' : 'Reused job'} ${result.id.slice(0, 8)}.`;
+  } catch (error) {
+    if (byId('backend-request').textContent === 'Sending request…') {
+      byId('backend-request').textContent = 'No API response available.';
+    }
+    byId('status').textContent = error.message;
+  } finally {
+    sending = false;
+  }
+}
+
+for (const button of document.querySelectorAll('[data-scenario]')) {
+  button.addEventListener('click', () => submit({ key: crypto.randomUUID(), scenario: button.dataset.scenario }, button));
+}
+byId('repeat').addEventListener('click', (event) => submit(lastRequest, event.currentTarget));
+poll();
@@ -0,0 +1,62 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>Relay Lab — Delivery under failure</title>
+  <link rel="stylesheet" href="/style.css">
+  <script defer src="/app.js"></script>
+</head>
+<body>
+  <header><a href="/">RELAY<span>/</span>LAB</a><span id="connection" role="status">Connecting</span></header>
+  <main>
+    <section class="hero">
+      <div class="hero-copy">
+      <p class="label">01 / RELIABILITY ENGINEERING</p>
+      <h1>Delivery<br><em>under failure.</em></h1>
+      <p>Run an event through a durable queue. Watch two workers compete for jobs, retry failed deliveries, and recover abandoned work.</p>
+      <div class="chips"><span>SQLite WAL</span><span>2 workers</span><span>At-least-once attempts</span></div>
+      </div>
+      <figure class="pipeline" id="pipeline">
+        <figcaption><span>FIG. 01 / DELIVERY PIPELINE</span><span>LIVE</span></figcaption>
+        <ol>
+          <li><span>01</span><strong>Request ingress</strong><small>Idempotency check</small></li>
+          <li data-state="queued"><span>02</span><strong>Durable queue</strong><small id="pipeline-queued">—</small></li>
+          <li data-state="running"><span>03</span><strong>Worker pool</strong><small id="pipeline-running">—</small></li>
+          <li data-state="delivered"><span>04</span><strong>Consumer outcome</strong><small id="pipeline-outcome">—</small></li>
+        </ol>
+      </figure>
+    </section>
+    <section class="panel" aria-labelledby="scenarios">
+      <p class="label">02 / SCENARIO CONTROLS</p>
+      <h2 id="scenarios">Inject an event</h2>
+      <div class="scenarios">
+        <button data-scenario="success"><strong>Happy path</strong><span>Deliver on the first attempt.</span></button>
+        <button data-scenario="transient"><strong>Transient failure</strong><span>Fail twice, then recover.</span></button>
+        <button data-scenario="crash"><strong>Worker interruption</strong><span>Recover after the lease expires.</span></button>
+        <button data-scenario="permanent"><strong>Permanent failure</strong><span>Exhaust retries and dead-letter the job.</span></button>
+      </div>
+      <button id="repeat" disabled>Resubmit last request with the same key</button>
+      <p id="status" role="status">Ready for a scenario.</p>
+      <details class="backend" open>
+        <summary>Backend inspector</summary>
+        <p>SQLite stores the job and its event together. A worker claims the job with a five-second lease, and an expired lease lets another claim recover it.</p>
+        <dl>
+          <div><dt>POST /api/jobs</dt><dd id="backend-request">Run a scenario to see the HTTP response.</dd></div>
+          <div><dt>Latest queue event</dt><dd id="backend-event">Waiting for queue data.</dd></div>
+        </dl>
+      </details>
+    </section>
+    <section class="panel" aria-labelledby="observability">
+      <p class="label">03 / OBSERVABILITY</p>
+      <h2 id="observability">Queue and event log</h2>
+      <dl id="metrics" class="metrics"></dl>
+      <div class="streams">
+        <div><h3>Recent jobs</h3><ol id="jobs"></ol></div>
+        <div><h3>Event log</h3><ol id="events"></ol></div>
+      </div>
+    </section>
+  </main>
+  <footer><span>RELAY / LAB</span><span>Simulated consumer · Real queue and recovery</span></footer>
+</body>
+</html>
@@ -0,0 +1,132 @@
+:root {
+  color-scheme: dark;
+  --paper: #f8f8f2;
+  --muted: #c4c8e0;
+  --ink: #282a36;
+  --panel: #21222c;
+  --line: #44475a;
+  --signal: #bd93f9;
+  --queued: #f1fa8c;
+  --running: #8be9fd;
+  --delivered: #50fa7b;
+  --dead: #ff5555;
+  --mono: ui-monospace, monospace;
+}
+* { box-sizing: border-box; }
+body { margin: 0; background: var(--ink); color: var(--paper); font: 16px/1.55 system-ui, sans-serif; }
+header, main, footer { width: min(1180px, 91vw); margin: auto; }
+header, footer { display: flex; justify-content: space-between; align-items: center; gap: 14px; padding: 22px 0; font: 12px var(--mono); }
+header { border-bottom: 1px solid var(--line); }
+header a { color: inherit; text-decoration: none; font-weight: 800; font-size: 20px; }
+header a span { color: #ff79c6; }
+.label { color: var(--running); }
+h1 em { color: var(--signal); }
+::selection { background: var(--signal); color: var(--ink); }
+footer { color: var(--muted); }
+h1, h2, h3, p, dl, dd, ol { margin: 0; }
+.hero {
+  min-height: 460px;
+  padding: clamp(42px, 8vw, 100px) 0;
+  display: grid;
+  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
+  align-items: center;
+  gap: clamp(24px, 4vw, 64px);
+  background: radial-gradient(ellipse at 76% 40%, #bd93f91c, transparent 60%);
+}
+.label { font: 11px var(--mono); letter-spacing: .12em; }
+h1 { font-size: clamp(50px, 7.4vw, 108px); line-height: .86; letter-spacing: -.085em; margin: 23px 0; }
+h1 em { font-style: normal; }
+.hero-copy > p:not(.label) { max-width: 49ch; color: var(--muted); }
+#connection { color: var(--muted); }
+#connection::before { content: '●'; color: var(--queued); margin-right: 8px; }
+#connection[data-online="true"]::before { color: var(--delivered); }
+#connection[data-online="false"]::before { color: var(--dead); }
+.pipeline {
+  margin: 0;
+  border: 1px solid var(--line);
+  background: var(--panel);
+  box-shadow: 0 20px 50px #15151e55;
+}
+.pipeline figcaption {
+  display: flex;
+  justify-content: space-between;
+  gap: 10px;
+  border-bottom: 1px solid var(--line);
+  padding: 13px 16px;
+  font: 11px var(--mono);
+  color: var(--muted);
+}
+.pipeline figcaption span:last-child { color: var(--signal); }
+.pipeline ol { list-style: none; padding: 0 16px; }
+.pipeline li {
+  display: grid;
+  grid-template-columns: 30px minmax(0, 1fr);
+  gap: 2px 12px;
+  align-items: center;
+  padding: 11px 0;
+}
+.pipeline li + li { border-top: 1px solid var(--line); }
+.pipeline li > span {
+  grid-row: span 2;
+  padding: 6px 0;
+  border: 1px solid var(--line);
+  color: var(--state-color, var(--signal));
+  text-align: center;
+  font: 11px var(--mono);
+}
+.pipeline li strong { font-size: 13px; }
+.pipeline li small { font-family: var(--mono); font-size: 11px; }
+.pipeline[data-active="true"] [data-state="running"] > span {
+  border-color: var(--running);
+  box-shadow: 0 0 14px #8be9fd45;
+}
+.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
+.chips span { font: 11px var(--mono); border: 1px solid var(--line); padding: 6px 9px; }
+.panel { padding: clamp(20px, 4vw, 48px); background: var(--panel); border: 1px solid var(--line); margin-bottom: 16px; }
+h2 { font-size: clamp(27px, 4vw, 52px); letter-spacing: -.06em; line-height: 1.06; margin: 9px 0 20px; }
+.scenarios, .metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
+button { color: var(--paper); background: var(--ink); border: 1px solid var(--line); font: inherit; cursor: pointer; }
+button:focus-visible, a:focus-visible { outline: 2px solid var(--signal); outline-offset: 3px; }
+button:hover:not(:disabled) { border-color: var(--signal); }
+button:disabled { opacity: .55; cursor: default; }
+.scenarios button { padding: 14px; min-height: 100px; text-align: left; }
+.scenarios button strong { display: block; margin-bottom: 4px; }
+button { transition: border-color .18s, background-color .18s; }
+button:hover:not(:disabled) { background-color: var(--line); }
+.scenarios span, small { display: block; color: var(--muted); font-size: 13px; }
+#repeat { margin-top: 12px; padding: 8px 12px; }
+#status { color: var(--signal); min-height: 1.6em; margin-top: 10px; font: 12px var(--mono); }
+.backend {
+  margin-top: 18px;
+  padding: 12px 16px;
+  border: 1px solid var(--line);
+  background: var(--ink);
+}
+.backend summary { cursor: pointer; color: var(--running); font: 13px var(--mono); }
+.backend p { max-width: 72ch; margin: 10px 0; color: var(--muted); font-size: 13px; }
+.backend dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
+.backend dt { color: var(--signal); font: 12px var(--mono); }
+.backend dd { margin-top: 4px; overflow-wrap: anywhere; font: 12px/1.5 var(--mono); }
+.metrics div { background: var(--ink); padding: 12px; }
+.metrics dt { text-transform: uppercase; font: 11px var(--mono); color: var(--muted); }
+.metrics dd { font: 32px var(--mono); }
+[data-state="queued"] { --state-color: var(--queued); }
+[data-state="running"] { --state-color: var(--running); }
+[data-state="delivered"] { --state-color: var(--delivered); }
+[data-state="dead"] { --state-color: var(--dead); }
+.metrics [data-state] { border-top: 2px solid var(--state-color); }
+.metrics [data-state] dd, #jobs [data-state] strong { color: var(--state-color); }
+.streams { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 20px; }
+.streams ol { padding: 0; list-style: none; max-height: 330px; overflow: auto; }
+.streams li { border-top: 1px solid var(--line); padding: 9px 0; }
+.streams h3 { margin-bottom: 7px; }
+#events li { font-family: var(--mono); font-size: 12px; }
+@media (max-width: 700px) {
+  .backend dl { grid-template-columns: 1fr; }
+  .hero { grid-template-columns: 1fr; }
+  .scenarios, .metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
+  .streams { grid-template-columns: 1fr; }
+}
+@media (prefers-reduced-motion: reduce) {
+  button { transition: none; }
+}