@zintrust/queue-monitor 0.4.49 → 0.4.60

package/dist/dashboard-ui.js

@@ -239,7 +239,9 @@ const getDashboardBody = () => `
 const getDashboardScriptState = (options) => String.raw `
         const AUTO_REFRESH = ${options.autoRefresh ? 'true' : 'false'};
         const REFRESH_INTERVAL = ${Math.max(1000, Math.floor(options.refreshIntervalMs || 0))};
+    const STREAM_RESET_MS = Math.max(15000, REFRESH_INTERVAL * 4);
     const API_BASE = ${JSON.stringify(options.basePath)};
+    const ALL_QUEUES = '__all__';
         const THEME_KEY = 'zintrust-queue-monitor-theme';
         const AUTO_REFRESH_KEY = 'zintrust-queue-monitor-auto-refresh';
         const QUEUE_KEY = 'zintrust-queue-monitor-selected-queue';
@@ -250,6 +252,10 @@ const getDashboardScriptState = (options) => String.raw `
         let sseActive = false;
         let lastSseQueue = null;
         let lastSsePattern = null;
+        let reconnectTimer = null;
+        let streamWatchdogTimer = null;
+        let dashboardResetTimer = null;
+        let reconnectAttempts = 0;
         let currentTheme = null;
 `;
 const getDashboardScriptTheme = () => `
@@ -308,6 +314,8 @@ const getDashboardScriptAutoRefresh = () => `
                     eventSource = null;
                 }
                 sseActive = false;
