Changeset 3763178

Timestamp:

10/24/2026 11:15:37 AM (69 minutes ago)

Author:

Qndrs

Message:

Release 3.7.1: display themes, configurable columns and reliability fixes

Location:

qndrs-availability-heartbeat-monitor/trunk

Files:

• README.md (modified) (5 diffs)
• css/uptime-monitor.css (modified) (3 diffs)
• docs/history-storage.md (modified) (2 diffs)
• js/uptime-monitor.js (modified) (8 diffs)
• languages/qndrs-availability-heartbeat-monitor-nl_NL.l10n.php (modified) (11 diffs)
• languages/qndrs-availability-heartbeat-monitor-nl_NL.mo (modified) ( previous)
• languages/qndrs-availability-heartbeat-monitor-nl_NL.po (modified) (2 diffs)
• qndrs-availability-heartbeat-monitor.php (modified) (29 diffs)
• readme.txt (modified) (3 diffs)
• uptime-monitor.css (modified) (3 diffs)
• uptime-monitor.js (modified) (8 diffs)

qndrs-availability-heartbeat-monitor/trunk/README.md

@@ -14 +14 @@
 - Tested up to: WordPress 7.1
 - Requires PHP: 8.0+
-- Stable tag: 3.6.1
+- Stable tag: 3.7.1
 - License: GPLv2 or later
 - License URI: https://www.gnu.org/licenses/gpl-2.0.html
@@ -32 +32 @@
 - Monitor firewalled machines or internal apps with outbound heartbeat pings.
 - Dutch translation files are included.
+- Choose a light, dark or system theme for the monitor overview.
+- Show or hide overview columns, with a compact preset and a reset to the full view.
+
+## Overview Display
+
+Use **Light / Dark / System** and **Columns** above the overview to choose your display. Last check, response time, uptime, notifications and incidents can be switched independently. Monitor type and URL/heartbeat interval can also be hidden. Status, monitor name and management actions remain available.
+
+The initial view is light with all columns visible. Display preferences are saved in this browser for the current site and WordPress user, and survive automatic refresh. If browser storage is unavailable, the controls still work for the current page. System mode follows the operating system's color preference. The dark theme applies to the monitor overview; the settings page, WordPress menu and dashboard widget keep their existing appearance.
 
 ## Installation
@@ -37 +45 @@
 1. Upload the plugin folder to `/wp-content/plugins/qndrs-availability-heartbeat-monitor`.
 2. Activate **Qndrs Availability and Heartbeat Monitor** from the WordPress plugins page.
-3. Open **Qndrs Monitor** in the WordPress admin menu.
+3. Open **Qndrs Monitor > Overview** in the WordPress admin menu. Use **Qndrs Monitor > Settings** for configuration.
 4. Add one or more URLs and choose the notification channels.
 5. Optional: use a real server cron for more reliable checks:
@@ -142 +150 @@
 The checks validate PHP syntax, JavaScript syntax when Node.js is available, version consistency, and release packaging basics.
 
+Run the standalone reliability regression checks with `php scripts/check-reliability.php`. These use WordPress and database doubles to cover migration recovery, aggregate status and concurrent heartbeat writes; they do not replace WordPress/MySQL integration testing.
+
+Run `php scripts/check-overview.php` to also check the production overview renderer. For browser checks with the actual PHP output, JavaScript, CSS and an AJAX fixture, see `docs/dashboard-design.md`.
+
+Overall status is `unknown` while any active monitor has no result, or when there are no active monitors. Incidents and degraded results take precedence. Concurrent heartbeat updates merge with the latest stored monitor list; database failures or exhausted retries return HTTP 503 for the sender to retry.
+
 ### Dutch translation maintenance
 
@@ -153 +167 @@
 
 ## Changelog
+
+### 3.7.1
+
+- Renamed the first submenu to Overview to distinguish it from the Qndrs Monitor parent menu; Settings remains the configuration page.
+
+### 3.7.0
+
+- Added light, dark and system themes with configurable overview columns and a compact view.
+- Preserved display preferences and expanded history during automatic refresh.
+- Fixed shadow-history migration recovery, unknown aggregate status and concurrent heartbeat persistence.
+- Added Dutch translations for the new display controls.
 
 ### 3.6.1

qndrs-availability-heartbeat-monitor/trunk/css/uptime-monitor.css

@@ -18 +18 @@
 }
 
