agentgui 1.0.819 → 1.0.820

package/CHANGELOG.md

@@ -1,6 +1,7 @@
 ## 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

package/CLAUDE.md

@@ -88,7 +88,8 @@ static/js/stt-handler.js         Speech-to-text recording and upload
 static/js/features.js            View toggle, drag-drop upload, model progress indicator
 static/js/tools-manager.js       Tool install/update UI orchestrator
 static/js/tools-manager-ui.js    Tool card rendering + voice selector helpers
-static/js/agent-auth.js          Agent authentication UI (OAuth flows)
+static/js/agent-auth.js          Agent authentication UI (dropdown, auth-status, provider keys)
+static/js/agent-auth-oauth.js    OAuth modal functions (triggerAuth, onWsMessage, paste fallback)
 static/js/dialogs.js             Modal dialog system
 static/js/image-loader.js        Lazy image loading for agent file read events
 static/js/pm2-monitor.js         PM2 process monitor UI

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "agentgui",
-  "version": "1.0.819",
+  "version": "1.0.820",
   "description": "Multi-agent ACP client with real-time communication",
   "type": "module",
   "main": "electron/main.js",

package/static/index.html

@@ -299,6 +299,7 @@
   <script defer src="/gm/js/syntax-highlighter.js"></script>
   <script defer src="/gm/js/dialogs.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>
   <script defer src="/gm/js/terminal.js"></script>
   <script defer src="/gm/js/script-runner.js"></script>
@@ -307,9 +308,12 @@
   <script defer src="/gm/js/stt-handler.js"></script>
   <script defer src="/gm/js/voice.js"></script>
   <script defer src="/gm/js/pm2-monitor.js"></script>
+  <script defer src="/gm/js/event-filter-config.js"></script>
+  <script defer src="/gm/js/event-filter.js"></script>
   <script defer src="/gm/js/client.js"></script>
   <script defer src="/gm/js/features.js"></script>
   <script defer src="/gm/js/agent-auth.js"></script>
+  <script defer src="/gm/js/agent-auth-oauth.js"></script>
   <script defer src="/gm/js/app-shortcuts.js"></script>
   <script defer src="/gm/app.js"></script>
 

package/static/js/agent-auth-oauth.js

