Color the dot beside each host name by its latest latency (closes #207)

updateHostRow gives the dot the color of the row's latest figure from
CONFIG.latencyColors, gray when the check failed or no result has come
yet. Pausing still sets it gray. The dot carries a status-dot class and
data-host, as the figure and status line do, so both functions find it
the same way.

Model: opus-5-5

web/src/main.js

@@ -30,8 +30,8 @@ export const CONFIG = {
         return [0, 1, 2, 3, 4, 5].map((i) => Math.round((d * i) / 5));
     },
     canvasHeight: 96,
-    // A latency figure and its sparkline take the color of the first entry
-    // whose limit, in ms, the latency is below.
+    // A latency figure, its row's dot and its sparkline take the color of
+    // the first entry whose limit, in ms, the latency is below.
     latencyColors: [
         { below: 50, hex: "#22c55e", className: "text-green-500" },
         { below: 100, hex: "#84cc16", className: "text-lime-500" },
@@ -819,7 +819,7 @@ export function hostRowHTML(host, index, showPin = true) {
         ${pinBtn}
         <div class="w-[420px] flex-shrink-0 grid grid-cols-[minmax(0,1fr)_auto] items-center">
           <div class="flex items-center gap-2 min-w-[200px]">
-            <div class="w-3 h-3 rounded-full flex-shrink-0 bg-[#6b7280]"></div>
+            <div class="status-dot w-3 h-3 rounded-full flex-shrink-0 bg-[#6b7280]" data-host="${index}"></div>
             <span class="font-medium text-white truncate">${escapeHTML(host.name)}</span>
           </div>
           <div class="latency-value text-4xl font-bold tabular-nums text-right mt-3" data-host="${index}">
@@ -982,8 +982,10 @@ function updateHostRow(host, index) {
     const canvas = document.querySelector(
         `.sparkline-canvas[data-host="${index}"]`,
     );
-    if (!latencyEl || !statusEl || !canvas) return;
+    const dot = document.querySelector(`.status-dot[data-host="${index}"]`);
+    if (!latencyEl || !statusEl || !canvas || !dot) return;
 
+    dot.style.backgroundColor = latencyHex(host.lastLatency);
     if (host.lastLatency !== null) {
         const cls = latencyClass(host.lastLatency, host.status);
         latencyEl.innerHTML = `<span class="${cls}">${host.lastLatency}<span class="text-lg">ms</span></span>`;
@@ -1420,12 +1422,8 @@ export function greyOutUI(state) {
             statusEl.textContent = "paused";
             statusEl.className = `${STATUS_TEXT_CLASS} text-gray-500`;
         }
-        // Grey out the status dot
-        const row = document.querySelector(`.host-row[data-index="${i}"]`);
-        if (row) {
-            const dot = row.querySelector(".rounded-full");
-            if (dot) dot.style.backgroundColor = "#6b7280";
-        }
+        const dot = document.querySelector(`.status-dot[data-host="${i}"]`);
+        if (dot) dot.style.backgroundColor = latencyHex(null);
     });
 
     // Grey out summary current stats