bgrun 3.7.1 → 3.9.0

package/dashboard/app/api/deploy/[name]/route.ts

@@ -0,0 +1,58 @@
+/**
+ * POST /api/deploy/:name — Git pull + install deps + restart a process
+ * 
+ * Only works if the process directory is a git repository.
+ * Steps: git pull → bun install → force restart
+ */
+import { getProcess } from '../../../../../src/db';
+import { handleRun } from '../../../../../src/commands/run';
+import { measure } from 'measure-fn';
+import { $ } from 'bun';
+
+export async function POST(req: Request, { params }: { params: { name: string } }) {
+    const name = decodeURIComponent(params.name);
+
+    try {
+        const proc = getProcess(name);
+        if (!proc) {
+            return Response.json({ error: `Process '${name}' not found` }, { status: 404 });
+        }
+
+        const dir = proc.workdir;
+
+        // Check if it's a git repo
+        const isGit = await Bun.file(`${dir}/.git/HEAD`).exists();
+        if (!isGit) {
+            return Response.json({ error: `'${dir}' is not a git repository` }, { status: 400 });
+        }
+
+        const result = await measure(`Deploy "${name}"`, async () => {
+            // 1. Git pull
+            $.cwd(dir);
+            const pullOutput = await $`git pull`.text();
+
+            // 2. Install dependencies (detect package manager)
+            let installOutput = '';
+            const hasBunLock = await Bun.file(`${dir}/bun.lock`).exists() || await Bun.file(`${dir}/bun.lockb`).exists();
+            const hasPackageJson = await Bun.file(`${dir}/package.json`).exists();
+
+            if (hasPackageJson) {
+                installOutput = await $`bun install`.text();
+            }
+
+            // 3. Restart the process
+            await handleRun({
+                action: 'run',
+                name,
+                force: true,
+                remoteName: '',
+            });
+
+            return { pullOutput: pullOutput.trim(), installOutput: installOutput.trim() };
+        });
+
+        return Response.json({ success: true, ...result });
+    } catch (e: any) {
+        return Response.json({ error: e.message }, { status: 500 });
+    }
+}

package/dashboard/app/globals.css

@@ -983,6 +983,125 @@ tr.animate-in:nth-child(10) {
     border-color: var(--warning-border);
 }
 
+.action-btn.deploy:hover {
+    background: rgba(20, 184, 166, 0.1);
+    color: #14b8a6;
+    border-color: rgba(20, 184, 166, 0.3);
+}
+
+/* ─── Context Menu ─── */
+.context-menu {
+    position: fixed;
+    z-index: 10000;
+    min-width: 180px;
+    background: rgba(22, 27, 34, 0.95);
+    backdrop-filter: blur(16px);
+    border: 1px solid var(--border);
+    border-radius: 10px;
+    padding: 4px;
+    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.04);
+    animation: contextIn 0.15s ease-out;
+}
+
+.context-menu.closing {
+    animation: contextOut 0.12s ease-in forwards;
+}
+
+@keyframes contextIn {
+    from {
+        opacity: 0;
+        transform: scale(0.95) translateY(-4px);
+    }
+
+    to {
+        opacity: 1;
+        transform: scale(1) translateY(0);
+    }
+}
+
+@keyframes contextOut {
+    from {
+        opacity: 1;
+        transform: scale(1) translateY(0);
+    }
+
+    to {
+        opacity: 0;
+        transform: scale(0.95) translateY(-4px);
+    }
+}
+
+.context-item {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    width: 100%;
+    padding: 8px 12px;
+    background: none;
+    border: none;
+    border-radius: 6px;
+    color: var(--text-secondary);
+    font-size: 0.8125rem;
+    cursor: pointer;
+    transition: all 0.12s ease;
+    text-align: left;
+    font-family: inherit;
+}
+
+.context-item svg {
+    width: 15px;
+    height: 15px;
+    flex-shrink: 0;
+    opacity: 0.7;
+}
+
+.context-item:hover {
+    background: rgba(255, 255, 255, 0.06);
+    color: var(--text-primary);
+}
+
+.context-item:hover svg {
+    opacity: 1;
+}
+
+.context-item.danger:hover {
+    background: var(--danger-bg);
+    color: var(--danger);
+}
+
+.context-item.danger:hover svg {
+    color: var(--danger);
+}
+
+.context-item.success:hover {
+    background: var(--success-bg);
+    color: var(--success);
+}
+
+.context-item.success:hover svg {
+    color: var(--success);
+}
+
+.context-item.deploy:hover {
+    background: rgba(20, 184, 166, 0.1);
+    color: #14b8a6;
+}
+
+.context-item.deploy:hover svg {
+    color: #14b8a6;
+}
+
+.context-divider {
+    height: 1px;
+    background: var(--border);
+    margin: 4px 8px;
+}
+
+/* Hint that rows are right-clickable */
+#processes-table tr[data-process-name] {
+    cursor: default;
+}
+
 /* ─── Empty State ─── */
 .empty-state {
     text-align: center;

package/dashboard/app/page.client.tsx

@@ -83,6 +83,17 @@ function RestartIcon() {
     );
 }
 
