Change update interval to 2000ms and add play/pause button

- Update interval changed from 250ms to 2000ms (150 history points)
- Add large play/pause toggle button in header
- Show running/paused status indicator
- Pause stops all network requests, resume restarts them

src/main.js

@@ -1,11 +1,15 @@
 import './styles.css'
 
 // Configuration
-const UPDATE_INTERVAL = 250 // ms
+const UPDATE_INTERVAL = 2000 // ms
 const HISTORY_DURATION = 300 // seconds
-const MAX_HISTORY_POINTS = Math.ceil((HISTORY_DURATION * 1000) / UPDATE_INTERVAL) // 1200 points
+const MAX_HISTORY_POINTS = Math.ceil((HISTORY_DURATION * 1000) / UPDATE_INTERVAL) // 150 points
 const REQUEST_TIMEOUT = 5000 // ms
 
+// Pause state
+let isPaused = false
+let intervalId = null
+
 // Hosts to monitor (IPv4 preferred endpoints)
 const HOSTS = [
   { name: 'Google Cloud Console', url: 'https://console.cloud.google.com', color: '#4285f4' },
@@ -201,11 +205,27 @@ function createUI() {
   app.innerHTML = `
     <div class="max-w-7xl mx-auto px-4 py-8">
       <header class="mb-8">
-        <h1 class="text-3xl font-bold text-white mb-2">NetWatch</h1>
+        <div class="flex items-center justify-between mb-4">
+          <h1 class="text-3xl font-bold text-white">NetWatch</h1>
+          <button
+            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"
+          >
+            <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="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" />
+            </svg>
+            <span id="pause-text" class="text-lg font-semibold text-white">Pause</span>
+          </button>
+        </div>
         <p class="text-gray-400 text-sm">
           Real-time network latency monitor |
-          <span class="text-gray-500">Updates every ${UPDATE_INTERVAL}ms</span> |
+          <span class="text-gray-500">Updates every ${UPDATE_INTERVAL / 1000}s</span> |
-          <span class="text-gray-500">History: ${HISTORY_DURATION}s</span>
+          <span class="text-gray-500">History: ${HISTORY_DURATION}s</span> |
+          <span id="status-indicator" class="text-green-400">Running</span>
         </p>
       </header>
 
@@ -374,13 +394,48 @@ function handleResize() {
   })
 }
 
+// Toggle pause state
+function togglePause() {
+  isPaused = !isPaused
+
+  const pauseIcon = document.getElementById('pause-icon')
+  const playIcon = document.getElementById('play-icon')
+  const pauseText = document.getElementById('pause-text')
+  const statusIndicator = document.getElementById('status-indicator')
+
+  if (isPaused) {
+    // Stop the interval
+    if (intervalId) {
+      clearInterval(intervalId)
+      intervalId = null
+    }
+    pauseIcon.classList.add('hidden')
+    playIcon.classList.remove('hidden')
+    pauseText.textContent = 'Resume'
+    statusIndicator.textContent = 'Paused'
+    statusIndicator.className = 'text-yellow-400'
+  } else {
+    // Resume the interval
+    measureAll()
+    intervalId = setInterval(measureAll, UPDATE_INTERVAL)
+    pauseIcon.classList.remove('hidden')
+    playIcon.classList.add('hidden')
+    pauseText.textContent = 'Pause'
+    statusIndicator.textContent = 'Running'
+    statusIndicator.className = 'text-green-400'
+  }
+}
+
 // Initialize
 function init() {
   createUI()
 
+  // Wire up pause button
+  document.getElementById('pause-btn').addEventListener('click', togglePause)
+
   // Start measurement loop
   measureAll()
-  setInterval(measureAll, UPDATE_INTERVAL)
+  intervalId = setInterval(measureAll, UPDATE_INTERVAL)
 
   // Handle resize
   window.addEventListener('resize', handleResize)