From 4c1c6892bce67e13984e931cb995cfe3b3d52fd9 Mon Sep 17 00:00:00 2001
From: Anirudh Oppiliappan <anirudh@tangled.org>
Date: Tue, 1 Sep 2026 04:04:33 +0300
Subject: [PATCH] status: show past incidents

Signed-off-by: Anirudh Oppiliappan <anirudh@tangled.org>
---
 status/src/index.ts | 80 +++++++++++++++++++++++++++------------------
 1 file changed, 48 insertions(+), 32 deletions(-)

diff --git a/status/src/index.ts b/status/src/index.ts
index 44d6353d2..ecc9196a0 100644
--- a/status/src/index.ts
+++ b/status/src/index.ts
@@ -459,6 +459,7 @@ interface Snapshot {
   activeIncidents: Incident[];
   activeUpdates: Map<number, IncidentUpdate[]>;
   resolved: Incident[];
+  resolvedUpdates: Map<number, IncidentUpdate[]>;
   chartIncidents: IncidentRange[];
 }
 
@@ -532,6 +533,22 @@ async function loadSnapshot(env: Env): Promise<Snapshot> {
     ).all<Incident>()
   ).results;
 
+  const resolvedUpdates = new Map<number, IncidentUpdate[]>();
+  const resolvedRows = (
+    await env.DB.prepare(
+      `SELECT * FROM incident_updates
+       WHERE incident_id IN (
+         SELECT id FROM incidents WHERE state = 'resolved' ORDER BY created_at DESC LIMIT 10
+       )
+       ORDER BY created_at DESC`,
+    ).all<IncidentUpdate>()
+  ).results;
+  for (const u of resolvedRows) {
+    const list = resolvedUpdates.get(u.incident_id) ?? [];
+    list.push(u);
+    resolvedUpdates.set(u.incident_id, list);
+  }
+
   // Incidents whose time range overlaps the 24h chart window (no LIMIT — an
   // older but still-active/long-running incident must not be dropped).
   const chartIncidents = (
@@ -543,7 +560,7 @@ async function loadSnapshot(env: Env): Promise<Snapshot> {
     ).all<IncidentRange>()
   ).results;
 
-  return { services, latest, statuses, histories, enabled, overall, activeIncidents, activeUpdates, resolved, chartIncidents };
+  return { services, latest, statuses, histories, enabled, overall, activeIncidents, activeUpdates, resolved, resolvedUpdates, chartIncidents };
 }
 
 // ---------------------------------------------------------------------------
@@ -635,38 +652,42 @@ ${items}
 // Public dashboard
 // ---------------------------------------------------------------------------
 
+function incidentCard(inc: Incident, updates: IncidentUpdate[]): string {
+  const parts = [
+    `<div class="border border-gray-200 dark:border-gray-700 rounded p-4 mb-4">
+      <div class="flex items-center gap-2">
+        <span class="inline-flex items-center ${stateBadgeClass(inc.state)} text-white text-xs rounded px-2 py-0.5">${stateLabel(inc.state)}</span>
+        <span class="font-semibold">${escapeHtml(inc.title)}</span>
+        <span class="ml-auto text-sm text-gray-500 dark:text-gray-400">${fmt(inc.created_at)}</span>
+      </div>`,
+  ];
+  if (inc.description) {
+    parts.push(`<p class="mt-2 text-sm">${escapeHtml(inc.description)}</p>`);
+  }
+  if (updates.length > 0) {
+    parts.push('<ul class="mt-3 space-y-2">');
+    for (const u of updates) {
+      parts.push(`<li class="text-sm border-l-2 pl-3 ${u.state ? 'border-gray-300 dark:border-gray-600' : 'border-gray-200 dark:border-gray-700'}">
+        ${u.state ? `<span class="inline-flex items-center ${stateBadgeClass(u.state)} text-white text-xs rounded px-2 py-0.5 mr-2">${stateLabel(u.state)}</span>` : ''}<span>${escapeHtml(u.body)}</span>
+        <span class="block text-xs text-gray-500 dark:text-gray-400 mt-0.5">${fmt(u.created_at)}</span>
+      </li>`);
+    }
+    parts.push('</ul>');
+  }
+  parts.push('</div>');
+  return parts.join('\n');
+}
+
 async function dashboard(env: Env): Promise<Response> {
   const snap = await loadSnapshot(env);
   const pill = OVERALL_STATUS_UI[snap.overall];
   const body: string[] = [headerRow(pill.cls, pill.label)];
 
-  // Active incidents
   if (snap.activeIncidents.length > 0) {
     body.push(`<section class="my-8">
       <h2 class="text-lg font-semibold mb-3">Active incidents</h2>`);
     for (const inc of snap.activeIncidents) {
-      body.push(`
-      <div class="border border-gray-200 dark:border-gray-700 rounded p-4 mb-4">
-        <div class="flex items-center gap-2">
-          <span class="inline-flex items-center ${stateBadgeClass(inc.state)} text-white text-xs rounded px-2 py-0.5">${stateLabel(inc.state)}</span>
-          <span class="font-semibold">${escapeHtml(inc.title)}</span>
-          <span class="ml-auto text-sm text-gray-500 dark:text-gray-400">${fmt(inc.created_at)}</span>
-        </div>`);
-      if (inc.description) {
-        body.push(`<p class="mt-2 text-sm">${escapeHtml(inc.description)}</p>`);
-      }
-      const updates = snap.activeUpdates.get(inc.id) ?? [];
-      if (updates.length > 0) {
-        body.push('<ul class="mt-3 space-y-2">');
-        for (const u of updates) {
-          body.push(`<li class="text-sm border-l-2 pl-3 ${u.state ? 'border-gray-300 dark:border-gray-600' : 'border-gray-200 dark:border-gray-700'}">
-            ${u.state ? `<span class="inline-flex items-center ${stateBadgeClass(u.state)} text-white text-xs rounded px-2 py-0.5 mr-2">${stateLabel(u.state)}</span>` : ''}<span>${escapeHtml(u.body)}</span>
-            <span class="block text-xs text-gray-500 dark:text-gray-400 mt-0.5">${fmt(u.created_at)}</span>
-          </li>`);
-        }
-        body.push('</ul>');
-      }
-      body.push('</div>');
+      body.push(incidentCard(inc, snap.activeUpdates.get(inc.id) ?? []));
     }
     body.push('</section>');
   }
@@ -710,18 +731,13 @@ async function dashboard(env: Env): Promise<Response> {
   }
   body.push('</div></section>');
 
-  // Resolved history
   if (snap.resolved.length > 0) {
     body.push(`<section class="my-8">
-      <h2 class="text-lg font-semibold mb-3">Past incidents</h2>
-      <ul class="divide-y divide-gray-200 dark:divide-gray-700 border border-gray-200 dark:border-gray-700 rounded">`);
+      <h2 class="text-lg font-semibold mb-3">Past incidents</h2>`);
     for (const inc of snap.resolved) {
-      body.push(`<li class="flex items-center gap-2 px-4 py-2 text-sm">
-        <span class="text-xs text-gray-500 dark:text-gray-400 shrink-0">${fmt(inc.resolved_at)}</span>
-        <span class="truncate">${escapeHtml(inc.title)}</span>
-      </li>`);
+      body.push(incidentCard(inc, snap.resolvedUpdates.get(inc.id) ?? []));
     }
-    body.push('</ul></section>');
+    body.push('</section>');
   }
 
   return html(page('Tangled · Service Status', body.join('\n'), true));
-- 
2.51.2