nothumanallowed 9.5.1 → 9.6.0

package/src/services/web-ui.mjs

@@ -46,7 +46,10 @@ input:focus,textarea:focus{border-color:var(--green3)}
 
 /* ---- LAYOUT: mobile-first ---- */
 .app{display:flex;flex-direction:column;height:100vh;height:100dvh}
-/* header removed — info moved to sidebar brand */
+.header{display:flex;align-items:center;gap:12px;padding:10px 16px;border-bottom:1px solid var(--border);background:var(--bg);position:relative;z-index:60;flex-shrink:0}
+.header__burger{background:none;color:var(--green);font-size:22px;padding:4px 8px;line-height:1}
+.header__title{font-size:14px;color:var(--bright);font-weight:700;flex:1}
+.header__clock{font-size:10px;color:var(--dim)}
 
 .sidebar{display:none;position:fixed;top:0;left:0;width:260px;height:100vh;height:100dvh;background:var(--bg2);border-right:1px solid var(--border);z-index:200;flex-direction:column;overflow-y:auto;box-shadow:4px 0 20px rgba(0,0,0,0.8)}
 .sidebar--open{display:flex}
@@ -84,9 +87,8 @@ input:focus,textarea:focus{border-color:var(--green3)}
 .section-title{font-size:12px;color:var(--cyan);text-transform:uppercase;letter-spacing:1px;margin-bottom:10px}
 
 /* ---- CHAT ---- */
-.content--chat{overflow:hidden!important;padding:0!important;display:flex;flex-direction:column}
-.chat{display:flex;flex-direction:column;flex:1;min-height:0;padding:16px;padding-bottom:0}
-@media(min-width:901px){.content--chat{padding:0!important}}
+.chat{display:flex;flex-direction:column;height:calc(100vh - 52px);height:calc(100dvh - 52px)}
+@media(min-width:901px){.chat{height:calc(100vh - 52px)}}
 .chat__messages{flex:1;overflow-y:auto;padding-bottom:12px;-webkit-overflow-scrolling:touch}
 .chat__empty{text-align:center;padding:60px 16px;color:var(--dim)}
 .chat__empty-title{font-size:28px;color:var(--green);margin-bottom:12px}
@@ -96,30 +98,10 @@ input:focus,textarea:focus{border-color:var(--green3)}
 .msg--assistant .msg__bubble{background:var(--greendim);border:1px solid var(--green3);border-radius:8px 8px 8px 2px;padding:10px 14px;max-width:85%;color:var(--text);white-space:pre-wrap;word-wrap:break-word}
 .msg__label{font-size:10px;color:var(--dim);margin-bottom:2px}
 .msg--thinking{color:var(--dim);font-style:italic}
