workmatic 1.0.0

package/dashboard/app.js

@@ -0,0 +1,249 @@
+// Dashboard state
+const state = {
+  stats: { ready: 0, running: 0, done: 0, failed: 0, dead: 0, total: 0 },
+  jobs: [],
+  queues: [],
+  workers: [],
+  currentPage: 0,
+  pageSize: 50,
+  queueFilter: '',
+  statusFilter: '',
+};
+
+// Refresh interval (ms)
+const REFRESH_INTERVAL = 2000;
+
+// DOM elements
+const elements = {
+  statReady: document.getElementById('stat-ready'),
+  statRunning: document.getElementById('stat-running'),
+  statDone: document.getElementById('stat-done'),
+  statFailed: document.getElementById('stat-failed'),
+  statDead: document.getElementById('stat-dead'),
+  workersSection: document.getElementById('workers-section'),
+  workersGrid: document.getElementById('workers-grid'),
+  jobsTbody: document.getElementById('jobs-tbody'),
+  queueFilter: document.getElementById('queue-filter'),
+  statusFilter: document.getElementById('status-filter'),
+  prevPage: document.getElementById('prev-page'),
+  nextPage: document.getElementById('next-page'),
+  pageInfo: document.getElementById('page-info'),
+  refreshIndicator: document.getElementById('refresh-indicator'),
+};
+
+// Format timestamp to relative time
+function formatTime(timestamp) {
+  if (!timestamp) return '-';
+  
+  const now = Date.now();
+  const diff = now - timestamp;
+  
+  if (diff < 1000) return 'just now';
+  if (diff < 60000) return `${Math.floor(diff / 1000)}s ago`;
+  if (diff < 3600000) return `${Math.floor(diff / 60000)}m ago`;
+  if (diff < 86400000) return `${Math.floor(diff / 3600000)}h ago`;
+  
+  return new Date(timestamp).toLocaleDateString();
+}
+
+// Fetch stats from API
+async function fetchStats() {
+  try {
+    const params = new URLSearchParams();
+    if (state.queueFilter) params.set('queue', state.queueFilter);
+    
+    const response = await fetch(`/api/stats?${params}`);
+    const data = await response.json();
+    
+    state.stats = data.stats;
+    state.queues = data.queues || [];
+    state.workers = data.workers || [];
+    
+    updateStatsUI();
+    updateQueueFilterOptions();
+    updateWorkersUI();
+  } catch (error) {
+    console.error('Failed to fetch stats:', error);
+  }
+}
+
+// Fetch jobs from API
+async function fetchJobs() {
+  try {
+    const params = new URLSearchParams({
+      limit: state.pageSize.toString(),
+      offset: (state.currentPage * state.pageSize).toString(),
+    });
+    
+    if (state.queueFilter) params.set('queue', state.queueFilter);
+    if (state.statusFilter) params.set('status', state.statusFilter);
+    
+    const response = await fetch(`/api/jobs?${params}`);
+    const data = await response.json();
+    
+    state.jobs = data.jobs || [];
+    
+    updateJobsUI();
+    updatePaginationUI();
+  } catch (error) {
+    console.error('Failed to fetch jobs:', error);
+  }
+}
+
+// Update stats UI
+function updateStatsUI() {
+  elements.statReady.textContent = state.stats.ready.toLocaleString();
+  elements.statRunning.textContent = state.stats.running.toLocaleString();
+  elements.statDone.textContent = state.stats.done.toLocaleString();
+  elements.statFailed.textContent = state.stats.failed.toLocaleString();
+  elements.statDead.textContent = state.stats.dead.toLocaleString();
+}
+
+// Update queue filter options
+function updateQueueFilterOptions() {
+  const currentValue = elements.queueFilter.value;
+  const options = ['<option value="">All Queues</option>'];
+  
+  for (const queue of state.queues) {
+    const selected = queue === currentValue ? ' selected' : '';
+    options.push(`<option value="${queue}"${selected}>${queue}</option>`);
+  }
+  
+  elements.queueFilter.innerHTML = options.join('');
+}
+
+// Update workers UI
+function updateWorkersUI() {
+  if (state.workers.length === 0) {
+    elements.workersSection.style.display = 'none';
+    return;
+  }
+  
+  elements.workersSection.style.display = 'block';
+  
+  const cards = state.workers.map(worker => {
+    const statusClass = !worker.running ? 'stopped' : worker.paused ? 'paused' : 'running';
+    const statusText = !worker.running ? 'Stopped' : worker.paused ? 'Paused' : 'Running';
+    
+    return `
+      <div class="worker-card">
+        <div class="worker-info">
+          <span class="worker-queue">${worker.queue}</span>
+          <span class="worker-status">
+            <span class="dot ${statusClass}"></span>
+            ${statusText}
+          </span>
+        </div>
+        <div class="worker-controls">
+          ${worker.paused 
+            ? `<button onclick="resumeWorker('${worker.queue}')">Resume</button>`
+            : `<button onclick="pauseWorker('${worker.queue}')">Pause</button>`
+          }
+        </div>
+      </div>
+    `;
+  });
+  
+  elements.workersGrid.innerHTML = cards.join('');
+}
+
+// Update jobs UI
+function updateJobsUI() {
+  if (state.jobs.length === 0) {
+    elements.jobsTbody.innerHTML = `
+      <tr>
+        <td colspan="7" class="empty-state">
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+            <rect x="2" y="5" width="20" height="14" rx="2"/>
+            <line x1="2" y1="10" x2="22" y2="10"/>
+          </svg>
+          <p>No jobs found</p>
+        </td>
+      </tr>
+    `;
+    return;
+  }
+  
+  const rows = state.jobs.map(job => `
+    <tr>
+      <td><span class="job-id">${job.id}</span></td>
+      <td><span class="job-queue">${job.queue}</span></td>
+      <td><span class="job-status ${job.status}">${job.status}</span></td>
+      <td class="job-priority">${job.priority}</td>
+      <td class="job-attempts">${job.attempts}/${job.maxAttempts}</td>
+      <td class="job-time">${formatTime(job.createdAt)}</td>
+      <td class="job-error" title="${job.lastError || ''}">${job.lastError || ''}</td>
+    </tr>
+  `);
+  
+  elements.jobsTbody.innerHTML = rows.join('');
+}
+
+// Update pagination UI
+function updatePaginationUI() {
+  elements.prevPage.disabled = state.currentPage === 0;
+  elements.nextPage.disabled = state.jobs.length < state.pageSize;
+  elements.pageInfo.textContent = `Page ${state.currentPage + 1}`;
+}
+
+// Pause worker
+async function pauseWorker(queue) {
+  try {
+    await fetch(`/api/workers/${encodeURIComponent(queue)}/pause`, { method: 'POST' });
+    await fetchStats();
+  } catch (error) {
+    console.error('Failed to pause worker:', error);
+  }
+}
+
+// Resume worker
+async function resumeWorker(queue) {
+  try {
+    await fetch(`/api/workers/${encodeURIComponent(queue)}/resume`, { method: 'POST' });
+    await fetchStats();
+  } catch (error) {
+    console.error('Failed to resume worker:', error);
+  }
+}
+
+// Event handlers
+elements.queueFilter.addEventListener('change', (e) => {
+  state.queueFilter = e.target.value;
+  state.currentPage = 0;
+  fetchStats();
+  fetchJobs();
+});
+
+elements.statusFilter.addEventListener('change', (e) => {
+  state.statusFilter = e.target.value;
+  state.currentPage = 0;
+  fetchJobs();
+});
+
+elements.prevPage.addEventListener('click', () => {
+  if (state.currentPage > 0) {
+    state.currentPage--;
+    fetchJobs();
+  }
+});
+
+elements.nextPage.addEventListener('click', () => {
+  if (state.jobs.length >= state.pageSize) {
+    state.currentPage++;
+    fetchJobs();
+  }
+});
+
+// Make functions available globally for onclick handlers
+window.pauseWorker = pauseWorker;
+window.resumeWorker = resumeWorker;
+
+// Initial fetch
+fetchStats();
+fetchJobs();
+
+// Auto-refresh
+setInterval(() => {
+  fetchStats();
+  fetchJobs();
+}, REFRESH_INTERVAL);

