@mantiq/heartbeat 0.5.21 → 0.5.23

package/src/dashboard/pages/ModelsPage.ts

@@ -0,0 +1,112 @@
+import { renderLayout } from '../shared/layout.ts'
+import { table, badge, timeAgo, escapeHtml, truncate, stat } from '../shared/components.ts'
+import type { HeartbeatStore } from '../../storage/HeartbeatStore.ts'
+import type { ModelEntryContent } from '../../contracts/Entry.ts'
+
+const PER_PAGE = 50
+
+const ACTION_VARIANTS: Record<string, 'green' | 'blue' | 'red'> = {
+  created: 'green',
+  updated: 'blue',
+  deleted: 'red',
+}
+
+function originBadge(entry: { origin_type: string }): string {
+  const v: Record<string, 'green' | 'blue' | 'amber' | 'mute'> = {
+    request: 'green',
+    command: 'blue',
+    schedule: 'amber',
+    job: 'blue',
+  }
+  return badge(entry.origin_type, v[entry.origin_type] ?? 'mute')
+}
+
+export async function renderModelsPage(store: HeartbeatStore, basePath: string, searchParams?: URLSearchParams): Promise<string> {
+  const page = Math.max(1, parseInt(searchParams?.get('page') ?? '1', 10))
+  const actionFilter = searchParams?.get('action') ?? ''
+  const search = searchParams?.get('q') ?? ''
+
+  const total = await store.countEntries('model')
+  const entries = await store.getEntries({ type: 'model', limit: PER_PAGE, offset: (page - 1) * PER_PAGE })
+
+  let creates = 0, updates = 0, deletes = 0
+  const filtered: typeof entries = []
+  for (const e of entries) {
+    const c = JSON.parse(e.content) as ModelEntryContent
+    if (c.action === 'created') creates++
+    else if (c.action === 'updated') updates++
+    else if (c.action === 'deleted') deletes++
+
+    if (actionFilter && c.action !== actionFilter) continue
+    if (search && !c.model_class.toLowerCase().includes(search.toLowerCase())) continue
+    filtered.push(e)
+  }
+
+  const rows = filtered.map((entry) => {
+    const c = JSON.parse(entry.content) as ModelEntryContent
+    const changesPreview = c.changes ? truncate(JSON.stringify(c.changes), 60) : '--'
+    return [
+      badge(c.action, ACTION_VARIANTS[c.action] ?? 'mute'),
+      `<span class="mono sm">${escapeHtml(c.model_class)}</span>`,
+      c.key != null ? `<span class="mono sm muted">${escapeHtml(String(c.key))}</span>` : '<span class="dim">--</span>',
+      `<span class="mono trunc sm" title="${escapeHtml(changesPreview)}">${escapeHtml(changesPreview)}</span>`,
+      originBadge(entry),
+      `<span class="sm dim">${timeAgo(entry.created_at)}</span>`,
+    ]
+  })
+
+  const totalPages = Math.ceil(total / PER_PAGE)
+
+  const actionOptions = ['created', 'updated', 'deleted']
+    .map((a) => `<option value="${a}"${actionFilter === a ? ' selected' : ''}>${a}</option>`)
+    .join('')
+
+  const content = `
+    <div class="stats">
+      ${stat('Total Events', total.toString())}
+      ${stat('Creates', creates.toString())}
+      ${stat('Updates', updates.toString())}
+      ${stat('Deletes', deletes.toString())}
+    </div>
+
+    <div class="card mb" style="padding:10px 14px;display:flex;align-items:center;gap:10px;flex-wrap:wrap">
+      <form method="get" action="${basePath}/models" style="display:flex;align-items:center;gap:10px;flex-wrap:wrap;flex:1">
+        <select name="action" style="padding:5px 8px;border-radius:4px;border:1px solid var(--border);background:var(--bg-2);color:var(--fg-1);font-size:12px">
+          <option value="">All actions</option>
+          ${actionOptions}
+        </select>
+        <input type="text" name="q" value="${escapeHtml(search)}" placeholder="Search model class\u2026" style="padding:5px 8px;border-radius:4px;border:1px solid var(--border);background:var(--bg-2);color:var(--fg-1);font-size:12px;flex:1;min-width:160px">
+        <button type="submit" style="padding:5px 12px;border-radius:4px;border:1px solid var(--border);background:var(--bg-2);color:var(--fg-1);font-size:12px;cursor:pointer">Filter</button>
+      </form>
+    </div>
+
+    <div class="card">
+      ${table(['Action', 'Model Class', 'Key', 'Changes', 'Origin', 'Time'], rows)}
+    </div>
+
+    ${pagination(basePath + '/models', page, totalPages, searchParams)}
+  `
+
+  return renderLayout({ title: 'Models', activePage: 'models', basePath, content })
+}
+
+function pagination(baseUrl: string, current: number, total: number, searchParams?: URLSearchParams): string {
+  if (total <= 1) return ''
+
+  function buildUrl(p: number): string {
+    const params = new URLSearchParams(searchParams?.toString() ?? '')
+    params.set('page', String(p))
+    return `${baseUrl}?${params.toString()}`
+  }
+
+  const items: string[] = []
+  if (current > 1) {
+    items.push(`<a href="${buildUrl(current - 1)}" style="padding:4px 10px;border-radius:4px;border:1px solid var(--border);color:var(--fg-2);text-decoration:none;font-size:12px">&larr; Prev</a>`)
+  }
+  items.push(`<span class="sm dim">Page ${current} of ${total}</span>`)
+  if (current < total) {
+    items.push(`<a href="${buildUrl(current + 1)}" style="padding:4px 10px;border-radius:4px;border:1px solid var(--border);color:var(--fg-2);text-decoration:none;font-size:12px">Next &rarr;</a>`)
+  }
+
+  return `<div style="display:flex;align-items:center;justify-content:center;gap:12px;margin-top:14px">${items.join('')}</div>`
+}

