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

public/waterButtonStatus/script.js

@@ -1,201 +1,271 @@
 const CIRC = 2 * Math.PI * 52;  // ~326.73
-  const ring  = document.getElementById('ring');
-  const cd    = document.getElementById('countdown');
-  const label = document.getElementById('label');
-  const badge = document.getElementById('badge');
-  const badgeTxt = document.getElementById('badge-text');
-  const glow  = document.getElementById('glow');
-  const durInput = document.getElementById('dur-input');
-  const btnRun  = document.getElementById('btn-run');
-  const btnOpen = document.getElementById('btn-open');
-  const btnClose = document.getElementById('btn-close');
+const ring = document.getElementById('ring');
+const cd = document.getElementById('countdown');
+const label = document.getElementById('label');
+const badge = document.getElementById('badge');
+const badgeTxt = document.getElementById('badge-text');
+const glow = document.getElementById('glow');
+const durInput = document.getElementById('dur-input');
+const btnRun = document.getElementById('btn-run');
+const btnLearn = document.getElementById('btn-learn');
+const btnOpen = document.getElementById('btn-open');
+const btnClose = document.getElementById('btn-close');
 
-  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 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) {
+  const s = (ms / 1000).toFixed(1);
+  return s + 's';
+}
+
+let state = null;
+let serverOffset = 0; // server time - client time
+
+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 */ }
+}
+
+function render() {
+  if (!state) return;
+
+  // Sync duration input if user isn't editing it
+  if (document.activeElement !== durInput) {
+    const secs = Math.round(state.storedDuration / 1000);
+    if (durInput.value !== String(secs)) durInput.value = secs;
   }
 
-  function fmtDur(ms) {
-    const s = (ms / 1000).toFixed(1);
-    return s + 's';
+  // Disable controls while timer is running or learning
+  const running = state.timerActive;
+  const learning = state.countMode;
+  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;
+    const serverNow = Date.now() + serverOffset;
+    const remaining = Math.max(0, state.timerEndsAt - serverNow);
+    const progress = total > 0 ? remaining / total : 0;
+
+    ring.style.strokeDashoffset = CIRC * (1 - progress);
+    cd.textContent = fmt(remaining);
+    cd.className = 'countdown';
+    label.textContent = 'REMAINING';
+    badge.className = 'badge running';
+    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 = fmt(elapsed);
+    cd.className = 'countdown';
+    label.textContent = 'LEARNING';
+    badge.className = 'badge counting';
+    badgeTxt.textContent = 'Count Mode';
+    glow.classList.remove('active');
+  } else {
+    ring.style.strokeDashoffset = CIRC;
+    cd.textContent = '—';
+    cd.className = 'countdown idle';
+    label.textContent = 'IDLE';
+    badge.className = 'badge closed';
+    badgeTxt.textContent = 'Idle';
+    glow.classList.remove('active');
+  }
+}
+
+// Quindar tones via Web Audio API
+let audioCtx = null;
+let endBeeped = false;
+let wasTimerActive = false;
+
+function playTone(freq) {
+  if (!audioCtx) audioCtx = new (window.AudioContext || window.webkitAudioContext)();
+  const t = audioCtx.currentTime;
+  const osc = audioCtx.createOscillator();
+  const gain = audioCtx.createGain();
+  osc.type = 'sine';
+  osc.frequency.value = freq;
+  gain.gain.setValueAtTime(0.3, t);
+  gain.gain.setValueAtTime(0.3, t + 0.24);
+  gain.gain.linearRampToValueAtTime(0, t + 0.25);
+  osc.connect(gain);
+  gain.connect(audioCtx.destination);
+  osc.start(t);
+  osc.stop(t + 0.25);
+}
+
+function checkBeep() {
+  if (!state) return;
+  const active = state.timerActive && state.timerStartedAt && state.timerEndsAt;
+
+  // Start tone (2525 Hz) when timer begins
+  if (active && !wasTimerActive) {
+    playTone(2525);
+    endBeeped = false;
   }
 
-  let state = null;
-  let serverOffset = 0; // server time - client time
-
-  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 */ }
-  }
-
-  function render() {
-    if (!state) return;
-
-    // Sync duration input if user isn't editing it
-    if (document.activeElement !== durInput) {
-      const secs = Math.round(state.storedDuration / 1000);
-      if (durInput.value !== String(secs)) durInput.value = secs;
+  // End tone (2475 Hz) at 10s remaining
+  if (active) {
+    const serverNow = Date.now() + serverOffset;
+    const remaining = Math.max(0, state.timerEndsAt - serverNow);
+    if (remaining <= 10000 && remaining > 0 && !endBeeped) {
+      endBeeped = true;
+      playTone(2475);
     }
+  } else {
+    endBeeped = false;
+  }
 
-    // Disable controls while timer is running
-    const running = state.timerActive;
-    btnRun.disabled = running;
-    durInput.disabled = running;
+  wasTimerActive = !!active;
+}
 
-    if (state.timerActive && state.timerStartedAt && state.timerEndsAt) {
-      const total = state.timerEndsAt - state.timerStartedAt;
-      const serverNow = Date.now() + serverOffset;
-      const remaining = Math.max(0, state.timerEndsAt - serverNow);
-      const progress = total > 0 ? remaining / total : 0;
+// ── Wake Lock ──
+let wakeLock = null;
+let lockAcquired = false;
 
-      ring.style.strokeDashoffset = CIRC * (1 - progress);
-      cd.textContent = fmt(remaining);
-      cd.className = 'countdown';
-      label.textContent = 'REMAINING';
-      badge.className = 'badge running';
-      badgeTxt.textContent = 'Timer Running';
-      glow.classList.add('active');
-    } else if (state.countMode) {
-      ring.style.strokeDashoffset = CIRC;
-      cd.textContent = '⏱';
-      cd.className = 'countdown idle';
-      label.textContent = 'LEARNING';
-      badge.className = 'badge counting';
-      badgeTxt.textContent = 'Count Mode';
-      glow.classList.remove('active');
-    } else {
-      ring.style.strokeDashoffset = CIRC;
-      cd.textContent = '—';
-      cd.className = 'countdown idle';
-      label.textContent = 'IDLE';
-      badge.className = 'badge closed';
-      badgeTxt.textContent = 'Idle';
-      glow.classList.remove('active');
+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); }
+}
+
+function releaseWakeLock() {
+  if (wakeLock) { wakeLock.release().catch(() => { }); wakeLock = null; }
+}
+
+document.addEventListener('visibilitychange', () => {
+  if (document.visibilityState === 'visible' && lockAcquired) requestWakeLock();
+});
+
+function checkWakeLock() {
+  if (!state) return;
+  const active = state.timerActive || state.countMode;
+  if (active && !lockAcquired) {
+    requestWakeLock();
+    lockAcquired = true;
+  } else if (!active && lockAcquired) {
+    releaseWakeLock();
+    lockAcquired = false;
   }
+}
 
