fix(pearl): correct SSE error event format and fix infinite loading on missing API key

Three related bugs fixed:

1. Wrong SSE error event shape in backend routes
   - bubble-flows.ts and ai.ts were sending { type: 'error', error: '...' }
   - StreamingEvent schema requires { type: 'error', data: { error, recoverable } }
   - Frontend handler reads event.data.error, so errors silently fell back to
     'An error occurred' or were swallowed entirely

2. Missing error event on coffee agent failure (planning phase)
   - When GOOGLE_API_KEY is absent, coffee.ts returns early with success:false
   - The route only sent stream_complete with the error buried in coffeeResult
   - No error SSE event was emitted, so the frontend never received it

3. UI stuck in infinite loading state when API key is missing
   - generationAbortController was never cleared after the stream ended
   - isGenerating stayed true forever since setGenerationCompleted was never called
   - Added stream_complete error handling in handleStreamingEvent as a fallback
   - Added safety net in startGenerationStream to always clear isGenerating after
     the stream loop exits without a generation_complete event

Author: HarshTSC

apps/bubble-studio/src/hooks/usePearlChatStore.ts

@@ -424,9 +424,25 @@ export function handleStreamingEvent(
     case 'complete':
     case 'coffee_complete':
     case 'heartbeat':
-    case 'stream_complete':
-      // Ignore these events - they're control signals, not display events
       break;
+
+    case 'stream_complete': {
+      // Check if the backend returned an error result (e.g. missing API key)
+      const streamData = event as unknown as {
+        coffeeResult?: { type?: string; error?: string; success?: boolean };
+      };
+      if (
+        streamData.coffeeResult &&
+        streamData.coffeeResult.success === false
+      ) {
+        const errorMsg =
+          streamData.coffeeResult.error ||
+          'Generation failed. Please check your API key configuration.';
+        state.addEvent({ type: 'generation_error', message: errorMsg });
+        state.setGenerationCompleted(true); // also clears abort controller + isGenerating
+      }
+      break;
+    }
   }
 }
 

apps/bubble-studio/src/hooks/usePearlStream.ts

@@ -221,6 +221,11 @@ async function startGenerationStream(
         `[startGenerationStream] Stream completed successfully for flow ${flowId}`
       );
       pearlStore.getState().setIsCoffeeLoading(false);
+      // Safety net: if no generation_complete/error event was received, clear the
+      // generating state so the UI doesn't stay stuck in a loading loop.
+      if (!pearlStore.getState().generationCompleted) {
+        pearlStore.getState().cancelGenerationStream();
+      }
       return;
     } catch (error) {
       if (abortController.signal.aborted) {

apps/bubblelab-api/src/routes/ai.ts

@@ -148,9 +148,13 @@ app.openapi(pearlRoute, async (c) => {
       await stream.writeSSE({
         data: JSON.stringify({
           type: 'error',
-          error:
-            error instanceof Error ? error.message : 'Unknown streaming error',
-          recoverable: false,
+          data: {
+            error:
+              error instanceof Error
+                ? error.message
+                : 'Unknown streaming error',
+            recoverable: false,
+          },
         }),
         event: 'error',
       });

apps/bubblelab-api/src/routes/bubble-flows.ts

@@ -508,11 +508,13 @@ app.openapi(executeBubbleFlowStreamRoute, async (c) => {
         await stream.writeSSE({
           data: JSON.stringify({
             type: 'error',
-            error:
-              error instanceof Error
-                ? error.message
-                : 'Unknown streaming error',
-            recoverable: false,
+            data: {
+              error:
+                error instanceof Error
+                  ? error.message
+                  : 'Unknown streaming error',
+              recoverable: false,
+            },
           }),
           event: 'error',
         });
@@ -1416,6 +1418,23 @@ app.openapi(generateBubbleFlowCodeRoute, async (c) => {
           // Clear heartbeat and send stream completion
           clearInterval(heartbeatInterval);
 
+          // Emit a proper error event when coffee fails (e.g. missing API key)
+          // before stream_complete so the frontend error handler picks it up.
+          if (!coffeeResult.success) {
+            await stream.writeSSE({
+              data: JSON.stringify({
+                type: 'error',
+                data: {
+                  error:
+                    coffeeResult.error ||
+                    'Flow generation failed. Please check your API key configuration.',
+                  recoverable: false,
+                },
+              }),
+              event: 'error',
+            });
+          }
+
           await stream.writeSSE({
             data: JSON.stringify({
               type: 'stream_complete',
@@ -1690,11 +1709,13 @@ app.openapi(generateBubbleFlowCodeRoute, async (c) => {
         await stream.writeSSE({
           data: JSON.stringify({
             type: 'error',
-            error:
-              error instanceof Error
-                ? error.message
-                : 'Unknown streaming error',
-            recoverable: false,
+            data: {
+              error:
+                error instanceof Error
+                  ? error.message
+                  : 'Unknown streaming error',
+              recoverable: false,
+            },
           }),
           event: 'error',
         });