@stacksjs/defaults 0.70.207 → 0.70.208

package/views/dashboard/logs/index.stx

@@ -0,0 +1,540 @@
+@extends('layouts/default')
+
+@section('content')
+@title('Dashboard - Logs')
+<div class="p-6 space-y-6">
+  <PageHeader title="System Logs" description="A list of all system logs. Monitor system activities and events in real-time." />
+
+  <div class="bg-white dark:bg-neutral-700 rounded-lg shadow">
+    <div class="p-6">
+      <div class="flex items-center justify-between mb-6">
+        <div>
+          <h3 class="font-medium text-base text-gray-900 dark:text-neutral-100">Log Volume</h3>
+          <p class="mt-1 text-gray-500 text-sm dark:text-neutral-400">Distribution of log types over time</p>
+        </div>
+        <select x-model="timeRange" class="pl-3 pr-8 py-1.5 h-9 text-gray-900 text-sm dark:text-neutral-100 bg-gray-50 dark:bg-neutral-600 border-0 ring-1 ring-gray-300 ring-inset rounded-md dark:ring-neutral-600 focus:ring-2 focus:ring-blue-600">
+          <option value="day">Last 24 Hours</option>
+          <option value="week">Last 7 Days</option>
+          <option value="month">Last 30 Days</option>
+          <option value="year">Last Year</option>
+        </select>
+      </div>
+      <div class="relative h-[300px]">
+        <div :show="isLoading()" class="flex absolute inset-0 z-10 items-center justify-center bg-opacity-75 bg-white dark:bg-neutral-700 dark:bg-opacity-75">
+          <div class="h-8 w-8 border-b-2 border-blue-500 rounded-full animate-spin"></div>
+        </div>
+        <canvas id="logs_volume_chart"></canvas>
+      </div>
+    </div>
+  </div>
+
+  <div class="flow-root mt-8">
+    <div class="mb-6 space-y-4">
+      <div class="flex flex-wrap gap-4 items-center">
+        <div class="flex-1 min-w-[200px]">
+          <input x-model="searchTerm" type="text" placeholder="Search logs..." class="px-4 py-2 w-full text-gray-900 dark:text-neutral-100 dark:bg-neutral-700 border border-gray-300 rounded-lg dark:border-neutral-600 focus:border-blue-500 focus:outline-none focus:ring-1 focus:ring-blue-500" />
+        </div>
+
+        <select x-model="sourceFilter" class="px-4 py-2 min-w-[140px] text-gray-900 dark:text-neutral-100 bg-white dark:bg-neutral-800 border border-gray-300 rounded-lg dark:border-neutral-600">
+          <option value="all">All Sources</option>
+          <option value="cli">CLI</option>
+          <option value="file">File</option>
+          <option value="system">System</option>
+          <option value="mail">Mail</option>
+          <option value="notification">Notification</option>
+        </select>
+
+        <select x-model="logTypeFilter" class="px-4 py-2 min-w-[140px] text-gray-900 dark:text-neutral-100 bg-white dark:bg-neutral-800 border border-gray-300 rounded-lg dark:border-neutral-600">
+          <option value="all">All Types</option>
+          <option value="info">Info</option>
+          <option value="success">Success</option>
+          <option value="warning">Warning</option>
+          <option value="error">Error</option>
+          <option value="mail">Mail</option>
+        </select>
+
+        <button @click="toggleAutoRefresh()" class="{{ autoRefreshClass() }}">
+          <i class="h-4 w-4 i-hugeicons-refresh {{ autoRefresh() ? 'animate-spin' : '' }}" aria-hidden="true"></i>
+          {{ autoRefresh() ? 'Auto-refreshing' : 'Auto-refresh' }}
+        </button>
+
+        <button :show="hasActiveFilters()" @click="resetFilters()" class="flex gap-2 items-center px-4 py-2 text-gray-700 dark:text-neutral-200 bg-gray-100 dark:bg-neutral-700 hover:bg-gray-200 dark:hover:bg-neutral-600 rounded-lg">
+          <i class="h-4 w-4 i-hugeicons-cancel-01" aria-hidden="true"></i>
+          Reset Filters
+        </button>
+      </div>
+
+      <div class="flex flex-wrap gap-2">
+        <template :for="project in projectsList">
+          <button @click="toggleProject(project.id)" class="{{ projectButtonClassFor(project.id) }}">
+            {{ project.name }}
+            <span :show="isProjectSelected(project.id)" class="ml-2 text-xs">×</span>
+          </button>
+        </template>
+      </div>
+    </div>
+
+    <div class="overflow-x-auto -mx-4 -my-2 sm:-mx-6 lg:-mx-8">
+      <div class="inline-block py-2 sm:px-6 lg:px-8 min-w-full align-middle">
+        <div class="overflow-hidden ring-1 ring-black ring-opacity-5 sm:rounded-lg shadow">
+          <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-6 py-3 font-medium text-gray-500 text-left text-xs tracking-wider uppercase">Timestamp</th>
+                <th class="px-6 py-3 font-medium text-gray-500 text-left text-xs tracking-wider uppercase">Type</th>
+                <th class="px-6 py-3 font-medium text-gray-500 text-left text-xs tracking-wider uppercase">Source</th>
+                <th class="px-6 py-3 font-medium text-gray-500 text-left text-xs tracking-wider uppercase">Message</th>
+                <th class="px-6 py-3 font-medium text-gray-500 text-left text-xs tracking-wider uppercase">Project</th>
+                <th class="px-6 py-3 font-medium text-gray-500 text-right text-xs tracking-wider uppercase">Details</th>
+              </tr>
+            </thead>
+            <tbody class="bg-white dark:bg-neutral-800 divide-gray-200 divide-y dark:divide-neutral-700">
+              <template :for="log in paginatedLogs">
+                <tr @click="selectLog(log.id)" class="{{ logRowClass(log) }}">
+                  <td class="px-6 py-4 whitespace-nowrap">
+                    <div class="text-gray-900 text-sm dark:text-neutral-100">
+                      <i class="mr-2 h-4 w-4 text-gray-400 i-hugeicons-clock-01" aria-hidden="true"></i>
+                      {{ formatTime(log.timestamp) }}
+                    </div>
+                  </td>
+                  <td class="px-6 py-4 whitespace-nowrap">
+                    <div class="flex items-center">
+                      <i :class="logIconClass(log.type)" aria-hidden="true"></i>
+                    </div>
+                  </td>
+                  <td class="px-6 py-4 whitespace-nowrap">
+                    <span class="inline-flex px-2 font-semibold leading-5 text-blue-800 text-xs dark:text-blue-100 bg-blue-100 dark:bg-blue-900 rounded-full">{{ log.source }}</span>
+                  </td>
+                  <td class="px-6 py-4">
+                    <div class="text-gray-900 text-sm dark:text-neutral-100">{{ log.message }}</div>
+                    <div :if="log.email" class="mt-1 text-gray-500 text-xs truncate dark:text-neutral-400">{{ log.email?.subject }}</div>
+                  </td>
+                  <td class="px-6 py-4 whitespace-nowrap">
+                    <span :if="log.project" :class="projectBadgeClassFor(log.project)">{{ projectName(log.project) }}</span>
+                  </td>
+                  <td class="px-6 py-4 text-right whitespace-nowrap">
+                    <button class="text-gray-400 hover:text-blue-500 duration-150 transition-colors">
+                      <i class="h-5 w-5 i-hugeicons-view" aria-hidden="true"></i>
+                    </button>
+                  </td>
+                </tr>
+              </template>
+              <tr :show="paginatedLogs().length === 0">
+                <td colspan="6" class="px-6 py-8 text-center text-gray-500 text-sm dark:text-neutral-400">No logs match your filters.</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </div>
+    </div>
+
+    <div class="flex items-center justify-between mt-4">
+      <div class="flex items-center">
+        <span class="text-gray-700 text-sm dark:text-neutral-400">
+          Showing <span class="font-medium">{{ paginatedLogs().length }}</span> of <span class="font-medium">{{ totalItems() }}</span> results
+        </span>
+      </div>
+      <div class="flex items-center space-x-2">
+        <select x-model="itemsPerPage" class="px-2 py-1 text-sm dark:text-neutral-100 dark:bg-neutral-700 border border-gray-300 rounded-md dark:border-neutral-600">
+          <option value="10">10 per page</option>
+          <option value="25">25 per page</option>
+          <option value="50">50 per page</option>
+          <option value="100">100 per page</option>
+        </select>
+
+        <div class="flex items-center space-x-1">
+          <button @click="prevPage()" :disabled="currentPage() === 1" class="px-2 py-1 text-sm hover:bg-gray-100 dark:hover:bg-neutral-700 border border-gray-300 rounded-md dark:border-neutral-600 disabled:opacity-50 disabled:cursor-not-allowed">
+            <i class="h-4 w-4 i-hugeicons-arrow-left-01" aria-hidden="true"></i>
+          </button>
+
+          <template :for="page in visiblePages">
+            <button @click="goToPage(page)" class="{{ pageButtonClass(page) }}">{{ page }}</button>
+          </template>
+
+          <span :show="totalPages() > 5" class="px-2 text-gray-500 dark:text-neutral-400">...</span>
+
+          <button :show="totalPages() > 5" @click="goToPage(totalPages())" class="{{ pageButtonClass(totalPages()) }}">{{ totalPages() }}</button>
+
+          <button @click="nextPage()" :disabled="currentPage() >= totalPages() || totalPages() === 0" class="px-2 py-1 text-sm hover:bg-gray-100 dark:hover:bg-neutral-700 border border-gray-300 rounded-md dark:border-neutral-600 disabled:opacity-50 disabled:cursor-not-allowed">
+            <i class="h-4 w-4 i-hugeicons-arrow-right-01" aria-hidden="true"></i>
+          </button>
+        </div>
+      </div>
+    </div>
+
+    <div :show="selectedLog() !== null" @click.self="closeModal()" class="flex fixed inset-0 z-50 items-center justify-center p-4 bg-black bg-opacity-50">
+      <div class="overflow-y-auto p-6 max-h-[90vh] max-w-2xl w-full bg-white dark:bg-neutral-800 rounded-lg shadow-xl">
+        <div class="flex items-center justify-between mb-4">
+          <h3 class="font-semibold text-gray-900 text-lg dark:text-neutral-100">Log Details</h3>
+          <button @click="closeModal()" class="text-gray-500 dark:text-neutral-400 hover:text-gray-700 dark:hover:text-neutral-200">
+            <i class="h-5 w-5 i-hugeicons-cancel-01" aria-hidden="true"></i>
+          </button>
+        </div>
+        <div class="space-y-4">
+          <div>
+            <label class="block font-medium text-gray-700 text-sm dark:text-neutral-300">Timestamp</label>
+            <p class="mt-1 text-gray-900 text-sm dark:text-neutral-100">{{ formatDateTime(selectedLog()?.timestamp) }}</p>
+          </div>
+          <div>
+            <label class="block font-medium text-gray-700 text-sm dark:text-neutral-300">Type</label>
+            <div class="flex items-center mt-1">
+              <i :class="selectedLogIconClass()" aria-hidden="true"></i>
+              <span class="ml-2 capitalize text-gray-900 text-sm dark:text-neutral-100">{{ selectedLog()?.type }}</span>
+            </div>
+          </div>
+          <div>
+            <label class="block font-medium text-gray-700 text-sm dark:text-neutral-300">Source</label>
+            <p class="mt-1 text-gray-900 text-sm dark:text-neutral-100">{{ selectedLog()?.source }}</p>
+          </div>
+          <div>
+            <label class="block font-medium text-gray-700 text-sm dark:text-neutral-300">Project</label>
+            <p class="mt-1 text-gray-900 text-sm dark:text-neutral-100">{{ selectedProjectName() }}</p>
+          </div>
+          <div>
+            <label class="block font-medium text-gray-700 text-sm dark:text-neutral-300">Message</label>
+            <p class="mt-1 text-gray-900 text-sm dark:text-neutral-100">{{ selectedLog()?.message }}</p>
+          </div>
+
+          <div :if="selectedLog()?.metadata?.command" class="mt-4">
+            <label class="block font-medium text-gray-700 text-sm dark:text-neutral-300">Command</label>
+            <div class="mt-2 p-3 font-mono text-sm dark:text-neutral-100 bg-gray-50 dark:bg-neutral-900 rounded-md">{{ selectedLog()?.metadata?.command }}</div>
+          </div>
+
+          <div>
+            <label class="block font-medium text-gray-700 text-sm dark:text-neutral-300">Metadata</label>
+            <pre class="overflow-x-auto mt-1 p-3 text-gray-900 text-sm dark:text-neutral-100 bg-gray-50 dark:bg-neutral-900 rounded">{{ selectedMetadataJson() }}</pre>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+
+<script client>
+interface Log {
+  id: string
+  timestamp: string
+  type: 'info' | 'error' | 'success' | 'warning' | 'mail'
+  source: 'CLI' | 'File' | 'System' | 'Mail' | 'Notification'
+  message: string
+  metadata: Record<string, unknown>
+  project?: string
+  email?: { subject?: string, sender?: string, recipient?: string }
+}
+
+interface Project { id: string, name: string, color: string }
+
+interface ChartLike { destroy: () => void, update: () => void, data: { labels: string[], datasets: Array<{ label?: string, data: number[], borderColor?: string, backgroundColor?: string, fill?: boolean }> } }
+type ChartCtor = new (canvas: HTMLElement, config: { type: string, data: unknown, options?: unknown }) => ChartLike
+
+const projectsList: Project[] = [
+  { id: 'stacks', name: 'Stacks', color: 'blue' },
+  { id: 'rpx', name: 'rpx', color: 'purple' },
+  { id: 'tlsx', name: 'tlsx', color: 'green' },
+  { id: 'dtsx', name: 'dtsx', color: 'indigo' },
+  { id: 'ts-collect', name: 'ts-collect', color: 'rose' },
+  { id: 'vite-plugin-local', name: 'vite-plugin-local', color: 'amber' },
+]
+
+const now = Date.now()
+const sampleLogs: Log[] = [
+  { id: '1', timestamp: new Date(now).toISOString(), type: 'info', source: 'CLI', message: 'buddy build started', metadata: { user: 'chris@stacksjs.com', command: 'buddy build' }, project: 'stacks' },
+  { id: '2', timestamp: new Date(now - 5000).toISOString(), type: 'error', source: 'File', message: 'Failed to compile component', metadata: { file: './components/Header.stx', line: 42 }, project: 'rpx' },
+  { id: '3', timestamp: new Date(now - 15000).toISOString(), type: 'success', source: 'System', message: 'Production deployment successful', metadata: { deployment_id: 'dep_abc123', environment: 'production', branch: 'main', commit: '7829abc', duration: '45s' }, project: 'stacks' },
+  { id: '4', timestamp: new Date(now - 60000).toISOString(), type: 'info', source: 'CLI', message: 'Starting database migration', metadata: { migration: 'create_users_table', database: 'production', user: 'deploy@stacksjs.com', command: 'buddy db:migrate' }, project: 'stacks' },
+  { id: '5', timestamp: new Date(now - 120000).toISOString(), type: 'error', source: 'System', message: 'Failed to connect to Redis cache', metadata: { error: 'Connection timeout', host: 'redis.internal', port: 6379, attempt: 3 }, project: 'stacks' },
+  { id: '6', timestamp: new Date(now - 180000).toISOString(), type: 'success', source: 'CLI', message: 'Assets compiled successfully', metadata: { duration: '12.5s', assets: ['main.js', 'vendor.js', 'app.css'], size: '2.3MB', command: 'buddy build --production' }, project: 'stacks' },
+  { id: '7', timestamp: new Date(now - 240000).toISOString(), type: 'info', source: 'System', message: 'Auto-scaling triggered', metadata: { reason: 'High CPU usage', current_instances: 3, target_instances: 5, region: 'us-east-1' }, project: 'stacks' },
+  { id: '8', timestamp: new Date(now - 300000).toISOString(), type: 'success', source: 'CLI', message: 'Configuration cache cleared', metadata: { triggered_by: 'deployment', cache_size: '156KB', duration: '0.8s', command: 'buddy config:clear' }, project: 'stacks' },
+  { id: '9', timestamp: new Date(now - 360000).toISOString(), type: 'info', source: 'CLI', message: 'Running test suite', metadata: { suite: 'Integration Tests', total_tests: 156, parallel: true, ci: true, command: 'buddy test --suite=integration' }, project: 'stacks' },
+  { id: '10', timestamp: new Date(now - 420000).toISOString(), type: 'error', source: 'System', message: 'SSL certificate expiring soon', metadata: { domain: 'api.stacksjs.com', expires_in: '7 days', certificate_id: 'cert_xyz789' }, project: 'stacks' },
+]
+
+const logs = state<Log[]>(sampleLogs)
+const currentPage = state(1)
+const itemsPerPage = state('10')
+const sourceFilter = state('all')
+const logTypeFilter = state('all')
+const searchTerm = state('')
+const autoRefresh = state(true)
+const selectedLogId = state<string | null>(null)
+const selectedProjects = state<string[]>([])
+const isLoading = state(false)
+const timeRange = state('day')
+
+const itemsPerPageNum = derived(() => Number.parseInt(itemsPerPage(), 10) || 10)
+
+const filteredLogs = derived(() => {
+  const q = searchTerm().toLowerCase()
+  const src = sourceFilter()
+  const type = logTypeFilter()
+  const projs = selectedProjects()
+  return logs()
+    .filter((log) => {
+      const matchesSearch = !q
+        || log.message.toLowerCase().includes(q)
+        || (log.email?.subject?.toLowerCase().includes(q) ?? false)
+        || (log.email?.recipient?.toLowerCase().includes(q) ?? false)
+      const matchesSource = src === 'all' || log.source.toLowerCase() === src.toLowerCase()
+      const matchesType = type === 'all' || log.type === type
+      const matchesProject = projs.length === 0 || (log.project !== undefined && projs.includes(log.project))
+      return matchesSearch && matchesSource && matchesProject && matchesType
+    })
+    .sort((a, b) => new Date(b.timestamp).getTime() - new Date(a.timestamp).getTime())
+})
+
+const totalItems = derived(() => filteredLogs().length)
+const totalPages = derived(() => Math.max(1, Math.ceil(totalItems() / itemsPerPageNum())))
+
+const paginatedLogs = derived(() => {
+  const start = (currentPage() - 1) * itemsPerPageNum()
+  return filteredLogs().slice(start, start + itemsPerPageNum())
+})
+
+const visiblePages = derived(() => {
+  const max = Math.min(5, totalPages())
+  return Array.from({ length: max }, (_, i) => i + 1)
+})
+
+const selectedLog = derived(() => logs().find(l => l.id === selectedLogId()) ?? null)
+
+const selectedProjectName = derived(() => {
+  const log = selectedLog()
+  if (!log?.project)
+    return 'N/A'
+  return projectsList.find(p => p.id === log.project)?.name ?? log.project
+})
+
+const selectedMetadataJson = derived(() => {
+  const log = selectedLog()
+  return log ? JSON.stringify(log.metadata, null, 2) : ''
+})
+
+const hasActiveFilters = derived(() =>
+  searchTerm() !== '' || sourceFilter() !== 'all' || logTypeFilter() !== 'all' || selectedProjects().length > 0,
+)
+
+effect(() => {
+  if (currentPage() > totalPages())
+    currentPage.set(totalPages())
+})
+
+effect(() => {
+  filteredLogs()
+  currentPage.set(1)
+})
+
+function formatTime(ts: string) {
+  return new Date(ts).toLocaleTimeString()
+}
+
+function formatDateTime(ts: string | undefined) {
+  return ts ? new Date(ts).toLocaleString() : ''
+}
+
+function projectName(id: string | undefined) {
+  if (!id)
+    return ''
+  return projectsList.find(p => p.id === id)?.name ?? id
+}
+
+function isProjectSelected(id: string) {
+  return selectedProjects().includes(id)
+}
+
+function toggleProject(id: string) {
+  const current = selectedProjects()
+  selectedProjects.set(current.includes(id) ? current.filter(p => p !== id) : [...current, id])
+}
+
+function projectButtonClassFor(id: string) {
+  const base = 'inline-flex items-center px-3 py-1 font-medium text-sm rounded-full transition-colors'
+  const palette = projectPalette(id)
+  if (selectedProjects().includes(id))
+    return `${base} ${palette.bg} ${palette.text} ring-2 ${palette.ring}`
+  return `${base} bg-gray-100 dark:bg-neutral-700 text-gray-700 dark:text-neutral-200 hover:bg-gray-200 dark:hover:bg-neutral-600`
+}
+
+function projectBadgeClassFor(id: string | undefined) {
+  const base = 'inline-flex px-2 font-semibold leading-5 text-xs rounded-full'
+  if (!id)
+    return base
+  const palette = projectPalette(id)
+  return `${base} ${palette.bg} ${palette.text}`
+}
+
+function projectPalette(id: string) {
+  switch (id) {
+    case 'stacks': return { bg: 'bg-blue-100 dark:bg-blue-900', text: 'text-blue-800 dark:text-blue-200', ring: 'ring-blue-500' }
+    case 'rpx': return { bg: 'bg-purple-100 dark:bg-purple-900', text: 'text-purple-800 dark:text-purple-200', ring: 'ring-purple-500' }
+    case 'tlsx': return { bg: 'bg-green-100 dark:bg-green-900', text: 'text-green-800 dark:text-green-200', ring: 'ring-green-500' }
+    case 'dtsx': return { bg: 'bg-indigo-100 dark:bg-indigo-900', text: 'text-indigo-800 dark:text-indigo-200', ring: 'ring-indigo-500' }
+    case 'ts-collect': return { bg: 'bg-rose-100 dark:bg-rose-900', text: 'text-rose-800 dark:text-rose-200', ring: 'ring-rose-500' }
+    case 'vite-plugin-local': return { bg: 'bg-amber-100 dark:bg-amber-900', text: 'text-amber-800 dark:text-amber-200', ring: 'ring-amber-500' }
+    default: return { bg: 'bg-gray-100 dark:bg-neutral-700', text: 'text-gray-800 dark:text-neutral-200', ring: 'ring-gray-500' }
+  }
+}
+
+function logRowClass(log: Log) {
+  const base = 'hover:bg-gray-50 dark:hover:bg-neutral-700/50 cursor-pointer'
+  switch (log.type) {
+    case 'error': return `${base} bg-red-50/50 dark:bg-red-900/10`
+    case 'success': return `${base} bg-green-50/50 dark:bg-green-900/10`
+    case 'warning': return `${base} bg-amber-50/50 dark:bg-amber-900/10`
+    case 'mail': return `${base} bg-purple-50/50 dark:bg-purple-900/10`
+    default: return base
+  }
+}
+
+function logIconFor(type: Log['type']) {
+  switch (type) {
+    case 'error': return 'i-hugeicons-alert-02'
+    case 'info': return 'i-hugeicons-information-circle'
+    case 'success': return 'i-hugeicons-checkmark-circle-02'
+    case 'warning': return 'i-hugeicons-alert-02'
+    case 'mail': return 'i-hugeicons-mail-01'
+    default: return 'i-hugeicons-computer-terminal-01'
+  }
+}
+
+function logIconColorFor(type: Log['type']) {
+  switch (type) {
+    case 'error': return 'text-red-500'
+    case 'info': return 'text-blue-500'
+    case 'success': return 'text-green-500'
+    case 'warning': return 'text-amber-500'
+    case 'mail': return 'text-purple-500'
+    default: return 'text-gray-500'
+  }
+}
+
+function logIconClass(type: Log['type']) {
+  return `h-5 w-5 ${logIconFor(type)} ${logIconColorFor(type)}`
+}
+
+const selectedLogIconClass = derived(() => {
+  const log = selectedLog()
+  if (!log)
+    return ''
+  return `h-5 w-5 ${logIconFor(log.type)} ${logIconColorFor(log.type)}`
+})
+
+const autoRefreshClass = derived(() => {
+  const base = 'flex gap-2 items-center px-4 py-2 rounded-lg'
+  return autoRefresh()
+    ? `${base} bg-blue-100 text-blue-700 dark:bg-blue-900 dark:text-blue-200`
+    : `${base} bg-gray-100 text-gray-700 dark:bg-neutral-700 dark:text-neutral-200`
+})
+
+function pageButtonClass(page: number) {
+  const base = 'px-3 py-1 text-sm border border-gray-300 dark:border-neutral-600 rounded-md'
+  return page === currentPage()
+    ? `${base} bg-blue-600 text-white border-blue-600`
+    : `${base} hover:bg-gray-100 dark:hover:bg-neutral-700 text-gray-900 dark:text-neutral-100`
+}
+
+function selectLog(id: string) {
+  selectedLogId.set(id)
+}
+
+function closeModal() {
+  selectedLogId.set(null)
+}
+
+function goToPage(p: number) {
+  if (p >= 1 && p <= totalPages())
+    currentPage.set(p)
+}
+
+function nextPage() {
+  if (currentPage() < totalPages())
+    currentPage.set(currentPage() + 1)
+}
+
+function prevPage() {
+  if (currentPage() > 1)
+    currentPage.set(currentPage() - 1)
+}
+
+function resetFilters() {
+  searchTerm.set('')
+  sourceFilter.set('all')
+  logTypeFilter.set('all')
+  selectedProjects.set([])
+  currentPage.set(1)
+}
+
+let refreshHandle: ReturnType<typeof setInterval> | null = null
+
+function startAutoRefresh() {
+  if (refreshHandle)
+    return
+  refreshHandle = setInterval(() => {
+    // placeholder: in real usage this would refetch logs
+  }, 2000)
+}
+
+function stopAutoRefresh() {
+  if (refreshHandle) {
+    clearInterval(refreshHandle)
+    refreshHandle = null
+  }
+}
+
+function toggleAutoRefresh() {
+  const next = !autoRefresh()
+  autoRefresh.set(next)
+  if (next)
+    startAutoRefresh()
+  else
+    stopAutoRefresh()
+}
+
+function buildVolumeData() {
+  const labels = Array.from({ length: 24 }, (_, i) => `${i}:00`)
+  return {
+    labels,
+    datasets: [
+      { label: 'Info', data: Array.from({ length: 24 }, () => Math.floor(Math.random() * 100) + 50), borderColor: 'rgb(59, 130, 246)', backgroundColor: 'rgba(59, 130, 246, 0.1)', fill: true },
+      { label: 'Error', data: Array.from({ length: 24 }, () => Math.floor(Math.random() * 20)), borderColor: 'rgb(239, 68, 68)', backgroundColor: 'rgba(239, 68, 68, 0.1)', fill: true },
+      { label: 'Success', data: Array.from({ length: 24 }, () => Math.floor(Math.random() * 40) + 20), borderColor: 'rgb(16, 185, 129)', backgroundColor: 'rgba(16, 185, 129, 0.1)', fill: true },
+      { label: 'Mail', data: Array.from({ length: 24 }, () => Math.floor(Math.random() * 60) + 30), borderColor: 'rgb(139, 92, 246)', backgroundColor: 'rgba(139, 92, 246, 0.1)', fill: true },
+      { label: 'Warning', data: Array.from({ length: 24 }, () => Math.floor(Math.random() * 15) + 5), borderColor: 'rgb(245, 158, 11)', backgroundColor: 'rgba(245, 158, 11, 0.1)', fill: true },
+    ],
+  }
+}
+
+const chartOptions = {
+  responsive: true,
+  maintainAspectRatio: false,
+  scales: {
+    y: { beginAtZero: true, grid: { color: 'rgba(200, 200, 200, 0.1)' }, ticks: { color: 'rgb(156, 163, 175)', font: { family: "'JetBrains Mono', monospace" } } },
+    x: { grid: { display: false }, ticks: { color: 'rgb(156, 163, 175)', font: { family: "'JetBrains Mono', monospace" } } },
+  },
+  plugins: {
+    legend: { display: true, position: 'top', align: 'end', labels: { color: 'rgb(156, 163, 175)', font: { family: "'JetBrains Mono', monospace" }, boxWidth: 12, padding: 15 } },
+    tooltip: { mode: 'index', intersect: false },
+  },
+  elements: { line: { tension: 0.4 } },
+}
+
+let chartHandle: ChartLike | null = null
+
+onMount(async () => {
+  const { Chart, registerables } = await import('@stacksjs/charts')
+  Chart.register(...registerables)
+  const Ctor = Chart as unknown as ChartCtor
+  const handle = useChart({ Chart: Ctor, id: 'logs_volume_chart', type: 'line', data: buildVolumeData(), options: chartOptions })
+  chartHandle = handle.instance as ChartLike | null
+  if (autoRefresh())
+    startAutoRefresh()
+})
+
+onDestroy(() => {
+  stopAutoRefresh()
+  chartHandle?.destroy()
+  chartHandle = null
+})
+</script>
+
+@endsection