Restore parameters from modal

.woodpecker.yml

@@ -1,11 +0,0 @@
-steps:
-  - name: Prepare
-    image: node:18-slim
-    commands:
-      - apt-get update -y
-      - apt-get install -yy git
-      - corepack enable
-      - corepack prepare pnpm@latest --activate
-      - pnpm install --frozen-lockfile
-      - pnpm prebuild
-      - pnpm build

README.md

@@ -37,14 +37,11 @@ Also note that the saved workflow format is subject to change until it's been fi
 
 ### Requirements
 
-- `git`
 - `pnpm`
 - An installation of vanilla [ComfyUI](https://github.com/comfyanonymous/ComfyUI) for the backend
 
 ### Installation
 
-**NOTE:** If you're using Windows, the following commands must be run with [Git Bash](https://git-scm.com/downloads).
-
 1. Clone the repo with submodules:
 
 ```

bin/serve.py

@@ -2,19 +2,15 @@
 
 import http.server
 import socketserver
-import argparse
 
-parser = argparse.ArgumentParser()
+PORT = 8000
-parser.add_argument("-l", "--listen", type=str, default="localhost", help="Listen address for ComfyBox server")
-parser.add_argument("-p", "--port", type=int, default=8000, help="Port for ComfyBox server")
-args = parser.parse_args()
 
 message = f"""Starting ComfyBox.
 Be sure you've started ComfyUI already using this command:
 
      python main.py --enable-cors-header
 
-Serving at http://{args.listen}:{args.port}...
+Serving at http://localhost:{PORT}...
 """
 
 # python -m http.server will sometimes send incorrect MIME types.
@@ -23,34 +19,33 @@ Serving at http://{args.listen}:{args.port}...
 # Hopefully this will cover everything.
 class HttpRequestHandler(http.server.SimpleHTTPRequestHandler):
     extensions_map = {
-        "": "application/octet-stream",
+        '': 'application/octet-stream',
-        ".manifest": "text/cache-manifest",
+        '.manifest': 'text/cache-manifest',
-        ".html": "text/html",
+        '.html': 'text/html',
-        ".png": "image/png",
+        '.png': 'image/png',
-        ".jpg": "image/jpg",
+        '.jpg': 'image/jpg',
-        ".jpeg": "image/jpeg",
+        '.jpeg': 'image/jpeg',
-        ".gif": "image/gif",
+        '.gif': 'image/gif',
-        ".svg": "image/svg+xml",
+        '.svg': 'image/svg+xml',
-        ".css": "text/css",
+        '.css': 'text/css',
-        ".js": "application/x-javascript",
+        '.js': 'application/x-javascript',
-        ".mjs": "application/x-javascript",
+        '.mjs': 'application/x-javascript',
-        ".cjs": "application/x-javascript",
+        '.cjs': 'application/x-javascript',
-        ".wasm": "application/wasm",
+        '.wasm': 'application/wasm',
-        ".json": "application/json",
+        '.json': 'application/json',
-        ".xml": "application/xml",
+        '.xml': 'application/xml',
-        ".xml": "application/xml",
+        '.xml': 'application/xml',
-        ".pdf": "application/pdf",
+        '.pdf': 'application/pdf',
-        ".webp": "image/webp",
+        '.webp': 'image/webp',
-        ".avif": "image/avif",
+        '.avif': 'image/avif',
-        ".heic": "image/heic",
+        '.heic': 'image/heic',
-        ".heif": "image/heif",
+        '.heif': 'image/heif',
-        ".mp3": "audio/mpeg",
+        '.mp3': 'audio/mpeg',
-        ".mp4": "video/mp4",
+        '.mp4': 'video/mp4',
-        ".m4v": "video/mp4",
+        '.m4v': 'video/mp4'
     }
 
-
+httpd = socketserver.TCPServer(("localhost", PORT), HttpRequestHandler)
-httpd = socketserver.TCPServer((args.listen, args.port), HttpRequestHandler)
 
 try:
     print(message)

package.json

@@ -18,38 +18,40 @@
     "build:css": "pollen -c gradio/js/theme/src/pollen.config.cjs && mv src/pollen.css node_modules/@gradio/theme/src"
   },
   "devDependencies": {
-    "@floating-ui/core": "^1.3.1",
+    "@floating-ui/core": "^1.2.6",
-    "@floating-ui/dom": "^1.4.2",
+    "@floating-ui/dom": "^1.2.8",
+    "@types/cytoscape": "^3.19.9",
+    "@types/dompurify": "^3.0.2",
     "@zerodevx/svelte-toast": "^0.9.3",
-    "eslint": "^8.43.0",
+    "eslint": "^8.37.0",
     "eslint-config-prettier": "^8.8.0",
     "eslint-plugin-svelte3": "^4.0.0",
-    "happy-dom": "^9.20.3",
+    "happy-dom": "^9.18.3",
-    "jsdom": "^22.1.0",
+    "jsdom": "^22.0.0",
-    "prettier": "^2.8.8",
+    "prettier": "^2.8.7",
-    "prettier-plugin-svelte": "^2.10.1",
+    "prettier-plugin-svelte": "^2.10.0",
-    "rollup-plugin-visualizer": "^5.9.2",
+    "rollup-plugin-visualizer": "^5.9.0",
-    "sass": "^1.63.6",
+    "sass": "^1.61.0",
-    "svelte": "^4.0.0",
+    "svelte": "^3.59.0",
-    "svelte-check": "^3.4.4",
+    "svelte-check": "^3.2.0",
     "svelte-dnd-action": "^0.9.22",
-    "typescript": "^5.1.3",
+    "typescript": "^5.0.3",
-    "vite": "^4.3.9",
+    "vite": "^4.3.8",
     "vite-plugin-glsl": "^1.1.2",
     "vite-plugin-static-copy": "^0.14.0",
     "vite-plugin-svelte-console-remover": "^1.0.10",
-    "vite-tsconfig-paths": "^4.2.0",
+    "vite-tsconfig-paths": "^4.0.8",
     "vitest": "^0.27.3"
   },
   "type": "module",
   "dependencies": {
-    "@codemirror/autocomplete": "^6.8.0",
+    "@codemirror/autocomplete": "^6.3.0",
-    "@codemirror/commands": "^6.2.4",
+    "@codemirror/commands": "^6.1.2",
-    "@codemirror/language": "^6.8.0",
+    "@codemirror/language": "^6.6.0",
-    "@codemirror/lint": "^6.2.2",
+    "@codemirror/lint": "^6.0.0",
-    "@codemirror/search": "^6.5.0",
+    "@codemirror/search": "^6.2.2",
-    "@codemirror/state": "^6.2.1",
+    "@codemirror/state": "^6.1.2",
-    "@codemirror/view": "^6.13.2",
+    "@codemirror/view": "^6.4.1",
     "@dogagenc/svelte-markdown": "^0.2.4",
     "@gradio/accordion": "workspace:*",
     "@gradio/atoms": "workspace:*",
@@ -65,9 +67,6 @@
     "@gradio/theme": "workspace:*",
     "@gradio/upload": "workspace:*",
     "@gradio/utils": "workspace:*",
-    "@lezer/generator": "^1.3.0",
-    "@lezer/highlight": "^1.1.6",
-    "@lezer/lr": "^1.3.7",
     "@litegraph-ts/core": "workspace:*",
     "@litegraph-ts/nodes-basic": "workspace:*",
     "@litegraph-ts/nodes-events": "workspace:*",
@@ -75,32 +74,34 @@
     "@litegraph-ts/nodes-math": "workspace:*",
     "@litegraph-ts/nodes-strings": "workspace:*",
     "@litegraph-ts/tsconfig": "workspace:*",
-    "@sveltejs/vite-plugin-svelte": "^2.4.2",
+    "@sveltejs/vite-plugin-svelte": "^2.1.1",
     "@tsconfig/svelte": "^4.0.1",
-    "@types/dompurify": "^3.0.2",
     "canvas-to-svg": "^1.0.3",
     "cm6-theme-basic-dark": "^0.2.0",
     "cm6-theme-basic-light": "^0.2.0",
     "codemirror": "^6.0.1",
-    "csv": "^6.3.1",
+    "csv": "^6.3.0",
-    "csv-parse": "^5.4.0",
+    "csv-parse": "^5.3.10",
+    "cytoscape": "^3.25.0",
+    "cytoscape-dagre": "^2.5.0",
+    "deep-equal": "^2.2.1",
     "dompurify": "^3.0.3",
     "events": "^3.3.0",
-    "framework7": "^8.1.0",
+    "framework7": "^8.0.3",
-    "framework7-svelte": "^8.1.0",
+    "framework7-svelte": "^8.0.3",
     "img-comparison-slider": "^8.0.0",
-    "marked": "^5.1.0",
+    "marked": "^5.0.3",
     "pollen-css": "^4.6.2",
     "radix-icons-svelte": "^1.2.1",
     "style-mod": "^4.0.3",
     "svelte-bootstrap-icons": "^2.3.1",
-    "svelte-feather-icons": "^4.0.1",
+    "svelte-feather-icons": "^4.0.0",
-    "svelte-floating-ui": "^1.5.3",
+    "svelte-floating-ui": "^1.5.2",
-    "svelte-preprocess": "^5.0.4",
+    "svelte-preprocess": "^5.0.3",
-    "svelte-select": "^5.6.1",
+    "svelte-select": "^5.5.3",
-    "svelte-splitpanes": "^0.7.15",
+    "svelte-splitpanes": "^0.7.13",
     "svelte-tiny-virtual-list": "^2.0.5",
-    "tailwindcss": "^3.3.2",
+    "tailwindcss": "^3.3.1",
     "typed-emitter": "github:andywer/typed-emitter",
     "uuid": "^9.0.0",
     "vite-plugin-full-reload": "^1.0.5",

public/workflows/defaultWorkflow.json

@@ -61,7 +61,7 @@
         ],
         "title": "UI.Gallery",
         "properties": {
-          "tags": ["gen"],
+          "tags": [],
           "defaultValue": [],
           "index": 3,
           "updateMode": "append",
@@ -1694,7 +1694,7 @@
         ],
         "title": "UI.Gallery",
         "properties": {
-          "tags": ["hr"],
+          "tags": [],
           "defaultValue": [],
           "index": 1,
           "updateMode": "append",

src/lib/ComfyBoxStdPrompt.ts

@@ -224,13 +224,13 @@ const Metadata = z.object({
     extra_data: ExtraData
 })
 
-const ComfyBoxStdPrompt = z.object({
+const StdPrompt = z.object({
     version: z.number(),
     metadata: Metadata,
     parameters: Parameters
 })
 
-export default ComfyBoxStdPrompt
+export default StdPrompt
 
 /*
  * A standardized Stable Diffusion parameter format that should be used with an
@@ -260,4 +260,4 @@ export default ComfyBoxStdPrompt
  * "see" width 1024 and height 1024, even though the only parameter exposed from
  * the frontend was the scale of 2.)
  */
-export type ComfyBoxStdPrompt = z.infer<typeof ComfyBoxStdPrompt>
+export type ComfyBoxStdPrompt = z.infer<typeof StdPrompt>

src/lib/ComfyBoxStdPromptSerializer.ts

@@ -1,31 +1,88 @@
 import type { ComfyBoxStdGroupLoRA, ComfyBoxStdPrompt } from "$lib/ComfyBoxStdPrompt";
-import type { SerializedPrompt, SerializedPromptInputs } from "./components/ComfyApp";
+import StdPrompt from "$lib/ComfyBoxStdPrompt";
+import type { SafeParseReturnType, ZodError } from "zod";
+import type { ComfyNodeID } from "./api";
+import type { SerializedAppState, SerializedPrompt, SerializedPromptInputs, SerializedPromptInputsAll } from "./components/ComfyApp";
+import { ComfyComboNode, type ComfyWidgetNode } from "./nodes/widgets";
+import { basename, isSerializedPromptInputLink } from "./utils";
 
-export type ComfyPromptConverter = (stdPrompt: ComfyBoxStdPrompt, inputs: SerializedPromptInputs, nodeID: ComfyNodeID) => void;
+export type ComfyPromptConverter = {
+    encoder: ComfyPromptEncoder,
+    decoder: ComfyPromptDecoder
+}
 
-function LoraLoader(stdPrompt: ComfyBoxStdPrompt, inputs: SerializedPromptInputs) {
+//
+export type ComfyDecodeArgument = {
+    groupName: string,
+    keyName: string,
+    value: any,
+    widgetNode: ComfyWidgetNode
+};
+
+export type ComfyPromptEncoder = (stdPrompt: ComfyBoxStdPrompt, inputs: SerializedPromptInputs, nodeID: ComfyNodeID) => void;
+export type ComfyPromptDecoder = (args: ComfyDecodeArgument[]) => void;
+
+const LoraLoader: ComfyPromptConverter = {
+    encoder: (stdPrompt: ComfyBoxStdPrompt, inputs: SerializedPromptInputs) => {
         const params = stdPrompt.parameters
+        const loras: ComfyBoxStdGroupLoRA[] = params.lora
 
-    const lora: ComfyBoxStdGroupLoRA = {
+        for (const lora of loras) {
-        model_name: inputs["lora_name"],
+            lora.model_hashes = {
-        strength_unet: inputs["strength_model"],
+                addnet_shorthash: null // TODO find hashes for model!
-        strength_tenc: inputs["strength_clip"]
+            }
+        }
+    },
+    decoder: (args: ComfyDecodeArgument[]) => {
+        // Find corresponding model names in the ComfyUI models folder from the model base filename
+        for (const arg of args) {
+            if (arg.groupName === "lora" && arg.keyName === "model_name" && arg.widgetNode.is(ComfyComboNode)) {
+                const modelBasename = basename(arg.value);
+                const found = arg.widgetNode.properties.values.find(k => k.indexOf(modelBasename) !== -1)
+                if (found)
+                    arg.value = found;
+            }
+        }
+    }
 }
 
-    if (params.lora)
+// input name -> group/key in standard prompt
-        params.lora.push(lora)
+type ComfyStdPromptMapping = Record<string, string>
-    else
+
-        params.lora = [lora]
+type ComfyStdPromptSpec = {
+    paramMapping: ComfyStdPromptMapping,
+    extraParams?: Record<string, string>,
+    converter?: ComfyPromptConverter,
 }
 
-const ALL_CONVERTERS: Record<string, ComfyPromptConverter> = {
+const ALL_SPECS: Record<string, ComfyStdPromptSpec> = {
-    LoraLoader
+    "KSampler": {
+        paramMapping: {
+            cfg: "k_sampler.cfg_scale",
+            seed: "k_sampler.seed",
+            steps: "k_sampler.steps",
+            sampler_name: "k_sampler.sampler_name",
+            scheduler: "k_sampler.scheduler",
+            denoise: "k_sampler.denoise",
+        },
+    },
+    "LoraLoader": {
+        paramMapping: {
+            lora_name: "lora.model_name",
+            strength_model: "lora.strength_unet",
+            strength_clip: "lora.strength_tenc",
+        },
+        extraParams: {
+            "lora.module_name": "LoRA",
+        },
+        converter: LoraLoader,
+    }
 }
 
 const COMMIT_HASH: string = __GIT_COMMIT_HASH__;
 
 export default class ComfyBoxStdPromptSerializer {
-    serialize(prompt: SerializedPrompt): ComfyBoxStdPrompt {
+    serialize(prompt: SerializedPromptInputsAll, workflow?: SerializedAppState): [SafeParseReturnType<any, ComfyBoxStdPrompt>, any] {
         const stdPrompt: ComfyBoxStdPrompt = {
             version: 1,
             metadata: {
@@ -33,23 +90,57 @@ export default class ComfyBoxStdPromptSerializer {
                 commit_hash: COMMIT_HASH,
                 extra_data: {
                     comfybox: {
+                        workflows: [] // TODO!!!
                     }
                 }
             },
             parameters: {}
         }
 
-        for (const [nodeID, inputs] of Object.entries(prompt.output)) {
+        for (const [nodeID, inputs] of Object.entries(prompt)) {
             const classType = inputs.class_type
-            const converter = ALL_CONVERTERS[classType]
+            const spec = ALL_SPECS[classType]
-            if (converter) {
+            if (spec) {
-                converter(stdPrompt, inputs.inputs, nodeID)
+                console.warn("SPEC", spec, inputs)
+                let targets = {}
+                for (const [comfyKey, stdPromptKey] of Object.entries(spec.paramMapping)) {
+                    const inputValue = inputs.inputs[comfyKey];
+                    if (inputValue != null && !isSerializedPromptInputLink(inputValue)) {
+                        console.warn("GET", comfyKey, inputValue)
+                        const trail = stdPromptKey.split(".");
+                        let target = null;
+
+                        console.warn(trail, trail.length - 2);
+                        for (let index = 0; index < trail.length - 1; index++) {
+                            const name = trail[index];
+                            if (index === 0) {
+                                targets[name] ||= {}
+                                target = targets[name]
                             }
                             else {
-                console.warn("No StdPrompt type converter for comfy class!", classType)
+                                target = target[name]
+                            }
+                            console.warn(index, name, target)
+                        }
+
+                        let name = trail[trail.length - 1]
+                        target[name] = inputValue
+                        console.warn(stdPrompt.parameters)
                     }
                 }
 
-        return stdPrompt
+                // TODO converter.encode
+
+                for (const [groupName, group] of Object.entries(targets)) {
+                    stdPrompt.parameters[groupName] ||= []
+                    stdPrompt.parameters[groupName].push(group)
+                }
+            }
+            else {
+                console.warn("No StdPrompt type spec for comfy class!", classType)
+            }
+        }
+
+        return [StdPrompt.safeParse(stdPrompt), stdPrompt];
     }
 }

src/lib/api.ts

@@ -101,7 +101,6 @@ export type ComfyUIPromptExtraData = {
 }
 
 type ComfyAPIEvents = {
-    // JSON
     status: (status: ComfyAPIStatusResponse | null, error?: Error | null) => void,
     progress: (progress: Progress) => void,
     reconnecting: () => void,
@@ -112,9 +111,6 @@ type ComfyAPIEvents = {
     execution_cached: (promptID: PromptID, nodes: ComfyNodeID[]) => void,
     execution_interrupted: (error: ComfyInterruptedError) => void,
     execution_error: (error: ComfyExecutionError) => void,
-
-    // Binary
-    b_preview: (imageBlob: Blob) => void
 }
 
 export default class ComfyAPI {
@@ -180,7 +176,6 @@ export default class ComfyAPI {
         this.socket = new WebSocket(
             `ws${window.location.protocol === "https:" ? "s" : ""}://${hostname}:${port}/ws${existingSession}`
         );
