Autosave: 20260319-042720

frontend/src/pages/constructor.tsx

@@ -71,6 +71,11 @@ type CanvasElementType =
   | 'video_player'
   | 'audio_player';
 
+type NavigationElementType = Extract<
+  CanvasElementType,
+  'navigation_next' | 'navigation_prev'
+>;
+
 type CanvasElement = {
   id: string;
   type: CanvasElementType;
@@ -136,12 +141,20 @@ type EditorMenuItem =
   | 'background_audio'
   | 'create_transition';
 
-const parseJsonObject = <T,>(value?: string, fallback?: T): T => {
+const parseJsonObject = <T,>(value?: unknown, fallback?: T): T => {
   if (!value) return (fallback || ({} as T)) as T;
 
   try {
-    const parsed = JSON.parse(value);
+    if (typeof value === 'string') {
-    return (parsed || fallback || {}) as T;
+      const parsed = JSON.parse(value);
+      return (parsed || fallback || {}) as T;
+    }
+
+    if (typeof value === 'object') {
+      return value as T;
+    }
+
+    return (fallback || ({} as T)) as T;
   } catch (error) {
     console.error('Failed to parse constructor JSON:', error);
     return (fallback || ({} as T)) as T;
@@ -285,6 +298,14 @@ const labelByType: Record<CanvasElementType, string> = {
   audio_player: 'Audio Player',
 };
 
+const isNavigationElementType = (
+  type: CanvasElementType,
+): type is NavigationElementType =>
+  type === 'navigation_next' || type === 'navigation_prev';
+
+const getNavigationButtonLabel = (type: NavigationElementType) =>
+  type === 'navigation_next' ? 'Forward' : 'Back';
+
 const createDefaultElement = (
   type: CanvasElementType,
   index: number,
@@ -338,7 +359,7 @@ const createDefaultElement = (
   if (type === 'navigation_next' || type === 'navigation_prev') {
     return {
       ...base,
-      navLabel: type === 'navigation_next' ? 'Forward' : 'Back',
+      navLabel: getNavigationButtonLabel(type),
       iconUrl: '',
       transitionReverseMode: 'auto_reverse',
       transitionDurationSec: 0.7,
@@ -454,6 +475,16 @@ const ConstructorPage = () => {
     () => pages.find((item) => item.id === activePageId) || null,
     [activePageId, pages],
   );
+  const activePageIndex = useMemo(
+    () => pages.findIndex((item) => item.id === activePageId),
+    [activePageId, pages],
+  );
+  const allowedNavigationTypes = useMemo<NavigationElementType[]>(() => {
+    if (pages.length <= 1) return ['navigation_next'];
+    if (activePageIndex <= 0) return ['navigation_next'];
+    if (activePageIndex >= pages.length - 1) return ['navigation_prev'];
+    return ['navigation_next', 'navigation_prev'];
+  }, [activePageIndex, pages.length]);
   const pageNameById = useMemo(() => {
     const acc: Record<string, string> = {};
     pages.forEach((page, index) => {
@@ -465,6 +496,28 @@ const ConstructorPage = () => {
     () => elements.find((element) => element.id === selectedElementId) || null,
     [elements, selectedElementId],
   );
+  const normalizeNavigationElementType = useCallback(
+    (element: CanvasElement, nextType: NavigationElementType): CanvasElement => {
+      if (!isNavigationElementType(element.type)) return element;
+
+      const nextButtonLabel = getNavigationButtonLabel(nextType);
+      const hasDefaultLabel =
+        element.label === labelByType.navigation_next ||
+        element.label === labelByType.navigation_prev;
+      const hasDefaultNavLabel =
+        !element.navLabel ||
+        element.navLabel === getNavigationButtonLabel('navigation_next') ||
+        element.navLabel === getNavigationButtonLabel('navigation_prev');
+
+      return {
+        ...element,
+        type: nextType,
+        label: hasDefaultLabel ? labelByType[nextType] : element.label,
+        navLabel: hasDefaultNavLabel ? nextButtonLabel : element.navLabel,
+      };
+    },
+    [],
+  );
   const imageAssetOptions = useMemo(
     () =>
       assets
@@ -790,6 +843,22 @@ const ConstructorPage = () => {
     setBackgroundAudioUrl(activePage.background_audio_url || '');
   }, [activePage]);
 
+  useEffect(() => {
+    if (allowedNavigationTypes.length !== 1) return;
+    const forcedType = allowedNavigationTypes[0];
+
+    setElements((prev) => {
+      let hasChanges = false;
+      const nextElements = prev.map((element) => {
+        if (!isNavigationElementType(element.type) || element.type === forcedType)
+          return element;
+        hasChanges = true;
+        return normalizeNavigationElementType(element, forcedType);
+      });
+      return hasChanges ? nextElements : prev;
+    });
+  }, [allowedNavigationTypes, normalizeNavigationElementType]);
+
   useEffect(() => {
     const onPointerMove = (event: MouseEvent) => {
       if (menuDragRef.current) {
@@ -892,7 +961,12 @@ const ConstructorPage = () => {
   };
 
   const addElement = (type: CanvasElementType) => {
-    const nextElement = createDefaultElement(type, elements.length);
+    const nextElementType: CanvasElementType = isNavigationElementType(type)
+      ? allowedNavigationTypes.includes(type)
+        ? type
+        : allowedNavigationTypes[0]
+      : type;
+    const nextElement = createDefaultElement(nextElementType, elements.length);
     setElements((prev) => [...prev, nextElement]);
     selectElementForEdit(nextElement.id);
     setSuccessMessage('Element added. Drag it to set position.');
@@ -1037,7 +1111,13 @@ const ConstructorPage = () => {
       await axios.put(`/tour_pages/${activePageId}`, {
         id: activePageId,
         data: {
-          ui_schema_json: JSON.stringify(schemaToSave),
+          environment: activePage?.environment,
+          source_key: activePage?.source_key,
+          name: activePage?.name,
+          slug: activePage?.slug,
+          sort_order: activePage?.sort_order,
+          requires_auth: activePage?.requires_auth,
+          ui_schema_json: schemaToSave,
           background_image_url: backgroundImageUrl,
           background_video_url: backgroundVideoUrl,
           background_audio_url: backgroundAudioUrl,
@@ -1060,6 +1140,12 @@ const ConstructorPage = () => {
       setIsSaving(false);
     }
   }, [
+    activePage?.environment,
+    activePage?.name,
+    activePage?.requires_auth,
+    activePage?.slug,
+    activePage?.sort_order,
+    activePage?.source_key,
     activePage?.ui_schema_json,
     activePageId,
     backgroundAudioUrl,
@@ -1884,6 +1970,42 @@ const ConstructorPage = () => {
                   (selectedElement.type === 'navigation_next' ||
                     selectedElement.type === 'navigation_prev') && (
                     <div className='space-y-2'>
+                      <div>
+                        <label className='mb-1 block text-[11px] font-semibold text-gray-600'>
+                          Direction
+                        </label>
+                        <select
+                          className='w-full rounded border border-gray-300 px-2 py-1 text-xs'
+                          value={selectedElement.type}
+                          onChange={(event) => {
+                            const rawValue = event.target.value;
+                            const requestedType: NavigationElementType =
+                              rawValue === 'navigation_prev'
+                                ? 'navigation_prev'
+                                : 'navigation_next';
+                            const nextType = allowedNavigationTypes.includes(
+                              requestedType,
+                            )
+                              ? requestedType
+                              : allowedNavigationTypes[0];
+                            updateSelectedElement(
+                              normalizeNavigationElementType(
+                                selectedElement,
+                                nextType,
+                              ),
+                            );
+                          }}
+                          disabled={allowedNavigationTypes.length === 1}
+                        >
+                          {allowedNavigationTypes.map((type) => (
+                            <option key={type} value={type}>
+                              {type === 'navigation_next'
+                                ? 'Forward'
+                                : 'Back'}
+                            </option>
+                          ))}
+                        </select>
+                      </div>
                       <div>
                         <label className='mb-1 block text-[11px] font-semibold text-gray-600'>
                           Button text
@@ -2493,25 +2615,10 @@ const ConstructorPage = () => {
                 <button
                   type='button'
                   className='menu-action-btn'
-                  onClick={() => {
+                  onClick={() => addElement(allowedNavigationTypes[0])}
-                    const prevElement = createDefaultElement(
-                      'navigation_prev',
-                      elements.length,
-                    );
-                    const nextElement = createDefaultElement(
-                      'navigation_next',
-                      elements.length + 1,
-                    );
-                    setElements((prev) => [...prev, prevElement, nextElement]);
-                    selectElementForEdit(nextElement.id);
-                    setSuccessMessage(
-                      'Navigation buttons added. Configure transition in editor.',
-                    );
-                    setErrorMessage('');
-                  }}
                 >
                   <BaseIcon path={mdiSwapHorizontal} size={16} />
-                  <span>Add Navigation</span>
+                  <span>Add Navigation Button</span>
                 </button>
                 <button
                   type='button'

frontend/src/pages/index.tsx

@@ -28,12 +28,23 @@ export default function Starter() {
 
     async function loadRuntimeMode() {
       try {
-        const response = await axios.get('/runtime-context');
+        const response = await axios.get('/runtime-context', {
+          validateStatus: (status) =>
+            (status >= 200 && status < 300) || status === 503,
+        });
+
+        if (response.status === 503) {
+          return;
+        }
+
         const mode = response?.data?.mode;
         if (!isCancelled && (mode === 'stage' || mode === 'production')) {
           await router.replace('/runtime');
         }
       } catch (error) {
+        if (axios.isAxiosError(error) && error.response?.status === 503) {
+          return;
+        }
         console.error('Failed to detect runtime mode:', error);
       }
     }

frontend/src/pages/projects/[projectsId].tsx

@@ -64,9 +64,24 @@ const ProjectWorkspacePage = () => {
         setProject(response?.data || null);
 
         try {
-          const runtimeContextResponse = await axios.get('/runtime-context');
+          const runtimeContextResponse = await axios.get('/runtime-context', {
-          setRuntimeContext(runtimeContextResponse?.data || null);
+            validateStatus: (status) =>
+              (status >= 200 && status < 300) || status === 503,
+          });
+
+          if (runtimeContextResponse.status === 503) {
+            setRuntimeContext(null);
+          } else {
+            setRuntimeContext(runtimeContextResponse?.data || null);
+          }
         } catch (runtimeContextError) {
+          if (
+            axios.isAxiosError(runtimeContextError) &&
+            runtimeContextError.response?.status === 503
+          ) {
+            setRuntimeContext(null);
+            return;
+          }
           console.error('Failed to load runtime context:', runtimeContextError);
           setRuntimeContext(null);
         }

frontend/src/pages/runtime.tsx

@@ -171,8 +171,17 @@ const RuntimePageView = () => {
         setIsLoading(true);
         setError('');
 
-        const contextResponse = await axios.get('/runtime-context');
+        const contextResponse = await axios.get('/runtime-context', {
+          validateStatus: (status) =>
+            (status >= 200 && status < 300) || status === 503,
+        });
         if (isCancelled) return;
+
+        if (contextResponse.status === 503) {
+          setContext({ mode: 'unknown', projectSlug: null });
+          return;
+        }
+
         setContext(
           contextResponse.data || { mode: 'unknown', projectSlug: null },
         );
@@ -200,6 +209,13 @@ const RuntimePageView = () => {
         setTransitions(getRows(transitionsResponse));
       } catch (runtimeError: any) {
         if (isCancelled) return;
+        if (
+          axios.isAxiosError(runtimeError) &&
+          runtimeError.response?.status === 503
+        ) {
+          setContext({ mode: 'unknown', projectSlug: null });
+          return;
+        }
         const message =
           runtimeError?.response?.data?.message ||
           runtimeError?.message ||