-  // Quindar tones via Web Audio API
-  let audioCtx = null;
-  let endBeeped = false;
-  let wasTimerActive = false;
+// Poll server every 2s, render locally at 20fps for smooth countdown
+poll();
+setInterval(poll, 2000);
+setInterval(() => { render(); checkBeep(); checkWakeLock(); }, 50);
 
-  function playTone(freq) {
-    if (!audioCtx) audioCtx = new (window.AudioContext || window.webkitAudioContext)();
-    const t = audioCtx.currentTime;
-    const osc = audioCtx.createOscillator();
-    const gain = audioCtx.createGain();
-    osc.type = 'sine';
-    osc.frequency.value = freq;
-    gain.gain.setValueAtTime(0.3, t);
-    gain.gain.setValueAtTime(0.3, t + 0.24);
-    gain.gain.linearRampToValueAtTime(0, t + 0.25);
-    osc.connect(gain);
-    gain.connect(audioCtx.destination);
-    osc.start(t);
-    osc.stop(t + 0.25);
+// ── Control actions ──
+async function apiPost(path, body = {}) {
+  try {
+    const r = await fetch(path, {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify(body)
+    });
+    const d = await r.json();
+    if (!d.ok) console.error('API error:', d.error);
+    await poll();
+  } catch (e) { console.error('API call failed:', e); }
+}
+
+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 checkBeep() {
-    if (!state) return;
-    const active = state.timerActive && state.timerStartedAt && state.timerEndsAt;
+function doOpen() { apiPost('/api/open'); }
+function doClose() { apiPost('/api/close'); }
 
-    // Start tone (2525 Hz) when timer begins
-    if (active && !wasTimerActive) {
-      playTone(2525);
-      endBeeped = false;
-    }
+async function doLearn() { await apiPost('/api/learn'); }
+async function doStopLearn() { await apiPost('/api/stop-learn'); }
 
-    // End tone (2475 Hz) at 10s remaining
-    if (active) {
-      const serverNow = Date.now() + serverOffset;
-      const remaining = Math.max(0, state.timerEndsAt - serverNow);
-      if (remaining <= 10000 && remaining > 0 && !endBeeped) {
-        endBeeped = true;
-        playTone(2475);
-      }
-    } else {
-      endBeeped = false;
-    }
 
-    wasTimerActive = !!active;
+// 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 });
   }
+});
 
