agentgui 1.0.146 → 1.0.148

package/lib/speech.js

@@ -1,4 +1,3 @@
-import { pipeline, env } from '@huggingface/transformers';
 import { createRequire } from 'module';
 import fs from 'fs';
 import path from 'path';
@@ -13,13 +12,21 @@ const SPEAKER_EMBEDDINGS_URL = 'https://huggingface.co/datasets/Xenova/transform
 const SPEAKER_EMBEDDINGS_PATH = path.join(DATA_DIR, 'speaker_embeddings.bin');
 const SAMPLE_RATE_TTS = 16000;
 const SAMPLE_RATE_STT = 16000;
+const MIN_WAV_SIZE = 44;
 
+let transformersModule = null;
 let sttPipeline = null;
 let ttsPipeline = null;
 let speakerEmbeddings = null;
 let sttLoading = false;
 let ttsLoading = false;
 
+async function loadTransformers() {
+  if (transformersModule) return transformersModule;
+  transformersModule = await import('@huggingface/transformers');
+  return transformersModule;
+}
+
 function whisperModelPath() {
   try {
     const webtalkDir = path.dirname(require.resolve('webtalk'));
@@ -46,10 +53,12 @@ async function getSTT() {
   if (sttPipeline) return sttPipeline;
   if (sttLoading) {
     while (sttLoading) await new Promise(r => setTimeout(r, 100));
+    if (!sttPipeline) throw new Error('STT pipeline failed to load');
     return sttPipeline;
   }
   sttLoading = true;
   try {
+    const { pipeline, env } = await loadTransformers();
     const modelPath = whisperModelPath();
     const isLocal = !modelPath.includes('/') || fs.existsSync(modelPath);
     env.allowLocalModels = true;
@@ -60,6 +69,9 @@ async function getSTT() {
       local_files_only: isLocal,
     });
     return sttPipeline;
+  } catch (err) {
+    sttPipeline = null;
+    throw new Error('STT model load failed: ' + err.message);
   } finally {
     sttLoading = false;
   }
@@ -69,10 +81,12 @@ async function getTTS() {
   if (ttsPipeline) return ttsPipeline;
   if (ttsLoading) {
     while (ttsLoading) await new Promise(r => setTimeout(r, 100));
+    if (!ttsPipeline) throw new Error('TTS pipeline failed to load');
     return ttsPipeline;
   }
   ttsLoading = true;
   try {
+    const { pipeline, env } = await loadTransformers();
     env.allowRemoteModels = true;
     ttsPipeline = await pipeline('text-to-speech', 'Xenova/speecht5_tts', {
       device: 'cpu',
@@ -80,6 +94,9 @@ async function getTTS() {
     });
     await ensureSpeakerEmbeddings();
     return ttsPipeline;
+  } catch (err) {
+    ttsPipeline = null;
+    throw new Error('TTS model load failed: ' + err.message);
   } finally {
     ttsLoading = false;
   }
@@ -159,18 +176,44 @@ function encodeWav(float32Audio, sampleRate) {
 }
 
 async function transcribe(audioBuffer) {
-  const stt = await getSTT();
-  let audio;
   const buf = Buffer.isBuffer(audioBuffer) ? audioBuffer : Buffer.from(audioBuffer);
+  if (buf.length < MIN_WAV_SIZE) {
+    throw new Error('Audio too short (' + buf.length + ' bytes)');
+  }
+  let audio;
   const isWav = buf.length > 4 && buf.toString('ascii', 0, 4) === 'RIFF';
   if (isWav) {
-    const decoded = decodeWavToFloat32(buf);
+    let decoded;
+    try {
+      decoded = decodeWavToFloat32(buf);
+    } catch (err) {
+      throw new Error('WAV decode failed: ' + err.message);
+    }
+    if (!decoded.audio || decoded.audio.length === 0) {
+      throw new Error('WAV contains no audio samples');
+    }
     audio = resampleTo16k(decoded.audio, decoded.sampleRate);
   } else {
-    audio = new Float32Array(buf.buffer, buf.byteOffset, buf.byteLength / 4);
+    const sampleCount = Math.floor(buf.byteLength / 4);
+    if (sampleCount === 0) throw new Error('Audio buffer too small');
+    const aligned = new ArrayBuffer(sampleCount * 4);
+    new Uint8Array(aligned).set(buf.subarray(0, sampleCount * 4));
+    audio = new Float32Array(aligned);
+  }
+  if (audio.length < 100) {
+    throw new Error('Audio too short for transcription');
+  }
+  const stt = await getSTT();
+  let result;
+  try {
+    result = await stt(audio);
+  } catch (err) {
+    throw new Error('Transcription engine error: ' + err.message);
+  }
+  if (!result || typeof result.text !== 'string') {
+    return '';
   }
-  const result = await stt(audio);
-  return result.text || '';
+  return result.text;
 }
 
 async function synthesize(text) {

package/package.json

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

package/server.js

@@ -8,14 +8,18 @@ import { execSync } from 'child_process';
 import { createRequire } from 'module';
 import { queries } from './database.js';
 import { runClaudeWithStreaming } from './lib/claude-runner.js';
-import { transcribe, synthesize, getStatus as getSpeechStatus } from './lib/speech.js';
+let speechModule = null;
+async function getSpeech() {
+  if (!speechModule) speechModule = await import('./lib/speech.js');
+  return speechModule;
+}
 
 const require = createRequire(import.meta.url);
 const express = require('express');
 const Busboy = require('busboy');
 const fsbrowse = require('fsbrowse');
 
-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.`;
+const SYSTEM_PROMPT = `Write all responses as clean semantic HTML. Use tags like <h3>, <p>, <ul>, <li>, <ol>, <table>, <code>, <pre>, <strong>, <em>, <a>, <blockquote>, <details>, <summary>. Your HTML will be rendered directly in a styled container that already provides fonts, colors, spacing, and dark mode support. Do not include <html>, <head>, <body>, <style>, or <script> tags. Do not use inline styles unless necessary for layout like tables. Do not use CSS class names. Just write semantic HTML content.`;
 
 const activeExecutions = new Map();
 const messageQueues = new Map();
@@ -327,6 +331,27 @@ const server = http.createServer(async (req, res) => {
       return;
     }
 
+    const fullLoadMatch = pathOnly.match(/^\/api\/conversations\/([^/]+)\/full$/);
+    if (fullLoadMatch && req.method === 'GET') {
+      const conversationId = fullLoadMatch[1];
+      const conv = queries.getConversation(conversationId);
+      if (!conv) { res.writeHead(404, { 'Content-Type': 'application/json' }); res.end(JSON.stringify({ error: 'Not found' })); return; }
+      const latestSession = queries.getLatestSession(conversationId);
+      const isActivelyStreaming = activeExecutions.has(conversationId) ||
+        (latestSession && latestSession.status === 'active');
+      const chunks = queries.getConversationChunks(conversationId);
+      const msgResult = queries.getPaginatedMessages(conversationId, 100, 0);
+      res.writeHead(200, { 'Content-Type': 'application/json' });
+      res.end(JSON.stringify({
+        conversation: conv,
+        isActivelyStreaming,
+        latestSession,
+        chunks,
+        messages: msgResult.messages
+      }));
+      return;
+    }
+
     const conversationChunksMatch = pathOnly.match(/^\/api\/conversations\/([^/]+)\/chunks$/);
     if (conversationChunksMatch && req.method === 'GET') {
       const conversationId = conversationChunksMatch[1];
@@ -450,13 +475,16 @@ const server = http.createServer(async (req, res) => {
           res.end(JSON.stringify({ error: 'No audio data' }));
           return;
         }
+        const { transcribe } = await getSpeech();
         const text = await transcribe(audioBuffer);
         res.writeHead(200, { 'Content-Type': 'application/json' });
-        res.end(JSON.stringify({ text: text.trim() }));
+        res.end(JSON.stringify({ text: (text || '').trim() }));
       } catch (err) {
         debugLog('[STT] Error: ' + err.message);
-        res.writeHead(500, { 'Content-Type': 'application/json' });
-        res.end(JSON.stringify({ error: err.message }));
+        if (!res.headersSent) {
+          res.writeHead(500, { 'Content-Type': 'application/json' });
+        }
+        res.end(JSON.stringify({ error: err.message || 'STT failed' }));
       }
       return;
     }
@@ -470,20 +498,29 @@ const server = http.createServer(async (req, res) => {
           res.end(JSON.stringify({ error: 'No text provided' }));
           return;
         }
+        const { synthesize } = await getSpeech();
         const wavBuffer = await synthesize(text);
         res.writeHead(200, { 'Content-Type': 'audio/wav', 'Content-Length': wavBuffer.length });
         res.end(wavBuffer);
       } catch (err) {
         debugLog('[TTS] Error: ' + err.message);
-        res.writeHead(500, { 'Content-Type': 'application/json' });
-        res.end(JSON.stringify({ error: err.message }));
+        if (!res.headersSent) {
+          res.writeHead(500, { 'Content-Type': 'application/json' });
+        }
+        res.end(JSON.stringify({ error: err.message || 'TTS failed' }));
       }
       return;
     }
 
     if (routePath === '/api/speech-status' && req.method === 'GET') {
-      res.writeHead(200, { 'Content-Type': 'application/json' });
-      res.end(JSON.stringify(getSpeechStatus()));
+      try {
+        const { getStatus } = await getSpeech();
+        res.writeHead(200, { 'Content-Type': 'application/json' });
+        res.end(JSON.stringify(getStatus()));
+      } catch (err) {
+        res.writeHead(200, { 'Content-Type': 'application/json' });
+        res.end(JSON.stringify({ sttReady: false, ttsReady: false, sttLoading: false, ttsLoading: false }));
+      }
       return;
     }
 
@@ -522,7 +559,7 @@ const server = http.createServer(async (req, res) => {
         const mimeTypes = { '.png': 'image/png', '.jpg': 'image/jpeg', '.jpeg': 'image/jpeg', '.gif': 'image/gif', '.webp': 'image/webp', '.svg': 'image/svg+xml' };
         const contentType = mimeTypes[ext] || 'application/octet-stream';
         const fileContent = fs.readFileSync(normalizedPath);
-        res.writeHead(200, { 'Content-Type': contentType, 'Cache-Control': 'public, max-age=3600' });
+        res.writeHead(200, { 'Content-Type': contentType, 'Cache-Control': 'no-cache' });
         res.end(fileContent);
       } catch (err) {
         res.writeHead(400, { 'Content-Type': 'application/json' });
@@ -574,7 +611,7 @@ function serveFile(filePath, res) {
       res.writeHead(200, {
         'Content-Type': contentType,
         'Content-Length': stats.size,
-        'Cache-Control': 'public, max-age=3600'
+        'Cache-Control': 'no-cache, must-revalidate'
       });
       fs.createReadStream(filePath).pipe(res);
     });

package/static/index.html

@@ -1106,6 +1106,26 @@
       border-top: 1px solid var(--color-border);
     }
 
+    .voice-reread-btn {
+      position: absolute;
+      top: 0.5rem;
+      right: 0.5rem;
+      background: none;
+      border: 1px solid var(--color-border);
+      border-radius: 0.25rem;
+      cursor: pointer;
+      padding: 0.25rem;
+      color: var(--color-text-secondary);
+      opacity: 0;
+      transition: opacity 0.15s, background-color 0.15s;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+
+    .voice-block:hover .voice-reread-btn { opacity: 1; }
+    .voice-reread-btn:hover { background: var(--color-bg-primary); color: var(--color-primary); }
+
     /* ===== RESPONSIVE: TABLET ===== */
     @media (min-width: 769px) and (max-width: 1024px) {
       :root { --sidebar-width: 260px; }

package/static/js/client.js

@@ -420,7 +420,6 @@ class AgentGUIClient {
     if (outputEl) {
       let messagesEl = outputEl.querySelector('.conversation-messages');
       if (!messagesEl) {
-        // Load existing conversation history before starting the stream
         const conv = this.state.currentConversation;
         const wdInfo = conv?.workingDirectory ? ` - ${this.escapeHtml(conv.workingDirectory)}` : '';
         outputEl.innerHTML = `
@@ -431,14 +430,16 @@ class AgentGUIClient {
           <div class="conversation-messages"></div>
         `;
         messagesEl = outputEl.querySelector('.conversation-messages');
-        // Load prior messages into the container
         try {
-          const msgResp = await fetch(window.__BASE_URL + `/api/conversations/${data.conversationId}/messages`);
-          if (msgResp.ok) {
-            const msgData = await msgResp.json();
-            const priorChunks = await this.fetchChunks(data.conversationId, 0);
+          const fullResp = await fetch(window.__BASE_URL + `/api/conversations/${data.conversationId}/full`);
+          if (fullResp.ok) {
+            const fullData = await fullResp.json();
+            const priorChunks = (fullData.chunks || []).map(c => ({
+              ...c,
+              block: typeof c.data === 'string' ? JSON.parse(c.data) : c.data
+            }));
+            const userMsgs = (fullData.messages || []).filter(m => m.role === 'user');
             if (priorChunks.length > 0) {
-              const userMsgs = (msgData.messages || []).filter(m => m.role === 'user');
               const sessionOrder = [];
               const sessionGroups = {};
               priorChunks.forEach(c => {
@@ -468,7 +469,7 @@ class AgentGUIClient {
                 messagesEl.insertAdjacentHTML('beforeend', `<div class="message message-user" data-msg-id="${m.id}"><div class="message-role">User</div>${this.renderMessageContent(m.content)}<div class="message-timestamp">${new Date(m.created_at).toLocaleString()}</div></div>`);
               }
             } else {
-              messagesEl.innerHTML = this.renderMessages(msgData.messages || []);
+              messagesEl.innerHTML = this.renderMessages(fullData.messages || []);
             }
           }
         } catch (e) {
@@ -516,7 +517,7 @@ class AgentGUIClient {
     if (block.type === 'text' && block.text) {
       const text = block.text;
       if (this.isHtmlContent(text)) {
-        return `<div class="html-content bg-white dark:bg-gray-800 p-4 rounded border border-gray-200 dark:border-gray-700 overflow-x-auto">${text}</div>`;
+        return `<div class="html-content bg-white dark:bg-gray-800 p-4 rounded border border-gray-200 dark:border-gray-700 overflow-x-auto">${this.sanitizeHtml(text)}</div>`;
       }
       const parts = this.parseMarkdownCodeBlocks(text);
       if (parts.length === 1 && parts[0].type === 'text') {
@@ -524,7 +525,7 @@ class AgentGUIClient {
       }
       return parts.map(part => {
         if (part.type === 'html') {
-          return `<div class="html-content bg-white dark:bg-gray-800 p-4 rounded border border-gray-200 dark:border-gray-700 overflow-x-auto">${part.content}</div>`;
+          return `<div class="html-content bg-white dark:bg-gray-800 p-4 rounded border border-gray-200 dark:border-gray-700 overflow-x-auto">${this.sanitizeHtml(part.content)}</div>`;
         } else if (part.type === 'code') {
           return this.renderCodeBlock(part.language, part.code);
         }
@@ -682,9 +683,17 @@ class AgentGUIClient {
   }
 
   isHtmlContent(text) {
-    const openTag = /<(?:div|table|section|article|form|ul|ol|dl|nav|header|footer|main|aside|figure|details|summary|h[1-6])\b[^>]*>/i;
-    const closeTag = /<\/(?:div|table|section|article|form|ul|ol|dl|nav|header|footer|main|aside|figure|details|summary|h[1-6])>/i;
-    return openTag.test(text) && closeTag.test(text);
+    const htmlPattern = /<(?:div|table|section|article|ul|ol|dl|nav|header|footer|main|aside|figure|details|summary|h[1-6]|p|blockquote|pre|code|span|strong|em|a|img|br|hr|li|td|tr|th|thead|tbody|tfoot)\b[^>]*>/i;
+    return htmlPattern.test(text);
+  }
+
+  sanitizeHtml(html) {
+    const dangerous = /<\s*\/?\s*(script|iframe|object|embed|applet|form|input|button|select|textarea)\b[^>]*>/gi;
+    let cleaned = html.replace(dangerous, '');
+    cleaned = cleaned.replace(/\s+on\w+\s*=\s*["'][^"']*["']/gi, '');
+    cleaned = cleaned.replace(/\s+on\w+\s*=\s*[^\s>]+/gi, '');
+    cleaned = cleaned.replace(/javascript\s*:/gi, '');
+    return cleaned;
   }
 
   parseMarkdownCodeBlocks(text) {
@@ -735,7 +744,7 @@ class AgentGUIClient {
             Rendered HTML
           </div>
           <div class="html-content bg-white dark:bg-gray-800 p-4 rounded border border-gray-200 dark:border-gray-700 overflow-x-auto">
-            ${code}
+            ${this.sanitizeHtml(code)}
           </div>
         </div>
       `;
@@ -751,7 +760,7 @@ class AgentGUIClient {
   renderMessageContent(content) {
     if (typeof content === 'string') {
       if (this.isHtmlContent(content)) {
-        return `<div class="message-text"><div class="html-content bg-white dark:bg-gray-800 p-4 rounded border border-gray-200 dark:border-gray-700 overflow-x-auto">${content}</div></div>`;
+        return `<div class="message-text"><div class="html-content bg-white dark:bg-gray-800 p-4 rounded border border-gray-200 dark:border-gray-700 overflow-x-auto">${this.sanitizeHtml(content)}</div></div>`;
       }
       return `<div class="message-text">${this.escapeHtml(content)}</div>`;
     } else if (content && typeof content === 'object' && content.type === 'claude_execution') {
@@ -762,7 +771,7 @@ class AgentGUIClient {
             const parts = this.parseMarkdownCodeBlocks(block.text);
             parts.forEach(part => {
               if (part.type === 'html') {
-                html += `<div class="message-text"><div class="html-content bg-white dark:bg-gray-800 p-4 rounded border border-gray-200 dark:border-gray-700 overflow-x-auto">${part.content}</div></div>`;
+                html += `<div class="message-text"><div class="html-content bg-white dark:bg-gray-800 p-4 rounded border border-gray-200 dark:border-gray-700 overflow-x-auto">${this.sanitizeHtml(part.content)}</div></div>`;
               } else if (part.type === 'text') {
                 html += `<div class="message-text">${this.escapeHtml(part.content)}</div>`;
               } else if (part.type === 'code') {
@@ -778,7 +787,7 @@ class AgentGUIClient {
                     Rendered HTML
                   </div>
                   <div class="html-content bg-white dark:bg-gray-800 p-4 rounded border border-gray-200 dark:border-gray-700 overflow-x-auto">
-                    ${block.code}
+                    ${this.sanitizeHtml(block.code)}
                   </div>
                 </div>
               `;
@@ -1166,135 +1175,64 @@ class AgentGUIClient {
 
   async loadConversationMessages(conversationId) {
     try {
-      // Save scroll position of current conversation before switching
       if (this.state.currentConversation?.id) {
         this.saveScrollPosition(this.state.currentConversation.id);
       }
-
-      // Stop any existing polling when switching conversations
       this.stopChunkPolling();
-
-      // Clear streaming state from previous conversation view
-      // (the actual streaming continues on the server, we just stop tracking it on the UI side)
       if (this.state.isStreaming && this.state.currentConversation?.id !== conversationId) {
         this.state.isStreaming = false;
         this.state.currentSession = null;
       }
 
-      const convResponse = await fetch(window.__BASE_URL + `/api/conversations/${conversationId}`);
-      const { conversation, isActivelyStreaming, latestSession } = await convResponse.json();
-      this.state.currentConversation = conversation;
-
-      // Update URL with conversation ID
       this.updateUrlForConversation(conversationId);
-
       if (this.wsManager.isConnected) {
         this.wsManager.sendMessage({ type: 'subscribe', conversationId });
       }
 
-      // Check if there's an active streaming session that needs to be resumed
-      // isActivelyStreaming comes from the server checking both in-memory activeExecutions map
-      // AND database session status. Use it as primary signal, with session status as confirmation.
-      const shouldResumeStreaming = isActivelyStreaming && latestSession &&
-        (latestSession.status === 'active' || latestSession.status === 'pending');
+      const resp = await fetch(window.__BASE_URL + `/api/conversations/${conversationId}/full`);
+      if (!resp.ok) throw new Error(`HTTP ${resp.status}`);
+      const { conversation, isActivelyStreaming, latestSession, chunks: rawChunks, messages: allMessages } = await resp.json();
 
-      // Try to fetch chunks first (Wave 3 architecture)
-      try {
-        const chunks = await this.fetchChunks(conversationId, 0);
-
-        const outputEl = document.getElementById('output');
-        if (outputEl) {
-          const wdInfo = conversation.workingDirectory ? ` - ${this.escapeHtml(conversation.workingDirectory)}` : '';
-          outputEl.innerHTML = `
-            <div class="conversation-header">
-              <h2>${this.escapeHtml(conversation.title || 'Conversation')}</h2>
-              <p class="text-secondary">${conversation.agentType || 'unknown'} - ${new Date(conversation.created_at).toLocaleDateString()}${wdInfo}</p>
-            </div>
-            <div class="conversation-messages"></div>
-          `;
-
-          // Render all chunks
-          const messagesEl = outputEl.querySelector('.conversation-messages');
-          if (chunks.length > 0) {
-            // Fetch user messages to interleave with session chunks
-            let userMessages = [];
-            try {
-              const msgResp = await fetch(window.__BASE_URL + `/api/conversations/${conversationId}/messages`);
-              if (msgResp.ok) {
-                const msgData = await msgResp.json();
-                userMessages = (msgData.messages || []).filter(m => m.role === 'user');
-              }
-            } catch (_) {}
-
-            // Group chunks by session, preserving order
-            const sessionOrder = [];
-            const sessionChunks = {};
-            chunks.forEach(chunk => {
-              if (!sessionChunks[chunk.sessionId]) {
-                sessionChunks[chunk.sessionId] = [];
-                sessionOrder.push(chunk.sessionId);
-              }
-              sessionChunks[chunk.sessionId].push(chunk);
-            });
+      this.state.currentConversation = conversation;
 
-            // Build a timeline: match user messages to sessions by timestamp
-            let userMsgIdx = 0;
-            sessionOrder.forEach((sessionId) => {
-              const sessionChunkList = sessionChunks[sessionId];
-              const sessionStart = sessionChunkList[0].created_at;
-
-              // Render user messages that came before this session
-              while (userMsgIdx < userMessages.length && userMessages[userMsgIdx].created_at <= sessionStart) {
-                const msg = userMessages[userMsgIdx];
-                const userDiv = document.createElement('div');
-                userDiv.className = 'message message-user';
-                userDiv.setAttribute('data-msg-id', msg.id);
-                userDiv.innerHTML = `
-                  <div class="message-role">User</div>
-                  ${this.renderMessageContent(msg.content)}
-                  <div class="message-timestamp">${new Date(msg.created_at).toLocaleString()}</div>
-                `;
-                messagesEl.appendChild(userDiv);
-                userMsgIdx++;
-              }
+      const chunks = (rawChunks || []).map(chunk => ({
+        ...chunk,
+        block: typeof chunk.data === 'string' ? JSON.parse(chunk.data) : chunk.data
+      }));
+      const userMessages = (allMessages || []).filter(m => m.role === 'user');
 
-              const isCurrentActiveSession = shouldResumeStreaming && latestSession && latestSession.id === sessionId;
-              const messageDiv = document.createElement('div');
-              messageDiv.className = `message message-assistant${isCurrentActiveSession ? ' streaming-message' : ''}`;
-              messageDiv.id = isCurrentActiveSession ? `streaming-${sessionId}` : `message-${sessionId}`;
-              messageDiv.innerHTML = '<div class="message-role">Assistant</div><div class="message-blocks streaming-blocks"></div>';
-
-              const blocksEl = messageDiv.querySelector('.message-blocks');
-              sessionChunkList.forEach(chunk => {
-                if (chunk.block && chunk.block.type) {
-                  const element = this.renderer.renderBlock(chunk.block, chunk);
-                  if (element) {
-                    blocksEl.appendChild(element);
-                  }
-                }
-              });
+      const shouldResumeStreaming = isActivelyStreaming && latestSession &&
+        (latestSession.status === 'active' || latestSession.status === 'pending');
 
-              if (isCurrentActiveSession) {
-                const indicatorDiv = document.createElement('div');
-                indicatorDiv.className = 'streaming-indicator';
-                indicatorDiv.style = 'display:flex;align-items:center;gap:0.5rem;padding:0.5rem 0;color:var(--color-text-secondary);font-size:0.875rem;';
-                indicatorDiv.innerHTML = `
-                  <span class="animate-spin" style="display:inline-block;width:1rem;height:1rem;border:2px solid var(--color-border);border-top-color:var(--color-primary);border-radius:50%;"></span>
-                  <span class="streaming-indicator-label">Processing...</span>
-                `;
-                messageDiv.appendChild(indicatorDiv);
-              } else {
-                const ts = document.createElement('div');
-                ts.className = 'message-timestamp';
-                ts.textContent = new Date(sessionChunkList[sessionChunkList.length - 1].created_at).toLocaleString();
-                messageDiv.appendChild(ts);
-              }
+      const outputEl = document.getElementById('output');
+      if (outputEl) {
+        const wdInfo = conversation.workingDirectory ? ` - ${this.escapeHtml(conversation.workingDirectory)}` : '';
+        outputEl.innerHTML = `
+          <div class="conversation-header">
+            <h2>${this.escapeHtml(conversation.title || 'Conversation')}</h2>
+            <p class="text-secondary">${conversation.agentType || 'unknown'} - ${new Date(conversation.created_at).toLocaleDateString()}${wdInfo}</p>
+          </div>
+          <div class="conversation-messages"></div>
+        `;
 
-              messagesEl.appendChild(messageDiv);
-            });
+        const messagesEl = outputEl.querySelector('.conversation-messages');
+        if (chunks.length > 0) {
+          const sessionOrder = [];
+          const sessionChunks = {};
+          chunks.forEach(chunk => {
+            if (!sessionChunks[chunk.sessionId]) {
+              sessionChunks[chunk.sessionId] = [];
+              sessionOrder.push(chunk.sessionId);
+            }
+            sessionChunks[chunk.sessionId].push(chunk);
+          });
+
+          let userMsgIdx = 0;
+          sessionOrder.forEach((sessionId) => {
+            const sessionChunkList = sessionChunks[sessionId];
+            const sessionStart = sessionChunkList[0].created_at;
 
-            // Render any remaining user messages after the last session
-            while (userMsgIdx < userMessages.length) {
+            while (userMsgIdx < userMessages.length && userMessages[userMsgIdx].created_at <= sessionStart) {
               const msg = userMessages[userMsgIdx];
               const userDiv = document.createElement('div');
               userDiv.className = 'message message-user';
@@ -1307,78 +1245,83 @@ class AgentGUIClient {
               messagesEl.appendChild(userDiv);
               userMsgIdx++;
             }
-          } else {
-            // Fall back to messages if no chunks
-            const messagesResponse = await fetch(window.__BASE_URL + `/api/conversations/${conversationId}/messages`);
-            if (messagesResponse.ok) {
-              const messagesData = await messagesResponse.json();
-              messagesEl.innerHTML = this.renderMessages(messagesData.messages || []);
-            }
-          }
 
-          // Resume streaming if needed
-          if (shouldResumeStreaming && latestSession) {
-            console.log('Resuming live streaming for session:', latestSession.id);
-
-            // Set streaming state
-            this.state.isStreaming = true;
-            this.state.currentSession = {
-              id: latestSession.id,
-              conversationId: conversationId,
-              agentId: conversation.agentType || 'claude-code',
-              startTime: latestSession.created_at
-            };
-
-            // Subscribe to WebSocket updates for BOTH conversation and session
-            if (this.wsManager.isConnected) {
-              this.wsManager.subscribeToSession(latestSession.id);
-              this.wsManager.sendMessage({ type: 'subscribe', conversationId });
-            }
+            const isCurrentActiveSession = shouldResumeStreaming && latestSession && latestSession.id === sessionId;
+            const messageDiv = document.createElement('div');
+            messageDiv.className = `message message-assistant${isCurrentActiveSession ? ' streaming-message' : ''}`;
+            messageDiv.id = isCurrentActiveSession ? `streaming-${sessionId}` : `message-${sessionId}`;
+            messageDiv.innerHTML = '<div class="message-role">Assistant</div><div class="message-blocks streaming-blocks"></div>';
+
+            const blocksEl = messageDiv.querySelector('.message-blocks');
+            sessionChunkList.forEach(chunk => {
+              if (chunk.block && chunk.block.type) {
+                const element = this.renderer.renderBlock(chunk.block, chunk);
+                if (element) blocksEl.appendChild(element);
+              }
+            });
 
-            // Update URL with session ID
-            this.updateUrlForConversation(conversationId, latestSession.id);
+            if (isCurrentActiveSession) {
+              const indicatorDiv = document.createElement('div');
+              indicatorDiv.className = 'streaming-indicator';
+              indicatorDiv.style = 'display:flex;align-items:center;gap:0.5rem;padding:0.5rem 0;color:var(--color-text-secondary);font-size:0.875rem;';
+              indicatorDiv.innerHTML = `
+                <span class="animate-spin" style="display:inline-block;width:1rem;height:1rem;border:2px solid var(--color-border);border-top-color:var(--color-primary);border-radius:50%;"></span>
+                <span class="streaming-indicator-label">Processing...</span>
+              `;
+              messageDiv.appendChild(indicatorDiv);
+            } else {
+              const ts = document.createElement('div');
+              ts.className = 'message-timestamp';
+              ts.textContent = new Date(sessionChunkList[sessionChunkList.length - 1].created_at).toLocaleString();
+              messageDiv.appendChild(ts);
+            }
 
-            // Get the timestamp of the last chunk to start polling from
-            // Use the last chunk's created_at to avoid re-fetching already-rendered chunks
-            const lastChunkTime = chunks.length > 0
-              ? chunks[chunks.length - 1].created_at
-              : 0;
+            messagesEl.appendChild(messageDiv);
+          });
 
-            // Start polling for new chunks from where we left off
-            this.chunkPollState.lastFetchTimestamp = lastChunkTime;
-            this.startChunkPolling(conversationId);
+          while (userMsgIdx < userMessages.length) {
+            const msg = userMessages[userMsgIdx];
+            const userDiv = document.createElement('div');
+            userDiv.className = 'message message-user';
+            userDiv.setAttribute('data-msg-id', msg.id);
+            userDiv.innerHTML = `
+              <div class="message-role">User</div>
+              ${this.renderMessageContent(msg.content)}
+              <div class="message-timestamp">${new Date(msg.created_at).toLocaleString()}</div>
+            `;
+            messagesEl.appendChild(userDiv);
+            userMsgIdx++;
+          }
+        } else {
+          messagesEl.innerHTML = this.renderMessages(allMessages || []);
+        }
 
-            // Disable controls while streaming
-            this.disableControls();
+        if (shouldResumeStreaming && latestSession) {
+          this.state.isStreaming = true;
+          this.state.currentSession = {
+            id: latestSession.id,
+            conversationId: conversationId,
+            agentId: conversation.agentType || 'claude-code',
+            startTime: latestSession.created_at
+          };
+
+          if (this.wsManager.isConnected) {
+            this.wsManager.subscribeToSession(latestSession.id);
+            this.wsManager.sendMessage({ type: 'subscribe', conversationId });
           }
 
-          // Restore scroll position after rendering
-          this.restoreScrollPosition(conversationId);
-        }
-      } catch (chunkError) {
-        console.warn('Failed to fetch chunks, falling back to messages:', chunkError);
-
-        // Fallback: use messages
-        const messagesResponse = await fetch(window.__BASE_URL + `/api/conversations/${conversationId}/messages`);
-        if (!messagesResponse.ok) throw new Error(`Failed to fetch messages: ${messagesResponse.status}`);
-        const messagesData = await messagesResponse.json();
-
-        const outputEl = document.getElementById('output');
-        if (outputEl) {
-          const wdInfo = conversation.workingDirectory ? ` - ${this.escapeHtml(conversation.workingDirectory)}` : '';
-          outputEl.innerHTML = `
-            <div class="conversation-header">
-              <h2>${this.escapeHtml(conversation.title || 'Conversation')}</h2>
-              <p class="text-secondary">${conversation.agentType || 'unknown'} - ${new Date(conversation.created_at).toLocaleDateString()}${wdInfo}</p>
-            </div>
-            <div class="conversation-messages">
-              ${this.renderMessages(messagesData.messages || [])}
-            </div>
-          `;
-
-          // Restore scroll position after rendering
-          this.restoreScrollPosition(conversationId);
+          this.updateUrlForConversation(conversationId, latestSession.id);
+
+          const lastChunkTime = chunks.length > 0
+            ? chunks[chunks.length - 1].created_at
+            : 0;
+
+          this.chunkPollState.lastFetchTimestamp = lastChunkTime;
+          this.startChunkPolling(conversationId);
+          this.disableControls();
         }
+
+        this.restoreScrollPosition(conversationId);
       }
     } catch (error) {
       console.error('Failed to load conversation messages:', error);
@@ -1399,7 +1342,7 @@ class AgentGUIClient {
 
       if (typeof msg.content === 'string') {
         if (this.isHtmlContent(msg.content)) {
-          contentHtml = `<div class="message-text"><div class="html-content bg-white dark:bg-gray-800 p-4 rounded border border-gray-200 dark:border-gray-700 overflow-x-auto">${msg.content}</div></div>`;
+          contentHtml = `<div class="message-text"><div class="html-content bg-white dark:bg-gray-800 p-4 rounded border border-gray-200 dark:border-gray-700 overflow-x-auto">${this.sanitizeHtml(msg.content)}</div></div>`;
         } else {
           contentHtml = `<div class="message-text">${this.escapeHtml(msg.content)}</div>`;
         }

package/static/js/streaming-renderer.js

@@ -362,12 +362,30 @@ class StreamingRenderer {
     div.className = 'block-text';
 
     const text = block.text || '';
-    const html = this.parseAndRenderMarkdown(text);
-    div.innerHTML = html;
+    if (this.containsHtmlTags(text)) {
+      div.innerHTML = this.sanitizeHtml(text);
+      div.classList.add('html-content');
+    } else {
+      div.innerHTML = this.parseAndRenderMarkdown(text);
+    }
 
     return div;
   }
 
+  containsHtmlTags(text) {
+    const htmlPattern = /<(?:div|table|section|article|ul|ol|dl|nav|header|footer|main|aside|figure|details|summary|h[1-6]|p|blockquote|pre|code|span|strong|em|a|img|br|hr|li|td|tr|th|thead|tbody|tfoot)\b[^>]*>/i;
+    return htmlPattern.test(text);
+  }
+
+  sanitizeHtml(html) {
+    const dangerous = /<\s*\/?\s*(script|iframe|object|embed|applet|form|input|button|select|textarea)\b[^>]*>/gi;
+    let cleaned = html.replace(dangerous, '');
+    cleaned = cleaned.replace(/\s+on\w+\s*=\s*["'][^"']*["']/gi, '');
+    cleaned = cleaned.replace(/\s+on\w+\s*=\s*[^\s>]+/gi, '');
+    cleaned = cleaned.replace(/javascript\s*:/gi, '');
+    return cleaned;
+  }
+
   /**
    * Parse markdown and render links, code, bold, italic
    */
@@ -1259,7 +1277,7 @@ class StreamingRenderer {
         ${cost ? `<div class="result-stat"><span class="stat-icon">&#128176;</span><span class="stat-value">${this.escapeHtml(cost)}</span><span class="stat-label">cost</span></div>` : ''}
         ${turns ? `<div class="result-stat"><span class="stat-icon">&#128260;</span><span class="stat-value">${this.escapeHtml(String(turns))}</span><span class="stat-label">turns</span></div>` : ''}
       </div>
-      ${block.result ? `<div class="result-content">${this.escapeHtml(typeof block.result === 'string' ? block.result : JSON.stringify(block.result, null, 2))}</div>` : ''}
+      ${block.result ? `<div class="result-content">${(() => { const r = typeof block.result === 'string' ? block.result : JSON.stringify(block.result, null, 2); return this.containsHtmlTags(r) ? '<div class="html-content">' + this.sanitizeHtml(r) + '</div>' : this.escapeHtml(r); })()}</div>` : ''}
     `;
 
     return div;

package/static/js/voice.js

@@ -3,7 +3,6 @@
   var isRecording = false;
   var ttsEnabled = true;
   var voiceActive = false;
-  var lastSpokenBlockIndex = -1;
   var currentConversationId = null;
   var speechQueue = [];
   var isSpeaking = false;
@@ -13,6 +12,8 @@
   var scriptNode = null;
   var recordedChunks = [];
   var TARGET_SAMPLE_RATE = 16000;
+  var spokenChunks = new Set();
+  var isLoadingHistory = false;
 
   function init() {
     setupTTSToggle();
@@ -61,14 +62,28 @@
     var micBtn = document.getElementById('voiceMicBtn');
     if (micBtn) {
       micBtn.removeAttribute('disabled');
-      micBtn.title = 'Click to record';
-      micBtn.addEventListener('click', function(e) {
+      micBtn.title = 'Hold to record';
+      micBtn.addEventListener('mousedown', function(e) {
         e.preventDefault();
-        if (!isRecording) {
-          startRecording();
-        } else {
-          stopRecording();
-        }
+        startRecording();
+      });
+      micBtn.addEventListener('mouseup', function(e) {
+        e.preventDefault();
+        stopRecording();
+      });
+      micBtn.addEventListener('mouseleave', function(e) {
+        if (isRecording) stopRecording();
+      });
+      micBtn.addEventListener('touchstart', function(e) {
+        e.preventDefault();
+        startRecording();
+      });
+      micBtn.addEventListener('touchend', function(e) {
+        e.preventDefault();
+        stopRecording();
+      });
+      micBtn.addEventListener('touchcancel', function(e) {
+        if (isRecording) stopRecording();
       });
     }
     var sendBtn = document.getElementById('voiceSendBtn');
@@ -92,6 +107,35 @@
     return result;
   }
 
+  function encodeWav(float32Audio, sampleRate) {
+    var numSamples = float32Audio.length;
+    var bytesPerSample = 2;
+    var dataSize = numSamples * bytesPerSample;
+    var buffer = new ArrayBuffer(44 + dataSize);
+    var view = new DataView(buffer);
+    function writeStr(off, str) {
+      for (var i = 0; i < str.length; i++) view.setUint8(off + i, str.charCodeAt(i));
+    }
+    writeStr(0, 'RIFF');
+    view.setUint32(4, 36 + dataSize, true);
+    writeStr(8, 'WAVE');
+    writeStr(12, 'fmt ');
+    view.setUint32(16, 16, true);
+    view.setUint16(20, 1, true);
+    view.setUint16(22, 1, true);
+    view.setUint32(24, sampleRate, true);
+    view.setUint32(28, sampleRate * bytesPerSample, true);
+    view.setUint16(32, bytesPerSample, true);
+    view.setUint16(34, 16, true);
+    writeStr(36, 'data');
+    view.setUint32(40, dataSize, true);
+    for (var i = 0; i < numSamples; i++) {
+      var s = Math.max(-1, Math.min(1, float32Audio[i]));
+      view.setInt16(44 + i * 2, s < 0 ? s * 32768 : s * 32767, true);
+    }
+    return buffer;
+  }
+
   async function startRecording() {
     if (isRecording) return;
     var el = document.getElementById('voiceTranscript');
@@ -146,11 +190,11 @@
     var resampled = resampleBuffer(merged, sourceSampleRate, TARGET_SAMPLE_RATE);
     if (el) el.textContent = 'Transcribing...';
     try {
-      var pcmBuffer = resampled.buffer;
+      var wavBuffer = encodeWav(resampled, TARGET_SAMPLE_RATE);
       var resp = await fetch(BASE + '/api/stt', {
         method: 'POST',
-        headers: { 'Content-Type': 'application/octet-stream' },
-        body: pcmBuffer
+        headers: { 'Content-Type': 'audio/wav' },
+        body: wavBuffer
       });
       var data = await resp.json();
       if (data.text) {
@@ -240,6 +284,10 @@
     }
   }
 
+  function stripHtml(text) {
+    return text.replace(/<[^>]*>/g, '').replace(/\s+/g, ' ').trim();
+  }
+
   function addVoiceBlock(text, isUser) {
     var container = document.getElementById('voiceMessages');
     if (!container) return;
@@ -247,13 +295,23 @@
     if (emptyMsg) emptyMsg.remove();
     var div = document.createElement('div');
     div.className = 'voice-block' + (isUser ? ' voice-block-user' : '');
-    div.textContent = text;
+    div.textContent = isUser ? text : stripHtml(text);
+    if (!isUser) {
+      var rereadBtn = document.createElement('button');
+      rereadBtn.className = 'voice-reread-btn';
+      rereadBtn.title = 'Re-read aloud';
+      rereadBtn.innerHTML = '<svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2"><polygon points="11 5 6 9 2 9 2 15 6 15 11 19 11 5"/><path d="M19.07 4.93a10 10 0 0 1 0 14.14M15.54 8.46a5 5 0 0 1 0 7.07"/></svg>';
+      rereadBtn.addEventListener('click', function() {
+        speak(text);
+      });
+      div.appendChild(rereadBtn);
+    }
     container.appendChild(div);
     scrollVoiceToBottom();
     return div;
   }
 
-  function addVoiceResultBlock(block) {
+  function addVoiceResultBlock(block, autoSpeak) {
     var container = document.getElementById('voiceMessages');
     if (!container) return;
     var emptyMsg = container.querySelector('.voice-empty');
@@ -267,9 +325,10 @@
     if (block.result) {
       resultText = typeof block.result === 'string' ? block.result : JSON.stringify(block.result);
     }
+    var displayText = stripHtml(resultText);
     var html = '';
-    if (resultText) {
-      html += '<div>' + escapeHtml(resultText) + '</div>';
+    if (displayText) {
+      html += '<div>' + escapeHtml(displayText) + '</div>';
     }
     if (duration || cost) {
       html += '<div class="voice-result-stats">';
@@ -282,9 +341,19 @@
       html = isError ? 'Execution failed' : 'Execution complete';
     }
     div.innerHTML = html;
+    if (resultText) {
+      var rereadBtn = document.createElement('button');
+      rereadBtn.className = 'voice-reread-btn';
+      rereadBtn.title = 'Re-read aloud';
+      rereadBtn.innerHTML = '<svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2"><polygon points="11 5 6 9 2 9 2 15 6 15 11 19 11 5"/><path d="M19.07 4.93a10 10 0 0 1 0 14.14M15.54 8.46a5 5 0 0 1 0 7.07"/></svg>';
+      rereadBtn.addEventListener('click', function() {
+        speak(resultText);
+      });
+      div.appendChild(rereadBtn);
+    }
     container.appendChild(div);
     scrollVoiceToBottom();
-    if (ttsEnabled && resultText) {
+    if (autoSpeak && ttsEnabled && resultText) {
       speak(resultText);
     }
     return div;
@@ -305,31 +374,33 @@
       var data = e.detail;
       if (!data) return;
       if (data.type === 'streaming_progress' && data.block) {
-        handleVoiceBlock(data.block);
+        handleVoiceBlock(data.block, true);
       }
       if (data.type === 'streaming_start') {
-        lastSpokenBlockIndex = -1;
+        spokenChunks = new Set();
       }
     });
     window.addEventListener('conversation-selected', function(e) {
       currentConversationId = e.detail.conversationId;
+      stopSpeaking();
+      spokenChunks = new Set();
       if (voiceActive) {
         loadVoiceBlocks(currentConversationId);
       }
     });
   }
 
-  function handleVoiceBlock(block) {
+  function handleVoiceBlock(block, isNew) {
     if (!block || !block.type) return;
     if (block.type === 'text' && block.text) {
       var div = addVoiceBlock(block.text, false);
-      if (div && ttsEnabled) {
+      if (div && isNew && ttsEnabled) {
         div.classList.add('speaking');
         speak(block.text);
         setTimeout(function() { div.classList.remove('speaking'); }, 2000);
       }
     } else if (block.type === 'result') {
-      addVoiceResultBlock(block);
+      addVoiceResultBlock(block, isNew);
     }
   }
 
@@ -341,9 +412,11 @@
       showVoiceEmpty(container);
       return;
     }
+    isLoadingHistory = true;
     fetch(BASE + '/api/conversations/' + conversationId + '/chunks')
       .then(function(res) { return res.json(); })
       .then(function(data) {
+        isLoadingHistory = false;
         if (!data.ok || !Array.isArray(data.chunks) || data.chunks.length === 0) {
           showVoiceEmpty(container);
           return;
@@ -356,19 +429,20 @@
             addVoiceBlock(block.text, false);
             hasContent = true;
           } else if (block.type === 'result') {
-            addVoiceResultBlock(block);
+            addVoiceResultBlock(block, false);
             hasContent = true;
           }
         });
         if (!hasContent) showVoiceEmpty(container);
       })
       .catch(function() {
+        isLoadingHistory = false;
         showVoiceEmpty(container);
       });
   }
 
   function showVoiceEmpty(container) {
-    container.innerHTML = '<div class="voice-empty"><div class="voice-empty-icon"><svg viewBox="0 0 24 24" width="64" height="64" fill="none" stroke="currentColor" stroke-width="1.5" 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></div><div>Tap the microphone and speak to send a message.<br>Responses will be read aloud.</div></div>';
+    container.innerHTML = '<div class="voice-empty"><div class="voice-empty-icon"><svg viewBox="0 0 24 24" width="64" height="64" fill="none" stroke="currentColor" stroke-width="1.5" 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></div><div>Hold the microphone button to record.<br>Release to transcribe. Tap Send to submit.<br>New responses will be read aloud.</div></div>';
   }
 
   function activate() {