From e8bfaa42d7a87d27cf94e0f0f73ef885986ef93d Mon Sep 17 00:00:00 2001
From: M1 <m1-pro@M1s-MacBook-Pro.local>
Date: Tue, 17 Mar 2026 07:32:39 +0400
Subject: [PATCH] fix: static HTML label spans outside swap zone, chart only
 returns SVG + label update script

---
 apps/web/src/routes/dashboard.ts | 26 ++++++++++++++++----------
 apps/web/src/views/detail.ejs    |  6 +++++-
 2 files changed, 21 insertions(+), 11 deletions(-)

diff --git a/apps/web/src/routes/dashboard.ts b/apps/web/src/routes/dashboard.ts
index cec7f3d..16a7be5 100644
--- a/apps/web/src/routes/dashboard.ts
+++ b/apps/web/src/routes/dashboard.ts
@@ -39,16 +39,22 @@ function latencyChartSSR(pings: any[]): string {
   const dots = points.map((p: number[], i: number) =>
     !ups[i] ? `<circle cx="${p[0]}" cy="${p[1]}" r="3" fill="#f87171"/>` : ''
   ).join('');
-  return `<div class="relative w-full h-full">
-    <svg viewBox="0 0 ${w} ${h}" class="w-full h-full" preserveAspectRatio="none">
-      <defs><linearGradient id="areaGrad" x1="0" y1="0" x2="0" y2="1"><stop offset="0%" stop-color="#3b82f6" stop-opacity="0.15"/><stop offset="100%" stop-color="#3b82f6" stop-opacity="0"/></linearGradient></defs>
-      <path d="${areaD}" fill="url(#areaGrad)"/>
-      <path d="${pathD}" fill="none" stroke="#3b82f6" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
-      ${dots}
-    </svg>
-    <span class="absolute top-0 left-1 text-gray-500 text-xs leading-none pointer-events-none">${max}ms</span>
-    <span class="absolute bottom-0 left-1 text-gray-500 text-xs leading-none pointer-events-none">${min}ms</span>
-  </div>`;
+  return `<svg viewBox="0 0 ${w} ${h}" class="w-full h-full" preserveAspectRatio="none">
+    <defs><linearGradient id="areaGrad" x1="0" y1="0" x2="0" y2="1"><stop offset="0%" stop-color="#3b82f6" stop-opacity="0.15"/><stop offset="100%" stop-color="#3b82f6" stop-opacity="0"/></linearGradient></defs>
+    <path d="${areaD}" fill="url(#areaGrad)"/>
+    <path d="${pathD}" fill="none" stroke="#3b82f6" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+    ${dots}
+  </svg>
+  <script>
+    (function() {
+      const el = document.currentScript?.previousElementSibling;
+      if (!el) return;
+      const maxEl = document.getElementById('chart-label-max');
+      const minEl = document.getElementById('chart-label-min');
+      if (maxEl) maxEl.textContent = '${max}ms';
+      if (minEl) minEl.textContent = '${min}ms';
+    })();
+  </script>`;
 }
 
 function escapeHtmlSSR(str: string): string {
diff --git a/apps/web/src/views/detail.ejs b/apps/web/src/views/detail.ejs
index 899b322..e098358 100644
--- a/apps/web/src/views/detail.ejs
+++ b/apps/web/src/views/detail.ejs
@@ -57,7 +57,11 @@
       <!-- Latency chart -->
       <div class="bg-gray-900 border border-gray-800 rounded-xl p-4 mb-8">
         <h3 class="text-sm text-gray-400 mb-3">Response Time</h3>
-        <div id="latency-chart" class="h-32 w-full"><%~ it.latencyChartSSR(chartPings) %></div>
+        <div class="relative h-32 w-full">
+          <span id="chart-label-max" class="absolute top-0 left-1 text-gray-500 text-xs leading-none pointer-events-none z-10"><%= latencies.length ? Math.max(...latencies) + 'ms' : '' %></span>
+          <span id="chart-label-min" class="absolute bottom-0 left-1 text-gray-500 text-xs leading-none pointer-events-none z-10"><%= latencies.length ? Math.min(...latencies) + 'ms' : '' %></span>
+          <div id="latency-chart" class="w-full h-full"><%~ it.latencyChartSSR(chartPings) %></div>
+        </div>
       </div>
 
       <!-- Status bar -->