+/* Overview preferences are deliberately scoped away from settings and the widget. */
+.uptime-monitor-overview {
+    --ump-columns: 90px minmax(190px, 1.4fr) minmax(150px, .85fr) minmax(90px, .5fr) minmax(190px, 1fr) minmax(100px, .6fr) minmax(100px, .6fr) 340px;
+    --ump-list-min-width: 1386px;
+    --ump-soft: #f6f7f7;
+    --ump-link: #2271b1;
+    --ump-shadow: 0 12px 34px rgba(0, 0, 0, .16);
+}
+
+.uptime-monitor-overview [hidden] { display: none !important; }
+.uptime-view-controls { align-items: center; display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end; margin: 12px 0; }
+.uptime-theme-switch { background: var(--ump-panel); border: 1px solid var(--ump-border); border-radius: 6px; display: flex; padding: 3px; }
+.uptime-theme-switch button { background: transparent; border: 0; border-radius: 3px; color: var(--ump-muted); cursor: pointer; font: inherit; padding: 6px 12px; }
+.uptime-theme-switch button[aria-pressed="true"] { background: var(--ump-soft); color: var(--ump-text); box-shadow: 0 1px 3px rgba(0, 0, 0, .15); }
+.uptime-monitor-overview :is(button, summary, input, a):focus-visible { outline: 2px solid var(--ump-link); outline-offset: 2px; }
+.uptime-column-settings { position: relative; }
+.uptime-column-settings > summary { cursor: pointer; list-style: none; }
+.uptime-column-settings > summary::-webkit-details-marker { display: none; }
+.uptime-column-settings[open] > summary { border-color: var(--ump-link); }
+.uptime-column-count { border-left: 1px solid var(--ump-border); color: var(--ump-muted); font-size: 11px; margin-left: 6px; padding-left: 8px; }
+.uptime-column-panel { background: var(--ump-panel); border: 1px solid var(--ump-border); border-radius: 6px; box-shadow: var(--ump-shadow); box-sizing: border-box; max-height: 65vh; overflow-y: auto; padding: 16px; position: absolute; right: 0; top: calc(100% + 8px); width: 310px; z-index: 20; }
+.uptime-column-panel p { color: var(--ump-muted); font-size: 12px; margin: 0 0 10px; }
+.uptime-column-panel fieldset { border: 0; margin: 0; min-width: 0; padding: 0; }
+.uptime-column-panel label { align-items: center; cursor: pointer; display: flex; gap: 9px; padding: 7px 0; }
+.uptime-column-panel input[type="checkbox"] { flex: 0 0 auto; margin: 0; }
+.uptime-column-panel-actions { border-top: 1px solid var(--ump-border); display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; padding-top: 12px; }
+.uptime-column-panel-actions .button { flex: 1 1 auto; }
+.uptime-url-list-scroll { overflow-x: auto; padding: 2px 2px 8px; scrollbar-color: var(--ump-border) transparent; }
+.uptime-url-column-head { align-items: center; box-sizing: border-box; color: var(--ump-muted); display: grid; font-size: 11px; font-weight: 600; gap: 12px 14px; grid-template-columns: var(--ump-columns); min-width: var(--ump-list-min-width); padding: 8px 17px 8px 21px; }
+.uptime-monitor-overview .uptime-url-list { min-width: var(--ump-list-min-width); }
+.uptime-url-list-scroll.is-empty .uptime-url-column-head { display: none; }
+.uptime-monitor-overview .uptime-url-list-scroll.is-empty .uptime-url-list { min-width: 0; }
+.uptime-monitor-overview .uptime-url-row { gap: 12px 14px; grid-template-columns: var(--ump-columns); }
+.uptime-monitor-overview .uptime-url-actions { justify-content: flex-end; }
+.uptime-url-response, .uptime-url-incident { align-items: center; display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; }
+.uptime-hide-check [data-view-column="check"],
+.uptime-hide-response [data-view-column="response"],
+.uptime-hide-uptime [data-view-column="uptime"],
+.uptime-hide-alerts [data-view-column="alerts"],
+.uptime-hide-incident [data-view-column="incident"],
+.uptime-hide-type [data-view-column="type"],
+.uptime-hide-address [data-view-column="address"] { display: none !important; }
+
+.uptime-monitor-overview[data-theme="dark"] {
+    --ump-bg: #10161f;
+    --ump-panel: #19222e;
+    --ump-soft: #202c3a;
+    --ump-border: #344152;
+    --ump-text: #e7edf5;
+    --ump-muted: #a9b6c7;
+    --ump-up: #6ad79a;
+    --ump-down: #ff9d9d;
+    --ump-paused: #a9b6c7;
+    --ump-warning: #f0c36d;
+    --ump-info: #9bbcff;
+    --ump-link: #9bbcff;
+    --ump-shadow: 0 12px 34px rgba(0, 0, 0, .4);
+    background: var(--ump-bg);
+    color-scheme: dark;
+}
+body.qndrs-ahm-dark-overview #wpcontent,
+body.qndrs-ahm-dark-overview #wpfooter { background: #10161f; }
+body.qndrs-ahm-dark-overview #wpfooter { color: #a9b6c7; }
+body.qndrs-ahm-dark-overview #wpfooter a { color: #9bbcff; }
+.uptime-monitor-overview[data-theme="dark"] :is(h1, h2, h3, label) { color: var(--ump-text); }
+.uptime-monitor-overview[data-theme="dark"] a { color: var(--ump-link); }
+.uptime-monitor-overview[data-theme="dark"] .button { background: var(--ump-panel); border-color: var(--ump-border); color: var(--ump-link); }
+.uptime-monitor-overview[data-theme="dark"] .button:hover { background: var(--ump-soft); border-color: var(--ump-link); }
+.uptime-monitor-overview[data-theme="dark"] .button-primary { background: #5269ee; border-color: #5269ee; color: #fff; }
+.uptime-monitor-overview[data-theme="dark"] .button-primary:hover { background: #4359d1; border-color: #4359d1; }
+.uptime-monitor-overview[data-theme="dark"] .button:disabled { background: var(--ump-soft) !important; border-color: var(--ump-border) !important; color: var(--ump-muted) !important; }
+.uptime-monitor-overview[data-theme="dark"] :is(input[type="url"], input[type="text"], input[type="checkbox"]) { background: var(--ump-bg); border-color: var(--ump-muted); color: var(--ump-text); }
+.uptime-monitor-overview[data-theme="dark"] input::placeholder { color: var(--ump-muted); }
+.uptime-monitor-overview[data-theme="dark"] .uptime-chip { background: var(--ump-soft); border-color: var(--ump-border); color: var(--ump-text); }
+.uptime-monitor-overview[data-theme="dark"] .uptime-chip-muted { color: var(--ump-muted); }
+.uptime-monitor-overview[data-theme="dark"] .uptime-chip.is-warning { background: #382e1d; border-color: #706044; color: var(--ump-warning); }
+.uptime-monitor-overview[data-theme="dark"] .uptime-chip.is-danger { background: #382329; border-color: #70404b; color: var(--ump-down); }
+.uptime-monitor-overview[data-theme="dark"] .uptime-percentage { background: var(--ump-soft); border-color: var(--ump-border); }
+.uptime-monitor-overview[data-theme="dark"] .uptime-percentage-label { background: #2b3747; color: var(--ump-muted); }
+.uptime-monitor-overview[data-theme="dark"] .uptime-percentage-value { color: var(--ump-up); }
+.uptime-monitor-overview[data-theme="dark"] :is(.uptime-response-average, .uptime-history-response-time) { background: #20364a; color: #acdcff; }
+.uptime-monitor-overview[data-theme="dark"] :is(.uptime-history-empty, .uptime-history-time, .uptime-history-message) { color: var(--ump-muted); }
+.uptime-monitor-overview[data-theme="dark"] .uptime-history-code { color: var(--ump-text); }
+.uptime-monitor-overview[data-theme="dark"] :is(.uptime-status-up, .uptime-response-trend-faster) { background: #213b30; color: var(--ump-up); }
+.uptime-monitor-overview[data-theme="dark"] .uptime-status-down { background: #44282f; color: var(--ump-down); }
+.uptime-monitor-overview[data-theme="dark"] :is(.uptime-status-error, .uptime-status-degraded, .uptime-response-trend-slower) { background: #382e1d; color: var(--ump-warning); }
+.uptime-monitor-overview[data-theme="dark"] :is(.uptime-status-paused, .uptime-status-unknown, .uptime-response-trend-stable) { background: var(--ump-soft); color: var(--ump-muted); }
+.uptime-monitor-overview[data-theme="dark"] .uptime-delete-button { border-color: #70404b; color: var(--ump-down); }
+.uptime-monitor-overview[data-theme="dark"] .uptime-delete-button:hover { background: #44282f; border-color: var(--ump-down); }
+.uptime-monitor-overview[data-theme="dark"] .uptime-monitor-notice { background: var(--ump-panel); color: var(--ump-text); }
+.uptime-monitor-overview[data-theme="dark"] .notice-dismiss::before { color: var(--ump-muted); }
+
+@media (max-width: 782px) {
+    .uptime-monitor-overview .uptime-dashboard-header { align-items: flex-start; flex-direction: column; }
+    .uptime-view-controls { justify-content: space-between; }
+    .uptime-column-settings { margin-left: auto; }
+    .uptime-column-panel { max-width: calc(100vw - 40px); }
+}
+
 .uptime-widget-refresh-meter {
     background: rgba(34, 113, 177, 0.12);
@@ -62 +161 @@
     border-left-color: var(--ump-warning);
     background: rgba(183, 121, 31, 0.07);
+}
+
+.uptime-dashboard-widget.is-unknown .uptime-widget-status {
+    border-left-color: var(--ump-paused);
 }
 
@@ -219 +322 @@
 .uptime-statusbar.is-degraded {
     border-left-color: var(--ump-warning);
+}
+
+.uptime-statusbar.is-unknown {
+    border-left-color: var(--ump-paused);
 }
 

qndrs-availability-heartbeat-monitor/trunk/docs/history-storage.md

@@ -36 +36 @@
 ```
 
-The migration uses idempotent batched inserts and switches to `table_shadow` only when the valid legacy count exactly matches the table count. The legacy option is retained at this stage.
+Pause scheduled checks and heartbeat senders and let in-flight writes finish before running migration, rollback or finalization. These maintenance commands compare snapshots and must not overlap history writes.
+
+Migration rebuilds the unfinalized table copy from legacy history using batched inserts and switches to `table_shadow` only when the valid legacy count exactly matches the table count. Rerunning migration repairs extra rows left by earlier retention or interrupted migrations. Failed imports leave legacy reads active. Migration refuses to rebuild finalized table storage. The legacy option is retained at this stage.
 
 Compare the dashboard metrics and recent history before finalizing. Roll back while shadow mode is active with:
@@ -56 +58 @@
 The dashboard loads only the five newest rows per monitor. Uptime totals and response-time statistics are calculated with indexed aggregate queries rather than by loading all history into PHP memory.
 
-Rows older than 30 days are removed at most once per hour when a new history event is stored.
+In table-only mode, rows older than 30 days are removed at most once per hour when a new history event is stored. During shadow verification, neither copy is pruned, including the legacy per-monitor entry cap, so the two counts remain comparable. Finalize after verification to resume retention cleanup; leaving shadow mode active indefinitely allows history to grow.

qndrs-availability-heartbeat-monitor/trunk/js/uptime-monitor.js

@@ -6 +6 @@
     let widgetRefreshTimer = null;
     let widgetRefreshRequest = null;
+    const overview = $('.uptime-monitor-overview');
+    const viewPreferences = { theme: 'light', hidden: [] };
+    const viewColumns = {
+        check: { track: 'minmax(150px, .85fr)', width: 164 },
+        response: { track: 'minmax(90px, .5fr)', width: 104 },
+        uptime: { track: 'minmax(190px, 1fr)', width: 204 },
+        alerts: { track: 'minmax(100px, .6fr)', width: 114 },
+        incident: { track: 'minmax(100px, .6fr)', width: 114 }
+    };
+    const optionalViewFields = [...Object.keys(viewColumns), 'type', 'address'];
+    const systemTheme = window.matchMedia('(prefers-color-scheme: dark)');
+
+    function applyViewTheme() {
+        if (!overview.length) {
+            return;
+        }
+        const theme = viewPreferences.theme === 'system' ? (systemTheme.matches ? 'dark' : 'light') : viewPreferences.theme;
+        overview.attr('data-theme', theme);
+        $('body').toggleClass('qndrs-ahm-dark-overview', theme === 'dark');
+        overview.find('[data-theme-choice]').each(function () {
+            $(this).attr('aria-pressed', String(this.dataset.themeChoice === viewPreferences.theme));
+        });
+    }
+
+    function applyViewColumns() {
+        if (!overview.length) {
+            return;
+        }
+        const visible = Object.keys(viewColumns).filter(key => !viewPreferences.hidden.includes(key));
+        overview[0].style.setProperty('--ump-columns', [
+            '90px', 'minmax(190px, 1.4fr)', ...visible.map(key => viewColumns[key].track), '340px'
+        ].join(' '));
+        overview[0].style.setProperty('--ump-list-min-width', (686 + visible.reduce((width, key) => width + viewColumns[key].width, 0)) + 'px');
+        optionalViewFields.forEach(function (key) {
+            const hidden = viewPreferences.hidden.includes(key);
+            overview.toggleClass('uptime-hide-' + key, hidden);
+            overview.find('[data-view-toggle="' + key + '"]').prop('checked', !hidden);
+        });
+        overview.find('.uptime-column-count').text((optionalViewFields.length - viewPreferences.hidden.length) + '/' + optionalViewFields.length);
+    }
+
+    function saveViewPreferences() {
+        try {
+            window.localStorage.setItem(qndrsAhmAjax.view_storage_key, JSON.stringify(viewPreferences));
+        } catch (error) {
+            // Preferences still work for this page when browser storage is unavailable.
+        }
+    }
+
+    function initializeViewPreferences() {
+        if (!overview.length) {
+            return;
+        }
+        try {
+            const saved = JSON.parse(window.localStorage.getItem(qndrsAhmAjax.view_storage_key));
+            if (saved && ['light', 'dark', 'system'].includes(saved.theme)) {
+                viewPreferences.theme = saved.theme;
+            }
+            if (saved && Array.isArray(saved.hidden)) {
+                viewPreferences.hidden = optionalViewFields.filter(key => saved.hidden.includes(key));
+            }
+        } catch (error) {
+            // Corrupt or blocked storage must not prevent monitoring controls from working.
+        }
+        applyViewTheme();
+        applyViewColumns();
+        overview.find('.uptime-view-controls').prop('hidden', false);
+        overview.on('click', '[data-theme-choice]', function () {
+            viewPreferences.theme = this.dataset.themeChoice;
+            applyViewTheme();
+            saveViewPreferences();
+        });
+        overview.on('change', '[data-view-toggle]', function () {
+            viewPreferences.hidden = optionalViewFields.filter(key => !overview.find('[data-view-toggle="' + key + '"]').prop('checked'));
+            applyViewColumns();
+            saveViewPreferences();
+        });
+        overview.on('click', '.uptime-view-compact, .uptime-view-reset', function () {
+            viewPreferences.hidden = $(this).hasClass('uptime-view-compact') ? ['check', 'alerts', 'incident', 'type', 'address'] : [];
+            applyViewColumns();
+            saveViewPreferences();
+        });
+        $(document).on('click.qndrsAhmView', function (event) {
+            const settings = overview.find('.uptime-column-settings');
+            if (!settings[0].contains(event.target)) {
+                settings.prop('open', false);
+            }
+        }).on('keydown.qndrsAhmView', function (event) {
+            const settings = overview.find('.uptime-column-settings');
+            if (event.key === 'Escape' && settings.prop('open')) {
+                settings.prop('open', false).find('summary').trigger('focus');
+            }
+        });
+        systemTheme.addEventListener('change', applyViewTheme);
+    }
+
+    initializeViewPreferences();
 
     function escapeHtml(value) {
@@ -205 +302 @@
 
         const statusCode = parseInt(latest.status_code, 10);
-        const responseTime = parseInt(latest.response_time_ms, 10);
         const timestamp = latest.timestamp || '';
         const displayTimestamp = latest.display_timestamp || timestamp;
@@ -211 +307 @@
         return `
             ${statusCode ? `<span class="uptime-chip">${escapeHtml(qndrsAhmL10n.http_status.replace('%d', statusCode))}</span>` : ''}
-            ${!isNaN(responseTime) ? `<span class="uptime-chip">${escapeHtml(qndrsAhmL10n.response_time_ms.replace('%d', responseTime))}</span>` : ''}
             ${timestamp ? `<time class="uptime-chip uptime-chip-muted" datetime="${escapeHtml(timestamp)}">${escapeHtml(displayTimestamp)}</time>` : ''}
         `;
@@ -229 +324 @@
         const title = type === 'heartbeat' ? (urlData.name || qndrsAhmL10n.heartbeat) : getHost(url);
         const identityMeta = type === 'heartbeat'
-            ? `<span>${escapeHtml((qndrsAhmL10n.expected_every_seconds || 'Expected every %d seconds').replace('%d', parseInt(urlData.heartbeat && urlData.heartbeat.expected_interval ? urlData.heartbeat.expected_interval : urlData.expected_interval, 10) || 300))}</span>`
-            : `<a href="${escapeHtml(url)}" target="_blank" rel="noopener noreferrer">${escapeHtml(url)}</a>`;
+            ? `<span data-view-column="address">${escapeHtml((qndrsAhmL10n.expected_every_seconds || 'Expected every %d seconds').replace('%d', parseInt(urlData.heartbeat && urlData.heartbeat.expected_interval ? urlData.heartbeat.expected_interval : urlData.expected_interval, 10) || 300))}</span>`
+            : `<a data-view-column="address" href="${escapeHtml(url)}" target="_blank" rel="noopener noreferrer">${escapeHtml(url)}</a>`;
         const averageResponse = dashboard.average_response_time_display
             ? `<span class="uptime-response-average">${escapeHtml(dashboard.average_response_time_display)}</span>`
             : '';
+        const latest = dashboard.latest || {};
+        const responseTime = parseInt(latest.response_time_ms, 10);
+        const currentResponse = !isNaN(responseTime)
+            ? `<span class="uptime-chip">${escapeHtml(qndrsAhmL10n.response_time_ms.replace('%d', responseTime))}</span>`
+            : (averageResponse ? '' : `<span class="uptime-chip uptime-chip-muted">${escapeHtml(qndrsAhmL10n.no_data)}</span>`);
 
         return `
@@ -243 +343 @@
                 <div class="uptime-url-identity">
                     <strong>${escapeHtml(title)}</strong>
-                    <span class="uptime-chip uptime-chip-muted">${escapeHtml(type === 'heartbeat' ? qndrsAhmL10n.heartbeat : qndrsAhmL10n.http_check)}</span>
+                    <span class="uptime-chip uptime-chip-muted" data-view-column="type">${escapeHtml(type === 'heartbeat' ? qndrsAhmL10n.heartbeat : qndrsAhmL10n.http_check)}</span>
                     ${identityMeta}
                 </div>
-                <div class="uptime-url-current">
+                <div class="uptime-url-current" data-view-column="check">
                     ${renderCurrentCheck(dashboard)}
                 </div>
-                <div class="uptime-url-metrics">
+                <div class="uptime-url-response" data-view-column="response">
+                    ${currentResponse}
+                    ${averageResponse}
+                </div>
+                <div class="uptime-url-metrics" data-view-column="uptime">
                     ${renderUptimeSummary(urlData.uptime)}
-                    ${averageResponse}
-                </div>
-                <div class="uptime-url-alerts">
+                </div>
+                <div class="uptime-url-alerts" data-view-column="alerts">
                     <span class="uptime-chip${notificationsLabel === qndrsAhmL10n.no_alerts ? ' is-warning' : ''}">${escapeHtml(notificationsLabel)}</span>
+                </div>
+                <div class="uptime-url-incident" data-view-column="incident">
                     <span class="uptime-chip${incidentOpen ? ' is-danger' : ' uptime-chip-muted'}">${escapeHtml(incidentLabel)}</span>
                     ${incidentDuration ? `<span class="uptime-chip is-danger">${escapeHtml(incidentDuration)}</span>` : ''}
@@ -272 +377 @@
     function updateUrlList(urls) {
         const list = $('.uptime-url-list');
+        list.closest('.uptime-url-list-scroll').toggleClass('is-empty', !Array.isArray(urls) || urls.length === 0);
         const expandedIds = [];
 
@@ -466 +572 @@
 
         $('.uptime-auto-refresh-input').prop('checked', isEnabled);
-        window.localStorage.setItem(autoRefreshStorageKey, isEnabled ? '1' : '0');
+        try {
+            window.localStorage.setItem(autoRefreshStorageKey, isEnabled ? '1' : '0');
+        } catch (error) {
+            // Auto-refresh remains usable without persistent browser storage.
+        }
 
         if (isEnabled) {
@@ -511 +621 @@
     });
 
-    if ($('.uptime-auto-refresh-input').length && window.localStorage.getItem(autoRefreshStorageKey) === '1') {
-        setAutoRefresh(true);
+    try {
+        if ($('.uptime-auto-refresh-input').length && window.localStorage.getItem(autoRefreshStorageKey) === '1') {
+            setAutoRefresh(true);
+        }
+    } catch (error) {
+        // Keep manual refresh and all other controls available.
     }
 

qndrs-availability-heartbeat-monitor/trunk/languages/qndrs-availability-heartbeat-monitor-nl_NL.l10n.php

@@ -1 +1 @@
 <?php
 return array (
-  'project-id-version' => 'Qndrs Availability and Heartbeat Monitor 3.6.1',
+  'project-id-version' => 'Qndrs Availability and Heartbeat Monitor 3.7.1',
   'report-msgid-bugs-to' => '',
   'po-revision-date' => '2026-08-26 12:00+0200',
@@ -23 +23 @@
     'A general error occurred. Please try again.' => 'Er is een algemene fout opgetreden. Probeer het opnieuw.',
     'Across URLs with history' => 'Over URL\'s met geschiedenis',
+    'Actions' => 'Acties',
     'Active incidents: %1$d; active URLs: %2$d' => 'Actieve incidenten: %1$d; actieve URLs: %2$d',
     'Add URL' => 'URL toevoegen',
@@ -39 +40 @@
     'Clear stored user key' => 'Opgeslagen gebruikerssleutel wissen',
     'Clients send a POST request to this endpoint with their own heartbeat token.' => 'Clients sturen een POST naar dit endpoint met hun eigen heartbeat token.',
+    'Color theme' => 'Kleurthema',
+    'Columns' => 'Kolommen',
+    'Compact overview' => 'Compact overzicht',
     'Complete monitor status response.' => 'Reactie met de volledige monitorstatus.',
     'Configuration Import / Export' => 'Configuratie importeren / exporteren',
@@ -59 +63 @@
     'Current settings' => 'Huidige instellingen',
     'Current token ends with %s.' => 'Huidig token eindigt op %s.',
+    'Dark' => 'Donker',
     'Degraded' => 'Verminderd',
     'Delete' => 'Verwijderen',
@@ -107 +112 @@
     'Incident active' => 'Incident actief',
     'Incident open' => 'Incident open',
+    'Incidents' => 'Incidenten',
     'Interval:' => 'Interval:',
     'Invalid JSON format.' => 'Ongeldige JSON format.',
@@ -114 +120 @@
     'Invalid form request.' => 'Ongeldige formulieraanvraag.',
     'Invalid log date parameter: %s.' => 'Ongeldige datum parameter %s in log.',
+    'Last check' => 'Laatste check',
+    'Last check & HTTP status' => 'Laatste check & HTTP-status',
     'Last check:' => 'Laatste check:',
     'Last ping:' => 'Laatste ping:',
+    'Light' => 'Licht',
     'Logs' => 'Logs',
     'Maximum wait time per HTTP request attempt.' => 'Maximale wachttijd per poging tot een HTTP-aanvraag.',
     'Minimum 60 seconds' => 'Minimaal 60 seconden',
     'Missing for %s' => 'Ontbrekend sinds %s',
+    'Monitor' => 'Monitor',
     'Monitor Interval (seconds)' => 'Monitorinterval (seconden)',
     'Monitor interval' => 'Monitorinterval',
     'Monitor status by ID.' => 'Status van een monitor op basis van ID.',
+    'Monitor type' => 'Type monitor',
     'Monitor website availability and receive alerts by email or Pushover. Manage multiple URLs from the WordPress admin with logging, JSON import/export, REST support, dashboard refresh and heartbeat monitors.' => 'Monitor de beschikbaarheid van sites en ontvang waarschuwingen via e-mail of Pushover. Beheer meerdere URL\'s vanuit WordPress-beheer met logging, JSON-import/-export, REST-ondersteuning, het verversen van het dashboard en heartbeat monitors.',
     'Monitored URLs' => 'Gemonitorde URLs',
@@ -148 +159 @@
     'Outbound client pings' => 'Uitgaande client pings',
     'Overall status' => 'Algemene status',
+    'Overview' => 'Overzicht',
     'Paste a previously exported JSON configuration here.' => 'Plak hier een eerder geëxporteerde JSON-configuratie.',
     'Pause' => 'Pauzeren',
@@ -173 +185 @@
     'Request Timeout (seconds)' => 'Aanvraagtime-out (seconden)',
     'Request timeout' => 'Aanvraagtime-out',
+    'Response time' => 'Responstijd',
+    'Response time & average' => 'Responstijd & gemiddelde',
+    'Restore defaults' => 'Herstel standaard',
     'Resume' => 'Hervatten',
     'Retries:' => 'Pogingen:',
@@ -190 +205 @@
     'Slower' => 'Langzamer',
     'Stable' => 'Stabiel',
+    'Status' => 'Status',
     'Status History' => 'Statusgeschiedenis',
+    'Status and monitor name always remain visible.' => 'Status en monitornaam blijven altijd zichtbaar.',
     'Status becomes stale/down after roughly twice this interval without a ping.' => 'De status wordt stale/down na ongeveer twee keer dit interval zonder ping.',
     'Store Pushover credentials here when file access to wp-config.php is not available.' => 'Sla Pushover-toegangsgegevens hier op wanneer bestandstoegang tot wp-config.php niet beschikbaar is.',
+    'System' => 'Systeem',
     'The website %1$s is down. Error: %2$s.' => 'De site %1$s is down. Fout: %2$s.',
     'The website %1$s is down. HTTP Status Code: %2$d.' => 'De site %1$s is down. HTTP-statuscode: %2$d.',
@@ -202 +220 @@
     'Token:' => 'Token:',
     'URL' => 'URL',
+    'URL / heartbeat interval' => 'URL / heartbeatinterval',
     'URL added successfully!' => 'URL succesvol toegevoegd!',
     'URL deleted successfully!' => 'URL succesvol verwijderd!',
@@ -214 +233 @@
     'Updated just now.' => 'Zojuist geüpdatet.',
     'Uptime' => 'Uptime',
+    'Uptime (24h, 7d, 30d)' => 'Uptime (24u, 7d, 30d)',
     'Use comma-separated HTTP status codes or ranges. Default: 100-199,300-599.' => 'Gebruik komma-gescheiden HTTP-statuscodes of bereiken. Standaard: 100-199,300-599.',
     'Use heartbeat monitors for computers, jobs, Home Assistant, NAS devices or internal apps that can reach this monitor through outbound HTTPS, but cannot be reached inbound.' => 'Gebruik heartbeat monitors voor computers, jobs, Home Assistant, NAS-apparaten of interne apps die deze monitor via uitgaande HTTPS kunnen bereiken, maar zelf niet van buitenaf bereikbaar zijn.',

qndrs-availability-heartbeat-monitor/trunk/languages/qndrs-availability-heartbeat-monitor-nl_NL.po

@@ -1 +1 @@
 msgid ""
 msgstr ""
-"Project-Id-Version: Qndrs Availability and Heartbeat Monitor 3.6.1\n"
+"Project-Id-Version: Qndrs Availability and Heartbeat Monitor 3.7.1\n"
 "Report-Msgid-Bugs-To: \n"
 "PO-Revision-Date: 2026-08-26 12:00+0200\n"
@@ -985 +985 @@
 msgid "Heartbeat monitor"
 msgstr "Heartbeat monitor"
+
+
+#: qndrs-availability-heartbeat-monitor.php:2253
+msgid "Actions"
+msgstr "Acties"
+
+
+#: qndrs-availability-heartbeat-monitor.php:2372
+msgid "Color theme"
+msgstr "Kleurthema"
+
+
+#: qndrs-availability-heartbeat-monitor.php:2376
+msgid "Columns"
+msgstr "Kolommen"
+
+
+#: qndrs-availability-heartbeat-monitor.php:2392
+msgid "Compact overview"
+msgstr "Compact overzicht"
+
+
+#: qndrs-availability-heartbeat-monitor.php:2374
+msgid "Dark"
+msgstr "Donker"
+
+
+#: qndrs-availability-heartbeat-monitor.php:2252
+msgid "Incidents"
+msgstr "Incidenten"
+
+
+#: qndrs-availability-heartbeat-monitor.php:2248
+msgid "Last check"
+msgstr "Laatste check"
+
+
+#: qndrs-availability-heartbeat-monitor.php:2380
+msgid "Last check & HTTP status"
+msgstr "Laatste check & HTTP-status"
+
+
+#: qndrs-availability-heartbeat-monitor.php:2373
+msgid "Light"
+msgstr "Licht"
+
+
+#: qndrs-availability-heartbeat-monitor.php:2247
+msgid "Monitor"
+msgstr "Monitor"
+
+
+#: qndrs-availability-heartbeat-monitor.php:2385
+msgid "Monitor type"
+msgstr "Type monitor"
+
+
+#: qndrs-availability-heartbeat-monitor.php:2249
+msgid "Response time"
+msgstr "Responstijd"
+
+
+#: qndrs-availability-heartbeat-monitor.php:2381
+msgid "Response time & average"
+msgstr "Responstijd & gemiddelde"
+
+
+#: qndrs-availability-heartbeat-monitor.php:2393
+msgid "Restore defaults"
+msgstr "Herstel standaard"
+
+
+#: qndrs-availability-heartbeat-monitor.php:2246
+msgid "Status"
+msgstr "Status"
+
+
+#: qndrs-availability-heartbeat-monitor.php:2377
+msgid "Status and monitor name always remain visible."
+msgstr "Status en monitornaam blijven altijd zichtbaar."
+
+
+#: qndrs-availability-heartbeat-monitor.php:2375
+msgid "System"
+msgstr "Systeem"
+
+
+#: qndrs-availability-heartbeat-monitor.php:2386
+msgid "URL / heartbeat interval"
+msgstr "URL / heartbeatinterval"
+
+
+#: qndrs-availability-heartbeat-monitor.php:2382
+msgid "Uptime (24h, 7d, 30d)"
+msgstr "Uptime (24u, 7d, 30d)"
+
+#: qndrs-availability-heartbeat-monitor.php
+msgid "Overview"
+msgstr "Overzicht"

qndrs-availability-heartbeat-monitor/trunk/qndrs-availability-heartbeat-monitor.php

@@ -4 +4 @@
  * Plugin URI: https://github.com/qndrs/uptime-monitor
  * Description: Monitor website availability and receive alerts by email or Pushover. Manage multiple URLs from the WordPress admin with logging, JSON import/export, REST support, dashboard refresh and heartbeat monitors.
- * Version: 3.6.1
+ * Version: 3.7.1
  * Author: Robert E. Kuunders, GPT
  * Author URI: https://qndrs.nl
@@ -34 +34 @@
 class AvailabilityHeartbeatMonitor
 {
-    public const VERSION = '3.6.1';
+    public const VERSION = '3.7.1';
     public const MAX_LOG_ENTRIES = 1000;
     public const MAX_STATUS_HISTORY_PER_URL = 43200;
@@ -724 +724 @@
         add_submenu_page(
             'qndrs-availability-heartbeat-monitor',
+            __('Overview', 'qndrs-availability-heartbeat-monitor'),
+            __('Overview', 'qndrs-availability-heartbeat-monitor'),
+            'manage_options',
+            'qndrs-availability-heartbeat-monitor',
+            [$this, 'render_urls_page']
+        );
+        add_submenu_page(
+            'qndrs-availability-heartbeat-monitor',
             __('Settings', 'qndrs-availability-heartbeat-monitor'),
             __('Settings', 'qndrs-availability-heartbeat-monitor'),
@@ -775 +783 @@
                 'nonce' => wp_create_nonce('qndrs_ahm_nonce'),
                 'refresh_interval_ms' => 30000,
+                'view_storage_key' => 'qndrsAhmView:v1:' . get_current_blog_id() . ':' . get_current_user_id(),
             ]);
             // Localize script for translations
@@ -819 +828 @@
                 'refreshed' => __('Updated just now.', 'qndrs-availability-heartbeat-monitor'),
                 'auto_refresh' => __('Auto-refresh', 'qndrs-availability-heartbeat-monitor'),
+                'no_data' => __('No data', 'qndrs-availability-heartbeat-monitor'),
                 'heartbeat' => __('Heartbeat', 'qndrs-availability-heartbeat-monitor'),
                 'http_check' => __('HTTP check', 'qndrs-availability-heartbeat-monitor'),
@@ -1086 +1096 @@
             $url_history = isset($history[$url_id]) && is_array($history[$url_id]) ? $history[$url_id] : [];
             $url_history[] = $entry;
-            $history[$url_id] = $this->prune_status_history($url_history);
+            // Keep the verification snapshot intact until table storage is finalized.
+            $history[$url_id] = $storage_mode === self::HISTORY_STORAGE_TABLE_SHADOW
+                ? $url_history
+                : $this->prune_status_history($url_history);
             $this->update_status_history($history);
         }
@@ -1500 +1513 @@
         $paused = 0;
         $degraded = 0;
+        $unknown = 0;
         $incident_count = 0;
         $email_count = 0;
@@ -1519 +1533 @@
             } elseif ($status === 'degraded') {
                 $degraded++;
+            } else {
+                $unknown++;
             }
 
@@ -1548 +1564 @@
         $average_response = !empty($response_times) ? (int)round(array_sum($response_times) / count($response_times)) : null;
         $average_uptime_24h = !empty($uptime_24h) ? round(array_sum($uptime_24h) / count($uptime_24h), 1) : null;
-        $overall_status = $down > 0 ? 'incident' : ($degraded > 0 ? 'degraded' : 'operational');
+        $overall_status = $down > 0 ? 'incident' : ($degraded > 0 ? 'degraded' : ($unknown > 0 || $active === 0 ? 'unknown' : 'operational'));
         $next_check = wp_next_scheduled(self::CRON_HOOK);
         $average_response_display = __('No data', 'qndrs-availability-heartbeat-monitor');
@@ -1564 +1580 @@
             'paused' => $paused,
             'degraded' => $degraded,
+            'unknown' => $unknown,
             'incidents' => $incident_count,
             'email_count' => $email_count,
@@ -1578 +1595 @@
             'overall_label' => $overall_status === 'incident'
                 ? __('Incident active', 'qndrs-availability-heartbeat-monitor')
-                : ($overall_status === 'degraded' ? __('Degraded', 'qndrs-availability-heartbeat-monitor') : __('Operational', 'qndrs-availability-heartbeat-monitor')),
+                : ($overall_status === 'degraded' ? __('Degraded', 'qndrs-availability-heartbeat-monitor') : ($overall_status === 'unknown' ? __('Unknown', 'qndrs-availability-heartbeat-monitor') : __('Operational', 'qndrs-availability-heartbeat-monitor'))),
         ];
     }
@@ -1727 +1744 @@
         }
 
-        $urls = $this->normalize_stored_urls();
-        $matched_index = $this->find_heartbeat_monitor_index_by_token($urls, $token);
-
-        if ($matched_index === null) {
-            return new \WP_Error('qndrs_ahm_heartbeat_token_invalid', __('Heartbeat token is invalid.', 'qndrs-availability-heartbeat-monitor'), ['status' => 403]);
-        }
-
-        $url_data = $urls[$matched_index];
-        if (isset($url_data['enabled']) && $url_data['enabled'] === false) {
-            return new \WP_Error('qndrs_ahm_heartbeat_disabled', __('Heartbeat monitor is disabled.', 'qndrs-availability-heartbeat-monitor'), ['status' => 403]);
-        }
-
         $status = sanitize_key((string)$request->get_param('status'));
         if (!in_array($status, ['up', 'down', 'error'], true)) {
@@ -1746 +1751 @@
         $message = sanitize_text_field((string)$request->get_param('message'));
         $timestamp = gmdate('Y-m-d H:i:s');
-        $url_data['last_seen'] = $timestamp;
-        $url_data['last_status'] = $status;
-        $url_data['last_message'] = $message;
-        $urls[$matched_index] = $url_data;
-        update_option('qndrs_ahm_urls', $urls);
+        $url_data = $this->persist_heartbeat($token, $status, $message, $timestamp);
+        if (is_wp_error($url_data)) {
+            return $url_data;
+        }
 
         $history_message = $message !== '' ? $message : __('Heartbeat received.', 'qndrs-availability-heartbeat-monitor');
@@ -1774 +1778 @@
             'last_seen' => $timestamp,
         ], 200);
+    }
+
+    private function persist_heartbeat(string $token, string $status, string $message, string $timestamp)
+    {
+        global $wpdb;
+
+        // Bypass the option cache: each retry must merge with the latest committed list.
+        for ($attempt = 0; $attempt < 5; $attempt++) {
+            // phpcs:ignore WordPress.DB.DirectDatabaseQuery.DirectQuery, WordPress.DB.DirectDatabaseQuery.NoCaching -- A compare-and-swap requires the exact current serialized option value.
+            $stored_value = $wpdb->get_var($wpdb->prepare(
+                "SELECT option_value FROM {$wpdb->options} WHERE option_name = %s",
+                'qndrs_ahm_urls'
+            ));
+            $urls = $this->normalize_urls(maybe_unserialize($stored_value));
+            $index = $this->find_heartbeat_monitor_index_by_token($urls, $token);
+            if ($index === null) {
+                return new \WP_Error('qndrs_ahm_heartbeat_token_invalid', __('Heartbeat token is invalid.', 'qndrs-availability-heartbeat-monitor'), ['status' => 403]);
+            }
+            if (!$urls[$index]['enabled']) {
+                return new \WP_Error('qndrs_ahm_heartbeat_disabled', __('Heartbeat monitor is disabled.', 'qndrs-availability-heartbeat-monitor'), ['status' => 403]);
+            }
+
+            $urls[$index]['last_seen'] = $timestamp;
+            $urls[$index]['last_status'] = $status;
+            $urls[$index]['last_message'] = $message;
+            $new_value = maybe_serialize($urls);
+            // phpcs:ignore WordPress.DB.DirectDatabaseQuery.DirectQuery, WordPress.DB.DirectDatabaseQuery.NoCaching -- Atomic comparison prevents concurrent heartbeat updates from overwriting each other; invalidate option caches after success.
+            $updated = $wpdb->query($wpdb->prepare(
+                "UPDATE {$wpdb->options} SET option_value = %s WHERE option_name = %s AND BINARY option_value = %s",
+                $new_value,
+                'qndrs_ahm_urls',
+                $stored_value
+            ));
+            if ($updated === false) {
+                break;
+            }
+            if ($updated === 1 || $new_value === $stored_value) {
+                wp_cache_delete('qndrs_ahm_urls', 'options');
+                wp_cache_delete('alloptions', 'options');
+                return $urls[$index];
+            }
+        }
+
+        return new \WP_Error('qndrs_ahm_heartbeat_write_failed', 'Heartbeat could not be saved. Please retry.', ['status' => 503]);
     }
 
@@ -1793 +1841 @@
                 'paused' => $dashboard['paused'],
                 'degraded' => $dashboard['degraded'],
+                'unknown' => $dashboard['unknown'],
                 'incidents' => $dashboard['incidents'],
             ],
@@ -2042 +2091 @@
     private function render_dashboard_overview(array $dashboard): void
     {
-        $overall_status = isset($dashboard['overall_status']) ? sanitize_key($dashboard['overall_status']) : 'operational';
-        $status_class = $overall_status === 'incident' ? 'down' : ($overall_status === 'degraded' ? 'degraded' : 'up');
+        $overall_status = isset($dashboard['overall_status']) ? sanitize_key($dashboard['overall_status']) : 'unknown';
+        $status_class = $overall_status === 'incident' ? 'down' : ($overall_status === 'operational' ? 'up' : $overall_status);
 
         echo '<section class="uptime-statusbar is-' . esc_attr($status_class) . '" aria-label="' . esc_attr__('Monitoring summary', 'qndrs-availability-heartbeat-monitor') . '">';
@@ -2089 +2138 @@
     private function render_dashboard_widget_content(array $dashboard): void
     {
-        $overall_status = isset($dashboard['overall_status']) ? sanitize_key($dashboard['overall_status']) : 'operational';
-        $status_class = $overall_status === 'incident' ? 'down' : ($overall_status === 'degraded' ? 'degraded' : 'up');
+        $overall_status = isset($dashboard['overall_status']) ? sanitize_key($dashboard['overall_status']) : 'unknown';
+        $status_class = $overall_status === 'incident' ? 'down' : ($overall_status === 'operational' ? 'up' : $overall_status);
         $attention_urls = array_values(array_filter($dashboard['urls'], function (array $url_data): bool {
             $url_dashboard = isset($url_data['dashboard']) && is_array($url_data['dashboard']) ? $url_data['dashboard'] : [];
@@ -2112 +2161 @@
         echo '</div>';
 
-        if (empty($attention_urls)) {
+        if (empty($attention_urls) && $overall_status === 'operational') {
             echo '<p class="uptime-widget-ok">' . esc_html__('All monitored URLs are reachable.', 'qndrs-availability-heartbeat-monitor') . '</p>';
         } else {
@@ -2201 +2250 @@
     private function render_url_dashboard_rows(array $urls): void
     {
+        echo '<div class="uptime-url-list-scroll' . (empty($urls) ? ' is-empty' : '') . '" tabindex="0" role="region" aria-label="' . esc_attr__('Monitored URLs', 'qndrs-availability-heartbeat-monitor') . '">';
+        echo '<div class="uptime-url-column-head" aria-hidden="true">';
+        echo '<span>' . esc_html__('Status', 'qndrs-availability-heartbeat-monitor') . '</span>';
+        echo '<span>' . esc_html__('Monitor', 'qndrs-availability-heartbeat-monitor') . '</span>';
+        echo '<span data-view-column="check">' . esc_html__('Last check', 'qndrs-availability-heartbeat-monitor') . '</span>';
+        echo '<span data-view-column="response">' . esc_html__('Response time', 'qndrs-availability-heartbeat-monitor') . '</span>';
+        echo '<span data-view-column="uptime">' . esc_html__('Uptime', 'qndrs-availability-heartbeat-monitor') . '</span>';
+        echo '<span data-view-column="alerts">' . esc_html__('Notifications', 'qndrs-availability-heartbeat-monitor') . '</span>';
+        echo '<span data-view-column="incident">' . esc_html__('Incidents', 'qndrs-availability-heartbeat-monitor') . '</span>';
+        echo '<span>' . esc_html__('Actions', 'qndrs-availability-heartbeat-monitor') . '</span></div>';
         echo '<section class="uptime-url-list" aria-label="' . esc_attr__('Monitored URLs', 'qndrs-availability-heartbeat-monitor') . '">';
         if (empty($urls)) {
@@ -2210 +2269 @@
         }
         echo '</section>';
+        echo '</div>';
     }
 
@@ -2246 +2306 @@
         echo '<div class="uptime-url-identity">';
         echo '<strong>' . esc_html($title) . '</strong>';
-        echo '<span class="uptime-chip uptime-chip-muted">' . esc_html($type === 'heartbeat' ? __('Heartbeat', 'qndrs-availability-heartbeat-monitor') : __('HTTP check', 'qndrs-availability-heartbeat-monitor')) . '</span>';
+        echo '<span class="uptime-chip uptime-chip-muted" data-view-column="type">' . esc_html($type === 'heartbeat' ? __('Heartbeat', 'qndrs-availability-heartbeat-monitor') : __('HTTP check', 'qndrs-availability-heartbeat-monitor')) . '</span>';
         if ($type !== 'heartbeat' && $url !== '') {
-            echo '<a href="' . esc_url($url) . '" target="_blank" rel="noopener noreferrer">' . esc_html($url) . '</a>';
+            echo '<a data-view-column="address" href="' . esc_url($url) . '" target="_blank" rel="noopener noreferrer">' . esc_html($url) . '</a>';
         } elseif ($type === 'heartbeat' && !empty($url_data['expected_interval'])) {
             /* translators: %d: Expected heartbeat interval in seconds. */
-            echo '<span>' . esc_html(sprintf(__('Expected every %d seconds', 'qndrs-availability-heartbeat-monitor'), absint($url_data['expected_interval']))) . '</span>';
-        }
-        echo '</div>';
-
-        echo '<div class="uptime-url-current">';
+            echo '<span data-view-column="address">' . esc_html(sprintf(__('Expected every %d seconds', 'qndrs-availability-heartbeat-monitor'), absint($url_data['expected_interval']))) . '</span>';
+        }
+        echo '</div>';
+
+        echo '<div class="uptime-url-current" data-view-column="check">';
         if ($latest !== null) {
             $status_code = isset($latest['status_code']) && $latest['status_code'] !== null ? absint($latest['status_code']) : 0;
-            $response_time_ms = isset($latest['response_time_ms']) && $latest['response_time_ms'] !== null ? absint($latest['response_time_ms']) : null;
             $timestamp = isset($latest['timestamp']) ? (string)$latest['timestamp'] : '';
             $display_timestamp = isset($latest['display_timestamp']) ? (string)$latest['display_timestamp'] : $timestamp;
@@ -2266 +2325 @@
                 echo '<span class="uptime-chip">' . esc_html(sprintf(__('HTTP %d', 'qndrs-availability-heartbeat-monitor'), $status_code)) . '</span>';
             }
-            if ($response_time_ms !== null) {
-                /* translators: %d: Response time in milliseconds. */
-                echo '<span class="uptime-chip">' . esc_html(sprintf(__('%d ms', 'qndrs-availability-heartbeat-monitor'), $response_time_ms)) . '</span>';
-            }
             if ($timestamp !== '') {
                 echo '<time class="uptime-chip uptime-chip-muted" datetime="' . esc_attr($timestamp) . '">' . esc_html($display_timestamp) . '</time>';
@@ -2278 +2333 @@
         echo '</div>';
 
-        echo '<div class="uptime-url-metrics">';
-        $this->render_uptime_summary($uptime);
+        echo '<div class="uptime-url-response" data-view-column="response">';
+        if ($latest !== null && isset($latest['response_time_ms'])) {
+            /* translators: %d: Response time in milliseconds. */
+            echo '<span class="uptime-chip">' . esc_html(sprintf(__('%d ms', 'qndrs-availability-heartbeat-monitor'), absint($latest['response_time_ms']))) . '</span>';
+        } elseif (empty($dashboard['average_response_time_display'])) {
+            echo '<span class="uptime-chip uptime-chip-muted">' . esc_html__('No data', 'qndrs-availability-heartbeat-monitor') . '</span>';
+        }
         if (!empty($dashboard['average_response_time_display'])) {
             echo '<span class="uptime-response-average">' . esc_html($dashboard['average_response_time_display']) . '</span>';
@@ -2285 +2345 @@
         echo '</div>';
 
-        echo '<div class="uptime-url-alerts">';
+        echo '<div class="uptime-url-metrics" data-view-column="uptime">';
+        $this->render_uptime_summary($uptime);
+        echo '</div>';
+
+        echo '<div class="uptime-url-alerts" data-view-column="alerts">';
         echo '<span class="uptime-chip' . ($notifications_label === __('No alerts', 'qndrs-availability-heartbeat-monitor') ? ' is-warning' : '') . '">' . esc_html($notifications_label) . '</span>';
+        echo '</div>';
+        echo '<div class="uptime-url-incident" data-view-column="incident">';
         echo '<span class="uptime-chip' . ($incident_open ? ' is-danger' : ' uptime-chip-muted') . '">' . esc_html($incident_label) . '</span>';
         if ($incident_duration_display !== '') {
@@ -2305 +2371 @@
     }
 
-    /**
-     * Renders the admin page for managing monitored URLs.
-     */
+    /** Renders browser-local overview preferences; no configuration is submitted. */
+    private function render_view_controls(): void
+    {
+        echo '<div class="uptime-view-controls" hidden>';
+        echo '<div class="uptime-theme-switch" role="group" aria-label="' . esc_attr__('Color theme', 'qndrs-availability-heartbeat-monitor') . '">';
+        echo '<button type="button" data-theme-choice="light" aria-pressed="true">' . esc_html__('Light', 'qndrs-availability-heartbeat-monitor') . '</button>';
+        echo '<button type="button" data-theme-choice="dark" aria-pressed="false">' . esc_html__('Dark', 'qndrs-availability-heartbeat-monitor') . '</button>';
+        echo '<button type="button" data-theme-choice="system" aria-pressed="false">' . esc_html__('System', 'qndrs-availability-heartbeat-monitor') . '</button></div>';
+        echo '<details class="uptime-column-settings"><summary class="button">' . esc_html__('Columns', 'qndrs-availability-heartbeat-monitor') . ' <span class="uptime-column-count" aria-live="polite" aria-atomic="true">7/7</span></summary>';
+        echo '<div class="uptime-column-panel"><p>' . esc_html__('Status and monitor name always remain visible.', 'qndrs-availability-heartbeat-monitor') . '</p>';
+        echo '<fieldset><legend class="screen-reader-text">' . esc_html__('Columns', 'qndrs-availability-heartbeat-monitor') . '</legend>';
+        $columns = [
+            'check' => __('Last check & HTTP status', 'qndrs-availability-heartbeat-monitor'),
+            'response' => __('Response time & average', 'qndrs-availability-heartbeat-monitor'),
+            'uptime' => __('Uptime (24h, 7d, 30d)', 'qndrs-availability-heartbeat-monitor'),
+            'alerts' => __('Notifications', 'qndrs-availability-heartbeat-monitor'),
+            'incident' => __('Incidents', 'qndrs-availability-heartbeat-monitor'),
+            'type' => __('Monitor type', 'qndrs-availability-heartbeat-monitor'),
+            'address' => __('URL / heartbeat interval', 'qndrs-availability-heartbeat-monitor'),
+        ];
+        foreach ($columns as $key => $label) {
+            echo '<label><input type="checkbox" data-view-toggle="' . esc_attr($key) . '" checked> ' . esc_html($label) . '</label>';
+        }
+        echo '</fieldset><div class="uptime-column-panel-actions">';
+        echo '<button type="button" class="button uptime-view-compact">' . esc_html__('Compact overview', 'qndrs-availability-heartbeat-monitor') . '</button>';
+        echo '<button type="button" class="button uptime-view-reset">' . esc_html__('Restore defaults', 'qndrs-availability-heartbeat-monitor') . '</button></div></div></details></div>';
+    }
+
+    /** Renders the admin page for managing monitored URLs. */
     public function render_urls_page(): void
     {
@@ -2374 +2466 @@
         $urls = $dashboard['urls'];
 
-        echo '<div class="wrap uptime-monitor-admin uptime-monitor-dashboard">';
+        echo '<div class="wrap uptime-monitor-admin uptime-monitor-dashboard uptime-monitor-overview">';
         echo '<div class="uptime-dashboard-header">';
         echo '<h1>' . esc_html__('Qndrs Monitor', 'qndrs-availability-heartbeat-monitor') . '</h1>';
@@ -2383 +2475 @@
         echo '</div>';
         echo '</div>';
+        $this->render_view_controls();
         echo '<div class="uptime-monitor-notices" aria-live="polite" aria-atomic="true"></div>';
 
@@ -3181 +3274 @@
         global $wpdb;
 
+        if ($this->get_history_storage_mode() === self::HISTORY_STORAGE_TABLE) {
+            return ['success' => false, 'message' => 'History storage is already finalized; refusing to replace table history.'];
+        }
+
         $batch_size = min(2000, max(50, $batch_size));
         $this->create_history_table();
@@ -3186 +3283 @@
         update_option('qndrs_ahm_data_schema_version', self::DATA_SCHEMA_VERSION, false);
         $history = $this->get_status_history();
+        // Legacy is authoritative until verification completes. Rebuild the shadow
+        // copy so retention, rollback and interrupted imports cannot leave extra rows.
+        update_option('qndrs_ahm_history_storage', self::HISTORY_STORAGE_LEGACY, false);
+        // phpcs:ignore WordPress.DB.DirectDatabaseQuery.DirectQuery, WordPress.DB.DirectDatabaseQuery.NoCaching, PluginCheck.Security.DirectDB.UnescapedDBParameter, WordPress.DB.PreparedSQL.NotPrepared -- Only the unfinalized shadow copy is cleared; legacy history is retained for recovery.
+        if ($wpdb->query('DELETE FROM ' . $this->get_history_table_name()) === false) {
+            return ['success' => false, 'message' => 'Could not reset shadow history; legacy storage remains active.'];
+        }
         $batch = [];
         $valid_entries = 0;

qndrs-availability-heartbeat-monitor/trunk/readme.txt

@@ -5 +5 @@
 Tested up to: 7.1
 Requires PHP: 8.0
-Stable tag: 3.6.1
+Stable tag: 3.7.1
 License: GPLv2 or later
 License URI: https://www.gnu.org/licenses/gpl-2.0.html
@@ -15 +15 @@
 Qndrs Availability and Heartbeat Monitor checks external URLs from the WordPress dashboard and can also monitor firewalled clients through outbound heartbeat pings. It supports multiple monitored URLs, per-URL monitoring toggles, email alerts, configurable Pushover alerts, status history, response times, uptime percentages, JSON import/export, structured logging, heartbeat monitors, and authenticated REST endpoints.
 
+The monitor overview supports light, dark and system themes, configurable columns and a compact view. Display preferences are remembered in this browser for each site and WordPress user, including during automatic refresh. Status, monitor names and management actions remain available.
+
 == Installation ==
 
 1. Upload the plugin folder to `/wp-content/plugins/qndrs-availability-heartbeat-monitor`.
 2. Activate Qndrs Availability and Heartbeat Monitor from the WordPress plugins page.
-3. Open Qndrs Monitor in the WordPress admin menu.
+3. Open Qndrs Monitor > Overview in the WordPress admin menu. Use Qndrs Monitor > Settings for configuration.
 4. Add one or more URLs and choose notification channels.
 
@@ -69 +71 @@
 
 == Changelog ==
+
+= 3.7.1 =
+
+* Renamed the first submenu to Overview to distinguish it from the Qndrs Monitor parent menu; Settings remains the configuration page.
+
+= 3.7.0 =
+
+* Added light, dark and system themes with configurable overview columns and a compact view.
+* Preserved display preferences and expanded history during automatic refresh.
+* Fixed shadow-history migration recovery, unknown aggregate status and concurrent heartbeat persistence.
+* Added Dutch translations for the new display controls.
 
 = 3.6.1 =

qndrs-availability-heartbeat-monitor/trunk/uptime-monitor.css

@@ -18 +18 @@
 }
 
+/* Overview preferences are deliberately scoped away from settings and the widget. */
+.uptime-monitor-overview {
+    --ump-columns: 90px minmax(190px, 1.4fr) minmax(150px, .85fr) minmax(90px, .5fr) minmax(190px, 1fr) minmax(100px, .6fr) minmax(100px, .6fr) 340px;
+    --ump-list-min-width: 1386px;
+    --ump-soft: #f6f7f7;
+    --ump-link: #2271b1;
+    --ump-shadow: 0 12px 34px rgba(0, 0, 0, .16);
+}
+
+.uptime-monitor-overview [hidden] { display: none !important; }
+.uptime-view-controls { align-items: center; display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end; margin: 12px 0; }
+.uptime-theme-switch { background: var(--ump-panel); border: 1px solid var(--ump-border); border-radius: 6px; display: flex; padding: 3px; }
+.uptime-theme-switch button { background: transparent; border: 0; border-radius: 3px; color: var(--ump-muted); cursor: pointer; font: inherit; padding: 6px 12px; }
+.uptime-theme-switch button[aria-pressed="true"] { background: var(--ump-soft); color: var(--ump-text); box-shadow: 0 1px 3px rgba(0, 0, 0, .15); }
+.uptime-monitor-overview :is(button, summary, input, a):focus-visible { outline: 2px solid var(--ump-link); outline-offset: 2px; }
+.uptime-column-settings { position: relative; }
+.uptime-column-settings > summary { cursor: pointer; list-style: none; }
+.uptime-column-settings > summary::-webkit-details-marker { display: none; }
+.uptime-column-settings[open] > summary { border-color: var(--ump-link); }
+.uptime-column-count { border-left: 1px solid var(--ump-border); color: var(--ump-muted); font-size: 11px; margin-left: 6px; padding-left: 8px; }
+.uptime-column-panel { background: var(--ump-panel); border: 1px solid var(--ump-border); border-radius: 6px; box-shadow: var(--ump-shadow); box-sizing: border-box; max-height: 65vh; overflow-y: auto; padding: 16px; position: absolute; right: 0; top: calc(100% + 8px); width: 310px; z-index: 20; }
+.uptime-column-panel p { color: var(--ump-muted); font-size: 12px; margin: 0 0 10px; }
+.uptime-column-panel fieldset { border: 0; margin: 0; min-width: 0; padding: 0; }
+.uptime-column-panel label { align-items: center; cursor: pointer; display: flex; gap: 9px; padding: 7px 0; }
+.uptime-column-panel input[type="checkbox"] { flex: 0 0 auto; margin: 0; }
+.uptime-column-panel-actions { border-top: 1px solid var(--ump-border); display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; padding-top: 12px; }
+.uptime-column-panel-actions .button { flex: 1 1 auto; }
+.uptime-url-list-scroll { overflow-x: auto; padding: 2px 2px 8px; scrollbar-color: var(--ump-border) transparent; }
+.uptime-url-column-head { align-items: center; box-sizing: border-box; color: var(--ump-muted); display: grid; font-size: 11px; font-weight: 600; gap: 12px 14px; grid-template-columns: var(--ump-columns); min-width: var(--ump-list-min-width); padding: 8px 17px 8px 21px; }
+.uptime-monitor-overview .uptime-url-list { min-width: var(--ump-list-min-width); }
+.uptime-url-list-scroll.is-empty .uptime-url-column-head { display: none; }
+.uptime-monitor-overview .uptime-url-list-scroll.is-empty .uptime-url-list { min-width: 0; }
+.uptime-monitor-overview .uptime-url-row { gap: 12px 14px; grid-template-columns: var(--ump-columns); }
+.uptime-monitor-overview .uptime-url-actions { justify-content: flex-end; }
+.uptime-url-response, .uptime-url-incident { align-items: center; display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; }
+.uptime-hide-check [data-view-column="check"],
+.uptime-hide-response [data-view-column="response"],
+.uptime-hide-uptime [data-view-column="uptime"],
+.uptime-hide-alerts [data-view-column="alerts"],
+.uptime-hide-incident [data-view-column="incident"],
+.uptime-hide-type [data-view-column="type"],
+.uptime-hide-address [data-view-column="address"] { display: none !important; }
+
+.uptime-monitor-overview[data-theme="dark"] {
+    --ump-bg: #10161f;
+    --ump-panel: #19222e;
+    --ump-soft: #202c3a;
+    --ump-border: #344152;
+    --ump-text: #e7edf5;
+    --ump-muted: #a9b6c7;
+    --ump-up: #6ad79a;
+    --ump-down: #ff9d9d;
+    --ump-paused: #a9b6c7;
+    --ump-warning: #f0c36d;
+    --ump-info: #9bbcff;
+    --ump-link: #9bbcff;
+    --ump-shadow: 0 12px 34px rgba(0, 0, 0, .4);
+    background: var(--ump-bg);
+    color-scheme: dark;
+}
+body.qndrs-ahm-dark-overview #wpcontent,
+body.qndrs-ahm-dark-overview #wpfooter { background: #10161f; }
+body.qndrs-ahm-dark-overview #wpfooter { color: #a9b6c7; }
+body.qndrs-ahm-dark-overview #wpfooter a { color: #9bbcff; }
+.uptime-monitor-overview[data-theme="dark"] :is(h1, h2, h3, label) { color: var(--ump-text); }
+.uptime-monitor-overview[data-theme="dark"] a { color: var(--ump-link); }
+.uptime-monitor-overview[data-theme="dark"] .button { background: var(--ump-panel); border-color: var(--ump-border); color: var(--ump-link); }
+.uptime-monitor-overview[data-theme="dark"] .button:hover { background: var(--ump-soft); border-color: var(--ump-link); }
+.uptime-monitor-overview[data-theme="dark"] .button-primary { background: #5269ee; border-color: #5269ee; color: #fff; }
+.uptime-monitor-overview[data-theme="dark"] .button-primary:hover { background: #4359d1; border-color: #4359d1; }
+.uptime-monitor-overview[data-theme="dark"] .button:disabled { background: var(--ump-soft) !important; border-color: var(--ump-border) !important; color: var(--ump-muted) !important; }
+.uptime-monitor-overview[data-theme="dark"] :is(input[type="url"], input[type="text"], input[type="checkbox"]) { background: var(--ump-bg); border-color: var(--ump-muted); color: var(--ump-text); }
+.uptime-monitor-overview[data-theme="dark"] input::placeholder { color: var(--ump-muted); }
+.uptime-monitor-overview[data-theme="dark"] .uptime-chip { background: var(--ump-soft); border-color: var(--ump-border); color: var(--ump-text); }
+.uptime-monitor-overview[data-theme="dark"] .uptime-chip-muted { color: var(--ump-muted); }
+.uptime-monitor-overview[data-theme="dark"] .uptime-chip.is-warning { background: #382e1d; border-color: #706044; color: var(--ump-warning); }
+.uptime-monitor-overview[data-theme="dark"] .uptime-chip.is-danger { background: #382329; border-color: #70404b; color: var(--ump-down); }
+.uptime-monitor-overview[data-theme="dark"] .uptime-percentage { background: var(--ump-soft); border-color: var(--ump-border); }
+.uptime-monitor-overview[data-theme="dark"] .uptime-percentage-label { background: #2b3747; color: var(--ump-muted); }
+.uptime-monitor-overview[data-theme="dark"] .uptime-percentage-value { color: var(--ump-up); }
+.uptime-monitor-overview[data-theme="dark"] :is(.uptime-response-average, .uptime-history-response-time) { background: #20364a; color: #acdcff; }
+.uptime-monitor-overview[data-theme="dark"] :is(.uptime-history-empty, .uptime-history-time, .uptime-history-message) { color: var(--ump-muted); }
+.uptime-monitor-overview[data-theme="dark"] .uptime-history-code { color: var(--ump-text); }
+.uptime-monitor-overview[data-theme="dark"] :is(.uptime-status-up, .uptime-response-trend-faster) { background: #213b30; color: var(--ump-up); }
+.uptime-monitor-overview[data-theme="dark"] .uptime-status-down { background: #44282f; color: var(--ump-down); }
+.uptime-monitor-overview[data-theme="dark"] :is(.uptime-status-error, .uptime-status-degraded, .uptime-response-trend-slower) { background: #382e1d; color: var(--ump-warning); }
+.uptime-monitor-overview[data-theme="dark"] :is(.uptime-status-paused, .uptime-status-unknown, .uptime-response-trend-stable) { background: var(--ump-soft); color: var(--ump-muted); }
+.uptime-monitor-overview[data-theme="dark"] .uptime-delete-button { border-color: #70404b; color: var(--ump-down); }
+.uptime-monitor-overview[data-theme="dark"] .uptime-delete-button:hover { background: #44282f; border-color: var(--ump-down); }
+.uptime-monitor-overview[data-theme="dark"] .uptime-monitor-notice { background: var(--ump-panel); color: var(--ump-text); }
+.uptime-monitor-overview[data-theme="dark"] .notice-dismiss::before { color: var(--ump-muted); }
+
+@media (max-width: 782px) {
+    .uptime-monitor-overview .uptime-dashboard-header { align-items: flex-start; flex-direction: column; }
+    .uptime-view-controls { justify-content: space-between; }
+    .uptime-column-settings { margin-left: auto; }
+    .uptime-column-panel { max-width: calc(100vw - 40px); }
+}
+
 .uptime-widget-refresh-meter {
     background: rgba(34, 113, 177, 0.12);
@@ -62 +161 @@
     border-left-color: var(--ump-warning);
     background: rgba(183, 121, 31, 0.07);
+}
+
+.uptime-dashboard-widget.is-unknown .uptime-widget-status {
+    border-left-color: var(--ump-paused);
 }
 
@@ -219 +322 @@
 .uptime-statusbar.is-degraded {
     border-left-color: var(--ump-warning);
+}
+
+.uptime-statusbar.is-unknown {
+    border-left-color: var(--ump-paused);
 }
 

qndrs-availability-heartbeat-monitor/trunk/uptime-monitor.js

@@ -6 +6 @@
     let widgetRefreshTimer = null;
     let widgetRefreshRequest = null;
+    const overview = $('.uptime-monitor-overview');
+    const viewPreferences = { theme: 'light', hidden: [] };
+    const viewColumns = {
+        check: { track: 'minmax(150px, .85fr)', width: 164 },
+        response: { track: 'minmax(90px, .5fr)', width: 104 },
+        uptime: { track: 'minmax(190px, 1fr)', width: 204 },
+        alerts: { track: 'minmax(100px, .6fr)', width: 114 },
+        incident: { track: 'minmax(100px, .6fr)', width: 114 }
+    };
+    const optionalViewFields = [...Object.keys(viewColumns), 'type', 'address'];
+    const systemTheme = window.matchMedia('(prefers-color-scheme: dark)');
+
+    function applyViewTheme() {
+        if (!overview.length) {
+            return;
+        }
+        const theme = viewPreferences.theme === 'system' ? (systemTheme.matches ? 'dark' : 'light') : viewPreferences.theme;
+        overview.attr('data-theme', theme);
+        $('body').toggleClass('qndrs-ahm-dark-overview', theme === 'dark');
+        overview.find('[data-theme-choice]').each(function () {
+            $(this).attr('aria-pressed', String(this.dataset.themeChoice === viewPreferences.theme));
+        });
+    }
+
+    function applyViewColumns() {
+        if (!overview.length) {
+            return;
+        }
+        const visible = Object.keys(viewColumns).filter(key => !viewPreferences.hidden.includes(key));
+        overview[0].style.setProperty('--ump-columns', [
+            '90px', 'minmax(190px, 1.4fr)', ...visible.map(key => viewColumns[key].track), '340px'
+        ].join(' '));
+        overview[0].style.setProperty('--ump-list-min-width', (686 + visible.reduce((width, key) => width + viewColumns[key].width, 0)) + 'px');
+        optionalViewFields.forEach(function (key) {
+            const hidden = viewPreferences.hidden.includes(key);
+            overview.toggleClass('uptime-hide-' + key, hidden);
+            overview.find('[data-view-toggle="' + key + '"]').prop('checked', !hidden);
+        });
+        overview.find('.uptime-column-count').text((optionalViewFields.length - viewPreferences.hidden.length) + '/' + optionalViewFields.length);
+    }
+
+    function saveViewPreferences() {
+        try {
+            window.localStorage.setItem(qndrsAhmAjax.view_storage_key, JSON.stringify(viewPreferences));
+        } catch (error) {
+            // Preferences still work for this page when browser storage is unavailable.
+        }
+    }
+
+    function initializeViewPreferences() {
+        if (!overview.length) {
+            return;
+        }
+        try {
+            const saved = JSON.parse(window.localStorage.getItem(qndrsAhmAjax.view_storage_key));
+            if (saved && ['light', 'dark', 'system'].includes(saved.theme)) {
+                viewPreferences.theme = saved.theme;
+            }
+            if (saved && Array.isArray(saved.hidden)) {
+                viewPreferences.hidden = optionalViewFields.filter(key => saved.hidden.includes(key));
+            }
+        } catch (error) {
+            // Corrupt or blocked storage must not prevent monitoring controls from working.
+        }
+        applyViewTheme();
+        applyViewColumns();
+        overview.find('.uptime-view-controls').prop('hidden', false);
+        overview.on('click', '[data-theme-choice]', function () {
+            viewPreferences.theme = this.dataset.themeChoice;
+            applyViewTheme();
+            saveViewPreferences();
+        });
+        overview.on('change', '[data-view-toggle]', function () {
+            viewPreferences.hidden = optionalViewFields.filter(key => !overview.find('[data-view-toggle="' + key + '"]').prop('checked'));
+            applyViewColumns();
+            saveViewPreferences();
+        });
+        overview.on('click', '.uptime-view-compact, .uptime-view-reset', function () {
+            viewPreferences.hidden = $(this).hasClass('uptime-view-compact') ? ['check', 'alerts', 'incident', 'type', 'address'] : [];
+            applyViewColumns();
+            saveViewPreferences();
+        });
+        $(document).on('click.qndrsAhmView', function (event) {
+            const settings = overview.find('.uptime-column-settings');
+            if (!settings[0].contains(event.target)) {
+                settings.prop('open', false);
+            }
+        }).on('keydown.qndrsAhmView', function (event) {
+            const settings = overview.find('.uptime-column-settings');
+            if (event.key === 'Escape' && settings.prop('open')) {
+                settings.prop('open', false).find('summary').trigger('focus');
+            }
+        });
+        systemTheme.addEventListener('change', applyViewTheme);
+    }
+
+    initializeViewPreferences();
 
     function escapeHtml(value) {
@@ -205 +302 @@
 
         const statusCode = parseInt(latest.status_code, 10);
-        const responseTime = parseInt(latest.response_time_ms, 10);
         const timestamp = latest.timestamp || '';
         const displayTimestamp = latest.display_timestamp || timestamp;
@@ -211 +307 @@
         return `
             ${statusCode ? `<span class="uptime-chip">${escapeHtml(qndrsAhmL10n.http_status.replace('%d', statusCode))}</span>` : ''}
-            ${!isNaN(responseTime) ? `<span class="uptime-chip">${escapeHtml(qndrsAhmL10n.response_time_ms.replace('%d', responseTime))}</span>` : ''}
             ${timestamp ? `<time class="uptime-chip uptime-chip-muted" datetime="${escapeHtml(timestamp)}">${escapeHtml(displayTimestamp)}</time>` : ''}
         `;
@@ -229 +324 @@
         const title = type === 'heartbeat' ? (urlData.name || qndrsAhmL10n.heartbeat) : getHost(url);
         const identityMeta = type === 'heartbeat'
-            ? `<span>${escapeHtml((qndrsAhmL10n.expected_every_seconds || 'Expected every %d seconds').replace('%d', parseInt(urlData.heartbeat && urlData.heartbeat.expected_interval ? urlData.heartbeat.expected_interval : urlData.expected_interval, 10) || 300))}</span>`
-            : `<a href="${escapeHtml(url)}" target="_blank" rel="noopener noreferrer">${escapeHtml(url)}</a>`;
+            ? `<span data-view-column="address">${escapeHtml((qndrsAhmL10n.expected_every_seconds || 'Expected every %d seconds').replace('%d', parseInt(urlData.heartbeat && urlData.heartbeat.expected_interval ? urlData.heartbeat.expected_interval : urlData.expected_interval, 10) || 300))}</span>`
+            : `<a data-view-column="address" href="${escapeHtml(url)}" target="_blank" rel="noopener noreferrer">${escapeHtml(url)}</a>`;
         const averageResponse = dashboard.average_response_time_display
             ? `<span class="uptime-response-average">${escapeHtml(dashboard.average_response_time_display)}</span>`
             : '';
+        const latest = dashboard.latest || {};
+        const responseTime = parseInt(latest.response_time_ms, 10);
+        const currentResponse = !isNaN(responseTime)
+            ? `<span class="uptime-chip">${escapeHtml(qndrsAhmL10n.response_time_ms.replace('%d', responseTime))}</span>`
+            : (averageResponse ? '' : `<span class="uptime-chip uptime-chip-muted">${escapeHtml(qndrsAhmL10n.no_data)}</span>`);
 
         return `
@@ -243 +343 @@
                 <div class="uptime-url-identity">
                     <strong>${escapeHtml(title)}</strong>
-                    <span class="uptime-chip uptime-chip-muted">${escapeHtml(type === 'heartbeat' ? qndrsAhmL10n.heartbeat : qndrsAhmL10n.http_check)}</span>
+                    <span class="uptime-chip uptime-chip-muted" data-view-column="type">${escapeHtml(type === 'heartbeat' ? qndrsAhmL10n.heartbeat : qndrsAhmL10n.http_check)}</span>
                     ${identityMeta}
                 </div>
-                <div class="uptime-url-current">
+                <div class="uptime-url-current" data-view-column="check">
                     ${renderCurrentCheck(dashboard)}
                 </div>
-                <div class="uptime-url-metrics">
+                <div class="uptime-url-response" data-view-column="response">
+                    ${currentResponse}
+                    ${averageResponse}
+                </div>
+                <div class="uptime-url-metrics" data-view-column="uptime">
                     ${renderUptimeSummary(urlData.uptime)}
-                    ${averageResponse}
-                </div>
-                <div class="uptime-url-alerts">
+                </div>
+                <div class="uptime-url-alerts" data-view-column="alerts">
                     <span class="uptime-chip${notificationsLabel === qndrsAhmL10n.no_alerts ? ' is-warning' : ''}">${escapeHtml(notificationsLabel)}</span>
+                </div>
+                <div class="uptime-url-incident" data-view-column="incident">
                     <span class="uptime-chip${incidentOpen ? ' is-danger' : ' uptime-chip-muted'}">${escapeHtml(incidentLabel)}</span>
                     ${incidentDuration ? `<span class="uptime-chip is-danger">${escapeHtml(incidentDuration)}</span>` : ''}
@@ -272 +377 @@
     function updateUrlList(urls) {
         const list = $('.uptime-url-list');
+        list.closest('.uptime-url-list-scroll').toggleClass('is-empty', !Array.isArray(urls) || urls.length === 0);
         const expandedIds = [];
 
@@ -466 +572 @@
 
         $('.uptime-auto-refresh-input').prop('checked', isEnabled);
-        window.localStorage.setItem(autoRefreshStorageKey, isEnabled ? '1' : '0');
+        try {
+            window.localStorage.setItem(autoRefreshStorageKey, isEnabled ? '1' : '0');
+        } catch (error) {
+            // Auto-refresh remains usable without persistent browser storage.
+        }
 
         if (isEnabled) {
@@ -511 +621 @@
     });
 
-    if ($('.uptime-auto-refresh-input').length && window.localStorage.getItem(autoRefreshStorageKey) === '1') {
-        setAutoRefresh(true);
+    try {
+        if ($('.uptime-auto-refresh-input').length && window.localStorage.getItem(autoRefreshStorageKey) === '1') {
+            setAutoRefresh(true);
+        }
+    } catch (error) {
+        // Keep manual refresh and all other controls available.
     }