sparkecoder 0.1.67 → 0.1.69

package/web/.next/standalone/web/src/lib/api.ts

@@ -311,19 +311,32 @@ function parseSSEStream(
   return new Promise(async (resolve, reject) => {
     const reader = response.body?.getReader();
     if (!reader) {
+      console.error('[SSE] No response body — cannot read stream');
       reject(new Error('No response body'));
       return;
     }
 
     const decoder = new TextDecoder();
     let buffer = '';
+    let totalEvents = 0;
+    let browserFrames = 0;
+    let browserStatusEvents = 0;
+    let parseErrors = 0;
+    let totalBytes = 0;
+    let lastStatsLog = Date.now();
     const shouldDebugSSE = typeof window !== 'undefined' && (window as any).__sparkeSseDebug === true;
 
+    console.log('[SSE] Stream reader started, status:', response.status);
+
     try {
       while (true) {
         const { done, value } = await reader.read();
-        if (done) break;
+        if (done) {
+          console.log(`[SSE] Stream ended. Total events: ${totalEvents}, browser frames: ${browserFrames}, browser status: ${browserStatusEvents}, parse errors: ${parseErrors}, bytes: ${totalBytes}`);
+          break;
+        }
 
+        totalBytes += value?.byteLength ?? 0;
         buffer += decoder.decode(value, { stream: true });
         const lines = buffer.split('\n');
         buffer = lines.pop() || '';
@@ -331,13 +344,38 @@ function parseSSEStream(
         for (const line of lines) {
           if (line.startsWith('data: ')) {
             const data = line.slice(6);
-            if (data === '[DONE]') continue;
+            if (data === '[DONE]') {
+              console.log('[SSE] Received [DONE] marker');
+              continue;
+            }
 
             try {
               const event = JSON.parse(data);
+              totalEvents++;
               
+              // Track browser-specific events
+              if (event.type === 'browser-frame') {
+                browserFrames++;
+                if (browserFrames === 1) {
+                  console.log(`[SSE] First browser-frame received! dataSize=${event.data?.length ?? 0}`);
+                } else if (browserFrames % 50 === 0) {
+                  console.log(`[SSE] Browser frame #${browserFrames}`);
+                }
+              } else if (event.type === 'browser-status') {
+                browserStatusEvents++;
+                console.log(`[SSE] Browser status event: connected=${event.connected} screencasting=${event.screencasting}`);
+              }
+
+              // Periodic stats
+              const now = Date.now();
+              if (now - lastStatsLog > 10000) {
+                console.log(`[SSE] Stats: events=${totalEvents} browserFrames=${browserFrames} bytes=${totalBytes} parseErrors=${parseErrors}`);
+                lastStatsLog = now;
+              }
+
               // Capture stream ID for reconnection
               if (event.type === 'data-stream-id' && onStreamId) {
+                console.log(`[SSE] Stream ID received: ${event.streamId}`);
                 onStreamId(event.streamId);
               }
 
@@ -354,10 +392,12 @@ function parseSSEStream(
 
               onEvent(event as SSEEvent);
             } catch (err) {
+              parseErrors++;
               console.warn('[SSE] Failed to parse event JSON', {
                 error: err instanceof Error ? err.message : String(err),
                 dataLength: data.length,
                 preview: data.slice(0, 200),
+                parseErrors,
               });
               if (shouldDebugSSE && typeof window !== 'undefined') {
                 window.dispatchEvent(new CustomEvent('sparke:sse-parse-error', {
@@ -374,6 +414,7 @@ function parseSSEStream(
       }
       resolve();
     } catch (err) {
+      console.error(`[SSE] Stream read error after ${totalEvents} events, ${totalBytes} bytes:`, err);
       reject(err);
     }
   });
@@ -398,6 +439,7 @@ export function runAgent(
   }
 ): () => void {
   const controller = new AbortController();
+  console.log(`[STREAM] runAgent: starting stream for session ${sessionId}`);
 
   const body: { prompt: string; attachments?: RunAgentAttachment[] } = { prompt };
   if (options?.attachments && options.attachments.length > 0) {
@@ -411,19 +453,29 @@ export function runAgent(
     signal: controller.signal,
   })
     .then(async (response) => {
+      console.log(`[STREAM] runAgent: response status=${response.status}, content-type=${response.headers.get('content-type')}`);
       const streamId = response.headers.get('x-stream-id');
-      if (streamId && options?.onStreamId) {
-        options.onStreamId(streamId);
+      if (streamId) {
+        console.log(`[STREAM] runAgent: received stream ID ${streamId}`);
+        if (options?.onStreamId) {
+          options.onStreamId(streamId);
+        }
       }
       await parseSSEStream(response, onEvent, options?.onStreamId);
+      console.log(`[STREAM] runAgent: stream completed for session ${sessionId}`);
     })
     .catch((err) => {
       if (err.name !== 'AbortError') {
-        console.error('Stream error:', err);
+        console.error(`[STREAM] runAgent error for session ${sessionId}:`, err);
+      } else {
+        console.log(`[STREAM] runAgent: aborted for session ${sessionId}`);
       }
     });
 
-  return () => controller.abort();
+  return () => {
+    console.log(`[STREAM] runAgent: abort called for session ${sessionId}`);
+    controller.abort();
+  };
 }
 
 // Watch/subscribe to an existing stream (for multiple tabs/clients)
@@ -443,30 +495,41 @@ export function watchStream(
   if (options?.resumeAt !== undefined) params.set('resumeAt', String(options.resumeAt));
 
   const url = `${getApiBase()}/agents/${sessionId}/watch${params.toString() ? '?' + params.toString() : ''}`;
+  console.log(`[STREAM] watchStream: connecting to ${url}`);
 
   fetch(url, { signal: controller.signal })
     .then(async (response) => {
+      console.log(`[STREAM] watchStream: response status=${response.status}, content-type=${response.headers.get('content-type')}`);
       if (!response.ok) {
         const error = await response.json().catch(() => ({ error: 'Unknown error' }));
-        console.error('Watch stream error:', error);
+        console.error(`[STREAM] watchStream error: status=${response.status}`, error);
         onEvent({ type: 'error', errorText: error.error || 'Failed to watch stream' });
         return;
       }
 
       const streamId = response.headers.get('x-stream-id');
-      if (streamId && options?.onStreamId) {
-        options.onStreamId(streamId);
+      if (streamId) {
+        console.log(`[STREAM] watchStream: received stream ID ${streamId}`);
+        if (options?.onStreamId) {
+          options.onStreamId(streamId);
+        }
       }
 
       await parseSSEStream(response, onEvent, options?.onStreamId);
+      console.log(`[STREAM] watchStream: completed for session ${sessionId}`);
     })
     .catch((err) => {
       if (err.name !== 'AbortError') {
-        console.error('Watch stream error:', err);
+        console.error(`[STREAM] watchStream error for session ${sessionId}:`, err);
+      } else {
+        console.log(`[STREAM] watchStream: aborted for session ${sessionId}`);
       }
     });
 
-  return () => controller.abort();
+  return () => {
+    console.log(`[STREAM] watchStream: abort called for session ${sessionId}`);
+    controller.abort();
+  };
 }
 
 export type SSEEvent =
@@ -520,6 +583,7 @@ export function streamTerminal(
   onExit?: () => void
 ): () => void {
   const controller = new AbortController();
+  console.log(`[TERMINAL] Connecting to terminal stream: ${terminalId}`);
   
   const connect = async () => {
     try {
@@ -528,17 +592,22 @@ export function streamTerminal(
       });
       
       if (!response.ok || !response.body) {
-        console.error('Failed to connect to terminal stream');
+        console.error(`[TERMINAL] Failed to connect to terminal stream ${terminalId}: status=${response.status}`);
         return;
       }
+      console.log(`[TERMINAL] Connected to terminal stream ${terminalId}`);
       
       const reader = response.body.getReader();
       const decoder = new TextDecoder();
       let buffer = '';
+      let chunkCount = 0;
       
       while (true) {
         const { done, value } = await reader.read();
-        if (done) break;
+        if (done) {
+          console.log(`[TERMINAL] Stream ended for ${terminalId} after ${chunkCount} output chunks`);
+          break;
+        }
         
         buffer += decoder.decode(value, { stream: true });
         const lines = buffer.split('\n\n');
@@ -547,7 +616,6 @@ export function streamTerminal(
         for (const chunk of lines) {
           if (!chunk.trim()) continue;
           
-          // Parse SSE format: "event: type\ndata: {...}"
           const eventMatch = chunk.match(/event:\s*(\w+)/);
           const dataMatch = chunk.match(/data:\s*(.+)/);
           
@@ -557,8 +625,10 @@ export function streamTerminal(
               const data = JSON.parse(dataMatch[1]);
               
               if (eventType === 'stdout' && data.data) {
+                chunkCount++;
                 onOutput(data.data);
               } else if (eventType === 'exit') {
+                console.log(`[TERMINAL] Exit event for ${terminalId}`);
                 onExit?.();
               }
             } catch {
@@ -569,14 +639,17 @@ export function streamTerminal(
       }
     } catch (error) {
       if (error instanceof Error && error.name !== 'AbortError') {
-        console.error('Terminal stream error:', error);
+        console.error(`[TERMINAL] Stream error for ${terminalId}:`, error);
       }
     }
   };
   
   connect();
   
-  return () => controller.abort();
+  return () => {
+    console.log(`[TERMINAL] Aborting terminal stream ${terminalId}`);
+    controller.abort();
+  };
 }
 
 // ============================================