update

Author: Tom Softreck

README.md

@@ -1,11 +1,12 @@
+![webtask-logo.svg](webtask-logo.svg)
+
 # webtask 🖥️
 
 webtask python package to start web top version in browser, [kill] like a pro!
 
 
 A modern, web-based system monitor inspired by htop with advanced file browsing, process transparency layers, and miniature file previews. Monitor your system processes through a sleek terminal-style web interface with real-time updates and comprehensive process management capabilities.
 
-![webtask-logo.svg](webtask-logo.svg)
 
 ## ✨ Features
 
@@ -53,6 +54,9 @@ A modern, web-based system monitor inspired by htop with advanced file browsing,
 
 ## 🚀 Quick Start
 
+
+![webtask-grid.png](webtask-grid.png)
+
 ### Installation
 
 ```bash
@@ -84,7 +88,6 @@ webtask --no-browser
 # Check version
 webtask --version
 ```
-
 ### Alternative Installation
 
 Using Poetry (for development):
@@ -260,12 +263,11 @@ Made with ❤️ for system administrators and developers who love comprehensive
 
 ### webtask-2
 
+
 #### List
 ![webtask-list.png](webtask-list.png)
 
 
-#### Grid
-![webtask-grid.png](webtask-grid.png)
 
 
 ### webtask-1

webtask-grid.png

@@ -176,7 +176,6 @@ class UIManager {
 
         row.innerHTML = `
             <div class="process-card-header">
-                <div class="process-command-display">${commandWithIcon}</div>
                 <div class="process-actions">
                     <div class="action-buttons">
                         <button class="kill-button" data-pid="${process.pid}" title="Kill Process">
@@ -188,8 +187,11 @@ class UIManager {
                         <button class="restart-button" data-pid="${process.pid}" title="Restart Process">
                             <span class="restart-icon">↻</span>
                         </button>
-                        <button class="more-button" data-pid="${process.pid}" title="More Actions">
-                            <span class="more-icon">⋮</span>
+                        <button class="stop-button" data-pid="${process.pid}" title="Stop Process">
+                            <span class="stop-icon">⏹</span>
+                        </button>
+                        <button class="info-button" data-pid="${process.pid}" title="Process Info">
+                            <span class="info-icon">ℹ</span>
                         </button>
                     </div>
                 </div>
@@ -244,6 +246,7 @@ class UIManager {
     generateCommandWithIcon(process) {
         let iconHtml = '';
         const command = process.command || '';
+        const path = process.path || '';
 
         // Determine the type of icon based on the process service or command
         if (process.service === 'nginx') {
@@ -268,7 +271,13 @@ class UIManager {
             iconHtml = '<span class="command-icon process-icon">PROC</span>';
         }
 
-        return `<div class="command-with-icon">${iconHtml} <span class="command-text">${command}</span></div>`;
+        return `<div class="command-with-icon">
+            ${iconHtml} 
+            <div class="command-details">
+                <span class="command-text">${command}</span>
+                <span class="command-path">${path}</span>
+            </div>
+        </div>`;
     }
 
     /**

webtask/static/js/modules/ui-manager.js

@@ -248,6 +248,23 @@ border-color: #555;
     max-width: calc(100% - 80px);
 }
 
+.command-details {
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+}
+
+.command-text {
+    font-weight: bold;
+    color: #00ffff;
+}
+
+.command-path {
+    font-size: 11px;
+    color: #aaaaaa;
+    opacity: 0.8;
+}
+
 .process-card-body {
     display: flex;
     flex-direction: column;