npm - @mechris3/glassbox - Versions diffs - 0.1.0 - Mend

@mechris3/glassbox 0.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (162) hide show

package/README.md +213 -0
package/dist/bin/glassbox.d.ts +14 -0
package/dist/bin/glassbox.d.ts.map +1 -0
package/dist/bin/glassbox.js +140 -0
package/dist/bin/glassbox.js.map +1 -0
package/dist/src/adapters/base-adapter.d.ts +70 -0
package/dist/src/adapters/base-adapter.d.ts.map +1 -0
package/dist/src/adapters/base-adapter.js +155 -0
package/dist/src/adapters/base-adapter.js.map +1 -0
package/dist/src/adapters/browser-adapter.interface.d.ts +41 -0
package/dist/src/adapters/browser-adapter.interface.d.ts.map +1 -0
package/dist/src/adapters/browser-adapter.interface.js +7 -0
package/dist/src/adapters/browser-adapter.interface.js.map +1 -0
package/dist/src/adapters/cdp-adapter.d.ts +63 -0
package/dist/src/adapters/cdp-adapter.d.ts.map +1 -0
package/dist/src/adapters/cdp-adapter.js +231 -0
package/dist/src/adapters/cdp-adapter.js.map +1 -0
package/dist/src/ai/collectors.d.ts +35 -0
package/dist/src/ai/collectors.d.ts.map +1 -0
package/dist/src/ai/collectors.js +170 -0
package/dist/src/ai/collectors.js.map +1 -0
package/dist/src/ai/queries.d.ts +21 -0
package/dist/src/ai/queries.d.ts.map +1 -0
package/dist/src/ai/queries.js +59 -0
package/dist/src/ai/queries.js.map +1 -0
package/dist/src/ai/types.d.ts +55 -0
package/dist/src/ai/types.d.ts.map +1 -0
package/dist/src/ai/types.js +6 -0
package/dist/src/ai/types.js.map +1 -0
package/dist/src/cdp/connection.d.ts +37 -0
package/dist/src/cdp/connection.d.ts.map +1 -0
package/dist/src/cdp/connection.js +86 -0
package/dist/src/cdp/connection.js.map +1 -0
package/dist/src/cdp/connection.test.d.ts +6 -0
package/dist/src/cdp/connection.test.d.ts.map +1 -0
package/dist/src/cdp/connection.test.js +93 -0
package/dist/src/cdp/connection.test.js.map +1 -0
package/dist/src/cdp/domains.d.ts +116 -0
package/dist/src/cdp/domains.d.ts.map +1 -0
package/dist/src/cdp/domains.js +153 -0
package/dist/src/cdp/domains.js.map +1 -0
package/dist/src/cdp/launcher.d.ts +26 -0
package/dist/src/cdp/launcher.d.ts.map +1 -0
package/dist/src/cdp/launcher.js +175 -0
package/dist/src/cdp/launcher.js.map +1 -0
package/dist/src/config.d.ts +28 -0
package/dist/src/config.d.ts.map +1 -0
package/dist/src/config.js +72 -0
package/dist/src/config.js.map +1 -0
package/dist/src/config.test.d.ts +5 -0
package/dist/src/config.test.d.ts.map +1 -0
package/dist/src/config.test.js +46 -0
package/dist/src/config.test.js.map +1 -0
package/dist/src/errors.d.ts +26 -0
package/dist/src/errors.d.ts.map +1 -0
package/dist/src/errors.js +27 -0
package/dist/src/errors.js.map +1 -0
package/dist/src/index.d.ts +18 -0
package/dist/src/index.d.ts.map +1 -0
package/dist/src/index.js +28 -0
package/dist/src/index.js.map +1 -0
package/dist/src/journey.d.ts +35 -0
package/dist/src/journey.d.ts.map +1 -0
package/dist/src/journey.js +39 -0
package/dist/src/journey.js.map +1 -0
package/dist/src/mcp/server.d.ts +22 -0
package/dist/src/mcp/server.d.ts.map +1 -0
package/dist/src/mcp/server.js +229 -0
package/dist/src/mcp/server.js.map +1 -0
package/dist/src/page-objects/base.page.d.ts +28 -0
package/dist/src/page-objects/base.page.d.ts.map +1 -0
package/dist/src/page-objects/base.page.js +51 -0
package/dist/src/page-objects/base.page.js.map +1 -0
package/dist/src/page-objects/browser-context.page.d.ts +14 -0
package/dist/src/page-objects/browser-context.page.d.ts.map +1 -0
package/dist/src/page-objects/browser-context.page.js +28 -0
package/dist/src/page-objects/browser-context.page.js.map +1 -0
package/dist/src/runner/lifecycle-hooks.d.ts +43 -0
package/dist/src/runner/lifecycle-hooks.d.ts.map +1 -0
package/dist/src/runner/lifecycle-hooks.js +70 -0
package/dist/src/runner/lifecycle-hooks.js.map +1 -0
package/dist/src/runner/run-all-journeys.d.ts +35 -0
package/dist/src/runner/run-all-journeys.d.ts.map +1 -0
package/dist/src/runner/run-all-journeys.js +167 -0
package/dist/src/runner/run-all-journeys.js.map +1 -0
package/dist/src/runner/run-journey.d.ts +17 -0
package/dist/src/runner/run-journey.d.ts.map +1 -0
package/dist/src/runner/run-journey.js +179 -0
package/dist/src/runner/run-journey.js.map +1 -0
package/dist/src/runner/spawn-journey.d.ts +36 -0
package/dist/src/runner/spawn-journey.d.ts.map +1 -0
package/dist/src/runner/spawn-journey.js +40 -0
package/dist/src/runner/spawn-journey.js.map +1 -0
package/dist/src/server/diagnostic-service.d.ts +69 -0
package/dist/src/server/diagnostic-service.d.ts.map +1 -0
package/dist/src/server/diagnostic-service.js +165 -0
package/dist/src/server/diagnostic-service.js.map +1 -0
package/dist/src/server/diagnostic-service.test.d.ts +5 -0
package/dist/src/server/diagnostic-service.test.d.ts.map +1 -0
package/dist/src/server/diagnostic-service.test.js +82 -0
package/dist/src/server/diagnostic-service.test.js.map +1 -0
package/dist/src/server/index.d.ts +11 -0
package/dist/src/server/index.d.ts.map +1 -0
package/dist/src/server/index.js +167 -0
package/dist/src/server/index.js.map +1 -0
package/dist/src/server/journey-discovery.d.ts +16 -0
package/dist/src/server/journey-discovery.d.ts.map +1 -0
package/dist/src/server/journey-discovery.js +38 -0
package/dist/src/server/journey-discovery.js.map +1 -0
package/dist/src/server/settings-storage.d.ts +27 -0
package/dist/src/server/settings-storage.d.ts.map +1 -0
package/dist/src/server/settings-storage.js +27 -0
package/dist/src/server/settings-storage.js.map +1 -0
package/dist/src/server/test-executor.d.ts +64 -0
package/dist/src/server/test-executor.d.ts.map +1 -0
package/dist/src/server/test-executor.js +279 -0
package/dist/src/server/test-executor.js.map +1 -0
package/dist/src/server/websocket.d.ts +51 -0
package/dist/src/server/websocket.d.ts.map +1 -0
package/dist/src/server/websocket.js +28 -0
package/dist/src/server/websocket.js.map +1 -0
package/dist/src/utils/browser-discovery.d.ts +11 -0
package/dist/src/utils/browser-discovery.d.ts.map +1 -0
package/dist/src/utils/browser-discovery.js +102 -0
package/dist/src/utils/browser-discovery.js.map +1 -0
package/dist/src/utils/error-formatter.d.ts +13 -0
package/dist/src/utils/error-formatter.d.ts.map +1 -0
package/dist/src/utils/error-formatter.js +29 -0
package/dist/src/utils/error-formatter.js.map +1 -0
package/dist/src/utils/escape.d.ts +10 -0
package/dist/src/utils/escape.d.ts.map +1 -0
package/dist/src/utils/escape.js +22 -0
package/dist/src/utils/escape.js.map +1 -0
package/dist/src/utils/escape.test.d.ts +5 -0
package/dist/src/utils/escape.test.d.ts.map +1 -0
package/dist/src/utils/escape.test.js +49 -0
package/dist/src/utils/escape.test.js.map +1 -0
package/dist/src/utils/page-object-error.d.ts +5 -0
package/dist/src/utils/page-object-error.d.ts.map +1 -0
package/dist/src/utils/page-object-error.js +22 -0
package/dist/src/utils/page-object-error.js.map +1 -0
package/dist/src/utils/profile-discovery.d.ts +20 -0
package/dist/src/utils/profile-discovery.d.ts.map +1 -0
package/dist/src/utils/profile-discovery.js +68 -0
package/dist/src/utils/profile-discovery.js.map +1 -0
package/dist/src/utils/wait-utils.d.ts +10 -0
package/dist/src/utils/wait-utils.d.ts.map +1 -0
package/dist/src/utils/wait-utils.js +20 -0
package/dist/src/utils/wait-utils.js.map +1 -0
package/dist/src/utils/wait-utils.test.d.ts +5 -0
package/dist/src/utils/wait-utils.test.d.ts.map +1 -0
package/dist/src/utils/wait-utils.test.js +30 -0
package/dist/src/utils/wait-utils.test.js.map +1 -0
package/package.json +60 -0
package/src/server/static/index.html +541 -0
package/ui/dist/3rdpartylicenses.txt +419 -0
package/ui/dist/browser/assets/logo.svg +29 -0
package/ui/dist/browser/index.html +13 -0
package/ui/dist/browser/main-7OJWN7GZ.js +16 -0
package/ui/dist/browser/polyfills-5CFQRCPP.js +2 -0
package/ui/dist/browser/styles-HMZYQRBV.css +1 -0
package/ui/dist/prerendered-routes.json +3 -0

