agentgui 1.0.332 → 1.0.334

package/package.json

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

package/server.js

@@ -1756,6 +1756,71 @@ const server = http.createServer(async (req, res) => {
       return;
     }
 
+    if (pathOnly === '/api/agents/auth-status' && req.method === 'GET') {
+      const statuses = discoveredAgents.map(agent => {
+        const status = { id: agent.id, name: agent.name, authenticated: false, detail: '' };
+        try {
+          if (agent.id === 'claude-code') {
+            const credFile = path.join(os.homedir(), '.claude', '.credentials.json');
+            if (fs.existsSync(credFile)) {
+              const creds = JSON.parse(fs.readFileSync(credFile, 'utf-8'));
+              if (creds.claudeAiOauth && creds.claudeAiOauth.expiresAt > Date.now()) {
+                status.authenticated = true;
+                status.detail = creds.claudeAiOauth.subscriptionType || 'authenticated';
+              } else {
+                status.detail = 'expired';
+              }
+            } else {
+              status.detail = 'no credentials';
+            }
+          } else if (agent.id === 'gemini') {
+            const oauthFile = path.join(os.homedir(), '.gemini', 'oauth_creds.json');
+            const acctFile = path.join(os.homedir(), '.gemini', 'google_accounts.json');
+            let hasOAuth = false;
+            if (fs.existsSync(oauthFile)) {
+              try {
+                const creds = JSON.parse(fs.readFileSync(oauthFile, 'utf-8'));
+                if (creds.refresh_token || creds.access_token) hasOAuth = true;
+              } catch (_) {}
+            }
+            if (fs.existsSync(acctFile)) {
+              const accts = JSON.parse(fs.readFileSync(acctFile, 'utf-8'));
+              if (accts.active) {
+                status.authenticated = true;
+                status.detail = accts.active;
+              } else if (hasOAuth) {
+                status.authenticated = true;
+                status.detail = 'oauth';
+              } else {
+                status.detail = 'logged out';
+              }
+            } else if (hasOAuth) {
+              status.authenticated = true;
+              status.detail = 'oauth';
+            } else {
+              status.detail = 'no credentials';
+            }
+          } else if (agent.id === 'opencode') {
+            const out = execSync('opencode auth list 2>&1', { encoding: 'utf-8', timeout: 5000 });
+            const countMatch = out.match(/(\d+)\s+credentials?/);
+            if (countMatch && parseInt(countMatch[1], 10) > 0) {
+              status.authenticated = true;
+              status.detail = countMatch[1] + ' credential(s)';
+            } else {
+              status.detail = 'no credentials';
+            }
+          } else {
+            status.detail = 'unknown';
+          }
+        } catch (e) {
+          status.detail = 'check failed';
+        }
+        return status;
+      });
+      sendJSON(req, res, 200, { agents: statuses });
+      return;
+    }
+
     const agentByIdMatch = pathOnly.match(/^\/api\/agents\/([^/]+)$/);
     if (agentByIdMatch && req.method === 'GET') {
       const agentId = agentByIdMatch[1];
@@ -1826,71 +1891,6 @@ const server = http.createServer(async (req, res) => {
       return;
     }
 
-    if (pathOnly === '/api/agents/auth-status' && req.method === 'GET') {
-      const statuses = discoveredAgents.map(agent => {
-        const status = { id: agent.id, name: agent.name, authenticated: false, detail: '' };
-        try {
-          if (agent.id === 'claude-code') {
-            const credFile = path.join(os.homedir(), '.claude', '.credentials.json');
-            if (fs.existsSync(credFile)) {
-              const creds = JSON.parse(fs.readFileSync(credFile, 'utf-8'));
-              if (creds.claudeAiOauth && creds.claudeAiOauth.expiresAt > Date.now()) {
-                status.authenticated = true;
-                status.detail = creds.claudeAiOauth.subscriptionType || 'authenticated';
-              } else {
-                status.detail = 'expired';
-              }
-            } else {
-              status.detail = 'no credentials';
-            }
-          } else if (agent.id === 'gemini') {
-            const oauthFile = path.join(os.homedir(), '.gemini', 'oauth_creds.json');
-            const acctFile = path.join(os.homedir(), '.gemini', 'google_accounts.json');
-            let hasOAuth = false;
-            if (fs.existsSync(oauthFile)) {
-              try {
-                const creds = JSON.parse(fs.readFileSync(oauthFile, 'utf-8'));
-                if (creds.refresh_token || creds.access_token) hasOAuth = true;
-              } catch (_) {}
-            }
-            if (fs.existsSync(acctFile)) {
-              const accts = JSON.parse(fs.readFileSync(acctFile, 'utf-8'));
-              if (accts.active) {
-                status.authenticated = true;
-                status.detail = accts.active;
-              } else if (hasOAuth) {
-                status.authenticated = true;
-                status.detail = 'oauth';
-              } else {
-                status.detail = 'logged out';
-              }
-            } else if (hasOAuth) {
-              status.authenticated = true;
-              status.detail = 'oauth';
-            } else {
-              status.detail = 'no credentials';
-            }
-          } else if (agent.id === 'opencode') {
-            const out = execSync('opencode auth list 2>&1', { encoding: 'utf-8', timeout: 5000 });
-            const countMatch = out.match(/(\d+)\s+credentials?/);
-            if (countMatch && parseInt(countMatch[1], 10) > 0) {
-              status.authenticated = true;
-              status.detail = countMatch[1] + ' credential(s)';
-            } else {
-              status.detail = 'no credentials';
-            }
-          } else {
-            status.detail = 'unknown';
-          }
-        } catch (e) {
-          status.detail = 'check failed';
-        }
-        return status;
-      });
-      sendJSON(req, res, 200, { agents: statuses });
-      return;
-    }
-
     if (pathOnly === '/api/gemini-oauth/start' && req.method === 'POST') {
       try {
         const result = await startGeminiOAuth(req);

package/static/index.html

@@ -46,6 +46,8 @@
       --color-text-primary: #f9fafb;
       --color-text-secondary: #d1d5db;
       --color-border: #374151;
+      --color-primary: #6b7280;
+      --color-primary-dark: #4b5563;
     }
 
     html, body {
@@ -496,6 +498,26 @@
     }
     .terminal-output { flex: 1; overflow: hidden; }
 
+    .models-container {
+      flex: 1; display: flex; flex-direction: column; overflow-y: auto;
+      align-items: flex-start; padding: 2rem;
+    }
+    .models-panel {
+      display: flex; flex-direction: column; gap: 1rem;
+      background: var(--color-bg-secondary); border-radius: 0.5rem;
+      padding: 1.5rem; min-width: 280px;
+    }
+    .models-panel h3 { margin: 0 0 0.5rem; font-size: 1rem; font-weight: 600; }
+    .models-panel label {
+      display: flex; flex-direction: column; gap: 0.25rem;
+      font-size: 0.8rem; color: var(--color-text-secondary); font-weight: 500;
+    }
+    .models-panel select {
+      padding: 0.5rem; border: 1px solid var(--color-border);
+      border-radius: 0.375rem; background: var(--color-bg-primary);
+      color: var(--color-text-primary); font-size: 0.875rem; cursor: pointer;
+    }
+
     /* --- View toggle bar --- */
     .view-toggle-bar {
       display: flex;
@@ -3024,6 +3046,7 @@
         <button class="view-toggle-btn active" data-view="chat">Chat</button>
         <button class="view-toggle-btn" data-view="files">Files</button>
         <button class="view-toggle-btn" data-view="voice" style="display:none;">Voice</button>
+        <button class="view-toggle-btn" data-view="models">Models</button>
         <button class="view-toggle-btn" data-view="terminal" id="terminalTabBtn" style="display:none;">Terminal</button>
       </div>
 
@@ -3045,6 +3068,15 @@
         <iframe id="fileBrowserIframe" class="file-browser-iframe"></iframe>
       </div>
 
+      <!-- Models/Agent selector view -->
+      <div id="modelsContainer" class="models-container" style="display:none;">
+        <div class="models-panel">
+          <h3>Agent &amp; Model</h3>
+          <label>Agent<select class="agent-selector" data-agent-selector-models title="Select agent"></select></label>
+          <label>Model<select class="model-selector" data-model-selector-models title="Select model" data-empty="true"></select></label>
+        </div>
+      </div>
+
       <!-- Terminal output view -->
       <div id="terminalContainer" class="terminal-container" style="display:none;">
         <div id="terminalOutput" class="terminal-output"></div>

package/static/js/features.js

@@ -346,6 +346,7 @@
     var fileIframe = document.getElementById('fileBrowserIframe');
     var voiceContainer = document.getElementById('voiceContainer');
     var terminalContainer = document.getElementById('terminalContainer');
+    var modelsContainer = document.getElementById('modelsContainer');
 
     if (!bar) return;
 
@@ -358,6 +359,7 @@
     if (fileBrowser) fileBrowser.style.display = view === 'files' ? 'flex' : 'none';
     if (voiceContainer) voiceContainer.style.display = view === 'voice' ? 'flex' : 'none';
     if (terminalContainer) terminalContainer.style.display = view === 'terminal' ? 'flex' : 'none';
+    if (modelsContainer) modelsContainer.style.display = view === 'models' ? 'flex' : 'none';
 
     if (view === 'files' && fileIframe && currentConversation) {
       var src = BASE + '/files/' + currentConversation + '/';
@@ -372,9 +374,29 @@
       window.voiceModule.deactivate();
     }
 
+    if (view === 'models') syncModelsPanelFromMain();
+
     window.dispatchEvent(new CustomEvent('view-switched', { detail: { view: view } }));
   }
 
+  function syncModelsPanelFromMain() {
+    var mainAgent = document.querySelector('[data-agent-selector]');
+    var mainModel = document.querySelector('[data-model-selector]');
+    var panelAgent = document.querySelector('[data-agent-selector-models]');
+    var panelModel = document.querySelector('[data-model-selector-models]');
+    if (!panelAgent || !panelModel) return;
+    if (mainAgent && panelAgent.innerHTML !== mainAgent.innerHTML) {
+      panelAgent.innerHTML = mainAgent.innerHTML;
+      panelAgent.value = mainAgent.value;
+    }
+    if (mainModel && panelModel.innerHTML !== mainModel.innerHTML) {
+      panelModel.innerHTML = mainModel.innerHTML;
+      panelModel.value = mainModel.value;
+    }
+    panelAgent.onchange = function() { if (mainAgent) { mainAgent.value = panelAgent.value; mainAgent.dispatchEvent(new Event('change')); } };
+    panelModel.onchange = function() { if (mainModel) { mainModel.value = panelModel.value; mainModel.dispatchEvent(new Event('change')); } };
+  }
+
   function updateViewToggleVisibility() {
     var bar = document.getElementById('viewToggleBar');
     if (!bar) return;

package/static/js/streaming-renderer.js

@@ -1213,6 +1213,7 @@ class StreamingRenderer {
     const details = document.createElement('details');
     details.className = 'folded-tool' + (isError ? ' folded-tool-error' : ' folded-tool-success');
     details.dataset.eventType = 'tool_result';
+    if (!isError) details.open = true;
     if (block.tool_use_id) details.dataset.toolUseId = block.tool_use_id;
     details.classList.add(this._getBlockTypeClass('tool_result'));