Add history exploration capabilities to Explorer UI

[thjaeckle]

Summary

• Time Travel Mode: Toggle in the Thing Details tab with revision slider and timestamp picker to inspect a Thing's state at any past point. All sections (Details, Attributes, Features) update automatically. Visual indicators (warning banner, amber border, badges) clearly signal historical viewing. Oldest available revision is probed via SSE.
• Thing Updates (replaces "Incoming Thing Updates"): Dual-mode section with Live (existing SSE behavior) and Historical modes. Historical mode supports from/to range selection (by revision with sliders or by timestamp), server-side RQL filtering, and auto-stops when the stream is exhausted. "Show updates from here" button in Time Travel bridges to Historical Thing Updates.
• Diff View: Side-by-side revision comparison using ace-diff with IntelliJ-style connector lines and character-level change highlighting. Revision slider pickers matching the Time Travel UX. Change overview minimap in the gutter for quick navigation. "Time Travel" button to use active time-travel revision as diff baseline.
• Attributes Diff and Features Diff tabs: Scoped diff views showing only attributes or the selected feature, synchronized with the main Diff tab's revision controls. Activating any Diff tab activates all three.

[thomas-fries-keen]

Sounds very impressive! I was not aware that this is even possible.

[thjaeckle]

@thomas-fries-keen yes, this is possible already since Ditto 3.2.0 - and I often used it directly via API to find out when and why a device changed its state. That however is a quite difficult API to use and providing it via the UI is a much nicer experience :)

It also depends on the configuration how long to keep history how far back you can look back

[hu-ahmed]

Code Review — feature/ui-history-exploration

▎ Thanks for this — really nice feature. Time Travel, the Diff tabs, and the Historical Updates stream are a proper step up for the Explorer, and the module split is clean.

I ran the branch locally and went through the code. Findings below, grouped by severity.

Blockers

B1. Tab-sync cascade on Diff-tab activation

File: thingsDiff.ts:266-276

syncTabs resets its syncing guard synchronously, but Bootstrap's shown.bs.tab fires asynchronously after the CSS fade. When the async events arrive, syncing is already false, so the guard doesn't stop re-entry. Each
activated sibling tab calls back into syncTabs, producing a cascade.

Today the !link.classList.contains('active') check prevents it from becoming infinite — but that safety depends on an undocumented Bootstrap detail. A theme change, a data-bs-animation="false", or a Bootstrap upgrade turns
this into a runaway with no related code change on this branch.

B2. Timestamp time-travel returns 404 for any non-UTC user (reproduced)

Files: thingsHistory.ts:322-325, thingUpdates.ts:507-510

toDatetimeLocalValue returns isoString.substring(0, 19), dropping the trailing Z. The interprets the result as local time. On submit, new Date(value).toISOString() converts local → UTC, shifting
the timestamp by the browser's offset.

B3. No environment-change cleanup — SSE streams persist across env switch

Files: thingsHistory.ts, thingUpdates.ts, thingsDiff.ts

The codebase pattern for stream-owning modules is to subscribe to Environments.addChangeListener and close SSE on env switch — see thingsSSE.ts:32, searchFilter.ts:51, fields.ts:61, featureMessages.ts:42,
thingMessages.ts:38. None of the new modules subscribe.

Start a historical stream in env A, switch to env B: the old connection keeps delivering env A's events into a UI that thinks it's in env B, with env A's auth headers baked in. Data-integrity issue, arguably a small security
issue.

Majors

File: thingsDiff.ts:288-309

Promise.all on two fetchRevision calls with no request token. If the gateway is momentarily slow, a late response from an earlier slider position overwrites newer state. Slider labels say one pair, rendered JSON is another.
The 300 ms debounce reduces but doesn't eliminate the window.

File: thingUpdates.ts:406-408

One malformed frame kills the handler and leaves Stop visible with a dead stream. The file's own probeOldestRevision wraps its parse; this one doesn't. Same pattern exists pre-existing in thingsSSE.ts, but the new code
shouldn't replicate it.

File: thingUpdates.ts:361-404

from > to (or fromTs > toTs) is passed straight to the API. Confirmed with a live probe: backend returns HTTP 200 with zero events and closes in ~19 ms. User sees Fetch → Stop → Fetch flicker with an empty table and no
message.

File: thingUpdates.ts:495-505

.min and .max are set on every other slider and input. Only .min on this one. User can type any number into the From box. Looks like a copy-paste miss from an otherwise symmetric pair.

Files: thingsHistory.ts:142-186, thingsDiff.ts:219-247, thingUpdates.ts:459-493

