agentgui 1.0.819 → 1.0.821

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;
+};