From eca5cb45b1d068de645cf7f866f24ca4403036c3 Mon Sep 17 00:00:00 2001
From: Jared Vititoe <jjvititoe1@gmail.com>
Date: Tue, 8 Sep 2026 22:17:15 -0400
Subject: [PATCH] =?UTF-8?q?feat(ui):=20TDS=20migration=20stage=203=20?=
 =?UTF-8?q?=E2=80=94=20integration=20fixes,=20legacy=20removal,=20docs?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Fix design-system class names that do not exist in base.css (.lt-alert--error,
  .lt-form-hint); add shared .lt-modal-lg, .lt-field-error and .is-invalid rules
- Remove public/index.html and the public/base.js symlink
- package.json: start script, correct main
- README: vendored design system, Web UI section, new env vars, read-only dev mode

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01HamVMDrA8RqhyxmUHgiqRp
---
 README.md                          |   76 +-
 lib/render.js                      |    2 +-
 package.json                       |    3 +-
 public/assets/app.css              |   35 +-
 public/assets/pages/dashboard.js   |   15 +-
 public/assets/pages/executions.css |   11 +-
 public/assets/pages/workflows.css  |   13 +-
 public/assets/pages/workflows.js   |    4 +-
 public/base.js                     |    1 -
 public/index.html                  | 3162 ----------------------------
 views/pages/quick.ejs              |    2 +-
 11 files changed, 129 insertions(+), 3195 deletions(-)
 delete mode 120000 public/base.js
 delete mode 100644 public/index.html

diff --git a/README.md b/README.md
index 218b597..27d4c1f 100644
--- a/README.md
+++ b/README.md
@@ -12,7 +12,23 @@ A distributed workflow orchestration platform for managing and executing complex
 
 ## Styling & Layout
 
