Add optional "Include context headers" checkbox to Thing Updates

Adds a checkbox to the Thing Updates section that optionally includes
_context/headers in SSE events. In Live mode, toggling it reconnects
the SSE stream immediately. In Historical mode, only the useful
_context/headers/historical-headers field is requested.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Author: thjaeckle

ui/modules/things/thingUpdates.html

@@ -31,6 +31,12 @@ <h5 data-bs-toggle="collapse" data-bs-target="#collapseThingUpdates">
                     data-bs-toggle="tooltip" title="Reset the updates table">
                     <i class="bi bi-x-circle"></i> Reset
                 </button>
+                <div class="form-check form-check-inline ms-2 mb-0 d-flex align-items-center">
+                    <input class="form-check-input mt-0" type="checkbox" id="checkboxIncludeHeaders">
+                    <label class="form-check-label ms-1" for="checkboxIncludeHeaders"
+                        data-bs-toggle="tooltip" title="Include _context/headers in SSE events (reconnects live stream)">
+                        Include context headers</label>
+                </div>
             </div>
             <div id="historicalUpdateControls" hidden>
                 <div class="input-group input-group-sm mb-1">

ui/modules/things/thingUpdates.ts

@@ -21,6 +21,9 @@ import thingUpdatesHTML from './thingUpdates.html';
 import * as Things from './things.js';
 import * as ThingsSSE from './thingsSSE.js';
 
+const BASE_CONTEXT_FIELDS = '_context/topic,_context/path,_context/value';
+const EXTRA_FIELDS = 'thingId,policyId,definition,attributes,features,_revision,_created,_modified,_metadata';
+
 const MAX_MESSAGES = 5000;
 
 enum ThingUpdateContent {
@@ -53,6 +56,7 @@ type DomElements = {
   inputHistoricalRqlFilter: HTMLInputElement,
   buttonFetchHistorical: HTMLButtonElement,
   buttonStopHistorical: HTMLButtonElement,
+  checkboxIncludeHeaders: HTMLInputElement,
   selectThingUpdateContent: HTMLSelectElement,
   tbodyThingUpdates: HTMLTableElement,
   tableFilterThingUpdates: TableFilter,
@@ -81,6 +85,7 @@ let dom: DomElements = {
   inputHistoricalRqlFilter: null,
   buttonFetchHistorical: null,
   buttonStopHistorical: null,
+  checkboxIncludeHeaders: null,
   selectThingUpdateContent: null,
   tbodyThingUpdates: null,
   tableFilterThingUpdates: null,
@@ -119,6 +124,7 @@ export function ready() {
   dom.tableFilterThingUpdates.addEventListener('filterChange', onFilterChange);
   dom.tableFilterThingUpdates.filterOptions = createFilterOptions();
 
+  dom.checkboxIncludeHeaders.onchange = onIncludeHeadersChange;
   dom.thingUpdatesModeLive.onchange = onModeChange;
   dom.thingUpdatesModeHistorical.onchange = onModeChange;
   dom.historicalRangeModeRevision.onchange = onRangeModeChange;
@@ -159,6 +165,23 @@ export function ready() {
   };
 }
 
+/**
+ * Returns the SSE fields parameter string, optionally including context headers.
+ * In historical mode only `_context/headers/historical-headers` is useful;
+ * in live mode the full `_context/headers` is requested.
+ */
+export function buildFieldsParam(historical = false): string {
+  const headerField = historical ? '_context/headers/historical-headers' : '_context/headers';
+  const contextFields = dom.checkboxIncludeHeaders?.checked
+    ? `${BASE_CONTEXT_FIELDS},${headerField}`
+    : BASE_CONTEXT_FIELDS;
+  return `fields=${EXTRA_FIELDS},${contextFields}&extraFields=${EXTRA_FIELDS}`;
+}
+
+function onIncludeHeadersChange() {
+  ThingsSSE.reconnectSelectedThing(buildFieldsParam());
+}
+
 function onEnvironmentChanged(modifiedField) {
   if (!['pinnedThings', 'filterList', 'messageTemplates', 'recentPolicyIds'].includes(modifiedField)) {
     cancelActiveProbe();
@@ -436,8 +459,7 @@ function onFetchHistorical() {
   lastReceivedRevision = null;
   requestedToRevision = null;
 
-  const fields = 'fields=thingId,policyId,definition,attributes,features,_revision,_created,_modified,_metadata,_context/topic,_context/path,_context/value' +
-    '&extraFields=thingId,policyId,definition,attributes,features,_revision,_created,_modified,_metadata';
+  const fields = buildFieldsParam(true);
 
   let rangeParams = '';
   if (dom.historicalRangeModeRevision.checked) {

ui/modules/things/thingsSSE.ts

@@ -19,8 +19,13 @@ import * as Environments from '../environments/environments.js';
 import * as Things from './things.js';
 import * as ThingsSearch from './thingsSearch.js';
 
+const DEFAULT_SELECTED_FIELDS =
+  'fields=thingId,policyId,definition,attributes,features,_revision,_created,_modified,_metadata,_context/topic,_context/path,_context/value' +
+  '&extraFields=thingId,policyId,definition,attributes,features,_revision,_created,_modified,_metadata';
+
 let selectedThingEventSource;
 let thingsTableEventSource;
+let currentSelectedFields = DEFAULT_SELECTED_FIELDS;
 
 
 /**
@@ -53,12 +58,27 @@ function onSelectedThingChanged(newThingJson, isNewThingId) {
   if (!newThingJson) {
     stopSSE(selectedThingEventSource);
   } else if (isNewThingId) {
-    selectedThingEventSource && selectedThingEventSource.close();
-    // console.log('SSE Start: SELECTED THING : ' + newThingJson.thingId);
-    selectedThingEventSource = API.getEventSource(newThingJson.thingId,
-        'fields=thingId,policyId,definition,attributes,features,_revision,_created,_modified,_metadata,_context/topic,_context/path,_context/value' +
-      '&extraFields=thingId,policyId,definition,attributes,features,_revision,_created,_modified,_metadata');
-    selectedThingEventSource.onmessage = onMessageSelectedThing;
+    connectSelectedThing(newThingJson.thingId);
+  }
+}
+
+function connectSelectedThing(thingId: string) {
+  if (selectedThingEventSource) {
+    selectedThingEventSource.close();
+  }
+  selectedThingEventSource = API.getEventSource(thingId, currentSelectedFields);
+  selectedThingEventSource.onmessage = onMessageSelectedThing;
+}
+
+/**
+ * Reconnects the live SSE for the currently selected thing with updated
+ * field parameters (e.g. after toggling "Include headers").
+ */
+export function reconnectSelectedThing(fields: string) {
+  currentSelectedFields = fields;
+  const thingId = Things.theThing?.thingId;
+  if (thingId && selectedThingEventSource) {
+    connectSelectedThing(thingId);
   }
 }