Refactor to classes and implement UI improvements

Architecture:
- Extract AppState and HostState classes (no global mutable state)
- Extract SparklineRenderer class with static methods
- Extract CONFIG object for all constants
- Break monolithic functions into focused helpers

Features:
- Clickable service URLs (open in new tab, existing styling)
- Health status box above summary (red DEGRADED if >half unreachable)
- Local Gateway separated into bottom group
- Local Gateway excluded from WAN min/max/avg summary stats
- Pause stops probes but history keeps scrolling (blank gaps, no false outage)
- WAN_HOSTS / LOCAL_HOSTS separation with indexed rendering

src/main.js

@@ -1,43 +1,109 @@
 import './styles.css'
 
-// Configuration
+// --- Configuration -----------------------------------------------------------
-const UPDATE_INTERVAL = 2000 // ms
-const HISTORY_DURATION = 300 // seconds
-const MAX_HISTORY_POINTS = Math.ceil((HISTORY_DURATION * 1000) / UPDATE_INTERVAL) // 150 points
-const REQUEST_TIMEOUT = 1000 // ms
 
-// Pause state
+const CONFIG = Object.freeze({
-let isPaused = false
+  updateInterval: 2000,
-let intervalId = null
+  historyDuration: 300,
+  requestTimeout: 1000,
+  maxLatency: 1000,
+  yAxisTicks: [0, 250, 500, 750, 1000],
+  xAxisTicks: [0, 60, 120, 180, 240, 300],
+  canvasHeight: 80,
+  get maxHistoryPoints() {
+    return Math.ceil((this.historyDuration * 1000) / this.updateInterval)
+  },
+})
 