-PULSE uses the **LotusGuild Terminal Design System**. For all styling, component, and layout documentation see:
+PULSE uses the **LotusGuild Terminal Design System**. The design system is **vendored** into this
+repo at `public/web_template/` (`base.css`, `base.js`, `VERSION`) and served from `/web_template/*`,
+so the app has no runtime dependency on a sibling checkout. `public/web_template/VERSION` records
+the design-system version, upstream short SHA, and sync date; asset URLs are cache-busted with it.
+
+Update the vendored copy with:
+
+```bash
+scripts/sync-web-template.sh <path-to-web_template-checkout>
+```
+
+The script copies `base.css`/`base.js` as regular files (never symlinks) and rewrites `VERSION`.
+Never hand-edit `public/web_template/` — it is excluded from ESLint and overwritten on every sync.
+Pulse-local gaps in the design system live in `public/assets/app.css` (currently `.lt-modal-lg`,
+`.lt-field-error`, `.is-invalid`) and are candidates for upstreaming.
+
+Reference documentation:
 
 - [`web_template/README.md`](https://code.lotusguild.org/LotusGuild/web_template/src/branch/main/README.md) — full component reference, CSS variables, JS API
 - [`web_template/base.css`](https://code.lotusguild.org/LotusGuild/web_template/src/branch/main/base.css) — unified CSS (`.lt-*` classes)
@@ -20,9 +36,39 @@ PULSE uses the **LotusGuild Terminal Design System**. For all styling, component
 - [`web_template/aesthetic_diff.md`](https://code.lotusguild.org/LotusGuild/web_template/src/branch/main/aesthetic_diff.md) — cross-app divergence analysis and convergence guide
 - [`web_template/node/middleware.js`](https://code.lotusguild.org/LotusGuild/web_template/src/branch/main/node/middleware.js) — Express auth, CSRF, CSP nonce middleware
 
-**Pending convergence items (see aesthetic_diff.md):**
-- Extract inline `<style>` from `public/index.html` into `public/style.css` and extend `base.css`
-- Use `lt.autoRefresh.start(refreshData, 30000)` instead of raw `setInterval`
+## Web UI
+
+The UI is server-rendered with EJS. Every route renders `views/pages/<page>.ejs` into the shared
+chrome in `views/layout.ejs` (nav, header, WebSocket status dot, theme toggle, command palette).
+
+| Route | Page | View | Page module |
+|---|---|---|---|
+| `/` | Dashboard | `views/pages/dashboard.ejs` | `public/assets/pages/dashboard.js` |
+| `/workers` | Workers | `views/pages/workers.ejs` | `public/assets/pages/workers.js` |
+| `/workflows` | Workflows | `views/pages/workflows.ejs` | `public/assets/pages/workflows.js` |
+| `/executions` | Executions | `views/pages/executions.ejs` | `public/assets/pages/executions.js` |
+| `/quick` | Quick Command | `views/pages/quick.ejs` | `public/assets/pages/quick.js` |
+| `/scheduler` | Scheduler | `views/pages/scheduler.ejs` | `public/assets/pages/scheduler.js` |
+
+Scripts load in a fixed order: `/web_template/base.js` → `/assets/app.js` → `/assets/pages/<page>.js`.
+`app.js` owns the shell (`window.Pulse`: action registry, event bus, `Pulse.confirm`, formatters,
+WebSocket, the single 30 s auto-refresh) and each page module registers itself with:
+
+```js
+Pulse.registerPage({ name, init(), refresh(), onEvent(type, data) /* return true if handled */ });
+```
+
+Page modules never attach their own listeners for UI actions — they register handlers under their
+own action prefix (`dash:`, `wk:`, `wf:`, `ex:`, `qc:`, `sc:`) and the markup wires them up with
+`data-action` / `data-change-action` / `data-input-action` / `data-submit-action` attributes that
+`app.js` delegates. DOM ids are likewise prefixed per page. All dynamic strings go through
+`Pulse.esc`, and destructive actions use the themed `Pulse.confirm` (no native `confirm()`/`alert()`).
+
+**Content Security Policy:** pages are served under a strict nonce-based CSP (helmet), including
+`script-src-attr 'none'`. There are **no inline `<script>` blocks without a nonce and no inline
+event handler attributes** anywhere in `views/` or `public/assets/`; anything added there must
+follow the same rule or the browser will refuse to run it. Set `PULSE_CSP_REPORT_ONLY=1` to switch
+the policy to report-only (violations are reported to `/csp-report` and logged) while debugging.
 
 ## Overview
 
@@ -311,8 +357,30 @@ DB_USER=pulse_user                  # Database user
 DB_PASSWORD=<password>              # Database password
 WORKER_API_KEY=<api-key>           # Worker authentication key
 EXECUTION_RETENTION_DAYS=30         # Auto-cleanup retention (default: 30)
+
+# Web UI (all optional)
+APP_NAME=PULSE                      # Header/boot/title app name (default: PULSE)
+APP_SUBTITLE=<text>                 # Header subtitle (default: "Worker Orchestration // LotusGuild")
+PULSE_CSP_REPORT_ONLY=1             # Serve the CSP report-only instead of enforcing it
+PULSE_DEV_READONLY=1                # Local dev guard: disable all background writes (see below)
+DISABLE_BACKGROUND_JOBS=1           # Alias for PULSE_DEV_READONLY
 ```
 
+### Local development against a real database
+
+Running a local instance against the production MariaDB is safe only with the read-only guard on:
+
+```bash
+PULSE_DEV_READONLY=1 PORT=8099 HOST=127.0.0.1 npm start
+```
+
+`PULSE_DEV_READONLY=1` (alias `DISABLE_BACKGROUND_JOBS=1`) disables every background writer, so a
+dev instance can never mutate shared state behind your back: stale-execution recovery at startup,
+the old-execution cleanup job (startup call and interval), the scheduled-command processor
+(startup call and interval), and the stale-worker offline sweep. Each skip is logged at startup
+alongside a `PULSE_DEV_READONLY IS ON` banner. The guard covers background jobs only — API routes
+still write, so avoid destructive actions in the UI when you are pointed at production data.
+
 **Worker (.env):**
 ```bash
 WORKER_NAME=pulse-worker-01         # Unique worker name
diff --git a/lib/render.js b/lib/render.js
index dfb97d1..b10f9c3 100644
--- a/lib/render.js
+++ b/lib/render.js
@@ -84,7 +84,7 @@ function renderError(req, res, status, title, message) {
 <body>
 <main class="lt-main lt-container">
   <div class="lt-frame">
-    <div class="lt-alert lt-alert-danger">
+    <div class="lt-alert lt-alert--error">
       <strong>${esc(status)} — ${esc(title)}</strong>
       <p>${esc(message)}</p>
     </div>
diff --git a/package.json b/package.json
index b9380d1..dcb5763 100644
--- a/package.json
+++ b/package.json
@@ -1,8 +1,9 @@
 {
   "name": "pulse-server",
   "version": "1.0.0",
-  "main": "index.js",
+  "main": "server.js",
   "scripts": {
+    "start": "node server.js",
     "test": "jest --coverage"
   },
   "keywords": [],
diff --git a/public/assets/app.css b/public/assets/app.css
index ef5b0b9..4d04354 100644
--- a/public/assets/app.css
+++ b/public/assets/app.css
@@ -131,7 +131,40 @@
 .pulse-scroll-x { overflow-x: auto; -webkit-overflow-scrolling: touch; }
 
 /* ---------------------------------------------------------------------
-   7. Light theme overrides for the additions above
+   7. Shared component gap-fillers (base.css does not ship these)
+   ---------------------------------------------------------------------
+   `.lt-modal-lg` — base.css ships .lt-modal-xs/.lt-modal-sm only, but
+   several Pulse pages need a wide modal (JSON editors, log viewers,
+   side-by-side compare). Sized the same way base.css sizes its own
+   modifiers, and re-capped at the two breakpoints base.css caps
+   `.lt-modal` at, because this selector is more specific than those.
+
+   `.lt-field-error` / `.is-invalid` — base.css references a field-error
+   hook but ships no visual style for it.
+   Both are candidates for upstreaming into base.css.
+   --------------------------------------------------------------------- */
+.lt-modal.lt-modal-lg {
+  width: min(900px, 95vw);
+  max-width: 900px;
+}
+@media (max-width: 767px) { .lt-modal.lt-modal-lg { max-width: 96vw; } }
+@media (max-width: 479px) { .lt-modal.lt-modal-lg { max-width: 100vw; } }
+
+.lt-field-error {
+  color: var(--accent-red);
+  font-size: 0.72rem;
+  letter-spacing: 0.02em;
+  margin-top: 4px;
+}
+
+.lt-input.is-invalid,
+.lt-textarea.is-invalid,
+.lt-select.is-invalid {
+  border-color: var(--accent-red);
+}
+
+/* ---------------------------------------------------------------------
+   8. Light theme overrides for the additions above
    --------------------------------------------------------------------- */
 html[data-theme="light"] #pulse-last-refreshed { color: var(--text-muted); }
 
diff --git a/public/assets/pages/dashboard.js b/public/assets/pages/dashboard.js
index c345c7f..17ed753 100644
--- a/public/assets/pages/dashboard.js
+++ b/public/assets/pages/dashboard.js
@@ -139,12 +139,23 @@
   /* -------------------------------------------------------------------
      Data loading
      ------------------------------------------------------------------- */
+  /* Toast a load failure at most once per outage, so the 30 s auto-refresh
+     does not stack a toast every cycle while the API is down. */
+  let _loadFailed = false;
+  function reportLoadError(what, e) {
+    console.error('[Pulse:dashboard] failed to load ' + what, e);
+    if (_loadFailed) return;
+    _loadFailed = true;
+    if (Pulse.toast) Pulse.toast.error((e && e.message) || ('Failed to load ' + what));
+  }
+
   async function loadWorkers() {
     try {
       _workers = await Pulse.api.get('/api/workers') || [];
+      _loadFailed = false;
     } catch (e) {
       _workers = [];
-      console.error('[Pulse:dashboard] failed to load workers', e);
+      reportLoadError('workers', e);
     }
     renderWorkers(_workers);
     return _workers;
@@ -156,7 +167,7 @@
       _executions = (data && data.executions) || [];
     } catch (e) {
       _executions = [];
-      console.error('[Pulse:dashboard] failed to load executions', e);
+      reportLoadError('executions', e);
     }
     renderExecutions(_executions);
     return _executions;
diff --git a/public/assets/pages/executions.css b/public/assets/pages/executions.css
index 2e73bfd..d660103 100644
--- a/public/assets/pages/executions.css
+++ b/public/assets/pages/executions.css
@@ -8,15 +8,10 @@
    ===================================================================== */
 
 /* ---------------------------------------------------------------------
-   1. Modal sizing — base.css has .lt-modal-sm but no .lt-modal-lg, so the
-   large variant is scoped to this page's two modals to avoid colliding
-   with any other page that defines the same class.
+   1. Modal sizing — width comes from the shared `.lt-modal-lg` rule in
+   /assets/app.css; only the scroll behaviour of these two modals is
+   page-specific.
    --------------------------------------------------------------------- */
-#ex-detail-modal .lt-modal,
-#ex-compare-modal .lt-modal {
-  max-width: min(1100px, 94vw);
-  width: min(1100px, 94vw);
-}
 #ex-detail-modal .lt-modal-body,
 #ex-compare-modal .lt-modal-body {
   max-height: 72vh;
diff --git a/public/assets/pages/workflows.css b/public/assets/pages/workflows.css
index 1ddc689..e5d3c18 100644
--- a/public/assets/pages/workflows.css
+++ b/public/assets/pages/workflows.css
@@ -23,15 +23,4 @@
   color: var(--accent-red);
 }
 
-/* base.css defines .lt-field-error as a hook (see base.js field validation)
-   but ships no visual style for it — Workflows renders it directly for
-   JSON-parse / server-side errors, so give it one here. */
-.lt-field-error {
-  color: var(--accent-red);
-  font-size: 0.72rem;
-  letter-spacing: 0.02em;
-}
-
-.wf-input-invalid {
-  border-color: var(--accent-red) !important;
-}
+/* `.lt-field-error` and `.is-invalid` live in /assets/app.css (shared). */
diff --git a/public/assets/pages/workflows.js b/public/assets/pages/workflows.js
index 11cf75e..0cfcfd3 100644
--- a/public/assets/pages/workflows.js
+++ b/public/assets/pages/workflows.js
@@ -290,11 +290,11 @@
       var el = document.getElementById('wf-run-param-' + p.name);
       var val = el ? el.value.trim() : '';
       if (p.required && !val) {
-        el.classList.add('wf-input-invalid');
+        el.classList.add('is-invalid');
         el.focus();
         return;
       }
-      el && el.classList.remove('wf-input-invalid');
+      el && el.classList.remove('is-invalid');
       if (val) params[p.name] = val;
     }
 
diff --git a/public/base.js b/public/base.js
deleted file mode 120000
index 1d09a6a..0000000
--- a/public/base.js
+++ /dev/null
@@ -1 +0,0 @@
-/root/code/web_template/base.js
\ No newline at end of file
diff --git a/public/index.html b/public/index.html
deleted file mode 100644
index 4c2ad2a..0000000
--- a/public/index.html
+++ /dev/null
@@ -1,3162 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <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;
-            --terminal-red: #ff4444;
-            --bg-terminal: #001a00;
-            --bg-terminal-border: #003300;
-            --text-primary: #00ff41;
-            --text-secondary: #00cc33;
-            --text-muted: #00bb33;
-
-            /* 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;
-            --glow-red: 0 0 5px #ff4444, 0 0 10px #ff4444;
-        }
-
-        * { margin: 0; padding: 0; box-sizing: border-box; }
-
-        body {
-            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;
-            will-change: transform;
-        }
-
-        @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: 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);
-        }
-        .user-info { text-align: right; }
-        .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: transparent;
-            color: var(--terminal-amber);
-            padding: 4px 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: var(--bg-secondary);
-            border: 2px solid var(--terminal-green);
-            border-radius: 0;
-            padding: 10px;
-            margin-bottom: 20px;
-            display: flex;
-            gap: 10px;
-        }
-        .tab {
-            padding: 12px 24px;
-            background: transparent;
-            border: 2px solid var(--terminal-green);
-            border-radius: 0;
-            cursor: pointer;
-            font-size: 1em;
-            font-weight: 600;
-            color: var(--terminal-green);
-            font-family: var(--font-mono);
-            transition: all 0.3s;
-        }
-        .tab.active {
-            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);
-        }
-        .grid {
-            display: grid;
-            grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
-            gap: 20px;
-            margin-bottom: 30px;
-        }
-        .card {
-            background: var(--bg-secondary);
-            padding: 25px;
-            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);
-        }
-        .status {
-            display: inline-block;
-            padding: 5px 15px;
-            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 {
-            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 {
-            display: inline-flex;
-            align-items: center;
-            justify-content: center;
-            gap: 0;
-            background: transparent;
-            color: var(--terminal-green);
-            border: 2px solid var(--terminal-green);
-            border-radius: 0;
-            padding: 12px 24px;
-            cursor: pointer;
-            font-size: 1em;
-            font-weight: 600;
-            font-family: var(--font-mono);
-            text-transform: uppercase;
-            transition: all 0.3s ease;
-            margin-right: 10px;
-            margin-bottom: 10px;
-            white-space: nowrap;
-        }
-        button::before { content: '[ '; flex-shrink: 0; }
-        button::after { content: ' ]'; flex-shrink: 0; }
-        /* Suppress bracket pseudo-elements for tab/nav buttons and inline-styled sub-tabs */
-        button.tab::before, button.tab::after,
-        button[style*="border:none"]::before, button[style*="border:none"]::after,
-        button[style*="border: none"]::before, button[style*="border: none"]::after,
-        button[style*="flex:0"]::before, button[style*="flex:0"]::after,
-        button[style*="flex: 0"]::before, button[style*="flex: 0"]::after,
-        button[style*="flex:1"]::before, button[style*="flex:1"]::after,
-        button[style*="flex: 1"]::before, button[style*="flex: 1"]::after { content: none; }
-        button:hover {
-            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);
-        }
-        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: 2px solid var(--terminal-green);
-            border-radius: 0;
-            margin-bottom: 10px;
-            background: var(--bg-secondary);
-            font-family: var(--font-mono);
-            transition: all 0.3s;
-        }
-        .worker-item:hover, .execution-item:hover, .workflow-item:hover {
-            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);
-        }
-        .modal {
-            display: none;
-            position: fixed;
-            top: 0;
-            left: 0;
-            width: 100%;
-            height: 100%;
-            background: rgba(0, 0, 0, 0.85);
-            z-index: 1000;
-            align-items: center;
-            justify-content: center;
-        }
-        .modal.show { display: flex; }
-        .modal-content {
-            background: var(--bg-primary);
-            padding: 0;
-            border: 3px double var(--terminal-green);
-            border-radius: 0;
-            max-width: min(1100px, 96vw);
-            width: 96vw;
-            max-height: 90vh;
-            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);
-        }
-        input, textarea, select {
-            width: 100%;
-            padding: 12px;
-            margin-bottom: 15px;
-            border: 2px solid var(--terminal-green);
-            border-radius: 0;
-            font-size: 1em;
-            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: 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; }
-        .tab-content { display: none; }
-        .tab-content.active { display: block; }
-        .log-entry {
-            padding: 10px;
-            background: var(--bg-secondary);
-            border-left: 3px solid var(--terminal-green);
-            margin-bottom: 10px;
-            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: rgba(255, 176, 0, 0.1);
-            border: 2px solid var(--terminal-amber);
-            padding: 20px;
-            border-radius: 0;
-            margin: 20px 0;
-        }
-        .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: '⏳ ';
-        }
-        .prompt-box p {
-            color: var(--terminal-green);
-            font-family: var(--font-mono);
-            margin-bottom: 14px;
-        }
-        .prompt-output {
-            background: rgba(0, 0, 0, 0.4);
-            border: 1px solid rgba(0, 255, 65, 0.25);
-            color: var(--terminal-green);
-            font-family: var(--font-mono);
-            font-size: 0.78em;
-            padding: 10px;
-            max-height: 280px;
-            overflow-y: auto;
-            white-space: pre-wrap;
-            word-break: break-all;
-            margin-bottom: 14px;
-        }
-        .prompt-opt-btn {
-            padding: 7px 16px;
-            margin: 4px 4px 4px 0;
-            background: rgba(0, 255, 255, 0.08);
-            border: 1px solid var(--terminal-cyan);
-            color: var(--terminal-cyan);
-            font-family: var(--font-mono);
-            font-size: 0.88em;
-            cursor: pointer;
-            transition: background 0.2s;
-        }
-        .prompt-opt-btn:hover {
-            background: rgba(0, 255, 255, 0.2);
-            box-shadow: 0 0 8px rgba(0, 255, 255, 0.3);
-        }
-        .prompt-opt-btn.answered {
-            opacity: 0.45;
-            cursor: default;
-            background: transparent;
-        }
-        /* 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;
-        }
-
-        /* Formatted Log Entry Styles */
-        .log-entry {
-            background: #000;
-            border: 1px solid var(--terminal-green);
-            border-left: 3px solid var(--terminal-green);
-            padding: 12px;
-            margin-bottom: 12px;
-            font-family: var(--font-mono);
-            font-size: 0.9em;
-        }
-
-        .log-entry.success {
-            border-left-color: var(--terminal-green);
-        }
-
-        .log-entry.failed {
-            border-left-color: var(--terminal-red);
-        }
-
-        .log-timestamp {
-            color: var(--terminal-amber);
-            font-size: 0.85em;
-            margin-bottom: 6px;
-        }
-
-        .log-title {
-            color: var(--terminal-green);
-            font-weight: bold;
-            text-shadow: var(--glow-green);
-            margin-bottom: 8px;
-            font-size: 1.1em;
-        }
-
-        .log-entry.failed .log-title {
-            color: var(--terminal-red);
-            text-shadow: var(--glow-red);
-        }
-
-        .log-details {
-            margin-left: 20px;
-        }
-
-        .log-field {
-            margin: 6px 0;
-            color: var(--terminal-green);
-        }
-
-        .log-label {
-            color: var(--terminal-amber);
-            font-weight: bold;
-            margin-right: 8px;
-        }
-
-        .log-output {
-            background: var(--bg-primary);
-            border: 1px solid var(--bg-terminal-border);
-            padding: 10px;
-            margin: 6px 0;
-            color: var(--terminal-green);
-            font-family: var(--font-mono);
-            font-size: 0.9em;
-            overflow-x: auto;
-            max-height: 300px;
-            overflow-y: auto;
-        }
-
-        .log-error {
-            color: var(--terminal-red);
-            border-color: #330000;
-        }
-
-        /* parse_complete and route_taken log entries */
-        .log-parse-table {
-            display: grid;
-            grid-template-columns: max-content 1fr;
-            gap: 2px 12px;
-            font-size: 0.82em;
-            margin-top: 6px;
-        }
-        .log-parse-key { color: var(--terminal-amber); opacity: .8; }
-        .log-parse-val { color: var(--terminal-green); word-break: break-all; }
-        .log-route-label {
-            color: var(--terminal-cyan);
-            font-size: 0.9em;
-            margin-top: 4px;
-        }
-        .log-route-goto {
-            color: var(--terminal-amber);
-            font-size: 0.82em;
-            opacity: .75;
-            margin-top: 2px;
-        }
-
-        .log-entry code {
-            background: var(--bg-terminal);
-            padding: 2px 6px;
-            border: 1px solid var(--bg-terminal-border);
-            color: var(--terminal-green);
-            font-family: var(--font-mono);
-        }
-
-        /* Worker Metadata Styles */
-        .worker-stats {
-            display: flex;
-            gap: 15px;
-            margin-top: 8px;
-            font-size: 0.85em;
-            color: var(--terminal-green);
-            font-family: var(--font-mono);
-        }
-
-        .worker-stats span {
-            padding: 2px 6px;
-            background: var(--bg-terminal);
-            border: 1px solid var(--bg-terminal-border);
-        }
-
-        .worker-metadata {
-            margin-top: 12px;
-            padding: 10px;
-            background: var(--bg-terminal);
-            border: 1px solid var(--bg-terminal-border);
-            font-family: var(--font-mono);
-            font-size: 0.85em;
-        }
-
-        .meta-row {
-            display: flex;
-            padding: 4px 0;
-            color: var(--terminal-green);
-        }
-
-        .meta-label {
-            color: var(--terminal-amber);
-            min-width: 120px;
-            font-weight: bold;
-        }
-
-        /* Terminal Cursor Blink */
-        @keyframes cursor-blink {
-            0%, 49% { opacity: 1; }
-            50%, 100% { opacity: 0; }
-        }
-
-        .terminal-cursor::after {
-            content: '▋';
-            animation: cursor-blink 1s step-end infinite;
-            color: var(--terminal-green);
-        }
-
-        /* Hover effects for execution items */
-        .execution-item {
-            transition: all 0.2s ease;
-            cursor: pointer;
-        }
-
-        .execution-item:hover {
-            background: var(--bg-terminal);
-            border-left-width: 5px;
-            transform: translateX(3px);
-        }
-
-        .worker-item:hover {
-            background: var(--bg-terminal);
-            border-left-width: 5px;
-        }
-
-        .workflow-item:hover {
-            background: var(--bg-terminal);
-            border-left-width: 5px;
-        }
-
-        /* Loading pulse effect */
-        .loading {
-            animation: loading-pulse 1.5s ease-in-out infinite;
-        }
-
-        @keyframes loading-pulse {
-            0%, 100% { opacity: 0.6; }
-            50% { opacity: 1; }
-        }
-
-        /* Running execution pulse */
-        .execution-item.status-running {
-            animation: exec-running-pulse 2s ease-in-out infinite;
-        }
-        @keyframes exec-running-pulse {
-            0%, 100% { border-color: var(--terminal-green); }
-            50% { border-color: var(--status-running); box-shadow: 0 0 8px rgba(255,193,7,0.35); }
-        }
-
-        /* Success/Error message animations */
-        @keyframes slide-in {
-            from {
-                opacity: 0;
-                transform: translateY(-10px);
-            }
-            to {
-                opacity: 1;
-                transform: translateY(0);
-            }
-        }
-
-        .log-entry {
-            animation: slide-in 0.3s ease-out;
-        }
-    </style>
-    <script src="/base.js"></script>
-</head>
-<body>
-    <div class="container">
-        <div class="header">
-            <div class="header-left">
-                <h1>⚡ PULSE</h1>
-                <p>Pipelined Unified Logic & Server Engine</p>
-            </div>
-            <div style="text-align:right;">
-                <div class="user-info" id="userInfo">
-                    <div class="loading">Loading user...</div>
-                </div>
-                <div id="lastRefreshed" style="font-size:0.72em;color:var(--text-muted);font-family:var(--font-mono);margin-top:4px;"></div>
-            </div>
-        </div>
-
-        <div class="tabs">
-            <button class="tab active" onclick="switchTab('dashboard')">📊 Dashboard</button>
-            <button class="tab" onclick="switchTab('workers')">👥 Workers</button>
-            <button class="tab" onclick="switchTab('workflows')">📋 Workflows</button>
-            <button class="tab" onclick="switchTab('executions')">🚀 Executions</button>
-            <button class="tab" onclick="switchTab('quickcommand')">⚡ Quick Command</button>
-            <button class="tab" onclick="switchTab('scheduler')">⏰ Scheduler</button>
-        </div>
-
-        <!-- Dashboard Tab -->
-        <div id="dashboard" class="tab-content active">
-            <div class="grid">
-                <div class="card">
-                    <h3>👥 Active Workers</h3>
-                    <div id="dashWorkers"><div class="loading">Loading...</div></div>
-                </div>
-                <div class="card">
-                    <h3>🚀 Recent Executions</h3>
-                    <div id="dashExecutions"><div class="loading">Loading...</div></div>
-                </div>
-            </div>
-        </div>
-
-        <!-- Workers Tab -->
-        <div id="workers" class="tab-content">
-            <div class="card">
-                <h3>Worker Management</h3>
-                <button onclick="refreshData()">🔄 Refresh</button>
-                <div id="workerList"><div class="loading">Loading...</div></div>
-            </div>
-        </div>
-
-        <!-- Workflows Tab -->
-        <div id="workflows" class="tab-content">
-            <div class="card">
-                <h3>Workflow Management</h3>
-                <button onclick="showCreateWorkflow()">➕ Create Workflow</button>
-                <button onclick="refreshData()">🔄 Refresh</button>
-                <div id="workflowList"><div class="loading">Loading...</div></div>
-            </div>
-        </div>
-
-        <!-- Executions Tab -->
-        <div id="executions" class="tab-content">
-            <div class="card">
-                <h3>Execution History</h3>
-
-                <!-- Manual / Automated sub-tabs -->
-                <div style="display: flex; gap: 0; margin-bottom: 20px; border: 2px solid var(--terminal-green);">
-                    <button id="subTabManual"
-                            onclick="setExecutionView('manual')"
-                            style="flex:1; padding:10px 16px; background:rgba(0,255,65,0.2); border:none; border-right:2px solid var(--terminal-green); color:var(--terminal-amber); font-family:var(--font-mono); font-size:0.9em; cursor:pointer; text-shadow: 0 0 5px #ffb000;">
-                        👤 Manual Runs <span id="countManual"></span>
-                    </button>
-                    <button id="subTabAutomated"
-                            onclick="setExecutionView('automated')"
-                            style="flex:1; padding:10px 16px; background:transparent; border:none; color:var(--terminal-green); font-family:var(--font-mono); font-size:0.9em; cursor:pointer;">
-                        🤖 Automated <span id="countAutomated"></span>
-                    </button>
-                </div>
-
-                <!-- Search and Filter Section -->
-                <div style="background: rgba(0, 255, 65, 0.05); border: 2px solid var(--terminal-green); padding: 15px; margin-bottom: 20px;">
-                    <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 15px; margin-bottom: 15px;">
-                        <!-- Search Box -->
-                        <div>
-                            <label style="display: block; margin-bottom: 8px; font-weight: 600; color: var(--terminal-amber);">🔍 Search:</label>
-                            <input type="text" id="executionSearch" placeholder="Search by command, execution ID, or workflow name..."
-                                   oninput="filterExecutions()"
-                                   style="width: 100%; padding: 10px; margin: 0;">
-                        </div>
-
-                        <!-- Status Filter -->
-                        <div>
-                            <label style="display: block; margin-bottom: 8px; font-weight: 600; color: var(--terminal-amber);">📊 Status Filter:</label>
-                            <select id="statusFilter" onchange="filterExecutions()" style="width: 100%; padding: 10px; margin: 0;">
-                                <option value="">All Statuses</option>
-                                <option value="running">Running</option>
-                                <option value="completed">Completed</option>
-                                <option value="failed">Failed</option>
-                                <option value="waiting">Waiting</option>
-                            </select>
-                        </div>
-                    </div>
-
-                    <div style="display: flex; gap: 10px; align-items: center;">
-                        <button onclick="clearFilters()" class="small">Clear Filters</button>
-                        <span id="filterStats" style="color: var(--terminal-green); font-size: 0.9em; font-family: var(--font-mono);"></span>
-                    </div>
-                </div>
-
-                <button onclick="refreshData()">🔄 Refresh</button>
-                <button onclick="clearCompletedExecutions()" style="margin-left: 10px;">🗑️ Clear Completed</button>
-                <button onclick="toggleCompareMode()" id="compareModeBtn" style="margin-left: 10px;">📊 Compare Mode</button>
-                <button onclick="compareSelectedExecutions()" id="compareBtn" style="margin-left: 10px; display: none;">⚖️ Compare Selected</button>
-
-                <div id="compareInstructions" style="display: none; background: rgba(255, 176, 0, 0.1); border: 2px solid var(--terminal-amber); padding: 12px; margin: 15px 0; color: var(--terminal-amber);">
-                    Select 2-5 executions to compare their outputs. Click executions to toggle selection.
-                </div>
-
-                <div id="executionList"><div class="loading">Loading...</div></div>
-            </div>
-        </div>
-
-        <!-- Quick Command Tab -->
-        <div id="quickcommand" class="tab-content">
-            <div class="card">
-                <h3>⚡ Quick Command Execution</h3>
-                <p style="color: var(--terminal-green); margin-bottom: 20px;">Execute a command on selected workers instantly</p>
-
-                <div style="display: flex; gap: 10px; margin-bottom: 15px;">
-                    <button onclick="showCommandTemplates()" style="flex: 0;">📋 Templates</button>
-                    <button onclick="showCommandHistory()" style="flex: 0;">🕐 History</button>
-                </div>
-
-                <label style="display: block; margin-bottom: 10px; font-weight: 600;">Execution Mode:</label>
-                <div style="margin-bottom: 20px;">
-                    <label style="display: inline-flex; align-items: center; margin-right: 20px; cursor: pointer;">
-                        <input type="radio" name="execMode" value="single" checked onchange="toggleWorkerSelection()" style="width: auto; margin-right: 8px;">
-                        <span>Single Worker</span>
-                    </label>
-                    <label style="display: inline-flex; align-items: center; cursor: pointer;">
-                        <input type="radio" name="execMode" value="multi" onchange="toggleWorkerSelection()" style="width: auto; margin-right: 8px;">
-                        <span>Multiple Workers</span>
-                    </label>
-                </div>
-
-                <div id="singleWorkerMode">
-                    <label style="display: block; margin-bottom: 10px; font-weight: 600;">Select Worker:</label>
-                    <select id="quickWorkerSelect">
-                        <option value="">Loading workers...</option>
-                    </select>
-                </div>
-
-                <div id="multiWorkerMode" style="display: none;">
-                    <label style="display: block; margin-bottom: 10px; font-weight: 600;">Select Workers:</label>
-                    <div id="workerCheckboxList" style="background: var(--bg-primary); border: 2px solid var(--terminal-green); padding: 15px; margin-bottom: 15px; max-height: 200px; overflow-y: auto;">
-                        <div class="loading">Loading workers...</div>
-                    </div>
-                    <div style="margin-bottom: 15px;">
-                        <button onclick="selectAllWorkers()" class="small">Select All</button>
-                        <button onclick="selectOnlineWorkers()" class="small">Online Only</button>
-                        <button onclick="deselectAllWorkers()" class="small">Clear All</button>
-                    </div>
-                </div>
-
-                <label style="display: block; margin-bottom: 10px; margin-top: 20px; font-weight: 600;">Command:</label>
-                <textarea id="quickCommand" placeholder="Enter command to execute (e.g., 'uptime' or 'df -h')"></textarea>
-
-                <button onclick="executeQuickCommand()">▶️ Execute Command</button>
-
-                <div id="quickCommandResult" style="margin-top: 20px;"></div>
-            </div>
-        </div>
-
-        <!-- Scheduler Tab -->
-        <div id="scheduler" class="tab-content">
-            <div class="card">
-                <h3>⏰ Scheduled Commands</h3>
-                <p style="color: var(--terminal-green); margin-bottom: 20px;">Automate command execution with flexible scheduling</p>
-
-                <button onclick="showCreateSchedule()">➕ Create Schedule</button>
-                <button onclick="refreshData()" style="margin-left: 10px;">🔄 Refresh</button>
-
-                <div id="scheduleList" style="margin-top: 20px;"><div class="loading">Loading...</div></div>
-            </div>
-        </div>
-    </div>
-
-    <!-- Create Workflow Modal -->
-    <div id="createWorkflowModal" class="modal">
-        <div class="modal-content">
-            <h2>Create New Workflow</h2>
-            <input type="text" id="workflowName" placeholder="Workflow Name">
-            <textarea id="workflowDescription" placeholder="Description"></textarea>
-            <label>Workflow Definition (JSON):</label>
-            <textarea id="workflowDefinition" style="min-height: 200px;">{
-  "steps": [
-    {
-      "name": "Example Step",
-      "type": "execute",
-      "targets": ["all"],
-      "command": "echo 'Hello from PULSE'"
-    }
-  ]
-}</textarea>
-            <label style="display:block;margin:12px 0 6px;font-weight:600;">Webhook URL (optional):</label>
-            <input type="url" id="workflowWebhookUrl" placeholder="https://example.com/webhook">
-            <button onclick="createWorkflow()">Create</button>
-            <button onclick="closeModal('createWorkflowModal')">Cancel</button>
-        </div>
-    </div>
-
-    <!-- View Execution Modal -->
-    <div id="viewExecutionModal" class="modal">
-        <div class="modal-content">
-            <h2>Execution Details</h2>
-            <div id="executionDetails"></div>
-            <button onclick="closeModal('viewExecutionModal')">Close</button>
-        </div>
-    </div>
-
-    <!-- Command Templates Modal -->
-    <div id="commandTemplatesModal" class="modal">
-        <div class="modal-content">
-            <h2>Command Templates</h2>
-            <div id="templateList" style="max-height: 400px; overflow-y: auto;"></div>
-            <button onclick="closeModal('commandTemplatesModal')">Close</button>
-        </div>
-    </div>
-
-    <!-- Command History Modal -->
-    <div id="commandHistoryModal" class="modal">
-        <div class="modal-content">
-            <h2>Command History</h2>
-            <div id="historyList" style="max-height: 400px; overflow-y: auto;"></div>
-            <button onclick="closeModal('commandHistoryModal')">Close</button>
-        </div>
-    </div>
-
-    <!-- Compare Executions Modal -->
-    <div id="compareExecutionsModal" class="modal">
-        <div class="modal-content" style="max-width: 90%; max-height: 90vh;">
-            <h2>⚖️ Execution Comparison</h2>
-            <div id="compareContent" style="max-height: 70vh; overflow-y: auto; padding: 20px;"></div>
-            <button onclick="closeModal('compareExecutionsModal')">Close</button>
-        </div>
-    </div>
-
-    <!-- Workflow Param Input Modal -->
-    <div id="paramModal" style="display:none;position:fixed;inset:0;background:rgba(0,0,0,.75);z-index:1000;align-items:center;justify-content:center;">
-        <div style="background:#0a0a0a;border:2px solid var(--terminal-green);padding:28px 32px;min-width:380px;max-width:520px;width:90%;font-family:var(--font-mono);box-shadow:0 0 30px rgba(0,255,65,.2);">
-            <h2 style="color:var(--terminal-green);margin:0 0 6px;font-size:1.1em;letter-spacing:.05em;">▶ RUN WORKFLOW</h2>
-            <p style="color:var(--terminal-amber);font-size:.75em;margin:0 0 20px;letter-spacing:.04em;">Fill in required parameters</p>
-            <div id="paramModalForm"></div>
-            <div style="margin-top:16px;display:flex;align-items:center;gap:10px;">
-                <input type="checkbox" id="paramDryRun" style="accent-color:var(--terminal-amber);">
-                <label for="paramDryRun" style="color:var(--terminal-amber);font-size:.85em;cursor:pointer;">Dry Run (simulate, no commands executed)</label>
-            </div>
-            <div style="display:flex;gap:10px;margin-top:20px;">
-                <button onclick="submitParamForm()"
-                    style="flex:1;padding:8px;background:rgba(0,255,65,.1);border:1px solid var(--terminal-green);color:var(--terminal-green);font-family:var(--font-mono);cursor:pointer;font-size:.9em;">
-                    ▶ Run
-                </button>
-                <button onclick="closeParamModal()"
-                    style="padding:8px 16px;background:transparent;border:1px solid #555;color:#888;font-family:var(--font-mono);cursor:pointer;font-size:.9em;">
-                    Cancel
-                </button>
-            </div>
-        </div>
-    </div>
-
-    <!-- Edit Workflow Modal -->
-    <div id="editWorkflowModal" class="modal">
-        <div class="modal-content" style="max-width: 700px; width: 95%;">
-            <h2>✏️ Edit Workflow</h2>
-            <input type="hidden" id="editWorkflowId">
-            <label style="display:block;margin-bottom:6px;font-weight:600;">Name:</label>
-            <input type="text" id="editWorkflowName" placeholder="Workflow Name">
-            <label style="display:block;margin:12px 0 6px;font-weight:600;">Description:</label>
-            <textarea id="editWorkflowDescription" placeholder="Description" style="min-height:60px;"></textarea>
-            <label style="display:block;margin:12px 0 6px;font-weight:600;">Definition (JSON):</label>
-            <textarea id="editWorkflowDefinition" style="min-height: 320px; font-family: var(--font-mono); font-size: 0.85em;"></textarea>
-            <label style="display:block;margin:12px 0 6px;font-weight:600;">Webhook URL (optional):</label>
-            <input type="url" id="editWorkflowWebhookUrl" placeholder="https://example.com/webhook">
-            <div id="editWorkflowError" style="color:var(--terminal-red);font-size:0.85em;margin-top:8px;display:none;"></div>
-            <div style="margin-top:16px;display:flex;gap:10px;">
-                <button onclick="saveWorkflow()">💾 Save</button>
-                <button onclick="closeModal('editWorkflowModal')">Cancel</button>
-            </div>
-        </div>
-    </div>
-
-    <!-- Create Schedule Modal -->
-    <div id="createScheduleModal" class="modal">
-        <div class="modal-content">
-            <h2>Create Scheduled Command</h2>
-
-            <label style="display: block; margin-bottom: 8px; font-weight: 600;">Schedule Name:</label>
-            <input type="text" id="scheduleName" placeholder="e.g., Daily System Check">
-
-            <label style="display: block; margin-bottom: 8px; margin-top: 15px; font-weight: 600;">Command:</label>
-            <textarea id="scheduleCommand" placeholder="Enter command to execute"></textarea>
-
-            <label style="display: block; margin-bottom: 8px; margin-top: 15px; font-weight: 600;">Target Workers:</label>
-            <div id="scheduleWorkerList" style="background: var(--bg-primary); border: 2px solid var(--terminal-green); padding: 15px; margin-bottom: 15px; max-height: 150px; overflow-y: auto;">
-                <div class="loading">Loading workers...</div>
-            </div>
-
-            <label style="display: block; margin-bottom: 8px; margin-top: 15px; font-weight: 600;">Schedule Type:</label>
-            <select id="scheduleType" onchange="updateScheduleInput()">
-                <option value="interval">Every X Minutes</option>
-                <option value="hourly">Every X Hours</option>
-                <option value="daily">Daily at Time</option>
-            </select>
-
-            <div id="scheduleInputContainer" style="margin-top: 15px;">
-                <label style="display: block; margin-bottom: 8px; font-weight: 600;">Interval (minutes):</label>
-                <input type="number" id="scheduleValue" placeholder="e.g., 30" min="1">
-            </div>
-
-            <div style="margin-top: 20px;">
-                <button onclick="createSchedule()">Create Schedule</button>
-                <button onclick="closeModal('createScheduleModal')" style="margin-left: 10px;">Cancel</button>
-            </div>
-        </div>
-    </div>
-
-    <script>
-        let currentUser = null;
-        let ws = null;
-        let workers = [];
-        let allExecutions = []; // Store all loaded executions for filtering
-        let compareMode = false;
-        let selectedExecutions = new Set();
-
-        async function loadUser() {
-            try {
-                const response = await fetch('/api/user');
-                if (!response.ok) return false;
-                
-                currentUser = await response.json();
-                document.getElementById('userInfo').innerHTML = `
-                    <div class="name">${escapeHtml(currentUser.name || '')}</div>
-                    <div class="email">${escapeHtml(currentUser.email || '')}</div>
-                    <div>${(currentUser.groups || []).map(g =>
-                        `<span class="badge">${escapeHtml(g)}</span>`
-                    ).join('')}</div>
-                `;
-                return true;
-            } catch (error) {
-                console.error('Error loading user:', error);
-                return false;
-            }
-        }
-
-        async function loadWorkers() {
-            try {
-                const response = await fetch('/api/workers');
-                workers = await response.json();
-
-                // Update worker select in quick command (single mode)
-                const select = document.getElementById('quickWorkerSelect');
-                if (select) {
-                    select.innerHTML = workers.map(w =>
-                        `<option value="${w.id}">${w.name} (${w.status})</option>`
-                    ).join('');
-                }
-
-                // Update worker checkboxes (multi mode)
-                const checkboxList = document.getElementById('workerCheckboxList');
-                if (checkboxList) {
-                    checkboxList.innerHTML = workers.length === 0 ?
-                        '<div class="empty">No workers available</div>' :
-                        workers.map(w => `
-                            <label style="display: block; margin-bottom: 10px; cursor: pointer; padding: 8px; border: 1px solid var(--terminal-green); background: ${w.status === 'online' ? 'rgba(0, 255, 65, 0.05)' : 'transparent'};">
-                                <input type="checkbox" name="workerCheckbox" value="${w.id}" data-status="${w.status}" style="width: auto; margin-right: 8px;">
-                                <span class="status ${w.status}" style="padding: 2px 8px; font-size: 0.8em;">[${w.status === 'online' ? '●' : '○'}]</span>
-                                <strong>${w.name}</strong>
-                            </label>
-                        `).join('');
-                }
-                
-                // Dashboard view
-                const dashHtml = workers.length === 0 ?
-                    '<div class="empty">No workers connected</div>' :
-                    workers.map(w => {
-                        const meta = w.metadata ? (typeof w.metadata === 'string' ? JSON.parse(w.metadata) : w.metadata) : null;
-                        const lastSeen = getTimeAgo(new Date(w.last_heartbeat));
-                        return `
-                            <div class="worker-item">
-                                <span class="status ${w.status}">[${w.status === 'online' ? '●' : '○'}]</span>
-                                <strong>${w.name}</strong>
-                                ${meta ? `<div class="worker-stats">
-                                    <span>CPU: ${meta.cpus || '?'} cores</span>
-                                    <span>RAM: ${formatBytes(meta.freeMem)}/${formatBytes(meta.totalMem)}</span>
-                                    <span>Tasks: ${meta.activeTasks || 0}/${meta.maxConcurrentTasks || 0}</span>
-                                </div>` : ''}
-                                <div class="timestamp">Last seen: ${lastSeen}</div>
-                            </div>
-                        `;
-                    }).join('');
-                document.getElementById('dashWorkers').innerHTML = dashHtml;
-                
-                // Full worker list
-                const fullHtml = workers.length === 0 ?
-                    '<div class="empty">No workers connected</div>' :
-                    workers.map(w => {
-                        const meta = w.metadata ? (typeof w.metadata === 'string' ? JSON.parse(w.metadata) : w.metadata) : null;
-                        const lastSeen = getTimeAgo(new Date(w.last_heartbeat));
-                        const memUsagePercent = meta && meta.totalMem ? ((meta.totalMem - meta.freeMem) / meta.totalMem * 100).toFixed(1) : 0;
-                        const loadAvg = meta && meta.loadavg ? meta.loadavg.map(l => l.toFixed(2)).join(', ') : 'N/A';
-
-                        return `
-                            <div class="worker-item">
-                                <div style="display: flex; justify-content: space-between; align-items: start;">
-                                    <div style="flex: 1;">
-                                        <span class="status ${w.status}">[${w.status === 'online' ? '●' : '○'}]</span>
-                                        <strong>${w.name}</strong>
-                                        <div class="timestamp">Last seen: ${lastSeen}</div>
-                                        ${meta ? `
-                                            <div class="worker-metadata">
-                                                <div class="meta-row">
-                                                    <span class="meta-label">System:</span>
-                                                    <span>${meta.platform || 'N/A'} ${meta.arch || ''} | ${meta.cpus || '?'} CPU cores</span>
-                                                </div>
-                                                <div class="meta-row">
-                                                    <span class="meta-label">Memory:</span>
-                                                    <span>${formatBytes(meta.totalMem - meta.freeMem)} / ${formatBytes(meta.totalMem)} (${memUsagePercent}% used)</span>
-                                                </div>
-                                                <div class="meta-row">
-                                                    <span class="meta-label">Load Avg:</span>
-                                                    <span>${loadAvg}</span>
-                                                </div>
-                                                <div class="meta-row">
-                                                    <span class="meta-label">Uptime:</span>
-                                                    <span>${formatUptime(meta.uptime)}</span>
-                                                </div>
-                                                <div class="meta-row">
-                                                    <span class="meta-label">Active Tasks:</span>
-                                                    <span>${meta.activeTasks || 0} / ${meta.maxConcurrentTasks || 0}</span>
-                                                </div>
-                                            </div>
-                                        ` : ''}
-                                    </div>
-                                    ${currentUser && currentUser.isAdmin ? `
-                                        <button class="danger small" onclick="deleteWorker('${w.id}', '${w.name}')">🗑️ Delete</button>
-                                    ` : ''}
-                                </div>
-                            </div>
-                        `;
-                    }).join('');
-                document.getElementById('workerList').innerHTML = fullHtml;
-            } catch (error) {
-                console.error('Error loading workers:', error);
-                document.getElementById('workerList').innerHTML = '<div class="empty" style="color:var(--terminal-red);">⚠ Failed to load workers</div>';
-            }
-        }
-
-        // Workflow registry (id → definition) for param lookup
-        let _workflowRegistry = {};
-
-        async function loadWorkflows() {
-            try {
-                const response = await fetch('/api/workflows');
-                const workflows = await response.json();
-
-                // Cache definitions for param lookup at execute time
-                _workflowRegistry = {};
-                workflows.forEach(w => {
-                    const def = typeof w.definition === 'string' ? JSON.parse(w.definition) : w.definition;
-                    _workflowRegistry[w.id] = def;
-                });
-
-                const paramBadge = (def) => {
-                    const ps = (def && def.params) || [];
-                    return ps.length ? `<span style="font-size:.75em;color:var(--terminal-amber);margin-left:6px;">[${ps.length} param${ps.length > 1 ? 's' : ''}]</span>` : '';
-                };
-
-                const html = workflows.length === 0 ?
-                    '<div class="empty">No workflows defined yet</div>' :
-                    workflows.map(w => {
-                        const def = _workflowRegistry[w.id] || {};
-                        return `
-                        <div class="workflow-item">
-                            <div class="workflow-name">${escapeHtml(w.name)}${paramBadge(def)}</div>
-                            <div class="workflow-desc">${escapeHtml(w.description || 'No description')}</div>
-                            <div class="timestamp">Created by ${escapeHtml(w.created_by || 'Unknown')} on ${safeDate(w.created_at)?.toLocaleString() ?? 'N/A'}</div>
-                            <div style="margin-top: 10px;">
-                                <button onclick="executeWorkflow('${w.id}')">▶️ Execute</button>
-                                ${currentUser && currentUser.isAdmin ?
-                                    `<button onclick="editWorkflow('${w.id}')">✏️ Edit</button>
-                                     <button class="danger" onclick="deleteWorkflow('${w.id}', '${w.name}')">🗑️ Delete</button>`
-                                    : ''}
-                            </div>
-                        </div>`;
-                    }).join('');
-                document.getElementById('workflowList').innerHTML = html;
-            } catch (error) {
-                console.error('Error loading workflows:', error);
-                document.getElementById('workflowList').innerHTML = '<div class="empty" style="color:var(--terminal-red);">⚠ Failed to load workflows</div>';
-            }
-        }
-
-        async function loadSchedules() {
-            try {
-                const response = await fetch('/api/scheduled-commands');
-                const schedules = await response.json();
-
-                const html = schedules.length === 0 ?
-                    '<div class="empty">No scheduled commands yet</div>' :
-                    schedules.map(s => {
-                        const workerIds = JSON.parse(s.worker_ids);
-                        const workerNames = workerIds.map(id => {
-                            const w = workers.find(worker => worker.id === id);
-                            return w ? w.name : id.substring(0, 8);
-                        }).join(', ');
-
-                        let scheduleDesc = '';
-                        if (s.schedule_type === 'interval') {
-                            scheduleDesc = `Every ${s.schedule_value} minutes`;
-                        } else if (s.schedule_type === 'hourly') {
-                            scheduleDesc = `Every ${s.schedule_value} hour(s)`;
-                        } else if (s.schedule_type === 'daily') {
-                            scheduleDesc = `Daily at ${s.schedule_value}`;
-                        } else if (s.schedule_type === 'cron') {
-                            scheduleDesc = `Cron: ${s.schedule_value}`;
-                        }
-
-                        const nextRunDate = safeDate(s.next_run);
-                        const nextRunIn = nextRunDate ? (() => {
-                            const secs = Math.round((nextRunDate - Date.now()) / 1000);
-                            if (secs <= 0) return 'now';
-                            if (secs < 60) return `${secs}s`;
-                            if (secs < 3600) return `${Math.round(secs/60)}m`;
-                            return `${Math.round(secs/3600)}h`;
-                        })() : null;
-                        const nextRun = nextRunDate ? `${nextRunDate.toLocaleString()}${nextRunIn ? ` (in ${nextRunIn})` : ''}` : 'Not scheduled';
-                        const lastRun = safeDate(s.last_run)?.toLocaleString() ?? 'Never';
-
-                        return `
-                            <div class="workflow-item" style="opacity: ${s.enabled ? 1 : 0.6};">
-                                <div style="display: flex; justify-content: space-between; align-items: start;">
-                                    <div style="flex: 1;">
-                                        <div class="workflow-name">${escapeHtml(s.name || '')}</div>
-                                        <div style="color: var(--terminal-green); font-family: var(--font-mono); font-size: 0.9em; margin: 8px 0;">
-                                            Command: <code>${escapeHtml(s.command)}</code>
-                                        </div>
-                                        <div style="color: var(--terminal-amber); font-size: 0.9em; margin-bottom: 5px;">
-                                            📅 ${scheduleDesc}
-                                        </div>
-                                        <div style="color: var(--text-muted); font-size: 0.85em;">
-                                            Workers: ${workerNames}
-                                        </div>
-                                        <div class="timestamp">
-                                            Last run: ${lastRun} | Next run: ${nextRun}
-                                        </div>
-                                    </div>
-                                    <div style="margin-left: 15px;">
-                                        <span class="status ${s.enabled ? 'online' : 'offline'}" style="font-size: 0.85em;">
-                                            ${s.enabled ? 'ENABLED' : 'DISABLED'}
-                                        </span>
-                                    </div>
-                                </div>
-                                <div style="margin-top: 10px;">
-                                    <button onclick="toggleSchedule('${s.id}')" class="small">
-                                        ${s.enabled ? '⏸️ Disable' : '▶️ Enable'}
-                                    </button>
-                                    <button class="danger small" onclick="deleteSchedule('${s.id}', '${s.name}')">🗑️ Delete</button>
-                                </div>
-                            </div>
-                        `;
-                    }).join('');
-
-                document.getElementById('scheduleList').innerHTML = html;
-            } catch (error) {
-                console.error('Error loading schedules:', error);
-                document.getElementById('scheduleList').innerHTML = '<div class="empty" style="color:var(--terminal-red);">⚠ Failed to load schedules</div>';
-            }
-        }
-
-        function showCreateSchedule() {
-            // Populate worker checkboxes
-            const workerList = document.getElementById('scheduleWorkerList');
-            workerList.innerHTML = workers.length === 0 ?
-                '<div class="empty">No workers available</div>' :
-                workers.map(w => `
-                    <label style="display: block; margin-bottom: 10px; cursor: pointer; padding: 8px; border: 1px solid var(--terminal-green);">
-                        <input type="checkbox" name="scheduleWorkerCheckbox" value="${w.id}" style="width: auto; margin-right: 8px;">
-                        <span class="status ${w.status}" style="padding: 2px 8px; font-size: 0.8em;">[${w.status === 'online' ? '●' : '○'}]</span>
-                        <strong>${w.name}</strong>
-                    </label>
-                `).join('');
-
-            document.getElementById('createScheduleModal').classList.add('show');
-        }
-
-        function updateScheduleInput() {
-            const scheduleType = document.getElementById('scheduleType').value;
-            const container = document.getElementById('scheduleInputContainer');
-
-            if (scheduleType === 'interval') {
-                container.innerHTML = `
-                    <label style="display: block; margin-bottom: 8px; font-weight: 600;">Interval (minutes):</label>
-                    <input type="number" id="scheduleValue" placeholder="e.g., 30" min="1">
-                `;
-            } else if (scheduleType === 'hourly') {
-                container.innerHTML = `
-                    <label style="display: block; margin-bottom: 8px; font-weight: 600;">Every X Hours:</label>
-                    <input type="number" id="scheduleValue" placeholder="e.g., 2" min="1" max="24">
-                `;
-            } else if (scheduleType === 'daily') {
-                container.innerHTML = `
-                    <label style="display: block; margin-bottom: 8px; font-weight: 600;">Time (HH:MM):</label>
-                    <input type="time" id="scheduleValue">
-                `;
-            }
-        }
-
-        async function createSchedule() {
-            const name = document.getElementById('scheduleName').value;
-            const command = document.getElementById('scheduleCommand').value;
-            const scheduleType = document.getElementById('scheduleType').value;
-            const scheduleValue = document.getElementById('scheduleValue').value;
-
-            const selectedWorkers = Array.from(document.querySelectorAll('input[name="scheduleWorkerCheckbox"]:checked')).map(cb => cb.value);
-
-            if (!name || !command || !scheduleValue || selectedWorkers.length === 0) {
-                alert('Please fill in all fields and select at least one worker');
-                return;
-            }
-
-            try {
-                const response = await fetch('/api/scheduled-commands', {
-                    method: 'POST',
-                    headers: { 'Content-Type': 'application/json' },
-                    body: JSON.stringify({
-                        name,
-                        command,
-                        worker_ids: selectedWorkers,
-                        schedule_type: scheduleType,
-                        schedule_value: scheduleValue
-                    })
-                });
-
-                if (response.ok) {
-                    closeModal('createScheduleModal');
-                    showTerminalNotification('Schedule created successfully', 'success');
-                    loadSchedules();
-
-                    // Clear form
-                    document.getElementById('scheduleName').value = '';
-                    document.getElementById('scheduleCommand').value = '';
-                    document.getElementById('scheduleValue').value = '';
-                } else {
-                    const error = await response.json();
-                    showTerminalNotification('Failed to create schedule: ' + error.error, 'error');
-                }
-            } catch (error) {
-                console.error('Error creating schedule:', error);
-                showTerminalNotification('Error creating schedule', 'error');
-            }
-        }
-
-        async function toggleSchedule(scheduleId) {
-            try {
-                const response = await fetch(`/api/scheduled-commands/${scheduleId}/toggle`, {
-                    method: 'PUT'
-                });
-
-                if (response.ok) {
-                    const data = await response.json();
-                    showTerminalNotification(`Schedule ${data.enabled ? 'enabled' : 'disabled'}`, 'success');
-                    loadSchedules();
-                } else {
-                    showTerminalNotification('Failed to toggle schedule', 'error');
-                }
-            } catch (error) {
-                console.error('Error toggling schedule:', error);
-                showTerminalNotification('Error toggling schedule', 'error');
-            }
-        }
-
-        async function deleteSchedule(scheduleId, name) {
-            if (!confirm(`Delete scheduled command: ${name}?`)) return;
-
-            try {
-                const response = await fetch(`/api/scheduled-commands/${scheduleId}`, {
-                    method: 'DELETE'
-                });
-
-                if (response.ok) {
-                    showTerminalNotification('Schedule deleted', 'success');
-                    loadSchedules();
-                } else {
-                    showTerminalNotification('Failed to delete schedule', 'error');
-                }
-            } catch (error) {
-                console.error('Error deleting schedule:', error);
-                showTerminalNotification('Error deleting schedule', 'error');
-            }
-        }
-
-        let executionOffset = 0;
-        const executionLimit = 50;
-        let executionView = localStorage.getItem('pulse_executionView') || 'manual';
-
-        async function loadExecutions(append = false) {
-            try {
-                if (!append) executionOffset = 0;
-
-                const response = await fetch(`/api/executions?limit=${executionLimit}&offset=${executionOffset}`);
-                const data = await response.json();
-                const executions = data.executions || data; // Handle old and new API format
-
-                // Store executions for filtering
-                if (append) {
-                    allExecutions = allExecutions.concat(executions);
-                } else {
-                    allExecutions = executions;
-                }
-
-                // Dashboard view (first 5 manual runs only)
-                if (!append) {
-                    const manualExecs = executions.filter(e => !isAutomatedRun(e));
-                    const dashHtml = manualExecs.length === 0 ?
-                        '<div class="empty">No executions yet</div>' :
-                        manualExecs.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 || '[Quick Command]'}</strong>
-                                <div class="timestamp">by ${escapeHtml(e.started_by || '')} at ${safeDate(e.started_at)?.toLocaleString() ?? 'N/A'}</div>
-                            </div>
-                        `).join('');
-                    document.getElementById('dashExecutions').innerHTML = dashHtml;
-                }
-
-                // Apply filters and render
-                renderFilteredExecutions();
-
-                // Add "Load More" button if there are more executions
-                if (data.hasMore) {
-                    const loadMoreBtn = `<button onclick="loadMoreExecutions()" style="width: 100%; margin-top: 15px;">Load More Executions</button>`;
-                    document.getElementById('executionList').innerHTML += loadMoreBtn;
-                }
-
-            } catch (error) {
-                console.error('Error loading executions:', error);
-                document.getElementById('executionList').innerHTML = '<div class="empty" style="color:var(--terminal-red);">⚠ Failed to load executions</div>';
-            }
-        }
-
-        function isAutomatedRun(e) {
-            const by = e.started_by || '';
-            return by.startsWith('gandalf:') || by.startsWith('scheduler:');
-        }
-
-        function updateSubTabCounts() {
-            const manual = allExecutions.filter(e => !isAutomatedRun(e)).length;
-            const automated = allExecutions.filter(e => isAutomatedRun(e)).length;
-            const cm = document.getElementById('countManual');
-            const ca = document.getElementById('countAutomated');
-            if (cm) cm.textContent = manual ? `(${manual}) ` : '';
-            if (ca) ca.textContent = automated ? `(${automated}) ` : '';
-        }
-
-        function setExecutionView(view) {
-            executionView = view;
-            localStorage.setItem('pulse_executionView', view);
-            const manualBtn = document.getElementById('subTabManual');
-            const autoBtn = document.getElementById('subTabAutomated');
-            if (manualBtn && autoBtn) {
-                if (view === 'manual') {
-                    manualBtn.style.background = 'rgba(0,255,65,0.2)';
-                    manualBtn.style.color = 'var(--terminal-amber)';
-                    manualBtn.style.textShadow = '0 0 5px #ffb000';
-                    autoBtn.style.background = 'transparent';
-                    autoBtn.style.color = 'var(--terminal-green)';
-                    autoBtn.style.textShadow = 'none';
-                } else {
-                    autoBtn.style.background = 'rgba(0,255,65,0.2)';
-                    autoBtn.style.color = 'var(--terminal-amber)';
-                    autoBtn.style.textShadow = '0 0 5px #ffb000';
-                    manualBtn.style.background = 'transparent';
-                    manualBtn.style.color = 'var(--terminal-green)';
-                    manualBtn.style.textShadow = 'none';
-                }
-            }
-            renderFilteredExecutions();
-        }
-
-        function renderFilteredExecutions() {
-            const searchTerm = (document.getElementById('executionSearch')?.value || '').toLowerCase();
-            const statusFilter = document.getElementById('statusFilter')?.value || '';
-
-            updateSubTabCounts();
-
-            // Filter executions
-            let filtered = allExecutions.filter(e => {
-                // View filter (manual vs automated)
-                if (executionView === 'manual' && isAutomatedRun(e)) return false;
-                if (executionView === 'automated' && !isAutomatedRun(e)) return false;
-
-                // Status filter
-                if (statusFilter && e.status !== statusFilter) return false;
-
-                // Search filter (search in workflow name, execution ID, and logs)
-                if (searchTerm) {
-                    const workflowName = (e.workflow_name || '[Quick Command]').toLowerCase();
-                    const executionId = e.id.toLowerCase();
-
-                    // Try to extract command from logs if it's a quick command
-                    let commandText = '';
-                    try {
-                        const logs = typeof e.logs === 'string' ? JSON.parse(e.logs) : e.logs;
-                        if (logs && logs.length > 0 && logs[0].command) {
-                            commandText = logs[0].command.toLowerCase();
-                        }
-                    } catch (err) {
-                        // Ignore parsing errors
-                    }
-
-                    const matchFound = workflowName.includes(searchTerm) ||
-                                      executionId.includes(searchTerm) ||
-                                      commandText.includes(searchTerm);
-
-                    if (!matchFound) return false;
-                }
-
-                return true;
-            });
-
-            // Update filter stats
-            const statsEl = document.getElementById('filterStats');
-            if (statsEl) {
-                if (searchTerm || statusFilter) {
-                    statsEl.textContent = `Showing ${filtered.length} of ${allExecutions.length} executions`;
-                } else {
-                    statsEl.textContent = '';
-                }
-            }
-
-            // Render filtered results
-            const fullHtml = filtered.length === 0 ?
-                '<div class="empty">No executions match your filters</div>' :
-                filtered.map(e => {
-                    const isSelected = selectedExecutions.has(e.id);
-                    const clickHandler = compareMode ? `toggleExecutionSelection('${e.id}')` : `viewExecution('${e.id}')`;
-                    const selectedStyle = isSelected ? 'background: rgba(255, 176, 0, 0.2); border-left-width: 5px; border-left-color: var(--terminal-amber);' : '';
-
-                    const elapsed = e.status === 'running' ? ` • ${formatElapsed(e.started_at)}` : '';
-                    return `
-                        <div class="execution-item${e.status === 'running' ? ' status-running' : ''}" onclick="${clickHandler}" style="${selectedStyle} cursor: pointer;">
-                            ${compareMode && isSelected ? '<span style="color: var(--terminal-amber); margin-right: 8px;">✓</span>' : ''}
-                            <span class="status ${e.status}">${e.status}</span>
-                            <strong>${e.workflow_name || '[Quick Command]'}</strong>
-                            <div class="timestamp">
-                                Started by ${escapeHtml(e.started_by || '')} at ${safeDate(e.started_at)?.toLocaleString() ?? 'N/A'}
-                                ${e.completed_at ? ` • Completed at ${safeDate(e.completed_at)?.toLocaleString() ?? 'N/A'}` : elapsed}
-                            </div>
-                        </div>
-                    `;
-                }).join('');
-
-            document.getElementById('executionList').innerHTML = fullHtml;
-        }
-
-        function filterExecutions() {
-            renderFilteredExecutions();
-        }
-
-        function clearFilters() {
-            document.getElementById('executionSearch').value = '';
-            document.getElementById('statusFilter').value = '';
-            renderFilteredExecutions();
-        }
-
-        function toggleCompareMode() {
-            compareMode = !compareMode;
-            selectedExecutions = new Set();
-
-            const btn = document.getElementById('compareModeBtn');
-            const compareBtn = document.getElementById('compareBtn');
-            const instructions = document.getElementById('compareInstructions');
-
-            if (compareMode) {
-                btn.textContent = '✗ Exit Compare Mode';
-                btn.style.borderColor = 'var(--terminal-amber)';
-                btn.style.color = 'var(--terminal-amber)';
-                compareBtn.style.display = 'inline-flex';
-                instructions.style.display = 'block';
-            } else {
-                btn.textContent = '📊 Compare Mode';
-                btn.style.borderColor = '';
-                btn.style.color = '';
-                compareBtn.style.display = 'none';
-                instructions.style.display = 'none';
-            }
-
-            renderFilteredExecutions();
-        }
-
-        function toggleExecutionSelection(executionId) {
-            if (selectedExecutions.has(executionId)) {
-                selectedExecutions.delete(executionId);
-            } else {
-                if (selectedExecutions.size >= 5) {
-                    showTerminalNotification('Maximum 5 executions can be compared', 'error');
-                    return;
-                }
-                selectedExecutions.add(executionId);
-            }
-
-            renderFilteredExecutions();
-
-            // Update compare button text
-            const compareBtn = document.getElementById('compareBtn');
-            if (selectedExecutions.size >= 2) {
-                compareBtn.textContent = `⚖️ Compare Selected (${selectedExecutions.size})`;
-            } else {
-                compareBtn.textContent = '⚖️ Compare Selected';
-            }
-        }
-
-        async function compareSelectedExecutions() {
-            if (selectedExecutions.size < 2) {
-                showTerminalNotification('Please select at least 2 executions to compare', 'error');
-                return;
-            }
-
-            // Fetch detailed data for all selected executions
-            const executionDetails = [];
-            for (const execId of selectedExecutions) {
-                try {
-                    const response = await fetch(`/api/executions/${execId}`);
-                    if (response.ok) {
-                        executionDetails.push(await response.json());
-                    }
-                } catch (error) {
-                    console.error('Error fetching execution:', error);
-                }
-            }
-
-            if (executionDetails.length < 2) {
-                showTerminalNotification('Failed to load execution details', 'error');
-                return;
-            }
-
-            // Generate comparison view
-            let comparisonHtml = '<div style="display: grid; gap: 20px;">';
-
-            // Summary table
-            comparisonHtml += `
-                <div style="background: rgba(0, 255, 65, 0.05); border: 2px solid var(--terminal-green); padding: 15px;">
-                    <h3 style="margin-top: 0; color: var(--terminal-amber);">Comparison Summary</h3>
-                    <table style="width: 100%; border-collapse: collapse; font-family: var(--font-mono); font-size: 0.9em;">
-                        <thead>
-                            <tr style="border-bottom: 2px solid var(--terminal-green);">
-                                <th style="text-align: left; padding: 8px; color: var(--terminal-amber);">Execution</th>
-                                <th style="text-align: left; padding: 8px; color: var(--terminal-amber);">Status</th>
-                                <th style="text-align: left; padding: 8px; color: var(--terminal-amber);">Started</th>
-                                <th style="text-align: left; padding: 8px; color: var(--terminal-amber);">Duration</th>
-                            </tr>
-                        </thead>
-                        <tbody>
-                            ${executionDetails.map((exec, idx) => {
-                                const duration = exec.completed_at ?
-                                    Math.round((new Date(exec.completed_at) - new Date(exec.started_at)) / 1000) + 's' :
-                                    'Running...';
-                                return `
-                                    <tr style="border-bottom: 1px solid #003300;">
-                                        <td style="padding: 8px; color: var(--terminal-green);">Execution ${idx + 1}</td>
-                                        <td style="padding: 8px;"><span class="status ${exec.status}" style="font-size: 0.85em;">${exec.status}</span></td>
-                                        <td style="padding: 8px; color: var(--terminal-green);">${safeDate(exec.started_at)?.toLocaleString() ?? 'N/A'}</td>
-                                        <td style="padding: 8px; color: var(--terminal-green);">${duration}</td>
-                                    </tr>
-                                `;
-                            }).join('')}
-                        </tbody>
-                    </table>
-                </div>
-            `;
-
-            // Side-by-side output comparison
-            comparisonHtml += `
-                <div style="background: rgba(0, 255, 65, 0.05); border: 2px solid var(--terminal-green); padding: 15px;">
-                    <h3 style="margin-top: 0; color: var(--terminal-amber);">Output Comparison</h3>
-                    <div style="display: grid; grid-template-columns: repeat(${executionDetails.length}, 1fr); gap: 15px;">
-                        ${executionDetails.map((exec, idx) => {
-                            const logs = typeof exec.logs === 'string' ? JSON.parse(exec.logs) : exec.logs;
-                            const resultLog = logs.find(l => l.action === 'command_result');
-                            const stdout = resultLog?.stdout || 'No output';
-                            const stderr = resultLog?.stderr || '';
-
-                            return `
-                                <div style="border: 2px solid var(--terminal-green); background: #000;">
-                                    <div style="background: var(--bg-secondary); padding: 10px; border-bottom: 2px solid var(--terminal-green);">
-                                        <strong style="color: var(--terminal-amber);">Execution ${idx + 1}</strong>
-                                        <div style="font-size: 0.85em; color: var(--terminal-green);">
-                                            ${exec.workflow_name || '[Quick Command]'}
-                                        </div>
-                                    </div>
-                                    <div style="padding: 12px;">
-                                        ${stdout ? `
-                                            <div style="margin-bottom: 10px;">
-                                                <div style="color: var(--terminal-amber); font-weight: bold; margin-bottom: 5px;">STDOUT:</div>
-                                                <pre style="margin: 0; color: var(--terminal-green); font-size: 0.85em; max-height: 400px; overflow-y: auto; white-space: pre-wrap;">${escapeHtml(stdout)}</pre>
-                                            </div>
-                                        ` : ''}
-                                        ${stderr ? `
-                                            <div>
-                                                <div style="color: #ff4444; font-weight: bold; margin-bottom: 5px;">STDERR:</div>
-                                                <pre style="margin: 0; color: #ff4444; font-size: 0.85em; max-height: 200px; overflow-y: auto; white-space: pre-wrap;">${escapeHtml(stderr)}</pre>
-                                            </div>
-                                        ` : ''}
-                                    </div>
-                                </div>
-                            `;
-                        }).join('')}
-                    </div>
-                </div>
-            `;
-
-            // Diff analysis (simple line-by-line comparison for 2 executions)
-            if (executionDetails.length === 2) {
-                const logs1 = typeof executionDetails[0].logs === 'string' ? JSON.parse(executionDetails[0].logs) : executionDetails[0].logs;
-                const logs2 = typeof executionDetails[1].logs === 'string' ? JSON.parse(executionDetails[1].logs) : executionDetails[1].logs;
-
-                const result1 = logs1.find(l => l.action === 'command_result');
-                const result2 = logs2.find(l => l.action === 'command_result');
-
-                const stdout1 = result1?.stdout || '';
-                const stdout2 = result2?.stdout || '';
-
-                const lines1 = stdout1.split('\n');
-                const lines2 = stdout2.split('\n');
-                const maxLines = Math.max(lines1.length, lines2.length);
-
-                let diffLines = [];
-                let identicalCount = 0;
-                let differentCount = 0;
-
-                for (let i = 0; i < maxLines; i++) {
-                    const line1 = lines1[i] || '';
-                    const line2 = lines2[i] || '';
-
-                    if (line1 === line2) {
-                        identicalCount++;
-                        diffLines.push(`<div style="color: #666; padding: 2px;">${i+1}: ${escapeHtml(line1) || '(empty)'}</div>`);
-                    } else {
-                        differentCount++;
-                        diffLines.push(`
-                            <div style="background: rgba(255, 176, 0, 0.1); border-left: 3px solid var(--terminal-amber); padding: 2px; margin: 2px 0;">
-                                <div style="color: var(--terminal-green);">${i+1} [Exec 1]: ${escapeHtml(line1) || '(empty)'}</div>
-                                <div style="color: var(--terminal-amber);">${i+1} [Exec 2]: ${escapeHtml(line2) || '(empty)'}</div>
-                            </div>
-                        `);
-                    }
-                }
-
-                comparisonHtml += `
-                    <div style="background: rgba(0, 255, 65, 0.05); border: 2px solid var(--terminal-green); padding: 15px;">
-                        <h3 style="margin-top: 0; color: var(--terminal-amber);">Diff Analysis</h3>
-                        <div style="margin-bottom: 10px; font-family: var(--font-mono); font-size: 0.9em;">
-                            <span style="color: var(--terminal-green);">✓ Identical lines: ${identicalCount}</span> |
-                            <span style="color: var(--terminal-amber);">≠ Different lines: ${differentCount}</span>
-                        </div>
-                        <div style="background: #000; border: 2px solid var(--terminal-green); padding: 10px; max-height: 400px; overflow-y: auto; font-family: var(--font-mono); font-size: 0.85em;">
-                            ${diffLines.join('')}
-                        </div>
-                    </div>
-                `;
-            }
-
-            comparisonHtml += '</div>';
-
-            document.getElementById('compareContent').innerHTML = comparisonHtml;
-            document.getElementById('compareExecutionsModal').classList.add('show');
-        }
-
-        async function loadMoreExecutions() {
-            executionOffset += executionLimit;
-            await loadExecutions(true);
-        }
-
-        async function clearCompletedExecutions() {
-            if (!confirm('Delete all completed and failed executions?')) return;
-
-            try {
-                const response = await fetch('/api/executions/completed', { method: 'DELETE' });
-                if (!response.ok) {
-                    const err = await response.json().catch(() => ({}));
-                    showTerminalNotification(err.error || 'Failed to delete executions', 'error');
-                    return;
-                }
-                const data = await response.json();
-                showTerminalNotification(`Deleted ${data.deleted} execution(s)`, 'success');
-                refreshData();
-            } catch (error) {
-                console.error('Error clearing executions:', error);
-                showTerminalNotification('Error clearing executions', 'error');
-            }
-        }
-
-        // ── Workflow execution with optional param modal ───────────────────
-        let _pendingExecWorkflowId = null;
-
-        async function executeWorkflow(workflowId) {
-            const def = _workflowRegistry[workflowId] || {};
-            const paramDefs = def.params || [];
-            if (paramDefs.length > 0) {
-                showParamModal(workflowId, paramDefs);
-            } else {
-                const name = document.querySelector(`[onclick="executeWorkflow('${workflowId}')"]`)
-                    ?.closest('.workflow-item')?.querySelector('.workflow-name')?.textContent || 'this workflow';
-                const choice = confirm(`Execute: ${name}?\n\nClick OK to run normally, or Cancel to abort.\n(Use the workflow's Run button with dry-run checkbox for a dry run.)`);
-                if (!choice) return;
-                await startExecution(workflowId, {}, false);
-            }
-        }
-
-        async function startExecution(workflowId, params, dryRun = false) {
-            try {
-                const response = await fetch('/api/executions', {
-                    method: 'POST',
-                    headers: { 'Content-Type': 'application/json' },
-                    body: JSON.stringify({ workflow_id: workflowId, params, dry_run: dryRun })
-                });
-                if (response.ok) {
-                    switchTab('executions');
-                    refreshData();
-                } else {
-                    const err = await response.json().catch(() => ({}));
-                    alert('Failed to start: ' + (err.error || response.status));
-                }
-            } catch (error) {
-                alert('Error starting workflow: ' + error.message);
-            }
-        }
-
-        function showParamModal(workflowId, paramDefs) {
-            _pendingExecWorkflowId = workflowId;
-            const form = document.getElementById('paramModalForm');
-            form.innerHTML = paramDefs.map(p => `
-                <div style="margin-bottom:14px;">
-                    <label style="display:block;margin-bottom:4px;color:var(--terminal-amber);font-size:.85em;">
-                        ${p.label || p.name}${p.required ? ' <span style="color:var(--terminal-red)">*</span>' : ''}
-                    </label>
-                    <input type="text" id="param_${p.name}"
-                        placeholder="${p.placeholder || ''}"
-                        style="width:100%;background:#0a0a0a;border:1px solid var(--terminal-green);color:var(--terminal-green);font-family:var(--font-mono);padding:6px 8px;font-size:.9em;"
-                        ${p.required ? 'required' : ''}>
-                </div>`).join('');
-            document.getElementById('paramModal').style.display = 'flex';
-            // Focus first input; Enter key submits — use single delegated listener to avoid duplicates
-            if (form._keydownHandler) form.removeEventListener('keydown', form._keydownHandler);
-            form._keydownHandler = (e) => { if (e.key === 'Enter' && e.target.tagName === 'INPUT') submitParamForm(); };
-            form.addEventListener('keydown', form._keydownHandler);
-            const first = form.querySelector('input');
-            if (first) setTimeout(() => first.focus(), 50);
-        }
-
-        function closeParamModal() {
-            document.getElementById('paramModal').style.display = 'none';
-            document.getElementById('paramDryRun').checked = false;
-            _pendingExecWorkflowId = null;
-        }
-
-        async function submitParamForm() {
-            if (!_pendingExecWorkflowId) return;
-            const def = _workflowRegistry[_pendingExecWorkflowId] || {};
-            const paramDefs = def.params || [];
-            const params = {};
-            for (const p of paramDefs) {
-                const el = document.getElementById(`param_${p.name}`);
-                const val = el ? el.value.trim() : '';
-                if (p.required && !val) {
-                    el.style.borderColor = 'var(--terminal-red)';
-                    el.focus();
-                    return;
-                }
-                if (val) params[p.name] = val;
-            }
-            const dryRun = document.getElementById('paramDryRun').checked;
-            const wfId = _pendingExecWorkflowId;
-            closeParamModal();
-            await startExecution(wfId, params, dryRun);
-        }
-
-        async function viewExecution(executionId) {
-            try {
-                const response = await fetch(`/api/executions/${executionId}`);
-                const execution = await response.json();
-                
-                let html = `
-                    <div><strong>Status:</strong> <span class="status ${execution.status}">${execution.status}</span></div>
-                    <div><strong>Started:</strong> ${safeDate(execution.started_at)?.toLocaleString() ?? 'N/A'}</div>
-                    ${execution.completed_at ? `<div><strong>Completed:</strong> ${safeDate(execution.completed_at)?.toLocaleString() ?? 'N/A'}</div>` : ''}
-                    <div><strong>Started by:</strong> ${escapeHtml(execution.started_by || '')}</div>
-                `;
-                
-                if (execution.waiting_for_input && execution.prompt) {
-                    const promptOutput = execution.prompt.output || '';
-                    html += `
-                        <div class="prompt-box">
-                            <h3>Waiting for Input</h3>
-                            ${promptOutput ? `<pre class="prompt-output">${escapeHtml(promptOutput)}</pre>` : ''}
-                            <p>${escapeHtml(execution.prompt.message || '')}</p>
-                            <div style="margin-top: 10px;">
-                                ${(execution.prompt.options || []).map(opt =>
-                                    `<button class="prompt-opt-btn" data-opt="${opt.replace(/&/g,'&amp;').replace(/"/g,'&quot;')}" onclick="respondToPrompt('${executionId}', this.dataset.opt)">${escapeHtml(opt)}</button>`
-                                ).join('')}
-                            </div>
-                        </div>
-                    `;
-                }
-
-                if (execution.logs && execution.logs.length > 0) {
-                    html += '<h3 style="margin-top: 20px; margin-bottom: 10px;">Execution Logs:</h3>';
-                    // Pass executionId only to prompt steps that are still pending (no response after them)
-                    const logs = execution.logs;
-                    logs.forEach((log, idx) => {
-                        let promptExecId = null;
-                        if (log.action === 'prompt' && execution.waiting_for_input) {
-                            // Only make interactive if this is the last prompt and no response follows
-                            const hasResponse = logs.slice(idx + 1).some(l => l.action === 'prompt_response');
-                            if (!hasResponse) promptExecId = executionId;
-                        }
-                        html += formatLogEntry(log, promptExecId);
-                    });
-                }
-
-                // Add action buttons
-                html += '<div style="margin-top: 20px; padding-top: 15px; border-top: 1px solid var(--terminal-green); display: flex; gap: 10px;">';
-
-                // Abort button (only for running executions)
-                if (execution.status === 'running') {
-                    html += `<button onclick="abortExecution('${executionId}')" style="background-color: var(--terminal-red); border-color: var(--terminal-red);">⛔ Abort Execution</button>`;
-                }
-
-                // Re-run button (only for quick commands with command in logs)
-                const commandLog = execution.logs?.find(l => l.action === 'command_sent');
-                if (commandLog && commandLog.command) {
-                    html += `<button onclick="rerunCommand('${escapeHtml(commandLog.command)}', '${escapeHtml(commandLog.worker_id || '')}')">🔄 Re-run Command</button>`;
-                }
-
-                // Download logs button
-                html += `<button onclick="downloadExecutionLogs('${executionId}')">💾 Download Logs</button>`;
-
-                html += '</div>';
-
-                document.getElementById('executionDetails').innerHTML = html;
-                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');
-            }
-        }
-
-        function formatLogEntry(log, executionId = null) {
-            const timestamp = new Date(log.timestamp).toLocaleTimeString();
-
-            // Format based on log action type
-            if (log.action === 'command_sent') {
-                return `
-                    <div class="log-entry log-command-sent">
-                        <div class="log-timestamp">[${timestamp}]</div>
-                        <div class="log-title">Command Sent</div>
-                        <div class="log-details">
-                            <div class="log-field"><span class="log-label">Command:</span> <code>${escapeHtml(log.command)}</code></div>
-                        </div>
-                    </div>
-                `;
-            }
-
-            if (log.action === 'command_result') {
-                const statusIcon = log.success ? '✓' : '✗';
-                const statusClass = log.success ? 'success' : 'failed';
-                return `
-                    <div class="log-entry log-command-result ${statusClass}">
-                        <div class="log-timestamp">[${timestamp}]</div>
-                        <div class="log-title">${statusIcon} Command Result</div>
-                        <div class="log-details">
-                            <div class="log-field"><span class="log-label">Status:</span> ${log.success ? 'Success' : 'Failed'}</div>
-                            ${log.duration ? `<div class="log-field"><span class="log-label">Duration:</span> ${log.duration}ms</div>` : ''}
-                            ${log.stdout ? `<div class="log-field"><span class="log-label">Output:</span><pre class="log-output">${escapeHtml(log.stdout)}</pre></div>` : ''}
-                            ${log.stderr ? `<div class="log-field"><span class="log-label">Errors:</span><pre class="log-output log-error">${escapeHtml(log.stderr)}</pre></div>` : ''}
-                            ${log.error ? `<div class="log-field"><span class="log-label">Error:</span> ${escapeHtml(log.error)}</div>` : ''}
-                        </div>
-                    </div>
-                `;
-            }
-
-            // Workflow step logs
-            if (log.action === 'step_started') {
-                return `
-                    <div class="log-entry" style="border-left-color: var(--terminal-amber);">
-                        <div class="log-timestamp">[${timestamp}]</div>
-                        <div class="log-title" style="color: var(--terminal-amber);">▶️ Step ${log.step}: ${escapeHtml(log.step_name || '')}</div>
-                    </div>
-                `;
-            }
-
-            if (log.action === 'step_completed') {
-                return `
-                    <div class="log-entry" style="border-left-color: var(--terminal-green);">
-                        <div class="log-timestamp">[${timestamp}]</div>
-                        <div class="log-title" style="color: var(--terminal-green);">✓ Step ${log.step} Completed: ${escapeHtml(log.step_name || '')}</div>
-                    </div>
-                `;
-            }
-
-            if (log.action === 'waiting') {
-                return `
-                    <div class="log-entry" style="border-left-color: var(--terminal-amber);">
-                        <div class="log-timestamp">[${timestamp}]</div>
-                        <div class="log-title" style="color: var(--terminal-amber);">⏳ Waiting ${escapeHtml(String(log.duration || 0))} seconds...</div>
-                    </div>
-                `;
-            }
-
-            if (log.action === 'parse_complete') {
-                const pairs = log.parsed || {};
-                const keys = Object.keys(pairs);
-                const tableRows = keys.map(k =>
-                    `<div class="log-parse-key">${escapeHtml(k)}</div><div class="log-parse-val">${escapeHtml(pairs[k])}</div>`
-                ).join('');
-                return `
-                    <div class="log-entry" style="border-left-color: #444; opacity:.85;">
-                        <div class="log-timestamp">[${timestamp}]</div>
-                        <div class="log-title" style="color:#666;">⚙ Parsed ${keys.length} variable${keys.length !== 1 ? 's' : ''}</div>
-                        ${keys.length > 0 ? `<div class="log-details"><div class="log-parse-table">${tableRows}</div></div>` : ''}
-                    </div>
-                `;
-            }
-
-            if (log.action === 'route_taken') {
-                return `
-                    <div class="log-entry" style="border-left-color: var(--terminal-cyan); opacity:.9;">
-                        <div class="log-timestamp">[${timestamp}]</div>
-                        <div class="log-title" style="color: var(--terminal-cyan);">⇒ Auto-route: Step ${log.step}</div>
-                        ${log.label ? `<div class="log-details"><div class="log-route-label">${escapeHtml(log.label)}</div>${log.goto ? `<div class="log-route-goto">→ ${escapeHtml(log.goto)}</div>` : ''}</div>` : ''}
-                    </div>
-                `;
-            }
-
-            if (log.action === 'no_workers') {
-                return `
-                    <div class="log-entry failed">
-                        <div class="log-timestamp">[${timestamp}]</div>
-                        <div class="log-title">✗ Step ${log.step}: No Workers Available</div>
-                        <div class="log-details">
-                            <div class="log-field">${escapeHtml(log.message)}</div>
-                        </div>
-                    </div>
-                `;
-            }
-
-            if (log.action === 'worker_offline') {
-                return `
-                    <div class="log-entry" style="border-left-color: #ff4444;">
-                        <div class="log-timestamp">[${timestamp}]</div>
-                        <div class="log-title" style="color: #ff4444;">⚠️ Worker Offline</div>
-                        <div class="log-details">
-                            <div class="log-field"><span class="log-label">Worker ID:</span> ${escapeHtml(log.worker_id || '')}</div>
-                        </div>
-                    </div>
-                `;
-            }
-
-            if (log.action === 'workflow_error') {
-                return `
-                    <div class="log-entry failed">
-                        <div class="log-timestamp">[${timestamp}]</div>
-                        <div class="log-title">✗ Workflow Error</div>
-                        <div class="log-details">
-                            <div class="log-field"><span class="log-label">Error:</span> ${escapeHtml(log.error)}</div>
-                        </div>
-                    </div>
-                `;
-            }
-
-            if (log.action === 'execution_aborted') {
-                return `
-                    <div class="log-entry" style="border-left-color: var(--terminal-red);">
-                        <div class="log-timestamp">[${timestamp}]</div>
-                        <div class="log-title" style="color: var(--terminal-red);">⛔ Execution Aborted</div>
-                        <div class="log-details">
-                            <div class="log-field"><span class="log-label">Aborted by:</span> ${escapeHtml(log.aborted_by)}</div>
-                        </div>
-                    </div>
-                `;
-            }
-
-            if (log.action === 'prompt') {
-                const optionsHtml = (log.options || []).map(opt => {
-                    if (executionId) {
-                        return `<button class="prompt-opt-btn" data-opt="${opt.replace(/&/g,'&amp;').replace(/"/g,'&quot;')}" onclick="respondToPrompt('${executionId}', this.dataset.opt)">${escapeHtml(opt)}</button>`;
-                    }
-                    return `<button class="prompt-opt-btn answered" disabled>${escapeHtml(opt)}</button>`;
-                }).join('');
-                return `
-                    <div class="log-entry" style="border-left-color: var(--terminal-cyan);">
-                        <div class="log-timestamp">[${timestamp}]</div>
-                        <div class="log-title" style="color: var(--terminal-cyan);">❓ Step ${log.step}: ${escapeHtml(log.step_name || 'Prompt')}</div>
-                        <div class="log-details">
-                            ${log.output ? `<pre class="log-output" style="max-height:300px;overflow-y:auto;margin-bottom:10px;">${escapeHtml(log.output)}</pre>` : ''}
-                            <div style="color: var(--terminal-green); margin-bottom: 10px;">${escapeHtml(log.message || '')}</div>
-                            <div>${optionsHtml}</div>
-                        </div>
-                    </div>
-                `;
-            }
-
-            if (log.action === 'prompt_response') {
-                return `
-                    <div class="log-entry" style="border-left-color: var(--terminal-green);">
-                        <div class="log-timestamp">[${timestamp}]</div>
-                        <div class="log-title" style="color: var(--terminal-green);">↪ Response: <strong style="color: var(--terminal-amber);">${escapeHtml(log.response || '')}</strong>${log.responded_by ? `<span style="color:#666;font-size:.85em;margin-left:10px;">by ${escapeHtml(log.responded_by)}</span>` : ''}</div>
-                    </div>
-                `;
-            }
-
-            if (log.action === 'step_skipped') {
-                return `
-                    <div class="log-entry" style="border-left-color: #555;">
-                        <div class="log-timestamp">[${timestamp}]</div>
-                        <div class="log-title" style="color: #666;">⊘ Step ${log.step} Skipped${log.reason ? ': ' + escapeHtml(log.reason) : ''}</div>
-                    </div>
-                `;
-            }
-
-            if (log.action === 'dry_run_skipped') {
-                return `
-                    <div class="log-entry" style="border-left-color: var(--terminal-amber);">
-                        <div class="log-timestamp">[${timestamp}]</div>
-                        <div class="log-title" style="color: var(--terminal-amber);">🔍 [DRY RUN] Step ${log.step} Skipped: ${escapeHtml(log.step_name || '')}</div>
-                    </div>
-                `;
-            }
-
-            if (log.action === 'execution_timeout') {
-                return `
-                    <div class="log-entry failed">
-                        <div class="log-timestamp">[${timestamp}]</div>
-                        <div class="log-title">⏱️ Execution Timeout</div>
-                        <div class="log-details">
-                            <div class="log-field">${escapeHtml(log.message || 'Execution exceeded maximum allowed time')}</div>
-                        </div>
-                    </div>
-                `;
-            }
-
-            if (log.action === 'goto_error') {
-                return `
-                    <div class="log-entry failed">
-                        <div class="log-timestamp">[${timestamp}]</div>
-                        <div class="log-title">✗ Goto Error</div>
-                        <div class="log-details">
-                            <div class="log-field"><span class="log-label">Target:</span> ${escapeHtml(String(log.target || ''))}</div>
-                        </div>
-                    </div>
-                `;
-            }
-
-            if (log.action === 'step_error') {
-                return `
-                    <div class="log-entry failed">
-                        <div class="log-timestamp">[${timestamp}]</div>
-                        <div class="log-title">✗ Step ${log.step} Error: ${escapeHtml(log.step_name || '')}</div>
-                        <div class="log-details">
-                            <div class="log-field"><span class="log-label">Error:</span> ${escapeHtml(log.error || '')}</div>
-                        </div>
-                    </div>
-                `;
-            }
-
-            if (log.action === 'workflow_result') {
-                const statusIcon = log.success ? '✓' : '✗';
-                const statusClass = log.success ? 'success' : 'failed';
-                return `
-                    <div class="log-entry ${statusClass}">
-                        <div class="log-timestamp">[${timestamp}]</div>
-                        <div class="log-title">${statusIcon} Workflow Result: ${log.success ? 'Success' : 'Failed'}</div>
-                        ${log.message ? `<div class="log-details"><div class="log-field">${escapeHtml(log.message)}</div></div>` : ''}
-                    </div>
-                `;
-            }
-
-            if (log.action === 'params') {
-                const paramStr = Object.entries(log.params || {}).map(([k, v]) => `${escapeHtml(k)}=${escapeHtml(String(v))}`).join(', ');
-                return `
-                    <div class="log-entry" style="border-left-color: #555;">
-                        <div class="log-timestamp">[${timestamp}]</div>
-                        <div class="log-title" style="color: #888;">⚙ Parameters: ${paramStr || '(none)'}</div>
-                    </div>
-                `;
-            }
-
-            if (log.action === 'server_restart_recovery') {
-                return `
-                    <div class="log-entry failed">
-                        <div class="log-timestamp">[${timestamp}]</div>
-                        <div class="log-title" style="color: var(--terminal-red);">⚠️ Server Restart Recovery</div>
-                        <div class="log-details">
-                            <div class="log-field">${escapeHtml(log.message || 'Execution interrupted by server restart')}</div>
-                        </div>
-                    </div>
-                `;
-            }
-
-            // Fallback for unknown log types
-            return `<div class="log-entry" style="border-left-color:#555;"><div class="log-timestamp">[${timestamp}]</div><div class="log-title" style="color:#666;">${escapeHtml(log.action || 'unknown')}</div></div>`;
-        }
-
-        function escapeHtml(text) {
-            if (text == null) return '';
-            const div = document.createElement('div');
-            div.textContent = String(text);
-            return div.innerHTML;
-        }
-
-        function formatBytes(bytes) {
-            if (!bytes || bytes === 0) return '0 B';
-            const k = 1024;
-            const sizes = ['B', 'KB', 'MB', 'GB', 'TB'];
-            const i = Math.floor(Math.log(bytes) / Math.log(k));
-            return (bytes / Math.pow(k, i)).toFixed(1) + ' ' + sizes[i];
-        }
-
-        function formatUptime(seconds) {
-            if (!seconds) return 'N/A';
-            const days = Math.floor(seconds / 86400);
-            const hours = Math.floor((seconds % 86400) / 3600);
-            const minutes = Math.floor((seconds % 3600) / 60);
-            if (days > 0) return `${days}d ${hours}h ${minutes}m`;
-            if (hours > 0) return `${hours}h ${minutes}m`;
-            return `${minutes}m`;
-        }
-
-        function getTimeAgo(date) {
-            if (!date || isNaN(date)) return 'N/A';
-            const seconds = Math.floor((new Date() - date) / 1000);
-            if (seconds < 0) return 'just now';
-            if (seconds < 60) return `${seconds}s ago`;
-            const minutes = Math.floor(seconds / 60);
-            if (minutes < 60) return `${minutes}m ago`;
-            const hours = Math.floor(minutes / 60);
-            if (hours < 24) return `${hours}h ago`;
-            const days = Math.floor(hours / 24);
-            return `${days}d ago`;
-        }
-
-        function safeDate(val) {
-            if (!val) return null;
-            const d = new Date(val);
-            return isNaN(d) ? null : d;
-        }
-
-        function formatElapsed(startedAt) {
-            const start = safeDate(startedAt);
-            if (!start) return '';
-            const secs = Math.floor((Date.now() - start) / 1000);
-            if (secs < 60) return `${secs}s`;
-            const mins = Math.floor(secs / 60);
-            if (mins < 60) return `${mins}m ${secs % 60}s`;
-            return `${Math.floor(mins / 60)}h ${mins % 60}m`;
-        }
-
-        async function rerunCommand(command, workerId) {
-            if (!confirm(`Re-run command: ${command}?`)) return;
-
-            closeModal('viewExecutionModal');
-            switchTab('quickcommand');
-
-            // Set the worker and command
-            document.getElementById('quickWorkerSelect').value = workerId;
-            document.getElementById('quickCommand').value = command;
-
-            // Scroll to the command field
-            document.getElementById('quickCommand').scrollIntoView({ behavior: 'smooth' });
-        }
-
-        async function abortExecution(executionId) {
-            if (!confirm('Are you sure you want to abort this execution? This will mark it as failed.')) return;
-
-            try {
-                const response = await fetch(`/api/executions/${executionId}/abort`, {
-                    method: 'POST',
-                    headers: { 'Content-Type': 'application/json' }
-                });
-
-                if (response.ok) {
-                    showTerminalNotification('Execution aborted', 'success');
-                    closeModal('viewExecutionModal');
-                    refreshData();
-                } else {
-                    const err = await response.json().catch(() => ({}));
-                    alert(err.error || 'Failed to abort execution');
-                }
-            } catch (error) {
-                console.error('Error aborting execution:', error);
-                alert('Error aborting execution');
-            }
-        }
-
-        async function downloadExecutionLogs(executionId) {
-            try {
-                const response = await fetch(`/api/executions/${executionId}`);
-                const execution = await response.json();
-
-                // Create downloadable JSON
-                const data = {
-                    execution_id: executionId,
-                    workflow_name: execution.workflow_name || '[Quick Command]',
-                    status: execution.status,
-                    started_by: execution.started_by,
-                    started_at: execution.started_at,
-                    completed_at: execution.completed_at,
-                    logs: execution.logs
-                };
-
-                // Create blob and download
-                const blob = new Blob([JSON.stringify(data, null, 2)], { type: 'application/json' });
-                const url = URL.createObjectURL(blob);
-                const a = document.createElement('a');
-                a.href = url;
-                a.download = `execution-${executionId}-${new Date().toISOString().split('T')[0]}.json`;
-                document.body.appendChild(a);
-                a.click();
-                document.body.removeChild(a);
-                URL.revokeObjectURL(url);
-            } catch (error) {
-                console.error('Error downloading logs:', error);
-                alert('Error downloading execution logs');
-            }
-        }
-
-        async function respondToPrompt(executionId, response) {
-            try {
-                const res = await fetch(`/api/executions/${executionId}/respond`, {
-                    method: 'POST',
-                    headers: { 'Content-Type': 'application/json' },
-                    body: JSON.stringify({ response })
-                });
-
-                if (res.ok) {
-                    showTerminalNotification(`Response submitted: ${response}`, 'success');
-                    // Refresh the modal to show the next step
-                    viewExecution(executionId);
-                } else {
-                    const data = await res.json().catch(() => ({}));
-                    showTerminalNotification(data.error || 'Failed to submit response', 'error');
-                }
-            } catch (error) {
-                console.error('Error responding to prompt:', error);
-                showTerminalNotification('Error submitting response', 'error');
-            }
-        }
-
-        // Command Templates
-        const commandTemplates = [
-            { name: 'System Info', cmd: 'uname -a', desc: 'Show system information' },
-            { name: 'Uptime', cmd: 'uptime', desc: 'Show system uptime and load' },
-            { name: 'Disk Usage', cmd: 'df -h', desc: 'Show disk space usage' },
-            { name: 'Memory Usage', cmd: 'free -h', desc: 'Show memory usage' },
-            { name: 'CPU Info', cmd: 'lscpu', desc: 'Show CPU information' },
-            { name: 'Running Processes', cmd: 'ps aux --sort=-%mem | head -20', desc: 'Top 20 processes by memory' },
-            { name: 'Network Interfaces', cmd: 'ip addr show', desc: 'Show network interfaces' },
-            { name: 'Active Connections', cmd: 'ss -tunap', desc: 'Show active network connections' },
-            { name: 'Docker Containers', cmd: 'docker ps -a', desc: 'List all Docker containers' },
-            { name: 'System Log Tail', cmd: 'tail -n 50 /var/log/syslog', desc: 'Last 50 lines of system log' },
-            { name: 'Who is Logged In', cmd: 'w', desc: 'Show logged in users' },
-            { name: 'Last Logins', cmd: 'last -n 20', desc: 'Show last 20 logins' }
-        ];
-
-        function showCommandTemplates() {
-            const html = commandTemplates.map((template, index) => `
-                <div class="template-item" onclick="useTemplate(${index})" style="cursor: pointer; padding: 12px; margin: 8px 0; background: #001a00; border: 1px solid #003300; border-left: 3px solid var(--terminal-green);">
-                    <div style="color: var(--terminal-green); font-weight: bold; margin-bottom: 4px;">${template.name}</div>
-                    <div style="color: var(--terminal-amber); font-family: var(--font-mono); font-size: 0.9em; margin-bottom: 4px;"><code>${escapeHtml(template.cmd)}</code></div>
-                    <div style="color: #666; font-size: 0.85em;">${template.desc}</div>
-                </div>
-            `).join('');
-
-            document.getElementById('templateList').innerHTML = html;
-            document.getElementById('commandTemplatesModal').classList.add('show');
-        }
-
-        function useTemplate(index) {
-            document.getElementById('quickCommand').value = commandTemplates[index].cmd;
-            closeModal('commandTemplatesModal');
-        }
-
-        function showCommandHistory() {
-            const history = JSON.parse(localStorage.getItem('commandHistory') || '[]');
-
-            if (history.length === 0) {
-                document.getElementById('historyList').innerHTML = '<div class="empty">No command history yet</div>';
-            } else {
-                const html = history.map((item, index) => `
-                    <div class="history-item" onclick="useHistoryCommand(${index})" style="cursor: pointer; padding: 12px; margin: 8px 0; background: #001a00; border: 1px solid #003300; border-left: 3px solid var(--terminal-amber);">
-                        <div style="color: var(--terminal-green); font-family: var(--font-mono); margin-bottom: 4px;"><code>${escapeHtml(item.command)}</code></div>
-                        <div style="color: #666; font-size: 0.85em;">${safeDate(item.timestamp)?.toLocaleString() ?? 'N/A'} - ${item.worker}</div>
-                    </div>
-                `).join('');
-                document.getElementById('historyList').innerHTML = html;
-            }
-
-            document.getElementById('commandHistoryModal').classList.add('show');
-        }
-
-        function useHistoryCommand(index) {
-            const history = JSON.parse(localStorage.getItem('commandHistory') || '[]');
-            document.getElementById('quickCommand').value = history[index].command;
-            closeModal('commandHistoryModal');
-        }
-
-        function addToCommandHistory(command, workerName) {
-            const history = JSON.parse(localStorage.getItem('commandHistory') || '[]');
-
-            // Add to beginning, limit to 50 items
-            history.unshift({
-                command: command,
-                worker: workerName,
-                timestamp: new Date().toISOString()
-            });
-
-            // Keep only last 50 commands
-            if (history.length > 50) {
-                history.splice(50);
-            }
-
-            localStorage.setItem('commandHistory', JSON.stringify(history));
-        }
-
-        function toggleWorkerSelection() {
-            const mode = document.querySelector('input[name="execMode"]:checked').value;
-            const singleMode = document.getElementById('singleWorkerMode');
-            const multiMode = document.getElementById('multiWorkerMode');
-
-            if (mode === 'single') {
-                singleMode.style.display = 'block';
-                multiMode.style.display = 'none';
-            } else {
-                singleMode.style.display = 'none';
-                multiMode.style.display = 'block';
-            }
-        }
-
-        function selectAllWorkers() {
-            document.querySelectorAll('input[name="workerCheckbox"]').forEach(cb => {
-                cb.checked = true;
-            });
-        }
-
-        function selectOnlineWorkers() {
-            document.querySelectorAll('input[name="workerCheckbox"]').forEach(cb => {
-                cb.checked = cb.getAttribute('data-status') === 'online';
-            });
-        }
-
-        function deselectAllWorkers() {
-            document.querySelectorAll('input[name="workerCheckbox"]').forEach(cb => {
-                cb.checked = false;
-            });
-        }
-
-        async function deleteWorker(workerId, name) {
-            if (!confirm(`Delete worker: ${name}?`)) return;
-            
-            try {
-                const response = await fetch(`/api/workers/${workerId}`, {
-                    method: 'DELETE'
-                });
-                
-                if (response.ok) {
-                    alert('Worker deleted');
-                    refreshData();
-                } else {
-                    const data = await response.json();
-                    alert(data.error || 'Failed to delete worker');
-                }
-            } catch (error) {
-                console.error('Error deleting worker:', error);
-                alert('Error deleting worker');
-            }
-        }
-
-        async function deleteWorkflow(workflowId, name) {
-            if (!confirm(`Delete workflow: ${name}? This cannot be undone.`)) return;
-            
-            try {
-                const response = await fetch(`/api/workflows/${workflowId}`, {
-                    method: 'DELETE'
-                });
-                
-                if (response.ok) {
-                    alert('Workflow deleted');
-                    refreshData();
-                } else {
-                    const data = await response.json();
-                    alert(data.error || 'Failed to delete workflow');
-                }
-            } catch (error) {
-                console.error('Error deleting workflow:', error);
-                alert('Error deleting workflow');
-            }
-        }
-
-        async function editWorkflow(workflowId) {
-            try {
-                const response = await fetch(`/api/workflows/${workflowId}`);
-                if (!response.ok) throw new Error('Workflow not found');
-                const wf = await response.json();
-                document.getElementById('editWorkflowId').value = wf.id;
-                document.getElementById('editWorkflowName').value = wf.name;
-                document.getElementById('editWorkflowDescription').value = wf.description || '';
-                document.getElementById('editWorkflowDefinition').value = JSON.stringify(wf.definition, null, 2);
-                document.getElementById('editWorkflowWebhookUrl').value = wf.webhook_url || '';
-                document.getElementById('editWorkflowError').style.display = 'none';
-                document.getElementById('editWorkflowModal').classList.add('show');
-            } catch (error) {
-                console.error('Error loading workflow for edit:', error);
-                showTerminalNotification('Error loading workflow', 'error');
-            }
-        }
-
-        async function saveWorkflow() {
-            const id = document.getElementById('editWorkflowId').value;
-            const name = document.getElementById('editWorkflowName').value.trim();
-            const description = document.getElementById('editWorkflowDescription').value.trim();
-            const definitionText = document.getElementById('editWorkflowDefinition').value;
-            const webhook_url = document.getElementById('editWorkflowWebhookUrl').value.trim() || null;
-            const errorEl = document.getElementById('editWorkflowError');
-
-            if (!name) {
-                errorEl.textContent = 'Name is required';
-                errorEl.style.display = 'block';
-                return;
-            }
-
-            let definition;
-            try {
-                definition = JSON.parse(definitionText);
-            } catch (e) {
-                errorEl.textContent = 'Invalid JSON: ' + e.message;
-                errorEl.style.display = 'block';
-                return;
-            }
-            errorEl.style.display = 'none';
-
-            try {
-                const response = await fetch(`/api/workflows/${id}`, {
-                    method: 'PUT',
-                    headers: { 'Content-Type': 'application/json' },
-                    body: JSON.stringify({ name, description, definition, webhook_url })
-                });
-
-                if (response.ok) {
-                    closeModal('editWorkflowModal');
-                    showTerminalNotification('Workflow saved!', 'success');
-                    loadWorkflows();
-                } else {
-                    const data = await response.json().catch(() => ({}));
-                    errorEl.textContent = data.error || 'Failed to save workflow';
-                    errorEl.style.display = 'block';
-                }
-            } catch (error) {
-                errorEl.textContent = 'Error saving workflow: ' + error.message;
-                errorEl.style.display = 'block';
-            }
-        }
-
-        function showCreateWorkflow() {
-            document.getElementById('workflowName').value = '';
-            document.getElementById('workflowDescription').value = '';
-            document.getElementById('workflowDefinition').value = '';
-            document.getElementById('workflowWebhookUrl').value = '';
-            document.getElementById('createWorkflowModal').classList.add('show');
-        }
-
-        async function createWorkflow() {
-            const name = document.getElementById('workflowName').value;
-            const description = document.getElementById('workflowDescription').value;
-            const definitionText = document.getElementById('workflowDefinition').value;
-            const webhook_url = document.getElementById('workflowWebhookUrl').value.trim() || null;
-
-            if (!name || !definitionText) {
-                alert('Name and definition are required');
-                return;
-            }
-
-            let definition;
-            try {
-                definition = JSON.parse(definitionText);
-            } catch (error) {
-                alert('Invalid JSON definition: ' + error.message);
-                return;
-            }
-
-            try {
-                const response = await fetch('/api/workflows', {
-                    method: 'POST',
-                    headers: { 'Content-Type': 'application/json' },
-                    body: JSON.stringify({ name, description, definition, webhook_url })
-                });
-
-                if (response.ok) {
-                    closeModal('createWorkflowModal');
-                    switchTab('workflows');
-                    showTerminalNotification('Workflow created successfully!', 'success');
-                    refreshData();
-                } else {
-                    alert('Failed to create workflow');
-                }
-            } catch (error) {
-                alert('Error creating workflow: ' + error.message);
-            }
-        }
-
-        async function executeQuickCommand() {
-            const command = document.getElementById('quickCommand').value;
-            const execMode = document.querySelector('input[name="execMode"]:checked').value;
-
-            if (!command) {
-                alert('Please enter a command');
-                return;
-            }
-
-            const resultDiv = document.getElementById('quickCommandResult');
-
-            if (execMode === 'single') {
-                // Single worker execution
-                const workerId = document.getElementById('quickWorkerSelect').value;
-
-                if (!workerId) {
-                    alert('Please select a worker');
-                    return;
-                }
-
-                const worker = workers.find(w => w.id === workerId);
-                const workerName = worker ? worker.name : 'Unknown';
-
-                resultDiv.innerHTML = '<div class="loading">Executing command...</div>';
-
-                try {
-                    const response = await fetch(`/api/workers/${workerId}/command`, {
-                        method: 'POST',
-                        headers: { 'Content-Type': 'application/json' },
-                        body: JSON.stringify({ command })
-                    });
-
-                    if (response.ok) {
-                        const data = await response.json();
-                        addToCommandHistory(command, workerName);
-
-                        resultDiv.innerHTML = `
-                            <div style="background: #001a00; border: 2px solid var(--terminal-green); padding: 15px;">
-                                <strong style="color: var(--terminal-green);">✓ Command sent successfully!</strong>
-                                <div style="margin-top: 10px; font-family: var(--font-mono); font-size: 0.9em; color: var(--terminal-green);">
-                                    Execution ID: ${escapeHtml(String(data.execution_id || ''))}
-                                </div>
-                                <div style="margin-top: 10px; color: var(--terminal-amber);">
-                                    Check the Executions tab to see the results
-                                </div>
-                            </div>
-                        `;
-                        terminalBeep('success');
-                    } else {
-                        resultDiv.innerHTML = '<div style="color: #ef4444;">Failed to execute command</div>';
-                        terminalBeep('error');
-                    }
-                } catch (error) {
-                    console.error('Error executing command:', error);
-                    resultDiv.innerHTML = '<div style="color: #ef4444;">Error: ' + error.message + '</div>';
-                    terminalBeep('error');
-                }
-            } else {
-                // Multi-worker execution
-                const selectedCheckboxes = document.querySelectorAll('input[name="workerCheckbox"]:checked');
-                const selectedWorkerIds = Array.from(selectedCheckboxes).map(cb => cb.value);
-
-                if (selectedWorkerIds.length === 0) {
-                    alert('Please select at least one worker');
-                    return;
-                }
-
-                resultDiv.innerHTML = `<div class="loading">Executing command on ${selectedWorkerIds.length} worker(s)...</div>`;
-
-                const results = [];
-                let successCount = 0;
-                let failCount = 0;
-
-                for (const workerId of selectedWorkerIds) {
-                    try {
-                        const worker = workers.find(w => w.id === workerId);
-                        const response = await fetch(`/api/workers/${workerId}/command`, {
-                            method: 'POST',
-                            headers: { 'Content-Type': 'application/json' },
-                            body: JSON.stringify({ command })
-                        });
-
-                        if (response.ok) {
-                            const data = await response.json();
-                            results.push({
-                                worker: worker.name,
-                                success: true,
-                                executionId: data.execution_id
-                            });
-                            successCount++;
-                        } else {
-                            results.push({
-                                worker: worker.name,
-                                success: false,
-                                error: 'Failed to execute'
-                            });
-                            failCount++;
-                        }
-                    } catch (error) {
-                        const worker = workers.find(w => w.id === workerId);
-                        results.push({
-                            worker: worker ? worker.name : workerId,
-                            success: false,
-                            error: error.message
-                        });
-                        failCount++;
-                    }
-                }
-
-                // Add to history with multi-worker notation
-                addToCommandHistory(command, `${selectedWorkerIds.length} workers`);
-
-                // Display results summary
-                resultDiv.innerHTML = `
-                    <div style="background: #001a00; border: 2px solid var(--terminal-green); padding: 15px;">
-                        <strong style="color: var(--terminal-amber);">Multi-Worker Execution Complete</strong>
-                        <div style="margin-top: 10px; font-family: var(--font-mono); font-size: 0.9em;">
-                            <span style="color: var(--terminal-green);">✓ Success: ${successCount}</span> |
-                            <span style="color: #ef4444;">✗ Failed: ${failCount}</span>
-                        </div>
-                        <div style="margin-top: 15px; max-height: 300px; overflow-y: auto;">
-                            ${results.map(r => `
-                                <div style="margin-bottom: 8px; padding: 8px; border-left: 3px solid ${r.success ? 'var(--terminal-green)' : '#ef4444'}; background: rgba(0, 0, 0, 0.5);">
-                                    <strong>${r.worker}</strong>:
-                                    ${r.success ?
-                                        `<span style="color: var(--terminal-green);">✓ Sent (ID: ${r.executionId.substring(0, 8)}...)</span>` :
-                                        `<span style="color: #ef4444;">✗ ${r.error}</span>`
-                                    }
-                                </div>
-                            `).join('')}
-                        </div>
-                        <div style="margin-top: 15px; color: var(--terminal-amber);">
-                            Check the Executions tab to see detailed results
-                        </div>
-                    </div>
-                `;
-
-                if (failCount === 0) {
-                    terminalBeep('success');
-                } else if (successCount > 0) {
-                    terminalBeep('info');
-                } else {
-                    terminalBeep('error');
-                }
-            }
-        }
-
-        function closeModal(modalId) {
-            document.getElementById(modalId).classList.remove('show');
-        }
-
-        function switchTab(tabName) {
-            document.querySelectorAll('.tab').forEach(t => t.classList.remove('active'));
-            document.querySelectorAll('.tab-content').forEach(c => c.classList.remove('active'));
-
-            const tabBtn = document.querySelector(`.tab[onclick*="'${tabName}'"]`);
-            if (tabBtn) tabBtn.classList.add('active');
-            const tabContent = document.getElementById(tabName);
-            if (tabContent) tabContent.classList.add('active');
-
-            // Persist active tab across page loads
-            try { localStorage.setItem('pulse_activeTab', tabName); } catch {}
-        }
-
-        async function refreshData() {
-            try { await loadWorkers(); } catch (e) { console.error('Error loading workers:', e); }
-            try { await loadWorkflows(); } catch (e) { console.error('Error loading workflows:', e); }
-            try { await loadExecutions(); } catch (e) { console.error('Error loading executions:', e); }
-            try { await loadSchedules(); } catch (e) { console.error('Error loading schedules:', e); }
-
-            // Update "last refreshed" indicator
-            const el = document.getElementById('lastRefreshed');
-            if (el) el.textContent = `Refreshed: ${new Date().toLocaleTimeString()}`;
-        }
-
-        // Terminal beep sound (Web Audio API)
-        function terminalBeep(type = 'success') {
-            try {
-                const audioContext = new (window.AudioContext || window.webkitAudioContext)();
-                const oscillator = audioContext.createOscillator();
-                const gainNode = audioContext.createGain();
-
-                oscillator.connect(gainNode);
-                gainNode.connect(audioContext.destination);
-
-                // Different tones for different events
-                if (type === 'success') {
-                    oscillator.frequency.value = 800;  // Higher pitch for success
-                } else if (type === 'error') {
-                    oscillator.frequency.value = 200;  // Lower pitch for errors
-                } else {
-                    oscillator.frequency.value = 440;  // Standard A note
-                }
-
-                oscillator.type = 'sine';
-                gainNode.gain.setValueAtTime(0.1, audioContext.currentTime);
-                gainNode.gain.exponentialRampToValueAtTime(0.01, audioContext.currentTime + 0.1);
-
-                oscillator.start(audioContext.currentTime);
-                oscillator.stop(audioContext.currentTime + 0.1);
-            } catch (error) {
-                // Silently fail if Web Audio API not supported
-            }
-        }
-
-        // Show terminal notification — delegates to lt.toast from base.js
-        function showTerminalNotification(message, type = 'info') {
-            if (type === 'success') return lt.toast.success(message);
-            if (type === 'error')   return lt.toast.error(message);
-            if (type === 'warning') return lt.toast.warning(message);
-            return lt.toast.info(message);
-        }
-
-        function connectWebSocket() {
-            const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
-            ws = new WebSocket(`${protocol}//${window.location.host}`);
-
-            ws.onmessage = (event) => {
-                try {
-                    const data = JSON.parse(event.data);
-
-                // Handle specific message types
-                if (data.type === 'command_result') {
-                    // Show terminal notification only for manual executions
-                    if (!data.is_automated) {
-                        if (data.success) {
-                            showTerminalNotification('Command completed successfully', 'success');
-                        } else {
-                            showTerminalNotification('Command execution failed', 'error');
-                        }
-                    }
-
-                    // 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') {
-
-                    // 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') {
-                    loadWorkers();
-                }
-
-                if (data.type === 'execution_started' || data.type === 'execution_status') {
-                    loadExecutions();
-                }
-
-                if (data.type === 'workflow_created' || data.type === 'workflow_deleted') {
-                    loadWorkflows();
-                }
-
-                if (data.type === 'workflow_updated') {
-                    loadWorkflows();
-                }
-
-                if (data.type === 'execution_prompt') {
-                    // If this execution is currently open, refresh to show the prompt
-                    const executionModal = document.getElementById('viewExecutionModal');
-                    if (executionModal && executionModal.classList.contains('show')) {
-                        const currentId = executionModal.dataset.executionId;
-                        if (currentId === data.execution_id) {
-                            viewExecution(data.execution_id);
-                        }
-                    }
-                    // Also update execution list so status indicators refresh
-                    loadExecutions();
-                }
-
-                if (data.type === 'executions_bulk_deleted') {
-                    loadExecutions();
-                }
-
-                    // Generic refresh for other message types
-                    if (!['command_result', 'workflow_result', 'worker_update', 'execution_started', 'execution_status', 'workflow_created', 'workflow_deleted', 'workflow_updated', 'execution_prompt', 'executions_bulk_deleted'].includes(data.type)) {
-                        refreshData();
-                    }
-                } catch (error) {
-                    console.error('Error handling WebSocket message:', error);
-                    console.error('Stack trace:', error.stack);
-                }
-            };
-
-            ws.onclose = () => {
-                console.log('WebSocket closed, reconnecting...');
-                setTimeout(connectWebSocket, 5000);
-            };
-
-            ws.onerror = (error) => {
-                console.error('[WebSocket] Connection error:', error);
-            };
-        }
-
-        // Close any open modal on ESC key
-        document.addEventListener('keydown', (e) => {
-            if (e.key === 'Escape') {
-                document.querySelectorAll('.modal.show').forEach(modal => {
-                    modal.classList.remove('show');
-                });
-            }
-        });
-
-        // Initialize
-        loadUser().then((success) => {
-            if (success) {
-                // Restore last-active tab
-                try {
-                    const saved = localStorage.getItem('pulse_activeTab');
-                    if (saved) switchTab(saved);
-                } catch {}
-
-                setExecutionView(executionView);
-                refreshData();
-                connectWebSocket();
-                setInterval(refreshData, 30000);
-            }
-        });
-
-        // Ctrl+Enter submits the quick command form
-        document.addEventListener('keydown', (e) => {
-            if ((e.ctrlKey || e.metaKey) && e.key === 'Enter') {
-                const activeTab = document.querySelector('.tab-content.active');
-                if (activeTab && activeTab.id === 'quickcommand') {
-                    e.preventDefault();
-                    executeQuickCommand();
-                }
-            }
-        });
-    </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
diff --git a/views/pages/quick.ejs b/views/pages/quick.ejs
index 956d28e..1f7fdf5 100644
--- a/views/pages/quick.ejs
+++ b/views/pages/quick.ejs
@@ -47,7 +47,7 @@
     <div class="lt-form-group">
       <label class="lt-label" for="qc-command">Command</label>
       <textarea class="lt-textarea" id="qc-command" rows="4" placeholder="Enter command to execute (e.g. 'uptime' or 'df -h')"></textarea>
-      <div class="lt-field-hint">Ctrl+Enter to execute</div>
+      <div class="lt-form-hint">Ctrl+Enter to execute</div>
     </div>
 
     <button type="submit" class="lt-btn lt-btn-primary" id="qc-execute-btn">&#x25b6; Execute Command</button>