@zintrust/workers 0.4.48 → 0.4.60

package/dist/WorkerFactory.js

@@ -4,7 +4,7 @@
  * Sealed namespace for immutability
  */
 import * as ZintrustCoreModule from '@zintrust/core';
-import { Cloudflare, createRedisConnection, databaseConfig, Env, ErrorFactory, generateUuid, getBullMQSafeQueueName, isFunction, isNonEmptyString, isObject, JobStateTracker, Logger, NodeSingletons, queueConfig, registerDatabasesFromRuntimeConfig, useEnsureDbConnected, workersConfig, ZintrustLang, } from '@zintrust/core';
+import { Cloudflare, createRedisConnection, databaseConfig, DatabaseConnectionRegistry, Env, ErrorFactory, generateUuid, getBullMQSafeQueueName, isFunction, isNonEmptyString, isObject, JobStateTracker, Logger, NodeSingletons, queueConfig, registerDatabasesFromRuntimeConfig, useEnsureDbConnected, workersConfig, ZintrustLang, } from '@zintrust/core';
 import { Worker } from 'bullmq';
 import { AutoScaler } from './AutoScaler.js';
 import { CanaryController } from './CanaryController.js';
@@ -23,6 +23,7 @@ import { WorkerMetrics } from './WorkerMetrics.js';
 import { WorkerRegistry } from './WorkerRegistry.js';
 import { WorkerVersioning } from './WorkerVersioning.js';
 import { keyPrefix } from './config/workerConfig.js';
+import { recordQueueMonitorJob } from './queueMonitorHistory.js';
 import { DbWorkerStore, InMemoryWorkerStore, RedisWorkerStore, } from './storage/WorkerStore.js';
 const path = NodeSingletons.path;
 const isNodeRuntime = () => typeof process !== 'undefined' && Boolean(process.versions?.node);
@@ -63,7 +64,7 @@ const resolveRuntimeBridgeUrl = (specifier) => {
     const filePath = path.join(dir, `${safeName}.bridge.mjs`);
     const exportLines = Object.keys(bridgeModule)
         .filter((key) => key !== 'default' && isValidBridgeExportName(key))
-        .sort()
+        .sort((a, b) => a.localeCompare(b))
         .map((key) => `export const ${key} = bridge[${JSON.stringify(key)}];`);
     const code = [
         'const bridgeMap = globalThis.__zintrustProcessorPackageBridges__;',
@@ -1544,19 +1545,25 @@ const resolvePersistenceConfig = (config) => {
     throw ErrorFactory.createConfigError('WORKER_PERSISTENCE_DRIVER must be one of memory, redis, or database');
 };
 const resolveDbClientFromEnv = async (connectionName = 'default') => {
-    const connect = async () => await useEnsureDbConnected(undefined, connectionName);
-    try {
-        return await connect();
-    }
-    catch (error) {
-        Logger.error('Worker persistence failed to resolve database connection', error);
+    // Eagerly populate the registry when the requested connection is not yet
+    // registered.  On both the Cloudflare Workers runtime and Node, the registry
+    // may be empty when called from the workers-persistence path because
+    // registerDatabasesFromRuntimeConfig has not yet run for this connection. The
+    // old pattern of connecting first (which always fails) then registering as a
+    // fallback produced spurious [DEBUG] noise on every fresh start.
+    if (DatabaseConnectionRegistry.get(connectionName) === undefined) {
+        try {
+            registerDatabasesFromRuntimeConfig(databaseConfig);
+        }
+        catch (registrationError) {
+            Logger.warn(`[WorkerPersistence] Runtime database registration failed for connection '${connectionName}'`, registrationError);
+        }
     }
     try {
-        registerDatabasesFromRuntimeConfig(databaseConfig);
-        return await connect();
+        return await useEnsureDbConnected(undefined, connectionName);
     }
     catch (error) {
-        Logger.error('Worker persistence failed after registering runtime databases', error);
+        Logger.error('Worker persistence failed to resolve database connection', error);
         throw ErrorFactory.createConfigError(`Worker persistence requires a database client. Register connection '${connectionName}' or pass infrastructure.persistence.client.`);
     }
 };
@@ -1899,10 +1906,15 @@ const initializeDatacenter = (config) => {
         },
     });
 };