package/src/dashboard/pages/NotificationsPage.ts

@@ -0,0 +1,87 @@
+import { renderLayout } from '../shared/layout.ts'
+import { table, badge, timeAgo, escapeHtml, stat } from '../shared/components.ts'
+import type { HeartbeatStore } from '../../storage/HeartbeatStore.ts'
+
+const PER_PAGE = 50
+
+interface NotificationContent {
+  type: string
+  channel: string
+  notifiable: string
+  status: string
+}
+
+export async function renderNotificationsPage(store: HeartbeatStore, basePath: string, searchParams?: URLSearchParams): Promise<string> {
+  const page = Math.max(1, parseInt(searchParams?.get('page') ?? '1', 10))
+
+  // Notifications are stored as 'notification' type entries when @mantiq/notify is installed
+  const entries = await store.getEntries({ type: 'notification' as any, limit: PER_PAGE, offset: (page - 1) * PER_PAGE })
+  const total = await store.countEntries('notification' as any)
+
+  if (entries.length === 0) {
+    const content = `
+      <div class="stats">
+        ${stat('Total Sent', '0')}
+      </div>
+      <div class="card">
+        <div class="empty" style="padding:48px 16px">
+          <div style="font-size:14px;color:var(--fg-2);margin-bottom:6px">No notifications recorded</div>
+          <div style="font-size:12px;color:var(--fg-3)">Notifications are tracked when <code>@mantiq/notify</code> is installed.</div>
+        </div>
+      </div>
+    `
+    return renderLayout({ title: 'Notifications', activePage: 'notifications', basePath, content })
+  }
+
+  const rows = entries.map((entry) => {
+    let c: NotificationContent
+    try { c = JSON.parse(entry.content) } catch { return [] }
+
+    const statusVariant = c.status === 'sent' ? 'green' : c.status === 'failed' ? 'red' : 'mute'
+
+    return [
+      `<span class="mono sm">${escapeHtml(c.type ?? '--')}</span>`,
+      `<span class="sm muted">${escapeHtml(c.channel ?? '--')}</span>`,
+      `<span class="sm muted">${escapeHtml(c.notifiable ?? '--')}</span>`,
+      badge(c.status ?? 'unknown', statusVariant as any),
+      `<span class="sm dim">${timeAgo(entry.created_at)}</span>`,
+    ]
+  }).filter((row) => row.length > 0)
+
+  const totalPages = Math.ceil(total / PER_PAGE)
+
+  const content = `
+    <div class="stats">
+      ${stat('Total Sent', total.toString())}
+    </div>
+
+    <div class="card">
+      ${table(['Type', 'Channel', 'Notifiable', 'Status', 'Time'], rows)}
+    </div>
+
+    ${pagination(basePath + '/notifications', page, totalPages, searchParams)}
+  `
+
+  return renderLayout({ title: 'Notifications', activePage: 'notifications', basePath, content })
+}
+
+function pagination(baseUrl: string, current: number, total: number, searchParams?: URLSearchParams): string {
+  if (total <= 1) return ''
+
+  function buildUrl(p: number): string {
+    const params = new URLSearchParams(searchParams?.toString() ?? '')
+    params.set('page', String(p))
+    return `${baseUrl}?${params.toString()}`
+  }
+
+  const items: string[] = []
+  if (current > 1) {
+    items.push(`<a href="${buildUrl(current - 1)}" style="padding:4px 10px;border-radius:4px;border:1px solid var(--border);color:var(--fg-2);text-decoration:none;font-size:12px">&larr; Prev</a>`)
+  }
+  items.push(`<span class="sm dim">Page ${current} of ${total}</span>`)
+  if (current < total) {
+    items.push(`<a href="${buildUrl(current + 1)}" style="padding:4px 10px;border-radius:4px;border:1px solid var(--border);color:var(--fg-2);text-decoration:none;font-size:12px">Next &rarr;</a>`)
+  }
+
+  return `<div style="display:flex;align-items:center;justify-content:center;gap:12px;margin-top:14px">${items.join('')}</div>`
+}

