From 20cff59cee4071cdd5c3232d68ea8ccca94123f8 Mon Sep 17 00:00:00 2001
From: Jared Vititoe <jjvititoe1@gmail.com>
Date: Wed, 7 Jan 2026 20:12:16 -0500
Subject: [PATCH] updates aesthetic

---
 public/index.html | 576 ++++++++++++++++++++++++++++++++++++++++------
 1 file changed, 508 insertions(+), 68 deletions(-)

diff --git a/public/index.html b/public/index.html
index 9042b29..8eabec5 100644
--- 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>
@@ -692,5 +1082,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>
\ No newline at end of file