-  // ── Wake Lock ──
-  let wakeLock = null;
-  let lockAcquired = false;
-  
-  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); }
+// ── 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';
   }
-  
-  function releaseWakeLock() {
-    if (wakeLock) { wakeLock.release().catch(()=>{}); wakeLock = null; }
+}
+
+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);
   }
-  
-  document.addEventListener('visibilitychange', () => {
-    if (document.visibilityState === 'visible' && lockAcquired) requestWakeLock();
-  });
-  
-  function checkWakeLock() {
-    if (!state) return;
-    const active = state.timerActive || state.countMode;
-    if (active && !lockAcquired) {
-      requestWakeLock();
-      lockAcquired = true;
-    } else if (!active && lockAcquired) {
-      releaseWakeLock();
-      lockAcquired = false;
-    }
+}
+
+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);
   }
+}
 
-  // Poll server every 2s, render locally at 20fps for smooth countdown
-  poll();
-  setInterval(poll, 2000);
-  setInterval(() => { render(); checkBeep(); checkWakeLock(); }, 50);
-
-  // ── Control actions ──
-  async function apiPost(path, body = {}) {
-    try {
-      const r = await fetch(path, {
-        method: 'POST',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify(body)
-      });
-      const d = await r.json();
-      if (!d.ok) console.error('API error:', d.error);
-      await poll();
-    } catch(e) { console.error('API call failed:', e); }
-  }
-
-  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 doClose() { apiPost('/api/close'); }
-
-  // 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 });
-    }
-  });
+pollButtonOnline();
+pollValveOnline();
+setInterval(pollButtonOnline, 10000);
+setInterval(pollValveOnline, 10000);

public/waterButtonStatus/style.css

@@ -1,315 +1,437 @@
 @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 {
-    --bg: #0a0e1a;
-    --surface: #131829;
-    --border: rgba(255,255,255,0.06);
-    --text: #e2e8f0;
-    --text-dim: #64748b;
-    --blue: #3b82f6;
-    --cyan: #06b6d4;
-    --green: #22c55e;
-    --red: #ef4444;
-    --orange: #f59e0b;
-  }
+:root {
+  --bg: #0a0e1a;
+  --surface: #131829;
+  --border: rgba(255, 255, 255, 0.06);
+  --text: #e2e8f0;
+  --text-dim: #64748b;
+  --blue: #3b82f6;
+  --cyan: #06b6d4;
+  --green: #22c55e;
+  --red: #ef4444;
+  --orange: #f59e0b;
+}
 
-  body {
-    font-family: 'Inter', -apple-system, sans-serif;
-    background: var(--bg);
-    color: var(--text);
-    min-height: 100dvh;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    padding: 1.5rem;
-    overflow: hidden;
-  }
+body {
+  font-family: 'Inter', -apple-system, sans-serif;
+  background: var(--bg);
+  color: var(--text);
+  min-height: 100dvh;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 1.5rem;
+  overflow: hidden;
+}
 
