bgrun 3.10.1 → 3.11.0

package/dashboard/app/page.client.tsx

@@ -1,4 +1,4 @@
-/** @jsxImportSource react */
+/** @jsxImportSource melina/client */
 /**
  * bgrun Dashboard — Page Client Interactivity
  *
@@ -26,6 +26,10 @@ interface ProcessData {
     configPath: string;
     stdoutPath: string;
     stderrPath: string;
+    guardRestarts: number;
+    cpu?: number;
+    cpuHistory?: number[];
+    memoryHistory?: number[];
 }
 
 // ─── SVG Icon Helpers ───
@@ -94,6 +98,51 @@ function DeployIcon() {
     );
 }
 
+function ShieldIcon() {
+    return (
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+            <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z" />
+        </svg>
+    );
+}
+
+// ─── Sparkline Component ───
+function MiniSparkline({ data, height = 24, stroke = "var(--text-accent)" }: { data: number[], height?: number, stroke?: string }) {
+    if (!data || data.length < 2) return <svg className="sparkline" viewBox="0 0 100 24" height={height} width="60" />;
+
+    const max = Math.max(...data, 1);
+    const min = Math.min(...data, 0); // anchor to 0 minimum
+    const range = max - min || 1;
+    const padding = 2; // top/bottom pixel padding
+
+    // Normalize path across 100 viewBox width
+    const path = data.map((val, i) => {
+        const x = (i / (data.length - 1)) * 100;
+        const normalizedY = ((val - min) / range);
+        const y = padding + (1 - normalizedY) * (24 - padding * 2);
+        return `${i === 0 ? 'M' : 'L'} ${x} ${y}`;
+    }).join(' ');
+
+    return (
+        <svg className="sparkline" viewBox="0 0 100 24" height={height} width="60" fill="none" stroke={stroke} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" style={{ display: 'inline-block', verticalAlign: 'middle', marginLeft: '6px', opacity: 0.8 }}>
+            <path d={path} />
+        </svg>
+    );
+}
+
+// ─── Guard Helper ───
+
+function isGuarded(p: ProcessData): boolean {
+    if (!p.env) return false;
+    // env is comma-separated "KEY=VAL,KEY2=VAL2" or JSON string
+    try {
+        const parsed = JSON.parse(p.env);
+        return parsed.BGR_KEEP_ALIVE === 'true';
+    } catch {
+        return p.env.includes('BGR_KEEP_ALIVE=true');
+    }
+}
+
 // ─── Utility: Format Runtime ───
 
 function formatRuntime(raw: string): string {
@@ -148,11 +197,22 @@ function shortenPath(dir: string): string {
 // ─── JSX Components ───
 
 function ProcessRow({ p, animate }: { p: ProcessData; animate?: boolean }) {
+    const guarded = isGuarded(p);
     return (
         <tr data-process-name={p.name} className={animate ? 'animate-in' : ''} style={animate ? { opacity: '0' } : undefined}>
             <td>
                 <div className="process-name">
                     <span>{p.name}</span>
+                    <button
+                        className={`guard-toggle ${guarded ? 'guarded' : ''}`}
+                        data-action="guard"
+                        data-name={p.name}
+                        data-guarded={guarded ? 'true' : 'false'}
+                        title={guarded ? 'Process is guarded — click to disable auto-restart' : 'Click to enable auto-restart guard'}
+                        onClick={(e: Event) => e.stopPropagation()}
+                    >
+                        <ShieldIcon />
+                    </button>
                 </div>
             </td>
             <td>
@@ -168,14 +228,26 @@ function ProcessRow({ p, animate }: { p: ProcessData; animate?: boolean }) {
                     : <span style={{ color: 'var(--text-muted)' }}>–</span>
                 }
             </td>
+            <td className="cpu">
+                {p.running && (p.cpu !== undefined)
+                    ? <div className="metrics-cell">
+                        <span>{p.cpu > 0 ? `${p.cpu.toFixed(1)}%` : '<0.1%'}</span>
+                        <MiniSparkline data={p.cpuHistory || []} stroke="#7ee787" />
+                    </div>
+                    : <span style={{ color: 'var(--text-muted)' }}>–</span>
+                }
+            </td>
             <td className="memory">
-                {p.memory > 0
-                    ? <span className="memory-badge">{formatMemory(p.memory)}</span>
+                {p.running && p.memory > 0
+                    ? <div className="metrics-cell">
+                        <span className="memory-badge">{formatMemory(p.memory)}</span>
+                        <MiniSparkline data={p.memoryHistory || []} stroke="#a5d6ff" />
+                    </div>
                     : <span style={{ color: 'var(--text-muted)' }}>–</span>
                 }
             </td>
             <td className="command" title={p.command}>{p.command}</td>
-            <td className="runtime">{formatRuntime(p.runtime)}</td>
+            <td className="runtime">{formatRuntime(String(p.runtime))}</td>
         </tr>
     );
 }
@@ -215,11 +287,13 @@ function EmptyState() {
 }
 
 function ProcessCard({ p }: { p: ProcessData }) {
+    const guarded = isGuarded(p);
     return (
         <div className="process-card" data-process-name={p.name}>
             <div className="card-header">
                 <div className="process-name">
                     <span>{p.name}</span>
+                    {guarded && <span className="guard-badge" title="Auto-restart enabled">🛡️</span>}
                 </div>
                 <span className={`status-badge ${p.running ? 'running' : 'stopped'}`}>
                     <span className="status-dot"></span>
@@ -229,11 +303,15 @@ function ProcessCard({ p }: { p: ProcessData }) {
             <div className="card-details">
                 <div className="card-detail"><span className="card-label">PID</span><span>{p.pid}</span></div>
                 <div className="card-detail"><span className="card-label">Port</span>{p.port ? <a className="port-link" href={`http://localhost:${p.port}`} target="_blank" rel="noopener" onClick={(e: Event) => e.stopPropagation()}>:{p.port}</a> : <span>–</span>}</div>
-                <div className="card-detail"><span className="card-label">Memory</span><span>{p.memory > 0 ? formatMemory(p.memory) : '–'}</span></div>
-                <div className="card-detail"><span className="card-label">Runtime</span><span>{formatRuntime(p.runtime)}</span></div>
+                <div className="card-detail"><span className="card-label">CPU</span>{p.running && (p.cpu !== undefined) ? <div style={{ display: 'flex', alignItems: 'center' }}><span>{p.cpu > 0 ? `${p.cpu.toFixed(1)}%` : '<0.1%'}</span><MiniSparkline data={p.cpuHistory || []} stroke="#7ee787" /></div> : <span>–</span>}</div>
+                <div className="card-detail"><span className="card-label">Memory</span>{p.running && p.memory > 0 ? <div style={{ display: 'flex', alignItems: 'center' }}><span>{formatMemory(p.memory)}</span><MiniSparkline data={p.memoryHistory || []} stroke="#a5d6ff" /></div> : <span>–</span>}</div>
+                <div className="card-detail"><span className="card-label">Runtime</span><span>{formatRuntime(String(p.runtime))}</span></div>
             </div>
             <div className="card-command" title={p.command}>{p.command}</div>
             <div className="card-actions">
+                <button className={`action-btn guard ${guarded ? 'active' : ''}`} data-action="guard" data-name={p.name} data-guarded={guarded ? 'true' : 'false'} title={guarded ? 'Disable auto-restart' : 'Enable auto-restart'}>
+                    <ShieldIcon /> {guarded ? 'Unguard' : 'Guard'}
+                </button>
                 <button className="action-btn info" data-action="logs" data-name={p.name} title="View Logs">
                     <LogsIcon /> Logs
                 </button>
@@ -401,16 +479,51 @@ export default function mount(): () => void {
         const total = processes.length;
         const running = processes.filter(p => p.running).length;
         const stopped = total - running;
+        const guarded = processes.filter(p => isGuarded(p)).length;
+        const guardable = processes.filter(p => p.name !== 'bgr-dashboard').length;
         const totalMemory = processes.reduce((sum, p) => sum + (p.memory || 0), 0);
 
         const tc = $('total-count');
         const rc = $('running-count');
         const sc = $('stopped-count');
+        const gc = $('guarded-count');
         const mc = $('memory-count');
+        const rrc = $('restarts-count');
         if (tc) tc.textContent = String(total);
         if (rc) rc.textContent = String(running);
         if (sc) sc.textContent = String(stopped);
+        if (gc) gc.textContent = String(guarded);
         if (mc) mc.textContent = formatMemory(totalMemory) || '0 MB';
+        const totalRestarts = processes.reduce((sum, p) => sum + (p.guardRestarts || 0), 0);
+        if (rrc) rrc.textContent = String(totalRestarts);
+
+        // Update Guard All button state
+        const guardAllBtn = $('guard-all-btn');
+        const guardAllLabel = $('guard-all-label');
+        if (guardAllBtn && guardAllLabel) {
+            const allGuarded = guardable > 0 && guarded >= guardable;
+            guardAllBtn.classList.toggle('all-guarded', allGuarded);
+            guardAllLabel.textContent = allGuarded ? 'Unguard All' : 'Guard All';
+            guardAllBtn.title = allGuarded ? 'Remove guard from all processes' : 'Guard all processes (auto-restart on crash)';
+        }
+
+        // Update guard sentinel pill
+        const guardPill = $('guard-sentinel-pill');
+        const guardLabel = $('guard-sentinel-label');
+        if (guardPill && guardLabel) {
+            const guardProc = processes.find(p => p.name === 'bgr-guard');
+            guardPill.classList.remove('active', 'stopped');
+            if (guardProc && guardProc.running) {
+                guardPill.classList.add('active');
+                const restarts = guardProc.guardRestarts || 0;
+                guardLabel.textContent = restarts > 0 ? `Guard: ON (${restarts}↻)` : 'Guard: ON';
+            } else if (guardProc) {
+                guardPill.classList.add('stopped');
+                guardLabel.textContent = 'Guard: OFF';
+            } else {
+                guardLabel.textContent = 'Guard: –';
+            }
+        }
     }
 
     function renderProcesses(processes: ProcessData[]) {
@@ -608,6 +721,29 @@ export default function mount(): () => void {
                 break;
             }
 
+            case 'guard': {
+                const currentlyGuarded = btn.dataset.guarded === 'true';
+                const newState = !currentlyGuarded;
+                try {
+                    const res = await fetch('/api/guard', {
+                        method: 'POST',
+                        headers: { 'Content-Type': 'application/json' },
+                        body: JSON.stringify({ name, enabled: newState }),
+                    });
+                    if (res.ok) {
+                        showToast(`${newState ? 'Guarded' : 'Unguarded'} "${name}"`, 'success');
+                    } else {
+                        const data = await res.json();
+                        showToast(data.error || `Failed to toggle guard for "${name}"`, 'error');
+                    }
+                } catch {
+                    showToast(`Failed to toggle guard for "${name}"`, 'error');
+                }
+                await loadProcessesFresh();
+                mutationUntil = Date.now() + 3000;
+                break;
+            }
+
             case 'logs':
                 openDrawer(name);
                 break;
@@ -631,12 +767,17 @@ export default function mount(): () => void {
         const proc = allProcesses.find(p => p.name === name);
         if (!proc) return;
 
+        const guarded = isGuarded(proc);
         const menu = (
             <div className="context-menu" style={{ left: `${x}px`, top: `${y}px` }}>
                 <button className="context-item" data-action="logs" data-name={name}>
                     <LogsIcon /> View Logs
                 </button>
                 <div className="context-divider"></div>
+                <button className={`context-item ${guarded ? 'guard-active' : 'guard'}`} data-action="guard" data-name={name} data-guarded={guarded ? 'true' : 'false'}>
+                    <ShieldIcon /> {guarded ? 'Disable Guard' : 'Enable Guard'}
+                </button>
+                <div className="context-divider"></div>
                 {proc.running
                     ? <button className="context-item danger" data-action="stop" data-name={name}>
                         <StopIcon /> Stop
@@ -842,11 +983,12 @@ export default function mount(): () => void {
         const proc = allProcesses.find(p => p.name === name);
         const meta = $('drawer-meta');
         if (meta && proc) {
+            const guarded = isGuarded(proc);
             const metaItems = [
                 { label: 'Status', value: proc.running ? '● Running' : '○ Stopped' },
                 { label: 'PID', value: String(proc.pid) },
                 { label: 'Port', value: proc.port ? `:${proc.port}` : '–', href: proc.port ? `http://localhost:${proc.port}` : undefined },
-                { label: 'Runtime', value: formatRuntime(proc.runtime) },
+                { label: 'Runtime', value: formatRuntime(String(proc.runtime)) },
                 { label: 'Command', value: proc.command },
                 { label: 'Directory', value: proc.directory || '–' },
                 { label: 'Memory', value: formatMemory(proc.memory) },
@@ -862,7 +1004,74 @@ export default function mount(): () => void {
                     }
                 </div>
             ) as unknown as Node);
-            meta.replaceChildren(...items);
+
+            // Guard toggle row with inline switch
+            const guardRow = (
+                <div className={`meta-item meta-guard ${guarded ? 'guarded' : ''}`}>
+                    <span className="meta-label">
+                        <ShieldIcon /> Guard
+                    </span>
+                    <label className="guard-toggle" title={guarded ? 'Auto-restart is ON — click to disable' : 'Auto-restart is OFF — click to enable'}>
+                        <input type="checkbox" checked={guarded} className="guard-toggle-input" />
+                        <span className="guard-toggle-track">
+                            <span className="guard-toggle-thumb"></span>
+                        </span>
+                        <span className="guard-toggle-label">{guarded ? 'Protected' : 'Off'}</span>
+                    </label>
+                </div>
+            ) as unknown as HTMLElement;
+
+            // Wire toggle click
+            const checkbox = guardRow.querySelector('.guard-toggle-input') as HTMLInputElement;
+            checkbox?.addEventListener('change', async () => {
+                const newState = checkbox.checked;
+                const labelEl = guardRow.querySelector('.guard-toggle-label');
+                const trackEl = guardRow.querySelector('.guard-toggle-track');
+                // Optimistic UI update
+                if (labelEl) labelEl.textContent = newState ? 'Protected' : 'Off';
+                guardRow.classList.toggle('guarded', newState);
+                try {
+                    const res = await fetch('/api/guard', {
+                        method: 'POST',
+                        headers: { 'Content-Type': 'application/json' },
+                        body: JSON.stringify({ name, enabled: newState }),
+                    });
+                    if (res.ok) {
+                        showToast(`${newState ? 'Guard enabled' : 'Guard disabled'} for "${name}"`, 'success');
+                    } else {
+                        // Rollback
+                        checkbox.checked = !newState;
+                        if (labelEl) labelEl.textContent = !newState ? 'Protected' : 'Off';
+                        guardRow.classList.toggle('guarded', !newState);
+                        showToast('Failed to toggle guard', 'error');
+                    }
+                } catch {
+                    checkbox.checked = !newState;
+                    if (labelEl) labelEl.textContent = !newState ? 'Protected' : 'Off';
+                    guardRow.classList.toggle('guarded', !newState);
+                    showToast('Failed to toggle guard', 'error');
+                }
+                await loadProcessesFresh();
+                mutationUntil = Date.now() + 3000;
+            });
+
+            // Guard restart counter (only shown when > 0)
+            const extraRows: Node[] = [];
+            if (proc.guardRestarts > 0) {
+                extraRows.push((
+                    <div className="meta-item meta-restarts">
+                        <span className="meta-label">Guard Restarts</span>
+                        <span className="meta-value">
+                            <span className="restart-count-badge">{proc.guardRestarts}</span>
+                            <span className="restart-count-text">
+                                {proc.guardRestarts === 1 ? 'auto-restart this session' : 'auto-restarts this session'}
+                            </span>
+                        </span>
+                    </div>
+                ) as unknown as Node);
+            }
+
+            meta.replaceChildren(...items, guardRow, ...extraRows);
         }
 
         // Reset log subtab to stdout (skip auto-refresh, we call it once below)
@@ -1261,6 +1470,46 @@ export default function mount(): () => void {
         if (drawerProcess) refreshDrawerLogs();
     });
 
+    // ─── Guard All Button ───
+    $('guard-all-btn')?.addEventListener('click', async () => {
+        const guardAllBtn = $('guard-all-btn') as HTMLButtonElement;
+        if (!guardAllBtn) return;
+
+        const guardable = allProcesses.filter(p => p.name !== 'bgr-dashboard');
+        const guarded = guardable.filter(p => isGuarded(p)).length;
+        const allGuarded = guardable.length > 0 && guarded >= guardable.length;
+        const newState = !allGuarded;
+
+        // Disable button during operation
+        guardAllBtn.disabled = true;
+        guardAllBtn.style.opacity = '0.5';
+
+        try {
+            const res = await fetch('/api/guard-all', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({ enabled: newState }),
+            });
+            if (res.ok) {
+                const data = await res.json();
+                showToast(
+                    `${newState ? 'Guarded' : 'Unguarded'} ${data.count} process${data.count !== 1 ? 'es' : ''}`,
+                    'success'
+                );
+            } else {
+                const data = await res.json();
+                showToast(data.error || 'Failed to toggle guard for all processes', 'error');
+            }
+        } catch {
+            showToast('Failed to toggle guard for all processes', 'error');
+        }
+
+        guardAllBtn.disabled = false;
+        guardAllBtn.style.opacity = '';
+        await loadProcessesFresh();
+        mutationUntil = Date.now() + 3000;
+    });
+
     // Group toggle removed — always-on directory grouping
 
     // ─── Keyboard Shortcuts ───

package/dashboard/app/page.tsx

@@ -25,10 +25,18 @@ export default function DashboardPage() {
                     <div className="stat-label">Stopped</div>
                     <div className="stat-value" id="stopped-count">–</div>
                 </div>
+                <div className="stat-card guarded">
+                    <div className="stat-label">Guarded</div>
+                    <div className="stat-value" id="guarded-count">–</div>
+                </div>
                 <div className="stat-card memory">
                     <div className="stat-label">Total Memory</div>
                     <div className="stat-value" id="memory-count">–</div>
                 </div>
+                <div className="stat-card restarts">
+                    <div className="stat-label">Guard Restarts</div>
+                    <div className="stat-value" id="restarts-count">0</div>
+                </div>
             </div>
 
             {/* Toolbar */}
