agentgui 1.0.77 → 1.0.79

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "agentgui",
-  "version": "1.0.77",
+  "version": "1.0.79",
   "description": "Multi-agent ACP client with real-time communication",
   "type": "module",
   "main": "server.js",
@@ -25,7 +25,5 @@
     "better-sqlite3": "^12.6.2",
     "ws": "^8.14.2"
   },
-  "devDependencies": {
-    "playwright": "^1.58.1"
-  }
+  "devDependencies": {}
 }

package/static/index.html

@@ -58,6 +58,124 @@
       gap: 0;
     }
 
+    .layout-with-sidebar {
+      display: grid;
+      grid-template-columns: 300px 1fr;
+      gap: 0;
+      min-height: 0;
+      flex: 1;
+      overflow: hidden;
+    }
+
+    /* Sidebar */
+    .sidebar {
+      display: flex;
+      flex-direction: column;
+      background-color: var(--color-bg-secondary);
+      border-right: 1px solid var(--color-border);
+      overflow: hidden;
+    }
+
+    .sidebar-header {
+      padding: 1rem;
+      border-bottom: 1px solid var(--color-border);
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      flex-shrink: 0;
+    }
+
+    .sidebar-header h2 {
+      margin: 0;
+      font-size: 0.875rem;
+      font-weight: 600;
+      text-transform: uppercase;
+      letter-spacing: 0.05em;
+      color: var(--color-text-secondary);
+    }
+
+    .sidebar-new-btn {
+      padding: 0.25rem 0.5rem;
+      font-size: 0.75rem;
+      background-color: var(--color-primary);
+      color: white;
+      border: none;
+      border-radius: 0.25rem;
+      cursor: pointer;
+      transition: background-color 0.2s;
+    }
+
+    .sidebar-new-btn:hover {
+      background-color: var(--color-primary-dark);
+    }
+
+    .sidebar-list {
+      flex: 1;
+      overflow-y: auto;
+      overflow-x: hidden;
+      list-style: none;
+      margin: 0;
+      padding: 0.5rem 0;
+    }
+
+    .conversation-item {
+      padding: 0.75rem 0.5rem;
+      margin: 0.25rem 0.5rem;
+      border-radius: 0.375rem;
+      cursor: pointer;
+      transition: background-color 0.2s, transform 0.1s;
+      border-left: 3px solid transparent;
+      user-select: none;
+    }
+
+    .conversation-item:hover {
+      background-color: var(--color-bg-primary);
+    }
+
+    .conversation-item.active {
+      background-color: var(--color-primary);
+      color: white;
+      border-left-color: var(--color-primary-dark);
+    }
+
+    .conversation-item-title {
+      font-weight: 500;
+      font-size: 0.875rem;
+      margin: 0;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+
+    .conversation-item-meta {
+      font-size: 0.75rem;
+      color: var(--color-text-secondary);
+      margin-top: 0.25rem;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+
+    .conversation-item.active .conversation-item-meta {
+      color: rgba(255, 255, 255, 0.7);
+    }
+
+    .sidebar-empty {
+      padding: 2rem 1rem;
+      text-align: center;
+      color: var(--color-text-secondary);
+      font-size: 0.875rem;
+    }
+
+    /* Main content area - flex column with full height */
+    .main-content {
+      display: flex;
+      flex-direction: column;
+      overflow: hidden;
+      flex: 1;
+      min-height: 0;
+    }
+
     header {
       background-color: var(--color-bg-secondary);
       border-bottom: 1px solid var(--color-border);
@@ -66,6 +184,8 @@
       justify-content: space-between;
       align-items: center;
       gap: 1rem;
+      flex-shrink: 0;
+      height: 60px;
     }
 
     .header-title {
@@ -79,6 +199,7 @@
       display: flex;
       gap: 1rem;
       align-items: center;
+      flex-shrink: 0;
     }
 
     .status-badge {
@@ -120,24 +241,34 @@
       }
     }
 
-    /* Main content */
-    main {
-      display: grid;
-      grid-template-columns: 1fr;
-      grid-template-rows: auto 1fr;
-      gap: 0;
+    /* Output area - scrollable, fills available space */
+    #output-scroll {
+      flex: 1;
+      overflow-y: auto;
+      overflow-x: hidden;
+      display: flex;
+      flex-direction: column;
       min-height: 0;
-      overflow: hidden;
+      padding: 1rem;
     }
 
+    #output {
+      display: flex;
+      flex-direction: column;
+      gap: 0.5rem;
+    }
+
+    /* Execution panel - sticky at bottom */
     .execution-panel {
       background-color: var(--color-bg-secondary);
-      border-bottom: 1px solid var(--color-border);
+      border-top: 1px solid var(--color-border);
       padding: 1.5rem;
       display: grid;
       grid-template-columns: 1fr auto;
       gap: 1rem;
       align-items: end;
+      flex-shrink: 0;
+      min-height: auto;
     }
 
     .execution-input-group {
@@ -172,6 +303,7 @@
       cursor: pointer;
       transition: all 0.2s;
       font-size: 0.875rem;
+      flex-shrink: 0;
     }
 
     .btn-primary {
@@ -198,23 +330,6 @@
       cursor: pointer;
     }
 
