agentgui 1.0.92 → 1.0.94

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();

package/static/js/features.js

@@ -0,0 +1,243 @@
+/**
+ * Features Module
+ * Drag-and-drop file upload, fsbrowse file browser toggle, mobile sidebar
+ */
+
+(function() {
+  const BASE = window.__BASE_URL || '';
+  let currentConversation = null;
+  let currentView = 'chat';
+  let dragCounter = 0;
+
+  function init() {
+    setupHamburgerMenu();
+    setupDragAndDrop();
+    setupViewToggle();
+    setupConversationListener();
+  }
+
+  // --- Hamburger Menu & Mobile Sidebar ---
+  function setupHamburgerMenu() {
+    const hamburger = document.querySelector('[data-hamburger]');
+    const sidebar = document.querySelector('[data-sidebar]');
+    const overlay = document.querySelector('[data-sidebar-overlay]');
+
+    if (!hamburger || !sidebar) return;
+
+    hamburger.addEventListener('click', function(e) {
+      e.stopPropagation();
+      const isOpen = sidebar.classList.contains('mobile-visible');
+      if (isOpen) {
+        closeSidebar();
+      } else {
+        openSidebar();
+      }
+    });
+
+    if (overlay) {
+      overlay.addEventListener('click', closeSidebar);
+    }
+
+    function openSidebar() {
+      sidebar.classList.add('mobile-visible');
+      if (overlay) overlay.classList.add('visible');
+    }
+
+    function closeSidebar() {
+      sidebar.classList.remove('mobile-visible');
+      if (overlay) overlay.classList.remove('visible');
+    }
+
+    // Close sidebar when conversation is selected (mobile)
+    window.addEventListener('conversation-selected', function() {
+      if (window.innerWidth <= 768) {
+        closeSidebar();
+      }
+    });
+
+    // Close sidebar on window resize to desktop
+    window.addEventListener('resize', function() {
+      if (window.innerWidth > 768) {
+        closeSidebar();
+      }
+    });
+  }
+
+  // --- Drag and Drop File Upload ---
+  function setupDragAndDrop() {
+    const dropZone = document.querySelector('[data-drop-zone]');
+    const overlay = document.getElementById('dropZoneOverlay');
+
+    if (!dropZone || !overlay) return;
+
+    dropZone.addEventListener('dragenter', function(e) {
+      e.preventDefault();
+      e.stopPropagation();
+      dragCounter++;
+      if (dragCounter === 1) {
+        overlay.classList.add('visible');
+      }
+    });
+
+    dropZone.addEventListener('dragover', function(e) {
+      e.preventDefault();
+      e.stopPropagation();
+    });
+
+    dropZone.addEventListener('dragleave', function(e) {
+      e.preventDefault();
+      e.stopPropagation();
+      dragCounter--;
+      if (dragCounter <= 0) {
+        dragCounter = 0;
+        overlay.classList.remove('visible');
+      }
+    });
+
+    dropZone.addEventListener('drop', function(e) {
+      e.preventDefault();
+      e.stopPropagation();
+      dragCounter = 0;
+      overlay.classList.remove('visible');
+
+      if (!currentConversation) {
+        showToast('Select a conversation first', 'error');
+        return;
+      }
+
+      const files = e.dataTransfer.files;
+      if (!files || files.length === 0) return;
+
+      uploadFiles(files);
+    });
+  }
+
+  function uploadFiles(files) {
+    if (!currentConversation) {
+      showToast('No conversation selected', 'error');
+      return;
+    }
+
+    const formData = new FormData();
+    for (let i = 0; i < files.length; i++) {
+      formData.append('file', files[i]);
+    }
+
+    showToast('Uploading ' + files.length + ' file(s)...', 'info');
+
+    fetch(BASE + '/api/upload/' + currentConversation, {
+      method: 'POST',
+      body: formData
+    })
+    .then(function(res) { return res.json(); })
+    .then(function(data) {
+      if (data.ok) {
+        showToast(data.count + ' file(s) uploaded', 'success');
+      } else {
+        showToast('Upload failed: ' + (data.error || 'Unknown error'), 'error');
+      }
+    })
+    .catch(function(err) {
+      showToast('Upload failed: ' + err.message, 'error');
+    });
+  }
+
+  function showToast(message, type) {
+    var existing = document.querySelector('.upload-toast');
+    if (existing) existing.remove();
+
+    var toast = document.createElement('div');
+    toast.className = 'upload-toast ' + (type || 'info');
+    toast.textContent = message;
+    document.body.appendChild(toast);
+
+    setTimeout(function() {
+      toast.style.opacity = '0';
+      setTimeout(function() { toast.remove(); }, 300);
+    }, 3000);
+  }
+
+  // --- View Toggle (Chat / Files) ---
+  function setupViewToggle() {
+    var bar = document.getElementById('viewToggleBar');
+    if (!bar) return;
+
+    var buttons = bar.querySelectorAll('.view-toggle-btn');
+    buttons.forEach(function(btn) {
+      btn.addEventListener('click', function() {
+        var view = btn.dataset.view;
+        switchView(view);
+      });
+    });
+  }
+
+  function switchView(view) {
+    currentView = view;
+    var bar = document.getElementById('viewToggleBar');
+    var chatArea = document.getElementById('output-scroll');
+    var execPanel = document.querySelector('.execution-panel');
+    var fileBrowser = document.getElementById('fileBrowserContainer');
+    var iframe = document.getElementById('fileBrowserIframe');
+
+    if (!bar) return;
+
+    // Update active button
+    bar.querySelectorAll('.view-toggle-btn').forEach(function(btn) {
+      btn.classList.toggle('active', btn.dataset.view === view);
+    });
+
+    if (view === 'files') {
+      if (chatArea) chatArea.style.display = 'none';
+      if (execPanel) execPanel.style.display = 'none';
+      if (fileBrowser) {
+        fileBrowser.style.display = 'flex';
+        if (iframe && currentConversation) {
+          var src = BASE + '/files/' + currentConversation + '/';
+          if (iframe.src !== location.origin + src) {
+            iframe.src = src;
+          }
+        }
+      }
+    } else {
+      if (chatArea) chatArea.style.display = '';
+      if (execPanel) execPanel.style.display = '';
+      if (fileBrowser) fileBrowser.style.display = 'none';
+    }
+  }
+
+  function updateViewToggleVisibility() {
+    var bar = document.getElementById('viewToggleBar');
+    if (!bar) return;
+
+    // Show toggle bar only when a conversation is selected
+    if (currentConversation) {
+      bar.style.display = 'flex';
+    } else {
+      bar.style.display = 'none';
+    }
+  }
+
+  // --- Conversation Listener ---
+  function setupConversationListener() {
+    window.addEventListener('conversation-selected', function(e) {
+      currentConversation = e.detail.conversationId;
+      updateViewToggleVisibility();
+      // If currently in files view, reload the iframe
+      if (currentView === 'files') {
+        switchView('files');
+      }
+    });
+
+    // Also listen for conversation created
+    window.addEventListener('create-new-conversation', function() {
+      // Will be updated when conversation-selected fires
+    });
+  }
+
+  // Initialize when DOM is ready
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', init);
+  } else {
+    init();
+  }
+})();

