agentgui 1.0.130 → 1.0.138

package/CLAUDE.md

@@ -128,6 +128,51 @@ Production ready - no additional configuration needed beyond:
 2. Set PORT environment variable if needed
 3. Run: `npm start` or `npm run dev` for development
 
+## npm Publishing Setup
+
+Automated npm publishing is configured via GitHub Actions with OIDC authentication. To complete setup:
+
+### Step 1: Configure OIDC Trusted Publisher on npm.org
+
+Visit: https://www.npmjs.com/package/agentgui/access
+
+Click "Add Trusted Publisher" and fill in:
+- **Publishing provider**: GitHub
+- **Owner**: AnEntrypoint
+- **Repository**: agentgui
+- **Workflow file**: `.github/workflows/publish-npm.yml`
+
+This requires npm account access with 2FA completion.
+
+### Step 2: Trigger Publishing Workflow
+
+Once OIDC is configured, push to main branch to trigger automatic publishing:
+
+```bash
+git commit --allow-empty -m "test: verify npm publish with OIDC"
+git push
+```
+
+Monitor at: https://github.com/AnEntrypoint/agentgui/actions
+
+### Optional: Add Granular Token Backup
+
+Generate a 3-month granular access token for fallback authentication:
+
+Visit: https://www.npmjs.com/settings/lanmower/tokens
+
+Click "Generate New Token" → "Granular Access Token" and configure:
+- **Name**: github-actions-3month
+- **Permissions**: Read and write
+- **Package**: agentgui
+- **Expiration**: 90 days
+- **Bypass 2FA**: enabled
+
+Then add to GitHub Actions secrets:
+```bash
+gh secret set NPM_TOKEN --body "YOUR_TOKEN" --repo AnEntrypoint/agentgui
+```
+
 ## Support
 
 For issues, check:
@@ -135,3 +180,4 @@ For issues, check:
 - Server logs for backend issues
 - Database at `./data/agentgui.db` for data persistence
 - WebSocket connection in Network tab (should show `/sync` as connected)
+- GitHub Actions: https://github.com/AnEntrypoint/agentgui/actions for publishing errors

package/bin/gmgui.cjs

