@zintrust/queue-monitor 0.4.64 → 0.4.68

package/dist/api/workerClient.d.ts

@@ -0,0 +1,20 @@
+type WorkerApiResponse<T> = {
+    ok: boolean;
+    error?: string;
+} & T;
+export declare const WorkerClient: Readonly<{
+    listWorkers(): Promise<string[]>;
+    getWorker(name: string): Promise<unknown>;
+    getStatus(name: string): Promise<unknown>;
+    getHealth(name: string): Promise<unknown>;
+    startWorker(name: string): Promise<WorkerApiResponse<{
+        message?: string;
+    }>>;
+    stopWorker(name: string): Promise<WorkerApiResponse<{
+        message?: string;
+    }>>;
+    restartWorker(name: string): Promise<WorkerApiResponse<{
+        message?: string;
+    }>>;
+}>;
+export {};

package/dist/api/workerClient.js

@@ -0,0 +1,45 @@
+import { ErrorFactory, Logger } from '@zintrust/core';
+import { WorkerConfig } from '../config/workerConfig.js';
+const requestJson = async (path, options = {}) => {
+    const baseUrl = WorkerConfig.getWorkerBaseUrl();
+    const url = `${baseUrl}${path}`;
+    const response = await fetch(url, {
+        ...options,
+        headers: {
+            'Content-Type': 'application/json',
+            ...options.headers,
+        },
+    });
+    if (!response.ok) {
+        Logger.error('Worker API request failed', { url, status: response.status });
+        throw ErrorFactory.createWorkerError(`Worker API request failed (${response.status})`);
+    }
+    return (await response.json());
+};
+export const WorkerClient = Object.freeze({
+    async listWorkers() {
+        const response = await requestJson('/api/workers');
+        return response.workers ?? [];
+    },
+    async getWorker(name) {
+        const response = await requestJson(`/api/workers/${name}`);
+        return response.worker;
+    },
+    async getStatus(name) {
+        const response = await requestJson(`/api/workers/${name}/status`);
+        return response.status;
+    },
+    async getHealth(name) {
+        const response = await requestJson(`/api/workers/${name}/health`);
+        return response.health;
+    },
+    async startWorker(name) {
+        return requestJson(`/api/workers/${name}/start`, { method: 'POST' });
+    },
+    async stopWorker(name) {
+        return requestJson(`/api/workers/${name}/stop`, { method: 'POST' });
+    },
+    async restartWorker(name) {
+        return requestJson(`/api/workers/${name}/restart`, { method: 'POST' });
+    },
+});

package/dist/build-manifest.json

