Add execution cleanup functionality

Changes:
- Added DELETE /api/executions/:id endpoint
- Added "Clear Completed" button to Executions tab
- Deletes all completed and failed executions
- Broadcasts execution_deleted event to update all clients
- Shows count of deleted executions

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>

.gitignore

@@ -30,3 +30,6 @@ Thumbs.db
 *.swp
 *.swo
 *~
+
+# Claude
+Claude.md

public/index.html

@@ -5,42 +5,197 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>PULSE - Workflow Orchestration</title>
     <style>
+        :root {
+            /* Terminal Dark Backgrounds */
+            --bg-primary: #0a0a0a;
+            --bg-secondary: #1a1a1a;
+            --bg-tertiary: #2a2a2a;
+
+            /* Terminal Colors */
+            --terminal-green: #00ff41;
+            --terminal-amber: #ffb000;
+            --terminal-cyan: #00ffff;
+            --text-primary: #00ff41;
+            --text-secondary: #00cc33;
+            --text-muted: #008822;
+
+            /* Border & UI */
+            --border-color: #00ff41;
+            --shadow: none;
+            --hover-bg: rgba(0, 255, 65, 0.1);
+
+            /* Status Colors (adapted) */
+            --status-online: #28a745;
+            --status-offline: #dc3545;
+            --status-running: #ffc107;
+            --status-completed: #28a745;
+            --status-failed: #dc3545;
+            --status-waiting: #ffc107;
+
+            /* Terminal Font Stack */
+            --font-mono: 'Courier New', 'Consolas', 'Monaco', 'Menlo', monospace;
+
+            /* Glow Effects */
+            --glow-green: 0 0 5px #00ff41, 0 0 10px #00ff41, 0 0 15px #00ff41;
+            --glow-green-intense: 0 0 8px #00ff41, 0 0 16px #00ff41, 0 0 24px #00ff41, 0 0 32px rgba(0, 255, 65, 0.5);
+            --glow-amber: 0 0 5px #ffb000, 0 0 10px #ffb000, 0 0 15px #ffb000;
+            --glow-amber-intense: 0 0 8px #ffb000, 0 0 16px #ffb000, 0 0 24px #ffb000;
+        }
+
         * { margin: 0; padding: 0; box-sizing: border-box; }
+
         body {
-            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+            font-family: var(--font-mono);
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            background: var(--bg-primary);
+            color: var(--text-primary);
             min-height: 100vh;
             padding: 20px;
+            position: relative;
+            animation: flicker 0.2s ease-in-out 30s infinite;
+        }
+
+        /* CRT Scanline Effect */
+        body::before {
+            content: '';
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background: repeating-linear-gradient(
+                0deg,
+                rgba(0, 0, 0, 0.15),
+                rgba(0, 0, 0, 0.15) 1px,
+                transparent 1px,
+                transparent 2px
+            );
+            pointer-events: none;
+            z-index: 9999;
+            animation: scanline 8s linear infinite;
+        }
+
+        @keyframes scanline {
+            0% { transform: translateY(0); }
+            100% { transform: translateY(4px); }
+        }
+
+        /* Data Stream Corner Effect */
+        body::after {
+            content: '10101010';
+            position: fixed;
+            bottom: 10px;
+            right: 10px;
+            font-family: var(--font-mono);
+            font-size: 0.6rem;
+            color: var(--terminal-green);
+            opacity: 0.1;
+            pointer-events: none;
+            letter-spacing: 2px;
+            animation: data-stream 3s linear infinite;
+        }
+
+        @keyframes data-stream {
+            0% { content: '10101010'; opacity: 0.1; }
+            25% { content: '01010101'; opacity: 0.15; }
+            50% { content: '11001100'; opacity: 0.1; }
+            75% { content: '00110011'; opacity: 0.15; }
+            100% { content: '10101010'; opacity: 0.1; }
+        }
+
+        @keyframes flicker {
+            0% { opacity: 1; }
+            10% { opacity: 0.95; }
+            20% { opacity: 1; }
+            30% { opacity: 0.97; }
+            40% { opacity: 1; }
         }
         .container { max-width: 1600px; margin: 0 auto; }
         .header {
-            background: white;
+            background: var(--bg-secondary);
-            padding: 30px;
+            padding: 20px 30px;
-            border-radius: 10px;
+            border: 2px solid var(--terminal-green);
-            box-shadow: 0 10px 30px rgba(0,0,0,0.2);
+            border-radius: 0;
+            box-shadow: none;
             margin-bottom: 30px;
             display: flex;
             justify-content: space-between;
             align-items: center;
+            position: relative;
+        }
+        .header::before {
+            content: '╔';
+            position: absolute;
+            top: -2px;
+            left: -2px;
+            font-size: 1.5rem;
+            color: var(--terminal-green);
+            text-shadow: var(--glow-green);
+            line-height: 1;
+            z-index: 10;
+        }
+        .header::after {
+            content: '╗';
+            position: absolute;
+            top: -2px;
+            right: -2px;
+            font-size: 1.5rem;
+            color: var(--terminal-green);
+            text-shadow: var(--glow-green);
+            line-height: 1;
+            z-index: 10;
+        }
+        .header-left h1 {
+            color: var(--terminal-amber);
+            font-size: 2em;
+            margin-bottom: 5px;
+            text-shadow: var(--glow-amber-intense);
+            font-family: var(--font-mono);
+        }
+        .header-left h1::before {
+            content: '>> ';
+            color: var(--terminal-green);
+        }
+        .header-left p {
+            color: var(--terminal-green);
+            font-size: 1em;
+            font-family: var(--font-mono);
         }
