agentgui 1.0.196 → 1.0.197

package/package.json

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

package/server.js

@@ -5,7 +5,7 @@ import os from 'os';
 import zlib from 'zlib';
 import { fileURLToPath } from 'url';
 import { WebSocketServer } from 'ws';
-import { execSync } from 'child_process';
+import { execSync, spawn } from 'child_process';
 import { createRequire } from 'module';
 import { queries } from './database.js';
 import { runClaudeWithStreaming } from './lib/claude-runner.js';
@@ -66,6 +66,7 @@ const fsbrowse = require('fsbrowse');
 const SYSTEM_PROMPT = `Your output will be spoken aloud by a text-to-speech system. Write ONLY plain conversational sentences that sound natural when read aloud. Never use markdown, bold, italics, headers, bullet points, numbered lists, tables, or any formatting. Never use colons to introduce lists or options. Never use labels like "Option A" or "1." followed by a title. Instead of listing options, describe them conversationally in flowing sentences. For example, instead of "**Option 1**: Do X" say "One approach would be to do X." Keep sentences short and simple. Use transition words like "also", "another option", "or alternatively" to connect ideas. Write as if you are speaking to someone in a casual conversation.`;
 
 const activeExecutions = new Map();
+const activeScripts = new Map();
 const messageQueues = new Map();
 const rateLimitState = new Map();
 const STUCK_AGENT_THRESHOLD_MS = 600000;
