agentgui 1.0.147 → 1.0.149

package/database.js

@@ -335,14 +335,14 @@ export const queries = {
 
   getSessionsProcessingLongerThan(minutes) {
     const cutoff = Date.now() - (minutes * 60 * 1000);
-    const stmt = db.prepare('SELECT * FROM sessions WHERE status = ? AND started_at < ?');
-    return stmt.all('pending', cutoff);
+    const stmt = db.prepare("SELECT * FROM sessions WHERE status IN ('active', 'pending') AND started_at < ?");
+    return stmt.all(cutoff);
   },
 
   cleanupOrphanedSessions(days) {
     const cutoff = Date.now() - (days * 24 * 60 * 60 * 1000);
-    const stmt = db.prepare('DELETE FROM sessions WHERE status = ? AND started_at < ?');
-    const result = stmt.run('pending', cutoff);
+    const stmt = db.prepare("DELETE FROM sessions WHERE status IN ('active', 'pending') AND started_at < ?");
+    const result = stmt.run(cutoff);
     return result.changes || 0;
   },
 

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,12 +176,22 @@ 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 {
     const sampleCount = Math.floor(buf.byteLength / 4);
@@ -173,8 +200,20 @@ async function transcribe(audioBuffer) {
     new Uint8Array(aligned).set(buf.subarray(0, sampleCount * 4));
     audio = new Float32Array(aligned);
   }
-  const result = await stt(audio);
-  return result.text || '';
+  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 '';
+  }
+  return result.text;
 }
 
 async function synthesize(text) {

package/package.json

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

package/server.js

@@ -8,7 +8,11 @@ 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');
@@ -19,6 +23,9 @@ const SYSTEM_PROMPT = `Write all responses as clean semantic HTML. Use tags like
 
 const activeExecutions = new Map();
 const messageQueues = new Map();
+const STUCK_AGENT_THRESHOLD_MS = 600000;
+const NO_PID_GRACE_PERIOD_MS = 60000;
+const STALE_SESSION_MIN_AGE_MS = 30000;
 
 const debugLog = (msg) => {
   const timestamp = new Date().toISOString();
@@ -327,6 +334,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 +478,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 +501,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;
     }
 
@@ -611,7 +651,7 @@ function persistChunkWithRetry(sessionId, conversationId, sequence, blockType, b
 
 async function processMessageWithStreaming(conversationId, messageId, sessionId, content, agentId) {
   const startTime = Date.now();
-  activeExecutions.set(conversationId, { pid: null, startTime, sessionId });
+  activeExecutions.set(conversationId, { pid: null, startTime, sessionId, lastActivity: startTime });
   queries.setIsStreaming(conversationId, true);
   queries.updateSession(sessionId, { status: 'active' });
 
@@ -628,6 +668,8 @@ async function processMessageWithStreaming(conversationId, messageId, sessionId,
 
     const onEvent = (parsed) => {
       eventCount++;
+      const entry = activeExecutions.get(conversationId);
+      if (entry) entry.lastActivity = Date.now();
       debugLog(`[stream] Event ${eventCount}: type=${parsed.type}`);
 
       if (parsed.type === 'system') {
@@ -1008,25 +1050,27 @@ server.on('error', (err) => {
 function recoverStaleSessions() {
   try {
     const staleSessions = queries.getActiveSessions ? queries.getActiveSessions() : [];
+    const now = Date.now();
     let recoveredCount = 0;
     for (const session of staleSessions) {
-      if (!activeExecutions.has(session.conversationId)) {
-        queries.updateSession(session.id, {
-          status: 'error',
-          error: 'Agent died unexpectedly (server restart)',
-          completed_at: Date.now()
-        });
-        queries.setIsStreaming(session.conversationId, false);
-        broadcastSync({
-          type: 'streaming_error',
-          sessionId: session.id,
-          conversationId: session.conversationId,
-          error: 'Agent died unexpectedly (server restart)',
-          recoverable: false,
-          timestamp: Date.now()
-        });
-        recoveredCount++;
-      }
+      if (activeExecutions.has(session.conversationId)) continue;
+      const sessionAge = now - session.started_at;
+      if (sessionAge < STALE_SESSION_MIN_AGE_MS) continue;
+      queries.updateSession(session.id, {
+        status: 'error',
+        error: 'Agent died unexpectedly (server restart)',
+        completed_at: now
+      });
+      queries.setIsStreaming(session.conversationId, false);
+      broadcastSync({
+        type: 'streaming_error',
+        sessionId: session.id,
+        conversationId: session.conversationId,
+        error: 'Agent died unexpectedly (server restart)',
+        recoverable: false,
+        timestamp: now
+      });
+      recoveredCount++;
     }
     if (recoveredCount > 0) {
       console.log(`[RECOVERY] Recovered ${recoveredCount} stale active session(s)`);
@@ -1036,31 +1080,63 @@ function recoverStaleSessions() {
   }
 }
 
+function isProcessAlive(pid) {
+  try {
+    process.kill(pid, 0);
+    return true;
+  } catch (err) {
+    if (err.code === 'EPERM') return true;
+    return false;
+  }
+}
+
+function markAgentDead(conversationId, entry, reason) {
+  if (!activeExecutions.has(conversationId)) return;
+  activeExecutions.delete(conversationId);
+  queries.setIsStreaming(conversationId, false);
+  if (entry.sessionId) {
+    queries.updateSession(entry.sessionId, {
+      status: 'error',
+      error: reason,
+      completed_at: Date.now()
+    });
+  }
+  broadcastSync({
+    type: 'streaming_error',
+    sessionId: entry.sessionId,
+    conversationId,
+    error: reason,
+    recoverable: false,
+    timestamp: Date.now()
+  });
+  drainMessageQueue(conversationId);
+}
+
 function performAgentHealthCheck() {
+  const now = Date.now();
   for (const [conversationId, entry] of activeExecutions) {
-    if (!entry || !entry.pid) continue;
-    try {
-      process.kill(entry.pid, 0);
-    } catch (err) {
-      debugLog(`[HEALTH] Agent PID ${entry.pid} for conv ${conversationId} is dead`);
-      activeExecutions.delete(conversationId);
-      queries.setIsStreaming(conversationId, false);
-      if (entry.sessionId) {
-        queries.updateSession(entry.sessionId, {
-          status: 'error',
-          error: 'Agent process died unexpectedly',
-          completed_at: Date.now()
+    if (!entry) continue;
+
+    if (entry.pid) {
+      if (!isProcessAlive(entry.pid)) {
+        debugLog(`[HEALTH] Agent PID ${entry.pid} for conv ${conversationId} is dead`);
+        markAgentDead(conversationId, entry, 'Agent process died unexpectedly');
+      } else if (now - entry.lastActivity > STUCK_AGENT_THRESHOLD_MS) {
+        debugLog(`[HEALTH] Agent PID ${entry.pid} for conv ${conversationId} has no activity for ${Math.round((now - entry.lastActivity) / 1000)}s`);
+        broadcastSync({
+          type: 'streaming_error',
+          sessionId: entry.sessionId,
+          conversationId,
+          error: 'Agent may be stuck (no activity for 10 minutes)',
+          recoverable: true,
+          timestamp: now
         });
       }
-      broadcastSync({
-        type: 'streaming_error',
-        sessionId: entry.sessionId,
-        conversationId,
-        error: 'Agent process died unexpectedly',
-        recoverable: false,
-        timestamp: Date.now()
-      });
-      drainMessageQueue(conversationId);
+    } else {
+      if (now - entry.startTime > NO_PID_GRACE_PERIOD_MS) {
+        debugLog(`[HEALTH] Agent for conv ${conversationId} never reported PID after ${Math.round((now - entry.startTime) / 1000)}s`);
+        markAgentDead(conversationId, entry, 'Agent failed to start (no PID reported)');
+      }
     }
   }
 }

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) {
@@ -1174,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';
@@ -1315,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);