Delete public

public/admin/index.html

@@ -1,190 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-  <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>DISPATCH // Admin</title>
-  <link rel="stylesheet" href="/admin/style.css" />
-</head>
-<body>
-  <div id="root">
-
-    <!-- ── LOGIN SCREEN ── -->
-    <div id="login-screen">
-      <div id="login-box">
-        <div id="login-logo">DISPATCH</div>
-        <div id="login-subtitle">ADMIN ACCESS</div>
-        <div id="login-form">
-          <div class="form-group">
-            <label for="login-password">ACCESS KEY</label>
-            <input id="login-password" type="password" placeholder="Enter key..." autocomplete="current-password" />
-          </div>
-          <div id="login-error"></div>
-          <button id="login-btn" class="btn-create">AUTHENTICATE</button>
-        </div>
-        <div id="login-connecting" style="display:none">
-          <div class="spinner"></div>
-          <span>Connecting...</span>
-        </div>
-      </div>
-    </div>
-
-    <!-- ── MAIN APP (hidden until authenticated) ── -->
-    <div id="app" style="display:none">
-
-      <!-- Top Bar -->
-      <header id="topbar">
-        <div id="topbar-logo">DISPATCH</div>
-        <div id="topbar-status">
-          <span id="ws-indicator" class="indicator offline"></span>
-          <span id="ws-label">OFFLINE</span>
-          <button id="logout-btn" class="btn-logout">LOGOUT</button>
-        </div>
-      </header>
-
-      <!-- Tabs -->
-      <nav id="tabs">
-        <button class="tab-btn active" data-tab="notifications">NOTIFICATIONS</button>
-        <button class="tab-btn" data-tab="devices">DEVICES</button>
-      </nav>
-
-      <!-- ── NOTIFICATIONS TAB ── -->
-      <div id="tab-notifications" class="tab-panel active">
-        <div id="notif-layout">
-
-          <!-- LEFT: Create Notification Form -->
-          <aside id="create-panel">
-            <h2 class="panel-title">NEW NOTIFICATION</h2>
-            <div class="form-group">
-              <label for="f-name">Internal Name</label>
-              <input id="f-name" type="text" placeholder="e.g. promo-sept-24" />
-            </div>
-            <div class="form-group">
-              <label for="f-heading">Heading</label>
-              <input id="f-heading" type="text" placeholder="Notification heading" />
-            </div>
-            <div class="form-group">
-              <label for="f-body">Body</label>
-              <textarea id="f-body" rows="4" placeholder="Notification body text..."></textarea>
-            </div>
-            <div class="form-group">
-              <label for="f-hyperlink">Hyperlink</label>
-              <input id="f-hyperlink" type="url" placeholder="https://..." />
-            </div>
-            <div class="form-group">
-              <label for="f-sound">Sound</label>
-              <select id="f-sound">
-                <option value="">— No Sound —</option>
-              </select>
-            </div>
-            <div class="form-group">
-              <label>Upload Sound File</label>
-              <div id="sound-upload-area">
-                <input id="f-sound-file" type="file" accept="audio/*" hidden />
-                <button id="sound-upload-btn" class="btn-outline" type="button">▲ UPLOAD AUDIO</button>
-                <span id="sound-file-name">No file chosen</span>
-              </div>
-              <input id="f-sound-name" type="text" placeholder="Sound name (required for upload)" style="margin-top:8px" />
-            </div>
-            <button id="create-notif-btn" class="btn-create">CREATE NOTIFICATION</button>
-          </aside>
-
-          <!-- MIDDLE: Notification List -->
-          <main id="notif-list-panel">
-            <h2 class="panel-title">ALL NOTIFICATIONS <span id="notif-count" class="badge">0</span></h2>
-            <div id="notif-list">
-              <div class="empty-state">No notifications yet.</div>
-            </div>
-          </main>
-
-          <!-- RIGHT: Schedule Panel -->
-          <section id="schedule-panel">
-            <div id="schedule-empty-state">
-              <div class="select-hint">
-                <div class="select-hint-icon">◎</div>
-                <p>Select a notification<br>to schedule or play it</p>
-              </div>
-            </div>
-            <div id="schedule-active" style="display:none">
-              <div id="selected-notif-info">
-                <div id="selected-notif-name"></div>
-              </div>
-              <button id="play-now-btn" title="Play Now"><span>▶ PLAY NOW</span></button>
-              <div id="schedule-controls">
-                <div class="toggle-row">
-                  <label class="toggle-label" for="now-toggle">NOW</label>
-                  <label class="toggle-switch">
-                    <input type="checkbox" id="now-toggle" />
-                    <span class="toggle-track"><span class="toggle-thumb"></span></span>
-                  </label>
-                </div>
-                <div id="datetime-pickers">
-                  <div class="picker-group">
-                    <label>DATE</label>
-                    <input type="date" id="sched-date" />
-                  </div>
-                  <div class="picker-group">
-                    <label>TIME</label>
-                    <input type="time" id="sched-time" />
-                  </div>
-                </div>
-                <button id="schedule-btn" class="btn-schedule">SCHEDULE</button>
-              </div>
-            </div>
-          </section>
-
-        </div>
-      </div>
-
-      <!-- ── DEVICES TAB ── -->
-      <div id="tab-devices" class="tab-panel">
-        <div id="devices-layout">
-          <aside id="device-list-panel">
-            <h2 class="panel-title">DEVICES <span id="device-count" class="badge">0</span></h2>
-            <div id="device-list">
-              <div class="empty-state">No devices connected yet.</div>
-            </div>
-          </aside>
-          <main id="device-detail-panel">
-            <div id="device-empty-state" class="select-hint">
-              <div class="select-hint-icon">◉</div>
-              <p>Select a device<br>to manage it</p>
-            </div>
-            <div id="device-detail" style="display:none">
-              <div id="device-header">
-                <div id="device-status-indicator" class="indicator"></div>
-                <div>
-                  <div id="detail-device-name-display" class="device-detail-name"></div>
-                  <div id="detail-device-uuid" class="device-detail-uuid"></div>
-                </div>
-                <div id="device-name-edit-area">
-                  <input id="device-name-input" type="text" placeholder="Device name..." />
-                  <button id="device-name-save" class="btn-sm">SAVE NAME</button>
-                </div>
-              </div>
-              <div id="device-sections">
-                <div class="device-section">
-                  <h3>CACHED SOUNDS</h3>
-                  <div id="detail-sounds" class="tag-list"></div>
-                </div>
-                <div class="device-section">
-                  <h3>NOTIFICATIONS</h3>
-                  <div id="detail-notifications" class="notif-table-wrap"></div>
-                </div>
-                <div class="device-section">
-                  <h3>SCHEDULE</h3>
-                  <div id="detail-schedule" class="schedule-table-wrap"></div>
-                </div>
-              </div>
-            </div>
-          </main>
-        </div>
-      </div>
-
-    </div><!-- /#app -->
-
-  </div><!-- /#root -->
-
-  <script src="/admin/script.js"></script>
-</body>
-</html>

public/admin/script.js

