@mantiq/heartbeat 0.5.21 → 0.5.23

package/src/dashboard/pages/QueriesPage.ts

@@ -1,20 +1,53 @@
 import { renderLayout } from '../shared/layout.ts'
-import { table, badge, durationBadge, timeAgo, escapeHtml, truncate, stat } from '../shared/components.ts'
+import { table, badge, durationBadge, timeAgo, escapeHtml, truncate, stat, filterBar, pagination, sqlHighlight } from '../shared/components.ts'
 import type { HeartbeatStore } from '../../storage/HeartbeatStore.ts'
 import type { QueryEntryContent } from '../../contracts/Entry.ts'
+import { formatDuration } from '../../helpers/timing.ts'
 
-export async function renderQueriesPage(store: HeartbeatStore, basePath: string): Promise<string> {
-  const entries = await store.getEntries({ type: 'query', limit: 100 })
+const PER_PAGE = 50
+
+export async function renderQueriesPage(store: HeartbeatStore, basePath: string, searchParams?: URLSearchParams): Promise<string> {
+  const page = parseInt(searchParams?.get('page') ?? '1')
+  const search = searchParams?.get('search') ?? ''
+
+  // Fetch all query entries for stats computation, then paginate
+  const allEntries = await store.getEntries({ type: 'query', limit: 5000 })
+
+  // Apply search filter in-memory
+  const filtered = search
+    ? allEntries.filter((e) => {
+        const c = JSON.parse(e.content) as QueryEntryContent
+        return c.sql.toLowerCase().includes(search.toLowerCase()) || c.normalized_sql.toLowerCase().includes(search.toLowerCase())
+      })
+    : allEntries
+
+  const total = filtered.length
 
   let slowCount = 0
   let nplusOneCount = 0
-  for (const e of entries) {
+  let totalDuration = 0
+  const slowEntries: typeof filtered = []
+  const nplusOneEntries: typeof filtered = []
+
+  for (const e of filtered) {
     const c = JSON.parse(e.content) as QueryEntryContent
-    if (c.slow) slowCount++
-    if (c.n_plus_one) nplusOneCount++
+    totalDuration += c.duration
+    if (c.slow) {
+      slowCount++
+      slowEntries.push(e)
+    }
+    if (c.n_plus_one) {
+      nplusOneCount++
+      nplusOneEntries.push(e)
+    }
   }
 
-  const rows = entries.map((entry) => {
+  const avgDuration = filtered.length > 0 ? totalDuration / filtered.length : 0
+
+  // Paginate
+  const pageEntries = filtered.slice((page - 1) * PER_PAGE, page * PER_PAGE)
+
+  const rows = pageEntries.map((entry) => {
     const c = JSON.parse(entry.content) as QueryEntryContent
     const flags = []
     if (c.slow) flags.push(badge('slow', 'red'))
@@ -29,15 +62,66 @@ export async function renderQueriesPage(store: HeartbeatStore, basePath: string)
     ]
   })
 
+  // Slow queries table
+  const slowRows = slowEntries.slice(0, 20).map((entry) => {
+    const c = JSON.parse(entry.content) as QueryEntryContent
+    return [
+      `<div>${sqlHighlight(truncate(c.sql, 80))}</div>`,
+      `<span class="sm muted">${escapeHtml(c.connection)}</span>`,
+      durationBadge(c.duration, 100),
+      c.caller ? `<span class="mono sm dim">${escapeHtml(truncate(c.caller, 40))}</span>` : '<span class="dim">--</span>',
+      `<span class="sm dim">${timeAgo(entry.created_at)}</span>`,
+    ]
+  })
+
+  // N+1 detected table
+  const nplusOneRows = nplusOneEntries.slice(0, 20).map((entry) => {
+    const c = JSON.parse(entry.content) as QueryEntryContent
+    return [
+      `<div>${sqlHighlight(truncate(c.sql, 80))}</div>`,
+      `<span class="sm muted">${escapeHtml(c.connection)}</span>`,
+      durationBadge(c.duration, 100),
+      c.caller ? `<span class="mono sm dim">${escapeHtml(truncate(c.caller, 40))}</span>` : '<span class="dim">--</span>',
+      `<span class="sm dim">${timeAgo(entry.created_at)}</span>`,
+    ]
+  })
+
+  // Build filter bar
+  const extraParams: Record<string, string> = {}
+  if (search) extraParams['search'] = search
+
+  const filters = filterBar({
+    action: `${basePath}/queries`,
+    searchPlaceholder: 'Search SQL...',
+    searchValue: search,
+  })
+
+  const paginationBase = search ? `${basePath}/queries?search=${encodeURIComponent(search)}` : `${basePath}/queries`
+
   const content = `
+    ${filters}
     <div class="stats">
-      ${stat('Total', entries.length.toString())}
+      ${stat('Total', total.toString())}
+      ${stat('Avg Duration', formatDuration(avgDuration), 'Per query')}
       ${stat('Slow', slowCount.toString(), '> threshold')}
       ${stat('N+1', nplusOneCount.toString(), 'Detected')}
     </div>
     <div class="card">
       ${table(['SQL', 'Connection', 'Duration', 'Flags', 'Time'], rows)}
     </div>
+    ${pagination(total, page, PER_PAGE, paginationBase)}
+
+    ${slowEntries.length > 0 ? `
+    <div class="card mt">
+      <div class="card-title">Slow Queries <span class="sm dim">(${slowCount})</span></div>
+      ${table(['SQL', 'Connection', 'Duration', 'Caller', 'Time'], slowRows)}
+    </div>` : ''}
+
+    ${nplusOneEntries.length > 0 ? `
+    <div class="card mt">
+      <div class="card-title">N+1 Detected <span class="sm dim">(${nplusOneCount})</span></div>
+      ${table(['SQL', 'Connection', 'Duration', 'Caller', 'Time'], nplusOneRows)}
+    </div>` : ''}
   `
 
   return renderLayout({ title: 'Queries', activePage: 'queries', basePath, content })

package/src/dashboard/pages/RequestDetailPage.ts

@@ -1,8 +1,8 @@
 import { renderLayout } from '../shared/layout.ts'
-import { statusBadge, methodBadge, durationBadge, timeAgo, escapeHtml, formatBytes } from '../shared/components.ts'
+import { statusBadge, methodBadge, durationBadge, timeAgo, escapeHtml, formatBytes, breadcrumbs, collapsibleSection, sqlHighlight, diffView, waterfallChart } from '../shared/components.ts'
 import { formatDuration } from '../../helpers/timing.ts'
 import type { HeartbeatStore } from '../../storage/HeartbeatStore.ts'
-import type { RequestEntryContent } from '../../contracts/Entry.ts'
+import type { RequestEntryContent, HeartbeatEntry } from '../../contracts/Entry.ts'
 
 const COPY_ICON = `<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="9" y="9" width="13" height="13" rx="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg>`
 const CHECK_ICON = `<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>`
@@ -12,10 +12,24 @@ export async function renderRequestDetailPage(store: HeartbeatStore, uuid: strin
   if (!entry || entry.type !== 'request') return null
 
   const c = JSON.parse(entry.content) as RequestEntryContent
+
+  // Fetch all entries that share this request_id (queries, cache, events, logs, exceptions, etc.)
+  const relatedEntries = entry.request_id
+    ? (await store.getEntries({ requestId: entry.request_id, limit: 200 }))
+        .filter((e) => e.uuid !== entry.uuid)
+    : []
+
   const recorded = new Date(entry.created_at)
   const timeStr = `${recorded.getFullYear()}-${String(recorded.getMonth() + 1).padStart(2, '0')}-${String(recorded.getDate()).padStart(2, '0')} ${String(recorded.getHours()).padStart(2, '0')}:${String(recorded.getMinutes()).padStart(2, '0')}:${String(recorded.getSeconds()).padStart(2, '0')}`
   const requestLine = `${c.method} ${c.url || c.path}`
 
+  // Breadcrumbs
+  const breadcrumbsHtml = breadcrumbs([
+    { label: 'Overview', href: basePath },
+    { label: 'Requests', href: `${basePath}/requests` },
+    { label: `${c.method} ${c.path}` },
+  ])
+
   // Build request tab sections
   const requestSections: string[] = []
   requestSections.push(kvTable('Headers', c.request_headers))
@@ -51,8 +65,9 @@ export async function renderRequestDetailPage(store: HeartbeatStore, uuid: strin
   const mdEscaped = md.replace(/\\/g, '\\\\').replace(/`/g, '\\`').replace(/\$/g, '\\$')
 
   const content = `
+    ${breadcrumbsHtml}
+
     <div style="display:flex;align-items:center;gap:12px;margin-bottom:16px">
-      <a href="${basePath}/requests" style="color:var(--fg-3);text-decoration:none;font-size:13px;display:flex;align-items:center;gap:4px">&larr; <span>Requests</span></a>
       <div style="margin-left:auto;display:flex;align-items:center;gap:8px">
         <button class="copy-btn" onclick="copyMd()" title="Copy full request as Markdown">${COPY_ICON}<span>Copy as Markdown</span></button>
       </div>
@@ -103,6 +118,8 @@ export async function renderRequestDetailPage(store: HeartbeatStore, uuid: strin
       </div>
     </div>
 
+    ${renderRelatedEntries(relatedEntries, c.duration, basePath)}
+
     <div style="margin-top:14px;font-size:11px;color:var(--fg-3)">${timeAgo(entry.created_at)}</div>
 
     <script>
@@ -292,3 +309,210 @@ function buildMarkdown(
 
   return lines.join('\n')
 }
+
+// ── Related entries (queries, cache, events, logs, etc.) ─────────────────────
+
+const TYPE_ICONS: Record<string, string> = {
+  query: '&#9889;',
+  cache: '&#128230;',
+  event: '&#9889;',
+  exception: '&#128308;',
+  log: '&#128221;',
+  job: '&#9881;',
+  model: '&#128311;',
+  mail: '&#9993;',
+  schedule: '&#9200;',
+}
+
+const TYPE_COLORS: Record<string, string> = {
+  query: '#818cf8',
+  cache: '#34d399',
+  exception: '#f87171',
+  event: '#fbbf24',
+  log: '#94a3b8',
+  job: '#60a5fa',
+  model: '#a78bfa',
+  mail: '#2dd4bf',
+  schedule: '#fb923c',
+}
+
+function renderRelatedEntries(entries: HeartbeatEntry[], requestDuration: number, _basePath: string): string {
+  if (entries.length === 0) return ''
+
+  const grouped = new Map<string, HeartbeatEntry[]>()
+  for (const e of entries) {
+    const list = grouped.get(e.type) ?? []
+    list.push(e)
+    grouped.set(e.type, list)
+  }
+
+  // Preferred display order
+  const order = ['query', 'exception', 'cache', 'log', 'event', 'job', 'model', 'mail', 'schedule']
+  const sortedTypes = [...grouped.keys()].sort((a, b) => {
+    const ai = order.indexOf(a), bi = order.indexOf(b)
+    return (ai === -1 ? 99 : ai) - (bi === -1 ? 99 : bi)
+  })
+
+  // Build waterfall chart data from all related entries
+  const requestStartTs = entries.length > 0
+    ? Math.min(...entries.map((e) => e.created_at), entries[0]!.created_at)
+    : 0
+
+  const waterfallItems: Array<{ label: string; start: number; end: number; color: string }> = []
+
+  for (const entry of entries) {
+    const content = JSON.parse(entry.content)
+    const type = entry.type
+    const color = TYPE_COLORS[type] ?? 'var(--fg-3)'
+    const startOffset = entry.created_at - requestStartTs
+    let duration = 0
+
+    if (type === 'query' && typeof content.duration === 'number') {
+      duration = content.duration
+    } else if (type === 'job' && typeof content.duration === 'number') {
+      duration = content.duration
+    } else if (type === 'cache' && typeof content.duration === 'number') {
+      duration = content.duration
+    } else {
+      duration = 0.5 // minimal width for entries without duration
+    }
+
+    let label: string = type
+    if (type === 'query') label = 'SQL'
+    else if (type === 'cache') label = `cache:${content.event ?? content.operation ?? 'op'}`
+    else if (type === 'exception') label = content.class ?? 'exception'
+    else if (type === 'event') label = content.event_class ?? 'event'
+    else if (type === 'model') label = `${content.action ?? 'model'} ${content.model ?? ''}`
+
+    waterfallItems.push({ label, start: startOffset, end: startOffset + duration, color })
+  }
+
+  const waterfallHtml = waterfallItems.length > 0
+    ? `<div class="card mb" style="margin-top:16px">
+        <div class="card-title" style="margin-bottom:12px">Waterfall Timeline</div>
+        ${waterfallChart(waterfallItems, requestDuration)}
+      </div>`
+    : ''
+
+  let sections = ''
+  for (const type of sortedTypes) {
+    const list = grouped.get(type)!
+    const color = TYPE_COLORS[type] ?? 'var(--fg-3)'
+    const icon = TYPE_ICONS[type] ?? '&bull;'
+    const label = type.charAt(0).toUpperCase() + type.slice(1) + (list.length > 1 ? 's' : '')
+
+    const entriesHtml = `<div style="display:flex;flex-direction:column;gap:4px">
+      ${list.map((e) => renderRelatedEntry(e, type)).join('')}
+    </div>`
+
+    sections += collapsibleSection(
+      `${icon} ${label}`,
+      list.length,
+      color,
+      entriesHtml,
+    )
+  }
+
+  return `${waterfallHtml}
+    <div class="card" style="margin-top:16px">
+      <div class="card-title" style="margin-bottom:12px">Request Timeline</div>
+      ${sections}
+    </div>`
+}
+
+function renderRelatedEntry(entry: HeartbeatEntry, type: string): string {
+  const content = JSON.parse(entry.content)
+  const color = TYPE_COLORS[type] ?? 'var(--fg-3)'
+  const ts = new Date(entry.created_at)
+  const time = `${String(ts.getHours()).padStart(2, '0')}:${String(ts.getMinutes()).padStart(2, '0')}:${String(ts.getSeconds()).padStart(2, '0')}.${String(ts.getMilliseconds()).padStart(3, '0')}`
+
+  let summary = ''
+  let detail = ''
+
+  switch (type) {
+    case 'query':
+      // Use sqlHighlight for query SQL display
+      summary = sqlHighlight(content.sql ?? content.normalized_sql ?? 'SQL query')
+      detail = content.duration != null ? `${content.duration.toFixed(1)}ms` : ''
+      if (content.slow) detail += ' <span style="color:#f87171;font-weight:600">SLOW</span>'
+      if (content.n_plus_one) detail += ' <span style="color:#fbbf24;font-weight:600">N+1</span>'
+      return `<div style="padding:5px 8px;background:var(--bg-2);border-radius:4px;font-size:12px">
+        <div style="display:flex;align-items:baseline;gap:8px">
+          <code style="color:var(--fg-3);font-size:10px;flex-shrink:0">${time}</code>
+          <span style="border-left:2px solid ${color};padding-left:8px;flex:1;overflow:hidden">
+            ${summary}
+          </span>
+          ${detail ? `<span style="color:var(--fg-3);font-size:11px;flex-shrink:0">${detail}</span>` : ''}
+        </div>
+      </div>`
+
+    case 'cache': {
+      const op = content.event ?? content.operation ?? 'operation'
+      const isHit = op === 'hit'
+      const isMiss = op === 'miss'
+      const indicator = isHit
+        ? '<span style="color:#34d399;font-weight:700" title="Cache Hit">&#10003;</span>'
+        : isMiss
+          ? '<span style="color:#f87171;font-weight:700" title="Cache Miss">&#10007;</span>'
+          : ''
+      summary = `${indicator} ${op} &rarr; ${escapeHtml(content.key ?? '')}`
+      break
+    }
+
+    case 'event':
+      summary = escapeHtml(content.event_class ?? content.event ?? 'event')
+      detail = content.listeners_count != null ? `${content.listeners_count} listener${content.listeners_count === 1 ? '' : 's'}` : ''
+      break
+
+    case 'log':
+      summary = escapeHtml(content.message ?? '')
+      detail = content.level ?? ''
+      break
+
+    case 'exception':
+      summary = escapeHtml(content.class ?? content.message ?? 'exception')
+      detail = content.file ? escapeHtml(content.file + ':' + (content.line ?? '')) : ''
+      break
+
+    case 'job':
+      summary = escapeHtml(content.job_name ?? content.job ?? 'job')
+      detail = content.status ?? ''
+      break
+
+    case 'model': {
+      summary = `${content.action ?? 'action'} ${escapeHtml(content.model ?? '')}`
+      detail = content.key ? `#${content.key}` : ''
+      // Use diffView for model change entries
+      if (content.changes && Object.keys(content.changes).length > 0) {
+        const diffHtml = diffView(content.changes)
+        return `<div style="padding:5px 8px;background:var(--bg-2);border-radius:4px;font-size:12px">
+          <div style="display:flex;align-items:baseline;gap:8px;margin-bottom:6px">
+            <code style="color:var(--fg-3);font-size:10px;flex-shrink:0">${time}</code>
+            <span style="border-left:2px solid ${color};padding-left:8px;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap">
+              <code style="color:var(--fg-1)">${summary}</code>
+            </span>
+            ${detail ? `<span style="color:var(--fg-3);font-size:11px;flex-shrink:0">${detail}</span>` : ''}
+          </div>
+          <div style="padding-left:22px">${diffHtml}</div>
+        </div>`
+      }
+      break
+    }
+
+    case 'mail':
+      summary = escapeHtml(content.subject ?? 'email')
+      detail = content.to?.join(', ') ?? ''
+      break
+
+    default:
+      summary = JSON.stringify(content).slice(0, 80)
+  }
+
+  return `<div style="display:flex;align-items:baseline;gap:8px;padding:5px 8px;background:var(--bg-2);border-radius:4px;font-size:12px">
+    <code style="color:var(--fg-3);font-size:10px;flex-shrink:0">${time}</code>
+    <span style="border-left:2px solid ${color};padding-left:8px;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap">
+      <code style="color:var(--fg-1)">${summary}</code>
+    </span>
+    ${detail ? `<span style="color:var(--fg-3);font-size:11px;flex-shrink:0">${detail}</span>` : ''}
+  </div>`
+}

package/src/dashboard/pages/RequestsPage.ts

@@ -1,10 +1,48 @@
 import { renderLayout } from '../shared/layout.ts'
-import { table, statusBadge, methodBadge, durationBadge, timeAgo, escapeHtml, truncate } from '../shared/components.ts'
+import { table, statusBadge, methodBadge, durationBadge, timeAgo, escapeHtml, truncate, filterBar, pagination } from '../shared/components.ts'
 import type { HeartbeatStore } from '../../storage/HeartbeatStore.ts'
 import type { RequestEntryContent } from '../../contracts/Entry.ts'
 
-export async function renderRequestsPage(store: HeartbeatStore, basePath: string): Promise<string> {
-  const entries = await store.getEntries({ type: 'request', limit: 100 })
+const PER_PAGE = 50
+
+export async function renderRequestsPage(store: HeartbeatStore, basePath: string, searchParams?: URLSearchParams): Promise<string> {
+  const page = parseInt(searchParams?.get('page') ?? '1')
+  const method = searchParams?.get('method') ?? ''
+  const status = searchParams?.get('status') ?? ''
+  const search = searchParams?.get('search') ?? ''
+
+  // Build status range for search
+  let statusMin: number | undefined
+  let statusMax: number | undefined
+  if (status === '2xx') { statusMin = 200; statusMax = 299 }
+  else if (status === '3xx') { statusMin = 300; statusMax = 399 }
+  else if (status === '4xx') { statusMin = 400; statusMax = 499 }
+  else if (status === '5xx') { statusMin = 500; statusMax = 599 }
+
+  // Fetch all matching entries (use searchEntries for filtered queries)
+  const hasFilters = method || status || search
+  let entries: any[]
+  let total: number
+
+  if (hasFilters) {
+    // When using searchEntries, we need to post-filter since it uses LIKE on content JSON
+    const allEntries = await store.getEntries({ type: 'request', limit: 5000 })
+
+    // Apply in-memory filters for precise matching
+    const filtered = allEntries.filter((entry) => {
+      const c = JSON.parse(entry.content) as RequestEntryContent
+      if (method && c.method !== method) return false
+      if (statusMin !== undefined && (c.status < statusMin || c.status > statusMax!)) return false
+      if (search && !c.path.toLowerCase().includes(search.toLowerCase())) return false
+      return true
+    })
+
+    total = filtered.length
+    entries = filtered.slice((page - 1) * PER_PAGE, page * PER_PAGE)
+  } else {
+    total = await store.countEntries('request')
+    entries = await store.getEntries({ type: 'request', limit: PER_PAGE, offset: (page - 1) * PER_PAGE })
+  }
 
   const rows = entries.map((entry) => {
     const c = JSON.parse(entry.content) as RequestEntryContent
@@ -19,11 +57,60 @@ export async function renderRequestsPage(store: HeartbeatStore, basePath: string
     ]
   })
 
+  // Build extra params for pagination links
+  const extraParams: Record<string, string> = {}
+  if (method) extraParams['method'] = method
+  if (status) extraParams['status'] = status
+  if (search) extraParams['search'] = search
+
+  const filters = filterBar({
+    action: `${basePath}/requests`,
+    searchPlaceholder: 'Search path...',
+    searchValue: search,
+    filters: [
+      {
+        name: 'method',
+        label: 'Method',
+        options: [
+          { value: 'GET', label: 'GET' },
+          { value: 'POST', label: 'POST' },
+          { value: 'PUT', label: 'PUT' },
+          { value: 'PATCH', label: 'PATCH' },
+          { value: 'DELETE', label: 'DELETE' },
+        ],
+        selected: method,
+      },
+      {
+        name: 'status',
+        label: 'Status',
+        options: [
+          { value: '2xx', label: '2xx Success' },
+          { value: '3xx', label: '3xx Redirect' },
+          { value: '4xx', label: '4xx Client Error' },
+          { value: '5xx', label: '5xx Server Error' },
+        ],
+        selected: status,
+      },
+    ],
+  })
+
+  // Build pagination URL base
+  const paginationBase = buildPaginationUrl(`${basePath}/requests`, extraParams)
+
   const content = `
+    ${filters}
     <div class="card">
       ${table(['Method', 'Path', 'Status', 'Duration', 'IP', 'Time'], rows)}
     </div>
+    ${pagination(total, page, PER_PAGE, paginationBase)}
   `
 
   return renderLayout({ title: 'Requests', activePage: 'requests', basePath, content })
 }
+
+function buildPaginationUrl(base: string, params: Record<string, string>): string {
+  const entries = Object.entries(params).filter(([, v]) => v)
+  if (entries.length === 0) return base
+  const qs = entries.map(([k, v]) => `${encodeURIComponent(k)}=${encodeURIComponent(v)}`).join('&')
+  return `${base}?${qs}`
+}

package/src/dashboard/pages/SchedulesPage.ts

@@ -0,0 +1,71 @@
+import { renderLayout } from '../shared/layout.ts'
+import { table, badge, durationBadge, timeAgo, escapeHtml, truncate, stat } from '../shared/components.ts'
+import type { HeartbeatStore } from '../../storage/HeartbeatStore.ts'
+import type { ScheduleEntryContent } from '../../contracts/Entry.ts'
+
+const PER_PAGE = 50
+
+export async function renderSchedulesPage(store: HeartbeatStore, basePath: string, searchParams?: URLSearchParams): Promise<string> {
+  const page = Math.max(1, parseInt(searchParams?.get('page') ?? '1', 10))
+
+  const total = await store.countEntries('schedule')
+  const entries = await store.getEntries({ type: 'schedule', limit: PER_PAGE, offset: (page - 1) * PER_PAGE })
+
+  let successCount = 0, errorCount = 0
+  for (const e of entries) {
+    const s = (JSON.parse(e.content) as ScheduleEntryContent).status
+    if (s === 'success') successCount++
+    else errorCount++
+  }
+
+  const rows = entries.map((entry) => {
+    const c = JSON.parse(entry.content) as ScheduleEntryContent
+    return [
+      `<span class="mono sm">${escapeHtml(c.command)}</span>`,
+      `<span class="mono sm muted">${escapeHtml(c.expression)}</span>`,
+      durationBadge(c.duration),
+      badge(c.status, c.status === 'success' ? 'green' : 'red'),
+      c.output ? `<span class="sm trunc muted" title="${escapeHtml(c.output)}">${escapeHtml(truncate(c.output, 60))}</span>` : '<span class="dim">--</span>',
+      `<span class="sm dim">${timeAgo(entry.created_at)}</span>`,
+    ]
+  })
+
+  const totalPages = Math.ceil(total / PER_PAGE)
+
+  const content = `
+    <div class="stats">
+      ${stat('Total Runs', total.toString())}
+      ${stat('Success', successCount.toString())}
+      ${stat('Errors', errorCount.toString())}
+    </div>
+
+    <div class="card">
+      ${table(['Command', 'Expression', 'Duration', 'Status', 'Output', 'Time'], rows)}
+    </div>
+
+    ${pagination(basePath + '/schedules', page, totalPages, searchParams)}
+  `
+
+  return renderLayout({ title: 'Schedules', activePage: 'schedules', 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>`
+}