agentgui 1.0.335 → 1.0.337

package/package.json

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

package/server.js

@@ -3419,6 +3419,35 @@ wss.on('connection', (ws, req) => {
             requestId: data.requestId,
             timestamp: Date.now()
           }));
+        } else if (data.type === 'terminal_start') {
+          if (ws.terminalProc) {
+            try { ws.terminalProc.kill(); } catch(e) {}
+          }
+          const { spawn } = require('child_process');
+          const shell = process.env.SHELL || '/bin/bash';
+          const cwd = data.cwd || process.env.STARTUP_CWD || process.env.HOME || '/';
+          const proc = spawn(shell, [], { cwd, env: { ...process.env, TERM: 'xterm-256color', COLORTERM: 'truecolor' }, stdio: ['pipe', 'pipe', 'pipe'] });
+          ws.terminalProc = proc;
+          proc.stdout.on('data', (chunk) => {
+            if (ws.readyState === 1) ws.send(JSON.stringify({ type: 'terminal_output', data: chunk.toString('base64'), encoding: 'base64' }));
+          });
+          proc.stderr.on('data', (chunk) => {
+            if (ws.readyState === 1) ws.send(JSON.stringify({ type: 'terminal_output', data: chunk.toString('base64'), encoding: 'base64' }));
+          });
+          proc.on('exit', (code) => {
+            if (ws.readyState === 1) ws.send(JSON.stringify({ type: 'terminal_exit', code }));
+            ws.terminalProc = null;
+          });
+          ws.send(JSON.stringify({ type: 'terminal_started', timestamp: Date.now() }));
+        } else if (data.type === 'terminal_input') {
+          if (ws.terminalProc && ws.terminalProc.stdin.writable) {
+            ws.terminalProc.stdin.write(Buffer.from(data.data, 'base64'));
+          }
+        } else if (data.type === 'terminal_stop') {
+          if (ws.terminalProc) {
+            try { ws.terminalProc.kill(); } catch(e) {}
+            ws.terminalProc = null;
+          }
         }
       } catch (e) {
         console.error('WebSocket message parse error:', e.message);
@@ -3432,6 +3461,7 @@ wss.on('connection', (ws, req) => {
 
     ws.on('pong', () => { ws.isAlive = true; });
     ws.on('close', () => {
+      if (ws.terminalProc) { try { ws.terminalProc.kill(); } catch(e) {} ws.terminalProc = null; }
       syncClients.delete(ws);
       for (const sub of ws.subscriptions) {
         const idx = subscriptionIndex.get(sub);

package/static/index.html

@@ -63,7 +63,6 @@
     .app-shell {
       display: flex;
       height: 100dvh;
-      height: 100vh;
       overflow: hidden;
       padding-top: env(safe-area-inset-top);
       padding-bottom: env(safe-area-inset-bottom);
@@ -496,7 +495,7 @@
     .terminal-container {
       flex: 1; display: flex; flex-direction: column; overflow: hidden; background: #1e1e1e;
     }
-    .terminal-output { flex: 1; overflow: hidden; }
+    .terminal-output { flex: 1; overflow: hidden; position: relative; }
 
     .models-container {
       flex: 1; display: flex; flex-direction: column; overflow-y: auto;
@@ -835,6 +834,9 @@
       font-size: 0.8rem;
       cursor: pointer;
       flex-shrink: 0;
+      width: auto;
+      min-width: 80px;
+      max-width: 200px;
     }
 
     .agent-selector:disabled, .model-selector:disabled {
@@ -852,7 +854,9 @@
       font-size: 0.8rem;
       cursor: pointer;
       flex-shrink: 0;
-      max-width: 160px;
+      width: auto;
+      min-width: 80px;
+      max-width: 220px;
     }
 
     .model-selector:empty, .model-selector[data-empty="true"] {
@@ -2051,24 +2055,24 @@
     .tool-color-default > .folded-tool-body { border-top-color: #a5f3fc; }
     html.dark .tool-color-default > .folded-tool-body { border-top-color: #164e63; }
 
-    .block-type-tool_result { background: #f0fdf4; }
-    html.dark .block-type-tool_result { background: #0a1f0f; }
-    .block-type-tool_result .tool-result-status { background: #dcfce7; }
-    html.dark .block-type-tool_result .tool-result-status { background: #0f2b1a; }
+    .block-type-tool_result { background: #f3f4f6; }
+    html.dark .block-type-tool_result { background: #1f2937; }
+    .block-type-tool_result .tool-result-status { background: #e5e7eb; }
+    html.dark .block-type-tool_result .tool-result-status { background: #374151; }
     .block-type-tool_result .folded-tool-icon { color: #16a34a; }
     html.dark .block-type-tool_result .folded-tool-icon { color: #4ade80; }
-    .block-type-tool_result .folded-tool-name { color: #166534; }
-    html.dark .block-type-tool_result .folded-tool-name { color: #86efac; }
-    .block-type-tool_result > .folded-tool-body { border-top-color: #bbf7d0; }
-    html.dark .block-type-tool_result > .folded-tool-body { border-top-color: #166534; }
-    .block-type-tool_result.tool-result-error { background: #fef2f2; }
-    html.dark .block-type-tool_result.tool-result-error { background: #1c0f0f; }
-    .block-type-tool_result.tool-result-error .tool-result-status { background: #fee2e2; }
-    html.dark .block-type-tool_result.tool-result-error .tool-result-status { background: #2c1010; }
+    .block-type-tool_result .folded-tool-name { color: #374151; }
+    html.dark .block-type-tool_result .folded-tool-name { color: #d1d5db; }
+    .block-type-tool_result > .folded-tool-body { border-top-color: #d1d5db; }
+    html.dark .block-type-tool_result > .folded-tool-body { border-top-color: #4b5563; }
+    .block-type-tool_result.tool-result-error { background: #f3f4f6; }
+    html.dark .block-type-tool_result.tool-result-error { background: #1f2937; }
+    .block-type-tool_result.tool-result-error .tool-result-status { background: #e5e7eb; }
+    html.dark .block-type-tool_result.tool-result-error .tool-result-status { background: #374151; }
     .block-type-tool_result.tool-result-error .folded-tool-icon { color: #dc2626; }
     html.dark .block-type-tool_result.tool-result-error .folded-tool-icon { color: #f87171; }
-    .block-type-tool_result.tool-result-error .folded-tool-name { color: #991b1b; }
-    html.dark .block-type-tool_result.tool-result-error .folded-tool-name { color: #fca5a5; }
+    .block-type-tool_result.tool-result-error .folded-tool-name { color: #374151; }
+    html.dark .block-type-tool_result.tool-result-error .folded-tool-name { color: #d1d5db; }
 
     .block-type-code { background: #1e293b; }
     html.dark .block-type-code { background: #0f172a; }
@@ -2176,51 +2180,51 @@
 
     /* --- Tool result success styling in body --- */
     .tool-result-success .tool-result-status {
-      background: #dcfce7;
+      background: #e5e7eb;
       padding: 0.4rem 0.75rem;
     }
     html.dark .tool-result-success .tool-result-status {
-      background: #0f2b1a;
+      background: #374151;
     }
     .tool-result-success .folded-tool-icon { color: #16a34a; }
     html.dark .tool-result-success .folded-tool-icon { color: #4ade80; }
-    .tool-result-success .folded-tool-name { color: #166534; font-weight: 600; }
-    html.dark .tool-result-success .folded-tool-name { color: #86efac; }
+    .tool-result-success .folded-tool-name { color: #374151; font-weight: 600; }
+    html.dark .tool-result-success .folded-tool-name { color: #d1d5db; }
 
     /* --- Tool_use parent: has-success / has-error indicators on header --- */
-    .folded-tool.has-success { background: #f0fdf4; }
-    html.dark .folded-tool.has-success { background: #0a1f0f; }
-    .folded-tool.has-success > .folded-tool-bar { background: #dcfce7; }
-    html.dark .folded-tool.has-success > .folded-tool-bar { background: #0f2b1a; }
-    .folded-tool.has-success > .folded-tool-bar:hover { background: #bbf7d0; }
-    html.dark .folded-tool.has-success > .folded-tool-bar:hover { background: #14532d; }
+    .folded-tool.has-success { background: #f3f4f6; }
+    html.dark .folded-tool.has-success { background: #1f2937; }
+    .folded-tool.has-success > .folded-tool-bar { background: #e5e7eb; }
+    html.dark .folded-tool.has-success > .folded-tool-bar { background: #374151; }
+    .folded-tool.has-success > .folded-tool-bar:hover { background: #d1d5db; }
+    html.dark .folded-tool.has-success > .folded-tool-bar:hover { background: #4b5563; }
     .folded-tool.has-success > .folded-tool-bar::before { color: #16a34a; }
     html.dark .folded-tool.has-success > .folded-tool-bar::before { color: #4ade80; }
     .folded-tool.has-success .folded-tool-icon { color: #16a34a; }
     html.dark .folded-tool.has-success .folded-tool-icon { color: #4ade80; }
-    .folded-tool.has-success .folded-tool-name { color: #166534; }
-    html.dark .folded-tool.has-success .folded-tool-name { color: #86efac; }
-    .folded-tool.has-success .folded-tool-desc { color: #15803d; }
-    html.dark .folded-tool.has-success .folded-tool-desc { color: #4ade80; }
-    .folded-tool.has-success > .folded-tool-body { border-top-color: #bbf7d0; }
-    html.dark .folded-tool.has-success > .folded-tool-body { border-top-color: #166534; }
-
-    .folded-tool.has-error { background: #fef2f2; }
-    html.dark .folded-tool.has-error { background: #1c0f0f; }
-    .folded-tool.has-error > .folded-tool-bar { background: #fee2e2; }
-    html.dark .folded-tool.has-error > .folded-tool-bar { background: #2c1010; }
-    .folded-tool.has-error > .folded-tool-bar:hover { background: #fecaca; }
-    html.dark .folded-tool.has-error > .folded-tool-bar:hover { background: #451a1a; }
+    .folded-tool.has-success .folded-tool-name { color: #374151; }
+    html.dark .folded-tool.has-success .folded-tool-name { color: #d1d5db; }
+    .folded-tool.has-success .folded-tool-desc { color: #6b7280; }
+    html.dark .folded-tool.has-success .folded-tool-desc { color: #9ca3af; }
+    .folded-tool.has-success > .folded-tool-body { border-top-color: #d1d5db; }
+    html.dark .folded-tool.has-success > .folded-tool-body { border-top-color: #4b5563; }
+
+    .folded-tool.has-error { background: #f3f4f6; }
+    html.dark .folded-tool.has-error { background: #1f2937; }
+    .folded-tool.has-error > .folded-tool-bar { background: #e5e7eb; }
+    html.dark .folded-tool.has-error > .folded-tool-bar { background: #374151; }
+    .folded-tool.has-error > .folded-tool-bar:hover { background: #d1d5db; }
+    html.dark .folded-tool.has-error > .folded-tool-bar:hover { background: #4b5563; }
     .folded-tool.has-error > .folded-tool-bar::before { color: #ef4444; }
     html.dark .folded-tool.has-error > .folded-tool-bar::before { color: #f87171; }
     .folded-tool.has-error .folded-tool-icon { color: #ef4444; }
     html.dark .folded-tool.has-error .folded-tool-icon { color: #f87171; }
-    .folded-tool.has-error .folded-tool-name { color: #991b1b; }
-    html.dark .folded-tool.has-error .folded-tool-name { color: #fca5a5; }
-    .folded-tool.has-error .folded-tool-desc { color: #b91c1c; }
-    html.dark .folded-tool.has-error .folded-tool-desc { color: #f87171; }
-    .folded-tool.has-error > .folded-tool-body { border-top-color: #fecaca; }
-    html.dark .folded-tool.has-error > .folded-tool-body { border-top-color: #7f1d1d; }
+    .folded-tool.has-error .folded-tool-name { color: #374151; }
+    html.dark .folded-tool.has-error .folded-tool-name { color: #d1d5db; }
+    .folded-tool.has-error .folded-tool-desc { color: #6b7280; }
+    html.dark .folded-tool.has-error .folded-tool-desc { color: #9ca3af; }
+    .folded-tool.has-error > .folded-tool-body { border-top-color: #d1d5db; }
+    html.dark .folded-tool.has-error > .folded-tool-body { border-top-color: #4b5563; }
 
     /* --- Success/Error status icons in header --- */
     .folded-tool.has-success > .folded-tool-bar .folded-tool-icon::after,
@@ -3042,12 +3046,12 @@
       </div>
 
       <!-- View toggle bar (hidden by default) -->
-      <div class="view-toggle-bar" id="viewToggleBar" style="display:none;">
+      <div class="view-toggle-bar" id="viewToggleBar">
         <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>
+        <button class="view-toggle-btn" data-view="terminal" id="terminalTabBtn">Terminal</button>
       </div>
 
       <!-- Messages scroll area -->
@@ -3189,6 +3193,7 @@
   <script defer src="/gm/js/client.js"></script>
   <script type="module" src="/gm/js/voice.js"></script>
   <script defer src="/gm/js/features.js"></script>
+<script defer src="/gm/js/terminal.js"></script>
   <script defer src="/gm/js/script-runner.js"></script>
   <script defer src="/gm/js/agent-auth.js"></script>
 

package/static/js/terminal.js

@@ -0,0 +1,105 @@
+(function() {
+  var ws = null;
+  var term = null;
+  var fitAddon = null;
+  var termActive = false;
+  var BASE = window.__BASE_URL || '';
+
+  function getWsUrl() {
+    var proto = location.protocol === 'https:' ? 'wss:' : 'ws:';
+    return proto + '//' + location.host + BASE + '/sync';
+  }
+
+  function ensureTerm() {
+    var output = document.getElementById('terminalOutput');
+    if (!output) return false;
+    if (term) return true;
+    if (!window.Terminal || !window.FitAddon) return false;
+
+    term = new Terminal({
+      cursorBlink: true,
+      fontSize: 14,
+      fontFamily: 'Menlo, Monaco, "Courier New", monospace',
+      theme: {
+        background: '#0d1117',
+        foreground: '#e6edf3',
+        cursor: '#e6edf3',
+        selectionBackground: '#3b4455'
+      },
+      convertEol: false,
+      scrollback: 5000
+    });
+    fitAddon = new FitAddon.FitAddon();
+    term.loadAddon(fitAddon);
+    output.innerHTML = '';
+    term.open(output);
+    fitAddon.fit();
+
+    term.onData(function(data) {
+      if (ws && ws.readyState === WebSocket.OPEN) {
+        var encoded = btoa(unescape(encodeURIComponent(data)));
+        ws.send(JSON.stringify({ type: 'terminal_input', data: encoded }));
+      }
+    });
+
+    window.addEventListener('resize', function() {
+      if (fitAddon) try { fitAddon.fit(); } catch(_) {}
+    });
+    return true;
+  }
+
+  function connectAndStart() {
+    if (ws && ws.readyState === WebSocket.OPEN) {
+      ws.send(JSON.stringify({ type: 'terminal_start', cwd: window.__STARTUP_CWD || undefined }));
+      return;
+    }
+    ws = new WebSocket(getWsUrl());
+    ws.onopen = function() {
+      ws.send(JSON.stringify({ type: 'terminal_start', cwd: window.__STARTUP_CWD || undefined }));
+    };
+    ws.onmessage = function(e) {
+      try {
+        var msg = JSON.parse(e.data);
+        if (msg.type === 'terminal_output' && term) {
+          var raw = msg.encoding === 'base64'
+            ? decodeURIComponent(escape(atob(msg.data)))
+            : msg.data;
+          term.write(raw);
+        } else if (msg.type === 'terminal_exit' && term) {
+          term.write('\r\n[Process exited with code ' + msg.code + ']\r\n');
+          if (termActive) setTimeout(connectAndStart, 2000);
+        }
+      } catch(_) {}
+    };
+    ws.onclose = function() {
+      if (termActive) setTimeout(connectAndStart, 2000);
+    };
+  }
+
+  function startTerminal() {
+    if (!ensureTerm()) {
+      setTimeout(startTerminal, 200);
+      return;
+    }
+    termActive = true;
+    connectAndStart();
+    setTimeout(function() { if (fitAddon) try { fitAddon.fit(); } catch(_) {} }, 100);
+  }
+
+  function stopTerminal() {
+    termActive = false;
+    if (ws && ws.readyState === WebSocket.OPEN) {
+      ws.send(JSON.stringify({ type: 'terminal_stop' }));
+    }
+  }
+
+  window.addEventListener('view-switched', function(e) {
+    if (e.detail.view === 'terminal') {
+      startTerminal();
+    } else if (termActive) {
+      stopTerminal();
+    }
+  });
+
+  window.terminalModule = { start: startTerminal, stop: stopTerminal };
+})();