package/dashboard/index.html

@@ -0,0 +1,143 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Workmatic Dashboard</title>
+  <link rel="stylesheet" href="style.css">
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600&family=Plus+Jakarta+Sans:wght@400;500;600;700&display=swap" rel="stylesheet">
+</head>
+<body>
+  <div class="container">
+    <header>
+      <h1>
+        <span class="logo">W</span>
+        Workmatic
+      </h1>
+      <div class="header-controls">
+        <select id="queue-filter">
+          <option value="">All Queues</option>
+        </select>
+        <span class="refresh-indicator" id="refresh-indicator"></span>
+      </div>
+    </header>
+
+    <section class="stats-section">
+      <div class="stats-grid">
+        <div class="stat-card ready">
+          <div class="stat-icon">
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+              <circle cx="12" cy="12" r="10"/>
+              <polyline points="12,6 12,12 16,14"/>
+            </svg>
+          </div>
+          <div class="stat-content">
+            <span class="stat-value" id="stat-ready">0</span>
+            <span class="stat-label">Ready</span>
+          </div>
+        </div>
+        <div class="stat-card running">
+          <div class="stat-icon">
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+              <polygon points="5,3 19,12 5,21"/>
+            </svg>
+          </div>
+          <div class="stat-content">
+            <span class="stat-value" id="stat-running">0</span>
+            <span class="stat-label">Running</span>
+          </div>
+        </div>
+        <div class="stat-card done">
+          <div class="stat-icon">
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+              <polyline points="20,6 9,17 4,12"/>
+            </svg>
+          </div>
+          <div class="stat-content">
+            <span class="stat-value" id="stat-done">0</span>
+            <span class="stat-label">Done</span>
+          </div>
+        </div>
+        <div class="stat-card failed">
+          <div class="stat-icon">
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+              <circle cx="12" cy="12" r="10"/>
+              <line x1="12" y1="8" x2="12" y2="12"/>
+              <line x1="12" y1="16" x2="12.01" y2="16"/>
+            </svg>
+          </div>
+          <div class="stat-content">
+            <span class="stat-value" id="stat-failed">0</span>
+            <span class="stat-label">Failed</span>
+          </div>
+        </div>
+        <div class="stat-card dead">
+          <div class="stat-icon">
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+              <circle cx="12" cy="12" r="10"/>
+              <line x1="15" y1="9" x2="9" y2="15"/>
+              <line x1="9" y1="9" x2="15" y2="15"/>
+            </svg>
+          </div>
+          <div class="stat-content">
+            <span class="stat-value" id="stat-dead">0</span>
+            <span class="stat-label">Dead</span>
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <section class="workers-section" id="workers-section">
+      <h2>Workers</h2>
+      <div class="workers-grid" id="workers-grid">
+        <!-- Workers will be populated by JS -->
+      </div>
+    </section>
+
+    <section class="jobs-section">
+      <div class="jobs-header">
+        <h2>Jobs</h2>
+        <div class="jobs-filters">
+          <select id="status-filter">
+            <option value="">All Statuses</option>
+            <option value="ready">Ready</option>
+            <option value="running">Running</option>
+            <option value="done">Done</option>
+            <option value="failed">Failed</option>
+            <option value="dead">Dead</option>
+          </select>
+        </div>
+      </div>
+      
+      <div class="jobs-table-container">
+        <table class="jobs-table">
+          <thead>
+            <tr>
+              <th>ID</th>
+              <th>Queue</th>
+              <th>Status</th>
+              <th>Priority</th>
+              <th>Attempts</th>
+              <th>Created</th>
+              <th>Error</th>
+            </tr>
+          </thead>
+          <tbody id="jobs-tbody">
+            <!-- Jobs will be populated by JS -->
+          </tbody>
+        </table>
+      </div>
+
+      <div class="pagination">
+        <button id="prev-page" disabled>Previous</button>
+        <span id="page-info">Page 1</span>
+        <button id="next-page">Next</button>
+      </div>
+    </section>
+  </div>
+
+  <script src="app.js"></script>
+</body>
+</html>