nothumanallowed 9.7.2 → 9.8.0

package/src/services/web-ui.mjs

@@ -46,10 +46,7 @@ input:focus,textarea:focus{border-color:var(--green3)}
 
 /* ---- LAYOUT: mobile-first ---- */
 .app{display:flex;flex-direction:column;height:100vh;height:100dvh}
-.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)}
+/* header removed — info moved to sidebar brand */
 
 .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}
@@ -87,8 +84,9 @@ 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 ---- */
-.chat{display:flex;flex-direction:column;height:calc(100vh - 52px);height:calc(100dvh - 52px)}
-@media(min-width:901px){.chat{height:calc(100vh - 52px)}}
+.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__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,14 +94,32 @@ input:focus,textarea:focus{border-color:var(--green3)}
 .msg{margin-bottom:12px}
 .msg--user .msg__bubble{background:var(--bg3);border:1px solid var(--border2);border-radius:8px 8px 2px 8px;padding:10px 14px;max-width:85%;margin-left:auto;color:var(--bright)}
 .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__actions{opacity:0.15;transition:opacity 0.2s}
-.msg:hover .msg__actions{opacity:1}
 .msg__label{font-size:10px;color:var(--dim);margin-bottom:2px}
 .msg--thinking{color:var(--dim);font-style:italic}