package/static/styles.css

@@ -1201,18 +1201,21 @@ html, body {
 /* Responsive design */
 @media (max-width: 768px) {
   .sidebar {
-    position: absolute;
+    position: fixed;
     left: 0;
     top: 0;
     bottom: 0;
-    z-index: 400;
+    z-index: 1000;
     width: 280px;
     transform: translateX(-100%);
-    box-shadow: var(--shadow-lg);
+    box-shadow: none;
+    transition: transform 0.3s ease;
   }
 
-  .sidebar.open {
+  .sidebar.open,
+  .sidebar.mobile-visible {
     transform: translateX(0);
+    box-shadow: var(--shadow-lg);
   }
 
   .sidebar-toggle {
@@ -1229,6 +1232,7 @@ html, body {
 
   .chat-input-section {
     padding: 1rem 1.5rem;
+    padding-bottom: calc(1rem + env(safe-area-inset-bottom));
   }
 
   .chat-footer {
@@ -1846,3 +1850,41 @@ p code {
   word-wrap: break-word;
   line-height: 1.5;
 }
+
+/* Touch-friendly interactive elements */
+@media (pointer: coarse) {
+  .chat-item,
+  .new-chat-btn,
+  .settings-btn,
+  .action-btn,
+  .gm-btn,
+  .chat-option-btn,
+  .close-btn {
+    min-height: 44px;
+    min-width: 44px;
+  }
+
+  .chat-input {
+    font-size: 16px;
+    min-height: 44px;
+  }
+
+  .chat-messages {
+    -webkit-overflow-scrolling: touch;
+  }
+}
+
+/* Safe area padding for notched phones */
+@supports (padding-top: env(safe-area-inset-top)) {
+  #app {
+    padding-top: env(safe-area-inset-top);
+  }
+
+  .chat-input-section {
+    padding-bottom: calc(1rem + env(safe-area-inset-bottom));
+  }
+
+  .chat-footer {
+    padding-bottom: calc(0.75rem + env(safe-area-inset-bottom));
+  }
+}