agentgui 1.0.92 → 1.0.93

package/database.js

@@ -197,7 +197,8 @@ try {
     projectPath: 'TEXT',
     gitBranch: 'TEXT',
     sourcePath: 'TEXT',
-    lastSyncedAt: 'INTEGER'
+    lastSyncedAt: 'INTEGER',
+    workingDirectory: 'TEXT'
   };
 
   let addedColumns = false;
@@ -228,18 +229,19 @@ function generateId(prefix) {
 }
 
 export const queries = {
-  createConversation(agentId, title = null) {
+  createConversation(agentId, title = null, workingDirectory = null) {
     const id = generateId('conv');
     const now = Date.now();
     const stmt = db.prepare(
-      `INSERT INTO conversations (id, agentId, title, created_at, updated_at, status) VALUES (?, ?, ?, ?, ?, ?)`
+      `INSERT INTO conversations (id, agentId, title, created_at, updated_at, status, workingDirectory) VALUES (?, ?, ?, ?, ?, ?, ?)`
     );
-    stmt.run(id, agentId, title, now, now, 'active');
+    stmt.run(id, agentId, title, now, now, 'active', workingDirectory);
 
     return {
       id,
       agentId,
       title,
+      workingDirectory,
       created_at: now,
       updated_at: now,
       status: 'active'
@@ -258,7 +260,7 @@ export const queries = {
 
   getConversationsList() {
     const stmt = db.prepare(
-      'SELECT id, title, agentType, created_at, updated_at, messageCount FROM conversations WHERE status != ? ORDER BY updated_at DESC'
+      'SELECT id, title, agentType, created_at, updated_at, messageCount, workingDirectory FROM conversations WHERE status != ? ORDER BY updated_at DESC'
     );
     return stmt.all('deleted');
   },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "agentgui",
-  "version": "1.0.92",
+  "version": "1.0.93",
   "description": "Multi-agent ACP client with real-time communication",
   "type": "module",
   "main": "server.js",

package/server.js

@@ -79,8 +79,8 @@ const server = http.createServer(async (req, res) => {
 
     if (pathOnly === '/api/conversations' && req.method === 'POST') {
       const body = await parseBody(req);
-      const conversation = queries.createConversation(body.agentId, body.title);
-      queries.createEvent('conversation.created', { agentId: body.agentId }, conversation.id);
+      const conversation = queries.createConversation(body.agentId, body.title, body.workingDirectory || null);
+      queries.createEvent('conversation.created', { agentId: body.agentId, workingDirectory: conversation.workingDirectory }, conversation.id);
       broadcastSync({ type: 'conversation_created', conversation });
       res.writeHead(201, { 'Content-Type': 'application/json' });
       res.end(JSON.stringify({ conversation }));
@@ -377,7 +377,8 @@ async function processMessageWithStreaming(conversationId, messageId, sessionId,
   try {
     debugLog(`[stream] Starting: conversationId=${conversationId}, sessionId=${sessionId}, agentId=${agentId}, skipPermissions=${skipPermissions}`);
 
-    const cwd = '/config';
+    const conv = queries.getConversation(conversationId);
+    const cwd = conv?.workingDirectory || '/config';
     const actualAgentId = agentId || 'claude-code';
 
     debugLog(`[stream] Calling runClaudeWithStreaming with config: skipPermissions=${skipPermissions}`);
@@ -505,7 +506,8 @@ async function processMessage(conversationId, messageId, content, agentId) {
   try {
     debugLog(`[processMessage] Starting: conversationId=${conversationId}, agentId=${agentId}`);
 
-    const cwd = '/config';
+    const conv = queries.getConversation(conversationId);
+    const cwd = conv?.workingDirectory || '/config';
     const actualAgentId = agentId || 'claude-code';
 
     // Handle both string content and object content (for structured messages)

package/static/index.html

@@ -552,6 +552,180 @@
       }
     }
 
+    /* Folder Browser Modal */
+    .folder-modal-overlay {
+      display: none;
+      position: fixed;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      background: rgba(0, 0, 0, 0.5);
+      z-index: 2000;
+      align-items: center;
+      justify-content: center;
+    }
+
+    .folder-modal-overlay.visible {
+      display: flex;
+    }
+
+    .folder-modal {
+      background: var(--color-bg-primary);
+      border: 1px solid var(--color-border);
+      border-radius: 0.5rem;
+      width: 500px;
+      max-width: 90vw;
+      max-height: 80vh;
+      display: flex;
+      flex-direction: column;
+      box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
+    }
+
+    .folder-modal-header {
+      padding: 1rem;
+      border-bottom: 1px solid var(--color-border);
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      flex-shrink: 0;
+    }
+
+    .folder-modal-header h3 {
+      margin: 0;
+      font-size: 1rem;
+      font-weight: 600;
+    }
+
+    .folder-modal-close {
+      background: none;
+      border: none;
+      font-size: 1.25rem;
+      cursor: pointer;
+      color: var(--color-text-secondary);
+      padding: 0.25rem;
+      line-height: 1;
+    }
+
+    .folder-modal-close:hover {
+      color: var(--color-text-primary);
+    }
+
+    .folder-breadcrumb {
+      padding: 0.75rem 1rem;
+      border-bottom: 1px solid var(--color-border);
+      font-size: 0.8rem;
+      font-family: 'Monaco', 'Menlo', monospace;
+      color: var(--color-text-secondary);
+      background: var(--color-bg-secondary);
+      display: flex;
+      align-items: center;
+      gap: 0.25rem;
+      flex-shrink: 0;
+      overflow-x: auto;
+      white-space: nowrap;
+    }
+
+    .folder-breadcrumb-segment {
+      cursor: pointer;
+      color: var(--color-primary);
+      padding: 0.125rem 0.25rem;
+      border-radius: 0.25rem;
+    }
+
+    .folder-breadcrumb-segment:hover {
+      background: var(--color-bg-primary);
+      text-decoration: underline;
+    }
+
+    .folder-breadcrumb-separator {
+      color: var(--color-text-secondary);
+    }
+
+    .folder-list {
+      flex: 1;
+      overflow-y: auto;
+      min-height: 200px;
+      max-height: 400px;
+      list-style: none;
+      margin: 0;
+      padding: 0;
+    }
+
+    .folder-list-item {
+      padding: 0.5rem 1rem;
+      cursor: pointer;
+      display: flex;
+      align-items: center;
+      gap: 0.5rem;
+      font-size: 0.875rem;
+      border-bottom: 1px solid var(--color-border);
+      transition: background-color 0.15s;
+    }
+
+    .folder-list-item:hover {
+      background: var(--color-bg-secondary);
+    }
+
+    .folder-list-item-icon {
+      font-size: 1rem;
+      flex-shrink: 0;
+      width: 1.25rem;
+      text-align: center;
+    }
+
+    .folder-list-item-name {
+      flex: 1;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+
+    .folder-list-empty {
+      padding: 2rem 1rem;
+      text-align: center;
+      color: var(--color-text-secondary);
+      font-size: 0.875rem;
+    }
+
+    .folder-list-loading {
+      padding: 2rem 1rem;
+      text-align: center;
+      color: var(--color-text-secondary);
+      font-size: 0.875rem;
+    }
+
+    .folder-list-error {
+      padding: 1rem;
+      text-align: center;
+      color: var(--color-error);
+      font-size: 0.875rem;
+    }
+
+    .folder-modal-footer {
+      padding: 0.75rem 1rem;
+      border-top: 1px solid var(--color-border);
+      display: flex;
+      justify-content: flex-end;
+      gap: 0.5rem;
+      flex-shrink: 0;
+    }
+
+    .folder-modal-footer .btn {
+      padding: 0.5rem 1rem;
+      font-size: 0.8rem;
+    }
+
+    .btn-secondary {
+      background: var(--color-bg-secondary);
+      color: var(--color-text-primary);
+      border: 1px solid var(--color-border);
+    }
+
+    .btn-secondary:hover {
+      background: var(--color-border);
+    }
+
     /* Utilities */
     .flex {
       display: flex;
@@ -849,6 +1023,24 @@
     </div>
   </div>
 
+  <!-- Folder Browser Modal -->
+  <div id="folderBrowserModal" class="folder-modal-overlay">
+    <div class="folder-modal">
+      <div class="folder-modal-header">
+        <h3>Select Working Directory</h3>
+        <button class="folder-modal-close" data-folder-close>&times;</button>
+      </div>
+      <div id="folderBreadcrumb" class="folder-breadcrumb"></div>
+      <ul id="folderList" class="folder-list">
+        <li class="folder-list-loading">Loading...</li>
+      </ul>
+      <div class="folder-modal-footer">
+        <button class="btn btn-secondary" data-folder-cancel>Cancel</button>
+        <button class="btn btn-primary" data-folder-select>Select This Folder</button>
+      </div>
+    </div>
+  </div>
+
   <!-- Scripts - Order matters! -->
   <!-- 1. Event Processor (no dependencies) -->
   <script src="/gm/js/event-processor.js"></script>

package/static/js/client.js

@@ -168,8 +168,10 @@ class AgentGUIClient {
       themeToggle.addEventListener('click', () => this.toggleTheme());
     }
 
-    // Listen for new conversation creation
-    window.addEventListener('create-new-conversation', () => this.createNewConversation());
+    window.addEventListener('create-new-conversation', (event) => {
+      const detail = event.detail || {};
+      this.createNewConversation(detail.workingDirectory, detail.title);
+    });
 
     // Listen for conversation selection
     window.addEventListener('conversation-selected', (event) => {
@@ -636,16 +638,17 @@ class AgentGUIClient {
   /**
    * Create a new empty conversation
    */
-  async createNewConversation() {
+  async createNewConversation(workingDirectory, title) {
     try {
       const agentId = this.ui.agentSelector?.value || 'claude-code';
+      const convTitle = title || 'New Conversation';
+      const body = { agentId, title: convTitle };
+      if (workingDirectory) body.workingDirectory = workingDirectory;
+
       const response = await fetch(window.__BASE_URL + '/api/conversations', {
         method: 'POST',
         headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({
-          agentId,
-          title: 'New Conversation'
-        })
+        body: JSON.stringify(body)
       });
 
       if (!response.ok) {
@@ -655,10 +658,13 @@ class AgentGUIClient {
       const { conversation } = await response.json();
       this.state.currentConversation = conversation;
 
-      // Refresh conversation list
       await this.loadConversations();
 
-      // Clear input for next execution
+      if (window.conversationManager) {
+        window.conversationManager.loadConversations();
+        window.conversationManager.select(conversation.id);
+      }
+
       if (this.ui.messageInput) {
         this.ui.messageInput.value = '';
         this.ui.messageInput.focus();
@@ -690,10 +696,11 @@ class AgentGUIClient {
       // Clear output and display conversation header
       const outputEl = document.getElementById('output');
       if (outputEl) {
+        const wdInfo = conversation.workingDirectory ? ` • ${this.escapeHtml(conversation.workingDirectory)}` : '';
         outputEl.innerHTML = `
           <div class="conversation-header">
             <h2>${this.escapeHtml(conversation.title || 'Conversation')}</h2>
-            <p class="text-secondary">${conversation.agentType || 'unknown'} • ${new Date(conversation.created_at).toLocaleDateString()}</p>
+            <p class="text-secondary">${conversation.agentType || 'unknown'} • ${new Date(conversation.created_at).toLocaleDateString()}${wdInfo}</p>
           </div>
           <div class="conversation-messages">
             ${this.renderMessages(messagesData.messages || [])}

package/static/js/conversations.js

@@ -1,6 +1,7 @@
 /**
  * Conversations Module
  * Manages conversation list sidebar with real-time updates
+ * Includes folder browser for selecting working directory on new conversation
  */
 
 class ConversationManager {
@@ -12,23 +13,180 @@ class ConversationManager {
     this.newBtn = document.querySelector('[data-new-conversation]');
     this.sidebarEl = document.querySelector('[data-sidebar]');
 
+    this.folderBrowser = {
+      modal: null,
+      listEl: null,
+      breadcrumbEl: null,
+      currentPath: '~',
+      homePath: '~'
+    };
+
     if (!this.listEl) return;
 
     this.init();
   }
 
   async init() {
-    this.newBtn?.addEventListener('click', () => this.createNew());
+    this.newBtn?.addEventListener('click', () => this.openFolderBrowser());
     this.loadConversations();
     this.setupWebSocketListener();
+    this.setupFolderBrowser();
 
-    // Auto-refresh every 30 seconds
     setInterval(() => this.loadConversations(), 30000);
   }
 
+  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.fetchHomePath();
+  }
+
+  async fetchHomePath() {
+    try {
+      const res = await fetch((window.__BASE_URL || '') + '/api/home');
+      if (res.ok) {
+        const data = await res.json();
+        this.folderBrowser.homePath = data.home || '~';
+      }
+    } catch (e) {
+      console.error('Failed to fetch home path:', e);
+    }
+  }
+
+  openFolderBrowser() {
+    if (!this.folderBrowser.modal) {
+      this.createNew();
+      return;
+    }
+    this.folderBrowser.currentPath = '~';
+    this.folderBrowser.modal.classList.add('visible');
+    this.loadFolders('~');
+  }
+
+  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 res = await fetch((window.__BASE_URL || '') + '/api/folders', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ path: dirPath })
+      });
+
+      if (!res.ok) {
+        const errData = await res.json().catch(() => ({}));
+        throw new Error(errData.error || `HTTP ${res.status}`);
+      }
+
+      const data = await res.json();
+      const folders = data.folders || [];
+
+      this.folderBrowser.listEl.innerHTML = '';
+
+      if (dirPath !== '~' && dirPath !== '/' && dirPath !== this.folderBrowser.homePath) {
+        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 newPath = expandedBase + '/' + 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 = expanded.split('/').filter(Boolean);
+    if (parts.length <= 1) return '/';
+    parts.pop();
+    return '/' + parts.join('/');
+  }
+
+  renderBreadcrumb(dirPath) {
+    if (!this.folderBrowser.breadcrumbEl) return;
+
+    const expanded = dirPath === '~' ? this.folderBrowser.homePath : dirPath;
+    const parts = expanded.split('/').filter(Boolean);
+
+    let html = '';
+    html += '<span class="folder-breadcrumb-segment" data-path="/">/ </span>';
+
+    let accumulated = '';
+    for (let i = 0; i < parts.length; i++) {
+      accumulated += '/' + parts[i];
+      const isLast = i === parts.length - 1;
+      html += '<span class="folder-breadcrumb-separator">/</span>';
+      html += `<span class="folder-breadcrumb-segment${isLast ? '' : ''}" data-path="${this.escapeHtml(accumulated)}">${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 = expanded.split('/').filter(Boolean).pop() || 'root';
+    window.dispatchEvent(new CustomEvent('create-new-conversation', {
+      detail: { workingDirectory: expanded, title: dirName }
+    }));
+  }
+
   async loadConversations() {
     try {
-      const res = await fetch('/gm/api/conversations');
+      const res = await fetch((window.__BASE_URL || '') + '/api/conversations');
       if (!res.ok) throw new Error(`HTTP ${res.status}`);
 
       const data = await res.json();
@@ -51,7 +209,6 @@ class ConversationManager {
     this.listEl.innerHTML = '';
     this.emptyEl.style.display = 'none';
 
-    // Sort by most recent first
     const sorted = [...this.conversations].sort((a, b) =>
       new Date(b.createdAt || 0) - new Date(a.createdAt || 0)
     );
@@ -71,10 +228,13 @@ class ConversationManager {
     const title = conv.title || `Conversation ${conv.id.slice(0, 8)}`;
     const timestamp = conv.created_at ? new Date(conv.created_at).toLocaleDateString() : 'Unknown';
     const agent = conv.agentType || 'unknown';
+    const wd = conv.workingDirectory ? conv.workingDirectory.split('/').pop() : '';
+    const metaParts = [agent, timestamp];
+    if (wd) metaParts.push(wd);
 
     li.innerHTML = `
       <div class="conversation-item-title">${this.escapeHtml(title)}</div>
-      <div class="conversation-item-meta">${agent} • ${timestamp}</div>
+      <div class="conversation-item-meta">${metaParts.join(' \u2022 ')}</div>
     `;
 
     li.addEventListener('click', () => this.select(conv.id));
@@ -84,7 +244,6 @@ class ConversationManager {
   select(convId) {
     this.activeId = convId;
 
-    // Update active indicator
     document.querySelectorAll('.conversation-item').forEach(item => {
       item.classList.remove('active');
     });
@@ -92,7 +251,6 @@ class ConversationManager {
     const active = document.querySelector(`[data-conv-id="${convId}"]`);
     if (active) active.classList.add('active');
 
-    // Emit event for client.js to handle
     window.dispatchEvent(new CustomEvent('conversation-selected', {
       detail: { conversationId: convId }
     }));
@@ -110,7 +268,6 @@ class ConversationManager {
   }
 
   addConversation(conv) {
-    // Add to beginning (most recent)
     this.conversations.unshift(conv);
     this.render();
   }
@@ -149,7 +306,6 @@ class ConversationManager {
   }
 }
 
-// Initialize when DOM is ready
 if (document.readyState === 'loading') {
   document.addEventListener('DOMContentLoaded', () => {
     window.conversationManager = new ConversationManager();