agentgui 1.0.821 → 1.0.822

package/CHANGELOG.md

@@ -1,3 +1,10 @@
+## 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)

package/package.json

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

package/static/index.html

@@ -294,7 +294,10 @@
   <script defer src="/gm/js/terminal-machine.js"></script>
   <script defer src="/gm/js/conversations.js"></script>
   <script defer src="/gm/js/conv-sidebar-actions.js"></script>
+  <script defer src="/gm/js/conv-list-renderer.js"></script>
+  <script defer src="/gm/js/conv-sidebar-clone.js"></script>
   <script defer src="/gm/lib/msgpackr.min.js"></script>
+  <script defer src="/gm/js/ws-core.js"></script>
   <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>

package/static/js/conv-list-renderer.js

@@ -0,0 +1,197 @@
+Object.assign(ConversationManager.prototype, {
+  async loadConversations() {
+    if (window.convListMachineAPI) window.convListMachineAPI.send({ type: 'LOAD_START' });
+    try {
+      const base = window.__BASE_URL || '/gm';
+      const res = await fetch(base + '/api/conversations');
+      if (!res.ok) throw new Error('HTTP ' + res.status);
+      const data = await res.json();
+      if (window.convListMachineAPI) window.convListMachineAPI.send({ type: 'LOAD_DONE', conversations: data.conversations || [] });
+      const cliStreaming = window.agentGuiClient?.state?.streamingConversations;
+      for (const conv of this.conversations) {
+        const streaming = conv.isStreaming === 1 || conv.isStreaming === true || (cliStreaming ? cliStreaming.has(conv.id) : false);
+        window.convListMachineAPI?.send({ type: streaming ? 'SET_STREAMING' : 'CLEAR_STREAMING', id: conv.id });
+      }
+      this.render();
+    } catch (err) {
+      console.error('Failed to load conversations:', err);
+      window.convListMachineAPI?.send({ type: 'LOAD_ERROR' });
+      if (this.conversations.length === 0) this.showEmpty('Failed to load conversations');
+    }
+  },
+
+  _convVnode(conv) {
+    const h = window.webjsx?.createElement;
+    if (!h) return null;
+    const isActive = conv.id === this.activeId;
+    const isStreaming = this.streamingConversations.has(conv.id);
+    const title = conv.title || `Conversation ${conv.id.slice(0, 8)}`;
+    const timestamp = conv.created_at ? new Date(conv.created_at).toLocaleDateString() : 'Unknown';
+    const agent = this.getAgentDisplayName(conv.agentId || conv.agentType);
+    const modelLabel = this.formatModelLabel(conv.model);
+    const wd = conv.workingDirectory ? pathBasename(conv.workingDirectory) : '';
+    const metaParts = [agent + modelLabel, timestamp];
+    if (wd) metaParts.push(wd);
+    const badge = isStreaming ? h('span', { class: 'conversation-streaming-badge', title: 'Streaming in progress' }, h('span', { class: 'streaming-dot' })) : null;
+    const dragAttrs = conv.pinned ? { draggable: 'true', 'data-drag-conv': conv.id } : {};
+    return h('li', { class: 'conversation-item' + (isActive ? ' active' : '') + (conv.pinned ? ' pinned' : ''), 'data-conv-id': conv.id, ...dragAttrs },
+      h('div', { class: 'conversation-item-content' },
+        h('div', { class: 'conversation-item-title' }, ...(badge ? [badge, title] : [title])),
+        h('div', { class: 'conversation-item-meta' }, metaParts.join(' • '))
+      ),
+      h('input', { type: 'checkbox', class: 'conversation-item-checkbox', 'data-bulk-check': conv.id, title: 'Select for bulk action', onclick: 'event.stopPropagation()' }),
+      h('button', { class: 'conversation-item-export', title: 'Export as markdown', 'data-export-conv': conv.id },
+        h('svg', { width: '14', height: '14', viewBox: '0 0 24 24', fill: 'none', stroke: 'currentColor', 'stroke-width': '2' },
+          h('path', { d: 'M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4' }),
+          h('polyline', { points: '7 10 12 15 17 10' }),
+          h('line', { x1: '12', y1: '15', x2: '12', y2: '3' }))),
+      h('button', { class: 'conversation-item-archive', title: 'Archive conversation', 'data-archive-conv': conv.id },
+        h('svg', { width: '14', height: '14', viewBox: '0 0 24 24', fill: 'none', stroke: 'currentColor', 'stroke-width': '2' },
+          h('path', { d: 'M21 8v13H3V8' }), h('path', { d: 'M1 3h22v5H1z' }), h('path', { d: 'M10 12h4' }))),
+      h('button', { class: 'conversation-item-delete', title: 'Delete conversation', 'data-delete-conv': conv.id },
+        h('svg', { width: '14', height: '14', viewBox: '0 0 24 24', fill: 'none', stroke: 'currentColor', 'stroke-width': '2' },
+          h('polyline', { points: '3 6 5 6 21 6' }),
+          h('path', { d: 'M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2' })))
+    );
+  },
+
+  render() {
+    if (!this.listEl) return;
+    if (this.conversations.length === 0) { this.showEmpty(); return; }
+    this.emptyEl.style.display = 'none';
+    const sorted = [...this.conversations].sort((a, b) => new Date(b.createdAt || 0) - new Date(a.createdAt || 0));
+    if (window.webjsx?.applyDiff) {
+      window.webjsx.applyDiff(this.listEl, sorted.map(conv => this._convVnode(conv)).filter(Boolean));
+    } else {
+      this._renderFallback(sorted);
+    }
+  },
+
+  _renderFallback(sorted) {
+    const existingMap = {};
+    for (const child of Array.from(this.listEl.children)) {
+      if (child.dataset.convId) existingMap[child.dataset.convId] = child;
+    }
+    const frag = document.createDocumentFragment();
+    for (const conv of sorted) {
+      const el = existingMap[conv.id] || document.createElement('li');
+      el.className = 'conversation-item' + (conv.id === this.activeId ? ' active' : '');
+      el.dataset.convId = conv.id;
+      delete existingMap[conv.id];
+      frag.appendChild(el);
+    }
+    for (const orphan of Object.values(existingMap)) orphan.remove();
+    this.listEl.appendChild(frag);
+  },
+
+  async confirmDelete(convId, title) {
+    const confirmed = await window.UIDialog.confirm(`Delete conversation "${title || 'Untitled'}"?\n\nThis will also delete any associated Claude Code session data. This action cannot be undone.`, 'Delete Conversation');
+    if (!confirmed) return;
+    try {
+      await window.wsClient.rpc('conv.del', { id: convId });
+      this.deleteConversation(convId);
+    } catch (err) {
+      window.UIDialog.alert('Failed to delete conversation: ' + (err.message || 'Unknown error'), 'Error');
+    }
+  },
+
+  select(convId) {
+    const result = window.ConversationState?.selectConversation(convId, 'user_click', 1) || { success: false };
+    if (!result.success && result.reason !== 'already_selected') { console.error('[ConvMgr] activeId mutation rejected:', result.reason); return; }
+    if (window.convListMachineAPI) window.convListMachineAPI.send({ type: 'SELECT', id: convId });
+    document.querySelectorAll('.conversation-item').forEach(item => item.classList.remove('active'));
+    const active = document.querySelector(`[data-conv-id="${convId}"]`);
+    if (active) active.classList.add('active');
+    window.dispatchEvent(new CustomEvent('conversation-selected', { detail: { conversationId: convId } }));
+  },
+
+  createNew() {
+    window.dispatchEvent(new CustomEvent('preparing-new-conversation'));
+    window.dispatchEvent(new CustomEvent('create-new-conversation'));
+  },
+
+  showEmpty(message = 'No conversations yet') {
+    if (!this.listEl) return;
+    this.listEl.innerHTML = '';
+    this.emptyEl.textContent = message;
+    this.emptyEl.style.display = 'block';
+  },
+
+  addConversation(conv) {
+    if (window.convListMachineAPI) window.convListMachineAPI.send({ type: 'ADD', conversation: conv });
+    this.render();
+  },
+
+  updateConversation(convId, updates) {
+    if (window.convListMachineAPI) window.convListMachineAPI.send({ type: 'UPDATE', conversation: Object.assign({ id: convId }, updates) });
+    this.render();
+  },
+
+  deleteConversation(convId) {
+    const wasActive = this.activeId === convId;
+    if (window.convListMachineAPI) window.convListMachineAPI.send({ type: 'DELETE', id: convId });
+    if (wasActive) { window.ConversationState?.deleteConversation(convId, 1); window.dispatchEvent(new CustomEvent('conversation-deselected')); }
+    this.render();
+  },
+
+  getSelectedIds() {
+    return [...this.listEl.querySelectorAll('.conversation-item-checkbox:checked')].map(cb => cb.dataset.bulkCheck);
+  },
+
+  async bulkArchive() {
+    const ids = this.getSelectedIds();
+    if (ids.length === 0) return;
+    if (!await window.UIDialog?.confirm(`Archive ${ids.length} conversation(s)?`, 'Bulk Archive')) return;
+    const base = window.__BASE_URL || '';
+    for (const id of ids) {
+      try { await fetch(`${base}/api/conversations/${id}/archive`, { method: 'POST' }); } catch (_) {}
+      this.deleteConversation(id);
+    }
+  },
+
+  async bulkDelete() {
+    const ids = this.getSelectedIds();
+    if (ids.length === 0) return;
+    if (!await window.UIDialog?.confirm(`Permanently delete ${ids.length} conversation(s)?`, 'Bulk Delete')) return;
+    for (const id of ids) this.confirmDelete(id, '');
+  },
+
+  async exportConversation(convId) {
+    try {
+      const result = await window.wsClient.rpc('conv.export', { id: convId, format: 'markdown' });
+      const blob = new Blob([result.markdown], { type: 'text/markdown' });
+      const url = URL.createObjectURL(blob);
+      const a = document.createElement('a');
+      a.href = url; a.download = (result.title || 'conversation').replace(/[^a-zA-Z0-9_-]/g, '_') + '.md';
+      a.click(); URL.revokeObjectURL(url);
+    } catch (e) { console.error('[export] Failed:', e.message); }
+  },
+
+  async archiveConversation(convId) {
+    try {
+      const resp = await fetch(`${window.__BASE_URL || ''}/api/conversations/${convId}/archive`, { method: 'POST' });
+      if (!resp.ok) return;
+      this.deleteConversation(convId);
+    } catch (e) { console.error('[archive] Failed:', e.message); }
+  },
+
+  setupWebSocketListener() {
+    window.addEventListener('ws-message', (event) => {
+      const msg = event.detail;
+      if (msg.type === 'conversation_created') { this.addConversation(msg.conversation); }
+      else if (msg.type === 'conversation_updated') { this.updateConversation(msg.conversation.id, msg.conversation); }
+      else if (msg.type === 'conversation_deleted') { this.deleteConversation(msg.conversationId); }
+      else if (msg.type === 'all_conversations_deleted') {
+        if (window.convListMachineAPI) window.convListMachineAPI.send({ type: 'CLEAR_ALL' });
+        window.ConversationState?.clear('all_deleted');
+        this.showEmpty('No conversations yet');
+      } else if (msg.type === 'streaming_start' && msg.conversationId) {
+        if (window.convListMachineAPI) window.convListMachineAPI.send({ type: 'SET_STREAMING', id: msg.conversationId });
+        this.render();
+      } else if ((msg.type === 'streaming_complete' || msg.type === 'streaming_error') && msg.conversationId) {
+        if (window.convListMachineAPI) window.convListMachineAPI.send({ type: 'CLEAR_STREAMING', id: msg.conversationId });
+        this.render();
+      }
+    });
+  }
+});

