feat: Introduce a Blockly-based visual rule editor with AST generation and add new assets for water button status.

public/waterButtonStatus/script.js

@@ -1,42 +1,43 @@
 const CIRC = 2 * Math.PI * 52;  // ~326.73
-  const ring  = document.getElementById('ring');
+const ring = document.getElementById('ring');
-  const cd    = document.getElementById('countdown');
+const cd = document.getElementById('countdown');
-  const label = document.getElementById('label');
+const label = document.getElementById('label');
-  const badge = document.getElementById('badge');
+const badge = document.getElementById('badge');
-  const badgeTxt = document.getElementById('badge-text');
+const badgeTxt = document.getElementById('badge-text');
-  const glow  = document.getElementById('glow');
+const glow = document.getElementById('glow');
-  const durInput = document.getElementById('dur-input');
+const durInput = document.getElementById('dur-input');
-  const btnRun  = document.getElementById('btn-run');
+const btnRun = document.getElementById('btn-run');
-  const btnOpen = document.getElementById('btn-open');
+const btnLearn = document.getElementById('btn-learn');
-  const btnClose = document.getElementById('btn-close');
+const btnOpen = document.getElementById('btn-open');
+const btnClose = document.getElementById('btn-close');
 
-  function fmt(ms) {
+function fmt(ms) {
   if (ms <= 0) return '0.0';
   const totalSec = ms / 1000;
   if (totalSec < 60) return totalSec.toFixed(1);
   const m = Math.floor(totalSec / 60);
   const s = Math.floor(totalSec % 60);
   return m + ':' + String(s).padStart(2, '0');
-  }
+}
 
-  function fmtDur(ms) {
+function fmtDur(ms) {
   const s = (ms / 1000).toFixed(1);
   return s + 's';
-  }
+}
 
-  let state = null;
+let state = null;
-  let serverOffset = 0; // server time - client time
+let serverOffset = 0; // server time - client time
 
-  async function poll() {
+async function poll() {
   try {
     const r = await fetch('/api/status');
     state = await r.json();
     // Compute clock offset so countdown works even with clock skew
     serverOffset = state.now - Date.now();
-    } catch(e) { /* retry next tick */ }
+  } catch (e) { /* retry next tick */ }
-  }
+}
 
-  function render() {
+function render() {
   if (!state) return;
 
   // Sync duration input if user isn't editing it
@@ -45,10 +46,25 @@ const CIRC = 2 * Math.PI * 52;  // ~326.73
     if (durInput.value !== String(secs)) durInput.value = secs;
   }
 
-    // Disable controls while timer is running
+  // Disable controls while timer is running or learning
   const running = state.timerActive;
-    btnRun.disabled = running;
+  const learning = state.countMode;
-    durInput.disabled = running;
+  btnRun.disabled = running || learning;
+  durInput.disabled = running || learning;
+  btnOpen.disabled = running || learning;
+  btnClose.disabled = running || learning;
+
+  // Learn button toggles label and action
+  if (learning) {
+    btnLearn.textContent = '⏹ Stop Learn';
+    btnLearn.onclick = doStopLearn;
+    btnLearn.classList.add('active-learn');
+  } else {
+    btnLearn.textContent = '📐 Learn';
+    btnLearn.onclick = doLearn;
+    btnLearn.classList.remove('active-learn');
+  }
+  btnLearn.disabled = running;  // can't start learn while timer runs
 
   if (state.timerActive && state.timerStartedAt && state.timerEndsAt) {
     const total = state.timerEndsAt - state.timerStartedAt;
@@ -64,9 +80,12 @@ const CIRC = 2 * Math.PI * 52;  // ~326.73
     badgeTxt.textContent = 'Timer Running';
     glow.classList.add('active');
   } else if (state.countMode) {
+    const elapsed = state.countStart
+      ? Math.max(0, (Date.now() + serverOffset) - state.countStart)
+      : 0;
     ring.style.strokeDashoffset = CIRC;
-      cd.textContent = '⏱';
+    cd.textContent = fmt(elapsed);
-      cd.className = 'countdown idle';
+    cd.className = 'countdown';
     label.textContent = 'LEARNING';
     badge.className = 'badge counting';
     badgeTxt.textContent = 'Count Mode';
@@ -80,14 +99,14 @@ const CIRC = 2 * Math.PI * 52;  // ~326.73
     badgeTxt.textContent = 'Idle';
     glow.classList.remove('active');
   }
-  }
+}
 
