synabun 1.3.0 → 2.0.0

package/neural-interface/public/shared/ui-sessions.js

@@ -1,10 +1,22 @@
 // ═══════════════════════════════════════════
-// SynaBun — Session Monitor Window
-// Real-time view of active Claude Code sessions, agents, loops, and leak detection.
-// Proper draggable/resizable window with tabbed sections.
+// SynaBun — Notifications Drawer
+// Centralised notification window: pending updates (SynaBun core, CLI tools,
+// SynaBun's rules), active sessions, agents, loops,
+// and leak detection. Proper draggable/resizable window with tabbed sections.
+//
+// Note: CSS classes, DOM IDs, and event names use the legacy `session-monitor`
+// / `sm-*` prefix for backward compat with the rest of the app.
 // ═══════════════════════════════════════════
 
 import { emit, on } from './state.js';
+import { getSynabunUpdateData, openSynabunUpdateModal, forceCheckSynabunUpdate } from './ui-update.js';
+import { getToolUpdateData, runToolUpdate, TOOL_LABELS } from './ui-tool-updates.js';
+import { openSettingsModal } from './ui-settings.js';
+import { getProviderMeta } from './provider-icons.js';
+import { sendToPanel as sendToClaudePanel, isClaudePanelOpen } from './ui-claude-panel.js';
+import { toggleCodexPanel, isCodexPanelOpen } from './cdx/cdx-panel.js';
+import { openOpencodeWithPrompt } from './ui-opencode-panel-v2.js';
+import { fetchRulesStatus, installAllRules, ackRulesNotice } from './api.js';
 
 // ── State ──
 let ws = null;
@@ -12,10 +24,31 @@ let reconnectTimer = null;
 let sessions = [];
 let leaks = [];
 let agents = [];
+let loops = [];
+let staleLoopCount = 0;
 let _panel = null;
 let _backdrop = null;
-let _activeTab = 'sessions'; // 'sessions' | 'agents' | 'leaks'
+let _activeTab = 'updates'; // 'updates' | 'sessions' | 'agents' | 'loops' | 'leaks'
 let isVisible = false;
+let _stalledTickerTimer = null;
+
+// ── Pending-Remember picker state ──
+const PROVIDER_LABELS = { claude: 'Claude Code', codex: 'Codex', opencode: 'OpenCode' };
+let _prPicker = { open: false, provider: 'claude', model: '', modelsByProvider: {}, loading: null };
+
+// ── Notifications state ──
+// SynaBun's rules, as GET /api/setup/rules reports them (lib/rulesets/installer.js).
+// null until it answers and on a server without the route: the drawer then
+// simply has no rules items. The server holds what was acknowledged.
+const RULES_HOSTS = {
+  claude:   { label: 'Claude Code', provider: 'claude-code', section: 'setup-claude' },
+  codex:    { label: 'Codex',       provider: 'codex',       section: 'setup-codex' },
+  opencode: { label: 'OpenCode',    provider: 'opencode',    section: 'setup-opencode' },
+  gemini:   { label: 'Gemini',      provider: 'gemini',      section: 'setup-gemini' },
+};
+// The host states that need the user: each one opens Settings > Setup.
+const RULES_ATTENTION = { outdated: 'Update available', modified: 'Edited copy', conflict: 'Needs repair' };
+let _rulesStatus = null;
 
 // ── Icons ──
 const ICON_TERMINAL = '<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="1.5" y="2" width="13" height="12" rx="2"/><path d="M4.5 6l2.5 2-2.5 2M8.5 10h3"/></svg>';
@@ -30,6 +63,11 @@ const ICON_AGENT = '<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" s
 const ICON_STOP = '<svg viewBox="0 0 16 16" fill="currentColor"><rect x="4" y="4" width="8" height="8" rx="1"/></svg>';
 const ICON_SESSIONS = '<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="1.5" y="2" width="13" height="10" rx="2"/><path d="M5.5 14h5M8 12v2"/></svg>';
 const ICON_LEAKS = '<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M8 2v3M8 11v3"/><path d="M4 5l1.5 2M10.5 9L12 11"/><path d="M2 8h3M11 8h3"/><path d="M4 11l1.5-2M10.5 7L12 5"/></svg>';
+const ICON_LOOP = '<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M14 5a5.5 5.5 0 00-10 0v3M2 11a5.5 5.5 0 0010 0V8"/><path d="M12 5l2 0 0-2M4 11l-2 0 0 2"/></svg>';
+const ICON_BELL = '<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M3 13h10l-1.2-1.5a3 3 0 01-.6-1.8V7a3.2 3.2 0 00-6.4 0v2.7a3 3 0 01-.6 1.8L3 13z"/><path d="M6.5 13.5a1.5 1.5 0 003 0"/></svg>';
+const ICON_RULESET = '<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M3 2.5h7l3 3V13a.5.5 0 01-.5.5h-9A.5.5 0 013 13V3a.5.5 0 010-.5z"/><path d="M9.5 2.5V6h3"/><path d="M5.5 8.5h5M5.5 10.5h5M5.5 12h3"/></svg>';
+const ICON_PACKAGE = '<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M2 4.5L8 1.5l6 3v7L8 14.5 2 11.5v-7z"/><path d="M2 4.5L8 7.5l6-3M8 7.5v7"/></svg>';
+const ICON_UP_ARROW = '<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><path d="M8 13V3M4 7l4-4 4 4"/></svg>';
 
 const TYPE_ICONS = { terminal: ICON_TERMINAL, floating: ICON_FLOATING, sidepanel: ICON_SIDEPANEL, external: ICON_EXTERNAL };
 const TYPE_LABELS = { terminal: 'Terminal', floating: 'Floating', sidepanel: 'Side Panel', external: 'External' };