@@ -539,6 +540,77 @@ const server = http.createServer(async (req, res) => {
       return;
     }
 
+    const scriptsMatch = pathOnly.match(/^\/api\/conversations\/([^/]+)\/scripts$/);
+    if (scriptsMatch && req.method === 'GET') {
+      const conv = queries.getConversation(scriptsMatch[1]);
+      if (!conv) { sendJSON(req, res, 404, { error: 'Not found' }); return; }
+      const wd = conv.workingDirectory || STARTUP_CWD;
+      let hasStart = false, hasDev = false;
+      try {
+        const pkg = JSON.parse(fs.readFileSync(path.join(wd, 'package.json'), 'utf-8'));
+        const scripts = pkg.scripts || {};
+        hasStart = !!scripts.start;
+        hasDev = !!scripts.dev;
+      } catch {}
+      const running = activeScripts.has(scriptsMatch[1]);
+      const runningScript = running ? activeScripts.get(scriptsMatch[1]).script : null;
+      sendJSON(req, res, 200, { hasStart, hasDev, running, runningScript });
+      return;
+    }
+
+    const runScriptMatch = pathOnly.match(/^\/api\/conversations\/([^/]+)\/run-script$/);
+    if (runScriptMatch && req.method === 'POST') {
+      const conversationId = runScriptMatch[1];
+      const conv = queries.getConversation(conversationId);
+      if (!conv) { sendJSON(req, res, 404, { error: 'Not found' }); return; }
+      if (activeScripts.has(conversationId)) { sendJSON(req, res, 409, { error: 'Script already running' }); return; }
+      const body = await parseBody(req);
+      const script = body.script;
+      if (script !== 'start' && script !== 'dev') { sendJSON(req, res, 400, { error: 'Invalid script' }); return; }
+      const wd = conv.workingDirectory || STARTUP_CWD;
+      try {
+        const pkg = JSON.parse(fs.readFileSync(path.join(wd, 'package.json'), 'utf-8'));
+        if (!pkg.scripts || !pkg.scripts[script]) { sendJSON(req, res, 400, { error: `Script "${script}" not found` }); return; }
+      } catch { sendJSON(req, res, 400, { error: 'No package.json' }); return; }
+
+      const child = spawn('npm', ['run', script], { cwd: wd, stdio: ['ignore', 'pipe', 'pipe'], detached: true, env: { ...process.env, FORCE_COLOR: '1' } });
+      activeScripts.set(conversationId, { process: child, script, startTime: Date.now() });
+      broadcastSync({ type: 'script_started', conversationId, script, timestamp: Date.now() });
+
+      const onData = (stream) => (chunk) => {
+        broadcastSync({ type: 'script_output', conversationId, data: chunk.toString(), stream, timestamp: Date.now() });
+      };
+      child.stdout.on('data', onData('stdout'));
+      child.stderr.on('data', onData('stderr'));
+      child.on('error', (err) => {
+        activeScripts.delete(conversationId);
+        broadcastSync({ type: 'script_stopped', conversationId, code: 1, error: err.message, timestamp: Date.now() });
+      });
+      child.on('close', (code) => {
+        activeScripts.delete(conversationId);
+        broadcastSync({ type: 'script_stopped', conversationId, code: code || 0, timestamp: Date.now() });
+      });
+      sendJSON(req, res, 200, { ok: true, script, pid: child.pid });
+      return;
+    }
+
+    const stopScriptMatch = pathOnly.match(/^\/api\/conversations\/([^/]+)\/stop-script$/);
+    if (stopScriptMatch && req.method === 'POST') {
+      const conversationId = stopScriptMatch[1];
+      const entry = activeScripts.get(conversationId);
+      if (!entry) { sendJSON(req, res, 404, { error: 'No running script' }); return; }
+      try { process.kill(-entry.process.pid, 'SIGTERM'); } catch { try { entry.process.kill('SIGTERM'); } catch {} }
+      sendJSON(req, res, 200, { ok: true });
+      return;
+    }
+
+    const scriptStatusMatch = pathOnly.match(/^\/api\/conversations\/([^/]+)\/script-status$/);
+    if (scriptStatusMatch && req.method === 'GET') {
+      const entry = activeScripts.get(scriptStatusMatch[1]);
+      sendJSON(req, res, 200, { running: !!entry, script: entry?.script || null });
+      return;
+    }
+
     if (pathOnly === '/api/agents' && req.method === 'GET') {
             sendJSON(req, res, 200, { agents: discoveredAgents });
       return;
@@ -1308,7 +1380,8 @@ const BROADCAST_TYPES = new Set([
   'message_created', 'conversation_created', 'conversation_updated',
   'conversations_updated', 'conversation_deleted', 'queue_status',
   'streaming_start', 'streaming_complete', 'streaming_error',
-  'rate_limit_hit', 'rate_limit_clear'
+  'rate_limit_hit', 'rate_limit_clear',
+  'script_started', 'script_stopped', 'script_output'
 ]);
 
 const wsBatchQueues = new Map();

package/static/index.html

@@ -15,6 +15,9 @@
   <link rel="preload" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.11.1/styles/github-dark.min.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
   <noscript><link href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.11.1/styles/github-dark.min.css" rel="stylesheet"></noscript>
   <script defer src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.11.1/highlight.min.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@xterm/xterm@5.5.0/css/xterm.min.css">
+  <script defer src="https://cdn.jsdelivr.net/npm/@xterm/xterm@5.5.0/lib/xterm.min.js"></script>
+  <script defer src="https://cdn.jsdelivr.net/npm/@xterm/addon-fit@0.10.0/lib/addon-fit.min.js"></script>
 
   <style>
     *, *::before, *::after { box-sizing: border-box; }
@@ -441,6 +444,27 @@
       color: var(--color-text-primary);
     }
 
+    .script-buttons { display: flex; gap: 0.25rem; align-items: center; }
+    .header-icon-btn {
+      display: flex; align-items: center; justify-content: center;
+      width: 32px; height: 32px; background: none; border: none;
+      border-radius: 0.375rem; cursor: pointer; color: var(--color-text-secondary);
+      transition: background-color 0.15s, color 0.15s;
+    }
+    .header-icon-btn:hover { background-color: var(--color-bg-primary); color: var(--color-text-primary); }
+    .header-icon-btn svg { width: 16px; height: 16px; }
+    #scriptStartBtn { color: var(--color-success); }
+    #scriptStartBtn:hover { background-color: rgba(16,185,129,0.1); color: var(--color-success); }
+    .script-dev-btn { color: var(--color-info); }
+    .script-dev-btn:hover { background-color: rgba(8,145,178,0.1); color: var(--color-info); }
+    .script-stop-btn { color: var(--color-error); }
+    .script-stop-btn:hover { background-color: rgba(239,68,68,0.1); color: var(--color-error); }
+
+    .terminal-container {
+      flex: 1; display: flex; flex-direction: column; overflow: hidden; background: #1e1e1e;
+    }
+    .terminal-output { flex: 1; overflow: hidden; }
+
     /* --- View toggle bar --- */
     .view-toggle-bar {
       display: flex;
@@ -2199,6 +2223,17 @@
         <h1 class="header-title">AgentGUI</h1>
 
         <div class="header-controls">
+          <div class="script-buttons" id="scriptButtons" style="display:none;">
+            <button class="header-icon-btn" id="scriptStartBtn" title="Run start script" aria-label="Run start script" style="display:none;">
+              <svg viewBox="0 0 24 24" fill="currentColor" stroke="none"><polygon points="6,3 20,12 6,21"></polygon></svg>
+            </button>
+            <button class="header-icon-btn script-dev-btn" id="scriptDevBtn" title="Run dev script" aria-label="Run dev script" style="display:none;">
+              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="16 18 22 12 16 6"></polyline><polyline points="8 6 2 12 8 18"></polyline></svg>
+            </button>
+            <button class="header-icon-btn script-stop-btn" id="scriptStopBtn" title="Stop running script" aria-label="Stop running script" style="display:none;">
+              <svg viewBox="0 0 24 24" fill="currentColor" stroke="none"><rect x="5" y="5" width="14" height="14" rx="1"></rect></svg>
+            </button>
+          </div>
           <div class="status-badge">
             <div class="status-indicator" data-status="disconnected"></div>
             <span id="connectionStatus" data-status-indicator>Disconnected</span>
@@ -2224,6 +2259,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">Voice</button>
+        <button class="view-toggle-btn" data-view="terminal" id="terminalTabBtn" style="display:none;">Terminal</button>
       </div>
 
       <!-- Messages scroll area -->
@@ -2244,6 +2280,11 @@
         <iframe id="fileBrowserIframe" class="file-browser-iframe"></iframe>
       </div>
 
+      <!-- Terminal output view -->
+      <div id="terminalContainer" class="terminal-container" style="display:none;">
+        <div id="terminalOutput" class="terminal-output"></div>
+      </div>
+
       <!-- Voice STT/TTS view -->
       <div id="voiceContainer" class="voice-container" style="display:none;">
         <div id="voiceScroll" class="voice-scroll">
@@ -2336,6 +2377,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/script-runner.js"></script>
 
   <script>
     const savedTheme = localStorage.getItem('theme') || 'light';

package/static/js/features.js

@@ -201,6 +201,7 @@
     var fileBrowser = document.getElementById('fileBrowserContainer');
     var fileIframe = document.getElementById('fileBrowserIframe');
     var voiceContainer = document.getElementById('voiceContainer');
+    var terminalContainer = document.getElementById('terminalContainer');
 
     if (!bar) return;
 
@@ -212,6 +213,7 @@
     if (execPanel) execPanel.style.display = view === 'chat' ? '' : 'none';
     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 (view === 'files' && fileIframe && currentConversation) {
       var src = BASE + '/files/' + currentConversation + '/';
@@ -225,6 +227,8 @@
     } else if (view !== 'voice' && window.voiceModule) {
       window.voiceModule.deactivate();
     }
+
+    window.dispatchEvent(new CustomEvent('view-switched', { detail: { view: view } }));
   }
 
   function updateViewToggleVisibility() {

package/static/js/script-runner.js

@@ -0,0 +1,219 @@
+(function() {
+  const BASE = window.__BASE_URL || '';
+  let currentConversationId = null;
+  let scriptState = { running: false, script: null, hasStart: false, hasDev: false };
+  let terminal = null;
+  let fitAddon = null;
+  let hasTerminalContent = false;
+  let resizeObserver = null;
+
+  function init() {
+    setupListeners();
+    setupButtons();
+  }
+
+  function setupListeners() {
+    window.addEventListener('conversation-selected', function(e) {
+      currentConversationId = e.detail.conversationId;
+      hasTerminalContent = false;
+      if (terminal) terminal.clear();
+      hideTerminalTab();
+      checkScripts();
+    });
+
+    window.addEventListener('ws-message', function(e) {
+      const data = e.detail;
+      if (!data || !currentConversationId) return;
+      if (data.conversationId !== currentConversationId) return;
+
+      if (data.type === 'script_started') {
+        scriptState.running = true;
+        scriptState.script = data.script;
+        hasTerminalContent = false;
+        if (terminal) terminal.clear();
+        updateButtons();
+        showTerminalTab();
+      } else if (data.type === 'script_stopped') {
+        scriptState.running = false;
+        const msg = data.error ? data.error : ('exited with code ' + (data.code || 0));
+        if (terminal) terminal.writeln('\r\n\x1b[90m[process ' + msg + ']\x1b[0m');
+        updateButtons();
+      } else if (data.type === 'script_output') {
+        hasTerminalContent = true;
+        showTerminalTab();
+        if (terminal) terminal.write(data.data);
+      }
+    });
+
+    window.addEventListener('resize', debounce(fitTerminal, 200));
+  }
+
+  function setupButtons() {
+    var startBtn = document.getElementById('scriptStartBtn');
+    var devBtn = document.getElementById('scriptDevBtn');
+    var stopBtn = document.getElementById('scriptStopBtn');
+
+    if (startBtn) startBtn.addEventListener('click', function() { runScript('start'); });
+    if (devBtn) devBtn.addEventListener('click', function() { runScript('dev'); });
+    if (stopBtn) stopBtn.addEventListener('click', function() { stopScript(); });
+  }
+
+  function checkScripts() {
+    if (!currentConversationId) return;
+    fetch(BASE + '/api/conversations/' + currentConversationId + '/scripts')
+      .then(function(r) { return r.json(); })
+      .then(function(data) {
+        scriptState.hasStart = data.hasStart;
+        scriptState.hasDev = data.hasDev;
+        scriptState.running = data.running;
+        scriptState.script = data.runningScript;
+        updateButtons();
+        if (data.running || hasTerminalContent) showTerminalTab();
+      })
+      .catch(function() {
+        scriptState.hasStart = false;
+        scriptState.hasDev = false;
+        updateButtons();
+      });
+  }
+
+  function updateButtons() {
+    var container = document.getElementById('scriptButtons');
+    var startBtn = document.getElementById('scriptStartBtn');
+    var devBtn = document.getElementById('scriptDevBtn');
+    var stopBtn = document.getElementById('scriptStopBtn');
+
+    var showAny = scriptState.hasStart || scriptState.hasDev || scriptState.running;
+    if (container) container.style.display = showAny ? 'flex' : 'none';
+
+    if (scriptState.running) {
+      if (startBtn) startBtn.style.display = 'none';
+      if (devBtn) devBtn.style.display = 'none';
+      if (stopBtn) stopBtn.style.display = 'flex';
+    } else {
+      if (startBtn) startBtn.style.display = scriptState.hasStart ? 'flex' : 'none';
+      if (devBtn) devBtn.style.display = scriptState.hasDev ? 'flex' : 'none';
+      if (stopBtn) stopBtn.style.display = 'none';
+    }
+  }
+
+  function runScript(script) {
+    if (!currentConversationId || scriptState.running) return;
+    fetch(BASE + '/api/conversations/' + currentConversationId + '/run-script', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ script: script })
+    })
+    .then(function(r) { return r.json(); })
+    .then(function(data) {
+      if (data.ok) {
+        scriptState.running = true;
+        scriptState.script = script;
+        hasTerminalContent = false;
+        updateButtons();
+        showTerminalTab();
+        switchToTerminalView();
+        ensureTerminal();
+        if (terminal) {
+          terminal.clear();
+          terminal.writeln('\x1b[36m[running npm run ' + script + ']\x1b[0m\r\n');
+        }
+      }
+    })
+    .catch(function(err) {
+      console.error('Failed to start script:', err);
+    });
+  }
+
+  function stopScript() {
+    if (!currentConversationId) return;
+    fetch(BASE + '/api/conversations/' + currentConversationId + '/stop-script', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: '{}'
+    }).catch(function(err) {
+      console.error('Failed to stop script:', err);
+    });
+  }
+
+  function showTerminalTab() {
+    var btn = document.getElementById('terminalTabBtn');
+    if (btn) btn.style.display = '';
+  }
+
+  function hideTerminalTab() {
+    var btn = document.getElementById('terminalTabBtn');
+    if (btn) btn.style.display = 'none';
+  }
+
+  function switchToTerminalView() {
+    var bar = document.getElementById('viewToggleBar');
+    if (!bar) return;
+    var termBtn = bar.querySelector('[data-view="terminal"]');
+    if (termBtn) termBtn.click();
+  }
+
+  function ensureTerminal() {
+    if (terminal) return;
+    if (typeof window.Terminal === 'undefined') {
+      setTimeout(ensureTerminal, 200);
+      return;
+    }
+    var container = document.getElementById('terminalOutput');
+    if (!container) return;
+
+    terminal = new window.Terminal({
+      cursorBlink: false,
+      scrollback: 10000,
+      fontSize: 13,
+      fontFamily: "'JetBrains Mono', 'Fira Code', 'Cascadia Code', Menlo, Monaco, 'Courier New', monospace",
+      theme: { background: '#1e1e1e', foreground: '#d4d4d4' },
+      convertEol: true,
+      disableStdin: true
+    });
+
+    if (window.FitAddon) {
+      fitAddon = new window.FitAddon.FitAddon();
+      terminal.loadAddon(fitAddon);
+    }
+
+    terminal.open(container);
+    fitTerminal();
+
+    if (resizeObserver) resizeObserver.disconnect();
+    resizeObserver = new ResizeObserver(debounce(fitTerminal, 100));
+    resizeObserver.observe(container);
+  }
+
+  function fitTerminal() {
+    if (fitAddon) {
+      try { fitAddon.fit(); } catch {}
+    }
+  }
+
+  function debounce(fn, ms) {
+    var timer;
+    return function() {
+      clearTimeout(timer);
+      timer = setTimeout(fn, ms);
+    };
+  }
+
+  window.addEventListener('view-switched', function(e) {
+    if (e.detail && e.detail.view === 'terminal') {
+      ensureTerminal();
+      setTimeout(fitTerminal, 50);
+    }
+  });
+
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', init);
+  } else {
+    init();
+  }
+
+  window.scriptRunner = {
+    getState: function() { return scriptState; },
+    getTerminal: function() { return terminal; }
+  };
+})();