The probe does self-close on first message, so this isn't a classic leak. The real issue is that thingsHistory.ts:155 has no thingId === currentThingId guard, unlike the other two (thingsDiff.ts:229, thingUpdates.ts:470). If
the user switches Thing before the probe's first message arrives, the stale probe's result silently overwrites the new Thing's slider range with the old Thing's oldest revision.

Files: policiesJSON.ts:33, policiesResources.ts:38, policiesSubjects.ts:36

The diff from commit 3612c6d:

let policyEditor: ace.Editor;
let policyEditor;
Three annotations deleted — implicit any on the editor variables, losing all downstream type safety. Commit message attributes this to ace-builds type conflicts pulled in by ace-diff. The right fix is to import the correct
type, not to erase types across unrelated files:

import { Ace } from 'ace-builds';
let policyEditor: Ace.Editor;

Same root cause as ace as any in thingsDiff.ts:335 and subDiff.ts:85.

File: main.scss:326-330

.input-group input[type="number"] {
flex: 0 0 80px !important;
width: 80px !important;
padding-right: 6px !important;
-moz-appearance: textfield !important;
}

This applies to every Bootstrap number input app-wide. At least five templates use input[type="number"], including featureMessages.html and thingMessages.html, which are unrelated to this feature. !important makes it
unoverridable. Scope the selectors to the history/diff containers.

File: thingsDiff.ts:91

The "Time Travel" button reads getElementById('historyRevisionSlider') from the Time Travel module. Rename the ID in thingsHistory.html and this button silently no-ops with no signal. Expose an accessor from thingsHistory.ts
(e.g. getCurrentTimeTravelRevision(): number | null) to make the dependency explicit.

File: thingUpdates.ts:85, 426

Every event is pushed to two arrays and rendered as a DOM row. A Thing with thousands of revisions will OOM or hang the browser. Needs a cap with a "limit reached — narrow your range" notice, or table virtualization.

File: thingUpdates.ts:156-157

selectedRow = event.target.parentNode.rowIndex - 1;

Assumes the click landed directly on a . Clicking a nested or yields undefined → NaN-indexed row, silent no-op. Use (event.target as HTMLElement).closest('tr')?.rowIndex.

File: things.ts:92-93, 103

.catch((err) => console.error(...)). API.callDittoREST does show a toast for non-OK responses, so the error isn't truly silent — but the UI banner still reads "Time travel to revision X" while the data shown is from the
previous successful fetch. Needs at least a banner/badge reset on error.

File: main.ts:98-100

Things.addChangeListener(thingsDiff.onThingChanged);
Things.addHistoryModeChangeListener(thingsDiff.onHistoryModeChanged);
await thingsDiff.ready();

The listeners are registered before ready() populates dom.diffLeft*. The window is narrow — no Thing is selected yet at this point in startup — but the ordering violates the module's initialization contract. One-line swap.

File: thingUpdates.ts:438-443

Any SSE hiccup — transient network blip, proxy restart — permanently stops the stream. Fetch silently reappears. A toast or status message would help the user understand why data stopped flowing.

Minors

thingUpdates.ts:252 — onThingChanged no-ops when the same Thing is re-selected; if revisions advanced, sliders don't refresh.
thingsDiff.ts, subDiff.ts — no destroy() for the AceDiff instance; recreating it leaks DOM.
thingsDiff.ts:366-429 — renderChangeOverview rebuilds the SVG and re-binds listeners on every render.
thingsDiff.ts:296-309 — Promise.all → a single missing revision blanks the diff; allSettled would handle partial failures.
things.ts:24 — export let historyModeActive is a mutable global. Make it a getter.
thingUpdates.ts:342-345 — classList.add('show') bypasses bootstrap.Collapse API, desyncs the collapse state.
Triplicated probeOldestRevision with subtle divergences; extract a shared helper.
Duplicated toDatetimeLocalValue (and wrong — fix both together).
Duplicated HISTORY_FIELDS constant.
thingsDiff.ts:318-319 — JSON.parse(JSON.stringify(thing)) deep clone; structuredClone is standard now.
package.json:31 — caret pin on ace-diff (^4.0.0); given it already forced type erosion (M6), prefer exact pin.
thingsHistory.ts:224 — sibling.parentElement can be null.
thingUpdates.ts:85-86 — messages / filteredMessages inferred any[].
thingUpdates.ts:282-283 — return type [Term?] is a one-element tuple misused as array; should be Term[].
thingsDiff.ts:335, subDiff.ts:85 — ace as any cast; same root cause as M6.
Inconsistent debounce: 200 ms in Time Travel, 300 ms in Diff.

[thjaeckle]

@hu-ahmed addressed your findings - thanks a lot for finding so much :)

If you could have another look?