@messenger-box/tailwind-ui-inbox 10.0.3-alpha.143 → 10.0.3-alpha.154

package/src/xstate/rightSidebar.machine.ts

@@ -1,5 +1,6 @@
+// eslint-disable-next-line import/no-extraneous-dependencies
 import { createMachine, assign, fromPromise } from 'xstate';
-import type { RightSidebarContext, MachineEvent } from './rightSidebar.types';
+import type { RightSidebarContext, MachineEvent, ProbeEvent, RecreateSandboxEvent } from './rightSidebar.types';
 
 export const rightSidebarMachine = createMachine({
     id: 'rightSidebar',
@@ -30,13 +31,13 @@ export const rightSidebarMachine = createMachine({
                     })),
                 },
                 SET_FRAGMENT: {
-                    target: 'probing',
                     actions: assign(({ context, event }) => ({
                         ...context,
                         activeFragment: event.fragment,
                         currentFiles: event.fragment?.files || context.currentFiles,
                         canvasLayers: (event.fragment?.canvasLayers as unknown[]) || context.canvasLayers,
-                        previewStatus: event.fragment?.sandboxUrl ? { status: 'checking' } : null,
+                        // Don't set previewStatus to 'checking' automatically - only probe when explicitly needed
+                        previewStatus: null,
                     })),
                 },
                 PROBE: 'probing',
@@ -46,17 +47,58 @@ export const rightSidebarMachine = createMachine({
                         isLoading: event.isLoading,
                     })),
                 },
