@stacksjs/defaults 0.70.207 → 0.70.208

package/views/dashboard/jobs/[id].stx

@@ -0,0 +1,430 @@
+@extends('layouts/default')
+
+@section('content')
+<div class="py-4 lg:py-8 min-h-screen dark:bg-neutral-800">
+  <div class="px-4 sm:px-6 lg:px-8">
+    <div class="mb-8">
+      <div class="flex items-center">
+        <button type="button" class="inline-flex items-center text-gray-500 text-sm dark:text-neutral-400 hover:text-gray-700 dark:hover:text-gray-300" @click="goBack()">
+          <div class="mr-1 h-5 w-5 i-hugeicons-arrow-left"></div>
+          Back
+        </button>
+        <h1 class="ml-4 font-semibold leading-6 text-base text-gray-900 dark:text-neutral-100">Job Details #{{ jobId() }}</h1>
+      </div>
+    </div>
+
+    <div :show="isLoading" class="flex justify-center py-12">
+      <div class="h-8 w-8 border-b-2 border-blue-500 rounded-full animate-spin"></div>
+    </div>
+
+    <div :show="notFound" class="py-12 text-center">
+      <div class="mx-auto h-12 w-12 text-gray-400 i-hugeicons-exclamation-circle"></div>
+      <h3 class="mt-2 font-semibold text-gray-900 text-sm dark:text-neutral-100">Job not found</h3>
+      <p class="mt-1 text-gray-500 text-sm dark:text-neutral-400">The job you're looking for doesn't exist or has been deleted.</p>
+    </div>
+
+    <div :show="hasJob" class="grid gap-6 grid-cols-1 lg:grid-cols-2">
+      <div class="bg-white dark:bg-neutral-700 rounded-lg shadow">
+        <div class="px-4 py-5 sm:p-6">
+          <h3 class="mb-4 font-semibold leading-6 text-base text-gray-900 dark:text-neutral-100">Overview</h3>
+
+          <dl class="grid gap-4 grid-cols-1">
+            <div class="grid gap-4 grid-cols-3">
+              <dt class="font-medium text-gray-500 text-sm dark:text-neutral-400">Name</dt>
+              <dd class="col-span-2 font-mono text-gray-900 text-sm dark:text-neutral-100">{{ jobName() }}</dd>
+            </div>
+            <div class="grid gap-4 grid-cols-3">
+              <dt class="font-medium text-gray-500 text-sm dark:text-neutral-400">Connection</dt>
+              <dd class="col-span-2 capitalize text-gray-900 text-sm dark:text-neutral-100">{{ jobConnection() }}</dd>
+            </div>
+            <div class="grid gap-4 grid-cols-3">
+              <dt class="font-medium text-gray-500 text-sm dark:text-neutral-400">Queue</dt>
+              <dd class="col-span-2 capitalize text-gray-900 text-sm dark:text-neutral-100">{{ jobQueue() }}</dd>
+            </div>
+            <div class="grid gap-4 grid-cols-3">
+              <dt class="font-medium text-gray-500 text-sm dark:text-neutral-400">Status</dt>
+              <dd class="col-span-2">
+                <span class="{{ getJobStatusColor(jobStatus()) }} inline-flex items-center px-2 py-1 font-medium text-xs ring-1 ring-inset rounded-md">{{ jobStatus() }}</span>
+              </dd>
+            </div>
+            <div class="grid gap-4 grid-cols-3">
+              <dt class="font-medium text-gray-500 text-sm dark:text-neutral-400">Attempts</dt>
+              <dd class="col-span-2 text-gray-900 text-sm dark:text-neutral-100">{{ jobAttempts() }} / {{ jobMaxTries() }}</dd>
+            </div>
+            <div class="grid gap-4 grid-cols-3">
+              <dt class="font-medium text-gray-500 text-sm dark:text-neutral-400">Timeout</dt>
+              <dd class="col-span-2 font-mono text-gray-900 text-sm dark:text-neutral-100">{{ jobTimeout() }}s</dd>
+            </div>
+            <div class="grid gap-4 grid-cols-3">
+              <dt class="font-medium text-gray-500 text-sm dark:text-neutral-400">Started At</dt>
+              <dd class="col-span-2 text-gray-900 text-sm dark:text-neutral-100">{{ jobStartedAt() }}</dd>
+            </div>
+            <div class="grid gap-4 grid-cols-3">
+              <dt class="font-medium text-gray-500 text-sm dark:text-neutral-400">Finished At</dt>
+              <dd class="col-span-2 text-gray-900 text-sm dark:text-neutral-100">{{ jobFinishedAt() }}</dd>
+            </div>
+            <div class="grid gap-4 grid-cols-3">
+              <dt class="font-medium text-gray-500 text-sm dark:text-neutral-400">Runtime</dt>
+              <dd class="col-span-2 font-mono text-gray-900 text-sm dark:text-neutral-100">{{ jobRuntime() }}</dd>
+            </div>
+            <div class="grid gap-4 grid-cols-3">
+              <dt class="font-medium text-gray-500 text-sm dark:text-neutral-400">Worker</dt>
+              <dd class="col-span-2 font-mono text-gray-900 text-sm dark:text-neutral-100">{{ jobWorker() }}</dd>
+            </div>
+            <div class="grid gap-4 grid-cols-3">
+              <dt class="font-medium text-gray-500 text-sm dark:text-neutral-400">Tags</dt>
+              <dd class="col-span-2 text-gray-900 text-sm dark:text-neutral-100">
+                <div class="flex flex-wrap gap-2">
+                  <template :for="tag in jobTags">
+                    <span class="inline-flex items-center px-2 py-1 font-medium text-gray-600 text-xs dark:text-neutral-300 bg-gray-50 dark:bg-neutral-600 ring-1 ring-gray-500/10 ring-inset rounded-md">{{ tag }}</span>
+                  </template>
+                </div>
+              </dd>
+            </div>
+          </dl>
+        </div>
+      </div>
+
+      <div class="space-y-6">
+        <div :show="hasChain" class="bg-white dark:bg-neutral-700 rounded-lg shadow">
+          <div class="px-4 py-5 sm:p-6">
+            <h3 class="mb-6 font-semibold leading-6 text-base text-gray-900 dark:text-neutral-100">Job Chain</h3>
+            <div class="relative">
+              <div class="absolute bottom-4 left-4 top-4 w-px bg-gray-200 dark:bg-neutral-600"></div>
+              <ul class="relative space-y-6">
+                <template :for="(chainJob, index) in jobChain">
+                  <li class="relative pl-10">
+                    <div class="flex absolute left-0 top-1/2 items-center justify-center h-8 w-8 bg-white dark:bg-neutral-700 border-2 border-gray-200 rounded-full dark:border-neutral-600 -translate-y-1/2">
+                      <span class="font-medium text-gray-500 text-sm dark:text-neutral-400">{{ index + 1 }}</span>
+                    </div>
+                    <div class="py-2 font-mono text-gray-900 text-sm dark:text-neutral-100">{{ chainJob.replace('App\\Jobs\\', '') }}</div>
+                  </li>
+                </template>
+              </ul>
+            </div>
+          </div>
+        </div>
+
+        <div :show="hasLogs" class="bg-white dark:bg-neutral-700 rounded-lg shadow">
+          <div class="px-4 py-5 sm:p-6">
+            <h3 class="mb-4 font-semibold leading-6 text-base text-gray-900 dark:text-neutral-100">Logs</h3>
+            <div class="space-y-2">
+              <template :for="log in jobLogs">
+                <div class="flex gap-2 items-start font-mono text-sm">
+                  <span class="shrink-0 text-gray-500 dark:text-neutral-400">{{ log.timestamp }}</span>
+                  <span class="shrink-0 {{ getLogLevelColor(log.level) }}">[{{ log.level }}]</span>
+                  <span class="text-gray-900 dark:text-neutral-100">{{ log.message }}</span>
+                </div>
+              </template>
+            </div>
+          </div>
+        </div>
+
+        <div class="bg-white dark:bg-neutral-700 rounded-lg shadow">
+          <div class="px-4 py-5 sm:p-6">
+            <h3 class="mb-6 font-semibold leading-6 text-base text-gray-900 dark:text-neutral-100">Performance</h3>
+
+            <dl class="grid gap-8 grid-cols-1">
+              <div>
+                <dt class="flex items-center justify-between mb-2 font-medium text-gray-500 text-sm dark:text-neutral-400">
+                  <span>Memory Usage</span>
+                  <span class="font-mono">{{ memoryUsageLabel() }}</span>
+                </dt>
+                <dd>
+                  <div class="overflow-hidden h-2.5 bg-gray-100 dark:bg-neutral-600 rounded-full">
+                    <div class="h-full bg-blue-500 rounded-full duration-300 transition-all" style="width: {{ memoryPercent() }}%"></div>
+                  </div>
+                </dd>
+              </div>
+
+              <div>
+                <dt class="flex items-center justify-between mb-2 font-medium text-gray-500 text-sm dark:text-neutral-400">
+                  <span>CPU Usage</span>
+                  <span class="font-mono">{{ cpuUsageLabel() }}</span>
+                </dt>
+                <dd>
+                  <div class="overflow-hidden h-2.5 bg-gray-100 dark:bg-neutral-600 rounded-full">
+                    <div class="h-full bg-green-500 rounded-full duration-300 transition-all" style="width: {{ cpuPercent() }}%"></div>
+                  </div>
+                </dd>
+              </div>
+            </dl>
+          </div>
+        </div>
+      </div>
+
+      <div class="lg:col-span-2 bg-white dark:bg-neutral-700 rounded-lg shadow">
+        <div class="px-4 py-5 sm:p-6">
+          <div class="flex items-center justify-between mb-4">
+            <h3 class="font-semibold leading-6 text-base text-gray-900 dark:text-neutral-100">Payload</h3>
+            <button type="button" class="text-blue-600 text-sm dark:text-blue-400 hover:text-blue-500 dark:hover:text-blue-300" @click="togglePayload()">{{ payloadToggleLabel() }} Raw</button>
+          </div>
+
+          <div :show="showPayload" class="mt-4">
+            <pre class="overflow-x-auto p-4 font-mono text-gray-900 text-sm dark:text-neutral-100 bg-gray-50 dark:bg-neutral-600 rounded-lg">{{ payloadJson() }}</pre>
+          </div>
+          <div :show="hidePayload" class="mt-4">
+            <dl class="grid gap-4 grid-cols-1 sm:grid-cols-2">
+              <template :for="entry in payloadEntries">
+                <div class="grid gap-4 grid-cols-3">
+                  <dt class="font-medium text-gray-500 text-sm dark:text-neutral-400">{{ entry.key }}</dt>
+                  <dd class="col-span-2 font-mono text-gray-900 text-sm dark:text-neutral-100">{{ entry.value }}</dd>
+                </div>
+              </template>
+            </dl>
+          </div>
+        </div>
+      </div>
+
+      <div :show="isFailed" class="lg:col-span-2 bg-white dark:bg-neutral-700 rounded-lg shadow">
+        <div class="px-4 py-5 sm:p-6">
+          <div class="flex items-center justify-between mb-4">
+            <h3 class="font-semibold leading-6 text-base text-gray-900 dark:text-neutral-100">Error Information</h3>
+            <div class="flex items-center space-x-3">
+              <button type="button" class="text-blue-600 text-sm dark:text-blue-400 hover:text-blue-500 dark:hover:text-blue-300" @click="toggleTrace()">{{ traceToggleLabel() }} Full Trace</button>
+              <button type="button" class="inline-flex items-center px-3 py-2 font-semibold text-sm text-white bg-blue-600 hover:bg-blue-500 rounded-md focus-visible:outline focus-visible:outline-2 focus-visible:outline-blue-600 focus-visible:outline-offset-2 shadow-sm" @click="handleRetry()">Retry Job</button>
+            </div>
+          </div>
+
+          <div class="mt-4">
+            <h4 class="font-medium text-gray-500 text-sm dark:text-neutral-400">Error Message</h4>
+            <p class="mt-1 text-red-600 text-sm dark:text-red-400">{{ exceptionMessage() }}</p>
+
+            <div class="flex items-center mt-4 text-gray-500 text-sm dark:text-neutral-400">
+              <button type="button" class="font-mono hover:text-blue-600 dark:hover:text-blue-400" @click="openExceptionFile()">{{ exceptionFileLine() }}</button>
+            </div>
+
+            <h4 class="mt-4 font-medium text-gray-500 text-sm dark:text-neutral-400">Stack Trace</h4>
+            <div class="overflow-hidden mt-1 bg-gray-50 dark:bg-neutral-600 rounded-lg">
+              <div :show="hideTrace" class="p-4">
+                <div class="font-mono text-red-600 text-sm dark:text-red-400 hover:text-blue-600 dark:hover:text-blue-400 cursor-pointer" @click="openTraceLine(0)">{{ firstTraceLine() }}</div>
+              </div>
+              <div :show="showTrace" class="divide-gray-200 divide-y dark:divide-neutral-500">
+                <template :for="(line, index) in exceptionTrace">
+                  <div class="p-4 font-mono text-red-600 text-sm dark:text-red-400 hover:text-blue-600 dark:hover:text-blue-400 cursor-pointer" @click="openTraceLine({{ index }})">{{ line }}</div>
+                </template>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+
+<script client>
+interface JobLogEntry {
+  timestamp: string
+  level: 'info' | 'warning' | 'error'
+  message: string
+}
+
+interface JobException {
+  message: string
+  trace: string[]
+  file: string
+  line: number
+}
+
+interface JobDetails {
+  id: string
+  name: string
+  queue: string
+  connection: string
+  status: 'queued' | 'processing' | 'failed' | 'completed'
+  attempts: number
+  max_tries: number
+  timeout: number
+  runtime?: number
+  started_at?: string
+  finished_at?: string
+  error?: string
+  worker: string
+  memory_usage: number
+  cpu_usage: number
+  payload: Record<string, unknown>
+  tags: string[]
+  chain?: string[]
+  exception?: JobException
+  logs?: JobLogEntry[]
+}
+
+const route = useRoute()
+const job = state<JobDetails | null>(null)
+const isLoading = state(true)
+const showPayload = state(false)
+const showTrace = state(false)
+
+const hasJob = derived(() => !isLoading() && job() !== null)
+const notFound = derived(() => !isLoading() && job() === null)
+const isFailed = derived(() => job()?.status === 'failed')
+const hasChain = derived(() => (job()?.chain?.length ?? 0) > 0)
+const hasLogs = derived(() => (job()?.logs?.length ?? 0) > 0)
+const hidePayload = derived(() => !showPayload())
+const hideTrace = derived(() => !showTrace())
+
+function jobId(): string { return (route.params.id as string) ?? '' }
+function jobName(): string { return job()?.name ?? '' }
+function jobConnection(): string { return job()?.connection ?? '' }
+function jobQueue(): string { return job()?.queue ?? '' }
+function jobStatus(): string { return job()?.status ?? '' }
+function jobAttempts(): number { return job()?.attempts ?? 0 }
+function jobMaxTries(): number { return job()?.max_tries ?? 0 }
+function jobTimeout(): number { return job()?.timeout ?? 0 }
+function jobStartedAt(): string { return job()?.started_at ?? '' }
+function jobFinishedAt(): string { return job()?.finished_at ?? '-' }
+function jobRuntime(): string {
+  const r = job()?.runtime
+  return r !== undefined ? `${r.toFixed(1)}s` : '-'
+}
+function jobWorker(): string { return job()?.worker ?? '' }
+function jobTags(): string[] { return job()?.tags ?? [] }
+function jobChain(): string[] { return job()?.chain ?? [] }
+function jobLogs(): JobLogEntry[] { return job()?.logs ?? [] }
+function exceptionMessage(): string { return job()?.exception?.message ?? '' }
+function exceptionFileLine(): string {
+  const ex = job()?.exception
+  return ex ? `${ex.file}:${ex.line}` : ''
+}
+function exceptionTrace(): string[] { return job()?.exception?.trace ?? [] }
+function firstTraceLine(): string { return exceptionTrace()[0] ?? '' }
+
+function memoryUsageLabel(): string { return formatBytes(job()?.memory_usage ?? 0) }
+function memoryPercent(): number {
+  const mem = job()?.memory_usage ?? 0
+  return Math.min(100, (mem / (512 * 1024 * 1024)) * 100)
+}
+function cpuUsageLabel(): string { return `${(job()?.cpu_usage ?? 0).toFixed(1)}%` }
+function cpuPercent(): number { return Math.min(100, job()?.cpu_usage ?? 0) }
+
+function payloadJson(): string { return JSON.stringify(job()?.payload ?? {}, null, 2) }
+function payloadEntries(): Array<{ key: string, value: string }> {
+  const p = job()?.payload ?? {}
+  return Object.entries(p).map(([key, value]) => ({ key, value: String(value) }))
+}
+
+function payloadToggleLabel(): string { return showPayload() ? 'Hide' : 'Show' }
+function traceToggleLabel(): string { return showTrace() ? 'Hide' : 'Show' }
+
+const jobStatusColors: Record<string, string> = {
+  queued: 'text-blue-700 dark:text-blue-300 bg-blue-50 dark:bg-blue-900/50 ring-blue-600/20',
+  processing: 'text-yellow-700 dark:text-yellow-300 bg-yellow-50 dark:bg-yellow-900/50 ring-yellow-600/20',
+  completed: 'text-green-700 dark:text-green-300 bg-green-50 dark:bg-green-900/50 ring-green-600/20',
+  failed: 'text-red-700 dark:text-red-300 bg-red-50 dark:bg-red-900/50 ring-red-600/20',
+}
+
+function getJobStatusColor(status: string): string {
+  return jobStatusColors[status] || 'text-gray-700 dark:text-neutral-300 bg-gray-50 dark:bg-neutral-900/50 ring-gray-600/20'
+}
+
+function getLogLevelColor(level?: string): string {
+  if (!level)
+    return 'text-gray-600 dark:text-neutral-400'
+  switch (level) {
+    case 'error': return 'text-red-600 dark:text-red-400'
+    case 'warning': return 'text-yellow-600 dark:text-yellow-400'
+    default: return 'text-gray-600 dark:text-neutral-400'
+  }
+}
+
+function formatBytes(bytes: number): string {
+  if (bytes === 0)
+    return '0 B'
+  const k = 1024
+  const sizes = ['B', 'KB', 'MB', 'GB']
+  const i = Math.floor(Math.log(bytes) / Math.log(k))
+  return `${Number.parseFloat((bytes / k ** i).toFixed(1))} ${sizes[i]}`
+}
+
+function goBack(): void {
+  if (typeof window !== 'undefined' && window.history.length > 1)
+    window.history.back()
+  else
+    navigate('/jobs')
+}
+
+function togglePayload(): void {
+  showPayload.update(v => !v)
+}
+
+function toggleTrace(): void {
+  showTrace.update(v => !v)
+}
+
+function handleRetry(): void {
+  // TODO: implement retry via queue API
+}
+
+function openTraceLine(index: number): void {
+  const line = exceptionTrace()[index]
+  if (line)
+    openFile(line)
+}
+
+function openExceptionFile(): void {
+  const ex = job()?.exception
+  if (ex)
+    openFile(ex.file)
+}
+
+function openFile(file: string): void {
+  if (!file)
+    return
+  const match = file.match(/\(([^:]+):(\d+)/)
+  void (match ? match[1] : file)
+  // TODO: implement editor integration via API
+}
+
+onMount(async () => {
+  isLoading.set(true)
+  try {
+    await new Promise(resolve => setTimeout(resolve, 500))
+
+    job.set({
+      id: route.params.id as string,
+      name: 'ProcessPayment',
+      queue: 'high',
+      connection: 'redis',
+      status: 'failed',
+      attempts: 3,
+      max_tries: 3,
+      timeout: 60,
+      runtime: 5.2,
+      started_at: '2024-03-14 10:15:23',
+      finished_at: '2024-03-14 10:15:28',
+      error: 'Connection timeout at ProcessPayment.handle (/app/jobs/ProcessPayment.ts:25:7)',
+      worker: 'worker-1',
+      memory_usage: 128.5 * 1024 * 1024,
+      cpu_usage: 23.4,
+      tags: ['payment', 'order:12345', 'user:1234'],
+      chain: ['App\\Jobs\\ProcessPayment', 'App\\Jobs\\SendPaymentConfirmation', 'App\\Jobs\\UpdateOrderStatus'],
+      payload: { order_id: '12345', amount: 99.99, currency: 'USD' },
+      exception: {
+        message: 'Connection timeout',
+        file: '/app/jobs/ProcessPayment.ts',
+        line: 25,
+        trace: [
+          '#0 /app/jobs/ProcessPayment.ts(25): ProcessPayment->handle()',
+          '#1 /vendor/laravel/framework/src/Illuminate/Queue/CallQueuedHandler.php(59): ProcessPayment->handle()',
+          '#2 /vendor/laravel/framework/src/Illuminate/Queue/Jobs/Job.php(88): CallQueuedHandler->call()',
+        ],
+      },
+      logs: [
+        { timestamp: '2024-03-14 10:15:23', level: 'info', message: 'Starting payment processing' },
+        { timestamp: '2024-03-14 10:15:24', level: 'info', message: 'Validating payment details' },
+        { timestamp: '2024-03-14 10:15:25', level: 'warning', message: 'Slow response from payment gateway' },
+        { timestamp: '2024-03-14 10:15:28', level: 'error', message: 'Connection timeout while processing payment' },
+      ],
+    })
+  }
+  catch (error) {
+    // eslint-disable-next-line no-console
+    console.error('Failed to load job details:', error)
+  }
+  finally {
+    isLoading.set(false)
+  }
+})
+</script>
+
+@endsection

package/views/dashboard/jobs/history.stx

@@ -0,0 +1,222 @@
+@extends('layouts/default')
+
+@section('content')
+@title('Dashboard - Jobs History')
+<div class="py-4 lg:py-8 min-h-screen dark:bg-neutral-800">
+  <div class="px-4 sm:px-6 lg:px-8">
+    <div class="sm:flex sm:items-center">
+      <div class="sm:flex-auto">
+        <h1 class="font-semibold leading-6 text-base text-gray-900 dark:text-neutral-100">Jobs History</h1>
+        <p class="mt-2 text-gray-700 text-sm dark:text-neutral-300">A complete history of all jobs processed by the system</p>
+      </div>
+    </div>
+
+    <div class="flex flex-col sm:flex-row sm:items-center mt-4 space-y-4 sm:space-x-4 sm:space-y-0">
+      <div class="flex-1 min-w-0">
+        <label for="search" class="sr-only">Search jobs</label>
+        <div class="relative rounded-md shadow-sm">
+          <div class="flex absolute inset-y-0 left-0 items-center pl-3 pointer-events-none">
+            <div class="h-5 w-5 text-gray-400 i-hugeicons-search-01"></div>
+          </div>
+          <input x-model="searchQuery" type="search" name="search" id="search" placeholder="Search jobs..." class="block pl-10 py-1.5 w-full text-gray-900 sm:leading-6 sm:text-sm dark:text-neutral-100 placeholder:text-gray-400 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 focus:ring-inset" />
+        </div>
+      </div>
+
+      <div class="sm:flex-shrink-0">
+        <select x-model="selectedQueue" class="pl-3 pr-8 py-1.5 h-9 w-full text-gray-900 sm:leading-6 sm:text-sm dark:text-neutral-100 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="all">All Queue</option>
+          <option value="default">Default Queue</option>
+          <option value="high">High Queue</option>
+          <option value="low">Low Queue</option>
+        </select>
+      </div>
+
+      <div class="sm:flex-shrink-0">
+        <select x-model="selectedStatus" class="pl-3 pr-8 py-1.5 h-9 w-full text-gray-900 sm:leading-6 sm:text-sm dark:text-neutral-100 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="all">All</option>
+          <option value="queued">Queued</option>
+          <option value="processing">Processing</option>
+          <option value="completed">Completed</option>
+          <option value="failed">Failed</option>
+        </select>
+      </div>
+    </div>
+
+    <div class="flow-root mt-8">
+      <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 rounded-lg dark:ring-opacity-20 shadow">
+            <table class="min-w-full divide-gray-300 divide-y dark:divide-neutral-600">
+              <thead class="bg-gray-50 dark:bg-neutral-600">
+                <tr>
+                  <th scope="col" class="pl-4 pr-3 py-3.5 sm:pl-6 font-semibold text-gray-900 text-left text-sm dark:text-neutral-100">Job</th>
+                  <th scope="col" class="px-3 py-3.5 font-semibold text-gray-900 text-left text-sm dark:text-neutral-100">Queue</th>
+                  <th scope="col" class="px-3 py-3.5 font-semibold text-gray-900 text-left text-sm dark:text-neutral-100">Status</th>
+                  <th scope="col" class="px-3 py-3.5 font-semibold text-gray-900 text-left text-sm dark:text-neutral-100">Attempts</th>
+                  <th scope="col" class="px-3 py-3.5 font-semibold text-gray-900 text-left text-sm dark:text-neutral-100">Runtime</th>
+                  <th scope="col" class="px-3 py-3.5 font-semibold text-gray-900 text-right text-sm dark:text-neutral-100">Started</th>
+                  <th scope="col" class="relative pl-3 pr-4 py-3.5 sm:pr-6"><span class="sr-only">Actions</span></th>
+                </tr>
+              </thead>
+              <tbody class="bg-white dark:bg-neutral-700 divide-gray-200 divide-y dark:divide-neutral-600">
+                <tr :show="isLoading" class="animate-pulse">
+                  <td colspan="7" class="px-3 py-4 text-gray-500 text-sm dark:text-neutral-400">Loading jobs...</td>
+                </tr>
+                <tr :show="hasNoJobs" class="hover:bg-gray-50 dark:hover:bg-neutral-600/50">
+                  <td colspan="7" class="px-3 py-4 text-center text-gray-500 text-sm dark:text-neutral-400">No jobs found matching your criteria</td>
+                </tr>
+                <template :for="job in paginatedJobs">
+                  <tr class="hover:bg-gray-50 dark:hover:bg-neutral-600/50">
+                    <td class="pl-4 pr-3 py-4 sm:pl-6 text-sm whitespace-nowrap">
+                      <div class="font-medium text-gray-900 dark:text-neutral-100">{{ job.name }}</div>
+                      <div class="font-mono text-gray-500 text-xs dark:text-neutral-400">{{ job.id }}</div>
+                    </td>
+                    <td class="px-3 py-4 text-gray-500 text-sm whitespace-nowrap dark:text-neutral-400">{{ job.queue }}</td>
+                    <td class="px-3 py-4 text-sm whitespace-nowrap">
+                      <span class="{{ getJobStatusColor(job.status) }} inline-flex items-center px-2 py-1 font-medium text-xs ring-1 ring-inset rounded-md">{{ job.status }}</span>
+                    </td>
+                    <td class="px-3 py-4 text-gray-500 text-sm whitespace-nowrap dark:text-neutral-400">{{ job.attempts }}</td>
+                    <td class="px-3 py-4 font-mono text-gray-500 text-sm whitespace-nowrap dark:text-neutral-400">{{ job.runtime ? `${job.runtime.toFixed(1)}s` : '-' }}</td>
+                    <td class="px-3 py-4 text-gray-500 text-right text-sm whitespace-nowrap dark:text-neutral-400">{{ job.started_at }}</td>
+                    <td class="relative pl-3 pr-4 py-4 sm:pr-6 font-medium text-right text-sm whitespace-nowrap">
+                      <div class="flex items-center justify-end space-x-3">
+                        <StxLink to="/jobs/{{ job.id }}" class="text-blue-600 hover:text-blue-900 dark:hover:text-blue-400">View</StxLink>
+                        <button :show="{{ job.status === 'failed' ? 'true' : 'false' }}" type="button" class="text-blue-600 hover:text-blue-900 dark:hover:text-blue-400" @click="handleRetry('{{ job.id }}')">Retry</button>
+                      </div>
+                    </td>
+                  </tr>
+                </template>
+              </tbody>
+            </table>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div class="flex items-center justify-between mt-4">
+      <div class="flex items-center">
+        <p class="text-gray-700 text-sm dark:text-neutral-300">
+          Showing <span class="font-medium">{{ rangeStart() }}</span> to <span class="font-medium">{{ rangeEnd() }}</span> of <span class="font-medium">{{ totalFiltered() }}</span> results
+        </p>
+      </div>
+      <div class="flex items-center space-x-2">
+        <button type="button" class="inline-flex relative focus:z-10 items-center px-3 py-2 font-semibold text-gray-900 text-sm dark:text-neutral-100 bg-white dark:bg-neutral-600 hover:bg-gray-50 dark:hover:bg-neutral-500 ring-1 ring-gray-300 ring-inset rounded-md dark:ring-neutral-600 disabled:opacity-50" :disabled="isFirstPage" @click="previousPage()">Previous</button>
+        <button type="button" class="inline-flex relative focus:z-10 items-center px-3 py-2 font-semibold text-gray-900 text-sm dark:text-neutral-100 bg-white dark:bg-neutral-600 hover:bg-gray-50 dark:hover:bg-neutral-500 ring-1 ring-gray-300 ring-inset rounded-md dark:ring-neutral-600 disabled:opacity-50" :disabled="isLastPage" @click="nextPage()">Next</button>
+      </div>
+    </div>
+  </div>
+</div>
+
+<script client>
+interface JobHistoryEntry {
+  id: string
+  name: string
+  queue: string
+  status: 'queued' | 'processing' | 'failed' | 'completed'
+  attempts: number
+  runtime?: number
+  started_at?: string
+  finished_at?: string
+  error?: string
+  payload: unknown
+}
+
+const jobs = state<JobHistoryEntry[]>([])
+const isLoading = state(true)
+const currentPage = state(1)
+const perPage = state(25)
+const selectedQueue = state('all')
+const selectedStatus = state('all')
+const searchQuery = state('')
+
+const jobStatusColors: Record<string, string> = {
+  queued: 'text-blue-700 dark:text-blue-300 bg-blue-50 dark:bg-blue-900/50 ring-blue-600/20',
+  processing: 'text-yellow-700 dark:text-yellow-300 bg-yellow-50 dark:bg-yellow-900/50 ring-yellow-600/20',
+  completed: 'text-green-700 dark:text-green-300 bg-green-50 dark:bg-green-900/50 ring-green-600/20',
+  failed: 'text-red-700 dark:text-red-300 bg-red-50 dark:bg-red-900/50 ring-red-600/20',
+}
+
+function getJobStatusColor(status: string): string {
+  return jobStatusColors[status] || 'text-gray-700 dark:text-neutral-300 bg-gray-50 dark:bg-neutral-900/50 ring-gray-600/20'
+}
+
+const filteredJobs = derived(() => {
+  const list = jobs()
+  const q = searchQuery().toLowerCase()
+  const sq = selectedQueue()
+  const ss = selectedStatus()
+  return list.filter((job) => {
+    if (sq !== 'all' && job.queue !== sq)
+      return false
+    if (ss !== 'all' && job.status !== ss)
+      return false
+    if (q && !job.name.toLowerCase().includes(q))
+      return false
+    return true
+  })
+})
+
+const paginatedJobs = derived(() => {
+  const start = (currentPage() - 1) * perPage()
+  return filteredJobs().slice(start, start + perPage())
+})
+
+const totalPages = derived(() => Math.max(1, Math.ceil(filteredJobs().length / perPage())))
+const totalFiltered = derived(() => filteredJobs().length)
+const rangeStart = derived(() => totalFiltered() === 0 ? 0 : (currentPage() - 1) * perPage() + 1)
+const rangeEnd = derived(() => Math.min(currentPage() * perPage(), totalFiltered()))
+const hasNoJobs = derived(() => !isLoading() && paginatedJobs().length === 0)
+const isFirstPage = derived(() => currentPage() === 1)
+const isLastPage = derived(() => currentPage() >= totalPages())
+
+function previousPage(): void {
+  if (currentPage() > 1)
+    currentPage.update(p => p - 1)
+}
+
+function nextPage(): void {
+  if (currentPage() < totalPages())
+    currentPage.update(p => p + 1)
+}
+
+async function handleRetry(jobId: string): Promise<void> {
+  try {
+    const baseUrl = `http://localhost:${(globalThis as { process?: { env?: { PORT_API?: string } } }).process?.env?.PORT_API || '3008'}`
+    const response = await fetch(`${baseUrl}/jobs/${jobId}/retry`, {
+      method: 'POST',
+      headers: { Accept: 'application/json', 'Content-Type': 'application/json' },
+    })
+    if (response.ok) {
+      jobs.set(jobs().map(j => j.id === jobId ? { ...j, status: 'queued', attempts: (j.attempts || 0) + 1 } : j))
+    }
+  }
+  catch (e) {
+    // eslint-disable-next-line no-console
+    console.error('Failed to retry job:', e)
+  }
+}
+
+onMount(async () => {
+  await new Promise(resolve => setTimeout(resolve, 1000))
+
+  const jobNames = ['ProcessPayment', 'SendWelcomeEmail', 'GenerateReport', 'SyncInventory']
+  const queueNames = ['default', 'high', 'low']
+  const statusTypes: Array<JobHistoryEntry['status']> = ['queued', 'processing', 'completed', 'failed']
+  const randomItem = <T>(arr: readonly T[]): T => arr[Math.floor(Math.random() * arr.length)] as T
+
+  jobs.set(Array.from({ length: 100 }, (_, i) => ({
+    id: `${i + 1}`,
+    name: randomItem(jobNames),
+    queue: randomItem(queueNames),
+    status: randomItem(statusTypes),
+    attempts: Math.floor(Math.random() * 3) + 1,
+    runtime: Math.random() * 10,
+    started_at: new Date(Date.now() - Math.random() * 86400000).toISOString(),
+    finished_at: new Date(Date.now() - Math.random() * 3600000).toISOString(),
+    payload: { data: 'sample' },
+  })))
+  isLoading.set(false)
+})
+</script>
+
+@endsection