update

Author: Tom Softreck

webtask/static/index.html

@@ -144,10 +144,10 @@ <h3>Process Details - PID <span id="details-pid"></span></h3>
     <div class="preview-overlay" id="preview-overlay">
         <button class="preview-close-button" onclick="webtask.closePreview()" title="Close Preview">&times;</button>
         <div class="preview-content">
-            <div class="preview-header">
-                <span id="preview-title">File Preview</span>
-                <button class="close-btn" onclick="webtask.closePreview()">&times;</button>
-            </div>
+<!--            <div class="preview-header">-->
+<!--                <span id="preview-title">File Preview</span>-->
+<!--                <button class="close-btn" onclick="webtask.closePreview()">&times;</button>-->
+<!--            </div>-->
             <div class="preview-body" id="preview-body"></div>
         </div>
     </div>

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

@@ -15,7 +15,7 @@ class UIManager {
      */
     bindEvents() {
         // Process filter input
-        const filterInput = document.getElementById('process-filter');
+        const filterInput = document.getElementById('search-filter');
         if (filterInput) {
             filterInput.addEventListener('input', (e) => {
                 this.processManager.setFilterText(e.target.value);
@@ -182,6 +182,12 @@ class UIManager {
                         <button class="kill-button" data-pid="${process.pid}" title="Kill Process">
                             <span class="kill-icon">×</span>
                         </button>
+                        <button class="pause-button" data-pid="${process.pid}" title="Pause Process">
+                            <span class="pause-icon">⏸</span>
+                        </button>
+                        <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>
@@ -320,9 +326,9 @@ class UIManager {
                     if (fileType === 'html') {
                         return `
                             <div class="html-preview">
-                                <div class="preview-header">
-                                    <span class="preview-title">HTML Preview</span>
-                                </div>
+<!--                                <div class="preview-header">-->
+<!--                                    <span class="preview-title">HTML Preview</span>-->
+<!--                                </div>-->
                                 <iframe srcdoc="${fileContent.replace(/"/g, '&quot;')}" style="width:100%; height:70%; transform: scale(0.2); transform-origin: 0 0; border: none;"></iframe>
                                 ${metricsHTML}
                             </div>
@@ -345,9 +351,9 @@ class UIManager {
                     // For other text files
                     return `
                         <div class="text-preview">
-                            <div class="preview-header">
-                                <span class="preview-title">Text File</span>
-                            </div>
+<!--                            <div class="preview-header">-->
+<!--                                <span class="preview-title">Text File</span>-->
+<!--                            </div>-->
                             <div class="text-content">${fileContent.substring(0, 100)}${fileContent.length > 100 ? '...' : ''}</div>
                             ${metricsHTML}
                         </div>
@@ -364,9 +370,9 @@ class UIManager {
         // Default generic preview
         return `
             <div class="generic-preview">
-                <div class="preview-header">
-                    <span class="preview-title"></span>
-                </div>
+<!--                <div class="preview-header">-->
+<!--                    <span class="preview-title"></span>-->
+<!--                </div>-->
                 <div class="preview-content">
                     <div class="command-display">${commandIcon}</div>
                     ${metricsHTML}

webtask/static/styles.css

@@ -234,24 +234,25 @@ border-color: #555;
     display: flex;
     justify-content: space-between;
     align-items: center;
-    padding-bottom: 10px;
-    border-bottom: 1px solid #444;
+    padding-bottom: 5px;
+    /*border-bottom: 1px solid #444;*/
 }
 
 .process-command-display {
     flex-grow: 1;
     font-weight: bold;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
+    white-space: normal;
+    overflow: visible;
+    word-wrap: break-word;
     color: #00ffff;
+    max-width: calc(100% - 80px);
 }
 
 .process-card-body {
     display: flex;
     flex-direction: column;
     gap: 12px;
-    padding: 12px 0;
+    padding: 6px 0;
 }
 
 .process-metrics {
@@ -304,8 +305,8 @@ border-color: #555;
     display: flex;
     flex-wrap: wrap;
     gap: 6px;
-    padding-top: 10px;
-    border-top: 1px solid #444;
+    padding-top: 5px;
+    /*border-top: 1px solid #444;*/
 }
 
 .info-badge {
@@ -380,7 +381,7 @@ border-color: #555;
     align-items: center;
     justify-content: center;
     overflow: hidden;
-    height: 150px;
+    height: 90px;
     cursor: pointer;
     border-radius: 6px;
     background: #222;
@@ -525,7 +526,8 @@ border-color: #555;
 
 .action-buttons {
     display: flex;
-    gap: 4px;
+    gap: 6px;
+    margin-left: 10px;
 }
 
 .kill-button, .pause-button, .restart-button {
@@ -1052,12 +1054,12 @@ background: #ffcc44;
 
 .preview-content {
     background-color: #1a1a1a;
-    margin: 1% auto;
-    padding: 0;
-    border: 3px solid #00ff00;
-    width: 98%;
-    height: 98%;
-    border-radius: 15px;
+    /*margin: 1% auto;*/
+    padding: 4px;
+    border: 0px solid #00ff00;
+    /*width: 98%;*/
+    /*height: 98%;*/
+    /*border-radius: 1px;*/
     color: #00ff00;
     display: flex;
     flex-direction: column;