-const setupWorkerEventListeners = (worker, workerName, workerVersion, features) => {
+const setupWorkerEventListeners = (worker, workerName, queueName, workerVersion, features) => {
     worker.on('completed', (job) => {
         try {
             Logger.debug(`Job completed: ${workerName}`, { jobId: job.id });
+            void recordQueueMonitorJob({
+                queueName,
+                status: 'completed',
+                job,
+            });
             if (features?.observability === true) {
                 Observability.incrementCounter('worker.jobs.completed', 1, {
                     worker: workerName,
@@ -1918,6 +1930,14 @@ const setupWorkerEventListeners = (worker, workerName, workerVersion, features)
     worker.on('failed', (job, error) => {
         try {
             Logger.error(`Job failed: ${workerName}`, { error, jobId: job?.id }, 'workers');
+            if (job) {
+                void recordQueueMonitorJob({
+                    queueName,
+                    status: 'failed',
+                    job,
+                    error,
+                });
+            }
             if (features?.observability === true) {
                 Observability.incrementCounter('worker.jobs.failed', 1, {
                     worker: workerName,
@@ -2081,7 +2101,7 @@ export const WorkerFactory = Object.freeze({
             // Create BullMQ worker
             const resolvedOptions = resolveWorkerOptions(config, autoStart);
             const worker = new Worker(queueName, enhancedProcessor, resolvedOptions);
-            setupWorkerEventListeners(worker, name, workerVersion, features);
+            setupWorkerEventListeners(worker, name, queueName, workerVersion, features);
             // Update status to "starting"
             await store.update(name, {
                 status: WorkerCreationStatus.STARTING,

package/dist/WorkerShutdownDurableObject.d.ts

@@ -0,0 +1,12 @@
+type DurableObjectState = {
+    storage: {
+        get: (key: string) => Promise<unknown>;
+        put: (key: string, value: unknown) => Promise<void>;
+    };
+};
+export declare class ZinTrustWorkerShutdownDurableObject {
+    private readonly state;
+    constructor(state: DurableObjectState);
+    fetch(request: Request): Promise<Response>;
+}
+export {};

package/dist/WorkerShutdownDurableObject.js

@@ -0,0 +1,41 @@
+import { Logger } from '@zintrust/core';
+const loadState = async (state) => {
+    const stored = (await state.storage.get('shutdown'));
+    return stored ?? { shuttingDown: false };
+};
+const saveState = async (state, value) => {
+    await state.storage.put('shutdown', value);
+};
+// eslint-disable-next-line no-restricted-syntax
+export class ZinTrustWorkerShutdownDurableObject {
+    state;
+    constructor(state) {
+        this.state = state;
+    }
+    async fetch(request) {
+        const url = new URL(request.url);
+        const path = url.pathname;
+        if (request.method === 'GET' && path === '/status') {
+            const current = await loadState(this.state);
+            return new Response(JSON.stringify(current), {
+                status: 200,
+                headers: { 'content-type': 'application/json' },
+            });
+        }
+        if (request.method === 'POST' && path === '/shutdown') {
+            const payload = (await request.json().catch(() => ({})));
+            const next = {
+                shuttingDown: true,
+                startedAt: new Date().toISOString(),
+                reason: payload.reason ?? 'manual',
+            };
+            await saveState(this.state, next);
+            Logger.info('Worker shutdown requested via Durable Object', next);
+            return new Response(JSON.stringify({ ok: true }), {
+                status: 202,
+                headers: { 'content-type': 'application/json' },
+            });
+        }
+        return new Response('Not Found', { status: 404 });
+    }
+}

package/dist/build-manifest.json

@@ -1,15 +1,15 @@
 {
   "name": "@zintrust/workers",
-  "version": "0.4.48",
-  "buildDate": "2026-04-03T10:00:24.111Z",
+  "version": "0.4.60",
+  "buildDate": "2026-04-05T07:03:43.939Z",
   "buildEnvironment": {
-    "node": "v20.20.1",
-    "platform": "linux",
-    "arch": "x64"
+    "node": "v22.22.1",
+    "platform": "darwin",
+    "arch": "arm64"
   },
   "git": {
-    "commit": "0ac23637",
-    "branch": "master"
+    "commit": "be058c1d",
+    "branch": "release"
   },
   "package": {
     "engines": {
@@ -178,8 +178,8 @@
       "sha256": "3869f960c87260588e40941ff91bffcfa0757be7a04815fd28b57dd4840c51df"
     },
     "WorkerFactory.js": {
-      "size": 104787,
-      "sha256": "2ff4782577a8e15d28c5989f5bfe16af84ecdbdc4ecc860c716d0119dcc891e4"
+      "size": 105839,
+      "sha256": "b26135593d6e3849f5540d74d097082d8186b50c72a456722f83d624141c42c8"
     },
     "WorkerInit.d.ts": {
       "size": 3284,
@@ -213,6 +213,14 @@
       "size": 6643,
       "sha256": "bef3a37ebc8292f4f548d5f66890ef7d6dd386e39c4c1cc61db058fd8815c927"
     },
+    "WorkerShutdownDurableObject.d.ts": {
+      "size": 354,
+      "sha256": "521df11172067bc036bc7b95ff6adf40b7c594afa0454742963317ddfe776d37"
+    },
+    "WorkerShutdownDurableObject.js": {
+      "size": 1547,
+      "sha256": "9c7298133dfc4073fda80d3fe9a37ac00d31cacf500ce10c1dd43a70c3a8ddd7"
+    },
     "WorkerVersioning.d.ts": {
       "size": 2881,
       "sha256": "a3f1f9e518e8a46201b181679bb5d7a484da7c021b4b7cfd5653cf98fe36e995"
@@ -221,6 +229,10 @@
       "size": 10953,
       "sha256": "8af20d462270e7044c6ea983821f5b6e6ce8a5caf39b6e8fefff07c9a0bf071e"
     },
+    "build-manifest.json": {
+      "size": 19594,
+      "sha256": "7402721e5f5a98fb988fa78f5ee49b6e82f2f3fab1c3cfb8ca2bf8116012169f"
+    },
     "config/workerConfig.d.ts": {
       "size": 132,
       "sha256": "577486dd9e0ef5b5c27d070e0f6a383337d9d68725fae0f0bad258254b828a3b"
@@ -234,8 +246,8 @@
       "sha256": "dacd49f6c112eba439bdd9bb457eea90daedbf32efc381cd3189ce562fa5b0a8"
     },
     "createQueueWorker.js": {
-      "size": 14702,
-      "sha256": "69bf07658c185ad5b4bafd064bfc64ea257c769809b6d4811a274020b4a5a8e7"
+      "size": 15594,
+      "sha256": "0710f2fb6936a326cdbe6fa6a2b8acfb60f7c6b27acb2aed0b98bf2402fc67f4"
     },
     "dashboard/index.d.ts": {
       "size": 109,
@@ -258,8 +270,8 @@
       "sha256": "8e0e04329e1119d8ae835dd4458efead084293bcc2c263c09dd5a19d467e5ca4"
     },
     "dashboard/workers-api.js": {
-      "size": 28207,
-      "sha256": "ae1ff0e962b1f64e6d200a35c3b8b1de968341d8df6283625a3efce50a23826c"
+      "size": 28568,
+      "sha256": "c28f0d4b8134337a2cc71f1ce2f1d6195f44ccd9bb0b8fa26a4edaed88ee4fc0"
     },
     "helper/index.d.ts": {
       "size": 159,
@@ -403,7 +415,15 @@
     },
     "index.js": {
       "size": 2337,
-      "sha256": "ec0e7e4ee51acd850c41f6120d54d4600cd1e462d0dd5c1696b16bc3517177e0"
+      "sha256": "85a789d0f2ed71dde649f59658827ff16eaf2c1bc77df99b2297c7eb7e340108"
+    },
+    "queueMonitorHistory.d.ts": {
+      "size": 433,
+      "sha256": "1ba25cf47b0cad83e92c7b6481d12de974b921d0e01fc4cf17fc833acdf8b8c8"
+    },
+    "queueMonitorHistory.js": {
+      "size": 2194,
+      "sha256": "03d406adc046e18c3526837a654fae93b112fb6010ddc1163b129d10e934c4d4"
     },
     "register.d.ts": {
       "size": 256,
@@ -524,6 +544,22 @@
     "ui/types/worker-ui.js": {
       "size": 94,
       "sha256": "7e9f752c2a8eb29dab365b0c836bac90fa7d3567aaf961537d3aa782e85c884e"
+    },
+    "ui/workers/index.html": {
+      "size": 7940,
+      "sha256": "a71e384de568f720ff23bf5c90dca60cc97d30c0bbb4ccf5c3b026a8086381b4"
+    },
+    "ui/workers/main.js": {
+      "size": 60723,
+      "sha256": "8437771f28963e1b039bee0b1721a8e83a8c65bed19dbd89af0e37d5a2882bb4"
+    },
+    "ui/workers/styles.css": {
+      "size": 22652,
+      "sha256": "6de91f206251b0b69ca1a41b71b454b00e3b1213a9762abd8fd8f0ff0381556b"
+    },
+    "ui/workers/zintrust.svg": {
+      "size": 1035,
+      "sha256": "9b791269aad740b4191b0ae9f005b08bb28a3407a79a8ed38c11d225fa443f69"
     }
   }
 }

package/dist/createQueueWorker.js

@@ -1,5 +1,6 @@
 import * as Core from '@zintrust/core';
 import { Env, Logger, Queue } from '@zintrust/core';
+import { recordQueueMonitorJob } from './queueMonitorHistory.js';
 const TypedQueue = Queue;
 const RETRY_BASE_DELAY_MS = 1000;
 const RETRY_MAX_DELAY_MS = 30000;
@@ -168,6 +169,18 @@ const checkAndRequeueIfNotDue = async (options, queueName, driverName, message,
 };
 const onProcessSuccess = async (input) => {
     await TypedQueue.ack(input.queueName, input.message.id, input.driverName);
+    await recordQueueMonitorJob({
+        queueName: input.queueName,
+        status: 'completed',
+        job: {
+            id: input.message.id,
+            name: `${input.queueName}-job`,
+            data: input.message.payload,
+            attemptsMade: getAttemptsFromMessage(input.message),
+            processedOn: input.startedAtMs,
+            finishedOn: Date.now(),
+        },
+    });
     if (typeof input.trackerApi.completed === 'function') {
         await input.trackerApi.completed({
             queueName: input.queueName,
@@ -217,6 +230,20 @@ const onProcessFailure = async (input) => {
         });
     }
     await TypedQueue.ack(input.queueName, input.message.id, input.driverName);
+    await recordQueueMonitorJob({
+        queueName: input.queueName,
+        status: 'failed',
+        job: {
+            id: input.message.id,
+            name: `${input.queueName}-job`,
+            data: input.message.payload,
+            attemptsMade: nextAttempts,
+            failedReason: failure.message,
+            processedOn: Date.now(),
+            finishedOn: Date.now(),
+        },
+        error: failure,
+    });
     await removeHeartbeatIfSupported(input.queueName, input.message.id);
     if (typeof input.trackerApi.failed === 'function') {
         await input.trackerApi.failed({

package/dist/dashboard/workers-api.js

@@ -457,6 +457,12 @@ async function getRedisQueueData() {
             throw ErrorFactory.createConfigError('Redis driver not configured');
         }
         const monitor = QueueMonitor.create({
+            knownQueues: async () => {
+                const records = await WorkerFactory.listPersistedRecords();
+                return Array.from(new Set(records
+                    .map((record) => record.queueName)
+                    .filter((queueName) => typeof queueName === 'string'))).sort((left, right) => left.localeCompare(right));
+            },
             redis: {
                 host: redisConfig.host || 'localhost',
                 port: redisConfig.port || 6379,

package/dist/queueMonitorHistory.d.ts

@@ -0,0 +1,17 @@
+type QueueMonitorStatus = 'completed' | 'failed';
+type QueueMonitorJobLike = {
+    id?: string;
+    name?: string;
+    data?: unknown;
+    attemptsMade?: number;
+    failedReason?: string;
+    processedOn?: number;
+    finishedOn?: number;
+};
+export declare const recordQueueMonitorJob: (input: {
+    queueName: string;
+    status: QueueMonitorStatus;
+    job: QueueMonitorJobLike;
+    error?: Error;
+}) => Promise<void>;
+export {};

package/dist/queueMonitorHistory.js

@@ -0,0 +1,62 @@
+import { isNonEmptyString, isObject, Logger, queueConfig } from '@zintrust/core';
+let queueMonitorMetricsPromise = null;
+const toFiniteInteger = (value, fallback) => {
+    if (typeof value === 'number' && Number.isFinite(value)) {
+        return Math.floor(value);
+    }
+    if (typeof value === 'string' && value.trim() !== '') {
+        const parsed = Number(value);
+        if (Number.isFinite(parsed)) {
+            return Math.floor(parsed);
+        }
+    }
+    return fallback;
+};
+const resolveQueueMonitorRedisConfig = () => {
+    const redisConfig = queueConfig?.drivers?.redis;
+    if (!isObject(redisConfig) || redisConfig['driver'] !== 'redis') {
+        return null;
+    }
+    const host = isNonEmptyString(redisConfig['host']) ? redisConfig['host'].trim() : '127.0.0.1';
+    const port = toFiniteInteger(redisConfig['port'], 6379);
+    const db = toFiniteInteger(redisConfig['database'], 0);
+    const password = isNonEmptyString(redisConfig['password']) ? redisConfig['password'] : undefined;
+    return { host, port, password, db };
+};
+const loadQueueMonitorMetrics = async () => {
+    const redisConfig = resolveQueueMonitorRedisConfig();
+    if (redisConfig === null) {
+        return null;
+    }
+    try {
+        const module = (await import('@zintrust/queue-monitor'));
+        if (typeof module.createMetrics !== 'function') {
+            return null;
+        }
+        return module.createMetrics(redisConfig);
+    }
+    catch (error) {
+        Logger.debug('Queue monitor metrics are unavailable for worker history recording', error);
+        return null;
+    }
+};
+const getQueueMonitorMetrics = async () => {
+    queueMonitorMetricsPromise ??= loadQueueMonitorMetrics();
+    return queueMonitorMetricsPromise;
+};
+export const recordQueueMonitorJob = async (input) => {
+    const metrics = await getQueueMonitorMetrics();
+    if (metrics === null) {
+        return;
+    }
+    try {
+        await metrics.recordJob(input.queueName, input.status, input.job, input.error);
+    }
+    catch (error) {
+        Logger.debug('Queue monitor history write failed', {
+            queueName: input.queueName,
+            status: input.status,
+            error,
+        });
+    }
+};

package/dist/ui/workers/index.html

@@ -0,0 +1,202 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>ZinTrust Workers Dashboard</title>
+    <link rel="stylesheet" href="workers/styles.css" />
+  </head>
+  <body>
+    <div class="container">
+      <div class="header">
+        <div class="header-top">
+          <div style="display: flex; align-items: center; gap: 16px">
+            <div class="logo-frame">
+              <img src="workers/zintrust.svg" alt="ZinTrust" class="logo-img" />
+            </div>
+            <h1>ZinTrust Workers</h1>
+          </div>
+          <div class="header-actions">
+            <button id="theme-toggle" class="theme-toggle">
+              <svg class="icon" viewBox="0 0 24 24">
+                <circle cx="12" cy="12" r="5" />
+                <path
+                  d="M12 1v2M12 21v2M4.22 4.22l1.42 1.42M18.36 18.36l1.42 1.42M1 12h2M21 12h2M4.22 19.78l1.42-1.42M18.36 5.64l1.42-1.42"
+                />
+              </svg>
+              Theme
+            </button>
+            <button id="auto-refresh-toggle" class="btn" onclick="toggleAutoRefresh()">
+              <svg id="auto-refresh-icon" class="icon" viewBox="0 0 24 24">
+                <polygon points="5 3 19 12 5 21 5 3" />
+              </svg>
+              <span id="auto-refresh-label">Auto Refresh</span>
+            </button>
+            <button class="btn" onclick="fetchData()">
+              <svg class="icon" viewBox="0 0 24 24">
+                <path d="M23 4v6h-6" />
+                <path d="M1 20v-6h6" />
+                <path d="M3.51 9a9 9 0 0 1 14.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0 0 20.49 15" />
+              </svg>
+              Refresh
+            </button>
+            <button class="btn btn-primary" onclick="showAddWorkerModal()">
+              <svg class="icon" viewBox="0 0 24 24">
+                <line x1="12" y1="5" x2="12" y2="19" />
+                <line x1="5" y1="12" x2="19" y2="12" />
+              </svg>
+              Add Worker
+            </button>
+          </div>
+        </div>
+
+        <div class="nav-bar">
+          <nav class="nav-links">
+            <a href="/queue-monitor" class="nav-link">Queue Monitor</a>
+            <a href="/telemetry" class="nav-link">Telemetry</a>
+            <a href="/metrics" class="nav-link">Metrics</a>
+          </nav>
+        </div>
+
+        <div class="filters-bar">
+          <div class="filter-group">
+            <span>Status:</span>
+            <select id="status-filter">
+              <option value="">All Status</option>
+              <option value="running">Running</option>
+              <option value="stopped">Stopped</option>
+              <option value="error">Error</option>
+              <option value="paused">Paused</option>
+            </select>
+          </div>
+          <div class="filter-group">
+            <span>Driver:</span>
+            <select id="driver-filter">
+              <option value="">All Drivers</option>
+            </select>
+          </div>
+          <div class="filter-group">
+            <span>Sort:</span>
+            <select id="sort-select">
+              <option value="name">Sort by Name</option>
+              <option value="status" selected>Sort by Status</option>
+              <option value="driver">Sort by Driver</option>
+              <option value="health">Sort by Health</option>
+              <option value="version">Sort by Version</option>
+              <option value="processed">Sort by Performance</option>
+            </select>
+          </div>
+          <div style="flex-grow: 1"></div>
+          <div class="search-box">
+            <svg class="search-icon" viewBox="0 0 24 24">
+              <circle cx="11" cy="11" r="8"></circle>
+              <line x1="21" y1="21" x2="16.65" y2="16.65"></line>
+            </svg>
+            <input type="text" id="search-input" placeholder="Search workers..." />
+          </div>
+        </div>
+      </div>
+
+      <div id="loading" style="text-align: center; padding: 40px; color: var(--muted)">
+        <div>Loading workers...</div>
+      </div>
+
+      <div
+        id="error"
+        style="display: none; text-align: center; padding: 40px; color: var(--danger)"
+      >
+        <div>Failed to load workers data</div>
+        <button class="btn" onclick="fetchData()" style="margin-top: 16px">Retry</button>
+      </div>
+
+      <div id="workers-content" style="display: none">
+        <div class="summary-bar" id="queue-summary">
+          <div class="summary-item">
+            <span class="summary-label">Queue Driver</span>
+            <span class="summary-value" id="queue-driver">-</span>
+          </div>
+          <div class="summary-item">
+            <span class="summary-label">Queues</span>
+            <span class="summary-value" id="queue-total">0</span>
+          </div>
+          <div class="summary-item">
+            <span class="summary-label">Jobs</span>
+            <span class="summary-value" id="queue-jobs">0</span>
+          </div>
+          <div class="summary-item">
+            <span class="summary-label">Processing</span>
+            <span class="summary-value" id="queue-processing">0</span>
+          </div>
+          <div class="summary-item">
+            <span class="summary-label">Failed</span>
+            <span class="summary-value" id="queue-failed">0</span>
+          </div>
+          <div class="summary-item">
+            <span class="summary-label">Drivers</span>
+            <div class="drivers-list" id="drivers-list"></div>
+          </div>
+        </div>
+        <div class="table-container">
+          <div class="table-wrapper">
+            <table>
+              <thead>
+                <tr>
+                  <th style="width: 250px">Worker</th>
+                  <th style="width: 120px">Status</th>
+                  <th style="width: 120px">Health</th>
+                  <th style="width: 100px">Driver</th>
+                  <th style="width: 100px">Version</th>
+                  <th style="width: 320px">Performance</th>
+                  <th style="width: 180px">Actions</th>
+                </tr>
+              </thead>
+              <tbody id="workers-tbody">
+                <!-- Workers will be populated here -->
+              </tbody>
+            </table>
+          </div>
+
+          <div class="pagination">
+            <div class="pagination-info" id="pagination-info">Showing 0-0 of 0 workers</div>
+            <div class="pagination-controls">
+              <button class="page-btn" id="prev-btn" onclick="loadPage('prev')" disabled>
+                <svg
+                  viewBox="0 0 24 24"
+                  fill="none"
+                  stroke="currentColor"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                >
+                  <polyline points="15 18 9 12 15 6"></polyline>
+                </svg>
+              </button>
+              <div id="page-numbers" style="display: flex; gap: 8px"></div>
+              <button class="page-btn" id="next-btn" onclick="loadPage('next')" disabled>
+                <svg
+                  viewBox="0 0 24 24"
+                  fill="none"
+                  stroke="currentColor"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                >
+                  <polyline points="9 18 15 12 9 6"></polyline>
+                </svg>
+              </button>
+
+              <div class="page-size-selector">
+                <span>Show:</span>
+                <select id="limit-select" onchange="changeLimit(this.value)">
+                  <option value="10">10</option>
+                  <option value="25">25</option>
+                  <option value="50">50</option>
+                  <option value="100">100</option>
+                </select>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <script src="workers/main.js"></script>
+  </body>
+</html>