agentgui 1.0.820 → 1.0.821

package/.prd

@@ -0,0 +1,42 @@
+[
+  {
+    "id": "split-conversations-js",
+    "subject": "Split conversations.js into 3 files under 200 lines each",
+    "status": "pending",
+    "description": "conversations.js is 742L. Natural split: (1) conv-folder-browser.js — FolderBrowser methods L189-470 (~90L), (2) conv-list.js — ConversationManager render/CRUD/WS methods L480-742 (~180L), (3) conversations.js — core class constructor/init/loadAgents/agents/format methods L1-190 (~190L). All three reference shared ConversationManager instance.",
+    "effort": "large",
+    "category": "refactor",
+    "blocking": [],
+    "blockedBy": [],
+    "acceptance": [
+      "conversations.js ≤200 lines",
+      "conv-folder-browser.js ≤200 lines and loaded in index.html",
+      "conv-list.js ≤200 lines and loaded in index.html",
+      "window.conversationManager still works post-split",
+      "DOM-ready guard at end of file preserved (if/else is correct, not a duplicate)"
+    ],
+    "edge_cases": [
+      "Methods cross-call — must verify all internal references resolve after split"
+    ]
+  },
+  {
+    "id": "split-websocket-manager",
+    "subject": "Split websocket-manager.js into connection and messaging files",
+    "status": "pending",
+    "description": "websocket-manager.js is 650L with a single WebSocketManager class. Split into: (1) ws-connection.js — raw WebSocket open/close/reconnect logic, (2) ws-subscriptions.js — subscribe/unsubscribe/broadcast logic, (3) websocket-manager.js — coordinator that imports both (≤200L each).",
+    "effort": "large",
+    "category": "refactor",
+    "blocking": [],
+    "blockedBy": [],
+    "acceptance": [
+      "websocket-manager.js ≤200 lines",
+      "ws-connection.js ≤200 lines",
+      "ws-subscriptions.js ≤200 lines",
+      "All three loaded in index.html in correct order",
+      "wsManager API unchanged from client.js perspective"
+    ],
+    "edge_cases": [
+      "ws-machine.js wraps WebSocketManager — must still find it at window.wsManager"
+    ]
+  }
+]

package/package.json

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

package/static/index.html

@@ -293,6 +293,7 @@
   <script defer src="/gm/js/recording-machine.js"></script>
   <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/lib/msgpackr.min.js"></script>
   <script defer src="/gm/js/websocket-manager.js"></script>
   <script defer src="/gm/js/ws-client.js"></script>

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

