nexo-brain 5.3.20 → 5.3.21

package/src/dashboard/templates/guard 2.html

@@ -0,0 +1,259 @@
+{% extends "base.html" %}
+
+{% block title %}Guard Heatmap{% endblock %}
+
+{% block page_title %}Guard Heatmap{% endblock %}
+{% block page_subtitle %}<span class="text-xs text-slate-500 ml-2">Risk map of the codebase</span>{% endblock %}
+
+{% block header_actions %}
+<button onclick="loadData()" class="text-xs text-slate-400 hover:text-slate-200 transition-colors px-2 py-1 rounded hover:bg-slate-800">
+  <svg class="w-3.5 h-3.5 inline -mt-0.5 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"/></svg>
+  Refresh
+</button>
+{% endblock %}
+
+{% block content %}
+<!-- Stats row -->
+<div class="grid grid-cols-4 gap-4 mb-6">
+  <div class="bg-slate-900/50 border border-slate-800/50 rounded-xl p-5 card">
+    <p class="text-xs uppercase tracking-wider text-slate-500 font-semibold mb-1">Total Checks</p>
+    <p class="text-2xl font-display font-bold text-slate-100" id="stat-total">--</p>
+  </div>
+  <div class="bg-slate-900/50 border border-slate-800/50 rounded-xl p-5 card">
+    <p class="text-xs uppercase tracking-wider text-slate-500 font-semibold mb-1">Areas Covered</p>
+    <p class="text-2xl font-display font-bold text-slate-100" id="stat-areas">--</p>
+  </div>
+  <div class="bg-slate-900/50 border border-slate-800/50 rounded-xl p-5 card">
+    <p class="text-xs uppercase tracking-wider text-slate-500 font-semibold mb-1">Blocking Rate</p>
+    <p class="text-2xl font-display font-bold text-red-400" id="stat-blocking">--</p>
+  </div>
+  <div class="bg-slate-900/50 border border-slate-800/50 rounded-xl p-5 card">
+    <p class="text-xs uppercase tracking-wider text-slate-500 font-semibold mb-1">Somatic Risks</p>
+    <p class="text-2xl font-display font-bold text-amber-400" id="stat-somatic">--</p>
+  </div>
+</div>
+
+<!-- Heatmap + Somatic -->
+<div class="grid grid-cols-3 gap-5 mb-6">
+  <!-- Heatmap Grid -->
+  <div class="col-span-2 bg-slate-900/50 border border-slate-800/50 rounded-xl p-5 card">
+    <div class="flex items-center justify-between mb-4">
+      <h2 class="text-xs uppercase tracking-wider text-slate-500 font-semibold">Risk Heatmap</h2>
+      <div class="flex items-center gap-2 text-[10px] text-slate-500">
+        <span class="flex items-center gap-1"><span class="w-3 h-3 rounded bg-emerald-500/80"></span>Low</span>
+        <span class="flex items-center gap-1"><span class="w-3 h-3 rounded bg-amber-500/80"></span>Medium</span>
+        <span class="flex items-center gap-1"><span class="w-3 h-3 rounded bg-red-500/80"></span>High</span>
+      </div>
+    </div>
+    <div id="heatmap-grid" class="grid grid-cols-3 gap-3">
+      <div class="col-span-3 py-12 text-center text-sm text-slate-500">Loading heatmap...</div>
+    </div>
+  </div>
+
+  <!-- Somatic Markers -->
+  <div class="bg-slate-900/50 border border-slate-800/50 rounded-xl p-5 card">
+    <h2 class="text-xs uppercase tracking-wider text-slate-500 font-semibold mb-4">Somatic Risk Targets</h2>
+    <div id="somatic-list" class="space-y-3">
+      <div class="py-8 text-center text-sm text-slate-500">Loading...</div>
+    </div>
+  </div>
+</div>
+
+<!-- Area Detail Modal -->
+<div id="area-modal" class="hidden fixed inset-0 bg-black/60 backdrop-blur-sm z-50 flex items-center justify-center" onclick="if(event.target===this)closeModal()">
+  <div class="bg-slate-900 border border-slate-700 rounded-2xl p-6 max-w-lg w-full mx-4 shadow-2xl animate-slide-in">
+    <div class="flex items-center justify-between mb-4">
+      <h3 class="text-sm font-display font-semibold text-slate-100" id="modal-title">Area Details</h3>
+      <button onclick="closeModal()" class="text-slate-500 hover:text-slate-300 transition-colors">
+        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M6 18L18 6M6 6l12 12"/></svg>
+      </button>
+    </div>
+    <div id="modal-content" class="space-y-3"></div>
+  </div>
+</div>
+
+<!-- Recent Guard Checks -->
+<div class="bg-slate-900/50 border border-slate-800/50 rounded-xl p-5 card">
+  <div class="flex items-center justify-between mb-4">
+    <h2 class="text-xs uppercase tracking-wider text-slate-500 font-semibold">Recent Guard Checks</h2>
+    <span class="text-[10px] text-slate-600 font-mono" id="checks-count">--</span>
+  </div>
+  <div id="checks-table" class="overflow-x-auto">
+    <table class="w-full text-sm">
+      <thead>
+        <tr class="text-left text-xs text-slate-500 uppercase tracking-wider border-b border-slate-800/50">
+          <th class="pb-2 pr-3 font-semibold">Area</th>
+          <th class="pb-2 pr-3 font-semibold">Action</th>
+          <th class="pb-2 pr-3 font-semibold">Result</th>
+          <th class="pb-2 pr-3 font-semibold">Warnings</th>
+          <th class="pb-2 font-semibold">Time</th>
+        </tr>
+      </thead>
+      <tbody id="checks-body" class="divide-y divide-slate-800/30">
+        <tr><td colspan="5" class="py-8 text-center text-slate-500">Loading checks...</td></tr>
+      </tbody>
+    </table>
+  </div>
+</div>
+{% endblock %}
+
+{% block scripts %}
+<script>
+  let guardData = null;
+
+  function heatColor(blocking, total) {
+    if (!total) return { bg: 'bg-slate-800/50', border: 'border-slate-700/30', text: 'text-slate-500' };
+    const ratio = blocking / total;
+    if (ratio > 0.3) return { bg: 'bg-red-500/15', border: 'border-red-500/30', text: 'text-red-400' };
+    if (ratio > 0.1) return { bg: 'bg-amber-500/15', border: 'border-amber-500/30', text: 'text-amber-400' };
+    return { bg: 'bg-emerald-500/15', border: 'border-emerald-500/30', text: 'text-emerald-400' };
+  }
+
+  function showAreaDetail(area) {
+    if (!guardData || !guardData.heatmap) return;
+    const info = guardData.heatmap[area];
+    if (!info) return;
+
+    document.getElementById('modal-title').textContent = area;
+    const content = document.getElementById('modal-content');
+    content.innerHTML = `
+      <div class="grid grid-cols-3 gap-3">
+        <div class="bg-slate-800/50 rounded-lg p-3 text-center">
+          <p class="text-lg font-bold text-slate-100">${info.count || 0}</p>
+          <p class="text-[10px] text-slate-500 uppercase tracking-wider">Checks</p>
+        </div>
+        <div class="bg-slate-800/50 rounded-lg p-3 text-center">
+          <p class="text-lg font-bold text-red-400">${info.blocking || 0}</p>
+          <p class="text-[10px] text-slate-500 uppercase tracking-wider">Blocking</p>
+        </div>
+        <div class="bg-slate-800/50 rounded-lg p-3 text-center">
+          <p class="text-lg font-bold text-violet-400">${info.learnings || 0}</p>
+          <p class="text-[10px] text-slate-500 uppercase tracking-wider">Learnings</p>
+        </div>
+      </div>
+      ${(info.recent_checks || []).length ? `
+      <div class="mt-3">
+        <p class="text-xs text-slate-500 font-semibold uppercase tracking-wider mb-2">Recent Checks</p>
+        <div class="space-y-1.5">
+          ${(info.recent_checks || []).slice(0, 5).map(c => `
+            <div class="flex items-center justify-between bg-slate-800/30 rounded-lg px-3 py-2 text-xs">
+              <span class="text-slate-300">${escapeHtml(c.action || c.description || '--')}</span>
+              <span class="${c.passed ? 'text-emerald-400' : 'text-red-400'}">${c.passed ? 'PASS' : 'BLOCK'}</span>
+            </div>
+          `).join('')}
+        </div>
+      </div>` : ''}
+    `;
+    document.getElementById('area-modal').classList.remove('hidden');
+  }
+
+  function closeModal() {
+    document.getElementById('area-modal').classList.add('hidden');
+  }
+
+  async function loadData() {
+    const data = await fetchJSON('/api/guard');
+    if (!data) return;
+    guardData = data;
+
+    const checks = data.checks || [];
+    const heatmap = data.heatmap || {};
+    const markers = data.somatic_markers || [];
+
+    // Stats
+    const totalChecks = checks.length;
+    const areas = Object.keys(heatmap);
+    const totalBlocking = checks.filter(c => !c.passed && (c.type === 'blocking' || c.blocked)).length;
+    const blockingRate = totalChecks > 0 ? ((totalBlocking / totalChecks) * 100).toFixed(1) + '%' : '0%';
+
+    document.getElementById('stat-total').textContent = formatNumber(totalChecks);
+    document.getElementById('stat-areas').textContent = areas.length;
+    document.getElementById('stat-blocking').textContent = blockingRate;
+    document.getElementById('stat-somatic').textContent = markers.length;
+
+    // Heatmap grid
+    const grid = document.getElementById('heatmap-grid');
+    if (!areas.length) {
+      grid.innerHTML = '<div class="col-span-3 py-12 text-center text-sm text-slate-500">No guard areas recorded yet</div>';
+    } else {
+      grid.innerHTML = areas.map(area => {
+        const info = heatmap[area];
+        const c = heatColor(info.blocking || 0, info.count || 0);
+        return `
+          <button onclick="showAreaDetail('${escapeHtml(area)}')"
+            class="${c.bg} border ${c.border} rounded-xl p-4 text-left transition-all hover:scale-[1.02] hover:shadow-lg cursor-pointer group">
+            <p class="text-sm font-semibold text-slate-200 group-hover:text-white truncate">${escapeHtml(area)}</p>
+            <div class="flex items-center gap-3 mt-2">
+              <span class="text-xs text-slate-400">${info.count || 0} checks</span>
+              <span class="text-xs ${c.text} font-medium">${info.blocking || 0} blocking</span>
+            </div>
+            <div class="mt-2 h-1.5 bg-slate-800/50 rounded-full overflow-hidden">
+              <div class="h-full rounded-full transition-all duration-500 ${info.blocking > 0 ? (info.blocking / info.count > 0.3 ? 'bg-red-500' : 'bg-amber-500') : 'bg-emerald-500'}"
+                style="width: ${info.count ? Math.min(((info.blocking || 0) / info.count) * 100, 100).toFixed(1) : 0}%"></div>
+            </div>
+          </button>
+        `;
+      }).join('');
+    }
+
+    // Somatic markers
+    const somaticList = document.getElementById('somatic-list');
+    if (!markers.length) {
+      somaticList.innerHTML = '<div class="py-8 text-center text-sm text-slate-500">No somatic markers</div>';
+    } else {
+      const maxScore = Math.max(...markers.map(m => m.risk_score || 0), 1);
+      somaticList.innerHTML = markers.sort((a, b) => (b.risk_score || 0) - (a.risk_score || 0)).slice(0, 10).map(m => {
+        const score = m.risk_score || 0;
+        const pct = (score / maxScore * 100).toFixed(1);
+        const color = score > 5 ? 'bg-red-500' : score > 2 ? 'bg-amber-500' : 'bg-emerald-500';
+        const textColor = score > 5 ? 'text-red-400' : score > 2 ? 'text-amber-400' : 'text-emerald-400';
+        return `
+          <div class="flex items-center gap-3">
+            <div class="flex-1 min-w-0">
+              <p class="text-xs text-slate-300 truncate">${escapeHtml(m.target || '--')}</p>
+              <div class="mt-1 h-1.5 bg-slate-800/50 rounded-full overflow-hidden">
+                <div class="h-full rounded-full ${color} transition-all duration-700" style="width:${pct}%"></div>
+              </div>
+            </div>
+            <div class="text-right flex-shrink-0">
+              <span class="text-xs font-mono font-medium ${textColor}">${score.toFixed(1)}</span>
+              <p class="text-[10px] text-slate-600">${m.incident_count || 0} incidents</p>
+            </div>
+          </div>
+        `;
+      }).join('');
+    }
+
+    // Recent checks table
+    document.getElementById('checks-count').textContent = `${checks.length} checks`;
+    const tbody = document.getElementById('checks-body');
+    if (!checks.length) {
+      tbody.innerHTML = '<tr><td colspan="5" class="py-8 text-center text-slate-500 text-sm">No guard checks recorded</td></tr>';
+    } else {
+      tbody.innerHTML = checks.slice(0, 25).map(c => {
+        const passed = c.passed !== false && !c.blocked;
+        const warnings = c.warnings || c.warning_count || 0;
+        return `
+          <tr class="group hover:bg-slate-800/20 transition-colors">
+            <td class="py-2.5 pr-3 text-slate-300">${escapeHtml(c.area || c.category || '--')}</td>
+            <td class="py-2.5 pr-3 text-slate-400 font-mono text-xs max-w-[200px] truncate">${escapeHtml(c.action || c.description || '--')}</td>
+            <td class="py-2.5 pr-3">
+              <span class="inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-[10px] font-semibold uppercase ${passed ? 'bg-emerald-500/15 text-emerald-400' : 'bg-red-500/15 text-red-400'}">
+                <span class="w-1.5 h-1.5 rounded-full ${passed ? 'bg-emerald-400' : 'bg-red-400'}"></span>
+                ${passed ? 'Pass' : 'Block'}
+              </span>
+            </td>
+            <td class="py-2.5 pr-3 text-xs ${warnings > 0 ? 'text-amber-400' : 'text-slate-600'}">${warnings > 0 ? warnings + ' warning' + (warnings !== 1 ? 's' : '') : 'none'}</td>
+            <td class="py-2.5 text-xs text-slate-500">${relativeTime(c.created_at || c.checked_at)}</td>
+          </tr>
+        `;
+      }).join('');
+    }
+  }
+
+  loadData();
+  setInterval(loadData, 60000);
+
+  document.addEventListener('keydown', e => { if (e.key === 'Escape') closeModal(); });
+</script>
+{% endblock %}