+function DeployIcon() {
+    return (
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+            <path d="M4.5 16.5c-1.5 1.26-2 5-2 5s3.74-.5 5-2c.71-.84.7-2.13-.09-2.91a2.18 2.18 0 0 0-2.91-.09z" />
+            <path d="M12 15l-3-3a22 22 0 0 1 2-3.95A12.88 12.88 0 0 1 22 2c0 2.72-.78 7.5-6 11a22.35 22.35 0 0 1-4 2z" />
+            <path d="M9 12H4s.55-3.03 2-4c1.62-1.08 5 0 5 0" />
+            <path d="M12 15v5s3.03-.55 4-2c1.08-1.62 0-5 0-5" />
+        </svg>
+    );
+}
+
 // ─── Utility: Format Runtime ───
 
 function formatRuntime(raw: string): string {
@@ -165,25 +176,6 @@ function ProcessRow({ p, animate }: { p: ProcessData; animate?: boolean }) {
             </td>
             <td className="command" title={p.command}>{p.command}</td>
             <td className="runtime">{formatRuntime(p.runtime)}</td>
-            <td className="actions">
-                <button className="action-btn info" data-action="logs" data-name={p.name} title="View Logs">
-                    <LogsIcon />
-                </button>
-                {p.running
-                    ? <button className="action-btn danger" data-action="stop" data-name={p.name} title="Stop">
-                        <StopIcon />
-                    </button>
-                    : <button className="action-btn success" data-action="restart" data-name={p.name} title="Start">
-                        <PlayIcon />
-                    </button>
-                }
-                <button className="action-btn warning" data-action="restart" data-name={p.name} title="Restart">
-                    <RestartIcon />
-                </button>
-                <button className="action-btn danger" data-action="delete" data-name={p.name} title="Delete">
-                    <TrashIcon />
-                </button>
-            </td>
         </tr>
     );
 }
