Addresses all remaining findings from the second review pass plus one issue found during live testing

Author: hu-ahmed

ui/modules/things/subDiff.html

@@ -10,6 +10,6 @@
   ~
   ~ SPDX-License-Identifier: EPL-2.0
   -->
-<div class="tab-pane fade container no-margin" style="height: 100%; position: relative;">
+<div class="tab-pane container no-margin" style="height: 100%; position: relative;">
     <div class="sub-diff-container" style="position: absolute; top: 0; bottom: 0; left: 0; right: 0;"></div>
 </div>

ui/modules/things/thingUpdates.html

@@ -66,13 +66,13 @@ <h5 data-bs-toggle="collapse" data-bs-target="#collapseThingUpdates">
                         <button class="btn btn-outline-secondary btn-sm rev-action-btn" id="buttonFromOldestTimestamp"
                             data-bs-toggle="tooltip" title="Set to oldest available timestamp">Oldest</button>
                         <label class="input-group-text rev-label">From</label>
-                        <input type="datetime-local" class="form-control form-control-sm" id="historicalFromTimestamp" step="1">
+                        <input type="datetime-local" class="form-control form-control-sm" id="historicalFromTimestamp" step="0.001">
                     </div>
                     <div class="input-group input-group-sm mb-1">
                         <button class="btn btn-outline-secondary btn-sm rev-action-btn" id="buttonToMostRecentTimestamp"
                             data-bs-toggle="tooltip" title="Set to most recent timestamp">Newest</button>
                         <label class="input-group-text rev-label">To</label>
-                        <input type="datetime-local" class="form-control form-control-sm" id="historicalToTimestamp" step="1">
+                        <input type="datetime-local" class="form-control form-control-sm" id="historicalToTimestamp" step="0.001">
                     </div>
                 </div>
                 <div class="input-group input-group-sm mb-1">

ui/modules/things/thingUpdates.ts

