@mantiq/heartbeat 0.5.22 → 0.5.23

package/src/dashboard/pages/CommandDetailPage.ts

@@ -0,0 +1,216 @@
+import { renderLayout } from '../shared/layout.ts'
+import { badge, durationBadge, timeAgo, escapeHtml } from '../shared/components.ts'
+import { formatDuration } from '../../helpers/timing.ts'
+import type { HeartbeatStore } from '../../storage/HeartbeatStore.ts'
+import type { CommandEntryContent, HeartbeatEntry } from '../../contracts/Entry.ts'
+
+const TYPE_ICONS: Record<string, string> = {
+  query: '\u26A1',
+  cache: '\uD83D\uDCE6',
+  event: '\u26A1',
+  exception: '\uD83D\uDD34',
+  log: '\uD83D\uDCDD',
+  job: '\u2699\uFE0F',
+  model: '\uD83D\uDD37',
+  mail: '\u2709\uFE0F',
+  schedule: '\u23F0',
+}
+
+const TYPE_COLORS: Record<string, string> = {
+  query: '#818cf8',
+  cache: '#34d399',
+  exception: '#f87171',
+  event: '#fbbf24',
+  log: '#94a3b8',
+  job: '#60a5fa',
+  model: '#a78bfa',
+  mail: '#2dd4bf',
+  schedule: '#fb923c',
+}
+
+export async function renderCommandDetailPage(store: HeartbeatStore, uuid: string, basePath: string): Promise<string | null> {
+  const entry = await store.getEntry(uuid)
+  if (!entry || entry.type !== 'command') return null
+
+  const c = JSON.parse(entry.content) as CommandEntryContent
+
+  // Find related entries created during this command
+  // The command's request_id is the commandId set by the tracer; child entries share this request_id
+  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 argsEntries = Object.entries(c.arguments ?? {})
+  const optionsEntries = Object.entries(c.options ?? {})
+
+  const content = `
+    <div style="display:flex;align-items:center;gap:8px;margin-bottom:16px;font-size:13px">
+      <a href="${basePath}" style="color:var(--fg-3);text-decoration:none">Overview</a>
+      <span style="color:var(--fg-3)">&rsaquo;</span>
+      <a href="${basePath}/commands" style="color:var(--fg-3);text-decoration:none">Commands</a>
+      <span style="color:var(--fg-3)">&rsaquo;</span>
+      <span style="color:var(--fg-1)">${escapeHtml(c.name)}</span>
+    </div>
+
+    <div class="card mb" style="padding:16px 18px">
+      <div style="display:flex;align-items:center;gap:10px;flex-wrap:wrap">
+        <code style="color:var(--fg-1);font-size:14px;font-weight:600;letter-spacing:-.01em">${escapeHtml(c.name)}</code>
+        ${badge(String(c.exit_code), c.exit_code === 0 ? 'green' : 'red')}
+        ${durationBadge(c.duration)}
+        <span class="sm dim" style="flex-shrink:0">${timeStr}</span>
+      </div>
+      <div style="margin-top:8px">
+        <code class="sm dim" style="font-size:11px">${entry.uuid}</code>
+      </div>
+    </div>
+
+    <div class="stats">
+      ${stat('Exit Code', String(c.exit_code))}
+      ${stat('Duration', formatDuration(c.duration))}
+      ${stat('Arguments', String(argsEntries.length))}
+    </div>
+
+    ${argsEntries.length > 0 || optionsEntries.length > 0 ? `<div class="card mb">
+      <div class="card-title">Details</div>
+      ${argsEntries.length > 0 ? `<div style="margin-bottom:12px">
+        <div style="font-size:11px;font-weight:500;color:var(--fg-3);text-transform:uppercase;letter-spacing:.04em;margin-bottom:6px">Arguments</div>
+        <div class="meta-grid">
+          ${argsEntries.map(([k, v]) => `<div class="meta-item">
+            <div class="meta-label">${escapeHtml(k)}</div>
+            <div class="meta-value mono sm">${escapeHtml(typeof v === 'string' ? v : JSON.stringify(v))}</div>
+          </div>`).join('')}
+        </div>
+      </div>` : ''}
+      ${optionsEntries.length > 0 ? `<div>
+        <div style="font-size:11px;font-weight:500;color:var(--fg-3);text-transform:uppercase;letter-spacing:.04em;margin-bottom:6px">Options</div>
+        <div class="meta-grid">
+          ${optionsEntries.map(([k, v]) => `<div class="meta-item">
+            <div class="meta-label">${escapeHtml(k)}</div>
+            <div class="meta-value mono sm">${escapeHtml(typeof v === 'string' ? v : JSON.stringify(v))}</div>
+          </div>`).join('')}
+        </div>
+      </div>` : ''}
+    </div>` : ''}
+
+    ${c.output ? `<div class="card mb">
+      <div class="card-title">Output</div>
+      <pre class="mono sm" style="background:var(--bg-2);padding:12px;border-radius:6px;overflow-x:auto;color:var(--fg-1);max-height:400px;overflow-y:auto;margin:0;white-space:pre-wrap">${escapeHtml(c.output)}</pre>
+    </div>` : ''}
+
+    ${renderRelatedEntries(relatedEntries)}
+
+    <div style="margin-top:14px;font-size:11px;color:var(--fg-3)">${timeAgo(entry.created_at)}</div>
+  `
+
+  return renderLayout({ title: c.name, activePage: 'commands', basePath, content })
+}
+
+function stat(label: string, value: string): string {
+  return `<div class="stat">
+    <div class="stat-label">${label}</div>
+    <div class="stat-val" style="font-size:15px">${escapeHtml(value)}</div>
+  </div>`
+}
+
+// ── Related entries (queries, cache, events, logs, etc.) ─────────────────────
+
+function renderRelatedEntries(entries: HeartbeatEntry[]): 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)
+  }
+
+  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)
+  })
+
+  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] ?? '\u2022'
+    const label = type.charAt(0).toUpperCase() + type.slice(1) + (list.length > 1 ? 's' : '')
+
+    sections += `<div style="margin-bottom:12px">
+      <div style="display:flex;align-items:center;gap:6px;margin-bottom:6px">
+        <span>${icon}</span>
+        <span style="font-weight:600;font-size:12px;color:${color};text-transform:uppercase;letter-spacing:.04em">${escapeHtml(label)}</span>
+        <span style="font-size:11px;color:var(--fg-3)">${list.length}</span>
+      </div>
+      <div style="display:flex;flex-direction:column;gap:4px">
+        ${list.map((e) => renderRelatedEntry(e, type)).join('')}
+      </div>
+    </div>`
+  }
+
+  return `<div class="card" style="margin-top:16px">
+    <div class="card-title" style="margin-bottom:12px">Command 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':
+      summary = escapeHtml(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>'
+      break
+    case 'cache':
+      summary = `${content.event ?? content.operation ?? 'operation'} \u2192 ${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_class ?? content.model ?? '')}`
+      detail = content.key ? `#${content.key}` : ''
+      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/CommandsPage.ts