-                RECREATE_SANDBOX: 'recreating',
+                CLEAR_PREVIEW_STATUS: {
+                    actions: assign(({ context }) => ({
+                        ...context,
+                        previewStatus: null,
+                    })),
+                },
+                RECREATE_SANDBOX: [
+                    {
+                        // Only transition if we're not already recreating
+                        guard: ({ context }) => {
+                            // Check if we have a fragment ID to recreate
+                            const hasFragmentId = !!context.activeFragment?.id;
+                            if (!hasFragmentId) {
+                                console.log('🚫 RECREATE_SANDBOX: No fragment ID, ignoring');
+                                return false;
+                            }
+                            return true;
+                        },
+                        target: 'recreating',
+                        actions: assign(({ context, event }) => {
+                            const recreateEvent = event as RecreateSandboxEvent;
+                            console.log('🎯 RECREATE_SANDBOX event received and accepted:', {
+                                id: recreateEvent.id,
+                                fragmentId: context.activeFragment?.id,
+                            });
+                            return context;
+                        }),
+                    },
+                    {
+                        // If guard fails or already recreating, just log and stay in current state
+                        actions: ({ context, event }) => {
+                            const recreateEvent = event as RecreateSandboxEvent;
+                            console.log('⏭️ RECREATE_SANDBOX ignored (already recreating or no fragment):', {
+                                id: recreateEvent.id,
+                                fragmentId: context.activeFragment?.id,
+                            });
+                        },
+                    },
+                ],
             },
         },
         probing: {
             invoke: {
                 id: 'probeUrl',
                 src: 'probeUrl',
-                input: ({ context, event }) => ({
-                    url: (event as any).url ?? context.activeFragment?.sandboxUrl,
-                    fragmentId: (event as any).fragmentId ?? context.activeFragment?.id,
-                }),
+                input: ({ context, event }) => {
+                    const probeEvent = event as ProbeEvent;
+                    return {
+                        url: probeEvent.url ?? context.activeFragment?.sandboxUrl,
+                        fragmentId: probeEvent.fragmentId ?? context.activeFragment?.id,
+                    };
+                },
                 onDone: {
                     target: 'idle',
                     actions: assign(({ context }) => ({
@@ -65,29 +107,95 @@ export const rightSidebarMachine = createMachine({
                         isLoading: false,
                     })),
                 },
-                onError: {
-                    target: 'idle',
-                    actions: assign(({ context, event }) => ({
-                        ...context,
-                        previewStatus: {
-                            status: 'error',
-                            message: event.error instanceof Error ? event.error.message : 'Network error',
+                onError: [
+                    {
+                        // Only recreate if we have a fragment ID AND the error suggests the sandbox is truly unavailable
+                        // Don't recreate on transient network errors (timeouts, CORS, etc.)
+                        guard: ({ context, event }): boolean => {
+                            if (!context.activeFragment?.id) {
+                                console.log('🚫 Guard: No fragment ID, skipping recreation');
+                                return false;
+                            }
+                            const errorMessage =
+                                event.error instanceof Error ? event.error.message : String(event.error);
+
+                            // Check for explicit HTTP status codes (4xx, 5xx)
+                            const isServerError = /^[45]\d{2}/.test(errorMessage);
+
+                            // Also check for CORS/network errors that likely indicate expired sandbox (502)
+                            // CORS errors on sandbox URLs usually mean the sandbox is expired/down
+                            const isCorsNetworkError: boolean =
+                                errorMessage.includes('502 CORS/Network Error') ||
+                                errorMessage.includes('Failed to fetch') ||
+                                errorMessage.includes('CORS') ||
+                                errorMessage.includes('NetworkError') ||
+                                errorMessage.includes('Network request failed');
+
+                            const willRecreate: boolean = isServerError || isCorsNetworkError;
+
+                            console.log('🔍 Guard check:', {
+                                errorMessage,
+                                isServerError,
+                                isCorsNetworkError,
+                                willRecreate,
+                            });
+
+                            return willRecreate;
                         },
-                        isLoading: false,
-                    })),
-                },
+                        target: 'recreating',
+                        actions: assign(({ context, event }) => {
+                            console.log('🔄 Transitioning to recreating state:', {
+                                fragmentId: context.activeFragment?.id,
+                                error: event.error instanceof Error ? event.error.message : String(event.error),
+                            });
+                            return {
+                                ...context,
+                                previewStatus: {
+                                    status: 'error',
+                                    message: event.error instanceof Error ? event.error.message : 'Network error',
+                                },
+                                isLoading: true,
+                            };
+                        }),
+                    },
+                    {
+                        // For other errors (network, CORS, timeout), just show error but don't recreate
+                        target: 'idle',
+                        actions: assign(({ context, event }) => ({
+                            ...context,
+                            previewStatus: {
+                                status: 'error',
+                                message: event.error instanceof Error ? event.error.message : 'Network error',
+                            },
+                            isLoading: false,
+                        })),
+                    },
+                ],
             },
         },
         recreating: {
             invoke: {
                 id: 'recreateSandbox',
                 src: 'recreateSandbox',
-                input: ({ event }) => ({ id: (event as any).id }),
+                input: ({ context, event }) => {
+                    const recreateEvent = event as RecreateSandboxEvent;
+                    const id = recreateEvent.id ?? context.activeFragment?.id ?? '';
+                    console.log('📥 recreateSandbox input:', {
+                        id,
+                        hasRecreateEventId: !!recreateEvent.id,
+                        hasActiveFragmentId: !!context.activeFragment?.id,
+                        activeFragmentId: context.activeFragment?.id,
+                    });
+                    return {
+                        id,
+                    };
+                },
                 onDone: {
                     target: 'idle',
                     actions: assign(({ context }) => ({
                         ...context,
                         isLoading: false,
+                        previewStatus: { status: 'checking' },
                     })),
                 },
                 onError: {
@@ -102,16 +210,30 @@ export const rightSidebarMachine = createMachine({
                     })),
                 },
             },
+            on: {
+                COMPLETE_RECREATION: {
+                    target: 'idle',
+                    actions: assign(({ context }) => ({
+                        ...context,
+                        isLoading: false,
+                        previewStatus: null,
+                    })),
+                },
+            },
         },
     },
 }).provide({
     actors: {
         probeUrl: fromPromise(async ({ input }) => {
             const { url } = input as { url?: string };
-            if (!url) return { ok: false } as const;
+            console.log('🔍 probeUrl actor called with URL:', url);
+            if (!url) {
+                throw new Error('No URL provided for probing');
+            }
             const controller = new AbortController();
             const timeoutId = setTimeout(() => controller.abort(), 10000);
             try {
+                console.log('📡 Fetching URL to probe:', url);
                 const res = await fetch(url, {
                     method: 'GET',
                     mode: 'cors',
@@ -119,12 +241,55 @@ export const rightSidebarMachine = createMachine({
                     signal: controller.signal,
                 });
                 clearTimeout(timeoutId);
+
+                console.log('📊 Probe response status:', res.status, res.statusText);
+
+                // Check for HTTP error status codes (4xx, 5xx)
                 if (!res.ok) {
-                    throw new Error(`${res.status} ${res.statusText}`);
+                    const statusCode = res.status;
+                    const statusText = res.statusText || 'Unknown Error';
+                    const errorMessage = `${statusCode} ${statusText}`;
+                    console.log('❌ Probe detected error:', errorMessage);
+                    // Throw error with status code format that matches the guard regex: /^[45]\d{2}/
+                    throw new Error(errorMessage);
                 }
+
+                console.log('✅ Probe successful - URL is accessible');
                 return { ok: true } as const;
-            } finally {
+            } catch (error) {
                 clearTimeout(timeoutId);
+
+                // If it's an abort (timeout), don't treat as server error
+                if (error instanceof Error && error.name === 'AbortError') {
+                    throw new Error('TIMEOUT Request timeout');
+                }
+
+                // If it's already a formatted error (from res.ok check), rethrow it
+                if (error instanceof Error && /^\d{3}/.test(error.message)) {
+                    throw error;
+                }
+
+                // Handle CORS/network errors - these often mask 502 errors from expired sandboxes
+                // When we get a CORS error or "Failed to fetch", it's likely because:
+                // 1. The sandbox is expired (502) and the server isn't responding properly
+                // 2. The sandbox is down and can't set CORS headers
+                // We'll throw a special error that the guard can recognize
+                if (error instanceof Error) {
+                    const isCorsError =
+                        error.message.includes('Failed to fetch') ||
+                        error.message.includes('CORS') ||
+                        error.message.includes('NetworkError') ||
+                        error.message.includes('Network request failed');
+
+                    if (isCorsError) {
+                        console.log('⚠️ CORS/Network error detected - likely expired sandbox (502):', error.message);
+                        // Throw as 502 error so guard will match it
+                        throw new Error('502 CORS/Network Error - Sandbox likely expired');
+                    }
+                }
+
+                // For other network errors, throw as-is and let guard decide
+                throw error;
             }
         }),
         recreateSandbox: fromPromise(async ({ input }) => {

package/src/xstate/rightSidebar.types.ts

@@ -17,6 +17,7 @@ export type ActiveFragment = {
     canvasLayers?: unknown[];
     summary?: unknown;
     isError?: boolean;
+    isCreatingSandbox?: boolean;
 } | null;
 
 export type RightSidebarContext = {
@@ -50,6 +51,8 @@ export type MachineEvent =
     | SetFragmentEvent
     | ProbeEvent
     | RecreateSandboxEvent
-    | { type: 'SET_LOADING'; isLoading: boolean };
+    | { type: 'SET_LOADING'; isLoading: boolean }
+    | { type: 'CLEAR_PREVIEW_STATUS' }
+    | { type: 'COMPLETE_RECREATION' };
 
-export type SubmitOrganizationActor = ActorRefFrom<any>;
+export type SubmitOrganizationActor = ActorRefFrom<unknown>;