agentgui 1.0.620 → 1.0.622

package/README.md

@@ -26,7 +26,7 @@ Multi-agent GUI client for AI coding agents with real-time streaming, WebSocket
 | Kiro CLI | ACP | - |
 | fast-agent | ACP | - |
 
-![Main Interface](docs/screenshot-main.png)
+![Main Interface](docs/screenshot-dark.png)
 
 ## Why AgentGUI?
 
@@ -50,17 +50,13 @@ Modern AI coding requires juggling multiple agents, each in their own terminal.
 
 ### Screenshots
 
-| Main Interface | Chat View |
-|----------------|-----------|
-| ![Main](docs/screenshot-main.png) | ![Chat](docs/screenshot-chat.png) |
+| Light Mode | Dark Mode |
+|------------|-----------|
+| ![Light](docs/screenshot-light.png) | ![Dark](docs/screenshot-dark.png) |
 
-| Files Browser | Terminal View |
-|---------------|---------------|
-| ![Files](docs/screenshot-files.png) | ![Terminal](docs/screenshot-terminal.png) |
-
-| Tools Management | Conversation |
-|------------------|--------------|
-| ![Tools](docs/screenshot-tools-popup.png) | ![Conversation](docs/screenshot-conversation.png) |
+| Active Conversation |
+|---------------------|
+| ![Conversation](docs/screenshot-dark-conversation.png) |
 
 ## Quick Start
 

package/docs/index.html

@@ -193,21 +193,27 @@
     /* Screenshots */
     .screenshot-gallery {
       display: grid;
-      grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
-      gap: 2rem;
+      grid-template-columns: repeat(3, 1fr);
+      gap: 1.5rem;
       margin-top: 3rem;
     }
 
+    .screenshot-gallery.two-col {
+      grid-template-columns: repeat(2, 1fr);
+      margin-top: 1.5rem;
+    }
+
     .screenshot-item {
       border-radius: 12px;
       overflow: hidden;
-      box-shadow: 0 4px 20px rgba(0,0,0,0.1);
+      box-shadow: 0 4px 24px rgba(0,0,0,0.12);
       transition: all 0.3s ease;
+      background: #1f2937;
     }
 
     .screenshot-item:hover {
-      transform: scale(1.03);
-      box-shadow: 0 8px 30px rgba(0,0,0,0.15);
+      transform: translateY(-4px);
+      box-shadow: 0 12px 40px rgba(0,0,0,0.2);
     }
 
     .screenshot-item img {
@@ -217,11 +223,13 @@
     }
 
     .screenshot-caption {
-      padding: 1rem;
-      background: #f9fafb;
+      padding: 0.875rem 1rem;
+      background: #1f2937;
       text-align: center;
       font-weight: 600;
-      color: #374151;
+      color: #e5e7eb;
+      font-size: 0.9rem;
+      letter-spacing: 0.02em;
     }
 
     /* Code Block */
@@ -321,7 +329,8 @@
         grid-template-columns: 1fr;
       }
 
-      .screenshot-gallery {
+      .screenshot-gallery,
+      .screenshot-gallery.two-col {
         grid-template-columns: 1fr;
       }
     }
@@ -332,7 +341,7 @@
   <section class="hero">
     <div class="hero-content">
       <h1>AgentGUI</h1>
-      <p>Multi-agent GUI for AI coding assistants. One interface for all your AI agents.</p>
+      <p>Multi-agent GUI for Claude Code, Gemini CLI, OpenCode &amp; more. Real-time streaming, dark mode, voice, and SQLite persistence.</p>
       
       <div class="badges">
         <img src="https://img.shields.io/npm/v/agentgui?color=brightgreen" alt="npm version">
@@ -443,33 +452,26 @@
 
       <div class="screenshot-gallery">
         <div class="screenshot-item">
-          <img src="screenshot-main.png" alt="Main Interface">
-          <div class="screenshot-caption">Main Interface</div>
+          <img src="screenshot-light.png" alt="Welcome Screen - Light Mode">
+          <div class="screenshot-caption">Welcome Screen · Light Mode</div>
         </div>
-
         <div class="screenshot-item">
-          <img src="screenshot-chat.png" alt="Chat View">
-          <div class="screenshot-caption">Chat & Conversation</div>
+          <img src="screenshot-dark.png" alt="Welcome Screen - Dark Mode">
+          <div class="screenshot-caption">Welcome Screen · Dark Mode</div>
         </div>
-
-        <div class="screenshot-item">
-          <img src="screenshot-files.png" alt="File Browser">
-          <div class="screenshot-caption">File Browser</div>
-        </div>
-
         <div class="screenshot-item">
