agentgui 1.0.193 → 1.0.195

package/package.json

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

package/server.js

@@ -666,6 +666,36 @@ const server = http.createServer(async (req, res) => {
       return;
     }
 
+    if (pathOnly === '/api/clone' && req.method === 'POST') {
+      const body = await parseBody(req);
+      const repo = (body.repo || '').trim();
+      if (!repo || !/^[a-zA-Z0-9_.-]+\/[a-zA-Z0-9_.-]+$/.test(repo)) {
+        sendJSON(req, res, 400, { error: 'Invalid repo format. Use org/repo or user/repo' });
+        return;
+      }
+      const cloneDir = STARTUP_CWD || os.homedir();
+      const repoName = repo.split('/')[1];
+      const targetPath = path.join(cloneDir, repoName);
+      if (fs.existsSync(targetPath)) {
+        sendJSON(req, res, 409, { error: `Directory already exists: ${repoName}`, path: targetPath });
+        return;
+      }
+      try {
+        execSync(`git clone https://github.com/${repo}.git`, {
+          cwd: cloneDir,
+          encoding: 'utf-8',
+          timeout: 120000,
+          stdio: ['pipe', 'pipe', 'pipe'],
+          env: { ...process.env, GIT_TERMINAL_PROMPT: '0' }
+        });
+        sendJSON(req, res, 200, { ok: true, repo, path: targetPath, name: repoName });
+      } catch (err) {
+        const stderr = err.stderr || err.message || 'Clone failed';
+        sendJSON(req, res, 500, { error: stderr.trim() });
+      }
+      return;
+    }
+
     if (pathOnly === '/api/folders' && req.method === 'POST') {
       const body = await parseBody(req);
       const folderPath = body.path || STARTUP_CWD;

package/static/index.html

@@ -118,6 +118,97 @@
 
     .sidebar-new-btn:hover { background-color: var(--color-primary-dark); }
 
+    .sidebar-header-actions {
+      display: flex;
+      gap: 0.375rem;
+      align-items: center;
+      flex-shrink: 0;
+    }
+
+    .sidebar-clone-btn {
+      padding: 0.375rem 0.625rem;
+      font-size: 0.75rem;
+      background-color: var(--color-bg-primary);
+      color: var(--color-text-primary);
+      border: 1px solid var(--color-border);
+      border-radius: 0.375rem;
+      cursor: pointer;
+      transition: all 0.2s;
+      white-space: nowrap;
+      flex-shrink: 0;
+    }
+
+    .sidebar-clone-btn:hover { border-color: var(--color-primary); color: var(--color-primary); }
+
+    .clone-input-bar {
+      display: flex;
+      align-items: center;
+      gap: 0.375rem;
+      padding: 0.375rem 0.75rem;
+      background: var(--color-bg-primary);
+      border-bottom: 1px solid var(--color-border);
+      flex-shrink: 0;
+    }
+
+    .clone-input {
+      flex: 1;
+      min-width: 0;
+      padding: 0.375rem 0.5rem;
+      font-size: 0.8rem;
+      font-family: 'Monaco','Menlo','Ubuntu Mono', monospace;
+      border: 1px solid var(--color-border);
+      border-radius: 0.25rem;
+      background: var(--color-bg-secondary);
+      color: var(--color-text-primary);
+      outline: none;
+    }
+
+    .clone-input:focus { border-color: var(--color-primary); }
+
+    .clone-go-btn {
+      padding: 0.375rem 0.625rem;
+      font-size: 0.75rem;
+      font-weight: 600;
+      background: var(--color-primary);
+      color: white;
+      border: none;
+      border-radius: 0.25rem;
+      cursor: pointer;
+      flex-shrink: 0;
+      transition: background-color 0.15s;
+    }
+
+    .clone-go-btn:hover { background-color: var(--color-primary-dark); }
+    .clone-go-btn:disabled { opacity: 0.5; cursor: not-allowed; }
+
+    .clone-cancel-btn {
+      padding: 0.25rem 0.5rem;
+      font-size: 1rem;
+      background: none;
+      border: none;
+      cursor: pointer;
+      color: var(--color-text-secondary);
+      flex-shrink: 0;
+      line-height: 1;
+    }
+
+    .clone-cancel-btn:hover { color: var(--color-text-primary); }
+
+    .clone-status {
+      padding: 0.375rem 0.75rem;
+      font-size: 0.75rem;
+      background: var(--color-bg-primary);
+      border-bottom: 1px solid var(--color-border);
+      flex-shrink: 0;
+      display: flex;
+      align-items: center;
+      gap: 0.5rem;
+    }
+
+    .clone-status.cloning { color: var(--color-primary); }
+    .clone-status.clone-error { color: var(--color-error); }
+    .clone-status.clone-success { color: var(--color-success); }
+
     .sidebar-list {
       flex: 1;
       overflow-y: auto;
@@ -829,7 +920,6 @@
       }
 
       .sidebar.collapsed { transform: translateX(-100%); width: var(--sidebar-width); }
-      .sidebar:not(.collapsed),
       .sidebar.mobile-visible { transform: translateX(0); box-shadow: 4px 0 20px rgba(0,0,0,0.2); }
 
       .main-header { padding: 0 0.75rem; }
@@ -2079,7 +2169,15 @@
     <aside class="sidebar" data-sidebar>
       <div class="sidebar-header">
         <h2>History</h2>
-        <button id="newConversationBtn" class="sidebar-new-btn" data-new-conversation title="Start new conversation">+ New</button>
+        <div class="sidebar-header-actions">
+          <button id="cloneRepoBtn" class="sidebar-clone-btn" data-clone-repo title="Clone a GitHub repo">Clone</button>
+          <button id="newConversationBtn" class="sidebar-new-btn" data-new-conversation title="Start new conversation">+ New</button>
+        </div>
+      </div>
+      <div class="clone-input-bar" id="cloneInputBar" style="display:none;">
+        <input type="text" class="clone-input" id="cloneRepoInput" placeholder="org/repo" autocomplete="off" spellcheck="false">
+        <button class="clone-go-btn" id="cloneGoBtn" title="Clone">Go</button>
+        <button class="clone-cancel-btn" id="cloneCancelBtn" title="Cancel">&times;</button>
       </div>
       <ul class="sidebar-list" data-conversation-list>
         <li class="sidebar-empty" data-conversation-empty>No conversations yet</li>

package/static/js/conversations.js

@@ -35,6 +35,7 @@ class ConversationManager {
     this.loadConversations();
     this.setupWebSocketListener();
     this.setupFolderBrowser();
+    this.setupCloneUI();
 
     setInterval(() => this.loadConversations(), 30000);
   }
@@ -210,6 +211,103 @@ class ConversationManager {
     }));
   }
 
+  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 res = await fetch((window.__BASE_URL || '') + '/api/clone', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ repo })
+      });
+
+      const data = await res.json();
+
+      if (!res.ok) {
+        this.showCloneStatus(data.error || 'Clone failed', 'clone-error');
+        return;
+      }
+
+      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('Network error: ' + err.message, 'clone-error');
+    } finally {
+      if (this.cloneGoBtn) this.cloneGoBtn.disabled = false;
+      if (this.cloneInput) this.cloneInput.disabled = false;
+    }
+  }
+
   async loadConversations() {
     try {
       const res = await fetch((window.__BASE_URL || '') + '/api/conversations');

package/static/js/features.js

@@ -23,9 +23,13 @@
 
     if (!sidebar) return;
 
-    var savedState = localStorage.getItem('sidebar-collapsed');
-    if (savedState === 'true' && window.innerWidth > 768) {
+    if (window.innerWidth <= 768) {
       sidebar.classList.add('collapsed');
+    } else {
+      var savedState = localStorage.getItem('sidebar-collapsed');
+      if (savedState === 'true') {
+        sidebar.classList.add('collapsed');
+      }
     }
 
     function isMobile() { return window.innerWidth <= 768; }