package/static/js/conv-sidebar-clone.js

@@ -0,0 +1,91 @@
+Object.assign(ConversationManager.prototype, {
+  setupDeleteAllButton() {
+    this.deleteAllBtn = document.getElementById('deleteAllConversationsBtn');
+    if (!this.deleteAllBtn) return;
+    this.deleteAllBtn.addEventListener('click', () => this.confirmDeleteAll());
+  },
+
+  async confirmDeleteAll() {
+    if (this.conversations.length === 0) { window.UIDialog.alert('No conversations to delete', 'Information'); return; }
+    const confirmed = await window.UIDialog.confirm(`Delete all ${this.conversations.length} conversation(s) and associated Claude Code artifacts?\n\nThis action cannot be undone.`, 'Delete All Conversations');
+    if (!confirmed) return;
+    try {
+      this.deleteAllBtn.disabled = true;
+      await window.wsClient.rpc('conv.del.all', {});
+      if (window.convListMachineAPI) window.convListMachineAPI.send({ type: 'CLEAR_ALL' });
+      window.ConversationState?.clear('delete_all');
+      window.dispatchEvent(new CustomEvent('conversation-deselected'));
+      this.render();
+    } catch (err) {
+      console.error('[ConversationManager] Delete all error:', err);
+      window.UIDialog.alert('Failed to delete all conversations: ' + (err.message || 'Unknown error'), 'Error');
+    } finally { this.deleteAllBtn.disabled = false; }
+  },
+
+  setupCloneUI() {
+    this.cloneBtn = document.getElementById('cloneRepoBtn');
+    this.cloneBar = document.getElementById('cloneInputBar');
+    this.cloneInput = document.getElementById('cloneRepoInput');
+    this.cloneGoBtn = document.getElementById('cloneGoBtn');
+    this.cloneCancelBtn = document.getElementById('cloneCancelBtn');
+    if (!this.cloneBtn || !this.cloneBar) return;
+    this.cloneBtn.addEventListener('click', () => this.toggleCloneBar());
+    this.cloneCancelBtn?.addEventListener('click', () => this.hideCloneBar());
+    this.cloneGoBtn?.addEventListener('click', () => this.performClone());
+    this.cloneInput?.addEventListener('keydown', (e) => { if (e.key === 'Enter') this.performClone(); if (e.key === 'Escape') this.hideCloneBar(); });
+  },
+
+  toggleCloneBar() {
+    if (!this.cloneBar) return;
+    if (this.cloneBar.style.display !== 'none') { this.hideCloneBar(); return; }
+    this.cloneBar.style.display = 'flex';
+    this.cloneInput.value = '';
+    this.cloneInput.focus();
+    this.removeCloneStatus();
+  },
+
+  hideCloneBar() {
+    if (this.cloneBar) this.cloneBar.style.display = 'none';
+    this.removeCloneStatus();
+  },
+
+  removeCloneStatus() {
+    const existing = this.sidebarEl?.querySelector('.clone-status');
+    if (existing) existing.remove();
+  },
+
+  showCloneStatus(message, type) {
+    this.removeCloneStatus();
+    const statusEl = document.createElement('div');
+    statusEl.className = `clone-status ${type}`;
+    statusEl.textContent = message;
+    if (this.cloneBar && this.cloneBar.parentNode) this.cloneBar.parentNode.insertBefore(statusEl, this.cloneBar.nextSibling);
+    if (type === 'clone-success' || type === 'clone-error') setTimeout(() => statusEl.remove(), 5000);
+  },
+
+  async performClone() {
+    const repo = (this.cloneInput?.value || '').trim();
+    if (!repo) return;
+    if (!/^[a-zA-Z0-9_.-]+\/[a-zA-Z0-9_.-]+$/.test(repo)) { this.showCloneStatus('Invalid format. Use org/repo', 'clone-error'); return; }
+    this.cloneGoBtn.disabled = true;
+    this.cloneInput.disabled = true;
+    this.showCloneStatus(`Cloning ${repo}...`, 'cloning');
+    try {
+      const data = await window.wsClient.rpc('clone', { repo });
+      this.showCloneStatus(`Cloned ${data.name}`, 'clone-success');
+      this.hideCloneBar();
+      window.dispatchEvent(new CustomEvent('create-new-conversation', { detail: { workingDirectory: data.path, title: data.name } }));
+    } catch (err) {
+      this.showCloneStatus(err.message || 'Clone failed', 'clone-error');
+    } finally {
+      if (this.cloneGoBtn) this.cloneGoBtn.disabled = false;
+      if (this.cloneInput) this.cloneInput.disabled = false;
+    }
+  }
+});
+
+if (document.readyState === 'loading') {
+  document.addEventListener('DOMContentLoaded', () => { window.conversationManager = new ConversationManager(); });
+} else {
+  window.conversationManager = new ConversationManager();
+}

