From c52aaee9b0f917567debc81cd7505a6a2fd993d6 Mon Sep 17 00:00:00 2001
From: Alex Oliveira <4482374+aroff@users.noreply.github.com>
Date: Wed, 3 Jun 2026 14:10:41 +0000
Subject: [PATCH] chore(develop):
 61-ui-beep-tab-highlight-on-new-alert-toggleable-persisted-full

---
 ailoop-py/uv.lock                   |  2 +-
 ailoop-server/assets/ailoop-ui.html | 95 ++++++++++++++++++++++++++++-
 2 files changed, 95 insertions(+), 2 deletions(-)

diff --git a/ailoop-py/uv.lock b/ailoop-py/uv.lock
index a0debe7..bf99b97 100644
--- a/ailoop-py/uv.lock
+++ b/ailoop-py/uv.lock
@@ -4,7 +4,7 @@ requires-python = ">=3.11"
 
 [[package]]
 name = "ailoop-py"
-version = "1.0.8"
+version = "1.0.10"
 source = { editable = "." }
 dependencies = [
     { name = "httpx" },
diff --git a/ailoop-server/assets/ailoop-ui.html b/ailoop-server/assets/ailoop-ui.html
index 0e577c5..ba56b1c 100644
--- a/ailoop-server/assets/ailoop-ui.html
+++ b/ailoop-server/assets/ailoop-ui.html
@@ -10,6 +10,7 @@
 <script src="https://unpkg.com/react@18.3.1/umd/react.production.min.js" crossorigin="anonymous"></script>
 <script src="https://unpkg.com/react-dom@18.3.1/umd/react-dom.production.min.js" crossorigin="anonymous"></script>
 <script src="https://unpkg.com/@babel/standalone@7.29.0/babel.min.js" crossorigin="anonymous"></script>
+<link id="favicon" rel="icon" href="data:," />
 
 <style>
 *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
@@ -194,6 +195,8 @@
 .filter-btn.active-all { background: var(--bg3); color: var(--text-bright); border-color: var(--border2); }
 .filter-btn.active-pending { background: #450a0a; color: var(--urgent); border-color: var(--urgent); }
 .filter-btn.active-autoopen { background: var(--accent-dim); color: var(--accent-bright); border-color: var(--accent); }
+.filter-btn.active-beep  { background: var(--accent-dim); color: var(--accent-bright); border-color: var(--accent); }
+.filter-btn.active-flash { background: var(--accent-dim); color: var(--accent-bright); border-color: var(--accent); }
 .feed-toolbar-right { margin-left: auto; display: flex; gap: 6px; align-items: center; }
 .btn-clear { font-family: var(--font); font-size: 11px; background: transparent; border: none; color: var(--text-dim); cursor: pointer; padding: 3px 8px; }
 .btn-clear:hover { color: var(--text); }
@@ -590,6 +593,8 @@
     onlyPending: true,
     activeChannel: 'all',
     activeTypes: [],
+    beepOnAlert: false,
+    flashTabOnAlert: false,
   };
 }
 
@@ -613,6 +618,44 @@
   }
 }
 
+function playBeep(audioCtxRef) {
+  try {
+    const Ctx = window.AudioContext || window.webkitAudioContext;
+    if (!Ctx) return;
+    let ctx = audioCtxRef.current;
+    if (!ctx) { ctx = new Ctx(); audioCtxRef.current = ctx; }
+    if (ctx.state === 'suspended') ctx.resume();
+    const osc  = ctx.createOscillator();
+    const gain = ctx.createGain();
+    osc.type = 'sine';
+    osc.frequency.value = 880;
+    const t = ctx.currentTime;
+    gain.gain.setValueAtTime(0.0001, t);
+    gain.gain.exponentialRampToValueAtTime(0.15, t + 0.01);
+    gain.gain.exponentialRampToValueAtTime(0.0001, t + 0.12);
+    osc.connect(gain).connect(ctx.destination);
+    osc.start(t);
+    osc.stop(t + 0.13);
+  } catch (e) {
+    console.warn('ailoop: beep error', e);
+  }
+}
+
+function setFaviconBadge(on) {
+  try {
+    const link = document.getElementById('favicon');
+    if (!link) return;
+    if (!on) { link.href = 'data:,'; return; }
+    const c = document.createElement('canvas');
+    c.width = c.height = 32;
+    const g = c.getContext('2d');
+    g.fillStyle = '#0a0a0f'; g.fillRect(0, 0, 32, 32);
+    g.fillStyle = '#ef4444';
+    g.beginPath(); g.arc(16, 16, 9, 0, Math.PI * 2); g.fill();
+    link.href = c.toDataURL('image/png');
+  } catch (_) {}
+}
+
 function formatTs(iso) {
   const d = new Date(iso);
   const diff = Math.floor((Date.now() - d.getTime()) / 1000);
@@ -1264,6 +1307,8 @@
   const [activeTypes, setActiveTypes] = useState(() => new Set(loadPrefs().activeTypes));
   const [onlyPending, setOnlyPending] = useState(() => loadPrefs().onlyPending);
   const [autoOpenDecisionModal, setAutoOpenDecisionModal] = useState(() => loadPrefs().autoOpenDecisionModal);
+  const [beepOnAlert, setBeepOnAlert] = useState(() => loadPrefs().beepOnAlert);
+  const [flashTabOnAlert, setFlashTabOnAlert] = useState(() => loadPrefs().flashTabOnAlert);
   const [atTop, setAtTop] = useState(true);
   const [modalEv, setModalEv] = useState(null);
   const [, forceTick] = useState(0);
@@ -1279,6 +1324,11 @@
   const autoOpenRef = useRef(loadPrefs().autoOpenDecisionModal);
   const eventsRef = useRef([]);
   const modalEvIdRef = useRef(null);
+  const beepOnAlertRef = useRef(loadPrefs().beepOnAlert);
+  const flashTabOnAlertRef = useRef(loadPrefs().flashTabOnAlert);
+  const audioCtxRef = useRef(null);
+  const flashTimerRef = useRef(null);
+  const pendingCountRef = useRef(0);
 
   // Tick once a minute so relative timestamps stay fresh.
   useEffect(() => {
@@ -1296,10 +1346,12 @@
         activeChannel,
         activeTypes: [...activeTypes],
         serverUrl,
+        beepOnAlert,
+        flashTabOnAlert,
       });
     }, 150);
     return () => clearTimeout(timer);
