bgrun 3.10.2 → 3.12.0

package/dashboard/app/page.client.tsx

@@ -1,15 +1,10 @@
-/** @jsxImportSource react */
 /**
  * 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;
@@ -26,6 +21,10 @@ interface ProcessData {
     configPath: string;
     stdoutPath: string;
     stderrPath: string;
+    guardRestarts: number;
+    cpu?: number;
+    cpuHistory?: number[];
+    memoryHistory?: number[];
 }
 
 // ─── SVG Icon Helpers ───
@@ -94,6 +93,51 @@ function DeployIcon() {
     );
 }
 
+function ShieldIcon() {
+    return (
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+            <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z" />
+        </svg>
+    );
+}
+
+// ─── Sparkline Component ───
+function MiniSparkline({ data, height = 24, stroke = "var(--text-accent)" }: { data: number[], height?: number, stroke?: string }) {
+    if (!data || data.length < 2) return <svg className="sparkline" viewBox="0 0 100 24" height={height} width="60" />;
+
+    const max = Math.max(...data, 1);
+    const min = Math.min(...data, 0); // anchor to 0 minimum
+    const range = max - min || 1;
+    const padding = 2; // top/bottom pixel padding
+
+    // Normalize path across 100 viewBox width
+    const path = data.map((val, i) => {
+        const x = (i / (data.length - 1)) * 100;
+        const normalizedY = ((val - min) / range);
+        const y = padding + (1 - normalizedY) * (24 - padding * 2);
+        return `${i === 0 ? 'M' : 'L'} ${x} ${y}`;
+    }).join(' ');
+
+    return (
+        <svg className="sparkline" viewBox="0 0 100 24" height={height} width="60" fill="none" stroke={stroke} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" style={{ display: 'inline-block', verticalAlign: 'middle', marginLeft: '6px', opacity: 0.8 }}>
+            <path d={path} />
+        </svg>
+    );
+}
+
+// ─── Guard Helper ───
+
+function isGuarded(p: ProcessData): boolean {
+    if (!p.env) return false;
+    // env is comma-separated "KEY=VAL,KEY2=VAL2" or JSON string
+    try {
+        const parsed = JSON.parse(p.env);
+        return parsed.BGR_KEEP_ALIVE === 'true';
+    } catch {
+        return p.env.includes('BGR_KEEP_ALIVE=true');
+    }
+}
+
 // ─── Utility: Format Runtime ───
 
 function formatRuntime(raw: string): string {
@@ -148,11 +192,22 @@ function shortenPath(dir: string): string {
 // ─── JSX Components ───
 
 function ProcessRow({ p, animate }: { p: ProcessData; animate?: boolean }) {
+    const guarded = isGuarded(p);
     return (
         <tr data-process-name={p.name} className={animate ? 'animate-in' : ''} style={animate ? { opacity: '0' } : undefined}>
             <td>
                 <div className="process-name">
                     <span>{p.name}</span>
+                    <button
+                        className={`guard-toggle ${guarded ? 'guarded' : ''}`}
+                        data-action="guard"
+                        data-name={p.name}
+                        data-guarded={guarded ? 'true' : 'false'}
+                        title={guarded ? 'Process is guarded — click to disable auto-restart' : 'Click to enable auto-restart guard'}
+                        onClick={(e: Event) => e.stopPropagation()}
+                    >
+                        <ShieldIcon />
+                    </button>
                 </div>
             </td>
             <td>
@@ -168,14 +223,26 @@ function ProcessRow({ p, animate }: { p: ProcessData; animate?: boolean }) {
                     : <span style={{ color: 'var(--text-muted)' }}>–</span>
                 }
             </td>
+            <td className="cpu">
+                {p.running && (p.cpu !== undefined)
+                    ? <div className="metrics-cell">
+                        <span>{p.cpu > 0 ? `${p.cpu.toFixed(1)}%` : '<0.1%'}</span>
+                        <MiniSparkline data={p.cpuHistory || []} stroke="#7ee787" />
+                    </div>
+                    : <span style={{ color: 'var(--text-muted)' }}>–</span>
+                }
+            </td>
             <td className="memory">
-                {p.memory > 0
-                    ? <span className="memory-badge">{formatMemory(p.memory)}</span>
+                {p.running && p.memory > 0
+                    ? <div className="metrics-cell">
+                        <span className="memory-badge">{formatMemory(p.memory)}</span>
+                        <MiniSparkline data={p.memoryHistory || []} stroke="#a5d6ff" />
+                    </div>
                     : <span style={{ color: 'var(--text-muted)' }}>–</span>
                 }
             </td>
             <td className="command" title={p.command}>{p.command}</td>
-            <td className="runtime">{formatRuntime(p.runtime)}</td>
+            <td className="runtime">{formatRuntime(String(p.runtime))}</td>
         </tr>
     );
 }
@@ -215,11 +282,13 @@ function EmptyState() {
 }
 
 function ProcessCard({ p }: { p: ProcessData }) {
+    const guarded = isGuarded(p);
     return (
         <div className="process-card" data-process-name={p.name}>
             <div className="card-header">
                 <div className="process-name">
                     <span>{p.name}</span>
+                    {guarded && <span className="guard-badge" title="Auto-restart enabled">🛡️</span>}
                 </div>
                 <span className={`status-badge ${p.running ? 'running' : 'stopped'}`}>
                     <span className="status-dot"></span>
@@ -229,11 +298,15 @@ function ProcessCard({ p }: { p: ProcessData }) {
             <div className="card-details">
                 <div className="card-detail"><span className="card-label">PID</span><span>{p.pid}</span></div>
                 <div className="card-detail"><span className="card-label">Port</span>{p.port ? <a className="port-link" href={`http://localhost:${p.port}`} target="_blank" rel="noopener" onClick={(e: Event) => e.stopPropagation()}>:{p.port}</a> : <span>–</span>}</div>
-                <div className="card-detail"><span className="card-label">Memory</span><span>{p.memory > 0 ? formatMemory(p.memory) : '–'}</span></div>
-                <div className="card-detail"><span className="card-label">Runtime</span><span>{formatRuntime(p.runtime)}</span></div>
+                <div className="card-detail"><span className="card-label">CPU</span>{p.running && (p.cpu !== undefined) ? <div style={{ display: 'flex', alignItems: 'center' }}><span>{p.cpu > 0 ? `${p.cpu.toFixed(1)}%` : '<0.1%'}</span><MiniSparkline data={p.cpuHistory || []} stroke="#7ee787" /></div> : <span>–</span>}</div>
+                <div className="card-detail"><span className="card-label">Memory</span>{p.running && p.memory > 0 ? <div style={{ display: 'flex', alignItems: 'center' }}><span>{formatMemory(p.memory)}</span><MiniSparkline data={p.memoryHistory || []} stroke="#a5d6ff" /></div> : <span>–</span>}</div>
+                <div className="card-detail"><span className="card-label">Runtime</span><span>{formatRuntime(String(p.runtime))}</span></div>
             </div>
             <div className="card-command" title={p.command}>{p.command}</div>
             <div className="card-actions">
+                <button className={`action-btn guard ${guarded ? 'active' : ''}`} data-action="guard" data-name={p.name} data-guarded={guarded ? 'true' : 'false'} title={guarded ? 'Disable auto-restart' : 'Enable auto-restart'}>
+                    <ShieldIcon /> {guarded ? 'Unguard' : 'Guard'}
+                </button>
                 <button className="action-btn info" data-action="logs" data-name={p.name} title="View Logs">
                     <LogsIcon /> Logs
                 </button>
@@ -340,6 +413,7 @@ export default function mount(): () => void {
     let isFirstLoad = true;
     let allProcesses: ProcessData[] = [];
     let searchQuery = '';
+    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';
@@ -355,6 +429,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() {
@@ -379,14 +475,18 @@ export default function mount(): () => void {
             allProcesses = await res.json();
             renderFilteredProcesses();
             updateStats(allProcesses);
-        } catch {
-            // silently retry on next tick
+        } catch (err) {
+            console.error('[bgr-dashboard] loadProcesses error:', err);
         } finally {
             isFetching = false;
         }
     }
 
     function renderFilteredProcesses() {
+        // Always sync searchQuery from DOM to prevent desync
+        if (searchInput && searchInput.value.toLowerCase().trim() !== searchQuery) {
+            searchQuery = searchInput.value.toLowerCase().trim();
+        }
         const filtered = searchQuery
             ? allProcesses.filter(p =>
                 p.name.toLowerCase().includes(searchQuery) ||
@@ -395,22 +495,78 @@ export default function mount(): () => void {
             )
             : allProcesses;
         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[]) {
         const total = processes.length;
         const running = processes.filter(p => p.running).length;
         const stopped = total - running;
+        const guarded = processes.filter(p => isGuarded(p)).length;
+        const guardable = processes.filter(p => p.name !== 'bgr-dashboard').length;
         const totalMemory = processes.reduce((sum, p) => sum + (p.memory || 0), 0);
 
         const tc = $('total-count');
         const rc = $('running-count');
         const sc = $('stopped-count');
+        const gc = $('guarded-count');
         const mc = $('memory-count');
+        const rrc = $('restarts-count');
         if (tc) tc.textContent = String(total);
         if (rc) rc.textContent = String(running);
         if (sc) sc.textContent = String(stopped);
+        if (gc) gc.textContent = String(guarded);
         if (mc) mc.textContent = formatMemory(totalMemory) || '0 MB';
+        const totalRestarts = processes.reduce((sum, p) => sum + (p.guardRestarts || 0), 0);
+        if (rrc) rrc.textContent = String(totalRestarts);
+
+        // Update Guard All button state
+        const guardAllBtn = $('guard-all-btn');
+        const guardAllLabel = $('guard-all-label');
+        if (guardAllBtn && guardAllLabel) {
+            const allGuarded = guardable > 0 && guarded >= guardable;
+            guardAllBtn.classList.toggle('all-guarded', allGuarded);
+            guardAllLabel.textContent = allGuarded ? 'Unguard All' : 'Guard All';
+            guardAllBtn.title = allGuarded ? 'Remove guard from all processes' : 'Guard all processes (auto-restart on crash)';
+        }
+
+        // Update guard sentinel pill
+        const guardPill = $('guard-sentinel-pill');
+        const guardLabel = $('guard-sentinel-label');
+        if (guardPill && guardLabel) {
+            const guardProc = processes.find(p => p.name === 'bgr-guard');
+            guardPill.classList.remove('active', 'stopped');
+            if (guardProc && guardProc.running) {
+                guardPill.classList.add('active');
+                const restarts = guardProc.guardRestarts || 0;
+                guardLabel.textContent = restarts > 0 ? `Guard: ON (${restarts}↻)` : 'Guard: ON';
+            } else if (guardProc) {
+                guardPill.classList.add('stopped');
+                guardLabel.textContent = 'Guard: OFF';
+            } else {
+                guardLabel.textContent = 'Guard: –';
+            }
+        }
+    }
+
+    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[]) {
@@ -440,62 +596,65 @@ 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();
-        renderFilteredProcesses();
+        if (searchDebounce) clearTimeout(searchDebounce);
+        searchDebounce = setTimeout(() => {
+            searchQuery = searchInput.value.toLowerCase().trim();
+            renderFilteredProcesses();
+        }, 150);
     });
 
     /** Fetch with cache-bust to force fresh data after mutations */