@@ -0,0 +1,159 @@
+(function() {
+  var AUTH_CONV_ID = '__agent_auth__';
+  var oauthPollInterval = null, oauthPollTimeout = null, oauthFallbackTimer = null;
+
+  function state() { return window.__agentAuthState; }
+
+  function cleanupOAuthPolling() {
+    if (oauthPollInterval) { clearInterval(oauthPollInterval); oauthPollInterval = null; }
+    if (oauthPollTimeout) { clearTimeout(oauthPollTimeout); oauthPollTimeout = null; }
+    if (oauthFallbackTimer) { clearTimeout(oauthFallbackTimer); oauthFallbackTimer = null; }
+  }
+
+  function showOAuthWaitingModal() {
+    removeOAuthModal();
+    var overlay = document.createElement('div');
+    overlay.id = 'oauthWaitingModal';
+    overlay.style.cssText = 'position:fixed;inset:0;background:rgba(0,0,0,0.7);display:flex;align-items:center;justify-content:center;z-index:9999;';
+    overlay.innerHTML = '<div style="background:var(--color-bg-secondary,#1f2937);border-radius:1rem;padding:2rem;max-width:28rem;width:calc(100% - 2rem);box-shadow:0 25px 50px rgba(0,0,0,0.5);color:var(--color-text-primary,white);font-family:system-ui,sans-serif;" onclick="event.stopPropagation()">' +
+      '<div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem;">' +
+      '<h2 style="font-size:1.125rem;font-weight:700;margin:0;">Google Sign-In</h2>' +
+      '<button id="oauthWaitingClose" style="background:none;border:none;color:var(--color-text-secondary,#9ca3af);font-size:1.5rem;cursor:pointer;padding:0;line-height:1;">\u00d7</button></div>' +
+      '<div id="oauthWaitingContent" style="text-align:center;padding:1.5rem 0;">' +
+      '<div style="font-size:2rem;margin-bottom:1rem;animation:pulse 2s infinite;">&#9203;</div>' +
+      '<p style="font-size:0.85rem;color:var(--color-text-secondary,#d1d5db);margin:0 0 0.5rem;">Waiting for Google sign-in to complete...</p>' +
+      '<p style="font-size:0.75rem;color:var(--color-text-secondary,#6b7280);margin:0;">Complete the sign-in in the tab that just opened.</p>' +
+      '<p style="font-size:0.75rem;color:var(--color-text-secondary,#6b7280);margin:0.25rem 0 0;">This dialog will close automatically when done.</p></div>' +
+      '<div id="oauthPasteFallback" style="display:none;">' +
+      '<div style="margin-bottom:1rem;padding:1rem;background:var(--color-bg-tertiary,rgba(255,255,255,0.05));border-radius:0.5rem;">' +
+      '<p style="font-size:0.8rem;color:var(--color-text-secondary,#d1d5db);margin:0 0 0.5rem;">The automatic relay did not complete. This can happen when accessing the server remotely.</p>' +
+      '<p style="font-size:0.8rem;color:var(--color-text-secondary,#d1d5db);margin:0;">Copy the <span style="color:white;font-weight:600;">entire URL</span> from the sign-in tab and paste it below.</p></div>' +
+      '<input type="text" id="oauthPasteInput" placeholder="http://localhost:3000/gm/oauth2callback?code=..." style="width:100%;box-sizing:border-box;padding:0.75rem 1rem;background:var(--color-bg-primary,#374151);border:1px solid var(--color-border,#4b5563);border-radius:0.5rem;color:var(--color-text-primary,white);font-size:0.8rem;font-family:monospace;outline:none;" />' +
+      '<p id="oauthPasteError" style="font-size:0.75rem;color:#ef4444;margin:0.5rem 0 0;display:none;"></p></div>' +
+      '<div style="display:flex;gap:0.75rem;margin-top:1.25rem;">' +
+      '<button id="oauthWaitingCancel" style="flex:1;padding:0.625rem;border-radius:0.5rem;border:1px solid var(--color-border,#4b5563);background:transparent;color:var(--color-text-primary,white);font-size:0.8rem;cursor:pointer;font-weight:600;">Cancel</button>' +
+      '<button id="oauthPasteSubmit" style="flex:1;padding:0.625rem;border-radius:0.5rem;border:none;background:var(--color-primary,#3b82f6);color:white;font-size:0.8rem;cursor:pointer;font-weight:600;display:none;">Complete Sign-In</button></div>' +
+      '<style>@keyframes pulse{0%,100%{opacity:1}50%{opacity:0.5}}</style></div>';
+    document.body.appendChild(overlay);
+    var dismiss = function() { cleanupOAuthPolling(); state().authRunning = false; removeOAuthModal(); };
+    document.getElementById('oauthWaitingClose').addEventListener('click', dismiss);
+    document.getElementById('oauthWaitingCancel').addEventListener('click', dismiss);
+    document.getElementById('oauthPasteSubmit').addEventListener('click', submitOAuthPasteUrl);
+  }
+
+  function showOAuthPasteFallback() {
+    var fallback = document.getElementById('oauthPasteFallback');
+    var waitContent = document.getElementById('oauthWaitingContent');
+    var submitBtn = document.getElementById('oauthPasteSubmit');
+    if (fallback) fallback.style.display = 'block';
+    if (waitContent) waitContent.style.display = 'none';
+    if (submitBtn) submitBtn.style.display = 'block';
+    var input = document.getElementById('oauthPasteInput');
+    if (input) {
+      input.addEventListener('keydown', function(e) { if (e.key === 'Enter') submitOAuthPasteUrl(); });
+      setTimeout(function() { input.focus(); }, 100);
+    }
+  }
+
+  function removeOAuthModal() {
+    var el = document.getElementById('oauthWaitingModal');
+    if (el) el.remove();
+  }
+
+  function submitOAuthPasteUrl() {
+    var input = document.getElementById('oauthPasteInput');
+    var errorEl = document.getElementById('oauthPasteError');
+    var submitBtn = document.getElementById('oauthPasteSubmit');
+    if (!input) return;
+    var url = input.value.trim();
+    if (!url) {
+      if (errorEl) { errorEl.textContent = 'Please paste the URL from the redirected page.'; errorEl.style.display = 'block'; }
+      return;
+    }
+    if (submitBtn) { submitBtn.disabled = true; submitBtn.textContent = 'Verifying...'; }
+    if (errorEl) errorEl.style.display = 'none';
+    window.wsClient.rpc('gemini.complete', { url: url })
+      .then(function(data) {
+        if (data.success) {
+          cleanupOAuthPolling();
+          state().authRunning = false;
+          removeOAuthModal();
+          state().refresh();
+        } else {
+          if (errorEl) { errorEl.textContent = data.error || 'Failed to complete authentication.'; errorEl.style.display = 'block'; }
+          if (submitBtn) { submitBtn.disabled = false; submitBtn.textContent = 'Complete Sign-In'; }
+        }
+      }).catch(function(e) {
+        if (errorEl) { errorEl.textContent = e.message; errorEl.style.display = 'block'; }
+        if (submitBtn) { submitBtn.disabled = false; submitBtn.textContent = 'Complete Sign-In'; }
+      });
+  }
+
+  function triggerAuth(agentId) {
+    if (state().authRunning) return;
+    window.wsClient.rpc('agent.auth', { id: agentId })
+      .then(function(data) {
+        if (data.ok) {
+          state().authRunning = true; showTerminalTab(); switchToTerminalView();
+          var term = getTerminal();
+          if (term) { term.clear(); term.writeln('\x1b[36m[authenticating ' + agentId + ']\x1b[0m\r\n'); }
+          if (data.authUrl) {
+            window.open(data.authUrl, '_blank');
+            if (agentId === 'gemini') {
+              showOAuthWaitingModal();
+              cleanupOAuthPolling();
+              oauthPollInterval = setInterval(function() {
+                window.wsClient.rpc('gemini.status')
+                  .then(function(status) {
+                    if (status.status === 'success') {
+                      cleanupOAuthPolling(); state().authRunning = false; removeOAuthModal(); state().refresh();
+                    } else if (status.status === 'error') {
+                      cleanupOAuthPolling(); state().authRunning = false; removeOAuthModal();
+                    }
+                  }).catch(function() {});
+              }, 1500);
+              oauthFallbackTimer = setTimeout(function() {
+                if (state().authRunning) showOAuthPasteFallback();
+              }, 30000);
+              oauthPollTimeout = setTimeout(function() {
+                cleanupOAuthPolling();
+                if (state().authRunning) { state().authRunning = false; removeOAuthModal(); }
+              }, 5 * 60 * 1000);
+            }
+          }
+        }
+      }).catch(function() {});
+  }
+
+  function onWsMessage(e) {
+    var data = e.detail;
+    if (!data || data.conversationId !== AUTH_CONV_ID) return;
+    if (data.type === 'script_started') {
+      state().authRunning = true; showTerminalTab(); switchToTerminalView();
+      var term = getTerminal();
+      if (term) { term.clear(); term.writeln('\x1b[36m[authenticating ' + (data.agentId || '') + ']\x1b[0m\r\n'); }
+    } else if (data.type === 'script_output') {
+      showTerminalTab();
+      var term = getTerminal();
+      if (term) term.write(data.data);
+    } else if (data.type === 'script_stopped') {
+      state().authRunning = false;
+      removeOAuthModal();
+      cleanupOAuthPolling();
+      var term = getTerminal();
+      var msg = data.error ? data.error : ('exited with code ' + (data.code || 0));
+      if (term) term.writeln('\r\n\x1b[90m[auth ' + msg + ']\x1b[0m');
+      setTimeout(function() { state().refresh(); }, 1000);
+    }
+  }
+
+  function showTerminalTab() { var t = document.getElementById('terminalTabBtn'); if (t) t.style.display = ''; }
+  function switchToTerminalView() {
+    var bar = document.getElementById('viewToggleBar');
+    if (!bar) return;
+    var t = bar.querySelector('[data-view="terminal"]'); if (t) t.click();
+  }
+  function getTerminal() { return window.scriptRunner ? window.scriptRunner.getTerminal() : null; }
+
+  window.__agentAuthOAuth = { triggerAuth: triggerAuth, onWsMessage: onWsMessage };
+})();