+                clearSseTimers();
+                clearError();
             }
 
             if (autoRefreshEnabled && !sseActive) {
@@ -329,8 +337,6 @@ const getDashboardScriptAutoRefresh = () => `
 const getRenderStatsFunction = () => `
         function renderStats(data) {
             const grid = document.getElementById('stats-grid');
-            grid.innerHTML = '';
-
             const totalActive = data.queues.reduce((acc, q) => acc + q.counts.active, 0);
             const totalFailed = data.queues.reduce((acc, q) => acc + q.counts.failed, 0);
             const totalDelayed = data.queues.reduce((acc, q) => acc + q.counts.delayed, 0);
@@ -366,121 +372,299 @@ const getRenderStatsFunction = () => `
                 }
             ];
 
-            cards.forEach(card => {
-                const div = document.createElement('div');
-                div.className = 'tile';
-                const infoIcon = '<span class="info-icon" data-info="' + card.info + '">i</span>';
-                div.innerHTML =
-                    '<div class="stat-header">' +
-                    '<div class="stat-label">' + card.label + '</div>' +
-                    infoIcon +
-                    '</div>' +
-                    '<div class="stat-value" style="' + (card.color ? 'color:' + card.color : '') + '">' +
-                    card.value +
-                    '</div>';
-                grid.appendChild(div);
-            });
+            cards.forEach((card, index) => {
+                let div = grid.children[index];
+                let labelEl;
+                let valueEl;
+                let iconEl;
+
+                if (!div) {
+                    div = document.createElement('div');
+                    div.className = 'tile';
+
+                    const header = document.createElement('div');
+                    header.className = 'stat-header';
+
+                    labelEl = document.createElement('div');
+                    labelEl.className = 'stat-label';
+
+                    iconEl = document.createElement('span');
+                    iconEl.className = 'info-icon';
+                    iconEl.textContent = 'i';
+                    iconEl.addEventListener('mouseenter', showTooltip);
+                    iconEl.addEventListener('mouseleave', hideTooltip);
+
+                    valueEl = document.createElement('div');
+                    valueEl.className = 'stat-value';
+
+                    header.appendChild(labelEl);
+                    header.appendChild(iconEl);
+                    div.appendChild(header);
+                    div.appendChild(valueEl);
+                    grid.appendChild(div);
+                } else {
+                    labelEl = div.querySelector('.stat-label');
+                    valueEl = div.querySelector('.stat-value');
+                    iconEl = div.querySelector('.info-icon');
+                }
 
-            document.querySelectorAll('.info-icon').forEach(icon => {
-                icon.addEventListener('mouseenter', showTooltip);
-                icon.addEventListener('mouseleave', hideTooltip);
+                if (labelEl) labelEl.textContent = card.label;
+                if (valueEl) {
+                    valueEl.textContent = String(card.value);
+                    valueEl.style.color = card.color || '';
+                }
+                if (iconEl) iconEl.setAttribute('data-info', card.info);
             });
+
+            while (grid.children.length > cards.length) {
+                grid.removeChild(grid.lastElementChild);
+            }
         }`;
 const getUpdateQueueSelectFunction = () => `
         function updateQueueSelect(queues) {
             const select = document.getElementById('queue-select');
-            const currentSelection = select.value || currentQueue;
-            select.innerHTML = '';
+            const storedQueue = localStorage.getItem(QUEUE_KEY);
+            const preferredQueue = currentQueue || select.value || storedQueue || '';
+
+            if (queues.length === 0) {
+                select.disabled = true;
+                if (select.options.length !== 1 || select.options[0].value !== '' || select.options[0].textContent !== 'No queues') {
+                    select.innerHTML = '<option value="">No queues</option>';
+                }
+                return '';
+            }
+
+            const queueNames = queues.map(q => q.name);
+            const totalWaiting = queues.reduce((acc, queue) => acc + queue.counts.waiting, 0);
+            const totalFailed = queues.reduce((acc, queue) => acc + queue.counts.failed, 0);
+
+            const nextQueue = preferredQueue === ALL_QUEUES || queueNames.includes(preferredQueue)
+                ? preferredQueue
+                : queueNames[0];
+            const desiredOptions = [
+                {
+                    value: ALL_QUEUES,
+                    text: 'All queues (' + totalWaiting + ' waiting, ' + totalFailed + ' failed)'
+                },
+                ...queues.map(q => ({
+                    value: q.name,
+                    text: q.name + ' (' + q.counts.waiting + ' waiting, ' + q.counts.failed + ' failed)'
+                }))
+            ];
+
+            const existingOptions = new Map();
+            Array.from(select.options).forEach(option => {
+                existingOptions.set(option.value, option);
+            });
+
+            select.disabled = false;
+
+            desiredOptions.forEach((item, index) => {
+                let option = existingOptions.get(item.value);
+                if (!option) {
+                    option = document.createElement('option');
+                    option.value = item.value;
+                }
 
-            if (queues.length === 0) return
+                option.textContent = item.text;
+                option.selected = item.value === nextQueue;
 
-            queues.forEach(q => {
-                const opt = document.createElement('option');
-                opt.value = q.name;
-                opt.textContent = q.name + ' (' + q.counts.waiting + ' waiting, ' + q.counts.failed + ' failed)';
-                opt.selected = q.name === currentSelection;
-                select.appendChild(opt);
+                const currentAtIndex = select.options[index];
+                if (currentAtIndex !== option) {
+                    select.appendChild(option);
+                }
             });
+
+            Array.from(select.options).forEach(option => {
+                if (!desiredOptions.some(item => item.value === option.value)) {
+                    option.remove();
+                }
+            });
+
+            select.value = nextQueue;
+            return nextQueue;
         }`;
-const getRenderJobsFunction = () => `
+const getRenderJobsStateFunction = () => `
         // Track expanded job IDs to preserve state during SSE updates
         let expandedJobIds = new Set();
+`;
+const getRenderJobsDetailHelpersFunction = () => `
+        function getJobId(job) {
+            return String(job.id);
+        }
 
-        function renderJobs(jobs) {
-            const tbody = document.querySelector('#jobs-table tbody');
+        function getJobStatusInfo(job) {
+            const status = (job.status || (job.failedReason ? 'failed' : 'completed')).toLowerCase();
+            const statusMap = {
+                failed: { label: 'Failed', cls: 'status-failed' },
+                completed: { label: 'Completed', cls: 'status-completed' },
+                active: { label: 'Active', cls: 'status-active' },
+                waiting: { label: 'Waiting', cls: 'status-waiting' },
+                delayed: { label: 'Delayed', cls: 'status-delayed' },
+                paused: { label: 'Paused', cls: 'status-paused' }
+            };
 
-            // Store currently expanded job IDs before clearing
-            const currentExpanded = document.querySelectorAll('.expand-icon.expanded');
-            currentExpanded.forEach(icon => {
-                const row = icon.closest('tr');
-                if (row) {
-                    const jobId = row.querySelector('code')?.textContent;
-                    if (jobId) expandedJobIds.add(jobId);
-                }
+            return statusMap[status] || statusMap.completed;
+        }
+
+        function getJobRetryMarkup(job) {
+            const status = (job.status || (job.failedReason ? 'failed' : 'completed')).toLowerCase();
+            if (status === 'failed') {
+                return '<button class="retry-btn" onclick="retryJob(' + "'" + job.id + "'" + ', ' + "'" + (job.queue || currentQueue) + "'" + ')" title="Retry this job">↻ Retry</button>';
+            }
+            return '<span style="color: var(--muted); font-size: 11px;">—</span>';
+        }
+
+        function buildJobDetailMarkup(job) {
+            const jobData = {
+                id: job.id,
+                name: job.name,
+                queue: job.queue || currentQueue,
+                status: job.status || (job.failedReason ? 'failed' : 'completed'),
+                attempts: job.attempts,
+                timestamp: new Date(job.timestamp).toISOString(),
+                data: job.data || {},
+                failedReason: job.failedReason || null,
+                processedOn: job.processedOn ? new Date(job.processedOn).toISOString() : null,
+                finishedOn: job.finishedOn ? new Date(job.finishedOn).toISOString() : null,
+                returnvalue: job.returnvalue
+            };
+
+            return '<td colspan="7" class="detail-cell">' +
+                '<div class="detail-content">' +
+                '<strong style="color: var(--accent); display: block; margin-bottom: 8px;">Job Details:</strong>' +
+                '<pre>' + JSON.stringify(jobData, null, 2) + '</pre>' +
+                '</div>' +
+                '</td>';
+        }
+
+        function removeJobDetailRow(row) {
+            const existingDetail = row.nextElementSibling;
+            if (existingDetail && existingDetail.classList.contains('detail-row')) {
+                existingDetail.remove();
+            }
+        }
+
+        function upsertJobDetailRow(row, job, parent) {
+            const existingDetail = row.nextElementSibling && row.nextElementSibling.classList.contains('detail-row')
+                ? row.nextElementSibling
+                : null;
+
+            let detailRow = existingDetail;
+            if (!detailRow) {
+                detailRow = document.createElement('tr');
+                detailRow.className = 'detail-row';
+            }
+
+            detailRow.dataset.jobId = getJobId(job);
+            detailRow.innerHTML = buildJobDetailMarkup(job);
+
+            if (parent) {
+                parent.appendChild(detailRow);
+            } else {
+                row.parentNode.insertBefore(detailRow, row.nextSibling);
+            }
+        }
+
+        function ensureEmptyJobsState(tbody) {
+            if (
+                tbody.children.length === 1 &&
+                tbody.children[0].textContent.includes('No recent jobs found')
+            ) {
+                return;
+            }
+
+            tbody.innerHTML = '<tr><td colspan="7" style="text-align:center; color: var(--muted)">No recent jobs found</td></tr>';
+        }
+`;
+const getRenderJobsRowHelpersFunction = () => `
+        function createJobRow(job, idx) {
+            const tr = document.createElement('tr');
+            tr.className = 'expandable-row';
+            tr.addEventListener('click', (e) => {
+                if (e.target.classList.contains('retry-btn')) return;
+                toggleJobDetails(tr, tr.__jobData);
             });
+            updateExistingJobRow(tr, job, idx);
+            return tr;
+        }
 
-            tbody.innerHTML = '';
+        function updateExistingJobRow(tr, job, idx) {
+            const jobId = getJobId(job);
+            const statusInfo = getJobStatusInfo(job);
+            const isExpanded = expandedJobIds.has(jobId);
+
+            tr.__jobData = job;
+            tr.dataset.jobId = jobId;
+            tr.dataset.jobIndex = idx;
+            tr.innerHTML =
+                '<td><span class="expand-icon' + (isExpanded ? ' expanded' : '') + '">▶</span><code>' + job.id + '</code></td>' +
+                '<td>' + job.name + '</td>' +
+                '<td>' + (job.queue || currentQueue) + '</td>' +
+                '<td><span class="status-badge ' + statusInfo.cls + '">' + statusInfo.label + '</span></td>' +
+                '<td>' + job.attempts + '</td>' +
+                '<td>' + new Date(job.timestamp).toLocaleTimeString() + '</td>' +
+                '<td>' + getJobRetryMarkup(job) + '</td>';
+
+            if (job.failedReason) {
+                tr.title = 'Click to see error details';
+            } else {
+                tr.removeAttribute('title');
+            }
+        }
 
-            if (!jobs || jobs.length === 0) {
-                tbody.innerHTML = '<tr><td colspan="7" style="text-align:center; color: var(--muted)">No recent jobs found</td></tr>';
+        function getExistingJobRows(tbody) {
+            const rows = new Map();
+            Array.from(tbody.querySelectorAll('tr.expandable-row')).forEach(row => {
+                const jobId = row.dataset.jobId || row.querySelector('code')?.textContent;
+                if (jobId) rows.set(jobId, row);
+            });
+            return rows;
+        }
+
+        function removeObsoleteJobRows(tbody, currentJobIds) {
+            Array.from(tbody.querySelectorAll('tr.expandable-row')).forEach(row => {
+                const jobId = row.dataset.jobId || row.querySelector('code')?.textContent;
+                if (!jobId || currentJobIds.has(jobId)) return;
+                removeJobDetailRow(row);
+                row.remove();
+                expandedJobIds.delete(jobId);
+            });
+        }
+`;
+const getRenderJobsFunction = () => `
+        function renderJobs(jobs) {
+            const tbody = document.querySelector('#jobs-table tbody');
+            const jobList = Array.isArray(jobs) ? jobs : [];
+
+            if (jobList.length === 0) {
+                ensureEmptyJobsState(tbody);
+                expandedJobIds.clear();
                 return;
             }
 
-            jobs.forEach((job, idx) => {
-                const tr = document.createElement('tr');
-                tr.className = 'expandable-row';
-                tr.dataset.jobIndex = idx;
-                const status = (job.status || (job.failedReason ? 'failed' : 'completed')).toLowerCase();
-                const statusMap = {
-                    failed: { label: 'Failed', cls: 'status-failed' },
-                    completed: { label: 'Completed', cls: 'status-completed' },
-                    active: { label: 'Active', cls: 'status-active' },
-                    waiting: { label: 'Waiting', cls: 'status-waiting' },
-                    delayed: { label: 'Delayed', cls: 'status-delayed' },
-                    paused: { label: 'Paused', cls: 'status-paused' }
-                };
-                const statusInfo = statusMap[status] || statusMap.completed;
-
-                const retryBtn = status === 'failed'
-                    ? '<button class="retry-btn" onclick="retryJob(' + "'" + job.id + "'" + ', ' + "'" + (job.queue || currentQueue) + "'" + ')" title="Retry this job">↻ Retry</button>'
-                    : '<span style="color: var(--muted); font-size: 11px;">—</span>';
-
-                // Check if this job was previously expanded
-                const isExpanded = expandedJobIds.has(job.id);
-
-                tr.innerHTML =
-                    '<td><span class="expand-icon' + (isExpanded ? ' expanded' : '') + '">▶</span><code>' + job.id + '</code></td>' +
-                    '<td>' + job.name + '</td>' +
-                    '<td>' + (job.queue || currentQueue) + '</td>' +
-                    '<td><span class="status-badge ' +
-                    statusInfo.cls +
-                    '">' +
-                    statusInfo.label +
-                    '</span></td>' +
-                    '<td>' + job.attempts + '</td>' +
-                    '<td>' + new Date(job.timestamp).toLocaleTimeString() + '</td>' +
-                    '<td>' + retryBtn + '</td>';
-                if (job.failedReason) {
-                    tr.title = 'Click to see error details';
-                }
+            const currentJobIds = new Set(jobList.map(job => getJobId(job)));
+            removeObsoleteJobRows(tbody, currentJobIds);
 
-                tr.addEventListener('click', (e) => {
-                    if (e.target.classList.contains('retry-btn')) return;
-                    toggleJobDetails(tr, job);
-                });
+            const existingRows = getExistingJobRows(tbody);
 
-                tbody.appendChild(tr);
+            jobList.forEach((job, idx) => {
+                const jobId = getJobId(job);
+                const existingRow = existingRows.get(jobId);
+                const row = existingRow || createJobRow(job, idx);
 
-                // Auto-expand if this job was previously expanded
-                if (isExpanded) {
-                    setTimeout(() => {
-                        toggleJobDetails(tr, job);
-                    }, 10); // Small delay to ensure DOM is ready
+                if (existingRow) {
+                    updateExistingJobRow(row, job, idx);
+                }
+
+                tbody.appendChild(row);
+                if (expandedJobIds.has(jobId)) {
+                    upsertJobDetailRow(row, job, tbody);
+                } else {
+                    removeJobDetailRow(row);
                 }
             });
 
-            // Clean up expanded job IDs that are no longer in the current jobs list
-            const currentJobIds = new Set(jobs.map(job => job.id));
             expandedJobIds = new Set([...expandedJobIds].filter(id => currentJobIds.has(id)));
         }`;
 const getRenderLocksFunction = () => `
@@ -634,6 +818,12 @@ const getErrorAndTooltipFunctions = () => `
             el.style.display = 'block';
         }
 
+        function clearError() {
+            const el = document.getElementById('error-container');
+            el.textContent = '';
+            el.style.display = 'none';
+        }
+
         let tooltipEl = null;
         function showTooltip(e) {
             const info = e.target.getAttribute('data-info');
@@ -662,45 +852,20 @@ const getToggleDetailsFunctions = () => `
         function toggleJobDetails(row, job) {
             const expandIcon = row.querySelector('.expand-icon');
             const existingDetail = row.nextElementSibling;
+            const jobId = getJobId(job);
 
             if (existingDetail && existingDetail.classList.contains('detail-row')) {
                 expandIcon.classList.remove('expanded');
                 existingDetail.remove();
                 // Remove from expanded set
-                expandedJobIds.delete(job.id);
+                expandedJobIds.delete(jobId);
                 return;
             }
 
             expandIcon.classList.add('expanded');
             // Add to expanded set
-            expandedJobIds.add(job.id);
-
-            const detailRow = document.createElement('tr');
-            detailRow.className = 'detail-row';
-
-            const jobData = {
-                id: job.id,
-                name: job.name,
-                queue: currentQueue,
-                status: job.status || (job.failedReason ? 'failed' : 'completed'),
-                attempts: job.attempts,
-                timestamp: new Date(job.timestamp).toISOString(),
-                data: job.data || {},
-                failedReason: job.failedReason || null,
-                processedOn: job.processedOn ? new Date(job.processedOn).toISOString() : null,
-                finishedOn: job.finishedOn ? new Date(job.finishedOn).toISOString() : null,
-                returnvalue: job.returnvalue
-            };
-
-            detailRow.innerHTML =
-                '<td colspan="7" class="detail-cell">' +
-                '<div class="detail-content">' +
-                '<strong style="color: var(--accent); display: block; margin-bottom: 8px;">Job Details:</strong>' +
-                '<pre>' + JSON.stringify(jobData, null, 2) + '</pre>' +
-                '</div>' +
-                '</td>';
-
-            row.parentNode.insertBefore(detailRow, row.nextSibling);
+            expandedJobIds.add(jobId);
+            upsertJobDetailRow(row, job);
         }
 
         function toggleLockDetails(row, lock) {
@@ -776,6 +941,77 @@ const getDashboardScriptHelpers = () => `
             return patternInput && patternInput.value ? patternInput.value : '*';
         }
 
+        function clearSseTimers() {
+            if (reconnectTimer !== null) {
+                clearTimeout(reconnectTimer);
+                reconnectTimer = null;
+            }
+
+            if (streamWatchdogTimer !== null) {
+                clearTimeout(streamWatchdogTimer);
+                streamWatchdogTimer = null;
+            }
+
+            if (dashboardResetTimer !== null) {
+                clearTimeout(dashboardResetTimer);
+                dashboardResetTimer = null;
+            }
+        }
+
+        function scheduleDashboardReset(message) {
+            if (dashboardResetTimer !== null) return;
+
+            showError(message || 'Live updates stalled. Resetting dashboard...');
+            dashboardResetTimer = window.setTimeout(() => {
+                window.location.reload();
+            }, STREAM_RESET_MS);
+        }
+
+        function armStreamWatchdog() {
+            if (!autoRefreshEnabled) return;
+
+            if (streamWatchdogTimer !== null) {
+                clearTimeout(streamWatchdogTimer);
+            }
+
+            streamWatchdogTimer = window.setTimeout(() => {
+                if (eventSource) {
+                    eventSource.close();
+                    eventSource = null;
+                }
+                sseActive = false;
+                streamWatchdogTimer = null;
+                scheduleDashboardReset('Live updates stalled. Resetting dashboard...');
+            }, STREAM_RESET_MS);
+        }
+
+        function markStreamHealthy() {
+            reconnectAttempts = 0;
+            if (reconnectTimer !== null) {
+                clearTimeout(reconnectTimer);
+                reconnectTimer = null;
+            }
+            clearError();
+            armStreamWatchdog();
+        }
+
+        function scheduleReconnect() {
+            if (!autoRefreshEnabled || reconnectTimer !== null) return;
+
+            reconnectAttempts += 1;
+            const delay = Math.min(1000 * reconnectAttempts, 5000);
+            showError('Live updates disconnected. Reconnecting...');
+
+            reconnectTimer = window.setTimeout(() => {
+                reconnectTimer = null;
+                setupEventStream(currentQueue);
+            }, delay);
+
+            if (reconnectAttempts >= 4) {
+                scheduleDashboardReset('Live updates could not reconnect. Resetting dashboard...');
+            }
+        }
+
         function buildEventsUrl(queue, pattern) {
             const q = queue || '';
             const p = pattern || '*';
@@ -785,11 +1021,12 @@ const getDashboardScriptHelpers = () => `
 const getDashboardScriptEventStream = () => `
         function setupEventStream(queueOverride) {
             if (!window.EventSource) return;
+            if (!autoRefreshEnabled) return;
 
-            const queue = queueOverride || currentQueue;
+            const queue = queueOverride === undefined ? currentQueue : queueOverride;
             const pattern = getLockPattern();
 
-            if (eventSource && queue === lastSseQueue && pattern === lastSsePattern) return;
+            if (eventSource && sseActive && queue === lastSseQueue && pattern === lastSsePattern) return;
 
             if (eventSource) {
                 eventSource.close();
@@ -799,10 +1036,12 @@ const getDashboardScriptEventStream = () => `
             lastSseQueue = queue;
             lastSsePattern = pattern;
             eventSource = new EventSource(buildEventsUrl(queue, pattern));
+            armStreamWatchdog();
 
             eventSource.onopen = () => {
                 sseActive = true;
                 stopAutoRefresh();
+                markStreamHealthy();
             };
 
             eventSource.onmessage = (evt) => {
@@ -813,20 +1052,31 @@ const getDashboardScriptEventStream = () => `
                     if (payload.type === 'snapshot') {
                         if (payload.snapshot) {
                             renderStats(payload.snapshot);
-                            updateQueueSelect(payload.snapshot.queues || []);
+                            const nextQueue = updateQueueSelect(payload.snapshot.queues || []);
+                            if (nextQueue !== currentQueue) {
+                                currentQueue = nextQueue;
+                                if (currentQueue) {
+                                    localStorage.setItem(QUEUE_KEY, currentQueue);
+                                } else {
+                                    localStorage.removeItem(QUEUE_KEY);
+                                }
+                            }
                         }
 
-                        if (payload.queue && payload.queue !== currentQueue) {
-                            currentQueue = payload.queue;
-                            localStorage.setItem(QUEUE_KEY, currentQueue);
-                            const select = document.getElementById('queue-select');
-                            if (select) select.value = currentQueue;
+                        if (!currentQueue) {
+                            renderJobs([]);
                         }
 
-                        if (payload.jobs) renderJobs(payload.jobs);
+                        if (payload.jobs && (!payload.queue || payload.queue === currentQueue)) {
+                            renderJobs(payload.jobs);
+                        }
                         if (payload.locks) renderLocks(payload.locks);
 
-                        document.getElementById('last-updated').textContent = new Date().toLocaleTimeString();
+                        const lastUpdated = document.getElementById('last-updated');
+                        if (lastUpdated) {
+                            lastUpdated.textContent = new Date().toLocaleTimeString();
+                        }
+                        markStreamHealthy();
                     }
                 } catch (err) {
                     console.error('Failed to parse SSE payload', err);
@@ -839,7 +1089,7 @@ const getDashboardScriptEventStream = () => `
                     eventSource = null;
                 }
                 sseActive = false;
-                if (autoRefreshEnabled) startAutoRefresh();
+                scheduleReconnect();
             };
         }
 `;
@@ -910,6 +1160,9 @@ const getDashboardScriptFetch = () => `
 const getDashboardScriptRender = () => [
     getRenderStatsFunction(),
     getUpdateQueueSelectFunction(),
+    getRenderJobsStateFunction(),
+    getRenderJobsDetailHelpersFunction(),
+    getRenderJobsRowHelpersFunction(),
     getRenderJobsFunction(),
     getRenderLocksFunction(),
     getLockHelperFunctions(),
@@ -932,8 +1185,13 @@ const getDashboardScriptBootstrap = () => `
         if (queueSelect) {
             queueSelect.addEventListener('change', (e) => {
                 currentQueue = e.target.value;
-                localStorage.setItem(QUEUE_KEY, currentQueue);
+                if (currentQueue) {
+                    localStorage.setItem(QUEUE_KEY, currentQueue);
+                } else {
+                    localStorage.removeItem(QUEUE_KEY);
+                }
                 console.log('Queue changed - SSE will update automatically');
+                clearError();
 
                 setupEventStream(currentQueue);
             });
@@ -961,6 +1219,7 @@ const getDashboardScriptBootstrap = () => `
         setupEventStream(currentQueue);
 
         window.addEventListener('beforeunload', () => {
+            clearSseTimers();
             if (eventSource) {
                 eventSource.close();
             }