nothumanallowed 4.1.0 → 6.0.0

package/src/services/web-ui.mjs

@@ -151,6 +151,29 @@ input:focus,textarea:focus{border-color:var(--green3)}
 /* ---- SPINNER ---- */
 .spinner{width:24px;height:24px;border:2px solid var(--border);border-top-color:var(--green);border-radius:50%;animation:spin .6s linear infinite;margin:0 auto 12px}
 @keyframes spin{to{transform:rotate(360deg)}}
+
+/* ---- TOASTS (real-time notifications) ---- */
+.toast-container{position:fixed;top:16px;right:16px;z-index:500;display:flex;flex-direction:column;gap:8px;pointer-events:none}
+.toast{background:var(--bg3);border:1px solid var(--green);border-radius:8px;padding:12px 16px;max-width:320px;animation:toastIn .3s;pointer-events:auto;cursor:pointer;box-shadow:0 4px 20px rgba(0,0,0,0.5)}
+.toast--email{border-color:var(--cyan)}
+.toast--meeting{border-color:var(--amber)}
+.toast--security{border-color:var(--red)}
+.toast--plan{border-color:var(--green)}
+.toast__title{font-size:11px;font-weight:700;margin-bottom:3px}
+.toast--email .toast__title{color:var(--cyan)}
+.toast--meeting .toast__title{color:var(--amber)}
+.toast--security .toast__title{color:var(--red)}
+.toast--plan .toast__title{color:var(--green)}
+.toast__body{font-size:11px;color:var(--text);line-height:1.4}
+.toast--fadeout{animation:toastOut .3s forwards}
+@keyframes toastIn{from{transform:translateX(100%);opacity:0}to{transform:none;opacity:1}}
+@keyframes toastOut{from{opacity:1}to{opacity:0;transform:translateX(40px)}}
+
+/* ---- VOICE MIC BUTTON (in chat bar) ---- */
+.chat__mic{background:var(--bg3);color:var(--green);border:1px solid var(--border2);width:40px;height:40px;border-radius:var(--r);display:flex;align-items:center;justify-content:center;font-size:18px;cursor:pointer;flex-shrink:0;transition:all .2s}
+.chat__mic:hover{border-color:var(--green3);background:var(--greendim)}
+.chat__mic--recording{border-color:var(--red);color:var(--red);background:rgba(255,23,68,0.1);animation:micPulse 1.5s ease-in-out infinite}
+@keyframes micPulse{0%,100%{box-shadow:none}50%{box-shadow:0 0 0 6px rgba(255,23,68,0.2)}}
 `;
 
   // JS as clean block
@@ -256,7 +279,7 @@ function renderDash(el){
 var chatReady=false;
 function renderChat(el){
   if(!chatReady||!document.getElementById('chatMessages')){
-    el.innerHTML='<div class="chat"><div class="chat__messages" id="chatMessages"></div><div class="chat__bar"><textarea class="chat__input" id="chatInput" placeholder="Ask anything..." rows="1"></textarea><button class="chat__send" id="chatSend">Send</button></div></div>';
+    el.innerHTML='<div class="chat"><div class="chat__messages" id="chatMessages"></div><div class="chat__bar"><button class="chat__mic" id="chatMic" onclick="toggleVoiceInput()" title="Voice input">&#127908;</button><textarea class="chat__input" id="chatInput" placeholder="Ask anything..." rows="1"></textarea><button class="chat__send" id="chatSend">Send</button></div></div>';
     chatReady=true;
     document.getElementById('chatSend').onclick=sendChat;
     document.getElementById('chatInput').onkeydown=function(e){if(e.key==='Enter'&&!e.shiftKey){e.preventDefault();sendChat()}};
@@ -644,6 +667,165 @@ function askAgent(){
   });
 }
 
+// ---- TOASTS (real-time notification overlay) ----
+function showToast(type, title, body, durationMs) {
+  var container = document.getElementById('toastContainer');
+  if (!container) return;
+  var toast = document.createElement('div');
+  toast.className = 'toast toast--' + type;
+  toast.innerHTML = '<div class="toast__title">' + esc(title) + '</div><div class="toast__body">' + esc(body) + '</div>';
+  toast.onclick = function() {
+    toast.classList.add('toast--fadeout');
+    setTimeout(function() { toast.remove(); }, 300);
+    // Navigate to relevant view
+    if (type === 'email') switchView('emails');
+    else if (type === 'meeting') switchView('calendar');
+    else if (type === 'plan') switchView('plan');
+  };
+  container.appendChild(toast);
+  // Auto-remove after duration
+  setTimeout(function() {
+    if (toast.parentNode) {
+      toast.classList.add('toast--fadeout');
+      setTimeout(function() { toast.remove(); }, 300);
+    }
+  }, durationMs || 8000);
+}
+
+// ---- WEBSOCKET (connect to daemon for real-time events) ----
+var ws = null;
+var wsReconnectTimer = null;
+function connectWebSocket() {
+  try {
+    ws = new WebSocket('ws://127.0.0.1:3848');
+  } catch(e) { return; }
+
+  ws.onopen = function() {
+    var indicator = document.getElementById('wsIndicator');
+    if (indicator) indicator.style.color = 'var(--green)';
+  };
+
+  ws.onmessage = function(event) {
+    try {
+      var msg = JSON.parse(event.data);
+      handleDaemonEvent(msg);
+    } catch(e) {}
+  };
+
+  ws.onclose = function() {
+    var indicator = document.getElementById('wsIndicator');
+    if (indicator) indicator.style.color = 'var(--dim)';
+    ws = null;
+    // Reconnect after 10 seconds
+    if (!wsReconnectTimer) {
+      wsReconnectTimer = setTimeout(function() {
+        wsReconnectTimer = null;
+        connectWebSocket();
+      }, 10000);
+    }
+  };
+
+  ws.onerror = function() {
+    try { ws.close(); } catch(e) {}
+  };
+}
+
+function handleDaemonEvent(msg) {
+  switch(msg.type) {
+    case 'new_email':
+      showToast('email', 'New Email', 'From: ' + (msg.data.from || 'unknown') + '\\n' + (msg.data.subject || ''), 10000);
+      // Auto-refresh emails
+      loadDash().then(function() {
+        if (currentView === 'dashboard' || currentView === 'emails') render();
+      }).catch(function(){});
+      break;
+
+    case 'meeting_alert':
+      showToast('meeting', 'Meeting in ' + msg.data.minutesUntil + ' min', msg.data.summary + (msg.data.location ? '\\n@ ' + msg.data.location : ''), 15000);
+      // Auto-refresh calendar
+      loadDash().then(function() {
+        if (currentView === 'dashboard' || currentView === 'calendar') render();
+      }).catch(function(){});
+      break;
+
+    case 'security_alert':
+      showToast('security', 'Security Alert', 'Suspicious: ' + (msg.data.from || '') + ' — ' + (msg.data.subject || ''), 20000);
+      break;
+
+    case 'plan_ready':
+      showToast('plan', 'Daily Plan Ready', 'Your plan for ' + msg.data.date + ' has been generated.', 10000);
+      if (currentView === 'plan') renderPlan(document.getElementById('content'));
+      break;
+  }
+}
+
+// ---- VOICE INPUT (in chat view) ----
+var voiceRecognition = null;
+var voiceRecording = false;
+
+function toggleVoiceInput() {
+  if (voiceRecording) {
+    stopVoiceInput();
+  } else {
+    startVoiceInput();
+  }
+}
+
+function startVoiceInput() {
+  var SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
+  if (!SpeechRecognition) {
+    showToast('security', 'Not Supported', 'Speech Recognition requires Chrome or Edge.', 5000);
+    return;
+  }
+
+  voiceRecording = true;
+  var mic = document.getElementById('chatMic');
+  if (mic) mic.classList.add('chat__mic--recording');
+
+  voiceRecognition = new SpeechRecognition();
+  voiceRecognition.continuous = false;
+  voiceRecognition.interimResults = false;
+  voiceRecognition.lang = navigator.language || 'en-US';
+
+  voiceRecognition.onresult = function(event) {
+    var transcript = '';
+    for (var i = 0; i < event.results.length; i++) {
+      transcript += event.results[i][0].transcript;
+    }
+    if (transcript.trim()) {
+      var inp = document.getElementById('chatInput');
+      if (inp) {
+        inp.value = transcript.trim();
+        sendChat();
+      }
+    }
+    stopVoiceInput();
+  };
+
+  voiceRecognition.onerror = function(e) {
+    if (e.error !== 'no-speech') {
+      showToast('security', 'Voice Error', e.error, 4000);
+    }
+    stopVoiceInput();
+  };
+
+  voiceRecognition.onend = function() {
+    stopVoiceInput();
+  };
+
+  voiceRecognition.start();
+}
+
+function stopVoiceInput() {
+  voiceRecording = false;
+  var mic = document.getElementById('chatMic');
+  if (mic) mic.classList.remove('chat__mic--recording');
+  if (voiceRecognition) {
+    try { voiceRecognition.stop(); } catch(e) {}
+    voiceRecognition = null;
+  }
+}
+
 // ---- INIT ----
 function init(){
   var el=document.getElementById('content');
@@ -651,6 +833,8 @@ function init(){
   loadDash().then(function(){render()}).catch(function(){render()});
   loadAgents().catch(function(){});
   setInterval(function(){loadDash().then(function(){if(currentView==='dashboard')render()}).catch(function(){})},120000);
+  // Connect to daemon WebSocket for real-time notifications
+  connectWebSocket();
 }
 init();
 `;
@@ -671,6 +855,7 @@ init();
 </head>
 <body>
 
+<div class="toast-container" id="toastContainer"></div>
 <div class="sidebar__overlay" id="overlay" onclick="closeSidebar()"></div>
 
 <div class="app">
@@ -700,6 +885,7 @@ init();
   <div class="header">
     <button class="header__burger" onclick="toggleSidebar()">&#9776;</button>
     <span class="header__title" id="headerTitle">Dashboard</span>
+    <span id="wsIndicator" style="color:var(--dim);font-size:8px;margin-right:4px" title="Daemon WebSocket">&#9679;</span>
     <span class="header__clock" id="clock"></span>
   </div>