package/static/js/agent-auth.js

@@ -2,7 +2,13 @@
   var btn = document.getElementById('agentAuthBtn');
   var dropdown = document.getElementById('agentAuthDropdown');
   var agents = [], providers = {}, authRunning = false, editingProvider = null;
-  var AUTH_CONV_ID = '__agent_auth__';
+
+  window.__agentAuthState = {
+    get authRunning() { return authRunning; },
+    set authRunning(v) { authRunning = v; },
+    refresh: function() { refresh(); },
+    closeDropdown: function() { closeDropdown(); }
+  };
 
   function init() {
     if (!btn || !dropdown) return;
@@ -12,7 +18,9 @@
       if (!btn.contains(e.target) && !dropdown.contains(e.target)) closeDropdown();
     });
     window.addEventListener('conversation-selected', function() { refresh(); });
-    window.addEventListener('ws-message', onWsMessage);
+    window.addEventListener('ws-message', function(e) {
+      if (window.__agentAuthOAuth && window.__agentAuthOAuth.onWsMessage) window.__agentAuthOAuth.onWsMessage(e);
+    });
     refresh();
   }
 
@@ -48,7 +56,11 @@
       agents.forEach(function(agent) {
         var dotClass = agent.authenticated ? 'ok' : (agent.detail === 'unknown' ? 'unknown' : 'missing');
         var item = makeItem(dotClass, agent.name, agent.detail);
-        item.addEventListener('click', function(e) { e.stopPropagation(); closeDropdown(); triggerAuth(agent.id); });
+        item.addEventListener('click', function(e) {
+          e.stopPropagation();
+          closeDropdown();
+          if (window.__agentAuthOAuth && window.__agentAuthOAuth.triggerAuth) window.__agentAuthOAuth.triggerAuth(agent.id);
+        });
         dropdown.appendChild(item);
       });
     }
@@ -126,165 +138,6 @@
   }
 
   function closeDropdown() { dropdown.classList.remove('open'); editingProvider = null; }