-  // Quindar tones via Web Audio API
+// Quindar tones via Web Audio API
-  let audioCtx = null;
+let audioCtx = null;
-  let endBeeped = false;
+let endBeeped = false;
-  let wasTimerActive = false;
+let wasTimerActive = false;
 
-  function playTone(freq) {
+function playTone(freq) {
   if (!audioCtx) audioCtx = new (window.AudioContext || window.webkitAudioContext)();
   const t = audioCtx.currentTime;
   const osc = audioCtx.createOscillator();
@@ -101,9 +120,9 @@ const CIRC = 2 * Math.PI * 52;  // ~326.73
   gain.connect(audioCtx.destination);
   osc.start(t);
   osc.stop(t + 0.25);
-  }
+}
 
-  function checkBeep() {
+function checkBeep() {
   if (!state) return;
   const active = state.timerActive && state.timerStartedAt && state.timerEndsAt;
 
@@ -126,30 +145,30 @@ const CIRC = 2 * Math.PI * 52;  // ~326.73
   }
 
   wasTimerActive = !!active;
-  }
+}
 
-  // ── Wake Lock ──
+// ── Wake Lock ──
-  let wakeLock = null;
+let wakeLock = null;
-  let lockAcquired = false;
+let lockAcquired = false;
 
-  async function requestWakeLock() {
+async function requestWakeLock() {
   try {
     if ('wakeLock' in navigator && !wakeLock) {
       wakeLock = await navigator.wakeLock.request('screen');
       wakeLock.addEventListener('release', () => { wakeLock = null; });
     }
-    } catch(e) { console.error('Wake Lock error:', e); }
+  } catch (e) { console.error('Wake Lock error:', e); }
-  }
+}
 
-  function releaseWakeLock() {
+function releaseWakeLock() {
-    if (wakeLock) { wakeLock.release().catch(()=>{}); wakeLock = null; }
+  if (wakeLock) { wakeLock.release().catch(() => { }); wakeLock = null; }
-  }
+}
 
-  document.addEventListener('visibilitychange', () => {
+document.addEventListener('visibilitychange', () => {
   if (document.visibilityState === 'visible' && lockAcquired) requestWakeLock();
-  });
+});
 
-  function checkWakeLock() {
+function checkWakeLock() {
   if (!state) return;
   const active = state.timerActive || state.countMode;
   if (active && !lockAcquired) {
@@ -159,15 +178,15 @@ const CIRC = 2 * Math.PI * 52;  // ~326.73
     releaseWakeLock();
     lockAcquired = false;
   }
-  }
+}
 
-  // Poll server every 2s, render locally at 20fps for smooth countdown
+// Poll server every 2s, render locally at 20fps for smooth countdown
-  poll();
+poll();
-  setInterval(poll, 2000);
+setInterval(poll, 2000);
-  setInterval(() => { render(); checkBeep(); checkWakeLock(); }, 50);
+setInterval(() => { render(); checkBeep(); checkWakeLock(); }, 50);
 