@@ -256,6 +248,9 @@ function ProcessCard({ p }: { p: ProcessData }) {
                 <button className="action-btn warning" data-action="restart" data-name={p.name} title="Restart">
                     <RestartIcon /> Restart
                 </button>
+                <button className="action-btn deploy" data-action="deploy" data-name={p.name} title="Deploy (git pull + restart)">
+                    <DeployIcon /> Deploy
+                </button>
                 <button className="action-btn danger" data-action="delete" data-name={p.name} title="Delete">
                     <TrashIcon /> Delete
                 </button>
@@ -595,6 +590,24 @@ export default function mount(): () => void {
                 break;
             }
 
+            case 'deploy': {
+                showToast(`Deploying "${name}"...`, 'info');
+                try {
+                    const res = await fetch(`/api/deploy/${encodeURIComponent(name)}`, { method: 'POST' });
+                    const data = await res.json();
+                    if (res.ok) {
+                        showToast(`Deployed "${name}" successfully`, 'success');
+                    } else {
+                        showToast(data.error || `Failed to deploy "${name}"`, 'error');
+                    }
+                } catch {
+                    showToast(`Failed to deploy "${name}"`, 'error');
+                }
+                await loadProcessesFresh();
+                mutationUntil = Date.now() + 5000;
+                break;
+            }
+
             case 'logs':
                 openDrawer(name);
                 break;
@@ -603,20 +616,99 @@ export default function mount(): () => void {
 
     const tbody = $('processes-table');
 
-    // Row click → open drawer
-    tbody?.addEventListener('click', (e: Event) => {
-        const btn = (e.target as Element).closest('[data-action]');
-        if (btn) {
-            handleAction(e);
-            return;
+    // ─── Context Menu ───
+    let contextMenuEl: HTMLElement | null = null;
+
+    function closeContextMenu() {
+        if (contextMenuEl) {
+            contextMenuEl.classList.add('closing');
+            setTimeout(() => { contextMenuEl?.remove(); contextMenuEl = null; }, 150);
         }
+    }
+
+    function showContextMenu(name: string, x: number, y: number) {
+        closeContextMenu();
+        const proc = allProcesses.find(p => p.name === name);
+        if (!proc) return;
+
+        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>
+                {proc.running
+                    ? <button className="context-item danger" data-action="stop" data-name={name}>
+                        <StopIcon /> Stop
+                    </button>
+                    : <button className="context-item success" data-action="restart" data-name={name}>
+                        <PlayIcon /> Start
+                    </button>
+                }
+                <button className="context-item" data-action="restart" data-name={name}>
+                    <RestartIcon /> Restart
+                </button>
+                <button className="context-item deploy" data-action="deploy" data-name={name}>
+                    <DeployIcon /> Deploy
+                </button>
+                <div className="context-divider"></div>
+                <button className="context-item danger" data-action="delete" data-name={name}>
+                    <TrashIcon /> Delete
+                </button>
+            </div>
+        ) as unknown as HTMLElement;
+
+        // Handle clicks inside the menu
+        menu.addEventListener('click', (e: Event) => {
+            const item = (e.target as Element).closest('[data-action]');
+            if (item) {
+                handleAction(e);
+                closeContextMenu();
+            }
+        });
+
+        document.body.appendChild(menu);
+        contextMenuEl = menu;
+
+        // Adjust position if menu goes off-screen
+        const rect = menu.getBoundingClientRect();
+        if (rect.right > window.innerWidth) menu.style.left = `${x - rect.width}px`;
+        if (rect.bottom > window.innerHeight) menu.style.top = `${y - rect.height}px`;
+    }
+
+    // Right-click on table rows → context menu
+    tbody?.addEventListener('contextmenu', (e: Event) => {
+        const me = e as MouseEvent;
+        const row = (me.target as Element).closest('tr[data-process-name]') as HTMLElement;
+        if (row && row.dataset.processName) {
+            me.preventDefault();
+            showContextMenu(row.dataset.processName, me.clientX, me.clientY);
+        }
+    });
+
+    // Close context menu on click outside or Escape
+    document.addEventListener('click', (e: Event) => {
+        if (contextMenuEl && !contextMenuEl.contains(e.target as Node)) {
+            closeContextMenu();
+        }
+    });
+    document.addEventListener('contextmenu', (e: Event) => {
+        // Allow right-click to close existing menu when clicking elsewhere
+        if (contextMenuEl && !contextMenuEl.contains(e.target as Node)) {
+            const row = (e.target as Element).closest('tr[data-process-name]');
+            if (!row) closeContextMenu();
+        }
+    });
+
+    // Row click → open drawer (left click)
+    tbody?.addEventListener('click', (e: Event) => {
         const row = (e.target as Element).closest('tr[data-process-name]') as HTMLElement;
         if (row && row.dataset.processName) {
             openDrawer(row.dataset.processName);
         }
     });
 
-    // Mobile cards click → same delegation
+    // Mobile cards click → keep inline buttons
     const mobileCards = $('mobile-cards');
     mobileCards?.addEventListener('click', (e: Event) => {
         const btn = (e.target as Element).closest('[data-action]');
@@ -630,6 +722,22 @@ export default function mount(): () => void {
         }
     });
 
+    // Mobile cards → context menu on long-press
+    let longPressTimer: ReturnType<typeof setTimeout> | null = null;
+    mobileCards?.addEventListener('touchstart', (e: Event) => {
+        const te = e as TouchEvent;
+        const card = (te.target as Element).closest('.process-card[data-process-name]') as HTMLElement;
+        if (card && card.dataset.processName) {
+            const name = card.dataset.processName;
+            const touch = te.touches[0];
+            longPressTimer = setTimeout(() => {
+                showContextMenu(name, touch.clientX, touch.clientY);
+            }, 500);
+        }
+    });
+    mobileCards?.addEventListener('touchend', () => { if (longPressTimer) clearTimeout(longPressTimer); });
+    mobileCards?.addEventListener('touchmove', () => { if (longPressTimer) clearTimeout(longPressTimer); });
+
     // ─── Detail Drawer ───
 
     const drawer = $('detail-drawer');
@@ -1161,6 +1269,10 @@ export default function mount(): () => void {
             return;
         }
         if (e.key === 'Escape') {
+            if (contextMenuEl) {
+                closeContextMenu();
+                return;
+            }
             if (drawer?.classList.contains('open')) {
                 closeDrawer();
             } else {
@@ -1220,6 +1332,7 @@ export default function mount(): () => void {
         $('modal-create-btn')?.removeEventListener('click', createProcess);
         $('refresh-btn')?.removeEventListener('click', loadProcesses);
         document.removeEventListener('keydown', handleKeydown);
+        closeContextMenu();
         if (eventSource) eventSource.close();
         if (logRefreshTimer) clearInterval(logRefreshTimer);
         if (sseThrottleTimer) clearTimeout(sseThrottleTimer);

package/dashboard/app/page.tsx

@@ -77,7 +77,6 @@ export default function DashboardPage() {
                             <th style={{ width: '70px' }}>Memory</th>
                             <th>Command</th>
                             <th style={{ width: '100px' }}>Runtime</th>
-                            <th style={{ width: '150px' }}>Actions</th>
                         </tr>
                     </thead>
                     <tbody id="processes-table">

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bgrun",
-  "version": "3.7.1",
+  "version": "3.9.0",
   "description": "bgrun — A lightweight process manager for Bun",
   "type": "module",
   "main": "./src/api.ts",
@@ -57,4 +57,4 @@
   "engines": {
     "bun": ">=1.0.0"
   }
-}
+}