-  .container {
-    width: 100%;
-    max-width: 380px;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    gap: 2rem;
-  }
+.container {
+  width: 100%;
+  max-width: 380px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 2rem;
+}
 
-  h1 {
-    font-size: 1.1rem;
-    font-weight: 600;
-    letter-spacing: 0.05em;
-    text-transform: uppercase;
-    color: var(--text-dim);
-  }
+h1 {
+  font-size: 1.1rem;
+  font-weight: 600;
+  letter-spacing: 0.05em;
+  text-transform: uppercase;
+  color: var(--text-dim);
+}
 
-  /* ── Progress Ring ── */
-  .ring-wrapper {
-    position: relative;
-    width: 260px;
-    height: 260px;
-  }
+/* ── Progress Ring ── */
+.ring-wrapper {
+  position: relative;
+  width: 260px;
+  height: 260px;
+}
 
-  .ring-svg {
-    width: 100%;
-    height: 100%;
-    transform: rotate(-90deg);
-  }
+.ring-svg {
+  width: 100%;
+  height: 100%;
+  transform: rotate(-90deg);
+}
 
-  .ring-bg {
-    fill: none;
-    stroke: var(--border);
-    stroke-width: 8;
-  }
+.ring-bg {
+  fill: none;
+  stroke: var(--border);
+  stroke-width: 8;
+}
 
