Add migration to update users table schema

Changes: - Add display_name, email, and groups columns to existing users table - Handle MariaDB lack of IF NOT EXISTS in ALTER TABLE - Gracefully skip columns that already exist - Fixes 500 error when authenticating users Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
Allow NULL workflow_id in executions table for quick commands
2026-01-07 20:28:47 -05:00 · 2026-01-07 20:27:02 -05:00 · 2026-01-07 20:24:11 -05:00 · 2026-01-07 20:20:18 -05:00 · 2026-01-07 20:12:16 -05:00 · 2026-01-07 19:57:16 -05:00
3 changed files with 2100 additions and 79 deletions
--- a/Claude.md
+++ b/Claude.md
--- a/public/index.html
+++ b/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;
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            font-family: var(--font-mono);
+            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;
-            padding: 30px;
-            border-radius: 10px;
-            box-shadow: 0 10px 30px rgba(0,0,0,0.2);
+            background: var(--bg-secondary);
+            padding: 20px 30px;
+            border: 2px solid var(--terminal-green);
+            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 .email { color: #666; font-size: 0.9em; }
+        .user-info .name {
+            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;
-            color: white;
+            background: transparent;
+            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;
-            border-radius: 10px;
+            background: var(--bg-secondary);
+            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;
-            border-radius: 5px;
+            color: var(--terminal-green);
+            font-family: var(--font-mono);
            transition: all 0.3s;
        }
        .tab.active {
-            background: #667eea;
-            color: white;
+            background: rgba(0, 255, 65, 0.2);
+            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;
-            box-shadow: 0 5px 15px rgba(0,0,0,0.1);
+            border: 2px solid var(--terminal-green);
+            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.offline { background: #ef4444; color: white; }
-        .status.running { background: #3b82f6; color: white; }
-        .status.completed { background: #10b981; color: white; }
-        .status.failed { background: #ef4444; color: white; }
-        .status.waiting { background: #f59e0b; color: white; }
+        .status.online {
+            border-color: var(--status-online);
+            color: var(--status-online);
+            text-shadow: 0 0 5px var(--status-online), 0 0 10px var(--status-online);
+        }
+        .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;
-            color: white;
-            border: none;
+            background: transparent;
+            color: var(--terminal-green);
+            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:hover { background: #dc2626; }
+        button.danger {
+            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-radius: 5px;
+            border: 2px solid var(--terminal-green);
+            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;
-            padding: 30px;
-            border-radius: 10px;
+            background: var(--bg-primary);
+            padding: 0;
+            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-radius: 5px;
+            border: 2px solid var(--terminal-green);
+            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;
-            border-left: 3px solid #667eea;
+            background: var(--bg-secondary);
+            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;
-            border: 2px solid #f59e0b;
+            background: rgba(255, 176, 0, 0.1);
+            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>
@@ -420,7 +810,7 @@
                    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('');
@@ -431,7 +821,7 @@
                    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()}` : ''}
@@ -502,7 +892,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');
@@ -674,7 +1066,64 @@
            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 = () => {
@@ -692,5 +1141,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>
--- a/server.js
+++ b/server.js
@@ -46,6 +46,29 @@ async function initDatabase() {
      )
    `);

+    // Migrate existing users table to add missing columns
+    try {
+      await connection.query(`
+        ALTER TABLE users
+        ADD COLUMN IF NOT EXISTS display_name VARCHAR(255) AFTER username,
+        ADD COLUMN IF NOT EXISTS email VARCHAR(255) AFTER display_name,
+        ADD COLUMN IF NOT EXISTS groups TEXT AFTER email
+      `);
+      console.log('Users table migrated successfully');
+    } catch (error) {
+      // MariaDB doesn't support IF NOT EXISTS in ALTER TABLE, try individual columns
+      try {
+        await connection.query(`ALTER TABLE users ADD COLUMN display_name VARCHAR(255) AFTER username`);
+      } catch (e) { /* Column exists */ }
+      try {
+        await connection.query(`ALTER TABLE users ADD COLUMN email VARCHAR(255) AFTER display_name`);
+      } catch (e) { /* Column exists */ }
+      try {
+        await connection.query(`ALTER TABLE users ADD COLUMN groups TEXT AFTER email`);
+      } catch (e) { /* Column exists */ }
+      console.log('Users table migration completed');
+    }
+
    await connection.query(`
      CREATE TABLE IF NOT EXISTS workers (
        id VARCHAR(36) PRIMARY KEY,
@@ -75,19 +98,33 @@ 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)
      )
    `);

+    // Migrate existing executions table to allow NULL workflow_id
+    try {
+      await connection.query(`
+        ALTER TABLE executions
+        MODIFY workflow_id VARCHAR(36) NULL,
+        DROP FOREIGN KEY executions_ibfk_1
+      `);
+      console.log('Executions table migrated to allow NULL workflow_id');
+    } catch (error) {
+      // Ignore error if foreign key doesn't exist or already modified
+      if (!error.message.includes('check that column/key exists')) {
+        console.log('Migration note:', error.message);
+      }
+    }
+
    console.log('Database tables initialized successfully');
  } catch (error) {
    console.error('Database initialization error:', error);
@@ -101,6 +138,105 @@ async function initDatabase() {
 const clients = new Set();
 wss.on('connection', (ws) => {
  clients.add(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()
+        });
+
+        // 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}`);
+      }
+
+      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})`);
+
+        // Update worker status to online
+        await pool.query(
+          `UPDATE workers SET status='online', last_heartbeat=NOW() WHERE id=?`,
+          [worker_id]
+        );
+
+        // Broadcast worker status update
+        broadcast({
+          type: 'worker_update',
+          worker_id: worker_id,
+          status: 'online'
+        });
+      }
+
+      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));
 });

@@ -666,13 +802,26 @@ app.post('/api/workers/:id/command', authenticateSSO, async (req, res) => {
  try {
    const { command } = req.body;
    const executionId = generateUUID();
+    const workerId = req.params.id;
+
+    // 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
    const commandMessage = {
      type: 'execute_command',
      execution_id: executionId,
      command: command,
-      worker_id: req.params.id,
+      worker_id: workerId,
      timeout: 60000
    };

@@ -682,6 +831,7 @@ app.post('/api/workers/:id/command', authenticateSSO, async (req, res) => {
      }
    });

+    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 });
Author	SHA1	Message	Date
Jared Vititoe	df0184facf	Add migration to update users table schema Changes: - Add display_name, email, and groups columns to existing users table - Handle MariaDB lack of IF NOT EXISTS in ALTER TABLE - Gracefully skip columns that already exist - Fixes 500 error when authenticating users Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>	2026-01-07 20:28:47 -05:00
Jared Vititoe	a8be111e04	Allow NULL workflow_id in executions table for quick commands Changes: - Modified executions table schema to allow NULL workflow_id - Removed foreign key constraint that prevented NULL values - Added migration to update existing table structure - Quick commands can now be stored without a workflow reference Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>	2026-01-07 20:27:02 -05:00
Jared Vititoe	b3806545bd	Fix quick command executions not appearing in execution tab Changes: - Create execution record in database when quick command is sent - Store initial log entry with command details - Broadcast execution_started event to update UI - Display quick commands as "[Quick Command]" in execution list - Fix worker communication to properly track all executions Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>	2026-01-07 20:24:11 -05:00
Jared Vititoe	2767087e27	Updated websocket handler	2026-01-07 20:20:18 -05:00
Jared Vititoe	a1cf8ac90b	updates aesthetic	2026-01-07 20:12:16 -05:00
Jared Vititoe	9e842624e1	Claude md file	2026-01-07 19:57:16 -05:00