-    /* Output area */
-    #output-scroll {
-      overflow-y: auto;
-      overflow-x: hidden;
-      display: flex;
-      flex-direction: column;
-      min-height: 0;
-    }
-
-    #output {
-      flex: 1;
-      padding: 1rem;
-      display: flex;
-      flex-direction: column;
-      gap: 0.5rem;
-    }
-
     /* Event cards */
     .card {
       background-color: var(--color-bg-primary);
@@ -246,16 +361,93 @@
 
     /* Responsive */
     @media (max-width: 768px) {
+      .layout-with-sidebar {
+        grid-template-columns: 1fr;
+      }
+
+      .sidebar {
+        display: none;
+        position: fixed;
+        top: 60px;
+        left: 0;
+        width: 250px;
+        height: calc(100vh - 60px);
+        z-index: 1000;
+        overflow-y: auto;
+      }
+
+      .sidebar.mobile-visible {
+        display: flex;
+      }
+
       .execution-panel {
         grid-template-columns: 1fr;
+        padding: 1rem;
       }
 
       .header-controls {
         flex-wrap: wrap;
+        gap: 0.5rem;
       }
 
       .execution-input-group {
         grid-template-columns: 1fr;
+        gap: 0.5rem;
+      }
+
+      #output-scroll {
+        padding: 0.75rem;
+      }
+
+      header {
+        padding: 0.75rem;
+        height: 50px;
+      }
+
+      .header-title {
+        font-size: 1.25rem;
+      }
+    }
+
+    @media (max-width: 480px) {
+      .layout-with-sidebar {
+        grid-template-columns: 1fr;
+      }
+
+      .sidebar {
+        width: 100%;
+      }
+
+      .execution-panel {
+        padding: 0.75rem;
+      }
+
+      .execution-textarea {
+        min-height: 2.5rem;
+        max-height: 6rem;
+      }
+
+      .btn {
+        padding: 0.5rem 1rem;
+        font-size: 0.8rem;
+      }
+
+      #output-scroll {
+        padding: 0.5rem;
+      }
+
+      header {
+        padding: 0.5rem;
+        height: 45px;
+      }
+
+      .header-title {
+        font-size: 1rem;
+      }
+
+      .status-badge {
+        padding: 0.25rem 0.5rem;
+        font-size: 0.75rem;
       }
     }
 
@@ -440,34 +632,48 @@
       </div>
     </header>
 
-    <!-- Main Content -->
-    <main id="app">
-      <!-- Execution Panel -->
-      <div class="execution-panel">
-        <div class="execution-input-group">
-          <select class="agent-selector" data-agent-selector title="Select agent">
-            <option value="claude-code">Claude Code</option>
-            <option value="opencode">OpenCode</option>
-          </select>
-
-          <textarea
-            class="execution-textarea"
-            data-message-input
-            placeholder="Enter command or prompt... (Ctrl+Enter to submit)"
-            aria-label="Execution prompt input"
-          ></textarea>
+    <!-- Main Content with Sidebar -->
+    <div class="layout-with-sidebar">
+      <!-- Sidebar -->
+      <aside class="sidebar" data-sidebar>
+        <div class="sidebar-header">
+          <h2>History</h2>
+          <button class="sidebar-new-btn" data-new-conversation title="Start new conversation">+ New</button>
+        </div>
+        <ul class="sidebar-list" data-conversation-list>
+          <li class="sidebar-empty" data-conversation-empty>No conversations yet</li>
+        </ul>
+      </aside>
+
+      <!-- Main Content Area -->
+      <main id="app" class="main-content">
+        <!-- Output Container - Scrollable -->
+        <div id="output-scroll" role="region" aria-label="Execution output" aria-live="polite" aria-atomic="false">
+          <div id="output" class="output"></div>
         </div>
 