-        this.socket.binaryType = "arraybuffer";
 
         this.socket.addEventListener("open", () => {
             opened = true;
@@ -209,31 +204,6 @@ export default class ComfyAPI {
 
         this.socket.addEventListener("message", (event) => {
             try {
-                if (event.data instanceof ArrayBuffer) {
-                    const view = new DataView(event.data);
-                    const eventType = view.getUint32(0);
-                    const buffer = event.data.slice(4);
-                    switch (eventType) {
-                        case 1:
-                            const view2 = new DataView(event.data);
-                            const imageType = view2.getUint32(0)
-                            let imageMime: string
-                            switch (imageType) {
-                                case 1:
-                                default:
-                                    imageMime = "image/jpeg";
-                                    break;
-                                case 2:
-                                    imageMime = "image/png"
-                            }
-                            const imageBlob = new Blob([buffer.slice(4)], { type: imageMime });
-                            this.eventBus.emit("b_preview", imageBlob);
-                            break;
-                        default:
-                            throw new Error(`Unknown binary websocket message of type ${eventType}`);
-                    }
-                }
-                else {
                 const msg = JSON.parse(event.data);
                 switch (msg.type) {
                     case "status":
@@ -267,7 +237,6 @@ export default class ComfyAPI {
                     default:
                         console.warn("Unhandled message:", event.data);
                 }
-                }
             } catch (error) {
                 console.error("Error handling message", event.data, error);
             }

src/lib/components/AccordionContainer.svelte

@@ -12,7 +12,7 @@
  import {cubicIn} from 'svelte/easing';
  import { flip } from 'svelte/animate';
  import { type ContainerLayout, type WidgetLayout, type IDragItem } from "$lib/stores/layoutStates";
- import { startDrag, stopDrag, vibrateIfPossible } from "$lib/utils"
+ import { startDrag, stopDrag } from "$lib/utils"
  import { writable, type Writable } from "svelte/store";
  import { isHidden } from "$lib/widgets/utils";
 	import { handleContainerConsider, handleContainerFinalize } from "./utils";
@@ -56,7 +56,7 @@
  };
 
  function handleClick(e: CustomEvent<boolean>) {
-     vibrateIfPossible(20)
+     navigator.vibrate(20)
      $isOpen = e.detail
  }
 
@@ -104,7 +104,7 @@
                             >
                                 <WidgetContainer {layoutState} dragItem={item} zIndex={zIndex+1} {isMobile} />
                                 {#if item[SHADOW_ITEM_MARKER_PROPERTY_NAME]}
-                                    <div in:fade|global={{duration:200, easing: cubicIn}} class='drag-item-shadow'/>
+                                    <div in:fade={{duration:200, easing: cubicIn}} class='drag-item-shadow'/>
                                 {/if}
                             </div>
                         {/each}

src/lib/components/BlockContainer.svelte

@@ -102,7 +102,7 @@
                     >
                         <WidgetContainer {layoutState} dragItem={item} zIndex={zIndex+1} {isMobile} />
                         {#if item[SHADOW_ITEM_MARKER_PROPERTY_NAME]}
-                            <div in:fade|global={{duration:200, easing: cubicIn}} class='drag-item-shadow'/>
+                            <div in:fade={{duration:200, easing: cubicIn}} class='drag-item-shadow'/>
                         {/if}
                     </div>
                 {/each}

src/lib/components/ComfyApp.ts

@@ -40,6 +40,7 @@ import { deserializeTemplateFromSVG, type SerializedComfyBoxTemplate } from "$li
 import templateState from "$lib/stores/templateState";
 import { formatValidationError, type ComfyAPIPromptErrorResponse, formatExecutionError, type ComfyExecutionError } from "$lib/apiErrors";
 import systemState from "$lib/stores/systemState";
+import type { JourneyNode } from "$lib/stores/journeyStates";
 
 export const COMFYBOX_SERIAL_VERSION = 1;
 
@@ -610,6 +611,8 @@ export default class ComfyApp {
                     if (node?.onExecuted) {
                         node.onExecuted(output);
                     }
+                    workflow.journey.onExecuted(promptID, nodeID, output, queueEntry);
+                    workflow.journey.set(get(workflow.journey))
                 }
             }
         });
@@ -651,10 +654,6 @@ export default class ComfyApp {
             }
         });
 
-        this.api.addEventListener("b_preview", (imageBlob: Blob) => {
-            queueState.previewUpdated(imageBlob);
-        });
-
         const config = get(configState);
 
         if (config.pollSystemStatsInterval > 0) {
@@ -1032,6 +1031,18 @@ export default class ComfyApp {
             notify("Prompt queued.", { type: "info", showOn: "web" });
         }
 
+        let journeyNode: JourneyNode | null;
+
+        if (get(uiState).saveHistory) {
+            const activeNode = targetWorkflow.journey.getActiveNode();
+            journeyNode = targetWorkflow.journey.pushPatchOntoActive(targetWorkflow, activeNode);
+
+            // if no patch was applied, use currently selected node for prompt image
+            // output purposes
+            if (journeyNode == null)
+                journeyNode = activeNode;
+        }
+
         this.processingQueue = true;
         let workflow: ComfyBoxWorkflow;
 
@@ -1068,9 +1079,6 @@ export default class ComfyApp {
                     // console.debug(graphToGraphVis(workflow.graph))
                     // console.debug(promptToGraphVis(p))
 
-                    const stdPrompt = this.stdPromptSerializer.serialize(p);
-                    // console.warn("STD", stdPrompt);
-
                     const extraData: ComfyBoxPromptExtraData = {
                         extra_pnginfo: {
                             comfyBoxWorkflow: wf,
@@ -1104,6 +1112,9 @@ export default class ComfyApp {
                         else {
                             queueState.afterQueued(workflow.id, response.promptID, response.number, p.output, extraData)
                             workflowState.afterQueued(workflow.id, response.promptID)
+                            if (journeyNode != null) {
+                                targetWorkflow.journey.afterQueued(journeyNode, response.promptID);
+                            }
                         }
                     } catch (err) {
                         errorMes = err?.toString();

src/lib/components/ComfyBoxWorkflowsView.svelte

@@ -336,7 +336,7 @@
                         ✕
                     </button>
                     {#if workflow[SHADOW_ITEM_MARKER_PROPERTY_NAME]}
-                        <div in:fade|global={{duration:200, easing: cubicIn}} class='drag-item-shadow'/>
+                        <div in:fade={{duration:200, easing: cubicIn}} class='drag-item-shadow'/>
                     {/if}
                 </button>
             {/each}
@@ -386,9 +386,6 @@
                 <span style="display: inline-flex !important; padding: 0 0.75rem;">
                     <Checkbox label="Auto-Add UI" bind:value={$uiState.autoAddUI}/>
                 </span>
-                <span style="display: inline-flex !important; padding: 0 0.75rem;">
-                    <Checkbox label="Hide Previews" bind:value={$uiState.hidePreviews}/>
-                </span>
                 <!-- <span class="label" for="ui-edit-mode">
                      <BlockTitle>UI Edit mode</BlockTitle>
                      <select id="ui-edit-mode" name="ui-edit-mode" bind:value={$uiState.uiEditMode}>

src/lib/components/ComfyJourneyView.svelte

@@ -0,0 +1,228 @@
+<!--
+     A "journey" is like browser history for prompts, except organized in a
+     tree-like graph. It lets you save incremental changes to your workflow and
+     jump between past and present sets of parameters.
+-->
+<script context="module" lang="ts">
+ export type JourneyMode = "linear" | "tree";
+</script>
+
+<script lang="ts">
+ import type ComfyApp from './ComfyApp';
+ import type { ComfyBoxWorkflow } from '$lib/stores/workflowState';
+ import workflowState from '$lib/stores/workflowState';
+ import uiState from '$lib/stores/uiState';
+ import { resolvePatch, type JourneyPatchNode, type WritableJourneyStateStore, diffParams, type JourneyNode } from '$lib/stores/journeyStates';
+ import JourneyRenderer, { type JourneyNodeEvent } from './JourneyRenderer.svelte';
+ import { Trash, ClockHistory, Diagram3, GeoAlt } from "svelte-bootstrap-icons";
+ import { getWorkflowRestoreParamsFromWorkflow } from '$lib/restoreParameters';
+ import notify from '$lib/notify';
+ import selectionState from '$lib/stores/selectionState';
+ import { Checkbox } from '@gradio/form';
+ import modalState from '$lib/stores/modalState';
+ import queueState, { type QueueEntry } from '$lib/stores/queueState';
+ import PromptDisplay from "$lib/components/PromptDisplay.svelte"
+ import { getQueueEntryImages } from '$lib/stores/uiQueueState';
+ import { SvelteComponent } from 'svelte';
+ import { capitalize } from '$lib/utils';
+
+ export let app: ComfyApp;
+
+ let workflow: ComfyBoxWorkflow | null = null;
+ let journey: WritableJourneyStateStore | null = null;
+ let activeNode: JourneyNode | null = null;
+ let mode: JourneyMode = "linear";
+ let cyto: cytoscape.Core | null = null;
+
+ const MODES: [JourneyMode, typeof SvelteComponent][] = [
+     ["linear", ClockHistory],
+     ["tree", Diagram3],
+ ]
+
+ $: workflow = $workflowState.activeWorkflow
+ $: {
+     journey = workflow?.journey
+     activeNode = journey?.getActiveNode()
+ }
+
+ // function doAdd() {
+ //     if (!workflow) {
+ //         notify("No active workflow!", { type: "error" })
+ //         return;
+ //     }
+ //
+ //     const activeNode = journey.getActiveNode();
+ //     journey.pushPatchOntoActive(workflow, activeNode, true)
+ // }
+
+ function doClearHistory() {
+     if (!confirm("Clear history?"))
+         return;
+
+     journey.clear();
+     notify("History cleared.", { type: "info" })
+ }
+
+ function doCenter() {
+     if (cyto == null)
+         return;
+
+     const activeNode = journey.getActiveNode();
+     if (activeNode == null)
+         return;
+
+     const node = cyto.$(`#${activeNode.id}`);
+     if (node.isNode()) {
+         cyto.zoom(1.25);
+         cyto.center(node)
+     }
+ }
+
+ function onSelectNode(e: CustomEvent<JourneyNodeEvent>) {
+     const { node } = e.detail;
+
+     const id = node.id();
+     const journeyNode = $journey.nodesByID[id];
+     if (journeyNode == null) {
+         console.error("[ComfyJourneyView] Missing journey node!", id)
+         return;
+     }
+
+     console.debug("[ComfyJourneyView] Journey node", journeyNode)
+
+     const patch = resolvePatch(journeyNode);
+
+     // ensure reactive state is updated
+     workflow.applyParamsPatch(patch);
+     $workflowState = $workflowState
+ }
+
+ function onRightClickNode(e: CustomEvent<JourneyNodeEvent>) {
+     const { node } = e.detail;
+
+     const id = node.id();
+     const journeyNode = $journey.nodesByID[id];
+     if (journeyNode == null) {
+         console.error("[ComfyJourneyView] Missing journey node!", id)
+         return;
+     }
+
+     // pick first resolved prompt
+     const queueEntry: QueueEntry | null =
+         Array.from(journeyNode.promptIDs)
+              .map(id => queueState.getQueueEntry(id))
+              .find(qe => qe?.prompt != null);
+
+     if (queueEntry) {
+         modalState.pushModal({
+             title: "Prompt Details",
+             svelteComponent: PromptDisplay,
+             svelteProps: {
+                 prompt: queueEntry.prompt,
+                 workflow: queueEntry.extraData?.extra_pnginfo?.comfyBoxWorkflow,
+                 images: getQueueEntryImages(queueEntry),
+                 closeModal: () => modalState.closeAllModals(),
+                 expandAll: false,
+                 app
+             },
+         })
+     }
+     else {
+         notify("This journey entry has no prompts yet.", { type: "warning" })
+     }
+ }
+
+ function onHoverNode(e: CustomEvent<JourneyNodeEvent>) {
+     const { node } = e.detail;
+
+     const id = node.id();
+     const journeyNode = $journey.nodesByID[id];
+     if (journeyNode == null) {
+         console.error("[ComfyJourneyView] Missing journey node!", id)
+         return;
+     }
+
+     const patch = resolvePatch(journeyNode);
+     const workflowParams = getWorkflowRestoreParamsFromWorkflow(workflow);
+     const diff = diffParams(patch, workflowParams);
+
+     $selectionState.currentPatchHoveredNodes = new Set(Object.keys(diff));
+ }
+
+ function onHoverNodeOut(e: CustomEvent<JourneyNodeEvent>) {
+     $selectionState.currentPatchHoveredNodes = new Set();
+ }
+</script>
+
+<div class="journey-view">
+    <div class="top">
+        <button class="mode-button ternary"
+                title="Center Active"
+                disabled={$journey.root == null || $journey.activeNodeID == null}
+                on:click={doCenter}>
+            <GeoAlt width="100%" height="100%" />
+        </button>
+        <button class="mode-button ternary"
+                title="Clear"
+                disabled={$journey.root == null}
+                on:click={doClearHistory}>
+            <Trash width="100%" height="100%" />
+        </button>
+    </div>
+    {#key $journey.version}
+        <JourneyRenderer {workflow} {journey} {mode}
+                         bind:cyto
+                         on:select_node={onSelectNode}
+                         on:right_click_node={onRightClickNode}
+                         on:hover_node={onHoverNode}
+                         on:hover_node_out={onHoverNodeOut}
+        />
+    {/key}
+    <div class="bottom" style:border-top="1px solid var(--panel-border-color)">
+        <Checkbox label="Save History" bind:value={$uiState.saveHistory}/>
+    </div>
+    <div class="bottom">
+        {#each MODES as [theMode, icon]}
+            <!-- svelte-ignore a11y-click-events-have-key-events -->
+            <button class="mode-button ternary"
+                    disabled={mode === theMode}
+                    title={capitalize(theMode)}
+                    class:selected={mode === theMode}
+                    on:click={() => { mode = theMode; }}>
+                <svelte:component this={icon} width="100%" height="100%" />
+            </button>
+        {/each}
+    </div>
+</div>
+
+<style lang="scss">
+ $button-height: 2.5rem;
+
+ .journey-view {
+     width: 100%;
+     height: calc(100% - $button-height * 3);
+ }
+
+ .top, .bottom {
+     height: $button-height;
+     display: flex;
+     flex-direction: row;
+     color: var(--comfy-accent-soft);
+     justify-content: center;
+ }
+
+ .mode-button {
+     height: 100%;
+     width: 100%;
+     padding: 0.5rem;
+
+     @include square-button;
+
+     &:hover {
+         color: var(--body-text-color);
+     }
+     &.selected {
+         background-color: var(--panel-background-fill);
+     }
+ }
+</style>

src/lib/components/ComfyPaneView.svelte

@@ -1,5 +1,5 @@
 <script context="module" lang="ts">
- export type ComfyPaneMode = "none" | "activeWorkflow" | "graph" | "properties" | "templates" | "queue"
+ export type ComfyPaneMode = "none" | "activeWorkflow" | "graph" | "properties" | "templates" | "queue" | "journey"
 </script>
 
 <script lang="ts">
@@ -8,28 +8,30 @@
   */
  import workflowState from "$lib/stores/workflowState";
  import type ComfyApp from "./ComfyApp";
- import { Sliders2, BoxSeam, LayoutTextSidebarReverse } from "svelte-bootstrap-icons";
+ import { SvelteComponent } from "svelte";
+ import { capitalize } from "$lib/utils";
+
+ import { Sliders2, BoxSeam, LayoutTextSidebarReverse, Signpost2 } from "svelte-bootstrap-icons";
 
  import ComfyBoxWorkflowView from "./ComfyBoxWorkflowView.svelte";
  import ComfyGraphView from "./ComfyGraphView.svelte";
  import ComfyProperties from "./ComfyProperties.svelte";
  import ComfyQueue from "./ComfyQueue.svelte";
  import ComfyTemplates from "./ComfyTemplates.svelte";
- import { SvelteComponent } from "svelte";
+ import ComfyJourneyView from "./ComfyJourneyView.svelte";
-	import { capitalize } from "$lib/utils";
 
  export let app: ComfyApp
  export let mode: ComfyPaneMode = "none";
  export let showSwitcher: boolean = false;
 
- const MODES: [ComfyPaneMode, typeof SvelteComponent<any>][] = [
+ const MODES: [ComfyPaneMode, typeof SvelteComponent][] = [
      ["properties", Sliders2],
      ["templates", BoxSeam],
+     ["journey", Signpost2],
      ["queue", LayoutTextSidebarReverse]
  ]
 
  function switchMode(newMode: ComfyPaneMode) {
-     console.warn("switch", mode, newMode)
      mode = newMode;
  }
 </script>
@@ -46,8 +48,10 @@
             <ComfyTemplates {app} />
         {:else if mode === "queue"}
             <ComfyQueue {app} />
+        {:else if mode === "journey"}
+            <ComfyJourneyView {app} />
         {:else}
-            <div class="blank-panel">(Blank)</div>
+            <div class="blank-panel">(Blank: {mode})</div>
         {/if}
     </div>
     {#if showSwitcher}

src/lib/components/ComfyQueue.svelte

@@ -1,3 +1,18 @@
+<script lang="ts" context="module">
+ export type QueueUIEntryStatus = QueueEntryStatus | "pending" | "running";
+
+ export type QueueUIEntry = {
+     entry: QueueEntry,
+     message: string,
+     submessage: string,
+     date?: string,
+     status: QueueUIEntryStatus,
+     images?: string[], // URLs
+     details?: string, // shown in a tooltip on hover
+     error?: WorkflowError
+ }
+</script>
+
 <script lang="ts">
  import queueState, { type CompletedQueueEntry, type QueueEntry, type QueueEntryStatus } from "$lib/stores/queueState";
  import ProgressBar from "./ProgressBar.svelte";
@@ -5,7 +20,7 @@
  import Spinner from "./Spinner.svelte";
  import PromptDisplay from "./PromptDisplay.svelte";
  import { List, ListUl, Grid } from "svelte-bootstrap-icons";
- import { getNodeInfo, type ComfyImageLocation } from "$lib/utils"
+ import { convertComfyOutputToComfyURL, convertFilenameToComfyURL, getNodeInfo, truncateString } from "$lib/utils"
  import type { Writable } from "svelte/store";
  import type { QueueItemType } from "$lib/api";
  import { Button } from "@gradio/button";
@@ -16,7 +31,8 @@
  import ComfyQueueListDisplay from "./ComfyQueueListDisplay.svelte";
  import ComfyQueueGridDisplay from "./ComfyQueueGridDisplay.svelte";
 	import { WORKFLOWS_VIEW } from "./ComfyBoxWorkflowsView.svelte";
- import uiQueueState, { type QueueUIEntry } from "$lib/stores/uiQueueState";
+	import uiQueueState from "$lib/stores/uiQueueState";
+	import type { SerializedAppState, SerializedPromptInputsAll } from "./ComfyApp";
 
  export let app: ComfyApp;
 
@@ -109,19 +125,22 @@
 
  let showModal = false;
  let expandAll = false;
- let selectedPrompt = null;
+ let selectedPrompt: SerializedPromptInputsAll | null = null;
- let selectedImages: ComfyImageLocation[] = [];
+ let selectedWorkflow: SerializedAppState | null = null;
+ let selectedImages = [];
  function showPrompt(entry: QueueUIEntry) {
      if (entry.error != null) {
          showModal = false;
          expandAll = false;
          selectedPrompt = null;
+         selectedWorkflow = null;
          selectedImages = [];
 
          showError(entry.entry.promptID);
      }
      else {
-         selectedPrompt = entry.entry.prompt;
+         selectedPrompt = entry.entry.prompt,
+         selectedWorkflow = entry.entry.extraData.extra_pnginfo.comfyBoxWorkflow
          selectedImages = entry.images;
          showModal = true;
          expandAll = false
@@ -130,6 +149,7 @@
 
  function closeModal() {
      selectedPrompt = null
+     selectedWorkflow = null;
      selectedImages = []
      showModal = false;
      expandAll = false;
@@ -150,7 +170,7 @@
     </div>
     <svelte:fragment let:closeDialog>
         {#if selectedPrompt}
-            <PromptDisplay closeModal={() => { closeModal(); closeDialog(); }} {app} prompt={selectedPrompt} images={selectedImages} {expandAll} />
+            <PromptDisplay closeModal={() => { closeModal(); closeDialog(); }} {app} prompt={selectedPrompt} workflow={selectedWorkflow} images={selectedImages} {expandAll} />
         {/if}
     </svelte:fragment>
     <div slot="buttons" let:closeDialog>

src/lib/components/ComfyQueueGridDisplay.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
  import type { QueueItemType } from "$lib/api";
- import { convertComfyOutputToComfyURL, showLightbox } from "$lib/utils";
+ import { showLightbox } from "$lib/utils";
  import type { QueueUIEntry } from "./ComfyQueue.svelte";
  import queueState from "$lib/stores/queueState";
 
@@ -19,7 +19,7 @@
      allEntries = []
      for (const entry of entries) {
          for (const image of entry.images) {
-             allEntries.push([entry, convertComfyOutputToComfyURL(image, true)]);
+             allEntries.push([entry, image]);
          }
      }
      allImages = allEntries.map(p => p[1]);
@@ -56,7 +56,6 @@
                     <img class="grid-entry-image"
                          on:click={(e) => handleClick(e, entry, i)}
                     src={image}
-                    loading="lazy"
                     alt="thumbnail" />
                 </div>
             {/each}
@@ -131,8 +130,6 @@
  .grid-entry-image {
      aspect-ratio: 1 / 1;
      object-fit: cover;
-     width: 100%;
-     max-width: unset;
 
      &:hover {
          cursor: pointer;

src/lib/components/ComfyQueueListDisplay.svelte

@@ -1,8 +1,8 @@
 <script lang="ts">
  import type { QueueItemType } from "$lib/api";
- import { convertComfyOutputToComfyURL, showLightbox, truncateString } from "$lib/utils";
+ import { showLightbox, truncateString } from "$lib/utils";
+ import type { QueueUIEntry } from "./ComfyQueue.svelte";
  import queueState from "$lib/stores/queueState";
- import type { QueueUIEntry } from "$lib/stores/uiQueueState";
 
  export let entries: QueueUIEntry[] = [];
  export let showPrompt: (entry: QueueUIEntry) => void;
@@ -39,13 +39,11 @@
                     <div class="list-entry-images"
                          style="--cols: {Math.ceil(Math.sqrt(Math.min(entry.images.length, 4)))}" >
                         {#each entry.images.slice(0, 4) as image, i}
-                            {@const imageURL = convertComfyOutputToComfyURL(image, true)}
                             <div>
                                 <!-- svelte-ignore a11y-click-events-have-key-events -->
                                 <img class="list-entry-image"
                                      on:click={(e) => showLightbox(entry.images, i, e)}
-                                src={imageURL}
+                                src={image}
-                                loading="lazy"
                                 alt="thumbnail" />
                             </div>
                         {/each}

src/lib/components/ComfySettingsView.svelte

@@ -173,7 +173,7 @@
  }
 
  .comfy-settings-entries {
-     padding: 3rem 3rem;
+     padding: 2rem 0.75rem;
      height: 100%;
  }
 

src/lib/components/ComfyTemplates.svelte

@@ -197,7 +197,7 @@
                                 <div class="template-desc">{item.template.metadata.description}</div>
                             </div>
                             {#if item[SHADOW_ITEM_MARKER_PROPERTY_NAME]}
-                                <div in:fade|global={{duration:200, easing: cubicIn}} class='template-drag-item-shadow'/>
+                                <div in:fade={{duration:200, easing: cubicIn}} class='template-drag-item-shadow'/>
                             {/if}
                         {/each}
                     </div>

src/lib/components/JourneyRenderer.svelte

@@ -0,0 +1,259 @@
+<script context="module" lang="ts">
+ export type JourneyNodeEvent = {
+     cyto: cytoscape.Core,
+     node: cytoscape.NodeSingular
+ }
+</script>
+
+<script lang="ts">
+ import { resolvePatch, type JourneyNode, type JourneyPatchNode, type WritableJourneyStateStore } from '$lib/stores/journeyStates';
+ import { ComfyBoxWorkflow } from '$lib/stores/workflowState';
+ import { get } from 'svelte/store';
+ import Graph from './graph/Graph.svelte'
+ import type { NodeDataDefinition, EdgeDataDefinition } from 'cytoscape';
+ import { createEventDispatcher } from "svelte";
+ import selectionState from '$lib/stores/selectionState';
+ import uiQueueState, { getQueueEntryImages } from '$lib/stores/uiQueueState';
+ import queueState from '$lib/stores/queueState';
+ import { convertComfyOutputToComfyURL, countNewLines } from '$lib/utils';
+	import type { ElementDefinition } from 'cytoscape';
+	import type { JourneyMode } from './ComfyJourneyView.svelte';
+	import type { RestoreParamWorkflowNodeTargets } from '$lib/restoreParameters';
+
+ export let workflow: ComfyBoxWorkflow | null = null
+ export let journey: WritableJourneyStateStore | null = null
+ export let mode: JourneyMode = "linear";
+ export let cyto: cytoscape.Core | null = null;
+
+ const dispatch = createEventDispatcher<{
+     select_node: JourneyNodeEvent;
+     right_click_node: JourneyNodeEvent;
+     hover_node: JourneyNodeEvent;
+     hover_node_out: JourneyNodeEvent;
+ }>();
+
+ let lastMode = null;
+ let lastVersion = -1;
+
+ let nodes = []
+ let edges = []
+ $: if ($journey.version !== lastVersion || lastMode !== mode){
+     [nodes, edges] = buildGraph(journey)
+     lastVersion = $journey.version
+     lastMode = mode;
+ }
+
+ function makePatchText(patch: RestoreParamWorkflowNodeTargets): string {
+     const lines = []
+
+     let sorted = Array.from(Object.entries(patch))
+     sorted.sort((a, b) => {
+         return a[1].name > b[1].name ? 1 : -1
+     })
+
+     const MAX_ENTRIES = 5
+     const entries = sorted.slice(0, MAX_ENTRIES)
+     const leftover = sorted.length - MAX_ENTRIES
+
+     for (const [nodeID, source] of entries) {
+         let line = ""
+         switch (source.nodeType) {
+             case "ui/text":
+                 line = `${source.name}: (changed)`
+                 break;
+             default:
+                 line = `${source.name}: ${source.prevValue} → ${source.finalValue}`
+                 break;
+         }
+         lines.push(line)
+     }
+
+     if (leftover > 0) {
+         lines.push(`(+ ${leftover} more)`)
+     }
+
+     return lines.join("\n")
+ }
+
+ /*
+  * Converts the journey tree into the renderable graph format Cytoscape expects
+  */
+ function buildGraph(journey: WritableJourneyStateStore | null): [ElementDefinition[], ElementDefinition[]] {
+     if (!journey) {
+         return [[], []]
+     }
+
+     let activeNode = journey.getActiveNode()
+
+     const nodes: ElementDefinition[] = []
+     const edges: ElementDefinition[] = []
+
+     let iter: Iterable<JourneyNode> = [];
+     if (mode === "linear") {
+         if (activeNode != null)
+             iter = journey.iterateLinearPath(activeNode.id);
+     }
+     else {
+         iter = journey.iterateBreadthFirst();
+     }
+
+     const showPatches = mode === "linear";
+
+     const memoize = {}
+
+     for (const node of iter) {
+         if (node.type === "root") {
+             nodes.push({
+                 data: {
+                     id: node.id,
+                     label: "Start",
+                 },
+                 classes: "historyNode"
+             })
+             continue;
+         }
+         else {
+             const patchNode = node as JourneyPatchNode;
+             nodes.push({
+                 data: {
+                     id: patchNode.id,
+                     label: "P",
+                 },
+                 classes: "historyNode"
+             })
+
+             // Display a small node between with the patch details
+             const midNodeID = `${patchNode.id}_patch`;
+
+             console.debug("get", patchNode);
+
+             if (showPatches) {
+                 // show a node with the changes between gens
+                 const patchText = makePatchText(patchNode.patch);
+                 const patchNodeHeight = countNewLines(patchText) * 11 + 22;
+
+                 nodes.push({
+                     data: {
+                         id: midNodeID,
+                         label: patchText,
+                         patchNodeHeight
+                     },
+                     selectable: false,
+                     classes: "patchNode"
+                 })
+
+                 edges.push({
+                     data: {
+                         id: `${patchNode.parent.id}_${midNodeID}`,
+                         source: patchNode.parent.id,
+                         target: midNodeID,
+                     },
+                     selectable: false,
+                 })
+
+                 edges.push({
+                     data: {
+                         id: `${midNodeID}_${patchNode.id}`,
+                         source: midNodeID,
+                         target: patchNode.id,
+                     },
+                     selectable: false,
+                     locked: true
+                 })
+             }
+             else {
+                 edges.push({
+                     data: {
+                         id: `${patchNode.parent.id}_${patchNode.id}`,
+                         source: patchNode.parent.id,
+                         target: patchNode.id,
+                     },
+                     selectable: false,
+                     locked: true
+                 })
+             }
+         }
+     }
+
+     return [nodes, edges]
+ }
+
+ function onNodeSelected(e: cytoscape.InputEventObject) {
+     console.warn("[JourneyNode] onNodeSelected", e)
+     const node = e.target as cytoscape.NodeSingular;
+
+     journey.selectNode(node.id());
+
+     e.cy.animate({
+         center: { eles: node }
+     }, {
+         duration: 400,
+         easing: "ease-in-out-quad"
+     });
+
+     e.cy.center(node)
+
+     dispatch("select_node", { cyto: e.cy, node })
+ }
+
+ function onNodeRightClicked(e: cytoscape.InputEventObject) {
+     const node = e.target as cytoscape.NodeSingular;
+     dispatch("right_click_node", { cyto: e.cy, node })
+ }
+
+ function onNodeHovered(e: cytoscape.InputEventObject) {
+     const node = e.target as cytoscape.NodeSingular;
+     dispatch("hover_node", { cyto: e.cy, node })
+ }
+
+ function onNodeHoveredOut(e: cytoscape.InputEventObject) {
+     const node = e.target as cytoscape.NodeSingular;
+     dispatch("hover_node_out", { cyto: e.cy, node })
+ }
+
+ function onRebuilt(e: CustomEvent<{cyto: cytoscape.Core}>) {
+     const { cyto } = e.detail;
+
+     const activeNode = journey.getActiveNode();
+
+     for (const node of cyto.nodes(".historyNode").components()) {
+         const nodeID = node.id()
+         if (nodeID === activeNode?.id) {
+             node.select();
+             cyto.zoom(1.25);
+             cyto.center(node)
+         }
+
+         const journeyNode = $journey.nodesByID[nodeID]
+         if (journeyNode) {
+             if (journeyNode.promptIDs) {
+                 const queueEntry = Array.from(journeyNode.promptIDs).map(id => queueState.getQueueEntry(id)).find(Boolean);
+                 if (queueEntry) {
+                     const outputs = getQueueEntryImages(queueEntry);
+
+                     if (outputs) {
+                         node.data("bgImage", outputs[0]);
+                     }
+                 }
+             }
+         }
+     }
+
+     $selectionState.currentPatchHoveredNodes = new Set()
+
+     cyto.nodes().lock()
+
+     cyto.nodes(".historyNode")
+         .on("select", onNodeSelected)
+         .on("cxttapend ", onNodeRightClicked)
+         .on("mouseout", onNodeHoveredOut)
+         .on("mouseover", onNodeHovered)
+ }
+</script>
+
+{#if workflow && journey}
+    <Graph {nodes} {edges} bind:cyInstance={cyto}
+           style="background: var(--neutral-900)"
+           on:rebuilt={onRebuilt}
+    />
+{/if}

src/lib/components/Modal.svelte

@@ -37,8 +37,11 @@
     on:close={close}
     on:cancel={doClose}
     on:click|self={close}
+    on:contextmenu|preventDefault|stopPropagation
+>
+    <div on:click|stopPropagation
+         on:contextmenu|stopPropagation
     >
-    <div on:click|stopPropagation>
         <slot name="header" />
         <slot {closeDialog} />
         <div class="button-row">

src/lib/components/PromptDisplay.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
  import { TextBox } from "@gradio/form";
- import type { SerializedPromptInput, SerializedPromptInputsAll } from "./ComfyApp";
+ import type { SerializedAppState, SerializedPrompt, SerializedPromptInput, SerializedPromptInputsAll } from "./ComfyApp";
  import { Block, BlockLabel, BlockTitle } from "@gradio/atoms";
  import { JSON as JSONComponent } from "@gradio/json";
  import { JSON as JSONIcon, Copy, Check } from "@gradio/icons";
@@ -8,21 +8,62 @@
  import Gallery from "$lib/components/gradio/gallery/Gallery.svelte";
  import { ImageViewer } from "$lib/ImageViewer";
  import type { Styles } from "@gradio/utils";
- import { comfyFileToComfyBoxMetadata, comfyURLToComfyFile, countNewLines, type ComfyImageLocation, convertComfyOutputToComfyURL } from "$lib/utils";
+ import { comfyFileToComfyBoxMetadata, comfyURLToComfyFile, countNewLines, isMultiline } from "$lib/utils";
  import ReceiveOutputTargets from "./modal/ReceiveOutputTargets.svelte";
+ import RestoreParamsTable from "./modal/RestoreParamsTable.svelte";
  import workflowState, { type ComfyBoxWorkflow, type WorkflowReceiveOutputTargets } from "$lib/stores/workflowState";
  import type { ComfyReceiveOutputNode } from "$lib/nodes/actions";
  import type ComfyApp from "./ComfyApp";
+ import { TabItem, Tabs } from "@gradio/tabs";
+ import { type ComfyBoxStdPrompt } from "$lib/ComfyBoxStdPrompt";
+ import ComfyBoxStdPromptSerializer from "$lib/ComfyBoxStdPromptSerializer";
+ import JsonView from "./JsonView.svelte";
+ import type { ZodError } from "zod";
+ import { concatRestoreParams, getWorkflowRestoreParams, getWorkflowRestoreParamsUsingLayout, type RestoreParamTargets, type RestoreParamWorkflowNodeTargets } from "$lib/restoreParameters";
+	import notify from "$lib/notify";
 
  const splitLength = 50;
 
  export let prompt: SerializedPromptInputsAll;
- export let images: ComfyImageLocation[] = [];
+ export let workflow: SerializedAppState | null;
+ export let restoreParams: RestoreParamTargets = {}
+ export let images: string[] = []; // list of image URLs to ComfyUI's /view? endpoint
  export let isMobile: boolean = false;
  export let expandAll: boolean = false;
  export let closeModal: () => void;
  export let app: ComfyApp;
 
+ let stdPrompt: ComfyBoxStdPrompt | null;
+ let stdPromptError: ZodError<any> | null;
+
+ $: {
+     restoreParams = {}
+
+     // TODO exclude from both history and journey patch
+     const noExclude = true;
+
+     // TODO other sources than serialized workflow
+     if (workflow != null) {
+         const workflowParams = getWorkflowRestoreParamsUsingLayout(workflow.workflow, workflow.layout, noExclude)
+         console.error("GETPARMS", workflowParams)
+         restoreParams = concatRestoreParams(restoreParams, workflowParams);
+     }
+
+     const [result, orig] = new ComfyBoxStdPromptSerializer().serialize(prompt, workflow);
+     if (result.success === true) {
+         stdPrompt = result.data;
+         stdPromptError = null;
+     }
+     else {
+         stdPrompt = orig;
+         stdPromptError = result.error;
+     }
+ }
+
+ type PromptDisplayTabID = "restore-parameters" | "send-outputs" | "standard-prompt" | "prompt"
+
+ let selectedTab: PromptDisplayTabID = "restore-parameters"
+
  let selected_image: number | null = null;
 
  let galleryStyle: Styles = {
@@ -36,7 +77,10 @@
  let litegraphType = "(none)"
 
  $: if (images.length > 0) {
-     comfyBoxImages = images.map(comfyFileToComfyBoxMetadata);
+     // since the image links come from gradio, have to parse the URL for the
+     // ComfyImageLocation params
+     comfyBoxImages = images.map(comfyURLToComfyFile)
+                            .map(comfyFileToComfyBoxMetadata);
  }
  else {
      comfyBoxImages = []
@@ -61,10 +105,6 @@
          && typeof input[1] === "number"
  }
 
- function isMultiline(input: any): boolean {
-     return typeof input === "string" && (input.length > splitLength || countNewLines(input) > 1);
- }
-
  function formatInput(input: any): string {
      if (typeof input === "string")
          return input
@@ -120,12 +160,81 @@
 
      closeModal();
  }
+
+ function doRestoreParams(e: CustomEvent) {
+     const activeWorkflow = workflowState.getActiveWorkflow();
+     if (activeWorkflow == null) {
+         notify("No active workflow!", { type: "error" })
+     }
+
+     // TODO other param sources
+     const patch: RestoreParamWorkflowNodeTargets = {};
+
+     for (const [nodeID, sources] of Object.entries(restoreParams)) {
+         for (const source of sources) {
+             if (source.type === "workflow") {
+                 patch[nodeID] = source;
+             }
+         }
+     }
+
+     activeWorkflow.applyParamsPatch(patch);
+     closeModal();
+ }
 </script>
 
 <div class="prompt-display">
     <div class="prompt-and-sends">
+        <Tabs bind:selected={selectedTab}>
+            <TabItem id="restore-parameters" name="Restore Parameters">
+                <RestoreParamsTable {restoreParams} on:restore={doRestoreParams} />
+            </TabItem>
+            {#if comfyBoxImages.length > 0}
+                <TabItem id="send-outputs" name="Send Outputs">
+                    <Block>
+                        <BlockTitle>Output type: {litegraphType}</BlockTitle>
+                        {#if receiveTargets.length > 0}
+                            <ReceiveOutputTargets {receiveTargets} on:select={(e) => sendOutput(e.detail.workflow, e.detail.targetNode)} />
+                        {:else}
+                                <div class="outputs-message">No receive output targets found across all workflows.</div>
+                        {/if}
+                    </Block>
+                </TabItem>
+            {/if}
+            <TabItem id="standard-prompt" name="Standard Prompt">
+                {#if stdPromptError}
+                    <Block>
+                        <BlockTitle><div style:color="#F88">Parsing Error</div></BlockTitle>
+                        <div class="scroll-container">
+                            <div class="json">
+                                <JsonView json={stdPromptError} />
+                            </div>
+                        </div>
+                    </Block>
+                    <Block>
+                        <BlockTitle><div>Original Data</div></BlockTitle>
+                        <div class="scroll-container">
+                            <div class="json">
+                                <JsonView json={stdPrompt} />
+                            </div>
+                        </div>
+                    </Block>
+                {:else if stdPrompt}
+                    <Block>
+                        <div class="scroll-container">
+                            <div class="json">
+                                <JsonView json={stdPrompt} />
+                            </div>
+                        </div>
+                    </Block>
+                {:else}
+                    <Block>
+                        (No standard prompt)
+                    </Block>
+                {/if}
+            </TabItem>
+            <TabItem id="prompt" name="Prompt">
                 <Block>
-            <Accordion label="Prompt" open={expandAll || comfyBoxImages.length === 0}>
                     <div class="scroll-container">
                         <Block>
                             {#each Object.entries(prompt) as [nodeID, inputs], i}
@@ -175,28 +284,15 @@
                             {/each}
                         </Block>
                     </div>
-            </Accordion>
                 </Block>
-        {#if comfyBoxImages.length > 0}
+            </TabItem>
-            <Block>
+        </Tabs>
-                <Accordion label="Send Outputs To..." open={true}>
-                    <Block>
-                        <BlockTitle>Output type: {litegraphType}</BlockTitle>
-                        {#if receiveTargets.length > 0}
-                            <ReceiveOutputTargets {receiveTargets} on:select={(e) => sendOutput(e.detail.workflow, e.detail.targetNode)} />
-                        {:else}
-                                <div class="outputs-message">No receive output targets found across all workflows.</div>
-                        {/if}
-                    </Block>
-                </Accordion>
-            </Block>
-        {/if}
     </div>
     {#if images.length > 0}
         <div class="image-container">
             <Block>
                 <Gallery
-                    value={images.map(convertComfyOutputToComfyURL)}
+                    value={images}
                     label=""
                     show_label={false}
                     style={galleryStyle}
@@ -218,23 +314,36 @@
 
      display: flex;
      flex-wrap: nowrap;
-     overflow-y: auto;
 
      flex-direction: column;
-     @media (min-width: 1600px) {
+     @media (min-width: 1200px) {
          flex-direction: row;
      }
  }
 
- .prompt-and-sends {
-     width: 50%;
-
  .scroll-container {
      position: relative;
      /* overflow-y: auto; */
      flex: 1 1 0%;
  }
 
+ .json {
+     @include json-view;
+ }
+
+ .prompt-and-sends {
+     width: 50%;
+
+     overflow-y: auto;
+
+     :global(>.tabs) {
+         height: 100%;
+
+         :global(>.tabitem) {
+             overflow-y: auto;
+         }
+     }
+
      .copy-button {
          display: flex;
          position: absolute;

src/lib/components/TabsContainer.svelte

@@ -12,7 +12,7 @@
  import {cubicIn} from 'svelte/easing';
  import { flip } from 'svelte/animate';
  import { type ContainerLayout, type WidgetLayout, type IDragItem, type WritableLayoutStateStore } from "$lib/stores/layoutStates";
- import { startDrag, stopDrag, vibrateIfPossible } from "$lib/utils"
+ import { startDrag, stopDrag } from "$lib/utils"
  import type { Writable } from "svelte/store";
  import { isHidden } from "$lib/widgets/utils";
 	import { handleContainerConsider, handleContainerFinalize } from "./utils";
@@ -62,7 +62,7 @@
  }
 
  function handleSelect() {
-     vibrateIfPossible(20)
+     navigator.vibrate(20)
  }
 
  function _startDrag(e: MouseEvent | TouchEvent) {
@@ -112,7 +112,7 @@
                                 </label>
                                 <WidgetContainer {layoutState} dragItem={item} zIndex={zIndex+1} {isMobile} />
                                 {#if item[SHADOW_ITEM_MARKER_PROPERTY_NAME]}
-                                    <div in:fade|global={{duration:200, easing: cubicIn}} class='drag-item-shadow'/>
+                                    <div in:fade={{duration:200, easing: cubicIn}} class='drag-item-shadow'/>
                                 {/if}
                             </Block>
                         </div>

src/lib/components/WidgetContainer.svelte

@@ -70,20 +70,17 @@
 
 
 {#if container}
-    {#key $attrsChanged}
     <Container {layoutState} {container} {classes} {zIndex} {showHandles} {isMobile} />
-    {/key}
 {:else if widget && widget.node}
     {@const edit = $uiState.uiUnlocked && $uiState.uiEditMode === "widgets"}
     {@const hidden = isHidden(widget)}
     {@const hovered = $uiState.uiUnlocked && $selectionState.currentHovered.has(widget.id)}
     {@const selected = $uiState.uiUnlocked && $selectionState.currentSelection.includes(widget.id)}
-    {#key $attrsChanged}
-        {#key $propsChanged}
     <div class="widget {widget.attrs.classes} {getWidgetClass()}"
          class:edit={edit}
          class:hovered
          class:selected
+         class:patch-affected={$selectionState.currentPatchHoveredNodes.has(widget.node.id)}
          class:is-executing={$queueState.runningNodeID && $queueState.runningNodeID == widget.node.id}
          class:hidden={hidden}
     >
@@ -101,8 +98,6 @@
              on:mouseup={_stopDrag}
              on:touchend={_stopDrag}/>
     {/if}
-        {/key}
-    {/key}
 {/if}
 
 <style lang="scss">
@@ -112,6 +107,10 @@
      &.selected {
          background: var(--comfy-widget-selected-background-fill);
      }
+
+     &.patch-affected {
+         background: var(--secondary-500);
+     }
  }
 
  .is-executing {

src/lib/components/graph/Graph.svelte

@@ -0,0 +1,91 @@
+<script context="module" lang="ts">
+ export const GRAPH_STATE = {};
+
+ export type GraphContext = {
+     getCyInstance: () => cytoscape.Core
+ }
+</script>
+
+<script lang="ts">
+ import cytoscape from "cytoscape"
+ import dagre from "cytoscape-dagre"
+ import GraphStyles from "./GraphStyles"
+ import type { ElementDefinition } from "cytoscape";
+ import { createEventDispatcher } from "svelte";
+
+ export let nodes: ReadonlyArray<ElementDefinition>;
+ export let edges: ReadonlyArray<ElementDefinition>;
+
+ export let style: string = ""
+
+ let refElement = null
+ export let cyInstance: cytoscape.Core | null = null
+
+ const dispatch = createEventDispatcher<{
+     rebuilt: { cyto: cytoscape.Core };
+ }>();
+
+ $: if (nodes != null && edges != null && refElement != null) {
+     rebuildGraph()
+ }
+ else {
+     cyInstance = null;
+ }
+
+ function rebuildGraph() {
+     cytoscape.use(dagre)
+     cytoscape.warnings(false)
+
+     cyInstance = cytoscape({
+         container: refElement,
+         style: GraphStyles,
+         wheelSensitivity: 0.1,
+         maxZoom: 3,
+         minZoom: 0.5,
+         selectionType: "single"
+     })
+
+     cyInstance.on("add", () => {
+         cyInstance
+             .makeLayout({
+                 name: "dagre",
+                 rankDir: "TB",
+                 nodeSep: 150
+             })
+             .run()
+     })
+
+     // Prevents the unselection of nodes when clicking on the background
+     cyInstance.on('click', (event) => {
+         if (event.target === cyInstance) {
+             // click on the background
+             cyInstance.nodes(".historyNode").unselectify();
+         } else {
+             cyInstance.nodes(".historyNode").selectify();
+         }
+     });
+
+     for (const node of nodes) {
+         node.group = "nodes"
+         cyInstance.add(node)
+     }
+
+     for (const edge of edges) {
+         edge.group = "edges";
+         console.warn(edge)
+         cyInstance.add(edge)
+     }
+
+     dispatch("rebuilt", { cyto: cyInstance })
+ }
+</script>
+
+<div class="cy-graph" {style} bind:this={refElement} />
+
+<style lang="scss">
+ .cy-graph {
+     background: white;
+     width: 100%;
+     height: 100%;
+ }
+</style>

src/lib/components/graph/GraphEdge.svelte

@@ -0,0 +1,15 @@
+<script lang="ts">
+ import { onMount, getContext } from 'svelte'
+ import { GRAPH_STATE, type GraphContext } from './Graph.svelte';
+ import type { EdgeDataDefinition } from 'cytoscape';
+
+ export let edge: EdgeDataDefinition
+
+ const { getCyInstance } = getContext(GRAPH_STATE) as GraphContext;
+ const cyInstance = getCyInstance()
+
+ cyInstance.add({
+     group: 'edges',
+     data: { ...edge }
+ })
+</script>

src/lib/components/graph/GraphNode.svelte

@@ -0,0 +1,15 @@
+<script lang="ts">
+ import { onMount, getContext } from 'svelte'
+ import { GRAPH_STATE, type GraphContext } from './Graph.svelte';
+ import type { NodeDataDefinition } from 'cytoscape';
+
+ export let node: NodeDataDefinition
+
+ const { getCyInstance } = getContext(GRAPH_STATE) as GraphContext
+ const cyInstance = getCyInstance()
+
+ cyInstance.add({
+     group: 'nodes',
+     data: { ...node }
+ })
+</script>

src/lib/components/graph/GraphStyles.ts

@@ -0,0 +1,107 @@
+import type { Stylesheet } from "cytoscape";
+
+const styles: Stylesheet[] = [
+    {
+        selector: "core",
+        style: {
+            "selection-box-color": "#ddd",
+            "selection-box-opacity": 0.65,
+            "selection-box-border-color": "#aaa",
+            "selection-box-border-width": 1,
+            "active-bg-color": "#4b5563",
+            "active-bg-opacity": 0.35,
+            "active-bg-size": 30,
+            "outside-texture-bg-color": "#000",
+            "outside-texture-bg-opacity": 0.125,
+        }
+    },
+    {
+        selector: ".historyNode",
+        style: {
+            "width": "100",
+            "height": "100",
+            "shape": "round-rectangle",
+            "font-family": "Arial",
+            "font-size": "18",
+            "font-weight": "normal",
+            "content": `data(label)`,
+            "text-valign": "center",
+            "text-wrap": "wrap",
+            "text-max-width": "140",
+            "background-color": "#60a5fa",
+            "border-color": "#2563eb",
+            "border-width": "3",
+            "color": "#1d3660"
+        }
+    },
+    {
+        selector: "node.historyNode[bgImage]",
+        style: {
+            "label": "",
+            "background-image": "data(bgImage)",
+            "background-image-containment": "over",
+            "background-fit": "cover",
+            "color": "transparent"
+        }
+    },
+    {
+        selector: ".historyNode:selected",
+        style: {
+            "background-color": "#f97316",
+            "color": "white",
+            "border-color": "#ea580c",
+            "line-color": "#0e76ba",
+            "target-arrow-color": "#0e76ba",
+        }
+    },
+    {
+        selector: ".patchNode",
+        style: {
+            "width": "label",
+            "height": "label",
+            "shape": "round-rectangle",
+            "padding": "20",
+            "font-family": "Arial",
+            "font-size": "11",
+            "font-weight": "normal",
+            "content": `data(label)`,
+            "text-valign": "center",
+            "text-wrap": "wrap",
+            "text-max-width": "140",
+            "line-height": "1.5",
+            "background-color": "#374151",
+            "border-color": "#1f2937",
+            "border-width": "1",
+            "color": "white",
+        }
+    },
+    {
+        selector: "edge",
+        style: {
+            "curve-style": "bezier",
+            "color": "darkred",
+            "text-background-color": "#ffffff",
+            "text-background-opacity": 1,
+            "text-background-padding": "3",
+            "width": 3,
+            "target-arrow-shape": "triangle",
+            "line-color": "#1d4ed8",
+            "target-arrow-color": "#1d4ed8",
+            "font-weight": "bold"
+        }
+    },
+    {
+        selector: "edge[label]",
+        style: {
+            "content": `data(label)`,
+        }
+    },
+    {
+        selector: "edge.label",
+        style: {
+            "line-color": "orange",
+            "target-arrow-color": "orange"
+        }
+    }
+]
+export default styles;

src/lib/components/modal/RestoreParamsTable.svelte

@@ -0,0 +1,140 @@
+<script lang="ts">
+ import type { ComfyReceiveOutputNode } from "$lib/nodes/actions";
+ import type { ComfyWidgetNode } from "$lib/nodes/widgets";
+ import type { RestoreParamSource, RestoreParamTargets } from "$lib/restoreParameters";
+ import { isComfyWidgetNode, type WidgetLayout } from "$lib/stores/layoutStates";
+ import type { ComfyBoxWorkflow, WorkflowReceiveOutputTargets } from "$lib/stores/workflowState";
+ import workflowState from "$lib/stores/workflowState";
+ import { Block, BlockTitle } from "@gradio/atoms";
+ import { Button } from "@gradio/button";
+ import { createEventDispatcher } from "svelte";
+ import deepEqual from "deep-equal";
+ import { capitalize, countNewLines, isMultiline } from "$lib/utils";
+ import { TextBox } from "@gradio/form";
+
+ type UIRestoreParam = {
+     node: ComfyWidgetNode,
+     widget: WidgetLayout,
+     sources: RestoreParamSource[]
+ }
+
+ const dispatch = createEventDispatcher<{
+     restore: {};
+ }>();
+
+ export let restoreParams: RestoreParamTargets = {};
+ let uiRestoreParams: UIRestoreParam[] = []
+
+ $: uiRestoreParams = buildForUI(restoreParams);
+
+ function buildForUI(restoreParams: RestoreParamTargets): UIRestoreParam[] {
+     const result = []
+
+     for (const [nodeID, sources] of Object.entries(restoreParams)) {
+         const node = workflow.graph.getNodeByIdRecursive(nodeID);
+         if (node == null || !isComfyWidgetNode(node))
+             continue;
+
+         const nodeValue = node.getValue();
+         const foundSources = sources.filter(s => !deepEqual(nodeValue, s.finalValue));
+         if (foundSources.length === 0)
+             continue;
+
+         const widget = node.dragItem;
+         if (widget == null) {
+             console.error("[RestoreParamsTable] Node missing layoutState widget!!!", node)
+         }
+
+         result.push({ node, widget, sources: foundSources })
+     }
+
+     console.warn("RESTORE PARAMS", restoreParams, "->", result)
+
+     return result
+ }
+
+ let workflow: ComfyBoxWorkflow;
+ $: workflow = workflowState.getActiveWorkflow();
+
+ function doRestore(e: MouseEvent) {
+     dispatch("restore", {})
+ }
+</script>
+
+<div class="scroll-container">
+    {#if workflow == null}
+        <div>No workflow is active.</div>
+    {:else if Object.keys(uiRestoreParams).length === 0}
+        <div>
+            <p>No parameters to restore found in this workflow.</p>
+            <p>(Either prompt is unchanged from active workflow, or the workflow the parameters were saved from was different)</p>
+        </div>
+    {:else}
+        <Block>
+            <BlockTitle>Parameters</BlockTitle>
+            <Block>
+                <Button variant="primary" on:click={doRestore}>
+                    Restore
+                </Button>
+            </Block>
+            {#each uiRestoreParams as { node, widget, sources }}
+                <Block>
+                    <div class="target-name">➤ {widget.attrs.title || node.title}</div>
+                    {#each sources as source}
+                        {@const value = String(source.finalValue)}
+                        <div class="target">
+                            <div class="target-name-and-desc">
+                                <Block>
+                                    <BlockTitle>{capitalize(source.type)}</BlockTitle>
+                                    <div>
+                                        {#if isMultiline(value, 20)}
+                                            {@const lines = Math.max(countNewLines(value), value.length / 20)}
+                                            <TextBox show_label={false} label={''} {value} {lines} max_lines={lines} />
+                                        {:else}
+                                            <TextBox show_label={false} label={''} {value} lines={1} max_lines={1} />
+                                        {/if}
+                                    </div>
+                                </Block>
+                            </div>
+                        </div>
+                    {/each}
+                </Block>
+            {/each}
+        </Block>
+    {/if}
+</div>
+
+<style lang="scss">
+ .scroll-container {
+     overflow: auto;
+     position: relative;
+     flex: 1 1 0%;
+     height: 100%;
+
+     > :global(.block) {
+         background: var(--panel-background-fill);
+     }
+ }
+
+ .target-name {
+     padding-bottom: 0.5rem;
+ }
+
+ .target {
+
+     .target-name-and-desc {
+         :global(.block) {
+             background: var(--panel-background-fill);
+         }
+
+         .target-desc {
+             opacity: 65%;
+             font-size: 11pt;
+         }
+     }
+
+     pre {
+         @include json-view;
+     }
+ }
+</style>

src/lib/nodes/ComfyGraphNode.ts

@@ -118,7 +118,7 @@ export default class ComfyGraphNode extends LGraphNode {
     }
 
     get dragItem(): WidgetLayout | null {
-        return layoutStates.getDragItemByNode(this);
+        return layoutStates.getDragItemByNode(this) as WidgetLayout;
     }
 
     get workflow(): ComfyBoxWorkflow | null {

src/lib/nodes/actions/ComfySetNodeModeAdvancedAction.ts

@@ -73,10 +73,10 @@ export default class ComfySetNodeModeAdvancedAction extends ComfyGraphNode {
 
                 if (hasTag) {
                     let newMode: NodeMode;
-                    if (action.enable) {
+                    if (enable && action.enable) {
-                        newMode = enable ? NodeMode.ALWAYS : NodeMode.NEVER;
+                        newMode = NodeMode.ALWAYS;
                     } else {
-                        newMode = enable ? NodeMode.NEVER : NodeMode.ALWAYS;
+                        newMode = NodeMode.NEVER;
                     }
                     nodeChanges[node.id] = newMode
                 }
@@ -88,12 +88,7 @@ export default class ComfySetNodeModeAdvancedAction extends ComfyGraphNode {
                 const container = entry.dragItem;
                 const hasTag = container.attrs.tags.indexOf(action.tag) != -1;
                 if (hasTag) {
-                    let hidden: boolean;
+                    const hidden = !(enable && action.enable)
-                    if (action.enable) {
-                        hidden = !enable
-                    } else {
-                        hidden = enable;
-                    }
                     widgetChanges[container.id] = hidden
                 }
             }

src/lib/nodes/widgets/ComfyButtonNode.ts

@@ -11,6 +11,7 @@ export default class ComfyButtonNode extends ComfyWidgetNode<boolean> {
     override properties: ComfyButtonProperties = {
         tags: [],
         defaultValue: false,
+        excludeFromJourney: true,
         param: "bang"
     }
 

src/lib/nodes/widgets/ComfyCheckboxNode.ts

@@ -11,6 +11,7 @@ export default class ComfyCheckboxNode extends ComfyWidgetNode<boolean> {
     override properties: ComfyCheckboxProperties = {
         tags: [],
         defaultValue: false,
+        excludeFromJourney: false,
     }
 
     static slotLayout: SlotLayout = {

src/lib/nodes/widgets/ComfyComboNode.ts

@@ -19,7 +19,8 @@ export default class ComfyComboNode extends ComfyWidgetNode<string> {
         tags: [],
         defaultValue: "A",
         values: ["A", "B", "C", "D"],
-        convertValueToLabelCode: ""
+        convertValueToLabelCode: "",
+        excludeFromJourney: false,
     }
 
     static slotLayout: SlotLayout = {
@@ -170,6 +171,7 @@ export default class ComfyComboNode extends ComfyWidgetNode<string> {
         super.stripUserState(o);
         o.properties.values = []
         o.properties.defaultValue = null;
+        (o as any).comfyValue = null
     }
 }
 

src/lib/nodes/widgets/ComfyGalleryNode.ts

@@ -9,8 +9,7 @@ import ComfyWidgetNode from "./ComfyWidgetNode";
 export interface ComfyGalleryProperties extends ComfyWidgetProperties {
     index: number | null,
     updateMode: "replace" | "append",
-    autoSelectOnUpdate: boolean,
+    autoSelectOnUpdate: boolean
-    showPreviews: boolean
 }
 
 export default class ComfyGalleryNode extends ComfyWidgetNode<ComfyBoxImageMetadata[]> {
@@ -20,7 +19,7 @@ export default class ComfyGalleryNode extends ComfyWidgetNode<ComfyBoxImageMetad
         index: 0,
         updateMode: "replace",
         autoSelectOnUpdate: true,
-        showPreviews: true
+        excludeFromJourney: true,
     }
 
     static slotLayout: SlotLayout = {
@@ -132,8 +131,6 @@ export default class ComfyGalleryNode extends ComfyWidgetNode<ComfyBoxImageMetad
 
         const meta = parseWhateverIntoImageMetadata(param) || [];
 
-        console.debug("[ComfyGalleryNode] Received output!", param)
-
         if (updateMode === "append") {
             const currentValue = get(this.value)
             if (meta.length > 0 && (selectedIndex != null || this.properties.autoSelectOnUpdate)) {

src/lib/nodes/widgets/ComfyImageUploadNode.ts

@@ -6,7 +6,6 @@ import ImageUploadWidget from "$lib/widgets/ImageUploadWidget.svelte";
 import type { ComfyWidgetProperties } from "./ComfyWidgetNode";
 import ComfyWidgetNode from "./ComfyWidgetNode";
 import { get, writable, type Writable } from "svelte/store";
-import { type LineGroup } from "$lib/components/MaskCanvas.svelte"
 
 export interface ComfyImageUploadNodeProperties extends ComfyWidgetProperties {
     maskCount: number
@@ -16,7 +15,8 @@ export default class ComfyImageUploadNode extends ComfyWidgetNode<ComfyBoxImageM
     properties: ComfyImageUploadNodeProperties = {
         defaultValue: [],
         tags: [],
-        maskCount: 0
+        maskCount: 0,
+        excludeFromJourney: true,
     }
 
     static slotLayout: SlotLayout = {

src/lib/nodes/widgets/ComfyMarkdownNode.ts

@@ -10,6 +10,7 @@ export default class ComfyMarkdownNode extends ComfyWidgetNode<string> {
     override properties: ComfyMarkdownProperties = {
         tags: [],
         defaultValue: false,
+        excludeFromJourney: true,
     }
 
     static slotLayout: SlotLayout = {

src/lib/nodes/widgets/ComfyMultiRegionNode.ts

@@ -30,7 +30,8 @@ export default class ComfyMultiRegionNode extends ComfyWidgetNode<BoundingBox[]>
         canvasWidth: 512,
         canvasHeight: 512,
         canvasImageURL: null,
-        inputType: "size"
+        inputType: "size",
+        excludeFromJourney: false,
     }
 
     static slotLayout: SlotLayout = {

src/lib/nodes/widgets/ComfyNumberNode.ts

@@ -20,7 +20,8 @@ export default class ComfyNumberNode extends ComfyWidgetNode<number> {
         min: 0,
         max: 10,
         step: 1,
-        precision: 1
+        precision: 1,
+        excludeFromJourney: false,
     }
 
     override svelteComponentType = NumberWidget

src/lib/nodes/widgets/ComfyRadioNode.ts

@@ -16,6 +16,7 @@ export default class ComfyRadioNode extends ComfyWidgetNode<string> {
         tags: [],
         choices: ["Choice A", "Choice B", "Choice C"],
         defaultValue: "Choice A",
+        excludeFromJourney: false,
     }
 
     static slotLayout: SlotLayout = {

src/lib/nodes/widgets/ComfyTextNode.ts

@@ -16,6 +16,7 @@ export default class ComfyTextNode extends ComfyWidgetNode<string> {
         multiline: false,
         lines: 5,
         maxLines: 5,
+        excludeFromJourney: false,
     }
 
     static slotLayout: SlotLayout = {

src/lib/nodes/widgets/ComfyWidgetNode.ts

@@ -37,7 +37,8 @@ export type SerializedComfyWidgetNode = {
  */
 
 export interface ComfyWidgetProperties extends ComfyGraphNodeProperties {
-    defaultValue: any
+    defaultValue: any,
+    excludeFromJourney: boolean
 }
 
 export type ShownOutputProperty = {
@@ -357,4 +358,9 @@ export default abstract class ComfyWidgetNode<T = any> extends ComfyGraphNode {
         this.value.set(value);
         this.shownOutputProperties = (o as any).shownOutputProperties;
     }
+
+    override stripUserState(o: SerializedLGraphNode) {
+        super.stripUserState(o);
+        (o as any).comfyValue = LiteGraph.cloneObject(this.properties.defaultValue);
+    }
 }

src/lib/restoreParameters.ts

@@ -0,0 +1,362 @@
+import type { INodeInputSlot, NodeID, SerializedLGraph, SerializedLGraphNode } from "@litegraph-ts/core";
+import type { SerializedPrompt } from "./components/ComfyApp";
+import type { ComfyWidgetNode } from "./nodes/widgets";
+import type { SerializedComfyWidgetNode } from "./nodes/widgets/ComfyWidgetNode";
+import { isComfyWidgetNode, type SerializedLayoutState } from "./stores/layoutStates";
+import type { ComfyBoxWorkflow } from "./stores/workflowState";
+import { isSerializedPromptInputLink } from "./utils";
+import ComfyBoxStdPromptSerializer from "./ComfyBoxStdPromptSerializer";
+
+export type RestoreParamType = "workflow" | "backend" | "stdPrompt";
+
+/*
+ * Data of a parameter that can be restored. Paired with a parameter name.
+ */
+export interface RestoreParamSource<T extends RestoreParamType = any> {
+    type: T,
+
+    /*
+     * A human-readable name for this parameter
+     */
+    name?: string,
+
+    /*
+     * LiteGraph type of the widget node
+     */
+    nodeType: string,
+
+    /*
+     * The actual value to copy to the widget after all conversions have been
+     * applied.
+     */
+    finalValue: any
+}
+
+/*
+ * A serialized ComfyWidgetNode from the saved workflow that corresponds
+ * *exactly* to a node with the same ID in the current workflow. Easiest case
+ * since the parameter value can just be copied without much fuss.
+ */
+export interface RestoreParamSourceWorkflowNode extends RestoreParamSource<"workflow"> {
+    type: "workflow",
+
+    prevValue?: any
+}
+
+export type RestoreParamWorkflowNodeTargets = Record<NodeID, RestoreParamSourceWorkflowNode>
+
+/*
+ * A value received by the ComfyUI *backend* that corresponds to a value that
+ * was held in a ComfyWidgetNode. These may not necessarily be one-to-one
+ * because there can be extra frontend-only processing nodes between the two.
+ *
+ * (Example: a node that converts a random prompt template into a final prompt
+ * string, then passes *that* prompt string to the backend. The backend will not
+ * see the template string, so it will be missing in the arguments to ComfyUI's
+ * prompt endpoint. Hence this parameter source won't account for those kinds of
+ * values.)
+ */
+export interface RestoreParamSourceBackendNodeInput extends RestoreParamSource<"backend"> {
+    type: "backend",
+
+    backendNode: SerializedComfyWidgetNode,
+
+    /*
+     * If false, this node was connected to the backend node across one or more
+     * additional frontend nodes, so the value in the source may not correspond
+     * exactly to the widget's original value
+     */
+    isDirectAttachment: boolean
+}
+
+/*
+ * A value contained in the standard prompt extracted from the saved workflow.
+ *
+ * This should only be necessary to fall back on if one workflow's parameters
+ * are to be used in a completely separate workflow's.
+ */
+export interface RestoreParamSourceStdPrompt<T, K extends keyof T> extends RestoreParamSource<"stdPrompt"> {
+    type: "stdPrompt",
+
+    /*
+     * Name of the group containing the value to pass
+     *
+     * "lora"
+     */
+    groupName: string,
+
+    /*
+     * The standard prompt group containing the value and metadata like
+     * "positive"/"negative" for identification use
+     *
+     * { "$meta": { ... }, model_name: "...", model_hashes: [...], ... }
+     */
+    group: T,
+
+    /*
+     * Key of the group parameter holding the actual value
+
+     * "model_name"
+     */
+    key: K,
+
+    /*
+     * The raw value as saved to the prompt, not accounting for stuff like hashes
+     *
+     * "contrastFix"
+     */
+    rawValue: T[K]
+
+    /*
+     * The *actual* value that will be copied into the ComfyWidgetNode, after
+     * conversion to account for filepaths/etc. from prompt adapters has been
+     * completed
+     *
+     * "models/lora/contrastFix.safetensors"
+     */
+    finalValue: any
+}
+
+export type RestoreParamTargets = Record<NodeID, RestoreParamSource[]>
+
+function isSerializedComfyWidgetNode(param: any): param is SerializedComfyWidgetNode {
+    return param != null && typeof param === "object" && "id" in param && "comfyValue" in param
+}
+
+function findUpstreamSerializedWidgetNode(prompt: SerializedPrompt, input: INodeInputSlot): [SerializedComfyWidgetNode | null, boolean | null] {
+    let linkID = input.link;
+    let isDirectAttachment = true;
+
+    while (linkID) {
+        const link = prompt.workflow.links[linkID]
+        if (link == null)
+            return [null, null];
+
+        const originNode = prompt.workflow.nodes.find(n => n.id === link[1])
+        if (isSerializedComfyWidgetNode(originNode))
+            return [originNode, isDirectAttachment]
+
+        isDirectAttachment = false;
+
+        // TODO: getUpstreamLink() for serialized nodes?
+        if (originNode.inputs && originNode.inputs.length === 1)
+            linkID = originNode.inputs[0].link
+        else
+            linkID = null;
+    }
+
+    return [null, null];
+}
+
+const addSource = (result: RestoreParamTargets, targetNode: ComfyWidgetNode, source: RestoreParamSource) => {
+    result[targetNode.id] ||= []
+    result[targetNode.id].push(source);
+}
+
+export function concatRestoreParams(a: RestoreParamTargets, b: Record<NodeID, RestoreParamSource>): RestoreParamTargets {
+    for (const [targetNodeID, source] of Object.entries(b)) {
+        a[targetNodeID] ||= []
+        a[targetNodeID].push(source);
+    }
+    return a;
+}
+
+export function concatRestoreParams2(a: RestoreParamTargets, b: RestoreParamTargets): RestoreParamTargets {
+    for (const [targetNodeID, vs] of Object.entries(b)) {
+        a[targetNodeID] ||= []
+        for (const source of vs) {
+            a[targetNodeID].push(source);
+        }
+    }
+    return a;
+}
+
+/*
+ * Like getWorkflowRestoreParams but applies to an instanced (non-serialized) workflow
+ */
+export function getWorkflowRestoreParamsFromWorkflow(workflow: ComfyBoxWorkflow, noExclude: boolean = false): RestoreParamWorkflowNodeTargets {
+    const result = {}
+
+    for (const node of workflow.graph.iterateNodesInOrderRecursive()) {
+        if (!isComfyWidgetNode(node))
+            continue;
+
+        if (!noExclude && node.properties.excludeFromJourney)
+            continue;
+
+        let name = null;
+        const realNode = workflow.graph.getNodeByIdRecursive(node.id);
+        if (realNode != null && isComfyWidgetNode(realNode)) {
+            name = realNode.title || name;
+            const widget = realNode.dragItem;
+            if (widget != null) {
+                name = widget.attrs.title || name;
+            }
+        }
+
+        const finalValue = node.getValue();
+        if (finalValue != null) {
+            const source: RestoreParamSourceWorkflowNode = {
+                type: "workflow",
+                nodeType: node.type,
+                name,
+                finalValue,
+            }
+            result[node.id] = source;
+        }
+    }
+
+    return result
+}
+
+export function getWorkflowRestoreParams(serGraph: SerializedLGraph, workflow?: ComfyBoxWorkflow, noExclude: boolean = false): RestoreParamWorkflowNodeTargets {
+    const result = {}
+
+    for (const node of serGraph.nodes) {
+        if (!isSerializedComfyWidgetNode(node))
+            continue;
+
+        if (!noExclude && node.properties.excludeFromJourney)
+            continue;
+
+        let name = null;
+        const realNode = workflow.graph.getNodeByIdRecursive(node.id);
+        if (realNode != null && isComfyWidgetNode(realNode)) {
+            name = realNode.title || name;
+            const widget = realNode.dragItem;
+            if (widget != null) {
+                name = widget.attrs.title || name;
+            }
+        }
+
+        const finalValue = node.comfyValue
+        if (finalValue != null) {
+            const source: RestoreParamSourceWorkflowNode = {
+                type: "workflow",
+                nodeType: node.type,
+                name,
+                prevValue: finalValue,
+                finalValue,
+            }
+            result[node.id] = source;
+        }
+    }
+
+    return result
+}
+
+function* iterateSerializedNodesRecursive(serGraph: SerializedLGraph): Iterable<SerializedLGraphNode> {
+    for (const serNode of serGraph.nodes) {
+        yield serNode;
+
+        if (serNode.type === "graph/subgraph") {
+            for (const childNode of iterateSerializedNodesRecursive((serNode as any).subgraph)) {
+                yield childNode;
+            }
+        }
+    }
+}
+
+export function getWorkflowRestoreParamsUsingLayout(serGraph: SerializedLGraph, layout?: SerializedLayoutState, noExclude: boolean = false): RestoreParamWorkflowNodeTargets {
+    const result = {}
+
+    for (const serNode of iterateSerializedNodesRecursive(serGraph)) {
+        if (!isSerializedComfyWidgetNode(serNode)) {
+            continue;
+        }
+
+        if (!noExclude && serNode.properties.excludeFromJourney) {
+            continue;
+        }
+
+        let name = null;
+        const serWidget = Array.from(Object.values(layout?.allItems || {})).find(di => di.dragItem.type === "widget" && di.dragItem.nodeId === serNode.id)
+        if (serWidget) {
+            name = serWidget.dragItem.attrs.title;
+        }
+
+        const finalValue = serNode.comfyValue
+        if (finalValue != null) {
+            const source: RestoreParamSourceWorkflowNode = {
+                type: "workflow",
+                nodeType: serNode.type,
+                name,
+                finalValue,
+            }
+            result[serNode.id] = source;
+        }
+    }
+
+    return result
+}
+
+export function getBackendRestoreParams(workflow: ComfyBoxWorkflow, prompt: SerializedPrompt): Record<NodeID, RestoreParamSourceBackendNodeInput[]> {
+    const result = {}
+
+    const graph = workflow.graph;
+
+    // Figure out what parameters the backend received. If there was a widget
+    // node attached to a backend node's input upstream, then we can use that
+    // value.
+    for (const [serNodeID, inputs] of Object.entries(prompt.output)) {
+        const serNode = prompt.workflow.nodes.find(sn => sn.id === serNodeID)
+        if (serNode == null)
+            continue;
+
+        for (const [inputName, inputValue] of Object.entries(inputs)) {
+            const input = serNode.inputs.find(i => i.name === inputName);
+            if (input == null)
+                continue;
+
+            if (isSerializedPromptInputLink(inputValue))
+                continue;
+
+            const [originNode, isDirectAttachment] = findUpstreamSerializedWidgetNode(prompt, input)
+
+            if (originNode) {
+                const foundNode = graph.getNodeByIdRecursive(serNode.id);
+                if (isComfyWidgetNode(foundNode) && foundNode.type === serNode.type) {
+                    const source: RestoreParamSourceBackendNodeInput = {
+                        type: "backend",
+                        nodeType: foundNode.type,
+                        finalValue: inputValue,
+                        backendNode: serNode,
+                        isDirectAttachment
+                    }
+                    addSource(result, foundNode, source)
+                }
+            }
+        }
+    }
+
+    return result
+}
+
+export default function getRestoreParameters(workflow: ComfyBoxWorkflow, prompt: SerializedPrompt): RestoreParamTargets {
+    const result = {}
+
+    const workflowParams = getWorkflowRestoreParams(prompt.workflow, workflow);
+    concatRestoreParams(result, workflowParams);
+
+    const backendParams = getBackendRestoreParams(workflow, prompt);
+    concatRestoreParams2(result, backendParams);
+
+    // Step 3: Extract the standard prompt from the workflow and use that to
+    // infer parameter types
+
+    // TODO
+
+    // const serializer = new ComfyBoxStdPromptSerializer();
+    // const stdPrompt = serializer.serialize(prompt);
+
+    // const allWidgetNodes = Array.from(graph.iterateNodesInOrderRecursive()).filter(isComfyWidgetNode);
+
+    // for (const widgetNode of allWidgetNodes) {
+
+    // }
+
+    // for (const [groupName, groups] of Object.entries(stdPrompt)) {
+    // }
+
+    return result;
+}

src/lib/stores/configDefs.ts

@@ -119,36 +119,6 @@ const defNotifications: ConfigDefEnum<"notifications", NotificationState> = {
     }
 };
 
-export enum OutputThumbnailsMode {
-    Auto,
-    AlwaysThumbnail,
-    AlwaysFullSize
-}
-
-const defOutputThumbnails: ConfigDefEnum<"outputThumbnails", OutputThumbnailsMode> = {
-    name: "outputThumbnails",
-    type: "enum",
-    defaultValue: OutputThumbnailsMode.Auto,
-    category: "ui",
-    description: "If enabled, send back smaller sized output image thumbnails for gallery/queue/history. Enable if you have slow network or are using Colab.",
-    options: {
-        values: [
-            {
-                value: OutputThumbnailsMode.Auto,
-                label: "Autodetect"
-            },
-            {
-                value: OutputThumbnailsMode.AlwaysThumbnail,
-                label: "Always use thumbnails"
-            },
-            {
-                value: OutputThumbnailsMode.AlwaysFullSize,
-                label: "Always use full size"
-            },
-        ]
-    }
-};
-
 const defAlwaysStripUserState: ConfigDefBoolean<"alwaysStripUserState"> = {
     name: "alwaysStripUserState",
     type: "boolean",
@@ -237,7 +207,6 @@ export const CONFIG_DEFS = [
     defComfyUIHostname,
     defComfyUIPort,
     defNotifications,
-    defOutputThumbnails,
     defAlwaysStripUserState,
     defPromptForWorkflowName,
     defConfirmWhenUnloadingUnsavedChanges,

src/lib/stores/journeyStates.ts

@@ -0,0 +1,365 @@
+import { get, writable } from 'svelte/store';
+import type { Readable, Writable } from 'svelte/store';
+import { isComfyWidgetNode, type DragItemID, type IDragItem } from './layoutStates';
+import { LiteGraph, type LGraphNode, type NodeID, type UUID } from '@litegraph-ts/core';
+import type { SerializedAppState } from '$lib/components/ComfyApp';
+import { getWorkflowRestoreParamsFromWorkflow, type RestoreParamSourceWorkflowNode, type RestoreParamTargets, type RestoreParamWorkflowNodeTargets } from '$lib/restoreParameters';
+import { v4 as uuidv4 } from "uuid";
+import deepEqual from "deep-equal";
+import notify from '$lib/notify';
+import type { ComfyBoxWorkflow } from './workflowState';
+import type { ComfyNodeID, PromptID } from '$lib/api';
+import type { SerializedPromptOutput } from '$lib/utils';
+import type { QueueEntry } from './queueState';
+
+export type JourneyNodeType = "root" | "patch";
+
+export type JourneyNodeID = UUID;
+
+export interface JourneyNode {
+    id: JourneyNodeID,
+    type: JourneyNodeType,
+    children: JourneyPatchNode[],
+    promptIDs: Set<PromptID>,
+    images?: string[]
+}
+
+export interface JourneyRootNode extends JourneyNode {
+    type: "root"
+
+    /*
+     * This contains all the values of the workflow to set
+     */
+    base: RestoreParamWorkflowNodeTargets
+}
+
+export interface JourneyPatchNode extends JourneyNode {
+    type: "patch"
+
+    parent: JourneyNode,
+
+    /*
+     * This contains only the subset of parameters that were changed from the
+     * parent
+     */
+    patch: RestoreParamWorkflowNodeTargets
+}
+
+function isRoot(node: JourneyNode): node is JourneyRootNode {
+    return node.type === "root";
+}
+
+function isPatch(node: JourneyNode): node is JourneyPatchNode {
+    return node.type === "patch";
+}
+
+export function resolvePatch(node: JourneyNode, memoize?: Record<JourneyNodeID, RestoreParamWorkflowNodeTargets>): RestoreParamWorkflowNodeTargets {
+    if (node.type === "root") {
+        return { ...(node as JourneyRootNode).base }
+    }
+
+    if (memoize && memoize[node.id] != null)
+        return { ...memoize[node.id] }
+
+    const patchNode = (node as JourneyPatchNode);
+    const patch = { ...patchNode.patch };
+    const base = resolvePatch(patchNode.parent);
+    for (const [k, v] of Object.entries(patch)) {
+        base[k] = v;
+    }
+
+    if (memoize) {
+        memoize[node.id] = base;
+    }
+
+    return base;
+}
+
+export function diffParams(base: RestoreParamWorkflowNodeTargets, updated: RestoreParamWorkflowNodeTargets): RestoreParamWorkflowNodeTargets {
+    const result = {}
+
+    for (const [k, v] of Object.entries(updated)) {
+        if (!(k in base) || !deepEqual(base[k].finalValue, v.finalValue, { strict: true })) {
+            result[k] = v
+            v.prevValue = base[k].finalValue
+        }
+    }
+
+    return result;
+}
+
+export function calculateWorkflowParamsPatch(parent: JourneyNode, newParams: RestoreParamWorkflowNodeTargets): RestoreParamWorkflowNodeTargets {
+    const patch = resolvePatch(parent);
+    const diff = diffParams(patch, newParams)
+    return diff;
+}
+
+/*
+ * A "journey" is like browser history for prompts, except organized in a
+ * tree-like graph. It lets you save incremental changes to your workflow and
+ * jump between past and present sets of parameters.
+ */
+export type JourneyState = {
+    root: JourneyRootNode | null,
+    nodesByID: Record<JourneyNodeID, JourneyNode>,
+    nodesByPromptID: Record<PromptID, JourneyNode>,
+    activeNodeID: JourneyNodeID | null,
+
+    /*
+     * Incremented when graph structure is updated
+     */
+    version: number
+}
+
+type JourneyStateOps = {
+    clear: () => void,
+    getActiveNode: () => JourneyNode | null,
+    // addNode: (params: RestoreParamWorkflowNodeTargets, parent?: JourneyNodeID | JourneyNode) => JourneyNode,
+    selectNode: (id?: JourneyNodeID | JourneyNode) => void,
+    iterateBreadthFirst: (id?: JourneyNodeID | null) => Iterable<JourneyNode>,
+    iterateLinearPath: (id: JourneyNodeID) => Iterable<JourneyNode>,
+    pushPatchOntoActive: (workflow: ComfyBoxWorkflow, activeNode?: JourneyNode, showNotification?: boolean) => JourneyNode | null
+    afterQueued: (journeyNode: JourneyNode, promptID: PromptID) => void,
+    onExecuted: (promptID: PromptID, nodeID: ComfyNodeID, output: SerializedPromptOutput, queueEntry: QueueEntry) => void
+}
+
+export type WritableJourneyStateStore = Writable<JourneyState> & JourneyStateOps;
+
+function create() {
+    const store: Writable<JourneyState> = writable(
+        {
+            root: null,
+            nodesByID: {},
+            nodesByPromptID: {},
+            activeNodeID: null,
+            version: 0
+        })
+
+    function clear() {
+        store.set({
+            root: null,
+            nodesByID: {},
+            nodesByPromptID: {},
+            activeNodeID: null,
+            version: 0
+        })
+    }
+
+    function getActiveNode(): JourneyNode | null {
+        const state = get(store)
+        if (state.activeNodeID === null)
+            return null;
+        const active = state.nodesByID[state.activeNodeID]
+        if (active == null) {
+            console.error("[journeyStates] Active node not found in graph!", state.activeNodeID);
+        }
+        return active;
+    }
+
+    /*
+     * params: full state or state patch of widgets in the UI
+     * parent: parent node to patch against
+     */
+    function addNode(params: RestoreParamWorkflowNodeTargets, parent?: JourneyNodeID | JourneyNode): JourneyNode {
+        let _node: JourneyRootNode | JourneyPatchNode;
+
+        store.update(s => {
+            let parentNode: JourneyNode | null = null
+            if (parent != null) {
+                if (typeof parent === "object")
+                    parent = parent.id;
+                parentNode = s.nodesByID[parent];
+                if (parentNode == null) {
+                    throw new Error(`Could not find parent node ${parent} to insert into!`)
+                }
+            }
+            if (parentNode == null) {
+                _node = {
+                    id: uuidv4(),
+                    type: "root",
+                    children: [],
+                    promptIDs: new Set(),
+                    base: { ...params }
+                }
+                s.root = _node
+            }
+            else {
+                _node = {
+                    id: uuidv4(),
+                    type: "patch",
+                    parent: parentNode,
+                    children: [],
+                    promptIDs: new Set(),
+                    patch: params,
+                }
+                parentNode.children.push(_node);
+            }
+            s.nodesByID[_node.id] = _node;
+            s.version += 1;
+            return s;
+        });
+        return _node;
+    }
+
+    function pushPatchOntoActive(workflow: ComfyBoxWorkflow, activeNode?: JourneyNode, showNotification: boolean = false): JourneyNode | null {
+        const workflowParams = getWorkflowRestoreParamsFromWorkflow(workflow)
+
+        let journeyNode
+
+        if (activeNode == null) {
+            // add root node
+            if (get(store).root != null) {
+                console.debug("[journeyStates] Root already exists")
+                return null;
+            }
+            journeyNode = addNode(workflowParams, null);
+            if (showNotification)
+                notify("Pushed a new base workflow state.", { type: "info" })
+        }
+        else {
+            // add patch node
+            const patch = calculateWorkflowParamsPatch(activeNode, workflowParams);
+            const patchedCount = Object.keys(patch).length;
+            if (patchedCount === 0) {
+                console.debug("[journeyStates] Patch had no diff")
+                if (showNotification)
+                    notify("No changes were made to active parameters yet.", { type: "warning" })
+                return null;
+            }
+            journeyNode = addNode(patch, activeNode);
+            if (showNotification)
+                notify(`Pushed new state with ${patchedCount} changes.`, { type: "info" })
+        }
+
+        if (journeyNode != null) {
+            selectNode(journeyNode);
+        }
+
+        console.debug("[journeyStates] added node", journeyNode)
+        return journeyNode;
+    }
+
+    function selectNode(obj?: JourneyNodeID | JourneyNode) {
+        store.update(s => {
+            if (typeof obj === "string")
+                s.activeNodeID = obj;
+            else
+                s.activeNodeID = obj.id;
+            return s;
+        })
+    }
+
+    // function removeNode(id: JourneyNodeID) {
+    //     store.update(s => {
+    //         const node = s.nodesByID[id];
+    //         if (node == null) {
+    //             throw new Error(`Journey node not found: ${id}`)
+    //         }
+
+    //         if (node.type === "patch") {
+
+    //         }
+    //         else {
+    //             s.root = null;
+    //         }
+
+    //         delete s.nodesByID[id];
+    //         s.version += 1;
+
+    //         return s;
+    //     });
+    // }
+
+    function* iterateBreadthFirst(id?: JourneyNodeID | null): Iterable<JourneyNode> {
+        const state = get(store);
+
+        id ||= state.root?.id;
+        if (id == null)
+            return;
+
+        const queue = [state.nodesByID[id]];
+        while (queue.length > 0) {
+            const node = queue.shift();
+            yield node;
+            if (node.children) {
+                for (const child of node.children) {
+                    queue.push(state.nodesByID[child.id]);
+                }
+            }
+        }
+    }
+
+    function* iterateNodeParents(node: JourneyNode): Iterable<JourneyNode> {
+        while (isPatch(node)) {
+            yield node.parent;
+            node = node.parent;
+        }
+    }
+
+    function iterateLinearPath(id: JourneyNodeID): Iterable<JourneyNode> {
+        const state = get(store);
+
+        const node = state.nodesByID[id];
+        if (node == null) {
+            console.error("[journeyStates] Journey node not found!", id);
+            return
+        }
+
+        let path = Array.from(iterateNodeParents(node)).reverse()
+        path.push(node)
+
+        // pick first child for nodes downstream
+        let child = node.children[0]
+        while (child != null) {
+            path.push(child);
+            child = child.children[0];
+        }
+
+        return path;
+    }
+
+    function afterQueued(journeyNode: JourneyNode, promptID: PromptID) {
+        journeyNode.promptIDs.add(promptID);
+        store.update(s => {
+            s.nodesByPromptID[promptID] = journeyNode;
+            return s;
+        })
+    }
+
+    function onExecuted(promptID: PromptID, nodeID: ComfyNodeID, output: SerializedPromptOutput, queueEntry: QueueEntry) {
+        const journeyNode = get(store).nodesByPromptID[promptID];
+        if (journeyNode == null)
+            return;
+
+        // TODO
+        store.update(s => {
+            s.version += 1;
+            s.activeNodeID = journeyNode.id;
+            return s;
+        })
+    }
+
+    return {
+        ...store,
+        getActiveNode,
+        clear,
+        // addNode,
+        pushPatchOntoActive,
+        selectNode,
+        iterateBreadthFirst,
+        iterateLinearPath,
+        afterQueued,
+        onExecuted,
+    }
+}
+
+export type JourneyStateStaticOps = {
+    create: () => WritableJourneyStateStore
+}
+
+// These will be attached to workflows.
+const ops: JourneyStateStaticOps = {
+    create
+}
+
+export default ops

src/lib/stores/layoutStates.ts

@@ -512,6 +512,14 @@ const ALL_ATTRIBUTES: AttributesSpecList = [
                 serialize: serializeStringArray,
                 deserialize: deserializeStringArray
             },
+            {
+                name: "excludeFromJourney",
+                type: "boolean",
+                location: "nodeProps",
+                editable: true,
+                defaultValue: false,
+                canShow: isComfyWidgetNode
+            },
 
             // Container tags are contained in the widget attributes
             {
@@ -615,14 +623,6 @@ const ALL_ATTRIBUTES: AttributesSpecList = [
                 validNodeTypes: ["ui/gallery"],
                 defaultValue: true
             },
-            {
-                name: "showPreviews",
-                type: "boolean",
-                location: "nodeProps",
-                editable: true,
-                validNodeTypes: ["ui/gallery"],
-                defaultValue: true
-            },
 
             // ImageUpload
             {

src/lib/stores/queueState.ts

@@ -22,7 +22,6 @@ type QueueStateOps = {
     executionCached: (promptID: PromptID, nodes: ComfyNodeID[]) => void,
     executionError: (error: ComfyExecutionError) => CompletedQueueEntry | null,
     progressUpdated: (progress: Progress) => void
-    previewUpdated: (imageBlob: Blob) => void
     getQueueEntry: (promptID: PromptID) => QueueEntry | null;
     afterQueued: (workflowID: WorkflowInstID, promptID: PromptID, number: number, prompt: SerializedPromptInputsAll, extraData: any) => void
     queueItemDeleted: (type: QueueItemType, id: PromptID) => void;
@@ -37,7 +36,7 @@ type QueueStateOps = {
 export type QueueEntry = {
     /*** Data preserved on page refresh ***/
 
-    /** Priority of the prompt. -1 means to queue at the front. */
+    /** Priority of the prompt. Lower/negative numbers get higher priority. */
     number: number,
     queuedAt?: Date,
     finishedAt?: Date,
@@ -89,11 +88,6 @@ export type QueueState = {
      */
     runningNodeID: ComfyNodeID | null;
 
-    /*
-     * Currently executing prompt if any
-     */
-    runningPromptID: PromptID | null;
-
     /*
      * Nodes which should be rendered as "executing" in the frontend (green border).
      * This includes the running node and all its parent subgraphs
@@ -104,12 +98,6 @@ export type QueueState = {
      * Progress for the current node reported by the frontend
      */
     progress: Progress | null,
-
-    /*
-     * Image preview URL
-     */
-    previewURL: string | null,
-
     /**
      * If true, user pressed the "Interrupt" button in the frontend. Disable the
      * button and wait until the next prompt starts running to re-enable it
@@ -127,7 +115,6 @@ const store: Writable<QueueState> = writable({
     runningNodeID: null,
     executingNodes: new Set(),
     progress: null,
-    preview: null,
     isInterrupting: false
 })
 
@@ -184,19 +171,6 @@ function progressUpdated(progress: Progress) {
     })
 }
 
-function previewUpdated(imageBlob: Blob) {
-    console.debug("[queueState] previewUpdated", imageBlob?.type)
-    store.update(s => {
-        if (s.runningNodeID == null) {
-            s.previewURL = null;
-            return s;
-        }
-
-        s.previewURL = URL.createObjectURL(imageBlob);
-        return s;
-    })
-}
-
 function statusUpdated(status: ComfyAPIStatusResponse | null) {
     console.debug("[queueState] statusUpdated", status)
     store.update((s) => {
@@ -322,7 +296,6 @@ function executingUpdated(promptID: PromptID, runningNodeID: ComfyNodeID | null)
                 entry.nodesRan.add(runningNodeID)
             }
             s.runningNodeID = runningNodeID;
-            s.runningPromptID = promptID;
 
             if (entry?.extraData?.workflowID) {
                 const workflow = workflowState.getWorkflow(entry.extraData.workflowID);
@@ -364,9 +337,7 @@ function executingUpdated(promptID: PromptID, runningNodeID: ComfyNodeID | null)
                 console.debug("[queueState] Could not find in pending! (executingUpdated)", promptID)
             }
             s.progress = null;
-            s.previewURL = null;
             s.runningNodeID = null;
-            s.runningPromptID = null;
             s.executingNodes.clear();
         }
         entry_ = entry;
@@ -391,9 +362,7 @@ function executionCached(promptID: PromptID, nodes: ComfyNodeID[]) {
         }
         s.isInterrupting = false; // TODO move to start
         s.progress = null;
-        s.previewURL = null;
         s.runningNodeID = null;
-        s.runningPromptID = null;
         s.executingNodes.clear();
         return s
     })
@@ -411,9 +380,7 @@ function executionError(error: ComfyExecutionError): CompletedQueueEntry | null
             console.error("[queueState] Could not find in pending! (executionError)", error.prompt_id)
         }
         s.progress = null;
-        s.previewURL = null;
         s.runningNodeID = null;
-        s.runningPromptID = null;
         s.executingNodes.clear();
         return s
     })
@@ -449,7 +416,6 @@ function executionStart(promptID: PromptID) {
         }
         s.isInterrupting = false;
         s.runningNodeID = null;
-        s.runningPromptID = promptID;
         s.executingNodes.clear();
         return s
     })
@@ -514,9 +480,7 @@ function queueCleared(type: QueueItemType) {
             s.queuePending.set([]);
             s.queueRemaining = 0;
             s.runningNodeID = null;
-            s.runningPromptID = null;
             s.progress = null;
-            s.previewURL = null;
             s.executingNodes.clear();
         }
         else {
@@ -571,7 +535,6 @@ const queueStateStore: WritableQueueStateStore =
     historyUpdated,
     statusUpdated,
     progressUpdated,
-    previewUpdated,
     executionStart,
     executingUpdated,
     executionCached,

src/lib/stores/selectionState.ts

@@ -24,7 +24,12 @@ export type SelectionState = {
     /*
      * Currently hovered nodes.
      */
-    currentHoveredNodes: Set<NodeID>
+    currentHoveredNodes: Set<NodeID>,
+
+    /*
+     * Nodes affected by the patch hovered in the journey pane
+     */
+    currentPatchHoveredNodes: Set<NodeID>
 }
 
 type SelectionStateOps = {
@@ -38,6 +43,7 @@ const store: Writable<SelectionState> = writable(
         currentSelectionNodes: [],
         currentHovered: new Set(),
         currentHoveredNodes: new Set(),
+        currentPatchHoveredNodes: new Set(),
     })
 
 function clear() {
@@ -46,12 +52,13 @@ function clear() {
         currentSelectionNodes: [],
         currentHovered: new Set(),
         currentHoveredNodes: new Set(),
+        currentPatchHoveredNodes: new Set(),
     })
 }
 
-const uiStateStore: WritableSelectionStateStore =
+const selectionStateStore: WritableSelectionStateStore =
 {
     ...store,
     clear
 }
-export default uiStateStore;
+export default selectionStateStore;

src/lib/stores/uiQueueState.ts

@@ -1,8 +1,7 @@
 import type { PromptID, QueueItemType } from '$lib/api';
-import type { ComfyImageLocation } from "$lib/utils";
 import { get, writable } from 'svelte/store';
 import type { Readable, Writable } from 'svelte/store';
-import queueState, { QueueEntryStatus, type CompletedQueueEntry, type QueueEntry } from './queueState';
+import queueState, { type CompletedQueueEntry, type QueueEntry } from './queueState';
 import type { WorkflowError } from './workflowState';
 import { convertComfyOutputToComfyURL } from '$lib/utils';
 
@@ -14,7 +13,7 @@ export type QueueUIEntry = {
     submessage: string,
     date?: string,
     status: QueueUIEntryStatus,
-    images?: ComfyImageLocation[], // URLs
+    images?: string[], // URLs
     details?: string, // shown in a tooltip on hover
     error?: WorkflowError
 }
@@ -63,7 +62,7 @@ function convertEntry(entry: QueueEntry, status: QueueUIEntryStatus): QueueUIEnt
 
     const subgraphs: string[] | null = entry.extraData?.extra_pnginfo?.comfyBoxPrompt?.subgraphs;
 
-    let message = "Prompt";
+    let message = `#${entry.number}: Prompt`;
     if (entry.extraData?.workflowTitle != null) {
         message = `${entry.extraData.workflowTitle}`
     }
@@ -73,7 +72,7 @@ function convertEntry(entry: QueueEntry, status: QueueUIEntryStatus): QueueUIEnt
         message += ` (${subgraphsString})`
     }
 
-    let submessage = `#: ${entry.number}, Nodes: ${Object.keys(entry.prompt).length}`
+    let submessage = `Nodes: ${Object.keys(entry.prompt).length}`
 
     if (Object.keys(entry.outputs).length > 0) {
         const imageCount = Object.values(entry.outputs).filter(o => o.images).flatMap(o => o.images).length
@@ -90,17 +89,22 @@ function convertEntry(entry: QueueEntry, status: QueueUIEntryStatus): QueueUIEnt
     }
 }
 
+export function getQueueEntryImages(queueEntry: QueueEntry): string[] {
+    return Object.values(queueEntry.outputs)
+        .filter(o => o.images)
+        .flatMap(o => o.images)
+        .map(convertComfyOutputToComfyURL);
+}
+
 function convertPendingEntry(entry: QueueEntry, status: QueueUIEntryStatus): QueueUIEntry {
     const result = convertEntry(entry, status);
 
     const thumbnails = entry.extraData?.thumbnails
     if (thumbnails) {
-        result.images = [...thumbnails]
+        result.images = thumbnails.map(convertComfyOutputToComfyURL);
     }
 
-    const outputs = Object.values(entry.outputs)
+    const outputs = getQueueEntryImages(entry);
-        .filter(o => o.images)
-        .flatMap(o => o.images)
     if (outputs) {
         result.images = result.images.concat(outputs)
     }
@@ -111,10 +115,7 @@ function convertPendingEntry(entry: QueueEntry, status: QueueUIEntryStatus): Que
 function convertCompletedEntry(entry: CompletedQueueEntry): QueueUIEntry {
     const result = convertEntry(entry.entry, entry.status);
 
-    const images = Object.values(entry.entry.outputs)
+    result.images = getQueueEntryImages(entry.entry)
-        .filter(o => o.images)
-        .flatMap(o => o.images)
-    result.images = images
 
     if (entry.message)
         result.submessage = entry.message
@@ -131,8 +132,10 @@ function updateFromQueue(queuePending: QueueEntry[], queueRunning: QueueEntry[])
         // newest entries appear at the top
         s.queuedEntries = queuePending.map((e) => convertPendingEntry(e, "pending")).reverse();
         s.runningEntries = queueRunning.map((e) => convertPendingEntry(e, "running")).reverse();
+
         s.queuedEntries.sort((a, b) => a.entry.number - b.entry.number)
         s.runningEntries.sort((a, b) => a.entry.number - b.entry.number)
+
         s.queueUIEntries = s.queuedEntries.concat(s.runningEntries);
         console.warn("[ComfyQueue] BUILDQUEUE", s.queuedEntries.length, s.runningEntries.length)
         return s;

src/lib/stores/uiState.ts

@@ -10,12 +10,13 @@ export type UIState = {
     autoAddUI: boolean,
     uiUnlocked: boolean,
     uiEditMode: UIEditMode,
-    hidePreviews: boolean,
 
     reconnecting: boolean,
     forceSaveUserState: boolean | null,
 
     activeError: PromptID | null
+
+    saveHistory: boolean
 }
 
 type UIStateOps = {
@@ -31,12 +32,13 @@ const store: Writable<UIState> = writable(
         autoAddUI: true,
         uiUnlocked: false,
         uiEditMode: "widgets",
-        hidePreviews: false,
 
         reconnecting: false,
         forceSaveUserState: null,
 
-        activeError: null
+        activeError: null,
+
+        saveHistory: true
     })
 
 function reconnecting() {

src/lib/stores/workflowState.ts

@@ -2,7 +2,7 @@ import type { SerializedGraphCanvasState } from '$lib/ComfyGraphCanvas';
 import { clamp, LGraphNode, type LGraphCanvas, type NodeID, type SerializedLGraph, type UUID, LGraph, LiteGraph, type SlotType, NodeMode } from '@litegraph-ts/core';
 import { get, writable } from 'svelte/store';
 import type { Readable, Writable } from 'svelte/store';
-import { defaultWorkflowAttributes, type SerializedLayoutState, type WritableLayoutStateStore } from './layoutStates';
+import { defaultWorkflowAttributes, isComfyWidgetNode, type SerializedLayoutState, type WritableLayoutStateStore } from './layoutStates';
 import ComfyGraph from '$lib/ComfyGraph';
 import layoutStates from './layoutStates';
 import { v4 as uuidv4 } from "uuid";
@@ -12,6 +12,9 @@ import type { SerializedAppState, SerializedPrompt } from '$lib/components/Comfy
 import type ComfyReceiveOutputNode from '$lib/nodes/actions/ComfyReceiveOutputNode';
 import type { ComfyBoxPromptExtraData, PromptID } from '$lib/api';
 import type { ComfyAPIPromptErrorResponse, ComfyExecutionError } from '$lib/apiErrors';
+import type { WritableJourneyStateStore } from './journeyState';
+import journeyStates from './journeyStates';
+import type { RestoreParamWorkflowNodeTargets } from '$lib/restoreParameters';
 
 type ActiveCanvas = {
     canvas: LGraphCanvas | null;
@@ -115,7 +118,12 @@ export class ComfyBoxWorkflow {
     /*
      * Completed queue entry ID that holds the last validation/execution error.
      */
-    lastError?: PromptID
+    lastError?: PromptID;
+
+    /*
+     * Saved prompt history ("journey") for this workflow
+     */
+    journey: WritableJourneyStateStore;
 
     get layout(): WritableLayoutStateStore | null {
         return layoutStates.getLayout(this.id)
@@ -133,6 +141,7 @@ export class ComfyBoxWorkflow {
             title,
         }
         this.graph = new ComfyGraph(this.id);
+        this.journey = journeyStates.create();
     }
 
     notifyModified() {
@@ -204,6 +213,21 @@ export class ComfyBoxWorkflow {
         }
     }
 
+    applyParamsPatch(patch: RestoreParamWorkflowNodeTargets) {
+        for (const [nodeId, source] of Object.entries(patch)) {
+            const node = this.graph.getNodeByIdRecursive(nodeId);
+            if (node == null) {
+                console.error("[applyParamsPatch] Node was missing in patch!!", nodeId, source)
+                continue;
+            }
+            if (!isComfyWidgetNode(node)) {
+                console.error("[applyParamsPatch] Node was not ComfyWidgetNode!!", nodeId, source)
+                continue;
+            }
+            node.value.set(source.finalValue);
+        }
+    }
+
     /*
      * Creates a workflow and layout.
      *

src/lib/utils.ts

@@ -4,12 +4,11 @@ import type { FileData as GradioFileData } from "@gradio/upload";
 import { Subgraph, type LGraph, type LGraphNode, type LLink, type SerializedLGraph, type UUID, type NodeID, type SlotType, type Vector4, type SerializedLGraphNode } from "@litegraph-ts/core";
 import { get } from "svelte/store";
 import type { ComfyNodeID } from "./api";
-import ComfyApp, { type SerializedPrompt } from "./components/ComfyApp";
 import workflowState, { type WorkflowReceiveOutputTargets } from "./stores/workflowState";
+import ComfyApp, { type SerializedPrompt, type SerializedPromptInput, type SerializedPromptInputLink } from "./components/ComfyApp";
 import { ImageViewer } from "./ImageViewer";
 import configState from "$lib/stores/configState";
 import SendOutputModal, { type SendOutputModalResult } from "$lib/components/modal/SendOutputModal.svelte";
-import { OutputThumbnailsMode } from "./stores/configDefs";
 
 export function clamp(n: number, min: number, max: number): number {
     if (max <= min)
@@ -144,6 +143,10 @@ export function stopDrag(evt: MouseEvent, layoutState: WritableLayoutStateStore)
     layoutState.notifyWorkflowModified();
 };
 
+export function isSerializedPromptInputLink(inputValue: SerializedPromptInput): inputValue is SerializedPromptInputLink {
+    return Array.isArray(inputValue) && inputValue.length === 2 && typeof inputValue[0] === "string" && typeof inputValue[1] === "number"
+}
+
 export function graphToGraphVis(graph: LGraph): string {
     let links: string[] = []
     let seenLinks = new Set()
@@ -248,7 +251,7 @@ export function promptToGraphVis(prompt: SerializedPrompt): string {
             for (const pair2 of Object.entries(o.inputs)) {
                 const [inpName, i] = pair2;
 
-                if (Array.isArray(i) && i.length === 2 && typeof i[0] === "string" && typeof i[1] === "number") {
+                if (isSerializedPromptInputLink(i)) {
                     // Link
                     const [inpID, inpSlot] = i;
                     if (ids[inpID] == null)
@@ -301,80 +304,31 @@ export function convertComfyOutputToGradio(output: SerializedPromptOutput): Grad
 
 export function convertComfyOutputEntryToGradio(r: ComfyImageLocation): GradioFileData {
     const url = configState.getBackendURL();
+    const params = new URLSearchParams(r)
     const fileData: GradioFileData = {
         name: r.filename,
         orig_name: r.filename,
         is_file: false,
-        data: convertComfyOutputToComfyURL(r)
+        data: url + "/view?" + params
     }
     return fileData
 }
 
-function convertComfyPreviewTypeToString(preview: ComfyImagePreviewType): string {
+export function convertComfyOutputToComfyURL(output: string | ComfyImageLocation): string {
-    const arr = []
-    switch (preview.format) {
-        case ComfyImagePreviewFormat.JPEG:
-            arr.push("jpeg")
-            break;
-        case ComfyImagePreviewFormat.WebP:
-        default:
-            arr.push("webp")
-            break;
-    }
-
-    arr.push(String(preview.quality))
-
-    return arr.join(";")
-}
-
-export function convertComfyOutputToComfyURL(output: string | ComfyImageLocation, thumbnail: boolean = false): string {
     if (typeof output === "string")
         return output;
 
-    const paramsObj = {
+    const params = new URLSearchParams(output)
-        filename: output.filename,
-        subfolder: output.subfolder,
-        type: output.type
-    }
-
-    if (thumbnail) {
-        let doThumbnail: boolean;
-
-        switch (get(configState).outputThumbnails) {
-            case OutputThumbnailsMode.AlwaysFullSize:
-                doThumbnail = false;
-                break;
-            case OutputThumbnailsMode.AlwaysThumbnail:
-                doThumbnail = true;
-                break;
-            case OutputThumbnailsMode.Auto:
-            default:
-                // TODO detect colab, etc.
-                if (isMobileBrowser(navigator.userAgent)) {
-                    doThumbnail = true;
-                }
-                else {
-                    doThumbnail = false;
-                }
-                break;
-        }
-
-        if (doThumbnail) {
-            output.preview = {
-                format: ComfyImagePreviewFormat.WebP,
-                quality: 80
-            }
-        }
-    }
-
-    if (output.preview != null)
-        paramsObj["preview"] = convertComfyPreviewTypeToString(output.preview)
-
-    const params = new URLSearchParams(paramsObj)
     const url = configState.getBackendURL();
     return url + "/view?" + params
 }
 
+export function convertGradioFileDataToComfyURL(image: GradioFileData, type: ComfyUploadImageType = "input"): string {
+    const baseUrl = configState.getBackendURL();
+    const params = new URLSearchParams({ filename: image.name, subfolder: "", type })
+    return `${baseUrl}/view?${params}`
+}
+
 export function convertGradioFileDataToComfyOutput(fileData: GradioFileData, type: ComfyUploadImageType = "input"): ComfyImageLocation {
     if (!fileData.is_file)
         throw "Can't convert blob data to comfy output!"
@@ -386,6 +340,18 @@ export function convertGradioFileDataToComfyOutput(fileData: GradioFileData, typ
     }
 }
 
+export function convertFilenameToComfyURL(filename: string,
+    subfolder: string = "",
+    type: "input" | "output" | "temp" = "output"): string {
+    const params = new URLSearchParams({
+        filename,
+        subfolder,
+        type
+    })
+    const url = configState.getBackendURL();
+    return url + "/view?" + params
+}
+
 export function jsonToJsObject(json: string): string {
     // Try to parse, to see if it's real JSON
     JSON.parse(json);
@@ -451,16 +417,6 @@ export interface SerializedPromptOutput {
     [key: string]: any
 }
 
-export enum ComfyImagePreviewFormat {
-    WebP = "webp",
-    JPEG = "jpeg",
-}
-
-export type ComfyImagePreviewType = {
-    format: ComfyImagePreviewFormat,
-    quality: number
-}
-
 /** Raw output entry as received from ComfyUI's backend */
 export type ComfyImageLocation = {
     /* Filename with extension in the subfolder. */
@@ -468,19 +424,7 @@ export type ComfyImageLocation = {
     /* Subfolder in the containing folder. */
     subfolder: string,
     /* Base ComfyUI folder where the image is located. */
-    type: ComfyUploadImageType,
+    type: ComfyUploadImageType
-    /*
-     * Preview information
-     *
-     * "format;quality"
-     *
-     * ex)
-     * webp;50 -> webp, quality 50
-     * webp;50 -> webp, quality 50
-     * jpeg;80 -> rgb, jpeg, quality 80
-     *
-     */
-    preview?: ComfyImagePreviewType
 }
 
 /*
@@ -604,54 +548,27 @@ export function comfyBoxImageToComfyURL(image: ComfyBoxImageMetadata): string {
     return convertComfyOutputToComfyURL(image.comfyUIFile)
 }
 
-function parseComfyUIPreviewType(previewStr: string): ComfyImagePreviewType {
-    let split = previewStr.split(";")
-    let format = ComfyImagePreviewFormat.WebP;
-    if (split[0] === "webp")
-        format = ComfyImagePreviewFormat.WebP;
-    else if (split[0] === "jpeg")
-        format = ComfyImagePreviewFormat.JPEG;
-
-    let quality = parseInt(split[0])
-    if (isNaN(quality))
-        quality = 80
-
-    return { format, quality }
-}
-
 export function comfyURLToComfyFile(urlString: string): ComfyImageLocation | null {
     const url = new URL(urlString);
     const params = new URLSearchParams(url.search);
     const filename = params.get("filename")
     const type = params.get("type") as ComfyUploadImageType;
     const subfolder = params.get("subfolder") || ""
-    const previewStr = params.get("preview") || null;
-    let preview = null
-
-    if (previewStr != null) {
-        preview = parseComfyUIPreviewType(preview);
-    }
 
     // If at least filename and type exist then we're good
     if (filename != null && type != null) {
-        return { filename, type, subfolder, preview }
+        return { filename, type, subfolder }
     }
 
     return null;
 }
 
-export function showLightbox(images: ComfyImageLocation[] | string[], index: number, e: Event) {
+export function showLightbox(images: string[], index: number, e: Event) {
     e.preventDefault()
     if (!images)
         return
 
-    let images_: string[]
+    ImageViewer.instance.showModal(images, index);
-    if (typeof images[0] === "object")
-        images_ = (images as ComfyImageLocation[]).map(v => convertComfyOutputToComfyURL(v))
-    else
-        images_ = (images as string[])
-
-    ImageViewer.instance.showModal(images_, index);
 
     e.stopPropagation()
 }
@@ -829,8 +746,6 @@ export function isMobileBrowser(userAgent: string): boolean {
     return MOBILE_USER_AGENTS.some(a => userAgent.match(a))
 }
 
-export function vibrateIfPossible(strength: number | Array<number>) {
+export function isMultiline(input: any, splitLength: number = 50): boolean {
-  if (window.navigator.vibrate) {
+    return typeof input === "string" && (input.length > splitLength || countNewLines(input) > 1);
-    window.navigator.vibrate(strength);
-  }
 }

src/lib/widgets/ButtonWidget.svelte

@@ -3,7 +3,6 @@
  import { Button } from "@gradio/button";
  import { get, type Writable, writable } from "svelte/store";
  import { isDisabled } from "./utils"
- import { vibrateIfPossible } from "$lib/utils";
  import type { ComfyButtonNode } from "$lib/nodes/widgets";
 
  export let widget: WidgetLayout | null = null;
@@ -25,7 +24,7 @@
 
  function onClick(e: MouseEvent) {
      node.onClick();
-     vibrateIfPossible(20)
+     navigator.vibrate(20)
  }
 
  const style = {

src/lib/widgets/CheckboxWidget.svelte

@@ -4,7 +4,6 @@
  import { Checkbox } from "@gradio/form";
  import { get, type Writable, writable } from "svelte/store";
  import { isDisabled } from "./utils"
- import { vibrateIfPossible } from "$lib/utils";
  import type { SelectData } from "@gradio/utils";
  import type { ComfyCheckboxNode } from "$lib/nodes/widgets";
 
@@ -26,7 +25,7 @@
 
  function onSelect(e: CustomEvent<SelectData>) {
      $nodeValue = e.detail.selected
-     vibrateIfPossible(20)
+     navigator.vibrate(20)
  }
 </script>
 

src/lib/widgets/ComboWidget.svelte

@@ -8,7 +8,7 @@
  import { type WidgetLayout } from "$lib/stores/layoutStates";
  import { get, writable, type Writable } from "svelte/store";
  import { isDisabled } from "./utils"
- import { clamp, getSafetensorsMetadata, vibrateIfPossible } from '$lib/utils';
+ import { clamp, getSafetensorsMetadata } from '$lib/utils';
  export let widget: WidgetLayout | null = null;
  export let isMobile: boolean = false;
  let node: ComfyComboNode | null = null;
@@ -70,7 +70,7 @@
  function onFocus() {
      // console.warn("FOCUS")
      if (listOpen) {
-         vibrateIfPossible(20)
+         navigator.vibrate(20)
      }
  }
 
@@ -86,7 +86,7 @@
 
  function handleSelect(index: number) {
      // console.warn("SEL", index)
-     vibrateIfPossible(20)
+     navigator.vibrate(20)
      const item = $valuesForCombo[index]
      activeIndex = index;
      $nodeValue = item.value

src/lib/widgets/ComfyUI.grammar

@@ -1,36 +0,0 @@
-@top Program { expression* }
-
-@skip {} {
-  BlockComment { "/*" (blockCommentContent | blockCommentNewline)* blockCommentEnd }
-}
-
-@skip { space | LineComment | BlockComment }
-
-@local tokens {
-  blockCommentEnd { "*/" }
-  blockCommentNewline { "\n" }
-  @else blockCommentContent
-}
-
-expression {
-  Identifier |
-  String |
-  Boolean |
-  Application { "(" expression* ")" }
-}
-
-@tokens {
-  Identifier { $[a-zA-Z_\-0-9]+ }
-
-  String { '"' (!["\\] | "\\" _)* '"' }
-
-  Boolean { "#t" | "#f" }
-
-  LineComment { "//" ![\n]* }
-
-  space { $[ \t\n\r]+ }
-
-  "(" ")"
-}
-
-@detectDelim

src/lib/widgets/ComfyUI.grammar.d.ts

@@ -1,3 +0,0 @@
-import { LRParser } from "@lezer/lr"
-
-export declare const parser: LRParser

src/lib/widgets/GalleryWidget.svelte

@@ -12,10 +12,6 @@
  import { f7 } from "framework7-svelte";
  import type { ComfyGalleryNode } from "$lib/nodes/widgets";
 	import { showMobileLightbox } from "$lib/components/utils";
- import queueState from "$lib/stores/queueState";
- import uiState from "$lib/stores/uiState";
- import { loadImage } from "./utils";
- import Spinner from "$lib/components/Spinner.svelte";
 
  export let widget: WidgetLayout | null = null;
  export let isMobile: boolean = false;
@@ -29,41 +25,6 @@
 
  $: widget && setNodeValue(widget);
 
- function tagsMatch(tags: string[] | null): boolean {
-     if(tags != null && tags.length > 0)
-         return node.properties.tags.length > 0 && node.properties.tags.every(t => tags.includes(t));
-     else
-         return node.properties.tags.length === 0;
- }
-
- let previewURL: string | null;
- let previewImage: HTMLImageElement | null = null;
- let previewElem: HTMLImageElement | null = null
- $: {
-     previewURL = $queueState.previewURL;
-
-     if (previewURL && $queueState.runningPromptID && !$uiState.hidePreviews && node.properties.showPreviews) {
-         const queueEntry = queueState.getQueueEntry($queueState.runningPromptID)
-         if (queueEntry != null) {
-             const tags = queueEntry.extraData?.extra_pnginfo?.comfyBoxPrompt?.subgraphs;
-             if (tagsMatch(tags)) {
-                 loadImage(previewURL).then((img) => {
-                     previewImage = img;
-                 })
-             }
-         }
-     }
-     else {
-         previewImage = null;
-     }
- }
-
- function showPreview() {
- }
-
- function hidePreview() {
- }
-
  function setNodeValue(widget: WidgetLayout) {
      if (widget) {
          node = widget.node as ComfyGalleryNode
@@ -73,8 +34,6 @@
          imageHeight = node.imageHeight
          selected_image = node.selectedImage;
          forceSelectImage = node.forceSelectImage;
-         previewURL = null;
-         previewImage = null;
 
          if ($nodeValue != null) {
              if (node.properties.index < 0 || node.properties.index >= $nodeValue.length) {
@@ -110,16 +69,6 @@
      showMobileLightbox(images, selectedImage, { thumbs: images });
  }
 
- function onClickedSingle(e: CustomEvent<GradioSelectData>) {
-     const images = $nodeValue.map(comfyBoxImageToComfyURL)
-     if (isMobile) {
-         showMobileLightbox(images, 0, { thumbs: images });
-     }
-     else {
-         ImageViewer.instance.showModal(images, 0)
-     }
- }
-
  function onClicked(e: CustomEvent<HTMLImageElement>) {
      if (isMobile) {
          showMobileLightbox_(e.detail, $selected_image)
@@ -146,7 +95,6 @@
                         value={url}
                         show_label={widget.attrs.title != ""}
                         label={widget.attrs.title}
-                        on:select={onClickedSingle}
                         bind:imageWidth={$imageWidth}
                         bind:imageHeight={$imageHeight}
                     />
@@ -160,11 +108,6 @@
         <div class="wrapper comfy-gallery-widget gradio-gallery" style={widget.attrs.style || ""}>
             <Block variant="solid" padding={false}>
                 <div class="padding">
-                    {#if previewImage && $queueState.runningPromptID != null}
-                        <div class="comfy-gallery-preview" on:mouseover={hidePreview} on:mouseout={showPreview} >
-                            <img src={previewImage.src} bind:this={previewElem} on:mouseout={showPreview} />
-                        </div>
-                    {/if}
                     <Gallery
                         value={images}
                         label={widget.attrs.title}
@@ -210,29 +153,6 @@
              }
          }
      }
-
-     &:hover .comfy-gallery-preview {
-         opacity: 0%;
-     }
- }
-
- .comfy-gallery-preview {
-     position: absolute;
-     top: 0;
-     left: 0;
-     width: 100%;
-     height: 100%;
-     z-index: var(--layer-top);
-     pointer-events: none;
-     transition: opacity 0.1s linear;
-     opacity: 100%;
-
-     > img {
-         width: var(--size-full);
-         height: var(--size-full);
-         object-fit: contain;
-         border: 5px dashed var(--secondary-400);
-     }
  }
 
  .padding {

src/lib/widgets/ImageUploadWidget.svelte

@@ -230,7 +230,7 @@
         />
     {:else}
         <div class="comfy-image-editor-panel">
-            {#if _value && _value.length > 0 && canMask}
+            {#if _value && canMask}
                 {@const comfyURL = convertComfyOutputToComfyURL(_value[0])}
                 <div class="mask-canvas-wrapper" style:display={editMask ? "block" : "none"}>
                     <MaskCanvas bind:this={maskCanvasComp} fileURL={comfyURL} on:release={onMaskReleased} on:loaded={onMaskReleased} />
@@ -259,18 +259,18 @@
                     <Row>
                         {#if canMask}
                             <div>
-                                {#if editMask}
+                                <Button variant="primary" disabled={!_value} on:click={toggleEditMask}>
-                                    <Button variant="secondary" on:click={() => { clearMask(); notify("Mask cleared."); }}>
-                                        Clear Mask
-                                    </Button>
-                                {/if}
-                                <Button disabled={!_value} on:click={toggleEditMask}>
                                     {#if editMask}
                                         Show Image
                                     {:else}
                                         Edit Mask
                                     {/if}
                                 </Button>
+                                {#if editMask}
+                                    <Button variant="secondary" on:click={() => { clearMask(); notify("Mask cleared."); }}>
+                                        Clear Mask
+                                    </Button>
+                                {/if}
                             </div>
                         {/if}
                         <div>

src/lib/widgets/NumberWidget.svelte

@@ -3,7 +3,7 @@
  import { type WidgetLayout } from "$lib/stores/layoutStates";
  import { Range } from "$lib/components/gradio/form";
  import { get, type Writable } from "svelte/store";
- import { debounce, vibrateIfPossible } from "$lib/utils";
+ import { debounce } from "$lib/utils";
  import interfaceState from "$lib/stores/interfaceState";
  import { isDisabled } from "./utils"
  export let widget: WidgetLayout | null = null;
@@ -96,7 +96,7 @@
          lastDisplayValue = option;
          canVibrate = false;
          setTimeout(() => { canVibrate = true }, 30)
-         vibrateIfPossible(10)
+         navigator.vibrate(10)
      }
  }
 </script>

src/lib/widgets/RadioWidget.svelte

@@ -5,7 +5,7 @@
  import { get, type Writable, writable } from "svelte/store";
  import { isDisabled } from "./utils"
  import type { SelectData } from "@gradio/utils";
- import { clamp, vibrateIfPossible } from "$lib/utils";
+	import { clamp } from "$lib/utils";
  import type { ComfyRadioNode } from "$lib/nodes/widgets";
 
  export let widget: WidgetLayout | null = null;
@@ -34,7 +34,7 @@
  function onSelect(e: CustomEvent<SelectData>) {
      node.setValue(e.detail.value)
      node.index = e.detail.index as number
-     vibrateIfPossible(20)
+     navigator.vibrate(20)
  }
 </script>
 

src/lib/widgets/TextWidgetCodeVariant.ts

@@ -14,8 +14,7 @@ import {
     indentOnInput,
     syntaxHighlighting,
     defaultHighlightStyle,
-    foldKeymap,
+    foldKeymap
-    LRLanguage, LanguageSupport, indentNodeProp, foldNodeProp, foldInside, delimitedIndent
 } from "@codemirror/language";
 import { history, defaultKeymap, historyKeymap } from "@codemirror/commands";
 import {
@@ -28,26 +27,8 @@ import {
     type CompletionSource, autocompletion, CompletionContext, startCompletion,
     currentCompletions, completionStatus, completeFromList, acceptCompletion
 } from "@codemirror/autocomplete"
-import { styleTags, tags as t } from "@lezer/highlight"
 import DanbooruTags from "$lib/DanbooruTags";
 
-import { parser } from "./ComfyUI.grammar"
-
-export const comfyUILanguage = LRLanguage.define({
-    name: "ComfyUI",
-    parser: parser.configure({
-        props: [
-            styleTags({
-                LineComment: t.lineComment,
-                BlockComment: t.blockComment,
-            })
-        ]
-    }),
-    languageData: {
-        commentTokens: { line: "//", block: { open: "/*", close: "*/" } },
-    }
-})
-
 export const basicSetup: Extension = /*@__PURE__*/ (() => [
     lineNumbers(),
     highlightSpecialChars(),
@@ -62,7 +43,6 @@ export const basicSetup: Extension = /*@__PURE__*/ (() => [
     crosshairCursor(),
     EditorView.lineWrapping,
     DanbooruTags.getCompletionExt(),
-    new LanguageSupport(comfyUILanguage),
 
     keymap.of([
         ...closeBracketsKeymap,

src/mobile/GenToolbar.svelte

@@ -1,7 +1,6 @@
 <script lang="ts">
  import ComfyApp, { type SerializedAppState } from "$lib/components/ComfyApp";
  import workflowState, { ComfyBoxWorkflow } from "$lib/stores/workflowState";
- import { vibrateIfPossible } from "$lib/utils";
 
  import { Link, Toolbar } from "framework7-svelte"
 
@@ -12,7 +11,7 @@
  $: workflow = $workflowState.activeWorkflow;
 
  function queuePrompt() {
-     vibrateIfPossible(20) 
+     navigator.vibrate(20)
      app.runDefaultQueueAction()
  }
 </script>

src/mobile/MainToolbar.svelte

@@ -2,7 +2,7 @@
  import ComfyApp, { type SerializedAppState } from "$lib/components/ComfyApp";
  import queueState from "$lib/stores/queueState";
  import workflowState, { ComfyBoxWorkflow } from "$lib/stores/workflowState";
- import { getNodeInfo, vibrateIfPossible } from "$lib/utils"
+ import { getNodeInfo } from "$lib/utils"
  import { LayoutTextSidebarReverse, Image, Grid } from "svelte-bootstrap-icons";
 
  import { Link, Toolbar } from "framework7-svelte"
@@ -21,12 +21,12 @@
  $: workflow = $workflowState.activeWorkflow;
 
  function queuePrompt() {
-     vibrateIfPossible(20)
+     navigator.vibrate(20)
      app.runDefaultQueueAction()
  }
 
  async function refreshCombos() {
-     vibrateIfPossible(20)
+     navigator.vibrate(20)
      await app.refreshComboInNodes()
  }
 
@@ -34,7 +34,7 @@
      if (!fileInput)
          return;
 
-     vibrateIfPossible(20)
+     navigator.vibrate(20)
      app.querySave()
  }
 
@@ -42,7 +42,7 @@
      if (!fileInput)
          return;
 
-     vibrateIfPossible(20)
+     navigator.vibrate(20)
      fileInput.value = null;
      fileInput.click();
  }
@@ -52,7 +52,7 @@
 }
 
  function doSaveLocal(): void {
-     vibrateIfPossible(20)
+     navigator.vibrate(20)
      app.saveStateToLocalStorage();
  }
 

src/mobile/routes/gallery.svelte

@@ -1,8 +1,14 @@
 <script lang="ts">
  import { Page, Navbar, Block, Tabs, Tab, NavLeft, NavTitle, NavRight, Link, f7 } from "framework7-svelte"
+ import WidgetContainer from "$lib/components/WidgetContainer.svelte";
  import type ComfyApp from "$lib/components/ComfyApp";
+ import { writable, type Writable } from "svelte/store";
+ import type { IDragItem, WritableLayoutStateStore } from "$lib/stores/layoutStates";
+ import workflowState, { type ComfyBoxWorkflow, type WorkflowInstID } from "$lib/stores/workflowState";
  import interfaceState from "$lib/stores/interfaceState";
- import { convertComfyOutputToComfyURL, partition, showLightbox } from "$lib/utils";
+ import { onMount } from "svelte";
+ import GenToolbar from '../GenToolbar.svelte'
+ import { partition, showLightbox } from "$lib/utils";
 	import uiQueueState, { type QueueUIEntry } from "$lib/stores/uiQueueState";
 	import { showMobileLightbox } from "$lib/components/utils";
 	import notify from "$lib/notify";
@@ -27,7 +33,7 @@
      const _allEntries = []
      for (const entry of entries) {
          for (const image of entry.images) {
-             _allEntries.push([entry, convertComfyOutputToComfyURL(image, true)]);
+             _allEntries.push([entry, image]);
          }
      }
      allEntries = partition(_allEntries, gridCols);

src/mobile/routes/queue.svelte

@@ -8,7 +8,7 @@
  import interfaceState from "$lib/stores/interfaceState";
  import { onMount } from "svelte";
  import GenToolbar from '../GenToolbar.svelte'
- import { convertComfyOutputToComfyURL, partition, showLightbox, truncateString } from "$lib/utils";
+ import { partition, showLightbox, truncateString } from "$lib/utils";
 	import uiQueueState, { type QueueUIEntry } from "$lib/stores/uiQueueState";
 	import { showMobileLightbox } from "$lib/components/utils";
 	import queueState from "$lib/stores/queueState";
@@ -68,7 +68,7 @@
 
  function getCardImage(entry: QueueUIEntry): string {
      if (entry.images.length > 0)
-         return convertComfyOutputToComfyURL(entry.images[0])
+         return entry.images[0]
      return "https://cdn.framework7.io/placeholder/nature-1000x600-3.jpg"
  }
 </script>

src/mobile/routes/workflow.svelte

@@ -34,12 +34,12 @@
  }
 
  async function refreshCombos() {
-     vibrateIfPossible(20)
+     navigator.vibrate(20)
      await app.refreshComboInNodes()
  }
 
  function doSaveLocal(): void {
-     vibrateIfPossible(20)
+     navigator.vibrate(20)
      app.saveStateToLocalStorage();
  }
 

src/mobile/routes/workflows.svelte

@@ -3,7 +3,6 @@
  import workflowState, { ComfyBoxWorkflow, type WorkflowInstID } from "$lib/stores/workflowState";
  import { onMount } from "svelte";
  import interfaceState from "$lib/stores/interfaceState";
- import { vibrateIfPossible } from "$lib/utils";
  import { f7 } from 'framework7-svelte';
  import { XCircle } from 'svelte-bootstrap-icons';
 
@@ -32,7 +31,7 @@
      if (!fileInput)
          return;
 
-     vibrateIfPossible(20);
+     navigator.vibrate(20)
      fileInput.value = null;
      fileInput.click();
  }

src/scss/global.scss

@@ -13,6 +13,10 @@ body {
     height: 100%;
     margin: 0px;
     font-family: Arial;
+    display: block;
+    position: absolute;
+    top: 0;
+    left: 0;
 }
 
 :root {

src/tests/ComfyGraphTests.ts

@@ -1,12 +1,11 @@
 import ComfyGraph from "$lib/ComfyGraph";
-import { ComfyNumberNode, ComfyComboNode } from "$lib/nodes/widgets";
+import { ComfyNumberNode } from "$lib/nodes/widgets";
 import { ComfyBoxWorkflow } from "$lib/stores/workflowState";
 import { LiteGraph, Subgraph } from "@litegraph-ts/core";
 import { get } from "svelte/store";
 import { expect } from 'vitest';
 import UnitTest from "./UnitTest";
 import { Watch } from "@litegraph-ts/nodes-basic";
-import type { SerializedComfyWidgetNode } from "$lib/nodes/widgets/ComfyWidgetNode";
 
 export default class ComfyGraphTests extends UnitTest {
     test__onNodeAdded__updatesLayoutState() {
@@ -108,24 +107,4 @@ export default class ComfyGraphTests extends UnitTest {
 
         expect(serNode.outputs[0]._data).toBeUndefined()
     }
-
-    test__serialize__savesComboData() {
-        const [{ graph }, layoutState] = ComfyBoxWorkflow.create()
-        layoutState.initDefaultLayout()
-
-        const widget = LiteGraph.createNode(ComfyComboNode);
-        const watch = LiteGraph.createNode(Watch);
-        graph.add(widget)
-        graph.add(watch)
-
-        widget.connect(0, watch, 0)
-        widget.properties.values = ["A", "B", "C"]
-        widget.setValue("B");
-
-        const result = graph.serialize();
-
-        const serNode = result.nodes.find(n => n.id === widget.id) as SerializedComfyWidgetNode;
-
-        expect(serNode.comfyValue).toBe("B")
-    }
 }

src/tests/stores/journeyStatesTests.ts

@@ -0,0 +1,99 @@
+import { get } from "svelte/store";
+import journeyState, { type JourneyState } from "$lib/stores/journeyState"
+import { expect } from 'vitest';
+import UnitTest from "../UnitTest";
+import { Watch } from "@litegraph-ts/nodes-basic";
+import { ComfyBoxWorkflow } from "$lib/stores/workflowState";
+import { ComfyNumberNode } from "$lib/nodes/widgets";
+import { LiteGraph } from "@litegraph-ts/core";
+import { getWorkflowRestoreParamsFromWorkflow } from "$lib/restoreParameters";
+import { calculateWorkflowParamsPatch } from "$lib/stores/journeyStates";
+
+export default class journeyStateTests extends UnitTest {
+    test__patches() {
+        const [workflow, layoutState] = ComfyBoxWorkflow.create()
+        const { graph, journey } = workflow;
+        layoutState.initDefaultLayout() // adds 3 containers
+
+        const widget1 = LiteGraph.createNode(ComfyNumberNode);
+        const widget2 = LiteGraph.createNode(ComfyNumberNode);
+        const watch1 = LiteGraph.createNode(Watch);
+        const watch2 = LiteGraph.createNode(Watch);
+
+        graph.add(widget1)
+        graph.add(watch1)
+        graph.add(widget2)
+        graph.add(watch2)
+
+        widget1.connect(0, watch1, 0);
+        widget2.connect(0, watch2, 0);
+        widget1.setValue(0)
+        widget2.setValue(0)
+
+        let workflowParams = getWorkflowRestoreParamsFromWorkflow(workflow)
+        const root = journey.addNode(workflowParams, null);
+
+        expect(root).toEqual({
+            id: root.id,
+            type: "root",
+            children: [],
+            base: {
+                [widget1.id]: {
+                    type: "workflow",
+                    finalValue: 0,
+                },
+                [widget2.id]: {
+                    type: "workflow",
+                    finalValue: 0,
+                }
+            }
+        });
+
+        widget1.setValue(5)
+
+        workflowParams = getWorkflowRestoreParamsFromWorkflow(workflow)
+        const patchParams = calculateWorkflowParamsPatch(root, workflowParams)
+        const patch = journey.addNode(patchParams, root.id);
+
+        expect(patch).toEqual({
+            id: patch.id,
+            type: "patch",
+            parent: root,
+            children: [],
+            patch: {
+                [widget1.id]: {
+                    type: "workflow",
+                    finalValue: 5
+                },
+            }
+        })
+    }
+
+    test__patches_exclusions() {
+        const [workflow, layoutState] = ComfyBoxWorkflow.create()
+        const { graph, journey } = workflow;
+        layoutState.initDefaultLayout() // adds 3 containers
+
+        const widget1 = LiteGraph.createNode(ComfyNumberNode);
+        const widget2 = LiteGraph.createNode(ComfyNumberNode);
+        const watch1 = LiteGraph.createNode(Watch);
+        const watch2 = LiteGraph.createNode(Watch);
+
+        graph.add(widget1)
+        graph.add(watch1)
+
+        widget1.properties.excludeFromJourney = true;
+        widget1.connect(0, watch1, 0);
+        widget1.setValue(0)
+
+        let workflowParams = getWorkflowRestoreParamsFromWorkflow(workflow)
+        const root = journey.addNode(workflowParams, null);
+
+        expect(root).toEqual({
+            id: root.id,
+            type: "root",
+            children: [],
+            base: {}
+        });
+    }
+}

src/tests/testSuite.ts

@@ -4,3 +4,4 @@ export { default as parseA1111Tests } from "./parseA1111Tests"
 export { default as convertA1111ToStdPromptTests } from "./convertA1111ToStdPromptTests"
 export { default as convertVanillaWorkflowTest } from "./convertVanillaWorkflowTests"
 export { default as configStateTests } from "./stores/configStateTests"
+export { default as journeyStates } from "./stores/journeyStatesTests"

vite.config.ts

@@ -8,12 +8,11 @@ import removeConsole from 'vite-plugin-svelte-console-remover';
 import glsl from 'vite-plugin-glsl';
 import { execSync } from "child_process"
 import { visualizer } from "rollup-plugin-visualizer";
-import { lezer } from "@lezer/generator/rollup"
 
 const isProduction = process.env.NODE_ENV === "production";
 console.log("Production build: " + isProduction)
 
-const commitHash = execSync('git rev-parse HEAD').toString();
+const commitHash = execSync('git rev-parse HEAD').toString().trim();
 console.log("Commit: " + commitHash)
 
 export default defineConfig({
@@ -32,7 +31,6 @@ export default defineConfig({
         isProduction && removeConsole(),
         glsl(),
         svelte(),
-        lezer(),
         visualizer(),
         viteStaticCopy({
             targets: [