@@ -0,0 +1,72 @@
+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 { CommandEntryContent } from '../../contracts/Entry.ts'
+
+const PER_PAGE = 50
+
+export async function renderCommandsPage(store: HeartbeatStore, basePath: string, searchParams?: URLSearchParams): Promise<string> {
+  const page = Math.max(1, parseInt(searchParams?.get('page') ?? '1', 10))
+
+  const total = await store.countEntries('command')
+  const entries = await store.getEntries({ type: 'command', limit: PER_PAGE, offset: (page - 1) * PER_PAGE })
+
+  let successCount = 0, failureCount = 0
+  for (const e of entries) {
+    const c = JSON.parse(e.content) as CommandEntryContent
+    if (c.exit_code === 0) successCount++
+    else failureCount++
+  }
+
+  const rows = entries.map((entry) => {
+    const c = JSON.parse(entry.content) as CommandEntryContent
+    const href = `${basePath}/commands/${entry.uuid}`
+    const argsPreview = truncate(JSON.stringify(c.arguments), 50)
+    return [
+      `<a href="${href}" class="mono sm" style="text-decoration:none;color:var(--fg-1)">${escapeHtml(c.name)}</a>`,
+      `<span class="mono trunc sm muted" title="${escapeHtml(argsPreview)}">${escapeHtml(argsPreview)}</span>`,
+      badge(String(c.exit_code), c.exit_code === 0 ? 'green' : 'red'),
+      durationBadge(c.duration),
+      `<span class="sm dim">${timeAgo(entry.created_at)}</span>`,
+    ]
+  })
+
+  const totalPages = Math.ceil(total / PER_PAGE)
+
+  const content = `
+    <div class="stats">
+      ${stat('Total Commands', total.toString())}
+      ${stat('Success', successCount.toString(), 'Exit code 0')}
+      ${stat('Failures', failureCount.toString())}
+    </div>
+
+    <div class="card">
+      ${table(['Command', 'Arguments', 'Exit Code', 'Duration', 'Time'], rows)}
+    </div>
+
+    ${pagination(basePath + '/commands', page, totalPages, searchParams)}
+  `
+
+  return renderLayout({ title: 'Commands', activePage: 'commands', 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/EventsPage.ts

@@ -1,24 +1,77 @@
 import { renderLayout } from '../shared/layout.ts'
-import { table, badge, timeAgo, escapeHtml } from '../shared/components.ts'
+import { table, badge, timeAgo, escapeHtml, truncate, stat, pagination } from '../shared/components.ts'
+import { barChart } from '../shared/charts.ts'
 import type { HeartbeatStore } from '../../storage/HeartbeatStore.ts'
 import type { EventEntryContent } from '../../contracts/Entry.ts'
 
-export async function renderEventsPage(store: HeartbeatStore, basePath: string): Promise<string> {
-  const entries = await store.getEntries({ type: 'event', limit: 100 })
+const PER_PAGE = 50
 
-  const rows = entries.map((entry) => {
+export async function renderEventsPage(store: HeartbeatStore, basePath: string, searchParams?: URLSearchParams): Promise<string> {
+  const page = parseInt(searchParams?.get('page') ?? '1')
+
+  // Fetch all event entries for stats + frequency chart
+  const allEntries = await store.getEntries({ type: 'event', limit: 5000 })
+  const total = allEntries.length
+
+  // Compute event frequency for bar chart
+  const frequencyMap = new Map<string, number>()
+  for (const entry of allEntries) {
     const c = JSON.parse(entry.content) as EventEntryContent
+    const cls = c.event_class
+    frequencyMap.set(cls, (frequencyMap.get(cls) ?? 0) + 1)
+  }
+
+  const topEvents = Array.from(frequencyMap.entries())
+    .sort((a, b) => b[1] - a[1])
+    .slice(0, 10)
+    .map(([label, value]) => ({ label: truncate(label, 25), value, color: 'var(--accent)' }))
+
+  // Paginate
+  const pageEntries = allEntries.slice((page - 1) * PER_PAGE, page * PER_PAGE)
+
+  const rows = pageEntries.map((entry) => {
+    const c = JSON.parse(entry.content) as EventEntryContent
+
+    // Payload preview
+    let payloadHtml = '<span class="dim">--</span>'
+    if (c.payload && Object.keys(c.payload).length > 0) {
+      const preview = truncate(JSON.stringify(c.payload), 100)
+      payloadHtml = `<code class="mono sm" style="background:var(--bg-2);padding:2px 6px;border-radius:3px;font-size:10px">${escapeHtml(preview)}</code>`
+    }
+
+    // Listener names
+    let listenersHtml = `<span class="sm muted">${c.listeners_count} listener${c.listeners_count !== 1 ? 's' : ''}</span>`
+    if (c.listeners && c.listeners.length > 0) {
+      const listenerNames = c.listeners.map((l) => escapeHtml(l)).join(', ')
+      listenersHtml = `<span class="sm muted" title="${listenerNames}">${escapeHtml(truncate(c.listeners.join(', '), 60))}</span>`
+    }
+
     return [
       `<span class="mono sm">${escapeHtml(c.event_class)}</span>`,
-      `<span class="sm muted">${c.listeners_count} listener${c.listeners_count !== 1 ? 's' : ''}</span>`,
+      listenersHtml,
+      payloadHtml,
       `<span class="sm dim">${timeAgo(entry.created_at)}</span>`,
     ]
   })
 
+  const frequencyChart = topEvents.length > 0 ? barChart(topEvents) : ''
+
   const content = `
+    <div class="stats">
+      ${stat('Total Events', total.toString())}
+      ${stat('Unique Events', frequencyMap.size.toString(), 'Distinct classes')}
+    </div>
+
+    ${frequencyChart ? `
+    <div class="card mb">
+      <div class="card-title">Top 10 Events by Frequency</div>
+      <div style="padding:8px 0">${frequencyChart}</div>
+    </div>` : ''}
+
     <div class="card">
-      ${table(['Event', 'Listeners', 'Time'], rows)}
+      ${table(['Event', 'Listeners', 'Payload', 'Time'], rows)}
     </div>
+    ${pagination(total, page, PER_PAGE, `${basePath}/events`)}
   `
 
   return renderLayout({ title: 'Events', activePage: 'events', basePath, content })

package/src/dashboard/pages/ExceptionsPage.ts

@@ -1,22 +1,48 @@
 import { renderLayout } from '../shared/layout.ts'
-import { table, badge, timeAgo, escapeHtml, truncate, stat } from '../shared/components.ts'
+import { table, badge, timeAgo, escapeHtml, truncate, stat, pagination } from '../shared/components.ts'
+import { sparkline } from '../shared/charts.ts'
 import type { HeartbeatStore } from '../../storage/HeartbeatStore.ts'
 import type { ExceptionEntryContent } from '../../contracts/Entry.ts'
 
-export async function renderExceptionsPage(store: HeartbeatStore, basePath: string): Promise<string> {
-  const [groups, entries] = await Promise.all([
+const PER_PAGE = 50
+
+export async function renderExceptionsPage(store: HeartbeatStore, basePath: string, searchParams?: URLSearchParams): Promise<string> {
+  const page = parseInt(searchParams?.get('page') ?? '1')
+
+  const [groups, totalExceptions] = await Promise.all([
     store.getExceptionGroups(50),
-    store.getEntries({ type: 'exception', limit: 50 }),
+    store.countEntries('exception'),
   ])
 
+  // Fetch paginated recent exceptions
+  const entries = await store.getEntries({ type: 'exception', limit: PER_PAGE, offset: (page - 1) * PER_PAGE })
+
   const open = groups.filter((g) => !g.resolved_at).length
 
+  // Sparkline: exception count per hour over the last 24h
+  const now = Date.now()
+  const hourBuckets = new Array(24).fill(0)
+  const last24h = now - 86_400_000
+
+  // Fetch entries for sparkline (last 24h of exceptions)
+  const sparklineEntries = await store.getEntries({ type: 'exception', limit: 5000 })
+  for (const entry of sparklineEntries) {
+    if (entry.created_at < last24h) continue
+    const hourIdx = Math.min(Math.floor((entry.created_at - last24h) / 3_600_000), 23)
+    hourBuckets[hourIdx]++
+  }
+
+  const trendChart = sparkline(hourBuckets, { width: 200, height: 36, color: '#f87171' })
+
   const groupRows = groups.map((g) => [
     `<span class="mono">${escapeHtml(g.class)}</span>`,
     `<span class="trunc sm">${escapeHtml(truncate(g.message, 50))}</span>`,
     `<strong>${g.count}</strong>`,
     g.resolved_at ? badge('resolved', 'green') : badge('open', 'red'),
     `<span class="sm dim">${timeAgo(g.last_seen_at)}</span>`,
+    g.resolved_at
+      ? `<a href="${basePath}/api/exceptions/${encodeURIComponent(g.fingerprint)}/unresolve" style="font-size:11px;color:#fbbf24;text-decoration:none;border:1px solid #fbbf24;border-radius:4px;padding:2px 8px" onclick="return confirm('Unresolve this exception group?')">Unresolve</a>`
+      : `<a href="${basePath}/api/exceptions/${encodeURIComponent(g.fingerprint)}/resolve" style="font-size:11px;color:#34d399;text-decoration:none;border:1px solid #34d399;border-radius:4px;padding:2px 8px" onclick="return confirm('Resolve this exception group?')">Resolve</a>`,
   ])
 
   const recentRows = entries.map((entry) => {
@@ -31,18 +57,23 @@ export async function renderExceptionsPage(store: HeartbeatStore, basePath: stri
 
   const content = `
     <div class="stats">
-      ${stat('Total', entries.length.toString())}
+      ${stat('Total', totalExceptions.toString())}
       ${stat('Groups', groups.length.toString(), 'Unique')}
       ${stat('Open', open.toString(), 'Unresolved')}
+      <div class="stat">
+        <div class="stat-label">Trend (24h)</div>
+        <div style="padding:4px 0">${trendChart}</div>
+      </div>
     </div>
     <div class="card">
       <div class="card-title">Exception Groups</div>
-      ${table(['Class', 'Message', 'Count', 'Status', 'Last Seen'], groupRows)}
+      ${table(['Class', 'Message', 'Count', 'Status', 'Last Seen', 'Action'], groupRows)}
     </div>
     <div class="card mt">
       <div class="card-title">Recent</div>
       ${table(['Class', 'Message', 'Location', 'Time'], recentRows)}
     </div>
+    ${pagination(totalExceptions, page, PER_PAGE, `${basePath}/exceptions`)}
   `
 
   return renderLayout({ title: 'Exceptions', activePage: 'exceptions', basePath, content })

package/src/dashboard/pages/JobsPage.ts

@@ -1,20 +1,41 @@
 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 } from '../shared/components.ts'
 import type { HeartbeatStore } from '../../storage/HeartbeatStore.ts'
 import type { JobEntryContent } from '../../contracts/Entry.ts'
 
-export async function renderJobsPage(store: HeartbeatStore, basePath: string): Promise<string> {
-  const entries = await store.getEntries({ type: 'job', limit: 100 })
+const PER_PAGE = 50
 
+export async function renderJobsPage(store: HeartbeatStore, basePath: string, searchParams?: URLSearchParams): Promise<string> {
+  const page = parseInt(searchParams?.get('page') ?? '1')
+  const statusFilter = searchParams?.get('status') ?? ''
+  const queueSearch = searchParams?.get('queue') ?? ''
+
+  // Fetch all job entries for stats + filtering
+  const allEntries = await store.getEntries({ type: 'job', limit: 5000 })
+
+  // Apply filters in-memory
+  const filtered = allEntries.filter((e) => {
+    const c = JSON.parse(e.content) as JobEntryContent
+    if (statusFilter && c.status !== statusFilter) return false
+    if (queueSearch && !c.queue.toLowerCase().includes(queueSearch.toLowerCase())) return false
+    return true
+  })
+
+  const total = filtered.length
+
+  // Compute stats from filtered entries
   let processed = 0, failed = 0, processing = 0
-  for (const e of entries) {
+  for (const e of filtered) {
     const s = (JSON.parse(e.content) as JobEntryContent).status
     if (s === 'processed') processed++
     else if (s === 'failed') failed++
     else processing++
   }
 
-  const rows = entries.map((entry) => {
+  // Paginate
+  const pageEntries = filtered.slice((page - 1) * PER_PAGE, page * PER_PAGE)
+
+  const rows = pageEntries.map((entry) => {
     const c = JSON.parse(entry.content) as JobEntryContent
     const v = c.status === 'processed' ? 'green' : c.status === 'failed' ? 'red' : 'blue'
     return [
@@ -28,7 +49,34 @@ export async function renderJobsPage(store: HeartbeatStore, basePath: string): P
     ]
   })
 
+  // Build extra params for pagination
+  const extraParams: Record<string, string> = {}
+  if (statusFilter) extraParams['status'] = statusFilter
+  if (queueSearch) extraParams['queue'] = queueSearch
+
+  const filters = filterBar({
+    action: `${basePath}/jobs`,
+    searchPlaceholder: 'Search queue...',
+    searchValue: queueSearch,
+    filters: [
+      {
+        name: 'status',
+        label: 'Status',
+        options: [
+          { value: 'processing', label: 'Processing' },
+          { value: 'processed', label: 'Processed' },
+          { value: 'failed', label: 'Failed' },
+        ],
+        selected: statusFilter,
+      },
+    ],
+  })
+
+  // Rename search param to queue for the filter bar
+  const paginationBase = buildPaginationUrl(`${basePath}/jobs`, extraParams)
+
   const content = `
+    ${filters}
     <div class="stats">
       ${stat('Processed', processed.toString(), 'Completed')}
       ${stat('Failed', failed.toString())}
@@ -37,7 +85,15 @@ export async function renderJobsPage(store: HeartbeatStore, basePath: string): P
     <div class="card">
       ${table(['Job', 'Queue', 'Status', 'Duration', 'Attempts', 'Error', 'Time'], rows)}
     </div>
+    ${pagination(total, page, PER_PAGE, paginationBase)}
   `
 
   return renderLayout({ title: 'Jobs', activePage: 'jobs', 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/LogsPage.ts

@@ -0,0 +1,116 @@
+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 { LogEntryContent } from '../../contracts/Entry.ts'
+
+const PER_PAGE = 50
+
+const LEVEL_VARIANTS: Record<string, 'red' | 'amber' | 'blue' | 'mute'> = {
+  emergency: 'red',
+  alert: 'red',
+  critical: 'red',
+  error: 'red',
+  warning: 'amber',
+  notice: 'blue',
+  info: 'blue',
+  debug: 'mute',
+}
+
+const LEVELS = ['debug', 'info', 'notice', 'warning', 'error', 'critical', 'alert', 'emergency']
+
+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 renderLogsPage(store: HeartbeatStore, basePath: string, searchParams?: URLSearchParams): Promise<string> {
+  const page = Math.max(1, parseInt(searchParams?.get('page') ?? '1', 10))
+  const levelFilter = searchParams?.get('level') ?? ''
+  const search = searchParams?.get('q') ?? ''
+
+  const total = await store.countEntries('log')
+  const entries = await store.getEntries({ type: 'log', limit: PER_PAGE, offset: (page - 1) * PER_PAGE })
+
+  // Count by level from fetched + total entries
+  let errorCount = 0, warningCount = 0
+  const filtered: typeof entries = []
+  for (const e of entries) {
+    const c = JSON.parse(e.content) as LogEntryContent
+    if (c.level === 'error' || c.level === 'critical' || c.level === 'alert' || c.level === 'emergency') errorCount++
+    if (c.level === 'warning') warningCount++
+
+    if (levelFilter && c.level !== levelFilter) continue
+    if (search && !c.message.toLowerCase().includes(search.toLowerCase())) continue
+    filtered.push(e)
+  }
+
+  const rows = filtered.map((entry) => {
+    const c = JSON.parse(entry.content) as LogEntryContent
+    return [
+      badge(c.level, LEVEL_VARIANTS[c.level] ?? 'mute'),
+      `<span class="mono trunc sm" title="${escapeHtml(c.message)}">${escapeHtml(truncate(c.message, 80))}</span>`,
+      `<span class="sm muted">${escapeHtml(c.channel)}</span>`,
+      originBadge(entry),
+      `<span class="sm dim">${timeAgo(entry.created_at)}</span>`,
+    ]
+  })
+
+  const totalPages = Math.ceil(total / PER_PAGE)
+
+  const levelOptions = LEVELS
+    .map((l) => `<option value="${l}"${levelFilter === l ? ' selected' : ''}>${l}</option>`)
+    .join('')
+
+  const content = `
+    <div class="stats">
+      ${stat('Total Logs', total.toString())}
+      ${stat('Errors', errorCount.toString())}
+      ${stat('Warnings', warningCount.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}/logs" style="display:flex;align-items:center;gap:10px;flex-wrap:wrap;flex:1">
+        <select name="level" 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 levels</option>
+          ${levelOptions}
+        </select>
+        <input type="text" name="q" value="${escapeHtml(search)}" placeholder="Search message\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(['Level', 'Message', 'Channel', 'Origin', 'Time'], rows)}
+    </div>
+
+    ${pagination(basePath + '/logs', page, totalPages, searchParams)}
+  `
+
+  return renderLayout({ title: 'Logs', activePage: 'logs', 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>`
+}