-  // ── Control actions ──
+// ── Control actions ──
-  async function apiPost(path, body = {}) {
+async function apiPost(path, body = {}) {
   try {
     const r = await fetch(path, {
       method: 'POST',
@@ -177,25 +196,76 @@ const CIRC = 2 * Math.PI * 52;  // ~326.73
     const d = await r.json();
     if (!d.ok) console.error('API error:', d.error);
     await poll();
-    } catch(e) { console.error('API call failed:', e); }
+  } catch (e) { console.error('API call failed:', e); }
-  }
+}
 
-  async function doRun() {
+async function doRun() {
   // Save duration first if changed
   const secs = parseInt(durInput.value, 10);
   if (secs > 0 && secs <= 300) {
     await apiPost('/api/duration', { seconds: secs });
   }
   await apiPost('/api/run');
-  }
+}
 
-  function doOpen()  { apiPost('/api/open'); }
+function doOpen() { apiPost('/api/open'); }
-  function doClose() { apiPost('/api/close'); }
+function doClose() { apiPost('/api/close'); }
 
-  // Also save duration on Enter or blur
+async function doLearn() { await apiPost('/api/learn'); }
-  durInput.addEventListener('change', () => {
+async function doStopLearn() { await apiPost('/api/stop-learn'); }
+
+
+// Also save duration on Enter or blur
+durInput.addEventListener('change', () => {
   const secs = parseInt(durInput.value, 10);
   if (secs > 0 && secs <= 300) {
     apiPost('/api/duration', { seconds: secs });
   }
-  });
+});
+
+// ── Button online status ──
+const deviceDot = document.getElementById('device-dot');
+const deviceState = document.getElementById('device-state');
+const valveDot = document.getElementById('valve-dot');
+const valveState = document.getElementById('valve-state');
+
+function updateDeviceWidget(dot, stateEl, online) {
+  if (online === true) {
+    dot.className = 'device-dot online';
+    stateEl.className = 'device-state online';
+    stateEl.textContent = 'Online';
+  } else if (online === false) {
+    dot.className = 'device-dot offline';
+    stateEl.className = 'device-state offline';
+    stateEl.textContent = 'Offline';
+  } else {
+    dot.className = 'device-dot';
+    stateEl.className = 'device-state';
+    stateEl.textContent = 'Unknown';
+  }
+}
+
+async function pollButtonOnline() {
+  try {
+    const r = await fetch('/api/button-online');
+    const d = await r.json();
+    updateDeviceWidget(deviceDot, deviceState, d.online);
+  } catch {
+    updateDeviceWidget(deviceDot, deviceState, null);
+  }
+}
+
+async function pollValveOnline() {
+  try {
+    const r = await fetch('/api/valve-online');
+    const d = await r.json();
+    updateDeviceWidget(valveDot, valveState, d.online);
+  } catch {
+    updateDeviceWidget(valveDot, valveState, null);
+  }
+}
+
+pollButtonOnline();
+pollValveOnline();
+setInterval(pollButtonOnline, 10000);
+setInterval(pollValveOnline, 10000);

public/waterButtonStatus/style.css

@@ -1,11 +1,15 @@
 @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
 
-  * { margin: 0; padding: 0; box-sizing: border-box; }
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
 
-  :root {
+:root {
   --bg: #0a0e1a;
   --surface: #131829;
-    --border: rgba(255,255,255,0.06);
+  --border: rgba(255, 255, 255, 0.06);
   --text: #e2e8f0;
   --text-dim: #64748b;
   --blue: #3b82f6;
@@ -13,9 +17,9 @@
   --green: #22c55e;
   --red: #ef4444;
   --orange: #f59e0b;
-  }
+}
 
-  body {
+body {
   font-family: 'Inter', -apple-system, sans-serif;
   background: var(--bg);
   color: var(--text);
@@ -26,53 +30,53 @@
   justify-content: center;
   padding: 1.5rem;
   overflow: hidden;
-  }
+}
 
-  .container {
+.container {
   width: 100%;
   max-width: 380px;
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 2rem;
-  }
+}
 
-  h1 {
+h1 {
   font-size: 1.1rem;
   font-weight: 600;
   letter-spacing: 0.05em;
   text-transform: uppercase;
   color: var(--text-dim);
-  }
+}
 
-  /* ── Progress Ring ── */
+/* ── Progress Ring ── */
-  .ring-wrapper {
+.ring-wrapper {
   position: relative;
   width: 260px;
   height: 260px;
-  }
+}
 
-  .ring-svg {
+.ring-svg {
   width: 100%;
   height: 100%;
   transform: rotate(-90deg);
-  }
+}
 
-  .ring-bg {
+.ring-bg {
   fill: none;
   stroke: var(--border);
   stroke-width: 8;
-  }
+}
 
-  .ring-fg {
+.ring-fg {
   fill: none;
   stroke: url(#grad);
   stroke-width: 8;
   stroke-linecap: round;
   transition: stroke-dashoffset 0.4s ease;
-  }
+}
 
-  .ring-center {
+.ring-center {
   position: absolute;
   inset: 0;
   display: flex;
@@ -80,9 +84,9 @@
   align-items: center;
   justify-content: center;
   gap: 0.3rem;
-  }
+}
 
-  .countdown {
+.countdown {
   font-size: 3.2rem;
   font-weight: 700;
   font-variant-numeric: tabular-nums;
@@ -91,24 +95,24 @@
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   background-clip: text;
-  }
+}
 
-  .countdown.idle {
+.countdown.idle {
   font-size: 1.6rem;
   background: none;
   -webkit-text-fill-color: var(--text-dim);
-  }
+}
 
-  .countdown-label {
+.countdown-label {
   font-size: 0.75rem;
   font-weight: 500;
   text-transform: uppercase;
   letter-spacing: 0.1em;
   color: var(--text-dim);
-  }
+}
 
-  /* ── Status Badge ── */
+/* ── Status Badge ── */
-  .badge {
+.badge {
   display: inline-flex;
   align-items: center;
   gap: 0.5rem;
@@ -119,103 +123,110 @@
   letter-spacing: 0.02em;
   border: 1px solid var(--border);
   background: var(--surface);
-  }
+}
 
-  .badge .dot {
+.badge .dot {
   width: 10px;
   height: 10px;
   border-radius: 50%;
   flex-shrink: 0;
-  }
+}
 
-  .badge.running .dot {
+.badge.running .dot {
   background: var(--cyan);
   box-shadow: 0 0 8px var(--cyan);
   animation: pulse-dot 1.5s ease-in-out infinite;
-  }
+}
 
-  .badge.open .dot {
+.badge.open .dot {
   background: var(--green);
   box-shadow: 0 0 8px var(--green);
-  }
+}
 
-  .badge.closed .dot {
+.badge.closed .dot {
   background: var(--red);
   box-shadow: 0 0 6px var(--red);
-  }
+}
 
-  .badge.counting .dot {
+.badge.counting .dot {
   background: var(--orange);
   box-shadow: 0 0 8px var(--orange);
   animation: pulse-dot 0.8s ease-in-out infinite;
+}
+
+@keyframes pulse-dot {
+
+  0%,
+  100% {
+    opacity: 1;
   }
 
-  @keyframes pulse-dot {
+  50% {
-    0%, 100% { opacity: 1; }
+    opacity: 0.4;
-    50% { opacity: 0.4; }
   }
+}
 
-  /* ── Info row ── */
+/* ── Info row ── */
-  .info {
+.info {
   display: flex;
   gap: 1.5rem;
-  }
+}
 
-  .info-item {
+.info-item {
   text-align: center;
-  }
+}
 
-  .info-value {
+.info-value {
   font-size: 1.3rem;
   font-weight: 600;
   font-variant-numeric: tabular-nums;
-  }
+}
 
-  .info-label {
+.info-label {
   font-size: 0.7rem;
   color: var(--text-dim);
   text-transform: uppercase;
   letter-spacing: 0.08em;
   margin-top: 0.15rem;
-  }
+}
 
-  /* ── Glow effect behind ring ── */
+/* ── Glow effect behind ring ── */
-  .glow {
+.glow {
   position: absolute;
   inset: 20px;
   border-radius: 50%;
-    background: radial-gradient(circle, rgba(6,182,212,0.12) 0%, transparent 70%);
+  background: radial-gradient(circle, rgba(6, 182, 212, 0.12) 0%, transparent 70%);
   opacity: 0;
   transition: opacity 0.6s ease;
   pointer-events: none;
-  }
+}
 
-  .glow.active {
+.glow.active {
   opacity: 1;
-  }
+}
 
-  /* ── Controls ── */
+/* ── Controls ── */
-  .controls {
+.controls {
   display: flex;
   gap: 0.6rem;
   width: 100%;
   justify-content: center;
   flex-wrap: wrap;
-  }
+}
 
-  .run-container {
+.run-container {
   display: flex;
   width: 100%;
   gap: 0.6rem;
-  }
+}
 
-  #btn-run {
+#btn-run {
   flex-grow: 1;
   font-size: 1.4rem;
   padding: 1.2rem;
-  }
+}
 
-  .btn {
+.btn {
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -232,52 +243,69 @@
   transition: all 0.15s ease;
   user-select: none;
   -webkit-tap-highlight-color: transparent;
-  }
+}
 
-  .btn:hover {
+.btn:hover {
-    background: rgba(59,130,246,0.12);
+  background: rgba(59, 130, 246, 0.12);
   border-color: var(--blue);
-  }
+}
 
-  .btn:active {
+.btn:active {
   transform: scale(0.96);
-  }
+}
 
-  .btn.primary {
+.btn.primary {
   background: linear-gradient(135deg, var(--blue), var(--cyan));
   border-color: transparent;
   color: #fff;
-  }
+}
 
-  .btn.primary:hover {
+.btn.primary:hover {
   filter: brightness(1.15);
   background: linear-gradient(135deg, var(--blue), var(--cyan));
-  }
+}
 
-  .btn.danger {
+.btn.danger {
-    border-color: rgba(239,68,68,0.3);
+  border-color: rgba(239, 68, 68, 0.3);
-  }
+}
 
-  .btn.danger:hover {
+.btn.danger:hover {
-    background: rgba(239,68,68,0.15);
+  background: rgba(239, 68, 68, 0.15);
   border-color: var(--red);
-  }
+}
 
-  .btn.success {
+.btn.warning {
-    border-color: rgba(34,197,94,0.3);
+  border-color: rgba(245, 158, 11, 0.35);
-  }
+  color: var(--orange);
+}
 
-  .btn.success:hover {
+.btn.warning:hover {
-    background: rgba(34,197,94,0.15);
+  background: rgba(245, 158, 11, 0.15);
+  border-color: var(--orange);
+}
+
+.btn.warning.active-learn {
+  background: var(--orange);
+  border-color: transparent;
+  color: #000;
+  animation: pulse-dot 1s ease-in-out infinite;
+}
+
+.btn.success {
+  border-color: rgba(34, 197, 94, 0.3);
+}
+
+.btn.success:hover {
+  background: rgba(34, 197, 94, 0.15);
   border-color: var(--green);
-  }
+}
 
-  .btn:disabled {
+.btn:disabled {
   opacity: 0.45;
   pointer-events: none;
-  }
+}
 
-  .dur-input-group {
+.dur-input-group {
   display: flex;
   align-items: center;
   gap: 0.4rem;
@@ -286,13 +314,13 @@
   border-radius: 12px;
   padding: 0 0.8rem;
   transition: border-color 0.15s ease;
-  }
+}
 
-  .dur-input-group:focus-within {
+.dur-input-group:focus-within {
   border-color: var(--blue);
-  }
+}
 
-  .dur-input {
+.dur-input {
   width: 64px;
   background: transparent;
   border: none;
@@ -304,12 +332,106 @@
   padding: 0.8rem 0;
   outline: none;
   text-align: right;
-  }
+}
 
-  .dur-input::-webkit-inner-spin-button { opacity: 0.3; }
+.dur-input::-webkit-inner-spin-button {
+  opacity: 0.3;
+}
 
-  .dur-unit {
+.dur-unit {
   font-size: 0.85rem;
   color: var(--text-dim);
   font-weight: 500;
-  }
+}
+
+/* ── Device Status Widgets ── */
+.devices-row {
+  display: flex;
+  gap: 0.6rem;
+  width: 100%;
+}
+
+.device-status {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  gap: 0.9rem;
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: 16px;
+  padding: 0.7rem 1.2rem;
+  width: 100%;
+}
+
+.device-icon-wrap {
+  position: relative;
+  flex-shrink: 0;
+}
+
+.device-icon {
+  width: 48px;
+  height: 48px;
+  object-fit: contain;
+  border-radius: 10px;
+  display: block;
+  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.5));
+}
+
+.device-dot {
+  position: absolute;
+  bottom: -3px;
+  right: -3px;
+  width: 13px;
+  height: 13px;
+  border-radius: 50%;
+  border: 2px solid var(--bg);
+  background: var(--text-dim);
+  transition: background 0.4s ease, box-shadow 0.4s ease;
+}
+
+.device-dot.online {
+  background: var(--green);
+  box-shadow: 0 0 7px var(--green);
+  animation: pulse-dot 2s ease-in-out infinite;
+}
+
+.device-dot.offline {
+  background: var(--red);
+  box-shadow: 0 0 6px var(--red);
+}
+
+.device-info {
+  display: flex;
+  flex-direction: column;
+  gap: 0.15rem;
+}
+
+.device-name {
+  font-size: 0.9rem;
+  font-weight: 600;
+  color: var(--text);
+}
+
+.device-state {
+  font-size: 0.75rem;
+  font-weight: 500;
+  color: var(--text-dim);
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  transition: color 0.4s ease;
+}
+
+.device-state.online {
+  color: var(--green);
+}
+
+.device-state.offline {
+  color: var(--red);
+}
+
+.device-desc {
+  font-size: 0.68rem;
+  color: var(--text-dim);
+  line-height: 1.35;
+  opacity: 0.75;
+}