package/static/js/conversations.js

@@ -113,3 +113,4 @@ class ConversationManager {
     return window._escHtml(text);
   }
 }
+

package/static/js/ui-components.js

@@ -1,187 +1,88 @@
-
-class UIComponents {
-  static createModal(config = {}) {
-    const {
-      title = 'Dialog',
-      content = '',
-      buttons = [],
-      onClose = null,
-      size = 'medium'
-    } = config;
-
-    const modal = document.createElement('div');
-    modal.className = 'modal-overlay';
-    modal.dataset.modal = 'true';
-
-    const sizeClasses = {
-      'small': 'max-w-sm',
-      'medium': 'max-w-md',
-      'large': 'max-w-2xl'
-    };
-
-    modal.innerHTML = `
-      <div class="modal-content card ${sizeClasses[size] || sizeClasses['medium']}">
-        <div class="card-header flex justify-between items-center">
-          <h2 class="text-xl font-bold">${UIComponents.escapeHtml(title)}</h2>
-          <button class="btn btn-ghost btn-sm modal-close">&times;</button>
-        </div>
-        <div class="card-body modal-body">
-          ${typeof content === 'string' ? UIComponents.escapeHtml(content) : ''}
-        </div>
-        <div class="card-footer flex gap-2 justify-end">
-          ${buttons.map(btn => `
-            <button class="btn btn-${btn.variant || 'secondary'}" data-action="${btn.action || 'close'}">
-              ${UIComponents.escapeHtml(btn.label)}
-            </button>
-          `).join('')}
-        </div>
-      </div>
-    `;
-
-    const closeBtn = modal.querySelector('.modal-close');
-    closeBtn.addEventListener('click', () => {
-      modal.remove();
-      if (onClose) onClose();
-    });
-
-    modal.querySelectorAll('[data-action]').forEach(btn => {
-      btn.addEventListener('click', (e) => {
-        const action = e.target.dataset.action;
-        if (action === 'close') {
-          modal.remove();
-          if (onClose) onClose();
-        }
-      });
-    });
-
-    modal.addEventListener('click', (e) => {
-      if (e.target === modal) {
-        modal.remove();
-        if (onClose) onClose();
-      }
-    });
-
-    return modal;
-  }
-
-  static createTabs(config = {}) {
-    const {
-      tabs = [],
-      activeTab = 0,
-      onChange = null
-    } = config;
-
-    const container = document.createElement('div');
-    container.className = 'tabs';
-
-    const tabButtons = document.createElement('div');
-    tabButtons.className = 'tab-buttons flex border-b';
-
-    tabs.forEach((tab, index) => {
-      const btn = document.createElement('button');
-      btn.className = `tab tab-underline tab-button ${index === activeTab ? 'tab-active' : ''}`;
-      btn.textContent = tab.label;
-      btn.dataset.tabIndex = index;
-
-      btn.addEventListener('click', () => {
-        tabButtons.querySelectorAll('.tab-button').forEach((b, i) => {
-          if (i === index) {
-            b.classList.add('tab-active');
-          } else {
-            b.classList.remove('tab-active');
-          }
-        });
-
-        tabContent.querySelectorAll('.tab-pane').forEach((pane, i) => {
-          pane.style.display = i === index ? 'block' : 'none';
-        });
-
-        if (onChange) onChange(index);
-      });
-
-      tabButtons.appendChild(btn);
-    });
-
-    container.appendChild(tabButtons);
-
-    const tabContent = document.createElement('div');
-    tabContent.className = 'tab-content mt-4';
-
-    tabs.forEach((tab, index) => {
-      const pane = document.createElement('div');
-      pane.className = 'tab-pane';
-      pane.style.display = index === activeTab ? 'block' : 'none';
-      pane.innerHTML = typeof tab.content === 'string' ? tab.content : '';
-      tabContent.appendChild(pane);
-    });
-
-    container.appendChild(tabContent);
-    return container;
-  }
-
-  static createAlert(config = {}) {
-    const {
-      message = '',
-      type = 'info',
-      duration = 5000,
-      dismissible = true
-    } = config;
-
-    const alert = document.createElement('div');
-    const typeClasses = {
-      'info': 'alert-info',
-      'success': 'alert-success',
-      'warning': 'alert-warning',
-      'error': 'alert-error'
-    };
-
-    alert.className = `alert ${typeClasses[type] || typeClasses['info']}`;
-    alert.innerHTML = `
-      <div class="flex justify-between items-center">
-        <span>${UIComponents.escapeHtml(message)}</span>
-        ${dismissible ? '<button class="text-current hover:opacity-75">&times;</button>' : ''}
-      </div>
-    `;
-
-    if (dismissible) {
-      const closeBtn = alert.querySelector('button');
-      closeBtn.addEventListener('click', () => alert.remove());
-    }
-
-    if (duration > 0) {
-      setTimeout(() => alert.remove(), duration);
-    }
-
-    return alert;
-  }
-
-  static createSpinner(config = {}) {
-    const {
-      size = 'medium',
-      text = 'Loading...'
-    } = config;
-
-    const sizeClasses = {
-      'small': 'spinner-xs',
-      'medium': 'spinner-sm',
-      'large': 'spinner-md'
-    };
-
-    const container = document.createElement('div');
-    container.className = 'flex items-center gap-3 justify-center p-4';
-    container.innerHTML = `
-      <div class="spinner-simple spinner-primary ${sizeClasses[size] || sizeClasses['medium']}"></div>
-      <span class="text-base-content">${UIComponents.escapeHtml(text)}</span>
-    `;
-    return container;
-  }
-
-  static escapeHtml(text) {
-    return window._escHtml(text);
-  }
-
-}
-
-if (typeof module !== 'undefined' && module.exports) {
-  module.exports = UIComponents;
-}
+class UIComponents {
+  static createModal(config = {}) {
+    const { title = 'Dialog', content = '', buttons = [], onClose = null, size = 'medium' } = config;
+    const modal = document.createElement('div');
+    modal.className = 'modal-overlay';
+    modal.dataset.modal = 'true';
+    const sizeClasses = { 'small': 'max-w-sm', 'medium': 'max-w-md', 'large': 'max-w-2xl' };
+    modal.innerHTML = `<div class="modal-content card ${sizeClasses[size] || sizeClasses['medium']}"><div class="card-header flex justify-between items-center"><h2 class="text-xl font-bold">${UIComponents.escapeHtml(title)}</h2><button class="btn btn-ghost btn-sm modal-close">&times;</button></div><div class="card-body modal-body">${typeof content === 'string' ? UIComponents.escapeHtml(content) : ''}</div><div class="card-footer flex gap-2 justify-end">${buttons.map(btn => `<button class="btn btn-${btn.variant || 'secondary'}" data-action="${btn.action || 'close'}">${UIComponents.escapeHtml(btn.label)}</button>`).join('')}</div></div>`;
+    const closeBtn = modal.querySelector('.modal-close');
+    closeBtn.addEventListener('click', () => { modal.remove(); if (onClose) onClose(); });
+    modal.querySelectorAll('[data-action]').forEach(btn => {
+      btn.addEventListener('click', (e) => { const action = e.target.dataset.action; if (action === 'close') { modal.remove(); if (onClose) onClose(); } });
+    });
+    modal.addEventListener('click', (e) => { if (e.target === modal) { modal.remove(); if (onClose) onClose(); } });
+    return modal;
+  }
+
+  static createTabs(config = {}) {
+    const { tabs = [], activeTab = 0, onChange = null } = config;
+    const container = document.createElement('div');
+    container.className = 'tabs';
+    const tabButtons = document.createElement('div');
+    tabButtons.className = 'tab-buttons flex border-b';
+    const tabContent = document.createElement('div');
+    tabContent.className = 'tab-content mt-4';
+    tabs.forEach((tab, index) => {
+      const btn = document.createElement('button');
+      btn.className = `tab tab-underline tab-button ${index === activeTab ? 'tab-active' : ''}`;
+      btn.textContent = tab.label;
+      btn.dataset.tabIndex = index;
+      btn.addEventListener('click', () => {
+        tabButtons.querySelectorAll('.tab-button').forEach((b, i) => b.classList.toggle('tab-active', i === index));
+        tabContent.querySelectorAll('.tab-pane').forEach((pane, i) => { pane.style.display = i === index ? 'block' : 'none'; });
+        if (onChange) onChange(index);
+      });
+      tabButtons.appendChild(btn);
+      const pane = document.createElement('div');
+      pane.className = 'tab-pane';
+      pane.style.display = index === activeTab ? 'block' : 'none';
+      pane.innerHTML = typeof tab.content === 'string' ? tab.content : '';
+      tabContent.appendChild(pane);
+    });
+    container.appendChild(tabButtons);
+    container.appendChild(tabContent);
+    return container;
+  }
+
+  static createAlert(config = {}) {
+    const { message = '', type = 'info', duration = 5000, dismissible = true } = config;
+    const alert = document.createElement('div');
+    const typeClasses = { 'info': 'alert-info', 'success': 'alert-success', 'warning': 'alert-warning', 'error': 'alert-error' };
+    alert.className = `alert ${typeClasses[type] || typeClasses['info']}`;
+    alert.innerHTML = `<div class="flex justify-between items-center"><span>${UIComponents.escapeHtml(message)}</span>${dismissible ? '<button class="text-current hover:opacity-75">&times;</button>' : ''}</div>`;
+    if (dismissible) alert.querySelector('button').addEventListener('click', () => alert.remove());
+    if (duration > 0) setTimeout(() => alert.remove(), duration);
+    return alert;
+  }
+
+  static createSpinner(config = {}) {
+    const { size = 'medium', text = 'Loading...' } = config;
+    const sizeClasses = { 'small': 'spinner-xs', 'medium': 'spinner-sm', 'large': 'spinner-md' };
+    const container = document.createElement('div');
+    container.className = 'flex items-center gap-3 justify-center p-4';
+    container.innerHTML = `<div class="spinner-simple spinner-primary ${sizeClasses[size] || sizeClasses['medium']}"></div><span class="text-base-content">${UIComponents.escapeHtml(text)}</span>`;
+    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;
+  }
+}
+
+if (typeof module !== 'undefined' && module.exports) module.exports = UIComponents;