@@ -44,7 +44,7 @@ async function gmgui(args = []) {
     return new Promise((resolve, reject) => {
       const ps = spawn(runtime, [path.join(projectRoot, 'server.js')], {
         cwd: projectRoot,
-        env: { ...process.env, PORT: port, BASE_URL: baseUrl },
+        env: { ...process.env, PORT: port, BASE_URL: baseUrl, STARTUP_CWD: process.cwd() },
         stdio: 'inherit'
       });
 

package/database.js

@@ -280,7 +280,7 @@ export const queries = {
 
   getConversationsList() {
     const stmt = db.prepare(
-      'SELECT id, title, agentType, created_at, updated_at, messageCount, workingDirectory FROM conversations WHERE status != ? ORDER BY updated_at DESC'
+      'SELECT id, title, agentType, created_at, updated_at, messageCount, workingDirectory, isStreaming FROM conversations WHERE status != ? ORDER BY updated_at DESC'
     );
     return stmt.all('deleted');
   },
@@ -573,11 +573,19 @@ export const queries = {
     }
 
     const deleteStmt = db.transaction(() => {
+      const sessionIds = db.prepare('SELECT id FROM sessions WHERE conversationId = ?').all(id).map(r => r.id);
+      db.prepare('DELETE FROM stream_updates WHERE conversationId = ?').run(id);
       db.prepare('DELETE FROM chunks WHERE conversationId = ?').run(id);
       db.prepare('DELETE FROM events WHERE conversationId = ?').run(id);
+      if (sessionIds.length > 0) {
+        const placeholders = sessionIds.map(() => '?').join(',');
+        db.prepare(`DELETE FROM stream_updates WHERE sessionId IN (${placeholders})`).run(...sessionIds);
+        db.prepare(`DELETE FROM chunks WHERE sessionId IN (${placeholders})`).run(...sessionIds);
+        db.prepare(`DELETE FROM events WHERE sessionId IN (${placeholders})`).run(...sessionIds);
+      }
       db.prepare('DELETE FROM sessions WHERE conversationId = ?').run(id);
       db.prepare('DELETE FROM messages WHERE conversationId = ?').run(id);
-      db.prepare('UPDATE conversations SET status = ? WHERE id = ?').run('deleted', id);
+      db.prepare('DELETE FROM conversations WHERE id = ?').run(id);
     });
 
     deleteStmt();
@@ -1064,6 +1072,7 @@ export const queries = {
     }
 
     const deleteStmt = db.transaction(() => {
+      db.prepare('DELETE FROM stream_updates WHERE conversationId = ?').run(id);
       db.prepare('DELETE FROM chunks WHERE conversationId = ?').run(id);
       db.prepare('DELETE FROM events WHERE conversationId = ?').run(id);
       db.prepare('DELETE FROM sessions WHERE conversationId = ?').run(id);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "agentgui",
-  "version": "1.0.130",
+  "version": "1.0.138",
   "description": "Multi-agent ACP client with real-time communication",
   "type": "module",
   "main": "server.js",
@@ -26,6 +26,7 @@
     "busboy": "^1.6.0",
     "express": "^5.2.1",
     "fsbrowse": "^0.2.13",
+    "webtalk": "github:anEntrypoint/realtime-whisper-webgpu",
     "ws": "^8.14.2"
   }
 }

package/server.js

@@ -1,6 +1,7 @@
 import http from 'http';
 import fs from 'fs';
 import path from 'path';
+import os from 'os';
 import { fileURLToPath } from 'url';
 import { WebSocketServer } from 'ws';
 import { execSync } from 'child_process';
@@ -11,7 +12,8 @@ import { runClaudeWithStreaming } from './lib/claude-runner.js';
 const require = createRequire(import.meta.url);
 const express = require('express');
 const Busboy = require('busboy');
-const fsbrowse = require('../fsbrowse');
+const fsbrowse = require('fsbrowse');
+const { webtalk } = require('webtalk');
 
 const SYSTEM_PROMPT = `Always write your responses in ripple-ui enhanced HTML. Avoid overriding light/dark mode CSS variables. Use all the benefits of HTML to express technical details with proper semantic markup, tables, code blocks, headings, and lists. Write clean, well-structured HTML that respects the existing design system.`;
 
@@ -28,12 +30,18 @@ const PORT = process.env.PORT || 3000;
 const BASE_URL = (process.env.BASE_URL || '/gm').replace(/\/+$/, '');
 const watch = process.argv.includes('--no-watch') ? false : (process.argv.includes('--watch') || process.env.HOT_RELOAD !== 'false');
 
+const STARTUP_CWD = process.env.STARTUP_CWD || process.cwd();
 const staticDir = path.join(__dirname, 'static');
 if (!fs.existsSync(staticDir)) fs.mkdirSync(staticDir, { recursive: true });
 
 // Express sub-app for fsbrowse file browser and file upload
 const expressApp = express();
 
+// Separate Express app for webtalk (STT/TTS) - isolated to contain COEP/COOP headers
+const webtalkApp = express();
+const webtalkInstance = webtalk(webtalkApp, { path: '/webtalk' });
+webtalkInstance.init().catch(err => debugLog('Webtalk init: ' + err.message));
+
 // File upload endpoint - copies dropped files to conversation workingDirectory
 expressApp.post(BASE_URL + '/api/upload/:conversationId', (req, res) => {
   try {
@@ -139,14 +147,72 @@ const server = http.createServer(async (req, res) => {
   res.setHeader('Access-Control-Allow-Origin', '*');
   res.setHeader('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, OPTIONS');
   res.setHeader('Access-Control-Allow-Headers', 'Content-Type, Authorization');
+  res.setHeader('Cross-Origin-Embedder-Policy', 'credentialless');
+  res.setHeader('Cross-Origin-Opener-Policy', 'same-origin');
+  res.setHeader('Cross-Origin-Resource-Policy', 'cross-origin');
   if (req.method === 'OPTIONS') { res.writeHead(200); res.end(); return; }
 
-  // Route file upload and fsbrowse requests through Express sub-app
   const pathOnly = req.url.split('?')[0];
+  const webtalkPrefix = BASE_URL + '/webtalk';
+  const isWebtalkRoute = pathOnly.startsWith(webtalkPrefix) ||
+    pathOnly.startsWith(BASE_URL + '/api/tts-status') ||
+    pathOnly.startsWith(BASE_URL + '/assets/') ||
+    pathOnly.startsWith(BASE_URL + '/tts/') ||
+    pathOnly.startsWith(BASE_URL + '/models/') ||
+    pathOnly.startsWith('/webtalk') ||
+    pathOnly.startsWith('/assets/') ||
+    pathOnly.startsWith('/tts/') ||
+    pathOnly.startsWith('/models/');
+  if (isWebtalkRoute) {
+    const webtalkSdkDir = path.dirname(require.resolve('webtalk/package.json'));
+    const sdkFiles = { '/demo': 'app.html', '/sdk.js': 'sdk.js', '/stt.js': 'stt.js', '/tts.js': 'tts.js', '/tts-utils.js': 'tts-utils.js' };
+    let stripped = pathOnly.startsWith(webtalkPrefix) ? pathOnly.slice(webtalkPrefix.length) : (pathOnly.startsWith('/webtalk') ? pathOnly.slice('/webtalk'.length) : null);
+    if (stripped !== null && !sdkFiles[stripped] && !stripped.endsWith('.js') && sdkFiles[stripped + '.js']) stripped += '.js';
+    if (stripped !== null && sdkFiles[stripped]) {
+      const filePath = path.join(webtalkSdkDir, sdkFiles[stripped]);
+      return fs.readFile(filePath, 'utf-8', (err, content) => {
+        if (err) { res.writeHead(404); res.end('Not found'); return; }
+        if (stripped === '/demo') {
+          let patched = content
+            .replace(/from\s+['"](\/webtalk\/[^'"]+)['"]/g, (_, p) => `from '${BASE_URL}${p}'`)
+            .replace(/from\s+['"]\.\/([^'"]+)['"]/g, (_, p) => `from '${BASE_URL}/webtalk/${p}'`)
+            .replace('<head>', `<head>\n    <script>window.__WEBTALK_BASE='${BASE_URL}';</script>`);
+          res.writeHead(200, { 'Content-Type': 'text/html; charset=utf-8', 'Cross-Origin-Embedder-Policy': 'credentialless', 'Cross-Origin-Opener-Policy': 'same-origin', 'Cross-Origin-Resource-Policy': 'cross-origin' });
+          return res.end(patched);
+        }
+        let js = content;
+        const ensureExt = (mod) => mod.endsWith('.js') ? mod : mod + '.js';
+        if (js.includes('require(') || js.includes('module.exports')) {
+          js = js.replace(/const\s*\{([^}]+)\}\s*=\s*require\(['"]\.\/([^'"]+)['"]\);?/g, (_, names, mod) => `import {${names}} from '${BASE_URL}/webtalk/${ensureExt(mod)}';`);
+          js = js.replace(/const\s+(\w+)\s*=\s*require\(['"]\.\/([^'"]+)['"]\);?/g, (_, name, mod) => `import ${name} from '${BASE_URL}/webtalk/${ensureExt(mod)}';`);
+          js = js.replace(/module\.exports\s*=\s*\{([^}]+)\};?/, (_, names) => `export {${names.trim().replace(/\s+/g, ' ')} };`);
+        }
+        js = js.replace(/from\s+['"]\.\/([^'"]+)['"]/g, (_, p) => `from '${BASE_URL}/webtalk/${ensureExt(p)}'`);
+        res.writeHead(200, { 'Content-Type': 'application/javascript; charset=utf-8', 'Cross-Origin-Resource-Policy': 'cross-origin' });
+        res.end(js);
+      });
+    }
+    if (req.url.startsWith(BASE_URL)) req.url = req.url.slice(BASE_URL.length) || '/';
+    const origSetHeader = res.setHeader.bind(res);
+    res.setHeader = (name, value) => {
+      if (name.toLowerCase() === 'cross-origin-embedder-policy') return;
+      origSetHeader(name, value);
+    };
+    return webtalkApp(req, res);
+  }
+
+  // Route file upload and fsbrowse requests through Express sub-app
   if (pathOnly.startsWith(BASE_URL + '/api/upload/') || pathOnly.startsWith(BASE_URL + '/files/')) {
     return expressApp(req, res);
   }
 
+  if (req.url === '/favicon.ico' || req.url === BASE_URL + '/favicon.ico') {
+    const svg = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><rect width="100" height="100" rx="20" fill="#3b82f6"/><text x="50" y="68" font-size="50" font-family="sans-serif" font-weight="bold" fill="white" text-anchor="middle">G</text></svg>';
+    res.writeHead(200, { 'Content-Type': 'image/svg+xml', 'Cache-Control': 'public, max-age=86400' });
+    res.end(svg);
+    return;
+  }
+
   if (req.url === '/') { res.writeHead(302, { Location: BASE_URL + '/' }); res.end(); return; }
 
   if (!req.url.startsWith(BASE_URL + '/') && req.url !== BASE_URL) {
@@ -424,16 +490,16 @@ const server = http.createServer(async (req, res) => {
 
     if (routePath === '/api/home' && req.method === 'GET') {
       res.writeHead(200, { 'Content-Type': 'application/json' });
-      res.end(JSON.stringify({ home: process.env.HOME || '/config' }));
+      res.end(JSON.stringify({ home: os.homedir(), cwd: STARTUP_CWD }));
       return;
     }
 
     if (routePath === '/api/folders' && req.method === 'POST') {
       const body = await parseBody(req);
-      const folderPath = body.path || '/config';
+      const folderPath = body.path || STARTUP_CWD;
       try {
         const expandedPath = folderPath.startsWith('~') ?
-          folderPath.replace('~', process.env.HOME || '/config') : folderPath;
+          folderPath.replace('~', os.homedir()) : folderPath;
         const entries = fs.readdirSync(expandedPath, { withFileTypes: true });
         const folders = entries
           .filter(e => e.isDirectory() && !e.name.startsWith('.'))
@@ -452,7 +518,7 @@ const server = http.createServer(async (req, res) => {
       const imagePath = routePath.slice('/api/image/'.length);
       const decodedPath = decodeURIComponent(imagePath);
       const expandedPath = decodedPath.startsWith('~') ?
-        decodedPath.replace('~', process.env.HOME || '/config') : decodedPath;
+        decodedPath.replace('~', os.homedir()) : decodedPath;
       const normalizedPath = path.normalize(expandedPath);
       if (!normalizedPath.startsWith('/') || normalizedPath.includes('..')) {
         res.writeHead(403); res.end('Forbidden'); return;
@@ -510,7 +576,7 @@ function serveFile(filePath, res) {
     if (err) { res.writeHead(500); res.end('Server error'); return; }
     let content = data.toString();
     if (ext === '.html') {
-      const baseTag = `<script>window.__BASE_URL='${BASE_URL}';</script>`;
+      const baseTag = `<script>window.__BASE_URL='${BASE_URL}';</script>\n  <script type="importmap">{"imports":{"webtalk-sdk":"${BASE_URL}/webtalk/sdk.js"}}</script>`;
       content = content.replace('<head>', '<head>\n  ' + baseTag);
       if (watch) {
         content += `\n<script>(function(){const ws=new WebSocket('ws://'+location.host+'${BASE_URL}/hot-reload');ws.onmessage=e=>{if(JSON.parse(e.data).type==='reload')location.reload()};})();</script>`;
@@ -550,12 +616,13 @@ async function processMessageWithStreaming(conversationId, messageId, sessionId,
   const startTime = Date.now();
   activeExecutions.set(conversationId, true);
   queries.setIsStreaming(conversationId, true);
+  queries.updateSession(sessionId, { status: 'active' });
 
   try {
     debugLog(`[stream] Starting: conversationId=${conversationId}, sessionId=${sessionId}`);
 
     const conv = queries.getConversation(conversationId);
-    const cwd = conv?.workingDirectory || '/config';
+    const cwd = conv?.workingDirectory || STARTUP_CWD;
     const resumeSessionId = conv?.claudeSessionId || null;
 
     let allBlocks = [];
@@ -761,7 +828,7 @@ async function processMessage(conversationId, messageId, content, agentId) {
     debugLog(`[processMessage] Starting: conversationId=${conversationId}, agentId=${agentId}`);
 
     const conv = queries.getConversation(conversationId);
-    const cwd = conv?.workingDirectory || '/config';
+    const cwd = conv?.workingDirectory || STARTUP_CWD;
     const resumeSessionId = conv?.claudeSessionId || null;
 
     let contentStr = typeof content === 'object' ? JSON.stringify(content) : content;
@@ -886,7 +953,7 @@ function broadcastSync(event) {
       shouldSend = true;
     } else if (event.conversationId && ws.subscriptions?.has(`conv-${event.conversationId}`)) {
       shouldSend = true;
-    } else if (event.type === 'message_created' || event.type === 'conversation_created' || event.type === 'conversations_updated' || event.type === 'conversation_deleted' || event.type === 'queue_status') {
+    } else if (event.type === 'message_created' || event.type === 'conversation_created' || event.type === 'conversations_updated' || event.type === 'conversation_deleted' || event.type === 'queue_status' || event.type === 'streaming_start' || event.type === 'streaming_complete' || event.type === 'streaming_error') {
       shouldSend = true;
     }
 

package/setup-npm-token.sh

@@ -0,0 +1,68 @@
+#!/bin/bash
+set -e
+
+echo "=========================================="
+echo "npm Granular Access Token Setup (3-Month)"
+echo "=========================================="
+echo ""
+echo "STEP 1: Manual token generation on npm.org"
+echo "=========================================="
+echo ""
+echo "Please follow these steps:"
+echo ""
+echo "1. Open your browser and go to:"
+echo "   https://www.npmjs.com/settings/lanmower/tokens"
+echo ""
+echo "2. Click 'Generate New Token'"
+echo ""
+echo "3. Select 'Granular Access Token'"
+echo ""
+echo "4. Fill in the form:"
+echo "   - Token name: github-actions-3month"
+echo "   - Description: GitHub Actions npm publishing (3 month validity)"
+echo "   - Permissions: Read and write"
+echo "   - Packages: agentgui"
+echo "   - Expiration: 90 days"
+echo "   - Bypass 2FA: CHECKED"
+echo ""
+echo "5. Click 'Generate'"
+echo ""
+echo "6. COPY the token value (shown only once!)"
+echo ""
+echo "=========================================="
+echo "STEP 2: Add token to GitHub Actions secret"
+echo "=========================================="
+echo ""
+read -p "Paste your npm token here: " NPM_TOKEN
+
+if [ -z "$NPM_TOKEN" ]; then
+    echo "Error: Token cannot be empty"
+    exit 1
+fi
+
+echo ""
+echo "Setting GitHub Actions secret..."
+
+gh secret set NPM_TOKEN --body "$NPM_TOKEN" --repo AnEntrypoint/agentgui
+
+echo ""
+echo "Verifying secret was set..."
+gh secret list --repo AnEntrypoint/agentgui | grep NPM_TOKEN
+
+echo ""
+echo "=========================================="
+echo "STEP 3: Test the workflow"
+echo "=========================================="
+echo ""
+echo "Creating test commit to trigger workflow..."
+
+git -C /home/user/agentgui commit --allow-empty -m "test: verify npm publishing with 3-month token"
+git -C /home/user/agentgui push
+
+echo ""
+echo "Monitor the workflow at:"
+echo "https://github.com/AnEntrypoint/agentgui/actions"
+echo ""
+echo "=========================================="
+echo "Setup Complete!"
+echo "=========================================="

package/static/app.js

@@ -494,7 +494,8 @@ class GMGUIApp {
           codeLines.push(lines[i]);
           i++;
         }
-        html += `<div class="code-block" data-language="${this.escapeHtml(lang)}"><pre><code>${this.escapeHtml(codeLines.join('\n'))}</code></pre></div>`;
+        const clCount = codeLines.length;
+        html += `<details class="collapsible-code"><summary class="collapsible-code-summary">${this.escapeHtml(lang)} - ${clCount} line${clCount !== 1 ? 's' : ''}</summary><div class="code-block" data-language="${this.escapeHtml(lang)}"><pre><code>${this.escapeHtml(codeLines.join('\n'))}</code></pre></div></details>`;
         i++;
         continue;
       }
@@ -592,9 +593,10 @@ class GMGUIApp {
         <div class="html-content">${code}</div>
       </div>`;
     } else {
-      return `<div class="code-block" data-language="${this.escapeHtml(language)}">
+      const lcCount = code.split('\n').length;
+      return `<details class="collapsible-code"><summary class="collapsible-code-summary">${this.escapeHtml(language)} - ${lcCount} line${lcCount !== 1 ? 's' : ''}</summary><div class="code-block" data-language="${this.escapeHtml(language)}">
         <pre><code>${this.escapeHtml(code)}</code></pre>
-      </div>`;
+      </div></details>`;
     }
   }