feat: dynamic classifier classes, per-node UI, XSS fix, RSSI fix

Complements #326 (per-node state pipeline) with additional features:

- Dynamic adaptive classifier: discover activity classes from training
  data filenames instead of hardcoded array. Users add classes via
  filename convention (train_<class>_<desc>.jsonl), no code changes.
- Per-node UI cards: SensingTab shows individual node status with
  color-coded markers, RSSI, variance, and classification per node.
- Colored node markers in 3D gaussian splat view (8-color palette).
- Per-node RSSI history tracking in sensing service.
- XSS fix: UI uses createElement/textContent instead of innerHTML.
- RSSI sign fix: ensure dBm values are always negative.
- GET /api/v1/nodes endpoint for per-node health monitoring.
- node_features field in WebSocket SensingUpdate messages.
- Firmware watchdog fix: yield after every frame to prevent IDLE1 starvation.

Addresses #237, #276, #282

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

ui/components/SensingTab.js

@@ -110,12 +110,18 @@ export class SensingTab {
             <div class="sensing-card-title">About This Data</div>
             <p class="sensing-about-text">
               Metrics are computed from WiFi Channel State Information (CSI).
-              With <strong>1 ESP32</strong> you get presence detection, breathing
+              With <strong><span id="sensingNodeCount">0</span> ESP32 node(s)</strong> you get presence detection, breathing
               estimation, and gross motion. Add <strong>3-4+ ESP32 nodes</strong>
               around the room for spatial resolution and limb-level tracking.
             </p>
           </div>
 
+          <!-- Node Status -->
+          <div class="sensing-card" id="sensingNodeCards">
+            <div class="sensing-card-title">NODE STATUS</div>
+            <div id="nodeStatusContainer"></div>
+          </div>
+
           <!-- Extra info -->
           <div class="sensing-card">
             <div class="sensing-card-title">Details</div>
@@ -193,6 +199,9 @@ export class SensingTab {
 
     // Update HUD
     this._updateHUD(data);
+
+    // Update per-node panels
+    this._updateNodePanels(data);
   }
 
   _onStateChange(state) {
@@ -233,6 +242,11 @@ export class SensingTab {
     const f = data.features || {};
     const c = data.classification || {};
 
+    // Node count
+    const nodeCount = (data.nodes || []).length;
+    const countEl = this.container.querySelector('#sensingNodeCount');
+    if (countEl) countEl.textContent = String(nodeCount);
+
     // RSSI
     this._setText('sensingRssi', `${(f.mean_rssi || -80).toFixed(1)} dBm`);
     this._setText('sensingSource', data.source || '');
@@ -309,6 +323,57 @@ export class SensingTab {
     ctx.stroke();
   }
 
+  // ---- Per-node panels ---------------------------------------------------
+
+  _updateNodePanels(data) {
+    const container = this.container.querySelector('#nodeStatusContainer');
+    if (!container) return;
+    const nodeFeatures = data.node_features || [];
+    if (nodeFeatures.length === 0) {
+      container.textContent = '';
+      const msg = document.createElement('div');
+      msg.style.cssText = 'color:#888;font-size:12px;padding:8px;';
+      msg.textContent = 'No nodes detected';
+      container.appendChild(msg);
+      return;
+    }
+    const NODE_COLORS = ['#00ccff', '#ff6600', '#00ff88', '#ff00cc', '#ffcc00', '#8800ff', '#00ffcc', '#ff0044'];
+    container.textContent = '';
+    for (const nf of nodeFeatures) {
+      const color = NODE_COLORS[nf.node_id % NODE_COLORS.length];
+      const statusColor = nf.stale ? '#888' : '#0f0';
+
+      const row = document.createElement('div');
+      row.style.cssText = `display:flex;align-items:center;gap:8px;padding:6px 8px;margin-bottom:4px;background:rgba(255,255,255,0.03);border-radius:6px;border-left:3px solid ${color};`;
+
+      const idCol = document.createElement('div');
+      idCol.style.minWidth = '50px';
+      const nameEl = document.createElement('div');
+      nameEl.style.cssText = `font-size:11px;font-weight:600;color:${color};`;
+      nameEl.textContent = 'Node ' + nf.node_id;
+      const statusEl = document.createElement('div');
+      statusEl.style.cssText = `font-size:9px;color:${statusColor};`;
+      statusEl.textContent = nf.stale ? 'STALE' : 'ACTIVE';
+      idCol.appendChild(nameEl);
+      idCol.appendChild(statusEl);
+
+      const metricsCol = document.createElement('div');
+      metricsCol.style.cssText = 'flex:1;font-size:10px;color:#aaa;';
+      metricsCol.textContent = (nf.rssi_dbm || -80).toFixed(0) + ' dBm · var ' + (nf.features?.variance || 0).toFixed(1);
+
+      const classCol = document.createElement('div');
+      classCol.style.cssText = 'font-size:10px;font-weight:600;color:#ccc;';
+      const motion = (nf.classification?.motion_level || 'absent').toUpperCase();
+      const conf = ((nf.classification?.confidence || 0) * 100).toFixed(0);
+      classCol.textContent = motion + ' ' + conf + '%';
+
+      row.appendChild(idCol);
+      row.appendChild(metricsCol);
+      row.appendChild(classCol);
+      container.appendChild(row);
+    }
+  }
+
   // ---- Resize ------------------------------------------------------------
 
   _setupResize() {

ui/components/gaussian-splats.js

@@ -66,6 +66,10 @@ function valueToColor(v) {
   return [r, g, b];
 }
 
+// ---- Node marker color palette -------------------------------------------
+
+const NODE_MARKER_COLORS = [0x00ccff, 0xff6600, 0x00ff88, 0xff00cc, 0xffcc00, 0x8800ff, 0x00ffcc, 0xff0044];
+
 // ---- GaussianSplatRenderer -----------------------------------------------
 
 export class GaussianSplatRenderer {
@@ -108,6 +112,10 @@ export class GaussianSplatRenderer {
     // Node markers (ESP32 / router positions)
     this._createNodeMarkers(THREE);
 
+    // Dynamic per-node markers (multi-node support)
+    this.nodeMarkers = new Map(); // nodeId -> THREE.Mesh
+    this._THREE = THREE;
+
     // Body disruption blob
     this._createBodyBlob(THREE);
 
@@ -369,11 +377,43 @@ export class GaussianSplatRenderer {
       bGeo.attributes.splatSize.needsUpdate    = true;
     }
 
-    // -- Update node positions ---------------------------------------------
+    // -- Update node positions (legacy single-node) ------------------------
     if (nodes.length > 0 && nodes[0].position) {
       const pos = nodes[0].position;
       this.nodeMarker.position.set(pos[0], 0.5, pos[2]);
     }
+
+    // -- Update dynamic per-node markers (multi-node support) --------------
+    if (nodes && nodes.length > 0 && this.scene) {
+      const THREE = this._THREE || window.THREE;
+      if (THREE) {
+        const activeIds = new Set();
+        for (const node of nodes) {
+          activeIds.add(node.node_id);
+          if (!this.nodeMarkers.has(node.node_id)) {
+            const geo = new THREE.SphereGeometry(0.25, 16, 16);
+            const mat = new THREE.MeshBasicMaterial({
+              color: NODE_MARKER_COLORS[node.node_id % NODE_MARKER_COLORS.length],
+              transparent: true,
+              opacity: 0.8,
+            });
+            const marker = new THREE.Mesh(geo, mat);
+            this.scene.add(marker);
+            this.nodeMarkers.set(node.node_id, marker);
+          }
+          const marker = this.nodeMarkers.get(node.node_id);
+          const pos = node.position || [0, 0, 0];
+          marker.position.set(pos[0], 0.5, pos[2]);
+        }
+        // Remove stale markers
+        for (const [id, marker] of this.nodeMarkers) {
+          if (!activeIds.has(id)) {
+            this.scene.remove(marker);
+            this.nodeMarkers.delete(id);
+          }
+        }
+      }
+    }
   }
 
   // ---- Render loop -------------------------------------------------------

ui/services/sensing.service.js

@@ -84,6 +84,11 @@ class SensingService {
     return [...this._rssiHistory];
   }
 
+  /** Get per-node RSSI history (object keyed by node_id). */
+  getPerNodeRssiHistory() {
+    return { ...(this._perNodeRssiHistory || {}) };
+  }
+
   /** Current connection state. */
   get state() {
     return this._state;
@@ -327,6 +332,20 @@ class SensingService {
       }
     }
 
+    // Per-node RSSI tracking
+    if (!this._perNodeRssiHistory) this._perNodeRssiHistory = {};
+    if (data.node_features) {
+      for (const nf of data.node_features) {
+        if (!this._perNodeRssiHistory[nf.node_id]) {
+          this._perNodeRssiHistory[nf.node_id] = [];
+        }
+        this._perNodeRssiHistory[nf.node_id].push(nf.rssi_dbm);
+        if (this._perNodeRssiHistory[nf.node_id].length > this._maxHistory) {
+          this._perNodeRssiHistory[nf.node_id].shift();
+        }
+      }
+    }
+
     // Notify all listeners
     for (const cb of this._listeners) {
       try {