@@ -608,6 +767,29 @@ export default function mount(): () => void {
                 break;
             }
 
+            case 'guard': {
+                const currentlyGuarded = btn.dataset.guarded === 'true';
+                const newState = !currentlyGuarded;
+                try {
+                    const res = await fetch('/api/guard', {
+                        method: 'POST',
+                        headers: { 'Content-Type': 'application/json' },
+                        body: JSON.stringify({ name, enabled: newState }),
+                    });
+                    if (res.ok) {
+                        showToast(`${newState ? 'Guarded' : 'Unguarded'} "${name}"`, 'success');
+                    } else {
+                        const data = await res.json();
+                        showToast(data.error || `Failed to toggle guard for "${name}"`, 'error');
+                    }
+                } catch {
+                    showToast(`Failed to toggle guard for "${name}"`, 'error');
+                }
+                await loadProcessesFresh();
+                mutationUntil = Date.now() + 3000;
+                break;
+            }
+
             case 'logs':
                 openDrawer(name);
                 break;
@@ -631,12 +813,17 @@ export default function mount(): () => void {
         const proc = allProcesses.find(p => p.name === name);
         if (!proc) return;
 
+        const guarded = isGuarded(proc);
         const menu = (
             <div className="context-menu" style={{ left: `${x}px`, top: `${y}px` }}>
                 <button className="context-item" data-action="logs" data-name={name}>
                     <LogsIcon /> View Logs
                 </button>
                 <div className="context-divider"></div>
+                <button className={`context-item ${guarded ? 'guard-active' : 'guard'}`} data-action="guard" data-name={name} data-guarded={guarded ? 'true' : 'false'}>
+                    <ShieldIcon /> {guarded ? 'Disable Guard' : 'Enable Guard'}
+                </button>
+                <div className="context-divider"></div>
                 {proc.running
                     ? <button className="context-item danger" data-action="stop" data-name={name}>
                         <StopIcon /> Stop
@@ -784,6 +971,8 @@ export default function mount(): () => void {
         logCurrentTab = '';
         logLastSize = -1;
         logNeedsFullRebuild = true;
+        logVirtualActive = false;
+        logFilteredIndices = [];
         if (!skipRefresh) refreshDrawerLogs();
     }
 
@@ -842,11 +1031,12 @@ export default function mount(): () => void {
         const proc = allProcesses.find(p => p.name === name);
         const meta = $('drawer-meta');
         if (meta && proc) {
+            const guarded = isGuarded(proc);
             const metaItems = [
                 { label: 'Status', value: proc.running ? '● Running' : '○ Stopped' },
                 { label: 'PID', value: String(proc.pid) },
                 { label: 'Port', value: proc.port ? `:${proc.port}` : '–', href: proc.port ? `http://localhost:${proc.port}` : undefined },
-                { label: 'Runtime', value: formatRuntime(proc.runtime) },
+                { label: 'Runtime', value: formatRuntime(String(proc.runtime)) },
                 { label: 'Command', value: proc.command },
                 { label: 'Directory', value: proc.directory || '–' },
                 { label: 'Memory', value: formatMemory(proc.memory) },
@@ -862,7 +1052,74 @@ export default function mount(): () => void {
                     }
                 </div>
             ) as unknown as Node);
-            meta.replaceChildren(...items);
+
+            // Guard toggle row with inline switch
+            const guardRow = (
+                <div className={`meta-item meta-guard ${guarded ? 'guarded' : ''}`}>
+                    <span className="meta-label">
+                        <ShieldIcon /> Guard
+                    </span>
+                    <label className="guard-toggle" title={guarded ? 'Auto-restart is ON — click to disable' : 'Auto-restart is OFF — click to enable'}>
+                        <input type="checkbox" checked={guarded} className="guard-toggle-input" />
+                        <span className="guard-toggle-track">
+                            <span className="guard-toggle-thumb"></span>
+                        </span>
+                        <span className="guard-toggle-label">{guarded ? 'Protected' : 'Off'}</span>
+                    </label>
+                </div>
+            ) as unknown as HTMLElement;
+
+            // Wire toggle click
+            const checkbox = guardRow.querySelector('.guard-toggle-input') as HTMLInputElement;
+            checkbox?.addEventListener('change', async () => {
+                const newState = checkbox.checked;
+                const labelEl = guardRow.querySelector('.guard-toggle-label');
+                const trackEl = guardRow.querySelector('.guard-toggle-track');
+                // Optimistic UI update
+                if (labelEl) labelEl.textContent = newState ? 'Protected' : 'Off';
+                guardRow.classList.toggle('guarded', newState);
+                try {
+                    const res = await fetch('/api/guard', {
+                        method: 'POST',
+                        headers: { 'Content-Type': 'application/json' },
+                        body: JSON.stringify({ name, enabled: newState }),
+                    });
+                    if (res.ok) {
+                        showToast(`${newState ? 'Guard enabled' : 'Guard disabled'} for "${name}"`, 'success');
+                    } else {
+                        // Rollback
+                        checkbox.checked = !newState;
+                        if (labelEl) labelEl.textContent = !newState ? 'Protected' : 'Off';
+                        guardRow.classList.toggle('guarded', !newState);
+                        showToast('Failed to toggle guard', 'error');
+                    }
+                } catch {
+                    checkbox.checked = !newState;
+                    if (labelEl) labelEl.textContent = !newState ? 'Protected' : 'Off';
+                    guardRow.classList.toggle('guarded', !newState);
+                    showToast('Failed to toggle guard', 'error');
+                }
+                await loadProcessesFresh();
+                mutationUntil = Date.now() + 3000;
+            });
+
+            // Guard restart counter (only shown when > 0)
+            const extraRows: Node[] = [];
+            if (proc.guardRestarts > 0) {
+                extraRows.push((
+                    <div className="meta-item meta-restarts">
+                        <span className="meta-label">Guard Restarts</span>
+                        <span className="meta-value">
+                            <span className="restart-count-badge">{proc.guardRestarts}</span>
+                            <span className="restart-count-text">
+                                {proc.guardRestarts === 1 ? 'auto-restart this session' : 'auto-restarts this session'}
+                            </span>
+                        </span>
+                    </div>
+                ) as unknown as Node);
+            }
+
+            meta.replaceChildren(...items, guardRow, ...extraRows);
         }
 
         // Reset log subtab to stdout (skip auto-refresh, we call it once below)
@@ -915,8 +1172,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();
@@ -924,48 +1243,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() {
@@ -1078,6 +1427,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;
@@ -1261,17 +1614,141 @@ export default function mount(): () => void {
         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;
+        if (!guardAllBtn) return;
+
+        const guardable = allProcesses.filter(p => p.name !== 'bgr-dashboard');
+        const guarded = guardable.filter(p => isGuarded(p)).length;
+        const allGuarded = guardable.length > 0 && guarded >= guardable.length;
+        const newState = !allGuarded;
+
+        // Disable button during operation
+        guardAllBtn.disabled = true;
+        guardAllBtn.style.opacity = '0.5';
+
+        try {
+            const res = await fetch('/api/guard-all', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({ enabled: newState }),
+            });
+            if (res.ok) {
+                const data = await res.json();
+                showToast(
+                    `${newState ? 'Guarded' : 'Unguarded'} ${data.count} process${data.count !== 1 ? 'es' : ''}`,
+                    'success'
+                );
+            } else {
+                const data = await res.json();
+                showToast(data.error || 'Failed to toggle guard for all processes', 'error');
+            }
+        } catch {
+            showToast('Failed to toggle guard for all processes', 'error');
+        }
+
+        guardAllBtn.disabled = false;
+        guardAllBtn.style.opacity = '';
+        await loadProcessesFresh();
+        mutationUntil = Date.now() + 3000;
+    });
+
     // 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;
@@ -1281,10 +1758,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);
@@ -1293,10 +1835,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 {
@@ -1312,14 +1861,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();
@@ -1335,9 +1899,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);
     };
 }