@@ -230,6 +230,17 @@ function onSelectContentChange() {
 function onLiveMessage(messageData) {
   if (isHistoricalMode) return;
 
+  while (messages.length >= MAX_MESSAGES) {
+    messages.shift();
+  }
+  while (filteredMessages.length >= MAX_MESSAGES) {
+    filteredMessages.shift();
+    const tbody = dom.tbodyThingUpdates;
+    if (tbody.rows.length > 0) {
+      tbody.deleteRow(0);
+    }
+  }
+
   messages.push(messageData);
 
   const filteredMessage = dom.tableFilterThingUpdates.filterItems([messageData]);
@@ -494,6 +505,7 @@ function onHistoricalMessage(event) {
     if (messages.length >= MAX_MESSAGES) {
       onStopHistorical();
       Utils.showError(`Message limit reached (${MAX_MESSAGES}). Narrow your revision/time range for more detail.`);
+      return;
     }
 
     const filteredMessage = dom.tableFilterThingUpdates.filterItems([messageData]);

ui/modules/things/things.ts

@@ -29,7 +29,6 @@ export function isHistoryModeActive(): boolean {
 }
 
 const observers = [];
-const historyModeObservers = [];
 
 const dom = {
   collapseThings: null,
@@ -115,7 +114,6 @@ export function refreshThingAtTimestamp(thingId: string, timestamp: string): Pro
 
 export function setHistoryMode(active: boolean) {
   _historyModeActive = active;
-  historyModeObservers.forEach((observer) => observer.call(null, active));
   if (!active && theThing) {
     refreshThing(theThing.thingId);
   }

ui/modules/things/thingsDiff.html

@@ -10,7 +10,7 @@
   ~
   ~ SPDX-License-Identifier: EPL-2.0
   -->
-<div class="tab-pane fade container no-margin" style="height: 100%; display: flex; flex-direction: column;">
+<div class="tab-pane container no-margin" style="height: 100%; display: flex; flex-direction: column;">
     <div class="input-group input-group-sm mb-1 mt-1">
         <label class="input-group-text rev-label">Left rev.</label>
         <span class="input-group-text" id="diffLeftMin" data-bs-toggle="tooltip"

ui/modules/things/thingsDiff.ts

@@ -15,6 +15,7 @@ import { Tab } from 'bootstrap';
 import * as ace from 'ace-builds/src-noconflict/ace';
 import AceDiff from 'ace-diff';
 import * as API from '../api.js';
+import * as Environments from '../environments/environments.js';
 import * as Utils from '../utils.js';
 import thingsDiffHTML from './thingsDiff.html';
 import * as Things from './things.js';
@@ -73,6 +74,8 @@ export function ThingsDiff(targetTab) {
     tabLink = document.querySelector(`a[data-bs-target="#${tabId}"]`);
     tabLink.addEventListener('shown.bs.tab', onTabActivated);
 
+    Environments.addChangeListener(onEnvironmentChanged);
+
     Utils.getAllElementsById(dom);
 
     // Left revision controls
@@ -129,13 +132,21 @@ export function ThingsDiff(targetTab) {
     cancelActiveProbe();
     probeOldestRevision(thing.thingId);
 
-    if (tabLink && tabLink.classList.contains('active')) {
+    if (isAnyDiffTabActive()) {
       fetchAndDiff();
     } else {
       viewDirty = true;
     }
   };
 
+  function isAnyDiffTabActive(): boolean {
+    if (tabLink && tabLink.classList.contains('active')) return true;
+    return subDiffs.some((s) => {
+      const link = s.subDiff.getTabLink();
+      return link && link.classList.contains('active');
+    });
+  }
+
   const addSubDiff = (subDiff, kind: 'attributes' | 'feature') => {
     subDiffs.push({ subDiff, kind });
     subDiff.setOnActivated((link) => syncTabs(link));
@@ -218,6 +229,20 @@ export function ThingsDiff(targetTab) {
     }
   }
 
+  function onEnvironmentChanged(modifiedField) {
+    if (['pinnedThings', 'filterList', 'messageTemplates', 'recentPolicyIds'].includes(modifiedField)) {
+      return;
+    }
+    cancelActiveProbe();
+    destroyDiff();
+    currentThingId = null;
+    currentMinRevision = 1;
+    currentMaxRevision = 1;
+    lastLeftJson = null;
+    lastRightJson = null;
+    viewDirty = false;
+  }
+
   function probeOldestRevision(thingId: string) {
     const probe = Things.probeOldestRevision(thingId);
     activeProbe = probe;
@@ -293,6 +318,16 @@ export function ThingsDiff(targetTab) {
     ]).then((results) => {
       if (token !== fetchToken) return; // stale response
 
+      if (results[0].status === 'rejected') {
+        console.warn(`Diff: failed to fetch left revision ${leftRev}`, results[0].reason);
+      }
+      if (results[1].status === 'rejected') {
+        console.warn(`Diff: failed to fetch right revision ${rightRev}`, results[1].reason);
+      }
+      if (results[0].status === 'rejected' && results[1].status === 'rejected') {
+        Utils.showError(`Failed to fetch both revisions (${leftRev}, ${rightRev}) for diff`);
+      }
+
       const leftJson = results[0].status === 'fulfilled' ? results[0].value : {};
       const rightJson = results[1].status === 'fulfilled' ? results[1].value : {};
       lastLeftJson = leftJson;

ui/modules/things/thingsHistory.html

@@ -53,7 +53,7 @@
         <div id="historyTimestampControls" hidden>
             <div class="input-group input-group-sm mb-1">
                 <label class="input-group-text">Timestamp</label>
-                <input type="datetime-local" class="form-control form-control-sm" id="historyTimestampInput" step="1">
+                <input type="datetime-local" class="form-control form-control-sm" id="historyTimestampInput" step="0.001">
             </div>
         </div>
         <button class="btn btn-outline-secondary btn-sm" id="historyShowUpdates" data-bs-toggle="tooltip"

ui/modules/things/thingsHistory.ts

@@ -312,7 +312,15 @@ function fetchHistoricalState() {
     dom.historyBannerText.textContent = `Time travel to revision ${revision}`;
     Things.refreshThingAtRevision(currentThingId, revision)
       .catch(() => {
-        dom.historyBannerText.textContent = `Time travel failed — revision ${revision} may not exist`;
+        if (revision >= currentMinRevision && revision < currentMaxRevision) {
+          currentMinRevision = revision + 1;
+          updateRevisionRange();
+          if (parseInt(dom.historyRevisionSlider.value, 10) < currentMinRevision) {
+            dom.historyRevisionSlider.value = String(currentMinRevision);
+            dom.historyRevisionInput.value = String(currentMinRevision);
+          }
+        }
+        dom.historyBannerText.textContent = `Revision ${revision} has been pruned from history (retention). Oldest retrievable is now ${currentMinRevision}.`;
       });
   } else {
     const timestamp = dom.historyTimestampInput.value;
@@ -321,7 +329,7 @@ function fetchHistoricalState() {
       dom.historyBannerText.textContent = `Time travel to ${timestamp.replace('T', ' ')}`;
       Things.refreshThingAtTimestamp(currentThingId, isoTimestamp)
         .catch(() => {
-          dom.historyBannerText.textContent = `Time travel failed — no data at ${timestamp.replace('T', ' ')}`;
+          dom.historyBannerText.textContent = `Time travel failed — no data at ${timestamp.replace('T', ' ')} (may be before retention window)`;
         });
     }
   }

ui/modules/utils.ts

@@ -338,8 +338,9 @@ export function formatDate(dateISOString: string, withMilliseconds = false): str
 export function toDatetimeLocalValue(isoString: string): string {
   if (!isoString) return '';
   const d = new Date(isoString);
+  if (isNaN(d.getTime())) return '';
   const offset = d.getTimezoneOffset() * 60000;
-  return new Date(d.getTime() - offset).toISOString().substring(0, 19);
+  return new Date(d.getTime() - offset).toISOString().substring(0, 23);
 }
 
 let modalConfirm;