Simplify Relay Lab dashboard and retry handling

public/app.js

@@ -1,6 +1,7 @@
 'use strict';
 
 const states = ['queued', 'running', 'delivered', 'dead'];
+const pollInterval = 750;
 const byId = (id) => document.getElementById(id);
 let lastRequest;
 let sending = false;
@@ -15,16 +16,19 @@ function renderList(id, items, toRow, emptyMessage) {
   byId(id).replaceChildren(...(items.length ? items.map(toRow) : [element('li', emptyMessage)]));
 }
 
+function renderPipeline({ queued = 0, running = 0, delivered = 0, dead = 0 }) {
+  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);
+}
+
 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);
+  renderPipeline(state.counts);
   byId('metrics').replaceChildren(...states.map((name) => {
     const cell = element('div', '');
     cell.dataset.state = name;
@@ -66,45 +70,48 @@ async function poll() {
       connection.textContent = online ? 'Queue connected' : 'Queue disconnected';
       connection.dataset.online = String(online);
     }
-    setTimeout(poll, 750);
+    setTimeout(poll, pollInterval);
   }
 }
 
 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' },
-    );
-  }
+  const inspector = byId('backend-request');
+  inspector.textContent = 'Sending request…';
+  let responseSummary = 'No API response available.';
   try {
+    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' });
+    }
     const response = await fetch('/api/jobs', {
       method: 'POST',
       headers: { 'Content-Type': 'application/json' },
       body: JSON.stringify(request),
     });
+    responseSummary = `HTTP ${response.status} · Response was not valid JSON.`;
     const result = await response.json();
-    byId('backend-request').textContent = `HTTP ${response.status} · ${JSON.stringify(result)}`;
+    responseSummary = `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 {
+    inspector.textContent = responseSummary;
     sending = false;
   }
 }
 
 for (const button of document.querySelectorAll('[data-scenario]')) {
-  button.addEventListener('click', () => submit({ key: crypto.randomUUID(), scenario: button.dataset.scenario }, button));
+  button.addEventListener('click', () => {
+    const request = { key: crypto.randomUUID(), scenario: button.dataset.scenario };
+    submit(request, button);
+  });
 }
 byId('repeat').addEventListener('click', (event) => submit(lastRequest, event.currentTarget));
 poll();

public/index.html

@@ -12,10 +12,10 @@
   <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>
+        <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>