fix: WebSocket race condition, data source indicators, auto-start pose detection (#96)

* feat: RVF training pipeline & UI integration (ADR-036)

Implement full model training, management, and inference pipeline:

Backend (Rust):
- recording.rs: CSI recording API (start/stop/list/download/delete)
- model_manager.rs: RVF model loading, LoRA profile switching, model library
- training_api.rs: Training API with WebSocket progress streaming, simulated
  training mode with realistic loss curves, auto-RVF export on completion
- main.rs: Wire new modules, recording hooks in all CSI paths, data dirs

UI (new components):
- ModelPanel.js: Dark-mode model library with load/unload, LoRA dropdown
- TrainingPanel.js: Recording controls, training config, live Canvas charts
- model.service.js: Model REST API client with events
- training.service.js: Training + recording API client with WebSocket progress

UI (enhancements):
- LiveDemoTab: Model selector, LoRA profile switcher, A/B split view toggle,
  training quick-panel with 60s recording shortcut
- SettingsPanel: Full dark mode conversion (issue #92), model configuration
  (device, threads, auto-load), training configuration (epochs, LR, patience)
- PoseDetectionCanvas: 10-frame pose trail with ghost keypoints and motion
  trajectory lines, cyan trail toggle button
- pose.service.js: Model-inference confidence thresholds

UI (plumbing):
- index.html: Training tab (8th tab)
- app.js: Panel initialization and tab routing
- style.css: ~250 lines of training/model panel dark-mode styles

191 Rust tests pass, 0 failures. Closes #92.

Refs: ADR-036, #93

Co-Authored-By: claude-flow <ruv@ruv.net>

* fix: real RuVector training pipeline + UI service fixes

Training pipeline (training_api.rs):
- Replace simulated training with real signal-based training loop
- Load actual CSI data from .csi.jsonl recordings or live frame history
- Extract 180 features per frame: subcarrier amplitudes, temporal variance,
  Goertzel frequency analysis (9 bands), motion gradients, global stats
- Train calibrated linear CSI-to-pose mapping via mini-batch gradient descent
  with L2 regularization (ridge regression), Xavier init, cosine LR decay
- Self-supervised: teacher targets from derive_pose_from_sensing() heuristics
- Real validation metrics: MSE and PCK@0.2 on 80/20 train/val split
- Export trained .rvf with real weights, feature normalization stats, witness
- Add infer_pose_from_model() for live inference from trained model
- 16 new tests covering features, training, inference, serialization

UI fixes:
- Fix double-URL bug in model.service.js and training.service.js
  (buildApiUrl was called twice — once in service, once in apiService)
- Fix route paths to match Rust backend (/api/v1/train/*, /api/v1/recording/*)
- Fix request body formats (session_name, nested config object)
- Fix top-level await in LiveDemoTab.js blocking module graph
- Dynamic imports for ModelPanel/TrainingPanel in app.js
- Center nav tabs with flex-wrap for 8-tab layout

Co-Authored-By: claude-flow <ruv@ruv.net>

* fix: WebSocket onOpen race condition, data source indicators, auto-start pose detection

- Fix WebSocket onOpen race condition in websocket.service.js where
  setupEventHandlers replaced onopen after socket was already open,
  preventing pose service from receiving connection signal
- Add 4-state data source indicator (LIVE/SIMULATED/RECONNECTING/OFFLINE)
  across Dashboard, Sensing, and Live Demo tabs via sensing.service.js
- Add hot-plug ESP32 auto-detection in sensing server (auto mode runs
  both UDP listener and simulation, switches on ESP32_TIMEOUT)
- Auto-start pose detection when backend is reachable
- Hide duplicate PoseDetectionCanvas controls when enableControls=false
- Add standalone Demo button in LiveDemoTab for offline animated demo
- Add data source banner and status styling

Co-Authored-By: claude-flow <ruv@ruv.net>

ui/style.css

@@ -355,6 +355,21 @@ pre code {
   background: var(--color-secondary-active);
 }
 
+.btn--accent {
+  background: rgba(139, 92, 246, 0.2);
+  color: #a78bfa;
+  border-color: rgba(139, 92, 246, 0.3);
+}
+
+.btn--accent:hover {
+  background: rgba(139, 92, 246, 0.3);
+  border-color: rgba(139, 92, 246, 0.5);
+}
+
+.btn--accent:active {
+  background: rgba(139, 92, 246, 0.15);
+}
+
 .btn--outline {
   background: transparent;
   border: 1px solid var(--color-border);
@@ -683,7 +698,9 @@ body {
 /* Navigation tabs */
 .nav-tabs {
   display: flex;
-  overflow-x: auto;
+  justify-content: center;
+  flex-wrap: wrap;
+  gap: 2px;
   border-bottom: 1px solid var(--color-border);
   margin-bottom: var(--space-24);
   scrollbar-width: none;
@@ -695,11 +712,11 @@ body {
 }
 
 .nav-tab {
-  padding: var(--space-12) var(--space-20);
+  padding: var(--space-12) var(--space-16);
   background: none;
   border: none;
   color: var(--color-text-secondary);
-  font-size: var(--font-size-md);
+  font-size: var(--font-size-sm);
   font-weight: var(--font-weight-medium);
   cursor: pointer;
   transition: all var(--duration-normal) var(--ease-standard);
@@ -1033,9 +1050,87 @@ body {
 }
 
 .demo-status {
+  display: flex;
+  align-items: center;
+  gap: 8px;
   margin-left: auto;
 }
 
+/* Status indicator dot */
+.status-indicator {
+  display: inline-block;
+  width: 10px;
+  height: 10px;
+  border-radius: 50%;
+  background: #555;
+}
+
+.status-indicator.active {
+  background: #00cc88;
+  box-shadow: 0 0 6px #00cc88;
+}
+
+.status-indicator.sim {
+  background: #ffa500;
+  box-shadow: 0 0 6px #ffa500;
+  animation: pulse 1.5s infinite;
+}
+
+.status-indicator.connecting {
+  background: #f0ad4e;
+  animation: pulse 1s infinite;
+}
+
+.status-indicator.error {
+  background: #ff3c3c;
+}
+
+/* Live Demo data-source banner */
+.demo-source-banner {
+  display: block;
+  width: 100%;
+  padding: 10px 16px;
+  margin-bottom: 12px;
+  border-radius: 6px;
+  text-align: center;
+  font-size: 13px;
+  font-weight: 700;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  box-sizing: border-box;
+}
+
+.demo-source-live {
+  background: rgba(0, 204, 136, 0.15);
+  border: 1px solid #00cc88;
+  color: #00cc88;
+}
+
+.demo-source-sim {
+  background: rgba(255, 165, 0, 0.15);
+  border: 1px solid #ffa500;
+  color: #ffa500;
+}
+
+.demo-source-reconnecting {
+  background: rgba(255, 180, 0, 0.12);
+  border: 1px solid #f0ad4e;
+  color: #f0ad4e;
+  animation: pulse 1.5s infinite;
+}
+
+.demo-source-offline {
+  background: rgba(255, 60, 60, 0.12);
+  border: 1px solid #ff3c3c;
+  color: #ff3c3c;
+}
+
+.demo-source-unknown {
+  background: rgba(128, 128, 128, 0.12);
+  border: 1px solid #888;
+  color: #888;
+}
+
 .demo-grid {
   display: grid;
   grid-template-columns: 1fr 1fr;
@@ -1388,6 +1483,15 @@ canvas {
   background: rgba(var(--color-warning-rgb), 0.05);
 }
 
+.component-status.status-warning {
+  border-color: #ffa500;
+  background: rgba(255, 165, 0, 0.08);
+}
+
+.component-status.status-warning .status-text {
+  color: #ffa500;
+}
+
 .component-status.status-unhealthy {
   border-color: var(--color-error);
   background: rgba(var(--color-error-rgb), 0.05);
@@ -1806,12 +1910,24 @@ canvas {
   animation: pulse 1.5s infinite;
 }
 
+.sensing-source-server-sim {
+  background: rgba(255, 165, 0, 0.15);
+  border: 1px solid #ffa500;
+  color: #ffa500;
+}
+
 .sensing-source-simulated {
   background: rgba(255, 60, 60, 0.12);
   border: 1px solid var(--color-error);
   color: var(--color-error);
 }
 
+/* Health indicator for server-simulated data */
+.health-sim {
+  color: #ffa500;
+  font-weight: 600;
+}
+
 /* Big RSSI value */
 .sensing-big-value {
   font-size: var(--font-size-3xl);
@@ -1956,3 +2072,355 @@ canvas {
   font-family: var(--font-family-mono);
   font-weight: var(--font-weight-medium);
 }
+
+/* ===== Training Tab Styles ===== */
+
+#training .tab-header {
+  margin-bottom: 20px;
+}
+
+#training .tab-header h2 {
+  color: var(--color-text);
+  margin: 0 0 8px 0;
+}
+
+#training .tab-header p {
+  color: var(--color-text-secondary);
+  margin: 0;
+  font-size: var(--font-size-sm);
+}
+
+/* Training Panel */
+.training-panel {
+  background: var(--color-surface);
+  border: 1px solid var(--color-card-border);
+  border-radius: var(--radius-lg);
+  padding: var(--space-16);
+}
+
+.training-panel-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: var(--space-16);
+  padding-bottom: var(--space-12);
+  border-bottom: 1px solid var(--color-card-border-inner);
+}
+
+.training-panel-header h3 {
+  color: var(--color-text);
+  margin: 0;
+  font-size: var(--font-size-base);
+}
+
+.training-status-badge {
+  padding: var(--space-2) 10px;
+  border-radius: var(--radius-full);
+  font-size: var(--font-size-xs);
+  font-weight: var(--font-weight-semibold);
+  text-transform: uppercase;
+}
+
+.training-status-idle {
+  background: var(--color-secondary);
+  color: var(--color-text-secondary);
+  border: 1px solid var(--color-border);
+}
+
+.training-status-active {
+  background: rgba(var(--color-error-rgb), 0.15);
+  color: var(--color-error);
+  border: 1px solid rgba(var(--color-error-rgb), var(--status-border-opacity));
+  animation: pulse-training 2s infinite;
+}
+
+.training-status-completed {
+  background: rgba(var(--color-success-rgb), 0.15);
+  color: var(--color-success);
+  border: 1px solid rgba(var(--color-success-rgb), var(--status-border-opacity));
+}
+
+@keyframes pulse-training {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.6; }
+}
+
+/* Recording list */
+.recording-item {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 10px var(--space-12);
+  background: var(--color-secondary);
+  border: 1px solid var(--color-card-border-inner);
+  border-radius: var(--radius-base);
+  margin-bottom: var(--space-8);
+}
+
+.recording-item-info {
+  flex: 1;
+}
+
+.recording-item-name {
+  color: var(--color-text);
+  font-size: var(--font-size-sm);
+  font-weight: var(--font-weight-medium);
+}
+
+.recording-item-meta {
+  color: var(--color-text-secondary);
+  font-size: var(--font-size-xs);
+  margin-top: var(--space-2);
+}
+
+/* Model cards */
+.model-card {
+  padding: var(--space-12);
+  background: var(--color-secondary);
+  border: 1px solid var(--color-card-border-inner);
+  border-radius: var(--radius-base);
+  margin-bottom: var(--space-8);
+  transition: border-color 0.2s;
+}
+
+.model-card:hover {
+  border-color: var(--color-border);
+}
+
+.model-card-active {
+  border-left: 3px solid var(--color-success);
+}
+
+.model-card-name {
+  color: var(--color-text);
+  font-size: var(--font-size-sm);
+  font-weight: var(--font-weight-semibold);
+}
+
+.model-card-meta {
+  color: var(--color-text-secondary);
+  font-size: var(--font-size-xs);
+  margin-top: var(--space-4);
+}
+
+.model-card-stats {
+  display: flex;
+  gap: var(--space-12);
+  margin-top: var(--space-8);
+}
+
+.model-card-stat {
+  font-size: var(--font-size-xs);
+}
+
+.model-card-stat-label {
+  color: var(--color-text-secondary);
+}
+
+.model-card-stat-value {
+  color: var(--color-text);
+  font-weight: var(--font-weight-semibold);
+}
+
+/* Training chart */
+.training-chart-container {
+  background: var(--color-secondary);
+  border: 1px solid var(--color-card-border-inner);
+  border-radius: var(--radius-base);
+  padding: var(--space-12);
+  margin: var(--space-12) 0;
+}
+
+.training-chart-label {
+  color: var(--color-text-secondary);
+  font-size: var(--font-size-xs);
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  margin-bottom: var(--space-8);
+}
+
+/* Training config form */
+.training-config-form {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: var(--space-12);
+}
+
+.training-form-group {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-4);
+}
+
+.training-form-label {
+  color: var(--color-text-secondary);
+  font-size: var(--font-size-xs);
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+}
+
+.training-form-input {
+  background: var(--color-background);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-base);
+  color: var(--color-text);
+  padding: var(--space-8) 10px;
+  font-size: var(--font-size-sm);
+  font-family: inherit;
+}
+
+.training-form-input:focus {
+  outline: none;
+  border-color: var(--color-primary);
+  box-shadow: var(--focus-ring);
+}
+
+.training-form-select {
+  background: var(--color-background);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-base);
+  color: var(--color-text);
+  padding: var(--space-8) 10px;
+  font-size: var(--font-size-sm);
+}
+
+/* Training buttons */
+.training-btn {
+  padding: var(--space-8) var(--space-16);
+  border-radius: var(--radius-base);
+  border: 1px solid transparent;
+  font-size: var(--font-size-xs);
+  font-weight: var(--font-weight-semibold);
+  cursor: pointer;
+  transition: all 0.2s;
+}
+
+.training-btn-primary {
+  background: rgba(var(--color-success-rgb), 0.15);
+  color: var(--color-success);
+  border-color: rgba(var(--color-success-rgb), var(--status-border-opacity));
+}
+
+.training-btn-primary:hover {
+  background: rgba(var(--color-success-rgb), 0.25);
+}
+
+.training-btn-danger {
+  background: rgba(var(--color-error-rgb), 0.15);
+  color: var(--color-error);
+  border-color: rgba(var(--color-error-rgb), var(--status-border-opacity));
+}
+
+.training-btn-danger:hover {
+  background: rgba(var(--color-error-rgb), 0.25);
+}
+
+.training-btn-secondary {
+  background: rgba(var(--color-primary-rgb), 0.15);
+  color: var(--color-primary);
+  border-color: rgba(var(--color-primary-rgb), var(--status-border-opacity));
+}
+
+.training-btn-secondary:hover {
+  background: rgba(var(--color-primary-rgb), 0.25);
+}
+
+.training-btn-muted {
+  background: var(--color-secondary);
+  color: var(--color-text-secondary);
+  border-color: var(--color-border);
+}
+
+.training-btn-muted:hover {
+  background: var(--color-secondary-hover);
+}
+
+/* Progress bar */
+.training-progress-bar {
+  width: 100%;
+  height: 6px;
+  background: var(--color-secondary);
+  border-radius: var(--radius-full);
+  overflow: hidden;
+  margin: var(--space-8) 0;
+}
+
+.training-progress-fill {
+  height: 100%;
+  background: linear-gradient(90deg, var(--color-primary), var(--color-success));
+  border-radius: var(--radius-full);
+  transition: width 0.3s ease;
+}
+
+/* Metrics grid */
+.training-metrics-grid {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: var(--space-8);
+  margin: var(--space-12) 0;
+}
+
+.training-metric {
+  text-align: center;
+  padding: var(--space-8);
+  background: var(--color-secondary);
+  border-radius: var(--radius-base);
+}
+
+.training-metric-value {
+  color: var(--color-text);
+  font-size: var(--font-size-2xl);
+  font-weight: var(--font-weight-bold);
+  font-family: var(--font-family-mono);
+}
+
+.training-metric-label {
+  color: var(--color-text-secondary);
+  font-size: var(--font-size-xs);
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  margin-top: var(--space-2);
+}
+
+/* Collapsible section */
+.training-collapsible-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 10px 0;
+  cursor: pointer;
+  color: var(--color-text);
+  font-size: var(--font-size-sm);
+  font-weight: var(--font-weight-semibold);
+  border-bottom: 1px solid var(--color-card-border-inner);
+}
+
+.training-collapsible-header:hover {
+  color: var(--color-primary);
+}
+
+.training-collapsible-content {
+  padding: var(--space-12) 0;
+}
+
+/* Pose trail toggle in toolbar */
+.pose-trail-btn {
+  padding: var(--space-6) 14px;
+  border-radius: var(--radius-base);
+  font-size: var(--font-size-xs);
+  font-weight: var(--font-weight-semibold);
+  cursor: pointer;
+  transition: all 0.2s;
+  background: rgba(var(--color-primary-rgb), 0.1);
+  color: var(--color-primary);
+  border: 1px solid rgba(var(--color-primary-rgb), 0.3);
+}
+
+.pose-trail-btn.active {
+  background: rgba(var(--color-primary-rgb), 0.25);
+  border-color: rgba(var(--color-primary-rgb), 0.6);
+}
+
+.pose-trail-btn:hover {
+  background: rgba(var(--color-primary-rgb), 0.2);
+}