-
-  var oauthPollInterval = null, oauthPollTimeout = null, oauthFallbackTimer = null;
-
-  function cleanupOAuthPolling() {
-    if (oauthPollInterval) { clearInterval(oauthPollInterval); oauthPollInterval = null; }
-    if (oauthPollTimeout) { clearTimeout(oauthPollTimeout); oauthPollTimeout = null; }
-    if (oauthFallbackTimer) { clearTimeout(oauthFallbackTimer); oauthFallbackTimer = null; }
-  }
-
-  function showOAuthWaitingModal() {
-    removeOAuthModal();
-    var overlay = document.createElement('div');
-    overlay.id = 'oauthWaitingModal';
-    overlay.style.cssText = 'position:fixed;inset:0;background:rgba(0,0,0,0.7);display:flex;align-items:center;justify-content:center;z-index:9999;';
-    overlay.innerHTML = '<div style="background:var(--color-bg-secondary,#1f2937);border-radius:1rem;padding:2rem;max-width:28rem;width:calc(100% - 2rem);box-shadow:0 25px 50px rgba(0,0,0,0.5);color:var(--color-text-primary,white);font-family:system-ui,sans-serif;" onclick="event.stopPropagation()">' +
-      '<div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem;">' +
-      '<h2 style="font-size:1.125rem;font-weight:700;margin:0;">Google Sign-In</h2>' +
-      '<button id="oauthWaitingClose" style="background:none;border:none;color:var(--color-text-secondary,#9ca3af);font-size:1.5rem;cursor:pointer;padding:0;line-height:1;">\u00d7</button></div>' +
-      '<div id="oauthWaitingContent" style="text-align:center;padding:1.5rem 0;">' +
-      '<div style="font-size:2rem;margin-bottom:1rem;animation:pulse 2s infinite;">&#9203;</div>' +
-      '<p style="font-size:0.85rem;color:var(--color-text-secondary,#d1d5db);margin:0 0 0.5rem;">Waiting for Google sign-in to complete...</p>' +
-      '<p style="font-size:0.75rem;color:var(--color-text-secondary,#6b7280);margin:0;">Complete the sign-in in the tab that just opened.</p>' +
-      '<p style="font-size:0.75rem;color:var(--color-text-secondary,#6b7280);margin:0.25rem 0 0;">This dialog will close automatically when done.</p></div>' +
-      '<div id="oauthPasteFallback" style="display:none;">' +
-      '<div style="margin-bottom:1rem;padding:1rem;background:var(--color-bg-tertiary,rgba(255,255,255,0.05));border-radius:0.5rem;">' +
-      '<p style="font-size:0.8rem;color:var(--color-text-secondary,#d1d5db);margin:0 0 0.5rem;">The automatic relay did not complete. This can happen when accessing the server remotely.</p>' +
-      '<p style="font-size:0.8rem;color:var(--color-text-secondary,#d1d5db);margin:0;">Copy the <span style="color:white;font-weight:600;">entire URL</span> from the sign-in tab and paste it below.</p></div>' +
-      '<input type="text" id="oauthPasteInput" placeholder="http://localhost:3000/gm/oauth2callback?code=..." style="width:100%;box-sizing:border-box;padding:0.75rem 1rem;background:var(--color-bg-primary,#374151);border:1px solid var(--color-border,#4b5563);border-radius:0.5rem;color:var(--color-text-primary,white);font-size:0.8rem;font-family:monospace;outline:none;" />' +
-      '<p id="oauthPasteError" style="font-size:0.75rem;color:#ef4444;margin:0.5rem 0 0;display:none;"></p></div>' +
-      '<div style="display:flex;gap:0.75rem;margin-top:1.25rem;">' +
-      '<button id="oauthWaitingCancel" style="flex:1;padding:0.625rem;border-radius:0.5rem;border:1px solid var(--color-border,#4b5563);background:transparent;color:var(--color-text-primary,white);font-size:0.8rem;cursor:pointer;font-weight:600;">Cancel</button>' +
-      '<button id="oauthPasteSubmit" style="flex:1;padding:0.625rem;border-radius:0.5rem;border:none;background:var(--color-primary,#3b82f6);color:white;font-size:0.8rem;cursor:pointer;font-weight:600;display:none;">Complete Sign-In</button></div>' +
-      '<style>@keyframes pulse{0%,100%{opacity:1}50%{opacity:0.5}}</style></div>';
-    document.body.appendChild(overlay);
-    var dismiss = function() { cleanupOAuthPolling(); authRunning = false; removeOAuthModal(); };
-    document.getElementById('oauthWaitingClose').addEventListener('click', dismiss);
-    document.getElementById('oauthWaitingCancel').addEventListener('click', dismiss);
-    document.getElementById('oauthPasteSubmit').addEventListener('click', submitOAuthPasteUrl);
-  }
-
-  function showOAuthPasteFallback() {
-    var fallback = document.getElementById('oauthPasteFallback');
-    var waitContent = document.getElementById('oauthWaitingContent');
-    var submitBtn = document.getElementById('oauthPasteSubmit');
-    if (fallback) fallback.style.display = 'block';
-    if (waitContent) waitContent.style.display = 'none';
-    if (submitBtn) submitBtn.style.display = 'block';
-    var input = document.getElementById('oauthPasteInput');
-    if (input) {
-      input.addEventListener('keydown', function(e) { if (e.key === 'Enter') submitOAuthPasteUrl(); });
-      setTimeout(function() { input.focus(); }, 100);
-    }
-  }
-
-  function removeOAuthModal() {
-    var el = document.getElementById('oauthWaitingModal');
-    if (el) el.remove();
-  }
-
-  function submitOAuthPasteUrl() {
-    var input = document.getElementById('oauthPasteInput');
-    var errorEl = document.getElementById('oauthPasteError');
-    var submitBtn = document.getElementById('oauthPasteSubmit');
-    if (!input) return;
-    var url = input.value.trim();
-    if (!url) {
-      if (errorEl) { errorEl.textContent = 'Please paste the URL from the redirected page.'; errorEl.style.display = 'block'; }
-      return;
-    }
-    if (submitBtn) { submitBtn.disabled = true; submitBtn.textContent = 'Verifying...'; }
-    if (errorEl) errorEl.style.display = 'none';
-
-    window.wsClient.rpc('gemini.complete', { url: url })
-      .then(function(data) {
-        if (data.success) {
-          cleanupOAuthPolling();
-          authRunning = false;
-          removeOAuthModal();
-          refresh();
-        } else {
-          if (errorEl) { errorEl.textContent = data.error || 'Failed to complete authentication.'; errorEl.style.display = 'block'; }
-          if (submitBtn) { submitBtn.disabled = false; submitBtn.textContent = 'Complete Sign-In'; }
-        }
-      }).catch(function(e) {
-        if (errorEl) { errorEl.textContent = e.message; errorEl.style.display = 'block'; }
-        if (submitBtn) { submitBtn.disabled = false; submitBtn.textContent = 'Complete Sign-In'; }
-      });
-  }
-
-  function triggerAuth(agentId) {
-    if (authRunning) return;
-    window.wsClient.rpc('agent.auth', { id: agentId })
-      .then(function(data) {
-        if (data.ok) {
-          authRunning = true; showTerminalTab(); switchToTerminalView();
-          var term = getTerminal();
-          if (term) { term.clear(); term.writeln('\x1b[36m[authenticating ' + agentId + ']\x1b[0m\r\n'); }
-          if (data.authUrl) {
-            window.open(data.authUrl, '_blank');
-            if (agentId === 'gemini') {
-              showOAuthWaitingModal();
-              cleanupOAuthPolling();
-              oauthPollInterval = setInterval(function() {
-                window.wsClient.rpc('gemini.status')
-                  .then(function(status) {
-                    if (status.status === 'success') {
-                      cleanupOAuthPolling();
-                      authRunning = false;
-                      removeOAuthModal();
-                      refresh();
-                    } else if (status.status === 'error') {
-                      cleanupOAuthPolling();
-                      authRunning = false;
-                      removeOAuthModal();
-                    }
-                  }).catch(function() {});
-              }, 1500);
-              oauthFallbackTimer = setTimeout(function() {
-                if (authRunning) showOAuthPasteFallback();
-              }, 30000);
-              oauthPollTimeout = setTimeout(function() {
-                cleanupOAuthPolling();
-                if (authRunning) { authRunning = false; removeOAuthModal(); }
-              }, 5 * 60 * 1000);
-            }
-          }
-        }
-      }).catch(function() {});
-  }
-
-  function onWsMessage(e) {
-    var data = e.detail;
-    if (!data || data.conversationId !== AUTH_CONV_ID) return;
-    if (data.type === 'script_started') {
-      authRunning = true; showTerminalTab(); switchToTerminalView();
-      var term = getTerminal();
-      if (term) { term.clear(); term.writeln('\x1b[36m[authenticating ' + (data.agentId || '') + ']\x1b[0m\r\n'); }
-    } else if (data.type === 'script_output') {
-      showTerminalTab();
-      var term = getTerminal();
-      if (term) term.write(data.data);
-    } else if (data.type === 'script_stopped') {
-      authRunning = false;
-      removeOAuthModal();
-      cleanupOAuthPolling();
-      var term = getTerminal();
-      var msg = data.error ? data.error : ('exited with code ' + (data.code || 0));
-      if (term) term.writeln('\r\n\x1b[90m[auth ' + msg + ']\x1b[0m');
-      setTimeout(refresh, 1000);
-    }
-  }
-
-  function showTerminalTab() { var t = document.getElementById('terminalTabBtn'); if (t) t.style.display = ''; }
-  function switchToTerminalView() {
-    var bar = document.getElementById('viewToggleBar');
-    if (!bar) return;
-    var t = bar.querySelector('[data-view="terminal"]'); if (t) t.click();
-  }
-  function getTerminal() { return window.scriptRunner ? window.scriptRunner.getTerminal() : null; }
   function esc(s) { var d = document.createElement('div'); d.textContent = s; return d.innerHTML; }
 
   if (document.readyState === 'loading') document.addEventListener('DOMContentLoaded', init);