@@ -55,6 +63,16 @@ export default function DashboardPage() {
                             <path d="M20.49 15a9 9 0 1 1-2.12-9.36L23 10" />
                         </svg>
                     </button>
+                    <button className="btn btn-ghost btn-guard-all" id="guard-all-btn" title="Guard All Processes">
+                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+                            <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z" />
+                        </svg>
+                        <span id="guard-all-label">Guard All</span>
+                    </button>
+                    <span className="guard-sentinel-pill" id="guard-sentinel-pill" title="Standalone guard process status">
+                        <span className="guard-sentinel-dot" id="guard-sentinel-dot" />
+                        <span id="guard-sentinel-label">Guard: –</span>
+                    </span>
                     <button className="btn btn-primary" id="new-process-btn">
                         <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                             <line x1="12" y1="5" x2="12" y2="19" />
@@ -74,7 +92,8 @@ export default function DashboardPage() {
                             <th style={{ width: '90px' }}>Status</th>
                             <th style={{ width: '70px' }}>PID</th>
                             <th style={{ width: '70px' }}>Port</th>
-                            <th style={{ width: '70px' }}>Memory</th>
+                            <th style={{ width: '80px' }}>CPU</th>
+                            <th style={{ width: '120px' }}>Memory</th>
                             <th>Command</th>
                             <th style={{ width: '100px' }}>Runtime</th>
                         </tr>