agentgui 1.0.94 → 1.0.95

package/database.js

@@ -198,7 +198,9 @@ try {
     gitBranch: 'TEXT',
     sourcePath: 'TEXT',
     lastSyncedAt: 'INTEGER',
-    workingDirectory: 'TEXT'
+    workingDirectory: 'TEXT',
+    claudeSessionId: 'TEXT',
+    isStreaming: 'INTEGER DEFAULT 0'
   };
 
   let addedColumns = false;
@@ -286,6 +288,46 @@ export const queries = {
     };
   },
 
+  setClaudeSessionId(conversationId, claudeSessionId) {
+    const stmt = db.prepare('UPDATE conversations SET claudeSessionId = ?, updated_at = ? WHERE id = ?');
+    stmt.run(claudeSessionId, Date.now(), conversationId);
+  },
+
+  getClaudeSessionId(conversationId) {
+    const stmt = db.prepare('SELECT claudeSessionId FROM conversations WHERE id = ?');
+    const row = stmt.get(conversationId);
+    return row?.claudeSessionId || null;
+  },
+
+  setIsStreaming(conversationId, isStreaming) {
+    const stmt = db.prepare('UPDATE conversations SET isStreaming = ?, updated_at = ? WHERE id = ?');
+    stmt.run(isStreaming ? 1 : 0, Date.now(), conversationId);
+  },
+
+  getIsStreaming(conversationId) {
+    const stmt = db.prepare('SELECT isStreaming FROM conversations WHERE id = ?');
+    const row = stmt.get(conversationId);
+    return row?.isStreaming === 1;
+  },
+
+  markSessionIncomplete(sessionId, errorMsg) {
+    const stmt = db.prepare('UPDATE sessions SET status = ?, error = ?, completed_at = ? WHERE id = ?');
+    stmt.run('incomplete', errorMsg || 'unknown', Date.now(), sessionId);
+  },
+
+  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);
+  },
+
+  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);
+    return result.changes || 0;
+  },
+
   createMessage(conversationId, role, content, idempotencyKey = null) {
     if (idempotencyKey) {
       const cached = this.getIdempotencyKey(idempotencyKey);

package/lib/claude-runner.js

@@ -1,23 +1,5 @@
 import { spawn } from 'child_process';
 
-/**
- * Configuration for Claude runner
- * @typedef {Object} ClaudeRunnerConfig
- * @property {boolean} [skipPermissions=false] - Use --dangerously-skip-permissions flag
- * @property {boolean} [verbose=true] - Use --verbose flag
- * @property {string} [outputFormat='stream-json'] - Output format (stream-json, json, text)
- * @property {number} [timeout=300000] - Timeout in milliseconds (default 5 minutes)
- * @property {boolean} [print=true] - Use --print flag
- */
-
-/**
- * Run Claude with streaming JSON output
- * @param {string} prompt - The prompt to send to Claude
- * @param {string} cwd - Working directory
- * @param {string} agentId - Agent identifier (for logging)
- * @param {ClaudeRunnerConfig} [config={}] - Configuration options
- * @returns {Promise<Array>} Array of parsed JSON objects from Claude output
- */
 export async function runClaudeWithStreaming(prompt, cwd, agentId = 'claude-code', config = {}) {
   return new Promise((resolve, reject) => {
     const {
@@ -25,20 +7,25 @@ export async function runClaudeWithStreaming(prompt, cwd, agentId = 'claude-code
       verbose = true,
       outputFormat = 'stream-json',
       timeout = 300000,
-      print = true
+      print = true,
+      resumeSessionId = null,
+      systemPrompt = null,
+      onEvent = null
     } = config;
 
-    // Build flags array
     const flags = [];
     if (print) flags.push('--print');
     if (verbose) flags.push('--verbose');
     flags.push(`--output-format=${outputFormat}`);
     if (skipPermissions) flags.push('--dangerously-skip-permissions');
+    if (resumeSessionId) flags.push('--resume', resumeSessionId);
+    if (systemPrompt) flags.push('--append-system-prompt', systemPrompt);
 
     const proc = spawn('claude', flags, { cwd });
     let jsonBuffer = '';
     const outputs = [];
     let timedOut = false;
+    let sessionId = null;
 
     const timeoutHandle = setTimeout(() => {
       timedOut = true;
@@ -61,6 +48,16 @@ export async function runClaudeWithStreaming(prompt, cwd, agentId = 'claude-code
           try {
             const parsed = JSON.parse(line);
             outputs.push(parsed);
+
+            if (parsed.session_id) {
+              sessionId = parsed.session_id;
+            }
+
+            if (onEvent) {
+              try { onEvent(parsed); } catch (e) {
+                console.error(`[claude-runner] onEvent error: ${e.message}`);
+              }
+            }
           } catch (e) {
             console.error(`[claude-runner] JSON parse error on line: ${line.substring(0, 100)}`);
           }
@@ -79,12 +76,17 @@ export async function runClaudeWithStreaming(prompt, cwd, agentId = 'claude-code
       if (code === 0) {
         if (jsonBuffer.trim()) {
           try {
-            outputs.push(JSON.parse(jsonBuffer));
+            const parsed = JSON.parse(jsonBuffer);
+            outputs.push(parsed);
+            if (parsed.session_id) sessionId = parsed.session_id;
+            if (onEvent) {
+              try { onEvent(parsed); } catch (e) {}
+            }
           } catch (e) {
             console.error(`[claude-runner] Final JSON parse error: ${jsonBuffer.substring(0, 100)}`);
           }
         }
-        resolve(outputs);
+        resolve({ outputs, sessionId });
       } else {
         reject(new Error(`Claude CLI exited with code ${code} for agent ${agentId}`));
       }

package/package.json

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

package/server.js

@@ -13,10 +13,11 @@ const express = require('express');
 const Busboy = require('busboy');
 const fsbrowse = require('fsbrowse');
 
-// System prompt for Claude to format responses as HTML
 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.`;
 
-// Debug logging to file
+const activeExecutions = new Map();
+const messageQueues = new Map();
+
 const debugLog = (msg) => {
   const timestamp = new Date().toISOString();
   console.error(`[${timestamp}] ${msg}`);
@@ -234,19 +235,30 @@ const server = http.createServer(async (req, res) => {
       const agentId = body.agentId || 'claude-code';
       const skipPermissions = body.skipPermissions || false;
 
-      debugLog(`[stream] Starting stream: conversationId=${conversationId}, agentId=${agentId}, skipPermissions=${skipPermissions}`);
-
-      // Create user message and session immediately
       const userMessage = queries.createMessage(conversationId, 'user', prompt);
-      const session = queries.createSession(conversationId);
       queries.createEvent('message.created', { role: 'user', messageId: userMessage.id }, conversationId);
+
+      broadcastSync({ type: 'message_created', conversationId, message: userMessage, timestamp: Date.now() });
+
+      if (activeExecutions.has(conversationId)) {
+        debugLog(`[stream] Conversation ${conversationId} is busy, queuing message`);
+        if (!messageQueues.has(conversationId)) messageQueues.set(conversationId, []);
+        messageQueues.get(conversationId).push({ content: prompt, agentId, skipPermissions, messageId: userMessage.id });
+
+        const queueLength = messageQueues.get(conversationId).length;
+        broadcastSync({ type: 'queue_status', conversationId, queueLength, messageId: userMessage.id, timestamp: Date.now() });
+
+        res.writeHead(200, { 'Content-Type': 'application/json' });
+        res.end(JSON.stringify({ message: userMessage, queued: true, queuePosition: queueLength }));
+        return;
+      }
+
+      const session = queries.createSession(conversationId);
       queries.createEvent('session.created', { messageId: userMessage.id, sessionId: session.id }, conversationId, session.id);
 
-      // Send immediate response with session info
       res.writeHead(200, { 'Content-Type': 'application/json' });
       res.end(JSON.stringify({ message: userMessage, session, streamId: session.id }));
 
-      // Emit streaming start event
       broadcastSync({
         type: 'streaming_start',
         sessionId: session.id,
@@ -256,7 +268,6 @@ const server = http.createServer(async (req, res) => {
         timestamp: Date.now()
       });
 
-      // Fire-and-forget streaming with error handling
       processMessageWithStreaming(conversationId, userMessage.id, session.id, prompt, agentId, skipPermissions)
         .catch(err => debugLog(`[stream] Uncaught error: ${err.message}`));
       return;
@@ -450,58 +461,63 @@ function serveFile(filePath, res) {
 
 async function processMessageWithStreaming(conversationId, messageId, sessionId, content, agentId, skipPermissions = false) {
   const startTime = Date.now();
+  activeExecutions.set(conversationId, true);
+  queries.setIsStreaming(conversationId, true);
+
   try {
-    debugLog(`[stream] Starting: conversationId=${conversationId}, sessionId=${sessionId}, agentId=${agentId}, skipPermissions=${skipPermissions}`);
+    debugLog(`[stream] Starting: conversationId=${conversationId}, sessionId=${sessionId}`);
 
     const conv = queries.getConversation(conversationId);
     const cwd = conv?.workingDirectory || '/config';
-    const actualAgentId = agentId || 'claude-code';
+    const resumeSessionId = conv?.claudeSessionId || null;
 
-    debugLog(`[stream] Calling runClaudeWithStreaming with config: skipPermissions=${skipPermissions}`);
-    const config = {
-      skipPermissions,
-      verbose: true,
-      outputFormat: 'stream-json',
-      timeout: 1800000, // 30 minutes
-      print: true
-    };
-
-    // Prepend system prompt to user content
-    const promptWithSystem = `${SYSTEM_PROMPT}\n\n${content}`;
-
-    const outputs = await runClaudeWithStreaming(promptWithSystem, cwd, actualAgentId, config);
-    debugLog(`[stream] Claude returned ${outputs.length} streaming outputs`);
-
-    // Process streaming outputs similar to processMessage
-    // But emit WebSocket events for each block
     let allBlocks = [];
-    let lastAssistantMessage = null;
     let eventCount = 0;
 
-    for (const output of outputs) {
-      if (output.type === 'assistant' && output.message?.content) {
-        debugLog(`[stream] Found assistant message with ${output.message.content.length} content blocks`);
-        lastAssistantMessage = output.message;
-        allBlocks.push(...(output.message.content || []));
-
-        // Emit progress event for each block
+    const onEvent = (parsed) => {
+      if (parsed.type === 'assistant' && parsed.message?.content) {
+        for (const block of parsed.message.content) {
+          allBlocks.push(block);
+          eventCount++;
+          broadcastSync({
+            type: 'streaming_progress',
+            sessionId,
+            conversationId,
+            block,
+            blockIndex: allBlocks.length - 1,
+            timestamp: Date.now()
+          });
+        }
+      } else if (parsed.type === 'result' && parsed.result && allBlocks.length === 0) {
         broadcastSync({
           type: 'streaming_progress',
           sessionId,
           conversationId,
-          blockCount: allBlocks.length,
+          block: { type: 'text', text: parsed.result },
+          blockIndex: 0,
+          isResult: true,
           timestamp: Date.now()
         });
-        eventCount++;
-      } else if (output.type === 'tool_result' && output.result) {
-        debugLog(`[stream] Found tool result`);
-        allBlocks.push({
-          type: 'tool_result',
-          result: output.result,
-          tool_use_id: output.tool_use_id
-        });
-        eventCount++;
       }
+    };
+
+    const config = {
+      skipPermissions,
+      verbose: true,
+      outputFormat: 'stream-json',
+      timeout: 1800000,
+      print: true,
+      resumeSessionId,
+      systemPrompt: SYSTEM_PROMPT,
+      onEvent
+    };
+
+    const { outputs, sessionId: claudeSessionId } = await runClaudeWithStreaming(content, cwd, agentId || 'claude-code', config);
+    debugLog(`[stream] Claude returned ${outputs.length} outputs, sessionId=${claudeSessionId}`);
+
+    if (claudeSessionId && !conv?.claudeSessionId) {
+      queries.setClaudeSessionId(conversationId, claudeSessionId);
+      debugLog(`[stream] Stored claudeSessionId=${claudeSessionId}`);
     }
 
     let messageContent = null;
@@ -511,28 +527,20 @@ async function processMessageWithStreaming(conversationId, messageId, sessionId,
         blocks: allBlocks,
         timestamp: Date.now()
       });
-      debugLog(`[stream] Storing full execution with ${allBlocks.length} blocks`);
     } else {
       let textParts = [];
       for (const output of outputs) {
-        if (typeof output === 'string') {
-          textParts.push(output);
-        } else if (output.text) {
-          textParts.push(output.text);
-        } else if (output.content?.text) {
-          textParts.push(output.content.text);
-        } else if (output.result) {
+        if (output.type === 'result' && output.result) {
           textParts.push(String(output.result));
+        } else if (typeof output === 'string') {
+          textParts.push(output);
         }
       }
       messageContent = textParts.join('\n').trim();
-      debugLog(`[stream] Storing text response: "${messageContent.substring(0, 100)}..."`);
     }
 
     if (messageContent) {
-      debugLog(`[stream] Creating assistant message`);
       const assistantMessage = queries.createMessage(conversationId, 'assistant', messageContent);
-      debugLog(`[stream] Created message with id: ${assistantMessage.id}`);
       broadcastSync({
         type: 'streaming_complete',
         sessionId,
@@ -541,30 +549,25 @@ async function processMessageWithStreaming(conversationId, messageId, sessionId,
         eventCount,
         timestamp: Date.now()
       });
-    } else {
-      debugLog(`[stream] No response content extracted!`);
+      broadcastSync({
+        type: 'message_created',
+        conversationId,
+        message: assistantMessage,
+        timestamp: Date.now()
+      });
     }
 
-    debugLog(`[stream] ✅ Completed: ${outputs.length} outputs received, ${eventCount} events emitted`);
+    debugLog(`[stream] Completed: ${outputs.length} outputs, ${eventCount} events`);
   } catch (error) {
     const elapsed = Date.now() - startTime;
     debugLog(`[stream] Error after ${elapsed}ms: ${error.message}`);
 
-    // Mark session as incomplete for recovery
-    try {
-      const sessionStatus = error.message.includes('timeout') ? 'timeout' : 'error';
-      queries.markSessionIncomplete(sessionId, error.message);
-      debugLog(`[stream] Session ${sessionId} marked as incomplete (${sessionStatus})`);
-    } catch (err) {
-      debugLog(`[stream] Failed to mark session: ${err.message}`);
-    }
-
     broadcastSync({
       type: 'streaming_error',
       sessionId,
       conversationId,
       error: error.message,
-      recoverable: elapsed < 60000, // Retryable if failed within 1 minute
+      recoverable: elapsed < 60000,
       timestamp: Date.now()
     });
 
@@ -575,102 +578,91 @@ async function processMessageWithStreaming(conversationId, messageId, sessionId,
       message: errorMessage,
       timestamp: Date.now()
     });
+  } finally {
+    activeExecutions.delete(conversationId);
+    queries.setIsStreaming(conversationId, false);
+    drainMessageQueue(conversationId);
   }
 }
 
+function drainMessageQueue(conversationId) {
+  const queue = messageQueues.get(conversationId);
+  if (!queue || queue.length === 0) return;
+
+  const next = queue.shift();
+  if (queue.length === 0) messageQueues.delete(conversationId);
+
+  debugLog(`[queue] Draining next message for ${conversationId}`);
+
+  const session = queries.createSession(conversationId);
+  queries.createEvent('session.created', { messageId: next.messageId, sessionId: session.id }, conversationId, session.id);
+
+  broadcastSync({
+    type: 'streaming_start',
+    sessionId: session.id,
+    conversationId,
+    messageId: next.messageId,
+    agentId: next.agentId,
+    timestamp: Date.now()
+  });
+
+  broadcastSync({
+    type: 'queue_status',
+    conversationId,
+    queueLength: queue?.length || 0,
+    timestamp: Date.now()
+  });
+
+  processMessageWithStreaming(conversationId, next.messageId, session.id, next.content, next.agentId, next.skipPermissions)
+    .catch(err => debugLog(`[queue] Error processing queued message: ${err.message}`));
+}
+
 async function processMessage(conversationId, messageId, content, agentId) {
   try {
     debugLog(`[processMessage] Starting: conversationId=${conversationId}, agentId=${agentId}`);
 
     const conv = queries.getConversation(conversationId);
     const cwd = conv?.workingDirectory || '/config';
-    const actualAgentId = agentId || 'claude-code';
+    const resumeSessionId = conv?.claudeSessionId || null;
 
-    // Handle both string content and object content (for structured messages)
-    let contentStr = content;
-    if (typeof content === 'object') {
-      contentStr = JSON.stringify(content);
-    }
+    let contentStr = typeof content === 'object' ? JSON.stringify(content) : content;
 
-    debugLog(`[processMessage] Calling runClaudeWithStreaming with prompt: "${contentStr.substring(0, 50)}..."`);
-    // Prepend system prompt to user content
-    const promptWithSystem = `${SYSTEM_PROMPT}\n\n${contentStr}`;
-    const outputs = await runClaudeWithStreaming(promptWithSystem, cwd, actualAgentId);
-    debugLog(`[processMessage] Claude returned ${outputs.length} outputs`);
+    const { outputs, sessionId: claudeSessionId } = await runClaudeWithStreaming(contentStr, cwd, agentId || 'claude-code', {
+      resumeSessionId,
+      systemPrompt: SYSTEM_PROMPT
+    });
 
-    // Collect all message blocks to preserve full execution details
-    let allBlocks = [];
-    let lastAssistantMessage = null;
+    if (claudeSessionId && !conv?.claudeSessionId) {
+      queries.setClaudeSessionId(conversationId, claudeSessionId);
+    }
 
+    let allBlocks = [];
     for (const output of outputs) {
       if (output.type === 'assistant' && output.message?.content) {
-        debugLog(`[processMessage] Found assistant message with ${output.message.content.length} content blocks`);
-        lastAssistantMessage = output.message;
         allBlocks.push(...(output.message.content || []));
-      } else if (output.type === 'tool_result' && output.result) {
-        debugLog(`[processMessage] Found tool result: ${typeof output.result}`);
-        allBlocks.push({
-          type: 'tool_result',
-          result: output.result,
-          tool_use_id: output.tool_use_id
-        });
       }
     }
 
-    // Store full message structure if we have execution data, otherwise fallback to text
     let messageContent = null;
-
     if (allBlocks.length > 0) {
-      // Store full message structure as JSON for proper rendering
-      messageContent = JSON.stringify({
-        type: 'claude_execution',
-        blocks: allBlocks,
-        timestamp: Date.now()
-      });
-      debugLog(`[processMessage] Storing full execution with ${allBlocks.length} blocks`);
+      messageContent = JSON.stringify({ type: 'claude_execution', blocks: allBlocks, timestamp: Date.now() });
     } else {
-      // Fallback: extract text for simple responses
       let textParts = [];
       for (const output of outputs) {
-        if (typeof output === 'string') {
-          textParts.push(output);
-        } else if (output.text) {
-          textParts.push(output.text);
-        } else if (output.content?.text) {
-          textParts.push(output.content.text);
-        } else if (output.result) {
-          textParts.push(String(output.result));
-        }
+        if (output.type === 'result' && output.result) textParts.push(String(output.result));
+        else if (typeof output === 'string') textParts.push(output);
       }
       messageContent = textParts.join('\n').trim();
-      debugLog(`[processMessage] Storing text response: "${messageContent.substring(0, 100)}..."`);
     }
 
     if (messageContent) {
-      debugLog(`[processMessage] Creating assistant message`);
       const assistantMessage = queries.createMessage(conversationId, 'assistant', messageContent);
-      debugLog(`[processMessage] Created message with id: ${assistantMessage.id}`);
-      broadcastSync({
-        type: 'message_created',
-        conversationId,
-        message: assistantMessage,
-        timestamp: Date.now()
-      });
-    } else {
-      debugLog(`[processMessage] No response content extracted!`);
+      broadcastSync({ type: 'message_created', conversationId, message: assistantMessage, timestamp: Date.now() });
     }
-
-    debugLog(`[processMessage] ✅ Completed: ${outputs.length} outputs received`);
   } catch (error) {
     debugLog(`[processMessage] Error: ${error.message}`);
-    debugLog(`[processMessage] Stack: ${error.stack}`);
     const errorMessage = queries.createMessage(conversationId, 'assistant', `Error: ${error.message}`);
-    broadcastSync({
-      type: 'message_created',
-      conversationId,
-      message: errorMessage,
-      timestamp: Date.now()
-    });
+    broadcastSync({ type: 'message_created', conversationId, message: errorMessage, timestamp: Date.now() });
   }
 }
 
@@ -700,11 +692,14 @@ wss.on('connection', (ws, req) => {
       try {
         const data = JSON.parse(msg);
         if (data.type === 'subscribe') {
-          ws.subscriptions.add(data.sessionId);
-          debugLog(`[WebSocket] Client ${ws.clientId} subscribed to ${data.sessionId}`);
+          if (data.sessionId) ws.subscriptions.add(data.sessionId);
+          if (data.conversationId) ws.subscriptions.add(`conv-${data.conversationId}`);
+          const subTarget = data.sessionId || data.conversationId;
+          debugLog(`[WebSocket] Client ${ws.clientId} subscribed to ${subTarget}`);
           ws.send(JSON.stringify({
             type: 'subscription_confirmed',
             sessionId: data.sessionId,
+            conversationId: data.conversationId,
             timestamp: Date.now()
           }));
         } else if (data.type === 'unsubscribe') {
@@ -742,25 +737,17 @@ wss.on('connection', (ws, req) => {
 
 function broadcastSync(event) {
   const data = JSON.stringify(event);
-  const isStreamingEvent = event.type && event.type.startsWith('streaming_');
-  const targetSessionId = event.sessionId || (event.conversationId && `conv-${event.conversationId}`);
 
   for (const ws of syncClients) {
     if (ws.readyState !== 1) continue;
 
     let shouldSend = false;
 
-    if (isStreamingEvent && targetSessionId) {
-      // Streaming events require sessionId subscription
-      shouldSend = ws.subscriptions && ws.subscriptions.has(targetSessionId);
-    } else if (event.sessionId) {
-      // Regular session events require sessionId subscription
-      shouldSend = ws.subscriptions && ws.subscriptions.has(event.sessionId);
-    } else if (event.type === 'message_created' || event.type === 'conversation_created') {
-      // Global events sent to all clients
+    if (event.sessionId && ws.subscriptions?.has(event.sessionId)) {
       shouldSend = true;
-    } else {
-      // Default: send to all connected clients
+    } else if (event.conversationId && ws.subscriptions?.has(`conv-${event.conversationId}`)) {
+      shouldSend = true;
+    } else if (event.type === 'message_created' || event.type === 'conversation_created' || event.type === 'conversations_updated' || event.type === 'conversation_deleted' || event.type === 'queue_status') {
       shouldSend = true;
     }
 

package/static/js/client.js

@@ -193,66 +193,42 @@ class AgentGUIClient {
     }
   }
 
-  /**
-   * Handle incoming WebSocket message
-   */
   handleWebSocketMessage(data) {
     try {
-      // Route by message type
       switch (data.type) {
         case 'streaming_start':
           this.handleStreamingStart(data);
           break;
-
         case 'streaming_progress':
-          this.queueEvent(data);
+          this.handleStreamingProgress(data);
           break;
-
         case 'streaming_complete':
           this.handleStreamingComplete(data);
           break;
-
-        case 'file_read':
-        case 'file_write':
-        case 'command_execute':
-        case 'git_status':
-        case 'error':
-        case 'text_block':
-        case 'code_block':
-        case 'thinking_block':
-        case 'tool_use':
-          this.queueEvent(data);
+        case 'streaming_error':
+          this.handleStreamingError(data);
           break;
-
         case 'conversation_created':
           this.handleConversationCreated(data);
           break;
-
         case 'message_created':
           this.handleMessageCreated(data);
           break;
-
+        case 'queue_status':
+          this.handleQueueStatus(data);
+          break;
         default:
-          console.log('Unhandled message type:', data.type);
+          break;
       }
     } catch (error) {
       console.error('Message handling error:', error);
     }
   }
 
-  /**
-   * Queue event for rendering
-   */
   queueEvent(data) {
     try {
-      // Process event
       const processed = this.eventProcessor.processEvent(data);
       if (!processed) return;
-
-      // Queue for rendering
-      this.renderer.queueEvent(processed);
-
-      // Track session events
       if (data.sessionId && this.state.currentSession?.id === data.sessionId) {
         this.state.sessionEvents.push(processed);
       }
@@ -261,9 +237,6 @@ class AgentGUIClient {
     }
   }
 
-  /**
-   * Handle streaming start
-   */
   handleStreamingStart(data) {
     console.log('Streaming started:', data);
     this.state.isStreaming = true;
@@ -273,60 +246,146 @@ class AgentGUIClient {
       agentId: data.agentId,
       startTime: Date.now()
     };
-    this.state.currentConversation = { id: data.conversationId };
     this.state.sessionEvents = [];
+    this.state.streamingBlocks = [];
 
-    // Auto-select the streaming conversation in the sidebar
-    if (window.conversationManager) {
-      window.conversationManager.select(data.conversationId);
+    if (this.wsManager.isConnected) {
+      this.wsManager.subscribeToSession(data.sessionId);
     }
 
-    // Load the conversation to display it in real-time
-    this.loadConversationMessages(data.conversationId).then(() => {
-      // Clear output and prepare for streaming
-      const outputEl = document.getElementById('output');
-      if (outputEl) {
-        outputEl.innerHTML = '';
+    const outputEl = document.getElementById('output');
+    if (outputEl) {
+      let messagesEl = outputEl.querySelector('.conversation-messages');
+      if (!messagesEl) {
+        outputEl.innerHTML = '<div class="conversation-messages"></div>';
+        messagesEl = outputEl.querySelector('.conversation-messages');
       }
-    }).catch(err => {
-      console.error('Failed to load conversation during streaming:', err);
-      this.renderer.clear();
-    });
-
-    this.renderer.queueEvent({
-      type: 'streaming_start',
-      sessionId: data.sessionId,
-      conversationId: data.conversationId,
-      agentId: data.agentId,
-      timestamp: data.timestamp || Date.now()
-    });
+      const streamingDiv = document.createElement('div');
+      streamingDiv.className = 'message message-assistant streaming-message';
+      streamingDiv.id = `streaming-${data.sessionId}`;
+      streamingDiv.innerHTML = `
+        <div class="message-role">Assistant</div>
+        <div class="message-blocks streaming-blocks"></div>
+        <div class="streaming-indicator" style="display:flex;align-items:center;gap:0.5rem;padding:0.5rem 0;color:var(--color-text-secondary);font-size:0.875rem;">
+          <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>
+          Thinking...
+        </div>
+      `;
+      messagesEl.appendChild(streamingDiv);
+      this.scrollToBottom();
+    }
 
     this.disableControls();
     this.emit('streaming:start', data);
   }
 
-  /**
-   * Handle streaming complete
-   */
+  handleStreamingProgress(data) {
+    if (!data.block) return;
+
+    const block = data.block;
+    if (!this.state.streamingBlocks) this.state.streamingBlocks = [];
+    this.state.streamingBlocks.push(block);
+
+    const sessionId = data.sessionId || this.state.currentSession?.id;
+    const streamingEl = document.getElementById(`streaming-${sessionId}`);
+    if (!streamingEl) return;
+
+    const blocksEl = streamingEl.querySelector('.streaming-blocks');
+    if (!blocksEl) return;
+
+    const indicator = streamingEl.querySelector('.streaming-indicator');
+
+    if (block.type === 'text' && block.text) {
+      const existingTextEl = blocksEl.querySelector('.streaming-text-current');
+      if (existingTextEl && !data.isResult) {
+        existingTextEl.innerHTML = this.renderBlockContent(block);
+      } else {
+        const div = document.createElement('div');
+        div.className = 'message-text streaming-text-current';
+        div.innerHTML = this.renderBlockContent(block);
+        blocksEl.appendChild(div);
+      }
+    } else if (block.type === 'tool_use') {
+      const prevTextEl = blocksEl.querySelector('.streaming-text-current');
+      if (prevTextEl) prevTextEl.classList.remove('streaming-text-current');
+
+      const div = document.createElement('div');
+      div.className = 'message-tool';
+      div.textContent = `[Tool: ${block.name || 'unknown'}]`;
+      blocksEl.appendChild(div);
+    } else if (block.type === 'tool_result') {
+      const div = document.createElement('div');
+      div.className = 'message-text';
+      div.innerHTML = `<em style="color:var(--color-text-secondary)">${this.escapeHtml(String(block.result || '').substring(0, 500))}</em>`;
+      blocksEl.appendChild(div);
+    }
+
+    if (indicator) indicator.querySelector('span:last-child')?.remove();
+    if (indicator) {
+      const label = document.createElement('span');
+      label.textContent = block.type === 'tool_use' ? `Using ${block.name}...` : 'Responding...';
+      indicator.appendChild(label);
+    }
+
+    this.scrollToBottom();
+  }
+
+  renderBlockContent(block) {
+    if (block.type === 'text' && block.text) {
+      const text = block.text;
+      if (text.includes('<') && (text.includes('</') || text.includes('/>'))) {
+        return text;
+      }
+      return this.escapeHtml(text);
+    }
+    return this.escapeHtml(JSON.stringify(block));
+  }
+
+  scrollToBottom() {
+    const scrollContainer = document.getElementById('output-scroll');
+    if (scrollContainer) {
+      scrollContainer.scrollTop = scrollContainer.scrollHeight;
+    }
+  }
+
+  handleStreamingError(data) {
+    console.error('Streaming error:', data);
+    this.state.isStreaming = false;
+
+    const sessionId = data.sessionId || this.state.currentSession?.id;
+    const streamingEl = document.getElementById(`streaming-${sessionId}`);
+    if (streamingEl) {
+      const indicator = streamingEl.querySelector('.streaming-indicator');
+      if (indicator) {
+        indicator.innerHTML = `<span style="color:var(--color-error);">Error: ${this.escapeHtml(data.error || 'Unknown error')}</span>`;
+      }
+    }
+
+    this.enableControls();
+    this.emit('streaming:error', data);
+  }
+
   handleStreamingComplete(data) {
     console.log('Streaming completed:', data);
     this.state.isStreaming = false;
 
-    const duration = data.duration || (Date.now() - (this.state.currentSession?.startTime || Date.now()));
-
-    this.renderer.queueEvent({
-      type: 'streaming_complete',
-      sessionId: data.sessionId,
-      duration,
-      timestamp: data.timestamp || Date.now()
-    });
+    const sessionId = data.sessionId || this.state.currentSession?.id;
+    const streamingEl = document.getElementById(`streaming-${sessionId}`);
+    if (streamingEl) {
+      const indicator = streamingEl.querySelector('.streaming-indicator');
+      if (indicator) indicator.remove();
+      streamingEl.classList.remove('streaming-message');
+      const prevTextEl = streamingEl.querySelector('.streaming-text-current');
+      if (prevTextEl) prevTextEl.classList.remove('streaming-text-current');
+
+      const ts = document.createElement('div');
+      ts.className = 'message-timestamp';
+      ts.textContent = new Date().toLocaleString();
+      streamingEl.appendChild(ts);
+    }
 
     this.enableControls();
-    this.emit('streaming:complete', {
-      ...data,
-      duration,
-      eventCount: this.state.sessionEvents.length
-    });
+    this.emit('streaming:complete', data);
   }
 
   /**
@@ -339,32 +398,55 @@ class AgentGUIClient {
     }
   }
 
-  /**
-   * Handle message created
-   */
   handleMessageCreated(data) {
-    // If the message is for the currently displayed conversation, append it to the output
-    if (data.conversationId === this.state.currentConversation?.id && data.message) {
-      const outputEl = document.querySelector('.conversation-messages');
-      if (outputEl) {
-        const messageHtml = `
-          <div class="message message-${data.message.role}">
-            <div class="message-role">${data.message.role.charAt(0).toUpperCase() + data.message.role.slice(1)}</div>
-            ${this.renderMessageContent(data.message.content)}
-            <div class="message-timestamp">${new Date(data.message.created_at).toLocaleString()}</div>
-          </div>
-        `;
-        outputEl.insertAdjacentHTML('beforeend', messageHtml);
-        // Scroll to bottom
-        const scrollContainer = document.getElementById('output-scroll');
-        if (scrollContainer) {
-          scrollContainer.scrollTop = scrollContainer.scrollHeight;
-        }
-      }
+    if (data.conversationId !== this.state.currentConversation?.id || !data.message) {
+      this.emit('message:created', data);
+      return;
     }
+
+    if (data.message.role === 'assistant' && this.state.isStreaming) {
+      this.emit('message:created', data);
+      return;
+    }
+
+    const outputEl = document.querySelector('.conversation-messages');
+    if (!outputEl) {
+      this.emit('message:created', data);
+      return;
+    }
+
+    const messageHtml = `
+      <div class="message message-${data.message.role}" data-msg-id="${data.message.id}">
+        <div class="message-role">${data.message.role.charAt(0).toUpperCase() + data.message.role.slice(1)}</div>
+        ${this.renderMessageContent(data.message.content)}
+        <div class="message-timestamp">${new Date(data.message.created_at).toLocaleString()}</div>
+      </div>
+    `;
+    outputEl.insertAdjacentHTML('beforeend', messageHtml);
+    this.scrollToBottom();
     this.emit('message:created', data);
   }
 
+  handleQueueStatus(data) {
+    if (data.conversationId !== this.state.currentConversation?.id) return;
+
+    const outputEl = document.querySelector('.conversation-messages');
+    if (!outputEl) return;
+
+    let queueEl = outputEl.querySelector('.queue-indicator');
+    if (data.queueLength > 0) {
+      if (!queueEl) {
+        queueEl = document.createElement('div');
+        queueEl.className = 'queue-indicator';
+        queueEl.style.cssText = 'padding:0.5rem 1rem;margin:0.5rem 0;border-radius:0.375rem;background:var(--color-warning);color:#000;font-size:0.875rem;text-align:center;';
+        outputEl.appendChild(queueEl);
+      }
+      queueEl.textContent = `${data.queueLength} message${data.queueLength > 1 ? 's' : ''} queued`;
+    } else if (queueEl) {
+      queueEl.remove();
+    }
+  }
+
   /**
    * Parse markdown code blocks from text
    * Returns array of parts with type ('text' or 'code') and content/language/code
@@ -476,15 +558,7 @@ class AgentGUIClient {
     }
   }
 
-  /**
-   * Start execution
-   */
   async startExecution() {
-    if (this.state.isStreaming) {
-      this.showError('Streaming already in progress');
-      return;
-    }
-
     const prompt = this.ui.messageInput?.value || '';
     const agentId = this.ui.agentSelector?.value || 'claude-code';
 
@@ -493,23 +567,28 @@ class AgentGUIClient {
       return;
     }
 
-    try {
-      this.disableControls();
+    if (this.ui.messageInput) this.ui.messageInput.value = '';
 
-      const response = await fetch(window.__BASE_URL + '/api/conversations', {
-        method: 'POST',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({
-          agentId,
-          title: prompt.substring(0, 50)
-        })
-      });
+    try {
+      if (this.state.currentConversation?.id) {
+        await this.streamToConversation(this.state.currentConversation.id, prompt, agentId);
+      } else {
+        this.disableControls();
+        const response = await fetch(window.__BASE_URL + '/api/conversations', {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({ agentId, title: prompt.substring(0, 50) })
+        });
+        const { conversation } = await response.json();
+        this.state.currentConversation = conversation;
 
-      const { conversation } = await response.json();
-      this.state.currentConversation = conversation;
+        if (window.conversationManager) {
+          window.conversationManager.loadConversations();
+          window.conversationManager.select(conversation.id);
+        }
 
-      // Start streaming
-      await this.streamToConversation(conversation.id, prompt, agentId);
+        await this.streamToConversation(conversation.id, prompt, agentId);
+      }
     } catch (error) {
       console.error('Execution error:', error);
       this.showError('Failed to start execution: ' + error.message);
@@ -517,33 +596,32 @@ class AgentGUIClient {
     }
   }
 
-  /**
-   * Stream execution to conversation
-   */
   async streamToConversation(conversationId, prompt, agentId) {
     try {
+      if (this.wsManager.isConnected) {
+        this.wsManager.sendMessage({ type: 'subscribe', conversationId });
+      }
+
       const response = await fetch(`${window.__BASE_URL}/api/conversations/${conversationId}/stream`, {
         method: 'POST',
         headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({
-          content: prompt,
-          agentId,
-          skipPermissions: false
-        })
+        body: JSON.stringify({ content: prompt, agentId, skipPermissions: false })
       });
 
-      if (!response.ok) {
-        throw new Error(`HTTP ${response.status}`);
-      }
+      if (!response.ok) throw new Error(`HTTP ${response.status}`);
 
-      const { session, streamId } = await response.json();
+      const result = await response.json();
 
-      // Subscribe to session events via WebSocket
-      if (this.wsManager.isConnected) {
-        this.wsManager.subscribeToSession(session.id);
+      if (result.queued) {
+        console.log('Message queued, position:', result.queuePosition);
+        return;
       }
 
-      this.emit('execution:started', { session, streamId });
+      if (result.session && this.wsManager.isConnected) {
+        this.wsManager.subscribeToSession(result.session.id);
+      }
+
+      this.emit('execution:started', result);
     } catch (error) {
       console.error('Stream execution error:', error);
       this.showError('Failed to stream execution: ' + error.message);
@@ -675,37 +753,33 @@ class AgentGUIClient {
     }
   }
 
-  /**
-   * Load and display conversation messages
-   */
   async loadConversationMessages(conversationId) {
     try {
-      this.state.currentConversation = { id: conversationId };
-
-      // Fetch conversation details
       const convResponse = await fetch(window.__BASE_URL + `/api/conversations/${conversationId}`);
       const { conversation } = await convResponse.json();
+      this.state.currentConversation = conversation;
 
-      // Fetch messages
-      const messagesResponse = await fetch(window.__BASE_URL + `/api/conversations/${conversationId}/messages`);
-      if (!messagesResponse.ok) {
-        throw new Error(`Failed to fetch messages: ${messagesResponse.status}`);
+      if (this.wsManager.isConnected) {
+        this.wsManager.sendMessage({ type: 'subscribe', conversationId });
       }
+
+      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();
 
-      // Clear output and display conversation header
       const outputEl = document.getElementById('output');
       if (outputEl) {
-        const wdInfo = conversation.workingDirectory ? ` • ${this.escapeHtml(conversation.workingDirectory)}` : '';
+        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>
+            <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>
         `;
+        this.scrollToBottom();
       }
     } catch (error) {
       console.error('Failed to load conversation messages:', error);

package/static/js/websocket-manager.js

@@ -50,7 +50,7 @@ class WebSocketManager {
   getWebSocketURL() {
     const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
     const baseURL = window.__BASE_URL || '/gm';
-    return `${protocol}//${window.location.host}${baseURL}/ws`;
+    return `${protocol}//${window.location.host}${baseURL}/sync`;
   }
 
   /**