package/static/js/event-filter-config.js

@@ -0,0 +1,36 @@
+
+window.EVENT_FILTER_CSV_HEADERS = ['timestamp', 'type', 'id', 'sessionId', 'message'];
+
+window.exportEventsAsJSON = function(events) {
+  return JSON.stringify(events, null, 2);
+};
+
+window.exportEventsAsCSV = function(events) {
+  const headers = window.EVENT_FILTER_CSV_HEADERS;
+  const rows = [headers.join(',')];
+  for (const event of events) {
+    const row = [
+      new Date(event.timestamp || event.trackedAt).toISOString(),
+      event.type,
+      event.id || '',
+      event.sessionId || '',
+      JSON.stringify(event.message || event.content || event.text || '')
+    ];
+    rows.push(row.map(v => `"${v}"`).join(','));
+  }
+  return rows.join('\n');
+};
+
+window.exportEventsAsMarkdown = function(events) {
+  const lines = ['# Event Export\n'];
+  let currentType = null;
+  for (const event of events) {
+    if (event.type !== currentType) {
+      currentType = event.type;
+      lines.push(`\n## ${currentType}\n`);
+    }
+    const time = new Date(event.timestamp || event.trackedAt).toLocaleTimeString();
+    lines.push(`- **${time}**: ${JSON.stringify(event)}`);
+  }
+  return lines.join('\n');
+};