-// Hosts to monitor (IPv4 preferred endpoints)
+const WAN_HOSTS = [
-const HOSTS = [
+  { name: 'Google Cloud Console', url: 'https://console.cloud.google.com' },
-  { name: 'Google Cloud Console', url: 'https://console.cloud.google.com', color: '#4285f4' },
+  { name: 'AWS Console', url: 'https://console.aws.amazon.com' },
-  { name: 'AWS Console', url: 'https://console.aws.amazon.com', color: '#ff9900' },
+  { name: 'GitHub', url: 'https://github.com' },
-  { name: 'GitHub', url: 'https://github.com', color: '#f0f6fc' },
+  { name: 'Cloudflare', url: 'https://www.cloudflare.com' },
-  { name: 'Cloudflare', url: 'https://www.cloudflare.com', color: '#f38020' },
+  { name: 'Microsoft Azure', url: 'https://portal.azure.com' },
-  { name: 'Microsoft Azure', url: 'https://portal.azure.com', color: '#0078d4' },
+  { name: 'DigitalOcean', url: 'https://www.digitalocean.com' },
-  { name: 'DigitalOcean', url: 'https://www.digitalocean.com', color: '#0080ff' },
+  { name: 'Fastly CDN', url: 'https://www.fastly.com' },
-  { name: 'Fastly CDN', url: 'https://www.fastly.com', color: '#ff282d' },
+  { name: 'Akamai', url: 'https://www.akamai.com' },
-  { name: 'Akamai', url: 'https://www.akamai.com', color: '#0096d6' },
+  { name: 'datavi.be', url: 'https://datavi.be' },
-  { name: 'Local Gateway', url: 'http://192.168.100.1', color: '#a855f7' },
-  { name: 'datavi.be', url: 'https://datavi.be', color: '#10b981' },
 ]
 
-// State: history for each host
+const LOCAL_HOSTS = [
-const hostState = HOSTS.map(host => ({
+  { name: 'Local Gateway', url: 'http://192.168.100.1' },
-  ...host,
+]
-  history: [], // Array of { timestamp, latency } or { timestamp, error }
+
-  lastLatency: null,
+// --- App State ---------------------------------------------------------------
-  status: 'pending', // 'online', 'offline', 'pending', 'error'
+
-}))
+class HostState {
+  constructor(host) {
+    this.name = host.name
+    this.url = host.url
+    this.history = []       // { timestamp, latency, paused }
+    this.lastLatency = null
+    this.status = 'pending' // 'online' | 'offline' | 'error' | 'pending'
+  }
+
+  pushSample(timestamp, result) {
+    this.history.push({ timestamp, latency: result.latency, error: result.error })
+    this._trim()
+    this.lastLatency = result.latency
+    if (result.error === 'timeout') this.status = 'error'
+    else if (result.error) this.status = 'offline'
+    else this.status = 'online'
+  }
+
+  pushPaused(timestamp) {
+    this.history.push({ timestamp, latency: null, paused: true })
+    this._trim()
+  }
+
+  averageLatency() {
+    const valid = this.history.filter(p => p.latency !== null)
+    if (valid.length === 0) return null
+    return Math.round(valid.reduce((s, p) => s + p.latency, 0) / valid.length)
+  }
+
+  _trim() {
+    while (this.history.length > CONFIG.maxHistoryPoints) this.history.shift()
+  }
+}
+
+class AppState {
+  constructor() {
+    this.wan = WAN_HOSTS.map(h => new HostState(h))
+    this.local = LOCAL_HOSTS.map(h => new HostState(h))
+    this.paused = false
+  }
+
+  get allHosts() { return [...this.wan, ...this.local] }
+
+  /** WAN-only stats from latest sample (excludes local) */
+  wanStats() {
+    const reachable = this.wan.filter(h => h.lastLatency !== null)
+    const latencies = reachable.map(h => h.lastLatency)
+    const total = this.wan.length
+    if (latencies.length === 0) return { reachable: 0, total, min: null, max: null, avg: null }
+    return {
+      reachable: latencies.length,
+      total,
+      min: Math.min(...latencies),
+      max: Math.max(...latencies),
+      avg: Math.round(latencies.reduce((a, b) => a + b, 0) / latencies.length),
+    }
+  }
+
+  /** Overall health: true = healthy (more than half WAN reachable) */
+  isHealthy() {
+    const reachable = this.wan.filter(h => h.lastLatency !== null).length
+    return reachable > this.wan.length / 2
+  }
+}
+
+// --- Latency Measurement -----------------------------------------------------
 
-// Measure latency using HEAD request
 async function measureLatency(url) {
   const controller = new AbortController()
-  const timeoutId = setTimeout(() => controller.abort(), REQUEST_TIMEOUT)
+  const timeoutId = setTimeout(() => controller.abort(), CONFIG.requestTimeout)
 
-  // Add cache-busting parameter
   const targetUrl = new URL(url)
   targetUrl.searchParams.set('_cb', Date.now().toString())
 
@@ -50,40 +116,30 @@ async function measureLatency(url) {
       cache: 'no-store',
       signal: controller.signal,
     })
-
     const latency = Math.round(performance.now() - start)
     clearTimeout(timeoutId)
-    // Clamp >1000ms to unreachable
+    if (latency > CONFIG.maxLatency) return { latency: null, error: 'timeout' }
-    if (latency > 1000) {
-      return { latency: null, error: 'timeout' }
-    }
     return { latency, error: null }
   } catch (err) {
     clearTimeout(timeoutId)
-
+    if (err.name === 'AbortError') return { latency: null, error: 'timeout' }
-    if (err.name === 'AbortError') {
-      return { latency: null, error: 'timeout' }
-    }
-
     return { latency: null, error: 'unreachable' }
   }
 }
 