-.tool-indicator{display:inline-block;padding:2px 8px;margin:2px 0;border-radius:4px;font-size:11px;background:var(--bg3);border:1px solid var(--border)}
-.tool-indicator--browser{border-color:#9c27b0;color:#ce93d8}
-.tool-indicator--web{border-color:var(--cyan);color:var(--cyan)}
-.tool-indicator--email{border-color:var(--green3);color:var(--green)}
-.screenshot-preview{max-width:100%;border-radius:var(--r);margin:8px 0;border:1px solid var(--border)}
-.browser-viewer{position:fixed;top:12px;left:12px;width:440px;background:var(--bg2);border:2px solid #9c27b0;border-radius:8px;box-shadow:0 8px 32px rgba(0,0,0,0.6);z-index:300;overflow:hidden;display:none;transition:all .3s ease}
-.browser-viewer--open{display:block}
-.browser-viewer__header{display:flex;align-items:center;gap:6px;padding:6px 10px;background:#1a1a2e;border-bottom:1px solid #9c27b0;font-size:10px;color:#ce93d8}
-.browser-viewer__dot{width:6px;height:6px;border-radius:50%;background:#9c27b0;animation:bvpulse 1.5s infinite}
-@keyframes bvpulse{0%,100%{opacity:1}50%{opacity:.3}}
-.browser-viewer__title{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
-.browser-viewer__close{background:none;border:none;color:#666;cursor:pointer;font-size:14px;padding:0 4px}
-.browser-viewer__close:hover{color:#fff}
-.browser-viewer__frame{width:100%;aspect-ratio:16/9;background:#000;display:flex;align-items:center;justify-content:center}
-.browser-viewer__frame img{width:100%;height:100%;object-fit:contain}
-.browser-viewer__status{padding:4px 10px;font-size:9px;color:var(--dim);border-top:1px solid var(--border)}
-@media(max-width:600px){.browser-viewer{width:calc(100vw - 24px);top:8px;left:8px}}
-@media(min-width:901px){.browser-viewer{left:232px}}
-.chat__bar{display:flex;gap:8px;padding:10px 0 12px 0;border-top:1px solid var(--border);flex-shrink:0}
+.chat__bar{display:flex;gap:8px;padding:10px 0 0 0;border-top:1px solid var(--border);flex-shrink:0}
 .chat__input{flex:1;resize:none;min-height:40px;max-height:100px;padding:10px 14px}
 .chat__send{background:var(--green3);color:var(--bg);padding:10px 16px;border-radius:var(--r);font-weight:700;font-size:12px}
 .chat__send:disabled{opacity:.4}
-.chat__stop{background:var(--red);color:var(--bright);padding:10px 16px;border-radius:var(--r);font-weight:700;font-size:12px;display:none}
-.chat__stop--visible{display:block}
 
 /* ---- TASKS ---- */
 .task-bar{display:flex;gap:8px;margin-bottom:12px;flex-wrap:wrap}
@@ -216,52 +198,11 @@ input:focus,textarea:focus{border-color:var(--green3)}
   const JS = `
 var API = '';
 var currentView = 'dashboard';
-var chatHistory = [];
-var activeConvId = null;
-var convList = [];
+var chatHistory = (function(){try{var s=localStorage.getItem('nha_chat_history');return s?JSON.parse(s):[];}catch(e){return [];}})();
 var dash = {emails:[],events:[],tasks:[],plan:null,status:null};
-var dashLoaded = {emails:false,events:false,tasks:false,contacts:false,notes:false,drive:false,github:false,notion:false,slack:false};
-var chatStreaming = false;
-var chatAbortController = null;
-
-function endStreaming(){
-  chatStreaming=false;chatAbortController=null;
-  var stopBtn=document.getElementById('chatStop');if(stopBtn)stopBtn.classList.remove('chat__stop--visible');
-  var sendBtn=document.getElementById('chatSend');if(sendBtn)sendBtn.style.display='';
-}
-function stopChat(){
-  if(chatAbortController){try{chatAbortController.abort()}catch(e){}}
-  endStreaming();
-  if(chatHistory.length>0){
-    var last=chatHistory[chatHistory.length-1];
-    if(last.role==='assistant'&&(!last.content||last.content===''))last.content='[Stopped]';
-  }
-  renderMessages();
-}
 
-// ---- BROWSER VIEWER (live preview of headless Chrome) ----
-function showBrowserViewer(title,status){
-  var v=document.getElementById('browserViewer');if(!v)return;
-  v.classList.add('browser-viewer--open');
-  var t=document.getElementById('bvTitle');if(t)t.textContent=title||'Browser';
-  var s=document.getElementById('bvStatus');if(s)s.textContent=status||'Loading...';
-}
-function updateBrowserFrame(base64,format){
-  var f=document.getElementById('bvFrame');if(!f)return;
-  f.innerHTML='<img src="data:image/'+(format||'jpeg')+';base64,'+base64+'" alt="Browser view">';
-}
-function updateBrowserStatus(status){
-  var s=document.getElementById('bvStatus');if(s)s.textContent=status;
-}
-function closeBrowserViewer(){
-  var v=document.getElementById('browserViewer');if(v)v.classList.remove('browser-viewer--open');
-}
-
-function loadConvList(){return apiGet('/api/conversations').then(function(r){convList=(r&&r.conversations)||[];renderConvSidebar();})}
-function loadConv(id){return apiGet('/api/conversations/'+id).then(function(r){if(r&&r.conversation){activeConvId=r.conversation.id;chatHistory=r.conversation.messages||[];renderMessages();renderConvSidebar();}})}
-function createNewConv(){return apiPost('/api/conversations',{}).then(function(r){if(r&&r.conversation){activeConvId=r.conversation.id;chatHistory=[];renderMessages();loadConvList();}})}
-function deleteConv(id){return fetch(API+'/api/conversations/'+id,{method:'DELETE'}).then(function(){loadConvList();if(id===activeConvId)createNewConv();})}
-function clearChatHistory(){createNewConv()}
+function saveChatToStorage(){try{localStorage.setItem('nha_chat_history',JSON.stringify(chatHistory.slice(-40)));}catch(e){}}
+function clearChatHistory(){chatHistory=[];saveChatToStorage();renderMessages();}
 var agentsList = [];
 var selectedAgent = null;
 
@@ -278,11 +219,7 @@ function switchView(v) {
     if(el.dataset.view===v){el.classList.add('nav-item--active')}else{el.classList.remove('nav-item--active')}
   });
   var titles = {dashboard:'Dashboard',chat:'Chat',plan:'Daily Plan',tasks:'Tasks',emails:'Emails',calendar:'Calendar',drive:'Drive',contacts:'Contacts',notes:'Notes',onedrive:'OneDrive',mstodo:'Microsoft To Do',agents:'Agents',settings:'Settings'};
-  var spt=document.getElementById('sidebarPageTitle');
-  if(spt)spt.textContent=titles[v]||v;
-  // Toggle content--chat class for proper chat layout (no overflow, flex column)
-  var ct=document.getElementById('content');
-  if(ct){if(v==='chat'){ct.classList.add('content--chat')}else{ct.classList.remove('content--chat')}}
+  document.getElementById('headerTitle').textContent = titles[v]||v;
   closeSidebar();
   render();
 }
@@ -314,11 +251,10 @@ function apiPatch(p){return fetch(API+p,{method:'PATCH'}).then(function(r){retur
 
 // ---- LOAD DATA ----
 function loadDash(){
-  // Load each API independently — render as each arrives (emails are slow)
-  apiGet('/api/status').then(function(r){dash.status=r;render()});
-  apiGet('/api/tasks').then(function(r){dash.tasks=(r&&r.tasks)||[];dashLoaded.tasks=true;updateBadges();render()});
-  apiGet('/api/calendar').then(function(r){dash.events=(r&&r.events)||[];dashLoaded.events=true;updateBadges();render()});
-  return apiGet('/api/emails').then(function(r){dash.emails=(r&&r.emails)||[];dashLoaded.emails=true;updateBadges();render()});
+  return Promise.all([apiGet('/api/status'),apiGet('/api/emails'),apiGet('/api/calendar'),apiGet('/api/tasks')]).then(function(r){
+    dash.status=r[0];dash.emails=(r[1]&&r[1].emails)||[];dash.events=(r[2]&&r[2].events)||[];dash.tasks=(r[3]&&r[3].tasks)||[];
+    updateBadges();
+  });
 }
 function loadAgents(){return apiGet('/api/agents').then(function(r){agentsList=(r&&r.agents)||[]})}
 function updateBadges(){
@@ -332,7 +268,6 @@ function updateBadges(){
 // ---- HELPERS ----
 function esc(s){return s?String(s).replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;'):''}
 function fmtTime(iso){if(!iso)return '';try{return new Date(iso).toLocaleTimeString('en',{hour:'2-digit',minute:'2-digit',hour12:true})}catch(e){return iso}}
-function loadingHTML(label){return '<div style="text-align:center;padding:40px"><div class="spinner"></div><div style="color:var(--dim);margin-top:8px;font-size:12px">Loading '+esc(label)+'...</div></div>'}
 
 // ---- RENDER ----
 function render(){
@@ -361,14 +296,13 @@ function render(){
 
 // ---- DASHBOARD ----
 function renderDash(el){
-  if(!dashLoaded.tasks&&!dashLoaded.events&&!dashLoaded.emails){el.innerHTML=loadingHTML('dashboard');return}
   var t=dash.tasks,e=dash.emails,ev=dash.events;
   var done=t.filter(function(x){return x.status==='done'}).length;
   var pend=t.length-done;
   var pct=t.length>0?Math.round(done/t.length*100):0;
   var h='<div class="dash-grid">'+
     '<div class="card"><div class="card__title">Tasks</div><div class="card__value">'+pend+'</div><div class="card__sub">'+done+'/'+t.length+' done ('+pct+'%)</div></div>'+
-    '<div class="card"><div class="card__title">Emails</div><div class="card__value">'+(dashLoaded.emails?e.length:'<span class="spinner" style="width:14px;height:14px;display:inline-block;vertical-align:middle"></span>')+'</div><div class="card__sub">'+(dashLoaded.emails?(e.length>0?esc(e[0].from):'Inbox zero'):'Loading...')+'</div></div>'+
+    '<div class="card"><div class="card__title">Emails</div><div class="card__value">'+e.length+'</div><div class="card__sub">'+(e.length>0?esc(e[0].from):'Inbox zero')+'</div></div>'+
     '<div class="card"><div class="card__title">Events</div><div class="card__value">'+ev.length+'</div><div class="card__sub">'+(ev.length>0?esc(ev[0].summary):'No events')+'</div></div>'+
     '<div class="card"><div class="card__title">Agents</div><div class="card__value">38</div><div class="card__sub">Ready</div></div>'+
   '</div>';
@@ -382,225 +316,67 @@ function renderDash(el){
 var chatReady=false;
 function renderChat(el){
   if(!chatReady||!document.getElementById('chatMessages')){
-    el.innerHTML='<div style="display:flex;height:calc(100vh - 56px)">'+
-      '<div id="convSidebar" style="width:220px;border-right:1px solid var(--border);overflow-y:auto;flex-shrink:0;background:var(--bg);display:'+(localStorage.getItem('nha_conv_sidebar')==='hidden'?'none':'')+'">'+
-        '<div style="padding:8px"><button onclick="createNewConv()" style="width:100%;padding:8px;border-radius:var(--r);border:1px solid var(--green);background:transparent;color:var(--green);cursor:pointer;font-size:11px">+ New Chat</button></div>'+
-        '<div id="convList"></div>'+
-      '</div>'+
-      '<div style="flex:1;display:flex;flex-direction:column;min-width:0">'+
-        '<div style="padding:6px 12px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:8px">'+
-          '<button onclick="toggleConvSidebar()" style="background:none;border:none;cursor:pointer;font-size:14px;color:var(--dim);padding:2px 6px" title="Toggle conversations">&#128172;</button>'+
-          '<span id="convTitle" style="flex:1;font-size:12px;color:var(--fg);overflow:hidden;text-overflow:ellipsis;white-space:nowrap">New Chat</span>'+
-          '<button onclick="createNewConv()" style="background:none;border:1px solid var(--green);color:var(--green);padding:4px 10px;border-radius:var(--r);cursor:pointer;font-size:10px">+ New</button>'+
-          '<button onclick="exportConvMd()" style="background:none;border:1px solid var(--border);color:var(--dim);padding:4px 8px;border-radius:var(--r);cursor:pointer;font-size:10px" title="Export Markdown">Export</button>'+
-        '</div>'+
-        '<div class="chat"><div class="chat__messages" id="chatMessages"></div>'+
-        '<div id="chatAttachInfo" style="display:none;padding:4px 12px;font-size:11px;color:var(--cyan);background:var(--bg2);border-top:1px solid var(--border)"><span id="chatAttachName"></span> <button onclick="clearChatAttach()" style="background:none;border:none;color:#f44;cursor:pointer;font-size:14px;font-weight:700">&times;</button></div>'+
-        '<div class="chat__bar"><button class="chat__mic" id="chatMic" onclick="toggleVoiceInput()" title="Voice input">&#127908;</button><button onclick="document.getElementById(\\x27chatFileInput\\x27).click()" style="background:none;border:none;cursor:pointer;font-size:16px;padding:4px" title="Attach file">&#128206;</button><button onclick="document.getElementById(\\x27chatImageInput\\x27).click()" style="background:none;border:none;cursor:pointer;font-size:16px;padding:4px" title="Attach image">&#128247;</button><input type="file" id="chatFileInput" style="display:none" onchange="handleChatFile(this)"><input type="file" id="chatImageInput" accept="image/*" style="display:none" onchange="handleChatImage(this)"><textarea class="chat__input" id="chatInput" placeholder="Ask anything... (or attach file/image first)" rows="1"></textarea><button class="chat__send" id="chatSend">Send</button><button class="chat__stop" id="chatStop" onclick="stopChat()">Stop</button></div>'+
-        '</div>'+
-      '</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><button onclick="clearChatHistory()" style="background:none;color:var(--dim);font-size:10px;padding:4px 8px" title="Clear chat history">Clear</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()}};
-    loadConvList().then(function(){
-      if(!activeConvId&&convList.length>0){loadConv(convList[0].id)}
-      else if(!activeConvId){createNewConv()}
-      else{loadConv(activeConvId)}
-    });
+    renderMessages();
     setTimeout(function(){var i=document.getElementById('chatInput');if(i)i.focus()},100);
   }
 }
-function toggleConvSidebar(){var s=document.getElementById('convSidebar');if(!s)return;var hide=s.style.display!=='none';s.style.display=hide?'none':'';try{localStorage.setItem('nha_conv_sidebar',hide?'hidden':'visible')}catch(e){}}
-function renderConvSidebar(){
-  var el=document.getElementById('convList');if(!el)return;
-  var h='';convList.forEach(function(c){
-    var active=c.id===activeConvId;
-    var turns=Math.floor(c.messageCount/2);
-    h+='<div onclick="loadConv(\\x27'+c.id+'\\x27)" style="padding:8px 12px;cursor:pointer;border-left:3px solid '+(active?'var(--green)':'transparent')+';background:'+(active?'var(--bg2)':'transparent')+'" onmouseover="this.style.background=\\x27var(--bg2)\\x27" onmouseout="this.style.background='+(active?"\\x27var(--bg2)\\x27":"\\x27transparent\\x27")+'">'+
-      '<div style="font-size:11px;color:var(--fg);overflow:hidden;text-overflow:ellipsis;white-space:nowrap">'+esc(c.title)+'</div>'+
-      '<div style="font-size:9px;color:var(--dim);display:flex;gap:6px;margin-top:2px"><span>'+turns+' turns</span>'+(active?'':'<span onclick="event.stopPropagation();deleteConv(\\x27'+c.id+'\\x27)" style="color:var(--red);cursor:pointer">del</span>')+'</div>'+
-    '</div>';
-  });
-  el.innerHTML=h;
-  var t=document.getElementById('convTitle');
-  if(t){var ac=convList.find(function(c){return c.id===activeConvId});t.textContent=ac?ac.title:'New Chat';}
-}
-function exportConvMd(){if(!activeConvId)return;window.open(API+'/api/conversations/'+activeConvId+'/export?format=md','_blank');}
 function renderMessages(){
   var el=document.getElementById('chatMessages');if(!el)return;
   if(chatHistory.length===0){
-    el.innerHTML='<div class="chat__empty"><div class="chat__empty-title">NHA Chat</div><div>Personal Operations Assistant — Streaming + Web Search + Browser</div><div class="chat__empty-hint">Try: Show my unread emails / Search the web for React 19 / Open google.com and take a screenshot</div></div>';
+    el.innerHTML='<div class="chat__empty"><div class="chat__empty-title">NHA Chat</div><div>Personal Operations Assistant</div><div class="chat__empty-hint">Try: Show my unread emails / What is on my calendar? / Add a task</div></div>';
     return;
   }
   var h='';chatHistory.forEach(function(m){
-    var raw=m.content||'';
-    // Strip any raw base64 data that leaked into content (from LLM hallucinations)
-    raw=raw.replace(/data:image\\/[a-z]+;base64,[A-Za-z0-9+\\/=]{200,}/g,'[image]');
-    raw=raw.replace(/[A-Za-z0-9+\\/=]{500,}/g,'');
-    var imgs=[];var idx=0;
-    // Match both /api/screenshots/ URLs and data:image (short ones only, for inline display)
-    var safe=raw.replace(/!\\[([^\\]]*)\\]\\((\\/api\\/screenshots\\/[a-zA-Z0-9._-]+)\\)/g,function(_,alt,src){var ph='__IMG'+idx+'__';imgs.push({ph:ph,alt:alt,src:src});idx++;return ph;});
-    var content=esc(safe);
-    for(var i=0;i<imgs.length;i++){content=content.replace(imgs[i].ph,'<img class="screenshot-preview" alt="'+esc(imgs[i].alt)+'" src="'+imgs[i].src+'">');}
-    h+='<div class="msg msg--'+esc(m.role)+'"><div class="msg__label">'+esc(m.role==='user'?'You':'NHA')+'</div><div class="msg__bubble">'+content+'</div></div>';
+    var content = m.content || '';
+    // Handle canvas render markers
+    var canvasMatch = content.match(/\\[CANVAS_RENDER\\](.*?)\\[\\/CANVAS_RENDER\\]/s);
+    if (canvasMatch) {
+      try { var cd = JSON.parse(canvasMatch[1]); showCanvas(cd.html, cd.title); } catch(e){}
+      content = content.replace(/\\[CANVAS_RENDER\\].*?\\[\\/CANVAS_RENDER\\]/s, '').trim();
+    }
+    if (content.indexOf('[CANVAS_CLEAR]') !== -1) {
+      closeCanvas();
+      content = content.replace(/\\[CANVAS_CLEAR\\].*?\\[\\/CANVAS_CLEAR\\]/s, '').trim();
+    }
+    // Handle screenshot markers
+    var screenshotMatch = content.match(/\\[SCREENSHOT\\](.*?)\\[\\/SCREENSHOT\\]/);
+    if (screenshotMatch) {
+      var imgPath = screenshotMatch[1];
+      content = content.replace(/\\[SCREENSHOT\\].*?\\[\\/SCREENSHOT\\]/, '');
+      content = '<img src="/api/screenshots/' + encodeURIComponent(imgPath.split('/').pop()) + '" style="max-width:100%;border-radius:8px;margin:8px 0" />' + content;
+    }
+    var bubbleContent = m.role === 'assistant' ? content : esc(content);
+    h+='<div class="msg msg--'+esc(m.role)+'"><div class="msg__label">'+esc(m.role==='user'?'You':'NHA')+'</div><div class="msg__bubble">'+bubbleContent+'</div></div>';
   });
   el.innerHTML=h;el.scrollTop=el.scrollHeight;
 }
-var chatAttachedFile=null;
-var chatAttachedImage=null;
-
-function handleChatFile(input){
-  var file=input.files&&input.files[0];if(!file)return;
-  var isPDF=file.name.toLowerCase().endsWith('.pdf')||file.type==='application/pdf';
-  if(isPDF){
-    // PDF: read as base64 and send as document to LLM
-    var reader=new FileReader();
-    reader.onload=function(e){
-      var base64=e.target.result.split(',')[1];
-      chatAttachedFile={name:file.name,size:file.size,content:null,base64:base64,mimeType:'application/pdf',isPDF:true};
-      chatAttachedImage=null;
-      document.getElementById('chatAttachInfo').style.display='';
-      document.getElementById('chatAttachName').textContent='📎 '+file.name+' ('+Math.round(file.size/1024)+' KB)';
-    };
-    reader.readAsDataURL(file);
-  }else{
-    var reader=new FileReader();
-    reader.onload=function(e){
-      chatAttachedFile={name:file.name,size:file.size,content:e.target.result};
-      chatAttachedImage=null;
-      document.getElementById('chatAttachInfo').style.display='';
-      document.getElementById('chatAttachName').textContent='📎 '+file.name+' ('+Math.round(file.size/1024)+' KB)';
-    };
-    reader.readAsText(file);
-  }
-}
-
-function handleChatImage(input){
-  var file=input.files&&input.files[0];if(!file)return;
-  var reader=new FileReader();
-  reader.onload=function(e){
-    var base64=e.target.result.split(',')[1];
-    chatAttachedImage={name:file.name,size:file.size,base64:base64,mimeType:file.type||'image/jpeg'};
-    chatAttachedFile=null;
-    document.getElementById('chatAttachInfo').style.display='';
-    document.getElementById('chatAttachName').textContent='📷 '+file.name+' ('+Math.round(file.size/1024)+' KB)';
-  };
-  reader.readAsDataURL(file);
-}
-
-function clearChatAttach(){
-  chatAttachedFile=null;chatAttachedImage=null;
-  document.getElementById('chatAttachInfo').style.display='none';
-  document.getElementById('chatFileInput').value='';
-  document.getElementById('chatImageInput').value='';
-}
-
 function sendChat(){
   var inp=document.getElementById('chatInput');if(!inp)return;
-  var msg=inp.value.trim();
-  var hasAttach=!!chatAttachedFile||!!chatAttachedImage;
-  if(!msg&&!hasAttach)return;
-  if(chatStreaming)return;
-
-  var displayMsg=msg;
-  if(chatAttachedFile)displayMsg=(msg?msg+' ':'')+'[File: '+chatAttachedFile.name+']';
-  if(chatAttachedImage)displayMsg=(msg?msg+' ':'')+'[Image: '+chatAttachedImage.name+']';
-
-  chatHistory.push({role:'user',content:displayMsg});
-  inp.value='';renderMessages();
-
-  // If attachment, use regular (non-streaming) endpoint
-  if(chatAttachedFile||chatAttachedImage){
-    chatHistory.push({role:'assistant',content:'Thinking...'});renderMessages();
-    var payload={message:msg||'Analyze this attachment',history:chatHistory.slice(0,-1)};
-    if(chatAttachedFile){
-      if(chatAttachedFile.isPDF&&chatAttachedFile.base64){payload.pdfBase64=chatAttachedFile.base64;payload.pdfName=chatAttachedFile.name;}
-      else{payload.fileContent=chatAttachedFile.content;payload.fileName=chatAttachedFile.name;}
-    }
-    if(chatAttachedImage){payload.imageBase64=chatAttachedImage.base64;payload.imageMimeType=chatAttachedImage.mimeType;}
-    clearChatAttach();
-    apiPost('/api/chat',payload).then(function(r){
-      chatHistory.pop();
-      if(r&&r.response){chatHistory.push({role:'assistant',content:r.response})}
-      else if(r&&r.error){chatHistory.push({role:'assistant',content:'Error: '+r.error})}
-      else{chatHistory.push({role:'assistant',content:'Error: no response'})}
-      renderMessages();loadConvList();
-    });
-    return;
-  }
-  clearChatAttach();
-
-  // Streaming SSE
-  chatStreaming=true;
-  chatAbortController=new AbortController();
-  // Show Stop button, hide Send button
-  var stopBtn=document.getElementById('chatStop');if(stopBtn)stopBtn.classList.add('chat__stop--visible');
-  var sendBtn=document.getElementById('chatSend');if(sendBtn)sendBtn.style.display='none';
-  chatHistory.push({role:'assistant',content:''});
-  renderMessages();
-  var streamIdx=chatHistory.length-1;
-  var allHistory=chatHistory.slice(0,-1).map(function(m){return{role:m.role,content:(m.content||'').replace(/!\\[Screenshot\\]\\(data:image\\/[^)]+\\)/g,'[Screenshot taken]')};});
-  var payload={message:msg,history:allHistory,conversationId:activeConvId};
-
-  fetch(API+'/api/chat/stream',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify(payload),signal:chatAbortController.signal}).then(function(response){
-    if(!response.ok||!response.body){chatHistory[streamIdx].content='Error: connection failed';endStreaming();renderMessages();return;}
-    var reader=response.body.getReader();var decoder=new TextDecoder();var buffer='';var currentEvent='';
-    function pump(){
-      reader.read().then(function(result){
-        if(result.done){endStreaming();renderMessages();loadConvList();return;}
-        buffer+=decoder.decode(result.value,{stream:true});
-        var lines=buffer.split('\\n');buffer=lines.pop()||'';
-        for(var i=0;i<lines.length;i++){
-          var line=lines[i];
-          if(line.startsWith('event: ')){currentEvent=line.slice(7).trim();}
-          else if(line.startsWith('data: ')){
-            try{
-              var data=JSON.parse(line.slice(6));
-              if(currentEvent==='token'&&data.content){
-                chatHistory[streamIdx].content+=data.content;
-                var el=document.getElementById('chatMessages');
-                if(el){var msgs=el.querySelectorAll('.msg');var last=msgs[msgs.length-1];if(last){var bub=last.querySelector('.msg__bubble');if(bub)bub.textContent=chatHistory[streamIdx].content;}el.scrollTop=el.scrollHeight;}
-              }
-              if(currentEvent==='tool'){
-                var toolLabels={browser_open:'Opening page',browser_screenshot:'Taking screenshot',browser_click:'Clicking element',browser_type:'Typing text',browser_extract:'Extracting content',browser_js:'Running JavaScript',browser_wait:'Waiting for element',browser_scroll:'Scrolling page',browser_key:'Pressing key',browser_close:'Closing browser',web_search:'Searching the web',fetch_url:'Fetching URL',gmail_list:'Searching emails',gmail_read:'Reading email',gmail_send:'Sending email',calendar_today:'Loading calendar',calendar_create:'Creating event'};
-                var label=toolLabels[data.action]||data.action;
-                var indicator=data.status==='executing'?'\\u23f3 '+label+'...':'\\u2705 '+label;
-                if(data.status==='error')indicator='\\u274c '+label+' failed';
-                // Show browser viewer for browser and web_search actions
-                var isBrowserAction=data.action&&(data.action.startsWith('browser_')||data.action==='web_search');
-                if(isBrowserAction&&data.status==='executing'){showBrowserViewer(label,'Executing...');}
-                if(isBrowserAction&&data.status==='done'){updateBrowserStatus('\\u2705 '+label);}
-                if(isBrowserAction&&data.status==='error'){updateBrowserStatus('\\u274c '+label);}
-                if(data.action==='browser_close'&&data.status==='done'){setTimeout(closeBrowserViewer,2000);}
-                // Strip JSON action blocks from streamed content (they are internal tool calls, not for the user)
-                if(data.status==='executing'){chatHistory[streamIdx].content=chatHistory[streamIdx].content.replace(new RegExp('\\x60\\x60\\x60json[\\\\s\\\\S]*?\\x60\\x60\\x60','g'),'').trim()+'\\n';}
-                chatHistory[streamIdx].content+=indicator+'\\n';
-                renderMessages();
-              }
-              if(currentEvent==='screenshot'&&data.base64){
-                // Only update the browser viewer — the actual image in chat is handled by the 'done' event via screenshotFiles
-                showBrowserViewer('Screenshot','Captured');
-                updateBrowserFrame(data.base64,data.format||'jpeg');
-                updateBrowserStatus('Screenshot captured');
-              }
-              if(currentEvent==='browser_frame'&&data.base64){
-                // Live frame update — also ensure viewer is open
-                showBrowserViewer(data.url||'Browser','Live');
-                updateBrowserFrame(data.base64,data.format||'jpeg');
-                if(data.url)updateBrowserStatus(data.url);
-              }
-              if(currentEvent==='tool_synthesis'){chatHistory[streamIdx].content='';renderMessages();}
-              if(currentEvent==='done'){endStreaming();if(data.content)chatHistory[streamIdx].content=data.content;var ssf=data.screenshotFiles||[];for(var fi=0;fi<ssf.length;fi++){chatHistory[streamIdx].content+='\\n![Screenshot](/api/screenshots/'+ssf[fi]+')\\n';}renderMessages();loadConvList();if(ssf.length>0)setTimeout(closeBrowserViewer,5000);}
-              if(currentEvent==='error'){endStreaming();chatHistory[streamIdx].content='Error: '+(data.message||'Unknown');renderMessages();}
-            }catch(e){}
-          }
-        }
-        pump();
-      }).catch(function(e){endStreaming();if(e.name!=='AbortError'){chatHistory[streamIdx].content='Error: '+e.message;renderMessages();}});
+  var msg=inp.value.trim();if(!msg)return;
+  chatHistory.push({role:'user',content:msg});
+  inp.value='';saveChatToStorage();renderMessages();
+  chatHistory.push({role:'assistant',content:'Thinking...'});renderMessages();
+  apiPost('/api/chat',{message:msg,history:chatHistory.slice(0,-1)}).then(function(r){
+    chatHistory.pop();
+    if(r&&r.response){chatHistory.push({role:'assistant',content:r.response})}
+    else if(r&&r.error){chatHistory.push({role:'assistant',content:'Error: '+r.error})}
+    else{chatHistory.push({role:'assistant',content:'Error: no response from server'})}
+    saveChatToStorage();renderMessages();
+    // Refresh ALL data after any tool execution
+    if(r&&((r.actions&&r.actions.length>0)||(r.toolResults&&r.toolResults.length>0))){
+      calEventsCache={};
+      contactsData=null;
+      notesData=null;
+      driveData=null;
+      onedriveData=null;
+      mstodoData=null;
+      loadDash().then(function(){render()}).catch(function(){});
     }
-    pump();
-  }).catch(function(e){endStreaming();if(e.name!=='AbortError'){chatHistory[streamIdx].content='Error: '+e.message;renderMessages();}});
+  });
 }
 
 // ---- TASKS ----
@@ -670,42 +446,17 @@ function refreshPlan(){
 
 // ---- EMAILS ----
 function renderEmails(el){
-  if(!dashLoaded.emails){el.innerHTML=loadingHTML('emails');return}
   var e=dash.emails;
-  if(e.length===0){el.innerHTML='<div class="card" style="text-align:center;color:var(--dim);padding:30px">Inbox zero — no emails</div>';return}
-  var unreadCount=e.filter(function(x){return x.isUnread}).length;
-  var h='<div style="display:flex;gap:8px;margin-bottom:10px;align-items:center">';
-  h+='<span style="font-size:12px;color:var(--dim)">'+e.length+' emails'+( unreadCount>0?' ('+unreadCount+' unread)':'')+'</span>';
-  if(unreadCount>0)h+='<button class="btn btn--secondary" style="font-size:10px;padding:4px 10px" onclick="markAllEmailsRead()">Mark all read</button>';
-  h+='</div>';
-  e.forEach(function(x){
+  if(e.length===0){el.innerHTML='<div class="card" style="text-align:center;color:var(--dim);padding:30px">No unread emails</div>';return}
+  var h='';e.forEach(function(x){
     var unreadStyle=x.isUnread?'border-left:3px solid var(--green);font-weight:700':'border-left:3px solid transparent;opacity:0.7';
     h+='<div class="card email" style="cursor:pointer;'+unreadStyle+'" onclick="openEmail(\\x27'+esc(x.id)+'\\x27)"><div class="email__header"><span class="email__from">'+esc(x.from)+'</span><span class="email__date">'+esc(x.date)+(x.isUnread?' <span style="color:var(--green);font-size:9px">NEW</span>':'')+'</span></div><div class="email__subject">'+esc(x.subject)+'</div><div class="email__snippet" style="font-weight:400">'+esc((x.snippet||'').slice(0,150))+'</div></div>';
   });
   el.innerHTML=h;
 }
-function markAllEmailsRead(){
-  apiPost('/api/email/mark-all-read',{}).then(function(r){
-    if(r&&r.ok){
-      dash.emails.forEach(function(e){e.isUnread=false});
-      updateBadges();
-      renderEmails(document.getElementById('content'));
-      showToast('success','All Read','Marked '+( r.count||0)+' emails as read');
-    }else{
-      showToast('error','Error',r&&r.error||'Failed');
-    }
-  });
-}
 var openEmailId=null;
 function openEmail(id){
   openEmailId=id;
-  // Mark as read locally + on server
-  var emailObj=dash.emails.find(function(e){return e.id===id});
-  if(emailObj&&emailObj.isUnread){
-    emailObj.isUnread=false;
-    updateBadges();
-    apiPost('/api/email/mark-read',{messageId:id}).catch(function(){});
-  }
   var el=document.getElementById('content');
   el.innerHTML='<div style="text-align:center;padding:40px"><div class="spinner"></div><div style="color:var(--dim)">Loading email...</div></div>';
   apiPost('/api/email/read',{messageId:id}).then(function(r){
@@ -1354,68 +1105,22 @@ function renderAgents(el){
 
   var filtered=agentFilter?agentsList.filter(function(a){return a.category===agentFilter}):agentsList;
 
-  h+='<div style="margin-bottom:10px"><button class="btn btn--primary" style="font-size:11px" onclick="showCreateAgentForm()">+ Create Agent</button></div>';
   h+='<div class="agents-grid">';
   filtered.forEach(function(a){
     var name=a.name||a.agentName;
     var display=a.displayName||name;
     var icon=AGENT_ICONS[name.toLowerCase()]||'\\u{1F916}';
     var desc=AGENT_DESCRIPTIONS[name.toLowerCase()]||a.tagline||a.description||'';
-    var isCustom=a.category==='custom';
-    h+='<div class="card agent-card" style="position:relative">'+
-      '<div style="flex:1;cursor:pointer" onclick="openAgent(\\''+esc(name)+'\\',\\''+esc(display)+'\\')">'+
-      '<div style="display:flex;align-items:center;gap:8px">'+
+    h+='<div class="card agent-card" onclick="openAgent(\\''+esc(name)+'\\',\\''+esc(display)+'\\')">'+
       '<div class="agent-card__icon">'+icon+'</div>'+
       '<div class="agent-card__body"><div class="agent-card__name">'+esc(display)+'</div>'+
       '<div class="agent-card__tagline">'+esc(desc)+'</div></div>'+
-      '</div></div>'+
-      '<div style="display:flex;gap:4px;flex-shrink:0">'+
-      '<button onclick="editAgent(\\''+esc(name)+'\\')" style="background:none;border:none;cursor:pointer;font-size:12px;padding:2px" title="Edit">\\u{270F}\\u{FE0F}</button>'+
-      '<button onclick="deleteAgent(\\''+esc(name)+'\\')" style="background:none;border:none;cursor:pointer;font-size:12px;padding:2px;color:#f44" title="Delete">\\u{1F5D1}</button>'+
-      '</div>'+
     '</div>';
   });
   h+='</div>';
   el.innerHTML=h;
 }
 var agentFilter=null;
-
-function showCreateAgentForm(){
-  var name=prompt('Agent name (lowercase, no spaces):');
-  if(!name)return;
-  name=name.toLowerCase().replace(/[^a-z0-9_-]/g,'');
-  if(!name)return;
-  var tagline=prompt('Tagline (short description):');
-  if(!tagline)return;
-  var sysPrompt=prompt('System prompt (agent personality & instructions):');
-  if(!sysPrompt)return;
-  apiPost('/api/agents',{name:name,tagline:tagline,systemPrompt:sysPrompt}).then(function(r){
-    if(r&&r.ok){showToast('success','Agent Created',name.toUpperCase()+' is ready to use');loadAgents().then(function(){renderAgents(document.getElementById('content'))});}
-    else{alert('Error: '+(r&&r.error||'Unknown'));}
-  });
-}
-
-function editAgent(name){
-  fetch('/api/agents/'+name).then(function(r){return r.json()}).then(function(data){
-    var newTagline=prompt('Tagline:',data.tagline||'');
-    if(newTagline===null)return;
-    var newPrompt=prompt('System prompt:',data.systemPrompt||'');
-    if(newPrompt===null)return;
-    fetch('/api/agents/'+name,{method:'PUT',headers:{'Content-Type':'application/json'},body:JSON.stringify({tagline:newTagline,systemPrompt:newPrompt,category:data.category||'custom'})}).then(function(r){return r.json()}).then(function(r){
-      if(r&&r.ok){showToast('success','Agent Updated',name.toUpperCase()+' updated');loadAgents().then(function(){renderAgents(document.getElementById('content'))});}
-      else{alert('Error: '+(r&&r.error||'Unknown'));}
-    });
-  });
-}
-
-function deleteAgent(name){
-  if(!confirm('Delete agent "'+name+'"? This cannot be undone.'))return;
-  fetch('/api/agents/'+name,{method:'DELETE'}).then(function(r){return r.json()}).then(function(r){
-    if(r&&r.ok){showToast('success','Agent Deleted',name+' removed');loadAgents().then(function(){renderAgents(document.getElementById('content'))});}
-    else{alert('Error: '+(r&&r.error||'Unknown'));}
-  });
-}
-
 function openAgent(name,display){
   selectedAgent=name;
   attachedFileContent=null;attachedFileName=null;
@@ -1498,26 +1203,9 @@ function renderSettings(el) {
       ['summary-time', 'Summary Time', '18:00'],
       ['meeting-alert', 'Meeting Alert (minutes)', '30'],
     ]) +
-    '<div class="card" style="margin-top:16px"><div class="card__title">Google Account</div>' +
-    '<div style="font-size:11px;color:var(--dim);margin-bottom:8px">Connect Gmail, Calendar, Drive, Contacts, and Tasks. Opens a browser window for Google sign-in.</div>' +
-    (settingsData.hasGoogle ? '<div style="color:var(--green);font-size:12px;margin-bottom:8px">\\u2705 Connected</div>' : '') +
-    '<button onclick="connectGoogle()" style="background:var(--green3);color:var(--bg);padding:8px 20px;border-radius:var(--r);font-weight:700;font-size:12px;cursor:pointer;border:none">' + (settingsData.hasGoogle ? 'Reconnect Google' : 'Connect Google') + '</button>' +
-    '<div id="googleStatus" style="margin-top:8px;font-size:10px;color:var(--dim)"></div>' +
-    '</div>' +
   '</div>';
 }
 
-function connectGoogle() {
-  var s = document.getElementById('googleStatus');
-  if (s) s.textContent = 'Starting Google sign-in...';
-  apiPost('/api/google/auth', {}).then(function(r) {
-    if (s) s.textContent = r.message || 'Check the browser window that opened.';
-    if (s) s.style.color = 'var(--green)';
-  }).catch(function(e) {
-    if (s) { s.textContent = 'Error: ' + e.message; s.style.color = 'var(--red)'; }
-  });
-}
-
 function settingsSection(id, title, desc, fields) {
   var h = '<form class="card" style="margin-bottom:16px" id="settings-' + id + '" onsubmit="event.preventDefault();saveSettingsSection(\\x27' + id + '\\x27)">' +
     '<div class="card__title" style="color:var(--green);font-size:14px;margin-bottom:4px">' + esc(title) + '</div>' +
@@ -1738,6 +1426,61 @@ function handleDaemonEvent(msg) {
       showToast('plan', 'Daily Plan Ready', 'Your plan for ' + msg.data.date + ' has been generated.', 10000);
       if (currentView === 'plan') renderPlan(document.getElementById('content'));
       break;
+
+    case 'cron_result':
+      showToast('cron', 'Scheduled Task', msg.data.prompt + '\\n' + (msg.data.result || '').slice(0, 100), 8000);
+      break;
+  }
+}
+
+// ---- CANVAS PANEL ----
+var canvasVisible = false;
+function showCanvas(html, title) {
+  var panel = document.getElementById('canvasPanel');
+  if (!panel) {
+    panel = document.createElement('div');
+    panel.id = 'canvasPanel';
+    panel.style.cssText = 'position:fixed;top:60px;right:12px;width:480px;max-height:calc(100vh - 80px);background:#0d0d0d;border:1px solid var(--green);border-radius:12px;z-index:1000;overflow:hidden;display:flex;flex-direction:column;box-shadow:0 0 30px rgba(0,255,65,0.1)';
+    document.body.appendChild(panel);
+  }
+  var header = '<div style="display:flex;align-items:center;justify-content:space-between;padding:8px 12px;border-bottom:1px solid var(--green);background:rgba(0,255,65,0.05)">' +
+    '<span style="font-family:var(--mono);color:var(--green);font-size:12px">' + (title || 'Canvas') + '</span>' +
+    '<div><button onclick="toggleCanvasSize()" style="background:none;border:none;color:var(--dim);cursor:pointer;font-size:14px;margin-right:8px" title="Resize">&#x2922;</button>' +
+    '<button onclick="closeCanvas()" style="background:none;border:none;color:var(--dim);cursor:pointer;font-size:14px" title="Close">&times;</button></div></div>';
+  var iframe = '<iframe id="canvasFrame" sandbox="allow-scripts allow-same-origin" style="flex:1;border:none;background:#fff;min-height:300px;width:100%"></iframe>';
+  panel.innerHTML = header + iframe;
+  panel.style.display = 'flex';
+  canvasVisible = true;
+
+  // Write HTML to iframe
+  var frame = document.getElementById('canvasFrame');
+  if (frame) {
+    var doc = frame.contentDocument || frame.contentWindow.document;
+    doc.open();
+    doc.write(html);
+    doc.close();
+  }
+}
+
+function closeCanvas() {
+  var panel = document.getElementById('canvasPanel');
+  if (panel) { panel.style.display = 'none'; canvasVisible = false; }
+}
+
+function toggleCanvasSize() {
+  var panel = document.getElementById('canvasPanel');
+  if (!panel) return;
+  if (panel.style.width === '480px') {
+    panel.style.width = '80vw';
+    panel.style.height = '80vh';
+    panel.style.top = '10vh';
+    panel.style.right = '10vw';
+  } else {
+    panel.style.width = '480px';
+    panel.style.height = '';
+    panel.style.maxHeight = 'calc(100vh - 80px)';
+    panel.style.top = '60px';
+    panel.style.right = '12px';
   }
 }
 
@@ -1843,13 +1586,8 @@ init();
 <div class="app">
   <nav class="sidebar" id="sidebar">
     <div class="sidebar__brand">
-      <div style="display:flex;align-items:center;gap:8px">
-        <div class="sidebar__brand-name">NHA</div>
-        <span id="wsIndicator" style="color:var(--dim);font-size:8px" title="Daemon WebSocket">&#9679;</span>
-        <span style="font-size:9px;color:var(--dim)">v${VERSION}</span>
-      </div>
-      <div id="sidebarPageTitle" style="font-size:11px;color:var(--bright);margin-top:4px;font-weight:600">Dashboard</div>
-      <div class="sidebar__brand-sub" id="clock"></div>
+      <div class="sidebar__brand-name">NHA</div>
+      <div class="sidebar__brand-sub">Operations Console</div>
     </div>
     <div class="sidebar__section">
       <div class="sidebar__label">Overview</div>
@@ -1886,30 +1624,17 @@ init();
       <div class="sidebar__label">Config</div>
       <div class="nav-item" data-view="settings" onclick="switchView('settings')"><span class="nav-item__icon">&#9881;</span> Settings</div>
     </div>
-    <div class="sidebar__section">
-      <div class="sidebar__label">Help</div>
-      <a href="https://nothumanallowed.com/docs" target="_blank" class="nav-item" style="text-decoration:none"><span class="nav-item__icon">&#128214;</span> Documentation</a>
-      <a href="https://nothumanallowed.com/docs/agents" target="_blank" class="nav-item" style="text-decoration:none"><span class="nav-item__icon">&#129302;</span> Agents Guide</a>
-      <a href="https://nothumanallowed.com/docs/mobile" target="_blank" class="nav-item" style="text-decoration:none"><span class="nav-item__icon">&#128241;</span> Mobile App</a>
-    </div>
-    <div style="padding:12px 16px;margin-top:auto;border-top:1px solid var(--border);font-size:10px;color:var(--dim)">nothumanallowed.com</div>
+    <div style="padding:12px 16px;margin-top:auto;border-top:1px solid var(--border);font-size:10px;color:var(--dim)">NHA v${VERSION}</div>
   </nav>
 
-  <button onclick="openSidebar()" style="position:fixed;top:8px;left:8px;z-index:100;background:var(--bg2);border:1px solid var(--border);border-radius:var(--r);color:var(--green);font-size:20px;padding:4px 10px;cursor:pointer;line-height:1" id="mobileBurger">&#9776;</button>
+  <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>
 
   <div class="content" id="content"></div>
-
-  <div class="browser-viewer" id="browserViewer">
-    <div class="browser-viewer__header">
-      <span class="browser-viewer__dot"></span>
-      <span class="browser-viewer__title" id="bvTitle">Browser</span>
-      <button class="browser-viewer__close" onclick="closeBrowserViewer()">&times;</button>
-    </div>
-    <div class="browser-viewer__frame" id="bvFrame">
-      <span style="color:var(--dim);font-size:11px">Waiting...</span>
-    </div>
-    <div class="browser-viewer__status" id="bvStatus">Idle</div>
-  </div>
 </div>
 
 <div class="modal-overlay" id="agentModal">