Initial physical button mapping implementation #4

source/ble_config.cpp

@@ -1,6 +1,7 @@
 #include "ble_config.h"
 #include "tap.h"
 #include "battery.h"
+#include "buttons.h"
 #include <Adafruit_LittleFS.h>
 #include <InternalFileSystem.h>
 
@@ -74,8 +75,12 @@ void pushConfigBlob() {
   b.tapAction     = (uint8_t)cfg.tapAction;
   b.tapKey           = cfg.tapKey;
   b.tapMod           = cfg.tapMod;
-  b._pad          = 0;
+  b.tapFreezeEnabled = cfg.tapFreezeEnabled;
   b.jerkThreshold    = cfg.jerkThreshold;
+  b.featureFlags     = cfg.featureFlags;
+  b.btnLeftPin       = cfg.btnLeftPin;
+  b.btnRightPin      = cfg.btnRightPin;
+  b.btnMiddlePin     = cfg.btnMiddlePin;
   cfgBlob.write((uint8_t*)&b, sizeof(b));
 }
 #endif
@@ -118,7 +123,16 @@ void onConfigBlobWrite(uint16_t h, BLECharacteristic* c, uint8_t* d, uint16_t l)
     cfg.tapKey = b->tapKey;
     cfg.tapMod = b->tapMod;
   #endif
+  cfg.tapFreezeEnabled = b->tapFreezeEnabled ? 1 : 0;
   if (b->jerkThreshold >= 100.0f && b->jerkThreshold <= 50000.0f) cfg.jerkThreshold = b->jerkThreshold;
+  cfg.featureFlags = b->featureFlags & (FLAG_TAP_ENABLED | FLAG_TEMP_COMP_ENABLED | FLAG_AUTO_RECAL_ENABLED);
+  // btnXPin: accept BTN_PIN_NONE (0xFF) or a valid Arduino pin number (0-10 = D0-D10)
+  cfg.btnLeftPin   = (b->btnLeftPin   <= 10 || b->btnLeftPin   == BTN_PIN_NONE) ? b->btnLeftPin   : BTN_PIN_NONE;
+  cfg.btnRightPin  = (b->btnRightPin  <= 10 || b->btnRightPin  == BTN_PIN_NONE) ? b->btnRightPin  : BTN_PIN_NONE;
+  cfg.btnMiddlePin = (b->btnMiddlePin <= 10 || b->btnMiddlePin == BTN_PIN_NONE) ? b->btnMiddlePin : BTN_PIN_NONE;
+  #ifdef FEATURE_PHYSICAL_BUTTONS
+    setupPhysicalButtons();   // reconfigure pins immediately (no restart needed)
+  #endif
   saveConfig();
   Serial.print("[CFG] Written — sens="); Serial.print(cfg.sensitivity,0);
   Serial.print(" dz="); Serial.print(cfg.deadZone,3);

source/buttons.cpp

@@ -0,0 +1,52 @@
+#include "buttons.h"
+
+#ifdef FEATURE_PHYSICAL_BUTTONS
+#include <bluefruit.h>
+
+extern BLEHidAdafruit blehid;
+
+static uint8_t physBtnMask = 0;   // bitmask of currently-pressed physical buttons
+
+// ─── Setup ────────────────────────────────────────────────────────────────────
+void setupPhysicalButtons() {
+  // Release any held physical buttons before reconfiguring
+  if (physBtnMask && Bluefruit.connected()) { blehid.mouseButtonRelease(); }
+  physBtnMask = 0;
+
+  if (cfg.btnLeftPin   != BTN_PIN_NONE) pinMode(cfg.btnLeftPin,   INPUT_PULLUP);
+  if (cfg.btnRightPin  != BTN_PIN_NONE) pinMode(cfg.btnRightPin,  INPUT_PULLUP);
+  if (cfg.btnMiddlePin != BTN_PIN_NONE) pinMode(cfg.btnMiddlePin, INPUT_PULLUP);
+
+  bool any = (cfg.btnLeftPin != BTN_PIN_NONE) || (cfg.btnRightPin != BTN_PIN_NONE)
+          || (cfg.btnMiddlePin != BTN_PIN_NONE);
+  if (any) {
+    Serial.print("[BTN] L=");
+    cfg.btnLeftPin   == BTN_PIN_NONE ? Serial.print("--") : Serial.print(cfg.btnLeftPin);
+    Serial.print(" R=");
+    cfg.btnRightPin  == BTN_PIN_NONE ? Serial.print("--") : Serial.print(cfg.btnRightPin);
+    Serial.print(" M=");
+    cfg.btnMiddlePin == BTN_PIN_NONE ? Serial.print("--") : Serial.print(cfg.btnMiddlePin);
+    Serial.println();
+  }
+}
+
+// ─── Poll and report ──────────────────────────────────────────────────────────
+// Called every loop iteration (before rate limiter) for immediate response.
+// Uses active-low logic: INPUT_PULLUP, button connects pin to GND.
+void processPhysicalButtons() {
+  if (!Bluefruit.connected()) return;
+
+  uint8_t newMask = 0;
+  if (cfg.btnLeftPin   != BTN_PIN_NONE && digitalRead(cfg.btnLeftPin)   == LOW) newMask |= MOUSE_BUTTON_LEFT;
+  if (cfg.btnRightPin  != BTN_PIN_NONE && digitalRead(cfg.btnRightPin)  == LOW) newMask |= MOUSE_BUTTON_RIGHT;
+  if (cfg.btnMiddlePin != BTN_PIN_NONE && digitalRead(cfg.btnMiddlePin) == LOW) newMask |= MOUSE_BUTTON_MIDDLE;
+
+  if (newMask != physBtnMask) {
+    physBtnMask = newMask;
+    if (physBtnMask) blehid.mouseButtonPress(physBtnMask);
+    else             blehid.mouseButtonRelease();
+    Serial.print("[BTN] mask=0x"); Serial.println(physBtnMask, HEX);
+  }
+}
+
+#endif // FEATURE_PHYSICAL_BUTTONS

source/buttons.h

@@ -0,0 +1,7 @@
+#pragma once
+#include "config.h"
+
+#ifdef FEATURE_PHYSICAL_BUTTONS
+void setupPhysicalButtons();
+void processPhysicalButtons();
+#endif

source/config.h

@@ -10,6 +10,7 @@
 #define FEATURE_AUTO_RECAL
 #define FEATURE_BATTERY_MONITOR
 #define FEATURE_BOOT_LOOP_DETECT
+#define FEATURE_PHYSICAL_BUTTONS
 
 // ─── Debug ────────────────────────────────────────────────────────────────────
 // #define DEBUG