-        <button class="btn btn-primary" data-send-button title="Start execution (Ctrl+Enter)">
-          Execute
-        </button>
-      </div>
-
-      <!-- Output Container -->
-      <div id="output-scroll" role="region" aria-label="Execution output" aria-live="polite" aria-atomic="false">
-        <div id="output" class="output"></div>
-      </div>
-    </main>
+        <!-- Execution Panel - Fixed at bottom -->
+        <div class="execution-panel">
+          <div class="execution-input-group">
+            <select class="agent-selector" data-agent-selector title="Select agent">
+              <option value="claude-code">Claude Code</option>
+              <option value="opencode">OpenCode</option>
+            </select>
+
+            <textarea
+              class="execution-textarea"
+              data-message-input
+              placeholder="Enter command or prompt... (Ctrl+Enter to submit)"
+              aria-label="Execution prompt input"
+            ></textarea>
+          </div>
+
+          <button class="btn btn-primary" data-send-button title="Start execution (Ctrl+Enter)">
+            Execute
+          </button>
+        </div>
+      </main>
+    </div>
   </div>
 
   <!-- Scripts - Order matters! -->
@@ -489,7 +695,10 @@
   <!-- 6. UI Components (no dependencies) -->
   <script src="/gm/js/ui-components.js"></script>
 
-  <!-- 7. Main Client (depends on all above) -->
+  <!-- 7. Conversations Manager (loads conversation history) -->
+  <script src="/gm/js/conversations.js"></script>
+
+  <!-- 8. Main Client (depends on all above) -->
   <script src="/gm/js/client.js"></script>
 
   <!-- Inline initialization -->

package/static/js/conversations.js

@@ -0,0 +1,160 @@
+/**
+ * Conversations Module
+ * Manages conversation list sidebar with real-time updates
+ */
+
+class ConversationManager {
+  constructor() {
+    this.conversations = [];
+    this.activeId = null;
+    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]');
+
+    if (!this.listEl) return;
+
+    this.init();
+  }
+
+  async init() {
+    this.newBtn?.addEventListener('click', () => this.createNew());
+    this.loadConversations();
+    this.setupWebSocketListener();
+
+    // Auto-refresh every 30 seconds
+    setInterval(() => this.loadConversations(), 30000);
+  }
+
+  async loadConversations() {
+    try {
+      const res = await fetch('/gm/api/conversations');
+      if (!res.ok) throw new Error(`HTTP ${res.status}`);
+
+      const data = await res.json();
+      this.conversations = data.conversations || [];
+      this.render();
+    } catch (err) {
+      console.error('Failed to load conversations:', err);
+      this.showEmpty('Failed to load conversations');
+    }
+  }
+
+  render() {
+    if (!this.listEl) return;
+
+    if (this.conversations.length === 0) {
+      this.showEmpty();
+      return;
+    }
+
+    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)
+    );
+
+    sorted.forEach(conv => {
+      const item = this.createConversationItem(conv);
+      this.listEl.appendChild(item);
+    });
+  }
+
+  createConversationItem(conv) {
+    const li = document.createElement('li');
+    li.className = 'conversation-item';
+    if (conv.id === this.activeId) li.classList.add('active');
+
+    const title = conv.title || `Conversation ${conv.id.slice(0, 8)}`;
+    const timestamp = conv.createdAt ? new Date(conv.createdAt).toLocaleDateString() : 'Unknown';
+    const agent = conv.agentId || 'unknown';
+
+    li.innerHTML = `
+      <div class="conversation-item-title">${this.escapeHtml(title)}</div>
+      <div class="conversation-item-meta">${agent} • ${timestamp}</div>
+    `;
+
+    li.addEventListener('click', () => this.select(conv.id));
+    return li;
+  }
+
+  select(convId) {
+    this.activeId = convId;
+
+    // Update active indicator
+    document.querySelectorAll('.conversation-item').forEach(item => {
+      item.classList.remove('active');
+    });
+
+    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 }
+    }));
+  }
+
+  createNew() {
+    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) {
+    // Add to beginning (most recent)
+    this.conversations.unshift(conv);
+    this.render();
+  }
+
+  updateConversation(convId, updates) {
+    const conv = this.conversations.find(c => c.id === convId);
+    if (conv) {
+      Object.assign(conv, updates);
+      this.render();
+    }
+  }
+
+  deleteConversation(convId) {
+    this.conversations = this.conversations.filter(c => c.id !== convId);
+    if (this.activeId === convId) this.activeId = null;
+    this.render();
+  }
+
+  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);
+      }
+    });
+  }
+
+  escapeHtml(text) {
+    const map = { '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;' };
+    return text.replace(/[&<>"']/g, c => map[c]);
+  }
+}
+
+// Initialize when DOM is ready
+if (document.readyState === 'loading') {
+  document.addEventListener('DOMContentLoaded', () => {
+    window.conversationManager = new ConversationManager();
+  });
+} else {
+  window.conversationManager = new ConversationManager();
+}
+
+export { ConversationManager };