@@ -1,522 +0,0 @@
-// ─── DISPATCH Admin Script ────────────────────────────────────────────────────
-
-const SESSION_KEY = 'dispatch_session_token';
-
-// ─── State ────────────────────────────────────────────────────────────────────
-let state = {
-  sounds: [],
-  notifications: [],
-  devices: [],
-};
-
-let selectedNotifId = null;
-let selectedDeviceUUID = null;
-let nowIntervalId = null;
-let pendingSoundFile = null;
-
-let ws = null;
-let reconnectTimer = null;
-let authenticated = false;
-
-// ─── UI Refs ──────────────────────────────────────────────────────────────────
-const loginScreen  = document.getElementById('login-screen');
-const appEl        = document.getElementById('app');
-const loginBtn     = document.getElementById('login-btn');
-const loginPwInput = document.getElementById('login-password');
-const loginError   = document.getElementById('login-error');
-const loginForm    = document.getElementById('login-form');
-const loginConnecting = document.getElementById('login-connecting');
-
-// ─── Auth Helpers ─────────────────────────────────────────────────────────────
-function getToken() { return sessionStorage.getItem(SESSION_KEY); }
-function setToken(t) { sessionStorage.setItem(SESSION_KEY, t); }
-function clearToken() { sessionStorage.removeItem(SESSION_KEY); }
-
-function showApp() {
-  loginScreen.style.display = 'none';
-  appEl.style.display = 'block';
-  authenticated = true;
-}
-
-function showLogin(errorMsg) {
-  appEl.style.display = 'none';
-  loginScreen.style.display = 'flex';
-  authenticated = false;
-  loginForm.style.display = 'block';
-  loginConnecting.style.display = 'none';
-  loginPwInput.value = '';
-  loginError.textContent = errorMsg || '';
-}
-
-function setLoginLoading(loading) {
-  loginForm.style.display = loading ? 'none' : 'block';
-  loginConnecting.style.display = loading ? 'flex' : 'none';
-}
-
-// ─── WebSocket ────────────────────────────────────────────────────────────────
-function connect() {
-  clearTimeout(reconnectTimer);
-  const proto = location.protocol === 'https:' ? 'wss' : 'ws';
-  ws = new WebSocket(`${proto}://${location.host}/admin-ws`);
-
-  ws.addEventListener('open', () => {
-    // Server will immediately send auth_required; we respond appropriately
-  });
-
-  ws.addEventListener('message', (e) => {
-    let msg;
-    try { msg = JSON.parse(e.data); } catch { return; }
-    handleMessage(msg);
-  });
-
-  ws.addEventListener('close', () => {
-    if (authenticated) {
-      setIndicator(false);
-      // Try to reconnect silently — session token is still in sessionStorage
-      reconnectTimer = setTimeout(connect, 3000);
-    }
-  });
-
-  ws.addEventListener('error', () => ws.close());
-}
-
-function send(msg) {
-  if (ws && ws.readyState === WebSocket.OPEN) ws.send(JSON.stringify(msg));
-}
-
-// ─── Message Handling ─────────────────────────────────────────────────────────
-function handleMessage(msg) {
-  switch (msg.type) {
-
-    case 'auth_required': {
-      // Server is asking us to authenticate
-      const token = getToken();
-      if (token) {
-        // Try to resume existing session
-        setLoginLoading(true);
-        send({ type: 'auth_resume', token });
-      } else {
-        // Show login form
-        showLogin();
-      }
-      break;
-    }
-
-    case 'auth_ok': {
-      setToken(msg.token);
-      showApp();
-      setIndicator(true);
-      break;
-    }
-
-    case 'auth_error': {
-      clearToken();
-      showLogin(msg.reason || 'Authentication failed.');
-      break;
-    }
-
-    case 'auth_timeout': {
-      clearToken();
-      showLogin('Connection timed out. Please try again.');
-      break;
-    }
-
-    case 'full_state': {
-      state.sounds = msg.sounds || [];
-      state.notifications = msg.notifications || [];
-      state.devices = msg.devices || [];
-      renderAll();
-      break;
-    }
-
-    case 'sound_added': {
-      if (!state.sounds.find(s => s.id === msg.sound.id)) state.sounds.push(msg.sound);
-      updateSoundSelect();
-      break;
-    }
-
-    case 'notification_added': {
-      if (!state.notifications.find(n => n.id === msg.notification.id))
-        state.notifications.push(msg.notification);
-      renderNotifList();
-      updateNotifCount();
-      toast('Notification created', 'success');
-      break;
-    }
-
-    case 'devices_updated': {
-      state.devices = msg.devices || [];
-      renderDeviceList();
-      updateDeviceCount();
-      if (selectedDeviceUUID) {
-        const d = state.devices.find(d => d.uuid === selectedDeviceUUID);
-        if (d) renderDeviceDetail(d);
-      }
-      break;
-    }
-
-    case 'sound_data': {
-      const existing = state.sounds.find(s => s.id === msg.sound.id);
-      if (existing) { existing.data = msg.sound.data; }
-      else { state.sounds.push(msg.sound); }
-      break;
-    }
-
-    default: break;
-  }
-}
-
-// ─── Login Form ───────────────────────────────────────────────────────────────
-loginBtn.addEventListener('click', doLogin);
-loginPwInput.addEventListener('keydown', (e) => { if (e.key === 'Enter') doLogin(); });
-
-function doLogin() {
-  const password = loginPwInput.value;
-  if (!password) { loginError.textContent = 'Enter a password.'; return; }
-  loginError.textContent = '';
-  setLoginLoading(true);
-  // If WS is not open yet, connect first then send on open
-  if (!ws || ws.readyState !== WebSocket.OPEN) {
-    connect();
-    // wait for auth_required, then it will show login — but we want to auto-submit
-    // Store the password to auto-submit after connection
-    ws.addEventListener('open', () => {
-      // auth_required will trigger from server, which will show login again
-      // Instead, wait for auth_required then send login directly
-    }, { once: true });
-    // Override: on auth_required from a fresh connect after user clicked login,
-    // send the login immediately
-    const originalHandler = ws.onmessage;
-    ws.addEventListener('message', function onFirstMsg(e) {
-      let msg;
-      try { msg = JSON.parse(e.data); } catch { return; }
-      if (msg.type === 'auth_required') {
-        ws.removeEventListener('message', onFirstMsg);
-        send({ type: 'auth_login', password });
-      }
-    });
-  } else {
-    send({ type: 'auth_login', password });
-  }
-}
-
-// ─── Logout ───────────────────────────────────────────────────────────────────
-document.getElementById('logout-btn').addEventListener('click', () => {
-  clearToken();
-  authenticated = false;
-  clearTimeout(reconnectTimer);
-  if (ws) ws.close();
-  showLogin();
-});
-
-// ─── Render All ───────────────────────────────────────────────────────────────
-function renderAll() {
-  updateSoundSelect();
-  renderNotifList();
-  updateNotifCount();
-  renderDeviceList();
-  updateDeviceCount();
-  if (selectedNotifId) {
-    const n = state.notifications.find(n => n.id === selectedNotifId);
-    if (!n) selectedNotifId = null;
-    else showSchedulePanel(n);
-  }
-}
-
-// ─── Notifications ────────────────────────────────────────────────────────────
-function renderNotifList() {
-  const list = document.getElementById('notif-list');
-  if (!state.notifications.length) {
-    list.innerHTML = '<div class="empty-state">No notifications yet.</div>';
-    return;
-  }
-  list.innerHTML = state.notifications.map(n => {
-    const sound = n.soundId ? state.sounds.find(s => s.id === n.soundId) : null;
-    const sel = n.id === selectedNotifId ? 'selected' : '';
-    return `
-      <div class="notif-item ${sel}" data-id="${n.id}">
-        <div class="notif-item-name">${esc(n.name)}</div>
-        <div class="notif-item-heading">${esc(n.heading)}</div>
-        <div class="notif-item-body">${esc(n.body)}</div>
-        ${sound ? `<span class="notif-item-sound">♪ ${esc(sound.name)}</span>` : ''}
-      </div>`;
-  }).join('');
-
-  list.querySelectorAll('.notif-item').forEach(el => {
-    el.addEventListener('click', () => {
-      selectedNotifId = el.dataset.id;
-      list.querySelectorAll('.notif-item').forEach(e => e.classList.remove('selected'));
-      el.classList.add('selected');
-      const notif = state.notifications.find(n => n.id === selectedNotifId);
-      if (notif) showSchedulePanel(notif);
-    });
-  });
-}
-
-function updateNotifCount() {
-  document.getElementById('notif-count').textContent = state.notifications.length;
-}
-
-function updateSoundSelect() {
-  const sel = document.getElementById('f-sound');
-  const current = sel.value;
-  sel.innerHTML = '<option value="">— No Sound —</option>' +
-    state.sounds.map(s => `<option value="${s.id}">${esc(s.name)}</option>`).join('');
-  if (current) sel.value = current;
-}
-
-// ─── Schedule Panel ───────────────────────────────────────────────────────────
-function showSchedulePanel(notif) {
-  document.getElementById('schedule-empty-state').style.display = 'none';
-  const active = document.getElementById('schedule-active');
-  active.style.display = 'flex';
-  active.style.flexDirection = 'column';
-  document.getElementById('selected-notif-name').textContent = notif.heading || notif.name;
-  setDateTimeToNow();
-}
-
-function setDateTimeToNow() {
-  const now = new Date();
-  document.getElementById('sched-date').value = now.toISOString().slice(0, 10);
-  document.getElementById('sched-time').value = now.toTimeString().slice(0, 5);
-}
-
-// ─── Devices ──────────────────────────────────────────────────────────────────
-function renderDeviceList() {
-  const list = document.getElementById('device-list');
-  if (!state.devices.length) {
-    list.innerHTML = '<div class="empty-state">No devices yet.</div>';
-    return;
-  }
-  list.innerHTML = state.devices.map(d => {
-    const sel = d.uuid === selectedDeviceUUID ? 'selected' : '';
-    const lastConn = d.lastConnection ? `Last seen ${timeSince(d.lastConnection)}` : 'Active now';
-    return `
-      <div class="device-item ${sel}" data-uuid="${d.uuid}">
-        <span class="indicator ${d.online ? 'online' : 'offline'}"></span>
-        <div class="device-item-info">
-          <div class="device-item-name">${esc(d.name)}</div>
-          <div class="device-item-uuid">${d.uuid.slice(0,18)}…</div>
-          <div class="device-item-last">${lastConn}</div>
-        </div>
-      </div>`;
-  }).join('');
-
-  list.querySelectorAll('.device-item').forEach(el => {
-    el.addEventListener('click', () => {
-      selectedDeviceUUID = el.dataset.uuid;
-      list.querySelectorAll('.device-item').forEach(e => e.classList.remove('selected'));
-      el.classList.add('selected');
-      const d = state.devices.find(d => d.uuid === selectedDeviceUUID);
-      if (d) renderDeviceDetail(d);
-    });
-  });
-}
-
-function updateDeviceCount() {
-  document.getElementById('device-count').textContent = state.devices.length;
-}
-
-function renderDeviceDetail(device) {
-  document.getElementById('device-empty-state').style.display = 'none';
-  const detail = document.getElementById('device-detail');
-  detail.style.display = 'block';
-
-  document.getElementById('detail-device-name-display').textContent = device.name;
-  document.getElementById('detail-device-uuid').textContent = device.uuid;
-  document.getElementById('device-name-input').value = device.name;
-  document.getElementById('device-status-indicator').className = `indicator ${device.online ? 'online' : 'offline'}`;
-
-  // Cached sounds
-  const soundsEl = document.getElementById('detail-sounds');
-  const cached = device.cachedSounds || [];
-  soundsEl.innerHTML = !cached.length
-    ? '<span style="color:var(--text-dimmer);font-size:12px">None cached</span>'
-    : cached.map(sid => {
-        const sound = state.sounds.find(s => s.id === sid);
-        return `<span class="tag"><span class="tag-dot"></span>${esc(sound ? sound.name : sid.slice(0,8))}</span>`;
-      }).join('');
-
-  // Notifications table
-  const notifsEl = document.getElementById('detail-notifications');
-  const deviceNotifs = device.notifications || [];
-  notifsEl.innerHTML = !deviceNotifs.length
-    ? '<div class="empty-state" style="padding:20px 0">No notifications</div>'
-    : `<table class="data-table"><thead><tr><th>NAME</th><th>HEADING</th><th>DISPLAYED</th></tr></thead><tbody>
-        ${deviceNotifs.map(n => `<tr>
-          <td>${esc(n.name)}</td><td>${esc(n.heading)}</td>
-          <td style="color:${n.displayed ? 'var(--green)' : 'var(--text-dimmer)'}">${n.displayed ? '✓ YES' : '— NO'}</td>
-        </tr>`).join('')}
-      </tbody></table>`;
-
-  // Schedule table
-  const schedEl = document.getElementById('detail-schedule');
-  const schedule = device.schedule || [];
-  if (!schedule.length) {
-    schedEl.innerHTML = '<div class="empty-state" style="padding:20px 0">No scheduled notifications</div>';
-  } else {
-    schedEl.innerHTML = `<table class="data-table"><thead><tr><th>NOTIFICATION</th><th>SCHEDULED FOR</th><th>ACTION</th></tr></thead><tbody>
-      ${schedule.map(entry => {
-        const notif = state.notifications.find(n => n.id === entry.notificationId);
-        const name = notif ? (notif.heading || notif.name) : entry.notificationId.slice(0,8);
-        return `<tr>
-          <td>${esc(name)}</td>
-          <td>${new Date(entry.scheduledAt).toLocaleString()}</td>
-          <td><button class="action-btn" data-uuid="${device.uuid}" data-nid="${entry.notificationId}">REMOVE</button></td>
-        </tr>`;
-      }).join('')}
-    </tbody></table>`;
-    schedEl.querySelectorAll('.action-btn').forEach(btn => {
-      btn.addEventListener('click', () => {
-        send({ type: 'remove_schedule', uuid: btn.dataset.uuid, notificationId: btn.dataset.nid });
-        toast('Schedule entry removed');
-      });
-    });
-  }
-}
-
-// ─── Create Notification ──────────────────────────────────────────────────────
-document.getElementById('create-notif-btn').addEventListener('click', () => {
-  const name      = document.getElementById('f-name').value.trim();
-  const heading   = document.getElementById('f-heading').value.trim();
-  const body      = document.getElementById('f-body').value.trim();
-  const hyperlink = document.getElementById('f-hyperlink').value.trim();
-  const soundId   = document.getElementById('f-sound').value;
-
-  if (!name || !heading) { toast('Name and Heading are required', 'error'); return; }
-
-  if (pendingSoundFile) {
-    const { soundName, data } = pendingSoundFile;
-    if (!soundName) { toast('Enter a name for the sound', 'error'); return; }
-    send({ type: 'create_sound', name: soundName, data });
-    pendingSoundFile = null;
-    document.getElementById('sound-file-name').textContent = 'No file chosen';
-    document.getElementById('f-sound-name').value = '';
-    toast('Sound uploaded — select it in the dropdown, then create the notification.', 'success');
-    return;
-  }
-
-  send({ type: 'create_notification', name, heading, body, hyperlink, soundId: soundId || null });
-  document.getElementById('f-name').value = '';
-  document.getElementById('f-heading').value = '';
-  document.getElementById('f-body').value = '';
-  document.getElementById('f-hyperlink').value = '';
-  document.getElementById('f-sound').value = '';
-});
-
-document.getElementById('sound-upload-btn').addEventListener('click', () => {
-  document.getElementById('f-sound-file').click();
-});
-
-document.getElementById('f-sound-file').addEventListener('change', (e) => {
-  const file = e.target.files[0];
-  if (!file) return;
-  document.getElementById('sound-file-name').textContent = file.name;
-  const reader = new FileReader();
-  reader.onload = (evt) => {
-    const base64 = evt.target.result.split(',')[1];
-    const soundName = document.getElementById('f-sound-name').value.trim() || file.name;
-    pendingSoundFile = { soundName, data: base64 };
-  };
-  reader.readAsDataURL(file);
-});
-
-document.getElementById('f-sound-name').addEventListener('input', () => {
-  if (pendingSoundFile) pendingSoundFile.soundName = document.getElementById('f-sound-name').value.trim();
-});
-
-// ─── Play Now ─────────────────────────────────────────────────────────────────
-document.getElementById('play-now-btn').addEventListener('click', () => {
-  if (!selectedNotifId) return;
-  for (const device of state.devices) {
-    send({ type: 'play_now', uuid: device.uuid, notificationId: selectedNotifId });
-  }
-  toast('▶ Sent to all devices', 'success');
-});
-
-// ─── Now Toggle ───────────────────────────────────────────────────────────────
-document.getElementById('now-toggle').addEventListener('change', (e) => {
-  if (e.target.checked) {
-    setDateTimeToNow();
-    nowIntervalId = setInterval(setDateTimeToNow, 1000);
-    document.getElementById('datetime-pickers').style.opacity = '0.5';
-    document.getElementById('datetime-pickers').style.pointerEvents = 'none';
-  } else {
-    clearInterval(nowIntervalId);
-    document.getElementById('datetime-pickers').style.opacity = '';
-    document.getElementById('datetime-pickers').style.pointerEvents = '';
-  }
-});
-
-// ─── Schedule ─────────────────────────────────────────────────────────────────
-document.getElementById('schedule-btn').addEventListener('click', () => {
-  if (!selectedNotifId) return;
-  const dateVal = document.getElementById('sched-date').value;
-  const timeVal = document.getElementById('sched-time').value;
-  if (!dateVal || !timeVal) { toast('Select a date and time', 'error'); return; }
-  const scheduledAt = new Date(`${dateVal}T${timeVal}`).getTime();
-  if (isNaN(scheduledAt)) { toast('Invalid date/time', 'error'); return; }
-  const targets = selectedDeviceUUID
-    ? state.devices.filter(d => d.uuid === selectedDeviceUUID)
-    : state.devices;
-  if (!targets.length) { toast('No devices to schedule on', 'error'); return; }
-  for (const device of targets) {
-    send({ type: 'schedule_notification', uuid: device.uuid, notificationId: selectedNotifId, scheduledAt });
-  }
-  toast(`Scheduled on ${targets.length} device(s)`, 'success');
-});
-
-// ─── Tabs ─────────────────────────────────────────────────────────────────────
-document.querySelectorAll('.tab-btn').forEach(btn => {
-  btn.addEventListener('click', () => {
-    const tab = btn.dataset.tab;
-    document.querySelectorAll('.tab-btn').forEach(b => b.classList.remove('active'));
-    document.querySelectorAll('.tab-panel').forEach(p => p.classList.remove('active'));
-    btn.classList.add('active');
-    document.getElementById(`tab-${tab}`).classList.add('active');
-  });
-});
-
-// ─── Device Name ─────────────────────────────────────────────────────────────
-document.getElementById('device-name-save').addEventListener('click', () => {
-  if (!selectedDeviceUUID) return;
-  const name = document.getElementById('device-name-input').value.trim();
-  if (!name) { toast('Enter a name', 'error'); return; }
-  send({ type: 'update_device_name', uuid: selectedDeviceUUID, name });
-  toast('Name updated', 'success');
-});
-
-// ─── WS Indicator ─────────────────────────────────────────────────────────────
-function setIndicator(online) {
-  const dot = document.getElementById('ws-indicator');
-  const label = document.getElementById('ws-label');
-  dot.className = `indicator ${online ? 'online' : 'offline'}`;
-  label.textContent = online ? 'LIVE' : 'OFFLINE';
-}
-
-// ─── Toast ────────────────────────────────────────────────────────────────────
-let toastTimer;
-function toast(msg, type = '') {
-  let el = document.getElementById('toast');
-  if (!el) { el = document.createElement('div'); el.id = 'toast'; document.body.appendChild(el); }
-  el.textContent = msg;
-  el.className = type ? `show ${type}` : 'show';
-  clearTimeout(toastTimer);
-  toastTimer = setTimeout(() => { el.className = el.className.replace('show', '').trim(); }, 3000);
-}
-
-// ─── Helpers ──────────────────────────────────────────────────────────────────
-function esc(str) {
-  return String(str || '').replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;').replace(/"/g,'&quot;');
-}
-function timeSince(ts) {
-  const d = Date.now() - ts;
-  if (d < 60000) return `${Math.floor(d/1000)}s ago`;
-  if (d < 3600000) return `${Math.floor(d/60000)}m ago`;
-  if (d < 86400000) return `${Math.floor(d/3600000)}h ago`;
-  return `${Math.floor(d/86400000)}d ago`;
-}
-
-// ─── Boot ─────────────────────────────────────────────────────────────────────
-setDateTimeToNow();
-connect();

