bgrun 3.8.0 → 3.9.0

package/dashboard/app/globals.css

@@ -989,6 +989,119 @@ tr.animate-in:nth-child(10) {
     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

@@ -176,28 +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 deploy" data-action="deploy" data-name={p.name} title="Deploy (git pull + restart)">
-                    <DeployIcon />
-                </button>
-                <button className="action-btn danger" data-action="delete" data-name={p.name} title="Delete">
-                    <TrashIcon />
-                </button>
-            </td>
         </tr>
     );
 }
@@ -638,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]');
@@ -665,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');
@@ -1196,6 +1269,10 @@ export default function mount(): () => void {
             return;
         }
         if (e.key === 'Escape') {
+            if (contextMenuEl) {
+                closeContextMenu();
+                return;
+            }
             if (drawer?.classList.contains('open')) {
                 closeDrawer();
             } else {
@@ -1255,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.8.0",
+  "version": "3.9.0",
   "description": "bgrun — A lightweight process manager for Bun",
   "type": "module",
   "main": "./src/api.ts",