From 697513a5cffdf4da9c30aa360feda4ca3a8d389e Mon Sep 17 00:00:00 2001
From: nate <nate@forehead-gate.com>
Date: Wed, 8 Apr 2026 16:51:26 +0400
Subject: [PATCH] fix

---
 apps/status/src/views/page.ejs | 81 +++++++++++++++++++---------------
 1 file changed, 46 insertions(+), 35 deletions(-)

diff --git a/apps/status/src/views/page.ejs b/apps/status/src/views/page.ejs
index 3317b1e..5dde360 100644
--- a/apps/status/src/views/page.ejs
+++ b/apps/status/src/views/page.ejs
@@ -185,42 +185,31 @@
       <span><%= overallText %></span>
     </div>
 
-    <%
-      // Shared timeline render — used for both active (top of page) and past
-      // (bottom) incidents. Standard status-page pattern: every update from
-      // every status the incident has been in, newest first.
-      function renderIncident(i) {
-        const klass = i.resolved_at ? `incident ${i.severity} resolved` : `incident ${i.severity}`;
-        const startedFmt = fmtTimestamp(i.started_at);
-        const resolvedFmt = i.resolved_at ? fmtTimestamp(i.resolved_at) : null;
-        let html = `<div id="incident-${i.id}" class="${klass}">`;
-        html += `<div class="incident-title">${escapeHtmlSSR(i.title)}</div>`;
-        html += `<div class="incident-meta"><span class="pill ${i.status}">${i.status}</span>`;
-        html += `Started ${startedFmt}`;
-        if (resolvedFmt) html += ` · Resolved ${resolvedFmt}`;
-        html += `</div>`;
-        if (i.updates && i.updates.length > 0) {
-          html += `<div class="incident-timeline">`;
-          for (const u of i.updates) {
-            html += `<div class="incident-update">`;
-            html += `<div class="head"><span class="status ${u.status}">${u.status}</span><span>${fmtTimestamp(u.created_at)}</span></div>`;
-            html += `<div class="body">${u.body_html}</div>`;
-            html += `</div>`;
-          }
-          html += `</div>`;
-        }
-        html += `</div>`;
-        return html;
-      }
-      // Eta doesn't have a built-in HTML escape helper exposed at template
-      // scope, so define a tiny one inline. Only used for incident titles.
-      function escapeHtmlSSR(s) {
-        return String(s).replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;').replace(/'/g, '&#39;');
-      }
-    %>
     <% if (incidents.active.length > 0) { %>
       <div class="incidents">
-        <% incidents.active.forEach(function(i) { %><%~ renderIncident(i) %><% }); %>
+        <% incidents.active.forEach(function(i) { %>
+          <div id="incident-<%= i.id %>" class="incident <%= i.severity %><%= i.resolved_at ? ' resolved' : '' %>">
+            <div class="incident-title"><%= i.title %></div>
+            <div class="incident-meta">
+              <span class="pill <%= i.status %>"><%= i.status %></span>
+              Started <%= fmtTimestamp(i.started_at) %>
+              <% if (i.resolved_at) { %> · Resolved <%= fmtTimestamp(i.resolved_at) %><% } %>
+            </div>
+            <% if (i.updates && i.updates.length > 0) { %>
+              <div class="incident-timeline">
+                <% i.updates.forEach(function(u) { %>
+                  <div class="incident-update">
+                    <div class="head">
+                      <span class="status <%= u.status %>"><%= u.status %></span>
+                      <span><%= fmtTimestamp(u.created_at) %></span>
+                    </div>
+                    <div class="body"><%~ u.body_html %></div>
+                  </div>
+                <% }); %>
+              </div>
+            <% } %>
+          </div>
+        <% }); %>
       </div>
     <% } %>
 
@@ -311,7 +300,29 @@
     <% if (incidents.recent.length > 0) { %>
       <div class="past-incidents">
         <h2>Past incidents</h2>
-        <% incidents.recent.forEach(function(i) { %><%~ renderIncident(i) %><% }); %>
+        <% incidents.recent.forEach(function(i) { %>
+          <div id="incident-<%= i.id %>" class="incident <%= i.severity %><%= i.resolved_at ? ' resolved' : '' %>">
+            <div class="incident-title"><%= i.title %></div>
+            <div class="incident-meta">
+              <span class="pill <%= i.status %>"><%= i.status %></span>
+              Started <%= fmtTimestamp(i.started_at) %>
+              <% if (i.resolved_at) { %> · Resolved <%= fmtTimestamp(i.resolved_at) %><% } %>
+            </div>
+            <% if (i.updates && i.updates.length > 0) { %>
+              <div class="incident-timeline">
+                <% i.updates.forEach(function(u) { %>
+                  <div class="incident-update">
+                    <div class="head">
+                      <span class="status <%= u.status %>"><%= u.status %></span>
+                      <span><%= fmtTimestamp(u.created_at) %></span>
+                    </div>
+                    <div class="body"><%~ u.body_html %></div>
+                  </div>
+                <% }); %>
+              </div>
+            <% } %>
+          </div>
+        <% }); %>
       </div>
     <% } %>