@@ -0,0 +1,184 @@
+Object.assign(ConversationManager.prototype, {
+  setupDelegatedListeners() {
+    let draggedId = null;
+    this.listEl.addEventListener('dragstart', (e) => {
+      const item = e.target.closest('[data-drag-conv]');
+      if (!item) return;
+      draggedId = item.dataset.dragConv;
+      item.style.opacity = '0.5';
+      e.dataTransfer.effectAllowed = 'move';
+    });
+    this.listEl.addEventListener('dragend', (e) => {
+      const item = e.target.closest('[data-drag-conv]');
+      if (item) item.style.opacity = '';
+      draggedId = null;
+    });
+    this.listEl.addEventListener('dragover', (e) => {
+      const item = e.target.closest('[data-drag-conv]');
+      if (item && draggedId) { e.preventDefault(); e.dataTransfer.dropEffect = 'move'; }
+    });
+    this.listEl.addEventListener('drop', (e) => {
+      e.preventDefault();
+      const target = e.target.closest('[data-drag-conv]');
+      if (!target || !draggedId || target.dataset.dragConv === draggedId) return;
+      const pinnedItems = [...this.listEl.querySelectorAll('[data-drag-conv]')];
+      const draggedEl = pinnedItems.find(el => el.dataset.dragConv === draggedId);
+      if (!draggedEl) return;
+      this.listEl.insertBefore(draggedEl, target);
+      const newOrder = [...this.listEl.querySelectorAll('[data-drag-conv]')].map(el => el.dataset.dragConv);
+      window.wsClient?.rpc('conv.reorder', { order: newOrder }).catch(() => {});
+    });
+    const bulkBar = document.getElementById('bulkActionBar');
+    const bulkCount = document.getElementById('bulkCount');
+    const updateBulkBar = () => {
+      const checked = this.getSelectedIds().length;
+      if (bulkBar) bulkBar.style.display = checked > 0 ? 'flex' : 'none';
+      if (bulkCount) bulkCount.textContent = `${checked} selected`;
+    };
+    this.listEl.addEventListener('change', (e) => {
+      if (e.target.matches('.conversation-item-checkbox')) updateBulkBar();
+    });
+    document.getElementById('bulkArchiveBtn')?.addEventListener('click', () => this.bulkArchive());
+    document.getElementById('bulkDeleteBtn')?.addEventListener('click', () => this.bulkDelete());
+    this.listEl.addEventListener('click', (e) => {
+      const exportBtn = e.target.closest('[data-export-conv]');
+      if (exportBtn) { e.stopPropagation(); this.exportConversation(exportBtn.dataset.exportConv); return; }
+      const archiveBtn = e.target.closest('[data-archive-conv]');
+      if (archiveBtn) { e.stopPropagation(); this.archiveConversation(archiveBtn.dataset.archiveConv); return; }
+      const deleteBtn = e.target.closest('[data-delete-conv]');
+      if (deleteBtn) {
+        e.stopPropagation();
+        const convId = deleteBtn.dataset.deleteConv;
+        const conv = this.conversations.find(c => c.id === convId);
+        this.confirmDelete(convId, conv?.title || 'Untitled');
+        return;
+      }
+      const item = e.target.closest('[data-conv-id]');
+      if (item) this.select(item.dataset.convId);
+    });
+  },
+
+  setupFolderBrowser() {
+    this.folderBrowser.modal = document.getElementById('folderBrowserModal');
+    this.folderBrowser.listEl = document.getElementById('folderList');
+    this.folderBrowser.breadcrumbEl = document.getElementById('folderBreadcrumb');
+    if (!this.folderBrowser.modal) return;
+    const closeBtn = this.folderBrowser.modal.querySelector('[data-folder-close]');
+    const cancelBtn = this.folderBrowser.modal.querySelector('[data-folder-cancel]');
+    const selectBtn = this.folderBrowser.modal.querySelector('[data-folder-select]');
+    closeBtn?.addEventListener('click', () => this.closeFolderBrowser());
+    cancelBtn?.addEventListener('click', () => this.closeFolderBrowser());
+    selectBtn?.addEventListener('click', () => this.confirmFolderSelection());
+    this.folderBrowser.modal.addEventListener('click', (e) => {
+      if (e.target === this.folderBrowser.modal) this.closeFolderBrowser();
+    });
+    this.folderBrowser.homePathReady = this.fetchHomePath();
+  },
+
+  async fetchHomePath() {
+    try {
+      const res = await fetch(`${window.__BASE_URL || '/gm'}/api/home`);
+      const data = await res.json();
+      this.folderBrowser.homePath = data.home || '~';
+      this.folderBrowser.cwdPath = data.cwd || null;
+    } catch (e) { console.error('Failed to fetch home path:', e); }
+  },
+
+  async openFolderBrowser() {
+    window.dispatchEvent(new CustomEvent('preparing-new-conversation'));
+    if (!this.folderBrowser.modal) { this.createNew(); return; }
+    if (this.folderBrowser.homePathReady) await this.folderBrowser.homePathReady;
+    const startPath = this.folderBrowser.cwdPath || '~';
+    this.folderBrowser.currentPath = startPath;
+    this.folderBrowser.modal.classList.add('visible');
+    this.loadFolders(startPath);
+  },
+
+  closeFolderBrowser() { this.folderBrowser.modal?.classList.remove('visible'); },
+
+  async loadFolders(dirPath) {
+    this.folderBrowser.currentPath = dirPath;
+    this.renderBreadcrumb(dirPath);
+    if (!this.folderBrowser.listEl) return;
+    this.folderBrowser.listEl.innerHTML = '<li class="folder-list-loading">Loading...</li>';
+    try {
+      const data = await window.wsClient.rpc('folders', { path: dirPath });
+      const folders = data.folders || [];
+      this.folderBrowser.listEl.innerHTML = '';
+      const isAtRoot = dirPath === '~' || dirPath === '/' || dirPath === this.folderBrowser.homePath || /^[A-Za-z]:[\/\\]?$/.test(dirPath);
+      if (!isAtRoot) {
+        const parentPath = this.getParentPath(dirPath);
+        const upItem = document.createElement('li');
+        upItem.className = 'folder-list-item';
+        upItem.innerHTML = '<span class="folder-list-item-icon">..</span><span class="folder-list-item-name">Parent Directory</span>';
+        upItem.addEventListener('click', () => this.loadFolders(parentPath));
+        this.folderBrowser.listEl.appendChild(upItem);
+      }
+      if (folders.length === 0 && this.folderBrowser.listEl.children.length === 0) {
+        this.folderBrowser.listEl.innerHTML = '<li class="folder-list-empty">No subdirectories</li>';
+        return;
+      }
+      for (const folder of folders) {
+        const li = document.createElement('li');
+        li.className = 'folder-list-item';
+        li.innerHTML = `<span class="folder-list-item-icon">&#128193;</span><span class="folder-list-item-name">${this.escapeHtml(folder.name)}</span>`;
+        li.addEventListener('click', () => {
+          const expandedBase = dirPath === '~' ? this.folderBrowser.homePath : dirPath;
+          const separator = expandedBase.includes('\\') ? '\\' : '/';
+          const base = expandedBase.replace(/[\/\\]+$/, '');
+          this.loadFolders(base + separator + folder.name);
+        });
+        this.folderBrowser.listEl.appendChild(li);
+      }
+    } catch (err) {
+      this.folderBrowser.listEl.innerHTML = `<li class="folder-list-error">Error: ${this.escapeHtml(err.message)}</li>`;
+    }
+  },
+
+  getParentPath(dirPath) {
+    const expanded = dirPath === '~' ? this.folderBrowser.homePath : dirPath;
+    const parts = pathSplit(expanded);
+    const isWindows = expanded.includes('\\') || /^[A-Za-z]:/.test(expanded);
+    const separator = isWindows ? '\\' : '/';
+    if (parts.length <= 1) return isWindows && parts[0] && parts[0].endsWith(':') ? parts[0] + separator : separator;
+    parts.pop();
+    if (isWindows) { const joined = parts.join(separator); return parts.length === 1 && parts[0].endsWith(':') ? joined + separator : joined; }
+    return separator + parts.join(separator);
+  },
+
+  renderBreadcrumb(dirPath) {
+    if (!this.folderBrowser.breadcrumbEl) return;
+    const expanded = dirPath === '~' ? this.folderBrowser.homePath : dirPath;
+    const parts = pathSplit(expanded);
+    const isWin = expanded.includes('\\') || /^[A-Za-z]:/.test(expanded);
+    const separator = isWin ? '\\' : '/';
+    const rootPath = isWin && parts[0] && /^[A-Za-z]:$/.test(parts[0]) ? parts[0] + separator : separator;
+    let html = `<span class="folder-breadcrumb-segment" data-path="${this.escapeHtml(rootPath)}">${this.escapeHtml(rootPath)} </span>`;
+    let accumulated = '';
+    const isDriveLetter = isWin && parts[0] && /^[A-Za-z]:$/.test(parts[0]);
+    for (let i = 0; i < parts.length; i++) {
+      if (i === 0 && isDriveLetter) accumulated = parts[0];
+      else accumulated += separator + parts[i];
+      const segPath = (i === 0 && isDriveLetter) ? rootPath : accumulated;
+      html += `<span class="folder-breadcrumb-separator">${separator}</span>`;
+      html += `<span class="folder-breadcrumb-segment" data-path="${this.escapeHtml(segPath)}">${this.escapeHtml(parts[i])}</span>`;
+    }
+    this.folderBrowser.breadcrumbEl.innerHTML = html;
+    this.folderBrowser.breadcrumbEl.querySelectorAll('.folder-breadcrumb-segment').forEach(seg => {
+      seg.addEventListener('click', () => { const p = seg.dataset.path; if (p) this.loadFolders(p); });
+    });
+  },
+
+  confirmFolderSelection() {
+    const currentPath = this.folderBrowser.currentPath;
+    const expanded = currentPath === '~' ? this.folderBrowser.homePath : currentPath;
+    this.closeFolderBrowser();
+    window.dispatchEvent(new CustomEvent('create-new-conversation', { detail: { workingDirectory: expanded, title: pathBasename(expanded) || 'root' } }));
+  },
+
+  showLoading() {
+    if (!this.listEl) return;
+    this.listEl.innerHTML = '';
+    if (this.emptyEl) { this.emptyEl.textContent = 'Loading...'; this.emptyEl.style.display = 'block'; }
+  }
+});