package/src/dashboard/templates/inbox 2.html

@@ -0,0 +1,251 @@
+{% extends "base.html" %}
+
+{% block title %}Inbox{% endblock %}
+{% block page_title %}Inbox{% endblock %}
+
+{% block header_actions %}
+<button onclick="markAllRead()" class="text-xs px-2.5 py-1 rounded-md bg-slate-800 text-slate-400 hover:bg-slate-700 transition-colors">Mark all read</button>
+{% endblock %}
+
+{% block content %}
+<div class="flex flex-col" style="height: calc(100vh - 8.5rem);">
+    <div id="chat-area" class="flex-1 overflow-y-auto space-y-3">
+        <div class="flex items-center justify-center h-full">
+            <p class="text-slate-500 text-sm">Loading messages...</p>
+        </div>
+    </div>
+
+    <!-- Reply indicator -->
+    <div id="reply-bar" class="hidden border-t border-violet-500/30 bg-violet-500/5 px-6 py-2 flex-shrink-0">
+        <div class="flex items-center gap-2 max-w-3xl mx-auto">
+            <div class="w-0.5 h-8 bg-violet-500 rounded-full flex-shrink-0"></div>
+            <div class="flex-1 min-w-0">
+                <span class="text-xs text-violet-400 font-display font-medium" id="reply-author"></span>
+                <p class="text-xs text-slate-400 truncate" id="reply-preview"></p>
+            </div>
+            <button onclick="cancelReply()" class="text-slate-500 hover:text-slate-300 text-lg leading-none flex-shrink-0">&times;</button>
+        </div>
+    </div>
+
+    <div class="border-t border-slate-800/50 pt-4 flex-shrink-0">
+        <div class="flex gap-3 max-w-3xl mx-auto">
+            <textarea id="inbox-msg" placeholder="Leave a note for NEXO..." rows="2"
+                class="flex-1 bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-sm text-slate-200 placeholder-slate-500 focus:outline-none focus:ring-1 focus:ring-violet-500 resize-none"
+                onkeydown="if(event.key==='Enter'&&!event.shiftKey){event.preventDefault();sendNote()}"></textarea>
+            <button onclick="sendNote()" class="px-4 py-2 bg-violet-600 text-white rounded-lg text-sm hover:bg-violet-500 transition-colors self-end font-display font-medium">Send</button>
+        </div>
+    </div>
+</div>
+{% endblock %}
+
+{% block scripts %}
+<script>
+    let messages = [];
+    let pollTimer = null;
+    let replyingTo = null;
+
+    function inboxEscapeHtml(str) {
+        return String(str)
+            .replace(/&/g, '&amp;')
+            .replace(/</g, '&lt;')
+            .replace(/>/g, '&gt;')
+            .replace(/"/g, '&quot;');
+    }
+
+    function authorName(direction) {
+        return direction === 'to_nexo' ? 'User' : 'NEXO';
+    }
+
+    function renderMessage(msg) {
+        const isFromUser = msg.direction === 'to_nexo';
+        const time = new Date(msg.created_at).toLocaleString('es-ES', {
+            day: 'numeric', month: 'short', hour: '2-digit', minute: '2-digit'
+        });
+        const unreadDot = (!msg.read && !isFromUser)
+            ? '<span class="inline-block w-1.5 h-1.5 rounded-full bg-violet-400 ml-1.5 align-middle"></span>'
+            : '';
+
+        let quoteHtml = '';
+        if (msg.reply_to) {
+            const parent = messages.find(m => m.id === msg.reply_to);
+            if (parent) {
+                const parentAuthor = authorName(parent.direction);
+                const parentPreview = inboxEscapeHtml((parent.content || '').slice(0, 120));
+                quoteHtml = `
+                    <div class="flex items-start gap-2 mb-2 cursor-pointer opacity-70 hover:opacity-100 transition-opacity" onclick="scrollToMsg(${parent.id})">
+                        <div class="w-0.5 self-stretch bg-violet-500/50 rounded-full flex-shrink-0"></div>
+                        <div class="min-w-0">
+                            <span class="text-xs font-display font-medium ${parent.direction === 'to_nexo' ? 'text-slate-400' : 'text-pink-400/70'}">${parentAuthor}</span>
+                            <p class="text-xs text-slate-500 truncate">${parentPreview}</p>
+                        </div>
+                    </div>`;
+            }
+        }
+
+        const replyBtn = `<button onclick="startReply(${msg.id})" class="text-slate-600 hover:text-violet-400 transition-colors text-xs font-mono ml-2" title="Reply">&#8617;</button>`;
+
+        if (isFromUser) {
+            return `
+                <div class="flex justify-end" data-id="${msg.id}" id="msg-${msg.id}">
+                    <div class="max-w-lg bg-violet-600/20 border border-violet-500/20 rounded-lg px-4 py-3">
+                        ${quoteHtml}
+                        <div class="text-xs text-slate-500 mb-1 font-display">User</div>
+                        <div class="text-sm text-slate-200 leading-relaxed">${inboxEscapeHtml(msg.content).replace(/\n/g, '<br>')}</div>
+                        <div class="flex items-center justify-end mt-1">
+                            <span class="text-xs text-slate-500 font-mono">${time}</span>
+                            ${replyBtn}
+                        </div>
+                    </div>
+                </div>`;
+        } else {
+            return `
+                <div class="flex justify-start" data-id="${msg.id}" id="msg-${msg.id}">
+                    <div class="max-w-lg bg-slate-800 border border-slate-700 rounded-lg px-4 py-3">
+                        ${quoteHtml}
+                        <div class="text-xs text-pink-400 mb-1 font-display font-medium">NEXO${unreadDot}</div>
+                        <div class="text-sm text-slate-200 leading-relaxed">${inboxEscapeHtml(msg.content).replace(/\n/g, '<br>')}</div>
+                        <div class="flex items-center mt-1">
+                            <span class="text-xs text-slate-500 font-mono">${time}</span>
+                            ${replyBtn}
+                        </div>
+                    </div>
+                </div>`;
+        }
+    }
+
+    function startReply(msgId) {
+        const msg = messages.find(m => m.id === msgId);
+        if (!msg) return;
+        replyingTo = msg;
+        document.getElementById('reply-bar').classList.remove('hidden');
+        document.getElementById('reply-author').textContent = authorName(msg.direction);
+        document.getElementById('reply-preview').textContent = (msg.content || '').slice(0, 150);
+        document.getElementById('inbox-msg').focus();
+    }
+
+    function cancelReply() {
+        replyingTo = null;
+        document.getElementById('reply-bar').classList.add('hidden');
+    }
+
+    function scrollToMsg(msgId) {
+        const el = document.getElementById('msg-' + msgId);
+        if (el) {
+            el.scrollIntoView({ behavior: 'smooth', block: 'center' });
+            el.firstElementChild.classList.add('ring-1', 'ring-violet-500/50');
+            setTimeout(() => el.firstElementChild.classList.remove('ring-1', 'ring-violet-500/50'), 2000);
+        }
+    }
+
+    function renderMessages() {
+        const area = document.getElementById('chat-area');
+        if (messages.length === 0) {
+            area.innerHTML = `
+                <div class="flex items-center justify-center h-full">
+                    <p class="text-slate-500 text-sm">No messages yet. Leave a note for NEXO.</p>
+                </div>`;
+            return;
+        }
+        area.innerHTML = `<div class="space-y-3">${messages.map(renderMessage).join('')}</div>`;
+        area.scrollTop = area.scrollHeight;
+    }
+
+    async function loadMessages() {
+        try {
+            const res = await fetch('/api/inbox?limit=200');
+            if (!res.ok) {
+                let detail = `HTTP ${res.status}`;
+                try { const b = await res.json(); detail = b.error || b.detail || detail; } catch {}
+                throw new Error(detail);
+            }
+            const data = await res.json();
+            messages = data.notes || [];
+            messages.sort((a, b) => new Date(a.created_at) - new Date(b.created_at));
+            renderMessages();
+            markIncomingRead();
+        } catch (e) {
+            document.getElementById('chat-area').innerHTML =
+                `<div class="flex items-center justify-center h-full"><p class="text-red-400 text-sm">Error loading messages: ${inboxEscapeHtml(e.message)}</p></div>`;
+        }
+    }
+
+    async function markIncomingRead() {
+        const unread = messages.filter(m => m.direction === 'to_user' && !m.read);
+        for (const msg of unread) {
+            try {
+                await fetch(`/api/inbox/${msg.id}/read`, { method: 'PUT' });
+                msg.read = true;
+            } catch (e) { /* ignore */ }
+        }
+    }
+
+    async function sendNote() {
+        const textarea = document.getElementById('inbox-msg');
+        const content = textarea.value.trim();
+        if (!content) return;
+
+        const body = { direction: 'to_nexo', content };
+        if (replyingTo) body.reply_to = replyingTo.id;
+
+        try {
+            const res = await fetch('/api/inbox', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify(body)
+            });
+            if (!res.ok) {
+                let detail = `HTTP ${res.status}`;
+                try { const b = await res.json(); detail = b.error || b.detail || detail; } catch {}
+                throw new Error(detail);
+            }
+            const data = await res.json();
+            textarea.value = '';
+            cancelReply();
+            messages.push({
+                id: data.note?.id || Date.now(),
+                direction: 'to_nexo',
+                content,
+                reply_to: body.reply_to || null,
+                created_at: data.note?.created_at || new Date().toISOString(),
+                read: true
+            });
+            renderMessages();
+            showToast('Note sent');
+        } catch (e) {
+            showToast('Error: ' + e.message);
+        }
+    }
+
+    async function markAllRead() {
+        const unread = messages.filter(m => !m.read);
+        for (const msg of unread) {
+            try {
+                await fetch(`/api/inbox/${msg.id}/read`, { method: 'PUT' });
+                msg.read = true;
+            } catch (e) { /* ignore */ }
+        }
+        renderMessages();
+        showToast('All messages marked as read');
+    }
+
+    async function pollNewMessages() {
+        try {
+            const res = await fetch('/api/inbox?limit=200');
+            const data = await res.json();
+            const newMessages = data.notes || [];
+            newMessages.sort((a, b) => new Date(a.created_at) - new Date(b.created_at));
+            const prevIds = messages.map(m => m.id).join(',');
+            const newIds = newMessages.map(m => m.id).join(',');
+            if (prevIds !== newIds || newMessages.length !== messages.length) {
+                messages = newMessages;
+                renderMessages();
+                markIncomingRead();
+            }
+        } catch (e) { /* silent */ }
+    }
+
+    // Initial load + polling
+    loadMessages();
+    pollTimer = setInterval(pollNewMessages, 10000);
+</script>
+{% endblock %}