@@ -53,7 +54,18 @@
 
 // ─── Persistence ──────────────────────────────────────────────────────────────
 #define CONFIG_FILENAME  "/imu_mouse_cfg.bin"
-#define CONFIG_MAGIC     0xDEAD123AUL
+#define CONFIG_MAGIC     0xDEAD123DUL
+
+// ─── Physical button sentinel ─────────────────────────────────────────────────
+#define BTN_PIN_NONE  0xFF   // Stored in btn*Pin when that button is disabled
+
+// ─── Runtime feature-override flags (cfg.featureFlags bitmask) ───────────────
+// These mirror the compile-time FEATURE_* defines but can be toggled at runtime
+// via the web UI and persisted in flash.  Bits not listed here are reserved = 0.
+#define FLAG_TAP_ENABLED        0x01  // Tap detection active (requires restart)
+#define FLAG_TEMP_COMP_ENABLED  0x02  // Temperature gyro-drift compensation
+#define FLAG_AUTO_RECAL_ENABLED 0x04  // Auto-recalibrate after long idle
+#define FLAG_ALL_DEFAULT        (FLAG_TAP_ENABLED | FLAG_TEMP_COMP_ENABLED | FLAG_AUTO_RECAL_ENABLED)
 
 // ─── Enums ────────────────────────────────────────────────────────────────────
 enum CurveType   : uint8_t { CURVE_LINEAR=0, CURVE_SQUARE=1, CURVE_SQRT=2 };
@@ -84,11 +96,16 @@ struct Config {
   uint8_t    tapKey;       // HID keycode (used when tapAction == TAP_ACTION_KEY)
   uint8_t    tapMod;       // HID modifier byte (used when tapAction == TAP_ACTION_KEY)
   float      jerkThreshold;    // jerk² threshold for tap-freeze detection
+  uint8_t    tapFreezeEnabled; // 1 = enable jerk-based cursor freeze during taps
+  uint8_t    featureFlags;     // bitmask of FLAG_* — runtime feature overrides
+  uint8_t    btnLeftPin;       // BTN_PIN_NONE or Arduino pin number (0-10 = D0-D10)
+  uint8_t    btnRightPin;
+  uint8_t    btnMiddlePin;
 };
 extern Config cfg;
 extern const Config CFG_DEFAULTS;
 
