@stacksjs/defaults 0.70.229 → 0.70.231

package/resources/components/Dashboard/Analytics/WebAnalyticsDashboard.stx

@@ -0,0 +1,312 @@
+<template>
+<PageLayout>
+      <AnalyticsPageHeader
+        title="Web Analytics"
+        description="Privacy-safe traffic aggregates from recorded application requests."
+        :dateRange="dateRangeDisplay"
+        :range="analyticsRange"
+        :loading="isLoading"
+        @range-change="setAnalyticsRange"
+        @refresh="loadAnalytics"
+      />
+
+      <div class="grid gap-4 grid-cols-1 sm:grid-cols-2 lg:grid-cols-6 mb-8 p-4 bg-black dark:bg-neutral-900 rounded-lg">
+        <div class="flex flex-col items-center justify-center">
+          <div class="font-bold text-4xl text-white">{{ analyticsOverview.realtimeVisitors }}</div>
+          <div class="text-gray-400 text-sm">Realtime</div>
+        </div>
+        <div class="flex flex-col items-center justify-center">
+          <div class="font-bold text-4xl text-white">{{ formatNumber(analyticsOverview.uniqueVisitors) }}</div>
+          <div class="text-gray-400 text-sm">Unique visitors</div>
+        </div>
+        <div class="flex flex-col items-center justify-center">
+          <div class="font-bold text-4xl text-white">{{ formatNumber(analyticsOverview.pageViews) }}</div>
+          <div class="text-gray-400 text-sm">Page views</div>
+        </div>
+        <div class="flex flex-col items-center justify-center">
+          <div class="font-bold text-4xl text-white">{{ analyticsOverview.averageResponseTime }}</div>
+          <div class="text-gray-400 text-sm">Avg response</div>
+        </div>
+        <div class="flex flex-col items-center justify-center">
+          <div class="font-bold text-4xl text-white">{{ analyticsOverview.errorRate }}</div>
+          <div class="text-gray-400 text-sm">Error rate</div>
+        </div>
+        <div class="flex flex-col items-center justify-center">
+          <div class="font-bold text-4xl text-white">{{ formatNumber(analyticsOverview.successfulRequests) }}</div>
+          <div class="text-gray-400 text-sm">Successful requests</div>
+        </div>
+      </div>
+
+      <div class="mb-8 p-4 bg-white dark:bg-neutral-800 rounded-lg shadow">
+        <div class="mb-4">
+          <h3 class="font-medium leading-6 text-gray-900 text-lg dark:text-white">Traffic Overview</h3>
+          <p class="mt-1 text-gray-500 text-sm dark:text-neutral-400">Daily page views and unique visitors</p>
+        </div>
+        <div class="h-80 w-full"><canvas id="traffic_chart"></canvas></div>
+      </div>
+
+      <div class="grid gap-8 grid-cols-1 lg:grid-cols-2">
+        <div>
+          <div class="mb-4"><h3 class="font-medium text-gray-900 text-lg dark:text-white">Pages</h3></div>
+          <div class="overflow-hidden border border-gray-200 rounded-lg dark:border-neutral-700">
+            <table class="min-w-full divide-gray-200 divide-y dark:divide-neutral-700">
+              <thead class="bg-gray-50 dark:bg-neutral-700/50">
+                <tr>
+                  <th class="px-4 py-3 font-medium text-gray-500 text-left text-xs tracking-wider uppercase dark:text-neutral-300">Pages</th>
+                  <th class="px-4 py-3 font-medium text-gray-500 text-right text-xs tracking-wider uppercase dark:text-neutral-300">Entries</th>
+                  <th class="px-4 py-3 font-medium text-gray-500 text-right text-xs tracking-wider uppercase dark:text-neutral-300">Visitors</th>
+                  <th class="px-4 py-3 font-medium text-gray-500 text-right text-xs tracking-wider uppercase dark:text-neutral-300">Views</th>
+                  <th class="px-4 py-3 font-medium text-gray-500 text-right text-xs tracking-wider uppercase dark:text-neutral-300">%</th>
+                </tr>
+              </thead>
+              <tbody class="bg-white dark:bg-neutral-800 divide-gray-200 divide-y dark:divide-neutral-700">
+                <template :for="page in pagesData">
+                  <tr class="relative hover:bg-gray-50 dark:hover:bg-neutral-700/50">
+                    <td class="px-4 py-3 text-gray-900 text-sm whitespace-nowrap dark:text-white">
+                      <div class="absolute inset-0 bg-blue-100/50 dark:bg-blue-900/50" :style="'width: ' + page.percentage + '%'"></div>
+                      <span class="relative z-10">{{ page.path }}</span>
+                    </td>
+                    <td class="relative px-4 py-3 text-gray-500 text-right text-sm whitespace-nowrap dark:text-neutral-300"><span class="relative z-10">{{ page.entries }}</span></td>
+                    <td class="relative px-4 py-3 text-gray-500 text-right text-sm whitespace-nowrap dark:text-neutral-300"><span class="relative z-10">{{ page.visitors }}</span></td>
+                    <td class="relative px-4 py-3 text-gray-500 text-right text-sm whitespace-nowrap dark:text-neutral-300"><span class="relative z-10">{{ page.views }}</span></td>
+                    <td class="relative px-4 py-3 text-gray-500 text-right text-sm whitespace-nowrap dark:text-neutral-300"><span class="relative z-10">{{ page.percentage }}%</span></td>
+                  </tr>
+                </template>
+              </tbody>
+            </table>
+          </div>
+          <div class="flex justify-end mt-2"><StxLink to="/analytics/pages" class="text-blue-600 text-sm dark:text-blue-400 hover:text-blue-800 dark:hover:text-blue-300">View all pages</StxLink></div>
+        </div>
+
+        <div>
+          <div class="mb-4"><h3 class="font-medium text-gray-900 text-lg dark:text-white">Referrers</h3></div>
+          <div class="overflow-hidden border border-gray-200 rounded-lg dark:border-neutral-700">
+            <table class="min-w-full divide-gray-200 divide-y dark:divide-neutral-700">
+              <thead class="bg-gray-50 dark:bg-neutral-700/50">
+                <tr>
+                  <th class="px-4 py-3 font-medium text-gray-500 text-left text-xs tracking-wider uppercase dark:text-neutral-300">Sources</th>
+                  <th class="px-4 py-3 font-medium text-gray-500 text-right text-xs tracking-wider uppercase dark:text-neutral-300">Visitors</th>
+                  <th class="px-4 py-3 font-medium text-gray-500 text-right text-xs tracking-wider uppercase dark:text-neutral-300">Views</th>
+                  <th class="px-4 py-3 font-medium text-gray-500 text-right text-xs tracking-wider uppercase dark:text-neutral-300">%</th>
+                </tr>
+              </thead>
+              <tbody class="bg-white dark:bg-neutral-800 divide-gray-200 divide-y dark:divide-neutral-700">
+                <template :for="referrer in referrersData">
+                  <tr class="relative hover:bg-gray-50 dark:hover:bg-neutral-700/50">
+                    <td class="px-4 py-3 text-gray-900 text-sm whitespace-nowrap dark:text-white">
+                      <div class="absolute inset-0 bg-green-100/50 dark:bg-green-900/50" :style="'width: ' + referrer.percentage + '%'"></div>
+                      <span class="relative z-10">{{ referrer.name }}</span>
+                    </td>
+                    <td class="relative px-4 py-3 text-gray-500 text-right text-sm whitespace-nowrap dark:text-neutral-300"><span class="relative z-10">{{ referrer.visitors }}</span></td>
+                    <td class="relative px-4 py-3 text-gray-500 text-right text-sm whitespace-nowrap dark:text-neutral-300"><span class="relative z-10">{{ referrer.views }}</span></td>
+                    <td class="relative px-4 py-3 text-gray-500 text-right text-sm whitespace-nowrap dark:text-neutral-300"><span class="relative z-10">{{ referrer.percentage }}%</span></td>
+                  </tr>
+                </template>
+              </tbody>
+            </table>
+          </div>
+          <p :if="referrersData.length === 0" class="mt-3 text-gray-500 text-sm dark:text-neutral-400">Referrers require an analytics provider that records source headers.</p>
+          <div class="flex justify-end mt-2"><StxLink to="/analytics/referrers" class="text-blue-600 text-sm dark:text-blue-400 hover:text-blue-800 dark:hover:text-blue-300">View all referrers</StxLink></div>
+        </div>
+      </div>
+
+      <div class="grid gap-8 grid-cols-1 lg:grid-cols-3 mt-8">
+        <div>
+          <div class="mb-4"><h3 class="font-medium text-gray-900 text-lg dark:text-white">Device Types</h3></div>
+          <div class="overflow-hidden border border-gray-200 rounded-lg dark:border-neutral-700">
+            <table class="min-w-full divide-gray-200 divide-y dark:divide-neutral-700">
+              <thead class="bg-gray-50 dark:bg-neutral-700/50">
+                <tr>
+                  <th class="px-4 py-3 font-medium text-gray-500 text-left text-xs tracking-wider uppercase dark:text-neutral-300">Device Types</th>
+                  <th class="px-4 py-3 font-medium text-gray-500 text-right text-xs tracking-wider uppercase dark:text-neutral-300">Visitors</th>
+                  <th class="px-4 py-3 font-medium text-gray-500 text-right text-xs tracking-wider uppercase dark:text-neutral-300">%</th>
+                </tr>
+              </thead>
+              <tbody class="bg-white dark:bg-neutral-800 divide-gray-200 divide-y dark:divide-neutral-700">
+                <template :for="device in deviceData">
+                  <tr class="relative hover:bg-gray-50 dark:hover:bg-neutral-700/50">
+                    <td class="px-4 py-3 text-gray-900 text-sm whitespace-nowrap dark:text-white">
+                      <div class="absolute inset-0 bg-purple-100/50 dark:bg-purple-900/50" :style="'width: ' + device.percentage + '%'"></div>
+                      <span class="relative z-10">{{ device.name }}</span>
+                    </td>
+                    <td class="relative px-4 py-3 text-gray-500 text-right text-sm whitespace-nowrap dark:text-neutral-300"><span class="relative z-10">{{ device.visitors }}</span></td>
+                    <td class="relative px-4 py-3 text-gray-500 text-right text-sm whitespace-nowrap dark:text-neutral-300"><span class="relative z-10">{{ device.percentage }}%</span></td>
+                  </tr>
+                </template>
+              </tbody>
+            </table>
+          </div>
+          <div class="flex justify-end mt-2"><StxLink to="/analytics/devices" class="text-blue-600 text-sm dark:text-blue-400 hover:text-blue-800 dark:hover:text-blue-300">View all devices</StxLink></div>
+        </div>
+
+        <div>
+          <div class="mb-4"><h3 class="font-medium text-gray-900 text-lg dark:text-white">Browsers</h3></div>
+          <div class="overflow-hidden border border-gray-200 rounded-lg dark:border-neutral-700">
+            <table class="min-w-full divide-gray-200 divide-y dark:divide-neutral-700">
+              <thead class="bg-gray-50 dark:bg-neutral-700/50">
+                <tr>
+                  <th class="px-4 py-3 font-medium text-gray-500 text-left text-xs tracking-wider uppercase dark:text-neutral-300">Browsers</th>
+                  <th class="px-4 py-3 font-medium text-gray-500 text-right text-xs tracking-wider uppercase dark:text-neutral-300">Visitors</th>
+                  <th class="px-4 py-3 font-medium text-gray-500 text-right text-xs tracking-wider uppercase dark:text-neutral-300">%</th>
+                </tr>
+              </thead>
+              <tbody class="bg-white dark:bg-neutral-800 divide-gray-200 divide-y dark:divide-neutral-700">
+                <template :for="browser in browserData">
+                  <tr class="relative hover:bg-gray-50 dark:hover:bg-neutral-700/50">
+                    <td class="px-4 py-3 text-gray-900 text-sm whitespace-nowrap dark:text-white">
+                      <div class="absolute inset-0 bg-amber-100/50 dark:bg-amber-900/50" :style="'width: ' + browser.percentage + '%'"></div>
+                      <span class="relative z-10">{{ browser.name }}</span>
+                    </td>
+                    <td class="relative px-4 py-3 text-gray-500 text-right text-sm whitespace-nowrap dark:text-neutral-300"><span class="relative z-10">{{ browser.visitors }}</span></td>
+                    <td class="relative px-4 py-3 text-gray-500 text-right text-sm whitespace-nowrap dark:text-neutral-300"><span class="relative z-10">{{ browser.percentage }}%</span></td>
+                  </tr>
+                </template>
+              </tbody>
+            </table>
+          </div>
+          <div class="flex justify-end mt-2"><StxLink to="/analytics/browsers" class="text-blue-600 text-sm dark:text-blue-400 hover:text-blue-800 dark:hover:text-blue-300">View all browsers</StxLink></div>
+        </div>
+
+        <div>
+          <div class="mb-4"><h3 class="font-medium text-gray-900 text-lg dark:text-white">Countries</h3></div>
+          <div class="overflow-hidden border border-gray-200 rounded-lg dark:border-neutral-700">
+            <table class="min-w-full divide-gray-200 divide-y dark:divide-neutral-700">
+              <thead class="bg-gray-50 dark:bg-neutral-700/50">
+                <tr>
+                  <th class="px-4 py-3 font-medium text-gray-500 text-left text-xs tracking-wider uppercase dark:text-neutral-300">Countries</th>
+                  <th class="px-4 py-3 font-medium text-gray-500 text-right text-xs tracking-wider uppercase dark:text-neutral-300">Visitors</th>
+                  <th class="px-4 py-3 font-medium text-gray-500 text-right text-xs tracking-wider uppercase dark:text-neutral-300">%</th>
+                </tr>
+              </thead>
+              <tbody class="bg-white dark:bg-neutral-800 divide-gray-200 divide-y dark:divide-neutral-700">
+                <template :for="country in countriesData">
+                  <tr class="relative hover:bg-gray-50 dark:hover:bg-neutral-700/50">
+                    <td class="px-4 py-3 text-gray-900 text-sm whitespace-nowrap dark:text-white">
+                      <div class="absolute inset-0 bg-rose-100/50 dark:bg-rose-900/50" :style="'width: ' + country.percentage + '%'"></div>
+                      <span class="relative z-10"><span class="mr-2">{{ country.flag }}</span>{{ country.name }}</span>
+                    </td>
+                    <td class="relative px-4 py-3 text-gray-500 text-right text-sm whitespace-nowrap dark:text-neutral-300"><span class="relative z-10">{{ country.visitors }}</span></td>
+                    <td class="relative px-4 py-3 text-gray-500 text-right text-sm whitespace-nowrap dark:text-neutral-300"><span class="relative z-10">{{ country.percentage }}%</span></td>
+                  </tr>
+                </template>
+              </tbody>
+            </table>
+          </div>
+          <p :if="countriesData.length === 0" class="mt-3 text-gray-500 text-sm dark:text-neutral-400">Country data requires geolocation tracking in your analytics provider.</p>
+          <div class="flex justify-end mt-2"><StxLink to="/analytics/countries" class="text-blue-600 text-sm dark:text-blue-400 hover:text-blue-800 dark:hover:text-blue-300">View all countries</StxLink></div>
+        </div>
+      </div>
+</PageLayout>
+</template>
+<script client>
+import type {
+  AnalyticsOverview,
+  AnalyticsRange,
+  BrowserData,
+  CountryData,
+  DeviceData,
+  PageData,
+  ReferrerData,
+  TrafficDataPoint,
+} from '~/storage/framework/defaults/functions/analytics'
+import { fetchWebAnalytics } from '~/storage/framework/defaults/functions/analytics'
+import { pushToast } from '~/storage/framework/defaults/functions/toasts'
+import { useChart } from '~/storage/framework/defaults/views/dashboard/composables/useChart'
+
+interface ChartLike { destroy: () => void }
+type ChartCtor = new (canvas: HTMLElement, config: { type: string, data: unknown, options?: unknown }) => ChartLike
+
+const analyticsOverview = state<AnalyticsOverview>({
+  realtimeVisitors: 0,
+  uniqueVisitors: 0,
+  pageViews: 0,
+  averageResponseTime: '-',
+  errorRate: 'N/A',
+  successfulRequests: 0,
+})
+const analyticsRange = state<AnalyticsRange>('month')
+const dateRangeDisplay = state('Last 30 days')
+const trafficData = state<TrafficDataPoint[]>([])
+const pagesData = state<PageData[]>([])
+const referrersData = state<ReferrerData[]>([])
+const deviceData = state<DeviceData[]>([])
+const browserData = state<BrowserData[]>([])
+const countriesData = state<CountryData[]>([])
+const isLoading = state(false)
+
+let chartHandle: { destroy: () => void } | null = null
+
+function formatNumber(value: number): string {
+  return new Intl.NumberFormat().format(value)
+}
+
+function formatDateRange(start: string, end: string): string {
+  const formatter = new Intl.DateTimeFormat(undefined, { month: 'short', day: 'numeric', year: 'numeric' })
+  return `${formatter.format(new Date(start))} to ${formatter.format(new Date(end))}`
+}
+
+function setAnalyticsRange(value: string | CustomEvent<string>): void {
+  const range = typeof value === 'string' ? value : value.detail
+  analyticsRange.set(range as AnalyticsRange)
+  void loadAnalytics()
+}
+
+async function renderTrafficChart(): Promise<void> {
+  chartHandle?.destroy()
+  const { Chart, registerables } = await import('/__deps/charts.js')
+  Chart.register(...registerables)
+  const Ctor = Chart as unknown as ChartCtor
+  chartHandle = useChart({
+    Chart: Ctor,
+    id: 'traffic_chart',
+    type: 'line',
+    data: {
+      labels: trafficData().map(item => item.date),
+      datasets: [
+        { label: 'Page Views', data: trafficData().map(item => item.pageViews), backgroundColor: 'rgba(147, 197, 253, 0.3)', borderColor: 'rgba(59, 130, 246, 0.8)', borderWidth: 2, tension: 0.4, fill: true },
+        { label: 'Visitors', data: trafficData().map(item => item.visitors), backgroundColor: 'rgba(147, 197, 253, 0.1)', borderColor: 'rgba(96, 165, 250, 0.8)', borderWidth: 2, tension: 0.4, fill: false },
+      ],
+    },
+    options: {
+      responsive: true,
+      maintainAspectRatio: false,
+      scales: {
+        x: { grid: { display: false }, ticks: { maxTicksLimit: 4 } },
+        y: { beginAtZero: true, grid: { borderDash: [2, 4], color: 'rgba(160, 174, 192, 0.2)' }, ticks: { maxTicksLimit: 6 } },
+      },
+      plugins: { legend: { display: true, position: 'top' }, tooltip: { mode: 'index', intersect: false } },
+    },
+  })
+}
+
+async function loadAnalytics(): Promise<void> {
+  isLoading.set(true)
+  try {
+    const data = await fetchWebAnalytics(analyticsRange())
+    analyticsOverview.set(data.overview)
+    trafficData.set(data.traffic)
+    pagesData.set(data.pages)
+    referrersData.set(data.referrers)
+    deviceData.set(data.devices)
+    browserData.set(data.browsers)
+    countriesData.set(data.countries)
+    dateRangeDisplay.set(formatDateRange(data.dateRange.start, data.dateRange.end))
+    await renderTrafficChart()
+  }
+  catch (error) {
+    pushToast('error', 'Could not load web analytics', { detail: String(error) })
+  }
+  finally {
+    isLoading.set(false)
+  }
+}
+
+onMount(async () => {
+  await loadAnalytics()
+})
+
+onDestroy(() => {
+  chartHandle?.destroy()
+  chartHandle = null
+})
+</script>