@@ -51,6 +89,9 @@ function handleWsMessage(msg) {
     case 'session:init':
       sessions = msg.sessions || [];
       leaks = msg.leaks || [];
+      loops = msg.loops || [];
+      staleLoopCount = msg.staleCount || 0;
+      emitLoopsUpdate();
       fetch('/api/agents').then(r => r.json()).then(r => { agents = r.agents || []; render(); }).catch(() => render());
       return;
     case 'session:registered': {
@@ -68,9 +109,19 @@ function handleWsMessage(msg) {
       leaks = msg.leaks || [];
       render();
       break;
+    case 'session:loops':
+      loops = msg.loops || [];
+      staleLoopCount = msg.staleCount || 0;
+      emitLoopsUpdate();
+      render();
+      break;
   }
 }
 
+function emitLoopsUpdate() {
+  emit('loops:updated', { staleCount: staleLoopCount, total: loops.length });
+}
+
 // ── Panel HTML ──
 
 function buildPanelHTML() {
@@ -79,6 +130,13 @@ function buildPanelHTML() {
   const infoCount = leaks.filter(l => l.severity === 'info').length;
   const leakTotal = critCount + warnCount + infoCount;
   const runningAgents = agents.filter(a => a.status === 'running').length;
+  const updateCount = computeUpdates().length;
+  const updatesBadge = updateCount > 0
+    ? `<span class="sm-tab-count sm-tab-count-warning">${updateCount}</span>`
+    : `<span class="sm-tab-count">0</span>`;
+
+  const tabActive = (name) => _activeTab === name ? ' active' : '';
+  const headerCls = 'sm-header drag-handle';
 
   return `
     <div class="resize-handle resize-handle-t" data-resize="t"></div>
@@ -90,33 +148,46 @@ function buildPanelHTML() {
     <div class="resize-handle resize-handle-bl" data-resize="bl"></div>
     <div class="resize-handle resize-handle-br" data-resize="br"></div>
 
-    <div class="sm-header drag-handle" data-drag="session-monitor-panel">
+    <div class="${headerCls}" data-drag="session-monitor-panel">
       <div class="sm-header-left">
-        <h3>Session Monitor</h3>
-        <span class="sm-header-badge" id="sm-session-count">${sessions.length} sessions</span>
-        ${critCount > 0 ? `<span class="sm-header-badge sm-badge-critical">${critCount} critical</span>` : ''}
+        <div class="sm-header-icon" aria-hidden="true">
+          ${ICON_BELL}
+        </div>
+        <div class="sm-header-titlewrap">
+          <h3>Notifications</h3>
+        </div>
       </div>
       <div class="sm-header-actions">
         <button class="sm-header-btn" id="sm-refresh" title="Refresh">${ICON_REFRESH}</button>
         <button class="backdrop-toggle-btn" id="sm-backdrop-toggle" data-tooltip="Toggle backdrop">
           <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/></svg>
         </button>
-        <button class="sm-close" id="sm-close">&times;</button>
+        <button class="sm-close" id="sm-close" title="Close">&times;</button>
       </div>
     </div>
 
-    <div class="sm-tabs" id="sm-tabs">
-      <button class="sm-tab active" data-tab="sessions">
+    <div class="sm-tabs" id="sm-tabs" role="tablist">
+      <button class="sm-tab${tabActive('updates')}" data-tab="updates" role="tab">
+        ${ICON_BELL}
+        <span>Updates</span>
+        ${updatesBadge}
+      </button>
+      <button class="sm-tab${tabActive('sessions')}" data-tab="sessions" role="tab">
         ${ICON_SESSIONS}
         <span>Sessions</span>
         <span class="sm-tab-count">${sessions.length}</span>
       </button>
-      <button class="sm-tab" data-tab="agents">
+      <button class="sm-tab${tabActive('agents')}" data-tab="agents" role="tab">
         ${ICON_AGENT}
         <span>Agents</span>
         ${runningAgents > 0 ? `<span class="sm-tab-count sm-tab-count-active">${runningAgents}</span>` : `<span class="sm-tab-count">${agents.length}</span>`}
       </button>
-      <button class="sm-tab" data-tab="leaks">
+      <button class="sm-tab${tabActive('loops')}" data-tab="loops" role="tab">
+        ${ICON_LOOP}
+        <span>Loops</span>
+        ${staleLoopCount > 0 ? `<span class="sm-tab-count sm-tab-count-warning">${loops.length}</span>` : `<span class="sm-tab-count">${loops.length}</span>`}
+      </button>
+      <button class="sm-tab${tabActive('leaks')}" data-tab="leaks" role="tab">
         ${ICON_LEAKS}
         <span>Health</span>
         ${critCount > 0 ? `<span class="sm-tab-count sm-tab-count-critical">${leakTotal}</span>` : warnCount > 0 ? `<span class="sm-tab-count sm-tab-count-warning">${leakTotal}</span>` : `<span class="sm-tab-count">${leakTotal}</span>`}
@@ -127,6 +198,263 @@ function buildPanelHTML() {
   `;
 }
 
+// Acknowledge every dismissable update in one shot. Used by the "Dismiss all"
+// action in the Updates tab. Only the rules notice can be dismissed.
+function markAllUpdatesRead() {
+  if (computeUpdates().some(it => it.dismissable)) dismissRulesNotice();
+  else if (_panel) render();
+}
+
+// ── Notifications engine ──
+
+// Build the notification list from SynaBun core update data, CLI tool update
+// data and the rules status. Each item is shown in the Updates tab.
+// SynaBun and CLI updates show whenever available (not dismissable). Of the
+// rules items only the notice can be dismissed; the server remembers that.
+function computeUpdates() {
+  const items = [];
+
+  // SynaBun core
+  const synabun = getSynabunUpdateData();
+  if (synabun?.updateAvailable) {
+    items.push({
+      kind: 'synabun',
+      key: 'synabun',
+      title: 'SynaBun',
+      subtitle: `v${synabun.current} → v${synabun.latest}`,
+      meta: synabun.source ? `Source: ${synabun.source}` : '',
+      action: 'Open updater',
+      severity: 'normal',
+    });
+  }
+
+  // CLI tools
+  const toolsData = getToolUpdateData();
+  if (toolsData?.tools) {
+    for (const [key, info] of Object.entries(toolsData.tools)) {
+      if (!info?.updateAvailable) continue;
+      items.push({
+        kind: 'tool',
+        key,
+        title: TOOL_LABELS[key] || key,
+        subtitle: `v${info.installed} → v${info.latest}`,
+        meta: info.canUpdate ? '' : `Update via ${info.installSource || 'your installer'}`,
+        action: info.canUpdate ? 'Run update' : 'How to update',
+        severity: 'normal',
+      });
+    }
+  }
+
+  // SynaBun rules: at most one notice, then one item per tool that needs attention.
+  if (_rulesStatus?.hosts) {
+    const names = (hosts) => (hosts || []).map(h => RULES_HOSTS[h]?.label || h).join(', ');
+    const notice = _rulesStatus.notice;
+    if (notice?.kind === 'offer-install' && notice.hosts?.length) {
+      items.push({
+        kind: 'ruleset',
+        key: 'offer-install',
+        hosts: notice.hosts,
+        title: 'Install SynaBun rules',
+        subtitle: names(notice.hosts),
+        meta: 'SynaBun can put its rules where these tools load them for every project, and keep them up to date.',
+        action: 'Install',
+        dismissable: true,
+        severity: 'normal',
+      });
+    } else if (notice?.kind === 'updated') {
+      items.push({
+        kind: 'ruleset',
+        key: 'updated',
+        hosts: notice.hosts || [],
+        title: 'SynaBun rules updated',
+        subtitle: notice.from && notice.to ? `v${notice.from} \u2192 v${notice.to}` : (notice.to ? `v${notice.to}` : 'Updated'),
+        meta: notice.hosts?.length ? `Updated for ${names(notice.hosts)}` : '',
+        section: 'setup-rules',
+        action: 'Open Setup',
+        dismissable: true,
+        severity: 'normal',
+      });
+    }
+    for (const [host, info] of Object.entries(_rulesStatus.hosts)) {
+      const what = RULES_ATTENTION[info?.state];
+      if (!what || !RULES_HOSTS[host]) continue;
+      items.push({
+        kind: 'ruleset',
+        key: `host:${host}`,
+        host,
+        title: `${RULES_HOSTS[host].label} rules`,
+        subtitle: what,
+        meta: info.state === 'outdated' ? (_rulesStatus.version ? `Version ${_rulesStatus.version} is available` : '')
+            : info.state === 'modified' ? 'This copy was edited, so SynaBun no longer updates it'
+            : (info.error || info.detail || ''),
+        path: info.path || '',
+        section: RULES_HOSTS[host].section,
+        action: 'Open Setup',
+        dismissable: false,
+        severity: 'normal',
+      });
+    }
+  }
+
+  return items;
+}
+
+function emitNotificationsUpdate() {
+  emit('notifications:updated', { unreadCount: computeUpdates().length });
+}
+
+async function refreshRulesStatus() {
+  _rulesStatus = await fetchRulesStatus();
+  emitNotificationsUpdate();
+}
+
+// Settings > Setup re-reads the status after every rules action and passes it on.
+on('rules:changed', (status) => {
+  _rulesStatus = status?.ok ? status : null;
+  emitNotificationsUpdate();
+  if (_panel) render();
+});
+
+function openRulesSetup(section) {
+  if (_panel) closePanel();
+  const sections = [...new Set(['setup-rules', section].filter(Boolean))];
+  openSettingsModal({ tab: 'ai-connections', expand: sections, highlight: [section || 'setup-rules'], scrollTo: section || 'setup-rules' });
+}
+
+// "Install" on the offer: install for the offered tools, then acknowledge the
+// notice so it is not offered again. When a tool refuses (an edited copy, a
+// CLI that is gone) Setup shows which one and why.
+async function installOfferedRules(item) {
+  let refused = false;
+  try {
+    const result = await installAllRules(item.hosts);
+    refused = result?.ok === false;
+    await ackRulesNotice();
+  } catch {
+    refused = true;
+  }
+  await refreshRulesStatus();
+  if (refused) openRulesSetup('setup-rules');
+  else if (_panel) render();
+}
+
+async function dismissRulesNotice() {
+  try { await ackRulesNotice(); } catch { /* still there next time */ }
+  await refreshRulesStatus();
+  if (_panel) render();
+}
+
+function handleUpdateAction(item) {
+  if (!item) return;
+  if (item.kind === 'synabun') {
+    if (_panel) closePanel();
+    openSynabunUpdateModal();
+    return;
+  }
+  if (item.kind === 'tool') {
+    runToolUpdate(item.key);
+    if (_panel) render();
+    return;
+  }
+  if (item.kind === 'ruleset') {
+    if (item.key === 'offer-install') installOfferedRules(item);
+    else openRulesSetup(item.section);
+  }
+}
+
+function handleUpdateAck(item) {
+  if (!item) return;
+  if (item.kind === 'ruleset') {
+    if (item.dismissable) dismissRulesNotice();
+    return;
+  }
+  handleUpdateAction(item);
+  if (_panel) render();
+}
+
+function renderUpdatesTab() {
+  const items = computeUpdates();
+  if (items.length === 0) {
+    return `<div class="sm-empty-state">
+      <div class="sm-empty-icon sm-empty-ok">${ICON_BELL}</div>
+      <div class="sm-empty-title">All caught up</div>
+      <div class="sm-empty-desc">No new updates. We'll let you know when SynaBun, CLI tools or SynaBun's rules need attention.</div>
+    </div>`;
+  }
+
+  // Group by kind for cleaner sections
+  const groups = [
+    { id: 'synabun', label: 'SynaBun', items: items.filter(i => i.kind === 'synabun') },
+    { id: 'tool',    label: 'CLI tools', items: items.filter(i => i.kind === 'tool') },
+    { id: 'ruleset', label: 'Rules', items: items.filter(i => i.kind === 'ruleset') },
+  ];
+
+  let html = '';
+  // Only show Dismiss all when there is something dismissable (the rules notice)
+  const dismissableCount = items.filter(i => i.dismissable).length;
+  if (dismissableCount > 0) {
+    html += `<div class="sm-actionbar">
+      <span class="sm-actionbar-label">${dismissableCount} rules notice${dismissableCount === 1 ? '' : 's'} to dismiss</span>
+      <button class="sm-btn sm-btn-ghost" id="sm-updates-mark-all">Dismiss all</button>
+    </div>`;
+  }
+  for (const g of groups) {
+    if (g.items.length === 0) continue;
+    html += `<div class="sm-section-label">${esc(g.label)} <span class="sm-section-count">${g.items.length}</span></div>`;
+    html += '<div class="sm-list">';
+    for (let i = 0; i < g.items.length; i++) {
+      html += renderUpdateCard(g.items[i], `${g.id}-${i}`);
+    }
+    html += '</div>';
+  }
+  return html;
+}
+
+function renderUpdateCard(item, idx) {
+  let icon;
+  let providerColor;
+  if (item.kind === 'synabun') {
+    const meta = getProviderMeta('synabun');
+    icon = meta.icon;
+    providerColor = meta.color;
+  } else if (item.kind === 'tool') {
+    const meta = getProviderMeta(item.key);
+    icon = meta.icon;
+    providerColor = meta.color;
+  } else {
+    // A tool's own icon for its item; SynaBun's for the notice that covers several tools.
+    const meta = getProviderMeta(RULES_HOSTS[item.host]?.provider || 'synabun');
+    icon = meta.icon;
+    providerColor = meta.color;
+  }
+  const kindLabel = item.kind === 'synabun' ? 'SynaBun'
+                 : item.kind === 'tool'    ? 'CLI tool'
+                 : 'Rules';
+  let html = `<div class="sm-card sm-card-update" data-update-idx="${esc(idx)}">`;
+  html += `<div class="sm-update-row">`;
+  html += `<div class="sm-update-icon" aria-hidden="true" style="color:${providerColor}">${icon}</div>`;
+  html += `<div class="sm-update-content">`;
+  html += `<div class="sm-update-kicker">${esc(kindLabel)}</div>`;
+  html += `<div class="sm-update-line">`;
+  html += `<span class="sm-update-title">${esc(item.title)}</span>`;
+  html += `<span class="sm-update-version">${esc(item.subtitle)}</span>`;
+  html += `</div>`;
+  if (item.meta) {
+    html += `<div class="sm-update-meta">${esc(item.meta)}</div>`;
+  }
+  if (item.kind === 'ruleset' && item.path) {
+    html += `<div class="sm-update-meta sm-update-meta-target"><span class="sm-update-meta-key">File</span><span class="sm-update-meta-val mono">${esc(item.path)}</span></div>`;
+  }
+  html += `</div>`;
+  html += `<div class="sm-update-actions">`;
+  if (item.dismissable) { html += `<button class="sm-btn sm-btn-ghost" data-update-ack="${esc(idx)}" title="Dismiss">Dismiss</button>`; }
+  html += `<button class="sm-btn sm-btn-primary" data-update-action="${esc(idx)}">${esc(item.action)}</button>`;
+  html += `</div>`;
+  html += `</div>`;
+  html += `</div>`;
+  return html;
+}
+
 // ── Tab renderers ──
 
 function renderSessionsTab() {
@@ -163,7 +491,7 @@ function renderSessionsTab() {
     if (s.cwd) html += `<div class="sm-card-row"><span class="sm-card-key">CWD</span><span class="sm-card-val mono" title="${esc(s.cwd)}">${esc(shortPath(s.cwd))}</span></div>`;
     html += `</div>`;
     if (hasLeaks) {
-      html += `<div class="sm-card-warning">Has associated leaks</div>`;
+      html += `<div class="sm-card-note-warning">Has associated leaks</div>`;
     }
     html += `</div>`;
   }
@@ -238,6 +566,7 @@ function renderLeaksTab() {
   const criticalLeaks = leaks.filter(l => l.severity === 'critical');
   const warningLeaks = leaks.filter(l => l.severity === 'warning');
   const infoLeaks = leaks.filter(l => l.severity === 'info');
+  const cleanableLeaks = leaks.filter(l => l.type === 'orphaned-state' || l.type === 'stale-precompact');
 
   if (leaks.length === 0) {
     return `<div class="sm-empty-state">
@@ -268,8 +597,26 @@ function renderLeaksTab() {
     html += '<div class="sm-list">';
     for (const l of infoLeaks) html += renderLeakCard(l);
     html += '</div>';
+  }
+
+  const pendingRememberLeaks = leaks.filter(l =>
+    l.type === 'orphaned-state' && l.file && l.file.includes('pending-remember')
+  );
+
+  if (pendingRememberLeaks.length > 0) {
+    if (!_prPicker.open) {
+      html += `<div class="sm-cleanup-bar">
+        <span>${pendingRememberLeaks.length} pending remember${pendingRememberLeaks.length > 1 ? 's' : ''} — pick a provider/model to summarize each session into a memory</span>
+        <button class="sm-btn sm-btn-cleanup" id="sm-process-pending-remembers-btn">✨ Run Pending Remembers</button>
+      </div>`;
+    } else {
+      html += renderPendingRememberPicker();
+    }
+  }
+
+  if (cleanableLeaks.length > 0) {
     html += `<div class="sm-cleanup-bar">
-      <span>${infoLeaks.length} orphaned file${infoLeaks.length > 1 ? 's' : ''} can be cleaned up</span>
+      <span>${cleanableLeaks.length} stale flag${cleanableLeaks.length > 1 ? 's' : ''} can be cleaned up</span>
       <button class="sm-btn sm-btn-cleanup" id="sm-cleanup-btn">${ICON_CLEANUP} Clean All</button>
     </div>`;
   }
@@ -301,6 +648,97 @@ function renderLeakCard(l) {
   return html;
 }
 
+function renderLoopsTab() {
+  if (loops.length === 0) {
+    return `<div class="sm-empty-state">
+      <div class="sm-empty-icon">${ICON_LOOP}</div>
+      <div class="sm-empty-title">No loops</div>
+      <div class="sm-empty-desc">Active and recent loop runs will appear here.</div>
+    </div>`;
+  }
+
+  const totalCount = loops.length;
+  const stale = loops.filter(l => l.state === 'stale-inactive').length;
+
+  let html = '<div class="sm-list">';
+  for (const l of loops) html += renderLoopCard(l);
+  html += '</div>';
+
+  html += `<div class="sm-loops-actionbar">
+    <span class="sm-loops-summary">${totalCount} loop${totalCount === 1 ? '' : 's'} · ${stale} stale</span>
+    <span class="sm-loops-actions">
+      <button class="sm-btn sm-btn-cleanup" id="sm-loops-clear-stale" ${stale === 0 ? 'disabled' : ''}>${ICON_CLEANUP} Clear stale</button>
+      <button class="sm-btn sm-btn-stop" id="sm-loops-clear-all">${ICON_STOP} Clear all</button>
+    </span>
+  </div>`;
+  return html;
+}
+
+function loopStateLabel(state) {
+  switch (state) {
+    case 'active': return 'Running';
+    case 'finished': return 'Finished';
+    case 'orphaned-pty': return 'Orphaned';
+    case 'stale-inactive': return 'Stale';
+    default: return state;
+  }
+}
+
+function loopStateClass(state) {
+  switch (state) {
+    case 'active': return 'sm-loop-running';
+    case 'finished': return 'sm-loop-finished';
+    case 'orphaned-pty': return 'sm-loop-orphan';
+    case 'stale-inactive': return 'sm-loop-stale';
+    default: return '';
+  }
+}
+
+function formatStalled(stalledMs) {
+  if (!stalledMs || stalledMs < 1000) return '0s';
+  const s = Math.floor(stalledMs / 1000);
+  if (s < 60) return `${s}s`;
+  const m = Math.floor(s / 60);
+  const rem = s % 60;
+  if (m < 60) return rem ? `${m}m ${rem}s` : `${m}m`;
+  const h = Math.floor(m / 60);
+  return `${h}h ${m % 60}m`;
+}
+
+function renderLoopCard(l) {
+  const stateCls = loopStateClass(l.state);
+  const stateLabel = loopStateLabel(l.state);
+  const showStalled = l.state === 'active';
+  // Live-tick adjustment: WS may be a few seconds old, so add elapsed since fetch
+  const stalledMs = (l.stalledMs || 0) + (Date.now() - (l._fetchedAt || Date.now()));
+  const stalledHot = showStalled && stalledMs >= 5 * 60 * 1000;
+  const iter = `${l.currentIteration || 0}/${l.totalIterations || 0}`;
+  const taskPreview = l.task ? (l.task.length > 80 ? l.task.slice(0, 80) + '…' : l.task) : '';
+  const startedAge = l.startedAt ? formatAge(new Date(l.startedAt).getTime()) : '?';
+  const tsidShort = l.terminalSessionId ? l.terminalSessionId.slice(0, 8) : '—';
+
+  let html = `<div class="sm-card ${stateCls}">`;
+  html += `<div class="sm-card-header">`;
+  html += `<span class="sm-loop-badge ${stateCls}">${esc(stateLabel)}</span>`;
+  html += `<span class="sm-loop-iter">${iter}</span>`;
+  html += `<span class="sm-card-spacer"></span>`;
+  if (l.state === 'active' || l.state === 'orphaned-pty' || l.state === 'finished') {
+    html += `<button class="sm-btn sm-btn-stop" data-loop-stop="${esc(l.terminalSessionId || '')}" data-session="${esc(l.sessionId)}" title="Stop loop">${ICON_STOP} Stop</button>`;
+  }
+  html += `</div>`;
+  html += `<div class="sm-card-details">`;
+  if (showStalled) {
+    html += `<div class="sm-card-row"><span class="sm-card-key">Stalled</span><span class="sm-card-val sm-loop-stalled${stalledHot ? ' sm-loop-stalled-hot' : ''}" data-stalled-ms="${l.stalledMs || 0}" data-fetched-at="${l._fetchedAt || Date.now()}">${formatStalled(stalledMs)}</span></div>`;
+  }
+  if (taskPreview) html += `<div class="sm-card-row"><span class="sm-card-key">Task</span><span class="sm-card-val" title="${esc(l.task)}">${esc(taskPreview)}</span></div>`;
+  html += `<div class="sm-card-row"><span class="sm-card-key">Started</span><span class="sm-card-val">${startedAge} ago</span></div>`;
+  html += `<div class="sm-card-row"><span class="sm-card-key">Terminal</span><span class="sm-card-val mono">${esc(tsidShort)} <span class="sm-pulse-${l.terminalAlive ? 'active' : 'dead'}"></span></span></div>`;
+  html += `<div class="sm-card-row"><span class="sm-card-key">Session</span><span class="sm-card-val mono">${esc(l.sessionId.slice(0, 8))}</span></div>`;
+  html += `</div>`;
+  html += `</div>`;
+  return html;
+}
+
 // ── Master render ──
 
 function render() {
@@ -308,10 +746,6 @@ function render() {
   const body = _panel.querySelector('#sm-body');
   if (!body) return;
 
-  // Update header badges
-  const countBadge = _panel.querySelector('#sm-session-count');
-  if (countBadge) countBadge.textContent = `${sessions.length} session${sessions.length !== 1 ? 's' : ''}`;
-
   // Update tab counts
   const critCount = leaks.filter(l => l.severity === 'critical').length;
   const warnCount = leaks.filter(l => l.severity === 'warning').length;
@@ -328,21 +762,56 @@ function render() {
     } else if (tabName === 'agents') {
       countEl.textContent = runningAgents > 0 ? runningAgents : agents.length;
       countEl.className = `sm-tab-count${runningAgents > 0 ? ' sm-tab-count-active' : ''}`;
+    } else if (tabName === 'loops') {
+      countEl.textContent = loops.length;
+      countEl.className = `sm-tab-count${staleLoopCount > 0 ? ' sm-tab-count-warning' : ''}`;
     } else if (tabName === 'leaks') {
       countEl.textContent = leakTotal;
       countEl.className = `sm-tab-count${critCount > 0 ? ' sm-tab-count-critical' : warnCount > 0 ? ' sm-tab-count-warning' : ''}`;
     }
   });
 
+  // Update tabs that depend on Updates count too
+  const updatesTab = _panel.querySelector('.sm-tab[data-tab="updates"]');
+  if (updatesTab) {
+    const c = updatesTab.querySelector('.sm-tab-count');
+    if (c) {
+      const updateCount = computeUpdates().length;
+      c.textContent = updateCount;
+      c.className = `sm-tab-count${updateCount > 0 ? ' sm-tab-count-warning' : ''}`;
+    }
+  }
+
   // Render active tab content
   let html = '';
   switch (_activeTab) {
+    case 'updates': html = renderUpdatesTab(); break;
     case 'sessions': html = renderSessionsTab(); break;
     case 'agents': html = renderAgentsTab(); break;
+    case 'loops': html = renderLoopsTab(); break;
     case 'leaks': html = renderLeaksTab(); break;
   }
   body.innerHTML = html;
 
+  // Wire updates-tab actions (cache items so action/ack handlers stay in sync
+  // with what was rendered, even if computeUpdates() shifts mid-tick)
+  if (_activeTab === 'updates') {
+    const renderedItems = computeUpdates();
+    const findItem = (idx) => {
+      const [groupId, n] = String(idx || '').split('-');
+      const filtered = renderedItems.filter(it => it.kind === groupId);
+      return filtered[Number(n)];
+    };
+    body.querySelectorAll('[data-update-action]').forEach(btn => {
+      btn.addEventListener('click', () => handleUpdateAction(findItem(btn.dataset.updateAction)));
+    });
+    body.querySelectorAll('[data-update-ack]').forEach(btn => {
+      btn.addEventListener('click', () => handleUpdateAck(findItem(btn.dataset.updateAck)));
+    });
+    const markAllBtn = body.querySelector('#sm-updates-mark-all');
+    if (markAllBtn) markAllBtn.addEventListener('click', markAllUpdatesRead);
+  }
+
   // Wire event listeners
   body.querySelectorAll('[data-agent-stop]').forEach(btn => {
     btn.addEventListener('click', () => stopAgent(btn.dataset.agentStop));
@@ -352,24 +821,123 @@ function render() {
   });
   const cleanupBtn = body.querySelector('#sm-cleanup-btn');
   if (cleanupBtn) cleanupBtn.addEventListener('click', cleanupOrphans);
+  const processPendingBtn = body.querySelector('#sm-process-pending-remembers-btn');
+  if (processPendingBtn) processPendingBtn.addEventListener('click', openPendingRememberPicker);
+  body.querySelectorAll('[data-pr-provider]').forEach(b =>
+    b.addEventListener('click', () => selectPendingRememberProvider(b.dataset.prProvider))
+  );
+  const prModel = body.querySelector('#sm-pr-model');
+  if (prModel) prModel.addEventListener('change', () => {
+    _prPicker.model = prModel.value;
+    const runBtn = body.querySelector('#sm-pr-run');
+    if (runBtn) runBtn.disabled = !_prPicker.model;
+  });
+  const prCancel = body.querySelector('#sm-pr-cancel');
+  if (prCancel) prCancel.addEventListener('click', cancelPendingRememberPicker);
+  const prRun = body.querySelector('#sm-pr-run');
+  if (prRun) prRun.addEventListener('click', runPendingRemembers);
+
+  // Wire loops-tab actions
+  body.querySelectorAll('[data-loop-stop]').forEach(btn => {
+    btn.addEventListener('click', () => stopLoop(btn.dataset.loopStop, btn.dataset.session));
+  });
+  const loopsClearStaleBtn = body.querySelector('#sm-loops-clear-stale');
+  if (loopsClearStaleBtn) loopsClearStaleBtn.addEventListener('click', clearStaleLoops);
+  const loopsClearAllBtn = body.querySelector('#sm-loops-clear-all');
+  if (loopsClearAllBtn) loopsClearAllBtn.addEventListener('click', clearAllLoops);
+
+  // Stalled timer ticker — only active while the Loops tab is visible
+  if (_activeTab === 'loops') startStalledTicker();
+  else stopStalledTicker();
+}
+
+function startStalledTicker() {
+  if (_stalledTickerTimer) return;
+  _stalledTickerTimer = setInterval(() => {
+    if (!_panel || _activeTab !== 'loops') { stopStalledTicker(); return; }
+    if (document.hidden) return;
+    const cells = _panel.querySelectorAll('.sm-loop-stalled');
+    const now = Date.now();
+    cells.forEach(cell => {
+      const baseMs = parseInt(cell.dataset.stalledMs || '0', 10);
+      const fetchedAt = parseInt(cell.dataset.fetchedAt || `${now}`, 10);
+      const ms = baseMs + (now - fetchedAt);
+      cell.textContent = formatStalled(ms);
+      cell.classList.toggle('sm-loop-stalled-hot', ms >= 5 * 60 * 1000);
+    });
+  }, 1000);
+}
+
+function stopStalledTicker() {
+  if (_stalledTickerTimer) {
+    clearInterval(_stalledTickerTimer);
+    _stalledTickerTimer = null;
+  }
 }
 
 // ── Actions ──
 
 async function refreshSessions() {
   try {
-    const [sessRes, leakRes, agentRes] = await Promise.all([
+    const [sessRes, leakRes, agentRes, loopRes] = await Promise.all([
       fetch('/api/sessions/active').then(r => r.json()),
       fetch('/api/sessions/leaks').then(r => r.json()),
       fetch('/api/agents').then(r => r.json()).catch(() => ({ agents: [] })),
+      fetch('/api/loop/list').then(r => r.json()).catch(() => ({ loops: [], staleCount: 0 })),
     ]);
     sessions = sessRes.sessions || [];
     leaks = leakRes.leaks || [];
     agents = agentRes.agents || [];
+    const fetchedAt = Date.now();
+    loops = (loopRes.loops || []).map(l => ({ ...l, _fetchedAt: fetchedAt }));
+    staleLoopCount = loopRes.staleCount || 0;
+    emitLoopsUpdate();
+    // Refresh notification feed alongside session/loop data
+    refreshRulesStatus().then(() => render()).catch(() => {});
+    forceCheckSynabunUpdate().then(() => render()).catch(() => {});
     render();
   } catch {}
 }
 
+async function stopLoop(terminalSessionId, sessionId) {
+  try {
+    if (!terminalSessionId) {
+      // Loop file with no terminal — just delete it via cleanup endpoint flow:
+      // mark inactive on the server side by hitting cleanup after the fact is
+      // not possible (cleanup needs active=false). For orphan-pty without a
+      // terminal id, fall through to /api/loop/stop with no body would kill all
+      // — so instead just refresh; the stale broadcast will catch it.
+      await refreshSessions();
+      return;
+    }
+    await fetch('/api/loop/stop', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ terminalSessionId }),
+    });
+    await refreshSessions();
+  } catch {}
+}
+
+async function clearStaleLoops() {
+  try {
+    const res = await fetch('/api/loop/cleanup', { method: 'POST' }).then(r => r.json());
+    if (res?.ok) await refreshSessions();
+  } catch {}
+}
+
+async function clearAllLoops() {
+  if (!confirm('Stop and delete ALL loops, including running ones? This will kill their PTY sessions and close their browser tabs.')) return;
+  try {
+    await fetch('/api/loop/stop', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({}),
+    });
+    await refreshSessions();
+  } catch {}
+}
+
 async function stopAgent(agentId) {
   try {
     await fetch(`/api/agents/${agentId}/stop`, { method: 'POST' });
@@ -395,6 +963,158 @@ async function cleanupOrphans() {
   } catch {}
 }
 
+function renderPendingRememberPicker() {
+  const provider = _prPicker.provider;
+  const models = _prPicker.modelsByProvider[provider] || [];
+  const loading = _prPicker.loading === provider;
+
+  const providerBtns = ['claude', 'codex', 'opencode'].map(p => `
+    <button class="sm-btn sm-pr-prov${p === provider ? ' active' : ''}" data-pr-provider="${p}">
+      ${esc(PROVIDER_LABELS[p])}
+    </button>
+  `).join('');
+
+  let modelOptions = '<option value="">— select model —</option>';
+  if (loading) modelOptions = '<option value="">Loading…</option>';
+  else if (models.length === 0) modelOptions = '<option value="">No models found</option>';
+  else {
+    modelOptions += models.map(m =>
+      `<option value="${esc(m.id)}"${m.id === _prPicker.model ? ' selected' : ''}>${esc(m.label || m.id)}</option>`
+    ).join('');
+  }
+
+  return `<div class="sm-cleanup-bar sm-pr-picker">
+    <div class="sm-pr-row">
+      <span class="sm-pr-label">Provider</span>
+      <span class="sm-pr-providers">${providerBtns}</span>
+    </div>
+    <div class="sm-pr-row">
+      <span class="sm-pr-label">Model</span>
+      <select id="sm-pr-model" class="sm-pr-select"${loading || models.length === 0 ? ' disabled' : ''}>${modelOptions}</select>
+    </div>
+    <div class="sm-pr-row sm-pr-actions">
+      <button class="sm-btn" id="sm-pr-cancel">Cancel</button>
+      <button class="sm-btn sm-btn-cleanup" id="sm-pr-run"${(!_prPicker.model || loading) ? ' disabled' : ''}>Run on ${esc(PROVIDER_LABELS[provider])}</button>
+    </div>
+  </div>`;
+}
+
+async function loadProviderModels(provider) {
+  if (_prPicker.modelsByProvider[provider]) return _prPicker.modelsByProvider[provider];
+  _prPicker.loading = provider;
+  render();
+  try {
+    let models = [];
+    if (provider === 'claude') {
+      const r = await fetch('/api/claude/config').then(r => r.json());
+      models = (r?.models || []).map(m => ({ id: m.id, label: m.label || m.id }));
+    } else if (provider === 'opencode') {
+      const r = await fetch('/api/opencode/providers/full').then(r => r.json()).catch(() => null);
+      const provs = r?.providers || r?.data || r || [];
+      const flat = [];
+      for (const p of (Array.isArray(provs) ? provs : Object.values(provs || {}))) {
+        const pid = p?.id || p?.name || '';
+        const ms = p?.models || {};
+        const list = Array.isArray(ms) ? ms : Object.values(ms);
+        for (const m of list) {
+          const mid = m?.id || m?.name;
+          if (!mid) continue;
+          const id = pid ? `${pid}/${mid}` : mid;
+          flat.push({ id, label: `${pid ? pid + ' · ' : ''}${m?.name || mid}` });
+        }
+      }
+      models = flat;
+    } else if (provider === 'codex') {
+      // Codex models come from the running CLI (WebSocket). Provide a sensible static list.
+      models = [
+        { id: 'gpt-5-codex', label: 'gpt-5-codex' },
+        { id: 'gpt-5', label: 'gpt-5' },
+        { id: 'o4', label: 'o4' },
+        { id: 'o4-mini', label: 'o4-mini' },
+      ];
+    }
+    _prPicker.modelsByProvider[provider] = models;
+    return models;
+  } catch (err) {
+    console.warn(`[pending-remember] model load failed for ${provider}:`, err);
+    _prPicker.modelsByProvider[provider] = [];
+    return [];
+  } finally {
+    if (_prPicker.loading === provider) _prPicker.loading = null;
+  }
+}
+
+async function openPendingRememberPicker() {
+  _prPicker.open = true;
+  if (!_prPicker.provider) _prPicker.provider = 'claude';
+  render();
+  await loadProviderModels(_prPicker.provider);
+  render();
+}
+
+function cancelPendingRememberPicker() {
+  _prPicker.open = false;
+  _prPicker.model = '';
+  render();
+}
+
+async function selectPendingRememberProvider(provider) {
+  if (!provider || provider === _prPicker.provider) return;
+  _prPicker.provider = provider;
+  _prPicker.model = '';
+  render();
+  await loadProviderModels(provider);
+  render();
+}
+
+async function runPendingRemembers() {
+  const provider = _prPicker.provider;
+  const model = _prPicker.model;
+  if (!provider || !model) return;
+  const runBtn = _panel?.querySelector('#sm-pr-run');
+  if (runBtn) { runBtn.disabled = true; runBtn.textContent = 'Loading prompt…'; }
+  try {
+    const res = await fetch('/api/sessions/pending-remember-prompt').then(r => r.json());
+    if (!res?.ok) {
+      alert(res?.error || 'Failed to build prompt');
+      if (runBtn) { runBtn.disabled = false; runBtn.textContent = `Run on ${PROVIDER_LABELS[provider]}`; }
+      return;
+    }
+    if (!res.prompt) {
+      alert(res.message || 'No pending remembers to process.');
+      cancelPendingRememberPicker();
+      return;
+    }
+
+    if (provider === 'claude') {
+      try { localStorage.setItem('claudePanel:lastModel', model); } catch {}
+      await sendToClaudePanel(res.prompt, { newTab: true, tabLabel: 'Pending remembers', autoSubmit: true });
+    } else if (provider === 'opencode') {
+      try { localStorage.setItem('ocp:lastModel', model); } catch {}
+      await openOpencodeWithPrompt(res.prompt, { autoSend: true });
+    } else if (provider === 'codex') {
+      try { localStorage.setItem('cxp:model', model); } catch {}
+      if (!isCodexPanelOpen()) await toggleCodexPanel();
+      // Codex auto-send is unreliable from outside the panel — populate the input
+      // and let the user click send. Best-effort.
+      setTimeout(() => {
+        const input = document.querySelector('#cxp-input');
+        if (input) {
+          input.value = res.prompt;
+          input.dispatchEvent(new Event('input', { bubbles: true }));
+          input.focus();
+        }
+      }, 200);
+    }
+
+    cancelPendingRememberPicker();
+    closePanel();
+  } catch (err) {
+    alert('Failed: ' + (err?.message || err));
+    if (runBtn) { runBtn.disabled = false; runBtn.textContent = `Run on ${PROVIDER_LABELS[provider]}`; }
+  }
+}
+
 // ── Helpers ──
 
 function esc(s) { return String(s).replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;'); }
@@ -430,6 +1150,10 @@ function openPanel() {
   // Backdrop click disabled — close only via ESC or close button
   document.body.appendChild(_backdrop);
 
+  // Default to Updates tab when there's something to act on, otherwise
+  // Sessions (the historical default).
+  _activeTab = computeUpdates().length > 0 ? 'updates' : 'sessions';
+
   _panel = document.createElement('div');
   _panel.className = 'session-monitor-panel glass resizable';
   _panel.id = 'session-monitor-panel';
@@ -437,8 +1161,8 @@ function openPanel() {
   document.body.appendChild(_panel);
 
   // Center at default size
-  _panel.style.left = Math.max(20, (window.innerWidth - 640) / 2) + 'px';
-  _panel.style.top = Math.max(48, (window.innerHeight - 480) / 2) + 'px';
+  _panel.style.left = Math.max(20, (window.innerWidth - 680) / 2) + 'px';
+  _panel.style.top = Math.max(48, (window.innerHeight - 520) / 2) + 'px';
 
   wirePanel();
   isVisible = true;
@@ -459,11 +1183,12 @@ function openPanel() {
 
 function closePanel() {
   if (!_panel) return;
+  stopStalledTicker();
   if (_backdrop) { _backdrop.remove(); _backdrop = null; }
   _panel.remove();
   _panel = null;
   isVisible = false;
-  _activeTab = 'sessions';
+  _activeTab = 'updates';
   emit('session-monitor:closed');
 }
 
@@ -508,17 +1233,47 @@ export function toggleSessionMonitor() {
   else openPanel();
 }
 
-// Widget mode for claude-chat skin
-export function mountSessionWidget(container) {
-  const widget = document.createElement('div');
-  widget.className = 'session-widget';
-  widget.innerHTML = `<div class="sm-body" id="sm-body"></div>`;
-  container.appendChild(widget);
-  _panel = widget;
-  _activeTab = 'sessions';
-  isVisible = true;
-  connectWs();
-  return widget;
+// Open the Notifications drawer and switch directly to the Loops tab. Used by the
+// titlebar stale-loops alert button.
+export function openLoopsTab() {
+  if (!_panel) openPanel();
+  _activeTab = 'loops';
+  if (_panel) {
+    _panel.querySelectorAll('.sm-tab').forEach(t => t.classList.toggle('active', t.dataset.tab === 'loops'));
+    render();
+  }
+}
+
+// Bootstrap fetch: populate badge state without opening the Notifications
+// drawer. Called from ui-navbar.js on init so the alert dot can show on app
+// load.
+export async function fetchLoopsForBadge() {
+  try {
+    const res = await fetch('/api/loop/list').then(r => r.json());
+    loops = res.loops || [];
+    staleLoopCount = res.staleCount || 0;
+    emitLoopsUpdate();
+  } catch {}
+}
+
+// Bootstrap fetch for Updates badge — reads the rules status and emits the
+// notifications:updated event so the navbar can show its count without the
+// drawer ever being opened.
+export async function fetchNotificationsForBadge() {
+  await refreshRulesStatus();
+  // Also re-emit on next tick so ui-update / ui-tool-updates have a chance to
+  // populate their cached state before the count is computed for the badge.
+  setTimeout(() => emitNotificationsUpdate(), 1500);
+}
+
+// Open the Notifications drawer directly to the Updates tab.
+export function openUpdatesTab() {
+  if (!_panel) openPanel();
+  _activeTab = 'updates';
+  if (_panel) {
+    _panel.querySelectorAll('.sm-tab').forEach(t => t.classList.toggle('active', t.dataset.tab === 'updates'));
+    render();
+  }
 }
 
 // Kept for backwards compat