@phren/cli 0.0.19 → 0.0.21

package/mcp/dist/memory-ui-scripts.js

@@ -588,9 +588,7 @@ export function renderProjectReferenceEnhancementScript(_authToken) {
     });
   })();`;
 }
-export function renderReviewQueueEditSyncScript() {
-    return "";
-}
+// renderReviewQueueEditSyncScript removed — was dead code returning ""
 export function renderTasksAndSettingsScript(authToken) {
     const safeToken = JSON.stringify(authToken).slice(1, -1);
     return `(function() {
@@ -606,27 +604,11 @@ export function renderTasksAndSettingsScript(authToken) {
       return fetch(url).then(function(r) { return r.json(); });
     }
 
-    var _taskViewMode = 'list';
-
     function priorityBadge(p) {
       if (!p) return '';
-      var colors = { high: '#ef4444', medium: '#f59e0b', low: '#6b7280' };
-      var color = colors[p] || '#6b7280';
       return '<span class="task-priority-badge task-priority-' + esc(p) + '">' + esc(p) + '</span>';
     }
 
-    function sessionBadge(sessionId) {
-      if (!sessionId) return '';
-      var short = sessionId.length > 8 ? sessionId.slice(0, 8) : sessionId;
-      return '<span class="task-session-badge" title="Session ' + esc(sessionId) + '">' + esc(short) + '</span>';
-    }
-
-    function statusChip(section, checked) {
-      if (checked || section === 'Done') return '<span class="task-status-chip task-status-done" title="Done"><svg width="12" height="12" viewBox="0 0 16 16" fill="none"><path d="M3 8.5l3.5 3.5 6.5-7" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg> Done</span>';
-      if (section === 'Active') return '<span class="task-status-chip task-status-active" title="In Progress">In Progress</span>';
-      return '<span class="task-status-chip task-status-pending" title="Pending">Pending</span>';
-    }
-
     function projectBadge(proj) {
       return '<span class="task-project-badge">' + esc(proj) + '</span>';
     }
@@ -733,55 +715,40 @@ export function renderTasksAndSettingsScript(authToken) {
       var container = document.getElementById('tasks-list');
       if (!container) return;
       if (!tasks.length && !doneTasks.length) {
-        container.innerHTML = '<div class="task-empty-state"><svg viewBox="0 0 48 48" width="64" height="64" style="display:block;margin:0 auto 16px"><ellipse cx="24" cy="24" rx="16" ry="15" fill="#7B68AE" opacity="0.25"/><ellipse cx="24" cy="24" rx="12" ry="11.5" fill="#7B68AE" opacity="0.4"/><circle cx="19" cy="22" r="1.5" fill="#2D2255"/><circle cx="29" cy="22" r="1.5" fill="#2D2255"/><path d="M21 28c1 1.2 2.5 1.5 3.5 1.3 1-.2 2-1 2.5-1.3" stroke="#2D2255" stroke-width="1" fill="none" stroke-linecap="round"/></svg><div style="font-size:var(--text-md);font-weight:600;color:var(--ink);margin-bottom:4px">Nothing to do!</div><div style="color:var(--muted);font-size:var(--text-sm)">Add a task to get started.</div></div>';
+        container.innerHTML = '<div class="task-empty-state"><svg viewBox="0 0 48 48" width="48" height="48" style="display:block;margin:0 auto 12px"><ellipse cx="24" cy="24" rx="16" ry="15" fill="#7B68AE" opacity="0.25"/><ellipse cx="24" cy="24" rx="12" ry="11.5" fill="#7B68AE" opacity="0.4"/><circle cx="19" cy="22" r="1.5" fill="#2D2255"/><circle cx="29" cy="22" r="1.5" fill="#2D2255"/><path d="M21 28c1 1.2 2.5 1.5 3.5 1.3 1-.2 2-1 2.5-1.3" stroke="#2D2255" stroke-width="1" fill="none" stroke-linecap="round"/></svg><div style="font-size:var(--text-md);font-weight:600;color:var(--ink);margin-bottom:4px">Nothing to do!</div><div style="color:var(--muted);font-size:var(--text-sm)">Add a task to get started.</div></div>';
         return;
       }
 
-      // Group by priority within sections
       var priorityOrder = { high: 0, medium: 1, low: 2 };
       function sortByPriority(a, b) {
-        // Unchecked before checked
-        var aChecked = a.checked || a.section === 'Done' ? 1 : 0;
-        var bChecked = b.checked || b.section === 'Done' ? 1 : 0;
-        if (aChecked !== bChecked) return aChecked - bChecked;
-        // Pinned first
         if (a.pinned && !b.pinned) return -1;
         if (!a.pinned && b.pinned) return 1;
-        // Then by priority
         var pa = priorityOrder[a.priority] !== undefined ? priorityOrder[a.priority] : 1;
         var pb = priorityOrder[b.priority] !== undefined ? priorityOrder[b.priority] : 1;
         return pa - pb;
       }
 
-      // Separate into priority groups (exclude checked tasks even if not in Done section)
-      function isActive(t) { return t.section !== 'Done' && !t.checked; }
-      var high = tasks.filter(function(t) { return t.priority === 'high' && isActive(t); }).sort(sortByPriority);
-      var medium = tasks.filter(function(t) { return t.priority === 'medium' && isActive(t); }).sort(sortByPriority);
-      var low = tasks.filter(function(t) { return t.priority === 'low' && isActive(t); }).sort(sortByPriority);
-      var noPriority = tasks.filter(function(t) { return !t.priority && isActive(t); }).sort(sortByPriority);
-      var doneVisible = tasks.filter(function(t) { return t.section === 'Done' || t.checked; });
-
-      function renderTaskCard(t) {
-        var borderClass = t.priority === 'high' ? ' task-card-high' : t.priority === 'medium' ? ' task-card-medium' : t.priority === 'low' ? ' task-card-low' : '';
-        var doneClass = (t.section === 'Done' || t.checked) ? ' task-card-done' : '';
-        var html = '<div class="task-card' + borderClass + doneClass + '">';
-        html += '<div class="task-card-top">';
-        html += statusChip(t.section, t.checked);
-        html += projectBadge(t.project);
+      function isNotDone(t) { return t.section !== 'Done' && !t.checked; }
+
+      function renderTaskRow(t) {
+        var isDone = t.section === 'Done' || t.checked;
+        var priClass = t.priority ? 'task-row-priority-' + esc(t.priority) : 'task-row-priority-none';
+        var html = '<div class="task-row' + (isDone ? ' task-row-done' : '') + '">';
+        html += '<div class="task-row-priority ' + priClass + '"></div>';
+        html += '<div class="task-row-content">';
+        html += '<span class="task-row-text">' + esc(t.line) + '</span>';
+        html += '</div>';
+        html += '<div class="task-row-meta">';
         html += pinIndicator(t.pinned);
         html += githubBadge(t.githubIssue, t.githubUrl);
         html += priorityBadge(t.priority);
-        html += sessionBadge(t.sessionId);
-        html += '</div>';
-        html += '<div class="task-card-body">';
-        html += '<span class="task-card-text">' + esc(t.line) + '</span>';
-        if (t.context) html += '<span class="task-card-context">' + esc(t.context) + '</span>';
+        html += projectBadge(t.project);
         html += '</div>';
-        html += '<div class="task-card-actions">';
-        if (t.section !== 'Done' && !t.checked) {
-          html += '<button class="task-done-btn" data-ts-action="completeTask" data-project="' + esc(t.project) + '" data-item="' + esc(t.line) + '" title="Mark done"><svg width="14" height="14" viewBox="0 0 16 16" fill="none"><path d="M3 8.5l3.5 3.5 6.5-7" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg> Done</button>';
+        html += '<div class="task-row-actions">';
+        if (!isDone) {
+          html += '<button class="task-action-btn task-action-complete" data-ts-action="completeTask" data-project="' + esc(t.project) + '" data-item="' + esc(t.line) + '" title="Mark done"><svg width="14" height="14" viewBox="0 0 16 16" fill="none"><path d="M3 8.5l3.5 3.5 6.5-7" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg></button>';
         }
-        html += '<button class="task-remove-btn" data-ts-action="removeTask" data-project="' + esc(t.project) + '" data-item="' + esc(t.line) + '" title="Delete task" style="background:none;border:1px solid var(--border);border-radius:var(--radius-sm);padding:2px 8px;cursor:pointer;color:var(--muted);font-size:var(--text-xs)"><svg width="12" height="12" viewBox="0 0 16 16" fill="none"><path d="M4 4l8 8M12 4l-8 8" stroke="currentColor" stroke-width="2" stroke-linecap="round"/></svg></button>';
+        html += '<button class="task-action-btn task-action-delete" data-ts-action="removeTask" data-project="' + esc(t.project) + '" data-item="' + esc(t.line) + '" title="Delete task"><svg width="12" height="12" viewBox="0 0 16 16" fill="none"><path d="M4 4l8 8M12 4l-8 8" stroke="currentColor" stroke-width="2" stroke-linecap="round"/></svg></button>';
         html += '</div>';
         html += '</div>';
         return html;
@@ -807,49 +774,42 @@ export function renderTasksAndSettingsScript(authToken) {
         topProjects.forEach(function(p) { html += '<span class="task-summary-project">' + esc(p) + ' (' + projectCounts[p] + ')</span>'; });
         html += '</span>';
       }
-      html += '<span class="task-view-toggle" style="margin-left:auto">';
-      html += '<button class="task-view-btn' + (_taskViewMode === 'list' ? ' active' : '') + '" data-ts-action="setTaskView" data-mode="list" title="List view"><svg width="14" height="14" viewBox="0 0 16 16" fill="none"><path d="M2 4h12M2 8h12M2 12h12" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg></button>';
-      html += '<button class="task-view-btn' + (_taskViewMode === 'compact' ? ' active' : '') + '" data-ts-action="setTaskView" data-mode="compact" title="Compact view"><svg width="14" height="14" viewBox="0 0 16 16" fill="none"><rect x="1" y="2" width="6" height="5" rx="1" stroke="currentColor" stroke-width="1.2"/><rect x="9" y="2" width="6" height="5" rx="1" stroke="currentColor" stroke-width="1.2"/><rect x="1" y="9" width="6" height="5" rx="1" stroke="currentColor" stroke-width="1.2"/><rect x="9" y="9" width="6" height="5" rx="1" stroke="currentColor" stroke-width="1.2"/></svg></button>';
-      html += '</span>';
       html += '</div>';
 
       // Add task input at top (only when a specific project is selected)
-      var projects = projectFilter ? [projectFilter] : [];
-      projects.forEach(function(proj) {
+      if (projectFilter) {
         html += '<div class="task-add-bar">';
-        html += '<input id="task-add-input-' + esc(proj) + '" type="text" class="task-add-input" placeholder="Add a task to ' + esc(proj) + '\u2026" data-ts-action="addTaskKeydown" data-project="' + esc(proj) + '">';
-        html += '<button class="task-add-btn" data-ts-action="addTask" data-project="' + esc(proj) + '"><svg width="14" height="14" viewBox="0 0 16 16" fill="none"><path d="M8 3v10M3 8h10" stroke="currentColor" stroke-width="2" stroke-linecap="round"/></svg> Add</button>';
+        html += '<input id="task-add-input-' + esc(projectFilter) + '" type="text" class="task-add-input" placeholder="Add a task to ' + esc(projectFilter) + '\u2026" data-ts-action="addTaskKeydown" data-project="' + esc(projectFilter) + '">';
+        html += '<button class="task-add-btn" data-ts-action="addTask" data-project="' + esc(projectFilter) + '"><svg width="14" height="14" viewBox="0 0 16 16" fill="none"><path d="M8 3v10M3 8h10" stroke="currentColor" stroke-width="2" stroke-linecap="round"/></svg> Add</button>';
         html += '</div>';
-      });
+      }
 
-      // Priority sections
-      function renderSection(title, items, icon) {
+      // Group by section: Active first, then Queue
+      var activeTasks = tasks.filter(function(t) { return t.section === 'Active' && isNotDone(t); }).sort(sortByPriority);
+      var queueTasks = tasks.filter(function(t) { return t.section !== 'Active' && isNotDone(t); }).sort(sortByPriority);
+
+      function renderSection(title, items) {
         if (!items.length) return '';
-        var gridClass = _taskViewMode === 'compact' ? 'task-card-grid task-card-grid-compact' : 'task-card-grid';
-        var shtml = '<div class="task-priority-section">';
-        shtml += '<div class="task-section-header"><span class="task-section-icon">' + icon + '</span> ' + title + ' <span class="task-section-count">' + items.length + '</span></div>';
-        shtml += '<div class="' + gridClass + '">';
-        items.forEach(function(t) { shtml += renderTaskCard(t); });
+        var shtml = '<div class="task-section-group">';
+        shtml += '<div class="task-section-header">' + title + ' <span class="task-section-count">' + items.length + '</span></div>';
+        shtml += '<div class="task-list">';
+        items.forEach(function(t) { shtml += renderTaskRow(t); });
         shtml += '</div></div>';
         return shtml;
       }
 
-      html += renderSection('High Priority', high, '<svg width="10" height="10" viewBox="0 0 10 10"><circle cx="5" cy="5" r="5" fill="#ef4444"/></svg>');
-      html += renderSection('Medium Priority', medium, '<svg width="10" height="10" viewBox="0 0 10 10"><circle cx="5" cy="5" r="5" fill="#f59e0b"/></svg>');
-      html += renderSection('Low Priority', low, '<svg width="10" height="10" viewBox="0 0 10 10"><circle cx="5" cy="5" r="5" fill="#6b7280"/></svg>');
-      if (noPriority.length) {
-        html += renderSection('Tasks', noPriority, '<svg width="10" height="10" viewBox="0 0 10 10"><circle cx="5" cy="5" r="5" fill="var(--accent)"/></svg>');
-      }
+      html += renderSection('Active', activeTasks);
+      html += renderSection('Queue', queueTasks);
 
       // Done section (collapsible)
-      var allDone = showDone ? doneVisible : doneTasks;
+      var allDone = showDone ? tasks.filter(function(t) { return t.section === 'Done' || t.checked; }) : doneTasks;
       if (allDone.length) {
         html += '<div class="task-done-section">';
         html += '<button class="task-done-toggle" data-ts-action="toggleDoneSection">';
         html += '<span class="task-toggle-arrow">\u25B6</span> Completed <span class="task-section-count">' + allDone.length + '</span></button>';
         html += '<div class="task-done-list" style="display:none">';
-        html += '<div class="task-card-grid">';
-        allDone.forEach(function(t) { html += renderTaskCard(t); });
+        html += '<div class="task-list">';
+        allDone.forEach(function(t) { html += renderTaskRow(t); });
         html += '</div></div></div>';
       }
 
@@ -1172,122 +1132,13 @@ export function renderTasksAndSettingsScript(authToken) {
     var _origSwitchTab = window.switchTab;
     var _tasksLoaded = false;
     var _settingsLoaded = false;
-    var _sessionsLoaded = false;
     window.switchTab = function(tab) {
       if (typeof _origSwitchTab === 'function') _origSwitchTab(tab);
       if (tab === 'tasks' && !_tasksLoaded) { _tasksLoaded = true; loadTasks(); }
       if (tab === 'settings' && !_settingsLoaded) { _settingsLoaded = true; loadSettings(); }
-      if (tab === 'sessions' && !_sessionsLoaded) { _sessionsLoaded = true; loadSessions(); }
-    };
-
-    var _sessionsData = [];
-    window.loadSessions = function() {
-      var projectFilter = document.getElementById('sessions-filter-project');
-      var project = projectFilter ? projectFilter.value : '';
-      var apiUrl = _tsAuthToken ? tsAuthUrl('/api/sessions') : '/api/sessions';
-      if (project) apiUrl += (apiUrl.includes('?') ? '&' : '?') + 'project=' + encodeURIComponent(project);
-      loadJson(apiUrl).then(function(data) {
-        if (!data.ok) throw new Error(data.error || 'Failed to load sessions');
-        _sessionsData = data.sessions || [];
-        renderSessionsList(_sessionsData);
-        // Populate project filter
-        if (projectFilter && projectFilter.options.length <= 1) {
-          var projects = {};
-          _sessionsData.forEach(function(s) { if (s.project) projects[s.project] = true; });
-          Object.keys(projects).sort().forEach(function(p) {
-            var opt = document.createElement('option');
-            opt.value = p; opt.textContent = p;
-            projectFilter.appendChild(opt);
-          });
-        }
-      }).catch(function(err) {
-        var list = document.getElementById('sessions-list');
-        if (list) list.innerHTML = '<div style="padding:40px;color:var(--muted);text-align:center">' + esc(err.message) + '</div>';
-      });
-    };
-
-    function renderSessionsList(sessions) {
-      var list = document.getElementById('sessions-list');
-      var detail = document.getElementById('session-detail');
-      var countEl = document.getElementById('sessions-count');
-      if (detail) detail.style.display = 'none';
-      if (countEl) countEl.textContent = sessions.length + ' session(s)';
-      if (!list) return;
-      if (sessions.length === 0) {
-        list.innerHTML = '<div style="padding:40px;color:var(--muted);text-align:center"><svg viewBox="0 0 32 32" width="32" height="32" style="display:block;margin:0 auto 12px"><ellipse cx="16" cy="16" rx="10" ry="9.5" fill="#7B68AE" opacity="0.4"/><path d="M12 15l1-1 1 1-1 1z" fill="#2D2255"/><path d="M18 15l1-1 1 1-1 1z" fill="#2D2255"/><path d="M15 18.5c0.3-0.3 0.7-0.3 1 0" stroke="#2D2255" stroke-width="0.6" fill="none"/></svg>No sessions found.</div>';
-        return;
-      }
-      list.innerHTML = '<table style="width:100%;border-collapse:collapse;font-size:var(--text-sm)">' +
-        '<thead><tr style="border-bottom:1px solid var(--border);text-align:left">' +
-        '<th style="padding:8px">Session</th><th style="padding:8px">Project</th><th style="padding:8px">Started</th>' +
-        '<th style="padding:8px">Ended</th><th style="padding:8px">Duration</th><th style="padding:8px">Findings</th></tr></thead><tbody>' +
-        sessions.map(function(s) {
-          var id = s.sessionId.slice(0, 8);
-          var startDate = (s.startedAt || '').slice(0, 16).replace('T', ' ');
-          var endDate = s.endedAt ? (s.endedAt || '').slice(0, 16).replace('T', ' ') : '<span style="color:var(--green)">active</span>';
-          var dur = s.durationMins != null ? s.durationMins + 'm' : '—';
-          var summarySnip = s.summary ? '<div class="text-muted" style="font-size:var(--text-xs);max-width:300px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap">' + esc(s.summary.slice(0, 80)) + '</div>' : '';
-          return '<tr style="border-bottom:1px solid var(--border);cursor:pointer" data-ts-action="showSessionDetail" data-session-id="' + esc(s.sessionId) + '">' +
-            '<td style="padding:8px;font-family:monospace">' + esc(id) + summarySnip + '</td>' +
-            '<td style="padding:8px">' + esc(s.project || '—') + '</td>' +
-            '<td style="padding:8px">' + esc(startDate) + '</td>' +
-            '<td style="padding:8px">' + endDate + '</td>' +
-            '<td style="padding:8px">' + esc(dur) + '</td>' +
-            '<td style="padding:8px">' + (s.findingsAdded || 0) + '</td></tr>';
-        }).join('') + '</tbody></table>';
-    }
-
-    window.showSessionDetail = function(sessionId) {
-      var apiUrl = _tsAuthToken ? tsAuthUrl('/api/sessions') : '/api/sessions';
-      apiUrl += (apiUrl.includes('?') ? '&' : '?') + 'sessionId=' + encodeURIComponent(sessionId);
-      var list = document.getElementById('sessions-list');
-      var detail = document.getElementById('session-detail');
-      if (list) list.style.display = 'none';
-      if (detail) { detail.style.display = 'block'; detail.innerHTML = '<div style="padding:20px;color:var(--muted)">Loading session...</div>'; }
-      loadJson(apiUrl).then(function(data) {
-        if (!data.ok) throw new Error(data.error || 'Session not found');
-        var s = data.session;
-        var findings = data.findings || [];
-        var tasks = data.tasks || [];
-        var date = (s.startedAt || '').slice(0, 16).replace('T', ' ');
-        var dur = s.durationMins != null ? s.durationMins + ' min' : '—';
-        var html = '<div style="margin-bottom:12px"><button class="btn btn-sm" data-ts-action="backToSessionsList">← Back</button></div>' +
-          '<div class="card" style="margin-bottom:16px"><div class="card-body">' +
-          '<div style="display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:12px">' +
-          '<div><strong>Session</strong><div class="text-muted" style="font-family:monospace">' + esc(s.sessionId.slice(0, 8)) + '</div></div>' +
-          '<div><strong>Project</strong><div class="text-muted">' + esc(s.project || '—') + '</div></div>' +
-          '<div><strong>Date</strong><div class="text-muted">' + esc(date) + '</div></div>' +
-          '<div><strong>Duration</strong><div class="text-muted">' + esc(dur) + '</div></div>' +
-          '<div><strong>Findings</strong><div class="text-muted">' + findings.length + '</div></div>' +
-          '<div><strong>Tasks</strong><div class="text-muted">' + tasks.length + '</div></div>' +
-          '<div><strong>Status</strong><div class="text-muted">' + esc(s.status) + '</div></div>' +
-          '</div>' +
-          (s.summary ? '<div style="margin-top:12px;padding:12px;background:var(--bg);border-radius:var(--radius-sm)"><strong>Summary</strong><div style="margin-top:4px">' + esc(s.summary) + '</div></div>' : '') +
-          '</div></div>';
-        if (findings.length > 0) {
-          html += '<div class="card" style="margin-bottom:16px"><div class="card-header"><h3>Findings (' + findings.length + ')</h3></div><div class="card-body"><ul style="margin:0;padding-left:20px">';
-          findings.forEach(function(f) { html += '<li style="margin-bottom:4px"><span class="text-muted">[' + esc(f.project) + ']</span> ' + esc(f.text) + '</li>'; });
-          html += '</ul></div></div>';
-        }
-        if (tasks.length > 0) {
-          html += '<div class="card" style="margin-bottom:16px"><div class="card-header"><h3>Tasks (' + tasks.length + ')</h3></div><div class="card-body"><ul style="margin:0;padding-left:20px">';
-          tasks.forEach(function(t) { html += '<li style="margin-bottom:4px"><span class="text-muted">[' + esc(t.project) + '/' + esc(t.section) + ']</span> ' + esc(t.text) + '</li>'; });
-          html += '</ul></div></div>';
-        }
-        if (detail) detail.innerHTML = html;
-      }).catch(function(err) {
-        if (detail) detail.innerHTML = '<div style="padding:20px;color:var(--muted)">' + esc(err.message) + '</div>';
-      });
-    };
-
-    window.backToSessionsList = function() {
-      var list = document.getElementById('sessions-list');
-      var detail = document.getElementById('session-detail');
-      if (list) list.style.display = 'block';
-      if (detail) detail.style.display = 'none';
     };
 
-    // Event delegation for dynamically generated tasks/settings/sessions UI
+    // Event delegation for dynamically generated tasks/settings UI
     document.addEventListener('click', function(e) {
       var target = e.target;
       if (!target || typeof target.closest !== 'function') return;
@@ -1298,15 +1149,12 @@ export function renderTasksAndSettingsScript(authToken) {
       else if (action === 'completeTask') { completeTaskFromUi(actionEl.getAttribute('data-project'), actionEl.getAttribute('data-item')); }
       else if (action === 'removeTask') { removeTaskFromUi(actionEl.getAttribute('data-project'), actionEl.getAttribute('data-item')); }
       else if (action === 'addTask') { addTaskFromUi(actionEl.getAttribute('data-project')); }
-      else if (action === 'setTaskView') { _taskViewMode = actionEl.getAttribute('data-mode') || 'list'; filterTasks(); }
       else if (action === 'setFindingSensitivity') { setFindingSensitivity(actionEl.getAttribute('data-level')); }
       else if (action === 'toggleAutoCapture') { setAutoCapture(actionEl.getAttribute('data-enabled') !== 'true'); }
       else if (action === 'setTaskMode') { setTaskMode(actionEl.getAttribute('data-mode')); }
       else if (action === 'setProactivity') { setProactivity(actionEl.getAttribute('data-level')); }
       else if (action === 'toggleMcpEnabled') { setMcpEnabled(actionEl.getAttribute('data-enabled') !== 'true'); }
       else if (action === 'toggleIntegrationTool') { toggleIntegrationTool(actionEl.getAttribute('data-tool')); }
-      else if (action === 'showSessionDetail') { showSessionDetail(actionEl.getAttribute('data-session-id')); }
-      else if (action === 'backToSessionsList') { backToSessionsList(); }
       else if (action === 'setProjectFindingSensitivity') {
         var proj = getSettingsProject();
         var level = actionEl.getAttribute('data-level');
@@ -1625,10 +1473,6 @@ export function renderEventWiringScript() {
   var tasksFilterSection = document.getElementById('tasks-filter-section');
   if (tasksFilterSection) tasksFilterSection.addEventListener('change', function() { filterTasks(); });
 
-  // --- Sessions filter ---
-  var sessionsFilterProject = document.getElementById('sessions-filter-project');
-  if (sessionsFilterProject) sessionsFilterProject.addEventListener('change', function() { loadSessions(); });
-
   // --- Mascot click animation ---
   var mascotSvg = document.querySelector('.header-brand svg');
   if (mascotSvg) {
@@ -1655,3 +1499,511 @@ export function renderEventWiringScript() {
   }
 })();`;
 }
+export function renderGraphHostScript() {
+    return `(function() {
+  var currentNode = null;
+  var editMode = null;
+
+  function graphApi() {
+    return window.phrenGraph || null;
+  }
+
+  function esc(value) {
+    return String(value)
+      .replace(/&/g, '&amp;')
+      .replace(/</g, '&lt;')
+      .replace(/>/g, '&gt;')
+      .replace(/"/g, '&quot;');
+  }
+
+  function graphData() {
+    var api = graphApi();
+    return api && api.getData ? api.getData() : { nodes: [], links: [], topics: [], total: 0 };
+  }
+
+  function authToken() {
+    try {
+      return new URL(window.location.href).searchParams.get('_auth') || '';
+    } catch {
+      return '';
+    }
+  }
+
+  function authUrl(path) {
+    var token = authToken();
+    if (!token) return path;
+    return path + (path.indexOf('?') === -1 ? '?' : '&') + '_auth=' + encodeURIComponent(token);
+  }
+
+  function graphToast(message, type) {
+    var container = document.getElementById('toast-container');
+    if (!container) return;
+    var toast = document.createElement('div');
+    toast.className = 'toast' + (type ? ' ' + type : '');
+    toast.textContent = message;
+    container.appendChild(toast);
+    setTimeout(function() {
+      if (toast.parentNode) toast.parentNode.removeChild(toast);
+    }, 2600);
+  }
+
+  function fetchCsrfToken() {
+    return fetch(authUrl('/api/csrf-token')).then(function(r) { return r.json(); }).then(function(data) {
+      return data && data.ok ? (data.token || null) : null;
+    }).catch(function() { return null; });
+  }
+
+  function formBody(fields, csrfToken) {
+    var parts = [];
+    Object.keys(fields).forEach(function(key) {
+      var value = fields[key];
+      if (value === undefined || value === null) return;
+      parts.push(encodeURIComponent(key) + '=' + encodeURIComponent(String(value)));
+    });
+    if (csrfToken) parts.push('_csrf=' + encodeURIComponent(csrfToken));
+    return parts.join('&');
+  }
+
+  function graphRequest(path, method, fields) {
+    return fetchCsrfToken().then(function(csrfToken) {
+      return fetch(authUrl(path), {
+        method: method,
+        headers: { 'content-type': 'application/x-www-form-urlencoded' },
+        body: formBody(fields || {}, csrfToken)
+      }).then(function(r) { return r.json(); });
+    });
+  }
+
+  function hidePopover() {
+    currentNode = null;
+    editMode = null;
+    var popover = document.getElementById('graph-node-popover');
+    if (popover) popover.style.display = 'none';
+    if (typeof window.graphClearSelection === 'function') window.graphClearSelection();
+  }
+
+  function positionPopover(x, y) {
+    var popover = document.getElementById('graph-node-popover');
+    var card = document.getElementById('graph-node-popover-card');
+    var container = document.querySelector('#tab-graph .graph-container');
+    if (!popover || !card || !container) return;
+    popover.style.display = 'block';
+    popover.style.visibility = 'hidden';
+    requestAnimationFrame(function() {
+      var containerRect = container.getBoundingClientRect();
+      var cardRect = card.getBoundingClientRect();
+      var left = Math.min(Math.max(12, x + 18), Math.max(12, containerRect.width - cardRect.width - 12));
+      var top = Math.min(Math.max(12, y + 18), Math.max(12, containerRect.height - cardRect.height - 12));
+      popover.style.left = left + 'px';
+      popover.style.top = top + 'px';
+      popover.style.visibility = 'visible';
+    });
+  }
+
+  function currentPopoverPoint() {
+    var popover = document.getElementById('graph-node-popover');
+    return {
+      x: popover ? parseFloat(popover.style.left || '24') : 24,
+      y: popover ? parseFloat(popover.style.top || '24') : 24
+    };
+  }
+
+  function neighborIds(nodeId) {
+    var data = graphData();
+    var ids = [];
+    (data.links || []).forEach(function(link) {
+      if (link.source === nodeId) ids.push(link.target);
+      else if (link.target === nodeId) ids.push(link.source);
+    });
+    return ids;
+  }
+
+  function nodeMap() {
+    var data = graphData();
+    var map = {};
+    (data.nodes || []).forEach(function(node) { map[node.id] = node; });
+    return map;
+  }
+
+  function projectCounts(node) {
+    var map = nodeMap();
+    var counts = { finding: 0, task: 0, entity: 0, reference: 0, other: 0 };
+    neighborIds(node.id).forEach(function(id) {
+      var neighbor = map[id];
+      if (!neighbor) return;
+      var kind = neighbor.kind || 'other';
+      if (counts[kind] === undefined) counts.other++;
+      else counts[kind]++;
+    });
+    return counts;
+  }
+
+  function kindLabel(node) {
+    if (!node) return '';
+    if (node.kind === 'entity') return node.entityType ? 'Fragment · ' + node.entityType : 'Fragment';
+    if (node.kind === 'reference') return 'Reference';
+    if (node.kind === 'task') return 'Task';
+    if (node.kind === 'project') return 'Project';
+    if (node.kind === 'finding') return node.topicLabel ? 'Finding · ' + node.topicLabel : 'Finding';
+    return node.kind || 'Node';
+  }
+
+  function chip(text, accent) {
+    var border = accent ? 'var(--accent)' : 'var(--border)';
+    var bg = accent ? 'var(--accent-dim)' : 'var(--surface-raised)';
+    return '<span style="display:inline-flex;align-items:center;gap:6px;padding:4px 9px;border-radius:999px;border:1px solid ' + border + ';background:' + bg + ';font-size:11px;color:var(--ink)">' + esc(text) + '</span>';
+  }
+
+  function scoreLine(node) {
+    var score = typeof node.qualityScore === 'number' ? Math.round(node.qualityScore * 100) : null;
+    return score ? chip('Quality ' + score, false) : '';
+  }
+
+  function docChip(doc) {
+    var border = 'var(--border)';
+    var bg = 'var(--surface-raised)';
+    return '<span data-doc-click="' + esc(doc) + '" style="display:inline-flex;align-items:center;gap:6px;padding:4px 9px;border-radius:999px;border:1px solid ' + border + ';background:' + bg + ';font-size:11px;color:var(--accent);cursor:pointer;text-decoration:underline dotted" title="Search for ' + esc(doc) + '">' + esc(doc) + '</span>';
+  }
+  function docsList(node) {
+    var docs = (node.refDocs || []).map(function(ref) { return ref.doc; });
+    if (!docs.length) return '';
+    return '<div style="display:flex;flex-wrap:wrap;gap:8px">' + docs.slice(0, 12).map(function(doc) { return docChip(doc); }).join('') + '</div>';
+  }
+
+  function renderView(node) {
+    var title = node.displayLabel || node.label || node.tooltipLabel || node.id;
+    var meta = [kindLabel(node)];
+    if (node.projectName) meta.push(node.projectName);
+    if (node.kind === 'task' && node.section) meta.push(node.section);
+    if (node.kind === 'task' && node.priority) meta.push('Priority ' + node.priority);
+    if (node.kind === 'finding' && node.topicLabel) meta.push(node.topicLabel);
+
+    var header = '<div style="display:flex;flex-direction:column;gap:8px;padding-right:44px"><div style="font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)">' + esc(kindLabel(node)) + '</div><div style="font-size:var(--text-lg);font-weight:600;line-height:1.2">' + esc(title) + '</div><div style="display:flex;flex-wrap:wrap;gap:8px">' + meta.filter(Boolean).map(function(item, index) { return chip(item, index === 0); }).join('') + scoreLine(node) + '</div></div>';
+
+    var body = '';
+    var actions = [];
+
+    if (node.kind === 'project') {
+      var counts = projectCounts(node);
+      body += '<div style="display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px">';
+      body += '<div class="card" style="padding:12px"><div style="font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.05em">Findings</div><div style="font-size:var(--text-lg);font-weight:600;margin-top:4px">' + counts.finding + '</div></div>';
+      body += '<div class="card" style="padding:12px"><div style="font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.05em">Tasks</div><div style="font-size:var(--text-lg);font-weight:600;margin-top:4px">' + counts.task + '</div></div>';
+      body += '<div class="card" style="padding:12px"><div style="font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.05em">Fragments</div><div style="font-size:var(--text-lg);font-weight:600;margin-top:4px">' + counts.entity + '</div></div>';
+      body += '<div class="card" style="padding:12px"><div style="font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.05em">References</div><div style="font-size:var(--text-lg);font-weight:600;margin-top:4px">' + counts.reference + '</div></div>';
+      body += '</div>';
+    } else if (node.kind === 'finding') {
+      body += '<div id="graph-node-text" style="white-space:pre-wrap;line-height:1.65;font-size:var(--text-base)">' + esc(node.tooltipLabel || node.fullLabel || title) + '</div>';
+      actions.push('<button type="button" class="btn btn-sm" data-graph-action="edit">Edit</button>');
+      actions.push('<button type="button" class="btn btn-sm" data-graph-action="delete" style="border-color:var(--danger);color:var(--danger)">Delete</button>');
+    } else if (node.kind === 'task') {
+      body += '<div id="graph-node-text" style="white-space:pre-wrap;line-height:1.65;font-size:var(--text-base)">' + esc(node.tooltipLabel || node.fullLabel || title) + '</div>';
+      body += '<div style="display:flex;flex-wrap:wrap;gap:8px;margin-top:12px">';
+      body += chip('Status ' + (node.section || 'Queue'), true);
+      if (node.priority) body += chip('Priority ' + node.priority, false);
+      body += '</div>';
+      actions.push('<button type="button" class="btn btn-sm" data-graph-action="edit">Edit</button>');
+      if ((node.section || '').toLowerCase() !== 'done') actions.push('<button type="button" class="btn btn-sm" data-graph-action="complete">Done</button>');
+      if ((node.section || '').toLowerCase() !== 'active') actions.push('<button type="button" class="btn btn-sm" data-graph-action="move-active">Move to Active</button>');
+      if ((node.section || '').toLowerCase() !== 'queue') actions.push('<button type="button" class="btn btn-sm" data-graph-action="move-queue">Move to Queue</button>');
+      actions.push('<button type="button" class="btn btn-sm" data-graph-action="delete" style="border-color:var(--danger);color:var(--danger)">Delete</button>');
+    } else if (node.kind === 'entity') {
+      if (node.connectedProjects && node.connectedProjects.length) {
+        body += '<div style="display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px">' + node.connectedProjects.map(function(project) { return chip(project, true); }).join('') + '</div>';
+      }
+      body += docsList(node) || '<div class="text-muted">No linked references.</div>';
+    } else if (node.kind === 'reference') {
+      body += '<div style="white-space:pre-wrap;line-height:1.6;font-size:var(--text-base)">' + esc(node.tooltipLabel || title) + '</div>';
+      body += docsList(node);
+    } else {
+      body += '<div style="white-space:pre-wrap;line-height:1.6;font-size:var(--text-base)">' + esc(node.tooltipLabel || title) + '</div>';
+    }
+
+    return header
+      + '<div style="display:flex;flex-direction:column;gap:14px;margin-top:16px">' + body + '</div>'
+      + (actions.length ? '<div style="display:flex;flex-wrap:wrap;gap:8px;margin-top:18px">' + actions.join('') + '</div>' : '');
+  }
+
+  function renderEdit(node) {
+    var title = node.kind === 'task' ? 'Edit task' : 'Edit finding';
+    var text = node.tooltipLabel || node.fullLabel || node.displayLabel || '';
+    var section = node.section || 'Queue';
+    var priority = node.priority || '';
+    var sectionControls = '';
+    var priorityControls = '';
+    if (node.kind === 'task') {
+      sectionControls = '<label style="display:flex;flex-direction:column;gap:6px;font-size:12px;color:var(--muted)">Status<select id="graph-task-section" style="border:1px solid var(--border);border-radius:8px;padding:8px 10px;background:var(--surface);color:var(--ink)"><option value="Queue"' + (section === 'Queue' ? ' selected' : '') + '>Queue</option><option value="Active"' + (section === 'Active' ? ' selected' : '') + '>Active</option><option value="Done"' + (section === 'Done' ? ' selected' : '') + '>Done</option></select></label>';
+      priorityControls = '<label style="display:flex;flex-direction:column;gap:6px;font-size:12px;color:var(--muted)">Priority<select id="graph-task-priority" style="border:1px solid var(--border);border-radius:8px;padding:8px 10px;background:var(--surface);color:var(--ink)"><option value=""' + (!priority ? ' selected' : '') + '>None</option><option value="high"' + (priority === 'high' ? ' selected' : '') + '>High</option><option value="medium"' + (priority === 'medium' ? ' selected' : '') + '>Medium</option><option value="low"' + (priority === 'low' ? ' selected' : '') + '>Low</option></select></label>';
+    }
+    return '<div style="display:flex;flex-direction:column;gap:8px;padding-right:44px"><div style="font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)">' + esc(title) + '</div><div style="font-size:var(--text-md);font-weight:600">' + esc(node.projectName || kindLabel(node)) + '</div></div>'
+      + '<div style="display:flex;flex-direction:column;gap:12px;margin-top:16px">'
+      + '<textarea id="graph-node-editor" style="min-height:180px;width:100%;border:1px solid var(--border);border-radius:12px;padding:12px 14px;background:var(--surface-sunken);color:var(--ink);font:inherit;line-height:1.55;resize:vertical">' + esc(text) + '</textarea>'
+      + (node.kind === 'task' ? '<div style="display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px">' + sectionControls + priorityControls + '</div>' : '')
+      + '<div style="display:flex;flex-wrap:wrap;gap:8px"><button type="button" class="btn btn-sm" data-graph-action="save-edit">Save</button><button type="button" class="btn btn-sm" data-graph-action="cancel-edit">Cancel</button></div>'
+      + '</div>';
+  }
+
+  function renderPopover(node, x, y) {
+    currentNode = node;
+    var content = document.getElementById('graph-node-content');
+    if (!content || !node) {
+      currentNode = null;
+      editMode = null;
+      var popover = document.getElementById('graph-node-popover');
+      if (popover) popover.style.display = 'none';
+      return;
+    }
+    content.innerHTML = editMode ? renderEdit(node) : renderView(node);
+    bindPopoverActions();
+    positionPopover(x, y);
+  }
+
+  function matchesNode(node, match) {
+    if (!node || !match) return false;
+    if (match.id && node.id !== match.id) return false;
+    if (match.kind && node.kind !== match.kind) return false;
+    if (match.projectName && node.projectName !== match.projectName) return false;
+    if (match.tooltipLabel && (node.tooltipLabel || node.fullLabel || '') !== match.tooltipLabel) return false;
+    if (match.displayLabel && (node.displayLabel || node.label || '') !== match.displayLabel) return false;
+    return true;
+  }
+
+  function reloadGraph(match) {
+    return fetch(authUrl('/api/graph')).then(function(r) {
+      if (!r.ok) throw new Error('HTTP ' + r.status);
+      return r.json();
+    }).then(function(data) {
+      var api = graphApi();
+      if (!api || !api.mount) return;
+      api.mount(data);
+      if (!match) {
+        hidePopover();
+        return;
+      }
+      var next = null;
+      var dataNodes = api.getData ? api.getData().nodes : [];
+      for (var index = 0; index < dataNodes.length; index++) {
+        if (matchesNode(dataNodes[index], match)) {
+          next = dataNodes[index];
+          break;
+        }
+      }
+      if (next && api.focusNode) api.focusNode(next.id);
+      else hidePopover();
+    });
+  }
+
+  function saveFindingEdit() {
+    var editor = document.getElementById('graph-node-editor');
+    if (!editor || !currentNode) return;
+    var nextText = editor.value.trim();
+    if (!nextText || nextText === (currentNode.tooltipLabel || currentNode.fullLabel || '').trim()) {
+      editMode = null;
+      var point = currentPopoverPoint();
+      renderPopover(currentNode, point.x, point.y);
+      return;
+    }
+    graphRequest('/api/findings/' + encodeURIComponent(currentNode.projectName), 'PUT', {
+      old_text: currentNode.tooltipLabel || currentNode.fullLabel || '',
+      new_text: nextText
+    }).then(function(result) {
+      if (!result || !result.ok) throw new Error(result && result.error ? result.error : 'Save failed');
+      graphToast('Finding updated', 'ok');
+      editMode = null;
+      return reloadGraph({ kind: 'finding', projectName: currentNode.projectName, tooltipLabel: nextText });
+    }).catch(function(err) {
+      graphToast('Update failed: ' + err.message, 'err');
+    });
+  }
+
+  function saveTaskEdit() {
+    var editor = document.getElementById('graph-node-editor');
+    var sectionEl = document.getElementById('graph-task-section');
+    var priorityEl = document.getElementById('graph-task-priority');
+    if (!editor || !currentNode) return;
+    var nextText = editor.value.trim();
+    if (!nextText) {
+      graphToast('Task text cannot be empty', 'err');
+      return;
+    }
+    var updates = { text: nextText };
+    if (sectionEl && sectionEl.value) updates.section = sectionEl.value;
+    if (priorityEl) updates.priority = priorityEl.value;
+    graphRequest('/api/tasks/update', 'POST', {
+      project: currentNode.projectName,
+      item: currentNode.tooltipLabel || currentNode.fullLabel || currentNode.displayLabel || '',
+      text: updates.text,
+      section: updates.section || '',
+      priority: updates.priority || ''
+    }).then(function(result) {
+      if (!result || !result.ok) throw new Error(result && result.error ? result.error : 'Save failed');
+      graphToast('Task updated', 'ok');
+      editMode = null;
+      var nextSection = updates.section || currentNode.section || 'Queue';
+      if (nextSection === 'Done') {
+        hidePopover();
+        return reloadGraph(null);
+      }
+      return reloadGraph({ kind: 'task', projectName: currentNode.projectName, tooltipLabel: nextText });
+    }).catch(function(err) {
+      graphToast('Update failed: ' + err.message, 'err');
+    });
+  }
+
+  function deleteCurrentNode() {
+    if (!currentNode) return;
+    if (!confirm('Delete this ' + (currentNode.kind || 'node') + '?')) return;
+    if (currentNode.kind === 'finding') {
+      graphRequest('/api/findings/' + encodeURIComponent(currentNode.projectName), 'DELETE', {
+        text: currentNode.tooltipLabel || currentNode.fullLabel || ''
+      }).then(function(result) {
+        if (!result || !result.ok) throw new Error(result && result.error ? result.error : 'Delete failed');
+        graphToast('Finding deleted', 'ok');
+        return reloadGraph(null);
+      }).catch(function(err) {
+        graphToast('Delete failed: ' + err.message, 'err');
+      });
+      return;
+    }
+    if (currentNode.kind === 'task') {
+      graphRequest('/api/tasks/remove', 'POST', {
+        project: currentNode.projectName,
+        item: currentNode.tooltipLabel || currentNode.fullLabel || currentNode.displayLabel || ''
+      }).then(function(result) {
+        if (!result || !result.ok) throw new Error(result && result.error ? result.error : 'Delete failed');
+        graphToast('Task removed', 'ok');
+        return reloadGraph(null);
+      }).catch(function(err) {
+        graphToast('Delete failed: ' + err.message, 'err');
+      });
+    }
+  }
+
+  function completeCurrentTask() {
+    if (!currentNode) return;
+    graphRequest('/api/tasks/complete', 'POST', {
+      project: currentNode.projectName,
+      item: currentNode.tooltipLabel || currentNode.fullLabel || currentNode.displayLabel || ''
+    }).then(function(result) {
+      if (!result || !result.ok) throw new Error(result && result.error ? result.error : 'Update failed');
+      graphToast('Task completed', 'ok');
+      return reloadGraph(null);
+    }).catch(function(err) {
+      graphToast('Update failed: ' + err.message, 'err');
+    });
+  }
+
+  function moveCurrentTask(section) {
+    if (!currentNode) return;
+    graphRequest('/api/tasks/update', 'POST', {
+      project: currentNode.projectName,
+      item: currentNode.tooltipLabel || currentNode.fullLabel || currentNode.displayLabel || '',
+      section: section
+    }).then(function(result) {
+      if (!result || !result.ok) throw new Error(result && result.error ? result.error : 'Update failed');
+      graphToast('Task moved to ' + section, 'ok');
+      return reloadGraph({ kind: 'task', projectName: currentNode.projectName, tooltipLabel: currentNode.tooltipLabel || currentNode.fullLabel || currentNode.displayLabel || '' });
+    }).catch(function(err) {
+      graphToast('Update failed: ' + err.message, 'err');
+    });
+  }
+
+  function bindPopoverActions() {
+    var closeBtn = document.getElementById('graph-node-close');
+    if (closeBtn) closeBtn.onclick = hidePopover;
+
+    // Doc reference chips — click to search for the document
+    document.querySelectorAll('[data-doc-click]').forEach(function(chip) {
+      chip.addEventListener('click', function() {
+        var doc = chip.getAttribute('data-doc-click') || '';
+        if (!doc) return;
+        // Search for this doc in the graph by updating the search filter
+        var searchInput = document.querySelector('input[data-search-filter]');
+        if (searchInput) {
+          searchInput.value = doc.replace(/FINDINGS\\.md$/, '').replace(/\\/$/, '');
+          searchInput.dispatchEvent(new Event('input', { bubbles: true }));
+        }
+      });
+    });
+
+    document.querySelectorAll('[data-graph-action]').forEach(function(button) {
+      button.addEventListener('click', function() {
+        var action = button.getAttribute('data-graph-action');
+        if (action === 'edit') {
+          editMode = currentNode && (currentNode.kind === 'finding' || currentNode.kind === 'task') ? currentNode.kind : null;
+          var point = currentPopoverPoint();
+          renderPopover(currentNode, point.x, point.y);
+        } else if (action === 'cancel-edit') {
+          editMode = null;
+          var point = currentPopoverPoint();
+          renderPopover(currentNode, point.x, point.y);
+        } else if (action === 'save-edit') {
+          if (editMode === 'task') saveTaskEdit();
+          else saveFindingEdit();
+        } else if (action === 'delete') {
+          deleteCurrentNode();
+        } else if (action === 'complete') {
+          completeCurrentTask();
+        } else if (action === 'move-active') {
+          moveCurrentTask('Active');
+        } else if (action === 'move-queue') {
+          moveCurrentTask('Queue');
+        }
+      });
+    });
+  }
+
+  function ensureHostBindings() {
+    var api = graphApi();
+    if (!api || !api.onNodeSelect) return false;
+    api.onNodeSelect(function(node, x, y) {
+      if (!node) {
+        currentNode = null;
+        editMode = null;
+        var popover = document.getElementById('graph-node-popover');
+        if (popover) popover.style.display = 'none';
+        return;
+      }
+      editMode = null;
+      renderPopover(node, x, y);
+    });
+    if (typeof api.onSelectionClear === 'function') {
+      api.onSelectionClear(function() {
+        currentNode = null;
+        editMode = null;
+        var popover = document.getElementById('graph-node-popover');
+        if (popover) popover.style.display = 'none';
+      });
+    }
+    return true;
+  }
+
+  function onOutsidePointer(event) {
+    var popover = document.getElementById('graph-node-popover-card');
+    if (!currentNode || !popover) return;
+    if (popover.contains(event.target)) return;
+    hidePopover();
+  }
+
+  function onEscape(event) {
+    if (event.key !== 'Escape' || !currentNode) return;
+    if (editMode) {
+      editMode = null;
+      var point = currentPopoverPoint();
+      renderPopover(currentNode, point.x, point.y);
+      return;
+    }
+    hidePopover();
+  }
+
+  document.addEventListener('pointerdown', onOutsidePointer);
+  document.addEventListener('keydown', onEscape);
+
+  if (!ensureHostBindings()) {
+    var tries = 0;
+    var timer = setInterval(function() {
+      tries++;
+      if (ensureHostBindings() || tries > 40) clearInterval(timer);
+    }, 100);
+  }
+})();`;
+}