agentgui 1.0.131 → 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

@@ -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.131",
+  "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>`;
@@ -556,7 +622,7 @@ async function processMessageWithStreaming(conversationId, messageId, sessionId,
     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 = [];
@@ -762,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;

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>`;
     }
   }
 

package/static/index.html

@@ -5,9 +5,10 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">
   <meta name="description" content="AgentGUI - Real-time Claude Code Execution Visualization">
   <title>AgentGUI</title>
+  <link rel="icon" type="image/svg+xml" href="/favicon.ico">
 
-  <link href="https://unpkg.com/rippleui@0.14.0/dist/ripple.css" rel="stylesheet">
-  <link href="https://unpkg.com/prism@1.29.0/themes/prism-dark.css" rel="stylesheet">
+  <link href="https://cdn.jsdelivr.net/npm/rippleui@1.12.1/dist/css/styles.css" rel="stylesheet">
+  <link href="https://cdn.jsdelivr.net/npm/prismjs@1.29.0/themes/prism-dark.css" rel="stylesheet">
   <link href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.11.1/styles/github-dark.min.css" rel="stylesheet">
   <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.11.1/highlight.min.js"></script>
 
@@ -821,6 +822,7 @@
     /* ===== File browser ===== */
     .file-browser-container { flex:1; min-height:0; overflow:hidden; }
     .file-browser-iframe { width:100%; height:100%; border:none; }
+    .voice-iframe { width:100%; height:100%; border:none; }
 
     /* ===== RESPONSIVE: MOBILE ===== */
     @media (max-width: 768px) {
@@ -914,6 +916,191 @@
       scrollbar-color: #475569 transparent;
     }
 
+    /* ===== VOICE VIEW ===== */
+    .voice-container {
+      flex: 1;
+      min-height: 0;
+      overflow: hidden;
+      display: flex;
+      flex-direction: column;
+    }
+
+    .voice-scroll {
+      flex: 1;
+      overflow-y: auto;
+      overflow-x: hidden;
+      padding: 1.5rem 2rem;
+      -webkit-overflow-scrolling: touch;
+    }
+
+    .voice-messages {
+      display: flex;
+      flex-direction: column;
+      gap: 1rem;
+    }
+
+    .voice-block {
+      padding: 1rem 1.25rem;
+      border-radius: 0.75rem;
+      background: var(--color-bg-secondary);
+      line-height: 1.7;
+      font-size: 1rem;
+      max-width: 85%;
+      margin-right: auto;
+      position: relative;
+    }
+
+    .voice-block.speaking {
+      box-shadow: 0 0 0 2px var(--color-primary);
+    }
+
+    .voice-block-user {
+      background: var(--color-primary);
+      color: white;
+      margin-left: auto;
+      margin-right: 0;
+    }
+
+    .voice-input-section {
+      flex-shrink: 0;
+      background: var(--color-bg-primary);
+      padding: 0.75rem 1rem;
+      border-top: 1px solid var(--color-border);
+    }
+
+    .voice-input-wrapper {
+      display: flex;
+      gap: 0.5rem;
+      align-items: center;
+    }
+
+    .voice-transcript {
+      flex: 1;
+      min-height: 40px;
+      max-height: 100px;
+      padding: 0.5rem 0.875rem;
+      border-radius: 0.75rem;
+      background: var(--color-bg-secondary);
+      color: var(--color-text-primary);
+      font-size: 0.9375rem;
+      line-height: 1.5;
+      overflow-y: auto;
+      white-space: pre-wrap;
+      word-break: break-word;
+    }
+
+    .voice-transcript:empty::before {
+      content: attr(data-placeholder);
+      color: var(--color-text-secondary);
+    }
+
+    .voice-mic-btn {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 44px;
+      height: 44px;
+      background: var(--color-bg-secondary);
+      color: var(--color-text-secondary);
+      border: 2px solid var(--color-border);
+      border-radius: 50%;
+      cursor: pointer;
+      flex-shrink: 0;
+      transition: all 0.2s;
+    }
+
+    .voice-mic-btn:hover {
+      border-color: var(--color-primary);
+      color: var(--color-primary);
+    }
+
+    .voice-mic-btn.loading {
+      opacity: 0.5;
+      cursor: wait;
+      animation: mic-loading-spin 2s linear infinite;
+    }
+
+    @keyframes mic-loading-spin {
+      0% { border-color: var(--color-border); }
+      50% { border-color: var(--color-primary); }
+      100% { border-color: var(--color-border); }
+    }
+
+    .voice-mic-btn.recording {
+      background: var(--color-error);
+      border-color: var(--color-error);
+      color: white;
+      animation: pulse 1s ease-in-out infinite;
+    }
+
+    .voice-mic-btn svg {
+      width: 20px;
+      height: 20px;
+    }
+
+    .voice-send-btn {
+      flex-shrink: 0;
+    }
+
+    .voice-tts-controls {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      margin-top: 0.5rem;
+      font-size: 0.8rem;
+      color: var(--color-text-secondary);
+    }
+
+    .voice-toggle-label {
+      display: flex;
+      align-items: center;
+      gap: 0.375rem;
+      cursor: pointer;
+      user-select: none;
+    }
+
+    .voice-toggle-label input[type="checkbox"] {
+      accent-color: var(--color-primary);
+    }
+
+    .voice-stop-btn {
+      padding: 0.25rem 0.75rem;
+      background: var(--color-bg-secondary);
+      border: 1px solid var(--color-border);
+      border-radius: 0.375rem;
+      cursor: pointer;
+      font-size: 0.75rem;
+      color: var(--color-text-secondary);
+      transition: all 0.15s;
+    }
+
+    .voice-stop-btn:hover {
+      background: var(--color-error);
+      color: white;
+      border-color: var(--color-error);
+    }
+
+    .voice-empty {
+      text-align: center;
+      color: var(--color-text-secondary);
+      padding: 4rem 2rem;
+      font-size: 1rem;
+    }
+
+    .voice-empty-icon {
+      font-size: 3rem;
+      margin-bottom: 1rem;
+      opacity: 0.3;
+    }
+
+    .voice-block .voice-result-stats {
+      font-size: 0.8rem;
+      color: var(--color-text-secondary);
+      margin-top: 0.5rem;
+      padding-top: 0.5rem;
+      border-top: 1px solid var(--color-border);
+    }
+
     /* ===== RESPONSIVE: TABLET ===== */
     @media (min-width: 769px) and (max-width: 1024px) {
       :root { --sidebar-width: 260px; }
@@ -1649,6 +1836,7 @@
       <div class="view-toggle-bar" id="viewToggleBar" style="display:none;">
         <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>
       </div>
 
       <!-- Messages scroll area -->
@@ -1666,7 +1854,40 @@
 
       <!-- File browser (hidden by default) -->
       <div id="fileBrowserContainer" class="file-browser-container" style="display:none;">
-        <iframe id="fileBrowserIframe" class="file-browser-iframe" sandbox="allow-same-origin allow-scripts allow-forms allow-popups"></iframe>
+        <iframe id="fileBrowserIframe" class="file-browser-iframe"></iframe>
+      </div>
+
+      <!-- Voice STT/TTS view -->
+      <div id="voiceContainer" class="voice-container" style="display:none;">
+        <div id="voiceScroll" class="voice-scroll">
+          <div class="voice-messages" id="voiceMessages"></div>
+        </div>
+        <div class="voice-input-section">
+          <div class="voice-input-wrapper">
+            <select class="agent-selector voice-agent-selector" data-voice-agent-selector title="Select agent"></select>
+            <div class="voice-transcript" id="voiceTranscript" data-placeholder="Tap mic and speak..."></div>
+            <button class="voice-mic-btn" id="voiceMicBtn" title="Toggle recording" aria-label="Voice input">
+              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                <path d="M12 1a3 3 0 0 0-3 3v8a3 3 0 0 0 6 0V4a3 3 0 0 0-3-3z"/>
+                <path d="M19 10v2a7 7 0 0 1-14 0v-2"/>
+                <line x1="12" y1="19" x2="12" y2="23"/>
+                <line x1="8" y1="23" x2="16" y2="23"/>
+              </svg>
+            </button>
+            <button class="send-btn voice-send-btn" id="voiceSendBtn" title="Send message" aria-label="Send message">
+              <svg viewBox="0 0 24 24" fill="currentColor">
+                <path d="M2.01 21L23 12 2.01 3 2 10l15 2-15 2z"/>
+              </svg>
+            </button>
+          </div>
+          <div class="voice-tts-controls">
+            <label class="voice-toggle-label">
+              <input type="checkbox" id="voiceTTSToggle" checked>
+              <span>Auto-speak responses</span>
+            </label>
+            <button class="voice-stop-btn" id="voiceStopSpeaking" title="Stop speaking">Stop</button>
+          </div>
+        </div>
       </div>
 
       <!-- Input area: fixed at bottom -->
@@ -1730,6 +1951,7 @@
   <script src="/gm/js/ui-components.js"></script>
   <script src="/gm/js/conversations.js"></script>
   <script src="/gm/js/client.js"></script>
+  <script type="module" src="/gm/js/voice.js"></script>
   <script src="/gm/js/features.js"></script>
 
   <script>