chore: wip

Author: glennmichael123

packages/dashboard/build.ts

@@ -0,0 +1,14 @@
+import plugin from 'bun-plugin-dtsx'
+
+await Bun.build({
+  entrypoints: ['./src/index.ts'],
+  outdir: './dist',
+  target: 'bun',
+  format: 'esm',
+  splitting: true,
+  sourcemap: 'external',
+  minify: false,
+  plugins: [plugin()],
+})
+
+console.log('Build complete!')

packages/dashboard/crosswind.config.ts

@@ -0,0 +1,9 @@
+export default {
+  content: [
+    './src/**/*.stx',
+  ],
+  output: '',
+  minify: false,
+  preflight: true,
+  cssVariables: true,
+}

packages/dashboard/package.json

@@ -0,0 +1,57 @@
+{
+  "name": "@stacksjs/bun-queue-dashboard",
+  "type": "module",
+  "version": "0.1.0",
+  "description": "A real-time monitoring dashboard for bun-queue, built with stx.",
+  "author": "Chris Breuer <chris@stacksjs.org>",
+  "license": "MIT",
+  "homepage": "https://github.com/stacksjs/bun-queue",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/stacksjs/bun-queue.git"
+  },
+  "bugs": {
+    "url": "https://github.com/stacksjs/bun-queue/issues"
+  },
+  "keywords": [
+    "bun-queue",
+    "dashboard",
+    "monitoring",
+    "stx",
+    "redis",
+    "job-queue"
+  ],
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./*": {
+      "import": "./dist/*"
+    }
+  },
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "files": [
+    "LICENSE.md",
+    "README.md",
+    "dist"
+  ],
+  "scripts": {
+    "build": "bun --bun build.ts",
+    "dev": "bunx bun-plugin-stx serve src/pages/ --port 4400",
+    "prepublishOnly": "bun run build",
+    "test": "bun test",
+    "test:watch": "bun test --watch",
+    "test:coverage": "bun test --coverage",
+    "typecheck": "bun tsc --noEmit"
+  },
+  "dependencies": {
+    "@cwcss/crosswind": "^0.1.6",
+    "@stacksjs/bun-queue": "^0.0.1"
+  },
+  "devDependencies": {
+    "@stacksjs/stx": "^0.2.5",
+    "bun-plugin-stx": "^0.2.5"
+  }
+}

packages/dashboard/src/api.ts

@@ -0,0 +1,71 @@
+import type { DashboardConfig, DashboardStats, JobData, QueueMetrics } from './types'
+
+const defaultConfig: Required<Pick<DashboardConfig, 'port' | 'host' | 'refreshInterval'>> = {
+  port: 4400,
+  host: 'localhost',
+  refreshInterval: 5000,
+}
+
+export function resolveConfig(config: DashboardConfig): DashboardConfig & typeof defaultConfig {
+  return { ...defaultConfig, ...config }
+}
+
+export async function fetchQueueMetrics(_config: DashboardConfig): Promise<QueueMetrics[]> {
+  // TODO: Connect to Redis and read bun-queue metrics
+  // This will use the bun-queue internal Redis keys to aggregate data
+  return [
+    {
+      name: 'default',
+      waiting: 0,
+      active: 0,
+      completed: 0,
+      failed: 0,
+      delayed: 0,
+      paused: false,
+      throughput: 0,
+      errorRate: 0,
+      avgProcessingTime: 0,
+    },
+  ]
+}
+
+export async function fetchJobs(_config: DashboardConfig, _queue?: string, _status?: string): Promise<JobData[]> {
+  // TODO: Read job data from Redis
+  return []
+}
+
+export async function fetchDashboardStats(_config: DashboardConfig): Promise<DashboardStats> {
+  // TODO: Aggregate stats from Redis
+  return {
+    totalQueues: 0,
+    totalJobs: 0,
+    activeJobs: 0,
+    completedJobs: 0,
+    failedJobs: 0,
+    throughputPerMinute: 0,
+    avgLatency: 0,
+    uptime: 0,
+  }
+}
+
+export function createApiRoutes(config: DashboardConfig) {
+  const resolvedConfig = resolveConfig(config)
+
+  return {
+    '/api/stats': async () => {
+      const stats = await fetchDashboardStats(resolvedConfig)
+      return Response.json(stats)
+    },
+    '/api/queues': async () => {
+      const queues = await fetchQueueMetrics(resolvedConfig)
+      return Response.json(queues)
+    },
+    '/api/jobs': async (req: Request) => {
+      const url = new URL(req.url)
+      const queue = url.searchParams.get('queue') ?? undefined
+      const status = url.searchParams.get('status') ?? undefined
+      const jobs = await fetchJobs(resolvedConfig, queue, status)
+      return Response.json(jobs)
+    },
+  }
+}

packages/dashboard/src/components/job-table.stx

@@ -0,0 +1,38 @@
+<script>
+const jobs = []
+</script>
+
+<div>
+  @if(jobs.length === 0)
+    <div class="empty-state">No jobs to display.</div>
+  @else
+    <table>
+      <thead>
+        <tr>
+          <th>ID</th>
+          <th>Queue</th>
+          <th>Name</th>
+          <th>Status</th>
+          <th class="text-right">Attempts</th>
+          <th>Created</th>
+          <th class="text-right">Duration</th>
+        </tr>
+      </thead>
+      <tbody>
+        @foreach(jobs as job)
+          <tr>
+            <td class="mono" style="font-size: 0.75rem;">{{ job.id }}</td>
+            <td>{{ job.queue }}</td>
+            <td style="color: var(--text); font-weight: 500;">{{ job.name }}</td>
+            <td>
+              <span class="badge {{ job.status === 'completed' ? 'badge-success' : job.status === 'failed' ? 'badge-error' : job.status === 'active' ? 'badge-info' : job.status === 'waiting' ? 'badge-warning' : 'badge-muted' }}">{{ job.status }}</span>
+            </td>
+            <td class="text-right tabular-nums">{{ job.attempts }}/{{ job.maxAttempts }}</td>
+            <td style="font-size: 0.75rem;">{{ job.createdAt }}</td>
+            <td class="text-right mono tabular-nums" style="font-size: 0.75rem;">{{ job.duration ? job.duration + 'ms' : '—' }}</td>
+          </tr>
+        @endforeach
+      </tbody>
+    </table>
+  @endif
+</div>