package/static/js/event-filter.js

@@ -1,252 +1,118 @@
-
-class EventFilter {
-  constructor(renderer) {
-    this.renderer = renderer;
-    this.allEvents = [];
-    this.filteredEvents = [];
-    this.filterState = {
-      types: new Set(), // Selected event types to show
-      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) {
-        const searchable = JSON.stringify(event).toLowerCase();
-        if (!searchable.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 results = [];
-    const lowerQuery = query.toLowerCase();
-
-    for (let i = 0; i < this.allEvents.length; i++) {
-      const event = this.allEvents[i];
-      const searchable = JSON.stringify(event).toLowerCase();
-
-      if (searchable.includes(lowerQuery)) {
-        results.push({
-          event,
-          index: i,
-          matchCount: (searchable.match(new RegExp(lowerQuery, 'g')) || []).length
-        });
-      }
-    }
-
-    return results.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;
-    this.replayState.currentIndex = 0;
-    this.replayState.speed = speed;
-
-    this.renderer.clear();
-
-    for (const event of replayEvents) {
-      if (!this.replayState.isReplaying) break;
-
-      const delay = 100 / this.replayState.speed;
-      await new Promise(resolve => setTimeout(resolve, delay));
-
-      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;
-
-    switch (format) {
-      case 'json':
-        return JSON.stringify(events, null, 2);
-
-      case 'csv':
-        return this.exportAsCSV(events);
-
-      case 'markdown':
-        return this.exportAsMarkdown(events);
-
-      default:
-        return JSON.stringify(events);
-    }
-  }
-
-  exportAsCSV(events) {
-    const headers = ['timestamp', 'type', 'id', 'sessionId', 'message'];
-    const rows = [headers.join(',')];
-
-    for (const event of events) {
-      const row = [
-        new Date(event.timestamp || event.trackedAt).toISOString(),
-        event.type,
-        event.id || '',
-        event.sessionId || '',
-        JSON.stringify(event.message || event.content || event.text || '')
-      ];
-      rows.push(row.map(v => `"${v}"`).join(','));
-    }
-
-    return rows.join('\n');
-  }
-
-  exportAsMarkdown(events) {
-    const lines = ['# Event Export\n'];
-    let currentType = null;
-
-    for (const event of events) {
-      if (event.type !== currentType) {
-        currentType = event.type;
-        lines.push(`\n## ${currentType}\n`);
-      }
-
-      const time = new Date(event.timestamp || event.trackedAt).toLocaleTimeString();
-      lines.push(`- **${time}**: ${JSON.stringify(event)}`);
-    }
-
-    return lines.join('\n');
-  }
-
-  clear() {
-    this.allEvents = [];
-    this.filteredEvents = [];
-    this.stopReplay();
-  }
-}
-
-if (typeof module !== 'undefined' && module.exports) {
-  module.exports = EventFilter;
-}
+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;

package/static/js/ui-components-rendering.js

@@ -0,0 +1,183 @@
+
+UIComponents.copyToClipboard = function(text) {
+  return navigator.clipboard.writeText(text).catch(err => {
+    console.error('Failed to copy:', err);
+    return false;
+  });
+};
+
+UIComponents.downloadFile = function(data, filename, mimeType = 'text/plain') {
+  const blob = new Blob([data], { type: mimeType });
+  const url = URL.createObjectURL(blob);
+  const link = document.createElement('a');
+  link.href = url;
+  link.download = filename;
+  document.body.appendChild(link);
+  link.click();
+  document.body.removeChild(link);
+  URL.revokeObjectURL(url);
+};
+
+UIComponents.createProgressBar = function(config = {}) {
+  const {
+    percentage = 0,
+    label = '',
+    showLabel = true
+  } = config;
+
+  const container = document.createElement('div');
+  container.className = 'progress-container';
+
+  let html = '';
+  if (label && showLabel) {
+    html += `<div class="flex justify-between mb-2 text-sm"><span>${UIComponents.escapeHtml(label)}</span><span>${Math.round(percentage)}%</span></div>`;
+  }
+
+  html += `
+    <progress class="progress progress-primary progress-xs w-full" value="${Math.min(100, Math.max(0, percentage))}" max="100"></progress>
+  `;
+
+  container.innerHTML = html;
+  return container;
+};
+
+UIComponents.createCollapsible = function(config = {}) {
+  const {
+    title = 'Details',
+    content = '',
+    isOpen = false
+  } = config;
+
+  const container = document.createElement('div');
+  container.className = 'collapsible';
+
+  container.innerHTML = `
+    <details ${isOpen ? 'open' : ''}>
+      <summary class="cursor-pointer font-semibold hover:bg-base-200 px-2 py-1 rounded transition-colors">
+        ${UIComponents.escapeHtml(title)}
+      </summary>
+      <div class="content mt-2 ml-4">
+        ${typeof content === 'string' ? content : ''}
+      </div>
+    </details>
+  `;
+
+  return container;
+};
+
+UIComponents.createInput = function(config = {}) {
+  const {
+    type = 'text',
+    name = '',
+    label = '',
+    placeholder = '',
+    value = '',
+    required = false
+  } = config;
+
+  const container = document.createElement('div');
+  container.className = 'form-group mb-4';
+
+  let html = '';
+  if (label) {
+    html += `<label class="block text-sm font-medium mb-2">${UIComponents.escapeHtml(label)}</label>`;
+  }
+
+  html += `
+    <input
+      type="${type}"
+      name="${name}"
+      placeholder="${UIComponents.escapeHtml(placeholder)}"
+      value="${UIComponents.escapeHtml(value)}"
+      ${required ? 'required' : ''}
+      class="input input-block input-solid"
+    />
+  `;
+
+  container.innerHTML = html;
+  return container;
+};
+
+UIComponents.createSelect = function(config = {}) {
+  const {
+    name = '',
+    label = '',
+    options = [],
+    value = '',
+    required = false
+  } = config;
+
+  const container = document.createElement('div');
+  container.className = 'form-group mb-4';
+
+  let html = '';
+  if (label) {
+    html += `<label class="block text-sm font-medium mb-2">${UIComponents.escapeHtml(label)}</label>`;
+  }
+
+  html += `
+    <select
+      name="${name}"
+      ${required ? 'required' : ''}
+      class="select select-block select-solid"
+    >
+      ${options.map(opt => `
+        <option value="${opt.value}" ${opt.value === value ? 'selected' : ''}>
+          ${UIComponents.escapeHtml(opt.label)}
+        </option>
+      `).join('')}
+    </select>
+  `;
+
+  container.innerHTML = html;
+  return container;
+};
+
+UIComponents.createButtonGroup = function(config = {}) {
+  const {
+    buttons = [],
+    vertical = false
+  } = config;
+
+  const container = document.createElement('div');
+  container.className = `button-group flex gap-2 ${vertical ? 'flex-col' : 'flex-row'}`;
+
+  buttons.forEach(btn => {
+    const button = document.createElement('button');
+    button.className = `btn btn-${btn.variant || 'secondary'} flex-${vertical ? '1' : 'none'}`;
+    button.textContent = btn.label;
+    if (btn.onClick) {
+      button.addEventListener('click', btn.onClick);
+    }
+    container.appendChild(button);
+  });
+
+  return container;
+};
+
+UIComponents.createBadge = function(config = {}) {
+  const {
+    label = '',
+    variant = 'default',
+    size = 'medium'
+  } = config;
+
+  const sizeClasses = {
+    'small': 'badge-sm',
+    'medium': 'badge-md',
+    'large': 'badge-lg'
+  };
+
+  const variantClasses = {
+    'default': 'badge-flat',
+    'primary': 'badge-flat-primary',
+    'success': 'badge-flat-success',
+    'warning': 'badge-flat-warning',
+    'error': 'badge-flat-error'
+  };
+
+  const badge = document.createElement('span');
+  badge.className = `badge ${sizeClasses[size] || sizeClasses['medium']} ${variantClasses[variant] || variantClasses['default']}`;
+  badge.textContent = label;
+  return badge;
+};

package/static/js/ui-components.js

@@ -6,7 +6,7 @@ class UIComponents {
       content = '',
       buttons = [],
       onClose = null,
-      size = 'medium' // small, medium, large
+      size = 'medium'
     } = config;
 
     const modal = document.createElement('div');
@@ -122,7 +122,7 @@ class UIComponents {
   static createAlert(config = {}) {
     const {
       message = '',
-      type = 'info', // info, success, warning, error
+      type = 'info',
       duration = 5000,
       dismissible = true
     } = config;
@@ -157,7 +157,7 @@ class UIComponents {
 
   static createSpinner(config = {}) {
     const {
-      size = 'medium', // small, medium, large
+      size = 'medium',
       text = 'Loading...'
     } = config;
 
@@ -176,192 +176,10 @@ class UIComponents {
     return container;
   }
 
-  static createProgressBar(config = {}) {
-    const {
-      percentage = 0,
-      label = '',
-      showLabel = true
-    } = config;
-
-    const container = document.createElement('div');
-    container.className = 'progress-container';
-
-    let html = '';
-    if (label && showLabel) {
-      html += `<div class="flex justify-between mb-2 text-sm"><span>${UIComponents.escapeHtml(label)}</span><span>${Math.round(percentage)}%</span></div>`;
-    }
-
-    html += `
-      <progress class="progress progress-primary progress-xs w-full" value="${Math.min(100, Math.max(0, percentage))}" max="100"></progress>
-    `;
-
-    container.innerHTML = html;
-    return container;
-  }
-
-  static createCollapsible(config = {}) {
-    const {
-      title = 'Details',
-      content = '',
-      isOpen = false
-    } = config;
-
-    const container = document.createElement('div');
-    container.className = 'collapsible';
-
-    container.innerHTML = `
-      <details ${isOpen ? 'open' : ''}>
-        <summary class="cursor-pointer font-semibold hover:bg-base-200 px-2 py-1 rounded transition-colors">
-          ${UIComponents.escapeHtml(title)}
-        </summary>
-        <div class="content mt-2 ml-4">
-          ${typeof content === 'string' ? content : ''}
-        </div>
-      </details>
-    `;
-
-    return container;
-  }
-
-  static createInput(config = {}) {
-    const {
-      type = 'text',
-      name = '',
-      label = '',
-      placeholder = '',
-      value = '',
-      required = false
-    } = config;
-
-    const container = document.createElement('div');
-    container.className = 'form-group mb-4';
-
-    let html = '';
-    if (label) {
-      html += `<label class="block text-sm font-medium mb-2">${UIComponents.escapeHtml(label)}</label>`;
-    }
-
-    html += `
-      <input
-        type="${type}"
-        name="${name}"
-        placeholder="${UIComponents.escapeHtml(placeholder)}"
-        value="${UIComponents.escapeHtml(value)}"
-        ${required ? 'required' : ''}
-        class="input input-block input-solid"
-      />
-    `;
-
-    container.innerHTML = html;
-    return container;
-  }
-
-  static createSelect(config = {}) {
-    const {
-      name = '',
-      label = '',
-      options = [],
-      value = '',
-      required = false
-    } = config;
-
-    const container = document.createElement('div');
-    container.className = 'form-group mb-4';
-
-    let html = '';
-    if (label) {
-      html += `<label class="block text-sm font-medium mb-2">${UIComponents.escapeHtml(label)}</label>`;
-    }
-
-    html += `
-      <select
-        name="${name}"
-        ${required ? 'required' : ''}
-        class="select select-block select-solid"
-      >
-        ${options.map(opt => `
-          <option value="${opt.value}" ${opt.value === value ? 'selected' : ''}>
-            ${UIComponents.escapeHtml(opt.label)}
-          </option>
-        `).join('')}
-      </select>
-    `;
-
-    container.innerHTML = html;
-    return container;
-  }
-
-  static createButtonGroup(config = {}) {
-    const {
-      buttons = [],
-      vertical = false
-    } = config;
-
-    const container = document.createElement('div');
-    container.className = `button-group flex gap-2 ${vertical ? 'flex-col' : 'flex-row'}`;
-
-    buttons.forEach(btn => {
-      const button = document.createElement('button');
-      button.className = `btn btn-${btn.variant || 'secondary'} flex-${vertical ? '1' : 'none'}`;
-      button.textContent = btn.label;
-      if (btn.onClick) {
-        button.addEventListener('click', btn.onClick);
-      }
-      container.appendChild(button);
-    });
-
-    return container;
-  }
-
-  static createBadge(config = {}) {
-    const {
-      label = '',
-      variant = 'default', // default, primary, success, warning, error
-      size = 'medium' // small, medium, large
-    } = config;
-
-    const sizeClasses = {
-      'small': 'badge-sm',
-      'medium': 'badge-md',
-      'large': 'badge-lg'
-    };
-
-    const variantClasses = {
-      'default': 'badge-flat',
-      'primary': 'badge-flat-primary',
-      'success': 'badge-flat-success',
-      'warning': 'badge-flat-warning',
-      'error': 'badge-flat-error'
-    };
-
-    const badge = document.createElement('span');
-    badge.className = `badge ${sizeClasses[size] || sizeClasses['medium']} ${variantClasses[variant] || variantClasses['default']}`;
-    badge.textContent = label;
-    return badge;
-  }
-
   static escapeHtml(text) {
     return window._escHtml(text);
   }
 
-  static copyToClipboard(text) {
-    return navigator.clipboard.writeText(text).catch(err => {
-      console.error('Failed to copy:', err);
-      return false;
-    });
-  }
-
-  static downloadFile(data, filename, mimeType = 'text/plain') {
-    const blob = new Blob([data], { type: mimeType });
-    const url = URL.createObjectURL(blob);
-    const link = document.createElement('a');
-    link.href = url;
-    link.download = filename;
-    document.body.appendChild(link);
-    link.click();
-    document.body.removeChild(link);
-    URL.revokeObjectURL(url);
-  }
 }
 
 if (typeof module !== 'undefined' && module.exports) {