-// Get latency color (raw hex for canvas)
+// --- Color Helpers -----------------------------------------------------------
-function getLatencyColor(latency) {
+
-  if (latency === null) return '#6b7280' // gray
+function latencyHex(latency) {
-  if (latency < 50) return '#22c55e'  // green
+  if (latency === null) return '#6b7280'
-  if (latency < 100) return '#84cc16' // lime
+  if (latency < 50)  return '#22c55e'
-  if (latency < 200) return '#eab308' // yellow
+  if (latency < 100) return '#84cc16'
-  if (latency < 500) return '#f97316' // orange
+  if (latency < 200) return '#eab308'
-  return '#ef4444' // red
+  if (latency < 500) return '#f97316'
+  return '#ef4444'
 }
 
-// Get Tailwind class for latency
+function latencyClass(latency, status) {
-function getLatencyClass(latency, status) {
+  if (status === 'offline' || status === 'error' || latency === null) return 'text-gray-500'
-  if (status === 'offline' || status === 'error' || latency === null) {
-    return 'text-gray-500'
-  }
   if (latency < 50)  return 'text-green-500'
   if (latency < 100) return 'text-lime-500'
   if (latency < 200) return 'text-yellow-500'
@@ -91,154 +147,148 @@ function getLatencyClass(latency, status) {
   return 'text-red-500'
 }
 
-// Fixed axis constants
+// --- Sparkline Renderer ------------------------------------------------------
-const Y_AXIS_MAX = 1000 // ms
-const Y_AXIS_TICKS = [0, 250, 500, 750, 1000]
-const X_AXIS_TICKS = [0, 60, 120, 180, 240, 300] // seconds ago
 
-// Draw sparkline on canvas - latest point at right edge, growing left
+class SparklineRenderer {
-function drawSparkline(canvas, history) {
+  static MARGIN = { left: 35, right: 10, top: 5, bottom: 18 }
+
+  static draw(canvas, history) {
     const ctx = canvas.getContext('2d')
     const dpr = window.devicePixelRatio || 1
-  const width = canvas.width / dpr
+    const w = canvas.width / dpr
-  const height = canvas.height / dpr
+    const h = canvas.height / dpr
+    const m = SparklineRenderer.MARGIN
+    const cw = w - m.left - m.right
+    const ch = h - m.top - m.bottom
 
-  // Margins for axis labels
+    ctx.clearRect(0, 0, w, h)
-  const marginLeft = 35
+    SparklineRenderer._drawYAxis(ctx, w, h, m, ch)
-  const marginRight = 10
+    SparklineRenderer._drawXAxis(ctx, w, h, m, cw)
-  const marginTop = 5
-  const marginBottom = 18
 
-  const chartWidth = width - marginLeft - marginRight
+    const len = history.length
-  const chartHeight = height - marginTop - marginBottom
+    const pw = cw / (CONFIG.maxHistoryPoints - 1)
+    const getX = i => m.left + cw - (len - 1 - i) * pw
+    const getY = lat => m.top + ch - (lat / CONFIG.maxLatency) * ch
 
-  // Clear canvas
+    SparklineRenderer._drawErrors(ctx, history, getX, m.top, ch)
-  ctx.clearRect(0, 0, width, height)
+    SparklineRenderer._drawLine(ctx, history, getX, getY)
+    SparklineRenderer._drawTip(ctx, history, getX, getY)
+  }
 
-  // Draw Y-axis labels and grid lines
+  static _drawYAxis(ctx, w, h, m, ch) {
     ctx.font = '9px monospace'
     ctx.textAlign = 'right'
     ctx.textBaseline = 'middle'
-
+    for (const tick of CONFIG.yAxisTicks) {
-  Y_AXIS_TICKS.forEach(tick => {
+      const y = m.top + ch - (tick / CONFIG.maxLatency) * ch
-    const y = marginTop + chartHeight - (tick / Y_AXIS_MAX) * chartHeight
-
-    // Grid line
       ctx.strokeStyle = 'rgba(255,255,255,0.1)'
       ctx.lineWidth = 1
-    ctx.beginPath()
+      ctx.beginPath(); ctx.moveTo(m.left, y); ctx.lineTo(w - m.right, y); ctx.stroke()
-    ctx.moveTo(marginLeft, y)
-    ctx.lineTo(width - marginRight, y)
-    ctx.stroke()
-
-    // Label
       ctx.fillStyle = 'rgba(255,255,255,0.5)'
-    ctx.fillText(`${tick}`, marginLeft - 4, y)
+      ctx.fillText(`${tick}`, m.left - 4, y)
-  })
+    }
+  }
 
-  // Draw X-axis labels
+  static _drawXAxis(ctx, w, h, m, cw) {
     ctx.textAlign = 'center'
     ctx.textBaseline = 'top'
-
+    for (const tick of CONFIG.xAxisTicks) {
-  X_AXIS_TICKS.forEach(tick => {
+      const x = m.left + cw - (tick / CONFIG.historyDuration) * cw
-    // tick is seconds ago, 0 = now (right edge), 300 = 5min ago (left edge)
-    const x = marginLeft + chartWidth - (tick / HISTORY_DURATION) * chartWidth
-
-    // Label
       ctx.fillStyle = 'rgba(255,255,255,0.5)'
-    ctx.fillText(`-${tick}s`, x, height - marginBottom + 4)
+      ctx.fillText(`-${tick}s`, x, h - m.bottom + 4)
-  })
+    }
+  }
 
-  // Helper functions for chart coordinates
+  static _drawErrors(ctx, history, getX, top, ch) {
-  const historyLen = history.length
-  const pointWidth = chartWidth / (MAX_HISTORY_POINTS - 1)
-
-  const getX = (i) => marginLeft + chartWidth - (historyLen - 1 - i) * pointWidth
-  const getY = (latency) => marginTop + chartHeight - (latency / Y_AXIS_MAX) * chartHeight
-
-  // Draw error regions first (behind the line)
     ctx.fillStyle = 'rgba(239, 68, 68, 0.2)'
-  let inErrorRegion = false
+    let inErr = false, start = 0
-  let errorStart = 0
+    for (let i = 0; i < history.length; i++) {
-
+      const p = history[i]
-  history.forEach((point, i) => {
       const x = getX(i)
-
+      // Only real errors, not paused gaps
-    if (point.latency === null && !inErrorRegion) {
+      const isError = p.latency === null && !p.paused
-      inErrorRegion = true
+      if (isError && !inErr) { inErr = true; start = x }
-      errorStart = x
+      else if (!isError && inErr) { inErr = false; ctx.fillRect(start, top, x - start, ch) }
-    } else if (point.latency !== null && inErrorRegion) {
-      inErrorRegion = false
-      ctx.fillRect(errorStart, marginTop, x - errorStart, chartHeight)
     }
-  })
+    if (inErr) ctx.fillRect(start, top, getX(history.length - 1) - start + 5, ch)
-
-  if (inErrorRegion) {
-    const lastX = getX(historyLen - 1)
-    ctx.fillRect(errorStart, marginTop, lastX - errorStart + 5, chartHeight)
   }
 
-  // Draw the sparkline segments - color coded by latency
+  static _drawLine(ctx, history, getX, getY) {
     ctx.lineWidth = 2
     ctx.lineCap = 'round'
     ctx.lineJoin = 'round'
+    let prev = null
+    for (let i = 0; i < history.length; i++) {
+      const p = history[i]
+      if (p.latency === null) { prev = null; continue }
+      const x = getX(i), y = getY(p.latency)
+      if (prev) {
+        ctx.strokeStyle = latencyHex(p.latency)
+        ctx.beginPath(); ctx.moveTo(prev.x, prev.y); ctx.lineTo(x, y); ctx.stroke()
+      }
+      prev = { x, y }
+    }
+  }
 
-  let prevPoint = null
+  static _drawTip(ctx, history, getX, getY) {
-  let prevX = 0
+    for (let i = history.length - 1; i >= 0; i--) {
-  let prevY = 0
+      if (history[i].latency !== null) {
-
+        const x = getX(i), y = getY(history[i].latency)
-  history.forEach((point, i) => {
+        ctx.fillStyle = latencyHex(history[i].latency)
-    if (point.latency === null) {
+        ctx.beginPath(); ctx.arc(x, y, 3, 0, Math.PI * 2); ctx.fill()
-      prevPoint = null
         return
       }
-
-    const x = getX(i)
-    const y = getY(point.latency)
-
-    if (prevPoint !== null) {
-      ctx.strokeStyle = getLatencyColor(point.latency)
-      ctx.beginPath()
-      ctx.moveTo(prevX, prevY)
-      ctx.lineTo(x, y)
-      ctx.stroke()
-    }
-
-    prevPoint = point
-    prevX = x
-    prevY = y
-  })
-
-  // Draw latest point indicator
-  const lastValidPoint = [...history].reverse().find(p => p.latency !== null)
-  if (lastValidPoint) {
-    const lastIndex = history.lastIndexOf(lastValidPoint)
-    const x = getX(lastIndex)
-    const y = getY(lastValidPoint.latency)
-
-    ctx.fillStyle = getLatencyColor(lastValidPoint.latency)
-    ctx.beginPath()
-    ctx.arc(x, y, 3, 0, Math.PI * 2)
-    ctx.fill()
     }
   }
 
-// Create the UI
+  static sizeCanvas(canvas) {
-function createUI() {
+    const dpr = window.devicePixelRatio || 1
+    const rect = canvas.getBoundingClientRect()
+    canvas.width = rect.width * dpr
+    canvas.height = CONFIG.canvasHeight * dpr
+    const ctx = canvas.getContext('2d')
+    ctx.setTransform(1, 0, 0, 1, 0, 0)
+    ctx.scale(dpr, dpr)
+  }
+}
+
+// --- UI Renderer -------------------------------------------------------------
+
+function hostRowHTML(host, index) {
+  return `
+    <div class="host-row bg-gray-800/50 rounded-lg p-4 border border-gray-700/50" data-index="${index}">
+      <div class="flex items-center gap-4">
+        <div class="w-48 flex-shrink-0">
+          <div class="flex items-center gap-2">
+            <div class="w-3 h-3 rounded-full" style="background-color: ${latencyHex(null)}"></div>
+            <span class="font-medium text-white truncate">${host.name}</span>
+          </div>
+          <a href="${host.url}" target="_blank" rel="noopener" class="text-xs text-gray-500 mt-1 truncate block">${host.url}</a>
+        </div>
+        <div class="w-32 flex-shrink-0 text-right">
+          <div class="latency-value text-4xl font-bold tabular-nums" data-host="${index}">
+            <span class="text-gray-500">---</span>
+          </div>
+          <div class="status-text text-xs text-gray-500 mt-1" data-host="${index}">waiting...</div>
+        </div>
+        <div class="flex-grow sparkline-container rounded overflow-hidden border border-gray-700/30">
+          <canvas class="sparkline-canvas w-full" data-host="${index}" height="${CONFIG.canvasHeight}"></canvas>
+        </div>
+      </div>
+    </div>`
+}
+
+function buildUI(state) {
   const app = document.getElementById('app')
-
   app.innerHTML = `
     <div class="max-w-7xl mx-auto px-4 py-8">
       <header class="mb-8">
         <div class="flex items-center justify-between mb-4">
           <h1 class="text-3xl font-bold text-white">NetWatch</h1>
-          <button
+          <button id="pause-btn"
-            id="pause-btn"
+            class="flex items-center gap-3 px-6 py-3 bg-gray-800 hover:bg-gray-700 border border-gray-600 rounded-lg transition-colors focus:outline-none focus:ring-2 focus:ring-blue-500">
-            class="flex items-center gap-3 px-6 py-3 bg-gray-800 hover:bg-gray-700 border border-gray-600 rounded-lg transition-colors focus:outline-none focus:ring-2 focus:ring-blue-500"
-          >
             <svg id="pause-icon" class="w-8 h-8 text-yellow-400" fill="currentColor" viewBox="0 0 24 24">
-              <rect x="6" y="4" width="4" height="16" rx="1" />
+              <rect x="6" y="4" width="4" height="16" rx="1"/><rect x="14" y="4" width="4" height="16" rx="1"/>
-              <rect x="14" y="4" width="4" height="16" rx="1" />
             </svg>
             <svg id="play-icon" class="w-8 h-8 text-green-400 hidden" fill="currentColor" viewBox="0 0 24 24">
               <path d="M8 5v14l11-7z"/>
@@ -248,11 +298,14 @@ function createUI() {
         </div>
         <p class="text-gray-400 text-sm">
           Real-time network latency monitor |
-          <span class="text-gray-500">Updates every ${UPDATE_INTERVAL / 1000}s</span> |
+          <span class="text-gray-500">Updates every ${CONFIG.updateInterval / 1000}s</span> |
-          <span class="text-gray-500">History: ${HISTORY_DURATION}s</span> |
+          <span class="text-gray-500">History: ${CONFIG.historyDuration}s</span> |
           <span id="status-indicator" class="text-green-400">Running</span>
         </p>
-        <div id="summary" class="mt-4 p-3 bg-gray-800/70 rounded-lg border border-gray-700/50 font-mono text-sm">
+        <div id="health-box" class="mt-4 p-3 bg-gray-800/70 rounded-lg border border-gray-700/50 font-mono text-sm text-center">
+          <span id="health-text" class="text-gray-400">Waiting for data...</span>
+        </div>
+        <div id="summary" class="mt-2 p-3 bg-gray-800/70 rounded-lg border border-gray-700/50 font-mono text-sm">
           <span class="text-gray-400">Reachable:</span> <span id="summary-reachable" class="text-white">--/--</span>
           <span class="text-gray-600 mx-3">|</span>
           <span class="text-gray-400">Min:</span> <span id="summary-min" class="text-green-400">--ms</span>
@@ -263,40 +316,13 @@ function createUI() {
         </div>
       </header>
 
-      <div id="hosts-container" class="space-y-4">
+      <div id="wan-hosts" class="space-y-4">
-        ${hostState.map((host, index) => `
+        ${state.wan.map((h, i) => hostRowHTML(h, i)).join('')}
-          <div class="host-row bg-gray-800/50 rounded-lg p-4 border border-gray-700/50" data-index="${index}">
-            <div class="flex items-center gap-4">
-              <!-- Host Info -->
-              <div class="w-48 flex-shrink-0">
-                <div class="flex items-center gap-2">
-                  <div class="w-3 h-3 rounded-full" style="background-color: ${host.color}"></div>
-                  <span class="font-medium text-white truncate">${host.name}</span>
-                </div>
-                <div class="text-xs text-gray-500 mt-1 truncate">${host.url}</div>
       </div>
 
-              <!-- Latency Display -->
+      <h2 class="text-gray-500 text-xs uppercase tracking-wide mt-6 mb-3">Local Network</h2>
-              <div class="w-32 flex-shrink-0 text-right">
+      <div id="local-hosts" class="space-y-4">
-                <div class="latency-value text-4xl font-bold tabular-nums" data-host="${index}">
+        ${state.local.map((h, i) => hostRowHTML(h, state.wan.length + i)).join('')}
-                  <span class="text-gray-500">---</span>
-                </div>
-                <div class="status-text text-xs text-gray-500 mt-1" data-host="${index}">
-                  waiting...
-                </div>
-              </div>
-
-              <!-- Sparkline Graph -->
-              <div class="flex-grow sparkline-container rounded overflow-hidden border border-gray-700/30">
-                <canvas
-                  class="sparkline-canvas w-full"
-                  data-host="${index}"
-                  height="80"
-                ></canvas>
-              </div>
-            </div>
-          </div>
-        `).join('')}
       </div>
 
       <footer class="mt-8 text-center text-gray-600 text-xs">
@@ -310,41 +336,31 @@ function createUI() {
           <span class="inline-block w-3 h-3 rounded-full bg-gray-500 mr-1 ml-3 align-middle"></span>offline
         </p>
       </footer>
-    </div>
+    </div>`
-  `
 
-  // Set up canvas sizes after DOM is ready
   requestAnimationFrame(() => {
-    document.querySelectorAll('.sparkline-canvas').forEach(canvas => {
+    document.querySelectorAll('.sparkline-canvas').forEach(c => SparklineRenderer.sizeCanvas(c))
-      const rect = canvas.getBoundingClientRect()
-      canvas.width = rect.width * window.devicePixelRatio
-      canvas.height = 80 * window.devicePixelRatio
-      canvas.getContext('2d').scale(window.devicePixelRatio, window.devicePixelRatio)
-    })
   })
 }
 
-// Update single host display
+// --- UI Updaters -------------------------------------------------------------
-function updateHostDisplay(index) {
+
-  const host = hostState[index]
+function updateHostRow(host, index) {
   const latencyEl = document.querySelector(`.latency-value[data-host="${index}"]`)
   const statusEl = document.querySelector(`.status-text[data-host="${index}"]`)
   const canvas = document.querySelector(`.sparkline-canvas[data-host="${index}"]`)
-
   if (!latencyEl || !statusEl || !canvas) return
 
-  // Update latency value
   if (host.lastLatency !== null) {
-    const colorClass = getLatencyClass(host.lastLatency, host.status)
+    const cls = latencyClass(host.lastLatency, host.status)
-    latencyEl.innerHTML = `<span class="${colorClass}">${host.lastLatency}<span class="text-lg">ms</span></span>`
+    latencyEl.innerHTML = `<span class="${cls}">${host.lastLatency}<span class="text-lg">ms</span></span>`
   } else if (host.status === 'offline' || host.status === 'error') {
     latencyEl.innerHTML = `<span class="text-gray-500">---</span>`
   }
 
-  // Update status text
+  const avg = host.averageLatency()
-  const avgLatency = calculateAverageLatency(host.history)
+  if (host.status === 'online' && avg !== null) {
-  if (host.status === 'online' && avgLatency !== null) {
+    statusEl.textContent = `avg: ${avg}ms`
-    statusEl.textContent = `avg: ${avgLatency}ms`
     statusEl.className = 'status-text text-xs text-gray-400 mt-1'
   } else if (host.status === 'offline') {
     statusEl.textContent = 'unreachable'
@@ -357,170 +373,123 @@ function updateHostDisplay(index) {
     statusEl.className = 'status-text text-xs text-gray-500 mt-1'
   }
 
-  // Update sparkline
+  SparklineRenderer.draw(canvas, host.history)
-  const canvasRect = canvas.getBoundingClientRect()
-  drawSparkline(canvas, host.history)
 }
 
-// Calculate average latency from history
+function updateSummary(state) {
-function calculateAverageLatency(history) {
+  const stats = state.wanStats()
-  const validPoints = history.filter(p => p.latency !== null)
-  if (validPoints.length === 0) return null
-
-  const sum = validPoints.reduce((acc, p) => acc + p.latency, 0)
-  return Math.round(sum / validPoints.length)
-}
-
-// Update summary line with current host stats
-function updateSummary() {
-  const reachableHosts = hostState.filter(h => h.lastLatency !== null)
-  const reachableCount = reachableHosts.length
-  const totalCount = hostState.length
 
   const reachableEl = document.getElementById('summary-reachable')
   const minEl = document.getElementById('summary-min')
   const maxEl = document.getElementById('summary-max')
   const avgEl = document.getElementById('summary-avg')
-
   if (!reachableEl) return
 
-  reachableEl.textContent = `${reachableCount}/${totalCount}`
+  reachableEl.textContent = `${stats.reachable}/${stats.total}`
-  reachableEl.className = reachableCount === totalCount ? 'text-green-400' :
+  reachableEl.className = stats.reachable === stats.total ? 'text-green-400' :
-                          reachableCount === 0 ? 'text-red-400' : 'text-yellow-400'
+                          stats.reachable === 0 ? 'text-red-400' : 'text-yellow-400'
 
-  if (reachableCount > 0) {
+  if (stats.min !== null) {
-    const latencies = reachableHosts.map(h => h.lastLatency)
+    minEl.textContent = `${stats.min}ms`; minEl.className = latencyClass(stats.min, 'online')
-    const min = Math.min(...latencies)
+    maxEl.textContent = `${stats.max}ms`; maxEl.className = latencyClass(stats.max, 'online')
-    const max = Math.max(...latencies)
+    avgEl.textContent = `${stats.avg}ms`; avgEl.className = latencyClass(stats.avg, 'online')
-    const avg = Math.round(latencies.reduce((a, b) => a + b, 0) / latencies.length)
-
-    minEl.textContent = `${min}ms`
-    minEl.className = getLatencyClass(min, 'online')
-    maxEl.textContent = `${max}ms`
-    maxEl.className = getLatencyClass(max, 'online')
-    avgEl.textContent = `${avg}ms`
-    avgEl.className = getLatencyClass(avg, 'online')
   } else {
-    minEl.textContent = '--ms'
+    for (const el of [minEl, maxEl, avgEl]) { el.textContent = '--ms'; el.className = 'text-gray-500' }
-    minEl.className = 'text-gray-500'
-    maxEl.textContent = '--ms'
-    maxEl.className = 'text-gray-500'
-    avgEl.textContent = '--ms'
-    avgEl.className = 'text-gray-500'
   }
 }
 
-// Main measurement loop
+function updateHealthBox(state) {
-async function measureAll() {
+  const el = document.getElementById('health-text')
-  const timestamp = Date.now()
+  const box = document.getElementById('health-box')
+  if (!el || !box) return
+
+  const anyData = state.wan.some(h => h.status !== 'pending')
+  if (!anyData) return
+
+  const healthy = state.isHealthy()
+  el.textContent = healthy ? 'HEALTHY' : 'DEGRADED'
+  el.className = healthy ? 'text-green-400 font-bold' : 'text-red-400 font-bold'
+  box.className = `mt-4 p-3 rounded-lg border font-mono text-sm text-center ${
+    healthy ? 'bg-green-900/20 border-green-700/50' : 'bg-red-900/20 border-red-700/50'
+  }`
+}
+
+// --- Main Loop ---------------------------------------------------------------
+
+async function tick(state) {
+  const ts = Date.now()
+
+  if (state.paused) {
+    // No probes — just push a paused marker so the chart keeps scrolling
+    for (const host of state.allHosts) {
+      host.pushPaused(ts)
+    }
+    // Redraw sparklines only
+    state.allHosts.forEach((host, i) => {
+      const canvas = document.querySelector(`.sparkline-canvas[data-host="${i}"]`)
+      if (canvas) SparklineRenderer.draw(canvas, host.history)
+    })
+    return
+  }
 
-  // Measure all hosts in parallel
   const results = await Promise.all(
-    hostState.map(host => measureLatency(host.url))
+    state.allHosts.map(h => measureLatency(h.url))
   )
 
-  // Update state
+  state.allHosts.forEach((host, i) => {
-  results.forEach((result, index) => {
+    host.pushSample(ts, results[i])
-    const host = hostState[index]
+    updateHostRow(host, i)
-
-    // Add to history
-    host.history.push({
-      timestamp,
-      latency: result.latency,
-      error: result.error,
   })
 
-    // Trim history to max size
+  updateSummary(state)
-    while (host.history.length > MAX_HISTORY_POINTS) {
+  updateHealthBox(state)
-      host.history.shift()
 }
 
-    // Update current state
+// --- Pause / Resume ----------------------------------------------------------
-    host.lastLatency = result.latency
-    if (result.error === 'timeout') {
-      host.status = 'error'
-    } else if (result.error) {
-      host.status = 'offline'
-    } else {
-      host.status = 'online'
-    }
-
-    // Update display
-    updateHostDisplay(index)
-  })
-
-  // Update summary
-  updateSummary()
-}
-
-// Handle window resize
-function handleResize() {
-  document.querySelectorAll('.sparkline-canvas').forEach((canvas, index) => {
-    const rect = canvas.getBoundingClientRect()
-    canvas.width = rect.width * window.devicePixelRatio
-    canvas.height = 80 * window.devicePixelRatio
-    const ctx = canvas.getContext('2d')
-    ctx.setTransform(1, 0, 0, 1, 0, 0)
-    ctx.scale(window.devicePixelRatio, window.devicePixelRatio)
-
-    // Redraw
-    if (hostState[index]) {
-      drawSparkline(canvas, hostState[index].history)
-    }
-  })
-}
-
-// Toggle pause state
-function togglePause() {
-  isPaused = !isPaused
 
+function togglePause(state) {
+  state.paused = !state.paused
   const pauseIcon = document.getElementById('pause-icon')
   const playIcon = document.getElementById('play-icon')
   const pauseText = document.getElementById('pause-text')
-  const statusIndicator = document.getElementById('status-indicator')
+  const indicator = document.getElementById('status-indicator')
 
-  if (isPaused) {
+  if (state.paused) {
-    // Stop the interval
+    pauseIcon.classList.add('hidden'); playIcon.classList.remove('hidden')
-    if (intervalId) {
-      clearInterval(intervalId)
-      intervalId = null
-    }
-    pauseIcon.classList.add('hidden')
-    playIcon.classList.remove('hidden')
     pauseText.textContent = 'Resume'
-    statusIndicator.textContent = 'Paused'
+    indicator.textContent = 'Paused'; indicator.className = 'text-yellow-400'
-    statusIndicator.className = 'text-yellow-400'
   } else {
-    // Resume the interval
+    pauseIcon.classList.remove('hidden'); playIcon.classList.add('hidden')
-    measureAll()
-    intervalId = setInterval(measureAll, UPDATE_INTERVAL)
-    pauseIcon.classList.remove('hidden')
-    playIcon.classList.add('hidden')
     pauseText.textContent = 'Pause'
-    statusIndicator.textContent = 'Running'
+    indicator.textContent = 'Running'; indicator.className = 'text-green-400'
-    statusIndicator.className = 'text-green-400'
   }
 }
 
-// Initialize
+// --- Resize ------------------------------------------------------------------
+
+function handleResize(state) {
+  document.querySelectorAll('.sparkline-canvas').forEach((canvas, i) => {
+    SparklineRenderer.sizeCanvas(canvas)
+    const host = state.allHosts[i]
+    if (host) SparklineRenderer.draw(canvas, host.history)
+  })
+}
+
+// --- Bootstrap ---------------------------------------------------------------
+
 function init() {
-  createUI()
+  const state = new AppState()
+  buildUI(state)
 
-  // Wire up pause button
+  document.getElementById('pause-btn').addEventListener('click', () => togglePause(state))
-  document.getElementById('pause-btn').addEventListener('click', togglePause)
 
-  // Start measurement loop
+  tick(state)
-  measureAll()
+  setInterval(() => tick(state), CONFIG.updateInterval)
-  intervalId = setInterval(measureAll, UPDATE_INTERVAL)
 
-  // Handle resize
+  window.addEventListener('resize', () => handleResize(state))
-  window.addEventListener('resize', handleResize)
+  setTimeout(() => handleResize(state), 100)
-
-  // Initial resize setup after a short delay
-  setTimeout(handleResize, 100)
 }
 
-// Run when DOM is ready
 if (document.readyState === 'loading') {
   document.addEventListener('DOMContentLoaded', init)
 } else {