feat: full app shell (animated logo + sticky header) + 20Hz WS + motion v2 (median + adaptive)

User reported visible jitter and missing UI elements. Three-pronged fix.

Frontend — full app shell port from design-source/app.jsx:
- LogoMark: animated triangle "A" with 3 concentric pulse rings
  emanating outward, radial proximity-glow that breathes (scale +
  opacity), corner-tick chip details. Pulse strength scales with live
  distance (closer target = brighter glow). Uses lm-grad
  (amber→orange→pink) and lm-core radial gradients verbatim from
  design.
- Wordmark: "Ambi" in slate-gradient + "Sense" in accent-gradient,
  with "v6.x · ESP32" caps subtitle.
- Sticky header (.app-header) with backdrop-filter blur — page name +
  hostname.local breadcrumb + live distance chip + RSSI chip +
  sun/moon theme toggle.
- Sidebar with logo block + nav + bottom IP/board chip
  (10.0.0.x · ESP32-C3 · LD2410C style).
- styles.css: keyframes logo-pulse, logo-breath, pulse-acc; .app-header,
  .brand-block, .sidebar-foot, .btn-icon classes.

Firmware — kill the visible 200ms stair-step jitter:
- ws_broadcast_task: 200 ms (5 Hz) → 50 ms (20 Hz). Bandwidth: ~2.5 KB/s,
  trivial. Browser sparkline now updates 4× more often, no flat dwells.
- main.c telemetry_pump_task: same bump 5 Hz → 20 Hz, also publishes
  raw_cm now (median-filtered but un-smoothed) so the Motion screen
  graph shows what the firmware *actually* feeds the LED engine,
  removing 200 ms client-side simulation lag.
- webui_live_t and the WS JSON gain a 'raw' field.

Firmware — motion algorithm v2:
- Median-of-5 filter on raw radar samples before the smoother. Single-
  sample LD2410 spurious readings (every few minutes) get out-voted;
  rejection is total. Insertion-sort over 5 ints — cheap.
- Adaptive smoothing: alpha scales with motion magnitude. Stationary
  (|delta| < 30 cm/sample) uses configured pos_smooth; fast-moving
  (>= 30 cm/sample) ramps alpha up to 4× the configured value (capped
  at 0.9). Result: calm reading when still, snappy when moving — best
  of both worlds.
- target_t exposes raw_cm alongside distance_cm.

Frontend — Live sparkline + Motion graph fixes:
- ScreenLive: useEffect deps changed from [dist] to [live] so the
  sparkline advances on every WS frame at 20 Hz, even when the integer
  cm value hasn't changed (was freezing during stationary periods).
- ScreenMotion: raw and smoothed lines come straight from firmware
  WS payload, no client-side alpha simulation. Graph now reflects the
  real on-device smoother instead of a 200 ms-lagged copy.

Build: 1.17 MB binary, 19%% free in 1.4 MB app slot. UI gzipped 25.4 KB.
Both C3s flashed.

Author: Ravi Singh

firmware/components/motion/include/motion.h