rules/waterButtonLearnAndCall.js

@@ -301,6 +301,7 @@ export default {
 startStatusServer({
   getState,
   WATER_BUTTON_MAC,
+  REMOTE_SWITCH_MAC,
   setLight,
   persistedState,
   saveState

waterButtonStatusServer.js

@@ -6,16 +6,45 @@ const STATUS_PORT = 8082;
 export function startStatusServer({
     getState,
     WATER_BUTTON_MAC,
+    REMOTE_SWITCH_MAC,
     setLight,
     persistedState,
     saveState
 }) {
+    async function getButtonOnline() {
+        try {
+            const ctxGetState = global.__waterBotGetState;
+            if (!ctxGetState) return null;
+            const online = await ctxGetState(WATER_BUTTON_MAC, 'system', 'online');
+            // DB stores booleans as strings 'true'/'false'
+            if (online === true || online === 'true') return true;
+            if (online === false || online === 'false') return false;
+            return null;
+        } catch {
+            return null;
+        }
+    }
+
+    async function getValveOnline() {
+        try {
+            const ctxGetState = global.__waterBotGetState;
+            if (!ctxGetState) return null;
+            const online = await ctxGetState(REMOTE_SWITCH_MAC, 'system', 'online');
+            if (online === true || online === 'true') return true;
+            if (online === false || online === 'false') return false;
+            return null;
+        } catch {
+            return null;
+        }
+    }
+
     function getStatusJSON() {
         const state = getState(WATER_BUTTON_MAC);
         return {
             valveOpen: state.timer !== null || (!state.countMode && state.timer === null),
             timerActive: state.timer !== null,
             countMode: state.countMode,
+            countStart: state.countStart || null,
             storedDuration: state.storedDuration,
             timerStartedAt: state.timerStartedAt,
             timerEndsAt: state.timerEndsAt,
@@ -35,6 +64,31 @@ export function startStatusServer({
 <div class="container">
   <h1>💧 Water Timer</h1>
 
+  <div class="devices-row">
+    <div class="device-status">
+      <div class="device-icon-wrap">
+        <img src="/taster.png" class="device-icon" alt="Button">
+        <span class="device-dot" id="device-dot"></span>
+      </div>
+      <div class="device-info">
+        <span class="device-name">Button</span>
+        <span class="device-state" id="device-state">Checking…</span>
+        <span class="device-desc">Short press: run timer &middot; Long press: start learn, short press to stop</span>
+      </div>
+    </div>
+    <div class="device-status">
+      <div class="device-icon-wrap">
+        <img src="/valve.png" class="device-icon" alt="Valve">
+        <span class="device-dot" id="valve-dot"></span>
+      </div>
+      <div class="device-info">
+        <span class="device-name">Valve</span>
+        <span class="device-state" id="valve-state">Checking…</span>
+        <span class="device-desc">⚠️ Connect according to flow direction mark</span>
+      </div>
+    </div>
+  </div>
+
   <div class="ring-wrapper">
     <div class="glow" id="glow"></div>
     <svg class="ring-svg" viewBox="0 0 120 120">
@@ -66,6 +120,7 @@ export function startStatusServer({
         <span class="dur-unit">sec</span>
       </div>
       <button class="btn primary" id="btn-run" onclick="doRun()">▶ Run</button>
+      <button class="btn warning" id="btn-learn" onclick="doLearn()">📐 Learn</button>
     </div>
     <button class="btn success" id="btn-open" onclick="doOpen()">🔓 Open</button>
     <button class="btn danger" id="btn-close" onclick="doClose()">🔒 Close</button>
@@ -81,7 +136,7 @@ export function startStatusServer({
         try { global.__waterStatusServer.close(); } catch (e) { }
     }
 
-    const srv = http.createServer((req, res) => {
+    const srv = http.createServer(async (req, res) => {
         const url = new URL(req.url, `http://${req.headers.host}`);
 
         const jsonHeaders = {
@@ -102,6 +157,32 @@ export function startStatusServer({
             return;
         }
 
+        if (url.pathname === '/taster.png') {
+            res.writeHead(200, { 'Content-Type': 'image/png', 'Cache-Control': 'public, max-age=86400' });
+            res.end(fs.readFileSync(new URL('./public/waterButtonStatus/taster.png', import.meta.url)));
+            return;
+        }
+
+        if (url.pathname === '/api/button-online') {
+            const online = await getButtonOnline();
+            res.writeHead(200, jsonHeaders);
+            res.end(JSON.stringify({ online }));
+            return;
+        }
+
+        if (url.pathname === '/valve.png') {
+            res.writeHead(200, { 'Content-Type': 'image/png', 'Cache-Control': 'public, max-age=86400' });
+            res.end(fs.readFileSync(new URL('./public/waterButtonStatus/valve.png', import.meta.url)));
+            return;
+        }
+
+        if (url.pathname === '/api/valve-online') {
+            const online = await getValveOnline();
+            res.writeHead(200, jsonHeaders);
+            res.end(JSON.stringify({ online }));
+            return;
+        }
+
         if (url.pathname === '/api/status') {
             res.writeHead(200, jsonHeaders);
             res.end(JSON.stringify(getStatusJSON()));
@@ -114,17 +195,55 @@ export function startStatusServer({
             req.on('data', c => body += c);
             req.on('end', async () => {
                 const sendRPC = global.__waterBotRPC;
-
-                // Wait, inside the route we need `state` which uses `getState(WATER_BUTTON_MAC)`
-                // The original code did: const state = getState(WATER_BUTTON_MAC);
                 const state = getState(WATER_BUTTON_MAC);
 
+                // ── Learn / Stop-learn: work regardless of device connection ──
+                if (url.pathname === '/api/learn') {
+                    if (state.timer) { clearTimeout(state.timer); state.timer = null; }
+                    state.timerStartedAt = null;
+                    state.timerEndsAt = null;
+                    state.countMode = true;
+                    state.countStart = Date.now();
+                    if (sendRPC) {
+                        try { await setLight(sendRPC, WATER_BUTTON_MAC, false, 0); } catch (e) {
+                            console.warn('[WaterStatus] learn: setLight failed:', e.message);
+                        }
+                    }
+                    res.writeHead(200, jsonHeaders);
+                    res.end(JSON.stringify({ ok: true, action: 'learn' }));
+                    return;
+                }
+
+                if (url.pathname === '/api/stop-learn') {
+                    if (!state.countMode) {
+                        res.writeHead(200, jsonHeaders);
+                        res.end(JSON.stringify({ ok: true, action: 'stop-learn', skipped: true }));
+                        return;
+                    }
+                    const elapsed = Date.now() - (state.countStart || Date.now());
+                    state.countMode = false;
+                    state.countStart = 0;
+                    state.storedDuration = elapsed;
+                    persistedState[WATER_BUTTON_MAC] = { storedDuration: elapsed };
+                    saveState(persistedState);
+                    if (sendRPC) {
+                        try { await setLight(sendRPC, WATER_BUTTON_MAC, true, 95); } catch (e) {
+                            console.warn('[WaterStatus] stop-learn: setLight failed:', e.message);
+                        }
+                    }
+                    res.writeHead(200, jsonHeaders);
+                    res.end(JSON.stringify({ ok: true, action: 'stop-learn', storedDuration: elapsed }));
+                    return;
+                }
+
+                // ── All other commands require a live device connection ──
                 if (!sendRPC) {
                     res.writeHead(503, jsonHeaders);
                     res.end(JSON.stringify({ ok: false, error: 'Not ready — no device connection' }));
                     return;
                 }
 
+
                 try {
                     if (url.pathname === '/api/run') {
                         if (state.timer) { clearTimeout(state.timer); state.timer = null; }