bgrun 3.11.0 → 3.12.1

package/dashboard/app/page.client.tsx

@@ -1,15 +1,10 @@
-/** @jsxImportSource melina/client */
 /**
  * bgrun Dashboard — Page Client Interactivity
  *
  * NOT a React component. A mount function that adds interactivity
- * to the server-rendered HTML. JSX here creates real DOM elements
- * (via Melina's jsx-dom runtime, not React virtual DOM).
- *
- * Log viewer uses Melina's VDOM render() with keyed reconciler
- * for efficient incremental DOM updates.
+ * to the server-rendered HTML. JSX creates real DOM elements via
+ * Melina's jsx-dom runtime (mapped from react/jsx-runtime).
  */
-import { render as melinaRender, createElement as h, setReconciler } from 'melina/client/render';
 
 interface ProcessData {
     name: string;
@@ -293,6 +288,7 @@ function ProcessCard({ p }: { p: ProcessData }) {
             <div className="card-header">
                 <div className="process-name">
                     <span>{p.name}</span>
+                    {p.group && <span className="group-badge" title={`Group: ${p.group}`}>{p.group}</span>}
                     {guarded && <span className="guard-badge" title="Auto-restart enabled">🛡️</span>}
                 </div>
                 <span className={`status-badge ${p.running ? 'running' : 'stopped'}`}>
@@ -418,6 +414,8 @@ export default function mount(): () => void {
     let isFirstLoad = true;
     let allProcesses: ProcessData[] = [];
     let searchQuery = '';
+    let groupQuery = '';
+    let searchDebounce: ReturnType<typeof setTimeout> | null = null;
     let collapsedGroups: Set<string> = new Set(JSON.parse(localStorage.getItem('bgr_collapsed_groups') || '[]'));
     let drawerProcess: string | null = null;
     let drawerTab: 'stdout' | 'stderr' = 'stdout';
@@ -433,6 +431,28 @@ export default function mount(): () => void {
     let logLastSize = -1;         // Detect no-change polls
     let logNeedsFullRebuild = true; // Full DOM rebuild flag (on tab switch, search change)
 
+    // ─── Virtual Scrolling State ───
+    let LOG_LINE_HEIGHT = 22;       // default estimate, auto-calibrated on first render
+    let logLineHeightCalibrated = false;
+    const LOG_OVERSCAN = 10;        // extra lines rendered above/below viewport
+    const VIRTUAL_THRESHOLD = 200;  // switch to virtual mode above this many lines
+    let logVirtualActive = false;   // whether virtual scrolling is engaged
+    let logFilteredIndices: number[] = []; // indices into logLinesRaw that pass the search filter
+    let logScrollRAF: number | null = null; // rAF handle for throttled scroll
+
+    /** Measure actual log line height from DOM on first render */
+    function calibrateLogLineHeight(logsEl: HTMLElement) {
+        if (logLineHeightCalibrated) return;
+        const firstLine = logsEl.querySelector('.log-line') as HTMLElement;
+        if (firstLine) {
+            const measured = firstLine.getBoundingClientRect().height;
+            if (measured > 0) {
+                LOG_LINE_HEIGHT = Math.round(measured);
+                logLineHeightCalibrated = true;
+            }
+        }
+    }
+
     // ─── Version Badge ───
     const versionBadge = $('version-badge');
     async function loadVersion() {
@@ -447,6 +467,48 @@ export default function mount(): () => void {
     }
     loadVersion();
 
+    // ─── Guard Activity Feed ───
+    interface GuardEvent {
+        time: number;
+        name: string;
+        action: string;
+        success: boolean;
+    }
+
+    async function loadGuardEvents() {
+        const listEl = $('guard-activity-list');
+        const emptyEl = $('guard-activity-empty');
+        if (!listEl) return;
+        try {
+            const res = await fetch('/api/guard-events');
+            const events: GuardEvent[] = await res.json();
+            if (events.length === 0) {
+                if (emptyEl) emptyEl.style.display = '';
+                listEl.innerHTML = '';
+                return;
+            }
+            if (emptyEl) emptyEl.style.display = 'none';
+            listEl.replaceChildren(...events.slice(0, 10).map(ev => {
+                const date = new Date(ev.time);
+                const timeStr = date.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit', second: '2-digit' });
+                const icon = ev.success ? '↻' : '✕';
+                const actionText = ev.action === 'restart' ? 'restarted' : ev.action;
+                return (
+                    <div className={`guard-event ${ev.success ? 'success' : 'failed'}`}>
+                        <span className="guard-event-time">{timeStr}</span>
+                        <span className="guard-event-icon">{icon}</span>
+                        <span className="guard-event-name">{ev.name}</span>
+                        <span className="guard-event-action">{actionText}</span>
+                    </div>
+                ) as unknown as Node;
+            }));
+        } catch {
+            if (emptyEl) emptyEl.style.display = '';
+        }
+    }
+    loadGuardEvents();
+    setInterval(loadGuardEvents, 10000); // Refresh every 10s
+
     // ─── Load & Render Processes ───
 
     async function loadProcesses() {
@@ -455,24 +517,67 @@ export default function mount(): () => void {
         try {
             const res = await fetch('/api/processes');
             allProcesses = await res.json();
+            updateGroupFilter();
             renderFilteredProcesses();
             updateStats(allProcesses);
-        } catch {
-            // silently retry on next tick
+        } catch (err) {
+            console.error('[bgr-dashboard] loadProcesses error:', err);
         } finally {
             isFetching = false;
         }
     }
 
+    function updateGroupFilter() {
+        const groupFilter = $('group-filter') as HTMLSelectElement;
+        if (!groupFilter) return;
+        const groups = new Set<string>();
+        for (const p of allProcesses) {
+            if (p.group) groups.add(p.group);
+        }
+        const currentValue = groupFilter.value;
+        groupFilter.replaceChildren(
+            <option value="">All Groups</option> as unknown as Node,
+            ...Array.from(groups).sort().map(g => <option value={g}>{g}</option> as unknown as Node)
+        );
+        // Preserve selection if still valid
+        if (currentValue && groups.has(currentValue)) {
+            groupFilter.value = currentValue;
+        }
+    }
+
     function renderFilteredProcesses() {
-        const filtered = searchQuery
+        // Always sync searchQuery from DOM to prevent desync
+        if (searchInput && searchInput.value.toLowerCase().trim() !== searchQuery) {
+            searchQuery = searchInput.value.toLowerCase().trim();
+        }
+        // Sync groupQuery from dropdown
+        const groupFilter = $('group-filter') as HTMLSelectElement;
+        if (groupFilter && groupFilter.value !== groupQuery) {
+            groupQuery = groupFilter.value;
+        }
+        let filtered = searchQuery
             ? allProcesses.filter(p =>
                 p.name.toLowerCase().includes(searchQuery) ||
                 p.command.toLowerCase().includes(searchQuery) ||
                 (p.port && String(p.port).includes(searchQuery))
             )
             : allProcesses;
+        // Apply group filter
+        if (groupQuery) {
+            filtered = filtered.filter(p => p.group === groupQuery);
+        }
         renderProcesses(filtered);
+
+        // Update search result count badge
+        const badge = $('search-count');
+        if (badge) {
+            if (searchQuery) {
+                badge.textContent = `${filtered.length}/${allProcesses.length}`;
+                badge.style.display = 'inline-block';
+            } else {
+                badge.style.display = 'none';
+            }
+        }
     }
 
     function updateStats(processes: ProcessData[]) {
@@ -526,6 +631,16 @@ export default function mount(): () => void {
         }
     }
 
+    function toggleGroup(groupDir: string) {
+        if (collapsedGroups.has(groupDir)) {
+            collapsedGroups.delete(groupDir);
+        } else {
+            collapsedGroups.add(groupDir);
+        }
+        localStorage.setItem('bgr_collapsed_groups', JSON.stringify([...collapsedGroups]));
+        renderFilteredProcesses();
+    }
+
     function renderProcesses(processes: ProcessData[]) {
         const tbody = $('processes-table');
         const cardsEl = $('mobile-cards');
@@ -553,61 +668,72 @@ export default function mount(): () => void {
             groups[key].push(p);
         });
 
-        const nodes: Node[] = [];
         const sortedGroupKeys = Object.keys(groups).sort();
 
-        // Always show group headers for every directory
+        // Build DOM nodes for table rows
+        const rows: Node[] = [];
         sortedGroupKeys.forEach(groupDir => {
             const procs = groups[groupDir];
             const running = procs.filter(p => p.running).length;
             const collapsed = collapsedGroups.has(groupDir);
-            nodes.push(<GroupHeader name={groupDir} running={running} total={procs.length} collapsed={collapsed} /> as unknown as Node);
+            rows.push(<GroupHeader name={groupDir} running={running} total={procs.length} collapsed={collapsed} /> as unknown as Node);
             if (!collapsed) {
                 procs.forEach(p => {
-                    nodes.push(<ProcessRow p={p} animate={animate} /> as unknown as Node);
+                    rows.push(<ProcessRow p={p} animate={animate} /> as unknown as Node);
                 });
             }
         });
 
-        tbody.replaceChildren(...nodes);
+        // Replace tbody contents with new DOM nodes
+        tbody.replaceChildren(...rows);
 
         // Add click handlers for group headers (toggle collapse)
         tbody.querySelectorAll('.group-header').forEach(header => {
             header.addEventListener('click', (e: Event) => {
-                // Don't collapse if clicking action buttons
                 if ((e.target as Element).closest('[data-action]')) return;
                 const groupName = (header as HTMLElement).dataset.groupName;
                 if (!groupName) return;
-                if (collapsedGroups.has(groupName)) {
-                    collapsedGroups.delete(groupName);
-                } else {
-                    collapsedGroups.add(groupName);
-                }
-                localStorage.setItem('bgr_collapsed_groups', JSON.stringify([...collapsedGroups]));
-                renderFilteredProcesses();
+                toggleGroup(groupName);
             });
         });
 
         // Render mobile cards
         if (cardsEl) {
-            const cards = processes.map(p => <ProcessCard p={p} /> as unknown as Node);
-            cardsEl.replaceChildren(...cards);
+            cardsEl.replaceChildren(...processes.map(p => <ProcessCard p={p} /> as unknown as Node));
         }
 
         if (isFirstLoad) isFirstLoad = false;
 
-        // Highlight selected row
+        // Restore selected row + keyboard focus row
         if (drawerProcess) {
-            const row = tbody.querySelector(`tr[data-process-name="${drawerProcess}"]`);
+            const finalTbody = $('processes-table') || tbody;
+            const row = finalTbody.querySelector(`tr[data-process-name="${drawerProcess}"]`);
             if (row) row.classList.add('selected');
         }
+        // Restore keyboard focus ring if user had a row focused
+        if (focusedProcessName) {
+            const finalTbody = $('processes-table') || tbody;
+            const focusRow = finalTbody.querySelector(`tr[data-process-name="${focusedProcessName}"]`);
+            if (focusRow) focusRow.classList.add('focus-ring');
+        }
     }
 
-    // ─── Search ───
+    // ─── Search (debounced 150ms) ───
 
     const searchInput = $('search-input') as HTMLInputElement;
     searchInput?.addEventListener('input', () => {
-        searchQuery = searchInput.value.toLowerCase().trim();
+        if (searchDebounce) clearTimeout(searchDebounce);
+        searchDebounce = setTimeout(() => {
+            searchQuery = searchInput.value.toLowerCase().trim();
+            renderFilteredProcesses();
+        }, 150);
+    });
+
+    // ─── Group Filter ───
+
+    const groupFilter = $('group-filter') as HTMLSelectElement;
+    groupFilter?.addEventListener('change', () => {
+        groupQuery = groupFilter.value;
         renderFilteredProcesses();
     });
 
@@ -925,6 +1051,8 @@ export default function mount(): () => void {
         logCurrentTab = '';
         logLastSize = -1;
         logNeedsFullRebuild = true;
+        logVirtualActive = false;
+        logFilteredIndices = [];
         if (!skipRefresh) refreshDrawerLogs();
     }
 
@@ -1124,8 +1252,70 @@ export default function mount(): () => void {
         tbody?.querySelectorAll('tr.selected').forEach(r => r.classList.remove('selected'));
     }
 
-    // Use keyed reconciler for efficient log line diffing
-    setReconciler('keyed');
+
+    // ─── Build filtered indices ───
+    function rebuildFilteredIndices() {
+        const search = logSearch.toLowerCase();
+        logFilteredIndices = [];
+        for (let i = 0; i < logLinesRaw.length; i++) {
+            if (search && !logLinesRaw[i].toLowerCase().includes(search)) continue;
+            logFilteredIndices.push(i);
+        }
+    }
+
+    // ─── Render a single log line HTML string ───
+    function renderLogLineHtml(rawIndex: number): string {
+        const num = rawIndex + 1;
+        return `<div class="log-line" data-ln="${num}"><span class="log-line-num">${num}</span><span class="log-line-content">${logLinesHtml[rawIndex]}</span></div>`;
+    }
+
+    // ─── Virtual scroll: render only visible slice ───
+    function virtualRenderSlice(logsEl: HTMLElement) {
+        const count = logFilteredIndices.length;
+        if (count === 0) {
+            logsEl.innerHTML = '<em style="color: var(--text-muted)">No logs available</em>';
+            return;
+        }
+
+        const totalHeight = count * LOG_LINE_HEIGHT;
+        const scrollTop = logsEl.scrollTop;
+        const viewportH = logsEl.clientHeight;
+
+        // Calculate visible range with overscan
+        let startIdx = Math.floor(scrollTop / LOG_LINE_HEIGHT) - LOG_OVERSCAN;
+        let endIdx = Math.ceil((scrollTop + viewportH) / LOG_LINE_HEIGHT) + LOG_OVERSCAN;
+        startIdx = Math.max(0, startIdx);
+        endIdx = Math.min(count - 1, endIdx);
+
+        // Only rebuild if the visible range actually changed
+        const topSpacer = logsEl.querySelector('.log-virtual-top') as HTMLElement;
+        if (topSpacer && topSpacer.dataset.start === String(startIdx) && topSpacer.dataset.end === String(endIdx)) {
+            return; // same range, skip DOM work
+        }
+
+        const topH = startIdx * LOG_LINE_HEIGHT;
+        const bottomH = Math.max(0, (count - endIdx - 1) * LOG_LINE_HEIGHT);
+
+        // Build visible lines
+        const chunks: string[] = [];
+        chunks.push(`<div class="log-virtual-top" data-start="${startIdx}" data-end="${endIdx}" style="height:${topH}px"></div>`);
+        for (let i = startIdx; i <= endIdx; i++) {
+            chunks.push(renderLogLineHtml(logFilteredIndices[i]));
+        }
+        chunks.push(`<div class="log-virtual-bottom" style="height:${bottomH}px"></div>`);
+        logsEl.innerHTML = chunks.join('');
+    }
+
+    // ─── Scroll handler for virtual mode ───
+    function onLogScroll() {
+        if (!logVirtualActive) return;
+        if (logScrollRAF) return; // already scheduled
+        logScrollRAF = requestAnimationFrame(() => {
+            logScrollRAF = null;
+            const logsEl = $('drawer-logs') as HTMLElement;
+            if (logsEl) virtualRenderSlice(logsEl);
+        });
+    }
 
     function fullRebuildLogs(logsEl: HTMLElement) {
         const search = logSearch.toLowerCase();
@@ -1133,48 +1323,78 @@ export default function mount(): () => void {
             logsEl.innerHTML = '<em style="color: var(--text-muted)">No logs available</em>';
             updateLogCount(0);
             logNeedsFullRebuild = false;
+            logVirtualActive = false;
             return;
         }
 
-        // Build all HTML in one pass using cached ansiToHtml results
-        const chunks: string[] = [];
-        let count = 0;
-        for (let i = 0; i < logLinesRaw.length; i++) {
-            if (search && !logLinesRaw[i].toLowerCase().includes(search)) continue;
-            count++;
-            const num = i + 1;
-            chunks.push(`<div class="log-line" data-ln="${num}"><span class="log-line-num">${num}</span><span class="log-line-content">${logLinesHtml[i]}</span></div>`);
-        }
-        logsEl.innerHTML = chunks.join('');
+        // Rebuild filtered indices
+        rebuildFilteredIndices();
+        const count = logFilteredIndices.length;
         updateLogCount(count);
+
+        // Decide: virtual or direct
+        if (count >= VIRTUAL_THRESHOLD) {
+            logVirtualActive = true;
+            virtualRenderSlice(logsEl);
+        } else {
+            logVirtualActive = false;
+            // Direct render — small enough for full DOM
+            const chunks: string[] = [];
+            for (const idx of logFilteredIndices) {
+                chunks.push(renderLogLineHtml(idx));
+            }
+            logsEl.innerHTML = chunks.join('');
+        }
         logNeedsFullRebuild = false;
+
+        // Auto-calibrate line height from first rendered line
+        if (!logLineHeightCalibrated) {
+            requestAnimationFrame(() => calibrateLogLineHeight(logsEl));
+        }
     }
 
     function appendNewLogLines(logsEl: HTMLElement, startIndex: number) {
-        // Fast path: append only new lines to existing DOM
         const search = logSearch.toLowerCase();
-        const fragment = document.createDocumentFragment();
-        let count = 0;
+
+        // Append to filtered indices
         for (let i = startIndex; i < logLinesRaw.length; i++) {
             if (search && !logLinesRaw[i].toLowerCase().includes(search)) continue;
-            count++;
-            const div = document.createElement('div');
-            div.className = 'log-line';
-            div.setAttribute('data-ln', String(i + 1));
-            div.innerHTML = `<span class="log-line-num">${i + 1}</span><span class="log-line-content">${logLinesHtml[i]}</span>`;
-            fragment.appendChild(div);
-        }
-        if (count > 0) logsEl.appendChild(fragment);
-        // Update total count
-        const total = search
-            ? logLinesRaw.filter(l => l.toLowerCase().includes(search)).length
-            : logLinesRaw.length;
-        updateLogCount(total);
+            logFilteredIndices.push(i);
+        }
+        const count = logFilteredIndices.length;
+        updateLogCount(count);
+
+        // Check if we need to switch to virtual mode
+        if (count >= VIRTUAL_THRESHOLD && !logVirtualActive) {
+            logVirtualActive = true;
+            virtualRenderSlice(logsEl);
+            return;
+        }
+
+        if (logVirtualActive) {
+            // In virtual mode, re-render the current visible slice
+            virtualRenderSlice(logsEl);
+        } else {
+            // Direct DOM append for small logs
+            const fragment = document.createDocumentFragment();
+            for (let i = startIndex; i < logLinesRaw.length; i++) {
+                if (search && !logLinesRaw[i].toLowerCase().includes(search)) continue;
+                const div = document.createElement('div');
+                div.className = 'log-line';
+                div.setAttribute('data-ln', String(i + 1));
+                div.innerHTML = `<span class="log-line-num">${i + 1}</span><span class="log-line-content">${logLinesHtml[i]}</span>`;
+                fragment.appendChild(div);
+            }
+            if (fragment.childNodes.length > 0) logsEl.appendChild(fragment);
+        }
     }
 
     function updateLogCount(count: number) {
         const countEl = $('log-line-count');
-        if (countEl) countEl.textContent = `${count} line${count !== 1 ? 's' : ''}`;
+        if (countEl) {
+            const suffix = logVirtualActive ? ' (virtual)' : '';
+            countEl.textContent = `${count} line${count !== 1 ? 's' : ''}${suffix}`;
+        }
     }
 
     async function refreshDrawerLogs() {
@@ -1287,6 +1507,10 @@ export default function mount(): () => void {
 
     // Click log line → expand/collapse (word-wrap toggle)
     const logsContainer = $('drawer-logs');
+
+    // Virtual scroll handler — drives re-render on scroll in virtual mode
+    logsContainer?.addEventListener('scroll', onLogScroll, { passive: true });
+
     logsContainer?.addEventListener('click', (e: Event) => {
         const line = (e.target as Element).closest('.log-line') as HTMLElement;
         if (!line) return;
@@ -1464,12 +1688,272 @@ export default function mount(): () => void {
         }
     });
 
+    // ─── Templates Modal ───
+
+    interface TemplateData {
+        name: string;
+        command: string;
+        workdir: string;
+        env: string;
+        group: string;
+        created_at: string;
+    }
+
+    let templates: TemplateData[] = [];
+
+    async function loadTemplates() {
+        try {
+            const res = await fetch('/api/templates');
+            if (res.ok) {
+                templates = await res.json();
+                renderTemplates();
+            }
+        } catch (err) {
+            console.error('[bgr-dashboard] loadTemplates error:', err);
+        }
+    }
+
+    function renderTemplates() {
+        const list = $('templates-list');
+        if (!list) return;
+
+        if (templates.length === 0) {
+            list.innerHTML = '<div class="templates-empty">No templates saved yet</div>';
+            return;
+        }
+
+        list.replaceChildren(...templates.map(t => (
+            <div className="template-item">
+                <div className="template-item-info">
+                    <div className="template-item-name">{t.name}</div>
+                    <div className="template-item-command">{t.command}</div>
+                </div>
+                {t.group && <span className="template-item-group">{t.group}</span>}
+                <div className="template-item-actions">
+                    <button className="use-btn" data-use={t.name} title="Use this template">Use</button>
+                    <button className="delete-btn" data-delete={t.name} title="Delete template">✕</button>
+                </div>
+            </div>
+        ) as unknown as Node));
+
+        // Add click handlers
+        list.querySelectorAll('.use-btn').forEach(btn => {
+            btn.addEventListener('click', (e) => {
+                const name = (e.target as HTMLElement).dataset.use;
+                const tmpl = templates.find(t => t.name === name);
+                if (tmpl) {
+                    useTemplate(tmpl);
+                }
+            });
+        });
+
+        list.querySelectorAll('.delete-btn').forEach(btn => {
+            btn.addEventListener('click', (e) => {
+                const name = (e.target as HTMLElement).dataset.delete;
+                if (name) deleteTemplate(name);
+            });
+        });
+    }
+
+    function openTemplatesModal() {
+        const modal = $('templates-modal');
+        if (modal) modal.classList.add('active');
+        loadTemplates();
+    }
+
+    function closeTemplatesModal() {
+        const modal = $('templates-modal');
+        if (modal) modal.classList.remove('active');
+        // Clear form
+        ($('template-name') as HTMLInputElement).value = '';
+        ($('template-command') as HTMLInputElement).value = '';
+        ($('template-directory') as HTMLInputElement).value = '';
+        ($('template-group') as HTMLInputElement).value = '';
+        ($('template-env') as HTMLInputElement).value = '';
+    }
+
+    async function saveTemplate() {
+        const name = ($('template-name') as HTMLInputElement)?.value?.trim();
+        const command = ($('template-command') as HTMLInputElement)?.value?.trim();
+        const workdir = ($('template-directory') as HTMLInputElement)?.value?.trim();
+        const group = ($('template-group') as HTMLInputElement)?.value?.trim();
+        const env = ($('template-env') as HTMLInputElement)?.value?.trim();
+
+        if (!name || !command) {
+            showToast('Name and command are required', 'error');
+            return;
+        }
+
+        try {
+            const res = await fetch('/api/templates', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({ name, command, workdir, group, env }),
+            });
+
+            if (res.ok) {
+                showToast(`Template "${name}" saved`, 'success');
+                loadTemplates();
+                // Clear form
+                ($('template-name') as HTMLInputElement).value = '';
+                ($('template-command') as HTMLInputElement).value = '';
+                ($('template-directory') as HTMLInputElement).value = '';
+                ($('template-group') as HTMLInputElement).value = '';
+                ($('template-env') as HTMLInputElement).value = '';
+            } else {
+                showToast('Failed to save template', 'error');
+            }
+        } catch (err) {
+            showToast('Failed to save template', 'error');
+        }
+    }
+
+    async function deleteTemplate(name: string) {
+        if (!confirm(`Delete template "${name}"?`)) return;
+
+        try {
+            const res = await fetch(`/api/templates?name=${encodeURIComponent(name)}`, { method: 'DELETE' });
+            if (res.ok) {
+                showToast(`Template "${name}" deleted`, 'success');
+                loadTemplates();
+            } else {
+                showToast('Failed to delete template', 'error');
+            }
+        } catch (err) {
+            showToast('Failed to delete template', 'error');
+        }
+    }
+
+    function useTemplate(tmpl: TemplateData) {
+        // Fill new process form with template values
+        ($('process-name-input') as HTMLInputElement).value = '';
+        ($('process-command-input') as HTMLInputElement).value = tmpl.command;
+        ($('process-directory-input') as HTMLInputElement).value = tmpl.workdir;
+        closeTemplatesModal();
+        openModal();
+        showToast(`Template "${tmpl.name}" loaded — enter a process name`, 'success');
+    }
+
+    $('templates-btn')?.addEventListener('click', openTemplatesModal);
+    $('templates-modal-close')?.addEventListener('click', closeTemplatesModal);
+    $('template-save-btn')?.addEventListener('click', saveTemplate);
+    $('templates-modal')?.addEventListener('click', (e) => {
+        if ((e.target as Element).classList.contains('modal-overlay')) {
+            closeTemplatesModal();
+        }
+    });
+
+    // ─── History Modal ───
+
+    interface HistoryEntry {
+        process_name: string;
+        event: string;
+        pid: number | null;
+        timestamp: string;
+        metadata: Record<string, any>;
+    }
+
+    let allHistory: HistoryEntry[] = [];
+
+    async function loadHistory() {
+        try {
+            const res = await fetch('/api/history?limit=100');
+            if (res.ok) {
+                allHistory = await res.json();
+                renderHistory();
+                updateHistoryFilters();
+            }
+        } catch (err) {
+            console.error('[bgr-dashboard] loadHistory error:', err);
+        }
+    }
+
+    function updateHistoryFilters() {
+        const processFilter = $('history-process-filter') as HTMLSelectElement;
+        const eventFilter = $('history-event-filter') as HTMLSelectElement;
+        if (!processFilter) return;
+
+        const processNames = new Set<string>();
+        for (const h of allHistory) {
+            processNames.add(h.process_name);
+        }
+
+        const currentValue = processFilter.value;
+        processFilter.replaceChildren(
+            <option value="">All Processes</option> as unknown as Node,
+            ...Array.from(processNames).sort().map(n => <option value={n}>{n}</option> as unknown as Node)
+        );
+        if (currentValue && processNames.has(currentValue)) {
+            processFilter.value = currentValue;
+        }
+    }
+
+    function renderHistory() {
+        const list = $('history-list');
+        const processFilter = $('history-process-filter') as HTMLSelectElement;
+        const eventFilter = $('history-event-filter') as HTMLSelectElement;
+        if (!list) return;
+
+        const processValue = processFilter?.value || '';
+        const eventValue = eventFilter?.value || '';
+
+        let filtered = allHistory;
+        if (processValue) {
+            filtered = filtered.filter(h => h.process_name === processValue);
+        }
+        if (eventValue) {
+            filtered = filtered.filter(h => h.event === eventValue);
+        }
+
+        if (filtered.length === 0) {
+            list.innerHTML = '<div class="history-empty">No history found</div>';
+            return;
+        }
+
+        list.replaceChildren(...filtered.map(h => {
+            const time = new Date(h.timestamp);
+            const timeStr = time.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' }) + ' ' + time.toLocaleDateString([], { month: 'short', day: 'numeric' });
+            return (
+                <div className="history-item">
+                    <span className="history-item-time">{timeStr}</span>
+                    <span className="history-item-process">{h.process_name}</span>
+                    <span className={`history-item-event ${h.event}`}>{h.event.replace('_', ' ')}</span>
+                    {h.pid && <span className="history-item-pid">PID {h.pid}</span>}
+                </div>
+            ) as unknown as Node;
+        }));
+    }
+
+    function openHistoryModal() {
+        const modal = $('history-modal');
+        if (modal) modal.classList.add('active');
+        loadHistory();
+    }
+
+    function closeHistoryModal() {
+        const modal = $('history-modal');
+        if (modal) modal.classList.remove('active');
+    }
+
+    $('history-btn')?.addEventListener('click', openHistoryModal);
+    $('history-modal-close')?.addEventListener('click', closeHistoryModal);
+    $('history-modal')?.addEventListener('click', (e) => {
+        if ((e.target as Element).classList.contains('modal-overlay')) {
+            closeHistoryModal();
+        }
+    });
+    $('history-process-filter')?.addEventListener('change', renderHistory);
+    $('history-event-filter')?.addEventListener('change', renderHistory);
+
     // ─── Toolbar Actions ───
     $('refresh-btn')?.addEventListener('click', () => {
         loadProcesses();
         if (drawerProcess) refreshDrawerLogs();
     });
 
+    // ─── Shortcuts Button ───
+    $('shortcuts-btn')?.addEventListener('click', toggleShortcutsOverlay);
+
     // ─── Guard All Button ───
     $('guard-all-btn')?.addEventListener('click', async () => {
         const guardAllBtn = $('guard-all-btn') as HTMLButtonElement;
@@ -1513,14 +1997,95 @@ export default function mount(): () => void {
     // Group toggle removed — always-on directory grouping
 
     // ─── Keyboard Shortcuts ───
+    let focusedProcessName: string | null = null;
+
+    function getFocusableRows(): HTMLElement[] {
+        const rows = tbody?.querySelectorAll('tr[data-process-name]') as NodeListOf<HTMLElement> | undefined;
+        return rows ? Array.from(rows) : [];
+    }
+
+    function setProcessFocus(name: string | null) {
+        // Remove previous focus
+        tbody?.querySelectorAll('tr.keyboard-focus').forEach(r => r.classList.remove('keyboard-focus'));
+        focusedProcessName = name;
+        if (!name) return;
+        const row = tbody?.querySelector(`tr[data-process-name="${name}"]`) as HTMLElement;
+        if (row) {
+            row.classList.add('keyboard-focus');
+            row.scrollIntoView({ block: 'nearest', behavior: 'smooth' });
+        }
+    }
+
+    function navigateProcess(direction: 'up' | 'down') {
+        const rows = getFocusableRows();
+        if (rows.length === 0) return;
+
+        if (!focusedProcessName) {
+            // Nothing focused: pick first or last
+            const target = direction === 'down' ? rows[0] : rows[rows.length - 1];
+            setProcessFocus(target.dataset.processName || null);
+            return;
+        }
+
+        const idx = rows.findIndex(r => r.dataset.processName === focusedProcessName);
+        if (idx === -1) {
+            setProcessFocus(rows[0].dataset.processName || null);
+            return;
+        }
+
+        const nextIdx = direction === 'down'
+            ? Math.min(idx + 1, rows.length - 1)
+            : Math.max(idx - 1, 0);
+        setProcessFocus(rows[nextIdx].dataset.processName || null);
+    }
+
+    /** Dispatch a process action by synthesizing a click on a virtual button */
+    function dispatchAction(actionName: string, processName: string) {
+        const fakeBtn = document.createElement('button');
+        fakeBtn.dataset.action = actionName;
+        fakeBtn.dataset.name = processName;
+        // For guard toggle, read current state
+        if (actionName === 'guard') {
+            const proc = allProcesses.find(p => p.name === processName);
+            fakeBtn.dataset.guarded = proc && isGuarded(proc) ? 'true' : 'false';
+        }
+        const fakeEvent = new MouseEvent('click');
+        Object.defineProperty(fakeEvent, 'target', { value: fakeBtn });
+        handleAction(fakeEvent);
+    }
+
+    function toggleShortcutsOverlay() {
+        const overlay = $('shortcuts-overlay');
+        if (overlay) overlay.classList.toggle('active');
+    }
+
+    $('shortcuts-close-btn')?.addEventListener('click', () => {
+        $('shortcuts-overlay')?.classList.remove('active');
+    });
+    $('shortcuts-overlay')?.addEventListener('click', (e) => {
+        if ((e.target as Element).classList.contains('shortcuts-overlay')) {
+            $('shortcuts-overlay')?.classList.remove('active');
+        }
+    });
+
     function handleKeydown(e: KeyboardEvent) {
+        // Skip all shortcuts when inside text inputs or textareas
+        const inInput = e.target instanceof HTMLInputElement || e.target instanceof HTMLTextAreaElement;
+
         // "/" to focus search (unless already in an input)
-        if (e.key === '/' && !(e.target instanceof HTMLInputElement)) {
+        if (e.key === '/' && !inInput) {
             e.preventDefault();
             searchInput?.focus();
             return;
         }
+
+        // Escape: close overlays progressively
         if (e.key === 'Escape') {
+            const shortcutsOverlay = $('shortcuts-overlay');
+            if (shortcutsOverlay?.classList.contains('active')) {
+                shortcutsOverlay.classList.remove('active');
+                return;
+            }
             if (contextMenuEl) {
                 closeContextMenu();
                 return;
@@ -1530,10 +2095,75 @@ export default function mount(): () => void {
             } else {
                 closeModal();
             }
+            // Clear keyboard focus
+            setProcessFocus(null);
             // Blur search on escape
             if (document.activeElement === searchInput) {
                 searchInput?.blur();
             }
+            return;
+        }
+
+        // Remaining shortcuts only when NOT in inputs
+        if (inInput) return;
+
+        // Arrow navigation
+        if (e.key === 'ArrowDown' || e.key === 'j') {
+            e.preventDefault();
+            navigateProcess('down');
+            return;
+        }
+        if (e.key === 'ArrowUp' || e.key === 'k') {
+            e.preventDefault();
+            navigateProcess('up');
+            return;
+        }
+
+        // Enter: open drawer for focused process
+        if (e.key === 'Enter' && focusedProcessName) {
+            e.preventDefault();
+            openDrawer(focusedProcessName);
+            return;
+        }
+
+        // ? — help overlay
+        if (e.key === '?') {
+            e.preventDefault();
+            toggleShortcutsOverlay();
+            return;
+        }
+
+        // N — new process modal
+        if (e.key === 'n' || e.key === 'N') {
+            e.preventDefault();
+            openModal();
+            return;
+        }
+
+        // Process actions — require a focused row
+        if (!focusedProcessName) return;
+
+        if (e.key === 'r' || e.key === 'R') {
+            e.preventDefault();
+            dispatchAction('restart', focusedProcessName);
+            return;
+        }
+        if (e.key === 's' || e.key === 'S') {
+            e.preventDefault();
+            dispatchAction('stop', focusedProcessName);
+            return;
+        }
+        if (e.key === 'g' || e.key === 'G') {
+            e.preventDefault();
+            dispatchAction('guard', focusedProcessName);
+            return;
+        }
+        if (e.key === 'd' || e.key === 'D') {
+            e.preventDefault();
+            dispatchAction('delete', focusedProcessName);
+            // Clear focus since process is gone
+            setProcessFocus(null);
+            return;
         }
     }
     document.addEventListener('keydown', handleKeydown);
@@ -1542,10 +2172,17 @@ export default function mount(): () => void {
     let eventSource: EventSource | null = null;
     let logRefreshTimer: ReturnType<typeof setInterval> | null = null;
     let sseThrottleTimer: ReturnType<typeof setTimeout> | null = null;
+    let sseRetryDelay = 2_000;       // exponential backoff start
+    const SSE_MAX_RETRY = 30_000;    // max 30s between retries
+
+    // Initial data load — don't depend on SSE for first render
+    loadProcesses();
 
     function connectSSE() {
+        if (eventSource) { eventSource.close(); eventSource = null; }
         eventSource = new EventSource('/api/events');
         eventSource.onmessage = (event) => {
+            sseRetryDelay = 2_000; // reset backoff on success
             // Skip SSE updates briefly after mutations to avoid flicker
             if (Date.now() < mutationUntil) return;
             try {
@@ -1561,14 +2198,29 @@ export default function mount(): () => void {
             } catch { /* invalid data, skip */ }
         };
         eventSource.onerror = () => {
-            // SSE disconnected, reconnect after 5s
+            // SSE disconnected — exponential backoff reconnect
             eventSource?.close();
             eventSource = null;
-            setTimeout(connectSSE, 5000);
+            setTimeout(connectSSE, sseRetryDelay);
+            sseRetryDelay = Math.min(sseRetryDelay * 2, SSE_MAX_RETRY);
         };
     }
     connectSSE();
 
+    // Pause SSE when tab is hidden, resume when visible
+    function handleVisibility() {
+        if (document.hidden) {
+            eventSource?.close();
+            eventSource = null;
+        } else {
+            if (!eventSource) {
+                sseRetryDelay = 2_000; // reset on manual re-focus
+                connectSSE();
+            }
+        }
+    }
+    document.addEventListener('visibilitychange', handleVisibility);
+
     // Log drawer still needs periodic refresh (not part of SSE)
     logRefreshTimer = setInterval(() => {
         if (drawerProcess) refreshDrawerLogs();
@@ -1584,9 +2236,13 @@ export default function mount(): () => void {
         $('modal-create-btn')?.removeEventListener('click', createProcess);
         $('refresh-btn')?.removeEventListener('click', loadProcesses);
         document.removeEventListener('keydown', handleKeydown);
+        document.removeEventListener('visibilitychange', handleVisibility);
         closeContextMenu();
         if (eventSource) eventSource.close();
         if (logRefreshTimer) clearInterval(logRefreshTimer);
         if (sseThrottleTimer) clearTimeout(sseThrottleTimer);
+        if (searchDebounce) clearTimeout(searchDebounce);
+        if (logScrollRAF) cancelAnimationFrame(logScrollRAF);
+        logsContainer?.removeEventListener('scroll', onLogScroll);
     };
 }