@@ -22,6 +22,10 @@ extern "C" {
 typedef struct {
     bool      present;
     int16_t   distance_cm;     /* smoothed + predicted */
+    int16_t   raw_cm;          /* spike-rejected (median) but un-smoothed —
+                                * for the Motion screen's raw vs smoothed
+                                * line chart so users can see the smoother
+                                * actually working. */
     int8_t    direction;
     uint8_t   energy;
     uint64_t  ts_us;

firmware/components/motion/motion.c

@@ -1,6 +1,7 @@
 #include "motion.h"
 
 #include <string.h>
+#include <math.h>
 
 #include "esp_log.h"
 #include "esp_timer.h"
@@ -14,6 +15,8 @@
 static const char *TAG = "motion";
 
 /* Defaults match v5 (config.h:69-76). NVS values stored as x1000 fixed-point. */
+#define MEDIAN_W 5    /* window size for the spike-rejection median filter */
+
 static struct {
     bool     enabled;
     float    pos_smooth;
@@ -28,6 +31,14 @@ static struct {
     float    err_integral;
     uint64_t last_us;
 
+    /* Spike-rejection median filter: keeps the last MEDIAN_W raw samples
+     * and uses the middle one (after sorting) as the "true" current value.
+     * Single-sample radar glitches get out-voted; rejection is total,
+     * unlike a low-pass which would let the spike bleed through. */
+    int16_t  med_buf[MEDIAN_W];
+    uint8_t  med_idx;
+    uint8_t  med_filled;
+
     target_t latest;
     SemaphoreHandle_t lock;
     int      min_cm, max_cm;
@@ -37,6 +48,18 @@ static float clamp(float v, float lo, float hi) {
     return v < lo ? lo : (v > hi ? hi : v);
 }
 
+/* In-place median of 5 ints. Insertion-sort is fastest at this size. */
+static int16_t median5(int16_t *src) {
+    int16_t a[MEDIAN_W];
+    for (int i = 0; i < MEDIAN_W; ++i) a[i] = src[i];
+    for (int i = 1; i < MEDIAN_W; ++i) {
+        int16_t x = a[i]; int j = i - 1;
+        while (j >= 0 && a[j] > x) { a[j+1] = a[j]; j--; }
+        a[j+1] = x;
+    }
+    return a[MEDIAN_W / 2];
+}
+
 static void motion_task(void *arg) {
     (void)arg;
     radar_frame_t f;
@@ -55,24 +78,42 @@ static void motion_task(void *arg) {
         if (raw < s_m.min_cm) raw = s_m.min_cm;
         if (raw > s_m.max_cm) raw = s_m.max_cm;
 
+        /* Spike-rejection: median of last 5 raw samples. Until the buffer
+         * is filled, just pass-through (so first reading isn't blocked). */
+        s_m.med_buf[s_m.med_idx] = (int16_t)raw;
+        s_m.med_idx = (s_m.med_idx + 1) % MEDIAN_W;
+        if (s_m.med_filled < MEDIAN_W) s_m.med_filled++;
+        int filtered_raw = (s_m.med_filled == MEDIAN_W) ? median5(s_m.med_buf) : raw;
+
         target_t t = { .present = f.present, .energy = f.energy,
                        .direction = f.direction, .ts_us = f.ts_us };
 
+        t.raw_cm = (int16_t)filtered_raw;
         if (!s_m.enabled) {
-            t.distance_cm = (int16_t)raw;
+            t.distance_cm = (int16_t)filtered_raw;
         } else {
             uint64_t now = f.ts_us;
             float dt = s_m.last_us ? (float)(now - s_m.last_us) / 1e6f : 0.02f;
             s_m.last_us = now;
             dt = clamp(dt, 0.001f, 1.0f);
 
             if (s_m.smoothed <= 0) {
-                s_m.smoothed = (float)raw;
-                s_m.predicted = (float)raw;
+                s_m.smoothed = (float)filtered_raw;
+                s_m.predicted = (float)filtered_raw;
             }
 
-            s_m.smoothed = (1.f - s_m.pos_smooth) * s_m.smoothed +
-                                  s_m.pos_smooth  * (float)raw;
+            /* Adaptive alpha: when the target is moving fast, ease the
+             * filter (snappier response); when nearly stationary, clamp
+             * harder (calmer reading). Magnitude is the |delta| from the
+             * last smoothed estimate, scaled by a 30 cm "fast motion"
+             * threshold. Output is in [pos_smooth .. min(1, pos_smooth*4)]. */
+            float delta = fabsf((float)filtered_raw - s_m.smoothed);
+            float scale = clamp(delta / 30.0f, 0.0f, 1.0f);   /* 0=still, 1=fast */
+            float alpha_max = clamp(s_m.pos_smooth * 4.0f, s_m.pos_smooth, 0.9f);
+            float alpha_eff = s_m.pos_smooth + (alpha_max - s_m.pos_smooth) * scale;
+
+            s_m.smoothed = (1.f - alpha_eff) * s_m.smoothed +
+                                  alpha_eff  * (float)filtered_raw;
             float instant_v = (s_m.smoothed - s_m.predicted) / dt;
             instant_v = clamp(instant_v, -200.f, 200.f);
             s_m.velocity = (1.f - s_m.vel_smooth) * s_m.velocity +

firmware/components/webui/include/webui.h

@@ -27,8 +27,11 @@ esp_err_t webui_init(void);
  * Updates are coalesced and emitted to all connected /api/live WS
  * clients at ~5 Hz. */
 typedef struct {
-    int16_t distance_cm;
-    int8_t  direction;        /* -1, 0, +1 */
+    int16_t distance_cm;       /* smoothed + predicted */
+    int16_t raw_cm;            /* median-filtered but un-smoothed; lets the
+                                * Motion screen draw raw vs smoothed without
+                                * a second NVS round-trip */
+    int8_t  direction;         /* -1, 0, +1 */
     int8_t  rssi;
     uint32_t free_heap;
     uint32_t uptime_s;

firmware/components/webui/ui.html

@@ -961,7 +961,7 @@ static esp_err_t handle_ws(httpd_req_t *req) {
 static void ws_broadcast_task(void *arg) {
     (void)arg;
     while (1) {
-        vTaskDelay(pdMS_TO_TICKS(200));  /* 5 Hz */
+        vTaskDelay(pdMS_TO_TICKS(50));  /* 20 Hz — smooth UI updates */
 
         webui_live_t snap;
         xSemaphoreTake(s_web.lock, portMAX_DELAY);
@@ -971,10 +971,10 @@ static void ws_broadcast_task(void *arg) {
         snap.rssi = netmgr_get_rssi();
         xSemaphoreGive(s_web.lock);
 
-        char json[160];
+        char json[200];
         int n = snprintf(json, sizeof(json),
-            "{\"distance\":%d,\"direction\":%d,\"rssi\":%d,\"heap\":%" PRIu32 ",\"uptime\":%" PRIu32 ",\"peers\":%u,\"healthy\":%u}",
-            snap.distance_cm, snap.direction, snap.rssi,
+            "{\"distance\":%d,\"raw\":%d,\"direction\":%d,\"rssi\":%d,\"heap\":%" PRIu32 ",\"uptime\":%" PRIu32 ",\"peers\":%u,\"healthy\":%u}",
+            snap.distance_cm, snap.raw_cm, snap.direction, snap.rssi,
             snap.free_heap, snap.uptime_s, snap.peer_count, snap.peer_healthy);
 
         httpd_ws_frame_t f = {

firmware/components/webui/ui.html.gz

@@ -80,29 +80,35 @@ static void apply_pin_overrides(board_profile_t *runtime) {
     }
 }
 
-/* Telemetry pump: 5 Hz publish mesh-fused target + RSSI + peer health to
- * webui WS clients. Falls back to local motion_get() if mesh has no peers. */
+/* Telemetry pump: 20 Hz publish mesh-fused target + raw + RSSI + peer
+ * health to webui WS clients. Was 5 Hz — bumped to kill the visible
+ * stair-step jitter on the live distance graph. 20 Hz × ~120-byte JSON
+ * = 2.5 KB/s on the WiFi link, trivial. Pulls raw_cm from local
+ * motion_get() because mesh fused only carries the smoothed value. */
 static void telemetry_pump_task(void *arg) {
     (void)arg;
     while (1) {
         mesh_fused_t f;
         mesh_get_fused(&f);
+        target_t local;
+        motion_get(&local);
         mesh_peer_t peers[MESH_MAX_PEERS];
         size_t pn = mesh_peers_snapshot(peers, MESH_MAX_PEERS);
         size_t hn = 0;
         for (size_t i = 0; i < pn; ++i) if (peers[i].healthy) hn++;
 
         webui_live_t live = {
             .distance_cm = f.distance_cm,
+            .raw_cm      = local.raw_cm,
             .direction   = f.direction,
             .rssi        = netmgr_get_rssi(),
-            .free_heap   = 0,   /* webui fills these in itself before broadcast */
+            .free_heap   = 0,
             .uptime_s    = 0,
             .peer_count   = (uint8_t)pn,
             .peer_healthy = (uint8_t)hn,
         };
         webui_publish_live(&live);
-        vTaskDelay(pdMS_TO_TICKS(200));
+        vTaskDelay(pdMS_TO_TICKS(50));   /* 20 Hz — see comment above */
     }
 }
 

firmware/components/webui/webui.c

@@ -218,3 +218,60 @@ export function hex2rgb(hex: string): [number, number, number] {
   const h = hex.replace('#', '').padEnd(6, '0').slice(0, 6);
   return [parseInt(h.slice(0,2), 16), parseInt(h.slice(2,4), 16), parseInt(h.slice(4,6), 16)];
 }
+
+/* Animated logo mark — triangle "A" with concentric pulse rings.
+ * Pulse intensity scales with proximity (closer target = brighter).
+ * Faithful port of frontend/design-source/project/app.jsx LogoMark. */
+export function LogoMark({ size = 36, distance = 0 }: { size?: number; distance?: number }) {
+  const pulseStrength = Math.max(0.2, Math.min(1, (250 - distance) / 200));
+  return (
+    <div style={`position: relative; width: ${size}px; height: ${size}px; flex-shrink: 0;`}>
+      <div style={`position: absolute; inset: -${size * 0.25}px; border-radius: 50%; background: radial-gradient(circle, rgba(255,122,61,0.35) 0%, rgba(255,61,130,0.15) 35%, transparent 65%); filter: blur(6px); opacity: ${0.6 * pulseStrength}; pointer-events: none; animation: logo-breath 2.6s ease-in-out infinite;`}/>
+      <svg viewBox="0 0 48 48" width={size} height={size} style="position: relative; display: block;">
+        <defs>
+          <linearGradient id="lm-grad" x1="0" y1="0" x2="1" y2="1">
+            <stop offset="0%" stop-color="var(--acc-amber)"/>
+            <stop offset="50%" stop-color="var(--acc-orange)"/>
+            <stop offset="100%" stop-color="var(--acc-pink)"/>
+          </linearGradient>
+          <radialGradient id="lm-core" cx="0.5" cy="0.5" r="0.5">
+            <stop offset="0%" stop-color="#FFE4B0"/>
+            <stop offset="60%" stop-color="var(--acc-orange)"/>
+            <stop offset="100%" stop-color="var(--acc-pink)"/>
+          </radialGradient>
+        </defs>
+        <rect x="1" y="1" width="46" height="46" rx="12" fill="#0a0c0f" stroke="url(#lm-grad)" stroke-width="1" opacity="0.55"/>
+        <g style="transform-origin: 24px 32px;">
+          {[0, 1, 2].map(i => (
+            <circle cx="24" cy="32" r="6" fill="none" stroke="url(#lm-grad)" stroke-width="1.2" opacity="0.7"
+              style={`animation: logo-pulse 2.2s ease-out infinite; animation-delay: ${i * 0.6}s; transform-origin: 24px 32px;`}/>
+          ))}
+        </g>
+        <path d="M 24 11 L 13 32 L 35 32 Z" fill="url(#lm-grad)" opacity="0.95"/>
+        <path d="M 24 18 L 18 30 L 30 30 Z" fill="#0a0c0f"/>
+        <circle cx="24" cy="32" r="2.6" fill="url(#lm-core)"/>
+        <circle cx="24" cy="32" r="1.1" fill="white" opacity="0.9"/>
+        {[[6,6],[42,6],[6,42],[42,42]].map(([x,y]) => (
+          <circle cx={x} cy={y} r="0.8" fill="var(--text-3)" opacity="0.5"/>
+        ))}
+      </svg>
+    </div>
+  );
+}
+
+/* Wordmark with gradient "Sense" — paired with LogoMark in sidebar/header. */
+export function Wordmark({ font = 16, sub = 10, mono = false, version, target }: {
+  font?: number; sub?: number; mono?: boolean; version?: string; target?: string;
+}) {
+  if (mono) return null;
+  return (
+    <div style="display: flex; flex-direction: column; line-height: 1.05;">
+      <span style={`font-size: ${font}px; font-weight: 600; letter-spacing: -0.025em; background: linear-gradient(180deg, var(--text-0) 0%, var(--text-1) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;`}>
+        Ambi<span style="background: var(--acc-grad); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; font-weight: 600;">Sense</span>
+      </span>
+      <span class="mono" style={`font-size: ${sub}px; color: var(--text-3); letter-spacing: 0.08em; text-transform: uppercase; margin-top: 2px;`}>
+        {version || ''} <span style="color: var(--text-4);">·</span> {target || ''}
+      </span>
+    </div>
+  );
+}