@@ -1,15 +1,15 @@
 {
   "name": "@zintrust/queue-monitor",
-  "version": "0.4.64",
-  "buildDate": "2026-04-05T16:26:08.670Z",
+  "version": "0.4.68",
+  "buildDate": "2026-04-06T11:27:30.655Z",
   "buildEnvironment": {
-    "node": "v20.20.2",
-    "platform": "linux",
-    "arch": "x64"
+    "node": "v22.22.1",
+    "platform": "darwin",
+    "arch": "arm64"
   },
   "git": {
-    "commit": "018dcfe5",
-    "branch": "master"
+    "commit": "f5a9d786",
+    "branch": "release"
   },
   "package": {
     "engines": {
@@ -32,6 +32,34 @@
       "size": 6679,
       "sha256": "edd069c1229071078223cd23cbb7bdae9cbb2431ae603ab35f0cfcb7cd1f6ffe"
     },
+    "api/workerClient.d.ts": {
+      "size": 597,
+      "sha256": "1d712bfa9127aa2df4f1fbd0efbb6d84069e1888ed73aca5542a41eee865d4bb"
+    },
+    "api/workerClient.js": {
+      "size": 1629,
+      "sha256": "60f993a42f4a9dd5000b01dae3b0f105a8f4348da8433a735b5cc1929a8f64ce"
+    },
+    "build-manifest.json": {
+      "size": 3866,
+      "sha256": "e21e6549e0ce2dda75dcfb4f0f8551300c9bd2c5ff58bb041525c216cae45551"
+    },
+    "config/queueMonitor.d.ts": {
+      "size": 407,
+      "sha256": "4541f47e64c8ede1bfd8fc0cb7edb76c4e885311b28b1f51c9be7639e5d87eca"
+    },
+    "config/queueMonitor.js": {
+      "size": 689,
+      "sha256": "0b95e6b65d4b6ffdd69788cdfd19e0e76400a39ad69dce018d8827a3b298e419"
+    },
+    "config/workerConfig.d.ts": {
+      "size": 86,
+      "sha256": "b669205d50c8844455a2d9b34a54f48a71118eb6ac99bad5372683ab666f5a22"
+    },
+    "config/workerConfig.js": {
+      "size": 628,
+      "sha256": "ca1c6dbaa751893f0e6b7c8a7fd41a80f7d5e8fc9aaaa4877ca12821bb25f56f"
+    },
     "connection.d.ts": {
       "size": 107,
       "sha256": "653b300a25df08a2380bdc74ea38342190771386cb1847dc92802e6eef88a88f"
@@ -41,12 +69,12 @@
       "sha256": "1d4e9b5f2a03e0a3885d578276eb5c6a05c50ce4a2d84b241e68fe6ace76e7dd"
     },
     "dashboard-ui.d.ts": {
-      "size": 197,
-      "sha256": "1b487b6e9cedbcb00cde7e920fb128724cb21aa154160e0bd02b02e2a0bd7334"
+      "size": 219,
+      "sha256": "5140191207b5620500ac5e1edacefed65956a1ad88739695d545ea7d2b405243"
     },
     "dashboard-ui.js": {
-      "size": 53771,
-      "sha256": "530bdfba8deed3b881ab2b7ea6190b9a521bf4bdcc5a08a386a71b4c031ccb56"
+      "size": 54241,
+      "sha256": "36d36915fe36e213823a916a03244cdbe4a1b10af87d6eb8780a24f2ce59347b"
     },
     "driver.d.ts": {
       "size": 707,
@@ -61,8 +89,8 @@
       "sha256": "2556c136641769f4e7cd81abd6ecae8663433aba74b09bc507b8fba01e3fc6f5"
     },
     "index.js": {
-      "size": 12811,
-      "sha256": "229d93ec84afcdd135b20c13fcbb4d22059efdb9d3d26e94f1ba7926a7d5b07a"
+      "size": 12870,
+      "sha256": "e9e37205072da70aacff5c2b46bdf01a17dc7cc507d201541a9c0bd2483f8cc8"
     },
     "metrics.d.ts": {
       "size": 868,
@@ -72,6 +100,14 @@
       "size": 3448,
       "sha256": "022c97865d37933fd7ed92f47b86b0450056caffd629fce6add51c902529bfe5"
     },
+    "routes/workers.d.ts": {
+      "size": 477,
+      "sha256": "cfcc3527c47d1a796a3ced2d4777b339dd767f7feb3ecc66c5ce0a91d8ff1bc8"
+    },
+    "routes/workers.js": {
+      "size": 901,
+      "sha256": "1ec48c0becc8c0628b1780fb400e957c5fe50da79f73112436c33ecde7d7d574"
+    },
     "worker.d.ts": {
       "size": 332,
       "sha256": "97cddbc991c6e6724950090cd92f06671932ab848c16dd94a030d9fba3fbae26"
@@ -79,6 +115,14 @@
     "worker.js": {
       "size": 1233,
       "sha256": "da26c1b80da7473e1644a4e0f8d814097ce0adff14e36037164f9ae5855e656a"
+    },
+    "workers-ui.d.ts": {
+      "size": 214,
+      "sha256": "4f5fd3bbd077d0dee2cc6c73d2c736fc52119b0d3a5f4a1878a4f3d3d3edf299"
+    },
+    "workers-ui.js": {
+      "size": 24928,
+      "sha256": "ba2c5cbf890fe875cc5336c76bd29b146089bc8ba3a70de4a2c383f395f9be73"
     }
   }
 }

package/dist/config/queueMonitor.d.ts

@@ -0,0 +1,18 @@
+/**
+ * Queue Monitor Configuration (default override)
+ *
+ * Keep this file declarative:
+ * - Core owns env parsing/default logic.
+ * - Projects can override config by editing values below.
+ */
+declare const _default: {
+    enabled: boolean;
+    basePath: string;
+    middleware: string[];
+    redis: {
+        host: string;
+        port: number;
+        password: string;
+    };
+};
+export default _default;

package/dist/config/queueMonitor.js

@@ -0,0 +1,21 @@
+import { Env } from '@zintrust/core';
+/**
+ * Queue Monitor Configuration (default override)
+ *
+ * Keep this file declarative:
+ * - Core owns env parsing/default logic.
+ * - Projects can override config by editing values below.
+ */
+export default {
+    enabled: Env.getBool('QUEUE_MONITOR_ENABLED', true),
+    basePath: Env.get('QUEUE_MONITOR_BASE_PATH', '/queue-monitor'),
+    middleware: Env.get('QUEUE_MONITOR_MIDDLEWARE', 'auth')
+        .split(',')
+        .map((m) => m.trim())
+        .filter((m) => m.length > 0),
+    redis: {
+        host: Env.get('REDIS_HOST', 'localhost'),
+        port: Env.getInt('REDIS_PORT', 6379),
+        password: Env.get('REDIS_PASSWORD', ''),
+    },
+};

package/dist/config/workerConfig.d.ts

@@ -0,0 +1,3 @@
+export declare const WorkerConfig: Readonly<{
+    getWorkerBaseUrl: () => string;
+}>;

package/dist/config/workerConfig.js

@@ -0,0 +1,19 @@
+import { Env } from '@zintrust/core';
+const normalizeBaseUrl = (value) => {
+    let end = value.length;
+    while (end > 0 && value.charAt(end - 1) === '/') {
+        end--;
+    }
+    return value.slice(0, end);
+};
+const withHttpScheme = (value) => value.startsWith('http://') || value.startsWith('https://') ? value : `http://${value}`;
+const resolveWorkerApiUrl = () => {
+    const workerApiUrl = Env.get('WORKER_API_URL');
+    if (workerApiUrl) {
+        return normalizeBaseUrl(withHttpScheme(workerApiUrl));
+    }
+    return '';
+};
+export const WorkerConfig = Object.freeze({
+    getWorkerBaseUrl: resolveWorkerApiUrl,
+});

package/dist/dashboard-ui.d.ts

@@ -2,5 +2,6 @@ export type DashboardUiOptions = {
     basePath: string;
     autoRefresh: boolean;
     refreshIntervalMs: number;
+    appName?: string;
 };
 export declare const getDashboardHtml: (options: DashboardUiOptions) => string;

package/dist/dashboard-ui.js

@@ -1,3 +1,6 @@
+const resolveAppName = (appName) => {
+    return typeof appName === 'string' && appName.trim() !== '' ? appName.trim() : 'ZinTrust';
+};
 const getRootAndThemeVariables = () => `
 :root {
     --bg: #0b1220;
@@ -125,14 +128,14 @@ const getDashboardStyles = () => [
     getStatusBadgeStyles(),
     getInteractiveStyles(),
 ].join('\n');
-const getHeaderSection = () => `
+const getHeaderSection = (appName) => `
     <header>
         <div class="brand">
             <div class="logo-frame">
                 ${getLogoSvg()}
             </div>
             <div>
-                <b>ZinTrust</b>
+                <b>${appName}</b>
                 <span>Queue Monitor</span>
             </div>
         </div>
@@ -223,10 +226,10 @@ const getJobsSection = () => `
         </div>
     </div>
 `;
-const getDashboardBody = () => `
+const getDashboardBody = (appName) => `
     <div class="page">
         <div class="shell">
-            ${getHeaderSection()}
+            ${getHeaderSection(appName)}
 
             <section id="error-container"></section>
 
@@ -527,7 +530,10 @@ const getRenderJobsStateFunction = () => `
 `;
 const getRenderJobsIdentityHelpersFunction = () => `
         function getJobId(job) {
-            return String(job.id);
+            const queue = job.queue || currentQueue || '';
+            const id = job.id == null ? '' : String(job.id);
+            const timestamp = Number.isFinite(job.timestamp) ? String(job.timestamp) : '';
+            return queue + '::' + id + '::' + timestamp;
         }
 
         function getAdjacentJobDetailRow(row) {
@@ -1298,21 +1304,24 @@ const getDashboardScript = (options) => [
     getDashboardScriptRender(),
     getDashboardScriptBootstrap(),
 ].join('\n');
-export const getDashboardHtml = (options) => `<!DOCTYPE html>
+export const getDashboardHtml = (options) => {
+    const appName = resolveAppName(options.appName);
+    return `<!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>ZinTrust Queue Monitor</title>
+    <title>${appName} Queue Monitor</title>
     <style>
 ${getDashboardStyles()}
     </style>
 </head>
 <body>
-${getDashboardBody()}
+${getDashboardBody(appName)}
 
     <script>
 ${getDashboardScript(options)}
     </script>
 </body>
 </html>`;
+};

package/dist/index.js

@@ -1,4 +1,4 @@
-import { isArray, isNonEmptyString, Logger, queueConfig, resolveLockPrefix, Router, } from '@zintrust/core';
+import { Env, isArray, isNonEmptyString, Logger, queueConfig, resolveLockPrefix, Router, } from '@zintrust/core';
 import { createRedisConnection } from './connection';
 import { getDashboardHtml } from './dashboard-ui';
 import { createBullMQDriver } from './driver';
@@ -230,6 +230,7 @@ function registerDashboardRoutes(router, settings, routeOptions) {
             basePath: settings.basePath,
             autoRefresh: settings.autoRefresh,
             refreshIntervalMs: settings.refreshIntervalMs,
+            appName: Env.get('APP_NAME', 'ZinTrust'),
         }));
     };
     // Dashboard HTML

package/dist/routes/workers.d.ts

@@ -0,0 +1,10 @@
+import { type IRouter } from '@zintrust/core';
+import { type WorkerUiOptions } from '../workers-ui';
+type RouteOptions = {
+    middleware?: ReadonlyArray<string>;
+} | undefined;
+export declare const registerWorkerUiRoutes: (router: IRouter, options: WorkerUiOptions, routeOptions: RouteOptions) => void;
+declare const _default: Readonly<{
+    registerWorkerUiRoutes: (router: IRouter, options: WorkerUiOptions, routeOptions: RouteOptions) => void;
+}>;
+export default _default;

package/dist/routes/workers.js

@@ -0,0 +1,20 @@
+import { Router } from '@zintrust/core';
+import { WorkerConfig } from '../config/workerConfig.js';
+import { getWorkersHtml } from '../workers-ui.js';
+const registerWorkerUiPage = (router, options, routeOptions) => {
+    const handler = (_req, res) => {
+        res.html(getWorkersHtml({
+            basePath: options.basePath,
+            apiBaseUrl: WorkerConfig.getWorkerBaseUrl(),
+            autoRefresh: options.autoRefresh,
+            refreshIntervalMs: options.refreshIntervalMs,
+        }));
+    };
+    Router.get(router, `${options.basePath}/workers`, handler, routeOptions);
+    Router.get(router, '/workers', handler, routeOptions);
+    Router.get(router, '/workers/', handler, routeOptions);
+};
+export const registerWorkerUiRoutes = (router, options, routeOptions) => {
+    registerWorkerUiPage(router, options, routeOptions);
+};
+export default Object.freeze({ registerWorkerUiRoutes });

package/dist/workers-ui.d.ts

@@ -0,0 +1,7 @@
+export type WorkerUiOptions = {
+    basePath: string;
+    apiBaseUrl?: string;
+    autoRefresh: boolean;
+    refreshIntervalMs: number;
+};
+export declare const getWorkersHtml: (options: WorkerUiOptions) => string;

package/dist/workers-ui.js

@@ -0,0 +1,655 @@
+const getBaseStyles = () => `
+  body {
+    margin: 0;
+    font-family: 'Inter', ui-sans-serif, system-ui;
+    background: #0b1220;
+    color: #f1f5f9;
+  }
+  .hidden { display: none; }
+`;
+const getLayoutStyles = () => `
+  .zt-page { min-height: 100vh; padding: 32px 24px; }
+  .zt-container { max-width: 72rem; margin: 0 auto; display: flex; flex-direction: column; gap: 24px; }
+  .zt-header { display: flex; flex-direction: column; gap: 16px; }
+  .zt-brand { display: flex; align-items: center; gap: 16px; }
+  .zt-brand-icon { height: 48px; width: 48px; border-radius: 16px; border: 1px solid #1e293b; background: rgba(15, 23, 42, 0.8); display: flex; align-items: center; justify-content: center; }
+  .zt-kicker { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.2em; color: #94a3b8; }
+  .zt-title { font-size: 1.5rem; font-weight: 600; color: #f8fafc; margin: 0; }
+  .zt-subtitle { font-size: 0.875rem; color: #94a3b8; margin: 0.25rem 0 0; }
+  .zt-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
+  .zt-nav { display: flex; flex-wrap: wrap; gap: 8px; }
+  .zt-nav-link {
+    border: 1px solid #1e293b;
+    color: #e2e8f0;
+    text-decoration: none;
+    padding: 0.4rem 0.75rem;
+    border-radius: 0.6rem;
+    font-size: 0.75rem;
+    font-weight: 600;
+    transition: border-color 0.2s ease, color 0.2s ease;
+  }
+  .zt-nav-link:hover { border-color: #38bdf8; color: #38bdf8; }
+  .zt-grid { display: grid; gap: 16px; }
+  .zt-grid-3 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
+`;
+const getCardStyles = () => `
+  .zt-card { background: rgba(15, 23, 42, 0.75); border: 1px solid rgba(148, 163, 184, 0.2); border-radius: 1rem; padding: 1.25rem; }
+  .zt-card-title { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.2em; color: #94a3b8; }
+  .zt-card-value { margin-top: 0.75rem; font-size: 1.875rem; font-weight: 600; }
+  .zt-text-emerald { color: #6ee7b7; }
+  .zt-text-amber { color: #fbbf24; }
+`;
+const getAlertStyles = () => `
+  .zt-alert {
+    border: 1px solid rgba(239, 68, 68, 0.3);
+    background: rgba(239, 68, 68, 0.1);
+    color: #fecaca;
+    padding: 0.75rem 1rem;
+    border-radius: 1rem;
+    font-size: 0.875rem;
+  }
+`;
+const getButtonStyles = () => `
+  .zt-button {
+    border: 1px solid #1e293b;
+    background: #0f172a;
+    color: #f1f5f9;
+    padding: 0.5rem 1rem;
+    border-radius: 0.75rem;
+    font-size: 0.875rem;
+    font-weight: 600;
+    cursor: pointer;
+    transition: border-color 0.2s ease, color 0.2s ease;
+  }
+  .zt-button:hover { border-color: #38bdf8; color: #38bdf8; }
+  .zt-select {
+    border: 1px solid #1e293b;
+    background: #0f172a;
+    color: #f1f5f9;
+    padding: 0.5rem 0.75rem;
+    border-radius: 0.75rem;
+    font-size: 0.75rem;
+    font-weight: 600;
+  }
+`;
+const getTableStyles = () => `
+  .zt-table-card { border-radius: 1.5rem; padding: 1.5rem; }
+  .zt-table-header { display: flex; flex-direction: column; gap: 12px; }
+  .zt-table-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 0.75rem; color: #94a3b8; }
+  .zt-table-wrap { margin-top: 1.5rem; overflow-x: auto; }
+  .zt-table { width: 100%; border-collapse: collapse; font-size: 0.875rem; }
+  .zt-head-cell { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.08em; color: #94a3b8; padding: 0.5rem 0.75rem; text-align: left; }
+  .zt-cell { padding: 0.75rem; border-top: 1px solid #1f2937; }
+  .zt-cell--strong { font-weight: 600; color: #f1f5f9; }
+  .zt-cell--muted { color: #94a3b8; }
+  .zt-cell--right { text-align: right; }
+  .zt-empty { padding: 1.5rem 0.75rem; text-align: center; font-size: 0.875rem; color: #94a3b8; }
+`;
+const getBadgeStyles = () => `
+  .zt-dot { display: inline-block; width: 0.5rem; height: 0.5rem; border-radius: 999px; }
+  .zt-dot--emerald { background: #34d399; }
+  .zt-dot--amber { background: #fbbf24; }
+  .zt-dot--rose { background: #fb7185; }
+  .zt-badge { display: inline-flex; align-items: center; border-radius: 999px; padding: 0.125rem 0.625rem; font-size: 0.75rem; font-weight: 600; border: 1px solid transparent; }
+  .zt-badge--success { background: rgba(16, 185, 129, 0.12); color: #6ee7b7; border-color: rgba(16, 185, 129, 0.3); }
+  .zt-badge--warn { background: rgba(245, 158, 11, 0.12); color: #fbbf24; border-color: rgba(245, 158, 11, 0.3); }
+  .zt-badge--danger { background: rgba(244, 63, 94, 0.12); color: #fda4af; border-color: rgba(244, 63, 94, 0.3); }
+  .zt-badge--neutral { background: rgba(148, 163, 184, 0.12); color: #cbd5f5; border-color: rgba(148, 163, 184, 0.3); }
+  .status-pill { border-radius: 999px; padding: 0.125rem 0.625rem; font-size: 0.75rem; font-weight: 600; }
+`;
+const getActionStyles = () => `
+  .zt-row-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0.5rem; }
+  .action-btn {
+    border: 1px solid #1e293b;
+    background: transparent;
+    color: #e2e8f0;
+    padding: 0.25rem 0.75rem;
+    border-radius: 0.5rem;
+    font-size: 0.75rem;
+    font-weight: 600;
+    cursor: pointer;
+    transition: border-color 0.2s ease, color 0.2s ease;
+  }
+  .action-btn.is-disabled {
+    opacity: 0.45;
+    cursor: not-allowed;
+    border-color: #1f2937;
+    color: #64748b;
+  }
+  .action-btn.is-disabled:hover { border-color: #1f2937; color: #64748b; }
+  .action-btn.is-active {
+    border-color: rgba(16, 185, 129, 0.6);
+    color: #6ee7b7;
+  }
+  .action-btn.is-toggle {
+    border-color: rgba(56, 189, 248, 0.4);
+    color: #bae6fd;
+  }
+  .action-btn.is-delete {
+    border-color: rgba(244, 63, 94, 0.5);
+    color: #fda4af;
+  }
+  .action-btn.is-delete:hover { border-color: #fb7185; color: #fb7185; }
+  .zt-toggle {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.4rem;
+    font-size: 0.7rem;
+    font-weight: 600;
+    color: #cbd5f5;
+  }
+  .zt-switch {
+    appearance: none;
+    width: 2.25rem;
+    height: 1.2rem;
+    border-radius: 999px;
+    border: 1px solid rgba(148, 163, 184, 0.4);
+    background: rgba(239, 68, 68, 0.2);
+    position: relative;
+    cursor: pointer;
+    transition: background 0.2s ease, border-color 0.2s ease;
+  }
+  .zt-switch::after {
+    content: '';
+    position: absolute;
+    top: 1px;
+    left: 1px;
+    width: 0.95rem;
+    height: 0.95rem;
+    border-radius: 999px;
+    background: #f8fafc;
+    transition: transform 0.2s ease;
+  }
+  .zt-switch:checked {
+    background: rgba(16, 185, 129, 0.25);
+    border-color: rgba(16, 185, 129, 0.5);
+  }
+  .zt-switch:checked::after {
+    transform: translateX(1rem);
+  }
+  .action-btn:hover { border-color: #38bdf8; color: #38bdf8; }
+  .action-btn[data-action="start"]:hover { border-color: #34d399; color: #34d399; }
+  .action-btn[data-action="restart"]:hover { border-color: #fbbf24; color: #fbbf24; }
+  .action-btn[data-action="stop"]:hover { border-color: #fb7185; color: #fb7185; }
+`;
+const getResponsiveStyles = () => `
+  @media (min-width: 640px) {
+    .zt-header { flex-direction: row; align-items: center; justify-content: space-between; }
+    .zt-table-header { flex-direction: row; align-items: center; justify-content: space-between; }
+  }
+  @media (min-width: 768px) {
+    .zt-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
+  }
+`;
+const getInlineStyles = () => `
+<style>
+${getBaseStyles()}
+${getLayoutStyles()}
+${getCardStyles()}
+${getAlertStyles()}
+${getButtonStyles()}
+${getTableStyles()}
+${getBadgeStyles()}
+${getActionStyles()}
+${getResponsiveStyles()}
+</style>`;
+const getLogo = () => `
+<svg width="28" height="28" viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <defs>
+    <linearGradient id="zt-workers" x1="10" y1="50" x2="90" y2="50" gradientUnits="userSpaceOnUse">
+      <stop stop-color="#22c55e" />
+      <stop offset="1" stop-color="#38bdf8" />
+    </linearGradient>
+  </defs>
+  <circle cx="50" cy="50" r="34" stroke="rgba(255,255,255,0.16)" stroke-width="4" />
+  <ellipse cx="50" cy="50" rx="40" ry="18" stroke="url(#zt-workers)" stroke-width="4" />
+  <ellipse cx="50" cy="50" rx="18" ry="40" stroke="url(#zt-workers)" stroke-width="4" opacity="0.75" />
+  <circle cx="50" cy="50" r="6" fill="url(#zt-workers)" />
+  <path d="M40 52C35 52 32 49 32 44C32 39 35 36 40 36H48" stroke="white" stroke-width="6" stroke-linecap="round" />
+  <path d="M60 48C65 48 68 51 68 56C68 61 65 64 60 64H52" stroke="white" stroke-width="6" stroke-linecap="round" />
+  <path d="M44 50H56" stroke="rgba(255,255,255,0.22)" stroke-width="6" stroke-linecap="round" />
+</svg>`;
+const normalizeBasePath = (value) => {
+    let basePath = value;
+    while (basePath.endsWith('/')) {
+        basePath = basePath.slice(0, -1);
+    }
+    return basePath;
+};
+const getWorkersHead = () => `
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>ZinTrust Workers</title>
+    ${getInlineStyles()}
+  </head>`;
+const getWorkersHeader = () => `
+        <header class="zt-header">
+          <div class="zt-brand">
+            <div class="zt-brand-icon">
+              ${getLogo()}
+            </div>
+            <div>
+              <p class="zt-kicker">ZinTrust</p>
+              <h1 class="zt-title">Worker Command Center</h1>
+              <p class="zt-subtitle">Live control plane for worker orchestration</p>
+            </div>
+          </div>
+          <div class="zt-actions">
+            <span id="last-updated" class="zt-kicker"></span>
+            <select id="storage-select" class="zt-select" aria-label="Worker storage">
+              <option value="memory">Memory</option>
+              <option value="redis">Redis</option>
+              <option value="db">Database</option>
+            </select>
+            <nav class="zt-nav">
+              <a class="zt-nav-link" href="/queue-monitor/">Queue monitor</a>
+              <a class="zt-nav-link" href="/workers">Workers</a>
+              <a class="zt-nav-link" href="/telemetry">Telemetry</a>
+              <a class="zt-nav-link" href="/metrics">Metrics</a>
+            </nav>
+            <button id="refresh-btn" class="zt-button">Refresh</button>
+            <button id="auto-refresh-btn" class="zt-button">Pause auto refresh</button>
+          </div>
+        </header>`;
+const getWorkersStats = () => `
+        <section class="zt-grid zt-grid-3">
+          <div class="zt-card">
+            <p class="zt-card-title">Total Workers</p>
+            <p id="total-workers" class="zt-card-value">0</p>
+          </div>
+          <div class="zt-card">
+            <p class="zt-card-title">Active</p>
+            <p id="active-workers" class="zt-card-value zt-text-emerald">0</p>
+          </div>
+          <div class="zt-card">
+            <p class="zt-card-title">Attention Needed</p>
+            <p id="attention-workers" class="zt-card-value zt-text-amber">0</p>
+          </div>
+        </section>`;
+const getWorkersTable = () => `
+        <section class="zt-card zt-table-card">
+          <div class="zt-table-header">
+            <div>
+              <h2 class="zt-title" style="font-size: 1.125rem;">Workers</h2>
+              <p class="zt-subtitle">Start, stop, and monitor health across the fleet.</p>
+            </div>
+            <div class="zt-table-meta">
+              <span class="zt-dot zt-dot--emerald"></span> Healthy
+              <span class="zt-dot zt-dot--amber" style="margin-left: 0.75rem;"></span> Degraded
+              <span class="zt-dot zt-dot--rose" style="margin-left: 0.75rem;"></span> Critical
+            </div>
+          </div>
+          <div class="zt-table-wrap">
+            <table class="zt-table">
+              <thead>
+                <tr>
+                  <th class="zt-head-cell">Worker</th>
+                  <th class="zt-head-cell">Status</th>
+                  <th class="zt-head-cell">Health</th>
+                  <th class="zt-head-cell">Version</th>
+                  <th class="zt-head-cell zt-cell--right">Actions</th>
+                </tr>
+              </thead>
+              <tbody id="workers-body"></tbody>
+            </table>
+          </div>
+        </section>`;
+const getWorkersBody = () => `
+    <div class="zt-page">
+      <div class="zt-container">
+${getWorkersHeader()}
+
+        <section id="error" class="hidden zt-alert"></section>
+
+${getWorkersStats()}
+
+${getWorkersTable()}
+      </div>
+    </div>`;
+const getWorkersScriptState = (options, apiBaseUrl) => `
+      const RAW_API_BASE = '${apiBaseUrl}';
+      const API_BASE = RAW_API_BASE
+        ? (RAW_API_BASE.startsWith('/') ? window.location.origin + RAW_API_BASE : RAW_API_BASE)
+  : window.location.origin;
+      const STORAGE_KEYS = {
+        autoRefresh: 'zintrust.workers.autoRefresh',
+        storageMode: 'zintrust.workers.storageMode',
+      };
+      const AUTO_REFRESH = ${options.autoRefresh ? 'true' : 'false'};
+      const REFRESH_INTERVAL = ${Math.max(1000, Math.floor(options.refreshIntervalMs))};
+
+      const errorEl = document.getElementById('error');
+      const totalEl = document.getElementById('total-workers');
+      const activeEl = document.getElementById('active-workers');
+      const attentionEl = document.getElementById('attention-workers');
+      const bodyEl = document.getElementById('workers-body');
+      const refreshBtn = document.getElementById('refresh-btn');
+      const autoBtn = document.getElementById('auto-refresh-btn');
+      const lastUpdated = document.getElementById('last-updated');
+      const storageSelect = document.getElementById('storage-select');
+
+      let autoRefresh = AUTO_REFRESH;
+      let storageMode = 'memory';
+      let autoTimer = null;
+`;
+const getWorkersScriptStorage = () => `
+      const readStorage = (key) => {
+        try {
+          return localStorage.getItem(key);
+        } catch (error) {
+          return null;
+        }
+      };
+
+      const writeStorage = (key, value) => {
+        try {
+          localStorage.setItem(key, value);
+        } catch (error) {
+          return;
+        }
+      };
+
+      const setAutoLabel = () => {
+        autoBtn.textContent = autoRefresh ? 'Pause auto refresh' : 'Resume auto refresh';
+      };
+
+      const setStorageValue = (value) => {
+        storageMode = value || 'memory';
+        if (storageSelect) {
+          storageSelect.value = storageMode;
+        }
+      };
+`;
+const getWorkersScriptError = () => `
+      const setError = (message) => {
+        if (!message) {
+          errorEl.classList.add('hidden');
+          errorEl.textContent = '';
+          return;
+        }
+        errorEl.classList.remove('hidden');
+        errorEl.textContent = message;
+      };
+`;
+const getWorkersScriptBadges = () => `
+      const statusBadge = (label, tone) => {
+        const tones = {
+          success: 'zt-badge--success',
+          warn: 'zt-badge--warn',
+          danger: 'zt-badge--danger',
+          neutral: 'zt-badge--neutral',
+        };
+        return '<span class="zt-badge ' + (tones[tone] || tones.neutral) + '">' + label + '</span>';
+      };
+`;
+const getWorkersScriptTone = () => `
+      const toStatusTone = (status) => {
+        if (!status) return { label: 'unknown', tone: 'neutral' };
+        const normalized = String(status).toLowerCase();
+        if (['running', 'active'].includes(normalized)) return { label: normalized, tone: 'success' };
+        if (['stopped', 'stopping', 'sleeping', 'paused'].includes(normalized)) return { label: normalized, tone: 'neutral' };
+        if (['starting', 'draining'].includes(normalized)) return { label: normalized, tone: 'warn' };
+        return { label: normalized, tone: 'danger' };
+      };
+
+      const toHealthTone = (health) => {
+        if (!health) return { label: 'unknown', tone: 'neutral' };
+        const normalized = String(health).toLowerCase();
+        if (['healthy', 'green'].includes(normalized)) return { label: normalized, tone: 'success' };
+        if (['degraded', 'yellow'].includes(normalized)) return { label: normalized, tone: 'warn' };
+        if (['critical', 'unhealthy', 'red'].includes(normalized)) return { label: normalized, tone: 'danger' };
+        return { label: normalized, tone: 'neutral' };
+      };
+`;
+const getWorkersScriptRenderRowTemplate = () => `
+      const renderWorkerRow = (worker) => {
+        const resolvedName =
+          worker.name || worker.workerName || worker.worker?.name || worker.status?.name || '';
+        const statusValue =
+          worker.status?.status ||
+          worker.status?.state ||
+          worker.status ||
+          worker.worker?.status ||
+          'unknown';
+        const statusInfo = toStatusTone(statusValue);
+        const healthInfo = toHealthTone(worker.health?.status || worker.health);
+        const version =
+          worker.version ||
+          worker.status?.version ||
+          worker.worker?.config?.version ||
+          worker.worker?.version ||
+          'n/a';
+        const autoStart = Boolean(worker.autoStart ?? worker.worker?.config?.autoStart ?? false);
+
+        const normalizedStatus = String(statusValue || '').toLowerCase();
+        const isRunning = ['running', 'active'].includes(normalizedStatus);
+        const startClass = isRunning ? 'action-btn is-disabled is-active' : 'action-btn';
+        const startAttr = isRunning ? ' disabled' : '';
+
+        if (!resolvedName) {
+          return '';
+        }
+
+        const rowHtml =
+          '<tr>' +
+          '<td class="zt-cell zt-cell--strong">' +
+          resolvedName +
+          '</td>' +
+          '<td class="zt-cell">' +
+          statusBadge(statusInfo.label, statusInfo.tone) +
+          '</td>' +
+          '<td class="zt-cell">' +
+          statusBadge(healthInfo.label, healthInfo.tone) +
+          '</td>' +
+          '<td class="zt-cell zt-cell--muted">' +
+          version +
+          '</td>' +
+          '<td class="zt-cell zt-cell--right">' +
+          '<div class="zt-row-actions">' +
+          '<label class="zt-toggle" title="Auto start">' +
+          '<input class="zt-switch" type="checkbox" data-action="auto-start" data-worker="' +
+          resolvedName +
+          '" data-auto-start="' +
+          (autoStart ? 'true' : 'false') +
+          '"' +
+          (autoStart ? ' checked' : '') +
+          ' />' +
+          '<span>Auto</span>' +
+          '</label>' +
+          '<button class="' +
+          startClass +
+          '" data-action="start" data-worker="' +
+          resolvedName +
+          '"' +
+          startAttr +
+          '>Start</button>' +
+          '<button class="action-btn" data-action="restart" data-worker="' +
+          resolvedName +
+          '">Restart</button>' +
+          '<button class="action-btn" data-action="stop" data-worker="' +
+          resolvedName +
+          '">Stop</button>' +
+          '<button class="action-btn is-delete" data-action="delete" data-worker="' +
+          resolvedName +
+          '">Delete</button>' +
+          '</div>' +
+          '</td>' +
+          '</tr>';
+
+        return rowHtml;
+      };
+`;
+const getWorkersScriptRenderRows = () => `
+      const renderWorkers = (workers) => {
+        bodyEl.innerHTML = '';
+        if (!workers.length) {
+          bodyEl.innerHTML = '<tr><td colspan="5" class="zt-empty">No workers found.</td></tr>';
+          return;
+        }
+
+        workers.forEach((worker) => {
+          const rowHtml = renderWorkerRow(worker);
+          if (!rowHtml) {
+            return;
+          }
+          bodyEl.insertAdjacentHTML('beforeend', rowHtml);
+        });
+      };
+`;
+const getWorkersScriptRenderSummary = () => `
+      const updateSummary = (workers) => {
+        totalEl.textContent = workers.length;
+        const activeCount = workers.filter((worker) => {
+          const status = String(worker.status?.status || worker.status || '').toLowerCase();
+          return status === 'running' || status === 'active';
+        }).length;
+        const attentionCount = workers.filter((worker) => {
+          const health = String(worker.health?.status || worker.health || '').toLowerCase();
+          return ['degraded', 'critical', 'unhealthy', 'red', 'yellow'].includes(health);
+        }).length;
+
+        activeEl.textContent = activeCount;
+        attentionEl.textContent = attentionCount;
+      };
+`;
+const getWorkersScriptFetch = () => `
+      const fetchWorkers = async () => {
+        setError('');
+        try {
+          const query = new URLSearchParams({
+            detail: 'true',
+            storage: storageMode,
+          });
+          const response = await fetch(API_BASE + '/api/workers?' + query.toString());
+          if (!response.ok) throw new Error('Failed to load workers');
+          const payload = await response.json();
+          const workers = payload.workers || [];
+          renderWorkers(workers);
+          updateSummary(workers);
+          lastUpdated.textContent = 'Updated ' + new Date().toLocaleTimeString();
+        } catch (error) {
+          setError(error.message || 'Failed to load worker data');
+        }
+      };
+
+      const handleAction = async (action, workerName, extraParams = {}, methodOverride) => {
+        setError('');
+        try {
+          if (!workerName) {
+            throw new Error('Missing worker name');
+          }
+          const query = new URLSearchParams({ storage: storageMode, ...extraParams });
+          const path = action ? '/' + action : '';
+          const response = await fetch(
+            API_BASE + '/api/workers/' + workerName + path + '?' + query.toString(),
+            {
+            method: methodOverride || 'POST',
+            }
+          );
+          if (!response.ok) throw new Error('Action failed');
+          await fetchWorkers();
+        } catch (error) {
+          setError(error.message || 'Failed to execute action');
+        }
+      };
+`;
+const getWorkersScriptControls = () => `
+      bodyEl.addEventListener('click', (event) => {
+        const target = event.target;
+        if (!target || !target.dataset) return;
+        if (target.dataset.action && target.dataset.worker) {
+          if (target.dataset.action === 'auto-start') {
+            return;
+          }
+          if (target.dataset.action === 'delete') {
+            const first = window.confirm('Delete this worker?');
+            if (!first) return;
+            const second = window.confirm('This cannot be undone. Delete worker permanently?');
+            if (!second) return;
+            handleAction('', target.dataset.worker, {}, 'DELETE');
+            return;
+          }
+          handleAction(target.dataset.action, target.dataset.worker);
+        }
+      });
+
+      bodyEl.addEventListener('change', (event) => {
+        const target = event.target;
+        if (!target || !target.dataset) return;
+        if (target.dataset.action === 'auto-start' && target.dataset.worker) {
+          const nextValue = target.checked === true;
+          const confirmMessage = nextValue
+            ? 'Enable auto start for this worker?'
+            : 'Disable auto start for this worker?';
+          if (!window.confirm(confirmMessage)) {
+            target.checked = !nextValue;
+            return;
+          }
+          handleAction('auto-start', target.dataset.worker, { enabled: String(nextValue) });
+        }
+      });
+
+      refreshBtn.addEventListener('click', () => fetchWorkers());
+      if (storageSelect) {
+        storageSelect.addEventListener('change', (event) => {
+          setStorageValue(event.target.value);
+          writeStorage(STORAGE_KEYS.storageMode, storageMode);
+          fetchWorkers();
+        });
+      }
+      autoBtn.addEventListener('click', () => {
+        autoRefresh = !autoRefresh;
+        setAutoLabel();
+        writeStorage(STORAGE_KEYS.autoRefresh, String(autoRefresh));
+        if (autoRefresh) {
+          autoTimer = setInterval(fetchWorkers, REFRESH_INTERVAL);
+        } else if (autoTimer) {
+          clearInterval(autoTimer);
+        }
+      });
+`;
+const getWorkersScriptBootstrap = () => `
+      const storedAuto = readStorage(STORAGE_KEYS.autoRefresh);
+      if (storedAuto !== null) {
+        autoRefresh = storedAuto === 'true';
+      }
+      const storedStorage = readStorage(STORAGE_KEYS.storageMode);
+      if (storedStorage) {
+        setStorageValue(storedStorage);
+      } else {
+        setStorageValue('memory');
+      }
+      setAutoLabel();
+
+      if (autoRefresh) {
+        autoTimer = setInterval(fetchWorkers, REFRESH_INTERVAL);
+      }
+
+      fetchWorkers();
+`;
+const getWorkersScript = (options, apiBaseUrl) => `
+    <script>
+${getWorkersScriptState(options, apiBaseUrl)}
+${getWorkersScriptStorage()}
+${getWorkersScriptError()}
+${getWorkersScriptBadges()}
+${getWorkersScriptTone()}
+${getWorkersScriptRenderRowTemplate()}
+${getWorkersScriptRenderRows()}
+${getWorkersScriptRenderSummary()}
+${getWorkersScriptFetch()}
+${getWorkersScriptControls()}
+${getWorkersScriptBootstrap()}
+    </script>`;
+export const getWorkersHtml = (options) => {
+    const apiBaseUrl = normalizeBasePath(options.apiBaseUrl ?? '');
+    return `<!DOCTYPE html>
+<html lang="en">
+${getWorkersHead()}
+  <body>
+${getWorkersBody()}
+${getWorkersScript(options, apiBaseUrl)}
+  </body>
+</html>`;
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zintrust/queue-monitor",
-  "version": "0.4.64",
+  "version": "0.4.68",
   "description": "Queue monitoring package for ZinTrust with BullMQ and Redis.",
   "private": false,
   "type": "module",
@@ -20,7 +20,7 @@
     "node": ">=20.0.0"
   },
   "peerDependencies": {
-    "@zintrust/core": "^0.4.64"
+    "@zintrust/core": "^0.4.68"
   },
   "publishConfig": {
     "access": "public"