-        .header-left h1 { color: #667eea; font-size: 2.5em; margin-bottom: 5px; }
-        .header-left p { color: #666; font-size: 1.1em; }
         .user-info { text-align: right; }
-        .user-info .name { font-weight: 600; color: #333; font-size: 1.1em; }
+        .user-info .name {
-        .user-info .email { color: #666; font-size: 0.9em; }
+            font-weight: 600;
+            color: var(--terminal-green);
+            font-size: 1.1em;
+            font-family: var(--font-mono);
+        }
+        .user-info .email {
+            color: var(--text-secondary);
+            font-size: 0.9em;
+            font-family: var(--font-mono);
+        }
         .user-info .badge {
             display: inline-block;
-            background: #667eea;
+            background: transparent;
-            color: white;
+            color: var(--terminal-amber);
             padding: 4px 12px;
-            border-radius: 12px;
+            border: 2px solid var(--terminal-amber);
+            border-radius: 0;
             font-size: 0.8em;
             margin-top: 5px;
             margin-left: 5px;
+            font-family: var(--font-mono);
+        }
+        .user-info .badge::before {
+            content: '[';
+            margin-right: 3px;
+        }
+        .user-info .badge::after {
+            content: ']';
+            margin-left: 3px;
         }
         .tabs {
-            background: white;
+            background: var(--bg-secondary);
-            border-radius: 10px;
+            border: 2px solid var(--terminal-green);
+            border-radius: 0;
             padding: 10px;
             margin-bottom: 20px;
             display: flex;
@@ -49,20 +204,28 @@
         .tab {
             padding: 12px 24px;
             background: transparent;
-            border: none;
+            border: 2px solid var(--terminal-green);
+            border-radius: 0;
             cursor: pointer;
             font-size: 1em;
             font-weight: 600;
-            color: #666;
+            color: var(--terminal-green);
-            border-radius: 5px;
+            font-family: var(--font-mono);
             transition: all 0.3s;
         }
         .tab.active {
-            background: #667eea;
+            background: rgba(0, 255, 65, 0.2);
-            color: white;
+            color: var(--terminal-amber);
+            border-color: var(--terminal-amber);
+            text-shadow: var(--glow-amber);
+        }
+        .tab:hover {
+            background: rgba(0, 255, 65, 0.1);
+            color: var(--terminal-amber);
+        }
+        .tab.active:hover {
+            background: rgba(0, 255, 65, 0.25);
         }
-        .tab:hover { background: #f0f0f0; }
-        .tab.active:hover { background: #5568d3; }
         .grid {
             display: grid;
             grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
@@ -70,65 +233,211 @@
             margin-bottom: 30px;
         }
         .card {
-            background: white;
+            background: var(--bg-secondary);
             padding: 25px;
-            border-radius: 10px;
+            border: 2px solid var(--terminal-green);
-            box-shadow: 0 5px 15px rgba(0,0,0,0.1);
+            border-radius: 0;
+            box-shadow: none;
+            position: relative;
+        }
+        .card::before {
+            content: '┌';
+            position: absolute;
+            top: -2px;
+            left: -2px;
+            font-size: 1.2rem;
+            color: var(--terminal-green);
+            line-height: 1;
+        }
+        .card::after {
+            content: '┐';
+            position: absolute;
+            top: -2px;
+            right: -2px;
+            font-size: 1.2rem;
+            color: var(--terminal-green);
+            line-height: 1;
+        }
+        .card h3 {
+            color: var(--terminal-amber);
+            margin-bottom: 15px;
+            font-size: 1.2em;
+            font-family: var(--font-mono);
+            text-shadow: var(--glow-amber);
+        }
+        .card h3::before {
+            content: '═══ ';
+            color: var(--terminal-green);
+        }
+        .card h3::after {
+            content: ' ═══';
+            color: var(--terminal-green);
         }
-        .card h3 { color: #333; margin-bottom: 15px; font-size: 1.3em; }
         .status {
             display: inline-block;
             padding: 5px 15px;
-            border-radius: 20px;
+            border-radius: 0;
             font-size: 0.9em;
             font-weight: 600;
             margin-bottom: 5px;
+            background: transparent;
+            border: 2px solid;
+            font-family: var(--font-mono);
         }
-        .status.online { background: #10b981; color: white; }
+        .status.online {
-        .status.offline { background: #ef4444; color: white; }
+            border-color: var(--status-online);
-        .status.running { background: #3b82f6; color: white; }
+            color: var(--status-online);
-        .status.completed { background: #10b981; color: white; }
+            text-shadow: 0 0 5px var(--status-online), 0 0 10px var(--status-online);
-        .status.failed { background: #ef4444; color: white; }
+        }
-        .status.waiting { background: #f59e0b; color: white; }
+        .status.online::before { content: '[●'; margin-right: 4px; }
+        .status.online::after { content: ']'; margin-left: 4px; }
+        .status.offline {
+            border-color: var(--status-offline);
+            color: var(--status-offline);
+            text-shadow: 0 0 5px var(--status-offline), 0 0 10px var(--status-offline);
+        }
+        .status.offline::before { content: '[○'; margin-right: 4px; }
+        .status.offline::after { content: ']'; margin-left: 4px; }
+        .status.running {
+            border-color: var(--status-running);
+            color: var(--status-running);
+            text-shadow: 0 0 5px var(--status-running), 0 0 10px var(--status-running);
+        }
+        .status.running::before {
+            content: '[◐';
+            margin-right: 4px;
+            animation: spin-status 2s linear infinite;
+        }
+        @keyframes spin-status {
+            0% { content: '[◐'; }
+            25% { content: '[◓'; }
+            50% { content: '[◑'; }
+            75% { content: '[◒'; }
+            100% { content: '[◐'; }
+        }
+        .status.running::after { content: ']'; margin-left: 4px; }
+        .status.completed {
+            border-color: var(--status-completed);
+            color: var(--status-completed);
+            text-shadow: 0 0 5px var(--status-completed), 0 0 10px var(--status-completed);
+        }
+        .status.completed::before { content: '[✓'; margin-right: 4px; }
+        .status.completed::after { content: ']'; margin-left: 4px; }
+        .status.failed {
+            border-color: var(--status-failed);
+            color: var(--status-failed);
+            text-shadow: 0 0 5px var(--status-failed), 0 0 10px var(--status-failed);
+        }
+        .status.failed::before { content: '[✗'; margin-right: 4px; }
+        .status.failed::after { content: ']'; margin-left: 4px; }
+        .status.waiting {
+            border-color: var(--status-waiting);
+            color: var(--status-waiting);
+            text-shadow: 0 0 5px var(--status-waiting), 0 0 10px var(--status-waiting);
+        }
+        .status.waiting::before { content: '[⏳'; margin-right: 4px; }
+        .status.waiting::after { content: ']'; margin-left: 4px; }
         button {
-            background: #667eea;
+            background: transparent;
-            color: white;
+            color: var(--terminal-green);
-            border: none;
+            border: 2px solid var(--terminal-green);
+            border-radius: 0;
             padding: 12px 24px;
-            border-radius: 5px;
             cursor: pointer;
             font-size: 1em;
             font-weight: 600;
-            transition: all 0.3s;
+            font-family: var(--font-mono);
+            text-transform: uppercase;
+            transition: all 0.3s ease;
             margin-right: 10px;
             margin-bottom: 10px;
         }
+        button::before { content: '[ '; }
+        button::after { content: ' ]'; }
         button:hover {
-            background: #5568d3;
+            background: rgba(0, 255, 65, 0.15);
+            color: var(--terminal-amber);
+            border-color: var(--terminal-amber);
+            text-shadow: var(--glow-amber);
+            box-shadow: var(--glow-amber);
             transform: translateY(-2px);
-            box-shadow: 0 5px 15px rgba(102, 126, 234, 0.4);
         }
-        button.danger { background: #ef4444; }
+        button.danger {
-        button.danger:hover { background: #dc2626; }
+            color: var(--status-failed);
+            border-color: var(--status-failed);
+        }
+        button.danger:hover {
+            background: rgba(220, 53, 69, 0.15);
+            text-shadow: 0 0 5px var(--status-failed), 0 0 10px var(--status-failed);
+        }
         button.small {
             padding: 6px 12px;
             font-size: 0.85em;
         }
         .worker-item, .execution-item, .workflow-item {
             padding: 15px;
-            border: 1px solid #e0e0e0;
+            border: 2px solid var(--terminal-green);
-            border-radius: 5px;
+            border-radius: 0;
             margin-bottom: 10px;
-            background: #f9f9f9;
+            background: var(--bg-secondary);
+            font-family: var(--font-mono);
+            transition: all 0.3s;
         }
         .worker-item:hover, .execution-item:hover, .workflow-item:hover {
-            background: #f0f0f0;
+            background: rgba(0, 255, 65, 0.08);
+            box-shadow: inset 0 0 20px rgba(0, 255, 65, 0.1);
+        }
+        .workflow-name {
+            font-weight: 600;
+            color: var(--terminal-amber);
+            font-size: 1.1em;
+            margin-bottom: 5px;
+            font-family: var(--font-mono);
+            text-shadow: var(--glow-amber);
+        }
+        .workflow-name::before {
+            content: '> ';
+            color: var(--terminal-green);
+        }
+        .workflow-desc {
+            color: var(--terminal-green);
+            font-size: 0.9em;
+            margin-bottom: 10px;
+            font-family: var(--font-mono);
+        }
+        .loading {
+            text-align: center;
+            padding: 20px;
+            color: var(--terminal-green);
+            font-family: var(--font-mono);
+        }
+        .loading::after {
+            content: '...';
+            animation: loading-dots 1.5s steps(4, end) infinite;
+        }
+        @keyframes loading-dots {
+            0%, 20% { content: '.'; }
+            40% { content: '..'; }
+            60%, 100% { content: '...'; }
+        }
+        .empty {
+            text-align: center;
+            padding: 30px;
+            color: var(--text-muted);
+            font-family: var(--font-mono);
+        }
+        .empty::before {
+            content: '[ NO DATA ]';
+            display: block;
+            font-size: 1.2rem;
+            color: var(--terminal-green);
+            margin-bottom: 10px;
+        }
+        .timestamp {
+            font-size: 0.85em;
+            color: var(--text-muted);
+            font-family: var(--font-mono);
         }
-        .workflow-name { font-weight: 600; color: #333; font-size: 1.1em; margin-bottom: 5px; }
-        .workflow-desc { color: #666; font-size: 0.9em; margin-bottom: 10px; }
-        .loading { text-align: center; padding: 20px; color: #666; }
-        .empty { text-align: center; padding: 30px; color: #999; }
-        .timestamp { font-size: 0.85em; color: #999; }
         .modal {
             display: none;
             position: fixed;
@@ -136,54 +445,135 @@
             left: 0;
             width: 100%;
             height: 100%;
-            background: rgba(0,0,0,0.5);
+            background: rgba(0, 0, 0, 0.85);
             z-index: 1000;
             align-items: center;
             justify-content: center;
         }
         .modal.show { display: flex; }
         .modal-content {
-            background: white;
+            background: var(--bg-primary);
-            padding: 30px;
+            padding: 0;
-            border-radius: 10px;
+            border: 3px double var(--terminal-green);
+            border-radius: 0;
             max-width: 600px;
             width: 90%;
             max-height: 80vh;
             overflow-y: auto;
+            box-shadow: 0 0 30px rgba(0, 255, 65, 0.3);
+            position: relative;
+        }
+        .modal-content::before {
+            content: '╔';
+            position: absolute;
+            top: -3px;
+            left: -3px;
+            font-size: 1.5rem;
+            color: var(--terminal-green);
+            line-height: 1;
+            z-index: 10;
+        }
+        .modal-content::after {
+            content: '╗';
+            position: absolute;
+            top: -3px;
+            right: -3px;
+            font-size: 1.5rem;
+            color: var(--terminal-green);
+            line-height: 1;
+            z-index: 10;
+        }
+        .modal-content h2 {
+            margin: 0;
+            padding: 20px 30px;
+            background: var(--bg-secondary);
+            color: var(--terminal-amber);
+            border-bottom: 2px solid var(--terminal-green);
+            font-family: var(--font-mono);
+            text-shadow: var(--glow-amber);
+        }
+        .modal-content h2::before {
+            content: '═══ ';
+            color: var(--terminal-green);
+        }
+        .modal-content h2::after {
+            content: ' ═══';
+            color: var(--terminal-green);
         }
-        .modal-content h2 { margin-bottom: 20px; color: #333; }
         input, textarea, select {
             width: 100%;
             padding: 12px;
             margin-bottom: 15px;
-            border: 2px solid #e0e0e0;
+            border: 2px solid var(--terminal-green);
-            border-radius: 5px;
+            border-radius: 0;
             font-size: 1em;
-            font-family: inherit;
+            font-family: var(--font-mono);
+            background: var(--bg-primary);
+            color: var(--terminal-green);
+            box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.5);
         }
         input:focus, textarea:focus, select:focus {
             outline: none;
-            border-color: #667eea;
+            border-color: var(--terminal-amber);
+            box-shadow: var(--glow-amber), inset 0 0 10px rgba(0, 0, 0, 0.5);
+            background: rgba(0, 255, 65, 0.05);
         }
-        textarea { min-height: 100px; font-family: monospace; }
+        textarea { min-height: 100px; }
         .tab-content { display: none; }
         .tab-content.active { display: block; }
         .log-entry {
             padding: 10px;
-            background: #f9f9f9;
+            background: var(--bg-secondary);
-            border-left: 3px solid #667eea;
+            border-left: 3px solid var(--terminal-green);
             margin-bottom: 10px;
-            font-family: monospace;
+            font-family: var(--font-mono);
             font-size: 0.9em;
+            color: var(--terminal-green);
+        }
+        .log-entry::before {
+            content: '> ';
+            color: var(--terminal-amber);
+            font-weight: bold;
         }
         .prompt-box {
-            background: #fef3c7;
+            background: rgba(255, 176, 0, 0.1);
-            border: 2px solid #f59e0b;
+            border: 2px solid var(--terminal-amber);
             padding: 20px;
-            border-radius: 10px;
+            border-radius: 0;
             margin: 20px 0;
         }
-        .prompt-box h3 { color: #92400e; margin-bottom: 15px; }
+        .prompt-box h3 {
+            color: var(--terminal-amber);
+            margin-bottom: 15px;
+            font-family: var(--font-mono);
+            text-shadow: var(--glow-amber);
+        }
+        .prompt-box h3::before {
+            content: '⏳ ';
+        }
+        /* Boot Overlay */
+        .boot-overlay {
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background: var(--bg-primary);
+            z-index: 99999;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            transition: opacity 0.5s;
+        }
+        #boot-text {
+            font-family: var(--font-mono);
+            color: var(--terminal-green);
+            text-shadow: var(--glow-green);
+            font-size: 0.95rem;
+            line-height: 1.6;
+            white-space: pre;
+            padding: 2rem;
+        }
     </style>
 </head>
 <body>
@@ -243,7 +633,8 @@
         <div id="executions" class="tab-content">
             <div class="card">
                 <h3>Execution History</h3>
-                <button onclick="refreshData()">🔄 Refresh</button>
+                <button onclick="refreshData()">[ 🔄 Refresh ]</button>
+                <button onclick="clearCompletedExecutions()" style="margin-left: 10px;">[ 🗑️ Clear Completed ]</button>
                 <div id="executionList"><div class="loading">Loading...</div></div>
             </div>
         </div>
@@ -420,18 +811,18 @@
                     executions.slice(0, 5).map(e => `
                         <div class="execution-item" onclick="viewExecution('${e.id}')">
                             <span class="status ${e.status}">${e.status}</span>
-                            <strong>${e.workflow_name || 'Unknown Workflow'}</strong>
+                            <strong>${e.workflow_name || '[Quick Command]'}</strong>
                             <div class="timestamp">by ${e.started_by} at ${new Date(e.started_at).toLocaleString()}</div>
                         </div>
                     `).join('');
                 document.getElementById('dashExecutions').innerHTML = dashHtml;
-                
+
                 const fullHtml = executions.length === 0 ?
                     '<div class="empty">No executions yet</div>' :
                     executions.map(e => `
                         <div class="execution-item" onclick="viewExecution('${e.id}')">
                             <span class="status ${e.status}">${e.status}</span>
-                            <strong>${e.workflow_name || 'Unknown Workflow'}</strong>
+                            <strong>${e.workflow_name || '[Quick Command]'}</strong>
                             <div class="timestamp">
                                 Started by ${e.started_by} at ${new Date(e.started_at).toLocaleString()}
                                 ${e.completed_at ? ` • Completed at ${new Date(e.completed_at).toLocaleString()}` : ''}
@@ -444,16 +835,42 @@
             }
         }
 
+        async function clearCompletedExecutions() {
+            if (!confirm('Delete all completed and failed executions?')) return;
+
+            try {
+                const response = await fetch('/api/executions');
+                const executions = await response.json();
+
+                const toDelete = executions.filter(e => e.status === 'completed' || e.status === 'failed');
+
+                if (toDelete.length === 0) {
+                    alert('No completed or failed executions to delete');
+                    return;
+                }
+
+                for (const execution of toDelete) {
+                    await fetch(`/api/executions/${execution.id}`, { method: 'DELETE' });
+                }
+
+                alert(`Deleted ${toDelete.length} execution(s)`);
+                refreshData();
+            } catch (error) {
+                console.error('Error clearing executions:', error);
+                alert('Error clearing executions');
+            }
+        }
+
         async function executeWorkflow(workflowId, name) {
             if (!confirm(`Execute workflow: ${name}?`)) return;
-            
+
             try {
                 const response = await fetch('/api/executions', {
                     method: 'POST',
                     headers: { 'Content-Type': 'application/json' },
                     body: JSON.stringify({ workflow_id: workflowId })
                 });
-                
+
                 if (response.ok) {
                     const data = await response.json();
                     alert('Workflow execution started!');
@@ -502,7 +919,9 @@
                 }
                 
                 document.getElementById('executionDetails').innerHTML = html;
-                document.getElementById('viewExecutionModal').classList.add('show');
+                const modal = document.getElementById('viewExecutionModal');
+                modal.dataset.executionId = executionId;
+                modal.classList.add('show');
             } catch (error) {
                 console.error('Error viewing execution:', error);
                 alert('Error loading execution details');
@@ -670,13 +1089,70 @@
         function connectWebSocket() {
             const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
             ws = new WebSocket(`${protocol}//${window.location.host}`);
-            
+
             ws.onmessage = (event) => {
                 const data = JSON.parse(event.data);
                 console.log('WebSocket message:', data);
-                refreshData();
+
+                // Handle specific message types
+                if (data.type === 'command_result') {
+                    // Display command result in real-time
+                    console.log(`Command result received for execution ${data.execution_id}`);
+                    console.log(`Success: ${data.success}`);
+                    console.log(`Output: ${data.stdout}`);
+                    if (data.stderr) {
+                        console.log(`Error: ${data.stderr}`);
+                    }
+
+                    // If viewing execution details, refresh that specific execution
+                    const executionModal = document.getElementById('viewExecutionModal');
+                    if (executionModal && executionModal.classList.contains('show')) {
+                        // Reload execution details to show new logs
+                        const executionId = executionModal.dataset.executionId;
+                        if (executionId === data.execution_id) {
+                            viewExecution(executionId);
+                        }
+                    }
+
+                    // Refresh execution list to show updated status
+                    loadExecutions();
+                }
+
+                if (data.type === 'workflow_result') {
+                    console.log(`Workflow ${data.status} for execution ${data.execution_id}`);
+
+                    // Refresh execution list
+                    loadExecutions();
+
+                    // If viewing this execution, refresh details
+                    const executionModal = document.getElementById('viewExecutionModal');
+                    if (executionModal && executionModal.classList.contains('show')) {
+                        const executionId = executionModal.dataset.executionId;
+                        if (executionId === data.execution_id) {
+                            viewExecution(executionId);
+                        }
+                    }
+                }
+
+                if (data.type === 'worker_update') {
+                    console.log(`Worker ${data.worker_id} status: ${data.status}`);
+                    loadWorkers();
+                }
+
+                if (data.type === 'execution_started' || data.type === 'execution_status') {
+                    loadExecutions();
+                }
+
+                if (data.type === 'workflow_created' || data.type === 'workflow_deleted') {
+                    loadWorkflows();
+                }
+
+                // Generic refresh for other message types
+                if (!['command_result', 'workflow_result', 'worker_update', 'execution_started', 'execution_status', 'workflow_created', 'workflow_deleted'].includes(data.type)) {
+                    refreshData();
+                }
             };
-            
+
             ws.onclose = () => {
                 console.log('WebSocket closed, reconnecting...');
                 setTimeout(connectWebSocket, 5000);
@@ -692,5 +1168,55 @@
             }
         });
     </script>
+
+    <!-- Terminal Boot Sequence -->
+    <div id="boot-sequence" class="boot-overlay" style="display: none;">
+        <pre id="boot-text"></pre>
+    </div>
+    <script>
+    function showBootSequence() {
+        const bootText = document.getElementById('boot-text');
+        const bootOverlay = document.getElementById('boot-sequence');
+        bootOverlay.style.display = 'flex';
+
+        const messages = [
+            '╔═══════════════════════════════════════╗',
+            '║   PULSE ORCHESTRATION TERMINAL v1.0  ║',
+            '║   BOOTING SYSTEM...                  ║',
+            '╚═══════════════════════════════════════╝',
+            '',
+            '[ OK ] Loading kernel modules...',
+            '[ OK ] Initializing workflow engine...',
+            '[ OK ] Mounting worker connections...',
+            '[ OK ] Starting WebSocket services...',
+            '[ OK ] Rendering terminal interface...',
+            '',
+            '> SYSTEM READY ✓',
+            ''
+        ];
+
+        let i = 0;
+        const interval = setInterval(() => {
+            if (i < messages.length) {
+                bootText.textContent += messages[i] + '\n';
+                i++;
+            } else {
+                setTimeout(() => {
+                    bootOverlay.style.opacity = '0';
+                    setTimeout(() => {
+                        bootOverlay.style.display = 'none';
+                    }, 500);
+                }, 500);
+                clearInterval(interval);
+            }
+        }, 80);
+    }
+
+    // Run on first visit only (per session)
+    if (!sessionStorage.getItem('booted')) {
+        showBootSequence();
+        sessionStorage.setItem('booted', 'true');
+    }
+    </script>
 </body>
 </html>

server.js

@@ -46,6 +46,8 @@ async function initDatabase() {
       )
     `);
 
+    // Database schema is managed manually - migrations removed after direct database fixes
+
     await connection.query(`
       CREATE TABLE IF NOT EXISTS workers (
         id VARCHAR(36) PRIMARY KEY,
@@ -75,13 +77,12 @@ async function initDatabase() {
     await connection.query(`
       CREATE TABLE IF NOT EXISTS executions (
         id VARCHAR(36) PRIMARY KEY,
-        workflow_id VARCHAR(36) NOT NULL,
+        workflow_id VARCHAR(36) NULL,
         status VARCHAR(50) NOT NULL,
         started_by VARCHAR(255),
         started_at TIMESTAMP NULL,
         completed_at TIMESTAMP NULL,
         logs JSON,
-        FOREIGN KEY (workflow_id) REFERENCES workflows(id) ON DELETE CASCADE,
         INDEX idx_workflow (workflow_id),
         INDEX idx_status (status),
         INDEX idx_started (started_at)
@@ -99,9 +100,147 @@ async function initDatabase() {
 
 // WebSocket connections
 const clients = new Set();
+const workers = new Map(); // Map worker_id -> WebSocket connection
+
 wss.on('connection', (ws) => {
   clients.add(ws);
-  ws.on('close', () => clients.delete(ws));
+
+  // Handle incoming messages from workers
+  ws.on('message', async (data) => {
+    try {
+      const message = JSON.parse(data.toString());
+      console.log('WebSocket message received:', message.type);
+
+      if (message.type === 'command_result') {
+        // Handle command result from worker
+        const { execution_id, worker_id, success, stdout, stderr, duration, timestamp } = message;
+
+        // Add result to execution logs
+        await addExecutionLog(execution_id, {
+          step: 'command_execution',
+          action: 'command_result',
+          worker_id: worker_id,
+          success: success,
+          stdout: stdout,
+          stderr: stderr,
+          duration: duration,
+          timestamp: timestamp || new Date().toISOString()
+        });
+
+        // Update execution status to completed or failed
+        const finalStatus = success ? 'completed' : 'failed';
+        await updateExecutionStatus(execution_id, finalStatus);
+
+        // Broadcast result to all connected clients
+        broadcast({
+          type: 'command_result',
+          execution_id: execution_id,
+          worker_id: worker_id,
+          success: success,
+          stdout: stdout,
+          stderr: stderr
+        });
+
+        console.log(`Command result received for execution ${execution_id}: ${finalStatus}`);
+      }
+
+      if (message.type === 'workflow_result') {
+        // Handle workflow result from worker
+        const { execution_id, worker_id, success, message: resultMessage, timestamp } = message;
+
+        // Add final result to logs
+        await addExecutionLog(execution_id, {
+          step: 'workflow_completion',
+          action: 'workflow_result',
+          worker_id: worker_id,
+          success: success,
+          message: resultMessage,
+          timestamp: timestamp || new Date().toISOString()
+        });
+
+        // Update execution status
+        const finalStatus = success ? 'completed' : 'failed';
+        await updateExecutionStatus(execution_id, finalStatus);
+
+        // Broadcast completion to all clients
+        broadcast({
+          type: 'workflow_result',
+          execution_id: execution_id,
+          status: finalStatus,
+          success: success,
+          message: resultMessage
+        });
+
+        console.log(`Workflow result received for execution ${execution_id}: ${finalStatus}`);
+      }
+
+      if (message.type === 'worker_connect') {
+        // Handle worker connection
+        const { worker_id, worker_name } = message;
+        console.log(`Worker connected: ${worker_name} (${worker_id})`);
+
+        // Find the database worker ID by name
+        const [dbWorkers] = await pool.query(
+          'SELECT id FROM workers WHERE name = ?',
+          [worker_name]
+        );
+
+        if (dbWorkers.length > 0) {
+          const dbWorkerId = dbWorkers[0].id;
+
+          // Store worker WebSocket connection using BOTH IDs
+          workers.set(worker_id, ws);        // Runtime ID
+          workers.set(dbWorkerId, ws);       // Database ID
+
+          // Store mapping for cleanup
+          ws.workerId = worker_id;
+          ws.dbWorkerId = dbWorkerId;
+
+          console.log(`Mapped worker: runtime_id=${worker_id}, db_id=${dbWorkerId}, name=${worker_name}`);
+
+          // Update worker status to online
+          await pool.query(
+            `UPDATE workers SET status='online', last_heartbeat=NOW() WHERE id=?`,
+            [dbWorkerId]
+          );
+
+          // Broadcast worker status update with database ID
+          broadcast({
+            type: 'worker_update',
+            worker_id: dbWorkerId,
+            status: 'online'
+          });
+        } else {
+          console.log(`Worker ${worker_name} not found in database, will be created on heartbeat`);
+        }
+      }
+
+      if (message.type === 'pong') {
+        // Handle worker pong response
+        const { worker_id } = message;
+        await pool.query(
+          `UPDATE workers SET last_heartbeat=NOW() WHERE id=?`,
+          [worker_id]
+        );
+      }
+
+    } catch (error) {
+      console.error('WebSocket message error:', error);
+    }
+  });
+
+  ws.on('close', () => {
+    clients.delete(ws);
+    // Remove worker from workers map when disconnected (both runtime and db IDs)
+    if (ws.workerId) {
+      workers.delete(ws.workerId);
+      console.log(`Worker ${ws.workerId} (runtime ID) disconnected`);
+    }
+    if (ws.dbWorkerId) {
+      workers.delete(ws.dbWorkerId);
+      console.log(`Worker ${ws.dbWorkerId} (database ID) disconnected`);
+    }
+  });
 });
 
 // Broadcast to all connected clients
@@ -279,13 +418,11 @@ app.get('/api/executions', authenticateSSO, async (req, res) => {
   }
 });
 
-app.get('/api/executions/:id', authenticateSSO, async (req, res) => {
+app.delete('/api/executions/:id', authenticateSSO, async (req, res) => {
   try {
-    const [rows] = await pool.query('SELECT * FROM executions WHERE id = ?', [req.params.id]);
+    await pool.query('DELETE FROM executions WHERE id = ?', [req.params.id]);
-    if (rows.length === 0) {
+    broadcast({ type: 'execution_deleted', execution_id: req.params.id });
-      return res.status(404).json({ error: 'Not found' });
+    res.json({ success: true });
-    }
-    res.json(rows[0]);
   } catch (error) {
     res.status(500).json({ error: error.message });
   }
@@ -666,22 +803,38 @@ app.post('/api/workers/:id/command', authenticateSSO, async (req, res) => {
   try {
     const { command } = req.body;
     const executionId = generateUUID();
-    
+    const workerId = req.params.id;
-    // Send command via WebSocket
+
+    // Create execution record in database
+    await pool.query(
+      'INSERT INTO executions (id, workflow_id, status, started_by, started_at, logs) VALUES (?, ?, ?, ?, NOW(), ?)',
+      [executionId, null, 'running', req.user.username, JSON.stringify([{
+        step: 'quick_command',
+        action: 'command_sent',
+        worker_id: workerId,
+        command: command,
+        timestamp: new Date().toISOString()
+      }])]
+    );
+
+    // Send command via WebSocket to specific worker
     const commandMessage = {
       type: 'execute_command',
       execution_id: executionId,
       command: command,
-      worker_id: req.params.id,
+      worker_id: workerId,
       timeout: 60000
     };
 
-    clients.forEach(client => {
+    const workerWs = workers.get(workerId);
-      if (client.readyState === WebSocket.OPEN) {
+    if (!workerWs || workerWs.readyState !== WebSocket.OPEN) {
-        client.send(JSON.stringify(commandMessage));
+      return res.status(400).json({ error: 'Worker not connected' });
-      }
+    }
-    });
 
+    workerWs.send(JSON.stringify(commandMessage));
+    console.log(`Command sent to worker ${workerId}: ${command}`);
+
+    broadcast({ type: 'execution_started', execution_id: executionId, workflow_id: null });
     res.json({ success: true, execution_id: executionId });
   } catch (error) {
     res.status(500).json({ error: error.message });