Auto-save canvas workflow state after every edit

web/components/views/project/project-view.tsx

@@ -2,6 +2,7 @@ import Icon from "@/components/misc/icon";
 import { EditorContext } from "@/components/providers/editor-context-provider";
 import { useEditorAIAssistantHint } from "@/lib/hooks/use-editor-ai-assistant-hint";
 import { useTabViewManager } from "@/lib/hooks/use-tab-view-manager";
+import { useWorkflowPersistence } from "@/lib/hooks/use-workflow-persistence";
 import { createCanvasViewId } from "@/lib/views/view-helpers";
 import { Button, Input } from "@heroui/react";
 import { useCallback, useContext } from "react";
@@ -10,19 +11,27 @@ export default function ProjectView() {
   const editorContext = useContext(EditorContext);
 
   const { createCanvasTabView } = useTabViewManager();
+  const { loadWorkflow } = useWorkflowPersistence();
   const { hint: inputPlaceholder } = useEditorAIAssistantHint();
 
   const createNewCanvas = useCallback(async () => {
+    const savedContent = await loadWorkflow();
+
     await createCanvasTabView({
       viewId: createCanvasViewId(),
+      appConfigs:
+        savedContent?.nodes
+          .filter((node) => node?.data?.config != null)
+          .map((node) => node.data.config) ?? [],
+      initialWorkflowContent: savedContent ?? undefined,
     });
 
     // Open explorer for canvas views
     editorContext?.setEditorStates((prev) => ({
       ...prev,
       isSideMenuOpen: true,
     }));
-  }, []);
+  }, [loadWorkflow, createCanvasTabView, editorContext]);
 
   const openMarketplace = useCallback(() => {
     editorContext?.setEditorStates((prev) => ({

web/lib/hooks/use-canvas-workflow.ts

@@ -11,12 +11,14 @@ import { useCallback, useContext, useEffect, useState } from "react";
 import { useDebouncedCallback } from "use-debounce";
 import { AppNodeData, WorkflowContent } from "../types";
 import useWorkflowExecutor from "./use-workflow-executor";
+import { useWorkflowPersistence } from "./use-workflow-persistence";
 
 export default function useCanvasWorkflow(
   initialWorkflowContent?: WorkflowContent,
 ) {
   const editorContext = useContext(EditorContext);
   const imcContext = useContext(IMCContext);
+  const { saveWorkflow } = useWorkflowPersistence();
 
   const [entryPoint, setEntryPoint] = useState<
     ReactFlowNode<AppNodeData> | undefined
@@ -66,6 +68,13 @@ export default function useCanvasWorkflow(
     }));
   }, 500);
 
+  const debouncePersistCanvasState = useDebouncedCallback(() => {
+    saveWorkflow({
+      nodes: localNodes,
+      edges: localEdges,
+    });
+  }, 1000);
+
   const updateWorkflowNodeData = useCallback(
     (nodeViewId: string, data: Partial<AppNodeData>) => {
       setLocalNodes((prev) => {
@@ -140,6 +149,7 @@ export default function useCanvasWorkflow(
 
   useEffect(() => {
     debounceSaveNodesAndEdges();
+    debouncePersistCanvasState();
   }, [localNodes, localEdges]);
 
   // Restore snapshot states upon loading a workflow

web/lib/hooks/use-workflow-persistence.ts

@@ -0,0 +1,63 @@
+import { useContext } from "react";
+import { EditorContext } from "@/components/providers/editor-context-provider";
+import { WorkflowContent } from "@/lib/types";
+import { usePlatformApi } from "./use-platform-api";
+
+/**
+ * Hook that provides canvas workflow persistence.
+ * Saves and loads workflow content via the platform API (file system on
+ * desktop/mobile, localStorage on cloud/web) so that in-progress edits
+ * survive page reloads and app restarts.
+ */
+export function useWorkflowPersistence() {
+  const { platformApi } = usePlatformApi();
+  const editorContext = useContext(EditorContext);
+
+  /**
+   * Returns a stable storage key for the current project.
+   * Combines projectHomePath and projectName so each project has its own
+   * saved canvas state.
+   */
+  function getProjectUri(): string | undefined {
+    const project = editorContext?.editorStates.project;
+    if (!project) return undefined;
+    const homePath = editorContext?.persistSettings?.projectHomePath;
+    return homePath ? `${homePath}/${project}` : project;
+  }
+
+  /**
+   * Persist the given workflow content for the active project.
+   * Silently no-ops when no project is open or the platform API is unavailable.
+   */
+  async function saveWorkflow(content: WorkflowContent): Promise<void> {
+    if (!platformApi) return;
+    const projectUri = getProjectUri();
+    if (!projectUri) return;
+    try {
+      await platformApi.saveCanvasState(projectUri, content);
+    } catch (err) {
+      console.error("Failed to save canvas state:", err);
+    }
+  }
+
+  /**
+   * Load the previously saved workflow content for the active project.
+   * Returns undefined when no saved state exists or the load fails.
+   */
+  async function loadWorkflow(): Promise<WorkflowContent | undefined> {
+    if (!platformApi) return undefined;
+    const projectUri = getProjectUri();
+    if (!projectUri) return undefined;
+    try {
+      return await platformApi.loadCanvasState(projectUri);
+    } catch (err) {
+      console.error("Failed to load canvas state:", err);
+      return undefined;
+    }
+  }
+
+  return {
+    saveWorkflow,
+    loadWorkflow,
+  };
+}

web/lib/platform-api/abstract-platform-api.ts

@@ -1,5 +1,5 @@
 import { FileSystemObject, ListPathOptions } from "@pulse-editor/shared-utils";
-import { PersistentSettings, ProjectInfo } from "../types";
+import { PersistentSettings, ProjectInfo, WorkflowContent } from "../types";
 
 export abstract class AbstractPlatformAPI {
   // Show a selection dialogue to pick a directory.
@@ -69,4 +69,55 @@ export abstract class AbstractPlatformAPI {
 
   // Create a new terminal and get socket
   abstract createTerminal(): Promise<string>;
+
+  // Canvas state persistence
+  /**
+   * Save the canvas workflow state for the given project.
+   * The default implementation persists to localStorage for offline support.
+   *
+   * @param projectUri A stable identifier for the project
+   *   (e.g. the full file-system path or the project name for cloud environments).
+   * @param content The workflow content to persist.
+   */
+  async saveCanvasState(
+    projectUri: string,
+    content: WorkflowContent,
+  ): Promise<void> {
+    if (typeof window !== "undefined") {
+      try {
+        localStorage.setItem(
+          `pulse-canvas-${projectUri}`,
+          JSON.stringify(content),
+        );
+      } catch (err) {
+        console.error("Failed to save canvas state to localStorage:", err);
+      }
+    }
+  }
+
+  /**
+   * Load the previously saved canvas workflow state for the given project.
+   * The default implementation reads from localStorage.
+   *
+   * @param projectUri A stable identifier for the project.
+   * @returns The saved workflow content, or undefined if nothing was saved.
+   */
+  async loadCanvasState(
+    projectUri: string,
+  ): Promise<WorkflowContent | undefined> {
+    if (typeof window !== "undefined") {
+      try {
+        const stored = localStorage.getItem(`pulse-canvas-${projectUri}`);
+        if (!stored) return undefined;
+        const parsed = JSON.parse(stored);
+        if (!Array.isArray(parsed?.nodes) || !Array.isArray(parsed?.edges)) {
+          return undefined;
+        }
+        return parsed as WorkflowContent;
+      } catch (err) {
+        console.error("Failed to load canvas state from localStorage:", err);
+      }
+    }
+    return undefined;
+  }
 }

web/lib/platform-api/capacitor/capacitor-api.ts

@@ -1,4 +1,4 @@
-import { PersistentSettings, ProjectInfo } from "@/lib/types";
+import { PersistentSettings, ProjectInfo, WorkflowContent } from "@/lib/types";
 import { Directory, Encoding, Filesystem } from "@capacitor/filesystem";
 import { FilePicker } from "@capawesome/capacitor-file-picker";
 import { FileSystemObject, ListPathOptions } from "@pulse-editor/shared-utils";
@@ -332,6 +332,42 @@ export class CapacitorAPI extends AbstractPlatformAPI {
     );
   }
 
+  async saveCanvasState(
+    projectUri: string,
+    content: WorkflowContent,
+  ): Promise<void> {
+    const canvasFile = new File(
+      [JSON.stringify(content, null, 2)],
+      "canvas.json",
+      { type: "application/json" },
+    );
+    try {
+      await this.writeFile(canvasFile, `${projectUri}/canvas.json`);
+    } catch (err) {
+      console.error("Failed to save canvas state to file:", err);
+      await super.saveCanvasState(projectUri, content);
+    }
+  }
+
+  async loadCanvasState(
+    projectUri: string,
+  ): Promise<WorkflowContent | undefined> {
+    try {
+      const hasCanvas = await this.hasPath(`${projectUri}/canvas.json`);
+      if (!hasCanvas) return undefined;
+      const file = await this.readFile(`${projectUri}/canvas.json`);
+      const text = await file.text();
+      const parsed = JSON.parse(text);
+      if (!Array.isArray(parsed?.nodes) || !Array.isArray(parsed?.edges)) {
+        return undefined;
+      }
+      return parsed as WorkflowContent;
+    } catch (err) {
+      console.error("Failed to load canvas state from file:", err);
+      return super.loadCanvasState(projectUri);
+    }
+  }
+
   private getStoragePathAndDir(uri: string): {
     path: string;
     directory: Directory;