-          <img src="screenshot-terminal.png" alt="Terminal View">
-          <div class="screenshot-caption">Terminal Execution</div>
+          <img src="screenshot-dark-conversation.png" alt="Live Streaming">
+          <div class="screenshot-caption">Live Agent Streaming</div>
         </div>
-
+      </div>
+      <div class="screenshot-gallery two-col">
         <div class="screenshot-item">
-          <img src="screenshot-tools-popup.png" alt="Tools Management">
-          <div class="screenshot-caption">Tools Management</div>
+          <img src="screenshot-conversation.png" alt="Tool Use & Code Output">
+          <div class="screenshot-caption">Tool Use &amp; Code Output</div>
         </div>
-
         <div class="screenshot-item">
-          <img src="screenshot-conversation.png" alt="Conversation View">
-          <div class="screenshot-caption">Conversation History</div>
+          <img src="screenshot-tools.png" alt="Tools & Extensions">
+          <div class="screenshot-caption">Tools &amp; Extensions Manager</div>
         </div>
       </div>
     </div>

package/lib/claude-runner.js

@@ -115,9 +115,10 @@ class AgentRunner {
       }, timeout);
 
       // Write to stdin if supported
+      // Don't close stdin - keep it open for steering/injection during execution
       if (this.supportsStdin) {
         proc.stdin.write(prompt);
-        proc.stdin.end();
+        // Don't call stdin.end() - agents need open stdin for session/prompt steering
       }
 
       proc.stdout.on('error', () => {});
@@ -1189,6 +1190,33 @@ export async function runClaudeWithStreaming(prompt, cwd, agentId = 'claude-code
   if (!enhancedConfig.systemPrompt) {
     enhancedConfig.systemPrompt = '';
   }
+
+  // Append communication guidelines for all agents
+  const communicationGuidelines = `
+COMMUNICATION STYLE: Minimize output. Only inform the user about:
+- Critical errors that block work
+- User needs to know info (e.g., "port in use", "authentication failed", "file not found")
+- Action required from user
+- Important decisions that affect their work
+
+DO NOT output:
+- Progress updates ("doing X now", "completed Y", "searching for...")
+- Verbose summaries of what was done
+- Status checks or verification messages
+- Detailed explanations unless asked
+- "Working on...", "Looking for...", step-by-step progress
+
+INSTEAD:
+- Run tools silently
+- Show results only when relevant
+- Be conversational and direct
+- Let code/output speak for itself
+`;
+
+  if (!enhancedConfig.systemPrompt.includes('COMMUNICATION STYLE')) {
+    enhancedConfig.systemPrompt = communicationGuidelines + enhancedConfig.systemPrompt;
+  }
+
   if (agentId && agentId !== 'claude-code') {
     const displayAgentId = agentId.split('-·-')[0];
     const agentPrefix = `use ${displayAgentId} subagent to. `;

package/lib/ws-handlers-session.js

@@ -107,55 +107,8 @@ export function register(router, deps) {
       protocol: a.protocol || 'unknown', description: a.description || '', status: 'available'
     }))
   }));
