Performance table: merge error counts into their duration columns, center numeric columns

package.json

@@ -1,6 +1,6 @@
 {
   "name": "site-gateway",
-  "version": "0.11.67",
+  "version": "0.11.68",
   "private": true,
   "description": "Site Gateway: simple self-hosted website publishing, reverse proxying, and automatic HTTPS.",
   "type": "module",

src/public/app.js

@@ -281,7 +281,8 @@ function renderPerformance() {
   $("#performance-sparkline").innerHTML = points.length ? `${gridLines}<path d="${areaPath}" fill="var(--green)" opacity="0.12" stroke="none" /><path d="${smoothLine}" fill="none" stroke="var(--green)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />` : "";
   if (!points.length) $("#performance-sparkline-labels").innerHTML = '<span class="axis-label" style="left:0;width:100%;top:45%;text-align:center">No request data for this window yet.</span>';
   const routes = data.routes || [];
-  $("#performance-rows").innerHTML = routes.length ? routes.map(route => `<tr class="${selected && route.host === selected ? "row-highlight" : ""}"><td title="${escapeHtml(route.host)}">${escapeHtml(route.host)}</td><td>${route.hourRequests}</td><td>${route.dayRequests}</td><td>${route.dayErrors ? `<span class="http-status bad">${route.dayErrors}</span>` : "0"}</td><td>${route.dayAvgMs == null ? "—" : `${route.dayAvgMs} ms`}</td></tr>`).join("") : '<tr><td colspan="5" class="quiet-state">No requests have been logged yet.</td></tr>';
+  const countCell = (count, errors) => `${count}${errors ? ` <span class="count-divider">·</span> <span class="http-status bad">${errors}</span>` : ""}`;
+  $("#performance-rows").innerHTML = routes.length ? routes.map(route => `<tr class="${selected && route.host === selected ? "row-highlight" : ""}"><td title="${escapeHtml(route.host)}">${escapeHtml(route.host)}</td><td>${countCell(route.hourRequests, route.hourErrors)}</td><td>${countCell(route.dayRequests, route.dayErrors)}</td><td>${route.dayAvgMs == null ? "—" : `${route.dayAvgMs} ms`}</td></tr>`).join("") : '<tr><td colspan="4" class="quiet-state">No requests have been logged yet.</td></tr>';
   if (selected) $(`#performance-rows tr.row-highlight`)?.scrollIntoView({ block: "nearest" });
 }
 

src/public/index.html

@@ -155,7 +155,7 @@
         <section class="dashboard-panel">
           <div class="panel-heading"><div><p class="eyebrow">Per-route</p><h2>Throughput by domain</h2></div></div>
           <p class="muted feature-note">Requests, error rate, and average response time for each configured domain.</p>
-          <div class="table-wrap performance-table-wrap"><table class="performance-table"><thead><tr><th>Domain</th><th>Last hour</th><th>Last 24h</th><th>Errors (24h)</th><th>Avg. response</th></tr></thead><tbody id="performance-rows"></tbody></table></div>
+          <div class="table-wrap performance-table-wrap"><table class="performance-table"><thead><tr><th>Domain</th><th>Last hour</th><th>Last 24h</th><th>Avg. response</th></tr></thead><tbody id="performance-rows"></tbody></table></div>
         </section>
       </section>
       <section id="users-view" class="feature-view hidden">

src/public/styles.css

@@ -272,9 +272,9 @@ select{appearance:none!important;-webkit-appearance:none!important;background-re
 .performance-table{width:100%;border-collapse:collapse;font-size:.82rem;table-layout:fixed}
 .performance-table th,.performance-table td{padding:13px 15px;text-align:left;border-top:1px solid var(--line);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
 .performance-table thead th{border-top:0;color:var(--muted);font-size:.7rem;text-transform:uppercase;letter-spacing:.06em;white-space:normal}
-.performance-table th:nth-child(1),.performance-table td:nth-child(1){width:32%}
-.performance-table th:nth-child(2),.performance-table td:nth-child(2){width:14%}
-.performance-table th:nth-child(3),.performance-table td:nth-child(3){width:14%}
-.performance-table th:nth-child(4),.performance-table td:nth-child(4){width:19%;text-align:center}
-.performance-table th:nth-child(5),.performance-table td:nth-child(5){width:21%}
-@media(max-width:760px){.performance-table th:nth-child(2),.performance-table td:nth-child(2),.performance-table th:nth-child(3),.performance-table td:nth-child(3){display:none}.performance-table th:nth-child(1),.performance-table td:nth-child(1){width:46%}.performance-table th:nth-child(4),.performance-table td:nth-child(4){width:27%}.performance-table th:nth-child(5),.performance-table td:nth-child(5){width:27%}}
+.performance-table th:nth-child(1),.performance-table td:nth-child(1){width:34%}
+.performance-table th:nth-child(2),.performance-table td:nth-child(2){width:20%;text-align:center}
+.performance-table th:nth-child(3),.performance-table td:nth-child(3){width:23%;text-align:center}
+.performance-table th:nth-child(4),.performance-table td:nth-child(4){width:23%;text-align:center}
+.performance-table .count-divider{color:var(--muted);margin:0 2px}
+@media(max-width:760px){.performance-table th:nth-child(2),.performance-table td:nth-child(2){display:none}.performance-table th:nth-child(1),.performance-table td:nth-child(1){width:40%}.performance-table th:nth-child(3),.performance-table td:nth-child(3){width:30%}.performance-table th:nth-child(4),.performance-table td:nth-child(4){width:30%}}