public/admin/style.css

@@ -1,789 +0,0 @@
-/* ─── DISPATCH Admin UI ─────────────────────────────────────────────────────── */
-@import url('https://fonts.googleapis.com/css2?family=Space+Mono:wght@400;700&family=Syne:wght@400;600;800&display=swap');
-
-:root {
-  --bg:          #0d0d0f;
-  --surface:     #141416;
-  --surface2:    #1c1c20;
-  --surface3:    #242428;
-  --border:      #2a2a30;
-  --border2:     #3a3a42;
-  --text:        #e8e8ec;
-  --text-dim:    #8888a0;
-  --text-dimmer: #55556a;
-  --accent:      #f5a623;
-  --accent-dim:  #a87010;
-  --red:         #e03030;
-  --red-dark:    #8a1010;
-  --green:       #22c55e;
-  --mono:        'Space Mono', monospace;
-  --sans:        'Syne', sans-serif;
-  --radius:      4px;
-  --radius-lg:   8px;
-}
-
-*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
-
-html, body, #root {
-  height: 100%;
-  background: var(--bg);
-  color: var(--text);
-  font-family: var(--mono);
-  font-size: 13px;
-  line-height: 1.5;
-}
-
-/* ─── Top Bar ───────────────────────────────────────────────────────────────── */
-#topbar {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 0 24px;
-  height: 52px;
-  background: var(--surface);
-  border-bottom: 1px solid var(--border);
-  position: sticky;
-  top: 0;
-  z-index: 100;
-}
-
-#topbar-logo {
-  font-family: var(--sans);
-  font-weight: 800;
-  font-size: 20px;
-  letter-spacing: 0.15em;
-  color: var(--accent);
-}
-
-#topbar-status {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  font-size: 11px;
-  letter-spacing: 0.12em;
-  color: var(--text-dim);
-}
-
-/* ─── Status Indicator ──────────────────────────────────────────────────────── */
-.indicator {
-  width: 8px;
-  height: 8px;
-  border-radius: 50%;
-  background: #555;
-  display: inline-block;
-  flex-shrink: 0;
-  transition: background 0.3s;
-}
-.indicator.online  { background: var(--green); box-shadow: 0 0 6px var(--green); }
-.indicator.offline { background: var(--red);   box-shadow: 0 0 6px var(--red); }
-
-/* ─── Tabs ──────────────────────────────────────────────────────────────────── */
-#tabs {
-  display: flex;
-  border-bottom: 1px solid var(--border);
-  background: var(--surface);
-}
-
-.tab-btn {
-  padding: 12px 28px;
-  background: none;
-  border: none;
-  border-bottom: 2px solid transparent;
-  color: var(--text-dim);
-  font-family: var(--mono);
-  font-size: 11px;
-  font-weight: 700;
-  letter-spacing: 0.14em;
-  cursor: pointer;
-  transition: color 0.2s, border-color 0.2s;
-}
-.tab-btn:hover { color: var(--text); }
-.tab-btn.active {
-  color: var(--accent);
-  border-bottom-color: var(--accent);
-}
-
-/* ─── Tab Panels ────────────────────────────────────────────────────────────── */
-.tab-panel { display: none; height: calc(100vh - 52px - 43px); overflow: hidden; }
-.tab-panel.active { display: flex; flex-direction: column; }
-
-/* ─── Notifications Tab Layout ──────────────────────────────────────────────── */
-#notif-layout {
-  display: grid;
-  grid-template-columns: 300px 1fr 340px;
-  height: 100%;
-  overflow: hidden;
-}
-
-/* ─── Panel Titles ──────────────────────────────────────────────────────────── */
-.panel-title {
-  font-family: var(--sans);
-  font-weight: 800;
-  font-size: 12px;
-  letter-spacing: 0.18em;
-  color: var(--text-dim);
-  padding: 16px 20px 12px;
-  border-bottom: 1px solid var(--border);
-  display: flex;
-  align-items: center;
-  gap: 8px;
-}
-
-.badge {
-  background: var(--surface3);
-  color: var(--accent);
-  padding: 1px 7px;
-  border-radius: 99px;
-  font-size: 10px;
-  font-weight: 700;
-}
-
-/* ─── Left Panel: Create Form ───────────────────────────────────────────────── */
-#create-panel {
-  border-right: 1px solid var(--border);
-  display: flex;
-  flex-direction: column;
-  overflow-y: auto;
-  background: var(--surface);
-}
-
-.form-group {
-  padding: 10px 20px;
-  border-bottom: 1px solid var(--border);
-}
-
-.form-group label {
-  display: block;
-  font-size: 10px;
-  letter-spacing: 0.14em;
-  color: var(--text-dim);
-  margin-bottom: 6px;
-  font-weight: 700;
-}
-
-.form-group input,
-.form-group textarea,
-.form-group select {
-  width: 100%;
-  background: var(--surface2);
-  border: 1px solid var(--border);
-  border-radius: var(--radius);
-  color: var(--text);
-  font-family: var(--mono);
-  font-size: 12px;
-  padding: 8px 10px;
-  outline: none;
-  transition: border-color 0.2s;
-  resize: none;
-}
-
-.form-group input:focus,
-.form-group textarea:focus,
-.form-group select:focus {
-  border-color: var(--accent);
-}
-
-.form-group select option { background: var(--surface2); }
-
-#sound-upload-area {
-  display: flex;
-  align-items: center;
-  gap: 10px;
-}
-
-.btn-outline {
-  background: none;
-  border: 1px solid var(--border2);
-  color: var(--text-dim);
-  font-family: var(--mono);
-  font-size: 10px;
-  letter-spacing: 0.1em;
-  padding: 7px 12px;
-  border-radius: var(--radius);
-  cursor: pointer;
-  transition: border-color 0.2s, color 0.2s;
-  white-space: nowrap;
-}
-.btn-outline:hover { border-color: var(--accent); color: var(--accent); }
-
-#sound-file-name {
-  font-size: 11px;
-  color: var(--text-dimmer);
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.btn-create {
-  margin: 16px 20px;
-  padding: 14px;
-  background: #1a4a1a;
-  border: 1px solid #2d7a2d;
-  border-radius: var(--radius-lg);
-  color: var(--green);
-  font-family: var(--mono);
-  font-size: 13px;
-  font-weight: 700;
-  letter-spacing: 0.12em;
-  cursor: pointer;
-  transition: background 0.2s, box-shadow 0.2s;
-}
-.btn-create:hover {
-  background: #1f6a1f;
-  box-shadow: 0 0 20px rgba(34, 197, 94, 0.2);
-}
-.btn-create:active { transform: scale(0.98); }
-
-/* ─── Middle Panel: Notification List ──────────────────────────────────────── */
-#notif-list-panel {
-  border-right: 1px solid var(--border);
-  display: flex;
-  flex-direction: column;
-  overflow: hidden;
-}
-
-#notif-list {
-  flex: 1;
-  overflow-y: auto;
-}
-
-.notif-item {
-  padding: 14px 20px;
-  border-bottom: 1px solid var(--border);
-  cursor: pointer;
-  transition: background 0.15s;
-  position: relative;
-}
-.notif-item:hover { background: var(--surface2); }
-.notif-item.selected { background: var(--surface2); border-left: 3px solid var(--accent); }
-
-.notif-item-name {
-  font-size: 11px;
-  color: var(--text-dimmer);
-  letter-spacing: 0.1em;
-  margin-bottom: 3px;
-}
-.notif-item-heading {
-  font-family: var(--sans);
-  font-weight: 600;
-  font-size: 14px;
-  color: var(--text);
-  margin-bottom: 3px;
-}
-.notif-item-body {
-  font-size: 11px;
-  color: var(--text-dim);
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-.notif-item-sound {
-  display: inline-flex;
-  align-items: center;
-  gap: 4px;
-  margin-top: 6px;
-  font-size: 10px;
-  color: var(--accent-dim);
-  background: rgba(245,166,35,0.08);
-  padding: 2px 7px;
-  border-radius: 3px;
-}
-
-.empty-state {
-  padding: 40px 20px;
-  text-align: center;
-  color: var(--text-dimmer);
-  font-size: 12px;
-  letter-spacing: 0.08em;
-}
-
-/* ─── Right Panel: Schedule ─────────────────────────────────────────────────── */
-#schedule-panel {
-  display: flex;
-  flex-direction: column;
-  background: var(--surface);
-  overflow-y: auto;
-}
-
-.select-hint {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  height: 100%;
-  gap: 12px;
-  color: var(--text-dimmer);
-  text-align: center;
-  line-height: 1.7;
-  font-size: 12px;
-  letter-spacing: 0.06em;
-}
-
-.select-hint-icon {
-  font-size: 36px;
-  color: var(--border2);
-}
-
-#schedule-active { padding: 0; display: flex; flex-direction: column; }
-
-#selected-notif-info {
-  padding: 16px 20px 12px;
-  border-bottom: 1px solid var(--border);
-}
-
-#selected-notif-name {
-  font-family: var(--sans);
-  font-size: 16px;
-  font-weight: 600;
-  color: var(--text);
-}
-
-/* ── Big Red Button ── */
-#play-now-btn {
-  margin: 28px 24px 20px;
-  width: calc(100% - 48px);
-  padding: 26px;
-  background: radial-gradient(circle at 40% 35%, #e84040, #8a0000);
-  border: 2px solid #c02020;
-  border-radius: 12px;
-  color: #fff;
-  font-family: var(--sans);
-  font-size: 22px;
-  font-weight: 800;
-  letter-spacing: 0.12em;
-  cursor: pointer;
-  box-shadow:
-    0 0 0 4px rgba(200,0,0,0.15),
-    0 8px 32px rgba(200,0,0,0.35),
-    inset 0 2px 0 rgba(255,255,255,0.12),
-    inset 0 -3px 0 rgba(0,0,0,0.3);
-  position: relative;
-  transition: box-shadow 0.1s, transform 0.1s;
-  text-shadow: 0 1px 3px rgba(0,0,0,0.5);
-}
-#play-now-btn:hover {
-  box-shadow:
-    0 0 0 6px rgba(200,0,0,0.2),
-    0 10px 40px rgba(200,0,0,0.5),
-    inset 0 2px 0 rgba(255,255,255,0.15),
-    inset 0 -3px 0 rgba(0,0,0,0.35);
-  transform: translateY(-1px);
-}
-#play-now-btn:active {
-  transform: translateY(2px);
-  box-shadow:
-    0 0 0 4px rgba(200,0,0,0.12),
-    0 4px 16px rgba(200,0,0,0.3),
-    inset 0 3px 6px rgba(0,0,0,0.4);
-}
-
-/* ── Schedule Controls ── */
-#schedule-controls {
-  padding: 0 20px 20px;
-}
-
-.toggle-row {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-  padding: 14px 0 12px;
-  border-top: 1px solid var(--border);
-}
-
-.toggle-label {
-  font-size: 11px;
-  letter-spacing: 0.14em;
-  color: var(--text-dim);
-  font-weight: 700;
-}
-
-/* Toggle Switch */
-.toggle-switch { position: relative; display: inline-block; cursor: pointer; }
-.toggle-switch input { display: none; }
-.toggle-track {
-  display: block;
-  width: 42px;
-  height: 22px;
-  background: var(--surface3);
-  border: 1px solid var(--border2);
-  border-radius: 11px;
-  position: relative;
-  transition: background 0.2s, border-color 0.2s;
-}
-.toggle-thumb {
-  position: absolute;
-  top: 3px;
-  left: 3px;
-  width: 14px;
-  height: 14px;
-  background: var(--text-dimmer);
-  border-radius: 50%;
-  transition: transform 0.25s, background 0.2s;
-}
-.toggle-switch input:checked ~ .toggle-track { background: rgba(245,166,35,0.25); border-color: var(--accent); }
-.toggle-switch input:checked ~ .toggle-track .toggle-thumb { transform: translateX(20px); background: var(--accent); }
-
-#datetime-pickers {
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  gap: 10px;
-  margin: 6px 0 14px;
-}
-.picker-group label {
-  display: block;
-  font-size: 10px;
-  letter-spacing: 0.14em;
-  color: var(--text-dim);
-  margin-bottom: 5px;
-  font-weight: 700;
-}
-.picker-group input[type="date"],
-.picker-group input[type="time"] {
-  width: 100%;
-  background: var(--surface2);
-  border: 1px solid var(--border);
-  border-radius: var(--radius);
-  color: var(--text);
-  font-family: var(--mono);
-  font-size: 12px;
-  padding: 8px 8px;
-  outline: none;
-  transition: border-color 0.2s;
-  color-scheme: dark;
-}
-.picker-group input:focus { border-color: var(--accent); }
-
-.btn-schedule {
-  width: 100%;
-  padding: 12px;
-  background: rgba(245,166,35,0.12);
-  border: 1px solid var(--accent-dim);
-  border-radius: var(--radius-lg);
-  color: var(--accent);
-  font-family: var(--mono);
-  font-size: 12px;
-  font-weight: 700;
-  letter-spacing: 0.12em;
-  cursor: pointer;
-  transition: background 0.2s, box-shadow 0.2s;
-}
-.btn-schedule:hover {
-  background: rgba(245,166,35,0.2);
-  box-shadow: 0 0 16px rgba(245,166,35,0.15);
-}
-
-/* ─── Devices Tab Layout ─────────────────────────────────────────────────────── */
-#devices-layout {
-  display: grid;
-  grid-template-columns: 280px 1fr;
-  height: 100%;
-  overflow: hidden;
-}
-
-#device-list-panel {
-  border-right: 1px solid var(--border);
-  display: flex;
-  flex-direction: column;
-  overflow: hidden;
-  background: var(--surface);
-}
-
-#device-list {
-  flex: 1;
-  overflow-y: auto;
-}
-
-.device-item {
-  display: flex;
-  align-items: center;
-  gap: 10px;
-  padding: 14px 20px;
-  border-bottom: 1px solid var(--border);
-  cursor: pointer;
-  transition: background 0.15s;
-}
-.device-item:hover { background: var(--surface2); }
-.device-item.selected { background: var(--surface2); border-left: 3px solid var(--accent); }
-
-.device-item-info { flex: 1; min-width: 0; }
-.device-item-name {
-  font-family: var(--sans);
-  font-size: 14px;
-  font-weight: 600;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-.device-item-uuid {
-  font-size: 10px;
-  color: var(--text-dimmer);
-  letter-spacing: 0.06em;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-.device-item-last {
-  font-size: 10px;
-  color: var(--text-dimmer);
-  margin-top: 2px;
-}
-
-/* ─── Device Detail ──────────────────────────────────────────────────────────── */
-#device-detail-panel {
-  overflow-y: auto;
-  display: flex;
-  flex-direction: column;
-}
-
-#device-empty-state { flex: 1; }
-
-#device-detail { padding: 0; }
-
-#device-header {
-  display: flex;
-  align-items: center;
-  gap: 14px;
-  padding: 20px 24px;
-  border-bottom: 1px solid var(--border);
-  background: var(--surface);
-  position: sticky;
-  top: 0;
-  z-index: 10;
-  flex-wrap: wrap;
-}
-
-.device-detail-name {
-  font-family: var(--sans);
-  font-weight: 800;
-  font-size: 20px;
-}
-
-.device-detail-uuid {
-  font-size: 10px;
-  color: var(--text-dimmer);
-  letter-spacing: 0.08em;
-  margin-top: 2px;
-}
-
-#device-name-edit-area {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  margin-left: auto;
-}
-#device-name-input {
-  background: var(--surface2);
-  border: 1px solid var(--border);
-  border-radius: var(--radius);
-  color: var(--text);
-  font-family: var(--mono);
-  font-size: 12px;
-  padding: 6px 10px;
-  outline: none;
-  width: 180px;
-  transition: border-color 0.2s;
-}
-#device-name-input:focus { border-color: var(--accent); }
-
-.btn-sm {
-  background: none;
-  border: 1px solid var(--border2);
-  border-radius: var(--radius);
-  color: var(--text-dim);
-  font-family: var(--mono);
-  font-size: 10px;
-  letter-spacing: 0.1em;
-  padding: 6px 12px;
-  cursor: pointer;
-  transition: border-color 0.2s, color 0.2s;
-}
-.btn-sm:hover { border-color: var(--accent); color: var(--accent); }
-
-#device-sections { padding: 16px 24px; display: flex; flex-direction: column; gap: 24px; }
-
-.device-section h3 {
-  font-size: 10px;
-  letter-spacing: 0.18em;
-  color: var(--text-dimmer);
-  font-weight: 700;
-  margin-bottom: 10px;
-  padding-bottom: 8px;
-  border-bottom: 1px solid var(--border);
-}
-
-/* Tag List (cached sounds) */
-.tag-list { display: flex; flex-wrap: wrap; gap: 6px; }
-.tag {
-  background: var(--surface3);
-  border: 1px solid var(--border2);
-  color: var(--text-dim);
-  font-size: 11px;
-  padding: 3px 10px;
-  border-radius: 99px;
-  display: flex;
-  align-items: center;
-  gap: 5px;
-}
-.tag-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
-
-/* Tables */
-.data-table {
-  width: 100%;
-  border-collapse: collapse;
-  font-size: 12px;
-}
-.data-table th {
-  text-align: left;
-  font-size: 10px;
-  letter-spacing: 0.12em;
-  color: var(--text-dimmer);
-  font-weight: 700;
-  padding: 6px 10px;
-  border-bottom: 1px solid var(--border);
-}
-.data-table td {
-  padding: 9px 10px;
-  border-bottom: 1px solid var(--border);
-  color: var(--text-dim);
-  vertical-align: top;
-}
-.data-table tr:last-child td { border-bottom: none; }
-.data-table td:first-child { color: var(--text); }
-
-.action-btn {
-  background: none;
-  border: 1px solid var(--border2);
-  color: var(--text-dimmer);
-  font-family: var(--mono);
-  font-size: 10px;
-  padding: 3px 8px;
-  border-radius: var(--radius);
-  cursor: pointer;
-  transition: border-color 0.2s, color 0.2s;
-}
-.action-btn:hover { border-color: var(--red); color: var(--red); }
-.action-btn.edit:hover { border-color: var(--accent); color: var(--accent); }
-
-/* ─── Scrollbar ──────────────────────────────────────────────────────────────── */
-::-webkit-scrollbar { width: 6px; height: 6px; }
-::-webkit-scrollbar-track { background: transparent; }
-::-webkit-scrollbar-thumb { background: var(--border2); border-radius: 3px; }
-::-webkit-scrollbar-thumb:hover { background: var(--text-dimmer); }
-
-/* ─── Toast ──────────────────────────────────────────────────────────────────── */
-#toast {
-  position: fixed;
-  bottom: 24px;
-  left: 50%;
-  transform: translateX(-50%) translateY(80px);
-  background: var(--surface3);
-  border: 1px solid var(--border2);
-  color: var(--text);
-  font-family: var(--mono);
-  font-size: 12px;
-  padding: 10px 20px;
-  border-radius: var(--radius-lg);
-  box-shadow: 0 4px 20px rgba(0,0,0,0.5);
-  transition: transform 0.3s;
-  z-index: 9999;
-  letter-spacing: 0.06em;
-}
-#toast.show { transform: translateX(-50%) translateY(0); }
-#toast.success { border-color: var(--green); color: var(--green); }
-#toast.error   { border-color: var(--red);   color: var(--red); }
-
-/* ─── Login Screen ───────────────────────────────────────────────────────────── */
-#login-screen {
-  position: fixed;
-  inset: 0;
-  background: var(--bg);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  z-index: 1000;
-}
-
-#login-box {
-  width: 360px;
-  background: var(--surface);
-  border: 1px solid var(--border2);
-  border-radius: var(--radius-lg);
-  padding: 40px 36px 32px;
-  box-shadow: 0 8px 48px rgba(0,0,0,0.6);
-}
-
-#login-logo {
-  font-family: var(--sans);
-  font-weight: 800;
-  font-size: 28px;
-  letter-spacing: 0.2em;
-  color: var(--accent);
-  text-align: center;
-  margin-bottom: 4px;
-}
-
-#login-subtitle {
-  text-align: center;
-  font-size: 10px;
-  letter-spacing: 0.22em;
-  color: var(--text-dimmer);
-  margin-bottom: 32px;
-}
-
-#login-box .form-group {
-  padding: 0;
-  border-bottom: none;
-  margin-bottom: 16px;
-}
-
-#login-box .btn-create {
-  margin: 8px 0 0;
-  width: 100%;
-}
-
-#login-error {
-  font-size: 11px;
-  color: var(--red);
-  letter-spacing: 0.08em;
-  min-height: 18px;
-  margin-bottom: 4px;
-  text-align: center;
-}
-
-#login-connecting {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 10px;
-  color: var(--text-dim);
-  font-size: 12px;
-  letter-spacing: 0.1em;
-  padding-top: 8px;
-}
-
-.spinner {
-  width: 16px;
-  height: 16px;
-  border: 2px solid var(--border2);
-  border-top-color: var(--accent);
-  border-radius: 50%;
-  animation: spin 0.7s linear infinite;
-}
-
-@keyframes spin { to { transform: rotate(360deg); } }
-
-/* ─── Logout Button ──────────────────────────────────────────────��───────────── */
-.btn-logout {
-  background: none;
-  border: 1px solid var(--border2);
-  color: var(--text-dimmer);
-  font-family: var(--mono);
-  font-size: 10px;
-  letter-spacing: 0.1em;
-  padding: 4px 10px;
-  border-radius: var(--radius);
-  cursor: pointer;
-  margin-left: 14px;
-  transition: border-color 0.2s, color 0.2s;
-}
-.btn-logout:hover { border-color: var(--red); color: var(--red); }

