agentgui 1.0.242 → 1.0.244

package/lib/claude-runner.js

@@ -197,7 +197,7 @@ class AgentRunner {
     try {
       return await this._runACPOnce(prompt, cwd, config);
     } catch (err) {
-      const isEmptyExit = err.message && err.message.includes('ACP exited with code');
+      const isEmptyExit = err.isPrematureEnd || (err.message && err.message.includes('ACP exited with code'));
       const isBinaryError = err.code === 'ENOENT' || (err.message && err.message.includes('ENOENT'));
       if ((isEmptyExit || isBinaryError) && _retryCount < maxRetries) {
         const delay = Math.min(1000 * Math.pow(2, _retryCount), 5000);
@@ -205,6 +205,13 @@ class AgentRunner {
         await new Promise(r => setTimeout(r, delay));
         return this.runACP(prompt, cwd, config, _retryCount + 1);
       }
+      if (err.isPrematureEnd) {
+        const premErr = new Error(err.message);
+        premErr.isPrematureEnd = true;
+        premErr.exitCode = err.exitCode;
+        premErr.stderrText = err.stderrText;
+        throw premErr;
+      }
       throw err;
     }
   }
@@ -437,7 +444,11 @@ class AgentRunner {
           resolve({ outputs, sessionId });
         } else {
           const detail = stderrText ? `: ${stderrText.substring(0, 200)}` : '';
-          reject(new Error(`${this.name} ACP exited with code ${code}${detail}`));
+          const err = new Error(`${this.name} ACP exited with code ${code}${detail}`);
+          err.isPrematureEnd = true;
+          err.exitCode = code;
+          err.stderrText = stderrText;
+          reject(err);
         }
       });
 

package/package.json

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

package/server.js

@@ -35,62 +35,71 @@ const modelDownloadState = {
   complete: false
 };
 
