feat: add fancy dashboard

src/cache.ts

···
 	}
 
 	/**
+	 * Gets traffic data for charts with adaptive granularity
+	 * @param options - Either days for relative range, or start/end for absolute range
+	 * @returns Array of bucket data points
+	 */
+	getTraffic(options: {
+		days?: number;
+		startTime?: number;
+		endTime?: number;
+	} = {}): Array<{ bucket: number; hits: number }> {
+		const now = Math.floor(Date.now() / 1000);
+		let start: number;
+		let end: number;
+
+		if (options.startTime && options.endTime) {
+			start = options.startTime;
+			end = options.endTime;
+		} else {
+			const days = options.days || 7;
+			start = now - days * 24 * 60 * 60;
+			end = now;
+		}
+
+		const spanDays = (end - start) / 86400;
+		const { table, bucketSize } = this.selectBucketTable(spanDays);
+		const alignedStart = start - (start % bucketSize);
+
+		const results = this.db
+			.query(
+				`
+				SELECT bucket, SUM(hits) as hits
+				FROM ${table}
+				WHERE bucket >= ? AND bucket <= ? AND endpoint != '/stats'
+				GROUP BY bucket
+				ORDER BY bucket ASC
+			`,
+			)
+			.all(alignedStart, end) as Array<{ bucket: number; hits: number }>;
+
+		return results;
+	}
+
+	/**
 	 * Gets user agents data from cumulative stats table
 	 * @param _days Unused - user_agent_stats is cumulative
 	 * @returns User agents data
 	 */
 	async getUserAgents(
 		_days: number = 7,
-	): Promise<Array<{ userAgent: string; count: number }>> {
+	): Promise<Array<{ userAgent: string; hits: number }>> {
 		const cacheKey = "useragents_all";
 		const cached = this.typedAnalyticsCache.getUserAgentData(cacheKey);
 
···
 		const topUserAgents = this.db
 			.query(
 				`
-         SELECT user_agent as userAgent, hits as count
+         SELECT user_agent as userAgent, hits
          FROM user_agent_stats
          WHERE user_agent IS NOT NULL
          ORDER BY hits DESC
          LIMIT 50
        `,
 			)
-			.all() as Array<{ userAgent: string; count: number }>;
+			.all() as Array<{ userAgent: string; hits: number }>;
 
 		this.typedAnalyticsCache.setUserAgentData(cacheKey, topUserAgents);
 

src/dashboard.html

···
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <title>Cachet Analytics Dashboard</title>
-  <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.js"></script>
-  <script
-    src="https://cdn.jsdelivr.net/npm/chartjs-adapter-date-fns@3.0.0/dist/chartjs-adapter-date-fns.bundle.min.js"></script>
+  <script src="https://cdn.jsdelivr.net/npm/uplot@1.6.30/dist/uPlot.iife.min.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/uplot@1.6.30/dist/uPlot.min.css">
   <style>
     * {
       margin: 0;
···
     }
 
     body {
-      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
-        sans-serif;
-      background: #f9fafb;
-      color: #111827;
+      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+      background: #0d1117;
+      color: #c9d1d9;
       line-height: 1.6;
     }
 
     .header {
-      background: #fff;
-      padding: 1.5rem 2rem;
-      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+      background: #161b22;
+      padding: 1rem 2rem;
+      border-bottom: 1px solid #30363d;
       margin-bottom: 2rem;
-      border-bottom: 1px solid #e5e7eb;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      flex-wrap: wrap;
+      gap: 1rem;
     }
 
-    .header h1 {
-      color: #111827;
-      font-size: 1.875rem;
-      font-weight: 700;
-      margin-bottom: 0.5rem;
+    .header-left h1 {
+      color: #f0f6fc;
+      font-size: 1.5rem;
+      font-weight: 600;
+      margin-bottom: 0.25rem;
     }
 
     .header-links {
       display: flex;
-      gap: 1.5rem;
+      gap: 1rem;
     }
 
     .header-links a {
-      color: #6366f1;
+      color: #58a6ff;
       text-decoration: none;
-      font-weight: 500;
+      font-size: 0.875rem;
     }
 
     .header-links a:hover {
-      color: #4f46e5;
       text-decoration: underline;
     }
 
-    .controls {
-      margin-bottom: 2rem;
+    .header-right {
       display: flex;
-      justify-content: center;
-      align-items: center;
-      gap: 1rem;
-      flex-wrap: wrap;
+      gap: 0.5rem;
     }
 
-    .controls select,
-    .controls button {
-      padding: 0.75rem 1.25rem;
-      border: 1px solid #d1d5db;
-      border-radius: 8px;
-      background: white;
-      cursor: pointer;
-      font-size: 0.875rem;
-      font-weight: 500;
-      transition: all 0.2s ease;
+    .dashboard {
+      max-width: 1200px;
+      margin: 0 auto;
+      padding: 0 2rem 2rem;
     }
 
-    .controls select:hover,
-    .controls select:focus {
-      border-color: #6366f1;
-      outline: none;
-      box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
+    .time-btn {
+      padding: 0.375rem 0.75rem;
+      border: 1px solid #30363d;
+      border-radius: 6px;
+      background: #21262d;
+      color: #c9d1d9;
+      cursor: pointer;
+      font-size: 0.8125rem;
+      transition: all 0.15s ease;
     }
 
-    .controls button {
-      background: #6366f1;
-      color: white;
-      border: none;
-    }
-
-    .controls button:hover {
-      background: #4f46e5;
-    }
-
-    .controls button:disabled {
-      background: #9ca3af;
-      cursor: not-allowed;
+    .time-btn:hover {
+      background: #30363d;
+      border-color: #8b949e;
     }
 
-    .dashboard {
-      max-width: 1200px;
-      margin: 0 auto;
-      padding: 0 2rem;
+    .time-btn.active {
+      background: #238636;
+      border-color: #238636;
+      color: #fff;
     }
 
     .stats-grid {
       display: grid;
-      grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
-      gap: 1.5rem;
-      margin-bottom: 3rem;
+      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+      gap: 1rem;
+      margin-bottom: 2rem;
     }
 
     .stat-card {
-      background: white;
-      padding: 2rem;
-      border-radius: 12px;
-      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
-      text-align: center;
-      border: 1px solid #e5e7eb;
-      transition: all 0.2s ease;
-      min-height: 140px;
-      display: flex;
-      flex-direction: column;
-      justify-content: center;
-    }
-
-    .stat-card:hover {
-      transform: translateY(-2px);
-      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+      background: #161b22;
+      padding: 1.5rem;
+      border-radius: 8px;
+      border: 1px solid #30363d;
     }
 
     .stat-number {
-      font-weight: 800;
-      color: #111827;
-      margin-bottom: 0.5rem;
-      font-size: 2.5rem;
+      font-size: 2rem;
+      font-weight: 700;
+      color: #f0f6fc;
       line-height: 1;
+      margin-bottom: 0.25rem;
     }
 
     .stat-label {
-      color: #6b7280;
-      font-weight: 600;
-      font-size: 0.875rem;
+      color: #8b949e;
+      font-size: 0.75rem;
       text-transform: uppercase;
       letter-spacing: 0.05em;
     }
 
-    .charts-grid {
-      display: grid;
-      grid-template-columns: 1fr;
-      gap: 2rem;
-      margin-bottom: 3rem;
+    .chart-container {
+      background: #161b22;
+      border-radius: 8px;
+      border: 1px solid #30363d;
+      padding: 1.5rem;
+      margin-bottom: 2rem;
+      position: relative;
     }
 
-    .charts-row {
-      display: grid;
-      grid-template-columns: 1fr 1fr;
-      gap: 2rem;
+    .chart-title {
+      color: #f0f6fc;
+      font-size: 1rem;
+      font-weight: 600;
+      margin-bottom: 1rem;
     }
 
-    @media (max-width: 768px) {
-      .charts-row {
-        grid-template-columns: 1fr;
-      }
+    .chart-hint {
+      color: #8b949e;
+      font-size: 0.75rem;
+      margin-top: 0.5rem;
+    }
 
-      .stats-grid {
-        grid-template-columns: 1fr;
-      }
+    #traffic-chart {
+      width: 100%;
+    }
 
-      .dashboard {
-        padding: 0 1rem;
-      }
-
-      .stat-number {
-        font-size: 2rem;
-      }
+    .loading-overlay {
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      background: rgba(13, 17, 23, 0.8);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      border-radius: 8px;
+      z-index: 10;
     }
 
-    .chart-container {
-      background: white;
-      padding: 1.5rem;
-      border-radius: 12px;
-      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
-      border: 1px solid #e5e7eb;
-      height: 25rem;
-      padding-bottom: 5rem;
+    .loading-overlay.hidden {
+      display: none;
     }
 
-    .chart-title {
-      font-size: 1.25rem;
-      margin-bottom: 1.5rem;
-      color: #111827;
-      font-weight: 700;
+    .loading-text {
+      color: #8b949e;
+      font-size: 0.875rem;
     }
 
-    .user-agents-table {
-      background: white;
-      padding: 2rem;
-      border-radius: 12px;
-      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
-      border: 1px solid #e5e7eb;
+    .user-agents-section {
+      background: #161b22;
+      border-radius: 8px;
+      border: 1px solid #30363d;
+      padding: 1.5rem;
     }
 
-    .search-container {
-      margin-bottom: 1.5rem;
-      position: relative;
+    .section-title {
+      color: #f0f6fc;
+      font-size: 1rem;
+      font-weight: 600;
+      margin-bottom: 1rem;
     }
 
     .search-input {
       width: 100%;
-      padding: 0.75rem 1rem;
-      border: 1px solid #d1d5db;
-      border-radius: 8px;
+      padding: 0.625rem 0.875rem;
+      border: 1px solid #30363d;
+      border-radius: 6px;
+      background: #0d1117;
+      color: #c9d1d9;
       font-size: 0.875rem;
-      background: #f9fafb;
-      transition: border-color 0.2s ease;
+      margin-bottom: 1rem;
     }
 
     .search-input:focus {
       outline: none;
-      border-color: #6366f1;
-      background: white;
-      box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
+      border-color: #58a6ff;
     }
 
-    .ua-table {
-      width: 100%;
-      border-collapse: collapse;
-      font-size: 0.875rem;
+    .search-input::placeholder {
+      color: #6e7681;
     }
 
-    .ua-table th {
-      text-align: left;
-      padding: 0.75rem 1rem;
-      background: #f9fafb;
-      border-bottom: 2px solid #e5e7eb;
-      font-weight: 600;
-      color: #374151;
-      position: sticky;
-      top: 0;
+    .ua-list {
+      max-height: 400px;
+      overflow-y: auto;
     }
 
-    .ua-table td {
-      padding: 0.75rem 1rem;
-      border-bottom: 1px solid #f3f4f6;
-      vertical-align: top;
+    .ua-item {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      padding: 0.75rem 0;
+      border-bottom: 1px solid #21262d;
     }
 
-    .ua-table tbody tr:hover {
-      background: #f9fafb;
+    .ua-item:last-child {
+      border-bottom: none;
     }
 
-    .ua-name {
-      font-weight: 500;
-      color: #111827;
-      line-height: 1.4;
-      max-width: 400px;
-      word-break: break-word;
+    .ua-rank {
+      width: 2rem;
+      font-weight: 600;
+      color: #8b949e;
     }
 
-    .ua-raw {
-      font-family: monospace;
-      font-size: 0.75rem;
-      color: #6b7280;
-      margin-top: 0.25rem;
-      max-width: 400px;
-      word-break: break-all;
-      line-height: 1.3;
+    .ua-rank.top-1 { color: #ffd700; }
+    .ua-rank.top-2 { color: #c0c0c0; }
+    .ua-rank.top-3 { color: #cd7f32; }
+
+    .ua-name {
+      flex: 1;
+      font-size: 0.875rem;
+      color: #c9d1d9;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      margin-right: 1rem;
     }
 
     .ua-count {
       font-weight: 600;
-      color: #111827;
-      text-align: right;
-      white-space: nowrap;
+      color: #f0f6fc;
+      font-size: 0.875rem;
     }
 
-    .ua-percentage {
-      color: #6b7280;
-      text-align: right;
-      font-size: 0.75rem;
+    .uplot {
+      margin: 0 auto;
     }
 
-    .no-results {
-      text-align: center;
-      padding: 2rem;
-      color: #6b7280;
-      font-style: italic;
+    .u-legend {
+      display: none !important;
     }
 
-    .loading {
-      text-align: center;
-      padding: 3rem;
-      color: #6b7280;
-    }
-
-    .loading-spinner {
-      display: inline-block;
-      width: 2rem;
-      height: 2rem;
-      border: 3px solid #e5e7eb;
-      border-radius: 50%;
-      border-top-color: #6366f1;
-      animation: spin 1s ease-in-out infinite;
-      margin-bottom: 1rem;
-    }
+    @media (max-width: 768px) {
+      .dashboard {
+        padding: 0 1rem 1rem;
+      }
 
-    @keyframes spin {
-      to {
-        transform: rotate(360deg);
+      .stats-grid {
+        grid-template-columns: repeat(2, 1fr);
       }
-    }
 
-    .error {
-      background: #fef2f2;
-      color: #dc2626;
-      padding: 1rem;
-      border-radius: 8px;
-      margin: 1rem 0;
-      border: 1px solid #fecaca;
-    }
-
-    .auto-refresh {
-      display: flex;
-      align-items: center;
-      gap: 0.5rem;
-      font-size: 0.875rem;
-      color: #6b7280;
-    }
-
-    .auto-refresh input[type="checkbox"] {
-      transform: scale(1.1);
-      accent-color: #6366f1;
+      .stat-number {
+        font-size: 1.5rem;
+      }
     }
   </style>
 </head>
 
 <body>
   <div class="header">
-    <h1>📊 Cachet Analytics Dashboard</h1>
-    <div class="header-links">
-      <a href="https://github.com/taciturnaxolotl/cachet">Github</a>
-      <a href="/swagger">API Docs</a>
-      <a href="/stats">Raw Stats</a>
-      <a href="https://status.dunkirk.sh/status/cachet">Status</a>
+    <div class="header-left">
+      <h1>📊 Cachet Analytics</h1>
+      <div class="header-links">
+        <a href="/swagger">API Docs</a>
+        <a href="/health">Health</a>
+        <a href="https://tangled.sh/dunkirk.sh/cachet" target="_blank">Source</a>
+      </div>
+    </div>
+    <div class="header-right" role="group" aria-label="Time range selector">
+      <button class="time-btn" data-days="1">24h</button>
+      <button class="time-btn active" data-days="7">7d</button>
+      <button class="time-btn" data-days="30">30d</button>
+      <button class="time-btn" data-days="90">90d</button>
+      <button class="time-btn" data-days="365">1y</button>
     </div>
   </div>
 
   <div class="dashboard">
-    <div class="controls">
-      <select id="daysSelect">
-        <option value="1">Last 24 hours</option>
-        <option value="7" selected>Last 7 days</option>
-        <option value="30">Last 30 days</option>
-      </select>
-      <button id="refreshBtn" onclick="loadData()">Refresh</button>
-      <div class="auto-refresh">
-        <input type="checkbox" id="autoRefresh" />
-        <label for="autoRefresh">Auto-refresh (30s)</label>
+
+    <div class="stats-grid">
+      <div class="stat-card">
+        <div class="stat-number" id="totalRequests">-</div>
+        <div class="stat-label">Total Requests</div>
+      </div>
+      <div class="stat-card">
+        <div class="stat-number" id="avgResponseTime">-</div>
+        <div class="stat-label">Avg Response</div>
+      </div>
+      <div class="stat-card">
+        <div class="stat-number" id="uptime">-</div>
+        <div class="stat-label">Uptime</div>
+      </div>
+      <div class="stat-card">
+        <div class="stat-number" id="uniqueAgents">-</div>
+        <div class="stat-label">User Agents</div>
       </div>
     </div>
 
-    <div id="loading" class="loading">
-      <div class="loading-spinner"></div>
-      Loading analytics data...
+    <div class="chart-container">
+      <div class="chart-title">Requests Over Time</div>
+      <div id="traffic-chart" role="img" aria-label="Traffic chart"></div>
+      <div class="chart-hint">Drag to zoom • Double-click to reset</div>
+      <div class="loading-overlay hidden" id="chartLoading">
+        <span class="loading-text">Loading...</span>
+      </div>
     </div>
-    <div id="error" class="error" style="display: none"></div>
 
-    <div id="content" style="display: none">
-      <!-- Key Metrics -->
-      <div class="stats-grid">
-        <div class="stat-card">
-          <div class="stat-number" id="totalRequests">-</div>
-          <div class="stat-label">Total Requests</div>
-        </div>
-        <div class="stat-card">
-          <div class="stat-number" id="uptime">-</div>
-          <div class="stat-label">Uptime</div>
-        </div>
-        <div class="stat-card">
-          <div class="stat-number" id="avgResponseTime">-</div>
-          <div class="stat-label">Avg Response Time</div>
-        </div>
-      </div>
-
-      <!-- Main Charts -->
-      <div class="charts-grid">
-        <div class="charts-row">
-          <div class="chart-container">
-            <div class="chart-title">Requests Over Time</div>
-            <canvas id="requestsChart"></canvas>
-          </div>
-          <div class="chart-container">
-            <div class="chart-title">Latency Over Time</div>
-            <canvas id="latencyChart"></canvas>
-          </div>
-        </div>
-      </div>
-
-      <!-- User Agents Table -->
-      <div class="user-agents-table">
-        <div class="chart-title">User Agents</div>
-        <div class="search-container">
-          <input type="text" id="userAgentSearch" class="search-input" placeholder="Search user agents...">
-        </div>
-        <div id="userAgentsTable">
-          <div class="loading">Loading user agents...</div>
-        </div>
-      </div>
+    <div class="user-agents-section">
+      <div class="section-title">Top User Agents</div>
+      <input type="text" class="search-input" id="uaSearch" placeholder="Search user agents...">
+      <div class="ua-list" id="uaList"></div>
     </div>
   </div>
 
   <script>
-    const charts = {};
-    let autoRefreshInterval;
-    const _currentData = null;
-    let _isLoading = false;
-    let currentRequestId = 0;
+    // State
+    let currentDays = 7;
+    let chart = null;
+    let allUserAgents = [];
     let abortController = null;
 
-    // Debounced resize handler for charts
-    let resizeTimeout;
-    function handleResize() {
-      clearTimeout(resizeTimeout);
-      resizeTimeout = setTimeout(() => {
-        Object.values(charts).forEach(chart => {
-          if (chart && typeof chart.resize === 'function') {
-            chart.resize();
-          }
-        });
-      }, 250);
+    // Utilities
+    function formatNumber(n) {
+      if (n >= 1_000_000) return `${(n / 1_000_000).toFixed(1)}M`;
+      if (n >= 1_000) return `${(n / 1_000).toFixed(1)}K`;
+      return n.toLocaleString();
     }
 
-    window.addEventListener('resize', handleResize);
+    function formatMs(ms) {
+      if (ms === null || ms === undefined) return '-';
+      if (ms < 1) return '<1ms';
+      if (ms < 1000) return `${Math.round(ms)}ms`;
+      return `${(ms / 1000).toFixed(2)}s`;
+    }
 
-    async function loadData() {
-      // Cancel any existing requests
-      if (abortController) {
-        abortController.abort();
+    function parseUserAgent(ua) {
+      if (!ua) return 'Unknown';
+      if (ua.length < 50 || !ua.includes('Mozilla/') || ua.includes('bot') || ua.includes('curl')) {
+        return ua.length > 60 ? ua.substring(0, 57) + '...' : ua;
       }
 
-      // Create new abort controller for this request
-      abortController = new AbortController();
-      const requestId = ++currentRequestId;
-      const signal = abortController.signal;
-
-      _isLoading = true;
-      const startTime = Date.now();
-
-      // Capture the days value at the start to ensure consistency
-      const days = document.getElementById("daysSelect").value;
-      const loading = document.getElementById("loading");
-      const error = document.getElementById("error");
-      const content = document.getElementById("content");
-      const refreshBtn = document.getElementById("refreshBtn");
-
-      console.log(`Starting request ${requestId} for ${days} days`);
-
-      // Update UI state
-      loading.style.display = "block";
-      error.style.display = "none";
-      content.style.display = "none";
-      refreshBtn.disabled = true;
-      refreshBtn.textContent = "Loading...";
+      const os = ua.includes('Macintosh') ? 'macOS' :
+        ua.includes('Windows') ? 'Windows' :
+        ua.includes('Linux') ? 'Linux' :
+        ua.includes('iPhone') ? 'iOS' :
+        ua.includes('Android') ? 'Android' : '';
 
-      try {
-        // Step 1: Load essential stats first (fastest)
-        console.log(`[${requestId}] Loading essential stats...`);
-        const essentialResponse = await fetch(`/api/stats/essential?days=${days}`, {signal});
+      let browser = '';
+      if (ua.includes('Edg/')) browser = 'Edge';
+      else if (ua.includes('Chrome/')) browser = 'Chrome';
+      else if (ua.includes('Firefox/')) browser = 'Firefox';
+      else if (ua.includes('Safari/') && !ua.includes('Chrome')) browser = 'Safari';
 
-        // Check if this request is still current
-        if (requestId !== currentRequestId) {
-          console.log(`[${requestId}] Request cancelled (essential stats)`);
-          return;
-        }
+      if (browser && os) return `${browser} (${os})`;
+      if (browser) return browser;
+      return ua.length > 60 ? ua.substring(0, 57) + '...' : ua;
+    }
 
-        if (!essentialResponse.ok) throw new Error(`HTTP ${essentialResponse.status}`);
+    // Chart
+    function initChart(data) {
+      const container = document.getElementById('traffic-chart');
+      const width = container.clientWidth;
 
-        const essentialData = await essentialResponse.json();
+      if (chart) {
+        chart.destroy();
+      }
 
-        // Double-check we're still the current request
-        if (requestId !== currentRequestId) {
-          console.log(`[${requestId}] Request cancelled (essential stats after response)`);
-          return;
-        }
-
-        updateEssentialStats(essentialData);
-
-        // Show content immediately with essential stats
-        loading.style.display = "none";
-        content.style.display = "block";
-        refreshBtn.textContent = "Loading Charts...";
-
-        console.log(`[${requestId}] Essential stats loaded in ${Date.now() - startTime}ms`);
-
-        // Step 2: Load chart data (medium speed)
-        console.log(`[${requestId}] Loading chart data...`);
-        const chartResponse = await fetch(`/api/stats/charts?days=${days}`, {signal});
-
-        if (requestId !== currentRequestId) {
-          console.log(`[${requestId}] Request cancelled (chart data)`);
-          return;
-        }
-
-        if (!chartResponse.ok) throw new Error(`HTTP ${chartResponse.status}`);
-
-        const chartData = await chartResponse.json();
-
-        if (requestId !== currentRequestId) {
-          console.log(`[${requestId}] Request cancelled (chart data after response)`);
-          return;
-        }
-
-        updateCharts(chartData, parseInt(days, 10));
-        refreshBtn.textContent = "Loading User Agents...";
-
-        console.log(`[${requestId}] Charts loaded in ${Date.now() - startTime}ms`);
-
-        // Step 3: Load user agents last (slowest)
-        console.log(`[${requestId}] Loading user agents...`);
-        const userAgentsResponse = await fetch(`/api/stats/useragents?days=${days}`, {signal});
-
-        if (requestId !== currentRequestId) {
-          console.log(`[${requestId}] Request cancelled (user agents)`);
-          return;
-        }
-
-        if (!userAgentsResponse.ok) throw new Error(`HTTP ${userAgentsResponse.status}`);
-
-        const userAgentsData = await userAgentsResponse.json();
-
-        if (requestId !== currentRequestId) {
-          console.log(`[${requestId}] Request cancelled (user agents after response)`);
-          return;
-        }
-
-        updateUserAgentsTable(userAgentsData);
-
-        const totalTime = Date.now() - startTime;
-        console.log(`[${requestId}] All data loaded in ${totalTime}ms`);
-      } catch (err) {
-        // Only show error if this is still the current request
-        if (requestId === currentRequestId) {
-          if (err.name === 'AbortError') {
-            console.log(`[${requestId}] Request aborted`);
-          } else {
-            loading.style.display = "none";
-            error.style.display = "block";
-            error.textContent = `Failed to load data: ${err.message}`;
-            console.error(`[${requestId}] Error: ${err.message}`);
-          }
-        }
-      } finally {
-        // Only update UI if this is still the current request
-        if (requestId === currentRequestId) {
-          _isLoading = false;
-          refreshBtn.disabled = false;
-          refreshBtn.textContent = "Refresh";
-          abortController = null;
-        }
+      if (!data || data.length === 0) {
+        container.innerHTML = '<div style="color: #8b949e; text-align: center; padding: 2rem;">No data available</div>';
+        return;
       }
-    }
 
-    // Update just the essential stats (fast)
-    function updateEssentialStats(data) {
-      document.getElementById("totalRequests").textContent = data.totalRequests.toLocaleString();
-      document.getElementById("uptime").textContent = `${data.uptime.toFixed(1)}%`;
-      document.getElementById("avgResponseTime").textContent =
-        data.averageResponseTime ? `${Math.round(data.averageResponseTime)}ms` : "N/A";
-    }
-
-    // Update charts (medium speed)
-    function updateCharts(data, days) {
-      updateRequestsChart(data.requestsByDay, days === 1);
-      updateLatencyChart(data.latencyOverTime, days === 1);
-    }
-
-
-    // Requests Over Time Chart
-    function updateRequestsChart(data, _isHourly) {
-      const ctx = document.getElementById("requestsChart").getContext("2d");
-      const days = parseInt(document.getElementById("daysSelect").value, 10);
-
-      if (charts.requests) charts.requests.destroy();
+      // Transform data for uPlot
+      const timestamps = data.map(d => d.bucket);
+      const hits = data.map(d => d.hits);
 
-      // Format labels based on granularity
-      const labels = data.map((d) => {
-        if (days === 1) {
-          // 15-minute intervals: show just time
-          return d.date.split(" ")[1] || d.date;
-        } else if (days <= 7) {
-          // Hourly: show date + hour
-          const parts = d.date.split(" ");
-          const date = parts[0].split("-")[2]; // Get day
-          const hour = parts[1] || "00:00";
-          return `${date} ${hour}`;
-        } else {
-          // 4-hour intervals: show abbreviated
-          return d.date.split(" ")[0];
-        }
-      });
+      const minSpan = 1.5 * 86400; // 1.5 days minimum zoom
 
-      charts.requests = new Chart(ctx, {
-        type: "line",
-        data: {
-          labels: labels,
-          datasets: [{
-            label: "Requests",
-            data: data.map((d) => d.count),
-            borderColor: "#6366f1",
-            backgroundColor: "rgba(99, 102, 241, 0.1)",
-            tension: 0.4,
-            fill: true,
-            borderWidth: 1.5,
-            pointRadius: 1,
-            pointBackgroundColor: "#6366f1",
-          }],
+      const opts = {
+        width: width,
+        height: 280,
+        cursor: {
+          drag: { x: true, y: false }
         },
-        options: {
-          responsive: true,
-          maintainAspectRatio: false,
-          plugins: {
-            legend: {display: false},
-            tooltip: {
-              callbacks: {
-                title: (context) => {
-                  const original = data[context[0].dataIndex];
-                  if (days === 1) return `Time: ${original.date}`;
-                  if (days <= 7) return `DateTime: ${original.date}`;
-                  return `Interval: ${original.date}`;
-                },
-                label: (context) => `Requests: ${context.parsed.y.toLocaleString()}`
+        select: {
+          show: true,
+          over: true,
+        },
+        scales: {
+          x: {
+            time: true,
+            range: (u, dataMin, dataMax) => {
+              let min = dataMin;
+              let max = dataMax;
+              const span = max - min;
+              if (span < minSpan) {
+                const center = (min + max) / 2;
+                min = center - minSpan / 2;
+                max = center + minSpan / 2;
               }
+              return [min, max];
             }
           },
-          scales: {
-            x: {
-              title: {
-                display: true,
-                text: days === 1 ? 'Time (15min intervals)' : days <= 7 ? 'Time (hourly)' : 'Time (4hr intervals)'
-              },
-              grid: {color: 'rgba(0, 0, 0, 0.05)'},
-              ticks: {
-                maxTicksLimit: days === 1 ? 12 : 20,
-                maxRotation: 0,
-                minRotation: 0
+          y: { auto: true, range: (u, min, max) => [0, max * 1.1] }
+        },
+        axes: [
+          {
+            stroke: '#8b949e',
+            grid: { stroke: '#21262d', width: 1 },
+            ticks: { stroke: '#30363d', width: 1 },
+            font: '11px system-ui',
+          },
+          {
+            stroke: '#8b949e',
+            grid: { stroke: '#21262d', width: 1 },
+            ticks: { stroke: '#30363d', width: 1 },
+            font: '11px system-ui',
+            values: (u, vals) => vals.map(v => formatNumber(v)),
+          }
+        ],
+        series: [
+          {},
+          {
+            label: 'Requests',
+            stroke: '#238636',
+            width: 2,
+            fill: 'rgba(35, 134, 54, 0.1)',
+          }
+        ],
+        hooks: {
+          setSelect: [
+            (u) => {
+              if (u.select.width > 10) {
+                const min = u.posToVal(u.select.left, 'x');
+                const max = u.posToVal(u.select.left + u.select.width, 'x');
+                handleZoom(min, max);
               }
-            },
-            y: {
-              title: {display: true, text: 'Requests'},
-              beginAtZero: true,
-              grid: {color: 'rgba(0, 0, 0, 0.05)'}
+              u.setSelect({ left: 0, width: 0, top: 0, height: 0 }, false);
             }
-          }
+          ]
         }
+      };
+
+      chart = new uPlot(opts, [timestamps, hits], container);
+
+      // Double-click to reset zoom
+      container.addEventListener('dblclick', () => {
+        loadData();
       });
     }
 
-    // Latency Over Time Chart
-    function updateLatencyChart(data, _isHourly) {
-      const ctx = document.getElementById("latencyChart").getContext("2d");
-      const days = parseInt(document.getElementById("daysSelect").value, 10);
-
-      if (charts.latency) charts.latency.destroy();
+    function handleZoom(minTime, maxTime) {
+      const minSpan = 1.5 * 86400; // 1.5 days minimum
+      let span = maxTime - minTime;
+      
+      // Enforce minimum zoom
+      if (span < minSpan) {
+        const center = (minTime + maxTime) / 2;
+        minTime = Math.floor(center - minSpan / 2);
+        maxTime = Math.floor(center + minSpan / 2);
+      }
 
-      // Format labels based on granularity
-      const labels = data.map((d) => {
-        if (days === 1) {
-          // 15-minute intervals: show just time
-          return d.time.split(" ")[1] || d.time;
-        } else if (days <= 7) {
-          // Hourly: show date + hour
-          const parts = d.time.split(" ");
-          const date = parts[0].split("-")[2]; // Get day
-          const hour = parts[1] || "00:00";
-          return `${date} ${hour}`;
-        } else {
-          // 4-hour intervals: show abbreviated
-          return d.time.split(" ")[0];
+      showLoading(true);
+      fetchTrafficData(minTime, maxTime).then(data => {
+        if (data !== null) {
+          initChart(data);
         }
+        showLoading(false);
       });
+    }
 
-      // Calculate dynamic max for logarithmic scale
-      const responseTimes = data.map((d) => d.averageResponseTime);
-      const maxResponseTime = Math.max(...responseTimes);
+    function showLoading(show) {
+      document.getElementById('chartLoading').classList.toggle('hidden', !show);
+    }
 
-      // Calculate appropriate max for log scale (next power of 10)
-      const logMax = 10 ** Math.ceil(Math.log10(maxResponseTime));
+    // Data fetching
+    let fetchId = 0;
+    async function fetchTrafficData(startTime, endTime) {
+      const thisFetchId = ++fetchId;
+      
+      if (abortController) {
+        abortController.abort();
+      }
+      abortController = new AbortController();
 
-      // Generate dynamic tick values based on the data range
-      const generateLogTicks = (_min, max) => {
-        const ticks = [];
-        let current = 1;
-        while (current <= max) {
-          ticks.push(current);
-          current *= 10;
+      try {
+        let url = '/stats/traffic';
+        if (startTime && endTime) {
+          url += `?start=${Math.floor(startTime)}&end=${Math.floor(endTime)}`;
+        } else {
+          url += `?days=${currentDays}`;
         }
-        return ticks;
-      };
 
-      const dynamicTicks = generateLogTicks(1, logMax);
-
-      charts.latency = new Chart(ctx, {
-        type: "line",
-        data: {
-          labels: labels,
-          datasets: [{
-            label: "Average Response Time",
-            data: responseTimes,
-            borderColor: "#10b981",
-            backgroundColor: "rgba(16, 185, 129, 0.1)",
-            tension: 0.4,
-            fill: true,
-            borderWidth: 1.5,
-            pointRadius: 1,
-            pointBackgroundColor: "#10b981",
-          }],
-        },
-        options: {
-          responsive: true,
-          maintainAspectRatio: false,
-          plugins: {
-            legend: {display: false},
-            tooltip: {
-              callbacks: {
-                title: (context) => {
-                  const original = data[context[0].dataIndex];
-                  if (days === 1) return `Time: ${original.time}`;
-                  if (days <= 7) return `DateTime: ${original.time}`;
-                  return `Interval: ${original.time}`;
-                },
-                label: (context) => {
-                  const point = data[context.dataIndex];
-                  return [
-                    `Response Time: ${Math.round(context.parsed.y)}ms`,
-                    `Request Count: ${point.count.toLocaleString()}`
-                  ];
-                }
-              }
-            }
-          },
-          scales: {
-            x: {
-              title: {
-                display: true,
-                text: days === 1 ? 'Time (15min intervals)' : days <= 7 ? 'Time (hourly)' : 'Time (4hr intervals)'
-              },
-              grid: {color: 'rgba(0, 0, 0, 0.05)'},
-              ticks: {
-                maxTicksLimit: days === 1 ? 12 : 20,
-                maxRotation: 0,
-                minRotation: 0
-              }
-            },
-            y: {
-              type: 'logarithmic',
-              title: {display: true, text: 'Response Time (ms, log scale)'},
-              min: 1,
-              max: logMax,
-              grid: {color: 'rgba(0, 0, 0, 0.05)'},
-              ticks: {
-                callback: (value) => {
-                  // Show clean numbers based on dynamic range
-                  if (dynamicTicks.includes(value)) {
-                    return `${value}ms`;
-                  }
-                  return '';
-                }
-              }
-            }
-          }
+        const res = await fetch(url, { signal: abortController.signal });
+        if (!res.ok) throw new Error('Failed to fetch traffic data');
+        const data = await res.json();
+        
+        // Only return data if this is still the latest fetch
+        if (thisFetchId !== fetchId) return null;
+        return data;
+      } catch (e) {
+        if (e.name !== 'AbortError') {
+          console.error('Error fetching traffic:', e);
         }
-      });
+        return null;
+      }
     }
 
-    // User Agents Table
-    let allUserAgents = [];
+    async function loadData() {
+      showLoading(true);
 
-    function updateUserAgentsTable(userAgents) {
-      allUserAgents = userAgents;
-      renderUserAgentsTable(userAgents);
-      setupUserAgentSearch();
-    }
+      try {
+        // Fetch stats and traffic in parallel
+        const [statsRes, trafficData, uaRes] = await Promise.all([
+          fetch(`/stats/essential?days=${currentDays}`),
+          fetchTrafficData(),
+          fetch('/stats/useragents')
+        ]);
 
-    function parseUserAgent(ua) {
-      // Keep strange/unique ones as-is
-      if (ua.length < 50 ||
-        !ua.includes('Mozilla/') ||
-        ua.includes('bot') ||
-        ua.includes('crawler') ||
-        ua.includes('spider') ||
-        !ua.includes('AppleWebKit') ||
-        ua.includes('Shiba-Arcade') ||
-        ua === 'node' ||
-        ua.includes('curl') ||
-        ua.includes('python') ||
-        ua.includes('PostmanRuntime')) {
-        return ua;
-      }
+        // If traffic fetch was superseded, don't update
+        if (trafficData === null) {
+          showLoading(false);
+          return;
+        }
 
-      // Parse common browsers
-      const os = ua.includes('Macintosh') ? 'macOS' :
-        ua.includes('Windows NT 10.0') ? 'Windows 10' :
-          ua.includes('Windows NT') ? 'Windows' :
-            ua.includes('X11; Linux') ? 'Linux' :
-              ua.includes('iPhone') ? 'iOS' :
-                ua.includes('Android') ? 'Android' : 'Unknown OS';
+        const stats = await statsRes.json();
+        const userAgents = await uaRes.json();
+
+        // Update stats cards
+        document.getElementById('totalRequests').textContent = formatNumber(stats.totalRequests || 0);
+        document.getElementById('avgResponseTime').textContent = formatMs(stats.averageResponseTime);
+        document.getElementById('uptime').textContent = stats.uptime ? `${stats.uptime.toFixed(1)}%` : '-';
+        document.getElementById('uniqueAgents').textContent = formatNumber(userAgents.length || 0);
+
+        // Update chart
+        initChart(trafficData);
 
-      // Detect browser and version
-      let browser = 'Unknown Browser';
+        // Update user agents
+        allUserAgents = userAgents;
+        renderUserAgents(userAgents);
 
-      if (ua.includes('Edg/')) {
-        const match = ua.match(/Edg\/(\d+\.\d+)/);
-        const version = match ? match[1] : '';
-        browser = `Edge ${version}`;
-      } else if (ua.includes('Chrome/')) {
-        const match = ua.match(/Chrome\/(\d+\.\d+)/);
-        const version = match ? match[1] : '';
-        browser = `Chrome ${version}`;
-      } else if (ua.includes('Firefox/')) {
-        const match = ua.match(/Firefox\/(\d+\.\d+)/);
-        const version = match ? match[1] : '';
-        browser = `Firefox ${version}`;
-      } else if (ua.includes('Safari/') && !ua.includes('Chrome')) {
-        browser = 'Safari';
+      } catch (e) {
+        console.error('Error loading data:', e);
+      } finally {
+        showLoading(false);
       }
-
-      return `${browser} (${os})`;
     }
 
-    function renderUserAgentsTable(userAgents) {
-      const container = document.getElementById("userAgentsTable");
-
-      if (userAgents.length === 0) {
-        container.innerHTML = '<div class="no-results">No user agents found</div>';
+    // User agents
+    function renderUserAgents(agents) {
+      const list = document.getElementById('uaList');
+      
+      if (!agents || agents.length === 0) {
+        list.innerHTML = '<div style="color: #8b949e; padding: 1rem 0;">No user agents found</div>';
         return;
       }
 
-      const totalRequests = userAgents.reduce((sum, ua) => sum + ua.count, 0);
-
-      const tableHTML = `
-          <table class="ua-table">
-            <thead>
-              <tr>
-                <th style="width: 50%">User Agent</th>
-                <th style="width: 20%">Requests</th>
-                <th style="width: 15%">Percentage</th>
-              </tr>
-            </thead>
-            <tbody>
-              ${userAgents.map(ua => {
-        const displayName = parseUserAgent(ua.userAgent);
-        const percentage = ((ua.count / totalRequests) * 100).toFixed(1);
-
+      list.innerHTML = agents.slice(0, 50).map((ua, i) => {
+        const rankClass = i < 3 ? `top-${i + 1}` : '';
         return `
-                  <tr>
-                    <td>
-                      <div class="ua-name">${displayName}</div>
-                      <div class="ua-raw">${ua.userAgent}</div>
-                    </td>
-                    <td class="ua-count">${ua.count.toLocaleString()}</td>
-                    <td class="ua-percentage">${percentage}%</td>
-                  </tr>
-                `;
-      }).join('')}
-            </tbody>
-          </table>
+          <div class="ua-item">
+            <span class="ua-rank ${rankClass}">${i + 1}</span>
+            <span class="ua-name" title="${ua.userAgent}">${parseUserAgent(ua.userAgent)}</span>
+            <span class="ua-count">${formatNumber(ua.hits || ua.count)}</span>
+          </div>
         `;
-
-      container.innerHTML = tableHTML;
+      }).join('');
     }
 
-    function setupUserAgentSearch() {
-      const searchInput = document.getElementById('userAgentSearch');
-
-      searchInput.addEventListener('input', function () {
-        const searchTerm = this.value.toLowerCase().trim();
-
-        if (searchTerm === '') {
-          renderUserAgentsTable(allUserAgents);
-          return;
-        }
-
-        const filtered = allUserAgents.filter(ua => {
-          const displayName = parseUserAgent(ua.userAgent).toLowerCase();
-          const rawUA = ua.userAgent.toLowerCase();
-          return displayName.includes(searchTerm) || rawUA.includes(searchTerm);
-        });
-
-        renderUserAgentsTable(filtered);
+    // Event listeners
+    document.querySelectorAll('.time-btn').forEach(btn => {
+      btn.addEventListener('click', () => {
+        document.querySelectorAll('.time-btn').forEach(b => b.classList.remove('active'));
+        btn.classList.add('active');
+        currentDays = parseInt(btn.dataset.days);
+        loadData();
       });
-    }
+    });
 
-    // Event Handlers
-    document.getElementById("autoRefresh").addEventListener("change", function () {
-      if (this.checked) {
-        autoRefreshInterval = setInterval(loadData, 30000);
-      } else {
-        clearInterval(autoRefreshInterval);
+    document.getElementById('uaSearch').addEventListener('input', (e) => {
+      const term = e.target.value.toLowerCase();
+      if (!term) {
+        renderUserAgents(allUserAgents);
+        return;
       }
+      const filtered = allUserAgents.filter(ua => 
+        ua.userAgent.toLowerCase().includes(term) ||
+        parseUserAgent(ua.userAgent).toLowerCase().includes(term)
+      );
+      renderUserAgents(filtered);
     });
 
-    document.getElementById("daysSelect").addEventListener("change", loadData);
-
-    // Initialize dashboard
-    document.addEventListener('DOMContentLoaded', loadData);
-
-    // Cleanup on page unload
-    window.addEventListener('beforeunload', () => {
-      clearInterval(autoRefreshInterval);
-      Object.values(charts).forEach(chart => {
-        if (chart && typeof chart.destroy === 'function') {
-          chart.destroy();
+    // Handle resize
+    let resizeTimeout;
+    window.addEventListener('resize', () => {
+      clearTimeout(resizeTimeout);
+      resizeTimeout = setTimeout(() => {
+        if (chart) {
+          const container = document.getElementById('traffic-chart');
+          chart.setSize({ width: container.clientWidth, height: 280 });
         }
-      });
+      }, 100);
     });
+
+    // Initialize
+    document.addEventListener('DOMContentLoaded', loadData);
   </script>
 </body>
 
-</html>
+</html>

src/handlers/index.ts

···
 };
 
 export const handleGetUserAgents: RouteHandlerWithAnalytics = async (
+	_request,
+	recordAnalytics,
+) => {
+	const userAgents = await cache.getUserAgents();
+	await recordAnalytics(200);
+	return Response.json(userAgents);
+};
+
+export const handleGetTraffic: RouteHandlerWithAnalytics = async (
 	request,
 	recordAnalytics,
 ) => {
 	const url = new URL(request.url);
 	const params = new URLSearchParams(url.search);
+
+	const startParam = params.get("start");
+	const endParam = params.get("end");
 	const daysParam = params.get("days");
-	const days = daysParam ? parseInt(daysParam, 10) : 7;
 
-	const userAgents = await cache.getUserAgents(days);
+	let options: { days?: number; startTime?: number; endTime?: number } = {};
+
+	if (startParam && endParam) {
+		options.startTime = parseInt(startParam, 10);
+		options.endTime = parseInt(endParam, 10);
+	} else {
+		options.days = daysParam ? parseInt(daysParam, 10) : 7;
+	}
+
+	const traffic = cache.getTraffic(options);
 	await recordAnalytics(200);
-	return Response.json(userAgents);
+	return Response.json(traffic);
 };
 
 export const handleGetStats: RouteHandlerWithAnalytics = async (

src/routes/api-routes.ts

···
 				{
 					summary: "Get user agents statistics",
 					description:
-						"List of user agents accessing the service with request counts",
+						"Cumulative list of user agents accessing the service with hit counts",
+					tags: ["Analytics"],
+					responses: Object.fromEntries([
+						apiResponse(200, "User agents data retrieved successfully", {
+							type: "array",
+							items: {
+								type: "object",
+								properties: {
+									userAgent: { type: "string", example: "Mozilla/5.0..." },
+									hits: { type: "number", example: 123 },
+								},
+							},
+						}),
+					]),
+				},
+			),
+		},
+
+		"/stats/traffic": {
+			GET: createRoute(
+				withAnalytics("/stats/traffic", "GET", handlers.handleGetTraffic),
+				{
+					summary: "Get traffic time-series data",
+					description:
+						"Returns bucketed traffic data with adaptive granularity based on time range",
 					tags: ["Analytics"],
 					parameters: {
 						query: [
 							queryParam(
 								"days",
 								"number",
-								"Number of days to analyze",
+								"Number of days to look back (default: 7)",
 								false,
 								7,
 							),
+							queryParam(
+								"start",
+								"number",
+								"Start timestamp in seconds (use with end)",
+								false,
+							),
+							queryParam(
+								"end",
+								"number",
+								"End timestamp in seconds (use with start)",
+								false,
+							),
 						],
 					},
 					responses: Object.fromEntries([
-						apiResponse(200, "User agents data retrieved successfully", {
+						apiResponse(200, "Traffic data retrieved successfully", {
 							type: "array",
 							items: {
 								type: "object",
 								properties: {
-									userAgent: { type: "string", example: "Mozilla/5.0..." },
-									count: { type: "number", example: 123 },
+									bucket: {
+										type: "number",
+										example: 1704067200,
+										description: "Unix timestamp of bucket start",
+									},
+									hits: { type: "number", example: 42 },
 								},
 							},
 						}),
···
 								averageResponseTime: { type: "number" },
 								chartData: { type: "array" },
 								userAgents: { type: "array" },
+							},
+						}),
+					]),
+				},
+			),
+		},
+
+		"/stats/essential": {
+			GET: createRoute(
+				withAnalytics("/stats/essential", "GET", handlers.handleGetEssentialStats),
+				{
+					summary: "Get essential stats",
+					description: "Fast-loading essential statistics for the dashboard",
+					tags: ["Analytics"],
+					parameters: {
+						query: [
+							queryParam("days", "number", "Number of days to analyze", false, 7),
+						],
+					},
+					responses: Object.fromEntries([
+						apiResponse(200, "Essential stats retrieved", {
+							type: "object",
+							properties: {
+								totalRequests: { type: "number" },
+								averageResponseTime: { type: "number" },
+								uptime: { type: "number" },
+							},
+						}),
+					]),
+				},
+			),
+		},
+
+		"/stats/useragents": {
+			GET: createRoute(
+				withAnalytics("/stats/useragents", "GET", handlers.handleGetUserAgents),
+				{
+					summary: "Get user agents",
+					description: "Cumulative user agent statistics",
+					tags: ["Analytics"],
+					responses: Object.fromEntries([
+						apiResponse(200, "User agents retrieved", {
+							type: "array",
+							items: {
+								type: "object",
+								properties: {
+									userAgent: { type: "string" },
+									hits: { type: "number" },
+								},
 							},
 						}),
 					]),