package/src/server/static/index.html ADDED Viewed

@@ -0,0 +1,541 @@
+<!DOCTYPE html>
+<html lang="en" data-theme="dark">
+<head>
+  <meta charset="utf-8">
+  <title>Glassbox</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <style>
+    :root, :root[data-theme="dark"] {
+      --bg-deep: #0d1117;
+      --bg-panel: #151b23;
+      --bg-surface: #1c2128;
+      --bg-elevated: #252c35;
+      --accent-primary: #f0b832;
+      --accent-hover: #f5c94a;
+      --text-primary: #f0f3f6;
+      --text-secondary: #c9d1d9;
+      --text-muted: #8b949e;
+      --color-success: #3fb950;
+      --color-danger: #f85149;
+      --color-breakpoint: #f85149;
+      --border-color: #3d444d;
+      --font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+      --font-mono: 'SF Mono', 'Fira Code', Consolas, monospace;
+    }
+    * { box-sizing: border-box; margin: 0; padding: 0; }
+    body {
+      font-family: var(--font-sans);
+      font-size: 14px;
+      background: var(--bg-deep);
+      color: var(--text-primary);
+      height: 100vh;
+      display: grid;
+      grid-template-rows: auto auto 1fr auto;
+      overflow: hidden;
+    }
+    header {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      padding: 8px 16px;
+      background: var(--bg-panel);
+      border-bottom: 1px solid var(--border-color);
+    }
+    .logo { font-weight: 700; font-size: 16px; color: var(--accent-primary); }
+    .connection { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-muted); }
+    .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--color-danger); }
+    .dot.connected { background: var(--color-success); }
+    main {
+      display: grid;
+      grid-template-columns: 240px 1fr;
+      overflow: hidden;
+      min-height: 0;
+    }
+    .sidebar {
+      background: var(--bg-panel);
+      border-right: 1px solid var(--border-color);
+      overflow-y: auto;
+      padding: 12px 0;
+    }
+    .sidebar h3 {
+      font-size: 11px;
+      text-transform: uppercase;
+      letter-spacing: 0.5px;
+      color: var(--text-muted);
+      padding: 0 12px 8px;
+    }
+    .content {
+      display: flex;
+      flex-direction: column;
+      min-height: 0;
+      overflow: hidden;
+    }
+    .journey-item {
+      padding: 6px 12px;
+      cursor: pointer;
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      font-size: 13px;
+    }
+    .journey-item:hover { background: var(--bg-surface); }
+    .journey-item input { accent-color: var(--accent-primary); }
+    .content {
+      display: flex;
+      flex-direction: column;
+      overflow: hidden;
+    }
+    .toolbar {
+      display: flex;
+      align-items: center;
+      gap: 4px;
+      padding: 8px 16px;
+      background: var(--bg-panel);
+      border-bottom: 1px solid var(--border-color);
+    }
+    .toolbar button {
+      width: 32px; height: 32px;
+      border: none; background: none;
+      border-radius: 4px;
+      font-size: 14px;
+      cursor: pointer;
+      color: var(--text-primary);
+      display: flex; align-items: center; justify-content: center;
+    }
+    .toolbar button:hover:not(:disabled) { background: var(--bg-elevated); }
+    .toolbar button:disabled { opacity: 0.3; cursor: not-allowed; }
+    .toolbar button.play { color: var(--color-success); }
+    .toolbar button.stop { color: var(--color-danger); }
+    .toolbar .spacer { flex: 1; }
+    .toolbar .status { font-size: 12px; color: var(--text-muted); font-family: var(--font-mono); }
+    .tabs {
+      display: flex; gap: 4px;
+      padding: 4px 16px;
+      border-bottom: 1px solid var(--border-color);
+      background: var(--bg-panel);
+    }
+    .tabs button {
+      padding: 4px 12px;
+      border: none; background: none;
+      border-radius: 4px 4px 0 0;
+      color: var(--text-secondary);
+      cursor: pointer; font-size: 13px;
+    }
+    .tabs button.active { color: var(--accent-primary); border-bottom: 2px solid var(--accent-primary); }
+    .log-panel {
+      flex: 1;
+      overflow-y: auto;
+      padding: 8px 16px;
+      font-family: var(--font-mono);
+      font-size: 12px;
+      line-height: 1.7;
+    }
+    .action-line { display: flex; gap: 8px; padding: 2px 0; align-items: center; }
+    .action-line .idx { color: var(--text-muted); min-width: 24px; text-align: right; }
+    .action-line .desc { flex: 1; }
+    .action-line .icon { width: 16px; text-align: center; }
+    .action-line.running { color: var(--accent-primary); }
+    .action-line.complete { color: var(--text-secondary); }
+    .action-line.failed { color: var(--color-danger); }
+    .action-line.breakpoint { color: var(--color-breakpoint); }
+    .action-line.paused-at { background: rgba(248, 81, 73, 0.08); border-left: 2px solid var(--color-breakpoint); padding-left: 6px; }
+    .bp-pin {
+      width: 10px; height: 10px;
+      border-radius: 50%;
+      border: 1.5px solid var(--border-color);
+      background: none;
+      cursor: pointer;
+      flex-shrink: 0;
+      transition: background 0.1s, border-color 0.1s;
+    }
+    .bp-pin:hover { border-color: var(--color-breakpoint); }
+    .bp-pin.active { background: var(--color-breakpoint); border-color: var(--color-breakpoint); }
+    .console-line { padding: 1px 0; white-space: pre-wrap; word-break: break-all; }
+    .console-line.error { color: var(--color-danger); }
+    .console-line.separator { color: var(--text-muted); text-align: center; padding: 8px 0; }
+    footer {
+      display: flex; align-items: center; justify-content: space-between;
+      padding: 4px 16px;
+      background: var(--bg-panel);
+      border-top: 1px solid var(--border-color);
+      font-size: 12px;
+    }
+    .results { display: flex; gap: 12px; font-family: var(--font-mono); }
+    .results .pass { color: var(--color-success); }
+    .results .fail { color: var(--color-danger); }
+  </style>
+</head>
+<body>
+  <header>
+    <span class="logo">Glassbox</span>
+    <div class="connection">
+      <button id="btn-settings" title="Settings" style="background:none;border:none;cursor:pointer;font-size:16px;margin-right:8px;">⚙️</button>
+      <span class="dot" id="conn-dot"></span>
+      <span id="conn-text">Disconnected</span>
+    </div>
+  </header>
+  <aside id="settings-panel" style="max-height:0;overflow:hidden;padding:0 16px;background:var(--bg-surface);border-bottom:1px solid var(--border-color);font-size:12px;transition:max-height 0.15s,padding 0.15s;">
+    <div style="display:flex;gap:16px;align-items:center;">
+      <label style="display:flex;align-items:center;gap:6px;">
+        <span style="color:var(--text-muted);">URL</span>
+        <input type="text" id="target-url" value="http://localhost:3000" style="width:200px;padding:3px 6px;background:var(--bg-panel);border:1px solid var(--border-color);border-radius:3px;color:var(--text-primary);font-size:12px;font-family:var(--font-mono);" />
+      </label>
+      <label style="display:flex;align-items:center;gap:6px;">
+        <span style="color:var(--text-muted);">Viewport</span>
+        <input type="number" id="vp-width" value="1280" style="width:52px;padding:3px 4px;background:var(--bg-panel);border:1px solid var(--border-color);border-radius:3px;color:var(--text-primary);font-size:12px;" />
+        <span style="color:var(--text-muted);">×</span>
+        <input type="number" id="vp-height" value="720" style="width:52px;padding:3px 4px;background:var(--bg-panel);border:1px solid var(--border-color);border-radius:3px;color:var(--text-primary);font-size:12px;" />
+      </label>
+      <label style="display:flex;align-items:center;gap:4px;cursor:pointer;color:var(--text-secondary);">
+        <input type="checkbox" id="chk-devtools" /> DevTools
+      </label>
+      <label style="display:flex;align-items:center;gap:4px;cursor:pointer;color:var(--text-secondary);">
+        <input type="checkbox" id="chk-headed" checked /> Headed
+      </label>
+      <label style="display:flex;align-items:center;gap:4px;cursor:pointer;color:var(--text-secondary);">
+        <input type="checkbox" id="chk-keep-open" /> Keep open
+      </label>
+    </div>
+  </aside>
+  <main>
+    <div class="sidebar">
+      <h3>Journeys</h3>
+      <div id="journey-list"></div>
+    </div>
+    <div class="content">
+      <div class="toolbar">
+        <button class="play" id="btn-play" title="Run">▶</button>
+        <button id="btn-pause" title="Pause" disabled>⏸</button>
+        <button id="btn-resume" title="Resume" disabled>⏵</button>
+        <button id="btn-step" title="Step" disabled>⏭</button>
+        <button class="stop" id="btn-stop" title="Stop" disabled>⏹</button>
+        <span class="spacer"></span>
+        <label style="font-size:12px;color:var(--text-muted);display:flex;align-items:center;gap:6px;">
+          Delay
+          <input type="range" id="delay-slider" min="0" max="5000" value="0" style="width:100px;accent-color:var(--accent-primary);" />
+          <span id="delay-value" style="font-family:var(--font-mono);font-size:11px;color:var(--text-secondary);min-width:42px;">0ms</span>
+        </label>
+        <span class="status" id="fsm-state">idle</span>
+      </div>
+      <div class="tabs">
+        <button class="active" id="tab-actions">Actions</button>
+        <button id="tab-console">Console</button>
+      </div>
+      <div class="log-panel" id="actions-panel"></div>
+      <div class="log-panel" id="console-panel" style="display:none"></div>
+    </div>
+  </main>
+  <footer>
+    <span id="footer-info"></span>
+    <div class="results" id="results"></div>
+  </footer>
+  <script>
+    // State
+    let journeys = [];
+    let selectedIds = new Set();
+    let fsmState = 'idle';
+    let ws = null;
+    let passed = 0, failed = 0;
+    // Elements
+    const journeyList = document.getElementById('journey-list');
+    const actionsPanel = document.getElementById('actions-panel');
+    const consolePanel = document.getElementById('console-panel');
+    const connDot = document.getElementById('conn-dot');
+    const connText = document.getElementById('conn-text');
+    const fsmLabel = document.getElementById('fsm-state');
+    const resultsEl = document.getElementById('results');
+    const btnPlay = document.getElementById('btn-play');
+    const btnPause = document.getElementById('btn-pause');
+    const btnResume = document.getElementById('btn-resume');
+    const btnStep = document.getElementById('btn-step');
+    const btnStop = document.getElementById('btn-stop');
+    const tabActions = document.getElementById('tab-actions');
+    const tabConsole = document.getElementById('tab-console');
+    // Tabs
+    tabActions.onclick = () => { tabActions.classList.add('active'); tabConsole.classList.remove('active'); actionsPanel.style.display=''; consolePanel.style.display='none'; };
+    tabConsole.onclick = () => { tabConsole.classList.add('active'); tabActions.classList.remove('active'); consolePanel.style.display=''; actionsPanel.style.display='none'; };
+    // --- Settings persistence ---
+    const settingsFields = {
+      'target-url': 'targetUrl',
+      'vp-width': 'viewportWidth',
+      'vp-height': 'viewportHeight',
+      'chk-devtools': 'devtools',
+      'chk-headed': 'headed',
+      'chk-keep-open': 'keepBrowserOpen',
+      'delay-slider': 'actionDelay',
+    };
+    /** Load saved settings from the server and apply to UI. */
+    async function loadSettings() {
+      try {
+        const res = await fetch('/api/settings');
+        const saved = await res.json();
+        if (saved.targetUrl) document.getElementById('target-url').value = saved.targetUrl;
+        if (saved.viewportWidth) document.getElementById('vp-width').value = saved.viewportWidth;
+        if (saved.viewportHeight) document.getElementById('vp-height').value = saved.viewportHeight;
+        if (saved.devtools !== undefined) document.getElementById('chk-devtools').checked = saved.devtools;
+        if (saved.headed !== undefined) document.getElementById('chk-headed').checked = saved.headed;
+        if (saved.keepBrowserOpen !== undefined) document.getElementById('chk-keep-open').checked = saved.keepBrowserOpen;
+        if (saved.actionDelay !== undefined) {
+          document.getElementById('delay-slider').value = saved.actionDelay;
+          delayValue.textContent = saved.actionDelay + 'ms';
+        }
+        if (saved.settingsPanelOpen) {
+          settingsPanel.style.maxHeight = '50px';
+          settingsPanel.style.padding = '8px 16px';
+        }
+      } catch { /* No saved settings yet, use defaults */ }
+    }
+    /** Save current UI settings to the server. Debounced. */
+    let saveTimeout = null;
+    function saveSettings() {
+      clearTimeout(saveTimeout);
+      saveTimeout = setTimeout(() => {
+        const settings = {
+          targetUrl: document.getElementById('target-url').value,
+          viewportWidth: parseInt(document.getElementById('vp-width').value, 10),
+          viewportHeight: parseInt(document.getElementById('vp-height').value, 10),
+          devtools: document.getElementById('chk-devtools').checked,
+          headed: document.getElementById('chk-headed').checked,
+          keepBrowserOpen: document.getElementById('chk-keep-open').checked,
+          actionDelay: parseInt(document.getElementById('delay-slider').value, 10),
+          settingsPanelOpen: settingsPanel.style.maxHeight !== '0px' && settingsPanel.style.maxHeight !== '0',
+        };
+        fetch('/api/settings', {
+          method: 'PUT',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify(settings),
+        });
+      }, 500);
+    }
+    // Auto-save on any settings change
+    Object.keys(settingsFields).forEach(id => {
+      const el = document.getElementById(id);
+      el.addEventListener('input', saveSettings);
+      el.addEventListener('change', saveSettings);
+    });
+    loadSettings();
+    // Load journeys
+    fetch('/api/journeys').then(r => r.json()).then(data => {
+      journeys = data;
+      selectedIds = new Set(data.map(j => j.id));
+      renderJourneys();
+    });
+    function renderJourneys() {
+      journeyList.innerHTML = journeys.map(j => `
+        <label class="journey-item">
+          <input type="checkbox" ${selectedIds.has(j.id) ? 'checked' : ''} data-id="${j.id}" />
+          ${j.name}
+        </label>
+      `).join('');
+      journeyList.querySelectorAll('input').forEach(el => {
+        el.onchange = () => {
+          if (el.checked) selectedIds.add(el.dataset.id);
+          else selectedIds.delete(el.dataset.id);
+        };
+      });
+    }
+    // WebSocket
+    function connect() {
+      const proto = location.protocol === 'https:' ? 'wss:' : 'ws:';
+      ws = new WebSocket(`${proto}//${location.host}`);
+      ws.onopen = () => { connDot.classList.add('connected'); connText.textContent = 'Connected'; };
+      ws.onclose = () => { connDot.classList.remove('connected'); connText.textContent = 'Disconnected'; setTimeout(connect, 3000); };
+      ws.onmessage = (e) => handleMessage(JSON.parse(e.data));
+    }
+    connect();
+    function handleMessage(msg) {
+      switch (msg.type) {
+        case 'action':
+          renderAction(msg);
+          if (msg.status === 'breakpoint') setState('paused');
+          break;
+        case 'test-start':
+          appendConsole(`── ${msg.journey} ──`, 'separator');
+          break;
+        case 'test-end':
+          if (msg.status === 'passed') passed++;
+          else failed++;
+          renderResults();
+          setState(msg.status === 'failed' ? 'errored' : 'idle');
+          break;
+        case 'run-end':
+          setState('idle');
+          break;
+        case 'log':
+          appendConsole(msg.message, 'log');
+          break;
+        case 'error':
+          appendConsole(msg.message, 'error');
+          break;
+        case 'ui-control':
+          if (msg.action === 'pause') setState('paused');
+          else if (msg.action === 'resume') setState('running');
+          break;
+      }
+    }
+    function renderAction(msg) {
+      const existing = document.getElementById(`action-${msg.index}`);
+      if (existing) {
+        existing.className = `action-line ${mapStatus(msg.status)}`;
+        existing.querySelector('.icon').textContent = statusIcon(msg.status);
+        // Highlight paused action
+        if (msg.status === 'breakpoint') {
+          document.querySelectorAll('.action-line.paused-at').forEach(el => el.classList.remove('paused-at'));
+          existing.classList.add('paused-at');
+        }
+        return;
+      }
+      const div = document.createElement('div');
+      div.id = `action-${msg.index}`;
+      div.className = `action-line ${mapStatus(msg.status)}`;
+      div.innerHTML = `<button class="bp-pin" data-index="${msg.index}" title="Toggle breakpoint"></button><span class="idx">${msg.index}</span><span class="desc">${msg.description || ''}</span><span class="icon">${statusIcon(msg.status)}</span>`;
+      // Breakpoint pin click handler
+      div.querySelector('.bp-pin').onclick = (e) => {
+        e.stopPropagation();
+        toggleBreakpoint(msg.index, div.querySelector('.bp-pin'));
+      };
+      if (msg.status === 'breakpoint') {
+        document.querySelectorAll('.action-line.paused-at').forEach(el => el.classList.remove('paused-at'));
+        div.classList.add('paused-at');
+      }
+      actionsPanel.appendChild(div);
+      actionsPanel.scrollTop = actionsPanel.scrollHeight;
+    }
+    function mapStatus(s) { return s === 'start' ? 'running' : s; }
+    function statusIcon(s) {
+      if (s === 'start') return '⏳';
+      if (s === 'complete') return '✓';
+      if (s === 'breakpoint') return '⏸';
+      return '';
+    }
+    // Breakpoints
+    let breakpoints = new Set();
+    function toggleBreakpoint(index, pinEl) {
+      if (breakpoints.has(index)) {
+        breakpoints.delete(index);
+        pinEl.classList.remove('active');
+      } else {
+        breakpoints.add(index);
+        pinEl.classList.add('active');
+      }
+      // Send to server for the current/next run
+      const currentJourney = journeys.find(j => selectedIds.has(j.id));
+      if (currentJourney) {
+        fetch('/api/breakpoints', {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({ journey: currentJourney.path, breakpoints: [...breakpoints] })
+        });
+      }
+    }
+    function appendConsole(text, type) {
+      const div = document.createElement('div');
+      div.className = `console-line ${type}`;
+      div.textContent = text;
+      consolePanel.appendChild(div);
+      consolePanel.scrollTop = consolePanel.scrollHeight;
+    }
+    function renderResults() {
+      resultsEl.innerHTML = `<span class="pass">✓ ${passed}</span><span class="fail">✗ ${failed}</span>`;
+    }
+    // FSM
+    function setState(state) {
+      fsmState = state;
+      fsmLabel.textContent = state;
+      btnPlay.disabled = !(state === 'idle' || state === 'completed' || state === 'errored');
+      btnPause.disabled = state !== 'running';
+      btnResume.disabled = state !== 'paused';
+      btnStep.disabled = state !== 'paused';
+      btnStop.disabled = !(state === 'running' || state === 'paused');
+    }
+    // Controls
+    const settingsPanel = document.getElementById('settings-panel');
+    const btnSettings = document.getElementById('btn-settings');
+    const delaySlider = document.getElementById('delay-slider');
+    const delayValue = document.getElementById('delay-value');
+    btnSettings.onclick = () => {
+      const open = settingsPanel.style.maxHeight === '0px' || settingsPanel.style.maxHeight === '0';
+      settingsPanel.style.maxHeight = open ? '50px' : '0';
+      settingsPanel.style.padding = open ? '8px 16px' : '0 16px';
+      saveSettings();
+    };
+    // Delay slider — updates the running process in real-time
+    delaySlider.oninput = () => {
+      const ms = parseInt(delaySlider.value, 10);
+      delayValue.textContent = ms + 'ms';
+      fetch('/api/config', {
+        method: 'PATCH',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ actionDelay: ms })
+      });
+    };
+    /** Collect current settings from the UI into a config object. */
+    function getRunConfig() {
+      return {
+        targetUrl: document.getElementById('target-url').value || 'http://localhost:3000',
+        actionDelay: parseInt(delaySlider.value, 10),
+        headless: !document.getElementById('chk-headed').checked,
+        devtools: document.getElementById('chk-devtools').checked,
+        keepBrowserOpen: document.getElementById('chk-keep-open').checked,
+        viewportWidth: parseInt(document.getElementById('vp-width').value, 10) || 1280,
+        viewportHeight: parseInt(document.getElementById('vp-height').value, 10) || 720,
+      };
+    }
+    btnPlay.onclick = () => {
+      actionsPanel.innerHTML = '';
+      consolePanel.innerHTML = '';
+      passed = 0; failed = 0; renderResults();
+      const selected = journeys.filter(j => selectedIds.has(j.id));
+      const config = getRunConfig();
+      fetch('/api/tests/run', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ journeys: selected.map(j => j.path), config })
+      });
+      setState('running');
+    };
+    btnPause.onclick = () => { fetch('/api/tests/pause', { method: 'POST' }); setState('paused'); };
+    btnResume.onclick = () => { fetch('/api/tests/resume', { method: 'POST' }); setState('running'); };
+    btnStep.onclick = () => { fetch('/api/tests/step', { method: 'POST', headers:{'Content-Type':'application/json'}, body: JSON.stringify({count:1}) }); };
+    btnStop.onclick = () => { fetch('/api/tests/stop', { method: 'POST' }); setState('idle'); };
+  </script>
+</body>
+</html>