+function broadcastModelProgress(progress) {
+  modelDownloadState.progress = progress;
+  broadcastSync({ type: 'model_download_progress', progress });
+}
+
 async function ensureModelsDownloaded() {
-  const { createRequire: cr } = await import('module');
-  const r = cr(import.meta.url);
-  const models = r('sttttsmodels');
-  const checkAllFilesExist = models.checkAllFilesExist;
-  const downloadModels = models.downloadModels;
-  
-  if (checkAllFilesExist && checkAllFilesExist()) {
-    modelDownloadState.complete = true;
-    return true;
-  }
-  
-  if (!downloadModels) {
-    console.log('[MODELS] Download function not available, skipping');
-    modelDownloadState.complete = true;
-    return true;
-  }
-  
   if (modelDownloadState.downloading) {
-    // Wait for current download
     while (modelDownloadState.downloading) {
       await new Promise(r => setTimeout(r, 100));
     }
     return modelDownloadState.complete;
   }
-  
-  modelDownloadState.downloading = true;
-  modelDownloadState.error = null;
-  
+
   try {
-    await downloadModels((progress) => {
-      modelDownloadState.progress = progress;
-      // Broadcast progress to all connected clients
-      broadcastSync({
-        type: 'model_download_progress',
-        progress: {
-          started: progress.started,
-          done: progress.done,
-          error: progress.error,
-          downloading: progress.downloading,
-          type: progress.type,
-          completedFiles: progress.completedFiles,
-          totalFiles: progress.totalFiles,
-          totalDownloaded: progress.totalDownloaded,
-          totalBytes: progress.totalBytes
-        }
-      });
-    });
+    const { createRequire: cr } = await import('module');
+    const r = cr(import.meta.url);
+    const sttttsmodels = r('sttttsmodels');
+    const { sttDir, ttsDir } = sttttsmodels;
+
+    const sttOk = fs.existsSync(sttDir) && fs.readdirSync(sttDir).length > 0;
+    const ttsOk = fs.existsSync(ttsDir) && fs.readdirSync(ttsDir).length > 0;
+
+    if (sttOk && ttsOk) {
+      console.log('[MODELS] All model files present');
+      modelDownloadState.complete = true;
+      return true;
+    }
+
+    modelDownloadState.downloading = true;
+    modelDownloadState.error = null;
+
+    const webtalkWhisper = r('webtalk/whisper-models');
+    const webtalkTTS = r('webtalk/tts-models');
+    const { createConfig } = r('webtalk/config');
+    const config = createConfig({ sdkDir: path.dirname(fileURLToPath(import.meta.url)) });
+    config.modelsDir = path.dirname(sttDir);
+    config.ttsModelsDir = ttsDir;
+    config.sttModelsDir = sttDir;
+    config.whisperBaseUrl = 'https://huggingface.co/onnx-community/whisper-base/resolve/main/';
+    config.ttsBaseUrl = 'https://huggingface.co/datasets/AnEntrypoint/sttttsmodels/resolve/main/tts/';
+
+    const totalFiles = 16;
+    let completedFiles = 0;
+
+    if (!sttOk) {
+      console.log('[MODELS] Downloading STT model...');
+      broadcastModelProgress({ started: true, done: false, downloading: true, type: 'stt', completedFiles, totalFiles });
+      await webtalkWhisper.ensureModel('whisper-base', config);
+      completedFiles += 10;
+    }
+
+    if (!ttsOk) {
+      console.log('[MODELS] Downloading TTS models...');
+      broadcastModelProgress({ started: true, done: false, downloading: true, type: 'tts', completedFiles, totalFiles });
+      await webtalkTTS.ensureTTSModels(config);
+      completedFiles += 6;
+    }
+
     modelDownloadState.complete = true;
+    broadcastModelProgress({ started: true, done: true, downloading: false, completedFiles: totalFiles, totalFiles });
     return true;
   } catch (err) {
+    console.error('[MODELS] Download error:', err.message);
     modelDownloadState.error = err.message;
-    broadcastSync({
-      type: 'model_download_progress',
-      progress: { error: err.message, done: true }
-    });
+    broadcastModelProgress({ done: true, error: err.message });
     return false;
   } finally {
     modelDownloadState.downloading = false;
@@ -327,12 +336,57 @@ const AGENT_DEFAULT_MODELS = {
   ]
 };
 
+async function fetchClaudeModelsFromAPI() {
+  const apiKey = process.env.ANTHROPIC_API_KEY;
+  if (!apiKey) return null;
+  try {
+    const https = await import('https');
+    return new Promise((resolve) => {
+      const req = https.default.request({
+        hostname: 'api.anthropic.com', path: '/v1/models', method: 'GET',
+        headers: { 'x-api-key': apiKey, 'anthropic-version': '2023-06-01' },
+        timeout: 8000
+      }, (res) => {
+        let body = '';
+        res.on('data', d => body += d);
+        res.on('end', () => {
+          try {
+            const data = JSON.parse(body);
+            const items = (data.data || []).filter(m => m.id && m.id.startsWith('claude-'));
+            if (items.length === 0) return resolve(null);
+            const models = [{ id: '', label: 'Default' }];
+            for (const m of items) {
+              const label = m.display_name || m.id.replace(/^claude-/, '').replace(/-/g, ' ').replace(/\b\w/g, c => c.toUpperCase());
+              models.push({ id: m.id, label });
+            }
+            resolve(models);
+          } catch { resolve(null); }
+        });
+      });
+      req.on('error', () => resolve(null));
+      req.on('timeout', () => { req.destroy(); resolve(null); });
+      req.end();
+    });
+  } catch { return null; }
+}
+
 async function getModelsForAgent(agentId) {
   const cached = modelCache.get(agentId);
-  if (cached && Date.now() - cached.timestamp < 300000) {
+  if (cached && Date.now() - cached.timestamp < 3600000) {
     return cached.models;
   }
 
+  if (agentId === 'claude-code') {
+    const apiModels = await fetchClaudeModelsFromAPI();
+    if (apiModels) {
+      modelCache.set(agentId, { models: apiModels, timestamp: Date.now() });
+      return apiModels;
+    }
+    const models = AGENT_DEFAULT_MODELS[agentId];
+    modelCache.set(agentId, { models, timestamp: Date.now() });
+    return models;
+  }
+
   if (AGENT_DEFAULT_MODELS[agentId]) {
     const models = AGENT_DEFAULT_MODELS[agentId];
     modelCache.set(agentId, { models, timestamp: Date.now() });
@@ -2975,6 +3029,9 @@ async function processMessageWithStreaming(conversationId, messageId, sessionId,
       sessionId,
       conversationId,
       error: error.message,
+      isPrematureEnd: error.isPrematureEnd || false,
+      exitCode: error.exitCode,
+      stderrText: error.stderrText,
       recoverable: elapsed < 60000,
       timestamp: Date.now()
     });

package/static/index.html

@@ -48,6 +48,8 @@
       --block-color-7: #f43f5e;
       --block-color-8: #22c55e;
       --block-color-9: #eab308;
+      --block-color-10: #0ea5e9;
+      --block-color-11: #d946ef;
     }
 
     html.dark {
@@ -66,6 +68,8 @@
       --block-color-7: #fb7185;
       --block-color-8: #4ade80;
       --block-color-9: #facc15;
+      --block-color-10: #38bdf8;
+      --block-color-11: #e879f9;
     }
 
     html, body {

package/static/js/client.js

@@ -793,6 +793,20 @@ class AgentGUIClient {
     // Stop polling for chunks
     this.stopChunkPolling();
 
+    // If this is a premature ACP end, render distinct warning block
+    if (data.isPrematureEnd) {
+      this.renderer.queueEvent({
+        type: 'streaming_error',
+        isPrematureEnd: true,
+        exitCode: data.exitCode,
+        error: data.error,
+        stderrText: data.stderrText,
+        sessionId: data.sessionId,
+        conversationId: data.conversationId,
+        timestamp: data.timestamp || Date.now()
+      });
+    }
+
     const sessionId = data.sessionId || this.state.currentSession?.id;
     const streamingEl = document.getElementById(`streaming-${sessionId}`);
     if (streamingEl) {

package/static/js/streaming-renderer.js

@@ -300,6 +300,10 @@ class StreamingRenderer {
         return this.renderBlock(event.block, event);
       }
 
+      if (event.type === 'streaming_error' && event.isPrematureEnd) {
+        return this.renderBlockPremature({ type: 'premature', error: event.error, exitCode: event.exitCode });
+      }
+
       switch (event.type) {
         case 'streaming_start':
           return this.renderStreamingStart(event);
@@ -366,6 +370,8 @@ class StreamingRenderer {
           return this.renderBlockUsage(block, context);
         case 'plan':
           return this.renderBlockPlan(block, context);
+        case 'premature':
+          return this.renderBlockPremature(block, context);
         default:
           return this.renderBlockGeneric(block, context);
       }
@@ -415,7 +421,10 @@ class StreamingRenderer {
       'system': 6,
       'result': 7,
       'error': 8,
-      'image': 9
+      'image': 9,
+      'plan': 10,
+      'usage': 11,
+      'premature': 8
     };
     return typeColors[blockType] !== undefined ? typeColors[blockType] : 0;
   }
@@ -465,6 +474,7 @@ class StreamingRenderer {
   renderBlockCode(block, context) {
     const div = document.createElement('div');
     div.className = 'block-code';
+    div.style.borderLeft = `3px solid var(--block-color-${this._getBlockColorIndex('code')})`;
 
     const code = block.code || '';
     const language = (block.language || 'plaintext').toLowerCase();
@@ -510,6 +520,8 @@ class StreamingRenderer {
   renderBlockThinking(block, context) {
     const div = document.createElement('div');
     div.className = 'block-thinking';
+    const colorIndex = this._getBlockColorIndex('thinking');
+    div.style.borderLeft = `3px solid var(--block-color-${colorIndex})`;
 
     const thinking = block.thinking || '';
     div.innerHTML = `
@@ -1240,6 +1252,7 @@ class StreamingRenderer {
   renderBlockImage(block, context) {
     const div = document.createElement('div');
     div.className = 'block-image';
+    div.style.borderLeft = `3px solid var(--block-color-${this._getBlockColorIndex('image')})`;
 
     let src = block.image || block.src || '';
     const alt = block.alt || 'Image';
@@ -1263,6 +1276,8 @@ class StreamingRenderer {
   renderBlockBash(block, context) {
     const div = document.createElement('div');
     div.className = 'block-bash';
+    const colorIndex = this._getBlockColorIndex('bash');
+    div.style.borderLeft = `3px solid var(--block-color-${colorIndex})`;
 
     const command = block.command || block.code || '';
     const output = block.output || '';
@@ -1290,6 +1305,7 @@ class StreamingRenderer {
     const details = document.createElement('details');
     details.className = 'folded-tool folded-tool-info';
     details.dataset.eventType = 'system';
+    details.style.borderLeft = `3px solid var(--block-color-${this._getBlockColorIndex('system')})`;
     const desc = block.model ? this.escapeHtml(block.model) : 'Session';
     const summary = document.createElement('summary');
     summary.className = 'folded-tool-bar';
@@ -1326,6 +1342,9 @@ class StreamingRenderer {
     const details = document.createElement('details');
     details.className = isError ? 'folded-tool folded-tool-error' : 'folded-tool';
     details.dataset.eventType = 'result';
+    if (!isError) details.setAttribute('open', '');
+    const colorIndex = this._getBlockColorIndex(isError ? 'error' : 'result');
+    details.style.borderLeft = `3px solid var(--block-color-${colorIndex})`;
 
     const iconSvg = isError
       ? '<svg viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clip-rule="evenodd"/></svg>'
@@ -1380,6 +1399,7 @@ class StreamingRenderer {
     const div = document.createElement('div');
     div.className = 'block-tool-status';
     div.dataset.toolUseId = block.tool_use_id || '';
+    div.style.borderLeft = `3px solid var(--block-color-${this._getBlockColorIndex('tool_use')})`;
     div.innerHTML = `
       <div style="display:flex;align-items:center;gap:0.5rem;padding:0.25rem 0.5rem;font-size:0.75rem;color:var(--color-text-secondary)">
         ${statusIcons[status] || statusIcons.pending}
@@ -1400,6 +1420,7 @@ class StreamingRenderer {
 
     const div = document.createElement('div');
     div.className = 'block-usage';
+    div.style.borderLeft = `3px solid var(--block-color-${this._getBlockColorIndex('usage')})`;
     div.innerHTML = `
       <div style="display:flex;gap:1rem;padding:0.25rem 0.5rem;font-size:0.7rem;color:var(--color-text-secondary);background:var(--color-bg-secondary);border-radius:0.25rem">
         ${used ? `<span><strong>Used:</strong> ${used.toLocaleString()}</span>` : ''}
@@ -1430,6 +1451,7 @@ class StreamingRenderer {
 
     const div = document.createElement('div');
     div.className = 'block-plan';
+    div.style.borderLeft = `3px solid var(--block-color-${this._getBlockColorIndex('plan')})`;
     div.innerHTML = `
       <details class="folded-tool folded-tool-info">
         <summary class="folded-tool-bar">
@@ -1452,6 +1474,21 @@ class StreamingRenderer {
     return div;
   }
 
+  renderBlockPremature(block, context) {
+    const div = document.createElement('div');
+    div.className = 'folded-tool folded-tool-error block-premature';
+    div.style.borderLeft = `3px solid var(--block-color-${this._getBlockColorIndex('premature')})`;
+    const code = block.exitCode != null ? ` (exit ${block.exitCode})` : '';
+    div.innerHTML = `
+      <div class="folded-tool-bar" style="background:rgba(245,158,11,0.1)">
+        <span class="folded-tool-icon" style="color:#f59e0b"><svg viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z" clip-rule="evenodd"/></svg></span>
+        <span class="folded-tool-name" style="color:#f59e0b">ACP Ended Prematurely${this.escapeHtml(code)}</span>
+        <span class="folded-tool-desc">${this.escapeHtml(block.error || 'Process exited without output')}</span>
+      </div>
+    `;
+    return div;
+  }
+
   /**
    * Render generic block with formatted key-value pairs
    */