-
-  router.handle('agent.subagents', async (p) => {
-    const agent = discoveredAgents.find(x => x.id === p.id);
-    if (p.id === 'claude-code') {
-      // Directly enumerate skills from ~/.claude/skills directory
-      // Don't try to run 'claude agents list' as it gets intercepted by the running Claude Code instance
-      const skillsDir = path.join(os.homedir(), '.claude', 'skills');
-      try {
-        const entries = fs.readdirSync(skillsDir, { withFileTypes: true });
-        const skills = entries
-          .filter(e => e.isDirectory() || e.isSymbolicLink())
-          .map(e => {
-            // Try to read SKILL.md to get the actual name
-            const md = path.join(skillsDir, e.name, 'SKILL.md');
-            let name = e.name;
-            try {
-              const content = fs.readFileSync(md, 'utf-8');
-              const m = content.match(/^name:\s*(.+)$/m);
-              if (m) name = m[1].trim();
-            } catch (_) {
-              // Fallback: format the directory name as the skill name
-              name = e.name
-                .split(/[\-_]/)
-                .map(w => w.charAt(0).toUpperCase() + w.slice(1))
-                .join(' ');
-            }
-            return { id: e.name, name };
-          })
-          .sort((a, b) => a.name.localeCompare(b.name));
-
-        if (skills.length > 0) {
-          console.log(`[agent.subagents] Found ${skills.length} Claude Code skills:`, skills.map(s => s.name).join(', '));
-          return { subAgents: skills };
-        }
-        return { subAgents: [] };
-      } catch (err) {
-        console.error(`[agent.subagents] Error reading skills directory:`, err.message);
-        return { subAgents: [] };
-      }
-    }
-    if (!agent || agent.protocol !== 'acp') return { subAgents: [] };
-    const port = await ensureRunning(p.id);
-    if (!port) return { subAgents: [] };
-    try {
-      const data = await acpFetch(port, '/agent');
-      const list = Array.isArray(data) ? data : (data?.agents || []);
-      return { subAgents: list.map(a => ({ id: a.name || a.agent_id || a.id, name: a.name || a.agent_id || a.id })) };
-    } catch (_) { return { subAgents: [] }; }
-  });
+  // Note: agent.subagents is handled by ws-handlers-util.js which is registered after this file
+  // Keeping this note to avoid duplicate handler registration
 
   router.handle('agent.get', (p) => {
     const a = discoveredAgents.find(x => x.id === p.id);
@@ -173,7 +126,7 @@ export function register(router, deps) {
     const cached = modelCache.get(p.id);
     if (cached && (Date.now() - cached.ts) < 300000) return { models: cached.models };
     let models = [];
-    if (p.id === 'claude-code') {
+    if (p.id === 'claude-code' || p.id === 'cli-claude') {
       models = [
         { id: 'haiku', label: 'Haiku' },
         { id: 'sonnet', label: 'Sonnet' },

package/lib/ws-handlers-util.js

@@ -274,9 +274,45 @@ export function register(router, deps) {
     const { id } = p;
     if (!id) err(400, 'Missing agent id');
 
+    // For Claude Code, read skills from ~/.claude/skills directory
+    if (id === 'cli-claude') {
+      const skillsDir = path.join(os.homedir(), '.claude', 'skills');
+      try {
+        const entries = fs.readdirSync(skillsDir, { withFileTypes: true });
+        const skills = entries
+          .filter(e => e.isDirectory() || e.isSymbolicLink())
+          .map(e => {
+            // Try to read SKILL.md to get the actual name
+            const md = path.join(skillsDir, e.name, 'SKILL.md');
+            let name = e.name;
+            try {
+              const content = fs.readFileSync(md, 'utf-8');
+              const m = content.match(/^name:\s*(.+)$/m);
+              if (m) name = m[1].trim();
+            } catch (_) {
+              // Fallback: format the directory name as the skill name
+              name = e.name
+                .split(/[\-_]/)
+                .map(w => w.charAt(0).toUpperCase() + w.slice(1))
+                .join(' ');
+            }
+            return { id: e.name, name };
+          })
+          .sort((a, b) => a.name.localeCompare(b.name));
+
+        if (skills.length > 0) {
+          console.log(`[agent.subagents] Found ${skills.length} Claude Code skills:`, skills.map(s => s.name).join(', '));
+          return { subAgents: skills };
+        }
+        return { subAgents: [] };
+      } catch (err) {
+        console.error(`[agent.subagents] Error reading skills directory:`, err.message);
+        return { subAgents: [] };
+      }
+    }
+
     // Map CLI agent IDs to their corresponding plugin sub-agents
     const subAgentMap = {
-      'cli-claude': [{ id: 'gm-cc', name: 'GM Claude' }],
       'cli-opencode': [{ id: 'gm-oc', name: 'GM OpenCode' }],
       'cli-gemini': [{ id: 'gm-gc', name: 'GM Gemini' }],
       'cli-kilo': [{ id: 'gm-kilo', name: 'GM Kilo' }],

package/package.json

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

package/static/index.html

@@ -1771,10 +1771,8 @@
       margin: 0;
       border-radius: 0.375rem;
       overflow: hidden;
-      background: #f3f4f6;
     }
     html.dark .folded-tool {
-      background: #262626;
     }
     .folded-tool-bar {
       display: flex;

package/static/js/client.js

@@ -283,11 +283,17 @@ class AgentGUIClient {
             const latestConv = this.state.conversations[0];
             console.log('Loading latest conversation instead:', latestConv.id);
             return this.loadConversationMessages(latestConv.id);
+          } else {
+            // No conversations available - show welcome screen
+            this._showWelcomeScreen();
           }
         }).finally(() => {
           this._isLoadingConversation = false;
         });
       }
+    } else {
+      // No conversation in URL - show welcome screen
+      this._showWelcomeScreen();
     }
   }
 
@@ -599,8 +605,7 @@ class AgentGUIClient {
       this.updateUrlForConversation(null);
       this.stopChunkPolling();
       this.enableControls();
-      const outputEl = document.getElementById('output');
-      if (outputEl) outputEl.innerHTML = '';
+      this._showWelcomeScreen();
       if (this.ui.messageInput) {
         this.ui.messageInput.value = '';
         this.ui.messageInput.style.height = 'auto';
@@ -904,18 +909,30 @@ class AgentGUIClient {
           console.warn('Failed to load prior messages for streaming view:', e);
         }
       }
-      const streamingDiv = document.createElement('div');
-      streamingDiv.className = 'message message-assistant streaming-message';
-      streamingDiv.id = `streaming-${data.sessionId}`;
-      streamingDiv.innerHTML = `
-        <div class="message-role">Assistant</div>
-        <div class="message-blocks streaming-blocks"></div>
-        <div class="streaming-indicator" style="display:flex;align-items:center;gap:0.5rem;padding:0.5rem 0;color:var(--color-text-secondary);font-size:0.875rem;">
-          <span class="animate-spin" style="display:inline-block;width:1rem;height:1rem;border:2px solid var(--color-border);border-top-color:var(--color-primary);border-radius:50%;"></span>
-          <span class="streaming-indicator-label">Thinking...</span>
-        </div>
-      `;
-      messagesEl.appendChild(streamingDiv);
+      let streamingDiv = document.getElementById(`streaming-${data.sessionId}`);
+      if (!streamingDiv) {
+        streamingDiv = document.createElement('div');
+        streamingDiv.className = 'message message-assistant streaming-message';
+        streamingDiv.id = `streaming-${data.sessionId}`;
+        streamingDiv.innerHTML = `
+          <div class="message-role">Assistant</div>
+          <div class="message-blocks streaming-blocks"></div>
+          <div class="streaming-indicator" style="display:flex;align-items:center;gap:0.5rem;padding:0.5rem 0;color:var(--color-text-secondary);font-size:0.875rem;">
+            <span class="animate-spin" style="display:inline-block;width:1rem;height:1rem;border:2px solid var(--color-border);border-top-color:var(--color-primary);border-radius:50%;"></span>
+            <span class="streaming-indicator-label">Thinking...</span>
+          </div>
+        `;
+        messagesEl.appendChild(streamingDiv);
+      } else {
+        // Reuse existing div - ensure streaming class and single indicator
+        streamingDiv.classList.add('streaming-message');
+        streamingDiv.querySelectorAll('.streaming-indicator').forEach(ind => ind.remove());
+        const indDiv = document.createElement('div');
+        indDiv.className = 'streaming-indicator';
+        indDiv.style = 'display:flex;align-items:center;gap:0.5rem;padding:0.5rem 0;color:var(--color-text-secondary);font-size:0.875rem;';
+        indDiv.innerHTML = `<span class="animate-spin" style="display:inline-block;width:1rem;height:1rem;border:2px solid var(--color-border);border-top-color:var(--color-primary);border-radius:50%;"></span><span class="streaming-indicator-label">Thinking...</span>`;
+        streamingDiv.appendChild(indDiv);
+      }
       this.scrollToBottom(true);
     }
 
@@ -1144,10 +1161,13 @@ class AgentGUIClient {
     if (queueEl) queueEl.remove();
 
     const sessionId = data.sessionId || this.state.currentSession?.id;
+    // Remove ALL streaming indicators from the entire messages container
+    const outputEl2 = document.getElementById('output');
+    if (outputEl2) {
+      outputEl2.querySelectorAll('.streaming-indicator').forEach(ind => ind.remove());
+    }
     const streamingEl = document.getElementById(`streaming-${sessionId}`);
     if (streamingEl) {
-      const indicator = streamingEl.querySelector('.streaming-indicator');
-      if (indicator) indicator.remove();
       streamingEl.classList.remove('streaming-message');
       const prevTextEl = streamingEl.querySelector('.streaming-text-current');
       if (prevTextEl) prevTextEl.classList.remove('streaming-text-current');
@@ -1860,6 +1880,54 @@ class AgentGUIClient {
     });
   }
 
+  /**
+   * Show native loading spinner on document element
+   */
+  showLoadingSpinner() {
+    document.documentElement.style.pointerEvents = 'auto';
+    // Show native CSS loading indicator (not removing, just visual cue)
+    const indicator = document.querySelector('[data-model-dl-indicator]');
+    if (indicator && !indicator.classList.contains('visible')) {
+      indicator.classList.add('visible');
+    }
+  }
+
+  /**
+   * Hide native loading spinner
+   */
+  hideLoadingSpinner() {
+    const indicator = document.querySelector('[data-model-dl-indicator]');
+    if (indicator && indicator.classList.contains('visible')) {
+      indicator.classList.remove('visible');
+    }
+  }
+
+  /**
+   * Show welcome screen when no conversation is selected
+   */
+  _showWelcomeScreen() {
+    const outputEl = document.getElementById('output');
+    if (!outputEl) return;
+    outputEl.innerHTML = `
+      <div style="display:flex;align-items:center;justify-content:center;height:100%;flex-direction:column;gap:2rem;padding:2rem;">
+        <div style="text-align:center;">
+          <h1 style="margin:0;font-size:2.5rem;color:var(--color-text-primary);">Welcome to AgentGUI</h1>
+          <p style="margin:1rem 0 0 0;font-size:1.1rem;color:var(--color-text-secondary);">Start a new conversation or select one from the sidebar</p>
+        </div>
+        <div style="display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1rem;max-width:600px;">
+          <div style="padding:1.5rem;border-radius:0.5rem;background:var(--color-bg-secondary);border:1px solid var(--color-border);">
+            <h3 style="margin:0 0 0.5rem 0;color:var(--color-primary);">New Conversation</h3>
+            <p style="margin:0;font-size:0.9rem;color:var(--color-text-secondary);">Create a new chat with any AI agent</p>
+          </div>
+          <div style="padding:1.5rem;border-radius:0.5rem;background:var(--color-bg-secondary);border:1px solid var(--color-border);">
+            <h3 style="margin:0 0 0.5rem 0;color:var(--color-primary);">Available Agents</h3>
+            <p style="margin:0;font-size:0.9rem;color:var(--color-text-secondary);">Claude Code, Gemini, OpenCode, and more</p>
+          </div>
+        </div>
+      </div>
+    `;
+  }
+
   _showSkeletonLoading(conversationId) {
     const outputEl = document.getElementById('output');
     if (!outputEl) return;
@@ -1883,6 +1951,8 @@ class AgentGUIClient {
         </div>
       </div>
     `;
+    // Keep loading spinner visible during hydration
+    this.showLoadingSpinner();
   }
 
   async streamToConversation(conversationId, prompt, agentId, model, subAgent) {
@@ -2248,10 +2318,14 @@ class AgentGUIClient {
           .map(a => `<option value="${a.id}">${a.name.split(/[\s\-]+/)[0]}</option>`)
           .join('');
         this.ui.agentSelector.style.display = 'inline-block';
+        console.log(`[Agent Selector] Loaded ${subAgents.length} sub-agents for ${cliAgentId}`);
         this.loadModelsForAgent(cliAgentId);
+      } else {
+        console.log(`[Agent Selector] No sub-agents found for ${cliAgentId}`);
       }
-    } catch (_) {
+    } catch (err) {
       // No sub-agents available for this CLI tool — keep hidden
+      console.warn(`[Agent Selector] Failed to load sub-agents for ${cliAgentId}:`, err.message);
     }
   }
 
@@ -2722,6 +2796,8 @@ class AgentGUIClient {
           this.conversationCache.delete(conversationId);
           this.syncPromptState(conversationId);
           this.restoreScrollPosition(conversationId);
+          // Hydration complete - hide loading spinner
+          this.hideLoadingSpinner();
           // Prompt state is immutable: computed from shouldResumeStreaming via syncPromptState
           // Do not call enableControls/disableControls here - prompt state is determined by streaming status
           return;
@@ -2734,7 +2810,9 @@ class AgentGUIClient {
 
       let fullData;
       try {
-        fullData = await window.wsClient.rpc('conv.full', { id: conversationId });
+        // Load only recent chunks initially (lazy load older ones)
+        // Use chunkLimit of 50 to make page load faster
+        fullData = await window.wsClient.rpc('conv.full', { id: conversationId, chunkLimit: 50 });
       } catch (e) {
         if (e.code === 404) {
           console.warn('Conversation no longer exists:', conversationId);
@@ -2967,9 +3045,12 @@ class AgentGUIClient {
 
         this.restoreScrollPosition(conversationId);
         this.setupScrollUpDetection(conversationId);
+        // Hydration complete - hide loading spinner
+        this.hideLoadingSpinner();
       }
     } catch (error) {
       if (error.name === 'AbortError') return;
+      this.hideLoadingSpinner();
       console.error('Failed to load conversation messages:', error);
       // Resume from last successful conversation if available, or fall back to any available conversation
       const fallbackConv = prevConversationId ? prevConversationId : availableFallback?.id;