-  .ring-fg {
-    fill: none;
-    stroke: url(#grad);
-    stroke-width: 8;
-    stroke-linecap: round;
-    transition: stroke-dashoffset 0.4s ease;
-  }
+.ring-fg {
+  fill: none;
+  stroke: url(#grad);
+  stroke-width: 8;
+  stroke-linecap: round;
+  transition: stroke-dashoffset 0.4s ease;
+}
 
-  .ring-center {
-    position: absolute;
-    inset: 0;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    gap: 0.3rem;
-  }
+.ring-center {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 0.3rem;
+}
 
-  .countdown {
-    font-size: 3.2rem;
-    font-weight: 700;
-    font-variant-numeric: tabular-nums;
-    line-height: 1;
-    background: linear-gradient(135deg, var(--blue), var(--cyan));
-    -webkit-background-clip: text;
-    -webkit-text-fill-color: transparent;
-    background-clip: text;
-  }
+.countdown {
+  font-size: 3.2rem;
+  font-weight: 700;
+  font-variant-numeric: tabular-nums;
+  line-height: 1;
+  background: linear-gradient(135deg, var(--blue), var(--cyan));
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+}
 
-  .countdown.idle {
-    font-size: 1.6rem;
-    background: none;
-    -webkit-text-fill-color: var(--text-dim);
-  }
+.countdown.idle {
+  font-size: 1.6rem;
+  background: none;
+  -webkit-text-fill-color: var(--text-dim);
+}
 
-  .countdown-label {
-    font-size: 0.75rem;
-    font-weight: 500;
-    text-transform: uppercase;
-    letter-spacing: 0.1em;
-    color: var(--text-dim);
-  }
+.countdown-label {
+  font-size: 0.75rem;
+  font-weight: 500;
+  text-transform: uppercase;
+  letter-spacing: 0.1em;
+  color: var(--text-dim);
+}
 
-  /* ── Status Badge ── */
-  .badge {
-    display: inline-flex;
-    align-items: center;
-    gap: 0.5rem;
-    padding: 0.6rem 1.4rem;
-    border-radius: 100px;
-    font-size: 0.85rem;
-    font-weight: 600;
-    letter-spacing: 0.02em;
-    border: 1px solid var(--border);
-    background: var(--surface);
-  }
+/* ── Status Badge ── */
+.badge {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.6rem 1.4rem;
+  border-radius: 100px;
+  font-size: 0.85rem;
+  font-weight: 600;
+  letter-spacing: 0.02em;
+  border: 1px solid var(--border);
+  background: var(--surface);
+}
 
-  .badge .dot {
-    width: 10px;
-    height: 10px;
-    border-radius: 50%;
-    flex-shrink: 0;
-  }
+.badge .dot {
+  width: 10px;
+  height: 10px;
+  border-radius: 50%;
+  flex-shrink: 0;
+}
 
-  .badge.running .dot {
-    background: var(--cyan);
-    box-shadow: 0 0 8px var(--cyan);
-    animation: pulse-dot 1.5s ease-in-out infinite;
-  }
+.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 {
-    background: var(--green);
-    box-shadow: 0 0 8px var(--green);
-  }
+.badge.open .dot {
+  background: var(--green);
+  box-shadow: 0 0 8px var(--green);
+}
 
-  .badge.closed .dot {
-    background: var(--red);
-    box-shadow: 0 0 6px var(--red);
-  }
+.badge.closed .dot {
+  background: var(--red);
+  box-shadow: 0 0 6px var(--red);
+}
 
-  .badge.counting .dot {
-    background: var(--orange);
-    box-shadow: 0 0 8px var(--orange);
-    animation: pulse-dot 0.8s ease-in-out infinite;
-  }
+.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; }
-    50% { opacity: 0.4; }
-  }
+@keyframes pulse-dot {
 
-  /* ── Info row ── */
-  .info {
-    display: flex;
-    gap: 1.5rem;
-  }
-
-  .info-item {
-    text-align: center;
-  }
-
-  .info-value {
-    font-size: 1.3rem;
-    font-weight: 600;
-    font-variant-numeric: tabular-nums;
-  }
-
-  .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 {
-    position: absolute;
-    inset: 20px;
-    border-radius: 50%;
-    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 {
+  0%,
+  100% {
     opacity: 1;
   }
 
-  /* ── Controls ── */
-  .controls {
-    display: flex;
-    gap: 0.6rem;
-    width: 100%;
-    justify-content: center;
-    flex-wrap: wrap;
+  50% {
+    opacity: 0.4;
   }
+}
 
-  .run-container {
-    display: flex;
-    width: 100%;
-    gap: 0.6rem;
-  }
+/* ── Info row ── */
+.info {
+  display: flex;
+  gap: 1.5rem;
+}
 
-  #btn-run {
-    flex-grow: 1;
-    font-size: 1.4rem;
-    padding: 1.2rem;
-  }
+.info-item {
+  text-align: center;
+}
 
-  .btn {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    gap: 0.4rem;
-    padding: 0.65rem 1.2rem;
-    border-radius: 12px;
-    border: 1px solid var(--border);
-    background: var(--surface);
-    color: var(--text);
-    font-family: inherit;
-    font-size: 0.82rem;
-    font-weight: 600;
-    cursor: pointer;
-    transition: all 0.15s ease;
-    user-select: none;
-    -webkit-tap-highlight-color: transparent;
-  }
+.info-value {
+  font-size: 1.3rem;
+  font-weight: 600;
+  font-variant-numeric: tabular-nums;
+}
 
-  .btn:hover {
-    background: rgba(59,130,246,0.12);
-    border-color: var(--blue);
-  }
+.info-label {
+  font-size: 0.7rem;
+  color: var(--text-dim);
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  margin-top: 0.15rem;
+}
 
-  .btn:active {
-    transform: scale(0.96);
-  }
+/* ── Glow effect behind ring ── */
+.glow {
+  position: absolute;
+  inset: 20px;
+  border-radius: 50%;
+  background: radial-gradient(circle, rgba(6, 182, 212, 0.12) 0%, transparent 70%);
+  opacity: 0;
+  transition: opacity 0.6s ease;
+  pointer-events: none;
+}
 
-  .btn.primary {
-    background: linear-gradient(135deg, var(--blue), var(--cyan));
-    border-color: transparent;
-    color: #fff;
-  }
+.glow.active {
+  opacity: 1;
+}
 
-  .btn.primary:hover {
-    filter: brightness(1.15);
-    background: linear-gradient(135deg, var(--blue), var(--cyan));
-  }
+/* ── Controls ── */
+.controls {
+  display: flex;
+  gap: 0.6rem;
+  width: 100%;
+  justify-content: center;
+  flex-wrap: wrap;
+}
 
-  .btn.danger {
-    border-color: rgba(239,68,68,0.3);
-  }
+.run-container {
+  display: flex;
+  width: 100%;
+  gap: 0.6rem;
+}
 
-  .btn.danger:hover {
-    background: rgba(239,68,68,0.15);
-    border-color: var(--red);
-  }
+#btn-run {
+  flex-grow: 1;
+  font-size: 1.4rem;
+  padding: 1.2rem;
+}
 
-  .btn.success {
-    border-color: rgba(34,197,94,0.3);
-  }
+.btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.4rem;
+  padding: 0.65rem 1.2rem;
+  border-radius: 12px;
+  border: 1px solid var(--border);
+  background: var(--surface);
+  color: var(--text);
+  font-family: inherit;
+  font-size: 0.82rem;
+  font-weight: 600;
+  cursor: pointer;
+  transition: all 0.15s ease;
+  user-select: none;
+  -webkit-tap-highlight-color: transparent;
+}
 
