astro-tractstack 2.0.0-rc.8 → 2.0.0

package/templates/src/components/edit/state/SaveModal.tsx

@@ -11,12 +11,15 @@ import {
   fullContentMapStore,
   getPendingImageOperation,
   clearPendingImageOperation,
+  pendingHomePageSlugStore,
 } from '@/stores/storykeep';
 import { startLoadingAnimation } from '@/utils/helpers';
 import type {
+  FlatNode,
   BaseNode,
   PaneNode,
   StoryFragmentNode,
+  MarkdownPaneFragmentNode,
 } from '@/types/compositorTypes';
 
 type SaveStage =
@@ -27,12 +30,15 @@ type SaveStage =
   | 'SAVING_STORY_FRAGMENTS'
   | 'LINKING_FILES'
   | 'PROCESSING_STYLES'
+  | 'UPDATING_HOME_PAGE'
   | 'COMPLETED'
   | 'ERROR';
 
 interface SaveStageProgress {
   currentStep: number;
   totalSteps: number;
+  currentFileName?: string;
+  isUploading?: boolean;
 }
 
 interface SaveModalProps {
@@ -42,6 +48,13 @@ interface SaveModalProps {
   onClose: () => void;
 }
 
+const PROGRESS_PHASES = {
+  PREPARATION: 5,
+  UPLOADS: 60,
+  PROCESSING: 25,
+  FINALIZATION: 10,
+};
+
 export default function SaveModal({
   show,
   slug,
@@ -59,13 +72,8 @@ export default function SaveModal({
   const [debugMessages, setDebugMessages] = useState<string[]>([]);
   const isSaving = useRef(false);
   const [isNavigating, setIsNavigating] = useState(false);
-
-  // Determine if we're in create mode
   const isCreateMode = slug === 'create';
-
-  const contentMap = fullContentMapStore.get();
-
-  // Get backend URL
+  const pendingHomePageSlug = pendingHomePageSlugStore.get();
   const goBackend =
     import.meta.env.PUBLIC_GO_BACKEND || 'http://localhost:8080';
   const tenantId = import.meta.env.PUBLIC_TENANTID || 'default';
@@ -75,9 +83,7 @@ export default function SaveModal({
     setDebugMessages((prev) => [...prev, `${timestamp}: ${message}`]);
   };
 
-  // Main save process
   useEffect(() => {
-    // Reset state when modal is hidden or if save is already running
     if (!show) {
       setStage('PREPARING');
       setProgress(0);
@@ -96,12 +102,13 @@ export default function SaveModal({
 
       try {
         setStage('PREPARING');
-        setProgress(5);
+        setProgress(PROGRESS_PHASES.PREPARATION);
         addDebugMessage(
-          `Starting save process... (${isContext ? 'Context' : 'StoryFragment'} mode, ${isCreateMode ? 'CREATE' : 'UPDATE'})`
+          `Starting save process... (${
+            isContext ? 'Context' : 'StoryFragment'
+          } mode, ${isCreateMode ? 'CREATE' : 'UPDATE'})`
         );
 
-        // Filter nodes based on context mode
         let dirtyPanes = allDirtyNodes.filter(
           (node) => node.nodeType === 'Pane'
         );
@@ -109,7 +116,6 @@ export default function SaveModal({
           (node) => node.nodeType === 'StoryFragment'
         );
 
-        // In context mode, we only care about panes, not story fragments
         if (isContext) {
           dirtyStoryFragments = [];
           addDebugMessage('Context mode: Ignoring StoryFragment nodes');
@@ -119,8 +125,6 @@ export default function SaveModal({
           (node): node is BaseNode & { base64Data?: string } =>
             'base64Data' in node && !!node.base64Data
         );
-
-        // Check for story fragments with pending OG image operations
         const storyFragmentsWithPendingImages = dirtyStoryFragments.filter(
           (fragment) => {
             const pendingOp = getPendingImageOperation(fragment.id);
@@ -128,6 +132,20 @@ export default function SaveModal({
           }
         );
 
+        const totalFileBytes = nodesWithPendingFiles.reduce(
+          (sum, node) => sum + (node.base64Data?.length || 0),
+          0
+        );
+        const totalOgBytes = storyFragmentsWithPendingImages.reduce(
+          (sum, fragment) => {
+            const pendingOp = getPendingImageOperation(fragment.id);
+            return sum + (pendingOp?.data?.length || 0);
+          },
+          0
+        );
+        const totalUploadBytes = totalFileBytes + totalOgBytes;
+        let completedUploadBytes = 0;
+
         const relevantNodeCount =
           dirtyPanes.length + dirtyStoryFragments.length;
         addDebugMessage(
@@ -143,7 +161,8 @@ export default function SaveModal({
         if (
           relevantNodeCount === 0 &&
           nodesWithPendingFiles.length === 0 &&
-          storyFragmentsWithPendingImages.length === 0
+          storyFragmentsWithPendingImages.length === 0 &&
+          !pendingHomePageSlug
         ) {
           addDebugMessage('No changes to save');
           setStage('COMPLETED');
@@ -151,35 +170,25 @@ export default function SaveModal({
           return;
         }
 
-        const totalSteps =
-          nodesWithPendingFiles.length +
-          storyFragmentsWithPendingImages.length +
-          dirtyPanes.length +
-          dirtyStoryFragments.length +
-          2; // +1 for file linking, +1 for styles
-
-        addDebugMessage(
-          `Save plan: ${nodesWithPendingFiles.length} files, ${storyFragmentsWithPendingImages.length} og images, ${dirtyPanes.length} panes, ${dirtyStoryFragments.length} story fragments, 1 file linking, 1 styles = ${totalSteps} total steps`
-        );
-
-        let completedSteps = 1;
-
-        // PHASE 1: Upload all pending files and OG images first
         const uploadedOGPaths: Record<string, string> = {};
 
-        // Handle pending files
         if (nodesWithPendingFiles.length > 0) {
           setStage('SAVING_PENDING_FILES');
-          setStageProgress({
-            currentStep: 0,
-            totalSteps: nodesWithPendingFiles.length,
-          });
-
           for (let i = 0; i < nodesWithPendingFiles.length; i++) {
             const fileNode = nodesWithPendingFiles[i];
+            const fileBytes = fileNode.base64Data?.length || 0;
             const endpoint = `${goBackend}/api/v1/nodes/files/create`;
+
+            setStageProgress({
+              currentStep: i + 1,
+              totalSteps: nodesWithPendingFiles.length,
+              currentFileName: `${fileNode.id}.jpg`,
+              isUploading: true,
+            });
             addDebugMessage(
-              `Processing file ${i + 1}/${nodesWithPendingFiles.length}: ${fileNode.id} -> POST ${endpoint}`
+              `Processing file ${i + 1}/${nodesWithPendingFiles.length}: ${
+                fileNode.id
+              } -> POST ${endpoint}`
             );
 
             try {
@@ -190,7 +199,7 @@ export default function SaveModal({
                   'X-Tenant-ID': tenantId,
                 },
                 credentials: 'include',
-                body: JSON.stringify({ base64Data: fileNode.base64Data }), // FIXED: only send base64Data
+                body: JSON.stringify({ base64Data: fileNode.base64Data }),
               });
 
               if (!response.ok) {
@@ -198,16 +207,12 @@ export default function SaveModal({
               }
 
               const result = await response.json();
-
-              // Update tree with response data - handle different node types properly
               const updatedNode = { ...fileNode, isChanged: true };
 
-              // Remove base64Data and add file properties
               if ('base64Data' in updatedNode) {
                 delete updatedNode.base64Data;
               }
 
-              // Add file properties - these properties already exist in FlatNode and BgImageNode types
               if ('fileId' in updatedNode) {
                 updatedNode.fileId = result.fileId;
               }
@@ -232,29 +237,39 @@ export default function SaveModal({
               );
             }
 
-            setStageProgress((prev) => ({ ...prev, currentStep: i + 1 }));
-            completedSteps++;
-            setProgress((completedSteps / totalSteps) * 80);
+            completedUploadBytes += fileBytes;
+            const uploadProgress =
+              totalUploadBytes > 0
+                ? (completedUploadBytes / totalUploadBytes) *
+                  PROGRESS_PHASES.UPLOADS
+                : 0;
+            setProgress(PROGRESS_PHASES.PREPARATION + uploadProgress);
+            setStageProgress((prev) => ({ ...prev, isUploading: false }));
           }
         }
 
-        // Handle OG image uploads
         if (storyFragmentsWithPendingImages.length > 0) {
           setStage('PROCESSING_OG_IMAGES');
-          setStageProgress({
-            currentStep: 0,
-            totalSteps: storyFragmentsWithPendingImages.length,
-          });
           for (let i = 0; i < storyFragmentsWithPendingImages.length; i++) {
             const fragment = storyFragmentsWithPendingImages[i];
             const pendingOp = getPendingImageOperation(fragment.id);
+            const imageBytes = pendingOp?.data?.length || 0;
 
             if (pendingOp && pendingOp.type === 'upload' && pendingOp.data) {
               const ogUploadEndpoint = `${goBackend}/api/v1/nodes/images/og`;
               addDebugMessage(
-                `Processing OG image ${i + 1}/${storyFragmentsWithPendingImages.length}: ${fragment.id} -> POST ${ogUploadEndpoint}`
+                `Processing OG image ${i + 1}/${
+                  storyFragmentsWithPendingImages.length
+                }: ${fragment.id} -> POST ${ogUploadEndpoint}`
               );
 
+              setStageProgress({
+                currentStep: i + 1,
+                totalSteps: storyFragmentsWithPendingImages.length,
+                currentFileName: pendingOp?.filename || `${fragment.id}-og.png`,
+                isUploading: true,
+              });
+
               const uploadPayload = {
                 data: pendingOp.data,
                 filename:
@@ -292,78 +307,136 @@ export default function SaveModal({
                   `Failed to upload OG image for ${fragment.id}: ${errorMsg}`
                 );
               }
+              completedUploadBytes += imageBytes;
+              const uploadProgress =
+                totalUploadBytes > 0
+                  ? (completedUploadBytes / totalUploadBytes) *
+                    PROGRESS_PHASES.UPLOADS
+                  : 0;
+              setProgress(PROGRESS_PHASES.PREPARATION + uploadProgress);
+              setStageProgress((prev) => ({ ...prev, isUploading: false }));
             }
-
-            setStageProgress((prev) => ({ ...prev, currentStep: i + 1 }));
-            completedSteps++;
-            setProgress((completedSteps / totalSteps) * 80);
           }
         }
 
-        // Handle panes
+        if (totalUploadBytes > 0) {
+          setProgress(PROGRESS_PHASES.PREPARATION + PROGRESS_PHASES.UPLOADS);
+        }
+
+        const totalProcessingSteps =
+          dirtyPanes.length + dirtyStoryFragments.length;
+        let completedProcessingSteps = 0;
+
         if (dirtyPanes.length > 0) {
           setStage('SAVING_PANES');
           setStageProgress({
             currentStep: 0,
             totalSteps: dirtyPanes.length,
           });
-          for (let i = 0; i < dirtyPanes.length; i++) {
-            const paneNode = dirtyPanes[i];
-
-            try {
-              const payload = transformLivePaneForSave(
-                ctx,
-                paneNode.id,
-                isContext
-              );
 
-              // Check if this pane exists or is new
-              const paneExistsInBackend = contentMap.some(
-                (item) => item.type === 'Pane' && item.id === paneNode.id
-              );
-              const isCreatePaneMode = !paneExistsInBackend;
-              const endpoint = isCreatePaneMode
-                ? `${goBackend}/api/v1/nodes/panes/create`
-                : `${goBackend}/api/v1/nodes/panes/${payload.id}`;
-              const method = isCreatePaneMode ? 'POST' : 'PUT';
+          const bulkPayload = dirtyPanes.map((paneNode) =>
+            transformLivePaneForSave(ctx, paneNode.id, isContext)
+          );
 
-              addDebugMessage(
-                `Processing pane ${i + 1}/${dirtyPanes.length}: ${paneNode.id} -> ${method} ${endpoint}`
-              );
+          bulkPayload.forEach((payload) => {
+            payload.optionsPayload.nodes.forEach((transformedNode) => {
+              const liveNode = ctx.allNodes.get().get(transformedNode.id);
+              if (!liveNode) return;
+
+              let needsUpdate = false;
+              let updatedNode: BaseNode = { ...liveNode };
+
+              if (
+                transformedNode.nodeType === 'TagElement' &&
+                transformedNode.elementCss
+              ) {
+                const flatNode = liveNode as FlatNode;
+                if (flatNode.elementCss !== transformedNode.elementCss) {
+                  (updatedNode as FlatNode).elementCss =
+                    transformedNode.elementCss;
+                  needsUpdate = true;
+                }
+              }
 
-              const response = await fetch(endpoint, {
-                method,
-                headers: {
-                  'Content-Type': 'application/json',
-                  'X-Tenant-ID': tenantId,
-                },
-                credentials: 'include',
-                body: JSON.stringify(payload),
-              });
+              if (
+                transformedNode.nodeType === 'Markdown' &&
+                transformedNode.parentCss
+              ) {
+                const markdownNode = liveNode as MarkdownPaneFragmentNode;
+                const currentParentCss = markdownNode.parentCss;
+                const newParentCss = transformedNode.parentCss as string[];
+
+                const isDifferent =
+                  !currentParentCss ||
+                  currentParentCss.length !== newParentCss.length ||
+                  currentParentCss.some(
+                    (css, index) => css !== newParentCss[index]
+                  );
+
+                if (isDifferent) {
+                  (updatedNode as MarkdownPaneFragmentNode).parentCss =
+                    newParentCss;
+                  needsUpdate = true;
+                }
+              }
 
-              if (!response.ok) {
-                throw new Error(`HTTP error! status: ${response.status}`);
+              if (needsUpdate) {
+                ctx.allNodes.get().set(transformedNode.id, updatedNode);
               }
+            });
+          });
 
-              //const result =
-              await response.json();
-              addDebugMessage(`Pane ${paneNode.id} saved successfully`);
-            } catch (etlError) {
-              const errorMsg =
-                etlError instanceof Error ? etlError.message : 'Unknown error';
-              addDebugMessage(`Pane ${paneNode.id} ETL failed: ${errorMsg}`);
+          const endpoint = `${goBackend}/api/v1/nodes/panes/bulk`;
+          addDebugMessage(
+            `Processing ${dirtyPanes.length} panes via -> POST ${endpoint}`
+          );
+
+          try {
+            const response = await fetch(endpoint, {
+              method: 'POST',
+              headers: {
+                'Content-Type': 'application/json',
+                'X-Tenant-ID': tenantId,
+              },
+              credentials: 'include',
+              body: JSON.stringify({ panes: bulkPayload }),
+            });
+
+            if (!response.ok) {
+              const errorText = await response.text();
               throw new Error(
-                `Failed to save pane ${paneNode.id}: ${errorMsg}`
+                `HTTP error! status: ${response.status} - ${errorText}`
               );
             }
 
-            setStageProgress((prev) => ({ ...prev, currentStep: i + 1 }));
-            completedSteps++;
-            setProgress((completedSteps / totalSteps) * 80);
+            await response.json();
+            addDebugMessage(
+              `${dirtyPanes.length} panes saved successfully via bulk endpoint.`
+            );
+          } catch (bulkError) {
+            const errorMsg =
+              bulkError instanceof Error
+                ? bulkError.message
+                : 'Unknown bulk save error';
+            addDebugMessage(`Bulk pane save failed: ${errorMsg}`);
+            throw new Error(`Failed to save panes in bulk: ${errorMsg}`);
           }
+
+          setStageProgress({
+            currentStep: dirtyPanes.length,
+            totalSteps: dirtyPanes.length,
+          });
+          completedProcessingSteps += dirtyPanes.length;
+          const processingProgress =
+            (completedProcessingSteps / totalProcessingSteps) *
+            PROGRESS_PHASES.PROCESSING;
+          setProgress(
+            PROGRESS_PHASES.PREPARATION +
+              PROGRESS_PHASES.UPLOADS +
+              processingProgress
+          );
         }
 
-        // Handle story fragments
         if (!isContext && dirtyStoryFragments.length > 0) {
           setStage('SAVING_STORY_FRAGMENTS');
           setStageProgress({
@@ -380,7 +453,6 @@ export default function SaveModal({
                 window.TRACTSTACK_CONFIG?.tenantId || 'default'
               );
 
-              // If we uploaded an OG image for this fragment, use that path
               if (uploadedOGPaths[fragment.id]) {
                 payload.socialImagePath = uploadedOGPaths[fragment.id];
               }
@@ -391,7 +463,9 @@ export default function SaveModal({
               const method = isCreateMode ? 'POST' : 'PUT';
 
               addDebugMessage(
-                `Processing story fragment ${i + 1}/${dirtyStoryFragments.length}: ${fragment.id} -> ${method} ${endpoint}`
+                `Processing story fragment ${i + 1}/${
+                  dirtyStoryFragments.length
+                }: ${fragment.id} -> ${method} ${endpoint}`
               );
 
               const response = await fetch(endpoint, {
@@ -408,13 +482,11 @@ export default function SaveModal({
                 throw new Error(`HTTP error! status: ${response.status}`);
               }
 
-              //const result =
               await response.json();
               addDebugMessage(
                 `StoryFragment ${fragment.id} saved successfully`
               );
 
-              // Clear pending image operation after successful save
               if (uploadedOGPaths[fragment.id]) {
                 clearPendingImageOperation(fragment.id);
                 addDebugMessage(
@@ -433,17 +505,28 @@ export default function SaveModal({
             }
 
             setStageProgress((prev) => ({ ...prev, currentStep: i + 1 }));
-            completedSteps++;
-            setProgress((completedSteps / totalSteps) * 80);
+            completedProcessingSteps++;
+            const processingProgress =
+              (completedProcessingSteps / totalProcessingSteps) *
+              PROGRESS_PHASES.PROCESSING;
+            setProgress(
+              PROGRESS_PHASES.PREPARATION +
+                PROGRESS_PHASES.UPLOADS +
+                processingProgress
+            );
           }
         }
 
-        // PHASE 3: Link file-pane relationships
+        const baseFinalizationProgress =
+          PROGRESS_PHASES.PREPARATION +
+          PROGRESS_PHASES.UPLOADS +
+          PROGRESS_PHASES.PROCESSING;
+
         if (dirtyPanes.length > 0) {
           setStage('LINKING_FILES');
+          setProgress(baseFinalizationProgress);
           addDebugMessage('Starting file-pane relationship linking...');
 
-          // Extract pane<>file relationships from saved panes
           const relationships = [];
           for (const paneNode of dirtyPanes) {
             const fileIds = ctx.getPaneImageFileIds(paneNode.id);
@@ -491,84 +574,132 @@ export default function SaveModal({
           } else {
             addDebugMessage('No file relationships to link');
           }
-
-          completedSteps++;
-          setProgress((completedSteps / totalSteps) * 90);
         }
 
-        // PHASE 4: Styles processing (2-step process)
         setStage('PROCESSING_STYLES');
-        setProgress(95);
+        setProgress(
+          baseFinalizationProgress + PROGRESS_PHASES.FINALIZATION / 2
+        );
         addDebugMessage(`Processing styles...`);
 
         try {
           const { dirtyPaneIds, classes: dirtyClasses } =
             ctx.getDirtyNodesClassData();
 
-          if (dirtyClasses.length === 0) {
-            addDebugMessage(
-              'No dirty classes to process, skipping Tailwind update'
+          const astroEndpoint = `/api/tailwind`;
+          const astroPayload = { dirtyPaneIds, dirtyClasses };
+          const astroResponse = await fetch(astroEndpoint, {
+            method: 'POST',
+            headers: {
+              'Content-Type': 'application/json',
+              'X-Tenant-ID': tenantId,
+            },
+            credentials: 'include',
+            body: JSON.stringify(astroPayload),
+          });
+
+          if (!astroResponse.ok) {
+            throw new Error(
+              `CSS generation failed! status: ${astroResponse.status}`
             );
-          } else {
-            // STEP 1: Generate CSS using Astro API
-            const astroEndpoint = `/api/tailwind`;
-            const astroPayload = { dirtyPaneIds, dirtyClasses };
-            const astroResponse = await fetch(astroEndpoint, {
-              method: 'POST',
+          }
+
+          const astroResult = await astroResponse.json();
+
+          if (!astroResult.success || !astroResult.generatedCss) {
+            throw new Error('CSS generation failed: no CSS returned');
+          }
+
+          addDebugMessage(
+            `CSS generated: ${astroResult.generatedCss.length} bytes for ${dirtyClasses.length} classes`
+          );
+
+          const goEndpoint = `${goBackend}/api/v1/tailwind/update`;
+          const goPayload = { frontendCss: astroResult.generatedCss };
+          const goResponse = await fetch(goEndpoint, {
+            method: 'POST',
+            headers: {
+              'Content-Type': 'application/json',
+              'X-Tenant-ID': tenantId,
+            },
+            credentials: 'include',
+            body: JSON.stringify(goPayload),
+          });
+
+          if (!goResponse.ok) {
+            throw new Error(`CSS save failed! status: ${goResponse.status}`);
+          }
+
+          const goResult = await goResponse.json();
+          addDebugMessage(
+            `CSS saved successfully: stylesVer ${goResult.stylesVer}`
+          );
+        } catch (error) {
+          const errorMsg =
+            error instanceof Error ? error.message : 'Unknown error';
+          addDebugMessage(`Styles processing failed: ${errorMsg}`);
+          throw new Error(`Failed to process styles: ${errorMsg}`);
+        }
+
+        if (pendingHomePageSlug) {
+          setStage('UPDATING_HOME_PAGE');
+          setProgress(
+            baseFinalizationProgress + (PROGRESS_PHASES.FINALIZATION - 2)
+          );
+          addDebugMessage(`Updating home page to: ${pendingHomePageSlug}`);
+
+          try {
+            const response = await fetch(`${goBackend}/api/v1/config/brand`, {
+              method: 'GET',
               headers: {
                 'Content-Type': 'application/json',
                 'X-Tenant-ID': tenantId,
               },
               credentials: 'include',
-              body: JSON.stringify(astroPayload),
             });
 
-            if (!astroResponse.ok) {
+            if (!response.ok) {
               throw new Error(
-                `CSS generation failed! status: ${astroResponse.status}`
+                `Failed to get current brand config: ${response.status}`
               );
             }
 
-            const astroResult = await astroResponse.json();
+            const currentBrandConfig = await response.json();
 
-            if (!astroResult.success || !astroResult.generatedCss) {
-              throw new Error('CSS generation failed: no CSS returned');
-            }
+            const updatedBrandConfig = {
+              ...currentBrandConfig,
+              HOME_SLUG: pendingHomePageSlug,
+            };
 
-            addDebugMessage(
-              `CSS generated: ${astroResult.generatedCss.length} bytes for ${dirtyClasses.length} classes`
+            const updateResponse = await fetch(
+              `${goBackend}/api/v1/config/brand`,
+              {
+                method: 'PUT',
+                headers: {
+                  'Content-Type': 'application/json',
+                  'X-Tenant-ID': tenantId,
+                },
+                credentials: 'include',
+                body: JSON.stringify(updatedBrandConfig),
+              }
             );
 
-            // STEP 2: Save CSS to Go backend
-            const goEndpoint = `${goBackend}/api/v1/tailwind/update`;
-            const goPayload = { frontendCss: astroResult.generatedCss };
-            const goResponse = await fetch(goEndpoint, {
-              method: 'POST',
-              headers: {
-                'Content-Type': 'application/json',
-                'X-Tenant-ID': tenantId,
-              },
-              credentials: 'include',
-              body: JSON.stringify(goPayload),
-            });
-
-            if (!goResponse.ok) {
-              throw new Error(`CSS save failed! status: ${goResponse.status}`);
+            if (!updateResponse.ok) {
+              throw new Error(
+                `Failed to update home page: ${updateResponse.status}`
+              );
             }
 
-            const goResult = await goResponse.json();
-            addDebugMessage(
-              `CSS saved successfully: stylesVer ${goResult.stylesVer}`
-            );
+            pendingHomePageSlugStore.set(null);
+            addDebugMessage('Home page updated successfully');
+          } catch (error) {
+            const errorMsg =
+              error instanceof Error ? error.message : 'Unknown error';
+            addDebugMessage(`Home page update failed: ${errorMsg}`);
+            throw new Error(`Failed to update home page: ${errorMsg}`);
           }
-        } catch (error) {
-          const errorMsg =
-            error instanceof Error ? error.message : 'Unknown error';
-          addDebugMessage(`Styles processing failed: ${errorMsg}`);
-          throw new Error(`Failed to process styles: ${errorMsg}`);
         }
 
-        // Success!
         setStage('COMPLETED');
         setProgress(100);
         addDebugMessage('Save process completed successfully!');
@@ -589,10 +720,18 @@ export default function SaveModal({
   }, [show, slug, isContext, isCreateMode, goBackend, tenantId]);
 
   const getStageDescription = () => {
-    const getProgressText = () =>
-      stageProgress.totalSteps > 0
-        ? ` (${stageProgress.currentStep}/${stageProgress.totalSteps})`
-        : '';
+    const { currentStep, totalSteps, currentFileName, isUploading } =
+      stageProgress;
+
+    const getProgressText = () => {
+      if (currentFileName && isUploading) {
+        return ` - Uploading ${currentFileName}...`;
+      }
+      if (currentFileName && !isUploading) {
+        return ` - Completed ${currentFileName}`;
+      }
+      return totalSteps > 0 ? ` (${currentStep}/${totalSteps})` : '';
+    };
 
     const modeText = isContext ? 'Context Pane' : 'Story Fragment';
     const actionText = isCreateMode ? 'Creating' : 'Updating';
@@ -601,9 +740,9 @@ export default function SaveModal({
       case 'PREPARING':
         return `Preparing ${actionText.toLowerCase()} ${modeText.toLowerCase()}...`;
       case 'SAVING_PENDING_FILES':
-        return `Uploading files...${getProgressText()}`;
+        return `Uploading files${getProgressText()}`;
       case 'PROCESSING_OG_IMAGES':
-        return `Processing OG images...${getProgressText()}`;
+        return `Processing social images${getProgressText()}`;
       case 'SAVING_PANES':
         return `${actionText} pane content...${getProgressText()}`;
       case 'SAVING_STORY_FRAGMENTS':
@@ -612,6 +751,8 @@ export default function SaveModal({
         return 'Linking file relationships...';
       case 'PROCESSING_STYLES':
         return 'Processing styles...';
+      case 'UPDATING_HOME_PAGE':
+        return 'Updating home page...';
       case 'COMPLETED':
         return `${actionText} ${modeText.toLowerCase()} completed successfully!`;
       case 'ERROR':
@@ -634,19 +775,15 @@ export default function SaveModal({
 
       if (isCreateMode) {
         let actualSlug: string;
+        const ctx = getCtx();
+        const allDirtyNodes = ctx.getDirtyNodes();
 
         if (isContext) {
-          // For context mode, get slug from the saved pane
-          const ctx = getCtx();
-          const allDirtyNodes = ctx.getDirtyNodes();
           const dirtyPanes = allDirtyNodes.filter(
             (node): node is PaneNode => node.nodeType === 'Pane'
           );
           actualSlug = dirtyPanes[0].slug;
         } else {
-          // For storyfragment mode, get slug from the saved storyfragment
-          const ctx = getCtx();
-          const allDirtyNodes = ctx.getDirtyNodes();
           const dirtyStoryFragments = allDirtyNodes.filter(
             (node): node is StoryFragmentNode =>
               node.nodeType === 'StoryFragment'
@@ -725,7 +862,11 @@ export default function SaveModal({
             <div className="p-6">
               <div className="mb-4">
                 <div className="mb-2 flex items-center justify-between">
-                  <span className="text-sm text-gray-700">
+                  <span
+                    className={`text-sm text-gray-700 ${
+                      stageProgress.isUploading ? 'animate-pulse' : ''
+                    }`}
+                  >
                     {getStageDescription()}
                   </span>
                   {stage !== 'ERROR' && (
@@ -764,7 +905,7 @@ export default function SaveModal({
 
               {stage === 'ERROR' && (
                 <div className="mb-4 rounded bg-red-50 p-3 text-red-800">
-                  <div className="font-medium">Save failed</div>
+                  <div className="font-bold">Save failed</div>
                   <div className="mt-1 text-sm">{error}</div>
                 </div>
               )}
@@ -790,6 +931,12 @@ export default function SaveModal({
                       >
                         Keep Editing
                       </button>
+                      <a
+                        href="/storykeep/content"
+                        className={`rounded bg-black px-4 py-2 text-white transition-colors hover:bg-white hover:text-black`}
+                      >
+                        Dashboard
+                      </a>
                     </>
                   )}
                   {stage === 'ERROR' && (