-  }, [serverUrl, activeChannel, activeTypes, onlyPending, autoOpenDecisionModal]);
+  }, [serverUrl, activeChannel, activeTypes, onlyPending, autoOpenDecisionModal, beepOnAlert, flashTabOnAlert]);
 
   // Sync refs with state
   useEffect(() => {
@@ -1315,10 +1367,16 @@
     eventsRef.current = events;
   }, [events]);
 
+  useEffect(() => { beepOnAlertRef.current     = beepOnAlert;     }, [beepOnAlert]);
+  useEffect(() => { flashTabOnAlertRef.current = flashTabOnAlert; }, [flashTabOnAlert]);
+
   // Tab title badge
   const pendingCount = events.filter(e => (e.type === 'ask' || e.type === 'authorize' || e.type === 'navigate') && !e.responded).length;
 
+  useEffect(() => { pendingCountRef.current = pendingCount; }, [pendingCount]);
+
   useEffect(() => {
+    if (flashTimerRef.current) return;
     document.title = pendingCount > 0 ? `(${pendingCount}) ailoop` : 'ailoop';
   }, [pendingCount]);
 
@@ -1326,6 +1384,28 @@
     if (feedRef.current) feedRef.current.scrollTop = 0;
   }, []);
 
+  const stopTabFlash = useCallback(() => {
+    if (flashTimerRef.current) { clearInterval(flashTimerRef.current); flashTimerRef.current = null; }
+    setFaviconBadge(false);
+    document.title = pendingCountRef.current > 0 ? `(${pendingCountRef.current}) ailoop` : 'ailoop';
+  }, []);
+
+  function startTabFlash() {
+    if (flashTimerRef.current) return;
+    setFaviconBadge(true);
+    let on = false;
+    flashTimerRef.current = setInterval(() => {
+      on = !on;
+      document.title = on ? '🔔 ailoop — alert!' : 'ailoop';
+    }, 900);
+  }
+
+  useEffect(() => {
+    const handler = () => { if (document.visibilityState === 'visible') stopTabFlash(); };
+    document.addEventListener('visibilitychange', handler);
+    return () => document.removeEventListener('visibilitychange', handler);
+  }, [stopTabFlash]);
+
   function handleScroll() {
     if (!feedRef.current) return;
     setAtTop(feedRef.current.scrollTop < 40);
@@ -1454,6 +1534,8 @@
     if (ev.type === 'decision' || ev.type === 'ask' || ev.type === 'authorize' || ev.type === 'navigate') {
       maybeOpenModalFor(ev);
       sendAttentionNotification(ev);
+      if (beepOnAlertRef.current) playBeep(audioCtxRef);
+      if (flashTabOnAlertRef.current && document.visibilityState === 'hidden') startTabFlash();
     }
   }
 
@@ -1663,6 +1745,17 @@
             >
               auto-open
             </button>
+            <button
+              className={`filter-btn ${beepOnAlert ? 'active-beep' : ''}`}
+              onClick={() => {
+                if (!beepOnAlert) playBeep(audioCtxRef);
+                setBeepOnAlert(v => !v);
+              }}
+            >beep</button>
+            <button
+              className={`filter-btn ${flashTabOnAlert ? 'active-flash' : ''}`}
+              onClick={() => setFlashTabOnAlert(v => !v)}
+            >flash tab</button>
             <div className="feed-toolbar-right">
               <button className="btn-clear" onClick={() => { setEvents([]); seenServerIds.current.clear(); }}>clear</button>
               <button className="scroll-btn" onClick={scrollToLatest}>↑ top</button>