npm - nothumanallowed - Versions diffs - 2.1.0 → 3.0.0 - Mend

nothumanallowed 2.1.0 → 3.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (5) hide show

package/src/services/web-ui.mjs ADDED Viewed

@@ -0,0 +1,788 @@
+/**
+ * Web UI — Single HTML page served from memory.
+ * Terminal/hacker aesthetic matching NHA's green-on-black style.
+ * Zero dependencies. All CSS + JS inline.
+ */
+export function getHTML(port) {
+  return `<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width,initial-scale=1">
+<title>NHA — Local Operations Console</title>
+<style>
+*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
+:root{
+  --bg:#0a0a0a;--bg2:#111;--bg3:#1a1a1a;--bg4:#222;
+  --green:#00ff41;--green2:#00cc33;--green3:#00aa28;--greendim:#0a3a12;
+  --cyan:#00e5ff;--amber:#ffb300;--red:#ff1744;--magenta:#e040fb;
+  --text:#c8c8c8;--textdim:#666;--textbright:#fff;
+  --border:#1e1e1e;--borderbright:#333;
+  --mono:'JetBrains Mono','Fira Code','SF Mono','Cascadia Code','Consolas',monospace;
+  --radius:6px;
+}
+html,body{height:100%;background:var(--bg);color:var(--text);font-family:var(--mono);font-size:13px;line-height:1.5;overflow:hidden}
+a{color:var(--cyan);text-decoration:none}
+a:hover{text-decoration:underline}
+button{font-family:var(--mono);cursor:pointer;border:none;outline:none}
+input,textarea{font-family:var(--mono);background:var(--bg2);color:var(--text);border:1px solid var(--border);padding:8px 12px;border-radius:var(--radius);outline:none;font-size:13px}
+input:focus,textarea:focus{border-color:var(--green3)}
+::-webkit-scrollbar{width:6px;height:6px}
+::-webkit-scrollbar-track{background:var(--bg)}
+::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px}
+::-webkit-scrollbar-thumb:hover{background:var(--borderbright)}
+/* Layout */
+#app{display:flex;height:100vh;width:100vw}
+#sidebar{width:220px;min-width:220px;background:var(--bg2);border-right:1px solid var(--border);display:flex;flex-direction:column;padding:0;overflow-y:auto}
+#main{flex:1;display:flex;flex-direction:column;overflow:hidden;min-width:0}
+#header{padding:12px 20px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:12px;background:var(--bg)}
+#content{flex:1;overflow-y:auto;padding:20px}
+/* Sidebar */
+.sidebar-brand{padding:16px;border-bottom:1px solid var(--border)}
+.sidebar-brand h1{font-size:16px;color:var(--green);font-weight:700;letter-spacing:2px}
+.sidebar-brand p{font-size:10px;color:var(--textdim);margin-top:2px}
+.nav-section{padding:12px 0}
+.nav-section-label{padding:0 16px;font-size:10px;text-transform:uppercase;letter-spacing:1.5px;color:var(--textdim);margin-bottom:4px}
+.nav-item{display:flex;align-items:center;gap:10px;padding:8px 16px;color:var(--textdim);cursor:pointer;transition:all .15s;font-size:12px;border-left:2px solid transparent}
+.nav-item:hover{color:var(--text);background:var(--bg3)}
+.nav-item.active{color:var(--green);background:var(--greendim);border-left-color:var(--green)}
+.nav-item .icon{width:16px;text-align:center;font-size:14px}
+.nav-item .badge{margin-left:auto;background:var(--green3);color:var(--bg);padding:1px 6px;border-radius:8px;font-size:10px;font-weight:700}
+/* Cards */
+.card{background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius);padding:16px;margin-bottom:12px}
+.card-title{font-size:11px;text-transform:uppercase;letter-spacing:1px;color:var(--textdim);margin-bottom:8px}
+.card-value{font-size:24px;font-weight:700;color:var(--green)}
+.card-sub{font-size:11px;color:var(--textdim);margin-top:4px}
+/* Dashboard grid */
+.dash-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px;margin-bottom:20px}
+.dash-section{margin-bottom:24px}
+.dash-section h2{font-size:13px;color:var(--cyan);margin-bottom:12px;text-transform:uppercase;letter-spacing:1px}
+/* Chat */
+#chat-view{display:flex;flex-direction:column;height:100%;overflow:hidden}
+#chat-messages{flex:1;overflow-y:auto;padding:0 0 12px 0}
+.msg{margin-bottom:12px;display:flex;gap:10px}
+.msg-user .msg-bubble{background:var(--bg3);border:1px solid var(--borderbright);border-radius:8px 8px 2px 8px;padding:10px 14px;max-width:80%;margin-left:auto;color:var(--textbright)}
+.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(--textdim);margin-bottom:2px}
+.msg-thinking{color:var(--textdim);font-style:italic;animation:pulse 1.5s infinite}
+@keyframes pulse{0%,100%{opacity:.4}50%{opacity:1}}
+#chat-input-bar{display:flex;gap:8px;padding:12px 0 0 0;border-top:1px solid var(--border)}
+#chat-input{flex:1;resize:none;min-height:40px;max-height:120px;padding:10px 14px}
+#chat-send{background:var(--green3);color:var(--bg);padding:10px 20px;border-radius:var(--radius);font-weight:700;font-size:12px;transition:background .15s}
+#chat-send:hover{background:var(--green2)}
+#chat-send:disabled{opacity:.4;cursor:not-allowed}
+/* Tasks */
+.task-item{display:flex;align-items:center;gap:10px;padding:10px 12px;border-bottom:1px solid var(--border);transition:background .1s}
+.task-item:hover{background:var(--bg3)}
+.task-check{width:18px;height:18px;border:2px solid var(--borderbright);border-radius:4px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .15s;flex-shrink:0}
+.task-check:hover{border-color:var(--green)}
+.task-check.done{background:var(--green3);border-color:var(--green)}
+.task-check.done::after{content:'\\2713';color:var(--bg);font-size:12px;font-weight:700}
+.task-desc{flex:1;min-width:0}
+.task-desc.done{text-decoration:line-through;color:var(--textdim)}
+.task-priority{font-size:10px;padding:2px 6px;border-radius:4px;text-transform:uppercase;font-weight:700}
+.task-priority.critical{background:var(--red);color:#fff}
+.task-priority.high{background:var(--amber);color:#000}
+.task-priority.medium{background:var(--bg4);color:var(--text)}
+.task-priority.low{background:var(--bg3);color:var(--textdim)}
+.task-add-bar{display:flex;gap:8px;margin-bottom:16px}
+.task-add-bar input{flex:1}
+.task-add-bar select{background:var(--bg2);color:var(--text);border:1px solid var(--border);padding:8px;border-radius:var(--radius);font-size:12px}
+.task-add-bar button{background:var(--green3);color:var(--bg);padding:8px 16px;border-radius:var(--radius);font-weight:700;font-size:12px}
+/* Emails */
+.email-item{padding:12px;border-bottom:1px solid var(--border);cursor:default}
+.email-item:hover{background:var(--bg3)}
+.email-from{color:var(--cyan);font-size:12px;font-weight:600}
+.email-subject{color:var(--textbright);margin-top:2px}
+.email-snippet{color:var(--textdim);font-size:11px;margin-top:4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+.email-date{color:var(--textdim);font-size:10px;margin-top:4px}
+/* Calendar */
+.event-item{display:flex;gap:12px;padding:12px;border-bottom:1px solid var(--border)}
+.event-time{color:var(--amber);font-weight:600;min-width:110px;white-space:nowrap}
+.event-title{color:var(--textbright)}
+.event-location{color:var(--textdim);font-size:11px;margin-top:2px}
+.event-cal{color:var(--textdim);font-size:10px}
+/* Plan */
+.plan-section{margin-bottom:20px}
+.plan-section h3{font-size:12px;color:var(--amber);text-transform:uppercase;letter-spacing:1px;margin-bottom:8px;padding-bottom:4px;border-bottom:1px solid var(--border)}
+.plan-summary{color:var(--textbright);font-size:14px;line-height:1.7;padding:12px 0}
+.plan-schedule-item{display:flex;gap:12px;padding:8px 0;border-bottom:1px solid var(--border)}
+.plan-schedule-time{color:var(--cyan);min-width:100px;font-weight:600}
+.plan-schedule-type{font-size:10px;padding:2px 6px;border-radius:4px;text-transform:uppercase;font-weight:700;min-width:60px;text-align:center}
+.plan-schedule-type.meeting{background:#003d5c;color:var(--cyan)}
+.plan-schedule-type.focus{background:var(--greendim);color:var(--green)}
+.plan-schedule-type.break{background:var(--bg4);color:var(--textdim)}
+.plan-schedule-type.task{background:#3d2e00;color:var(--amber)}
+.plan-action-item{padding:6px 0;display:flex;gap:8px;align-items:baseline}
+.plan-action-badge{font-size:10px;padding:1px 6px;border-radius:4px;text-transform:uppercase;font-weight:700}
+.plan-action-badge.critical{background:var(--red);color:#fff}
+.plan-action-badge.high{background:var(--amber);color:#000}
+.plan-action-badge.medium,.plan-action-badge.low{background:var(--bg4);color:var(--text)}
+.plan-alert{padding:8px 12px;background:#2a0000;border:1px solid #5a0000;border-radius:var(--radius);margin-bottom:6px;color:var(--red)}
+.plan-insight{color:var(--textdim);padding:4px 0}
+.plan-meta{color:var(--textdim);font-size:11px;margin-top:12px;padding-top:8px;border-top:1px solid var(--border)}
+.refresh-btn{background:var(--bg3);color:var(--cyan);padding:6px 14px;border-radius:var(--radius);font-size:11px;border:1px solid var(--border);transition:all .15s}
+.refresh-btn:hover{background:var(--bg4);border-color:var(--cyan)}
+/* Agents */
+.agents-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:10px}
+.agent-card{background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius);padding:14px;cursor:pointer;transition:all .15s}
+.agent-card:hover{border-color:var(--green3);background:var(--bg3)}
+.agent-name{font-size:13px;font-weight:700;color:var(--green);text-transform:uppercase;letter-spacing:1px}
+.agent-category{font-size:10px;color:var(--textdim);margin-top:2px}
+.agent-tagline{font-size:11px;color:var(--text);margin-top:6px;line-height:1.4}
+/* Modal */
+.modal-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.7);display:flex;align-items:center;justify-content:center;z-index:1000;opacity:0;pointer-events:none;transition:opacity .2s}
+.modal-overlay.show{opacity:1;pointer-events:all}
+.modal{background:var(--bg2);border:1px solid var(--borderbright);border-radius:8px;width:90%;max-width:600px;max-height:80vh;display:flex;flex-direction:column;overflow:hidden}
+.modal-header{display:flex;align-items:center;justify-content:space-between;padding:16px;border-bottom:1px solid var(--border)}
+.modal-header h2{font-size:14px;color:var(--green)}
+.modal-close{background:none;color:var(--textdim);font-size:20px;padding:4px 8px;border-radius:4px}
+.modal-close:hover{color:var(--text);background:var(--bg3)}
+.modal-body{padding:16px;overflow-y:auto;flex:1}
+.modal-body textarea{width:100%;min-height:80px;margin-bottom:12px}
+.modal-body .response{background:var(--bg3);border:1px solid var(--border);border-radius:var(--radius);padding:12px;white-space:pre-wrap;word-wrap:break-word;max-height:300px;overflow-y:auto;color:var(--text);line-height:1.6}
+.modal-footer{padding:12px 16px;border-top:1px solid var(--border);display:flex;gap:8px;justify-content:flex-end}
+.modal-footer button{padding:8px 20px;border-radius:var(--radius);font-size:12px;font-weight:600}
+.btn-primary{background:var(--green3);color:var(--bg)}
+.btn-primary:hover{background:var(--green2)}
+.btn-secondary{background:var(--bg3);color:var(--text);border:1px solid var(--border)}
+.btn-secondary:hover{background:var(--bg4)}
+/* Status indicator */
+.status-dot{width:8px;height:8px;border-radius:50%;display:inline-block;margin-right:6px}
+.status-dot.ok{background:var(--green)}
+.status-dot.warn{background:var(--amber)}
+.status-dot.err{background:var(--red)}
+/* Loading */
+.loading{text-align:center;padding:40px;color:var(--textdim)}
+.spinner{display:inline-block;width:20px;height:20px;border:2px solid var(--border);border-top-color:var(--green);border-radius:50%;animation:spin .6s linear infinite;margin-bottom:8px}
+@keyframes spin{to{transform:rotate(360deg)}}
+/* Header */
+.header-title{font-size:14px;color:var(--textbright);font-weight:600}
+.header-time{margin-left:auto;color:var(--textdim);font-size:12px}
+.header-status{font-size:11px}
+/* Mobile */
+#mobile-toggle{display:none;background:none;color:var(--green);font-size:20px;padding:4px 8px}
+@media(max-width:768px){
+  #sidebar{position:fixed;left:-260px;top:0;height:100%;z-index:100;transition:left .25s;width:260px}
+  #sidebar.open{left:0}
+  #mobile-toggle{display:block}
+  .dash-grid{grid-template-columns:1fr}
+  .agents-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
+  .msg-user .msg-bubble,.msg-assistant .msg-bubble{max-width:95%}
+  .modal{width:95%;max-width:none}
+}
+</style>
+</head>
+<body>
+<div id="app">
+  <nav id="sidebar">
+    <div class="sidebar-brand">
+      <h1>NHA</h1>
+      <p>Local Ops Console</p>
+    </div>
+    <div class="nav-section">
+      <div class="nav-section-label">Operations</div>
+      <div class="nav-item active" data-view="dashboard" onclick="switchView('dashboard')">
+        <span class="icon">&#9635;</span> Dashboard
+      </div>
+      <div class="nav-item" data-view="chat" onclick="switchView('chat')">
+        <span class="icon">&#9654;</span> Chat
+      </div>
+      <div class="nav-item" data-view="plan" onclick="switchView('plan')">
+        <span class="icon">&#9776;</span> Plan
+      </div>
+      <div class="nav-item" data-view="tasks" onclick="switchView('tasks')">
+        <span class="icon">&#9745;</span> Tasks <span class="badge" id="task-badge" style="display:none">0</span>
+      </div>
+    </div>
+    <div class="nav-section">
+      <div class="nav-section-label">Data</div>
+      <div class="nav-item" data-view="emails" onclick="switchView('emails')">
+        <span class="icon">&#9993;</span> Emails <span class="badge" id="email-badge" style="display:none">0</span>
+      </div>
+      <div class="nav-item" data-view="calendar" onclick="switchView('calendar')">
+        <span class="icon">&#128197;</span> Calendar
+      </div>
+    </div>
+    <div class="nav-section">
+      <div class="nav-section-label">Intelligence</div>
+      <div class="nav-item" data-view="agents" onclick="switchView('agents')">
+        <span class="icon">&#9733;</span> Agents <span class="badge">38</span>
+      </div>
+    </div>
+  </nav>
+  <div id="main">
+    <div id="header">
+      <button id="mobile-toggle" onclick="toggleSidebar()">&#9776;</button>
+      <span class="header-title" id="header-title">Dashboard</span>
+      <span class="header-status" id="header-status"></span>
+      <span class="header-time" id="header-time"></span>
+    </div>
+    <div id="content"></div>
+  </div>
+</div>
+<!-- Agent Modal -->
+<div class="modal-overlay" id="agent-modal">
+  <div class="modal">
+    <div class="modal-header">
+      <h2 id="modal-agent-name">AGENT</h2>
+      <button class="modal-close" onclick="closeModal()">&times;</button>
+    </div>
+    <div class="modal-body">
+      <textarea id="modal-prompt" placeholder="Ask this agent something..."></textarea>
+      <div id="modal-response" class="response" style="display:none"></div>
+    </div>
+    <div class="modal-footer">
+      <button class="btn-secondary" onclick="closeModal()">Close</button>
+      <button class="btn-primary" id="modal-send" onclick="askAgent()">Ask</button>
+    </div>
+  </div>
+</div>
+<script>
+// ── State ──────────────────────────────────────────────────────────────────
+const API = '';
+let currentView = 'dashboard';
+let chatHistory = [];
+let dashData = { emails: [], events: [], tasks: [], plan: null, status: null };
+let agentsList = [];
+let selectedAgent = null;
+// ── Navigation ─────────────────────────────────────────────────────────────
+function switchView(view) {
+  currentView = view;
+  document.querySelectorAll('.nav-item').forEach(el => {
+    el.classList.toggle('active', el.dataset.view === view);
+  });
+  const titles = {dashboard:'Dashboard',chat:'Chat',plan:'Daily Plan',tasks:'Tasks',emails:'Emails',calendar:'Calendar',agents:'Agents'};
+  document.getElementById('header-title').textContent = titles[view] || view;
+  document.getElementById('sidebar').classList.remove('open');
+  renderView();
+}
+function toggleSidebar() {
+  document.getElementById('sidebar').classList.toggle('open');
+}
+// ── Clock ──────────────────────────────────────────────────────────────────
+function updateClock() {
+  const now = new Date();
+  document.getElementById('header-time').textContent = now.toLocaleTimeString('en-US',{hour:'2-digit',minute:'2-digit',second:'2-digit',hour12:false}) + '  ' + now.toLocaleDateString('en-US',{weekday:'short',month:'short',day:'numeric'});
+}
+setInterval(updateClock, 1000);
+updateClock();
+// ── API Helpers ────────────────────────────────────────────────────────────
+async function apiGet(path) {
+  try {
+    const r = await fetch(API + path);
+    if (!r.ok) throw new Error(r.status + ' ' + r.statusText);
+    return await r.json();
+  } catch (e) {
+    console.error('API error:', path, e);
+    return null;
+  }
+}
+async function apiPost(path, body) {
+  try {
+    const r = await fetch(API + path, {
+      method: 'POST',
+      headers: {'Content-Type': 'application/json'},
+      body: JSON.stringify(body),
+    });
+    if (!r.ok) throw new Error(r.status + ' ' + r.statusText);
+    return await r.json();
+  } catch (e) {
+    console.error('API error:', path, e);
+    return null;
+  }
+}
+async function apiPatch(path) {
+  try {
+    const r = await fetch(API + path, {method: 'PATCH'});
+    if (!r.ok) throw new Error(r.status + ' ' + r.statusText);
+    return await r.json();
+  } catch (e) {
+    console.error('API error:', path, e);
+    return null;
+  }
+}
+// ── Data Loading ───────────────────────────────────────────────────────────
+async function loadDashboard() {
+  const [status, emails, events, tasks] = await Promise.all([
+    apiGet('/api/status'),
+    apiGet('/api/emails'),
+    apiGet('/api/calendar'),
+    apiGet('/api/tasks'),
+  ]);
+  dashData.status = status;
+  dashData.emails = emails?.emails || [];
+  dashData.events = events?.events || [];
+  dashData.tasks = tasks?.tasks || [];
+  updateBadges();
+}
+async function loadPlan() {
+  const data = await apiGet('/api/plan');
+  dashData.plan = data?.plan || null;
+  return dashData.plan;
+}
+async function loadAgents() {
+  const data = await apiGet('/api/agents');
+  agentsList = data?.agents || [];
+}
+function updateBadges() {
+  const eb = document.getElementById('email-badge');
+  const tb = document.getElementById('task-badge');
+  if (dashData.emails.length > 0) {
+    eb.textContent = dashData.emails.length;
+    eb.style.display = '';
+  } else {
+    eb.style.display = 'none';
+  }
+  const pending = dashData.tasks.filter(t => t.status !== 'done').length;
+  if (pending > 0) {
+    tb.textContent = pending;
+    tb.style.display = '';
+  } else {
+    tb.style.display = 'none';
+  }
+}
+// ── Rendering ──────────────────────────────────────────────────────────────
+function renderView() {
+  const el = document.getElementById('content');
+  switch (currentView) {
+    case 'dashboard': return renderDashboard(el);
+    case 'chat': return renderChat(el);
+    case 'plan': return renderPlan(el);
+    case 'tasks': return renderTasks(el);
+    case 'emails': return renderEmails(el);
+    case 'calendar': return renderCalendar(el);
+    case 'agents': return renderAgents(el);
+  }
+}
+function esc(s) {
+  if (!s) return '';
+  return String(s).replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;').replace(/"/g,'&quot;');
+}
+function fmtTime(iso) {
+  if (!iso) return '';
+  try {
+    return new Date(iso).toLocaleTimeString('en-US',{hour:'2-digit',minute:'2-digit',hour12:true});
+  } catch { return iso; }
+}
+// ── Dashboard ──────────────────────────────────────────────────────────────
+function renderDashboard(el) {
+  const s = dashData.status;
+  const tasks = dashData.tasks;
+  const emails = dashData.emails;
+  const events = dashData.events;
+  const done = tasks.filter(t=>t.status==='done').length;
+  const pending = tasks.length - done;
+  const pct = tasks.length > 0 ? Math.round(done/tasks.length*100) : 0;
+  let statusHtml = '';
+  if (s) {
+    const dot = s.connected ? 'ok' : 'err';
+    statusHtml = '<span class="status-dot '+dot+'"></span>' + (s.connected ? 'Connected' : 'Disconnected') + ' &middot; ' + esc(s.provider || '');
+    document.getElementById('header-status').innerHTML = statusHtml;
+  }
+  el.innerHTML = '<div class="dash-grid">' +
+    '<div class="card"><div class="card-title">Tasks Today</div><div class="card-value">'+pending+'</div><div class="card-sub">'+done+' done / '+tasks.length+' total ('+pct+'%)</div></div>' +
+    '<div class="card"><div class="card-title">Unread Emails</div><div class="card-value">'+emails.length+'</div><div class="card-sub">'+(emails.length>0 ? esc(emails[0].from) : 'Inbox zero')+'</div></div>' +
+    '<div class="card"><div class="card-title">Events Today</div><div class="card-value">'+events.length+'</div><div class="card-sub">'+(events.length>0 ? esc(events[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 to assist</div></div>' +
+  '</div>' +
+  // Upcoming events
+  '<div class="dash-section"><h2>Upcoming Events</h2>' +
+  (events.length === 0 ? '<div class="card" style="color:var(--textdim)">No events scheduled for today.</div>' :
+    events.slice(0, 5).map(e => '<div class="card" style="padding:10px 14px;display:flex;gap:12px;align-items:center">' +
+      '<span style="color:var(--amber);min-width:100px">'+(e.isAllDay ? 'All day' : fmtTime(e.start)+' - '+fmtTime(e.end))+'</span>' +
+      '<span style="color:var(--textbright)">'+esc(e.summary)+'</span>' +
+      (e.location ? '<span style="color:var(--textdim);font-size:11px"> &middot; '+esc(e.location)+'</span>' : '') +
+    '</div>').join('')) +
+  '</div>' +
+  // Recent emails
+  '<div class="dash-section"><h2>Recent Emails</h2>' +
+  (emails.length === 0 ? '<div class="card" style="color:var(--textdim)">No unread emails.</div>' :
+    emails.slice(0, 5).map(e => '<div class="card" style="padding:10px 14px">' +
+      '<div style="display:flex;justify-content:space-between"><span class="email-from">'+esc(e.from)+'</span><span style="color:var(--textdim);font-size:10px">'+esc(e.date)+'</span></div>' +
+      '<div style="color:var(--textbright);margin-top:2px">'+esc(e.subject)+'</div>' +
+      '<div style="color:var(--textdim);font-size:11px;margin-top:2px">'+esc((e.snippet||'').slice(0,120))+'</div>' +
+    '</div>').join('')) +
+  '</div>' +
+  // Pending tasks
+  '<div class="dash-section"><h2>Pending Tasks</h2>' +
+  (pending === 0 ? '<div class="card" style="color:var(--textdim)">All tasks complete.</div>' :
+    tasks.filter(t=>t.status!=='done').slice(0,5).map(t => '<div class="card" style="padding:10px 14px;display:flex;gap:10px;align-items:center">' +
+      '<span class="task-priority '+esc(t.priority)+'">'+esc(t.priority)+'</span>' +
+      '<span>'+esc(t.description)+'</span>' +
+    '</div>').join('')) +
+  '</div>';
+}
+// ── Chat ───────────────────────────────────────────────────────────────────
+let chatRendered = false;
+function renderChat(el) {
+  if (!chatRendered || !document.getElementById('chat-view')) {
+    el.innerHTML = '<div id="chat-view">' +
+      '<div id="chat-messages"></div>' +
+      '<div id="chat-input-bar">' +
+        '<textarea id="chat-input" placeholder="Ask anything... manage emails, calendar, tasks" rows="1" onkeydown="chatKeydown(event)"></textarea>' +
+        '<button id="chat-send" onclick="sendChat()">Send</button>' +
+      '</div>' +
+    '</div>';
+    chatRendered = true;
+    renderChatMessages();
+    setTimeout(() => document.getElementById('chat-input')?.focus(), 100);
+  }
+}
+function renderChatMessages() {
+  const el = document.getElementById('chat-messages');
+  if (!el) return;
+  if (chatHistory.length === 0) {
+    el.innerHTML = '<div style="text-align:center;padding:60px 20px;color:var(--textdim)">' +
+      '<div style="font-size:32px;margin-bottom:16px;color:var(--green)">NHA Chat</div>' +
+      '<div>Personal Operations Assistant</div>' +
+      '<div style="margin-top:12px;font-size:11px">Try: "Show my unread emails" / "What\'s on my calendar?" / "Add a task to review the PR"</div>' +
+    '</div>';
+    return;
+  }
+  el.innerHTML = chatHistory.map(m => {
+    const cls = m.role === 'user' ? 'msg-user' : 'msg-assistant';
+    const label = m.role === 'user' ? 'You' : 'NHA';
+    return '<div class="msg '+cls+'"><div><div class="msg-label">'+label+'</div><div class="msg-bubble">'+esc(m.content)+'</div></div></div>';
+  }).join('');
+  el.scrollTop = el.scrollHeight;
+}
+function chatKeydown(e) {
+  if (e.key === 'Enter' && !e.shiftKey) {
+    e.preventDefault();
+    sendChat();
+  }
+}
+let chatBusy = false;
+async function sendChat() {
+  if (chatBusy) return;
+  const input = document.getElementById('chat-input');
+  const text = input.value.trim();
+  if (!text) return;
+  input.value = '';
+  chatHistory.push({role:'user', content:text});
+  chatHistory.push({role:'assistant', content:'Thinking...'});
+  renderChatMessages();
+  chatBusy = true;
+  document.getElementById('chat-send').disabled = true;
+  const data = await apiPost('/api/chat', {message: text, history: chatHistory.slice(0,-2)});
+  chatHistory.pop(); // remove thinking
+  if (data?.response) {
+    chatHistory.push({role:'assistant', content: data.response});
+    if (data.toolResult) {
+      chatHistory.push({role:'assistant', content: '[Tool Result]\\n' + data.toolResult});
+    }
+  } else {
+    chatHistory.push({role:'assistant', content: data?.error || 'Error: could not get response.'});
+  }
+  renderChatMessages();
+  chatBusy = false;
+  document.getElementById('chat-send').disabled = false;
+  input.focus();
+  // Refresh dashboard data after chat (chat may have changed tasks/emails)
+  loadDashboard();
+}
+// ── Plan ───────────────────────────────────────────────────────────────────
+async function renderPlan(el) {
+  el.innerHTML = '<div class="loading"><div class="spinner"></div><div>Loading plan...</div></div>';
+  const plan = dashData.plan || await loadPlan();
+  if (!plan) {
+    el.innerHTML = '<div class="card" style="text-align:center;padding:40px">' +
+      '<div style="color:var(--textdim);margin-bottom:16px">No plan generated yet.</div>' +
+      '<button class="btn-primary" onclick="refreshPlan()" id="gen-plan-btn">Generate Daily Plan</button>' +
+    '</div>';
+    return;
+  }
+  renderPlanContent(el, plan);
+}
+function renderPlanContent(el, plan) {
+  let html = '<div style="display:flex;align-items:center;gap:12px;margin-bottom:16px">' +
+    '<button class="refresh-btn" onclick="refreshPlan()">Refresh Plan</button>' +
+    (plan.metadata ? '<span style="color:var(--textdim);font-size:11px">Generated '+new Date(plan.metadata.generatedAt).toLocaleString()+'</span>' : '') +
+  '</div>';
+  // Executive summary
+  html += '<div class="plan-section"><h3>Executive Summary</h3><div class="plan-summary">'+esc(plan.executive_summary)+'</div></div>';
+  // Priority actions
+  if (plan.priority_actions?.length) {
+    html += '<div class="plan-section"><h3>Priority Actions</h3>';
+    for (const a of plan.priority_actions) {
+      html += '<div class="plan-action-item"><span class="plan-action-badge '+(a.priority||'medium')+'">'+esc(a.priority||'medium')+'</span>';
+      if (a.time) html += '<span style="color:var(--cyan)">'+esc(a.time)+'</span>';
+      html += '<span>'+esc(a.action)+'</span>';
+      if (a.source) html += '<span style="color:var(--textdim);font-size:10px">('+esc(a.source)+')</span>';
+      html += '</div>';
+    }
+    html += '</div>';
+  }
+  // Schedule
+  if (plan.schedule?.length) {
+    html += '<div class="plan-section"><h3>Schedule</h3>';
+    for (const s of plan.schedule) {
+      html += '<div class="plan-schedule-item">' +
+        '<span class="plan-schedule-time">'+esc(s.time_start)+' - '+esc(s.time_end)+'</span>' +
+        '<span class="plan-schedule-type '+(s.type||'task')+'">'+esc(s.type||'task')+'</span>' +
+        '<span style="flex:1"><span style="color:var(--textbright)">'+esc(s.title)+'</span>' +
+        (s.notes ? '<div style="color:var(--textdim);font-size:11px;margin-top:2px">'+esc(s.notes)+'</div>' : '') +
+        (s.preparation ? '<div style="color:var(--amber);font-size:11px;margin-top:2px">Prep: '+esc(s.preparation)+'</div>' : '') +
+        '</span></div>';
+    }
+    html += '</div>';
+  }
+  // Email actions
+  if (plan.email_actions?.length) {
+    html += '<div class="plan-section"><h3>Email Actions</h3>';
+    for (const e of plan.email_actions) {
+      const ac = e.action === 'reply' ? 'color:var(--green)' : e.action === 'flag' ? 'color:var(--amber)' : 'color:var(--textdim)';
+      html += '<div style="padding:6px 0"><span style="'+ac+';font-weight:600;text-transform:uppercase;font-size:11px">['+esc(e.action)+']</span> '+esc(e.subject)+' <span style="color:var(--textdim)">from '+esc(e.from)+'</span></div>';
+    }
+    html += '</div>';
+  }
+  // Security alerts
+  if (plan.security_alerts?.length) {
+    html += '<div class="plan-section"><h3>Security Alerts</h3>';
+    for (const a of plan.security_alerts) {
+      html += '<div class="plan-alert">'+esc(typeof a === 'string' ? a : a.message || JSON.stringify(a))+'</div>';
+    }
+    html += '</div>';
+  }
+  // Insights
+  if (plan.insights?.length) {
+    html += '<div class="plan-section"><h3>Insights</h3>';
+    for (const i of plan.insights) {
+      html += '<div class="plan-insight">&rarr; '+esc(typeof i === 'string' ? i : i.message || JSON.stringify(i))+'</div>';
+    }
+    html += '</div>';
+  }
+  // Metadata
+  if (plan.metadata) {
+    html += '<div class="plan-meta">Generated in '+(plan.metadata.durationMs/1000).toFixed(1)+'s by '+(plan.metadata.agentsUsed?.length||0)+' agents ('+esc(plan.metadata.provider)+')</div>';
+  }
+  el.innerHTML = html;
+}
+async function refreshPlan() {
+  const el = document.getElementById('content');
+  el.innerHTML = '<div class="loading"><div class="spinner"></div><div>Generating plan... This takes 30-90 seconds.</div></div>';
+  const data = await apiPost('/api/plan/refresh', {});
+  dashData.plan = data?.plan || null;
+  if (currentView === 'plan') renderPlan(el);
+}
+// ── Tasks ──────────────────────────────────────────────────────────────────
+function renderTasks(el) {
+  const tasks = dashData.tasks;
+  let html = '<div class="task-add-bar">' +
+    '<input id="task-desc-input" placeholder="Add a new task..." onkeydown="if(event.key===\'Enter\')addTaskUI()">' +
+    '<select id="task-priority-select"><option value="medium">Medium</option><option value="high">High</option><option value="critical">Critical</option><option value="low">Low</option></select>' +
+    '<button onclick="addTaskUI()">Add</button>' +
+  '</div>';
+  if (tasks.length === 0) {
+    html += '<div class="card" style="text-align:center;padding:30px;color:var(--textdim)">No tasks for today. Add one above.</div>';
+  } else {
+    // Pending first, then done
+    const sorted = [...tasks].sort((a,b) => {
+      if (a.status==='done' && b.status!=='done') return 1;
+      if (a.status!=='done' && b.status==='done') return -1;
+      const pr = {critical:0,high:1,medium:2,low:3};
+      return (pr[a.priority]||2) - (pr[b.priority]||2);
+    });
+    for (const t of sorted) {
+      const isDone = t.status === 'done';
+      html += '<div class="task-item">' +
+        '<div class="task-check'+(isDone?' done':'')+'" onclick="toggleTask('+t.id+','+isDone+')"></div>' +
+        '<span class="task-desc'+(isDone?' done':'')+'">'+esc(t.description)+'</span>' +
+        '<span class="task-priority '+esc(t.priority)+'">'+esc(t.priority)+'</span>' +
+        '<span style="color:var(--textdim);font-size:10px">#'+t.id+'</span>' +
+      '</div>';
+    }
+  }
+  el.innerHTML = html;
+}
+async function addTaskUI() {
+  const descEl = document.getElementById('task-desc-input');
+  const prioEl = document.getElementById('task-priority-select');
+  const desc = descEl.value.trim();
+  if (!desc) return;
+  const data = await apiPost('/api/tasks', {description: desc, priority: prioEl.value});
+  if (data?.task) {
+    dashData.tasks.push(data.task);
+    descEl.value = '';
+    renderTasks(document.getElementById('content'));
+    updateBadges();
+  }
+}
+async function toggleTask(id, isDone) {
+  if (isDone) return; // no un-complete
+  const data = await apiPatch('/api/tasks/'+id+'/done');
+  if (data?.ok) {
+    const t = dashData.tasks.find(t=>t.id===id);
+    if (t) { t.status = 'done'; t.completedAt = new Date().toISOString(); }
+    renderTasks(document.getElementById('content'));
+    updateBadges();
+  }
+}
+// ── Emails ─────────────────────────────────────────────────────────────────
+function renderEmails(el) {
+  const emails = dashData.emails;
+  if (emails.length === 0) {
+    el.innerHTML = '<div class="card" style="text-align:center;padding:40px;color:var(--textdim)">No unread emails. Inbox zero!</div>';
+    return;
+  }
+  el.innerHTML = emails.map(e => '<div class="email-item">' +
+    '<div style="display:flex;justify-content:space-between"><span class="email-from">'+esc(e.from)+'</span><span class="email-date">'+esc(e.date)+'</span></div>' +
+    '<div class="email-subject">'+esc(e.subject)+'</div>' +
+    '<div class="email-snippet">'+esc((e.snippet||'').slice(0,200))+'</div>' +
+  '</div>').join('');
+}
+// ── Calendar ───────────────────────────────────────────────────────────────
+function renderCalendar(el) {
+  const events = dashData.events;
+  if (events.length === 0) {
+    el.innerHTML = '<div class="card" style="text-align:center;padding:40px;color:var(--textdim)">No events scheduled for today.</div>';
+    return;
+  }
+  el.innerHTML = events.map(e => {
+    const time = e.isAllDay ? 'All day' : fmtTime(e.start) + ' - ' + fmtTime(e.end);
+    return '<div class="event-item">' +
+      '<span class="event-time">'+esc(time)+'</span>' +
+      '<div style="flex:1">' +
+        '<div class="event-title">'+esc(e.summary)+'</div>' +
+        (e.location ? '<div class="event-location">'+esc(e.location)+'</div>' : '') +
+        (e.calendarName ? '<div class="event-cal">'+esc(e.calendarName)+'</div>' : '') +
+        (e.hangoutLink ? '<div><a href="'+esc(e.hangoutLink)+'" target="_blank" style="font-size:11px">Join call</a></div>' : '') +
+      '</div>' +
+    '</div>';
+  }).join('');
+}
+// ── Agents ─────────────────────────────────────────────────────────────────
+function renderAgents(el) {
+  if (agentsList.length === 0) {
+    el.innerHTML = '<div class="loading"><div class="spinner"></div><div>Loading agents...</div></div>';
+    loadAgents().then(() => { if (currentView === 'agents') renderAgents(el); });
+    return;
+  }
+  el.innerHTML = '<div class="agents-grid">' + agentsList.map(a =>
+    '<div class="agent-card" data-agent="'+esc(a.name)+'" onclick="openAgent(this.dataset.agent)">' +
+      '<div class="agent-name">'+esc(a.name)+'</div>' +
+      '<div class="agent-category">'+esc(a.category || 'agent')+'</div>' +
+      '<div class="agent-tagline">'+esc(a.tagline || '')+'</div>' +
+    '</div>'
+  ).join('') + '</div>';
+}
+function openAgent(name) {
+  selectedAgent = name;
+  document.getElementById('modal-agent-name').textContent = name.toUpperCase();
+  document.getElementById('modal-prompt').value = '';
+  document.getElementById('modal-response').style.display = 'none';
+  document.getElementById('modal-response').textContent = '';
+  document.getElementById('agent-modal').classList.add('show');
+  document.getElementById('modal-prompt').focus();
+}
+function closeModal() {
+  document.getElementById('agent-modal').classList.remove('show');
+  selectedAgent = null;
+}
+async function askAgent() {
+  if (!selectedAgent) return;
+  const prompt = document.getElementById('modal-prompt').value.trim();
+  if (!prompt) return;
+  const respEl = document.getElementById('modal-response');
+  const sendBtn = document.getElementById('modal-send');
+  respEl.style.display = 'block';
+  respEl.textContent = 'Thinking...';
+  sendBtn.disabled = true;
+  const data = await apiPost('/api/ask', {agent: selectedAgent, prompt});
+  if (data?.response) {
+    respEl.textContent = data.response;
+  } else {
+    respEl.textContent = data?.error || 'Error getting response.';
+  }
+  sendBtn.disabled = false;
+}
+// Close modal on Escape
+document.addEventListener('keydown', e => {
+  if (e.key === 'Escape') closeModal();
+});
+// Close modal on overlay click
+document.getElementById('agent-modal').addEventListener('click', e => {
+  if (e.target.id === 'agent-modal') closeModal();
+});
+// ── Init ───────────────────────────────────────────────────────────────────
+async function init() {
+  await loadDashboard();
+  loadPlan();
+  loadAgents();
+  renderView();
+  // Auto-refresh every 2 minutes
+  setInterval(() => loadDashboard().then(() => { if (currentView === 'dashboard') renderView(); }), 120000);
+}
+init();
+</script>
+</body>
+</html>`;
+}