package/resources/components/Dashboard/App/RequestsOverview.stx

@@ -0,0 +1,253 @@
+<script client>
+import { dashboardApi } from '../../../../functions/dashboard-api'
+
+interface RequestRow {
+  id: number
+  method: string
+  path: string
+  status: number
+  durationMs: number
+  ipAddress: string
+  memoryUsageMb: number
+  userAgent: string
+  errorMessage: string
+  createdAt: string
+}
+
+interface RequestStats {
+  total: number
+  errorCount: number
+  averageDurationMs: number
+  successRate: number
+  requestsLastHour: number
+  requestsPerMinute: number
+}
+
+interface RequestsResponse {
+  requests: RequestRow[]
+  stats: RequestStats
+}
+
+const requests = state<RequestRow[]>([])
+const stats = state<RequestStats>({
+  total: 0,
+  errorCount: 0,
+  averageDurationMs: 0,
+  successRate: 0,
+  requestsLastHour: 0,
+  requestsPerMinute: 0,
+})
+const search = state('')
+const methodFilter = state('all')
+const statusFilter = state('all')
+const selectedRequest = state<RequestRow | null>(null)
+const loading = state(true)
+const loadError = state('')
+
+const methods = derived(() => [...new Set(requests().map(request => request.method))].sort())
+const filteredRequests = derived(() => {
+  const query = search().trim().toLowerCase()
+  return requests().filter((request) => {
+    if (methodFilter() !== 'all' && request.method !== methodFilter())
+      return false
+    if (statusFilter() === 'success' && request.status >= 400)
+      return false
+    if (statusFilter() === 'error' && request.status < 400)
+      return false
+    if (!query)
+      return true
+    return [
+      request.method,
+      request.path,
+      request.status,
+      request.ipAddress,
+      request.userAgent,
+      request.errorMessage,
+    ].join(' ').toLowerCase().includes(query)
+  })
+})
+
+function formatDate(value: string): string {
+  if (!value)
+    return 'Unknown'
+  const date = new Date(value)
+  return Number.isNaN(date.getTime()) ? 'Unknown' : date.toLocaleString()
+}
+
+function statusClass(status: number): string {
+  if (status >= 500)
+    return 'text-red-700 dark:text-red-300 bg-red-50 dark:bg-red-950/40'
+  if (status >= 400)
+    return 'text-amber-700 dark:text-amber-300 bg-amber-50 dark:bg-amber-950/40'
+  if (status >= 300)
+    return 'text-blue-700 dark:text-blue-300 bg-blue-50 dark:bg-blue-950/40'
+  return 'text-green-700 dark:text-green-300 bg-green-50 dark:bg-green-950/40'
+}
+
+function methodClass(method: string): string {
+  if (method === 'GET')
+    return 'text-blue-700 dark:text-blue-300 bg-blue-50 dark:bg-blue-950/40'
+  if (method === 'DELETE')
+    return 'text-red-700 dark:text-red-300 bg-red-50 dark:bg-red-950/40'
+  return 'text-violet-700 dark:text-violet-300 bg-violet-50 dark:bg-violet-950/40'
+}
+
+function inspectRequest(request: RequestRow): void {
+  selectedRequest.set(request)
+}
+
+function closeInspector(): void {
+  selectedRequest.set(null)
+}
+
+async function loadRequests(): Promise<void> {
+  loading.set(true)
+  loadError.set('')
+  try {
+    const response = await dashboardApi<RequestsResponse>('/api/dashboard/requests')
+    requests.set(response.requests || [])
+    stats.set(response.stats)
+  }
+  catch (error) {
+    requests.set([])
+    loadError.set(error instanceof Error ? error.message : 'Request records could not be loaded.')
+  }
+  finally {
+    loading.set(false)
+  }
+}
+
+onMount(() => {
+  void loadRequests()
+})
+</script>
+
+<div class="space-y-6">
+  <header class="flex flex-col gap-4 sm:flex-row sm:items-end sm:justify-between">
+    <div>
+      <h1 class="font-semibold text-2xl text-neutral-900 tracking-tight dark:text-white">Requests</h1>
+      <p class="mt-1 text-neutral-500 text-sm dark:text-neutral-400">Inspect HTTP activity persisted by the Request model.</p>
+    </div>
+    <Button variant="secondary" :loading="loading()" @click="loadRequests">
+      <span :if="!loading()" class="h-4 w-4 i-hugeicons-refresh"></span>
+      Refresh
+    </Button>
+  </header>
+
+  <div :if="loadError()" role="alert" class="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between px-4 py-3 text-red-700 text-sm dark:text-red-300 bg-red-50 dark:bg-red-950/40 border border-red-200 rounded-lg dark:border-red-900">
+    <span>{{ loadError() }}</span>
+    <Button variant="secondary" size="sm" @click="loadRequests">Try again</Button>
+  </div>
+
+  <div class="grid gap-4 grid-cols-1 sm:grid-cols-2 xl:grid-cols-4">
+    <StatsCard title="Recorded Requests" icon="i-hugeicons-global" iconBg="primary">
+      <template #value>{{ stats().total }}</template>
+    </StatsCard>
+    <StatsCard title="Success Rate" icon="i-hugeicons-checkmark-circle-02" iconBg="success">
+      <template #value>{{ stats().successRate.toFixed(1) }}%</template>
+    </StatsCard>
+    <StatsCard title="Average Duration" icon="i-hugeicons-clock-01" iconBg="info">
+      <template #value>{{ stats().averageDurationMs.toFixed(1) }} ms</template>
+    </StatsCard>
+    <StatsCard title="Requests Last Hour" icon="i-hugeicons-activity-03" iconBg="warning">
+      <template #value>{{ stats().requestsLastHour }}</template>
+    </StatsCard>
+  </div>
+
+  <Card padding="none">
+    <div class="flex flex-col gap-4 p-5 border-b border-neutral-200 dark:border-neutral-700">
+      <div>
+        <h2 class="font-semibold text-neutral-900 dark:text-white">Recent request records</h2>
+        <p class="mt-1 text-neutral-500 text-xs dark:text-neutral-400">Showing up to 100 persisted records. Last-hour rate: {{ stats().requestsPerMinute.toFixed(2) }} per minute.</p>
+      </div>
+      <div class="grid gap-3 grid-cols-1 sm:grid-cols-[minmax(0,1fr)_auto_auto]">
+        <label class="block relative">
+          <span class="sr-only">Search requests</span>
+          <span class="absolute left-3 top-2.5 h-4 w-4 text-neutral-400 i-hugeicons-search-01"></span>
+          <input x-model="search" type="search" placeholder="Search path, client, status, or error" class="block pl-9 pr-3 py-2 w-full text-neutral-900 text-sm dark:text-white bg-white dark:bg-neutral-950 border border-neutral-300 rounded-lg dark:border-neutral-700 focus:border-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-500/20">
+        </label>
+        <label>
+          <span class="sr-only">Method</span>
+          <select x-model="methodFilter" class="px-3 py-2 w-full text-neutral-900 text-sm dark:text-white bg-white dark:bg-neutral-950 border border-neutral-300 rounded-lg dark:border-neutral-700">
+            <option value="all">All methods</option>
+            <option :for="method in methods()" :value="method">{{ method }}</option>
+          </select>
+        </label>
+        <label>
+          <span class="sr-only">Status</span>
+          <select x-model="statusFilter" class="px-3 py-2 w-full text-neutral-900 text-sm dark:text-white bg-white dark:bg-neutral-950 border border-neutral-300 rounded-lg dark:border-neutral-700">
+            <option value="all">All statuses</option>
+            <option value="success">Below 400</option>
+            <option value="error">400 and above</option>
+          </select>
+        </label>
+      </div>
+    </div>
+
+    <div :if="loading()" class="flex items-center justify-center py-16 text-neutral-500 text-sm dark:text-neutral-400">
+      <span class="mr-2 h-5 w-5 animate-spin i-hugeicons-loading-03"></span>
+      Loading request records...
+    </div>
+
+    <EmptyState
+      :if="!loading() && !loadError() && filteredRequests().length === 0"
+      icon="i-hugeicons-global"
+      :title="search() || methodFilter() !== 'all' || statusFilter() !== 'all' ? 'No matching requests' : 'No requests recorded'"
+      description="Request records appear after the application writes to the Request model."
+    />
+
+    <div :if="!loading() && filteredRequests().length > 0" class="overflow-x-auto">
+      <table class="w-full">
+        <thead class="bg-neutral-50 dark:bg-neutral-800/50">
+          <tr>
+            <th class="pl-5 pr-4 py-3 font-semibold text-left text-neutral-500 text-xs tracking-wider uppercase dark:text-neutral-400">Request</th>
+            <th class="px-4 py-3 font-semibold text-left text-neutral-500 text-xs tracking-wider uppercase dark:text-neutral-400">Status</th>
+            <th class="px-4 py-3 font-semibold text-neutral-500 text-right text-xs tracking-wider uppercase dark:text-neutral-400">Duration</th>
+            <th class="px-4 py-3 font-semibold text-left text-neutral-500 text-xs tracking-wider uppercase dark:text-neutral-400">Client</th>
+            <th class="px-4 py-3 font-semibold text-neutral-500 text-right text-xs tracking-wider uppercase dark:text-neutral-400">Recorded</th>
+            <th class="pr-5 py-3 font-semibold text-neutral-500 text-right text-xs tracking-wider uppercase dark:text-neutral-400">Details</th>
+          </tr>
+        </thead>
+        <tbody class="divide-neutral-100 divide-y dark:divide-neutral-700">
+          <tr :for="request in filteredRequests()">
+            <td class="pl-5 pr-4 py-3.5">
+              <div class="flex gap-2 items-center">
+                <span :class="'inline-flex px-2 py-0.5 font-medium text-xs rounded ' + methodClass(request.method)">{{ request.method }}</span>
+                <code class="max-w-md text-neutral-800 text-xs truncate dark:text-neutral-200">{{ request.path }}</code>
+              </div>
+            </td>
+            <td class="px-4 py-3.5"><span :class="'inline-flex px-2 py-0.5 font-medium text-xs rounded ' + statusClass(request.status)">{{ request.status }}</span></td>
+            <td class="px-4 py-3.5 font-mono text-neutral-600 text-right text-xs whitespace-nowrap dark:text-neutral-300">{{ request.durationMs.toFixed(1) }} ms</td>
+            <td class="px-4 py-3.5 text-neutral-500 text-xs dark:text-neutral-400">{{ request.ipAddress || 'Not recorded' }}</td>
+            <td class="px-4 py-3.5 text-neutral-500 text-right text-xs whitespace-nowrap dark:text-neutral-400">{{ formatDate(request.createdAt) }}</td>
+            <td class="pr-5 py-3.5 text-right">
+              <Button variant="ghost" size="sm" @click="inspectRequest(request)">Inspect</Button>
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+  </Card>
+
+  <div :if="selectedRequest()" class="flex fixed inset-0 z-50 items-center justify-center p-4 bg-black/50 dashboard-modal-layer" @click.self="closeInspector">
+    <div role="dialog" aria-modal="true" aria-labelledby="request-detail-title" class="p-6 max-w-2xl w-full bg-white dark:bg-neutral-900 border border-neutral-200 rounded-xl dark:border-neutral-700 shadow-xl">
+      <div class="flex gap-4 items-start justify-between">
+        <div>
+          <h2 id="request-detail-title" class="font-semibold text-lg text-neutral-900 dark:text-white">Request #{{ selectedRequest()?.id }}</h2>
+          <p class="mt-1 break-all font-mono text-neutral-500 text-sm dark:text-neutral-400">{{ selectedRequest()?.method }} {{ selectedRequest()?.path }}</p>
+        </div>
+        <Button variant="ghost" iconOnly ariaLabel="Close request details" @click="closeInspector">
+          <span class="h-5 w-5 i-hugeicons-cancel-01"></span>
+        </Button>
+      </div>
+      <dl class="grid gap-4 grid-cols-1 sm:grid-cols-2 mt-6 text-sm">
+        <div><dt class="text-neutral-500 dark:text-neutral-400">Status</dt><dd class="mt-1 font-medium text-neutral-900 dark:text-white">{{ selectedRequest()?.status }}</dd></div>
+        <div><dt class="text-neutral-500 dark:text-neutral-400">Duration</dt><dd class="mt-1 font-medium text-neutral-900 dark:text-white">{{ selectedRequest()?.durationMs.toFixed(1) }} ms</dd></div>
+        <div><dt class="text-neutral-500 dark:text-neutral-400">IP address</dt><dd class="mt-1 font-medium text-neutral-900 dark:text-white">{{ selectedRequest()?.ipAddress || 'Not recorded' }}</dd></div>
+        <div><dt class="text-neutral-500 dark:text-neutral-400">Memory usage</dt><dd class="mt-1 font-medium text-neutral-900 dark:text-white">{{ selectedRequest()?.memoryUsageMb || 0 }} MB</dd></div>
+        <div class="sm:col-span-2"><dt class="text-neutral-500 dark:text-neutral-400">User agent</dt><dd class="mt-1 break-words text-neutral-900 dark:text-white">{{ selectedRequest()?.userAgent || 'Not recorded' }}</dd></div>
+        <div class="sm:col-span-2"><dt class="text-neutral-500 dark:text-neutral-400">Error</dt><dd class="mt-1 break-words text-neutral-900 dark:text-white">{{ selectedRequest()?.errorMessage || 'No error recorded' }}</dd></div>
+      </dl>
+    </div>
+  </div>
+</div>