-.chat__bar{display:flex;gap:8px;padding:10px 0 0 0;border-top:1px solid var(--border);flex-shrink:0}
+.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__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}
@@ -200,11 +216,52 @@ input:focus,textarea:focus{border-color:var(--green3)}
   const JS = `
 var API = '';
 var currentView = 'dashboard';
-var chatHistory = (function(){try{var s=localStorage.getItem('nha_chat_history');return s?JSON.parse(s):[];}catch(e){return [];}})();
+var chatHistory = [];
+var activeConvId = null;
+var convList = [];
 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();
+}
 
-function saveChatToStorage(){try{localStorage.setItem('nha_chat_history',JSON.stringify(chatHistory.slice(-40)));}catch(e){}}
-function clearChatHistory(){chatHistory=[];saveChatToStorage();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()}
 var agentsList = [];
 var selectedAgent = null;
 
@@ -221,7 +278,11 @@ 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'};
-  document.getElementById('headerTitle').textContent = titles[v]||v;
+  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')}}
   closeSidebar();
   render();
 }
@@ -253,10 +314,11 @@ function apiPatch(p){return fetch(API+p,{method:'PATCH'}).then(function(r){retur
 
 // ---- LOAD DATA ----
 function loadDash(){
-  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();
-  });
+  // 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?page=0&pageSize=25').then(function(r){dash.emails=(r&&r.emails)||[];dash._emailHasMore=r&&r.hasMore;dashLoaded.emails=true;emailPage=0;updateBadges();render()});
 }
 function loadAgents(){return apiGet('/api/agents').then(function(r){agentsList=(r&&r.agents)||[]})}
 function updateBadges(){
@@ -270,6 +332,7 @@ 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(){
@@ -298,13 +361,14 @@ 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">'+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">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">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>';
@@ -318,115 +382,225 @@ 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"><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>';
+    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>';
     chatReady=true;
     document.getElementById('chatSend').onclick=sendChat;
     document.getElementById('chatInput').onkeydown=function(e){if(e.key==='Enter'&&!e.shiftKey){e.preventDefault();sendChat()}};
-    renderMessages();
+    loadConvList().then(function(){
+      if(!activeConvId&&convList.length>0){loadConv(convList[0].id)}
+      else if(!activeConvId){createNewConv()}
+      else{loadConv(activeConvId)}
+    });
     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</div><div class="chat__empty-hint">Try: Show my unread emails / What is on my calendar? / Add a task</div></div>';
+    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>';
     return;
   }
-  var h='';chatHistory.forEach(function(m,idx){
-    var content = m.content || '';
-    var isAssistant = m.role === 'assistant';
-    var extraHtml = '';
-
-    if (isAssistant) {
-      // Handle canvas render markers
-      var canvasMatch = content.match(/\\[CANVAS_RENDER\\]([\\s\\S]*?)\\[\\/CANVAS_RENDER\\]/);
-      if (canvasMatch) {
-        try { var cd = JSON.parse(canvasMatch[1]); showCanvas(cd.html, cd.title); } catch(e){}
-        content = content.replace(/\\[CANVAS_RENDER\\][\\s\\S]*?\\[\\/CANVAS_RENDER\\]/, '').trim();
-      }
-      if (content.indexOf('[CANVAS_CLEAR]') !== -1) {
-        closeCanvas();
-        content = content.replace(/\\[CANVAS_CLEAR\\][\\s\\S]*?\\[\\/CANVAS_CLEAR\\]/, '').trim();
-      }
-      // Handle screenshot file markers
-      var ssMatch = content.match(/\\[SCREENSHOT_FILE\\](.*?)\\[\\/SCREENSHOT_FILE\\]/);
-      if (ssMatch) {
-        var fname = ssMatch[1].split('/').pop();
-        extraHtml = '<img src="/api/screenshots/' + encodeURIComponent(fname) + '" style="max-width:100%;border-radius:8px;margin:8px 0;border:1px solid rgba(0,255,65,0.2)" />';
-        content = content.replace(/\\[SCREENSHOT_FILE\\].*?\\[\\/SCREENSHOT_FILE\\]/, '').trim();
-      }
-    }
-
-    var bubbleContent = isAssistant ? extraHtml + esc(content).replace(/\\n/g, '<br>') : esc(content).replace(/\\n/g, '<br>');
-
-    // Action buttons for each message
-    var actions = '<div class="msg__actions" style="display:flex;gap:6px;margin-top:4px">';
-    actions += '<button onclick="copyMessage('+idx+')" style="background:none;border:none;color:var(--dim);cursor:pointer;font-size:10px;font-family:var(--mono)" title="Copy">Copy</button>';
-    if (isAssistant) {
-      actions += '<button onclick="retryMessage('+idx+')" style="background:none;border:none;color:var(--dim);cursor:pointer;font-size:10px;font-family:var(--mono)" title="Retry">Retry</button>';
-    } else {
-      actions += '<button onclick="editMessage('+idx+')" style="background:none;border:none;color:var(--dim);cursor:pointer;font-size:10px;font-family:var(--mono)" title="Edit">Edit</button>';
-    }
-    actions += '</div>';
-
-    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>'+actions+'</div>';
+  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>';
   });
   el.innerHTML=h;el.scrollTop=el.scrollHeight;
 }
-function copyMessage(idx){
-  var m=chatHistory[idx];if(!m)return;
-  var text=m.content.replace(/\\[SCREENSHOT_FILE\\].*?\\[\\/SCREENSHOT_FILE\\]/g,'').replace(/\\[CANVAS_RENDER\\][\\s\\S]*?\\[\\/CANVAS_RENDER\\]/g,'').trim();
-  navigator.clipboard.writeText(text).then(function(){showToast('copy','Copied','Message copied to clipboard',2000)}).catch(function(){});
-}
-function retryMessage(idx){
-  // Retry = re-send the user message that preceded this assistant message
-  if(idx<1||chatHistory[idx].role!=='assistant')return;
-  var userMsg=chatHistory[idx-1];
-  if(!userMsg||userMsg.role!=='user')return;
-  // Remove this assistant response and re-send
-  chatHistory.splice(idx,1);
-  saveChatToStorage();renderMessages();
-  chatHistory.push({role:'assistant',content:'Thinking...'});renderMessages();
-  apiPost('/api/chat',{message:userMsg.content,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();
-  });
+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 editMessage(idx){
-  if(chatHistory[idx].role!=='user')return;
-  var inp=document.getElementById('chatInput');if(!inp)return;
-  inp.value=chatHistory[idx].content;
-  inp.focus();
-  // Remove this message and all subsequent messages
-  chatHistory.splice(idx);
-  saveChatToStorage();renderMessages();
+
+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();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(){});
+  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();}});
+    }
+    pump();
+  }).catch(function(e){endStreaming();if(e.name!=='AbortError'){chatHistory[streamIdx].content='Error: '+e.message;renderMessages();}});
 }
 
 // ---- TASKS ----
@@ -496,17 +670,64 @@ 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">No unread emails</div>';return}
-  var h='';e.forEach(function(x){
+  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){
     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>';
   });
+  // Load More button
+  if(dash._emailHasMore!==false){
+    h+='<button id="loadMoreEmails" onclick="loadMoreEmails()" style="width:100%;padding:12px;margin-top:8px;background:var(--bg3);border:1px solid var(--border);border-radius:var(--r);color:var(--cyan);font-family:var(--font);font-size:12px;cursor:pointer;font-weight:700">Load More Emails</button>';
+  }
   el.innerHTML=h;
 }
+var emailPage=0;
+function loadMoreEmails(){
+  var btn=document.getElementById('loadMoreEmails');
+  if(btn){btn.textContent='Loading...';btn.disabled=true;}
+  emailPage++;
+  apiGet('/api/emails?page='+emailPage+'&pageSize=25').then(function(r){
+    if(r&&r.emails){
+      for(var i=0;i<r.emails.length;i++){
+        if(!dash.emails.find(function(e){return e.id===r.emails[i].id})){
+          dash.emails.push(r.emails[i]);
+        }
+      }
+      dash._emailHasMore=r.hasMore;
+      updateBadges();
+      render();
+    }
+  });
+}
+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){
@@ -1155,22 +1376,68 @@ 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||'';
-    h+='<div class="card agent-card" onclick="openAgent(\\''+esc(name)+'\\',\\''+esc(display)+'\\')">'+
+    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">'+
       '<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;
@@ -1253,9 +1520,26 @@ 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>' +
@@ -1476,61 +1760,6 @@ 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';
   }
 }
 
@@ -1636,8 +1865,13 @@ init();
 <div class="app">
   <nav class="sidebar" id="sidebar">
     <div class="sidebar__brand">
-      <div class="sidebar__brand-name">NHA</div>
-      <div class="sidebar__brand-sub">Operations Console</div>
+      <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>
     <div class="sidebar__section">
       <div class="sidebar__label">Overview</div>
@@ -1674,17 +1908,30 @@ 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 style="padding:12px 16px;margin-top:auto;border-top:1px solid var(--border);font-size:10px;color:var(--dim)">NHA v${VERSION}</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>
   </nav>
 
-  <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>
+  <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="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">