agentgui 1.0.823 → 1.0.825

package/CHANGELOG.md

@@ -1,45 +1,17 @@
-## [Unreleased]
-
-### Refactor
-- Split `conversations.js` (737L) into 4 files: conversations.js (117L), conv-sidebar-actions.js (185L), conv-sidebar-clone.js (92L), conv-list-renderer.js (198L)
-- Split `websocket-manager.js` (643L) into 3 files: ws-core.js (163L), ws-latency.js (89L), websocket-manager.js (108L)
-- Split `ui-components.js` (370L) into 2 files: ui-components.js (89L), ui-components-rendering.js (63L)
-- Split `agent-auth.js` into agent-auth.js (147L) and agent-auth-oauth.js (160L)
-- Deleted dead code: event-filter.js (zero external references)
-- Updated index.html script load order for all new split files
-
 ## 2026-04-11
-- refactor: split conversations.js (742L→116L) into conv-sidebar-actions.js (prototype extension: drag/drop, bulk actions, folder browser), conv-list-renderer.js (loadConversations, render, vnode), conv-sidebar-clone.js (clone UI, delete-all); all ≤200 lines
-- refactor: split websocket-manager.js (643L) into ws-core.js (class constructor, connect, onOpen, onMessage, reconnect), websocket-manager.js (sendMessage, subscriptions, state); ws-latency/connection/heartbeat empty stubs deleted
-- refactor: split event-filter.js into event-filter.js + event-filter-config.js (window export/CSV/Markdown helpers)
-- refactor: split agent-auth.js into agent-auth.js + agent-auth-oauth.js (IIFE, OAuth modal flows)
-- refactor: fix index.html script load order — ws-core.js before websocket-manager.js; remove empty stub script tags (ws-connection, ws-latency, ws-heartbeat)
-
-## 2026-04-11
-- refactor: split jsonl-watcher.js parse/event logic into jsonl-parser.js; watcher retains file watching/polling only
-- refactor: split tool-version.js into tool-version-check.js (sync) and tool-version-fetch.js (async/network)
-- refactor: split ui-components.js into core class (createModal/createTabs/createAlert/createSpinner/escapeHtml) and ui-components-rendering.js (createProgressBar/createCollapsible/createInput/createSelect/createButtonGroup/createBadge/copyToClipboard/downloadFile); both ≤200 lines
-
-## [Unreleased]
-### Refactor
-- Strip all standalone comment lines (// and /* */ block lines) from 14 static JS files: event-filter.js, image-loader.js, syntax-highlighter.js, client.js, streaming-renderer.js, ui-components.js, conversations.js, websocket-manager.js, conv-machine.js, ws-machine.js, ws-client.js, state-barrier.js, script-runner.js, theme.js. Total 781 comment lines removed. All files syntax-verified.
-
-## [Unreleased]
-
-### Changed
-- Remove GMGUIApp dead code from app.js; strip 900+ lines, keep 5 live IIFEs
-- Add app.js and app-shortcuts.js to index.html script loading (previously unreferenced)
-- Remove unused BASE_URL declaration from app-shortcuts.js
-- Extend window.__debug.getSyncState() with promptMachineState, toolInstallMachineStates, voiceMachineState, convListMachineState
-
-
-### Fixed
-- Thinking blocks now use theme-aware CSS vars for light/dark backgrounds (`--color-thinking-bg`)
-- All code blocks (renderBlockCode, renderCodeWithHighlight, renderFileRead, renderCommand) now use CSS vars instead of hardcoded dark hex colors
-- Removed hardcoded `#1e293b`, `#e2e8f0`, `#d1d5db` from all inline styles in streaming-renderer.js
-- tool-result-pre text color now adapts to theme via `--color-code-text`
-- Added CSS vars to :root (light) and html.dark for --color-bg-code, --color-code-text, --color-code-border, --color-thinking-bg
-- Thinking block content now renders full markdown (headers, lists, blockquotes, bold, italic, inline code, links)
-- parseAndRenderMarkdown() extended with headers (##/###), ul/ol lists, blockquotes (>), horizontal rules (---)
-- Thinking content dark mode text color set to #c4b5fd (readable purple)
-
+- refactor: replace jsonl-watcher.js with @lanmower/cc-tail npm package (subclass CCTailWatcher, override _line() via JsonlParser); remove custom file-watching logic
+- refactor: split syntax-highlighter.js (216L) into syntax-highlighter.js (132L) + syntax-highlighter-render.js (73L)
+- refactor: split dialogs.js (268L) into dialogs.js (54L) + dialogs-types.js (112L, window.UIDialog)
+- refactor: split image-loader.js (221L) into image-loader.js (147L) + image-loader-element.js (77L)
+- refactor: split conversations.js (742L) into conversations.js (116L) + conv-sidebar-actions.js (185L) + conv-list-renderer.js (198L) + conv-sidebar-clone.js (92L)
+- refactor: split websocket-manager.js (643L) into ws-core.js (163L) + websocket-manager.js (108L) + ws-latency.js (89L)
+- refactor: split ui-components.js into ui-components.js (89L) + ui-components-rendering.js (63L)
+- refactor: split agent-auth.js into agent-auth.js (147L) + agent-auth-oauth.js (160L)
+- refactor: split event-filter.js into event-filter-config.js (37L); delete event-filter.js dead code (zero external refs)
+- refactor: split jsonl-watcher.js parse logic into jsonl-parser.js (180L); watcher retains file watching only
+- refactor: split tool-version.js into tool-version-check.js + tool-version-fetch.js
+- refactor: fix index.html script load order for all new split files
+- fix: thinking blocks use theme-aware CSS vars for light/dark backgrounds
+- fix: all code blocks use CSS vars instead of hardcoded dark hex colors
+- fix: remove GMGUIApp dead code from app.js; add app.js and app-shortcuts.js to index.html
+- fix: extend window.__debug.getSyncState() with all XState machine snapshots

package/lib/jsonl-watcher.js

@@ -1,36 +1,26 @@
 import fs from 'fs';
-import path from 'path';
-import os from 'os';
+import { JsonlWatcher as CCTailWatcher } from '@lanmower/cc-tail';
 import { JsonlParser } from './jsonl-parser.js';
 
-const PROJECTS_DIR = path.join(os.homedir(), '.claude', 'projects');
-const DEBOUNCE_MS = 16;
-
-export class JsonlWatcher {
+export class JsonlWatcher extends CCTailWatcher {
   constructor({ broadcastSync, queries, ownedSessionIds }) {
+    super();
     this._parser = new JsonlParser({ broadcastSync, queries, ownedSessionIds });
-    this._tails = new Map();
-    this._timers = new Map();
-    this._watcher = null;
   }
 
-  start() {
-    if (!fs.existsSync(PROJECTS_DIR)) return;
-    this._scanDir(PROJECTS_DIR, 0);
-    for (const [fp, t] of this._timers.entries()) { clearTimeout(t); this._timers.delete(fp); this._read(fp); }
-    this._parser.endAllStreaming();
-    try {
-      this._watcher = fs.watch(PROJECTS_DIR, { recursive: true }, (_, f) => {
-        if (f && f.endsWith('.jsonl')) this._debounce(path.join(PROJECTS_DIR, f));
-      });
-      this._watcher.on('error', (e) => console.error('[JsonlWatcher]', e.message));
-    } catch (e) { console.error('[JsonlWatcher] start failed:', e.message); }
+  _line(line) {
+    line = line.trim();
+    if (!line) return;
+    let e;
+    try { e = JSON.parse(line); } catch (_) { return; }
+    if (!e || !e.sessionId) return;
+    const cid = this._parser._conv(e.sessionId, e);
+    if (cid) this._parser._route(cid, e.sessionId, e);
   }
 
   stop() {
-    if (this._watcher) try { this._watcher.close(); } catch (_) {}
-    for (const s of this._tails.values()) if (s.fd !== null) try { fs.closeSync(s.fd); } catch (_) {}
-    for (const t of this._timers.values()) clearTimeout(t);
+    super.stop();
+    this._parser.endAllStreaming();
   }
 
   removeConversation(conversationId) {
@@ -54,45 +44,4 @@ export class JsonlWatcher {
     this._timers.clear();
     this._parser.clear();
   }
-
-  _scanDir(dir, depth) {
-    if (depth > 4) return;
-    try {
-      for (const d of fs.readdirSync(dir, { withFileTypes: true })) {
-        const fp = path.join(dir, d.name);
-        if (d.isFile() && d.name.endsWith('.jsonl')) this._debounce(fp);
-        else if (d.isDirectory()) this._scanDir(fp, depth + 1);
-      }
-    } catch (_) {}
-  }
-
-  _debounce(fp) {
-    const t = this._timers.get(fp);
-    if (t) clearTimeout(t);
-    this._timers.set(fp, setTimeout(() => { this._timers.delete(fp); this._read(fp); }, DEBOUNCE_MS));
-  }
-
-  _read(fp) {
-    let s = this._tails.get(fp);
-    if (!s) { s = { fd: null, offset: 0, partial: '' }; this._tails.set(fp, s); }
-    try {
-      if (s.fd === null) s.fd = fs.openSync(fp, 'r');
-      const stat = fs.fstatSync(s.fd);
-      if (stat.size <= s.offset) return;
-      const buf = Buffer.allocUnsafe(stat.size - s.offset);
-      const n = fs.readSync(s.fd, buf, 0, buf.length, s.offset);
-      s.offset += n;
-      const text = s.partial + buf.toString('utf8', 0, n);
-      const t0 = process.hrtime.bigint();
-      const lines = []; let start = 0, idx;
-      while ((idx = text.indexOf('\n', start)) !== -1) { lines.push(text.slice(start, idx)); start = idx + 1; }
-      s.partial = text.slice(start);
-      const ms = Number(process.hrtime.bigint() - t0) / 1e6;
-      if (ms > 5) console.warn(`[JsonlWatcher] hot path ${ms.toFixed(1)}ms (${lines.length} lines)`);
-      for (const l of lines) this._parser._line(fp, l);
-    } catch (e) {
-      if (e.code !== 'ENOENT') console.error('[JsonlWatcher] read error:', e.message);
-      if (s.fd !== null) { try { fs.closeSync(s.fd); } catch (_) {} s.fd = null; }
-    }
-  }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "agentgui",
-  "version": "1.0.823",
+  "version": "1.0.825",
   "description": "Multi-agent ACP client with real-time communication",
   "type": "module",
   "main": "electron/main.js",
@@ -28,6 +28,7 @@
     "@google/gemini-cli": "latest",
     "@huggingface/transformers": "^3.8.1",
     "@kilocode/cli": "latest",
+    "@lanmower/cc-tail": "^1.0.2",
     "audio-decode": "^2.2.3",
     "better-sqlite3": "^12.6.2",
     "busboy": "^1.6.0",

package/static/index.html

@@ -282,6 +282,7 @@
   <script defer src="/gm/js/event-processor.js"></script>
   <script defer src="/gm/js/streaming-renderer.js"></script>
   <script defer src="/gm/js/image-loader.js"></script>
+  <script defer src="/gm/js/image-loader-element.js"></script>
   <script defer src="/gm/lib/webjsx.js"></script>
   <script defer src="/gm/lib/xstate.umd.min.js"></script>
   <script defer src="/gm/js/ws-machine.js"></script>
@@ -302,7 +303,9 @@
   <script defer src="/gm/js/websocket-manager.js"></script>
   <script defer src="/gm/js/ws-client.js"></script>
   <script defer src="/gm/js/syntax-highlighter.js"></script>
+  <script defer src="/gm/js/syntax-highlighter-render.js"></script>
   <script defer src="/gm/js/dialogs.js"></script>
+  <script defer src="/gm/js/dialogs-types.js"></script>
   <script defer src="/gm/js/ui-components.js"></script>
   <script defer src="/gm/js/ui-components-rendering.js"></script>
   <script defer src="/gm/js/state-barrier.js"></script>

package/static/js/dialogs-types.js

@@ -0,0 +1,111 @@
+(function() {
+  var c = window._dialogCore;
+
+  window.UIDialog = {
+    alert: function(message, title) {
+      return new Promise(function(resolve) {
+        var overlay = c.createOverlay();
+        var dialog = document.createElement('div');
+        dialog.className = 'dialog-container';
+        dialog.innerHTML =
+          '<div class="dialog-box"><div class="dialog-header"><h3 class="dialog-title">' + c.escapeHtml(title || 'Alert') + '</h3></div>' +
+          '<div class="dialog-body"><p class="dialog-message">' + c.escapeHtml(message) + '</p></div>' +
+          '<div class="dialog-footer"><button class="dialog-btn dialog-btn-primary" data-action="ok">OK</button></div></div>';
+        var okBtn = dialog.querySelector('[data-action="ok"]');
+        okBtn.addEventListener('click', function() { c.closeDialog(dialog, overlay); resolve(true); });
+        overlay.querySelector('.dialog-backdrop').addEventListener('click', function() { c.closeDialog(dialog, overlay); resolve(true); });
+        document.addEventListener('keydown', function handler(e) {
+          if (e.key === 'Escape' || e.key === 'Enter') { document.removeEventListener('keydown', handler); c.closeDialog(dialog, overlay); resolve(true); }
+        });
+        c.showDialog(dialog, overlay);
+      });
+    },
+
+    confirm: function(message, title) {
+      return new Promise(function(resolve) {
+        var overlay = c.createOverlay();
+        var dialog = document.createElement('div');
+        dialog.className = 'dialog-container';
+        dialog.innerHTML =
+          '<div class="dialog-box"><div class="dialog-header"><h3 class="dialog-title">' + c.escapeHtml(title || 'Confirm') + '</h3></div>' +
+          '<div class="dialog-body"><p class="dialog-message">' + c.escapeHtml(message).replace(/\n/g, '<br>') + '</p></div>' +
+          '<div class="dialog-footer"><button class="dialog-btn dialog-btn-secondary" data-action="cancel">Cancel</button>' +
+          '<button class="dialog-btn dialog-btn-primary dialog-btn-danger" data-action="confirm">Confirm</button></div></div>';
+        var cancelBtn = dialog.querySelector('[data-action="cancel"]');
+        var confirmBtn = dialog.querySelector('[data-action="confirm"]');
+        cancelBtn.addEventListener('click', function() { c.closeDialog(dialog, overlay); resolve(false); });
+        confirmBtn.addEventListener('click', function() { c.closeDialog(dialog, overlay); resolve(true); });
+        overlay.querySelector('.dialog-backdrop').addEventListener('click', function() { c.closeDialog(dialog, overlay); resolve(false); });
+        document.addEventListener('keydown', function handler(e) {
+          if (e.key === 'Escape') { document.removeEventListener('keydown', handler); c.closeDialog(dialog, overlay); resolve(false); }
+          else if (e.key === 'Enter') { document.removeEventListener('keydown', handler); c.closeDialog(dialog, overlay); resolve(true); }
+        });
+        c.showDialog(dialog, overlay);
+      });
+    },
+
+    prompt: function(message, defaultValue, title) {
+      return new Promise(function(resolve) {
+        var overlay = c.createOverlay();
+        var dialog = document.createElement('div');
+        dialog.className = 'dialog-container';
+        dialog.innerHTML =
+          '<div class="dialog-box"><div class="dialog-header"><h3 class="dialog-title">' + c.escapeHtml(title || 'Input') + '</h3></div>' +
+          '<div class="dialog-body"><label class="dialog-label">' + c.escapeHtml(message) + '</label>' +
+          '<input type="text" class="dialog-input" value="' + c.escapeHtml(defaultValue || '') + '"></div>' +
+          '<div class="dialog-footer"><button class="dialog-btn dialog-btn-secondary" data-action="cancel">Cancel</button>' +
+          '<button class="dialog-btn dialog-btn-primary" data-action="ok">OK</button></div></div>';
+        var input = dialog.querySelector('.dialog-input');
+        var cancelBtn = dialog.querySelector('[data-action="cancel"]');
+        var okBtn = dialog.querySelector('[data-action="ok"]');
+        cancelBtn.addEventListener('click', function() { c.closeDialog(dialog, overlay); resolve(null); });
+        okBtn.addEventListener('click', function() { c.closeDialog(dialog, overlay); resolve(input.value); });
+        input.addEventListener('keydown', function(e) { if (e.key === 'Enter') { c.closeDialog(dialog, overlay); resolve(input.value); } });
+        overlay.querySelector('.dialog-backdrop').addEventListener('click', function() { c.closeDialog(dialog, overlay); resolve(null); });
+        document.addEventListener('keydown', function handler(e) {
+          if (e.key === 'Escape') { document.removeEventListener('keydown', handler); c.closeDialog(dialog, overlay); resolve(null); }
+        });
+        c.showDialog(dialog, overlay);
+      });
+    },
+
+    showProgress: function(config) {
+      var overlay = c.createOverlay();
+      var dialog = document.createElement('div');
+      dialog.className = 'dialog-container';
+      dialog.innerHTML =
+        '<div class="dialog-box dialog-box-progress"><div class="dialog-header"><h3 class="dialog-title">' + c.escapeHtml(config.title || 'Please wait') + '</h3></div>' +
+        '<div class="dialog-body"><p class="dialog-message progress-message">' + c.escapeHtml(config.message || 'Loading...') + '</p>' +
+        '<div class="dialog-progress-bar"><div class="dialog-progress-fill" style="width: 0%"></div></div>' +
+        '<p class="dialog-progress-percent">0%</p></div></div>';
+      c.showDialog(dialog, overlay);
+      var progressFill = dialog.querySelector('.dialog-progress-fill');
+      var progressPercent = dialog.querySelector('.dialog-progress-percent');
+      var progressMessage = dialog.querySelector('.progress-message');
+      return {
+        update: function(percent, message) {
+          progressFill.style.width = percent + '%';
+          progressPercent.textContent = Math.round(percent) + '%';
+          if (message) progressMessage.textContent = message;
+        },
+        close: function() { c.closeDialog(dialog, overlay); }
+      };
+    },
+
+    showToast: function(message, type, duration) {
+      var existing = document.querySelector('.toast-notification');
+      if (existing) existing.remove();
+      var toast = document.createElement('div');
+      toast.className = 'toast-notification toast-' + (type || 'info');
+      toast.innerHTML = '<span class="toast-message">' + c.escapeHtml(message) + '</span>';
+      document.body.appendChild(toast);
+      requestAnimationFrame(function() { toast.classList.add('visible'); });
+      setTimeout(function() {
+        toast.classList.remove('visible');
+        setTimeout(function() { if (toast.parentNode) toast.remove(); }, 300);
+      }, duration || 3000);
+    },
+
+    closeAll: c.closeAllDialogs
+  };
+})();

package/static/js/dialogs.js

@@ -1,267 +1,53 @@
-(function() {
-  var activeDialogs = [];
-  var dialogZIndex = 10000;
-
-  function escapeHtml(text) {
-    if (typeof window._escHtml === 'function') return window._escHtml(text);
-    var d = document.createElement('div'); d.textContent = text; return d.innerHTML;
-  }
-
-  function createOverlay() {
-    var overlay = document.createElement('div');
-    overlay.className = 'dialog-overlay';
-    overlay.innerHTML = '<div class="dialog-backdrop"></div>';
-    return overlay;
-  }
-
-  function showDialog(dialog, overlay) {
-    dialogZIndex++;
-    if (overlay) {
-      overlay.style.zIndex = dialogZIndex;
-      document.body.appendChild(overlay);
-    }
-    dialog.style.zIndex = dialogZIndex + 1;
-    document.body.appendChild(dialog);
-    activeDialogs.push({ dialog: dialog, overlay: overlay });
-
-    requestAnimationFrame(function() {
-      dialog.classList.add('visible');
-      if (overlay) overlay.classList.add('visible');
-      var input = dialog.querySelector('input, textarea');
-      if (input) input.focus();
-      else {
-        var btn = dialog.querySelector('.dialog-btn-primary');
-        if (btn) btn.focus();
-      }
-    });
-  }
-
-  function closeDialog(dialog, overlay) {
-    dialog.classList.remove('visible');
-    if (overlay) overlay.classList.remove('visible');
-    setTimeout(function() {
-      if (dialog.parentNode) dialog.remove();
-      if (overlay && overlay.parentNode) overlay.remove();
-    }, 200);
-    activeDialogs = activeDialogs.filter(function(d) {
-      return d.dialog !== dialog;
-    });
-  }
-
-  function closeAllDialogs() {
-    activeDialogs.forEach(function(d) {
-      closeDialog(d.dialog, d.overlay);
-    });
-  }
-
-  window.UIDialog = {
-    alert: function(message, title) {
-      return new Promise(function(resolve) {
-        var overlay = createOverlay();
-        var dialog = document.createElement('div');
-        dialog.className = 'dialog-container';
-        dialog.innerHTML = 
-          '<div class="dialog-box">' +
-            '<div class="dialog-header">' +
-              '<h3 class="dialog-title">' + escapeHtml(title || 'Alert') + '</h3>' +
-            '</div>' +
-            '<div class="dialog-body">' +
-              '<p class="dialog-message">' + escapeHtml(message) + '</p>' +
-            '</div>' +
-            '<div class="dialog-footer">' +
-              '<button class="dialog-btn dialog-btn-primary" data-action="ok">OK</button>' +
-            '</div>' +
-          '</div>';
-        
-        var okBtn = dialog.querySelector('[data-action="ok"]');
-        okBtn.addEventListener('click', function() {
-          closeDialog(dialog, overlay);
-          resolve(true);
-        });
-        
-        overlay.querySelector('.dialog-backdrop').addEventListener('click', function() {
-          closeDialog(dialog, overlay);
-          resolve(true);
-        });
-        
-        document.addEventListener('keydown', function handler(e) {
-          if (e.key === 'Escape' || e.key === 'Enter') {
-            document.removeEventListener('keydown', handler);
-            closeDialog(dialog, overlay);
-            resolve(true);
-          }
-        });
-        
-        showDialog(dialog, overlay);
-      });
-    },
-
-    confirm: function(message, title) {
-      return new Promise(function(resolve) {
-        var overlay = createOverlay();
-        var dialog = document.createElement('div');
-        dialog.className = 'dialog-container';
-        dialog.innerHTML = 
-          '<div class="dialog-box">' +
-            '<div class="dialog-header">' +
-              '<h3 class="dialog-title">' + escapeHtml(title || 'Confirm') + '</h3>' +
-            '</div>' +
-            '<div class="dialog-body">' +
-              '<p class="dialog-message">' + escapeHtml(message).replace(/\n/g, '<br>') + '</p>' +
-            '</div>' +
-            '<div class="dialog-footer">' +
-              '<button class="dialog-btn dialog-btn-secondary" data-action="cancel">Cancel</button>' +
-              '<button class="dialog-btn dialog-btn-primary dialog-btn-danger" data-action="confirm">Confirm</button>' +
-            '</div>' +
-          '</div>';
-        
-        var cancelBtn = dialog.querySelector('[data-action="cancel"]');
-        var confirmBtn = dialog.querySelector('[data-action="confirm"]');
-        
-        cancelBtn.addEventListener('click', function() {
-          closeDialog(dialog, overlay);
-          resolve(false);
-        });
-        
-        confirmBtn.addEventListener('click', function() {
-          closeDialog(dialog, overlay);
-          resolve(true);
-        });
-        
-        overlay.querySelector('.dialog-backdrop').addEventListener('click', function() {
-          closeDialog(dialog, overlay);
-          resolve(false);
-        });
-        
-        document.addEventListener('keydown', function handler(e) {
-          if (e.key === 'Escape') {
-            document.removeEventListener('keydown', handler);
-            closeDialog(dialog, overlay);
-            resolve(false);
-          } else if (e.key === 'Enter') {
-            document.removeEventListener('keydown', handler);
-            closeDialog(dialog, overlay);
-            resolve(true);
-          }
-        });
-        
-        showDialog(dialog, overlay);
-      });
-    },
-
-    prompt: function(message, defaultValue, title) {
-      return new Promise(function(resolve) {
-        var overlay = createOverlay();
-        var dialog = document.createElement('div');
-        dialog.className = 'dialog-container';
-        dialog.innerHTML = 
-          '<div class="dialog-box">' +
-            '<div class="dialog-header">' +
-              '<h3 class="dialog-title">' + escapeHtml(title || 'Input') + '</h3>' +
-            '</div>' +
-            '<div class="dialog-body">' +
-              '<label class="dialog-label">' + escapeHtml(message) + '</label>' +
-              '<input type="text" class="dialog-input" value="' + escapeHtml(defaultValue || '') + '">' +
-            '</div>' +
-            '<div class="dialog-footer">' +
-              '<button class="dialog-btn dialog-btn-secondary" data-action="cancel">Cancel</button>' +
-              '<button class="dialog-btn dialog-btn-primary" data-action="ok">OK</button>' +
-            '</div>' +
-          '</div>';
-        
-        var input = dialog.querySelector('.dialog-input');
-        var cancelBtn = dialog.querySelector('[data-action="cancel"]');
-        var okBtn = dialog.querySelector('[data-action="ok"]');
-        
-        cancelBtn.addEventListener('click', function() {
-          closeDialog(dialog, overlay);
-          resolve(null);
-        });
-        
-        okBtn.addEventListener('click', function() {
-          closeDialog(dialog, overlay);
-          resolve(input.value);
-        });
-        
-        input.addEventListener('keydown', function(e) {
-          if (e.key === 'Enter') {
-            closeDialog(dialog, overlay);
-            resolve(input.value);
-          }
-        });
-        
-        overlay.querySelector('.dialog-backdrop').addEventListener('click', function() {
-          closeDialog(dialog, overlay);
-          resolve(null);
-        });
-        
-        document.addEventListener('keydown', function handler(e) {
-          if (e.key === 'Escape') {
-            document.removeEventListener('keydown', handler);
-            closeDialog(dialog, overlay);
-            resolve(null);
-          }
-        });
-        
-        showDialog(dialog, overlay);
-      });
-    },
-
-    showProgress: function(config) {
-      var overlay = createOverlay();
-      var dialog = document.createElement('div');
-      dialog.className = 'dialog-container';
-      dialog.innerHTML = 
-        '<div class="dialog-box dialog-box-progress">' +
-          '<div class="dialog-header">' +
-            '<h3 class="dialog-title">' + escapeHtml(config.title || 'Please wait') + '</h3>' +
-          '</div>' +
-          '<div class="dialog-body">' +
-            '<p class="dialog-message progress-message">' + escapeHtml(config.message || 'Loading...') + '</p>' +
-            '<div class="dialog-progress-bar">' +
-              '<div class="dialog-progress-fill" style="width: 0%"></div>' +
-            '</div>' +
-            '<p class="dialog-progress-percent">0%</p>' +
-          '</div>' +
-        '</div>';
-      
-      showDialog(dialog, overlay);
-      
-      var progressFill = dialog.querySelector('.dialog-progress-fill');
-      var progressPercent = dialog.querySelector('.dialog-progress-percent');
-      var progressMessage = dialog.querySelector('.progress-message');
-      
-      return {
-        update: function(percent, message) {
-          progressFill.style.width = percent + '%';
-          progressPercent.textContent = Math.round(percent) + '%';
-          if (message) progressMessage.textContent = message;
-        },
-        close: function() {
-          closeDialog(dialog, overlay);
-        }
-      };
-    },
-
-    showToast: function(message, type, duration) {
-      var existing = document.querySelector('.toast-notification');
-      if (existing) existing.remove();
-      
-      var toast = document.createElement('div');
-      toast.className = 'toast-notification toast-' + (type || 'info');
-      toast.innerHTML = '<span class="toast-message">' + escapeHtml(message) + '</span>';
-      document.body.appendChild(toast);
-      
-      requestAnimationFrame(function() {
-        toast.classList.add('visible');
-      });
-      
-      setTimeout(function() {
-        toast.classList.remove('visible');
-        setTimeout(function() { if (toast.parentNode) toast.remove(); }, 300);
-      }, duration || 3000);
-    },
-
-    closeAll: closeAllDialogs
-  };
-})();
+(function() {
+  var activeDialogs = [];
+  var dialogZIndex = 10000;
+
+  function escapeHtml(text) {
+    if (typeof window._escHtml === 'function') return window._escHtml(text);
+    var d = document.createElement('div'); d.textContent = text; return d.innerHTML;
+  }
+
+  function createOverlay() {
+    var overlay = document.createElement('div');
+    overlay.className = 'dialog-overlay';
+    overlay.innerHTML = '<div class="dialog-backdrop"></div>';
+    return overlay;
+  }
+
+  function showDialog(dialog, overlay) {
+    dialogZIndex++;
+    if (overlay) {
+      overlay.style.zIndex = dialogZIndex;
+      document.body.appendChild(overlay);
+    }
+    dialog.style.zIndex = dialogZIndex + 1;
+    document.body.appendChild(dialog);
+    activeDialogs.push({ dialog: dialog, overlay: overlay });
+    requestAnimationFrame(function() {
+      dialog.classList.add('visible');
+      if (overlay) overlay.classList.add('visible');
+      var input = dialog.querySelector('input, textarea');
+      if (input) input.focus();
+      else {
+        var btn = dialog.querySelector('.dialog-btn-primary');
+        if (btn) btn.focus();
+      }
+    });
+  }
+
+  function closeDialog(dialog, overlay) {
+    dialog.classList.remove('visible');
+    if (overlay) overlay.classList.remove('visible');
+    setTimeout(function() {
+      if (dialog.parentNode) dialog.remove();
+      if (overlay && overlay.parentNode) overlay.remove();
+    }, 200);
+    activeDialogs = activeDialogs.filter(function(d) { return d.dialog !== dialog; });
+  }
+
+  function closeAllDialogs() {
+    activeDialogs.forEach(function(d) { closeDialog(d.dialog, d.overlay); });
+  }
+
+  window._dialogCore = { escapeHtml: escapeHtml, createOverlay: createOverlay, showDialog: showDialog, closeDialog: closeDialog, closeAllDialogs: closeAllDialogs };
+})();

package/static/js/image-loader-element.js

@@ -0,0 +1,76 @@
+
+Object.assign(ImageLoader.prototype, {
+  createImageElement(imagePath, options = {}) {
+    const container = document.createElement('div');
+    container.className = 'image-container';
+    container.dataset.imagePath = imagePath;
+    container.style.cssText = `
+      display: flex;
+      flex-direction: column;
+      gap: 0.5rem;
+      padding: 0.75rem;
+      border-radius: 0.375rem;
+      background: var(--color-bg-secondary);
+      border: 1px solid var(--color-border);
+    `;
+
+    const placeholder = document.createElement('div');
+    placeholder.className = 'image-placeholder';
+    placeholder.style.cssText = `
+      background: linear-gradient(90deg, var(--color-bg-tertiary) 25%, var(--color-bg-secondary) 50%, var(--color-bg-tertiary) 75%);
+      background-size: 200% 100%;
+      animation: loading 1.5s infinite;
+      border-radius: 0.375rem;
+      aspect-ratio: 16/9;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      color: var(--color-text-secondary);
+      font-size: 0.875rem;
+    `;
+    placeholder.innerHTML = 'Loading image...';
+    placeholder.dataset.path = imagePath;
+
+    const img = document.createElement('img');
+    img.className = 'lazy-image';
+    img.alt = imagePath;
+    img.style.cssText = `
+      max-width: 100%;
+      max-height: ${this.config.maxImageDisplaySize};
+      border-radius: 0.375rem;
+      display: none;
+    `;
+    img.dataset.src = imagePath;
+
+    const caption = document.createElement('div');
+    caption.className = 'image-caption';
+    caption.style.cssText = `
+      font-size: 0.75rem;
+      color: var(--color-text-secondary);
+      word-break: break-all;
+      font-family: 'Monaco', 'Menlo', monospace;
+    `;
+    caption.textContent = imagePath;
+
+    container.appendChild(placeholder);
+    container.appendChild(img);
+    container.appendChild(caption);
+
+    img.addEventListener('load', () => {
+      placeholder.style.display = 'none';
+      img.style.display = 'block';
+    });
+
+    img.addEventListener('error', () => {
+      placeholder.textContent = 'Failed to load image';
+      placeholder.style.background = 'var(--color-bg-error)';
+      placeholder.style.color = 'var(--color-text-error)';
+    });
+
+    if (this.intersectionObserver) {
+      this.intersectionObserver.observe(container);
+    }
+
+    return container;
+  }
+});

package/static/js/image-loader.js

@@ -89,80 +89,6 @@ class ImageLoader {
     return images;
   }
 
-  createImageElement(imagePath, options = {}) {
-    const container = document.createElement('div');
-    container.className = 'image-container';
-    container.dataset.imagePath = imagePath;
-    container.style.cssText = `
-      display: flex;
-      flex-direction: column;
-      gap: 0.5rem;
-      padding: 0.75rem;
-      border-radius: 0.375rem;
-      background: var(--color-bg-secondary);
-      border: 1px solid var(--color-border);
-    `;
-
-    const placeholder = document.createElement('div');
-    placeholder.className = 'image-placeholder';
-    placeholder.style.cssText = `
-      background: linear-gradient(90deg, var(--color-bg-tertiary) 25%, var(--color-bg-secondary) 50%, var(--color-bg-tertiary) 75%);
-      background-size: 200% 100%;
-      animation: loading 1.5s infinite;
-      border-radius: 0.375rem;
-      aspect-ratio: 16/9;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      color: var(--color-text-secondary);
-      font-size: 0.875rem;
-    `;
-    placeholder.innerHTML = 'Loading image...';
-    placeholder.dataset.path = imagePath;
-
-    const img = document.createElement('img');
-    img.className = 'lazy-image';
-    img.alt = imagePath;
-    img.style.cssText = `
-      max-width: 100%;
-      max-height: ${this.config.maxImageDisplaySize};
-      border-radius: 0.375rem;
-      display: none;
-    `;
-    img.dataset.src = imagePath;
-
-    const caption = document.createElement('div');
-    caption.className = 'image-caption';
-    caption.style.cssText = `
-      font-size: 0.75rem;
-      color: var(--color-text-secondary);
-      word-break: break-all;
-      font-family: 'Monaco', 'Menlo', monospace;
-    `;
-    caption.textContent = imagePath;
-
-    container.appendChild(placeholder);
-    container.appendChild(img);
-    container.appendChild(caption);
-
-    img.addEventListener('load', () => {
-      placeholder.style.display = 'none';
-      img.style.display = 'block';
-    });
-
-    img.addEventListener('error', () => {
-      placeholder.textContent = 'Failed to load image';
-      placeholder.style.background = 'var(--color-bg-error)';
-      placeholder.style.color = 'var(--color-text-error)';
-    });
-
-    if (this.intersectionObserver) {
-      this.intersectionObserver.observe(container);
-    }
-
-    return container;
-  }
-
   initIntersectionObserver() {
     this.intersectionObserver = new IntersectionObserver(
       (entries) => {

package/static/js/syntax-highlighter-render.js

@@ -0,0 +1,72 @@
+Object.assign(SyntaxHighlighter.prototype, {
+  async highlight(code, language = 'plaintext') {
+    if (!code) return '';
+    if (this.config.lazyLoad) {
+      try {
+        await this.ensureLoaded();
+      } catch (error) {
+        console.warn('Prism loading failed, returning unformatted code');
+        return this.escapeHtml(code);
+      }
+    }
+    const cacheKey = `${language}:${code}`;
+    if (this.config.enableCache && this.highlightCache.has(cacheKey)) return this.highlightCache.get(cacheKey);
+    let highlighted;
+    try {
+      if (typeof Prism !== 'undefined' && Prism.languages[language]) {
+        highlighted = Prism.highlight(code, Prism.languages[language], language);
+      } else {
+        highlighted = this.escapeHtml(code);
+      }
+    } catch (error) {
+      console.error('Highlight error:', error);
+      highlighted = this.escapeHtml(code);
+    }
+    if (this.config.enableCache) {
+      this.highlightCache.set(cacheKey, highlighted);
+      if (this.highlightCache.size > this.config.maxCacheSize) {
+        const firstKey = this.highlightCache.keys().next().value;
+        this.highlightCache.delete(firstKey);
+      }
+    }
+    return highlighted;
+  },
+
+  async createHighlightedElement(code, language = 'plaintext') {
+    const pre = document.createElement('pre');
+    const code_el = document.createElement('code');
+    code_el.className = `language-${language}`;
+    if (this.config.lazyLoad) {
+      try {
+        await this.ensureLoaded();
+        const highlighted = await this.highlight(code, language);
+        code_el.innerHTML = highlighted;
+      } catch (error) {
+        code_el.textContent = code;
+      }
+    } else {
+      code_el.textContent = code;
+    }
+    pre.appendChild(code_el);
+    return pre;
+  },
+
+  async highlightElement(element) {
+    if (!element || !element.querySelector('code')) return;
+    if (this.config.lazyLoad) {
+      try {
+        await this.ensureLoaded();
+      } catch (error) {
+        console.warn('Prism loading failed, skipping highlighting');
+        return;
+      }
+    }
+    if (typeof Prism !== 'undefined') {
+      try {
+        Prism.highlightElement(element.querySelector('code'));
+      } catch (error) {
+        console.error('Element highlighting error:', error);
+      }
+    }
+  }
+});

package/static/js/syntax-highlighter.js

@@ -81,90 +81,6 @@ class SyntaxHighlighter {
     }
   }
 
-  async highlight(code, language = 'plaintext') {
-    if (!code) return '';
-
-    if (this.config.lazyLoad) {
-      try {
-        await this.ensureLoaded();
-      } catch (error) {
-        console.warn('Prism loading failed, returning unformatted code');
-        return this.escapeHtml(code);
-      }
-    }
-
-    const cacheKey = `${language}:${code}`;
-    if (this.config.enableCache && this.highlightCache.has(cacheKey)) {
-      return this.highlightCache.get(cacheKey);
-    }
-
-    let highlighted;
-    try {
-      if (typeof Prism !== 'undefined' && Prism.languages[language]) {
-        highlighted = Prism.highlight(code, Prism.languages[language], language);
-      } else {
-        highlighted = this.escapeHtml(code);
-      }
-    } catch (error) {
-      console.error('Highlight error:', error);
-      highlighted = this.escapeHtml(code);
-    }
-
-    if (this.config.enableCache) {
-      this.highlightCache.set(cacheKey, highlighted);
-
-      if (this.highlightCache.size > this.config.maxCacheSize) {
-        const firstKey = this.highlightCache.keys().next().value;
-        this.highlightCache.delete(firstKey);
-      }
-    }
-
-    return highlighted;
-  }
-
-  async createHighlightedElement(code, language = 'plaintext') {
-    const pre = document.createElement('pre');
-    const code_el = document.createElement('code');
-
-    code_el.className = `language-${language}`;
-
-    if (this.config.lazyLoad) {
-      try {
-        await this.ensureLoaded();
-        const highlighted = await this.highlight(code, language);
-        code_el.innerHTML = highlighted;
-      } catch (error) {
-        code_el.textContent = code;
-      }
-    } else {
-      code_el.textContent = code;
-    }
-
-    pre.appendChild(code_el);
-    return pre;
-  }
-
-  async highlightElement(element) {
-    if (!element || !element.querySelector('code')) return;
-
-    if (this.config.lazyLoad) {
-      try {
-        await this.ensureLoaded();
-      } catch (error) {
-        console.warn('Prism loading failed, skipping highlighting');
-        return;
-      }
-    }
-
-    if (typeof Prism !== 'undefined') {
-      try {
-        Prism.highlightElement(element.querySelector('code'));
-      } catch (error) {
-        console.error('Element highlighting error:', error);
-      }
-    }
-  }
-
   detectLanguage(code) {
     if (!code) return 'plaintext';
 

package/static/js/event-filter.js

@@ -1,118 +0,0 @@
-class EventFilter {
-  constructor(renderer) {
-    this.renderer = renderer;
-    this.allEvents = [];
-    this.filteredEvents = [];
-    this.filterState = {
-      types: new Set(),
-      searchText: '',
-      startTime: null,
-      endTime: null,
-      isActive: false
-    };
-    this.replayState = {
-      isReplaying: false,
-      currentIndex: 0,
-      speed: 1
-    };
-  }
-
-  trackEvent(event) {
-    this.allEvents.push({
-      ...event,
-      trackingId: this.allEvents.length,
-      trackedAt: Date.now()
-    });
-    if (this.allEvents.length > 5000) this.allEvents.shift();
-    if (this.filterState.isActive) this.applyFilters();
-    return event;
-  }
-
-  setTypeFilter(types) { this.filterState.types = new Set(types); this.applyFilters(); }
-
-  toggleType(type) {
-    if (this.filterState.types.has(type)) this.filterState.types.delete(type);
-    else this.filterState.types.add(type);
-    this.applyFilters();
-  }
-
-  setSearchText(text) { this.filterState.searchText = text.toLowerCase(); this.applyFilters(); }
-
-  setTimeRange(startTime, endTime) { this.filterState.startTime = startTime; this.filterState.endTime = endTime; this.applyFilters(); }
-
-  applyFilters() {
-    this.filterState.isActive =
-      this.filterState.types.size > 0 ||
-      this.filterState.searchText.length > 0 ||
-      this.filterState.startTime !== null ||
-      this.filterState.endTime !== null;
-    if (!this.filterState.isActive) { this.filteredEvents = [...this.allEvents]; return this.filteredEvents; }
-    this.filteredEvents = this.allEvents.filter(event => {
-      if (this.filterState.types.size > 0 && !this.filterState.types.has(event.type)) return false;
-      if (this.filterState.searchText.length > 0) {
-        if (!JSON.stringify(event).toLowerCase().includes(this.filterState.searchText)) return false;
-      }
-      const eventTime = event.timestamp || event.trackedAt;
-      if (this.filterState.startTime && eventTime < this.filterState.startTime) return false;
-      if (this.filterState.endTime && eventTime > this.filterState.endTime) return false;
-      return true;
-    });
-    return this.filteredEvents;
-  }
-
-  search(query) {
-    const lowerQuery = query.toLowerCase();
-    return this.allEvents.map((event, i) => {
-      const searchable = JSON.stringify(event).toLowerCase();
-      if (!searchable.includes(lowerQuery)) return null;
-      return { event, index: i, matchCount: (searchable.match(new RegExp(lowerQuery, 'g')) || []).length };
-    }).filter(Boolean).sort((a, b) => b.matchCount - a.matchCount);
-  }
-
-  getStats() {
-    const stats = { total: this.allEvents.length, byType: {}, byTime: { oldest: null, newest: null, span: 0 } };
-    for (const event of this.allEvents) {
-      stats.byType[event.type] = (stats.byType[event.type] || 0) + 1;
-      const time = event.timestamp || event.trackedAt;
-      if (!stats.byTime.oldest || time < stats.byTime.oldest) stats.byTime.oldest = time;
-      if (!stats.byTime.newest || time > stats.byTime.newest) stats.byTime.newest = time;
-    }
-    if (stats.byTime.oldest && stats.byTime.newest) stats.byTime.span = stats.byTime.newest - stats.byTime.oldest;
-    return stats;
-  }
-
-  async startReplay(events = null, speed = 1) {
-    const replayEvents = events || this.filteredEvents;
-    if (replayEvents.length === 0) return;
-    this.replayState = { isReplaying: true, currentIndex: 0, speed };
-    this.renderer.clear();
-    for (const event of replayEvents) {
-      if (!this.replayState.isReplaying) break;
-      await new Promise(resolve => setTimeout(resolve, 100 / this.replayState.speed));
-      this.renderer.queueEvent(event);
-      this.replayState.currentIndex++;
-    }
-    this.replayState.isReplaying = false;
-  }
-
-  stopReplay() { this.replayState.isReplaying = false; }
-
-  getReplayProgress() {
-    const total = this.filteredEvents.length;
-    const current = this.replayState.currentIndex;
-    return { current, total, percentage: total > 0 ? (current / total) * 100 : 0, isReplaying: this.replayState.isReplaying };
-  }
-
-  export(format = 'json') {
-    const events = this.filterState.isActive ? this.filteredEvents : this.allEvents;
-    if (format === 'csv') return window.exportEventsAsCSV(events);
-    if (format === 'markdown') return window.exportEventsAsMarkdown(events);
-    return window.exportEventsAsJSON(events);
-  }
-
-  clear() { this.allEvents = []; this.filteredEvents = []; this.stopReplay(); }
-}
-
-window.EventFilter = EventFilter;
-
-if (typeof module !== 'undefined' && module.exports) module.exports = EventFilter;