-// ─── ConfigBlob (over BLE, 20 bytes) ─────────────────────────────────────────
+// ─── ConfigBlob (over BLE, 25 bytes) ─────────────────────────────────────────
 struct __attribute__((packed)) ConfigBlob {
   float   sensitivity;       // [0]
   float   deadZone;          // [4]
@@ -100,10 +117,14 @@ struct __attribute__((packed)) ConfigBlob {
   uint8_t tapAction;         // [16]  TapAction enum
   uint8_t tapKey;            // [17]  HID keycode
   uint8_t tapMod;            // [18]  HID modifier
-  uint8_t _pad;           // [19]
+  uint8_t tapFreezeEnabled;  // [19]  1 = enable jerk-based cursor freeze during taps
   float   jerkThreshold;     // [20]  jerk² tap-freeze threshold
+  uint8_t featureFlags;      // [24]  FLAG_* bitmask — runtime feature overrides
+  uint8_t btnLeftPin;        // [25]  BTN_PIN_NONE or Arduino pin (0-10 = D0-D10)
+  uint8_t btnRightPin;       // [26]
+  uint8_t btnMiddlePin;      // [27]
 };
-static_assert(sizeof(ConfigBlob) == 24, "ConfigBlob must be 24 bytes");
+static_assert(sizeof(ConfigBlob) == 28, "ConfigBlob must be 28 bytes");
 
 // ─── TelemetryPacket (24 bytes) ───────────────────────────────────────────────
 #ifdef FEATURE_TELEMETRY

source/main.cpp

@@ -33,6 +33,7 @@
 #include "ble_config.h"
 #include "battery.h"
 #include "tap.h"
+#include "buttons.h"
 #include <bluefruit.h>
 #include <Adafruit_LittleFS.h>
 #include <InternalFileSystem.h>
@@ -60,7 +61,8 @@ Config cfg;
 const Config CFG_DEFAULTS = {
   CONFIG_MAGIC, 600.0f, 0.060f, 0.08f, CURVE_LINEAR, 0x00, CHARGE_SLOW,
   /*tapThreshold=*/12, /*tapAction=*/TAP_ACTION_LEFT, /*tapKey=*/0, /*tapMod=*/0,
-  /*jerkThreshold=*/2000.0f
+  /*jerkThreshold=*/2000.0f, /*tapFreezeEnabled=*/1, /*featureFlags=*/FLAG_ALL_DEFAULT,
+  /*btnLeftPin=*/BTN_PIN_NONE, /*btnRightPin=*/BTN_PIN_NONE, /*btnMiddlePin=*/BTN_PIN_NONE
 };
 
 // ─── Telemetry definition ─────────────────────────────────────────────────────
@@ -221,7 +223,11 @@ void setup() {
   Serial.println("[OK] IMU ready");
 
   #ifdef FEATURE_TAP_DETECTION
-    setupTapDetection();
+    if (cfg.featureFlags & FLAG_TAP_ENABLED) setupTapDetection();
+  #endif
+
+  #ifdef FEATURE_PHYSICAL_BUTTONS
+    setupPhysicalButtons();
   #endif
 
   cachedTempC = readIMUTemp();
@@ -280,6 +286,9 @@ void setup() {
   #ifdef FEATURE_BOOT_LOOP_DETECT
     Serial.print(" BOOTDET");
   #endif
+  #ifdef FEATURE_PHYSICAL_BUTTONS
+    Serial.print(" PHYSBTN");
+  #endif
   Serial.println();
 
   bootStartMs = millis();
@@ -320,7 +329,11 @@ void loop() {
   #endif
 
   #ifdef FEATURE_TAP_DETECTION
-    processTaps(now);
+    if (cfg.featureFlags & FLAG_TAP_ENABLED) processTaps(now);
+  #endif
+
+  #ifdef FEATURE_PHYSICAL_BUTTONS
+    processPhysicalButtons();
   #endif
 
   if (now - lastTime < (unsigned long)LOOP_RATE_MS) return;
@@ -340,17 +353,14 @@ void loop() {
   #endif
 
   // Gyro reads with optional temperature compensation
-  float gx, gy, gz;
+  float correction = 0.0f;
   #ifdef FEATURE_TEMP_COMPENSATION
-    float correction = TEMP_COMP_COEFF_DPS_C * (cachedTempC - calTempC);
+    if (cfg.featureFlags & FLAG_TEMP_COMP_ENABLED)
-    gx = (imu.readFloatGyroX() - biasGX - correction) * (PI/180.0f);
+      correction = TEMP_COMP_COEFF_DPS_C * (cachedTempC - calTempC);
-    gy = (imu.readFloatGyroY() - biasGY - correction) * (PI/180.0f);
-    gz = (imu.readFloatGyroZ() - biasGZ - correction) * (PI/180.0f);
-  #else
-    gx = (imu.readFloatGyroX() - biasGX) * (PI/180.0f);
-    gy = (imu.readFloatGyroY() - biasGY) * (PI/180.0f);
-    gz = (imu.readFloatGyroZ() - biasGZ) * (PI/180.0f);
   #endif
+  float gx = (imu.readFloatGyroX() - biasGX - correction) * (PI/180.0f);
+  float gy = (imu.readFloatGyroY() - biasGY - correction) * (PI/180.0f);
+  float gz = (imu.readFloatGyroZ() - biasGZ - correction) * (PI/180.0f);
 
   float ax = imu.readFloatAccelX();
   float ay = imu.readFloatAccelY();
@@ -362,8 +372,8 @@ void loop() {
   float jx = (ax - prevAx) / dt, jy = (ay - prevAy) / dt, jz = (az - prevAz) / dt;
   float jerkSq = jx*jx + jy*jy + jz*jz;
   prevAx = ax; prevAy = ay; prevAz = az;
-  bool shocked = (jerkSq > cfg.jerkThreshold) || (now < shockFreezeUntil);
+  bool shocked = cfg.tapFreezeEnabled && ((jerkSq > cfg.jerkThreshold) || (now < shockFreezeUntil));
-  if (jerkSq > cfg.jerkThreshold) shockFreezeUntil = now + SHOCK_FREEZE_MS;
+  if (cfg.tapFreezeEnabled && jerkSq > cfg.jerkThreshold) shockFreezeUntil = now + SHOCK_FREEZE_MS;
 
   // Complementary filter — gx=pitch axis, gz=yaw axis on this board layout
   // During shock: gyro-only integration to avoid accel spike corrupting angles
@@ -427,7 +437,7 @@ void loop() {
   bool idle = (idleFrames >= IDLE_FRAMES);
 
   #ifdef FEATURE_AUTO_RECAL
-    if (idle && idleStartMs != 0 && (now - idleStartMs >= AUTO_RECAL_MS)) {
+    if ((cfg.featureFlags & FLAG_AUTO_RECAL_ENABLED) && idle && idleStartMs != 0 && (now - idleStartMs >= AUTO_RECAL_MS)) {
       Serial.println("[AUTO-CAL] Long idle — recalibrating...");
       idleStartMs = 0; calibrateGyroBias(); prevAx = imu.readFloatAccelX(); prevAy = imu.readFloatAccelY(); prevAz = imu.readFloatAccelZ(); return;
     }

web/app.js

@@ -9,9 +9,17 @@ const CHR = {
   gitHash:     '00001239-0000-1000-8000-00805f9b34fb',  // GitHash    R   8 bytes
 };
 
+// Runtime feature-override flag bitmask constants (mirror firmware FLAG_* defines)
+const FLAG_TAP_ENABLED        = 0x01;
+const FLAG_TEMP_COMP_ENABLED  = 0x02;
+const FLAG_AUTO_RECAL_ENABLED = 0x04;
+const FLAG_ALL_DEFAULT        = FLAG_TAP_ENABLED | FLAG_TEMP_COMP_ENABLED | FLAG_AUTO_RECAL_ENABLED;
+
 // Local shadow of the current config (kept in sync with device)
 const config = { sensitivity:600, deadZone:0.06, accelStrength:0.08, curve:0, axisFlip:0, chargeMode:1,
-                 tapThreshold:12, tapAction:0, tapKey:0, tapMod:0, jerkThreshold:2000 };
+                 tapThreshold:12, tapAction:0, tapKey:0, tapMod:0, tapFreezeEnabled:1, jerkThreshold:2000,
+                 featureFlags:FLAG_ALL_DEFAULT,
+                 btnLeftPin:0xFF, btnRightPin:0xFF, btnMiddlePin:0xFF };
 
 let device=null, server=null, chars={}, userDisconnected=false;
 let currentChargeStatus=0, currentBattPct=null, currentBattVoltage=null;
@@ -200,10 +208,11 @@ async function checkHashMatch() {
 }
 
 // ── ConfigBlob read / write ──────────────────────────────────────────────────
-// ConfigBlob layout (20 bytes LE):
+// ConfigBlob layout (25 bytes LE):
 //   float sensitivity [0], float deadZone [4], float accelStrength [8]
 //   uint8 curve [12], uint8 axisFlip [13], uint8 chargeMode [14]
-//   uint8 tapThreshold [15], uint8 tapAction [16], uint8 tapKey [17], uint8 tapMod [18], uint8 pad [19]
+//   uint8 tapThreshold [15], uint8 tapAction [16], uint8 tapKey [17], uint8 tapMod [18], uint8 tapFreezeEnabled [19]
+//   float jerkThreshold [20], uint8 featureFlags [24]
 
 async function readConfigBlob() {
   if (!chars.configBlob) return;
@@ -221,10 +230,23 @@ async function readConfigBlob() {
       config.tapAction       = view.getUint8(16);
       config.tapKey          = view.getUint8(17);
       config.tapMod          = view.getUint8(18);
+      config.tapFreezeEnabled = view.getUint8(19);
     }
     if (view.byteLength >= 24) {
       config.jerkThreshold = view.getFloat32(20, true);
     }
+    if (view.byteLength >= 25) {
+      config.featureFlags = view.getUint8(24);
+    } else {
+      config.featureFlags = FLAG_ALL_DEFAULT;  // old firmware — assume all on
+    }
+    if (view.byteLength >= 28) {
+      config.btnLeftPin   = view.getUint8(25);
+      config.btnRightPin  = view.getUint8(26);
+      config.btnMiddlePin = view.getUint8(27);
+    } else {
+      config.btnLeftPin = config.btnRightPin = config.btnMiddlePin = 0xFF;  // disabled
+    }
     applyConfigToUI();
     log(`Config loaded — sens=${config.sensitivity.toFixed(0)} dz=${config.deadZone.toFixed(3)} tapThr=${config.tapThreshold}`,'ok');
   } catch(e) { log(`Config read error: ${e.message}`,'err'); }
@@ -241,8 +263,10 @@ function applyConfigToUI() {
   document.getElementById('flipX').checked = !!(config.axisFlip & 1);
   document.getElementById('flipY').checked = !!(config.axisFlip & 2);
   setChargeModeUI(config.chargeMode);
+  document.getElementById('tapFreezeEnabled').checked = !!config.tapFreezeEnabled;
   document.getElementById('slJerkThreshold').value = config.jerkThreshold;
   updateDisplay('jerkThreshold', config.jerkThreshold);
+  updateTapFreezeUI(!!config.tapFreezeEnabled);
   document.getElementById('slTapThreshold').value = config.tapThreshold;
   updateDisplay('tapThreshold', config.tapThreshold);
   setTapActionUI(config.tapAction);
@@ -251,6 +275,40 @@ function applyConfigToUI() {
   document.getElementById('tapModShift').checked = !!(config.tapMod & 0x02);
   document.getElementById('tapModAlt').checked   = !!(config.tapMod & 0x04);
   document.getElementById('tapModGui').checked   = !!(config.tapMod & 0x08);
+  document.getElementById('capTapEnabled').checked  = !!(config.featureFlags & FLAG_TAP_ENABLED);
+  document.getElementById('capTempComp').checked    = !!(config.featureFlags & FLAG_TEMP_COMP_ENABLED);
+  document.getElementById('capAutoRecal').checked   = !!(config.featureFlags & FLAG_AUTO_RECAL_ENABLED);
+  document.getElementById('btnLeftPin').value   = config.btnLeftPin;
+  document.getElementById('btnRightPin').value  = config.btnRightPin;
+  document.getElementById('btnMiddlePin').value = config.btnMiddlePin;
+  updatePinDiagram();
+}
+
+// ── XIAO pin diagram ──────────────────────────────────────────────────────────
+function updatePinDiagram() {
+  const st = getComputedStyle(document.documentElement);
+  const COL_L = st.getPropertyValue('--ok').trim();
+  const COL_R = st.getPropertyValue('--accent2').trim();
+  const COL_M = st.getPropertyValue('--accent').trim();
+  const DEF_F = '#0c1828', DEF_S = '#162234';
+
+  for (let i = 0; i <= 10; i++) {
+    const el = document.getElementById(`xiaoPin${i}`);
+    if (el) { el.setAttribute('fill', DEF_F); el.setAttribute('stroke', DEF_S); }
+  }
+
+  const apply = (pin, col) => {
+    if (pin > 10) return;
+    const el = document.getElementById(`xiaoPin${pin}`);
+    if (el) { el.setAttribute('fill', col); el.setAttribute('stroke', col); }
+  };
+
+  const l = parseInt(document.getElementById('btnLeftPin').value,   10);
+  const r = parseInt(document.getElementById('btnRightPin').value,  10);
+  const m = parseInt(document.getElementById('btnMiddlePin').value, 10);
+  if (l <= 10) apply(l, COL_L);
+  if (r <= 10) apply(r, COL_R);
+  if (m <= 10) apply(m, COL_M);
 }
 
 let _writeConfigTimer = null;
@@ -272,10 +330,18 @@ async function _doWriteConfigBlob() {
                        | (document.getElementById('tapModShift').checked ? 0x02 : 0)
                        | (document.getElementById('tapModAlt').checked   ? 0x04 : 0)
                        | (document.getElementById('tapModGui').checked   ? 0x08 : 0);
+  config.tapFreezeEnabled = document.getElementById('tapFreezeEnabled').checked ? 1 : 0;
   config.jerkThreshold = +document.getElementById('slJerkThreshold').value;
+  config.featureFlags  = (document.getElementById('capTapEnabled').checked  ? FLAG_TAP_ENABLED        : 0)
+                       | (document.getElementById('capTempComp').checked    ? FLAG_TEMP_COMP_ENABLED  : 0)
+                       | (document.getElementById('capAutoRecal').checked   ? FLAG_AUTO_RECAL_ENABLED : 0);
   // config.curve, config.chargeMode, config.tapAction, config.tapKey updated directly
 
-  const buf  = new ArrayBuffer(24);
+  config.btnLeftPin   = parseInt(document.getElementById('btnLeftPin').value,   10);
+  config.btnRightPin  = parseInt(document.getElementById('btnRightPin').value,  10);
+  config.btnMiddlePin = parseInt(document.getElementById('btnMiddlePin').value, 10);
+
+  const buf  = new ArrayBuffer(28);
   const view = new DataView(buf);
   view.setFloat32(0,  config.sensitivity,   true);
   view.setFloat32(4,  config.deadZone,      true);
@@ -287,8 +353,12 @@ async function _doWriteConfigBlob() {
   view.setUint8(16, config.tapAction);
   view.setUint8(17, config.tapKey);
   view.setUint8(18, config.tapMod);
-  view.setUint8(19, 0);
+  view.setUint8(19, config.tapFreezeEnabled);
   view.setFloat32(20, config.jerkThreshold, true);
+  view.setUint8(24, config.featureFlags);
+  view.setUint8(25, config.btnLeftPin);
+  view.setUint8(26, config.btnRightPin);
+  view.setUint8(27, config.btnMiddlePin);
 
   try {
     await gattWrite(chars.configBlob, buf);
@@ -325,6 +395,22 @@ function setChargeModeUI(val) {
   document.getElementById('ciMode').textContent = ['Off (0mA)','50 mA','100 mA'][val] ?? '--';
 }
 
+function onCapTapChange(enabled) {
+  writeConfigBlob();
+  log('Tap detection ' + (enabled ? 'enabled' : 'disabled') + ' — restart device to apply', 'warn');
+}
+
+function onTapFreezeChange(enabled) {
+  config.tapFreezeEnabled = enabled ? 1 : 0;
+  updateTapFreezeUI(enabled);
+  writeConfigBlob();
+}
+function updateTapFreezeUI(enabled) {
+  const slider = document.getElementById('slJerkThreshold');
+  // Only grey out when connected (on disconnect, setStatus handles all inputs)
+  if (device) slider.disabled = !enabled;
+}
+
 function setTapAction(val) {
   config.tapAction = val;
   setTapActionUI(val);
@@ -565,7 +651,7 @@ function setStatus(state) {
   pill.className='status-pill '+state;
   document.body.className=state;
   const cBtn=document.getElementById('connectBtn'), dBtn=document.getElementById('disconnectBtn');
-  const inputs=document.querySelectorAll('input[type=range],.seg-btn,.toggle input,.cmd-btn,#tapKeyHex,.mod-btn input');
+  const inputs=document.querySelectorAll('input[type=range],.seg-btn,.toggle input,.cmd-btn,#tapKeyHex,.mod-btn input,.pin-select');
   if (state==='connected') {
     cBtn.style.display='none'; dBtn.style.display='';
     inputs.forEach(el=>el.disabled=false);
@@ -820,12 +906,12 @@ let orientLastT = 0;
 
 function initOrientViewer() {
   const el = document.getElementById('orientCanvas');
-  const W = el.clientWidth || 340, H = 160;
+  const W = el.clientWidth || 340, H = el.clientHeight || W;
   el.width = W; el.height = H;
 
   orientScene    = new THREE.Scene();
-  orientCamera   = new THREE.PerspectiveCamera(40, W / H, 0.01, 10);
+  orientCamera   = new THREE.PerspectiveCamera(55, W / H, 0.01, 10);
-  orientCamera.position.set(0.6, 0.5, 0.9);
+  orientCamera.position.set(0.75, 0.60, 1.10);
   orientCamera.lookAt(0, 0, 0);
 
   orientRenderer = new THREE.WebGLRenderer({ canvas: el, antialias: true, alpha: true });
@@ -932,6 +1018,7 @@ function applyTheme(t) {
   localStorage.setItem('theme', t);
   if (!chars.imuStream) drawInitState();
   orientUpdateColors();
+  updatePinDiagram();
 }
 (function(){
   const saved = localStorage.getItem('theme') ?? 'auto';

web/index.html

@@ -32,10 +32,14 @@
     <button class="btn btn-disconnect" id="disconnectBtn" onclick="doDisconnect()" style="display:none"><span>Disconnect</span></button>
     <label class="toggle" title="Auto-Reconnect" style="margin-left:6px;flex-shrink:0"><input type="checkbox" id="autoReconnect"><div class="toggle-track"></div><div class="toggle-thumb"></div></label>
     <span style="font-family:var(--mono);font-size:9px;color:var(--label);white-space:nowrap">AUTO-RECONNECT</span>
+    <label class="toggle" style="margin-left:10px;flex-shrink:0" title="Advanced"><input type="checkbox" id="advancedToggle" onchange="toggleAdvanced(this.checked)"><div class="toggle-track"></div><div class="toggle-thumb"></div></label>
+    <span style="font-family:var(--mono);font-size:9px;color:var(--label);white-space:nowrap">ADVANCED</span>
   </div>
 </header>
 
 <main id="mainContent">
+
+  <!-- ── col-left: cursor motion ──────────────────────────────── -->
   <div class="col-left">
 
     <div class="section-label">Motion Parameters</div>
@@ -93,14 +97,54 @@
         <div class="ci-item"><div class="ci-val" id="ciPct">--%</div><div class="ci-lbl">Level</div></div>
         <div class="ci-item ci-advanced" id="ciVoltItem" style="display:none"><div class="ci-val accent" id="ciVolt">--</div><div class="ci-lbl">Voltage</div></div>
       </div>
-      <div class="advanced-row">
+    </div>
-        <label class="toggle"><input type="checkbox" id="advancedToggle" onchange="toggleAdvanced(this.checked)"><div class="toggle-track"></div><div class="toggle-thumb"></div></label>
+
-        <span class="advanced-label">ADVANCED</span>
+    <div class="section-label">Axis Configuration</div>
+    <div class="card">
+      <div class="flip-row">
+        <div class="flip-label">Flip X Axis</div>
+        <div class="param-desc" style="flex:1;font-size:9px;color:var(--label)">Invert left / right</div>
+        <label class="toggle"><input type="checkbox" id="flipX" onchange="writeConfigBlob()" disabled><div class="toggle-track"></div><div class="toggle-thumb"></div></label>
+      </div>
+      <div class="flip-row" style="border-bottom:none">
+        <div class="flip-label">Flip Y Axis</div>
+        <div class="param-desc" style="flex:1;font-size:9px;color:var(--label)">Invert up / down</div>
+        <label class="toggle"><input type="checkbox" id="flipY" onchange="writeConfigBlob()" disabled><div class="toggle-track"></div><div class="toggle-thumb"></div></label>
       </div>
     </div>
 
+    <div class="section-label">Device Capabilities</div>
+    <div class="card">
+      <div class="flip-row">
+        <div class="flip-label">Tap Detection</div>
+        <div class="param-desc" style="flex:1;font-size:9px;color:var(--label)">Double-tap click action &nbsp;<span class="restart-note">· restart to apply</span></div>
+        <label class="toggle"><input type="checkbox" id="capTapEnabled" onchange="onCapTapChange(this.checked)" disabled><div class="toggle-track"></div><div class="toggle-thumb"></div></label>
+      </div>
+      <div class="flip-row">
+        <div class="flip-label">Temp Compensation</div>
+        <div class="param-desc" style="flex:1;font-size:9px;color:var(--label)">Gyro drift correction by temperature</div>
+        <label class="toggle"><input type="checkbox" id="capTempComp" onchange="writeConfigBlob()" disabled><div class="toggle-track"></div><div class="toggle-thumb"></div></label>
+      </div>
+      <div class="flip-row" style="border-bottom:none">
+        <div class="flip-label">Auto Recalibration</div>
+        <div class="param-desc" style="flex:1;font-size:9px;color:var(--label)">Recalibrate gyro after long idle period</div>
+        <label class="toggle"><input type="checkbox" id="capAutoRecal" onchange="writeConfigBlob()" disabled><div class="toggle-track"></div><div class="toggle-thumb"></div></label>
+      </div>
+    </div>
+
+  </div><!-- /col-left -->
+
+  <!-- ── col-mid: button configuration ───────────────────────── -->
+  <div class="col-mid">
+
     <div class="section-label">Tap Configuration</div>
     <div class="card">
+      <div class="param">
+        <div><div class="param-label">Tap Freeze</div><div class="param-desc">Freeze cursor during tap impacts (jerk detection)</div></div>
+        <div style="grid-column:2/4;display:flex;justify-content:flex-end;align-items:center">
+          <label class="toggle"><input type="checkbox" id="tapFreezeEnabled" onchange="onTapFreezeChange(this.checked)" disabled><div class="toggle-track"></div><div class="toggle-thumb"></div></label>
+        </div>
+      </div>
       <div class="param">
         <div><div class="param-label">Tap Freeze Sensitivity</div><div class="param-desc">Jerk² threshold — lower = more aggressive cursor freeze during taps</div></div>
         <input type="range" id="slJerkThreshold" min="500" max="10000" step="100" value="2000"
@@ -137,17 +181,119 @@
       </div>
     </div>
 
-    <div class="section-label">Axis Configuration</div>
+    <div class="section-label">Physical Buttons</div>
     <div class="card">
-      <div class="flip-row">
+      <!-- ── XIAO nRF52840 Sense pin diagram ─────────────────── -->
-        <div class="flip-label">Flip X Axis</div>
+      <div class="xiao-wrap">
-        <div class="param-desc" style="flex:1;font-size:9px;color:var(--label)">Invert left / right</div>
+        <svg id="xiaoSvg" viewBox="0 0 200 278" xmlns="http://www.w3.org/2000/svg" style="display:block;width:100%;max-width:200px">
-        <label class="toggle"><input type="checkbox" id="flipX" onchange="writeConfigBlob()" disabled><div class="toggle-track"></div><div class="toggle-thumb"></div></label>
+          <!-- USB-C connector -->
+          <rect x="72" y="4" width="56" height="28" rx="7" fill="#080e18" stroke="#162234" stroke-width="1.5"/>
+          <rect x="82" y="10" width="36" height="5" rx="1.5" fill="#0e1c30"/><rect x="82" y="18" width="36" height="5" rx="1.5" fill="#0e1c30"/>
+          <text x="100" y="30" text-anchor="middle" font-size="5.5" fill="#162234" font-family="Share Tech Mono,monospace">USB·C</text>
+          <!-- PCB board -->
+          <rect x="22" y="29" width="156" height="244" rx="9" fill="#080e18" stroke="#142030" stroke-width="1.5"/>
+          <!-- Corner holes -->
+          <circle cx="34"  cy="41"  r="3.5" fill="#040810" stroke="#0e1c2c" stroke-width="0.8"/>
+          <circle cx="166" cy="41"  r="3.5" fill="#040810" stroke="#0e1c2c" stroke-width="0.8"/>
+          <circle cx="34"  cy="261" r="3.5" fill="#040810" stroke="#0e1c2c" stroke-width="0.8"/>
+          <circle cx="166" cy="261" r="3.5" fill="#040810" stroke="#0e1c2c" stroke-width="0.8"/>
+          <!-- Board silk label -->
+          <text x="100" y="52" text-anchor="middle" font-size="5.5" fill="#142030" font-family="Share Tech Mono,monospace">XIAO nRF52840 Sense</text>
+          <!-- Antenna outline -->
+          <rect x="130" y="34" width="34" height="22" rx="2" fill="none" stroke="#0e1c2c" stroke-width="0.7" stroke-dasharray="2,2"/>
+          <text x="147" y="48" text-anchor="middle" font-size="5" fill="#0e1c2c" font-family="Share Tech Mono,monospace">ANT</text>
+          <!-- SoC -->
+          <rect x="60" y="78" width="80" height="72" rx="3" fill="#0c1828" stroke="#142030" stroke-width="0.8"/>
+          <text x="100" y="112" text-anchor="middle" font-size="7" fill="#1e3858" font-family="Share Tech Mono,monospace" font-weight="bold">nRF52840</text>
+          <text x="100" y="123" text-anchor="middle" font-size="5.5" fill="#102030" font-family="Share Tech Mono,monospace">HOLYIOT</text>
+          <!-- BGA dots (decorative) -->
+          <g fill="#0c1a2a"><circle cx="74" cy="94" r="1.8"/><circle cx="82" cy="94" r="1.8"/><circle cx="90" cy="94" r="1.8"/><circle cx="98" cy="94" r="1.8"/><circle cx="106" cy="94" r="1.8"/><circle cx="114" cy="94" r="1.8"/><circle cx="74" cy="102" r="1.8"/><circle cx="82" cy="102" r="1.8"/><circle cx="90" cy="102" r="1.8"/><circle cx="98" cy="102" r="1.8"/><circle cx="106" cy="102" r="1.8"/><circle cx="114" cy="102" r="1.8"/><circle cx="74" cy="140" r="1.8"/><circle cx="82" cy="140" r="1.8"/><circle cx="90" cy="140" r="1.8"/><circle cx="98" cy="140" r="1.8"/><circle cx="106" cy="140" r="1.8"/><circle cx="114" cy="140" r="1.8"/></g>
+          <!-- IMU chip -->
+          <rect x="72" y="176" width="56" height="44" rx="3" fill="#0a1420" stroke="#122030" stroke-width="0.8"/>
+          <text x="100" y="196" text-anchor="middle" font-size="5.5" fill="#142030" font-family="Share Tech Mono,monospace">LSM6DS3</text>
+          <text x="100" y="207" text-anchor="middle" font-size="5" fill="#0e1c2c" font-family="Share Tech Mono,monospace">IMU</text>
+          <!-- Charger IC -->
+          <rect x="36" y="228" width="30" height="26" rx="2" fill="#0a1420" stroke="#122030" stroke-width="0.8"/>
+          <text x="51" y="244" text-anchor="middle" font-size="4.5" fill="#0e1c2c" font-family="Share Tech Mono,monospace">BQ25100</text>
+          <!-- LED indicators -->
+          <circle cx="142" cy="168" r="3.5" fill="#0a1a0a" stroke="#0e180e" stroke-width="0.8"/>
+          <circle cx="152" cy="168" r="3.5" fill="#1a0a0a" stroke="#180e0e" stroke-width="0.8"/>
+          <circle cx="162" cy="168" r="3.5" fill="#0a0a1a" stroke="#0e0e18" stroke-width="0.8"/>
+          <text x="152" y="178" text-anchor="middle" font-size="4.5" fill="#0e1c2c" font-family="Share Tech Mono,monospace">LED</text>
+          <!-- Left traces -->
+          <g stroke="#142030" stroke-width="2"><line x1="22" y1="62" x2="9" y2="62"/><line x1="22" y1="94" x2="9" y2="94"/><line x1="22" y1="126" x2="9" y2="126"/><line x1="22" y1="158" x2="9" y2="158"/><line x1="22" y1="190" x2="9" y2="190"/><line x1="22" y1="222" x2="9" y2="222"/><line x1="22" y1="254" x2="9" y2="254"/></g>
+          <!-- Right traces -->
+          <g stroke="#142030" stroke-width="2"><line x1="178" y1="62" x2="191" y2="62"/><line x1="178" y1="94" x2="191" y2="94"/><line x1="178" y1="126" x2="191" y2="126"/><line x1="178" y1="158" x2="191" y2="158"/><line x1="178" y1="190" x2="191" y2="190"/><line x1="178" y1="222" x2="191" y2="222"/><line x1="178" y1="254" x2="191" y2="254"/></g>
+          <!-- Left pads D0-D6 (arduino 0-6) -->
+          <circle id="xiaoPin0" cx="9" cy="62"  r="7" fill="#0c1828" stroke="#162234" stroke-width="1.5"/>
+          <circle id="xiaoPin1" cx="9" cy="94"  r="7" fill="#0c1828" stroke="#162234" stroke-width="1.5"/>
+          <circle id="xiaoPin2" cx="9" cy="126" r="7" fill="#0c1828" stroke="#162234" stroke-width="1.5"/>
+          <circle id="xiaoPin3" cx="9" cy="158" r="7" fill="#0c1828" stroke="#162234" stroke-width="1.5"/>
+          <circle id="xiaoPin4" cx="9" cy="190" r="7" fill="#0c1828" stroke="#162234" stroke-width="1.5"/>
+          <circle id="xiaoPin5" cx="9" cy="222" r="7" fill="#0c1828" stroke="#162234" stroke-width="1.5"/>
+          <circle id="xiaoPin6" cx="9" cy="254" r="7" fill="#0c1828" stroke="#162234" stroke-width="1.5"/>
+          <!-- Right pads D7-D10 (arduino 7-10) -->
+          <circle id="xiaoPin7"  cx="191" cy="62"  r="7" fill="#0c1828" stroke="#162234" stroke-width="1.5"/>
+          <circle id="xiaoPin8"  cx="191" cy="94"  r="7" fill="#0c1828" stroke="#162234" stroke-width="1.5"/>
+          <circle id="xiaoPin9"  cx="191" cy="126" r="7" fill="#0c1828" stroke="#162234" stroke-width="1.5"/>
+          <circle id="xiaoPin10" cx="191" cy="158" r="7" fill="#0c1828" stroke="#162234" stroke-width="1.5"/>
+          <!-- RST / GND / 3V3 (non-configurable) -->
+          <circle cx="191" cy="190" r="7" fill="#0c1828" stroke="#102028" stroke-width="1.5"/>
+          <circle cx="191" cy="222" r="7" fill="#0c1828" stroke="#201010" stroke-width="1.5"/>
+          <circle cx="191" cy="254" r="7" fill="#0c1828" stroke="#102010" stroke-width="1.5"/>
+          <!-- Left labels D0-D6 -->
+          <g font-size="7" font-family="Share Tech Mono,monospace" fill="#1e3858"><text x="24" y="65">D0</text><text x="24" y="97">D1</text><text x="24" y="129">D2</text><text x="24" y="161">D3</text><text x="24" y="193">D4</text><text x="24" y="225">D5</text><text x="24" y="257">D6</text></g>
+          <g font-size="5.5" font-family="Share Tech Mono,monospace" fill="#112030"><text x="36" y="65">A0</text><text x="36" y="97">A1</text><text x="36" y="129">A2</text><text x="36" y="161">A3</text><text x="36" y="193">SDA</text><text x="36" y="225">SCL</text><text x="36" y="257">TX</text></g>
+          <!-- Right labels D7-D10 -->
+          <g font-size="7" font-family="Share Tech Mono,monospace" text-anchor="end" fill="#1e3858"><text x="176" y="65">D7</text><text x="176" y="97">D8</text><text x="176" y="129">D9</text><text x="176" y="161">D10</text></g>
+          <g font-size="5.5" font-family="Share Tech Mono,monospace" text-anchor="end" fill="#112030"><text x="162" y="65">RX</text><text x="162" y="97">SCK</text><text x="162" y="129">MISO</text><text x="162" y="161">MOSI</text></g>
+          <!-- RST/GND/3V3 labels -->
+          <g font-size="7" font-family="Share Tech Mono,monospace" text-anchor="end" fill="#0e1c2c"><text x="176" y="193">RST</text></g>
+          <g font-size="7" font-family="Share Tech Mono,monospace" text-anchor="end" fill="#1a0808"><text x="176" y="225">GND</text></g>
+          <g font-size="7" font-family="Share Tech Mono,monospace" text-anchor="end" fill="#081a08"><text x="176" y="257">3V3</text></g>
+        </svg>
+        <div class="pin-legend">
+          <span class="pleg left">● Left</span>
+          <span class="pleg right">● Right</span>
+          <span class="pleg mid">● Middle</span>
         </div>
-      <div class="flip-row" style="border-bottom:none">
+      </div>
-        <div class="flip-label">Flip Y Axis</div>
+      <hr class="xiao-divider">
-        <div class="param-desc" style="flex:1;font-size:9px;color:var(--label)">Invert up / down</div>
+      <div class="flip-row" style="align-items:center;padding-top:4px">
-        <label class="toggle"><input type="checkbox" id="flipY" onchange="writeConfigBlob()" disabled><div class="toggle-track"></div><div class="toggle-thumb"></div></label>
+        <div class="flip-label">Left Click</div>
+        <div class="param-desc" style="flex:1;font-size:9px;color:var(--label)">Pin wired to GND when pressed</div>
+        <select class="pin-select" id="btnLeftPin" onchange="updatePinDiagram();writeConfigBlob()" disabled>
+          <option value="255">None</option>
+          <option value="0">D0</option><option value="1">D1</option><option value="2">D2</option>
+          <option value="3">D3</option><option value="4">D4</option><option value="5">D5</option>
+          <option value="6">D6</option><option value="7">D7</option><option value="8">D8</option>
+          <option value="9">D9</option><option value="10">D10</option>
+        </select>
+      </div>
+      <div class="flip-row" style="align-items:center">
+        <div class="flip-label">Right Click</div>
+        <div class="param-desc" style="flex:1;font-size:9px;color:var(--label)">Pin wired to GND when pressed</div>
+        <select class="pin-select" id="btnRightPin" onchange="updatePinDiagram();writeConfigBlob()" disabled>
+          <option value="255">None</option>
+          <option value="0">D0</option><option value="1">D1</option><option value="2">D2</option>
+          <option value="3">D3</option><option value="4">D4</option><option value="5">D5</option>
+          <option value="6">D6</option><option value="7">D7</option><option value="8">D8</option>
+          <option value="9">D9</option><option value="10">D10</option>
+        </select>
+      </div>
+      <div class="flip-row" style="align-items:center;border-bottom:none">
+        <div class="flip-label">Middle Click</div>
+        <div class="param-desc" style="flex:1;font-size:9px;color:var(--label)">Pin wired to GND when pressed</div>
+        <select class="pin-select" id="btnMiddlePin" onchange="updatePinDiagram();writeConfigBlob()" disabled>
+          <option value="255">None</option>
+          <option value="0">D0</option><option value="1">D1</option><option value="2">D2</option>
+          <option value="3">D3</option><option value="4">D4</option><option value="5">D5</option>
+          <option value="6">D6</option><option value="7">D7</option><option value="8">D8</option>
+          <option value="9">D9</option><option value="10">D10</option>
+        </select>
+      </div>
+      <div style="padding:8px 0 2px;font-size:9px;color:var(--label);font-family:var(--mono)">
+        Pull-up built-in · wire button between chosen pin and GND
       </div>
     </div>
 
@@ -166,8 +312,9 @@
     <div class="section-label" style="margin-top:8px">Event Log</div>
     <div class="console" id="console"></div>
 
-  </div>
+  </div><!-- /col-mid -->
 
+  <!-- ── col-right: live monitoring ───────────────────────────── -->
   <div class="col-right">
 
     <div class="section-label">Live Cursor Visualiser</div>

web/style.css

@@ -110,7 +110,7 @@
   .logo-sub { font-size:10px; color:var(--label); letter-spacing:0.25em; text-transform:uppercase; margin-top:3px; }
   .header-right { margin-left:auto; display:flex; align-items:center; gap:10px; flex-wrap:wrap; justify-content:flex-end; }
 
-  .status-pill { display:flex; align-items:center; gap:8px; padding:6px 12px; border:1px solid var(--border); font-size:11px; letter-spacing:0.15em; text-transform:uppercase; color:var(--label); transition:all 0.3s; white-space:nowrap; }
+  .status-pill { display:flex; align-items:center; gap:8px; height:34px; padding:0 14px; border:1px solid var(--border); font-size:11px; letter-spacing:0.15em; text-transform:uppercase; color:var(--label); transition:all 0.3s; white-space:nowrap; }
   .status-pill.connected  { border-color:var(--ok);   color:var(--ok); }
   .status-pill.connecting { border-color:var(--warn); color:var(--warn); }
   .dot { width:7px; height:7px; border-radius:50%; background:var(--dim); flex-shrink:0; }
@@ -131,7 +131,7 @@
   .btn:disabled { border-color:var(--dim); color:var(--dim); cursor:not-allowed; }
   .btn:disabled::before { display:none; }
   .btn:disabled:hover { color:var(--dim); }
-  .btn-debug { border:1px solid var(--dim); color:var(--label); min-width:52px; text-align:center; font-size:10px; padding:6px 10px; }
+  .btn-debug { border:1px solid var(--dim); color:var(--label); min-width:52px; text-align:center; font-size:10px; height:34px; padding:0 10px; }
   .btn-debug::before { background:var(--accent); }
   .btn-theme { border:1px solid var(--dim); color:var(--label); min-width:72px; text-align:center; }
   .btn-theme::before { background:var(--text); }
@@ -148,10 +148,32 @@
   .chg-badge.full     { border-color:var(--ok);     color:var(--ok); }
   .chg-badge.show     { display:flex; }
 
-  main { max-width:1100px; margin:0 auto; padding:32px 20px 80px; display:grid; grid-template-columns:1fr 380px; gap:16px; align-items:start; }
+  main { max-width:1440px; margin:0 auto; padding:32px 20px 80px; display:grid; grid-template-columns:1fr 1fr 380px; gap:16px; align-items:start; }
   .col-left  { display:grid; gap:12px; }
+  .col-mid   { display:grid; gap:12px; }
   .col-right { display:grid; gap:12px; position:sticky; top:80px; }
 
+  /* ── XIAO pin diagram ─────────────────────────────────────── */
+  .xiao-wrap { display:flex; flex-direction:column; align-items:center; padding:8px 0 14px; }
+  .pin-legend { display:flex; gap:20px; justify-content:center; font-family:var(--mono); font-size:9px; margin-top:10px; letter-spacing:0.08em; }
+  .pleg.left   { color:var(--ok); }
+  .pleg.right  { color:var(--accent2); }
+  .pleg.mid    { color:var(--accent); }
+  .xiao-divider { border:none; border-top:1px solid var(--border); margin:0 -20px 12px; }
+
+  /* ── Responsive ───────────────────────────────────────────── */
+  @media (max-width:1100px) {
+    main { grid-template-columns:1fr 380px; grid-template-rows:auto auto; }
+    .col-left  { grid-column:1; grid-row:1; }
+    .col-mid   { grid-column:1; grid-row:2; }
+    .col-right { grid-column:2; grid-row:1/3; }
+  }
+  @media (max-width:700px) {
+    main { grid-template-columns:1fr; }
+    .col-left, .col-mid, .col-right { grid-column:1; grid-row:auto; }
+    .col-right { position:static; }
+  }
+
   .section-label { font-family:var(--sans); font-size:11px; font-weight:600; letter-spacing:0.3em; text-transform:uppercase; color:var(--label); padding:4px 0; border-bottom:1px solid var(--border); margin-bottom:4px; display:flex; align-items:center; gap:8px; }
   .section-label::before { content:'//'; color:var(--accent); font-family:var(--mono); font-size:10px; }
 
@@ -225,7 +247,7 @@
   .viz-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:12px; }
   .viz-title { font-family:var(--sans); font-size:11px; font-weight:600; letter-spacing:0.25em; text-transform:uppercase; color:var(--label); }
   .orient-card { padding:12px; display:flex; flex-direction:column; align-items:center; }
-  #orientCanvas { display:block; width:100%; height:160px; }
+  #orientCanvas { display:block; width:100%; aspect-ratio:1; }
   .viz-ctrl-btn { background:none; border:1px solid var(--border); color:var(--label); font-size:11px; line-height:1; padding:3px 8px; cursor:pointer; letter-spacing:0.05em; }
   .viz-ctrl-btn:hover { border-color:var(--accent); color:var(--accent); }
   .viz-live { font-size:9px; letter-spacing:0.2em; display:block; }
@@ -254,9 +276,6 @@
   .ci-val { font-family:var(--sans); font-size:16px; font-weight:700; }
   .ci-lbl { font-size:9px; letter-spacing:0.2em; text-transform:uppercase; color:var(--label); margin-top:3px; }
 
-  .advanced-row { display:flex; align-items:center; gap:8px; margin-top:10px; justify-content:flex-end; }
-  .advanced-label { font-family:var(--mono); font-size:9px; color:var(--label); letter-spacing:0.15em; }
-
   .overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,0.88); z-index:500; align-items:center; justify-content:center; }
   .overlay.show { display:flex; }
   .modal { background:var(--panel); border:1px solid var(--accent2); padding:28px; max-width:360px; width:100%; }
@@ -306,6 +325,10 @@
   .mod-btn input:checked + span { background:var(--accent); color:var(--bg); border-color:var(--accent); font-weight:bold; }
   .mod-btn input:disabled + span { opacity:0.35; cursor:not-allowed; }
 
+  .restart-note { color:var(--warn); font-family:var(--mono); font-size:9px; }
+  .pin-select { background:var(--bg); color:var(--text); border:1px solid var(--border); font-family:var(--mono); font-size:11px; padding:3px 6px; cursor:pointer; min-width:80px; }
+  .pin-select:disabled { color:var(--dim); border-color:var(--dim); cursor:not-allowed; }
+
   .tap-flash { position:absolute; inset:0; pointer-events:none; opacity:0; transition:opacity 0.25s; }
   .tap-flash.left { background:radial-gradient(circle at center, var(--tap-left)  0%, transparent 70%); }
   .tap-flash.right { background:radial-gradient(circle at center, var(--tap-right) 0%, transparent 70%); }