public/index.html

@@ -1,14 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-  <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <style>
-    * { margin: 0; padding: 0; box-sizing: border-box; }
-    html, body { background: #fff; width: 100%; height: 100%; }
-  </style>
-</head>
-<body>
-  <script src="/script.js"></script>
-</body>
-</html>

public/script.js

@@ -1,307 +0,0 @@
-// ─── Frontend 1: Device Client ────────────────────────────────────────────────
-// Responsibilities:
-//  - Negotiate UUID with server
-//  - Keep notifications + schedule in localStorage
-//  - Cache sounds in localStorage
-//  - Request notification permission and show notifications
-//  - Schedule notifications to fire at the right time
-
-const LS = {
-  get: (k) => { try { return JSON.parse(localStorage.getItem(k)); } catch { return null; } },
-  set: (k, v) => { try { localStorage.setItem(k, JSON.stringify(v)); } catch {} },
-};
-
-const STORAGE_UUID          = 'device_uuid';
-const STORAGE_NOTIFICATIONS = 'device_notifications';
-const STORAGE_SCHEDULE      = 'device_schedule';
-const STORAGE_SOUNDS        = 'device_sounds';       // { [soundId]: base64 }
-const STORAGE_NAME          = 'device_name';
-
-let ws = null;
-let reconnectTimer = null;
-let scheduledTimers = {};  // notifId -> timeoutId
-let cachedSounds = LS.get(STORAGE_SOUNDS) || {};
-
-// ─── Notification Permission ──────────────────────────────────────────────────
-if ('Notification' in window && Notification.permission === 'default') {
-  Notification.requestPermission();
-}
-
-// ─── WebSocket Connection ─────────────────────────────────────────────────────
-function connect() {
-  const proto = location.protocol === 'https:' ? 'wss' : 'wss';
-  ws = new WebSocket(`${proto}://${location.host}/device-ws`);
-
-  ws.addEventListener('open', () => {
-    console.log('[WS] connected');
-    clearTimeout(reconnectTimer);
-    const uuid = LS.get(STORAGE_UUID);
-    // Introduce ourselves
-    send({ type: 'hello', uuid });
-    // Report cached sounds
-    send({ type: 'cached_sounds', soundIds: Object.keys(cachedSounds) });
-  });
-
-  ws.addEventListener('message', (e) => {
-    let msg;
-    try { msg = JSON.parse(e.data); } catch { return; }
-    handleMessage(msg);
-  });
-
-  ws.addEventListener('close', () => {
-    console.log('[WS] closed, reconnecting in 3s...');
-    reconnectTimer = setTimeout(connect, 3000);
-  });
-
-  ws.addEventListener('error', () => {
-    ws.close();
-  });
-}
-
-function send(msg) {
-  if (ws && ws.readyState === WebSocket.OPEN) {
-    ws.send(JSON.stringify(msg));
-  }
-}
-
-// ─── Message Handler ──────────────────────────────────────────────────────────
-function handleMessage(msg) {
-  switch (msg.type) {
-
-    case 'device_init': {
-      // Server assigns/confirms UUID and sends all notifications + schedule
-      LS.set(STORAGE_UUID, msg.uuid);
-      LS.set(STORAGE_NAME, msg.name);
-      mergeNotifications(msg.notifications || []);
-      LS.set(STORAGE_SCHEDULE, msg.schedule || []);
-      ensureSounds();
-      rescheduleAll();
-      break;
-    }
-
-    case 'notification_added': {
-      const notifs = LS.get(STORAGE_NOTIFICATIONS) || [];
-      if (!notifs.find(n => n.id === msg.notification.id)) {
-        notifs.push(msg.notification);
-        LS.set(STORAGE_NOTIFICATIONS, notifs);
-        ensureSoundForNotif(msg.notification);
-      }
-      break;
-    }
-
-    case 'schedule_update': {
-      LS.set(STORAGE_SCHEDULE, msg.schedule || []);
-      rescheduleAll();
-      break;
-    }
-
-    case 'play_now': {
-      const notifs = LS.get(STORAGE_NOTIFICATIONS) || [];
-      const notif = notifs.find(n => n.id === msg.notificationId);
-      if (notif) fireNotification(notif);
-      break;
-    }
-
-    case 'name_update': {
-      LS.set(STORAGE_NAME, msg.name);
-      break;
-    }
-
-    case 'sound_data': {
-      // Server sent us a sound we requested
-      const sound = msg.sound;
-      cachedSounds[sound.id] = { data: sound.data, name: sound.name };
-      LS.set(STORAGE_SOUNDS, cachedSounds);
-      send({ type: 'cached_sounds', soundIds: Object.keys(cachedSounds) });
-      break;
-    }
-
-    default:
-      break;
-  }
-}
-
-// ─── Merge Notifications ──────────────────────────────────────────────────────
-function mergeNotifications(incoming) {
-  const local = LS.get(STORAGE_NOTIFICATIONS) || [];
-  const localMap = {};
-  for (const n of local) localMap[n.id] = n;
-
-  for (const n of incoming) {
-    if (!localMap[n.id]) {
-      localMap[n.id] = n;
-    } else {
-      // preserve local displayed status if already true
-      if (localMap[n.id].displayed) n.displayed = true;
-      localMap[n.id] = { ...localMap[n.id], ...n };
-    }
-  }
-  LS.set(STORAGE_NOTIFICATIONS, Object.values(localMap));
-}
-
-// ─── Sound Fetching ────────────────────────────���──────────────────────────────
-function ensureSounds() {
-  const notifs = LS.get(STORAGE_NOTIFICATIONS) || [];
-  for (const n of notifs) ensureSoundForNotif(n);
-}
-
-function ensureSoundForNotif(notif) {
-  if (notif.soundId && !cachedSounds[notif.soundId]) {
-    send({ type: 'request_sound', soundId: notif.soundId });
-  }
-}
-
-// ─── Scheduling ───────────────────────────────────────────────────────────────
-function rescheduleAll() {
-  // Clear all existing timers
-  for (const id of Object.keys(scheduledTimers)) {
-    clearTimeout(scheduledTimers[id]);
-  }
-  scheduledTimers = {};
-
-  const schedule = LS.get(STORAGE_SCHEDULE) || [];
-  const notifs   = LS.get(STORAGE_NOTIFICATIONS) || [];
-  const now      = Date.now();
-
-  for (const entry of schedule) {
-    const notif = notifs.find(n => n.id === entry.notificationId);
-    if (!notif) continue;
-
-    const delay = entry.scheduledAt - now;
-
-    if (delay <= 0) {
-      // Missed — fire immediately if not displayed
-      if (!notif.displayed) {
-        fireNotification(notif);
-      }
-    } else {
-      scheduledTimers[notif.id] = setTimeout(() => {
-        const freshNotifs = LS.get(STORAGE_NOTIFICATIONS) || [];
-        const fresh = freshNotifs.find(n => n.id === notif.id);
-        if (fresh && !fresh.displayed) fireNotification(fresh);
-      }, delay);
-    }
-  }
-}
-
-// ─── Fire a Notification ──────────────────────────────────────────────────────
-function fireNotification(notif) {
-  // Play sound
-  if (notif.soundId && cachedSounds[notif.soundId]) {
-    playBase64Audio(cachedSounds[notif.soundId].data);
-  }
-
-  // Show browser notification
-  if ('Notification' in window && Notification.permission === 'granted') {
-    const n = new Notification(notif.heading || notif.name, {
-      body: notif.body,
-      requireInteraction: true,
-    });
-    if (notif.hyperlink) {
-      n.addEventListener('click', () => {
-        window.open(notif.hyperlink, '_blank');
-        n.close();
-      });
-    }
-  } else {
-    // Fallback: in-page notification banner
-    showInPageBanner(notif);
-  }
-
-  // Mark displayed
-  markDisplayed(notif.id);
-}
-
-function showInPageBanner(notif) {
-  const banner = document.createElement('div');
-  Object.assign(banner.style, {
-    position: 'fixed',
-    bottom: '20px',
-    right: '20px',
-    background: '#222',
-    color: '#fff',
-    padding: '16px 24px',
-    borderRadius: '8px',
-    boxShadow: '0 4px 20px rgba(0,0,0,0.4)',
-    zIndex: '99999',
-    cursor: notif.hyperlink ? 'pointer' : 'default',
-    maxWidth: '320px',
-    fontFamily: 'sans-serif',
-  });
-  banner.innerHTML = `<strong>${escapeHtml(notif.heading)}</strong><br>${escapeHtml(notif.body)}`;
-  if (notif.hyperlink) {
-    banner.addEventListener('click', () => window.open(notif.hyperlink, '_blank'));
-  }
-  document.body.appendChild(banner);
-  setTimeout(() => banner.remove(), 10000);
-}
-
-function escapeHtml(str) {
-  return String(str || '').replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;');
-}
-
-function markDisplayed(notifId) {
-  const notifs = LS.get(STORAGE_NOTIFICATIONS) || [];
-  const notif = notifs.find(n => n.id === notifId);
-  if (notif) {
-    notif.displayed = true;
-    LS.set(STORAGE_NOTIFICATIONS, notifs);
-  }
-  send({ type: 'mark_displayed', notificationId: notifId });
-}
-
-// ─── Audio Playback ───────────────────────────────────────────────────────────
-function playBase64Audio(base64Data) {
-  try {
-    // Try direct audio element
-    const audio = new Audio(`data:audio/mpeg;base64,${base64Data}`);
-    audio.play().catch(() => {
-      // Fallback: decode with AudioContext
-      playWithAudioContext(base64Data);
-    });
-  } catch {
-    playWithAudioContext(base64Data);
-  }
-}
-
-function playWithAudioContext(base64Data) {
-  try {
-    const ctx = new (window.AudioContext || window.webkitAudioContext)();
-    const binary = atob(base64Data);
-    const bytes = new Uint8Array(binary.length);
-    for (let i = 0; i < binary.length; i++) bytes[i] = binary.charCodeAt(i);
-    ctx.decodeAudioData(bytes.buffer, (buf) => {
-      const src = ctx.createBufferSource();
-      src.buffer = buf;
-      src.connect(ctx.destination);
-      src.start(0);
-    });
-  } catch (e) {
-    console.warn('[Audio] playback failed:', e);
-  }
-}
-
-// ─── localStorage change listener ─────────────────────────────────────────────
-window.addEventListener('storage', (e) => {
-  if (e.key === STORAGE_SCHEDULE || e.key === STORAGE_NOTIFICATIONS) {
-    rescheduleAll();
-  }
-});
-
-// ─── Check missed notifications on load ──────────────────────────────────────
-function checkMissedOnLoad() {
-  const schedule = LS.get(STORAGE_SCHEDULE) || [];
-  const notifs   = LS.get(STORAGE_NOTIFICATIONS) || [];
-  const now      = Date.now();
-  for (const entry of schedule) {
-    if (entry.scheduledAt <= now) {
-      const notif = notifs.find(n => n.id === entry.notificationId);
-      if (notif && !notif.displayed) fireNotification(notif);
-    }
-  }
-}
-
-// ─── Boot ─────────────────────────────────────────────────────────────────────
-checkMissedOnLoad();
-rescheduleAll();
-connect();