package/src/dashboard/pages/OverviewPage.ts

@@ -1,72 +1,136 @@
 import { renderLayout } from '../shared/layout.ts'
-import { stat, formatBytes } from '../shared/components.ts'
-import { lineChart } from '../shared/charts.ts'
+import { stat, table, formatBytes, escapeHtml, truncate, durationBadge, badge, timeAgo } from '../shared/components.ts'
+import { areaChart, ringChart } from '../shared/charts.ts'
 import type { HeartbeatStore } from '../../storage/HeartbeatStore.ts'
 import type { MetricsCollector } from '../../metrics/MetricsCollector.ts'
-import type { RequestEntryContent } from '../../contracts/Entry.ts'
+import type { RequestEntryContent, ExceptionEntryContent } from '../../contracts/Entry.ts'
 import { formatDuration } from '../../helpers/timing.ts'
 
 export async function renderOverviewPage(store: HeartbeatStore, metrics: MetricsCollector, basePath: string): Promise<string> {
-  const [requestCount, queryCount, exceptionCount, jobCount, cacheCount, recentRequests] = await Promise.all([
+  const now = Date.now()
+  const oneHourAgo = now - 3_600_000
+
+  const [
+    requestCount,
+    exceptionCount,
+    requestBuckets,
+    topSlowEndpoints,
+    topFrequentQueries,
+    recentExceptions,
+    recentRequests,
+  ] = await Promise.all([
     store.countEntries('request'),
-    store.countEntries('query'),
     store.countEntries('exception'),
-    store.countEntries('job'),
-    store.countEntries('cache'),
+    store.getTimeBuckets('request', 300_000, 12),
+    store.getTopSlowEndpoints(5, oneHourAgo),
+    store.getTopFrequentQueries(5, oneHourAgo),
+    store.getEntries({ type: 'exception', limit: 5 }),
     store.getEntries({ type: 'request', limit: 200 }),
   ])
 
   const p95 = metrics.percentile('http.requests.duration', 95)
   const totalErrors = metrics.getCounter('http.errors.total')
   const totalRequests = metrics.getCounter('http.requests.total')
-  const rss = metrics.getGauge('system.memory.rss')
   const errorRate = totalRequests > 0 ? ((totalErrors / totalRequests) * 100).toFixed(1) + '%' : '0%'
 
-  // Bucket requests by minute for the last 30 minutes
-  const now = Date.now()
-  const bucketSize = 60 * 1000 // 1 minute
-  const bucketCount = 30
-  const start = now - bucketCount * bucketSize
+  // Row 1: 4 stat cards
+  const row1 = `
+    <div class="stats">
+      ${stat('Total Requests', requestCount.toLocaleString(), 'All time')}
+      ${stat('P95 Latency', formatDuration(p95), 'Response time')}
+      ${stat('Error Rate', errorRate, `${totalErrors} of ${totalRequests}`)}
+      ${stat('Active Exceptions', exceptionCount.toLocaleString(), 'Unresolved')}
+    </div>`
+
+  // Row 2: Request volume area chart — last hour, 12 five-minute buckets
+  const bucketLabels = requestBuckets.map((_, i) => {
+    const t = new Date(now - (12 - i) * 300_000)
+    return `${t.getHours().toString().padStart(2, '0')}:${t.getMinutes().toString().padStart(2, '0')}`
+  })
+
+  const volumeChart = areaChart([
+    { label: 'Requests', values: requestBuckets, color: 'var(--accent)' },
+  ], bucketLabels)
+
+  const row2 = `
+    <div class="card mb">
+      <div class="card-title">Request Volume &mdash; Last Hour</div>
+      ${volumeChart}
+    </div>`
+
+  // Row 3: Two columns — slow endpoints + frequent queries
+  const slowEndpointRows = topSlowEndpoints.map((ep) => [
+    `<span class="mono trunc sm" title="${escapeHtml(ep.path)}">${escapeHtml(truncate(ep.path, 40))}</span>`,
+    durationBadge(ep.avg_duration),
+    durationBadge(ep.max_duration),
+    `<span class="sm">${ep.count}</span>`,
+  ])
 
-  const requestBuckets = new Array(bucketCount).fill(0)
-  const errorBuckets = new Array(bucketCount).fill(0)
+  const frequentQueryRows = topFrequentQueries.map((q) => [
+    `<span class="mono trunc sm" title="${escapeHtml(q.sql)}">${escapeHtml(truncate(q.sql, 40))}</span>`,
+    `<span class="sm">${q.count}</span>`,
+    durationBadge(q.avg_duration),
+  ])
+
+  const row3 = `
+    <div style="display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:16px">
+      <div class="card">
+        <div class="card-title">Top 5 Slowest Endpoints</div>
+        ${table(['Path', 'Avg', 'Max', 'Hits'], slowEndpointRows)}
+      </div>
+      <div class="card">
+        <div class="card-title">Top 5 Most Frequent Queries</div>
+        ${table(['SQL', 'Count', 'Avg Duration'], frequentQueryRows)}
+      </div>
+    </div>`
+
+  // Row 4: Recent exceptions
+  const exceptionRows = recentExceptions.map((entry) => {
+    const c = JSON.parse(entry.content) as ExceptionEntryContent
+    return [
+      `<span class="mono sm">${escapeHtml(c.class)}</span>`,
+      `<span class="trunc sm">${escapeHtml(truncate(c.message, 50))}</span>`,
+      c.file ? `<span class="mono sm dim">${escapeHtml(truncate(c.file, 30))}:${c.line ?? ''}</span>` : '<span class="dim">--</span>',
+      `<span class="sm dim">${timeAgo(entry.created_at)}</span>`,
+    ]
+  })
 
+  const row4 = `
+    <div class="card mb">
+      <div class="card-title">Recent Exceptions</div>
+      ${table(['Class', 'Message', 'Location', 'Time'], exceptionRows)}
+    </div>`
+
+  // Row 5: Status code distribution ring chart
+  let count2xx = 0, count3xx = 0, count4xx = 0, count5xx = 0
   for (const entry of recentRequests) {
-    if (entry.created_at < start) continue
-    const idx = Math.min(Math.floor((entry.created_at - start) / bucketSize), bucketCount - 1)
-    requestBuckets[idx]++
     const c = JSON.parse(entry.content) as RequestEntryContent
-    if (c.status >= 500) errorBuckets[idx]++
+    if (c.status < 300) count2xx++
+    else if (c.status < 400) count3xx++
+    else if (c.status < 500) count4xx++
+    else count5xx++
   }
 
-  const labels = requestBuckets.map((_, i) => {
-    const t = new Date(start + i * bucketSize)
-    return `${t.getHours().toString().padStart(2, '0')}:${t.getMinutes().toString().padStart(2, '0')}`
-  })
-
-  const chart = lineChart([
-    { label: 'Requests', values: requestBuckets, color: 'var(--accent)' },
-    { label: 'Errors', values: errorBuckets, color: 'var(--red)' },
-  ], labels)
+  const totalStatusCodes = count2xx + count3xx + count4xx + count5xx
 
-  const content = `
-    <div class="stats">
-      ${stat('Requests', requestCount.toLocaleString(), 'Total recorded')}
-      ${stat('P95 Latency', formatDuration(p95), 'Response time')}
-      ${stat('Exceptions', exceptionCount.toLocaleString(), totalErrors > 0 ? `${errorRate} error rate` : 'None')}
-      ${stat('Queries', queryCount.toLocaleString(), 'Total recorded')}
-    </div>
-    <div class="stats">
-      ${stat('Jobs', jobCount.toLocaleString(), 'Processed')}
-      ${stat('Cache', cacheCount.toLocaleString(), 'Operations')}
-      ${stat('Memory', rss > 0 ? formatBytes(rss) : '--', 'RSS')}
-      ${stat('Error Rate', errorRate, `${totalErrors} of ${totalRequests}`)}
-    </div>
+  const row5 = `
     <div class="card">
-      <div class="card-title">Request Volume — Last Hour</div>
-      ${chart}
-    </div>
-  `
+      <div class="card-title">Status Code Distribution</div>
+      <div style="display:flex;align-items:center;justify-content:center;gap:32px;padding:16px 0">
+        ${ringChart(count2xx, totalStatusCodes, { color: '#34d399', label: '2xx', size: 80 })}
+        ${ringChart(count3xx, totalStatusCodes, { color: '#60a5fa', label: '3xx', size: 80 })}
+        ${ringChart(count4xx, totalStatusCodes, { color: '#fbbf24', label: '4xx', size: 80 })}
+        ${ringChart(count5xx, totalStatusCodes, { color: '#f87171', label: '5xx', size: 80 })}
+      </div>
+      <div style="text-align:center;font-size:11px;color:var(--fg-3)">
+        ${badge(`${count2xx} success`, 'green')}
+        ${badge(`${count3xx} redirect`, 'blue')}
+        ${badge(`${count4xx} client err`, 'amber')}
+        ${badge(`${count5xx} server err`, 'red')}
+      </div>
+    </div>`
+
+  const content = `${row1}${row2}${row3}${row4}${row5}`
 
   return renderLayout({ title: 'Overview', activePage: 'overview', basePath, content })
 }

package/src/dashboard/pages/PerformancePage.ts

@@ -1,9 +1,21 @@
 import { renderLayout } from '../shared/layout.ts'
-import { stat, formatBytes } from '../shared/components.ts'
+import { stat, table, formatBytes, escapeHtml, truncate, durationBadge } from '../shared/components.ts'
+import { lineChart, areaChart } from '../shared/charts.ts'
 import { formatDuration } from '../../helpers/timing.ts'
+import type { HeartbeatStore } from '../../storage/HeartbeatStore.ts'
 import type { MetricsCollector } from '../../metrics/MetricsCollector.ts'
+import type { RequestEntryContent } from '../../contracts/Entry.ts'
 
-export function renderPerformancePage(metrics: MetricsCollector, basePath: string): string {
+export async function renderPerformancePage(store: HeartbeatStore, metrics: MetricsCollector, basePath: string, searchParams?: URLSearchParams): Promise<string> {
+  const range = searchParams?.get('range') ?? '1h'
+  const rangeMs = range === '24h' ? 86_400_000 : range === '6h' ? 21_600_000 : 3_600_000
+  const now = Date.now()
+  const since = now - rangeMs
+
+  const bucketMs = range === '24h' ? 3_600_000 : range === '6h' ? 900_000 : 300_000
+  const bucketCount = Math.ceil(rangeMs / bucketMs)
+
+  // Real-time metrics from collector
   const p50 = metrics.percentile('http.requests.duration', 50)
   const p95 = metrics.percentile('http.requests.duration', 95)
   const p99 = metrics.percentile('http.requests.duration', 99)
@@ -15,34 +27,153 @@ export function renderPerformancePage(metrics: MetricsCollector, basePath: strin
   const totalErrors = metrics.getCounter('http.errors.total')
   const errorRate = totalRequests > 0 ? ((totalErrors / totalRequests) * 100).toFixed(1) + '%' : '0%'
 
+  // Fetch request entries for time-bucketed charts
+  const [requestEntries, topSlowEndpoints, topFrequentQueries, memoryMetrics] = await Promise.all([
+    store.getEntries({ type: 'request', limit: 2000 }),
+    store.getTopSlowEndpoints(10, since),
+    store.getTopFrequentQueries(10, since),
+    store.getMetrics('system.memory.rss', since),
+  ])
+
+  // Compute per-bucket latency percentiles and throughput from entries
+  const p50Buckets = new Array(bucketCount).fill(0)
+  const p95Buckets = new Array(bucketCount).fill(0)
+  const p99Buckets = new Array(bucketCount).fill(0)
+  const throughputBuckets = new Array(bucketCount).fill(0)
+  const errorBuckets = new Array(bucketCount).fill(0)
+  const bucketDurations: number[][] = Array.from({ length: bucketCount }, () => [])
+
+  for (const entry of requestEntries) {
+    if (entry.created_at < since) continue
+    const idx = Math.min(Math.floor((entry.created_at - since) / bucketMs), bucketCount - 1)
+    throughputBuckets[idx]++
+
+    const c = JSON.parse(entry.content) as RequestEntryContent
+    bucketDurations[idx]!.push(c.duration)
+    if (c.status >= 500) errorBuckets[idx]++
+  }
+
+  for (let i = 0; i < bucketCount; i++) {
+    const durations = bucketDurations[i]!
+    if (durations.length === 0) continue
+    const sorted = [...durations].sort((a, b) => a - b)
+    p50Buckets[i] = sorted[Math.max(0, Math.ceil(sorted.length * 0.50) - 1)]!
+    p95Buckets[i] = sorted[Math.max(0, Math.ceil(sorted.length * 0.95) - 1)]!
+    p99Buckets[i] = sorted[Math.max(0, Math.ceil(sorted.length * 0.99) - 1)]!
+  }
+
+  // Error rate per bucket
+  const errorRateBuckets = throughputBuckets.map((total, i) =>
+    total > 0 ? (errorBuckets[i]! / total) * 100 : 0
+  )
+
+  // Memory trend from stored metrics
+  const memoryBuckets = new Array(bucketCount).fill(0)
+  for (const m of memoryMetrics) {
+    const idx = Math.min(Math.floor((m.bucket * 60_000 - since) / bucketMs), bucketCount - 1)
+    if (idx >= 0 && idx < bucketCount) {
+      memoryBuckets[idx] = m.value
+    }
+  }
+
+  // Build bucket labels
+  const labels = Array.from({ length: bucketCount }, (_, i) => {
+    const t = new Date(since + i * bucketMs)
+    return `${t.getHours().toString().padStart(2, '0')}:${t.getMinutes().toString().padStart(2, '0')}`
+  })
+
+  // Range selector
+  const rangeSelector = `
+    <div style="display:flex;gap:6px;margin-bottom:16px">
+      ${['1h', '6h', '24h'].map((r) =>
+        `<a href="${basePath}/performance?range=${r}" class="b ${r === range ? 'b-blue' : 'b-mute'}" style="text-decoration:none;font-size:11px">${r}</a>`
+      ).join('')}
+    </div>`
+
+  // Stat cards
+  const statsRow = `
+    <div class="stats">
+      ${stat('Avg', formatDuration(avg), 'Average')}
+      ${stat('P50', formatDuration(p50), 'Median')}
+      ${stat('P95', formatDuration(p95))}
+      ${stat('P99', formatDuration(p99))}
+    </div>
+    <div class="stats">
+      ${stat('Requests', totalRequests.toLocaleString())}
+      ${stat('Errors', totalErrors.toLocaleString())}
+      ${stat('Error Rate', errorRate)}
+      ${stat('RSS', rss > 0 ? formatBytes(rss) : '--', 'Memory')}
+    </div>`
+
+  // Latency Trends chart
+  const latencyChart = lineChart([
+    { label: 'P50', values: p50Buckets, color: '#34d399' },
+    { label: 'P95', values: p95Buckets, color: '#fbbf24' },
+    { label: 'P99', values: p99Buckets, color: '#f87171' },
+  ], labels)
+
+  // Throughput chart
+  const throughputChart = areaChart([
+    { label: 'Requests', values: throughputBuckets, color: 'var(--accent)' },
+  ], labels)
+
+  // Error Rate chart
+  const errorRateChart = lineChart([
+    { label: 'Error %', values: errorRateBuckets, color: '#f87171' },
+  ], labels)
+
+  // Memory Trends chart
+  const memChart = lineChart([
+    { label: 'RSS', values: memoryBuckets, color: '#a78bfa' },
+  ], labels)
+
+  // Top Slow Endpoints table
+  const slowRows = topSlowEndpoints.map((ep) => [
+    `<span class="mono trunc sm" title="${escapeHtml(ep.path)}">${escapeHtml(truncate(ep.path, 40))}</span>`,
+    durationBadge(ep.avg_duration),
+    durationBadge(ep.max_duration),
+    `<span class="sm">${ep.count}</span>`,
+  ])
+
+  // Top Slow Queries table
+  const queryRows = topFrequentQueries.map((q) => [
+    `<span class="mono trunc sm" title="${escapeHtml(q.sql)}">${escapeHtml(truncate(q.sql, 50))}</span>`,
+    `<span class="sm">${q.count}</span>`,
+    durationBadge(q.avg_duration),
+  ])
+
   const content = `
+    ${rangeSelector}
+    ${statsRow}
 
     <div class="card mb">
-      <div class="card-title">Latency</div>
-      <div class="stats" style="margin-bottom:0">
-        ${stat('Avg', formatDuration(avg))}
-        ${stat('P50', formatDuration(p50), 'Median')}
-        ${stat('P95', formatDuration(p95))}
-        ${stat('P99', formatDuration(p99))}
-      </div>
+      <div class="card-title">Latency Trends (ms)</div>
+      ${latencyChart}
     </div>
 
     <div class="card mb">
       <div class="card-title">Throughput</div>
-      <div class="stats" style="margin-bottom:0">
-        ${stat('Requests', totalRequests.toLocaleString())}
-        ${stat('Errors', totalErrors.toLocaleString())}
-        ${stat('Error Rate', errorRate)}
-      </div>
+      ${throughputChart}
+    </div>
+
+    <div class="card mb">
+      <div class="card-title">Error Rate (%)</div>
+      ${errorRateChart}
+    </div>
+
+    <div class="card mb">
+      <div class="card-title">Memory Trends (bytes)</div>
+      ${memChart}
+    </div>
+
+    <div class="card mb">
+      <div class="card-title">Top Slow Endpoints</div>
+      ${table(['Path', 'Avg', 'Max', 'Hits'], slowRows)}
     </div>
 
     <div class="card">
-      <div class="card-title">Memory</div>
-      <div class="stats" style="margin-bottom:0">
-        ${stat('RSS', rss > 0 ? formatBytes(rss) : '--', 'Resident Set')}
-        ${stat('Heap Used', heapUsed > 0 ? formatBytes(heapUsed) : '--')}
-        ${stat('Heap Total', heapTotal > 0 ? formatBytes(heapTotal) : '--')}
-      </div>
+      <div class="card-title">Top Slow Queries</div>
+      ${table(['SQL', 'Count', 'Avg Duration'], queryRows)}
     </div>
   `