bgrun 3.12.1 → 3.12.2

package/dashboard/app/page.client.tsx

@@ -409,12 +409,34 @@ function showToast(message: string, type: 'success' | 'error' | 'info' = 'info')
 
 export default function mount(): () => void {
     const $ = (id: string) => document.getElementById(id);
+
+    // ─── Theme Toggle ───
+    let currentTheme = localStorage.getItem('bgr_theme') || 'dark';
+    function applyTheme(theme: string) {
+        currentTheme = theme;
+        document.documentElement.setAttribute('data-theme', theme);
+        localStorage.setItem('bgr_theme', theme);
+        const icon = $('theme-toggle-icon');
+        if (icon) icon.textContent = theme === 'light' ? '☀️' : '🌙';
+    }
+    applyTheme(currentTheme);
+    $('theme-toggle-btn')?.addEventListener('click', () => {
+        applyTheme(currentTheme === 'dark' ? 'light' : 'dark');
+    });
+
     let selectedProcess: string | null = null;
     let isFetching = false;
     let isFirstLoad = true;
     let allProcesses: ProcessData[] = [];
     let searchQuery = '';
     let groupQuery = '';
+    let statusFilter: 'all' | 'running' | 'stopped' | 'guarded' = (() => {
+        const saved = localStorage.getItem('bgr_status_filter');
+        return (saved === 'running' || saved === 'stopped' || saved === 'guarded') ? saved : 'all';
+    })();
+    const deployPresetKey = 'bgr_deploy_concurrency_presets';
+    const deployPresets = JSON.parse(localStorage.getItem(deployPresetKey) || '{}') as Record<string, number>;
+    let deployConcurrency = Math.max(1, Math.min(4, parseInt(localStorage.getItem('bgr_deploy_concurrency') || '1') || 1));
     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;
@@ -423,6 +445,30 @@ export default function mount(): () => void {
     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 historyDensity = localStorage.getItem('bgr_history_density') === 'compact' ? 'compact' : 'cozy';
+    let historyShortcutsEnabled = localStorage.getItem('bgr_history_shortcuts') !== 'false';
+    let historyDetailsDefault = localStorage.getItem('bgr_history_details_default') === 'expanded' ? 'expanded' : 'collapsed';
+    let historyHintsVisible = localStorage.getItem('bgr_history_hints_visible') !== 'false';
+    let historyHintDensity = localStorage.getItem('bgr_history_hint_density') === 'compact' ? 'compact' : 'full';
+    let historyAutoOpen = localStorage.getItem('bgr_history_auto_open') === 'true';
+    let historyFocusScope = localStorage.getItem('bgr_history_focus_scope') === 'inspect' ? 'inspect' : 'sync';
+    let historyHintGroups = (() => {
+        try {
+            const raw = JSON.parse(localStorage.getItem('bgr_history_hint_groups') || 'null');
+            return {
+                nav: raw?.nav !== false,
+                open: raw?.open !== false,
+                filter: raw?.filter !== false,
+                details: raw?.details !== false,
+                close: raw?.close !== false,
+            };
+        } catch {
+            return { nav: true, open: true, filter: true, details: true, close: true };
+        }
+    })();
+    let focusedHistoryIndex = 0;
+    let focusedHistoryKey: string | null = null;
+    let historyDetailState = new Map<string, boolean>();
     let logSearch = '';
     let logLinesRaw: string[] = [];  // Raw text (for search filtering)
     let logLinesHtml: string[] = []; // Pre-converted HTML (cached ansiToHtml)
@@ -467,6 +513,75 @@ export default function mount(): () => void {
     }
     loadVersion();
 
+    const deployConcurrencySelect = $('deploy-concurrency-select') as HTMLSelectElement | null;
+    const deployPresetResetBtn = $('deploy-preset-reset-btn') as HTMLButtonElement | null;
+    const deployPresetSourceEl = $('deploy-preset-source');
+
+    function getDeployPresetKey(group: string): string {
+        return group ? `group:${group}` : '__all__';
+    }
+
+    function applyDeployConcurrencyPreset(group: string) {
+        const preset = deployPresets[getDeployPresetKey(group)];
+        const next = Math.max(1, Math.min(4, preset || parseInt(localStorage.getItem('bgr_deploy_concurrency') || '1') || 1));
+        deployConcurrency = next;
+        localStorage.setItem('bgr_deploy_concurrency', String(deployConcurrency));
+        if (deployConcurrencySelect) deployConcurrencySelect.value = String(deployConcurrency);
+    }
+
+    function saveDeployConcurrencyPreset(group: string, concurrency: number) {
+        deployPresets[getDeployPresetKey(group)] = concurrency;
+        localStorage.setItem(deployPresetKey, JSON.stringify(deployPresets));
+        localStorage.setItem('bgr_deploy_concurrency', String(concurrency));
+        updateDeployPresetResetButton();
+        updateDeployPresetScopes();
+    }
+
+    function resetDeployConcurrencyPreset(group: string) {
+        delete deployPresets[getDeployPresetKey(group)];
+        localStorage.setItem(deployPresetKey, JSON.stringify(deployPresets));
+        applyDeployConcurrencyPreset(group);
+        updateDeployPresetResetButton();
+        updateDeployPresetScopes();
+    }
+
+    function updateDeployPresetIndicator() {
+        const hasPreset = Object.prototype.hasOwnProperty.call(deployPresets, getDeployPresetKey(groupQuery));
+        if (deployPresetSourceEl) {
+            deployPresetSourceEl.textContent = hasPreset ? 'preset' : 'default';
+            deployPresetSourceEl.classList.toggle('is-preset', hasPreset);
+            deployPresetSourceEl.title = hasPreset
+                ? `Using saved deploy preset for ${groupQuery || 'All Groups'}`
+                : `Using default deploy concurrency for ${groupQuery || 'All Groups'}`;
+        }
+    }
+
+    function updateDeployPresetResetButton() {
+        if (!deployPresetResetBtn) return;
+        const hasPreset = Object.prototype.hasOwnProperty.call(deployPresets, getDeployPresetKey(groupQuery));
+        deployPresetResetBtn.disabled = !hasPreset;
+        deployPresetResetBtn.style.opacity = hasPreset ? '' : '0.45';
+        deployPresetResetBtn.title = hasPreset
+            ? `Reset saved deploy preset for ${groupQuery || 'All Groups'}`
+            : `No saved deploy preset for ${groupQuery || 'All Groups'}`;
+        updateDeployPresetIndicator();
+    }
+
+    if (deployConcurrencySelect) {
+        deployConcurrencySelect.value = String(deployConcurrency);
+        deployConcurrencySelect.addEventListener('change', () => {
+            deployConcurrency = Math.max(1, Math.min(4, parseInt(deployConcurrencySelect.value) || 1));
+            saveDeployConcurrencyPreset(groupQuery, deployConcurrency);
+        });
+    }
+
+    deployPresetResetBtn?.addEventListener('click', () => {
+        resetDeployConcurrencyPreset(groupQuery);
+        showToast(`Reset deploy preset for ${groupQuery || 'All Groups'}`, 'success');
+        updateDeployAllButton();
+    });
+    updateDeployPresetResetButton();
+
     // ─── Guard Activity Feed ───
     interface GuardEvent {
         time: number;
@@ -527,6 +642,35 @@ export default function mount(): () => void {
         }
     }
 
+    function updateDeployPresetScopes() {
+        const scopesEl = $('deploy-preset-scopes');
+        if (!scopesEl) return;
+
+        const allGroups = new Set(allProcesses.map(p => p.group).filter(Boolean) as string[]);
+        const presetKeys = Object.keys(deployPresets);
+        const visibleScopes = presetKeys
+            .map(key => key === '__all__' ? '' : key.replace(/^group:/, ''))
+            .filter(scope => scope === '' || allGroups.has(scope));
+
+        if (visibleScopes.length === 0) {
+            scopesEl.innerHTML = '';
+            return;
+        }
+
+        scopesEl.replaceChildren(
+            ...visibleScopes.map(scope => (
+                <button
+                    className={`deploy-preset-scope ${scope === groupQuery ? 'active' : ''}`}
+                    data-action="switch-preset-scope"
+                    data-scope={scope}
+                    title={scope ? `Switch to group ${scope}` : 'Switch to All Groups'}
+                >
+                    {scope || 'All'}
+                </button>
+            ) as unknown as Node)
+        );
+    }
+
     function updateGroupFilter() {
         const groupFilter = $('group-filter') as HTMLSelectElement;
         if (!groupFilter) return;
@@ -542,7 +686,12 @@ export default function mount(): () => void {
         // Preserve selection if still valid
         if (currentValue && groups.has(currentValue)) {
             groupFilter.value = currentValue;
+        } else if (currentValue && !groups.has(currentValue)) {
+            groupFilter.value = '';
+            groupQuery = '';
         }
+        applyDeployConcurrencyPreset(groupFilter.value || '');
+        updateDeployPresetScopes();
     }
 
     function renderFilteredProcesses() {
@@ -566,7 +715,16 @@ export default function mount(): () => void {
         if (groupQuery) {
             filtered = filtered.filter(p => p.group === groupQuery);
         }
+        // Apply status filter from stat card clicks
+        if (statusFilter === 'running') {
+            filtered = filtered.filter(p => p.running);
+        } else if (statusFilter === 'stopped') {
+            filtered = filtered.filter(p => !p.running);
+        } else if (statusFilter === 'guarded') {
+            filtered = filtered.filter(p => isGuarded(p));
+        }
         renderProcesses(filtered);
+        updateDeployAllButton();
 
         // Update search result count badge
         const badge = $('search-count');
@@ -580,6 +738,30 @@ export default function mount(): () => void {
         }
     }
 
+    function updateDeployAllButton() {
+        const btn = $('deploy-all-btn') as HTMLButtonElement;
+        const label = $('deploy-all-label');
+        if (!btn || !label) return;
+
+        const targetCount = allProcesses.filter(p => {
+            if (p.name === 'bgr-dashboard' || p.name === 'bgr-guard') return false;
+            if (groupQuery && p.group !== groupQuery) return false;
+            return true;
+        }).length;
+
+        if (groupQuery) {
+            label.textContent = `Deploy Group (${targetCount})`;
+            btn.title = `Git pull + restart deployable processes in group "${groupQuery}" with preset ${deployConcurrency}×`;
+        } else {
+            label.textContent = `Deploy All (${targetCount})`;
+            btn.title = `Git pull + restart all deployable processes with preset ${deployConcurrency}×`;
+        }
+
+        btn.disabled = targetCount === 0;
+        btn.style.opacity = targetCount === 0 ? '0.5' : '';
+        updateDeployPresetResetButton();
+    }
+
     function updateStats(processes: ProcessData[]) {
         const total = processes.length;
         const running = processes.filter(p => p.running).length;
@@ -602,6 +784,18 @@ export default function mount(): () => void {
         const totalRestarts = processes.reduce((sum, p) => sum + (p.guardRestarts || 0), 0);
         if (rrc) rrc.textContent = String(totalRestarts);
 
+        const uptimeLongest = $('uptime-longest');
+        const uptimeTotal = $('uptime-total');
+        const runningProcesses = processes.filter(p => p.running && p.runtime > 0);
+        if (uptimeLongest) {
+            const longest = runningProcesses.reduce((max, p) => Math.max(max, p.runtime), 0);
+            uptimeLongest.textContent = longest > 0 ? formatRuntime(`${longest} minutes`) : '–';
+        }
+        if (uptimeTotal) {
+            const totalMinutes = runningProcesses.reduce((sum, p) => sum + p.runtime, 0);
+            uptimeTotal.textContent = totalMinutes > 0 ? formatRuntime(`${totalMinutes} minutes`) : '–';
+        }
+
         // Update Guard All button state
         const guardAllBtn = $('guard-all-btn');
         const guardAllLabel = $('guard-all-label');
@@ -734,7 +928,65 @@ export default function mount(): () => void {
     const groupFilter = $('group-filter') as HTMLSelectElement;
     groupFilter?.addEventListener('change', () => {
         groupQuery = groupFilter.value;
+        applyDeployConcurrencyPreset(groupQuery);
+        updateDeployPresetResetButton();
+        renderFilteredProcesses();
+    });
+
+    function updateStatFilterUI() {
+        document.querySelectorAll('[data-stat-filter]').forEach(el => {
+            el.classList.toggle('stat-active', (el as HTMLElement).dataset.statFilter === statusFilter);
+        });
+        const badge = $('stat-filter-badge');
+        const badgeLabel = $('stat-filter-badge-label');
+        if (badge && badgeLabel) {
+            if (statusFilter !== 'all') {
+                const labels: Record<string, string> = { running: 'Running', stopped: 'Stopped', guarded: 'Guarded' };
+                badgeLabel.textContent = labels[statusFilter] || statusFilter;
+                badge.style.display = '';
+            } else {
+                badge.style.display = 'none';
+            }
+        }
+    }
+
+    function setStatusFilter(filter: typeof statusFilter) {
+        statusFilter = filter;
+        localStorage.setItem('bgr_status_filter', filter);
+        updateStatFilterUI();
+        renderFilteredProcesses();
+    }
+
+    updateStatFilterUI();
+
+    $('stat-filter-badge-clear')?.addEventListener('click', () => {
+        setStatusFilter('all');
+        showToast('Status filter cleared', 'success');
+    });
+
+    $('stats-grid')?.addEventListener('click', (e) => {
+        const card = (e.target as Element).closest('[data-stat-filter]') as HTMLElement | null;
+        if (!card) return;
+        const filter = card.dataset.statFilter as typeof statusFilter;
+        setStatusFilter(statusFilter === filter ? 'all' : filter);
+        const labels: Record<string, string> = { all: 'all processes', running: 'running', stopped: 'stopped', guarded: 'guarded' };
+        showToast(`Showing ${labels[statusFilter] || statusFilter}`, 'info');
+    });
+
+    $('deploy-preset-scopes')?.addEventListener('click', (e) => {
+        const btn = (e.target as Element).closest('[data-action="switch-preset-scope"]') as HTMLElement | null;
+        const scope = btn?.dataset.scope;
+        if (scope === undefined) return;
+
+        const groupFilter = $('group-filter') as HTMLSelectElement | null;
+        if (groupFilter) {
+            groupFilter.value = scope;
+        }
+        groupQuery = scope;
+        applyDeployConcurrencyPreset(groupQuery);
+        updateDeployPresetResetButton();
         renderFilteredProcesses();
+        showToast(`Switched to ${scope || 'All Groups'} preset`, 'info');
     });
 
     /** Fetch with cache-bust to force fresh data after mutations */
@@ -1641,26 +1893,134 @@ export default function mount(): () => void {
         const nameInput = $('process-name-input') as HTMLInputElement;
         const cmdInput = $('process-command-input') as HTMLInputElement;
         const dirInput = $('process-directory-input') as HTMLInputElement;
+        const portInput = $('process-port-input') as HTMLInputElement;
         if (nameInput) nameInput.value = '';
         if (cmdInput) cmdInput.value = '';
         if (dirInput) dirInput.value = '';
+        if (portInput) portInput.value = '';
+    }
+
+    let portCheckDebounce: ReturnType<typeof setTimeout> | null = null;
+
+    async function checkPortConflict(port: number) {
+        const portInput = $('process-port-input') as HTMLInputElement | null;
+        if (!portInput || !port || port < 1 || port > 65535) return;
+        try {
+            const res = await fetch(`/api/check-port?port=${port}`);
+            const data = await res.json();
+            if (data.inUse) {
+                portInput.classList.add('port-conflict');
+                portInput.title = `Port ${port} is already in use`;
+                showToast(`⚠️ Port ${port} is already in use`, 'error');
+            } else {
+                portInput.classList.remove('port-conflict');
+                portInput.title = '';
+            }
+        } catch { /* best effort */ }
+    }
+
+    $('process-port-input')?.addEventListener('input', () => {
+        const portInput = $('process-port-input') as HTMLInputElement | null;
+        if (!portInput) return;
+        portInput.classList.remove('port-conflict');
+        portInput.title = '';
+        if (portCheckDebounce) clearTimeout(portCheckDebounce);
+        const val = parseInt(portInput.value);
+        if (val && val > 0 && val <= 65535) {
+            portCheckDebounce = setTimeout(() => checkPortConflict(val), 500);
+        }
+    });
+
+    // Port range preference
+    const savedPortRange = (() => {
+        try { return JSON.parse(localStorage.getItem('bgr_port_range') || 'null'); } catch { return null; }
+    })();
+    const portRangeMin = $('port-range-min') as HTMLInputElement | null;
+    const portRangeMax = $('port-range-max') as HTMLInputElement | null;
+    if (portRangeMin && savedPortRange?.min) portRangeMin.value = String(savedPortRange.min);
+    if (portRangeMax && savedPortRange?.max) portRangeMax.value = String(savedPortRange.max);
+
+    function validatePortRange() {
+        const min = parseInt(portRangeMin?.value || '') || 0;
+        const max = parseInt(portRangeMax?.value || '') || 0;
+        const hasMin = min > 0;
+        const hasMax = max > 0;
+        const effectiveMin = min || 3001;
+        const effectiveMax = max || 65535;
+
+        portRangeMin?.classList.remove('port-conflict');
+        portRangeMax?.classList.remove('port-conflict');
+
+        if (hasMin && hasMax && effectiveMin > effectiveMax) {
+            portRangeMin?.classList.add('port-conflict');
+            portRangeMax?.classList.add('port-conflict');
+            showToast(`⚠️ Port range invalid: min (${effectiveMin}) > max (${effectiveMax})`, 'error');
+            return false;
+        }
+        if (hasMin && hasMax && effectiveMax - effectiveMin < 5) {
+            showToast(`Port range is very narrow (${effectiveMax - effectiveMin + 1} ports)`, 'info');
+        }
+        return true;
+    }
+
+    function savePortRange() {
+        const min = parseInt(portRangeMin?.value || '') || 0;
+        const max = parseInt(portRangeMax?.value || '') || 0;
+        if (min > 0 || max > 0) {
+            localStorage.setItem('bgr_port_range', JSON.stringify({ min: min || 3001, max: max || 65535 }));
+        } else {
+            localStorage.removeItem('bgr_port_range');
+        }
+        validatePortRange();
     }
 
+    portRangeMin?.addEventListener('change', savePortRange);
+    portRangeMax?.addEventListener('change', savePortRange);
+
+    $('suggest-port-btn')?.addEventListener('click', async () => {
+        const portInput = $('process-port-input') as HTMLInputElement | null;
+        if (!portInput) return;
+        if (!validatePortRange()) return;
+        const base = parseInt(portRangeMin?.value || '') || 3001;
+        const max = parseInt(portRangeMax?.value || '') || 65535;
+        try {
+            const res = await fetch(`/api/next-port?base=${base}`);
+            const data = await res.json();
+            if (data.port > max) {
+                showToast(`⚠️ No available port in range ${base}–${max}`, 'error');
+                return;
+            }
+            portInput.value = String(data.port);
+            portInput.classList.remove('port-conflict');
+            portInput.title = '';
+            showToast(`Suggested port ${data.port}`, 'success');
+            await checkPortConflict(data.port);
+        } catch {
+            showToast('Failed to fetch next port', 'error');
+        }
+    });
+
     async function createProcess() {
         const name = ($('process-name-input') as HTMLInputElement)?.value?.trim();
         const command = ($('process-command-input') as HTMLInputElement)?.value?.trim();
         const directory = ($('process-directory-input') as HTMLInputElement)?.value?.trim();
+        const portValue = ($('process-port-input') as HTMLInputElement)?.value?.trim();
 
         if (!name || !command || !directory) {
             showToast('Please fill in all fields', 'error');
             return;
         }
 
+        const body: Record<string, any> = { name, command, directory };
+        if (portValue) {
+            body.env = { PORT: portValue };
+        }
+
         try {
             const res = await fetch('/api/start', {
                 method: 'POST',
                 headers: { 'Content-Type': 'application/json' },
-                body: JSON.stringify({ name, command, directory }),
+                body: JSON.stringify(body),
             });
 
             if (res.ok) {
@@ -1688,6 +2048,312 @@ export default function mount(): () => void {
         }
     });
 
+    // ─── Dependencies Modal ───
+
+    interface DepGraphData {
+        graph: Record<string, string[]>;
+        startOrder: string[];
+        processes: { name: string; group: string; pid: number }[];
+    }
+
+    let depsData: DepGraphData | null = null;
+
+    function openDepsModal() {
+        const modal = $('deps-modal');
+        if (modal) modal.classList.add('active');
+        loadDepsGraph();
+    }
+
+    function closeDepsModal() {
+        const modal = $('deps-modal');
+        if (modal) modal.classList.remove('active');
+    }
+
+    async function loadDepsGraph() {
+        try {
+            const res = await fetch('/api/dependencies');
+            depsData = await res.json();
+            if (depsData) {
+                populateDepsSelects(depsData.processes);
+                renderDepsGraph(depsData);
+                renderDepsList(depsData);
+                renderDepsStartOrder(depsData);
+            }
+        } catch (e) {
+            console.error('Failed to load dependencies', e);
+        }
+    }
+
+    function populateDepsSelects(processes: { name: string }[]) {
+        const procSelect = $('deps-process-select') as HTMLSelectElement;
+        const targetSelect = $('deps-target-select') as HTMLSelectElement;
+        if (!procSelect || !targetSelect) return;
+
+        const names = processes.map(p => p.name).sort();
+        for (const sel of [procSelect, targetSelect]) {
+            const val = sel.value;
+            sel.innerHTML = `<option value="">Select process...</option>`;
+            for (const name of names) {
+                sel.innerHTML += `<option value="${name}">${name}</option>`;
+            }
+            sel.value = val;
+        }
+    }
+
+    function renderDepsGraph(data: DepGraphData) {
+        const container = $('deps-graph-container');
+        const svg = document.getElementById('deps-graph-svg');
+        if (!svg || !container) return;
+
+        const processes = data.processes;
+        const graph = data.graph;
+        if (processes.length === 0) {
+            svg.innerHTML = `<text x="50%" y="50%" text-anchor="middle" fill="var(--text-secondary)" font-size="14">No processes registered</text>`;
+            return;
+        }
+
+        // Build adjacency for layout
+        const names = processes.map(p => p.name);
+        const nameSet = new Set(names);
+
+        // Topological layers using BFS from roots
+        const inDeg: Record<string, number> = {};
+        for (const n of names) inDeg[n] = 0;
+        for (const [proc, deps] of Object.entries(graph)) {
+            if (nameSet.has(proc)) {
+                for (const d of deps) {
+                    if (nameSet.has(d)) inDeg[proc] = (inDeg[proc] || 0) + 1;
+                }
+            }
+        }
+
+        // Assign layers (depth from roots)
+        const layers: string[][] = [];
+        const assigned = new Set<string>();
+        let currentLayer = names.filter(n => (inDeg[n] || 0) === 0);
+
+        while (currentLayer.length > 0) {
+            currentLayer.sort();
+            layers.push(currentLayer);
+            for (const n of currentLayer) assigned.add(n);
+
+            const nextLayer: string[] = [];
+            for (const n of currentLayer) {
+                // Find processes that depend on n
+                for (const [proc, deps] of Object.entries(graph)) {
+                    if (deps.includes(n) && nameSet.has(proc) && !assigned.has(proc)) {
+                        // Check if all deps of proc are assigned
+                        const allDepsAssigned = (graph[proc] || []).every(d => !nameSet.has(d) || assigned.has(d));
+                        if (allDepsAssigned && !nextLayer.includes(proc)) {
+                            nextLayer.push(proc);
+                        }
+                    }
+                }
+            }
+            currentLayer = nextLayer;
+        }
+
+        // Add unassigned (isolated or in cycles)
+        const remaining = names.filter(n => !assigned.has(n));
+        if (remaining.length > 0) layers.push(remaining);
+
+        // Layout: horizontal layers, left to right
+        const nodeW = 130, nodeH = 36;
+        const layerGap = 180, nodeGap = 52;
+        const padX = 40, padY = 30;
+
+        const positions: Record<string, { x: number; y: number }> = {};
+        const maxLayerSize = Math.max(...layers.map(l => l.length));
+        const totalW = padX * 2 + layers.length * layerGap;
+        const totalH = padY * 2 + maxLayerSize * nodeGap;
+
+        for (let li = 0; li < layers.length; li++) {
+            const layer = layers[li];
+            const layerH = layer.length * nodeGap;
+            const offsetY = (totalH - layerH) / 2;
+            for (let ni = 0; ni < layer.length; ni++) {
+                positions[layer[ni]] = {
+                    x: padX + li * layerGap,
+                    y: offsetY + ni * nodeGap,
+                };
+            }
+        }
+
+        svg.setAttribute('width', String(Math.max(totalW, 600)));
+        svg.setAttribute('height', String(Math.max(totalH, 300)));
+        svg.setAttribute('viewBox', `0 0 ${Math.max(totalW, 600)} ${Math.max(totalH, 300)}`);
+
+        // Find running processes
+        const runningNames = new Set(
+            (allProcesses || []).filter((p: ProcessData) => p.running).map((p: ProcessData) => p.name)
+        );
+
+        let svgContent = `
+            <defs>
+                <marker id="deps-arrowhead" viewBox="0 0 10 7" refX="10" refY="3.5"
+                    markerWidth="8" markerHeight="6" orient="auto-start-reverse">
+                    <polygon points="0 0, 10 3.5, 0 7" fill="var(--text-secondary)" opacity="0.6" />
+                </marker>
+                <marker id="deps-arrowhead-hl" viewBox="0 0 10 7" refX="10" refY="3.5"
+                    markerWidth="8" markerHeight="6" orient="auto-start-reverse">
+                    <polygon points="0 0, 10 3.5, 0 7" fill="var(--accent)" />
+                </marker>
+            </defs>
+        `;
+
+        // Draw edges (dependency arrows: depends_on ← process, so arrow from dep → process)
+        for (const [proc, deps] of Object.entries(graph)) {
+            if (!positions[proc]) continue;
+            for (const dep of deps) {
+                if (!positions[dep]) continue;
+                const from = positions[dep];
+                const to = positions[proc];
+                const x1 = from.x + nodeW;
+                const y1 = from.y + nodeH / 2;
+                const x2 = to.x;
+                const y2 = to.y + nodeH / 2;
+                const cx1 = x1 + (x2 - x1) * 0.4;
+                const cx2 = x2 - (x2 - x1) * 0.4;
+                svgContent += `<path class="deps-edge" d="M${x1},${y1} C${cx1},${y1} ${cx2},${y2} ${x2},${y2}" data-from="${dep}" data-to="${proc}" />`;
+            }
+        }
+
+        // Draw nodes
+        for (const name of names) {
+            const pos = positions[name];
+            if (!pos) continue;
+            const isRunning = runningNames.has(name);
+            const fillColor = isRunning ? 'rgba(34,197,94,0.18)' : 'rgba(100,100,120,0.15)';
+            const strokeColor = isRunning ? 'rgba(34,197,94,0.6)' : 'rgba(100,100,120,0.3)';
+            const statusDot = isRunning ? '🟢' : '⚫';
+
+            svgContent += `
+                <g class="deps-node" data-name="${name}">
+                    <rect x="${pos.x}" y="${pos.y}" width="${nodeW}" height="${nodeH}" 
+                          fill="${fillColor}" stroke="${strokeColor}" />
+                    <text x="${pos.x + 22}" y="${pos.y + nodeH / 2 + 4}" font-size="11">${name.length > 14 ? name.slice(0, 13) + '…' : name}</text>
+                    <text x="${pos.x + 6}" y="${pos.y + nodeH / 2 + 5}" font-size="10">${statusDot}</text>
+                </g>
+            `;
+        }
+
+        svg.innerHTML = svgContent;
+
+        // Hover highlighting
+        svg.querySelectorAll('.deps-node').forEach(node => {
+            node.addEventListener('mouseenter', () => {
+                const name = (node as Element).getAttribute('data-name');
+                svg.querySelectorAll('.deps-edge').forEach(edge => {
+                    const from = edge.getAttribute('data-from');
+                    const to = edge.getAttribute('data-to');
+                    if (from === name || to === name) {
+                        edge.classList.add('deps-edge-highlight');
+                        (edge as SVGElement).style.markerEnd = 'url(#deps-arrowhead-hl)';
+                    }
+                });
+            });
+            node.addEventListener('mouseleave', () => {
+                svg.querySelectorAll('.deps-edge').forEach(edge => {
+                    edge.classList.remove('deps-edge-highlight');
+                    (edge as SVGElement).style.markerEnd = 'url(#deps-arrowhead)';
+                });
+            });
+        });
+    }
+
+    function renderDepsList(data: DepGraphData) {
+        const container = $('deps-list');
+        if (!container) return;
+
+        const entries: { process: string; dep: string }[] = [];
+        for (const [proc, deps] of Object.entries(data.graph)) {
+            for (const dep of deps) {
+                entries.push({ process: proc, dep });
+            }
+        }
+
+        if (entries.length === 0) {
+            container.innerHTML = `<div class="deps-empty">No dependencies configured. Use the dropdowns above to add one.</div>`;
+            return;
+        }
+
+        container.innerHTML = entries.map(e => `
+            <div class="deps-list-item">
+                <span class="deps-item-process">${e.process}</span>
+                <span class="deps-item-arrow">→ depends on →</span>
+                <span class="deps-item-target">${e.dep}</span>
+                <button class="deps-remove-btn" data-process="${e.process}" data-dep="${e.dep}" title="Remove dependency">✕</button>
+            </div>
+        `).join('');
+
+        // Remove buttons
+        container.querySelectorAll('.deps-remove-btn').forEach(btn => {
+            btn.addEventListener('click', async () => {
+                const proc = btn.getAttribute('data-process');
+                const dep = btn.getAttribute('data-dep');
+                await fetch('/api/dependencies', {
+                    method: 'DELETE',
+                    headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify({ process: proc, depends_on: dep }),
+                });
+                loadDepsGraph();
+            });
+        });
+    }
+
+    function renderDepsStartOrder(data: DepGraphData) {
+        const container = $('deps-start-order');
+        if (!container) return;
+
+        if (data.startOrder.length === 0) {
+            container.innerHTML = '';
+            return;
+        }
+
+        container.innerHTML = `
+            <div class="deps-order-title">⚡ Recommended Start Order</div>
+            <div class="deps-order-list">
+                ${data.startOrder.map((name, i) => `
+                    <span class="deps-order-badge">
+                        <span class="deps-order-num">${i + 1}</span>
+                        ${name}
+                    </span>
+                `).join('')}
+            </div>
+        `;
+    }
+
+    $('deps-btn')?.addEventListener('click', openDepsModal);
+    $('deps-modal-close')?.addEventListener('click', closeDepsModal);
+    $('deps-modal')?.addEventListener('click', (e) => {
+        if ((e.target as Element).classList.contains('modal-overlay')) closeDepsModal();
+    });
+
+    $('deps-add-btn')?.addEventListener('click', async () => {
+        const proc = ($('deps-process-select') as HTMLSelectElement)?.value;
+        const dep = ($('deps-target-select') as HTMLSelectElement)?.value;
+        if (!proc || !dep) {
+            showToast('Select both a process and its dependency', 'error');
+            return;
+        }
+        if (proc === dep) {
+            showToast('A process cannot depend on itself', 'error');
+            return;
+        }
+        const res = await fetch('/api/dependencies', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ process: proc, depends_on: dep }),
+        });
+        const result = await res.json();
+        if (!res.ok) {
+            showToast(result.error || 'Failed to add dependency', 'error');
+            return;
+        }
+        showToast(`${proc} → ${dep} dependency added`, 'success');
+        loadDepsGraph();
+    });
+
     // ─── Templates Modal ───
 
     interface TemplateData {
@@ -1853,7 +2519,32 @@ export default function mount(): () => void {
         metadata: Record<string, any>;
     }
 
+    interface DeployResultEntry {
+        name: string;
+        ok: boolean;
+        skipped?: boolean;
+        reason?: string;
+        pullOutput?: string;
+        installOutput?: string;
+        packageManager?: string | null;
+        installCommand?: string;
+        installAttempted?: boolean;
+        retrying?: boolean;
+        phase?: 'pending' | 'running' | 'done';
+    }
+
     let allHistory: HistoryEntry[] = [];
+    let latestDeployResults: DeployResultEntry[] = [];
+    let latestDeploySummary: { group?: string | null; deployed?: number; skipped?: number; failed?: number; total?: number } | undefined;
+    const historyFocusStorageKey = 'bgr_history_focus_target';
+    let pendingHistoryFocus: { process?: string; event?: string } | null = (() => {
+        try {
+            const raw = sessionStorage.getItem(historyFocusStorageKey);
+            return raw ? JSON.parse(raw) : null;
+        } catch {
+            return null;
+        }
+    })();
 
     async function loadHistory() {
         try {
@@ -1888,14 +2579,233 @@ export default function mount(): () => void {
         }
     }
 
+    function formatHistoryDetails(h: HistoryEntry): Array<{ label: string; value: string; copyable?: boolean }> {
+        const md = h.metadata || {};
+        const parts: Array<{ label: string; value: string; copyable?: boolean }> = [];
+
+        if (h.event === 'deploy') {
+            if (md.packageManager) parts.push({ label: 'pm', value: String(md.packageManager) });
+            if (md.installCommand) parts.push({ label: 'install', value: String(md.installCommand), copyable: true });
+            else if (md.installed === false) parts.push({ label: 'install', value: 'skipped' });
+            if (md.directory) parts.push({ label: 'dir', value: String(md.directory), copyable: true });
+        } else {
+            if (md.by) parts.push({ label: 'by', value: String(md.by) });
+            if (md.count !== undefined) parts.push({ label: 'count', value: String(md.count) });
+            if (md.directory) parts.push({ label: 'dir', value: String(md.directory), copyable: true });
+        }
+
+        return parts;
+    }
+
+    function setHistoryFocusTarget(target: { process?: string; event?: string } | null) {
+        pendingHistoryFocus = target;
+        try {
+            if (target) sessionStorage.setItem(historyFocusStorageKey, JSON.stringify(target));
+            else sessionStorage.removeItem(historyFocusStorageKey);
+        } catch { }
+    }
+
+    function applyHistoryDensity() {
+        const list = $('history-list');
+        const select = $('history-density-select') as HTMLSelectElement | null;
+        if (select) select.value = historyDensity;
+        if (!list) return;
+        list.classList.toggle('history-density-compact', historyDensity === 'compact');
+        list.classList.toggle('history-density-cozy', historyDensity !== 'compact');
+    }
+
+    function applyHistoryShortcutPreference() {
+        const list = $('history-list');
+        const toggle = $('history-shortcuts-toggle') as HTMLInputElement | null;
+        if (toggle) toggle.checked = historyShortcutsEnabled;
+        if (!list) return;
+        list.classList.toggle('history-shortcuts-hidden', !historyShortcutsEnabled);
+    }
+
+    function applyHistoryDetailsPreference() {
+        const select = $('history-details-default-select') as HTMLSelectElement | null;
+        if (select) select.value = historyDetailsDefault;
+    }
+
+    function getMatchingHistoryHintPreset(): 'minimal' | 'navigation' | 'all' | 'custom' {
+        const { nav, open, filter, details, close } = historyHintGroups;
+        if (nav && open && !filter && !details && !close) return 'minimal';
+        if (nav && open && filter && !details && close) return 'navigation';
+        if (nav && open && filter && details && close) return 'all';
+        return 'custom';
+    }
+
+    function setHistoryHintPreset(preset: 'minimal' | 'navigation' | 'all') {
+        if (preset === 'minimal') {
+            historyHintGroups = { nav: true, open: true, filter: false, details: false, close: false };
+        } else if (preset === 'navigation') {
+            historyHintGroups = { nav: true, open: true, filter: true, details: false, close: true };
+        } else {
+            historyHintGroups = { nav: true, open: true, filter: true, details: true, close: true };
+        }
+        localStorage.setItem('bgr_history_hint_groups', JSON.stringify(historyHintGroups));
+        applyHistoryHintsPreference();
+    }
+
+    function applyHistoryHintsPreference() {
+        const hints = $('history-keyboard-hints');
+        const toggle = $('history-hints-toggle') as HTMLButtonElement | null;
+        const densitySelect = $('history-hint-density-select') as HTMLSelectElement | null;
+        const presetState = $('history-hint-preset-state');
+        const matchedPreset = getMatchingHistoryHintPreset();
+        const groups = {
+            nav: $('history-hint-group-nav') as HTMLInputElement | null,
+            open: $('history-hint-group-open') as HTMLInputElement | null,
+            filter: $('history-hint-group-filter') as HTMLInputElement | null,
+            details: $('history-hint-group-details') as HTMLInputElement | null,
+            close: $('history-hint-group-close') as HTMLInputElement | null,
+        };
+        if (hints) {
+            hints.style.display = historyHintsVisible ? '' : 'none';
+            hints.classList.toggle('compact', historyHintDensity === 'compact');
+            hints.classList.toggle('full', historyHintDensity !== 'compact');
+            (Object.entries(historyHintGroups) as Array<[string, boolean]>).forEach(([group, enabled]) => {
+                hints.querySelectorAll(`[data-hint-group="${group}"]`).forEach(el => {
+                    (el as HTMLElement).style.display = enabled ? '' : 'none';
+                });
+            });
+        }
+        if (densitySelect) densitySelect.value = historyHintDensity;
+        (Object.entries(groups) as Array<[keyof typeof groups, HTMLInputElement | null]>).forEach(([group, input]) => {
+            if (input) input.checked = !!historyHintGroups[group];
+        });
+        document.querySelectorAll('[data-history-hint-preset]').forEach(el => {
+            const preset = (el as HTMLElement).dataset.historyHintPreset;
+            el.classList.toggle('active', preset === matchedPreset);
+        });
+        if (presetState) {
+            presetState.textContent = matchedPreset === 'custom'
+                ? 'Custom'
+                : `Preset: ${matchedPreset}`;
+            presetState.classList.toggle('custom', matchedPreset === 'custom');
+        }
+        if (toggle) {
+            toggle.textContent = historyHintsVisible ? 'Hide' : 'Show';
+            toggle.title = historyHintsVisible ? 'Hide keyboard shortcut hints' : 'Show keyboard shortcut hints';
+        }
+    }
+
+    function updateHistoryFocusStatus() {
+        const status = $('history-focus-status');
+        const prevBtn = $('history-focus-prev') as HTMLButtonElement | null;
+        const nextBtn = $('history-focus-next') as HTMLButtonElement | null;
+        const list = $('history-list');
+        if (!status || !list) return;
+        const rows = Array.from(list.querySelectorAll('.history-item')) as HTMLElement[];
+        if (rows.length === 0) {
+            status.textContent = 'No row selected';
+            status.classList.remove('active');
+            if (prevBtn) prevBtn.disabled = true;
+            if (nextBtn) nextBtn.disabled = true;
+            return;
+        }
+
+        const boundedIndex = Math.max(0, Math.min(focusedHistoryIndex, rows.length - 1));
+        const row = rows[boundedIndex];
+        if (!row) {
+            status.textContent = 'No row selected';
+            status.classList.remove('active');
+            if (prevBtn) prevBtn.disabled = true;
+            if (nextBtn) nextBtn.disabled = true;
+            return;
+        }
+
+        const processName = row.dataset.historyProcess || 'Unknown';
+        const eventName = row.dataset.historyEvent || 'event';
+        status.textContent = `${boundedIndex + 1}/${rows.length} · ${processName} · ${eventName}`;
+        status.classList.add('active');
+        if (prevBtn) prevBtn.disabled = boundedIndex <= 0;
+        if (nextBtn) nextBtn.disabled = boundedIndex >= rows.length - 1;
+    }
+
+    function getHistoryDetailKey(h: HistoryEntry) {
+        return `${h.timestamp}::${h.process_name}::${h.event}::${h.pid || ''}`;
+    }
+
+    function syncDrawerToFocusedHistoryRow() {
+        const list = $('history-list');
+        if (!list) return;
+        const rows = Array.from(list.querySelectorAll('.history-item')) as HTMLElement[];
+        const row = rows[Math.max(0, Math.min(focusedHistoryIndex, rows.length - 1))];
+        const processName = row?.dataset.historyProcess || '';
+        if (!processName) return;
+        if (historyFocusScope === 'inspect') {
+            closeHistoryModal();
+            openDrawer(processName);
+            return;
+        }
+        if (drawerProcess === processName) return;
+        openDrawer(processName);
+    }
+
+    function applyHistoryAutoOpenPreference() {
+        const toggle = $('history-auto-open-toggle') as HTMLInputElement | null;
+        const scopeSelect = $('history-focus-scope-select') as HTMLSelectElement | null;
+        if (toggle) toggle.checked = historyAutoOpen;
+        if (scopeSelect) scopeSelect.value = historyFocusScope;
+    }
+
+    function updateHistoryClearButton() {
+        const btn = $('history-clear-filters-btn') as HTMLButtonElement | null;
+        const processFilter = $('history-process-filter') as HTMLSelectElement | null;
+        const eventFilter = $('history-event-filter') as HTMLSelectElement | null;
+        const metadataFilter = $('history-metadata-filter') as HTMLInputElement | null;
+        if (!btn) return;
+
+        const active = !!(processFilter?.value || eventFilter?.value || metadataFilter?.value.trim());
+        btn.disabled = !active;
+        btn.style.opacity = active ? '' : '0.5';
+    }
+
+    function focusHistoryRow(index: number, options?: { syncDrawer?: boolean }) {
+        const list = $('history-list');
+        if (!list) return;
+        const rows = Array.from(list.querySelectorAll('.history-item')) as HTMLElement[];
+        if (rows.length === 0) {
+            focusedHistoryIndex = 0;
+            focusedHistoryKey = null;
+            updateHistoryFocusStatus();
+            return;
+        }
+
+        focusedHistoryIndex = Math.max(0, Math.min(index, rows.length - 1));
+        rows.forEach((row, rowIndex) => {
+            const active = rowIndex === focusedHistoryIndex;
+            row.classList.toggle('keyboard-focused', active);
+            row.setAttribute('tabindex', active ? '0' : '-1');
+            row.setAttribute('aria-selected', active ? 'true' : 'false');
+            if (active) {
+                focusedHistoryKey = row.dataset.historyKey || null;
+            }
+        });
+
+        const activeRow = rows[focusedHistoryIndex];
+        activeRow?.focus({ preventScroll: true });
+        activeRow?.scrollIntoView({ block: 'nearest' });
+        updateHistoryFocusStatus();
+        if (options?.syncDrawer && historyAutoOpen) {
+            syncDrawerToFocusedHistoryRow();
+        }
+    }
+
     function renderHistory() {
         const list = $('history-list');
         const processFilter = $('history-process-filter') as HTMLSelectElement;
         const eventFilter = $('history-event-filter') as HTMLSelectElement;
+        const metadataFilter = $('history-metadata-filter') as HTMLInputElement;
         if (!list) return;
 
         const processValue = processFilter?.value || '';
         const eventValue = eventFilter?.value || '';
+        const metadataTerms = (metadataFilter?.value || '')
+            .split(',')
+            .map(v => v.toLowerCase().trim())
+            .filter(Boolean);
 
         let filtered = allHistory;
         if (processValue) {
@@ -1904,30 +2814,189 @@ export default function mount(): () => void {
         if (eventValue) {
             filtered = filtered.filter(h => h.event === eventValue);
         }
+        if (metadataTerms.length > 0) {
+            filtered = filtered.filter(h => {
+                const details = formatHistoryDetails(h);
+                return metadataTerms.every(term =>
+                    details.some(detail =>
+                        detail.label.toLowerCase().includes(term) ||
+                        detail.value.toLowerCase().includes(term)
+                    )
+                );
+            });
+        }
+
+        updateHistoryClearButton();
+        applyHistoryDensity();
+        applyHistoryShortcutPreference();
+        applyHistoryDetailsPreference();
 
         if (filtered.length === 0) {
             list.innerHTML = '<div class="history-empty">No history found</div>';
+            focusedHistoryIndex = 0;
+            focusedHistoryKey = null;
+            updateHistoryFocusStatus();
             return;
         }
 
-        list.replaceChildren(...filtered.map(h => {
+        list.replaceChildren(...filtered.map((h, index) => {
             const time = new Date(h.timestamp);
             const timeStr = time.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' }) + ' ' + time.toLocaleDateString([], { month: 'short', day: 'numeric' });
+            const details = formatHistoryDetails(h);
+            const detailKey = getHistoryDetailKey(h);
+            const detailsOpen = historyDetailState.get(detailKey) ?? (historyDetailsDefault === 'expanded');
             return (
-                <div className="history-item">
+                <div className="history-item" data-history-process={h.process_name} data-history-event={h.event} data-history-key={detailKey} data-history-index={String(index)} tabIndex={-1} role="button" aria-selected="false">
                     <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 className="history-item-main">
+                        <div className="history-item-meta">
+                            {historyShortcutsEnabled ? (
+                                <button
+                                    className="history-item-process history-filter-shortcut"
+                                    data-action="open-history-process"
+                                    data-process={h.process_name}
+                                    title={`Open process drawer for ${h.process_name}`}
+                                >
+                                    {h.process_name}
+                                </button>
+                            ) : (
+                                <span className="history-item-process history-static-label">{h.process_name}</span>
+                            )}
+                            {historyShortcutsEnabled ? (
+                                <button
+                                    className={`history-item-event history-filter-shortcut ${h.event}`}
+                                    data-action="filter-history-event"
+                                    data-event={h.event}
+                                    title={`Filter history to event ${h.event}`}
+                                >
+                                    {h.event.replace('_', ' ')}
+                                </button>
+                            ) : (
+                                <span className={`history-item-event history-static-label ${h.event}`}>
+                                    {h.event.replace('_', ' ')}
+                                </span>
+                            )}
+                            {h.pid && <span className="history-item-pid">PID {h.pid}</span>}
+                            <details className="history-item-actions-menu">
+                                <summary className="history-item-actions-toggle">Actions</summary>
+                                <div className="history-item-actions">
+                                    <button
+                                        className="history-action-btn"
+                                        data-action="open-history-process"
+                                        data-process={h.process_name}
+                                        title={`Open process drawer for ${h.process_name}`}
+                                    >
+                                        Open
+                                    </button>
+                                    <button
+                                        className="history-action-btn"
+                                        data-action="filter-history-process"
+                                        data-process={h.process_name}
+                                        title={`Filter history to process ${h.process_name}`}
+                                    >
+                                        Process Filter
+                                    </button>
+                                    <button
+                                        className="history-action-btn"
+                                        data-action="filter-history-event"
+                                        data-event={h.event}
+                                        title={`Filter history to event ${h.event}`}
+                                    >
+                                        Event Filter
+                                    </button>
+                                </div>
+                            </details>
+                        </div>
+                        {details.length > 0 && (
+                            <details className="history-item-details-wrap" data-history-detail-key={detailKey} open={detailsOpen}>
+                                <summary className="history-item-details-summary">
+                                    <span>Details</span>
+                                    <span className="history-item-details-count">{details.length}</span>
+                                </summary>
+                                <div className="history-item-details">
+                                    {details.map(detail => (
+                                        <span className="history-item-detail">
+                                            {historyShortcutsEnabled ? (
+                                                <button
+                                                    className="history-item-detail-text history-item-filter-chip"
+                                                    data-action="filter-history-detail"
+                                                    data-filter={detail.value}
+                                                    title={`Filter history by ${detail.label}: ${detail.value}`}
+                                                >
+                                                    {detail.label}: {detail.value}
+                                                </button>
+                                            ) : (
+                                                <span className="history-item-detail-text history-static-label">
+                                                    {detail.label}: {detail.value}
+                                                </span>
+                                            )}
+                                            {detail.copyable && (
+                                                <button
+                                                    className="history-item-copy"
+                                                    data-action="copy-history-detail"
+                                                    data-copy={detail.value}
+                                                    title={`Copy ${detail.label}`}
+                                                >
+                                                    Copy
+                                                </button>
+                                            )}
+                                        </span>
+                                    ) as unknown as Node)}
+                                </div>
+                            </details>
+                        )}
+                    </div>
                 </div>
             ) as unknown as Node;
         }));
+
+        if (pendingHistoryFocus) {
+            const selector = `.history-item[data-history-process="${pendingHistoryFocus.process || ''}"][data-history-event="${pendingHistoryFocus.event || ''}"]`;
+            const match = list.querySelector(selector) as HTMLElement | null;
+            if (match) {
+                list.querySelectorAll('.history-item.jump-highlight').forEach(el => el.classList.remove('jump-highlight'));
+                match.classList.add('jump-highlight');
+                match.scrollIntoView({ block: 'nearest', behavior: 'smooth' });
+                setTimeout(() => match.classList.remove('jump-highlight'), 2200);
+                focusedHistoryIndex = Math.max(0, Array.from(list.querySelectorAll('.history-item')).indexOf(match));
+                focusedHistoryKey = match.dataset.historyKey || null;
+                pendingHistoryFocus = null;
+            }
+        }
+
+        const rows = Array.from(list.querySelectorAll('.history-item')) as HTMLElement[];
+        const restoredIndex = focusedHistoryKey
+            ? rows.findIndex(row => row.dataset.historyKey === focusedHistoryKey)
+            : -1;
+        if (restoredIndex >= 0) {
+            focusedHistoryIndex = restoredIndex;
+        }
+
+        focusHistoryRow(focusedHistoryIndex);
     }
 
-    function openHistoryModal() {
+    async function openHistoryModalWithFilters(filters?: { process?: string; event?: string; metadata?: string; focus?: { process?: string; event?: string } }) {
         const modal = $('history-modal');
+        const processFilter = $('history-process-filter') as HTMLSelectElement | null;
+        const eventFilter = $('history-event-filter') as HTMLSelectElement | null;
+        const metadataFilter = $('history-metadata-filter') as HTMLInputElement | null;
+
         if (modal) modal.classList.add('active');
-        loadHistory();
+        await loadHistory();
+
+        if (processFilter) processFilter.value = filters?.process || '';
+        if (eventFilter) eventFilter.value = filters?.event || '';
+        if (metadataFilter) metadataFilter.value = filters?.metadata || '';
+        setHistoryFocusTarget(filters?.focus || pendingHistoryFocus || null);
+
+        updateHistoryClearButton();
+        applyHistoryAutoOpenPreference();
+        applyHistoryHintsPreference();
+        renderHistory();
+    }
+
+    function openHistoryModal() {
+        openHistoryModalWithFilters();
     }
 
     function closeHistoryModal() {
@@ -1944,6 +3013,329 @@ export default function mount(): () => void {
     });
     $('history-process-filter')?.addEventListener('change', renderHistory);
     $('history-event-filter')?.addEventListener('change', renderHistory);
+    $('history-metadata-filter')?.addEventListener('input', renderHistory);
+    $('history-density-select')?.addEventListener('change', () => {
+        const select = $('history-density-select') as HTMLSelectElement | null;
+        historyDensity = select?.value === 'compact' ? 'compact' : 'cozy';
+        localStorage.setItem('bgr_history_density', historyDensity);
+        applyHistoryDensity();
+        renderHistory();
+        showToast(`History density set to ${historyDensity}`, 'success');
+    });
+    $('history-shortcuts-toggle')?.addEventListener('change', () => {
+        const toggle = $('history-shortcuts-toggle') as HTMLInputElement | null;
+        historyShortcutsEnabled = !!toggle?.checked;
+        localStorage.setItem('bgr_history_shortcuts', String(historyShortcutsEnabled));
+        applyHistoryShortcutPreference();
+        renderHistory();
+        showToast(`History shortcuts ${historyShortcutsEnabled ? 'enabled' : 'hidden'}`, 'success');
+    });
+    $('history-details-default-select')?.addEventListener('change', () => {
+        const select = $('history-details-default-select') as HTMLSelectElement | null;
+        historyDetailsDefault = select?.value === 'expanded' ? 'expanded' : 'collapsed';
+        localStorage.setItem('bgr_history_details_default', historyDetailsDefault);
+        applyHistoryDetailsPreference();
+        renderHistory();
+        showToast(`History details default set to ${historyDetailsDefault}`, 'success');
+    });
+    $('history-auto-open-toggle')?.addEventListener('change', () => {
+        const toggle = $('history-auto-open-toggle') as HTMLInputElement | null;
+        historyAutoOpen = !!toggle?.checked;
+        localStorage.setItem('bgr_history_auto_open', String(historyAutoOpen));
+        applyHistoryAutoOpenPreference();
+        showToast(`History auto-open ${historyAutoOpen ? 'enabled' : 'disabled'}`, 'success');
+    });
+    $('history-focus-scope-select')?.addEventListener('change', () => {
+        const select = $('history-focus-scope-select') as HTMLSelectElement | null;
+        historyFocusScope = select?.value === 'inspect' ? 'inspect' : 'sync';
+        localStorage.setItem('bgr_history_focus_scope', historyFocusScope);
+        applyHistoryAutoOpenPreference();
+        showToast(`History focus scope set to ${historyFocusScope}`, 'success');
+    });
+    $('history-focus-prev')?.addEventListener('click', () => {
+        focusHistoryRow(focusedHistoryIndex - 1, { syncDrawer: true });
+    });
+    $('history-focus-next')?.addEventListener('click', () => {
+        focusHistoryRow(focusedHistoryIndex + 1, { syncDrawer: true });
+    });
+    ['nav', 'open', 'filter', 'details', 'close'].forEach(group => {
+        $(`history-hint-group-${group}`)?.addEventListener('change', () => {
+            const input = $(`history-hint-group-${group}`) as HTMLInputElement | null;
+            (historyHintGroups as Record<string, boolean>)[group] = !!input?.checked;
+            localStorage.setItem('bgr_history_hint_groups', JSON.stringify(historyHintGroups));
+            applyHistoryHintsPreference();
+            showToast(`History hint group ${group} ${input?.checked ? 'shown' : 'hidden'}`, 'success');
+        });
+    });
+    document.querySelectorAll('[data-history-hint-preset]').forEach(el => {
+        el.addEventListener('click', () => {
+            const preset = (el as HTMLElement).dataset.historyHintPreset as 'minimal' | 'navigation' | 'all' | undefined;
+            if (!preset) return;
+            setHistoryHintPreset(preset);
+            showToast(`History hint preset set to ${preset}`, 'success');
+        });
+    });
+    $('history-hint-density-select')?.addEventListener('change', () => {
+        const select = $('history-hint-density-select') as HTMLSelectElement | null;
+        historyHintDensity = select?.value === 'compact' ? 'compact' : 'full';
+        localStorage.setItem('bgr_history_hint_density', historyHintDensity);
+        applyHistoryHintsPreference();
+        showToast(`History hint density set to ${historyHintDensity}`, 'success');
+    });
+    $('history-hints-toggle')?.addEventListener('click', () => {
+        historyHintsVisible = !historyHintsVisible;
+        localStorage.setItem('bgr_history_hints_visible', String(historyHintsVisible));
+        applyHistoryHintsPreference();
+        showToast(`History hints ${historyHintsVisible ? 'shown' : 'hidden'}`, 'success');
+    });
+    $('history-clear-filters-btn')?.addEventListener('click', () => {
+        const processFilter = $('history-process-filter') as HTMLSelectElement | null;
+        const eventFilter = $('history-event-filter') as HTMLSelectElement | null;
+        const metadataFilter = $('history-metadata-filter') as HTMLInputElement | null;
+        if (processFilter) processFilter.value = '';
+        if (eventFilter) eventFilter.value = '';
+        if (metadataFilter) metadataFilter.value = '';
+        setHistoryFocusTarget(null);
+        renderHistory();
+        showToast('History filters cleared', 'success');
+    });
+    $('history-list')?.addEventListener('toggle', (e) => {
+        const target = e.target as HTMLElement;
+        if (!(target instanceof HTMLDetailsElement) || !target.classList.contains('history-item-details-wrap')) return;
+        const key = target.dataset.historyDetailKey;
+        if (!key) return;
+        historyDetailState.set(key, target.open);
+    }, true);
+    $('history-list')?.addEventListener('click', async (e) => {
+        const target = e.target as Element;
+        const row = target.closest('.history-item') as HTMLElement | null;
+        if (row && row.dataset.historyIndex) {
+            focusHistoryRow(parseInt(row.dataset.historyIndex, 10) || 0);
+        }
+        const copyBtn = target.closest('[data-action="copy-history-detail"]') as HTMLElement | null;
+        if (copyBtn) {
+            const value = copyBtn.dataset.copy;
+            if (!value) return;
+            try {
+                await navigator.clipboard.writeText(value);
+                showToast('Copied to clipboard', 'success');
+            } catch {
+                showToast('Failed to copy', 'error');
+            }
+            return;
+        }
+
+        const openProcessBtn = target.closest('[data-action="open-history-process"]') as HTMLElement | null;
+        if (openProcessBtn) {
+            const value = openProcessBtn.dataset.process || '';
+            closeHistoryModal();
+            openDrawer(value);
+            showToast(`Opened process "${value}"`, 'info');
+            return;
+        }
+
+        const processBtn = target.closest('[data-action="filter-history-process"]') as HTMLElement | null;
+        if (processBtn) {
+            const value = processBtn.dataset.process || '';
+            const select = $('history-process-filter') as HTMLSelectElement | null;
+            if (!select) return;
+            select.value = value;
+            renderHistory();
+            showToast(`Filtering history to process "${value}"`, 'info');
+            return;
+        }
+
+        const eventBtn = target.closest('[data-action="filter-history-event"]') as HTMLElement | null;
+        if (eventBtn) {
+            const value = eventBtn.dataset.event || '';
+            const select = $('history-event-filter') as HTMLSelectElement | null;
+            if (!select) return;
+            select.value = value;
+            renderHistory();
+            showToast(`Filtering history to event "${value}"`, 'info');
+            return;
+        }
+
+        const filterBtn = target.closest('[data-action="filter-history-detail"]') as HTMLElement | null;
+        if (filterBtn) {
+            const value = filterBtn.dataset.filter || '';
+            const input = $('history-metadata-filter') as HTMLInputElement | null;
+            if (!input) return;
+            const existing = input.value
+                .split(',')
+                .map(v => v.trim())
+                .filter(Boolean);
+            if (!existing.some(v => v.toLowerCase() === value.toLowerCase())) {
+                existing.push(value);
+            }
+            input.value = existing.join(', ');
+            renderHistory();
+            showToast(`Added history filter "${value}"`, 'info');
+        }
+    });
+
+    // ─── Deploy Results Modal ───
+
+    function renderDeployResults(summary?: { group?: string | null; deployed?: number; skipped?: number; failed?: number; total?: number }) {
+        const summaryEl = $('deploy-results-summary');
+        const listEl = $('deploy-results-list');
+        if (!summaryEl || !listEl) return;
+
+        latestDeploySummary = summary || latestDeploySummary;
+
+        if (latestDeploySummary) {
+            const deployed = latestDeployResults.filter(r => r.ok).length;
+            const skipped = latestDeployResults.filter(r => !r.ok && r.skipped && r.phase === 'done').length;
+            const failed = latestDeployResults.filter(r => !r.ok && !r.skipped && r.phase === 'done').length;
+            const running = latestDeployResults.filter(r => r.phase === 'running').length;
+            const pending = latestDeployResults.filter(r => r.phase === 'pending').length;
+            const scope = latestDeploySummary.group ? `Group: ${latestDeploySummary.group}` : 'All deployable processes';
+            summaryEl.innerHTML = [
+                `<span><strong>${scope}</strong></span>`,
+                `<span>mode ${deployConcurrency}×</span>`,
+                `<span>${deployed} deployed</span>`,
+                `<span>${skipped} skipped</span>`,
+                `<span>${failed} failed</span>`,
+                `<span>${running} running</span>`,
+                `<span>${pending} pending</span>`,
+                `<span>${latestDeployResults.length || latestDeploySummary.total || 0} total</span>`,
+            ].join('');
+        } else {
+            summaryEl.textContent = 'No deploy results yet';
+        }
+
+        if (latestDeployResults.length === 0) {
+            listEl.innerHTML = '<div class="history-empty">Run a bulk deploy to see detailed results</div>';
+            return;
+        }
+
+        listEl.replaceChildren(...latestDeployResults.map(result => {
+            const statusClass = result.phase === 'running'
+                ? 'running'
+                : result.phase === 'pending'
+                    ? 'pending'
+                    : result.ok
+                        ? 'ok'
+                        : result.skipped
+                            ? 'skipped'
+                            : 'failed';
+            const statusLabel = result.phase === 'running'
+                ? 'Deploying…'
+                : result.phase === 'pending'
+                    ? 'Pending'
+                    : result.ok
+                        ? 'Deployed'
+                        : result.skipped
+                            ? 'Skipped'
+                            : 'Failed';
+            const details = [result.reason, result.pullOutput, result.installOutput].filter(Boolean).join('\n\n');
+
+            return (
+                <div className={`deploy-result-item ${statusClass}`}>
+                    <div className="deploy-result-head">
+                        <span className="deploy-result-name">{result.name}</span>
+                        <div className="deploy-result-head-right">
+                            <span className={`deploy-result-status ${statusClass}`}>{statusLabel}</span>
+                            {!result.ok && result.phase !== 'pending' && result.phase !== 'running' && (
+                                <button className="btn btn-ghost btn-sm deploy-retry-btn" data-action="deploy-retry" data-name={result.name} disabled={result.retrying ? true : undefined}>
+                                    {result.retrying ? 'Retrying…' : 'Retry'}
+                                </button>
+                            )}
+                        </div>
+                    </div>
+                    <div className="deploy-result-meta">
+                        <span><strong>Package manager:</strong> {result.packageManager || 'none'}</span>
+                        <span><strong>Install step:</strong> {result.installAttempted ? (result.installCommand || 'attempted') : 'skipped'}</span>
+                        <button className="btn btn-ghost btn-sm deploy-history-btn" data-action="deploy-history" data-name={result.name} title={`Open History for ${result.name}`}>
+                            History
+                        </button>
+                    </div>
+                    {result.reason && <div className="deploy-result-reason">{result.reason}</div>}
+                    {(result.pullOutput || result.installOutput) && (
+                        <details className="deploy-result-details">
+                            <summary>Output</summary>
+                            <pre>{details}</pre>
+                        </details>
+                    )}
+                </div>
+            ) as unknown as Node;
+        }));
+    }
+
+    function openDeployResultsModal() {
+        const modal = $('deploy-results-modal');
+        if (modal) modal.classList.add('active');
+    }
+
+    function closeDeployResultsModal() {
+        const modal = $('deploy-results-modal');
+        if (modal) modal.classList.remove('active');
+    }
+
+    async function retryDeployResult(name: string) {
+        const index = latestDeployResults.findIndex(r => r.name === name);
+        if (index === -1) return;
+
+        latestDeployResults[index] = { ...latestDeployResults[index], retrying: true, phase: 'running' };
+        renderDeployResults();
+
+        try {
+            const res = await fetch(`/api/deploy/${encodeURIComponent(name)}`, { method: 'POST' });
+            const data = await res.json();
+            latestDeployResults[index] = {
+                name,
+                ok: !!res.ok,
+                skipped: data.skipped,
+                reason: res.ok ? undefined : (data.error || data.reason || `Failed to deploy '${name}'`),
+                pullOutput: data.pullOutput || '',
+                installOutput: data.installOutput || '',
+                packageManager: data.packageManager || null,
+                installCommand: data.installCommand || '',
+                installAttempted: !!data.installAttempted,
+                retrying: false,
+                phase: 'done',
+            };
+            showToast(res.ok ? `Deployed "${name}" successfully` : `Retry failed for "${name}"`, res.ok ? 'success' : 'error');
+        } catch {
+            latestDeployResults[index] = {
+                ...latestDeployResults[index],
+                ok: false,
+                skipped: false,
+                reason: `Failed to deploy '${name}'`,
+                retrying: false,
+                phase: 'done',
+            };
+            showToast(`Retry failed for "${name}"`, 'error');
+        }
+
+        renderDeployResults();
+        await loadProcessesFresh();
+        mutationUntil = Date.now() + 5000;
+    }
+
+    $('deploy-results-modal-close')?.addEventListener('click', closeDeployResultsModal);
+    $('deploy-results-modal')?.addEventListener('click', (e) => {
+        if ((e.target as Element).classList.contains('modal-overlay')) {
+            closeDeployResultsModal();
+        }
+    });
+    $('deploy-results-list')?.addEventListener('click', (e) => {
+        const target = e.target as Element;
+        const historyBtn = target.closest('[data-action="deploy-history"]') as HTMLElement | null;
+        if (historyBtn) {
+            const name = historyBtn.dataset.name;
+            if (!name) return;
+            closeDeployResultsModal();
+            openHistoryModalWithFilters({ process: name, event: 'deploy', focus: { process: name, event: 'deploy' } });
+            showToast(`Opened History for "${name}"`, 'info');
+            return;
+        }
+
+        const btn = target.closest('[data-action="deploy-retry"]') as HTMLElement | null;
+        const name = btn?.dataset.name;
+        if (!name || btn?.hasAttribute('disabled')) return;
+        retryDeployResult(name);
+    });
 
     // ─── Toolbar Actions ───
     $('refresh-btn')?.addEventListener('click', () => {
@@ -1994,6 +3386,107 @@ export default function mount(): () => void {
         mutationUntil = Date.now() + 3000;
     });
 
+    // ─── Deploy All Button ───
+    $('deploy-all-btn')?.addEventListener('click', async () => {
+        const deployAllBtn = $('deploy-all-btn') as HTMLButtonElement;
+        if (!deployAllBtn || deployAllBtn.disabled) return;
+
+        const targets = allProcesses.filter(p => {
+            if (p.name === 'bgr-dashboard' || p.name === 'bgr-guard') return false;
+            if (groupQuery && p.group !== groupQuery) return false;
+            return true;
+        });
+        if (targets.length === 0) return;
+
+        const scope = groupQuery ? `group "${groupQuery}"` : 'all deployable processes';
+        const concurrency = Math.max(1, Math.min(4, deployConcurrency));
+        deployAllBtn.disabled = true;
+        deployAllBtn.style.opacity = '0.5';
+        if (deployConcurrencySelect) deployConcurrencySelect.disabled = true;
+        showToast(`Deploying ${scope} (${concurrency}×)...`, 'info');
+
+        latestDeploySummary = { group: groupQuery || null, total: targets.length };
+        latestDeployResults = targets.map(p => ({
+            name: p.name,
+            ok: false,
+            skipped: false,
+            reason: '',
+            pullOutput: '',
+            installOutput: '',
+            packageManager: null,
+            installCommand: '',
+            installAttempted: false,
+            phase: 'pending',
+        }));
+        renderDeployResults(latestDeploySummary);
+        openDeployResultsModal();
+
+        try {
+            async function runDeployAtIndex(i: number) {
+                const target = latestDeployResults[i];
+                latestDeployResults[i] = { ...target, phase: 'running' };
+                renderDeployResults();
+
+                try {
+                    const res = await fetch(`/api/deploy/${encodeURIComponent(target.name)}`, { method: 'POST' });
+                    const data = await res.json();
+                    latestDeployResults[i] = {
+                        name: target.name,
+                        ok: !!res.ok,
+                        skipped: data.skipped,
+                        reason: res.ok ? undefined : (data.error || data.reason || `Failed to deploy '${target.name}'`),
+                        pullOutput: data.pullOutput || '',
+                        installOutput: data.installOutput || '',
+                        packageManager: data.packageManager || null,
+                        installCommand: data.installCommand || '',
+                        installAttempted: !!data.installAttempted,
+                        phase: 'done',
+                    };
+                } catch {
+                    latestDeployResults[i] = {
+                        name: target.name,
+                        ok: false,
+                        skipped: false,
+                        reason: `Failed to deploy '${target.name}'`,
+                        pullOutput: '',
+                        installOutput: '',
+                        packageManager: null,
+                        installCommand: '',
+                        installAttempted: false,
+                        phase: 'done',
+                    };
+                }
+                renderDeployResults();
+            }
+
+            let cursor = 0;
+            const workers = Array.from({ length: Math.min(concurrency, latestDeployResults.length) }, async () => {
+                while (cursor < latestDeployResults.length) {
+                    const current = cursor++;
+                    await runDeployAtIndex(current);
+                }
+            });
+            await Promise.all(workers);
+
+            const deployed = latestDeployResults.filter(r => r.ok).length;
+            const skipped = latestDeployResults.filter(r => !r.ok && r.skipped).length;
+            const failed = latestDeployResults.filter(r => !r.ok && !r.skipped).length;
+            const parts = [];
+            if (deployed) parts.push(`${deployed} deployed`);
+            if (skipped) parts.push(`${skipped} skipped`);
+            if (failed) parts.push(`${failed} failed`);
+            showToast(parts.length > 0 ? `Deploy complete: ${parts.join(', ')}` : 'Deploy complete', failed > 0 ? 'error' : 'success');
+        } catch {
+            showToast('Failed to deploy processes', 'error');
+        }
+
+        deployAllBtn.disabled = false;
+        deployAllBtn.style.opacity = '';
+        if (deployConcurrencySelect) deployConcurrencySelect.disabled = false;
+        await loadProcessesFresh();
+        mutationUntil = Date.now() + 5000;
+    });
+
     // Group toggle removed — always-on directory grouping
 
     // ─── Keyboard Shortcuts ───
@@ -2071,6 +3564,66 @@ export default function mount(): () => void {
     function handleKeydown(e: KeyboardEvent) {
         // Skip all shortcuts when inside text inputs or textareas
         const inInput = e.target instanceof HTMLInputElement || e.target instanceof HTMLTextAreaElement;
+        const historyModal = $('history-modal');
+        const historyList = $('history-list');
+        const historyOpen = !!historyModal?.classList.contains('active');
+
+        if (historyOpen && !inInput) {
+            const rows = Array.from(historyList?.querySelectorAll('.history-item') || []) as HTMLElement[];
+            const activeRow = rows[focusedHistoryIndex] || null;
+            if (e.key === 'ArrowDown' || e.key === 'j') {
+                e.preventDefault();
+                focusHistoryRow(focusedHistoryIndex + 1, { syncDrawer: true });
+                return;
+            }
+            if (e.key === 'ArrowUp' || e.key === 'k') {
+                e.preventDefault();
+                focusHistoryRow(focusedHistoryIndex - 1, { syncDrawer: true });
+                return;
+            }
+            if ((e.key === 'Enter' || e.key === 'o' || e.key === 'O') && activeRow) {
+                e.preventDefault();
+                const processName = activeRow.dataset.historyProcess || '';
+                if (processName) {
+                    closeHistoryModal();
+                    openDrawer(processName);
+                    showToast(`Opened process "${processName}"`, 'info');
+                }
+                return;
+            }
+            if ((e.key === 'f' || e.key === 'F') && activeRow) {
+                e.preventDefault();
+                const processName = activeRow.dataset.historyProcess || '';
+                const select = $('history-process-filter') as HTMLSelectElement | null;
+                if (select && processName) {
+                    select.value = processName;
+                    renderHistory();
+                    showToast(`Filtering history to process "${processName}"`, 'info');
+                }
+                return;
+            }
+            if ((e.key === 'e' || e.key === 'E') && activeRow) {
+                e.preventDefault();
+                const eventName = activeRow.dataset.historyEvent || '';
+                const select = $('history-event-filter') as HTMLSelectElement | null;
+                if (select && eventName) {
+                    select.value = eventName;
+                    renderHistory();
+                    showToast(`Filtering history to event "${eventName}"`, 'info');
+                }
+                return;
+            }
+            if ((e.key === ' ' || e.key === 'Spacebar') && activeRow) {
+                e.preventDefault();
+                const details = activeRow.querySelector('.history-item-details-wrap') as HTMLDetailsElement | null;
+                if (details) {
+                    details.open = !details.open;
+                    const key = details.dataset.historyDetailKey;
+                    if (key) historyDetailState.set(key, details.open);
+                }
+                return;
+            }
+        }
 
         // "/" to focus search (unless already in an input)
         if (e.key === '/' && !inInput) {
@@ -2090,6 +3643,10 @@ export default function mount(): () => void {
                 closeContextMenu();
                 return;
             }
+            if (historyOpen) {
+                closeHistoryModal();
+                return;
+            }
             if (drawer?.classList.contains('open')) {
                 closeDrawer();
             } else {
@@ -2140,6 +3697,17 @@ export default function mount(): () => void {
             return;
         }
 
+        // T — cycle stat filter
+        if (e.key === 't' || e.key === 'T') {
+            e.preventDefault();
+            const cycle: Array<typeof statusFilter> = ['all', 'running', 'stopped', 'guarded'];
+            const idx = cycle.indexOf(statusFilter);
+            setStatusFilter(cycle[(idx + 1) % cycle.length]);
+            const labels: Record<string, string> = { all: 'all processes', running: 'running', stopped: 'stopped', guarded: 'guarded' };
+            showToast(`Showing ${labels[statusFilter]}`, 'info');
+            return;
+        }
+
         // Process actions — require a focused row
         if (!focusedProcessName) return;