bgrun 3.4.0 → 3.7.1

package/dashboard/app/page.client.tsx

@@ -1,23 +1,31 @@
+/** @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.
  */
+import { render as melinaRender, createElement as h, setReconciler } from 'melina/client/render';
 
 interface ProcessData {
     name: string;
-    command: string;
-    directory: string;
     pid: number;
     running: boolean;
-    port: number | null;
-    ports: number[];
-    memory: number; // bytes
-    group: string | null;
-    runtime: string;
+    port: string;
+    command: string;
+    memory: number;
+    runtime: number;
+    directory: string;
+    group?: string;
     timestamp: string;
+    env: string;
+    configPath: string;
+    stdoutPath: string;
+    stderrPath: string;
 }
 
 // ─── SVG Icon Helpers ───
@@ -103,6 +111,29 @@ function formatMemory(bytes: number): string {
     return `${(mb / 1024).toFixed(1)} GB`;
 }
 
+function formatTimeAgo(date: Date): string {
+    const seconds = Math.floor((Date.now() - date.getTime()) / 1000);
+    if (seconds < 10) return 'just now';
+    if (seconds < 60) return `${seconds}s ago`;
+    const minutes = Math.floor(seconds / 60);
+    if (minutes < 60) return `${minutes}m ago`;
+    const hours = Math.floor(minutes / 60);
+    if (hours < 24) return `${hours}h ago`;
+    const days = Math.floor(hours / 24);
+    return `${days}d ago`;
+}
+
+// ─── Helpers ───
+
+function shortenPath(dir: string): string {
+    if (!dir) return '';
+    const normalized = dir.replace(/\\/g, '/');
+    const parts = normalized.split('/');
+    // Show last 2 segments  (e.g. "Code/bgr" instead of "c:/Code/bgr")
+    if (parts.length > 2) return parts.slice(-2).join('/');
+    return normalized;
+}
+
 // ─── JSX Components ───
 
 function ProcessRow({ p, animate }: { p: ProcessData; animate?: boolean }) {
@@ -110,7 +141,6 @@ function ProcessRow({ p, animate }: { p: ProcessData; animate?: boolean }) {
         <tr data-process-name={p.name} className={animate ? 'animate-in' : ''} style={animate ? { opacity: '0' } : undefined}>
             <td>
                 <div className="process-name">
-                    <div className="process-icon">{p.name.charAt(0).toUpperCase()}</div>
                     <span>{p.name}</span>
                 </div>
             </td>
@@ -147,6 +177,9 @@ function ProcessRow({ p, animate }: { p: ProcessData; animate?: boolean }) {
                         <PlayIcon />
                     </button>
                 }
+                <button className="action-btn warning" data-action="restart" data-name={p.name} title="Restart">
+                    <RestartIcon />
+                </button>
                 <button className="action-btn danger" data-action="delete" data-name={p.name} title="Delete">
                     <TrashIcon />
                 </button>
@@ -155,13 +188,20 @@ function ProcessRow({ p, animate }: { p: ProcessData; animate?: boolean }) {
     );
 }
 
-function GroupHeader({ name }: { name: string }) {
+function GroupHeader({ name, running, total, collapsed }: { name: string; running: number; total: number; collapsed: boolean }) {
+    // Show short folder name as label, full path as title
+    const shortName = shortenPath(name);
     return (
-        <tr className="group-header">
+        <tr className={`group-header ${collapsed ? 'collapsed' : ''}`} data-group-name={name}>
             <td colSpan={8}>
-                <div className="group-label">
-                    <span className="group-icon">📂</span>
-                    {name}
+                <div className="group-label" title={name}>
+                    <svg className="group-chevron" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M9 18l6-6-6-6" /></svg>
+                    <span className="group-name">{shortName}</span>
+                    <span className="group-counts">
+                        <span className={`group-count-running ${running > 0 ? 'has-running' : ''}`}>{running} running</span>
+                        <span className="group-count-sep">·</span>
+                        <span className="group-count-total">{total} total</span>
+                    </span>
                 </div>
             </td>
         </tr>
@@ -182,8 +222,95 @@ function EmptyState() {
     );
 }
 
-function LogLine({ text }: { text: string }) {
-    return <div className="log-line">{text}</div>;
+function ProcessCard({ p }: { p: ProcessData }) {
+    return (
+        <div className="process-card" data-process-name={p.name}>
+            <div className="card-header">
+                <div className="process-name">
+                    <span>{p.name}</span>
+                </div>
+                <span className={`status-badge ${p.running ? 'running' : 'stopped'}`}>
+                    <span className="status-dot"></span>
+                    {p.running ? 'Running' : 'Stopped'}
+                </span>
+            </div>
+            <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><span>{p.port ? `:${p.port}` : '–'}</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>
+            <div className="card-command" title={p.command}>{p.command}</div>
+            <div className="card-actions">
+                <button className="action-btn info" data-action="logs" data-name={p.name} title="View Logs">
+                    <LogsIcon /> Logs
+                </button>
+                {p.running
+                    ? <button className="action-btn danger" data-action="stop" data-name={p.name} title="Stop">
+                        <StopIcon /> Stop
+                    </button>
+                    : <button className="action-btn success" data-action="restart" data-name={p.name} title="Start">
+                        <PlayIcon /> Start
+                    </button>
+                }
+                <button className="action-btn warning" data-action="restart" data-name={p.name} title="Restart">
+                    <RestartIcon /> Restart
+                </button>
+                <button className="action-btn danger" data-action="delete" data-name={p.name} title="Delete">
+                    <TrashIcon /> Delete
+                </button>
+            </div>
+        </div>
+    );
+}
+
+// ─── ANSI to HTML converter ───
+const ANSI_COLORS: Record<number, string> = {
+    30: '#6e7681', 31: '#ff7b72', 32: '#7ee787', 33: '#d2a458',
+    34: '#79c0ff', 35: '#d2a8ff', 36: '#a5d6ff', 37: '#c9d1d9',
+    90: '#8b949e', 91: '#ffa198', 92: '#aff5b4', 93: '#f8e3a1',
+    94: '#a5d6ff', 95: '#e2c5ff', 96: '#b6e3ff', 97: '#f0f6fc',
+};
+const ANSI_BG: Record<number, string> = {
+    40: '#6e7681', 41: '#ff7b72', 42: '#7ee787', 43: '#d2a458',
+    44: '#79c0ff', 45: '#d2a8ff', 46: '#a5d6ff', 47: '#c9d1d9',
+};
+
+function ansiToHtml(text: string): string {
+    let result = '';
+    let openSpans = 0;
+    const parts = text.split(/(\x1b\[[0-9;]*m)/);
+
+    for (const part of parts) {
+        const match = part.match(/^\x1b\[([0-9;]*)m$/);
+        if (!match) {
+            // Escape HTML entities
+            result += part.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
+            continue;
+        }
+
+        const codes = match[1].split(';').map(Number);
+        for (const code of codes) {
+            if (code === 0) {
+                // Reset
+                while (openSpans > 0) { result += '</span>'; openSpans--; }
+            } else if (code === 1) {
+                result += '<span style="font-weight:bold">'; openSpans++;
+            } else if (code === 2) {
+                result += '<span style="opacity:0.6">'; openSpans++;
+            } else if (code === 3) {
+                result += '<span style="font-style:italic">'; openSpans++;
+            } else if (code === 4) {
+                result += '<span style="text-decoration:underline">'; openSpans++;
+            } else if (ANSI_COLORS[code]) {
+                result += `<span style="color:${ANSI_COLORS[code]}">`; openSpans++;
+            } else if (ANSI_BG[code]) {
+                result += `<span style="background:${ANSI_BG[code]}">`; openSpans++;
+            }
+        }
+    }
+    while (openSpans > 0) { result += '</span>'; openSpans--; }
+    return result;
 }
 
 // ─── Toast System ───
@@ -214,14 +341,24 @@ function showToast(message: string, type: 'success' | 'error' | 'info' = 'info')
 export default function mount(): () => void {
     const $ = (id: string) => document.getElementById(id);
     let selectedProcess: string | null = null;
-    let refreshTimer: ReturnType<typeof setInterval> | null = null;
     let isFetching = false;
     let isFirstLoad = true;
     let allProcesses: ProcessData[] = [];
     let searchQuery = '';
-    let isGrouped = localStorage.getItem('bgr_grouped') === 'true'; // Persist preference
+    let collapsedGroups: Set<string> = new Set(JSON.parse(localStorage.getItem('bgr_collapsed_groups') || '[]'));
     let drawerProcess: string | null = null;
     let drawerTab: 'stdout' | 'stderr' = 'stdout';
+    let activeSection = 'logs'; // Which accordion section is open: 'info' | 'config' | 'logs'
+    let mutationUntil = 0; // Timestamp: ignore SSE updates until this time (after mutations)
+    let configSubtab = 'toml'; // 'toml' | 'env'
+    let logAutoScroll = localStorage.getItem('bgr_autoscroll') === 'true'; // OFF by default
+    let logSearch = '';
+    let logLinesRaw: string[] = [];  // Raw text (for search filtering)
+    let logLinesHtml: string[] = []; // Pre-converted HTML (cached ansiToHtml)
+    let logOffset = 0;            // Byte offset for incremental fetching
+    let logCurrentTab = '';       // Track tab to reset on switch
+    let logLastSize = -1;         // Detect no-change polls
+    let logNeedsFullRebuild = true; // Full DOM rebuild flag (on tab switch, search change)
 
     // ─── Version Badge ───
     const versionBadge = $('version-badge');
@@ -269,65 +406,84 @@ export default function mount(): () => void {
         const total = processes.length;
         const running = processes.filter(p => p.running).length;
         const stopped = total - running;
+        const totalMemory = processes.reduce((sum, p) => sum + (p.memory || 0), 0);
 
         const tc = $('total-count');
         const rc = $('running-count');
         const sc = $('stopped-count');
+        const mc = $('memory-count');
         if (tc) tc.textContent = String(total);
         if (rc) rc.textContent = String(running);
         if (sc) sc.textContent = String(stopped);
+        if (mc) mc.textContent = formatMemory(totalMemory) || '0 MB';
     }
 
     function renderProcesses(processes: ProcessData[]) {
         const tbody = $('processes-table');
+        const cardsEl = $('mobile-cards');
         if (!tbody) return;
 
         if (processes.length === 0) {
             tbody.replaceChildren(<EmptyState /> as unknown as Node);
+            if (cardsEl) cardsEl.replaceChildren(
+                <div className="empty-state">
+                    <div className="empty-icon">📦</div>
+                    <h3>No processes found</h3>
+                    <p>Start a new process to see it here</p>
+                </div> as unknown as Node
+            );
             return;
         }
 
         const animate = isFirstLoad;
 
-        if (isGrouped) {
-            // Grouping Logic
-            const groups: Record<string, ProcessData[]> = {};
-            const ungrouped: ProcessData[] = [];
-
-            processes.forEach(p => {
-                if (p.group) {
-                    if (!groups[p.group]) groups[p.group] = [];
-                    groups[p.group].push(p);
-                } else {
-                    ungrouped.push(p);
-                }
-            });
-
-            const nodes: Node[] = [];
+        // Group by working directory
+        const groups: Record<string, ProcessData[]> = {};
+        processes.forEach(p => {
+            const key = p.directory || 'Unknown';
+            if (!groups[key]) groups[key] = [];
+            groups[key].push(p);
+        });
 
-            // Render groups first
-            Object.keys(groups).sort().forEach(groupName => {
-                nodes.push(<GroupHeader name={groupName} /> as unknown as Node);
-                groups[groupName].forEach(p => {
+        const nodes: Node[] = [];
+        const sortedGroupKeys = Object.keys(groups).sort();
+
+        // Always show group headers for every directory
+        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);
+            if (!collapsed) {
+                procs.forEach(p => {
                     nodes.push(<ProcessRow p={p} animate={animate} /> as unknown as Node);
                 });
-            });
+            }
+        });
 
-            // Render ungrouped last (with header if groups exist)
-            if (ungrouped.length > 0) {
-                if (Object.keys(groups).length > 0) {
-                    nodes.push(<GroupHeader name="Ungrouped" /> as unknown as Node);
+        tbody.replaceChildren(...nodes);
+
+        // 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);
                 }
-                ungrouped.forEach(p => {
-                    nodes.push(<ProcessRow p={p} animate={animate} /> as unknown as Node);
-                });
-            }
+                localStorage.setItem('bgr_collapsed_groups', JSON.stringify([...collapsedGroups]));
+                renderFilteredProcesses();
+            });
+        });
 
-            tbody.replaceChildren(...nodes);
-        } else {
-            // Standard List View
-            const rows = processes.map(p => <ProcessRow p={p} animate={animate} /> as unknown as Node);
-            tbody.replaceChildren(...rows);
+        // Render mobile cards
+        if (cardsEl) {
+            const cards = processes.map(p => <ProcessCard p={p} /> as unknown as Node);
+            cardsEl.replaceChildren(...cards);
         }
 
         if (isFirstLoad) isFirstLoad = false;
@@ -347,7 +503,17 @@ export default function mount(): () => void {
         renderFilteredProcesses();
     });
 
-    // ─── Action Handlers ───
+    /** Fetch with cache-bust to force fresh data after mutations */
+    async function loadProcessesFresh() {
+        isFetching = true;
+        try {
+            const res = await fetch(`/api/processes?t=${Date.now()}`);
+            allProcesses = await res.json();
+            renderFilteredProcesses();
+            updateStats(allProcesses);
+        } catch { /* retry on next tick */ }
+        finally { isFetching = false; }
+    }
 
     async function handleAction(e: Event) {
         const btn = (e.target as Element).closest('[data-action]') as HTMLElement;
@@ -358,36 +524,76 @@ export default function mount(): () => void {
         if (!name) return;
 
         switch (action) {
-            case 'stop':
+            case 'stop': {
+                // Optimistic: mark stopped immediately
+                const proc = allProcesses.find(p => p.name === name);
+                if (proc) {
+                    proc.running = false;
+                    proc.memory = 0;
+                    renderFilteredProcesses();
+                    updateStats(allProcesses);
+                }
                 try {
-                    await fetch(`/api/stop/${encodeURIComponent(name)}`, { method: 'POST' });
-                    showToast(`Stopped "${name}"`, 'success');
-                    await loadProcesses();
-                } catch (err: any) {
+                    const res = await fetch(`/api/stop/${encodeURIComponent(name)}`, { method: 'POST' });
+                    if (res.ok) {
+                        showToast(`Stopped "${name}"`, 'success');
+                    } else {
+                        const data = await res.json();
+                        showToast(data.error || `Failed to stop "${name}"`, 'error');
+                    }
+                } catch {
                     showToast(`Failed to stop "${name}"`, 'error');
                 }
+                await loadProcessesFresh();
+                mutationUntil = Date.now() + 3000;
                 break;
+            }
 
-            case 'restart':
+            case 'restart': {
+                // Optimistic: mark running immediately
+                const proc = allProcesses.find(p => p.name === name);
+                if (proc) {
+                    proc.running = true;
+                    renderFilteredProcesses();
+                    updateStats(allProcesses);
+                }
                 try {
-                    await fetch(`/api/restart/${encodeURIComponent(name)}`, { method: 'POST' });
-                    showToast(`Restarted "${name}"`, 'success');
-                    await loadProcesses();
-                } catch (err: any) {
+                    const res = await fetch(`/api/restart/${encodeURIComponent(name)}`, { method: 'POST' });
+                    if (res.ok) {
+                        showToast(`Restarted "${name}"`, 'success');
+                    } else {
+                        const data = await res.json();
+                        showToast(data.error || `Failed to restart "${name}"`, 'error');
+                    }
+                } catch {
                     showToast(`Failed to restart "${name}"`, 'error');
                 }
+                await loadProcessesFresh();
+                mutationUntil = Date.now() + 3000;
                 break;
+            }
 
-            case 'delete':
+            case 'delete': {
+                // Optimistic: remove from array immediately
+                allProcesses = allProcesses.filter(p => p.name !== name);
+                renderFilteredProcesses();
+                updateStats(allProcesses);
+                if (drawerProcess === name) closeDrawer();
                 try {
-                    await fetch(`/api/processes/${encodeURIComponent(name)}`, { method: 'DELETE' });
-                    showToast(`Deleted "${name}"`, 'success');
-                    if (drawerProcess === name) closeDrawer();
-                    await loadProcesses();
-                } catch (err: any) {
+                    const res = await fetch(`/api/processes/${encodeURIComponent(name)}`, { method: 'DELETE' });
+                    if (res.ok) {
+                        showToast(`Deleted "${name}"`, 'success');
+                    } else {
+                        const data = await res.json();
+                        showToast(data.error || `Failed to delete "${name}"`, 'error');
+                    }
+                } catch {
                     showToast(`Failed to delete "${name}"`, 'error');
                 }
+                await loadProcessesFresh();
+                mutationUntil = Date.now() + 3000;
                 break;
+            }
 
             case 'logs':
                 openDrawer(name);
@@ -410,20 +616,119 @@ export default function mount(): () => void {
         }
     });
 
+    // Mobile cards click → same delegation
+    const mobileCards = $('mobile-cards');
+    mobileCards?.addEventListener('click', (e: Event) => {
+        const btn = (e.target as Element).closest('[data-action]');
+        if (btn) {
+            handleAction(e);
+            return;
+        }
+        const card = (e.target as Element).closest('.process-card[data-process-name]') as HTMLElement;
+        if (card && card.dataset.processName) {
+            openDrawer(card.dataset.processName);
+        }
+    });
+
     // ─── Detail Drawer ───
 
     const drawer = $('detail-drawer');
     const backdrop = $('drawer-backdrop');
 
+    function openAccordionSection(section: string) {
+        activeSection = section;
+        const sections = drawer?.querySelectorAll('.accordion-section');
+        sections?.forEach(el => {
+            const s = el.querySelector('.accordion-trigger')?.getAttribute('data-section');
+            el.classList.toggle('open', s === section);
+        });
+
+        // Load data for the opened section
+        if (section === 'config') {
+            if (configSubtab === 'toml') loadConfigPanel();
+            else renderEnvPanel();
+        } else if (section === 'logs') {
+            refreshDrawerLogs();
+        }
+    }
+
+    function switchConfigSubtab(subtab: string) {
+        configSubtab = subtab;
+        const tomlPanel = $('config-panel-toml');
+        const envPanel = $('config-panel-env');
+        if (tomlPanel) tomlPanel.style.display = subtab === 'toml' ? '' : 'none';
+        if (envPanel) envPanel.style.display = subtab === 'env' ? '' : 'none';
+        $('config-subtabs')?.querySelectorAll('.accordion-subtab').forEach(btn => {
+            btn.classList.toggle('active', (btn as HTMLElement).dataset.subtab === subtab);
+        });
+        if (subtab === 'toml') loadConfigPanel();
+        else renderEnvPanel();
+    }
+
+    function switchLogSubtab(subtab: string, skipRefresh = false) {
+        drawerTab = subtab as 'stdout' | 'stderr';
+        $('log-subtabs')?.querySelectorAll('.accordion-subtab').forEach(btn => {
+            btn.classList.toggle('active', (btn as HTMLElement).dataset.subtab === subtab);
+        });
+        logLinesRaw = [];
+        logLinesHtml = [];
+        logOffset = 0;
+        logCurrentTab = '';
+        logLastSize = -1;
+        logNeedsFullRebuild = true;
+        if (!skipRefresh) refreshDrawerLogs();
+    }
+
+    function renderEnvPanel() {
+        const envEl = $('drawer-env');
+        if (!envEl || !drawerProcess) return;
+        const proc = allProcesses.find(p => p.name === drawerProcess);
+        if (!proc || !proc.env) {
+            envEl.innerHTML = '<div class="env-empty">No environment variables configured</div>';
+            return;
+        }
+        const pairs = proc.env.split(',').filter(Boolean).map(s => {
+            const idx = s.indexOf('=');
+            return idx > 0 ? [s.slice(0, idx), s.slice(idx + 1)] : [s, ''];
+        });
+        if (pairs.length === 0) {
+            envEl.innerHTML = '<div class="env-empty">No environment variables configured</div>';
+            return;
+        }
+        envEl.innerHTML = pairs.map(([k, v]) =>
+            `<div class="env-row"><span class="env-key" title="${k}">${k}</span><span class="env-value">${v}</span></div>`
+        ).join('');
+    }
+
+    async function loadConfigPanel() {
+        const configEditor = $('config-editor') as HTMLTextAreaElement;
+        const configPath = $('config-path');
+        if (!configEditor || !drawerProcess) return;
+
+        try {
+            const res = await fetch(`/api/config/${encodeURIComponent(drawerProcess)}`);
+            const data = await res.json();
+            configEditor.value = data.content || '';
+            if (configPath) {
+                configPath.textContent = data.path || 'No config file';
+                configPath.title = data.path || '';
+            }
+            if (!data.exists) {
+                configEditor.placeholder = 'No .config.toml found for this process';
+            }
+        } catch {
+            configEditor.value = '';
+            if (configPath) configPath.textContent = 'Failed to load config';
+        }
+    }
+
     function openDrawer(name: string) {
         drawerProcess = name;
         drawerTab = 'stdout';
 
         // Update header
         const nameEl = $('drawer-process-name');
-        const iconEl = $('drawer-icon');
         if (nameEl) nameEl.textContent = name;
-        if (iconEl) iconEl.textContent = name.charAt(0).toUpperCase();
 
         // Update meta info
         const proc = allProcesses.find(p => p.name === name);
@@ -449,10 +754,11 @@ export default function mount(): () => void {
             meta.replaceChildren(...items);
         }
 
-        // Update tab state
-        drawer?.querySelectorAll('.drawer-tab').forEach(tab => {
-            tab.classList.toggle('active', (tab as HTMLElement).dataset.tab === drawerTab);
-        });
+        // Reset log subtab to stdout (skip auto-refresh, we call it once below)
+        switchLogSubtab('stdout', true);
+
+        // Open logs accordion by default
+        openAccordionSection('logs');
 
         // Show drawer
         drawer?.classList.add('open');
@@ -463,7 +769,32 @@ export default function mount(): () => void {
         const row = tbody?.querySelector(`tr[data-process-name="${name}"]`);
         if (row) row.classList.add('selected');
 
-        refreshDrawerLogs();
+        // Fetch stderr line count for badge
+        // Note: openAccordionSection('logs') above already calls refreshDrawerLogs()
+        updateStderrBadge(name);
+    }
+
+    async function updateStderrBadge(name: string) {
+        const badge = $('stderr-badge');
+        if (!badge) return;
+        try {
+            const res = await fetch(`/api/logs/${encodeURIComponent(name)}?tab=stderr&offset=0`);
+            const data = await res.json();
+            const text: string = data.text || '';
+            if (!text.trim()) {
+                badge.style.display = 'none';
+                return;
+            }
+            const count = text.split('\n').filter(Boolean).length;
+            if (count > 0) {
+                badge.textContent = count > 999 ? `${Math.floor(count / 1000)}k` : String(count);
+                badge.style.display = '';
+            } else {
+                badge.style.display = 'none';
+            }
+        } catch {
+            badge.style.display = 'none';
+        }
     }
 
     function closeDrawer() {
@@ -473,47 +804,286 @@ 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');
+
+    function fullRebuildLogs(logsEl: HTMLElement) {
+        const search = logSearch.toLowerCase();
+        if (logLinesRaw.length === 0 || (logLinesRaw.length === 1 && !logLinesRaw[0])) {
+            logsEl.innerHTML = '<em style="color: var(--text-muted)">No logs available</em>';
+            updateLogCount(0);
+            logNeedsFullRebuild = 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('');
+        updateLogCount(count);
+        logNeedsFullRebuild = false;
+    }
+
+    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;
+        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);
+    }
+
+    function updateLogCount(count: number) {
+        const countEl = $('log-line-count');
+        if (countEl) countEl.textContent = `${count} line${count !== 1 ? 's' : ''}`;
+    }
+
     async function refreshDrawerLogs() {
         if (!drawerProcess) return;
-        const logsEl = $('drawer-logs');
+        if (drawerTab !== 'stdout' && drawerTab !== 'stderr') return;
+        const logsEl = $('drawer-logs') as HTMLElement;
         if (!logsEl) return;
 
+        // Reset on tab switch
+        if (logCurrentTab !== drawerTab) {
+            logLinesRaw = [];
+            logLinesHtml = [];
+            logOffset = 0;
+            logCurrentTab = drawerTab;
+            logLastSize = -1;
+            logNeedsFullRebuild = true;
+        }
+
         try {
-            const res = await fetch(`/api/logs/${encodeURIComponent(drawerProcess)}`);
+            const res = await fetch(`/api/logs/${encodeURIComponent(drawerProcess)}?tab=${drawerTab}&offset=${logOffset}`);
             const data = await res.json();
-            const text = drawerTab === 'stdout' ? (data.stdout || '') : (data.stderr || '');
-            const lines = text.split('\n');
+            const newText: string = data.text || '';
+            const newSize: number = data.size || 0;
 
-            if (lines.length === 0 || (lines.length === 1 && !lines[0])) {
-                logsEl.replaceChildren(
-                    <em style={{ color: 'var(--text-muted)' }}>No logs available</em> as unknown as Node
-                );
-            } else {
-                const logElements = lines.map((line: string) => <LogLine text={line} /> as unknown as Node);
-                logsEl.replaceChildren(...logElements);
+            // ── Fast bail: nothing changed since last poll ──
+            if (!newText && newSize === logLastSize && !logNeedsFullRebuild) {
+                return; // zero work, zero DOM touches
+            }
+            logLastSize = newSize;
+
+            // Update file info bar (lightweight, runs always)
+            const infoEl = $('log-file-info');
+            if (infoEl) {
+                const parts: string[] = [];
+                if (data.filePath) {
+                    parts.push(`<span style="color:var(--text-dim)" title="${data.filePath}">${data.filePath}</span>`);
+                }
+                if (data.mtime) {
+                    const ago = formatTimeAgo(new Date(data.mtime));
+                    parts.push(`<span style="color:var(--text-secondary)">${ago}</span>`);
+                }
+                infoEl.innerHTML = parts.join(' <span style="color:var(--text-muted)">·</span> ');
+            }
+
+            // ── Append new lines with cached HTML ──
+            const prevCount = logLinesRaw.length;
+            if (newText) {
+                const newLines = newText.split('\n');
+                if (logLinesRaw.length > 0 && logOffset > 0 && prevCount > 0) {
+                    // Merge partial last line
+                    logLinesRaw[prevCount - 1] += newLines[0];
+                    logLinesHtml[prevCount - 1] = ansiToHtml(logLinesRaw[prevCount - 1]);
+                    for (let i = 1; i < newLines.length; i++) {
+                        logLinesRaw.push(newLines[i]);
+                        logLinesHtml.push(ansiToHtml(newLines[i]));
+                    }
+                    // Need to rebuild first merged line in DOM
+                    logNeedsFullRebuild = true;
+                } else {
+                    logLinesRaw = newLines;
+                    logLinesHtml = newLines.map(l => ansiToHtml(l));
+                }
+            }
+
+            logOffset = newSize;
+
+            // ── Render ──
+            if (logNeedsFullRebuild) {
+                fullRebuildLogs(logsEl);
+            } else if (logLinesRaw.length > prevCount) {
+                appendNewLogLines(logsEl, prevCount);
+            }
+            // else: nothing to do
+
+            if (logAutoScroll) {
+                logsEl.scrollTop = logsEl.scrollHeight;
             }
-            logsEl.scrollTop = logsEl.scrollHeight;
         } catch {
-            logsEl.replaceChildren(
-                <em style={{ color: 'var(--text-muted)' }}>Failed to load logs</em> as unknown as Node
-            );
+            const logsEl = $('drawer-logs') as HTMLElement;
+            if (logsEl) logsEl.innerHTML = '<em style="color: var(--text-muted)">Failed to load logs</em>';
         }
     }
 
     $('drawer-close-btn')?.addEventListener('click', closeDrawer);
     backdrop?.addEventListener('click', closeDrawer);
 
-    // Tab switching
-    drawer?.querySelectorAll('.drawer-tab').forEach(tab => {
-        tab.addEventListener('click', () => {
-            drawerTab = (tab as HTMLElement).dataset.tab as 'stdout' | 'stderr';
-            drawer.querySelectorAll('.drawer-tab').forEach(t => {
-                t.classList.toggle('active', (t as HTMLElement).dataset.tab === drawerTab);
-            });
+    // Auto-scroll toggle — pill button with icon + label
+    const autoScrollBtn = $('log-autoscroll-btn');
+    function updateAutoScrollBtn() {
+        if (!autoScrollBtn) return;
+        autoScrollBtn.classList.toggle('active', logAutoScroll);
+        // Keep the SVG icon, update the text node
+        const svg = autoScrollBtn.querySelector('svg');
+        autoScrollBtn.textContent = '';
+        if (svg) autoScrollBtn.appendChild(svg);
+        autoScrollBtn.appendChild(document.createTextNode(logAutoScroll ? 'Following' : 'Follow'));
+        autoScrollBtn.title = logAutoScroll ? 'Auto-scroll: ON — click to pause' : 'Auto-scroll: OFF — click to follow';
+    }
+    updateAutoScrollBtn(); // Set initial state
+
+    autoScrollBtn?.addEventListener('click', () => {
+        logAutoScroll = !logAutoScroll;
+        localStorage.setItem('bgr_autoscroll', String(logAutoScroll));
+        updateAutoScrollBtn();
+        if (logAutoScroll) {
+            const logsEl = $('drawer-logs');
+            if (logsEl) logsEl.scrollTop = logsEl.scrollHeight;
+        }
+    });
+
+    // Click log line → expand/collapse (word-wrap toggle)
+    const logsContainer = $('drawer-logs');
+    logsContainer?.addEventListener('click', (e: Event) => {
+        const line = (e.target as Element).closest('.log-line') as HTMLElement;
+        if (!line) return;
+        line.classList.toggle('expanded');
+    });
+
+    // Double-click log line → copy content to clipboard
+    logsContainer?.addEventListener('dblclick', (e: Event) => {
+        const line = (e.target as Element).closest('.log-line') as HTMLElement;
+        if (!line) return;
+        const content = line.querySelector('.log-line-content');
+        if (!content) return;
+        const text = content.textContent || '';
+        navigator.clipboard.writeText(text).then(() => {
+            line.classList.add('copied');
+            setTimeout(() => line.classList.remove('copied'), 1200);
+        });
+        e.preventDefault();
+    });
+
+    // Log search/filter with debounce
+    let logSearchTimeout: ReturnType<typeof setTimeout> | null = null;
+    $('log-search')?.addEventListener('input', (e) => {
+        if (logSearchTimeout) clearTimeout(logSearchTimeout);
+        logSearchTimeout = setTimeout(() => {
+            logSearch = (e.target as HTMLInputElement).value;
+            logNeedsFullRebuild = true;
             refreshDrawerLogs();
+        }, 200);
+    });
+
+    // Accordion section triggers
+    drawer?.querySelectorAll('.accordion-trigger').forEach(trigger => {
+        trigger.addEventListener('click', () => {
+            const section = (trigger as HTMLElement).dataset.section;
+            if (section) openAccordionSection(section);
+        });
+    });
+
+    // Config subtab switching
+    $('config-subtabs')?.querySelectorAll('.accordion-subtab').forEach(btn => {
+        btn.addEventListener('click', () => {
+            const subtab = (btn as HTMLElement).dataset.subtab;
+            if (subtab) switchConfigSubtab(subtab);
+        });
+    });
+
+    // Log subtab switching
+    $('log-subtabs')?.querySelectorAll('.accordion-subtab').forEach(btn => {
+        btn.addEventListener('click', () => {
+            const subtab = (btn as HTMLElement).dataset.subtab;
+            if (subtab) switchLogSubtab(subtab);
         });
     });
 
+    // Config save button
+    $('config-save-btn')?.addEventListener('click', async () => {
+        if (!drawerProcess) return;
+        const editor = $('config-editor') as HTMLTextAreaElement;
+        if (!editor) return;
+        try {
+            const res = await fetch(`/api/config/${encodeURIComponent(drawerProcess)}`, {
+                method: 'PUT',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({ content: editor.value }),
+            });
+            if (res.ok) {
+                showToast(`Config saved for "${drawerProcess}"`, 'success');
+                // Restart the process
+                await fetch(`/api/restart/${encodeURIComponent(drawerProcess)}`, { method: 'POST' });
+                showToast(`Restarted "${drawerProcess}"`, 'success');
+                await loadProcessesFresh();
+            } else {
+                const data = await res.json();
+                showToast(data.error || 'Failed to save config', 'error');
+            }
+        } catch {
+            showToast('Failed to save config', 'error');
+        }
+    });
+
+    // ─── Drawer Resize ───
+
+    const resizeHandle = $('drawer-resize-handle');
+    if (resizeHandle && drawer) {
+        let startX = 0;
+        let startWidth = 0;
+
+        const onMouseMove = (e: MouseEvent) => {
+            const delta = startX - e.clientX;
+            const newWidth = Math.min(Math.max(startWidth + delta, 360), window.innerWidth * 0.85);
+            drawer.style.width = `${newWidth}px`;
+        };
+
+        const onMouseUp = () => {
+            drawer.classList.remove('resizing');
+            document.removeEventListener('mousemove', onMouseMove);
+            document.removeEventListener('mouseup', onMouseUp);
+            // Persist width
+            localStorage.setItem('bgr_drawer_width', drawer.style.width);
+        };
+
+        resizeHandle.addEventListener('mousedown', (e: Event) => {
+            const me = e as MouseEvent;
+            startX = me.clientX;
+            startWidth = drawer.offsetWidth;
+            drawer.classList.add('resizing');
+            document.addEventListener('mousemove', onMouseMove);
+            document.addEventListener('mouseup', onMouseUp);
+            me.preventDefault();
+        });
+
+        // Restore saved width
+        const savedWidth = localStorage.getItem('bgr_drawer_width');
+        if (savedWidth) drawer.style.width = savedWidth;
+    }
+
     // ─── New Process Modal ───
 
     function openModal() {
@@ -580,21 +1150,7 @@ export default function mount(): () => void {
         if (drawerProcess) refreshDrawerLogs();
     });
 
-    const groupBtn = $('group-toggle-btn');
-    function updateGroupBtnState() {
-        if (groupBtn) {
-            groupBtn.classList.toggle('active', isGrouped);
-            groupBtn.style.color = isGrouped ? 'var(--accent-primary)' : '';
-        }
-    }
-    updateGroupBtnState();
-
-    groupBtn?.addEventListener('click', () => {
-        isGrouped = !isGrouped;
-        localStorage.setItem('bgr_grouped', String(isGrouped));
-        updateGroupBtnState();
-        renderFilteredProcesses();
-    });
+    // Group toggle removed — always-on directory grouping
 
     // ─── Keyboard Shortcuts ───
     function handleKeydown(e: KeyboardEvent) {
@@ -618,10 +1174,39 @@ export default function mount(): () => void {
     }
     document.addEventListener('keydown', handleKeydown);
 
-    // ─── Auto-Refresh (5s polling, matching server cache TTL) ───
-    loadProcesses();
-    refreshTimer = setInterval(() => {
-        loadProcesses();
+    // ─── SSE Live Updates (replaces polling) ───
+    let eventSource: EventSource | null = null;
+    let logRefreshTimer: ReturnType<typeof setInterval> | null = null;
+    let sseThrottleTimer: ReturnType<typeof setTimeout> | null = null;
+
+    function connectSSE() {
+        eventSource = new EventSource('/api/events');
+        eventSource.onmessage = (event) => {
+            // Skip SSE updates briefly after mutations to avoid flicker
+            if (Date.now() < mutationUntil) return;
+            try {
+                allProcesses = JSON.parse(event.data);
+                // Throttle table re-renders to avoid lag on rapid SSE
+                if (!sseThrottleTimer) {
+                    sseThrottleTimer = setTimeout(() => {
+                        sseThrottleTimer = null;
+                        renderFilteredProcesses();
+                        updateStats(allProcesses);
+                    }, 2000);
+                }
+            } catch { /* invalid data, skip */ }
+        };
+        eventSource.onerror = () => {
+            // SSE disconnected, reconnect after 5s
+            eventSource?.close();
+            eventSource = null;
+            setTimeout(connectSSE, 5000);
+        };
+    }
+    connectSSE();
+
+    // Log drawer still needs periodic refresh (not part of SSE)
+    logRefreshTimer = setInterval(() => {
         if (drawerProcess) refreshDrawerLogs();
     }, 5000);
 
@@ -635,6 +1220,8 @@ export default function mount(): () => void {
         $('modal-create-btn')?.removeEventListener('click', createProcess);
         $('refresh-btn')?.removeEventListener('click', loadProcesses);
         document.removeEventListener('keydown', handleKeydown);
-        if (refreshTimer) clearInterval(refreshTimer);
+        if (eventSource) eventSource.close();
+        if (logRefreshTimer) clearInterval(logRefreshTimer);
+        if (sseThrottleTimer) clearTimeout(sseThrottleTimer);
     };
 }