package/static/js/conversations.js

@@ -1,736 +1,115 @@
-
-function pathSplit(p) {
-  return p.split(/[\/\\]/).filter(Boolean);
-}
-
-function pathBasename(p) {
-  const parts = pathSplit(p);
-  return parts.length ? parts.pop() : '';
-}
-
-class ConversationManager {
-  constructor() {
-    this.listEl = document.querySelector('[data-conversation-list]');
-    this.emptyEl = document.querySelector('[data-conversation-empty]');
-    this.newBtn = document.querySelector('[data-new-conversation]');
-    this.sidebarEl = document.querySelector('[data-sidebar]');
-    this.agents = new Map();
-
-    this.folderBrowser = {
-      modal: null,
-      listEl: null,
-      breadcrumbEl: null,
-      currentPath: '~',
-      homePath: '~',
-      cwdPath: null,
-      homePathReady: null
-    };
-
-    if (!this.listEl) return;
-
-    this.init();
-  }
-
-  get conversations() {
-    return window.convListMachineAPI ? window.convListMachineAPI.getConversations() : [];
-  }
-
-  get activeId() {
-    return window.convListMachineAPI ? window.convListMachineAPI.getActiveId() : null;
-  }
-
-  set activeId(id) {
-    if (window.convListMachineAPI) window.convListMachineAPI.send({ type: 'SELECT', id });
-  }
-
-  get streamingConversations() {
-    const ids = window.convListMachineAPI ? window.convListMachineAPI.getStreamingIds() : [];
-    return { has: (id) => ids.includes(id), add: (id) => window.convListMachineAPI?.send({ type: 'SET_STREAMING', id }), delete: (id) => window.convListMachineAPI?.send({ type: 'CLEAR_STREAMING', id }), clear: () => ids.forEach(id => window.convListMachineAPI?.send({ type: 'CLEAR_STREAMING', id })) };
-  }
-
-  async init() {
-    this.newBtn?.addEventListener('click', () => this.openFolderBrowser());
-    this.setupDelegatedListeners();
-    this.showLoading();
-    this.setupWebSocketListener();
-    this.setupFolderBrowser();
-    this.setupCloneUI();
-    this.setupDeleteAllButton();
-
-    await Promise.all([this.loadAgents(), this.loadConversations()]);
-
-    this._pollInterval = setInterval(() => this.loadConversations(), 30000);
-
-    window.addEventListener('beforeunload', () => this.destroy());
-  }
-
-  destroy() {
-    if (this._pollInterval) {
-      clearInterval(this._pollInterval);
-      this._pollInterval = null;
-    }
-  }
-
-  async loadAgents() {
-    try {
-      const base = window.__BASE_URL || '/gm';
-      const res = await fetch(base + '/api/agents');
-      if (!res.ok) throw new Error('HTTP ' + res.status);
-      const data = await res.json();
-      for (const agent of data.agents || []) {
-        this.agents.set(agent.id, agent);
-      }
-    } catch (err) {
-      console.error('[ConversationManager] Error loading agents:', err);
-    }
-  }
-
-  _updateConversations(newArray, source) {
-    if (!window.convListMachineAPI) return { version: 0, timestamp: Date.now(), oldLen: 0, newLen: 0 };
-    const oldLen = this.conversations.length;
-    const newLen = Array.isArray(newArray) ? newArray.length : 0;
-    window.convListMachineAPI.send({ type: 'LOAD_DONE', conversations: Array.isArray(newArray) ? newArray : [] });
-    const version = window.convListMachineAPI.getContext().version;
-    window._conversationCacheVersion = version;
-    return { version, timestamp: Date.now(), oldLen, newLen };
-  }
-
-  getConversationCacheVersion() {
-    return window.convListMachineAPI ? window.convListMachineAPI.getContext().version : 0;
-  }
-
-  getAgentDisplayName(agentId) {
-    if (!agentId) return 'Unknown';
-    const agent = this.agents.get(agentId);
-    return agent?.name || agentId;
-  }
-
-  formatModelLabel(model) {
-    if (!model) return '';
-    return ' (' + model.replace(/^claude-/i, '').replace(/-\d{8,}.*$/, '').replace(/-/g, ' ') + ')';
-  }
-
-  setupDelegatedListeners() {
-    let draggedId = null;
-    this.listEl.addEventListener('dragstart', (e) => {
-      const item = e.target.closest('[data-drag-conv]');
-      if (!item) return;
-      draggedId = item.dataset.dragConv;
-      item.style.opacity = '0.5';
-      e.dataTransfer.effectAllowed = 'move';
-    });
-    this.listEl.addEventListener('dragend', (e) => {
-      const item = e.target.closest('[data-drag-conv]');
-      if (item) item.style.opacity = '';
-      draggedId = null;
-    });
-    this.listEl.addEventListener('dragover', (e) => {
-      const item = e.target.closest('[data-drag-conv]');
-      if (item && draggedId) { e.preventDefault(); e.dataTransfer.dropEffect = 'move'; }
-    });
-    this.listEl.addEventListener('drop', (e) => {
-      e.preventDefault();
-      const target = e.target.closest('[data-drag-conv]');
-      if (!target || !draggedId || target.dataset.dragConv === draggedId) return;
-      const pinnedItems = [...this.listEl.querySelectorAll('[data-drag-conv]')];
-      const draggedEl = pinnedItems.find(el => el.dataset.dragConv === draggedId);
-      if (!draggedEl) return;
-      this.listEl.insertBefore(draggedEl, target);
-      const newOrder = [...this.listEl.querySelectorAll('[data-drag-conv]')].map(el => el.dataset.dragConv);
-      window.wsClient?.rpc('conv.reorder', { order: newOrder }).catch(() => {});
-    });
-
-    const bulkBar = document.getElementById('bulkActionBar');
-    const bulkCount = document.getElementById('bulkCount');
-    const updateBulkBar = () => {
-      const checked = this.getSelectedIds().length;
-      if (bulkBar) bulkBar.style.display = checked > 0 ? 'flex' : 'none';
-      if (bulkCount) bulkCount.textContent = `${checked} selected`;
-    };
-    this.listEl.addEventListener('change', (e) => {
-      if (e.target.matches('.conversation-item-checkbox')) updateBulkBar();
-    });
-    document.getElementById('bulkArchiveBtn')?.addEventListener('click', () => this.bulkArchive());
-    document.getElementById('bulkDeleteBtn')?.addEventListener('click', () => this.bulkDelete());
-
-    this.listEl.addEventListener('click', (e) => {
-      const exportBtn = e.target.closest('[data-export-conv]');
-      if (exportBtn) {
-        e.stopPropagation();
-        this.exportConversation(exportBtn.dataset.exportConv);
-        return;
-      }
-      const archiveBtn = e.target.closest('[data-archive-conv]');
-      if (archiveBtn) {
-        e.stopPropagation();
-        this.archiveConversation(archiveBtn.dataset.archiveConv);
-        return;
-      }
-      const deleteBtn = e.target.closest('[data-delete-conv]');
-      if (deleteBtn) {
-        e.stopPropagation();
-        const convId = deleteBtn.dataset.deleteConv;
-        const conv = this.conversations.find(c => c.id === convId);
-        this.confirmDelete(convId, conv?.title || 'Untitled');
-        return;
-      }
-      const item = e.target.closest('[data-conv-id]');
-      if (item) {
-        this.select(item.dataset.convId);
-      }
-    });
-  }
-
-  setupFolderBrowser() {
-    this.folderBrowser.modal = document.getElementById('folderBrowserModal');
-    this.folderBrowser.listEl = document.getElementById('folderList');
-    this.folderBrowser.breadcrumbEl = document.getElementById('folderBreadcrumb');
-
-    if (!this.folderBrowser.modal) return;
-
-    const closeBtn = this.folderBrowser.modal.querySelector('[data-folder-close]');
-    const cancelBtn = this.folderBrowser.modal.querySelector('[data-folder-cancel]');
-    const selectBtn = this.folderBrowser.modal.querySelector('[data-folder-select]');
-
-    closeBtn?.addEventListener('click', () => this.closeFolderBrowser());
-    cancelBtn?.addEventListener('click', () => this.closeFolderBrowser());
-    selectBtn?.addEventListener('click', () => this.confirmFolderSelection());
-
-    this.folderBrowser.modal.addEventListener('click', (e) => {
-      if (e.target === this.folderBrowser.modal) this.closeFolderBrowser();
-    });
-
-    this.folderBrowser.homePathReady = this.fetchHomePath();
-  }
-
-  async fetchHomePath() {
-    try {
-      const res = await fetch(`${window.__BASE_URL || '/gm'}/api/home`);
-      const data = await res.json();
-      this.folderBrowser.homePath = data.home || '~';
-      this.folderBrowser.cwdPath = data.cwd || null;
-    } catch (e) {
-      console.error('Failed to fetch home path:', e);
-    }
-  }
-
-  async openFolderBrowser() {
-    window.dispatchEvent(new CustomEvent('preparing-new-conversation'));
-    if (!this.folderBrowser.modal) {
-      this.createNew();
-      return;
-    }
-    if (this.folderBrowser.homePathReady) {
-      await this.folderBrowser.homePathReady;
-    }
-    const startPath = this.folderBrowser.cwdPath || '~';
-    this.folderBrowser.currentPath = startPath;
-    this.folderBrowser.modal.classList.add('visible');
-    this.loadFolders(startPath);
-  }
-
-  closeFolderBrowser() {
-    this.folderBrowser.modal?.classList.remove('visible');
-  }
-
-  async loadFolders(dirPath) {
-    this.folderBrowser.currentPath = dirPath;
-    this.renderBreadcrumb(dirPath);
-
-    if (!this.folderBrowser.listEl) return;
-    this.folderBrowser.listEl.innerHTML = '<li class="folder-list-loading">Loading...</li>';
-
-    try {
-      const data = await window.wsClient.rpc('folders', { path: dirPath });
-      const folders = data.folders || [];
-
-      this.folderBrowser.listEl.innerHTML = '';
-
-      const isAtRoot = dirPath === '~' || dirPath === '/' || dirPath === this.folderBrowser.homePath || /^[A-Za-z]:[\\\/]?$/.test(dirPath);
-      if (!isAtRoot) {
-        const parentPath = this.getParentPath(dirPath);
-        const upItem = document.createElement('li');
-        upItem.className = 'folder-list-item';
-        upItem.innerHTML = '<span class="folder-list-item-icon">..</span><span class="folder-list-item-name">Parent Directory</span>';
-        upItem.addEventListener('click', () => this.loadFolders(parentPath));
-        this.folderBrowser.listEl.appendChild(upItem);
-      }
-
-      if (folders.length === 0 && this.folderBrowser.listEl.children.length === 0) {
-        this.folderBrowser.listEl.innerHTML = '<li class="folder-list-empty">No subdirectories</li>';
-        return;
-      }
-
-      for (const folder of folders) {
-        const li = document.createElement('li');
-        li.className = 'folder-list-item';
-        li.innerHTML = `<span class="folder-list-item-icon">&#128193;</span><span class="folder-list-item-name">${this.escapeHtml(folder.name)}</span>`;
-        li.addEventListener('click', () => {
-          const expandedBase = dirPath === '~' ? this.folderBrowser.homePath : dirPath;
-          const separator = expandedBase.includes('\\') ? '\\' : '/';
-          const base = expandedBase.replace(/[\/\\]+$/, '');
-          const newPath = base + separator + folder.name;
-          this.loadFolders(newPath);
-        });
-        this.folderBrowser.listEl.appendChild(li);
-      }
-    } catch (err) {
-      console.error('Failed to load folders:', err);
-      this.folderBrowser.listEl.innerHTML = `<li class="folder-list-error">Error: ${this.escapeHtml(err.message)}</li>`;
-    }
-  }
-
-  getParentPath(dirPath) {
-    const expanded = dirPath === '~' ? this.folderBrowser.homePath : dirPath;
-    const parts = pathSplit(expanded);
-    const isWindows = expanded.includes('\\') || /^[A-Za-z]:/.test(expanded);
-    const separator = isWindows ? '\\' : '/';
-    if (parts.length <= 1) {
-      return isWindows && parts[0] && parts[0].endsWith(':') ? parts[0] + separator : separator;
-    }
-    parts.pop();
-    if (isWindows) {
-      const joined = parts.join(separator);
-      return parts.length === 1 && parts[0].endsWith(':') ? joined + separator : joined;
-    }
-    return separator + parts.join(separator);
-  }
-
-  renderBreadcrumb(dirPath) {
-    if (!this.folderBrowser.breadcrumbEl) return;
-
-    const expanded = dirPath === '~' ? this.folderBrowser.homePath : dirPath;
-    const parts = pathSplit(expanded);
-    const isWin = expanded.includes('\\') || /^[A-Za-z]:/.test(expanded);
-    const separator = isWin ? '\\' : '/';
-    const rootPath = isWin && parts[0] && /^[A-Za-z]:$/.test(parts[0]) ? parts[0] + separator : separator;
-
-    let html = '';
-    html += `<span class="folder-breadcrumb-segment" data-path="${this.escapeHtml(rootPath)}">${this.escapeHtml(rootPath)} </span>`;
-
-    let accumulated = '';
-    const isDriveLetter = isWin && parts[0] && /^[A-Za-z]:$/.test(parts[0]);
-    for (let i = 0; i < parts.length; i++) {
-      if (i === 0 && isDriveLetter) {
-        accumulated = parts[0];
-      } else {
-        accumulated += separator + parts[i];
-      }
-      const segPath = (i === 0 && isDriveLetter) ? rootPath : accumulated;
-      const isLast = i === parts.length - 1;
-      html += `<span class="folder-breadcrumb-separator">${separator}</span>`;
-      html += `<span class="folder-breadcrumb-segment${isLast ? '' : ''}" data-path="${this.escapeHtml(segPath)}">${this.escapeHtml(parts[i])}</span>`;
-    }
-
-    this.folderBrowser.breadcrumbEl.innerHTML = html;
-
-    this.folderBrowser.breadcrumbEl.querySelectorAll('.folder-breadcrumb-segment').forEach(seg => {
-      seg.addEventListener('click', () => {
-        const p = seg.dataset.path;
-        if (p) this.loadFolders(p);
-      });
-    });
-  }
-
-  confirmFolderSelection() {
-    const currentPath = this.folderBrowser.currentPath;
-    const expanded = currentPath === '~' ? this.folderBrowser.homePath : currentPath;
-    this.closeFolderBrowser();
-
-    const dirName = pathBasename(expanded) || 'root';
-    window.dispatchEvent(new CustomEvent('create-new-conversation', {
-      detail: { workingDirectory: expanded, title: dirName }
-    }));
-  }
-
-  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', {});
-      console.log('[ConversationManager] Deleted all conversations');
-      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;
-    const visible = this.cloneBar.style.display !== 'none';
-    if (visible) {
-      this.hideCloneBar();
-    } else {
-      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;
-    }
-  }
-
-  showLoading() {
-    if (!this.listEl) return;
-    this.listEl.innerHTML = '';
-    if (this.emptyEl) {
-      this.emptyEl.textContent = 'Loading...';
-      this.emptyEl.style.display = 'block';
-    }
-  }
-
-  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();
-      const convList = data.conversations || [];
-
-      if (window.convListMachineAPI) {
-        window.convListMachineAPI.send({ type: 'LOAD_DONE', conversations: convList });
-      }
-
-      const clientStreamingMap = window.agentGuiClient?.state?.streamingConversations;
-      for (const conv of this.conversations) {
-        const serverStreaming = conv.isStreaming === 1 || conv.isStreaming === true;
-        const clientStreaming = clientStreamingMap ? clientStreamingMap.has(conv.id) : false;
-        if (serverStreaming || clientStreaming) {
-          if (window.convListMachineAPI) window.convListMachineAPI.send({ type: 'SET_STREAMING', id: conv.id });
-        } else {
-          if (window.convListMachineAPI) window.convListMachineAPI.send({ type: 'CLEAR_STREAMING', id: conv.id });
-        }
-      }
-
-      this.render();
-    } catch (err) {
-      console.error('Failed to load conversations:', err);
-      if (window.convListMachineAPI) 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(' \u2022 '))
-      ),
-      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 });
-      console.log(`[ConversationManager] Deleted conversation ${convId}`);
-      this.deleteConversation(convId);
-    } catch (err) {
-      console.error('[ConversationManager] Delete error:', 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();
-      }
-    });
-  }
-
-  escapeHtml(text) {
-    return window._escHtml(text);
-  }
-}
-
-if (document.readyState === 'loading') {
-  document.addEventListener('DOMContentLoaded', () => {
-    window.conversationManager = new ConversationManager();
-  });
-} else {
-  window.conversationManager = new ConversationManager();
-}
+function pathSplit(p) {
+  return p.split(/[\/\\]/).filter(Boolean);
+}
+
+function pathBasename(p) {
+  const parts = pathSplit(p);
+  return parts.length ? parts.pop() : '';
+}
+
+class ConversationManager {
+  constructor() {
+    this.listEl = document.querySelector('[data-conversation-list]');
+    this.emptyEl = document.querySelector('[data-conversation-empty]');
+    this.newBtn = document.querySelector('[data-new-conversation]');
+    this.sidebarEl = document.querySelector('[data-sidebar]');
+    this.agents = new Map();
+
+    this.folderBrowser = {
+      modal: null,
+      listEl: null,
+      breadcrumbEl: null,
+      currentPath: '~',
+      homePath: '~',
+      cwdPath: null,
+      homePathReady: null
+    };
+
+    if (!this.listEl) return;
+
+    this.init();
+  }
+
+  get conversations() {
+    return window.convListMachineAPI ? window.convListMachineAPI.getConversations() : [];
+  }
+
+  get activeId() {
+    return window.convListMachineAPI ? window.convListMachineAPI.getActiveId() : null;
+  }
+
+  set activeId(id) {
+    if (window.convListMachineAPI) window.convListMachineAPI.send({ type: 'SELECT', id });
+  }
+
+  get streamingConversations() {
+    const ids = window.convListMachineAPI ? window.convListMachineAPI.getStreamingIds() : [];
+    return { has: (id) => ids.includes(id), add: (id) => window.convListMachineAPI?.send({ type: 'SET_STREAMING', id }), delete: (id) => window.convListMachineAPI?.send({ type: 'CLEAR_STREAMING', id }), clear: () => ids.forEach(id => window.convListMachineAPI?.send({ type: 'CLEAR_STREAMING', id })) };
+  }
+
+  async init() {
+    this.newBtn?.addEventListener('click', () => this.openFolderBrowser());
+    this.setupDelegatedListeners();
+    this.showLoading();
+    this.setupWebSocketListener();
+    this.setupFolderBrowser();
+    this.setupCloneUI();
+    this.setupDeleteAllButton();
+
+    await Promise.all([this.loadAgents(), this.loadConversations()]);
+
+    this._pollInterval = setInterval(() => this.loadConversations(), 30000);
+
+    window.addEventListener('beforeunload', () => this.destroy());
+  }
+
+  destroy() {
+    if (this._pollInterval) {
+      clearInterval(this._pollInterval);
+      this._pollInterval = null;
+    }
+  }
+
+  async loadAgents() {
+    try {
+      const base = window.__BASE_URL || '/gm';
+      const res = await fetch(base + '/api/agents');
+      if (!res.ok) throw new Error('HTTP ' + res.status);
+      const data = await res.json();
+      for (const agent of data.agents || []) {
+        this.agents.set(agent.id, agent);
+      }
+    } catch (err) {
+      console.error('[ConversationManager] Error loading agents:', err);
+    }
+  }
+
+  _updateConversations(newArray, source) {
+    if (!window.convListMachineAPI) return { version: 0, timestamp: Date.now(), oldLen: 0, newLen: 0 };
+    const oldLen = this.conversations.length;
+    const newLen = Array.isArray(newArray) ? newArray.length : 0;
+    window.convListMachineAPI.send({ type: 'LOAD_DONE', conversations: Array.isArray(newArray) ? newArray : [] });
+    const version = window.convListMachineAPI.getContext().version;
+    window._conversationCacheVersion = version;
+    return { version, timestamp: Date.now(), oldLen, newLen };
+  }
+
+  getConversationCacheVersion() {
+    return window.convListMachineAPI ? window.convListMachineAPI.getContext().version : 0;
+  }
+
+  getAgentDisplayName(agentId) {
+    if (!agentId) return 'Unknown';
+    const agent = this.agents.get(agentId);
+    return agent?.name || agentId;
+  }
+
+  formatModelLabel(model) {
+    if (!model) return '';
+    return ' (' + model.replace(/^claude-/i, '').replace(/-\d{8,}.*$/, '').replace(/-/g, ' ') + ')';
+  }
+
+  escapeHtml(text) {
+    return window._escHtml(text);
+  }
+}