-  .btn.success:hover {
-    background: rgba(34,197,94,0.15);
-    border-color: var(--green);
-  }
+.btn:hover {
+  background: rgba(59, 130, 246, 0.12);
+  border-color: var(--blue);
+}
 
-  .btn:disabled {
-    opacity: 0.45;
-    pointer-events: none;
-  }
+.btn:active {
+  transform: scale(0.96);
+}
 
-  .dur-input-group {
-    display: flex;
-    align-items: center;
-    gap: 0.4rem;
-    background: var(--surface);
-    border: 1px solid var(--border);
-    border-radius: 12px;
-    padding: 0 0.8rem;
-    transition: border-color 0.15s ease;
-  }
+.btn.primary {
+  background: linear-gradient(135deg, var(--blue), var(--cyan));
+  border-color: transparent;
+  color: #fff;
+}
 
-  .dur-input-group:focus-within {
-    border-color: var(--blue);
-  }
+.btn.primary:hover {
+  filter: brightness(1.15);
+  background: linear-gradient(135deg, var(--blue), var(--cyan));
+}
 
-  .dur-input {
-    width: 64px;
-    background: transparent;
-    border: none;
-    color: var(--text);
-    font-family: inherit;
-    font-size: 1.2rem;
-    font-weight: 600;
-    font-variant-numeric: tabular-nums;
-    padding: 0.8rem 0;
-    outline: none;
-    text-align: right;
-  }
+.btn.danger {
+  border-color: rgba(239, 68, 68, 0.3);
+}
 
-  .dur-input::-webkit-inner-spin-button { opacity: 0.3; }
+.btn.danger:hover {
+  background: rgba(239, 68, 68, 0.15);
+  border-color: var(--red);
+}
 
-  .dur-unit {
-    font-size: 0.85rem;
-    color: var(--text-dim);
-    font-weight: 500;
-  }
+.btn.warning {
+  border-color: rgba(245, 158, 11, 0.35);
+  color: var(--orange);
+}
+
+.btn.warning:hover {
+  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 {
+  opacity: 0.45;
+  pointer-events: none;
+}
+
+.dur-input-group {
+  display: flex;
+  align-items: center;
+  gap: 0.4rem;
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: 12px;
+  padding: 0 0.8rem;
+  transition: border-color 0.15s ease;
+}
+
+.dur-input-group:focus-within {
+  border-color: var(--blue);
+}
+
+.dur-input {
+  width: 64px;
+  background: transparent;
+  border: none;
+  color: var(--text);
+  font-family: inherit;
+  font-size: 1.2rem;
+  font-weight: 600;
+  font-variant-numeric: tabular-nums;
+  padding: 0.8rem 0;
+  outline: none;
+  text-align: right;
+}
+
+.dur-input::-webkit-inner-spin-button {
+  opacity: 0.3;
+}
+
+.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;
+}